Post Phase 8 - Fixes 1

Delivered:

Super Administrator — env-var provisioned, no StaffProfile at all (structural exclusion from Team/barber-picker/appointments/staff-totals, not a filter). hasPermission short-circuit + new getActingBusinessContext() helper retrofitted across 16 owner pages so it can actually manage the business.
Media Manager — one upload/library/external-URL modal + field picker, backing every image field app-wide. Local-disk storage + Docker volume, SVG rejected, size-capped.
Welcome backgrounds — desktop/mobile images with CSS breakpoint swap.
Business Branding settings — logo/cover/welcome/favicon/icon/colours all editable post-install; cover image finally rendered (was dead config).
Service descriptions — now surfaced on Home and in the booking flow.
Loyalty card — live preview, ColorPicker/MediaPicker/IconPicker, flip removed for a static premium-styled card, Loyalty added to bottom nav. Fixed a real pre-existing bug where the card's configured colour/image/icon were stored but never actually rendered.
Home Screen Redesign — hero gallery + sticky Services/Portfolio/Reviews/Details tabs, backed by a new unified gallery model/service (no hero/portfolio duplication). Details tab surfaces social links and a map that were never shown before.
Google Reviews — real sync pipeline (24h cron, CRON_SECRET-gated, mirrors the existing notification cron exactly), DB-only customer reads, owner hide/unhide + policy management page.
Architecture cleanup — SettingsPageShell extracted from 6 duplicated page wrappers; fixed a second pre-existing bug where branding image fields could never actually be cleared once set.
Verification: 418 tests passing (236 unit + 182 integration, all against a real MySQL database), full typecheck/lint clean across src, and a real Docker build+run cycle — which caught and fixed a genuine bug (scripts/ wasn't copied into the production image, so Super Admin sync would have crashed on every real deployment).

src/features/owner/components/loyalty-config-form.tsx

@@ -4,9 +4,13 @@ import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
+import { ColorPicker } from "@/components/ui/color-picker";
+import { IconPicker } from "@/components/ui/icon-picker";
 import { Input } from "@/components/ui/input";
+import { LoyaltyCard } from "@/components/ui/loyalty-card";
 import { Select } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
+import { MediaPicker } from "@/features/media/components/media-picker";
 import { updateLoyaltyConfigAction } from "../actions/loyalty-config";
 import type { ProgrammeConfigInput } from "@/services/loyalty/loyalty.service";
 
@@ -17,6 +21,7 @@ const REWARD_TYPES: { value: ProgrammeConfigInput["rewardType"]; label: string }
 ];
 
 export interface LoyaltyConfigFormProps {
+  businessName: string;
   initialConfig: ProgrammeConfigInput;
   initialEligibleServiceIds: string[];
   initialEligibleStaffIds: string[];
@@ -25,6 +30,7 @@ export interface LoyaltyConfigFormProps {
 }
 
 export function LoyaltyConfigForm({
+  businessName,
   initialConfig,
   initialEligibleServiceIds,
   initialEligibleStaffIds,
@@ -191,13 +197,43 @@ export function LoyaltyConfigForm({
         </div>
       </section>
 
-      <section className="space-y-3">
+      <section className="space-y-3 lg:col-span-2">
         <h3 className="text-muted ml-1 text-[10px] font-bold tracking-widest uppercase">Card Appearance</h3>
-        <div className="rounded-jumbo border-line space-y-4 border bg-white p-6">
-          <Input label="Card background color" value={config.cardBackgroundColor ?? ""} onChange={(e) => set("cardBackgroundColor", e.target.value)} placeholder="#111b15" />
-          <Input label="Card background image URL (optional)" value={config.cardBackgroundImageUrl ?? ""} onChange={(e) => set("cardBackgroundImageUrl", e.target.value)} />
-          <Input label="Stamp icon" value={config.stampIcon ?? ""} onChange={(e) => set("stampIcon", e.target.value)} placeholder="scissors" />
-          <Input label="Terms line" value={config.termsLine ?? ""} onChange={(e) => set("termsLine", e.target.value)} placeholder="Valid for 12 months. One reward per visit." />
+        <div className="rounded-jumbo border-line space-y-4 border bg-white p-6 lg:grid lg:grid-cols-[minmax(0,320px)_1fr] lg:gap-8 lg:space-y-0">
+          <div>
+            <p className="text-muted mb-2 ml-1 text-[10px] font-bold tracking-widest uppercase">Live Preview</p>
+            <LoyaltyCard
+              businessName={businessName}
+              memberNumber="A1B2C3"
+              stampsRequired={Math.max(config.stampsRequired, 1)}
+              stampsEarned={Math.min(3, Math.max(config.stampsRequired - 1, 0))}
+              rewardLabel={config.rewardLabel || "Reward"}
+              termsLine={config.termsLine}
+              cardBackgroundColor={config.cardBackgroundColor}
+              cardBackgroundImageUrl={config.cardBackgroundImageUrl}
+              stampIcon={config.stampIcon}
+            />
+          </div>
+          <div className="mt-4 space-y-4 lg:mt-0">
+            <ColorPicker
+              label="Background colour"
+              value={config.cardBackgroundColor}
+              onChange={(hex) => set("cardBackgroundColor", hex)}
+            />
+            <MediaPicker
+              label="Background image (optional)"
+              value={config.cardBackgroundImageUrl}
+              onChange={(url) => set("cardBackgroundImageUrl", url ?? undefined)}
+              category="loyalty"
+            />
+            <IconPicker label="Stamp icon" value={config.stampIcon} onChange={(iconName) => set("stampIcon", iconName)} />
+            <Input
+              label="Terms line"
+              value={config.termsLine ?? ""}
+              onChange={(e) => set("termsLine", e.target.value)}
+              placeholder="Valid for 12 months. One reward per visit."
+            />
+          </div>
         </div>
       </section>