Unify layouts and create CatalogPage component

- MainNavigation: center tabs on page (absolute positioning)
- SubNavigation: align left instead of center
- Create CatalogPage universal component for list+map pages
- Migrate catalog pages (offers, suppliers, hubs) to CatalogPage
- Remove PageHeader from clientarea pages (redundant with navigation)
- Add topnav layout to supplier detail page

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/pages/catalog/offers/index.vue

@@ -1,17 +1,5 @@
 <template>
   <div class="flex flex-col flex-1 min-h-0">
-    <!-- Header -->
-    <div class="py-4">
-      <PageHeader :title="pageTitle">
-        <template v-if="selectedProduct" #actions>
-          <NuxtLink :to="localePath('/catalog/offers')" class="btn btn-ghost btn-sm">
-            <Icon name="lucide:arrow-left" size="16" />
-            {{ t('common.back') }}
-          </NuxtLink>
-        </template>
-      </PageHeader>
-    </div>
-
     <!-- Loading state -->
     <div v-if="isLoading || productsLoading" class="flex-1 flex items-center justify-center">
       <Card padding="lg">
@@ -46,30 +34,33 @@
       </Stack>
     </div>
 
-    <!-- Offers for selected product - ListMapLayout -->
-    <ListMapLayout
-      v-else
-      ref="listMapRef"
-      :items="items"
-      :selected-item-id="selectedOfferId"
-      map-id="offers-map"
-      point-color="#f59e0b"
-      @select-item="onSelectOffer"
-    >
-      <template #list>
-        <Stack gap="4">
+    <!-- Offers for selected product -->
+    <template v-else>
+      <!-- Back button -->
+      <div class="py-2 px-4 lg:px-0">
+        <NuxtLink :to="localePath('/catalog/offers')" class="btn btn-ghost btn-sm gap-2">
+          <Icon name="lucide:arrow-left" size="16" />
+          {{ t('common.back') }}
+        </NuxtLink>
+      </div>
+
+      <CatalogPage
+        :items="items"
+        :loading="isLoading"
+        map-id="offers-map"
+        point-color="#f59e0b"
+        :selected-id="selectedOfferId"
+        @select="onSelectOffer"
+      >
+        <template #filters>
           <CatalogFilters :filters="filters" v-model="selectedFilter" />
+        </template>
 
-          <Stack gap="3">
-            <OfferCard
-              v-for="offer in items"
-              :key="offer.uuid"
-              :offer="offer"
-              :class="{ 'ring-2 ring-primary': offer.uuid === selectedOfferId }"
-              @click="onSelectOffer(offer.uuid)"
-            />
-          </Stack>
+        <template #card="{ item }">
+          <OfferCard :offer="item" />
+        </template>
 
+        <template #pagination>
           <PaginationLoadMore
             :shown="items.length"
             :total="total"
@@ -77,13 +68,13 @@
             :loading="isLoadingMore"
             @load-more="loadMore"
           />
+        </template>
 
-          <Stack v-if="total === 0" align="center" gap="2">
-            <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
-          </Stack>
-        </Stack>
-      </template>
-    </ListMapLayout>
+        <template #empty>
+          <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
+        </template>
+      </CatalogPage>
+    </template>
   </div>
 </template>
 
@@ -143,11 +134,9 @@ const selectProduct = (product: any) => {
 
 // Selected offer for map highlighting
 const selectedOfferId = ref<string>()
-const listMapRef = ref<{ flyToItem: (uuid: string) => void } | null>(null)
 
-const onSelectOffer = (uuid: string) => {
-  selectedOfferId.value = uuid
-  // flyToItem will be triggered by ListMapLayout watch
+const onSelectOffer = (offer: any) => {
+  selectedOfferId.value = offer.uuid
 }
 
 // Initialize