fix: stabilize quote flow header and step cards

app/components/navigation/MainNavigation.vue

@@ -34,7 +34,7 @@
           <nav class="flex items-center gap-1">
             <button
               class="px-3 py-1 text-sm font-medium rounded-full transition-colors"
-              :class="showActiveMode && catalogMode === 'explore' && !isClientArea
+              :class="showActiveMode && isExploreModeActive && !isClientArea
                 ? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
                 : (useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
               @click="$emit('set-catalog-mode', 'explore')"
@@ -44,7 +44,7 @@
             <NuxtLink
               :to="localePath('/catalog/product')"
               class="px-3 py-1 text-sm font-medium rounded-full transition-colors"
-              :class="isQuoteStepPage
+              :class="isQuoteModeActive
                 ? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
                 : (useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
             >
@@ -134,7 +134,7 @@
         </template>
 
         <!-- Quote mode: Step-based capsule navigation (like logistics) -->
-        <template v-else-if="catalogMode === 'quote'">
+        <template v-else-if="isQuoteModeActive">
           <div
             class="flex items-center rounded-full pill-glass overflow-hidden"
             :class="searchCapsuleClass"
@@ -456,6 +456,8 @@ const isQuoteStepPage = computed(() => {
     path.includes('/catalog/quantity') ||
     path.includes('/catalog/results')
 })
+const isQuoteModeActive = computed(() => isQuoteStepPage.value || props.catalogMode === 'quote')
+const isExploreModeActive = computed(() => !isQuoteStepPage.value && props.catalogMode === 'explore')
 
 // Navigate to search results (quote mode step flow)
 const navigateToSearch = () => {

app/pages/catalog/destination.vue

@@ -28,21 +28,10 @@
             <div class="w-10 h-1 bg-base-300 rounded-full" />
           </div>
 
-          <div class="flex items-center justify-between mb-1">
+          <div class="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">
@@ -105,8 +94,6 @@ 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()
 

app/pages/catalog/product.vue

@@ -30,13 +30,10 @@
             <div class="w-10 h-1 bg-base-300 rounded-full" />
           </div>
 
-          <div class="flex items-center justify-between mb-1">
+          <div class="mb-1">
-            <div>
             <p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 1 }) }}</p>
             <h2 class="text-2xl font-black tracking-tight text-base-content">{{ $t('catalog.steps.selectProduct') }}</h2>
           </div>
-            <span class="badge badge-neutral">{{ products.length }}</span>
-          </div>
 
           <!-- Search input -->
           <label class="input input-bordered w-full mt-3 rounded-full flex items-center gap-2">

app/pages/catalog/quantity.vue

@@ -31,19 +31,6 @@
           <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">
@@ -92,7 +79,6 @@ 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)