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,197 +98,73 @@ export interface CoffinsStepProps {
   sx?: SxProps<Theme>;
 }
 
-// ─── Component ───────────────────────────────────────────────────────────────
+// ─── Category menu item style ───────────────────────────────────────────────
 
-/**
+const categoryItemSx = (isActive: boolean): SxProps<Theme> => ({
- * Step 10 — Coffin selection for the FA arrangement wizard.
- *
- * Grid-sidebar layout: filter sidebar (left/top on mobile) + coffin
- * card grid (main area). Cards show image, name, price, and optional
- * "Most Popular" badge (Rec #10). Pagination at the bottom.
- *
- * Uses Australian terminology: "coffin" not "casket" (both types may
- * appear in the catalogue — the product type is shown per card).
- *
- * Pure presentation component — props in, callbacks out.
- * Filtering and pagination logic handled by parent.
- *
- * Spec: documentation/steps/steps/10_coffins.yaml
- */
-export const CoffinsStep: React.FC<CoffinsStepProps> = ({
-  values,
-  onChange,
-  onContinue,
-  onBack,
-  onSaveAndExit,
-  errors,
-  loading = false,
-  coffins,
-  totalCount,
-  totalPages = 1,
-  categories = [
-    { value: 'all', label: 'All categories' },
-    { value: 'solid_timber', label: 'Solid Timber' },
-    { value: 'custom_board', label: 'Custom Board' },
-    { value: 'environmental', label: 'Environmental' },
-    { value: 'designer', label: 'Designer' },
-    { value: 'protective_metal', label: 'Protective Metal' },
-  ],
-  priceRanges = [
-    { value: 'all', label: 'All prices' },
-    { value: 'under_2000', label: 'Under $2,000' },
-    { value: '2000_4000', label: '$2,000 – $4,000' },
-    { value: 'over_4000', label: 'Over $4,000' },
-  ],
-  isPrePlanning = false,
-  navigation,
-  progressStepper,
-  runningTotal,
-  hideHelpBar,
-  sx,
-}) => {
-  const displayCount = totalCount ?? coffins.length;
-  const activeFilterCount =
-    (values.categoryFilter !== 'all' ? 1 : 0) + (values.priceFilter !== 'all' ? 1 : 0);
-
-  const handleFilterChange = (field: 'categoryFilter' | 'priceFilter', value: string) => {
-    onChange({ ...values, [field]: value, page: 1 });
-  };
-
-  const handleFilterClear = () => {
-    onChange({ ...values, categoryFilter: 'all', priceFilter: 'all', page: 1 });
-  };
-
-  return (
-    <WizardLayout
-      variant="wide-form"
-      navigation={navigation}
-      progressStepper={progressStepper}
-      runningTotal={runningTotal}
-      showBackLink={!!onBack}
-      backLabel="Back"
-      onBack={onBack}
-      hideHelpBar={hideHelpBar}
-      sx={sx}
-    >
-      <Box
-        component="form"
-        noValidate
-        aria-busy={loading}
-        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,
+  width: '100%',
-          }}
+  textAlign: 'left',
-        >
+  border: 'none',
-          <FilterPanel activeCount={activeFilterCount} onClear={handleFilterClear}>
+  background: 'none',
-            <TextField
+  cursor: 'pointer',
-              select
+  py: 0.75,
-              label="Category"
+  px: 1.5,
-              value={values.categoryFilter}
+  borderRadius: 1,
-              onChange={(e) => handleFilterChange('categoryFilter', e.target.value)}
+  fontSize: '0.875rem',
-              fullWidth
+  fontWeight: isActive ? 600 : 400,
-            >
+  color: isActive ? 'primary.main' : 'text.primary',
-              {categories.map((cat) => (
+  bgcolor: isActive ? 'var(--fa-color-brand-50)' : 'transparent',
-                <MenuItem key={cat.value} value={cat.value}>
+  '&:hover': {
-                  {cat.label}
+    bgcolor: isActive ? 'var(--fa-color-brand-50)' : 'var(--fa-color-surface-subtle)',
-                </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) */}
-        <Box
-          role="radiogroup"
-          aria-label="Available coffins"
-          sx={{
-            display: 'grid',
-            gridTemplateColumns: {
-              xs: '1fr',
-              sm: 'repeat(2, 1fr)',
-              md: 'repeat(3, 1fr)',
-              lg: 'repeat(4, 1fr)',
   },
-            gap: 2,
+  fontFamily: 'inherit',
-            mb: 3,
+});
+
+// ─── 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',
       }}
     >
-          {coffins.map((coffin, index) => (
+      {/* Main image on subtle background — handles white-bg product photos */}
-            <Card
-              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})`,
+          bgcolor: 'var(--fa-color-surface-subtle)',
-                  backgroundSize: 'cover',
+          display: 'flex',
-                  backgroundPosition: 'center',
+          alignItems: 'center',
-                  backgroundColor: 'var(--fa-color-surface-subtle)',
+          justifyContent: 'center',
+          p: 2,
+          flexShrink: 0,
         }}
-                role="img"
-                aria-label={`Photo of ${coffin.name}`}
       >
+        <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">
@@ -293,22 +174,223 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
         )}
       </Box>
 
-              {/* Content */}
+      {/* Thumbnail strip — hover swaps main preview */}
-              <Box sx={{ p: 2 }}>
+      {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="body2" color="text.secondary" sx={{ mb: 1 }}>
-                  {coffin.category}
-                </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 browsing for the FA arrangement wizard.
+ *
+ * Grid-sidebar layout: filter sidebar (left, stacked on mobile) + coffin
+ * card grid (right). Both panels scroll independently on desktop; sidebar
+ * scrollbar appears on hover.
+ *
+ * Clicking a coffin card navigates to CoffinDetailsStep — no Continue
+ * 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, sorting, and pagination logic handled by parent.
+ *
+ * Spec: documentation/steps/steps/10_coffins.yaml
+ */
+export const CoffinsStep: React.FC<CoffinsStepProps> = ({
+  values,
+  onChange,
+  onSelectCoffin,
+  onBack,
+  onSaveAndExit,
+  coffins,
+  totalCount,
+  totalPages = 1,
+  categories = [
+    { value: 'all', label: 'All' },
+    {
+      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' },
+  ],
+  minPrice = 0,
+  maxPrice = 15000,
+  allowanceAmount,
+  pageSize = 20,
+  isPrePlanning = false,
+  navigation,
+  progressStepper,
+  runningTotal,
+  hideHelpBar,
+  sx,
+}) => {
+  // Cap displayed coffins to pageSize (default 20 per page)
+  const visibleCoffins = coffins.slice(0, pageSize);
+  const displayCount = totalCount ?? coffins.length;
+  const derivedTotalPages = totalPages > 1 ? totalPages : Math.ceil(coffins.length / pageSize);
+
+  // ─── Price input local state (commits on blur / Enter) ───
+  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 });
+    }
+  };
+
+  // ─── Derived state ───
+  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="grid-sidebar"
+      navigation={navigation}
+      progressStepper={progressStepper}
+      runningTotal={runningTotal}
+      showBackLink={!!onBack}
+      backLabel="Back"
+      onBack={onBack}
+      hideHelpBar={hideHelpBar}
+      sx={sx}
+      secondaryPanel={
+        /* ─── Grid area (right panel) ─── */
+        <Box>
+          {/* Results count */}
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }} aria-live="polite">
+            Showing {displayCount} coffin{displayCount !== 1 ? 's' : ''}
+          </Typography>
+
+          {/* Coffin card grid */}
+          <Box
+            role="list"
+            aria-label="Available coffins"
+            sx={{
+              display: 'grid',
+              gridTemplateColumns: {
+                xs: '1fr',
+                sm: 'repeat(2, 1fr)',
+                md: 'repeat(3, 1fr)',
+              },
+              gap: 2,
+              mb: 3,
+            }}
+          >
+            {visibleCoffins.map((coffin) => (
+              <Box key={coffin.id} role="listitem">
+                <CoffinCard coffin={coffin} onClick={() => onSelectCoffin(coffin.id)} />
+              </Box>
             ))}
 
-          {coffins.length === 0 && (
+            {visibleCoffins.length === 0 && (
               <Box sx={{ py: 6, textAlign: 'center', gridColumn: '1 / -1' }}>
                 <Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}>
                   No coffins match your selected filters.
@@ -320,53 +402,216 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
             )}
           </Box>
 
-        {/* Validation error */}
-        {errors?.selectedCoffinId && (
-          <Typography
-            variant="body2"
-            sx={{ mb: 2, color: 'var(--fa-color-text-brand)' }}
-            role="alert"
-          >
-            {errors.selectedCoffinId}
-          </Typography>
-        )}
-
           {/* Pagination */}
-        {totalPages > 1 && (
+          {derivedTotalPages > 1 && (
-          <Box sx={{ display: 'flex', justifyContent: 'center', mb: 3 }}>
+            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
               <Pagination
-              count={totalPages}
+                count={derivedTotalPages}
                 page={values.page}
                 onChange={(_, page) => onChange({ ...values, page })}
                 color="primary"
               />
             </Box>
           )}
+        </Box>
+      }
+    >
+      {/* ─── Sidebar (left panel) ─── */}
 
-        <Divider sx={{ my: 3 }} />
+      {/* Heading */}
+      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+        Choose a coffin
+      </Typography>
 
-        {/* CTAs */}
+      <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
-        <Box
+        {isPrePlanning
+          ? 'Browse the range to get an idea of styles and pricing.'
+          : 'Browse our selection of bespoke designer coffins.'}
+      </Typography>
+
+      {/* Allowance info bubble */}
+      {allowanceAmount != null && (
+        <Paper
+          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.
+          </Typography>
+        </Paper>
+      )}
+
+      <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',
+                    }}
+                  />
                 )}
-          <Button type="submit" variant="contained" size="large" loading={loading}>
-            Continue
-          </Button>
               </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',
-        gap: { xs: 0, md: 3 },
+      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={{
-          width: { xs: '100%', md: '25%' },
+        width: { xs: '100%', md: '28%' },
         flexShrink: 0,
+        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)',
+        },
       }}
     >
       {children}
     </Box>
-      <Box sx={{ flex: 1 }}>{secondaryPanel}</Box>
+    {/* Right panel — always scrollable */}
+    <Box
+      sx={{
+        flex: 1,
+        overflowY: { md: 'auto' },
+        px: { xs: 2, md: 3 },
+        py: 3,
+        scrollbarWidth: 'thin',
+      }}
+    >
+      {secondaryPanel}
+    </Box>
   </Box>
-  </Container>
 );
 
 /** 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]),
         ]}