Make search bar sticky third navigation bar

- Add sticky positioning with proper styling (bg, border-b)
- Use negative margins to span full width like nav bars
- Update map offset to account for 3 bars (11rem with search bar)

app/components/page/CatalogPage.vue

@@ -12,8 +12,8 @@
 
     <!-- Content -->
     <template v-else>
-      <!-- Search bar slot (full width, above split) -->
-      <div v-if="$slots.searchBar" class="py-3">
+      <!-- Search bar slot (sticky third bar - like navigation) -->
+      <div v-if="$slots.searchBar" class="sticky top-0 z-20 -mx-3 lg:-mx-6 px-3 lg:px-6 py-2 bg-base-100 border-b border-base-300">
         <slot name="searchBar" :displayed-count="displayItems.length" :total-count="totalCount" />
       </div>
 
@@ -214,9 +214,11 @@ const props = withDefaults(defineProps<{
 })
 
 // Map positioning - dynamic based on search bar presence
+// Without searchBar: MainNav (4rem) + SubNav (3rem) + padding (1rem) = 8rem
+// With searchBar: 8rem + SearchBar (3rem) = 11rem
 const slots = useSlots()
 const hasSearchBar = computed(() => !!slots.searchBar)
-const mapTopClass = computed(() => hasSearchBar.value ? 'top-44' : 'top-32')
+const mapTopClass = computed(() => hasSearchBar.value ? 'top-[11rem]' : 'top-32')
 const mapHeightClass = computed(() => hasSearchBar.value ? 'h-[calc(100vh-12rem)]' : 'h-[calc(100vh-9rem)]')
 
 const emit = defineEmits<{