diff --git a/app/Http/Errors/ErrorPages.php b/app/Http/Errors/ErrorPages.php
new file mode 100644
index 0000000..8787b6f
--- /dev/null
+++ b/app/Http/Errors/ErrorPages.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Http\Errors;
+
+use App\Http\Localization\Locale;
+use App\Http\Middleware\HandleInertiaRequests;
+use Illuminate\Contracts\Http\Kernel;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Router;
+use Inertia\ExceptionResponse;
+use Symfony\Component\HttpFoundation\Response;
+use Throwable;
+
+/**
+ * Renders HTTP errors as the Inertia page Errors/ErrorPage, translated and
+ * in the request's locale. Registered with `$exceptions->respond()` in
+ * bootstrap/app.php.
+ *
+ * The page receives only the status code, never the exception, so no
+ * message, trace or path reaches the browser (NFR-SEC-07). With APP_DEBUG
+ * on, a 500 keeps Laravel's debug page for developers.
+ */
+final class ErrorPages
+{
+    public const STATUSES = [403, 404, 419, 500, 503];
+
+    public function __invoke(Response $response, Throwable $exception, Request $request): Response
+    {
+        $status = $response->getStatusCode();
+
+        if (! in_array($status, self::STATUSES, true)
+            || $response instanceof JsonResponse
+            || ($status === 500 && config('app.debug'))) {
+            return $response;
+        }
+
+        // A 404 with no matching route never ran the `locale:` middleware;
+        // the URL prefix is authoritative, so take the locale from it.
+        if (Locale::current() === Locale::fallback()) {
+            app()->setLocale(Locale::fromPath($request->path())->value);
+        }
+
+        return (new ExceptionResponse($exception, $request, $response, app(Router::class), app(Kernel::class)))
+            ->render('Errors/ErrorPage', ['status' => $status])
+            ->usingMiddleware(HandleInertiaRequests::class)
+            ->withSharedData()
+            ->toResponse($request);
+    }
+}
diff --git a/app/Http/Localization/Locale.php b/app/Http/Localization/Locale.php
index f2d1236..5243d60 100644
--- a/app/Http/Localization/Locale.php
+++ b/app/Http/Localization/Locale.php
@@ -24,6 +24,20 @@ public static function current(): self
         return self::tryFrom(app()->getLocale()) ?? self::fallback();
     }
 
+    /** The locale whose prefix starts `$path` (e.g. "ar/products"), else the fallback. */
+    public static function fromPath(string $path): self
+    {
+        $segment = explode('/', trim($path, '/'), 2)[0];
+
+        foreach (self::cases() as $locale) {
+            if ($locale->prefix() !== '' && $locale->prefix() === $segment) {
+                return $locale;
+            }
+        }
+
+        return self::fallback();
+    }
+
     public function direction(): string
     {
         return $this === self::Arabic ? 'rtl' : 'ltr';
diff --git a/app/Http/Localization/LocalizedRoutes.php b/app/Http/Localization/LocalizedRoutes.php
index 4298e65..c2d34e8 100644
--- a/app/Http/Localization/LocalizedRoutes.php
+++ b/app/Http/Localization/LocalizedRoutes.php
@@ -13,7 +13,11 @@
  */
 final class LocalizedRoutes
 {
-    public static function group(Closure $routes): void
+    /**
+     * @param  bool  $redirectEnglishPrefix  false for a second group (routes/local.php):
+     *                                       the /en redirect is registered once, by routes/web.php.
+     */
+    public static function group(Closure $routes, bool $redirectEnglishPrefix = true): void
     {
         // /en/... is never canonical: send it to the unprefixed URL. Registered
         // first so a later catch-all storefront route cannot shadow it.
@@ -22,12 +26,14 @@ public static function group(Closure $routes): void
         // the redirect is always absolute and same-host. Without that,
         // /en//evil.com or /en/%2Fevil.com became "//evil.com", a
         // protocol-relative open redirect.
-        Route::get('en/{path?}', function (Request $request, ?string $path = null) {
-            $target = url('/'.ltrim($path ?? '', '/'));
-            $query = $request->getQueryString();
+        if ($redirectEnglishPrefix) {
+            Route::get('en/{path?}', function (Request $request, ?string $path = null) {
+                $target = url('/'.ltrim($path ?? '', '/'));
+                $query = $request->getQueryString();
 
-            return redirect($target.($query === null ? '' : '?'.$query), 301);
-        })->where('path', '.*');
+                return redirect($target.($query === null ? '' : '?'.$query), 301);
+            })->where('path', '.*');
+        }
 
         foreach (Locale::cases() as $locale) {
             Route::middleware('locale:'.$locale->value)
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index 1ff4bbc..eb1ea7d 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -3,6 +3,7 @@
 namespace App\Http\Middleware;
 
 use App\Http\Localization\Locale;
+use App\Http\Localization\LocalizedRoutes;
 use Illuminate\Http\Request;
 use Inertia\Middleware;
 
@@ -31,6 +32,10 @@ public function share(Request $request): array
             ...parent::share($request),
             'locale' => fn (): string => Locale::current()->value,
             'direction' => fn (): string => Locale::current()->direction(),
+            // hreflang alternates for the head and the locale switcher. Sent
+            // on every visit so client-side navigation never keeps the
+            // previous page's links (M3 review).
+            'alternates' => fn (): array => LocalizedRoutes::alternates($request),
         ];
     }
 }
diff --git a/app/Http/Middleware/SecurityHeaders.php b/app/Http/Middleware/SecurityHeaders.php
new file mode 100644
index 0000000..93f2fe9
--- /dev/null
+++ b/app/Http/Middleware/SecurityHeaders.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Vite;
+use Symfony\Component\HttpFoundation\Response;
+
+/**
+ * Security headers on every response, error pages included (NFR-SEC-08).
+ *
+ * Registered as global middleware so it also covers responses that never
+ * reach a route (404s, maintenance mode, /up). A fresh nonce per request is
+ * given to Laravel's Vite helper, which adds it to every tag it renders
+ * (@vite, @fonts); app.blade.php exposes it to Vite and Inertia for the
+ * styles they inject at runtime.
+ */
+final class SecurityHeaders
+{
+    public function handle(Request $request, Closure $next): Response
+    {
+        $nonce = Vite::useCspNonce();
+
+        $response = $next($request);
+
+        $response->headers->add([
+            'Content-Security-Policy' => $this->contentSecurityPolicy($nonce),
+            'X-Content-Type-Options' => 'nosniff',
+            'Referrer-Policy' => 'strict-origin-when-cross-origin',
+            // Legacy twin of frame-ancestors 'none' for older browsers.
+            'X-Frame-Options' => 'DENY',
+            'Cross-Origin-Opener-Policy' => 'same-origin',
+            'Permissions-Policy' => 'camera=(), microphone=(), geolocation=()',
+        ]);
+
+        // HTTPS only, and never locally: a pinned HSTS entry for a *.test
+        // host would break plain-HTTP development.
+        if ($request->isSecure() && ! app()->isLocal()) {
+            $response->headers->set('Strict-Transport-Security', 'max-age=31536000');
+        }
+
+        return $response;
+    }
+
+    private function contentSecurityPolicy(string $nonce): string
+    {
+        $script = ["'self'", "'nonce-{$nonce}'"];
+        $style = ["'self'", "'nonce-{$nonce}'"];
+        $connect = ["'self'"];
+        $assets = ["'self'"];
+
+        // `npm run dev`: scripts, styles and HMR come from the Vite server.
+        // Vite injects <style> tags while developing, so inline styles are
+        // allowed there (and only there): browsers ignore 'unsafe-inline'
+        // once a nonce is listed, so the nonce is dropped from style-src.
+        if (($devServer = $this->viteDevServer()) !== null) {
+            $script[] = $devServer;
+            $style = ["'self'", "'unsafe-inline'", $devServer];
+            $connect[] = $devServer;
+            $connect[] = preg_replace('/^http/', 'ws', $devServer);
+            $assets[] = $devServer;
+        }
+
+        return implode('; ', [
+            "default-src 'self'",
+            'script-src '.implode(' ', $script),
+            'style-src '.implode(' ', $style),
+            'img-src '.implode(' ', [...$assets, 'data:']),
+            'font-src '.implode(' ', $assets),
+            'connect-src '.implode(' ', $connect),
+            "object-src 'none'",
+            "base-uri 'self'",
+            "form-action 'self'",
+            "frame-ancestors 'none'",
+        ]);
+    }
+
+    /** Origin of the running Vite dev server, from public/hot, or null. */
+    private function viteDevServer(): ?string
+    {
+        if (! Vite::isRunningHot()) {
+            return null;
+        }
+
+        $url = trim((string) file_get_contents(Vite::hotFile()));
+        $parts = parse_url($url);
+
+        if (! is_array($parts) || ! isset($parts['scheme'], $parts['host'])) {
+            return null;
+        }
+
+        return $parts['scheme'].'://'.$parts['host'].(isset($parts['port']) ? ':'.$parts['port'] : '');
+    }
+}
diff --git a/bootstrap/app.php b/bootstrap/app.php
index 460b4c6..1bcf866 100644
--- a/bootstrap/app.php
+++ b/bootstrap/app.php
@@ -1,6 +1,8 @@
 <?php
 
+use App\Http\Errors\ErrorPages;
 use App\Http\Middleware\HandleInertiaRequests;
+use App\Http\Middleware\SecurityHeaders;
 use App\Http\Middleware\SetLocale;
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
@@ -22,6 +24,10 @@
     ->withMiddleware(function (Middleware $middleware): void {
         $middleware->alias(['locale' => SetLocale::class]);
 
+        // Global and first, so 404s, maintenance (503) responses and /up get
+        // the headers too, and the CSP nonce exists before any page renders.
+        $middleware->prepend(SecurityHeaders::class);
+
         $middleware->web(append: [
             HandleInertiaRequests::class,
         ]);
@@ -30,4 +36,7 @@
         $exceptions->shouldRenderJsonWhen(
             fn (Request $request) => $request->is('api/*') || $request->expectsJson(),
         );
+
+        // 403, 404, 419, 500 and 503 render as translated Inertia pages.
+        $exceptions->respond(new ErrorPages);
     })->create();
diff --git a/docs/engineering/code-quality.md b/docs/engineering/code-quality.md
index a5a380d..1361dcc 100644
--- a/docs/engineering/code-quality.md
+++ b/docs/engineering/code-quality.md
@@ -73,7 +73,11 @@ composer analyse
   `LocalizedRoutes::group()` in `routes/web.php` and registered for `/`,
   `/ms` and `/ar`, named `{locale}.{name}` (e.g. `ar.storefront.home`).
   `/en/...` redirects (301) to the unprefixed URL. Every localised page
-  emits `hreflang` alternates plus `x-default`.
+  emits `hreflang` alternates plus `x-default`. They are the shared
+  `alternates` prop: Blade renders them for the first response and
+  Inertia's `serverHead` (`resources/js/i18n/alternates.ts`) replaces them
+  on every client-side visit. The language switcher reads the same prop,
+  never the DOM.
 - **Strings:** `resources/js/i18n/messages/{locale}/{namespace}.json`; the
   key is `{namespace}.{path}` (e.g. `storefront.home.title`). Use
   `const { t } = useI18n()`; parameters are `{name}`, and plurals are objects
@@ -122,6 +126,30 @@ composer analyse
   `resources/js/test/setup.ts` stubs `showModal`/`close`; real browser
   behaviour is checked manually and in Phase 9 browser tests.
 
+## Layouts
+
+- **Storefront** (`resources/js/storefront/layouts/StorefrontLayout.vue`):
+  skip link, header (brand, language switcher, cart count), `<main
+  id="main">`, toasts. **Checkout** (`CheckoutLayout.vue`): the same frame
+  with a quiet header and no cart or browsing links. **Vendor**
+  (`resources/js/vendor/layouts/VendorLayout.vue`): static menu, no auth
+  until ADR-0011; sections without a page are text, never dead links.
+- A page picks its layout with `defineOptions({ layout: StorefrontLayout })`.
+  Inertia keeps it mounted across visits.
+- Shared frame pieces (`SkipLink`, `LocaleSwitcher`) live in
+  `resources/js/shared/layout/` so both surfaces can use them (F1).
+- Local previews: `/dev/layouts/checkout` and `/dev/layouts/vendor`, in
+  every locale (`/ms/...`, `/ar/...`).
+- Which screen uses which layout, and what each one waits for:
+  [`screen-inventory.md`](../product/screen-inventory.md).
+
+## Error pages
+
+`App\Http\Errors\ErrorPages` (registered in `bootstrap/app.php`) renders
+403, 404, 419, 500 and 503 as the Inertia page `Errors/ErrorPage`, in the
+URL's locale. It receives only the status code (NFR-SEC-07). JSON clients
+keep JSON errors; with `APP_DEBUG=true` a 500 shows Laravel's debug page.
+
 ## Before every pull request
 
 ```sh
diff --git a/docs/engineering/error-handling.md b/docs/engineering/error-handling.md
index a1a431a..085b50d 100644
--- a/docs/engineering/error-handling.md
+++ b/docs/engineering/error-handling.md
@@ -59,3 +59,8 @@ If a value might be sensitive, log an identifier instead of the value.
 Return a helpful, non-leaking message. Validation errors are specific; internal
 errors are generic. Never surface a stack trace, SQL, or an internal path to a
 user.
+
+HTTP errors 403, 404, 419, 500 and 503 render as the translated Inertia page
+`Errors/ErrorPage` (`App\Http\Errors\ErrorPages`), which receives only the
+status code. `tests/Feature/ErrorPagesTest.php` proves the 500 page leaks
+nothing with `APP_DEBUG=false` (NFR-SEC-07).
diff --git a/docs/engineering/security.md b/docs/engineering/security.md
index 87acdc0..5b0c557 100644
--- a/docs/engineering/security.md
+++ b/docs/engineering/security.md
@@ -59,6 +59,30 @@ See [`error-handling.md`](error-handling.md). In short: never log passwords,
 tokens, API keys, full card numbers, or full request bodies for auth/payment
 endpoints.
 
+## Security headers
+
+`App\Http\Middleware\SecurityHeaders` runs first in the global stack, so
+every response gets them, error and maintenance pages included
+(NFR-SEC-08, tested in `tests/Feature/SecurityHeadersTest.php`):
+
+- **CSP** with a fresh nonce per request and no `unsafe-inline` or
+  `unsafe-eval`: `default-src 'self'`, scripts and styles from `'self'`
+  plus the nonce, `object-src 'none'`, `base-uri 'self'`,
+  `form-action 'self'`, `frame-ancestors 'none'`. Laravel's Vite helper
+  adds the nonce to `@vite` and `@fonts` tags; the `csp-nonce` meta in
+  `app.blade.php` passes it to Vite and Inertia for styles they inject.
+  While `npm run dev` runs, the Vite origin, its WebSocket and inline
+  styles are allowed (development only).
+- `X-Frame-Options: DENY`, `X-Content-Type-Options: nosniff`,
+  `Referrer-Policy: strict-origin-when-cross-origin`,
+  `Cross-Origin-Opener-Policy: same-origin`, and a `Permissions-Policy`
+  denying camera, microphone and geolocation.
+- **HSTS** (`max-age=31536000`) on HTTPS requests outside local
+  development. Behind a TLS-terminating proxy the demo host must be a
+  trusted proxy, or requests will not count as HTTPS.
+- Adding a third-party origin (payments, analytics, images) means adding
+  it to the policy in the same PR, with a test.
+
 ## Dependency auditing
 
 - `composer audit` runs in CI and in `composer check`. A new advisory fails the
diff --git a/docs/product/README.md b/docs/product/README.md
index 74ead24..e5e5a6d 100644
--- a/docs/product/README.md
+++ b/docs/product/README.md
@@ -31,6 +31,7 @@ Implementation
 | [`functional-requirements.md`](functional-requirements.md) | FR-* requirements with acceptance criteria |
 | [`non-functional-requirements.md`](non-functional-requirements.md) | NFR-*: correctness, security, performance, a11y, i18n, quality gates |
 | [`user-journeys.md`](user-journeys.md) | Customer, vendor and platform-staff workflows with failure branches |
+| [`screen-inventory.md`](screen-inventory.md) | Every customer and vendor screen, its layout, status and what it waits for |
 
 ## Superseded (history only)
 
diff --git a/docs/product/screen-inventory.md b/docs/product/screen-inventory.md
new file mode 100644
index 0000000..659b30a
--- /dev/null
+++ b/docs/product/screen-inventory.md
@@ -0,0 +1,33 @@
+# Screen Inventory
+
+- **Status:** Living document (Phase 3, M5). Update it in the PR that adds or removes a screen.
+- **Date:** 2026-11-09
+
+Every screen the customer and vendor journeys in [`user-journeys.md`](user-journeys.md) need, the layout it uses, and what it waits for. Platform staff screens (PJ-1…PJ-11) are Filament resources (ADR-0020) and are not listed. Every screen ships in en, ms and ar (NFR-I18N-01).
+
+| Screen | Journeys | Layout | Status | Waits for |
+|---|---|---|---|---|
+| Home | CJ-1 | Storefront | Built (placeholder content) | Catalogue for featured content |
+| Category listing with facets | CJ-1 | Storefront | Not started | Catalogue, ADR-0019 (search) |
+| Search results | CJ-1 | Storefront | Not started | ADR-0019 |
+| Product | CJ-1, CJ-5 | Storefront | Not started | Catalogue, ADR-0013 (money) |
+| Store page (vendor storefront, follow) | CJ-1, CJ-6 | Storefront | Not started | Catalogue, ADR-0011 for follow |
+| Cart (grouped by vendor) | CJ-1 | Storefront | Not started (header shows a placeholder count) | ADR-0013, ADR-0014 |
+| Sign in, register, verify email (inline in checkout too) | CJ-1 4a–4d | Storefront, Checkout | Not started | ADR-0011 (M6) |
+| Checkout: address, shipping, coupon, points, summary | CJ-1 5 | Checkout | Frame only (`/dev/layouts/checkout`, local) | ADR-0011, ADR-0015 |
+| Payment (reservation timer, 3-D Secure) | CJ-1 6 | Checkout | Not started | ADR-0014, ADR-0015 |
+| Confirming payment, then order confirmation | CJ-1 7 | Checkout | Not started | ADR-0012, ADR-0015 |
+| Account: orders and shipment timelines | CJ-2, CJ-3 | Storefront | Not started | ADR-0011, ADR-0012 |
+| Return request | CJ-4 | Storefront | Not started | ADR-0012, uploads (NFR-SEC-05) |
+| Review form | CJ-5 | Storefront | Not started | ADR-0011 |
+| Wishlist, followed stores, referrals | CJ-6 | Storefront | Not started | ADR-0011 |
+| Sell on Nexo application | VJ-1 | Storefront | Not started | ADR-0011 |
+| Vendor dashboard and readiness checklist | VJ-1 | Vendor | Frame only (`/dev/layouts/vendor`, local) | ADR-0011 (vendor context) |
+| Store profile and shipping rates | VJ-1 | Vendor | Not started | ADR-0011 |
+| Products, product editor with variant matrix, CSV import | VJ-2 | Vendor | Not started | ADR-0011, catalogue |
+| Orders and VendorOrder detail | VJ-3 | Vendor | Not started | ADR-0011, ADR-0012 |
+| Stock | VJ-4 | Vendor | Not started | ADR-0011, ADR-0014 |
+| Returns | VJ-5 | Vendor | Not started | ADR-0011, ADR-0012 |
+| Earnings, statement, payouts | VJ-6 | Vendor | Not started | ADR-0011, ADR-0016 |
+| Team | VJ-7 | Vendor | Not started | ADR-0011 |
+| Error pages: 403, 404, 419, 500, 503 | All | Own minimal frame (shared by both surfaces) | Built | — |
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 36aa20e..5a0a14b 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -2,11 +2,19 @@ import { createInertiaApp } from '@inertiajs/vue3';
 import type { DefineComponent } from 'vue';
 import { createApp, h } from 'vue';
 import { activateLocale } from './i18n';
+import { hreflangTags } from './i18n/alternates';
+
+// Read from the element property: browsers blank the nonce attribute.
+const cspNonce = document.querySelector<HTMLMetaElement>('meta[property="csp-nonce"]')?.nonce;
 
 const pages = import.meta.glob<DefineComponent>('./pages/**/*.vue');
 
 void createInertiaApp({
     title: (title) => (title ? `${title} · Nexo` : 'Nexo'),
+    // CSP nonce for the <style> tags Inertia injects (progress bar, error dialog).
+    ...(cspNonce ? { nonce: cspNonce } : {}),
+    // Replaces the server-rendered hreflang links on every visit.
+    serverHead: (page) => hreflangTags(page.props.alternates),
     resolve: async (name, page) => {
         const component = pages[`./pages/${name}.vue`];
 
diff --git a/resources/js/i18n/alternates.test.ts b/resources/js/i18n/alternates.test.ts
new file mode 100644
index 0000000..c192187
--- /dev/null
+++ b/resources/js/i18n/alternates.test.ts
@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import { hreflangTags } from './alternates';
+
+describe('hreflangTags', () => {
+    it('renders one keyed link per alternate, in the server markup', () => {
+        expect(hreflangTags({ en: 'https://nexo.test', ar: 'https://nexo.test/ar', 'x-default': 'https://nexo.test' })).toEqual([
+            '<link rel="alternate" hreflang="en" href="https://nexo.test" data-inertia="hreflang-en">',
+            '<link rel="alternate" hreflang="ar" href="https://nexo.test/ar" data-inertia="hreflang-ar">',
+            '<link rel="alternate" hreflang="x-default" href="https://nexo.test" data-inertia="hreflang-x-default">',
+        ]);
+    });
+
+    it('renders nothing for pages without alternates (PHP sends [])', () => {
+        expect(hreflangTags(undefined)).toEqual([]);
+        expect(hreflangTags([])).toEqual([]);
+        expect(hreflangTags({ en: 42 })).toEqual([]);
+    });
+
+    it('escapes attribute values', () => {
+        expect(hreflangTags({ en: 'https://nexo.test/?a=1&b="x"' })[0]).toContain(
+            'href="https://nexo.test/?a=1&amp;b=&quot;x&quot;"',
+        );
+    });
+});
diff --git a/resources/js/i18n/alternates.ts b/resources/js/i18n/alternates.ts
new file mode 100644
index 0000000..09df77a
--- /dev/null
+++ b/resources/js/i18n/alternates.ts
@@ -0,0 +1,32 @@
+// hreflang alternates (NFR-I18N-04). The server computes them per page and
+// shares them as the `alternates` prop (LocalizedRoutes::alternates()).
+//
+// app.blade.php renders them on the first response so crawlers see them
+// without JavaScript. Each tag carries a data-inertia key, and app.ts hands
+// hreflangTags() to Inertia's `serverHead`, so the head manager replaces them
+// on every visit instead of leaving the first page's links in the DOM.
+import type { Locale } from './locales';
+
+export type Hreflang = Locale | 'x-default';
+
+/** Current page's URL per locale. PHP sends an empty array when there are none. */
+export type Alternates = Partial<Record<Hreflang, string>>;
+
+const escapeAttribute = (value: string) =>
+    value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+/**
+ * Link tags for Inertia's `serverHead`. Takes the raw prop (untyped there)
+ * and ignores anything that is not a string URL. Must match the markup in
+ * resources/views/app.blade.php.
+ */
+export function hreflangTags(alternates: unknown): string[] {
+    if (typeof alternates !== 'object' || alternates === null) return [];
+
+    return Object.entries(alternates)
+        .filter((entry): entry is [string, string] => typeof entry[1] === 'string')
+        .map(
+            ([hreflang, href]) =>
+                `<link rel="alternate" hreflang="${escapeAttribute(hreflang)}" href="${escapeAttribute(href)}" data-inertia="hreflang-${escapeAttribute(hreflang)}">`,
+        );
+}
diff --git a/resources/js/i18n/index.ts b/resources/js/i18n/index.ts
index f3100b6..8dc38b7 100644
--- a/resources/js/i18n/index.ts
+++ b/resources/js/i18n/index.ts
@@ -46,11 +46,23 @@ interface ActiveState {
 
 const active = shallowRef<ActiveState>({ locale: FALLBACK_LOCALE, catalogue: {}, fallback: {} });
 
-/** Loads `locale` (falling back to English for unknown values) and makes it active. */
+// Counts activateLocale() calls. Only the latest call may commit, so a slow
+// first load (e.g. Arabic) cannot overwrite a newer visit that finished first.
+let latestRequest = 0;
+
+/**
+ * Loads `locale` (falling back to English for unknown values) and makes it
+ * active, unless a newer call has been made meanwhile.
+ */
 export async function activateLocale(requested: unknown): Promise<Locale> {
+    const request = ++latestRequest;
     const locale = isLocale(requested) ? requested : FALLBACK_LOCALE;
     const [catalogue, fallback] = await Promise.all([loadCatalogue(locale), loadCatalogue(FALLBACK_LOCALE)]);
 
+    if (request !== latestRequest) {
+        return locale;
+    }
+
     active.value = { locale, catalogue, fallback };
 
     if (typeof document !== 'undefined') {
diff --git a/resources/js/i18n/locale-race.test.ts b/resources/js/i18n/locale-race.test.ts
new file mode 100644
index 0000000..adf26bf
--- /dev/null
+++ b/resources/js/i18n/locale-race.test.ts
@@ -0,0 +1,50 @@
+// M3 review: a slow catalogue load must not overwrite a newer visit's locale.
+// Arabic's catalogue is held back until the test releases it, so Malay
+// finishes first; without the guard, Arabic would win when it arrives late.
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+const gate = vi.hoisted(() => {
+    let release: () => void = () => {};
+    const held = new Promise<void>((resolve) => {
+        release = resolve;
+    });
+
+    return { held, release: () => release() };
+});
+
+vi.mock('./messages/ar/ui.json', async () => {
+    await gate.held;
+
+    return { default: { common: { loading: 'جارٍ التحميل' } } };
+});
+
+afterEach(() => {
+    gate.release();
+});
+
+describe('activateLocale ordering', () => {
+    it('keeps the most recent locale when an earlier load finishes last', async () => {
+        const { activateLocale, useI18n } = await import('./index');
+        const { locale } = useI18n();
+
+        const arabic = activateLocale('ar');
+        await activateLocale('ms');
+
+        expect(locale.value).toBe('ms');
+
+        gate.release();
+        await arabic;
+
+        expect(locale.value).toBe('ms');
+        expect(document.documentElement.lang).toBe('ms');
+        expect(document.documentElement.dir).toBe('ltr');
+    });
+
+    it('still resolves the superseded call with the locale it was asked for', async () => {
+        const { activateLocale } = await import('./index');
+
+        gate.release();
+
+        await expect(activateLocale('ar')).resolves.toBe('ar');
+    });
+});
diff --git a/resources/js/i18n/locales.ts b/resources/js/i18n/locales.ts
index 9e439cb..f2d0499 100644
--- a/resources/js/i18n/locales.ts
+++ b/resources/js/i18n/locales.ts
@@ -6,6 +6,13 @@ export type Direction = 'ltr' | 'rtl';
 
 export const FALLBACK_LOCALE: Locale = 'en';
 
+/** Each language's name in itself, as language switchers show it. Not translated. */
+export const LOCALE_NAMES: Record<Locale, string> = {
+    en: 'English',
+    ms: 'Bahasa Melayu',
+    ar: 'العربية',
+};
+
 /** Displayed dates and times are always Malaysian time (NFR-I18N-03, ADR-0018). */
 export const TIME_ZONE = 'Asia/Kuala_Lumpur';
 
@@ -25,6 +32,11 @@ export function directionOf(locale: Locale): Direction {
     return locale === 'ar' ? 'rtl' : 'ltr';
 }
 
+/** The storefront home URL for `locale`: "/" for English, "/ms" or "/ar" otherwise. */
+export function homePath(locale: Locale): string {
+    return locale === FALLBACK_LOCALE ? '/' : `/${locale}`;
+}
+
 export function intlTag(locale: Locale): string {
     return INTL_TAGS[locale];
 }
diff --git a/resources/js/i18n/messages/ar/storefront.json b/resources/js/i18n/messages/ar/storefront.json
index 27dffdb..66656a4 100644
--- a/resources/js/i18n/messages/ar/storefront.json
+++ b/resources/js/i18n/messages/ar/storefront.json
@@ -3,5 +3,21 @@
         "title": "الرئيسية",
         "eyebrow": "سوق · ماليزيا",
         "tagline": "المتجر قيد الإعداد."
+    },
+    "header": {
+        "cart": {
+            "zero": "السلة، لا توجد منتجات",
+            "one": "السلة، منتج واحد",
+            "two": "السلة، منتجان",
+            "few": "السلة، {count} منتجات",
+            "many": "السلة، {count} منتجًا",
+            "other": "السلة، {count} منتج"
+        }
+    },
+    "checkout": {
+        "title": "إتمام الشراء",
+        "secure": "دفع آمن",
+        "preview_title": "خطوات إتمام الشراء قادمة",
+        "preview_body": "سيظهر هنا العنوان والشحن والدفع بعد إنشاء السلة والدفع."
     }
 }
diff --git a/resources/js/i18n/messages/ar/ui.json b/resources/js/i18n/messages/ar/ui.json
index f197c76..5bb9845 100644
--- a/resources/js/i18n/messages/ar/ui.json
+++ b/resources/js/i18n/messages/ar/ui.json
@@ -23,5 +23,33 @@
         "previous": "السابق",
         "next": "التالي",
         "page": "الصفحة {page}"
+    },
+    "errors": {
+        "code": "خطأ {status}",
+        "home": "الانتقال إلى الصفحة الرئيسية",
+        "forbidden": {
+            "title": "لا يمكنك فتح هذه الصفحة",
+            "description": "ليست لديك صلاحية لعرضها."
+        },
+        "not_found": {
+            "title": "تعذّر العثور على هذه الصفحة",
+            "description": "ربما نُقلت الصفحة، أو أن الرابط غير صحيح."
+        },
+        "page_expired": {
+            "title": "انتهت صلاحية هذه الصفحة",
+            "description": "حفاظًا على أمانك، انتهت مهلة النموذج. ارجع وحدّث الصفحة ثم حاول مرة أخرى."
+        },
+        "server_error": {
+            "title": "حدث خطأ ما",
+            "description": "حدث خطأ غير متوقع من جهتنا. يُرجى المحاولة مرة أخرى بعد بضع دقائق."
+        },
+        "unavailable": {
+            "title": "سنعود قريبًا",
+            "description": "يخضع Nexo للصيانة حاليًا. يُرجى العودة بعد قليل."
+        }
+    },
+    "layout": {
+        "skip_to_content": "انتقل إلى المحتوى",
+        "language": "اللغة"
     }
 }
diff --git a/resources/js/i18n/messages/ar/vendor.json b/resources/js/i18n/messages/ar/vendor.json
new file mode 100644
index 0000000..70b3b90
--- /dev/null
+++ b/resources/js/i18n/messages/ar/vendor.json
@@ -0,0 +1,22 @@
+{
+    "layout": {
+        "title": "مركز البائعين",
+        "menu": "قائمة المتجر",
+        "store": "متجرك",
+        "soon": "قريبًا"
+    },
+    "nav": {
+        "dashboard": "لوحة التحكم",
+        "orders": "الطلبات",
+        "products": "المنتجات",
+        "stock": "المخزون",
+        "earnings": "الأرباح",
+        "team": "الفريق",
+        "settings": "الإعدادات"
+    },
+    "dashboard": {
+        "title": "لوحة التحكم",
+        "empty_title": "لا يوجد شيء هنا بعد",
+        "empty_body": "ستظهر هنا الطلبات وتنبيهات المخزون والأرباح بعد إعداد متجرك."
+    }
+}
diff --git a/resources/js/i18n/messages/en/storefront.json b/resources/js/i18n/messages/en/storefront.json
index 69c79d8..fe0b2b4 100644
--- a/resources/js/i18n/messages/en/storefront.json
+++ b/resources/js/i18n/messages/en/storefront.json
@@ -3,5 +3,17 @@
         "title": "Home",
         "eyebrow": "Marketplace · Malaysia",
         "tagline": "The storefront is on its way."
+    },
+    "header": {
+        "cart": {
+            "one": "Cart, {count} item",
+            "other": "Cart, {count} items"
+        }
+    },
+    "checkout": {
+        "title": "Checkout",
+        "secure": "Secure checkout",
+        "preview_title": "Checkout steps are coming",
+        "preview_body": "Address, shipping and payment will appear here once the cart and payments are built."
     }
 }
diff --git a/resources/js/i18n/messages/en/ui.json b/resources/js/i18n/messages/en/ui.json
index 308dfe7..f59b266 100644
--- a/resources/js/i18n/messages/en/ui.json
+++ b/resources/js/i18n/messages/en/ui.json
@@ -23,5 +23,33 @@
         "previous": "Previous",
         "next": "Next",
         "page": "Page {page}"
+    },
+    "errors": {
+        "code": "Error {status}",
+        "home": "Go to the home page",
+        "forbidden": {
+            "title": "You can’t open this page",
+            "description": "You don’t have permission to view it."
+        },
+        "not_found": {
+            "title": "We can’t find that page",
+            "description": "It may have moved, or the link may be wrong."
+        },
+        "page_expired": {
+            "title": "This page has expired",
+            "description": "For your security, the form timed out. Go back, refresh the page and try again."
+        },
+        "server_error": {
+            "title": "Something went wrong",
+            "description": "An unexpected error occurred on our side. Please try again in a few minutes."
+        },
+        "unavailable": {
+            "title": "We’ll be back soon",
+            "description": "Nexo is down for maintenance. Please check back shortly."
+        }
+    },
+    "layout": {
+        "skip_to_content": "Skip to content",
+        "language": "Language"
     }
 }
diff --git a/resources/js/i18n/messages/en/vendor.json b/resources/js/i18n/messages/en/vendor.json
new file mode 100644
index 0000000..2a5ed5b
--- /dev/null
+++ b/resources/js/i18n/messages/en/vendor.json
@@ -0,0 +1,22 @@
+{
+    "layout": {
+        "title": "Seller centre",
+        "menu": "Store menu",
+        "store": "Your store",
+        "soon": "coming soon"
+    },
+    "nav": {
+        "dashboard": "Dashboard",
+        "orders": "Orders",
+        "products": "Products",
+        "stock": "Stock",
+        "earnings": "Earnings",
+        "team": "Team",
+        "settings": "Settings"
+    },
+    "dashboard": {
+        "title": "Dashboard",
+        "empty_title": "Nothing here yet",
+        "empty_body": "Orders, stock alerts and earnings will appear here once your store is set up."
+    }
+}
diff --git a/resources/js/i18n/messages/ms/storefront.json b/resources/js/i18n/messages/ms/storefront.json
index 1d837cf..1621001 100644
--- a/resources/js/i18n/messages/ms/storefront.json
+++ b/resources/js/i18n/messages/ms/storefront.json
@@ -3,5 +3,16 @@
         "title": "Laman Utama",
         "eyebrow": "Pasaran · Malaysia",
         "tagline": "Kedai dalam talian sedang disiapkan."
+    },
+    "header": {
+        "cart": {
+            "other": "Troli, {count} item"
+        }
+    },
+    "checkout": {
+        "title": "Pembayaran",
+        "secure": "Pembayaran selamat",
+        "preview_title": "Langkah pembayaran akan datang",
+        "preview_body": "Alamat, penghantaran dan pembayaran akan dipaparkan di sini selepas troli dan pembayaran dibina."
     }
 }
diff --git a/resources/js/i18n/messages/ms/ui.json b/resources/js/i18n/messages/ms/ui.json
index 2eb1064..35f0f25 100644
--- a/resources/js/i18n/messages/ms/ui.json
+++ b/resources/js/i18n/messages/ms/ui.json
@@ -23,5 +23,33 @@
         "previous": "Sebelumnya",
         "next": "Seterusnya",
         "page": "Halaman {page}"
+    },
+    "errors": {
+        "code": "Ralat {status}",
+        "home": "Pergi ke halaman utama",
+        "forbidden": {
+            "title": "Anda tidak boleh membuka halaman ini",
+            "description": "Anda tidak mempunyai kebenaran untuk melihatnya."
+        },
+        "not_found": {
+            "title": "Halaman tidak dijumpai",
+            "description": "Halaman ini mungkin telah dipindahkan, atau pautannya salah."
+        },
+        "page_expired": {
+            "title": "Halaman ini telah tamat tempoh",
+            "description": "Demi keselamatan anda, borang ini telah tamat masa. Kembali, muat semula halaman dan cuba lagi."
+        },
+        "server_error": {
+            "title": "Berlaku masalah",
+            "description": "Ralat yang tidak dijangka berlaku di pihak kami. Sila cuba lagi dalam beberapa minit."
+        },
+        "unavailable": {
+            "title": "Kami akan kembali sebentar lagi",
+            "description": "Nexo sedang diselenggara. Sila semak semula sebentar lagi."
+        }
+    },
+    "layout": {
+        "skip_to_content": "Langkau ke kandungan",
+        "language": "Bahasa"
     }
 }
diff --git a/resources/js/i18n/messages/ms/vendor.json b/resources/js/i18n/messages/ms/vendor.json
new file mode 100644
index 0000000..6f0f0e0
--- /dev/null
+++ b/resources/js/i18n/messages/ms/vendor.json
@@ -0,0 +1,22 @@
+{
+    "layout": {
+        "title": "Pusat penjual",
+        "menu": "Menu kedai",
+        "store": "Kedai anda",
+        "soon": "akan datang"
+    },
+    "nav": {
+        "dashboard": "Papan pemuka",
+        "orders": "Pesanan",
+        "products": "Produk",
+        "stock": "Stok",
+        "earnings": "Pendapatan",
+        "team": "Pasukan",
+        "settings": "Tetapan"
+    },
+    "dashboard": {
+        "title": "Papan pemuka",
+        "empty_title": "Belum ada apa-apa di sini",
+        "empty_body": "Pesanan, amaran stok dan pendapatan akan dipaparkan di sini selepas kedai anda disediakan."
+    }
+}
diff --git a/resources/js/pages/Errors/ErrorPage.test.ts b/resources/js/pages/Errors/ErrorPage.test.ts
new file mode 100644
index 0000000..fe14bfd
--- /dev/null
+++ b/resources/js/pages/Errors/ErrorPage.test.ts
@@ -0,0 +1,57 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import { defineComponent } from 'vue';
+import { activateLocale, type Locale } from '@/i18n';
+import { axeViolations } from '@/test/axe';
+import ErrorPage from './ErrorPage.vue';
+
+// Inertia's <Head> needs a running Inertia app; render it as a no-op here.
+vi.mock('@inertiajs/vue3', async (importOriginal) => ({
+    ...(await importOriginal<typeof import('@inertiajs/vue3')>()),
+    Head: defineComponent({ name: 'Head', render: () => null }),
+}));
+
+const mountAt = async (status: 403 | 404 | 419 | 500 | 503, locale: Locale = 'en') => {
+    await activateLocale(locale);
+
+    return mount(ErrorPage, { props: { status }, attachTo: document.body });
+};
+
+describe('Errors/ErrorPage', () => {
+    it.each([
+        [403, 'You can’t open this page'],
+        [404, 'We can’t find that page'],
+        [419, 'This page has expired'],
+        [500, 'Something went wrong'],
+        [503, 'We’ll be back soon'],
+    ] as const)('explains a %i in plain words', async (status, heading) => {
+        const page = await mountAt(status);
+
+        expect(page.get('h1').text()).toBe(heading);
+        expect(page.text()).toContain(`Error ${status}`);
+    });
+
+    it.each([
+        ['en', '/', 'Go to the home page'],
+        ['ms', '/ms', 'Pergi ke halaman utama'],
+        ['ar', '/ar', 'الانتقال إلى الصفحة الرئيسية'],
+    ] as const)('links to the %s home page', async (locale, href, label) => {
+        const link = (await mountAt(404, locale)).get('main a');
+
+        expect(link.attributes('href')).toBe(href);
+        expect(link.text()).toBe(label);
+    });
+
+    it('offers no home link during maintenance, since home is down too', async () => {
+        expect((await mountAt(503)).find('main a').exists()).toBe(false);
+    });
+
+    it('is translated in Malay and Arabic', async () => {
+        expect((await mountAt(404, 'ms')).get('h1').text()).toBe('Halaman tidak dijumpai');
+        expect((await mountAt(404, 'ar')).get('h1').text()).toBe('تعذّر العثور على هذه الصفحة');
+    });
+
+    it.each([403, 404, 419, 500, 503] as const)('has no axe violations (%i)', async (status) => {
+        expect(await axeViolations((await mountAt(status, 'ar')).element)).toEqual([]);
+    });
+});
diff --git a/resources/js/pages/Errors/ErrorPage.vue b/resources/js/pages/Errors/ErrorPage.vue
new file mode 100644
index 0000000..0668ed9
--- /dev/null
+++ b/resources/js/pages/Errors/ErrorPage.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// Rendered by App\Http\Errors\ErrorPages for 403, 404, 419, 500 and 503.
+// Shared by the storefront and the vendor dashboard (F1), so it has its own
+// minimal frame instead of either surface's layout. It only knows the
+// status code; the server never sends exception details (NFR-SEC-07).
+import { Head } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import { homePath, useI18n } from '@/i18n';
+import TextLink from '@/shared/ui/TextLink.vue';
+
+const props = defineProps<{ status: 403 | 404 | 419 | 500 | 503 }>();
+
+const { t, locale } = useI18n();
+
+const KEYS = {
+    403: 'forbidden',
+    404: 'not_found',
+    419: 'page_expired',
+    500: 'server_error',
+    503: 'unavailable',
+} as const;
+
+const key = computed(() => KEYS[props.status] ?? 'server_error');
+const title = computed(() => t(`ui.errors.${key.value}.title`));
+</script>
+
+<template>
+    <Head :title="title" />
+
+    <div class="flex min-h-screen flex-col">
+        <header class="border-b border-border-subtle">
+            <div class="mx-auto flex h-16 max-w-content items-center px-gutter">
+                <span class="text-lg font-semibold tracking-tight" lang="en" dir="ltr">Nexo</span>
+            </div>
+        </header>
+
+        <main class="mx-auto flex w-full max-w-content flex-1 flex-col justify-center px-gutter py-section">
+            <p class="text-sm font-medium text-fg-muted">{{ t('ui.errors.code', { status }) }}</p>
+            <h1 class="mt-3 text-4xl font-semibold tracking-tight">{{ title }}</h1>
+            <p class="mt-4 max-w-xl text-lg text-fg-muted">{{ t(`ui.errors.${key}.description`) }}</p>
+            <div v-if="status !== 503" class="mt-8">
+                <TextLink :href="homePath(locale)" appearance="primary">{{ t('ui.errors.home') }}</TextLink>
+            </div>
+        </main>
+    </div>
+</template>
diff --git a/resources/js/pages/Storefront/CheckoutPreview.vue b/resources/js/pages/Storefront/CheckoutPreview.vue
new file mode 100644
index 0000000..e4045a6
--- /dev/null
+++ b/resources/js/pages/Storefront/CheckoutPreview.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+// Local-only preview of the checkout frame (routes/local.php). The real
+// checkout steps arrive with the cart and payments (CJ-1, blocked on ADR-0011).
+import { Head } from '@inertiajs/vue3';
+import { useI18n } from '@/i18n';
+import EmptyState from '@/shared/ui/EmptyState.vue';
+import SurfaceCard from '@/shared/ui/SurfaceCard.vue';
+import CheckoutLayout from '@/storefront/layouts/CheckoutLayout.vue';
+
+defineOptions({ layout: CheckoutLayout });
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <Head :title="t('storefront.checkout.title')" />
+
+    <h1 class="text-3xl font-semibold tracking-tight">{{ t('storefront.checkout.title') }}</h1>
+
+    <SurfaceCard class="mt-6">
+        <EmptyState :title="t('storefront.checkout.preview_title')" :description="t('storefront.checkout.preview_body')" />
+    </SurfaceCard>
+</template>
diff --git a/resources/js/pages/Storefront/Home.vue b/resources/js/pages/Storefront/Home.vue
index 7a7bc99..1ac69ab 100644
--- a/resources/js/pages/Storefront/Home.vue
+++ b/resources/js/pages/Storefront/Home.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { Head } from '@inertiajs/vue3';
 import { useI18n } from '@/i18n';
+import StorefrontLayout from '@/storefront/layouts/StorefrontLayout.vue';
+
+defineOptions({ layout: StorefrontLayout });
 
 const { t } = useI18n();
 </script>
@@ -8,9 +11,9 @@ const { t } = useI18n();
 <template>
     <Head :title="t('storefront.home.title')" />
 
-    <main class="mx-auto flex min-h-screen max-w-content flex-col justify-center px-gutter py-section">
+    <section class="mx-auto flex w-full max-w-content flex-1 flex-col justify-center px-gutter py-section">
         <p class="text-xs font-medium tracking-wide text-fg-muted uppercase">{{ t('storefront.home.eyebrow') }}</p>
         <h1 class="mt-4 text-5xl font-semibold tracking-tight">Nexo</h1>
         <p class="mt-4 max-w-xl text-lg text-fg-muted">{{ t('storefront.home.tagline') }}</p>
-    </main>
+    </section>
 </template>
diff --git a/resources/js/pages/Vendor/LayoutPreview.vue b/resources/js/pages/Vendor/LayoutPreview.vue
new file mode 100644
index 0000000..b04f443
--- /dev/null
+++ b/resources/js/pages/Vendor/LayoutPreview.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+// Local-only preview of the vendor dashboard frame (routes/local.php). Real
+// vendor pages need the vendor-context route group (ADR-0011, M6).
+import { Head } from '@inertiajs/vue3';
+import { useI18n } from '@/i18n';
+import EmptyState from '@/shared/ui/EmptyState.vue';
+import SurfaceCard from '@/shared/ui/SurfaceCard.vue';
+import VendorLayout from '@/vendor/layouts/VendorLayout.vue';
+
+defineOptions({ layout: VendorLayout });
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <Head :title="t('vendor.dashboard.title')" />
+
+    <h1 class="text-2xl font-semibold tracking-tight">{{ t('vendor.dashboard.title') }}</h1>
+
+    <SurfaceCard class="mt-6">
+        <EmptyState :title="t('vendor.dashboard.empty_title')" :description="t('vendor.dashboard.empty_body')" />
+    </SurfaceCard>
+</template>
diff --git a/resources/js/shared/layout/LocaleSwitcher.vue b/resources/js/shared/layout/LocaleSwitcher.vue
new file mode 100644
index 0000000..273d503
--- /dev/null
+++ b/resources/js/shared/layout/LocaleSwitcher.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// Links to the current page in each language (F-8). The URLs come from the
+// server's `alternates` prop, which Inertia refreshes on every visit, never
+// from the DOM, so they are always this page's (M3 review). Hidden on pages
+// that are not localised (no alternates).
+//
+// Plain links rather than a <select>: they work without JavaScript, are
+// crawlable, and each carries its own lang and hreflang.
+import { Link, usePage } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import { LOCALE_NAMES, LOCALES, useI18n } from '@/i18n';
+
+const page = usePage();
+const { t, locale } = useI18n();
+
+const links = computed(() =>
+    LOCALES.flatMap((code) => {
+        const href = page.props.alternates?.[code];
+
+        return href ? [{ code, href, name: LOCALE_NAMES[code], current: code === locale.value }] : [];
+    }),
+);
+</script>
+
+<template>
+    <nav v-if="links.length > 1" :aria-label="t('ui.layout.language')">
+        <ul class="flex flex-wrap items-center gap-1 text-sm">
+            <li v-for="link in links" :key="link.code">
+                <Link
+                    :href="link.href"
+                    :lang="link.code"
+                    :hreflang="link.code"
+                    :aria-current="link.current ? 'page' : undefined"
+                    class="inline-flex h-9 items-center rounded-md px-2.5 text-fg-muted transition-colors hover:bg-muted hover:text-fg aria-[current]:font-medium aria-[current]:text-fg"
+                >
+                    {{ link.name }}
+                </Link>
+            </li>
+        </ul>
+    </nav>
+</template>
diff --git a/resources/js/shared/layout/SkipLink.vue b/resources/js/shared/layout/SkipLink.vue
new file mode 100644
index 0000000..ccd3494
--- /dev/null
+++ b/resources/js/shared/layout/SkipLink.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+// First focusable element of every layout: lets keyboard and screen-reader
+// users jump past the header to <main id="main"> (WCAG 2.4.1, NFR-A11Y-02).
+import { useI18n } from '@/i18n';
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <a
+        href="#main"
+        class="sr-only z-50 rounded-md bg-surface px-4 py-2 text-sm font-medium text-fg shadow-md focus:not-sr-only focus:fixed focus:start-4 focus:top-4"
+    >
+        {{ t('ui.layout.skip_to_content') }}
+    </a>
+</template>
diff --git a/resources/js/shared/layout/layouts.test.ts b/resources/js/shared/layout/layouts.test.ts
new file mode 100644
index 0000000..5eb2f96
--- /dev/null
+++ b/resources/js/shared/layout/layouts.test.ts
@@ -0,0 +1,162 @@
+// Storefront, checkout and vendor layouts plus their shared pieces (skip
+// link, language switcher). One file because they share the page stub.
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, h, nextTick, reactive } from 'vue';
+import { activateLocale, type Locale } from '@/i18n';
+import type { Alternates } from '@/i18n/alternates';
+import CheckoutLayout from '@/storefront/layouts/CheckoutLayout.vue';
+import StorefrontLayout from '@/storefront/layouts/StorefrontLayout.vue';
+import { axeViolations } from '@/test/axe';
+import type { Flash } from '@/types/shared';
+import VendorLayout from '@/vendor/layouts/VendorLayout.vue';
+import LocaleSwitcher from './LocaleSwitcher.vue';
+
+const page = reactive<{ props: { alternates: Alternates }; flash: Flash }>({ props: { alternates: {} }, flash: {} });
+
+vi.mock('@inertiajs/vue3', async (importOriginal) => ({
+    ...(await importOriginal<typeof import('@inertiajs/vue3')>()),
+    usePage: () => page,
+}));
+
+const HOME: Alternates = { en: '/', ms: '/ms', ar: '/ar', 'x-default': '/' };
+
+beforeEach(() => {
+    page.props.alternates = { ...HOME };
+    page.flash = {};
+});
+
+const Content = defineComponent({ render: () => h('h1', 'Page content') });
+
+async function mountIn(layout: object, locale: Locale = 'en') {
+    await activateLocale(locale);
+
+    return mount(layout, { slots: { default: () => h(Content) }, attachTo: document.body });
+}
+
+describe('LocaleSwitcher', () => {
+    it('links to this page in every language, each in its own language', async () => {
+        const links = (await mountIn(LocaleSwitcher, 'ms')).findAll('a');
+
+        expect(links.map((a) => [a.attributes('href'), a.attributes('lang'), a.attributes('hreflang'), a.text()])).toEqual([
+            ['/', 'en', 'en', 'English'],
+            ['/ms', 'ms', 'ms', 'Bahasa Melayu'],
+            ['/ar', 'ar', 'ar', 'العربية'],
+        ]);
+    });
+
+    it('marks the current language as the current page', async () => {
+        const links = (await mountIn(LocaleSwitcher, 'ar')).findAll('a');
+
+        expect(links.map((a) => a.attributes('aria-current'))).toEqual([undefined, undefined, 'page']);
+    });
+
+    it('follows the alternates of each visit, not the first page (M3 review)', async () => {
+        const switcher = await mountIn(LocaleSwitcher);
+
+        page.props.alternates = { en: '/products/kopi', ms: '/ms/products/kopi', ar: '/ar/products/kopi' };
+        await nextTick();
+
+        expect(switcher.findAll('a').map((a) => a.attributes('href'))).toEqual([
+            '/products/kopi',
+            '/ms/products/kopi',
+            '/ar/products/kopi',
+        ]);
+    });
+
+    it('is hidden on pages that are not localised', async () => {
+        page.props.alternates = [] as never;
+
+        expect((await mountIn(LocaleSwitcher)).find('nav').exists()).toBe(false);
+    });
+
+    it('is a labelled navigation landmark with no axe violations', async () => {
+        const switcher = await mountIn(LocaleSwitcher, 'ar');
+
+        expect(switcher.get('nav').attributes('aria-label')).toBe('اللغة');
+        expect(await axeViolations(switcher.element)).toEqual([]);
+    });
+});
+
+describe.each([
+    ['StorefrontLayout', StorefrontLayout],
+    ['CheckoutLayout', CheckoutLayout],
+    ['VendorLayout', VendorLayout],
+] as const)('%s', (_name, layout) => {
+    it('starts with a skip link to the main content', async () => {
+        const wrapper = await mountIn(layout);
+        const first = wrapper.find('a, button');
+
+        expect(first.attributes('href')).toBe('#main');
+        expect(first.text()).toBe('Skip to content');
+        expect(wrapper.get('main').attributes('id')).toBe('main');
+        expect(wrapper.get('main').attributes('tabindex')).toBe('-1');
+    });
+
+    it('renders the page inside <main>, after a banner header', async () => {
+        const wrapper = await mountIn(layout);
+
+        expect(wrapper.get('main h1').text()).toBe('Page content');
+        expect(wrapper.find('header').exists()).toBe(true);
+        expect(wrapper.find('[data-test="toast-region"]').exists()).toBe(true);
+    });
+
+    it.each(['en', 'ms', 'ar'] as const)('has no axe violations in %s', async (locale) => {
+        expect(await axeViolations((await mountIn(layout, locale)).element)).toEqual([]);
+    });
+});
+
+describe('StorefrontLayout', () => {
+    it.each([
+        ['en', '/'],
+        ['ms', '/ms'],
+        ['ar', '/ar'],
+    ] as const)('links the brand to the %s home page', async (locale, href) => {
+        expect((await mountIn(StorefrontLayout, locale)).get('header a').attributes('href')).toBe(href);
+    });
+
+    it.each([
+        ['en', 'Cart, 0 items'],
+        ['ms', 'Troli, 0 item'],
+        ['ar', 'السلة، لا توجد منتجات'],
+    ] as const)('announces the cart count in %s', async (locale, label) => {
+        const cart = (await mountIn(StorefrontLayout, locale)).get('[data-test="cart-indicator"]');
+
+        expect(cart.get('.sr-only').text()).toBe(label);
+        expect(cart.find('a').exists()).toBe(false);
+    });
+});
+
+describe('CheckoutLayout', () => {
+    it('keeps the header quiet: no cart, just the brand, security note and language', async () => {
+        const wrapper = await mountIn(CheckoutLayout, 'ar');
+
+        expect(wrapper.find('[data-test="cart-indicator"]').exists()).toBe(false);
+        expect(wrapper.get('header').text()).toContain('دفع آمن');
+        expect(wrapper.findAll('header nav a')).toHaveLength(3);
+    });
+});
+
+describe('VendorLayout', () => {
+    it('labels its menu and marks the current section', async () => {
+        const wrapper = await mountIn(VendorLayout);
+        const menu = wrapper.get('nav[aria-label="Store menu"]');
+
+        expect(menu.get('[aria-current="page"]').text()).toBe('Dashboard');
+        expect(menu.findAll('li')).toHaveLength(7);
+    });
+
+    it('has no links to pages that do not exist yet', async () => {
+        const menu = (await mountIn(VendorLayout)).get('nav[aria-label="Store menu"]');
+
+        expect(menu.findAll('a')).toHaveLength(0);
+        expect(menu.text()).toMatch(/Orders\s*· coming soon/);
+    });
+
+    it('is translated and right-to-left ready in Arabic', async () => {
+        const wrapper = await mountIn(VendorLayout, 'ar');
+
+        expect(wrapper.get('nav[aria-label="قائمة المتجر"] [aria-current="page"]').text()).toBe('لوحة التحكم');
+        expect(wrapper.html()).not.toMatch(/\b(ml|mr|pl|pr|left|right)-/);
+    });
+});
diff --git a/resources/js/storefront/components/CartIndicator.vue b/resources/js/storefront/components/CartIndicator.vue
new file mode 100644
index 0000000..253ce96
--- /dev/null
+++ b/resources/js/storefront/components/CartIndicator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// Header cart count. A placeholder until the cart exists (FR-CART-01): it
+// shows the count but is not a link yet, so it never points to a page that
+// 404s. The spoken label carries the count and its plural.
+import { useI18n } from '@/i18n';
+
+withDefaults(defineProps<{ count?: number }>(), { count: 0 });
+
+const { t, formatNumber } = useI18n();
+</script>
+
+<template>
+    <p class="inline-flex h-9 items-center gap-1.5 rounded-md px-2.5 text-sm text-fg" data-test="cart-indicator">
+        <svg class="size-5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+            <path d="M3.5 6.5h13l-1 9.25a1.5 1.5 0 0 1-1.5 1.25h-8a1.5 1.5 0 0 1-1.5-1.25l-1-9.25Z" stroke-linejoin="round" />
+            <path d="M7 8V5.5a3 3 0 0 1 6 0V8" stroke-linecap="round" />
+        </svg>
+        <span aria-hidden="true">{{ formatNumber(count) }}</span>
+        <span class="sr-only">{{ t('storefront.header.cart', { count }) }}</span>
+    </p>
+</template>
diff --git a/resources/js/storefront/layouts/CheckoutLayout.vue b/resources/js/storefront/layouts/CheckoutLayout.vue
new file mode 100644
index 0000000..a23ae1b
--- /dev/null
+++ b/resources/js/storefront/layouts/CheckoutLayout.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// Checkout frame: a deliberately quiet header (brand, "Secure checkout",
+// language) with no cart or browsing links, so nothing pulls the customer
+// out mid-payment. Used by the checkout pages once they exist (CJ-1).
+import { Link } from '@inertiajs/vue3';
+import { homePath, useI18n } from '@/i18n';
+import LocaleSwitcher from '@/shared/layout/LocaleSwitcher.vue';
+import SkipLink from '@/shared/layout/SkipLink.vue';
+import ToastRegion from '@/shared/ui/ToastRegion.vue';
+
+const { t, locale } = useI18n();
+</script>
+
+<template>
+    <div class="flex min-h-screen flex-col bg-subtle">
+        <SkipLink />
+
+        <header class="border-b border-border-subtle bg-surface">
+            <div class="mx-auto flex min-h-16 max-w-content flex-wrap items-center gap-x-6 gap-y-2 px-gutter py-3">
+                <Link :href="homePath(locale)" class="text-lg font-semibold tracking-tight text-fg">Nexo</Link>
+
+                <p class="inline-flex items-center gap-1.5 text-sm text-fg-muted">
+                    <svg class="size-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+                        <rect x="4" y="9" width="12" height="8" rx="1.5" />
+                        <path d="M7 9V6.5a3 3 0 0 1 6 0V9" stroke-linecap="round" />
+                    </svg>
+                    {{ t('storefront.checkout.secure') }}
+                </p>
+
+                <div class="ms-auto">
+                    <LocaleSwitcher />
+                </div>
+            </div>
+        </header>
+
+        <main id="main" tabindex="-1" class="mx-auto flex w-full max-w-content flex-1 flex-col px-gutter py-8 focus:outline-none">
+            <slot />
+        </main>
+
+        <ToastRegion />
+    </div>
+</template>
diff --git a/resources/js/storefront/layouts/StorefrontLayout.vue b/resources/js/storefront/layouts/StorefrontLayout.vue
new file mode 100644
index 0000000..9c5c0d6
--- /dev/null
+++ b/resources/js/storefront/layouts/StorefrontLayout.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// Frame for storefront pages: skip link, header (brand, language switcher,
+// cart count) and the toast region. Pages opt in with
+// `defineOptions({ layout: StorefrontLayout })`; Inertia keeps the layout
+// mounted across visits, so the header and pending toasts survive.
+import { Link } from '@inertiajs/vue3';
+import { homePath, useI18n } from '@/i18n';
+import LocaleSwitcher from '@/shared/layout/LocaleSwitcher.vue';
+import SkipLink from '@/shared/layout/SkipLink.vue';
+import ToastRegion from '@/shared/ui/ToastRegion.vue';
+import CartIndicator from '../components/CartIndicator.vue';
+
+const { locale } = useI18n();
+</script>
+
+<template>
+    <div class="flex min-h-screen flex-col">
+        <SkipLink />
+
+        <header class="border-b border-border-subtle bg-surface">
+            <div class="mx-auto flex min-h-16 max-w-content flex-wrap items-center gap-x-6 gap-y-2 px-gutter py-3">
+                <Link :href="homePath(locale)" class="text-lg font-semibold tracking-tight text-fg">Nexo</Link>
+
+                <div class="ms-auto flex flex-wrap items-center gap-2">
+                    <LocaleSwitcher />
+                    <CartIndicator />
+                </div>
+            </div>
+        </header>
+
+        <main id="main" tabindex="-1" class="flex flex-1 flex-col focus:outline-none">
+            <slot />
+        </main>
+
+        <ToastRegion />
+    </div>
+</template>
diff --git a/resources/js/types/shared.ts b/resources/js/types/shared.ts
index 9206366..93f57d8 100644
--- a/resources/js/types/shared.ts
+++ b/resources/js/types/shared.ts
@@ -1,13 +1,16 @@
 // TEMPORARY until ADR-0018: hand-written mirror of the props shared by
 // App\Http\Middleware\HandleInertiaRequests::share(). Replace with
 // generated types once ADR-0018 is decided (follow-up F-3).
+import type { Alternates } from '@/i18n/alternates';
 import type { Direction, Locale } from '@/i18n/locales';
 
-export type { Direction, Locale };
+export type { Alternates, Direction, Locale };
 
 export interface SharedProps {
     locale: Locale;
     direction: Direction;
+    /** hreflang alternates of the current page; empty when it is not localised. */
+    alternates: Alternates;
 }
 
 /**
diff --git a/resources/js/vendor/layouts/VendorLayout.vue b/resources/js/vendor/layouts/VendorLayout.vue
new file mode 100644
index 0000000..cb4f9aa
--- /dev/null
+++ b/resources/js/vendor/layouts/VendorLayout.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+// Vendor dashboard frame, static for now: no auth, no vendor context and no
+// routes behind the menu yet (those wait on ADR-0011, M6). Menu items with
+// no page are shown as "coming soon" text rather than links that 404.
+//
+// Sidebar on wide screens, a scrolling row under the header on narrow ones.
+import { Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import { useI18n } from '@/i18n';
+import LocaleSwitcher from '@/shared/layout/LocaleSwitcher.vue';
+import SkipLink from '@/shared/layout/SkipLink.vue';
+import ToastRegion from '@/shared/ui/ToastRegion.vue';
+
+interface MenuItem {
+    key: 'dashboard' | 'orders' | 'products' | 'stock' | 'earnings' | 'team' | 'settings';
+    href?: string;
+}
+
+const props = withDefaults(defineProps<{ current?: MenuItem['key'] }>(), { current: 'dashboard' });
+
+const { t } = useI18n();
+
+// VJ-1…VJ-7. An item gets an href when its page exists.
+const MENU: readonly MenuItem[] = [
+    { key: 'dashboard' },
+    { key: 'orders' },
+    { key: 'products' },
+    { key: 'stock' },
+    { key: 'earnings' },
+    { key: 'team' },
+    { key: 'settings' },
+];
+
+const items = computed(() =>
+    MENU.map((item) => ({ ...item, label: t(`vendor.nav.${item.key}`), isCurrent: item.key === props.current })),
+);
+</script>
+
+<template>
+    <div class="flex min-h-screen flex-col bg-subtle">
+        <SkipLink />
+
+        <header class="border-b border-border-subtle bg-surface">
+            <div class="flex min-h-14 flex-wrap items-center gap-x-4 gap-y-2 px-gutter py-2">
+                <span class="text-base font-semibold tracking-tight text-fg">Nexo</span>
+                <span class="text-sm text-fg-muted">{{ t('vendor.layout.title') }}</span>
+
+                <div class="ms-auto">
+                    <LocaleSwitcher />
+                </div>
+            </div>
+        </header>
+
+        <div class="flex min-w-0 flex-1 flex-col md:flex-row">
+            <nav
+                :aria-label="t('vendor.layout.menu')"
+                class="min-w-0 border-b border-border-subtle bg-surface md:w-60 md:shrink-0 md:border-e md:border-b-0"
+            >
+                <p class="hidden px-gutter pt-5 pb-2 text-sm font-medium text-fg md:block">{{ t('vendor.layout.store') }}</p>
+                <ul class="flex gap-1 overflow-x-auto px-3 py-2 md:flex-col md:overflow-visible">
+                    <li v-for="item in items" :key="item.key" class="shrink-0">
+                        <Link
+                            v-if="item.href"
+                            :href="item.href"
+                            :aria-current="item.isCurrent ? 'page' : undefined"
+                            class="flex h-9 items-center rounded-md px-3 text-sm text-fg hover:bg-muted aria-[current]:bg-muted aria-[current]:font-medium"
+                        >
+                            {{ item.label }}
+                        </Link>
+                        <span
+                            v-else
+                            :aria-current="item.isCurrent ? 'page' : undefined"
+                            class="flex h-9 items-center gap-2 rounded-md px-3 text-sm whitespace-nowrap aria-[current]:bg-muted aria-[current]:font-medium aria-[current]:text-fg"
+                            :class="item.isCurrent ? '' : 'text-fg-muted'"
+                        >
+                            {{ item.label }}
+                            <span v-if="!item.isCurrent" class="text-xs">· {{ t('vendor.layout.soon') }}</span>
+                        </span>
+                    </li>
+                </ul>
+            </nav>
+
+            <main id="main" tabindex="-1" class="min-w-0 flex-1 px-gutter py-8 focus:outline-none">
+                <slot />
+            </main>
+        </div>
+
+        <ToastRegion />
+    </div>
+</template>
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index b703575..15a759c 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -3,10 +3,13 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        {{-- The CSP nonce, for styles that Vite (dev) and Inertia inject at runtime. Browsers hide a nonce attribute's value from page CSS, so it cannot leak through selectors. --}}
+        <meta property="csp-nonce" nonce="{{ \Illuminate\Support\Facades\Vite::cspNonce() }}">
 
         <title>{{ config('app.name', 'Nexo') }}</title>
-@foreach (\App\Http\Localization\LocalizedRoutes::alternates() as $hreflang => $href)
-        <link rel="alternate" hreflang="{{ $hreflang }}" href="{{ $href }}">
+{{-- Same markup and data-inertia keys as hreflangTags() in resources/js/i18n/alternates.ts, so Inertia's head manager updates these on every visit. --}}
+@foreach ($page['props']['alternates'] ?? [] as $hreflang => $href)
+        <link rel="alternate" hreflang="{{ $hreflang }}" href="{{ $href }}" data-inertia="hreflang-{{ $hreflang }}">
 @endforeach
 
         @fonts
diff --git a/resources/views/partials/dev-bar.blade.php b/resources/views/partials/dev-bar.blade.php
index 0306e5e..7ecca14 100644
--- a/resources/views/partials/dev-bar.blade.php
+++ b/resources/views/partials/dev-bar.blade.php
@@ -13,5 +13,7 @@
         <li class="text-fg-muted" aria-hidden="true">·</li>
         <li><a class="text-fg underline-offset-4 hover:underline" href="{{ url('/dev/tokens') }}">Design tokens</a></li>
         <li><a class="text-fg underline-offset-4 hover:underline" href="{{ url('/dev/components') }}">Components</a></li>
+        <li><a class="text-fg underline-offset-4 hover:underline" href="{{ url('/dev/layouts/checkout') }}">Checkout layout</a></li>
+        <li><a class="text-fg underline-offset-4 hover:underline" href="{{ url('/dev/layouts/vendor') }}">Vendor layout</a></li>
     </ul>
 </nav>
diff --git a/routes/local.php b/routes/local.php
index 4237b65..2f87c14 100644
--- a/routes/local.php
+++ b/routes/local.php
@@ -6,8 +6,17 @@
  * production (they 404 like any unknown URL).
  */
 
+use App\Http\Localization\LocalizedRoutes;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
 
 Route::get('/dev/tokens', fn () => Inertia::render('Dev/Tokens'))->name('dev.tokens');
 Route::get('/dev/components', fn () => Inertia::render('Dev/Components'))->name('dev.components');
+
+// Layout previews, in every locale (/dev/layouts/…, /ms/dev/layouts/…,
+// /ar/dev/layouts/…) so the language switcher and RTL can be checked. The
+// checkout and vendor pages that will use these layouts need ADR-0011 (M6).
+LocalizedRoutes::group(function () {
+    Route::get('dev/layouts/checkout', fn () => Inertia::render('Storefront/CheckoutPreview'))->name('dev.layouts.checkout');
+    Route::get('dev/layouts/vendor', fn () => Inertia::render('Vendor/LayoutPreview'))->name('dev.layouts.vendor');
+}, redirectEnglishPrefix: false);
diff --git a/tests/Feature/ErrorPagesTest.php b/tests/Feature/ErrorPagesTest.php
new file mode 100644
index 0000000..f13f655
--- /dev/null
+++ b/tests/Feature/ErrorPagesTest.php
@@ -0,0 +1,120 @@
+<?php
+
+use App\Http\Middleware\HandleInertiaRequests;
+use Illuminate\Session\TokenMismatchException;
+use Illuminate\Support\Facades\Route;
+use Inertia\Testing\AssertableInertia as Assert;
+
+/** Headers of a client-side Inertia visit with the current asset version. */
+function inertiaHeaders(): array
+{
+    return ['X-Inertia' => 'true', 'X-Inertia-Version' => (string) app(HandleInertiaRequests::class)->version(request())];
+}
+
+beforeEach(function () {
+    // Production settings: CI copies .env.example, which turns debug on.
+    config(['app.debug' => false]);
+
+    Route::middleware('web')->group(function () {
+        Route::get('/_test/forbidden', fn () => abort(403));
+        Route::get('/_test/expired', fn () => throw new TokenMismatchException);
+        Route::get('/_test/unavailable', fn () => abort(503));
+        Route::get('/_test/teapot', fn () => abort(418));
+        Route::get('/_test/crash', fn () => throw new RuntimeException(
+            'DB_PASSWORD=hunter2 in /var/www/nexo/app/Secret.php',
+        ));
+    });
+});
+
+it('renders HTTP errors as a translated Inertia page', function (string $url, int $status) {
+    $this->get($url)
+        ->assertStatus($status)
+        ->assertInertia(fn (Assert $page) => $page
+            ->component('Errors/ErrorPage')
+            ->where('status', $status)
+            ->where('locale', 'en')
+            ->where('direction', 'ltr'));
+})->with([
+    '403' => ['/_test/forbidden', 403],
+    '404 (no route)' => ['/no-such-page', 404],
+    '419' => ['/_test/expired', 419],
+    '500' => ['/_test/crash', 500],
+    '503' => ['/_test/unavailable', 503],
+]);
+
+it('renders a 404 in the locale of the URL prefix, even with no route', function (string $url, string $locale, string $direction) {
+    $this->get($url)
+        ->assertNotFound()
+        ->assertInertia(fn (Assert $page) => $page
+            ->component('Errors/ErrorPage')
+            ->where('locale', $locale)
+            ->where('direction', $direction))
+        ->assertSee("<html lang=\"{$locale}\" dir=\"{$direction}\">", escape: false);
+})->with([
+    ['/no-such-page', 'en', 'ltr'],
+    ['/ms/no-such-page', 'ms', 'ltr'],
+    ['/ar/no-such-page', 'ar', 'rtl'],
+    ['/arabic', 'en', 'ltr'],
+]);
+
+it('never exposes the exception with APP_DEBUG=false (NFR-SEC-07)', function (bool $inertia) {
+    $headers = $inertia ? inertiaHeaders() : [];
+    $body = $this->get('/_test/crash', $headers)->assertStatus(500)->getContent();
+
+    expect($body)
+        ->not->toContain('hunter2')
+        ->not->toContain('DB_PASSWORD')
+        ->not->toContain('Secret.php')
+        ->not->toContain('RuntimeException')
+        ->not->toContain(base_path())
+        ->not->toContain(str_replace('\\', '\\\\', base_path()))
+        ->not->toContain('Stack trace')
+        ->not->toMatch('/#\d+ [A-Za-z\/\\\\]/');
+})->with([
+    'full page load' => [false],
+    'Inertia visit' => [true],
+]);
+
+it('keeps the debug page for developers when APP_DEBUG is on', function () {
+    config(['app.debug' => true]);
+
+    $this->get('/_test/crash')
+        ->assertStatus(500)
+        ->assertSee('DB_PASSWORD=hunter2')
+        ->assertHeaderMissing('X-Inertia');
+});
+
+it('answers Inertia visits with the error page object', function () {
+    $this->get('/ar/no-such-page', inertiaHeaders())
+        ->assertNotFound()
+        ->assertHeader('X-Inertia', 'true')
+        ->assertJsonPath('component', 'Errors/ErrorPage')
+        ->assertJsonPath('props.status', 404)
+        ->assertJsonPath('props.locale', 'ar');
+});
+
+it('keeps JSON errors for API and JSON clients', function () {
+    $this->getJson('/no-such-page')
+        ->assertNotFound()
+        ->assertHeaderMissing('X-Inertia')
+        ->assertJsonStructure(['message']);
+});
+
+it('shows the maintenance page in maintenance mode', function () {
+    app()->maintenanceMode()->activate([]);
+
+    try {
+        $this->get('/')
+            ->assertStatus(503)
+            ->assertInertia(fn (Assert $page) => $page->component('Errors/ErrorPage')->where('status', 503))
+            ->assertHeader('Content-Security-Policy');
+    } finally {
+        app()->maintenanceMode()->deactivate();
+    }
+});
+
+it('leaves other statuses to the framework', function () {
+    $response = $this->get('/_test/teapot')->assertStatus(418);
+
+    expect($response->getContent())->not->toContain('Errors\/ErrorPage');
+});
diff --git a/tests/Feature/LocalGalleriesTest.php b/tests/Feature/LocalGalleriesTest.php
index 103d1d8..d820afe 100644
--- a/tests/Feature/LocalGalleriesTest.php
+++ b/tests/Feature/LocalGalleriesTest.php
@@ -25,7 +25,14 @@ function bootAs(string $environment): void
     expect(app()->environment())->toBe($environment);
 
     $this->get($url)->assertNotFound();
-})->with(['production', 'staging', 'demo', 'testing'])->with(['/dev/tokens', '/dev/components']);
+})->with(['production', 'staging', 'demo', 'testing'])->with([
+    '/dev/tokens',
+    '/dev/components',
+    '/dev/layouts/checkout',
+    '/ar/dev/layouts/checkout',
+    '/dev/layouts/vendor',
+    '/ms/dev/layouts/vendor',
+]);
 
 it('shows a development navigation bar on every page in local', function (string $url) {
     bootAs('local');
@@ -34,7 +41,7 @@ function bootAs(string $environment): void
 
     expect($html)->toContain('<nav aria-label="Development" lang="en" dir="ltr"');
 
-    foreach (['/', '/ms', '/ar', '/dev/tokens', '/dev/components'] as $path) {
+    foreach (['/', '/ms', '/ar', '/dev/tokens', '/dev/components', '/dev/layouts/checkout', '/dev/layouts/vendor'] as $path) {
         expect($html)->toContain('href="'.url($path).'"');
     }
 })->with(['/', '/ar', '/dev/components']);
@@ -54,4 +61,32 @@ function bootAs(string $environment): void
 })->with([
     'tokens' => ['/dev/tokens', 'Dev/Tokens'],
     'components' => ['/dev/components', 'Dev/Components'],
+    'checkout layout' => ['/dev/layouts/checkout', 'Storefront/CheckoutPreview'],
+    'vendor layout' => ['/dev/layouts/vendor', 'Vendor/LayoutPreview'],
+]);
+
+it('previews the layouts in every locale, with alternates for the switcher', function (string $prefix, string $locale, string $direction) {
+    bootAs('local');
+
+    $this->get($prefix.'/dev/layouts/vendor')
+        ->assertOk()
+        ->assertInertia(fn (Assert $page) => $page
+            ->component('Vendor/LayoutPreview')
+            ->where('locale', $locale)
+            ->where('direction', $direction)
+            ->where('alternates.ar', url('/ar/dev/layouts/vendor'))
+            ->where('alternates.x-default', url('/dev/layouts/vendor')));
+})->with([
+    ['', 'en', 'ltr'],
+    ['/ms', 'ms', 'ltr'],
+    ['/ar', 'ar', 'rtl'],
 ]);
+
+it('registers the /en redirect only once', function () {
+    bootAs('local');
+
+    $redirects = collect(app('router')->getRoutes()->getRoutes())
+        ->filter(fn ($route) => $route->uri() === 'en/{path?}');
+
+    expect($redirects)->toHaveCount(1);
+});
diff --git a/tests/Feature/LocaleRoutingTest.php b/tests/Feature/LocaleRoutingTest.php
index 3f4d991..99d8f71 100644
--- a/tests/Feature/LocaleRoutingTest.php
+++ b/tests/Feature/LocaleRoutingTest.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Middleware\HandleInertiaRequests;
 use Inertia\Testing\AssertableInertia as Assert;
 
 it('serves each locale under its URL prefix (NFR-I18N-04)', function (string $url, string $locale, string $direction) {
@@ -60,12 +61,31 @@
 
     foreach (['en' => '/', 'ms' => '/ms', 'ar' => '/ar', 'x-default' => '/'] as $hreflang => $path) {
         $response->assertSee(
-            '<link rel="alternate" hreflang="'.$hreflang.'" href="'.url($path).'">',
+            '<link rel="alternate" hreflang="'.$hreflang.'" href="'.url($path).'" data-inertia="hreflang-'.$hreflang.'">',
             escape: false,
         );
     }
 })->with(['/', '/ms', '/ar']);
 
+it('shares the alternates as a prop, so client-side visits replace them', function (string $url) {
+    $this->get($url)->assertInertia(fn (Assert $page) => $page->where('alternates', [
+        'en' => url('/'),
+        'ms' => url('/ms'),
+        'ar' => url('/ar'),
+        'x-default' => url('/'),
+    ]));
+})->with(['/', '/ms', '/ar']);
+
+it('sends the alternates on Inertia (client-side) visits too', function () {
+    $version = app(HandleInertiaRequests::class)->version(request());
+
+    $this->get('/ms', ['X-Inertia' => 'true', 'X-Inertia-Version' => (string) $version])
+        ->assertOk()
+        ->assertJsonPath('component', 'Storefront/Home')
+        ->assertJsonPath('props.alternates.ar', url('/ar'))
+        ->assertJsonPath('props.alternates.x-default', url('/'));
+});
+
 // One request per test: Laravel's Vite service remembers which assets it
 // has preloaded and skips them on later requests in the same application.
 it('preloads the Arabic font on Arabic pages', function () {
diff --git a/tests/Feature/SecurityHeadersTest.php b/tests/Feature/SecurityHeadersTest.php
new file mode 100644
index 0000000..4709cd3
--- /dev/null
+++ b/tests/Feature/SecurityHeadersTest.php
@@ -0,0 +1,107 @@
+<?php
+
+use Illuminate\Support\Facades\Vite;
+
+/** @return array<string, string> directive => value */
+function cspDirectives(string $header): array
+{
+    $directives = [];
+
+    foreach (array_filter(array_map('trim', explode(';', $header))) as $directive) {
+        [$name, $value] = array_pad(explode(' ', $directive, 2), 2, '');
+        $directives[$name] = $value;
+    }
+
+    return $directives;
+}
+
+it('sends the security headers (NFR-SEC-08)', function (string $url, int $status) {
+    $this->get($url)
+        ->assertStatus($status)
+        ->assertHeader('X-Content-Type-Options', 'nosniff')
+        ->assertHeader('Referrer-Policy', 'strict-origin-when-cross-origin')
+        ->assertHeader('X-Frame-Options', 'DENY')
+        ->assertHeader('Cross-Origin-Opener-Policy', 'same-origin')
+        ->assertHeader('Permissions-Policy', 'camera=(), microphone=(), geolocation=()')
+        ->assertHeader('Content-Security-Policy');
+})->with([
+    'storefront page' => ['/', 200],
+    'localised page' => ['/ar', 200],
+    'unknown URL (no route)' => ['/no-such-page', 404],
+    'health check' => ['/up', 200],
+]);
+
+it('sends a strict, nonce-based content security policy', function () {
+    $csp = cspDirectives($this->get('/')->headers->get('Content-Security-Policy'));
+    $nonce = Vite::cspNonce();
+
+    expect($nonce)->toBeString()->not->toBeEmpty()
+        ->and($csp)->toMatchArray([
+            'default-src' => "'self'",
+            'script-src' => "'self' 'nonce-{$nonce}'",
+            'style-src' => "'self' 'nonce-{$nonce}'",
+            'img-src' => "'self' data:",
+            'font-src' => "'self'",
+            'connect-src' => "'self'",
+            'object-src' => "'none'",
+            'base-uri' => "'self'",
+            'form-action' => "'self'",
+            'frame-ancestors' => "'none'",
+        ])
+        ->and(implode(' ', $csp))->not->toContain('unsafe-inline')->not->toContain('unsafe-eval');
+});
+
+it('puts the policy nonce on every script and style tag the page renders', function () {
+    $response = $this->get('/');
+    $html = $response->getContent();
+    preg_match("/'nonce-([^']+)'/", $response->headers->get('Content-Security-Policy'), $match);
+
+    preg_match_all('/<(script|style)\b[^>]*>/', $html, $tags);
+    $executable = array_filter($tags[0], fn (string $tag) => ! str_contains($tag, 'type="application/json"'));
+
+    expect($executable)->not->toBeEmpty();
+
+    foreach ($executable as $tag) {
+        expect($tag)->toContain('nonce="'.$match[1].'"');
+    }
+
+    expect($html)->toContain('<meta property="csp-nonce" nonce="'.$match[1].'">');
+});
+
+it('uses a new nonce for every response', function () {
+    $first = $this->get('/')->headers->get('Content-Security-Policy');
+    $second = $this->get('/')->headers->get('Content-Security-Policy');
+
+    expect($first)->not->toBe($second);
+});
+
+it('sends HSTS over HTTPS outside local development', function (string $environment) {
+    app()['env'] = $environment;
+
+    $this->get('https://localhost/')
+        ->assertHeader('Strict-Transport-Security', 'max-age=31536000');
+})->with(['demo', 'staging', 'production']);
+
+it('never sends HSTS over plain HTTP or in local development', function (string $environment, string $url) {
+    app()['env'] = $environment;
+
+    $this->get($url)->assertHeaderMissing('Strict-Transport-Security');
+})->with([
+    'HTTP on demo' => ['demo', 'http://localhost/'],
+    'HTTPS in local' => ['local', 'https://localhost/'],
+]);
+
+it('allows the Vite dev server only while it is running', function () {
+    $hot = public_path('hot');
+    file_put_contents($hot, 'http://[::1]:5173');
+
+    try {
+        $csp = cspDirectives($this->get('/')->headers->get('Content-Security-Policy'));
+    } finally {
+        unlink($hot);
+    }
+
+    expect($csp['script-src'])->toContain('http://[::1]:5173')
+        ->and($csp['connect-src'])->toBe("'self' http://[::1]:5173 ws://[::1]:5173")
+        ->and($csp['style-src'])->toBe("'self' 'unsafe-inline' http://[::1]:5173");
+});