feat: step-by-step quote flow like logistics project

New pages: /catalog/product → /catalog/destination → /catalog/quantity → /catalog/results
Each step has fullscreen map + white bottom sheet card (rounded-t-3xl).
Header capsule in quote mode now navigates between steps.
i18n keys added for step titles (en/ru).

app/pages/catalog/destination.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="fixed inset-0 flex flex-col">
+    <!-- Fullscreen Map -->
+    <div class="absolute inset-0">
+      <ClientOnly>
+        <CatalogMap
+          ref="mapRef"
+          map-id="step-hub-map"
+          :items="hubMapItems"
+          :use-server-clustering="false"
+          point-color="#22c55e"
+          entity-type="hub"
+          @select-item="onMapSelect"
+          @bounds-change="onBoundsChange"
+        />
+      </ClientOnly>
+    </div>
+
+    <!-- Bottom sheet card -->
+    <div class="fixed inset-x-0 bottom-0 z-10 flex flex-col items-center pointer-events-none">
+      <article
+        class="w-full max-w-[980px] rounded-t-3xl bg-white shadow-[0_-8px_40px_rgba(0,0,0,0.12)] pointer-events-auto flex flex-col"
+        style="max-height: 60vh"
+      >
+        <!-- Header -->
+        <div class="shrink-0 p-5 pb-0 md:px-7 md:pt-7">
+          <div class="flex justify-center mb-4">
+            <div class="w-10 h-1 bg-base-300 rounded-full" />
+          </div>
+
+          <div class="flex items-center justify-between mb-1">
+            <div>
+              <p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 2 }) }}</p>
+              <h2 class="text-2xl font-black tracking-tight text-base-content">{{ $t('catalog.steps.selectDestination') }}</h2>
+            </div>
+            <span class="badge badge-neutral">{{ hubs.length }}</span>
+          </div>
+
+          <!-- Selected product chip -->
+          <div v-if="productName" class="flex items-center gap-2 mt-2 mb-1">
+            <span class="badge badge-warning gap-1">
+              <Icon name="lucide:package" size="12" />
+              {{ productName }}
+            </span>
+          </div>
+
+          <!-- Search input -->
+          <label class="input input-bordered w-full mt-3 rounded-full flex items-center gap-2">
+            <Icon name="lucide:search" size="16" class="text-base-content/40" />
+            <input
+              v-model="searchQuery"
+              type="text"
+              :placeholder="$t('catalog.search.searchHubs')"
+              class="grow bg-transparent"
+            />
+          </label>
+        </div>
+
+        <!-- Hub list -->
+        <div class="min-h-0 flex-1 overflow-y-auto p-5 md:px-7">
+          <div v-if="isLoading" class="flex items-center justify-center py-8">
+            <span class="loading loading-spinner loading-md" />
+          </div>
+
+          <div v-else-if="filteredHubs.length === 0" class="text-center py-8 text-base-content/50">
+            <Icon name="lucide:warehouse" size="32" class="mb-2" />
+            <p>{{ $t('catalog.empty.noHubs') }}</p>
+          </div>
+
+          <div v-else class="flex flex-col gap-2">
+            <button
+              v-for="hub in filteredHubs"
+              :key="hub.uuid"
+              class="flex items-center gap-4 rounded-2xl p-4 text-left transition-all hover:bg-base-200/60 active:scale-[0.98] group"
+              @click="selectHub(hub)"
+            >
+              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-green-400 to-green-600 shadow-lg">
+                <Icon name="lucide:warehouse" size="20" class="text-white" />
+              </div>
+              <div class="flex-1 min-w-0">
+                <span class="text-base font-bold text-base-content block truncate">{{ hub.name || hub.uuid }}</span>
+                <span v-if="hub.country" class="text-sm text-base-content/50">{{ hub.country }}</span>
+              </div>
+              <Icon name="lucide:chevron-right" size="18" class="text-base-content/30 group-hover:text-base-content/60 transition-colors" />
+            </button>
+          </div>
+        </div>
+      </article>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
+
+definePageMeta({ layout: 'topnav' })
+
+const { t } = useI18n()
+const router = useRouter()
+const localePath = useLocalePath()
+const route = useRoute()
+
+const mapRef = ref(null)
+const searchQuery = ref('')
+
+// Get product from query
+const productUuid = computed(() => route.query.product as string | undefined)
+const productName = computed(() => route.query.productName as string | undefined)
+
+// Load hubs (filtered by product if available)
+const { items: hubs, isLoading, init: initHubs, setProductFilter } = useCatalogHubs()
+
+const onBoundsChange = (_bounds: MapBounds) => {
+  // No clustering needed — showing hub items directly
+}
+
+// Hub items for map
+const hubMapItems = computed(() =>
+  hubs.value
+    .filter(h => h.latitude != null && h.longitude != null)
+    .map(h => ({
+      uuid: h.uuid || '',
+      name: h.name || '',
+      latitude: Number(h.latitude),
+      longitude: Number(h.longitude),
+      country: h.country || undefined,
+    }))
+)
+
+// Map click → select hub
+const onMapSelect = (uuid: string) => {
+  const hub = hubs.value.find(h => h.uuid === uuid)
+  if (hub) selectHub(hub)
+}
+
+// Filter hubs by search
+const filteredHubs = computed(() => {
+  if (!searchQuery.value.trim()) return hubs.value
+  const q = searchQuery.value.toLowerCase().trim()
+  return hubs.value.filter(h =>
+    (h.name || '').toLowerCase().includes(q) ||
+    (h.country || '').toLowerCase().includes(q)
+  )
+})
+
+// Select hub → navigate to quantity step
+const selectHub = (hub: { uuid?: string | null; name?: string | null }) => {
+  if (!hub.uuid) return
+  const query: Record<string, string> = {
+    ...route.query as Record<string, string>,
+    hub: hub.uuid,
+  }
+  if (hub.name) query.hubName = hub.name
+
+  router.push({
+    path: localePath('/catalog/quantity'),
+    query,
+  })
+}
+
+// Init
+onMounted(() => {
+  if (productUuid.value) {
+    setProductFilter(productUuid.value)
+  }
+  initHubs()
+})
+
+useHead(() => ({
+  title: t('catalog.steps.selectDestination')
+}))
+</script>