@getlupa/client 1.15.14 → 1.16.0

package/dist/lupaSearch.js

@@ -7351,6 +7351,7 @@ const useOptionsStore = defineStore("options", () => {
   );
   const trackingOptions = ref({});
   const searchResultInitialFilters = ref({});
+  const productRecommendationOptions = ref({});
   const screenStore = useScreenStore();
   const envOptions = computed(
     () => {
@@ -7411,6 +7412,11 @@ const useOptionsStore = defineStore("options", () => {
   const setInitialFilters = ({ initialFilters: initialFilters2 }) => {
     searchResultInitialFilters.value = initialFilters2;
   };
+  const setProductRecommendationOptions = ({
+    options
+  }) => {
+    productRecommendationOptions.value = options;
+  };
   const getQueryParamName = (param) => {
     var _a;
     const nameMap = searchBoxOptions.value.queryParameterNames;
@@ -7427,10 +7433,12 @@ const useOptionsStore = defineStore("options", () => {
     searchResultsRoutingBehavior,
     defaultSearchResultPageSize,
     currentResolutionPageSizes,
+    productRecommendationOptions,
     setSearchBoxOptions,
     setTrackingOptions,
     setSearchResultOptions,
     setInitialFilters,
+    setProductRecommendationOptions,
     getQueryParamName
   };
 });
@@ -7518,7 +7526,7 @@ const getUserKey = () => {
     return void 0;
   }
 };
-const initTracking = (options) => {
+const initTracking$1 = (options) => {
   initBaseTracking(Boolean(options.trackBase));
   if (options.trackSession) {
     initSessionTracking();
@@ -7560,7 +7568,9 @@ const trackLupaEvent = (queryKey, data = {}, options) => {
     name: data.type,
     userId: getUserKey(),
     sessionId: getSessionKey(),
-    filters: data.filters
+    filters: data.filters,
+    metadata: data.metadata,
+    sourceItemId: data.sourceItemId
   };
   LupaSearchSdk.track(queryKey, eventData, options);
 };
@@ -8687,8 +8697,8 @@ const useSearchBoxStore = defineStore("searchBox", () => {
 });
 const _hoisted_1$1h = { id: "lupa-search-box-input-container" };
 const _hoisted_2$V = { class: "lupa-input-clear" };
-const _hoisted_3$E = { id: "lupa-search-box-input" };
-const _hoisted_4$t = ["value"];
+const _hoisted_3$C = { id: "lupa-search-box-input" };
+const _hoisted_4$s = ["value"];
 const _hoisted_5$j = ["aria-label", "placeholder"];
 const _hoisted_6$9 = /* @__PURE__ */ createBaseVNode("span", { class: "lupa-search-submit-icon" }, null, -1);
 const _hoisted_7$7 = [
@@ -8698,7 +8708,7 @@ const _hoisted_8$3 = {
   key: 0,
   class: "lupa-close-label"
 };
-const _sfc_main$1t = /* @__PURE__ */ defineComponent({
+const _sfc_main$1u = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxInput",
   props: {
     options: {},
@@ -8789,13 +8799,13 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
             onClick: clear2
           }, null, 2)
         ]),
-        createBaseVNode("div", _hoisted_3$E, [
+        createBaseVNode("div", _hoisted_3$C, [
           createBaseVNode("input", {
             class: "lupa-hint",
             "aria-hidden": "true",
             value: showHint.value ? suggestedValue.value.item.suggestion : "",
             disabled: ""
-          }, null, 8, _hoisted_4$t),
+          }, null, 8, _hoisted_4$s),
           withDirectives(createBaseVNode("input", mergeProps({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
           }, inputAttributes.value, {
@@ -8828,7 +8838,7 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1s = /* @__PURE__ */ defineComponent({
+const _sfc_main$1t = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxMoreResults",
   props: {
     labels: {},
@@ -8867,7 +8877,7 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$1g = { class: "lupa-search-box-history-item" };
 const _hoisted_2$U = { class: "lupa-search-box-history-item-content" };
-const _sfc_main$1r = /* @__PURE__ */ defineComponent({
+const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxHistoryItem",
   props: {
     item: {},
@@ -8902,7 +8912,7 @@ const _hoisted_1$1f = {
   key: 0,
   class: "lupa-search-box-history-panel"
 };
-const _sfc_main$1q = /* @__PURE__ */ defineComponent({
+const _sfc_main$1r = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxHistoryPanel",
   props: {
     options: {}
@@ -8945,7 +8955,7 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return hasHistory.value ? (openBlock(), createElementBlock("div", _hoisted_1$1f, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(history), (item, index) => {
-          return openBlock(), createBlock(_sfc_main$1r, {
+          return openBlock(), createBlock(_sfc_main$1s, {
             key: item,
             item,
             highlighted: index === highlightIndex.value,
@@ -8962,7 +8972,7 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$1e = { class: "lupa-search-box-no-results" };
-const _sfc_main$1p = /* @__PURE__ */ defineComponent({
+const _sfc_main$1q = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxNoResults",
   props: {
     labels: {}
@@ -9007,12 +9017,12 @@ const _hoisted_2$T = {
   "data-cy": "lupa-suggestion-value",
   class: "lupa-suggestion-value"
 };
-const _hoisted_3$D = {
+const _hoisted_3$B = {
   key: 2,
   class: "lupa-suggestion-facet",
   "data-cy": "lupa-suggestion-facet"
 };
-const _hoisted_4$s = {
+const _hoisted_4$r = {
   class: "lupa-suggestion-facet-label",
   "data-cy": "lupa-suggestion-facet-label"
 };
@@ -9020,7 +9030,7 @@ const _hoisted_5$i = {
   class: "lupa-suggestion-facet-value",
   "data-cy": "lupa-suggestion-facet-value"
 };
-const _sfc_main$1o = /* @__PURE__ */ defineComponent({
+const _sfc_main$1p = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxSuggestion",
   props: {
     suggestion: {},
@@ -9057,8 +9067,8 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
           "data-cy": "lupa-suggestion-value",
           innerHTML: _ctx.suggestion.displayHighlight
         }, null, 8, _hoisted_1$1d)) : (openBlock(), createElementBlock("div", _hoisted_2$T, toDisplayString(_ctx.suggestion.display), 1)),
-        _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$D, [
-          createBaseVNode("span", _hoisted_4$s, toDisplayString(facetLabel.value), 1),
+        _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$B, [
+          createBaseVNode("span", _hoisted_4$r, toDisplayString(facetLabel.value), 1),
           createBaseVNode("span", _hoisted_5$i, toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : createCommentVNode("", true)
       ]);
@@ -9069,7 +9079,7 @@ const _hoisted_1$1c = {
   id: "lupa-search-box-suggestions",
   "data-cy": "lupa-search-box-suggestions"
 };
-const _sfc_main$1n = /* @__PURE__ */ defineComponent({
+const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxSuggestions",
   props: {
     items: {},
@@ -9131,7 +9141,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$1c, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
-          return openBlock(), createBlock(_sfc_main$1o, {
+          return openBlock(), createBlock(_sfc_main$1p, {
             key: getSuggestionKey(item),
             class: normalizeClass(["lupa-suggestion", index === highlightedIndex.value ? "lupa-suggestion-highlighted" : ""]),
             suggestion: item,
@@ -9159,7 +9169,7 @@ const debounce$1 = (func, timeout) => {
     }, timeout);
   };
 };
-const _sfc_main$1m = /* @__PURE__ */ defineComponent({
+const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxSuggestionsWrapper",
   props: {
     panel: {},
@@ -9201,7 +9211,7 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
     const getSuggestionsDebounced = debounce$1(getSuggestions, props.debounce);
     watch(() => props.panel.limit, getSuggestionsDebounced);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1n, {
+      return openBlock(), createBlock(_sfc_main$1o, {
         items: searchResult.value,
         highlight: _ctx.panel.highlight,
         queryKey: _ctx.panel.queryKey,
@@ -18292,7 +18302,7 @@ const replaceImageWithPlaceholder = (e2, placeholder) => {
 };
 const _hoisted_1$1b = ["src"];
 const _hoisted_2$S = ["src"];
-const _sfc_main$1l = /* @__PURE__ */ defineComponent({
+const _sfc_main$1m = /* @__PURE__ */ defineComponent({
   __name: "ProductImage",
   props: {
     item: {},
@@ -18447,7 +18457,7 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1k = /* @__PURE__ */ defineComponent({
+const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductImage",
   props: {
     item: {},
@@ -18455,7 +18465,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1l, {
+      return openBlock(), createBlock(_sfc_main$1m, {
         item: _ctx.item,
         options: _ctx.options,
         "wrapper-class": "lupa-search-box-image-wrapper",
@@ -18469,7 +18479,7 @@ const _hoisted_2$R = {
   key: 1,
   class: "lupa-search-box-product-title"
 };
-const _sfc_main$1j = /* @__PURE__ */ defineComponent({
+const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductTitle",
   props: {
     item: {},
@@ -18503,7 +18513,7 @@ const _hoisted_2$Q = {
   key: 1,
   class: "lupa-search-box-product-description"
 };
-const _sfc_main$1i = /* @__PURE__ */ defineComponent({
+const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductDescription",
   props: {
     item: {},
@@ -18531,7 +18541,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$18 = { class: "lupa-search-box-product-price" };
-const _sfc_main$1h = /* @__PURE__ */ defineComponent({
+const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductPrice",
   props: {
     item: {},
@@ -18555,7 +18565,7 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1g = /* @__PURE__ */ defineComponent({
+const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductRegularPrice",
   props: {
     item: {},
@@ -18584,10 +18594,10 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$17 = ["innerHTML"];
 const _hoisted_2$P = { key: 0 };
-const _hoisted_3$C = { key: 1 };
-const _hoisted_4$r = { class: "lupa-search-box-custom-label" };
+const _hoisted_3$A = { key: 1 };
+const _hoisted_4$q = { class: "lupa-search-box-custom-label" };
 const _hoisted_5$h = { class: "lupa-search-box-custom-text" };
-const _sfc_main$1f = /* @__PURE__ */ defineComponent({
+const _sfc_main$1g = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductCustom",
   props: {
     item: {},
@@ -18617,8 +18627,8 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
         key: 1,
         class: [className.value, "lupa-search-box-product-custom"]
       }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
-        !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$P, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$C, [
-          createBaseVNode("div", _hoisted_4$r, toDisplayString(label.value), 1),
+        !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$P, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$A, [
+          createBaseVNode("div", _hoisted_4$q, toDisplayString(label.value), 1),
           createBaseVNode("div", _hoisted_5$h, toDisplayString(text.value), 1)
         ]))
       ], 16));
@@ -18626,7 +18636,7 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$16 = ["innerHTML"];
-const _sfc_main$1e = /* @__PURE__ */ defineComponent({
+const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductCustomHtml",
   props: {
     item: {},
@@ -18772,8 +18782,11 @@ const useSearchResultStore = defineStore("searchResult", () => {
       return hasResults.value && ((_a = searchResult.value.offset) != null ? _a : 0) >= totalItems.value;
     }
   );
-  const setSidebarState = ({ visible }) => {
-    if (visible) {
+  const setSidebarState = ({
+    visible,
+    disableBodyScrolling = true
+  }) => {
+    if (visible && disableBodyScrolling) {
       disableBodyScroll();
     } else {
       enableBodyScroll();
@@ -18887,8 +18900,8 @@ const useSearchResultStore = defineStore("searchResult", () => {
 });
 const _hoisted_1$15 = { class: "lupa-search-box-add-to-cart-wrapper" };
 const _hoisted_2$O = { class: "lupa-search-box-product-addtocart" };
-const _hoisted_3$B = ["onClick", "disabled"];
-const _sfc_main$1d = /* @__PURE__ */ defineComponent({
+const _hoisted_3$z = ["onClick", "disabled"];
+const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductAddToCart",
   props: {
     item: {},
@@ -18930,7 +18943,7 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
             "data-cy": "lupa-add-to-cart",
             type: "button",
             disabled: !inStockValue.value || loading.value
-          }, _ctx.dynamicAttributes), toDisplayString(label.value), 17, _hoisted_3$B)
+          }, _ctx.dynamicAttributes), toDisplayString(label.value), 17, _hoisted_3$z)
         ])
       ]);
     };
@@ -18942,17 +18955,17 @@ const _hoisted_1$14 = {
 };
 const __default__$4 = {
   components: {
-    SearchBoxProductImage: _sfc_main$1k,
-    SearchBoxProductTitle: _sfc_main$1j,
-    SearchBoxProductDescription: _sfc_main$1i,
-    SearchBoxProductPrice: _sfc_main$1h,
-    SearchBoxProductRegularPrice: _sfc_main$1g,
-    SearchBoxProductCustom: _sfc_main$1f,
-    SearchBoxProductCustomHtml: _sfc_main$1e,
-    SearchBoxProductAddToCart: _sfc_main$1d
+    SearchBoxProductImage: _sfc_main$1l,
+    SearchBoxProductTitle: _sfc_main$1k,
+    SearchBoxProductDescription: _sfc_main$1j,
+    SearchBoxProductPrice: _sfc_main$1i,
+    SearchBoxProductRegularPrice: _sfc_main$1h,
+    SearchBoxProductCustom: _sfc_main$1g,
+    SearchBoxProductCustomHtml: _sfc_main$1f,
+    SearchBoxProductAddToCart: _sfc_main$1e
   }
 };
-const _sfc_main$1c = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValues2({}, __default__$4), {
+const _sfc_main$1d = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValues2({}, __default__$4), {
   __name: "SearchBoxProductElement",
   props: {
     item: {},
@@ -19038,12 +19051,12 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValu
 }));
 const _hoisted_1$13 = { class: "lupa-badge-title" };
 const _hoisted_2$N = ["src"];
-const _hoisted_3$A = { key: 1 };
-const _hoisted_4$q = {
+const _hoisted_3$y = { key: 1 };
+const _hoisted_4$p = {
   key: 0,
   class: "lupa-badge-full-text"
 };
-const _sfc_main$1b = /* @__PURE__ */ defineComponent({
+const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   __name: "SearchResultGeneratedBadge",
   props: {
     options: {},
@@ -19081,15 +19094,15 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
             key: 0,
             src: image.value
           }, null, 8, _hoisted_2$N)) : createCommentVNode("", true),
-          hasTitleText.value && showTitle.value ? (openBlock(), createElementBlock("span", _hoisted_3$A, toDisplayString(_ctx.badge.titleText), 1)) : createCommentVNode("", true)
+          hasTitleText.value && showTitle.value ? (openBlock(), createElementBlock("span", _hoisted_3$y, toDisplayString(_ctx.badge.titleText), 1)) : createCommentVNode("", true)
         ]),
-        hasAdditionalText.value ? (openBlock(), createElementBlock("span", _hoisted_4$q, toDisplayString(_ctx.badge.additionalText), 1)) : createCommentVNode("", true)
+        hasAdditionalText.value ? (openBlock(), createElementBlock("span", _hoisted_4$p, toDisplayString(_ctx.badge.additionalText), 1)) : createCommentVNode("", true)
       ], 6);
     };
   }
 });
 const _hoisted_1$12 = { class: "lupa-generated-badges" };
-const _sfc_main$1a = /* @__PURE__ */ defineComponent({
+const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   __name: "SearchResultGeneratedBadges",
   props: {
     options: {}
@@ -19117,7 +19130,7 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$12, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(badges.value, (badge) => {
-          return openBlock(), createBlock(_sfc_main$1b, {
+          return openBlock(), createBlock(_sfc_main$1c, {
             key: badge.id,
             badge,
             options: _ctx.options
@@ -19128,7 +19141,7 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$11 = ["innerHTML"];
-const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   __name: "CustomBadge",
   props: {
     badge: {}
@@ -19154,7 +19167,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$10 = { class: "lupa-text-badges" };
-const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   __name: "TextBadge",
   props: {
     badge: {}
@@ -19181,7 +19194,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$$ = { class: "lupa-image-badges" };
 const _hoisted_2$M = ["src"];
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   __name: "ImageBadge",
   props: {
     badge: {}
@@ -19216,7 +19229,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   __name: "DiscountBadge",
   props: {
     badge: {}
@@ -19277,13 +19290,13 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
 const _hoisted_1$_ = { id: "lupa-search-results-badges" };
 const __default__$3 = {
   components: {
-    CustomBadge: _sfc_main$19,
-    TextBadge: _sfc_main$18,
-    ImageBadge: _sfc_main$17,
-    DiscountBadge: _sfc_main$16
+    CustomBadge: _sfc_main$1a,
+    TextBadge: _sfc_main$19,
+    ImageBadge: _sfc_main$18,
+    DiscountBadge: _sfc_main$17
   }
 };
-const _sfc_main$15 = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValues2({}, __default__$3), {
+const _sfc_main$16 = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValues2({}, __default__$3), {
   __name: "SearchResultsBadgeWrapper",
   props: {
     position: {},
@@ -19357,7 +19370,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValu
               badge
             }, null, 8, ["badge"]);
           }), 128)),
-          positionValue.value === "card" ? (openBlock(), createBlock(_sfc_main$1a, {
+          positionValue.value === "card" ? (openBlock(), createBlock(_sfc_main$1b, {
             key: 0,
             options: _ctx.options
           }, null, 8, ["options"])) : createCommentVNode("", true)
@@ -19368,11 +19381,11 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValu
 }));
 const _hoisted_1$Z = ["href"];
 const _hoisted_2$L = { class: "lupa-search-box-product-details-section" };
-const _hoisted_3$z = {
+const _hoisted_3$x = {
   key: 0,
   class: "lupa-search-box-product-add-to-cart-section"
 };
-const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProduct",
   props: {
     item: {},
@@ -19458,7 +19471,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
           style: normalizeStyle(imageStyleOverride.value)
         }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(imageElements.value, (element) => {
-            return openBlock(), createBlock(_sfc_main$1c, {
+            return openBlock(), createBlock(_sfc_main$1d, {
               class: "lupa-search-box-product-element",
               item: _ctx.item,
               element,
@@ -19471,7 +19484,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
         createBaseVNode("div", _hoisted_2$L, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(detailElements.value, (element) => {
             var _a;
-            return openBlock(), createBlock(_sfc_main$1c, {
+            return openBlock(), createBlock(_sfc_main$1d, {
               key: element.key,
               class: "lupa-search-box-product-element",
               item: _ctx.item,
@@ -19482,7 +19495,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
               badgeOptions.value && ((_a = badgeOptions.value) == null ? void 0 : _a.anchorElementKey) === element.key ? {
                 name: "badges",
                 fn: withCtx(() => [
-                  createVNode(_sfc_main$15, {
+                  createVNode(_sfc_main$16, {
                     options: badgeOptions.value,
                     position: "card"
                   }, null, 8, ["options"])
@@ -19492,8 +19505,8 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
             ]), 1032, ["item", "element", "labels", "link"]);
           }), 128))
         ]),
-        addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_3$z, [
-          createVNode(_sfc_main$1c, {
+        addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_3$x, [
+          createVNode(_sfc_main$1d, {
             class: "lupa-search-box-product-element",
             item: _ctx.item,
             element: addToCartElement.value,
@@ -19575,7 +19588,7 @@ const useTrackingStore = defineStore("tracking", () => {
   return { trackSearch, trackResults, trackEvent, trackDelayedEvent };
 });
 const _hoisted_1$Y = { id: "lupa-search-box-products" };
-const _sfc_main$13 = /* @__PURE__ */ defineComponent({
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProducts",
   props: {
     items: {},
@@ -19655,7 +19668,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
             itemClicked: handleProductClick
           });
         }), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.items, (item, index) => {
-          return openBlock(), createBlock(_sfc_main$14, {
+          return openBlock(), createBlock(_sfc_main$15, {
             key: index,
             item,
             panelOptions: _ctx.panelOptions,
@@ -19672,7 +19685,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$X = { class: "lupa-search-box-documents-go-to-results-wrapper" };
 const _hoisted_2$K = { key: 0 };
-const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductsGoToResultsButton",
   props: {
     options: {},
@@ -19782,7 +19795,7 @@ const processExtractionObject = (value = {}) => {
   }
   return parsedObject;
 };
-const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductsWrapper",
   props: {
     panel: {},
@@ -19847,7 +19860,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     watch(() => props.panel.limit, getItemsDebounced);
     return (_ctx, _cache) => {
       var _a, _b;
-      return openBlock(), createBlock(_sfc_main$13, {
+      return openBlock(), createBlock(_sfc_main$14, {
         items: (_b = (_a = searchResult.value) == null ? void 0 : _a.items) != null ? _b : [],
         panelOptions: _ctx.panel,
         labels: _ctx.labels,
@@ -19857,7 +19870,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
         default: withCtx(() => {
           var _a2;
           return [
-            showGoToResultsButton.value && ((_a2 = searchResult.value) == null ? void 0 : _a2.items.length) ? (openBlock(), createBlock(_sfc_main$12, {
+            showGoToResultsButton.value && ((_a2 = searchResult.value) == null ? void 0 : _a2.items.length) ? (openBlock(), createBlock(_sfc_main$13, {
               key: 0,
               options: _ctx.searchBoxOptions,
               panel: _ctx.panel,
@@ -19878,7 +19891,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxRelatedSourceWrapper",
   props: {
     panel: {},
@@ -19950,7 +19963,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       var _a, _b;
-      return openBlock(), createBlock(_sfc_main$13, {
+      return openBlock(), createBlock(_sfc_main$14, {
         items: (_b = (_a = searchResult.value) == null ? void 0 : _a.items) != null ? _b : [],
         panelOptions: documentPanelOptions.value,
         labels: _ctx.labels,
@@ -19973,11 +19986,11 @@ const _hoisted_1$W = {
   id: "lupa-search-box-panel"
 };
 const _hoisted_2$J = ["data-cy"];
-const _hoisted_3$y = {
+const _hoisted_3$w = {
   key: 0,
   class: "lupa-panel-title lupa-panel-title-top-results"
 };
-const _hoisted_4$p = {
+const _hoisted_4$o = {
   key: 1,
   class: "lupa-panel-title"
 };
@@ -19987,12 +20000,12 @@ const _hoisted_5$g = {
 };
 const __default__$2 = {
   components: {
-    SearchBoxSuggestionsWrapper: _sfc_main$1m,
-    SearchBoxProductsWrapper: _sfc_main$11,
-    SearchBoxRelatedSourceWrapper: _sfc_main$10
+    SearchBoxSuggestionsWrapper: _sfc_main$1n,
+    SearchBoxProductsWrapper: _sfc_main$12,
+    SearchBoxRelatedSourceWrapper: _sfc_main$11
   }
 };
-const _sfc_main$$ = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValues2({}, __default__$2), {
+const _sfc_main$10 = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValues2({}, __default__$2), {
   __name: "SearchBoxMainPanel",
   props: {
     options: {},
@@ -20169,8 +20182,8 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
                 style: normalizeStyle(panel.gridArea ? { gridArea: `${panel.gridArea}${index}` } : {}),
                 "data-cy": "lupa-panel-" + panel.type + "-index"
               }, [
-                ((_a = panel.labels) == null ? void 0 : _a.topResultsTitle) && showTopResultsPanelTitle(panel.queryKey) ? (openBlock(), createElementBlock("div", _hoisted_3$y, toDisplayString((_b = panel.labels) == null ? void 0 : _b.topResultsTitle), 1)) : createCommentVNode("", true),
-                ((_c = panel.labels) == null ? void 0 : _c.title) && showPanelTitle(panel) ? (openBlock(), createElementBlock("div", _hoisted_4$p, toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : createCommentVNode("", true),
+                ((_a = panel.labels) == null ? void 0 : _a.topResultsTitle) && showTopResultsPanelTitle(panel.queryKey) ? (openBlock(), createElementBlock("div", _hoisted_3$w, toDisplayString((_b = panel.labels) == null ? void 0 : _b.topResultsTitle), 1)) : createCommentVNode("", true),
+                ((_c = panel.labels) == null ? void 0 : _c.title) && showPanelTitle(panel) ? (openBlock(), createElementBlock("div", _hoisted_4$o, toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : createCommentVNode("", true),
                 panel.queryKey && canShowPanel(panel) ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
                   key: 2,
                   panel,
@@ -20195,18 +20208,18 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
               ], 14, _hoisted_2$J);
             }), 128))
           ], 4),
-          !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1p, {
+          !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1q, {
             key: 1,
             labels: labels.value
           }, null, 8, ["labels"])) : createCommentVNode("", true),
-          unref(hasAnyResults) || !_ctx.options.hideMoreResultsButtonOnNoResults ? (openBlock(), createBlock(_sfc_main$1s, {
+          unref(hasAnyResults) || !_ctx.options.hideMoreResultsButtonOnNoResults ? (openBlock(), createBlock(_sfc_main$1t, {
             key: 2,
             labels: labels.value,
             options: _ctx.options,
             onGoToResults: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("go-to-results"))
           }, null, 8, ["labels", "options"])) : createCommentVNode("", true)
         ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_5$g, [
-          createVNode(_sfc_main$1q, {
+          createVNode(_sfc_main$1r, {
             options: _ctx.options.history,
             history: history.value,
             onGoToResults: handleGoToResults,
@@ -20233,7 +20246,7 @@ const unbindSearchTriggers = (triggers = [], event) => {
 };
 const _hoisted_1$V = { id: "lupa-search-box" };
 const _hoisted_2$I = { class: "lupa-search-box-wrapper" };
-const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "SearchBox",
   props: {
     options: {},
@@ -20503,7 +20516,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
       var _a2;
       return openBlock(), createElementBlock("div", _hoisted_1$V, [
         createBaseVNode("div", _hoisted_2$I, [
-          createVNode(_sfc_main$1t, {
+          createVNode(_sfc_main$1u, {
             options: inputOptions.value,
             suggestedValue: suggestedValue.value,
             "can-close": (_a2 = _ctx.isSearchContainer) != null ? _a2 : false,
@@ -20516,7 +20529,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
             onSearch: handleSearch,
             onClose: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("close"))
           }, null, 8, ["options", "suggestedValue", "can-close", "emit-input-on-focus"]),
-          opened.value || _ctx.isSearchContainer ? (openBlock(), createBlock(_sfc_main$$, {
+          opened.value || _ctx.isSearchContainer ? (openBlock(), createBlock(_sfc_main$10, {
             key: 0,
             options: panelOptions.value,
             inputValue: inputValue.value,
@@ -20613,12 +20626,12 @@ const _hoisted_2$H = {
   key: 0,
   "data-cy": "suggested-search-text-label"
 };
-const _hoisted_3$x = {
+const _hoisted_3$v = {
   key: 1,
   "data-cy": "did-you-mean-label"
 };
-const _hoisted_4$o = { key: 1 };
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const _hoisted_4$n = { key: 1 };
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsDidYouMean",
   props: {
     labels: {}
@@ -20660,7 +20673,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
             ]);
           }), 128))
         ])) : createCommentVNode("", true),
-        didYouMeanValue.value ? (openBlock(), createElementBlock("div", _hoisted_3$x, [
+        didYouMeanValue.value ? (openBlock(), createElementBlock("div", _hoisted_3$v, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.labels.didYouMean.split(" "), (label, index) => {
             return openBlock(), createElementBlock("span", { key: index }, [
               label.includes("{1}") ? (openBlock(), createElementBlock("span", {
@@ -20668,7 +20681,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
                 class: "lupa-did-you-mean lupa-highlighted-search-text",
                 "data-cy": "did-you-mean-value",
                 onClick: _cache[0] || (_cache[0] = ($event) => goToResults({ searchText: didYouMeanValue.value }))
-              }, toDisplayString(didYouMeanValue.value) + " ", 1)) : (openBlock(), createElementBlock("span", _hoisted_4$o, toDisplayString(label) + " ", 1))
+              }, toDisplayString(didYouMeanValue.value) + " ", 1)) : (openBlock(), createElementBlock("span", _hoisted_4$n, toDisplayString(label) + " ", 1))
             ]);
           }), 128))
         ])) : createCommentVNode("", true)
@@ -20681,7 +20694,7 @@ const _hoisted_1$T = {
   class: "lupa-search-results-summary"
 };
 const _hoisted_2$G = ["innerHTML"];
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsSummary",
   props: {
     label: {},
@@ -20714,13 +20727,13 @@ const _hoisted_1$S = {
   "data-cy": "lupa-result-page-title"
 };
 const _hoisted_2$F = { key: 0 };
-const _hoisted_3$w = {
+const _hoisted_3$u = {
   key: 1,
   class: "lupa-results-total-count"
 };
-const _hoisted_4$n = { class: "lupa-results-total-count-number" };
+const _hoisted_4$m = { class: "lupa-results-total-count-number" };
 const _hoisted_5$f = ["innerHTML"];
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsTitle",
   props: {
     options: {},
@@ -20766,13 +20779,13 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
         showSearchTitle.value ? (openBlock(), createElementBlock("h1", _hoisted_1$S, [
           createTextVNode(toDisplayString(searchResultsTitleTemplate.value || _ctx.options.labels.searchResults), 1),
           queryText.value && !searchResultsTitleTemplate.value ? (openBlock(), createElementBlock("span", _hoisted_2$F, "'" + toDisplayString(queryText.value) + "'", 1)) : createCommentVNode("", true),
-          showProductCount.value ? (openBlock(), createElementBlock("span", _hoisted_3$w, [
+          showProductCount.value ? (openBlock(), createElementBlock("span", _hoisted_3$u, [
             createTextVNode("(" + toDisplayString(searchResultsCountLabel.value), 1),
-            createBaseVNode("span", _hoisted_4$n, toDisplayString(unref(totalItems)), 1),
+            createBaseVNode("span", _hoisted_4$m, toDisplayString(unref(totalItems)), 1),
             createTextVNode(")")
           ])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        _ctx.showSummary ? (openBlock(), createBlock(_sfc_main$Y, {
+        _ctx.showSummary ? (openBlock(), createBlock(_sfc_main$Z, {
           key: 1,
           label: summaryLabel.value
         }, null, 8, ["label"])) : createCommentVNode("", true),
@@ -20785,16 +20798,15 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$R = { class: "lupa-search-result-filter-value" };
-const _hoisted_2$E = {
+const _hoisted_1$R = {
   class: "lupa-current-filter-label",
   "data-cy": "lupa-current-filter-label"
 };
-const _hoisted_3$v = {
+const _hoisted_2$E = {
   class: "lupa-current-filter-value",
   "data-cy": "lupa-current-filter-value"
 };
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "CurrentFilterDisplay",
   props: {
     filter: {}
@@ -20802,18 +20814,23 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
   emits: ["remove"],
   setup(__props, { emit: emit2 }) {
     const props = __props;
+    const facetKeyClass = computed(() => {
+      return `lupa-facet-active-filter-${props.filter.key}`;
+    });
     const handleClick = () => {
       emit2("remove", { filter: props.filter });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$R, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["lupa-search-result-filter-value", { [facetKeyClass.value]: true }])
+      }, [
         createBaseVNode("div", {
           class: "lupa-current-filter-action",
           onClick: handleClick
         }, "⨉"),
-        createBaseVNode("div", _hoisted_2$E, toDisplayString(_ctx.filter.label) + ": ", 1),
-        createBaseVNode("div", _hoisted_3$v, toDisplayString(_ctx.filter.value), 1)
-      ]);
+        createBaseVNode("div", _hoisted_1$R, toDisplayString(_ctx.filter.label) + ": ", 1),
+        createBaseVNode("div", _hoisted_2$E, toDisplayString(_ctx.filter.value), 1)
+      ], 2);
     };
   }
 });
@@ -20822,12 +20839,12 @@ const _hoisted_2$D = {
   key: 0,
   class: "lupa-filter-count"
 };
-const _hoisted_3$u = {
+const _hoisted_3$t = {
   key: 0,
   class: "filter-values"
 };
-const _hoisted_4$m = { class: "lupa-current-filter-list" };
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _hoisted_4$l = { class: "lupa-current-filter-list" };
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "CurrentFilters",
   props: {
     options: {},
@@ -20909,10 +20926,10 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
             class: normalizeClass(["lupa-filter-title-caret", isOpen.value && "open"])
           }, null, 2)) : createCommentVNode("", true)
         ]),
-        !_ctx.expandable || isOpen.value ? (openBlock(), createElementBlock("div", _hoisted_3$u, [
-          createBaseVNode("div", _hoisted_4$m, [
+        !_ctx.expandable || isOpen.value ? (openBlock(), createElementBlock("div", _hoisted_3$t, [
+          createBaseVNode("div", _hoisted_4$l, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(currentDisplayFilters.value, (filter2) => {
-              return openBlock(), createBlock(_sfc_main$W, {
+              return openBlock(), createBlock(_sfc_main$X, {
                 key: filter2.key + "_" + filter2.value,
                 filter: filter2,
                 onRemove: handleRemove
@@ -20930,7 +20947,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$P = ["href"];
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "CategoryFilterItem",
   props: {
     options: {},
@@ -20977,10 +20994,10 @@ const _hoisted_1$O = {
   "data-cy": "lupa-category-filter"
 };
 const _hoisted_2$C = { class: "lupa-category-back" };
-const _hoisted_3$t = ["href"];
-const _hoisted_4$l = ["href"];
+const _hoisted_3$s = ["href"];
+const _hoisted_4$k = ["href"];
 const _hoisted_5$e = { class: "lupa-child-category-list" };
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "CategoryFilter",
   props: {
     options: {}
@@ -21075,7 +21092,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             "data-cy": "lupa-category-back",
             href: backUrlLink.value,
             onClick: handleNavigationBack
-          }, toDisplayString(backTitle.value), 9, _hoisted_3$t)) : createCommentVNode("", true)
+          }, toDisplayString(backTitle.value), 9, _hoisted_3$s)) : createCommentVNode("", true)
         ]),
         createBaseVNode("div", {
           class: normalizeClass(["lupa-current-category", { "lupa-current-category-active": isActive }])
@@ -21085,11 +21102,11 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             href: parentUrlLink.value,
             class: normalizeClass({ "lupa-title-category": !hasBackButton.value }),
             onClick: handleNavigationParent
-          }, toDisplayString(parentTitle.value), 11, _hoisted_4$l)
+          }, toDisplayString(parentTitle.value), 11, _hoisted_4$k)
         ], 2),
         createBaseVNode("div", _hoisted_5$e, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(categoryChildren.value, (child) => {
-            return openBlock(), createBlock(_sfc_main$U, {
+            return openBlock(), createBlock(_sfc_main$V, {
               key: getCategoryKey(child),
               item: child,
               options: _ctx.options
@@ -21105,8 +21122,8 @@ const _hoisted_1$N = {
   "data-cy": "lupa-search-result-facet-term-values"
 };
 const _hoisted_2$B = ["placeholder"];
-const _hoisted_3$s = { class: "lupa-terms-list" };
-const _hoisted_4$k = ["onClick"];
+const _hoisted_3$r = { class: "lupa-terms-list" };
+const _hoisted_4$j = ["onClick"];
 const _hoisted_5$d = { class: "lupa-term-checkbox-wrapper" };
 const _hoisted_6$8 = { class: "lupa-term-checkbox-label" };
 const _hoisted_7$6 = { class: "lupa-term-label" };
@@ -21116,7 +21133,7 @@ const _hoisted_8$2 = {
 };
 const _hoisted_9$2 = { key: 0 };
 const _hoisted_10$1 = { key: 1 };
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "TermFacet",
   props: {
     options: {},
@@ -21197,7 +21214,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
         }, null, 8, _hoisted_2$B)), [
           [vModelText, termFilter.value]
         ]) : createCommentVNode("", true),
-        createBaseVNode("div", _hoisted_3$s, [
+        createBaseVNode("div", _hoisted_3$r, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(displayValues.value, (item) => {
             return openBlock(), createElementBlock("div", {
               class: normalizeClass(["lupa-facet-term", { checked: isChecked(item) }]),
@@ -21214,7 +21231,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
                 createBaseVNode("span", _hoisted_7$6, toDisplayString(item.title), 1),
                 _ctx.options.showDocumentCount ? (openBlock(), createElementBlock("span", _hoisted_8$2, "(" + toDisplayString(item.count) + ")", 1)) : createCommentVNode("", true)
               ])
-            ], 10, _hoisted_4$k);
+            ], 10, _hoisted_4$j);
           }), 128))
         ]),
         displayShowMore.value ? (openBlock(), createElementBlock("div", {
@@ -22210,11 +22227,11 @@ const _hoisted_2$A = {
   key: 0,
   class: "lupa-stats-facet-summary"
 };
-const _hoisted_3$r = {
+const _hoisted_3$q = {
   key: 1,
   class: "lupa-stats-facet-summary-input"
 };
-const _hoisted_4$j = {
+const _hoisted_4$i = {
   key: 0,
   class: "lupa-stats-range-label"
 };
@@ -22233,7 +22250,7 @@ const _hoisted_13 = {
   key: 2,
   class: "lupa-stats-slider-wrapper"
 };
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "StatsFacet",
   props: {
     options: {},
@@ -22411,9 +22428,9 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$M, [
-        !isInputVisible.value ? (openBlock(), createElementBlock("div", _hoisted_2$A, toDisplayString(statsSummary.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$r, [
+        !isInputVisible.value ? (openBlock(), createElementBlock("div", _hoisted_2$A, toDisplayString(statsSummary.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$q, [
           createBaseVNode("div", null, [
-            rangeLabelFrom.value ? (openBlock(), createElementBlock("div", _hoisted_4$j, toDisplayString(rangeLabelFrom.value), 1)) : createCommentVNode("", true),
+            rangeLabelFrom.value ? (openBlock(), createElementBlock("div", _hoisted_4$i, toDisplayString(rangeLabelFrom.value), 1)) : createCommentVNode("", true),
             createBaseVNode("div", _hoisted_5$c, [
               withDirectives(createBaseVNode("input", {
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
@@ -22479,8 +22496,8 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$L = { class: "lupa-term-checkbox-wrapper" };
 const _hoisted_2$z = { class: "lupa-term-checkbox-label" };
-const _hoisted_3$q = { class: "lupa-term-label" };
-const _hoisted_4$i = {
+const _hoisted_3$p = { class: "lupa-term-label" };
+const _hoisted_4$h = {
   key: 0,
   class: "lupa-term-count"
 };
@@ -22488,7 +22505,7 @@ const _hoisted_5$b = {
   key: 0,
   class: "lupa-facet-level"
 };
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "HierarchyFacetLevel",
   props: {
     options: {},
@@ -22540,8 +22557,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             }, null, 2)
           ]),
           createBaseVNode("div", _hoisted_2$z, [
-            createBaseVNode("span", _hoisted_3$q, toDisplayString(_ctx.item.title) + toDisplayString(" "), 1),
-            _ctx.options.showDocumentCount ? (openBlock(), createElementBlock("span", _hoisted_4$i, "(" + toDisplayString(_ctx.item.count) + ")", 1)) : createCommentVNode("", true)
+            createBaseVNode("span", _hoisted_3$p, toDisplayString(_ctx.item.title) + toDisplayString(" "), 1),
+            _ctx.options.showDocumentCount ? (openBlock(), createElementBlock("span", _hoisted_4$h, "(" + toDisplayString(_ctx.item.count) + ")", 1)) : createCommentVNode("", true)
           ])
         ]),
         showChildren.value ? (openBlock(), createElementBlock("div", _hoisted_5$b, [
@@ -22565,8 +22582,8 @@ const _hoisted_1$K = {
   "data-cy": "lupa-search-result-facet-term-values"
 };
 const _hoisted_2$y = { key: 0 };
-const _hoisted_3$p = ["placeholder"];
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _hoisted_3$o = ["placeholder"];
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "HierarchyFacet",
   props: {
     options: {},
@@ -22628,12 +22645,12 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
             "data-cy": "lupa-term-filter",
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => termFilter.value = $event),
             placeholder: _ctx.options.labels.facetFilter
-          }, null, 8, _hoisted_3$p), [
+          }, null, 8, _hoisted_3$o), [
             [vModelText, termFilter.value]
           ])
         ])) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(displayValues.value, (item) => {
-          return openBlock(), createBlock(_sfc_main$Q, {
+          return openBlock(), createBlock(_sfc_main$R, {
             key: item.title,
             options: _ctx.options,
             item,
@@ -22665,12 +22682,12 @@ const _hoisted_2$x = {
 };
 const __default__$1 = {
   components: {
-    TermFacet: _sfc_main$S,
-    StatsFacet: _sfc_main$R,
-    HierarchyFacet: _sfc_main$P
+    TermFacet: _sfc_main$T,
+    StatsFacet: _sfc_main$S,
+    HierarchyFacet: _sfc_main$Q
   }
 };
-const _sfc_main$O = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValues2({}, __default__$1), {
+const _sfc_main$P = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValues2({}, __default__$1), {
   __name: "FacetDisplay",
   props: {
     options: {},
@@ -22727,6 +22744,9 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
       var _a2;
       return ((_a2 = currentFilterKeys.value) != null ? _a2 : []).join(",");
     });
+    const facetKeyClass = computed(() => {
+      return `lupa-facet-${facet.value.key}`;
+    });
     onMounted(() => {
       var _a2;
       if (((_a2 = props.options.style) == null ? void 0 : _a2.type) === "top-dropdown") {
@@ -22778,7 +22798,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
         "data-cy": "lupa-search-result-facet-display"
       }, [
         createBaseVNode("div", {
-          class: normalizeClass(["lupa-search-result-facet-label", { open: isOpen.value, "lupa-has-filter": hasFilter.value }]),
+          class: normalizeClass(["lupa-search-result-facet-label", { open: isOpen.value, "lupa-has-filter": hasFilter.value, [facetKeyClass.value]: true }]),
           "data-cy": "lupa-search-result-facet-label",
           onClick: toggleFacet
         }, [
@@ -22810,7 +22830,7 @@ const _hoisted_2$w = {
   key: 0,
   class: "lupa-facets-title"
 };
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "FacetList",
   props: {
     options: {},
@@ -22851,7 +22871,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
         }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(displayFacets.value, (facet) => {
             var _a2;
-            return openBlock(), createBlock(_sfc_main$O, {
+            return openBlock(), createBlock(_sfc_main$P, {
               key: facet.key,
               facet,
               currentFilters: currentFiltersValue.value,
@@ -22867,7 +22887,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$H = ["onClick"];
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "FacetsButton",
   props: {
     options: {}
@@ -22893,7 +22913,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$G = { class: "lupa-search-result-facets" };
 const _hoisted_2$v = { class: "lupa-facets-filter-button-wrapper" };
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "Facets",
   props: {
     options: {},
@@ -22977,7 +22997,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$G, [
-        regularFacets.value ? (openBlock(), createBlock(_sfc_main$N, {
+        regularFacets.value ? (openBlock(), createBlock(_sfc_main$O, {
           key: 0,
           options: _ctx.options,
           facets: regularFacets.value,
@@ -22988,7 +23008,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           onClear: clear2
         }, null, 8, ["options", "facets", "currentFilters", "facetStyle", "clearable"])) : createCommentVNode("", true),
         createBaseVNode("div", _hoisted_2$v, [
-          showFilterButton.value ? (openBlock(), createBlock(_sfc_main$M, {
+          showFilterButton.value ? (openBlock(), createBlock(_sfc_main$N, {
             key: 0,
             options: _ctx.options,
             onFilter: filter2
@@ -23002,7 +23022,7 @@ const _hoisted_1$F = {
   id: "lupa-search-result-filters",
   class: "lupa-search-result-filters"
 };
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsFilters",
   props: {
     options: {},
@@ -23036,18 +23056,18 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       var _a;
       return openBlock(), createElementBlock("div", _hoisted_1$F, [
-        showCurrentFilters.value ? (openBlock(), createBlock(_sfc_main$V, {
+        showCurrentFilters.value ? (openBlock(), createBlock(_sfc_main$W, {
           key: 0,
           options: _ctx.options.currentFilters,
           expandable: (_a = _ctx.expandable) != null ? _a : false
         }, null, 8, ["options", "expandable"])) : createCommentVNode("", true),
-        _ctx.options.categories ? (openBlock(), createBlock(_sfc_main$T, {
+        _ctx.options.categories ? (openBlock(), createBlock(_sfc_main$U, {
           key: 1,
           options: _ctx.options.categories,
           ref_key: "categoryFilters",
           ref: categoryFilters
         }, null, 8, ["options"])) : createCommentVNode("", true),
-        _ctx.options.facets ? (openBlock(), createBlock(_sfc_main$L, {
+        _ctx.options.facets ? (openBlock(), createBlock(_sfc_main$M, {
           key: 2,
           options: _ctx.options.facets,
           onFilter: filter2
@@ -23061,15 +23081,15 @@ const _hoisted_1$E = {
   class: "lupa-mobile-filter-sidebar"
 };
 const _hoisted_2$u = ["onClick"];
-const _hoisted_3$o = { class: "lupa-mobile-sidebar-content" };
-const _hoisted_4$h = { class: "lupa-sidebar-top" };
+const _hoisted_3$n = { class: "lupa-mobile-sidebar-content" };
+const _hoisted_4$g = { class: "lupa-sidebar-top" };
 const _hoisted_5$a = { class: "lupa-sidebar-title" };
 const _hoisted_6$6 = {
   key: 0,
   class: "lupa-sidebar-filter-count"
 };
 const _hoisted_7$4 = { class: "lupa-sidebar-filter-options" };
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "MobileFilterSidebar",
   props: {
     options: {}
@@ -23105,8 +23125,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
           class: "lupa-sidebar-close",
           onClick: withModifiers(handleMobileToggle, ["stop"])
         }, null, 8, _hoisted_2$u),
-        createBaseVNode("div", _hoisted_3$o, [
-          createBaseVNode("div", _hoisted_4$h, [
+        createBaseVNode("div", _hoisted_3$n, [
+          createBaseVNode("div", _hoisted_4$g, [
             createBaseVNode("div", _hoisted_5$a, [
               createTextVNode(toDisplayString(sidebarTitle.value) + " ", 1),
               isFilterCountVisible.value ? (openBlock(), createElementBlock("span", _hoisted_6$6, toDisplayString(unref(currentFilterCount)), 1)) : createCommentVNode("", true)
@@ -23117,7 +23137,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             })
           ]),
           createBaseVNode("div", _hoisted_7$4, [
-            createVNode(_sfc_main$K, {
+            createVNode(_sfc_main$L, {
               options: _ctx.options,
               expandable: isActiveFiltersExpanded.value,
               onFilter: filter2
@@ -23130,12 +23150,12 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$D = { id: "lupa-search-results-breadcrumbs" };
 const _hoisted_2$t = ["href", "onClick"];
-const _hoisted_3$n = {
+const _hoisted_3$m = {
   key: 1,
   class: "lupa-search-results-breadcrumb-text"
 };
-const _hoisted_4$g = { key: 2 };
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _hoisted_4$f = { key: 2 };
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsBreadcrumbs",
   props: {
     breadcrumbs: {}
@@ -23174,8 +23194,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
                 var _a;
                 return handleNavigation(e2, (_a = breadcrumb == null ? void 0 : breadcrumb.link) != null ? _a : "");
               }
-            }, toDisplayString(getLabel(breadcrumb.label)), 9, _hoisted_2$t)) : (openBlock(), createElementBlock("span", _hoisted_3$n, toDisplayString(getLabel(breadcrumb.label)), 1)),
-            index < breadcrumbsValue.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$g, " / ")) : createCommentVNode("", true)
+            }, toDisplayString(getLabel(breadcrumb.label)), 9, _hoisted_2$t)) : (openBlock(), createElementBlock("span", _hoisted_3$m, toDisplayString(getLabel(breadcrumb.label)), 1)),
+            index < breadcrumbsValue.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$f, " / ")) : createCommentVNode("", true)
           ]);
         }), 128))
       ]);
@@ -23186,7 +23206,7 @@ const _hoisted_1$C = {
   id: "lupa-search-result-filters",
   class: "lupa-search-result-filters lupa-search-result-top-filters"
 };
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "FiltersTopDropdown",
   props: {
     options: {}
@@ -23199,7 +23219,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       var _a;
       return openBlock(), createElementBlock("div", _hoisted_1$C, [
-        _ctx.options.facets ? (openBlock(), createBlock(_sfc_main$L, {
+        _ctx.options.facets ? (openBlock(), createBlock(_sfc_main$M, {
           key: 0,
           options: _ctx.options.facets,
           "facet-style": (_a = _ctx.options.facets.style) == null ? void 0 : _a.type,
@@ -23211,7 +23231,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$B = { id: "lupa-search-results-layout-selection" };
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsLayoutSelection",
   setup(__props) {
     const searchResultStore = useSearchResultStore();
@@ -23248,7 +23268,7 @@ const _hoisted_1$A = {
   key: 0,
   class: "lupa-mobile-toggle-filter-count"
 };
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsMobileToggle",
   props: {
     label: {},
@@ -23256,13 +23276,28 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const searchResultStore = useSearchResultStore();
+    const optionsStore = useOptionsStore();
     const { currentFilterCount } = storeToRefs(searchResultStore);
+    const { searchResultOptions } = storeToRefs(optionsStore);
+    const disableMobileBodyScrollLock = computed(
+      () => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = searchResultOptions.value.filters) == null ? void 0 : _a.facets) == null ? void 0 : _b.disableMobileBodyScrollLock) != null ? _c : false;
+      }
+    );
     const handleMobileToggle = () => {
-      searchResultStore.setSidebarState({ visible: true });
+      searchResultStore.setSidebarState({
+        visible: true,
+        disableBodyScrolling: !disableMobileBodyScrollLock.value
+      });
     };
+    const hasActiveFilters = computed(() => currentFilterCount.value > 0);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["lupa-mobile-toggle", { "lupa-mobile-toggle-filters-empty": unref(currentFilterCount) < 1 }]),
+        class: normalizeClass(["lupa-mobile-toggle", {
+          "lupa-mobile-toggle-filters-empty": unref(currentFilterCount) < 1,
+          "lupa-mobile-toggle-has-filters": hasActiveFilters.value
+        }]),
         onClick: handleMobileToggle
       }, [
         createTextVNode(toDisplayString(_ctx.label) + " ", 1),
@@ -23271,6 +23306,26 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
+  __name: "SearchResultsMobileFilterClose",
+  props: {
+    label: {}
+  },
+  setup(__props) {
+    const searchResultStore = useSearchResultStore();
+    const handleMobileToggle = () => {
+      searchResultStore.setSidebarState({
+        visible: false
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "lupa-mobile-filter-close-toggle",
+        onClick: handleMobileToggle
+      }, toDisplayString(_ctx.label), 1);
+    };
+  }
+});
 const _hoisted_1$z = {
   key: 0,
   id: "lupa-search-results-page-select",
@@ -23280,8 +23335,8 @@ const _hoisted_2$s = {
   key: 0,
   class: "lupa-page-number-separator"
 };
-const _hoisted_3$m = ["onClick"];
-const _hoisted_4$f = {
+const _hoisted_3$l = ["onClick"];
+const _hoisted_4$e = {
   key: 0,
   class: "lupa-page-number-separator"
 };
@@ -23384,10 +23439,10 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
               page === _ctx.options.selectedPage ? "lupa-page-number-selected" : ""
             ]),
             "data-cy": "lupa-page-number"
-          }, toDisplayString(page), 11, _hoisted_3$m);
+          }, toDisplayString(page), 11, _hoisted_3$l);
         }), 128)),
         showLastPage.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          showLastPageSeparator.value ? (openBlock(), createElementBlock("div", _hoisted_4$f, "...")) : createCommentVNode("", true),
+          showLastPageSeparator.value ? (openBlock(), createElementBlock("div", _hoisted_4$e, "...")) : createCommentVNode("", true),
           createBaseVNode("div", {
             class: "lupa-page-number lupa-page-number-last",
             onClick: _cache[2] || (_cache[2] = () => {
@@ -23411,8 +23466,8 @@ const _hoisted_1$y = {
   "data-cy": "lupa-search-results-page-size"
 };
 const _hoisted_2$r = { id: "lupa-select" };
-const _hoisted_3$l = { class: "lupa-select-label" };
-const _hoisted_4$e = ["aria-label"];
+const _hoisted_3$k = { class: "lupa-select-label" };
+const _hoisted_4$d = ["aria-label"];
 const _hoisted_5$9 = ["value"];
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsPageSize",
@@ -23444,7 +23499,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$y, [
         createBaseVNode("div", _hoisted_2$r, [
-          createBaseVNode("label", _hoisted_3$l, toDisplayString(label.value), 1),
+          createBaseVNode("label", _hoisted_3$k, toDisplayString(label.value), 1),
           createBaseVNode("select", {
             class: "lupa-select-dropdown",
             "aria-label": label.value,
@@ -23459,7 +23514,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                 value: option
               }, toDisplayString(prefixLabel.value) + toDisplayString(option), 9, _hoisted_5$9);
             }), 128))
-          ], 40, _hoisted_4$e)
+          ], 40, _hoisted_4$d)
         ])
       ]);
     };
@@ -23470,8 +23525,8 @@ const _hoisted_1$x = {
   class: "lupa-search-results-sort"
 };
 const _hoisted_2$q = { id: "lupa-select" };
-const _hoisted_3$k = { class: "lupa-select-label" };
-const _hoisted_4$d = ["aria-label"];
+const _hoisted_3$j = { class: "lupa-select-label" };
+const _hoisted_4$c = ["aria-label"];
 const _hoisted_5$8 = ["value"];
 const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsSort",
@@ -23524,7 +23579,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$x, [
         createBaseVNode("div", _hoisted_2$q, [
-          createBaseVNode("label", _hoisted_3$k, toDisplayString(_ctx.options.label), 1),
+          createBaseVNode("label", _hoisted_3$j, toDisplayString(_ctx.options.label), 1),
           withDirectives(createBaseVNode("select", {
             class: "lupa-select-dropdown",
             "aria-label": _ctx.options.label,
@@ -23539,7 +23594,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                 value: option.key
               }, toDisplayString(option.label), 9, _hoisted_5$8);
             }), 128))
-          ], 40, _hoisted_4$d), [
+          ], 40, _hoisted_4$c), [
             [vModelSelect, selectedKey.value]
           ])
         ])
@@ -23552,8 +23607,8 @@ const _hoisted_2$p = {
   key: 0,
   class: "lupa-toolbar-right-title"
 };
-const _hoisted_3$j = { key: 2 };
-const _hoisted_4$c = { key: 4 };
+const _hoisted_3$i = { key: 2 };
+const _hoisted_4$b = { key: 4 };
 const _hoisted_5$7 = { key: 6 };
 const _hoisted_6$5 = { class: "lupa-toolbar-right" };
 const _hoisted_7$3 = {
@@ -23578,7 +23633,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     const searchResultStore = useSearchResultStore();
     const optionsStore = useOptionsStore();
     const { page, limit } = storeToRefs(paramStore);
-    const { hasAnyFilter, searchResult } = storeToRefs(searchResultStore);
+    const { hasAnyFilter, searchResult, isMobileSidebarVisible } = storeToRefs(searchResultStore);
     const { currentResolutionPageSizes } = storeToRefs(optionsStore);
     const isBottomLocation = computed(() => {
       return props.paginationLocation === "bottom";
@@ -23595,6 +23650,10 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       var _a;
       return isBottomLocation.value ? false : Boolean((_a = optionsValue.value.toolbar) == null ? void 0 : _a.layoutSelector);
     });
+    const showFiltersCloseButton = computed(() => {
+      var _a;
+      return isBottomLocation.value ? false : Boolean((_a = optionsValue.value.toolbar) == null ? void 0 : _a.filtersCloseButton);
+    });
     const sortOptions = computed(() => {
       var _a, _b;
       if (isBottomLocation.value || !((_a = optionsValue.value.sort) == null ? void 0 : _a.length)) {
@@ -23671,13 +23730,13 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       }, [
         createBaseVNode("div", _hoisted_1$w, [
           toolbarLeftLabel.value ? (openBlock(), createElementBlock("div", _hoisted_2$p, toDisplayString(toolbarLeftLabel.value), 1)) : createCommentVNode("", true),
-          showLayoutSelection.value ? (openBlock(), createBlock(_sfc_main$G, { key: 1 })) : (openBlock(), createElementBlock("div", _hoisted_3$j)),
-          showItemSummary.value ? (openBlock(), createBlock(_sfc_main$Y, {
+          showLayoutSelection.value ? (openBlock(), createBlock(_sfc_main$H, { key: 1 })) : (openBlock(), createElementBlock("div", _hoisted_3$i)),
+          showItemSummary.value ? (openBlock(), createBlock(_sfc_main$Z, {
             key: 3,
             label: searchSummaryLabel.value,
             clearable: unref(hasAnyFilter) && showFilterClear.value,
             onClear: handleClearAll
-          }, null, 8, ["label", "clearable"])) : (openBlock(), createElementBlock("div", _hoisted_4$c)),
+          }, null, 8, ["label", "clearable"])) : (openBlock(), createElementBlock("div", _hoisted_4$b)),
           displayPageSelect.value ? (openBlock(), createBlock(_sfc_main$E, {
             key: 5,
             options: paginationOptions.value.pageSelect,
@@ -23687,7 +23746,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         ]),
         createBaseVNode("div", _hoisted_6$5, [
           toolbarRightLabel.value ? (openBlock(), createElementBlock("div", _hoisted_7$3, toDisplayString(toolbarRightLabel.value), 1)) : createCommentVNode("", true),
-          createVNode(_sfc_main$F, {
+          createVNode(_sfc_main$G, {
             label: optionsValue.value.labels.mobileFilterButton,
             "show-filter-count": showMobileFilterCount.value
           }, null, 8, ["label", "show-filter-count"]),
@@ -23700,7 +23759,11 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             key: 3,
             options: sortOptions.value,
             callbacks: callbacks.value
-          }, null, 8, ["options", "callbacks"])) : (openBlock(), createElementBlock("div", _hoisted_9))
+          }, null, 8, ["options", "callbacks"])) : (openBlock(), createElementBlock("div", _hoisted_9)),
+          showFiltersCloseButton.value && unref(isMobileSidebarVisible) ? (openBlock(), createBlock(_sfc_main$F, {
+            key: 5,
+            label: optionsValue.value.labels.mobileFilterCloseButton
+          }, null, 8, ["label"])) : createCommentVNode("", true)
         ])
       ], 2);
     };
@@ -23714,7 +23777,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1l, {
+      return openBlock(), createBlock(_sfc_main$1m, {
         item: _ctx.item,
         options: _ctx.options,
         "wrapper-class": "lupa-search-results-image-wrapper",
@@ -23725,8 +23788,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$v = ["title", "innerHTML"];
 const _hoisted_2$o = ["title"];
-const _hoisted_3$i = ["href", "innerHTML"];
-const _hoisted_4$b = ["title"];
+const _hoisted_3$h = ["href", "innerHTML"];
+const _hoisted_4$a = ["title"];
 const _hoisted_5$6 = {
   key: 0,
   class: "lupa-search-results-product-title-text"
@@ -23780,7 +23843,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           class: "lupa-search-results-product-title-text lupa-title-link",
           innerHTML: sanitizedTitle.value,
           onClick: handleNavigation
-        }, null, 8, _hoisted_3$i)
+        }, null, 8, _hoisted_3$h)
       ], 12, _hoisted_2$o)) : (openBlock(), createElementBlock("div", {
         key: 2,
         class: "lupa-search-results-product-title",
@@ -23794,7 +23857,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           class: "lupa-search-results-product-title-text lupa-title-link",
           onClick: handleNavigation
         }, toDisplayString(title.value), 9, _hoisted_6$4)) : createCommentVNode("", true)
-      ], 12, _hoisted_4$b));
+      ], 12, _hoisted_4$a));
     };
   }
 });
@@ -23836,8 +23899,8 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$t = { id: "lupa-search-results-rating" };
 const _hoisted_2$n = { class: "lupa-ratings" };
-const _hoisted_3$h = { class: "lupa-ratings-base" };
-const _hoisted_4$a = ["innerHTML"];
+const _hoisted_3$g = { class: "lupa-ratings-base" };
+const _hoisted_4$9 = ["innerHTML"];
 const _hoisted_5$5 = { class: "lupa-rating-wrapper" };
 const _hoisted_6$3 = ["innerHTML"];
 const _hoisted_7$2 = ["href"];
@@ -23881,13 +23944,13 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$t, [
         createBaseVNode("div", _hoisted_2$n, [
-          createBaseVNode("div", _hoisted_3$h, [
+          createBaseVNode("div", _hoisted_3$g, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(baseStars.value, (star, index) => {
               return openBlock(), createElementBlock("div", {
                 key: index,
                 innerHTML: star,
                 class: "lupa-rating lupa-rating-not-highlighted"
-              }, null, 8, _hoisted_4$a);
+              }, null, 8, _hoisted_4$9);
             }), 128))
           ]),
           createBaseVNode("div", _hoisted_5$5, [
@@ -23971,7 +24034,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$r = { class: "lupa-search-results-add-to-cart-wrapper" };
 const _hoisted_2$m = { class: "lupa-search-results-product-addtocart" };
-const _hoisted_3$g = ["id", "disabled", "onClick"];
+const _hoisted_3$f = ["id", "disabled", "onClick"];
 const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsProductAddToCart",
   props: {
@@ -24020,7 +24083,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             disabled: !inStockValue.value || loading.value
           }, _ctx.dynamicAttributes, {
             onClick: withModifiers(handleClick, ["stop"])
-          }), toDisplayString(label.value), 17, _hoisted_3$g)
+          }), toDisplayString(label.value), 17, _hoisted_3$f)
         ])
       ]);
     };
@@ -24028,8 +24091,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$q = ["innerHTML"];
 const _hoisted_2$l = { key: 0 };
-const _hoisted_3$f = { key: 1 };
-const _hoisted_4$9 = { class: "lupa-search-box-custom-label" };
+const _hoisted_3$e = { key: 1 };
+const _hoisted_4$8 = { class: "lupa-search-box-custom-label" };
 const _hoisted_5$4 = { class: "lupa-search-box-custom-text" };
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsProductCustom",
@@ -24073,8 +24136,8 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         key: 1,
         class: className.value
       }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
-        !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$l, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$f, [
-          createBaseVNode("div", _hoisted_4$9, toDisplayString(label.value), 1),
+        !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$l, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$e, [
+          createBaseVNode("div", _hoisted_4$8, toDisplayString(label.value), 1),
           createBaseVNode("div", _hoisted_5$4, toDisplayString(text.value), 1)
         ]))
       ], 16));
@@ -24119,8 +24182,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$o = { id: "lupa-search-results-rating" };
 const _hoisted_2$k = ["innerHTML"];
-const _hoisted_3$e = { class: "lupa-ratings" };
-const _hoisted_4$8 = ["href"];
+const _hoisted_3$d = { class: "lupa-ratings" };
+const _hoisted_4$7 = ["href"];
 const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsProductSingleStarRating",
   props: {
@@ -24154,11 +24217,11 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           innerHTML: star.value,
           class: "lupa-rating lupa-rating-highlighted"
         }, null, 8, _hoisted_2$k),
-        createBaseVNode("div", _hoisted_3$e, toDisplayString(rating.value), 1),
+        createBaseVNode("div", _hoisted_3$d, toDisplayString(rating.value), 1),
         createBaseVNode("a", {
           href: ratingLink.value,
           class: "lupa-total-ratings"
-        }, toDisplayString(totalRatings.value), 9, _hoisted_4$8)
+        }, toDisplayString(totalRatings.value), 9, _hoisted_4$7)
       ]);
     };
   }
@@ -24261,11 +24324,11 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
 }));
 const _hoisted_1$n = ["onMouseup"];
 const _hoisted_2$j = ["href"];
-const _hoisted_3$d = {
+const _hoisted_3$c = {
   key: 0,
   class: "lupa-out-of-stock"
 };
-const _hoisted_4$7 = { class: "lupa-search-result-product-details-section" };
+const _hoisted_4$6 = { class: "lupa-search-result-product-details-section" };
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsProductCard",
   props: {
@@ -24273,7 +24336,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     options: {},
     isAdditionalPanel: { type: Boolean },
     clickTrackingSettings: {},
-    lupaClickTrackingType: {}
+    lupaClickTrackingType: {},
+    sourceItemId: {},
+    analyticsMetadata: {}
   },
   setup(__props) {
     const props = __props;
@@ -24286,7 +24351,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const paramsStore = useParamsStore();
     const trackingStore = useTrackingStore();
     const { layout } = storeToRefs(searchResultStore);
-    const { searchResultsRoutingBehavior, searchResultOptions, trackingOptions } = storeToRefs(optionsStore);
+    const { searchResultsRoutingBehavior, searchResultOptions, productRecommendationOptions } = storeToRefs(optionsStore);
     const { query } = storeToRefs(paramsStore);
     const isInStock = ref(true);
     const listLayoutClass = computed(() => {
@@ -24383,7 +24448,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             itemId: id.value
           },
           options: { allowEmptySearchQuery: true },
-          filters: searchResultStore.hasAnyFilter ? searchResultStore.filters : void 0
+          filters: searchResultStore.hasAnyFilter ? searchResultStore.filters : void 0,
+          sourceItemId: props.lupaClickTrackingType === "recommendedItemClick" ? props.sourceItemId : void 0,
+          metadata: props.analyticsMetadata
         }
       };
       if (isDelayedClickTracking()) {
@@ -24427,7 +24494,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         onClick: handleClick,
         onMouseup: withModifiers(handleClick, ["middle", "exact"])
       }), [
-        createVNode(_sfc_main$15, { options: badgesOptions.value }, null, 8, ["options"]),
+        createVNode(_sfc_main$16, { options: badgesOptions.value }, null, 8, ["options"]),
         createBaseVNode("div", {
           class: normalizeClass(["lupa-search-result-product-contents", listLayoutClass.value])
         }, [
@@ -24448,14 +24515,14 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 onProductEvent: handleProductEvent
               }, null, 8, ["item", "element", "labels", "inStock", "link"]);
             }), 128)),
-            createVNode(_sfc_main$15, {
+            createVNode(_sfc_main$16, {
               options: badgesOptions.value,
               position: "image",
               class: "lupa-image-badges"
             }, null, 8, ["options"]),
-            ((_a = labels.value) == null ? void 0 : _a.outOfStock) && !isInStock.value ? (openBlock(), createElementBlock("div", _hoisted_3$d, toDisplayString(labels.value.outOfStock), 1)) : createCommentVNode("", true)
+            ((_a = labels.value) == null ? void 0 : _a.outOfStock) && !isInStock.value ? (openBlock(), createElementBlock("div", _hoisted_3$c, toDisplayString(labels.value.outOfStock), 1)) : createCommentVNode("", true)
           ], 8, _hoisted_2$j),
-          createBaseVNode("div", _hoisted_4$7, [
+          createBaseVNode("div", _hoisted_4$6, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(detailElements.value, (element) => {
               return openBlock(), createBlock(_sfc_main$q, {
                 class: "lupa-search-results-product-element",
@@ -24498,11 +24565,11 @@ const _hoisted_1$m = {
   "data-cy": "lupa-search-results-similar-queries"
 };
 const _hoisted_2$i = { class: "lupa-similar-queries-label" };
-const _hoisted_3$c = {
+const _hoisted_3$b = {
   class: "lupa-similar-query-label",
   "data-cy": "lupa-similar-query-label"
 };
-const _hoisted_4$6 = ["onClick"];
+const _hoisted_4$5 = ["onClick"];
 const _hoisted_5$3 = ["innerHTML"];
 const _hoisted_6$2 = { key: 0 };
 const _hoisted_7$1 = {
@@ -24538,12 +24605,20 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     }) => {
       paramsStore.goToResults({ searchText, facet });
     };
+    const getClickMetadata = (similarQuery) => {
+      var _a;
+      const isRegularSimilarQuery = (_a = similarQuery.displayQuery) == null ? void 0 : _a.includes("<del>");
+      return {
+        _lupaEventSource: isRegularSimilarQuery ? "similarQueries" : "similarQueriesAI",
+        _lupaUpdatedQuery: similarQuery.query
+      };
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$m, [
         createBaseVNode("div", _hoisted_2$i, toDisplayString(_ctx.labels.similarQueries), 1),
         (openBlock(true), createElementBlock(Fragment, null, renderList(similarQueries.value, (similarQuery, index) => {
           return openBlock(), createElementBlock("div", { key: index }, [
-            createBaseVNode("div", _hoisted_3$c, [
+            createBaseVNode("div", _hoisted_3$b, [
               createBaseVNode("span", null, toDisplayString(similarQueryLabel.value), 1),
               createBaseVNode("span", {
                 id: "lupa-similar-query-text-component",
@@ -24555,7 +24630,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                   innerHTML: getSimilarQueryContent(similarQuery.displayQuery)
                 }, null, 8, _hoisted_5$3),
                 similarQuery.count ? (openBlock(), createElementBlock("span", _hoisted_6$2, " (" + toDisplayString(similarQuery.count) + ")", 1)) : createCommentVNode("", true)
-              ], 8, _hoisted_4$6)
+              ], 8, _hoisted_4$5)
             ]),
             createBaseVNode("div", _hoisted_7$1, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(similarQuery.items, (product, index2) => {
@@ -24563,8 +24638,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                   style: normalizeStyle(_ctx.columnSize),
                   key: getDocumentKey(index2, product),
                   product,
-                  options: _ctx.productCardOptions
-                }, null, 8, ["style", "product", "options"]);
+                  options: _ctx.productCardOptions,
+                  "analytics-metadata": getClickMetadata(similarQuery)
+                }, null, 8, ["style", "product", "options", "analytics-metadata"]);
               }), 128))
             ])
           ]);
@@ -24733,7 +24809,7 @@ const _hoisted_1$i = {
   "data-cy": "lupa-search-results-similar-results"
 };
 const _hoisted_2$f = { class: "lupa-similar-results-label" };
-const _hoisted_3$b = {
+const _hoisted_3$a = {
   class: "lupa-products",
   "data-cy": "lupa-products"
 };
@@ -24752,17 +24828,23 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     const getDocumentKey = (index, product) => {
       return getProductKey(`${index}`, product, props.productCardOptions.idKey);
     };
+    const clickMetadata = computed(() => {
+      return {
+        _lupaEventSource: "similarResults"
+      };
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$i, [
         createBaseVNode("div", _hoisted_2$f, toDisplayString(_ctx.labels.similarResultsLabel), 1),
-        createBaseVNode("div", _hoisted_3$b, [
+        createBaseVNode("div", _hoisted_3$a, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(similarResults.value.items, (product, index) => {
             return openBlock(), createBlock(_sfc_main$p, {
               style: normalizeStyle(_ctx.columnSize),
               key: getDocumentKey(index, product),
               product,
-              options: _ctx.productCardOptions
-            }, null, 8, ["style", "product", "options"]);
+              options: _ctx.productCardOptions,
+              "analytics-metadata": clickMetadata.value
+            }, null, 8, ["style", "product", "options", "analytics-metadata"]);
           }), 128))
         ])
       ]);
@@ -24873,8 +24955,8 @@ const extractRelatedSource = (source, searchResults2, options, activeFilters) =>
 });
 const _hoisted_1$h = { class: "lupa-related-query-item" };
 const _hoisted_2$e = { class: "lupa-related-query-image" };
-const _hoisted_3$a = { class: "lupa-related-query-label" };
-const _hoisted_4$5 = { class: "lupa-related-query-title" };
+const _hoisted_3$9 = { class: "lupa-related-query-label" };
+const _hoisted_4$4 = { class: "lupa-related-query-title" };
 const _hoisted_5$2 = {
   key: 0,
   class: "lupa-related-query-count"
@@ -24972,7 +25054,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       var _a;
       return openBlock(), createElementBlock("div", _hoisted_1$h, [
         createBaseVNode("div", _hoisted_2$e, [
-          itemToDisplay.value && image.value ? (openBlock(), createBlock(_sfc_main$1l, {
+          itemToDisplay.value && image.value ? (openBlock(), createBlock(_sfc_main$1m, {
             key: 0,
             "wrapper-class": "lupa-related-query-image-wrapper",
             "image-class": "lupa-related-query-image",
@@ -24980,8 +25062,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             options: image.value
           }, null, 8, ["item", "options"])) : createCommentVNode("", true)
         ]),
-        createBaseVNode("div", _hoisted_3$a, [
-          createBaseVNode("span", _hoisted_4$5, toDisplayString(_ctx.query), 1),
+        createBaseVNode("div", _hoisted_3$9, [
+          createBaseVNode("span", _hoisted_4$4, toDisplayString(_ctx.query), 1),
           ((_a = _ctx.options) == null ? void 0 : _a.showCount) ? (openBlock(), createElementBlock("span", _hoisted_5$2, "(" + toDisplayString(totalItemCount.value) + ")", 1)) : createCommentVNode("", true)
         ])
       ]);
@@ -24996,7 +25078,7 @@ const _hoisted_2$d = {
   key: 0,
   class: "lupa-related-queries-title"
 };
-const _hoisted_3$9 = ["onClick"];
+const _hoisted_3$8 = ["onClick"];
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "RelatedQueries",
   props: {
@@ -25101,7 +25183,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   "existing-items-from-other-queries": allDisplayItems.value,
                   onLoaded: (item) => processLoadedItem(query, item)
                 }, null, 8, ["source-key", "options", "query", "existing-items-from-other-queries", "onLoaded"])
-              ], 8, _hoisted_3$9)
+              ], 8, _hoisted_3$8)
             ], 2)), [
               [vShow, querySourceResultMap.value[query.value] !== false]
             ]);
@@ -25143,7 +25225,7 @@ const _hoisted_1$f = {
   class: "lupa-redirection-suggestion"
 };
 const _hoisted_2$c = { class: "lupa-redirections-suggestion-label" };
-const _hoisted_3$8 = ["href"];
+const _hoisted_3$7 = ["href"];
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "RedirectionSuggestions",
   props: {
@@ -25169,7 +25251,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return redirectionSuggestion.value && label.value && link.value ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
         createBaseVNode("h4", _hoisted_2$c, [
-          createBaseVNode("a", { href: link.value }, toDisplayString(label.value), 9, _hoisted_3$8)
+          createBaseVNode("a", { href: link.value }, toDisplayString(label.value), 9, _hoisted_3$7)
         ])
       ])) : createCommentVNode("", true);
     };
@@ -25180,12 +25262,12 @@ const _hoisted_2$b = {
   class: "lupa-products",
   "data-cy": "lupa-products"
 };
-const _hoisted_3$7 = {
+const _hoisted_3$6 = {
   key: 1,
   class: "lupa-empty-results",
   "data-cy": "lupa-no-results-in-page"
 };
-const _hoisted_4$4 = {
+const _hoisted_4$3 = {
   key: 4,
   class: "lupa-empty-results",
   "data-cy": "lupa-no-results"
@@ -25286,6 +25368,13 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       var _a, _b;
       return Boolean((_b = (_a = searchResult.value.similarResults) == null ? void 0 : _a.items) == null ? void 0 : _b.length);
     });
+    const clickMetadata = computed(() => {
+      const hasDidYouMean = Boolean(searchResult.value.suggestedSearchText);
+      return hasDidYouMean ? {
+        _lupaEventSource: "didYouMean",
+        _lupaUpdatedQuery: searchResult.value.suggestedSearchText
+      } : void 0;
+    });
     const getProductKeyAction = (index, product) => {
       return getProductKey(`${index}`, product, props.options.idKey);
     };
@@ -25317,7 +25406,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           options: _ctx.options.relatedQueries
         }, null, 8, ["options"])) : createCommentVNode("", true),
         unref(hasResults) ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          showTopFilters.value ? (openBlock(), createBlock(_sfc_main$H, {
+          showTopFilters.value ? (openBlock(), createBlock(_sfc_main$I, {
             key: 0,
             options: (_a = _ctx.options.filters) != null ? _a : {}
           }, null, 8, ["options"])) : createCommentVNode("", true),
@@ -25328,7 +25417,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             "pagination-location": "top",
             onFilter: filter2
           }, null, 8, ["options"])) : createCommentVNode("", true),
-          currentFilterOptions.value && currentFilterPositionDesktop.value === "pageTop" ? (openBlock(), createBlock(_sfc_main$V, {
+          currentFilterOptions.value && currentFilterPositionDesktop.value === "pageTop" ? (openBlock(), createBlock(_sfc_main$W, {
             key: 2,
             class: normalizeClass(currentFiltersClass.value),
             "data-cy": "lupa-search-result-filters-mobile-toolbar",
@@ -25342,7 +25431,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             options: _ctx.options,
             "pagination-location": "top"
           }, null, 8, ["options"]),
-          currentFilterOptions.value && currentFilterPositionDesktop.value === "resultsTop" ? (openBlock(), createBlock(_sfc_main$V, {
+          currentFilterOptions.value && currentFilterPositionDesktop.value === "resultsTop" ? (openBlock(), createBlock(_sfc_main$W, {
             key: 0,
             class: normalizeClass(currentFiltersClass.value),
             "data-cy": "lupa-search-result-filters-mobile-toolbar",
@@ -25362,11 +25451,12 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 style: normalizeStyle(columnSize.value),
                 key: getProductKeyAction(index, product),
                 product,
-                options: productCardOptions.value
-              }, null, 8, ["style", "product", "options"]);
+                options: productCardOptions.value,
+                "analytics-metadata": clickMetadata.value
+              }, null, 8, ["style", "product", "options", "analytics-metadata"]);
             }), 128))
           ]),
-          unref(isPageEmpty) && _ctx.options.labels.noItemsInPage ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
+          unref(isPageEmpty) && _ctx.options.labels.noItemsInPage ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
             createTextVNode(toDisplayString(_ctx.options.labels.noItemsInPage) + " ", 1),
             _ctx.options.labels.backToFirstPage ? (openBlock(), createElementBlock("span", {
               key: 0,
@@ -25384,7 +25474,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             location: "bottom",
             sdkOptions: _ctx.options.options
           }, null, 8, ["options", "sdkOptions"])
-        ], 64)) : !unref(loading) && unref(currentQueryText) ? (openBlock(), createElementBlock("div", _hoisted_4$4, [
+        ], 64)) : !unref(loading) && unref(currentQueryText) ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
           createTextVNode(toDisplayString(_ctx.options.labels.emptyResults) + " ", 1),
           createBaseVNode("span", null, toDisplayString(unref(currentQueryText)), 1)
         ])) : createCommentVNode("", true),
@@ -25412,8 +25502,8 @@ const _hoisted_2$a = {
   key: 0,
   class: "lupa-category-back"
 };
-const _hoisted_3$6 = ["href"];
-const _hoisted_4$3 = {
+const _hoisted_3$5 = ["href"];
+const _hoisted_4$2 = {
   key: 1,
   class: "lupa-child-category-list"
 };
@@ -25471,11 +25561,11 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               "data-cy": "lupa-category-back",
               href: backUrlLink.value,
               onClick: handleNavigationBack
-            }, toDisplayString(backTitle.value), 9, _hoisted_3$6)
+            }, toDisplayString(backTitle.value), 9, _hoisted_3$5)
           ])) : createCommentVNode("", true),
-          hasRelatedCategoryChildren.value ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
+          hasRelatedCategoryChildren.value ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(relatedCategoryChildren), (child) => {
-              return openBlock(), createBlock(_sfc_main$U, {
+              return openBlock(), createBlock(_sfc_main$V, {
                 key: getCategoryKey(child),
                 item: child,
                 options: categoryOptions.value
@@ -25496,13 +25586,7 @@ const _hoisted_1$c = {
   key: 0,
   class: "lupa-container-title-summary-mobile"
 };
-const _hoisted_2$9 = {
-  key: 4,
-  id: "lupa-search-results",
-  class: "top-layout-wrapper"
-};
-const _hoisted_3$5 = { class: "search-content" };
-const _hoisted_4$2 = { id: "lupa-search-results" };
+const _hoisted_2$9 = { class: "search-content" };
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "SearchResults",
   props: {
@@ -25528,7 +25612,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       var _a, _b;
       return (_b = (_a = props.initialFilters) != null ? _a : extractedInitialFilters.value) != null ? _b : {};
     });
-    const { currentQueryText, hasResults, currentFilterCount } = storeToRefs(searchResultStore);
+    const { currentQueryText, hasResults, currentFilterCount, isMobileSidebarVisible, layout } = storeToRefs(searchResultStore);
     const { searchString, sortParams } = storeToRefs(paramStore);
     const { defaultSearchResultPageSize } = storeToRefs(optionStore);
     const searchResultsFilters = ref(null);
@@ -25544,6 +25628,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const isTitleResultTopPosition = computed(() => {
       return props.options.searchTitlePosition === "search-results-top";
     });
+    const indicatorClasses = computed(() => {
+      return {
+        "lupa-mobile-sidebar-visible": isMobileSidebarVisible.value,
+        "lupa-layout-grid": !layout.value || layout.value === ResultsLayoutEnum.GRID,
+        "lupa-layout-list": layout.value === ResultsLayoutEnum.LIST
+      };
+    });
     const handlePopState = () => {
       var _a;
       const searchParams = getSearchParams((_a = props.options.ssr) == null ? void 0 : _a.url);
@@ -25717,8 +25808,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["lupa-search-result-wrapper", { "lupa-search-wrapper-no-results": !unref(hasResults) }])
       }, [
         _ctx.isContainer ? (openBlock(), createElementBlock("div", _hoisted_1$c, [
-          createVNode(_sfc_main$Z, { labels: didYouMeanLabels.value }, null, 8, ["labels"]),
-          createVNode(_sfc_main$X, {
+          createVNode(_sfc_main$_, { labels: didYouMeanLabels.value }, null, 8, ["labels"]),
+          createVNode(_sfc_main$Y, {
             "show-summary": true,
             options: _ctx.options,
             "is-product-list": (_a = _ctx.isProductList) != null ? _a : false
@@ -25728,26 +25819,30 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           key: 1,
           options: _ctx.options
         }, null, 8, ["options"])) : createCommentVNode("", true),
-        _ctx.options.filters ? (openBlock(), createBlock(_sfc_main$J, {
+        _ctx.options.filters ? (openBlock(), createBlock(_sfc_main$K, {
           key: 2,
           options: _ctx.options.filters,
           onFilter: handleParamsChange
         }, null, 8, ["options"])) : createCommentVNode("", true),
-        unref(currentQueryText) || _ctx.isProductList ? (openBlock(), createBlock(_sfc_main$I, {
+        unref(currentQueryText) || _ctx.isProductList ? (openBlock(), createBlock(_sfc_main$J, {
           key: 3,
           breadcrumbs: _ctx.options.breadcrumbs
         }, null, 8, ["breadcrumbs"])) : createCommentVNode("", true),
-        isTitleResultTopPosition.value ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
-          showFilterSidebar.value ? (openBlock(), createBlock(_sfc_main$K, {
+        isTitleResultTopPosition.value ? (openBlock(), createElementBlock("div", {
+          key: 4,
+          id: "lupa-search-results",
+          class: normalizeClass(["top-layout-wrapper", indicatorClasses.value])
+        }, [
+          showFilterSidebar.value ? (openBlock(), createBlock(_sfc_main$L, {
             key: 0,
             options: (_b = _ctx.options.filters) != null ? _b : {},
             ref_key: "searchResultsFilters",
             ref: searchResultsFilters,
             onFilter: handleParamsChange
           }, null, 8, ["options"])) : createCommentVNode("", true),
-          createBaseVNode("div", _hoisted_3$5, [
-            createVNode(_sfc_main$Z, { labels: didYouMeanLabels.value }, null, 8, ["labels"]),
-            createVNode(_sfc_main$X, {
+          createBaseVNode("div", _hoisted_2$9, [
+            createVNode(_sfc_main$_, { labels: didYouMeanLabels.value }, null, 8, ["labels"]),
+            createVNode(_sfc_main$Y, {
               options: _ctx.options,
               "is-product-list": (_c = _ctx.isProductList) != null ? _c : false
             }, null, 8, ["options", "is-product-list"]),
@@ -25762,14 +25857,17 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               _: 3
             }, 8, ["options", "ssr"])
           ])
-        ])) : (openBlock(), createElementBlock(Fragment, { key: 5 }, [
-          createVNode(_sfc_main$Z, { labels: didYouMeanLabels.value }, null, 8, ["labels"]),
-          createVNode(_sfc_main$X, {
+        ], 2)) : (openBlock(), createElementBlock(Fragment, { key: 5 }, [
+          createVNode(_sfc_main$_, { labels: didYouMeanLabels.value }, null, 8, ["labels"]),
+          createVNode(_sfc_main$Y, {
             options: _ctx.options,
             "is-product-list": (_d = _ctx.isProductList) != null ? _d : false
           }, null, 8, ["options", "is-product-list"]),
-          createBaseVNode("div", _hoisted_4$2, [
-            showFilterSidebar.value ? (openBlock(), createBlock(_sfc_main$K, {
+          createBaseVNode("div", {
+            id: "lupa-search-results",
+            class: normalizeClass(indicatorClasses.value)
+          }, [
+            showFilterSidebar.value ? (openBlock(), createBlock(_sfc_main$L, {
               key: 0,
               options: (_e = _ctx.options.filters) != null ? _e : {},
               ref_key: "searchResultsFilters",
@@ -25794,7 +25892,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 key: "0"
               } : void 0
             ]), 1032, ["options", "ssr"])
-          ])
+          ], 2)
         ], 64))
       ], 2);
     };
@@ -31403,7 +31501,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           onClick: withModifiers(innerClick, ["stop"])
         }, [
           createBaseVNode("div", _hoisted_2$7, [
-            createVNode(_sfc_main$_, {
+            createVNode(_sfc_main$$, {
               options: fullSearchBoxOptions.value,
               "is-search-container": true,
               ref_key: "searchBox",
@@ -32192,6 +32290,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       optionsStore.setSearchResultOptions({
         options: props.options
       });
+      optionsStore.setProductRecommendationOptions({
+        options: props.options
+      });
       if (props.options.lazyLoad) {
         initIntersectionObserver();
       } else {
@@ -32296,8 +32397,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       createVNode(_sfc_main$p, {
                         product,
                         options: _ctx.options,
-                        "click-tracking-settings": clickTrackingSettings.value
-                      }, null, 8, ["product", "options", "click-tracking-settings"])
+                        "click-tracking-settings": clickTrackingSettings.value,
+                        "lupa-click-tracking-type": `recommendedItemClick`,
+                        "source-item-id": itemId.value
+                      }, null, 8, ["product", "options", "click-tracking-settings", "source-item-id"])
                     ]),
                     _: 2
                   }, 1024);
@@ -32311,8 +32414,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   key: getProductKeyAction(index, product),
                   product,
                   options: _ctx.options,
-                  "lupa-click-tracking-type": `recommendedItemClick`
-                }, null, 8, ["style", "product", "options"]);
+                  "lupa-click-tracking-type": `recommendedItemClick`,
+                  "source-item-id": itemId.value
+                }, null, 8, ["style", "product", "options", "source-item-id"]);
               }), 128))
             ]))
           ])) : createCommentVNode("", true)
@@ -32927,7 +33031,7 @@ const _hoisted_4 = {
   key: 0,
   class: "lupasearch-chat-content"
 };
-const _sfc_main$1u = /* @__PURE__ */ defineComponent({
+const _sfc_main$1v = /* @__PURE__ */ defineComponent({
   __name: "ChatContainer",
   props: {
     options: {}
@@ -33050,7 +33154,7 @@ const initPinia = () => {
 const setupTracking = (options) => {
   const pinia = initPinia();
   const store = useOptionsStore(pinia);
-  initTracking(options);
+  initTracking$1(options);
   store.setTrackingOptions({ options });
 };
 const displayDiscountedPriceSection = (doc2, options) => {
@@ -38945,7 +39049,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
     __expose({ fetch: fetch2 });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$_), {
+      return openBlock(), createBlock(unref(_sfc_main$$), {
         options: fullSearchBoxOptions.value,
         ref_key: "searchBox",
         ref: searchBox2
@@ -39500,7 +39604,7 @@ const chat = (options, mountOptions) => {
   const instance = createVue(
     options.displayOptions.containerSelector,
     mountOptions == null ? void 0 : mountOptions.mountingBehavior,
-    _sfc_main$1u,
+    _sfc_main$1v,
     {
       options
     }
@@ -39925,6 +40029,16 @@ const mountChat = (configuration, options, fetch2 = true, remount = false) => __
     { fetch: fetch2, allowedMountUrls }
   );
 });
+const initTracking = (configuration) => __async(exports, null, function* () {
+  let trackingOptions = { trackBase: false };
+  if (configuration.tracking) {
+    const resolvedConfiguration = JSON.parse(configuration.tracking);
+    if (resolvedConfiguration.trackBase) {
+      trackingOptions = resolvedConfiguration;
+    }
+  }
+  setupTracking(trackingOptions);
+});
 const mount = (_0, ..._1) => __async(exports, [_0, ..._1], function* (configuration, options = { environment: "production" }, optionOverrides = {}, fetch2 = true, remount = false) {
   yield applyStyles(configuration);
   const mountPromises = [
@@ -39935,6 +40049,7 @@ const mount = (_0, ..._1) => __async(exports, [_0, ..._1], function* (configurat
     mountChat(configuration, options, fetch2, remount)
   ];
   yield Promise.all(mountPromises);
+  initTracking(configuration);
 });
 const init$1 = (_0, ..._1) => __async(exports, [_0, ..._1], function* (configurationKey, options = { environment: "production" }, optionOverrides = {}) {
   var _a;