Fix layout variants for VenueStep, CoffinsStep, CoffinDetailsStep

- VenueStep: centered-form → list-map (venue cards left, map slot right)
  Matches ProvidersStep pattern with vertical card stack + map placeholder
- CoffinsStep: centered-form → grid-sidebar (filter sidebar left, card grid right)
  Filters now in dedicated sidebar, cards fill the wider main area
- CoffinDetailsStep: centered-form → detail-toggles (profile left, options right)
  Coffin image + specs on left, option RadioGroups on right

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

src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx

@@ -188,61 +188,25 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
   hideHelpBar,
   sx,
 }) => {
-  return (
+  // ─── Left panel: Coffin profile (image + specs) ───
-    <WizardLayout
+  const profilePanel = (
-      variant="centered-form"
+    <Box>
-      navigation={navigation}
-      progressStepper={progressStepper}
-      runningTotal={runningTotal}
-      showBackLink={!!onBack}
-      backLabel="Back"
-      onBack={onBack}
-      hideHelpBar={hideHelpBar}
-      sx={sx}
-    >
-      {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
-        Coffin details
-      </Typography>
-
-      <Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}>
-        {isPrePlanning
-          ? 'These options let you personalise the coffin. You can change these later.'
-          : 'Personalise your chosen coffin with handles, lining, and a name plate.'}
-      </Typography>
-
-      <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
-        Each option shows the price impact on your plan total. Options within your package allowance
-        are included at no extra cost.
-      </Typography>
-
-      {/* ─── Coffin profile ─── */}
-      <Paper variant="outlined" sx={{ p: 3, mb: 4, overflow: 'hidden' }}>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: { xs: 'column', sm: 'row' },
-            gap: 3,
-          }}
-        >
       {/* Image */}
       <Box
         role="img"
         aria-label={`Photo of ${coffin.name}`}
         sx={{
-              width: { xs: '100%', sm: 240 },
+          width: '100%',
-              height: { xs: 200, sm: 180 },
+          height: { xs: 240, md: 320 },
-              flexShrink: 0,
+          borderRadius: 2,
-              borderRadius: 1,
           backgroundImage: `url(${coffin.imageUrl})`,
           backgroundSize: 'cover',
           backgroundPosition: 'center',
           backgroundColor: 'var(--fa-color-surface-subtle)',
+          mb: 3,
         }}
       />
 
-          {/* Details */}
-          <Box sx={{ flex: 1 }}>
       <Typography variant="h4" sx={{ mb: 1 }}>
         {coffin.name}
       </Typography>
@@ -285,8 +249,25 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
         </Typography>
       )}
     </Box>
-        </Box>
+  );
-      </Paper>
+
+  // ─── Right panel: Option selectors + CTAs ───
+  const optionsPanel = (
+    <Box>
+      <Typography variant="h4" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+        Coffin details
+      </Typography>
+
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+        {isPrePlanning
+          ? 'These options let you personalise the coffin. You can change these later.'
+          : 'Personalise your chosen coffin with handles, lining, and a name plate.'}
+      </Typography>
+
+      <Typography variant="caption" color="text.secondary" sx={{ mb: 3, display: 'block' }}>
+        Each option shows the price impact on your plan total. Options within your package allowance
+        are included at no extra cost.
+      </Typography>
 
       <Box
         component="form"
@@ -296,7 +277,6 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
           onContinue();
         }}
       >
-        {/* ─── Option sections ─── */}
         <OptionSection
           legend="Handle style"
           options={handleOptions}
@@ -342,6 +322,23 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
           </Button>
         </Box>
       </Box>
+    </Box>
+  );
+
+  return (
+    <WizardLayout
+      variant="detail-toggles"
+      navigation={navigation}
+      progressStepper={progressStepper}
+      runningTotal={runningTotal}
+      showBackLink={!!onBack}
+      backLabel="Back"
+      onBack={onBack}
+      hideHelpBar={hideHelpBar}
+      sx={sx}
+      secondaryPanel={optionsPanel}
+    >
+      {profilePanel}
     </WizardLayout>
   );
 };

src/components/pages/CoffinsStep/CoffinsStep.tsx

@@ -147,57 +147,20 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
     onChange({ ...values, [field]: value, page: 1 });
   };
 
-  return (
+  // ─── Sidebar content (filters) ───
-    <WizardLayout
+  const sidebar = (
-      variant="centered-form"
+    <Box sx={{ py: { xs: 0, md: 2 } }}>
-      navigation={navigation}
+      <Typography variant="h5" sx={{ mb: 2, display: { xs: 'none', md: 'block' } }}>
-      progressStepper={progressStepper}
+        Filters
-      runningTotal={runningTotal}
-      showBackLink={!!onBack}
-      backLabel="Back"
-      onBack={onBack}
-      hideHelpBar={hideHelpBar}
-      sx={sx}
-    >
-      {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
-        Choose a coffin
       </Typography>
 
-      <Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-        {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="body2" color="text.secondary" sx={{ mb: 4 }}>
-        Selecting a coffin within your package allowance won&apos;t change your total. Coffins
-        outside the allowance will adjust the price.
-      </Typography>
-
-      <Box
-        component="form"
-        noValidate
-        onSubmit={(e: React.FormEvent) => {
-          e.preventDefault();
-          onContinue();
-        }}
-      >
-        {/* ─── Filters ─── */}
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: { xs: 'column', sm: 'row' },
-            gap: 2,
-            mb: 3,
-          }}
-        >
         <TextField
           select
           label="Categories"
           value={values.categoryFilter}
           onChange={(e) => handleFilterChange('categoryFilter', e.target.value)}
-            sx={{ minWidth: 200 }}
+          fullWidth
         >
           {categories.map((cat) => (
             <MenuItem key={cat.value} value={cat.value}>
@@ -211,7 +174,7 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
           label="Price range"
           value={values.priceFilter}
           onChange={(e) => handleFilterChange('priceFilter', e.target.value)}
-            sx={{ minWidth: 200 }}
+          fullWidth
         >
           {priceRanges.map((range) => (
             <MenuItem key={range.value} value={range.value}>
@@ -220,13 +183,46 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
           ))}
         </TextField>
       </Box>
+    </Box>
+  );
 
-        {/* ─── Results count ─── */}
+  // ─── Main content (card grid) ───
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }} aria-live="polite">
+  const mainContent = (
+    <Box
+      component="form"
+      noValidate
+      onSubmit={(e: React.FormEvent) => {
+        e.preventDefault();
+        onContinue();
+      }}
+    >
+      {/* Page heading */}
+      <Typography variant="h4" 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>
+
+      {/* Results count */}
+      <Typography
+        variant="caption"
+        color="text.secondary"
+        sx={{ mb: 2, display: 'block' }}
+        aria-live="polite"
+      >
         Showing {displayCount} coffin{displayCount !== 1 ? 's' : ''}
       </Typography>
 
-        {/* ─── Coffin card grid ─── */}
+      {/* Coffin card grid */}
       <Box
         role="radiogroup"
         aria-label="Available coffins"
@@ -235,7 +231,7 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
           gridTemplateColumns: {
             xs: '1fr',
             sm: 'repeat(2, 1fr)',
-              md: 'repeat(3, 1fr)',
+            lg: 'repeat(3, 1fr)',
           },
           gap: 2,
           mb: 3,
@@ -342,6 +338,22 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
         </Button>
       </Box>
     </Box>
+  );
+
+  return (
+    <WizardLayout
+      variant="grid-sidebar"
+      navigation={navigation}
+      progressStepper={progressStepper}
+      runningTotal={runningTotal}
+      showBackLink={!!onBack}
+      backLabel="Back"
+      onBack={onBack}
+      hideHelpBar={hideHelpBar}
+      sx={sx}
+      secondaryPanel={mainContent}
+    >
+      {sidebar}
     </WizardLayout>
   );
 };

src/components/pages/VenueStep/VenueStep.tsx

@@ -13,7 +13,6 @@ import { Collapse } from '../../atoms/Collapse';
 import { Chip } from '../../atoms/Chip';
 import { Typography } from '../../atoms/Typography';
 import { Button } from '../../atoms/Button';
-import { Divider } from '../../atoms/Divider';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -86,6 +85,8 @@ export interface VenueStepProps {
   locationName?: string;
   /** Whether this is a pre-planning flow */
   isPrePlanning?: boolean;
+  /** Map panel content — slot for map integration */
+  mapPanel?: React.ReactNode;
   /** Navigation bar — passed through to WizardLayout */
   navigation?: React.ReactNode;
   /** Progress stepper — passed through to WizardLayout */
@@ -131,6 +132,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
   ],
   locationName,
   isPrePlanning = false,
+  mapPanel,
   navigation,
   progressStepper,
   runningTotal,
@@ -162,7 +164,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
 
   return (
     <WizardLayout
-      variant="centered-form"
+      variant="list-map"
       navigation={navigation}
       progressStepper={progressStepper}
       runningTotal={runningTotal}
@@ -171,13 +173,32 @@ export const VenueStep: React.FC<VenueStepProps> = ({
       onBack={onBack}
       hideHelpBar={hideHelpBar}
       sx={sx}
+      secondaryPanel={
+        mapPanel || (
+          <Box
+            sx={{
+              bgcolor: 'var(--fa-color-sage-50)',
+              height: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderLeft: '1px solid',
+              borderColor: 'divider',
+            }}
+          >
+            <Typography variant="body1" color="text.secondary">
+              Map coming soon
+            </Typography>
+          </Box>
+        )
+      }
     >
       {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
         Where would you like the service?
       </Typography>
 
-      <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
         {isPrePlanning
           ? 'Browse available venues. Your choice can be changed later.'
           : 'Choose a venue for the funeral service. You can filter by location, features, and religion.'}
@@ -230,15 +251,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
         <Box
           role="radiogroup"
           aria-label="Available venues"
-          sx={{
+          sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}
-            display: 'grid',
-            gridTemplateColumns: {
-              xs: '1fr',
-              sm: 'repeat(2, 1fr)',
-            },
-            gap: 2,
-            mb: 3,
-          }}
         >
           {venues.map((venue, index) => (
             <VenueCard
@@ -377,24 +390,12 @@ export const VenueStep: React.FC<VenueStepProps> = ({
           </Box>
         </Collapse>
 
-        <Divider sx={{ my: 3 }} />
-
         {/* CTAs */}
-        <Box
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, pb: 2 }}>
-          sx={{
+          {onSaveAndExit && (
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            flexDirection: { xs: 'column-reverse', sm: 'row' },
-            gap: 2,
-          }}
-        >
-          {onSaveAndExit ? (
             <Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
-              Save and continue later
+              Save and exit
             </Button>
-          ) : (
-            <Box />
           )}
           <Button type="submit" variant="contained" size="large" loading={loading}>
             Continue