Fix filter overflow + location chip-in-input pattern

- Price slider: overflow hidden on container prevents horizontal scrollbar
- Funeral type chips: overflow hidden on parent prevents clipping through
- Location: chip-in-input using Autocomplete multiple+freeSolo (real estate
  site pattern — chip with X sits inside the search field)

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

src/components/pages/ProvidersStep/ProvidersStep.tsx

@@ -164,6 +164,8 @@ const chipScrollSx = {
   gap: 1,
   overflowX: 'auto',
   flexWrap: 'nowrap',
+  mx: -0.5,
+  px: 0.5,
   pb: 0.5,
   '&::-webkit-scrollbar': { display: 'none' },
   scrollbarWidth: 'none',
@@ -347,37 +349,38 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
               <Typography variant="labelLg" sx={sectionHeadingSx}>
                 Location
               </Typography>
-              {searchQuery.trim() && (
-                <Box sx={{ mb: 1 }}>
-                  <Chip
-                    label={searchQuery.trim()}
-                    onDelete={() => onSearchChange('')}
-                    variant="filled"
-                    color="primary"
-                    size="small"
-                  />
-                </Box>
-              )}
-              <TextField
-                placeholder="Search a town or suburb..."
-                value={searchQuery}
-                onChange={(e) => onSearchChange(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' && onSearch) {
-                    e.preventDefault();
-                    onSearch(searchQuery);
-                  }
+              <Autocomplete
+                multiple
+                freeSolo
+                value={searchQuery.trim() ? [searchQuery.trim()] : []}
+                onChange={(_, newValue) => {
+                  // Take the last entered value as the active search
+                  const last = newValue[newValue.length - 1] ?? '';
+                  onSearchChange(typeof last === 'string' ? last : '');
                 }}
-                fullWidth
+                options={[]}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    placeholder={searchQuery.trim() ? '' : 'Search a town or suburb...'}
                     size="small"
                     InputProps={{
+                      ...params.InputProps,
                       startAdornment: (
-                    <InputAdornment position="start">
-                      <LocationOnOutlinedIcon sx={{ color: 'text.secondary', fontSize: 18 }} />
+                        <>
+                          <InputAdornment position="start" sx={{ ml: 0.5 }}>
+                            <LocationOnOutlinedIcon
+                              sx={{ color: 'text.secondary', fontSize: 18 }}
+                            />
                           </InputAdornment>
+                          {params.InputProps.startAdornment}
+                        </>
                       ),
                     }}
                   />
+                )}
+                size="small"
+              />
             </Box>
 
             <Divider />
@@ -402,7 +405,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
             <Divider />
 
             {/* ── Funeral type ── */}
-            <Box>
+            <Box sx={{ overflow: 'hidden' }}>
               <Typography variant="labelLg" sx={sectionHeadingSx}>
                 Funeral type
               </Typography>
@@ -458,7 +461,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
               <Typography variant="labelLg" sx={sectionHeadingSx}>
                 Price range
               </Typography>
-              <Box sx={{ px: 1, mb: 1 }}>
+              <Box sx={{ px: 1, mb: 1, overflow: 'hidden' }}>
                 <Slider
                   value={filterValues.priceRange}
                   onChange={(_, newValue) =>