Improve pin click behavior: scroll to card if exists, pan map if not

- When clicking a pin, check if property card exists in loaded results
- If card exists: scroll to it smoothly and highlight (no map pan)
- If card doesn't exist: pan map to center on pin, reload results
- Add isCardScroll flag to ignore stray map events during card scroll
- Skip scroll reset in InfiniteScroll when pin-triggered pan

wp-content/themes/homeproz/template-parts/property/property-filters.js

@@ -706,7 +706,7 @@
         },
 
         /**
-         * Handle marker click - center map on pin, highlight card
+         * Handle marker click - scroll to card if exists, otherwise pan map
          */
         onMarkerClick: function(propertyId) {
             var self = this;
@@ -734,17 +734,32 @@
             this.setMarkerColor(propertyId, 'amber');
             this.setMarkerZIndex(propertyId, 10000); // Amber on top
 
-            // Immediately highlight card if visible (no scroll)
+            // Check if card exists in the infinite scroll area
             var $card = $('#property-' + propertyId);
             if ($card.length) {
+                // Card exists - scroll to it and highlight, don't pan map
                 $card.addClass('property-card-highlighted');
+
+                // Set flag to ignore any pending map events
+                this.isCardScroll = true;
+
+                // Smooth scroll to card
+                $('html, body').animate({
+                    scrollTop: $card.offset().top - 120
+                }, 300, function() {
+                    // Clear flag after scroll animation completes
+                    setTimeout(function() {
+                        self.isCardScroll = false;
+                    }, 100);
+                });
+            } else {
+                // Card not in view - pan map to load new results
+                // Set flag so updateFromMap knows not to clear selection
+                this.isPinClickPan = true;
+
+                // Pan map to center on clicked pin (this triggers updateFromMap)
+                this.map.panTo([markerInfo.lat, markerInfo.lng]);
             }
-
-            // Set flag so updateFromMap knows not to clear selection
-            this.isPinClickPan = true;
-
-            // Pan map to center on clicked pin (this triggers updateFromMap)
-            this.map.panTo([markerInfo.lat, markerInfo.lng]);
         },
 
         /**
@@ -1341,6 +1356,11 @@
          * Called by PropertyMap when map moves/zooms
          */
         updateFromMap: function(bounds, center) {
+            // If we're in the middle of scrolling to a card, ignore this map event
+            if (PropertyMap.isCardScroll) {
+                return;
+            }
+
             this.mapBounds = bounds;
             this.mapCenter = center;
             this.isMapUpdate = true;
@@ -1355,8 +1375,9 @@
             this.$results.html('<div class="property-results-loading"><div class="spinner"></div></div>');
 
             // Reset infinite scroll state before loading new content
+            // Skip scroll adjustment if this is a pin-triggered pan (we'll scroll to card later)
             if (InfiniteScrollState.isEnabled) {
-                InfiniteScroll.reset();
+                InfiniteScroll.reset(PropertyMap.isPinClickPan);
             }
 
             // Block scroll state until user actually scrolls
@@ -2327,11 +2348,16 @@
 
         /**
          * Reset (called on filter change)
+         * @param {boolean} skipScroll - If true, don't adjust scroll position
          */
-        reset: function() {
+        reset: function(skipScroll) {
             InfiniteScrollState.pages = {};
             InfiniteScrollState.pendingPage = null;
 
+            if (skipScroll) {
+                return;
+            }
+
             // Scroll to bottom edge of .property-filters - bottom margin + masthead height
             var $filters = $('.property-filters').first();
             var $masthead = $('#masthead');