Add grid layout for catalog cards + hover shadow

- CatalogPage: added gridColumns prop (1/2/3 columns)
- Card: added hover:shadow-lg on interactive cards
- Products, hubs, suppliers pages now use 3-column grid
- Offers remain full-width (gridColumns=1 default)

app/components/page/CatalogPage.vue

@@ -40,7 +40,7 @@
               <slot name="header" />
               <slot name="filters" />
 
-              <Stack gap="3">
+              <div :class="gridClass">
                 <div
                   v-for="item in displayItems"
                   :key="item.uuid"
@@ -51,7 +51,7 @@
                 >
                   <slot name="card" :item="item" />
                 </div>
-              </Stack>
+              </div>
 
               <slot name="pagination" />
 
@@ -96,7 +96,7 @@
               <slot name="header" />
               <slot name="filters" />
 
-              <Stack gap="3">
+              <div :class="gridClass">
                 <div
                   v-for="item in displayItems"
                   :key="item.uuid"
@@ -107,7 +107,7 @@
                 >
                   <slot name="card" :item="item" />
                 </div>
-              </Stack>
+              </div>
 
               <slot name="pagination" />
 
@@ -169,7 +169,7 @@
           <slot name="header" />
           <slot name="filters" />
 
-          <Stack gap="3">
+          <div :class="gridClass">
             <div
               v-for="item in items"
               :key="item.uuid"
@@ -177,7 +177,7 @@
             >
               <slot name="card" :item="item" />
             </div>
-          </Stack>
+          </div>
 
           <slot name="pagination" />
 
@@ -217,6 +217,7 @@ const props = withDefaults(defineProps<{
   hoveredId?: string
   hasSubNav?: boolean
   totalCount?: number  // Total count for search bar counter (can differ from items.length with pagination)
+  gridColumns?: number  // Number of columns for card grid (1 = stack, 2/3 = grid)
 }>(), {
   loading: false,
   withMap: true,
@@ -225,7 +226,16 @@ const props = withDefaults(defineProps<{
   mapId: 'catalog-map',
   pointColor: '#3b82f6',
   hasSubNav: true,
-  totalCount: 0
+  totalCount: 0,
+  gridColumns: 1
+})
+
+// Grid class based on gridColumns prop
+const gridClass = computed(() => {
+  if (props.gridColumns === 1) return 'flex flex-col gap-3'
+  if (props.gridColumns === 2) return 'grid grid-cols-2 gap-3'
+  if (props.gridColumns === 3) return 'grid grid-cols-3 gap-3'
+  return 'flex flex-col gap-3'
 })
 
 // Smooth scroll collapse - pixel values for smooth animation

app/components/ui/Card.vue

@@ -35,7 +35,9 @@ const toneMap: Record<string, string> = {
 const cardClass = computed(() => {
   const paddingClass = paddingMap[props.padding] || paddingMap.medium
   const toneClass = toneMap[props.tone] || toneMap.default
-  const interactiveClass = props.interactive ? 'cursor-pointer' : ''
+  const interactiveClass = props.interactive
+    ? 'cursor-pointer hover:shadow-lg transition-shadow duration-200'
+    : ''
   const baseClass = 'card'
   return [baseClass, paddingClass, toneClass, interactiveClass].filter(Boolean).join(' ')
 })

app/pages/catalog/hubs/index.vue

@@ -3,6 +3,7 @@
     :items="displayItems"
     :map-items="itemsWithCoords"
     :loading="isLoading"
+    :grid-columns="3"
     with-map
     use-server-clustering
     map-id="hubs-map"

app/pages/catalog/offers/[productId]/index.vue

@@ -3,6 +3,7 @@
     :items="filteredHubs"
     :loading="isLoading"
     :total-count="hubs.length"
+    :grid-columns="3"
     with-map
     use-server-clustering
     cluster-node-type="logistics"

app/pages/catalog/offers/index.vue

@@ -3,6 +3,7 @@
     :items="filteredProducts"
     :loading="isLoading"
     :total-count="products.length"
+    :grid-columns="3"
     with-map
     use-server-clustering
     cluster-node-type="offer"

app/pages/catalog/suppliers/index.vue

@@ -3,6 +3,7 @@
     :items="displayItems"
     :map-items="itemsWithCoords"
     :loading="isLoading"
+    :grid-columns="3"
     with-map
     map-id="suppliers-map"
     point-color="#3b82f6"