Iterate MiniCard and MapPin based on feedback

MiniCard:
- Verified badge → icon-only circle floating in image (top-right)
- Reorder content: title → meta → price → badges → chips
- Truncated titles show tooltip on hover with full text

MapPin: Rethink from price-only pill to two-line label:
- Line 1: Provider name (bold, truncated at 180px)
- Line 2: "From $X" (smaller, secondary colour) — optional
- Communicates who + starting price at a glance
- Verified/unverified palette distinction preserved
- Dot variant removed (name is always required now)

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

src/components/atoms/MapPin/MapPin.stories.tsx

@@ -21,17 +21,19 @@ const meta: Meta<typeof MapPin> = {
 export default meta;
 type Story = StoryObj<typeof MapPin>;
 
-/** Verified provider with price — warm brand pill */
+/** Verified provider with name and price — warm brand label */
 export const VerifiedWithPrice: Story = {
   args: {
+    name: 'H.Parsons Funeral Directors',
     price: 900,
     verified: true,
   },
 };
 
-/** Unverified provider with price — neutral grey pill */
+/** Unverified provider — neutral grey label */
 export const UnverifiedWithPrice: Story = {
   args: {
+    name: 'Smith & Sons Funerals',
     price: 1200,
     verified: false,
   },
@@ -40,6 +42,7 @@ export const UnverifiedWithPrice: Story = {
 /** Active/selected state — inverted colours, slight scale-up */
 export const Active: Story = {
   args: {
+    name: 'H.Parsons Funeral Directors',
     price: 900,
     verified: true,
     active: true,
@@ -49,46 +52,42 @@ export const Active: Story = {
 /** Active unverified */
 export const ActiveUnverified: Story = {
   args: {
+    name: 'Smith & Sons Funerals',
     price: 1200,
     verified: false,
     active: true,
   },
 };
 
-/** Dot marker — no price, verified */
-export const DotVerified: Story = {
+/** Name only — no price line */
+export const NameOnly: Story = {
   args: {
+    name: 'Lady Anne Funerals',
     verified: true,
   },
 };
 
-/** Dot marker — no price, unverified */
-export const DotUnverified: Story = {
+/** Name only, unverified */
+export const NameOnlyUnverified: Story = {
   args: {
-    verified: false,
-  },
-};
-
-/** Dot marker — active */
-export const DotActive: Story = {
-  args: {
-    verified: true,
-    active: true,
+    name: 'Local Funeral Services',
   },
 };
 
 /** Custom price label */
-export const CustomLabel: Story = {
+export const CustomPriceLabel: Story = {
   args: {
+    name: 'Premium Services',
     priceLabel: 'POA',
     verified: true,
   },
 };
 
-/** High price — wider pill */
-export const HighPrice: Story = {
+/** Long name — truncated with ellipsis at 180px max */
+export const LongName: Story = {
   args: {
-    price: 12500,
+    name: 'Botanical Funerals by Ian Allison',
+    price: 1200,
     verified: true,
   },
 };
@@ -100,8 +99,8 @@ export const MapSimulation: Story = {
       <Box
         sx={{
           position: 'relative',
-          width: 600,
-          height: 400,
+          width: 700,
+          height: 450,
           bgcolor: '#E5E3DF',
           borderRadius: 2,
           overflow: 'hidden',
@@ -114,27 +113,27 @@ export const MapSimulation: Story = {
   render: () => (
     <>
       {/* Verified providers */}
-      <Box sx={{ position: 'absolute', top: 80, left: 120 }}>
-        <MapPin price={900} verified onClick={() => {}} />
+      <Box sx={{ position: 'absolute', top: 60, left: 80 }}>
+        <MapPin name="H.Parsons" price={900} verified onClick={() => {}} />
       </Box>
-      <Box sx={{ position: 'absolute', top: 160, left: 300 }}>
-        <MapPin price={1450} verified active onClick={() => {}} />
+      <Box sx={{ position: 'absolute', top: 150, left: 280 }}>
+        <MapPin name="Lady Anne Funerals" price={1450} verified active onClick={() => {}} />
       </Box>
-      <Box sx={{ position: 'absolute', top: 240, left: 180 }}>
-        <MapPin price={2200} verified onClick={() => {}} />
+      <Box sx={{ position: 'absolute', top: 260, left: 140 }}>
+        <MapPin name="Mackay Family" price={2200} verified onClick={() => {}} />
       </Box>
 
       {/* Unverified providers */}
-      <Box sx={{ position: 'absolute', top: 120, left: 420 }}>
-        <MapPin price={1100} onClick={() => {}} />
+      <Box sx={{ position: 'absolute', top: 100, left: 450 }}>
+        <MapPin name="Smith & Sons" price={1100} onClick={() => {}} />
       </Box>
-      <Box sx={{ position: 'absolute', top: 280, left: 380 }}>
-        <MapPin onClick={() => {}} />
+      <Box sx={{ position: 'absolute', top: 300, left: 400 }}>
+        <MapPin name="Local Provider" onClick={() => {}} />
       </Box>
 
-      {/* Dot markers */}
-      <Box sx={{ position: 'absolute', top: 60, left: 480 }}>
-        <MapPin verified onClick={() => {}} />
+      {/* Name only verified */}
+      <Box sx={{ position: 'absolute', top: 40, left: 500 }}>
+        <MapPin name="Kenneallys" verified onClick={() => {}} />
       </Box>
     </>
   ),