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,106 +188,87 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
   hideHelpBar,
   sx,
 }) => {
-  return (
-    <WizardLayout
-      variant="centered-form"
-      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}>
+  // ─── Left panel: Coffin profile (image + specs) ───
+  const profilePanel = (
+    <Box>
+      {/* Image */}
+      <Box
+        role="img"
+        aria-label={`Photo of ${coffin.name}`}
+        sx={{
+          width: '100%',
+          height: { xs: 240, md: 320 },
+          borderRadius: 2,
+          backgroundImage: `url(${coffin.imageUrl})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundColor: 'var(--fa-color-surface-subtle)',
+          mb: 3,
+        }}
+      />
+
+      <Typography variant="h4" sx={{ mb: 1 }}>
+        {coffin.name}
+      </Typography>
+
+      {coffin.description && (
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          {coffin.description}
+        </Typography>
+      )}
+
+      {/* Specs */}
+      {coffin.specs && coffin.specs.length > 0 && (
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'auto 1fr',
+            gap: 0.5,
+            columnGap: 2,
+            mb: 2,
+          }}
+        >
+          {coffin.specs.map((spec) => (
+            <React.Fragment key={spec.label}>
+              <Typography variant="labelSm" color="text.secondary">
+                {spec.label}
+              </Typography>
+              <Typography variant="body2">{spec.value}</Typography>
+            </React.Fragment>
+          ))}
+        </Box>
+      )}
+
+      {/* Price */}
+      <Typography variant="h5" color="primary">
+        ${coffin.price.toLocaleString('en-AU')}
+      </Typography>
+      {coffin.priceNote && (
+        <Typography variant="body2" color="text.secondary">
+          {coffin.priceNote}
+        </Typography>
+      )}
+    </Box>
+  );
+
+  // ─── Right panel: Option selectors + CTAs ───
+  const optionsPanel = (
+    <Box>
+      <Typography variant="h4" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
         Coffin details
       </Typography>
 
-      <Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}>
+      <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="body2" color="text.secondary" sx={{ mb: 4 }}>
+      <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>
 
-      {/* ─── 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 },
-              height: { xs: 200, sm: 180 },
-              flexShrink: 0,
-              borderRadius: 1,
-              backgroundImage: `url(${coffin.imageUrl})`,
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              backgroundColor: 'var(--fa-color-surface-subtle)',
-            }}
-          />
-
-          {/* Details */}
-          <Box sx={{ flex: 1 }}>
-            <Typography variant="h4" sx={{ mb: 1 }}>
-              {coffin.name}
-            </Typography>
-
-            {coffin.description && (
-              <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-                {coffin.description}
-              </Typography>
-            )}
-
-            {/* Specs */}
-            {coffin.specs && coffin.specs.length > 0 && (
-              <Box
-                sx={{
-                  display: 'grid',
-                  gridTemplateColumns: 'auto 1fr',
-                  gap: 0.5,
-                  columnGap: 2,
-                  mb: 2,
-                }}
-              >
-                {coffin.specs.map((spec) => (
-                  <React.Fragment key={spec.label}>
-                    <Typography variant="labelSm" color="text.secondary">
-                      {spec.label}
-                    </Typography>
-                    <Typography variant="body2">{spec.value}</Typography>
-                  </React.Fragment>
-                ))}
-              </Box>
-            )}
-
-            {/* Price */}
-            <Typography variant="h5" color="primary">
-              ${coffin.price.toLocaleString('en-AU')}
-            </Typography>
-            {coffin.priceNote && (
-              <Typography variant="body2" color="text.secondary">
-                {coffin.priceNote}
-              </Typography>
-            )}
-          </Box>
-        </Box>
-      </Paper>
-
       <Box
         component="form"
         noValidate
@@ -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>
   );
 };