Unify catalog cards and fix offer point color

- Change point color on /catalog/offers to green (#22c55e)
- Replace custom route card with OfferResultCard on supplier hub page

app/pages/catalog/suppliers/[supplierId]/[productId]/[hubId].vue

@@ -78,37 +78,14 @@
       </Section>
 
       <!-- Route Result -->
-      <Card v-else-if="routeData" padding="md">
-        <Stack gap="3">
-          <div class="flex justify-between items-center">
-            <Text weight="semibold">{{ t('catalogSupplierCalculation.route.title') }}</Text>
-            <div class="flex gap-2">
-              <span class="badge badge-primary">{{ formatDistance(routeData.totalDistanceKm) }}</span>
-              <span class="badge badge-neutral">{{ formatDuration(routeData.totalTimeSeconds) }}</span>
-            </div>
-          </div>
-
-          <!-- Route stages -->
-          <div class="space-y-2">
-            <div
-              v-for="(stage, index) in routeData.stages"
-              :key="index"
-              class="flex items-center gap-3 p-2 bg-base-200 rounded-lg"
-            >
-              <div class="w-8 h-8 flex items-center justify-center bg-base-100 rounded-full">
-                <Icon :name="getTransportIcon(stage.transportType)" size="16" />
-              </div>
-              <div class="flex-1">
-                <Text size="sm" weight="medium">{{ stage.fromName }} → {{ stage.toName }}</Text>
-                <Text size="xs" tone="muted">
-                  {{ formatDistance(stage.distanceKm) }} · {{ formatDuration(stage.travelTimeSeconds) }}
-                </Text>
-              </div>
-              <span class="badge badge-sm badge-outline">{{ stage.transportType }}</span>
-            </div>
-          </div>
-        </Stack>
-      </Card>
+      <OfferResultCard
+        v-else-if="routeData"
+        :location-name="sourceLocation?.name"
+        :product-name="product?.name"
+        :stages="routeStages"
+        :start-name="sourceLocation?.name"
+        :end-name="hub?.name"
+      />
 
       <!-- No Route -->
       <Card v-else padding="md">
@@ -180,6 +157,15 @@ const routePoints = computed(() => {
   return points
 })
 
+// Route stages for OfferResultCard
+const routeStages = computed(() => {
+  if (!routeData.value?.stages) return []
+  return routeData.value.stages.map((stage: any) => ({
+    transportType: stage?.transportType,
+    distanceKm: stage?.distanceKm
+  }))
+})
+
 // Format distance
 const formatDistance = (km?: number | null) => {
   if (!km) return t('common.values.not_available')