Add entity color scheme and improve map hover effect

- Add color scheme: product/offer=orange, supplier=blue, hub=green
- Remove 'location' filter (same as hub)
- Quantity filter appears only after product is selected
- Map hover shows 'target' ring effect (outer white ring)
- Tokens in header use entity-specific colors

app/components/catalog/CatalogMap.vue

@@ -208,12 +208,7 @@ const initClientClusteringLayers = (map: MapboxMapType) => {
     filter: ['!', ['has', 'point_count']],
     paint: {
       'circle-radius': 12,
-      'circle-color': [
-        'case',
-        ['==', ['get', 'uuid'], props.hoveredItemId || ''],
-        '#facc15', // yellow when hovered
-        props.pointColor
-      ],
+      'circle-color': props.pointColor,
       'circle-stroke-width': 3,
       'circle-stroke-color': '#ffffff'
     }
@@ -260,6 +255,36 @@ const initClientClusteringLayers = (map: MapboxMapType) => {
   map.on('mouseenter', 'unclustered-point', () => { map.getCanvas().style.cursor = 'pointer' })
   map.on('mouseleave', 'unclustered-point', () => { map.getCanvas().style.cursor = '' })
 
+  // Hovered point layer (on top of everything) - "target" effect with border
+  map.addSource(hoveredSourceId.value, {
+    type: 'geojson',
+    data: hoveredPointGeoJson.value
+  })
+  // Outer ring (white)
+  map.addLayer({
+    id: 'hovered-point-ring',
+    type: 'circle',
+    source: hoveredSourceId.value,
+    paint: {
+      'circle-radius': 20,
+      'circle-color': 'transparent',
+      'circle-stroke-width': 3,
+      'circle-stroke-color': '#ffffff'
+    }
+  })
+  // Inner point (same as entity color)
+  map.addLayer({
+    id: 'hovered-point-layer',
+    type: 'circle',
+    source: hoveredSourceId.value,
+    paint: {
+      'circle-radius': 14,
+      'circle-color': props.pointColor,
+      'circle-stroke-width': 3,
+      'circle-stroke-color': '#ffffff'
+    }
+  })
+
   // Auto-fit bounds to all items
   if (!didFitBounds.value && props.items.length > 0) {
     const bounds = new LngLatBounds()
@@ -312,12 +337,7 @@ const initServerClusteringLayers = (map: MapboxMapType) => {
     filter: ['==', ['get', 'count'], 1],
     paint: {
       'circle-radius': 12,
-      'circle-color': [
-        'case',
-        ['==', ['get', 'id'], props.hoveredItemId || ''],
-        '#facc15', // yellow when hovered
-        props.pointColor
-      ],
+      'circle-color': props.pointColor,
       'circle-stroke-width': 3,
       'circle-stroke-color': '#ffffff'
     }
@@ -365,18 +385,31 @@ const initServerClusteringLayers = (map: MapboxMapType) => {
   map.on('mouseenter', 'server-points', () => { map.getCanvas().style.cursor = 'pointer' })
   map.on('mouseleave', 'server-points', () => { map.getCanvas().style.cursor = '' })
 
-  // Hovered point layer (on top of everything)
+  // Hovered point layer (on top of everything) - "target" effect with border
   map.addSource(hoveredSourceId.value, {
     type: 'geojson',
     data: hoveredPointGeoJson.value
   })
+  // Outer ring (white)
+  map.addLayer({
+    id: 'hovered-point-ring',
+    type: 'circle',
+    source: hoveredSourceId.value,
+    paint: {
+      'circle-radius': 20,
+      'circle-color': 'transparent',
+      'circle-stroke-width': 3,
+      'circle-stroke-color': '#ffffff'
+    }
+  })
+  // Inner point (same as entity color)
   map.addLayer({
     id: 'hovered-point-layer',
     type: 'circle',
     source: hoveredSourceId.value,
     paint: {
       'circle-radius': 14,
-      'circle-color': '#3b82f6',
+      'circle-color': props.pointColor,
       'circle-stroke-width': 3,
       'circle-stroke-color': '#ffffff'
     }