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/quantity.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="fixed inset-0 flex flex-col">
+    <!-- Fullscreen Map -->
+    <div class="absolute inset-0">
+      <ClientOnly>
+        <CatalogMap
+          ref="mapRef"
+          map-id="step-quantity-map"
+          :items="mapPoints"
+          :use-server-clustering="false"
+          point-color="#22c55e"
+          entity-type="hub"
+          :related-points="relatedPoints"
+          :info-loading="false"
+          @bounds-change="() => {}"
+        />
+      </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"
+      >
+        <div class="shrink-0 p-5 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>
+
+          <p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 3 }) }}</p>
+          <h2 class="text-2xl font-black tracking-tight text-base-content mb-4">{{ $t('catalog.steps.setQuantity') }}</h2>
+
+          <!-- Selected product + hub chips -->
+          <div class="flex flex-wrap items-center gap-2 mb-6">
+            <span v-if="productName" class="badge badge-warning gap-1">
+              <Icon name="lucide:package" size="12" />
+              {{ productName }}
+            </span>
+            <Icon name="lucide:arrow-right" size="14" class="text-base-content/30" />
+            <span v-if="hubName" class="badge badge-success gap-1">
+              <Icon name="lucide:warehouse" size="12" />
+              {{ hubName }}
+            </span>
+          </div>
+
+          <!-- Quantity input -->
+          <div class="form-control w-full max-w-xs">
+            <label class="label">
+              <span class="label-text font-bold">{{ $t('catalog.filters.quantity') }}</span>
+            </label>
+            <label class="input input-bordered rounded-xl flex items-center gap-2">
+              <input
+                v-model="qty"
+                type="number"
+                min="0"
+                step="0.1"
+                placeholder="100"
+                class="grow bg-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+              />
+              <span class="text-base-content/50 text-sm">{{ $t('units.t') }}</span>
+            </label>
+          </div>
+
+          <!-- Search button -->
+          <button
+            class="btn btn-primary w-full mt-6 rounded-full text-base font-bold"
+            :disabled="!canSearch"
+            @click="goSearch"
+          >
+            <Icon name="lucide:search" size="18" />
+            {{ $t('catalog.quote.findOffers') }}
+          </button>
+        </div>
+      </article>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { GetNodeDocument } from '~/composables/graphql/public/geo-generated'
+
+definePageMeta({ layout: 'topnav' })
+
+const { t } = useI18n()
+const router = useRouter()
+const localePath = useLocalePath()
+const route = useRoute()
+const { execute } = useGraphQL()
+
+const mapRef = ref(null)
+const qty = ref('100')
+
+const productUuid = computed(() => route.query.product as string | undefined)
+const productName = computed(() => route.query.productName as string | undefined)
+const hubUuid = computed(() => route.query.hub as string | undefined)
+const hubName = computed(() => route.query.hubName as string | undefined)
+
+const canSearch = computed(() => !!(productUuid.value && hubUuid.value))
+
+// Load hub coordinates for map
+const hubPoint = ref<{ uuid: string; name: string; latitude: number; longitude: number } | null>(null)
+
+const loadHubPoint = async () => {
+  if (!hubUuid.value) return
+  const data = await execute(GetNodeDocument, { uuid: hubUuid.value }, 'public', 'geo')
+  const node = data?.node
+  if (node?.latitude != null && node?.longitude != null) {
+    hubPoint.value = {
+      uuid: node.uuid,
+      name: node.name || hubName.value || '',
+      latitude: Number(node.latitude),
+      longitude: Number(node.longitude),
+    }
+  }
+}
+
+const mapPoints = computed(() => hubPoint.value ? [hubPoint.value] : [])
+
+const relatedPoints = computed(() => {
+  if (!hubPoint.value) return []
+  return [{
+    uuid: hubPoint.value.uuid,
+    name: hubPoint.value.name,
+    latitude: hubPoint.value.latitude,
+    longitude: hubPoint.value.longitude,
+    type: 'hub' as const,
+  }]
+})
+
+const goSearch = () => {
+  const query: Record<string, string> = {
+    ...route.query as Record<string, string>,
+  }
+  if (qty.value) query.qty = qty.value
+
+  router.push({
+    path: localePath('/catalog/results'),
+    query,
+  })
+}
+
+onMounted(() => {
+  loadHubPoint()
+})
+
+useHead(() => ({
+  title: t('catalog.steps.setQuantity')
+}))
+</script>