@seekora-ai/ui-sdk-react 0.2.14 → 0.2.15

package/dist/src/index.js

@@ -1570,6 +1570,9 @@ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else i
  *
  * Interactive search input component with query suggestions support
  */
+// Z-index scale for consistent layering
+const Z_INDEX$2 = {
+    dropdown: 100};
 const SIZE_CONFIG = {
     small: {
         padding: '0.375rem 0.5rem',
@@ -1753,9 +1756,9 @@ const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounce
     const inputPaddingLeft = sizeConfig.iconPaddingLeft ;
     const inputPaddingRight = hasClearBtn ? sizeConfig.iconPaddingRight : sizeConfig.padding.split(' ')[1] || sizeConfig.padding;
     const borderRadius = typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium;
-    const focusBorderColor = isFocused ? theme.colors.focus : theme.colors.border;
+    const focusBorderColor = isFocused ? `var(--seekora-border-focus, ${theme.colors.focus})` : `var(--seekora-border, ${theme.colors.border})`;
     const focusRingShadow = isFocused
-        ? `0 0 0 3px ${theme.colors.focus}33`
+        ? `0 0 0 3px var(--seekora-border-focus-alpha, ${theme.colors.focus}33)`
         : undefined;
     const handleClear = React.useCallback(() => {
         setQuery('', false);
@@ -1789,7 +1792,7 @@ const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounce
                     justifyContent: 'center',
                     pointerEvents: 'none',
                     color: 'var(--seekora-searchbar-icon-color)',
-                    zIndex: 1,
+                    zIndex: 2,
                 } }, renderSearchIcon ? renderSearchIcon() : React.createElement(DefaultSearchIcon, { size: sizeConfig.iconSize }))),
             React.createElement("input", { ref: inputRef, type: "text", value: query, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, placeholder: placeholder, className: clsx(searchBarTheme.input, isFocused && searchBarTheme.inputFocused), style: {
                     width: '100%',
@@ -1825,7 +1828,7 @@ const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounce
                     borderRadius: '50%',
                     color: 'var(--seekora-searchbar-icon-color)',
                     transition: theme.transitions?.fast || '150ms ease-in-out',
-                    zIndex: 1,
+                    zIndex: 2,
                 }, onMouseDown: (e) => {
                     // Prevent input blur so the clear action doesn't race with blur handler
                     e.preventDefault();
@@ -1836,8 +1839,8 @@ const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounce
                 fontSize: sizeConfig.fontSize,
                 fontFamily: theme.typography.fontFamily,
                 fontWeight: theme.typography.fontWeight?.medium ?? 500,
-                backgroundColor: theme.colors.primary,
-                color: '#ffffff',
+                backgroundColor: `var(--seekora-primary, ${theme.colors.primary})`,
+                color: 'var(--seekora-primary-text, #ffffff)',
                 border: 'none',
                 borderRadius: 'var(--seekora-searchbar-radius)',
                 cursor: 'pointer',
@@ -1865,7 +1868,8 @@ const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounce
                 boxShadow: theme.shadows.medium,
                 maxHeight: '400px',
                 overflowY: 'auto',
-                zIndex: 1000,
+                zIndex: Z_INDEX$2.dropdown,
+                boxSizing: 'border-box',
             } },
             isLoading && displayedSuggestions.length === 0 && showLoadingState && (renderLoading ? renderLoading() : defaultRenderLoading()),
             displayedSuggestions.length > 0 && (React.createElement(React.Fragment, null, displayedSuggestions.map((suggestion, index) => {
@@ -1934,6 +1938,43 @@ const SearchResults = ({ results: resultsProp, loading: loadingProp, error: erro
             }
         }
     }, [activeIndex, enableKeyboardNavigation]);
+    // Global keyboard listener for seamless navigation from search box to results
+    React.useEffect(() => {
+        if (!enableKeyboardNavigation)
+            return;
+        const handleGlobalKeyDown = (e) => {
+            // Only handle if we have results and the container exists
+            if (!containerRef.current)
+                return;
+            const resultElements = containerRef.current.querySelectorAll('[data-result-index]');
+            const maxIndex = resultElements.length - 1;
+            if (maxIndex < 0)
+                return;
+            // Check if focus is on an input/textarea (search box)
+            const activeElement = document.activeElement;
+            const isInputFocused = activeElement?.tagName === 'INPUT' || activeElement?.tagName === 'TEXTAREA';
+            if (e.key === 'ArrowDown') {
+                // If in search box or no result selected, select first result
+                if (isInputFocused || activeIndex === -1) {
+                    e.preventDefault();
+                    setActiveIndex(0);
+                    containerRef.current?.focus();
+                }
+            }
+            else if (e.key === 'ArrowUp') {
+                // If first result is selected, go back to search box
+                if (activeIndex === 0) {
+                    e.preventDefault();
+                    setActiveIndex(-1);
+                    // Find and focus the search input
+                    const searchInput = document.querySelector('input[type="text"], input[type="search"]');
+                    searchInput?.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleGlobalKeyDown);
+        return () => document.removeEventListener('keydown', handleGlobalKeyDown);
+    }, [enableKeyboardNavigation, activeIndex]);
     // Keyboard navigation handler
     const handleKeyDown = React.useCallback((e) => {
         if (!enableKeyboardNavigation)
@@ -2309,31 +2350,6 @@ const SearchResults = ({ results: resultsProp, loading: loadingProp, error: erro
             results?.totalResults || results?.data?.total_results || 0,
             " result",
             (results?.totalResults || results?.data?.total_results || 0) !== 1 ? 's' : '')),
-        enableKeyboardNavigation && resultItems.length > 0 && (React.createElement("div", { style: {
-                fontSize: '12px',
-                color: theme.colors.text,
-                opacity: 0.6,
-                marginBottom: theme.spacing.small,
-                display: 'flex',
-                gap: '8px',
-                alignItems: 'center',
-            } },
-            React.createElement("span", { style: {
-                    display: 'inline-flex',
-                    gap: '4px',
-                    padding: '2px 6px',
-                    backgroundColor: theme.colors.hover,
-                    borderRadius: '4px',
-                    fontSize: '11px',
-                } }, "\u2191\u2193 navigate"),
-            React.createElement("span", { style: {
-                    display: 'inline-flex',
-                    gap: '4px',
-                    padding: '2px 6px',
-                    backgroundColor: theme.colors.hover,
-                    borderRadius: '4px',
-                    fontSize: '11px',
-                } }, "\u21B5 select"))),
         React.createElement("div", { className: searchResultsTheme.resultsList, style: resultsListStyle }, resultItems.map((result, index) => renderFn(result, index, index === activeIndex)))));
 };
 
@@ -2995,6 +3011,261 @@ const SortBy = ({ options, value: valueProp, defaultValue, onSortChange, renderS
     return null;
 };
 
+/**
+ * RangeSlider Component
+ *
+ * Visual slider for numeric range filtering
+ * Alternative to RangeInput for a more interactive UX
+ */
+const SHADOWS$1 = {
+    md: '0 2px 4px rgba(0,0,0,0.1)'};
+const RangeSlider = ({ field, label, min, max, step = 1, currentMin: currentMinProp, currentMax: currentMaxProp, onRangeChange, formatValue = (v) => v.toString(), className, style, theme: customTheme, showValues = true, syncWithState = true, debounceMs = 300, }) => {
+    const { theme } = useSearchContext();
+    const { refinements, addRefinement, removeRefinement } = useSearchState();
+    const rangeSliderTheme = customTheme || {};
+    const thumbClass = rangeSliderTheme.thumb || 'seekora-range-slider__thumb';
+    // Parse current range from StateManager
+    // NOTE: computed every render (no useMemo) because the state manager mutates
+    // the refinements array in place — the reference never changes.
+    let stateRange;
+    if (!syncWithState) {
+        stateRange = { min: undefined, max: undefined };
+    }
+    else {
+        let minVal;
+        let maxVal;
+        refinements.forEach(r => {
+            if (r.field === field) {
+                const minMatch = r.value.match(/^>=(\d+(?:\.\d+)?)$/);
+                if (minMatch)
+                    minVal = parseFloat(minMatch[1]);
+                const maxMatch = r.value.match(/^<=(\d+(?:\.\d+)?)$/);
+                if (maxMatch)
+                    maxVal = parseFloat(maxMatch[1]);
+            }
+        });
+        stateRange = { min: minVal, max: maxVal };
+    }
+    const [internalMin, setInternalMin] = React.useState(currentMinProp ?? stateRange.min ?? min);
+    const [internalMax, setInternalMax] = React.useState(currentMaxProp ?? stateRange.max ?? max);
+    const isDraggingRef = React.useRef(false);
+    const debounceRef = React.useRef(null);
+    const pendingMinRef = React.useRef(internalMin);
+    const pendingMaxRef = React.useRef(internalMax);
+    // Sync with StateManager changes (only when stateRange actually changes, not on drag)
+    React.useEffect(() => {
+        if (syncWithState && !isDraggingRef.current) {
+            if (stateRange.min !== undefined)
+                setInternalMin(stateRange.min);
+            else
+                setInternalMin(min);
+            if (stateRange.max !== undefined)
+                setInternalMax(stateRange.max);
+            else
+                setInternalMax(max);
+        }
+    }, [syncWithState, stateRange.min, stateRange.max, min, max]);
+    // Update StateManager with range refinements
+    const updateStateManager = React.useCallback((minVal, maxVal) => {
+        if (!syncWithState)
+            return;
+        // Remove existing range refinements for this field
+        refinements.forEach(r => {
+            if (r.field === field) {
+                removeRefinement(field, r.value, false);
+            }
+        });
+        // Add new range refinements — trigger search on the last one added
+        const setMin = minVal > min;
+        const setMax = maxVal < max;
+        if (setMin && setMax) {
+            addRefinement(field, `>=${minVal}`, false);
+            addRefinement(field, `<=${maxVal}`, true);
+        }
+        else if (setMin) {
+            addRefinement(field, `>=${minVal}`, true);
+        }
+        else if (setMax) {
+            addRefinement(field, `<=${maxVal}`, true);
+        }
+    }, [syncWithState, field, refinements, addRefinement, removeRefinement, min, max]);
+    // Debounced update (during drag only)
+    const debouncedUpdate = React.useCallback((minVal, maxVal) => {
+        pendingMinRef.current = minVal;
+        pendingMaxRef.current = maxVal;
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+        }
+        debounceRef.current = setTimeout(() => {
+            updateStateManager(minVal, maxVal);
+            if (onRangeChange) {
+                onRangeChange(minVal, maxVal);
+            }
+        }, debounceMs);
+    }, [updateStateManager, onRangeChange, debounceMs]);
+    // Handle min slider change
+    const handleMinChange = (e) => {
+        const value = Math.min(Number(e.target.value), internalMax - step);
+        setInternalMin(value);
+        isDraggingRef.current = true;
+        debouncedUpdate(value, internalMax);
+    };
+    // Handle max slider change
+    const handleMaxChange = (e) => {
+        const value = Math.max(Number(e.target.value), internalMin + step);
+        setInternalMax(value);
+        isDraggingRef.current = true;
+        debouncedUpdate(internalMin, value);
+    };
+    // Handle drag end — flush pending update immediately
+    const handleDragEnd = () => {
+        isDraggingRef.current = false;
+        // Cancel the debounce and commit immediately
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+            debounceRef.current = null;
+        }
+        updateStateManager(pendingMinRef.current, pendingMaxRef.current);
+        if (onRangeChange) {
+            onRangeChange(pendingMinRef.current, pendingMaxRef.current);
+        }
+    };
+    // Handle keyboard navigation for enhanced control (Shift+Arrow for 10x step, Home/End)
+    const handleMinKeyDown = (e) => {
+        let newValue = null;
+        if (e.key === 'Home') {
+            e.preventDefault();
+            newValue = min;
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            newValue = internalMax - step;
+        }
+        else if (e.shiftKey && (e.key === 'ArrowLeft' || e.key === 'ArrowDown')) {
+            e.preventDefault();
+            newValue = Math.max(min, internalMin - step * 10);
+        }
+        else if (e.shiftKey && (e.key === 'ArrowRight' || e.key === 'ArrowUp')) {
+            e.preventDefault();
+            newValue = Math.min(internalMax - step, internalMin + step * 10);
+        }
+        if (newValue !== null) {
+            setInternalMin(newValue);
+            debouncedUpdate(newValue, internalMax);
+        }
+    };
+    const handleMaxKeyDown = (e) => {
+        let newValue = null;
+        if (e.key === 'Home') {
+            e.preventDefault();
+            newValue = internalMin + step;
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            newValue = max;
+        }
+        else if (e.shiftKey && (e.key === 'ArrowLeft' || e.key === 'ArrowDown')) {
+            e.preventDefault();
+            newValue = Math.max(internalMin + step, internalMax - step * 10);
+        }
+        else if (e.shiftKey && (e.key === 'ArrowRight' || e.key === 'ArrowUp')) {
+            e.preventDefault();
+            newValue = Math.min(max, internalMax + step * 10);
+        }
+        if (newValue !== null) {
+            setInternalMax(newValue);
+            debouncedUpdate(internalMin, newValue);
+        }
+    };
+    // Calculate filled track position
+    const minPercent = ((internalMin - min) / (max - min)) * 100;
+    const maxPercent = ((internalMax - min) / (max - min)) * 100;
+    return (React.createElement("div", { className: clsx(rangeSliderTheme.root, className), style: {
+            fontFamily: 'inherit',
+            ...style,
+        } },
+        label && (React.createElement("label", { className: rangeSliderTheme.label, style: {
+                display: 'block',
+                marginBottom: theme.spacing.small,
+                fontSize: theme.typography.fontSize.medium,
+                fontWeight: theme.typography.fontWeight?.medium || 500,
+                color: theme.colors.text,
+            } }, label)),
+        React.createElement("div", { className: rangeSliderTheme.slider, style: {
+                position: 'relative',
+                minHeight: '40px',
+                display: 'flex',
+                alignItems: 'center',
+            } },
+            React.createElement("div", { className: rangeSliderTheme.track, style: {
+                    position: 'absolute',
+                    width: '100%',
+                    height: '4px',
+                    backgroundColor: theme.colors.border,
+                    borderRadius: '2px',
+                } }),
+            React.createElement("div", { className: rangeSliderTheme.trackFilled, style: {
+                    position: 'absolute',
+                    left: `${minPercent}%`,
+                    width: `${maxPercent - minPercent}%`,
+                    height: '4px',
+                    backgroundColor: theme.colors.primary,
+                    borderRadius: '2px',
+                } }),
+            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMin, onChange: handleMinChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, onKeyDown: handleMinKeyDown, tabIndex: 0, "aria-valuenow": internalMin, "aria-valuemin": min, "aria-valuemax": max, className: thumbClass, style: {
+                    position: 'absolute',
+                    width: '100%',
+                    height: '4px',
+                    background: 'transparent',
+                    WebkitAppearance: 'none',
+                    appearance: 'none',
+                    cursor: 'pointer',
+                    pointerEvents: 'none',
+                }, "aria-label": `Minimum ${label || field}` }),
+            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMax, onChange: handleMaxChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, onKeyDown: handleMaxKeyDown, tabIndex: 0, "aria-valuenow": internalMax, "aria-valuemin": min, "aria-valuemax": max, className: thumbClass, style: {
+                    position: 'absolute',
+                    width: '100%',
+                    height: '4px',
+                    background: 'transparent',
+                    WebkitAppearance: 'none',
+                    appearance: 'none',
+                    cursor: 'pointer',
+                    pointerEvents: 'none',
+                }, "aria-label": `Maximum ${label || field}` })),
+        showValues && (React.createElement("div", { className: rangeSliderTheme.values, style: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                marginTop: theme.spacing.small,
+                fontSize: theme.typography.fontSize.small,
+                color: theme.colors.textSecondary,
+            } },
+            React.createElement("span", { className: rangeSliderTheme.value }, formatValue(internalMin)),
+            React.createElement("span", { className: rangeSliderTheme.value }, formatValue(internalMax)))),
+        React.createElement("style", null, `
+        .${thumbClass}::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          appearance: none;
+          width: 20px;
+          height: 20px;
+          background: ${theme.colors.primary};
+          border-radius: 50%;
+          cursor: pointer;
+          pointer-events: all;
+          box-shadow: ${SHADOWS$1.md};
+        }
+        .${thumbClass}::-moz-range-thumb {
+          width: 20px;
+          height: 20px;
+          background: ${theme.colors.primary};
+          border-radius: 50%;
+          cursor: pointer;
+          pointer-events: all;
+          border: none;
+          box-shadow: ${SHADOWS$1.md};
+        }
+      `)));
+};
+
 /**
  * Facets Component
  *
@@ -3044,17 +3315,19 @@ const CheckmarkIcon = ({ size = 16 }) => (React.createElement("svg", { width: si
 // CSS variable defaults
 // ---------------------------------------------------------------------------
 const CSS_VAR_DEFAULTS = {
-    '--seekora-facet-bg': '#ffffff',
+    '--seekora-facet-bg': 'transparent',
     '--seekora-facet-border': '#dee2e6',
-    '--seekora-facet-active-bg': '#f0f7ff',
+    '--seekora-facet-active-bg': 'rgba(0, 0, 0, 0.05)',
     '--seekora-facet-swatch-size': '32px',
     '--seekora-facet-count-bg': '#e9ecef',
     '--seekora-facet-count-color': '#495057',
+    '--seekora-primary': '#3b82f6',
+    '--seekora-primary-text': '#ffffff',
 };
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, renderFacet, renderFacetItem, maxItems = 10, showMore = true, className, style, theme: customTheme, variant = 'checkbox', searchable = false, showCounts = true, colorMap, defaultCollapsed = false, size = 'medium', }) => {
+const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, renderFacet, renderFacetItem, maxItems = 10, showMore = true, className, style, theme: customTheme, variant = 'checkbox', searchable = false, showCounts = true, colorMap, defaultCollapsed = false, size = 'medium', facetRanges, }) => {
     const { theme } = useSearchContext();
     const { results: stateResults, refinements, addRefinement, removeRefinement } = useSearchState();
     const facetsTheme = customTheme || {};
@@ -3104,6 +3377,7 @@ const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, rende
                     count: count.count,
                     selected: refinements.some(r => r.field === fieldName && r.value === count.value),
                 })) : [],
+                stats: facet.stats || undefined,
             };
         });
         log.verbose('Facets: Extracted facets', {
@@ -3181,7 +3455,7 @@ const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, rende
     const sizeScale = React.useMemo(() => {
         switch (size) {
             case 'small':
-                return { font: theme.typography.fontSize.small, padding: '0.25rem', gap: '0.25rem' };
+                return { font: theme.typography.fontSize.small, padding: '0.5rem', gap: '0.5rem' };
             case 'large':
                 return { font: theme.typography.fontSize.large, padding: '0.75rem', gap: '0.75rem' };
             case 'medium':
@@ -3250,6 +3524,7 @@ const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, rende
                     ? 'var(--seekora-facet-active-bg, ' + theme.colors.hover + ')'
                     : 'transparent',
                 transition: 'background-color 0.2s ease',
+                boxSizing: 'border-box',
             } },
             React.createElement("input", { type: "checkbox", checked: refinements.some(r => r.field === facet.field && r.value === item.value) || item.selected || false, onChange: () => handleFacetToggle(facet.field, item.value, item.selected || false), className: facetsTheme.checkbox, style: {
                     marginRight: sizeScale.gap,
@@ -3258,6 +3533,7 @@ const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, rende
             React.createElement("span", { className: facetsTheme.facetItemLabel, style: {
                     flex: 1,
                     fontSize: sizeScale.font,
+                    lineHeight: 1.5,
                     color: theme.colors.text,
                 } }, item.value),
             renderCountBadge(item.count)));
@@ -3286,13 +3562,13 @@ const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, rende
                     borderRadius: '50%',
                     backgroundColor: color,
                     border: isChecked
-                        ? `3px solid ${theme.colors.primary}`
+                        ? `3px solid var(--seekora-primary, ${theme.colors.primary})`
                         : `2px solid var(--seekora-facet-border, ${theme.colors.border})`,
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
                     transition: 'border 0.2s ease, box-shadow 0.2s ease',
-                    boxShadow: isChecked ? `0 0 0 2px ${theme.colors.primary}33` : 'none',
+                    boxShadow: isChecked ? `0 0 0 2px var(--seekora-primary-alpha, ${theme.colors.primary}33)` : 'none',
                     position: 'relative',
                 } }, isChecked && (React.createElement("span", { className: clsx(facetsTheme.colorSwatchInner), style: {
                     display: 'flex',
@@ -3518,21 +3794,204 @@ const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, rende
                     } }, "Show less"))))));
     };
     // -------------------------------------------------------------------
-    // Default facet renderer dispatcher
+    // Render-type detection for numeric / range facets
     // -------------------------------------------------------------------
-    const defaultRenderFacet = (facet, index) => {
-        switch (variant) {
-            case 'color-swatch':
-                return renderColorSwatchFacet(facet);
-            case 'collapsible':
-                return renderCollapsibleFacet(facet);
-            case 'checkbox':
-            default:
-                return renderCheckboxFacet(facet);
+    const determineFacetRenderType = (fieldName, stats) => {
+        // If explicit range config exists for this field → range buttons
+        if (facetRanges?.some((rc) => rc.field === fieldName)) {
+            return 'range-buttons';
         }
+        // If stats with valid min/max → range slider
+        if (stats && typeof stats.min === 'number' && typeof stats.max === 'number' && stats.min !== stats.max) {
+            return 'range-slider';
+        }
+        return 'list';
     };
     // -------------------------------------------------------------------
-    // Empty state
+    // Range button facet renderer
+    // -------------------------------------------------------------------
+    const renderRangeButtonFacet = (facet, _index) => {
+        const rangeConfig = facetRanges?.find((rc) => rc.field === facet.field);
+        if (!rangeConfig)
+            return null;
+        // Build a lookup from item value → count
+        const countMap = new Map();
+        facet.items.forEach((item) => countMap.set(item.value, item.count));
+        // Detect currently active range from refinements
+        const activeMin = refinements.find((r) => r.field === facet.field && r.value.startsWith('>='));
+        const activeMax = refinements.find((r) => r.field === facet.field && r.value.startsWith('<='));
+        const activeFromVal = activeMin ? parseFloat(activeMin.value.slice(2)) : undefined;
+        const activeToVal = activeMax ? parseFloat(activeMax.value.slice(2)) : undefined;
+        const isRangeActive = (range) => {
+            const fromMatch = range.from === undefined
+                ? activeFromVal === undefined
+                : activeFromVal === range.from;
+            const toMatch = range.to === undefined
+                ? activeToVal === undefined
+                : activeToVal === range.to;
+            return fromMatch && toMatch;
+        };
+        const handleRangeClick = (range) => {
+            // Clear existing range refinements for this field
+            refinements
+                .filter((r) => r.field === facet.field)
+                .forEach((r) => removeRefinement(facet.field, r.value, false));
+            if (isRangeActive(range)) {
+                // Was active → just clear (already removed above), trigger search
+                addRefinement(facet.field, '__noop__', false);
+                removeRefinement(facet.field, '__noop__', true);
+                return;
+            }
+            // Set new range
+            if (range.from !== undefined) {
+                addRefinement(facet.field, `>=${range.from}`, false);
+            }
+            if (range.to !== undefined) {
+                addRefinement(facet.field, `<=${range.to}`, true);
+            }
+            else if (range.from !== undefined) {
+                // Only "from" set — trigger search
+                addRefinement(facet.field, `>=${range.from}`, true);
+            }
+        };
+        const hasActiveRange = activeMin !== undefined || activeMax !== undefined;
+        const handleClear = () => {
+            refinements
+                .filter((r) => r.field === facet.field)
+                .forEach((r) => removeRefinement(facet.field, r.value, false));
+            // Trigger search after clearing
+            addRefinement(facet.field, '__noop__', false);
+            removeRefinement(facet.field, '__noop__', true);
+        };
+        return (React.createElement("div", { key: facet.field, className: facetsTheme.facet, style: {
+                marginBottom: theme.spacing.large,
+                padding: theme.spacing.medium,
+                backgroundColor: 'var(--seekora-facet-bg, ' + theme.colors.background + ')',
+                border: `1px solid var(--seekora-facet-border, ${theme.colors.border})`,
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+            } },
+            React.createElement("h3", { className: facetsTheme.facetTitle, style: {
+                    fontSize: theme.typography.fontSize.large,
+                    fontWeight: 'bold',
+                    margin: 0,
+                    marginBottom: theme.spacing.medium,
+                    color: theme.colors.text,
+                } }, facet.label || facet.field),
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: sizeScale.gap,
+                } }, rangeConfig.ranges.map((range) => {
+                const count = countMap.get(range.label) ?? 0;
+                const active = isRangeActive(range);
+                return (React.createElement("button", { key: range.label, type: "button", className: clsx(facetsTheme.rangeButton, active && facetsTheme.rangeButtonActive), disabled: count === 0 && !active, onClick: () => handleRangeClick(range), style: {
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: '0.35em',
+                        padding: `${sizeScale.padding} 0.75em`,
+                        fontSize: sizeScale.font,
+                        border: `1px solid ${active ? 'var(--seekora-primary, ' + theme.colors.primary + ')' : 'var(--seekora-facet-border, ' + theme.colors.border + ')'}`,
+                        borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.full,
+                        backgroundColor: active ? 'var(--seekora-primary, ' + theme.colors.primary + ')' : 'var(--seekora-facet-bg, ' + theme.colors.background + ')',
+                        color: active ? 'var(--seekora-primary-text, #fff)' : theme.colors.text,
+                        cursor: count === 0 && !active ? 'not-allowed' : 'pointer',
+                        opacity: count === 0 && !active ? 0.5 : 1,
+                        transition: 'all 0.2s ease',
+                    } },
+                    range.label,
+                    showCounts && (React.createElement("span", { className: clsx(facetsTheme.rangeButtonCount), style: {
+                            fontSize: theme.typography.fontSize.small,
+                            opacity: 0.8,
+                        } },
+                        "(",
+                        count,
+                        ")"))));
+            })),
+            hasActiveRange && (React.createElement("button", { type: "button", className: clsx(facetsTheme.rangeClear), onClick: handleClear, style: {
+                    marginTop: sizeScale.gap,
+                    padding: sizeScale.padding,
+                    border: 'none',
+                    backgroundColor: 'transparent',
+                    color: theme.colors.primary,
+                    cursor: 'pointer',
+                    fontSize: theme.typography.fontSize.small,
+                    textDecoration: 'underline',
+                } }, "Clear"))));
+    };
+    // -------------------------------------------------------------------
+    // Range slider facet renderer
+    // -------------------------------------------------------------------
+    const renderRangeSliderFacet = (facet, _index) => {
+        if (!facet.stats)
+            return null;
+        const { min: statsMin, max: statsMax } = facet.stats;
+        // Auto-detect formatting for common field names
+        const fieldLower = facet.field.toLowerCase();
+        const isPriceField = fieldLower.includes('price') || fieldLower.includes('cost') || fieldLower.includes('amount');
+        const formatValue = isPriceField
+            ? (v) => `$${v.toFixed(2)}`
+            : (v) => v.toString();
+        // Determine step: use 0.01 for price, 1 for integer ranges, 0.1 otherwise
+        const range = statsMax - statsMin;
+        const step = isPriceField ? 0.01 : range > 10 ? 1 : 0.1;
+        // Check if there's an active range refinement
+        const hasActiveRange = refinements.some((r) => r.field === facet.field && (r.value.startsWith('>=') || r.value.startsWith('<=')));
+        const handleClear = () => {
+            refinements
+                .filter((r) => r.field === facet.field && (r.value.startsWith('>=') || r.value.startsWith('<=')))
+                .forEach((r) => removeRefinement(facet.field, r.value, false));
+            // Trigger search after clearing
+            addRefinement(facet.field, '__noop__', false);
+            removeRefinement(facet.field, '__noop__', true);
+        };
+        return (React.createElement("div", { key: facet.field, className: facetsTheme.facet, style: {
+                marginBottom: theme.spacing.large,
+                padding: theme.spacing.medium,
+                backgroundColor: 'var(--seekora-facet-bg, ' + theme.colors.background + ')',
+                border: `1px solid var(--seekora-facet-border, ${theme.colors.border})`,
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+            } },
+            React.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: theme.spacing.small } },
+                React.createElement("h3", { className: facetsTheme.facetTitle, style: {
+                        fontSize: theme.typography.fontSize.large,
+                        fontWeight: 'bold',
+                        margin: 0,
+                        color: theme.colors.text,
+                    } }, facet.label || facet.field),
+                hasActiveRange && (React.createElement("button", { type: "button", className: clsx(facetsTheme.rangeClear), onClick: handleClear, style: {
+                        padding: '0.15em 0.5em',
+                        border: 'none',
+                        backgroundColor: 'transparent',
+                        color: theme.colors.primary,
+                        cursor: 'pointer',
+                        fontSize: theme.typography.fontSize.small,
+                        textDecoration: 'underline',
+                    } }, "Clear"))),
+            React.createElement(RangeSlider, { field: facet.field, min: statsMin, max: statsMax, step: step, formatValue: formatValue, syncWithState: true })));
+    };
+    // -------------------------------------------------------------------
+    // Default facet renderer dispatcher
+    // -------------------------------------------------------------------
+    const defaultRenderFacet = (facet, index) => {
+        const renderType = determineFacetRenderType(facet.field, facet.stats);
+        if (renderType === 'range-buttons') {
+            return renderRangeButtonFacet(facet);
+        }
+        if (renderType === 'range-slider') {
+            return renderRangeSliderFacet(facet);
+        }
+        switch (variant) {
+            case 'color-swatch':
+                return renderColorSwatchFacet(facet);
+            case 'collapsible':
+                return renderCollapsibleFacet(facet);
+            case 'checkbox':
+            default:
+                return renderCheckboxFacet(facet);
+        }
+    };
+    // -------------------------------------------------------------------
+    // Empty state
     // -------------------------------------------------------------------
     if (facets.length === 0) {
         log.verbose('Facets: No facets to display', {
@@ -3554,12 +4013,381 @@ const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, rende
     })));
 };
 
+/**
+ * FacetDropdown Component
+ *
+ * A dropdown component that displays facet values from a specific field
+ * and allows users to filter search results by selecting values.
+ *
+ * Can be used standalone (fetches its own data) or integrated with SearchProvider.
+ *
+ * @cssVariables
+ * Customize the dropdown appearance using CSS variables:
+ *
+ * Button:
+ * - `--facet-dropdown-button-bg`: Button background color
+ * - `--facet-dropdown-text`: Button text color
+ * - `--facet-dropdown-border`: Button and panel border color
+ * - `--facet-dropdown-font-size`: Button font size (default: 0.875rem)
+ * - `--facet-dropdown-font-weight`: Button font weight (default: 500)
+ *
+ * Dropdown Panel:
+ * - `--facet-dropdown-bg`: Panel background color
+ * - `--facet-dropdown-shadow`: Panel box shadow
+ *
+ * Options:
+ * - `--facet-dropdown-option-text`: Option text color
+ * - `--facet-dropdown-option-font-size`: Option font size (default: 0.875rem)
+ * - `--facet-dropdown-option-font-weight-active`: Active option font weight (default: 500)
+ * - `--facet-dropdown-option-active-bg`: Active option background color
+ *
+ * Count Badge:
+ * - `--facet-dropdown-count-text`: Count text color
+ * - `--facet-dropdown-count-font-size`: Count font size (default: 0.75rem)
+ *
+ * Scrollbar:
+ * - `--facet-dropdown-scrollbar-thumb`: Scrollbar thumb color
+ * - `--facet-dropdown-scrollbar-thumb-hover`: Scrollbar thumb hover color
+ *
+ * @example
+ * ```tsx
+ * <FacetDropdown
+ *   field="category"
+ *   placeholder="All Categories"
+ *   applyFilter={true}
+ *   showCounts={true}
+ * />
+ * ```
+ */
+// Z-index scale for consistent layering
+// SearchOverlay uses z-100, so dropdown must be higher
+const Z_INDEX$1 = {
+    dropdown: 150};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+const FacetDropdown = ({ field, placeholder = 'All Categories', className, theme: customTheme = {}, onChange, value: controlledValue, maxOptions = 10, showCounts = true, options: providedOptions, client: providedClient, applyFilter = true, navigateOnSelect = false, searchPageUrl = '/search', }) => {
+    const { client: contextClient, theme } = useSearchContext();
+    const { addRefinement, removeRefinement, refinements, search } = useSearchState();
+    const client = providedClient || contextClient;
+    const [open, setOpen] = React.useState(false);
+    const [facetOptions, setFacetOptions] = React.useState(providedOptions || []);
+    const [internalValue, setInternalValue] = React.useState(controlledValue || '');
+    const [dropdownPosition, setDropdownPosition] = React.useState(null);
+    const dropdownRef = React.useRef(null);
+    const buttonRef = React.useRef(null);
+    // Determine the current value (controlled or uncontrolled)
+    const currentValue = controlledValue !== undefined ? controlledValue : internalValue;
+    // ---------------------------------------------------------------------------
+    // Fetch facet values
+    // ---------------------------------------------------------------------------
+    const fetchFacetValues = React.useCallback(async () => {
+        if (providedOptions || !client)
+            return;
+        try {
+            log.verbose('FacetDropdown: Fetching facet values', { field });
+            // Perform a search with facet_by parameter to get facet counts
+            const response = await client.search('*', {
+                facet_by: field,
+                max_facet_values: 100,
+                per_page: 0, // We only need facets, not results
+            });
+            log.verbose('FacetDropdown: Search response', { response });
+            // Extract facet counts from the response
+            const facetsData = response?.data?.facets || response?.facets;
+            const facets = Array.isArray(facetsData) ? facetsData : [];
+            const targetFacet = facets.find((f) => f.field_name === field || f.field === field);
+            if (targetFacet && targetFacet.counts) {
+                const options = targetFacet.counts.map((count) => ({
+                    value: count.value,
+                    count: count.count,
+                    label: count.value,
+                }));
+                setFacetOptions(options);
+                log.verbose('FacetDropdown: Facet options loaded', { field, count: options.length });
+            }
+            else {
+                log.verbose('FacetDropdown: No facet data found', { field, facets });
+                setFacetOptions([]);
+            }
+        }
+        catch (error) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            log.error('FacetDropdown: Error fetching facet values', {
+                field,
+                error: err.message,
+            });
+            setFacetOptions([]);
+        }
+    }, [field, client, providedOptions]);
+    React.useEffect(() => {
+        if (!providedOptions && client) {
+            fetchFacetValues();
+        }
+    }, [fetchFacetValues, providedOptions, client]);
+    // ---------------------------------------------------------------------------
+    // Calculate dropdown position when opened
+    // ---------------------------------------------------------------------------
+    React.useEffect(() => {
+        if (!open || !buttonRef.current)
+            return;
+        const updatePosition = () => {
+            if (!buttonRef.current)
+                return;
+            const rect = buttonRef.current.getBoundingClientRect();
+            setDropdownPosition({
+                top: rect.bottom + window.scrollY + 4,
+                left: rect.left + window.scrollX,
+                width: rect.width,
+            });
+        };
+        updatePosition();
+        window.addEventListener('scroll', updatePosition, true);
+        window.addEventListener('resize', updatePosition);
+        return () => {
+            window.removeEventListener('scroll', updatePosition, true);
+            window.removeEventListener('resize', updatePosition);
+        };
+    }, [open]);
+    // ---------------------------------------------------------------------------
+    // Click outside handler
+    // ---------------------------------------------------------------------------
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const handleClickOutside = (e) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(e.target) &&
+                buttonRef.current &&
+                !buttonRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('keydown', handleEscape);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [open]);
+    // ---------------------------------------------------------------------------
+    // Selection handler
+    // ---------------------------------------------------------------------------
+    const handleSelect = React.useCallback((value) => {
+        log.verbose('FacetDropdown: Value selected', { field, value });
+        // Update internal state
+        setInternalValue(value);
+        setOpen(false);
+        // Call onChange callback
+        if (onChange) {
+            onChange(value);
+        }
+        // Apply filter if enabled and we have search state
+        if (applyFilter && addRefinement && removeRefinement) {
+            // Remove any existing refinement for this field
+            const existingRefinement = refinements.find(r => r.field === field);
+            if (existingRefinement) {
+                removeRefinement(field, existingRefinement.value, false);
+            }
+            // Add new refinement if value is not empty
+            if (value) {
+                addRefinement(field, value, true); // true = trigger search
+            }
+            else if (search) {
+                // If clearing the filter, trigger search manually
+                search();
+            }
+        }
+        // Navigate to search page if enabled
+        if (navigateOnSelect && value && typeof window !== 'undefined') {
+            const url = new URL(window.location.origin + searchPageUrl);
+            url.searchParams.set(field, value);
+            window.location.href = url.toString();
+        }
+    }, [field, onChange, applyFilter, addRefinement, removeRefinement, refinements, search, navigateOnSelect, searchPageUrl]);
+    // ---------------------------------------------------------------------------
+    // Render
+    // ---------------------------------------------------------------------------
+    const displayLabel = currentValue || placeholder;
+    const hasOptions = facetOptions.length > 0;
+    const buttonClass = [
+        'facet-dropdown-button',
+        customTheme.button,
+        className,
+        open && customTheme.buttonOpen,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Render dropdown panel via portal
+    const renderDropdown = () => {
+        if (!open || !hasOptions || !dropdownPosition || typeof document === 'undefined') {
+            return null;
+        }
+        const dropdown = (React.createElement("div", { ref: dropdownRef, className: customTheme.panel || 'facet-dropdown-panel', role: "listbox", "aria-label": `${field} options`, style: {
+                position: 'absolute',
+                top: `${dropdownPosition.top}px`,
+                left: `${dropdownPosition.left}px`,
+                minWidth: `${dropdownPosition.width}px`,
+                width: 'max-content',
+                maxWidth: 'min(24rem, 90vw)',
+                maxHeight: `calc(100vh - 100px)`,
+                overflowY: 'auto',
+                overflowX: 'hidden',
+                backgroundColor: 'var(--facet-dropdown-bg, var(--background))',
+                border: '1px solid var(--facet-dropdown-border, var(--border-color))',
+                borderRadius: theme?.borderRadius && typeof theme.borderRadius !== 'string'
+                    ? theme.borderRadius.medium
+                    : '0.5rem',
+                boxShadow: 'var(--facet-dropdown-shadow, var(--shadow-lg))',
+                zIndex: Z_INDEX$1.dropdown,
+                padding: '0.25rem',
+            } },
+            React.createElement("button", { type: "button", role: "option", "aria-selected": !currentValue, onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleSelect('');
+                }, className: [
+                    customTheme.option,
+                    !currentValue && customTheme.optionActive,
+                ]
+                    .filter(Boolean)
+                    .join(' '), style: {
+                    width: '100%',
+                    textAlign: 'left',
+                    padding: '0.5rem 0.75rem',
+                    fontSize: 'var(--facet-dropdown-option-font-size, 0.875rem)',
+                    fontWeight: !currentValue ? 'var(--facet-dropdown-option-font-weight-active, 500)' : 'normal',
+                    color: 'var(--facet-dropdown-option-text, var(--text-color, currentColor))',
+                    backgroundColor: !currentValue ? 'var(--facet-dropdown-option-active-bg, var(--hover-color))' : 'transparent',
+                    border: 'none',
+                    borderRadius: theme?.borderRadius && typeof theme.borderRadius !== 'string'
+                        ? theme.borderRadius.small
+                        : '0.25rem',
+                    cursor: 'pointer',
+                    transition: 'background-color 0.15s ease',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                } },
+                React.createElement("span", null, placeholder)),
+            facetOptions.map((option) => {
+                const isActive = currentValue === option.value;
+                return (React.createElement("button", { key: option.value, type: "button", role: "option", "aria-selected": isActive, onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleSelect(option.value);
+                    }, className: [
+                        customTheme.option,
+                        isActive && customTheme.optionActive,
+                    ]
+                        .filter(Boolean)
+                        .join(' '), style: {
+                        width: '100%',
+                        textAlign: 'left',
+                        padding: '0.5rem 0.75rem',
+                        fontSize: 'var(--facet-dropdown-option-font-size, 0.875rem)',
+                        fontWeight: isActive ? 'var(--facet-dropdown-option-font-weight-active, 500)' : 'normal',
+                        color: 'var(--facet-dropdown-option-text, var(--text-color, currentColor))',
+                        backgroundColor: isActive ? 'var(--facet-dropdown-option-active-bg, var(--hover-color))' : 'transparent',
+                        border: 'none',
+                        borderRadius: theme?.borderRadius && typeof theme.borderRadius !== 'string'
+                            ? theme.borderRadius.small
+                            : '0.25rem',
+                        cursor: 'pointer',
+                        transition: 'background-color 0.15s ease',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                    } },
+                    React.createElement("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' } }, option.label || option.value),
+                    showCounts && (React.createElement("span", { style: {
+                            fontSize: 'var(--facet-dropdown-count-font-size, 0.75rem)',
+                            color: 'var(--facet-dropdown-count-text, var(--text-secondary, currentColor))',
+                            opacity: 0.7,
+                            marginLeft: '0.5rem',
+                            flexShrink: 0,
+                        } },
+                        "(",
+                        option.count,
+                        ")"))));
+            })));
+        return reactDom.createPortal(dropdown, document.body);
+    };
+    return (React.createElement("div", { className: "facet-dropdown-container", style: { position: 'relative' } },
+        React.createElement("style", { dangerouslySetInnerHTML: {
+                __html: `
+          .facet-dropdown-panel {
+            --scrollbar-track: transparent;
+            --scrollbar-thumb: var(--facet-dropdown-scrollbar-thumb, var(--border-color));
+            --scrollbar-thumb-hover: var(--facet-dropdown-scrollbar-thumb-hover, var(--text-secondary));
+          }
+          .facet-dropdown-panel::-webkit-scrollbar {
+            width: 6px;
+          }
+          .facet-dropdown-panel::-webkit-scrollbar-track {
+            background: var(--scrollbar-track);
+          }
+          .facet-dropdown-panel::-webkit-scrollbar-thumb {
+            background: var(--scrollbar-thumb);
+            border-radius: 3px;
+          }
+          .facet-dropdown-panel::-webkit-scrollbar-thumb:hover {
+            background: var(--scrollbar-thumb-hover);
+          }
+          .facet-dropdown-panel {
+            scrollbar-width: thin;
+            scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+          }
+        `
+            } }),
+        React.createElement("button", { ref: buttonRef, type: "button", onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setOpen(prev => !prev);
+            }, className: buttonClass, "aria-label": `Filter by ${field}`, "aria-expanded": open, "aria-haspopup": "listbox", style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.375rem',
+                padding: '0.625rem 0.75rem',
+                fontSize: 'var(--facet-dropdown-font-size, 0.875rem)',
+                fontWeight: 'var(--facet-dropdown-font-weight, 500)',
+                color: 'var(--facet-dropdown-text, var(--text-color, currentColor))',
+                backgroundColor: 'var(--facet-dropdown-button-bg, var(--background, transparent))',
+                border: '1px solid var(--facet-dropdown-border, var(--border-color))',
+                borderRadius: theme?.borderRadius && typeof theme.borderRadius !== 'string'
+                    ? theme.borderRadius.medium
+                    : '0.5rem',
+                cursor: 'pointer',
+                transition: 'all 0.2s ease',
+                outline: 'none',
+                whiteSpace: 'nowrap',
+                minWidth: '8rem',
+                ...(!hasOptions && { opacity: 0.6, cursor: 'not-allowed' }),
+            }, disabled: !hasOptions },
+            React.createElement("span", { style: { flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis' } }, displayLabel),
+            React.createElement("svg", { className: customTheme.caretIcon, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
+                    transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
+                    transition: 'transform 0.2s ease',
+                    flexShrink: 0,
+                }, "aria-hidden": "true" },
+                React.createElement("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))),
+        renderDropdown()));
+};
+
 /**
  * CurrentRefinements Component
  *
  * Displays currently active filters/refinements with ability to clear them.
  * Supports StateManager auto-sync, display variants, layout modes, and animations.
  */
+const TRANSITIONS$7 = {
+    fast: '150ms ease-in-out',
+    normal: '200ms ease-in-out'};
 /** Get variant-specific styles */
 const getVariantStyles = (variant, themeColors, themeSpacing, themeBorderRadius, fieldColor) => {
     const baseBg = fieldColor || `var(--seekora-refinement-bg, ${themeColors.hover})`;
@@ -3643,10 +4471,59 @@ const CurrentRefinements = ({ refinements: refinementsProp, onRefinementClear, o
     const { theme } = useSearchContext();
     const { refinements: stateRefinements, removeRefinement, clearRefinements } = useSearchState();
     const refinementsTheme = customTheme || {};
+    // Format a numeric value for display (auto-detect price fields)
+    const formatRangeValue = (field, val) => {
+        const f = field.toLowerCase();
+        if (f.includes('price') || f.includes('cost') || f.includes('amount')) {
+            return `$${val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+        }
+        return val.toLocaleString();
+    };
+    // Create a stable serialized key from stateRefinements to detect actual changes
+    // (needed because state manager mutates the array in place)
+    const stateRefinementsKey = React.useMemo(() => stateRefinements.map(r => `${r.field}:${r.value}`).sort().join('|'), [stateRefinements.map(r => `${r.field}:${r.value}`).sort().join('|')]);
     // Use props if provided, otherwise auto-read from StateManager
-    const refinements = refinementsProp !== undefined
-        ? refinementsProp
-        : stateRefinements.map(r => ({ field: r.field, value: r.value }));
+    // Combines >= / <= range refinements into single formatted pills
+    const refinements = React.useMemo(() => {
+        if (refinementsProp !== undefined) {
+            return refinementsProp;
+        }
+        const rangeMap = new Map();
+        const nonRange = [];
+        stateRefinements.forEach(r => {
+            const minMatch = r.value.match(/^>=(\d+(?:\.\d+)?)$/);
+            const maxMatch = r.value.match(/^<=(\d+(?:\.\d+)?)$/);
+            if (minMatch || maxMatch) {
+                if (!rangeMap.has(r.field))
+                    rangeMap.set(r.field, {});
+                const entry = rangeMap.get(r.field);
+                if (minMatch)
+                    entry.minVal = parseFloat(minMatch[1]);
+                if (maxMatch)
+                    entry.maxVal = parseFloat(maxMatch[1]);
+            }
+            else {
+                nonRange.push({ field: r.field, value: r.value });
+            }
+        });
+        rangeMap.forEach((range, field) => {
+            let displayValue;
+            if (range.minVal !== undefined && range.maxVal !== undefined) {
+                displayValue = `${formatRangeValue(field, range.minVal)} – ${formatRangeValue(field, range.maxVal)}`;
+            }
+            else if (range.minVal !== undefined) {
+                displayValue = `≥ ${formatRangeValue(field, range.minVal)}`;
+            }
+            else if (range.maxVal !== undefined) {
+                displayValue = `≤ ${formatRangeValue(field, range.maxVal)}`;
+            }
+            else {
+                return;
+            }
+            nonRange.push({ field, value: '__range__', displayValue });
+        });
+        return nonRange;
+    }, [refinementsProp, stateRefinementsKey]);
     // Track items for entry/exit animations
     const [visibleItems, setVisibleItems] = React.useState(new Set());
     const [exitingItems, setExitingItems] = React.useState(new Set());
@@ -3670,9 +4547,15 @@ const CurrentRefinements = ({ refinements: refinementsProp, onRefinementClear, o
         prevRefinementsRef.current = [...refinements];
     }, [refinements]);
     const handleClear = (field, value) => {
-        // If synced with StateManager and no prop provided, auto-clear via StateManager
         if (refinementsProp === undefined) {
-            removeRefinement(field, value);
+            if (value === '__range__') {
+                // Clear all range refinements for this field
+                const rangeRefs = stateRefinements.filter(r => r.field === field && (/^>=/.test(r.value) || /^<=/.test(r.value)));
+                rangeRefs.forEach((r, i) => removeRefinement(field, r.value, i === rangeRefs.length - 1));
+            }
+            else {
+                removeRefinement(field, value);
+            }
         }
         if (onRefinementClear) {
             onRefinementClear(field, value);
@@ -3699,7 +4582,7 @@ const CurrentRefinements = ({ refinements: refinementsProp, onRefinementClear, o
                 margin: layout === 'vertical'
                     ? `0 0 ${theme.spacing.small} 0`
                     : `0 ${theme.spacing.small} ${theme.spacing.small} 0`,
-                transition: 'all 200ms ease-in-out',
+                transition: `all ${TRANSITIONS$7.normal}`,
                 opacity: exitingItems.has(key) ? 0 : 1,
                 transform: exitingItems.has(key) ? 'scale(0.8)' : 'scale(1)',
                 animation: isEntering ? 'seekoraChipIn 200ms ease-out' : undefined,
@@ -3723,7 +4606,7 @@ const CurrentRefinements = ({ refinements: refinementsProp, onRefinementClear, o
                     alignItems: 'center',
                     justifyContent: 'center',
                     borderRadius: '50%',
-                    transition: 'opacity 150ms ease-in-out',
+                    transition: `opacity ${TRANSITIONS$7.fast}`,
                     opacity: 0.6,
                 }, "aria-label": `Clear ${refinement.label || refinement.field}: ${refinement.value}`, onMouseEnter: e => (e.currentTarget.style.opacity = '1'), onMouseLeave: e => (e.currentTarget.style.opacity = '0.6') }, renderCloseIcon ? renderCloseIcon() : defaultCloseIcon())));
     };
@@ -3782,7 +4665,7 @@ const CurrentRefinements = ({ refinements: refinementsProp, onRefinementClear, o
                 cursor: 'pointer',
                 fontSize: theme.typography.fontSize.small,
                 textDecoration: 'underline',
-                transition: 'background-color 150ms ease-in-out',
+                transition: `background-color ${TRANSITIONS$7.fast}`,
             } }, "Clear all filters"))));
 };
 
@@ -3884,6 +4767,8 @@ const SearchLayout = ({ sidebar, children, header, footer, sidebarWidth = '300px
             display: 'flex',
             flexDirection: 'column',
             minHeight: '100vh',
+            width: '100%',
+            maxWidth: '100%',
             backgroundColor: theme.colors.background,
             ...style,
         } },
@@ -3895,20 +4780,27 @@ const SearchLayout = ({ sidebar, children, header, footer, sidebarWidth = '300px
         React.createElement("div", { style: {
                 display: 'flex',
                 flex: 1,
+                width: '100%',
+                maxWidth: '100%',
                 gap: theme.spacing.large,
                 padding: theme.spacing.medium,
                 backgroundColor: theme.colors.background,
                 color: theme.colors.text,
+                overflow: 'hidden',
             } },
             sidebar && (!isMobile || showSidebarOnMobile) && (React.createElement("aside", { className: layoutTheme.sidebar, style: {
                     width: sidebarWidth,
                     minWidth: sidebarWidth,
+                    flexShrink: 0,
                 } }, sidebar)),
             React.createElement("main", { className: layoutTheme.main, style: {
                     flex: 1,
-                    minWidth: 0, // Prevents flex item from overflowing
+                    minWidth: 0,
+                    width: '100%',
+                    maxWidth: '100%',
                     backgroundColor: theme.colors.background,
                     color: theme.colors.text,
+                    overflow: 'auto',
                 } }, children)),
         footer && (React.createElement("footer", { className: layoutTheme.footer, style: {
                 padding: theme.spacing.medium,
@@ -3950,11 +4842,11 @@ const RangeInput = ({ field, label, min, max, currentMin: currentMinProp, curren
     const { refinements, addRefinement, removeRefinement } = useSearchState();
     const rangeInputTheme = customTheme || {};
     // Parse current range from StateManager
-    const stateRange = React.useMemo(() => {
-        if (!syncWithState)
-            return { min: undefined, max: undefined };
-        return parseRangeFromRefinements(refinements, field);
-    }, [syncWithState, refinements, field]);
+    // NOTE: computed every render (no useMemo) because the state manager mutates
+    // the refinements array in place — the reference never changes.
+    const stateRange = !syncWithState
+        ? { min: undefined, max: undefined }
+        : parseRangeFromRefinements(refinements, field);
     const [internalMin, setInternalMin] = React.useState(currentMinProp ?? stateRange.min);
     const [internalMax, setInternalMax] = React.useState(currentMaxProp ?? stateRange.max);
     const [appliedMin, setAppliedMin] = React.useState(currentMinProp ?? stateRange.min);
@@ -4717,311 +5609,78 @@ const HierarchicalMenu = ({ attributes, separator = ' > ', limit = 10, showMore
                             const button = parentItem.querySelector(':scope > button');
                             if (button)
                                 button.focus();
-                            else
-                                parentItem.focus();
-                        }
-                    }
-                }
-                break;
-            }
-            case 'Enter': {
-                if (!currentItem)
-                    break;
-                e.preventDefault();
-                const button = currentItem.querySelector('button');
-                if (button)
-                    button.click();
-                break;
-            }
-        }
-    }, [getVisibleTreeItems]);
-    // Render a level of the hierarchy
-    const renderLevel = (items, level) => {
-        if (!items || items.length === 0)
-            return null;
-        const isExpanded = expanded[level] || false;
-        const displayLimit = isExpanded ? showMoreLimit : limit;
-        const displayItems = items.slice(0, displayLimit);
-        const hasMore = items.length > displayLimit;
-        return (React.createElement("ul", { role: level === 0 ? 'tree' : 'group', className: hierarchicalTheme.list, style: {
-                listStyle: 'none',
-                margin: 0,
-                padding: level > 0 ? `0 0 0 ${theme.spacing.medium}` : 0,
-            } },
-            displayItems.map((item, index) => (React.createElement("li", { key: item.value, role: "treeitem", ...(item.data && item.data.length > 0
-                    ? { 'aria-expanded': !!item.isRefined }
-                    : {}), className: clsx(hierarchicalTheme.item, item.isRefined && hierarchicalTheme.itemSelected, item.data && item.data.length > 0 && hierarchicalTheme.itemParent), style: {
-                    padding: `${theme.spacing.small} 0`,
-                } }, renderItem ? (renderItem(item, level)) : (React.createElement(React.Fragment, null,
-                React.createElement("button", { type: "button", onClick: () => handleItemClick(item, level), className: hierarchicalTheme.link, style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: theme.spacing.small,
-                        width: '100%',
-                        padding: 0,
-                        background: 'none',
-                        border: 'none',
-                        cursor: 'pointer',
-                        textAlign: 'left',
-                        fontFamily: 'inherit',
-                        fontSize: theme.typography.fontSize.small,
-                        color: item.isRefined ? theme.colors.primary : theme.colors.text,
-                        fontWeight: item.isRefined ? 600 : 400,
-                    } },
-                    React.createElement("span", { className: hierarchicalTheme.label, style: { flex: 1 } }, item.label),
-                    item.count !== undefined && (React.createElement("span", { className: hierarchicalTheme.count, style: {
-                            color: theme.colors.textSecondary,
-                            fontSize: theme.typography.fontSize.small,
-                        } }, item.count))),
-                item.isRefined && item.data && item.data.length > 0 && (renderLevel(item.data, level + 1))))))),
-            showMore && hasMore && (React.createElement("li", null,
-                React.createElement("button", { type: "button", onClick: () => toggleShowMore(level), className: hierarchicalTheme.showMore, style: {
-                        padding: `${theme.spacing.small} 0`,
-                        background: 'none',
-                        border: 'none',
-                        cursor: 'pointer',
-                        fontSize: theme.typography.fontSize.small,
-                        color: theme.colors.primary,
-                        textDecoration: 'underline',
-                    } }, isExpanded ? 'Show less' : `Show ${items.length - displayLimit} more`)))));
-    };
-    if (processedItems.length === 0) {
-        return null;
-    }
-    return (React.createElement("div", { ref: containerRef, className: clsx(hierarchicalTheme.root, className), style: style, tabIndex: 0, onKeyDown: handleKeyDown }, renderLevel(processedItems, 0)));
-};
-
-/**
- * RangeSlider Component
- *
- * Visual slider for numeric range filtering
- * Alternative to RangeInput for a more interactive UX
- */
-const RangeSlider = ({ field, label, min, max, step = 1, currentMin: currentMinProp, currentMax: currentMaxProp, onRangeChange, formatValue = (v) => v.toString(), className, style, theme: customTheme, showValues = true, syncWithState = true, debounceMs = 300, }) => {
-    const { theme } = useSearchContext();
-    const { refinements, addRefinement, removeRefinement } = useSearchState();
-    const rangeSliderTheme = customTheme || {};
-    // Parse current range from StateManager
-    const stateRange = React.useMemo(() => {
-        if (!syncWithState)
-            return { min: undefined, max: undefined };
-        let minVal;
-        let maxVal;
-        refinements.forEach(r => {
-            if (r.field === field) {
-                const minMatch = r.value.match(/^>=(\d+(?:\.\d+)?)$/);
-                if (minMatch)
-                    minVal = parseFloat(minMatch[1]);
-                const maxMatch = r.value.match(/^<=(\d+(?:\.\d+)?)$/);
-                if (maxMatch)
-                    maxVal = parseFloat(maxMatch[1]);
-            }
-        });
-        return { min: minVal, max: maxVal };
-    }, [syncWithState, refinements, field]);
-    const [internalMin, setInternalMin] = React.useState(currentMinProp ?? stateRange.min ?? min);
-    const [internalMax, setInternalMax] = React.useState(currentMaxProp ?? stateRange.max ?? max);
-    const [isDragging, setIsDragging] = React.useState(false);
-    const debounceRef = React.useRef(null);
-    // Sync with StateManager changes
-    React.useEffect(() => {
-        if (syncWithState && !isDragging) {
-            if (stateRange.min !== undefined)
-                setInternalMin(stateRange.min);
-            else
-                setInternalMin(min);
-            if (stateRange.max !== undefined)
-                setInternalMax(stateRange.max);
-            else
-                setInternalMax(max);
-        }
-    }, [syncWithState, stateRange.min, stateRange.max, isDragging, min, max]);
-    // Update StateManager with range refinements
-    const updateStateManager = React.useCallback((minVal, maxVal) => {
-        if (!syncWithState)
-            return;
-        // Remove existing range refinements for this field
-        refinements.forEach(r => {
-            if (r.field === field) {
-                removeRefinement(field, r.value, false);
-            }
-        });
-        // Add new range refinements
-        if (minVal > min) {
-            addRefinement(field, `>=${minVal}`, false);
-        }
-        if (maxVal < max) {
-            addRefinement(field, `<=${maxVal}`, minVal <= min); // Trigger search if only max is set
-        }
-        if (minVal > min && maxVal >= max) {
-            // Trigger search after setting min
-            addRefinement(field, `>=${minVal}`, true);
-        }
-    }, [syncWithState, field, refinements, addRefinement, removeRefinement, min, max]);
-    // Debounced update
-    const debouncedUpdate = React.useCallback((minVal, maxVal) => {
-        if (debounceRef.current) {
-            clearTimeout(debounceRef.current);
-        }
-        debounceRef.current = setTimeout(() => {
-            updateStateManager(minVal, maxVal);
-            if (onRangeChange) {
-                onRangeChange(minVal, maxVal);
-            }
-        }, debounceMs);
-    }, [updateStateManager, onRangeChange, debounceMs]);
-    // Handle min slider change
-    const handleMinChange = (e) => {
-        const value = Math.min(Number(e.target.value), internalMax - step);
-        setInternalMin(value);
-        setIsDragging(true);
-        debouncedUpdate(value, internalMax);
-    };
-    // Handle max slider change
-    const handleMaxChange = (e) => {
-        const value = Math.max(Number(e.target.value), internalMin + step);
-        setInternalMax(value);
-        setIsDragging(true);
-        debouncedUpdate(internalMin, value);
-    };
-    // Handle drag end
-    const handleDragEnd = () => {
-        setIsDragging(false);
-    };
-    // Handle keyboard navigation for enhanced control (Shift+Arrow for 10x step, Home/End)
-    const handleMinKeyDown = (e) => {
-        let newValue = null;
-        if (e.key === 'Home') {
-            e.preventDefault();
-            newValue = min;
-        }
-        else if (e.key === 'End') {
-            e.preventDefault();
-            newValue = internalMax - step;
-        }
-        else if (e.shiftKey && (e.key === 'ArrowLeft' || e.key === 'ArrowDown')) {
-            e.preventDefault();
-            newValue = Math.max(min, internalMin - step * 10);
-        }
-        else if (e.shiftKey && (e.key === 'ArrowRight' || e.key === 'ArrowUp')) {
-            e.preventDefault();
-            newValue = Math.min(internalMax - step, internalMin + step * 10);
-        }
-        if (newValue !== null) {
-            setInternalMin(newValue);
-            debouncedUpdate(newValue, internalMax);
-        }
-    };
-    const handleMaxKeyDown = (e) => {
-        let newValue = null;
-        if (e.key === 'Home') {
-            e.preventDefault();
-            newValue = internalMin + step;
-        }
-        else if (e.key === 'End') {
-            e.preventDefault();
-            newValue = max;
-        }
-        else if (e.shiftKey && (e.key === 'ArrowLeft' || e.key === 'ArrowDown')) {
-            e.preventDefault();
-            newValue = Math.max(internalMin + step, internalMax - step * 10);
-        }
-        else if (e.shiftKey && (e.key === 'ArrowRight' || e.key === 'ArrowUp')) {
-            e.preventDefault();
-            newValue = Math.min(max, internalMax + step * 10);
-        }
-        if (newValue !== null) {
-            setInternalMax(newValue);
-            debouncedUpdate(internalMin, newValue);
+                            else
+                                parentItem.focus();
+                        }
+                    }
+                }
+                break;
+            }
+            case 'Enter': {
+                if (!currentItem)
+                    break;
+                e.preventDefault();
+                const button = currentItem.querySelector('button');
+                if (button)
+                    button.click();
+                break;
+            }
         }
-    };
-    // Calculate filled track position
-    const minPercent = ((internalMin - min) / (max - min)) * 100;
-    const maxPercent = ((internalMax - min) / (max - min)) * 100;
-    return (React.createElement("div", { className: clsx(rangeSliderTheme.root, className), style: {
-            fontFamily: 'inherit',
-            ...style,
-        } },
-        label && (React.createElement("label", { className: rangeSliderTheme.label, style: {
-                display: 'block',
-                marginBottom: theme.spacing.small,
-                fontSize: theme.typography.fontSize.medium,
-                fontWeight: theme.typography.fontWeight?.medium || 500,
-                color: theme.colors.text,
-            } }, label)),
-        React.createElement("div", { className: rangeSliderTheme.slider, style: {
-                position: 'relative',
-                height: '40px',
-                display: 'flex',
-                alignItems: 'center',
-            } },
-            React.createElement("div", { className: rangeSliderTheme.track, style: {
-                    position: 'absolute',
-                    width: '100%',
-                    height: '4px',
-                    backgroundColor: theme.colors.border,
-                    borderRadius: '2px',
-                } }),
-            React.createElement("div", { className: rangeSliderTheme.trackFilled, style: {
-                    position: 'absolute',
-                    left: `${minPercent}%`,
-                    width: `${maxPercent - minPercent}%`,
-                    height: '4px',
-                    backgroundColor: theme.colors.primary,
-                    borderRadius: '2px',
-                } }),
-            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMin, onChange: handleMinChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, onKeyDown: handleMinKeyDown, tabIndex: 0, "aria-valuenow": internalMin, "aria-valuemin": min, "aria-valuemax": max, className: rangeSliderTheme.thumb, style: {
-                    position: 'absolute',
-                    width: '100%',
-                    height: '4px',
-                    background: 'transparent',
-                    WebkitAppearance: 'none',
-                    appearance: 'none',
-                    cursor: 'pointer',
-                    pointerEvents: 'none',
-                }, "aria-label": `Minimum ${label || field}` }),
-            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMax, onChange: handleMaxChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, onKeyDown: handleMaxKeyDown, tabIndex: 0, "aria-valuenow": internalMax, "aria-valuemin": min, "aria-valuemax": max, className: rangeSliderTheme.thumb, style: {
-                    position: 'absolute',
-                    width: '100%',
-                    height: '4px',
-                    background: 'transparent',
-                    WebkitAppearance: 'none',
-                    appearance: 'none',
-                    cursor: 'pointer',
-                    pointerEvents: 'none',
-                }, "aria-label": `Maximum ${label || field}` })),
-        showValues && (React.createElement("div", { className: rangeSliderTheme.values, style: {
-                display: 'flex',
-                justifyContent: 'space-between',
-                marginTop: theme.spacing.small,
-                fontSize: theme.typography.fontSize.small,
-                color: theme.colors.textSecondary,
+    }, [getVisibleTreeItems]);
+    // Render a level of the hierarchy
+    const renderLevel = (items, level) => {
+        if (!items || items.length === 0)
+            return null;
+        const isExpanded = expanded[level] || false;
+        const displayLimit = isExpanded ? showMoreLimit : limit;
+        const displayItems = items.slice(0, displayLimit);
+        const hasMore = items.length > displayLimit;
+        return (React.createElement("ul", { role: level === 0 ? 'tree' : 'group', className: hierarchicalTheme.list, style: {
+                listStyle: 'none',
+                margin: 0,
+                padding: level > 0 ? `0 0 0 ${theme.spacing.medium}` : 0,
             } },
-            React.createElement("span", { className: rangeSliderTheme.value }, formatValue(internalMin)),
-            React.createElement("span", { className: rangeSliderTheme.value }, formatValue(internalMax)))),
-        React.createElement("style", null, `
-        .${rangeSliderTheme.thumb || 'seekora-range-slider__thumb'}::-webkit-slider-thumb {
-          -webkit-appearance: none;
-          appearance: none;
-          width: 20px;
-          height: 20px;
-          background: ${theme.colors.primary};
-          border-radius: 50%;
-          cursor: pointer;
-          pointer-events: all;
-          box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-        }
-        .${rangeSliderTheme.thumb || 'seekora-range-slider__thumb'}::-moz-range-thumb {
-          width: 20px;
-          height: 20px;
-          background: ${theme.colors.primary};
-          border-radius: 50%;
-          cursor: pointer;
-          pointer-events: all;
-          border: none;
-          box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-        }
-      `)));
+            displayItems.map((item, index) => (React.createElement("li", { key: item.value, role: "treeitem", ...(item.data && item.data.length > 0
+                    ? { 'aria-expanded': !!item.isRefined }
+                    : {}), className: clsx(hierarchicalTheme.item, item.isRefined && hierarchicalTheme.itemSelected, item.data && item.data.length > 0 && hierarchicalTheme.itemParent), style: {
+                    padding: `${theme.spacing.small} 0`,
+                } }, renderItem ? (renderItem(item, level)) : (React.createElement(React.Fragment, null,
+                React.createElement("button", { type: "button", onClick: () => handleItemClick(item, level), className: hierarchicalTheme.link, style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: theme.spacing.small,
+                        width: '100%',
+                        padding: 0,
+                        background: 'none',
+                        border: 'none',
+                        cursor: 'pointer',
+                        textAlign: 'left',
+                        fontFamily: 'inherit',
+                        fontSize: theme.typography.fontSize.small,
+                        color: item.isRefined ? theme.colors.primary : theme.colors.text,
+                        fontWeight: item.isRefined ? 600 : 400,
+                    } },
+                    React.createElement("span", { className: hierarchicalTheme.label, style: { flex: 1 } }, item.label),
+                    item.count !== undefined && (React.createElement("span", { className: hierarchicalTheme.count, style: {
+                            color: theme.colors.textSecondary,
+                            fontSize: theme.typography.fontSize.small,
+                        } }, item.count))),
+                item.isRefined && item.data && item.data.length > 0 && (renderLevel(item.data, level + 1))))))),
+            showMore && hasMore && (React.createElement("li", null,
+                React.createElement("button", { type: "button", onClick: () => toggleShowMore(level), className: hierarchicalTheme.showMore, style: {
+                        padding: `${theme.spacing.small} 0`,
+                        background: 'none',
+                        border: 'none',
+                        cursor: 'pointer',
+                        fontSize: theme.typography.fontSize.small,
+                        color: theme.colors.primary,
+                        textDecoration: 'underline',
+                    } }, isExpanded ? 'Show less' : `Show ${items.length - displayLimit} more`)))));
+    };
+    if (processedItems.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { ref: containerRef, className: clsx(hierarchicalTheme.root, className), style: style, tabIndex: 0, onKeyDown: handleKeyDown }, renderLevel(processedItems, 0)));
 };
 
 /**
@@ -6167,13 +6826,21 @@ function useQuerySuggestionsEnhanced(options) {
  * - Accessibility support
  */
 // ============================================================================
+// Constants
+// ============================================================================
+const TRANSITIONS$6 = {
+    fast: '150ms ease-in-out'};
+const BORDER_RADIUS$9 = {
+    sm: 4,
+    lg: 8};
+// ============================================================================
 // Styles
 // ============================================================================
 const defaultStyles$1 = {
     container: {
-        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
-        border: '1px solid var(--seekora-border-color, #e5e7eb)',
-        borderRadius: 'var(--seekora-border-radius, 8px)',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS$9.lg}px)`,
         boxShadow: 'var(--seekora-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05))',
         maxHeight: '400px',
         overflowY: 'auto',
@@ -6182,7 +6849,7 @@ const defaultStyles$1 = {
     sectionTitle: {
         fontSize: '12px',
         fontWeight: 600,
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
         padding: '8px 16px 4px',
@@ -6193,9 +6860,9 @@ const defaultStyles$1 = {
         alignItems: 'center',
         padding: '10px 16px',
         cursor: 'pointer',
-        transition: 'background-color 150ms ease',
+        transition: `background-color ${TRANSITIONS$6.fast}`,
         fontSize: '14px',
-        color: 'var(--seekora-text-primary, #111827)',
+        color: 'var(--seekora-text-primary, inherit)',
         gap: '12px',
     },
     suggestionItemActive: {
@@ -6215,10 +6882,10 @@ const defaultStyles$1 = {
     },
     highlight: {
         fontWeight: 600,
-        color: 'var(--seekora-text-primary, #111827)',
+        color: 'var(--seekora-text-primary, inherit)',
         backgroundColor: 'var(--seekora-highlight-bg, #fef3c7)',
         padding: '0 2px',
-        borderRadius: '2px',
+        borderRadius: `${BORDER_RADIUS$9.sm / 2}px`,
     },
     recentIcon: {
         width: '16px',
@@ -6228,13 +6895,13 @@ const defaultStyles$1 = {
     },
     removeButton: {
         padding: '4px',
-        borderRadius: '4px',
+        borderRadius: `${BORDER_RADIUS$9.sm}px`,
         border: 'none',
         background: 'transparent',
         cursor: 'pointer',
         color: 'var(--seekora-text-secondary, #9ca3af)',
         opacity: 0,
-        transition: 'opacity 150ms ease, color 150ms ease',
+        transition: `opacity ${TRANSITIONS$6.fast}, color ${TRANSITIONS$6.fast}`,
     },
     removeButtonVisible: {
         opacity: 1,
@@ -6244,7 +6911,7 @@ const defaultStyles$1 = {
         alignItems: 'center',
         justifyContent: 'center',
         padding: '24px 16px',
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
         fontSize: '14px',
         gap: '8px',
     },
@@ -6254,20 +6921,20 @@ const defaultStyles$1 = {
         alignItems: 'center',
         justifyContent: 'center',
         padding: '24px 16px',
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
         fontSize: '14px',
         textAlign: 'center',
     },
     divider: {
         height: '1px',
-        backgroundColor: 'var(--seekora-border-color, #e5e7eb)',
+        backgroundColor: 'var(--seekora-border-color, rgba(128,128,128,0.2))',
         margin: '4px 0',
     },
     footer: {
-        borderTop: '1px solid var(--seekora-border-color, #e5e7eb)',
+        borderTop: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
         padding: '8px 16px',
         fontSize: '12px',
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
@@ -6285,9 +6952,9 @@ const defaultStyles$1 = {
         minWidth: '20px',
         height: '18px',
         padding: '0 4px',
-        borderRadius: '3px',
-        backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
-        border: '1px solid var(--seekora-border-color, #e5e7eb)',
+        borderRadius: `${BORDER_RADIUS$9.sm - 1}px`,
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
+        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
         fontSize: '10px',
         fontWeight: 500,
     },
@@ -6555,6 +7222,16 @@ const QuerySuggestionsDropdown = React.forwardRef(function QuerySuggestionsDropd
  * - Configurable sections
  * - Rich styling options
  */
+// ============================================================================
+// Constants
+// ============================================================================
+const TRANSITIONS$5 = {
+    fast: '150ms ease-in-out'};
+const BORDER_RADIUS$8 = {
+    sm: 4,
+    lg: 8,
+    full: 9999,
+};
 // Default section order
 const DEFAULT_SECTIONS = [
     { id: 'recent', title: 'Recent Searches', maxItems: 5, enabled: true, order: 1 },
@@ -6567,16 +7244,16 @@ const DEFAULT_SECTIONS = [
 // ============================================================================
 const styles$2 = {
     container: {
-        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
-        border: '1px solid var(--seekora-border-color, #e5e7eb)',
-        borderRadius: 'var(--seekora-border-radius-lg, 12px)',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderRadius: `var(--seekora-border-radius-lg, ${BORDER_RADIUS$8.lg * 1.5}px)`,
         boxShadow: 'var(--seekora-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04))',
         overflow: 'hidden',
     },
     header: {
         padding: '12px 16px',
-        borderBottom: '1px solid var(--seekora-border-color, #e5e7eb)',
-        backgroundColor: 'var(--seekora-bg-secondary, #f9fafb)',
+        borderBottom: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
     },
     content: {
         overflowY: 'auto',
@@ -6608,7 +7285,7 @@ const styles$2 = {
         alignItems: 'flex-start',
         padding: '10px 16px',
         cursor: 'pointer',
-        transition: 'background-color 100ms ease',
+        transition: `background-color ${TRANSITIONS$5.fast}`,
         gap: '12px',
     },
     itemActive: {
@@ -6627,7 +7304,7 @@ const styles$2 = {
     },
     itemQuery: {
         fontSize: '14px',
-        color: 'var(--seekora-text-primary, #111827)',
+        color: 'var(--seekora-text-primary, inherit)',
         fontWeight: 500,
         margin: 0,
         overflow: 'hidden',
@@ -6652,11 +7329,11 @@ const styles$2 = {
         padding: '3px 8px',
         fontSize: '11px',
         fontWeight: 500,
-        color: 'var(--seekora-text-secondary, #6b7280)',
-        backgroundColor: 'var(--seekora-bg-tertiary, #f3f4f6)',
-        borderRadius: '12px',
+        color: 'var(--seekora-text-secondary, inherit)',
+        backgroundColor: 'var(--seekora-bg-tertiary, rgba(255, 255, 255, 0.1))',
+        borderRadius: `${BORDER_RADIUS$8.lg * 1.5}px`,
         cursor: 'pointer',
-        transition: 'all 100ms ease',
+        transition: `all ${TRANSITIONS$5.fast}`,
     },
     categoryPillHover: {
         backgroundColor: 'var(--seekora-primary-light, #dbeafe)',
@@ -6678,12 +7355,12 @@ const styles$2 = {
         padding: '6px 12px',
         fontSize: '13px',
         fontWeight: 500,
-        color: 'var(--seekora-text-primary, #374151)',
-        backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
-        border: '1px solid var(--seekora-border-color, #e5e7eb)',
-        borderRadius: '20px',
+        color: 'var(--seekora-text-primary, inherit)',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
+        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderRadius: `${BORDER_RADIUS$8.full}px`,
         cursor: 'pointer',
-        transition: 'all 150ms ease',
+        transition: `all ${TRANSITIONS$5.fast}`,
     },
     trendingChipHover: {
         borderColor: 'var(--seekora-primary, #3b82f6)',
@@ -6697,7 +7374,7 @@ const styles$2 = {
     trendingRank: {
         width: '18px',
         height: '18px',
-        borderRadius: '50%',
+        borderRadius: `${BORDER_RADIUS$8.full}px`,
         backgroundColor: 'var(--seekora-primary, #3b82f6)',
         color: 'white',
         fontSize: '10px',
@@ -6709,25 +7386,25 @@ const styles$2 = {
     removeButton: {
         padding: '4px',
         marginLeft: 'auto',
-        borderRadius: '4px',
+        borderRadius: `${BORDER_RADIUS$8.sm}px`,
         border: 'none',
         background: 'transparent',
         cursor: 'pointer',
         color: 'var(--seekora-text-tertiary, #9ca3af)',
         opacity: 0,
-        transition: 'opacity 100ms ease',
+        transition: `opacity ${TRANSITIONS$5.fast}`,
     },
     divider: {
         height: '1px',
-        backgroundColor: 'var(--seekora-border-color, #e5e7eb)',
+        backgroundColor: 'var(--seekora-border-color, rgba(128,128,128,0.2))',
         margin: '4px 16px',
     },
     footer: {
         padding: '12px 16px',
-        borderTop: '1px solid var(--seekora-border-color, #e5e7eb)',
-        backgroundColor: 'var(--seekora-bg-secondary, #f9fafb)',
+        borderTop: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
         fontSize: '12px',
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
     },
     loadingOverlay: {
         position: 'absolute',
@@ -6735,12 +7412,12 @@ const styles$2 = {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: 'rgba(255, 255, 255, 0.8)',
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
     },
     emptyState: {
         padding: '32px 16px',
         textAlign: 'center',
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
     },
     highlight: {
         backgroundColor: 'var(--seekora-highlight-bg, #fef9c3)',
@@ -7035,20 +7712,30 @@ const RichQuerySuggestions = React.forwardRef(function RichQuerySuggestions(prop
  * - Rich product cards
  */
 // ============================================================================
+// Constants
+// ============================================================================
+const TRANSITIONS$4 = {
+    fast: '150ms ease-in-out'};
+const BORDER_RADIUS$7 = {
+    sm: 4,
+    lg: 8,
+    full: 9999,
+};
+// ============================================================================
 // Styles
 // ============================================================================
 const styles$1 = {
     container: {
-        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
-        border: '1px solid var(--seekora-border-color, #e5e7eb)',
-        borderRadius: 'var(--seekora-border-radius-lg, 12px)',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderRadius: `var(--seekora-border-radius-lg, ${BORDER_RADIUS$7.lg * 1.5}px)`,
         boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
         overflow: 'hidden',
     },
     header: {
         padding: '12px 20px',
-        borderBottom: '1px solid var(--seekora-border-color, #e5e7eb)',
-        backgroundColor: 'var(--seekora-bg-secondary, #f9fafb)',
+        borderBottom: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
     },
     content: {
         display: 'flex',
@@ -7058,13 +7745,13 @@ const styles$1 = {
         flexDirection: 'column',
     },
     suggestionsColumn: {
-        borderRight: '1px solid var(--seekora-border-color, #e5e7eb)',
+        borderRight: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
         overflowY: 'auto',
     },
     productsColumn: {
         flex: 1,
         overflowY: 'auto',
-        backgroundColor: 'var(--seekora-bg-secondary, #fafafa)',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
     },
     section: {
         padding: '12px 0',
@@ -7095,7 +7782,7 @@ const styles$1 = {
         alignItems: 'center',
         padding: '10px 20px',
         cursor: 'pointer',
-        transition: 'background-color 100ms ease',
+        transition: `background-color ${TRANSITIONS$4.fast}`,
         gap: '12px',
     },
     suggestionItemActive: {
@@ -7110,7 +7797,7 @@ const styles$1 = {
     suggestionText: {
         flex: 1,
         fontSize: '14px',
-        color: 'var(--seekora-text-primary, #111827)',
+        color: 'var(--seekora-text-primary, inherit)',
         fontWeight: 500,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
@@ -7134,7 +7821,7 @@ const styles$1 = {
         display: 'flex',
         gap: '4px',
         padding: '12px 20px',
-        borderBottom: '1px solid var(--seekora-border-color, #e5e7eb)',
+        borderBottom: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
         overflowX: 'auto',
     },
     tab: {
@@ -7144,13 +7831,13 @@ const styles$1 = {
         padding: '8px 16px',
         fontSize: '13px',
         fontWeight: 500,
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
         backgroundColor: 'transparent',
         border: '1px solid transparent',
-        borderRadius: '20px',
+        borderRadius: `${BORDER_RADIUS$7.full}px`,
         cursor: 'pointer',
         whiteSpace: 'nowrap',
-        transition: 'all 150ms ease',
+        transition: `all ${TRANSITIONS$4.fast}`,
     },
     tabActive: {
         color: 'var(--seekora-primary, #3b82f6)',
@@ -7161,8 +7848,8 @@ const styles$1 = {
         fontSize: '11px',
         fontWeight: 600,
         padding: '2px 6px',
-        borderRadius: '10px',
-        backgroundColor: 'var(--seekora-bg-tertiary, #e5e7eb)',
+        borderRadius: `${BORDER_RADIUS$7.lg}px`,
+        backgroundColor: 'var(--seekora-bg-tertiary, rgba(255, 255, 255, 0.1))',
     },
     tabCountActive: {
         backgroundColor: 'var(--seekora-primary, #3b82f6)',
@@ -7177,12 +7864,12 @@ const styles$1 = {
     productCard: {
         display: 'flex',
         flexDirection: 'column',
-        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
-        borderRadius: '8px',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        borderRadius: `${BORDER_RADIUS$7.lg}px`,
         overflow: 'hidden',
         cursor: 'pointer',
-        transition: 'transform 150ms ease, box-shadow 150ms ease',
-        border: '1px solid var(--seekora-border-color, #e5e7eb)',
+        transition: `transform ${TRANSITIONS$4.fast}, box-shadow ${TRANSITIONS$4.fast}`,
+        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
     },
     productCardHover: {
         transform: 'translateY(-2px)',
@@ -7200,7 +7887,7 @@ const styles$1 = {
     productTitle: {
         fontSize: '13px',
         fontWeight: 500,
-        color: 'var(--seekora-text-primary, #111827)',
+        color: 'var(--seekora-text-primary, inherit)',
         margin: 0,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
@@ -7228,12 +7915,12 @@ const styles$1 = {
         padding: '8px 14px',
         fontSize: '13px',
         fontWeight: 500,
-        color: 'var(--seekora-text-primary, #374151)',
-        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
-        border: '1px solid var(--seekora-border-color, #e5e7eb)',
-        borderRadius: '8px',
+        color: 'var(--seekora-text-primary, inherit)',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderRadius: `${BORDER_RADIUS$7.lg}px`,
         cursor: 'pointer',
-        transition: 'all 150ms ease',
+        transition: `all ${TRANSITIONS$4.fast}`,
     },
     brandChipHover: {
         borderColor: 'var(--seekora-primary, #3b82f6)',
@@ -7242,25 +7929,25 @@ const styles$1 = {
     brandLogo: {
         width: '20px',
         height: '20px',
-        borderRadius: '4px',
+        borderRadius: `${BORDER_RADIUS$7.sm}px`,
         objectFit: 'contain',
         backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
     },
     footer: {
         padding: '12px 20px',
-        borderTop: '1px solid var(--seekora-border-color, #e5e7eb)',
-        backgroundColor: 'var(--seekora-bg-secondary, #f9fafb)',
+        borderTop: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         fontSize: '12px',
-        color: 'var(--seekora-text-secondary, #6b7280)',
+        color: 'var(--seekora-text-secondary, inherit)',
     },
     highlight: {
         backgroundColor: 'var(--seekora-highlight-bg, #fef9c3)',
         fontWeight: 600,
         padding: '0 2px',
-        borderRadius: '2px',
+        borderRadius: `${BORDER_RADIUS$7.sm / 2}px`,
     },
 };
 // ============================================================================
@@ -7784,8 +8471,8 @@ const styles = {
         transition: 'border-color 150ms ease, box-shadow 150ms ease',
     },
     inputWrapperFocused: {
-        borderColor: 'var(--seekora-primary, #3b82f6)',
-        boxShadow: '0 0 0 3px var(--seekora-primary-light, rgba(59, 130, 246, 0.1))',
+        borderColor: 'var(--seekora-border-focus, var(--seekora-primary, #3b82f6))',
+        boxShadow: '0 0 0 3px var(--seekora-border-focus-alpha, var(--seekora-primary-light, rgba(59, 130, 246, 0.1)))',
     },
     input: {
         flex: 1,
@@ -7828,7 +8515,7 @@ const styles = {
         margin: '4px',
         border: 'none',
         backgroundColor: 'var(--seekora-primary, #3b82f6)',
-        color: 'white',
+        color: 'var(--seekora-primary-text, white)',
         borderRadius: 'var(--seekora-border-radius, 6px)',
         fontSize: '14px',
         fontWeight: 600,
@@ -8269,6 +8956,13 @@ function SuggestionsProvider({ children, minQueryLength = 1, debounceMs = 200, m
  * Single input bound to suggestions context: query, setQuery, focus opens dropdown,
  * keydown ArrowUp/Down/Enter/Escape delegates to context. Overridable via className/style.
  */
+const SPACING$3 = {
+    sm: 8,
+    md: 12};
+const TRANSITIONS$3 = {
+    fast: '150ms ease-in-out'};
+const BORDER_RADIUS$6 = {
+    md: 6};
 const defaultStyles = {
     position: 'relative',
     width: '100%',
@@ -8276,22 +8970,23 @@ const defaultStyles = {
 const inputWrapperStyles = {
     display: 'flex',
     alignItems: 'center',
-    gap: '8px',
-    padding: '8px 12px',
-    border: '1px solid var(--seekora-border-color, #e5e7eb)',
-    borderRadius: 'var(--seekora-border-radius, 6px)',
-    backgroundColor: 'var(--seekora-bg-surface, #fff)',
-    transition: 'border-color 150ms ease, box-shadow 150ms ease',
+    gap: `${SPACING$3.sm}px`,
+    padding: `${SPACING$3.sm}px ${SPACING$3.md}px`,
+    border: '1px solid var(--seekora-border-color, rgba(0,0,0,0.1))',
+    borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS$6.md}px)`,
+    backgroundColor: 'var(--seekora-bg-surface, transparent)',
+    transition: `border-color ${TRANSITIONS$3.fast}, box-shadow ${TRANSITIONS$3.fast}`,
+    boxSizing: 'border-box',
 };
 const inputStyles = {
     flex: 1,
     minWidth: 0,
-    padding: '8px 0',
+    padding: `${SPACING$3.sm}px 0`,
     border: 'none',
     outline: 'none',
     backgroundColor: 'transparent',
     fontSize: 'inherit',
-    color: 'var(--seekora-text-primary, #111827)',
+    color: 'var(--seekora-text-primary, inherit)',
     fontFamily: 'inherit',
 };
 function SearchInput({ placeholder = 'Search...', autoFocus = false, showClearButton = true, closeOnBlur = true, leftIcon, className, style, inputClassName, inputStyle, ariaLabel = 'Search', }) {
@@ -8340,7 +9035,7 @@ function SearchInput({ placeholder = 'Search...', autoFocus = false, showClearBu
             leftIcon ? (React.createElement("span", { className: "seekora-suggestions-input-left-icon", style: { display: 'flex', flexShrink: 0, color: 'var(--seekora-text-secondary, #6b7280)' } }, leftIcon)) : null,
             React.createElement("input", { ref: inputRef, type: "text", value: query, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder, autoFocus: autoFocus, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-autocomplete": "list", role: "combobox", className: clsx('seekora-suggestions-input', inputClassName), style: { ...inputStyles, ...inputStyle } }),
             showClearButton && query ? (React.createElement("button", { type: "button", onClick: handleClear, className: "seekora-suggestions-input-clear", "aria-label": "Clear search", style: {
-                    padding: 4,
+                    padding: 8,
                     border: 'none',
                     background: 'transparent',
                     cursor: 'pointer',
@@ -8362,7 +9057,12 @@ function ClearIcon() {
  * Shows when isOpen; handles click-outside and Escape to close. Children = any composition
  * of SuggestionList, ProductGrid, etc. Position and z-index configurable.
  */
-function DropdownPanel({ children, position = 'absolute', top = '100%', left = 0, right, width = '100%', maxHeight = '80vh', zIndex = 1000, className, style, closeOnClickOutside = true, closeOnEscape = true, }) {
+const BORDER_RADIUS$5 = {
+    md: 6};
+// Z-index scale for consistent layering
+const Z_INDEX = {
+    dropdown: 100};
+function DropdownPanel({ children, position = 'absolute', top = '100%', left = 0, right, width = '100%', maxHeight = '80vh', zIndex = Z_INDEX.dropdown, className, style, closeOnClickOutside = true, closeOnEscape = true, }) {
     const { isOpen, close } = useSuggestionsContext();
     const panelRef = React.useRef(null);
     React.useEffect(() => {
@@ -8401,7 +9101,7 @@ function DropdownPanel({ children, position = 'absolute', top = '100%', left = 0
         overflow: 'auto',
         backgroundColor: 'var(--seekora-bg-surface, #fff)',
         border: '1px solid var(--seekora-border-color, #e5e7eb)',
-        borderRadius: 'var(--seekora-border-radius, 6px)',
+        borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS$5.md}px)`,
         boxShadow: 'var(--seekora-shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05))',
         marginTop: 4,
     };
@@ -8492,6 +9192,9 @@ const defaultItemStyle = {
     backgroundColor: 'transparent',
     color: 'var(--seekora-text-primary, #111827)',
     transition: 'background-color 120ms ease',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
 };
 function SuggestionItem({ suggestion, index, isActive, onSelect, className, style, enableHighlightMarkup = true, highlightMarkupOptions, renderHighlight, }) {
     const displayText = suggestion.highlightedQuery ?? suggestion.query;
@@ -8676,8 +9379,8 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
             backgroundRepeat: 'no-repeat',
             border: '2px solid var(--seekora-border-color, #e5e7eb)',
             borderRadius: 8,
-            boxShadow: '0 8px 24px rgba(0,0,0,0.2)',
-            backgroundColor: '#fff',
+            boxShadow: 'var(--seekora-zoom-panel-shadow, 0 8px 24px rgba(0,0,0,0.2))',
+            backgroundColor: 'var(--seekora-zoom-panel-bg, #fff)',
             pointerEvents: 'none',
             zIndex: 9998,
         };
@@ -8692,9 +9395,9 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
             height: lensSize,
             left: cursorPos.x - lensSize / 2,
             top: cursorPos.y - lensSize / 2,
-            border: '2px solid rgba(255,255,255,0.8)',
+            border: 'var(--seekora-lens-border, 2px solid rgba(255,255,255,0.8))',
             borderRadius: '50%',
-            boxShadow: '0 0 0 1px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(0,0,0,0.3)',
+            boxShadow: 'var(--seekora-lens-shadow, 0 0 0 1px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(0,0,0,0.3))',
             pointerEvents: 'none',
             overflow: 'hidden',
             zIndex: 100,
@@ -8724,8 +9427,8 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
                     width: 32,
                     height: 32,
                     borderRadius: '50%',
-                    backgroundColor: 'rgba(0,0,0,0.6)',
-                    color: '#fff',
+                    backgroundColor: 'var(--seekora-zoom-indicator-bg, rgba(0,0,0,0.6))',
+                    color: 'var(--seekora-zoom-indicator-text, #fff)',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
@@ -8742,8 +9445,8 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
                     top: cursorPos.y - 75,
                     width: 150,
                     height: 150,
-                    border: '2px solid rgba(0,0,0,0.3)',
-                    backgroundColor: 'rgba(255,255,255,0.1)',
+                    border: 'var(--seekora-hover-area-border, 2px solid rgba(0,0,0,0.3))',
+                    backgroundColor: 'var(--seekora-hover-area-bg, rgba(255,255,255,0.1))',
                     pointerEvents: 'none',
                     zIndex: 50,
                 } })),
@@ -8754,7 +9457,7 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
                 left: 0,
                 right: 0,
                 bottom: 0,
-                backgroundColor: 'rgba(0,0,0,0.95)',
+                backgroundColor: 'var(--seekora-lightbox-bg, rgba(0,0,0,0.95))',
                 zIndex: 9999,
                 display: 'flex',
                 alignItems: 'center',
@@ -8770,8 +9473,8 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
                     height: 44,
                     borderRadius: '50%',
                     border: 'none',
-                    backgroundColor: 'rgba(255,255,255,0.2)',
-                    color: '#fff',
+                    backgroundColor: 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))',
+                    color: 'var(--seekora-lightbox-btn-text, #fff)',
                     fontSize: '1.5rem',
                     cursor: 'pointer',
                     display: 'flex',
@@ -8783,9 +9486,9 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
                     e.stopPropagation();
                     closeLightbox();
                 }, onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.3)';
+                    e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg-hover, rgba(255,255,255,0.3))';
                 }, onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.2)';
+                    e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))';
                 } }, "\u2715"),
             hasMultipleImages && (React.createElement(React.Fragment, null,
                 React.createElement("button", { type: "button", "aria-label": "Previous image", style: {
@@ -8797,8 +9500,8 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
                         height: 56,
                         borderRadius: '50%',
                         border: 'none',
-                        backgroundColor: 'rgba(255,255,255,0.2)',
-                        color: '#fff',
+                        backgroundColor: 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))',
+                        color: 'var(--seekora-lightbox-btn-text, #fff)',
                         fontSize: '2rem',
                         fontWeight: 'bold',
                         cursor: 'pointer',
@@ -8811,9 +9514,9 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
                         e.stopPropagation();
                         goToPrev();
                     }, onMouseEnter: (e) => {
-                        e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.3)';
+                        e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg-hover, rgba(255,255,255,0.3))';
                     }, onMouseLeave: (e) => {
-                        e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.2)';
+                        e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))';
                     } }, "\u2039"),
                 React.createElement("button", { type: "button", "aria-label": "Next image", style: {
                         position: 'absolute',
@@ -8824,8 +9527,8 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
                         height: 56,
                         borderRadius: '50%',
                         border: 'none',
-                        backgroundColor: 'rgba(255,255,255,0.2)',
-                        color: '#fff',
+                        backgroundColor: 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))',
+                        color: 'var(--seekora-lightbox-btn-text, #fff)',
                         fontSize: '2rem',
                         fontWeight: 'bold',
                         cursor: 'pointer',
@@ -8838,9 +9541,9 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
                         e.stopPropagation();
                         goToNext();
                     }, onMouseEnter: (e) => {
-                        e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.3)';
+                        e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg-hover, rgba(255,255,255,0.3))';
                     }, onMouseLeave: (e) => {
-                        e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.2)';
+                        e.currentTarget.style.backgroundColor = 'var(--seekora-lightbox-btn-bg, rgba(255,255,255,0.2))';
                     } }, "\u203A"))),
             React.createElement("img", { src: allImages[lightboxIndex], alt: alt, style: {
                     maxWidth: '90%',
@@ -8866,7 +9569,7 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
                         width: 60,
                         height: 60,
                         padding: 0,
-                        border: i === lightboxIndex ? '3px solid #fff' : '2px solid rgba(255,255,255,0.3)',
+                        border: i === lightboxIndex ? 'var(--seekora-lightbox-thumb-border-active, 3px solid #fff)' : 'var(--seekora-lightbox-thumb-border, 2px solid rgba(255,255,255,0.3))',
                         borderRadius: 4,
                         overflow: 'hidden',
                         cursor: 'pointer',
@@ -8882,10 +9585,10 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
                     } },
                     React.createElement("img", { src: img, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover' } }))))),
                 React.createElement("div", { style: {
-                        color: 'rgba(255,255,255,0.9)',
+                        color: 'var(--seekora-lightbox-counter-text, rgba(255,255,255,0.9))',
                         fontSize: '0.875rem',
                         textAlign: 'center',
-                        backgroundColor: 'rgba(0,0,0,0.5)',
+                        backgroundColor: 'var(--seekora-lightbox-counter-bg, rgba(0,0,0,0.5))',
                         padding: '4px 12px',
                         borderRadius: 12,
                     } },
@@ -8897,10 +9600,10 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
                     top: 20,
                     left: '50%',
                     transform: 'translateX(-50%)',
-                    color: 'rgba(255,255,255,0.7)',
+                    color: 'var(--seekora-lightbox-instructions-text, rgba(255,255,255,0.7))',
                     fontSize: '0.875rem',
                     textAlign: 'center',
-                    backgroundColor: 'rgba(0,0,0,0.5)',
+                    backgroundColor: 'var(--seekora-lightbox-instructions-bg, rgba(0,0,0,0.5))',
                     padding: '8px 16px',
                     borderRadius: 12,
                 } }, hasMultipleImages ? 'Use arrow keys or click thumbnails to navigate • ESC to close' : 'Click outside or press ESC to close')))));
@@ -8914,10 +9617,13 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
  */
 const imgBaseStyle = {
     width: '100%',
+    height: 'auto',
     aspectRatio: '1',
     objectFit: 'cover',
     borderRadius: 4,
     backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+    display: 'block',
+    overflow: 'hidden',
 };
 function ImageDisplay({ images, variant = 'single', alt = '', className, style, carouselAutoplay = false, carouselIntervalMs = 4000, enableZoom = false, zoomMode = 'both', zoomLevel = 2.5, showDots = true, }) {
     const [index, setIndex] = React.useState(0);
@@ -8960,8 +9666,8 @@ function ImageDisplay({ images, variant = 'single', alt = '', className, style,
         return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-carousel', className), style: { position: 'relative', ...style } },
             mainImage,
             safeImages.length > 1 && (React.createElement(React.Fragment, null,
-                React.createElement("button", { type: "button", "aria-label": "Previous", className: "seekora-img-carousel-prev", style: arrowStyle(true), onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); go(-1); }, onClick: (e) => e.stopPropagation(), onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'rgba(255,255,255,1)'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.9)'; } }, "\u2039"),
-                React.createElement("button", { type: "button", "aria-label": "Next", className: "seekora-img-carousel-next", style: arrowStyle(false), onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); go(1); }, onClick: (e) => e.stopPropagation(), onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'rgba(255,255,255,1)'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.9)'; } }, "\u203A"),
+                React.createElement("button", { type: "button", "aria-label": "Previous", className: "seekora-img-carousel-prev", style: arrowStyle(true), onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); go(-1); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg-hover, rgba(255,255,255,1))'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg, rgba(255,255,255,0.9))'; } }, "\u2039"),
+                React.createElement("button", { type: "button", "aria-label": "Next", className: "seekora-img-carousel-next", style: arrowStyle(false), onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); go(1); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg-hover, rgba(255,255,255,1))'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg, rgba(255,255,255,0.9))'; } }, "\u203A"),
                 showDots && (React.createElement("div", { className: "seekora-img-carousel-dots", style: {
                         position: 'absolute',
                         bottom: 8,
@@ -8970,16 +9676,16 @@ function ImageDisplay({ images, variant = 'single', alt = '', className, style,
                         display: 'flex',
                         gap: 6,
                         padding: '6px 12px',
-                        backgroundColor: 'rgba(0,0,0,0.5)',
+                        backgroundColor: 'var(--seekora-carousel-dots-bg, rgba(0,0,0,0.5))',
                         borderRadius: 12,
                         zIndex: 10,
-                    } }, safeImages.map((_, i) => (React.createElement("button", { key: i, type: "button", "aria-label": `Go to image ${i + 1}`, onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); }, onClick: (e) => { e.stopPropagation(); setIndex(i); }, style: {
+                    } }, safeImages.map((_, i) => (React.createElement("button", { key: i, type: "button", "aria-label": `Go to image ${i + 1}`, onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); setIndex(i); }, style: {
                         width: 8,
                         height: 8,
                         borderRadius: '50%',
                         border: 'none',
                         padding: 0,
-                        backgroundColor: i === index ? '#fff' : 'rgba(255,255,255,0.5)',
+                        backgroundColor: i === index ? 'var(--seekora-carousel-dot-active, #fff)' : 'var(--seekora-carousel-dot, rgba(255,255,255,0.5))',
                         cursor: 'pointer',
                         transition: 'all 150ms ease',
                     } })))))))));
@@ -8989,7 +9695,7 @@ function ImageDisplay({ images, variant = 'single', alt = '', className, style,
         const mainImage = enableZoom ? (React.createElement(ImageZoom, { src: current, alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: index, className: "seekora-img-thumb-main", style: thumbMainStyle })) : (React.createElement("img", { src: current, alt: alt, className: "seekora-img-thumb-main", style: thumbMainStyle, loading: "lazy" }));
         return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-thumbstrip', className), style: { display: 'flex', flexDirection: 'column', gap: 8, ...style } },
             mainImage,
-            React.createElement("div", { className: "seekora-img-thumbs", style: { display: 'flex', gap: 4, overflowX: 'auto', paddingBottom: 4 } }, safeImages.map((src, i) => (React.createElement("button", { type: "button", key: i, className: clsx('seekora-img-thumb', i === index && 'seekora-img-thumb--active'), style: { flexShrink: 0, width: 48, height: 48, padding: 0, border: i === index ? '2px solid var(--seekora-primary)' : '1px solid transparent', borderRadius: 4, overflow: 'hidden', cursor: 'pointer', background: 'none' }, onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); setIndex(i); }, onClick: (e) => e.stopPropagation() },
+            React.createElement("div", { className: "seekora-img-thumbs", style: { display: 'flex', gap: 4, overflowX: 'auto', paddingBottom: 4 } }, safeImages.map((src, i) => (React.createElement("button", { type: "button", key: i, className: clsx('seekora-img-thumb', i === index && 'seekora-img-thumb--active'), style: { flexShrink: 0, width: 48, height: 48, padding: 0, border: i === index ? '2px solid var(--seekora-primary)' : '1px solid transparent', borderRadius: 4, overflow: 'hidden', cursor: 'pointer', background: 'none' }, onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); setIndex(i); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); } },
                 React.createElement("img", { src: src, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover' } })))))));
     }
     return React.createElement("img", { src: current, alt: alt, className: clsx('seekora-img-display', className), style: { ...imgBaseStyle, ...style }, loading: "lazy" });
@@ -9004,8 +9710,8 @@ function arrowStyle(left) {
         height: 32,
         borderRadius: '50%',
         border: 'none',
-        backgroundColor: 'rgba(255, 255, 255, 0.9)',
-        color: '#111',
+        backgroundColor: 'var(--seekora-carousel-btn-bg, rgba(255, 255, 255, 0.9))',
+        color: 'var(--seekora-carousel-btn-text, #111)',
         fontSize: '1.25rem',
         fontWeight: 'bold',
         cursor: 'pointer',
@@ -9024,6 +9730,14 @@ function arrowStyle(left) {
  * Renders a set of action buttons for product cards. Can be positioned absolutely
  * over the image (on hover) or inline below the card content.
  */
+const SPACING$2 = {
+    sm: 8};
+const TRANSITIONS$2 = {
+    fast: '150ms ease-in-out'};
+const BORDER_RADIUS$4 = {
+    md: 6};
+const SHADOWS = {
+    md: '0 2px 4px rgba(0,0,0,0.1)'};
 const DEFAULT_ICONS = {
     addToCart: '🛒',
     wishlist: '♡',
@@ -9039,8 +9753,8 @@ const DEFAULT_LABELS = {
     compare: 'Compare',
 };
 const BUTTON_SIZES = {
-    small: { width: 28, height: 28, fontSize: '0.75rem', iconSize: '1rem' },
-    medium: { width: 36, height: 36, fontSize: '0.875rem', iconSize: '1.25rem' },
+    small: { width: 44, height: 44, fontSize: '0.75rem', iconSize: '1rem' },
+    medium: { width: 44, height: 44, fontSize: '0.875rem', iconSize: '1.25rem' },
     large: { width: 44, height: 44, fontSize: '1rem', iconSize: '1.5rem' },
 };
 function ActionButtons({ buttons, layout = 'horizontal', position = 'inline', showLabels = false, size = 'medium', className, style, }) {
@@ -9049,11 +9763,11 @@ function ActionButtons({ buttons, layout = 'horizontal', position = 'inline', sh
     const containerStyle = {
         display: 'flex',
         flexDirection: layout === 'vertical' ? 'column' : 'row',
-        gap: 6,
+        gap: SPACING$2.sm,
         ...(isOverlay ? {
             position: 'absolute',
-            ...(position === 'top-right' ? { top: 8, right: 8 } : {}),
-            ...(position === 'bottom-center' ? { bottom: 8, left: '50%', transform: 'translateX(-50%)' } : {}),
+            ...(position === 'top-right' ? { top: SPACING$2.sm, right: SPACING$2.sm } : {}),
+            ...(position === 'bottom-center' ? { bottom: SPACING$2.sm, left: '50%', transform: 'translateX(-50%)' } : {}),
         } : {}),
         ...style,
     };
@@ -9068,12 +9782,12 @@ function ActionButtons({ buttons, layout = 'horizontal', position = 'inline', sh
         fontSize: sizeConfig.fontSize,
         fontWeight: 500,
         border: 'none',
-        borderRadius: 6,
-        backgroundColor: 'var(--seekora-bg-surface, #fff)',
-        color: 'var(--seekora-text, #111827)',
+        borderRadius: BORDER_RADIUS$4.md,
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        color: 'var(--seekora-text, inherit)',
         cursor: 'pointer',
-        transition: 'all 150ms ease',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+        transition: `all ${TRANSITIONS$2.fast}`,
+        boxShadow: SHADOWS.md,
     };
     const handleClick = (btn, e) => {
         e.stopPropagation();
@@ -9102,6 +9816,11 @@ function ActionButtons({ buttons, layout = 'horizontal', position = 'inline', sh
  * optional description, image, url. Overridable via className/style. Use for
  * search results, section blocks, or any list; for e-commerce products use ProductCard.
  */
+const TRANSITIONS$1 = {
+    fast: '150ms ease-in-out'};
+const BORDER_RADIUS$3 = {
+    sm: 4,
+    md: 6};
 const cardStyle$1 = {
     display: 'flex',
     flexDirection: 'column',
@@ -9109,19 +9828,21 @@ const cardStyle$1 = {
     padding: 8,
     cursor: 'pointer',
     border: 'none',
-    borderRadius: 'var(--seekora-border-radius, 6px)',
+    borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS$3.md}px)`,
     backgroundColor: 'transparent',
     textAlign: 'left',
     fontSize: 'inherit',
     fontFamily: 'inherit',
-    transition: 'background-color 120ms ease',
+    transition: `background-color ${TRANSITIONS$1.fast}`,
 };
 const imgStyle$1 = {
     width: '100%',
-    aspectRatio: '1',
+    aspectRatio: 'var(--seekora-card-aspect-ratio, 1)',
     objectFit: 'cover',
-    borderRadius: 4,
+    borderRadius: BORDER_RADIUS$3.sm,
     backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+    display: 'block',
+    overflow: 'hidden',
 };
 function ItemCard({ item, position, onSelect, className, style, asLink = true, imageVariant = 'single', layout = 'vertical', actionButtons, actionButtonsPosition = 'overlay-top-right', showActionLabels = false, }) {
     const images = item.images?.length ? item.images : item.image ?? item.imageUrl ? [String(item.image ?? item.imageUrl)] : [];
@@ -9129,12 +9850,12 @@ function ItemCard({ item, position, onSelect, className, style, asLink = true, i
     const description = item.description ?? item.secondaryText;
     const href = item.url;
     const isHorizontal = layout === 'horizontal';
-    const imageBlock = images.length > 0 ? (React.createElement("div", { style: { position: 'relative', ...(isHorizontal ? { width: 80, flexShrink: 0 } : {}) } },
+    const imageBlock = images.length > 0 ? (React.createElement("div", { style: { position: 'relative', overflow: 'hidden', borderRadius: 4, ...(isHorizontal ? { minWidth: 80, flexBasis: '20%', maxWidth: 120, flexShrink: 0 } : {}) } },
         React.createElement(ImageDisplay, { images: images, variant: imageVariant, alt: String(title), className: "seekora-item-card-image" }),
-        actionButtons && actionButtons.length > 0 && actionButtonsPosition?.startsWith('overlay') && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" })))) : (React.createElement("div", { className: "seekora-item-card-placeholder", style: { ...imgStyle$1, ...(isHorizontal ? { width: 80, height: 80, flexShrink: 0 } : {}) }, "aria-hidden": true }));
+        actionButtons && actionButtons.length > 0 && actionButtonsPosition?.startsWith('overlay') && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" })))) : (React.createElement("div", { className: "seekora-item-card-placeholder", style: { ...imgStyle$1, ...(isHorizontal ? { minWidth: 80, flexBasis: '20%', maxWidth: 120, height: 80, flexShrink: 0 } : {}) }, "aria-hidden": true }));
     const textBlock = (React.createElement("div", { style: isHorizontal ? { display: 'flex', flexDirection: 'column', gap: 4, flex: 1, minWidth: 0 } : undefined },
-        React.createElement("span", { className: "seekora-item-card-title", style: { fontSize: '0.875rem', fontWeight: 500 } }, String(title)),
-        description ? (React.createElement("span", { className: "seekora-item-card-description", style: { fontSize: '0.8125rem', color: 'var(--seekora-text-secondary, #6b7280)', lineHeight: 1.3 } }, String(description))) : null,
+        React.createElement("span", { className: "seekora-item-card-title", style: { fontSize: '0.875rem', fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, String(title)),
+        description ? (React.createElement("span", { className: "seekora-item-card-description", style: { fontSize: '0.8125rem', color: 'var(--seekora-text-secondary, #6b7280)', lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' } }, String(description))) : null,
         actionButtons && actionButtons.length > 0 && actionButtonsPosition === 'inline' && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" }))));
     const content = isHorizontal ? (React.createElement("div", { style: { display: 'flex', gap: 12, alignItems: 'flex-start' } },
         imageBlock,
@@ -9165,11 +9886,12 @@ function ItemCard({ item, position, onSelect, className, style, asLink = true, i
  * or custom renderItem. Use for search hits, section blocks, docs, articles; for
  * product-only lists use ProductGrid.
  */
+const SPACING$1 = {
+    md: 12};
 const defaultGridStyle = {
     display: 'grid',
-    gridTemplateColumns: 'repeat(var(--seekora-grid-cols, 4), minmax(0, 1fr))',
-    gap: 12,
-    padding: 12,
+    gap: SPACING$1.md,
+    padding: SPACING$1.md,
 };
 function toGenericItem(item, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl) {
     return {
@@ -9766,19 +10488,24 @@ function PriceDisplay({ price, comparePrice, priceRange, currency = '$', currenc
 /**
  * BadgeList – renders product badges (sale, new, sold out, custom)
  */
+const SPACING = {
+    xs: 4,
+    sm: 8};
+const BORDER_RADIUS$2 = {
+    sm: 4};
 const positionStyles = {
-    'top-left': { position: 'absolute', top: 6, left: 6 },
-    'top-right': { position: 'absolute', top: 6, right: 6 },
-    'bottom-left': { position: 'absolute', bottom: 6, left: 6 },
-    'bottom-right': { position: 'absolute', bottom: 6, right: 6 },
+    'top-left': { position: 'absolute', top: SPACING.sm, left: SPACING.sm },
+    'top-right': { position: 'absolute', top: SPACING.sm, right: SPACING.sm },
+    'bottom-left': { position: 'absolute', bottom: SPACING.sm, left: SPACING.sm },
+    'bottom-right': { position: 'absolute', bottom: SPACING.sm, right: SPACING.sm },
     inline: {},
 };
 const typeColors = {
-    sale: { bg: '#ef4444', text: '#fff' },
-    new: { bg: '#3b82f6', text: '#fff' },
-    soldOut: { bg: '#6b7280', text: '#fff' },
-    limited: { bg: '#f59e0b', text: '#fff' },
-    custom: { bg: '#111827', text: '#fff' },
+    sale: { bg: 'var(--seekora-badge-sale-bg, #ef4444)', text: 'var(--seekora-badge-sale-text, #fff)' },
+    new: { bg: 'var(--seekora-badge-new-bg, #3b82f6)', text: 'var(--seekora-badge-new-text, #fff)' },
+    soldOut: { bg: 'var(--seekora-badge-soldout-bg, #6b7280)', text: 'var(--seekora-badge-soldout-text, #fff)' },
+    limited: { bg: 'var(--seekora-badge-limited-bg, #f59e0b)', text: 'var(--seekora-badge-limited-text, #fff)' },
+    custom: { bg: 'var(--seekora-badge-custom-bg, #111827)', text: 'var(--seekora-badge-custom-text, #fff)' },
 };
 function BadgeList({ badges, maxBadges, position = 'top-left', className, style, }) {
     if (!badges || badges.length === 0)
@@ -9787,8 +10514,8 @@ function BadgeList({ badges, maxBadges, position = 'top-left', className, style,
     return (React.createElement("div", { className: clsx('seekora-badge-list', className), style: {
             display: 'flex',
             flexWrap: 'wrap',
-            gap: 4,
-            zIndex: 1,
+            gap: SPACING.xs,
+            zIndex: 2,
             ...positionStyles[position],
             ...style,
         } }, visible.map((badge, i) => {
@@ -9796,10 +10523,10 @@ function BadgeList({ badges, maxBadges, position = 'top-left', className, style,
         return (React.createElement("span", { key: `${badge.text}-${i}`, className: clsx('seekora-badge', badge.type && `seekora-badge--${badge.type === 'soldOut' ? 'sold-out' : badge.type}`), style: {
                 display: 'inline-block',
                 padding: '2px 8px',
-                borderRadius: 4,
+                borderRadius: BORDER_RADIUS$2.sm,
                 fontSize: '0.6875rem',
                 fontWeight: 600,
-                lineHeight: 1.4,
+                lineHeight: 1.2,
                 backgroundColor: badge.color ?? colors.bg,
                 color: badge.textColor ?? colors.text,
                 whiteSpace: 'nowrap',
@@ -10029,7 +10756,7 @@ function VariantSwatches({ options, visibleOptions, maxValues = 5, colorMap, sel
                             outlineOffset: 2,
                             cursor: onSwatchClick && isAvailable ? 'pointer' : 'not-allowed',
                             flexShrink: 0,
-                            boxShadow: isSelected ? '0 0 0 1px #fff' : 'none',
+                            boxShadow: isSelected ? 'var(--seekora-swatch-ring, 0 0 0 1px #fff)' : 'none',
                             opacity: isAvailable ? 1 : 0.3,
                             position: 'relative',
                         }, onMouseEnter: () => isAvailable && onSwatchHover?.(option.name, value), onMouseDown: (e) => {
@@ -10046,7 +10773,7 @@ function VariantSwatches({ options, visibleOptions, maxValues = 5, colorMap, sel
                             left: '-2px',
                             right: '-2px',
                             height: 1,
-                            backgroundColor: '#ef4444',
+                            backgroundColor: 'var(--seekora-unavailable-line, #ef4444)',
                             transform: 'translateY(-50%) rotate(-45deg)',
                         } }))));
                 }
@@ -10062,7 +10789,7 @@ function VariantSwatches({ options, visibleOptions, maxValues = 5, colorMap, sel
                             ? 'var(--seekora-primary, #111827)'
                             : 'transparent',
                         color: isSelected
-                            ? '#fff'
+                            ? 'var(--seekora-primary-text, #fff)'
                             : 'var(--seekora-text-secondary, #6b7280)',
                         cursor: onSwatchClick && isAvailable ? 'pointer' : 'not-allowed',
                         whiteSpace: 'nowrap',
@@ -10098,17 +10825,21 @@ function VariantSwatches({ options, visibleOptions, maxValues = 5, colorMap, sel
  * Not exported from the package. Each layout renders the same product data
  * with different visual emphasis.
  */
+const BORDER_RADIUS$1 = {
+    sm: 4};
 const imgPlaceholderStyle = {
     width: '100%',
     aspectRatio: '1',
     objectFit: 'cover',
-    borderRadius: 4,
+    borderRadius: BORDER_RADIUS$1.sm,
     backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
 };
 function ImageBlock({ images, title, imageVariant, aspectRatio, enableZoom, zoomMode, zoomLevel }) {
-    const ar = aspectRatio ? aspectRatio.replace(':', '/') : '1';
+    const ar = aspectRatio
+        ? (aspectRatio.includes(':') ? aspectRatio.replace(':', '/') : aspectRatio)
+        : '1';
     if (images.length > 0) {
-        return (React.createElement("div", { className: "seekora-product-card__image", style: { position: 'relative', overflow: 'hidden', borderRadius: 4 } },
+        return (React.createElement("div", { className: "seekora-product-card__image", style: { position: 'relative', overflow: 'hidden', borderRadius: BORDER_RADIUS$1.sm } },
             React.createElement(ImageDisplay, { images: images, variant: images.length > 1 ? imageVariant : 'single', alt: title, className: "seekora-suggestions-product-card-image", style: { aspectRatio: ar }, enableZoom: enableZoom, zoomMode: zoomMode, zoomLevel: zoomLevel })));
     }
     return React.createElement("div", { className: "seekora-product-card__image seekora-suggestions-product-card-placeholder", style: { ...imgPlaceholderStyle, aspectRatio: ar }, "aria-hidden": true });
@@ -10117,7 +10848,7 @@ function ImageBlock({ images, title, imageVariant, aspectRatio, enableZoom, zoom
 function MinimalLayout({ images, title, price, product, imageVariant, displayConfig, enableImageZoom, imageZoomMode, imageZoomLevel }) {
     return (React.createElement(React.Fragment, null,
         React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: displayConfig.imageAspectRatio, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
-        React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500 } }, title),
+        React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis' } }, title),
         price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price seekora-suggestions-product-card-price", style: { fontSize: '0.875rem', color: 'var(--seekora-text-secondary, #6b7280)' } },
             product.currency ?? '$',
             price.toFixed(2)))));
@@ -10125,31 +10856,35 @@ function MinimalLayout({ images, title, price, product, imageVariant, displayCon
 /** standard: image, badges, brand, title, price + compare price, color swatches */
 function StandardLayout({ images, title, price, comparePrice, brand, badges, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }) {
     const cfg = displayConfig;
+    // Normalize position: 'overlay-*' positions render over image, everything else renders inline
+    const isOverlayPosition = actionButtonsPosition?.startsWith('overlay');
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { style: { position: 'relative' } },
             React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
             cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left", maxBadges: 2 })),
-            actionButtons && actionButtons.length > 0 && actionButtonsPosition?.startsWith('overlay') && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
+            actionButtons && actionButtons.length > 0 && isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
         React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: 4 } },
             cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: '0.75rem', color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase', letterSpacing: '0.02em' } }, brand)),
-            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500 } }, title),
+            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis' } }, title),
             React.createElement("div", { className: "seekora-product-card__price" },
                 React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount, style: { fontSize: '0.875rem' } })),
             cfg.showVariants !== false && options.length > 0 && (React.createElement(VariantSwatches, { options: options, visibleOptions: cfg.variantOptionsToShow, maxValues: cfg.maxVariantValues, selectedValues: selectedVariants, variants: variants, onSwatchHover: onVariantHover, onSwatchClick: onVariantClick })),
-            actionButtons && actionButtons.length > 0 && actionButtonsPosition === 'inline' && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" })))));
+            actionButtons && actionButtons.length > 0 && !isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" })))));
 }
 /** detailed: image, badges, brand, title, price + compare + discount, rating, all swatches, stock */
 function DetailedLayout({ images, title, price, comparePrice, brand, badges, priceRange, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }) {
     const cfg = displayConfig;
     const available = product.available;
+    // Normalize position: 'overlay-*' positions render over image, everything else renders inline
+    const isOverlayPosition = actionButtonsPosition?.startsWith('overlay');
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { style: { position: 'relative' } },
             React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
             cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left" })),
-            actionButtons && actionButtons.length > 0 && actionButtonsPosition?.startsWith('overlay') && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
+            actionButtons && actionButtons.length > 0 && isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
         React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: 4 } },
             cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: '0.75rem', color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase', letterSpacing: '0.02em' } }, brand)),
-            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500 } }, title),
+            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis' } }, title),
             cfg.showRating !== false && product.rating != null && (React.createElement(RatingDisplay, { rating: product.rating, reviewCount: product.reviewCount, variant: "compact", size: "small", showNumeric: false, showReviewCount: true, className: "seekora-product-card__rating" })),
             React.createElement("div", { className: "seekora-product-card__price" }, cfg.showPriceRange && priceRange ? (React.createElement(PriceDisplay, { priceRange: priceRange, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, style: { fontSize: '0.875rem' } })) : (React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount, style: { fontSize: '0.875rem' } }))),
             cfg.showVariants !== false && options.length > 0 && (React.createElement(VariantSwatches, { options: options, visibleOptions: cfg.variantOptionsToShow, maxValues: cfg.maxVariantValues, selectedValues: selectedVariants, variants: variants, onSwatchHover: onVariantHover, onSwatchClick: onVariantClick })),
@@ -10157,7 +10892,7 @@ function DetailedLayout({ images, title, price, comparePrice, brand, badges, pri
                     fontSize: '0.75rem',
                     color: available ? 'var(--seekora-success, #22c55e)' : 'var(--seekora-error, #ef4444)',
                 } }, available ? 'In Stock' : 'Out of Stock')),
-            actionButtons && actionButtons.length > 0 && actionButtonsPosition === 'inline' && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" })))));
+            actionButtons && actionButtons.length > 0 && !isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" })))));
 }
 /** compact: smaller image, 1-line title, price */
 function CompactLayout({ images, title, price, product, imageVariant, displayConfig, enableImageZoom, imageZoomMode, imageZoomLevel }) {
@@ -10178,13 +10913,13 @@ function CompactLayout({ images, title, price, product, imageVariant, displayCon
 function HorizontalLayout({ images, title, price, comparePrice, brand, badges, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }) {
     const cfg = displayConfig;
     return (React.createElement("div", { style: { display: 'flex', gap: 12, alignItems: 'flex-start' } },
-        React.createElement("div", { style: { position: 'relative', width: 80, flexShrink: 0 } },
+        React.createElement("div", { style: { position: 'relative', minWidth: 80, flexBasis: '25%', maxWidth: 120, flexShrink: 0 } },
             React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: "1:1", enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
             cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left", maxBadges: 1 })),
             actionButtons && actionButtons.length > 0 && actionButtonsPosition?.startsWith('overlay') && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
         React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: 4, flex: 1, minWidth: 0 } },
             cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: '0.75rem', color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase' } }, brand)),
-            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500 } }, title),
+            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis' } }, title),
             React.createElement("div", { className: "seekora-product-card__price" },
                 React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount, style: { fontSize: '0.875rem' } })),
             cfg.showVariants !== false && options.length > 0 && (React.createElement(VariantSwatches, { options: options, visibleOptions: cfg.variantOptionsToShow, maxValues: cfg.maxVariantValues ?? 3, selectedValues: selectedVariants, variants: variants, onSwatchHover: onVariantHover, onSwatchClick: onVariantClick })),
@@ -10197,6 +10932,11 @@ function HorizontalLayout({ images, title, price, comparePrice, brand, badges, o
  * Without displayConfig: renders the original minimal layout (image, title, price).
  * With displayConfig: renders layout variants (minimal, standard, detailed, compact, horizontal).
  */
+const TRANSITIONS = {
+    fast: '150ms ease-in-out'};
+const BORDER_RADIUS = {
+    sm: 4,
+    md: 6};
 const cardStyle = {
     display: 'flex',
     flexDirection: 'column',
@@ -10204,19 +10944,19 @@ const cardStyle = {
     padding: 8,
     cursor: 'pointer',
     border: 'none',
-    borderRadius: 'var(--seekora-border-radius, 6px)',
+    borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS.md}px)`,
     backgroundColor: 'transparent',
     textAlign: 'left',
-    transition: 'background-color 120ms ease',
+    transition: `background-color ${TRANSITIONS.fast}`,
 };
 const imgStyle = {
     width: '100%',
     aspectRatio: '1',
     objectFit: 'cover',
-    borderRadius: 4,
+    borderRadius: BORDER_RADIUS.sm,
     backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
 };
-function ProductCard({ product, position, section, tabId, onSelect, className, style, imageVariant = 'single', displayConfig, onVariantHover, onVariantClick, selectedVariants, asLink, actionButtons, actionButtonsPosition = 'overlay-top-right', showActionLabels = false, enableImageZoom = false, imageZoomMode = 'both', imageZoomLevel = 2.5, }) {
+function ProductCard({ product, position, section, tabId, onSelect, className, style, imageVariant = 'single', displayConfig, onVariantHover, onVariantClick, selectedVariants, asLink, actionButtons, actionButtonsPosition = 'inline', showActionLabels = false, enableImageZoom = false, imageZoomMode = 'both', imageZoomLevel = 2.5, }) {
     // Find selected variant if selections are provided
     const selectedVariant = React.useMemo(() => {
         if (!selectedVariants || !product.options || !product.variants)
@@ -10261,9 +11001,11 @@ function ProductCard({ product, position, section, tabId, onSelect, className, s
     const price = effectivePrice;
     // If no displayConfig, render original minimal layout (backwards compat)
     if (!displayConfig) {
-        return (React.createElement("button", { type: "button", className: clsx('seekora-suggestions-product-card', className), style: { ...cardStyle, ...style }, onMouseDown: (e) => {
-                e.preventDefault();
-                onSelect();
+        return (React.createElement("div", { role: "button", tabIndex: 0, className: clsx('seekora-suggestions-product-card', className), style: { ...cardStyle, ...style }, onClick: () => onSelect(), onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onSelect();
+                }
             }, "data-position": position, "data-section": section, "data-tab-id": tabId },
             images.length > 0 ? (React.createElement(ImageDisplay, { images: images, variant: imageVariant, alt: title, className: "seekora-suggestions-product-card-image", enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel })) : (React.createElement("div", { className: "seekora-suggestions-product-card-placeholder", style: imgStyle, "aria-hidden": true })),
             React.createElement("span", { className: "seekora-suggestions-product-card-title", style: { fontSize: '0.875rem', fontWeight: 500 } }, title),
@@ -10333,9 +11075,11 @@ function ProductCard({ product, position, section, tabId, onSelect, className, s
             }, "data-position": position, "data-section": section, "data-tab-id": tabId },
             React.createElement(LayoutComponent, { ...layoutProps })));
     }
-    return (React.createElement("button", { type: "button", className: rootClassName, style: rootStyle, onMouseDown: (e) => {
-            e.preventDefault();
-            onSelect();
+    return (React.createElement("div", { role: "button", tabIndex: 0, className: rootClassName, style: rootStyle, onClick: () => onSelect(), onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onSelect();
+            }
         }, "data-position": position, "data-section": section, "data-tab-id": tabId },
         React.createElement(LayoutComponent, { ...layoutProps })));
 }
@@ -10611,10 +11355,10 @@ function VariantSelector({ options, variants, selections, onSelectionChange, opt
                     fontSize: '0.875rem',
                     fontWeight: 600,
                     marginBottom: 8,
-                    color: 'var(--seekora-text-primary, #111827)',
+                    color: 'var(--seekora-text-primary, inherit)',
                 } },
                 option.name,
-                selected && (React.createElement("span", { style: { fontWeight: 400, marginLeft: 6, color: 'var(--seekora-text-secondary, #6b7280)' } }, selected))),
+                selected && (React.createElement("span", { style: { fontWeight: 400, marginLeft: 6, color: 'var(--seekora-text-secondary, inherit)' } }, selected))),
             mode === 'dropdown' ? (React.createElement("select", { className: "seekora-variant-dropdown", value: selected ?? '', onChange: (e) => {
                     e.stopPropagation();
                     onSelectionChange(option.name, e.target.value);
@@ -10622,9 +11366,9 @@ function VariantSelector({ options, variants, selections, onSelectionChange, opt
                     padding: '8px 12px',
                     fontSize: '0.875rem',
                     borderRadius: 6,
-                    border: '1px solid var(--seekora-border-color, #e5e7eb)',
-                    backgroundColor: 'var(--seekora-bg-surface, #fff)',
-                    color: 'var(--seekora-text-primary, #111827)',
+                    border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+                    backgroundColor: 'var(--seekora-bg-surface, transparent)',
+                    color: 'var(--seekora-text-primary, inherit)',
                     cursor: 'pointer',
                     minWidth: 120,
                 } },
@@ -10658,7 +11402,7 @@ function VariantSelector({ options, variants, selections, onSelectionChange, opt
                             backgroundColor: color,
                             border: isActive
                                 ? '2px solid var(--seekora-primary, #111827)'
-                                : '1px solid var(--seekora-border-color, #e5e7eb)',
+                                : '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
                             outline: isActive ? '2px solid var(--seekora-primary, #111827)' : 'none',
                             outlineOffset: 2,
                             cursor: available ? 'pointer' : 'not-allowed',
@@ -10679,13 +11423,13 @@ function VariantSelector({ options, variants, selections, onSelectionChange, opt
                         borderRadius: 6,
                         border: isActive
                             ? '2px solid var(--seekora-primary, #111827)'
-                            : '1px solid var(--seekora-border-color, #e5e7eb)',
+                            : '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
                         backgroundColor: isActive
                             ? 'var(--seekora-primary, #111827)'
-                            : 'var(--seekora-bg-surface, #fff)',
+                            : 'var(--seekora-bg-surface, transparent)',
                         color: isActive
-                            ? '#fff'
-                            : 'var(--seekora-text-primary, #111827)',
+                            ? 'transparent'
+                            : 'var(--seekora-text-primary, inherit)',
                         cursor: available ? 'pointer' : 'not-allowed',
                         opacity: available ? 1 : 0.5,
                         textDecoration: !available ? 'line-through' : 'none',
@@ -10904,7 +11648,7 @@ function extractTotal(response) {
         return Number(data.data.total_results);
     return 0;
 }
-function SectionSearchProvider({ children, query, refinements = [], maxItems = 12, sortBy, enabled = true, sectionId, }) {
+function SectionSearchProvider({ children, query, refinements = [], maxItems = 12, sortBy, enabled = true, sectionId, searchOptions, }) {
     const { client } = useSearchContext();
     const [items, setItems] = React.useState([]);
     const [loading, setLoading] = React.useState(true);
@@ -10922,6 +11666,7 @@ function SectionSearchProvider({ children, query, refinements = [], maxItems = 1
         setLoading(true);
         setError(null);
         const options = {
+            ...searchOptions,
             per_page: maxItems,
             page: 1,
         };
@@ -10949,7 +11694,7 @@ function SectionSearchProvider({ children, query, refinements = [], maxItems = 1
         return () => {
             cancelled = true;
         };
-    }, [client, enabled, query, maxItems, sortBy, refinements]);
+    }, [client, enabled, query, maxItems, sortBy, refinements, searchOptions]);
     const trackClick = React.useCallback((item, position) => {
         if (!client?.trackEvent)
             return;
@@ -11014,9 +11759,9 @@ function SectionItemGrid({ columns = 4, maxItems = 12, className, style, showLoa
  * Uses ImageDisplay with configurable variant (carousel, thumbStrip, etc.).
  * For use on individual product page.
  */
-function ProductGallery({ images, variant = 'thumbStrip', alt = 'Product', className, style, carouselAutoplay, carouselIntervalMs, }) {
+function ProductGallery({ images, variant = 'thumbStrip', alt = 'Product', className, style, carouselAutoplay, carouselIntervalMs, enableZoom, zoomMode, zoomLevel, }) {
     return (React.createElement("div", { className: clsx('seekora-product-gallery', className), style: style },
-        React.createElement(ImageDisplay, { images: images, variant: variant, alt: alt, carouselAutoplay: carouselAutoplay, carouselIntervalMs: carouselIntervalMs })));
+        React.createElement(ImageDisplay, { images: images, variant: variant, alt: alt, carouselAutoplay: carouselAutoplay, carouselIntervalMs: carouselIntervalMs, enableZoom: enableZoom, zoomMode: zoomMode, zoomLevel: zoomLevel })));
 }
 
 /**
@@ -13320,8 +14065,8 @@ const createStyles$3 = (isMobile = false) => ({
         right: 0,
         bottom: isMobile ? 0 : 'auto',
         marginTop: isMobile ? 0 : '8px',
-        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
-        color: 'var(--seekora-text-primary, #121212)',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        color: 'var(--seekora-text-primary, inherit)',
         borderRadius: isMobile ? 0 : '16px',
         boxShadow: isMobile ? 'none' : '0 4px 30px rgba(0, 0, 0, 0.12)',
         overflow: 'hidden',
@@ -13339,14 +14084,14 @@ const createStyles$3 = (isMobile = false) => ({
         overflowY: 'auto',
     },
     leftPanel: {
-        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
-        borderRight: isMobile ? 'none' : '1px solid var(--seekora-border-color, #e8e8e1)',
-        borderBottom: isMobile ? '1px solid var(--seekora-border-color, #e8e8e1)' : 'none',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        borderRight: isMobile ? 'none' : '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderBottom: isMobile ? '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))' : 'none',
         display: 'flex',
         flexDirection: 'column',
     },
     rightPanel: {
-        backgroundColor: 'var(--seekora-bg-secondary, #fafafa)',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
         padding: isMobile ? '16px' : '24px',
         display: 'flex',
         flexDirection: 'column',
@@ -13361,7 +14106,7 @@ const createStyles$3 = (isMobile = false) => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
-        borderBottom: '1px solid var(--seekora-border-color, #e8e8e1)',
+        borderBottom: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
     },
     sectionTitle: {
         fontSize: '11px',
@@ -13372,7 +14117,7 @@ const createStyles$3 = (isMobile = false) => ({
     },
     viewAllLink: {
         fontSize: '12px',
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
         textDecoration: 'underline',
         cursor: 'pointer',
     },
@@ -13386,11 +14131,11 @@ const createStyles$3 = (isMobile = false) => ({
         minHeight: '48px',
         margin: '4px 8px',
         borderRadius: '10px',
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     suggestionItemActive: {
-        backgroundColor: 'var(--seekora-bg-hover, #f5f5f5)',
-        color: 'var(--seekora-text-primary, #121212)',
+        backgroundColor: 'var(--seekora-bg-hover, rgba(255, 255, 255, 0.1))',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     suggestionIcon: {
         display: 'flex',
@@ -13405,12 +14150,12 @@ const createStyles$3 = (isMobile = false) => ({
     },
     suggestionQuery: {
         fontSize: '14px',
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
         fontWeight: 400,
     },
     suggestionMeta: {
         fontSize: '12px',
-        color: 'var(--seekora-text-secondary, #666)',
+        color: 'var(--seekora-text-secondary, inherit)',
         marginTop: '2px',
     },
     suggestionArrow: {
@@ -13428,29 +14173,29 @@ const createStyles$3 = (isMobile = false) => ({
         display: 'grid',
         gridTemplateColumns: 'repeat(2, 1fr)',
         gap: '1px',
-        backgroundColor: 'var(--seekora-border-color, #e8e8e1)',
-        borderTop: '1px solid var(--seekora-border-color, #e8e8e1)',
+        backgroundColor: 'var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderTop: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
     },
     collectionItem: {
-        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
-        color: 'var(--seekora-text-primary, #121212)',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        color: 'var(--seekora-text-primary, inherit)',
         padding: '16px 20px',
         cursor: 'pointer',
         transition: 'background-color 150ms',
     },
     collectionItemHover: {
-        backgroundColor: 'var(--seekora-bg-hover, #f0f0f0)',
-        color: 'var(--seekora-text-primary, #121212)',
+        backgroundColor: 'var(--seekora-bg-hover, rgba(255, 255, 255, 0.1))',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     collectionName: {
         fontSize: '13px',
         fontWeight: 500,
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
         marginBottom: '4px',
     },
     collectionCount: {
         fontSize: '11px',
-        color: 'var(--seekora-text-secondary, #666)',
+        color: 'var(--seekora-text-secondary, inherit)',
     },
     heroProduct: {
         marginBottom: '24px',
@@ -13466,13 +14211,13 @@ const createStyles$3 = (isMobile = false) => ({
     heroTitle: {
         fontSize: '16px',
         fontWeight: 500,
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
         marginBottom: '8px',
         lineHeight: 1.3,
     },
     heroBrand: {
         fontSize: '12px',
-        color: 'var(--seekora-text-secondary, #666)',
+        color: 'var(--seekora-text-secondary, inherit)',
         marginBottom: '12px',
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
@@ -13486,7 +14231,7 @@ const createStyles$3 = (isMobile = false) => ({
     heroPrice: {
         fontSize: '18px',
         fontWeight: 500,
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     heroComparePrice: {
         fontSize: '14px',
@@ -13504,8 +14249,8 @@ const createStyles$3 = (isMobile = false) => ({
     heroButton: {
         width: '100%',
         padding: '14px 20px',
-        backgroundColor: 'var(--seekora-text-primary, #121212)',
-        color: 'var(--seekora-bg-surface, #ffffff)',
+        backgroundColor: 'var(--seekora-text-primary, inherit)',
+        color: 'var(--seekora-bg-surface, transparent)',
         border: 'none',
         borderRadius: '2px',
         fontSize: '13px',
@@ -13516,8 +14261,8 @@ const createStyles$3 = (isMobile = false) => ({
         transition: 'background-color 150ms',
     },
     heroButtonHover: {
-        backgroundColor: 'var(--seekora-text-secondary, #666666)',
-        color: 'var(--seekora-bg-surface, #ffffff)',
+        backgroundColor: 'var(--seekora-text-secondary, inherit)',
+        color: 'var(--seekora-bg-surface, transparent)',
     },
     productsScroll: {
         flex: 1,
@@ -13545,7 +14290,7 @@ const createStyles$3 = (isMobile = false) => ({
     },
     productTitle: {
         fontSize: '12px',
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
         marginBottom: '4px',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
@@ -13554,20 +14299,20 @@ const createStyles$3 = (isMobile = false) => ({
     productPrice: {
         fontSize: '12px',
         fontWeight: 500,
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     footer: {
         padding: '12px 20px',
-        borderTop: '1px solid var(--seekora-border-color, #e8e8e1)',
-        backgroundColor: 'var(--seekora-bg-secondary, #fafafa)',
+        borderTop: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         fontSize: '11px',
-        color: 'var(--seekora-text-secondary, #666)',
+        color: 'var(--seekora-text-secondary, inherit)',
     },
     footerLink: {
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
         textDecoration: 'underline',
         cursor: 'pointer',
     },
@@ -13576,13 +14321,13 @@ const createStyles$3 = (isMobile = false) => ({
         alignItems: 'center',
         justifyContent: 'center',
         padding: '60px',
-        color: 'var(--seekora-text-secondary, #666)',
+        color: 'var(--seekora-text-secondary, inherit)',
     },
     spinner: {
         width: '24px',
         height: '24px',
-        border: '2px solid var(--seekora-border-color, #e8e8e1)',
-        borderTopColor: 'var(--seekora-text-primary, #121212)',
+        border: '2px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderTopColor: 'var(--seekora-text-primary, inherit)',
         borderRadius: '50%',
         animation: 'seekora-spin 0.8s linear infinite',
     },
@@ -13773,7 +14518,7 @@ const createStyles$2 = () => ({
         left: 0,
         right: 0,
         bottom: 0,
-        backgroundColor: 'var(--seekora-bg-surface, #fff)',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
         borderRadius: '16px 16px 0 0',
         boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.15)',
         fontFamily: 'var(--seekora-font-family, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif)',
@@ -13797,17 +14542,17 @@ const createStyles$2 = () => ({
     dragBar: {
         width: '36px',
         height: '5px',
-        backgroundColor: 'var(--seekora-border-color, #e0e0e0)',
+        backgroundColor: 'var(--seekora-border-color, rgba(128,128,128,0.2))',
         borderRadius: '3px',
     },
     header: {
         padding: '0 16px 16px',
-        borderBottom: '1px solid var(--seekora-border-color, #f0f0f0)',
+        borderBottom: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
     },
     searchContainer: {
         display: 'flex',
         alignItems: 'center',
-        backgroundColor: 'var(--seekora-bg-secondary, #f5f5f5)',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
         borderRadius: '12px',
         padding: '12px 16px',
         gap: '12px',
@@ -13823,7 +14568,7 @@ const createStyles$2 = () => ({
         border: 'none',
         background: 'transparent',
         fontSize: '17px',
-        color: 'var(--seekora-text-primary, #000)',
+        color: 'var(--seekora-text-primary, inherit)',
         outline: 'none',
     },
     cancelBtn: {
@@ -13871,11 +14616,11 @@ const createStyles$2 = () => ({
         cursor: 'pointer',
         transition: 'background-color 100ms',
         minHeight: '56px', // Touch-friendly
-        color: 'var(--seekora-text-primary, #000)',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     itemActive: {
-        backgroundColor: 'var(--seekora-bg-hover, #f2f2f7)',
-        color: 'var(--seekora-text-primary, #000)',
+        backgroundColor: 'var(--seekora-bg-hover, rgba(255, 255, 255, 0.1))',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     itemIcon: {
         width: '24px',
@@ -13897,14 +14642,14 @@ const createStyles$2 = () => ({
     },
     itemTitle: {
         fontSize: '17px',
-        color: 'var(--seekora-text-primary, #000)',
+        color: 'var(--seekora-text-primary, inherit)',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
     },
     itemSubtitle: {
         fontSize: '15px',
-        color: 'var(--seekora-text-secondary, #8e8e93)',
+        color: 'var(--seekora-text-secondary, inherit)',
         marginTop: '2px',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
@@ -13937,7 +14682,7 @@ const createStyles$2 = () => ({
     },
     productTitle: {
         fontSize: '15px',
-        color: 'var(--seekora-text-primary, #000)',
+        color: 'var(--seekora-text-primary, inherit)',
         marginBottom: '4px',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
@@ -13946,19 +14691,19 @@ const createStyles$2 = () => ({
     productPrice: {
         fontSize: '15px',
         fontWeight: 600,
-        color: 'var(--seekora-text-primary, #000)',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     footer: {
         padding: '12px 16px',
         paddingBottom: 'calc(12px + env(safe-area-inset-bottom, 0px))',
-        borderTop: '1px solid var(--seekora-border-color, #f0f0f0)',
-        backgroundColor: 'var(--seekora-bg-secondary, #f8f8f8)',
+        borderTop: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
     },
     footerBtn: {
         width: '100%',
         padding: '16px',
         backgroundColor: 'var(--seekora-primary, #007aff)',
-        color: 'var(--seekora-text-inverse, #ffffff)',
+        color: 'var(--seekora-text-inverse, transparent)',
         border: 'none',
         borderRadius: '12px',
         fontSize: '17px',
@@ -13970,12 +14715,12 @@ const createStyles$2 = () => ({
         alignItems: 'center',
         justifyContent: 'center',
         padding: '60px',
-        color: 'var(--seekora-text-secondary, #8e8e93)',
+        color: 'var(--seekora-text-secondary, inherit)',
     },
     spinner: {
         width: '28px',
         height: '28px',
-        border: '3px solid var(--seekora-border-color, #e5e5ea)',
+        border: '3px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
         borderTopColor: 'var(--seekora-primary, #007aff)',
         borderRadius: '50%',
         animation: 'seekora-spin 0.8s linear infinite',
@@ -13983,7 +14728,7 @@ const createStyles$2 = () => ({
     empty: {
         padding: '60px 20px',
         textAlign: 'center',
-        color: 'var(--seekora-text-secondary, #8e8e93)',
+        color: 'var(--seekora-text-secondary, inherit)',
         fontSize: '17px',
     },
     emptyIcon: {
@@ -17448,6 +18193,7 @@ exports.CurrentRefinements = CurrentRefinements;
 exports.DocSearch = DocSearch;
 exports.DocSearchButton = DocSearchButton;
 exports.DropdownPanel = DropdownPanel;
+exports.FacetDropdown = FacetDropdown;
 exports.Facets = Facets;
 exports.FederatedDropdown = FederatedDropdown;
 exports.Fingerprint = Fingerprint;