Fix AddOnOption alignment + quieten "View more" link

- Centre-align heading row so switch aligns with short headings (Flowers edge case)
- Remove margin between heading and price — tucks directly underneath
- "View more" link: caption size + text.secondary colour + weight 400 (both components)

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

src/components/molecules/AddOnOption/AddOnOption.tsx

@@ -99,11 +99,11 @@ export const AddOnOption = React.forwardRef<HTMLDivElement, AddOnOptionProps>(
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}
       >
-        {/* Top row: name + switch pinned top-right */}
+        {/* Top row: name + switch */}
         <Box
           sx={{
             display: 'flex',
-            alignItems: 'flex-start',
+            alignItems: 'center',
             justifyContent: 'space-between',
             gap: 2,
           }}
@@ -127,12 +127,11 @@ export const AddOnOption = React.forwardRef<HTMLDivElement, AddOnOptionProps>(
           />
         </Box>
 
-        {/* Price — own row below heading */}
+        {/* Price — tucks directly under heading */}
         {price != null && (
           <Typography
             variant="body2"
             color="text.secondary"
-            sx={{ mt: 0.5 }}
           >
             ${price.toLocaleString('en-AU')}
           </Typography>
@@ -160,12 +159,12 @@ export const AddOnOption = React.forwardRef<HTMLDivElement, AddOnOptionProps>(
             {maxDescriptionLines && isClamped && (
               <Link
                 component="button"
-                variant="body2"
+                variant="caption"
                 onClick={(e: React.MouseEvent) => {
                   e.stopPropagation();
                   setExpanded((prev) => !prev);
                 }}
-                sx={{ mt: 0.5, fontSize: 'inherit' }}
+                sx={{ mt: 0.5, color: 'text.secondary', fontWeight: 400 }}
               >
                 {expanded ? 'View less' : 'View more'}
               </Link>

src/components/molecules/ServiceOption/ServiceOption.tsx

@@ -136,12 +136,12 @@ export const ServiceOption = React.forwardRef<HTMLDivElement, ServiceOptionProps
             {maxDescriptionLines && isClamped && (
               <Link
                 component="button"
-                variant="body2"
+                variant="caption"
                 onClick={(e: React.MouseEvent) => {
                   e.stopPropagation();
                   setExpanded((prev) => !prev);
                 }}
-                sx={{ mt: 0.5, fontSize: 'inherit' }}
+                sx={{ mt: 0.5, color: 'text.secondary', fontWeight: 400 }}
               >
                 {expanded ? 'View less' : 'View more'}
               </Link>