Grouping markers and changing pin to tear shape

frontend/src/components/ItemMarkerInfo.tsx

@@ -21,12 +21,6 @@ const ItemMarkerInfo: React.FC<ItemMarkerInfoProps> = ({ item, onViewDetails })
     return 'Contact for pricing';
   };
 
-  const getLocationDisplay = () => {
-    return item.city && item.state 
-      ? `${item.city}, ${item.state}` 
-      : 'Location not specified';
-  };
-
   return (
     <div style={{ width: 'min(280px, 90vw)', maxWidth: '280px' }}>
       <div className="card border-0">
@@ -55,18 +49,14 @@ const ItemMarkerInfo: React.FC<ItemMarkerInfoProps> = ({ item, onViewDetails })
         )}
         
         <div className="card-body p-3">
-          <h6 className="card-title mb-2 text-dark fw-bold text-truncate">
+          <div className="card-title mb-2 text-dark fw-bold text-truncate" style={{ fontSize: '0.875rem' }}>
             {item.name}
-          </h6>
-
-          <div className="mb-2">
-            <span className="text-primary fw-bold">
-              {getPriceDisplay()}
-            </span>
           </div>
 
-          <div className="text-muted small mb-2">
-            <i className="bi bi-geo-alt"></i> {getLocationDisplay()}
+          <div className="mb-2">
+            <span className="text-primary fw-semibold" style={{ fontSize: '0.8rem' }}>
+              {getPriceDisplay()}
+            </span>
           </div>
 
           {item.description && (