Progress bar layout refinement + step label readability

- StepperBar: stepper centred at 700px max-width, cart hugs right edge
- StepIndicator: bump desktop label fontSize to 0.875rem for readability
- DateTimeStep story: demo progress bar + cart in context

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

src/components/molecules/StepIndicator/StepIndicator.tsx

@@ -96,7 +96,7 @@ export const StepIndicator = React.forwardRef<HTMLDivElement, StepIndicatorProps
                   whiteSpace: 'nowrap',
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',
-                  fontSize: { xs: '0.6875rem', sm: undefined },
+                  fontSize: { xs: '0.6875rem', sm: '0.875rem' },
                 }}
               >
                 {step.label}

src/components/pages/DateTimeStep/DateTimeStep.stories.tsx

@@ -3,6 +3,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { DateTimeStep } from './DateTimeStep';
 import type { DateTimeStepValues, DateTimeStepErrors } from './DateTimeStep';
 import { Navigation } from '../../organisms/Navigation';
+import { StepIndicator } from '../../molecules/StepIndicator';
+import { CartButton } from '../../molecules/CartButton';
 import Box from '@mui/material/Box';
 
 // ─── Helpers ─────────────────────────────────────────────────────────────────
@@ -34,6 +36,26 @@ const nav = (
   />
 );
 
+const stepper = (
+  <StepIndicator
+    steps={[
+      { label: 'Details' },
+      { label: 'Venues' },
+      { label: 'Coffins' },
+      { label: 'Extras' },
+      { label: 'Review' },
+    ]}
+    currentStep={0}
+  />
+);
+
+const cart = (
+  <CartButton
+    total={4950}
+    items={[{ section: 'Funeral Provider', name: 'H. Parsons — Essential Package', price: 4950 }]}
+  />
+);
+
 const defaultValues: DateTimeStepValues = {
   firstName: '',
   surname: '',
@@ -90,6 +112,8 @@ export const Default: Story = {
         errors={errors}
         isAtNeed
         navigation={nav}
+        progressStepper={stepper}
+        runningTotal={cart}
       />
     );
   },

src/components/templates/WizardLayout/WizardLayout.tsx

@@ -117,11 +117,10 @@ const StepperBar: React.FC<{
         py: 1.5,
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'space-between',
+        gap: 3,
-        gap: 2,
       }}
     >
-      <Box sx={{ flex: 1 }}>{stepper}</Box>
+      <Box sx={{ flex: 1, maxWidth: 700, mx: 'auto' }}>{stepper}</Box>
       {total && <Box sx={{ flexShrink: 0 }}>{total}</Box>}
     </Box>
   );