commit bd885cf0fa9ab0c0d5ed7fa3acc6987b212a3007
Author: admin <admin@kottgard.se>
Date:   Fri Jun 19 15:46:24 2026 +0000

    Initial commit: Kottgard testing website code

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5e10cc7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,34 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a1c21f2
--- /dev/null
+++ b/README.md
@@ -0,0 +1,69 @@
+# Kött Gård — Premium Halal Meat Delivery
+
+A modern, premium e-commerce website for 100% Halal meat delivery. Built with Next.js, TypeScript, and Tailwind CSS.
+
+## Features
+
+- **Premium Design** — Green, white, and gold color palette with luxurious typography
+- **Multi-language** — Swedish (default), English, and Urdu with RTL support
+- **Product Customization**
+  - Chicken: Choose quantity in pieces (4, 8, 10, 12, 14)
+  - Beef & Lamb: Choose cutting style (Nihari, Karahi, Qeema, Boneless, Steak)
+  - Fish: Standard professional cut
+- **Full E-commerce Flow** — Shop, product details, cart, secure checkout
+- **User Accounts** — Registration, login, order history
+- **Wishlist** — Save favorite products
+- **Responsive** — Mobile-first design
+- **SEO Optimized** — Meta tags, semantic HTML, Open Graph
+
+## Getting Started
+
+```bash
+npm install
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000).
+
+### Demo Account
+
+- Email: `demo@kottgard.se`
+- Password: `demo123`
+
+### Languages
+
+Use the language bar or globe icon to switch between:
+- **Svenska** (Swedish) — default
+- **English**
+- **اردو** (Urdu) — RTL
+- **العربية** (Arabic) — RTL
+- **فارسی** (Persian) — RTL
+- **Türkçe** (Turkish)
+
+## Tech Stack
+
+- **Framework:** Next.js 13 (App Router)
+- **Language:** TypeScript
+- **Styling:** Tailwind CSS
+- **State:** Zustand (persisted cart, auth, wishlist, locale)
+- **i18n:** Custom translation system with locale store
+- **Icons:** Lucide React
+
+## Project Structure (Clean Architecture)
+
+```
+src/
+├── domain/           # Entities + business rules (no React/Next)
+├── application/      # Use cases, ports, container.ts
+├── infrastructure/   # Zustand, product data, i18n adapters
+├── presentation/     # useCart, useAuth, useCatalog hooks
+├── app/              # Next.js pages (thin UI)
+├── components/       # React UI components
+├── i18n/             # Translation dictionaries (en, sv, ur)
+├── hooks/            # useTranslation
+├── lib/              # Backward-compatible facades
+├── store/            # Backward-compatible re-exports
+└── types/            # Re-exports domain entities
+```
+
+See **[docs/CLEAN-ARCHITECTURE.md](docs/CLEAN-ARCHITECTURE.md)** for the full step-by-step guide.
\ No newline at end of file
diff --git a/docs/CLEAN-ARCHITECTURE.md b/docs/CLEAN-ARCHITECTURE.md
new file mode 100644
index 0000000..05d551e
--- /dev/null
+++ b/docs/CLEAN-ARCHITECTURE.md
@@ -0,0 +1,365 @@
+# Kött Gård — Clean Architecture Guide
+
+This document explains **what we changed**, **why**, and **how to work in the new structure**.
+
+---
+
+## What is Clean Architecture?
+
+Clean Architecture splits code into **layers**. Inner layers hold business rules. Outer layers hold frameworks (React, Next.js, Zustand, localStorage).
+
+**Golden rule:** Dependencies point **inward only**.
+
+```
+Presentation  →  Application  →  Domain
+Infrastructure  →  Application  →  Domain
+
+Domain imports NOTHING from outside itself.
+```
+
+---
+
+## Before vs After
+
+### Before (mixed responsibilities)
+
+```
+page.tsx          → filter products, calculate delivery fee, create orders
+store/cart.ts     → persistence + merge logic + totals
+lib/products.ts   → data + queries in one file
+```
+
+Problems:
+- Delivery fee `total > 500 ? 0 : 49` was copy-pasted in cart **and** checkout
+- Shop filtering logic lived inside the React page
+- Hard to swap localStorage for a real API later
+
+### After (separated layers)
+
+| Layer | Folder | Job |
+|-------|--------|-----|
+| **Domain** | `src/domain/` | Business rules — cart math, delivery fee, order IDs |
+| **Application** | `src/application/` | Use cases + ports (interfaces) |
+| **Infrastructure** | `src/infrastructure/` | Zustand, product data file, i18n adapter |
+| **Presentation** | `src/app/`, `src/components/`, `src/presentation/hooks/` | UI only — calls use cases |
+
+---
+
+## Layer diagram
+
+```mermaid
+flowchart TB
+    subgraph Presentation
+        P1[app/pages]
+        P2[components]
+        P3[presentation/hooks]
+    end
+
+    subgraph Application
+        A1[use-cases]
+        A2[ports interfaces]
+        A3[container.ts]
+    end
+
+    subgraph Domain
+        D1[entities]
+        D2[domain services]
+    end
+
+    subgraph Infrastructure
+        I1[Zustand stores]
+        I2[InMemoryProductRepository]
+        I3[products.data.ts]
+    end
+
+    P1 --> P3
+    P3 --> A3
+    A3 --> A1
+    A1 --> A2
+    A1 --> D2
+    A2 -.implemented by.- I1
+    A2 -.implemented by.- I2
+    I2 --> I3
+    D2 --> D1
+```
+
+---
+
+## Step-by-step: what we did
+
+### Step 1 — Domain entities (`src/domain/entities/`)
+
+**What:** Moved `Product`, `CartItem`, `Order`, `User`, etc. from `types/` into the domain.
+
+**Why:** Entities are the core vocabulary of the business. They must not depend on React or Next.js.
+
+**Example:** `Product` describes a meat item (price, category, slug) — not how it is rendered.
+
+```
+src/domain/entities/index.ts
+```
+
+`src/types/index.ts` now **re-exports** domain entities so old imports still work.
+
+---
+
+### Step 2 — Domain services (`src/domain/services/`)
+
+**What:** Pure functions / classes for business rules.
+
+| Service | Rule extracted from |
+|---------|---------------------|
+| `CartDomainService` | `store/cart.ts` — add item, merge duplicates, totals |
+| `DeliveryFeeService` | `cart/page.tsx` + `checkout/page.tsx` — 49 kr fee, free over 500 kr |
+| `CustomizationDomainService` | `lib/customization.ts` — cut styles, cart line keys |
+| `OrderDomainService` | `checkout/page.tsx` — order ID format, order object shape |
+| `AuthDomainService` | `store/auth.ts` — demo password check, user creation |
+| `CatalogDomainService` | `shop/page.tsx` — filter by category, search, sort |
+
+**Why:** One place per rule. Change delivery threshold once → cart and checkout both update.
+
+**Example — delivery fee (single source of truth):**
+
+```typescript
+// src/domain/constants/commerce.ts
+export const FREE_DELIVERY_THRESHOLD_SEK = 500;
+export const STANDARD_DELIVERY_FEE_SEK = 49;
+
+// src/domain/services/DeliveryFeeService.ts
+static calculateDeliveryFee(subtotal: number): number {
+  return subtotal > FREE_DELIVERY_THRESHOLD_SEK ? 0 : STANDARD_DELIVERY_FEE_SEK;
+}
+```
+
+---
+
+### Step 3 — Application ports (`src/application/ports/`)
+
+**What:** TypeScript **interfaces** describing what the app needs — not how it is stored.
+
+| Port | Contract |
+|------|----------|
+| `IProductRepository` | `findAll()`, `findBySlug()`, `findFeatured()` |
+| `ICartRepository` | `getItems()`, `addItem()`, `clearCart()` |
+| `IAuthRepository` | `login()`, `register()`, `addOrder()` |
+| `IWishlistRepository` | `toggleItem()`, `isInWishlist()` |
+| `ITranslationService` | `translate(key)` |
+
+**Why:** Today products live in a static array. Tomorrow they might come from Shopify or a database. **Only the infrastructure adapter changes** — use cases stay the same.
+
+---
+
+### Step 4 — Use cases (`src/application/use-cases/`)
+
+**What:** One class per user action. Orchestrates domain + ports.
+
+| Use case | Replaces logic in |
+|----------|-------------------|
+| `FilterProductsUseCase` | Shop page filtering/sorting |
+| `GetProductBySlugUseCase` | `getProductBySlug()` calls |
+| `LocalizeProductUseCase` | `lib/product-i18n.ts` |
+| `AddToCartUseCase` | Cart add button |
+| `GetCartSummaryUseCase` | Cart totals + delivery |
+| `PlaceOrderUseCase` | Checkout submit handler |
+| `LoginUseCase` / `RegisterUseCase` | Login page |
+
+**Example — checkout flow:**
+
+```
+User clicks Pay
+    → PlaceOrderUseCase.execute()
+        → OrderDomainService.createOrder()     [domain]
+        → authRepository.addOrder()            [port]
+        → cartRepository.clearCart()           [port]
+```
+
+File: `src/application/use-cases/checkout/PlaceOrder.ts`
+
+---
+
+### Step 5 — Infrastructure (`src/infrastructure/`)
+
+**What:** Concrete implementations of ports + framework code.
+
+| File | Role |
+|------|------|
+| `data/products.data.ts` | Static 16-product catalog |
+| `repositories/InMemoryProductRepository.ts` | Implements `IProductRepository` |
+| `persistence/zustand/cartStore.ts` | Zustand + `ZustandCartRepository` |
+| `persistence/zustand/authStore.ts` | Auth persistence + demo user |
+| `persistence/zustand/wishlistStore.ts` | Wishlist persistence |
+| `i18n/I18nTranslationService.ts` | Wraps existing `i18n/` dictionaries |
+
+**Why Zustand stays:** It is an **infrastructure detail** (browser storage). The application layer only sees `ICartRepository`.
+
+---
+
+### Step 6 — Composition root (`src/application/container.ts`)
+
+**What:** One file that wires everything together.
+
+```typescript
+export const container = new ApplicationContainer();
+// container.addToCart.execute(...)
+// container.getCartSummary.execute()
+// container.placeOrder.execute(...)
+```
+
+**Why:** Pages and hooks do not `new InMemoryProductRepository()` themselves. That would couple UI to infrastructure. The container is the **only** place that knows concrete classes.
+
+---
+
+### Step 7 — Presentation hooks (`src/presentation/hooks/`)
+
+**What:** React-friendly API on top of the container.
+
+| Hook | Use in |
+|------|--------|
+| `useCart()` | Cart page, Header, product page |
+| `useAuth()` | Login, account, checkout |
+| `useWishlist()` | Product card, wishlist page |
+| `useCheckout()` | Checkout submit |
+| `useCatalogFilter()` | Shop page |
+
+**Example:**
+
+```typescript
+// Old (page knew about Zustand internals + business math)
+const { getTotal } = useCartStore();
+const deliveryFee = total > 500 ? 0 : 49;
+
+// New (page uses use case result)
+const { summary } = useCart();
+const { subtotal, deliveryFee, grandTotal } = summary;
+```
+
+---
+
+### Step 8 — Backward-compatible facades
+
+Old paths still work so nothing breaks silently:
+
+| Old import | Now points to |
+|------------|---------------|
+| `@/types` | `@/domain/entities` |
+| `@/lib/customization` | `CustomizationDomainService` |
+| `@/lib/products` | `container.productRepository` |
+| `@/store/cart` | infrastructure + `useCart` hook |
+
+---
+
+## New folder map
+
+```
+src/
+├── domain/
+│   ├── entities/           # Product, Order, CartItem…
+│   ├── constants/          # FREE_DELIVERY_THRESHOLD_SEK
+│   └── services/           # CartDomainService, DeliveryFeeService…
+│
+├── application/
+│   ├── ports/              # IProductRepository, ICartRepository…
+│   ├── use-cases/          # AddToCart, PlaceOrder, FilterProducts…
+│   ├── dtos/               # LocalizedProduct, CartSummary
+│   └── container.ts        # ★ wires everything
+│
+├── infrastructure/
+│   ├── data/               # products.data.ts, demo-orders.data.ts
+│   ├── repositories/       # InMemoryProductRepository
+│   ├── persistence/zustand/  # Stores + repository adapters
+│   └── i18n/               # I18nTranslationService
+│
+├── presentation/
+│   └── hooks/              # useCart, useAuth, useCatalog…
+│
+├── app/                    # Thin pages (UI + hooks)
+├── components/             # Visual components
+├── hooks/useTranslation.ts # Still used for t('key')
+├── lib/                    # Facades (backward compat)
+├── store/                  # Re-exports (backward compat)
+└── types/                  # Re-exports (backward compat)
+```
+
+---
+
+## How to add a feature (cheat sheet)
+
+### Change delivery fee rule
+1. Edit `src/domain/constants/commerce.ts`
+2. Done — `GetCartSummaryUseCase` and `PlaceOrderUseCase` pick it up automatically
+
+### Add a new product
+1. Add entry in `src/infrastructure/data/products.data.ts`
+2. Add translations in `src/i18n/locales/*.ts`
+
+### Add a new page action (e.g. "apply coupon")
+1. Add rule in `src/domain/services/` if it is business logic
+2. Add port method if it needs storage
+3. Create `src/application/use-cases/cart/ApplyCoupon.ts`
+4. Register in `container.ts`
+5. Expose via `useCart()` or new hook
+6. Call from page/component
+
+### Replace static products with an API
+1. Create `src/infrastructure/repositories/ApiProductRepository.ts` implementing `IProductRepository`
+2. In `container.ts`, swap `InMemoryProductRepository` → `ApiProductRepository`
+3. **No changes** to shop page, use cases, or domain
+
+---
+
+## Dependency rules (memorize this)
+
+| Layer | Can import |
+|-------|------------|
+| Domain | Only domain |
+| Application | Domain + its own ports/DTOs |
+| Infrastructure | Application ports + Domain |
+| Presentation | Application container + hooks + React |
+
+| Layer | Cannot import |
+|-------|---------------|
+| Domain | React, Next, Zustand, `app/`, `components/` |
+| Application | Zustand, `page.tsx`, JSX |
+| Use cases | Concrete repositories (only interfaces) |
+
+---
+
+## Request flow example: Add to cart
+
+```mermaid
+sequenceDiagram
+    participant Page as product/page.tsx
+    participant Hook as useCart()
+    participant UC as AddToCartUseCase
+    participant Repo as ZustandCartRepository
+    participant Domain as CartDomainService
+    participant Store as Zustand persist
+
+    Page->>Hook: addItem(product, customization, label)
+    Hook->>UC: execute(...)
+    UC->>Repo: addItem(...)
+    Repo->>Domain: addItem(items, product, ...)
+    Domain-->>Repo: newItems[]
+    Repo->>Store: setItems(newItems)
+    Store-->>Page: React re-render
+```
+
+---
+
+## Verify the project
+
+```bash
+cd /Users/apple/Desktop/code/Kottgard
+npm run build    # must pass
+npm run dev      # test at http://localhost:3000
+```
+
+Demo login: `demo@kottgard.se` / `demo123`
+
+---
+
+## Further reading
+
+- Uncle Bob — Clean Architecture (concentric circles diagram)
+- This project's annotated code: `docs/annotated/src/`
+- Beginner folder map: `~/Desktop/Kottgard-Project-Learn/`
\ No newline at end of file
diff --git a/docs/Kottgard-Website-Guide.docx b/docs/Kottgard-Website-Guide.docx
new file mode 100644
index 0000000..52037ae
Binary files /dev/null and b/docs/Kottgard-Website-Guide.docx differ
diff --git a/docs/annotate-all.mjs b/docs/annotate-all.mjs
new file mode 100644
index 0000000..c1e6eea
--- /dev/null
+++ b/docs/annotate-all.mjs
@@ -0,0 +1,195 @@
+/**
+ * Generates line-by-line annotated copies of every src/ file.
+ * Output: docs/annotated/src/**  (mirrors src/ structure)
+ * Run: node docs/annotate-all.mjs
+ */
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.join(__dirname, '..');
+const SRC = path.join(ROOT, 'src');
+const OUT = path.join(__dirname, 'annotated', 'src');
+
+function explainLine(line, lineNum, relPath) {
+  const t = line.trim();
+  const indent = line.match(/^(\s*)/)[1];
+
+  if (t === '') return `${indent}// (blank line — separates logical blocks for readability)`;
+  if (t.startsWith('/**') || t.startsWith('*') || t.startsWith('*/'))
+    return `${indent}// Block comment — documents the file or function below`;
+  if (t.startsWith('//')) return line;
+
+  if (t === "'use client';" || t === '"use client";')
+    return `${indent}// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)`;
+  if (t.startsWith('import type '))
+    return `${indent}// Type-only import — erased at compile time; no JavaScript bundle cost`;
+  if (t.startsWith('import ')) {
+    if (t.includes("from 'react'") || t.includes('from "react"'))
+      return `${indent}// Import React — core UI library (components, hooks, JSX)`;
+    if (t.includes('next/link'))
+      return `${indent}// Next.js Link — fast client-side navigation without full page reload`;
+    if (t.includes('next/image'))
+      return `${indent}// Next.js Image — optimized images (lazy load, WebP/AVIF)`;
+    if (t.includes('next/navigation'))
+      return `${indent}// Next.js App Router hooks — useRouter, useParams, useSearchParams`;
+    if (t.includes('next/font'))
+      return `${indent}// Self-hosted Google fonts — better performance than external CSS`;
+    if (t.includes('lucide-react'))
+      return `${indent}// Lucide icons — lightweight SVG icon components`;
+    if (t.includes('zustand'))
+      return `${indent}// Zustand — simple global state store (cart, auth, locale)`;
+    if (t.includes('@/'))
+      return `${indent}// Import project module (@/ alias = src/ folder in tsconfig)`;
+    if (t.includes("'./") || t.includes('"./'))
+      return `${indent}// Import from a relative file in the same project`;
+    return `${indent}// Import external package or local module`;
+  }
+
+  if (t.startsWith('export type ') || t.startsWith('export interface '))
+    return `${indent}// Export TypeScript type — defines data shape used across the app`;
+  if (t.startsWith('interface '))
+    return `${indent}// TypeScript interface — contract for object properties and methods`;
+  if (t.startsWith('type '))
+    return `${indent}// TypeScript type alias — union or shorthand for complex types`;
+  if (t.startsWith('export default function'))
+    return `${indent}// Default export — main component/page Next.js or other files import`;
+  if (t.startsWith('export function'))
+    return `${indent}// Named export — utility function other files can import`;
+  if (t.startsWith('export const '))
+    return `${indent}// Named export constant — shared config/data imported elsewhere`;
+  if (t.startsWith('const ') && t.includes('= create<'))
+    return `${indent}// Create Zustand store — global state hook (useXxxStore)`;
+  if (t.startsWith('const ') && t.includes('useState'))
+    return `${indent}// React useState — local component state that triggers re-render on change`;
+  if (t.startsWith('const ') && t.includes('useMemo'))
+    return `${indent}// React useMemo — cache expensive computed value until dependencies change`;
+  if (t.startsWith('const ') && t.includes('useCallback'))
+    return `${indent}// React useCallback — stable function reference for useEffect/useMemo deps`;
+  if (t.startsWith('const ') && t.includes('useEffect'))
+    return `${indent}// React useEffect — run side effect after render (sync URL, redirect, etc.)`;
+  if (t.startsWith('const ') && t.includes('useRouter'))
+    return `${indent}// Next.js router — programmatic navigation (router.push)`;
+  if (t.startsWith('const ') && t.includes('useSearchParams'))
+    return `${indent}// Read URL query string (?category=beef&q=steak)`;
+  if (t.startsWith('const ') && t.includes('useParams'))
+    return `${indent}// Read dynamic route segment ([slug] from URL)`;
+  if (t.startsWith('const ') && t.includes('useTranslation'))
+    return `${indent}// Custom hook — returns t() translator and current locale`;
+  if (t.startsWith('const ') && t.includes('useCartStore') || t.startsWith('const ') && t.includes('useAuthStore') || t.startsWith('const ') && t.includes('useWishlistStore') || t.startsWith('const ') && t.includes('useLocaleStore'))
+    return `${indent}// Zustand selector — subscribe to slice of global store`;
+  if (t.startsWith('function '))
+    return `${indent}// Function declaration — reusable logic in this file`;
+  if (t.startsWith('return ('))
+    return `${indent}// Return JSX — describes UI tree React renders to the DOM`;
+  if (t.startsWith('return '))
+    return `${indent}// Return value from function`;
+  if (t.startsWith('if (') || t.startsWith('} else if ('))
+    return `${indent}// Conditional branch — different behavior based on runtime value`;
+  if (t.startsWith('switch ('))
+    return `${indent}// Switch — multiple branches on one variable (e.g. sort order)`;
+  if (t.startsWith('case '))
+    return `${indent}// Switch case — handle one specific value`;
+  if (t.startsWith('default:'))
+    return `${indent}// Switch default — fallback when no case matches`;
+  if (t.startsWith('useEffect('))
+    return `${indent}// Side effect hook — runs after paint; deps array controls when it re-runs`;
+  if (t.includes('.map('))
+    return `${indent}// Array.map — transform each item (often render a list of components)`;
+  if (t.includes('.filter('))
+    return `${indent}// Array.filter — keep items matching condition (search, category)`;
+  if (t.includes('.sort('))
+    return `${indent}// Array.sort — reorder items (price, name, featured)`;
+  if (t.includes('.find('))
+    return `${indent}// Array.find — get first matching item or undefined`;
+  if (t.includes('.reduce('))
+    return `${indent}// Array.reduce — accumulate single value (cart total, item count)`;
+  if (t.startsWith('<') && !t.startsWith('<>'))
+    return `${indent}// JSX element — HTML-like tag becomes React component in browser`;
+  if (t.startsWith('<>') || t === '</>')
+    return `${indent}// React Fragment — group elements without extra wrapper DOM node`;
+  if (t.startsWith('{/*'))
+    return `${indent}// JSX comment — not visible in browser`;
+  if (t.startsWith('className='))
+    return `${indent}// Tailwind CSS utility classes — styling (colors, spacing, layout)`;
+  if (t.startsWith('href='))
+    return `${indent}// Link target URL — internal route or external https://`;
+  if (t.startsWith('onClick='))
+    return `${indent}// Click handler — runs when user clicks (must be client component)`;
+  if (t.startsWith('onChange='))
+    return `${indent}// Change handler — runs when input/select value changes`;
+  if (t.startsWith('aria-'))
+    return `${indent}// Accessibility attribute — screen readers and assistive tech`;
+  if (t.startsWith('}'))
+    return `${indent}// Closing brace — end of block (function, if, object, JSX)`;
+  if (t.startsWith(']') || t.startsWith('];'))
+    return `${indent}// End of array literal`;
+  if (t.endsWith(',') && !t.includes('//'))
+    return `${indent}// Property or array item — trailing comma allowed in TypeScript`;
+  if (relPath.includes('locales/') && t.match(/^\s{2}\w+:/))
+    return `${indent}// i18n translation section — keys used by t('section.key') in components`;
+  if (relPath.includes('locales/') && t.includes("name:") || relPath.includes('locales/') && t.includes("title:"))
+    return `${indent}// Translated UI string for current language (sv / en / ur)`;
+  if (relPath.includes('products.ts'))
+    return `${indent}// Product catalog entry — demo data shown in shop and product pages`;
+  if (t.includes('persist('))
+    return `${indent}// Zustand persist — save store to localStorage between visits`;
+
+  return `${indent}// Line ${lineNum}: ${t.length > 60 ? t.slice(0, 57) + '...' : t || 'code'}`;
+}
+
+function annotateFile(content, relPath) {
+  const lines = content.split('\n');
+  const ext = relPath.endsWith('.tsx') ? 'tsx' : 'ts';
+  const header = [
+    `/**`,
+    ` * ANNOTATED COPY — every line explained`,
+    ` * Source: src/${relPath}`,
+    ` * NOT used by the app — read this to learn how the real file works`,
+    ` */`,
+    '',
+  ];
+
+  const body = lines.map((line, i) => {
+    const comment = explainLine(line, i + 1, relPath);
+    if (line.trim().startsWith('//') && comment === line) return line;
+    if (line.trim() === '' && comment.includes('blank')) return comment;
+    return `${comment}\n${line}`;
+  });
+
+  return header.join('\n') + body.join('\n') + '\n';
+}
+
+function walk(dir, base = '') {
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  let count = 0;
+  for (const e of entries) {
+    const rel = base ? `${base}/${e.name}` : e.name;
+    const full = path.join(dir, e.name);
+    if (e.isDirectory()) {
+      count += walk(full, rel);
+    } else if (/\.(ts|tsx)$/.test(e.name)) {
+      const content = fs.readFileSync(full, 'utf8');
+      const annotated = annotateFile(content, rel);
+      const outName = e.name.replace(/\.(tsx?)$/, '.annotated.$1');
+      const outDir = path.join(OUT, base);
+      fs.mkdirSync(outDir, { recursive: true });
+      fs.writeFileSync(path.join(outDir, outName), annotated);
+      count++;
+    }
+  }
+  return count;
+}
+
+// Remove old flat annotated files (replaced by src/ mirror)
+const oldFlat = path.join(__dirname, 'annotated');
+for (const f of fs.readdirSync(oldFlat)) {
+  if (f.endsWith('.annotated.ts') || f.endsWith('.annotated.tsx')) {
+    if (!f.startsWith('0')) continue;
+    try { fs.unlinkSync(path.join(oldFlat, f)); } catch (_) {}
+  }
+}
+
+const n = walk(SRC);
+console.log(`Annotated ${n} files → docs/annotated/src/`);
\ No newline at end of file
diff --git a/docs/annotated/README.md b/docs/annotated/README.md
new file mode 100644
index 0000000..3e892f2
--- /dev/null
+++ b/docs/annotated/README.md
@@ -0,0 +1,63 @@
+# Annotated Source Code — Every Line Explained
+
+This folder contains **annotated copies** of **every** file in `src/`. Each line of the original code is followed or preceded by a comment explaining:
+
+- **What** the syntax means (TypeScript, React, Next.js)
+- **Why** it exists in the Kött Gård project
+
+Production code in `src/` stays clean. Learning comments live here only.
+
+## Regenerate all annotations
+
+```bash
+node docs/annotate-all.mjs
+```
+
+Run this after you change source files to refresh the annotated copies.
+
+## Folder mirror
+
+```
+docs/annotated/src/          ← you are here (annotated)
+src/                         ← real app code (no line comments)
+```
+
+| Annotated path | Original path |
+|----------------|---------------|
+| `docs/annotated/src/app/page.annotated.tsx` | `src/app/page.tsx` |
+| `docs/annotated/src/lib/products.annotated.ts` | `src/lib/products.ts` |
+| `docs/annotated/src/store/cart.annotated.ts` | `src/store/cart.ts` |
+| … | (52 files total) |
+
+## File categories
+
+| Folder | What it contains |
+|--------|------------------|
+| `app/` | Pages and routes (Next.js App Router) |
+| `components/` | Reusable UI (home sections, layout, product cards) |
+| `lib/` | Data, images, constants, helpers |
+| `store/` | Zustand global state (cart, auth, wishlist, locale) |
+| `i18n/` | Translations (Swedish, English, Urdu) |
+| `hooks/` | Custom React hooks |
+| `types/` | TypeScript interfaces |
+
+## How to read
+
+1. Open the **original** file in `src/` in your editor.
+2. Open the matching **`.annotated.ts`** or **`.annotated.tsx`** file side-by-side.
+3. Read the gray `//` comment above each line, then the code.
+
+## Programming languages in this project
+
+| Language | Role |
+|----------|------|
+| **TypeScript** | Types catch errors before run; interfaces for Product, Cart, Order |
+| **React 18** | Components + JSX UI; hooks for state and effects |
+| **Next.js 13** | File-based routing, layouts, metadata, image optimization |
+| **Tailwind CSS** | Utility classes for burgundy/cream/gold design |
+| **Zustand** | Global stores with `persist` → localStorage |
+
+## Related documents
+
+- Word guide: `docs/Kottgard-Website-Guide.docx`
+- Visual guide: `../kottgard documentation/16-website-visual-and-code-guide.md`
\ No newline at end of file
diff --git a/docs/annotated/src/app/about/page.annotated.tsx b/docs/annotated/src/app/about/page.annotated.tsx
new file mode 100644
index 0000000..011e6e1
--- /dev/null
+++ b/docs/annotated/src/app/about/page.annotated.tsx
@@ -0,0 +1,249 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/app/about/page.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Lucide icons — lightweight SVG icon components
+import { ShieldCheck, Leaf, Award, Truck, Phone, Mail, MapPin } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Import external package or local module
+import {
+  // Property or array item — trailing comma allowed in TypeScript
+  SITE_ADDRESS,
+  // Property or array item — trailing comma allowed in TypeScript
+  SITE_EMAIL,
+  // Property or array item — trailing comma allowed in TypeScript
+  SITE_PHONE_DISPLAY,
+  // Property or array item — trailing comma allowed in TypeScript
+  SITE_HOURS,
+// Closing brace — end of block (function, if, object, JSX)
+} from '@/lib/constants';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function AboutPage() {
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+  // Line 15: const telHref = `tel:${SITE_PHONE_DISPLAY.replace(/\s/g, ...
+  const telHref = `tel:${SITE_PHONE_DISPLAY.replace(/\s/g, '')}`;
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div>
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="bg-gradient-to-br from-brand-900 to-brand-950 px-4 py-20 text-white sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mx-auto max-w-3xl text-center">
+          // JSX element — HTML-like tag becomes React component in browser
+          <h1 className="mb-4 font-display text-4xl font-bold">
+            // Line 22: {t('about.title', { name: t('site.name') })}
+            {t('about.title', { name: t('site.name') })}
+          // JSX element — HTML-like tag becomes React component in browser
+          </h1>
+          // JSX element — HTML-like tag becomes React component in browser
+          <p className="text-lg text-brand-100">{t('about.subtitle')}</p>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+// (blank line — separates logical blocks for readability)
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <section className="mb-16">
+          // JSX element — HTML-like tag becomes React component in browser
+          <h2 className="section-heading mb-4">{t('about.ourStory')}</h2>
+          // JSX element — HTML-like tag becomes React component in browser
+          <p className="mb-4 leading-relaxed text-gray-600">
+            // Line 32: {t('about.storyP1', { name: t('site.name') })}
+            {t('about.storyP1', { name: t('site.name') })}
+          // JSX element — HTML-like tag becomes React component in browser
+          </p>
+          // JSX element — HTML-like tag becomes React component in browser
+          <p className="leading-relaxed text-gray-600">{t('about.storyP2')}</p>
+        // JSX element — HTML-like tag becomes React component in browser
+        </section>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <section id="halal" className="mb-16">
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="mb-6 flex items-center gap-3">
+            // JSX element — HTML-like tag becomes React component in browser
+            <ShieldCheck className="h-8 w-8 text-brand-700" />
+            // JSX element — HTML-like tag becomes React component in browser
+            <h2 className="section-heading">{t('about.halalTitle')}</h2>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+          // JSX element — HTML-like tag becomes React component in browser
+          <p className="leading-relaxed text-gray-600">
+            // Line 43: {t('about.halalDesc', { name: t('site.name') })}
+            {t('about.halalDesc', { name: t('site.name') })}
+          // JSX element — HTML-like tag becomes React component in browser
+          </p>
+        // JSX element — HTML-like tag becomes React component in browser
+        </section>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <section className="mb-16">
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="grid gap-6 sm:grid-cols-3">
+            // Line 49: {[
+            {[
+              // Property or array item — trailing comma allowed in TypeScript
+              { icon: Leaf, title: t('about.freshDaily'), desc: t('about.freshDailyDesc') },
+              // Line 51: {
+              {
+                // Property or array item — trailing comma allowed in TypeScript
+                icon: Award,
+                // Property or array item — trailing comma allowed in TypeScript
+                title: t('about.premiumQuality'),
+                // Property or array item — trailing comma allowed in TypeScript
+                desc: t('about.premiumQualityDesc'),
+              // Closing brace — end of block (function, if, object, JSX)
+              },
+              // Line 56: {
+              {
+                // Property or array item — trailing comma allowed in TypeScript
+                icon: Truck,
+                // Property or array item — trailing comma allowed in TypeScript
+                title: t('about.fastDelivery'),
+                // Property or array item — trailing comma allowed in TypeScript
+                desc: t('about.fastDeliveryDesc'),
+              // Closing brace — end of block (function, if, object, JSX)
+              },
+            // Array.map — transform each item (often render a list of components)
+            ].map((item) => (
+              // JSX element — HTML-like tag becomes React component in browser
+              <div key={item.title} className="card-premium p-6 text-center">
+                // JSX element — HTML-like tag becomes React component in browser
+                <item.icon className="mx-auto mb-3 h-8 w-8 text-brand-700" />
+                // JSX element — HTML-like tag becomes React component in browser
+                <h3 className="mb-1 font-semibold text-brand-900">{item.title}</h3>
+                // JSX element — HTML-like tag becomes React component in browser
+                <p className="text-sm text-gray-500">{item.desc}</p>
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+            // Line 67: ))}
+            ))}
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        </section>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <section id="delivery" className="mb-16">
+          // JSX element — HTML-like tag becomes React component in browser
+          <h2 className="section-heading mb-4">{t('about.deliveryTitle')}</h2>
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="space-y-3 text-gray-600">
+            // JSX element — HTML-like tag becomes React component in browser
+            <p>{t('about.delivery1')}</p>
+            // JSX element — HTML-like tag becomes React component in browser
+            <p>{t('about.delivery2')}</p>
+            // JSX element — HTML-like tag becomes React component in browser
+            <p>{t('about.delivery3')}</p>
+            // JSX element — HTML-like tag becomes React component in browser
+            <p>{t('about.delivery4')}</p>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        </section>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <section id="contact" className="card-premium mb-16 p-8">
+          // JSX element — HTML-like tag becomes React component in browser
+          <h2 className="section-heading mb-6">{t('about.contactTitle')}</h2>
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="space-y-4">
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="flex items-center gap-3 text-gray-600">
+              // JSX element — HTML-like tag becomes React component in browser
+              <Phone className="h-5 w-5 text-brand-700" />
+              // JSX element — HTML-like tag becomes React component in browser
+              <a href={telHref} className="hover:text-brand-800">
+                // Line 87: {SITE_PHONE_DISPLAY}
+                {SITE_PHONE_DISPLAY}
+              // JSX element — HTML-like tag becomes React component in browser
+              </a>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="flex items-center gap-3 text-gray-600">
+              // JSX element — HTML-like tag becomes React component in browser
+              <Mail className="h-5 w-5 text-brand-700" />
+              // JSX element — HTML-like tag becomes React component in browser
+              <a href={`mailto:${SITE_EMAIL}`} className="hover:text-brand-800">
+                // Line 93: {SITE_EMAIL}
+                {SITE_EMAIL}
+              // JSX element — HTML-like tag becomes React component in browser
+              </a>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="flex items-start gap-3 text-gray-600">
+              // JSX element — HTML-like tag becomes React component in browser
+              <MapPin className="mt-0.5 h-5 w-5 shrink-0 text-brand-700" />
+              // JSX element — HTML-like tag becomes React component in browser
+              <span>
+                // Line 99: {SITE_ADDRESS}
+                {SITE_ADDRESS}
+                // JSX element — HTML-like tag becomes React component in browser
+                <br />
+                // Line 101: {t('footer.hours', { hours: SITE_HOURS })}
+                {t('footer.hours', { hours: SITE_HOURS })}
+              // JSX element — HTML-like tag becomes React component in browser
+              </span>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="mt-6">
+            // JSX element — HTML-like tag becomes React component in browser
+            <Link
+              // Link target URL — internal route or external https://
+              href="/shop"
+              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+              className="text-sm font-semibold text-brand-700 hover:text-brand-900"
+            // Line 109: >
+            >
+              // Line 110: {t('cta.button')} →
+              {t('cta.button')} →
+            // JSX element — HTML-like tag becomes React component in browser
+            </Link>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        </section>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <section id="privacy" className="mb-16">
+          // JSX element — HTML-like tag becomes React component in browser
+          <h2 className="section-heading mb-4">{t('about.privacyTitle')}</h2>
+          // JSX element — HTML-like tag becomes React component in browser
+          <p className="leading-relaxed text-gray-600">{t('about.privacyText')}</p>
+        // JSX element — HTML-like tag becomes React component in browser
+        </section>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <section id="terms" className="mb-8">
+          // JSX element — HTML-like tag becomes React component in browser
+          <h2 className="section-heading mb-4">{t('about.termsTitle')}</h2>
+          // JSX element — HTML-like tag becomes React component in browser
+          <p className="leading-relaxed text-gray-600">{t('about.termsText')}</p>
+        // JSX element — HTML-like tag becomes React component in browser
+        </section>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 126: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/app/account/page.annotated.tsx b/docs/annotated/src/app/account/page.annotated.tsx
new file mode 100644
index 0000000..1d2073c
--- /dev/null
+++ b/docs/annotated/src/app/account/page.annotated.tsx
@@ -0,0 +1,321 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/app/account/page.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Import React — core UI library (components, hooks, JSX)
+import { useEffect } from 'react';
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Next.js App Router hooks — useRouter, useParams, useSearchParams
+import { useRouter } from 'next/navigation';
+// Lucide icons — lightweight SVG icon components
+import { User, Package, MapPin, Phone, Mail, LogOut, Heart } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Button from '@/components/ui/Button';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useAuthStore } from '@/store/auth';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { formatPrice, formatDate, getFormatLocale } from '@/lib/utils';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { localizeProduct } from '@/lib/product-i18n';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function AccountPage() {
+  // Next.js router — programmatic navigation (router.push)
+  const router = useRouter();
+  // Zustand selector — subscribe to slice of global store
+  const { user, isAuthenticated, orders, logout } = useAuthStore();
+  // Custom hook — returns t() translator and current locale
+  const { t, locale } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // Side effect hook — runs after paint; deps array controls when it re-runs
+  useEffect(() => {
+    // Conditional branch — different behavior based on runtime value
+    if (!isAuthenticated) {
+      // Line 20: router.push('/login');
+      router.push('/login');
+    // Closing brace — end of block (function, if, object, JSX)
+    }
+  // Closing brace — end of block (function, if, object, JSX)
+  }, [isAuthenticated, router]);
+// (blank line — separates logical blocks for readability)
+  // Conditional branch — different behavior based on runtime value
+  if (!isAuthenticated || !user) {
+    // Return value from function
+    return null;
+  // Closing brace — end of block (function, if, object, JSX)
+  }
+// (blank line — separates logical blocks for readability)
+  // Line 28: const handleLogout = () => {
+  const handleLogout = () => {
+    // Line 29: logout();
+    logout();
+    // Line 30: router.push('/');
+    router.push('/');
+  // Closing brace — end of block (function, if, object, JSX)
+  };
+// (blank line — separates logical blocks for readability)
+  // Line 33: const fmt = (n: number) => formatPrice(n, getFormatLocale...
+  const fmt = (n: number) => formatPrice(n, getFormatLocale(locale));
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div className="bg-gray-50">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="border-b border-gray-100 bg-white">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+          // JSX element — HTML-like tag becomes React component in browser
+          <h1 className="section-heading">{t('account.title')}</h1>
+          // JSX element — HTML-like tag becomes React component in browser
+          <p className="text-gray-500">{t('account.welcome', { name: user.name })}</p>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+// (blank line — separates logical blocks for readability)
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="grid gap-8 lg:grid-cols-3">
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="space-y-6">
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="card-premium p-6">
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="mb-4 flex items-center gap-3">
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-brand-100">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <User className="h-6 w-6 text-brand-700" />
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+                // JSX element — HTML-like tag becomes React component in browser
+                <div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <h2 className="font-display text-lg font-semibold">{user.name}</h2>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <p className="text-sm text-gray-500">
+                    // Line 55: {t('account.memberSince', { date: formatDate(user.created...
+                    {t('account.memberSince', { date: formatDate(user.createdAt) })}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </p>
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+// (blank line — separates logical blocks for readability)
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="space-y-3 border-t border-gray-100 pt-4">
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="flex items-center gap-2 text-sm text-gray-600">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <Mail className="h-4 w-4 text-brand-600" />
+                  // Line 63: {user.email}
+                  {user.email}
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="flex items-center gap-2 text-sm text-gray-600">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <Phone className="h-4 w-4 text-brand-600" />
+                  // Line 67: {user.phone}
+                  {user.phone}
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="flex items-start gap-2 text-sm text-gray-600">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-brand-600" />
+                  // Line 71: {user.address.street}, {user.address.city}, {user.address...
+                  {user.address.street}, {user.address.city}, {user.address.state}{' '}
+                  // Line 72: {user.address.zip}
+                  {user.address.zip}
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="card-premium p-4">
+              // JSX element — HTML-like tag becomes React component in browser
+              <Link
+                // Link target URL — internal route or external https://
+                href="/wishlist"
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-brand-50 hover:text-brand-700"
+              // Line 81: >
+              >
+                // JSX element — HTML-like tag becomes React component in browser
+                <Heart className="h-4 w-4" />
+                // Line 83: {t('account.myWishlist')}
+                {t('account.myWishlist')}
+              // JSX element — HTML-like tag becomes React component in browser
+              </Link>
+              // JSX element — HTML-like tag becomes React component in browser
+              <button
+                // Click handler — runs when user clicks (must be client component)
+                onClick={handleLogout}
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-red-500 transition-colors hover:bg-red-50"
+              // Line 88: >
+              >
+                // JSX element — HTML-like tag becomes React component in browser
+                <LogOut className="h-4 w-4" />
+                // Line 90: {t('account.signOut')}
+                {t('account.signOut')}
+              // JSX element — HTML-like tag becomes React component in browser
+              </button>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="lg:col-span-2" id="orders">
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="card-premium p-6">
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="mb-6 flex items-center gap-2">
+                // JSX element — HTML-like tag becomes React component in browser
+                <Package className="h-5 w-5 text-brand-700" />
+                // JSX element — HTML-like tag becomes React component in browser
+                <h2 className="font-display text-lg font-semibold">
+                  // Line 100: {t('account.orderHistory')}
+                  {t('account.orderHistory')}
+                // JSX element — HTML-like tag becomes React component in browser
+                </h2>
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+// (blank line — separates logical blocks for readability)
+              // Line 104: {orders.length === 0 ? (
+              {orders.length === 0 ? (
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="py-12 text-center">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <p className="mb-2 text-gray-500">{t('account.noOrders')}</p>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <Link href="/shop">
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <Button variant="primary">{t('account.startShopping')}</Button>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </Link>
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+              // Line 111: ) : (
+              ) : (
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="space-y-4">
+                  // Array.map — transform each item (often render a list of components)
+                  {orders.map((order) => (
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <div
+                      // Line 115: key={order.id}
+                      key={order.id}
+                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                      className="rounded-xl border border-gray-100 p-4 transition-colors hover:border-brand-200"
+                    // Line 117: >
+                    >
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <div className="mb-3 flex items-center justify-between">
+                        // JSX element — HTML-like tag becomes React component in browser
+                        <div>
+                          // JSX element — HTML-like tag becomes React component in browser
+                          <p className="text-sm font-semibold text-brand-900">{order.id}</p>
+                          // JSX element — HTML-like tag becomes React component in browser
+                          <p className="text-xs text-gray-400">
+                            // Line 122: {formatDate(order.createdAt)}
+                            {formatDate(order.createdAt)}
+                          // JSX element — HTML-like tag becomes React component in browser
+                          </p>
+                        // JSX element — HTML-like tag becomes React component in browser
+                        </div>
+                        // JSX element — HTML-like tag becomes React component in browser
+                        <div className="text-end">
+                          // JSX element — HTML-like tag becomes React component in browser
+                          <p className="font-bold text-brand-800">{fmt(order.total)}</p>
+                          // JSX element — HTML-like tag becomes React component in browser
+                          <span className="inline-block rounded-full bg-brand-50 px-2 py-0.5 text-xs font-medium capitalize text-brand-700">
+                            // Line 128: {t(`orderStatus.${order.status}`)}
+                            {t(`orderStatus.${order.status}`)}
+                          // JSX element — HTML-like tag becomes React component in browser
+                          </span>
+                        // JSX element — HTML-like tag becomes React component in browser
+                        </div>
+                      // JSX element — HTML-like tag becomes React component in browser
+                      </div>
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <div className="space-y-1">
+                        // Array.map — transform each item (often render a list of components)
+                        {order.items.map((item) => {
+                          // Line 134: const localized = localizeProduct(item.product, t);
+                          const localized = localizeProduct(item.product, t);
+                          // Return JSX — describes UI tree React renders to the DOM
+                          return (
+                            // JSX element — HTML-like tag becomes React component in browser
+                            <div
+                              // Line 137: key={item.id}
+                              key={item.id}
+                              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                              className="flex justify-between text-sm text-gray-600"
+                            // Line 139: >
+                            >
+                              // JSX element — HTML-like tag becomes React component in browser
+                              <Link
+                                // Link target URL — internal route or external https://
+                                href={`/product/${item.product.slug}`}
+                                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                                className="hover:text-brand-700"
+                              // Line 143: >
+                              >
+                                // Line 144: {localized.name} × {item.quantity}
+                                {localized.name} × {item.quantity}
+                                // JSX element — HTML-like tag becomes React component in browser
+                                <span className="ms-2 text-xs text-gold-600">
+                                  // Line 146: ({item.customizationLabel})
+                                  ({item.customizationLabel})
+                                // JSX element — HTML-like tag becomes React component in browser
+                                </span>
+                              // JSX element — HTML-like tag becomes React component in browser
+                              </Link>
+                              // JSX element — HTML-like tag becomes React component in browser
+                              <span>{fmt(item.product.price * item.quantity)}</span>
+                            // JSX element — HTML-like tag becomes React component in browser
+                            </div>
+                          // Line 151: );
+                          );
+                        // Closing brace — end of block (function, if, object, JSX)
+                        })}
+                      // JSX element — HTML-like tag becomes React component in browser
+                      </div>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    </div>
+                  // Line 155: ))}
+                  ))}
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+              // Line 157: )}
+              )}
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 163: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/app/cart/page.annotated.tsx b/docs/annotated/src/app/cart/page.annotated.tsx
new file mode 100644
index 0000000..710a3cb
--- /dev/null
+++ b/docs/annotated/src/app/cart/page.annotated.tsx
@@ -0,0 +1,348 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/app/cart/page.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Import project module (@/ alias = src/ folder in tsconfig)
+import AppImage from '@/components/ui/AppImage';
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Lucide icons — lightweight SVG icon components
+import { Minus, Plus, Trash2, ShoppingBag, ArrowRight } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Button from '@/components/ui/Button';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useCartStore } from '@/store/cart';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { formatPrice, getFormatLocale } from '@/lib/utils';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { localizeProduct } from '@/lib/product-i18n';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function CartPage() {
+  // Zustand selector — subscribe to slice of global store
+  const { items, updateQuantity, removeItem, getTotal } = useCartStore();
+  // Custom hook — returns t() translator and current locale
+  const { t, locale } = useTranslation();
+  // Line 15: const total = getTotal();
+  const total = getTotal();
+  // Line 16: const deliveryFee = total > 500 ? 0 : 49;
+  const deliveryFee = total > 500 ? 0 : 49;
+  // Line 17: const grandTotal = total + deliveryFee;
+  const grandTotal = total + deliveryFee;
+  // Line 18: const fmt = (n: number) => formatPrice(n, getFormatLocale...
+  const fmt = (n: number) => formatPrice(n, getFormatLocale(locale));
+// (blank line — separates logical blocks for readability)
+  // Conditional branch — different behavior based on runtime value
+  if (items.length === 0) {
+    // Return JSX — describes UI tree React renders to the DOM
+    return (
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-brand-50">
+          // JSX element — HTML-like tag becomes React component in browser
+          <ShoppingBag className="h-10 w-10 text-brand-300" />
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        <h1 className="mb-2 font-display text-2xl font-bold text-brand-900">
+          // Line 27: {t('cart.empty')}
+          {t('cart.empty')}
+        // JSX element — HTML-like tag becomes React component in browser
+        </h1>
+        // JSX element — HTML-like tag becomes React component in browser
+        <p className="mb-8 text-gray-500">{t('cart.emptyHint')}</p>
+        // JSX element — HTML-like tag becomes React component in browser
+        <Link href="/shop">
+          // JSX element — HTML-like tag becomes React component in browser
+          <Button variant="primary" size="lg">
+            // Line 32: {t('cart.startShopping')}
+            {t('cart.startShopping')}
+          // JSX element — HTML-like tag becomes React component in browser
+          </Button>
+        // JSX element — HTML-like tag becomes React component in browser
+        </Link>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // Line 36: );
+    );
+  // Closing brace — end of block (function, if, object, JSX)
+  }
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div className="bg-gray-50">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="border-b border-gray-100 bg-white">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+          // JSX element — HTML-like tag becomes React component in browser
+          <h1 className="section-heading">{t('cart.title')}</h1>
+          // JSX element — HTML-like tag becomes React component in browser
+          <p className="text-gray-500">
+            // Line 45: {t('cart.itemsCount', { count: items.length })}
+            {t('cart.itemsCount', { count: items.length })}
+          // JSX element — HTML-like tag becomes React component in browser
+          </p>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+// (blank line — separates logical blocks for readability)
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="grid gap-8 lg:grid-cols-3">
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="space-y-4 lg:col-span-2">
+            // Array.map — transform each item (often render a list of components)
+            {items.map((item) => {
+              // Line 54: const localized = localizeProduct(item.product, t);
+              const localized = localizeProduct(item.product, t);
+              // Return JSX — describes UI tree React renders to the DOM
+              return (
+                // JSX element — HTML-like tag becomes React component in browser
+                <div key={item.id} className="card-premium flex gap-4 p-4 sm:p-6">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <div className="relative h-24 w-24 shrink-0 overflow-hidden rounded-xl sm:h-28 sm:w-28">
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <AppImage
+                      // Line 59: src={item.product.image}
+                      src={item.product.image}
+                      // Line 60: alt={localized.name}
+                      alt={localized.name}
+                      // Line 61: fill
+                      fill
+                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                      className="object-cover"
+                      // Line 63: sizes="(max-width: 640px) 96px, 112px"
+                      sizes="(max-width: 640px) 96px, 112px"
+                    // Line 64: />
+                    />
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </div>
+// (blank line — separates logical blocks for readability)
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <div className="flex flex-1 flex-col">
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <div className="flex items-start justify-between">
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <div>
+                        // JSX element — HTML-like tag becomes React component in browser
+                        <Link
+                          // Link target URL — internal route or external https://
+                          href={`/product/${item.product.slug}`}
+                          // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                          className="font-display text-lg font-semibold text-brand-900 hover:text-brand-700"
+                        // Line 73: >
+                        >
+                          // Line 74: {localized.name}
+                          {localized.name}
+                        // JSX element — HTML-like tag becomes React component in browser
+                        </Link>
+                        // JSX element — HTML-like tag becomes React component in browser
+                        <p className="mt-1 text-xs uppercase tracking-wider text-brand-600">
+                          // Line 77: {t(`categories.${item.product.category}.name`)}
+                          {t(`categories.${item.product.category}.name`)}
+                        // JSX element — HTML-like tag becomes React component in browser
+                        </p>
+                      // JSX element — HTML-like tag becomes React component in browser
+                      </div>
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <button
+                        // Click handler — runs when user clicks (must be client component)
+                        onClick={() => removeItem(item.id)}
+                        // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                        className="rounded-lg p-2 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500"
+                        // Accessibility attribute — screen readers and assistive tech
+                        aria-label={t('cart.removeItem')}
+                      // Line 84: >
+                      >
+                        // JSX element — HTML-like tag becomes React component in browser
+                        <Trash2 className="h-4 w-4" />
+                      // JSX element — HTML-like tag becomes React component in browser
+                      </button>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    </div>
+// (blank line — separates logical blocks for readability)
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <div className="mt-2 inline-flex items-center gap-1.5 rounded-full bg-gold-50 px-3 py-1">
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <span className="text-xs font-medium text-gold-700">
+                        // Line 91: {t('cart.customization')}
+                        {t('cart.customization')}
+                      // JSX element — HTML-like tag becomes React component in browser
+                      </span>
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <span className="text-xs font-semibold text-gold-800">
+                        // Line 94: {item.customizationLabel}
+                        {item.customizationLabel}
+                      // JSX element — HTML-like tag becomes React component in browser
+                      </span>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    </div>
+// (blank line — separates logical blocks for readability)
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <div className="mt-auto flex items-center justify-between pt-3">
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <div className="flex items-center rounded-lg border border-gray-200">
+                        // JSX element — HTML-like tag becomes React component in browser
+                        <button
+                          // Click handler — runs when user clicks (must be client component)
+                          onClick={() => updateQuantity(item.id, item.quantity - 1)}
+                          // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                          className="flex h-9 w-9 items-center justify-center text-gray-500 hover:text-brand-700"
+                          // Accessibility attribute — screen readers and assistive tech
+                          aria-label={t('product.decreaseQty')}
+                        // Line 104: >
+                        >
+                          // JSX element — HTML-like tag becomes React component in browser
+                          <Minus className="h-3 w-3" />
+                        // JSX element — HTML-like tag becomes React component in browser
+                        </button>
+                        // JSX element — HTML-like tag becomes React component in browser
+                        <span className="w-8 text-center text-sm font-semibold">
+                          // Line 108: {item.quantity}
+                          {item.quantity}
+                        // JSX element — HTML-like tag becomes React component in browser
+                        </span>
+                        // JSX element — HTML-like tag becomes React component in browser
+                        <button
+                          // Click handler — runs when user clicks (must be client component)
+                          onClick={() => updateQuantity(item.id, item.quantity + 1)}
+                          // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                          className="flex h-9 w-9 items-center justify-center text-gray-500 hover:text-brand-700"
+                          // Accessibility attribute — screen readers and assistive tech
+                          aria-label={t('product.increaseQty')}
+                        // Line 114: >
+                        >
+                          // JSX element — HTML-like tag becomes React component in browser
+                          <Plus className="h-3 w-3" />
+                        // JSX element — HTML-like tag becomes React component in browser
+                        </button>
+                      // JSX element — HTML-like tag becomes React component in browser
+                      </div>
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <span className="text-lg font-bold text-brand-800">
+                        // Line 119: {fmt(item.product.price * item.quantity)}
+                        {fmt(item.product.price * item.quantity)}
+                      // JSX element — HTML-like tag becomes React component in browser
+                      </span>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    </div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </div>
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+              // Line 124: );
+              );
+            // Closing brace — end of block (function, if, object, JSX)
+            })}
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <div>
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="card-premium sticky top-24 p-6">
+              // JSX element — HTML-like tag becomes React component in browser
+              <h2 className="mb-4 font-display text-lg font-semibold text-brand-900">
+                // Line 131: {t('cart.orderSummary')}
+                {t('cart.orderSummary')}
+              // JSX element — HTML-like tag becomes React component in browser
+              </h2>
+// (blank line — separates logical blocks for readability)
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="space-y-3 border-b border-gray-100 pb-4">
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="flex justify-between text-sm">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <span className="text-gray-500">{t('cart.subtotal')}</span>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <span className="font-medium">{fmt(total)}</span>
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="flex justify-between text-sm">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <span className="text-gray-500">{t('cart.delivery')}</span>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <span className="font-medium">
+                    // Line 142: {deliveryFee === 0 ? (
+                    {deliveryFee === 0 ? (
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <span className="text-brand-700">{t('cart.free')}</span>
+                    // Line 144: ) : (
+                    ) : (
+                      // Line 145: fmt(deliveryFee)
+                      fmt(deliveryFee)
+                    // Line 146: )}
+                    )}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </span>
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+                // Line 149: {deliveryFee > 0 && (
+                {deliveryFee > 0 && (
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <p className="text-xs text-gray-400">{t('cart.freeDeliveryHint')}</p>
+                // Line 151: )}
+                )}
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+// (blank line — separates logical blocks for readability)
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="flex justify-between py-4">
+                // JSX element — HTML-like tag becomes React component in browser
+                <span className="font-semibold text-brand-900">{t('cart.total')}</span>
+                // JSX element — HTML-like tag becomes React component in browser
+                <span className="text-xl font-bold text-brand-800">{fmt(grandTotal)}</span>
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+// (blank line — separates logical blocks for readability)
+              // JSX element — HTML-like tag becomes React component in browser
+              <Link href="/checkout">
+                // JSX element — HTML-like tag becomes React component in browser
+                <Button variant="gold" size="lg" className="w-full">
+                  // Line 161: {t('cart.proceedCheckout')}
+                  {t('cart.proceedCheckout')}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <ArrowRight className="h-4 w-4 rtl:rotate-180" />
+                // JSX element — HTML-like tag becomes React component in browser
+                </Button>
+              // JSX element — HTML-like tag becomes React component in browser
+              </Link>
+// (blank line — separates logical blocks for readability)
+              // JSX element — HTML-like tag becomes React component in browser
+              <Link
+                // Link target URL — internal route or external https://
+                href="/shop"
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className="mt-3 block text-center text-sm font-medium text-brand-600 hover:text-brand-800"
+              // Line 169: >
+              >
+                // Line 170: {t('cart.continueShopping')}
+                {t('cart.continueShopping')}
+              // JSX element — HTML-like tag becomes React component in browser
+              </Link>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 177: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/app/checkout/page.annotated.tsx b/docs/annotated/src/app/checkout/page.annotated.tsx
new file mode 100644
index 0000000..cbfc348
--- /dev/null
+++ b/docs/annotated/src/app/checkout/page.annotated.tsx
@@ -0,0 +1,701 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/app/checkout/page.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Import React — core UI library (components, hooks, JSX)
+import { useState } from 'react';
+// Next.js App Router hooks — useRouter, useParams, useSearchParams
+import { useRouter } from 'next/navigation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import AppImage from '@/components/ui/AppImage';
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Lucide icons — lightweight SVG icon components
+import { Lock, CreditCard, Truck, CheckCircle, ChevronLeft } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Button from '@/components/ui/Button';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useCartStore } from '@/store/cart';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useAuthStore } from '@/store/auth';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { formatPrice, getFormatLocale } from '@/lib/utils';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { localizeProduct } from '@/lib/product-i18n';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { Order } from '@/types';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function CheckoutPage() {
+  // Next.js router — programmatic navigation (router.push)
+  const router = useRouter();
+  // Zustand selector — subscribe to slice of global store
+  const { items, getTotal, clearCart } = useCartStore();
+  // Zustand selector — subscribe to slice of global store
+  const { user, isAuthenticated, addOrder } = useAuthStore();
+  // Custom hook — returns t() translator and current locale
+  const { t, locale } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // React useState — local component state that triggers re-render on change
+  const [paymentMethod, setPaymentMethod] = useState('card');
+  // React useState — local component state that triggers re-render on change
+  const [isProcessing, setIsProcessing] = useState(false);
+  // React useState — local component state that triggers re-render on change
+  const [orderComplete, setOrderComplete] = useState(false);
+  // React useState — local component state that triggers re-render on change
+  const [orderId, setOrderId] = useState('');
+// (blank line — separates logical blocks for readability)
+  // React useState — local component state that triggers re-render on change
+  const [form, setForm] = useState({
+    // Property or array item — trailing comma allowed in TypeScript
+    name: user?.name || '',
+    // Property or array item — trailing comma allowed in TypeScript
+    email: user?.email || '',
+    // Property or array item — trailing comma allowed in TypeScript
+    phone: user?.phone || '',
+    // Property or array item — trailing comma allowed in TypeScript
+    street: user?.address.street || '',
+    // Property or array item — trailing comma allowed in TypeScript
+    city: user?.address.city || '',
+    // Property or array item — trailing comma allowed in TypeScript
+    state: user?.address.state || '',
+    // Property or array item — trailing comma allowed in TypeScript
+    zip: user?.address.zip || '',
+    // Property or array item — trailing comma allowed in TypeScript
+    cardNumber: '',
+    // Property or array item — trailing comma allowed in TypeScript
+    expiry: '',
+    // Property or array item — trailing comma allowed in TypeScript
+    cvv: '',
+  // Closing brace — end of block (function, if, object, JSX)
+  });
+// (blank line — separates logical blocks for readability)
+  // Line 40: const total = getTotal();
+  const total = getTotal();
+  // Line 41: const deliveryFee = total > 500 ? 0 : 49;
+  const deliveryFee = total > 500 ? 0 : 49;
+  // Line 42: const grandTotal = total + deliveryFee;
+  const grandTotal = total + deliveryFee;
+  // Line 43: const fmt = (n: number) => formatPrice(n, getFormatLocale...
+  const fmt = (n: number) => formatPrice(n, getFormatLocale(locale));
+// (blank line — separates logical blocks for readability)
+  // Conditional branch — different behavior based on runtime value
+  if (items.length === 0 && !orderComplete) {
+    // Return JSX — describes UI tree React renders to the DOM
+    return (
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 py-20 text-center">
+        // JSX element — HTML-like tag becomes React component in browser
+        <h1 className="mb-4 font-display text-2xl font-bold">{t('checkout.noItems')}</h1>
+        // JSX element — HTML-like tag becomes React component in browser
+        <Link href="/shop">
+          // JSX element — HTML-like tag becomes React component in browser
+          <Button>{t('checkout.goToShop')}</Button>
+        // JSX element — HTML-like tag becomes React component in browser
+        </Link>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // Line 53: );
+    );
+  // Closing brace — end of block (function, if, object, JSX)
+  }
+// (blank line — separates logical blocks for readability)
+  // Conditional branch — different behavior based on runtime value
+  if (orderComplete) {
+    // Return JSX — describes UI tree React renders to the DOM
+    return (
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-lg px-4 py-20 text-center">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-brand-50">
+          // JSX element — HTML-like tag becomes React component in browser
+          <CheckCircle className="h-12 w-12 text-brand-700" />
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        <h1 className="mb-2 font-display text-3xl font-bold text-brand-900">
+          // Line 63: {t('checkout.orderConfirmed')}
+          {t('checkout.orderConfirmed')}
+        // JSX element — HTML-like tag becomes React component in browser
+        </h1>
+        // JSX element — HTML-like tag becomes React component in browser
+        <p className="mb-2 text-gray-500">{t('checkout.thankYou')}</p>
+        // JSX element — HTML-like tag becomes React component in browser
+        <p className="mb-8 text-sm font-medium text-brand-700">
+          // Line 67: {t('checkout.orderId', { id: orderId })}
+          {t('checkout.orderId', { id: orderId })}
+        // JSX element — HTML-like tag becomes React component in browser
+        </p>
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
+          // JSX element — HTML-like tag becomes React component in browser
+          <Link href="/account">
+            // JSX element — HTML-like tag becomes React component in browser
+            <Button variant="primary">{t('checkout.viewOrders')}</Button>
+          // JSX element — HTML-like tag becomes React component in browser
+          </Link>
+          // JSX element — HTML-like tag becomes React component in browser
+          <Link href="/shop">
+            // JSX element — HTML-like tag becomes React component in browser
+            <Button variant="secondary">{t('cart.continueShopping')}</Button>
+          // JSX element — HTML-like tag becomes React component in browser
+          </Link>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // Line 78: );
+    );
+  // Closing brace — end of block (function, if, object, JSX)
+  }
+// (blank line — separates logical blocks for readability)
+  // Line 81: const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
+    // Line 82: e.preventDefault();
+    e.preventDefault();
+    // Line 83: setIsProcessing(true);
+    setIsProcessing(true);
+// (blank line — separates logical blocks for readability)
+    // Line 85: await new Promise((resolve) => setTimeout(resolve, 1500));
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+// (blank line — separates logical blocks for readability)
+    // Line 87: const newOrderId = `KG-${Date.now().toString(36).toUpperC...
+    const newOrderId = `KG-${Date.now().toString(36).toUpperCase()}`;
+    // Line 88: const order: Order = {
+    const order: Order = {
+      // Property or array item — trailing comma allowed in TypeScript
+      id: newOrderId,
+      // Property or array item — trailing comma allowed in TypeScript
+      items: [...items],
+      // Property or array item — trailing comma allowed in TypeScript
+      total: grandTotal,
+      // Property or array item — trailing comma allowed in TypeScript
+      status: 'confirmed',
+      // Property or array item — trailing comma allowed in TypeScript
+      createdAt: new Date().toISOString(),
+      // Line 94: deliveryAddress: {
+      deliveryAddress: {
+        // Property or array item — trailing comma allowed in TypeScript
+        street: form.street,
+        // Property or array item — trailing comma allowed in TypeScript
+        city: form.city,
+        // Property or array item — trailing comma allowed in TypeScript
+        state: form.state,
+        // Property or array item — trailing comma allowed in TypeScript
+        zip: form.zip,
+      // Closing brace — end of block (function, if, object, JSX)
+      },
+      // Property or array item — trailing comma allowed in TypeScript
+      paymentMethod,
+    // Closing brace — end of block (function, if, object, JSX)
+    };
+// (blank line — separates logical blocks for readability)
+    // Line 103: addOrder(order);
+    addOrder(order);
+    // Line 104: clearCart();
+    clearCart();
+    // Line 105: setOrderId(newOrderId);
+    setOrderId(newOrderId);
+    // Line 106: setOrderComplete(true);
+    setOrderComplete(true);
+    // Line 107: setIsProcessing(false);
+    setIsProcessing(false);
+  // Closing brace — end of block (function, if, object, JSX)
+  };
+// (blank line — separates logical blocks for readability)
+  // Line 110: const updateField = (field: string, value: string) => {
+  const updateField = (field: string, value: string) => {
+    // Line 111: setForm((prev) => ({ ...prev, [field]: value }));
+    setForm((prev) => ({ ...prev, [field]: value }));
+  // Closing brace — end of block (function, if, object, JSX)
+  };
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div className="bg-gray-50">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <Link
+          // Link target URL — internal route or external https://
+          href="/cart"
+          // Tailwind CSS utility classes — styling (colors, spacing, layout)
+          className="mb-6 inline-flex items-center gap-1 text-sm font-medium text-gray-500 hover:text-brand-700"
+        // Line 120: >
+        >
+          // JSX element — HTML-like tag becomes React component in browser
+          <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
+          // Line 122: {t('checkout.backToCart')}
+          {t('checkout.backToCart')}
+        // JSX element — HTML-like tag becomes React component in browser
+        </Link>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <h1 className="section-heading mb-8">{t('checkout.title')}</h1>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <form onSubmit={handleSubmit}>
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="grid gap-8 lg:grid-cols-3">
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="space-y-6 lg:col-span-2">
+              // Line 130: {!isAuthenticated && (
+              {!isAuthenticated && (
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="card-premium p-6">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <p className="text-sm text-gray-600">
+                    // Line 133: {t('checkout.haveAccount')}{' '}
+                    {t('checkout.haveAccount')}{' '}
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <Link href="/login" className="font-semibold text-brand-700 hover:underline">
+                      // Line 135: {t('checkout.signIn')}
+                      {t('checkout.signIn')}
+                    // JSX element — HTML-like tag becomes React component in browser
+                    </Link>{' '}
+                    // Line 137: {t('checkout.fasterCheckout')}
+                    {t('checkout.fasterCheckout')}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </p>
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+              // Line 140: )}
+              )}
+// (blank line — separates logical blocks for readability)
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="card-premium p-6">
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="mb-4 flex items-center gap-2">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <Truck className="h-5 w-5 text-brand-700" />
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <h2 className="font-display text-lg font-semibold">
+                    // Line 146: {t('checkout.deliveryDetails')}
+                    {t('checkout.deliveryDetails')}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </h2>
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="grid gap-4 sm:grid-cols-2">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <div className="sm:col-span-2">
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <label className="label-text">{t('checkout.fullName')}</label>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <input
+                      // Line 153: required
+                      required
+                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                      className="input-field"
+                      // Line 155: value={form.name}
+                      value={form.name}
+                      // Change handler — runs when input/select value changes
+                      onChange={(e) => updateField('name', e.target.value)}
+                    // Line 157: />
+                    />
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <div>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <label className="label-text">{t('checkout.email')}</label>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <input
+                      // Line 162: required
+                      required
+                      // Line 163: type="email"
+                      type="email"
+                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                      className="input-field"
+                      // Line 165: value={form.email}
+                      value={form.email}
+                      // Change handler — runs when input/select value changes
+                      onChange={(e) => updateField('email', e.target.value)}
+                    // Line 167: />
+                    />
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <div>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <label className="label-text">{t('checkout.phone')}</label>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <input
+                      // Line 172: required
+                      required
+                      // Line 173: type="tel"
+                      type="tel"
+                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                      className="input-field"
+                      // Line 175: value={form.phone}
+                      value={form.phone}
+                      // Change handler — runs when input/select value changes
+                      onChange={(e) => updateField('phone', e.target.value)}
+                    // Line 177: />
+                    />
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <div className="sm:col-span-2">
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <label className="label-text">{t('checkout.street')}</label>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <input
+                      // Line 182: required
+                      required
+                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                      className="input-field"
+                      // Line 184: value={form.street}
+                      value={form.street}
+                      // Change handler — runs when input/select value changes
+                      onChange={(e) => updateField('street', e.target.value)}
+                    // Line 186: />
+                    />
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <div>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <label className="label-text">{t('checkout.city')}</label>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <input
+                      // Line 191: required
+                      required
+                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                      className="input-field"
+                      // Line 193: value={form.city}
+                      value={form.city}
+                      // Change handler — runs when input/select value changes
+                      onChange={(e) => updateField('city', e.target.value)}
+                    // Line 195: />
+                    />
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <div>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <label className="label-text">{t('checkout.state')}</label>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <input
+                      // Line 200: required
+                      required
+                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                      className="input-field"
+                      // Line 202: value={form.state}
+                      value={form.state}
+                      // Change handler — runs when input/select value changes
+                      onChange={(e) => updateField('state', e.target.value)}
+                    // Line 204: />
+                    />
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <div>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <label className="label-text">{t('checkout.zip')}</label>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <input
+                      // Line 209: required
+                      required
+                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                      className="input-field"
+                      // Line 211: value={form.zip}
+                      value={form.zip}
+                      // Change handler — runs when input/select value changes
+                      onChange={(e) => updateField('zip', e.target.value)}
+                    // Line 213: />
+                    />
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </div>
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+// (blank line — separates logical blocks for readability)
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="card-premium p-6">
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="mb-4 flex items-center gap-2">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <CreditCard className="h-5 w-5 text-brand-700" />
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <h2 className="font-display text-lg font-semibold">{t('checkout.payment')}</h2>
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+// (blank line — separates logical blocks for readability)
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="mb-4 flex gap-3">
+                  // Array.map — transform each item (often render a list of components)
+                  {['card', 'cod'].map((method) => (
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <button
+                      // Line 227: key={method}
+                      key={method}
+                      // Line 228: type="button"
+                      type="button"
+                      // Click handler — runs when user clicks (must be client component)
+                      onClick={() => setPaymentMethod(method)}
+                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                      className={`rounded-lg border-2 px-4 py-2 text-sm font-medium transition-all ${
+                        // Line 231: paymentMethod === method
+                        paymentMethod === method
+                          // Line 232: ? 'border-brand-700 bg-brand-700 text-white'
+                          ? 'border-brand-700 bg-brand-700 text-white'
+                          // Line 233: : 'border-gray-200 text-gray-600 hover:border-brand-300'
+                          : 'border-gray-200 text-gray-600 hover:border-brand-300'
+                      // Closing brace — end of block (function, if, object, JSX)
+                      }`}
+                    // Line 235: >
+                    >
+                      // Line 236: {method === 'card'
+                      {method === 'card'
+                        // Line 237: ? t('checkout.creditCard')
+                        ? t('checkout.creditCard')
+                        // Line 238: : t('checkout.cashOnDelivery')}
+                        : t('checkout.cashOnDelivery')}
+                    // JSX element — HTML-like tag becomes React component in browser
+                    </button>
+                  // Line 240: ))}
+                  ))}
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+// (blank line — separates logical blocks for readability)
+                // Line 243: {paymentMethod === 'card' && (
+                {paymentMethod === 'card' && (
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <div className="sm:col-span-2">
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <label className="label-text">{t('checkout.cardNumber')}</label>
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <input
+                        // Line 248: required
+                        required
+                        // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                        className="input-field"
+                        // Line 250: placeholder="1234 5678 9012 3456"
+                        placeholder="1234 5678 9012 3456"
+                        // Line 251: value={form.cardNumber}
+                        value={form.cardNumber}
+                        // Change handler — runs when input/select value changes
+                        onChange={(e) => updateField('cardNumber', e.target.value)}
+                      // Line 253: />
+                      />
+                    // JSX element — HTML-like tag becomes React component in browser
+                    </div>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <div>
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <label className="label-text">{t('checkout.expiry')}</label>
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <input
+                        // Line 258: required
+                        required
+                        // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                        className="input-field"
+                        // Line 260: placeholder="MM/YY"
+                        placeholder="MM/YY"
+                        // Line 261: value={form.expiry}
+                        value={form.expiry}
+                        // Change handler — runs when input/select value changes
+                        onChange={(e) => updateField('expiry', e.target.value)}
+                      // Line 263: />
+                      />
+                    // JSX element — HTML-like tag becomes React component in browser
+                    </div>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <div>
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <label className="label-text">{t('checkout.cvv')}</label>
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <input
+                        // Line 268: required
+                        required
+                        // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                        className="input-field"
+                        // Line 270: placeholder="123"
+                        placeholder="123"
+                        // Line 271: value={form.cvv}
+                        value={form.cvv}
+                        // Change handler — runs when input/select value changes
+                        onChange={(e) => updateField('cvv', e.target.value)}
+                      // Line 273: />
+                      />
+                    // JSX element — HTML-like tag becomes React component in browser
+                    </div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </div>
+                // Line 276: )}
+                )}
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <div>
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="card-premium sticky top-24 p-6">
+                // JSX element — HTML-like tag becomes React component in browser
+                <h2 className="mb-4 font-display text-lg font-semibold">
+                  // Line 283: {t('cart.orderSummary')}
+                  {t('cart.orderSummary')}
+                // JSX element — HTML-like tag becomes React component in browser
+                </h2>
+// (blank line — separates logical blocks for readability)
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="mb-4 max-h-60 space-y-3 overflow-y-auto">
+                  // Array.map — transform each item (often render a list of components)
+                  {items.map((item) => {
+                    // Line 288: const localized = localizeProduct(item.product, t);
+                    const localized = localizeProduct(item.product, t);
+                    // Return JSX — describes UI tree React renders to the DOM
+                    return (
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <div key={item.id} className="flex gap-3">
+                        // JSX element — HTML-like tag becomes React component in browser
+                        <div className="relative h-12 w-12 shrink-0 overflow-hidden rounded-lg">
+                          // JSX element — HTML-like tag becomes React component in browser
+                          <AppImage
+                            // Line 293: src={item.product.image}
+                            src={item.product.image}
+                            // Line 294: alt={localized.name}
+                            alt={localized.name}
+                            // Line 295: fill
+                            fill
+                            // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                            className="object-cover"
+                            // Line 297: sizes="48px"
+                            sizes="48px"
+                          // Line 298: />
+                          />
+                        // JSX element — HTML-like tag becomes React component in browser
+                        </div>
+                        // JSX element — HTML-like tag becomes React component in browser
+                        <div className="flex-1">
+                          // JSX element — HTML-like tag becomes React component in browser
+                          <p className="text-sm font-medium text-brand-900">
+                            // Line 302: {localized.name}
+                            {localized.name}
+                          // JSX element — HTML-like tag becomes React component in browser
+                          </p>
+                          // JSX element — HTML-like tag becomes React component in browser
+                          <p className="text-xs text-gold-700">
+                            // Line 305: {item.customizationLabel}
+                            {item.customizationLabel}
+                          // JSX element — HTML-like tag becomes React component in browser
+                          </p>
+                          // JSX element — HTML-like tag becomes React component in browser
+                          <p className="text-xs text-gray-400">
+                            // Line 308: {t('checkout.qty', { count: item.quantity })}
+                            {t('checkout.qty', { count: item.quantity })}
+                          // JSX element — HTML-like tag becomes React component in browser
+                          </p>
+                        // JSX element — HTML-like tag becomes React component in browser
+                        </div>
+                        // JSX element — HTML-like tag becomes React component in browser
+                        <span className="text-sm font-medium">
+                          // Line 312: {fmt(item.product.price * item.quantity)}
+                          {fmt(item.product.price * item.quantity)}
+                        // JSX element — HTML-like tag becomes React component in browser
+                        </span>
+                      // JSX element — HTML-like tag becomes React component in browser
+                      </div>
+                    // Line 315: );
+                    );
+                  // Closing brace — end of block (function, if, object, JSX)
+                  })}
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+// (blank line — separates logical blocks for readability)
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="space-y-2 border-t border-gray-100 pt-4">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <div className="flex justify-between text-sm">
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <span className="text-gray-500">{t('cart.subtotal')}</span>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <span>{fmt(total)}</span>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <div className="flex justify-between text-sm">
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <span className="text-gray-500">{t('cart.delivery')}</span>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <span>
+                      // Line 327: {deliveryFee === 0 ? t('cart.free') : fmt(deliveryFee)}
+                      {deliveryFee === 0 ? t('cart.free') : fmt(deliveryFee)}
+                    // JSX element — HTML-like tag becomes React component in browser
+                    </span>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <div className="flex justify-between pt-2 text-lg font-bold">
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <span>{t('cart.total')}</span>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <span className="text-brand-800">{fmt(grandTotal)}</span>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </div>
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+// (blank line — separates logical blocks for readability)
+                // JSX element — HTML-like tag becomes React component in browser
+                <Button
+                  // Line 337: type="submit"
+                  type="submit"
+                  // Line 338: variant="gold"
+                  variant="gold"
+                  // Line 339: size="lg"
+                  size="lg"
+                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                  className="mt-6 w-full"
+                  // Line 341: disabled={isProcessing}
+                  disabled={isProcessing}
+                // Line 342: >
+                >
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <Lock className="h-4 w-4" />
+                  // Line 344: {isProcessing
+                  {isProcessing
+                    // Line 345: ? t('checkout.processing')
+                    ? t('checkout.processing')
+                    // Line 346: : t('checkout.pay', { amount: fmt(grandTotal) })}
+                    : t('checkout.pay', { amount: fmt(grandTotal) })}
+                // JSX element — HTML-like tag becomes React component in browser
+                </Button>
+// (blank line — separates logical blocks for readability)
+                // JSX element — HTML-like tag becomes React component in browser
+                <p className="mt-3 flex items-center justify-center gap-1 text-xs text-gray-400">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <Lock className="h-3 w-3" />
+                  // Line 351: {t('checkout.secure')}
+                  {t('checkout.secure')}
+                // JSX element — HTML-like tag becomes React component in browser
+                </p>
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        </form>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 359: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/app/layout.annotated.tsx b/docs/annotated/src/app/layout.annotated.tsx
new file mode 100644
index 0000000..f7bdd0c
--- /dev/null
+++ b/docs/annotated/src/app/layout.annotated.tsx
@@ -0,0 +1,174 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/app/layout.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Type-only import — erased at compile time; no JavaScript bundle cost
+import type { Metadata } from 'next';
+// Self-hosted Google fonts — better performance than external CSS
+import { Inter, Playfair_Display, Noto_Nastaliq_Urdu } from 'next/font/google';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import LanguageBanner from '@/components/layout/LanguageBanner';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Header from '@/components/layout/Header';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Footer from '@/components/layout/Footer';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import LocaleAttributes from '@/components/layout/LocaleAttributes';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { SITE_NAME } from '@/lib/constants';
+// Import from a relative file in the same project
+import './globals.css';
+// (blank line — separates logical blocks for readability)
+// Line 10: const inter = Inter({
+const inter = Inter({
+  // Property or array item — trailing comma allowed in TypeScript
+  subsets: ['latin'],
+  // Property or array item — trailing comma allowed in TypeScript
+  variable: '--font-inter',
+  // Property or array item — trailing comma allowed in TypeScript
+  display: 'swap',
+// Closing brace — end of block (function, if, object, JSX)
+});
+// (blank line — separates logical blocks for readability)
+// Line 16: const playfair = Playfair_Display({
+const playfair = Playfair_Display({
+  // Property or array item — trailing comma allowed in TypeScript
+  subsets: ['latin'],
+  // Property or array item — trailing comma allowed in TypeScript
+  variable: '--font-playfair',
+  // Property or array item — trailing comma allowed in TypeScript
+  display: 'swap',
+// Closing brace — end of block (function, if, object, JSX)
+});
+// (blank line — separates logical blocks for readability)
+// Line 22: const notoUrdu = Noto_Nastaliq_Urdu({
+const notoUrdu = Noto_Nastaliq_Urdu({
+  // Property or array item — trailing comma allowed in TypeScript
+  subsets: ['arabic'],
+  // Property or array item — trailing comma allowed in TypeScript
+  variable: '--font-urdu',
+  // Property or array item — trailing comma allowed in TypeScript
+  weight: ['400', '500', '600', '700'],
+  // Property or array item — trailing comma allowed in TypeScript
+  display: 'swap',
+// Closing brace — end of block (function, if, object, JSX)
+});
+// (blank line — separates logical blocks for readability)
+// Line 29: const siteDescription =
+const siteDescription =
+  // Line 30: 'Premium 100% Halal meat delivery. Fresh and frozen chick...
+  'Premium 100% Halal meat delivery. Fresh and frozen chicken, beef, lamb, and fish — customized to your preference and delivered to your door.';
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const viewport = {
+  // Property or array item — trailing comma allowed in TypeScript
+  themeColor: '#8B1F1F',
+// Closing brace — end of block (function, if, object, JSX)
+};
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const metadata: Metadata = {
+  // Line 37: title: {
+  title: {
+    // Switch default — fallback when no case matches
+    default: `${SITE_NAME} — Premium Halal Meat Delivery`,
+    // Property or array item — trailing comma allowed in TypeScript
+    template: `%s | ${SITE_NAME}`,
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Property or array item — trailing comma allowed in TypeScript
+  description: siteDescription,
+  // Line 42: keywords: [
+  keywords: [
+    // Property or array item — trailing comma allowed in TypeScript
+    'halal meat',
+    // Property or array item — trailing comma allowed in TypeScript
+    'halal chicken',
+    // Property or array item — trailing comma allowed in TypeScript
+    'halal beef',
+    // Property or array item — trailing comma allowed in TypeScript
+    'halal lamb',
+    // Property or array item — trailing comma allowed in TypeScript
+    'meat delivery',
+    // Property or array item — trailing comma allowed in TypeScript
+    'fresh meat',
+    // Property or array item — trailing comma allowed in TypeScript
+    'Kött Gård',
+    // Property or array item — trailing comma allowed in TypeScript
+    'kottgard',
+  // End of array literal
+  ],
+  // Line 52: openGraph: {
+  openGraph: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: `${SITE_NAME} — Premium Halal Meat Delivery`,
+    // Property or array item — trailing comma allowed in TypeScript
+    description: siteDescription,
+    // Property or array item — trailing comma allowed in TypeScript
+    type: 'website',
+    // Property or array item — trailing comma allowed in TypeScript
+    locale: 'sv_SE',
+    // Property or array item — trailing comma allowed in TypeScript
+    siteName: SITE_NAME,
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 59: robots: {
+  robots: {
+    // Property or array item — trailing comma allowed in TypeScript
+    index: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    follow: true,
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+// Closing brace — end of block (function, if, object, JSX)
+};
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function RootLayout({
+  // Property or array item — trailing comma allowed in TypeScript
+  children,
+// Closing brace — end of block (function, if, object, JSX)
+}: {
+  // Line 68: children: React.ReactNode;
+  children: React.ReactNode;
+// Closing brace — end of block (function, if, object, JSX)
+}) {
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <html
+      // Line 72: lang="sv"
+      lang="sv"
+      // Line 73: dir="ltr"
+      dir="ltr"
+      // Tailwind CSS utility classes — styling (colors, spacing, layout)
+      className={`${inter.variable} ${playfair.variable} ${notoUrdu.variable}`}
+      // Line 75: suppressHydrationWarning
+      suppressHydrationWarning
+    // Line 76: >
+    >
+      // JSX element — HTML-like tag becomes React component in browser
+      <body className="flex min-h-screen flex-col font-sans">
+        // JSX element — HTML-like tag becomes React component in browser
+        <LocaleAttributes />
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="sticky top-0 z-50">
+          // JSX element — HTML-like tag becomes React component in browser
+          <LanguageBanner />
+          // JSX element — HTML-like tag becomes React component in browser
+          <Header />
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        <main className="flex-1">{children}</main>
+        // JSX element — HTML-like tag becomes React component in browser
+        <Footer />
+      // JSX element — HTML-like tag becomes React component in browser
+      </body>
+    // JSX element — HTML-like tag becomes React component in browser
+    </html>
+  // Line 87: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/app/login/page.annotated.tsx b/docs/annotated/src/app/login/page.annotated.tsx
new file mode 100644
index 0000000..cc846e5
--- /dev/null
+++ b/docs/annotated/src/app/login/page.annotated.tsx
@@ -0,0 +1,384 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/app/login/page.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Import React — core UI library (components, hooks, JSX)
+import { useState } from 'react';
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Next.js App Router hooks — useRouter, useParams, useSearchParams
+import { useRouter } from 'next/navigation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Button from '@/components/ui/Button';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useAuthStore } from '@/store/auth';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { DEMO_EMAIL } from '@/lib/constants';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function LoginPage() {
+  // Next.js router — programmatic navigation (router.push)
+  const router = useRouter();
+  // Zustand selector — subscribe to slice of global store
+  const { login, register } = useAuthStore();
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+  // React useState — local component state that triggers re-render on change
+  const [isRegister, setIsRegister] = useState(false);
+  // React useState — local component state that triggers re-render on change
+  const [error, setError] = useState('');
+  // React useState — local component state that triggers re-render on change
+  const [form, setForm] = useState({
+    // Property or array item — trailing comma allowed in TypeScript
+    name: '',
+    // Property or array item — trailing comma allowed in TypeScript
+    email: '',
+    // Property or array item — trailing comma allowed in TypeScript
+    password: '',
+    // Property or array item — trailing comma allowed in TypeScript
+    phone: '',
+    // Property or array item — trailing comma allowed in TypeScript
+    street: '',
+    // Property or array item — trailing comma allowed in TypeScript
+    city: '',
+    // Property or array item — trailing comma allowed in TypeScript
+    state: '',
+    // Property or array item — trailing comma allowed in TypeScript
+    zip: '',
+  // Closing brace — end of block (function, if, object, JSX)
+  });
+// (blank line — separates logical blocks for readability)
+  // Line 28: const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = (e: React.FormEvent) => {
+    // Line 29: e.preventDefault();
+    e.preventDefault();
+    // Line 30: setError('');
+    setError('');
+// (blank line — separates logical blocks for readability)
+    // Conditional branch — different behavior based on runtime value
+    if (isRegister) {
+      // Line 33: const success = register({
+      const success = register({
+        // Property or array item — trailing comma allowed in TypeScript
+        name: form.name,
+        // Property or array item — trailing comma allowed in TypeScript
+        email: form.email,
+        // Property or array item — trailing comma allowed in TypeScript
+        password: form.password,
+        // Property or array item — trailing comma allowed in TypeScript
+        phone: form.phone,
+        // Line 38: address: {
+        address: {
+          // Property or array item — trailing comma allowed in TypeScript
+          street: form.street,
+          // Property or array item — trailing comma allowed in TypeScript
+          city: form.city,
+          // Property or array item — trailing comma allowed in TypeScript
+          state: form.state,
+          // Property or array item — trailing comma allowed in TypeScript
+          zip: form.zip,
+        // Closing brace — end of block (function, if, object, JSX)
+        },
+      // Closing brace — end of block (function, if, object, JSX)
+      });
+      // Conditional branch — different behavior based on runtime value
+      if (success) router.push('/account');
+    // Closing brace — end of block (function, if, object, JSX)
+    } else {
+      // Line 47: const success = login(form.email, form.password);
+      const success = login(form.email, form.password);
+      // Conditional branch — different behavior based on runtime value
+      if (success) {
+        // Line 49: router.push('/account');
+        router.push('/account');
+      // Closing brace — end of block (function, if, object, JSX)
+      } else {
+        // Line 51: setError(t('auth.invalidCredentials', { email: DEMO_EMAIL...
+        setError(t('auth.invalidCredentials', { email: DEMO_EMAIL }));
+      // Closing brace — end of block (function, if, object, JSX)
+      }
+    // Closing brace — end of block (function, if, object, JSX)
+    }
+  // Closing brace — end of block (function, if, object, JSX)
+  };
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div className="flex min-h-[70vh] items-center justify-center bg-gray-50 px-4 py-12">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="w-full max-w-md">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mb-8 text-center">
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand-700">
+            // JSX element — HTML-like tag becomes React component in browser
+            <span className="font-display text-xl font-bold text-gold-400">
+              // Line 62: {t('site.initials')}
+              {t('site.initials')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </span>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+          // JSX element — HTML-like tag becomes React component in browser
+          <h1 className="font-display text-2xl font-bold text-brand-900">
+            // Line 66: {isRegister ? t('auth.createAccount') : t('auth.welcomeBa...
+            {isRegister ? t('auth.createAccount') : t('auth.welcomeBack')}
+          // JSX element — HTML-like tag becomes React component in browser
+          </h1>
+          // JSX element — HTML-like tag becomes React component in browser
+          <p className="mt-1 text-sm text-gray-500">
+            // Line 69: {isRegister
+            {isRegister
+              // Line 70: ? t('auth.joinTagline', { name: t('site.name') })
+              ? t('auth.joinTagline', { name: t('site.name') })
+              // Line 71: : t('auth.signInTagline', { name: t('site.name') })}
+              : t('auth.signInTagline', { name: t('site.name') })}
+          // JSX element — HTML-like tag becomes React component in browser
+          </p>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="card-premium p-8">
+          // JSX element — HTML-like tag becomes React component in browser
+          <form onSubmit={handleSubmit} className="space-y-4">
+            // Line 77: {isRegister && (
+            {isRegister && (
+              // JSX element — HTML-like tag becomes React component in browser
+              <div>
+                // JSX element — HTML-like tag becomes React component in browser
+                <label className="label-text">{t('auth.fullName')}</label>
+                // JSX element — HTML-like tag becomes React component in browser
+                <input
+                  // Line 81: required
+                  required
+                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                  className="input-field"
+                  // Line 83: value={form.name}
+                  value={form.name}
+                  // Change handler — runs when input/select value changes
+                  onChange={(e) => setForm({ ...form, name: e.target.value })}
+                // Line 85: />
+                />
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+            // Line 87: )}
+            )}
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <div>
+              // JSX element — HTML-like tag becomes React component in browser
+              <label className="label-text">{t('auth.email')}</label>
+              // JSX element — HTML-like tag becomes React component in browser
+              <input
+                // Line 92: required
+                required
+                // Line 93: type="email"
+                type="email"
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className="input-field"
+                // Line 95: value={form.email}
+                value={form.email}
+                // Change handler — runs when input/select value changes
+                onChange={(e) => setForm({ ...form, email: e.target.value })}
+              // Line 97: />
+              />
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <div>
+              // JSX element — HTML-like tag becomes React component in browser
+              <label className="label-text">{t('auth.password')}</label>
+              // JSX element — HTML-like tag becomes React component in browser
+              <input
+                // Line 103: required
+                required
+                // Line 104: type="password"
+                type="password"
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className="input-field"
+                // Line 106: value={form.password}
+                value={form.password}
+                // Change handler — runs when input/select value changes
+                onChange={(e) => setForm({ ...form, password: e.target.value })}
+              // Line 108: />
+              />
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+// (blank line — separates logical blocks for readability)
+            // Line 111: {isRegister && (
+            {isRegister && (
+              // React Fragment — group elements without extra wrapper DOM node
+              <>
+                // JSX element — HTML-like tag becomes React component in browser
+                <div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <label className="label-text">{t('auth.phone')}</label>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <input
+                    // Line 116: required
+                    required
+                    // Line 117: type="tel"
+                    type="tel"
+                    // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                    className="input-field"
+                    // Line 119: value={form.phone}
+                    value={form.phone}
+                    // Change handler — runs when input/select value changes
+                    onChange={(e) => setForm({ ...form, phone: e.target.value })}
+                  // Line 121: />
+                  />
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+                // JSX element — HTML-like tag becomes React component in browser
+                <div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <label className="label-text">{t('auth.street')}</label>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <input
+                    // Line 126: required
+                    required
+                    // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                    className="input-field"
+                    // Line 128: value={form.street}
+                    value={form.street}
+                    // Change handler — runs when input/select value changes
+                    onChange={(e) => setForm({ ...form, street: e.target.value })}
+                  // Line 130: />
+                  />
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="grid grid-cols-2 gap-3">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <div>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <label className="label-text">{t('auth.city')}</label>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <input
+                      // Line 136: required
+                      required
+                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                      className="input-field"
+                      // Line 138: value={form.city}
+                      value={form.city}
+                      // Change handler — runs when input/select value changes
+                      onChange={(e) => setForm({ ...form, city: e.target.value })}
+                    // Line 140: />
+                    />
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <div>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <label className="label-text">{t('auth.state')}</label>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <input
+                      // Line 145: required
+                      required
+                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                      className="input-field"
+                      // Line 147: value={form.state}
+                      value={form.state}
+                      // Change handler — runs when input/select value changes
+                      onChange={(e) => setForm({ ...form, state: e.target.value })}
+                    // Line 149: />
+                    />
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </div>
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+                // JSX element — HTML-like tag becomes React component in browser
+                <div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <label className="label-text">{t('auth.zip')}</label>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <input
+                    // Line 155: required
+                    required
+                    // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                    className="input-field"
+                    // Line 157: value={form.zip}
+                    value={form.zip}
+                    // Change handler — runs when input/select value changes
+                    onChange={(e) => setForm({ ...form, zip: e.target.value })}
+                  // Line 159: />
+                  />
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+              // JSX element — HTML-like tag becomes React component in browser
+              </>
+            // Line 162: )}
+            )}
+// (blank line — separates logical blocks for readability)
+            // Line 164: {error && (
+            {error && (
+              // JSX element — HTML-like tag becomes React component in browser
+              <p className="rounded-lg bg-red-50 px-4 py-2 text-sm text-red-600">{error}</p>
+            // Line 166: )}
+            )}
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <Button type="submit" variant="primary" size="lg" className="w-full">
+              // Line 169: {isRegister ? t('auth.register') : t('auth.signIn')}
+              {isRegister ? t('auth.register') : t('auth.signIn')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </Button>
+          // JSX element — HTML-like tag becomes React component in browser
+          </form>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="mt-6 text-center">
+            // JSX element — HTML-like tag becomes React component in browser
+            <button
+              // Click handler — runs when user clicks (must be client component)
+              onClick={() => {
+                // Line 176: setIsRegister(!isRegister);
+                setIsRegister(!isRegister);
+                // Line 177: setError('');
+                setError('');
+              // Closing brace — end of block (function, if, object, JSX)
+              }}
+              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+              className="text-sm font-medium text-brand-600 hover:text-brand-800"
+            // Line 180: >
+            >
+              // Line 181: {isRegister ? t('auth.hasAccount') : t('auth.noAccount')}
+              {isRegister ? t('auth.hasAccount') : t('auth.noAccount')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </button>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+// (blank line — separates logical blocks for readability)
+          // Line 185: {!isRegister && (
+          {!isRegister && (
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="mt-4 rounded-lg bg-brand-50 px-4 py-3 text-center">
+              // JSX element — HTML-like tag becomes React component in browser
+              <p className="text-xs text-brand-700">
+                // Line 188: {t('auth.demo', { email: DEMO_EMAIL })}
+                {t('auth.demo', { email: DEMO_EMAIL })}
+              // JSX element — HTML-like tag becomes React component in browser
+              </p>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+          // Line 191: )}
+          )}
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 195: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/app/not-found.annotated.tsx b/docs/annotated/src/app/not-found.annotated.tsx
new file mode 100644
index 0000000..c7ca617
--- /dev/null
+++ b/docs/annotated/src/app/not-found.annotated.tsx
@@ -0,0 +1,44 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/app/not-found.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Button from '@/components/ui/Button';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function NotFound() {
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div className="flex min-h-[60vh] flex-col items-center justify-center px-4 text-center">
+      // JSX element — HTML-like tag becomes React component in browser
+      <h1 className="mb-2 font-display text-6xl font-bold text-brand-900">
+        // Line 13: {t('notFound.title')}
+        {t('notFound.title')}
+      // JSX element — HTML-like tag becomes React component in browser
+      </h1>
+      // JSX element — HTML-like tag becomes React component in browser
+      <p className="mb-6 text-lg text-gray-500">{t('notFound.message')}</p>
+      // JSX element — HTML-like tag becomes React component in browser
+      <Link href="/">
+        // JSX element — HTML-like tag becomes React component in browser
+        <Button>{t('notFound.goHome')}</Button>
+      // JSX element — HTML-like tag becomes React component in browser
+      </Link>
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 20: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/app/page.annotated.tsx b/docs/annotated/src/app/page.annotated.tsx
new file mode 100644
index 0000000..bcdbc38
--- /dev/null
+++ b/docs/annotated/src/app/page.annotated.tsx
@@ -0,0 +1,58 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/app/page.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Hero from '@/components/home/Hero';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import TrustBadges from '@/components/home/TrustBadges';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import AboutPreview from '@/components/home/AboutPreview';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import CategoryGrid from '@/components/home/CategoryGrid';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import FeaturedProducts from '@/components/home/FeaturedProducts';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import HowItWorks from '@/components/home/HowItWorks';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import WeeklyOffers from '@/components/home/WeeklyOffers';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import SocialFollow from '@/components/home/SocialFollow';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import ContactPreview from '@/components/home/ContactPreview';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import CTA from '@/components/home/CTA';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function HomePage() {
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // React Fragment — group elements without extra wrapper DOM node
+    <>
+      // JSX element — HTML-like tag becomes React component in browser
+      <Hero />
+      // JSX element — HTML-like tag becomes React component in browser
+      <TrustBadges />
+      // JSX element — HTML-like tag becomes React component in browser
+      <AboutPreview />
+      // JSX element — HTML-like tag becomes React component in browser
+      <CategoryGrid />
+      // JSX element — HTML-like tag becomes React component in browser
+      <FeaturedProducts />
+      // JSX element — HTML-like tag becomes React component in browser
+      <HowItWorks />
+      // JSX element — HTML-like tag becomes React component in browser
+      <WeeklyOffers />
+      // JSX element — HTML-like tag becomes React component in browser
+      <CTA />
+      // JSX element — HTML-like tag becomes React component in browser
+      <SocialFollow />
+      // JSX element — HTML-like tag becomes React component in browser
+      <ContactPreview />
+    // JSX element — HTML-like tag becomes React component in browser
+    </>
+  // Line 26: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/app/product/[slug]/page.annotated.tsx b/docs/annotated/src/app/product/[slug]/page.annotated.tsx
new file mode 100644
index 0000000..8de12cb
--- /dev/null
+++ b/docs/annotated/src/app/product/[slug]/page.annotated.tsx
@@ -0,0 +1,434 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/app/product/[slug]/page.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Import React — core UI library (components, hooks, JSX)
+import { useState } from 'react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import AppImage from '@/components/ui/AppImage';
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Next.js App Router hooks — useRouter, useParams, useSearchParams
+import { notFound, useParams } from 'next/navigation';
+// Import external package or local module
+import {
+  // Property or array item — trailing comma allowed in TypeScript
+  ShoppingCart,
+  // Property or array item — trailing comma allowed in TypeScript
+  Heart,
+  // Property or array item — trailing comma allowed in TypeScript
+  ChevronLeft,
+  // Property or array item — trailing comma allowed in TypeScript
+  Minus,
+  // Property or array item — trailing comma allowed in TypeScript
+  Plus,
+  // Property or array item — trailing comma allowed in TypeScript
+  Check,
+  // Property or array item — trailing comma allowed in TypeScript
+  ShieldCheck,
+// Closing brace — end of block (function, if, object, JSX)
+} from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import CustomizationSelector from '@/components/product/CustomizationSelector';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Button from '@/components/ui/Button';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { getProductBySlug } from '@/lib/products';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { getDefaultCustomization, getCustomizationLabel } from '@/lib/customization';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { localizeProduct } from '@/lib/product-i18n';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { formatPrice, getFormatLocale } from '@/lib/utils';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useCartStore } from '@/store/cart';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useWishlistStore } from '@/store/wishlist';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { ProductCustomization } from '@/types';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function ProductPage() {
+  // Read dynamic route segment ([slug] from URL)
+  const params = useParams();
+  // Line 29: const slug = params.slug as string;
+  const slug = params.slug as string;
+  // Line 30: const rawProduct = getProductBySlug(slug);
+  const rawProduct = getProductBySlug(slug);
+  // Custom hook — returns t() translator and current locale
+  const { t, locale } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // React useState — local component state that triggers re-render on change
+  const [customization, setCustomization] = useState<ProductCustomization>(
+    // Line 34: rawProduct ? getDefaultCustomization(rawProduct.category)...
+    rawProduct ? getDefaultCustomization(rawProduct.category) : { type: 'fish' }
+  // Line 35: );
+  );
+  // React useState — local component state that triggers re-render on change
+  const [quantity, setQuantity] = useState(1);
+  // React useState — local component state that triggers re-render on change
+  const [selectedImage, setSelectedImage] = useState(0);
+  // React useState — local component state that triggers re-render on change
+  const [added, setAdded] = useState(false);
+// (blank line — separates logical blocks for readability)
+  // Zustand selector — subscribe to slice of global store
+  const addItem = useCartStore((s) => s.addItem);
+  // Zustand selector — subscribe to slice of global store
+  const { isInWishlist, toggleItem } = useWishlistStore();
+// (blank line — separates logical blocks for readability)
+  // Conditional branch — different behavior based on runtime value
+  if (!rawProduct) {
+    // Line 44: notFound();
+    notFound();
+  // Closing brace — end of block (function, if, object, JSX)
+  }
+// (blank line — separates logical blocks for readability)
+  // Line 47: const product = localizeProduct(rawProduct, t);
+  const product = localizeProduct(rawProduct, t);
+  // Line 48: const inWishlist = isInWishlist(product.id);
+  const inWishlist = isInWishlist(product.id);
+// (blank line — separates logical blocks for readability)
+  // Line 50: const handleAddToCart = () => {
+  const handleAddToCart = () => {
+    // Line 51: const label = getCustomizationLabel(customization, t);
+    const label = getCustomizationLabel(customization, t);
+    // Line 52: addItem(rawProduct, customization, label, quantity);
+    addItem(rawProduct, customization, label, quantity);
+    // Line 53: setAdded(true);
+    setAdded(true);
+    // Line 54: setTimeout(() => setAdded(false), 2000);
+    setTimeout(() => setAdded(false), 2000);
+  // Closing brace — end of block (function, if, object, JSX)
+  };
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div className="bg-white">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <Link
+          // Link target URL — internal route or external https://
+          href="/shop"
+          // Tailwind CSS utility classes — styling (colors, spacing, layout)
+          className="mb-6 inline-flex items-center gap-1 text-sm font-medium text-gray-500 transition-colors hover:text-brand-700"
+        // Line 63: >
+        >
+          // JSX element — HTML-like tag becomes React component in browser
+          <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
+          // Line 65: {t('product.backToShop')}
+          {t('product.backToShop')}
+        // JSX element — HTML-like tag becomes React component in browser
+        </Link>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="grid gap-10 lg:grid-cols-2">
+          // JSX element — HTML-like tag becomes React component in browser
+          <div>
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="relative mb-4 aspect-square overflow-hidden rounded-2xl bg-gray-50">
+              // JSX element — HTML-like tag becomes React component in browser
+              <AppImage
+                // Line 72: src={product.images[selectedImage] || product.image}
+                src={product.images[selectedImage] || product.image}
+                // Line 73: alt={product.name}
+                alt={product.name}
+                // Line 74: fill
+                fill
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className="object-cover"
+                // Line 76: priority
+                priority
+                // Line 77: sizes="(max-width: 1024px) 100vw, 640px"
+                sizes="(max-width: 1024px) 100vw, 640px"
+              // Line 78: />
+              />
+              // Line 79: {product.badge && (
+              {product.badge && (
+                // JSX element — HTML-like tag becomes React component in browser
+                <span className="absolute start-4 top-4 rounded-full bg-gold-500 px-4 py-1.5 text-sm font-semibold text-white shadow-gold">
+                  // Line 81: {product.badge}
+                  {product.badge}
+                // JSX element — HTML-like tag becomes React component in browser
+                </span>
+              // Line 83: )}
+              )}
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+            // Line 85: {product.images.length > 1 && (
+            {product.images.length > 1 && (
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="flex gap-3">
+                // Array.map — transform each item (often render a list of components)
+                {product.images.map((img, i) => (
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <button
+                    // Line 89: key={img}
+                    key={img}
+                    // Click handler — runs when user clicks (must be client component)
+                    onClick={() => setSelectedImage(i)}
+                    // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                    className={`relative h-20 w-20 overflow-hidden rounded-lg border-2 transition-all ${
+                      // Line 92: selectedImage === i
+                      selectedImage === i
+                        // Line 93: ? 'border-brand-700'
+                        ? 'border-brand-700'
+                        // Line 94: : 'border-transparent opacity-60 hover:opacity-100'
+                        : 'border-transparent opacity-60 hover:opacity-100'
+                    // Closing brace — end of block (function, if, object, JSX)
+                    }`}
+                  // Line 96: >
+                  >
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <AppImage src={img} alt="" fill className="object-cover" sizes="80px" />
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </button>
+                // Line 99: ))}
+                ))}
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+            // Line 101: )}
+            )}
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <div>
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="mb-2 flex items-center gap-2">
+              // JSX element — HTML-like tag becomes React component in browser
+              <Link
+                // Link target URL — internal route or external https://
+                href={`/shop?category=${product.category}`}
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className="rounded-full bg-brand-50 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-brand-700 transition-colors hover:bg-brand-100"
+              // Line 109: >
+              >
+                // Line 110: {t(`categories.${product.category}.name`)}
+                {t(`categories.${product.category}.name`)}
+              // JSX element — HTML-like tag becomes React component in browser
+              </Link>
+              // Line 112: {product.inStock ? (
+              {product.inStock ? (
+                // JSX element — HTML-like tag becomes React component in browser
+                <span className="flex items-center gap-1 text-xs font-medium text-brand-700">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <Check className="h-3 w-3" /> {t('product.inStock')}
+                // JSX element — HTML-like tag becomes React component in browser
+                </span>
+              // Line 116: ) : (
+              ) : (
+                // JSX element — HTML-like tag becomes React component in browser
+                <span className="text-xs font-medium text-red-500">
+                  // Line 118: {t('product.outOfStock')}
+                  {t('product.outOfStock')}
+                // JSX element — HTML-like tag becomes React component in browser
+                </span>
+              // Line 120: )}
+              )}
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <h1 className="mb-2 font-display text-3xl font-bold text-brand-900 lg:text-4xl">
+              // Line 124: {product.name}
+              {product.name}
+            // JSX element — HTML-like tag becomes React component in browser
+            </h1>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <p className="mb-4 text-gray-500">{product.description}</p>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="mb-6 flex items-baseline gap-2">
+              // JSX element — HTML-like tag becomes React component in browser
+              <span className="text-3xl font-bold text-brand-800">
+                // Line 131: {formatPrice(product.price, getFormatLocale(locale))}
+                {formatPrice(product.price, getFormatLocale(locale))}
+              // JSX element — HTML-like tag becomes React component in browser
+              </span>
+              // JSX element — HTML-like tag becomes React component in browser
+              <span className="text-sm text-gray-400">{product.priceUnit}</span>
+              // Line 134: {product.weight && (
+              {product.weight && (
+                // JSX element — HTML-like tag becomes React component in browser
+                <span className="text-sm text-gray-400">· {product.weight}</span>
+              // Line 136: )}
+              )}
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="mb-6 flex items-center gap-2 rounded-lg border border-brand-100 bg-brand-50/50 px-4 py-3">
+              // JSX element — HTML-like tag becomes React component in browser
+              <ShieldCheck className="h-5 w-5 shrink-0 text-brand-700" />
+              // JSX element — HTML-like tag becomes React component in browser
+              <span className="text-sm text-brand-800">{t('product.halalTrust')}</span>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="mb-6 rounded-2xl border border-gray-100 bg-gray-50 p-6">
+              // JSX element — HTML-like tag becomes React component in browser
+              <CustomizationSelector
+                // Line 146: category={product.category}
+                category={product.category}
+                // Line 147: customization={customization}
+                customization={customization}
+                // Change handler — runs when input/select value changes
+                onChange={setCustomization}
+              // Line 149: />
+              />
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="mt-4 rounded-lg bg-white px-4 py-3">
+                // JSX element — HTML-like tag becomes React component in browser
+                <p className="text-xs text-gray-500">{t('product.yourSelection')}</p>
+                // JSX element — HTML-like tag becomes React component in browser
+                <p className="text-sm font-semibold text-brand-800">
+                  // Line 153: {getCustomizationLabel(customization, t)}
+                  {getCustomizationLabel(customization, t)}
+                // JSX element — HTML-like tag becomes React component in browser
+                </p>
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="mb-6 flex items-center gap-4">
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="flex items-center rounded-lg border border-gray-200">
+                // JSX element — HTML-like tag becomes React component in browser
+                <button
+                  // Click handler — runs when user clicks (must be client component)
+                  onClick={() => setQuantity(Math.max(1, quantity - 1))}
+                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                  className="flex h-12 w-12 items-center justify-center text-gray-500 transition-colors hover:text-brand-700"
+                  // Accessibility attribute — screen readers and assistive tech
+                  aria-label={t('product.decreaseQty')}
+                // Line 164: >
+                >
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <Minus className="h-4 w-4" />
+                // JSX element — HTML-like tag becomes React component in browser
+                </button>
+                // JSX element — HTML-like tag becomes React component in browser
+                <span className="w-12 text-center font-semibold">{quantity}</span>
+                // JSX element — HTML-like tag becomes React component in browser
+                <button
+                  // Click handler — runs when user clicks (must be client component)
+                  onClick={() => setQuantity(quantity + 1)}
+                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                  className="flex h-12 w-12 items-center justify-center text-gray-500 transition-colors hover:text-brand-700"
+                  // Accessibility attribute — screen readers and assistive tech
+                  aria-label={t('product.increaseQty')}
+                // Line 172: >
+                >
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <Plus className="h-4 w-4" />
+                // JSX element — HTML-like tag becomes React component in browser
+                </button>
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+// (blank line — separates logical blocks for readability)
+              // JSX element — HTML-like tag becomes React component in browser
+              <Button
+                // Click handler — runs when user clicks (must be client component)
+                onClick={handleAddToCart}
+                // Line 179: disabled={!product.inStock}
+                disabled={!product.inStock}
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className="flex-1"
+                // Line 181: size="lg"
+                size="lg"
+              // Line 182: >
+              >
+                // Line 183: {added ? (
+                {added ? (
+                  // React Fragment — group elements without extra wrapper DOM node
+                  <>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <Check className="h-4 w-4" />
+                    // Line 186: {t('product.addedToCart')}
+                    {t('product.addedToCart')}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </>
+                // Line 188: ) : (
+                ) : (
+                  // React Fragment — group elements without extra wrapper DOM node
+                  <>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <ShoppingCart className="h-4 w-4" />
+                    // Line 191: {t('product.addToCart')}
+                    {t('product.addToCart')}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </>
+                // Line 193: )}
+                )}
+              // JSX element — HTML-like tag becomes React component in browser
+              </Button>
+// (blank line — separates logical blocks for readability)
+              // JSX element — HTML-like tag becomes React component in browser
+              <button
+                // Click handler — runs when user clicks (must be client component)
+                onClick={() => toggleItem(rawProduct)}
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className={`flex h-12 w-12 items-center justify-center rounded-lg border-2 transition-all ${
+                  // Line 199: inWishlist
+                  inWishlist
+                    // Line 200: ? 'border-red-200 bg-red-50 text-red-500'
+                    ? 'border-red-200 bg-red-50 text-red-500'
+                    // Line 201: : 'border-gray-200 text-gray-400 hover:border-brand-300 h...
+                    : 'border-gray-200 text-gray-400 hover:border-brand-300 hover:text-brand-700'
+                // Closing brace — end of block (function, if, object, JSX)
+                }`}
+                // Accessibility attribute — screen readers and assistive tech
+                aria-label={
+                  // Line 204: inWishlist ? t('product.removeWishlist') : t('product.add...
+                  inWishlist ? t('product.removeWishlist') : t('product.addWishlist')
+                // Closing brace — end of block (function, if, object, JSX)
+                }
+              // Line 206: >
+              >
+                // JSX element — HTML-like tag becomes React component in browser
+                <Heart className={`h-5 w-5 ${inWishlist ? 'fill-current' : ''}`} />
+              // JSX element — HTML-like tag becomes React component in browser
+              </button>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="border-t border-gray-100 pt-6">
+              // JSX element — HTML-like tag becomes React component in browser
+              <h2 className="mb-3 font-display text-lg font-semibold text-brand-900">
+                // Line 213: {t('product.aboutProduct')}
+                {t('product.aboutProduct')}
+              // JSX element — HTML-like tag becomes React component in browser
+              </h2>
+              // JSX element — HTML-like tag becomes React component in browser
+              <p className="text-sm leading-relaxed text-gray-600">
+                // Line 216: {product.longDescription}
+                {product.longDescription}
+              // JSX element — HTML-like tag becomes React component in browser
+              </p>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 223: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/app/shop/layout.annotated.tsx b/docs/annotated/src/app/shop/layout.annotated.tsx
new file mode 100644
index 0000000..a99c244
--- /dev/null
+++ b/docs/annotated/src/app/shop/layout.annotated.tsx
@@ -0,0 +1,48 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/app/shop/layout.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Import React — core UI library (components, hooks, JSX)
+import { Suspense } from 'react';
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const metadata = {
+  // Property or array item — trailing comma allowed in TypeScript
+  title: 'Shop',
+  // Line 5: description:
+  description:
+    // Property or array item — trailing comma allowed in TypeScript
+    'Browse premium halal chicken, beef, lamb, and fish. Customized cuts delivered fresh to your door.',
+// Closing brace — end of block (function, if, object, JSX)
+};
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function ShopLayout({
+  // Property or array item — trailing comma allowed in TypeScript
+  children,
+// Closing brace — end of block (function, if, object, JSX)
+}: {
+  // Line 12: children: React.ReactNode;
+  children: React.ReactNode;
+// Closing brace — end of block (function, if, object, JSX)
+}) {
+  // Return value from function
+  return <Suspense fallback={<ShopLoading />}>{children}</Suspense>;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Function declaration — reusable logic in this file
+function ShopLoading() {
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div className="flex min-h-[50vh] items-center justify-center">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="h-8 w-8 animate-spin rounded-full border-4 border-brand-200 border-t-brand-700" />
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 22: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/app/shop/page.annotated.tsx b/docs/annotated/src/app/shop/page.annotated.tsx
new file mode 100644
index 0000000..d23ddcf
--- /dev/null
+++ b/docs/annotated/src/app/shop/page.annotated.tsx
@@ -0,0 +1,275 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/app/shop/page.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Import React — core UI library (components, hooks, JSX)
+import { useCallback, useEffect, useMemo, useState } from 'react';
+// Next.js App Router hooks — useRouter, useParams, useSearchParams
+import { useRouter, useSearchParams } from 'next/navigation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import ProductCard from '@/components/product/ProductCard';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import ShopFilters from '@/components/shop/ShopFilters';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { products } from '@/lib/products';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { localizeProduct } from '@/lib/product-i18n';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { Category, SortOption } from '@/types';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// (blank line — separates logical blocks for readability)
+// Line 12: const CATEGORIES: Category[] = ['chicken', 'beef', 'lamb'...
+const CATEGORIES: Category[] = ['chicken', 'beef', 'lamb', 'fish'];
+// (blank line — separates logical blocks for readability)
+// Function declaration — reusable logic in this file
+function parseCategory(value: string | null): Category | 'all' {
+  // Return value from function
+  return CATEGORIES.includes(value as Category) ? (value as Category) : 'all';
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function ShopPage() {
+  // Next.js router — programmatic navigation (router.push)
+  const router = useRouter();
+  // Read URL query string (?category=beef&q=steak)
+  const searchParams = useSearchParams();
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // React useState — local component state that triggers re-render on change
+  const [selectedCategory, setSelectedCategory] = useState<Category | 'all'>(
+    // Line 24: parseCategory(searchParams.get('category'))
+    parseCategory(searchParams.get('category'))
+  // Line 25: );
+  );
+  // React useState — local component state that triggers re-render on change
+  const [sortBy, setSortBy] = useState<SortOption>('featured');
+  // React useState — local component state that triggers re-render on change
+  const [searchQuery, setSearchQuery] = useState(searchParams.get('q') || '');
+// (blank line — separates logical blocks for readability)
+  // Side effect hook — runs after paint; deps array controls when it re-runs
+  useEffect(() => {
+    // Line 30: setSelectedCategory(parseCategory(searchParams.get('categ...
+    setSelectedCategory(parseCategory(searchParams.get('category')));
+    // Line 31: setSearchQuery(searchParams.get('q') || '');
+    setSearchQuery(searchParams.get('q') || '');
+  // Closing brace — end of block (function, if, object, JSX)
+  }, [searchParams]);
+// (blank line — separates logical blocks for readability)
+  // React useCallback — stable function reference for useEffect/useMemo deps
+  const pushParams = useCallback(
+    // Line 35: (updates: { category?: Category | 'all'; q?: string }) => {
+    (updates: { category?: Category | 'all'; q?: string }) => {
+      // Line 36: const params = new URLSearchParams(searchParams.toString());
+      const params = new URLSearchParams(searchParams.toString());
+// (blank line — separates logical blocks for readability)
+      // Conditional branch — different behavior based on runtime value
+      if (updates.category !== undefined) {
+        // Conditional branch — different behavior based on runtime value
+        if (updates.category === 'all') params.delete('category');
+        // Line 40: else params.set('category', updates.category);
+        else params.set('category', updates.category);
+      // Closing brace — end of block (function, if, object, JSX)
+      }
+// (blank line — separates logical blocks for readability)
+      // Conditional branch — different behavior based on runtime value
+      if (updates.q !== undefined) {
+        // Conditional branch — different behavior based on runtime value
+        if (updates.q) params.set('q', updates.q);
+        // Line 45: else params.delete('q');
+        else params.delete('q');
+      // Closing brace — end of block (function, if, object, JSX)
+      }
+// (blank line — separates logical blocks for readability)
+      // Line 48: const qs = params.toString();
+      const qs = params.toString();
+      // Line 49: router.push(qs ? `/shop?${qs}` : '/shop', { scroll: false...
+      router.push(qs ? `/shop?${qs}` : '/shop', { scroll: false });
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 51: [router, searchParams]
+    [router, searchParams]
+  // Line 52: );
+  );
+// (blank line — separates logical blocks for readability)
+  // Line 54: const handleCategoryChange = (category: Category | 'all')...
+  const handleCategoryChange = (category: Category | 'all') => {
+    // Line 55: setSelectedCategory(category);
+    setSelectedCategory(category);
+    // Line 56: pushParams({ category });
+    pushParams({ category });
+  // Closing brace — end of block (function, if, object, JSX)
+  };
+// (blank line — separates logical blocks for readability)
+  // Line 59: const handleSearchChange = (query: string) => {
+  const handleSearchChange = (query: string) => {
+    // Line 60: setSearchQuery(query);
+    setSearchQuery(query);
+    // Line 61: pushParams({ q: query });
+    pushParams({ q: query });
+  // Closing brace — end of block (function, if, object, JSX)
+  };
+// (blank line — separates logical blocks for readability)
+  // React useMemo — cache expensive computed value until dependencies change
+  const filteredProducts = useMemo(() => {
+    // Array.map — transform each item (often render a list of components)
+    let result = products.map((p) => localizeProduct(p, t));
+// (blank line — separates logical blocks for readability)
+    // Conditional branch — different behavior based on runtime value
+    if (selectedCategory !== 'all') {
+      // Array.filter — keep items matching condition (search, category)
+      result = result.filter((p) => p.category === selectedCategory);
+    // Closing brace — end of block (function, if, object, JSX)
+    }
+// (blank line — separates logical blocks for readability)
+    // Conditional branch — different behavior based on runtime value
+    if (searchQuery.trim()) {
+      // Line 72: const query = searchQuery.toLowerCase();
+      const query = searchQuery.toLowerCase();
+      // Array.filter — keep items matching condition (search, category)
+      result = result.filter(
+        // Line 74: (p) =>
+        (p) =>
+          // Line 75: p.name.toLowerCase().includes(query) ||
+          p.name.toLowerCase().includes(query) ||
+          // Line 76: p.description.toLowerCase().includes(query) ||
+          p.description.toLowerCase().includes(query) ||
+          // Line 77: p.tags.some((tag) => tag.includes(query))
+          p.tags.some((tag) => tag.includes(query))
+      // Line 78: );
+      );
+    // Closing brace — end of block (function, if, object, JSX)
+    }
+// (blank line — separates logical blocks for readability)
+    // Switch — multiple branches on one variable (e.g. sort order)
+    switch (sortBy) {
+      // Switch case — handle one specific value
+      case 'price-asc':
+        // Array.sort — reorder items (price, name, featured)
+        result.sort((a, b) => a.price - b.price);
+        // Line 84: break;
+        break;
+      // Switch case — handle one specific value
+      case 'price-desc':
+        // Array.sort — reorder items (price, name, featured)
+        result.sort((a, b) => b.price - a.price);
+        // Line 87: break;
+        break;
+      // Switch case — handle one specific value
+      case 'name':
+        // Array.sort — reorder items (price, name, featured)
+        result.sort((a, b) => a.name.localeCompare(b.name));
+        // Line 90: break;
+        break;
+      // Switch case — handle one specific value
+      case 'featured':
+      // Switch default — fallback when no case matches
+      default:
+        // Array.sort — reorder items (price, name, featured)
+        result.sort((a, b) => (b.featured ? 1 : 0) - (a.featured ? 1 : 0));
+        // Line 94: break;
+        break;
+    // Closing brace — end of block (function, if, object, JSX)
+    }
+// (blank line — separates logical blocks for readability)
+    // Return value from function
+    return result;
+  // Closing brace — end of block (function, if, object, JSX)
+  }, [selectedCategory, sortBy, searchQuery, t]);
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div className="bg-gray-50">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="border-b border-gray-100 bg-white">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+          // JSX element — HTML-like tag becomes React component in browser
+          <h1 className="section-heading mb-2">{t('shop.title')}</h1>
+          // JSX element — HTML-like tag becomes React component in browser
+          <p className="text-gray-500">{t('shop.subtitle')}</p>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+// (blank line — separates logical blocks for readability)
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="flex flex-col gap-8 lg:flex-row">
+          // JSX element — HTML-like tag becomes React component in browser
+          <aside className="lg:w-64 lg:shrink-0">
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="card-premium sticky top-24 p-6">
+              // JSX element — HTML-like tag becomes React component in browser
+              <ShopFilters
+                // Line 114: selectedCategory={selectedCategory}
+                selectedCategory={selectedCategory}
+                // Line 115: onCategoryChange={handleCategoryChange}
+                onCategoryChange={handleCategoryChange}
+                // Line 116: sortBy={sortBy}
+                sortBy={sortBy}
+                // Line 117: onSortChange={setSortBy}
+                onSortChange={setSortBy}
+                // Line 118: searchQuery={searchQuery}
+                searchQuery={searchQuery}
+                // Line 119: onSearchChange={handleSearchChange}
+                onSearchChange={handleSearchChange}
+                // Line 120: totalResults={filteredProducts.length}
+                totalResults={filteredProducts.length}
+              // Line 121: />
+              />
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+          // JSX element — HTML-like tag becomes React component in browser
+          </aside>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="flex-1">
+            // Line 126: {filteredProducts.length === 0 ? (
+            {filteredProducts.length === 0 ? (
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="card-premium flex flex-col items-center justify-center p-16 text-center">
+                // JSX element — HTML-like tag becomes React component in browser
+                <p className="mb-2 text-lg font-semibold text-brand-900">
+                  // Line 129: {t('shop.noProducts')}
+                  {t('shop.noProducts')}
+                // JSX element — HTML-like tag becomes React component in browser
+                </p>
+                // JSX element — HTML-like tag becomes React component in browser
+                <p className="text-sm text-gray-500">{t('shop.noProductsHint')}</p>
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+            // Line 133: ) : (
+            ) : (
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="grid gap-6 sm:grid-cols-2 xl:grid-cols-3">
+                // Array.map — transform each item (often render a list of components)
+                {filteredProducts.map((product) => (
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <ProductCard key={product.id} product={product} />
+                // Line 137: ))}
+                ))}
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+            // Line 139: )}
+            )}
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 144: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/app/wishlist/page.annotated.tsx b/docs/annotated/src/app/wishlist/page.annotated.tsx
new file mode 100644
index 0000000..342c762
--- /dev/null
+++ b/docs/annotated/src/app/wishlist/page.annotated.tsx
@@ -0,0 +1,103 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/app/wishlist/page.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Lucide icons — lightweight SVG icon components
+import { Heart } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import ProductCard from '@/components/product/ProductCard';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Button from '@/components/ui/Button';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useWishlistStore } from '@/store/wishlist';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { localizeProduct } from '@/lib/product-i18n';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function WishlistPage() {
+  // Zustand selector — subscribe to slice of global store
+  const items = useWishlistStore((s) => s.items);
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+  // Array.map — transform each item (often render a list of components)
+  const localizedItems = items.map((p) => localizeProduct(p, t));
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div className="bg-gray-50">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="border-b border-gray-100 bg-white">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+          // JSX element — HTML-like tag becomes React component in browser
+          <h1 className="section-heading">{t('wishlist.title')}</h1>
+          // JSX element — HTML-like tag becomes React component in browser
+          <p className="text-gray-500">
+            // Line 22: {t('wishlist.saved', { count: items.length })}
+            {t('wishlist.saved', { count: items.length })}
+          // JSX element — HTML-like tag becomes React component in browser
+          </p>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+// (blank line — separates logical blocks for readability)
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
+        // Line 28: {items.length === 0 ? (
+        {items.length === 0 ? (
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="card-premium flex flex-col items-center justify-center p-16 text-center">
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-50">
+              // JSX element — HTML-like tag becomes React component in browser
+              <Heart className="h-8 w-8 text-red-300" />
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+            // JSX element — HTML-like tag becomes React component in browser
+            <h2 className="mb-2 text-lg font-semibold text-brand-900">
+              // Line 34: {t('wishlist.empty')}
+              {t('wishlist.empty')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </h2>
+            // JSX element — HTML-like tag becomes React component in browser
+            <p className="mb-6 text-sm text-gray-500">{t('wishlist.emptyHint')}</p>
+            // JSX element — HTML-like tag becomes React component in browser
+            <Link href="/shop">
+              // JSX element — HTML-like tag becomes React component in browser
+              <Button>{t('wishlist.browse')}</Button>
+            // JSX element — HTML-like tag becomes React component in browser
+            </Link>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // Line 41: ) : (
+        ) : (
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            // Array.map — transform each item (often render a list of components)
+            {localizedItems.map((product) => (
+              // JSX element — HTML-like tag becomes React component in browser
+              <ProductCard key={product.id} product={product} />
+            // Line 45: ))}
+            ))}
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // Line 47: )}
+        )}
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 50: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/home/AboutPreview.annotated.tsx b/docs/annotated/src/components/home/AboutPreview.annotated.tsx
new file mode 100644
index 0000000..fc65567
--- /dev/null
+++ b/docs/annotated/src/components/home/AboutPreview.annotated.tsx
@@ -0,0 +1,132 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/home/AboutPreview.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Import project module (@/ alias = src/ folder in tsconfig)
+import AppImage from '@/components/ui/AppImage';
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Lucide icons — lightweight SVG icon components
+import { ArrowRight } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Button from '@/components/ui/Button';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { IMAGES } from '@/lib/images';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function AboutPreview() {
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // Line 13: const stats = [
+  const stats = [
+    // Property or array item — trailing comma allowed in TypeScript
+    { value: t('aboutPreview.statHalal'), label: t('aboutPreview.statHalalLabel') },
+    // Property or array item — trailing comma allowed in TypeScript
+    { value: t('aboutPreview.statDays'), label: t('aboutPreview.statDaysLabel') },
+    // Property or array item — trailing comma allowed in TypeScript
+    { value: t('aboutPreview.statDelivery'), label: t('aboutPreview.statDeliveryLabel') },
+    // Property or array item — trailing comma allowed in TypeScript
+    { value: t('aboutPreview.statFresh'), label: t('aboutPreview.statFreshLabel') },
+  // End of array literal
+  ];
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <section className="bg-white py-20">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
+          // JSX element — HTML-like tag becomes React component in browser
+          <div>
+            // JSX element — HTML-like tag becomes React component in browser
+            <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
+              // Line 26: {t('aboutPreview.label')}
+              {t('aboutPreview.label')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </span>
+            // JSX element — HTML-like tag becomes React component in browser
+            <h2 className="section-heading mb-6">{t('aboutPreview.title')}</h2>
+            // JSX element — HTML-like tag becomes React component in browser
+            <p className="mb-4 leading-relaxed text-gray-600">{t('aboutPreview.p1')}</p>
+            // JSX element — HTML-like tag becomes React component in browser
+            <p className="mb-4 leading-relaxed text-gray-600">{t('aboutPreview.p2')}</p>
+            // JSX element — HTML-like tag becomes React component in browser
+            <p className="mb-8 leading-relaxed text-gray-600">{t('aboutPreview.p3')}</p>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="mb-8 grid grid-cols-2 gap-4 sm:grid-cols-4">
+              // Array.map — transform each item (often render a list of components)
+              {stats.map((stat) => (
+                // JSX element — HTML-like tag becomes React component in browser
+                <div
+                  // Line 36: key={stat.label}
+                  key={stat.label}
+                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                  className="rounded-xl border border-cream-300/80 bg-cream-50 p-4 text-center"
+                // Line 38: >
+                >
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <p className="font-display text-2xl font-bold text-brand-800">{stat.value}</p>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <p className="mt-1 text-xs font-medium text-gray-500">{stat.label}</p>
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+              // Line 42: ))}
+              ))}
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <Link href="/about">
+              // JSX element — HTML-like tag becomes React component in browser
+              <Button variant="secondary">
+                // Line 47: {t('aboutPreview.readMore')}
+                {t('aboutPreview.readMore')}
+                // JSX element — HTML-like tag becomes React component in browser
+                <ArrowRight className="h-4 w-4 rtl:rotate-180" />
+              // JSX element — HTML-like tag becomes React component in browser
+              </Button>
+            // JSX element — HTML-like tag becomes React component in browser
+            </Link>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="relative aspect-[4/5] overflow-hidden rounded-2xl shadow-premium-lg">
+            // JSX element — HTML-like tag becomes React component in browser
+            <AppImage
+              // Line 55: src={IMAGES.aboutMeat}
+              src={IMAGES.aboutMeat}
+              // Line 56: alt={t('aboutPreview.imageAlt')}
+              alt={t('aboutPreview.imageAlt')}
+              // Line 57: fill
+              fill
+              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+              className="object-cover"
+              // Line 59: sizes="(max-width: 1024px) 100vw, 640px"
+              sizes="(max-width: 1024px) 100vw, 640px"
+            // Line 60: />
+            />
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="absolute inset-0 bg-gradient-to-t from-brand-950/30 via-transparent to-transparent" />
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </section>
+  // Line 66: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/home/CTA.annotated.tsx b/docs/annotated/src/components/home/CTA.annotated.tsx
new file mode 100644
index 0000000..948d723
--- /dev/null
+++ b/docs/annotated/src/components/home/CTA.annotated.tsx
@@ -0,0 +1,95 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/home/CTA.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Button from '@/components/ui/Button';
+// Lucide icons — lightweight SVG icon components
+import { ArrowRight, MessageCircle } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { WHATSAPP_URL } from '@/lib/constants';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function CTA() {
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <section className="py-20">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-700 to-brand-900 px-8 py-16 text-center sm:px-16">
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="absolute -right-20 -top-20 h-60 w-60 rounded-full bg-gold-500/10" />
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="absolute -bottom-16 -left-16 h-48 w-48 rounded-full bg-gold-500/10" />
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="relative">
+            // JSX element — HTML-like tag becomes React component in browser
+            <h2 className="mb-4 font-display text-3xl font-bold text-white md:text-4xl">
+              // Line 21: {t('cta.title')}
+              {t('cta.title')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </h2>
+            // JSX element — HTML-like tag becomes React component in browser
+            <p className="mx-auto mb-8 max-w-xl text-brand-100">{t('cta.subtitle')}</p>
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
+              // JSX element — HTML-like tag becomes React component in browser
+              <Link href="/shop">
+                // JSX element — HTML-like tag becomes React component in browser
+                <Button variant="gold" size="lg">
+                  // Line 27: {t('cta.button')}
+                  {t('cta.button')}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <ArrowRight className="h-4 w-4 rtl:rotate-180" />
+                // JSX element — HTML-like tag becomes React component in browser
+                </Button>
+              // JSX element — HTML-like tag becomes React component in browser
+              </Link>
+              // JSX element — HTML-like tag becomes React component in browser
+              <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
+                // JSX element — HTML-like tag becomes React component in browser
+                <Button
+                  // Line 33: variant="secondary"
+                  variant="secondary"
+                  // Line 34: size="lg"
+                  size="lg"
+                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                  className="border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15"
+                // Line 36: >
+                >
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <MessageCircle className="h-4 w-4" />
+                  // Line 38: {t('cta.whatsapp')}
+                  {t('cta.whatsapp')}
+                // JSX element — HTML-like tag becomes React component in browser
+                </Button>
+              // JSX element — HTML-like tag becomes React component in browser
+              </a>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </section>
+  // Line 46: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/home/CategoryGrid.annotated.tsx b/docs/annotated/src/components/home/CategoryGrid.annotated.tsx
new file mode 100644
index 0000000..5c29451
--- /dev/null
+++ b/docs/annotated/src/components/home/CategoryGrid.annotated.tsx
@@ -0,0 +1,110 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/home/CategoryGrid.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Import project module (@/ alias = src/ folder in tsconfig)
+import AppImage from '@/components/ui/AppImage';
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Lucide icons — lightweight SVG icon components
+import { ArrowRight } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { CATEGORY_IDS, CATEGORY_IMAGES } from '@/lib/constants';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Default export — main component/page Next.js or other files import
+export default function CategoryGrid() {
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <section className="bg-cream-50 py-20">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mb-12 text-center">
+          // JSX element — HTML-like tag becomes React component in browser
+          <h2 className="section-heading mb-3">{t('categories.title')}</h2>
+          // JSX element — HTML-like tag becomes React component in browser
+          <p className="mx-auto max-w-2xl text-gray-500">{t('categories.subtitle')}</p>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          // Array.map — transform each item (often render a list of components)
+          {CATEGORY_IDS.map((id) => (
+            // JSX element — HTML-like tag becomes React component in browser
+            <Link
+              // Line 22: key={id}
+              key={id}
+              // Link target URL — internal route or external https://
+              href={`/shop?category=${id}`}
+              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+              className="group relative overflow-hidden rounded-2xl shadow-premium transition-all duration-300 hover:shadow-premium-lg"
+            // Line 25: >
+            >
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="relative aspect-[3/4]">
+                // JSX element — HTML-like tag becomes React component in browser
+                <AppImage
+                  // Line 28: src={CATEGORY_IMAGES[id]}
+                  src={CATEGORY_IMAGES[id]}
+                  // Line 29: alt={t(`categories.${id}.name`)}
+                  alt={t(`categories.${id}.name`)}
+                  // Line 30: fill
+                  fill
+                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                  className="object-cover transition-transform duration-500 group-hover:scale-110"
+                  // Line 32: sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw...
+                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 320px"
+                // Line 33: />
+                />
+                // JSX element — HTML-like tag becomes React component in browser
+                <div className="absolute inset-0 bg-gradient-to-t from-brand-950/92 via-brand-800/50 to-brand-700/10" />
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="absolute bottom-0 left-0 right-0 p-6">
+                // JSX element — HTML-like tag becomes React component in browser
+                <h3 className="mb-1 font-display text-2xl font-bold text-white">
+                  // Line 38: {t(`categories.${id}.name`)}
+                  {t(`categories.${id}.name`)}
+                // JSX element — HTML-like tag becomes React component in browser
+                </h3>
+                // JSX element — HTML-like tag becomes React component in browser
+                <p className="mb-3 text-sm text-brand-200">
+                  // Line 41: {t(`categories.${id}.description`)}
+                  {t(`categories.${id}.description`)}
+                // JSX element — HTML-like tag becomes React component in browser
+                </p>
+                // JSX element — HTML-like tag becomes React component in browser
+                <span className="inline-flex items-center gap-1 text-sm font-semibold text-gold-400 transition-colors group-hover:text-gold-300">
+                  // Line 44: {t('categories.shop', { name: t(`categories.${id}.name`) })}
+                  {t('categories.shop', { name: t(`categories.${id}.name`) })}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+                // JSX element — HTML-like tag becomes React component in browser
+                </span>
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+            // JSX element — HTML-like tag becomes React component in browser
+            </Link>
+          // Line 49: ))}
+          ))}
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </section>
+  // Line 53: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/home/ContactPreview.annotated.tsx b/docs/annotated/src/components/home/ContactPreview.annotated.tsx
new file mode 100644
index 0000000..5d42c0f
--- /dev/null
+++ b/docs/annotated/src/components/home/ContactPreview.annotated.tsx
@@ -0,0 +1,233 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/home/ContactPreview.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Lucide icons — lightweight SVG icon components
+import { Phone, MapPin, Clock, MessageCircle, ExternalLink } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Button from '@/components/ui/Button';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Logo from '@/components/ui/Logo';
+// Import external package or local module
+import {
+  // Property or array item — trailing comma allowed in TypeScript
+  SITE_ADDRESS,
+  // Property or array item — trailing comma allowed in TypeScript
+  SITE_PHONE_DISPLAY,
+  // Property or array item — trailing comma allowed in TypeScript
+  SITE_HOURS,
+  // Property or array item — trailing comma allowed in TypeScript
+  WHATSAPP_URL,
+  // Property or array item — trailing comma allowed in TypeScript
+  MAPS_URL,
+// Closing brace — end of block (function, if, object, JSX)
+} from '@/lib/constants';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function ContactPreview() {
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+  // Line 18: const telHref = `tel:+46725855050`;
+  const telHref = `tel:+46725855050`;
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <section className="bg-brand-950 py-20 text-white">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="grid gap-12 lg:grid-cols-2 lg:gap-16">
+          // JSX element — HTML-like tag becomes React component in browser
+          <div>
+            // JSX element — HTML-like tag becomes React component in browser
+            <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-400">
+              // Line 26: {t('contact.label')}
+              {t('contact.label')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </span>
+            // JSX element — HTML-like tag becomes React component in browser
+            <h2 className="mb-8 font-display text-3xl font-bold md:text-4xl">
+              // Line 29: {t('contact.title')}
+              {t('contact.title')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </h2>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <ul className="mb-8 space-y-5">
+              // JSX element — HTML-like tag becomes React component in browser
+              <li className="flex gap-4">
+                // JSX element — HTML-like tag becomes React component in browser
+                <MapPin className="mt-0.5 h-5 w-5 shrink-0 text-gold-400" />
+                // JSX element — HTML-like tag becomes React component in browser
+                <div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <p className="text-xs font-semibold uppercase tracking-wider text-gold-400">
+                    // Line 37: {t('contact.addressLabel')}
+                    {t('contact.addressLabel')}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </p>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <p className="text-brand-100">{SITE_ADDRESS}</p>
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+              // JSX element — HTML-like tag becomes React component in browser
+              </li>
+              // JSX element — HTML-like tag becomes React component in browser
+              <li className="flex gap-4">
+                // JSX element — HTML-like tag becomes React component in browser
+                <Phone className="mt-0.5 h-5 w-5 shrink-0 text-gold-400" />
+                // JSX element — HTML-like tag becomes React component in browser
+                <div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <p className="text-xs font-semibold uppercase tracking-wider text-gold-400">
+                    // Line 46: {t('contact.phoneLabel')}
+                    {t('contact.phoneLabel')}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </p>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <a href={telHref} className="text-brand-100 hover:text-white">
+                    // Line 49: {SITE_PHONE_DISPLAY}
+                    {SITE_PHONE_DISPLAY}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </a>
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+              // JSX element — HTML-like tag becomes React component in browser
+              </li>
+              // JSX element — HTML-like tag becomes React component in browser
+              <li className="flex gap-4">
+                // JSX element — HTML-like tag becomes React component in browser
+                <Clock className="mt-0.5 h-5 w-5 shrink-0 text-gold-400" />
+                // JSX element — HTML-like tag becomes React component in browser
+                <div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <p className="text-xs font-semibold uppercase tracking-wider text-gold-400">
+                    // Line 57: {t('contact.hoursLabel')}
+                    {t('contact.hoursLabel')}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </p>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <p className="text-brand-100">
+                    // Line 60: {t('contact.hoursValue', { hours: SITE_HOURS })}
+                    {t('contact.hoursValue', { hours: SITE_HOURS })}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </p>
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+              // JSX element — HTML-like tag becomes React component in browser
+              </li>
+            // JSX element — HTML-like tag becomes React component in browser
+            </ul>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="flex flex-col gap-3 sm:flex-row">
+              // JSX element — HTML-like tag becomes React component in browser
+              <Link href="/about#contact">
+                // JSX element — HTML-like tag becomes React component in browser
+                <Button
+                  // Line 69: variant="secondary"
+                  variant="secondary"
+                  // Line 70: size="lg"
+                  size="lg"
+                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                  className="w-full border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15 sm:w-auto"
+                // Line 72: >
+                >
+                  // Line 73: {t('contact.learnMore')}
+                  {t('contact.learnMore')}
+                // JSX element — HTML-like tag becomes React component in browser
+                </Button>
+              // JSX element — HTML-like tag becomes React component in browser
+              </Link>
+              // JSX element — HTML-like tag becomes React component in browser
+              <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
+                // JSX element — HTML-like tag becomes React component in browser
+                <Button variant="gold" size="lg" className="w-full sm:w-auto">
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <MessageCircle className="h-4 w-4" />
+                  // Line 79: {t('contact.writeUs')}
+                  {t('contact.writeUs')}
+                // JSX element — HTML-like tag becomes React component in browser
+                </Button>
+              // JSX element — HTML-like tag becomes React component in browser
+              </a>
+              // JSX element — HTML-like tag becomes React component in browser
+              <a href={telHref}>
+                // JSX element — HTML-like tag becomes React component in browser
+                <Button
+                  // Line 84: variant="secondary"
+                  variant="secondary"
+                  // Line 85: size="lg"
+                  size="lg"
+                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                  className="w-full border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15 sm:w-auto"
+                // Line 87: >
+                >
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <Phone className="h-4 w-4" />
+                  // Line 89: {t('contact.callUs')}
+                  {t('contact.callUs')}
+                // JSX element — HTML-like tag becomes React component in browser
+                </Button>
+              // JSX element — HTML-like tag becomes React component in browser
+              </a>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="flex flex-col justify-center">
+            // JSX element — HTML-like tag becomes React component in browser
+            <a
+              // Link target URL — internal route or external https://
+              href={MAPS_URL}
+              // Line 98: target="_blank"
+              target="_blank"
+              // Line 99: rel="noopener noreferrer"
+              rel="noopener noreferrer"
+              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+              className="card-premium group flex flex-col items-center gap-4 bg-brand-900/50 p-8 text-center transition-all hover:bg-brand-900/70"
+            // Line 101: >
+            >
+              // JSX element — HTML-like tag becomes React component in browser
+              <Logo size="lg" className="ring-gold-400/30" />
+              // JSX element — HTML-like tag becomes React component in browser
+              <div>
+                // JSX element — HTML-like tag becomes React component in browser
+                <p className="font-display text-xl font-bold">{t('site.name')}</p>
+                // JSX element — HTML-like tag becomes React component in browser
+                <p className="mt-1 text-sm text-brand-200">{SITE_ADDRESS}</p>
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+              // JSX element — HTML-like tag becomes React component in browser
+              <span className="inline-flex items-center gap-2 text-sm font-semibold text-gold-400 transition-colors group-hover:text-gold-300">
+                // Line 108: {t('contact.openMaps')}
+                {t('contact.openMaps')}
+                // JSX element — HTML-like tag becomes React component in browser
+                <ExternalLink className="h-4 w-4" />
+              // JSX element — HTML-like tag becomes React component in browser
+              </span>
+            // JSX element — HTML-like tag becomes React component in browser
+            </a>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </section>
+  // Line 116: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/home/FeaturedProducts.annotated.tsx b/docs/annotated/src/components/home/FeaturedProducts.annotated.tsx
new file mode 100644
index 0000000..95511c9
--- /dev/null
+++ b/docs/annotated/src/components/home/FeaturedProducts.annotated.tsx
@@ -0,0 +1,89 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/home/FeaturedProducts.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import ProductCard from '@/components/product/ProductCard';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { getFeaturedProducts } from '@/lib/products';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Button from '@/components/ui/Button';
+// Lucide icons — lightweight SVG icon components
+import { ArrowRight } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { localizeProduct } from '@/lib/product-i18n';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function FeaturedProducts() {
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+  // Line 13: const featured = getFeaturedProducts()
+  const featured = getFeaturedProducts()
+    // Line 14: .slice(0, 4)
+    .slice(0, 4)
+    // Array.map — transform each item (often render a list of components)
+    .map((p) => localizeProduct(p, t));
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <section className="py-20">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mb-12 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end">
+          // JSX element — HTML-like tag becomes React component in browser
+          <div>
+            // JSX element — HTML-like tag becomes React component in browser
+            <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
+              // Line 23: {t('featured.label')}
+              {t('featured.label')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </span>
+            // JSX element — HTML-like tag becomes React component in browser
+            <h2 className="section-heading">{t('featured.title')}</h2>
+            // JSX element — HTML-like tag becomes React component in browser
+            <p className="mt-2 max-w-lg text-gray-500">{t('featured.subtitle')}</p>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+          // JSX element — HTML-like tag becomes React component in browser
+          <Link href="/shop">
+            // JSX element — HTML-like tag becomes React component in browser
+            <Button variant="secondary">
+              // Line 30: {t('featured.viewAll')}
+              {t('featured.viewAll')}
+              // JSX element — HTML-like tag becomes React component in browser
+              <ArrowRight className="h-4 w-4 rtl:rotate-180" />
+            // JSX element — HTML-like tag becomes React component in browser
+            </Button>
+          // JSX element — HTML-like tag becomes React component in browser
+          </Link>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          // Array.map — transform each item (often render a list of components)
+          {featured.map((product) => (
+            // JSX element — HTML-like tag becomes React component in browser
+            <ProductCard key={product.id} product={product} />
+          // Line 39: ))}
+          ))}
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </section>
+  // Line 43: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/home/Hero.annotated.tsx b/docs/annotated/src/components/home/Hero.annotated.tsx
new file mode 100644
index 0000000..a04fb9a
--- /dev/null
+++ b/docs/annotated/src/components/home/Hero.annotated.tsx
@@ -0,0 +1,184 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/home/Hero.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import AppImage from '@/components/ui/AppImage';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Button from '@/components/ui/Button';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Logo from '@/components/ui/Logo';
+// Lucide icons — lightweight SVG icon components
+import { ArrowRight, ShieldCheck, MapPin, Clock } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { IMAGES } from '@/lib/images';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { SITE_LOCATION, SITE_HOURS, SITE_ADDRESS, WHATSAPP_URL } from '@/lib/constants';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function Hero() {
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <section className="relative min-h-[85vh] overflow-hidden bg-brand-950">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="absolute inset-0">
+        // JSX element — HTML-like tag becomes React component in browser
+        <AppImage
+          // Line 19: src={IMAGES.hero}
+          src={IMAGES.hero}
+          // Line 20: alt=""
+          alt=""
+          // Line 21: fill
+          fill
+          // Tailwind CSS utility classes — styling (colors, spacing, layout)
+          className="object-cover"
+          // Line 23: priority
+          priority
+          // Line 24: sizes="100vw"
+          sizes="100vw"
+          // Line 25: placeholder="blur"
+          placeholder="blur"
+          // Line 26: blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAA...
+          blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUH/8QAIhAAAgEDBQAAAAAAAAAAAAAAAQIDAAQRBQYhIjFB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAZEQACAwEAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEEA/ALextba0t0t7eJI4kHVEU4AqT/9k="
+        // Line 27: />
+        />
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="absolute inset-0 bg-gradient-to-r from-brand-950/95 via-brand-900/85 to-brand-900/40" />
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="absolute inset-0 bg-gradient-to-t from-brand-950/60 via-transparent to-transparent" />
+// (blank line — separates logical blocks for readability)
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="relative mx-auto flex min-h-[85vh] max-w-7xl flex-col justify-center px-4 py-20 sm:px-6 lg:px-8 lg:py-28">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="max-w-2xl animate-slide-up">
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="mb-8 flex items-center gap-4">
+            // JSX element — HTML-like tag becomes React component in browser
+            <Logo size="lg" className="ring-gold-400/40 shadow-premium-lg" />
+            // JSX element — HTML-like tag becomes React component in browser
+            <div>
+              // JSX element — HTML-like tag becomes React component in browser
+              <p className="text-sm font-medium text-gold-400">{SITE_LOCATION}</p>
+              // JSX element — HTML-like tag becomes React component in browser
+              <p className="text-xs text-brand-200">{t('hero.taglineShort')}</p>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-gold-500/30 bg-brand-800/50 px-4 py-1.5 backdrop-blur-sm">
+            // JSX element — HTML-like tag becomes React component in browser
+            <ShieldCheck className="h-4 w-4 text-gold-400" />
+            // JSX element — HTML-like tag becomes React component in browser
+            <span className="text-xs font-semibold uppercase tracking-wider text-gold-300">
+              // Line 45: {t('hero.badge')}
+              {t('hero.badge')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </span>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <h1 className="mb-4 font-display text-4xl font-bold leading-tight text-white sm:text-5xl lg:text-6xl">
+            // Line 50: {t('hero.title')}
+            {t('hero.title')}
+          // JSX element — HTML-like tag becomes React component in browser
+          </h1>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <p className="mb-2 text-xl font-medium text-gold-300 sm:text-2xl">
+            // Line 54: {t('hero.subtitleShort')}
+            {t('hero.subtitleShort')}
+          // JSX element — HTML-like tag becomes React component in browser
+          </p>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <p className="mb-8 text-base leading-relaxed text-brand-100 sm:text-lg">
+            // Line 58: {t('hero.subtitle')}
+            {t('hero.subtitle')}
+          // JSX element — HTML-like tag becomes React component in browser
+          </p>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="mb-8 flex flex-wrap gap-4 text-sm text-brand-200">
+            // JSX element — HTML-like tag becomes React component in browser
+            <span className="flex items-center gap-1.5">
+              // JSX element — HTML-like tag becomes React component in browser
+              <Clock className="h-4 w-4 text-gold-400" />
+              // Line 64: {t('hero.hours', { hours: SITE_HOURS })}
+              {t('hero.hours', { hours: SITE_HOURS })}
+            // JSX element — HTML-like tag becomes React component in browser
+            </span>
+            // JSX element — HTML-like tag becomes React component in browser
+            <span className="flex items-center gap-1.5">
+              // JSX element — HTML-like tag becomes React component in browser
+              <MapPin className="h-4 w-4 text-gold-400" />
+              // Line 68: {SITE_ADDRESS}
+              {SITE_ADDRESS}
+            // JSX element — HTML-like tag becomes React component in browser
+            </span>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="flex flex-col gap-4 sm:flex-row">
+            // JSX element — HTML-like tag becomes React component in browser
+            <Link href="/shop">
+              // JSX element — HTML-like tag becomes React component in browser
+              <Button variant="gold" size="lg">
+                // Line 75: {t('hero.shopNow')}
+                {t('hero.shopNow')}
+                // JSX element — HTML-like tag becomes React component in browser
+                <ArrowRight className="h-4 w-4 rtl:rotate-180" />
+              // JSX element — HTML-like tag becomes React component in browser
+              </Button>
+            // JSX element — HTML-like tag becomes React component in browser
+            </Link>
+            // JSX element — HTML-like tag becomes React component in browser
+            <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
+              // JSX element — HTML-like tag becomes React component in browser
+              <Button
+                // Line 81: variant="secondary"
+                variant="secondary"
+                // Line 82: size="lg"
+                size="lg"
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className="border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15"
+              // Line 84: >
+              >
+                // Line 85: {t('hero.whatsapp')}
+                {t('hero.whatsapp')}
+              // JSX element — HTML-like tag becomes React component in browser
+              </Button>
+            // JSX element — HTML-like tag becomes React component in browser
+            </a>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+// (blank line — separates logical blocks for readability)
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-cream-50 to-transparent" />
+    // JSX element — HTML-like tag becomes React component in browser
+    </section>
+  // Line 94: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/home/HowItWorks.annotated.tsx b/docs/annotated/src/components/home/HowItWorks.annotated.tsx
new file mode 100644
index 0000000..871ba0c
--- /dev/null
+++ b/docs/annotated/src/components/home/HowItWorks.annotated.tsx
@@ -0,0 +1,139 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/home/HowItWorks.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Lucide icons — lightweight SVG icon components
+import { MessageCircle, ClipboardCheck, Store } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Button from '@/components/ui/Button';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { WHATSAPP_URL } from '@/lib/constants';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function HowItWorks() {
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // Line 11: const steps = [
+  const steps = [
+    // Line 12: {
+    {
+      // Property or array item — trailing comma allowed in TypeScript
+      icon: MessageCircle,
+      // Property or array item — trailing comma allowed in TypeScript
+      step: '01',
+      // Property or array item — trailing comma allowed in TypeScript
+      title: t('howItWorks.step1Title'),
+      // Property or array item — trailing comma allowed in TypeScript
+      description: t('howItWorks.step1Desc'),
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 18: {
+    {
+      // Property or array item — trailing comma allowed in TypeScript
+      icon: ClipboardCheck,
+      // Property or array item — trailing comma allowed in TypeScript
+      step: '02',
+      // Property or array item — trailing comma allowed in TypeScript
+      title: t('howItWorks.step2Title'),
+      // Property or array item — trailing comma allowed in TypeScript
+      description: t('howItWorks.step2Desc'),
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 24: {
+    {
+      // Property or array item — trailing comma allowed in TypeScript
+      icon: Store,
+      // Property or array item — trailing comma allowed in TypeScript
+      step: '03',
+      // Property or array item — trailing comma allowed in TypeScript
+      title: t('howItWorks.step3Title'),
+      // Property or array item — trailing comma allowed in TypeScript
+      description: t('howItWorks.step3Desc'),
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+  // End of array literal
+  ];
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <section className="bg-brand-950 py-20 text-white">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mb-12 text-center">
+          // JSX element — HTML-like tag becomes React component in browser
+          <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-400">
+            // Line 37: {t('howItWorks.label')}
+            {t('howItWorks.label')}
+          // JSX element — HTML-like tag becomes React component in browser
+          </span>
+          // JSX element — HTML-like tag becomes React component in browser
+          <h2 className="font-display text-3xl font-bold md:text-4xl">
+            // Line 40: {t('howItWorks.title')}
+            {t('howItWorks.title')}
+          // JSX element — HTML-like tag becomes React component in browser
+          </h2>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mb-12 grid gap-8 md:grid-cols-3">
+          // Array.map — transform each item (often render a list of components)
+          {steps.map((step) => (
+            // JSX element — HTML-like tag becomes React component in browser
+            <div key={step.step} className="relative text-center">
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-brand-800">
+                // JSX element — HTML-like tag becomes React component in browser
+                <step.icon className="h-7 w-7 text-gold-400" />
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+              // JSX element — HTML-like tag becomes React component in browser
+              <span className="mb-2 inline-block text-xs font-bold uppercase tracking-widest text-gold-500">
+                // Line 51: {t('howItWorks.step', { n: step.step })}
+                {t('howItWorks.step', { n: step.step })}
+              // JSX element — HTML-like tag becomes React component in browser
+              </span>
+              // JSX element — HTML-like tag becomes React component in browser
+              <h3 className="mb-2 font-display text-xl font-bold">{step.title}</h3>
+              // JSX element — HTML-like tag becomes React component in browser
+              <p className="text-sm leading-relaxed text-brand-200">{step.description}</p>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+          // Line 56: ))}
+          ))}
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="text-center">
+          // JSX element — HTML-like tag becomes React component in browser
+          <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
+            // JSX element — HTML-like tag becomes React component in browser
+            <Button variant="gold" size="lg">
+              // JSX element — HTML-like tag becomes React component in browser
+              <MessageCircle className="h-4 w-4" />
+              // Line 63: {t('howItWorks.whatsapp')}
+              {t('howItWorks.whatsapp')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </Button>
+          // JSX element — HTML-like tag becomes React component in browser
+          </a>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </section>
+  // Line 69: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/home/SocialFollow.annotated.tsx b/docs/annotated/src/components/home/SocialFollow.annotated.tsx
new file mode 100644
index 0000000..d5fff53
--- /dev/null
+++ b/docs/annotated/src/components/home/SocialFollow.annotated.tsx
@@ -0,0 +1,132 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/home/SocialFollow.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Lucide icons — lightweight SVG icon components
+import { Facebook, Instagram, MessageCircle } from 'lucide-react';
+// Import external package or local module
+import {
+  // Property or array item — trailing comma allowed in TypeScript
+  FACEBOOK_URL,
+  // Property or array item — trailing comma allowed in TypeScript
+  INSTAGRAM_URL,
+  // Property or array item — trailing comma allowed in TypeScript
+  WHATSAPP_URL,
+// Closing brace — end of block (function, if, object, JSX)
+} from '@/lib/constants';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// (blank line — separates logical blocks for readability)
+// Line 11: const socialLinks = [
+const socialLinks = [
+  // Line 12: {
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    key: 'facebook',
+    // Property or array item — trailing comma allowed in TypeScript
+    href: FACEBOOK_URL,
+    // Property or array item — trailing comma allowed in TypeScript
+    icon: Facebook,
+    // Line 16: className:
+    className:
+      // Property or array item — trailing comma allowed in TypeScript
+      'border-blue-600/20 bg-blue-600/10 text-blue-700 hover:border-blue-600/40 hover:bg-blue-600/15',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 19: {
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    key: 'instagram',
+    // Property or array item — trailing comma allowed in TypeScript
+    href: INSTAGRAM_URL,
+    // Property or array item — trailing comma allowed in TypeScript
+    icon: Instagram,
+    // Line 23: className:
+    className:
+      // Property or array item — trailing comma allowed in TypeScript
+      'border-pink-600/20 bg-pink-600/10 text-pink-700 hover:border-pink-600/40 hover:bg-pink-600/15',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 26: {
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    key: 'whatsapp',
+    // Property or array item — trailing comma allowed in TypeScript
+    href: WHATSAPP_URL,
+    // Property or array item — trailing comma allowed in TypeScript
+    icon: MessageCircle,
+    // Line 30: className:
+    className:
+      // Property or array item — trailing comma allowed in TypeScript
+      'border-green-600/20 bg-green-600/10 text-green-700 hover:border-green-600/40 hover:bg-green-600/15',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+// End of array literal
+] as const;
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function SocialFollow() {
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <section className="py-20">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="rounded-3xl border border-cream-300/80 bg-white px-8 py-12 text-center shadow-premium sm:px-16">
+          // JSX element — HTML-like tag becomes React component in browser
+          <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
+            // Line 43: {t('social.label')}
+            {t('social.label')}
+          // JSX element — HTML-like tag becomes React component in browser
+          </span>
+          // JSX element — HTML-like tag becomes React component in browser
+          <h2 className="section-heading mb-3">{t('social.title')}</h2>
+          // JSX element — HTML-like tag becomes React component in browser
+          <p className="mx-auto mb-8 max-w-xl text-gray-500">{t('social.subtitle')}</p>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
+            // Array.map — transform each item (often render a list of components)
+            {socialLinks.map(({ key, href, icon: Icon, className }) => (
+              // JSX element — HTML-like tag becomes React component in browser
+              <a
+                // Line 51: key={key}
+                key={key}
+                // Link target URL — internal route or external https://
+                href={href}
+                // Line 53: target="_blank"
+                target="_blank"
+                // Line 54: rel="noopener noreferrer"
+                rel="noopener noreferrer"
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className={`inline-flex items-center gap-2 rounded-xl border-2 px-6 py-3 text-sm font-semibold transition-all ${className}`}
+              // Line 56: >
+              >
+                // JSX element — HTML-like tag becomes React component in browser
+                <Icon className="h-5 w-5" />
+                // Line 58: {t(`social.${key}`)}
+                {t(`social.${key}`)}
+              // JSX element — HTML-like tag becomes React component in browser
+              </a>
+            // Line 60: ))}
+            ))}
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </section>
+  // Line 65: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/home/TrustBadges.annotated.tsx b/docs/annotated/src/components/home/TrustBadges.annotated.tsx
new file mode 100644
index 0000000..d118659
--- /dev/null
+++ b/docs/annotated/src/components/home/TrustBadges.annotated.tsx
@@ -0,0 +1,109 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/home/TrustBadges.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Lucide icons — lightweight SVG icon components
+import { ShieldCheck, Leaf, Award } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function TrustBadges() {
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // Line 10: const badges = [
+  const badges = [
+    // Line 11: {
+    {
+      // Property or array item — trailing comma allowed in TypeScript
+      icon: ShieldCheck,
+      // Property or array item — trailing comma allowed in TypeScript
+      title: t('trust.halal'),
+      // Property or array item — trailing comma allowed in TypeScript
+      description: t('trust.halalDesc'),
+      // Property or array item — trailing comma allowed in TypeScript
+      href: '/about#halal',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 17: {
+    {
+      // Property or array item — trailing comma allowed in TypeScript
+      icon: Leaf,
+      // Property or array item — trailing comma allowed in TypeScript
+      title: t('trust.fresh'),
+      // Property or array item — trailing comma allowed in TypeScript
+      description: t('trust.freshDesc'),
+      // Property or array item — trailing comma allowed in TypeScript
+      href: '/about#delivery',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 23: {
+    {
+      // Property or array item — trailing comma allowed in TypeScript
+      icon: Award,
+      // Property or array item — trailing comma allowed in TypeScript
+      title: t('trust.premium'),
+      // Property or array item — trailing comma allowed in TypeScript
+      description: t('trust.premiumDesc'),
+      // Property or array item — trailing comma allowed in TypeScript
+      href: '/about',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+  // End of array literal
+  ];
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <section className="bg-cream-100 py-16">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="grid gap-8 md:grid-cols-3">
+          // Array.map — transform each item (often render a list of components)
+          {badges.map((badge) => (
+            // JSX element — HTML-like tag becomes React component in browser
+            <Link
+              // Line 37: key={badge.title}
+              key={badge.title}
+              // Link target URL — internal route or external https://
+              href={badge.href}
+              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+              className="group rounded-2xl border border-cream-300/80 bg-white p-8 text-center shadow-premium transition-all duration-300 hover:border-brand-200 hover:shadow-premium-lg"
+            // Line 40: >
+            >
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand-50 transition-colors group-hover:bg-gold-50">
+                // JSX element — HTML-like tag becomes React component in browser
+                <badge.icon className="h-7 w-7 text-brand-700 transition-colors group-hover:text-gold-600" />
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+              // JSX element — HTML-like tag becomes React component in browser
+              <h3 className="mb-2 font-display text-xl font-bold text-brand-900">
+                // Line 45: {badge.title}
+                {badge.title}
+              // JSX element — HTML-like tag becomes React component in browser
+              </h3>
+              // JSX element — HTML-like tag becomes React component in browser
+              <p className="text-sm leading-relaxed text-gray-500">{badge.description}</p>
+            // JSX element — HTML-like tag becomes React component in browser
+            </Link>
+          // Line 49: ))}
+          ))}
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </section>
+  // Line 53: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/home/WeeklyOffers.annotated.tsx b/docs/annotated/src/components/home/WeeklyOffers.annotated.tsx
new file mode 100644
index 0000000..cb7fb78
--- /dev/null
+++ b/docs/annotated/src/components/home/WeeklyOffers.annotated.tsx
@@ -0,0 +1,255 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/home/WeeklyOffers.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import AppImage from '@/components/ui/AppImage';
+// Lucide icons — lightweight SVG icon components
+import { MessageCircle, ArrowRight } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { weeklyOffers } from '@/lib/offers';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { IMAGES } from '@/lib/images';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { whatsappOrderUrl } from '@/lib/constants';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { formatPrice, getFormatLocale } from '@/lib/utils';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function WeeklyOffers() {
+  // Custom hook — returns t() translator and current locale
+  const { t, locale } = useTranslation();
+  // Line 14: const fmt = (n: number) => formatPrice(n, getFormatLocale...
+  const fmt = (n: number) => formatPrice(n, getFormatLocale(locale));
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <section className="bg-cream-100 py-20">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
+          // JSX element — HTML-like tag becomes React component in browser
+          <div>
+            // JSX element — HTML-like tag becomes React component in browser
+            <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
+              // Line 22: {t('offers.label')}
+              {t('offers.label')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </span>
+            // JSX element — HTML-like tag becomes React component in browser
+            <h2 className="section-heading mb-3">{t('offers.title')}</h2>
+            // JSX element — HTML-like tag becomes React component in browser
+            <p className="mb-8 text-gray-500">{t('offers.subtitle')}</p>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="space-y-4">
+              // Array.map — transform each item (often render a list of components)
+              {weeklyOffers.map((offer) => (
+                // JSX element — HTML-like tag becomes React component in browser
+                <div
+                  // Line 30: key={offer.id}
+                  key={offer.id}
+                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                  className="group flex gap-4 rounded-2xl border border-cream-300/80 bg-white p-4 shadow-premium transition-all duration-300 hover:border-brand-200 hover:shadow-premium-lg sm:p-5"
+                // Line 32: >
+                >
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <Link
+                    // Link target URL — internal route or external https://
+                    href={`/product/${offer.productSlug}`}
+                    // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                    className="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl sm:h-24 sm:w-24"
+                  // Line 36: >
+                  >
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <AppImage
+                      // Line 38: src={offer.image}
+                      src={offer.image}
+                      // Line 39: alt={t(`${offer.nameKey}.name`)}
+                      alt={t(`${offer.nameKey}.name`)}
+                      // Line 40: fill
+                      fill
+                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                      className="object-cover transition-transform duration-500 group-hover:scale-105"
+                      // Line 42: sizes="(max-width: 640px) 96px, 128px"
+                      sizes="(max-width: 640px) 96px, 128px"
+                    // Line 43: />
+                    />
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </Link>
+// (blank line — separates logical blocks for readability)
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <div className="min-w-0 flex-1">
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <div className="mb-1 flex flex-wrap items-center gap-2">
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <span
+                        // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                        className={
+                          // Line 50: offer.badgeKey === 'halal'
+                          offer.badgeKey === 'halal'
+                            // Line 51: ? 'rounded-full bg-brand-700 px-2.5 py-0.5 text-[10px] fo...
+                            ? 'rounded-full bg-brand-700 px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white'
+                            // Line 52: : 'rounded-full bg-gold-500 px-2.5 py-0.5 text-[10px] fon...
+                            : 'rounded-full bg-gold-500 px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white'
+                        // Closing brace — end of block (function, if, object, JSX)
+                        }
+                      // Line 54: >
+                      >
+                        // Line 55: {t(`offers.badge.${offer.badgeKey}`)}
+                        {t(`offers.badge.${offer.badgeKey}`)}
+                      // JSX element — HTML-like tag becomes React component in browser
+                      </span>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    </div>
+// (blank line — separates logical blocks for readability)
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <Link href={`/product/${offer.productSlug}`}>
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <h3 className="mb-2 font-display text-lg font-bold text-brand-900 transition-colors hover:text-brand-700">
+                        // Line 61: {t(`${offer.nameKey}.name`)}
+                        {t(`${offer.nameKey}.name`)}
+                      // JSX element — HTML-like tag becomes React component in browser
+                      </h3>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    </Link>
+// (blank line — separates logical blocks for readability)
+                    // JSX element — HTML-like tag becomes React component in browser
+                    <div className="flex flex-wrap items-end justify-between gap-3">
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <div>
+                        // Line 67: {offer.originalPrice != null && (
+                        {offer.originalPrice != null && (
+                          // JSX element — HTML-like tag becomes React component in browser
+                          <p className="text-sm text-gray-400 line-through">
+                            // Line 69: {t('offers.was')}: {fmt(offer.originalPrice)}/
+                            {t('offers.was')}: {fmt(offer.originalPrice)}/
+                            // Line 70: {t(`priceUnit.${offer.priceUnitKey}`)}
+                            {t(`priceUnit.${offer.priceUnitKey}`)}
+                          // JSX element — HTML-like tag becomes React component in browser
+                          </p>
+                        // Line 72: )}
+                        )}
+                        // JSX element — HTML-like tag becomes React component in browser
+                        <p className="font-display text-xl font-bold text-brand-800">
+                          // Line 74: {offer.originalPrice != null && (
+                          {offer.originalPrice != null && (
+                            // JSX element — HTML-like tag becomes React component in browser
+                            <span className="me-2 text-sm font-semibold uppercase text-gold-600">
+                              // Line 76: {t('offers.now')}
+                              {t('offers.now')}
+                            // JSX element — HTML-like tag becomes React component in browser
+                            </span>
+                          // Line 78: )}
+                          )}
+                          // Line 79: {fmt(offer.price)}
+                          {fmt(offer.price)}
+                          // JSX element — HTML-like tag becomes React component in browser
+                          <span className="text-sm font-normal text-gray-500">
+                            // Line 81: /{t(`priceUnit.${offer.priceUnitKey}`)}
+                            /{t(`priceUnit.${offer.priceUnitKey}`)}
+                          // JSX element — HTML-like tag becomes React component in browser
+                          </span>
+                        // JSX element — HTML-like tag becomes React component in browser
+                        </p>
+                      // JSX element — HTML-like tag becomes React component in browser
+                      </div>
+// (blank line — separates logical blocks for readability)
+                      // JSX element — HTML-like tag becomes React component in browser
+                      <div className="flex flex-wrap gap-2">
+                        // JSX element — HTML-like tag becomes React component in browser
+                        <Link
+                          // Link target URL — internal route or external https://
+                          href={`/product/${offer.productSlug}`}
+                          // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                          className="inline-flex items-center gap-1 rounded-lg border border-brand-200 px-3 py-2 text-xs font-semibold text-brand-700 transition-colors hover:bg-brand-50"
+                        // Line 90: >
+                        >
+                          // Line 91: {t('offers.viewProduct')}
+                          {t('offers.viewProduct')}
+                          // JSX element — HTML-like tag becomes React component in browser
+                          <ArrowRight className="h-3 w-3 rtl:rotate-180" />
+                        // JSX element — HTML-like tag becomes React component in browser
+                        </Link>
+                        // JSX element — HTML-like tag becomes React component in browser
+                        <a
+                          // Link target URL — internal route or external https://
+                          href={whatsappOrderUrl(offer.whatsappProduct)}
+                          // Line 96: target="_blank"
+                          target="_blank"
+                          // Line 97: rel="noopener noreferrer"
+                          rel="noopener noreferrer"
+                          // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                          className="inline-flex items-center gap-1.5 rounded-lg bg-brand-700 px-4 py-2 text-xs font-semibold text-white transition-colors hover:bg-brand-800"
+                        // Line 99: >
+                        >
+                          // JSX element — HTML-like tag becomes React component in browser
+                          <MessageCircle className="h-3.5 w-3.5" />
+                          // Line 101: {t('offers.order')}
+                          {t('offers.order')}
+                        // JSX element — HTML-like tag becomes React component in browser
+                        </a>
+                      // JSX element — HTML-like tag becomes React component in browser
+                      </div>
+                    // JSX element — HTML-like tag becomes React component in browser
+                    </div>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </div>
+                // JSX element — HTML-like tag becomes React component in browser
+                </div>
+              // Line 107: ))}
+              ))}
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <p className="mt-6 text-xs text-gray-400">{t('offers.disclaimer')}</p>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <Link
+            // Link target URL — internal route or external https://
+            href="/shop"
+            // Tailwind CSS utility classes — styling (colors, spacing, layout)
+            className="relative hidden aspect-[4/5] overflow-hidden rounded-2xl shadow-premium-lg lg:block"
+          // Line 116: >
+          >
+            // JSX element — HTML-like tag becomes React component in browser
+            <AppImage
+              // Line 118: src={IMAGES.hero}
+              src={IMAGES.hero}
+              // Line 119: alt=""
+              alt=""
+              // Line 120: fill
+              fill
+              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+              className="object-cover transition-transform duration-500 hover:scale-105"
+              // Line 122: sizes="(max-width: 1024px) 0px, 640px"
+              sizes="(max-width: 1024px) 0px, 640px"
+            // Line 123: />
+            />
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="absolute inset-0 bg-gradient-to-t from-brand-950/50 via-transparent to-transparent" />
+          // JSX element — HTML-like tag becomes React component in browser
+          </Link>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </section>
+  // Line 129: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/layout/Footer.annotated.tsx b/docs/annotated/src/components/layout/Footer.annotated.tsx
new file mode 100644
index 0000000..e7d745f
--- /dev/null
+++ b/docs/annotated/src/components/layout/Footer.annotated.tsx
@@ -0,0 +1,355 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/layout/Footer.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Lucide icons — lightweight SVG icon components
+import { ShieldCheck, Leaf, Award, Phone, Mail, MapPin, Facebook, Instagram, MessageCircle } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Logo from '@/components/ui/Logo';
+// Import external package or local module
+import {
+  // Property or array item — trailing comma allowed in TypeScript
+  SITE_PHONE_DISPLAY,
+  // Property or array item — trailing comma allowed in TypeScript
+  SITE_ADDRESS,
+  // Property or array item — trailing comma allowed in TypeScript
+  SITE_HOURS,
+  // Property or array item — trailing comma allowed in TypeScript
+  SITE_EMAIL,
+  // Property or array item — trailing comma allowed in TypeScript
+  FACEBOOK_URL,
+  // Property or array item — trailing comma allowed in TypeScript
+  INSTAGRAM_URL,
+  // Property or array item — trailing comma allowed in TypeScript
+  WHATSAPP_URL,
+// Closing brace — end of block (function, if, object, JSX)
+} from '@/lib/constants';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function Footer() {
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // Line 20: const footerLinks = {
+  const footerLinks = {
+    // Line 21: shop: [
+    shop: [
+      // Property or array item — trailing comma allowed in TypeScript
+      { label: t('nav.chicken'), href: '/shop?category=chicken' },
+      // Property or array item — trailing comma allowed in TypeScript
+      { label: t('nav.beef'), href: '/shop?category=beef' },
+      // Property or array item — trailing comma allowed in TypeScript
+      { label: t('nav.lamb'), href: '/shop?category=lamb' },
+      // Property or array item — trailing comma allowed in TypeScript
+      { label: t('nav.fish'), href: '/shop?category=fish' },
+    // End of array literal
+    ],
+    // Line 27: company: [
+    company: [
+      // Property or array item — trailing comma allowed in TypeScript
+      { label: t('nav.about'), href: '/about' },
+      // Property or array item — trailing comma allowed in TypeScript
+      { label: t('nav.halalCert'), href: '/about#halal' },
+      // Property or array item — trailing comma allowed in TypeScript
+      { label: t('nav.delivery'), href: '/about#delivery' },
+      // Property or array item — trailing comma allowed in TypeScript
+      { label: t('nav.contact'), href: '/about#contact' },
+    // End of array literal
+    ],
+    // Line 33: account: [
+    account: [
+      // Property or array item — trailing comma allowed in TypeScript
+      { label: t('nav.myAccount'), href: '/account' },
+      // Property or array item — trailing comma allowed in TypeScript
+      { label: t('nav.orderHistory'), href: '/account#orders' },
+      // Property or array item — trailing comma allowed in TypeScript
+      { label: t('nav.wishlist'), href: '/wishlist' },
+      // Property or array item — trailing comma allowed in TypeScript
+      { label: t('nav.cart'), href: '/cart' },
+    // End of array literal
+    ],
+  // Closing brace — end of block (function, if, object, JSX)
+  };
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <footer className="border-t border-gray-100 bg-brand-950 text-white">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="grid gap-12 md:grid-cols-2 lg:grid-cols-4">
+          // JSX element — HTML-like tag becomes React component in browser
+          <div>
+            // JSX element — HTML-like tag becomes React component in browser
+            <Link href="/" className="mb-4 flex items-center gap-3">
+              // JSX element — HTML-like tag becomes React component in browser
+              <Logo size="sm" className="ring-brand-700" />
+              // JSX element — HTML-like tag becomes React component in browser
+              <span className="font-display text-xl font-bold">{t('site.name')}</span>
+            // JSX element — HTML-like tag becomes React component in browser
+            </Link>
+            // JSX element — HTML-like tag becomes React component in browser
+            <p className="mb-6 text-sm leading-relaxed text-brand-200">
+              // Line 51: {t('footer.tagline')}
+              {t('footer.tagline')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </p>
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="mb-6 flex flex-wrap gap-4">
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="flex items-center gap-1.5 text-xs text-gold-400">
+                // JSX element — HTML-like tag becomes React component in browser
+                <ShieldCheck className="h-4 w-4" />
+                // Line 56: {t('trust.halal')}
+                {t('trust.halal')}
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="flex items-center gap-1.5 text-xs text-gold-400">
+                // JSX element — HTML-like tag becomes React component in browser
+                <Leaf className="h-4 w-4" />
+                // Line 60: {t('trust.fresh')}
+                {t('trust.fresh')}
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+              // JSX element — HTML-like tag becomes React component in browser
+              <div className="flex items-center gap-1.5 text-xs text-gold-400">
+                // JSX element — HTML-like tag becomes React component in browser
+                <Award className="h-4 w-4" />
+                // Line 64: {t('trust.premium')}
+                {t('trust.premium')}
+              // JSX element — HTML-like tag becomes React component in browser
+              </div>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="flex gap-3">
+              // JSX element — HTML-like tag becomes React component in browser
+              <a
+                // Link target URL — internal route or external https://
+                href={FACEBOOK_URL}
+                // Line 70: target="_blank"
+                target="_blank"
+                // Line 71: rel="noopener noreferrer"
+                rel="noopener noreferrer"
+                // Accessibility attribute — screen readers and assistive tech
+                aria-label={t('social.facebook')}
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className="rounded-lg bg-brand-800 p-2.5 text-brand-200 transition-colors hover:bg-brand-700 hover:text-white"
+              // Line 74: >
+              >
+                // JSX element — HTML-like tag becomes React component in browser
+                <Facebook className="h-4 w-4" />
+              // JSX element — HTML-like tag becomes React component in browser
+              </a>
+              // JSX element — HTML-like tag becomes React component in browser
+              <a
+                // Link target URL — internal route or external https://
+                href={INSTAGRAM_URL}
+                // Line 79: target="_blank"
+                target="_blank"
+                // Line 80: rel="noopener noreferrer"
+                rel="noopener noreferrer"
+                // Accessibility attribute — screen readers and assistive tech
+                aria-label={t('social.instagram')}
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className="rounded-lg bg-brand-800 p-2.5 text-brand-200 transition-colors hover:bg-brand-700 hover:text-white"
+              // Line 83: >
+              >
+                // JSX element — HTML-like tag becomes React component in browser
+                <Instagram className="h-4 w-4" />
+              // JSX element — HTML-like tag becomes React component in browser
+              </a>
+              // JSX element — HTML-like tag becomes React component in browser
+              <a
+                // Link target URL — internal route or external https://
+                href={WHATSAPP_URL}
+                // Line 88: target="_blank"
+                target="_blank"
+                // Line 89: rel="noopener noreferrer"
+                rel="noopener noreferrer"
+                // Accessibility attribute — screen readers and assistive tech
+                aria-label={t('social.whatsapp')}
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className="rounded-lg bg-brand-800 p-2.5 text-brand-200 transition-colors hover:bg-brand-700 hover:text-white"
+              // Line 92: >
+              >
+                // JSX element — HTML-like tag becomes React component in browser
+                <MessageCircle className="h-4 w-4" />
+              // JSX element — HTML-like tag becomes React component in browser
+              </a>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <div>
+            // JSX element — HTML-like tag becomes React component in browser
+            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gold-400">
+              // Line 100: {t('footer.shop')}
+              {t('footer.shop')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </h3>
+            // JSX element — HTML-like tag becomes React component in browser
+            <ul className="space-y-2">
+              // Array.map — transform each item (often render a list of components)
+              {footerLinks.shop.map((link) => (
+                // JSX element — HTML-like tag becomes React component in browser
+                <li key={link.href}>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <Link
+                    // Link target URL — internal route or external https://
+                    href={link.href}
+                    // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                    className="text-sm text-brand-200 transition-colors hover:text-white"
+                  // Line 108: >
+                  >
+                    // Line 109: {link.label}
+                    {link.label}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </Link>
+                // JSX element — HTML-like tag becomes React component in browser
+                </li>
+              // Line 112: ))}
+              ))}
+            // JSX element — HTML-like tag becomes React component in browser
+            </ul>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <div>
+            // JSX element — HTML-like tag becomes React component in browser
+            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gold-400">
+              // Line 118: {t('footer.company')}
+              {t('footer.company')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </h3>
+            // JSX element — HTML-like tag becomes React component in browser
+            <ul className="space-y-2">
+              // Array.map — transform each item (often render a list of components)
+              {footerLinks.company.map((link) => (
+                // JSX element — HTML-like tag becomes React component in browser
+                <li key={link.href}>
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <Link
+                    // Link target URL — internal route or external https://
+                    href={link.href}
+                    // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                    className="text-sm text-brand-200 transition-colors hover:text-white"
+                  // Line 126: >
+                  >
+                    // Line 127: {link.label}
+                    {link.label}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  </Link>
+                // JSX element — HTML-like tag becomes React component in browser
+                </li>
+              // Line 130: ))}
+              ))}
+            // JSX element — HTML-like tag becomes React component in browser
+            </ul>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <div>
+            // JSX element — HTML-like tag becomes React component in browser
+            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gold-400">
+              // Line 136: {t('footer.contact')}
+              {t('footer.contact')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </h3>
+            // JSX element — HTML-like tag becomes React component in browser
+            <ul className="space-y-3">
+              // JSX element — HTML-like tag becomes React component in browser
+              <li className="flex items-center gap-2 text-sm text-brand-200">
+                // JSX element — HTML-like tag becomes React component in browser
+                <Phone className="h-4 w-4 text-gold-400" />
+                // JSX element — HTML-like tag becomes React component in browser
+                <a href={`tel:${SITE_PHONE_DISPLAY.replace(/\s/g, '')}`} className="hover:text-white">
+                  // Line 142: {SITE_PHONE_DISPLAY}
+                  {SITE_PHONE_DISPLAY}
+                // JSX element — HTML-like tag becomes React component in browser
+                </a>
+              // JSX element — HTML-like tag becomes React component in browser
+              </li>
+              // JSX element — HTML-like tag becomes React component in browser
+              <li className="flex items-center gap-2 text-sm text-brand-200">
+                // JSX element — HTML-like tag becomes React component in browser
+                <Mail className="h-4 w-4 text-gold-400" />
+                // JSX element — HTML-like tag becomes React component in browser
+                <a href={`mailto:${SITE_EMAIL}`} className="hover:text-white">
+                  // Line 148: {SITE_EMAIL}
+                  {SITE_EMAIL}
+                // JSX element — HTML-like tag becomes React component in browser
+                </a>
+              // JSX element — HTML-like tag becomes React component in browser
+              </li>
+              // JSX element — HTML-like tag becomes React component in browser
+              <li className="flex items-start gap-2 text-sm text-brand-200">
+                // JSX element — HTML-like tag becomes React component in browser
+                <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-gold-400" />
+                // JSX element — HTML-like tag becomes React component in browser
+                <span>
+                  // Line 154: {SITE_ADDRESS}
+                  {SITE_ADDRESS}
+                  // JSX element — HTML-like tag becomes React component in browser
+                  <br />
+                  // Line 156: {t('footer.hours', { hours: SITE_HOURS })}
+                  {t('footer.hours', { hours: SITE_HOURS })}
+                // JSX element — HTML-like tag becomes React component in browser
+                </span>
+              // JSX element — HTML-like tag becomes React component in browser
+              </li>
+            // JSX element — HTML-like tag becomes React component in browser
+            </ul>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-brand-800 pt-8 sm:flex-row">
+          // JSX element — HTML-like tag becomes React component in browser
+          <p className="text-xs text-brand-300">
+            // Line 165: &copy; {new Date().getFullYear()} {t('site.name')}. {t('f...
+            &copy; {new Date().getFullYear()} {t('site.name')}. {t('footer.rights')}
+          // JSX element — HTML-like tag becomes React component in browser
+          </p>
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="flex gap-6 text-xs text-brand-300">
+            // JSX element — HTML-like tag becomes React component in browser
+            <Link href="/about#privacy" className="hover:text-white">
+              // Line 169: {t('nav.privacy')}
+              {t('nav.privacy')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </Link>
+            // JSX element — HTML-like tag becomes React component in browser
+            <Link href="/about#terms" className="hover:text-white">
+              // Line 172: {t('nav.terms')}
+              {t('nav.terms')}
+            // JSX element — HTML-like tag becomes React component in browser
+            </Link>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </footer>
+  // Line 178: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/layout/Header.annotated.tsx b/docs/annotated/src/components/layout/Header.annotated.tsx
new file mode 100644
index 0000000..fb48a2f
--- /dev/null
+++ b/docs/annotated/src/components/layout/Header.annotated.tsx
@@ -0,0 +1,254 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/layout/Header.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Import React — core UI library (components, hooks, JSX)
+import { useState } from 'react';
+// Lucide icons — lightweight SVG icon components
+import { ShoppingCart, Heart, User, Menu, X, Search } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useCartStore } from '@/store/cart';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useWishlistStore } from '@/store/wishlist';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useAuthStore } from '@/store/auth';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import Logo from '@/components/ui/Logo';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { SITE_LOCATION } from '@/lib/constants';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function Header() {
+  // React useState — local component state that triggers re-render on change
+  const [mobileOpen, setMobileOpen] = useState(false);
+  // Zustand selector — subscribe to slice of global store
+  const cartCount = useCartStore((s) => s.getItemCount());
+  // Zustand selector — subscribe to slice of global store
+  const wishlistCount = useWishlistStore((s) => s.items.length);
+  // Zustand selector — subscribe to slice of global store
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // Line 20: const navLinks = [
+  const navLinks = [
+    // Property or array item — trailing comma allowed in TypeScript
+    { href: '/shop', label: t('nav.shop') },
+    // Property or array item — trailing comma allowed in TypeScript
+    { href: '/shop?category=chicken', label: t('nav.chicken') },
+    // Property or array item — trailing comma allowed in TypeScript
+    { href: '/shop?category=beef', label: t('nav.beef') },
+    // Property or array item — trailing comma allowed in TypeScript
+    { href: '/shop?category=lamb', label: t('nav.lamb') },
+    // Property or array item — trailing comma allowed in TypeScript
+    { href: '/shop?category=fish', label: t('nav.fish') },
+    // Property or array item — trailing comma allowed in TypeScript
+    { href: '/about', label: t('nav.about') },
+    // Property or array item — trailing comma allowed in TypeScript
+    { href: '/about#contact', label: t('nav.contact') },
+  // End of array literal
+  ];
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <header className="border-b border-cream-300/80 bg-cream-50/95 backdrop-blur-md">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="flex h-16 items-center justify-between lg:h-20">
+          // JSX element — HTML-like tag becomes React component in browser
+          <Link href="/" className="flex items-center gap-3">
+            // JSX element — HTML-like tag becomes React component in browser
+            <Logo size="sm" />
+            // JSX element — HTML-like tag becomes React component in browser
+            <div className="hidden sm:block">
+              // JSX element — HTML-like tag becomes React component in browser
+              <span className="font-display text-xl font-bold text-brand-800">
+                // Line 38: {t('site.name')}
+                {t('site.name')}
+              // JSX element — HTML-like tag becomes React component in browser
+              </span>
+              // JSX element — HTML-like tag becomes React component in browser
+              <p className="text-[10px] font-medium uppercase tracking-widest text-brand-600">
+                // Line 41: {SITE_LOCATION}
+                {SITE_LOCATION}
+              // JSX element — HTML-like tag becomes React component in browser
+              </p>
+            // JSX element — HTML-like tag becomes React component in browser
+            </div>
+          // JSX element — HTML-like tag becomes React component in browser
+          </Link>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <nav className="hidden items-center gap-8 lg:flex">
+            // Array.map — transform each item (often render a list of components)
+            {navLinks.map((link) => (
+              // JSX element — HTML-like tag becomes React component in browser
+              <Link
+                // Line 49: key={link.href}
+                key={link.href}
+                // Link target URL — internal route or external https://
+                href={link.href}
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className="text-sm font-medium text-gray-600 transition-colors hover:text-brand-700"
+              // Line 52: >
+              >
+                // Line 53: {link.label}
+                {link.label}
+              // JSX element — HTML-like tag becomes React component in browser
+              </Link>
+            // Line 55: ))}
+            ))}
+          // JSX element — HTML-like tag becomes React component in browser
+          </nav>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <div className="flex items-center gap-1 sm:gap-2">
+            // JSX element — HTML-like tag becomes React component in browser
+            <Link
+              // Link target URL — internal route or external https://
+              href="/shop?q="
+              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+              className="hidden rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-brand-700 sm:block"
+              // Accessibility attribute — screen readers and assistive tech
+              aria-label={t('nav.searchProducts')}
+            // Line 63: >
+            >
+              // JSX element — HTML-like tag becomes React component in browser
+              <Search className="h-5 w-5" />
+            // JSX element — HTML-like tag becomes React component in browser
+            </Link>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <Link
+              // Link target URL — internal route or external https://
+              href="/wishlist"
+              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+              className="relative rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-brand-700"
+              // Accessibility attribute — screen readers and assistive tech
+              aria-label={t('nav.wishlist')}
+            // Line 71: >
+            >
+              // JSX element — HTML-like tag becomes React component in browser
+              <Heart className="h-5 w-5" />
+              // Line 73: {wishlistCount > 0 && (
+              {wishlistCount > 0 && (
+                // JSX element — HTML-like tag becomes React component in browser
+                <span className="absolute -end-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-gold-500 text-[10px] font-bold text-white">
+                  // Line 75: {wishlistCount}
+                  {wishlistCount}
+                // JSX element — HTML-like tag becomes React component in browser
+                </span>
+              // Line 77: )}
+              )}
+            // JSX element — HTML-like tag becomes React component in browser
+            </Link>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <Link
+              // Link target URL — internal route or external https://
+              href="/cart"
+              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+              className="relative rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-brand-700"
+              // Accessibility attribute — screen readers and assistive tech
+              aria-label={t('nav.cart')}
+            // Line 84: >
+            >
+              // JSX element — HTML-like tag becomes React component in browser
+              <ShoppingCart className="h-5 w-5" />
+              // Line 86: {cartCount > 0 && (
+              {cartCount > 0 && (
+                // JSX element — HTML-like tag becomes React component in browser
+                <span className="absolute -end-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-brand-700 text-[10px] font-bold text-white">
+                  // Line 88: {cartCount}
+                  {cartCount}
+                // JSX element — HTML-like tag becomes React component in browser
+                </span>
+              // Line 90: )}
+              )}
+            // JSX element — HTML-like tag becomes React component in browser
+            </Link>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <Link
+              // Link target URL — internal route or external https://
+              href={isAuthenticated ? '/account' : '/login'}
+              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+              className="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-brand-700"
+              // Accessibility attribute — screen readers and assistive tech
+              aria-label={t('nav.account')}
+            // Line 97: >
+            >
+              // JSX element — HTML-like tag becomes React component in browser
+              <User className="h-5 w-5" />
+            // JSX element — HTML-like tag becomes React component in browser
+            </Link>
+// (blank line — separates logical blocks for readability)
+            // JSX element — HTML-like tag becomes React component in browser
+            <button
+              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+              className="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 lg:hidden"
+              // Click handler — runs when user clicks (must be client component)
+              onClick={() => setMobileOpen(!mobileOpen)}
+              // Accessibility attribute — screen readers and assistive tech
+              aria-label={t('nav.toggleMenu')}
+            // Line 105: >
+            >
+              // Line 106: {mobileOpen ? <X className="h-5 w-5" /> : <Menu className...
+              {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+            // JSX element — HTML-like tag becomes React component in browser
+            </button>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+// (blank line — separates logical blocks for readability)
+      // Line 112: {mobileOpen && (
+      {mobileOpen && (
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="border-t border-gray-100 bg-white lg:hidden">
+          // JSX element — HTML-like tag becomes React component in browser
+          <nav className="flex flex-col px-4 py-4">
+            // Array.map — transform each item (often render a list of components)
+            {navLinks.map((link) => (
+              // JSX element — HTML-like tag becomes React component in browser
+              <Link
+                // Line 117: key={link.href}
+                key={link.href}
+                // Link target URL — internal route or external https://
+                href={link.href}
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className="rounded-lg px-4 py-3 text-sm font-medium text-gray-600 transition-colors hover:bg-brand-50 hover:text-brand-700"
+                // Click handler — runs when user clicks (must be client component)
+                onClick={() => setMobileOpen(false)}
+              // Line 121: >
+              >
+                // Line 122: {link.label}
+                {link.label}
+              // JSX element — HTML-like tag becomes React component in browser
+              </Link>
+            // Line 124: ))}
+            ))}
+          // JSX element — HTML-like tag becomes React component in browser
+          </nav>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // Line 127: )}
+      )}
+    // JSX element — HTML-like tag becomes React component in browser
+    </header>
+  // Line 129: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/layout/LanguageBanner.annotated.tsx b/docs/annotated/src/components/layout/LanguageBanner.annotated.tsx
new file mode 100644
index 0000000..fc3e292
--- /dev/null
+++ b/docs/annotated/src/components/layout/LanguageBanner.annotated.tsx
@@ -0,0 +1,129 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/layout/LanguageBanner.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Lucide icons — lightweight SVG icon components
+import { Globe } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { LOCALES, Locale } from '@/i18n/types';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useLocaleStore } from '@/store/locale';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { cn } from '@/lib/utils';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function LanguageBanner() {
+  // Zustand selector — subscribe to slice of global store
+  const { locale, setLocale } = useLocaleStore();
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div
+      // Tailwind CSS utility classes — styling (colors, spacing, layout)
+      className="border-b border-brand-800 bg-brand-950 text-white"
+      // Line 16: role="navigation"
+      role="navigation"
+      // Accessibility attribute — screen readers and assistive tech
+      aria-label={t('nav.language')}
+    // Line 18: >
+    >
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="mx-auto flex max-w-7xl flex-col items-center gap-2 px-4 py-2 sm:flex-row sm:justify-between sm:px-6 lg:px-8">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="flex items-center gap-2 text-xs font-medium text-brand-200">
+          // JSX element — HTML-like tag becomes React component in browser
+          <Globe className="h-3.5 w-3.5 text-gold-400" aria-hidden />
+          // JSX element — HTML-like tag becomes React component in browser
+          <span>{t('languageBanner.choose')}</span>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <div
+          // Tailwind CSS utility classes — styling (colors, spacing, layout)
+          className="flex w-full max-w-md items-center justify-center gap-1 rounded-full bg-brand-900 p-1 ring-1 ring-brand-800 sm:w-auto sm:max-w-none"
+          // Line 27: role="group"
+          role="group"
+          // Accessibility attribute — screen readers and assistive tech
+          aria-label={t('nav.language')}
+        // Line 29: >
+        >
+          // Array.map — transform each item (often render a list of components)
+          {LOCALES.map((lang) => {
+            // Line 31: const active = locale === lang.code;
+            const active = locale === lang.code;
+            // Return JSX — describes UI tree React renders to the DOM
+            return (
+              // JSX element — HTML-like tag becomes React component in browser
+              <button
+                // Line 34: key={lang.code}
+                key={lang.code}
+                // Line 35: type="button"
+                type="button"
+                // Click handler — runs when user clicks (must be client component)
+                onClick={() => setLocale(lang.code as Locale)}
+                // Accessibility attribute — screen readers and assistive tech
+                aria-pressed={active}
+                // Accessibility attribute — screen readers and assistive tech
+                aria-label={`${lang.label} (${lang.nativeLabel})`}
+                // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                className={cn(
+                  // Property or array item — trailing comma allowed in TypeScript
+                  'flex min-w-0 flex-1 items-center justify-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-semibold transition-all sm:flex-initial sm:px-4 sm:py-2 sm:text-sm',
+                  // Line 41: active
+                  active
+                    // Line 42: ? 'bg-gold-500 text-brand-950 shadow-gold'
+                    ? 'bg-gold-500 text-brand-950 shadow-gold'
+                    // Line 43: : 'text-brand-200 hover:bg-brand-800 hover:text-white'
+                    : 'text-brand-200 hover:bg-brand-800 hover:text-white'
+                // Line 44: )}
+                )}
+              // Line 45: >
+              >
+                // JSX element — HTML-like tag becomes React component in browser
+                <span className={lang.code === 'ur' ? 'font-[family-name:var(--font-urdu)]' : ''}>
+                  // Line 47: {lang.nativeLabel}
+                  {lang.nativeLabel}
+                // JSX element — HTML-like tag becomes React component in browser
+                </span>
+                // JSX element — HTML-like tag becomes React component in browser
+                <span
+                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
+                  className={cn(
+                    // Property or array item — trailing comma allowed in TypeScript
+                    'hidden text-[10px] font-normal uppercase tracking-wide sm:inline',
+                    // Line 52: active ? 'text-brand-900/70' : 'text-brand-400'
+                    active ? 'text-brand-900/70' : 'text-brand-400'
+                  // Line 53: )}
+                  )}
+                // Line 54: >
+                >
+                  // Line 55: {lang.label}
+                  {lang.label}
+                // JSX element — HTML-like tag becomes React component in browser
+                </span>
+              // JSX element — HTML-like tag becomes React component in browser
+              </button>
+            // Line 58: );
+            );
+          // Closing brace — end of block (function, if, object, JSX)
+          })}
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 63: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/layout/LanguageSwitcher.annotated.tsx b/docs/annotated/src/components/layout/LanguageSwitcher.annotated.tsx
new file mode 100644
index 0000000..e2cb42c
--- /dev/null
+++ b/docs/annotated/src/components/layout/LanguageSwitcher.annotated.tsx
@@ -0,0 +1,135 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/layout/LanguageSwitcher.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Import React — core UI library (components, hooks, JSX)
+import { useState, useRef, useEffect } from 'react';
+// Lucide icons — lightweight SVG icon components
+import { Globe, Check } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { LOCALES, Locale } from '@/i18n/types';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useLocaleStore } from '@/store/locale';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { cn } from '@/lib/utils';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function LanguageSwitcher() {
+  // React useState — local component state that triggers re-render on change
+  const [open, setOpen] = useState(false);
+  // Line 12: const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLDivElement>(null);
+  // Zustand selector — subscribe to slice of global store
+  const { locale, setLocale } = useLocaleStore();
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // Array.find — get first matching item or undefined
+  const current = LOCALES.find((l) => l.code === locale);
+// (blank line — separates logical blocks for readability)
+  // Side effect hook — runs after paint; deps array controls when it re-runs
+  useEffect(() => {
+    // Function declaration — reusable logic in this file
+    function handleClick(e: MouseEvent) {
+      // Conditional branch — different behavior based on runtime value
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        // Line 21: setOpen(false);
+        setOpen(false);
+      // Closing brace — end of block (function, if, object, JSX)
+      }
+    // Closing brace — end of block (function, if, object, JSX)
+    }
+    // Line 24: document.addEventListener('mousedown', handleClick);
+    document.addEventListener('mousedown', handleClick);
+    // Return JSX — describes UI tree React renders to the DOM
+    return () => document.removeEventListener('mousedown', handleClick);
+  // Closing brace — end of block (function, if, object, JSX)
+  }, []);
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div ref={ref} className="relative">
+      // JSX element — HTML-like tag becomes React component in browser
+      <button
+        // Click handler — runs when user clicks (must be client component)
+        onClick={() => setOpen(!open)}
+        // Tailwind CSS utility classes — styling (colors, spacing, layout)
+        className="flex items-center gap-1.5 rounded-lg px-2 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-brand-700"
+        // Accessibility attribute — screen readers and assistive tech
+        aria-label={t('nav.language')}
+      // Line 34: >
+      >
+        // JSX element — HTML-like tag becomes React component in browser
+        <Globe className="h-4 w-4" />
+        // JSX element — HTML-like tag becomes React component in browser
+        <span className="hidden sm:inline">{current?.nativeLabel}</span>
+      // JSX element — HTML-like tag becomes React component in browser
+      </button>
+// (blank line — separates logical blocks for readability)
+      // Line 39: {open && (
+      {open && (
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="absolute end-0 top-full z-50 mt-1 min-w-[10rem] overflow-hidden rounded-xl border border-gray-100 bg-white py-1 shadow-premium-lg">
+          // Array.map — transform each item (often render a list of components)
+          {LOCALES.map((lang) => (
+            // JSX element — HTML-like tag becomes React component in browser
+            <button
+              // Line 43: key={lang.code}
+              key={lang.code}
+              // Click handler — runs when user clicks (must be client component)
+              onClick={() => {
+                // Line 45: setLocale(lang.code as Locale);
+                setLocale(lang.code as Locale);
+                // Line 46: setOpen(false);
+                setOpen(false);
+              // Closing brace — end of block (function, if, object, JSX)
+              }}
+              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+              className={cn(
+                // Property or array item — trailing comma allowed in TypeScript
+                'flex w-full items-center justify-between gap-3 px-4 py-2.5 text-sm transition-colors hover:bg-brand-50',
+                // Line 50: locale === lang.code
+                locale === lang.code
+                  // Line 51: ? 'font-semibold text-brand-700'
+                  ? 'font-semibold text-brand-700'
+                  // Line 52: : 'text-gray-600'
+                  : 'text-gray-600'
+              // Line 53: )}
+              )}
+            // Line 54: >
+            >
+              // JSX element — HTML-like tag becomes React component in browser
+              <span>
+                // Line 56: {lang.nativeLabel}
+                {lang.nativeLabel}
+                // JSX element — HTML-like tag becomes React component in browser
+                <span className="ms-2 text-xs text-gray-400">{lang.label}</span>
+              // JSX element — HTML-like tag becomes React component in browser
+              </span>
+              // Line 59: {locale === lang.code && (
+              {locale === lang.code && (
+                // JSX element — HTML-like tag becomes React component in browser
+                <Check className="h-4 w-4 shrink-0 text-brand-700" />
+              // Line 61: )}
+              )}
+            // JSX element — HTML-like tag becomes React component in browser
+            </button>
+          // Line 63: ))}
+          ))}
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // Line 65: )}
+      )}
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 67: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/layout/LocaleAttributes.annotated.tsx b/docs/annotated/src/components/layout/LocaleAttributes.annotated.tsx
new file mode 100644
index 0000000..9a56120
--- /dev/null
+++ b/docs/annotated/src/components/layout/LocaleAttributes.annotated.tsx
@@ -0,0 +1,33 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/layout/LocaleAttributes.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Import React — core UI library (components, hooks, JSX)
+import { useEffect } from 'react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useLocaleStore } from '@/store/locale';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { getHtmlLang, isRtl } from '@/i18n';
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function LocaleAttributes() {
+  // Zustand selector — subscribe to slice of global store
+  const locale = useLocaleStore((s) => s.locale);
+// (blank line — separates logical blocks for readability)
+  // Side effect hook — runs after paint; deps array controls when it re-runs
+  useEffect(() => {
+    // Line 11: document.documentElement.lang = getHtmlLang(locale);
+    document.documentElement.lang = getHtmlLang(locale);
+    // Line 12: document.documentElement.dir = isRtl(locale) ? 'rtl' : 'l...
+    document.documentElement.dir = isRtl(locale) ? 'rtl' : 'ltr';
+  // Closing brace — end of block (function, if, object, JSX)
+  }, [locale]);
+// (blank line — separates logical blocks for readability)
+  // Return value from function
+  return null;
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/product/CustomizationSelector.annotated.tsx b/docs/annotated/src/components/product/CustomizationSelector.annotated.tsx
new file mode 100644
index 0000000..89e5e9c
--- /dev/null
+++ b/docs/annotated/src/components/product/CustomizationSelector.annotated.tsx
@@ -0,0 +1,202 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/product/CustomizationSelector.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { Category, ProductCustomization } from '@/types';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { CUT_COUNTS, CUTTING_STYLE_KEYS } from '@/lib/constants';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { updateMeatCustomization } from '@/lib/customization';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { cn } from '@/lib/utils';
+// Lucide icons — lightweight SVG icon components
+import { Scissors, Hash } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// (blank line — separates logical blocks for readability)
+// TypeScript interface — contract for object properties and methods
+interface CustomizationSelectorProps {
+  // Line 11: category: Category;
+  category: Category;
+  // Line 12: customization: ProductCustomization;
+  customization: ProductCustomization;
+  // Line 13: onChange: (customization: ProductCustomization) => void;
+  onChange: (customization: ProductCustomization) => void;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function CustomizationSelector({
+  // Property or array item — trailing comma allowed in TypeScript
+  category,
+  // Property or array item — trailing comma allowed in TypeScript
+  customization,
+  // Property or array item — trailing comma allowed in TypeScript
+  onChange,
+// Closing brace — end of block (function, if, object, JSX)
+}: CustomizationSelectorProps) {
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // Conditional branch — different behavior based on runtime value
+  if (category === 'fish') {
+    // Return JSX — describes UI tree React renders to the DOM
+    return (
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="rounded-xl border border-brand-100 bg-brand-50/50 p-4">
+        // JSX element — HTML-like tag becomes React component in browser
+        <p className="text-sm text-brand-700">{t('product.fishNote')}</p>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // Line 28: );
+    );
+  // Closing brace — end of block (function, if, object, JSX)
+  }
+// (blank line — separates logical blocks for readability)
+  // Line 31: const meat = updateMeatCustomization(customization, categ...
+  const meat = updateMeatCustomization(customization, category, {});
+  // Line 32: const selectedCuts = meat.cuts;
+  const selectedCuts = meat.cuts;
+  // Line 33: const selectedStyle = meat.cuttingStyle;
+  const selectedStyle = meat.cuttingStyle;
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div className="space-y-6">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div>
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mb-3 flex items-center gap-2">
+          // JSX element — HTML-like tag becomes React component in browser
+          <Hash className="h-4 w-4 text-brand-700" />
+          // JSX element — HTML-like tag becomes React component in browser
+          <h3 className="text-sm font-semibold text-brand-900">
+            // Line 41: {t('product.howManyCuts')}
+            {t('product.howManyCuts')}
+          // JSX element — HTML-like tag becomes React component in browser
+          </h3>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="flex flex-wrap gap-2">
+          // Array.map — transform each item (often render a list of components)
+          {CUT_COUNTS.map((cuts) => (
+            // JSX element — HTML-like tag becomes React component in browser
+            <button
+              // Line 47: key={cuts}
+              key={cuts}
+              // Line 48: type="button"
+              type="button"
+              // Click handler — runs when user clicks (must be client component)
+              onClick={() =>
+                // Line 50: onChange(updateMeatCustomization(customization, category,...
+                onChange(updateMeatCustomization(customization, category, { cuts }))
+              // Closing brace — end of block (function, if, object, JSX)
+              }
+              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+              className={cn(
+                // Property or array item — trailing comma allowed in TypeScript
+                'min-w-[3.5rem] rounded-lg border-2 px-4 py-2.5 text-sm font-semibold transition-all',
+                // Line 54: selectedCuts === cuts
+                selectedCuts === cuts
+                  // Line 55: ? 'border-brand-700 bg-brand-700 text-white shadow-premium'
+                  ? 'border-brand-700 bg-brand-700 text-white shadow-premium'
+                  // Line 56: : 'border-gray-200 bg-white text-gray-700 hover:border-br...
+                  : 'border-gray-200 bg-white text-gray-700 hover:border-brand-300 hover:bg-brand-50'
+              // Line 57: )}
+              )}
+            // Line 58: >
+            >
+              // Line 59: {cuts}
+              {cuts}
+            // JSX element — HTML-like tag becomes React component in browser
+            </button>
+          // Line 61: ))}
+          ))}
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        <p className="mt-2 text-xs text-gray-500">{t('product.howManyCutsHint')}</p>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+// (blank line — separates logical blocks for readability)
+      // JSX element — HTML-like tag becomes React component in browser
+      <div>
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mb-3 flex items-center gap-2">
+          // JSX element — HTML-like tag becomes React component in browser
+          <Scissors className="h-4 w-4 text-brand-700" />
+          // JSX element — HTML-like tag becomes React component in browser
+          <h3 className="text-sm font-semibold text-brand-900">
+            // Line 70: {t('product.selectCutting')}
+            {t('product.selectCutting')}
+          // JSX element — HTML-like tag becomes React component in browser
+          </h3>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+          // Array.map — transform each item (often render a list of components)
+          {CUTTING_STYLE_KEYS.map((style) => (
+            // JSX element — HTML-like tag becomes React component in browser
+            <button
+              // Line 76: key={style}
+              key={style}
+              // Line 77: type="button"
+              type="button"
+              // Click handler — runs when user clicks (must be client component)
+              onClick={() =>
+                // Line 79: onChange(
+                onChange(
+                  // Line 80: updateMeatCustomization(customization, category, { cuttin...
+                  updateMeatCustomization(customization, category, { cuttingStyle: style })
+                // Line 81: )
+                )
+              // Closing brace — end of block (function, if, object, JSX)
+              }
+              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+              className={cn(
+                // Property or array item — trailing comma allowed in TypeScript
+                'rounded-lg border-2 px-4 py-3 text-start text-sm font-medium transition-all',
+                // Line 85: selectedStyle === style
+                selectedStyle === style
+                  // Line 86: ? 'border-brand-700 bg-brand-700 text-white shadow-premium'
+                  ? 'border-brand-700 bg-brand-700 text-white shadow-premium'
+                  // Line 87: : 'border-gray-200 bg-white text-gray-700 hover:border-br...
+                  : 'border-gray-200 bg-white text-gray-700 hover:border-brand-300 hover:bg-brand-50'
+              // Line 88: )}
+              )}
+            // Line 89: >
+            >
+              // Line 90: {t(`cutting.${style}`)}
+              {t(`cutting.${style}`)}
+            // JSX element — HTML-like tag becomes React component in browser
+            </button>
+          // Line 92: ))}
+          ))}
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        <p className="mt-2 text-xs text-gray-500">
+          // Line 95: {t('product.selectCuttingHint', {
+          {t('product.selectCuttingHint', {
+            // Property or array item — trailing comma allowed in TypeScript
+            category: t(`categories.${category}.name`),
+          // Closing brace — end of block (function, if, object, JSX)
+          })}
+        // JSX element — HTML-like tag becomes React component in browser
+        </p>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 101: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/product/ProductCard.annotated.tsx b/docs/annotated/src/components/product/ProductCard.annotated.tsx
new file mode 100644
index 0000000..52c1fcd
--- /dev/null
+++ b/docs/annotated/src/components/product/ProductCard.annotated.tsx
@@ -0,0 +1,174 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/product/ProductCard.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Import project module (@/ alias = src/ folder in tsconfig)
+import AppImage from '@/components/ui/AppImage';
+// Next.js Link — fast client-side navigation without full page reload
+import Link from 'next/link';
+// Lucide icons — lightweight SVG icon components
+import { Heart, ShoppingCart } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { LocalizedProduct } from '@/lib/product-i18n';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { formatPrice, getFormatLocale } from '@/lib/utils';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useWishlistStore } from '@/store/wishlist';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { cn } from '@/lib/utils';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { products } from '@/lib/products';
+// (blank line — separates logical blocks for readability)
+// TypeScript interface — contract for object properties and methods
+interface ProductCardProps {
+  // Line 14: product: LocalizedProduct;
+  product: LocalizedProduct;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function ProductCard({ product }: ProductCardProps) {
+  // Zustand selector — subscribe to slice of global store
+  const { isInWishlist, toggleItem } = useWishlistStore();
+  // Custom hook — returns t() translator and current locale
+  const { t, locale } = useTranslation();
+  // Array.find — get first matching item or undefined
+  const rawProduct = products.find((p) => p.id === product.id)!;
+  // Line 21: const inWishlist = isInWishlist(product.id);
+  const inWishlist = isInWishlist(product.id);
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div className="card-premium group overflow-hidden">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="relative aspect-[4/3] overflow-hidden bg-gray-50">
+        // JSX element — HTML-like tag becomes React component in browser
+        <Link href={`/product/${product.slug}`}>
+          // JSX element — HTML-like tag becomes React component in browser
+          <AppImage
+            // Line 28: src={product.image}
+            src={product.image}
+            // Line 29: alt={product.name}
+            alt={product.name}
+            // Line 30: fill
+            fill
+            // Tailwind CSS utility classes — styling (colors, spacing, layout)
+            className="object-cover transition-transform duration-500 group-hover:scale-105"
+            // Line 32: sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw...
+            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 320px"
+          // Line 33: />
+          />
+        // JSX element — HTML-like tag becomes React component in browser
+        </Link>
+        // Line 35: {product.badge && (
+        {product.badge && (
+          // JSX element — HTML-like tag becomes React component in browser
+          <span className="absolute start-3 top-3 rounded-full bg-gold-500 px-3 py-1 text-xs font-semibold text-white shadow-gold">
+            // Line 37: {product.badge}
+            {product.badge}
+          // JSX element — HTML-like tag becomes React component in browser
+          </span>
+        // Line 39: )}
+        )}
+        // JSX element — HTML-like tag becomes React component in browser
+        <button
+          // Click handler — runs when user clicks (must be client component)
+          onClick={() => toggleItem(rawProduct)}
+          // Tailwind CSS utility classes — styling (colors, spacing, layout)
+          className={cn(
+            // Property or array item — trailing comma allowed in TypeScript
+            'absolute end-3 top-3 flex h-9 w-9 items-center justify-center rounded-full bg-white/90 shadow-sm backdrop-blur transition-all hover:scale-110',
+            // Line 44: inWishlist && 'text-red-500'
+            inWishlist && 'text-red-500'
+          // Line 45: )}
+          )}
+          // Accessibility attribute — screen readers and assistive tech
+          aria-label={inWishlist ? t('product.removeWishlist') : t('product.addWishlist')}
+        // Line 47: >
+        >
+          // JSX element — HTML-like tag becomes React component in browser
+          <Heart className={cn('h-4 w-4', inWishlist && 'fill-current')} />
+        // JSX element — HTML-like tag becomes React component in browser
+        </button>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+// (blank line — separates logical blocks for readability)
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="p-5">
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mb-1 flex items-center gap-2">
+          // JSX element — HTML-like tag becomes React component in browser
+          <span className="text-xs font-medium uppercase tracking-wider text-brand-600">
+            // Line 55: {t(`categories.${product.category}.name`)}
+            {t(`categories.${product.category}.name`)}
+          // JSX element — HTML-like tag becomes React component in browser
+          </span>
+          // Line 57: {product.weight && (
+          {product.weight && (
+            // JSX element — HTML-like tag becomes React component in browser
+            <span className="text-xs text-gray-400">· {product.weight}</span>
+          // Line 59: )}
+          )}
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <Link href={`/product/${product.slug}`}>
+          // JSX element — HTML-like tag becomes React component in browser
+          <h3 className="mb-1 font-display text-lg font-semibold text-brand-900 transition-colors group-hover:text-brand-700">
+            // Line 64: {product.name}
+            {product.name}
+          // JSX element — HTML-like tag becomes React component in browser
+          </h3>
+        // JSX element — HTML-like tag becomes React component in browser
+        </Link>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <p className="mb-4 line-clamp-2 text-sm text-gray-500">{product.description}</p>
+// (blank line — separates logical blocks for readability)
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="flex items-center justify-between">
+          // JSX element — HTML-like tag becomes React component in browser
+          <div>
+            // JSX element — HTML-like tag becomes React component in browser
+            <span className="text-lg font-bold text-brand-800">
+              // Line 73: {formatPrice(product.price, getFormatLocale(locale))}
+              {formatPrice(product.price, getFormatLocale(locale))}
+            // JSX element — HTML-like tag becomes React component in browser
+            </span>
+            // JSX element — HTML-like tag becomes React component in browser
+            <span className="ms-1 text-xs text-gray-400">{product.priceUnit}</span>
+          // JSX element — HTML-like tag becomes React component in browser
+          </div>
+// (blank line — separates logical blocks for readability)
+          // JSX element — HTML-like tag becomes React component in browser
+          <Link
+            // Link target URL — internal route or external https://
+            href={`/product/${product.slug}`}
+            // Tailwind CSS utility classes — styling (colors, spacing, layout)
+            className="flex h-10 w-10 items-center justify-center rounded-full bg-brand-700 text-white transition-all hover:bg-brand-800 hover:shadow-premium"
+            // Accessibility attribute — screen readers and assistive tech
+            aria-label={t('product.viewProduct', { name: product.name })}
+          // Line 82: >
+          >
+            // JSX element — HTML-like tag becomes React component in browser
+            <ShoppingCart className="h-4 w-4" />
+          // JSX element — HTML-like tag becomes React component in browser
+          </Link>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 88: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/shop/ShopFilters.annotated.tsx b/docs/annotated/src/components/shop/ShopFilters.annotated.tsx
new file mode 100644
index 0000000..69473e5
--- /dev/null
+++ b/docs/annotated/src/components/shop/ShopFilters.annotated.tsx
@@ -0,0 +1,214 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/shop/ShopFilters.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { Category, SortOption } from '@/types';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { cn } from '@/lib/utils';
+// Lucide icons — lightweight SVG icon components
+import { SlidersHorizontal } from 'lucide-react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useTranslation } from '@/hooks/useTranslation';
+// (blank line — separates logical blocks for readability)
+// TypeScript interface — contract for object properties and methods
+interface ShopFiltersProps {
+  // Line 9: selectedCategory: Category | 'all';
+  selectedCategory: Category | 'all';
+  // Line 10: onCategoryChange: (category: Category | 'all') => void;
+  onCategoryChange: (category: Category | 'all') => void;
+  // Line 11: sortBy: SortOption;
+  sortBy: SortOption;
+  // Line 12: onSortChange: (sort: SortOption) => void;
+  onSortChange: (sort: SortOption) => void;
+  // Line 13: searchQuery: string;
+  searchQuery: string;
+  // Line 14: onSearchChange: (query: string) => void;
+  onSearchChange: (query: string) => void;
+  // Line 15: totalResults: number;
+  totalResults: number;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function ShopFilters({
+  // Property or array item — trailing comma allowed in TypeScript
+  selectedCategory,
+  // Property or array item — trailing comma allowed in TypeScript
+  onCategoryChange,
+  // Property or array item — trailing comma allowed in TypeScript
+  sortBy,
+  // Property or array item — trailing comma allowed in TypeScript
+  onSortChange,
+  // Property or array item — trailing comma allowed in TypeScript
+  searchQuery,
+  // Property or array item — trailing comma allowed in TypeScript
+  onSearchChange,
+  // Property or array item — trailing comma allowed in TypeScript
+  totalResults,
+// Closing brace — end of block (function, if, object, JSX)
+}: ShopFiltersProps) {
+  // Custom hook — returns t() translator and current locale
+  const { t } = useTranslation();
+// (blank line — separates logical blocks for readability)
+  // Line 29: const categories: { value: Category | 'all'; label: strin...
+  const categories: { value: Category | 'all'; label: string }[] = [
+    // Property or array item — trailing comma allowed in TypeScript
+    { value: 'all', label: t('shop.all') },
+    // Property or array item — trailing comma allowed in TypeScript
+    { value: 'chicken', label: t('nav.chicken') },
+    // Property or array item — trailing comma allowed in TypeScript
+    { value: 'beef', label: t('nav.beef') },
+    // Property or array item — trailing comma allowed in TypeScript
+    { value: 'lamb', label: t('nav.lamb') },
+    // Property or array item — trailing comma allowed in TypeScript
+    { value: 'fish', label: t('nav.fish') },
+  // End of array literal
+  ];
+// (blank line — separates logical blocks for readability)
+  // Line 37: const sortOptions: { value: SortOption; label: string }[]...
+  const sortOptions: { value: SortOption; label: string }[] = [
+    // Property or array item — trailing comma allowed in TypeScript
+    { value: 'featured', label: t('shop.sortFeatured') },
+    // Property or array item — trailing comma allowed in TypeScript
+    { value: 'price-asc', label: t('shop.sortPriceAsc') },
+    // Property or array item — trailing comma allowed in TypeScript
+    { value: 'price-desc', label: t('shop.sortPriceDesc') },
+    // Property or array item — trailing comma allowed in TypeScript
+    { value: 'name', label: t('shop.sortName') },
+  // End of array literal
+  ];
+// (blank line — separates logical blocks for readability)
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div className="space-y-6">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div>
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="mb-3 flex items-center gap-2">
+          // JSX element — HTML-like tag becomes React component in browser
+          <SlidersHorizontal className="h-4 w-4 text-brand-700" />
+          // JSX element — HTML-like tag becomes React component in browser
+          <h2 className="text-sm font-semibold text-brand-900">{t('shop.filters')}</h2>
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+        // JSX element — HTML-like tag becomes React component in browser
+        <p className="text-xs text-gray-500">
+          // Line 52: {t('shop.productsFound', { count: totalResults })}
+          {t('shop.productsFound', { count: totalResults })}
+        // JSX element — HTML-like tag becomes React component in browser
+        </p>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+// (blank line — separates logical blocks for readability)
+      // JSX element — HTML-like tag becomes React component in browser
+      <div>
+        // JSX element — HTML-like tag becomes React component in browser
+        <label htmlFor="search" className="label-text">
+          // Line 58: {t('shop.search')}
+          {t('shop.search')}
+        // JSX element — HTML-like tag becomes React component in browser
+        </label>
+        // JSX element — HTML-like tag becomes React component in browser
+        <input
+          // Line 61: id="search"
+          id="search"
+          // Line 62: type="text"
+          type="text"
+          // Line 63: placeholder={t('shop.searchPlaceholder')}
+          placeholder={t('shop.searchPlaceholder')}
+          // Line 64: value={searchQuery}
+          value={searchQuery}
+          // Change handler — runs when input/select value changes
+          onChange={(e) => onSearchChange(e.target.value)}
+          // Tailwind CSS utility classes — styling (colors, spacing, layout)
+          className="input-field"
+        // Line 67: />
+        />
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+// (blank line — separates logical blocks for readability)
+      // JSX element — HTML-like tag becomes React component in browser
+      <div>
+        // JSX element — HTML-like tag becomes React component in browser
+        <p className="label-text">{t('shop.category')}</p>
+        // JSX element — HTML-like tag becomes React component in browser
+        <div className="flex flex-wrap gap-2">
+          // Array.map — transform each item (often render a list of components)
+          {categories.map((cat) => (
+            // JSX element — HTML-like tag becomes React component in browser
+            <button
+              // Line 75: key={cat.value}
+              key={cat.value}
+              // Click handler — runs when user clicks (must be client component)
+              onClick={() => onCategoryChange(cat.value)}
+              // Tailwind CSS utility classes — styling (colors, spacing, layout)
+              className={cn(
+                // Property or array item — trailing comma allowed in TypeScript
+                'rounded-full px-4 py-2 text-sm font-medium transition-all',
+                // Line 79: selectedCategory === cat.value
+                selectedCategory === cat.value
+                  // Line 80: ? 'bg-brand-700 text-white shadow-premium'
+                  ? 'bg-brand-700 text-white shadow-premium'
+                  // Line 81: : 'bg-gray-100 text-gray-600 hover:bg-brand-50 hover:text...
+                  : 'bg-gray-100 text-gray-600 hover:bg-brand-50 hover:text-brand-700'
+              // Line 82: )}
+              )}
+            // Line 83: >
+            >
+              // Line 84: {cat.label}
+              {cat.label}
+            // JSX element — HTML-like tag becomes React component in browser
+            </button>
+          // Line 86: ))}
+          ))}
+        // JSX element — HTML-like tag becomes React component in browser
+        </div>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+// (blank line — separates logical blocks for readability)
+      // JSX element — HTML-like tag becomes React component in browser
+      <div>
+        // JSX element — HTML-like tag becomes React component in browser
+        <label htmlFor="sort" className="label-text">
+          // Line 92: {t('shop.sortBy')}
+          {t('shop.sortBy')}
+        // JSX element — HTML-like tag becomes React component in browser
+        </label>
+        // JSX element — HTML-like tag becomes React component in browser
+        <select
+          // Line 95: id="sort"
+          id="sort"
+          // Line 96: value={sortBy}
+          value={sortBy}
+          // Change handler — runs when input/select value changes
+          onChange={(e) => onSortChange(e.target.value as SortOption)}
+          // Tailwind CSS utility classes — styling (colors, spacing, layout)
+          className="input-field"
+        // Line 99: >
+        >
+          // Array.map — transform each item (often render a list of components)
+          {sortOptions.map((opt) => (
+            // JSX element — HTML-like tag becomes React component in browser
+            <option key={opt.value} value={opt.value}>
+              // Line 102: {opt.label}
+              {opt.label}
+            // JSX element — HTML-like tag becomes React component in browser
+            </option>
+          // Line 104: ))}
+          ))}
+        // JSX element — HTML-like tag becomes React component in browser
+        </select>
+      // JSX element — HTML-like tag becomes React component in browser
+      </div>
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 108: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/ui/AppImage.annotated.tsx b/docs/annotated/src/components/ui/AppImage.annotated.tsx
new file mode 100644
index 0000000..138aaf4
--- /dev/null
+++ b/docs/annotated/src/components/ui/AppImage.annotated.tsx
@@ -0,0 +1,25 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/ui/AppImage.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js Image — optimized images (lazy load, WebP/AVIF)
+import Image, { ImageProps } from 'next/image';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { IMAGE_QUALITY } from '@/lib/images';
+// (blank line — separates logical blocks for readability)
+// TypeScript type alias — union or shorthand for complex types
+type AppImageProps = ImageProps & {
+  // Line 5: quality?: number;
+  quality?: number;
+// Closing brace — end of block (function, if, object, JSX)
+};
+// (blank line — separates logical blocks for readability)
+// Block comment — documents the file or function below
+/** Site-wide Image wrapper with consistent high quality defaults */
+// Default export — main component/page Next.js or other files import
+export default function AppImage({ quality = IMAGE_QUALITY, ...props }: AppImageProps) {
+  // Return value from function
+  return <Image quality={quality} {...props} />;
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/components/ui/Button.annotated.tsx b/docs/annotated/src/components/ui/Button.annotated.tsx
new file mode 100644
index 0000000..2597ddc
--- /dev/null
+++ b/docs/annotated/src/components/ui/Button.annotated.tsx
@@ -0,0 +1,76 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/ui/Button.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { cn } from '@/lib/utils';
+// Import React — core UI library (components, hooks, JSX)
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+// (blank line — separates logical blocks for readability)
+// TypeScript interface — contract for object properties and methods
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  // Line 5: variant?: 'primary' | 'secondary' | 'gold' | 'ghost';
+  variant?: 'primary' | 'secondary' | 'gold' | 'ghost';
+  // Line 6: size?: 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg';
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Line 9: const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  // Line 10: ({ className, variant = 'primary', size = 'md', children,...
+  ({ className, variant = 'primary', size = 'md', children, ...props }, ref) => {
+    // Line 11: const variants = {
+    const variants = {
+      // Property or array item — trailing comma allowed in TypeScript
+      primary: 'btn-primary',
+      // Property or array item — trailing comma allowed in TypeScript
+      secondary: 'btn-secondary',
+      // Property or array item — trailing comma allowed in TypeScript
+      gold: 'btn-gold',
+      // Line 15: ghost:
+      ghost:
+        // Property or array item — trailing comma allowed in TypeScript
+        'inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-brand-700',
+    // Closing brace — end of block (function, if, object, JSX)
+    };
+// (blank line — separates logical blocks for readability)
+    // Line 19: const sizes = {
+    const sizes = {
+      // Property or array item — trailing comma allowed in TypeScript
+      sm: 'px-4 py-2 text-xs',
+      // Property or array item — trailing comma allowed in TypeScript
+      md: '',
+      // Property or array item — trailing comma allowed in TypeScript
+      lg: 'px-8 py-4 text-base',
+    // Closing brace — end of block (function, if, object, JSX)
+    };
+// (blank line — separates logical blocks for readability)
+    // Return JSX — describes UI tree React renders to the DOM
+    return (
+      // JSX element — HTML-like tag becomes React component in browser
+      <button
+        // Line 27: ref={ref}
+        ref={ref}
+        // Tailwind CSS utility classes — styling (colors, spacing, layout)
+        className={cn(variants[variant], sizes[size], className)}
+        // Line 29: {...props}
+        {...props}
+      // Line 30: >
+      >
+        // Line 31: {children}
+        {children}
+      // JSX element — HTML-like tag becomes React component in browser
+      </button>
+    // Line 33: );
+    );
+  // Closing brace — end of block (function, if, object, JSX)
+  }
+// Line 35: );
+);
+// (blank line — separates logical blocks for readability)
+// Line 37: Button.displayName = 'Button';
+Button.displayName = 'Button';
+// Line 38: export default Button;
+export default Button;
diff --git a/docs/annotated/src/components/ui/Logo.annotated.tsx b/docs/annotated/src/components/ui/Logo.annotated.tsx
new file mode 100644
index 0000000..97448fe
--- /dev/null
+++ b/docs/annotated/src/components/ui/Logo.annotated.tsx
@@ -0,0 +1,74 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/components/ui/Logo.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Import project module (@/ alias = src/ folder in tsconfig)
+import AppImage from '@/components/ui/AppImage';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { IMAGES } from '@/lib/images';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { cn } from '@/lib/utils';
+// (blank line — separates logical blocks for readability)
+// TypeScript interface — contract for object properties and methods
+interface LogoProps {
+  // Line 6: size?: 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg';
+  // Line 7: className?: string;
+  className?: string;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Line 10: const sizes = {
+const sizes = {
+  // Property or array item — trailing comma allowed in TypeScript
+  sm: 'h-10 w-10',
+  // Property or array item — trailing comma allowed in TypeScript
+  md: 'h-12 w-12',
+  // Property or array item — trailing comma allowed in TypeScript
+  lg: 'h-20 w-20',
+// Closing brace — end of block (function, if, object, JSX)
+};
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function Logo({ size = 'md', className }: LogoProps) {
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div
+      // Tailwind CSS utility classes — styling (colors, spacing, layout)
+      className={cn(
+        // Property or array item — trailing comma allowed in TypeScript
+        'relative shrink-0 overflow-hidden rounded-full ring-2 ring-cream-200',
+        // Property or array item — trailing comma allowed in TypeScript
+        sizes[size],
+        // Line 22: className
+        className
+      // Line 23: )}
+      )}
+    // Line 24: >
+    >
+      // JSX element — HTML-like tag becomes React component in browser
+      <AppImage
+        // Line 26: src={IMAGES.logo}
+        src={IMAGES.logo}
+        // Line 27: alt="Kött Gård"
+        alt="Kött Gård"
+        // Line 28: fill
+        fill
+        // Tailwind CSS utility classes — styling (colors, spacing, layout)
+        className="object-cover"
+        // Line 30: sizes="(max-width: 640px) 40px, 80px"
+        sizes="(max-width: 640px) 40px, 80px"
+        // Line 31: priority
+        priority
+        // Line 32: quality={95}
+        quality={95}
+      // Line 33: />
+      />
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 35: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/hooks/useTranslation.annotated.ts b/docs/annotated/src/hooks/useTranslation.annotated.ts
new file mode 100644
index 0000000..b053e14
--- /dev/null
+++ b/docs/annotated/src/hooks/useTranslation.annotated.ts
@@ -0,0 +1,27 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/hooks/useTranslation.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
+'use client';
+// (blank line — separates logical blocks for readability)
+// Import React — core UI library (components, hooks, JSX)
+import { useMemo } from 'react';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { createTranslator } from '@/i18n';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { useLocaleStore } from '@/store/locale';
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function useTranslation() {
+  // Zustand selector — subscribe to slice of global store
+  const locale = useLocaleStore((s) => s.locale);
+// (blank line — separates logical blocks for readability)
+  // React useMemo — cache expensive computed value until dependencies change
+  const t = useMemo(() => createTranslator(locale), [locale]);
+// (blank line — separates logical blocks for readability)
+  // Return value from function
+  return { t, locale };
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/i18n/index.annotated.ts b/docs/annotated/src/i18n/index.annotated.ts
new file mode 100644
index 0000000..65c21b3
--- /dev/null
+++ b/docs/annotated/src/i18n/index.annotated.ts
@@ -0,0 +1,85 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/i18n/index.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Import from a relative file in the same project
+import { Locale, TranslationDict } from './types';
+// Import from a relative file in the same project
+import { en } from './locales/en';
+// Import from a relative file in the same project
+import { sv } from './locales/sv';
+// Import from a relative file in the same project
+import { ur } from './locales/ur';
+// (blank line — separates logical blocks for readability)
+// Line 6: const dictionaries: Record<Locale, TranslationDict> = { e...
+const dictionaries: Record<Locale, TranslationDict> = { en, sv, ur };
+// (blank line — separates logical blocks for readability)
+// Function declaration — reusable logic in this file
+function resolve(obj: TranslationDict, path: string): string {
+  // Line 9: const keys = path.split('.');
+  const keys = path.split('.');
+  // Line 10: let current: string | TranslationDict = obj;
+  let current: string | TranslationDict = obj;
+// (blank line — separates logical blocks for readability)
+  // Line 12: for (const key of keys) {
+  for (const key of keys) {
+    // Conditional branch — different behavior based on runtime value
+    if (typeof current !== 'object' || current === null || !(key in current)) {
+      // Return value from function
+      return path;
+    // Closing brace — end of block (function, if, object, JSX)
+    }
+    // Line 16: current = current[key];
+    current = current[key];
+  // Closing brace — end of block (function, if, object, JSX)
+  }
+// (blank line — separates logical blocks for readability)
+  // Return value from function
+  return typeof current === 'string' ? current : path;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function createTranslator(locale: Locale) {
+  // Line 23: const dict = dictionaries[locale] ?? dictionaries.en;
+  const dict = dictionaries[locale] ?? dictionaries.en;
+// (blank line — separates logical blocks for readability)
+  // Return value from function
+  return function t(path: string, params?: Record<string, string | number>): string {
+    // Line 26: let text = resolve(dict, path);
+    let text = resolve(dict, path);
+// (blank line — separates logical blocks for readability)
+    // Conditional branch — different behavior based on runtime value
+    if (params) {
+      // Line 29: Object.entries(params).forEach(([key, value]) => {
+      Object.entries(params).forEach(([key, value]) => {
+        // Line 30: text = text.replace(new RegExp(`\\{${key}\\}`, 'g'), Stri...
+        text = text.replace(new RegExp(`\\{${key}\\}`, 'g'), String(value));
+      // Closing brace — end of block (function, if, object, JSX)
+      });
+    // Closing brace — end of block (function, if, object, JSX)
+    }
+// (blank line — separates logical blocks for readability)
+    // Return value from function
+    return text;
+  // Closing brace — end of block (function, if, object, JSX)
+  };
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function isRtl(locale: Locale): boolean {
+  // Return value from function
+  return locale === 'ur';
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function getHtmlLang(locale: Locale): string {
+  // Line 43: const map: Record<Locale, string> = { en: 'en', sv: 'sv',...
+  const map: Record<Locale, string> = { en: 'en', sv: 'sv', ur: 'ur' };
+  // Return value from function
+  return map[locale];
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/i18n/locales/en.annotated.ts b/docs/annotated/src/i18n/locales/en.annotated.ts
new file mode 100644
index 0000000..57248d5
--- /dev/null
+++ b/docs/annotated/src/i18n/locales/en.annotated.ts
@@ -0,0 +1,934 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/i18n/locales/en.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Import external package or local module
+import { TranslationDict } from '../types';
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const en: TranslationDict = {
+  // Line 4: site: {
+  site: {
+    // Property or array item — trailing comma allowed in TypeScript
+    name: 'Kött Gård',
+    // Property or array item — trailing comma allowed in TypeScript
+    tagline: 'Premium Halal',
+    // Line 7: description:
+    description:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Premium 100% Halal meat delivery. Fresh and frozen chicken, beef, lamb, and fish — customized to your preference and delivered to your door.',
+    // Property or array item — trailing comma allowed in TypeScript
+    metaTitle: 'Premium Halal Meat Delivery',
+    // Property or array item — trailing comma allowed in TypeScript
+    initials: 'KG',
+    // Property or array item — trailing comma allowed in TypeScript
+    email: 'hello@kottgard.se',
+    // Property or array item — trailing comma allowed in TypeScript
+    demoEmail: 'demo@kottgard.se',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 14: nav: {
+  nav: {
+    // Property or array item — trailing comma allowed in TypeScript
+    shop: 'Shop',
+    // Property or array item — trailing comma allowed in TypeScript
+    chicken: 'Chicken',
+    // Property or array item — trailing comma allowed in TypeScript
+    beef: 'Beef',
+    // Property or array item — trailing comma allowed in TypeScript
+    lamb: 'Lamb',
+    // Property or array item — trailing comma allowed in TypeScript
+    fish: 'Fish',
+    // Property or array item — trailing comma allowed in TypeScript
+    about: 'About Us',
+    // Property or array item — trailing comma allowed in TypeScript
+    halalCert: 'Halal Certification',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery: 'Delivery Info',
+    // Property or array item — trailing comma allowed in TypeScript
+    contact: 'Contact',
+    // Property or array item — trailing comma allowed in TypeScript
+    myAccount: 'My Account',
+    // Property or array item — trailing comma allowed in TypeScript
+    orderHistory: 'Order History',
+    // Property or array item — trailing comma allowed in TypeScript
+    wishlist: 'Wishlist',
+    // Property or array item — trailing comma allowed in TypeScript
+    cart: 'Cart',
+    // Property or array item — trailing comma allowed in TypeScript
+    privacy: 'Privacy Policy',
+    // Property or array item — trailing comma allowed in TypeScript
+    terms: 'Terms of Service',
+    // Property or array item — trailing comma allowed in TypeScript
+    searchProducts: 'Search products',
+    // Property or array item — trailing comma allowed in TypeScript
+    toggleMenu: 'Toggle menu',
+    // Property or array item — trailing comma allowed in TypeScript
+    account: 'Account',
+    // Property or array item — trailing comma allowed in TypeScript
+    language: 'Language',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 35: languageBanner: {
+  languageBanner: {
+    // Property or array item — trailing comma allowed in TypeScript
+    choose: 'Choose your language',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 38: hero: {
+  hero: {
+    // Property or array item — trailing comma allowed in TypeScript
+    badge: '100% Halal Certified',
+    // Property or array item — trailing comma allowed in TypeScript
+    taglineShort: 'Naturally Pure',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Premium Halal Meat',
+    // Property or array item — trailing comma allowed in TypeScript
+    titleHighlight: '',
+    // Property or array item — trailing comma allowed in TypeScript
+    titleEnd: '',
+    // Property or array item — trailing comma allowed in TypeScript
+    subtitleShort: 'Fresh. Quality. Reliable.',
+    // Translated UI string for current language (sv / en / ur)
+    subtitle:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Halal certified · Fresh daily · Home delivery · Open every day',
+    // Property or array item — trailing comma allowed in TypeScript
+    hours: 'Open every day {hours}',
+    // Property or array item — trailing comma allowed in TypeScript
+    location: 'Tingvallavägen 11, Märsta',
+    // Property or array item — trailing comma allowed in TypeScript
+    shopNow: 'Browse Our Selection',
+    // Property or array item — trailing comma allowed in TypeScript
+    browseChicken: 'Browse Chicken',
+    // Property or array item — trailing comma allowed in TypeScript
+    whatsapp: 'Order via WhatsApp',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 53: aboutPreview: {
+  aboutPreview: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'About Us',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: "Märsta's Finest Butcher Shop",
+    // Property or array item — trailing comma allowed in TypeScript
+    p1: 'Kött Gård is more than a butcher shop — we are a promise of quality. All our meat is 100% Halal certified and delivered fresh every day.',
+    // Property or array item — trailing comma allowed in TypeScript
+    p2: 'We source lamb from Ireland and New Zealand, chicken and beef from reputable producers, and help you find the right cut for dinner, celebrations, or Sunday roast.',
+    // Property or array item — trailing comma allowed in TypeScript
+    p3: 'Visit us at Tingvallavägen, tell us what you are looking for — we cut and pack to your specifications.',
+    // Property or array item — trailing comma allowed in TypeScript
+    statHalal: '100%',
+    // Property or array item — trailing comma allowed in TypeScript
+    statHalalLabel: 'Halal certified',
+    // Property or array item — trailing comma allowed in TypeScript
+    statDays: '7 days',
+    // Property or array item — trailing comma allowed in TypeScript
+    statDaysLabel: 'Open weekly',
+    // Property or array item — trailing comma allowed in TypeScript
+    statDelivery: 'Daily',
+    // Property or array item — trailing comma allowed in TypeScript
+    statDeliveryLabel: 'Delivery',
+    // Property or array item — trailing comma allowed in TypeScript
+    statFresh: 'Fresh',
+    // Property or array item — trailing comma allowed in TypeScript
+    statFreshLabel: 'Every day',
+    // Property or array item — trailing comma allowed in TypeScript
+    readMore: 'Read more about us',
+    // Property or array item — trailing comma allowed in TypeScript
+    imageAlt: 'Fresh meat cuts on a cutting board from Kött Gård',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 70: trust: {
+  trust: {
+    // Property or array item — trailing comma allowed in TypeScript
+    halal: '100% Halal',
+    // Property or array item — trailing comma allowed in TypeScript
+    halalDesc: 'Certified halal sourcing with full traceability and compliance.',
+    // Property or array item — trailing comma allowed in TypeScript
+    fresh: 'Fresh Daily',
+    // Property or array item — trailing comma allowed in TypeScript
+    freshDesc: 'Sourced fresh every morning and delivered at peak quality.',
+    // Property or array item — trailing comma allowed in TypeScript
+    premium: 'Premium Quality',
+    // Property or array item — trailing comma allowed in TypeScript
+    premiumDesc: 'Hand-selected cuts from trusted farms, prepared by expert butchers.',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 78: categories: {
+  categories: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Our Selection',
+    // Property or array item — trailing comma allowed in TypeScript
+    subtitle: 'Hand-picked meat — every day. Fresh delivery. Halal. Cut to order.',
+    // Property or array item — trailing comma allowed in TypeScript
+    shop: 'Shop {name}',
+    // Line 82: chicken: {
+    chicken: {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Chicken',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Breast fillet, wings, drumsticks and whole chicken. Fresh every morning.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 86: beef: {
+    beef: {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Beef & Veal',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Mince, bone marrow and premium cuts. High marbling, consistent quality.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 90: lamb: {
+    lamb: {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Lamb',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Shoulder, neck, roast and rack. From Ireland and New Zealand.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 94: fish: {
+    fish: {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Fish',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Fresh catch, cleaned and ready to cook.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 99: featured: {
+  featured: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'Curated Selection',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Featured Products',
+    // Property or array item — trailing comma allowed in TypeScript
+    subtitle: 'Our most popular cuts, loved by families across the city.',
+    // Property or array item — trailing comma allowed in TypeScript
+    viewAll: 'View All',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 105: howItWorks: {
+  howItWorks: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'Order',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'How easy it is to order',
+    // Property or array item — trailing comma allowed in TypeScript
+    step1Title: 'Contact us',
+    // Line 109: step1Desc:
+    step1Desc:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Send us a WhatsApp message with what you want — we reply quickly.',
+    // Property or array item — trailing comma allowed in TypeScript
+    step2Title: 'We confirm',
+    // Line 112: step2Desc:
+    step2Desc:
+      // Property or array item — trailing comma allowed in TypeScript
+      'We confirm your order, give you the price, and tell you when it is ready.',
+    // Property or array item — trailing comma allowed in TypeScript
+    step3Title: 'Pick up or delivery',
+    // Line 115: step3Desc:
+    step3Desc:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Pick up in store at Tingvallavägen 11 or choose home delivery.',
+    // Property or array item — trailing comma allowed in TypeScript
+    step: 'Step {n}',
+    // Property or array item — trailing comma allowed in TypeScript
+    whatsapp: 'Order on WhatsApp',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 120: offers: {
+  offers: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'Order',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Weekly offers',
+    // Translated UI string for current language (sv / en / ur)
+    subtitle:
+      // Property or array item — trailing comma allowed in TypeScript
+      'We update regularly with fresh deals. Follow us on social media for the latest prices.',
+    // Property or array item — trailing comma allowed in TypeScript
+    disclaimer: 'Price valid while supplies last',
+    // Property or array item — trailing comma allowed in TypeScript
+    was: 'Was',
+    // Property or array item — trailing comma allowed in TypeScript
+    now: 'NOW',
+    // Property or array item — trailing comma allowed in TypeScript
+    order: 'Order',
+    // Property or array item — trailing comma allowed in TypeScript
+    viewProduct: 'View product',
+    // Line 130: badge: {
+    badge: {
+      // Property or array item — trailing comma allowed in TypeScript
+      fresh: 'FRESH',
+      // Property or array item — trailing comma allowed in TypeScript
+      halal: 'HALAL',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 134: items: {
+    items: {
+      // Property or array item — trailing comma allowed in TypeScript
+      chickenWings: { name: 'Fresh chicken wings PL' },
+      // Property or array item — trailing comma allowed in TypeScript
+      lambSteak: { name: 'Fresh lamb roast Ireland' },
+      // Property or array item — trailing comma allowed in TypeScript
+      beefMince: { name: 'Beef mince 5% fat IRL' },
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 140: social: {
+  social: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'Follow us',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Follow us',
+    // Translated UI string for current language (sv / en / ur)
+    subtitle:
+      // Property or array item — trailing comma allowed in TypeScript
+      '1,100+ followers on Facebook · 249 posts · Daily updates',
+    // Property or array item — trailing comma allowed in TypeScript
+    facebook: 'Facebook',
+    // Property or array item — trailing comma allowed in TypeScript
+    instagram: 'Instagram',
+    // Property or array item — trailing comma allowed in TypeScript
+    whatsapp: 'WhatsApp',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 149: contact: {
+  contact: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'Contact',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Visit us',
+    // Property or array item — trailing comma allowed in TypeScript
+    addressLabel: 'Address',
+    // Property or array item — trailing comma allowed in TypeScript
+    phoneLabel: 'Phone',
+    // Property or array item — trailing comma allowed in TypeScript
+    hoursLabel: 'Opening hours',
+    // Property or array item — trailing comma allowed in TypeScript
+    hoursValue: 'Every day: {hours}',
+    // Property or array item — trailing comma allowed in TypeScript
+    writeUs: 'Message us',
+    // Property or array item — trailing comma allowed in TypeScript
+    callUs: 'Call us',
+    // Property or array item — trailing comma allowed in TypeScript
+    openMaps: 'Open in Google Maps',
+    // Property or array item — trailing comma allowed in TypeScript
+    learnMore: 'Contact details',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 161: cta: {
+  cta: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Ready for Premium Halal Meat?',
+    // Translated UI string for current language (sv / en / ur)
+    subtitle:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Order today and experience the difference of truly fresh, customized halal meat delivered to your doorstep.',
+    // Property or array item — trailing comma allowed in TypeScript
+    button: 'Browse Our Selection',
+    // Property or array item — trailing comma allowed in TypeScript
+    whatsapp: 'Order on WhatsApp',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 168: shop: {
+  shop: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Shop All Products',
+    // Property or array item — trailing comma allowed in TypeScript
+    subtitle: 'Premium halal meat, customized to your preference',
+    // Property or array item — trailing comma allowed in TypeScript
+    noProducts: 'No products found',
+    // Property or array item — trailing comma allowed in TypeScript
+    noProductsHint: 'Try adjusting your filters or search query',
+    // Property or array item — trailing comma allowed in TypeScript
+    filters: 'Filters',
+    // Property or array item — trailing comma allowed in TypeScript
+    productsFound: '{count} products found',
+    // Property or array item — trailing comma allowed in TypeScript
+    search: 'Search',
+    // Property or array item — trailing comma allowed in TypeScript
+    searchPlaceholder: 'Search products...',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'Category',
+    // Property or array item — trailing comma allowed in TypeScript
+    sortBy: 'Sort By',
+    // Property or array item — trailing comma allowed in TypeScript
+    all: 'All',
+    // Property or array item — trailing comma allowed in TypeScript
+    sortFeatured: 'Featured',
+    // Property or array item — trailing comma allowed in TypeScript
+    sortPriceAsc: 'Price: Low to High',
+    // Property or array item — trailing comma allowed in TypeScript
+    sortPriceDesc: 'Price: High to Low',
+    // Property or array item — trailing comma allowed in TypeScript
+    sortName: 'Name A–Z',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 185: product: {
+  product: {
+    // Property or array item — trailing comma allowed in TypeScript
+    backToShop: 'Back to Shop',
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: 'In Stock',
+    // Property or array item — trailing comma allowed in TypeScript
+    outOfStock: 'Out of Stock',
+    // Property or array item — trailing comma allowed in TypeScript
+    halalTrust: '100% Halal certified · Fresh daily · Premium quality',
+    // Property or array item — trailing comma allowed in TypeScript
+    yourSelection: 'Your selection',
+    // Property or array item — trailing comma allowed in TypeScript
+    aboutProduct: 'About This Product',
+    // Property or array item — trailing comma allowed in TypeScript
+    addToCart: 'Add to Cart',
+    // Property or array item — trailing comma allowed in TypeScript
+    addedToCart: 'Added to Cart',
+    // Property or array item — trailing comma allowed in TypeScript
+    decreaseQty: 'Decrease quantity',
+    // Property or array item — trailing comma allowed in TypeScript
+    increaseQty: 'Increase quantity',
+    // Property or array item — trailing comma allowed in TypeScript
+    removeWishlist: 'Remove from wishlist',
+    // Property or array item — trailing comma allowed in TypeScript
+    addWishlist: 'Add to wishlist',
+    // Property or array item — trailing comma allowed in TypeScript
+    viewProduct: 'View {name}',
+    // Property or array item — trailing comma allowed in TypeScript
+    pieces: '{count} pieces',
+    // Property or array item — trailing comma allowed in TypeScript
+    standardCut: 'Standard cut',
+    // Property or array item — trailing comma allowed in TypeScript
+    howManyCuts: 'How Many Cuts Do You Want?',
+    // Property or array item — trailing comma allowed in TypeScript
+    howManyCutsHint: 'Select the number of cuts for your order',
+    // Property or array item — trailing comma allowed in TypeScript
+    cutsAndStyle: '{cuts} cuts · {style}',
+    // Property or array item — trailing comma allowed in TypeScript
+    selectCutting: 'Select Cutting Style',
+    // Property or array item — trailing comma allowed in TypeScript
+    selectCuttingHint: 'Our butchers will prepare your {category} exactly to your preferred cut',
+    // Line 206: fishNote:
+    fishNote:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Fish products are prepared with our standard professional cut — cleaned, scaled, and ready to cook.',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 209: cutting: {
+  cutting: {
+    // Property or array item — trailing comma allowed in TypeScript
+    nihari: 'Nihari cut',
+    // Property or array item — trailing comma allowed in TypeScript
+    karahi: 'Karahi cut',
+    // Property or array item — trailing comma allowed in TypeScript
+    qeema: 'Qeema (minced)',
+    // Property or array item — trailing comma allowed in TypeScript
+    boneless: 'Boneless',
+    // Property or array item — trailing comma allowed in TypeScript
+    steak: 'Steak cut',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 216: priceUnit: {
+  priceUnit: {
+    // Property or array item — trailing comma allowed in TypeScript
+    perBird: 'per bird',
+    // Property or array item — trailing comma allowed in TypeScript
+    perPack: 'per pack',
+    // Property or array item — trailing comma allowed in TypeScript
+    perKg: 'per kg',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 221: badges: {
+  badges: {
+    // Property or array item — trailing comma allowed in TypeScript
+    bestseller: 'Bestseller',
+    // Property or array item — trailing comma allowed in TypeScript
+    chefsPick: "Chef's Pick",
+    // Property or array item — trailing comma allowed in TypeScript
+    premium: 'Premium',
+    // Property or array item — trailing comma allowed in TypeScript
+    popular: 'Popular',
+    // Property or array item — trailing comma allowed in TypeScript
+    freshCatch: 'Fresh Catch',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 228: products: {
+  products: {
+    // Line 229: 'chicken-whole': {
+    'chicken-whole': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Whole Chicken',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Farm-fresh whole halal chicken, perfect for roasting or curry.',
+      // Line 232: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Our whole chickens are sourced from certified halal farms and delivered at peak freshness. Each bird is hand-selected for quality, with tender meat and clean processing. Choose your preferred piece count and we will prepare it exactly how you need.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 235: 'chicken-breast': {
+    'chicken-breast': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Chicken Breast',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Lean, boneless chicken breast — ideal for grilling and healthy meals.',
+      // Line 238: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Premium boneless chicken breast, trimmed and ready to cook. Perfect for kebabs, stir-fries, and healthy weeknight dinners. Select your piece count and enjoy consistent quality every time.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 241: 'chicken-thighs': {
+    'chicken-thighs': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Chicken Thighs',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Juicy halal chicken thighs with rich flavor for curries and grills.',
+      // Line 244: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Our chicken thighs are known for their succulence and depth of flavor. Whether you are making a traditional karahi or a weekend BBQ, these thighs deliver every time.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 247: 'chicken-wings': {
+    'chicken-wings': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Chicken Wings',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Party-ready halal chicken wings for frying, baking, or grilling.',
+      // Line 250: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Crispy, flavorful chicken wings prepared halal and delivered fresh. A crowd favorite for game nights and family gatherings.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 253: 'beef-nihari': {
+    'beef-nihari': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Beef for Nihari',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Slow-cook ready beef cuts, perfect for traditional nihari.',
+      // Line 256: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Specially selected beef cuts ideal for slow-cooked nihari. Rich in collagen and flavor, these cuts break down beautifully over hours of simmering for an authentic, melt-in-your-mouth experience.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 259: 'beef-steak': {
+    'beef-steak': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Premium Beef Steak',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Restaurant-quality halal steak cuts for the perfect sear.',
+      // Line 262: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Hand-cut premium beef steaks from the finest halal sources. Marbled, tender, and ready for your grill or cast-iron pan. Choose your preferred cutting style.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 265: 'beef-mince': {
+    'beef-mince': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Beef Mince',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Fresh halal beef mince for kebabs, burgers, and qeema.',
+      // Line 268: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Finely ground halal beef mince with the perfect fat ratio for juicy kebabs, flavorful qeema, and homemade burgers. Ground fresh daily.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 271: 'beef-boneless': {
+    'beef-boneless': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Boneless Beef Cubes',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Versatile boneless beef cubes for karahi, biryani, and stews.',
+      // Line 274: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Uniform boneless beef cubes cut to perfection for quick-cooking dishes. Ideal for karahi, pulao, and stir-fries where consistent sizing matters.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 277: 'lamb-shoulder': {
+    'lamb-shoulder': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Lamb Shoulder',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Rich, flavorful lamb shoulder for slow roasts and curries.',
+      // Line 280: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Premium halal lamb shoulder with beautiful marbling. Perfect for slow-roasted feasts, hearty curries, and traditional family meals. Customized to your preferred cut.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 283: 'lamb-leg': {
+    'lamb-leg': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Lamb Leg',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Tender lamb leg for roasts, grills, and special occasions.',
+      // Line 286: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Whole or portioned lamb leg from certified halal sources. A centerpiece cut for Eid celebrations, dinner parties, and Sunday roasts.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 289: 'lamb-chops': {
+    'lamb-chops': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Lamb Chops',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Premium lamb chops for grilling and fine dining at home.',
+      // Line 292: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Thick-cut halal lamb chops with perfect fat caps for grilling. Restaurant quality, delivered to your kitchen.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 295: 'lamb-mince': {
+    'lamb-mince': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Lamb Mince',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Fresh halal lamb mince for kebabs, samosas, and qeema.',
+      // Line 298: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Finely ground lamb mince with rich flavor. Essential for seekh kebabs, lamb qeema, and stuffed parathas.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 301: 'fish-salmon': {
+    'fish-salmon': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Atlantic Salmon Fillet',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Buttery salmon fillets, skin-on and ready to pan-sear.',
+      // Line 304: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Premium Atlantic salmon fillets with rich omega-3 content. Cleaned, portioned, and vacuum-sealed for maximum freshness.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 307: 'fish-rohu': {
+    'fish-rohu': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Rohu Fish',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Whole rohu fish, cleaned and scaled — a South Asian favorite.',
+      // Line 310: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Fresh rohu fish, a staple in South Asian cuisine. Cleaned, scaled, and gutted. Perfect for fish curry, fried fish, and traditional recipes.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 313: 'fish-prawns': {
+    'fish-prawns': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Jumbo Prawns',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Large shell-on prawns for grilling, curries, and biryanis.',
+      // Line 316: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Premium jumbo prawns, deveined and ready to cook. Sweet, firm flesh that holds up beautifully in curries and tandoori preparations.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 319: 'fish-basa': {
+    'fish-basa': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Basa Fillet',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Mild, flaky basa fillets — perfect for beginners and kids.',
+      // Line 322: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Boneless basa fillets with a mild, delicate flavor. Easy to cook and versatile — great for fish tacos, baking, and light curries.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 326: cart: {
+  cart: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Your Cart',
+    // Property or array item — trailing comma allowed in TypeScript
+    itemsCount: '{count} item(s) in your cart',
+    // Property or array item — trailing comma allowed in TypeScript
+    empty: 'Your cart is empty',
+    // Property or array item — trailing comma allowed in TypeScript
+    emptyHint: 'Browse our premium halal selection and add items to your cart.',
+    // Property or array item — trailing comma allowed in TypeScript
+    startShopping: 'Start Shopping',
+    // Property or array item — trailing comma allowed in TypeScript
+    customization: 'Customization:',
+    // Property or array item — trailing comma allowed in TypeScript
+    orderSummary: 'Order Summary',
+    // Property or array item — trailing comma allowed in TypeScript
+    subtotal: 'Subtotal',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery: 'Delivery',
+    // Property or array item — trailing comma allowed in TypeScript
+    free: 'Free',
+    // Property or array item — trailing comma allowed in TypeScript
+    freeDeliveryHint: 'Free delivery on orders over 500 kr',
+    // Property or array item — trailing comma allowed in TypeScript
+    total: 'Total',
+    // Property or array item — trailing comma allowed in TypeScript
+    proceedCheckout: 'Proceed to Checkout',
+    // Property or array item — trailing comma allowed in TypeScript
+    continueShopping: 'Continue Shopping',
+    // Property or array item — trailing comma allowed in TypeScript
+    removeItem: 'Remove item',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 343: checkout: {
+  checkout: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Secure Checkout',
+    // Property or array item — trailing comma allowed in TypeScript
+    backToCart: 'Back to Cart',
+    // Property or array item — trailing comma allowed in TypeScript
+    noItems: 'No items to checkout',
+    // Property or array item — trailing comma allowed in TypeScript
+    goToShop: 'Go to Shop',
+    // Property or array item — trailing comma allowed in TypeScript
+    orderConfirmed: 'Order Confirmed!',
+    // Property or array item — trailing comma allowed in TypeScript
+    thankYou: 'Thank you for your order. Your premium halal meat is being prepared.',
+    // Property or array item — trailing comma allowed in TypeScript
+    orderId: 'Order ID: {id}',
+    // Property or array item — trailing comma allowed in TypeScript
+    viewOrders: 'View Orders',
+    // Property or array item — trailing comma allowed in TypeScript
+    haveAccount: 'Have an account?',
+    // Property or array item — trailing comma allowed in TypeScript
+    signIn: 'Sign in',
+    // Property or array item — trailing comma allowed in TypeScript
+    fasterCheckout: 'for faster checkout.',
+    // Property or array item — trailing comma allowed in TypeScript
+    deliveryDetails: 'Delivery Details',
+    // Property or array item — trailing comma allowed in TypeScript
+    fullName: 'Full Name',
+    // Property or array item — trailing comma allowed in TypeScript
+    email: 'Email',
+    // Property or array item — trailing comma allowed in TypeScript
+    phone: 'Phone',
+    // Property or array item — trailing comma allowed in TypeScript
+    street: 'Street Address',
+    // Property or array item — trailing comma allowed in TypeScript
+    city: 'City',
+    // Property or array item — trailing comma allowed in TypeScript
+    state: 'State',
+    // Property or array item — trailing comma allowed in TypeScript
+    zip: 'ZIP Code',
+    // Property or array item — trailing comma allowed in TypeScript
+    payment: 'Payment',
+    // Property or array item — trailing comma allowed in TypeScript
+    creditCard: 'Credit Card',
+    // Property or array item — trailing comma allowed in TypeScript
+    cashOnDelivery: 'Cash on Delivery',
+    // Property or array item — trailing comma allowed in TypeScript
+    cardNumber: 'Card Number',
+    // Property or array item — trailing comma allowed in TypeScript
+    expiry: 'Expiry',
+    // Property or array item — trailing comma allowed in TypeScript
+    cvv: 'CVV',
+    // Property or array item — trailing comma allowed in TypeScript
+    qty: 'Qty: {count}',
+    // Property or array item — trailing comma allowed in TypeScript
+    processing: 'Processing...',
+    // Property or array item — trailing comma allowed in TypeScript
+    pay: 'Pay {amount}',
+    // Property or array item — trailing comma allowed in TypeScript
+    secure: 'Secure 256-bit SSL encryption',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 374: auth: {
+  auth: {
+    // Property or array item — trailing comma allowed in TypeScript
+    welcomeBack: 'Welcome Back',
+    // Property or array item — trailing comma allowed in TypeScript
+    createAccount: 'Create Account',
+    // Property or array item — trailing comma allowed in TypeScript
+    joinTagline: 'Join {name} for a premium shopping experience',
+    // Property or array item — trailing comma allowed in TypeScript
+    signInTagline: 'Sign in to your {name} account',
+    // Property or array item — trailing comma allowed in TypeScript
+    fullName: 'Full Name',
+    // Property or array item — trailing comma allowed in TypeScript
+    email: 'Email',
+    // Property or array item — trailing comma allowed in TypeScript
+    password: 'Password',
+    // Property or array item — trailing comma allowed in TypeScript
+    phone: 'Phone',
+    // Property or array item — trailing comma allowed in TypeScript
+    street: 'Street Address',
+    // Property or array item — trailing comma allowed in TypeScript
+    city: 'City',
+    // Property or array item — trailing comma allowed in TypeScript
+    state: 'State',
+    // Property or array item — trailing comma allowed in TypeScript
+    zip: 'ZIP Code',
+    // Property or array item — trailing comma allowed in TypeScript
+    signIn: 'Sign In',
+    // Property or array item — trailing comma allowed in TypeScript
+    register: 'Create Account',
+    // Property or array item — trailing comma allowed in TypeScript
+    hasAccount: 'Already have an account? Sign in',
+    // Property or array item — trailing comma allowed in TypeScript
+    noAccount: "Don't have an account? Register",
+    // Property or array item — trailing comma allowed in TypeScript
+    invalidCredentials: 'Invalid email or password. Try {email} / demo123',
+    // Property or array item — trailing comma allowed in TypeScript
+    demo: 'Demo: {email} / demo123',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 394: account: {
+  account: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'My Account',
+    // Property or array item — trailing comma allowed in TypeScript
+    welcome: 'Welcome back, {name}',
+    // Property or array item — trailing comma allowed in TypeScript
+    memberSince: 'Member since {date}',
+    // Property or array item — trailing comma allowed in TypeScript
+    myWishlist: 'My Wishlist',
+    // Property or array item — trailing comma allowed in TypeScript
+    signOut: 'Sign Out',
+    // Property or array item — trailing comma allowed in TypeScript
+    orderHistory: 'Order History',
+    // Property or array item — trailing comma allowed in TypeScript
+    noOrders: 'No orders yet',
+    // Property or array item — trailing comma allowed in TypeScript
+    startShopping: 'Start Shopping',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 404: wishlist: {
+  wishlist: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'My Wishlist',
+    // Property or array item — trailing comma allowed in TypeScript
+    saved: '{count} saved item(s)',
+    // Property or array item — trailing comma allowed in TypeScript
+    empty: 'Your wishlist is empty',
+    // Property or array item — trailing comma allowed in TypeScript
+    emptyHint: 'Save your favorite products to buy them later.',
+    // Property or array item — trailing comma allowed in TypeScript
+    browse: 'Browse Products',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 411: about: {
+  about: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'About {name}',
+    // Translated UI string for current language (sv / en / ur)
+    subtitle:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Bringing premium, 100% Halal meat to your table — fresh, customized, and delivered with care.',
+    // Property or array item — trailing comma allowed in TypeScript
+    ourStory: 'Our Story',
+    // Line 416: storyP1:
+    storyP1:
+      // Property or array item — trailing comma allowed in TypeScript
+      '{name} was founded with a simple mission: make premium halal meat accessible to every family, without compromising on quality, freshness, or religious compliance. We understand that for many households, the right cut prepared the right way is not a luxury — it is essential.',
+    // Line 418: storyP2:
+    storyP2:
+      // Property or array item — trailing comma allowed in TypeScript
+      'From selecting piece counts for chicken to choosing Nihari or Karahi cuts for beef and lamb, we put customization at the heart of every order. Our expert butchers prepare each order by hand, and our temperature-controlled delivery ensures your meat arrives as fresh as the day it was cut.',
+    // Property or array item — trailing comma allowed in TypeScript
+    halalTitle: 'Halal Certification',
+    // Line 421: halalDesc:
+    halalDesc:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Every product at {name} is sourced from certified halal suppliers. Our supply chain is fully traceable, and we maintain strict compliance with halal slaughter and processing standards. We work exclusively with farms and processors that share our commitment to ethical, religiously compliant meat production.',
+    // Property or array item — trailing comma allowed in TypeScript
+    freshDaily: 'Fresh Daily',
+    // Property or array item — trailing comma allowed in TypeScript
+    freshDailyDesc: 'Sourced every morning from trusted farms',
+    // Property or array item — trailing comma allowed in TypeScript
+    premiumQuality: 'Premium Quality',
+    // Property or array item — trailing comma allowed in TypeScript
+    premiumQualityDesc: 'Hand-selected cuts by expert butchers',
+    // Property or array item — trailing comma allowed in TypeScript
+    fastDelivery: 'Fast Delivery',
+    // Property or array item — trailing comma allowed in TypeScript
+    fastDeliveryDesc: 'Temperature-controlled same-day delivery',
+    // Property or array item — trailing comma allowed in TypeScript
+    deliveryTitle: 'Delivery Information',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery1: 'We deliver within a 25-mile radius of our processing facility.',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery2: 'Orders placed before 2 PM are eligible for same-day delivery.',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery3: 'Free delivery on orders over 500 kr. Standard delivery fee: 49 kr.',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery4: 'All products are vacuum-sealed and transported in insulated packaging.',
+    // Property or array item — trailing comma allowed in TypeScript
+    contactTitle: 'Contact Us',
+    // Property or array item — trailing comma allowed in TypeScript
+    address: 'Tingvallavägen 11, 195 31 Märsta',
+    // Property or array item — trailing comma allowed in TypeScript
+    privacyTitle: 'Privacy Policy',
+    // Line 437: privacyText:
+    privacyText:
+      // Property or array item — trailing comma allowed in TypeScript
+      'We collect only the information needed to process your orders and improve our service — name, contact details, and delivery address. We do not sell your data to third parties. Payment details are handled securely by our payment partners.',
+    // Property or array item — trailing comma allowed in TypeScript
+    termsTitle: 'Terms of Service',
+    // Line 440: termsText:
+    termsText:
+      // Property or array item — trailing comma allowed in TypeScript
+      'All prices are shown in SEK and may change without notice. Orders are subject to availability. Halal certification applies to all meat products listed. Delivery times are estimates and may vary during peak periods.',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 443: footer: {
+  footer: {
+    // Line 444: tagline:
+    tagline:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Premium 100% Halal meat delivery. Fresh, customized cuts delivered to your door with uncompromising quality.',
+    // Property or array item — trailing comma allowed in TypeScript
+    shop: 'Shop',
+    // Property or array item — trailing comma allowed in TypeScript
+    company: 'Company',
+    // Property or array item — trailing comma allowed in TypeScript
+    contact: 'Contact',
+    // Property or array item — trailing comma allowed in TypeScript
+    rights: 'All rights reserved.',
+    // Property or array item — trailing comma allowed in TypeScript
+    phone: '072-585 50 50',
+    // Property or array item — trailing comma allowed in TypeScript
+    hours: 'Open every day {hours}',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 453: notFound: {
+  notFound: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: '404',
+    // Property or array item — trailing comma allowed in TypeScript
+    message: 'Page not found',
+    // Property or array item — trailing comma allowed in TypeScript
+    goHome: 'Go Home',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 458: orderStatus: {
+  orderStatus: {
+    // Property or array item — trailing comma allowed in TypeScript
+    pending: 'pending',
+    // Property or array item — trailing comma allowed in TypeScript
+    confirmed: 'confirmed',
+    // Property or array item — trailing comma allowed in TypeScript
+    preparing: 'preparing',
+    // Property or array item — trailing comma allowed in TypeScript
+    'out-for-delivery': 'out for delivery',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivered: 'delivered',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+// Closing brace — end of block (function, if, object, JSX)
+};
diff --git a/docs/annotated/src/i18n/locales/sv.annotated.ts b/docs/annotated/src/i18n/locales/sv.annotated.ts
new file mode 100644
index 0000000..b4b824a
--- /dev/null
+++ b/docs/annotated/src/i18n/locales/sv.annotated.ts
@@ -0,0 +1,934 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/i18n/locales/sv.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Import external package or local module
+import { TranslationDict } from '../types';
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const sv: TranslationDict = {
+  // Line 4: site: {
+  site: {
+    // Property or array item — trailing comma allowed in TypeScript
+    name: 'Kött Gård',
+    // Property or array item — trailing comma allowed in TypeScript
+    tagline: 'Premium Halal',
+    // Line 7: description:
+    description:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Premium 100 % halal köttleverans. Färskt och fryst kyckling, nötkött, lamm och fisk — anpassat efter dina önskemål och levererat till din dörr.',
+    // Property or array item — trailing comma allowed in TypeScript
+    metaTitle: 'Premium Halal Köttleverans',
+    // Property or array item — trailing comma allowed in TypeScript
+    initials: 'KG',
+    // Property or array item — trailing comma allowed in TypeScript
+    email: 'hello@kottgard.se',
+    // Property or array item — trailing comma allowed in TypeScript
+    demoEmail: 'demo@kottgard.se',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 14: nav: {
+  nav: {
+    // Property or array item — trailing comma allowed in TypeScript
+    shop: 'Butik',
+    // Property or array item — trailing comma allowed in TypeScript
+    chicken: 'Kyckling',
+    // Property or array item — trailing comma allowed in TypeScript
+    beef: 'Nötkött',
+    // Property or array item — trailing comma allowed in TypeScript
+    lamb: 'Lamm',
+    // Property or array item — trailing comma allowed in TypeScript
+    fish: 'Fisk',
+    // Property or array item — trailing comma allowed in TypeScript
+    about: 'Om oss',
+    // Property or array item — trailing comma allowed in TypeScript
+    halalCert: 'Halalcertifiering',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery: 'Leveransinfo',
+    // Property or array item — trailing comma allowed in TypeScript
+    contact: 'Kontakt',
+    // Property or array item — trailing comma allowed in TypeScript
+    myAccount: 'Mitt konto',
+    // Property or array item — trailing comma allowed in TypeScript
+    orderHistory: 'Orderhistorik',
+    // Property or array item — trailing comma allowed in TypeScript
+    wishlist: 'Önskelista',
+    // Property or array item — trailing comma allowed in TypeScript
+    cart: 'Varukorg',
+    // Property or array item — trailing comma allowed in TypeScript
+    privacy: 'Integritetspolicy',
+    // Property or array item — trailing comma allowed in TypeScript
+    terms: 'Användarvillkor',
+    // Property or array item — trailing comma allowed in TypeScript
+    searchProducts: 'Sök produkter',
+    // Property or array item — trailing comma allowed in TypeScript
+    toggleMenu: 'Växla meny',
+    // Property or array item — trailing comma allowed in TypeScript
+    account: 'Konto',
+    // Property or array item — trailing comma allowed in TypeScript
+    language: 'Språk',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 35: languageBanner: {
+  languageBanner: {
+    // Property or array item — trailing comma allowed in TypeScript
+    choose: 'Välj språk',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 38: hero: {
+  hero: {
+    // Property or array item — trailing comma allowed in TypeScript
+    badge: '100 % Halal-certifierat',
+    // Property or array item — trailing comma allowed in TypeScript
+    taglineShort: 'Naturligt Rent',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Premium Halal Kött',
+    // Property or array item — trailing comma allowed in TypeScript
+    titleHighlight: '',
+    // Property or array item — trailing comma allowed in TypeScript
+    titleEnd: '',
+    // Property or array item — trailing comma allowed in TypeScript
+    subtitleShort: 'Färskt. Kvalitet. Tillförlitligt.',
+    // Translated UI string for current language (sv / en / ur)
+    subtitle:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Halal-certifierat · Färskt dagligen · Hemleverans · Öppet alla dagar',
+    // Property or array item — trailing comma allowed in TypeScript
+    hours: 'Öppet alla dagar {hours}',
+    // Property or array item — trailing comma allowed in TypeScript
+    location: 'Tingvallavägen 11, Märsta',
+    // Property or array item — trailing comma allowed in TypeScript
+    shopNow: 'Se vårt sortiment',
+    // Property or array item — trailing comma allowed in TypeScript
+    browseChicken: 'Bläddra kyckling',
+    // Property or array item — trailing comma allowed in TypeScript
+    whatsapp: 'Beställ via WhatsApp',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 53: aboutPreview: {
+  aboutPreview: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'Om oss',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Märstas finaste köttbutik',
+    // Property or array item — trailing comma allowed in TypeScript
+    p1: 'Kött Gård är mer än en köttbutik — vi är ett löfte om kvalitet. Allt vårt kött är 100 % Halal-certifierat och färskt levererat varje dag.',
+    // Property or array item — trailing comma allowed in TypeScript
+    p2: 'Vi handlar lamm från Irland och Nya Zeeland, kyckling och nötkött från välrenommerade producenter, och hjälper dig hitta rätt detalj för middagen, festen eller söndagssteken.',
+    // Property or array item — trailing comma allowed in TypeScript
+    p3: 'Kom in i butiken på Tingvallavägen, prata med oss om vad du letar efter — vi styckar och packar efter dina önskemål.',
+    // Property or array item — trailing comma allowed in TypeScript
+    statHalal: '100 %',
+    // Property or array item — trailing comma allowed in TypeScript
+    statHalalLabel: 'Halal-certifierat',
+    // Property or array item — trailing comma allowed in TypeScript
+    statDays: '7 dagar',
+    // Property or array item — trailing comma allowed in TypeScript
+    statDaysLabel: 'Öppet i veckan',
+    // Property or array item — trailing comma allowed in TypeScript
+    statDelivery: 'Daglig',
+    // Property or array item — trailing comma allowed in TypeScript
+    statDeliveryLabel: 'Leverans',
+    // Property or array item — trailing comma allowed in TypeScript
+    statFresh: 'Färskt',
+    // Property or array item — trailing comma allowed in TypeScript
+    statFreshLabel: 'Varje dag',
+    // Property or array item — trailing comma allowed in TypeScript
+    readMore: 'Läs mer om oss',
+    // Property or array item — trailing comma allowed in TypeScript
+    imageAlt: 'Färska köttdetaljer på skärbräda från Kött Gård',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 70: trust: {
+  trust: {
+    // Property or array item — trailing comma allowed in TypeScript
+    halal: '100 % Halal',
+    // Property or array item — trailing comma allowed in TypeScript
+    halalDesc: 'Certifierad halal-källa med full spårbarhet och efterlevnad.',
+    // Property or array item — trailing comma allowed in TypeScript
+    fresh: 'Färskt Dagligen',
+    // Property or array item — trailing comma allowed in TypeScript
+    freshDesc: 'Hämtas färskt varje morgon och levereras i toppskick.',
+    // Property or array item — trailing comma allowed in TypeScript
+    premium: 'Premiumkvalitet',
+    // Property or array item — trailing comma allowed in TypeScript
+    premiumDesc: 'Handplockade styckningar från betrodda gårdar, förberedda av expertslaktare.',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 78: categories: {
+  categories: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Vårt sortiment',
+    // Property or array item — trailing comma allowed in TypeScript
+    subtitle: 'Handplockat kött — varje dag. Färskt levererat. Halal. Styckat efter önskemål.',
+    // Property or array item — trailing comma allowed in TypeScript
+    shop: 'Handla {name}',
+    // Line 82: chicken: {
+    chicken: {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Kyckling',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Kycklingbröstfilé, vingar, klubba och hel kyckling. Färsk varje morgon.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 86: beef: {
+    beef: {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Nötkött & Kalv',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Nötfärs, kalv bone marrow och premiumskär. Hög marmorering, jämn kvalitet.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 90: lamb: {
+    lamb: {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Lamm',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Lammbringa, lammhals, lammstek och lammrygg. Från Irland och Nya Zeeland.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 94: fish: {
+    fish: {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Fisk',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Färsk fångst, rengjord och redo att tillagas.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 99: featured: {
+  featured: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'Utvalt Sortiment',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Utvalda Produkter',
+    // Property or array item — trailing comma allowed in TypeScript
+    subtitle: 'Våra mest populära styckningar, älskade av familjer i hela staden.',
+    // Property or array item — trailing comma allowed in TypeScript
+    viewAll: 'Visa alla',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 105: howItWorks: {
+  howItWorks: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'Beställ',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Så enkelt beställer du',
+    // Property or array item — trailing comma allowed in TypeScript
+    step1Title: 'Kontakta oss',
+    // Line 109: step1Desc:
+    step1Desc:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Skicka ett meddelande på WhatsApp med vad du vill ha — vi svarar snabbt.',
+    // Property or array item — trailing comma allowed in TypeScript
+    step2Title: 'Vi bekräftar',
+    // Line 112: step2Desc:
+    step2Desc:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Vi bekräftar din beställning, ger pris och säger när den är klar.',
+    // Property or array item — trailing comma allowed in TypeScript
+    step3Title: 'Hämta eller leverans',
+    // Line 115: step3Desc:
+    step3Desc:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Hämta i butik på Tingvallavägen 11 eller välj hemleverans.',
+    // Property or array item — trailing comma allowed in TypeScript
+    step: 'Steg {n}',
+    // Property or array item — trailing comma allowed in TypeScript
+    whatsapp: 'Beställ på WhatsApp',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 120: offers: {
+  offers: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'Beställ',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Veckans erbjudanden',
+    // Translated UI string for current language (sv / en / ur)
+    subtitle:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Vi uppdaterar löpande med färska erbjudanden. Följ oss på sociala medier för senaste priserna.',
+    // Property or array item — trailing comma allowed in TypeScript
+    disclaimer: 'Pris gäller så långt lagret räcker',
+    // Property or array item — trailing comma allowed in TypeScript
+    was: 'Före',
+    // Property or array item — trailing comma allowed in TypeScript
+    now: 'NU',
+    // Property or array item — trailing comma allowed in TypeScript
+    order: 'Beställ',
+    // Property or array item — trailing comma allowed in TypeScript
+    viewProduct: 'Visa produkt',
+    // Line 130: badge: {
+    badge: {
+      // Property or array item — trailing comma allowed in TypeScript
+      fresh: 'FÄRSK',
+      // Property or array item — trailing comma allowed in TypeScript
+      halal: 'HALAL',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 134: items: {
+    items: {
+      // Property or array item — trailing comma allowed in TypeScript
+      chickenWings: { name: 'Kycklingvingar färsk PL' },
+      // Property or array item — trailing comma allowed in TypeScript
+      lambSteak: { name: 'Lammstek färsk Ireland' },
+      // Property or array item — trailing comma allowed in TypeScript
+      beefMince: { name: 'Nötfärs 5% fett IRL' },
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 140: social: {
+  social: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'Följ oss',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Följ oss',
+    // Translated UI string for current language (sv / en / ur)
+    subtitle:
+      // Property or array item — trailing comma allowed in TypeScript
+      '1 100+ följare på Facebook · 249 inlägg · Dagliga uppdateringar',
+    // Property or array item — trailing comma allowed in TypeScript
+    facebook: 'Facebook',
+    // Property or array item — trailing comma allowed in TypeScript
+    instagram: 'Instagram',
+    // Property or array item — trailing comma allowed in TypeScript
+    whatsapp: 'WhatsApp',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 149: contact: {
+  contact: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'Kontakt',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Besök oss',
+    // Property or array item — trailing comma allowed in TypeScript
+    addressLabel: 'Adress',
+    // Property or array item — trailing comma allowed in TypeScript
+    phoneLabel: 'Telefon',
+    // Property or array item — trailing comma allowed in TypeScript
+    hoursLabel: 'Öppettider',
+    // Property or array item — trailing comma allowed in TypeScript
+    hoursValue: 'Alla dagar: {hours}',
+    // Property or array item — trailing comma allowed in TypeScript
+    writeUs: 'Skriv till oss',
+    // Property or array item — trailing comma allowed in TypeScript
+    callUs: 'Ring oss',
+    // Property or array item — trailing comma allowed in TypeScript
+    openMaps: 'Öppna i Google Maps',
+    // Property or array item — trailing comma allowed in TypeScript
+    learnMore: 'Kontaktuppgifter',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 161: cta: {
+  cta: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Redo för Premium Halal Kött?',
+    // Translated UI string for current language (sv / en / ur)
+    subtitle:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Beställ idag och upplev skillnaden med verkligt färskt, anpassat halal kött levererat till din dörr.',
+    // Property or array item — trailing comma allowed in TypeScript
+    button: 'Se vårt sortiment',
+    // Property or array item — trailing comma allowed in TypeScript
+    whatsapp: 'Beställ på WhatsApp',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 168: shop: {
+  shop: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Alla Produkter',
+    // Property or array item — trailing comma allowed in TypeScript
+    subtitle: 'Premium halal kött, anpassat efter dina önskemål',
+    // Property or array item — trailing comma allowed in TypeScript
+    noProducts: 'Inga produkter hittades',
+    // Property or array item — trailing comma allowed in TypeScript
+    noProductsHint: 'Prova att justera dina filter eller sökfråga',
+    // Property or array item — trailing comma allowed in TypeScript
+    filters: 'Filter',
+    // Property or array item — trailing comma allowed in TypeScript
+    productsFound: '{count} produkter hittades',
+    // Property or array item — trailing comma allowed in TypeScript
+    search: 'Sök',
+    // Property or array item — trailing comma allowed in TypeScript
+    searchPlaceholder: 'Sök produkter...',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'Kategori',
+    // Property or array item — trailing comma allowed in TypeScript
+    sortBy: 'Sortera efter',
+    // Property or array item — trailing comma allowed in TypeScript
+    all: 'Alla',
+    // Property or array item — trailing comma allowed in TypeScript
+    sortFeatured: 'Utvalda',
+    // Property or array item — trailing comma allowed in TypeScript
+    sortPriceAsc: 'Pris: Lägst till högst',
+    // Property or array item — trailing comma allowed in TypeScript
+    sortPriceDesc: 'Pris: Högst till lägst',
+    // Property or array item — trailing comma allowed in TypeScript
+    sortName: 'Namn A–Ö',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 185: product: {
+  product: {
+    // Property or array item — trailing comma allowed in TypeScript
+    backToShop: 'Tillbaka till butiken',
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: 'I lager',
+    // Property or array item — trailing comma allowed in TypeScript
+    outOfStock: 'Slut i lager',
+    // Property or array item — trailing comma allowed in TypeScript
+    halalTrust: '100 % Halal-certifierad · Färskt dagligen · Premiumkvalitet',
+    // Property or array item — trailing comma allowed in TypeScript
+    yourSelection: 'Ditt val',
+    // Property or array item — trailing comma allowed in TypeScript
+    aboutProduct: 'Om denna produkt',
+    // Property or array item — trailing comma allowed in TypeScript
+    addToCart: 'Lägg i varukorg',
+    // Property or array item — trailing comma allowed in TypeScript
+    addedToCart: 'Tillagd i varukorg',
+    // Property or array item — trailing comma allowed in TypeScript
+    decreaseQty: 'Minska antal',
+    // Property or array item — trailing comma allowed in TypeScript
+    increaseQty: 'Öka antal',
+    // Property or array item — trailing comma allowed in TypeScript
+    removeWishlist: 'Ta bort från önskelista',
+    // Property or array item — trailing comma allowed in TypeScript
+    addWishlist: 'Lägg till i önskelista',
+    // Property or array item — trailing comma allowed in TypeScript
+    viewProduct: 'Visa {name}',
+    // Property or array item — trailing comma allowed in TypeScript
+    pieces: '{count} bitar',
+    // Property or array item — trailing comma allowed in TypeScript
+    standardCut: 'Standardstyckning',
+    // Property or array item — trailing comma allowed in TypeScript
+    howManyCuts: 'Hur Många Styckningar Vill Du Ha?',
+    // Property or array item — trailing comma allowed in TypeScript
+    howManyCutsHint: 'Välj antal styckningar för din beställning',
+    // Property or array item — trailing comma allowed in TypeScript
+    cutsAndStyle: '{cuts} styckningar · {style}',
+    // Property or array item — trailing comma allowed in TypeScript
+    selectCutting: 'Välj skärstil',
+    // Property or array item — trailing comma allowed in TypeScript
+    selectCuttingHint: 'Våra slaktare förbereder ditt {category} exakt enligt din önskade styckning',
+    // Line 206: fishNote:
+    fishNote:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Fiskprodukter förbereds med vår standard professionella styckning — rengjord, fjällad och redo att tillagas.',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 209: cutting: {
+  cutting: {
+    // Property or array item — trailing comma allowed in TypeScript
+    nihari: 'Nihari-styckning',
+    // Property or array item — trailing comma allowed in TypeScript
+    karahi: 'Karahi-styckning',
+    // Property or array item — trailing comma allowed in TypeScript
+    qeema: 'Qeema (färs)',
+    // Property or array item — trailing comma allowed in TypeScript
+    boneless: 'Benfri',
+    // Property or array item — trailing comma allowed in TypeScript
+    steak: 'Biffstyckning',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 216: priceUnit: {
+  priceUnit: {
+    // Property or array item — trailing comma allowed in TypeScript
+    perBird: 'per kyckling',
+    // Property or array item — trailing comma allowed in TypeScript
+    perPack: 'per förpackning',
+    // Property or array item — trailing comma allowed in TypeScript
+    perKg: 'per kg',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 221: badges: {
+  badges: {
+    // Property or array item — trailing comma allowed in TypeScript
+    bestseller: 'Bästsäljare',
+    // Property or array item — trailing comma allowed in TypeScript
+    chefsPick: 'Kockens val',
+    // Property or array item — trailing comma allowed in TypeScript
+    premium: 'Premium',
+    // Property or array item — trailing comma allowed in TypeScript
+    popular: 'Populär',
+    // Property or array item — trailing comma allowed in TypeScript
+    freshCatch: 'Färsk fångst',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 228: products: {
+  products: {
+    // Line 229: 'chicken-whole': {
+    'chicken-whole': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Hel Kyckling',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Gårdsfärsk hel halal kyckling, perfekt för stekning eller curry.',
+      // Line 232: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Våra hela kycklingar kommer från certifierade halalgårdar och levereras i toppskick. Varje fågel är handplockad för kvalitet, med mört kött och ren bearbetning. Välj önskat antal bitar så förbereder vi den precis som du behöver.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 235: 'chicken-breast': {
+    'chicken-breast': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Kycklingbröst',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Magert, benfritt kycklingbröst — idealiskt för grillning och hälsosamma måltider.',
+      // Line 238: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Premium benfritt kycklingbröst, trimmat och redo att tillagas. Perfekt för kebab, wok och hälsosamma vardagsmiddagar. Välj antal bitar och njut av konsekvent kvalitet varje gång.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 241: 'chicken-thighs': {
+    'chicken-thighs': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Kycklinglår',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Saftiga halal kycklinglår med rik smak för curry och grill.',
+      // Line 244: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Våra kycklinglår är kända för sin saftighet och djupa smak. Oavsett om du lagar traditionell karahi eller helg-BBQ levererar dessa lår varje gång.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 247: 'chicken-wings': {
+    'chicken-wings': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Kycklingvingar',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Festfärdiga halal kycklingvingar för stekning, bakning eller grillning.',
+      // Line 250: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Krispiga, smakrika kycklingvingar tillagade enligt halal och levererade färskt. En favorit för matchkvällar och familjesammankomster.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 253: 'beef-nihari': {
+    'beef-nihari': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Nötkött för Nihari',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Långkoksklara nötköttsstyckningar, perfekta för traditionell nihari.',
+      // Line 256: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Särskilt utvalda nötköttsstyckningar idealiska för långkokt nihari. Rika på kollagen och smak, dessa styckningar bryts ner vackert under timmar av sjudning för en autentisk, smältande upplevelse.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 259: 'beef-steak': {
+    'beef-steak': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Premium Nötbiff',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Restaurangkvalitet halal biffstyckningar för perfekt stekyta.',
+      // Line 262: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Handskurna premium biffar från de finaste halal-källorna. Marmorering, mörhet och redo för din grill eller gjutjärnspanna. Välj önskad skärstil.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 265: 'beef-mince': {
+    'beef-mince': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Nötfärs',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Färsk halal nötfärs för kebab, burgare och qeema.',
+      // Line 268: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Finmalen halal nötfärs med perfekt fettförhållande för saftiga kebab, smakrik qeema och hemlagade burgare. Malas färskt dagligen.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 271: 'beef-boneless': {
+    'beef-boneless': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Benfria Nötköttskuber',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Mångsidiga benfria nötköttskuber för karahi, biryani och grytor.',
+      // Line 274: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Enhetliga benfria nötköttskuber skurna till perfektion för snabbkokta rätter. Idealiska för karahi, pulao och wok där konsekvent storlek är viktigt.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 277: 'lamb-shoulder': {
+    'lamb-shoulder': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Lammbog',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Rik, smakrik lammbog för långstekning och curry.',
+      // Line 280: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Premium halal lammbog med vacker marmorering. Perfekt för långstekta festmåltider, rejäla curryrätter och traditionella familjemiddagar. Anpassad efter din önskade styckning.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 283: 'lamb-leg': {
+    'lamb-leg': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Lammlägg',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Mört lammlägg för stekning, grillning och speciella tillfällen.',
+      // Line 286: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Hela eller portionerade lammlägg från certifierade halal-källor. En centerstyckning för Eid-firanden, middagsbjudningar och söndagsstek.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 289: 'lamb-chops': {
+    'lamb-chops': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Lammkotletter',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Premium lammkotletter för grillning och finmiddag hemma.',
+      // Line 292: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Tjockskurna halal lammkotletter med perfekt fettlock för grillning. Restaurangkvalitet, levererad till ditt kök.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 295: 'lamb-mince': {
+    'lamb-mince': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Lammfärs',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Färsk halal lammfärs för kebab, samosas och qeema.',
+      // Line 298: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Finmalen lammfärs med rik smak. Nödvändig för seekh kebab, lamm qeema och fyllda parathas.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 301: 'fish-salmon': {
+    'fish-salmon': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Atlantisk Laxfilé',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Smörig laxfilé, med skinn och redo att steka i panna.',
+      // Line 304: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Premium atlantisk laxfilé med rikt omega-3-innehåll. Rengjord, portionerad och vakuumförpackad för maximal färskhet.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 307: 'fish-rohu': {
+    'fish-rohu': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Rohu-fisk',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Hel rohu-fisk, rengjord och fjällad — en sydasiatisk favorit.',
+      // Line 310: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Färsk rohu-fisk, en stapel i sydasiatisk matlagning. Rengjord, fjällad och urtagen. Perfekt för fiskcurry, stekt fisk och traditionella recept.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 313: 'fish-prawns': {
+    'fish-prawns': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Jätteräkor',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Stora räkor med skal för grillning, curry och biryani.',
+      // Line 316: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Premium jätteräkor, urtagna och redo att tillagas. Söt, fast kött som håller sig vackert i curry och tandoori-rätter.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 319: 'fish-basa': {
+    'fish-basa': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'Basa-filé',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'Mild, flagnig basa-filé — perfekt för nybörjare och barn.',
+      // Line 322: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'Benfria basa-filéer med mild, delikat smak. Lätt att tillaga och mångsidig — utmärkt för fisk-tacos, bakning och lätta curryrätter.',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 326: cart: {
+  cart: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Din Varukorg',
+    // Property or array item — trailing comma allowed in TypeScript
+    itemsCount: '{count} artikel/artiklar i din varukorg',
+    // Property or array item — trailing comma allowed in TypeScript
+    empty: 'Din varukorg är tom',
+    // Property or array item — trailing comma allowed in TypeScript
+    emptyHint: 'Bläddra i vårt premium halal-sortiment och lägg till artiklar.',
+    // Property or array item — trailing comma allowed in TypeScript
+    startShopping: 'Börja handla',
+    // Property or array item — trailing comma allowed in TypeScript
+    customization: 'Anpassning:',
+    // Property or array item — trailing comma allowed in TypeScript
+    orderSummary: 'Ordersammanfattning',
+    // Property or array item — trailing comma allowed in TypeScript
+    subtotal: 'Delsumma',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery: 'Leverans',
+    // Property or array item — trailing comma allowed in TypeScript
+    free: 'Gratis',
+    // Property or array item — trailing comma allowed in TypeScript
+    freeDeliveryHint: 'Fri leverans på beställningar över 500 kr',
+    // Property or array item — trailing comma allowed in TypeScript
+    total: 'Totalt',
+    // Property or array item — trailing comma allowed in TypeScript
+    proceedCheckout: 'Gå till kassan',
+    // Property or array item — trailing comma allowed in TypeScript
+    continueShopping: 'Fortsätt handla',
+    // Property or array item — trailing comma allowed in TypeScript
+    removeItem: 'Ta bort artikel',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 343: checkout: {
+  checkout: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Säker Kassa',
+    // Property or array item — trailing comma allowed in TypeScript
+    backToCart: 'Tillbaka till varukorg',
+    // Property or array item — trailing comma allowed in TypeScript
+    noItems: 'Inga artiklar att betala',
+    // Property or array item — trailing comma allowed in TypeScript
+    goToShop: 'Gå till butiken',
+    // Property or array item — trailing comma allowed in TypeScript
+    orderConfirmed: 'Beställning bekräftad!',
+    // Property or array item — trailing comma allowed in TypeScript
+    thankYou: 'Tack för din beställning. Ditt premium halal kött förbereds.',
+    // Property or array item — trailing comma allowed in TypeScript
+    orderId: 'Order-ID: {id}',
+    // Property or array item — trailing comma allowed in TypeScript
+    viewOrders: 'Visa beställningar',
+    // Property or array item — trailing comma allowed in TypeScript
+    haveAccount: 'Har du ett konto?',
+    // Property or array item — trailing comma allowed in TypeScript
+    signIn: 'Logga in',
+    // Property or array item — trailing comma allowed in TypeScript
+    fasterCheckout: 'för snabbare utcheckning.',
+    // Property or array item — trailing comma allowed in TypeScript
+    deliveryDetails: 'Leveransuppgifter',
+    // Property or array item — trailing comma allowed in TypeScript
+    fullName: 'Fullständigt namn',
+    // Property or array item — trailing comma allowed in TypeScript
+    email: 'E-post',
+    // Property or array item — trailing comma allowed in TypeScript
+    phone: 'Telefon',
+    // Property or array item — trailing comma allowed in TypeScript
+    street: 'Gatuadress',
+    // Property or array item — trailing comma allowed in TypeScript
+    city: 'Stad',
+    // Property or array item — trailing comma allowed in TypeScript
+    state: 'Län',
+    // Property or array item — trailing comma allowed in TypeScript
+    zip: 'Postnummer',
+    // Property or array item — trailing comma allowed in TypeScript
+    payment: 'Betalning',
+    // Property or array item — trailing comma allowed in TypeScript
+    creditCard: 'Kreditkort',
+    // Property or array item — trailing comma allowed in TypeScript
+    cashOnDelivery: 'Kontant vid leverans',
+    // Property or array item — trailing comma allowed in TypeScript
+    cardNumber: 'Kortnummer',
+    // Property or array item — trailing comma allowed in TypeScript
+    expiry: 'Giltig till',
+    // Property or array item — trailing comma allowed in TypeScript
+    cvv: 'CVV',
+    // Property or array item — trailing comma allowed in TypeScript
+    qty: 'Antal: {count}',
+    // Property or array item — trailing comma allowed in TypeScript
+    processing: 'Bearbetar...',
+    // Property or array item — trailing comma allowed in TypeScript
+    pay: 'Betala {amount}',
+    // Property or array item — trailing comma allowed in TypeScript
+    secure: 'Säker 256-bitars SSL-kryptering',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 374: auth: {
+  auth: {
+    // Property or array item — trailing comma allowed in TypeScript
+    welcomeBack: 'Välkommen tillbaka',
+    // Property or array item — trailing comma allowed in TypeScript
+    createAccount: 'Skapa konto',
+    // Property or array item — trailing comma allowed in TypeScript
+    joinTagline: 'Gå med i {name} för en premium shoppingupplevelse',
+    // Property or array item — trailing comma allowed in TypeScript
+    signInTagline: 'Logga in på ditt {name}-konto',
+    // Property or array item — trailing comma allowed in TypeScript
+    fullName: 'Fullständigt namn',
+    // Property or array item — trailing comma allowed in TypeScript
+    email: 'E-post',
+    // Property or array item — trailing comma allowed in TypeScript
+    password: 'Lösenord',
+    // Property or array item — trailing comma allowed in TypeScript
+    phone: 'Telefon',
+    // Property or array item — trailing comma allowed in TypeScript
+    street: 'Gatuadress',
+    // Property or array item — trailing comma allowed in TypeScript
+    city: 'Stad',
+    // Property or array item — trailing comma allowed in TypeScript
+    state: 'Län',
+    // Property or array item — trailing comma allowed in TypeScript
+    zip: 'Postnummer',
+    // Property or array item — trailing comma allowed in TypeScript
+    signIn: 'Logga in',
+    // Property or array item — trailing comma allowed in TypeScript
+    register: 'Skapa konto',
+    // Property or array item — trailing comma allowed in TypeScript
+    hasAccount: 'Har du redan ett konto? Logga in',
+    // Property or array item — trailing comma allowed in TypeScript
+    noAccount: 'Har du inget konto? Registrera dig',
+    // Property or array item — trailing comma allowed in TypeScript
+    invalidCredentials: 'Ogiltig e-post eller lösenord. Prova {email} / demo123',
+    // Property or array item — trailing comma allowed in TypeScript
+    demo: 'Demo: {email} / demo123',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 394: account: {
+  account: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Mitt Konto',
+    // Property or array item — trailing comma allowed in TypeScript
+    welcome: 'Välkommen tillbaka, {name}',
+    // Property or array item — trailing comma allowed in TypeScript
+    memberSince: 'Medlem sedan {date}',
+    // Property or array item — trailing comma allowed in TypeScript
+    myWishlist: 'Min önskelista',
+    // Property or array item — trailing comma allowed in TypeScript
+    signOut: 'Logga ut',
+    // Property or array item — trailing comma allowed in TypeScript
+    orderHistory: 'Orderhistorik',
+    // Property or array item — trailing comma allowed in TypeScript
+    noOrders: 'Inga beställningar ännu',
+    // Property or array item — trailing comma allowed in TypeScript
+    startShopping: 'Börja handla',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 404: wishlist: {
+  wishlist: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Min Önskelista',
+    // Property or array item — trailing comma allowed in TypeScript
+    saved: '{count} sparad(e) artikel/artiklar',
+    // Property or array item — trailing comma allowed in TypeScript
+    empty: 'Din önskelista är tom',
+    // Property or array item — trailing comma allowed in TypeScript
+    emptyHint: 'Spara dina favoritprodukter för att köpa dem senare.',
+    // Property or array item — trailing comma allowed in TypeScript
+    browse: 'Bläddra produkter',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 411: about: {
+  about: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'Om {name}',
+    // Translated UI string for current language (sv / en / ur)
+    subtitle:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Vi levererar premium 100 % halal kött till ditt bord — färskt, anpassat och med omsorg.',
+    // Property or array item — trailing comma allowed in TypeScript
+    ourStory: 'Vår Historia',
+    // Line 416: storyP1:
+    storyP1:
+      // Property or array item — trailing comma allowed in TypeScript
+      '{name} grundades med ett enkelt uppdrag: göra premium halal kött tillgängligt för varje familj, utan att kompromissa med kvalitet, färskhet eller religiös efterlevnad. Vi förstår att för många hushåll är rätt styckning tillagad på rätt sätt inte en lyx — det är nödvändigt.',
+    // Line 418: storyP2:
+    storyP2:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Från att välja antal bitar för kyckling till att välja Nihari- eller Karahi-styckning för nötkött och lamm, sätter vi anpassning i centrum för varje beställning. Våra expertslaktare förbereder varje order för hand, och vår temperaturkontrollerade leverans säkerställer att ditt kött anländer lika färskt som dagen det styckades.',
+    // Property or array item — trailing comma allowed in TypeScript
+    halalTitle: 'Halalcertifiering',
+    // Line 421: halalDesc:
+    halalDesc:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Varje produkt hos {name} kommer från certifierade halal-leverantörer. Vår leveranskedja är fullt spårbar och vi upprätthåller strikt efterlevnad av halal-slakt och -bearbetningsstandarder. Vi arbetar uteslutande med gårdar och bearbetare som delar vårt engagemang för etiskt, religiöst korrekt köttproduktion.',
+    // Property or array item — trailing comma allowed in TypeScript
+    freshDaily: 'Färskt Dagligen',
+    // Property or array item — trailing comma allowed in TypeScript
+    freshDailyDesc: 'Hämtas varje morgon från betrodda gårdar',
+    // Property or array item — trailing comma allowed in TypeScript
+    premiumQuality: 'Premiumkvalitet',
+    // Property or array item — trailing comma allowed in TypeScript
+    premiumQualityDesc: 'Handplockade styckningar av expertslaktare',
+    // Property or array item — trailing comma allowed in TypeScript
+    fastDelivery: 'Snabb Leverans',
+    // Property or array item — trailing comma allowed in TypeScript
+    fastDeliveryDesc: 'Temperaturkontrollerad leverans samma dag',
+    // Property or array item — trailing comma allowed in TypeScript
+    deliveryTitle: 'Leveransinformation',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery1: 'Vi levererar inom en radie på 40 km från vår anläggning.',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery2: 'Beställningar före kl. 14 är berättigade till leverans samma dag.',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery3: 'Fri leverans på beställningar över 500 kr. Standardleverans: 49 kr.',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery4: 'Alla produkter vakuumförpackas och transporteras i isolerad förpackning.',
+    // Property or array item — trailing comma allowed in TypeScript
+    contactTitle: 'Kontakta Oss',
+    // Property or array item — trailing comma allowed in TypeScript
+    address: 'Tingvallavägen 11, 195 31 Märsta',
+    // Property or array item — trailing comma allowed in TypeScript
+    privacyTitle: 'Integritetspolicy',
+    // Line 437: privacyText:
+    privacyText:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Vi samlar endast den information som behövs för att behandla dina beställningar — namn, kontaktuppgifter och leveransadress. Vi säljer inte dina uppgifter till tredje part. Betalningsuppgifter hanteras säkert av våra betalpartners.',
+    // Property or array item — trailing comma allowed in TypeScript
+    termsTitle: 'Användarvillkor',
+    // Line 440: termsText:
+    termsText:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Alla priser visas i SEK och kan ändras utan föregående meddelande. Beställningar är beroende av tillgång. Halalcertifiering gäller för alla köttprodukter. Leveranstider är uppskattningar och kan variera under högtrafik.',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 443: footer: {
+  footer: {
+    // Line 444: tagline:
+    tagline:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Premium 100 % halal köttleverans. Färskt, anpassat kött levererat till din dörr med kompromisslös kvalitet.',
+    // Property or array item — trailing comma allowed in TypeScript
+    shop: 'Butik',
+    // Property or array item — trailing comma allowed in TypeScript
+    company: 'Företag',
+    // Property or array item — trailing comma allowed in TypeScript
+    contact: 'Kontakt',
+    // Property or array item — trailing comma allowed in TypeScript
+    rights: 'Alla rättigheter förbehållna.',
+    // Property or array item — trailing comma allowed in TypeScript
+    phone: '072-585 50 50',
+    // Property or array item — trailing comma allowed in TypeScript
+    hours: 'Öppet alla dagar {hours}',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 453: notFound: {
+  notFound: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: '404',
+    // Property or array item — trailing comma allowed in TypeScript
+    message: 'Sidan hittades inte',
+    // Property or array item — trailing comma allowed in TypeScript
+    goHome: 'Gå till startsidan',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 458: orderStatus: {
+  orderStatus: {
+    // Property or array item — trailing comma allowed in TypeScript
+    pending: 'väntande',
+    // Property or array item — trailing comma allowed in TypeScript
+    confirmed: 'bekräftad',
+    // Property or array item — trailing comma allowed in TypeScript
+    preparing: 'förbereds',
+    // Property or array item — trailing comma allowed in TypeScript
+    'out-for-delivery': 'ute för leverans',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivered: 'levererad',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+// Closing brace — end of block (function, if, object, JSX)
+};
diff --git a/docs/annotated/src/i18n/locales/ur.annotated.ts b/docs/annotated/src/i18n/locales/ur.annotated.ts
new file mode 100644
index 0000000..e46ae99
--- /dev/null
+++ b/docs/annotated/src/i18n/locales/ur.annotated.ts
@@ -0,0 +1,936 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/i18n/locales/ur.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Import external package or local module
+import { TranslationDict } from '../types';
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const ur: TranslationDict = {
+  // Line 4: site: {
+  site: {
+    // Property or array item — trailing comma allowed in TypeScript
+    name: 'کوٹ گارڈ',
+    // Property or array item — trailing comma allowed in TypeScript
+    tagline: 'پریمیم حلال',
+    // Line 7: description:
+    description:
+      // Property or array item — trailing comma allowed in TypeScript
+      'پریمیم 100% حلال گوشت کی ڈیلیوری۔ تازہ اور منجمد مرغی، گائے کا گوشت، بکرے کا گوشت اور مچھلی — آپ کی پسند کے مطابق تیار کر کے آپ کے دروازے تک پہنچائی جاتی ہے۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    metaTitle: 'پریمیم حلال گوشت ڈیلیوری',
+    // Property or array item — trailing comma allowed in TypeScript
+    initials: 'KG',
+    // Property or array item — trailing comma allowed in TypeScript
+    email: 'hello@kottgard.se',
+    // Property or array item — trailing comma allowed in TypeScript
+    demoEmail: 'demo@kottgard.se',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 14: nav: {
+  nav: {
+    // Property or array item — trailing comma allowed in TypeScript
+    shop: 'خریداری',
+    // Property or array item — trailing comma allowed in TypeScript
+    chicken: 'مرغی',
+    // Property or array item — trailing comma allowed in TypeScript
+    beef: 'گائے کا گوشت',
+    // Property or array item — trailing comma allowed in TypeScript
+    lamb: 'بکرے کا گوشت',
+    // Property or array item — trailing comma allowed in TypeScript
+    fish: 'مچھلی',
+    // Property or array item — trailing comma allowed in TypeScript
+    about: 'ہمارے بارے میں',
+    // Property or array item — trailing comma allowed in TypeScript
+    halalCert: 'حلال سرٹیفیکیشن',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery: 'ڈیلیوری کی معلومات',
+    // Property or array item — trailing comma allowed in TypeScript
+    contact: 'رابطہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    myAccount: 'میرا اکاؤنٹ',
+    // Property or array item — trailing comma allowed in TypeScript
+    orderHistory: 'آرڈر کی تاریخ',
+    // Property or array item — trailing comma allowed in TypeScript
+    wishlist: 'پسندیدہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    cart: 'ٹوکری',
+    // Property or array item — trailing comma allowed in TypeScript
+    privacy: 'رازداری کی پالیسی',
+    // Property or array item — trailing comma allowed in TypeScript
+    terms: 'شرائط و ضوابط',
+    // Property or array item — trailing comma allowed in TypeScript
+    searchProducts: 'مصنوعات تلاش کریں',
+    // Property or array item — trailing comma allowed in TypeScript
+    toggleMenu: 'مینو کھولیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    account: 'اکاؤنٹ',
+    // Property or array item — trailing comma allowed in TypeScript
+    language: 'زبان',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 35: languageBanner: {
+  languageBanner: {
+    // Property or array item — trailing comma allowed in TypeScript
+    choose: 'اپنی زبان منتخب کریں',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 38: hero: {
+  hero: {
+    // Property or array item — trailing comma allowed in TypeScript
+    badge: '100% حلال تصدیق شدہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    taglineShort: 'قدرتی طور پر خالص',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'پریمیم حلال گوشت',
+    // Property or array item — trailing comma allowed in TypeScript
+    titleHighlight: '',
+    // Property or array item — trailing comma allowed in TypeScript
+    titleEnd: '',
+    // Property or array item — trailing comma allowed in TypeScript
+    subtitleShort: 'تازہ۔ معیار۔ قابل اعتماد۔',
+    // Translated UI string for current language (sv / en / ur)
+    subtitle:
+      // Property or array item — trailing comma allowed in TypeScript
+      'حلال تصدیق شدہ · روزانہ تازہ · گھر کی ڈیلیوری · ہر دن کھلا',
+    // Property or array item — trailing comma allowed in TypeScript
+    hours: 'ہر دن کھلا {hours}',
+    // Property or array item — trailing comma allowed in TypeScript
+    location: 'Tingvallavägen 11, Märsta',
+    // Property or array item — trailing comma allowed in TypeScript
+    shopNow: 'ہمارا مجموعہ دیکھیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    browseChicken: 'مرغی دیکھیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    whatsapp: 'واٹس ایپ سے آرڈر کریں',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 53: aboutPreview: {
+  aboutPreview: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'ہمارے بارے میں',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'مائرسٹا کی بہترین گوشت کی دکان',
+    // Property or array item — trailing comma allowed in TypeScript
+    p1: 'کوٹ گارڈ صرف ایک گوشت کی دکان نہیں — ہم معیار کا وعدہ ہیں۔ ہمارا تمام گوشت 100% حلال تصدیق شدہ ہے اور روزانہ تازہ پہنچایا جاتا ہے۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    p2: 'ہم آئرلینڈ اور نیوزی لینڈ سے بکرے کا گوشت، معتبر پیدا کنندگان سے مرغی اور گائے کا گوشت حاصل کرتے ہیں، اور آپ کو رات کے کھانے، تقریب یا اتوار کی روست کے لیے صحیح کٹ تلاش کرنے میں مدد کرتے ہیں۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    p3: 'Tingvallavägen پر ہماری دکان میں آئیں، بتائیں آپ کیا تلاش کر رہے ہیں — ہم آپ کی خواہش کے مطابق کاٹتے اور پیک کرتے ہیں۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    statHalal: '100%',
+    // Property or array item — trailing comma allowed in TypeScript
+    statHalalLabel: 'حلال تصدیق شدہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    statDays: '7 دن',
+    // Property or array item — trailing comma allowed in TypeScript
+    statDaysLabel: 'ہفتے میں کھلا',
+    // Property or array item — trailing comma allowed in TypeScript
+    statDelivery: 'روزانہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    statDeliveryLabel: 'ڈیلیوری',
+    // Property or array item — trailing comma allowed in TypeScript
+    statFresh: 'تازہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    statFreshLabel: 'ہر دن',
+    // Property or array item — trailing comma allowed in TypeScript
+    readMore: 'مزید پڑھیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    imageAlt: 'کوٹ گارڈ سے تازہ گوشت کی کٹس',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 70: trust: {
+  trust: {
+    // Property or array item — trailing comma allowed in TypeScript
+    halal: '100% حلال',
+    // Property or array item — trailing comma allowed in TypeScript
+    halalDesc: 'مکمل سراغ رسانی اور تعمیل کے ساتھ تصدیق شدہ حلال ذرائع۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    fresh: 'روزانہ تازہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    freshDesc: 'ہر صبح تازہ حاصل کیا جاتا ہے اور بہترین حالت میں پہنچایا جاتا ہے۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    premium: 'پریمیم معیار',
+    // Property or array item — trailing comma allowed in TypeScript
+    premiumDesc: 'قابل اعتماد فارموں سے منتخب کردہ کٹس، ماہر قصابوں کے ذریعے تیار۔',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 78: categories: {
+  categories: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'زمرے کے لحاظ سے خریداری',
+    // Translated UI string for current language (sv / en / ur)
+    subtitle:
+      // Property or array item — trailing comma allowed in TypeScript
+      'روزمرہ کی مرغی سے لے کر پریمیم بکرے کے کٹlets تک — ہر کٹ آپ کی پسند کے مطابق۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    shop: '{name} خریدیں',
+    // Line 83: chicken: {
+    chicken: {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'مرغی',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'فارم سے تازہ حلال مرغی، آپ کی پسند کے مطابق کاٹی گئی',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 87: beef: {
+    beef: {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'گائے کا گوشت',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'روایتی اور جدید کٹس میں پریمیم حلال گائے کا گوشت',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 91: lamb: {
+    lamb: {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'بکرے کا گوشت',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'ہر موقع کے لیے نرم حلال بکرے کا گوشت',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 95: fish: {
+    fish: {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'مچھلی',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'تازہ پکڑ، صاف کی گئی اور پکانے کے لیے تیار',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 100: featured: {
+  featured: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'منتخب مجموعہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'نمایاں مصنوعات',
+    // Property or array item — trailing comma allowed in TypeScript
+    subtitle: 'ہماری سب سے مقبول کٹس، شہر بھر کے خاندانوں کی پسندیدہ۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    viewAll: 'سب دیکھیں',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 106: howItWorks: {
+  howItWorks: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'آرڈر',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'آرڈر کرنا کتنا آسان ہے',
+    // Property or array item — trailing comma allowed in TypeScript
+    step1Title: 'ہم سے رابطہ کریں',
+    // Line 110: step1Desc:
+    step1Desc:
+      // Property or array item — trailing comma allowed in TypeScript
+      'واٹس ایپ پر پیغام بھیجیں کہ آپ کیا چاہتے ہیں — ہم جلدی جواب دیتے ہیں۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    step2Title: 'ہم تصدیق کرتے ہیں',
+    // Line 113: step2Desc:
+    step2Desc:
+      // Property or array item — trailing comma allowed in TypeScript
+      'ہم آپ کے آرڈر کی تصدیق کرتے ہیں، قیمت بتاتے ہیں اور بتاتے ہیں کہ کب تیار ہوگا۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    step3Title: 'وصول یا ڈیلیوری',
+    // Line 116: step3Desc:
+    step3Desc:
+      // Property or array item — trailing comma allowed in TypeScript
+      'Tingvallavägen 11 پر دکان سے وصول کریں یا گھر کی ڈیلیوری منتخب کریں۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    step: 'مرحلہ {n}',
+    // Property or array item — trailing comma allowed in TypeScript
+    whatsapp: 'واٹس ایپ پر آرڈر کریں',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 121: offers: {
+  offers: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'آرڈر',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'ہفتہ وار پیشکشیں',
+    // Translated UI string for current language (sv / en / ur)
+    subtitle:
+      // Property or array item — trailing comma allowed in TypeScript
+      'ہم مسلسل تازہ پیشکشوں کے ساتھ اپ ڈیٹ کرتے ہیں۔ تازہ ترین قیمتوں کے لیے سوشل میڈیا پر فالو کریں۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    disclaimer: 'قیمت اس وقت تک جب تک اسٹاک موجود ہے',
+    // Property or array item — trailing comma allowed in TypeScript
+    was: 'پہلے',
+    // Property or array item — trailing comma allowed in TypeScript
+    now: 'اب',
+    // Property or array item — trailing comma allowed in TypeScript
+    order: 'آرڈر',
+    // Property or array item — trailing comma allowed in TypeScript
+    viewProduct: 'مصنوعات دیکھیں',
+    // Line 131: badge: {
+    badge: {
+      // Property or array item — trailing comma allowed in TypeScript
+      fresh: 'تازہ',
+      // Property or array item — trailing comma allowed in TypeScript
+      halal: 'حلال',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 135: items: {
+    items: {
+      // Property or array item — trailing comma allowed in TypeScript
+      chickenWings: { name: 'تازہ چکن ونگز PL' },
+      // Property or array item — trailing comma allowed in TypeScript
+      lambSteak: { name: 'تازہ لیمب روست آئرلینڈ' },
+      // Property or array item — trailing comma allowed in TypeScript
+      beefMince: { name: 'بیف منس 5% چکنائی IRL' },
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 141: social: {
+  social: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'ہمیں فالو کریں',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'ہمیں فالو کریں',
+    // Translated UI string for current language (sv / en / ur)
+    subtitle:
+      // Property or array item — trailing comma allowed in TypeScript
+      'فیس بک پر 1,100+ فالوورز · 249 پوسٹس · روزانہ اپ ڈیٹس',
+    // Property or array item — trailing comma allowed in TypeScript
+    facebook: 'فیس بک',
+    // Property or array item — trailing comma allowed in TypeScript
+    instagram: 'انسٹاگرام',
+    // Property or array item — trailing comma allowed in TypeScript
+    whatsapp: 'واٹس ایپ',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 150: contact: {
+  contact: {
+    // Property or array item — trailing comma allowed in TypeScript
+    label: 'رابطہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'ہم سے ملیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    addressLabel: 'پتہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    phoneLabel: 'فون',
+    // Property or array item — trailing comma allowed in TypeScript
+    hoursLabel: 'اوقات',
+    // Property or array item — trailing comma allowed in TypeScript
+    hoursValue: 'ہر دن: {hours}',
+    // Property or array item — trailing comma allowed in TypeScript
+    writeUs: 'ہمیں لکھیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    callUs: 'ہمیں کال کریں',
+    // Property or array item — trailing comma allowed in TypeScript
+    openMaps: 'گوگل میپس میں کھولیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    learnMore: 'رابطے کی تفصیلات',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 162: cta: {
+  cta: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'پریمیم حلال گوشت کے لیے تیار ہیں؟',
+    // Translated UI string for current language (sv / en / ur)
+    subtitle:
+      // Property or array item — trailing comma allowed in TypeScript
+      'آج ہی آرڈر کریں اور حقیقی تازہ، حسب ضرورت حلال گوشت کا فرق محسوس کریں جو آپ کے دروازے تک پہنچایا جائے۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    button: 'ہمارا مجموعہ دیکھیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    whatsapp: 'واٹس ایپ پر آرڈر کریں',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 169: shop: {
+  shop: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'تمام مصنوعات',
+    // Property or array item — trailing comma allowed in TypeScript
+    subtitle: 'پریمیم حلال گوشت، آپ کی پسند کے مطابق',
+    // Property or array item — trailing comma allowed in TypeScript
+    noProducts: 'کوئی مصنوعات نہیں ملیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    noProductsHint: 'اپنے فلٹرز یا تلاش کی کوشش کو ایڈجسٹ کریں',
+    // Property or array item — trailing comma allowed in TypeScript
+    filters: 'فلٹرز',
+    // Property or array item — trailing comma allowed in TypeScript
+    productsFound: '{count} مصنوعات ملیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    search: 'تلاش',
+    // Property or array item — trailing comma allowed in TypeScript
+    searchPlaceholder: 'مصنوعات تلاش کریں...',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'زمرہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    sortBy: 'ترتیب دیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    all: 'سب',
+    // Property or array item — trailing comma allowed in TypeScript
+    sortFeatured: 'نمایاں',
+    // Property or array item — trailing comma allowed in TypeScript
+    sortPriceAsc: 'قیمت: کم سے زیادہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    sortPriceDesc: 'قیمت: زیادہ سے کم',
+    // Property or array item — trailing comma allowed in TypeScript
+    sortName: 'نام الف سے ی',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 186: product: {
+  product: {
+    // Property or array item — trailing comma allowed in TypeScript
+    backToShop: 'خریداری پر واپس',
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: 'دستیاب',
+    // Property or array item — trailing comma allowed in TypeScript
+    outOfStock: 'اسٹاک ختم',
+    // Property or array item — trailing comma allowed in TypeScript
+    halalTrust: '100% حلال تصدیق شدہ · روزانہ تازہ · پریمیم معیار',
+    // Property or array item — trailing comma allowed in TypeScript
+    yourSelection: 'آپ کا انتخاب',
+    // Property or array item — trailing comma allowed in TypeScript
+    aboutProduct: 'اس مصنوع کے بارے میں',
+    // Property or array item — trailing comma allowed in TypeScript
+    addToCart: 'ٹوکری میں شامل کریں',
+    // Property or array item — trailing comma allowed in TypeScript
+    addedToCart: 'ٹوکری میں شامل ہو گیا',
+    // Property or array item — trailing comma allowed in TypeScript
+    decreaseQty: 'مقدار کم کریں',
+    // Property or array item — trailing comma allowed in TypeScript
+    increaseQty: 'مقدار بڑھائیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    removeWishlist: 'پسندیدہ سے ہٹائیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    addWishlist: 'پسندیدہ میں شامل کریں',
+    // Property or array item — trailing comma allowed in TypeScript
+    viewProduct: '{name} دیکھیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    pieces: '{count} ٹکڑے',
+    // Property or array item — trailing comma allowed in TypeScript
+    standardCut: 'معیاری کٹ',
+    // Property or array item — trailing comma allowed in TypeScript
+    howManyCuts: 'آپ کتنے کٹ چاہتے ہیں؟',
+    // Property or array item — trailing comma allowed in TypeScript
+    howManyCutsHint: 'اپنے آرڈر کے لیے کٹوں کی تعداد منتخب کریں',
+    // Property or array item — trailing comma allowed in TypeScript
+    cutsAndStyle: '{cuts} کٹ · {style}',
+    // Property or array item — trailing comma allowed in TypeScript
+    selectCutting: 'کاٹنے کا انداز منتخب کریں',
+    // Property or array item — trailing comma allowed in TypeScript
+    selectCuttingHint: 'ہمارے قصاب آپ کے {category} کو بالکل آپ کی پسند کے مطابق تیار کریں گے',
+    // Line 207: fishNote:
+    fishNote:
+      // Property or array item — trailing comma allowed in TypeScript
+      'مچھلی کی مصنوعات ہمارے معیاری پیشہ ورانہ کٹ سے تیار کی جاتی ہیں — صاف، چھلکے اتارے اور پکانے کے لیے تیار۔',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 210: cutting: {
+  cutting: {
+    // Property or array item — trailing comma allowed in TypeScript
+    nihari: 'نہاری کٹ',
+    // Property or array item — trailing comma allowed in TypeScript
+    karahi: 'کڑاہی کٹ',
+    // Property or array item — trailing comma allowed in TypeScript
+    qeema: 'قیمہ (کима)',
+    // Property or array item — trailing comma allowed in TypeScript
+    boneless: 'بغیر ہڈی',
+    // Property or array item — trailing comma allowed in TypeScript
+    steak: 'اسٹیک کٹ',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 217: priceUnit: {
+  priceUnit: {
+    // Property or array item — trailing comma allowed in TypeScript
+    perBird: 'فی مرغی',
+    // Property or array item — trailing comma allowed in TypeScript
+    perPack: 'فی پیک',
+    // Property or array item — trailing comma allowed in TypeScript
+    perKg: 'فی کلو',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 222: badges: {
+  badges: {
+    // Property or array item — trailing comma allowed in TypeScript
+    bestseller: 'سب سے زیادہ فروخت',
+    // Property or array item — trailing comma allowed in TypeScript
+    chefsPick: 'شیف کی پسند',
+    // Property or array item — trailing comma allowed in TypeScript
+    premium: 'پریمیم',
+    // Property or array item — trailing comma allowed in TypeScript
+    popular: 'مقبول',
+    // Property or array item — trailing comma allowed in TypeScript
+    freshCatch: 'تازہ پکڑ',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 229: products: {
+  products: {
+    // Line 230: 'chicken-whole': {
+    'chicken-whole': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'پوری مرغی',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'فارم سے تازہ پوری حلال مرغی، بھوننے یا کڑی کے لیے بہترین۔',
+      // Line 233: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'ہماری پوری مرغیاں تصدیق شدہ حلال فارموں سے حاصل کی جاتی ہیں اور بہترین تازگی میں پہنچائی جاتی ہیں۔ ہر پرندہ معیار کے لیے ہاتھ سے منتخب کیا جاتا ہے، نرم گوشت اور صاف پروسیسنگ کے ساتھ۔ اپنی پسندیدہ ٹکڑوں کی تعداد منتخب کریں اور ہم اسے بالکل ویسے تیار کریں گے جیسا آپ چاہیں۔',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 236: 'chicken-breast': {
+    'chicken-breast': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'مرغی کا سینہ',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'دبلا، بغیر ہڈی کا مرغی کا سینہ — گرل اور صحت مند کھانوں کے لیے بہترین۔',
+      // Line 239: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'پریمیم بغیر ہڈی کا مرغی کا سینہ، تراشا ہوا اور پکانے کے لیے تیار۔ کباب، سٹیر فرائی اور صحت مند ہفتے کی رات کے کھانوں کے لیے بہترین۔',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 242: 'chicken-thighs': {
+    'chicken-thighs': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'مرغی کی ران',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'کڑی اور گرل کے لیے بھرپور ذائقے والی رس بھرے حلال مرغی کی ران۔',
+      // Line 245: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'ہماری مرغی کی ران اپنی رس اور گہرے ذائقے کے لیے مشہور ہے۔ چاہے روایتی کڑاہی بنائیں یا ہفتے کے آخر میں BBQ، یہ ران ہر بار بہترین نتائج دیتی ہے۔',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 248: 'chicken-wings': {
+    'chicken-wings': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'مرغی کے بازو',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'تلی، بیکنگ یا گرل کے لیے پارٹی کے لیے تیار حلال مرغی کے بازو۔',
+      // Line 251: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'کرکرے، ذائقے دار مرغی کے بازو حلال طریقے سے تیار اور تازہ پہنچائے جاتے ہیں۔ میچ کی راتوں اور خاندانی محفلوں کی پسندیدہ۔',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 254: 'beef-nihari': {
+    'beef-nihari': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'نہاری کے لیے گائے کا گوشت',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'آہستہ پکانے کے لیے تیار گائے کے گوشت کے کٹس، روایتی نہاری کے لیے بہترین۔',
+      // Line 257: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'خاص طور پر منتخب گائے کے گوشت کے کٹس جو آہستہ پکی ہوئی نہاری کے لیے بہترین ہیں۔ کولیجن اور ذائقے سے بھرپور، یہ کٹس گھنٹوں کی دھیمی آنچ پر خوبصورتی سے گل جاتے ہیں۔',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 260: 'beef-steak': {
+    'beef-steak': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'پریمیم گائے کا اسٹیک',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'ریستوران معیار کے حلال اسٹیک کٹس، بہترین سیک کے لیے۔',
+      // Line 263: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'بہترین حلال ذرائع سے ہاتھ سے کاٹے گئے پریمیم اسٹیک۔ چربیلے، نرم اور آپ کی گرل یا کاسٹ آئرن پین کے لیے تیار۔',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 266: 'beef-mince': {
+    'beef-mince': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'گائے کا قیمہ',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'کباب، برگر اور قیمہ کے لیے تازہ حلال گائے کا قیمہ۔',
+      // Line 269: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'باریک پیسا ہوا حلال گائے کا قیمہ بہترین چربی کے تناسب کے ساتھ رسیلے کباب، ذائقے دار قیمہ اور گھریلو برگرز کے لیے۔ روزانہ تازہ پیسا جاتا ہے۔',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 272: 'beef-boneless': {
+    'beef-boneless': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'بغیر ہڈی کے گائے کے مکعب',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'کڑاہی، بریانی اور اسٹیو کے لیے کثیر الاستعمال بغیر ہڈی کے مکعب۔',
+      // Line 275: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'یکساں بغیر ہڈی کے گائے کے مکعب تیز پکوان کے لیے کامل سائز میں کاٹے گئے۔ کڑاہی، پلاؤ اور سٹیر فرائی کے لیے بہترین۔',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 278: 'lamb-shoulder': {
+    'lamb-shoulder': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'بکرے کا کندھا',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'آہستہ بھوننے اور کڑی کے لیے بھرپور ذائقے والا بکرے کا کندھا۔',
+      // Line 281: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'خوبصورت چربی کے نمونے والے پریمیم حلال بکرے کا کندھا۔ آہستہ بھونی ہوئی دعوتوں، بھرپور کڑیوں اور روایتی خاندانی کھانوں کے لیے بہترین۔',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 284: 'lamb-leg': {
+    'lamb-leg': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'بکرے کی ٹانگ',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'بھوننے، گرل اور خاص مواقع کے لیے نرم بکرے کی ٹانگ۔',
+      // Line 287: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'تصدیق شدہ حلال ذرائع سے پوری یا حصوں میں بکرے کی ٹانگ۔ عید کی تقریبات، ڈنر پارٹیوں اور اتوار کی بھوننے کے لیے مرکزی کٹ۔',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 290: 'lamb-chops': {
+    'lamb-chops': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'بکرے کے کٹlets',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'گرل اور گھر میں فائن ڈائننگ کے لیے پریمیم بکرے کے کٹlets۔',
+      // Line 293: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'موٹے کاٹے گئے حلال بکرے کے کٹlets گرل کے لیے بہترین چربی کی تہہ کے ساتھ۔ ریستوران معیار، آپ کے باورچی خانے تک پہنچایا گیا۔',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 296: 'lamb-mince': {
+    'lamb-mince': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'بکرے کا قیمہ',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'کباب، سموسے اور قیمہ کے لیے تازہ حلال بکرے کا قیمہ۔',
+      // Line 299: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'باریک پیسا ہوا بکرے کا قیمہ بھرپور ذائقے کے ساتھ۔ سیخ کباب، بکرے کا قیمہ اور بھرے ہوئے پراٹھوں کے لیے ضروری۔',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 302: 'fish-salmon': {
+    'fish-salmon': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'اٹلانٹک سامن فلیٹ',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'مکھن جیسے نرم سامن فلیٹس، جلد سمیت اور پین میں سیکنے کے لیے تیار۔',
+      // Line 305: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'پریمیم اٹلانٹک سامن فلیٹس بھرپور اومیگا 3 کے ساتھ۔ صاف، حصوں میں تقسیم اور زیادہ سے زیادہ تازگی کے لیے ویکیوم سیلڈ۔',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 308: 'fish-rohu': {
+    'fish-rohu': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'روہو مچھلی',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'پوری روہو مچھلی، صاف اور چھلکے اتارے — جنوبی ایشیائی پسندیدہ۔',
+      // Line 311: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'تازہ روہو مچھلی، جنوبی ایشیائی کھانوں کا ایک بنیادی جزو۔ صاف، چھلکے اتارے اور اندر صاف کی گئی۔ مچھلی کی کڑی، تلی ہوئی مچھلی اور روایتی ترکیبوں کے لیے بہترین۔',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 314: 'fish-prawns': {
+    'fish-prawns': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'بڑی جھینگے',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'گرل، کڑی اور بریانی کے لیے بڑے چھلکے سمیت جھینگے۔',
+      // Line 317: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'پریمیم بڑی جھینگے، صاف کی گئی اور پکانے کے لیے تیار۔ میٹھا، مضبوط گوشت جو کڑی اور تندوری تیاریوں میں خوبصورتی سے کھڑا رہتا ہے۔',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+    // Line 320: 'fish-basa': {
+    'fish-basa': {
+      // Property or array item — trailing comma allowed in TypeScript
+      name: 'باسا فلیٹ',
+      // Property or array item — trailing comma allowed in TypeScript
+      description: 'ہلکا، پرت دار باسا فلیٹس — ابتدائیوں اور بچوں کے لیے بہترین۔',
+      // Line 323: longDescription:
+      longDescription:
+        // Property or array item — trailing comma allowed in TypeScript
+        'بغیر ہڈی کے باسا فلیٹس ہلکے، نفیس ذائقے کے ساتھ۔ پکانا آسان اور کثیر الاستعمال — مچھلی کے ٹیکو، بیکنگ اور ہلکی کڑیوں کے لیے بہترین۔',
+    // Closing brace — end of block (function, if, object, JSX)
+    },
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 327: cart: {
+  cart: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'آپ کی ٹوکری',
+    // Property or array item — trailing comma allowed in TypeScript
+    itemsCount: 'آپ کی ٹوکری میں {count} آئٹم',
+    // Property or array item — trailing comma allowed in TypeScript
+    empty: 'آپ کی ٹوکری خالی ہے',
+    // Property or array item — trailing comma allowed in TypeScript
+    emptyHint: 'ہمارے پریمیم حلال مجموعے میں سے دیکھیں اور آئٹمز شامل کریں۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    startShopping: 'خریداری شروع کریں',
+    // Property or array item — trailing comma allowed in TypeScript
+    customization: 'حسب ضرورت:',
+    // Property or array item — trailing comma allowed in TypeScript
+    orderSummary: 'آرڈر کا خلاصہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    subtotal: 'ذیلی کل',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery: 'ڈیلیوری',
+    // Property or array item — trailing comma allowed in TypeScript
+    free: 'مفت',
+    // Property or array item — trailing comma allowed in TypeScript
+    freeDeliveryHint: '500 کرون سے زیادہ کے آرڈرز پر مفت ڈیلیوری',
+    // Property or array item — trailing comma allowed in TypeScript
+    total: 'کل',
+    // Property or array item — trailing comma allowed in TypeScript
+    proceedCheckout: 'چیک آؤٹ پر جائیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    continueShopping: 'خریداری جاری رکھیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    removeItem: 'آئٹم ہٹائیں',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 344: checkout: {
+  checkout: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'محفوظ چیک آؤٹ',
+    // Property or array item — trailing comma allowed in TypeScript
+    backToCart: 'ٹوکری پر واپس',
+    // Property or array item — trailing comma allowed in TypeScript
+    noItems: 'چیک آؤٹ کے لیے کوئی آئٹم نہیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    goToShop: 'خریداری پر جائیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    orderConfirmed: 'آرڈر کی تصدیق ہو گئی!',
+    // Property or array item — trailing comma allowed in TypeScript
+    thankYou: 'آپ کے آرڈر کا شکریہ۔ آپ کا پریمیم حلال گوشت تیار کیا جا رہا ہے۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    orderId: 'آرڈر آئی ڈی: {id}',
+    // Property or array item — trailing comma allowed in TypeScript
+    viewOrders: 'آرڈرز دیکھیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    haveAccount: 'اکاؤنٹ ہے؟',
+    // Property or array item — trailing comma allowed in TypeScript
+    signIn: 'سائن ان کریں',
+    // Property or array item — trailing comma allowed in TypeScript
+    fasterCheckout: 'تیز چیک آؤٹ کے لیے۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    deliveryDetails: 'ڈیلیوری کی تفصیلات',
+    // Property or array item — trailing comma allowed in TypeScript
+    fullName: 'پورا نام',
+    // Property or array item — trailing comma allowed in TypeScript
+    email: 'ای میل',
+    // Property or array item — trailing comma allowed in TypeScript
+    phone: 'فون',
+    // Property or array item — trailing comma allowed in TypeScript
+    street: 'گلی کا پتہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    city: 'شہر',
+    // Property or array item — trailing comma allowed in TypeScript
+    state: 'صوبہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    zip: 'پوسٹل کوڈ',
+    // Property or array item — trailing comma allowed in TypeScript
+    payment: 'ادائیگی',
+    // Property or array item — trailing comma allowed in TypeScript
+    creditCard: 'کریڈٹ کارڈ',
+    // Property or array item — trailing comma allowed in TypeScript
+    cashOnDelivery: 'ڈیلیوری پر نقد',
+    // Property or array item — trailing comma allowed in TypeScript
+    cardNumber: 'کارڈ نمبر',
+    // Property or array item — trailing comma allowed in TypeScript
+    expiry: 'میعاد',
+    // Property or array item — trailing comma allowed in TypeScript
+    cvv: 'CVV',
+    // Property or array item — trailing comma allowed in TypeScript
+    qty: 'مقدار: {count}',
+    // Property or array item — trailing comma allowed in TypeScript
+    processing: 'پروسیسنگ...',
+    // Property or array item — trailing comma allowed in TypeScript
+    pay: '{amount} ادا کریں',
+    // Property or array item — trailing comma allowed in TypeScript
+    secure: 'محفوظ 256 بٹ SSL انکرپشن',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 375: auth: {
+  auth: {
+    // Property or array item — trailing comma allowed in TypeScript
+    welcomeBack: 'خوش آمدید',
+    // Property or array item — trailing comma allowed in TypeScript
+    createAccount: 'اکاؤنٹ بنائیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    joinTagline: 'پریمیم شاپنگ کے تجربے کے لیے {name} میں شامل ہوں',
+    // Property or array item — trailing comma allowed in TypeScript
+    signInTagline: 'اپنے {name} اکاؤنٹ میں سائن ان کریں',
+    // Property or array item — trailing comma allowed in TypeScript
+    fullName: 'پورا نام',
+    // Property or array item — trailing comma allowed in TypeScript
+    email: 'ای میل',
+    // Property or array item — trailing comma allowed in TypeScript
+    password: 'پاس ورڈ',
+    // Property or array item — trailing comma allowed in TypeScript
+    phone: 'فون',
+    // Property or array item — trailing comma allowed in TypeScript
+    street: 'گلی کا پتہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    city: 'شہر',
+    // Property or array item — trailing comma allowed in TypeScript
+    state: 'صوبہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    zip: 'پوسٹل کوڈ',
+    // Property or array item — trailing comma allowed in TypeScript
+    signIn: 'سائن ان',
+    // Property or array item — trailing comma allowed in TypeScript
+    register: 'اکاؤنٹ بنائیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    hasAccount: 'پہلے سے اکاؤنٹ ہے؟ سائن ان کریں',
+    // Property or array item — trailing comma allowed in TypeScript
+    noAccount: 'اکاؤنٹ نہیں ہے؟ رجسٹر کریں',
+    // Property or array item — trailing comma allowed in TypeScript
+    invalidCredentials: 'غلط ای میل یا پاس ورڈ۔ {email} / demo123 آزمائیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    demo: 'ڈیمو: {email} / demo123',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 395: account: {
+  account: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'میرا اکاؤنٹ',
+    // Property or array item — trailing comma allowed in TypeScript
+    welcome: 'خوش آمدید، {name}',
+    // Property or array item — trailing comma allowed in TypeScript
+    memberSince: '{date} سے رکن',
+    // Property or array item — trailing comma allowed in TypeScript
+    myWishlist: 'میری پسندیدہ فہرست',
+    // Property or array item — trailing comma allowed in TypeScript
+    signOut: 'سائن آؤٹ',
+    // Property or array item — trailing comma allowed in TypeScript
+    orderHistory: 'آرڈر کی تاریخ',
+    // Property or array item — trailing comma allowed in TypeScript
+    noOrders: 'ابھی تک کوئی آرڈر نہیں',
+    // Property or array item — trailing comma allowed in TypeScript
+    startShopping: 'خریداری شروع کریں',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 405: wishlist: {
+  wishlist: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: 'میری پسندیدہ فہرست',
+    // Property or array item — trailing comma allowed in TypeScript
+    saved: '{count} محفوظ آئٹم',
+    // Property or array item — trailing comma allowed in TypeScript
+    empty: 'آپ کی پسندیدہ فہرست خالی ہے',
+    // Property or array item — trailing comma allowed in TypeScript
+    emptyHint: 'اپنی پسندیدہ مصنوعات محفوظ کریں تاکہ بعد میں خرید سکیں۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    browse: 'مصنوعات دیکھیں',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 412: about: {
+  about: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: '{name} کے بارے میں',
+    // Translated UI string for current language (sv / en / ur)
+    subtitle:
+      // Property or array item — trailing comma allowed in TypeScript
+      'پریمیم 100% حلال گوشت آپ کی میز تک — تازہ، حسب ضرورت اور احتیاط سے پہنچایا گیا۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    ourStory: 'ہماری کہانی',
+    // Line 417: storyP1:
+    storyP1:
+      // Property or array item — trailing comma allowed in TypeScript
+      '{name} ایک سادہ مشن کے ساتھ قائم ہوا: ہر خاندان کے لیے پریمیم حلال گوشت قابل رسائی بنانا، معیار، تازگی یا مذہبی تعمیل سے سمجھوتہ کیے بغیر۔ ہم سمجھتے ہیں کہ بہت سے گھروں کے لیے صحیح کٹ صحیح طریقے سے تیار کرنا عیش نہیں — یہ ضروری ہے۔',
+    // Line 419: storyP2:
+    storyP2:
+      // Property or array item — trailing comma allowed in TypeScript
+      'مرغی کے لیے ٹکڑوں کی تعداد منتخب کرنے سے لے کر گائے اور بکرے کے گوشت کے لیے نہاری یا کڑاہی کٹس کا انتخاب کرنے تک، ہم ہر آرڈر کے مرکز میں حسب ضرورت بناتے ہیں۔ ہمارے ماہر قصاب ہر آرڈر ہاتھ سے تیار کرتے ہیں، اور ہماری درجہ حرارت کنٹرولڈ ڈیلیوری یقینی بناتی ہے کہ آپ کا گوشت اسی دن کی طرح تازہ پہنچے جیسے کاٹا گیا تھا۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    halalTitle: 'حلال سرٹیفیکیشن',
+    // Line 422: halalDesc:
+    halalDesc:
+      // Property or array item — trailing comma allowed in TypeScript
+      '{name} کی ہر مصنوع تصدیق شدہ حلال سپلائرز سے حاصل کی جاتی ہے۔ ہمارا سپلائی چین مکمل طور پر قابل سراغ ہے، اور ہم حلال ذبح اور پروسیسنگ کے معیارات کی سخت تعمیل برقرار رکھتے ہیں۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    freshDaily: 'روزانہ تازہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    freshDailyDesc: 'ہر صبح قابل اعتماد فارموں سے حاصل',
+    // Property or array item — trailing comma allowed in TypeScript
+    premiumQuality: 'پریمیم معیار',
+    // Property or array item — trailing comma allowed in TypeScript
+    premiumQualityDesc: 'ماہر قصابوں کے ذریعے منتخب کردہ کٹس',
+    // Property or array item — trailing comma allowed in TypeScript
+    fastDelivery: 'تیز ڈیلیوری',
+    // Property or array item — trailing comma allowed in TypeScript
+    fastDeliveryDesc: 'درجہ حرارت کنٹرولڈ اسی دن کی ڈیلیوری',
+    // Property or array item — trailing comma allowed in TypeScript
+    deliveryTitle: 'ڈیلیوری کی معلومات',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery1: 'ہم اپنی پروسیسنگ سہولت سے 40 کلومیٹر کے دائرے میں ڈیلیوری کرتے ہیں۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery2: 'دوپہر 2 بجے سے پہلے کے آرڈرز اسی دن کی ڈیلیوری کے اہل ہیں۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery3: '500 کرون سے زیادہ کے آرڈرز پر مفت ڈیلیوری۔ معیاری ڈیلیوری فیس: 49 کرون۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivery4: 'تمام مصنوعات ویکیوم سیلڈ اور انسولیٹڈ پیکجنگ میں منتقل کی جاتی ہیں۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    contactTitle: 'ہم سے رابطہ کریں',
+    // Property or array item — trailing comma allowed in TypeScript
+    address: 'Tingvallavägen 11, 195 31 Märsta',
+    // Property or array item — trailing comma allowed in TypeScript
+    privacyTitle: 'رازداری کی پالیسی',
+    // Line 438: privacyText:
+    privacyText:
+      // Property or array item — trailing comma allowed in TypeScript
+      'ہم صرف وہ معلومات جمع کرتے ہیں جو آپ کے آرڈرز پر کارروائی کے لیے ضروری ہیں — نام، رابطے کی تفصیلات اور ڈیلیوری کا پتہ۔ ہم آپ کا ڈیٹا تیسرے فریق کو نہیں بیچتے۔ ادائیگی کی تفصیلات محفوظ طریقے سے ہمارے پارٹنرز کے ذریعے سنبھالی جاتی ہیں۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    termsTitle: 'سروس کی شرائط',
+    // Line 441: termsText:
+    termsText:
+      // Property or array item — trailing comma allowed in TypeScript
+      'تمام قیمتیں SEK میں دکھائی جاتی ہیں اور بغیر اطلاع کے تبدیل ہو سکتی ہیں۔ آرڈرز دستیابی پر منحصر ہیں۔ تمام گوشت کی مصنوعات پر حلال سرٹیفیکیشن لاگو ہوتا ہے۔ ڈیلیوری کے اوقات تخمینے ہیں اور مصروف اوقات میں مختلف ہو سکتے ہیں۔',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 444: footer: {
+  footer: {
+    // Line 445: tagline:
+    tagline:
+      // Property or array item — trailing comma allowed in TypeScript
+      'پریمیم 100% حلال گوشت ڈیلیوری۔ تازہ، حسب ضرورت کٹس آپ کے دروازے تک بغیر کسی سمجھوتے کے معیار کے ساتھ پہنچائی جاتی ہیں۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    shop: 'خریداری',
+    // Property or array item — trailing comma allowed in TypeScript
+    company: 'کمپنی',
+    // Property or array item — trailing comma allowed in TypeScript
+    contact: 'رابطہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    rights: 'جملہ حقوق محفوظ ہیں۔',
+    // Property or array item — trailing comma allowed in TypeScript
+    phone: '072-585 50 50',
+    // Property or array item — trailing comma allowed in TypeScript
+    hours: 'ہر دن کھلا {hours}',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 454: notFound: {
+  notFound: {
+    // Property or array item — trailing comma allowed in TypeScript
+    title: '404',
+    // Property or array item — trailing comma allowed in TypeScript
+    message: 'صفحہ نہیں ملا',
+    // Property or array item — trailing comma allowed in TypeScript
+    goHome: 'ہوم پر جائیں',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 459: orderStatus: {
+  orderStatus: {
+    // Property or array item — trailing comma allowed in TypeScript
+    pending: 'زیر التوا',
+    // Property or array item — trailing comma allowed in TypeScript
+    confirmed: 'تصدیق شدہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    preparing: 'تیاری میں',
+    // Property or array item — trailing comma allowed in TypeScript
+    'out-for-delivery': 'ڈیلیوری کے لیے روانہ',
+    // Property or array item — trailing comma allowed in TypeScript
+    delivered: 'پہنچا دیا گیا',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+// Closing brace — end of block (function, if, object, JSX)
+};
diff --git a/docs/annotated/src/i18n/types.annotated.ts b/docs/annotated/src/i18n/types.annotated.ts
new file mode 100644
index 0000000..f1e93fb
--- /dev/null
+++ b/docs/annotated/src/i18n/types.annotated.ts
@@ -0,0 +1,28 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/i18n/types.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Export TypeScript type — defines data shape used across the app
+export type Locale = 'en' | 'sv' | 'ur';
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const LOCALES: { code: Locale; label: string; nativeLabel: string }[] = [
+  // Property or array item — trailing comma allowed in TypeScript
+  { code: 'sv', label: 'Swedish', nativeLabel: 'Svenska' },
+  // Property or array item — trailing comma allowed in TypeScript
+  { code: 'en', label: 'English', nativeLabel: 'English' },
+  // Property or array item — trailing comma allowed in TypeScript
+  { code: 'ur', label: 'Urdu', nativeLabel: 'اردو' },
+// End of array literal
+];
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const DEFAULT_LOCALE: Locale = 'sv';
+// (blank line — separates logical blocks for readability)
+// Export TypeScript type — defines data shape used across the app
+export interface TranslationDict {
+  // Line 12: [key: string]: string | TranslationDict;
+  [key: string]: string | TranslationDict;
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/lib/constants.annotated.ts b/docs/annotated/src/lib/constants.annotated.ts
new file mode 100644
index 0000000..4ef893c
--- /dev/null
+++ b/docs/annotated/src/lib/constants.annotated.ts
@@ -0,0 +1,74 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/lib/constants.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { CutCount, CuttingStyleKey } from '@/types';
+// Import from a relative file in the same project
+import { IMAGES } from './images';
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const CUT_COUNTS: CutCount[] = [4, 8, 10, 12];
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const CUTTING_STYLE_KEYS: CuttingStyleKey[] = [
+  // Property or array item — trailing comma allowed in TypeScript
+  'nihari',
+  // Property or array item — trailing comma allowed in TypeScript
+  'karahi',
+  // Property or array item — trailing comma allowed in TypeScript
+  'qeema',
+  // Property or array item — trailing comma allowed in TypeScript
+  'boneless',
+  // Property or array item — trailing comma allowed in TypeScript
+  'steak',
+// End of array literal
+];
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const MEAT_CATEGORIES = ['chicken', 'beef', 'lamb'] as const;
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const CATEGORY_IDS = ['chicken', 'beef', 'lamb', 'fish'] as const;
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const CATEGORY_IMAGES = IMAGES.categories;
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const SITE_NAME = 'Kött Gård';
+// Named export constant — shared config/data imported elsewhere
+export const SITE_EMAIL = 'hello@kottgard.se';
+// Named export constant — shared config/data imported elsewhere
+export const DEMO_EMAIL = 'demo@kottgard.se';
+// Named export constant — shared config/data imported elsewhere
+export const SITE_PHONE = '+46 72 585 50 50';
+// Named export constant — shared config/data imported elsewhere
+export const SITE_PHONE_DISPLAY = '072-585 50 50';
+// Named export constant — shared config/data imported elsewhere
+export const SITE_ADDRESS = 'Tingvallavägen 11, 195 31 Märsta';
+// Named export constant — shared config/data imported elsewhere
+export const SITE_LOCATION = 'Märsta · Sverige';
+// Named export constant — shared config/data imported elsewhere
+export const SITE_HOURS = '10:00–19:00';
+// Named export constant — shared config/data imported elsewhere
+export const FACEBOOK_URL = 'https://www.facebook.com/kottgard/';
+// Named export constant — shared config/data imported elsewhere
+export const INSTAGRAM_URL = 'https://www.instagram.com/kottgard';
+// Named export constant — shared config/data imported elsewhere
+export const MAPS_URL = 'https://share.google/fUkkhDNlhDTcImKo5';
+// (blank line — separates logical blocks for readability)
+// Line 32: const WHATSAPP_BASE = 'Hej Kött Gård! Jag vill beställa';
+const WHATSAPP_BASE = 'Hej Kött Gård! Jag vill beställa';
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function whatsappOrderUrl(product?: string): string {
+  // Line 35: const text = product ? `${WHATSAPP_BASE} ${product}.` : `...
+  const text = product ? `${WHATSAPP_BASE} ${product}.` : `${WHATSAPP_BASE}.`;
+  // Return value from function
+  return `https://wa.me/46725855050?text=${encodeURIComponent(text)}`;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const WHATSAPP_URL = whatsappOrderUrl();
diff --git a/docs/annotated/src/lib/customization.annotated.ts b/docs/annotated/src/lib/customization.annotated.ts
new file mode 100644
index 0000000..9718c71
--- /dev/null
+++ b/docs/annotated/src/lib/customization.annotated.ts
@@ -0,0 +1,114 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/lib/customization.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { Category, MeatCustomization, ProductCustomization } from '@/types';
+// (blank line — separates logical blocks for readability)
+// TypeScript type alias — union or shorthand for complex types
+type Translator = (path: string, params?: Record<string, string | number>) => string;
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function getDefaultCustomization(category: Category): ProductCustomization {
+  // Conditional branch — different behavior based on runtime value
+  if (category === 'fish') {
+    // Return value from function
+    return { type: 'fish' };
+  // Closing brace — end of block (function, if, object, JSX)
+  }
+  // Return value from function
+  return {
+    // Property or array item — trailing comma allowed in TypeScript
+    type: category,
+    // Property or array item — trailing comma allowed in TypeScript
+    cuts: 8,
+    // Property or array item — trailing comma allowed in TypeScript
+    cuttingStyle: 'karahi',
+  // Closing brace — end of block (function, if, object, JSX)
+  };
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function getCustomizationKey(customization: ProductCustomization): string {
+  // Conditional branch — different behavior based on runtime value
+  if (customization.type === 'fish') {
+    // Return value from function
+    return 'standard';
+  // Closing brace — end of block (function, if, object, JSX)
+  }
+  // Return value from function
+  return `cuts-${customization.cuts}::${customization.cuttingStyle}`;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function getCustomizationLabel(
+  // Property or array item — trailing comma allowed in TypeScript
+  customization: ProductCustomization,
+  // Line 25: t: Translator
+  t: Translator
+// Line 26: ): string {
+): string {
+  // Conditional branch — different behavior based on runtime value
+  if (customization.type === 'fish') {
+    // Return value from function
+    return t('product.standardCut');
+  // Closing brace — end of block (function, if, object, JSX)
+  }
+  // Return value from function
+  return t('product.cutsAndStyle', {
+    // Property or array item — trailing comma allowed in TypeScript
+    cuts: customization.cuts,
+    // Property or array item — trailing comma allowed in TypeScript
+    style: t(`cutting.${customization.cuttingStyle}`),
+  // Closing brace — end of block (function, if, object, JSX)
+  });
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function getCartItemKey(
+  // Property or array item — trailing comma allowed in TypeScript
+  productId: string,
+  // Line 38: customization: ProductCustomization
+  customization: ProductCustomization
+// Line 39: ): string {
+): string {
+  // Return value from function
+  return `${productId}::${getCustomizationKey(customization)}`;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function updateMeatCustomization(
+  // Property or array item — trailing comma allowed in TypeScript
+  current: ProductCustomization,
+  // Property or array item — trailing comma allowed in TypeScript
+  category: Category,
+  // Line 46: update: Partial<Pick<MeatCustomization, 'cuts' | 'cutting...
+  update: Partial<Pick<MeatCustomization, 'cuts' | 'cuttingStyle'>>
+// Line 47: ): MeatCustomization {
+): MeatCustomization {
+  // Line 48: const base =
+  const base =
+    // Line 49: current.type !== 'fish' && current.type === category
+    current.type !== 'fish' && current.type === category
+      // Line 50: ? current
+      ? current
+      // Line 51: : (getDefaultCustomization(category) as MeatCustomization);
+      : (getDefaultCustomization(category) as MeatCustomization);
+// (blank line — separates logical blocks for readability)
+  // Return value from function
+  return {
+    // Property or array item — trailing comma allowed in TypeScript
+    type: category as MeatCustomization['type'],
+    // Property or array item — trailing comma allowed in TypeScript
+    cuts: update.cuts ?? base.cuts,
+    // Property or array item — trailing comma allowed in TypeScript
+    cuttingStyle: update.cuttingStyle ?? base.cuttingStyle,
+  // Closing brace — end of block (function, if, object, JSX)
+  };
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/lib/demo-orders.annotated.ts b/docs/annotated/src/lib/demo-orders.annotated.ts
new file mode 100644
index 0000000..1d832a4
--- /dev/null
+++ b/docs/annotated/src/lib/demo-orders.annotated.ts
@@ -0,0 +1,128 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/lib/demo-orders.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { Order } from '@/types';
+// Import from a relative file in the same project
+import { products } from './products';
+// Import from a relative file in the same project
+import { getDefaultCustomization, getCartItemKey } from './customization';
+// (blank line — separates logical blocks for readability)
+// Function declaration — reusable logic in this file
+function orderItem(
+  // Property or array item — trailing comma allowed in TypeScript
+  productId: string,
+  // Property or array item — trailing comma allowed in TypeScript
+  quantity: number,
+  // Line 8: customizationLabel: string
+  customizationLabel: string
+// Line 9: ) {
+) {
+  // Array.find — get first matching item or undefined
+  const product = products.find((p) => p.id === productId)!;
+  // Line 11: const customization = getDefaultCustomization(product.cat...
+  const customization = getDefaultCustomization(product.category);
+  // Return value from function
+  return {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: getCartItemKey(productId, customization),
+    // Property or array item — trailing comma allowed in TypeScript
+    product,
+    // Property or array item — trailing comma allowed in TypeScript
+    quantity,
+    // Property or array item — trailing comma allowed in TypeScript
+    customization,
+    // Property or array item — trailing comma allowed in TypeScript
+    customizationLabel,
+  // Closing brace — end of block (function, if, object, JSX)
+  };
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Line 21: const demoAddress = {
+const demoAddress = {
+  // Property or array item — trailing comma allowed in TypeScript
+  street: 'Tingvallavägen 11',
+  // Property or array item — trailing comma allowed in TypeScript
+  city: 'Märsta',
+  // Property or array item — trailing comma allowed in TypeScript
+  state: 'Stockholm',
+  // Property or array item — trailing comma allowed in TypeScript
+  zip: '195 31',
+// Closing brace — end of block (function, if, object, JSX)
+};
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const DEMO_ORDERS: Order[] = [
+  // Line 29: {
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'KG-2026-0042',
+    // Line 31: items: [
+    items: [
+      // Property or array item — trailing comma allowed in TypeScript
+      orderItem('beef-steak', 2, '8 cuts · Karahi'),
+      // Property or array item — trailing comma allowed in TypeScript
+      orderItem('lamb-shoulder', 1, '8 cuts · Nihari'),
+    // End of array literal
+    ],
+    // Property or array item — trailing comma allowed in TypeScript
+    total: 647,
+    // Property or array item — trailing comma allowed in TypeScript
+    status: 'delivered',
+    // Property or array item — trailing comma allowed in TypeScript
+    createdAt: '2026-06-10T14:30:00.000Z',
+    // Property or array item — trailing comma allowed in TypeScript
+    deliveryAddress: demoAddress,
+    // Property or array item — trailing comma allowed in TypeScript
+    paymentMethod: 'card',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 41: {
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'KG-2026-0051',
+    // Line 43: items: [
+    items: [
+      // Property or array item — trailing comma allowed in TypeScript
+      orderItem('chicken-whole', 2, '8 cuts · Karahi'),
+      // Property or array item — trailing comma allowed in TypeScript
+      orderItem('beef-mince', 1, '8 cuts · Qeema'),
+      // Property or array item — trailing comma allowed in TypeScript
+      orderItem('fish-prawns', 1, 'Standard cut'),
+    // End of array literal
+    ],
+    // Property or array item — trailing comma allowed in TypeScript
+    total: 556,
+    // Property or array item — trailing comma allowed in TypeScript
+    status: 'out-for-delivery',
+    // Property or array item — trailing comma allowed in TypeScript
+    createdAt: '2026-06-16T09:15:00.000Z',
+    // Property or array item — trailing comma allowed in TypeScript
+    deliveryAddress: demoAddress,
+    // Property or array item — trailing comma allowed in TypeScript
+    paymentMethod: 'swish',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 54: {
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'KG-2026-0058',
+    // Property or array item — trailing comma allowed in TypeScript
+    items: [orderItem('lamb-leg', 1, '8 cuts · Steak'), orderItem('fish-salmon', 1, 'Standard cut')],
+    // Property or array item — trailing comma allowed in TypeScript
+    total: 418,
+    // Property or array item — trailing comma allowed in TypeScript
+    status: 'preparing',
+    // Property or array item — trailing comma allowed in TypeScript
+    createdAt: '2026-06-17T08:00:00.000Z',
+    // Property or array item — trailing comma allowed in TypeScript
+    deliveryAddress: demoAddress,
+    // Property or array item — trailing comma allowed in TypeScript
+    paymentMethod: 'card',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+// End of array literal
+];
diff --git a/docs/annotated/src/lib/images.annotated.ts b/docs/annotated/src/lib/images.annotated.ts
new file mode 100644
index 0000000..3a7df26
--- /dev/null
+++ b/docs/annotated/src/lib/images.annotated.ts
@@ -0,0 +1,170 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/lib/images.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Block comment — documents the file or function below
+/**
+ // Block comment — documents the file or function below
+ * All imagery: raw, fresh, uncooked meat & seafood only.
+ // Block comment — documents the file or function below
+ * High-quality Unsplash photos (verified URLs).
+ // Block comment — documents the file or function below
+ */
+// (blank line — separates logical blocks for readability)
+// TypeScript type alias — union or shorthand for complex types
+type UnsplashOptions = {
+  // Line 7: height?: number;
+  height?: number;
+  // Line 8: crop?: 'center' | 'top' | 'bottom' | 'entropy';
+  crop?: 'center' | 'top' | 'bottom' | 'entropy';
+// Closing brace — end of block (function, if, object, JSX)
+};
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function unsplashUrl(
+  // Property or array item — trailing comma allowed in TypeScript
+  path: string,
+  // Property or array item — trailing comma allowed in TypeScript
+  width: number,
+  // Line 14: options?: UnsplashOptions
+  options?: UnsplashOptions
+// Line 15: ): string {
+): string {
+  // Line 16: const id = path.startsWith('photo-') ? path : `photo-${pa...
+  const id = path.startsWith('photo-') ? path : `photo-${path}`;
+  // Line 17: const params = new URLSearchParams({
+  const params = new URLSearchParams({
+    // Property or array item — trailing comma allowed in TypeScript
+    auto: 'format',
+    // Property or array item — trailing comma allowed in TypeScript
+    fit: 'crop',
+    // Property or array item — trailing comma allowed in TypeScript
+    w: String(width),
+    // Property or array item — trailing comma allowed in TypeScript
+    q: '90',
+  // Closing brace — end of block (function, if, object, JSX)
+  });
+  // Conditional branch — different behavior based on runtime value
+  if (options?.height) params.set('h', String(options.height));
+  // Conditional branch — different behavior based on runtime value
+  if (options?.crop) params.set('crop', options.crop);
+  // Return value from function
+  return `https://images.unsplash.com/${id}?${params.toString()}`;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Block comment — documents the file or function below
+/** Verified raw-meat & seafood Unsplash IDs */
+// Line 29: const RAW = {
+const RAW = {
+  // Property or array item — trailing comma allowed in TypeScript
+  butcherCounter: 'photo-1607623814075-e51df1bdc82f',
+  // Property or array item — trailing comma allowed in TypeScript
+  meatPrep: 'photo-1529692236671-f1f6cf9683ba',
+  // Property or array item — trailing comma allowed in TypeScript
+  chickenPieces: 'photo-1587593810167-a84920ea0781',
+  // Property or array item — trailing comma allowed in TypeScript
+  rawChicken: 'photo-1621996346565-e3dbc646d9a9',
+  // Property or array item — trailing comma allowed in TypeScript
+  beefSteaks: 'photo-1558030006-450675393462',
+  // Property or array item — trailing comma allowed in TypeScript
+  beefRibeye: 'photo-1559847844-5315695dadae',
+  // Property or array item — trailing comma allowed in TypeScript
+  lambRack: 'photo-1615937657715-bc7b4b7962c1',
+  // Property or array item — trailing comma allowed in TypeScript
+  beefCubes: 'photo-1546833999-b9f581a1996d',
+  // Property or array item — trailing comma allowed in TypeScript
+  beefMince: 'photo-1603048297172-c92544798d5a',
+  // Property or array item — trailing comma allowed in TypeScript
+  lambLeg: 'photo-1544025162-d76694265947',
+  // Property or array item — trailing comma allowed in TypeScript
+  lambChops: 'photo-1574672280600-4accfa5b6f98',
+  // Property or array item — trailing comma allowed in TypeScript
+  salmonFillet: 'photo-1544551763-46a013bb70d5',
+  // Property or array item — trailing comma allowed in TypeScript
+  rawPrawns: 'photo-1565680018434-b513d5e5fd47',
+  // Property or array item — trailing comma allowed in TypeScript
+  seafoodDisplay: 'photo-1504674900247-0877df9cc836',
+// Closing brace — end of block (function, if, object, JSX)
+} as const;
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const IMAGES = {
+  // Property or array item — trailing comma allowed in TypeScript
+  logo: '/images/kottgard-logo.jpeg',
+  // Property or array item — trailing comma allowed in TypeScript
+  hero: unsplashUrl(RAW.butcherCounter, 2560),
+  // Property or array item — trailing comma allowed in TypeScript
+  aboutMeat: unsplashUrl(RAW.meatPrep, 1920),
+  // Line 50: categories: {
+  categories: {
+    // Property or array item — trailing comma allowed in TypeScript
+    chicken: unsplashUrl(RAW.chickenPieces, 1400),
+    // Property or array item — trailing comma allowed in TypeScript
+    beef: unsplashUrl(RAW.beefSteaks, 1400),
+    // Property or array item — trailing comma allowed in TypeScript
+    lamb: unsplashUrl(RAW.lambRack, 1400),
+    // Property or array item — trailing comma allowed in TypeScript
+    fish: unsplashUrl(RAW.salmonFillet, 1400),
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 56: products: {
+  products: {
+    // Property or array item — trailing comma allowed in TypeScript
+    'chicken-whole': unsplashUrl(RAW.rawChicken, 1400),
+    // Line 58: 'chicken-breast': unsplashUrl(RAW.chickenPieces, 1400, {
+    'chicken-breast': unsplashUrl(RAW.chickenPieces, 1400, {
+      // Property or array item — trailing comma allowed in TypeScript
+      height: 1000,
+      // Property or array item — trailing comma allowed in TypeScript
+      crop: 'center',
+    // Closing brace — end of block (function, if, object, JSX)
+    }),
+    // Line 62: 'chicken-thighs': unsplashUrl(RAW.rawChicken, 1400, {
+    'chicken-thighs': unsplashUrl(RAW.rawChicken, 1400, {
+      // Property or array item — trailing comma allowed in TypeScript
+      height: 1100,
+      // Property or array item — trailing comma allowed in TypeScript
+      crop: 'entropy',
+    // Closing brace — end of block (function, if, object, JSX)
+    }),
+    // Line 66: 'chicken-wings': unsplashUrl(RAW.chickenPieces, 1400, {
+    'chicken-wings': unsplashUrl(RAW.chickenPieces, 1400, {
+      // Property or array item — trailing comma allowed in TypeScript
+      height: 900,
+      // Property or array item — trailing comma allowed in TypeScript
+      crop: 'top',
+    // Closing brace — end of block (function, if, object, JSX)
+    }),
+    // Property or array item — trailing comma allowed in TypeScript
+    'beef-nihari': unsplashUrl(RAW.beefCubes, 1400),
+    // Property or array item — trailing comma allowed in TypeScript
+    'beef-steak': unsplashUrl(RAW.beefRibeye, 1400),
+    // Property or array item — trailing comma allowed in TypeScript
+    'beef-mince': unsplashUrl(RAW.beefMince, 1400),
+    // Property or array item — trailing comma allowed in TypeScript
+    'beef-boneless': unsplashUrl(RAW.beefSteaks, 1400, { height: 1000, crop: 'center' }),
+    // Property or array item — trailing comma allowed in TypeScript
+    'lamb-shoulder': unsplashUrl(RAW.lambRack, 1400),
+    // Property or array item — trailing comma allowed in TypeScript
+    'lamb-leg': unsplashUrl(RAW.lambLeg, 1400),
+    // Property or array item — trailing comma allowed in TypeScript
+    'lamb-chops': unsplashUrl(RAW.lambChops, 1400),
+    // Property or array item — trailing comma allowed in TypeScript
+    'lamb-mince': unsplashUrl(RAW.lambChops, 1400, { height: 1000, crop: 'center' }),
+    // Property or array item — trailing comma allowed in TypeScript
+    'fish-salmon': unsplashUrl(RAW.salmonFillet, 1400),
+    // Property or array item — trailing comma allowed in TypeScript
+    'fish-rohu': unsplashUrl(RAW.seafoodDisplay, 1400, { height: 1100, crop: 'entropy' }),
+    // Property or array item — trailing comma allowed in TypeScript
+    'fish-prawns': unsplashUrl(RAW.rawPrawns, 1400),
+    // Property or array item — trailing comma allowed in TypeScript
+    'fish-basa': unsplashUrl(RAW.salmonFillet, 1400, { height: 900, crop: 'center' }),
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+// Closing brace — end of block (function, if, object, JSX)
+} as const;
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const IMAGE_QUALITY = 90;
diff --git a/docs/annotated/src/lib/offers.annotated.ts b/docs/annotated/src/lib/offers.annotated.ts
new file mode 100644
index 0000000..47d3146
--- /dev/null
+++ b/docs/annotated/src/lib/offers.annotated.ts
@@ -0,0 +1,78 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/lib/offers.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { WeeklyOffer } from '@/types';
+// Import from a relative file in the same project
+import { IMAGES } from './images';
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const weeklyOffers: WeeklyOffer[] = [
+  // Line 5: {
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'chicken-wings-pl',
+    // Property or array item — trailing comma allowed in TypeScript
+    nameKey: 'offers.items.chickenWings',
+    // Property or array item — trailing comma allowed in TypeScript
+    badgeKey: 'fresh',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 49.99,
+    // Property or array item — trailing comma allowed in TypeScript
+    originalPrice: 59.99,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perKg',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: IMAGES.products['chicken-wings'],
+    // Property or array item — trailing comma allowed in TypeScript
+    whatsappProduct: 'Kycklingvingar färsk PL',
+    // Property or array item — trailing comma allowed in TypeScript
+    productSlug: 'chicken-wings',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 16: {
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'lamb-steak-ireland',
+    // Property or array item — trailing comma allowed in TypeScript
+    nameKey: 'offers.items.lambSteak',
+    // Property or array item — trailing comma allowed in TypeScript
+    badgeKey: 'halal',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 204.99,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perKg',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: IMAGES.categories.lamb,
+    // Property or array item — trailing comma allowed in TypeScript
+    whatsappProduct: 'Lammstek färsk Ireland',
+    // Property or array item — trailing comma allowed in TypeScript
+    productSlug: 'lamb-leg',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Line 26: {
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'beef-mince-irl',
+    // Property or array item — trailing comma allowed in TypeScript
+    nameKey: 'offers.items.beefMince',
+    // Property or array item — trailing comma allowed in TypeScript
+    badgeKey: 'fresh',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 139.99,
+    // Property or array item — trailing comma allowed in TypeScript
+    originalPrice: 159.99,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perKg',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: IMAGES.products['beef-mince'],
+    // Property or array item — trailing comma allowed in TypeScript
+    whatsappProduct: 'Nötfärs 5% fett IRL',
+    // Property or array item — trailing comma allowed in TypeScript
+    productSlug: 'beef-mince',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+// End of array literal
+];
diff --git a/docs/annotated/src/lib/product-i18n.annotated.ts b/docs/annotated/src/lib/product-i18n.annotated.ts
new file mode 100644
index 0000000..199b92f
--- /dev/null
+++ b/docs/annotated/src/lib/product-i18n.annotated.ts
@@ -0,0 +1,88 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/lib/product-i18n.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { Product } from '@/types';
+// (blank line — separates logical blocks for readability)
+// TypeScript type alias — union or shorthand for complex types
+type Translator = (path: string, params?: Record<string, string | number>) => string;
+// (blank line — separates logical blocks for readability)
+// Export TypeScript type — defines data shape used across the app
+export interface LocalizedProduct {
+  // Line 6: id: string;
+  id: string;
+  // Line 7: slug: string;
+  slug: string;
+  // Line 8: category: Product['category'];
+  category: Product['category'];
+  // Line 9: name: string;
+  name: string;
+  // Line 10: description: string;
+  description: string;
+  // Line 11: longDescription: string;
+  longDescription: string;
+  // Line 12: price: number;
+  price: number;
+  // Line 13: priceUnit: string;
+  priceUnit: string;
+  // Line 14: image: string;
+  image: string;
+  // Line 15: images: string[];
+  images: string[];
+  // Line 16: badge?: string;
+  badge?: string;
+  // Line 17: inStock: boolean;
+  inStock: boolean;
+  // Line 18: featured: boolean;
+  featured: boolean;
+  // Line 19: weight?: string;
+  weight?: string;
+  // Line 20: tags: string[];
+  tags: string[];
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function localizeProduct(product: Product, t: Translator): LocalizedProduct {
+  // Line 24: const base = `products.${product.id}`;
+  const base = `products.${product.id}`;
+// (blank line — separates logical blocks for readability)
+  // Return value from function
+  return {
+    // Property or array item — trailing comma allowed in TypeScript
+    ...product,
+    // Property or array item — trailing comma allowed in TypeScript
+    name: t(`${base}.name`),
+    // Property or array item — trailing comma allowed in TypeScript
+    description: t(`${base}.description`),
+    // Property or array item — trailing comma allowed in TypeScript
+    longDescription: t(`${base}.longDescription`),
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnit: t(`priceUnit.${product.priceUnitKey}`),
+    // Property or array item — trailing comma allowed in TypeScript
+    badge: product.badgeKey ? t(`badges.${product.badgeKey}`) : undefined,
+  // Closing brace — end of block (function, if, object, JSX)
+  };
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function localizeCategory(
+  // Property or array item — trailing comma allowed in TypeScript
+  categoryId: Product['category'],
+  // Line 38: t: Translator
+  t: Translator
+// Line 39: ): { name: string; description: string } {
+): { name: string; description: string } {
+  // Return value from function
+  return {
+    // Property or array item — trailing comma allowed in TypeScript
+    name: t(`categories.${categoryId}.name`),
+    // Property or array item — trailing comma allowed in TypeScript
+    description: t(`categories.${categoryId}.description`),
+  // Closing brace — end of block (function, if, object, JSX)
+  };
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/lib/products.annotated.ts b/docs/annotated/src/lib/products.annotated.ts
new file mode 100644
index 0000000..9cb8922
--- /dev/null
+++ b/docs/annotated/src/lib/products.annotated.ts
@@ -0,0 +1,464 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/lib/products.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { Product } from '@/types';
+// Import from a relative file in the same project
+import { IMAGES } from './images';
+// (blank line — separates logical blocks for readability)
+// Product catalog entry — demo data shown in shop and product pages
+const P = IMAGES.products;
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const products: Product[] = [
+  // Product catalog entry — demo data shown in shop and product pages
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'chicken-whole',
+    // Property or array item — trailing comma allowed in TypeScript
+    slug: 'whole-chicken',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'chicken',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 129,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perBird',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: P['chicken-whole'],
+    // Property or array item — trailing comma allowed in TypeScript
+    images: [P['chicken-whole'], P['chicken-breast']],
+    // Property or array item — trailing comma allowed in TypeScript
+    badgeKey: 'bestseller',
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    featured: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    weight: '1.2–1.5 kg',
+    // Property or array item — trailing comma allowed in TypeScript
+    tags: ['fresh', 'whole', 'popular'],
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Product catalog entry — demo data shown in shop and product pages
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'chicken-breast',
+    // Property or array item — trailing comma allowed in TypeScript
+    slug: 'chicken-breast',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'chicken',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 99,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perPack',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: P['chicken-breast'],
+    // Property or array item — trailing comma allowed in TypeScript
+    images: [P['chicken-breast'], P['chicken-whole']],
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    featured: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    weight: '500g–1kg',
+    // Property or array item — trailing comma allowed in TypeScript
+    tags: ['fresh', 'boneless', 'lean'],
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Product catalog entry — demo data shown in shop and product pages
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'chicken-thighs',
+    // Property or array item — trailing comma allowed in TypeScript
+    slug: 'chicken-thighs',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'chicken',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 85,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perPack',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: P['chicken-thighs'],
+    // Property or array item — trailing comma allowed in TypeScript
+    images: [P['chicken-thighs']],
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    featured: false,
+    // Property or array item — trailing comma allowed in TypeScript
+    weight: '500g–1kg',
+    // Property or array item — trailing comma allowed in TypeScript
+    tags: ['fresh', 'juicy'],
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Product catalog entry — demo data shown in shop and product pages
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'chicken-wings',
+    // Property or array item — trailing comma allowed in TypeScript
+    slug: 'chicken-wings',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'chicken',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 79,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perPack',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: P['chicken-wings'],
+    // Property or array item — trailing comma allowed in TypeScript
+    images: [P['chicken-wings']],
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    featured: false,
+    // Property or array item — trailing comma allowed in TypeScript
+    tags: ['fresh', 'party'],
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Product catalog entry — demo data shown in shop and product pages
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'beef-nihari',
+    // Property or array item — trailing comma allowed in TypeScript
+    slug: 'beef-for-nihari',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'beef',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 149,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perKg',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: P['beef-nihari'],
+    // Property or array item — trailing comma allowed in TypeScript
+    images: [P['beef-nihari'], P['beef-steak']],
+    // Property or array item — trailing comma allowed in TypeScript
+    badgeKey: 'chefsPick',
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    featured: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    weight: '1 kg',
+    // Property or array item — trailing comma allowed in TypeScript
+    tags: ['fresh', 'traditional'],
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Product catalog entry — demo data shown in shop and product pages
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'beef-steak',
+    // Property or array item — trailing comma allowed in TypeScript
+    slug: 'premium-beef-steak',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'beef',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 229,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perKg',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: P['beef-steak'],
+    // Property or array item — trailing comma allowed in TypeScript
+    images: [P['beef-steak'], P['beef-nihari']],
+    // Property or array item — trailing comma allowed in TypeScript
+    badgeKey: 'premium',
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    featured: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    weight: '1 kg',
+    // Property or array item — trailing comma allowed in TypeScript
+    tags: ['premium', 'steak'],
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Product catalog entry — demo data shown in shop and product pages
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'beef-mince',
+    // Property or array item — trailing comma allowed in TypeScript
+    slug: 'beef-mince',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'beef',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 119,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perKg',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: P['beef-mince'],
+    // Property or array item — trailing comma allowed in TypeScript
+    images: [P['beef-mince']],
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    featured: false,
+    // Property or array item — trailing comma allowed in TypeScript
+    weight: '500g–1kg',
+    // Property or array item — trailing comma allowed in TypeScript
+    tags: ['fresh', 'mince'],
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Product catalog entry — demo data shown in shop and product pages
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'beef-boneless',
+    // Property or array item — trailing comma allowed in TypeScript
+    slug: 'boneless-beef-cubes',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'beef',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 169,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perKg',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: P['beef-boneless'],
+    // Property or array item — trailing comma allowed in TypeScript
+    images: [P['beef-boneless']],
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    featured: false,
+    // Property or array item — trailing comma allowed in TypeScript
+    weight: '1 kg',
+    // Property or array item — trailing comma allowed in TypeScript
+    tags: ['fresh', 'boneless'],
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Product catalog entry — demo data shown in shop and product pages
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'lamb-shoulder',
+    // Property or array item — trailing comma allowed in TypeScript
+    slug: 'lamb-shoulder',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'lamb',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 189,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perKg',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: P['lamb-shoulder'],
+    // Property or array item — trailing comma allowed in TypeScript
+    images: [P['lamb-shoulder'], P['lamb-leg']],
+    // Property or array item — trailing comma allowed in TypeScript
+    badgeKey: 'popular',
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    featured: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    weight: '1 kg',
+    // Property or array item — trailing comma allowed in TypeScript
+    tags: ['fresh', 'traditional'],
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Product catalog entry — demo data shown in shop and product pages
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'lamb-leg',
+    // Property or array item — trailing comma allowed in TypeScript
+    slug: 'lamb-leg',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'lamb',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 219,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perKg',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: P['lamb-leg'],
+    // Property or array item — trailing comma allowed in TypeScript
+    images: [P['lamb-leg']],
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    featured: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    weight: '1–2 kg',
+    // Property or array item — trailing comma allowed in TypeScript
+    tags: ['premium', 'roast'],
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Product catalog entry — demo data shown in shop and product pages
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'lamb-chops',
+    // Property or array item — trailing comma allowed in TypeScript
+    slug: 'lamb-chops',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'lamb',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 249,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perKg',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: P['lamb-chops'],
+    // Property or array item — trailing comma allowed in TypeScript
+    images: [P['lamb-chops']],
+    // Property or array item — trailing comma allowed in TypeScript
+    badgeKey: 'premium',
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    featured: false,
+    // Property or array item — trailing comma allowed in TypeScript
+    weight: '500g',
+    // Property or array item — trailing comma allowed in TypeScript
+    tags: ['premium', 'grill'],
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Product catalog entry — demo data shown in shop and product pages
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'lamb-mince',
+    // Property or array item — trailing comma allowed in TypeScript
+    slug: 'lamb-mince',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'lamb',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 159,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perKg',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: P['lamb-mince'],
+    // Property or array item — trailing comma allowed in TypeScript
+    images: [P['lamb-mince']],
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    featured: false,
+    // Property or array item — trailing comma allowed in TypeScript
+    weight: '500g–1kg',
+    // Property or array item — trailing comma allowed in TypeScript
+    tags: ['fresh', 'mince'],
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Product catalog entry — demo data shown in shop and product pages
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'fish-salmon',
+    // Property or array item — trailing comma allowed in TypeScript
+    slug: 'atlantic-salmon-fillet',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'fish',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 199,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perKg',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: P['fish-salmon'],
+    // Property or array item — trailing comma allowed in TypeScript
+    images: [P['fish-salmon'], P['fish-rohu']],
+    // Property or array item — trailing comma allowed in TypeScript
+    badgeKey: 'freshCatch',
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    featured: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    weight: '500g',
+    // Property or array item — trailing comma allowed in TypeScript
+    tags: ['fresh', 'fillet'],
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Product catalog entry — demo data shown in shop and product pages
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'fish-rohu',
+    // Property or array item — trailing comma allowed in TypeScript
+    slug: 'rohu-fish',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'fish',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 119,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perKg',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: P['fish-rohu'],
+    // Property or array item — trailing comma allowed in TypeScript
+    images: [P['fish-rohu']],
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    featured: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    weight: '1–1.5 kg',
+    // Property or array item — trailing comma allowed in TypeScript
+    tags: ['fresh', 'whole'],
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Product catalog entry — demo data shown in shop and product pages
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'fish-prawns',
+    // Property or array item — trailing comma allowed in TypeScript
+    slug: 'jumbo-prawns',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'fish',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 179,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perKg',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: P['fish-prawns'],
+    // Property or array item — trailing comma allowed in TypeScript
+    images: [P['fish-prawns']],
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    featured: false,
+    // Property or array item — trailing comma allowed in TypeScript
+    weight: '500g',
+    // Property or array item — trailing comma allowed in TypeScript
+    tags: ['fresh', 'seafood'],
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Product catalog entry — demo data shown in shop and product pages
+  {
+    // Property or array item — trailing comma allowed in TypeScript
+    id: 'fish-basa',
+    // Property or array item — trailing comma allowed in TypeScript
+    slug: 'basa-fillet',
+    // Property or array item — trailing comma allowed in TypeScript
+    category: 'fish',
+    // Property or array item — trailing comma allowed in TypeScript
+    price: 109,
+    // Property or array item — trailing comma allowed in TypeScript
+    priceUnitKey: 'perKg',
+    // Property or array item — trailing comma allowed in TypeScript
+    image: P['fish-basa'],
+    // Property or array item — trailing comma allowed in TypeScript
+    images: [P['fish-basa']],
+    // Property or array item — trailing comma allowed in TypeScript
+    inStock: true,
+    // Property or array item — trailing comma allowed in TypeScript
+    featured: false,
+    // Property or array item — trailing comma allowed in TypeScript
+    weight: '500g',
+    // Property or array item — trailing comma allowed in TypeScript
+    tags: ['fresh', 'fillet', 'mild'],
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+// End of array literal
+];
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function getProductBySlug(slug: string): Product | undefined {
+  // Return value from function
+  return products.find((p) => p.slug === slug);
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function getProductsByCategory(category: string): Product[] {
+  // Return value from function
+  return products.filter((p) => p.category === category);
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function getFeaturedProducts(): Product[] {
+  // Return value from function
+  return products.filter((p) => p.featured);
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/lib/utils.annotated.ts b/docs/annotated/src/lib/utils.annotated.ts
new file mode 100644
index 0000000..01f9796
--- /dev/null
+++ b/docs/annotated/src/lib/utils.annotated.ts
@@ -0,0 +1,59 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/lib/utils.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Import external package or local module
+import { clsx, type ClassValue } from 'clsx';
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function cn(...inputs: ClassValue[]) {
+  // Return value from function
+  return clsx(inputs);
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function formatPrice(price: number, locale = 'sv-SE'): string {
+  // Return value from function
+  return new Intl.NumberFormat(locale, {
+    // Property or array item — trailing comma allowed in TypeScript
+    style: 'currency',
+    // Property or array item — trailing comma allowed in TypeScript
+    currency: 'SEK',
+  // Closing brace — end of block (function, if, object, JSX)
+  }).format(price);
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function getFormatLocale(locale: string): string {
+  // Line 15: const map: Record<string, string> = {
+  const map: Record<string, string> = {
+    // Property or array item — trailing comma allowed in TypeScript
+    en: 'en-US',
+    // Property or array item — trailing comma allowed in TypeScript
+    sv: 'sv-SE',
+    // Property or array item — trailing comma allowed in TypeScript
+    ur: 'ur-PK',
+  // Closing brace — end of block (function, if, object, JSX)
+  };
+  // Return value from function
+  return map[locale] ?? 'en-US';
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function formatDate(date: string): string {
+  // Return value from function
+  return new Intl.DateTimeFormat('en-US', {
+    // Property or array item — trailing comma allowed in TypeScript
+    year: 'numeric',
+    // Property or array item — trailing comma allowed in TypeScript
+    month: 'long',
+    // Property or array item — trailing comma allowed in TypeScript
+    day: 'numeric',
+  // Closing brace — end of block (function, if, object, JSX)
+  }).format(new Date(date));
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/annotated/src/store/auth.annotated.ts b/docs/annotated/src/store/auth.annotated.ts
new file mode 100644
index 0000000..d145a73
--- /dev/null
+++ b/docs/annotated/src/store/auth.annotated.ts
@@ -0,0 +1,179 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/store/auth.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Zustand — simple global state store (cart, auth, locale)
+import { create } from 'zustand';
+// Zustand — simple global state store (cart, auth, locale)
+import { persist } from 'zustand/middleware';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { Address, Order, User } from '@/types';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { DEMO_EMAIL } from '@/lib/constants';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { DEMO_ORDERS } from '@/lib/demo-orders';
+// (blank line — separates logical blocks for readability)
+// TypeScript interface — contract for object properties and methods
+interface AuthState {
+  // Line 8: user: User | null;
+  user: User | null;
+  // Line 9: orders: Order[];
+  orders: Order[];
+  // Line 10: isAuthenticated: boolean;
+  isAuthenticated: boolean;
+  // Line 11: login: (email: string, password: string) => boolean;
+  login: (email: string, password: string) => boolean;
+  // Line 12: register: (data: {
+  register: (data: {
+    // Line 13: name: string;
+    name: string;
+    // Line 14: email: string;
+    email: string;
+    // Line 15: password: string;
+    password: string;
+    // Line 16: phone: string;
+    phone: string;
+    // Line 17: address: Address;
+    address: Address;
+  // Closing brace — end of block (function, if, object, JSX)
+  }) => boolean;
+  // Line 19: logout: () => void;
+  logout: () => void;
+  // Line 20: updateProfile: (data: Partial<User>) => void;
+  updateProfile: (data: Partial<User>) => void;
+  // Line 21: addOrder: (order: Order) => void;
+  addOrder: (order: Order) => void;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Line 24: const DEMO_USER: User = {
+const DEMO_USER: User = {
+  // Property or array item — trailing comma allowed in TypeScript
+  id: 'demo-1',
+  // Property or array item — trailing comma allowed in TypeScript
+  name: 'Ahmed Khan',
+  // Property or array item — trailing comma allowed in TypeScript
+  email: DEMO_EMAIL,
+  // Property or array item — trailing comma allowed in TypeScript
+  phone: '+46 72 585 50 50',
+  // Line 29: address: {
+  address: {
+    // Property or array item — trailing comma allowed in TypeScript
+    street: 'Tingvallavägen 11',
+    // Property or array item — trailing comma allowed in TypeScript
+    city: 'Märsta',
+    // Property or array item — trailing comma allowed in TypeScript
+    state: 'Stockholm',
+    // Property or array item — trailing comma allowed in TypeScript
+    zip: '195 31',
+  // Closing brace — end of block (function, if, object, JSX)
+  },
+  // Property or array item — trailing comma allowed in TypeScript
+  createdAt: '2025-03-15T10:00:00.000Z',
+// Closing brace — end of block (function, if, object, JSX)
+};
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const useAuthStore = create<AuthState>()(
+  // Zustand persist — save store to localStorage between visits
+  persist(
+    // Line 40: (set, get) => ({
+    (set, get) => ({
+      // Property or array item — trailing comma allowed in TypeScript
+      user: null,
+      // Property or array item — trailing comma allowed in TypeScript
+      orders: [],
+      // Property or array item — trailing comma allowed in TypeScript
+      isAuthenticated: false,
+// (blank line — separates logical blocks for readability)
+      // Line 45: login: (email, password) => {
+      login: (email, password) => {
+        // Conditional branch — different behavior based on runtime value
+        if (email === DEMO_EMAIL && password === 'demo123') {
+          // Line 47: const existingOrders = get().orders;
+          const existingOrders = get().orders;
+          // Line 48: set({
+          set({
+            // Property or array item — trailing comma allowed in TypeScript
+            user: DEMO_USER,
+            // Property or array item — trailing comma allowed in TypeScript
+            isAuthenticated: true,
+            // Property or array item — trailing comma allowed in TypeScript
+            orders: existingOrders.length > 0 ? existingOrders : DEMO_ORDERS,
+          // Closing brace — end of block (function, if, object, JSX)
+          });
+          // Return value from function
+          return true;
+        // Closing brace — end of block (function, if, object, JSX)
+        }
+        // Line 55: const stored = get().user;
+        const stored = get().user;
+        // Conditional branch — different behavior based on runtime value
+        if (stored && stored.email === email) {
+          // Line 57: set({ isAuthenticated: true });
+          set({ isAuthenticated: true });
+          // Return value from function
+          return true;
+        // Closing brace — end of block (function, if, object, JSX)
+        }
+        // Return value from function
+        return false;
+      // Closing brace — end of block (function, if, object, JSX)
+      },
+// (blank line — separates logical blocks for readability)
+      // Line 63: register: (data) => {
+      register: (data) => {
+        // Line 64: const user: User = {
+        const user: User = {
+          // Property or array item — trailing comma allowed in TypeScript
+          id: `user-${Date.now()}`,
+          // Property or array item — trailing comma allowed in TypeScript
+          name: data.name,
+          // Property or array item — trailing comma allowed in TypeScript
+          email: data.email,
+          // Property or array item — trailing comma allowed in TypeScript
+          phone: data.phone,
+          // Property or array item — trailing comma allowed in TypeScript
+          address: data.address,
+          // Property or array item — trailing comma allowed in TypeScript
+          createdAt: new Date().toISOString(),
+        // Closing brace — end of block (function, if, object, JSX)
+        };
+        // Line 72: set({ user, isAuthenticated: true });
+        set({ user, isAuthenticated: true });
+        // Return value from function
+        return true;
+      // Closing brace — end of block (function, if, object, JSX)
+      },
+// (blank line — separates logical blocks for readability)
+      // Property or array item — trailing comma allowed in TypeScript
+      logout: () => set({ isAuthenticated: false }),
+// (blank line — separates logical blocks for readability)
+      // Line 78: updateProfile: (data) => {
+      updateProfile: (data) => {
+        // Line 79: const current = get().user;
+        const current = get().user;
+        // Conditional branch — different behavior based on runtime value
+        if (current) {
+          // Line 81: set({ user: { ...current, ...data } });
+          set({ user: { ...current, ...data } });
+        // Closing brace — end of block (function, if, object, JSX)
+        }
+      // Closing brace — end of block (function, if, object, JSX)
+      },
+// (blank line — separates logical blocks for readability)
+      // Line 85: addOrder: (order) => {
+      addOrder: (order) => {
+        // Line 86: set({ orders: [order, ...get().orders] });
+        set({ orders: [order, ...get().orders] });
+      // Closing brace — end of block (function, if, object, JSX)
+      },
+    // Closing brace — end of block (function, if, object, JSX)
+    }),
+    // Line 89: { name: 'kott-gard-auth' }
+    { name: 'kott-gard-auth' }
+  // Line 90: )
+  )
+// Line 91: );
+);
diff --git a/docs/annotated/src/store/cart.annotated.ts b/docs/annotated/src/store/cart.annotated.ts
new file mode 100644
index 0000000..1b9a0fa
--- /dev/null
+++ b/docs/annotated/src/store/cart.annotated.ts
@@ -0,0 +1,164 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/store/cart.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Zustand — simple global state store (cart, auth, locale)
+import { create } from 'zustand';
+// Zustand — simple global state store (cart, auth, locale)
+import { persist } from 'zustand/middleware';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { CartItem, Product, ProductCustomization } from '@/types';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { getCartItemKey } from '@/lib/customization';
+// (blank line — separates logical blocks for readability)
+// TypeScript interface — contract for object properties and methods
+interface CartState {
+  // Line 7: items: CartItem[];
+  items: CartItem[];
+  // Line 8: addItem: (
+  addItem: (
+    // Property or array item — trailing comma allowed in TypeScript
+    product: Product,
+    // Property or array item — trailing comma allowed in TypeScript
+    customization: ProductCustomization,
+    // Property or array item — trailing comma allowed in TypeScript
+    customizationLabel: string,
+    // Line 12: quantity?: number
+    quantity?: number
+  // Line 13: ) => void;
+  ) => void;
+  // Line 14: removeItem: (id: string) => void;
+  removeItem: (id: string) => void;
+  // Line 15: updateQuantity: (id: string, quantity: number) => void;
+  updateQuantity: (id: string, quantity: number) => void;
+  // Line 16: clearCart: () => void;
+  clearCart: () => void;
+  // Line 17: getTotal: () => number;
+  getTotal: () => number;
+  // Line 18: getItemCount: () => number;
+  getItemCount: () => number;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const useCartStore = create<CartState>()(
+  // Zustand persist — save store to localStorage between visits
+  persist(
+    // Line 23: (set, get) => ({
+    (set, get) => ({
+      // Property or array item — trailing comma allowed in TypeScript
+      items: [],
+// (blank line — separates logical blocks for readability)
+      // Line 26: addItem: (product, customization, customizationLabel, qua...
+      addItem: (product, customization, customizationLabel, quantity = 1) => {
+        // Line 27: const id = getCartItemKey(product.id, customization);
+        const id = getCartItemKey(product.id, customization);
+        // Line 28: const label = customizationLabel;
+        const label = customizationLabel;
+        // Array.find — get first matching item or undefined
+        const existing = get().items.find((item) => item.id === id);
+// (blank line — separates logical blocks for readability)
+        // Conditional branch — different behavior based on runtime value
+        if (existing) {
+          // Line 32: set({
+          set({
+            // Array.map — transform each item (often render a list of components)
+            items: get().items.map((item) =>
+              // Line 34: item.id === id
+              item.id === id
+                // Line 35: ? { ...item, quantity: item.quantity + quantity }
+                ? { ...item, quantity: item.quantity + quantity }
+                // Line 36: : item
+                : item
+            // Property or array item — trailing comma allowed in TypeScript
+            ),
+          // Closing brace — end of block (function, if, object, JSX)
+          });
+        // Closing brace — end of block (function, if, object, JSX)
+        } else {
+          // Line 40: set({
+          set({
+            // Line 41: items: [
+            items: [
+              // Property or array item — trailing comma allowed in TypeScript
+              ...get().items,
+              // Line 43: {
+              {
+                // Property or array item — trailing comma allowed in TypeScript
+                id,
+                // Property or array item — trailing comma allowed in TypeScript
+                product,
+                // Property or array item — trailing comma allowed in TypeScript
+                quantity,
+                // Property or array item — trailing comma allowed in TypeScript
+                customization,
+                // Property or array item — trailing comma allowed in TypeScript
+                customizationLabel: label,
+              // Closing brace — end of block (function, if, object, JSX)
+              },
+            // End of array literal
+            ],
+          // Closing brace — end of block (function, if, object, JSX)
+          });
+        // Closing brace — end of block (function, if, object, JSX)
+        }
+      // Closing brace — end of block (function, if, object, JSX)
+      },
+// (blank line — separates logical blocks for readability)
+      // Line 55: removeItem: (id) => {
+      removeItem: (id) => {
+        // Array.filter — keep items matching condition (search, category)
+        set({ items: get().items.filter((item) => item.id !== id) });
+      // Closing brace — end of block (function, if, object, JSX)
+      },
+// (blank line — separates logical blocks for readability)
+      // Line 59: updateQuantity: (id, quantity) => {
+      updateQuantity: (id, quantity) => {
+        // Conditional branch — different behavior based on runtime value
+        if (quantity <= 0) {
+          // Line 61: get().removeItem(id);
+          get().removeItem(id);
+          // Line 62: return;
+          return;
+        // Closing brace — end of block (function, if, object, JSX)
+        }
+        // Line 64: set({
+        set({
+          // Array.map — transform each item (often render a list of components)
+          items: get().items.map((item) =>
+            // Line 66: item.id === id ? { ...item, quantity } : item
+            item.id === id ? { ...item, quantity } : item
+          // Property or array item — trailing comma allowed in TypeScript
+          ),
+        // Closing brace — end of block (function, if, object, JSX)
+        });
+      // Closing brace — end of block (function, if, object, JSX)
+      },
+// (blank line — separates logical blocks for readability)
+      // Property or array item — trailing comma allowed in TypeScript
+      clearCart: () => set({ items: [] }),
+// (blank line — separates logical blocks for readability)
+      // Line 73: getTotal: () =>
+      getTotal: () =>
+        // Array.reduce — accumulate single value (cart total, item count)
+        get().items.reduce(
+          // Property or array item — trailing comma allowed in TypeScript
+          (sum, item) => sum + item.product.price * item.quantity,
+          // Line 76: 0
+          0
+        // Property or array item — trailing comma allowed in TypeScript
+        ),
+// (blank line — separates logical blocks for readability)
+      // Line 79: getItemCount: () =>
+      getItemCount: () =>
+        // Array.reduce — accumulate single value (cart total, item count)
+        get().items.reduce((sum, item) => sum + item.quantity, 0),
+    // Closing brace — end of block (function, if, object, JSX)
+    }),
+    // Line 82: { name: 'kott-gard-cart' }
+    { name: 'kott-gard-cart' }
+  // Line 83: )
+  )
+// Line 84: );
+);
diff --git a/docs/annotated/src/store/locale.annotated.ts b/docs/annotated/src/store/locale.annotated.ts
new file mode 100644
index 0000000..8ba905d
--- /dev/null
+++ b/docs/annotated/src/store/locale.annotated.ts
@@ -0,0 +1,39 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/store/locale.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Zustand — simple global state store (cart, auth, locale)
+import { create } from 'zustand';
+// Zustand — simple global state store (cart, auth, locale)
+import { persist } from 'zustand/middleware';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { DEFAULT_LOCALE, Locale } from '@/i18n/types';
+// (blank line — separates logical blocks for readability)
+// TypeScript interface — contract for object properties and methods
+interface LocaleState {
+  // Line 6: locale: Locale;
+  locale: Locale;
+  // Line 7: setLocale: (locale: Locale) => void;
+  setLocale: (locale: Locale) => void;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const useLocaleStore = create<LocaleState>()(
+  // Zustand persist — save store to localStorage between visits
+  persist(
+    // Line 12: (set) => ({
+    (set) => ({
+      // Property or array item — trailing comma allowed in TypeScript
+      locale: DEFAULT_LOCALE,
+      // Property or array item — trailing comma allowed in TypeScript
+      setLocale: (locale) => set({ locale }),
+    // Closing brace — end of block (function, if, object, JSX)
+    }),
+    // Line 16: { name: 'kott-gard-locale' }
+    { name: 'kott-gard-locale' }
+  // Line 17: )
+  )
+// Line 18: );
+);
diff --git a/docs/annotated/src/store/wishlist.annotated.ts b/docs/annotated/src/store/wishlist.annotated.ts
new file mode 100644
index 0000000..0efec67
--- /dev/null
+++ b/docs/annotated/src/store/wishlist.annotated.ts
@@ -0,0 +1,81 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/store/wishlist.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Zustand — simple global state store (cart, auth, locale)
+import { create } from 'zustand';
+// Zustand — simple global state store (cart, auth, locale)
+import { persist } from 'zustand/middleware';
+// Import project module (@/ alias = src/ folder in tsconfig)
+import { Product } from '@/types';
+// (blank line — separates logical blocks for readability)
+// TypeScript interface — contract for object properties and methods
+interface WishlistState {
+  // Line 6: items: Product[];
+  items: Product[];
+  // Line 7: addItem: (product: Product) => void;
+  addItem: (product: Product) => void;
+  // Line 8: removeItem: (productId: string) => void;
+  removeItem: (productId: string) => void;
+  // Line 9: isInWishlist: (productId: string) => boolean;
+  isInWishlist: (productId: string) => boolean;
+  // Line 10: toggleItem: (product: Product) => void;
+  toggleItem: (product: Product) => void;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const useWishlistStore = create<WishlistState>()(
+  // Zustand persist — save store to localStorage between visits
+  persist(
+    // Line 15: (set, get) => ({
+    (set, get) => ({
+      // Property or array item — trailing comma allowed in TypeScript
+      items: [],
+// (blank line — separates logical blocks for readability)
+      // Line 18: addItem: (product) => {
+      addItem: (product) => {
+        // Conditional branch — different behavior based on runtime value
+        if (!get().isInWishlist(product.id)) {
+          // Line 20: set({ items: [...get().items, product] });
+          set({ items: [...get().items, product] });
+        // Closing brace — end of block (function, if, object, JSX)
+        }
+      // Closing brace — end of block (function, if, object, JSX)
+      },
+// (blank line — separates logical blocks for readability)
+      // Line 24: removeItem: (productId) => {
+      removeItem: (productId) => {
+        // Array.filter — keep items matching condition (search, category)
+        set({ items: get().items.filter((p) => p.id !== productId) });
+      // Closing brace — end of block (function, if, object, JSX)
+      },
+// (blank line — separates logical blocks for readability)
+      // Line 28: isInWishlist: (productId) =>
+      isInWishlist: (productId) =>
+        // Property or array item — trailing comma allowed in TypeScript
+        get().items.some((p) => p.id === productId),
+// (blank line — separates logical blocks for readability)
+      // Line 31: toggleItem: (product) => {
+      toggleItem: (product) => {
+        // Conditional branch — different behavior based on runtime value
+        if (get().isInWishlist(product.id)) {
+          // Line 33: get().removeItem(product.id);
+          get().removeItem(product.id);
+        // Closing brace — end of block (function, if, object, JSX)
+        } else {
+          // Line 35: get().addItem(product);
+          get().addItem(product);
+        // Closing brace — end of block (function, if, object, JSX)
+        }
+      // Closing brace — end of block (function, if, object, JSX)
+      },
+    // Closing brace — end of block (function, if, object, JSX)
+    }),
+    // Line 39: { name: 'kott-gard-wishlist' }
+    { name: 'kott-gard-wishlist' }
+  // Line 40: )
+  )
+// Line 41: );
+);
diff --git a/docs/annotated/src/types/index.annotated.ts b/docs/annotated/src/types/index.annotated.ts
new file mode 100644
index 0000000..5daa183
--- /dev/null
+++ b/docs/annotated/src/types/index.annotated.ts
@@ -0,0 +1,168 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/types/index.ts
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Export TypeScript type — defines data shape used across the app
+export type Category = 'chicken' | 'beef' | 'lamb' | 'fish';
+// (blank line — separates logical blocks for readability)
+// Export TypeScript type — defines data shape used across the app
+export type CutCount = 4 | 8 | 10 | 12;
+// (blank line — separates logical blocks for readability)
+// Export TypeScript type — defines data shape used across the app
+export type CuttingStyleKey = 'nihari' | 'karahi' | 'qeema' | 'boneless' | 'steak';
+// (blank line — separates logical blocks for readability)
+// Export TypeScript type — defines data shape used across the app
+export type MeatCategory = 'chicken' | 'beef' | 'lamb';
+// (blank line — separates logical blocks for readability)
+// Export TypeScript type — defines data shape used across the app
+export interface MeatCustomization {
+  // Line 10: type: MeatCategory;
+  type: MeatCategory;
+  // Line 11: cuts: CutCount;
+  cuts: CutCount;
+  // Line 12: cuttingStyle: CuttingStyleKey;
+  cuttingStyle: CuttingStyleKey;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Export TypeScript type — defines data shape used across the app
+export type ProductCustomization = MeatCustomization | { type: 'fish' };
+// (blank line — separates logical blocks for readability)
+// Named export — utility function other files can import
+export function isMeatCustomization(
+  // Line 18: customization: ProductCustomization
+  customization: ProductCustomization
+// Line 19: ): customization is MeatCustomization {
+): customization is MeatCustomization {
+  // Return value from function
+  return customization.type !== 'fish';
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Export TypeScript type — defines data shape used across the app
+export type PriceUnitKey = 'perBird' | 'perPack' | 'perKg';
+// Export TypeScript type — defines data shape used across the app
+export type BadgeKey = 'bestseller' | 'chefsPick' | 'premium' | 'popular' | 'freshCatch';
+// (blank line — separates logical blocks for readability)
+// Export TypeScript type — defines data shape used across the app
+export interface Product {
+  // Line 27: id: string;
+  id: string;
+  // Line 28: slug: string;
+  slug: string;
+  // Line 29: category: Category;
+  category: Category;
+  // Line 30: price: number;
+  price: number;
+  // Line 31: priceUnitKey: PriceUnitKey;
+  priceUnitKey: PriceUnitKey;
+  // Line 32: image: string;
+  image: string;
+  // Line 33: images: string[];
+  images: string[];
+  // Line 34: badgeKey?: BadgeKey;
+  badgeKey?: BadgeKey;
+  // Line 35: inStock: boolean;
+  inStock: boolean;
+  // Line 36: featured: boolean;
+  featured: boolean;
+  // Line 37: weight?: string;
+  weight?: string;
+  // Line 38: tags: string[];
+  tags: string[];
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Export TypeScript type — defines data shape used across the app
+export interface CartItem {
+  // Line 42: id: string;
+  id: string;
+  // Line 43: product: Product;
+  product: Product;
+  // Line 44: quantity: number;
+  quantity: number;
+  // Line 45: customization: ProductCustomization;
+  customization: ProductCustomization;
+  // Line 46: customizationLabel: string;
+  customizationLabel: string;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Export TypeScript type — defines data shape used across the app
+export interface User {
+  // Line 50: id: string;
+  id: string;
+  // Line 51: name: string;
+  name: string;
+  // Line 52: email: string;
+  email: string;
+  // Line 53: phone: string;
+  phone: string;
+  // Line 54: address: Address;
+  address: Address;
+  // Line 55: createdAt: string;
+  createdAt: string;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Export TypeScript type — defines data shape used across the app
+export interface Address {
+  // Line 59: street: string;
+  street: string;
+  // Line 60: city: string;
+  city: string;
+  // Line 61: state: string;
+  state: string;
+  // Line 62: zip: string;
+  zip: string;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Export TypeScript type — defines data shape used across the app
+export interface Order {
+  // Line 66: id: string;
+  id: string;
+  // Line 67: items: CartItem[];
+  items: CartItem[];
+  // Line 68: total: number;
+  total: number;
+  // Line 69: status: 'pending' | 'confirmed' | 'preparing' | 'out-for-...
+  status: 'pending' | 'confirmed' | 'preparing' | 'out-for-delivery' | 'delivered';
+  // Line 70: createdAt: string;
+  createdAt: string;
+  // Line 71: deliveryAddress: Address;
+  deliveryAddress: Address;
+  // Line 72: paymentMethod: string;
+  paymentMethod: string;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Export TypeScript type — defines data shape used across the app
+export type SortOption = 'featured' | 'price-asc' | 'price-desc' | 'name';
+// (blank line — separates logical blocks for readability)
+// Export TypeScript type — defines data shape used across the app
+export type OfferBadgeKey = 'fresh' | 'halal';
+// (blank line — separates logical blocks for readability)
+// Export TypeScript type — defines data shape used across the app
+export interface WeeklyOffer {
+  // Line 80: id: string;
+  id: string;
+  // Line 81: nameKey: string;
+  nameKey: string;
+  // Line 82: badgeKey: OfferBadgeKey;
+  badgeKey: OfferBadgeKey;
+  // Line 83: price: number;
+  price: number;
+  // Line 84: originalPrice?: number;
+  originalPrice?: number;
+  // Line 85: priceUnitKey: PriceUnitKey;
+  priceUnitKey: PriceUnitKey;
+  // Line 86: image: string;
+  image: string;
+  // Line 87: whatsappProduct: string;
+  whatsappProduct: string;
+  // Line 88: productSlug: string;
+  productSlug: string;
+// Closing brace — end of block (function, if, object, JSX)
+}
diff --git a/docs/generate-guide-docx.mjs b/docs/generate-guide-docx.mjs
new file mode 100644
index 0000000..8a43e95
--- /dev/null
+++ b/docs/generate-guide-docx.mjs
@@ -0,0 +1,272 @@
+/**
+ * Generates Kottgard-Website-Guide.docx
+ * Run: node docs/generate-guide-docx.mjs
+ */
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import {
+  Document,
+  Packer,
+  Paragraph,
+  TextRun,
+  Table,
+  TableRow,
+  TableCell,
+  HeadingLevel,
+  AlignmentType,
+  BorderStyle,
+  WidthType,
+  ShadingType,
+  PageBreak,
+  LevelFormat,
+} from 'docx';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const outPath = path.join(__dirname, 'Kottgard-Website-Guide.docx');
+
+const border = { style: BorderStyle.SINGLE, size: 1, color: 'CCCCCC' };
+const borders = { top: border, bottom: border, left: border, right: border };
+const tableWidth = 9360;
+
+function cell(text, width, fill = 'FFFFFF') {
+  return new TableCell({
+    borders,
+    width: { size: width, type: WidthType.DXA },
+    shading: { fill, type: ShadingType.CLEAR },
+    margins: { top: 80, bottom: 80, left: 120, right: 120 },
+    children: [new Paragraph({ children: [new TextRun(text)] })],
+  });
+}
+
+function headerRow(cols, widths) {
+  return new TableRow({
+    children: cols.map((t, i) => cell(t, widths[i], 'D5E8F0')),
+  });
+}
+
+function dataRow(cols, widths) {
+  return new TableRow({
+    children: cols.map((t, i) => cell(t, widths[i])),
+  });
+}
+
+function table(columnWidths, rows) {
+  return new Table({
+    width: { size: tableWidth, type: WidthType.DXA },
+    columnWidths,
+    rows,
+  });
+}
+
+function h1(text) {
+  return new Paragraph({ heading: HeadingLevel.HEADING_1, children: [new TextRun(text)] });
+}
+function h2(text) {
+  return new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun(text)] });
+}
+function p(text) {
+  return new Paragraph({ spacing: { after: 200 }, children: [new TextRun(text)] });
+}
+function bullet(ref, text) {
+  return new Paragraph({
+    numbering: { reference: ref, level: 0 },
+    children: [new TextRun(text)],
+  });
+}
+
+const doc = new Document({
+  styles: {
+    default: { document: { run: { font: 'Arial', size: 22 } } },
+    paragraphStyles: [
+      {
+        id: 'Heading1',
+        name: 'Heading 1',
+        basedOn: 'Normal',
+        next: 'Normal',
+        quickFormat: true,
+        run: { size: 32, bold: true, font: 'Arial' },
+        paragraph: { spacing: { before: 240, after: 240 }, outlineLevel: 0 },
+      },
+      {
+        id: 'Heading2',
+        name: 'Heading 2',
+        basedOn: 'Normal',
+        next: 'Normal',
+        quickFormat: true,
+        run: { size: 26, bold: true, font: 'Arial' },
+        paragraph: { spacing: { before: 180, after: 180 }, outlineLevel: 1 },
+      },
+    ],
+  },
+  numbering: {
+    config: [
+      {
+        reference: 'bullets',
+        levels: [
+          {
+            level: 0,
+            format: LevelFormat.BULLET,
+            text: '\u2022',
+            alignment: AlignmentType.LEFT,
+            style: { paragraph: { indent: { left: 720, hanging: 360 } } },
+          },
+        ],
+      },
+    ],
+  },
+  sections: [
+    {
+      properties: {
+        page: {
+          size: { width: 12240, height: 15840 },
+          margin: { top: 1440, right: 1440, bottom: 1440, left: 1440 },
+        },
+      },
+      children: [
+        new Paragraph({
+          alignment: AlignmentType.CENTER,
+          spacing: { after: 400 },
+          children: [
+            new TextRun({ text: 'Kött Gård', bold: true, size: 48 }),
+          ],
+        }),
+        new Paragraph({
+          alignment: AlignmentType.CENTER,
+          spacing: { after: 600 },
+          children: [
+            new TextRun({
+              text: 'Website Visual & Programming Guide',
+              size: 32,
+              color: '8B1F1F',
+            }),
+          ],
+        }),
+        p('Premium Halal meat e-commerce — Märsta, Sweden'),
+        p('Document version: June 2026'),
+        p('Companion files: docs/annotated/ (line-by-line code comments)'),
+
+        new Paragraph({ children: [new PageBreak()] }),
+
+        h1('1. What is this website?'),
+        p(
+          'Kött Gård is a Next.js e-commerce front-end for ordering fresh Halal chicken, beef, lamb, and fish. Customers browse products, customize cuts (Nihari, Karahi, piece counts), add to cart, checkout, and view order history. Languages: Swedish, English, Urdu (RTL).'
+        ),
+
+        h2('Demo login'),
+        table(
+          [3120, 6240],
+          [
+            headerRow(['Field', 'Value'], [3120, 6240]),
+            dataRow(['Email', 'demo@kottgard.se'], [3120, 6240]),
+            dataRow(['Password', 'demo123'], [3120, 6240]),
+            dataRow(['Orders', '3 sample orders in Account'], [3120, 6240]),
+          ]
+        ),
+
+        h1('2. Homepage layout (visual map)'),
+        p('When a customer opens https://kottgard.se/, they scroll through these sections:'),
+        table(
+          [800, 2200, 3160, 3200],
+          [
+            headerRow(['#', 'Section', 'File', 'Customer action'], [800, 2200, 3160, 3200]),
+            dataRow(['1', 'Hero', 'Hero.tsx', 'Shop now / WhatsApp'], [800, 2200, 3160, 3200]),
+            dataRow(['2', 'Trust badges', 'TrustBadges.tsx', 'Click → About'], [800, 2200, 3160, 3200]),
+            dataRow(['3', 'About preview', 'AboutPreview.tsx', 'Read more → /about'], [800, 2200, 3160, 3200]),
+            dataRow(['4', 'Categories', 'CategoryGrid.tsx', 'Chicken/Beef/Lamb/Fish'], [800, 2200, 3160, 3200]),
+            dataRow(['5', 'Featured', 'FeaturedProducts.tsx', 'Product cards'], [800, 2200, 3160, 3200]),
+            dataRow(['6', 'How it works', 'HowItWorks.tsx', 'Order steps'], [800, 2200, 3160, 3200]),
+            dataRow(['7', 'Weekly offers', 'WeeklyOffers.tsx', 'Deals → products'], [800, 2200, 3160, 3200]),
+            dataRow(['8', 'CTA', 'CTA.tsx', 'Browse selection'], [800, 2200, 3160, 3200]),
+            dataRow(['9', 'Social', 'SocialFollow.tsx', 'Facebook / Instagram'], [800, 2200, 3160, 3200]),
+            dataRow(['10', 'Contact', 'ContactPreview.tsx', 'Map / phone / about'], [800, 2200, 3160, 3200]),
+          ]
+        ),
+
+        h1('3. All pages & routes'),
+        table(
+          [2800, 3360, 3200],
+          [
+            headerRow(['URL', 'File', 'Description'], [2800, 3360, 3200]),
+            dataRow(['/', 'app/page.tsx', 'Homepage'], [2800, 3360, 3200]),
+            dataRow(['/shop', 'app/shop/page.tsx', 'Catalog + search + filters'], [2800, 3360, 3200]),
+            dataRow(['/product/[slug]', 'app/product/[slug]/page.tsx', 'Detail + customize'], [2800, 3360, 3200]),
+            dataRow(['/cart', 'app/cart/page.tsx', 'Shopping cart'], [2800, 3360, 3200]),
+            dataRow(['/checkout', 'app/checkout/page.tsx', 'Place order (demo)'], [2800, 3360, 3200]),
+            dataRow(['/login', 'app/login/page.tsx', 'Auth'], [2800, 3360, 3200]),
+            dataRow(['/account', 'app/account/page.tsx', 'Profile + orders'], [2800, 3360, 3200]),
+            dataRow(['/wishlist', 'app/wishlist/page.tsx', 'Saved items'], [2800, 3360, 3200]),
+            dataRow(['/about', 'app/about/page.tsx', 'Company + privacy + terms'], [2800, 3360, 3200]),
+          ]
+        ),
+
+        new Paragraph({ children: [new PageBreak()] }),
+
+        h1('4. Programming languages & frameworks'),
+        h2('TypeScript'),
+        p(
+          'TypeScript adds types to JavaScript. Example: Product interface ensures every product has id, slug, price. The compiler errors if you typo product.slugg.'
+        ),
+        h2('React'),
+        p(
+          'React builds UI from components (functions returning JSX). State (useState) updates what users see. Props pass data parent → child.'
+        ),
+        h2('Next.js 13 App Router'),
+        bullet('bullets', 'app/ folder = routes. page.tsx = page, layout.tsx = wrapper.'),
+        bullet('bullets', 'Server Components default — less JavaScript sent to browser.'),
+        bullet('bullets', "'use client' = component runs in browser (hooks, clicks)."),
+        h2('Zustand'),
+        p(
+          'Global stores: useCartStore, useAuthStore, useWishlistStore. persist middleware saves to localStorage so cart survives refresh.'
+        ),
+        h2('Tailwind CSS'),
+        p(
+          'Classes like bg-brand-700 text-white px-4 py-2 style elements. Colors defined in tailwind.config.ts (burgundy, cream, gold).'
+        ),
+
+        h1('5. Data flow diagram (text)'),
+        p('Homepage → Shop (filter URL) → Product page → addItem() → Cart store → Checkout → Order in Auth store → Account page'),
+        p('Images: lib/images.ts → products.ts → ProductCard / Hero → AppImage → next/image → Unsplash CDN'),
+        p('Text: i18n/locales/sv|en|ur.ts → useTranslation() → t("key") in components'),
+
+        h1('6. Annotated code (line-by-line)'),
+        p('Location: Kottgard/docs/annotated/'),
+        table(
+          [4200, 5160],
+          [
+            headerRow(['File', 'Explains'], [4200, 5160]),
+            dataRow(['01-homepage.annotated.tsx', 'How homepage composes sections'], [4200, 5160]),
+            dataRow(['02-root-layout.annotated.tsx', 'Fonts, SEO, shell layout'], [4200, 5160]),
+            dataRow(['03-shop-page.annotated.tsx', 'URL sync, useMemo filtering'], [4200, 5160]),
+            dataRow(['04-header.annotated.tsx', 'Navigation + Zustand badges'], [4200, 5160]),
+            dataRow(['05-images.annotated.ts', 'Unsplash URL builder'], [4200, 5160]),
+            dataRow(['06-cart-store.annotated.ts', 'Cart logic + persist'], [4200, 5160]),
+          ]
+        ),
+        p(
+          'Each line has comments explaining WHAT the code does and WHY. These are learning copies — not imported by the live app.'
+        ),
+
+        h1('7. Brand colors'),
+        table(
+          [3120, 3120, 3120],
+          [
+            headerRow(['Name', 'Hex', 'Use'], [3120, 3120, 3120]),
+            dataRow(['Burgundy (brand)', '#8B1F1F', 'Header, buttons, footer'], [3120, 3120, 3120]),
+            dataRow(['Cream', 'Warm off-white', 'Page backgrounds'], [3120, 3120, 3120]),
+            dataRow(['Gold', 'Accent', 'Prices, badges, CTAs'], [3120, 3120, 3120]),
+          ]
+        ),
+
+        h1('8. How to run locally'),
+        bullet('bullets', 'npm install'),
+        bullet('bullets', 'npm run dev → http://localhost:3000'),
+        bullet('bullets', 'npm run build → production check'),
+      ],
+    },
+  ],
+});
+
+const buffer = await Packer.toBuffer(doc);
+fs.writeFileSync(outPath, buffer);
+console.log('Written:', outPath);
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
new file mode 100644
index 0000000..b55722b
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    formats: ['image/avif', 'image/webp'],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 2560],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  },
+};
+
+module.exports = nextConfig;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..5b69883
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,9497 @@
+{
+  "name": "kott-gard",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "kott-gard",
+      "version": "1.0.0",
+      "dependencies": {
+        "clsx": "^2.1.0",
+        "lucide-react": "^0.344.0",
+        "next": "13.5.6",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "zustand": "^4.5.2"
+      },
+      "devDependencies": {
+        "@types/node": "^20.11.0",
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "autoprefixer": "^10.4.17",
+        "docx": "^9.7.1",
+        "eslint": "^8.56.0",
+        "eslint-config-next": "13.5.6",
+        "postcss": "^8.4.33",
+        "tailwindcss": "^3.4.1",
+        "typescript": "^5.3.3"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
+      "deprecated": "Use @eslint/config-array instead",
+      "dev": true,
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.3",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.5.tgz",
+      "integrity": "sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.6.tgz",
+      "integrity": "sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw=="
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.5.6.tgz",
+      "integrity": "sha512-ng7pU/DDsxPgT6ZPvuprxrkeew3XaRf4LAT4FabaEO/hAbvVx4P7wqnqdbTdDn1kgTvsI4tpIgT4Awn/m0bGbg==",
+      "dev": true,
+      "dependencies": {
+        "glob": "7.1.7"
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.6.tgz",
+      "integrity": "sha512-5nvXMzKtZfvcu4BhtV0KH1oGv4XEW+B+jOfmBdpFI3C7FrB/MfujRpWYSBBO64+qbW8pkZiSyQv9eiwnn5VIQA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.6.tgz",
+      "integrity": "sha512-6cgBfxg98oOCSr4BckWjLLgiVwlL3vlLj8hXg2b+nDgm4bC/qVXXLfpLB9FHdoDu4057hzywbxKvmYGmi7yUzA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.6.tgz",
+      "integrity": "sha512-txagBbj1e1w47YQjcKgSU4rRVQ7uF29YpnlHV5xuVUsgCUf2FmyfJ3CPjZUvpIeXCJAoMCFAoGnbtX86BK7+sg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.6.tgz",
+      "integrity": "sha512-cGd+H8amifT86ZldVJtAKDxUqeFyLWW+v2NlBULnLAdWsiuuN8TuhVBt8ZNpCqcAuoruoSWynvMWixTFcroq+Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.6.tgz",
+      "integrity": "sha512-Mc2b4xiIWKXIhBy2NBTwOxGD3nHLmq4keFk+d4/WL5fMsB8XdJRdtUlL87SqVCTSaf1BRuQQf1HvXZcy+rq3Nw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.6.tgz",
+      "integrity": "sha512-CFHvP9Qz98NruJiUnCe61O6GveKKHpJLloXbDSWRhqhkJdZD2zU5hG+gtVJR//tyW897izuHpM6Gtf6+sNgJPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.6.tgz",
+      "integrity": "sha512-aFv1ejfkbS7PUa1qVPwzDHjQWQtknzAZWGTKYIAaS4NMtBlk3VyA6AYn593pqNanlicewqyl2jUhQAaFV/qXsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.6.tgz",
+      "integrity": "sha512-XqqpHgEIlBHvzwG8sp/JXMFkLAfGLqkbVsyN+/Ih1mR8INb6YCc2x/Mbwi6hsAgUnqQztz8cvEbHJUbSl7RHDg==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.6.tgz",
+      "integrity": "sha512-Cqfe1YmOS7k+5mGu92nl5ULkzpKuxJrP3+4AEuPmrpFZ3BHxTY3TnHmU1On3bFmFFs6FbTcdF58CCUProGpIGQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.4.0"
+      }
+    },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true
+    },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.16.1.tgz",
+      "integrity": "sha512-TvZbIpeKqGQQ7X0zSCvPH9riMSFQFSggnfBjFZ1mEoILW+UuXCKwOoPcgjMwiUtRqFZ8jWhPJc4um14vC6I4ag==",
+      "dev": true
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
+      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
+      "integrity": "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true
+    },
+    "node_modules/@types/node": {
+      "version": "20.19.43",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.43.tgz",
+      "integrity": "sha512-6oYBAi5ikg4Pl+kGsoYtawUMBT2zZMCvPNF7pVLnHZfd1zf38DRiWn/gT01RYCdUqkv7Fhr+C9ot4/tb+2sVvA==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "devOptional": true
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.31",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.31.tgz",
+      "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==",
+      "devOptional": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
+      "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "6.21.0",
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/typescript-estree": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz",
+      "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz",
+      "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==",
+      "dev": true,
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz",
+      "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "9.0.3",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.1.tgz",
+      "integrity": "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
+      "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "6.21.0",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.1.tgz",
+      "integrity": "sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ==",
+      "dev": true
+    },
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.12.2.tgz",
+      "integrity": "sha512-g5T90pqg1bo/7mytQx6F4iBNC0Wsh9cu+z9veDbFjc7HjpesJFWD7QMS0NGStXM075+7dJPPVvBbpZlnrdpi/w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.12.2.tgz",
+      "integrity": "sha512-YGCRZv/9GLhwmz6mYDeTsm/92BAyR28l6c2ReweVW5pWgfsitWLY8upvfRlGdoyD8HjeTHSYJWyZGD4KJA/nFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.12.2.tgz",
+      "integrity": "sha512-u9DiNT1auQMO20A9SyTuG3wUgQWB9Z7KjAg0uFuCDR1FsAY8A0CG2S6JpHS1xwm/w1G08bjXZDcyOCjv1WAm2w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.12.2.tgz",
+      "integrity": "sha512-f7rPLi/T1HVKZu/u6t87lroib16n8vrSzcyxI7lg4BGO9UF26KhQL44sd9eOUgrTYhvRXtWOIZT5PejdPyJfUA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.12.2.tgz",
+      "integrity": "sha512-BpcOjWCJub6nRZUS2zA20pmLvjtqAtGejETaIyRLiZiQf++cbrjltLA5NN/xaXfqeOBOSlMFbemIl5/S5tljmg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.12.2.tgz",
+      "integrity": "sha512-vZTDvdSISZjJx66OzJqtsOhzifbqRjbmI1Mnu49fQDwog5GtDI4QidRiEAYbZCRj9C8YZEW+3ZjqsyS9GR4k2A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.12.2.tgz",
+      "integrity": "sha512-BiPI+IrIlwcW4nLLMM21+B1dFPzd55yAVgVGrdgDjNef+ch03GdxrcyaIz8X9SsQirh/kCQ7mviyWlMxdh2D7g==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.12.2.tgz",
+      "integrity": "sha512-zJc0H99FEPoFfSrNpa91HYfxzfAJCr502oxNK1cfdC9hlaFI43RT+JFCann9JUgZmLzzntChHyn13Sgn9ljHNg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.12.2.tgz",
+      "integrity": "sha512-KQ3Lki6l+Pz1k/eBipN41ES+YUK30beLGb9YqcB1O542cyLCNE6GaxrfcY3T6EezmGGk84wb5XyO9loTM9tkcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-loong64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-loong64-gnu/-/resolver-binding-linux-loong64-gnu-1.12.2.tgz",
+      "integrity": "sha512-3SJGEh1DborhG6pyxvhPzCT4bbSIVihsvgJc13P1bHG7KLdNDaF9T3gsTwFc7Jw/5Y5/iWOjkEx7Zy0NvCGX3Q==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-loong64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-loong64-musl/-/resolver-binding-linux-loong64-musl-1.12.2.tgz",
+      "integrity": "sha512-jiuG/Obbel7uw1PwHNFfrkiKhLAF6mnyZ6aWlOAVN9WqKm8v0OFGnciJIHu8+CMvXLQ8AD51LPzAoUfT21D5Ew==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.12.2.tgz",
+      "integrity": "sha512-q7xRvVpmcfeL+LlZg8Pbbo6QaTZwDU5BaGZbwfhkEsXJn3Was8xYfE0RBH266xZt0rM6B7i8xAYIvjthuUIWHg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.12.2.tgz",
+      "integrity": "sha512-0CVdx6lcnT3Q9inOH8tsMIOJ6ImndllMjqJHg8RLVdB7Vq4SfkEXl9mCSsVNuNA4MCYycRicCUxPCabVHJRr6A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.12.2.tgz",
+      "integrity": "sha512-iOwlRo9vnp6R6ohHQS11n0NnfdXx/omhkocmIfaPRpQhKZ+3BDMkkdRVh53qjkFkpPddf+FETA28NwGN7l5l+w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.12.2.tgz",
+      "integrity": "sha512-HYJtLfXq94q8iZNFT1lknx258wlkkWhZeUXJRqzKBBUJ00CvZ+N33zgbCqimLjsyw5Va6uUxhVa12mI+kaveEw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.12.2.tgz",
+      "integrity": "sha512-mPsUhunKKDih5O96Y6enDQyHc1SqBPlY1E/SfMWDM3EdJ95Z9CArPeCVwCCqbP45ljvivdEk8Fxn+SIb1rDAJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.12.2.tgz",
+      "integrity": "sha512-azrt6+5ydLd8Vt210AAFis/lZevSfPw93EJRIJG+xPu4WCJ8K0kppCTpMyLPcKT7H15M4Jnt2tMp5bOvCkRC6A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-openharmony-arm64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-openharmony-arm64/-/resolver-binding-openharmony-arm64-1.12.2.tgz",
+      "integrity": "sha512-YZ9hP4O0X9PQb8eO980qmLNGH4zT3I9+SZTdt0Pr0YyuGQhYKoOZkV02VzrzyOZJ5xIJ3UFIenKkUkGg8GjgWQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.12.2.tgz",
+      "integrity": "sha512-tYFDIkMxSflfEc/h92ZWNsZlHSwgimbNHSO3PL2JWQHfCuC2q316jMyYU9TIWZsFK2bQwyK5VAdYgn8ygPj69A==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.10.0",
+        "@emnapi/runtime": "1.10.0",
+        "@napi-rs/wasm-runtime": "^1.1.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.12.2.tgz",
+      "integrity": "sha512-qzNyg3xL0VPQmCaUh+N5jSitce6k+uCBfMDesWRnlULOZaqUkaJ0ybdT+UqlAWJoQjuqfIU/0Ptx9bteN4D82g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.12.2.tgz",
+      "integrity": "sha512-WD9sY00OfpHVGfsnHZoA8jVT+esS/Bg8z8jzxp5BnDCjjwsuKsPQrzswwpFy4J1AUJbXPRfkpcX0mXrzeXW79g==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.12.2.tgz",
+      "integrity": "sha512-nAB74NfSNKknqQ1RrYj6uz8FcXEomu/MATJZxh/x+BArzN2U3JbOYC0APYzUIGhVY3m5hRxA8VPNdPBoG8txlA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/acorn": {
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
+      "integrity": "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+      "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ast-types-flow": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
+      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
+      "dev": true
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.0.tgz",
+      "integrity": "sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "caniuse-lite": "^1.0.30001787",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.12.1.tgz",
+      "integrity": "sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.37",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.37.tgz",
+      "integrity": "sha512-girxaJ7WZssDOFhzCGZTDKoTa1gk6A1TbflaYTpykLJ4UU9Fz9kx1aREM8JCuoVHbL8X8T/mJg7w2oYSq72Oig==",
+      "dev": true,
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.15.tgz",
+      "integrity": "sha512-EwOCDEex4quD37XhqM3omwtMoJjr//isUZz1JopUNWms+4Z2ViyM/k1YIRePpoVNnQhENnxtFjLaxNHrT7xIUg==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.9.tgz",
+      "integrity": "sha512-a/hy+pNsFUTR+Iz8TCJvXudKVLAnz/DyeSUo10I5yvFDQJBFU2s9uqQpoSrJlroHUKoKqzg+epxyP9lqFdzfBQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "get-intrinsic": "^1.3.0",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001799",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
+      "integrity": "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "dev": true
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true
+    },
+    "node_modules/damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+      "dev": true
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/docx": {
+      "version": "9.7.1",
+      "resolved": "https://registry.npmjs.org/docx/-/docx-9.7.1.tgz",
+      "integrity": "sha512-ilXFf9Moz47ABjFpDiA5s1w9lpb4EFSp7+5iiJSbfyYDM+bpZdAgLlSr7fW4aXhVe/E+F6QCv0EvRVFEd5CsWg==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "^25.2.3",
+        "hash.js": "^1.1.7",
+        "jszip": "^3.10.1",
+        "nanoid": "^5.1.3",
+        "xml": "^1.0.1",
+        "xml-js": "^1.6.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/docx/node_modules/@types/node": {
+      "version": "25.9.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.3.tgz",
+      "integrity": "sha512-603BddQMv3pUcr4U2dhujk83N2tTDVr/34wII2B6bJy6g+8WD6yUb11jszNs0gdi4PesVWl7ABt8nYMVpnLUcg==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": ">=7.24.0 <7.24.7"
+      }
+    },
+    "node_modules/docx/node_modules/nanoid": {
+      "version": "5.1.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.11.tgz",
+      "integrity": "sha512-v+KEsUv2ps74PaSKv0gHTxTCgMXOIfBEbaqa6w6ISIGC7ZsvHN4N9oJ8d4cmf0n5oTzQz2SLmThbQWhjd/8eKg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
+    "node_modules/docx/node_modules/undici-types": {
+      "version": "7.24.6",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.24.6.tgz",
+      "integrity": "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==",
+      "dev": true
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.375",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.375.tgz",
+      "integrity": "sha512-ZWP5eB4BVPW/ZYo9252hQZHZ5XavtsTgpbhcmMmRwymavC5AsLWQWBPaKMeNd2LW0KGby5HPXvj7+sr4ta5j/Q==",
+      "dev": true
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "node_modules/es-abstract": {
+      "version": "1.24.2",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.2.tgz",
+      "integrity": "sha512-2FpH9Q5i2RRwyEP1AylXe6nYLR5OhaJTZwmlcP0dL/+JCbgg7yyEo/sEK6HeGZRf3dFpWwThaRHVApXSkW3xeg==",
+      "dev": true,
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-abstract-get": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-abstract-get/-/es-abstract-get-1.0.0.tgz",
+      "integrity": "sha512-6PMWXpdhshVvFp+FoWYs1EvG1Nj0tvk0dZM+XcK0xMEM1czRVcP6ohqPWHy6qPagSpC8j4+p89WXlT+xXJs/fg==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.2",
+        "is-callable": "^1.2.7",
+        "object-inspect": "^1.13.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.3.3.tgz",
+      "integrity": "sha512-0PuBxFi+4uPanB97iDxCLWuHeYud2FALrw5HFZGtAF38UpJDbDC8frwp2cnDyae692CQ0dou60UwWfhgsa4U/g==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.2",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.1.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.3.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.5",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.1.tgz",
+      "integrity": "sha512-CxN9N56HYfd2m/acc/NOFrZQsN9kU4eh+2kk6A707Kz1krH8tKmfrs5RnftB8WNX80T0NS7vSQsDOlg23diR2g==",
+      "dev": true,
+      "dependencies": {
+        "es-abstract-get": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.1.0",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.1",
+        "@humanwhocodes/config-array": "^0.13.0",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-config-next": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.5.6.tgz",
+      "integrity": "sha512-o8pQsUHTo9aHqJ2YiZDym5gQAMRf7O2HndHo/JZeY7TDD+W4hk6Ma8Vw54RHiBeb7OWWO5dPirQB+Is/aVQ7Kg==",
+      "dev": true,
+      "dependencies": {
+        "@next/eslint-plugin-next": "13.5.6",
+        "@rushstack/eslint-patch": "^1.3.3",
+        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.28.1",
+        "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
+      },
+      "peerDependencies": {
+        "eslint": "^7.23.0 || ^8.0.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.10.tgz",
+      "integrity": "sha512-tRrKqFyCaKict5hOd244sL6EQFNycnMQnBe+j8uqGNXYzsImGbGUU4ibtoaBmv5FLwJwcFJNeg1GeVjQfbMrDQ==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.16.1",
+        "resolve": "^2.0.0-next.6"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-import-resolver-typescript": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.10.1.tgz",
+      "integrity": "sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==",
+      "dev": true,
+      "dependencies": {
+        "@nolyfill/is-core-module": "1.0.39",
+        "debug": "^4.4.0",
+        "get-tsconfig": "^4.10.0",
+        "is-bun-module": "^2.0.0",
+        "stable-hash": "^0.0.5",
+        "tinyglobby": "^0.2.13",
+        "unrs-resolver": "^1.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-import-resolver-typescript"
+      },
+      "peerDependencies": {
+        "eslint": "*",
+        "eslint-plugin-import": "*",
+        "eslint-plugin-import-x": "*"
+      },
+      "peerDependenciesMeta": {
+        "eslint-plugin-import": {
+          "optional": true
+        },
+        "eslint-plugin-import-x": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.13.0.tgz",
+      "integrity": "sha512-bLohSkT6469rRs8czj0tLTD8vaeIS/whvPRJVjDr7IuoTT1k5DYDERlNycjDj/HkOlvQdYurmfZ/g3fG5bgeLQ==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
+      "dev": true,
+      "dependencies": {
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.12.1",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.16.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.1",
+        "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.9",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
+      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
+      "dev": true,
+      "dependencies": {
+        "aria-query": "^5.3.2",
+        "array-includes": "^3.1.8",
+        "array.prototype.flatmap": "^1.3.2",
+        "ast-types-flow": "^0.0.8",
+        "axe-core": "^4.10.0",
+        "axobject-query": "^4.1.0",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^3.3.5",
+        "language-tags": "^1.0.9",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.includes": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "5.0.0-canary-7118f5dd7-20230705",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0-canary-7118f5dd7-20230705.tgz",
+      "integrity": "sha512-AZYbMo/NW9chdL7vk6HQzQhT+PvTAEVqWk9ziruUoW2kAOcN5qNyelv70e0F1VNQAbvutOC9oc+xfWycI9FxDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "dev": true,
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+      "dev": true
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.2.0.tgz",
+      "integrity": "sha512-jObKIik1P2QjPHP5nz5BaOtUlfgS0fWo8IUByNXkM+o+02sJOi94em77GwJKQSJ3gfPHdgzLNrHc1uokV4P/ew==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2",
+        "hasown": "^2.0.4",
+        "is-callable": "^1.2.7",
+        "is-document.all": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.14.0.tgz",
+      "integrity": "sha512-yTb+8DXzDREzgvYmh6s9vHsSVCHeC0G3PI5bEXNBHtmshPnO+S5O7qgLEOn0I5QvMy6kpZN8K1NKGyilLb93wA==",
+      "dev": true,
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+    },
+    "node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hash.js": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "dev": true
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bun-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz",
+      "integrity": "sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^7.7.1"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
+      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
+      "dev": true,
+      "dependencies": {
+        "hasown": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-document.all": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-document.all/-/is-document.all-1.0.0.tgz",
+      "integrity": "sha512-+XSoyS05OdBbhFuELhgTCpFNHkpBOJqtsZfUFFpe5QTw+9Sjbh8zitxhQkYAo6wV7e1Vb8cAPvpCk9jGam/82g==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/js-yaml": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.2.0.tgz",
+      "integrity": "sha512-ePWsvanv0DWuDRsW8dnt+R4jQ31SCRCQ7hhNcPXZPsoBZiemuZNYGf7adZdqX2D86j6rvKp3RpCxVTSb8WQlOw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true
+    },
+    "node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "dev": true,
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/language-subtag-registry": {
+      "version": "0.3.23",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
+      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==",
+      "dev": true
+    },
+    "node_modules/language-tags": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
+      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
+      "dev": true,
+      "dependencies": {
+        "language-subtag-registry": "^0.3.20"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "dev": true,
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.344.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.344.0.tgz",
+      "integrity": "sha512-6YyBnn91GB45VuVT96bYCOKElbJzUHqp65vX8cDcu55MQL9T969v4dhGClpljamuI/+KMO9P6w9Acq1CVQGvIQ==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "dev": true
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/napi-postinstall": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
+      "integrity": "sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==",
+      "dev": true,
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true
+    },
+    "node_modules/next": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.5.6.tgz",
+      "integrity": "sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==",
+      "deprecated": "This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details.",
+      "dependencies": {
+        "@next/env": "13.5.6",
+        "@swc/helpers": "0.5.2",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001406",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1",
+        "watchpack": "2.4.0"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "13.5.6",
+        "@next/swc-darwin-x64": "13.5.6",
+        "@next/swc-linux-arm64-gnu": "13.5.6",
+        "@next/swc-linux-arm64-musl": "13.5.6",
+        "@next/swc-linux-x64-gnu": "13.5.6",
+        "@next/swc-linux-x64-musl": "13.5.6",
+        "@next/swc-win32-arm64-msvc": "13.5.6",
+        "@next/swc-win32-ia32-msvc": "13.5.6",
+        "@next/swc-win32-x64-msvc": "13.5.6"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node-exports-info": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/node-exports-info/-/node-exports-info-1.6.0.tgz",
+      "integrity": "sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw==",
+      "dev": true,
+      "dependencies": {
+        "array.prototype.flatmap": "^1.3.3",
+        "es-errors": "^1.3.0",
+        "object.entries": "^1.1.9",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/node-exports-info/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.47",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.47.tgz",
+      "integrity": "sha512-Uzmd6LXpouKo8EUK68IjH4+E01w/hXyV3R3g/geCJo+rXLNfh1xucB+LOzYEOQPSiUK3h/xZf0cQGcSsmyL2Og==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "dev": true
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.12",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-import/node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz",
+      "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dev": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readable-stream/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "dev": true
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "2.0.0-next.7",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.7.tgz",
+      "integrity": "sha512-tqt+NBWwyaMgw3zDsnygx4CByWjQEJHOPMdslYhppaQSJUtL/D4JO9CcBBlhPoI8lz9oJIDXkwXfhF4aWqP8xQ==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.2",
+        "node-exports-info": "^1.6.0",
+        "object-keys": "^1.1.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.4.tgz",
+      "integrity": "sha512-wtZlHyOje6OZTGqAoaDKxFkgRtkF9CnHAVnCHKfuj200wAgL+bSJhdsCD2l0Qx/2ekEXjPWcyKkfGb5CPboslg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "get-intrinsic": "^1.3.0",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/sax": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
+      "integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==",
+      "dev": true,
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.4.tgz",
+      "integrity": "sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "dev": true
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
+      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stable-hash": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
+      "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
+      "dev": true
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string.prototype.includes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
+      "integrity": "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.11.tgz",
+      "integrity": "sha512-PwvK7BU+CMTJGYQCTZb5RWXIML92lftJLhQz1tBzgKiqGxJaMlBAa48POXaNAC2s4y8jr3EFqrkF9+44neS46w==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.2",
+        "es-object-atoms": "^1.1.2",
+        "has-property-descriptors": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.10.tgz",
+      "integrity": "sha512-2+3aDAOmPTmuFwjDnmJG2ctEkQKVki7vOSqaxkv42Mowj1V6PnvuwFCRrR5lChUux1TBskPjfkeTOhqczDMxTw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
+      "integrity": "sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.8.tgz",
+      "integrity": "sha512-phPGCwqr2+Qo0fwniCE8e4pKnGu/yFb5nD5Y8bf0EEeiI5GklnACYA9GFy/DrAeRrKHXvHn+1SUsOWgJp6RO+g==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "for-each": "^0.3.5",
+        "gopd": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "possible-typed-array-names": "^1.1.0",
+        "reflect.getprototypeof": "^1.0.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true
+    },
+    "node_modules/unrs-resolver": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.12.2.tgz",
+      "integrity": "sha512-dmlRxBJJayXjqTwC+JtF1HhJmgf3ftQ3YejFcZrf4+KKtJv0qDsK1pjqaaVjG7wJ5NJ6UVP1OqRMQ71Z4C3rxQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "napi-postinstall": "^0.3.4"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unrs-resolver"
+      },
+      "optionalDependencies": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.12.2",
+        "@unrs/resolver-binding-android-arm64": "1.12.2",
+        "@unrs/resolver-binding-darwin-arm64": "1.12.2",
+        "@unrs/resolver-binding-darwin-x64": "1.12.2",
+        "@unrs/resolver-binding-freebsd-x64": "1.12.2",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.12.2",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.12.2",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-loong64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-loong64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-x64-musl": "1.12.2",
+        "@unrs/resolver-binding-openharmony-arm64": "1.12.2",
+        "@unrs/resolver-binding-wasm32-wasi": "1.12.2",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.12.2",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.12.2",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.12.2"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
+    },
+    "node_modules/watchpack": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
+      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "dependencies": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.22",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.22.tgz",
+      "integrity": "sha512-fvO4ExWMFsqyhG3AiPAObMuY1lxaqgYcxbc49CNdWDDECOJNgQyvsOWVwbZc+qf3rzRtxojBK+CMEv0Ld5CYpw==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
+    },
+    "node_modules/xml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
+      "integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==",
+      "dev": true
+    },
+    "node_modules/xml-js": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+      "dev": true,
+      "dependencies": {
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "xml-js": "bin/cli.js"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    }
+  },
+  "dependencies": {
+    "@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true
+    },
+    "@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^3.4.3"
+      }
+    },
+    "@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true
+    },
+    "@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      }
+    },
+    "@eslint/js": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+      "dev": true
+    },
+    "@humanwhocodes/config-array": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
+      "dev": true,
+      "requires": {
+        "@humanwhocodes/object-schema": "^2.0.3",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      }
+    },
+    "@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true
+    },
+    "@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "dev": true
+    },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "@napi-rs/wasm-runtime": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.5.tgz",
+      "integrity": "sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@tybys/wasm-util": "^0.10.2"
+      }
+    },
+    "@next/env": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.6.tgz",
+      "integrity": "sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw=="
+    },
+    "@next/eslint-plugin-next": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.5.6.tgz",
+      "integrity": "sha512-ng7pU/DDsxPgT6ZPvuprxrkeew3XaRf4LAT4FabaEO/hAbvVx4P7wqnqdbTdDn1kgTvsI4tpIgT4Awn/m0bGbg==",
+      "dev": true,
+      "requires": {
+        "glob": "7.1.7"
+      }
+    },
+    "@next/swc-darwin-arm64": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.6.tgz",
+      "integrity": "sha512-5nvXMzKtZfvcu4BhtV0KH1oGv4XEW+B+jOfmBdpFI3C7FrB/MfujRpWYSBBO64+qbW8pkZiSyQv9eiwnn5VIQA==",
+      "optional": true
+    },
+    "@next/swc-darwin-x64": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.6.tgz",
+      "integrity": "sha512-6cgBfxg98oOCSr4BckWjLLgiVwlL3vlLj8hXg2b+nDgm4bC/qVXXLfpLB9FHdoDu4057hzywbxKvmYGmi7yUzA==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-gnu": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.6.tgz",
+      "integrity": "sha512-txagBbj1e1w47YQjcKgSU4rRVQ7uF29YpnlHV5xuVUsgCUf2FmyfJ3CPjZUvpIeXCJAoMCFAoGnbtX86BK7+sg==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-musl": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.6.tgz",
+      "integrity": "sha512-cGd+H8amifT86ZldVJtAKDxUqeFyLWW+v2NlBULnLAdWsiuuN8TuhVBt8ZNpCqcAuoruoSWynvMWixTFcroq+Q==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-gnu": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.6.tgz",
+      "integrity": "sha512-Mc2b4xiIWKXIhBy2NBTwOxGD3nHLmq4keFk+d4/WL5fMsB8XdJRdtUlL87SqVCTSaf1BRuQQf1HvXZcy+rq3Nw==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-musl": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.6.tgz",
+      "integrity": "sha512-CFHvP9Qz98NruJiUnCe61O6GveKKHpJLloXbDSWRhqhkJdZD2zU5hG+gtVJR//tyW897izuHpM6Gtf6+sNgJPQ==",
+      "optional": true
+    },
+    "@next/swc-win32-arm64-msvc": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.6.tgz",
+      "integrity": "sha512-aFv1ejfkbS7PUa1qVPwzDHjQWQtknzAZWGTKYIAaS4NMtBlk3VyA6AYn593pqNanlicewqyl2jUhQAaFV/qXsg==",
+      "optional": true
+    },
+    "@next/swc-win32-ia32-msvc": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.6.tgz",
+      "integrity": "sha512-XqqpHgEIlBHvzwG8sp/JXMFkLAfGLqkbVsyN+/Ih1mR8INb6YCc2x/Mbwi6hsAgUnqQztz8cvEbHJUbSl7RHDg==",
+      "optional": true
+    },
+    "@next/swc-win32-x64-msvc": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.6.tgz",
+      "integrity": "sha512-Cqfe1YmOS7k+5mGu92nl5ULkzpKuxJrP3+4AEuPmrpFZ3BHxTY3TnHmU1On3bFmFFs6FbTcdF58CCUProGpIGQ==",
+      "optional": true
+    },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      }
+    },
+    "@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+      "dev": true
+    },
+    "@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true
+    },
+    "@rushstack/eslint-patch": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.16.1.tgz",
+      "integrity": "sha512-TvZbIpeKqGQQ7X0zSCvPH9riMSFQFSggnfBjFZ1mEoILW+UuXCKwOoPcgjMwiUtRqFZ8jWhPJc4um14vC6I4ag==",
+      "dev": true
+    },
+    "@swc/helpers": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
+      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "@tybys/wasm-util": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
+      "integrity": "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true
+    },
+    "@types/node": {
+      "version": "20.19.43",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.43.tgz",
+      "integrity": "sha512-6oYBAi5ikg4Pl+kGsoYtawUMBT2zZMCvPNF7pVLnHZfd1zf38DRiWn/gT01RYCdUqkv7Fhr+C9ot4/tb+2sVvA==",
+      "dev": true,
+      "requires": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "devOptional": true
+    },
+    "@types/react": {
+      "version": "18.3.31",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.31.tgz",
+      "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==",
+      "devOptional": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
+      }
+    },
+    "@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "@typescript-eslint/parser": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
+      "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/scope-manager": "6.21.0",
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/typescript-estree": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
+        "debug": "^4.3.4"
+      }
+    },
+    "@typescript-eslint/scope-manager": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz",
+      "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0"
+      }
+    },
+    "@typescript-eslint/types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz",
+      "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==",
+      "dev": true
+    },
+    "@typescript-eslint/typescript-estree": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz",
+      "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "9.0.3",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.1.tgz",
+          "integrity": "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "9.0.3",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+          "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
+      }
+    },
+    "@typescript-eslint/visitor-keys": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
+      "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "6.21.0",
+        "eslint-visitor-keys": "^3.4.1"
+      }
+    },
+    "@ungap/structured-clone": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.1.tgz",
+      "integrity": "sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ==",
+      "dev": true
+    },
+    "@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.12.2.tgz",
+      "integrity": "sha512-g5T90pqg1bo/7mytQx6F4iBNC0Wsh9cu+z9veDbFjc7HjpesJFWD7QMS0NGStXM075+7dJPPVvBbpZlnrdpi/w==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-android-arm64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.12.2.tgz",
+      "integrity": "sha512-YGCRZv/9GLhwmz6mYDeTsm/92BAyR28l6c2ReweVW5pWgfsitWLY8upvfRlGdoyD8HjeTHSYJWyZGD4KJA/nFQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.12.2.tgz",
+      "integrity": "sha512-u9DiNT1auQMO20A9SyTuG3wUgQWB9Z7KjAg0uFuCDR1FsAY8A0CG2S6JpHS1xwm/w1G08bjXZDcyOCjv1WAm2w==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-darwin-x64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.12.2.tgz",
+      "integrity": "sha512-f7rPLi/T1HVKZu/u6t87lroib16n8vrSzcyxI7lg4BGO9UF26KhQL44sd9eOUgrTYhvRXtWOIZT5PejdPyJfUA==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.12.2.tgz",
+      "integrity": "sha512-BpcOjWCJub6nRZUS2zA20pmLvjtqAtGejETaIyRLiZiQf++cbrjltLA5NN/xaXfqeOBOSlMFbemIl5/S5tljmg==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.12.2.tgz",
+      "integrity": "sha512-vZTDvdSISZjJx66OzJqtsOhzifbqRjbmI1Mnu49fQDwog5GtDI4QidRiEAYbZCRj9C8YZEW+3ZjqsyS9GR4k2A==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.12.2.tgz",
+      "integrity": "sha512-BiPI+IrIlwcW4nLLMM21+B1dFPzd55yAVgVGrdgDjNef+ch03GdxrcyaIz8X9SsQirh/kCQ7mviyWlMxdh2D7g==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.12.2.tgz",
+      "integrity": "sha512-zJc0H99FEPoFfSrNpa91HYfxzfAJCr502oxNK1cfdC9hlaFI43RT+JFCann9JUgZmLzzntChHyn13Sgn9ljHNg==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.12.2.tgz",
+      "integrity": "sha512-KQ3Lki6l+Pz1k/eBipN41ES+YUK30beLGb9YqcB1O542cyLCNE6GaxrfcY3T6EezmGGk84wb5XyO9loTM9tkcA==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-linux-loong64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-loong64-gnu/-/resolver-binding-linux-loong64-gnu-1.12.2.tgz",
+      "integrity": "sha512-3SJGEh1DborhG6pyxvhPzCT4bbSIVihsvgJc13P1bHG7KLdNDaF9T3gsTwFc7Jw/5Y5/iWOjkEx7Zy0NvCGX3Q==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-linux-loong64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-loong64-musl/-/resolver-binding-linux-loong64-musl-1.12.2.tgz",
+      "integrity": "sha512-jiuG/Obbel7uw1PwHNFfrkiKhLAF6mnyZ6aWlOAVN9WqKm8v0OFGnciJIHu8+CMvXLQ8AD51LPzAoUfT21D5Ew==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.12.2.tgz",
+      "integrity": "sha512-q7xRvVpmcfeL+LlZg8Pbbo6QaTZwDU5BaGZbwfhkEsXJn3Was8xYfE0RBH266xZt0rM6B7i8xAYIvjthuUIWHg==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.12.2.tgz",
+      "integrity": "sha512-0CVdx6lcnT3Q9inOH8tsMIOJ6ImndllMjqJHg8RLVdB7Vq4SfkEXl9mCSsVNuNA4MCYycRicCUxPCabVHJRr6A==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.12.2.tgz",
+      "integrity": "sha512-iOwlRo9vnp6R6ohHQS11n0NnfdXx/omhkocmIfaPRpQhKZ+3BDMkkdRVh53qjkFkpPddf+FETA28NwGN7l5l+w==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.12.2.tgz",
+      "integrity": "sha512-HYJtLfXq94q8iZNFT1lknx258wlkkWhZeUXJRqzKBBUJ00CvZ+N33zgbCqimLjsyw5Va6uUxhVa12mI+kaveEw==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.12.2.tgz",
+      "integrity": "sha512-mPsUhunKKDih5O96Y6enDQyHc1SqBPlY1E/SfMWDM3EdJ95Z9CArPeCVwCCqbP45ljvivdEk8Fxn+SIb1rDAJQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.12.2.tgz",
+      "integrity": "sha512-azrt6+5ydLd8Vt210AAFis/lZevSfPw93EJRIJG+xPu4WCJ8K0kppCTpMyLPcKT7H15M4Jnt2tMp5bOvCkRC6A==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-openharmony-arm64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-openharmony-arm64/-/resolver-binding-openharmony-arm64-1.12.2.tgz",
+      "integrity": "sha512-YZ9hP4O0X9PQb8eO980qmLNGH4zT3I9+SZTdt0Pr0YyuGQhYKoOZkV02VzrzyOZJ5xIJ3UFIenKkUkGg8GjgWQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.12.2.tgz",
+      "integrity": "sha512-tYFDIkMxSflfEc/h92ZWNsZlHSwgimbNHSO3PL2JWQHfCuC2q316jMyYU9TIWZsFK2bQwyK5VAdYgn8ygPj69A==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@emnapi/core": "1.10.0",
+        "@emnapi/runtime": "1.10.0",
+        "@napi-rs/wasm-runtime": "^1.1.4"
+      }
+    },
+    "@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.12.2.tgz",
+      "integrity": "sha512-qzNyg3xL0VPQmCaUh+N5jSitce6k+uCBfMDesWRnlULOZaqUkaJ0ybdT+UqlAWJoQjuqfIU/0Ptx9bteN4D82g==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.12.2.tgz",
+      "integrity": "sha512-WD9sY00OfpHVGfsnHZoA8jVT+esS/Bg8z8jzxp5BnDCjjwsuKsPQrzswwpFy4J1AUJbXPRfkpcX0mXrzeXW79g==",
+      "dev": true,
+      "optional": true
+    },
+    "@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.12.2.tgz",
+      "integrity": "sha512-nAB74NfSNKknqQ1RrYj6uz8FcXEomu/MATJZxh/x+BArzN2U3JbOYC0APYzUIGhVY3m5hRxA8VPNdPBoG8txlA==",
+      "dev": true,
+      "optional": true
+    },
+    "acorn": {
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
+      "integrity": "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==",
+      "dev": true
+    },
+    "acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "ajv": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+      "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
+    "any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
+    },
+    "anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
+    "argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true
+    },
+    "array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      }
+    },
+    "array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      }
+    },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true
+    },
+    "array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      }
+    },
+    "array.prototype.findlastindex": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
+      }
+    },
+    "array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      }
+    },
+    "array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      }
+    },
+    "array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      }
+    },
+    "arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "requires": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      }
+    },
+    "ast-types-flow": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
+      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
+      "dev": true
+    },
+    "async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true
+    },
+    "autoprefixer": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.0.tgz",
+      "integrity": "sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.28.2",
+        "caniuse-lite": "^1.0.30001787",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "requires": {
+        "possible-typed-array-names": "^1.0.0"
+      }
+    },
+    "axe-core": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.12.1.tgz",
+      "integrity": "sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==",
+      "dev": true
+    },
+    "axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "baseline-browser-mapping": {
+      "version": "2.10.37",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.37.tgz",
+      "integrity": "sha512-girxaJ7WZssDOFhzCGZTDKoTa1gk6A1TbflaYTpykLJ4UU9Fz9kx1aREM8JCuoVHbL8X8T/mJg7w2oYSq72Oig==",
+      "dev": true
+    },
+    "binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true
+    },
+    "brace-expansion": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.15.tgz",
+      "integrity": "sha512-EwOCDEex4quD37XhqM3omwtMoJjr//isUZz1JopUNWms+4Z2ViyM/k1YIRePpoVNnQhENnxtFjLaxNHrT7xIUg==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.1.1"
+      }
+    },
+    "browserslist": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "dev": true,
+      "requires": {
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
+      }
+    },
+    "busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "requires": {
+        "streamsearch": "^1.1.0"
+      }
+    },
+    "call-bind": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.9.tgz",
+      "integrity": "sha512-a/hy+pNsFUTR+Iz8TCJvXudKVLAnz/DyeSUo10I5yvFDQJBFU2s9uqQpoSrJlroHUKoKqzg+epxyP9lqFdzfBQ==",
+      "dev": true,
+      "requires": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "get-intrinsic": "^1.3.0",
+        "set-function-length": "^1.2.2"
+      }
+    },
+    "call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      }
+    },
+    "call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "requires": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      }
+    },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true
+    },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001799",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
+      "integrity": "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw=="
+    },
+    "chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      }
+    },
+    "chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        }
+      }
+    },
+    "client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
+    "clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "dev": true
+    },
+    "cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      }
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
+    "csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true
+    },
+    "damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+      "dev": true
+    },
+    "data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      }
+    },
+    "data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      }
+    },
+    "data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      }
+    },
+    "debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "requires": {
+        "ms": "^2.1.3"
+      }
+    },
+    "deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
+    },
+    "define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "requires": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      }
+    },
+    "define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "requires": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
+    "dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "requires": {
+        "path-type": "^4.0.0"
+      }
+    },
+    "dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
+    "doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "requires": {
+        "esutils": "^2.0.2"
+      }
+    },
+    "docx": {
+      "version": "9.7.1",
+      "resolved": "https://registry.npmjs.org/docx/-/docx-9.7.1.tgz",
+      "integrity": "sha512-ilXFf9Moz47ABjFpDiA5s1w9lpb4EFSp7+5iiJSbfyYDM+bpZdAgLlSr7fW4aXhVe/E+F6QCv0EvRVFEd5CsWg==",
+      "dev": true,
+      "requires": {
+        "@types/node": "^25.2.3",
+        "hash.js": "^1.1.7",
+        "jszip": "^3.10.1",
+        "nanoid": "^5.1.3",
+        "xml": "^1.0.1",
+        "xml-js": "^1.6.8"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "25.9.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.3.tgz",
+          "integrity": "sha512-603BddQMv3pUcr4U2dhujk83N2tTDVr/34wII2B6bJy6g+8WD6yUb11jszNs0gdi4PesVWl7ABt8nYMVpnLUcg==",
+          "dev": true,
+          "requires": {
+            "undici-types": ">=7.24.0 <7.24.7"
+          }
+        },
+        "nanoid": {
+          "version": "5.1.11",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.11.tgz",
+          "integrity": "sha512-v+KEsUv2ps74PaSKv0gHTxTCgMXOIfBEbaqa6w6ISIGC7ZsvHN4N9oJ8d4cmf0n5oTzQz2SLmThbQWhjd/8eKg==",
+          "dev": true
+        },
+        "undici-types": {
+          "version": "7.24.6",
+          "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.24.6.tgz",
+          "integrity": "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==",
+          "dev": true
+        }
+      }
+    },
+    "dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "requires": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      }
+    },
+    "electron-to-chromium": {
+      "version": "1.5.375",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.375.tgz",
+      "integrity": "sha512-ZWP5eB4BVPW/ZYo9252hQZHZ5XavtsTgpbhcmMmRwymavC5AsLWQWBPaKMeNd2LW0KGby5HPXvj7+sr4ta5j/Q==",
+      "dev": true
+    },
+    "emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "es-abstract": {
+      "version": "1.24.2",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.2.tgz",
+      "integrity": "sha512-2FpH9Q5i2RRwyEP1AylXe6nYLR5OhaJTZwmlcP0dL/+JCbgg7yyEo/sEK6HeGZRf3dFpWwThaRHVApXSkW3xeg==",
+      "dev": true,
+      "requires": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      }
+    },
+    "es-abstract-get": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-abstract-get/-/es-abstract-get-1.0.0.tgz",
+      "integrity": "sha512-6PMWXpdhshVvFp+FoWYs1EvG1Nj0tvk0dZM+XcK0xMEM1czRVcP6ohqPWHy6qPagSpC8j4+p89WXlT+xXJs/fg==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.2",
+        "is-callable": "^1.2.7",
+        "object-inspect": "^1.13.4"
+      }
+    },
+    "es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true
+    },
+    "es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true
+    },
+    "es-iterator-helpers": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.3.3.tgz",
+      "integrity": "sha512-0PuBxFi+4uPanB97iDxCLWuHeYud2FALrw5HFZGtAF38UpJDbDC8frwp2cnDyae692CQ0dou60UwWfhgsa4U/g==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.2",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.1.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.3.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.5",
+        "math-intrinsics": "^1.1.0"
+      }
+    },
+    "es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0"
+      }
+    },
+    "es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      }
+    },
+    "es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "requires": {
+        "hasown": "^2.0.2"
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.1.tgz",
+      "integrity": "sha512-CxN9N56HYfd2m/acc/NOFrZQsN9kU4eh+2kk6A707Kz1krH8tKmfrs5RnftB8WNX80T0NS7vSQsDOlg23diR2g==",
+      "dev": true,
+      "requires": {
+        "es-abstract-get": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.1.0",
+        "is-symbol": "^1.1.1"
+      }
+    },
+    "escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true
+    },
+    "eslint": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "dev": true,
+      "requires": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.1",
+        "@humanwhocodes/config-array": "^0.13.0",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      }
+    },
+    "eslint-config-next": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.5.6.tgz",
+      "integrity": "sha512-o8pQsUHTo9aHqJ2YiZDym5gQAMRf7O2HndHo/JZeY7TDD+W4hk6Ma8Vw54RHiBeb7OWWO5dPirQB+Is/aVQ7Kg==",
+      "dev": true,
+      "requires": {
+        "@next/eslint-plugin-next": "13.5.6",
+        "@rushstack/eslint-patch": "^1.3.3",
+        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.28.1",
+        "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
+      }
+    },
+    "eslint-import-resolver-node": {
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.10.tgz",
+      "integrity": "sha512-tRrKqFyCaKict5hOd244sL6EQFNycnMQnBe+j8uqGNXYzsImGbGUU4ibtoaBmv5FLwJwcFJNeg1GeVjQfbMrDQ==",
+      "dev": true,
+      "requires": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.16.1",
+        "resolve": "^2.0.0-next.6"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "eslint-import-resolver-typescript": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.10.1.tgz",
+      "integrity": "sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==",
+      "dev": true,
+      "requires": {
+        "@nolyfill/is-core-module": "1.0.39",
+        "debug": "^4.4.0",
+        "get-tsconfig": "^4.10.0",
+        "is-bun-module": "^2.0.0",
+        "stable-hash": "^0.0.5",
+        "tinyglobby": "^0.2.13",
+        "unrs-resolver": "^1.6.2"
+      }
+    },
+    "eslint-module-utils": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.13.0.tgz",
+      "integrity": "sha512-bLohSkT6469rRs8czj0tLTD8vaeIS/whvPRJVjDr7IuoTT1k5DYDERlNycjDj/HkOlvQdYurmfZ/g3fG5bgeLQ==",
+      "dev": true,
+      "requires": {
+        "debug": "^3.2.7"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "eslint-plugin-import": {
+      "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
+      "dev": true,
+      "requires": {
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.12.1",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.16.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.1",
+        "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.9",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2"
+          }
+        },
+        "semver": {
+          "version": "6.3.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-plugin-jsx-a11y": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
+      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
+      "dev": true,
+      "requires": {
+        "aria-query": "^5.3.2",
+        "array-includes": "^3.1.8",
+        "array.prototype.flatmap": "^1.3.2",
+        "ast-types-flow": "^0.0.8",
+        "axe-core": "^4.10.0",
+        "axobject-query": "^4.1.0",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^3.3.5",
+        "language-tags": "^1.0.9",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.includes": "^2.0.1"
+      }
+    },
+    "eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "dependencies": {
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2"
+          }
+        },
+        "semver": {
+          "version": "6.3.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-plugin-react-hooks": {
+      "version": "5.0.0-canary-7118f5dd7-20230705",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0-canary-7118f5dd7-20230705.tgz",
+      "integrity": "sha512-AZYbMo/NW9chdL7vk6HQzQhT+PvTAEVqWk9ziruUoW2kAOcN5qNyelv70e0F1VNQAbvutOC9oc+xfWycI9FxDw==",
+      "dev": true,
+      "requires": {}
+    },
+    "eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "requires": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true
+    },
+    "espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      }
+    },
+    "esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.1.0"
+      }
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.2.0"
+      }
+    },
+    "estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        }
+      }
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true
+    },
+    "fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "requires": {
+        "flat-cache": "^3.0.4"
+      }
+    },
+    "fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "requires": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
+    "flat-cache": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "dev": true,
+      "requires": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      }
+    },
+    "flatted": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+      "dev": true
+    },
+    "for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.2.7"
+      }
+    },
+    "fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
+    },
+    "fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true
+    },
+    "function.prototype.name": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.2.0.tgz",
+      "integrity": "sha512-jObKIik1P2QjPHP5nz5BaOtUlfgS0fWo8IUByNXkM+o+02sJOi94em77GwJKQSJ3gfPHdgzLNrHc1uokV4P/ew==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2",
+        "hasown": "^2.0.4",
+        "is-callable": "^1.2.7",
+        "is-document.all": "^1.0.0"
+      }
+    },
+    "functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true
+    },
+    "generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true
+    },
+    "get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "requires": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      }
+    },
+    "get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "requires": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      }
+    },
+    "get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      }
+    },
+    "get-tsconfig": {
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.14.0.tgz",
+      "integrity": "sha512-yTb+8DXzDREzgvYmh6s9vHsSVCHeC0G3PI5bEXNBHtmshPnO+S5O7qgLEOn0I5QvMy6kpZN8K1NKGyilLb93wA==",
+      "dev": true,
+      "requires": {
+        "resolve-pkg-maps": "^1.0.0"
+      }
+    },
+    "glob": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.3"
+      }
+    },
+    "glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+    },
+    "globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "requires": {
+        "type-fest": "^0.20.2"
+      }
+    },
+    "globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      }
+    },
+    "globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "requires": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      }
+    },
+    "gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true
+    },
+    "graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+    },
+    "graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true
+    },
+    "has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true
+    },
+    "has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true
+    },
+    "has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "requires": {
+        "es-define-property": "^1.0.0"
+      }
+    },
+    "has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "requires": {
+        "dunder-proto": "^1.0.0"
+      }
+    },
+    "has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true
+    },
+    "has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.3"
+      }
+    },
+    "hash.js": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
+    "hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.2"
+      }
+    },
+    "ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true
+    },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "dev": true
+    },
+    "import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      }
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      }
+    },
+    "is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      }
+    },
+    "is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "requires": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      }
+    },
+    "is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "requires": {
+        "has-bigints": "^1.0.2"
+      }
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      }
+    },
+    "is-bun-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz",
+      "integrity": "sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==",
+      "dev": true,
+      "requires": {
+        "semver": "^7.7.1"
+      }
+    },
+    "is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true
+    },
+    "is-core-module": {
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
+      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
+      "dev": true,
+      "requires": {
+        "hasown": "^2.0.3"
+      }
+    },
+    "is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      }
+    },
+    "is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      }
+    },
+    "is-document.all": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-document.all/-/is-document.all-1.0.0.tgz",
+      "integrity": "sha512-+XSoyS05OdBbhFuELhgTCpFNHkpBOJqtsZfUFFpe5QTw+9Sjbh8zitxhQkYAo6wV7e1Vb8cAPvpCk9jGam/82g==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.4"
+      }
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true
+    },
+    "is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.3"
+      }
+    },
+    "is-generator-function": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      }
+    },
+    "is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true
+    },
+    "is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      }
+    },
+    "is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true
+    },
+    "is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      }
+    },
+    "is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true
+    },
+    "is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.3"
+      }
+    },
+    "is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      }
+    },
+    "is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      }
+    },
+    "is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "requires": {
+        "which-typed-array": "^1.1.16"
+      }
+    },
+    "is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true
+    },
+    "is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.3"
+      }
+    },
+    "is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      }
+    },
+    "isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
+    "iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "requires": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      }
+    },
+    "jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "js-yaml": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.2.0.tgz",
+      "integrity": "sha512-ePWsvanv0DWuDRsW8dnt+R4jQ31SCRCQ7hhNcPXZPsoBZiemuZNYGf7adZdqX2D86j6rvKp3RpCxVTSb8WQlOw==",
+      "dev": true,
+      "requires": {
+        "argparse": "^2.0.1"
+      }
+    },
+    "json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true
+    },
+    "json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true
+    },
+    "json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.0"
+      }
+    },
+    "jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      }
+    },
+    "jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "dev": true,
+      "requires": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "requires": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "language-subtag-registry": {
+      "version": "0.3.23",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
+      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==",
+      "dev": true
+    },
+    "language-tags": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
+      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
+      "dev": true,
+      "requires": {
+        "language-subtag-registry": "^0.3.20"
+      }
+    },
+    "levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      }
+    },
+    "lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "dev": true,
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
+    "lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true
+    },
+    "lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
+    },
+    "locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "requires": {
+        "p-locate": "^5.0.0"
+      }
+    },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "lucide-react": {
+      "version": "0.344.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.344.0.tgz",
+      "integrity": "sha512-6YyBnn91GB45VuVT96bYCOKElbJzUHqp65vX8cDcu55MQL9T969v4dhGClpljamuI/+KMO9P6w9Acq1CVQGvIQ==",
+      "requires": {}
+    },
+    "math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true
+    },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "requires": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      }
+    },
+    "minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "dev": true
+    },
+    "minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true
+    },
+    "ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
+    "mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "requires": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "nanoid": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ=="
+    },
+    "napi-postinstall": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
+      "integrity": "sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==",
+      "dev": true
+    },
+    "natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true
+    },
+    "next": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.5.6.tgz",
+      "integrity": "sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==",
+      "requires": {
+        "@next/env": "13.5.6",
+        "@next/swc-darwin-arm64": "13.5.6",
+        "@next/swc-darwin-x64": "13.5.6",
+        "@next/swc-linux-arm64-gnu": "13.5.6",
+        "@next/swc-linux-arm64-musl": "13.5.6",
+        "@next/swc-linux-x64-gnu": "13.5.6",
+        "@next/swc-linux-x64-musl": "13.5.6",
+        "@next/swc-win32-arm64-msvc": "13.5.6",
+        "@next/swc-win32-ia32-msvc": "13.5.6",
+        "@next/swc-win32-x64-msvc": "13.5.6",
+        "@swc/helpers": "0.5.2",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001406",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1",
+        "watchpack": "2.4.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "8.4.31",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+          "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+          "requires": {
+            "nanoid": "^3.3.6",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
+        }
+      }
+    },
+    "node-exports-info": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/node-exports-info/-/node-exports-info-1.6.0.tgz",
+      "integrity": "sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw==",
+      "dev": true,
+      "requires": {
+        "array.prototype.flatmap": "^1.3.3",
+        "es-errors": "^1.3.0",
+        "object.entries": "^1.1.9",
+        "semver": "^6.3.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+          "dev": true
+        }
+      }
+    },
+    "node-releases": {
+      "version": "2.0.47",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.47.tgz",
+      "integrity": "sha512-Uzmd6LXpouKo8EUK68IjH4+E01w/hXyV3R3g/geCJo+rXLNfh1xucB+LOzYEOQPSiUK3h/xZf0cQGcSsmyL2Og==",
+      "dev": true
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true
+    },
+    "object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true
+    },
+    "object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true
+    },
+    "object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      }
+    },
+    "object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      }
+    },
+    "object.groupby": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      }
+    },
+    "object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      }
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "requires": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      }
+    },
+    "own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      }
+    },
+    "p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "requires": {
+        "yocto-queue": "^0.1.0"
+      }
+    },
+    "p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^3.0.2"
+      }
+    },
+    "pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "dev": true
+    },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true
+    },
+    "path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true
+    },
+    "picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+    },
+    "picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true
+    },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true
+    },
+    "pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true
+    },
+    "possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true
+    },
+    "postcss": {
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "dev": true,
+      "requires": {
+        "nanoid": "^3.3.12",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "dependencies": {
+        "resolve": {
+          "version": "1.22.12",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+          "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+          "dev": true,
+          "requires": {
+            "es-errors": "^1.3.0",
+            "is-core-module": "^2.16.1",
+            "path-parse": "^1.0.7",
+            "supports-preserve-symlinks-flag": "^1.0.0"
+          }
+        }
+      }
+    },
+    "postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "requires": {
+        "camelcase-css": "^2.0.1"
+      }
+    },
+    "postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "requires": {
+        "lilconfig": "^3.1.1"
+      }
+    },
+    "postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.1.1"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz",
+      "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
+    "prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true
+    },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true
+    },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true
+    },
+    "react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      }
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
+    },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "requires": {
+        "pify": "^2.3.0"
+      }
+    },
+    "readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dev": true,
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+          "dev": true
+        }
+      }
+    },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      }
+    },
+    "regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      }
+    },
+    "resolve": {
+      "version": "2.0.0-next.7",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.7.tgz",
+      "integrity": "sha512-tqt+NBWwyaMgw3zDsnygx4CByWjQEJHOPMdslYhppaQSJUtL/D4JO9CcBBlhPoI8lz9oJIDXkwXfhF4aWqP8xQ==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.2",
+        "node-exports-info": "^1.6.0",
+        "object-keys": "^1.1.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      }
+    },
+    "resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true
+    },
+    "resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true
+    },
+    "reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "safe-array-concat": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.4.tgz",
+      "integrity": "sha512-wtZlHyOje6OZTGqAoaDKxFkgRtkF9CnHAVnCHKfuj200wAgL+bSJhdsCD2l0Qx/2ekEXjPWcyKkfGb5CPboslg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "get-intrinsic": "^1.3.0",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      }
+    },
+    "safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      }
+    },
+    "sax": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
+      "integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==",
+      "dev": true
+    },
+    "scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "semver": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.4.tgz",
+      "integrity": "sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA==",
+      "dev": true
+    },
+    "set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "requires": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      }
+    },
+    "set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "requires": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      }
+    },
+    "set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "requires": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      }
+    },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "dev": true
+    },
+    "shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^3.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true
+    },
+    "side-channel": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
+      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      }
+    },
+    "side-channel-list": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4"
+      }
+    },
+    "side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      }
+    },
+    "side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      }
+    },
+    "slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true
+    },
+    "source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
+    },
+    "stable-hash": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
+      "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
+      "dev": true
+    },
+    "stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      }
+    },
+    "streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg=="
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "string.prototype.includes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
+      "integrity": "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3"
+      }
+    },
+    "string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      }
+    },
+    "string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "string.prototype.trim": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.11.tgz",
+      "integrity": "sha512-PwvK7BU+CMTJGYQCTZb5RWXIML92lftJLhQz1tBzgKiqGxJaMlBAa48POXaNAC2s4y8jr3EFqrkF9+44neS46w==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.2",
+        "es-object-atoms": "^1.1.2",
+        "has-property-descriptors": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      }
+    },
+    "string.prototype.trimend": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.10.tgz",
+      "integrity": "sha512-2+3aDAOmPTmuFwjDnmJG2ctEkQKVki7vOSqaxkv42Mowj1V6PnvuwFCRrR5lChUux1TBskPjfkeTOhqczDMxTw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.2"
+      }
+    },
+    "string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^5.0.1"
+      }
+    },
+    "strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true
+    },
+    "strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true
+    },
+    "styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "requires": {
+        "client-only": "0.0.1"
+      }
+    },
+    "sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      }
+    },
+    "supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^4.0.0"
+      }
+    },
+    "supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true
+    },
+    "tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "requires": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "dependencies": {
+        "resolve": {
+          "version": "1.22.12",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+          "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+          "dev": true,
+          "requires": {
+            "es-errors": "^1.3.0",
+            "is-core-module": "^2.16.1",
+            "path-parse": "^1.0.7",
+            "supports-preserve-symlinks-flag": "^1.0.0"
+          }
+        }
+      }
+    },
+    "text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
+    },
+    "thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "requires": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "requires": {
+        "thenify": ">= 3.1.0 < 4"
+      }
+    },
+    "tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "requires": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "dependencies": {
+        "fdir": {
+          "version": "6.5.0",
+          "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+          "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+          "dev": true,
+          "requires": {}
+        },
+        "picomatch": {
+          "version": "4.0.4",
+          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+          "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+          "dev": true
+        }
+      }
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "ts-api-utils": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
+      "integrity": "sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==",
+      "dev": true,
+      "requires": {}
+    },
+    "ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
+    "tsconfig-paths": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+      "dev": true,
+      "requires": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
+    "type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "^1.2.1"
+      }
+    },
+    "type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true
+    },
+    "typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      }
+    },
+    "typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      }
+    },
+    "typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      }
+    },
+    "typed-array-length": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.8.tgz",
+      "integrity": "sha512-phPGCwqr2+Qo0fwniCE8e4pKnGu/yFb5nD5Y8bf0EEeiI5GklnACYA9GFy/DrAeRrKHXvHn+1SUsOWgJp6RO+g==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.9",
+        "for-each": "^0.3.5",
+        "gopd": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "possible-typed-array-names": "^1.1.0",
+        "reflect.getprototypeof": "^1.0.10"
+      }
+    },
+    "typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true
+    },
+    "unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      }
+    },
+    "undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true
+    },
+    "unrs-resolver": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.12.2.tgz",
+      "integrity": "sha512-dmlRxBJJayXjqTwC+JtF1HhJmgf3ftQ3YejFcZrf4+KKtJv0qDsK1pjqaaVjG7wJ5NJ6UVP1OqRMQ71Z4C3rxQ==",
+      "dev": true,
+      "requires": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.12.2",
+        "@unrs/resolver-binding-android-arm64": "1.12.2",
+        "@unrs/resolver-binding-darwin-arm64": "1.12.2",
+        "@unrs/resolver-binding-darwin-x64": "1.12.2",
+        "@unrs/resolver-binding-freebsd-x64": "1.12.2",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.12.2",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.12.2",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-loong64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-loong64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-x64-musl": "1.12.2",
+        "@unrs/resolver-binding-openharmony-arm64": "1.12.2",
+        "@unrs/resolver-binding-wasm32-wasi": "1.12.2",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.12.2",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.12.2",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.12.2",
+        "napi-postinstall": "^0.3.4"
+      }
+    },
+    "update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "requires": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      }
+    },
+    "uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "requires": {}
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
+    },
+    "watchpack": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
+      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "requires": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      }
+    },
+    "which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "requires": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      }
+    },
+    "which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      }
+    },
+    "which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "requires": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      }
+    },
+    "which-typed-array": {
+      "version": "1.1.22",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.22.tgz",
+      "integrity": "sha512-fvO4ExWMFsqyhG3AiPAObMuY1lxaqgYcxbc49CNdWDDECOJNgQyvsOWVwbZc+qf3rzRtxojBK+CMEv0Ld5CYpw==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      }
+    },
+    "word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
+    },
+    "xml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
+      "integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==",
+      "dev": true
+    },
+    "xml-js": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+      "dev": true,
+      "requires": {
+        "sax": "^1.2.4"
+      }
+    },
+    "yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true
+    },
+    "zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "requires": {
+        "use-sync-external-store": "^1.2.2"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..c971b98
--- /dev/null
+++ b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "kott-gard",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "annotate": "node docs/annotate-all.mjs",
+    "images:populate": "bash scripts/populate-site-images.sh",
+    "images:fish": "bash scripts/update-fish-images.sh"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.344.0",
+    "next": "13.5.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.17",
+    "docx": "^9.7.1",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "13.5.6",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..8567b4c
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
\ No newline at end of file
diff --git a/public/images/site/README.txt b/public/images/site/README.txt
new file mode 100644
index 0000000..0fe62df
--- /dev/null
+++ b/public/images/site/README.txt
@@ -0,0 +1,64 @@
+KÖTT GÅRD — ALL WEBSITE IMAGES (one folder)
+============================================
+
+Every image on the website comes from THIS folder only.
+
+HOW TO CHANGE AN IMAGE
+----------------------
+1. Find the filename below (e.g. beef-steak.jpg)
+2. Replace that file with your new photo (keep the SAME filename)
+3. Save and refresh the browser (Cmd+Shift+R)
+
+You do NOT need to edit any code for normal image swaps.
+
+
+FILENAME GUIDE
+--------------
+
+BRAND
+  logo.jpeg              Header & footer logo
+
+HOME PAGE
+  hero.jpg               Big background on home page
+  about.jpg              About us section photo
+  weekly-offers.jpg      Weekly offers section background
+
+SHOP CATEGORIES (home page tiles)
+  category-chicken.jpg
+  category-beef.jpg
+  category-lamb.jpg
+  category-fish.jpg
+
+PRODUCTS (shop, product page, cart)
+  chicken-whole.jpg      Main photo
+  chicken-whole-2.jpg    Second photo on product page (optional)
+  chicken-breast.jpg
+  chicken-breast-2.jpg
+  chicken-thighs.jpg
+  chicken-wings.jpg
+  beef-nihari.jpg
+  beef-nihari-2.jpg
+  beef-steak.jpg
+  beef-steak-2.jpg
+  beef-mince.jpg
+  beef-boneless.jpg
+  lamb-shoulder.jpg
+  lamb-shoulder-2.jpg
+  lamb-leg.jpg
+  lamb-chops.jpg
+  lamb-mince.jpg
+  fish-salmon.jpg
+  fish-salmon-2.jpg
+  fish-rohu.jpg
+  fish-prawns.jpg
+  fish-basa.jpg
+
+TIPS
+----
+• Use JPG or JPEG, about 1400px wide for products, 2560px for hero
+• Keep filenames lowercase with hyphens
+• Files ending in -2.jpg are extra gallery images on the product page
+• To re-download all images: npm run images:populate
+
+Project path:
+  Kottgard/public/images/site/
\ No newline at end of file
diff --git a/public/images/site/about.jpg b/public/images/site/about.jpg
new file mode 100644
index 0000000..032a9cc
Binary files /dev/null and b/public/images/site/about.jpg differ
diff --git a/public/images/site/beef-boneless.jpg b/public/images/site/beef-boneless.jpg
new file mode 100644
index 0000000..c1e70f5
Binary files /dev/null and b/public/images/site/beef-boneless.jpg differ
diff --git a/public/images/site/beef-mince.jpg b/public/images/site/beef-mince.jpg
new file mode 100644
index 0000000..95921ba
Binary files /dev/null and b/public/images/site/beef-mince.jpg differ
diff --git a/public/images/site/beef-nihari-2.jpg b/public/images/site/beef-nihari-2.jpg
new file mode 100644
index 0000000..f768e81
Binary files /dev/null and b/public/images/site/beef-nihari-2.jpg differ
diff --git a/public/images/site/beef-nihari.jpg b/public/images/site/beef-nihari.jpg
new file mode 100644
index 0000000..aff6f88
Binary files /dev/null and b/public/images/site/beef-nihari.jpg differ
diff --git a/public/images/site/beef-steak-2.jpg b/public/images/site/beef-steak-2.jpg
new file mode 100644
index 0000000..aff6f88
Binary files /dev/null and b/public/images/site/beef-steak-2.jpg differ
diff --git a/public/images/site/beef-steak.jpg b/public/images/site/beef-steak.jpg
new file mode 100644
index 0000000..f768e81
Binary files /dev/null and b/public/images/site/beef-steak.jpg differ
diff --git a/public/images/site/category-beef.jpg b/public/images/site/category-beef.jpg
new file mode 100644
index 0000000..126e98c
Binary files /dev/null and b/public/images/site/category-beef.jpg differ
diff --git a/public/images/site/category-chicken.jpg b/public/images/site/category-chicken.jpg
new file mode 100644
index 0000000..21afdfa
Binary files /dev/null and b/public/images/site/category-chicken.jpg differ
diff --git a/public/images/site/category-fish.jpg b/public/images/site/category-fish.jpg
new file mode 100644
index 0000000..eb31de8
Binary files /dev/null and b/public/images/site/category-fish.jpg differ
diff --git a/public/images/site/category-lamb.jpg b/public/images/site/category-lamb.jpg
new file mode 100644
index 0000000..dfcdb2d
Binary files /dev/null and b/public/images/site/category-lamb.jpg differ
diff --git a/public/images/site/chicken-breast-2.jpg b/public/images/site/chicken-breast-2.jpg
new file mode 100644
index 0000000..abd5ecd
Binary files /dev/null and b/public/images/site/chicken-breast-2.jpg differ
diff --git a/public/images/site/chicken-breast.jpg b/public/images/site/chicken-breast.jpg
new file mode 100644
index 0000000..d7de864
Binary files /dev/null and b/public/images/site/chicken-breast.jpg differ
diff --git a/public/images/site/chicken-thighs.jpg b/public/images/site/chicken-thighs.jpg
new file mode 100644
index 0000000..9029e8f
Binary files /dev/null and b/public/images/site/chicken-thighs.jpg differ
diff --git a/public/images/site/chicken-whole-2.jpg b/public/images/site/chicken-whole-2.jpg
new file mode 100644
index 0000000..d7de864
Binary files /dev/null and b/public/images/site/chicken-whole-2.jpg differ
diff --git a/public/images/site/chicken-whole.jpg b/public/images/site/chicken-whole.jpg
new file mode 100644
index 0000000..abd5ecd
Binary files /dev/null and b/public/images/site/chicken-whole.jpg differ
diff --git a/public/images/site/chicken-wings.jpg b/public/images/site/chicken-wings.jpg
new file mode 100644
index 0000000..40c29ce
Binary files /dev/null and b/public/images/site/chicken-wings.jpg differ
diff --git a/public/images/site/fish-basa.jpg b/public/images/site/fish-basa.jpg
new file mode 100644
index 0000000..1fcbe16
Binary files /dev/null and b/public/images/site/fish-basa.jpg differ
diff --git a/public/images/site/fish-prawns.jpg b/public/images/site/fish-prawns.jpg
new file mode 100644
index 0000000..51a2496
Binary files /dev/null and b/public/images/site/fish-prawns.jpg differ
diff --git a/public/images/site/fish-rohu.jpg b/public/images/site/fish-rohu.jpg
new file mode 100644
index 0000000..b8f45e9
Binary files /dev/null and b/public/images/site/fish-rohu.jpg differ
diff --git a/public/images/site/fish-salmon-2.jpg b/public/images/site/fish-salmon-2.jpg
new file mode 100644
index 0000000..ed0aacf
Binary files /dev/null and b/public/images/site/fish-salmon-2.jpg differ
diff --git a/public/images/site/fish-salmon.jpg b/public/images/site/fish-salmon.jpg
new file mode 100644
index 0000000..f8197a5
Binary files /dev/null and b/public/images/site/fish-salmon.jpg differ
diff --git a/public/images/site/hero.jpg b/public/images/site/hero.jpg
new file mode 100644
index 0000000..77ee3ae
Binary files /dev/null and b/public/images/site/hero.jpg differ
diff --git a/public/images/site/lamb-chops.jpg b/public/images/site/lamb-chops.jpg
new file mode 100644
index 0000000..1635e44
Binary files /dev/null and b/public/images/site/lamb-chops.jpg differ
diff --git a/public/images/site/lamb-leg.jpg b/public/images/site/lamb-leg.jpg
new file mode 100644
index 0000000..322ac2d
Binary files /dev/null and b/public/images/site/lamb-leg.jpg differ
diff --git a/public/images/site/lamb-mince.jpg b/public/images/site/lamb-mince.jpg
new file mode 100644
index 0000000..5e4b8c2
Binary files /dev/null and b/public/images/site/lamb-mince.jpg differ
diff --git a/public/images/site/lamb-shoulder-2.jpg b/public/images/site/lamb-shoulder-2.jpg
new file mode 100644
index 0000000..322ac2d
Binary files /dev/null and b/public/images/site/lamb-shoulder-2.jpg differ
diff --git a/public/images/site/lamb-shoulder.jpg b/public/images/site/lamb-shoulder.jpg
new file mode 100644
index 0000000..dfcdb2d
Binary files /dev/null and b/public/images/site/lamb-shoulder.jpg differ
diff --git a/public/images/site/logo.jpeg b/public/images/site/logo.jpeg
new file mode 100644
index 0000000..96129e7
Binary files /dev/null and b/public/images/site/logo.jpeg differ
diff --git a/public/images/site/weekly-offers.jpg b/public/images/site/weekly-offers.jpg
new file mode 100644
index 0000000..77ee3ae
Binary files /dev/null and b/public/images/site/weekly-offers.jpg differ
diff --git a/scripts/populate-site-images.sh b/scripts/populate-site-images.sh
new file mode 100755
index 0000000..c3f47cd
--- /dev/null
+++ b/scripts/populate-site-images.sh
@@ -0,0 +1,53 @@
+#!/bin/bash
+# Re-download default images into public/images/site/ (only image folder used by the site)
+set -euo pipefail
+
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+SITE="$ROOT/public/images/site"
+mkdir -p "$SITE"
+
+dl() {
+  curl -fsSL "$1" -o "$2"
+}
+
+# Keep existing logo if present; otherwise skip (add logo.jpeg manually)
+if [[ ! -f "$SITE/logo.jpeg" ]]; then
+  echo "Note: add logo.jpeg to $SITE manually if missing."
+fi
+
+dl "https://images.unsplash.com/photo-1607623814075-e51df1bdc82f?auto=format&fit=crop&w=2560&q=90" "$SITE/hero.jpg"
+dl "https://images.unsplash.com/photo-1529692236671-f1f6cf9683ba?auto=format&fit=crop&w=1920&q=90" "$SITE/about.jpg"
+cp "$SITE/hero.jpg" "$SITE/weekly-offers.jpg"
+
+dl "https://images.unsplash.com/photo-1587593810167-a84920ea0781?auto=format&fit=crop&w=1400&q=90" "$SITE/category-chicken.jpg"
+dl "https://images.unsplash.com/photo-1558030006-450675393462?auto=format&fit=crop&w=1400&q=90" "$SITE/category-beef.jpg"
+dl "https://images.unsplash.com/photo-1615937657715-bc7b4b7962c1?auto=format&fit=crop&w=1400&q=90" "$SITE/category-lamb.jpg"
+dl "https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=1400&q=90" "$SITE/category-fish.jpg"
+
+dl "https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?auto=format&fit=crop&w=1400&q=90" "$SITE/chicken-whole.jpg"
+dl "https://images.unsplash.com/photo-1587593810167-a84920ea0781?auto=format&fit=crop&w=1400&h=1000&crop=center&q=90" "$SITE/chicken-whole-2.jpg"
+dl "https://images.unsplash.com/photo-1587593810167-a84920ea0781?auto=format&fit=crop&w=1400&h=1000&crop=center&q=90" "$SITE/chicken-breast.jpg"
+cp "$SITE/chicken-whole.jpg" "$SITE/chicken-breast-2.jpg"
+dl "https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?auto=format&fit=crop&w=1400&h=1100&crop=entropy&q=90" "$SITE/chicken-thighs.jpg"
+dl "https://images.unsplash.com/photo-1587593810167-a84920ea0781?auto=format&fit=crop&w=1400&h=900&crop=top&q=90" "$SITE/chicken-wings.jpg"
+
+dl "https://images.unsplash.com/photo-1546833999-b9f581a1996d?auto=format&fit=crop&w=1400&q=90" "$SITE/beef-nihari.jpg"
+dl "https://images.unsplash.com/photo-1559847844-5315695dadae?auto=format&fit=crop&w=1400&q=90" "$SITE/beef-nihari-2.jpg"
+dl "https://images.unsplash.com/photo-1559847844-5315695dadae?auto=format&fit=crop&w=1400&q=90" "$SITE/beef-steak.jpg"
+dl "https://images.unsplash.com/photo-1546833999-b9f581a1996d?auto=format&fit=crop&w=1400&q=90" "$SITE/beef-steak-2.jpg"
+dl "https://images.unsplash.com/photo-1603048297172-c92544798d5a?auto=format&fit=crop&w=1400&q=90" "$SITE/beef-mince.jpg"
+dl "https://images.unsplash.com/photo-1558030006-450675393462?auto=format&fit=crop&w=1400&h=1000&crop=center&q=90" "$SITE/beef-boneless.jpg"
+
+dl "https://images.unsplash.com/photo-1615937657715-bc7b4b7962c1?auto=format&fit=crop&w=1400&q=90" "$SITE/lamb-shoulder.jpg"
+dl "https://images.unsplash.com/photo-1544025162-d76694265947?auto=format&fit=crop&w=1400&q=90" "$SITE/lamb-shoulder-2.jpg"
+dl "https://images.unsplash.com/photo-1544025162-d76694265947?auto=format&fit=crop&w=1400&q=90" "$SITE/lamb-leg.jpg"
+dl "https://images.unsplash.com/photo-1574672280600-4accfa5b6f98?auto=format&fit=crop&w=1400&q=90" "$SITE/lamb-chops.jpg"
+dl "https://images.unsplash.com/photo-1574672280600-4accfa5b6f98?auto=format&fit=crop&w=1400&h=1000&crop=center&q=90" "$SITE/lamb-mince.jpg"
+
+dl "https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=1400&q=90" "$SITE/fish-salmon.jpg"
+dl "https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1400&h=1100&crop=entropy&q=90" "$SITE/fish-salmon-2.jpg"
+dl "https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1400&h=1100&crop=entropy&q=90" "$SITE/fish-rohu.jpg"
+dl "https://images.unsplash.com/photo-1565680018434-b513d5e5fd47?auto=format&fit=crop&w=1400&q=90" "$SITE/fish-prawns.jpg"
+dl "https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=1400&h=900&crop=center&q=90" "$SITE/fish-basa.jpg"
+
+echo "Done. $(ls -1 "$SITE" | wc -l | tr -d ' ') files in $SITE"
\ No newline at end of file
diff --git a/scripts/update-fish-images.sh b/scripts/update-fish-images.sh
new file mode 100755
index 0000000..950616f
--- /dev/null
+++ b/scripts/update-fish-images.sh
@@ -0,0 +1,14 @@
+#!/bin/bash
+# Replace fish images (frozen seafood style)
+set -euo pipefail
+SITE="$(cd "$(dirname "$0")/.." && pwd)/public/images/site"
+dl() { curl -fsSL "$1" -o "$2"; }
+
+dl "https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&w=1400&q=90" "$SITE/category-fish.jpg"
+dl "https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&w=1400&h=1000&crop=center&q=90" "$SITE/fish-salmon.jpg"
+dl "https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=1400&q=90" "$SITE/fish-salmon-2.jpg"
+dl "https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1400&h=1100&crop=entropy&q=90" "$SITE/fish-rohu.jpg"
+dl "https://images.unsplash.com/photo-1565680018434-b513d5e5fd47?auto=format&fit=crop&w=1400&q=90" "$SITE/fish-prawns.jpg"
+dl "https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=1400&h=900&crop=center&q=90" "$SITE/fish-basa.jpg"
+
+echo "Fish images updated in $SITE"
\ No newline at end of file
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 0000000..28970f8
--- /dev/null
+++ b/src/app/about/page.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+import Link from 'next/link';
+import { ShieldCheck, Leaf, Award, Truck, Phone, Mail, MapPin } from 'lucide-react';
+import { useTranslation } from '@/hooks/useTranslation';
+import {
+  SITE_ADDRESS,
+  SITE_EMAIL,
+  SITE_PHONE_DISPLAY,
+  SITE_HOURS,
+} from '@/lib/constants';
+
+export default function AboutPage() {
+  const { t } = useTranslation();
+  const telHref = `tel:${SITE_PHONE_DISPLAY.replace(/\s/g, '')}`;
+
+  return (
+    <div>
+      <div className="bg-gradient-to-br from-brand-900 to-brand-950 px-4 py-20 text-white sm:px-6 lg:px-8">
+        <div className="mx-auto max-w-3xl text-center">
+          <h1 className="mb-4 font-display text-4xl font-bold">
+            {t('about.title', { name: t('site.name') })}
+          </h1>
+          <p className="text-lg text-brand-100">{t('about.subtitle')}</p>
+        </div>
+      </div>
+
+      <div className="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8">
+        <section className="mb-16">
+          <h2 className="section-heading mb-4">{t('about.ourStory')}</h2>
+          <p className="mb-4 leading-relaxed text-gray-600">
+            {t('about.storyP1', { name: t('site.name') })}
+          </p>
+          <p className="leading-relaxed text-gray-600">{t('about.storyP2')}</p>
+        </section>
+
+        <section id="halal" className="mb-16">
+          <div className="mb-6 flex items-center gap-3">
+            <ShieldCheck className="h-8 w-8 text-brand-700" />
+            <h2 className="section-heading">{t('about.halalTitle')}</h2>
+          </div>
+          <p className="leading-relaxed text-gray-600">
+            {t('about.halalDesc', { name: t('site.name') })}
+          </p>
+        </section>
+
+        <section className="mb-16">
+          <div className="grid gap-6 sm:grid-cols-3">
+            {[
+              { icon: Leaf, title: t('about.freshDaily'), desc: t('about.freshDailyDesc') },
+              {
+                icon: Award,
+                title: t('about.premiumQuality'),
+                desc: t('about.premiumQualityDesc'),
+              },
+              {
+                icon: Truck,
+                title: t('about.fastDelivery'),
+                desc: t('about.fastDeliveryDesc'),
+              },
+            ].map((item) => (
+              <div key={item.title} className="card-premium p-6 text-center">
+                <item.icon className="mx-auto mb-3 h-8 w-8 text-brand-700" />
+                <h3 className="mb-1 font-semibold text-brand-900">{item.title}</h3>
+                <p className="text-sm text-gray-500">{item.desc}</p>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section id="delivery" className="mb-16">
+          <h2 className="section-heading mb-4">{t('about.deliveryTitle')}</h2>
+          <div className="space-y-3 text-gray-600">
+            <p>{t('about.delivery1')}</p>
+            <p>{t('about.delivery2')}</p>
+            <p>{t('about.delivery3')}</p>
+            <p>{t('about.delivery4')}</p>
+          </div>
+        </section>
+
+        <section id="contact" className="card-premium mb-16 p-8">
+          <h2 className="section-heading mb-6">{t('about.contactTitle')}</h2>
+          <div className="space-y-4">
+            <div className="flex items-center gap-3 text-gray-600">
+              <Phone className="h-5 w-5 text-brand-700" />
+              <a href={telHref} className="hover:text-brand-800">
+                {SITE_PHONE_DISPLAY}
+              </a>
+            </div>
+            <div className="flex items-center gap-3 text-gray-600">
+              <Mail className="h-5 w-5 text-brand-700" />
+              <a href={`mailto:${SITE_EMAIL}`} className="hover:text-brand-800">
+                {SITE_EMAIL}
+              </a>
+            </div>
+            <div className="flex items-start gap-3 text-gray-600">
+              <MapPin className="mt-0.5 h-5 w-5 shrink-0 text-brand-700" />
+              <span>
+                {SITE_ADDRESS}
+                <br />
+                {t('footer.hours', { hours: SITE_HOURS })}
+              </span>
+            </div>
+          </div>
+          <div className="mt-6">
+            <Link
+              href="/shop"
+              className="text-sm font-semibold text-brand-700 hover:text-brand-900"
+            >
+              {t('cta.button')} →
+            </Link>
+          </div>
+        </section>
+
+        <section id="privacy" className="mb-16">
+          <h2 className="section-heading mb-4">{t('about.privacyTitle')}</h2>
+          <p className="leading-relaxed text-gray-600">{t('about.privacyText')}</p>
+        </section>
+
+        <section id="terms" className="mb-8">
+          <h2 className="section-heading mb-4">{t('about.termsTitle')}</h2>
+          <p className="leading-relaxed text-gray-600">{t('about.termsText')}</p>
+        </section>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
new file mode 100644
index 0000000..0b18a66
--- /dev/null
+++ b/src/app/account/page.tsx
@@ -0,0 +1,164 @@
+'use client';
+
+import { useEffect } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { User, Package, MapPin, Phone, Mail, LogOut, Heart } from 'lucide-react';
+import Button from '@/components/ui/Button';
+import { useAuth } from '@/presentation/hooks/useAuth';
+import { formatPrice, formatDate, getFormatLocale } from '@/lib/utils';
+import { useTranslation } from '@/hooks/useTranslation';
+import { localizeProduct } from '@/lib/product-i18n';
+
+export default function AccountPage() {
+  const router = useRouter();
+  const { user, isAuthenticated, orders, logout } = useAuth();
+  const { t, locale } = useTranslation();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      router.push('/login');
+    }
+  }, [isAuthenticated, router]);
+
+  if (!isAuthenticated || !user) {
+    return null;
+  }
+
+  const handleLogout = () => {
+    logout();
+    router.push('/');
+  };
+
+  const fmt = (n: number) => formatPrice(n, getFormatLocale(locale));
+
+  return (
+    <div className="bg-gray-50">
+      <div className="border-b border-gray-100 bg-white">
+        <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+          <h1 className="section-heading">{t('account.title')}</h1>
+          <p className="text-gray-500">{t('account.welcome', { name: user.name })}</p>
+        </div>
+      </div>
+
+      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
+        <div className="grid gap-8 lg:grid-cols-3">
+          <div className="space-y-6">
+            <div className="card-premium p-6">
+              <div className="mb-4 flex items-center gap-3">
+                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-brand-100">
+                  <User className="h-6 w-6 text-brand-700" />
+                </div>
+                <div>
+                  <h2 className="font-display text-lg font-semibold">{user.name}</h2>
+                  <p className="text-sm text-gray-500">
+                    {t('account.memberSince', { date: formatDate(user.createdAt) })}
+                  </p>
+                </div>
+              </div>
+
+              <div className="space-y-3 border-t border-gray-100 pt-4">
+                <div className="flex items-center gap-2 text-sm text-gray-600">
+                  <Mail className="h-4 w-4 text-brand-600" />
+                  {user.email}
+                </div>
+                <div className="flex items-center gap-2 text-sm text-gray-600">
+                  <Phone className="h-4 w-4 text-brand-600" />
+                  {user.phone}
+                </div>
+                <div className="flex items-start gap-2 text-sm text-gray-600">
+                  <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-brand-600" />
+                  {user.address.street}, {user.address.city}, {user.address.state}{' '}
+                  {user.address.zip}
+                </div>
+              </div>
+            </div>
+
+            <div className="card-premium p-4">
+              <Link
+                href="/wishlist"
+                className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-brand-50 hover:text-brand-700"
+              >
+                <Heart className="h-4 w-4" />
+                {t('account.myWishlist')}
+              </Link>
+              <button
+                onClick={handleLogout}
+                className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-red-500 transition-colors hover:bg-red-50"
+              >
+                <LogOut className="h-4 w-4" />
+                {t('account.signOut')}
+              </button>
+            </div>
+          </div>
+
+          <div className="lg:col-span-2" id="orders">
+            <div className="card-premium p-6">
+              <div className="mb-6 flex items-center gap-2">
+                <Package className="h-5 w-5 text-brand-700" />
+                <h2 className="font-display text-lg font-semibold">
+                  {t('account.orderHistory')}
+                </h2>
+              </div>
+
+              {orders.length === 0 ? (
+                <div className="py-12 text-center">
+                  <p className="mb-2 text-gray-500">{t('account.noOrders')}</p>
+                  <Link href="/shop">
+                    <Button variant="primary">{t('account.startShopping')}</Button>
+                  </Link>
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  {orders.map((order) => (
+                    <div
+                      key={order.id}
+                      className="rounded-xl border border-gray-100 p-4 transition-colors hover:border-brand-200"
+                    >
+                      <div className="mb-3 flex items-center justify-between">
+                        <div>
+                          <p className="text-sm font-semibold text-brand-900">{order.id}</p>
+                          <p className="text-xs text-gray-400">
+                            {formatDate(order.createdAt)}
+                          </p>
+                        </div>
+                        <div className="text-end">
+                          <p className="font-bold text-brand-800">{fmt(order.total)}</p>
+                          <span className="inline-block rounded-full bg-brand-50 px-2 py-0.5 text-xs font-medium capitalize text-brand-700">
+                            {t(`orderStatus.${order.status}`)}
+                          </span>
+                        </div>
+                      </div>
+                      <div className="space-y-1">
+                        {order.items.map((item) => {
+                          const localized = localizeProduct(item.product, t);
+                          return (
+                            <div
+                              key={item.id}
+                              className="flex justify-between text-sm text-gray-600"
+                            >
+                              <Link
+                                href={`/product/${item.product.slug}`}
+                                className="hover:text-brand-700"
+                              >
+                                {localized.name} × {item.quantity}
+                                <span className="ms-2 text-xs text-gold-600">
+                                  ({item.customizationLabel})
+                                </span>
+                              </Link>
+                              <span>{fmt(item.product.price * item.quantity)}</span>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
new file mode 100644
index 0000000..abb2169
--- /dev/null
+++ b/src/app/cart/page.tsx
@@ -0,0 +1,176 @@
+'use client';
+
+import AppImage from '@/components/ui/AppImage';
+import Link from 'next/link';
+import { Minus, Plus, Trash2, ShoppingBag, ArrowRight } from 'lucide-react';
+import Button from '@/components/ui/Button';
+import { useCart } from '@/presentation/hooks/useCart';
+import { formatPrice, getFormatLocale } from '@/lib/utils';
+import { useTranslation } from '@/hooks/useTranslation';
+import { localizeProduct } from '@/lib/product-i18n';
+
+export default function CartPage() {
+  const { items, updateQuantity, removeItem, summary } = useCart();
+  const { t, locale } = useTranslation();
+  const { subtotal: total, deliveryFee, grandTotal } = summary;
+  const fmt = (n: number) => formatPrice(n, getFormatLocale(locale));
+
+  if (items.length === 0) {
+    return (
+      <div className="mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8">
+        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-brand-50">
+          <ShoppingBag className="h-10 w-10 text-brand-300" />
+        </div>
+        <h1 className="mb-2 font-display text-2xl font-bold text-brand-900">
+          {t('cart.empty')}
+        </h1>
+        <p className="mb-8 text-gray-500">{t('cart.emptyHint')}</p>
+        <Link href="/shop">
+          <Button variant="primary" size="lg">
+            {t('cart.startShopping')}
+          </Button>
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-gray-50">
+      <div className="border-b border-gray-100 bg-white">
+        <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+          <h1 className="section-heading">{t('cart.title')}</h1>
+          <p className="text-gray-500">
+            {t('cart.itemsCount', { count: items.length })}
+          </p>
+        </div>
+      </div>
+
+      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
+        <div className="grid gap-8 lg:grid-cols-3">
+          <div className="space-y-4 lg:col-span-2">
+            {items.map((item) => {
+              const localized = localizeProduct(item.product, t);
+              return (
+                <div key={item.id} className="card-premium flex gap-4 p-4 sm:p-6">
+                  <div className="relative h-24 w-24 shrink-0 overflow-hidden rounded-xl sm:h-28 sm:w-28">
+                    <AppImage
+                      src={item.product.image}
+                      alt={localized.name}
+                      fill
+                      className="object-cover"
+                      sizes="(max-width: 640px) 96px, 112px"
+                    />
+                  </div>
+
+                  <div className="flex flex-1 flex-col">
+                    <div className="flex items-start justify-between">
+                      <div>
+                        <Link
+                          href={`/product/${item.product.slug}`}
+                          className="font-display text-lg font-semibold text-brand-900 hover:text-brand-700"
+                        >
+                          {localized.name}
+                        </Link>
+                        <p className="mt-1 text-xs uppercase tracking-wider text-brand-600">
+                          {t(`categories.${item.product.category}.name`)}
+                        </p>
+                      </div>
+                      <button
+                        onClick={() => removeItem(item.id)}
+                        className="rounded-lg p-2 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500"
+                        aria-label={t('cart.removeItem')}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </button>
+                    </div>
+
+                    <div className="mt-2 inline-flex items-center gap-1.5 rounded-full bg-gold-50 px-3 py-1">
+                      <span className="text-xs font-medium text-gold-700">
+                        {t('cart.customization')}
+                      </span>
+                      <span className="text-xs font-semibold text-gold-800">
+                        {item.customizationLabel}
+                      </span>
+                    </div>
+
+                    <div className="mt-auto flex items-center justify-between pt-3">
+                      <div className="flex items-center rounded-lg border border-gray-200">
+                        <button
+                          onClick={() => updateQuantity(item.id, item.quantity - 1)}
+                          className="flex h-9 w-9 items-center justify-center text-gray-500 hover:text-brand-700"
+                          aria-label={t('product.decreaseQty')}
+                        >
+                          <Minus className="h-3 w-3" />
+                        </button>
+                        <span className="w-8 text-center text-sm font-semibold">
+                          {item.quantity}
+                        </span>
+                        <button
+                          onClick={() => updateQuantity(item.id, item.quantity + 1)}
+                          className="flex h-9 w-9 items-center justify-center text-gray-500 hover:text-brand-700"
+                          aria-label={t('product.increaseQty')}
+                        >
+                          <Plus className="h-3 w-3" />
+                        </button>
+                      </div>
+                      <span className="text-lg font-bold text-brand-800">
+                        {fmt(item.product.price * item.quantity)}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <div>
+            <div className="card-premium sticky top-24 p-6">
+              <h2 className="mb-4 font-display text-lg font-semibold text-brand-900">
+                {t('cart.orderSummary')}
+              </h2>
+
+              <div className="space-y-3 border-b border-gray-100 pb-4">
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-500">{t('cart.subtotal')}</span>
+                  <span className="font-medium">{fmt(total)}</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-500">{t('cart.delivery')}</span>
+                  <span className="font-medium">
+                    {deliveryFee === 0 ? (
+                      <span className="text-brand-700">{t('cart.free')}</span>
+                    ) : (
+                      fmt(deliveryFee)
+                    )}
+                  </span>
+                </div>
+                {deliveryFee > 0 && (
+                  <p className="text-xs text-gray-400">{t('cart.freeDeliveryHint')}</p>
+                )}
+              </div>
+
+              <div className="flex justify-between py-4">
+                <span className="font-semibold text-brand-900">{t('cart.total')}</span>
+                <span className="text-xl font-bold text-brand-800">{fmt(grandTotal)}</span>
+              </div>
+
+              <Link href="/checkout">
+                <Button variant="gold" size="lg" className="w-full">
+                  {t('cart.proceedCheckout')}
+                  <ArrowRight className="h-4 w-4 rtl:rotate-180" />
+                </Button>
+              </Link>
+
+              <Link
+                href="/shop"
+                className="mt-3 block text-center text-sm font-medium text-brand-600 hover:text-brand-800"
+              >
+                {t('cart.continueShopping')}
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
new file mode 100644
index 0000000..5142fae
--- /dev/null
+++ b/src/app/checkout/page.tsx
@@ -0,0 +1,352 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import AppImage from '@/components/ui/AppImage';
+import Link from 'next/link';
+import { Lock, CreditCard, Truck, CheckCircle, ChevronLeft } from 'lucide-react';
+import Button from '@/components/ui/Button';
+import { useCart } from '@/presentation/hooks/useCart';
+import { useAuth } from '@/presentation/hooks/useAuth';
+import { useCheckout } from '@/presentation/hooks/useCheckout';
+import { formatPrice, getFormatLocale } from '@/lib/utils';
+import { useTranslation } from '@/hooks/useTranslation';
+import { localizeProduct } from '@/lib/product-i18n';
+
+
+export default function CheckoutPage() {
+  const router = useRouter();
+  const { items, summary } = useCart();
+  const { user, isAuthenticated } = useAuth();
+  const { placeOrder } = useCheckout();
+  const { t, locale } = useTranslation();
+
+  const [paymentMethod, setPaymentMethod] = useState('card');
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [orderComplete, setOrderComplete] = useState(false);
+  const [orderId, setOrderId] = useState('');
+
+  const [form, setForm] = useState({
+    name: user?.name || '',
+    email: user?.email || '',
+    phone: user?.phone || '',
+    street: user?.address.street || '',
+    city: user?.address.city || '',
+    state: user?.address.state || '',
+    zip: user?.address.zip || '',
+    cardNumber: '',
+    expiry: '',
+    cvv: '',
+  });
+
+  const { subtotal: total, deliveryFee, grandTotal } = summary;
+  const fmt = (n: number) => formatPrice(n, getFormatLocale(locale));
+
+  if (items.length === 0 && !orderComplete) {
+    return (
+      <div className="mx-auto max-w-7xl px-4 py-20 text-center">
+        <h1 className="mb-4 font-display text-2xl font-bold">{t('checkout.noItems')}</h1>
+        <Link href="/shop">
+          <Button>{t('checkout.goToShop')}</Button>
+        </Link>
+      </div>
+    );
+  }
+
+  if (orderComplete) {
+    return (
+      <div className="mx-auto max-w-lg px-4 py-20 text-center">
+        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-brand-50">
+          <CheckCircle className="h-12 w-12 text-brand-700" />
+        </div>
+        <h1 className="mb-2 font-display text-3xl font-bold text-brand-900">
+          {t('checkout.orderConfirmed')}
+        </h1>
+        <p className="mb-2 text-gray-500">{t('checkout.thankYou')}</p>
+        <p className="mb-8 text-sm font-medium text-brand-700">
+          {t('checkout.orderId', { id: orderId })}
+        </p>
+        <div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
+          <Link href="/account">
+            <Button variant="primary">{t('checkout.viewOrders')}</Button>
+          </Link>
+          <Link href="/shop">
+            <Button variant="secondary">{t('cart.continueShopping')}</Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsProcessing(true);
+
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+
+    const { order } = placeOrder({
+      deliveryAddress: {
+        street: form.street,
+        city: form.city,
+        state: form.state,
+        zip: form.zip,
+      },
+      paymentMethod,
+    });
+
+    setOrderId(order.id);
+    setOrderComplete(true);
+    setIsProcessing(false);
+  };
+
+  const updateField = (field: string, value: string) => {
+    setForm((prev) => ({ ...prev, [field]: value }));
+  };
+
+  return (
+    <div className="bg-gray-50">
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <Link
+          href="/cart"
+          className="mb-6 inline-flex items-center gap-1 text-sm font-medium text-gray-500 hover:text-brand-700"
+        >
+          <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
+          {t('checkout.backToCart')}
+        </Link>
+
+        <h1 className="section-heading mb-8">{t('checkout.title')}</h1>
+
+        <form onSubmit={handleSubmit}>
+          <div className="grid gap-8 lg:grid-cols-3">
+            <div className="space-y-6 lg:col-span-2">
+              {!isAuthenticated && (
+                <div className="card-premium p-6">
+                  <p className="text-sm text-gray-600">
+                    {t('checkout.haveAccount')}{' '}
+                    <Link href="/login" className="font-semibold text-brand-700 hover:underline">
+                      {t('checkout.signIn')}
+                    </Link>{' '}
+                    {t('checkout.fasterCheckout')}
+                  </p>
+                </div>
+              )}
+
+              <div className="card-premium p-6">
+                <div className="mb-4 flex items-center gap-2">
+                  <Truck className="h-5 w-5 text-brand-700" />
+                  <h2 className="font-display text-lg font-semibold">
+                    {t('checkout.deliveryDetails')}
+                  </h2>
+                </div>
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <div className="sm:col-span-2">
+                    <label className="label-text">{t('checkout.fullName')}</label>
+                    <input
+                      required
+                      className="input-field"
+                      value={form.name}
+                      onChange={(e) => updateField('name', e.target.value)}
+                    />
+                  </div>
+                  <div>
+                    <label className="label-text">{t('checkout.email')}</label>
+                    <input
+                      required
+                      type="email"
+                      className="input-field"
+                      value={form.email}
+                      onChange={(e) => updateField('email', e.target.value)}
+                    />
+                  </div>
+                  <div>
+                    <label className="label-text">{t('checkout.phone')}</label>
+                    <input
+                      required
+                      type="tel"
+                      className="input-field"
+                      value={form.phone}
+                      onChange={(e) => updateField('phone', e.target.value)}
+                    />
+                  </div>
+                  <div className="sm:col-span-2">
+                    <label className="label-text">{t('checkout.street')}</label>
+                    <input
+                      required
+                      className="input-field"
+                      value={form.street}
+                      onChange={(e) => updateField('street', e.target.value)}
+                    />
+                  </div>
+                  <div>
+                    <label className="label-text">{t('checkout.city')}</label>
+                    <input
+                      required
+                      className="input-field"
+                      value={form.city}
+                      onChange={(e) => updateField('city', e.target.value)}
+                    />
+                  </div>
+                  <div>
+                    <label className="label-text">{t('checkout.state')}</label>
+                    <input
+                      required
+                      className="input-field"
+                      value={form.state}
+                      onChange={(e) => updateField('state', e.target.value)}
+                    />
+                  </div>
+                  <div>
+                    <label className="label-text">{t('checkout.zip')}</label>
+                    <input
+                      required
+                      className="input-field"
+                      value={form.zip}
+                      onChange={(e) => updateField('zip', e.target.value)}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className="card-premium p-6">
+                <div className="mb-4 flex items-center gap-2">
+                  <CreditCard className="h-5 w-5 text-brand-700" />
+                  <h2 className="font-display text-lg font-semibold">{t('checkout.payment')}</h2>
+                </div>
+
+                <div className="mb-4 flex gap-3">
+                  {['card', 'cod'].map((method) => (
+                    <button
+                      key={method}
+                      type="button"
+                      onClick={() => setPaymentMethod(method)}
+                      className={`rounded-lg border-2 px-4 py-2 text-sm font-medium transition-all ${
+                        paymentMethod === method
+                          ? 'border-brand-700 bg-brand-700 text-white'
+                          : 'border-gray-200 text-gray-600 hover:border-brand-300'
+                      }`}
+                    >
+                      {method === 'card'
+                        ? t('checkout.creditCard')
+                        : t('checkout.cashOnDelivery')}
+                    </button>
+                  ))}
+                </div>
+
+                {paymentMethod === 'card' && (
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    <div className="sm:col-span-2">
+                      <label className="label-text">{t('checkout.cardNumber')}</label>
+                      <input
+                        required
+                        className="input-field"
+                        placeholder="1234 5678 9012 3456"
+                        value={form.cardNumber}
+                        onChange={(e) => updateField('cardNumber', e.target.value)}
+                      />
+                    </div>
+                    <div>
+                      <label className="label-text">{t('checkout.expiry')}</label>
+                      <input
+                        required
+                        className="input-field"
+                        placeholder="MM/YY"
+                        value={form.expiry}
+                        onChange={(e) => updateField('expiry', e.target.value)}
+                      />
+                    </div>
+                    <div>
+                      <label className="label-text">{t('checkout.cvv')}</label>
+                      <input
+                        required
+                        className="input-field"
+                        placeholder="123"
+                        value={form.cvv}
+                        onChange={(e) => updateField('cvv', e.target.value)}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div>
+              <div className="card-premium sticky top-24 p-6">
+                <h2 className="mb-4 font-display text-lg font-semibold">
+                  {t('cart.orderSummary')}
+                </h2>
+
+                <div className="mb-4 max-h-60 space-y-3 overflow-y-auto">
+                  {items.map((item) => {
+                    const localized = localizeProduct(item.product, t);
+                    return (
+                      <div key={item.id} className="flex gap-3">
+                        <div className="relative h-12 w-12 shrink-0 overflow-hidden rounded-lg">
+                          <AppImage
+                            src={item.product.image}
+                            alt={localized.name}
+                            fill
+                            className="object-cover"
+                            sizes="48px"
+                          />
+                        </div>
+                        <div className="flex-1">
+                          <p className="text-sm font-medium text-brand-900">
+                            {localized.name}
+                          </p>
+                          <p className="text-xs text-gold-700">
+                            {item.customizationLabel}
+                          </p>
+                          <p className="text-xs text-gray-400">
+                            {t('checkout.qty', { count: item.quantity })}
+                          </p>
+                        </div>
+                        <span className="text-sm font-medium">
+                          {fmt(item.product.price * item.quantity)}
+                        </span>
+                      </div>
+                    );
+                  })}
+                </div>
+
+                <div className="space-y-2 border-t border-gray-100 pt-4">
+                  <div className="flex justify-between text-sm">
+                    <span className="text-gray-500">{t('cart.subtotal')}</span>
+                    <span>{fmt(total)}</span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-gray-500">{t('cart.delivery')}</span>
+                    <span>
+                      {deliveryFee === 0 ? t('cart.free') : fmt(deliveryFee)}
+                    </span>
+                  </div>
+                  <div className="flex justify-between pt-2 text-lg font-bold">
+                    <span>{t('cart.total')}</span>
+                    <span className="text-brand-800">{fmt(grandTotal)}</span>
+                  </div>
+                </div>
+
+                <Button
+                  type="submit"
+                  variant="gold"
+                  size="lg"
+                  className="mt-6 w-full"
+                  disabled={isProcessing}
+                >
+                  <Lock className="h-4 w-4" />
+                  {isProcessing
+                    ? t('checkout.processing')
+                    : t('checkout.pay', { amount: fmt(grandTotal) })}
+                </Button>
+
+                <p className="mt-3 flex items-center justify-center gap-1 text-xs text-gray-400">
+                  <Lock className="h-3 w-3" />
+                  {t('checkout.secure')}
+                </p>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 0000000..261975f
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,66 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply bg-cream-50 text-gray-900 antialiased;
+  }
+
+  [lang='ur'] body {
+    font-family: var(--font-urdu), var(--font-arabic), var(--font-inter), system-ui,
+      sans-serif;
+  }
+
+  [lang='ar'] body,
+  [lang='fa'] body {
+    font-family: var(--font-arabic), var(--font-inter), system-ui, sans-serif;
+  }
+
+  [lang='ur'] .font-display {
+    font-family: var(--font-urdu), var(--font-playfair), Georgia, serif;
+  }
+
+  [lang='ar'] .font-display,
+  [lang='fa'] .font-display {
+    font-family: var(--font-arabic), var(--font-playfair), Georgia, serif;
+  }
+}
+
+@layer components {
+  .btn-primary {
+    @apply inline-flex items-center justify-center gap-2 rounded-lg bg-brand-700 px-6 py-3 text-sm font-semibold text-white shadow-premium transition-all duration-200 hover:bg-brand-800 hover:shadow-premium-lg active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center justify-center gap-2 rounded-lg border-2 border-brand-700 bg-white px-6 py-3 text-sm font-semibold text-brand-700 transition-all duration-200 hover:bg-brand-50 active:scale-[0.98];
+  }
+
+  .btn-gold {
+    @apply inline-flex items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-gold-500 to-gold-600 px-6 py-3 text-sm font-semibold text-white shadow-gold transition-all duration-200 hover:from-gold-600 hover:to-gold-700 active:scale-[0.98];
+  }
+
+  .card-premium {
+    @apply rounded-2xl border border-cream-300/60 bg-white shadow-premium transition-all duration-300 hover:border-brand-200 hover:shadow-premium-lg;
+  }
+
+  .input-field {
+    @apply w-full rounded-lg border border-cream-300 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-400 transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20;
+  }
+
+  .label-text {
+    @apply mb-1.5 block text-sm font-medium text-gray-700;
+  }
+
+  .section-heading {
+    @apply font-display text-3xl font-bold tracking-tight text-brand-900 md:text-4xl;
+  }
+
+  .gold-accent {
+    @apply bg-gradient-to-r from-gold-400 to-gold-500 bg-clip-text text-transparent;
+  }
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..34e63b2
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,100 @@
+import type { Metadata } from 'next';
+import {
+  Inter,
+  Playfair_Display,
+  Noto_Nastaliq_Urdu,
+  Noto_Sans_Arabic,
+} from 'next/font/google';
+import LanguageBanner from '@/components/layout/LanguageBanner';
+import Header from '@/components/layout/Header';
+import Footer from '@/components/layout/Footer';
+import LocaleAttributes from '@/components/layout/LocaleAttributes';
+import { SITE_NAME } from '@/lib/constants';
+import './globals.css';
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  display: 'swap',
+});
+
+const playfair = Playfair_Display({
+  subsets: ['latin'],
+  variable: '--font-playfair',
+  display: 'swap',
+});
+
+const notoUrdu = Noto_Nastaliq_Urdu({
+  subsets: ['arabic'],
+  variable: '--font-urdu',
+  weight: ['400', '500', '600', '700'],
+  display: 'swap',
+});
+
+const notoArabic = Noto_Sans_Arabic({
+  subsets: ['arabic'],
+  variable: '--font-arabic',
+  weight: ['400', '500', '600', '700'],
+  display: 'swap',
+});
+
+const siteDescription =
+  'Premium 100% Halal meat delivery. Fresh chicken, beef, and lamb; frozen fish and seafood only — customized to your preference and delivered to your door.';
+
+export const viewport = {
+  themeColor: '#8B1F1F',
+};
+
+export const metadata: Metadata = {
+  title: {
+    default: `${SITE_NAME} — Premium Halal Meat Delivery`,
+    template: `%s | ${SITE_NAME}`,
+  },
+  description: siteDescription,
+  keywords: [
+    'halal meat',
+    'halal chicken',
+    'halal beef',
+    'halal lamb',
+    'meat delivery',
+    'fresh meat',
+    'Kött Gård',
+    'kottgard',
+  ],
+  openGraph: {
+    title: `${SITE_NAME} — Premium Halal Meat Delivery`,
+    description: siteDescription,
+    type: 'website',
+    locale: 'sv_SE',
+    siteName: SITE_NAME,
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html
+      lang="sv"
+      dir="ltr"
+      className={`${inter.variable} ${playfair.variable} ${notoUrdu.variable} ${notoArabic.variable}`}
+      suppressHydrationWarning
+    >
+      <body className="flex min-h-screen flex-col font-sans">
+        <LocaleAttributes />
+        <div className="sticky top-0 z-50">
+          <LanguageBanner />
+          <Header />
+        </div>
+        <main className="flex-1">{children}</main>
+        <Footer />
+      </body>
+    </html>
+  );
+}
\ No newline at end of file
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..2094ac9
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,196 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import Button from '@/components/ui/Button';
+import { useAuth } from '@/presentation/hooks/useAuth';
+import { useTranslation } from '@/hooks/useTranslation';
+import { DEMO_EMAIL } from '@/lib/constants';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const { login, register } = useAuth();
+  const { t } = useTranslation();
+  const [isRegister, setIsRegister] = useState(false);
+  const [error, setError] = useState('');
+  const [form, setForm] = useState({
+    name: '',
+    email: '',
+    password: '',
+    phone: '',
+    street: '',
+    city: '',
+    state: '',
+    zip: '',
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (isRegister) {
+      const success = register({
+        name: form.name,
+        email: form.email,
+        password: form.password,
+        phone: form.phone,
+        address: {
+          street: form.street,
+          city: form.city,
+          state: form.state,
+          zip: form.zip,
+        },
+      });
+      if (success) router.push('/account');
+    } else {
+      const success = login(form.email, form.password);
+      if (success) {
+        router.push('/account');
+      } else {
+        setError(t('auth.invalidCredentials', { email: DEMO_EMAIL }));
+      }
+    }
+  };
+
+  return (
+    <div className="flex min-h-[70vh] items-center justify-center bg-gray-50 px-4 py-12">
+      <div className="w-full max-w-md">
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand-700">
+            <span className="font-display text-xl font-bold text-gold-400">
+              {t('site.initials')}
+            </span>
+          </div>
+          <h1 className="font-display text-2xl font-bold text-brand-900">
+            {isRegister ? t('auth.createAccount') : t('auth.welcomeBack')}
+          </h1>
+          <p className="mt-1 text-sm text-gray-500">
+            {isRegister
+              ? t('auth.joinTagline', { name: t('site.name') })
+              : t('auth.signInTagline', { name: t('site.name') })}
+          </p>
+        </div>
+
+        <div className="card-premium p-8">
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {isRegister && (
+              <div>
+                <label className="label-text">{t('auth.fullName')}</label>
+                <input
+                  required
+                  className="input-field"
+                  value={form.name}
+                  onChange={(e) => setForm({ ...form, name: e.target.value })}
+                />
+              </div>
+            )}
+
+            <div>
+              <label className="label-text">{t('auth.email')}</label>
+              <input
+                required
+                type="email"
+                className="input-field"
+                value={form.email}
+                onChange={(e) => setForm({ ...form, email: e.target.value })}
+              />
+            </div>
+
+            <div>
+              <label className="label-text">{t('auth.password')}</label>
+              <input
+                required
+                type="password"
+                className="input-field"
+                value={form.password}
+                onChange={(e) => setForm({ ...form, password: e.target.value })}
+              />
+            </div>
+
+            {isRegister && (
+              <>
+                <div>
+                  <label className="label-text">{t('auth.phone')}</label>
+                  <input
+                    required
+                    type="tel"
+                    className="input-field"
+                    value={form.phone}
+                    onChange={(e) => setForm({ ...form, phone: e.target.value })}
+                  />
+                </div>
+                <div>
+                  <label className="label-text">{t('auth.street')}</label>
+                  <input
+                    required
+                    className="input-field"
+                    value={form.street}
+                    onChange={(e) => setForm({ ...form, street: e.target.value })}
+                  />
+                </div>
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <label className="label-text">{t('auth.city')}</label>
+                    <input
+                      required
+                      className="input-field"
+                      value={form.city}
+                      onChange={(e) => setForm({ ...form, city: e.target.value })}
+                    />
+                  </div>
+                  <div>
+                    <label className="label-text">{t('auth.state')}</label>
+                    <input
+                      required
+                      className="input-field"
+                      value={form.state}
+                      onChange={(e) => setForm({ ...form, state: e.target.value })}
+                    />
+                  </div>
+                </div>
+                <div>
+                  <label className="label-text">{t('auth.zip')}</label>
+                  <input
+                    required
+                    className="input-field"
+                    value={form.zip}
+                    onChange={(e) => setForm({ ...form, zip: e.target.value })}
+                  />
+                </div>
+              </>
+            )}
+
+            {error && (
+              <p className="rounded-lg bg-red-50 px-4 py-2 text-sm text-red-600">{error}</p>
+            )}
+
+            <Button type="submit" variant="primary" size="lg" className="w-full">
+              {isRegister ? t('auth.register') : t('auth.signIn')}
+            </Button>
+          </form>
+
+          <div className="mt-6 text-center">
+            <button
+              onClick={() => {
+                setIsRegister(!isRegister);
+                setError('');
+              }}
+              className="text-sm font-medium text-brand-600 hover:text-brand-800"
+            >
+              {isRegister ? t('auth.hasAccount') : t('auth.noAccount')}
+            </button>
+          </div>
+
+          {!isRegister && (
+            <div className="mt-4 rounded-lg bg-brand-50 px-4 py-3 text-center">
+              <p className="text-xs text-brand-700">
+                {t('auth.demo', { email: DEMO_EMAIL })}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..fb47ec4
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import Link from 'next/link';
+import Button from '@/components/ui/Button';
+import { useTranslation } from '@/hooks/useTranslation';
+
+export default function NotFound() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center px-4 text-center">
+      <h1 className="mb-2 font-display text-6xl font-bold text-brand-900">
+        {t('notFound.title')}
+      </h1>
+      <p className="mb-6 text-lg text-gray-500">{t('notFound.message')}</p>
+      <Link href="/">
+        <Button>{t('notFound.goHome')}</Button>
+      </Link>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..87b82e3
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,27 @@
+import Hero from '@/components/home/Hero';
+import TrustBadges from '@/components/home/TrustBadges';
+import AboutPreview from '@/components/home/AboutPreview';
+import CategoryGrid from '@/components/home/CategoryGrid';
+import FeaturedProducts from '@/components/home/FeaturedProducts';
+import HowItWorks from '@/components/home/HowItWorks';
+import WeeklyOffers from '@/components/home/WeeklyOffers';
+import SocialFollow from '@/components/home/SocialFollow';
+import ContactPreview from '@/components/home/ContactPreview';
+import CTA from '@/components/home/CTA';
+
+export default function HomePage() {
+  return (
+    <>
+      <Hero />
+      <TrustBadges />
+      <AboutPreview />
+      <CategoryGrid />
+      <FeaturedProducts />
+      <HowItWorks />
+      <WeeklyOffers />
+      <CTA />
+      <SocialFollow />
+      <ContactPreview />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/app/product/[slug]/page.tsx b/src/app/product/[slug]/page.tsx
new file mode 100644
index 0000000..41b2ab2
--- /dev/null
+++ b/src/app/product/[slug]/page.tsx
@@ -0,0 +1,224 @@
+'use client';
+
+import { useState } from 'react';
+import AppImage from '@/components/ui/AppImage';
+import Link from 'next/link';
+import { notFound, useParams } from 'next/navigation';
+import {
+  ShoppingCart,
+  Heart,
+  ChevronLeft,
+  Minus,
+  Plus,
+  Check,
+  ShieldCheck,
+} from 'lucide-react';
+import CustomizationSelector from '@/components/product/CustomizationSelector';
+import Button from '@/components/ui/Button';
+import { getProductBySlug } from '@/lib/products';
+import { getDefaultCustomization, getCustomizationLabel } from '@/lib/customization';
+import { localizeProduct } from '@/lib/product-i18n';
+import { formatPrice, getFormatLocale } from '@/lib/utils';
+import { useCart } from '@/presentation/hooks/useCart';
+import { useWishlist } from '@/presentation/hooks/useWishlist';
+import { useTranslation } from '@/hooks/useTranslation';
+import { ProductCustomization } from '@/types';
+
+export default function ProductPage() {
+  const params = useParams();
+  const slug = params.slug as string;
+  const rawProduct = getProductBySlug(slug);
+  const { t, locale } = useTranslation();
+
+  const [customization, setCustomization] = useState<ProductCustomization>(
+    rawProduct ? getDefaultCustomization(rawProduct.category) : { type: 'fish' }
+  );
+  const [quantity, setQuantity] = useState(1);
+  const [selectedImage, setSelectedImage] = useState(0);
+  const [added, setAdded] = useState(false);
+
+  const { addItem } = useCart();
+  const { isInWishlist, toggleItem } = useWishlist();
+
+  if (!rawProduct) {
+    notFound();
+  }
+
+  const product = localizeProduct(rawProduct, t);
+  const inWishlist = isInWishlist(product.id);
+
+  const handleAddToCart = () => {
+    const label = getCustomizationLabel(customization, t);
+    addItem(rawProduct, customization, label, quantity);
+    setAdded(true);
+    setTimeout(() => setAdded(false), 2000);
+  };
+
+  return (
+    <div className="bg-white">
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <Link
+          href="/shop"
+          className="mb-6 inline-flex items-center gap-1 text-sm font-medium text-gray-500 transition-colors hover:text-brand-700"
+        >
+          <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
+          {t('product.backToShop')}
+        </Link>
+
+        <div className="grid gap-10 lg:grid-cols-2">
+          <div>
+            <div className="relative mb-4 aspect-square overflow-hidden rounded-2xl bg-gray-50">
+              <AppImage
+                src={product.images[selectedImage] || product.image}
+                alt={product.name}
+                fill
+                className="object-cover"
+                priority
+                sizes="(max-width: 1024px) 100vw, 640px"
+              />
+              {product.badge && (
+                <span className="absolute start-4 top-4 rounded-full bg-gold-500 px-4 py-1.5 text-sm font-semibold text-white shadow-gold">
+                  {product.badge}
+                </span>
+              )}
+            </div>
+            {product.images.length > 1 && (
+              <div className="flex gap-3">
+                {product.images.map((img, i) => (
+                  <button
+                    key={img}
+                    onClick={() => setSelectedImage(i)}
+                    className={`relative h-20 w-20 overflow-hidden rounded-lg border-2 transition-all ${
+                      selectedImage === i
+                        ? 'border-brand-700'
+                        : 'border-transparent opacity-60 hover:opacity-100'
+                    }`}
+                  >
+                    <AppImage src={img} alt="" fill className="object-cover" sizes="80px" />
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div>
+            <div className="mb-2 flex items-center gap-2">
+              <Link
+                href={`/shop?category=${product.category}`}
+                className="rounded-full bg-brand-50 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-brand-700 transition-colors hover:bg-brand-100"
+              >
+                {t(`categories.${product.category}.name`)}
+              </Link>
+              {product.inStock ? (
+                <span className="flex items-center gap-1 text-xs font-medium text-brand-700">
+                  <Check className="h-3 w-3" /> {t('product.inStock')}
+                </span>
+              ) : (
+                <span className="text-xs font-medium text-red-500">
+                  {t('product.outOfStock')}
+                </span>
+              )}
+            </div>
+
+            <h1 className="mb-2 font-display text-3xl font-bold text-brand-900 lg:text-4xl">
+              {product.name}
+            </h1>
+
+            <p className="mb-4 text-gray-500">{product.description}</p>
+
+            <div className="mb-6 flex items-baseline gap-2">
+              <span className="text-3xl font-bold text-brand-800">
+                {formatPrice(product.price, getFormatLocale(locale))}
+              </span>
+              <span className="text-sm text-gray-400">{product.priceUnit}</span>
+              {product.weight && (
+                <span className="text-sm text-gray-400">· {product.weight}</span>
+              )}
+            </div>
+
+            <div className="mb-6 flex items-center gap-2 rounded-lg border border-brand-100 bg-brand-50/50 px-4 py-3">
+              <ShieldCheck className="h-5 w-5 shrink-0 text-brand-700" />
+              <span className="text-sm text-brand-800">{t('product.halalTrust')}</span>
+            </div>
+
+            <div className="mb-6 rounded-2xl border border-gray-100 bg-gray-50 p-6">
+              <CustomizationSelector
+                category={product.category}
+                customization={customization}
+                onChange={setCustomization}
+              />
+              <div className="mt-4 rounded-lg bg-white px-4 py-3">
+                <p className="text-xs text-gray-500">{t('product.yourSelection')}</p>
+                <p className="text-sm font-semibold text-brand-800">
+                  {getCustomizationLabel(customization, t)}
+                </p>
+              </div>
+            </div>
+
+            <div className="mb-6 flex items-center gap-4">
+              <div className="flex items-center rounded-lg border border-gray-200">
+                <button
+                  onClick={() => setQuantity(Math.max(1, quantity - 1))}
+                  className="flex h-12 w-12 items-center justify-center text-gray-500 transition-colors hover:text-brand-700"
+                  aria-label={t('product.decreaseQty')}
+                >
+                  <Minus className="h-4 w-4" />
+                </button>
+                <span className="w-12 text-center font-semibold">{quantity}</span>
+                <button
+                  onClick={() => setQuantity(quantity + 1)}
+                  className="flex h-12 w-12 items-center justify-center text-gray-500 transition-colors hover:text-brand-700"
+                  aria-label={t('product.increaseQty')}
+                >
+                  <Plus className="h-4 w-4" />
+                </button>
+              </div>
+
+              <Button
+                onClick={handleAddToCart}
+                disabled={!product.inStock}
+                className="flex-1"
+                size="lg"
+              >
+                {added ? (
+                  <>
+                    <Check className="h-4 w-4" />
+                    {t('product.addedToCart')}
+                  </>
+                ) : (
+                  <>
+                    <ShoppingCart className="h-4 w-4" />
+                    {t('product.addToCart')}
+                  </>
+                )}
+              </Button>
+
+              <button
+                onClick={() => toggleItem(rawProduct)}
+                className={`flex h-12 w-12 items-center justify-center rounded-lg border-2 transition-all ${
+                  inWishlist
+                    ? 'border-red-200 bg-red-50 text-red-500'
+                    : 'border-gray-200 text-gray-400 hover:border-brand-300 hover:text-brand-700'
+                }`}
+                aria-label={
+                  inWishlist ? t('product.removeWishlist') : t('product.addWishlist')
+                }
+              >
+                <Heart className={`h-5 w-5 ${inWishlist ? 'fill-current' : ''}`} />
+              </button>
+            </div>
+
+            <div className="border-t border-gray-100 pt-6">
+              <h2 className="mb-3 font-display text-lg font-semibold text-brand-900">
+                {t('product.aboutProduct')}
+              </h2>
+              <p className="text-sm leading-relaxed text-gray-600">
+                {product.longDescription}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/shop/layout.tsx b/src/app/shop/layout.tsx
new file mode 100644
index 0000000..f724aff
--- /dev/null
+++ b/src/app/shop/layout.tsx
@@ -0,0 +1,23 @@
+import { Suspense } from 'react';
+
+export const metadata = {
+  title: 'Shop',
+  description:
+    'Browse premium halal chicken, beef, lamb, and frozen fish. Customized cuts delivered to your door.',
+};
+
+export default function ShopLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <Suspense fallback={<ShopLoading />}>{children}</Suspense>;
+}
+
+function ShopLoading() {
+  return (
+    <div className="flex min-h-[50vh] items-center justify-center">
+      <div className="h-8 w-8 animate-spin rounded-full border-4 border-brand-200 border-t-brand-700" />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
new file mode 100644
index 0000000..5152311
--- /dev/null
+++ b/src/app/shop/page.tsx
@@ -0,0 +1,111 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import ProductCard from '@/components/product/ProductCard';
+import ShopFilters from '@/components/shop/ShopFilters';
+import { Category, SortOption } from '@/domain/entities';
+import { FilterProductsUseCase } from '@/application/use-cases/catalog/FilterProducts';
+import { useCatalogFilter } from '@/presentation/hooks/useCatalog';
+import { useTranslation } from '@/hooks/useTranslation';
+
+export default function ShopPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { t } = useTranslation();
+
+  const [selectedCategory, setSelectedCategory] = useState<Category | 'all'>(
+    FilterProductsUseCase.parseCategory(searchParams.get('category'))
+  );
+  const [sortBy, setSortBy] = useState<SortOption>('featured');
+  const [searchQuery, setSearchQuery] = useState(searchParams.get('q') || '');
+
+  useEffect(() => {
+    setSelectedCategory(
+      FilterProductsUseCase.parseCategory(searchParams.get('category'))
+    );
+    setSearchQuery(searchParams.get('q') || '');
+  }, [searchParams]);
+
+  const pushParams = useCallback(
+    (updates: { category?: Category | 'all'; q?: string }) => {
+      const params = new URLSearchParams(searchParams.toString());
+
+      if (updates.category !== undefined) {
+        if (updates.category === 'all') params.delete('category');
+        else params.set('category', updates.category);
+      }
+
+      if (updates.q !== undefined) {
+        if (updates.q) params.set('q', updates.q);
+        else params.delete('q');
+      }
+
+      const qs = params.toString();
+      router.push(qs ? `/shop?${qs}` : '/shop', { scroll: false });
+    },
+    [router, searchParams]
+  );
+
+  const handleCategoryChange = (category: Category | 'all') => {
+    setSelectedCategory(category);
+    pushParams({ category });
+  };
+
+  const handleSearchChange = (query: string) => {
+    setSearchQuery(query);
+    pushParams({ q: query });
+  };
+
+  const filteredProducts = useCatalogFilter({
+    category: selectedCategory,
+    searchQuery,
+    sortBy,
+  });
+
+  return (
+    <div className="bg-gray-50">
+      <div className="border-b border-gray-100 bg-white">
+        <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+          <h1 className="section-heading mb-2">{t('shop.title')}</h1>
+          <p className="text-gray-500">{t('shop.subtitle')}</p>
+        </div>
+      </div>
+
+      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
+        <div className="flex flex-col gap-8 lg:flex-row">
+          <aside className="lg:w-64 lg:shrink-0">
+            <div className="card-premium sticky top-24 p-6">
+              <ShopFilters
+                selectedCategory={selectedCategory}
+                onCategoryChange={handleCategoryChange}
+                sortBy={sortBy}
+                onSortChange={setSortBy}
+                searchQuery={searchQuery}
+                onSearchChange={handleSearchChange}
+                totalResults={filteredProducts.length}
+              />
+            </div>
+          </aside>
+
+          <div className="flex-1">
+            {filteredProducts.length === 0 ? (
+              <div className="card-premium flex flex-col items-center justify-center p-16 text-center">
+                <p className="mb-2 text-lg font-semibold text-brand-900">
+                  {t('shop.noProducts')}
+                </p>
+                <p className="text-sm text-gray-500">{t('shop.noProductsHint')}</p>
+              </div>
+            ) : (
+              <div className="grid gap-6 sm:grid-cols-2 xl:grid-cols-3">
+                {filteredProducts.map((product) => (
+                  <ProductCard key={product.id} product={product} />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/wishlist/page.tsx b/src/app/wishlist/page.tsx
new file mode 100644
index 0000000..0d684a1
--- /dev/null
+++ b/src/app/wishlist/page.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import Link from 'next/link';
+import { Heart } from 'lucide-react';
+import ProductCard from '@/components/product/ProductCard';
+import Button from '@/components/ui/Button';
+import { useWishlist } from '@/presentation/hooks/useWishlist';
+import { useTranslation } from '@/hooks/useTranslation';
+import { localizeProduct } from '@/lib/product-i18n';
+
+export default function WishlistPage() {
+  const { items } = useWishlist();
+  const { t } = useTranslation();
+  const localizedItems = items.map((p) => localizeProduct(p, t));
+
+  return (
+    <div className="bg-gray-50">
+      <div className="border-b border-gray-100 bg-white">
+        <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+          <h1 className="section-heading">{t('wishlist.title')}</h1>
+          <p className="text-gray-500">
+            {t('wishlist.saved', { count: items.length })}
+          </p>
+        </div>
+      </div>
+
+      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
+        {items.length === 0 ? (
+          <div className="card-premium flex flex-col items-center justify-center p-16 text-center">
+            <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-50">
+              <Heart className="h-8 w-8 text-red-300" />
+            </div>
+            <h2 className="mb-2 text-lg font-semibold text-brand-900">
+              {t('wishlist.empty')}
+            </h2>
+            <p className="mb-6 text-sm text-gray-500">{t('wishlist.emptyHint')}</p>
+            <Link href="/shop">
+              <Button>{t('wishlist.browse')}</Button>
+            </Link>
+          </div>
+        ) : (
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {localizedItems.map((product) => (
+              <ProductCard key={product.id} product={product} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/application/container.ts b/src/application/container.ts
new file mode 100644
index 0000000..9c823d3
--- /dev/null
+++ b/src/application/container.ts
@@ -0,0 +1,64 @@
+/**
+ * COMPOSITION ROOT — Wires ports to infrastructure and exposes use cases.
+ * This is the only place that should know concrete implementations.
+ */
+import { InMemoryProductRepository } from '@/infrastructure/repositories/InMemoryProductRepository';
+import {
+  ZustandCartRepository,
+} from '@/infrastructure/persistence/zustand/cartStore';
+import {
+  ZustandAuthRepository,
+} from '@/infrastructure/persistence/zustand/authStore';
+import {
+  ZustandWishlistRepository,
+} from '@/infrastructure/persistence/zustand/wishlistStore';
+import { I18nTranslationService } from '@/infrastructure/i18n/I18nTranslationService';
+import { LocalizeProductUseCase } from '@/application/use-cases/catalog/LocalizeProduct';
+import { FilterProductsUseCase } from '@/application/use-cases/catalog/FilterProducts';
+import { GetProductBySlugUseCase } from '@/application/use-cases/catalog/GetProductBySlug';
+import { AddToCartUseCase } from '@/application/use-cases/cart/AddToCart';
+import { GetCartSummaryUseCase } from '@/application/use-cases/cart/GetCartSummary';
+import { UpdateCartQuantityUseCase } from '@/application/use-cases/cart/UpdateCartQuantity';
+import { RemoveFromCartUseCase } from '@/application/use-cases/cart/RemoveFromCart';
+import { PlaceOrderUseCase } from '@/application/use-cases/checkout/PlaceOrder';
+import { LoginUseCase } from '@/application/use-cases/auth/Login';
+import { RegisterUseCase } from '@/application/use-cases/auth/Register';
+import { ToggleWishlistUseCase } from '@/application/use-cases/wishlist/ToggleWishlist';
+import { Locale } from '@/i18n/types';
+
+class ApplicationContainer {
+  readonly productRepository = new InMemoryProductRepository();
+  readonly cartRepository = new ZustandCartRepository();
+  readonly authRepository = new ZustandAuthRepository();
+  readonly wishlistRepository = new ZustandWishlistRepository();
+
+  createTranslationService(locale: Locale): I18nTranslationService {
+    return new I18nTranslationService(locale);
+  }
+
+  createLocalizeProduct(locale: Locale): LocalizeProductUseCase {
+    return new LocalizeProductUseCase(this.createTranslationService(locale));
+  }
+
+  readonly getProductBySlug = new GetProductBySlugUseCase(this.productRepository);
+  readonly addToCart = new AddToCartUseCase(this.cartRepository);
+  readonly getCartSummary = new GetCartSummaryUseCase(this.cartRepository);
+  readonly updateCartQuantity = new UpdateCartQuantityUseCase(this.cartRepository);
+  readonly removeFromCart = new RemoveFromCartUseCase(this.cartRepository);
+  readonly placeOrder = new PlaceOrderUseCase(
+    this.cartRepository,
+    this.authRepository
+  );
+  readonly login = new LoginUseCase(this.authRepository);
+  readonly register = new RegisterUseCase(this.authRepository);
+  readonly toggleWishlist = new ToggleWishlistUseCase(this.wishlistRepository);
+
+  createFilterProducts(locale: Locale): FilterProductsUseCase {
+    return new FilterProductsUseCase(
+      this.productRepository,
+      this.createLocalizeProduct(locale)
+    );
+  }
+}
+
+export const container = new ApplicationContainer();
\ No newline at end of file
diff --git a/src/application/dtos/CartSummary.ts b/src/application/dtos/CartSummary.ts
new file mode 100644
index 0000000..4f93ec7
--- /dev/null
+++ b/src/application/dtos/CartSummary.ts
@@ -0,0 +1,7 @@
+export interface CartSummary {
+  subtotal: number;
+  deliveryFee: number;
+  grandTotal: number;
+  itemCount: number;
+  isFreeDelivery: boolean;
+}
\ No newline at end of file
diff --git a/src/application/dtos/LocalizedProduct.ts b/src/application/dtos/LocalizedProduct.ts
new file mode 100644
index 0000000..b9fa489
--- /dev/null
+++ b/src/application/dtos/LocalizedProduct.ts
@@ -0,0 +1,19 @@
+import { Product } from '@/domain/entities';
+
+export interface LocalizedProduct {
+  id: string;
+  slug: string;
+  category: Product['category'];
+  name: string;
+  description: string;
+  longDescription: string;
+  price: number;
+  priceUnit: string;
+  image: string;
+  images: string[];
+  badge?: string;
+  inStock: boolean;
+  featured: boolean;
+  weight?: string;
+  tags: string[];
+}
\ No newline at end of file
diff --git a/src/application/ports/IAuthRepository.ts b/src/application/ports/IAuthRepository.ts
new file mode 100644
index 0000000..0b8ce53
--- /dev/null
+++ b/src/application/ports/IAuthRepository.ts
@@ -0,0 +1,16 @@
+import { Address, Order, User } from '@/domain/entities';
+import { RegisterInput } from '@/domain/services/AuthDomainService';
+
+/**
+ * PORT — Contract for user session and orders
+ */
+export interface IAuthRepository {
+  getUser(): User | null;
+  getOrders(): Order[];
+  isAuthenticated(): boolean;
+  login(email: string, password: string): boolean;
+  register(data: RegisterInput): boolean;
+  logout(): void;
+  updateProfile(data: Partial<User>): void;
+  addOrder(order: Order): void;
+}
\ No newline at end of file
diff --git a/src/application/ports/ICartRepository.ts b/src/application/ports/ICartRepository.ts
new file mode 100644
index 0000000..b5e5b0c
--- /dev/null
+++ b/src/application/ports/ICartRepository.ts
@@ -0,0 +1,18 @@
+import { CartItem, Product, ProductCustomization } from '@/domain/entities';
+
+/**
+ * PORT — Contract for cart persistence
+ */
+export interface ICartRepository {
+  getItems(): CartItem[];
+  setItems(items: CartItem[]): void;
+  addItem(
+    product: Product,
+    customization: ProductCustomization,
+    customizationLabel: string,
+    quantity?: number
+  ): void;
+  removeItem(id: string): void;
+  updateQuantity(id: string, quantity: number): void;
+  clearCart(): void;
+}
\ No newline at end of file
diff --git a/src/application/ports/IProductRepository.ts b/src/application/ports/IProductRepository.ts
new file mode 100644
index 0000000..f61ee01
--- /dev/null
+++ b/src/application/ports/IProductRepository.ts
@@ -0,0 +1,12 @@
+import { Product } from '@/domain/entities';
+
+/**
+ * PORT — Contract for loading products (in-memory today, API/CMS tomorrow)
+ */
+export interface IProductRepository {
+  findAll(): Product[];
+  findBySlug(slug: string): Product | undefined;
+  findByCategory(category: string): Product[];
+  findFeatured(): Product[];
+  findById(id: string): Product | undefined;
+}
\ No newline at end of file
diff --git a/src/application/ports/ITranslationService.ts b/src/application/ports/ITranslationService.ts
new file mode 100644
index 0000000..2b43ebd
--- /dev/null
+++ b/src/application/ports/ITranslationService.ts
@@ -0,0 +1,9 @@
+/**
+ * PORT — Contract for UI translations
+ */
+export interface ITranslationService {
+  translate(
+    path: string,
+    params?: Record<string, string | number>
+  ): string;
+}
\ No newline at end of file
diff --git a/src/application/ports/IWishlistRepository.ts b/src/application/ports/IWishlistRepository.ts
new file mode 100644
index 0000000..0c40581
--- /dev/null
+++ b/src/application/ports/IWishlistRepository.ts
@@ -0,0 +1,12 @@
+import { Product } from '@/domain/entities';
+
+/**
+ * PORT — Contract for wishlist persistence
+ */
+export interface IWishlistRepository {
+  getItems(): Product[];
+  addItem(product: Product): void;
+  removeItem(productId: string): void;
+  isInWishlist(productId: string): boolean;
+  toggleItem(product: Product): void;
+}
\ No newline at end of file
diff --git a/src/application/use-cases/auth/Login.ts b/src/application/use-cases/auth/Login.ts
new file mode 100644
index 0000000..74da72a
--- /dev/null
+++ b/src/application/use-cases/auth/Login.ts
@@ -0,0 +1,9 @@
+import { IAuthRepository } from '@/application/ports/IAuthRepository';
+
+export class LoginUseCase {
+  constructor(private readonly auth: IAuthRepository) {}
+
+  execute(email: string, password: string): boolean {
+    return this.auth.login(email, password);
+  }
+}
\ No newline at end of file
diff --git a/src/application/use-cases/auth/Register.ts b/src/application/use-cases/auth/Register.ts
new file mode 100644
index 0000000..3ce2429
--- /dev/null
+++ b/src/application/use-cases/auth/Register.ts
@@ -0,0 +1,10 @@
+import { RegisterInput } from '@/domain/services/AuthDomainService';
+import { IAuthRepository } from '@/application/ports/IAuthRepository';
+
+export class RegisterUseCase {
+  constructor(private readonly auth: IAuthRepository) {}
+
+  execute(data: RegisterInput): boolean {
+    return this.auth.register(data);
+  }
+}
\ No newline at end of file
diff --git a/src/application/use-cases/cart/AddToCart.ts b/src/application/use-cases/cart/AddToCart.ts
new file mode 100644
index 0000000..fbc2c18
--- /dev/null
+++ b/src/application/use-cases/cart/AddToCart.ts
@@ -0,0 +1,18 @@
+import { Product, ProductCustomization } from '@/domain/entities';
+import { ICartRepository } from '@/application/ports/ICartRepository';
+
+/**
+ * USE CASE — Add a product line to the cart (delegates merge logic to domain + repo)
+ */
+export class AddToCartUseCase {
+  constructor(private readonly cart: ICartRepository) {}
+
+  execute(
+    product: Product,
+    customization: ProductCustomization,
+    customizationLabel: string,
+    quantity = 1
+  ): void {
+    this.cart.addItem(product, customization, customizationLabel, quantity);
+  }
+}
\ No newline at end of file
diff --git a/src/application/use-cases/cart/GetCartSummary.ts b/src/application/use-cases/cart/GetCartSummary.ts
new file mode 100644
index 0000000..13553b8
--- /dev/null
+++ b/src/application/use-cases/cart/GetCartSummary.ts
@@ -0,0 +1,25 @@
+import { CartDomainService } from '@/domain/services/CartDomainService';
+import { DeliveryFeeService } from '@/domain/services/DeliveryFeeService';
+import { CartSummary } from '@/application/dtos/CartSummary';
+import { ICartRepository } from '@/application/ports/ICartRepository';
+
+/**
+ * USE CASE — Cart totals with delivery fee (single business rule path)
+ */
+export class GetCartSummaryUseCase {
+  constructor(private readonly cart: ICartRepository) {}
+
+  execute(): CartSummary {
+    const items = this.cart.getItems();
+    const subtotal = CartDomainService.calculateSubtotal(items);
+    const deliveryFee = DeliveryFeeService.calculateDeliveryFee(subtotal);
+
+    return {
+      subtotal,
+      deliveryFee,
+      grandTotal: subtotal + deliveryFee,
+      itemCount: CartDomainService.calculateItemCount(items),
+      isFreeDelivery: DeliveryFeeService.isFreeDelivery(subtotal),
+    };
+  }
+}
\ No newline at end of file
diff --git a/src/application/use-cases/cart/RemoveFromCart.ts b/src/application/use-cases/cart/RemoveFromCart.ts
new file mode 100644
index 0000000..4ac980f
--- /dev/null
+++ b/src/application/use-cases/cart/RemoveFromCart.ts
@@ -0,0 +1,9 @@
+import { ICartRepository } from '@/application/ports/ICartRepository';
+
+export class RemoveFromCartUseCase {
+  constructor(private readonly cart: ICartRepository) {}
+
+  execute(id: string): void {
+    this.cart.removeItem(id);
+  }
+}
\ No newline at end of file
diff --git a/src/application/use-cases/cart/UpdateCartQuantity.ts b/src/application/use-cases/cart/UpdateCartQuantity.ts
new file mode 100644
index 0000000..2608ca1
--- /dev/null
+++ b/src/application/use-cases/cart/UpdateCartQuantity.ts
@@ -0,0 +1,12 @@
+import { ICartRepository } from '@/application/ports/ICartRepository';
+
+/**
+ * USE CASE — Change quantity or remove when zero
+ */
+export class UpdateCartQuantityUseCase {
+  constructor(private readonly cart: ICartRepository) {}
+
+  execute(id: string, quantity: number): void {
+    this.cart.updateQuantity(id, quantity);
+  }
+}
\ No newline at end of file
diff --git a/src/application/use-cases/catalog/FilterProducts.ts b/src/application/use-cases/catalog/FilterProducts.ts
new file mode 100644
index 0000000..1cbde81
--- /dev/null
+++ b/src/application/use-cases/catalog/FilterProducts.ts
@@ -0,0 +1,52 @@
+import { Category, Product, SortOption } from '@/domain/entities';
+import {
+  CatalogDomainService,
+  CategoryFilter,
+} from '@/domain/services/CatalogDomainService';
+import { IProductRepository } from '@/application/ports/IProductRepository';
+import { LocalizeProductUseCase } from './LocalizeProduct';
+import { LocalizedProduct } from '@/application/dtos/LocalizedProduct';
+
+export interface FilterProductsInput {
+  category: CategoryFilter;
+  searchQuery: string;
+  sortBy: SortOption;
+}
+
+/**
+ * USE CASE — Shop page: load, filter, sort, localize products
+ */
+export class FilterProductsUseCase {
+  constructor(
+    private readonly products: IProductRepository,
+    private readonly localize: LocalizeProductUseCase
+  ) {}
+
+  execute(input: FilterProductsInput): LocalizedProduct[] {
+    const all = this.products.findAll();
+    const searchIndex = all.map((product) => {
+      const localized = this.localize.execute(product);
+      return {
+        product,
+        name: localized.name,
+        description: localized.description,
+      };
+    });
+
+    const filtered = CatalogDomainService.filterAndSort({
+      products: all,
+      category: input.category,
+      searchQuery: input.searchQuery,
+      sortBy: input.sortBy,
+      searchIndex,
+    });
+
+    return this.localize.executeMany(filtered);
+  }
+
+  static parseCategory(value: string | null): CategoryFilter {
+    return CatalogDomainService.parseCategory(value);
+  }
+
+  static readonly CATEGORIES: Category[] = CatalogDomainService.CATEGORIES;
+}
\ No newline at end of file
diff --git a/src/application/use-cases/catalog/GetProductBySlug.ts b/src/application/use-cases/catalog/GetProductBySlug.ts
new file mode 100644
index 0000000..015ddc2
--- /dev/null
+++ b/src/application/use-cases/catalog/GetProductBySlug.ts
@@ -0,0 +1,13 @@
+import { Product } from '@/domain/entities';
+import { IProductRepository } from '@/application/ports/IProductRepository';
+
+/**
+ * USE CASE — Load one product for the product detail page
+ */
+export class GetProductBySlugUseCase {
+  constructor(private readonly products: IProductRepository) {}
+
+  execute(slug: string): Product | undefined {
+    return this.products.findBySlug(slug);
+  }
+}
\ No newline at end of file
diff --git a/src/application/use-cases/catalog/LocalizeProduct.ts b/src/application/use-cases/catalog/LocalizeProduct.ts
new file mode 100644
index 0000000..a53c029
--- /dev/null
+++ b/src/application/use-cases/catalog/LocalizeProduct.ts
@@ -0,0 +1,28 @@
+import { Product } from '@/domain/entities';
+import { LocalizedProduct } from '@/application/dtos/LocalizedProduct';
+import { ITranslationService } from '@/application/ports/ITranslationService';
+
+/**
+ * USE CASE — Turn a Product entity into display-ready LocalizedProduct
+ */
+export class LocalizeProductUseCase {
+  constructor(private readonly translation: ITranslationService) {}
+
+  execute(product: Product): LocalizedProduct {
+    const base = `products.${product.id}`;
+    const t = this.translation.translate.bind(this.translation);
+
+    return {
+      ...product,
+      name: t(`${base}.name`),
+      description: t(`${base}.description`),
+      longDescription: t(`${base}.longDescription`),
+      priceUnit: t(`priceUnit.${product.priceUnitKey}`),
+      badge: product.badgeKey ? t(`badges.${product.badgeKey}`) : undefined,
+    };
+  }
+
+  executeMany(products: Product[]): LocalizedProduct[] {
+    return products.map((p) => this.execute(p));
+  }
+}
\ No newline at end of file
diff --git a/src/application/use-cases/checkout/PlaceOrder.ts b/src/application/use-cases/checkout/PlaceOrder.ts
new file mode 100644
index 0000000..a689455
--- /dev/null
+++ b/src/application/use-cases/checkout/PlaceOrder.ts
@@ -0,0 +1,37 @@
+import { Address, Order } from '@/domain/entities';
+import { OrderDomainService } from '@/domain/services/OrderDomainService';
+import { ICartRepository } from '@/application/ports/ICartRepository';
+import { IAuthRepository } from '@/application/ports/IAuthRepository';
+
+export interface PlaceOrderInput {
+  deliveryAddress: Address;
+  paymentMethod: string;
+}
+
+export interface PlaceOrderResult {
+  order: Order;
+}
+
+/**
+ * USE CASE — Checkout: create order, save to auth, clear cart
+ */
+export class PlaceOrderUseCase {
+  constructor(
+    private readonly cart: ICartRepository,
+    private readonly auth: IAuthRepository
+  ) {}
+
+  execute(input: PlaceOrderInput): PlaceOrderResult {
+    const items = this.cart.getItems();
+    const order = OrderDomainService.createOrder({
+      items,
+      deliveryAddress: input.deliveryAddress,
+      paymentMethod: input.paymentMethod,
+    });
+
+    this.auth.addOrder(order);
+    this.cart.clearCart();
+
+    return { order };
+  }
+}
\ No newline at end of file
diff --git a/src/application/use-cases/wishlist/ToggleWishlist.ts b/src/application/use-cases/wishlist/ToggleWishlist.ts
new file mode 100644
index 0000000..d875a30
--- /dev/null
+++ b/src/application/use-cases/wishlist/ToggleWishlist.ts
@@ -0,0 +1,10 @@
+import { Product } from '@/domain/entities';
+import { IWishlistRepository } from '@/application/ports/IWishlistRepository';
+
+export class ToggleWishlistUseCase {
+  constructor(private readonly wishlist: IWishlistRepository) {}
+
+  execute(product: Product): void {
+    this.wishlist.toggleItem(product);
+  }
+}
\ No newline at end of file
diff --git a/src/components/home/AboutPreview.tsx b/src/components/home/AboutPreview.tsx
new file mode 100644
index 0000000..c8fbdc2
--- /dev/null
+++ b/src/components/home/AboutPreview.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import AppImage from '@/components/ui/AppImage';
+import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
+import Button from '@/components/ui/Button';
+import { useTranslation } from '@/hooks/useTranslation';
+import { PAGE_IMAGES } from '@/infrastructure/images';
+
+export default function AboutPreview() {
+  const { t } = useTranslation();
+
+  const stats = [
+    { value: t('aboutPreview.statHalal'), label: t('aboutPreview.statHalalLabel') },
+    { value: t('aboutPreview.statDays'), label: t('aboutPreview.statDaysLabel') },
+    { value: t('aboutPreview.statDelivery'), label: t('aboutPreview.statDeliveryLabel') },
+    { value: t('aboutPreview.statFresh'), label: t('aboutPreview.statFreshLabel') },
+  ];
+
+  return (
+    <section className="bg-white py-20">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
+          <div>
+            <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
+              {t('aboutPreview.label')}
+            </span>
+            <h2 className="section-heading mb-6">{t('aboutPreview.title')}</h2>
+            <p className="mb-4 leading-relaxed text-gray-600">{t('aboutPreview.p1')}</p>
+            <p className="mb-4 leading-relaxed text-gray-600">{t('aboutPreview.p2')}</p>
+            <p className="mb-8 leading-relaxed text-gray-600">{t('aboutPreview.p3')}</p>
+
+            <div className="mb-8 grid grid-cols-2 gap-4 sm:grid-cols-4">
+              {stats.map((stat) => (
+                <div
+                  key={stat.label}
+                  className="rounded-xl border border-cream-300/80 bg-cream-50 p-4 text-center"
+                >
+                  <p className="font-display text-2xl font-bold text-brand-800">{stat.value}</p>
+                  <p className="mt-1 text-xs font-medium text-gray-500">{stat.label}</p>
+                </div>
+              ))}
+            </div>
+
+            <Link href="/about">
+              <Button variant="secondary">
+                {t('aboutPreview.readMore')}
+                <ArrowRight className="h-4 w-4 rtl:rotate-180" />
+              </Button>
+            </Link>
+          </div>
+
+          <div className="relative aspect-[4/5] overflow-hidden rounded-2xl shadow-premium-lg">
+            <AppImage
+              src={PAGE_IMAGES.aboutMeat}
+              alt={t('aboutPreview.imageAlt')}
+              fill
+              className="object-cover"
+              sizes="(max-width: 1024px) 100vw, 640px"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-brand-950/30 via-transparent to-transparent" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/home/CTA.tsx b/src/components/home/CTA.tsx
new file mode 100644
index 0000000..84956d7
--- /dev/null
+++ b/src/components/home/CTA.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import Link from 'next/link';
+import Button from '@/components/ui/Button';
+import { ArrowRight, MessageCircle } from 'lucide-react';
+import { useTranslation } from '@/hooks/useTranslation';
+import { WHATSAPP_URL } from '@/lib/constants';
+
+export default function CTA() {
+  const { t } = useTranslation();
+
+  return (
+    <section className="py-20">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-700 to-brand-900 px-8 py-16 text-center sm:px-16">
+          <div className="absolute -right-20 -top-20 h-60 w-60 rounded-full bg-gold-500/10" />
+          <div className="absolute -bottom-16 -left-16 h-48 w-48 rounded-full bg-gold-500/10" />
+
+          <div className="relative">
+            <h2 className="mb-4 font-display text-3xl font-bold text-white md:text-4xl">
+              {t('cta.title')}
+            </h2>
+            <p className="mx-auto mb-8 max-w-xl text-brand-100">{t('cta.subtitle')}</p>
+            <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
+              <Link href="/shop">
+                <Button variant="gold" size="lg">
+                  {t('cta.button')}
+                  <ArrowRight className="h-4 w-4 rtl:rotate-180" />
+                </Button>
+              </Link>
+              <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
+                <Button
+                  variant="secondary"
+                  size="lg"
+                  className="border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15"
+                >
+                  <MessageCircle className="h-4 w-4" />
+                  {t('cta.whatsapp')}
+                </Button>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/home/CategoryGrid.tsx b/src/components/home/CategoryGrid.tsx
new file mode 100644
index 0000000..b808ec8
--- /dev/null
+++ b/src/components/home/CategoryGrid.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import AppImage from '@/components/ui/AppImage';
+import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
+import { CATEGORY_IDS } from '@/lib/constants';
+import { CATEGORY_IMAGES } from '@/infrastructure/images';
+import { useTranslation } from '@/hooks/useTranslation';
+export default function CategoryGrid() {
+  const { t } = useTranslation();
+
+  return (
+    <section className="bg-cream-50 py-20">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="mb-12 text-center">
+          <h2 className="section-heading mb-3">{t('categories.title')}</h2>
+          <p className="mx-auto max-w-2xl text-gray-500">{t('categories.subtitle')}</p>
+        </div>
+
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {CATEGORY_IDS.map((id) => (
+            <Link
+              key={id}
+              href={`/shop?category=${id}`}
+              className="group relative overflow-hidden rounded-2xl shadow-premium transition-all duration-300 hover:shadow-premium-lg"
+            >
+              <div className="relative aspect-[3/4]">
+                <AppImage
+                  src={CATEGORY_IMAGES[id]}
+                  alt={t(`categories.${id}.name`)}
+                  fill
+                  className="object-cover transition-transform duration-500 group-hover:scale-110"
+                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 320px"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-brand-950/92 via-brand-800/50 to-brand-700/10" />
+              </div>
+              <div className="absolute bottom-0 left-0 right-0 p-6">
+                <h3 className="mb-1 font-display text-2xl font-bold text-white">
+                  {t(`categories.${id}.name`)}
+                </h3>
+                <p className="mb-3 text-sm text-brand-200">
+                  {t(`categories.${id}.description`)}
+                </p>
+                <span className="inline-flex items-center gap-1 text-sm font-semibold text-gold-400 transition-colors group-hover:text-gold-300">
+                  {t('categories.shop', { name: t(`categories.${id}.name`) })}
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
+                </span>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/home/ContactPreview.tsx b/src/components/home/ContactPreview.tsx
new file mode 100644
index 0000000..0051928
--- /dev/null
+++ b/src/components/home/ContactPreview.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import Link from 'next/link';
+import { Phone, MapPin, Clock, MessageCircle, ExternalLink } from 'lucide-react';
+import Button from '@/components/ui/Button';
+import Logo from '@/components/ui/Logo';
+import {
+  SITE_ADDRESS,
+  SITE_PHONE_DISPLAY,
+  SITE_HOURS,
+  WHATSAPP_URL,
+  MAPS_URL,
+} from '@/lib/constants';
+import { useTranslation } from '@/hooks/useTranslation';
+
+export default function ContactPreview() {
+  const { t } = useTranslation();
+  const telHref = `tel:+46725855050`;
+
+  return (
+    <section className="bg-brand-950 py-20 text-white">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="grid gap-12 lg:grid-cols-2 lg:gap-16">
+          <div>
+            <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-400">
+              {t('contact.label')}
+            </span>
+            <h2 className="mb-8 font-display text-3xl font-bold md:text-4xl">
+              {t('contact.title')}
+            </h2>
+
+            <ul className="mb-8 space-y-5">
+              <li className="flex gap-4">
+                <MapPin className="mt-0.5 h-5 w-5 shrink-0 text-gold-400" />
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-wider text-gold-400">
+                    {t('contact.addressLabel')}
+                  </p>
+                  <p className="text-brand-100">{SITE_ADDRESS}</p>
+                </div>
+              </li>
+              <li className="flex gap-4">
+                <Phone className="mt-0.5 h-5 w-5 shrink-0 text-gold-400" />
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-wider text-gold-400">
+                    {t('contact.phoneLabel')}
+                  </p>
+                  <a href={telHref} className="text-brand-100 hover:text-white">
+                    {SITE_PHONE_DISPLAY}
+                  </a>
+                </div>
+              </li>
+              <li className="flex gap-4">
+                <Clock className="mt-0.5 h-5 w-5 shrink-0 text-gold-400" />
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-wider text-gold-400">
+                    {t('contact.hoursLabel')}
+                  </p>
+                  <p className="text-brand-100">
+                    {t('contact.hoursValue', { hours: SITE_HOURS })}
+                  </p>
+                </div>
+              </li>
+            </ul>
+
+            <div className="flex flex-col gap-3 sm:flex-row">
+              <Link href="/about#contact">
+                <Button
+                  variant="secondary"
+                  size="lg"
+                  className="w-full border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15 sm:w-auto"
+                >
+                  {t('contact.learnMore')}
+                </Button>
+              </Link>
+              <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
+                <Button variant="gold" size="lg" className="w-full sm:w-auto">
+                  <MessageCircle className="h-4 w-4" />
+                  {t('contact.writeUs')}
+                </Button>
+              </a>
+              <a href={telHref}>
+                <Button
+                  variant="secondary"
+                  size="lg"
+                  className="w-full border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15 sm:w-auto"
+                >
+                  <Phone className="h-4 w-4" />
+                  {t('contact.callUs')}
+                </Button>
+              </a>
+            </div>
+          </div>
+
+          <div className="flex flex-col justify-center">
+            <a
+              href={MAPS_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="card-premium group flex flex-col items-center gap-4 bg-brand-900/50 p-8 text-center transition-all hover:bg-brand-900/70"
+            >
+              <Logo size="lg" className="ring-gold-400/30" />
+              <div>
+                <p className="font-display text-xl font-bold">{t('site.name')}</p>
+                <p className="mt-1 text-sm text-brand-200">{SITE_ADDRESS}</p>
+              </div>
+              <span className="inline-flex items-center gap-2 text-sm font-semibold text-gold-400 transition-colors group-hover:text-gold-300">
+                {t('contact.openMaps')}
+                <ExternalLink className="h-4 w-4" />
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/home/FeaturedProducts.tsx b/src/components/home/FeaturedProducts.tsx
new file mode 100644
index 0000000..0ee42a9
--- /dev/null
+++ b/src/components/home/FeaturedProducts.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import Link from 'next/link';
+import ProductCard from '@/components/product/ProductCard';
+import { getFeaturedProducts } from '@/lib/products';
+import Button from '@/components/ui/Button';
+import { ArrowRight } from 'lucide-react';
+import { useTranslation } from '@/hooks/useTranslation';
+import { localizeProduct } from '@/lib/product-i18n';
+
+export default function FeaturedProducts() {
+  const { t } = useTranslation();
+  const featured = getFeaturedProducts()
+    .slice(0, 4)
+    .map((p) => localizeProduct(p, t));
+
+  return (
+    <section className="py-20">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="mb-12 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end">
+          <div>
+            <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
+              {t('featured.label')}
+            </span>
+            <h2 className="section-heading">{t('featured.title')}</h2>
+            <p className="mt-2 max-w-lg text-gray-500">{t('featured.subtitle')}</p>
+          </div>
+          <Link href="/shop">
+            <Button variant="secondary">
+              {t('featured.viewAll')}
+              <ArrowRight className="h-4 w-4 rtl:rotate-180" />
+            </Button>
+          </Link>
+        </div>
+
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {featured.map((product) => (
+            <ProductCard key={product.id} product={product} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
new file mode 100644
index 0000000..203ad77
--- /dev/null
+++ b/src/components/home/Hero.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import Link from 'next/link';
+import AppImage from '@/components/ui/AppImage';
+import Button from '@/components/ui/Button';
+import Logo from '@/components/ui/Logo';
+import { ArrowRight, ShieldCheck, MapPin, Clock } from 'lucide-react';
+import { useTranslation } from '@/hooks/useTranslation';
+import { PAGE_IMAGES } from '@/infrastructure/images';
+import { SITE_LOCATION, SITE_HOURS, SITE_ADDRESS, WHATSAPP_URL } from '@/lib/constants';
+
+export default function Hero() {
+  const { t } = useTranslation();
+
+  return (
+    <section className="relative min-h-[85vh] overflow-hidden bg-brand-950">
+      <div className="absolute inset-0">
+        <AppImage
+          src={PAGE_IMAGES.hero}
+          alt=""
+          fill
+          className="object-cover"
+          priority
+          sizes="100vw"
+          placeholder="blur"
+          blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUH/8QAIhAAAgEDBQAAAAAAAAAAAAAAAQIDAAQRBQYhIjFB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAZEQACAwEAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEEA/ALextba0t0t7eJI4kHVEU4AqT/9k="
+        />
+      </div>
+      <div className="absolute inset-0 bg-gradient-to-r from-brand-950/95 via-brand-900/85 to-brand-900/40" />
+      <div className="absolute inset-0 bg-gradient-to-t from-brand-950/60 via-transparent to-transparent" />
+
+      <div className="relative mx-auto flex min-h-[85vh] max-w-7xl flex-col justify-center px-4 py-20 sm:px-6 lg:px-8 lg:py-28">
+        <div className="max-w-2xl animate-slide-up">
+          <div className="mb-8 flex items-center gap-4">
+            <Logo size="lg" className="ring-gold-400/40 shadow-premium-lg" />
+            <div>
+              <p className="text-sm font-medium text-gold-400">{SITE_LOCATION}</p>
+              <p className="text-xs text-brand-200">{t('hero.taglineShort')}</p>
+            </div>
+          </div>
+
+          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-gold-500/30 bg-brand-800/50 px-4 py-1.5 backdrop-blur-sm">
+            <ShieldCheck className="h-4 w-4 text-gold-400" />
+            <span className="text-xs font-semibold uppercase tracking-wider text-gold-300">
+              {t('hero.badge')}
+            </span>
+          </div>
+
+          <h1 className="mb-4 font-display text-4xl font-bold leading-tight text-white sm:text-5xl lg:text-6xl">
+            {t('hero.title')}
+          </h1>
+
+          <p className="mb-2 text-xl font-medium text-gold-300 sm:text-2xl">
+            {t('hero.subtitleShort')}
+          </p>
+
+          <p className="mb-8 text-base leading-relaxed text-brand-100 sm:text-lg">
+            {t('hero.subtitle')}
+          </p>
+
+          <div className="mb-8 flex flex-wrap gap-4 text-sm text-brand-200">
+            <span className="flex items-center gap-1.5">
+              <Clock className="h-4 w-4 text-gold-400" />
+              {t('hero.hours', { hours: SITE_HOURS })}
+            </span>
+            <span className="flex items-center gap-1.5">
+              <MapPin className="h-4 w-4 text-gold-400" />
+              {SITE_ADDRESS}
+            </span>
+          </div>
+
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <Link href="/shop">
+              <Button variant="gold" size="lg">
+                {t('hero.shopNow')}
+                <ArrowRight className="h-4 w-4 rtl:rotate-180" />
+              </Button>
+            </Link>
+            <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
+              <Button
+                variant="secondary"
+                size="lg"
+                className="border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15"
+              >
+                {t('hero.whatsapp')}
+              </Button>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-cream-50 to-transparent" />
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/home/HowItWorks.tsx b/src/components/home/HowItWorks.tsx
new file mode 100644
index 0000000..d600454
--- /dev/null
+++ b/src/components/home/HowItWorks.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { MessageCircle, ClipboardCheck, Store } from 'lucide-react';
+import Button from '@/components/ui/Button';
+import { WHATSAPP_URL } from '@/lib/constants';
+import { useTranslation } from '@/hooks/useTranslation';
+
+export default function HowItWorks() {
+  const { t } = useTranslation();
+
+  const steps = [
+    {
+      icon: MessageCircle,
+      step: '01',
+      title: t('howItWorks.step1Title'),
+      description: t('howItWorks.step1Desc'),
+    },
+    {
+      icon: ClipboardCheck,
+      step: '02',
+      title: t('howItWorks.step2Title'),
+      description: t('howItWorks.step2Desc'),
+    },
+    {
+      icon: Store,
+      step: '03',
+      title: t('howItWorks.step3Title'),
+      description: t('howItWorks.step3Desc'),
+    },
+  ];
+
+  return (
+    <section className="bg-brand-950 py-20 text-white">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="mb-12 text-center">
+          <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-400">
+            {t('howItWorks.label')}
+          </span>
+          <h2 className="font-display text-3xl font-bold md:text-4xl">
+            {t('howItWorks.title')}
+          </h2>
+        </div>
+
+        <div className="mb-12 grid gap-8 md:grid-cols-3">
+          {steps.map((step) => (
+            <div key={step.step} className="relative text-center">
+              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-brand-800">
+                <step.icon className="h-7 w-7 text-gold-400" />
+              </div>
+              <span className="mb-2 inline-block text-xs font-bold uppercase tracking-widest text-gold-500">
+                {t('howItWorks.step', { n: step.step })}
+              </span>
+              <h3 className="mb-2 font-display text-xl font-bold">{step.title}</h3>
+              <p className="text-sm leading-relaxed text-brand-200">{step.description}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="text-center">
+          <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
+            <Button variant="gold" size="lg">
+              <MessageCircle className="h-4 w-4" />
+              {t('howItWorks.whatsapp')}
+            </Button>
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/home/SocialFollow.tsx b/src/components/home/SocialFollow.tsx
new file mode 100644
index 0000000..e5f2e33
--- /dev/null
+++ b/src/components/home/SocialFollow.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import { Facebook, Instagram, MessageCircle } from 'lucide-react';
+import {
+  FACEBOOK_URL,
+  INSTAGRAM_URL,
+  WHATSAPP_URL,
+} from '@/lib/constants';
+import { useTranslation } from '@/hooks/useTranslation';
+
+const socialLinks = [
+  {
+    key: 'facebook',
+    href: FACEBOOK_URL,
+    icon: Facebook,
+    className:
+      'border-blue-600/20 bg-blue-600/10 text-blue-700 hover:border-blue-600/40 hover:bg-blue-600/15',
+  },
+  {
+    key: 'instagram',
+    href: INSTAGRAM_URL,
+    icon: Instagram,
+    className:
+      'border-pink-600/20 bg-pink-600/10 text-pink-700 hover:border-pink-600/40 hover:bg-pink-600/15',
+  },
+  {
+    key: 'whatsapp',
+    href: WHATSAPP_URL,
+    icon: MessageCircle,
+    className:
+      'border-green-600/20 bg-green-600/10 text-green-700 hover:border-green-600/40 hover:bg-green-600/15',
+  },
+] as const;
+
+export default function SocialFollow() {
+  const { t } = useTranslation();
+
+  return (
+    <section className="py-20">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="rounded-3xl border border-cream-300/80 bg-white px-8 py-12 text-center shadow-premium sm:px-16">
+          <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
+            {t('social.label')}
+          </span>
+          <h2 className="section-heading mb-3">{t('social.title')}</h2>
+          <p className="mx-auto mb-8 max-w-xl text-gray-500">{t('social.subtitle')}</p>
+
+          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
+            {socialLinks.map(({ key, href, icon: Icon, className }) => (
+              <a
+                key={key}
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={`inline-flex items-center gap-2 rounded-xl border-2 px-6 py-3 text-sm font-semibold transition-all ${className}`}
+              >
+                <Icon className="h-5 w-5" />
+                {t(`social.${key}`)}
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/home/TrustBadges.tsx b/src/components/home/TrustBadges.tsx
new file mode 100644
index 0000000..3ac95f4
--- /dev/null
+++ b/src/components/home/TrustBadges.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import Link from 'next/link';
+import { ShieldCheck, Leaf, Award } from 'lucide-react';
+import { useTranslation } from '@/hooks/useTranslation';
+
+export default function TrustBadges() {
+  const { t } = useTranslation();
+
+  const badges = [
+    {
+      icon: ShieldCheck,
+      title: t('trust.halal'),
+      description: t('trust.halalDesc'),
+      href: '/about#halal',
+    },
+    {
+      icon: Leaf,
+      title: t('trust.fresh'),
+      description: t('trust.freshDesc'),
+      href: '/about#delivery',
+    },
+    {
+      icon: Award,
+      title: t('trust.premium'),
+      description: t('trust.premiumDesc'),
+      href: '/about',
+    },
+  ];
+
+  return (
+    <section className="bg-cream-100 py-16">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="grid gap-8 md:grid-cols-3">
+          {badges.map((badge) => (
+            <Link
+              key={badge.title}
+              href={badge.href}
+              className="group rounded-2xl border border-cream-300/80 bg-white p-8 text-center shadow-premium transition-all duration-300 hover:border-brand-200 hover:shadow-premium-lg"
+            >
+              <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand-50 transition-colors group-hover:bg-gold-50">
+                <badge.icon className="h-7 w-7 text-brand-700 transition-colors group-hover:text-gold-600" />
+              </div>
+              <h3 className="mb-2 font-display text-xl font-bold text-brand-900">
+                {badge.title}
+              </h3>
+              <p className="text-sm leading-relaxed text-gray-500">{badge.description}</p>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/home/WeeklyOffers.tsx b/src/components/home/WeeklyOffers.tsx
new file mode 100644
index 0000000..b38bdc3
--- /dev/null
+++ b/src/components/home/WeeklyOffers.tsx
@@ -0,0 +1,130 @@
+'use client';
+
+import Link from 'next/link';
+import AppImage from '@/components/ui/AppImage';
+import { MessageCircle, ArrowRight } from 'lucide-react';
+import { weeklyOffers } from '@/lib/offers';
+import { PAGE_IMAGES } from '@/infrastructure/images';
+import { whatsappOrderUrl } from '@/lib/constants';
+import { formatPrice, getFormatLocale } from '@/lib/utils';
+import { useTranslation } from '@/hooks/useTranslation';
+
+export default function WeeklyOffers() {
+  const { t, locale } = useTranslation();
+  const fmt = (n: number) => formatPrice(n, getFormatLocale(locale));
+
+  return (
+    <section className="bg-cream-100 py-20">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
+          <div>
+            <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
+              {t('offers.label')}
+            </span>
+            <h2 className="section-heading mb-3">{t('offers.title')}</h2>
+            <p className="mb-8 text-gray-500">{t('offers.subtitle')}</p>
+
+            <div className="space-y-4">
+              {weeklyOffers.map((offer) => (
+                <div
+                  key={offer.id}
+                  className="group flex gap-4 rounded-2xl border border-cream-300/80 bg-white p-4 shadow-premium transition-all duration-300 hover:border-brand-200 hover:shadow-premium-lg sm:p-5"
+                >
+                  <Link
+                    href={`/product/${offer.productSlug}`}
+                    className="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl sm:h-24 sm:w-24"
+                  >
+                    <AppImage
+                      src={offer.image}
+                      alt={t(`${offer.nameKey}.name`)}
+                      fill
+                      className="object-cover transition-transform duration-500 group-hover:scale-105"
+                      sizes="(max-width: 640px) 96px, 128px"
+                    />
+                  </Link>
+
+                  <div className="min-w-0 flex-1">
+                    <div className="mb-1 flex flex-wrap items-center gap-2">
+                      <span
+                        className={
+                          offer.badgeKey === 'halal'
+                            ? 'rounded-full bg-brand-700 px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white'
+                            : 'rounded-full bg-gold-500 px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white'
+                        }
+                      >
+                        {t(`offers.badge.${offer.badgeKey}`)}
+                      </span>
+                    </div>
+
+                    <Link href={`/product/${offer.productSlug}`}>
+                      <h3 className="mb-2 font-display text-lg font-bold text-brand-900 transition-colors hover:text-brand-700">
+                        {t(`${offer.nameKey}.name`)}
+                      </h3>
+                    </Link>
+
+                    <div className="flex flex-wrap items-end justify-between gap-3">
+                      <div>
+                        {offer.originalPrice != null && (
+                          <p className="text-sm text-gray-400 line-through">
+                            {t('offers.was')}: {fmt(offer.originalPrice)}/
+                            {t(`priceUnit.${offer.priceUnitKey}`)}
+                          </p>
+                        )}
+                        <p className="font-display text-xl font-bold text-brand-800">
+                          {offer.originalPrice != null && (
+                            <span className="me-2 text-sm font-semibold uppercase text-gold-600">
+                              {t('offers.now')}
+                            </span>
+                          )}
+                          {fmt(offer.price)}
+                          <span className="text-sm font-normal text-gray-500">
+                            /{t(`priceUnit.${offer.priceUnitKey}`)}
+                          </span>
+                        </p>
+                      </div>
+
+                      <div className="flex flex-wrap gap-2">
+                        <Link
+                          href={`/product/${offer.productSlug}`}
+                          className="inline-flex items-center gap-1 rounded-lg border border-brand-200 px-3 py-2 text-xs font-semibold text-brand-700 transition-colors hover:bg-brand-50"
+                        >
+                          {t('offers.viewProduct')}
+                          <ArrowRight className="h-3 w-3 rtl:rotate-180" />
+                        </Link>
+                        <a
+                          href={whatsappOrderUrl(offer.whatsappProduct)}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="inline-flex items-center gap-1.5 rounded-lg bg-brand-700 px-4 py-2 text-xs font-semibold text-white transition-colors hover:bg-brand-800"
+                        >
+                          <MessageCircle className="h-3.5 w-3.5" />
+                          {t('offers.order')}
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <p className="mt-6 text-xs text-gray-400">{t('offers.disclaimer')}</p>
+          </div>
+
+          <Link
+            href="/shop"
+            className="relative hidden aspect-[4/5] overflow-hidden rounded-2xl shadow-premium-lg lg:block"
+          >
+            <AppImage
+              src={PAGE_IMAGES.weeklyOffersBanner}
+              alt=""
+              fill
+              className="object-cover transition-transform duration-500 hover:scale-105"
+              sizes="(max-width: 1024px) 0px, 640px"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-brand-950/50 via-transparent to-transparent" />
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..3fdacaf
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,179 @@
+'use client';
+
+import Link from 'next/link';
+import { ShieldCheck, Leaf, Award, Phone, Mail, MapPin, Facebook, Instagram, MessageCircle } from 'lucide-react';
+import { useTranslation } from '@/hooks/useTranslation';
+import Logo from '@/components/ui/Logo';
+import {
+  SITE_PHONE_DISPLAY,
+  SITE_ADDRESS,
+  SITE_HOURS,
+  SITE_EMAIL,
+  FACEBOOK_URL,
+  INSTAGRAM_URL,
+  WHATSAPP_URL,
+} from '@/lib/constants';
+
+export default function Footer() {
+  const { t } = useTranslation();
+
+  const footerLinks = {
+    shop: [
+      { label: t('nav.chicken'), href: '/shop?category=chicken' },
+      { label: t('nav.beef'), href: '/shop?category=beef' },
+      { label: t('nav.lamb'), href: '/shop?category=lamb' },
+      { label: t('nav.fish'), href: '/shop?category=fish' },
+    ],
+    company: [
+      { label: t('nav.about'), href: '/about' },
+      { label: t('nav.halalCert'), href: '/about#halal' },
+      { label: t('nav.delivery'), href: '/about#delivery' },
+      { label: t('nav.contact'), href: '/about#contact' },
+    ],
+    account: [
+      { label: t('nav.myAccount'), href: '/account' },
+      { label: t('nav.orderHistory'), href: '/account#orders' },
+      { label: t('nav.wishlist'), href: '/wishlist' },
+      { label: t('nav.cart'), href: '/cart' },
+    ],
+  };
+
+  return (
+    <footer className="border-t border-gray-100 bg-brand-950 text-white">
+      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+        <div className="grid gap-12 md:grid-cols-2 lg:grid-cols-4">
+          <div>
+            <Link href="/" className="mb-4 flex items-center gap-3">
+              <Logo size="sm" className="ring-brand-700" />
+              <span className="font-display text-xl font-bold">{t('site.name')}</span>
+            </Link>
+            <p className="mb-6 text-sm leading-relaxed text-brand-200">
+              {t('footer.tagline')}
+            </p>
+            <div className="mb-6 flex flex-wrap gap-4">
+              <div className="flex items-center gap-1.5 text-xs text-gold-400">
+                <ShieldCheck className="h-4 w-4" />
+                {t('trust.halal')}
+              </div>
+              <div className="flex items-center gap-1.5 text-xs text-gold-400">
+                <Leaf className="h-4 w-4" />
+                {t('trust.fresh')}
+              </div>
+              <div className="flex items-center gap-1.5 text-xs text-gold-400">
+                <Award className="h-4 w-4" />
+                {t('trust.premium')}
+              </div>
+            </div>
+            <div className="flex gap-3">
+              <a
+                href={FACEBOOK_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={t('social.facebook')}
+                className="rounded-lg bg-brand-800 p-2.5 text-brand-200 transition-colors hover:bg-brand-700 hover:text-white"
+              >
+                <Facebook className="h-4 w-4" />
+              </a>
+              <a
+                href={INSTAGRAM_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={t('social.instagram')}
+                className="rounded-lg bg-brand-800 p-2.5 text-brand-200 transition-colors hover:bg-brand-700 hover:text-white"
+              >
+                <Instagram className="h-4 w-4" />
+              </a>
+              <a
+                href={WHATSAPP_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={t('social.whatsapp')}
+                className="rounded-lg bg-brand-800 p-2.5 text-brand-200 transition-colors hover:bg-brand-700 hover:text-white"
+              >
+                <MessageCircle className="h-4 w-4" />
+              </a>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gold-400">
+              {t('footer.shop')}
+            </h3>
+            <ul className="space-y-2">
+              {footerLinks.shop.map((link) => (
+                <li key={link.href}>
+                  <Link
+                    href={link.href}
+                    className="text-sm text-brand-200 transition-colors hover:text-white"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gold-400">
+              {t('footer.company')}
+            </h3>
+            <ul className="space-y-2">
+              {footerLinks.company.map((link) => (
+                <li key={link.href}>
+                  <Link
+                    href={link.href}
+                    className="text-sm text-brand-200 transition-colors hover:text-white"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gold-400">
+              {t('footer.contact')}
+            </h3>
+            <ul className="space-y-3">
+              <li className="flex items-center gap-2 text-sm text-brand-200">
+                <Phone className="h-4 w-4 text-gold-400" />
+                <a href={`tel:${SITE_PHONE_DISPLAY.replace(/\s/g, '')}`} className="hover:text-white">
+                  {SITE_PHONE_DISPLAY}
+                </a>
+              </li>
+              <li className="flex items-center gap-2 text-sm text-brand-200">
+                <Mail className="h-4 w-4 text-gold-400" />
+                <a href={`mailto:${SITE_EMAIL}`} className="hover:text-white">
+                  {SITE_EMAIL}
+                </a>
+              </li>
+              <li className="flex items-start gap-2 text-sm text-brand-200">
+                <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-gold-400" />
+                <span>
+                  {SITE_ADDRESS}
+                  <br />
+                  {t('footer.hours', { hours: SITE_HOURS })}
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-brand-800 pt-8 sm:flex-row">
+          <p className="text-xs text-brand-300">
+            &copy; {new Date().getFullYear()} {t('site.name')}. {t('footer.rights')}
+          </p>
+          <div className="flex gap-6 text-xs text-brand-300">
+            <Link href="/about#privacy" className="hover:text-white">
+              {t('nav.privacy')}
+            </Link>
+            <Link href="/about#terms" className="hover:text-white">
+              {t('nav.terms')}
+            </Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
\ No newline at end of file
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
new file mode 100644
index 0000000..ee3692e
--- /dev/null
+++ b/src/components/layout/Header.tsx
@@ -0,0 +1,132 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { ShoppingCart, Heart, User, Menu, X, Search } from 'lucide-react';
+import { useCart } from '@/presentation/hooks/useCart';
+import { useWishlist } from '@/presentation/hooks/useWishlist';
+import { useAuth } from '@/presentation/hooks/useAuth';
+import { useTranslation } from '@/hooks/useTranslation';
+import Logo from '@/components/ui/Logo';
+import { SITE_LOCATION } from '@/lib/constants';
+
+export default function Header() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const { summary } = useCart();
+  const { items: wishlistItems } = useWishlist();
+  const { isAuthenticated } = useAuth();
+  const cartCount = summary.itemCount;
+  const wishlistCount = wishlistItems.length;
+  const { t } = useTranslation();
+
+  const navLinks = [
+    { href: '/shop', label: t('nav.shop') },
+    { href: '/shop?category=chicken', label: t('nav.chicken') },
+    { href: '/shop?category=beef', label: t('nav.beef') },
+    { href: '/shop?category=lamb', label: t('nav.lamb') },
+    { href: '/shop?category=fish', label: t('nav.fish') },
+    { href: '/about', label: t('nav.about') },
+    { href: '/about#contact', label: t('nav.contact') },
+  ];
+
+  return (
+    <header className="border-b border-cream-300/80 bg-cream-50/95 backdrop-blur-md">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex h-16 items-center justify-between lg:h-20">
+          <Link href="/" className="flex items-center gap-3">
+            <Logo size="sm" />
+            <div className="hidden sm:block">
+              <span className="font-display text-xl font-bold text-brand-800">
+                {t('site.name')}
+              </span>
+              <p className="text-[10px] font-medium uppercase tracking-widest text-brand-600">
+                {SITE_LOCATION}
+              </p>
+            </div>
+          </Link>
+
+          <nav className="hidden items-center gap-8 lg:flex">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className="text-sm font-medium text-gray-600 transition-colors hover:text-brand-700"
+              >
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+
+          <div className="flex items-center gap-1 sm:gap-2">
+            <Link
+              href="/shop?q="
+              className="hidden rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-brand-700 sm:block"
+              aria-label={t('nav.searchProducts')}
+            >
+              <Search className="h-5 w-5" />
+            </Link>
+
+            <Link
+              href="/wishlist"
+              className="relative rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-brand-700"
+              aria-label={t('nav.wishlist')}
+            >
+              <Heart className="h-5 w-5" />
+              {wishlistCount > 0 && (
+                <span className="absolute -end-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-gold-500 text-[10px] font-bold text-white">
+                  {wishlistCount}
+                </span>
+              )}
+            </Link>
+
+            <Link
+              href="/cart"
+              className="relative rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-brand-700"
+              aria-label={t('nav.cart')}
+            >
+              <ShoppingCart className="h-5 w-5" />
+              {cartCount > 0 && (
+                <span className="absolute -end-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-brand-700 text-[10px] font-bold text-white">
+                  {cartCount}
+                </span>
+              )}
+            </Link>
+
+            <Link
+              href={isAuthenticated ? '/account' : '/login'}
+              className="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-brand-700"
+              aria-label={t('nav.account')}
+            >
+              <User className="h-5 w-5" />
+            </Link>
+
+            <button
+              className="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 lg:hidden"
+              onClick={() => setMobileOpen(!mobileOpen)}
+              aria-label={t('nav.toggleMenu')}
+            >
+              {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {mobileOpen && (
+        <div className="border-t border-gray-100 bg-white lg:hidden">
+          <nav className="flex flex-col px-4 py-4">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className="rounded-lg px-4 py-3 text-sm font-medium text-gray-600 transition-colors hover:bg-brand-50 hover:text-brand-700"
+                onClick={() => setMobileOpen(false)}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      )}
+    </header>
+  );
+}
\ No newline at end of file
diff --git a/src/components/layout/LanguageBanner.tsx b/src/components/layout/LanguageBanner.tsx
new file mode 100644
index 0000000..c5f78cd
--- /dev/null
+++ b/src/components/layout/LanguageBanner.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import { Globe } from 'lucide-react';
+import { LOCALES, Locale } from '@/i18n/types';
+import { usesArabicScript } from '@/i18n';
+import { useLocaleStore } from '@/store/locale';
+import { useTranslation } from '@/hooks/useTranslation';
+import { cn } from '@/lib/utils';
+
+export default function LanguageBanner() {
+  const { locale, setLocale } = useLocaleStore();
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className="border-b border-brand-800 bg-brand-950 text-white"
+      role="navigation"
+      aria-label={t('nav.language')}
+    >
+      <div className="mx-auto flex max-w-7xl flex-col items-center gap-2 px-4 py-2 sm:flex-row sm:justify-between sm:px-6 lg:px-8">
+        <div className="flex items-center gap-2 text-xs font-medium text-brand-200">
+          <Globe className="h-3.5 w-3.5 text-gold-400" aria-hidden />
+          <span>{t('languageBanner.choose')}</span>
+        </div>
+
+        <div
+          className="flex w-full max-w-full items-center justify-start gap-1 overflow-x-auto rounded-full bg-brand-900 p-1 ring-1 ring-brand-800 sm:max-w-none sm:justify-center"
+          role="group"
+          aria-label={t('nav.language')}
+        >
+          {LOCALES.map((lang) => {
+            const active = locale === lang.code;
+            const scriptFont =
+              lang.code === 'ur'
+                ? 'font-[family-name:var(--font-urdu)]'
+                : lang.code === 'ar' || lang.code === 'fa'
+                  ? 'font-[family-name:var(--font-arabic)]'
+                  : '';
+            return (
+              <button
+                key={lang.code}
+                type="button"
+                onClick={() => setLocale(lang.code as Locale)}
+                aria-pressed={active}
+                aria-label={`${lang.label} (${lang.nativeLabel})`}
+                className={cn(
+                  'flex shrink-0 items-center justify-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-semibold transition-all sm:px-4 sm:py-2 sm:text-sm',
+                  active
+                    ? 'bg-gold-500 text-brand-950 shadow-gold'
+                    : 'text-brand-200 hover:bg-brand-800 hover:text-white'
+                )}
+              >
+                <span
+                  className={usesArabicScript(lang.code as Locale) ? scriptFont : ''}
+                >
+                  {lang.nativeLabel}
+                </span>
+                <span
+                  className={cn(
+                    'hidden text-[10px] font-normal uppercase tracking-wide sm:inline',
+                    active ? 'text-brand-900/70' : 'text-brand-400'
+                  )}
+                >
+                  {lang.label}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/layout/LanguageSwitcher.tsx b/src/components/layout/LanguageSwitcher.tsx
new file mode 100644
index 0000000..ccc0bf4
--- /dev/null
+++ b/src/components/layout/LanguageSwitcher.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { Globe, Check } from 'lucide-react';
+import { LOCALES, Locale } from '@/i18n/types';
+import { useLocaleStore } from '@/store/locale';
+import { useTranslation } from '@/hooks/useTranslation';
+import { cn } from '@/lib/utils';
+
+export default function LanguageSwitcher() {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const { locale, setLocale } = useLocaleStore();
+  const { t } = useTranslation();
+
+  const current = LOCALES.find((l) => l.code === locale);
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, []);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1.5 rounded-lg px-2 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-brand-700"
+        aria-label={t('nav.language')}
+      >
+        <Globe className="h-4 w-4" />
+        <span className="hidden sm:inline">{current?.nativeLabel}</span>
+      </button>
+
+      {open && (
+        <div className="absolute end-0 top-full z-50 mt-1 min-w-[10rem] overflow-hidden rounded-xl border border-gray-100 bg-white py-1 shadow-premium-lg">
+          {LOCALES.map((lang) => (
+            <button
+              key={lang.code}
+              onClick={() => {
+                setLocale(lang.code as Locale);
+                setOpen(false);
+              }}
+              className={cn(
+                'flex w-full items-center justify-between gap-3 px-4 py-2.5 text-sm transition-colors hover:bg-brand-50',
+                locale === lang.code
+                  ? 'font-semibold text-brand-700'
+                  : 'text-gray-600'
+              )}
+            >
+              <span>
+                {lang.nativeLabel}
+                <span className="ms-2 text-xs text-gray-400">{lang.label}</span>
+              </span>
+              {locale === lang.code && (
+                <Check className="h-4 w-4 shrink-0 text-brand-700" />
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/layout/LocaleAttributes.tsx b/src/components/layout/LocaleAttributes.tsx
new file mode 100644
index 0000000..e091715
--- /dev/null
+++ b/src/components/layout/LocaleAttributes.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useLocaleStore } from '@/store/locale';
+import { getHtmlLang, isRtl } from '@/i18n';
+
+export default function LocaleAttributes() {
+  const locale = useLocaleStore((s) => s.locale);
+
+  useEffect(() => {
+    document.documentElement.lang = getHtmlLang(locale);
+    document.documentElement.dir = isRtl(locale) ? 'rtl' : 'ltr';
+  }, [locale]);
+
+  return null;
+}
\ No newline at end of file
diff --git a/src/components/product/CustomizationSelector.tsx b/src/components/product/CustomizationSelector.tsx
new file mode 100644
index 0000000..c3b869c
--- /dev/null
+++ b/src/components/product/CustomizationSelector.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import { Category, ProductCustomization } from '@/types';
+import { CUT_COUNTS, CUTTING_STYLE_KEYS } from '@/lib/constants';
+import { updateMeatCustomization } from '@/lib/customization';
+import { cn } from '@/lib/utils';
+import { Scissors, Hash } from 'lucide-react';
+import { useTranslation } from '@/hooks/useTranslation';
+
+interface CustomizationSelectorProps {
+  category: Category;
+  customization: ProductCustomization;
+  onChange: (customization: ProductCustomization) => void;
+}
+
+export default function CustomizationSelector({
+  category,
+  customization,
+  onChange,
+}: CustomizationSelectorProps) {
+  const { t } = useTranslation();
+
+  if (category === 'fish') {
+    return (
+      <div className="rounded-xl border border-brand-100 bg-brand-50/50 p-4">
+        <p className="text-sm text-brand-700">{t('product.fishNote')}</p>
+      </div>
+    );
+  }
+
+  const meat = updateMeatCustomization(customization, category, {});
+  const selectedCuts = meat.cuts;
+  const selectedStyle = meat.cuttingStyle;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <div className="mb-3 flex items-center gap-2">
+          <Hash className="h-4 w-4 text-brand-700" />
+          <h3 className="text-sm font-semibold text-brand-900">
+            {t('product.howManyCuts')}
+          </h3>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {CUT_COUNTS.map((cuts) => (
+            <button
+              key={cuts}
+              type="button"
+              onClick={() =>
+                onChange(updateMeatCustomization(customization, category, { cuts }))
+              }
+              className={cn(
+                'min-w-[3.5rem] rounded-lg border-2 px-4 py-2.5 text-sm font-semibold transition-all',
+                selectedCuts === cuts
+                  ? 'border-brand-700 bg-brand-700 text-white shadow-premium'
+                  : 'border-gray-200 bg-white text-gray-700 hover:border-brand-300 hover:bg-brand-50'
+              )}
+            >
+              {cuts}
+            </button>
+          ))}
+        </div>
+        <p className="mt-2 text-xs text-gray-500">{t('product.howManyCutsHint')}</p>
+      </div>
+
+      <div>
+        <div className="mb-3 flex items-center gap-2">
+          <Scissors className="h-4 w-4 text-brand-700" />
+          <h3 className="text-sm font-semibold text-brand-900">
+            {t('product.selectCutting')}
+          </h3>
+        </div>
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+          {CUTTING_STYLE_KEYS.map((style) => (
+            <button
+              key={style}
+              type="button"
+              onClick={() =>
+                onChange(
+                  updateMeatCustomization(customization, category, { cuttingStyle: style })
+                )
+              }
+              className={cn(
+                'rounded-lg border-2 px-4 py-3 text-start text-sm font-medium transition-all',
+                selectedStyle === style
+                  ? 'border-brand-700 bg-brand-700 text-white shadow-premium'
+                  : 'border-gray-200 bg-white text-gray-700 hover:border-brand-300 hover:bg-brand-50'
+              )}
+            >
+              {t(`cutting.${style}`)}
+            </button>
+          ))}
+        </div>
+        <p className="mt-2 text-xs text-gray-500">
+          {t('product.selectCuttingHint', {
+            category: t(`categories.${category}.name`),
+          })}
+        </p>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/product/ProductCard.tsx b/src/components/product/ProductCard.tsx
new file mode 100644
index 0000000..a12913b
--- /dev/null
+++ b/src/components/product/ProductCard.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import AppImage from '@/components/ui/AppImage';
+import Link from 'next/link';
+import { Heart, ShoppingCart } from 'lucide-react';
+import { LocalizedProduct } from '@/lib/product-i18n';
+import { formatPrice, getFormatLocale } from '@/lib/utils';
+import { useWishlist } from '@/presentation/hooks/useWishlist';
+import { useTranslation } from '@/hooks/useTranslation';
+import { cn } from '@/lib/utils';
+import { products } from '@/lib/products';
+
+interface ProductCardProps {
+  product: LocalizedProduct;
+}
+
+export default function ProductCard({ product }: ProductCardProps) {
+  const { isInWishlist, toggleItem } = useWishlist();
+  const { t, locale } = useTranslation();
+  const rawProduct = products.find((p) => p.id === product.id)!;
+  const inWishlist = isInWishlist(product.id);
+
+  return (
+    <div className="card-premium group overflow-hidden">
+      <div className="relative aspect-[4/3] overflow-hidden bg-gray-50">
+        <Link href={`/product/${product.slug}`}>
+          <AppImage
+            src={product.image}
+            alt={product.name}
+            fill
+            className="object-cover transition-transform duration-500 group-hover:scale-105"
+            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 320px"
+          />
+        </Link>
+        {product.badge && (
+          <span className="absolute start-3 top-3 rounded-full bg-gold-500 px-3 py-1 text-xs font-semibold text-white shadow-gold">
+            {product.badge}
+          </span>
+        )}
+        <button
+          onClick={() => toggleItem(rawProduct)}
+          className={cn(
+            'absolute end-3 top-3 flex h-9 w-9 items-center justify-center rounded-full bg-white/90 shadow-sm backdrop-blur transition-all hover:scale-110',
+            inWishlist && 'text-red-500'
+          )}
+          aria-label={inWishlist ? t('product.removeWishlist') : t('product.addWishlist')}
+        >
+          <Heart className={cn('h-4 w-4', inWishlist && 'fill-current')} />
+        </button>
+      </div>
+
+      <div className="p-5">
+        <div className="mb-1 flex items-center gap-2">
+          <span className="text-xs font-medium uppercase tracking-wider text-brand-600">
+            {t(`categories.${product.category}.name`)}
+          </span>
+          {product.weight && (
+            <span className="text-xs text-gray-400">· {product.weight}</span>
+          )}
+        </div>
+
+        <Link href={`/product/${product.slug}`}>
+          <h3 className="mb-1 font-display text-lg font-semibold text-brand-900 transition-colors group-hover:text-brand-700">
+            {product.name}
+          </h3>
+        </Link>
+
+        <p className="mb-4 line-clamp-2 text-sm text-gray-500">{product.description}</p>
+
+        <div className="flex items-center justify-between">
+          <div>
+            <span className="text-lg font-bold text-brand-800">
+              {formatPrice(product.price, getFormatLocale(locale))}
+            </span>
+            <span className="ms-1 text-xs text-gray-400">{product.priceUnit}</span>
+          </div>
+
+          <Link
+            href={`/product/${product.slug}`}
+            className="flex h-10 w-10 items-center justify-center rounded-full bg-brand-700 text-white transition-all hover:bg-brand-800 hover:shadow-premium"
+            aria-label={t('product.viewProduct', { name: product.name })}
+          >
+            <ShoppingCart className="h-4 w-4" />
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/shop/ShopFilters.tsx b/src/components/shop/ShopFilters.tsx
new file mode 100644
index 0000000..45e9da2
--- /dev/null
+++ b/src/components/shop/ShopFilters.tsx
@@ -0,0 +1,109 @@
+'use client';
+
+import { Category, SortOption } from '@/types';
+import { cn } from '@/lib/utils';
+import { SlidersHorizontal } from 'lucide-react';
+import { useTranslation } from '@/hooks/useTranslation';
+
+interface ShopFiltersProps {
+  selectedCategory: Category | 'all';
+  onCategoryChange: (category: Category | 'all') => void;
+  sortBy: SortOption;
+  onSortChange: (sort: SortOption) => void;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  totalResults: number;
+}
+
+export default function ShopFilters({
+  selectedCategory,
+  onCategoryChange,
+  sortBy,
+  onSortChange,
+  searchQuery,
+  onSearchChange,
+  totalResults,
+}: ShopFiltersProps) {
+  const { t } = useTranslation();
+
+  const categories: { value: Category | 'all'; label: string }[] = [
+    { value: 'all', label: t('shop.all') },
+    { value: 'chicken', label: t('nav.chicken') },
+    { value: 'beef', label: t('nav.beef') },
+    { value: 'lamb', label: t('nav.lamb') },
+    { value: 'fish', label: t('nav.fish') },
+  ];
+
+  const sortOptions: { value: SortOption; label: string }[] = [
+    { value: 'featured', label: t('shop.sortFeatured') },
+    { value: 'price-asc', label: t('shop.sortPriceAsc') },
+    { value: 'price-desc', label: t('shop.sortPriceDesc') },
+    { value: 'name', label: t('shop.sortName') },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <div className="mb-3 flex items-center gap-2">
+          <SlidersHorizontal className="h-4 w-4 text-brand-700" />
+          <h2 className="text-sm font-semibold text-brand-900">{t('shop.filters')}</h2>
+        </div>
+        <p className="text-xs text-gray-500">
+          {t('shop.productsFound', { count: totalResults })}
+        </p>
+      </div>
+
+      <div>
+        <label htmlFor="search" className="label-text">
+          {t('shop.search')}
+        </label>
+        <input
+          id="search"
+          type="text"
+          placeholder={t('shop.searchPlaceholder')}
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="input-field"
+        />
+      </div>
+
+      <div>
+        <p className="label-text">{t('shop.category')}</p>
+        <div className="flex flex-wrap gap-2">
+          {categories.map((cat) => (
+            <button
+              key={cat.value}
+              onClick={() => onCategoryChange(cat.value)}
+              className={cn(
+                'rounded-full px-4 py-2 text-sm font-medium transition-all',
+                selectedCategory === cat.value
+                  ? 'bg-brand-700 text-white shadow-premium'
+                  : 'bg-gray-100 text-gray-600 hover:bg-brand-50 hover:text-brand-700'
+              )}
+            >
+              {cat.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="sort" className="label-text">
+          {t('shop.sortBy')}
+        </label>
+        <select
+          id="sort"
+          value={sortBy}
+          onChange={(e) => onSortChange(e.target.value as SortOption)}
+          className="input-field"
+        >
+          {sortOptions.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ui/AppImage.tsx b/src/components/ui/AppImage.tsx
new file mode 100644
index 0000000..9d1b32c
--- /dev/null
+++ b/src/components/ui/AppImage.tsx
@@ -0,0 +1,11 @@
+import Image, { ImageProps } from 'next/image';
+import { IMAGE_QUALITY } from '@/infrastructure/images';
+
+type AppImageProps = ImageProps & {
+  quality?: number;
+};
+
+/** Site-wide Image wrapper with consistent high quality defaults */
+export default function AppImage({ quality = IMAGE_QUALITY, ...props }: AppImageProps) {
+  return <Image quality={quality} {...props} />;
+}
\ No newline at end of file
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 0000000..e78a859
--- /dev/null
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,38 @@
+import { cn } from '@/lib/utils';
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'gold' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'primary', size = 'md', children, ...props }, ref) => {
+    const variants = {
+      primary: 'btn-primary',
+      secondary: 'btn-secondary',
+      gold: 'btn-gold',
+      ghost:
+        'inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-brand-700',
+    };
+
+    const sizes = {
+      sm: 'px-4 py-2 text-xs',
+      md: '',
+      lg: 'px-8 py-4 text-base',
+    };
+
+    return (
+      <button
+        ref={ref}
+        className={cn(variants[variant], sizes[size], className)}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+export default Button;
\ No newline at end of file
diff --git a/src/components/ui/Logo.tsx b/src/components/ui/Logo.tsx
new file mode 100644
index 0000000..ddd2768
--- /dev/null
+++ b/src/components/ui/Logo.tsx
@@ -0,0 +1,36 @@
+import AppImage from '@/components/ui/AppImage';
+import { BRAND_IMAGES } from '@/infrastructure/images';
+import { cn } from '@/lib/utils';
+
+interface LogoProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const sizes = {
+  sm: 'h-10 w-10',
+  md: 'h-12 w-12',
+  lg: 'h-20 w-20',
+};
+
+export default function Logo({ size = 'md', className }: LogoProps) {
+  return (
+    <div
+      className={cn(
+        'relative shrink-0 overflow-hidden rounded-full ring-2 ring-cream-200',
+        sizes[size],
+        className
+      )}
+    >
+      <AppImage
+        src={BRAND_IMAGES.logo}
+        alt="Kött Gård"
+        fill
+        className="object-cover"
+        sizes="(max-width: 640px) 40px, 80px"
+        priority
+        quality={95}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/domain/constants/commerce.ts b/src/domain/constants/commerce.ts
new file mode 100644
index 0000000..7cfe21f
--- /dev/null
+++ b/src/domain/constants/commerce.ts
@@ -0,0 +1,7 @@
+/**
+ * DOMAIN LAYER — Business constants (rules that could change by policy, not by framework)
+ */
+
+export const FREE_DELIVERY_THRESHOLD_SEK = 500;
+export const STANDARD_DELIVERY_FEE_SEK = 49;
+export const DEMO_PASSWORD = 'demo123';
\ No newline at end of file
diff --git a/src/domain/entities/index.ts b/src/domain/entities/index.ts
new file mode 100644
index 0000000..5139167
--- /dev/null
+++ b/src/domain/entities/index.ts
@@ -0,0 +1,100 @@
+/**
+ * DOMAIN LAYER — Entities
+ * Pure business objects. No React, no Next.js, no Zustand, no localStorage.
+ */
+
+export type Category = 'chicken' | 'beef' | 'lamb' | 'fish';
+
+export type CutCount = 4 | 8 | 10 | 12;
+
+export type CuttingStyleKey = 'nihari' | 'karahi' | 'qeema' | 'boneless' | 'steak';
+
+export type MeatCategory = 'chicken' | 'beef' | 'lamb';
+
+export interface MeatCustomization {
+  type: MeatCategory;
+  cuts: CutCount;
+  cuttingStyle: CuttingStyleKey;
+}
+
+export type ProductCustomization = MeatCustomization | { type: 'fish' };
+
+export function isMeatCustomization(
+  customization: ProductCustomization
+): customization is MeatCustomization {
+  return customization.type !== 'fish';
+}
+
+export type PriceUnitKey = 'perBird' | 'perPack' | 'perKg';
+export type BadgeKey =
+  | 'bestseller'
+  | 'chefsPick'
+  | 'premium'
+  | 'popular'
+  | 'freshCatch'
+  | 'frozen';
+
+export interface Product {
+  id: string;
+  slug: string;
+  category: Category;
+  price: number;
+  priceUnitKey: PriceUnitKey;
+  image: string;
+  images: string[];
+  badgeKey?: BadgeKey;
+  inStock: boolean;
+  featured: boolean;
+  weight?: string;
+  tags: string[];
+}
+
+export interface CartItem {
+  id: string;
+  product: Product;
+  quantity: number;
+  customization: ProductCustomization;
+  customizationLabel: string;
+}
+
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+  phone: string;
+  address: Address;
+  createdAt: string;
+}
+
+export interface Address {
+  street: string;
+  city: string;
+  state: string;
+  zip: string;
+}
+
+export interface Order {
+  id: string;
+  items: CartItem[];
+  total: number;
+  status: 'pending' | 'confirmed' | 'preparing' | 'out-for-delivery' | 'delivered';
+  createdAt: string;
+  deliveryAddress: Address;
+  paymentMethod: string;
+}
+
+export type SortOption = 'featured' | 'price-asc' | 'price-desc' | 'name';
+
+export type OfferBadgeKey = 'fresh' | 'halal';
+
+export interface WeeklyOffer {
+  id: string;
+  nameKey: string;
+  badgeKey: OfferBadgeKey;
+  price: number;
+  originalPrice?: number;
+  priceUnitKey: PriceUnitKey;
+  image: string;
+  whatsappProduct: string;
+  productSlug: string;
+}
\ No newline at end of file
diff --git a/src/domain/services/AuthDomainService.ts b/src/domain/services/AuthDomainService.ts
new file mode 100644
index 0000000..3b0c0da
--- /dev/null
+++ b/src/domain/services/AuthDomainService.ts
@@ -0,0 +1,34 @@
+import { Address, User } from '@/domain/entities';
+import { DEMO_PASSWORD } from '@/domain/constants/commerce';
+
+export interface RegisterInput {
+  name: string;
+  email: string;
+  password: string;
+  phone: string;
+  address: Address;
+}
+
+/**
+ * DOMAIN SERVICE — Authentication business rules (demo app; no real password hashing)
+ */
+export class AuthDomainService {
+  static isDemoCredentials(email: string, password: string): boolean {
+    return password === DEMO_PASSWORD;
+  }
+
+  static createUser(data: RegisterInput): User {
+    return {
+      id: `user-${Date.now()}`,
+      name: data.name,
+      email: data.email,
+      phone: data.phone,
+      address: data.address,
+      createdAt: new Date().toISOString(),
+    };
+  }
+
+  static emailMatchesStoredUser(stored: User | null, email: string): boolean {
+    return stored !== null && stored.email === email;
+  }
+}
\ No newline at end of file
diff --git a/src/domain/services/CartDomainService.ts b/src/domain/services/CartDomainService.ts
new file mode 100644
index 0000000..1caf6d4
--- /dev/null
+++ b/src/domain/services/CartDomainService.ts
@@ -0,0 +1,48 @@
+import { CartItem, Product, ProductCustomization } from '@/domain/entities';
+import { CustomizationDomainService } from './CustomizationDomainService';
+
+/**
+ * DOMAIN SERVICE — Cart business rules (pure functions, no storage)
+ */
+export class CartDomainService {
+  static calculateSubtotal(items: CartItem[]): number {
+    return items.reduce((sum, item) => sum + item.product.price * item.quantity, 0);
+  }
+
+  static calculateItemCount(items: CartItem[]): number {
+    return items.reduce((sum, item) => sum + item.quantity, 0);
+  }
+
+  static addItem(
+    items: CartItem[],
+    product: Product,
+    customization: ProductCustomization,
+    customizationLabel: string,
+    quantity = 1
+  ): CartItem[] {
+    const id = CustomizationDomainService.getCartItemKey(product.id, customization);
+    const existing = items.find((item) => item.id === id);
+
+    if (existing) {
+      return items.map((item) =>
+        item.id === id ? { ...item, quantity: item.quantity + quantity } : item
+      );
+    }
+
+    return [
+      ...items,
+      { id, product, quantity, customization, customizationLabel },
+    ];
+  }
+
+  static removeItem(items: CartItem[], id: string): CartItem[] {
+    return items.filter((item) => item.id !== id);
+  }
+
+  static updateQuantity(items: CartItem[], id: string, quantity: number): CartItem[] {
+    if (quantity <= 0) {
+      return CartDomainService.removeItem(items, id);
+    }
+    return items.map((item) => (item.id === id ? { ...item, quantity } : item));
+  }
+}
\ No newline at end of file
diff --git a/src/domain/services/CatalogDomainService.ts b/src/domain/services/CatalogDomainService.ts
new file mode 100644
index 0000000..383beee
--- /dev/null
+++ b/src/domain/services/CatalogDomainService.ts
@@ -0,0 +1,77 @@
+import { Category, Product, SortOption } from '@/domain/entities';
+
+export type CategoryFilter = Category | 'all';
+
+export interface FilterProductsInput {
+  products: Product[];
+  category: CategoryFilter;
+  searchQuery: string;
+  sortBy: SortOption;
+  /** Resolved display names for search (application layer provides these) */
+  searchIndex?: Array<{
+    product: Product;
+    name: string;
+    description: string;
+  }>;
+}
+
+/**
+ * DOMAIN SERVICE — Catalog filtering and sorting rules
+ */
+export class CatalogDomainService {
+  static readonly CATEGORIES: Category[] = ['chicken', 'beef', 'lamb', 'fish'];
+
+  static parseCategory(value: string | null): CategoryFilter {
+    return CatalogDomainService.CATEGORIES.includes(value as Category)
+      ? (value as Category)
+      : 'all';
+  }
+
+  static filterAndSort(input: FilterProductsInput): Product[] {
+    let result = [...input.products];
+
+    if (input.category !== 'all') {
+      result = result.filter((p) => p.category === input.category);
+    }
+
+    const query = input.searchQuery.trim().toLowerCase();
+    if (query && input.searchIndex) {
+      const matchingIds = new Set(
+        input.searchIndex
+          .filter(
+            (entry) =>
+              entry.name.toLowerCase().includes(query) ||
+              entry.description.toLowerCase().includes(query) ||
+              entry.product.tags.some((tag) => tag.includes(query))
+          )
+          .map((entry) => entry.product.id)
+      );
+      result = result.filter((p) => matchingIds.has(p.id));
+    }
+
+    switch (input.sortBy) {
+      case 'price-asc':
+        result.sort((a, b) => a.price - b.price);
+        break;
+      case 'price-desc':
+        result.sort((a, b) => b.price - a.price);
+        break;
+      case 'name':
+        if (input.searchIndex) {
+          const nameMap = new Map(
+            input.searchIndex.map((e) => [e.product.id, e.name])
+          );
+          result.sort((a, b) =>
+            (nameMap.get(a.id) ?? '').localeCompare(nameMap.get(b.id) ?? '')
+          );
+        }
+        break;
+      case 'featured':
+      default:
+        result.sort((a, b) => (b.featured ? 1 : 0) - (a.featured ? 1 : 0));
+        break;
+    }
+
+    return result;
+  }
+}
\ No newline at end of file
diff --git a/src/domain/services/CustomizationDomainService.ts b/src/domain/services/CustomizationDomainService.ts
new file mode 100644
index 0000000..07f8a11
--- /dev/null
+++ b/src/domain/services/CustomizationDomainService.ts
@@ -0,0 +1,72 @@
+import {
+  Category,
+  MeatCustomization,
+  ProductCustomization,
+} from '@/domain/entities';
+
+export type Translator = (
+  path: string,
+  params?: Record<string, string | number>
+) => string;
+
+/**
+ * DOMAIN SERVICE — Product customization rules
+ */
+export class CustomizationDomainService {
+  static getDefaultCustomization(category: Category): ProductCustomization {
+    if (category === 'fish') {
+      return { type: 'fish' };
+    }
+    return {
+      type: category,
+      cuts: 8,
+      cuttingStyle: 'karahi',
+    };
+  }
+
+  static getCustomizationKey(customization: ProductCustomization): string {
+    if (customization.type === 'fish') {
+      return 'standard';
+    }
+    return `cuts-${customization.cuts}::${customization.cuttingStyle}`;
+  }
+
+  static getCustomizationLabel(
+    customization: ProductCustomization,
+    t: Translator
+  ): string {
+    if (customization.type === 'fish') {
+      return t('product.standardCut');
+    }
+    return t('product.cutsAndStyle', {
+      cuts: customization.cuts,
+      style: t(`cutting.${customization.cuttingStyle}`),
+    });
+  }
+
+  static getCartItemKey(
+    productId: string,
+    customization: ProductCustomization
+  ): string {
+    return `${productId}::${CustomizationDomainService.getCustomizationKey(customization)}`;
+  }
+
+  static updateMeatCustomization(
+    current: ProductCustomization,
+    category: Category,
+    update: Partial<Pick<MeatCustomization, 'cuts' | 'cuttingStyle'>>
+  ): MeatCustomization {
+    const base =
+      current.type !== 'fish' && current.type === category
+        ? current
+        : (CustomizationDomainService.getDefaultCustomization(
+            category
+          ) as MeatCustomization);
+
+    return {
+      type: category as MeatCustomization['type'],
+      cuts: update.cuts ?? base.cuts,
+      cuttingStyle: update.cuttingStyle ?? base.cuttingStyle,
+    };
+  }
+}
\ No newline at end of file
diff --git a/src/domain/services/DeliveryFeeService.ts b/src/domain/services/DeliveryFeeService.ts
new file mode 100644
index 0000000..36bef6b
--- /dev/null
+++ b/src/domain/services/DeliveryFeeService.ts
@@ -0,0 +1,21 @@
+import {
+  FREE_DELIVERY_THRESHOLD_SEK,
+  STANDARD_DELIVERY_FEE_SEK,
+} from '@/domain/constants/commerce';
+
+/**
+ * DOMAIN SERVICE — Delivery pricing rules (single source of truth)
+ */
+export class DeliveryFeeService {
+  static calculateDeliveryFee(subtotal: number): number {
+    return subtotal > FREE_DELIVERY_THRESHOLD_SEK ? 0 : STANDARD_DELIVERY_FEE_SEK;
+  }
+
+  static calculateGrandTotal(subtotal: number): number {
+    return subtotal + DeliveryFeeService.calculateDeliveryFee(subtotal);
+  }
+
+  static isFreeDelivery(subtotal: number): boolean {
+    return subtotal > FREE_DELIVERY_THRESHOLD_SEK;
+  }
+}
\ No newline at end of file
diff --git a/src/domain/services/OrderDomainService.ts b/src/domain/services/OrderDomainService.ts
new file mode 100644
index 0000000..cb5da09
--- /dev/null
+++ b/src/domain/services/OrderDomainService.ts
@@ -0,0 +1,33 @@
+import { Address, CartItem, Order } from '@/domain/entities';
+import { DeliveryFeeService } from './DeliveryFeeService';
+import { CartDomainService } from './CartDomainService';
+
+export interface CreateOrderInput {
+  items: CartItem[];
+  deliveryAddress: Address;
+  paymentMethod: string;
+}
+
+/**
+ * DOMAIN SERVICE — Order creation rules
+ */
+export class OrderDomainService {
+  static generateOrderId(): string {
+    return `KG-${Date.now().toString(36).toUpperCase()}`;
+  }
+
+  static createOrder(input: CreateOrderInput): Order {
+    const subtotal = CartDomainService.calculateSubtotal(input.items);
+    const total = DeliveryFeeService.calculateGrandTotal(subtotal);
+
+    return {
+      id: OrderDomainService.generateOrderId(),
+      items: [...input.items],
+      total,
+      status: 'confirmed',
+      createdAt: new Date().toISOString(),
+      deliveryAddress: input.deliveryAddress,
+      paymentMethod: input.paymentMethod,
+    };
+  }
+}
\ No newline at end of file
diff --git a/src/hooks/useTranslation.ts b/src/hooks/useTranslation.ts
new file mode 100644
index 0000000..ab42fc0
--- /dev/null
+++ b/src/hooks/useTranslation.ts
@@ -0,0 +1,13 @@
+'use client';
+
+import { useMemo } from 'react';
+import { createTranslator } from '@/i18n';
+import { useLocaleStore } from '@/store/locale';
+
+export function useTranslation() {
+  const locale = useLocaleStore((s) => s.locale);
+
+  const t = useMemo(() => createTranslator(locale), [locale]);
+
+  return { t, locale };
+}
\ No newline at end of file
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
new file mode 100644
index 0000000..2352c55
--- /dev/null
+++ b/src/i18n/index.ts
@@ -0,0 +1,66 @@
+import { Locale, TranslationDict } from './types';
+import { en } from './locales/en';
+import { sv } from './locales/sv';
+import { ur } from './locales/ur';
+import { ar } from './locales/ar';
+import { fa } from './locales/fa';
+import { tr } from './locales/tr';
+
+const dictionaries: Record<Locale, TranslationDict> = {
+  en,
+  sv,
+  ur,
+  ar,
+  fa,
+  tr,
+};
+
+function resolve(obj: TranslationDict, path: string): string {
+  const keys = path.split('.');
+  let current: string | TranslationDict = obj;
+
+  for (const key of keys) {
+    if (typeof current !== 'object' || current === null || !(key in current)) {
+      return path;
+    }
+    current = current[key];
+  }
+
+  return typeof current === 'string' ? current : path;
+}
+
+export function createTranslator(locale: Locale) {
+  const dict = dictionaries[locale] ?? dictionaries.en;
+
+  return function t(path: string, params?: Record<string, string | number>): string {
+    let text = resolve(dict, path);
+
+    if (params) {
+      Object.entries(params).forEach(([key, value]) => {
+        text = text.replace(new RegExp(`\\{${key}\\}`, 'g'), String(value));
+      });
+    }
+
+    return text;
+  };
+}
+
+export function isRtl(locale: Locale): boolean {
+  return locale === 'ur' || locale === 'ar' || locale === 'fa';
+}
+
+export function getHtmlLang(locale: Locale): string {
+  const map: Record<Locale, string> = {
+    en: 'en',
+    sv: 'sv',
+    ur: 'ur',
+    ar: 'ar',
+    fa: 'fa',
+    tr: 'tr',
+  };
+  return map[locale];
+}
+
+export function usesArabicScript(locale: Locale): boolean {
+  return locale === 'ur' || locale === 'ar' || locale === 'fa';
+}
\ No newline at end of file
diff --git a/src/i18n/locales/ar.ts b/src/i18n/locales/ar.ts
new file mode 100644
index 0000000..b872d5c
--- /dev/null
+++ b/src/i18n/locales/ar.ts
@@ -0,0 +1,466 @@
+import { TranslationDict } from '../types';
+
+export const ar: TranslationDict = {
+  site: {
+    name: 'كوت غارد',
+    tagline: 'حلال فاخر',
+    description:
+      'توصيل لحوم حلال فاخرة 100%. دجاج ولحم بقر وخروف طازج؛ سمك ومأكولات بحرية مجمدة فقط — مُحضّر حسب تفضيلاتك ويُوصَل إلى باب منزلك.',
+    metaTitle: 'توصيل لحوم حلال فاخرة',
+    initials: 'KG',
+    email: 'hello@kottgard.se',
+    demoEmail: 'demo@kottgard.se',
+  },
+  nav: {
+    shop: 'المتجر',
+    chicken: 'الدجاج',
+    beef: 'لحم البقر',
+    lamb: 'لحم الخروف',
+    fish: 'سمك مجمد',
+    about: 'من نحن',
+    halalCert: 'شهادة الحلال',
+    delivery: 'معلومات التوصيل',
+    contact: 'اتصل بنا',
+    myAccount: 'حسابي',
+    orderHistory: 'سجل الطلبات',
+    wishlist: 'قائمة الأمنيات',
+    cart: 'سلة التسوق',
+    privacy: 'سياسة الخصوصية',
+    terms: 'شروط الخدمة',
+    searchProducts: 'البحث عن المنتجات',
+    toggleMenu: 'فتح القائمة',
+    account: 'الحساب',
+    language: 'اللغة',
+  },
+  languageBanner: {
+    choose: 'اختر لغتك',
+  },
+  hero: {
+    badge: 'حلال معتمد 100%',
+    taglineShort: 'نقاء طبيعي',
+    title: 'لحوم حلال فاخرة',
+    titleHighlight: '',
+    titleEnd: '',
+    subtitleShort: 'طازج. جودة. موثوق.',
+    subtitle:
+      'معتمد حلال · طازج يومياً · توصيل منزلي · مفتوح كل يوم',
+    hours: 'مفتوح كل يوم {hours}',
+    location: 'Tingvallavägen 11, Märsta',
+    shopNow: 'تصفح مجموعتنا',
+    browseChicken: 'تصفح الدجاج',
+    whatsapp: 'اطلب عبر واتساب',
+  },
+  aboutPreview: {
+    label: 'من نحن',
+    title: 'أفضل جزار في ميرستا',
+    p1: 'كوت غارد أكثر من جزار — نحن وعد بالجودة. جميع لحومنا معتمدة حلال 100% وتُوصَل طازجة كل يوم.',
+    p2: 'نستورد لحم الخروف من أيرلندا ونيوزيلندا، والدجاج ولحم البقر من منتجين موثوقين، ونساعدك في اختيار القطعة المناسبة للعشاء أو الاحتفالات أو الشواء الأحد.',
+    p3: 'زرنا في Tingvallavägen، أخبرنا بما تبحث عنه — نقطّع ونغلّف حسب مواصفاتك.',
+    statHalal: '100%',
+    statHalalLabel: 'معتمد حلال',
+    statDays: '7 أيام',
+    statDaysLabel: 'مفتوح أسبوعياً',
+    statDelivery: 'يومياً',
+    statDeliveryLabel: 'التوصيل',
+    statFresh: 'طازج',
+    statFreshLabel: 'كل يوم',
+    readMore: 'اقرأ المزيد عنا',
+    imageAlt: 'قطع لحم طازجة على لوح تقطيع من كوت غارد',
+  },
+  trust: {
+    halal: 'حلال 100%',
+    halalDesc: 'مصادر حلال معتمدة مع تتبع كامل والتزام بالمعايير.',
+    fresh: 'طازج يومياً',
+    freshDesc: 'يُورد طازجاً كل صباح ويُوصَل بأعلى جودة.',
+    premium: 'جودة فاخرة',
+    premiumDesc: 'قطع مختارة يدوياً من مزارع موثوقة، مُحضّرة على يد جزارين خبراء.',
+  },
+  categories: {
+    title: 'مجموعتنا',
+    subtitle: 'لحوم مختارة يدوياً — كل يوم. توصيل طازج. حلال. تقطيع حسب الطلب.',
+    shop: 'تسوق {name}',
+    chicken: {
+      name: 'الدجاج',
+      description: 'صدر فيليه، أجنحة، أفخاذ ودجاجة كاملة. طازج كل صباح.',
+    },
+    beef: {
+      name: 'لحم البقر والعجل',
+      description: 'مفروم، نخاع العظم وقطع فاخرة. تزيين عالي وجودة ثابتة.',
+    },
+    lamb: {
+      name: 'لحم الخروف',
+      description: 'كتف، رقبة، مشوي وضلوع. من أيرلندا ونيوزيلندا.',
+    },
+    fish: {
+      name: 'سمك مجمد',
+      description: 'سمك ومأكولات بحرية مجمدة فقط — معبأة بالتفريغ للمجمد.',
+    },
+  },
+  featured: {
+    label: 'مجموعة مختارة',
+    title: 'منتجات مميزة',
+    subtitle: 'أشهر قطعنا، محبوبة لدى العائلات في جميع أنحاء المدينة.',
+    viewAll: 'عرض الكل',
+  },
+  howItWorks: {
+    label: 'الطلب',
+    title: 'مدى سهولة الطلب',
+    step1Title: 'تواصل معنا',
+    step1Desc:
+      'أرسل لنا رسالة واتساب بما تريده — نرد بسرعة.',
+    step2Title: 'نؤكد طلبك',
+    step2Desc:
+      'نؤكد طلبك ونعطيك السعر ونخبرك متى يكون جاهزاً.',
+    step3Title: 'استلام أو توصيل',
+    step3Desc:
+      'استلم من المتجر في Tingvallavägen 11 أو اختر التوصيل المنزلي.',
+    step: 'الخطوة {n}',
+    whatsapp: 'اطلب عبر واتساب',
+  },
+  offers: {
+    label: 'الطلب',
+    title: 'عروض أسبوعية',
+    subtitle:
+      'نحدّث العروض بانتظام. تابعنا على وسائل التواصل الاجتماعي لأحدث الأسعار.',
+    disclaimer: 'السعر ساري حتى نفاد الكمية',
+    was: 'كان',
+    now: 'الآن',
+    order: 'اطلب',
+    viewProduct: 'عرض المنتج',
+    badge: {
+      fresh: 'طازج',
+      halal: 'حلال',
+    },
+    items: {
+      chickenWings: { name: 'أجنحة دجاج طازجة PL' },
+      lambSteak: { name: 'لحم خروف مشوي طازج أيرلندا' },
+      beefMince: { name: 'لحم بقر مفروم 5% دهن IRL' },
+    },
+  },
+  social: {
+    label: 'تابعنا',
+    title: 'تابعنا',
+    subtitle:
+      'أكثر من 1,100 متابع على فيسبوك · 249 منشوراً · تحديثات يومية',
+    facebook: 'فيسبوك',
+    instagram: 'إنستغرام',
+    whatsapp: 'واتساب',
+  },
+  contact: {
+    label: 'اتصل بنا',
+    title: 'زرنا',
+    addressLabel: 'العنوان',
+    phoneLabel: 'الهاتف',
+    hoursLabel: 'ساعات العمل',
+    hoursValue: 'كل يوم: {hours}',
+    writeUs: 'راسلنا',
+    callUs: 'اتصل بنا',
+    openMaps: 'افتح في خرائط جوجل',
+    learnMore: 'تفاصيل الاتصال',
+  },
+  cta: {
+    title: 'هل أنت مستعد للحوم حلال فاخرة؟',
+    subtitle:
+      'اطلب اليوم واستمتع بفرق اللحوم الحلال الطازجة المُحضّرة حسب رغبتك والمُوصَلة إلى باب منزلك.',
+    button: 'تصفح مجموعتنا',
+    whatsapp: 'اطلب عبر واتساب',
+  },
+  shop: {
+    title: 'تسوق جميع المنتجات',
+    subtitle: 'لحوم حلال فاخرة، مُحضّرة حسب تفضيلاتك',
+    noProducts: 'لم يُعثر على منتجات',
+    noProductsHint: 'جرّب تعديل الفلاتر أو كلمة البحث',
+    filters: 'الفلاتر',
+    productsFound: 'تم العثور على {count} منتجاً',
+    search: 'بحث',
+    searchPlaceholder: 'البحث عن المنتجات...',
+    category: 'الفئة',
+    sortBy: 'ترتيب حسب',
+    all: 'الكل',
+    sortFeatured: 'مميز',
+    sortPriceAsc: 'السعر: من الأقل إلى الأعلى',
+    sortPriceDesc: 'السعر: من الأعلى إلى الأقل',
+    sortName: 'الاسم أ–ي',
+  },
+  product: {
+    backToShop: 'العودة إلى المتجر',
+    inStock: 'متوفر',
+    outOfStock: 'غير متوفر',
+    halalTrust: 'حلال معتمد 100% · طازج يومياً · جودة فاخرة',
+    yourSelection: 'اختيارك',
+    aboutProduct: 'عن هذا المنتج',
+    addToCart: 'أضف إلى السلة',
+    addedToCart: 'تمت الإضافة إلى السلة',
+    decreaseQty: 'تقليل الكمية',
+    increaseQty: 'زيادة الكمية',
+    removeWishlist: 'إزالة من قائمة الأمنيات',
+    addWishlist: 'إضافة إلى قائمة الأمنيات',
+    viewProduct: 'عرض {name}',
+    pieces: '{count} قطعة',
+    standardCut: 'تقطيع قياسي',
+    howManyCuts: 'كم عدد القطع التي تريدها؟',
+    howManyCutsHint: 'اختر عدد القطع لطلبك',
+    cutsAndStyle: '{cuts} قطعة · {style}',
+    selectCutting: 'اختر أسلوب التقطيع',
+    selectCuttingHint: 'جزارونا سيُحضّرون {category} بالضبط حسب التقطيع المفضل لديك',
+    fishNote:
+      'نبيع السمك المجمد فقط. كل السمك مجمد عند المصدر، معبأ احترافياً ويُباع مجمداً — احفظه في المجمد حتى وقت الطبخ.',
+  },
+  cutting: {
+    nihari: 'تقطيع نهاري',
+    karahi: 'تقطيع كراهي',
+    qeema: 'قيمة (مفروم)',
+    boneless: 'بدون عظم',
+    steak: 'تقطيع ستيك',
+  },
+  priceUnit: {
+    perBird: 'لكل دجاجة',
+    perPack: 'لكل عبوة',
+    perKg: 'لكل كيلوغرام',
+  },
+  badges: {
+    bestseller: 'الأكثر مبيعاً',
+    chefsPick: 'اختيار الشيف',
+    premium: 'فاخر',
+    popular: 'شائع',
+    freshCatch: 'صيد طازج',
+    frozen: 'مجمد',
+  },
+  products: {
+    'chicken-whole': {
+      name: 'دجاجة كاملة',
+      description: 'دجاج حلال كامل طازج من المزرعة، مثالي للشواء أو الكاري.',
+      longDescription:
+        'دجاجاتنا الكاملة من مزارع حلال معتمدة وتُوصَل بأعلى درجات الطزاجة. كل دجاجة تُختار يدوياً للجودة، بلحم طري ومعالجة نظيفة. اختر عدد القطع المفضل لديك وسنُحضّرها بالضبط كما تحتاج.',
+    },
+    'chicken-breast': {
+      name: 'صدر الدجاج',
+      description: 'صدر دجاج خالي من العظم وقليل الدهن — مثالي للشواء والوجبات الصحية.',
+      longDescription:
+        'صدر دجاج فاخر بدون عظم، مُشذّب وجاهز للطبخ. مثالي للكباب والمقليات وعشاءات الأسبوع الصحية. اختر عدد القطع واستمتع بجودة ثابتة في كل مرة.',
+    },
+    'chicken-thighs': {
+      name: 'أفخاذ الدجاج',
+      description: 'أفخاذ دجاج حلال عصيرة بنكهة غنية للكاري والشواء.',
+      longDescription:
+        'أفخاذ دجاجنا معروفة بعصارتها وعمق نكهتها. سواء كنت تُحضّر كراهي تقليدية أو شواء نهاية الأسبوع، هذه الأفخاذ تلبي توقعاتك دائماً.',
+    },
+    'chicken-wings': {
+      name: 'أجنحة الدجاج',
+      description: 'أجنحة دجاج حلال جاهزة للحفلات — للقلي أو الخبز أو الشواء.',
+      longDescription:
+        'أجنحة دجاج مقرمشة ولذيذة، مُحضّرة حلال وتُوصَل طازجة. مفضلة لدى الجميع في ليالي المباريات والتجمعات العائلية.',
+    },
+    'beef-nihari': {
+      name: 'لحم بقر للنهاري',
+      description: 'قطع لحم بقر جاهزة للطبخ البطيء، مثالية للنهاري التقليدي.',
+      longDescription:
+        'قطع لحم بقر مختارة خصيصاً للنهاري المطهو ببطء. غنية بالكولاجين والنكهة، تتفتت بجمال خلال ساعات من الغليان لتجربة أصيلة تذوب في الفم.',
+    },
+    'beef-steak': {
+      name: 'ستيك لحم بقر فاخر',
+      description: 'قطع ستيك حلال بجودة المطاعم للحصول على قشرة مثالية.',
+      longDescription:
+        'ستيكات لحم بقر فاخرة مقطوعة يدوياً من أفضل مصادر الحلال. متزينة وطرية وجاهزة للشواء أو المقلاة الحديدية. اختر أسلوب التقطيع المفضل لديك.',
+    },
+    'beef-mince': {
+      name: 'لحم بقر مفروم',
+      description: 'لحم بقر حلال مفروم طازج للكباب والبرغر والقيمة.',
+      longDescription:
+        'لحم بقر حلال مفروم ناعماً بنسبة دهن مثالية لكباب عصير وقيمة لذيذة وبرغر منزلي. يُطحن طازجاً يومياً.',
+    },
+    'beef-boneless': {
+      name: 'مكعبات لحم بقر بدون عظم',
+      description: 'مكعبات لحم بقر متعددة الاستخدامات للكراهي والبرياني واليخنات.',
+      longDescription:
+        'مكعبات لحم بقر موحدة بدون عظم مقطوعة بإتقان للأطباق السريعة. مثالية للكراهي والبلاو والمقليات حيث يهم التوحيد في الحجم.',
+    },
+    'lamb-shoulder': {
+      name: 'كتف الخروف',
+      description: 'كتف خروف غني بالنكهة للشواء البطيء والكاري.',
+      longDescription:
+        'كتف خروف حلال فاخر بتزيين جميل. مثالي للولائم المشوية ببطء والكاري الدسم والوجبات العائلية التقليدية. مُحضّر حسب التقطيع المفضل لديك.',
+    },
+    'lamb-leg': {
+      name: 'فخذ الخروف',
+      description: 'فخذ خروف طري للشواء والمناسبات الخاصة.',
+      longDescription:
+        'فخذ خروف كامل أو مقطّع من مصادر حلال معتمدة. قطعة رئيسية لاحتفالات العيد وحفلات العشاء وشواء الأحد.',
+    },
+    'lamb-chops': {
+      name: 'ضلوع الخروف',
+      description: 'ضلوع خروف فاخرة للشواء وتناول الطعام الراقي في المنزل.',
+      longDescription:
+        'ضلوع خروف حلال سميكة بطبقة دهن مثالية للشواء. جودة مطاعم، تُوصَل إلى مطبخك.',
+    },
+    'lamb-mince': {
+      name: 'لحم خروف مفروم',
+      description: 'لحم خروف حلال مفروم طازج للكباب والسمبوسة والقيمة.',
+      longDescription:
+        'لحم خروف مفروم ناعماً بنكهة غنية. أساسي لكباب السيخ وقيمة الخروف والباراثا المحشوة.',
+    },
+    'fish-salmon': {
+      name: 'فيليه سلمون أطلسي مجمد',
+      description: 'فيليه سلمون مجمد، معبأ بالتفريغ — أذِب واقلِ في المقلاة في المنزل.',
+      longDescription:
+        'فيليه سلمون أطلسي مجمد فاخر، غني بأوميغا 3. مجمد عند المصدر، منظف ومقسّم ومُغلّف بالتفريغ. احفظه مجمداً حتى وقت الطبخ.',
+    },
+    'fish-rohu': {
+      name: 'سمك روهو مجمد',
+      description: 'روهو كامل مجمد — مفضل في جنوب آسيا، يُباع مجمداً فقط.',
+      longDescription:
+        'سمك روهو مجمد، أساسي في مطبخ جنوب آسيا. مجمد عند المصدر ومعبأ للمجمد. أذِب قبل تحضير كاري السمك والوصفات التقليدية.',
+    },
+    'fish-prawns': {
+      name: 'جمبري جامبو مجمد',
+      description: 'جمبري جامبو مجمد للكاري والبرياني والشواء بعد الذوبان.',
+      longDescription:
+        'جمبري جامبو مجمد فاخر، يُباع مجمداً فقط. لحم حلو وصلب — أذِب تماماً قبل الطبخ في الكاري وأطباق التندوري.',
+    },
+    'fish-basa': {
+      name: 'فيليه باسا مجمد',
+      description: 'فيليه باسا مجمد خفيف — سهل الذوبان والطبخ لجميع أفراد العائلة.',
+      longDescription:
+        'فيليه باسا مجمد بدون عظم بنكهة خفيفة. يُباع مجمداً فقط — أذِب قبل الخبز والكاري الخفيف أو تاكو السمك.',
+    },
+  },
+  cart: {
+    title: 'سلة التسوق',
+    itemsCount: '{count} منتج في سلتك',
+    empty: 'سلتك فارغة',
+    emptyHint: 'تصفح مجموعتنا الحلال الفاخرة وأضف منتجات إلى سلتك.',
+    startShopping: 'ابدأ التسوق',
+    customization: 'التخصيص:',
+    orderSummary: 'ملخص الطلب',
+    subtotal: 'المجموع الفرعي',
+    delivery: 'التوصيل',
+    free: 'مجاني',
+    freeDeliveryHint: 'توصيل مجاني للطلبات فوق 500 كرونة',
+    total: 'الإجمالي',
+    proceedCheckout: 'متابعة الدفع',
+    continueShopping: 'متابعة التسوق',
+    removeItem: 'إزالة المنتج',
+  },
+  checkout: {
+    title: 'دفع آمن',
+    backToCart: 'العودة إلى السلة',
+    noItems: 'لا توجد منتجات للدفع',
+    goToShop: 'الذهاب إلى المتجر',
+    orderConfirmed: 'تم تأكيد الطلب!',
+    thankYou: 'شكراً لطلبك. لحومك الحلال الفاخرة قيد التحضير.',
+    orderId: 'رقم الطلب: {id}',
+    viewOrders: 'عرض الطلبات',
+    haveAccount: 'لديك حساب؟',
+    signIn: 'تسجيل الدخول',
+    fasterCheckout: 'لإتمام دفع أسرع.',
+    deliveryDetails: 'تفاصيل التوصيل',
+    fullName: 'الاسم الكامل',
+    email: 'البريد الإلكتروني',
+    phone: 'الهاتف',
+    street: 'عنوان الشارع',
+    city: 'المدينة',
+    state: 'المنطقة',
+    zip: 'الرمز البريدي',
+    payment: 'الدفع',
+    creditCard: 'بطاقة ائتمان',
+    cashOnDelivery: 'الدفع عند الاستلام',
+    cardNumber: 'رقم البطاقة',
+    expiry: 'تاريخ الانتهاء',
+    cvv: 'رمز الأمان',
+    qty: 'الكمية: {count}',
+    processing: 'جارٍ المعالجة...',
+    pay: 'ادفع {amount}',
+    secure: 'تشفير SSL آمن 256 بت',
+  },
+  auth: {
+    welcomeBack: 'مرحباً بعودتك',
+    createAccount: 'إنشاء حساب',
+    joinTagline: 'انضم إلى {name} لتجربة تسوق فاخرة',
+    signInTagline: 'سجّل الدخول إلى حسابك في {name}',
+    fullName: 'الاسم الكامل',
+    email: 'البريد الإلكتروني',
+    password: 'كلمة المرور',
+    phone: 'الهاتف',
+    street: 'عنوان الشارع',
+    city: 'المدينة',
+    state: 'المنطقة',
+    zip: 'الرمز البريدي',
+    signIn: 'تسجيل الدخول',
+    register: 'إنشاء حساب',
+    hasAccount: 'لديك حساب بالفعل؟ سجّل الدخول',
+    noAccount: 'ليس لديك حساب؟ سجّل الآن',
+    invalidCredentials: 'بريد إلكتروني أو كلمة مرور غير صحيحة. جرّب {email} / demo123',
+    demo: 'تجريبي: {email} / demo123',
+  },
+  account: {
+    title: 'حسابي',
+    welcome: 'مرحباً بعودتك، {name}',
+    memberSince: 'عضو منذ {date}',
+    myWishlist: 'قائمة أمنياتي',
+    signOut: 'تسجيل الخروج',
+    orderHistory: 'سجل الطلبات',
+    noOrders: 'لا توجد طلبات بعد',
+    startShopping: 'ابدأ التسوق',
+  },
+  wishlist: {
+    title: 'قائمة أمنياتي',
+    saved: '{count} منتج محفوظ',
+    empty: 'قائمة أمنياتك فارغة',
+    emptyHint: 'احفظ منتجاتك المفضلة لشرائها لاحقاً.',
+    browse: 'تصفح المنتجات',
+  },
+  about: {
+    title: 'عن {name}',
+    subtitle:
+      'نُقدّم لحوماً حلال فاخرة 100% إلى مائدتك — طازجة ومُخصّصة ومُوصَلة بعناية.',
+    ourStory: 'قصتنا',
+    storyP1:
+      'تأسس {name} بمهمة بسيطة: جعل اللحوم الحلال الفاخرة في متناول كل عائلة، دون المساومة على الجودة أو الطزاجة أو الالتزام الديني. ندرك أنه بالنسبة للعديد من الأسر، القطعة المناسبة المُحضّرة بالطريقة الصحيحة ليست رفاهية — بل ضرورة.',
+    storyP2:
+      'من اختيار عدد قطع الدجاج إلى تحديد تقطيع النهاري أو الكراهي للحم البقر والخروف، نضع التخصيص في صميم كل طلب. جزارونا الخبراء يُحضّرون كل طلب يدوياً، وتوصيلنا المُتحكّم بدرجة الحرارة يضمن وصول لحومك طازجة كما يوم تقطيعها.',
+    halalTitle: 'شهادة الحلال',
+    halalDesc:
+      'كل منتج في {name} من موردين حلال معتمدين. سلسلة التوريد لدينا قابلة للتتبع بالكامل، ونلتزم بصرامة بمعايير الذبح والمعالجة الحلال. نعمل حصرياً مع مزارع ومصانع تشاركنا التزامنا بإنتاج لحوم أخلاقي ومتوافق دينياً.',
+    freshDaily: 'طازج يومياً',
+    freshDailyDesc: 'يُورد كل صباح من مزارع موثوقة',
+    premiumQuality: 'جودة فاخرة',
+    premiumQualityDesc: 'قطع مختارة يدوياً على يد جزارين خبراء',
+    fastDelivery: 'توصيل سريع',
+    fastDeliveryDesc: 'توصيل في نفس اليوم مع التحكم بدرجة الحرارة',
+    deliveryTitle: 'معلومات التوصيل',
+    delivery1: 'نوصّل ضمن دائرة نصف قطرها 25 ميلاً من منشأة المعالجة لدينا.',
+    delivery2: 'الطلبات قبل الساعة 2 مساءً مؤهلة للتوصيل في نفس اليوم.',
+    delivery3: 'توصيل مجاني للطلبات فوق 500 كرونة. رسوم التوصيل القياسية: 49 كرونة.',
+    delivery4: 'جميع المنتجات مُغلّفة بالتفريغ وتُنقل في عبوات معزولة.',
+    contactTitle: 'اتصل بنا',
+    address: 'Tingvallavägen 11, 195 31 Märsta',
+    privacyTitle: 'سياسة الخصوصية',
+    privacyText:
+      'نجمع فقط المعلومات اللازمة لمعالجة طلباتك وتحسين خدمتنا — الاسم وبيانات الاتصال وعنوان التوصيل. لا نبيع بياناتك لأطراف ثالثة. تُعالج بيانات الدفع بأمان عبر شركاء الدفع لدينا.',
+    termsTitle: 'شروط الخدمة',
+    termsText:
+      'جميع الأسعار بالكرونة السويدية وقد تتغير دون إشعار. الطلبات خاضعة للتوفر. شهادة الحلال تنطبق على جميع منتجات اللحوم. أوقات التوصيل تقديرية وقد تختلف خلال فترات الذروة.',
+  },
+  footer: {
+    tagline:
+      'توصيل لحوم حلال فاخرة 100%. قطع طازجة مُخصّصة تُوصَل إلى باب منزلك بجودة لا تُساوم.',
+    shop: 'المتجر',
+    company: 'الشركة',
+    contact: 'اتصل بنا',
+    rights: 'جميع الحقوق محفوظة.',
+    phone: '072-585 50 50',
+    hours: 'مفتوح كل يوم {hours}',
+  },
+  notFound: {
+    title: '404',
+    message: 'الصفحة غير موجودة',
+    goHome: 'العودة إلى الرئيسية',
+  },
+  orderStatus: {
+    pending: 'قيد الانتظار',
+    confirmed: 'مؤكد',
+    preparing: 'قيد التحضير',
+    'out-for-delivery': 'في الطريق للتوصيل',
+    delivered: 'تم التوصيل',
+  },
+};
\ No newline at end of file
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
new file mode 100644
index 0000000..68f0a92
--- /dev/null
+++ b/src/i18n/locales/en.ts
@@ -0,0 +1,466 @@
+import { TranslationDict } from '../types';
+
+export const en: TranslationDict = {
+  site: {
+    name: 'Kött Gård',
+    tagline: 'Premium Halal',
+    description:
+      'Premium 100% Halal meat delivery. Fresh chicken, beef, and lamb; frozen fish and seafood only — customized to your preference and delivered to your door.',
+    metaTitle: 'Premium Halal Meat Delivery',
+    initials: 'KG',
+    email: 'hello@kottgard.se',
+    demoEmail: 'demo@kottgard.se',
+  },
+  nav: {
+    shop: 'Shop',
+    chicken: 'Chicken',
+    beef: 'Beef',
+    lamb: 'Lamb',
+    fish: 'Frozen Fish',
+    about: 'About Us',
+    halalCert: 'Halal Certification',
+    delivery: 'Delivery Info',
+    contact: 'Contact',
+    myAccount: 'My Account',
+    orderHistory: 'Order History',
+    wishlist: 'Wishlist',
+    cart: 'Cart',
+    privacy: 'Privacy Policy',
+    terms: 'Terms of Service',
+    searchProducts: 'Search products',
+    toggleMenu: 'Toggle menu',
+    account: 'Account',
+    language: 'Language',
+  },
+  languageBanner: {
+    choose: 'Choose your language',
+  },
+  hero: {
+    badge: '100% Halal Certified',
+    taglineShort: 'Naturally Pure',
+    title: 'Premium Halal Meat',
+    titleHighlight: '',
+    titleEnd: '',
+    subtitleShort: 'Fresh. Quality. Reliable.',
+    subtitle:
+      'Halal certified · Fresh daily · Home delivery · Open every day',
+    hours: 'Open every day {hours}',
+    location: 'Tingvallavägen 11, Märsta',
+    shopNow: 'Browse Our Selection',
+    browseChicken: 'Browse Chicken',
+    whatsapp: 'Order via WhatsApp',
+  },
+  aboutPreview: {
+    label: 'About Us',
+    title: "Märsta's Finest Butcher Shop",
+    p1: 'Kött Gård is more than a butcher shop — we are a promise of quality. All our meat is 100% Halal certified and delivered fresh every day.',
+    p2: 'We source lamb from Ireland and New Zealand, chicken and beef from reputable producers, and help you find the right cut for dinner, celebrations, or Sunday roast.',
+    p3: 'Visit us at Tingvallavägen, tell us what you are looking for — we cut and pack to your specifications.',
+    statHalal: '100%',
+    statHalalLabel: 'Halal certified',
+    statDays: '7 days',
+    statDaysLabel: 'Open weekly',
+    statDelivery: 'Daily',
+    statDeliveryLabel: 'Delivery',
+    statFresh: 'Fresh',
+    statFreshLabel: 'Every day',
+    readMore: 'Read more about us',
+    imageAlt: 'Fresh meat cuts on a cutting board from Kött Gård',
+  },
+  trust: {
+    halal: '100% Halal',
+    halalDesc: 'Certified halal sourcing with full traceability and compliance.',
+    fresh: 'Fresh Daily',
+    freshDesc: 'Sourced fresh every morning and delivered at peak quality.',
+    premium: 'Premium Quality',
+    premiumDesc: 'Hand-selected cuts from trusted farms, prepared by expert butchers.',
+  },
+  categories: {
+    title: 'Our Selection',
+    subtitle: 'Hand-picked meat — every day. Fresh delivery. Halal. Cut to order.',
+    shop: 'Shop {name}',
+    chicken: {
+      name: 'Chicken',
+      description: 'Breast fillet, wings, drumsticks and whole chicken. Fresh every morning.',
+    },
+    beef: {
+      name: 'Beef & Veal',
+      description: 'Mince, bone marrow and premium cuts. High marbling, consistent quality.',
+    },
+    lamb: {
+      name: 'Lamb',
+      description: 'Shoulder, neck, roast and rack. From Ireland and New Zealand.',
+    },
+    fish: {
+      name: 'Frozen Fish',
+      description: 'Frozen fish and seafood only — vacuum-packed for your freezer.',
+    },
+  },
+  featured: {
+    label: 'Curated Selection',
+    title: 'Featured Products',
+    subtitle: 'Our most popular cuts, loved by families across the city.',
+    viewAll: 'View All',
+  },
+  howItWorks: {
+    label: 'Order',
+    title: 'How easy it is to order',
+    step1Title: 'Contact us',
+    step1Desc:
+      'Send us a WhatsApp message with what you want — we reply quickly.',
+    step2Title: 'We confirm',
+    step2Desc:
+      'We confirm your order, give you the price, and tell you when it is ready.',
+    step3Title: 'Pick up or delivery',
+    step3Desc:
+      'Pick up in store at Tingvallavägen 11 or choose home delivery.',
+    step: 'Step {n}',
+    whatsapp: 'Order on WhatsApp',
+  },
+  offers: {
+    label: 'Order',
+    title: 'Weekly offers',
+    subtitle:
+      'We update regularly with fresh deals. Follow us on social media for the latest prices.',
+    disclaimer: 'Price valid while supplies last',
+    was: 'Was',
+    now: 'NOW',
+    order: 'Order',
+    viewProduct: 'View product',
+    badge: {
+      fresh: 'FRESH',
+      halal: 'HALAL',
+    },
+    items: {
+      chickenWings: { name: 'Fresh chicken wings PL' },
+      lambSteak: { name: 'Fresh lamb roast Ireland' },
+      beefMince: { name: 'Beef mince 5% fat IRL' },
+    },
+  },
+  social: {
+    label: 'Follow us',
+    title: 'Follow us',
+    subtitle:
+      '1,100+ followers on Facebook · 249 posts · Daily updates',
+    facebook: 'Facebook',
+    instagram: 'Instagram',
+    whatsapp: 'WhatsApp',
+  },
+  contact: {
+    label: 'Contact',
+    title: 'Visit us',
+    addressLabel: 'Address',
+    phoneLabel: 'Phone',
+    hoursLabel: 'Opening hours',
+    hoursValue: 'Every day: {hours}',
+    writeUs: 'Message us',
+    callUs: 'Call us',
+    openMaps: 'Open in Google Maps',
+    learnMore: 'Contact details',
+  },
+  cta: {
+    title: 'Ready for Premium Halal Meat?',
+    subtitle:
+      'Order today and experience the difference of truly fresh, customized halal meat delivered to your doorstep.',
+    button: 'Browse Our Selection',
+    whatsapp: 'Order on WhatsApp',
+  },
+  shop: {
+    title: 'Shop All Products',
+    subtitle: 'Premium halal meat, customized to your preference',
+    noProducts: 'No products found',
+    noProductsHint: 'Try adjusting your filters or search query',
+    filters: 'Filters',
+    productsFound: '{count} products found',
+    search: 'Search',
+    searchPlaceholder: 'Search products...',
+    category: 'Category',
+    sortBy: 'Sort By',
+    all: 'All',
+    sortFeatured: 'Featured',
+    sortPriceAsc: 'Price: Low to High',
+    sortPriceDesc: 'Price: High to Low',
+    sortName: 'Name A–Z',
+  },
+  product: {
+    backToShop: 'Back to Shop',
+    inStock: 'In Stock',
+    outOfStock: 'Out of Stock',
+    halalTrust: '100% Halal certified · Fresh daily · Premium quality',
+    yourSelection: 'Your selection',
+    aboutProduct: 'About This Product',
+    addToCart: 'Add to Cart',
+    addedToCart: 'Added to Cart',
+    decreaseQty: 'Decrease quantity',
+    increaseQty: 'Increase quantity',
+    removeWishlist: 'Remove from wishlist',
+    addWishlist: 'Add to wishlist',
+    viewProduct: 'View {name}',
+    pieces: '{count} pieces',
+    standardCut: 'Standard cut',
+    howManyCuts: 'How Many Cuts Do You Want?',
+    howManyCutsHint: 'Select the number of cuts for your order',
+    cutsAndStyle: '{cuts} cuts · {style}',
+    selectCutting: 'Select Cutting Style',
+    selectCuttingHint: 'Our butchers will prepare your {category} exactly to your preferred cut',
+    fishNote:
+      'We sell frozen fish only. All fish is frozen at source, professionally packed, and sold frozen — store in your freezer until ready to cook.',
+  },
+  cutting: {
+    nihari: 'Nihari cut',
+    karahi: 'Karahi cut',
+    qeema: 'Qeema (minced)',
+    boneless: 'Boneless',
+    steak: 'Steak cut',
+  },
+  priceUnit: {
+    perBird: 'per bird',
+    perPack: 'per pack',
+    perKg: 'per kg',
+  },
+  badges: {
+    bestseller: 'Bestseller',
+    chefsPick: "Chef's Pick",
+    premium: 'Premium',
+    popular: 'Popular',
+    freshCatch: 'Fresh Catch',
+    frozen: 'Frozen',
+  },
+  products: {
+    'chicken-whole': {
+      name: 'Whole Chicken',
+      description: 'Farm-fresh whole halal chicken, perfect for roasting or curry.',
+      longDescription:
+        'Our whole chickens are sourced from certified halal farms and delivered at peak freshness. Each bird is hand-selected for quality, with tender meat and clean processing. Choose your preferred piece count and we will prepare it exactly how you need.',
+    },
+    'chicken-breast': {
+      name: 'Chicken Breast',
+      description: 'Lean, boneless chicken breast — ideal for grilling and healthy meals.',
+      longDescription:
+        'Premium boneless chicken breast, trimmed and ready to cook. Perfect for kebabs, stir-fries, and healthy weeknight dinners. Select your piece count and enjoy consistent quality every time.',
+    },
+    'chicken-thighs': {
+      name: 'Chicken Thighs',
+      description: 'Juicy halal chicken thighs with rich flavor for curries and grills.',
+      longDescription:
+        'Our chicken thighs are known for their succulence and depth of flavor. Whether you are making a traditional karahi or a weekend BBQ, these thighs deliver every time.',
+    },
+    'chicken-wings': {
+      name: 'Chicken Wings',
+      description: 'Party-ready halal chicken wings for frying, baking, or grilling.',
+      longDescription:
+        'Crispy, flavorful chicken wings prepared halal and delivered fresh. A crowd favorite for game nights and family gatherings.',
+    },
+    'beef-nihari': {
+      name: 'Beef for Nihari',
+      description: 'Slow-cook ready beef cuts, perfect for traditional nihari.',
+      longDescription:
+        'Specially selected beef cuts ideal for slow-cooked nihari. Rich in collagen and flavor, these cuts break down beautifully over hours of simmering for an authentic, melt-in-your-mouth experience.',
+    },
+    'beef-steak': {
+      name: 'Premium Beef Steak',
+      description: 'Restaurant-quality halal steak cuts for the perfect sear.',
+      longDescription:
+        'Hand-cut premium beef steaks from the finest halal sources. Marbled, tender, and ready for your grill or cast-iron pan. Choose your preferred cutting style.',
+    },
+    'beef-mince': {
+      name: 'Beef Mince',
+      description: 'Fresh halal beef mince for kebabs, burgers, and qeema.',
+      longDescription:
+        'Finely ground halal beef mince with the perfect fat ratio for juicy kebabs, flavorful qeema, and homemade burgers. Ground fresh daily.',
+    },
+    'beef-boneless': {
+      name: 'Boneless Beef Cubes',
+      description: 'Versatile boneless beef cubes for karahi, biryani, and stews.',
+      longDescription:
+        'Uniform boneless beef cubes cut to perfection for quick-cooking dishes. Ideal for karahi, pulao, and stir-fries where consistent sizing matters.',
+    },
+    'lamb-shoulder': {
+      name: 'Lamb Shoulder',
+      description: 'Rich, flavorful lamb shoulder for slow roasts and curries.',
+      longDescription:
+        'Premium halal lamb shoulder with beautiful marbling. Perfect for slow-roasted feasts, hearty curries, and traditional family meals. Customized to your preferred cut.',
+    },
+    'lamb-leg': {
+      name: 'Lamb Leg',
+      description: 'Tender lamb leg for roasts, grills, and special occasions.',
+      longDescription:
+        'Whole or portioned lamb leg from certified halal sources. A centerpiece cut for Eid celebrations, dinner parties, and Sunday roasts.',
+    },
+    'lamb-chops': {
+      name: 'Lamb Chops',
+      description: 'Premium lamb chops for grilling and fine dining at home.',
+      longDescription:
+        'Thick-cut halal lamb chops with perfect fat caps for grilling. Restaurant quality, delivered to your kitchen.',
+    },
+    'lamb-mince': {
+      name: 'Lamb Mince',
+      description: 'Fresh halal lamb mince for kebabs, samosas, and qeema.',
+      longDescription:
+        'Finely ground lamb mince with rich flavor. Essential for seekh kebabs, lamb qeema, and stuffed parathas.',
+    },
+    'fish-salmon': {
+      name: 'Frozen Atlantic Salmon Fillet',
+      description: 'Frozen salmon fillets, vacuum-packed — thaw and pan-sear at home.',
+      longDescription:
+        'Premium frozen Atlantic salmon fillets, rich in omega-3. Frozen at source, cleaned, portioned, and vacuum-sealed. Keep frozen until you are ready to cook.',
+    },
+    'fish-rohu': {
+      name: 'Frozen Rohu Fish',
+      description: 'Frozen whole rohu — a South Asian favourite, sold frozen only.',
+      longDescription:
+        'Frozen rohu fish, a staple in South Asian cuisine. Frozen at source and packed for your freezer. Thaw before preparing fish curry, fried fish, or traditional recipes.',
+    },
+    'fish-prawns': {
+      name: 'Frozen Jumbo Prawns',
+      description: 'Frozen jumbo prawns for curries, biryanis, and grills after thawing.',
+      longDescription:
+        'Premium frozen jumbo prawns, packed and sold frozen only. Sweet, firm flesh — thaw fully before cooking in curries and tandoori dishes.',
+    },
+    'fish-basa': {
+      name: 'Frozen Basa Fillet',
+      description: 'Frozen mild basa fillets — easy to thaw and cook for the whole family.',
+      longDescription:
+        'Frozen boneless basa fillets with a mild, delicate flavour. Sold frozen only — thaw before baking, light curries, or fish tacos.',
+    },
+  },
+  cart: {
+    title: 'Your Cart',
+    itemsCount: '{count} item(s) in your cart',
+    empty: 'Your cart is empty',
+    emptyHint: 'Browse our premium halal selection and add items to your cart.',
+    startShopping: 'Start Shopping',
+    customization: 'Customization:',
+    orderSummary: 'Order Summary',
+    subtotal: 'Subtotal',
+    delivery: 'Delivery',
+    free: 'Free',
+    freeDeliveryHint: 'Free delivery on orders over 500 kr',
+    total: 'Total',
+    proceedCheckout: 'Proceed to Checkout',
+    continueShopping: 'Continue Shopping',
+    removeItem: 'Remove item',
+  },
+  checkout: {
+    title: 'Secure Checkout',
+    backToCart: 'Back to Cart',
+    noItems: 'No items to checkout',
+    goToShop: 'Go to Shop',
+    orderConfirmed: 'Order Confirmed!',
+    thankYou: 'Thank you for your order. Your premium halal meat is being prepared.',
+    orderId: 'Order ID: {id}',
+    viewOrders: 'View Orders',
+    haveAccount: 'Have an account?',
+    signIn: 'Sign in',
+    fasterCheckout: 'for faster checkout.',
+    deliveryDetails: 'Delivery Details',
+    fullName: 'Full Name',
+    email: 'Email',
+    phone: 'Phone',
+    street: 'Street Address',
+    city: 'City',
+    state: 'State',
+    zip: 'ZIP Code',
+    payment: 'Payment',
+    creditCard: 'Credit Card',
+    cashOnDelivery: 'Cash on Delivery',
+    cardNumber: 'Card Number',
+    expiry: 'Expiry',
+    cvv: 'CVV',
+    qty: 'Qty: {count}',
+    processing: 'Processing...',
+    pay: 'Pay {amount}',
+    secure: 'Secure 256-bit SSL encryption',
+  },
+  auth: {
+    welcomeBack: 'Welcome Back',
+    createAccount: 'Create Account',
+    joinTagline: 'Join {name} for a premium shopping experience',
+    signInTagline: 'Sign in to your {name} account',
+    fullName: 'Full Name',
+    email: 'Email',
+    password: 'Password',
+    phone: 'Phone',
+    street: 'Street Address',
+    city: 'City',
+    state: 'State',
+    zip: 'ZIP Code',
+    signIn: 'Sign In',
+    register: 'Create Account',
+    hasAccount: 'Already have an account? Sign in',
+    noAccount: "Don't have an account? Register",
+    invalidCredentials: 'Invalid email or password. Try {email} / demo123',
+    demo: 'Demo: {email} / demo123',
+  },
+  account: {
+    title: 'My Account',
+    welcome: 'Welcome back, {name}',
+    memberSince: 'Member since {date}',
+    myWishlist: 'My Wishlist',
+    signOut: 'Sign Out',
+    orderHistory: 'Order History',
+    noOrders: 'No orders yet',
+    startShopping: 'Start Shopping',
+  },
+  wishlist: {
+    title: 'My Wishlist',
+    saved: '{count} saved item(s)',
+    empty: 'Your wishlist is empty',
+    emptyHint: 'Save your favorite products to buy them later.',
+    browse: 'Browse Products',
+  },
+  about: {
+    title: 'About {name}',
+    subtitle:
+      'Bringing premium, 100% Halal meat to your table — fresh, customized, and delivered with care.',
+    ourStory: 'Our Story',
+    storyP1:
+      '{name} was founded with a simple mission: make premium halal meat accessible to every family, without compromising on quality, freshness, or religious compliance. We understand that for many households, the right cut prepared the right way is not a luxury — it is essential.',
+    storyP2:
+      'From selecting piece counts for chicken to choosing Nihari or Karahi cuts for beef and lamb, we put customization at the heart of every order. Our expert butchers prepare each order by hand, and our temperature-controlled delivery ensures your meat arrives as fresh as the day it was cut.',
+    halalTitle: 'Halal Certification',
+    halalDesc:
+      'Every product at {name} is sourced from certified halal suppliers. Our supply chain is fully traceable, and we maintain strict compliance with halal slaughter and processing standards. We work exclusively with farms and processors that share our commitment to ethical, religiously compliant meat production.',
+    freshDaily: 'Fresh Daily',
+    freshDailyDesc: 'Sourced every morning from trusted farms',
+    premiumQuality: 'Premium Quality',
+    premiumQualityDesc: 'Hand-selected cuts by expert butchers',
+    fastDelivery: 'Fast Delivery',
+    fastDeliveryDesc: 'Temperature-controlled same-day delivery',
+    deliveryTitle: 'Delivery Information',
+    delivery1: 'We deliver within a 25-mile radius of our processing facility.',
+    delivery2: 'Orders placed before 2 PM are eligible for same-day delivery.',
+    delivery3: 'Free delivery on orders over 500 kr. Standard delivery fee: 49 kr.',
+    delivery4: 'All products are vacuum-sealed and transported in insulated packaging.',
+    contactTitle: 'Contact Us',
+    address: 'Tingvallavägen 11, 195 31 Märsta',
+    privacyTitle: 'Privacy Policy',
+    privacyText:
+      'We collect only the information needed to process your orders and improve our service — name, contact details, and delivery address. We do not sell your data to third parties. Payment details are handled securely by our payment partners.',
+    termsTitle: 'Terms of Service',
+    termsText:
+      'All prices are shown in SEK and may change without notice. Orders are subject to availability. Halal certification applies to all meat products listed. Delivery times are estimates and may vary during peak periods.',
+  },
+  footer: {
+    tagline:
+      'Premium 100% Halal meat delivery. Fresh, customized cuts delivered to your door with uncompromising quality.',
+    shop: 'Shop',
+    company: 'Company',
+    contact: 'Contact',
+    rights: 'All rights reserved.',
+    phone: '072-585 50 50',
+    hours: 'Open every day {hours}',
+  },
+  notFound: {
+    title: '404',
+    message: 'Page not found',
+    goHome: 'Go Home',
+  },
+  orderStatus: {
+    pending: 'pending',
+    confirmed: 'confirmed',
+    preparing: 'preparing',
+    'out-for-delivery': 'out for delivery',
+    delivered: 'delivered',
+  },
+};
\ No newline at end of file
diff --git a/src/i18n/locales/fa.ts b/src/i18n/locales/fa.ts
new file mode 100644
index 0000000..f68440c
--- /dev/null
+++ b/src/i18n/locales/fa.ts
@@ -0,0 +1,466 @@
+import { TranslationDict } from '../types';
+
+export const fa: TranslationDict = {
+  site: {
+    name: 'کوت گارد',
+    tagline: 'حلال ممتاز',
+    description:
+      'تحویل گوشت حلال ۱۰۰٪ ممتاز. مرغ، گوشت گاو و گوسفند تازه؛ فقط ماهی و غذای دریایی منجمد — مطابق سلیقه شما آماده و تا در منزل تحویل داده می‌شود.',
+    metaTitle: 'تحویل گوشت حلال ممتاز',
+    initials: 'KG',
+    email: 'hello@kottgard.se',
+    demoEmail: 'demo@kottgard.se',
+  },
+  nav: {
+    shop: 'فروشگاه',
+    chicken: 'مرغ',
+    beef: 'گوشت گاو',
+    lamb: 'گوشت گوسفند',
+    fish: 'ماهی منجمد',
+    about: 'درباره ما',
+    halalCert: 'گواهی حلال',
+    delivery: 'اطلاعات تحویل',
+    contact: 'تماس',
+    myAccount: 'حساب من',
+    orderHistory: 'تاریخچه سفارش‌ها',
+    wishlist: 'علاقه‌مندی‌ها',
+    cart: 'سبد خرید',
+    privacy: 'سیاست حفظ حریم خصوصی',
+    terms: 'شرایط استفاده',
+    searchProducts: 'جستجوی محصولات',
+    toggleMenu: 'باز و بسته کردن منو',
+    account: 'حساب کاربری',
+    language: 'زبان',
+  },
+  languageBanner: {
+    choose: 'زبان خود را انتخاب کنید',
+  },
+  hero: {
+    badge: '۱۰۰٪ حلال تأییدشده',
+    taglineShort: 'طبیعی و خالص',
+    title: 'گوشت حلال ممتاز',
+    titleHighlight: '',
+    titleEnd: '',
+    subtitleShort: 'تازه. باکیفیت. قابل اعتماد.',
+    subtitle:
+      'حلال تأییدشده · روزانه تازه · تحویل درب منزل · هر روز باز',
+    hours: 'هر روز باز {hours}',
+    location: 'Tingvallavägen 11, Märsta',
+    shopNow: 'مشاهده مجموعه ما',
+    browseChicken: 'مشاهده مرغ',
+    whatsapp: 'سفارش از طریق واتساپ',
+  },
+  aboutPreview: {
+    label: 'درباره ما',
+    title: 'بهترین قصابی مِرستا',
+    p1: 'کوت گارد فراتر از یک قصابی است — ما تعهد به کیفیت هستیم. تمام گوشت‌های ما ۱۰۰٪ حلال تأییدشده و هر روز تازه تحویل داده می‌شوند.',
+    p2: 'گوشت گوسفند را از ایرلند و نیوزیلند، مرغ و گوشت گاو را از تولیدکنندگان معتبر تهیه می‌کنیم و به شما کمک می‌کنیم برش مناسب شام، جشن یا کباب آخر هفته را پیدا کنید.',
+    p3: 'به ما در Tingvallavägen سر بزنید، بگویید دنبال چه هستید — ما مطابق خواسته شما برش می‌زنیم و بسته‌بندی می‌کنیم.',
+    statHalal: '۱۰۰٪',
+    statHalalLabel: 'حلال تأییدشده',
+    statDays: '۷ روز',
+    statDaysLabel: 'هفتگی باز',
+    statDelivery: 'روزانه',
+    statDeliveryLabel: 'تحویل',
+    statFresh: 'تازه',
+    statFreshLabel: 'هر روز',
+    readMore: 'بیشتر درباره ما بخوانید',
+    imageAlt: 'برش‌های تازه گوشت روی تخته برش از کوت گارد',
+  },
+  trust: {
+    halal: '۱۰۰٪ حلال',
+    halalDesc: 'تأمین حلال گواهی‌شده با ردیابی کامل و رعایت استانداردها.',
+    fresh: 'روزانه تازه',
+    freshDesc: 'هر صبح تازه تهیه و در بهترین کیفیت تحویل داده می‌شود.',
+    premium: 'کیفیت ممتاز',
+    premiumDesc: 'برش‌های دست‌چین از مزارع معتبر، آماده‌شده توسط قصابان حرفه‌ای.',
+  },
+  categories: {
+    title: 'مجموعه ما',
+    subtitle: 'گوشت دست‌چین — هر روز. تحویل تازه. حلال. برش سفارشی.',
+    shop: 'خرید {name}',
+    chicken: {
+      name: 'مرغ',
+      description: 'فیله سینه، بال، ران و مرغ کامل. هر صبح تازه.',
+    },
+    beef: {
+      name: 'گوشت گاو و گوساله',
+      description: 'چرخ‌کرده، مغز استخوان و برش‌های ممتاز. چربی‌بندی بالا، کیفیت یکنواخت.',
+    },
+    lamb: {
+      name: 'گوشت گوسفند',
+      description: 'شانه، گردن، کبابی و راسته. از ایرلند و نیوزیلند.',
+    },
+    fish: {
+      name: 'ماهی منجمد',
+      description: 'فقط ماهی و غذای دریایی منجمد — بسته‌بندی وکیوم برای فریزر.',
+    },
+  },
+  featured: {
+    label: 'انتخاب ویژه',
+    title: 'محصولات ویژه',
+    subtitle: 'محبوب‌ترین برش‌های ما که خانواده‌ها در سراسر شهر دوستشان دارند.',
+    viewAll: 'مشاهده همه',
+  },
+  howItWorks: {
+    label: 'سفارش',
+    title: 'سفارش دادن چقدر آسان است',
+    step1Title: 'با ما تماس بگیرید',
+    step1Desc:
+      'از طریق واتساپ بگویید چه می‌خواهید — سریع پاسخ می‌دهیم.',
+    step2Title: 'تأیید می‌کنیم',
+    step2Desc:
+      'سفارش شما را تأیید می‌کنیم، قیمت را اعلام می‌کنیم و زمان آماده شدن را می‌گوییم.',
+    step3Title: 'تحویل حضوری یا درب منزل',
+    step3Desc:
+      'از فروشگاه در Tingvallavägen 11 تحویل بگیرید یا تحویل درب منزل را انتخاب کنید.',
+    step: 'مرحله {n}',
+    whatsapp: 'سفارش در واتساپ',
+  },
+  offers: {
+    label: 'سفارش',
+    title: 'پیشنهادهای هفتگی',
+    subtitle:
+      'به‌طور منظم پیشنهادهای تازه اضافه می‌کنیم. برای آخرین قیمت‌ها ما را در شبکه‌های اجتماعی دنبال کنید.',
+    disclaimer: 'قیمت تا پایان موجودی معتبر است',
+    was: 'قبلاً',
+    now: 'اکنون',
+    order: 'سفارش',
+    viewProduct: 'مشاهده محصول',
+    badge: {
+      fresh: 'تازه',
+      halal: 'حلال',
+    },
+    items: {
+      chickenWings: { name: 'بال مرغ تازه PL' },
+      lambSteak: { name: 'کبابی گوسفند تازه ایرلند' },
+      beefMince: { name: 'گوشت چرخ‌کرده گاو ۵٪ چربی IRL' },
+    },
+  },
+  social: {
+    label: 'ما را دنبال کنید',
+    title: 'ما را دنبال کنید',
+    subtitle:
+      'بیش از ۱٬۱۰۰ دنبال‌کننده در فیسبوک · ۲۴۹ پست · به‌روزرسانی روزانه',
+    facebook: 'فیسبوک',
+    instagram: 'اینستاگرام',
+    whatsapp: 'واتساپ',
+  },
+  contact: {
+    label: 'تماس',
+    title: 'به ما سر بزنید',
+    addressLabel: 'آدرس',
+    phoneLabel: 'تلفن',
+    hoursLabel: 'ساعات کاری',
+    hoursValue: 'هر روز: {hours}',
+    writeUs: 'پیام دهید',
+    callUs: 'تماس بگیرید',
+    openMaps: 'باز کردن در گوگل مپ',
+    learnMore: 'جزئیات تماس',
+  },
+  cta: {
+    title: 'آماده گوشت حلال ممتاز هستید؟',
+    subtitle:
+      'امروز سفارش دهید و تفاوت گوشت حلال واقعاً تازه و سفارشی تحویل‌شده درب منزل را تجربه کنید.',
+    button: 'مشاهده مجموعه ما',
+    whatsapp: 'سفارش در واتساپ',
+  },
+  shop: {
+    title: 'همه محصولات',
+    subtitle: 'گوشت حلال ممتاز، مطابق سلیقه شما',
+    noProducts: 'محصولی یافت نشد',
+    noProductsHint: 'فیلترها یا عبارت جستجو را تغییر دهید',
+    filters: 'فیلترها',
+    productsFound: '{count} محصول یافت شد',
+    search: 'جستجو',
+    searchPlaceholder: 'جستجوی محصولات...',
+    category: 'دسته‌بندی',
+    sortBy: 'مرتب‌سازی',
+    all: 'همه',
+    sortFeatured: 'ویژه',
+    sortPriceAsc: 'قیمت: کم به زیاد',
+    sortPriceDesc: 'قیمت: زیاد به کم',
+    sortName: 'نام الف–ی',
+  },
+  product: {
+    backToShop: 'بازگشت به فروشگاه',
+    inStock: 'موجود',
+    outOfStock: 'ناموجود',
+    halalTrust: '۱۰۰٪ حلال تأییدشده · روزانه تازه · کیفیت ممتاز',
+    yourSelection: 'انتخاب شما',
+    aboutProduct: 'درباره این محصول',
+    addToCart: 'افزودن به سبد',
+    addedToCart: 'به سبد اضافه شد',
+    decreaseQty: 'کاهش تعداد',
+    increaseQty: 'افزایش تعداد',
+    removeWishlist: 'حذف از علاقه‌مندی‌ها',
+    addWishlist: 'افزودن به علاقه‌مندی‌ها',
+    viewProduct: 'مشاهده {name}',
+    pieces: '{count} تکه',
+    standardCut: 'برش استاندارد',
+    howManyCuts: 'چند برش می‌خواهید؟',
+    howManyCutsHint: 'تعداد برش‌های سفارش خود را انتخاب کنید',
+    cutsAndStyle: '{cuts} برش · {style}',
+    selectCutting: 'انتخاب نوع برش',
+    selectCuttingHint: 'قصابان ما {category} شما را دقیقاً مطابق برش دلخواهتان آماده می‌کنند',
+    fishNote:
+      'ما فقط ماهی منجمد می‌فروشیم. همه ماهی‌ها در مبدأ منجمد، بسته‌بندی حرفه‌ای و به‌صورت منجمد فروخته می‌شوند — تا زمان پخت در فریزر نگه دارید.',
+  },
+  cutting: {
+    nihari: 'برش نیهاری',
+    karahi: 'برش قراهی',
+    qeema: 'چرخ‌کرده (قیمه)',
+    boneless: 'بدون استخوان',
+    steak: 'برش استیک',
+  },
+  priceUnit: {
+    perBird: 'هر مرغ',
+    perPack: 'هر بسته',
+    perKg: 'هر کیلو',
+  },
+  badges: {
+    bestseller: 'پرفروش',
+    chefsPick: 'انتخاب سرآشپز',
+    premium: 'ممتاز',
+    popular: 'محبوب',
+    freshCatch: 'صید تازه',
+    frozen: 'منجمد',
+  },
+  products: {
+    'chicken-whole': {
+      name: 'مرغ کامل',
+      description: 'مرغ حلال تازه مزرعه‌ای، مناسب کبابی یا خورشت.',
+      longDescription:
+        'مرغ‌های کامل ما از مزارع حلال گواهی‌شده تهیه و در بهترین تازگی تحویل داده می‌شوند. هر مرغ برای کیفیت دست‌چین شده، با گوشت لطیف و فرآوری تمیز. تعداد تکه دلخواه را انتخاب کنید و ما دقیقاً مطابق نیاز شما آماده می‌کنیم.',
+    },
+    'chicken-breast': {
+      name: 'سینه مرغ',
+      description: 'سینه مرغ لخم و بدون استخوان — مناسب کباب و غذاهای سالم.',
+      longDescription:
+        'سینه مرغ بدون استخوان ممتاز، تمیز و آماده پخت. عالی برای کباب، غذاهای تفت‌دهی و شام‌های سالم هفته. تعداد تکه را انتخاب کنید و هر بار از کیفیت یکنواخت لذت ببرید.',
+    },
+    'chicken-thighs': {
+      name: 'ران مرغ',
+      description: 'ران مرغ حلال آبدار با طعم غنی برای خورشت و کباب.',
+      longDescription:
+        'ران‌های مرغ ما به آبداری و عمق طعمشان معروفند. چه قراهی سنتی درست کنید چه کباب آخر هفته، این ران‌ها همیشه عالی از آب درمی‌آیند.',
+    },
+    'chicken-wings': {
+      name: 'بال مرغ',
+      description: 'بال مرغ حلال آماده مهمانی برای سرخ‌کردن، پخت یا کباب.',
+      longDescription:
+        'بال مرغ ترد و خوش‌طعم، حلال آماده و تازه تحویل داده می‌شود. محبوب شب‌های تماشای فوتبال و دورهمی‌های خانوادگی.',
+    },
+    'beef-nihari': {
+      name: 'گوشت گاو برای نیهاری',
+      description: 'برش‌های گاو آماده پخت آهسته، مناسب نیهاری سنتی.',
+      longDescription:
+        'برش‌های ویژه گاو برای نیهاری پخت آهسته. سرشار از کلاژن و طعم، این برش‌ها در ساعت‌ها جوشیدن به تجربه‌ای اصیل و نرم در دهان تبدیل می‌شوند.',
+    },
+    'beef-steak': {
+      name: 'استیک گاو ممتاز',
+      description: 'برش‌های استیک حلال با کیفیت رستورانی برای کباب عالی.',
+      longDescription:
+        'استیک‌های گاو ممتاز دست‌برش از بهترین منابع حلال. چربی‌بندی‌دار، لطیف و آماده برای کباب یا ماهیتابه چدنی. نوع برش دلخواه را انتخاب کنید.',
+    },
+    'beef-mince': {
+      name: 'گوشت چرخ‌کرده گاو',
+      description: 'گوشت چرخ‌کرده حلال تازه برای کباب، همبرگر و قیمه.',
+      longDescription:
+        'گوشت چرخ‌کرده حلال با نسبت چربی مناسب برای کباب آبدار، قیمه خوش‌طعم و همبرگر خانگی. هر روز تازه چرخ می‌شود.',
+    },
+    'beef-boneless': {
+      name: 'تکه‌های گاو بدون استخوان',
+      description: 'تکه‌های گاو بدون استخوان همه‌کاره برای قراهی، بریانی و خورشت.',
+      longDescription:
+        'تکه‌های یکدست گاو بدون استخوان با برش دقیق برای غذاهای سریع‌پز. ایده‌آل برای قراهی، پلو و غذاهای تفت‌دهی که اندازه یکنواخت مهم است.',
+    },
+    'lamb-shoulder': {
+      name: 'شانه گوسفند',
+      description: 'شانه گوسفند پرطعم برای کبابی آهسته و خورشت.',
+      longDescription:
+        'شانه گوسفند حلال ممتاز با چربی‌بندی زیبا. مناسب مهمانی‌های کبابی آهسته، خورشت‌های مقوی و غذاهای سنتی خانوادگی. مطابق برش دلخواه شما آماده می‌شود.',
+    },
+    'lamb-leg': {
+      name: 'ران گوسفند',
+      description: 'ران گوسفند لطیف برای کبابی، مناسبت‌ها و مهمانی‌ها.',
+      longDescription:
+        'ران گوسفند کامل یا تکه‌ای از منابع حلال گواهی‌شده. برش اصلی جشن‌های عید، مهمانی‌های شام و کباب آخر هفته.',
+    },
+    'lamb-chops': {
+      name: 'دنده گوسفند',
+      description: 'دنده گوسفند ممتاز برای کباب و شام رستورانی در خانه.',
+      longDescription:
+        'دنده‌های ضخیم حلال گوسفند با لایه چربی مناسب برای کباب. کیفیت رستورانی، تحویل‌شده در آشپزخانه شما.',
+    },
+    'lamb-mince': {
+      name: 'گوشت چرخ‌کرده گوسفند',
+      description: 'گوشت چرخ‌کرده حلال تازه برای کباب، سمبوسه و قیمه.',
+      longDescription:
+        'گوشت چرخ‌کرده گوسفند با طعم غنی. ضروری برای کباب سیخی، قیمه گوسفند و پراتای پرشده.',
+    },
+    'fish-salmon': {
+      name: 'فیله سالمون اطلس منجمد',
+      description: 'فیله سالمون منجمد، بسته وکیوم — در خانه آب کنید و در ماهیتابه تفت دهید.',
+      longDescription:
+        'فیله سالمون اطلس منجمد ممتاز، سرشار از امگا-۳. در مبدأ منجمد، تمیز، تکه‌بندی و وکیوم. تا زمان پخت منجمد نگه دارید.',
+    },
+    'fish-rohu': {
+      name: 'ماهی روهو منجمد',
+      description: 'روهوی کامل منجمد — محبوب آسیای جنوبی، فقط به‌صورت منجمد.',
+      longDescription:
+        'ماهی روهو منجمد، اصلی آشپزی آسیای جنوبی. در مبدأ منجمد و برای فریزر بسته‌بندی شده. قبل از خورشت ماهی و دستورهای سنتی آب کنید.',
+    },
+    'fish-prawns': {
+      name: 'میگو جامبو منجمد',
+      description: 'میگوی جامبو منجمد برای خورشت، بریانی و کباب پس از آب شدن.',
+      longDescription:
+        'میگوی جامبو منجمد ممتاز، فقط به‌صورت منجمد فروخته می‌شود. گوشت شیرین و محکم — قبل از پخت در خورشت کاملاً آب کنید.',
+    },
+    'fish-basa': {
+      name: 'فیله باسا منجمد',
+      description: 'فیله باسای منجمد و ملایم — آب کردن و پخت آسان برای همه خانواده.',
+      longDescription:
+        'فیله باسای منجمد بدون استخوان با طعم ملایم. فقط منجمد — قبل از پخت، خورشت سبک یا تاکوی ماهی آب کنید.',
+    },
+  },
+  cart: {
+    title: 'سبد خرید شما',
+    itemsCount: '{count} قلم در سبد خرید',
+    empty: 'سبد خرید شما خالی است',
+    emptyHint: 'مجموعه حلال ممتاز ما را ببینید و به سبد اضافه کنید.',
+    startShopping: 'شروع خرید',
+    customization: 'سفارشی‌سازی:',
+    orderSummary: 'خلاصه سفارش',
+    subtotal: 'جمع جزء',
+    delivery: 'تحویل',
+    free: 'رایگان',
+    freeDeliveryHint: 'تحویل رایگان برای سفارش‌های بالای ۵۰۰ کرون',
+    total: 'جمع کل',
+    proceedCheckout: 'ادامه به پرداخت',
+    continueShopping: 'ادامه خرید',
+    removeItem: 'حذف قلم',
+  },
+  checkout: {
+    title: 'پرداخت امن',
+    backToCart: 'بازگشت به سبد',
+    noItems: 'قلمی برای پرداخت وجود ندارد',
+    goToShop: 'رفتن به فروشگاه',
+    orderConfirmed: 'سفارش تأیید شد!',
+    thankYou: 'از سفارش شما سپاسگزاریم. گوشت حلال ممتاز شما در حال آماده‌سازی است.',
+    orderId: 'شناسه سفارش: {id}',
+    viewOrders: 'مشاهده سفارش‌ها',
+    haveAccount: 'حساب کاربری دارید؟',
+    signIn: 'ورود',
+    fasterCheckout: 'برای پرداخت سریع‌تر.',
+    deliveryDetails: 'جزئیات تحویل',
+    fullName: 'نام و نام خانوادگی',
+    email: 'ایمیل',
+    phone: 'تلفن',
+    street: 'آدرس خیابان',
+    city: 'شهر',
+    state: 'استان',
+    zip: 'کد پستی',
+    payment: 'پرداخت',
+    creditCard: 'کارت اعتباری',
+    cashOnDelivery: 'پرداخت در محل',
+    cardNumber: 'شماره کارت',
+    expiry: 'تاریخ انقضا',
+    cvv: 'CVV',
+    qty: 'تعداد: {count}',
+    processing: 'در حال پردازش...',
+    pay: 'پرداخت {amount}',
+    secure: 'رمزگذاری امن SSL ۲۵۶ بیتی',
+  },
+  auth: {
+    welcomeBack: 'خوش آمدید',
+    createAccount: 'ایجاد حساب',
+    joinTagline: 'به {name} بپیوندید و تجربه خرید ممتاز داشته باشید',
+    signInTagline: 'به حساب {name} خود وارد شوید',
+    fullName: 'نام و نام خانوادگی',
+    email: 'ایمیل',
+    password: 'رمز عبور',
+    phone: 'تلفن',
+    street: 'آدرس خیابان',
+    city: 'شهر',
+    state: 'استان',
+    zip: 'کد پستی',
+    signIn: 'ورود',
+    register: 'ایجاد حساب',
+    hasAccount: 'قبلاً حساب دارید؟ وارد شوید',
+    noAccount: 'حساب ندارید؟ ثبت‌نام کنید',
+    invalidCredentials: 'ایمیل یا رمز عبور نادرست است. {email} / demo123 را امتحان کنید',
+    demo: 'نسخه آزمایشی: {email} / demo123',
+  },
+  account: {
+    title: 'حساب من',
+    welcome: 'خوش آمدید، {name}',
+    memberSince: 'عضو از {date}',
+    myWishlist: 'علاقه‌مندی‌های من',
+    signOut: 'خروج',
+    orderHistory: 'تاریخچه سفارش‌ها',
+    noOrders: 'هنوز سفارشی ندارید',
+    startShopping: 'شروع خرید',
+  },
+  wishlist: {
+    title: 'علاقه‌مندی‌های من',
+    saved: '{count} قلم ذخیره‌شده',
+    empty: 'لیست علاقه‌مندی‌های شما خالی است',
+    emptyHint: 'محصولات مورد علاقه را ذخیره کنید تا بعداً بخرید.',
+    browse: 'مشاهده محصولات',
+  },
+  about: {
+    title: 'درباره {name}',
+    subtitle:
+      'گوشت حلال ۱۰۰٪ ممتاز را با تازگی، سفارشی‌سازی و تحویل دلسوزانه به سفره شما می‌رسانیم.',
+    ourStory: 'داستان ما',
+    storyP1:
+      '{name} با هدفی ساده تأسیس شد: گوشت حلال ممتاز را برای هر خانواده در دسترس قرار دهیم، بدون کوتاه آمدن در کیفیت، تازگی یا رعایت شرعی. ما می‌دانیم برای بسیاری از خانواده‌ها، برش درست به شیوه درست، لوکس نیست — ضروری است.',
+    storyP2:
+      'از انتخاب تعداد تکه مرغ تا برش نیهاری یا قراهی برای گاو و گوسفند، سفارشی‌سازی را در قلب هر سفارش قرار داده‌ایم. قصابان حرفه‌ای ما هر سفارش را دستی آماده می‌کنند و تحویل با کنترل دما تضمین می‌کند گوشت شما به‌اندازه روز برش، تازه برسد.',
+    halalTitle: 'گواهی حلال',
+    halalDesc:
+      'هر محصول در {name} از تأمین‌کنندگان حلال گواهی‌شده تهیه می‌شود. زنجیره تأمین ما کاملاً قابل ردیابی است و رعایت دقیق استانداردهای ذبح و فرآوری حلال را حفظ می‌کنیم. فقط با مزارع و فرآورنده‌هایی کار می‌کنیم که به تولید اخلاقی و مطابق شرع متعهدند.',
+    freshDaily: 'روزانه تازه',
+    freshDailyDesc: 'هر صبح از مزارع معتبر تهیه می‌شود',
+    premiumQuality: 'کیفیت ممتاز',
+    premiumQualityDesc: 'برش‌های دست‌چین توسط قصابان حرفه‌ای',
+    fastDelivery: 'تحویل سریع',
+    fastDeliveryDesc: 'تحویل همان روز با کنترل دما',
+    deliveryTitle: 'اطلاعات تحویل',
+    delivery1: 'در شعاع ۲۵ مایلی تأسیسات فرآوری ما تحویل می‌دهیم.',
+    delivery2: 'سفارش‌های قبل از ساعت ۱۴ برای تحویل همان روز واجد شرایط‌اند.',
+    delivery3: 'تحویل رایگان برای سفارش‌های بالای ۵۰۰ کرون. هزینه تحویل استاندارد: ۴۹ کرون.',
+    delivery4: 'همه محصولات وکیوم و در بسته‌بندی عایق حمل می‌شوند.',
+    contactTitle: 'تماس با ما',
+    address: 'Tingvallavägen 11, 195 31 Märsta',
+    privacyTitle: 'سیاست حفظ حریم خصوصی',
+    privacyText:
+      'فقط اطلاعات لازم برای پردازش سفارش و بهبود خدمات را جمع‌آوری می‌کنیم — نام، اطلاعات تماس و آدرس تحویل. اطلاعات شما را به اشخاص ثالث نمی‌فروشیم. جزئیات پرداخت به‌صورت امن توسط شرکای پرداخت ما مدیریت می‌شود.',
+    termsTitle: 'شرایط استفاده',
+    termsText:
+      'همه قیمت‌ها به کرون سوئد نمایش داده می‌شوند و ممکن است بدون اطلاع قبلی تغییر کنند. سفارش‌ها منوط به موجودی است. گواهی حلال برای همه محصولات گوشتی اعمال می‌شود. زمان تحویل تخمینی است و در دوره‌های شلوغ ممکن است متفاوت باشد.',
+  },
+  footer: {
+    tagline:
+      'تحویل گوشت حلال ۱۰۰٪ ممتاز. برش‌های تازه و سفارشی با کیفیت بی‌نقص تا در منزل.',
+    shop: 'فروشگاه',
+    company: 'شرکت',
+    contact: 'تماس',
+    rights: 'تمامی حقوق محفوظ است.',
+    phone: '072-585 50 50',
+    hours: 'هر روز باز {hours}',
+  },
+  notFound: {
+    title: '۴۰۴',
+    message: 'صفحه یافت نشد',
+    goHome: 'بازگشت به خانه',
+  },
+  orderStatus: {
+    pending: 'در انتظار',
+    confirmed: 'تأییدشده',
+    preparing: 'در حال آماده‌سازی',
+    'out-for-delivery': 'در مسیر تحویل',
+    delivered: 'تحویل‌شده',
+  },
+};
\ No newline at end of file
diff --git a/src/i18n/locales/sv.ts b/src/i18n/locales/sv.ts
new file mode 100644
index 0000000..206c71a
--- /dev/null
+++ b/src/i18n/locales/sv.ts
@@ -0,0 +1,466 @@
+import { TranslationDict } from '../types';
+
+export const sv: TranslationDict = {
+  site: {
+    name: 'Kött Gård',
+    tagline: 'Premium Halal',
+    description:
+      'Premium 100 % halal köttleverans. Färskt kyckling, nötkött och lamm; endast fryst fisk och skaldjur — anpassat efter dina önskemål och levererat till din dörr.',
+    metaTitle: 'Premium Halal Köttleverans',
+    initials: 'KG',
+    email: 'hello@kottgard.se',
+    demoEmail: 'demo@kottgard.se',
+  },
+  nav: {
+    shop: 'Butik',
+    chicken: 'Kyckling',
+    beef: 'Nötkött',
+    lamb: 'Lamm',
+    fish: 'Fryst fisk',
+    about: 'Om oss',
+    halalCert: 'Halalcertifiering',
+    delivery: 'Leveransinfo',
+    contact: 'Kontakt',
+    myAccount: 'Mitt konto',
+    orderHistory: 'Orderhistorik',
+    wishlist: 'Önskelista',
+    cart: 'Varukorg',
+    privacy: 'Integritetspolicy',
+    terms: 'Användarvillkor',
+    searchProducts: 'Sök produkter',
+    toggleMenu: 'Växla meny',
+    account: 'Konto',
+    language: 'Språk',
+  },
+  languageBanner: {
+    choose: 'Välj språk',
+  },
+  hero: {
+    badge: '100 % Halal-certifierat',
+    taglineShort: 'Naturligt Rent',
+    title: 'Premium Halal Kött',
+    titleHighlight: '',
+    titleEnd: '',
+    subtitleShort: 'Färskt. Kvalitet. Tillförlitligt.',
+    subtitle:
+      'Halal-certifierat · Färskt dagligen · Hemleverans · Öppet alla dagar',
+    hours: 'Öppet alla dagar {hours}',
+    location: 'Tingvallavägen 11, Märsta',
+    shopNow: 'Se vårt sortiment',
+    browseChicken: 'Bläddra kyckling',
+    whatsapp: 'Beställ via WhatsApp',
+  },
+  aboutPreview: {
+    label: 'Om oss',
+    title: 'Märstas finaste köttbutik',
+    p1: 'Kött Gård är mer än en köttbutik — vi är ett löfte om kvalitet. Allt vårt kött är 100 % Halal-certifierat och färskt levererat varje dag.',
+    p2: 'Vi handlar lamm från Irland och Nya Zeeland, kyckling och nötkött från välrenommerade producenter, och hjälper dig hitta rätt detalj för middagen, festen eller söndagssteken.',
+    p3: 'Kom in i butiken på Tingvallavägen, prata med oss om vad du letar efter — vi styckar och packar efter dina önskemål.',
+    statHalal: '100 %',
+    statHalalLabel: 'Halal-certifierat',
+    statDays: '7 dagar',
+    statDaysLabel: 'Öppet i veckan',
+    statDelivery: 'Daglig',
+    statDeliveryLabel: 'Leverans',
+    statFresh: 'Färskt',
+    statFreshLabel: 'Varje dag',
+    readMore: 'Läs mer om oss',
+    imageAlt: 'Färska köttdetaljer på skärbräda från Kött Gård',
+  },
+  trust: {
+    halal: '100 % Halal',
+    halalDesc: 'Certifierad halal-källa med full spårbarhet och efterlevnad.',
+    fresh: 'Färskt Dagligen',
+    freshDesc: 'Hämtas färskt varje morgon och levereras i toppskick.',
+    premium: 'Premiumkvalitet',
+    premiumDesc: 'Handplockade styckningar från betrodda gårdar, förberedda av expertslaktare.',
+  },
+  categories: {
+    title: 'Vårt sortiment',
+    subtitle: 'Handplockat kött — varje dag. Färskt levererat. Halal. Styckat efter önskemål.',
+    shop: 'Handla {name}',
+    chicken: {
+      name: 'Kyckling',
+      description: 'Kycklingbröstfilé, vingar, klubba och hel kyckling. Färsk varje morgon.',
+    },
+    beef: {
+      name: 'Nötkött & Kalv',
+      description: 'Nötfärs, kalv bone marrow och premiumskär. Hög marmorering, jämn kvalitet.',
+    },
+    lamb: {
+      name: 'Lamm',
+      description: 'Lammbringa, lammhals, lammstek och lammrygg. Från Irland och Nya Zeeland.',
+    },
+    fish: {
+      name: 'Fryst fisk',
+      description: 'Endast fryst fisk och skaldjur — vakuumförpackat för frysen.',
+    },
+  },
+  featured: {
+    label: 'Utvalt Sortiment',
+    title: 'Utvalda Produkter',
+    subtitle: 'Våra mest populära styckningar, älskade av familjer i hela staden.',
+    viewAll: 'Visa alla',
+  },
+  howItWorks: {
+    label: 'Beställ',
+    title: 'Så enkelt beställer du',
+    step1Title: 'Kontakta oss',
+    step1Desc:
+      'Skicka ett meddelande på WhatsApp med vad du vill ha — vi svarar snabbt.',
+    step2Title: 'Vi bekräftar',
+    step2Desc:
+      'Vi bekräftar din beställning, ger pris och säger när den är klar.',
+    step3Title: 'Hämta eller leverans',
+    step3Desc:
+      'Hämta i butik på Tingvallavägen 11 eller välj hemleverans.',
+    step: 'Steg {n}',
+    whatsapp: 'Beställ på WhatsApp',
+  },
+  offers: {
+    label: 'Beställ',
+    title: 'Veckans erbjudanden',
+    subtitle:
+      'Vi uppdaterar löpande med färska erbjudanden. Följ oss på sociala medier för senaste priserna.',
+    disclaimer: 'Pris gäller så långt lagret räcker',
+    was: 'Före',
+    now: 'NU',
+    order: 'Beställ',
+    viewProduct: 'Visa produkt',
+    badge: {
+      fresh: 'FÄRSK',
+      halal: 'HALAL',
+    },
+    items: {
+      chickenWings: { name: 'Kycklingvingar färsk PL' },
+      lambSteak: { name: 'Lammstek färsk Ireland' },
+      beefMince: { name: 'Nötfärs 5% fett IRL' },
+    },
+  },
+  social: {
+    label: 'Följ oss',
+    title: 'Följ oss',
+    subtitle:
+      '1 100+ följare på Facebook · 249 inlägg · Dagliga uppdateringar',
+    facebook: 'Facebook',
+    instagram: 'Instagram',
+    whatsapp: 'WhatsApp',
+  },
+  contact: {
+    label: 'Kontakt',
+    title: 'Besök oss',
+    addressLabel: 'Adress',
+    phoneLabel: 'Telefon',
+    hoursLabel: 'Öppettider',
+    hoursValue: 'Alla dagar: {hours}',
+    writeUs: 'Skriv till oss',
+    callUs: 'Ring oss',
+    openMaps: 'Öppna i Google Maps',
+    learnMore: 'Kontaktuppgifter',
+  },
+  cta: {
+    title: 'Redo för Premium Halal Kött?',
+    subtitle:
+      'Beställ idag och upplev skillnaden med verkligt färskt, anpassat halal kött levererat till din dörr.',
+    button: 'Se vårt sortiment',
+    whatsapp: 'Beställ på WhatsApp',
+  },
+  shop: {
+    title: 'Alla Produkter',
+    subtitle: 'Premium halal kött, anpassat efter dina önskemål',
+    noProducts: 'Inga produkter hittades',
+    noProductsHint: 'Prova att justera dina filter eller sökfråga',
+    filters: 'Filter',
+    productsFound: '{count} produkter hittades',
+    search: 'Sök',
+    searchPlaceholder: 'Sök produkter...',
+    category: 'Kategori',
+    sortBy: 'Sortera efter',
+    all: 'Alla',
+    sortFeatured: 'Utvalda',
+    sortPriceAsc: 'Pris: Lägst till högst',
+    sortPriceDesc: 'Pris: Högst till lägst',
+    sortName: 'Namn A–Ö',
+  },
+  product: {
+    backToShop: 'Tillbaka till butiken',
+    inStock: 'I lager',
+    outOfStock: 'Slut i lager',
+    halalTrust: '100 % Halal-certifierad · Färskt dagligen · Premiumkvalitet',
+    yourSelection: 'Ditt val',
+    aboutProduct: 'Om denna produkt',
+    addToCart: 'Lägg i varukorg',
+    addedToCart: 'Tillagd i varukorg',
+    decreaseQty: 'Minska antal',
+    increaseQty: 'Öka antal',
+    removeWishlist: 'Ta bort från önskelista',
+    addWishlist: 'Lägg till i önskelista',
+    viewProduct: 'Visa {name}',
+    pieces: '{count} bitar',
+    standardCut: 'Standardstyckning',
+    howManyCuts: 'Hur Många Styckningar Vill Du Ha?',
+    howManyCutsHint: 'Välj antal styckningar för din beställning',
+    cutsAndStyle: '{cuts} styckningar · {style}',
+    selectCutting: 'Välj skärstil',
+    selectCuttingHint: 'Våra slaktare förbereder ditt {category} exakt enligt din önskade styckning',
+    fishNote:
+      'Vi säljer endast fryst fisk. All fisk är fryst vid källan, professionellt packad och säljs fryst — förvara i frysen tills du ska laga mat.',
+  },
+  cutting: {
+    nihari: 'Nihari-styckning',
+    karahi: 'Karahi-styckning',
+    qeema: 'Qeema (färs)',
+    boneless: 'Benfri',
+    steak: 'Biffstyckning',
+  },
+  priceUnit: {
+    perBird: 'per kyckling',
+    perPack: 'per förpackning',
+    perKg: 'per kg',
+  },
+  badges: {
+    bestseller: 'Bästsäljare',
+    chefsPick: 'Kockens val',
+    premium: 'Premium',
+    popular: 'Populär',
+    freshCatch: 'Färsk fångst',
+    frozen: 'Fryst',
+  },
+  products: {
+    'chicken-whole': {
+      name: 'Hel Kyckling',
+      description: 'Gårdsfärsk hel halal kyckling, perfekt för stekning eller curry.',
+      longDescription:
+        'Våra hela kycklingar kommer från certifierade halalgårdar och levereras i toppskick. Varje fågel är handplockad för kvalitet, med mört kött och ren bearbetning. Välj önskat antal bitar så förbereder vi den precis som du behöver.',
+    },
+    'chicken-breast': {
+      name: 'Kycklingbröst',
+      description: 'Magert, benfritt kycklingbröst — idealiskt för grillning och hälsosamma måltider.',
+      longDescription:
+        'Premium benfritt kycklingbröst, trimmat och redo att tillagas. Perfekt för kebab, wok och hälsosamma vardagsmiddagar. Välj antal bitar och njut av konsekvent kvalitet varje gång.',
+    },
+    'chicken-thighs': {
+      name: 'Kycklinglår',
+      description: 'Saftiga halal kycklinglår med rik smak för curry och grill.',
+      longDescription:
+        'Våra kycklinglår är kända för sin saftighet och djupa smak. Oavsett om du lagar traditionell karahi eller helg-BBQ levererar dessa lår varje gång.',
+    },
+    'chicken-wings': {
+      name: 'Kycklingvingar',
+      description: 'Festfärdiga halal kycklingvingar för stekning, bakning eller grillning.',
+      longDescription:
+        'Krispiga, smakrika kycklingvingar tillagade enligt halal och levererade färskt. En favorit för matchkvällar och familjesammankomster.',
+    },
+    'beef-nihari': {
+      name: 'Nötkött för Nihari',
+      description: 'Långkoksklara nötköttsstyckningar, perfekta för traditionell nihari.',
+      longDescription:
+        'Särskilt utvalda nötköttsstyckningar idealiska för långkokt nihari. Rika på kollagen och smak, dessa styckningar bryts ner vackert under timmar av sjudning för en autentisk, smältande upplevelse.',
+    },
+    'beef-steak': {
+      name: 'Premium Nötbiff',
+      description: 'Restaurangkvalitet halal biffstyckningar för perfekt stekyta.',
+      longDescription:
+        'Handskurna premium biffar från de finaste halal-källorna. Marmorering, mörhet och redo för din grill eller gjutjärnspanna. Välj önskad skärstil.',
+    },
+    'beef-mince': {
+      name: 'Nötfärs',
+      description: 'Färsk halal nötfärs för kebab, burgare och qeema.',
+      longDescription:
+        'Finmalen halal nötfärs med perfekt fettförhållande för saftiga kebab, smakrik qeema och hemlagade burgare. Malas färskt dagligen.',
+    },
+    'beef-boneless': {
+      name: 'Benfria Nötköttskuber',
+      description: 'Mångsidiga benfria nötköttskuber för karahi, biryani och grytor.',
+      longDescription:
+        'Enhetliga benfria nötköttskuber skurna till perfektion för snabbkokta rätter. Idealiska för karahi, pulao och wok där konsekvent storlek är viktigt.',
+    },
+    'lamb-shoulder': {
+      name: 'Lammbog',
+      description: 'Rik, smakrik lammbog för långstekning och curry.',
+      longDescription:
+        'Premium halal lammbog med vacker marmorering. Perfekt för långstekta festmåltider, rejäla curryrätter och traditionella familjemiddagar. Anpassad efter din önskade styckning.',
+    },
+    'lamb-leg': {
+      name: 'Lammlägg',
+      description: 'Mört lammlägg för stekning, grillning och speciella tillfällen.',
+      longDescription:
+        'Hela eller portionerade lammlägg från certifierade halal-källor. En centerstyckning för Eid-firanden, middagsbjudningar och söndagsstek.',
+    },
+    'lamb-chops': {
+      name: 'Lammkotletter',
+      description: 'Premium lammkotletter för grillning och finmiddag hemma.',
+      longDescription:
+        'Tjockskurna halal lammkotletter med perfekt fettlock för grillning. Restaurangkvalitet, levererad till ditt kök.',
+    },
+    'lamb-mince': {
+      name: 'Lammfärs',
+      description: 'Färsk halal lammfärs för kebab, samosas och qeema.',
+      longDescription:
+        'Finmalen lammfärs med rik smak. Nödvändig för seekh kebab, lamm qeema och fyllda parathas.',
+    },
+    'fish-salmon': {
+      name: 'Fryst atlantisk laxfilé',
+      description: 'Frysta laxfiléer, vakuumförpackade — tinas och steks hemma.',
+      longDescription:
+        'Premium frysta atlantiska laxfiléer med rikt omega-3-innehåll. Fryst vid källan, rengjord, portionerad och vakuumförpackad. Förvara fryst tills du ska laga mat.',
+    },
+    'fish-rohu': {
+      name: 'Fryst rohu-fisk',
+      description: 'Fryst hel rohu — sydasiatisk favorit, säljs endast fryst.',
+      longDescription:
+        'Fryst rohu-fisk, en stapel i sydasiatisk matlagning. Fryst vid källan och packad för din frys. Tina före fiskcurry, stekt fisk eller traditionella recept.',
+    },
+    'fish-prawns': {
+      name: 'Frysta jätteräkor',
+      description: 'Frysta jätteräkor för curry, biryani och grill efter upptining.',
+      longDescription:
+        'Premium frysta jätteräkor, packade och sålda endast frysta. Sött, fast kött — tinas helt före tillagning i curry och tandoori-rätter.',
+    },
+    'fish-basa': {
+      name: 'Fryst basa-filé',
+      description: 'Frysta milda basa-filéer — enkla att tina och laga för hela familjen.',
+      longDescription:
+        'Frysta benfria basa-filéer med mild, delikat smak. Säljs endast fryst — tina före bakning, lätta curryrätter eller fisk-tacos.',
+    },
+  },
+  cart: {
+    title: 'Din Varukorg',
+    itemsCount: '{count} artikel/artiklar i din varukorg',
+    empty: 'Din varukorg är tom',
+    emptyHint: 'Bläddra i vårt premium halal-sortiment och lägg till artiklar.',
+    startShopping: 'Börja handla',
+    customization: 'Anpassning:',
+    orderSummary: 'Ordersammanfattning',
+    subtotal: 'Delsumma',
+    delivery: 'Leverans',
+    free: 'Gratis',
+    freeDeliveryHint: 'Fri leverans på beställningar över 500 kr',
+    total: 'Totalt',
+    proceedCheckout: 'Gå till kassan',
+    continueShopping: 'Fortsätt handla',
+    removeItem: 'Ta bort artikel',
+  },
+  checkout: {
+    title: 'Säker Kassa',
+    backToCart: 'Tillbaka till varukorg',
+    noItems: 'Inga artiklar att betala',
+    goToShop: 'Gå till butiken',
+    orderConfirmed: 'Beställning bekräftad!',
+    thankYou: 'Tack för din beställning. Ditt premium halal kött förbereds.',
+    orderId: 'Order-ID: {id}',
+    viewOrders: 'Visa beställningar',
+    haveAccount: 'Har du ett konto?',
+    signIn: 'Logga in',
+    fasterCheckout: 'för snabbare utcheckning.',
+    deliveryDetails: 'Leveransuppgifter',
+    fullName: 'Fullständigt namn',
+    email: 'E-post',
+    phone: 'Telefon',
+    street: 'Gatuadress',
+    city: 'Stad',
+    state: 'Län',
+    zip: 'Postnummer',
+    payment: 'Betalning',
+    creditCard: 'Kreditkort',
+    cashOnDelivery: 'Kontant vid leverans',
+    cardNumber: 'Kortnummer',
+    expiry: 'Giltig till',
+    cvv: 'CVV',
+    qty: 'Antal: {count}',
+    processing: 'Bearbetar...',
+    pay: 'Betala {amount}',
+    secure: 'Säker 256-bitars SSL-kryptering',
+  },
+  auth: {
+    welcomeBack: 'Välkommen tillbaka',
+    createAccount: 'Skapa konto',
+    joinTagline: 'Gå med i {name} för en premium shoppingupplevelse',
+    signInTagline: 'Logga in på ditt {name}-konto',
+    fullName: 'Fullständigt namn',
+    email: 'E-post',
+    password: 'Lösenord',
+    phone: 'Telefon',
+    street: 'Gatuadress',
+    city: 'Stad',
+    state: 'Län',
+    zip: 'Postnummer',
+    signIn: 'Logga in',
+    register: 'Skapa konto',
+    hasAccount: 'Har du redan ett konto? Logga in',
+    noAccount: 'Har du inget konto? Registrera dig',
+    invalidCredentials: 'Ogiltig e-post eller lösenord. Prova {email} / demo123',
+    demo: 'Demo: {email} / demo123',
+  },
+  account: {
+    title: 'Mitt Konto',
+    welcome: 'Välkommen tillbaka, {name}',
+    memberSince: 'Medlem sedan {date}',
+    myWishlist: 'Min önskelista',
+    signOut: 'Logga ut',
+    orderHistory: 'Orderhistorik',
+    noOrders: 'Inga beställningar ännu',
+    startShopping: 'Börja handla',
+  },
+  wishlist: {
+    title: 'Min Önskelista',
+    saved: '{count} sparad(e) artikel/artiklar',
+    empty: 'Din önskelista är tom',
+    emptyHint: 'Spara dina favoritprodukter för att köpa dem senare.',
+    browse: 'Bläddra produkter',
+  },
+  about: {
+    title: 'Om {name}',
+    subtitle:
+      'Vi levererar premium 100 % halal kött till ditt bord — färskt, anpassat och med omsorg.',
+    ourStory: 'Vår Historia',
+    storyP1:
+      '{name} grundades med ett enkelt uppdrag: göra premium halal kött tillgängligt för varje familj, utan att kompromissa med kvalitet, färskhet eller religiös efterlevnad. Vi förstår att för många hushåll är rätt styckning tillagad på rätt sätt inte en lyx — det är nödvändigt.',
+    storyP2:
+      'Från att välja antal bitar för kyckling till att välja Nihari- eller Karahi-styckning för nötkött och lamm, sätter vi anpassning i centrum för varje beställning. Våra expertslaktare förbereder varje order för hand, och vår temperaturkontrollerade leverans säkerställer att ditt kött anländer lika färskt som dagen det styckades.',
+    halalTitle: 'Halalcertifiering',
+    halalDesc:
+      'Varje produkt hos {name} kommer från certifierade halal-leverantörer. Vår leveranskedja är fullt spårbar och vi upprätthåller strikt efterlevnad av halal-slakt och -bearbetningsstandarder. Vi arbetar uteslutande med gårdar och bearbetare som delar vårt engagemang för etiskt, religiöst korrekt köttproduktion.',
+    freshDaily: 'Färskt Dagligen',
+    freshDailyDesc: 'Hämtas varje morgon från betrodda gårdar',
+    premiumQuality: 'Premiumkvalitet',
+    premiumQualityDesc: 'Handplockade styckningar av expertslaktare',
+    fastDelivery: 'Snabb Leverans',
+    fastDeliveryDesc: 'Temperaturkontrollerad leverans samma dag',
+    deliveryTitle: 'Leveransinformation',
+    delivery1: 'Vi levererar inom en radie på 40 km från vår anläggning.',
+    delivery2: 'Beställningar före kl. 14 är berättigade till leverans samma dag.',
+    delivery3: 'Fri leverans på beställningar över 500 kr. Standardleverans: 49 kr.',
+    delivery4: 'Alla produkter vakuumförpackas och transporteras i isolerad förpackning.',
+    contactTitle: 'Kontakta Oss',
+    address: 'Tingvallavägen 11, 195 31 Märsta',
+    privacyTitle: 'Integritetspolicy',
+    privacyText:
+      'Vi samlar endast den information som behövs för att behandla dina beställningar — namn, kontaktuppgifter och leveransadress. Vi säljer inte dina uppgifter till tredje part. Betalningsuppgifter hanteras säkert av våra betalpartners.',
+    termsTitle: 'Användarvillkor',
+    termsText:
+      'Alla priser visas i SEK och kan ändras utan föregående meddelande. Beställningar är beroende av tillgång. Halalcertifiering gäller för alla köttprodukter. Leveranstider är uppskattningar och kan variera under högtrafik.',
+  },
+  footer: {
+    tagline:
+      'Premium 100 % halal köttleverans. Färskt, anpassat kött levererat till din dörr med kompromisslös kvalitet.',
+    shop: 'Butik',
+    company: 'Företag',
+    contact: 'Kontakt',
+    rights: 'Alla rättigheter förbehållna.',
+    phone: '072-585 50 50',
+    hours: 'Öppet alla dagar {hours}',
+  },
+  notFound: {
+    title: '404',
+    message: 'Sidan hittades inte',
+    goHome: 'Gå till startsidan',
+  },
+  orderStatus: {
+    pending: 'väntande',
+    confirmed: 'bekräftad',
+    preparing: 'förbereds',
+    'out-for-delivery': 'ute för leverans',
+    delivered: 'levererad',
+  },
+};
\ No newline at end of file
diff --git a/src/i18n/locales/tr.ts b/src/i18n/locales/tr.ts
new file mode 100644
index 0000000..9d78151
--- /dev/null
+++ b/src/i18n/locales/tr.ts
@@ -0,0 +1,466 @@
+import { TranslationDict } from '../types';
+
+export const tr: TranslationDict = {
+  site: {
+    name: 'Kött Gård',
+    tagline: 'Premium Helal',
+    description:
+      'Premium %100 helal et teslimatı. Taze tavuk, dana ve kuzu; yalnızca donmuş balık ve deniz ürünleri — tercihinize göre hazırlanır ve kapınıza teslim edilir.',
+    metaTitle: 'Premium Helal Et Teslimatı',
+    initials: 'KG',
+    email: 'hello@kottgard.se',
+    demoEmail: 'demo@kottgard.se',
+  },
+  nav: {
+    shop: 'Mağaza',
+    chicken: 'Tavuk',
+    beef: 'Dana',
+    lamb: 'Kuzu',
+    fish: 'Donmuş Balık',
+    about: 'Hakkımızda',
+    halalCert: 'Helal Sertifikası',
+    delivery: 'Teslimat Bilgileri',
+    contact: 'İletişim',
+    myAccount: 'Hesabım',
+    orderHistory: 'Sipariş Geçmişi',
+    wishlist: 'Favoriler',
+    cart: 'Sepet',
+    privacy: 'Gizlilik Politikası',
+    terms: 'Kullanım Koşulları',
+    searchProducts: 'Ürün ara',
+    toggleMenu: 'Menüyü aç/kapat',
+    account: 'Hesap',
+    language: 'Dil',
+  },
+  languageBanner: {
+    choose: 'Dilinizi seçin',
+  },
+  hero: {
+    badge: '%100 Helal Sertifikalı',
+    taglineShort: 'Doğal ve Saf',
+    title: 'Premium Helal Et',
+    titleHighlight: '',
+    titleEnd: '',
+    subtitleShort: 'Taze. Kaliteli. Güvenilir.',
+    subtitle:
+      'Helal sertifikalı · Her gün taze · Eve teslimat · Her gün açık',
+    hours: 'Her gün açık {hours}',
+    location: 'Tingvallavägen 11, Märsta',
+    shopNow: 'Ürünlerimizi İnceleyin',
+    browseChicken: 'Tavuk Ürünlerine Göz Atın',
+    whatsapp: 'WhatsApp ile Sipariş Verin',
+  },
+  aboutPreview: {
+    label: 'Hakkımızda',
+    title: "Märsta'nın En İyi Kasabı",
+    p1: 'Kött Gård sadece bir kasap değil — kalite sözümüzdür. Tüm etlerimiz %100 helal sertifikalıdır ve her gün taze olarak teslim edilir.',
+    p2: 'Kuzumuzu İrlanda ve Yeni Zelanda\'dan, tavuk ve danayı güvenilir üreticilerden temin ediyoruz; akşam yemeği, kutlamalar veya pazar kızartması için doğru kesimi bulmanıza yardımcı oluyoruz.',
+    p3: 'Tingvallavägen\'de bizi ziyaret edin, ne aradığınızı söyleyin — istediğiniz şekilde kesip paketliyoruz.',
+    statHalal: '%100',
+    statHalalLabel: 'Helal sertifikalı',
+    statDays: '7 gün',
+    statDaysLabel: 'Haftalık açık',
+    statDelivery: 'Günlük',
+    statDeliveryLabel: 'Teslimat',
+    statFresh: 'Taze',
+    statFreshLabel: 'Her gün',
+    readMore: 'Hakkımızda daha fazla bilgi',
+    imageAlt: 'Kött Gård\'dan kesme tahtası üzerinde taze et parçaları',
+  },
+  trust: {
+    halal: '%100 Helal',
+    halalDesc: 'Tam izlenebilirlik ve uyumlulukla sertifikalı helal tedarik.',
+    fresh: 'Her Gün Taze',
+    freshDesc: 'Her sabah taze temin edilir ve en iyi kalitede teslim edilir.',
+    premium: 'Premium Kalite',
+    premiumDesc: 'Güvenilir çiftliklerden özenle seçilmiş kesimler, uzman kasaplar tarafından hazırlanır.',
+  },
+  categories: {
+    title: 'Ürünlerimiz',
+    subtitle: 'Özenle seçilmiş et — her gün. Taze teslimat. Helal. Siparişe göre kesim.',
+    shop: '{name} Mağazası',
+    chicken: {
+      name: 'Tavuk',
+      description: 'Göğüs fileto, kanat, baget ve bütün tavuk. Her sabah taze.',
+    },
+    beef: {
+      name: 'Dana ve Buzağı',
+      description: 'Kıyma, kemik iliği ve premium kesimler. Yüksek yağlanma, tutarlı kalite.',
+    },
+    lamb: {
+      name: 'Kuzu',
+      description: 'Omuz, boyun, kızartmalık ve pirzola. İrlanda ve Yeni Zelanda\'dan.',
+    },
+    fish: {
+      name: 'Donmuş Balık',
+      description: 'Yalnızca donmuş balık ve deniz ürünleri — vakumlu, dondurucuya hazır.',
+    },
+  },
+  featured: {
+    label: 'Özenle Seçilmiş',
+    title: 'Öne Çıkan Ürünler',
+    subtitle: 'Şehrin dört bir yanındaki ailelerin en çok sevdiği kesimler.',
+    viewAll: 'Tümünü Gör',
+  },
+  howItWorks: {
+    label: 'Sipariş',
+    title: 'Sipariş vermek ne kadar kolay',
+    step1Title: 'Bize ulaşın',
+    step1Desc:
+      'Ne istediğinizi WhatsApp mesajıyla gönderin — hızlıca yanıt veririz.',
+    step2Title: 'Onaylıyoruz',
+    step2Desc:
+      'Siparişinizi onaylar, fiyatı bildirir ve ne zaman hazır olacağını söyleriz.',
+    step3Title: 'Mağazadan alın veya teslimat',
+    step3Desc:
+      'Tingvallavägen 11\'deki mağazamızdan alın veya eve teslimatı seçin.',
+    step: 'Adım {n}',
+    whatsapp: 'WhatsApp ile Sipariş Verin',
+  },
+  offers: {
+    label: 'Sipariş',
+    title: 'Haftalık fırsatlar',
+    subtitle:
+      'Düzenli olarak yeni kampanyalar ekliyoruz. En güncel fiyatlar için sosyal medyada bizi takip edin.',
+    disclaimer: 'Stoklar tükenene kadar geçerli fiyat',
+    was: 'Eski fiyat',
+    now: 'ŞİMDİ',
+    order: 'Sipariş Ver',
+    viewProduct: 'Ürünü görüntüle',
+    badge: {
+      fresh: 'TAZE',
+      halal: 'HELAL',
+    },
+    items: {
+      chickenWings: { name: 'Taze tavuk kanat PL' },
+      lambSteak: { name: 'Taze kuzu kızartmalık İrlanda' },
+      beefMince: { name: 'Dana kıyma %5 yağ IRL' },
+    },
+  },
+  social: {
+    label: 'Bizi takip edin',
+    title: 'Bizi takip edin',
+    subtitle:
+      'Facebook\'ta 1.100+ takipçi · 249 gönderi · Günlük güncellemeler',
+    facebook: 'Facebook',
+    instagram: 'Instagram',
+    whatsapp: 'WhatsApp',
+  },
+  contact: {
+    label: 'İletişim',
+    title: 'Bizi ziyaret edin',
+    addressLabel: 'Adres',
+    phoneLabel: 'Telefon',
+    hoursLabel: 'Çalışma saatleri',
+    hoursValue: 'Her gün: {hours}',
+    writeUs: 'Bize yazın',
+    callUs: 'Bizi arayın',
+    openMaps: 'Google Haritalar\'da aç',
+    learnMore: 'İletişim bilgileri',
+  },
+  cta: {
+    title: 'Premium Helal Ete Hazır mısınız?',
+    subtitle:
+      'Bugün sipariş verin; gerçekten taze, isteğinize göre hazırlanmış helal etin farkını kapınızda yaşayın.',
+    button: 'Ürünlerimizi İnceleyin',
+    whatsapp: 'WhatsApp ile Sipariş Verin',
+  },
+  shop: {
+    title: 'Tüm Ürünler',
+    subtitle: 'Tercihinize göre hazırlanan premium helal et',
+    noProducts: 'Ürün bulunamadı',
+    noProductsHint: 'Filtreleri veya arama terimini değiştirmeyi deneyin',
+    filters: 'Filtreler',
+    productsFound: '{count} ürün bulundu',
+    search: 'Ara',
+    searchPlaceholder: 'Ürün ara...',
+    category: 'Kategori',
+    sortBy: 'Sırala',
+    all: 'Tümü',
+    sortFeatured: 'Öne çıkanlar',
+    sortPriceAsc: 'Fiyat: Düşükten Yükseğe',
+    sortPriceDesc: 'Fiyat: Yüksekten Düşüğe',
+    sortName: 'İsim A–Z',
+  },
+  product: {
+    backToShop: 'Mağazaya Dön',
+    inStock: 'Stokta',
+    outOfStock: 'Stokta Yok',
+    halalTrust: '%100 Helal sertifikalı · Her gün taze · Premium kalite',
+    yourSelection: 'Seçiminiz',
+    aboutProduct: 'Bu Ürün Hakkında',
+    addToCart: 'Sepete Ekle',
+    addedToCart: 'Sepete Eklendi',
+    decreaseQty: 'Adedi azalt',
+    increaseQty: 'Adedi artır',
+    removeWishlist: 'Favorilerden çıkar',
+    addWishlist: 'Favorilere ekle',
+    viewProduct: '{name} görüntüle',
+    pieces: '{count} parça',
+    standardCut: 'Standart kesim',
+    howManyCuts: 'Kaç Parça İstiyorsunuz?',
+    howManyCutsHint: 'Siparişiniz için parça sayısını seçin',
+    cutsAndStyle: '{cuts} parça · {style}',
+    selectCutting: 'Kesim Stilini Seçin',
+    selectCuttingHint: 'Kasaplarımız {category} ürününüzü tam istediğiniz şekilde hazırlayacak',
+    fishNote:
+      'Yalnızca donmuş balık satıyoruz. Tüm balıklar kaynağında dondurulur, profesyonelce paketlenir ve donmuş satılır — pişirene kadar dondurucuda saklayın.',
+  },
+  cutting: {
+    nihari: 'Nihari kesimi',
+    karahi: 'Karahi kesimi',
+    qeema: 'Kıyma (qeema)',
+    boneless: 'Kemiksiz',
+    steak: 'Biftek kesimi',
+  },
+  priceUnit: {
+    perBird: 'adet başına',
+    perPack: 'paket başına',
+    perKg: 'kg başına',
+  },
+  badges: {
+    bestseller: 'Çok Satan',
+    chefsPick: 'Şefin Seçimi',
+    premium: 'Premium',
+    popular: 'Popüler',
+    freshCatch: 'Taze Av',
+    frozen: 'Donmuş',
+  },
+  products: {
+    'chicken-whole': {
+      name: 'Bütün Tavuk',
+      description: 'Çiftlikten taze bütün helal tavuk; kızartma veya curry için ideal.',
+      longDescription:
+        'Bütün tavuklarımız sertifikalı helal çiftliklerden temin edilir ve en taze haliyle teslim edilir. Her tavuk kalite için el ile seçilir; eti yumuşak ve işleme süreci hijyeniktir. İstediğiniz parça sayısını seçin, tam ihtiyacınıza göre hazırlayalım.',
+    },
+    'chicken-breast': {
+      name: 'Tavuk Göğsü',
+      description: 'Yağsız, kemiksiz tavuk göğsü — ızgara ve sağlıklı yemekler için ideal.',
+      longDescription:
+        'Premium kemiksiz tavuk göğsü, temizlenmiş ve pişirmeye hazır. Kebap, wok ve sağlıklı hafta içi akşam yemekleri için mükemmel. Parça sayınızı seçin ve her seferinde aynı kaliteyi yaşayın.',
+    },
+    'chicken-thighs': {
+      name: 'Tavuk But',
+      description: 'Sulu helal tavuk but; curry ve ızgara için zengin lezzet.',
+      longDescription:
+        'Tavuk butlarımız sulu yapısı ve derin lezzetiyle bilinir. Geleneksel karahi mi yapıyorsunuz, hafta sonu mangal mı — bu butlar her zaman mükemmel sonuç verir.',
+    },
+    'chicken-wings': {
+      name: 'Tavuk Kanat',
+      description: 'Kızartma, fırın veya ızgara için parti sofralarına hazır helal tavuk kanat.',
+      longDescription:
+        'Helal usullerle hazırlanmış, taze teslim edilen çıtır ve lezzetli tavuk kanatlar. Maç geceleri ve aile buluşmalarının vazgeçilmezi.',
+    },
+    'beef-nihari': {
+      name: 'Nihari İçin Dana',
+      description: 'Yavaş pişirmeye hazır dana kesimleri; geleneksel nihari için ideal.',
+      longDescription:
+        'Yavaş pişirilmiş nihari için özel seçilmiş dana kesimleri. Kolajen ve lezzet açısından zengin; saatlerce kaynatıldığında otantik, ağızda eriyen bir doku sunar.',
+    },
+    'beef-steak': {
+      name: 'Premium Dana Biftek',
+      description: 'Mükemmel kızartma için restoran kalitesinde helal biftek kesimleri.',
+      longDescription:
+        'En iyi helal kaynaklardan el ile kesilmiş premium dana biftekler. Yağlanmış, yumuşak ve ızgaranız veya döküm tavanız için hazır. Tercih ettiğiniz kesim stilini seçin.',
+    },
+    'beef-mince': {
+      name: 'Dana Kıyma',
+      description: 'Kebap, burger ve kıyma yemekleri için taze helal dana kıyma.',
+      longDescription:
+        'Sulu kebaplar, lezzetli kıyma yemekleri ve ev yapımı burgerler için ideal yağ oranına sahip ince çekilmiş helal dana kıyma. Her gün taze çekilir.',
+    },
+    'beef-boneless': {
+      name: 'Kemiksiz Dana Küp',
+      description: 'Karahi, pilav ve güveç için çok yönlü kemiksiz dana küpleri.',
+      longDescription:
+        'Hızlı pişen yemekler için mükemmel boyutta kesilmiş kemiksiz dana küpleri. Karahi, pilav ve wok yemeklerinde tutarlı boyut önemli olduğunda idealdir.',
+    },
+    'lamb-shoulder': {
+      name: 'Kuzu Omuz',
+      description: 'Yavaş kızartma ve curry için zengin lezzetli kuzu omuz.',
+      longDescription:
+        'Güzel yağlanmaya sahip premium helal kuzu omuz. Uzun süre kızartılan ziyafetler, doyurucu curryler ve geleneksel aile yemekleri için mükemmel. Tercih ettiğiniz kesime göre hazırlanır.',
+    },
+    'lamb-leg': {
+      name: 'Kuzu But',
+      description: 'Kızartma, ızgara ve özel günler için yumuşak kuzu but.',
+      longDescription:
+        'Sertifikalı helal kaynaklardan bütün veya parçalı kuzu but. Bayram kutlamaları, davet yemekleri ve pazar kızartmaları için göz alıcı bir kesim.',
+    },
+    'lamb-chops': {
+      name: 'Kuzu Pirzola',
+      description: 'Izgara ve evde fine dining için premium kuzu pirzola.',
+      longDescription:
+        'Izgara için mükemmel yağ tabakasına sahip kalın kesim helal kuzu pirzola. Restoran kalitesi, mutfağınıza teslim.',
+    },
+    'lamb-mince': {
+      name: 'Kuzu Kıyma',
+      description: 'Kebap, börek ve kıyma yemekleri için taze helal kuzu kıyma.',
+      longDescription:
+        'Zengin lezzetli ince çekilmiş kuzu kıyma. Şiş kebap, kuzu kıyma yemeği ve dolgulu flatbread için vazgeçilmez.',
+    },
+    'fish-salmon': {
+      name: 'Donmuş Atlantik Somon Fileto',
+      description: 'Donmuş somon filetoları, vakumlu — evde çözün ve tavada kızartın.',
+      longDescription:
+        'Omega-3 açısından zengin premium donmuş Atlantik somon filetoları. Kaynağında dondurulmuş, temizlenmiş, porsiyonlanmış ve vakumlu. Pişirene kadar donmuş saklayın.',
+    },
+    'fish-rohu': {
+      name: 'Donmuş Rohu Balığı',
+      description: 'Donmuş bütün rohu — Güney Asya\'nın favorisi, yalnızca donmuş satılır.',
+      longDescription:
+        'Güney Asya mutfağının vazgeçilmezi donmuş rohu balığı. Kaynağında dondurulmuş ve dondurucu için paketlenmiş. Balık curry\'si ve geleneksel tariflerden önce çözün.',
+    },
+    'fish-prawns': {
+      name: 'Donmuş Jumbo Karides',
+      description: 'Çözündükten sonra curry, pilav ve ızgara için donmuş jumbo karides.',
+      longDescription:
+        'Premium donmuş jumbo karidesler; yalnızca donmuş satılır. Curry ve tandoori yemeklerinden önce tamamen çözün.',
+    },
+    'fish-basa': {
+      name: 'Donmuş Basa Fileto',
+      description: 'Donmuş hafif basa filetoları — tüm aile için kolay çözme ve pişirme.',
+      longDescription:
+        'Hafif lezzetli donmuş kemiksiz basa filetoları. Yalnızca donmuş satılır — fırınlama ve hafif currylerden önce çözün.',
+    },
+  },
+  cart: {
+    title: 'Sepetiniz',
+    itemsCount: 'Sepetinizde {count} ürün var',
+    empty: 'Sepetiniz boş',
+    emptyHint: 'Premium helal ürünlerimizi inceleyin ve sepetinize ekleyin.',
+    startShopping: 'Alışverişe Başla',
+    customization: 'Özelleştirme:',
+    orderSummary: 'Sipariş Özeti',
+    subtotal: 'Ara Toplam',
+    delivery: 'Teslimat',
+    free: 'Ücretsiz',
+    freeDeliveryHint: '500 kr üzeri siparişlerde ücretsiz teslimat',
+    total: 'Toplam',
+    proceedCheckout: 'Ödemeye Geç',
+    continueShopping: 'Alışverişe Devam Et',
+    removeItem: 'Ürünü kaldır',
+  },
+  checkout: {
+    title: 'Güvenli Ödeme',
+    backToCart: 'Sepete Dön',
+    noItems: 'Ödenecek ürün yok',
+    goToShop: 'Mağazaya Git',
+    orderConfirmed: 'Sipariş Onaylandı!',
+    thankYou: 'Siparişiniz için teşekkür ederiz. Premium helal etiniz hazırlanıyor.',
+    orderId: 'Sipariş No: {id}',
+    viewOrders: 'Siparişleri Görüntüle',
+    haveAccount: 'Hesabınız var mı?',
+    signIn: 'Giriş yapın',
+    fasterCheckout: 'daha hızlı ödeme için.',
+    deliveryDetails: 'Teslimat Bilgileri',
+    fullName: 'Ad Soyad',
+    email: 'E-posta',
+    phone: 'Telefon',
+    street: 'Sokak Adresi',
+    city: 'Şehir',
+    state: 'İl/Eyalet',
+    zip: 'Posta Kodu',
+    payment: 'Ödeme',
+    creditCard: 'Kredi Kartı',
+    cashOnDelivery: 'Kapıda Ödeme',
+    cardNumber: 'Kart Numarası',
+    expiry: 'Son Kullanma',
+    cvv: 'CVV',
+    qty: 'Adet: {count}',
+    processing: 'İşleniyor...',
+    pay: '{amount} Öde',
+    secure: 'Güvenli 256-bit SSL şifreleme',
+  },
+  auth: {
+    welcomeBack: 'Tekrar Hoş Geldiniz',
+    createAccount: 'Hesap Oluştur',
+    joinTagline: 'Premium alışveriş deneyimi için {name}\'a katılın',
+    signInTagline: '{name} hesabınıza giriş yapın',
+    fullName: 'Ad Soyad',
+    email: 'E-posta',
+    password: 'Şifre',
+    phone: 'Telefon',
+    street: 'Sokak Adresi',
+    city: 'Şehir',
+    state: 'İl/Eyalet',
+    zip: 'Posta Kodu',
+    signIn: 'Giriş Yap',
+    register: 'Hesap Oluştur',
+    hasAccount: 'Zaten hesabınız var mı? Giriş yapın',
+    noAccount: 'Hesabınız yok mu? Kayıt olun',
+    invalidCredentials: 'Geçersiz e-posta veya şifre. Deneyin: {email} / demo123',
+    demo: 'Demo: {email} / demo123',
+  },
+  account: {
+    title: 'Hesabım',
+    welcome: 'Tekrar hoş geldiniz, {name}',
+    memberSince: '{date} tarihinden beri üye',
+    myWishlist: 'Favorilerim',
+    signOut: 'Çıkış Yap',
+    orderHistory: 'Sipariş Geçmişi',
+    noOrders: 'Henüz sipariş yok',
+    startShopping: 'Alışverişe Başla',
+  },
+  wishlist: {
+    title: 'Favorilerim',
+    saved: '{count} kayıtlı ürün',
+    empty: 'Favori listeniz boş',
+    emptyHint: 'Daha sonra satın almak için favori ürünlerinizi kaydedin.',
+    browse: 'Ürünlere Göz Atın',
+  },
+  about: {
+    title: '{name} Hakkında',
+    subtitle:
+      'Masanıza premium, %100 helal et getiriyoruz — taze, isteğinize göre hazırlanmış ve özenle teslim edilmiş.',
+    ourStory: 'Hikayemiz',
+    storyP1:
+      '{name}, basit bir misyonla kuruldu: premium helal eti her aileye ulaştırmak; kalite, tazelik ve dini uyumluluktan ödün vermeden. Birçok ev için doğru kesimin doğru şekilde hazırlanması lüks değil — gerekliliktir.',
+    storyP2:
+      'Tavuk için parça sayısı seçiminden dana ve kuzu için Nihari veya Karahi kesimine kadar her siparişin merkezine özelleştirmeyi koyuyoruz. Uzman kasaplarımız her siparişi el ile hazırlar; sıcaklık kontrollü teslimatımız etinizin kesildiği günkü tazelikte ulaşmasını sağlar.',
+    halalTitle: 'Helal Sertifikası',
+    halalDesc:
+      '{name}\'daki her ürün sertifikalı helal tedarikçilerden temin edilir. Tedarik zincirimiz tamamen izlenebilir ve helal kesim ile işleme standartlarına sıkı uyum sağlarız. Yalnızca etik ve dini açıdan uyumlu et üretimine ortak olan çiftlikler ve işlemcilerle çalışırız.',
+    freshDaily: 'Her Gün Taze',
+    freshDailyDesc: 'Her sabah güvenilir çiftliklerden temin edilir',
+    premiumQuality: 'Premium Kalite',
+    premiumQualityDesc: 'Uzman kasaplar tarafından özenle seçilmiş kesimler',
+    fastDelivery: 'Hızlı Teslimat',
+    fastDeliveryDesc: 'Sıcaklık kontrollü aynı gün teslimat',
+    deliveryTitle: 'Teslimat Bilgileri',
+    delivery1: 'İşleme tesisimizin 25 mil yarıçapı içinde teslimat yapıyoruz.',
+    delivery2: 'Saat 14:00\'ten önce verilen siparişler aynı gün teslimata uygundur.',
+    delivery3: '500 kr üzeri siparişlerde ücretsiz teslimat. Standart teslimat ücreti: 49 kr.',
+    delivery4: 'Tüm ürünler vakumlu paketlenir ve yalıtımlı ambalajlarla taşınır.',
+    contactTitle: 'Bize Ulaşın',
+    address: 'Tingvallavägen 11, 195 31 Märsta',
+    privacyTitle: 'Gizlilik Politikası',
+    privacyText:
+      'Yalnızca siparişlerinizi işlemek ve hizmetimizi geliştirmek için gerekli bilgileri topluyoruz — ad, iletişim bilgileri ve teslimat adresi. Verilerinizi üçüncü taraflara satmıyoruz. Ödeme bilgileri ödeme ortaklarımız tarafından güvenli şekilde işlenir.',
+    termsTitle: 'Kullanım Koşulları',
+    termsText:
+      'Tüm fiyatlar SEK cinsinden gösterilir ve önceden haber verilmeksizin değişebilir. Siparişler stok durumuna bağlıdır. Helal sertifikası listelenen tüm et ürünleri için geçerlidir. Teslimat süreleri tahminidir ve yoğun dönemlerde değişebilir.',
+  },
+  footer: {
+    tagline:
+      'Premium %100 helal et teslimatı. Taze, isteğinize göre kesilmiş etler, ödün vermeyen kaliteyle kapınıza teslim.',
+    shop: 'Mağaza',
+    company: 'Şirket',
+    contact: 'İletişim',
+    rights: 'Tüm hakları saklıdır.',
+    phone: '072-585 50 50',
+    hours: 'Her gün açık {hours}',
+  },
+  notFound: {
+    title: '404',
+    message: 'Sayfa bulunamadı',
+    goHome: 'Ana Sayfaya Dön',
+  },
+  orderStatus: {
+    pending: 'beklemede',
+    confirmed: 'onaylandı',
+    preparing: 'hazırlanıyor',
+    'out-for-delivery': 'teslimatta',
+    delivered: 'teslim edildi',
+  },
+};
\ No newline at end of file
diff --git a/src/i18n/locales/ur.ts b/src/i18n/locales/ur.ts
new file mode 100644
index 0000000..0b2be57
--- /dev/null
+++ b/src/i18n/locales/ur.ts
@@ -0,0 +1,467 @@
+import { TranslationDict } from '../types';
+
+export const ur: TranslationDict = {
+  site: {
+    name: 'کوٹ گارڈ',
+    tagline: 'پریمیم حلال',
+    description:
+      'پریمیم 100% حلال گوشت کی ڈیلیوری۔ تازہ مرغی، گائے اور بکرے کا گوشت؛ صرف منجمد مچھلی اور سمندری غذا — آپ کی پسند کے مطابق تیار کر کے آپ کے دروازے تک پہنچائی جاتی ہے۔',
+    metaTitle: 'پریمیم حلال گوشت ڈیلیوری',
+    initials: 'KG',
+    email: 'hello@kottgard.se',
+    demoEmail: 'demo@kottgard.se',
+  },
+  nav: {
+    shop: 'خریداری',
+    chicken: 'مرغی',
+    beef: 'گائے کا گوشت',
+    lamb: 'بکرے کا گوشت',
+    fish: 'منجمد مچھلی',
+    about: 'ہمارے بارے میں',
+    halalCert: 'حلال سرٹیفیکیشن',
+    delivery: 'ڈیلیوری کی معلومات',
+    contact: 'رابطہ',
+    myAccount: 'میرا اکاؤنٹ',
+    orderHistory: 'آرڈر کی تاریخ',
+    wishlist: 'پسندیدہ',
+    cart: 'ٹوکری',
+    privacy: 'رازداری کی پالیسی',
+    terms: 'شرائط و ضوابط',
+    searchProducts: 'مصنوعات تلاش کریں',
+    toggleMenu: 'مینو کھولیں',
+    account: 'اکاؤنٹ',
+    language: 'زبان',
+  },
+  languageBanner: {
+    choose: 'اپنی زبان منتخب کریں',
+  },
+  hero: {
+    badge: '100% حلال تصدیق شدہ',
+    taglineShort: 'قدرتی طور پر خالص',
+    title: 'پریمیم حلال گوشت',
+    titleHighlight: '',
+    titleEnd: '',
+    subtitleShort: 'تازہ۔ معیار۔ قابل اعتماد۔',
+    subtitle:
+      'حلال تصدیق شدہ · روزانہ تازہ · گھر کی ڈیلیوری · ہر دن کھلا',
+    hours: 'ہر دن کھلا {hours}',
+    location: 'Tingvallavägen 11, Märsta',
+    shopNow: 'ہمارا مجموعہ دیکھیں',
+    browseChicken: 'مرغی دیکھیں',
+    whatsapp: 'واٹس ایپ سے آرڈر کریں',
+  },
+  aboutPreview: {
+    label: 'ہمارے بارے میں',
+    title: 'مائرسٹا کی بہترین گوشت کی دکان',
+    p1: 'کوٹ گارڈ صرف ایک گوشت کی دکان نہیں — ہم معیار کا وعدہ ہیں۔ ہمارا تمام گوشت 100% حلال تصدیق شدہ ہے اور روزانہ تازہ پہنچایا جاتا ہے۔',
+    p2: 'ہم آئرلینڈ اور نیوزی لینڈ سے بکرے کا گوشت، معتبر پیدا کنندگان سے مرغی اور گائے کا گوشت حاصل کرتے ہیں، اور آپ کو رات کے کھانے، تقریب یا اتوار کی روست کے لیے صحیح کٹ تلاش کرنے میں مدد کرتے ہیں۔',
+    p3: 'Tingvallavägen پر ہماری دکان میں آئیں، بتائیں آپ کیا تلاش کر رہے ہیں — ہم آپ کی خواہش کے مطابق کاٹتے اور پیک کرتے ہیں۔',
+    statHalal: '100%',
+    statHalalLabel: 'حلال تصدیق شدہ',
+    statDays: '7 دن',
+    statDaysLabel: 'ہفتے میں کھلا',
+    statDelivery: 'روزانہ',
+    statDeliveryLabel: 'ڈیلیوری',
+    statFresh: 'تازہ',
+    statFreshLabel: 'ہر دن',
+    readMore: 'مزید پڑھیں',
+    imageAlt: 'کوٹ گارڈ سے تازہ گوشت کی کٹس',
+  },
+  trust: {
+    halal: '100% حلال',
+    halalDesc: 'مکمل سراغ رسانی اور تعمیل کے ساتھ تصدیق شدہ حلال ذرائع۔',
+    fresh: 'روزانہ تازہ',
+    freshDesc: 'ہر صبح تازہ حاصل کیا جاتا ہے اور بہترین حالت میں پہنچایا جاتا ہے۔',
+    premium: 'پریمیم معیار',
+    premiumDesc: 'قابل اعتماد فارموں سے منتخب کردہ کٹس، ماہر قصابوں کے ذریعے تیار۔',
+  },
+  categories: {
+    title: 'زمرے کے لحاظ سے خریداری',
+    subtitle:
+      'روزمرہ کی مرغی سے لے کر پریمیم بکرے کے کٹlets تک — ہر کٹ آپ کی پسند کے مطابق۔',
+    shop: '{name} خریدیں',
+    chicken: {
+      name: 'مرغی',
+      description: 'فارم سے تازہ حلال مرغی، آپ کی پسند کے مطابق کاٹی گئی',
+    },
+    beef: {
+      name: 'گائے کا گوشت',
+      description: 'روایتی اور جدید کٹس میں پریمیم حلال گائے کا گوشت',
+    },
+    lamb: {
+      name: 'بکرے کا گوشت',
+      description: 'ہر موقع کے لیے نرم حلال بکرے کا گوشت',
+    },
+    fish: {
+      name: 'منجمد مچھلی',
+      description: 'صرف منجمد مچھلی اور سمندری غذا — فریزر کے لیے ویکیوم پیک',
+    },
+  },
+  featured: {
+    label: 'منتخب مجموعہ',
+    title: 'نمایاں مصنوعات',
+    subtitle: 'ہماری سب سے مقبول کٹس، شہر بھر کے خاندانوں کی پسندیدہ۔',
+    viewAll: 'سب دیکھیں',
+  },
+  howItWorks: {
+    label: 'آرڈر',
+    title: 'آرڈر کرنا کتنا آسان ہے',
+    step1Title: 'ہم سے رابطہ کریں',
+    step1Desc:
+      'واٹس ایپ پر پیغام بھیجیں کہ آپ کیا چاہتے ہیں — ہم جلدی جواب دیتے ہیں۔',
+    step2Title: 'ہم تصدیق کرتے ہیں',
+    step2Desc:
+      'ہم آپ کے آرڈر کی تصدیق کرتے ہیں، قیمت بتاتے ہیں اور بتاتے ہیں کہ کب تیار ہوگا۔',
+    step3Title: 'وصول یا ڈیلیوری',
+    step3Desc:
+      'Tingvallavägen 11 پر دکان سے وصول کریں یا گھر کی ڈیلیوری منتخب کریں۔',
+    step: 'مرحلہ {n}',
+    whatsapp: 'واٹس ایپ پر آرڈر کریں',
+  },
+  offers: {
+    label: 'آرڈر',
+    title: 'ہفتہ وار پیشکشیں',
+    subtitle:
+      'ہم مسلسل تازہ پیشکشوں کے ساتھ اپ ڈیٹ کرتے ہیں۔ تازہ ترین قیمتوں کے لیے سوشل میڈیا پر فالو کریں۔',
+    disclaimer: 'قیمت اس وقت تک جب تک اسٹاک موجود ہے',
+    was: 'پہلے',
+    now: 'اب',
+    order: 'آرڈر',
+    viewProduct: 'مصنوعات دیکھیں',
+    badge: {
+      fresh: 'تازہ',
+      halal: 'حلال',
+    },
+    items: {
+      chickenWings: { name: 'تازہ چکن ونگز PL' },
+      lambSteak: { name: 'تازہ لیمب روست آئرلینڈ' },
+      beefMince: { name: 'بیف منس 5% چکنائی IRL' },
+    },
+  },
+  social: {
+    label: 'ہمیں فالو کریں',
+    title: 'ہمیں فالو کریں',
+    subtitle:
+      'فیس بک پر 1,100+ فالوورز · 249 پوسٹس · روزانہ اپ ڈیٹس',
+    facebook: 'فیس بک',
+    instagram: 'انسٹاگرام',
+    whatsapp: 'واٹس ایپ',
+  },
+  contact: {
+    label: 'رابطہ',
+    title: 'ہم سے ملیں',
+    addressLabel: 'پتہ',
+    phoneLabel: 'فون',
+    hoursLabel: 'اوقات',
+    hoursValue: 'ہر دن: {hours}',
+    writeUs: 'ہمیں لکھیں',
+    callUs: 'ہمیں کال کریں',
+    openMaps: 'گوگل میپس میں کھولیں',
+    learnMore: 'رابطے کی تفصیلات',
+  },
+  cta: {
+    title: 'پریمیم حلال گوشت کے لیے تیار ہیں؟',
+    subtitle:
+      'آج ہی آرڈر کریں اور حقیقی تازہ، حسب ضرورت حلال گوشت کا فرق محسوس کریں جو آپ کے دروازے تک پہنچایا جائے۔',
+    button: 'ہمارا مجموعہ دیکھیں',
+    whatsapp: 'واٹس ایپ پر آرڈر کریں',
+  },
+  shop: {
+    title: 'تمام مصنوعات',
+    subtitle: 'پریمیم حلال گوشت، آپ کی پسند کے مطابق',
+    noProducts: 'کوئی مصنوعات نہیں ملیں',
+    noProductsHint: 'اپنے فلٹرز یا تلاش کی کوشش کو ایڈجسٹ کریں',
+    filters: 'فلٹرز',
+    productsFound: '{count} مصنوعات ملیں',
+    search: 'تلاش',
+    searchPlaceholder: 'مصنوعات تلاش کریں...',
+    category: 'زمرہ',
+    sortBy: 'ترتیب دیں',
+    all: 'سب',
+    sortFeatured: 'نمایاں',
+    sortPriceAsc: 'قیمت: کم سے زیادہ',
+    sortPriceDesc: 'قیمت: زیادہ سے کم',
+    sortName: 'نام الف سے ی',
+  },
+  product: {
+    backToShop: 'خریداری پر واپس',
+    inStock: 'دستیاب',
+    outOfStock: 'اسٹاک ختم',
+    halalTrust: '100% حلال تصدیق شدہ · روزانہ تازہ · پریمیم معیار',
+    yourSelection: 'آپ کا انتخاب',
+    aboutProduct: 'اس مصنوع کے بارے میں',
+    addToCart: 'ٹوکری میں شامل کریں',
+    addedToCart: 'ٹوکری میں شامل ہو گیا',
+    decreaseQty: 'مقدار کم کریں',
+    increaseQty: 'مقدار بڑھائیں',
+    removeWishlist: 'پسندیدہ سے ہٹائیں',
+    addWishlist: 'پسندیدہ میں شامل کریں',
+    viewProduct: '{name} دیکھیں',
+    pieces: '{count} ٹکڑے',
+    standardCut: 'معیاری کٹ',
+    howManyCuts: 'آپ کتنے کٹ چاہتے ہیں؟',
+    howManyCutsHint: 'اپنے آرڈر کے لیے کٹوں کی تعداد منتخب کریں',
+    cutsAndStyle: '{cuts} کٹ · {style}',
+    selectCutting: 'کاٹنے کا انداز منتخب کریں',
+    selectCuttingHint: 'ہمارے قصاب آپ کے {category} کو بالکل آپ کی پسند کے مطابق تیار کریں گے',
+    fishNote:
+      'ہم صرف منجمد مچھلی فروخت کرتے ہیں۔ تمام مچھلی ماخذ پر منجمد، پیشہ ورانہ پیک اور منجمد حالت میں فروخت — پکانے تک فریزر میں رکھیں۔',
+  },
+  cutting: {
+    nihari: 'نہاری کٹ',
+    karahi: 'کڑاہی کٹ',
+    qeema: 'قیمہ (کима)',
+    boneless: 'بغیر ہڈی',
+    steak: 'اسٹیک کٹ',
+  },
+  priceUnit: {
+    perBird: 'فی مرغی',
+    perPack: 'فی پیک',
+    perKg: 'فی کلو',
+  },
+  badges: {
+    bestseller: 'سب سے زیادہ فروخت',
+    chefsPick: 'شیف کی پسند',
+    premium: 'پریمیم',
+    popular: 'مقبول',
+    freshCatch: 'تازہ پکڑ',
+    frozen: 'منجمد',
+  },
+  products: {
+    'chicken-whole': {
+      name: 'پوری مرغی',
+      description: 'فارم سے تازہ پوری حلال مرغی، بھوننے یا کڑی کے لیے بہترین۔',
+      longDescription:
+        'ہماری پوری مرغیاں تصدیق شدہ حلال فارموں سے حاصل کی جاتی ہیں اور بہترین تازگی میں پہنچائی جاتی ہیں۔ ہر پرندہ معیار کے لیے ہاتھ سے منتخب کیا جاتا ہے، نرم گوشت اور صاف پروسیسنگ کے ساتھ۔ اپنی پسندیدہ ٹکڑوں کی تعداد منتخب کریں اور ہم اسے بالکل ویسے تیار کریں گے جیسا آپ چاہیں۔',
+    },
+    'chicken-breast': {
+      name: 'مرغی کا سینہ',
+      description: 'دبلا، بغیر ہڈی کا مرغی کا سینہ — گرل اور صحت مند کھانوں کے لیے بہترین۔',
+      longDescription:
+        'پریمیم بغیر ہڈی کا مرغی کا سینہ، تراشا ہوا اور پکانے کے لیے تیار۔ کباب، سٹیر فرائی اور صحت مند ہفتے کی رات کے کھانوں کے لیے بہترین۔',
+    },
+    'chicken-thighs': {
+      name: 'مرغی کی ران',
+      description: 'کڑی اور گرل کے لیے بھرپور ذائقے والی رس بھرے حلال مرغی کی ران۔',
+      longDescription:
+        'ہماری مرغی کی ران اپنی رس اور گہرے ذائقے کے لیے مشہور ہے۔ چاہے روایتی کڑاہی بنائیں یا ہفتے کے آخر میں BBQ، یہ ران ہر بار بہترین نتائج دیتی ہے۔',
+    },
+    'chicken-wings': {
+      name: 'مرغی کے بازو',
+      description: 'تلی، بیکنگ یا گرل کے لیے پارٹی کے لیے تیار حلال مرغی کے بازو۔',
+      longDescription:
+        'کرکرے، ذائقے دار مرغی کے بازو حلال طریقے سے تیار اور تازہ پہنچائے جاتے ہیں۔ میچ کی راتوں اور خاندانی محفلوں کی پسندیدہ۔',
+    },
+    'beef-nihari': {
+      name: 'نہاری کے لیے گائے کا گوشت',
+      description: 'آہستہ پکانے کے لیے تیار گائے کے گوشت کے کٹس، روایتی نہاری کے لیے بہترین۔',
+      longDescription:
+        'خاص طور پر منتخب گائے کے گوشت کے کٹس جو آہستہ پکی ہوئی نہاری کے لیے بہترین ہیں۔ کولیجن اور ذائقے سے بھرپور، یہ کٹس گھنٹوں کی دھیمی آنچ پر خوبصورتی سے گل جاتے ہیں۔',
+    },
+    'beef-steak': {
+      name: 'پریمیم گائے کا اسٹیک',
+      description: 'ریستوران معیار کے حلال اسٹیک کٹس، بہترین سیک کے لیے۔',
+      longDescription:
+        'بہترین حلال ذرائع سے ہاتھ سے کاٹے گئے پریمیم اسٹیک۔ چربیلے، نرم اور آپ کی گرل یا کاسٹ آئرن پین کے لیے تیار۔',
+    },
+    'beef-mince': {
+      name: 'گائے کا قیمہ',
+      description: 'کباب، برگر اور قیمہ کے لیے تازہ حلال گائے کا قیمہ۔',
+      longDescription:
+        'باریک پیسا ہوا حلال گائے کا قیمہ بہترین چربی کے تناسب کے ساتھ رسیلے کباب، ذائقے دار قیمہ اور گھریلو برگرز کے لیے۔ روزانہ تازہ پیسا جاتا ہے۔',
+    },
+    'beef-boneless': {
+      name: 'بغیر ہڈی کے گائے کے مکعب',
+      description: 'کڑاہی، بریانی اور اسٹیو کے لیے کثیر الاستعمال بغیر ہڈی کے مکعب۔',
+      longDescription:
+        'یکساں بغیر ہڈی کے گائے کے مکعب تیز پکوان کے لیے کامل سائز میں کاٹے گئے۔ کڑاہی، پلاؤ اور سٹیر فرائی کے لیے بہترین۔',
+    },
+    'lamb-shoulder': {
+      name: 'بکرے کا کندھا',
+      description: 'آہستہ بھوننے اور کڑی کے لیے بھرپور ذائقے والا بکرے کا کندھا۔',
+      longDescription:
+        'خوبصورت چربی کے نمونے والے پریمیم حلال بکرے کا کندھا۔ آہستہ بھونی ہوئی دعوتوں، بھرپور کڑیوں اور روایتی خاندانی کھانوں کے لیے بہترین۔',
+    },
+    'lamb-leg': {
+      name: 'بکرے کی ٹانگ',
+      description: 'بھوننے، گرل اور خاص مواقع کے لیے نرم بکرے کی ٹانگ۔',
+      longDescription:
+        'تصدیق شدہ حلال ذرائع سے پوری یا حصوں میں بکرے کی ٹانگ۔ عید کی تقریبات، ڈنر پارٹیوں اور اتوار کی بھوننے کے لیے مرکزی کٹ۔',
+    },
+    'lamb-chops': {
+      name: 'بکرے کے کٹlets',
+      description: 'گرل اور گھر میں فائن ڈائننگ کے لیے پریمیم بکرے کے کٹlets۔',
+      longDescription:
+        'موٹے کاٹے گئے حلال بکرے کے کٹlets گرل کے لیے بہترین چربی کی تہہ کے ساتھ۔ ریستوران معیار، آپ کے باورچی خانے تک پہنچایا گیا۔',
+    },
+    'lamb-mince': {
+      name: 'بکرے کا قیمہ',
+      description: 'کباب، سموسے اور قیمہ کے لیے تازہ حلال بکرے کا قیمہ۔',
+      longDescription:
+        'باریک پیسا ہوا بکرے کا قیمہ بھرپور ذائقے کے ساتھ۔ سیخ کباب، بکرے کا قیمہ اور بھرے ہوئے پراٹھوں کے لیے ضروری۔',
+    },
+    'fish-salmon': {
+      name: 'منجمد اٹلانٹک سامن فلیٹ',
+      description: 'منجمد سامن فلیٹس، ویکیوم پیک — گھر پر پگھلائیں اور پین میں سیکیں۔',
+      longDescription:
+        'پریمیم منجمد اٹلانٹک سامن فلیٹس، اومیگا 3 سے بھرپور۔ ماخذ پر منجمد، صاف، حصوں میں تقسیم اور ویکیوم سیلڈ۔ پکانے تک منجمد رکھیں۔',
+    },
+    'fish-rohu': {
+      name: 'منجمد روہو مچھلی',
+      description: 'منجمد پوری روہو — جنوبی ایشیائی پسندیدہ، صرف منجمد فروخت۔',
+      longDescription:
+        'منجمد روہو مچھلی، جنوبی ایشیائی کھانوں کا بنیادی جزو۔ ماخذ پر منجمد اور فریزر کے لیے پیک۔ مچھلی کی کڑی اور روایتی ترکیبوں سے پہلے پگھلائیں۔',
+    },
+    'fish-prawns': {
+      name: 'منجمد بڑی جھینگے',
+      description: 'منجمد بڑی جھینگے — پگھلانے کے بعد کڑی، بریانی اور گرل کے لیے۔',
+      longDescription:
+        'پریمیم منجمد بڑی جھینگے، صرف منجمد فروخت۔ میٹھا، مضبوط گوشت — کڑی اور تندوری سے پہلے مکمل پگھلائیں۔',
+    },
+    'fish-basa': {
+      name: 'منجمد باسا فلیٹ',
+      description: 'منجمد ہلکے باسا فلیٹس — پورے خاندان کے لیے آسان پگھلانا اور پکانا۔',
+      longDescription:
+        'منجمد بغیر ہڈی کے باسا فلیٹس، ہلکے ذائقے کے ساتھ۔ صرف منجمد فروخت — بیکنگ اور ہلکی کڑی سے پہلے پگھلائیں۔',
+    },
+  },
+  cart: {
+    title: 'آپ کی ٹوکری',
+    itemsCount: 'آپ کی ٹوکری میں {count} آئٹم',
+    empty: 'آپ کی ٹوکری خالی ہے',
+    emptyHint: 'ہمارے پریمیم حلال مجموعے میں سے دیکھیں اور آئٹمز شامل کریں۔',
+    startShopping: 'خریداری شروع کریں',
+    customization: 'حسب ضرورت:',
+    orderSummary: 'آرڈر کا خلاصہ',
+    subtotal: 'ذیلی کل',
+    delivery: 'ڈیلیوری',
+    free: 'مفت',
+    freeDeliveryHint: '500 کرون سے زیادہ کے آرڈرز پر مفت ڈیلیوری',
+    total: 'کل',
+    proceedCheckout: 'چیک آؤٹ پر جائیں',
+    continueShopping: 'خریداری جاری رکھیں',
+    removeItem: 'آئٹم ہٹائیں',
+  },
+  checkout: {
+    title: 'محفوظ چیک آؤٹ',
+    backToCart: 'ٹوکری پر واپس',
+    noItems: 'چیک آؤٹ کے لیے کوئی آئٹم نہیں',
+    goToShop: 'خریداری پر جائیں',
+    orderConfirmed: 'آرڈر کی تصدیق ہو گئی!',
+    thankYou: 'آپ کے آرڈر کا شکریہ۔ آپ کا پریمیم حلال گوشت تیار کیا جا رہا ہے۔',
+    orderId: 'آرڈر آئی ڈی: {id}',
+    viewOrders: 'آرڈرز دیکھیں',
+    haveAccount: 'اکاؤنٹ ہے؟',
+    signIn: 'سائن ان کریں',
+    fasterCheckout: 'تیز چیک آؤٹ کے لیے۔',
+    deliveryDetails: 'ڈیلیوری کی تفصیلات',
+    fullName: 'پورا نام',
+    email: 'ای میل',
+    phone: 'فون',
+    street: 'گلی کا پتہ',
+    city: 'شہر',
+    state: 'صوبہ',
+    zip: 'پوسٹل کوڈ',
+    payment: 'ادائیگی',
+    creditCard: 'کریڈٹ کارڈ',
+    cashOnDelivery: 'ڈیلیوری پر نقد',
+    cardNumber: 'کارڈ نمبر',
+    expiry: 'میعاد',
+    cvv: 'CVV',
+    qty: 'مقدار: {count}',
+    processing: 'پروسیسنگ...',
+    pay: '{amount} ادا کریں',
+    secure: 'محفوظ 256 بٹ SSL انکرپشن',
+  },
+  auth: {
+    welcomeBack: 'خوش آمدید',
+    createAccount: 'اکاؤنٹ بنائیں',
+    joinTagline: 'پریمیم شاپنگ کے تجربے کے لیے {name} میں شامل ہوں',
+    signInTagline: 'اپنے {name} اکاؤنٹ میں سائن ان کریں',
+    fullName: 'پورا نام',
+    email: 'ای میل',
+    password: 'پاس ورڈ',
+    phone: 'فون',
+    street: 'گلی کا پتہ',
+    city: 'شہر',
+    state: 'صوبہ',
+    zip: 'پوسٹل کوڈ',
+    signIn: 'سائن ان',
+    register: 'اکاؤنٹ بنائیں',
+    hasAccount: 'پہلے سے اکاؤنٹ ہے؟ سائن ان کریں',
+    noAccount: 'اکاؤنٹ نہیں ہے؟ رجسٹر کریں',
+    invalidCredentials: 'غلط ای میل یا پاس ورڈ۔ {email} / demo123 آزمائیں',
+    demo: 'ڈیمو: {email} / demo123',
+  },
+  account: {
+    title: 'میرا اکاؤنٹ',
+    welcome: 'خوش آمدید، {name}',
+    memberSince: '{date} سے رکن',
+    myWishlist: 'میری پسندیدہ فہرست',
+    signOut: 'سائن آؤٹ',
+    orderHistory: 'آرڈر کی تاریخ',
+    noOrders: 'ابھی تک کوئی آرڈر نہیں',
+    startShopping: 'خریداری شروع کریں',
+  },
+  wishlist: {
+    title: 'میری پسندیدہ فہرست',
+    saved: '{count} محفوظ آئٹم',
+    empty: 'آپ کی پسندیدہ فہرست خالی ہے',
+    emptyHint: 'اپنی پسندیدہ مصنوعات محفوظ کریں تاکہ بعد میں خرید سکیں۔',
+    browse: 'مصنوعات دیکھیں',
+  },
+  about: {
+    title: '{name} کے بارے میں',
+    subtitle:
+      'پریمیم 100% حلال گوشت آپ کی میز تک — تازہ، حسب ضرورت اور احتیاط سے پہنچایا گیا۔',
+    ourStory: 'ہماری کہانی',
+    storyP1:
+      '{name} ایک سادہ مشن کے ساتھ قائم ہوا: ہر خاندان کے لیے پریمیم حلال گوشت قابل رسائی بنانا، معیار، تازگی یا مذہبی تعمیل سے سمجھوتہ کیے بغیر۔ ہم سمجھتے ہیں کہ بہت سے گھروں کے لیے صحیح کٹ صحیح طریقے سے تیار کرنا عیش نہیں — یہ ضروری ہے۔',
+    storyP2:
+      'مرغی کے لیے ٹکڑوں کی تعداد منتخب کرنے سے لے کر گائے اور بکرے کے گوشت کے لیے نہاری یا کڑاہی کٹس کا انتخاب کرنے تک، ہم ہر آرڈر کے مرکز میں حسب ضرورت بناتے ہیں۔ ہمارے ماہر قصاب ہر آرڈر ہاتھ سے تیار کرتے ہیں، اور ہماری درجہ حرارت کنٹرولڈ ڈیلیوری یقینی بناتی ہے کہ آپ کا گوشت اسی دن کی طرح تازہ پہنچے جیسے کاٹا گیا تھا۔',
+    halalTitle: 'حلال سرٹیفیکیشن',
+    halalDesc:
+      '{name} کی ہر مصنوع تصدیق شدہ حلال سپلائرز سے حاصل کی جاتی ہے۔ ہمارا سپلائی چین مکمل طور پر قابل سراغ ہے، اور ہم حلال ذبح اور پروسیسنگ کے معیارات کی سخت تعمیل برقرار رکھتے ہیں۔',
+    freshDaily: 'روزانہ تازہ',
+    freshDailyDesc: 'ہر صبح قابل اعتماد فارموں سے حاصل',
+    premiumQuality: 'پریمیم معیار',
+    premiumQualityDesc: 'ماہر قصابوں کے ذریعے منتخب کردہ کٹس',
+    fastDelivery: 'تیز ڈیلیوری',
+    fastDeliveryDesc: 'درجہ حرارت کنٹرولڈ اسی دن کی ڈیلیوری',
+    deliveryTitle: 'ڈیلیوری کی معلومات',
+    delivery1: 'ہم اپنی پروسیسنگ سہولت سے 40 کلومیٹر کے دائرے میں ڈیلیوری کرتے ہیں۔',
+    delivery2: 'دوپہر 2 بجے سے پہلے کے آرڈرز اسی دن کی ڈیلیوری کے اہل ہیں۔',
+    delivery3: '500 کرون سے زیادہ کے آرڈرز پر مفت ڈیلیوری۔ معیاری ڈیلیوری فیس: 49 کرون۔',
+    delivery4: 'تمام مصنوعات ویکیوم سیلڈ اور انسولیٹڈ پیکجنگ میں منتقل کی جاتی ہیں۔',
+    contactTitle: 'ہم سے رابطہ کریں',
+    address: 'Tingvallavägen 11, 195 31 Märsta',
+    privacyTitle: 'رازداری کی پالیسی',
+    privacyText:
+      'ہم صرف وہ معلومات جمع کرتے ہیں جو آپ کے آرڈرز پر کارروائی کے لیے ضروری ہیں — نام، رابطے کی تفصیلات اور ڈیلیوری کا پتہ۔ ہم آپ کا ڈیٹا تیسرے فریق کو نہیں بیچتے۔ ادائیگی کی تفصیلات محفوظ طریقے سے ہمارے پارٹنرز کے ذریعے سنبھالی جاتی ہیں۔',
+    termsTitle: 'سروس کی شرائط',
+    termsText:
+      'تمام قیمتیں SEK میں دکھائی جاتی ہیں اور بغیر اطلاع کے تبدیل ہو سکتی ہیں۔ آرڈرز دستیابی پر منحصر ہیں۔ تمام گوشت کی مصنوعات پر حلال سرٹیفیکیشن لاگو ہوتا ہے۔ ڈیلیوری کے اوقات تخمینے ہیں اور مصروف اوقات میں مختلف ہو سکتے ہیں۔',
+  },
+  footer: {
+    tagline:
+      'پریمیم 100% حلال گوشت ڈیلیوری۔ تازہ، حسب ضرورت کٹس آپ کے دروازے تک بغیر کسی سمجھوتے کے معیار کے ساتھ پہنچائی جاتی ہیں۔',
+    shop: 'خریداری',
+    company: 'کمپنی',
+    contact: 'رابطہ',
+    rights: 'جملہ حقوق محفوظ ہیں۔',
+    phone: '072-585 50 50',
+    hours: 'ہر دن کھلا {hours}',
+  },
+  notFound: {
+    title: '404',
+    message: 'صفحہ نہیں ملا',
+    goHome: 'ہوم پر جائیں',
+  },
+  orderStatus: {
+    pending: 'زیر التوا',
+    confirmed: 'تصدیق شدہ',
+    preparing: 'تیاری میں',
+    'out-for-delivery': 'ڈیلیوری کے لیے روانہ',
+    delivered: 'پہنچا دیا گیا',
+  },
+};
\ No newline at end of file
diff --git a/src/i18n/types.ts b/src/i18n/types.ts
new file mode 100644
index 0000000..ac8957a
--- /dev/null
+++ b/src/i18n/types.ts
@@ -0,0 +1,16 @@
+export type Locale = 'en' | 'sv' | 'ur' | 'ar' | 'fa' | 'tr';
+
+export const LOCALES: { code: Locale; label: string; nativeLabel: string }[] = [
+  { code: 'sv', label: 'Swedish', nativeLabel: 'Svenska' },
+  { code: 'en', label: 'English', nativeLabel: 'English' },
+  { code: 'ur', label: 'Urdu', nativeLabel: 'اردو' },
+  { code: 'ar', label: 'Arabic', nativeLabel: 'العربية' },
+  { code: 'fa', label: 'Persian', nativeLabel: 'فارسی' },
+  { code: 'tr', label: 'Turkish', nativeLabel: 'Türkçe' },
+];
+
+export const DEFAULT_LOCALE: Locale = 'sv';
+
+export interface TranslationDict {
+  [key: string]: string | TranslationDict;
+}
\ No newline at end of file
diff --git a/src/infrastructure/data/demo-orders.data.ts b/src/infrastructure/data/demo-orders.data.ts
new file mode 100644
index 0000000..af227f7
--- /dev/null
+++ b/src/infrastructure/data/demo-orders.data.ts
@@ -0,0 +1,68 @@
+import { Order } from '@/domain/entities';
+import { CustomizationDomainService } from '@/domain/services/CustomizationDomainService';
+import { PRODUCT_CATALOG } from './products.data';
+
+function orderItem(
+  productId: string,
+  quantity: number,
+  customizationLabel: string
+) {
+  const product = PRODUCT_CATALOG.find((p) => p.id === productId)!;
+  const customization = CustomizationDomainService.getDefaultCustomization(
+    product.category
+  );
+  return {
+    id: CustomizationDomainService.getCartItemKey(productId, customization),
+    product,
+    quantity,
+    customization,
+    customizationLabel,
+  };
+}
+
+const demoAddress = {
+  street: 'Tingvallavägen 11',
+  city: 'Märsta',
+  state: 'Stockholm',
+  zip: '195 31',
+};
+
+export const DEMO_ORDERS: Order[] = [
+  {
+    id: 'KG-2026-0042',
+    items: [
+      orderItem('beef-steak', 2, '8 cuts · Karahi'),
+      orderItem('lamb-shoulder', 1, '8 cuts · Nihari'),
+    ],
+    total: 647,
+    status: 'delivered',
+    createdAt: '2026-06-10T14:30:00.000Z',
+    deliveryAddress: demoAddress,
+    paymentMethod: 'card',
+  },
+  {
+    id: 'KG-2026-0051',
+    items: [
+      orderItem('chicken-whole', 2, '8 cuts · Karahi'),
+      orderItem('beef-mince', 1, '8 cuts · Qeema'),
+      orderItem('fish-prawns', 1, 'Standard cut'),
+    ],
+    total: 556,
+    status: 'out-for-delivery',
+    createdAt: '2026-06-16T09:15:00.000Z',
+    deliveryAddress: demoAddress,
+    paymentMethod: 'swish',
+  },
+  {
+    id: 'KG-2026-0058',
+    items: [
+      orderItem('lamb-leg', 1, '8 cuts · Steak'),
+      orderItem('fish-salmon', 1, 'Standard cut'),
+    ],
+    total: 418,
+    status: 'preparing',
+    createdAt: '2026-06-17T08:00:00.000Z',
+    deliveryAddress: demoAddress,
+    paymentMethod: 'card',
+  },
+];
\ No newline at end of file
diff --git a/src/infrastructure/data/products.data.ts b/src/infrastructure/data/products.data.ts
new file mode 100644
index 0000000..544a95d
--- /dev/null
+++ b/src/infrastructure/data/products.data.ts
@@ -0,0 +1,197 @@
+import { Product } from '@/domain/entities';
+import { getProductImages } from '@/infrastructure/images';
+
+type ProductDefinition = Omit<Product, 'image' | 'images'>;
+
+const PRODUCT_DEFINITIONS: ProductDefinition[] = [
+  {
+    id: 'chicken-whole',
+    slug: 'whole-chicken',
+    category: 'chicken',
+    price: 129,
+    priceUnitKey: 'perBird',
+    badgeKey: 'bestseller',
+    inStock: true,
+    featured: true,
+    weight: '1.2–1.5 kg',
+    tags: ['fresh', 'whole', 'popular'],
+  },
+  {
+    id: 'chicken-breast',
+    slug: 'chicken-breast',
+    category: 'chicken',
+    price: 99,
+    priceUnitKey: 'perPack',
+    inStock: true,
+    featured: true,
+    weight: '500g–1kg',
+    tags: ['fresh', 'boneless', 'lean'],
+  },
+  {
+    id: 'chicken-thighs',
+    slug: 'chicken-thighs',
+    category: 'chicken',
+    price: 85,
+    priceUnitKey: 'perPack',
+    inStock: true,
+    featured: false,
+    weight: '500g–1kg',
+    tags: ['fresh', 'juicy'],
+  },
+  {
+    id: 'chicken-wings',
+    slug: 'chicken-wings',
+    category: 'chicken',
+    price: 79,
+    priceUnitKey: 'perPack',
+    inStock: true,
+    featured: false,
+    tags: ['fresh', 'party'],
+  },
+  {
+    id: 'beef-nihari',
+    slug: 'beef-for-nihari',
+    category: 'beef',
+    price: 149,
+    priceUnitKey: 'perKg',
+    badgeKey: 'chefsPick',
+    inStock: true,
+    featured: true,
+    weight: '1 kg',
+    tags: ['fresh', 'traditional'],
+  },
+  {
+    id: 'beef-steak',
+    slug: 'premium-beef-steak',
+    category: 'beef',
+    price: 229,
+    priceUnitKey: 'perKg',
+    badgeKey: 'premium',
+    inStock: true,
+    featured: true,
+    weight: '1 kg',
+    tags: ['premium', 'steak'],
+  },
+  {
+    id: 'beef-mince',
+    slug: 'beef-mince',
+    category: 'beef',
+    price: 119,
+    priceUnitKey: 'perKg',
+    inStock: true,
+    featured: false,
+    weight: '500g–1kg',
+    tags: ['fresh', 'mince'],
+  },
+  {
+    id: 'beef-boneless',
+    slug: 'boneless-beef-cubes',
+    category: 'beef',
+    price: 169,
+    priceUnitKey: 'perKg',
+    inStock: true,
+    featured: false,
+    weight: '1 kg',
+    tags: ['fresh', 'boneless'],
+  },
+  {
+    id: 'lamb-shoulder',
+    slug: 'lamb-shoulder',
+    category: 'lamb',
+    price: 189,
+    priceUnitKey: 'perKg',
+    badgeKey: 'popular',
+    inStock: true,
+    featured: true,
+    weight: '1 kg',
+    tags: ['fresh', 'traditional'],
+  },
+  {
+    id: 'lamb-leg',
+    slug: 'lamb-leg',
+    category: 'lamb',
+    price: 219,
+    priceUnitKey: 'perKg',
+    inStock: true,
+    featured: true,
+    weight: '1–2 kg',
+    tags: ['premium', 'roast'],
+  },
+  {
+    id: 'lamb-chops',
+    slug: 'lamb-chops',
+    category: 'lamb',
+    price: 249,
+    priceUnitKey: 'perKg',
+    badgeKey: 'premium',
+    inStock: true,
+    featured: false,
+    weight: '500g',
+    tags: ['premium', 'grill'],
+  },
+  {
+    id: 'lamb-mince',
+    slug: 'lamb-mince',
+    category: 'lamb',
+    price: 159,
+    priceUnitKey: 'perKg',
+    inStock: true,
+    featured: false,
+    weight: '500g–1kg',
+    tags: ['fresh', 'mince'],
+  },
+  {
+    id: 'fish-salmon',
+    slug: 'atlantic-salmon-fillet',
+    category: 'fish',
+    price: 199,
+    priceUnitKey: 'perKg',
+    badgeKey: 'frozen',
+    inStock: true,
+    featured: true,
+    weight: '500g',
+    tags: ['frozen', 'fillet'],
+  },
+  {
+    id: 'fish-rohu',
+    slug: 'rohu-fish',
+    category: 'fish',
+    price: 119,
+    priceUnitKey: 'perKg',
+    badgeKey: 'frozen',
+    inStock: true,
+    featured: true,
+    weight: '1–1.5 kg',
+    tags: ['frozen', 'whole'],
+  },
+  {
+    id: 'fish-prawns',
+    slug: 'jumbo-prawns',
+    category: 'fish',
+    price: 179,
+    priceUnitKey: 'perKg',
+    badgeKey: 'frozen',
+    inStock: true,
+    featured: false,
+    weight: '500g',
+    tags: ['frozen', 'seafood'],
+  },
+  {
+    id: 'fish-basa',
+    slug: 'basa-fillet',
+    category: 'fish',
+    price: 109,
+    priceUnitKey: 'perKg',
+    badgeKey: 'frozen',
+    inStock: true,
+    featured: false,
+    weight: '500g',
+    tags: ['frozen', 'fillet', 'mild'],
+  },
+];
+
+/** Images are attached from the central catalog — not duplicated here */
+export const PRODUCT_CATALOG: Product[] = PRODUCT_DEFINITIONS.map((product) => ({
+  ...product,
+  ...getProductImages(product.id),
+}));
\ No newline at end of file
diff --git a/src/infrastructure/i18n/I18nTranslationService.ts b/src/infrastructure/i18n/I18nTranslationService.ts
new file mode 100644
index 0000000..65da49a
--- /dev/null
+++ b/src/infrastructure/i18n/I18nTranslationService.ts
@@ -0,0 +1,18 @@
+import { ITranslationService } from '@/application/ports/ITranslationService';
+import { createTranslator } from '@/i18n';
+import { Locale } from '@/i18n/types';
+
+/**
+ * INFRASTRUCTURE — Wraps existing i18n dictionaries behind a port
+ */
+export class I18nTranslationService implements ITranslationService {
+  constructor(private readonly locale: Locale) {}
+
+  translate(
+    path: string,
+    params?: Record<string, string | number>
+  ): string {
+    const t = createTranslator(this.locale);
+    return t(path, params);
+  }
+}
\ No newline at end of file
diff --git a/src/infrastructure/images/catalog.ts b/src/infrastructure/images/catalog.ts
new file mode 100644
index 0000000..e1306d9
--- /dev/null
+++ b/src/infrastructure/images/catalog.ts
@@ -0,0 +1,113 @@
+/**
+ * ═══════════════════════════════════════════════════════════════════
+ *  SITE IMAGE CATALOG
+ * ═══════════════════════════════════════════════════════════════════
+ *
+ *  ALL image files live in ONE folder on disk:
+ *
+ *    public/images/site/
+ *
+ *  To change an image: replace the file in that folder (same filename).
+ *  You do NOT need to edit this file unless you add a NEW product or page.
+ *
+ *  Filename guide — see public/images/site/README.txt
+ */
+
+import type { Category } from '@/domain/entities';
+
+/** Single folder — every website image file is here */
+export const IMAGE_FOLDER = '/images/site';
+
+/** Build path to a file in the site image folder */
+export function siteImage(filename: string): string {
+  return `${IMAGE_FOLDER}/${filename}`;
+}
+
+export type ProductImageId =
+  | 'chicken-whole'
+  | 'chicken-breast'
+  | 'chicken-thighs'
+  | 'chicken-wings'
+  | 'beef-nihari'
+  | 'beef-steak'
+  | 'beef-mince'
+  | 'beef-boneless'
+  | 'lamb-shoulder'
+  | 'lamb-leg'
+  | 'lamb-chops'
+  | 'lamb-mince'
+  | 'fish-salmon'
+  | 'fish-rohu'
+  | 'fish-prawns'
+  | 'fish-basa';
+
+export type OfferImageId =
+  | 'chicken-wings-pl'
+  | 'lamb-steak-ireland'
+  | 'beef-mince-irl';
+
+type ImageRef =
+  | { type: 'product'; id: ProductImageId }
+  | { type: 'category'; id: Category };
+
+interface ProductImageEntry {
+  main: string;
+  gallery?: string[];
+}
+
+function product(id: ProductImageId, second?: string): ProductImageEntry {
+  const main = siteImage(`${id}.jpg`);
+  if (second) {
+    return { main, gallery: [main, siteImage(second)] };
+  }
+  return { main };
+}
+
+/** ─── Brand ─── */
+export const BRAND_IMAGES = {
+  logo: siteImage('logo.jpeg'),
+} as const;
+
+/** ─── Page backgrounds ─── */
+export const PAGE_IMAGES = {
+  hero: siteImage('hero.jpg'),
+  aboutMeat: siteImage('about.jpg'),
+  weeklyOffersBanner: siteImage('weekly-offers.jpg'),
+} as const;
+
+/** ─── Category tiles ─── */
+export const CATEGORY_IMAGES: Record<Category, string> = {
+  chicken: siteImage('category-chicken.jpg'),
+  beef: siteImage('category-beef.jpg'),
+  lamb: siteImage('category-lamb.jpg'),
+  fish: siteImage('category-fish.jpg'),
+};
+
+/** ─── Product photos (filename = product id) ─── */
+export const PRODUCT_IMAGES: Record<ProductImageId, ProductImageEntry> = {
+  'chicken-whole': product('chicken-whole', 'chicken-whole-2.jpg'),
+  'chicken-breast': product('chicken-breast', 'chicken-breast-2.jpg'),
+  'chicken-thighs': product('chicken-thighs'),
+  'chicken-wings': product('chicken-wings'),
+  'beef-nihari': product('beef-nihari', 'beef-nihari-2.jpg'),
+  'beef-steak': product('beef-steak', 'beef-steak-2.jpg'),
+  'beef-mince': product('beef-mince'),
+  'beef-boneless': product('beef-boneless'),
+  'lamb-shoulder': product('lamb-shoulder', 'lamb-shoulder-2.jpg'),
+  'lamb-leg': product('lamb-leg'),
+  'lamb-chops': product('lamb-chops'),
+  'lamb-mince': product('lamb-mince'),
+  'fish-salmon': product('fish-salmon', 'fish-salmon-2.jpg'),
+  'fish-rohu': product('fish-rohu'),
+  'fish-prawns': product('fish-prawns'),
+  'fish-basa': product('fish-basa'),
+};
+
+/** ─── Weekly offers (reuse product/category images) ─── */
+export const OFFER_IMAGE_REFS: Record<OfferImageId, ImageRef> = {
+  'chicken-wings-pl': { type: 'product', id: 'chicken-wings' },
+  'lamb-steak-ireland': { type: 'category', id: 'lamb' },
+  'beef-mince-irl': { type: 'product', id: 'beef-mince' },
+};
+
+export const IMAGE_QUALITY = 90;
\ No newline at end of file
diff --git a/src/infrastructure/images/index.ts b/src/infrastructure/images/index.ts
new file mode 100644
index 0000000..6002c24
--- /dev/null
+++ b/src/infrastructure/images/index.ts
@@ -0,0 +1,80 @@
+/**
+ * Public API for the site image catalog.
+ * Import from here (or @/lib/images re-export) everywhere you need an image URL.
+ */
+import type { Category } from '@/domain/entities';
+import {
+  IMAGE_FOLDER,
+  siteImage,
+  BRAND_IMAGES,
+  PAGE_IMAGES,
+  CATEGORY_IMAGES,
+  PRODUCT_IMAGES,
+  OFFER_IMAGE_REFS,
+  IMAGE_QUALITY,
+  type ProductImageId,
+  type OfferImageId,
+} from './catalog';
+
+export {
+  IMAGE_FOLDER,
+  siteImage,
+  BRAND_IMAGES,
+  PAGE_IMAGES,
+  CATEGORY_IMAGES,
+  PRODUCT_IMAGES,
+  OFFER_IMAGE_REFS,
+  IMAGE_QUALITY,
+  type ProductImageId,
+  type OfferImageId,
+};
+
+/** Resolved product image fields for Product entity */
+export function getProductImages(productId: string): {
+  image: string;
+  images: string[];
+} {
+  const entry = PRODUCT_IMAGES[productId as ProductImageId];
+  if (!entry) {
+    throw new Error(
+      `[site-images] Missing product image for "${productId}". Add it to infrastructure/images/catalog.ts`
+    );
+  }
+  return {
+    image: entry.main,
+    images: entry.gallery ?? [entry.main],
+  };
+}
+
+/** Single URL for a weekly offer card */
+export function getOfferImage(offerId: string): string {
+  const ref = OFFER_IMAGE_REFS[offerId as OfferImageId];
+  if (!ref) {
+    throw new Error(
+      `[site-images] Missing offer image ref for "${offerId}". Add it to infrastructure/images/catalog.ts`
+    );
+  }
+  if (ref.type === 'product') {
+    return getProductImages(ref.id).image;
+  }
+  return CATEGORY_IMAGES[ref.id];
+}
+
+/** Category tile image */
+export function getCategoryImage(category: Category): string {
+  return CATEGORY_IMAGES[category];
+}
+
+/**
+ * Legacy shape used across components — built from the catalog above.
+ * Prefer getProductImages / PAGE_IMAGES / BRAND_IMAGES in new code.
+ */
+export const IMAGES = {
+  logo: BRAND_IMAGES.logo,
+  hero: PAGE_IMAGES.hero,
+  aboutMeat: PAGE_IMAGES.aboutMeat,
+  categories: CATEGORY_IMAGES,
+  products: Object.fromEntries(
+    Object.entries(PRODUCT_IMAGES).map(([id, entry]) => [id, entry.main])
+  ) as Record<ProductImageId, string>,
+} as const;
\ No newline at end of file
diff --git a/src/infrastructure/persistence/zustand/authStore.ts b/src/infrastructure/persistence/zustand/authStore.ts
new file mode 100644
index 0000000..b60b5ec
--- /dev/null
+++ b/src/infrastructure/persistence/zustand/authStore.ts
@@ -0,0 +1,107 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { Address, Order, User } from '@/domain/entities';
+import { AuthDomainService, RegisterInput } from '@/domain/services/AuthDomainService';
+import { IAuthRepository } from '@/application/ports/IAuthRepository';
+import { DEMO_EMAIL } from '@/lib/constants';
+import { DEMO_ORDERS } from '@/infrastructure/data/demo-orders.data';
+
+interface AuthState {
+  user: User | null;
+  orders: Order[];
+  isAuthenticated: boolean;
+}
+
+interface AuthInternalActions {
+  _patch: (patch: Partial<AuthState>) => void;
+}
+
+const DEMO_USER: User = {
+  id: 'demo-1',
+  name: 'Ahmed Khan',
+  email: DEMO_EMAIL,
+  phone: '+46 72 585 50 50',
+  address: {
+    street: 'Tingvallavägen 11',
+    city: 'Märsta',
+    state: 'Stockholm',
+    zip: '195 31',
+  },
+  createdAt: '2025-03-15T10:00:00.000Z',
+};
+
+export const useAuthStore = create<AuthState & AuthInternalActions>()(
+  persist(
+    (set) => ({
+      user: null,
+      orders: [],
+      isAuthenticated: false,
+      _patch: (patch) => set(patch),
+    }),
+    { name: 'kott-gard-auth' }
+  )
+);
+
+export class ZustandAuthRepository implements IAuthRepository {
+  private getState() {
+    return useAuthStore.getState();
+  }
+
+  getUser(): User | null {
+    return this.getState().user;
+  }
+
+  getOrders(): Order[] {
+    return this.getState().orders;
+  }
+
+  isAuthenticated(): boolean {
+    return this.getState().isAuthenticated;
+  }
+
+  login(email: string, password: string): boolean {
+    const state = this.getState();
+
+    if (
+      email === DEMO_EMAIL &&
+      AuthDomainService.isDemoCredentials(email, password)
+    ) {
+      state._patch({
+        user: DEMO_USER,
+        isAuthenticated: true,
+        orders:
+          state.orders.length > 0 ? state.orders : DEMO_ORDERS,
+      });
+      return true;
+    }
+
+    if (AuthDomainService.emailMatchesStoredUser(state.user, email)) {
+      state._patch({ isAuthenticated: true });
+      return true;
+    }
+
+    return false;
+  }
+
+  register(data: RegisterInput): boolean {
+    const user = AuthDomainService.createUser(data);
+    this.getState()._patch({ user, isAuthenticated: true });
+    return true;
+  }
+
+  logout(): void {
+    this.getState()._patch({ isAuthenticated: false });
+  }
+
+  updateProfile(data: Partial<User>): void {
+    const current = this.getState().user;
+    if (current) {
+      this.getState()._patch({ user: { ...current, ...data } });
+    }
+  }
+
+  addOrder(order: Order): void {
+    const orders = this.getState().orders;
+    this.getState()._patch({ orders: [order, ...orders] });
+  }
+}
\ No newline at end of file
diff --git a/src/infrastructure/persistence/zustand/cartStore.ts b/src/infrastructure/persistence/zustand/cartStore.ts
new file mode 100644
index 0000000..249de42
--- /dev/null
+++ b/src/infrastructure/persistence/zustand/cartStore.ts
@@ -0,0 +1,70 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { CartItem, Product, ProductCustomization } from '@/domain/entities';
+import { CartDomainService } from '@/domain/services/CartDomainService';
+import { ICartRepository } from '@/application/ports/ICartRepository';
+
+interface CartState {
+  items: CartItem[];
+}
+
+interface CartActions {
+  _setItems: (items: CartItem[]) => void;
+}
+
+/**
+ * INFRASTRUCTURE — Zustand store (state + persistence only)
+ */
+export const useCartStore = create<CartState & CartActions>()(
+  persist(
+    (set) => ({
+      items: [],
+      _setItems: (items) => set({ items }),
+    }),
+    { name: 'kott-gard-cart' }
+  )
+);
+
+/**
+ * INFRASTRUCTURE — Cart repository adapter (implements application port)
+ */
+export class ZustandCartRepository implements ICartRepository {
+  getItems(): CartItem[] {
+    return useCartStore.getState().items;
+  }
+
+  setItems(items: CartItem[]): void {
+    useCartStore.getState()._setItems(items);
+  }
+
+  addItem(
+    product: Product,
+    customization: ProductCustomization,
+    customizationLabel: string,
+    quantity = 1
+  ): void {
+    const items = this.getItems();
+    const next = CartDomainService.addItem(
+      items,
+      product,
+      customization,
+      customizationLabel,
+      quantity
+    );
+    this.setItems(next);
+  }
+
+  removeItem(id: string): void {
+    this.setItems(CartDomainService.removeItem(this.getItems(), id));
+  }
+
+  updateQuantity(id: string, quantity: number): void {
+    this.setItems(
+      CartDomainService.updateQuantity(this.getItems(), id, quantity)
+    );
+  }
+
+  clearCart(): void {
+    this.setItems([]);
+  }
+}
\ No newline at end of file
diff --git a/src/infrastructure/persistence/zustand/localeStore.ts b/src/infrastructure/persistence/zustand/localeStore.ts
new file mode 100644
index 0000000..e5c3b36
--- /dev/null
+++ b/src/infrastructure/persistence/zustand/localeStore.ts
@@ -0,0 +1,18 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { DEFAULT_LOCALE, Locale } from '@/i18n/types';
+
+interface LocaleState {
+  locale: Locale;
+  setLocale: (locale: Locale) => void;
+}
+
+export const useLocaleStore = create<LocaleState>()(
+  persist(
+    (set) => ({
+      locale: DEFAULT_LOCALE,
+      setLocale: (locale) => set({ locale }),
+    }),
+    { name: 'kott-gard-locale' }
+  )
+);
\ No newline at end of file
diff --git a/src/infrastructure/persistence/zustand/wishlistStore.ts b/src/infrastructure/persistence/zustand/wishlistStore.ts
new file mode 100644
index 0000000..3c59060
--- /dev/null
+++ b/src/infrastructure/persistence/zustand/wishlistStore.ts
@@ -0,0 +1,51 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { Product } from '@/domain/entities';
+import { IWishlistRepository } from '@/application/ports/IWishlistRepository';
+
+interface WishlistState {
+  items: Product[];
+  _setItems: (items: Product[]) => void;
+}
+
+export const useWishlistStore = create<WishlistState>()(
+  persist(
+    (set) => ({
+      items: [],
+      _setItems: (items) => set({ items }),
+    }),
+    { name: 'kott-gard-wishlist' }
+  )
+);
+
+export class ZustandWishlistRepository implements IWishlistRepository {
+  getItems(): Product[] {
+    return useWishlistStore.getState().items;
+  }
+
+  private setItems(items: Product[]): void {
+    useWishlistStore.getState()._setItems(items);
+  }
+
+  addItem(product: Product): void {
+    if (!this.isInWishlist(product.id)) {
+      this.setItems([...this.getItems(), product]);
+    }
+  }
+
+  removeItem(productId: string): void {
+    this.setItems(this.getItems().filter((p) => p.id !== productId));
+  }
+
+  isInWishlist(productId: string): boolean {
+    return this.getItems().some((p) => p.id === productId);
+  }
+
+  toggleItem(product: Product): void {
+    if (this.isInWishlist(product.id)) {
+      this.removeItem(product.id);
+    } else {
+      this.addItem(product);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/infrastructure/repositories/InMemoryProductRepository.ts b/src/infrastructure/repositories/InMemoryProductRepository.ts
new file mode 100644
index 0000000..8d56539
--- /dev/null
+++ b/src/infrastructure/repositories/InMemoryProductRepository.ts
@@ -0,0 +1,30 @@
+import { Product } from '@/domain/entities';
+import { IProductRepository } from '@/application/ports/IProductRepository';
+import { PRODUCT_CATALOG } from '@/infrastructure/data/products.data';
+
+/**
+ * INFRASTRUCTURE — In-memory product source (replace with API later)
+ */
+export class InMemoryProductRepository implements IProductRepository {
+  constructor(private readonly catalog: Product[] = PRODUCT_CATALOG) {}
+
+  findAll(): Product[] {
+    return [...this.catalog];
+  }
+
+  findBySlug(slug: string): Product | undefined {
+    return this.catalog.find((p) => p.slug === slug);
+  }
+
+  findByCategory(category: string): Product[] {
+    return this.catalog.filter((p) => p.category === category);
+  }
+
+  findFeatured(): Product[] {
+    return this.catalog.filter((p) => p.featured);
+  }
+
+  findById(id: string): Product | undefined {
+    return this.catalog.find((p) => p.id === id);
+  }
+}
\ No newline at end of file
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
new file mode 100644
index 0000000..3e686ad
--- /dev/null
+++ b/src/lib/constants.ts
@@ -0,0 +1,39 @@
+import { CutCount, CuttingStyleKey } from '@/types';
+import { CATEGORY_IMAGES } from '@/infrastructure/images';
+
+export const CUT_COUNTS: CutCount[] = [4, 8, 10, 12];
+
+export const CUTTING_STYLE_KEYS: CuttingStyleKey[] = [
+  'nihari',
+  'karahi',
+  'qeema',
+  'boneless',
+  'steak',
+];
+
+export const MEAT_CATEGORIES = ['chicken', 'beef', 'lamb'] as const;
+
+export const CATEGORY_IDS = ['chicken', 'beef', 'lamb', 'fish'] as const;
+
+export { CATEGORY_IMAGES };
+
+export const SITE_NAME = 'Kött Gård';
+export const SITE_EMAIL = 'hello@kottgard.se';
+export const DEMO_EMAIL = 'demo@kottgard.se';
+export const SITE_PHONE = '+46 72 585 50 50';
+export const SITE_PHONE_DISPLAY = '072-585 50 50';
+export const SITE_ADDRESS = 'Tingvallavägen 11, 195 31 Märsta';
+export const SITE_LOCATION = 'Märsta · Sverige';
+export const SITE_HOURS = '10:00–19:00';
+export const FACEBOOK_URL = 'https://www.facebook.com/kottgard/';
+export const INSTAGRAM_URL = 'https://www.instagram.com/kottgard';
+export const MAPS_URL = 'https://share.google/fUkkhDNlhDTcImKo5';
+
+const WHATSAPP_BASE = 'Hej Kött Gård! Jag vill beställa';
+
+export function whatsappOrderUrl(product?: string): string {
+  const text = product ? `${WHATSAPP_BASE} ${product}.` : `${WHATSAPP_BASE}.`;
+  return `https://wa.me/46725855050?text=${encodeURIComponent(text)}`;
+}
+
+export const WHATSAPP_URL = whatsappOrderUrl();
\ No newline at end of file
diff --git a/src/lib/customization.ts b/src/lib/customization.ts
new file mode 100644
index 0000000..4002adc
--- /dev/null
+++ b/src/lib/customization.ts
@@ -0,0 +1,19 @@
+/**
+ * Backward-compatible facade — logic lives in domain layer
+ */
+export {
+  CustomizationDomainService,
+  type Translator,
+} from '@/domain/services/CustomizationDomainService';
+
+import { CustomizationDomainService } from '@/domain/services/CustomizationDomainService';
+
+export const getDefaultCustomization =
+  CustomizationDomainService.getDefaultCustomization;
+export const getCustomizationKey =
+  CustomizationDomainService.getCustomizationKey;
+export const getCustomizationLabel =
+  CustomizationDomainService.getCustomizationLabel;
+export const getCartItemKey = CustomizationDomainService.getCartItemKey;
+export const updateMeatCustomization =
+  CustomizationDomainService.updateMeatCustomization;
\ No newline at end of file
diff --git a/src/lib/demo-orders.ts b/src/lib/demo-orders.ts
new file mode 100644
index 0000000..1297fea
--- /dev/null
+++ b/src/lib/demo-orders.ts
@@ -0,0 +1 @@
+export { DEMO_ORDERS } from '@/infrastructure/data/demo-orders.data';
\ No newline at end of file
diff --git a/src/lib/images.ts b/src/lib/images.ts
new file mode 100644
index 0000000..0a29f71
--- /dev/null
+++ b/src/lib/images.ts
@@ -0,0 +1,6 @@
+/**
+ * Re-export — all image FILES live in one folder:
+ *   public/images/site/
+ * Paths are built in: src/infrastructure/images/catalog.ts
+ */
+export * from '@/infrastructure/images';
\ No newline at end of file
diff --git a/src/lib/offers.ts b/src/lib/offers.ts
new file mode 100644
index 0000000..d9e8eda
--- /dev/null
+++ b/src/lib/offers.ts
@@ -0,0 +1,37 @@
+import { WeeklyOffer } from '@/types';
+import { getOfferImage } from '@/infrastructure/images';
+
+export const weeklyOffers: WeeklyOffer[] = [
+  {
+    id: 'chicken-wings-pl',
+    nameKey: 'offers.items.chickenWings',
+    badgeKey: 'fresh',
+    price: 49.99,
+    originalPrice: 59.99,
+    priceUnitKey: 'perKg',
+    image: getOfferImage('chicken-wings-pl'),
+    whatsappProduct: 'Kycklingvingar färsk PL',
+    productSlug: 'chicken-wings',
+  },
+  {
+    id: 'lamb-steak-ireland',
+    nameKey: 'offers.items.lambSteak',
+    badgeKey: 'halal',
+    price: 204.99,
+    priceUnitKey: 'perKg',
+    image: getOfferImage('lamb-steak-ireland'),
+    whatsappProduct: 'Lammstek färsk Ireland',
+    productSlug: 'lamb-leg',
+  },
+  {
+    id: 'beef-mince-irl',
+    nameKey: 'offers.items.beefMince',
+    badgeKey: 'fresh',
+    price: 139.99,
+    originalPrice: 159.99,
+    priceUnitKey: 'perKg',
+    image: getOfferImage('beef-mince-irl'),
+    whatsappProduct: 'Nötfärs 5% fett IRL',
+    productSlug: 'beef-mince',
+  },
+];
\ No newline at end of file
diff --git a/src/lib/product-i18n.ts b/src/lib/product-i18n.ts
new file mode 100644
index 0000000..f51ce1f
--- /dev/null
+++ b/src/lib/product-i18n.ts
@@ -0,0 +1,33 @@
+import { Product } from '@/domain/entities';
+import { LocalizedProduct } from '@/application/dtos/LocalizedProduct';
+import { LocalizeProductUseCase } from '@/application/use-cases/catalog/LocalizeProduct';
+import { ITranslationService } from '@/application/ports/ITranslationService';
+
+type Translator = (path: string, params?: Record<string, string | number>) => string;
+
+export type { LocalizedProduct };
+
+class TranslatorAdapter implements ITranslationService {
+  constructor(private readonly t: Translator) {}
+
+  translate(
+    path: string,
+    params?: Record<string, string | number>
+  ): string {
+    return this.t(path, params);
+  }
+}
+
+export function localizeProduct(product: Product, t: Translator): LocalizedProduct {
+  return new LocalizeProductUseCase(new TranslatorAdapter(t)).execute(product);
+}
+
+export function localizeCategory(
+  categoryId: Product['category'],
+  t: Translator
+): { name: string; description: string } {
+  return {
+    name: t(`categories.${categoryId}.name`),
+    description: t(`categories.${categoryId}.description`),
+  };
+}
\ No newline at end of file
diff --git a/src/lib/products.ts b/src/lib/products.ts
new file mode 100644
index 0000000..e7f1c21
--- /dev/null
+++ b/src/lib/products.ts
@@ -0,0 +1,18 @@
+import { container } from '@/application/container';
+
+/**
+ * Backward-compatible facade — data lives in infrastructure layer
+ */
+export const products = container.productRepository.findAll();
+
+export function getProductBySlug(slug: string) {
+  return container.getProductBySlug.execute(slug);
+}
+
+export function getProductsByCategory(category: string) {
+  return container.productRepository.findByCategory(category);
+}
+
+export function getFeaturedProducts() {
+  return container.productRepository.findFeatured();
+}
\ No newline at end of file
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..89fd9e3
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,32 @@
+import { clsx, type ClassValue } from 'clsx';
+
+export function cn(...inputs: ClassValue[]) {
+  return clsx(inputs);
+}
+
+export function formatPrice(price: number, locale = 'sv-SE'): string {
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency: 'SEK',
+  }).format(price);
+}
+
+export function getFormatLocale(locale: string): string {
+  const map: Record<string, string> = {
+    en: 'en-US',
+    sv: 'sv-SE',
+    ur: 'ur-PK',
+    ar: 'ar-SA',
+    fa: 'fa-IR',
+    tr: 'tr-TR',
+  };
+  return map[locale] ?? 'en-US';
+}
+
+export function formatDate(date: string): string {
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }).format(new Date(date));
+}
\ No newline at end of file
diff --git a/src/presentation/hooks/useAuth.ts b/src/presentation/hooks/useAuth.ts
new file mode 100644
index 0000000..1c90de9
--- /dev/null
+++ b/src/presentation/hooks/useAuth.ts
@@ -0,0 +1,25 @@
+'use client';
+
+import { Address, Order, User } from '@/domain/entities';
+import { RegisterInput } from '@/domain/services/AuthDomainService';
+import { container } from '@/application/container';
+import { useAuthStore } from '@/infrastructure/persistence/zustand/authStore';
+
+export function useAuth() {
+  const user = useAuthStore((s) => s.user);
+  const orders = useAuthStore((s) => s.orders);
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+
+  return {
+    user,
+    orders,
+    isAuthenticated,
+    login: (email: string, password: string) =>
+      container.login.execute(email, password),
+    register: (data: RegisterInput) => container.register.execute(data),
+    logout: () => container.authRepository.logout(),
+    updateProfile: (data: Partial<User>) =>
+      container.authRepository.updateProfile(data),
+    addOrder: (order: Order) => container.authRepository.addOrder(order),
+  };
+}
\ No newline at end of file
diff --git a/src/presentation/hooks/useCart.ts b/src/presentation/hooks/useCart.ts
new file mode 100644
index 0000000..d0478ca
--- /dev/null
+++ b/src/presentation/hooks/useCart.ts
@@ -0,0 +1,39 @@
+'use client';
+
+import { Product, ProductCustomization } from '@/domain/entities';
+import { container } from '@/application/container';
+import { useCartStore } from '@/infrastructure/persistence/zustand/cartStore';
+
+/**
+ * PRESENTATION — Cart hook: React state + use cases (Clean Architecture boundary)
+ */
+export function useCart() {
+  const items = useCartStore((s) => s.items);
+  const summary = container.getCartSummary.execute();
+
+  return {
+    items,
+    summary,
+    addItem: (
+      product: Product,
+      customization: ProductCustomization,
+      customizationLabel: string,
+      quantity?: number
+    ) => {
+      container.addToCart.execute(
+        product,
+        customization,
+        customizationLabel,
+        quantity
+      );
+    },
+    removeItem: (id: string) => container.removeFromCart.execute(id),
+    updateQuantity: (id: string, quantity: number) =>
+      container.updateCartQuantity.execute(id, quantity),
+    clearCart: () => container.cartRepository.clearCart(),
+    /** @deprecated Use summary.subtotal */
+    getTotal: () => summary.subtotal,
+    /** @deprecated Use summary.itemCount */
+    getItemCount: () => summary.itemCount,
+  };
+}
\ No newline at end of file
diff --git a/src/presentation/hooks/useCatalog.ts b/src/presentation/hooks/useCatalog.ts
new file mode 100644
index 0000000..28442f1
--- /dev/null
+++ b/src/presentation/hooks/useCatalog.ts
@@ -0,0 +1,37 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Category, SortOption } from '@/domain/entities';
+import { CategoryFilter } from '@/domain/services/CatalogDomainService';
+import { container } from '@/application/container';
+import { useLocaleStore } from '@/infrastructure/persistence/zustand/localeStore';
+import { LocalizedProduct } from '@/application/dtos/LocalizedProduct';
+
+export function useCatalogFilter(input: {
+  category: CategoryFilter;
+  searchQuery: string;
+  sortBy: SortOption;
+}): LocalizedProduct[] {
+  const locale = useLocaleStore((s) => s.locale);
+
+  return useMemo(() => {
+    return container.createFilterProducts(locale).execute(input);
+  }, [locale, input.category, input.searchQuery, input.sortBy]);
+}
+
+export function useLocalizedProduct(
+  productId: string
+): LocalizedProduct | undefined {
+  const locale = useLocaleStore((s) => s.locale);
+
+  return useMemo(() => {
+    const product = container.productRepository.findById(productId);
+    if (!product) return undefined;
+    return container.createLocalizeProduct(locale).execute(product);
+  }, [locale, productId]);
+}
+
+export { FilterProductsUseCase as CatalogHelpers } from '@/application/use-cases/catalog/FilterProducts';
+
+export type { CategoryFilter };
+export type { Category };
\ No newline at end of file
diff --git a/src/presentation/hooks/useCheckout.ts b/src/presentation/hooks/useCheckout.ts
new file mode 100644
index 0000000..d35e0db
--- /dev/null
+++ b/src/presentation/hooks/useCheckout.ts
@@ -0,0 +1,13 @@
+'use client';
+
+import { Address } from '@/domain/entities';
+import { container } from '@/application/container';
+
+export function useCheckout() {
+  return {
+    placeOrder: (input: {
+      deliveryAddress: Address;
+      paymentMethod: string;
+    }) => container.placeOrder.execute(input),
+  };
+}
\ No newline at end of file
diff --git a/src/presentation/hooks/useWishlist.ts b/src/presentation/hooks/useWishlist.ts
new file mode 100644
index 0000000..570b975
--- /dev/null
+++ b/src/presentation/hooks/useWishlist.ts
@@ -0,0 +1,19 @@
+'use client';
+
+import { Product } from '@/domain/entities';
+import { container } from '@/application/container';
+import { useWishlistStore } from '@/infrastructure/persistence/zustand/wishlistStore';
+
+export function useWishlist() {
+  const items = useWishlistStore((s) => s.items);
+
+  return {
+    items,
+    isInWishlist: (productId: string) =>
+      container.wishlistRepository.isInWishlist(productId),
+    toggleItem: (product: Product) =>
+      container.toggleWishlist.execute(product),
+    removeItem: (productId: string) =>
+      container.wishlistRepository.removeItem(productId),
+  };
+}
\ No newline at end of file
diff --git a/src/store/auth.ts b/src/store/auth.ts
new file mode 100644
index 0000000..4e733e6
--- /dev/null
+++ b/src/store/auth.ts
@@ -0,0 +1,5 @@
+/**
+ * Backward-compatible re-export — prefer @/presentation/hooks/useAuth
+ */
+export { useAuthStore } from '@/infrastructure/persistence/zustand/authStore';
+export { useAuth } from '@/presentation/hooks/useAuth';
\ No newline at end of file
diff --git a/src/store/cart.ts b/src/store/cart.ts
new file mode 100644
index 0000000..ab1a69d
--- /dev/null
+++ b/src/store/cart.ts
@@ -0,0 +1,5 @@
+/**
+ * Backward-compatible re-export — prefer @/presentation/hooks/useCart
+ */
+export { useCartStore } from '@/infrastructure/persistence/zustand/cartStore';
+export { useCart } from '@/presentation/hooks/useCart';
\ No newline at end of file
diff --git a/src/store/locale.ts b/src/store/locale.ts
new file mode 100644
index 0000000..beefee0
--- /dev/null
+++ b/src/store/locale.ts
@@ -0,0 +1 @@
+export { useLocaleStore } from '@/infrastructure/persistence/zustand/localeStore';
\ No newline at end of file
diff --git a/src/store/wishlist.ts b/src/store/wishlist.ts
new file mode 100644
index 0000000..f7d49aa
--- /dev/null
+++ b/src/store/wishlist.ts
@@ -0,0 +1,5 @@
+/**
+ * Backward-compatible re-export — prefer @/presentation/hooks/useWishlist
+ */
+export { useWishlistStore } from '@/infrastructure/persistence/zustand/wishlistStore';
+export { useWishlist } from '@/presentation/hooks/useWishlist';
\ No newline at end of file
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..bfd6ab2
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,4 @@
+/**
+ * Backward-compatible re-exports — prefer @/domain/entities in new code
+ */
+export * from '@/domain/entities';
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..bf17c35
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,75 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        /* Burgundy — primary brand (from Kött Gård logo) */
+        brand: {
+          50: '#fdf5f5',
+          100: '#fce8e8',
+          200: '#f5cfcf',
+          300: '#e8a8a8',
+          400: '#d47070',
+          500: '#c04040',
+          600: '#a32b2b',
+          700: '#8B1F1F',
+          800: '#6E1818',
+          900: '#521212',
+          950: '#2D0A0A',
+        },
+        /* Warm cream — logo background tone */
+        cream: {
+          50: '#FDFAF8',
+          100: '#FAF5F0',
+          200: '#F5EDE4',
+          300: '#EDE0D4',
+          400: '#E0CFC0',
+        },
+        gold: {
+          50: '#fffbeb',
+          100: '#fef3c7',
+          200: '#fde68a',
+          300: '#fcd34d',
+          400: '#f0c040',
+          500: '#D4A843',
+          600: '#B8892A',
+          700: '#92700c',
+          800: '#78590a',
+          900: '#633f06',
+        },
+      },
+      fontFamily: {
+        sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
+        display: ['var(--font-playfair)', 'Georgia', 'serif'],
+      },
+      boxShadow: {
+        premium: '0 4px 24px -4px rgba(139, 31, 31, 0.12)',
+        'premium-lg': '0 8px 40px -8px rgba(139, 31, 31, 0.18)',
+        gold: '0 4px 20px -4px rgba(212, 168, 67, 0.35)',
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.5s ease-out',
+        'slide-up': 'slideUp 0.5s ease-out',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..9dae4df
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules", "docs"]
+}
\ No newline at end of file