CoffinsStep: rewrite to grid-sidebar ecommerce layout

- Switch from wide-form to grid-sidebar (viewport-locked, independent scroll)
- Sidebar: heading, allowance info bubble (conditional), category menu with
  expandable subcategories, dual-knob price slider with editable inputs,
  sort by dropdown, clear all filters, save-and-exit link
- Grid: coffin cards with thumbnail hover preview, equal-height cards,
  subtle bg for white-bg product photos, colour count, Most Popular badge
- Card click navigates to CoffinDetailsStep (no Continue button)
- 20 coffins per page max before pagination
- WizardLayout grid-sidebar: wider sidebar (28%), overflowX hidden,
  vertical scroll at all breakpoints, viewport-lock on desktop only

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/pages/CoffinsStep/CoffinsStep.stories.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { CoffinsStep } from './CoffinsStep';
-import type { CoffinsStepValues, CoffinsStepErrors, Coffin } from './CoffinsStep';
+import type { CoffinsStepValues, Coffin } from './CoffinsStep';
 import { Navigation } from '../../organisms/Navigation';
 import Box from '@mui/material/Box';
 
@@ -34,21 +34,29 @@ const nav = (
   />
 );
 
+// Unsplash images used as stand-ins for coffin product photos
 const sampleCoffins: Coffin[] = [
   {
     id: 'cedar-classic',
     name: 'Cedar Classic',
     imageUrl: 'https://images.unsplash.com/photo-1618220179428-22790b461013?w=400&h=300&fit=crop',
+    thumbnails: [
+      'https://images.unsplash.com/photo-1555041469-a586c1029ad9?w=80&h=60&fit=crop',
+      'https://images.unsplash.com/photo-1449247709967-d4461a6a6103?w=80&h=60&fit=crop',
+    ],
     price: 2800,
     category: 'Solid Timber',
     isPopular: true,
+    colourCount: 3,
   },
   {
     id: 'oak-heritage',
     name: 'Oak Heritage',
     imageUrl: 'https://images.unsplash.com/photo-1555041469-a586c1029ad9?w=400&h=300&fit=crop',
+    thumbnails: ['https://images.unsplash.com/photo-1618220179428-22790b461013?w=80&h=60&fit=crop'],
     price: 3500,
     category: 'Solid Timber',
+    colourCount: 2,
   },
   {
     id: 'eco-willow',
@@ -62,15 +70,23 @@ const sampleCoffins: Coffin[] = [
     id: 'maple-serenity',
     name: 'Maple Serenity',
     imageUrl: 'https://images.unsplash.com/photo-1449247709967-d4461a6a6103?w=400&h=300&fit=crop',
+    thumbnails: [
+      'https://images.unsplash.com/photo-1490750967868-88aa4f44baee?w=80&h=60&fit=crop',
+      'https://images.unsplash.com/photo-1432462770865-65b70566d673?w=80&h=60&fit=crop',
+      'https://images.unsplash.com/photo-1618220179428-22790b461013?w=80&h=60&fit=crop',
+    ],
     price: 4200,
     category: 'Solid Timber',
+    colourCount: 4,
   },
   {
     id: 'custom-rose',
     name: 'Custom Rose Garden',
     imageUrl: 'https://images.unsplash.com/photo-1490750967868-88aa4f44baee?w=400&h=300&fit=crop',
+    thumbnails: ['https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=80&h=60&fit=crop'],
     price: 1800,
     category: 'Custom Board',
+    colourCount: 2,
   },
   {
     id: 'bronze-eternal',
@@ -82,9 +98,9 @@ const sampleCoffins: Coffin[] = [
 ];
 
 const defaultValues: CoffinsStepValues = {
-  selectedCoffinId: null,
   categoryFilter: 'all',
-  priceFilter: 'all',
+  priceRange: [0, 15000],
+  sortBy: 'popularity',
   page: 1,
 };
 
@@ -104,56 +120,22 @@ type Story = StoryObj<typeof CoffinsStep>;
 
 // ─── Interactive (default) ──────────────────────────────────────────────────
 
-/** Full catalogue with filters */
+/** Grid-sidebar layout with filters, subcategories, price slider, and thumbnails */
 export const Default: Story = {
   render: () => {
     const [values, setValues] = useState<CoffinsStepValues>({ ...defaultValues });
-    const [errors, setErrors] = useState<CoffinsStepErrors>({});
 
-    const handleContinue = () => {
-      if (!values.selectedCoffinId) {
-        setErrors({ selectedCoffinId: 'Please choose a coffin to continue.' });
-        return;
-      }
-      alert(`Selected: ${values.selectedCoffinId}`);
-    };
-
-    return (
-      <CoffinsStep
-        values={values}
-        onChange={(v) => {
-          setValues(v);
-          setErrors({});
-        }}
-        onContinue={handleContinue}
-        onBack={() => alert('Back')}
-        onSaveAndExit={() => alert('Save')}
-        errors={errors}
-        coffins={sampleCoffins}
-        totalCount={19}
-        totalPages={2}
-        navigation={nav}
-      />
-    );
-  },
-};
-
-// ─── Coffin selected ────────────────────────────────────────────────────────
-
-/** A coffin is already selected */
-export const CoffinSelected: Story = {
-  render: () => {
-    const [values, setValues] = useState<CoffinsStepValues>({
-      ...defaultValues,
-      selectedCoffinId: 'cedar-classic',
-    });
     return (
       <CoffinsStep
         values={values}
         onChange={setValues}
-        onContinue={() => alert('Continue')}
+        onSelectCoffin={(id) => alert(`Navigate to details: ${id}`)}
         onBack={() => alert('Back')}
+        onSaveAndExit={() => alert('Save')}
         coffins={sampleCoffins}
+        totalCount={19}
+        totalPages={2}
+        allowanceAmount={500}
         navigation={nav}
       />
     );
@@ -162,7 +144,7 @@ export const CoffinSelected: Story = {
 
 // ─── Pre-planning ───────────────────────────────────────────────────────────
 
-/** Pre-planning variant */
+/** Pre-planning variant (no allowance — browsing only) */
 export const PrePlanning: Story = {
   render: () => {
     const [values, setValues] = useState<CoffinsStepValues>({ ...defaultValues });
@@ -170,7 +152,7 @@ export const PrePlanning: Story = {
       <CoffinsStep
         values={values}
         onChange={setValues}
-        onContinue={() => alert('Continue')}
+        onSelectCoffin={(id) => alert(`Navigate to details: ${id}`)}
         onBack={() => alert('Back')}
         coffins={sampleCoffins}
         isPrePlanning
@@ -180,19 +162,50 @@ export const PrePlanning: Story = {
   },
 };
 
-// ─── Validation error ───────────────────────────────────────────────────────
+// ─── With subcategory selected ──────────────────────────────────────────────
 
-/** No coffin selected with error */
+/** Subcategory selected — parent expanded, child highlighted */
-export const WithError: Story = {
+export const SubcategorySelected: Story = {
   render: () => {
-    const [values, setValues] = useState<CoffinsStepValues>({ ...defaultValues });
+    const [values, setValues] = useState<CoffinsStepValues>({
+      ...defaultValues,
+      categoryFilter: 'cedar',
+      priceRange: [2000, 5000],
+    });
     return (
       <CoffinsStep
         values={values}
         onChange={setValues}
-        onContinue={() => {}}
+        onSelectCoffin={(id) => alert(`Navigate to details: ${id}`)}
-        errors={{ selectedCoffinId: 'Please choose a coffin to continue.' }}
+        onBack={() => alert('Back')}
-        coffins={sampleCoffins}
+        coffins={sampleCoffins.filter((c) => c.category === 'Solid Timber')}
+        totalCount={3}
+        allowanceAmount={500}
+        navigation={nav}
+      />
+    );
+  },
+};
+
+// ─── Empty results ──────────────────────────────────────────────────────────
+
+/** No coffins match filters */
+export const EmptyResults: Story = {
+  render: () => {
+    const [values, setValues] = useState<CoffinsStepValues>({
+      ...defaultValues,
+      categoryFilter: 'protective_metal',
+      priceRange: [0, 1000],
+    });
+    return (
+      <CoffinsStep
+        values={values}
+        onChange={setValues}
+        onSelectCoffin={(id) => alert(`Navigate to details: ${id}`)}
+        onBack={() => alert('Back')}
+        coffins={[]}
+        totalCount={0}
+        allowanceAmount={500}
         navigation={nav}
       />
     );

src/components/pages/CoffinsStep/CoffinsStep.tsx

@@ -2,15 +2,20 @@ import React from 'react';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
+import Paper from '@mui/material/Paper';
+import Slider from '@mui/material/Slider';
 import Pagination from '@mui/material/Pagination';
+import InputAdornment from '@mui/material/InputAdornment';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import type { SxProps, Theme } from '@mui/material/styles';
 import { WizardLayout } from '../../templates/WizardLayout';
-import { FilterPanel } from '../../molecules/FilterPanel';
 import { Card } from '../../atoms/Card';
 import { Badge } from '../../atoms/Badge';
+import { Collapse } from '../../atoms/Collapse';
 import { Typography } from '../../atoms/Typography';
-import { Button } from '../../atoms/Button';
 import { Divider } from '../../atoms/Divider';
+import { Link } from '../../atoms/Link';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -19,57 +24,51 @@ export interface Coffin {
   id: string;
   name: string;
   imageUrl: string;
+  /** Additional images (handles, fixtures, interior) shown as thumbnails */
+  thumbnails?: string[];
   price: number;
   category: string;
   isPopular?: boolean;
+  /** Number of colour/finish variants available */
+  colourCount?: number;
 }
 
-/** Filter category option */
+/** Filter category option (supports one level of subcategories) */
 export interface CoffinCategory {
   value: string;
   label: string;
+  /** Subcategories — shown when parent is selected */
+  children?: CoffinCategory[];
 }
 
-/** Price range filter option */
+/** Sort direction */
-export interface CoffinPriceRange {
+export type CoffinSortBy = 'popularity' | 'price_asc' | 'price_desc';
-  value: string;
-  label: string;
-}
 
 /** Form values for the coffins step */
 export interface CoffinsStepValues {
-  /** Selected coffin ID */
-  selectedCoffinId: string | null;
   /** Active category filter */
   categoryFilter: string;
-  /** Active price filter */
+  /** Price range [min, max] for slider filter */
-  priceFilter: string;
+  priceRange: [number, number];
+  /** Sort order */
+  sortBy: CoffinSortBy;
   /** Current page (1-indexed) */
   page: number;
 }
 
-/** Field-level error messages */
-export interface CoffinsStepErrors {
-  selectedCoffinId?: string;
-}
-
 /** Props for the CoffinsStep page component */
 export interface CoffinsStepProps {
-  /** Current form values */
+  /** Current filter/sort values */
   values: CoffinsStepValues;
-  /** Callback when any field value changes */
+  /** Callback when any filter/sort value changes */
   onChange: (values: CoffinsStepValues) => void;
-  /** Callback when the Continue button is clicked */
+  /** Called when a coffin card is clicked — navigates to CoffinDetailsStep */
-  onContinue: () => void;
+  onSelectCoffin: (coffinId: string) => void;
   /** Callback for back navigation */
   onBack?: () => void;
   /** Callback for save-and-exit */
   onSaveAndExit?: () => void;
-  /** Field-level validation errors */
+  /** Available coffins (already filtered/sorted/paginated by parent) */
-  errors?: CoffinsStepErrors;
-  /** Whether the Continue button is in a loading state */
-  loading?: boolean;
-  /** Available coffins (already filtered by parent) */
   coffins: Coffin[];
   /** Total count before pagination (for display) */
   totalCount?: number;
@@ -77,8 +76,14 @@ export interface CoffinsStepProps {
   totalPages?: number;
   /** Category filter options */
   categories?: CoffinCategory[];
-  /** Price range filter options */
+  /** Min price for the range slider */
-  priceRanges?: CoffinPriceRange[];
+  minPrice?: number;
+  /** Max price for the range slider */
+  maxPrice?: number;
+  /** Package coffin allowance amount (shown in info bubble, omit if no allowance) */
+  allowanceAmount?: number;
+  /** Max coffins per page before pagination (default 20) */
+  pageSize?: number;
   /** Whether this is a pre-planning flow */
   isPrePlanning?: boolean;
   /** Navigation bar */
@@ -93,48 +98,197 @@ export interface CoffinsStepProps {
   sx?: SxProps<Theme>;
 }
 
+// ─── Category menu item style ───────────────────────────────────────────────
+
+const categoryItemSx = (isActive: boolean): SxProps<Theme> => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  textAlign: 'left',
+  border: 'none',
+  background: 'none',
+  cursor: 'pointer',
+  py: 0.75,
+  px: 1.5,
+  borderRadius: 1,
+  fontSize: '0.875rem',
+  fontWeight: isActive ? 600 : 400,
+  color: isActive ? 'primary.main' : 'text.primary',
+  bgcolor: isActive ? 'var(--fa-color-brand-50)' : 'transparent',
+  '&:hover': {
+    bgcolor: isActive ? 'var(--fa-color-brand-50)' : 'var(--fa-color-surface-subtle)',
+  },
+  fontFamily: 'inherit',
+});
+
+// ─── Coffin card with thumbnail hover ───────────────────────────────────────
+
+const CoffinCard: React.FC<{
+  coffin: Coffin;
+  onClick: () => void;
+}> = ({ coffin, onClick }) => {
+  const [previewImage, setPreviewImage] = React.useState(coffin.imageUrl);
+
+  const allImages = [coffin.imageUrl, ...(coffin.thumbnails || [])];
+  const hasThumbnails = allImages.length > 1;
+
+  return (
+    <Card
+      interactive
+      padding="none"
+      onClick={onClick}
+      sx={{
+        overflow: 'hidden',
+        cursor: 'pointer',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      {/* Main image on subtle background — handles white-bg product photos */}
+      <Box
+        sx={{
+          position: 'relative',
+          height: 180,
+          bgcolor: 'var(--fa-color-surface-subtle)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          p: 2,
+          flexShrink: 0,
+        }}
+      >
+        <Box
+          component="img"
+          src={previewImage}
+          alt={coffin.name}
+          sx={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
+        />
+        {coffin.isPopular && (
+          <Box sx={{ position: 'absolute', top: 8, left: 8 }}>
+            <Badge variant="soft" color="brand" aria-label="Most popular choice">
+              Most Popular
+            </Badge>
+          </Box>
+        )}
+      </Box>
+
+      {/* Thumbnail strip — hover swaps main preview */}
+      {hasThumbnails && (
+        <Box
+          sx={{ display: 'flex', gap: 0.5, px: 2, pt: 1, flexShrink: 0 }}
+          onMouseLeave={() => setPreviewImage(coffin.imageUrl)}
+        >
+          {allImages.map((img, i) => (
+            <Box
+              key={i}
+              component="img"
+              src={img}
+              alt=""
+              onMouseEnter={() => setPreviewImage(img)}
+              sx={{
+                width: 48,
+                height: 36,
+                objectFit: 'cover',
+                borderRadius: 0.5,
+                border: 2,
+                borderColor: previewImage === img ? 'primary.main' : 'transparent',
+                opacity: previewImage === img ? 1 : 0.7,
+                transition: 'border-color 0.15s, opacity 0.15s',
+                '&:hover': { opacity: 1 },
+              }}
+            />
+          ))}
+        </Box>
+      )}
+
+      {/* Content — flex: 1 ensures all cards are the same height */}
+      <Box
+        sx={{ p: 2, pt: hasThumbnails ? 1 : 2, flex: 1, display: 'flex', flexDirection: 'column' }}
+      >
+        <Typography variant="h6" maxLines={2} sx={{ mb: 0.5 }}>
+          {coffin.name}
+        </Typography>
+        <Typography variant="h6" color="primary">
+          ${coffin.price.toLocaleString('en-AU')}
+        </Typography>
+        {coffin.colourCount != null && coffin.colourCount > 0 && (
+          <Typography
+            variant="caption"
+            color="text.secondary"
+            sx={{ mt: 'auto', pt: 0.5, display: 'block' }}
+          >
+            {coffin.colourCount} Colour option{coffin.colourCount !== 1 ? 's' : ''} available
+          </Typography>
+        )}
+      </Box>
+    </Card>
+  );
+};
+
 // ─── Component ───────────────────────────────────────────────────────────────
 
 /**
- * Step 10 — Coffin selection for the FA arrangement wizard.
+ * Step 10 — Coffin browsing for the FA arrangement wizard.
  *
- * Grid-sidebar layout: filter sidebar (left/top on mobile) + coffin
+ * Grid-sidebar layout: filter sidebar (left, stacked on mobile) + coffin
- * card grid (main area). Cards show image, name, price, and optional
+ * card grid (right). Both panels scroll independently on desktop; sidebar
- * "Most Popular" badge (Rec #10). Pagination at the bottom.
+ * scrollbar appears on hover.
  *
- * Uses Australian terminology: "coffin" not "casket" (both types may
+ * Clicking a coffin card navigates to CoffinDetailsStep — no Continue
- * appear in the catalogue — the product type is shown per card).
+ * button. Sidebar contains heading, allowance info, category menu with
+ * expandable subcategories, price range slider with editable inputs,
+ * sort control, and save-and-exit link.
+ *
+ * Cards show product image on subtle background (for white-bg photos),
+ * thumbnail strip with hover preview, name, price, and colour count.
+ * All cards are equal height regardless of thumbnail/colour presence.
+ *
+ * Uses Australian terminology: "coffin" not "casket".
  *
  * Pure presentation component — props in, callbacks out.
- * Filtering and pagination logic handled by parent.
+ * Filtering, sorting, and pagination logic handled by parent.
  *
  * Spec: documentation/steps/steps/10_coffins.yaml
  */
 export const CoffinsStep: React.FC<CoffinsStepProps> = ({
   values,
   onChange,
-  onContinue,
+  onSelectCoffin,
   onBack,
   onSaveAndExit,
-  errors,
-  loading = false,
   coffins,
   totalCount,
   totalPages = 1,
   categories = [
-    { value: 'all', label: 'All categories' },
+    { value: 'all', label: 'All' },
-    { value: 'solid_timber', label: 'Solid Timber' },
+    {
-    { value: 'custom_board', label: 'Custom Board' },
+      value: 'solid_timber',
+      label: 'Solid Timber',
+      children: [
+        { value: 'cedar', label: 'Cedar' },
+        { value: 'oak', label: 'Oak' },
+        { value: 'mahogany', label: 'Mahogany' },
+        { value: 'teak', label: 'Teak' },
+      ],
+    },
+    {
+      value: 'custom_board',
+      label: 'Custom Board',
+      children: [
+        { value: 'printed', label: 'Printed' },
+        { value: 'painted', label: 'Painted' },
+      ],
+    },
     { value: 'environmental', label: 'Environmental' },
     { value: 'designer', label: 'Designer' },
     { value: 'protective_metal', label: 'Protective Metal' },
   ],
-  priceRanges = [
+  minPrice = 0,
-    { value: 'all', label: 'All prices' },
+  maxPrice = 15000,
-    { value: 'under_2000', label: 'Under $2,000' },
+  allowanceAmount,
-    { value: '2000_4000', label: '$2,000 – $4,000' },
+  pageSize = 20,
-    { value: 'over_4000', label: 'Over $4,000' },
-  ],
   isPrePlanning = false,
   navigation,
   progressStepper,
@@ -142,21 +296,63 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
   hideHelpBar,
   sx,
 }) => {
+  // Cap displayed coffins to pageSize (default 20 per page)
+  const visibleCoffins = coffins.slice(0, pageSize);
   const displayCount = totalCount ?? coffins.length;
-  const activeFilterCount =
+  const derivedTotalPages = totalPages > 1 ? totalPages : Math.ceil(coffins.length / pageSize);
-    (values.categoryFilter !== 'all' ? 1 : 0) + (values.priceFilter !== 'all' ? 1 : 0);
 
-  const handleFilterChange = (field: 'categoryFilter' | 'priceFilter', value: string) => {
+  // ─── Price input local state (commits on blur / Enter) ───
-    onChange({ ...values, [field]: value, page: 1 });
+  const [priceMinInput, setPriceMinInput] = React.useState(String(values.priceRange[0]));
+  const [priceMaxInput, setPriceMaxInput] = React.useState(String(values.priceRange[1]));
+
+  // Sync local state when the slider (or clear) changes the value
+  const rangeMin = values.priceRange[0];
+  const rangeMax = values.priceRange[1];
+  React.useEffect(() => {
+    setPriceMinInput(String(rangeMin));
+    setPriceMaxInput(String(rangeMax));
+  }, [rangeMin, rangeMax]);
+
+  const commitPriceRange = () => {
+    let lo = parseInt(priceMinInput, 10);
+    let hi = parseInt(priceMaxInput, 10);
+    if (isNaN(lo)) lo = minPrice;
+    if (isNaN(hi)) hi = maxPrice;
+    lo = Math.max(minPrice, Math.min(lo, maxPrice));
+    hi = Math.max(minPrice, Math.min(hi, maxPrice));
+    if (lo > hi) [lo, hi] = [hi, lo];
+    const newRange: [number, number] = [lo, hi];
+    if (newRange[0] !== values.priceRange[0] || newRange[1] !== values.priceRange[1]) {
+      onChange({ ...values, priceRange: newRange, page: 1 });
+    }
   };
 
-  const handleFilterClear = () => {
+  // ─── Derived state ───
-    onChange({ ...values, categoryFilter: 'all', priceFilter: 'all', page: 1 });
+  const hasActiveFilters =
+    values.categoryFilter !== 'all' ||
+    values.priceRange[0] !== minPrice ||
+    values.priceRange[1] !== maxPrice;
+
+  // Determine which parent category is expanded (if filter matches parent or child)
+  const expandedParent =
+    categories.find(
+      (cat) =>
+        cat.value === values.categoryFilter ||
+        cat.children?.some((child) => child.value === values.categoryFilter),
+    )?.value ?? null;
+
+  const handleClearFilters = () => {
+    onChange({
+      ...values,
+      categoryFilter: 'all',
+      priceRange: [minPrice, maxPrice],
+      page: 1,
+    });
   };
 
   return (
     <WizardLayout
-      variant="wide-form"
+      variant="grid-sidebar"
       navigation={navigation}
       progressStepper={progressStepper}
       runningTotal={runningTotal}
@@ -165,208 +361,257 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
       onBack={onBack}
       hideHelpBar={hideHelpBar}
       sx={sx}
-    >
+      secondaryPanel={
-      <Box
+        /* ─── Grid area (right panel) ─── */
-        component="form"
+        <Box>
-        noValidate
+          {/* Results count */}
-        aria-busy={loading}
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }} aria-live="polite">
-        onSubmit={(e: React.FormEvent) => {
-          e.preventDefault();
-          if (!loading) onContinue();
-        }}
-      >
-        {/* Page heading */}
-        <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
-          Choose a coffin
-        </Typography>
-
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-          {isPrePlanning
-            ? 'Browse the range to get an idea of styles and pricing. You can change your selection later.'
-            : 'Browse the range available with your selected provider. Use the filters to narrow your options.'}
-        </Typography>
-
-        <Typography variant="caption" color="text.secondary" sx={{ mb: 3, display: 'block' }}>
-          Selecting a coffin within your package allowance won&apos;t change your total. Coffins
-          outside the allowance will adjust the price.
-        </Typography>
-
-        {/* Filter button + results count */}
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            mb: 3,
-          }}
-        >
-          <FilterPanel activeCount={activeFilterCount} onClear={handleFilterClear}>
-            <TextField
-              select
-              label="Category"
-              value={values.categoryFilter}
-              onChange={(e) => handleFilterChange('categoryFilter', e.target.value)}
-              fullWidth
-            >
-              {categories.map((cat) => (
-                <MenuItem key={cat.value} value={cat.value}>
-                  {cat.label}
-                </MenuItem>
-              ))}
-            </TextField>
-
-            <TextField
-              select
-              label="Price range"
-              value={values.priceFilter}
-              onChange={(e) => handleFilterChange('priceFilter', e.target.value)}
-              fullWidth
-            >
-              {priceRanges.map((range) => (
-                <MenuItem key={range.value} value={range.value}>
-                  {range.label}
-                </MenuItem>
-              ))}
-            </TextField>
-          </FilterPanel>
-
-          <Typography variant="caption" color="text.secondary" aria-live="polite">
             Showing {displayCount} coffin{displayCount !== 1 ? 's' : ''}
           </Typography>
-        </Box>
 
-        {/* Coffin card grid — full width (D-F) */}
+          {/* Coffin card grid */}
-        <Box
+          <Box
-          role="radiogroup"
+            role="list"
-          aria-label="Available coffins"
+            aria-label="Available coffins"
-          sx={{
+            sx={{
-            display: 'grid',
+              display: 'grid',
-            gridTemplateColumns: {
+              gridTemplateColumns: {
-              xs: '1fr',
+                xs: '1fr',
-              sm: 'repeat(2, 1fr)',
+                sm: 'repeat(2, 1fr)',
-              md: 'repeat(3, 1fr)',
+                md: 'repeat(3, 1fr)',
-              lg: 'repeat(4, 1fr)',
+              },
-            },
+              gap: 2,
-            gap: 2,
+              mb: 3,
-            mb: 3,
+            }}
-          }}
+          >
-        >
+            {visibleCoffins.map((coffin) => (
-          {coffins.map((coffin, index) => (
+              <Box key={coffin.id} role="listitem">
-            <Card
+                <CoffinCard coffin={coffin} onClick={() => onSelectCoffin(coffin.id)} />
-              key={coffin.id}
-              interactive
-              selected={coffin.id === values.selectedCoffinId}
-              padding="none"
-              onClick={() => onChange({ ...values, selectedCoffinId: coffin.id })}
-              role="radio"
-              aria-checked={coffin.id === values.selectedCoffinId}
-              tabIndex={
-                values.selectedCoffinId === null
-                  ? index === 0
-                    ? 0
-                    : -1
-                  : coffin.id === values.selectedCoffinId
-                    ? 0
-                    : -1
-              }
-              sx={{ overflow: 'hidden' }}
-            >
-              {/* Image */}
-              <Box
-                sx={{
-                  position: 'relative',
-                  height: 180,
-                  backgroundImage: `url(${coffin.imageUrl})`,
-                  backgroundSize: 'cover',
-                  backgroundPosition: 'center',
-                  backgroundColor: 'var(--fa-color-surface-subtle)',
-                }}
-                role="img"
-                aria-label={`Photo of ${coffin.name}`}
-              >
-                {coffin.isPopular && (
-                  <Box sx={{ position: 'absolute', top: 8, left: 8 }}>
-                    <Badge variant="soft" color="brand" aria-label="Most popular choice">
-                      Most Popular
-                    </Badge>
-                  </Box>
-                )}
               </Box>
+            ))}
 
-              {/* Content */}
+            {visibleCoffins.length === 0 && (
-              <Box sx={{ p: 2 }}>
+              <Box sx={{ py: 6, textAlign: 'center', gridColumn: '1 / -1' }}>
-                <Typography variant="h6" maxLines={2} sx={{ mb: 0.5 }}>
+                <Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}>
-                  {coffin.name}
+                  No coffins match your selected filters.
                 </Typography>
-                <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                <Typography variant="body2" color="text.secondary">
-                  {coffin.category}
+                  Try adjusting the category or price range.
-                </Typography>
-                <Typography variant="h6" color="primary">
-                  ${coffin.price.toLocaleString('en-AU')}
                 </Typography>
               </Box>
-            </Card>
+            )}
-          ))}
+          </Box>
 
-          {coffins.length === 0 && (
+          {/* Pagination */}
-            <Box sx={{ py: 6, textAlign: 'center', gridColumn: '1 / -1' }}>
+          {derivedTotalPages > 1 && (
-              <Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}>
+            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                No coffins match your selected filters.
+              <Pagination
-              </Typography>
+                count={derivedTotalPages}
-              <Typography variant="body2" color="text.secondary">
+                page={values.page}
-                Try adjusting the category or price range.
+                onChange={(_, page) => onChange({ ...values, page })}
-              </Typography>
+                color="primary"
+              />
             </Box>
           )}
         </Box>
+      }
+    >
+      {/* ─── Sidebar (left panel) ─── */}
 
-        {/* Validation error */}
+      {/* Heading */}
-        {errors?.selectedCoffinId && (
+      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
-          <Typography
+        Choose a coffin
-            variant="body2"
+      </Typography>
-            sx={{ mb: 2, color: 'var(--fa-color-text-brand)' }}
-            role="alert"
-          >
-            {errors.selectedCoffinId}
-          </Typography>
-        )}
 
-        {/* Pagination */}
+      <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
-        {totalPages > 1 && (
+        {isPrePlanning
-          <Box sx={{ display: 'flex', justifyContent: 'center', mb: 3 }}>
+          ? 'Browse the range to get an idea of styles and pricing.'
-            <Pagination
+          : 'Browse our selection of bespoke designer coffins.'}
-              count={totalPages}
+      </Typography>
-              page={values.page}
-              onChange={(_, page) => onChange({ ...values, page })}
-              color="primary"
-            />
-          </Box>
-        )}
 
-        <Divider sx={{ my: 3 }} />
+      {/* Allowance info bubble */}
-
+      {allowanceAmount != null && (
-        {/* CTAs */}
+        <Paper
-        <Box
+          variant="outlined"
           sx={{
+            p: 2,
+            mb: 3,
             display: 'flex',
-            justifyContent: 'space-between',
+            gap: 1.5,
-            alignItems: 'center',
+            alignItems: 'flex-start',
-            flexDirection: { xs: 'column-reverse', sm: 'row' },
+            bgcolor: 'var(--fa-color-surface-warm)',
-            gap: 2,
+            borderColor: 'var(--fa-color-brand-200)',
           }}
         >
-          {onSaveAndExit ? (
+          <InfoOutlinedIcon
-            <Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
+            sx={{ fontSize: 20, color: 'var(--fa-color-brand-500)', flexShrink: 0, mt: 0.25 }}
-              Save and continue later
+          />
-            </Button>
+          <Typography variant="body2">
-          ) : (
+            Your package includes a <strong>${allowanceAmount.toLocaleString('en-AU')}</strong>{' '}
-            <Box />
+            allowance for coffins which will be applied to your order after you have made a
-          )}
+            selection.
-          <Button type="submit" variant="contained" size="large" loading={loading}>
+          </Typography>
-            Continue
+        </Paper>
-          </Button>
+      )}
-        </Box>
+
+      <Divider sx={{ mb: 3 }} />
+
+      {/* ─── Categories menu — single-select with expandable subcategories ─── */}
+      <Typography variant="h5" sx={{ mb: 1.5 }}>
+        Categories
+      </Typography>
+      <Box component="nav" aria-label="Filter by category" sx={{ mb: 3 }}>
+        {categories.map((cat) => {
+          const isParentActive =
+            cat.value === values.categoryFilter ||
+            cat.children?.some((child) => child.value === values.categoryFilter);
+          const isExactActive = cat.value === values.categoryFilter;
+          const isExpanded = expandedParent === cat.value;
+
+          return (
+            <React.Fragment key={cat.value}>
+              {/* Parent category */}
+              <Box
+                component="button"
+                type="button"
+                onClick={() => onChange({ ...values, categoryFilter: cat.value, page: 1 })}
+                sx={categoryItemSx(!!isExactActive)}
+              >
+                <span>{cat.label}</span>
+                {cat.children && cat.children.length > 0 && (
+                  <ExpandMoreIcon
+                    sx={{
+                      fontSize: 18,
+                      color: isParentActive ? 'primary.main' : 'text.secondary',
+                      transform: isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)',
+                      transition: 'transform 0.2s',
+                    }}
+                  />
+                )}
+              </Box>
+
+              {/* Subcategories — expand when parent is active */}
+              {cat.children && cat.children.length > 0 && (
+                <Collapse in={isExpanded}>
+                  <Box sx={{ pl: 2 }}>
+                    {cat.children.map((child) => (
+                      <Box
+                        key={child.value}
+                        component="button"
+                        type="button"
+                        onClick={() =>
+                          onChange({ ...values, categoryFilter: child.value, page: 1 })
+                        }
+                        sx={categoryItemSx(child.value === values.categoryFilter)}
+                      >
+                        <span>{child.label}</span>
+                      </Box>
+                    ))}
+                  </Box>
+                </Collapse>
+              )}
+            </React.Fragment>
+          );
+        })}
       </Box>
+
+      <Divider sx={{ mb: 3 }} />
+
+      {/* ─── Price range slider with editable inputs ─── */}
+      <Typography variant="h5" sx={{ mb: 1.5 }}>
+        Price
+      </Typography>
+      <Box sx={{ px: 1, mb: 1.5 }}>
+        <Slider
+          value={values.priceRange}
+          onChange={(_, newValue) =>
+            onChange({ ...values, priceRange: newValue as [number, number], page: 1 })
+          }
+          min={minPrice}
+          max={maxPrice}
+          step={100}
+          valueLabelDisplay="auto"
+          valueLabelFormat={(v) => `$${v.toLocaleString('en-AU')}`}
+          color="primary"
+        />
+      </Box>
+      <Box sx={{ display: 'flex', gap: 1, mb: 3 }}>
+        <TextField
+          size="small"
+          value={priceMinInput}
+          onChange={(e) => setPriceMinInput(e.target.value.replace(/[^0-9]/g, ''))}
+          onBlur={commitPriceRange}
+          onKeyDown={(e) => e.key === 'Enter' && commitPriceRange()}
+          InputProps={{
+            startAdornment: <InputAdornment position="start">$</InputAdornment>,
+          }}
+          inputProps={{ inputMode: 'numeric', 'aria-label': 'Minimum price' }}
+          sx={{ flex: 1 }}
+        />
+        <Typography variant="body2" color="text.secondary" sx={{ alignSelf: 'center' }}>
+          –
+        </Typography>
+        <TextField
+          size="small"
+          value={priceMaxInput}
+          onChange={(e) => setPriceMaxInput(e.target.value.replace(/[^0-9]/g, ''))}
+          onBlur={commitPriceRange}
+          onKeyDown={(e) => e.key === 'Enter' && commitPriceRange()}
+          InputProps={{
+            startAdornment: <InputAdornment position="start">$</InputAdornment>,
+          }}
+          inputProps={{ inputMode: 'numeric', 'aria-label': 'Maximum price' }}
+          sx={{ flex: 1 }}
+        />
+      </Box>
+
+      <Divider sx={{ mb: 3 }} />
+
+      {/* ─── Sort by ─── */}
+      <Typography variant="h5" sx={{ mb: 2 }}>
+        Sort by
+      </Typography>
+      <TextField
+        select
+        value={values.sortBy}
+        onChange={(e) => onChange({ ...values, sortBy: e.target.value as CoffinSortBy })}
+        fullWidth
+        size="small"
+      >
+        <MenuItem value="popularity">Popularity</MenuItem>
+        <MenuItem value="price_asc">Price: Low to High</MenuItem>
+        <MenuItem value="price_desc">Price: High to Low</MenuItem>
+      </TextField>
+
+      {/* Clear filters — at bottom of sidebar, under sort */}
+      {hasActiveFilters && (
+        <>
+          <Divider sx={{ my: 3 }} />
+          <Link
+            component="button"
+            onClick={handleClearFilters}
+            underline="hover"
+            sx={{ fontSize: '0.875rem' }}
+          >
+            Clear all filters
+          </Link>
+        </>
+      )}
+
+      {/* Save and continue later — bottom of sidebar */}
+      {onSaveAndExit && (
+        <>
+          <Divider sx={{ my: 3 }} />
+          <Link
+            component="button"
+            onClick={onSaveAndExit}
+            underline="hover"
+            sx={{ fontSize: '0.875rem', color: 'text.secondary' }}
+          >
+            Save and continue later
+          </Link>
+        </>
+      )}
     </WizardLayout>
   );
 };

src/components/pages/CoffinsStep/index.ts

@@ -2,8 +2,7 @@ export { CoffinsStep, default } from './CoffinsStep';
 export type {
   CoffinsStepProps,
   CoffinsStepValues,
-  CoffinsStepErrors,
   Coffin,
   CoffinCategory,
-  CoffinPriceRange,
+  CoffinSortBy,
 } from './CoffinsStep';

src/components/templates/WizardLayout/WizardLayout.tsx

@@ -230,31 +230,64 @@ const ListDetailLayout: React.FC<{
   </Container>
 );
 
-/** Grid + Sidebar: ~25% filter sidebar (left) / ~75% card grid (right) */
+/** Grid + Sidebar: ~25% filter sidebar (left) / ~75% card grid (right).
+ *  Viewport-locked on desktop — both panels scroll independently.
+ *  On mobile, stacks vertically and scrolls as a single page. */
 const GridSidebarLayout: React.FC<{
   children: React.ReactNode;
   secondaryPanel?: React.ReactNode;
 }> = ({ children, secondaryPanel }) => (
-  <Container maxWidth="lg" sx={{ flex: 1, py: 3 }}>
+  <Box
+    sx={{
+      display: 'flex',
+      flex: 1,
+      overflow: { md: 'hidden' },
+      flexDirection: { xs: 'column', md: 'row' },
+      maxWidth: 1200,
+      mx: 'auto',
+      width: '100%',
+    }}
+  >
+    {/* Left sidebar — scrollbar visible on hover */}
     <Box
+      component="aside"
       sx={{
-        display: 'flex',
+        width: { xs: '100%', md: '28%' },
-        gap: { xs: 0, md: 3 },
+        flexShrink: 0,
-        flexDirection: { xs: 'column', md: 'row' },
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        px: { xs: 2, md: 3 },
+        py: 3,
+        scrollbarWidth: 'thin',
+        scrollbarColor: 'transparent transparent',
+        '&:hover': {
+          scrollbarColor: 'rgba(0,0,0,0.25) transparent',
+        },
+        '&::-webkit-scrollbar': { width: 6 },
+        '&::-webkit-scrollbar-thumb': {
+          background: 'transparent',
+          borderRadius: 3,
+        },
+        '&:hover::-webkit-scrollbar-thumb': {
+          background: 'rgba(0,0,0,0.25)',
+        },
       }}
     >
-      <Box
+      {children}
-        component="aside"
-        sx={{
-          width: { xs: '100%', md: '25%' },
-          flexShrink: 0,
-        }}
-      >
-        {children}
-      </Box>
-      <Box sx={{ flex: 1 }}>{secondaryPanel}</Box>
     </Box>
-  </Container>
+    {/* Right panel — always scrollable */}
+    <Box
+      sx={{
+        flex: 1,
+        overflowY: { md: 'auto' },
+        px: { xs: 2, md: 3 },
+        py: 3,
+        scrollbarWidth: 'thin',
+      }}
+    >
+      {secondaryPanel}
+    </Box>
+  </Box>
 );
 
 /** Detail + Toggles: scrollable left (image/desc) / sticky right (info/CTA) */
@@ -401,6 +434,10 @@ export const WizardLayout = React.forwardRef<HTMLDivElement, WizardLayoutProps>(
               height: '100vh',
               overflow: 'hidden',
             }),
+            ...(variant === 'grid-sidebar' && {
+              height: { xs: 'auto', md: '100vh' },
+              overflow: { xs: 'visible', md: 'hidden' },
+            }),
           },
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}