@depict-ai/ui 0.0.79 → 0.0.81

package/dist/main.js

@@ -31,11 +31,11 @@ $parcel$export(module.exports, "DepictAPI", () => $9ce64f69303c371e$export$e015e
 $parcel$export(module.exports, "media_query_to_accessor", () => $beec9d22e42ed2cf$export$d9f36cf74e24d595);
 $parcel$export(module.exports, "setup_fast_leave", () => $d589470b68ce5b67$export$689e204eadb33baf);
 $parcel$export(module.exports, "show_toast", () => $b3e6a0e9382bf87e$export$5196e4c01fa56fcb);
-$parcel$export(module.exports, "solid_format_price", () => $5fc9fc23df1591db$export$469c7af753d08925);
+$parcel$export(module.exports, "SolidFormatPrice", () => $5fc9fc23df1591db$export$a71e92cfbb498adc);
 $parcel$export(module.exports, "connect_search_field_height_to_aligner_height", () => $246e3e89a097f014$export$828dcdd425fd3231);
 $parcel$export(module.exports, "PageReplacer", () => $37e96a5ebc768cc7$export$3ccaa27d81dd8556);
 $parcel$export(module.exports, "version", () => $ae93561d5649a847$export$83d89fbfd8236492);
-/*! Depict.ai search and product listing SDK */ const $ae93561d5649a847$export$83d89fbfd8236492 = "0.0.79";
+/*! Depict.ai search and product listing SDK */ const $ae93561d5649a847$export$83d89fbfd8236492 = "0.0.81";
 
 
 
@@ -57,25 +57,28 @@ async function $8c4e48a4bf96b284$export$58e808b1db15d3bc({ merchant: merchant ,
 
 
 
-function $1ee6da2465098194$export$e183a13865960371(params_to_default_value) {
+function $1ee6da2465098194$export$e183a13865960371(params_to_default_value, router_) {
     const signals = {};
     const entries = Object.entries(params_to_default_value);
     const event_handler = (0, $46MJV$depictaiutilishared.catchify)(({ state: state  })=>$1ee6da2465098194$var$history_state_change(signals, entries, state));
-    for (const [param, default_value] of entries){
-        const [read_signal] = signals[param] = (0, $46MJV$solidjs.createSignal)(history.state?.[param] ?? default_value);
-        (0, $46MJV$solidjs.createComputed)((0, $46MJV$depictaiutilishared.catchify)(()=>{
+    // createRenderEffect because we need the instant execution so the signals always contain values, even before solid's render phase
+    (0, $46MJV$solidjs.createRenderEffect)(()=>{
+        let signal_changed = false;
+        let { state: state  } = history; // cloning isn't necessary because we're calling replaceState on it anyway
+        if (state === null || typeof state != "object") state = {};
+        for (const [param, default_value] of entries){
+            const [read_signal] = signals[param] ||= (0, $46MJV$solidjs.createSignal)(state[param] ?? default_value);
             const new_value = read_signal();
-            let { state: state  } = history; // cloning isn't necessary because we're calling replaceState on it anyway
-            if (new_value !== state?.[param]) {
-                if (state === null || typeof state != "object") state = {};
+            if (new_value !== state[param]) {
+                signal_changed = true;
                 state[param] = new_value;
-                history.replaceState(state, "", location.href);
             }
-        }));
-    }
+        }
+        if (signal_changed) router_.navigate_.replace_state_(state);
+    });
     window.addEventListener("popstate", event_handler);
     (0, $46MJV$solidjs.onCleanup)((0, $46MJV$depictaiutilishared.catchify)(()=>window.removeEventListener("popstate", event_handler)));
-    (0, $46MJV$solidjs.createEffect)((0, $46MJV$depictaiutilishared.catchify)(()=>(0, $46MJV$solidjs.untrack)((0, $46MJV$depictaiutilishared.catchify)(()=>$1ee6da2465098194$var$history_state_change(signals, entries, history.state))))); // we need this to run after the first writing
+    (0, $46MJV$solidjs.createEffect)((0, $46MJV$depictaiutilishared.catchify)(()=>(0, $46MJV$solidjs.untrack)((0, $46MJV$depictaiutilishared.catchify)(()=>$1ee6da2465098194$var$history_state_change(signals, entries, history.state))))); // we need this to run after reading the initial state from history.state to write the defaults to history.state
     return signals;
 }
 function $1ee6da2465098194$var$history_state_change(signals, entries, state) {
@@ -89,8 +92,8 @@ function $1ee6da2465098194$var$history_state_change(signals, entries, state) {
 }
 
 
-function $0de081f67b6d15b5$export$9862539c89138352(get_default_values_) {
-    const state = (0, $1ee6da2465098194$export$e183a13865960371)(get_default_values_());
+function $0de081f67b6d15b5$export$9862539c89138352(get_default_values_, router_) {
+    const state = (0, $1ee6da2465098194$export$e183a13865960371)(get_default_values_(), router_);
     const reset_state = ()=>{
         const new_defaults = get_default_values_();
         for(const key in state){
@@ -315,8 +318,12 @@ function $891da49c419865de$export$92f2da32c6e7e7ee({ search_results_: search_res
 
 
 
-function $5fc9fc23df1591db$export$469c7af753d08925({ price_: price_ , price_formatting_: price_formatting_  }) {
-    return (0, $46MJV$solidjs.createMemo)(()=>(0, $46MJV$depictaiutilishared.standard_price_format)(price_(), price_formatting_().places_after_comma_, price_formatting_().decimal_places_delimiter_, price_formatting_().thousands_delimiter_));
+
+function $5fc9fc23df1591db$export$a71e92cfbb498adc(props) {
+    return (0, $46MJV$solidjs.createMemo)(()=>{
+        const price_formatting = props.price_formatting_;
+        return (0, $46MJV$depictaiutilishared.standard_price_format)(props.price_, price_formatting.places_after_comma_, price_formatting.decimal_places_delimiter_, price_formatting.thousands_delimiter_);
+    });
 }
 
 
@@ -423,19 +430,27 @@ function $08fa9d20f7ec85af$export$83fd5de5504a7a67({ formatted_number_of_results
         }));
     });
     return (()=>{
-        const _el$ = $08fa9d20f7ec85af$var$_tmpl$.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$6 = _el$4.nextSibling, _el$7 = _el$6.nextSibling, _el$10 = _el$7.nextSibling, _el$8 = _el$10.nextSibling, _el$9 = _el$8.nextSibling;
+        const _el$ = $08fa9d20f7ec85af$var$_tmpl$.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$7 = _el$4.nextSibling, _el$8 = _el$7.nextSibling, _el$11 = _el$8.nextSibling, _el$9 = _el$11.nextSibling, _el$10 = _el$9.nextSibling;
         const _ref$ = element;
         typeof _ref$ === "function" ? (0, $46MJV$solidjsweb.use)(_ref$, _el$) : element = _el$;
-        (0, $46MJV$solidjsweb.insert)(_el$3, (0, $5fc9fc23df1591db$export$469c7af753d08925)({
-            price_: first_to_show,
-            price_formatting_: modified_price_formatting_
+        (0, $46MJV$solidjsweb.insert)(_el$3, (0, $46MJV$solidjsweb.createComponent)((0, $5fc9fc23df1591db$export$a71e92cfbb498adc), {
+            get price_ () {
+                return first_to_show();
+            },
+            get price_formatting_ () {
+                return modified_price_formatting_();
+            }
         }));
-        (0, $46MJV$solidjsweb.insert)(_el$6, (0, $5fc9fc23df1591db$export$469c7af753d08925)({
-            price_: last_to_show,
-            price_formatting_: modified_price_formatting_
+        (0, $46MJV$solidjsweb.insert)(_el$7, (0, $46MJV$solidjsweb.createComponent)((0, $5fc9fc23df1591db$export$a71e92cfbb498adc), {
+            get price_ () {
+                return last_to_show();
+            },
+            get price_formatting_ () {
+                return modified_price_formatting_();
+            }
         }));
-        (0, $46MJV$solidjsweb.insert)(_el$2, of_, _el$10);
-        (0, $46MJV$solidjsweb.insert)(_el$9, count_to_show);
+        (0, $46MJV$solidjsweb.insert)(_el$2, of_, _el$11);
+        (0, $46MJV$solidjsweb.insert)(_el$10, count_to_show);
         return _el$;
     })();
 }
@@ -448,134 +463,6 @@ function $08fa9d20f7ec85af$export$83fd5de5504a7a67({ formatted_number_of_results
 
 
 
-/** @jsxImportSource solid-js */ 
-function $1089684cb32bf922$export$daf1a0aef2143a61({ first_result_in_viewport_: [, set_first_result_in_viewport_] , last_result_in_viewport_: [, set_last_result_in_viewport_]  }) {
-    const intersecting = new Set();
-    const counting_is = new IntersectionObserver((records)=>{
-        let kids;
-        for (const { intersectionRatio: intersectionRatio , target: target  } of records){
-            const intersects = intersectionRatio > 0;
-            const has_target = intersecting.has(target);
-            if (intersects && !has_target) intersecting.add(target);
-            else if (!intersects && has_target) intersecting.delete(target);
-        }
-        const numbers = [
-            ...intersecting
-        ].map((el)=>{
-            const index = (kids ||= [
-                ...el.parentElement?.children || []
-            ]).indexOf(el);
-            if (index < 0) return undefined;
-            return index + 1;
-        }).filter((item)=>item != undefined);
-        set_first_result_in_viewport_(Math.min(...numbers));
-        set_last_result_in_viewport_(Math.max(...numbers));
-    });
-    (0, $46MJV$solidjs.onCleanup)(()=>counting_is.disconnect());
-    return (els)=>{
-        for(let i = 0; i < els?.length; i++){
-            const el = els[i];
-            if (el instanceof Element) counting_is.observe(el);
-        }
-    };
-}
-
-
-/** @jsxImportSource solid-js */ 
-
-function $6154d0a3d9e9b16e$export$36aef51ac7a64eae({ depict_api_: depict_api_ , min_products_to_fetch_: min_products_to_fetch_ , all_products_loaded_: all_products_loaded_ , query_base_: query_base_ , observe_for_counting_: observe_for_counting_ , start_cursor_: start_cursor_  }) {
-    let last_loaded = +new Date();
-    let dead = false;
-    let current_cursor = start_cursor_;
-    const target_to_info = new Map();
-    const tear_down = (0, $46MJV$depictaiutilishared.catchify)((loaded_all_products)=>{
-        intersection_observer.disconnect();
-        target_to_info.clear();
-        dead = true;
-        if (loaded_all_products) all_products_loaded_?.[1]?.(true);
-    });
-    const deduped_load_more = (0, $46MJV$depictaiutilishared.deparallelize)(async (...args)=>{
-        const now = +new Date();
-        // load faster if someone is scrolling aggressively
-        const num_to_load = now - last_loaded < 10000 ? min_products_to_fetch_ * 5 : min_products_to_fetch_;
-        const new_cursor = await $6154d0a3d9e9b16e$var$load_more(...args, num_to_load);
-        if (new_cursor) current_cursor = new_cursor;
-        last_loaded = now;
-    });
-    const intersection_observer = new IntersectionObserver((0, $46MJV$depictaiutilishared.catchify)((records)=>{
-        let num_children;
-        for(let i = 0; i < records.length; i++){
-            // we assume they all have the same parent 👀
-            const record = records[i];
-            if (record.intersectionRatio <= 0) continue;
-            const { target: target  } = record;
-            const parent = target.parentElement;
-            if (!parent) continue; // we're not in DOM or something funky
-            if (num_children == undefined) {
-                const kids = parent.childElementCount;
-                if (isNaN(kids)) continue;
-                num_children = kids;
-            }
-            const info = target_to_info.get(target);
-            if (!info) continue; // How did this happen?
-            let actual_index_;
-            for(let i = 0; i < num_children; i++){
-                const child = parent.children[i];
-                if (child === target) {
-                    actual_index_ = i;
-                    break;
-                }
-            }
-            if (actual_index_ == undefined) continue;
-            const in_range = actual_index_ / num_children * 100;
-            const range_to_load_at = current_cursor === start_cursor_ ? 50 : 75; // if first load, load earlier
-            if (in_range > range_to_load_at) {
-                // load if more than 75% of elements are in view, this will make so that we load sooner and sooner which maybe (?) will adjust to people scrolling quickly :)
-                intersection_observer.disconnect(); // no need to watch these els anymore
-                deduped_load_more({
-                    depict_api_: depict_api_,
-                    info_: info,
-                    container_: parent,
-                    query_base_: query_base_,
-                    on_reached_end_: ()=>tear_down(true),
-                    cursor_: current_cursor
-                });
-            }
-        }
-    }));
-    (0, $46MJV$solidjs.onCleanup)(tear_down);
-    return (items, _display, info_)=>{
-        observe_for_counting_(items);
-        if (dead) return items;
-        for(let i = 0; i < items?.length; i++){
-            const item = items[i];
-            if (item instanceof Element) {
-                target_to_info.set(item, info_);
-                intersection_observer.observe(item);
-            }
-        }
-        return items;
-    };
-}
-async function $6154d0a3d9e9b16e$var$load_more({ depict_api_: depict_api_ , query_base_: query_base_ , container_: container_ , on_reached_end_: on_reached_end_ , info_: { rendering_options: rendering_options , t: t  } , cursor_: cursor_  }, num_results_to_load) {
-    (0, $46MJV$depictaiutilishared.dlog)("SearchResults: Loading more");
-    const base_part = (0, $46MJV$solidjs.untrack)(query_base_);
-    const api_response = await depict_api_["query_id" in base_part ? "list" : "query"]({
-        cursor: cursor_,
-        limit: num_results_to_load,
-        ...base_part
-    });
-    const new_displays = api_response?.displays || [];
-    const { elements: elements  } = await (0, $46MJV$depictaiutilishared.Rec_Renderer)(t, {
-        ...rendering_options,
-        recs: new_displays || []
-    });
-    if (elements) container_.append(...elements);
-    else (0, $46MJV$depictaiutilishared.dlog)("SearchResults: Got no elements, that's weird", api_response);
-    if ("cursor" in api_response) return api_response.cursor;
-    else if (!api_response?.failed) on_reached_end_();
-}
-
 
 
 
@@ -710,7 +597,8 @@ function $92e4e7906daa1ff8$export$8895d39404bd2bb1(props) {
     const { user_triggered_: user_triggered_ , i18n_: i18n_ , also_clear_sorting_: also_clear_sorting_ , local_filter_cache_: [get_local_filter_cache, set_local_filter_cache] , selected_filters_: [get_selected_filters, set_selected_filters] , expanded_hierarchical_filters_: [get_expanded_hierarchical_filters, set_expanded_hierarchical_filters] , delay_toast_: delay_toast_  } = props;
     const previous_selected_filters = (0, $46MJV$solidjs.untrack)(get_selected_filters);
     if (!previous_selected_filters.length) {
-        // no filters selected, do nothing
+        // no filters selected, still clear sorting if applicable but don't display a toast for that since it's very minor
+        if (also_clear_sorting_) props.current_sorting_[1]();
         if (delay_toast_) return ()=>{};
         return;
     }
@@ -810,13 +698,8 @@ function $2b4e3538e183d885$export$ef6006467f04ee41({ i18n_: i18n_ , expanded_hie
 ]);
 
 
-/*
- * Usually product templates are somewhat height-elastic depending on the content, i.e. if the title is longer we might up to two extra rows for this. That means that the placeholders almost never will reflect the size of the actual content when we do scroll restoration. This magic number specifies how many extra placeholders we should render everytime to compensate for this, since if the placeholders are in total shorter than the old scroll location the scroll restoration won't work.
- */ const $39d15a684cb3e309$export$6c9030e511152266 = 30;
-
-
 function $8e863dc22b06b688$export$a2cc176055f8f08() {
-    return document.createComment("Please try setting `colsAtSize` on `DepictProvider`/`DepictSearch` to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.");
+    return document.createComment("Please try setting `colsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.");
 }
 
 
@@ -869,77 +752,347 @@ function $0f2f58dd60b11888$export$b69d0d92862de18b(props) {
 }
 
 
-const $8d94abc871e13baf$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="PLP-results"></div>`, 2), $8d94abc871e13baf$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="cards"></div>`, 2);
-let $8d94abc871e13baf$var$cached_placeholder_element;
-function $8d94abc871e13baf$export$3925f87b1545cfc6({ plp_results_: plp_results_ , depict_api_: depict_api_ , all_products_loaded_: all_products_loaded_ , min_products_to_fetch_: min_products_to_fetch_ , query_base_: query_base_ , first_result_in_viewport_: first_result_in_viewport_ , last_result_in_viewport_: last_result_in_viewport_ , scroll_restoration_data_: scroll_restoration_data_ , no_results_options_: no_results_options_ , desktop_filter_elements_: desktop_filter_elements_ , sort_or_filter_open_: sort_or_filter_open_ , rr_options_: rr_options_ , layout_options_: layout_options_ , tenant_object_: tenant_object_ , type_for_tracking_: type_for_tracking_ , id_currently_querying_for_: id_currently_querying_for_  }) {
-    // The plp_results_ resource will be delayed because we're using createBatchedMemo to not make triplicate API requests, but we need to show the placeholders before already to match Chrome and Firefox's "content has to be there, ready for scroll restoration, before all popstate tasks have been completed"-requirement
-    const is_loading = (0, $46MJV$solidjs.createMemo)(()=>plp_results_.loading || query_base_.loading);
-    const cleanup_old_cards = [];
-    const render_and_insert_results = (0, $46MJV$depictaiutilishared.deparallelize_no_drop)(async (insert_into, owner)=>{
-        const fallback_to_no_results = ()=>(0, $46MJV$solidjs.runWithOwner)(owner, ()=>insert_into.replaceChildren(...(0, $2b4e3538e183d885$export$ef6006467f04ee41)(no_results_options_)));
-        const observe_for_counting_ = (0, $46MJV$solidjs.runWithOwner)(owner, ()=>(0, $1089684cb32bf922$export$daf1a0aef2143a61)({
-                last_result_in_viewport_: last_result_in_viewport_,
-                first_result_in_viewport_: first_result_in_viewport_
-            }));
-        const current_results = (0, $46MJV$solidjs.untrack)(plp_results_);
-        const current_cursor = current_results.cursor;
-        const load_more_post_processor = current_cursor // if we already got everything, don't make actual load more post processor.
-         ? (0, $6154d0a3d9e9b16e$export$36aef51ac7a64eae)({
-            depict_api_: depict_api_,
-            min_products_to_fetch_: min_products_to_fetch_,
-            all_products_loaded_: all_products_loaded_,
-            query_base_: query_base_,
-            observe_for_counting_: observe_for_counting_,
-            start_cursor_: current_cursor
-        }) : function(items) {
-            observe_for_counting_(items);
-            return items;
-        };
-        // create owner to run product cards with an Owner, so they know when they've gotten removed
-        const [owner_for_cards, dispose_our_cards] = (0, $46MJV$solidjs.createRoot)((dispose)=>[
-                (0, $46MJV$solidjs.getOwner)(),
-                dispose
+
+
+function $f93412cebc8f7bac$export$2f0cbfbb4354bb52(elements) {
+    // FYI this probably doesn't work on hugely deep nestings or large amount of elements
+    return (0, $46MJV$solidjs.createMemo)(()=>$f93412cebc8f7bac$var$unwrapping_helper(elements));
+}
+function $f93412cebc8f7bac$var$unwrapping_helper(elements) {
+    const result = [];
+    if (Array.isArray(elements)) for(let i = 0; i < elements.length; i++){
+        const element = elements[i];
+        result.push(...$f93412cebc8f7bac$var$unwrapping_helper(element));
+    }
+    else if (typeof elements == "function") result.push(...$f93412cebc8f7bac$var$unwrapping_helper(elements()));
+    else if (elements != undefined && typeof elements != "boolean") result.push(elements);
+    return result;
+}
+
+
+let $7b0b7e887b485a91$var$cached_placeholder_element;
+let $7b0b7e887b485a91$var$rendering_cached_placeholder_element;
+function $7b0b7e887b485a91$export$f33414a4df0afd3f({ product_card_template_: product_card_template_ , num_placeholders_: num_placeholders_  }) {
+    const [get_elements, set_elements] = (0, $46MJV$solidjs.createSignal)([]);
+    let existing_num = 0;
+    (0, $46MJV$solidjs.createRenderEffect)(()=>{
+        const to_add = num_placeholders_() - existing_num;
+        if (to_add <= 0) return;
+        // Below comment is from when we used recommendation renderer and manual DOM manipulation for this, but I'm still scared to remove placeholders and mess up scroll restoration, so I'm keeping the way it worked. Otherwise, <Index> could be used which would be far more elegant.
+        // We don't need to remove placeholders, only need to add. The reason for that is that chrome restores the scroll position once all tasks queued as reaction of the "popstate" events have been completed in the task queue. That means that we need to get the placeholders in fast, or we might lose scroll position if the previous site was shorter.
+        // The query id and the amount might update in separate tasks because one comes from href_change_ipns and the other one from another "popstate" listener. Therefore, we need to be able to dynamically add more placeholders. I'm not entirely sure about this anymore though, since we have the scroll position on a per-id basis it might work anyway but THIS WORKS, and I've been working on this bug for 3 hours so let's just keep it this way.
+        set_elements((prev)=>[
+                ...prev,
+                ...Array.from({
+                    length: to_add
+                }).map(()=>$7b0b7e887b485a91$var$Placeholder({
+                        product_card_template_: product_card_template_
+                    }))
             ]);
-        const rendering_result = await (0, $46MJV$depictaiutilishared.default_rr)(tenant_object_, {
-            type: type_for_tracking_,
-            recs: current_results.displays,
-            ...rr_options_,
-            ...typeof rr_options_.template === "function" ? {
-                template: $8d94abc871e13baf$var$wrap_template_to_throw_into_error_boundary(rr_options_.template, owner_for_cards)
-            } : {},
-            post_processors: [
-                ...rr_options_.post_processors || [],
-                load_more_post_processor
-            ]
+        existing_num += to_add;
+    });
+    return get_elements; // https://github.com/solidjs/solid/releases/tag/v1.7.0
+}
+/**
+ * Get one placeholder element. It will be cloned for each placeholder for ultimate performance even when solid-js isn't rendering the placeholders.
+ */ function $7b0b7e887b485a91$var$Placeholder({ product_card_template_: product_card_template_  }) {
+    const get_cloned_placeholders = (element_to_clone = $7b0b7e887b485a91$var$cached_placeholder_element)=>Array.isArray(element_to_clone) ? element_to_clone.map((el)=>el instanceof Node ? el.cloneNode(true) : el) : element_to_clone;
+    if ($7b0b7e887b485a91$var$cached_placeholder_element) return get_cloned_placeholders();
+    let dispose_original_copy;
+    const get_unwrapped_element = (0, $46MJV$solidjs.createRoot)((dispose)=>{
+        dispose_original_copy = dispose;
+        // if product_card_template_ is async and rejects the resource will take care of throwing upwards here in the solid-js error handling system
+        const [resource] = (0, $46MJV$solidjs.createResource)(()=>{
+            if ($7b0b7e887b485a91$var$rendering_cached_placeholder_element) return $7b0b7e887b485a91$var$rendering_cached_placeholder_element;
+            const return_value = product_card_template_(null, undefined);
+            if (typeof return_value === "object" && typeof return_value?.then === "function") // Is Promise or promise-like object
+            $7b0b7e887b485a91$var$rendering_cached_placeholder_element = return_value;
+            return return_value;
         });
-        // check if we still should insert or something new happened while we were rendering
-        if ((0, $46MJV$solidjs.untrack)(has_no_results_or_failed) || (0, $46MJV$solidjs.untrack)(is_loading)) {
-            (0, $46MJV$depictaiutilishared.dlog)("PLPResults: Not inserting rendered results because we became loading or switched to no results");
-            return;
-        }
-        const { elements: elements , should_stay_inserted: should_stay_inserted  } = rendering_result;
-        if (!elements) {
-            fallback_to_no_results(); // rendering failed at this point but just pretend it's no results
+        return (0, $46MJV$solidjs.createMemo)(()=>{
+            if (resource.loading) return ()=>[];
+            return (0, $f93412cebc8f7bac$export$2f0cbfbb4354bb52)(resource);
+        });
+    });
+    (0, $46MJV$solidjs.onCleanup)(()=>{
+        if ($7b0b7e887b485a91$var$rendering_cached_placeholder_element) {
+            // If we're still rendering in our separate root, let the rendering finish or other <Placeholder> components waiting for it might get an incomplete result
+            const unset_current_rendering = ()=>{
+                dispose_original_copy();
+                $7b0b7e887b485a91$var$rendering_cached_placeholder_element = undefined;
+            };
+            $7b0b7e887b485a91$var$rendering_cached_placeholder_element?.then(unset_current_rendering, unset_current_rendering);
+        } else // Otherwise, just make sure we've disposed our root
+        dispose_original_copy();
+    });
+    return (0, $46MJV$solidjs.createMemo)(()=>{
+        const unwrapped_array = get_unwrapped_element()();
+        if (!unwrapped_array?.length || !unwrapped_array.every((item)=>item)) // Haven't finished rendering yet in case of "async" rendering, so don't freeze the elements yet
+        return;
+        // placeholders have finished rendering, freeze the elements
+        $7b0b7e887b485a91$var$cached_placeholder_element = get_cloned_placeholders(unwrapped_array); // Clone initial return value so that who gave us the elements can't mutate them, which has caused issues before with react
+        $7b0b7e887b485a91$var$rendering_cached_placeholder_element = undefined;
+        dispose_original_copy(); // So that this memo will never re-run and the placeholder rendering function can clean up
+        return get_cloned_placeholders(); // clone, just in case. If we wouldn't, someone could modify the copy in the DOM, and it would affect the cached version
+    });
+}
+
+
+/*
+ * Usually product templates are somewhat height-elastic depending on the content, i.e. if the title is longer we might up to two extra rows for this. That means that the placeholders almost never will reflect the size of the actual content when we do scroll restoration. This magic number specifies how many extra placeholders we should render everytime to compensate for this, since if the placeholders are in total shorter than the old scroll location the scroll restoration won't work.
+ */ const $39d15a684cb3e309$export$6c9030e511152266 = 30;
+
+
+/** @jsxImportSource solid-js */ 
+
+
+
+function $20717024e763c0fa$export$5e4aed86c12acdd9({ percentage_in_view_: percentage_in_view_ , set_extra_displays_: set_extra_displays_ , all_products_loaded_: all_products_loaded_ , plp_results_: plp_results_ , min_products_to_fetch_: min_products_to_fetch_ , query_base_: query_base_ , depict_api_: depict_api_  }) {
+    let last_loaded = +new Date();
+    let is_loading_more = false;
+    let is_first_load = true;
+    const [get_last_cursor, set_last_cursor] = (0, $46MJV$solidjs.createSignal)();
+    (0, $46MJV$solidjs.createComputed)((0, $46MJV$solidjs.on)(plp_results_, ()=>set_extra_displays_([]), {
+        defer: true
+    })); // empty array when a new request has completed (don't run this initially since it will already be empty)
+    (0, $46MJV$solidjs.createComputed)(()=>{
+        set_last_cursor(plp_results_()?.cursor);
+        last_loaded = +new Date();
+        is_first_load = true;
+    });
+    (0, $46MJV$solidjs.createEffect)((0, $46MJV$depictaiutilishared.catchify)(async ()=>{
+        const be_above_percentage = is_first_load ? 50 : 75; // if first load, load earlier
+        if (percentage_in_view_() < be_above_percentage || is_loading_more) return;
+        if (!get_last_cursor()) {
+            // dlog("All results loaded, can't load more");
+            all_products_loaded_?.[1](true); // This is unset in SearchPage as we start fetching new results
             return;
         }
-        insert_into.replaceChildren(...elements);
-        // Dispose the old cards just after the cards have been removed from the DOM
-        cleanup_old_cards.forEach((cleanup_function)=>cleanup_function());
-        cleanup_old_cards.push(dispose_our_cards); // push after calling, so that we don't instantly demolish ourselves lol
-        should_stay_inserted?.then((should)=>{
-            // If we shouldn't stay inserted for some reason, switch back to no results
-            if (!should) fallback_to_no_results();
+        // dlog("More than ", be_above_percentage, "% in view, ", percentage_in_view_(), "%, loading more");
+        is_loading_more = true;
+        const base_part = (0, $46MJV$solidjs.untrack)(query_base_);
+        const now = +new Date();
+        // load faster if someone is scrolling aggressively
+        const number_of_results_to_load = is_first_load ? // After first load, always just load 20 since people might just be browsing the top ones still
+        min_products_to_fetch_ : now - last_loaded < 10000 ? min_products_to_fetch_ * 5 : min_products_to_fetch_;
+        // dlog("loading ", number_of_results_to_load, "products, because it was", now - last_loaded, "ms since last load");
+        const api_response = await depict_api_["query_id" in base_part ? "list" : "query"]({
+            cursor: get_last_cursor(),
+            limit: number_of_results_to_load,
+            ...base_part
+        });
+        const new_displays = api_response?.displays || [];
+        set_extra_displays_((old_value)=>{
+            // We want this to go fast. The apply method is the fastest way to add to an array, and AFAIK it's faster to add than to create a new one.
+            // eslint-disable-next-line prefer-spread
+            old_value.push.apply(old_value, new_displays);
+            return old_value;
         });
+        set_last_cursor(api_response.cursor);
+        is_loading_more = false;
+        last_loaded = +new Date();
+        is_first_load = false;
+    }));
+}
+
+
+
+function $ef82a1d4fac1efad$export$63dd0350f8559dda({ displays_by_key_: displays_by_key_ , get_last_result_in_viewport_: get_last_result_in_viewport_ , index_to_target_map_: index_to_target_map_ , is_loading_: is_loading_ , get_extra_displays: get_extra_displays  }) {
+    const [get_has_rendered_toggle, set_has_rendered_toggle] = (0, $46MJV$solidjs.createSignal)(false);
+    (0, $46MJV$solidjs.createEffect)(()=>{
+        // We need this to run after the "render phase"
+        get_extra_displays();
+        set_has_rendered_toggle((old)=>!old);
+    });
+    return (0, $46MJV$solidjs.createMemo)(()=>{
+        const last = get_last_result_in_viewport_();
+        // Check if we are past the last result, in that case we want it to count as 100% for a better infinite scroll experience
+        past_last_result_check: {
+            const elements_of_last_result = index_to_target_map_.get(index_to_target_map_.size - 1);
+            if (elements_of_last_result) {
+                if ((0, $46MJV$solidjs.untrack)(is_loading_)) {
+                    // We're loading, wait check again after we have inserted our new results
+                    get_has_rendered_toggle();
+                    break past_last_result_check;
+                }
+                for (const element of elements_of_last_result){
+                    if (document.documentElement.contains(element) && element.getBoundingClientRect().top <= 0) // dlog(element, "which is of last product card is in or above viewport, probably loading more");
+                    return 100;
+                }
+            }
+        }
+        if (isNaN(last)) return 0;
+        if (Math.abs(last) === Infinity) // No product card in view and not after last card, assume first card
+        return 0;
+        return last / displays_by_key_().size * 100;
+    });
+}
+
+
+
+
+/**
+ * Gets product_id (the thing we key the rendering on) from a display
+ */ function $f1ea6fcde8fab269$export$548d053aba053d79(display) {
+    if ("variant_index" in display) {
+        const actual_display = display.variant_displays[display.variant_index];
+        return actual_display.product_id;
+    }
+    return display.product_id;
+}
+
+
+
+function $ea6c1dd5af2900d8$export$7f8bd308237ab5a5(get_displays_) {
+    const displays_by_key_ = (0, $46MJV$solidjs.createMemo)(()=>{
+        const displays = get_displays_();
+        // We key by product_id because that's what can be used to uniquely identify products
+        // This way <For> can optimize the rendering
+        const map = new Map();
+        for(let i = 0; i < displays.length; i++){
+            const display = displays[i];
+            const product_id = (0, $f1ea6fcde8fab269$export$548d053aba053d79)(display);
+            map.set(product_id, display);
+        }
+        return map;
+    });
+    return displays_by_key_;
+}
+function $ea6c1dd5af2900d8$export$43f0fb951fcb0c54({ displays_by_key_: displays_by_key_ , merchant_: merchant_ , market_: market_ , product_card_template_: product_card_template_ , do_per_elements_: do_per_elements_  }) {
+    return (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.For), {
+        get each () {
+            return [
+                ...displays_by_key_().keys()
+            ];
+        },
+        children: (product_id, index)=>{
+            // We're using `untrack` here since we don't want to react in here to displays_by_key changing
+            // As long as our key stays the same we assume that the display hasn't changed, so we don't want to rerender
+            // If the key gets removed, <For> will remove us
+            const owner = (0, $46MJV$solidjs.getOwner)();
+            const display_accessor = (0, $46MJV$solidjs.createMemo)(()=>displays_by_key_().get(product_id));
+            const [product_card_resource] = (0, $46MJV$solidjs.createResource)((0, $46MJV$solidjs.createMemo)(()=>[
+                    merchant_(),
+                    market_()
+                ]), // re-render when merchant or market changes
+            ([merchant, market])=>{
+                // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
+                const display = (0, $46MJV$solidjs.untrack)(display_accessor);
+                return product_card_template_(display, {
+                    set_on_index_change: (fn)=>(0, $46MJV$solidjs.runWithOwner)(owner, ()=>(0, $46MJV$solidjs.createEffect)(()=>fn(index()))),
+                    merchant: merchant,
+                    market: market
+                });
+            });
+            const node_accessor = (0, $f93412cebc8f7bac$export$2f0cbfbb4354bb52)(product_card_resource);
+            (0, $46MJV$solidjs.createEffect)(()=>{
+                const product_card_nodes = node_accessor();
+                const display = display_accessor();
+                const elements = [];
+                for(let i = 0; i < product_card_nodes.length; i++){
+                    const element = product_card_nodes[i];
+                    if (!(element instanceof Element)) continue;
+                    elements.push(element);
+                    // Add tracking ids
+                    if (!(element instanceof HTMLElement)) continue; // Apparently only HTMLElements have dataset
+                    const { dataset: dataset  } = element;
+                    const { search_result_id: search_result_id , product_listing_result_id: product_listing_result_id , recommendation_id: recommendation_id  } = display;
+                    if (search_result_id) dataset.searchResultId = search_result_id;
+                    else if (product_listing_result_id) dataset.productListingResultId = product_listing_result_id;
+                    else if (recommendation_id) dataset.recommendationId = recommendation_id;
+                }
+                do_per_elements_?.(elements, index);
+            });
+            return product_card_resource; // https://github.com/solidjs/solid/releases/tag/v1.7.0
+        }
+    });
+}
+
+
+function $f67fba44c7515f35$export$a1fd619a4743ca08({ plp_results_: plp_results_ , product_card_template_: product_card_template_ , first_result_in_viewport_: [, set_first_result_in_viewport] , last_result_in_viewport_: [get_last_result_in_viewport_, set_last_result_in_viewport] , merchant_: merchant_ , market_: market_ , all_products_loaded_: all_products_loaded_ , min_products_to_fetch_: min_products_to_fetch_ , query_base_: query_base_ , depict_api_: depict_api_ , is_loading_: is_loading_  }) {
+    // The following sets up an intersection observer to determine which results are in the viewport, used for the ScrollStatus indicator and knowing when to load more
+    const target_to_index_map = new Map();
+    const index_to_target_map_ = new Map();
+    const currently_intersecting = new Set();
+    const intersection_observer = new IntersectionObserver((0, $46MJV$depictaiutilishared.catchify)((records)=>{
+        for(let i = 0; i < records.length; i++){
+            const record = records[i];
+            const { target: target , intersectionRatio: intersectionRatio  } = record;
+            const index_of_target = target_to_index_map.get(target);
+            const is_in_set = currently_intersecting.has(index_of_target);
+            if (intersectionRatio > 0) {
+                if (!is_in_set) currently_intersecting.add(index_of_target);
+            } else if (is_in_set) currently_intersecting.delete(index_of_target);
+        }
+        set_first_result_in_viewport(Math.min(...currently_intersecting) + 1); // +1 because we want to start counting at 1
+        set_last_result_in_viewport(Math.max(...currently_intersecting) + 1);
+    }, "PLPResults IO failed"));
+    // Although typing doesn't reflect it, plp_results is guaranteed to contain an array of at least one display at this point
+    const [get_extra_displays, set_extra_displays_] = (0, $46MJV$solidjs.createSignal)([], {
+        equals: false
+    });
+    const displays_by_key_ = (0, $ea6c1dd5af2900d8$export$7f8bd308237ab5a5)((0, $46MJV$solidjs.createMemo)(()=>[
+            ...plp_results_().displays,
+            ...get_extra_displays()
+        ]));
+    const percentage_in_view_ = (0, $ef82a1d4fac1efad$export$63dd0350f8559dda)({
+        get_last_result_in_viewport_: get_last_result_in_viewport_,
+        displays_by_key_: displays_by_key_,
+        index_to_target_map_: index_to_target_map_,
+        is_loading_: is_loading_,
+        get_extra_displays: get_extra_displays
+    });
+    (0, $20717024e763c0fa$export$5e4aed86c12acdd9)({
+        percentage_in_view_: percentage_in_view_,
+        set_extra_displays_: set_extra_displays_,
+        all_products_loaded_: all_products_loaded_,
+        plp_results_: plp_results_,
+        min_products_to_fetch_: min_products_to_fetch_,
+        query_base_: query_base_,
+        depict_api_: depict_api_
+    });
+    return (0, $ea6c1dd5af2900d8$export$43f0fb951fcb0c54)({
+        displays_by_key_: displays_by_key_,
+        merchant_: merchant_,
+        market_: market_,
+        product_card_template_: product_card_template_,
+        do_per_elements_: (elements, index_accessor)=>// Adds/removes elements from the "results in viewport" intersection observer above
+            (0, $46MJV$solidjs.createEffect)(()=>{
+                const display_index = index_accessor();
+                // Nested createEffect because we only want to re-run this when the index changes
+                // We need to save in a map which index the elements of this template are so that we can know that in the IntersectionObserver callback
+                for(let i = 0; i < elements.length; i++){
+                    const element = elements[i];
+                    target_to_index_map.set(element, display_index);
+                    intersection_observer.observe(element);
+                    (0, $46MJV$solidjs.onCleanup)(()=>{
+                        intersection_observer.unobserve(element);
+                        target_to_index_map.delete(element);
+                        currently_intersecting.delete(display_index);
+                    });
+                }
+                index_to_target_map_.set(display_index, elements);
+                (0, $46MJV$solidjs.onCleanup)(()=>index_to_target_map_.delete(display_index));
+            })
     });
+}
+
+
+const $8d94abc871e13baf$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="PLP-results"></div>`, 2), $8d94abc871e13baf$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="cards"></div>`, 2), $8d94abc871e13baf$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<style></style>`, 2);
+function $8d94abc871e13baf$export$3925f87b1545cfc6({ plp_results_: plp_results_ , depict_api_: depict_api_ , all_products_loaded_: all_products_loaded_ , min_products_to_fetch_: min_products_to_fetch_ , query_base_: query_base_ , first_result_in_viewport_: first_result_in_viewport_ , last_result_in_viewport_: last_result_in_viewport_ , scroll_restoration_data_: [get_scroll_restoration_data] , no_results_options_: no_results_options_ , desktop_filter_elements_: desktop_filter_elements_ , sort_or_filter_open_: sort_or_filter_open_ , product_card_template_: product_card_template_ , layout_options_: layout_options_ , id_currently_querying_for_: id_currently_querying_for_  }) {
+    // The plp_results_ resource will be delayed because we're using createBatchedMemo to not make triplicate API requests, but we need to show the placeholders before already to match Chrome and Firefox's "content has to be there, ready for scroll restoration, before all popstate tasks have been completed"-requirement
+    const is_loading_ = (0, $46MJV$solidjs.createMemo)(()=>plp_results_.loading || query_base_.loading);
+    const merchant_ = (0, $46MJV$solidjs.createMemo)(()=>query_base_().tenant);
+    const market_ = (0, $46MJV$solidjs.createMemo)(()=>query_base_().market);
     const has_no_results_or_failed = (0, $46MJV$solidjs.createMemo)(()=>{
         const displays = plp_results_()?.displays;
-        return !is_loading() && (!Array.isArray(displays) || !displays.length);
+        return !is_loading_() && (!Array.isArray(displays) || !displays.length);
     });
-    if (all_products_loaded_) (0, $46MJV$solidjs.createComputed)(()=>{
+    if (all_products_loaded_) // This is for the case that all products were loaded in the first result I think?
+    (0, $46MJV$solidjs.createComputed)(()=>{
         const is_at_end = !plp_results_()?.cursor; // or failed, but we don't wanna / it's not easy to retry
-        if (!is_loading() && is_at_end) all_products_loaded_[1](true);
+        if (!is_loading_() && is_at_end) all_products_loaded_[1](true);
     });
-    (0, $46MJV$solidjs.onCleanup)(()=>cleanup_old_cards.forEach((fn)=>fn())); // if everything gets cleaned up without new cards replacing the old ones, clean up the last cards
     return (()=>{
         const _el$ = $8d94abc871e13baf$var$_tmpl$.cloneNode(true);
         (0, $46MJV$solidjsweb.insert)(_el$, (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.Show), {
@@ -953,7 +1106,7 @@ function $8d94abc871e13baf$export$3925f87b1545cfc6({ plp_results_: plp_results_
                 return (0, $0f2f58dd60b11888$export$b69d0d92862de18b)({
                     severity_: "error",
                     // More granular error handling
-                    // This _also_ fails when a product card rendering fails due to the runWithOwner with a root that was created inside the "root"/"context" of this ErrorBoundary
+                    // This _also_ fails when a product card rendering fails
                     on_error_: (retry)=>{
                         // re-try / reset ErrorBoundary next time we're getting product cards
                         const track = (0, $46MJV$solidjs.createReaction)(retry);
@@ -965,83 +1118,108 @@ function $8d94abc871e13baf$export$3925f87b1545cfc6({ plp_results_: plp_results_
                     // So that the styling looks pretty when we've failed
                     message_: "Result rendering failed",
                     get children () {
+                        let suspense_contents;
+                        let is_just_after_plp_results_update = false;
+                        let fallback_is_alive = false;
                         const random_id = (0, $46MJV$depictaiutilishared.make_random_classname)();
-                        const selector_beginning = `.depict.plp #${random_id}>`;
-                        const cards = (()=>{
-                            const _el$2 = $8d94abc871e13baf$var$_tmpl$2.cloneNode(true);
-                            (0, $46MJV$solidjsweb.setAttribute)(_el$2, "id", random_id);
-                            return _el$2;
-                        })();
-                        const style = document.createElement("style");
-                        (0, $46MJV$solidjs.createRenderEffect)(()=>{
-                            // Add grid styling that changes when filters get opened/closed
-                            const when_filters_closed_cols = layout_options_.cols_at_size;
-                            const cols_at_size = sort_or_filter_open_() ? when_filters_closed_cols.map((row)=>{
-                                const [num_cols_default, , , , override_cols] = row;
-                                const cloned_row = [
-                                    ...row
-                                ];
-                                // @ts-ignore
-                                cloned_row[0] = num_cols_default - 1;
-                                if (override_cols) // @ts-ignore
-                                cloned_row[4] = {
-                                    overrides: Object.fromEntries(Object.entries(override_cols.overrides).map(([row, column])=>[
-                                            row,
-                                            column - 1
-                                        ]))
-                                };
-                                return cloned_row;
-                            }) : when_filters_closed_cols;
-                            const css = (0, $46MJV$depictaiutilishared.n_col_styling_with_dist)(selector_beginning, layout_options_.grid_spacing, cols_at_size, "grid", layout_options_.override_vertical_spacing);
-                            style.replaceChildren(css);
+                        const selector_beginning_ = `.depict.plp #${random_id}>`;
+                        const [get_styling, set_styling_] = (0, $46MJV$solidjs.createSignal)("");
+                        const [get_should_have_placeholders_rendered, set_should_have_placeholders_rendered] = (0, $46MJV$solidjs.createSignal)(false);
+                        const rendered_placeholders = (0, $46MJV$solidjs.createMemo)(()=>get_should_have_placeholders_rendered() ? (0, $7b0b7e887b485a91$export$f33414a4df0afd3f)({
+                                product_card_template_: product_card_template_,
+                                num_placeholders_: (0, $46MJV$solidjs.createMemo)(()=>{
+                                    // Can't use the data out of request_base for the id because request_base is too late, we need the correct amount of placeholders before the browser has restored the scroll state after processing all popstate events
+                                    return (0, $39d15a684cb3e309$export$6c9030e511152266) + (get_scroll_restoration_data().find(({ for_id: for_id  })=>for_id === id_currently_querying_for_())?.min_results_loaded ?? min_products_to_fetch_);
+                                })
+                            }) : undefined);
+                        const [get_suspense_is_blocked, set_suspense_is_blocked] = (0, $46MJV$solidjs.createSignal)(false);
+                        (0, $46MJV$solidjs.createComputed)(()=>{
+                            if (!is_loading_()) return;
+                            set_should_have_placeholders_rendered(true);
+                            set_suspense_is_blocked(false);
+                            is_just_after_plp_results_update = true;
                         });
-                        (0, $46MJV$solidjs.createRenderEffect)(// render placeholders / product cards
-                        (0, $46MJV$depictaiutilishared.catchify)(async ()=>{
-                            const owner_ = (0, $46MJV$solidjs.getOwner)();
-                            if (is_loading()) await $8d94abc871e13baf$var$insert_placeholders({
-                                scroll_restoration_data_: scroll_restoration_data_,
-                                id_currently_querying_for_: id_currently_querying_for_,
-                                rr_options_: rr_options_,
-                                tenant_object_: tenant_object_,
-                                min_products_to_fetch_: min_products_to_fetch_,
-                                owner_: owner_,
-                                cards_element_: cards
-                            });
-                            else if (!has_no_results_or_failed()) {
-                                plp_results_(); // re-run render_and_insert_results when results change
-                                render_and_insert_results(cards, owner_);
-                            }
-                        }));
-                        // copied from RecommendationGrid
-                        // convoluted lazy loading that
-                        // when the elements are in the DOM starts IntersectionObserver on whole grid
-                        // when grid intersects starts Lazyfier
-                        // this is because Lazyfier is fucking stupid
-                        (0, $46MJV$depictaiutilishared.observer).wait_for_element(cards).then((0, $46MJV$depictaiutilishared.catchify)((element)=>{
-                            let start_lazy_loading;
-                            const lazy_loading_promise = new Promise((r)=>start_lazy_loading = r);
-                            const lf = new (0, $46MJV$depictaiutilishared.Lazyfier)({
-                                only_load_intersecting: true,
-                                wait_for_dominsertion: lazy_loading_promise,
-                                ignore_data_urls: true,
-                                lazyfinder: {
-                                    unload () {}
-                                }
-                            });
-                            lf.start_observing_for_new_children_(element);
-                            const i_o = new IntersectionObserver((0, $46MJV$depictaiutilishared.catchify)((records)=>{
-                                for (const record of records)if (record.intersectionRatio > 0) {
-                                    start_lazy_loading();
-                                    i_o.disconnect();
-                                    return;
+                        $8d94abc871e13baf$var$results_grid_styling_generator({
+                            layout_options_: layout_options_,
+                            set_styling_: set_styling_,
+                            sort_or_filter_open_: sort_or_filter_open_,
+                            selector_beginning_: selector_beginning_
+                        });
+                        const has_at_least_one_display = (0, $46MJV$solidjs.createMemo)(()=>!!plp_results_()?.displays?.length); // Only de-construct below stuff if we get 0 displays. Important that this returns boolean so that below Suspense only gets re-created if it actually changes
+                        const block_suspense_if_needed = ()=>{
+                            if (!is_just_after_plp_results_update) return;
+                            is_just_after_plp_results_update = false;
+                            fallback_is_alive = false;
+                            set_suspense_is_blocked(true);
+                        };
+                        const non_placeholder_product_cards = (0, $46MJV$solidjs.createMemo)(()=>has_at_least_one_display() && // This suspense ensures that if someone has async templates, we still show placeholders until the product cards actually have finished rendering (automagically since they're createResource's)
+                            // We're creating it outside the <Show> so that we can benefit from <For>'s optimisation between changing results
+                            // (For the whole idea of the displays being cached to work we can't tear down and re-run ProductCards for every new result.
+                            // We have to keep ProductCards alive, but hidden, and feed them new data as soon as we had it)
+                            (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.Suspense), {
+                                get fallback () {
+                                    return (()=>{
+                                        fallback_is_alive = true;
+                                        (0, $46MJV$solidjs.onCleanup)(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
+                                        return (0, $46MJV$solidjs.createMemo)(()=>{
+                                            // We need to be able to block the suspense since when async product cards are *rendering* we want to show the placeholders on initial load but not when loading more
+                                            // In future we could have individual suspense's for each product card, but that's too much for now
+                                            if (get_suspense_is_blocked()) return suspense_contents;
+                                            set_should_have_placeholders_rendered(true); // just in case
+                                            (0, $46MJV$solidjs.onCleanup)(()=>set_should_have_placeholders_rendered(false));
+                                            return rendered_placeholders; // I lifted the placeholders into the memo since we don't want to re-render them when switching from <Show> to <Suspense>
+                                        });
+                                    })();
+                                },
+                                get children () {
+                                    return (()=>{
+                                        suspense_contents = (0, $f67fba44c7515f35$export$a1fd619a4743ca08)({
+                                            product_card_template_: product_card_template_,
+                                            plp_results_: plp_results_,
+                                            last_result_in_viewport_: last_result_in_viewport_,
+                                            first_result_in_viewport_: first_result_in_viewport_,
+                                            market_: market_,
+                                            merchant_: merchant_,
+                                            all_products_loaded_: all_products_loaded_,
+                                            min_products_to_fetch_: min_products_to_fetch_,
+                                            query_base_: query_base_,
+                                            depict_api_: depict_api_,
+                                            is_loading_: is_loading_
+                                        });
+                                        (0, $46MJV$solidjs.onCleanup)(()=>suspense_contents = undefined);
+                                        return suspense_contents;
+                                    })();
                                 }
                             }));
-                            i_o.observe(cards);
+                        (0, $46MJV$solidjs.createEffect)((0, $46MJV$solidjs.on)(plp_results_, ()=>{
+                            if (!fallback_is_alive) // if all product card rendering functions after the initial rendering are synchronous the suspense boundary will never go into the fallback, so we don't know when they have finished rendering, and we can block the suspense. Therefore, we're just doing it with this effect
+                            block_suspense_if_needed();
+                        }, {
+                            defer: true
                         }));
                         return [
-                            (0, $8e863dc22b06b688$export$a2cc176055f8f08)(),
-                            cards,
-                            style
+                            (0, $46MJV$solidjsweb.memo)((0, $8e863dc22b06b688$export$a2cc176055f8f08)),
+                            (()=>{
+                                const _el$2 = $8d94abc871e13baf$var$_tmpl$2.cloneNode(true);
+                                (0, $46MJV$solidjsweb.setAttribute)(_el$2, "id", random_id);
+                                (0, $46MJV$solidjsweb.insert)(_el$2, (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.Show), {
+                                    get when () {
+                                        return !is_loading_();
+                                    },
+                                    get fallback () {
+                                        return rendered_placeholders();
+                                    },
+                                    get children () {
+                                        return non_placeholder_product_cards();
+                                    }
+                                }));
+                                return _el$2;
+                            })(),
+                            (()=>{
+                                const _el$3 = $8d94abc871e13baf$var$_tmpl$3.cloneNode(true);
+                                (0, $46MJV$solidjsweb.insert)(_el$3, get_styling);
+                                return _el$3;
+                            })()
                         ];
                     }
                 });
@@ -1052,63 +1230,32 @@ function $8d94abc871e13baf$export$3925f87b1545cfc6({ plp_results_: plp_results_
         return _el$;
     })();
 }
-async function $8d94abc871e13baf$var$insert_placeholders({ scroll_restoration_data_: [get_scroll_restoration_data] , min_products_to_fetch_: min_products_to_fetch_ , tenant_object_: tenant_object_ , rr_options_: rr_options_ , owner_: owner_ , cards_element_: cards_element_ , id_currently_querying_for_: id_currently_querying_for_  }) {
-    const num_placeholders = // we don't need runWithOwner here because we haven't had an await yet, so we haven't lost the owner
-    (0, $46MJV$solidjs.createMemo)(()=>{
-        // Can't use the data out of request_base for the id because request_base is too late, we need the correct amount of placeholders before the browser has restored the scroll state after processing all popstate events
-        return (0, $39d15a684cb3e309$export$6c9030e511152266) + (get_scroll_restoration_data().find(({ for_id: for_id  })=>for_id === id_currently_querying_for_())?.min_results_loaded ?? min_products_to_fetch_);
+/**
+ * Sets styling to styling generated by "Layout" (n_col_styling_with_dist) depending on if filters are open or not
+ * This function is special to the actual PLPResults.
+ */ function $8d94abc871e13baf$var$results_grid_styling_generator({ layout_options_: layout_options_ , sort_or_filter_open_: sort_or_filter_open_ , set_styling_: set_styling_ , selector_beginning_: selector_beginning_  }) {
+    (0, $46MJV$solidjs.createRenderEffect)(()=>{
+        // Add grid styling that changes when filters get opened/closed
+        const when_filters_closed_cols = layout_options_.cols_at_size;
+        const cols_at_size = sort_or_filter_open_() ? when_filters_closed_cols.map((row)=>{
+            const [num_cols_default, , , , override_cols] = row;
+            const cloned_row = [
+                ...row
+            ];
+            // @ts-ignore
+            cloned_row[0] = num_cols_default - 1;
+            if (override_cols) // @ts-ignore
+            cloned_row[4] = {
+                overrides: Object.fromEntries(Object.entries(override_cols.overrides).map(([row, column])=>[
+                        row,
+                        column - 1
+                    ]))
+            };
+            return cloned_row;
+        }) : when_filters_closed_cols;
+        const css = (0, $46MJV$depictaiutilishared.n_col_styling_with_dist)(selector_beginning_, layout_options_.grid_spacing, cols_at_size, "grid", layout_options_.override_vertical_spacing);
+        set_styling_(css);
     });
-    let existing_num = 0;
-    let removed_old_children = false;
-    if (!$8d94abc871e13baf$var$cached_placeholder_element) {
-        const [dispose_card, root_in_root] = (0, $46MJV$solidjs.createRoot)((dispose)=>[
-                dispose,
-                (0, $46MJV$solidjs.getOwner)()
-            ]);
-        const { elements: elements  } = await (0, $46MJV$depictaiutilishared.default_rr)(tenant_object_, {
-            ...rr_options_,
-            type: "placeholder",
-            pre_processors: [],
-            post_processors: [],
-            ...typeof rr_options_.template === "function" ? {
-                template: $8d94abc871e13baf$var$wrap_template_to_throw_into_error_boundary(rr_options_.template, root_in_root, ()=>(0, $46MJV$depictaiutilishared.queueMacroTask)((0, $46MJV$depictaiutilishared.catchify)(dispose_card)) // we just want it cloned and dead
-                )
-            } : {},
-            recs: [
-                {
-                    page_url: "javascript:void(0)"
-                }
-            ] // This later gets ignored and turned into `null` by the SDK functions in the @depict-ai/ui package
-        });
-        const element = elements?.find((e)=>e instanceof HTMLElement || e instanceof SVGElement);
-        if (!element) return [];
-        $8d94abc871e13baf$var$cached_placeholder_element = element.cloneNode(true); // don't save the actual element, clone it directly so that the who provided it can't modify it later (this has caused a bug before with react)
-    }
-    (0, $46MJV$solidjs.runWithOwner)(owner_, ()=>(0, $46MJV$solidjs.createRenderEffect)(()=>{
-            const to_add = num_placeholders() - existing_num;
-            if (to_add <= 0) return;
-            // We don't need to remove placeholders, only need to add. The reason for that is that chrome restores the scroll position once all tasks queued as reaction of the "popstate" events have been completed in the task queue. That means that we need to get the placeholders in fast, or we might lose scroll position if the previous site was shorter.
-            // The query id and the amount might update in separate tasks because one comes from href_change_ipns and the other one from another "popstate" listener. Therefore, we need to be able to dynamically add more placeholders. I'm not entirely sure about this anymore though, since we have the scroll position on a per-id basis it might work anyway but THIS WORKS, and I've been working on this bug for 3 hours so let's just keep it this way.
-            cards_element_[removed_old_children ? "append" : (removed_old_children = true, "replaceChildren")](...Array.from({
-                length: to_add
-            }).map(()=>$8d94abc871e13baf$var$cached_placeholder_element.cloneNode(true)));
-            existing_num += to_add;
-        }));
-}
-function $8d94abc871e13baf$var$wrap_template_to_throw_into_error_boundary(template, root_in_root, on_finally) {
-    return async (...args)=>{
-        try {
-            return await (0, $46MJV$solidjs.runWithOwner)(root_in_root, ()=>template(...args)) || [];
-        } catch (e) {
-            (0, $46MJV$solidjs.runWithOwner)(root_in_root, ()=>{
-                // Throw in case of promise rejection, ultimately into ErrorBoundary
-                throw e;
-            });
-            return [];
-        } finally{
-            on_finally?.();
-        }
-    };
 }
 
 
@@ -1381,16 +1528,24 @@ function $c130252ae1aed6e2$export$fecbb157621501bd({ number_of_rendered_selected
                                                                 };
                                                                 (0, $46MJV$solidjsweb.insert)(_el$5, (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$depictaiutilishared.CrossIcon), {}), _el$6);
                                                                 (0, $46MJV$solidjsweb.insert)(_el$6, ()=>price_formatting_().pre_, _el$7);
-                                                                (0, $46MJV$solidjsweb.insert)(_el$6, ()=>(0, $5fc9fc23df1591db$export$469c7af753d08925)({
-                                                                        price_: (0, $46MJV$solidjs.createMemo)(()=>filter().data[0]),
-                                                                        price_formatting_: price_formatting_
-                                                                    }), _el$7);
+                                                                (0, $46MJV$solidjsweb.insert)(_el$6, (0, $46MJV$solidjsweb.createComponent)((0, $5fc9fc23df1591db$export$a71e92cfbb498adc), {
+                                                                    get price_ () {
+                                                                        return filter().data[0];
+                                                                    },
+                                                                    get price_formatting_ () {
+                                                                        return price_formatting_();
+                                                                    }
+                                                                }), _el$7);
                                                                 (0, $46MJV$solidjsweb.insert)(_el$6, ()=>price_formatting_().post_, _el$7);
                                                                 (0, $46MJV$solidjsweb.insert)(_el$6, ()=>price_formatting_().pre_, null);
-                                                                (0, $46MJV$solidjsweb.insert)(_el$6, ()=>(0, $5fc9fc23df1591db$export$469c7af753d08925)({
-                                                                        price_: (0, $46MJV$solidjs.createMemo)(()=>filter().data[1]),
-                                                                        price_formatting_: price_formatting_
-                                                                    }), null);
+                                                                (0, $46MJV$solidjsweb.insert)(_el$6, (0, $46MJV$solidjsweb.createComponent)((0, $5fc9fc23df1591db$export$a71e92cfbb498adc), {
+                                                                    get price_ () {
+                                                                        return filter().data[1];
+                                                                    },
+                                                                    get price_formatting_ () {
+                                                                        return price_formatting_();
+                                                                    }
+                                                                }), null);
                                                                 (0, $46MJV$solidjsweb.insert)(_el$6, ()=>price_formatting_().post_, null);
                                                                 return _el$5;
                                                             })();
@@ -1689,7 +1844,7 @@ function $76bb4acbbb94c2c6$export$ca21a16d65b3dd8({ show_extras_: [get_show_extr
 const $8984a0a949b1c852$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<form class="checkboxes"></form>`, 2);
 const $8984a0a949b1c852$var$max_visible_without_collapsing = 7;
 const $8984a0a949b1c852$var$show_non_collapsible_when_collapsed = 4;
-function $8984a0a949b1c852$export$dd948f91abc3a1c4({ filter_: filter_ , selected_filters_: [get_selected_filters, set_selected_filters] , i18n_: i18n_ , view_more_button_below_group_: [_get_view_more_button_below_group_, set_view_more_button_below_group_]  }) {
+function $8984a0a949b1c852$export$dd948f91abc3a1c4({ filter_: filter_ , selected_filters_: [get_selected_filters, set_selected_filters] , i18n_: i18n_ , view_more_button_below_group_: [, set_view_more_button_below_group_]  }) {
     const existing_filter = (0, $46MJV$solidjs.createMemo)(()=>{
         const { field: field , op: op  } = filter_();
         return get_selected_filters().find(({ field: checking_field , op: checking_op  })=>checking_field === field && checking_op === op);
@@ -1770,7 +1925,7 @@ function $8984a0a949b1c852$export$dd948f91abc3a1c4({ filter_: filter_ , selected
                 ...base_object,
                 data: [
                     ...new FormData(form)
-                ].filter(([_key, value])=>value === "on").map(([key])=>key)
+                ].filter(([, value])=>value === "on").map(([key])=>key)
             };
             const selected_filters = [
                 ...get_selected_filters()
@@ -1961,16 +2116,24 @@ function $6833018d8bbbb2ad$var$RangeSelector({ max_: max_ , min_: min_ , current
             i18n_: i18n_
         }), _el$8);
         (0, $46MJV$solidjsweb.insert)(_el$9, pre_price, null);
-        (0, $46MJV$solidjsweb.insert)(_el$9, ()=>(0, $5fc9fc23df1591db$export$469c7af753d08925)({
-                price_: min_,
-                price_formatting_: price_formatting_
-            }), null);
+        (0, $46MJV$solidjsweb.insert)(_el$9, (0, $46MJV$solidjsweb.createComponent)((0, $5fc9fc23df1591db$export$a71e92cfbb498adc), {
+            get price_ () {
+                return min_();
+            },
+            get price_formatting_ () {
+                return price_formatting_();
+            }
+        }), null);
         (0, $46MJV$solidjsweb.insert)(_el$9, post_price, null);
         (0, $46MJV$solidjsweb.insert)(_el$10, pre_price, null);
-        (0, $46MJV$solidjsweb.insert)(_el$10, ()=>(0, $5fc9fc23df1591db$export$469c7af753d08925)({
-                price_: max_,
-                price_formatting_: price_formatting_
-            }), null);
+        (0, $46MJV$solidjsweb.insert)(_el$10, (0, $46MJV$solidjsweb.createComponent)((0, $5fc9fc23df1591db$export$a71e92cfbb498adc), {
+            get price_ () {
+                return max_();
+            },
+            get price_formatting_ () {
+                return price_formatting_();
+            }
+        }), null);
         (0, $46MJV$solidjsweb.insert)(_el$10, post_price, null);
         (0, $46MJV$solidjsweb.effect)((_p$)=>{
             const _v$ = i18n_.range_filter_low_point_aria_label_(), _v$2 = min_(), _v$3 = max_(), _v$4 = i18n_.range_filter_high_point_aria_label_(), _v$5 = min_(), _v$6 = max_();
@@ -2875,48 +3038,57 @@ var $6865c7388a79e957$export$2e2bcd8739ae039 = {
 const $8578879ddb04f368$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<span class="show-selected" aria-hidden="true"><span></span></span>`, 4);
 function $8578879ddb04f368$export$53c59af873b303c9({ selected_filters_in_group_: selected_filters_in_group_ , i18n_: { price_formatting_: price_formatting_  }  }) {
     const [show_tick_icon, set_show_tick_icon] = (0, $46MJV$solidjs.createSignal)(false);
-    return (()=>{
-        const _el$ = $8578879ddb04f368$var$_tmpl$.cloneNode(true), _el$2 = _el$.firstChild;
-        (0, $46MJV$solidjsweb.insert)(_el$2, ()=>(0, $46MJV$solidjs.createMemo)(()=>(0, $46MJV$solidjs.batch)(()=>{
-                    set_show_tick_icon(false);
-                    let { size: size  } = selected_filters_in_group_();
-                    try_specific: {
-                        if (size > 1) break try_specific;
-                        for (const [selected_filter, filter_data] of selected_filters_in_group_()){
-                            // we're intentionally not looping in this statement since we always just want to show the first thing in the filter group
-                            const { meta: meta  } = filter_data;
-                            const { type: type  } = meta;
-                            if (type === "range") return [
-                                (0, $46MJV$solidjsweb.memo)(()=>price_formatting_().pre_),
-                                (0, $46MJV$solidjsweb.memo)(()=>(0, $5fc9fc23df1591db$export$469c7af753d08925)({
-                                        price_: (0, $46MJV$solidjs.createMemo)(()=>selected_filter.data[0]),
-                                        price_formatting_: price_formatting_
-                                    })),
-                                (0, $46MJV$solidjsweb.memo)(()=>price_formatting_().post_),
-                                " – ",
-                                (0, $46MJV$solidjsweb.memo)(()=>price_formatting_().pre_),
-                                (0, $46MJV$solidjsweb.memo)(()=>(0, $5fc9fc23df1591db$export$469c7af753d08925)({
-                                        price_: (0, $46MJV$solidjs.createMemo)(()=>selected_filter.data[1]),
-                                        price_formatting_: price_formatting_
-                                    })),
-                                (0, $46MJV$solidjsweb.memo)(()=>price_formatting_().post_)
-                            ];
-                            else {
-                                const { data: data  } = selected_filter;
-                                const data_is_array = Array.isArray(data);
-                                if (data_is_array && data.length !== 1) {
-                                    size = data.length;
-                                    break try_specific;
-                                }
-                                const needle = data_is_array ? data[0] : data;
-                                const index_in_meta = meta.values.findIndex((value)=>needle === value || Array.isArray(needle) && Array.isArray(value) && needle.length === value.length && value.every((item, index)=>needle[index] === item));
-                                return meta.names?.[index_in_meta] || meta.values?.[index_in_meta];
+    const text = (0, $46MJV$solidjs.createMemo)(()=>(0, $46MJV$solidjs.batch)(()=>{
+            set_show_tick_icon(false);
+            let { size: size  } = selected_filters_in_group_();
+            try_specific: {
+                if (size > 1) break try_specific;
+                for (const [selected_filter, filter_data] of selected_filters_in_group_()){
+                    // we're intentionally not looping in this statement since we always just want to show the first thing in the filter group
+                    const { meta: meta  } = filter_data;
+                    const { type: type  } = meta;
+                    if (type === "range") return [
+                        (0, $46MJV$solidjsweb.memo)(()=>price_formatting_().pre_),
+                        (0, $46MJV$solidjsweb.createComponent)((0, $5fc9fc23df1591db$export$a71e92cfbb498adc), {
+                            get price_ () {
+                                return selected_filter.data[0];
+                            },
+                            get price_formatting_ () {
+                                return price_formatting_();
+                            }
+                        }),
+                        (0, $46MJV$solidjsweb.memo)(()=>price_formatting_().post_),
+                        " – ",
+                        (0, $46MJV$solidjsweb.memo)(()=>price_formatting_().pre_),
+                        (0, $46MJV$solidjsweb.createComponent)((0, $5fc9fc23df1591db$export$a71e92cfbb498adc), {
+                            get price_ () {
+                                return selected_filter.data[1];
+                            },
+                            get price_formatting_ () {
+                                return price_formatting_();
                             }
+                        }),
+                        (0, $46MJV$solidjsweb.memo)(()=>price_formatting_().post_)
+                    ];
+                    else {
+                        const { data: data  } = selected_filter;
+                        const data_is_array = Array.isArray(data);
+                        if (data_is_array && data.length !== 1) {
+                            size = data.length;
+                            break try_specific;
                         }
+                        const needle = data_is_array ? data[0] : data;
+                        const index_in_meta = meta.values.findIndex((value)=>needle === value || Array.isArray(needle) && Array.isArray(value) && needle.length === value.length && value.every((item, index)=>needle[index] === item));
+                        return meta.names?.[index_in_meta] || meta.values?.[index_in_meta];
                     }
-                    set_show_tick_icon(true);
-                    return size + "";
-                })));
+                }
+            }
+            set_show_tick_icon(true);
+            return size + "";
+        }));
+    return (()=>{
+        const _el$ = $8578879ddb04f368$var$_tmpl$.cloneNode(true), _el$2 = _el$.firstChild;
+        (0, $46MJV$solidjsweb.insert)(_el$2, text);
         (0, $46MJV$solidjsweb.insert)(_el$, (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.Show), {
             get when () {
                 return show_tick_icon();
@@ -2982,6 +3154,7 @@ function $5804fd6cbfb7160f$export$ab34afce88557c0e(props) {
 
 
 
+
 const $1587765bd31f3722$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="filter-collapsible"></div>`, 2), $1587765bd31f3722$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<button class="clear-group"><span></span></button>`, 4), $1587765bd31f3722$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="view-more-clear"></div>`, 2), $1587765bd31f3722$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="filter-collapsible-body"><div class="filter-part"></div></div>`, 4), $1587765bd31f3722$var$_tmpl$5 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<details class="filter-collapsible"></details>`, 2), $1587765bd31f3722$var$_tmpl$6 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<summary class="filter-group-summary"><div class="summary"><span></span><div class="selected-w-sign"></div></div></summary>`, 8), $1587765bd31f3722$var$_tmpl$7 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="ungrouped"></div>`, 2), $1587765bd31f3722$var$_tmpl$8 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<button class="clear-all-filters major"></button>`, 2);
 function $1587765bd31f3722$export$3f1a388cc0d8fed7(props) {
     // Split like this to make placeholder wrapping more visible & this component is exported and used in MobileModal
@@ -3093,13 +3266,22 @@ function $1587765bd31f3722$var$ActualFilterBody(props) {
                                                     return "Filter group " + JSON.stringify(section_) + " failed";
                                                 },
                                                 get children () {
-                                                    return (0, $46MJV$solidjs.createMemo)(()=>(0, $46MJV$solidjs.createMemo)(()=>(0, $6865c7388a79e957$export$2e2bcd8739ae039)[filter()?.meta?.type])()?.({
-                                                            filter_: filter,
-                                                            expanded_hierarchical_filters_: props.expanded_hierarchical_filters_,
-                                                            selected_filters_: props.selected_filters_,
-                                                            i18n_: props.i18n_,
-                                                            view_more_button_below_group_: view_more_button_below_group
-                                                        }));
+                                                    return (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjsweb.Dynamic), {
+                                                        get component () {
+                                                            return (0, $6865c7388a79e957$export$2e2bcd8739ae039)[filter()?.meta?.type];
+                                                        },
+                                                        filter_: filter,
+                                                        get expanded_hierarchical_filters_ () {
+                                                            return props.expanded_hierarchical_filters_;
+                                                        },
+                                                        get selected_filters_ () {
+                                                            return props.selected_filters_;
+                                                        },
+                                                        get i18n_ () {
+                                                            return props.i18n_;
+                                                        },
+                                                        view_more_button_below_group_: view_more_button_below_group
+                                                    });
                                                 }
                                             })
                                     }));
@@ -3155,19 +3337,27 @@ function $1587765bd31f3722$var$ActualFilterBody(props) {
                     get each () {
                         return untogglable_filters();
                     },
-                    children: (filter)=>// create memo to diff the function with next function
-                    {
+                    children: (filter)=>{
                         const view_more_button_below_group = (0, $46MJV$solidjs.createSignal)();
-                        const filter_element_memo = (0, $46MJV$solidjs.createMemo)(()=>(0, $46MJV$solidjs.createMemo)(()=>(0, $6865c7388a79e957$export$2e2bcd8739ae039)[filter()?.meta?.type])()?.({
+                        const [get_view_more_button_below_group] = view_more_button_below_group;
+                        return [
+                            (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjsweb.Dynamic), {
+                                get component () {
+                                    return (0, $6865c7388a79e957$export$2e2bcd8739ae039)[filter()?.meta?.type];
+                                },
                                 filter_: filter,
-                                expanded_hierarchical_filters_: props.expanded_hierarchical_filters_,
-                                selected_filters_: props.selected_filters_,
-                                i18n_: props.i18n_,
+                                get expanded_hierarchical_filters_ () {
+                                    return props.expanded_hierarchical_filters_;
+                                },
+                                get selected_filters_ () {
+                                    return props.selected_filters_;
+                                },
+                                get i18n_ () {
+                                    return props.i18n_;
+                                },
                                 view_more_button_below_group_: view_more_button_below_group
-                            }));
-                        return [
-                            filter_element_memo,
-                            view_more_button_below_group[0]
+                            }),
+                            (0, $46MJV$solidjsweb.memo)(get_view_more_button_below_group)
                         ];
                     }
                 }));
@@ -3775,6 +3965,7 @@ function $0bc45cf6753f874a$export$b288c38ae3fddb56({ available_filters_: availab
 
 const $881cb1745bafff7a$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="filters"><div class="body"></div></div>`, 4), $881cb1745bafff7a$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="sorting"><div class="body"></div></div>`, 4), $881cb1745bafff7a$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="sort-and-filter-buttons"><div class="outer"><div class="inner"></div></div></div>`, 6), $881cb1745bafff7a$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<span class="num-filters"></span>`, 2), $881cb1745bafff7a$var$_tmpl$5 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="open-filters-button-container"><button class="filter toggle-button major-minor-transition" type="button"><span></span></button></div>`, 6), $881cb1745bafff7a$var$_tmpl$6 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<button class="toggle-button for-sorting major-minor-transition"><span></span></button>`, 4);
 function $881cb1745bafff7a$export$d7841e452f2e59a8({ current_sorting_: current_sorting_ , set_extra_els_in_results_container_: set_extra_els_in_results_container_ , search_filters_open_: search_filters_open_ , search_sorting_open_: search_sorting_open_ , set_sort_or_filter_open_: set_sort_or_filter_open_ , i18n_: i18n_ , available_sortings_: available_sortings_ , available_filters_: available_filters_ , expanded_filters_: expanded_filters_ , middle_elements_: middle_elements_ , input_modal_open_: input_modal_open_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_ , set_sort_and_filter_element_: set_sort_and_filter_element_ , formatted_number_of_results_: formatted_number_of_results_ , filter_button_width_: filter_button_width_ , sort_button_width_: sort_button_width_ , selected_filters_: selected_filters_ , local_filter_cache_: local_filter_cache_ , get_extra_filters_button_: get_extra_filters_button_ , get_extra_sorting_button_: get_extra_sorting_button_  }) {
+    // @ts-ignore
     return (0, $0f2f58dd60b11888$export$b69d0d92862de18b)({
         severity_: "error",
         message_: "Sorting and filters failed",
@@ -4568,90 +4759,6 @@ function $cdc2c00c0a7da86e$export$466cdc317043f6cb({ quicklinks_data_: quicklink
 
 
 
-
-
-function $207f7b30db90d048$export$3945d6db2dfd3d12({ crumb_data_: crumb_data_ , query_id_: query_id_ , i18n_: i18n_ , selected_filters_: selected_filters_ , local_filter_cache_: local_filter_cache_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , plp_results_: plp_results_ , router_: router_  }) {
-    // If we just got opened in a new tab, clear filters instantly and remove the flag
-    $207f7b30db90d048$var$clear_if_opened_new_tab_with_sideways_url_params_flag({
-        plp_results_: plp_results_,
-        local_filter_cache_: local_filter_cache_,
-        expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-        selected_filters_: selected_filters_,
-        i18n_: i18n_,
-        router_: router_
-    });
-    // Code below is for when we're already open and the user navigates to a new category
-    let previous_crumb_data = (0, $46MJV$solidjs.untrack)(crumb_data_);
-    let query_id_when_we_got_previous_data = (0, $46MJV$solidjs.untrack)(query_id_);
-    let allow_filter_clearing = true; // set to false when going backwards/forwards
-    // temporarily disable filter clearing when going backwards/forwards
-    const handler = ()=>allow_filter_clearing = false;
-    window.addEventListener("popstate", handler); // popstate only gets called when using back/forwards button of browser or the history navigate to achieve the same, but not on pushState or replaceState
-    (0, $46MJV$solidjs.onCleanup)(()=>window.removeEventListener("popstate", handler));
-    (0, $46MJV$solidjs.createEffect)((0, $46MJV$solidjs.on)(crumb_data_, (0, $46MJV$depictaiutilishared.catchify)((new_crumb_data)=>{
-        const query_id_of_new_data = query_id_();
-        if (allow_filter_clearing && previous_crumb_data && new_crumb_data && query_id_of_new_data !== query_id_when_we_got_previous_data) {
-            const previous_length = previous_crumb_data.length;
-            const new_length = new_crumb_data.length;
-            const went_upwards = new_length < previous_length;
-            const went_downwards = previous_length < new_length;
-            const shorter_array = went_upwards ? new_crumb_data : previous_crumb_data;
-            const longer_array = went_upwards ? previous_crumb_data : new_crumb_data;
-            if (!((went_upwards || went_downwards) && shorter_array.every(({ query_id: query_id  }, index)=>longer_array[index].query_id === query_id))) {
-                // We went sideways, not up or down. Clear filters.
-                (0, $92e4e7906daa1ff8$export$8895d39404bd2bb1)({
-                    user_triggered_: false,
-                    i18n_: i18n_,
-                    also_clear_sorting_: false,
-                    selected_filters_: selected_filters_,
-                    expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-                    local_filter_cache_: local_filter_cache_
-                });
-                // Also ensure we don't have `sideways_url_params_flag` set anymore
-                $207f7b30db90d048$var$delete_sideways_param_flag(router_);
-            }
-        }
-        query_id_when_we_got_previous_data = query_id_of_new_data;
-        previous_crumb_data = new_crumb_data;
-        if (!allow_filter_clearing) allow_filter_clearing = true;
-    })));
-}
-function $207f7b30db90d048$var$clear_if_opened_new_tab_with_sideways_url_params_flag({ plp_results_: plp_results_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , i18n_: i18n_ , selected_filters_: selected_filters_ , local_filter_cache_: local_filter_cache_ , router_: router_  }) {
-    const tracking_function_for_plp_results = (0, $46MJV$solidjs.createReaction)(()=>{
-        // On first rendering of the CategoryPage (after we have results), check if we got to this URL by going sideways in QuickLinks and clear filters with toast if so
-        const had_flag = $207f7b30db90d048$var$delete_sideways_param_flag(router_);
-        if (!had_flag) return;
-        (0, $46MJV$depictaiutilishared.dlog)("Flag to clear filters was set, clearing filters");
-        (0, $46MJV$depictaiutilishared.queueMacroTask)(()=>{
-            // Do it next task so that all the filters have time to populate
-            (0, $92e4e7906daa1ff8$export$8895d39404bd2bb1)({
-                user_triggered_: false,
-                i18n_: i18n_,
-                also_clear_sorting_: false,
-                selected_filters_: selected_filters_,
-                expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-                local_filter_cache_: local_filter_cache_
-            });
-        });
-    });
-    tracking_function_for_plp_results(plp_results_);
-}
-function $207f7b30db90d048$var$delete_sideways_param_flag(router) {
-    const url_object = new URL(location.href);
-    const { searchParams: searchParams  } = url_object;
-    if (searchParams.get((0, $c6a04c153e9853a7$export$e2cf3f19dd3f8aac)) !== "true") return false;
-    searchParams.delete((0, $c6a04c153e9853a7$export$e2cf3f19dd3f8aac));
-    router.navigate_.go_to_({
-        new_url_: url_object,
-        is_replace_: true,
-        force_spa_navigation_: true
-    });
-    return true;
-}
-
-
-
-
 const $151280ad98f4438b$var$max_history_change_frequency = 300;
 const $151280ad98f4438b$var$api_max_products_per_request = 100;
 function $151280ad98f4438b$export$6e49da55e449af7c({ scroll_restoration_data_: [, set_scroll_restoration_data] , last_result_in_viewport_: [get_last_result_in_viewport_] , id_: id_ , can_write_scroll_restoration_: can_write_scroll_restoration_  }) {
@@ -4764,8 +4871,92 @@ let $29b757e2ae26852c$export$44dad306455dddf;
 })($29b757e2ae26852c$export$44dad306455dddf || ($29b757e2ae26852c$export$44dad306455dddf = {}));
 
 
+
+
+
+
+function $207f7b30db90d048$export$3945d6db2dfd3d12({ crumb_data_: crumb_data_ , query_id_: query_id_ , i18n_: i18n_ , selected_filters_: selected_filters_ , local_filter_cache_: local_filter_cache_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , plp_results_: plp_results_ , router_: router_  }) {
+    // If we just got opened in a new tab, clear filters instantly and remove the flag
+    $207f7b30db90d048$var$clear_if_opened_new_tab_with_sideways_url_params_flag({
+        plp_results_: plp_results_,
+        local_filter_cache_: local_filter_cache_,
+        expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+        selected_filters_: selected_filters_,
+        i18n_: i18n_,
+        router_: router_
+    });
+    // Code below is for when we're already open and the user navigates to a new category
+    let previous_crumb_data = (0, $46MJV$solidjs.untrack)(crumb_data_);
+    let query_id_when_we_got_previous_data = (0, $46MJV$solidjs.untrack)(query_id_);
+    let allow_filter_clearing = true; // set to false when going backwards/forwards
+    // temporarily disable filter clearing when going backwards/forwards
+    const handler = ()=>allow_filter_clearing = false;
+    window.addEventListener("popstate", handler); // popstate only gets called when using back/forwards button of browser or the history navigate to achieve the same, but not on pushState or replaceState
+    (0, $46MJV$solidjs.onCleanup)(()=>window.removeEventListener("popstate", handler));
+    (0, $46MJV$solidjs.createEffect)((0, $46MJV$solidjs.on)(crumb_data_, (0, $46MJV$depictaiutilishared.catchify)((new_crumb_data)=>{
+        const query_id_of_new_data = query_id_();
+        if (allow_filter_clearing && previous_crumb_data && new_crumb_data && query_id_of_new_data !== query_id_when_we_got_previous_data) {
+            const previous_length = previous_crumb_data.length;
+            const new_length = new_crumb_data.length;
+            const went_upwards = new_length < previous_length;
+            const went_downwards = previous_length < new_length;
+            const shorter_array = went_upwards ? new_crumb_data : previous_crumb_data;
+            const longer_array = went_upwards ? previous_crumb_data : new_crumb_data;
+            if (!((went_upwards || went_downwards) && shorter_array.every(({ query_id: query_id  }, index)=>longer_array[index].query_id === query_id))) {
+                // We went sideways, not up or down. Clear filters.
+                (0, $92e4e7906daa1ff8$export$8895d39404bd2bb1)({
+                    user_triggered_: false,
+                    i18n_: i18n_,
+                    also_clear_sorting_: false,
+                    selected_filters_: selected_filters_,
+                    expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+                    local_filter_cache_: local_filter_cache_
+                });
+                // Also ensure we don't have `sideways_url_params_flag` set anymore
+                $207f7b30db90d048$var$delete_sideways_param_flag(router_);
+            }
+        }
+        query_id_when_we_got_previous_data = query_id_of_new_data;
+        previous_crumb_data = new_crumb_data;
+        if (!allow_filter_clearing) allow_filter_clearing = true;
+    })));
+}
+function $207f7b30db90d048$var$clear_if_opened_new_tab_with_sideways_url_params_flag({ plp_results_: plp_results_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , i18n_: i18n_ , selected_filters_: selected_filters_ , local_filter_cache_: local_filter_cache_ , router_: router_  }) {
+    const tracking_function_for_plp_results = (0, $46MJV$solidjs.createReaction)(()=>{
+        // On first rendering of the CategoryPage (after we have results), check if we got to this URL by going sideways in QuickLinks and clear filters with toast if so
+        const had_flag = $207f7b30db90d048$var$delete_sideways_param_flag(router_);
+        if (!had_flag) return;
+        (0, $46MJV$depictaiutilishared.dlog)("Flag to clear filters was set, clearing filters");
+        (0, $46MJV$depictaiutilishared.queueMacroTask)(()=>{
+            // Do it next task so that all the filters have time to populate
+            (0, $92e4e7906daa1ff8$export$8895d39404bd2bb1)({
+                user_triggered_: false,
+                i18n_: i18n_,
+                also_clear_sorting_: false,
+                selected_filters_: selected_filters_,
+                expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+                local_filter_cache_: local_filter_cache_
+            });
+        });
+    });
+    tracking_function_for_plp_results(plp_results_);
+}
+function $207f7b30db90d048$var$delete_sideways_param_flag(router) {
+    const url_object = new URL(location.href);
+    const { searchParams: searchParams  } = url_object;
+    if (searchParams.get((0, $c6a04c153e9853a7$export$e2cf3f19dd3f8aac)) !== "true") return false;
+    searchParams.delete((0, $c6a04c153e9853a7$export$e2cf3f19dd3f8aac));
+    router.navigate_.go_to_({
+        new_url_: url_object,
+        is_replace_: true,
+        force_spa_navigation_: true
+    });
+    return true;
+}
+
+
 const $671632478f2a7ce7$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="product-count"> </div>`, 2), $671632478f2a7ce7$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div></div>`, 2), $671632478f2a7ce7$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="filter-results-for-one-row"></div>`, 2), $671632478f2a7ce7$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="depict plp category"><div class="listing-page"></div></div>`, 4);
-function $671632478f2a7ce7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ , query_id_: query_id_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , category_filters_open_: category_filters_open_ , category_sorting_open_: category_sorting_open_ , expanded_filters_: expanded_filters_ , selected_filters_: selected_filters_ , get_quicklinks_accessor_: get_quicklinks_accessor_ , i18n_: incoming_i18n , get_breadcrumb_accessor_: get_breadcrumb_accessor_ , slider_arrow_button_: slider_arrow_button_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , local_filter_cache_: local_filter_cache_ , tenant_: tenant_ , market_: market_ , router_: router_ , show_quicklinks_: show_quicklinks_ , category_title_: category_title_ , show_breadcrumbs_: show_breadcrumbs_ , layout_options_: layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , rr_options_: rr_options_ , get_product_id_: get_product_id_  }) {
+function $671632478f2a7ce7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ , query_id_: query_id_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , category_filters_open_: category_filters_open_ , category_sorting_open_: category_sorting_open_ , expanded_filters_: expanded_filters_ , selected_filters_: selected_filters_ , get_quicklinks_accessor_: get_quicklinks_accessor_ , i18n_: incoming_i18n , get_breadcrumb_accessor_: get_breadcrumb_accessor_ , slider_arrow_button_: slider_arrow_button_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , local_filter_cache_: local_filter_cache_ , tenant_: tenant_ , market_: market_ , router_: router_ , show_quicklinks_: show_quicklinks_ , category_title_: category_title_ , show_breadcrumbs_: show_breadcrumbs_ , layout_options_: layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_  }) {
     let results_for;
     let only_show_filters_opener_;
     let middle_elements_;
@@ -4775,12 +4966,6 @@ function $671632478f2a7ce7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ ,
         show_n_results_: incoming_i18n.show_n_products_,
         no_results_text_: incoming_i18n.no_products_text_
     };
-    const tenant_object_ = new (0, $46MJV$depictaiutilishared.Tenant)({
-        TENANT: (0, $46MJV$solidjs.untrack)(tenant_),
-        MARKET: (0, $46MJV$solidjs.untrack)(market_),
-        GA_ID: "",
-        get_product_id: get_product_id_
-    });
     const [get_sorting] = current_sorting_;
     const number_of_rendered_selected_filters_items_ = (0, $46MJV$solidjs.createSignal)(0);
     const first_result_in_viewport_ = (0, $46MJV$solidjs.createSignal)();
@@ -5017,11 +5202,9 @@ function $671632478f2a7ce7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ ,
                         last_result_in_viewport_: last_result_in_viewport_,
                         scroll_restoration_data_: scroll_restoration_data_,
                         layout_options_: layout_options_,
-                        rr_options_: rr_options_,
+                        product_card_template_: product_card_template_,
                         sort_or_filter_open_: sort_or_filter_open_,
                         desktop_filter_elements_: desktop_filter_elements_,
-                        tenant_object_: tenant_object_,
-                        type_for_tracking_: "category",
                         id_currently_querying_for_: query_id_,
                         no_results_options_: {
                             selected_filters_: selected_filters_,
@@ -5172,6 +5355,7 @@ function $623202ae203e9e59$export$f091cbac892643a4(obj) {
 
 function $f27b0b326e0a87e2$export$23fca46f3143581f(component, error_message) {
     const component_in_error_boundary = (do_with_elements)=>{
+        // @ts-ignore
         return (0, $0f2f58dd60b11888$export$b69d0d92862de18b)({
             severity_: "error",
             message_: error_message,
@@ -5198,13 +5382,16 @@ function $f27b0b326e0a87e2$export$23fca46f3143581f(component, error_message) {
 
 
 
-function $004640621ca953d0$export$7bcff1eb3eca57d7(router) {
+function $cb699e435fadd254$export$477caf01aecaeb2a({ search_query_url_param_name_: search_query_url_param_name_ , router_: router_  }) {
+    const search_query_ = search_query_url_param_name_ ? (0, $46MJV$solidjs.createSignal)("") : undefined;
+    const get_search_query_ = search_query_?.[0];
+    const set_search_query = search_query_?.[1];
     const current_sorting_ = (0, $46MJV$solidjs.createSignal)();
     const selected_filters_ = (0, $46MJV$solidjs.createSignal)([]);
-    const [get_sorting, set_sorting] = current_sorting_;
-    const [get_selected_filters, set_selected_filters] = selected_filters_;
+    const [get_sorting_, set_sorting] = current_sorting_;
+    const [get_selected_filters_, set_selected_filters] = selected_filters_;
     const [get_current_href, set_current_href] = (0, $46MJV$solidjs.createSignal)(location.href);
-    const history_change_handler = ()=>set_current_href(location.href);
+    const history_change_handler = (0, $46MJV$depictaiutilishared.catchify)(()=>set_current_href(location.href));
     const owner = (0, $46MJV$solidjs.getOwner)() || (0, $46MJV$solidjs.createRoot)(()=>(0, $46MJV$solidjs.getOwner)());
     let writer_started = false;
     (0, $46MJV$depictaiutilishared.instant_exec_on_suspect_history_change).add(history_change_handler);
@@ -5214,12 +5401,12 @@ function $004640621ca953d0$export$7bcff1eb3eca57d7(router) {
         (0, $46MJV$solidjs.batch)(()=>{
             const found_sorting = (0, $c6a04c153e9853a7$export$766e9676e74997d3)(searchParams);
             if (found_sorting) {
-                const current_sorting = (0, $46MJV$solidjs.untrack)(get_sorting);
+                const current_sorting = (0, $46MJV$solidjs.untrack)(get_sorting_);
                 // Do some diffing since we might assume in certain places of the code that if the signal changes it means the sorting has changed
                 if (current_sorting?.field !== found_sorting.field || current_sorting?.order !== found_sorting.order) set_sorting(found_sorting);
             } else set_sorting();
             const found_filters = (0, $c6a04c153e9853a7$export$f934fa24c3a86811)(searchParams);
-            const selected_filters = (0, $46MJV$solidjs.untrack)(get_selected_filters);
+            const selected_filters = (0, $46MJV$solidjs.untrack)(get_selected_filters_);
             const found_filters_map = new Map(found_filters.map(({ field: field , op: op , data: data  })=>[
                     JSON.stringify([
                         field,
@@ -5232,25 +5419,36 @@ function $004640621ca953d0$export$7bcff1eb3eca57d7(router) {
                     field,
                     op
                 ]))) === JSON.stringify(data))) set_selected_filters(found_filters);
+            if (search_query_url_param_name_) {
+                const found_query = searchParams.get(search_query_url_param_name_);
+                set_search_query(found_query || "");
+            }
             if (!writer_started) {
                 // The owner here is the createComputed which gets disposed the next time the computation runs - but we actually just want to delay the start of the href_writer until our signals contain the current value of the URL, therefore the runWithOwner
-                (0, $46MJV$solidjs.runWithOwner)(owner, ()=>$004640621ca953d0$var$start_href_writer(get_sorting, get_selected_filters, router));
+                (0, $46MJV$solidjs.runWithOwner)(owner, ()=>$cb699e435fadd254$var$start_href_writer({
+                        get_sorting_: get_sorting_,
+                        get_selected_filters_: get_selected_filters_,
+                        router_: router_
+                    }));
                 writer_started = true;
             }
         });
     });
+    // @ts-ignore
     return {
         current_sorting_: current_sorting_,
-        selected_filters_: selected_filters_
+        selected_filters_: selected_filters_,
+        ...typeof search_query_url_param_name_ === "string" ? {
+            search_query_accessor_: get_search_query_
+        } : {}
     };
 }
 /**
  * Writes the sorting and filters to the URL query parameters when they change.
- */ function $004640621ca953d0$var$start_href_writer(get_sorting, get_selected_filters, router) {
-    // This has to be a createComputed because there can be some kind of URL query bouncing back and forwards otherwise (observed when clearing filters by making a new search)
-    (0, $46MJV$solidjs.createComputed)((0, $46MJV$solidjs.on)([
-        get_sorting,
-        get_selected_filters
+ */ function $cb699e435fadd254$var$start_href_writer({ get_sorting_: get_sorting_ , get_selected_filters_: get_selected_filters_ , router_: router_  }) {
+    (0, $46MJV$solidjs.createEffect)((0, $46MJV$solidjs.on)([
+        get_sorting_,
+        get_selected_filters_
     ], ([sorting, filters])=>{
         const current_href = location.href;
         const url_object = new URL(current_href);
@@ -5268,7 +5466,7 @@ function $004640621ca953d0$export$7bcff1eb3eca57d7(router) {
         // Having the array middle step because if we'd check the "size" property of the map the algorithm could be fooled if there were two query parameters with the same key
         const new_search_params_map = new Map(new_search_params);
         if (unmodified_search_params.length !== new_search_params.length || !unmodified_search_params.every(([key, value])=>new_search_params_map.get(key) === value)) // Only update URL if it actually changed
-        router.navigate_.go_to_({
+        router_.navigate_.go_to_({
             is_replace_: true,
             new_url_: url_object.href,
             force_spa_navigation_: true
@@ -5328,10 +5526,14 @@ class $43940d5ca403c293$export$7e1297a3a19f10d8 {
      * @param force_spa_navigation_ if you want to force SPA navigation even if on_navigation_ is set to "hard_navigation". You should only set this to true for inter-SDK-page navigations
      * @param is_replace_ if you want to replace the current URL in history instead of pushing a new one
      * @param category_query_id_ If you are navigating to a category and know the query_id of, please provide it. This is for making a better devEx in js-ui
-     */ go_to_: async ({ new_url_: new_url_ , event_: event_ , force_spa_navigation_: force_spa_navigation_ , is_replace_: is_replace_ , category_query_id_: category_query_id_  })=>{
+     */ go_to_: (0, $46MJV$depictaiutilishared.catchify)(async ({ new_url_: raw_new_url , event_: event_ , force_spa_navigation_: force_spa_navigation_ , is_replace_: is_replace_ , category_query_id_: category_query_id_  })=>{
+            const new_url_ = raw_new_url instanceof URL ? raw_new_url : new URL(raw_new_url, location.origin);
             const wants_hard_navigation = this.on_navigation_ === "hard_navigation";
             if (this.#dont_attempt_navigation(event_)) return;
-            if (wants_hard_navigation && !force_spa_navigation_) {
+            const different_origin = new_url_.origin !== location.origin;
+            if (wants_hard_navigation && (!force_spa_navigation_ || different_origin)) {
+                if (force_spa_navigation_ && different_origin) // If we call history.pushState on a different origin, it will throw an error, so fallback to hard navigations
+                (0, $46MJV$depictaiutilishared.dwarn)("Can't single page navigate to", new_url_.href, "due to different origin, this MIGHT mean you should fix the URLs");
                 if (!event_) // If we haven't gotten an event, nothing will happen by not calling prevent default, so we need to change the URL
                 location.assign(new_url_);
                 return;
@@ -5349,7 +5551,7 @@ class $43940d5ca403c293$export$7e1297a3a19f10d8 {
                 new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin)
             });
             await promise;
-        }
+        })
     };
     constructor(on_navigation){
         this.on_navigation_ = on_navigation;
@@ -5411,7 +5613,9 @@ class $068a627cc18f7bb6$export$f34314aa9505732e {
         Object.assign(this, props_on_class); // set initial signal values
         (0, $33815c5a406b6cc0$export$5162a71f252e6122)();
         if (on_navigation) this.#router.on_navigation_ = on_navigation;
-        const { selected_filters_: selected_filters_ , current_sorting_: current_sorting_  } = (0, $004640621ca953d0$export$7bcff1eb3eca57d7)(this.#router);
+        const { selected_filters_: selected_filters_ , current_sorting_: current_sorting_  } = (0, $cb699e435fadd254$export$477caf01aecaeb2a)({
+            router_: this.#router
+        });
         const [reset_history_state_, state_] = (0, $0de081f67b6d15b5$export$9862539c89138352)(()=>({
                 category_filters_open: false,
                 category_sorting_open: false,
@@ -5420,7 +5624,7 @@ class $068a627cc18f7bb6$export$f34314aa9505732e {
                 category_local_filter_cache: [],
                 category_expanded_hierarchical_filters: [],
                 category_scroll_restoration_data: []
-            }));
+            }), this.#router);
         const i18n_ = (0, $623202ae203e9e59$export$f091cbac892643a4)(this.#locale_signal[0]);
         $068a627cc18f7bb6$var$privately_shared_properties.set(this, {
             state_: state_,
@@ -5439,7 +5643,7 @@ class $068a627cc18f7bb6$export$f34314aa9505732e {
         });
     }
 }
-function $068a627cc18f7bb6$export$e2bf8ce7779e827e({ depict_category: depict_category , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , get_product_id: get_product_id , show_breadcrumbs: show_breadcrumbs = true , show_quicklinks: show_quicklinks = true , category_title: category_title  }) {
+function $068a627cc18f7bb6$export$e2bf8ce7779e827e({ depict_category: depict_category , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , show_breadcrumbs: show_breadcrumbs = true , show_quicklinks: show_quicklinks = true , category_title: category_title  }) {
     const shared_properties = $068a627cc18f7bb6$var$get_shared_properties(depict_category);
     const grid_spacing_override = typeof grid_spacing === "string" ? {
         grid_spacing: grid_spacing
@@ -5472,17 +5676,11 @@ function $068a627cc18f7bb6$export$e2bf8ce7779e827e({ depict_category: depict_cat
             expanded_hierarchical_filters_: expanded_hierarchical_filters_,
             selected_filters_: selected_filters_,
             scroll_restoration_data_: scroll_restoration_data_,
-            get_product_id_: get_product_id,
             layout_options_: {
                 cols_at_size: (0, $7958d3dbd96a4f87$export$6daf8749b65a1b77)(cols_at_size),
                 ...grid_spacing_override
             },
-            rr_options_: {
-                template: (display, info)=>{
-                    const is_placeholder = info.rendering_options.type === "placeholder";
-                    return product_card_template(is_placeholder ? null : display, info);
-                }
-            }
+            product_card_template_: product_card_template
         });
     }, "Entire CategoryPage failed");
 }
@@ -5888,22 +6086,48 @@ function $2989e355f64e18e1$export$b94867ecbd698f21({ search_field_value_: search
 
 
 
+
+
 const $9f81b7ced87aabf2$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="cards"></div>`, 2), $9f81b7ced87aabf2$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="search-recs"><h3 class="search-recs-title"></h3></div>`, 4), $9f81b7ced87aabf2$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<button class="show-more major" type="button"></button>`, 2);
 const $9f81b7ced87aabf2$export$1c8c715550dc689d = 2;
-function $9f81b7ced87aabf2$export$7de92c4c2205ebf3({ depict_api_: depict_api_ , i18n_: i18n_ , tenant_object_: tenant_object_ , search_query_base_: search_query_base_ , rr_options_: rr_options_ , showing_recommendation_rows_: showing_recommendation_rows_ , view_more_button_: view_more_button_ = true , layout_options_: layout_options_  }) {
-    const [is_showing_something, set_is_showing_something] = (0, $46MJV$solidjs.createSignal)(false);
-    const cards = $9f81b7ced87aabf2$var$_tmpl$.cloneNode(true);
-    const on_next_render = [];
-    const main_element = (()=>{
+function $9f81b7ced87aabf2$export$7de92c4c2205ebf3({ depict_api_: depict_api_ , i18n_: i18n_ , search_query_base_: search_query_base_ , product_card_template_: product_card_template_ , showing_recommendation_rows_: showing_recommendation_rows_ , view_more_button_: view_more_button_ = true , layout_options_: layout_options_  }) {
+    const [get_showing_recommendation_rows] = showing_recommendation_rows_; // We reset this in after_submit in search.tsx FYI
+    const rows_object = view_more_button_ ? $9f81b7ced87aabf2$var$make_state_saved_rows(showing_recommendation_rows_, i18n_) : "all";
+    const [recommendations_resource] = (0, $46MJV$solidjs.createResource)(search_query_base_, (query)=>depict_api_.get_recommended(query).then((r)=>r.displays));
+    const is_showing_something = (0, $46MJV$solidjs.createMemo)(()=>recommendations_resource.loading || recommendations_resource()?.length);
+    const num_placeholders_ = (0, $46MJV$solidjs.createMemo)(()=>(0, $39d15a684cb3e309$export$6c9030e511152266) + get_showing_recommendation_rows() * Math.max(...layout_options_.cols_at_size.map(([per_column])=>per_column)));
+    const cards = (()=>{
+        const _el$ = $9f81b7ced87aabf2$var$_tmpl$.cloneNode(true);
+        (0, $46MJV$solidjsweb.insert)(_el$, (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.Suspense), {
+            get fallback () {
+                return (0, $7b0b7e887b485a91$export$f33414a4df0afd3f)({
+                    num_placeholders_: num_placeholders_,
+                    product_card_template_: product_card_template_
+                });
+            },
+            get children () {
+                return (()=>{
+                    // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
+                    const displays_by_key_ = (0, $ea6c1dd5af2900d8$export$7f8bd308237ab5a5)((0, $46MJV$solidjs.createMemo)(()=>recommendations_resource() || []));
+                    return (0, $ea6c1dd5af2900d8$export$43f0fb951fcb0c54)({
+                        displays_by_key_: displays_by_key_,
+                        merchant_: (0, $46MJV$solidjs.createMemo)(()=>search_query_base_().tenant),
+                        market_: (0, $46MJV$solidjs.createMemo)(()=>search_query_base_().market),
+                        product_card_template_: product_card_template_
+                    });
+                })();
+            }
+        }));
+        return _el$;
+    })();
+    const search_recs_elements = (()=>{
         const _el$2 = $9f81b7ced87aabf2$var$_tmpl$2.cloneNode(true), _el$3 = _el$2.firstChild;
         (0, $46MJV$solidjsweb.insert)(_el$3, ()=>i18n_.search_recs_title_());
         (0, $46MJV$solidjsweb.insert)(_el$2, (0, $8e863dc22b06b688$export$a2cc176055f8f08), null);
         (0, $46MJV$solidjsweb.insert)(_el$2, cards, null);
         return _el$2;
     })();
-    const [get_showing_recommendation_rows] = showing_recommendation_rows_;
-    const rows_object = view_more_button_ ? $9f81b7ced87aabf2$var$make_state_saved_rows(showing_recommendation_rows_, i18n_) : "all";
-    const cleanup_old_cards = [];
+    // the cards element must have a parent for Layout to work, therefore we're inserting it into a div above
     (0, $46MJV$depictaiutilishared.Layout)({
         container_element: cards,
         layout: "grid",
@@ -5913,77 +6137,11 @@ function $9f81b7ced87aabf2$export$7de92c4c2205ebf3({ depict_api_: depict_api_ ,
             e,
             "Layout failed"
         ], "error"));
-    // copied from RecommendationGrid
-    // convoluted lazy loading that
-    // when the elements are in the DOM starts IntersectionObserver on whole grid
-    // when grid intersects starts Lazyfier
-    // this is because Lazyfier is fucking stupid
-    (0, $46MJV$depictaiutilishared.observer).wait_for_element(cards).then((0, $46MJV$depictaiutilishared.catchify)((element)=>{
-        let start_lazy_loading;
-        const lazy_loading_promise = new Promise((r)=>start_lazy_loading = r);
-        const lf = new (0, $46MJV$depictaiutilishared.Lazyfier)({
-            only_load_intersecting: true,
-            wait_for_dominsertion: lazy_loading_promise,
-            ignore_data_urls: true,
-            lazyfinder: {
-                unload () {}
-            }
-        });
-        lf.start_observing_for_new_children_(element);
-        const i_o = new IntersectionObserver((0, $46MJV$depictaiutilishared.catchify)((records)=>{
-            for (const record of records)if (record.intersectionRatio > 0) {
-                start_lazy_loading();
-                i_o.disconnect();
-                return;
-            }
-        }));
-        i_o.observe(cards);
-    }));
-    const deparallelized_recs_fetcher = (0, $46MJV$depictaiutilishared.deparallelize_no_drop)((0, $46MJV$depictaiutilishared.catchify)(async (base_query)=>{
-        const recs_promise = depict_api_.get_recommended(base_query).then((r)=>r.displays);
-        // create owner to run product cards with an Owner, so they know when they've gotten removed
-        const [owner_for_cards, dispose_our_cards] = (0, $46MJV$solidjs.createRoot)((dispose)=>[
-                (0, $46MJV$solidjs.getOwner)(),
-                dispose
-            ]);
-        const rendering_result = await (await (0, $46MJV$depictaiutilishared.make_placeholder_rr)({
-            // render the max amount of elements that there could be, to make sure scroll restoration works (placeholders can't be shorter than actual content)
-            num_items: (0, $39d15a684cb3e309$export$6c9030e511152266) + (0, $46MJV$solidjs.untrack)(get_showing_recommendation_rows) * Math.max(...layout_options_.cols_at_size.map(([per_column])=>per_column))
-        }))(tenant_object_, // @ts-ignore - make_placeholder_rr types is a touchy subject
-        {
-            type: "search_recs",
-            recs: recs_promise,
-            ...rr_options_,
-            ...typeof rr_options_.template === "function" ? {
-                template: (...args)=>(0, $46MJV$solidjs.runWithOwner)(owner_for_cards, ()=>// give template the possibility to know when it gets removed from the DOM by using solid-js onCleanup
-                        // @ts-ignore
-                        rr_options_.template(...args))
-            } : {}
-        });
-        const { elements: elements , should_stay_inserted: should_stay_inserted  } = rendering_result;
-        let dead = false;
-        while(on_next_render.length)on_next_render.pop()();
-        on_next_render.push(()=>dead = true);
-        if (!elements) {
-            set_is_showing_something(false);
-            return;
-        }
-        cards.replaceChildren(...elements);
-        // Dispose the old cards just after the cards have been removed from the DOM
-        cleanup_old_cards.forEach((cleanup_function)=>cleanup_function());
-        cleanup_old_cards.push(dispose_our_cards); // push after calling, so that we don't instantly demolish ourselves lol
-        set_is_showing_something(true);
-        should_stay_inserted?.then((should)=>{
-            if (!should && !dead /* just in case */ ) set_is_showing_something(false);
-        });
-    }));
-    (0, $46MJV$solidjs.createRenderEffect)(()=>deparallelized_recs_fetcher(search_query_base_()));
-    (0, $46MJV$solidjs.onCleanup)(()=>cleanup_old_cards.forEach((fn)=>fn())); // if everything gets cleaned up without new cards replacing the old ones, clean up the last cards
     return (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.Show), {
         get when () {
             return is_showing_something();
         },
-        children: main_element
+        children: search_recs_elements
     });
 }
 function $9f81b7ced87aabf2$var$make_state_saved_rows([get_showing_recommendation_rows, set_showing_recommendation_rows], i18n_) {
@@ -6065,7 +6223,7 @@ function $67b60b572b7b7059$export$b3ad617e9036868(modal_body_style, input_field,
 
 
 
-function $8b282f736ce4f3b8$export$e026af0c7b64ea5f({ selected_filters_: selected_filters_ , search_query_: [get_search_query] , current_sorting_: current_sorting_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , i18n_: i18n_ , local_filter_cache_: local_filter_cache_  }) {
+function $8b282f736ce4f3b8$export$e026af0c7b64ea5f({ selected_filters_: selected_filters_ , get_search_query_: get_search_query_ , current_sorting_: current_sorting_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , i18n_: i18n_ , local_filter_cache_: local_filter_cache_  }) {
     const [get_selected_filters] = selected_filters_;
     // Possible values:
     // 0 - we should not clear next submit
@@ -6080,7 +6238,7 @@ function $8b282f736ce4f3b8$export$e026af0c7b64ea5f({ selected_filters_: selected
     }, {
         defer: true
     }));
-    (0, $46MJV$solidjs.createComputed)((0, $46MJV$solidjs.on)(get_search_query, (0, $46MJV$depictaiutilishared.catchify)(()=>{
+    (0, $46MJV$solidjs.createComputed)((0, $46MJV$solidjs.on)(get_search_query_, (0, $46MJV$depictaiutilishared.catchify)(()=>{
         // when a query was submitted, clear filters if clear was pressed before
         const clear_value = (0, $46MJV$solidjs.untrack)(get_clear_filters_next_submit);
         if (clear_value) {
@@ -6105,12 +6263,11 @@ function $8b282f736ce4f3b8$export$e026af0c7b64ea5f({ selected_filters_: selected
 
 
 
-function $ad118c2ba257d9b7$export$84bba84a7b837187(search_query) {
+function $ad118c2ba257d9b7$export$84bba84a7b837187(read_search_query) {
     const ls = localStorage;
     const key = "depict_searches";
     const previous_searches = (0, $46MJV$solidjs.createSignal)(JSON.parse(ls[key] || "[]"));
     const [read_previous_searches, write_previous_searches] = previous_searches;
-    const [read_search_query] = search_query;
     (0, $46MJV$solidjs.createEffect)((0, $46MJV$depictaiutilishared.catchify)(()=>{
         const json_encoded = JSON.stringify(read_previous_searches());
         if (ls[key] !== json_encoded) ls[key] = json_encoded;
@@ -6131,9 +6288,9 @@ function $ad118c2ba257d9b7$export$84bba84a7b837187(search_query) {
 
 
 
-async function $1c323edfb89c9dca$export$e16630ecb9644a1c({ on_submit_with_unchanged_value_: on_submit_with_unchanged_value_ , search_param_name_: search_param_name_ , set_search_field_value_: set_search_field_value_ , search_query_: [read_search_query] , url_transformer_: url_transformer_ , router_: router_ , after_submit_: after_submit_ , get_new_query: get_new_query  }) {
+async function $1c323edfb89c9dca$export$e16630ecb9644a1c({ on_submit_with_unchanged_value_: on_submit_with_unchanged_value_ , search_param_name_: search_param_name_ , set_search_field_value_: set_search_field_value_ , get_search_query_: get_search_query_ , url_transformer_: url_transformer_ , router_: router_ , after_submit_: after_submit_ , get_new_query: get_new_query  }) {
     const new_search_query = get_new_query();
-    const previous_query = (0, $46MJV$solidjs.untrack)(read_search_query);
+    const previous_query = (0, $46MJV$solidjs.untrack)(get_search_query_);
     if (previous_query === new_search_query && new URLSearchParams(location.search).has(search_param_name_)) {
         // don't push a history entry / re-search if someone submits a search again
         // do close the modal though
@@ -6157,32 +6314,6 @@ async function $1c323edfb89c9dca$export$e16630ecb9644a1c({ on_submit_with_unchan
 
 
 
-function $690220645373c65e$export$2542ffb77b620b02(params_to_default_value) {
-    // TODO: remove this abstraction, put it in same place as filters
-    // TODO: make it only return an accessor
-    const signals = {};
-    const entries = Object.entries(params_to_default_value);
-    for (const [param, default_value] of entries)signals[param] = (0, $46MJV$solidjs.createSignal)(default_value ?? "");
-    const [exit_iterable, exitable_iterable] = (0, $46MJV$depictaiutilishared.make_asyncIterable_exiter)((0, $46MJV$depictaiutilishared.href_change_ipns));
-    (0, $46MJV$solidjs.onCleanup)((0, $46MJV$depictaiutilishared.catchify)(exit_iterable));
-    (0, $46MJV$depictaiutilishared.catchify)(async ()=>{
-        for await (const href of exitable_iterable){
-            const { searchParams: searchParams  } = new URL(href);
-            for (const [param, default_value] of entries){
-                const [_get, set] = signals[param];
-                if (searchParams.has(param)) {
-                    const new_val = searchParams.get(param) ?? default_value ?? "";
-                    set(new_val);
-                } else set(default_value ?? "");
-            }
-        }
-    })();
-    return signals;
-}
-
-
-
-
 
 
 
@@ -6222,7 +6353,8 @@ function $690220645373c65e$export$2542ffb77b620b02(params_to_default_value) {
 
 
 const $1bf0125991f2d39b$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<span class="orig price"></span>`, 2), $1bf0125991f2d39b$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<a class="instant-card"><div class="img-part"></div><div class="right-part"><div class="title-brand-tagline"><span class="brand"></span><span class="title"></span></div><div class="price-container"><span class="price"></span></div></div></a>`, 16), $1bf0125991f2d39b$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="tagline"></div>`, 2);
-const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container, { i18n: i18n , market: market  }, router_)=>{
+const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container, { i18n: i18n  }, router_)=>{
+    const search_result_id = (0, $46MJV$solidjs.createMemo)(()=>display_or_variant_container().search_result_id);
     const display = (0, $46MJV$solidjs.createMemo)(()=>{
         const display = display_or_variant_container();
         // Support for backend's new display format
@@ -6240,19 +6372,19 @@ const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container,
     });
     const image_url = (0, $46MJV$solidjs.createMemo)(()=>display().image_url);
     const contained_image = (0, $46MJV$solidjs.createMemo)(()=>(0, $46MJV$depictaiutilishared.ContainedImage)({
+            loading: "lazy",
             aspect_ratio: 1,
             alt: "",
             rendering_options: {},
-            // @ts-ignore
-            "data-src": image_url(),
+            "src": image_url(),
             srcset_opts: {
-                set_dataset: true
+                set_dataset: false
             },
-            init_with_placeholder: true
+            sizes: "0px"
         }));
     const is_sale = (0, $46MJV$solidjs.createMemo)(()=>display().sale_price !== display().original_price);
     const href = (0, $46MJV$solidjs.createMemo)(()=>display().page_url);
-    const returnVal = (()=>{
+    return (()=>{
         const _el$ = $1bf0125991f2d39b$var$_tmpl$2.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$4.nextSibling, _el$9 = _el$7.firstChild;
         (0, $46MJV$solidjsweb.addEventListener)(_el$, "click", (0, $46MJV$depictaiutilishared.catchify)((event_)=>router_.navigate_.go_to_({
                 new_url_: href(),
@@ -6280,33 +6412,41 @@ const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container,
             get children () {
                 const _el$8 = $1bf0125991f2d39b$var$_tmpl$.cloneNode(true);
                 (0, $46MJV$solidjsweb.insert)(_el$8, ()=>i18n.price_formatting_().pre_, null);
-                (0, $46MJV$solidjsweb.insert)(_el$8, ()=>(0, $5fc9fc23df1591db$export$469c7af753d08925)({
-                        price_: (0, $46MJV$solidjs.createMemo)(()=>display().original_price),
-                        price_formatting_: i18n.price_formatting_
-                    }), null);
+                (0, $46MJV$solidjsweb.insert)(_el$8, (0, $46MJV$solidjsweb.createComponent)((0, $5fc9fc23df1591db$export$a71e92cfbb498adc), {
+                    get price_ () {
+                        return display().original_price;
+                    },
+                    get price_formatting_ () {
+                        return i18n.price_formatting_();
+                    }
+                }), null);
                 (0, $46MJV$solidjsweb.insert)(_el$8, ()=>i18n.price_formatting_().post_, null);
                 return _el$8;
             }
         }), _el$9);
         (0, $46MJV$solidjsweb.insert)(_el$9, ()=>i18n.price_formatting_().pre_, null);
-        (0, $46MJV$solidjsweb.insert)(_el$9, ()=>(0, $5fc9fc23df1591db$export$469c7af753d08925)({
-                price_: (0, $46MJV$solidjs.createMemo)(()=>display().sale_price),
-                price_formatting_: i18n.price_formatting_
-            }), null);
+        (0, $46MJV$solidjsweb.insert)(_el$9, (0, $46MJV$solidjsweb.createComponent)((0, $5fc9fc23df1591db$export$a71e92cfbb498adc), {
+            get price_ () {
+                return display().sale_price;
+            },
+            get price_formatting_ () {
+                return i18n.price_formatting_();
+            }
+        }), null);
         (0, $46MJV$solidjsweb.insert)(_el$9, ()=>i18n.price_formatting_().post_, null);
         (0, $46MJV$solidjsweb.effect)((_p$)=>{
-            const _v$ = href(), _v$2 = !!is_sale();
+            const _v$ = href(), _v$2 = search_result_id(), _v$3 = !!is_sale();
             _v$ !== _p$._v$ && (0, $46MJV$solidjsweb.setAttribute)(_el$, "href", _p$._v$ = _v$);
-            _v$2 !== _p$._v$2 && _el$9.classList.toggle("sales-price", _p$._v$2 = _v$2);
+            _v$2 !== _p$._v$2 && (0, $46MJV$solidjsweb.setAttribute)(_el$, "data-search-result-id", _p$._v$2 = _v$2);
+            _v$3 !== _p$._v$3 && _el$9.classList.toggle("sales-price", _p$._v$3 = _v$3);
             return _p$;
         }, {
             _v$: undefined,
-            _v$2: undefined
+            _v$2: undefined,
+            _v$3: undefined
         });
         return _el$;
     })();
-    // This solves a JSX type issue where the return value does not match with the explicit JSX.Element type for some reason
-    return returnVal;
 };
 (0, $46MJV$solidjsweb.delegateEvents)([
     "click"
@@ -6343,7 +6483,7 @@ function $4cadf33fd6aaf4b6$export$62f101a8aa597bf8({ depict_api_: depict_api_ ,
         }));
     const sliced_displays = (0, $46MJV$solidjs.createMemo)(()=>search_results()?.displays?.slice(0, max_cards));
     let placeholder;
-    const container = (()=>{
+    return (()=>{
         const _el$ = $4cadf33fd6aaf4b6$var$_tmpl$.cloneNode(true);
         (0, $46MJV$solidjsweb.insert)(_el$, (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.Show), {
             get when () {
@@ -6361,8 +6501,8 @@ function $4cadf33fd6aaf4b6$export$62f101a8aa597bf8({ depict_api_: depict_api_ ,
                     get each () {
                         return sliced_displays();
                     },
-                    children: (d, i)=>$4cadf33fd6aaf4b6$var$track_elements(d, i, // Custom instant card requires a re-render on every display or i18n update
-                        render_instant_card_ ? (0, $46MJV$solidjs.createMemo)(()=>render_instant_card_(d(), {
+                    children: (d, i)=>{
+                        const card = render_instant_card_ ? (0, $46MJV$solidjs.createMemo)(()=>render_instant_card_(d(), {
                                 index: i,
                                 i18n: (0, $850f0c7c629012e3$export$27b710c08412a7ad)(i18n_),
                                 merchant: tenant_(),
@@ -6372,79 +6512,14 @@ function $4cadf33fd6aaf4b6$export$62f101a8aa597bf8({ depict_api_: depict_api_ ,
                             i18n: i18n_,
                             merchant: tenant_(),
                             market: market_()
-                        }, router_), tenant_, market_)
+                        }, router_);
+                        return card;
+                    }
                 });
             }
         }));
         return _el$;
     })();
-    new (0, $46MJV$depictaiutilishared.Lazyfier)({
-        container: container,
-        lazyfinder: {
-            unload () {}
-        },
-        ignore_data_urls: true
-    });
-    return container;
-}
-function $4cadf33fd6aaf4b6$var$track_elements(display, index, elements, tenant, market) {
-    const type = "instant_result";
-    const unwrapped_elements = $4cadf33fd6aaf4b6$var$unwrap_solid_jsx_element(elements);
-    const disconnectors = [];
-    (0, $46MJV$solidjs.createComputed)(()=>{
-        let stop = false;
-        const modern_or_legacy_d = display(); // For every display
-        const d = "variant_index" in modern_or_legacy_d ? modern_or_legacy_d.variant_displays[modern_or_legacy_d.variant_index] : modern_or_legacy_d;
-        const t = tenant(); // and tenant
-        const m = market(); // / market combination
-        const click_handler = ()=>{
-            (0, $46MJV$depictaiutilishared.depict_click)({
-                tenant: (0, $46MJV$solidjs.untrack)(tenant),
-                market: (0, $46MJV$solidjs.untrack)(market),
-                ...d,
-                click_location: type + "_" + (index + 1),
-                recommendation_type: type
-            });
-            localStorage.setItem(`depict_attribution_${d.product_id}`, d.search_result_id);
-        };
-        while(disconnectors.length)// disconnect stuff from old display
-        disconnectors.pop()();
-        disconnectors.push(()=>stop = true);
-        (0, $46MJV$solidjs.createComputed)(()=>{
-            if (stop) return;
-            const filtered_els = unwrapped_elements().filter((el)=>el instanceof Element);
-            for (const element of filtered_els){
-                element.addEventListener("click", click_handler);
-                disconnectors.push((0, $46MJV$depictaiutilishared.impression_track_element)({
-                    element: element,
-                    data: {
-                        tenant: t,
-                        market: m,
-                        recommendation_type: type,
-                        recommendation_id: d.recommendation_id,
-                        product_id: d.product_id,
-                        entity_price: d.entity_price
-                    }
-                }), ()=>element.removeEventListener("click", click_handler));
-            }
-            (0, $46MJV$depictaiutilishared.add_new_tab_listener)(filtered_els, d, 1, (disconnector)=>disconnectors.push(disconnector));
-        });
-    });
-    return elements;
-}
-function $4cadf33fd6aaf4b6$var$unwrap_solid_jsx_element(elements) {
-    // FYI this probably doesn't work on hugely deep nestings or large amount of elements
-    return (0, $46MJV$solidjs.createMemo)(()=>$4cadf33fd6aaf4b6$var$unwrapping_helper(elements));
-}
-function $4cadf33fd6aaf4b6$var$unwrapping_helper(elements) {
-    const result = [];
-    if (Array.isArray(elements)) for(let i = 0; i < elements.length; i++){
-        const element = elements[i];
-        result.push(...$4cadf33fd6aaf4b6$var$unwrapping_helper(element));
-    }
-    else if (typeof elements == "function") result.push(...$4cadf33fd6aaf4b6$var$unwrapping_helper(elements()));
-    else if (elements != undefined && typeof elements != "boolean") result.push(elements);
-    return result;
 }
 
 
@@ -6678,14 +6753,14 @@ function $5a0afe153acd45d7$export$ba17c5b7e6dda39f({ whole_text_to_display_: who
 
 
 const $aabe56c678fa29ec$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<a class="suggestion"></a>`, 2), $aabe56c678fa29ec$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="search-icon"></div>`, 2), $aabe56c678fa29ec$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<span class="type"></span>`, 2), $aabe56c678fa29ec$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div><span class="value"></span></div>`, 4), $aabe56c678fa29ec$var$_tmpl$5 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<h2 class="text"></h2>`, 2), $aabe56c678fa29ec$var$_tmpl$6 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="suggestion-container query"></div>`, 2), $aabe56c678fa29ec$var$_tmpl$7 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="suggestion-container page"></div>`, 2), $aabe56c678fa29ec$var$_tmpl$8 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="suggestions"></div>`, 2);
-function $aabe56c678fa29ec$export$e872e2339fb04a7f({ suggestion_memo_: suggestion_memo_ , search_page_url_param_name_: search_page_url_param_name_ , selected_index_: [read_selected_index_, write_selected_index_] , url_transformer_: url_transformer_ , filtered_previous_searches_: filtered_previous_searches_ , currently_showing_suggestions_: currently_showing_suggestions_ , on_previous_searches_page_: on_previous_searches_page_ , i18n_: i18n_ , include_category_suggestions_: include_category_suggestions_ , searching_for_value_: searching_for_value_ , router_: router_ , submit_query_: submit_query_  }) {
+function $aabe56c678fa29ec$export$e872e2339fb04a7f({ suggestion_memo_: suggestion_memo_ , search_query_url_param_name_: search_query_url_param_name_ , selected_index_: [read_selected_index_, write_selected_index_] , url_transformer_: url_transformer_ , filtered_previous_searches_: filtered_previous_searches_ , currently_showing_suggestions_: currently_showing_suggestions_ , on_previous_searches_page_: on_previous_searches_page_ , i18n_: i18n_ , include_category_suggestions_: include_category_suggestions_ , searching_for_value_: searching_for_value_ , router_: router_ , submit_query_: submit_query_  }) {
     const queries_memo = (0, $46MJV$solidjs.createMemo)(()=>suggestion_memo_().filter(({ type: type , title: title  })=>type === (0, $81eea900c72d569b$export$3cf9497e790da491) && !filtered_previous_searches_().includes(title) // don't show the ones we already show from the history
         ));
     const not_queries_memo = (0, $46MJV$solidjs.createMemo)(()=>suggestion_memo_().filter(({ type: type  })=>type !== (0, $81eea900c72d569b$export$3cf9497e790da491)));
     const render_entry = (input_obj, autocomplete_data_index, index, is_history = false)=>{
         const is_query = (0, $46MJV$solidjs.createMemo)(()=>input_obj().type === (0, $81eea900c72d569b$export$3cf9497e790da491));
         const href_with_changed_params_accessor = (0, $46MJV$solidjs.createMemo)(()=>is_query() ? (0, $41151dd3f5de2c98$export$91c3b6774e8be0f5)({
-                param_: search_page_url_param_name_,
+                param_: search_query_url_param_name_,
                 value_: (0, $46MJV$solidjs.createMemo)(()=>input_obj().title),
                 url_transformer_: url_transformer_
             }) : undefined);
@@ -7021,7 +7096,7 @@ function $bc74fbd61efdd8a5$var$open_link_on_cmd_pressed(e, href) {
 
 
 const $81eea900c72d569b$export$3cf9497e790da491 = "query";
-function $81eea900c72d569b$export$2f2b9559550c7bbc({ search_field_value_: search_field_value_ , search_query_: [get_search_query_] , search_page_url_param_name_: search_page_url_param_name_ , previous_searches_: unfiltered_previous_searches , previous_searches_text_: previous_searches_text_ , depict_api_: depict_api_ , tenant_: tenant_ , market_: market_ , input_field_: input_field_ , url_transformer_: url_transformer_ , currently_showing_suggestions_: currently_showing_suggestions_ , set_override_on_enter_fn_: set_override_on_enter_fn_ , selected_index_: selected_index_ , i18n_: i18n_ , include_category_suggestions_: include_category_suggestions_ , submit_query_: submit_query_ , router_: router_  }) {
+function $81eea900c72d569b$export$2f2b9559550c7bbc({ search_field_value_: search_field_value_ , get_search_query_: get_search_query_ , search_query_url_param_name_: search_query_url_param_name_ , previous_searches_: unfiltered_previous_searches , previous_searches_text_: previous_searches_text_ , depict_api_: depict_api_ , tenant_: tenant_ , market_: market_ , input_field_: input_field_ , url_transformer_: url_transformer_ , currently_showing_suggestions_: currently_showing_suggestions_ , set_override_on_enter_fn_: set_override_on_enter_fn_ , selected_index_: selected_index_ , i18n_: i18n_ , include_category_suggestions_: include_category_suggestions_ , submit_query_: submit_query_ , router_: router_  }) {
     const [searching_for_value, set_searching_for_value] = (0, $46MJV$solidjs.createSignal)();
     const [read_search_field_value] = search_field_value_;
     const updating_blocked = (0, $46MJV$solidjs.createSignal)(false);
@@ -7062,7 +7137,7 @@ function $81eea900c72d569b$export$2f2b9559550c7bbc({ search_field_value_: search
         updating_blocked_: updating_blocked,
         currently_showing_suggestions_: currently_showing_suggestions_,
         set_override_on_enter_fn_: set_override_on_enter_fn_,
-        search_query_param_name_: search_page_url_param_name_,
+        search_query_param_name_: search_query_url_param_name_,
         url_transformer_: url_transformer_,
         router_: router_
     });
@@ -7077,7 +7152,7 @@ function $81eea900c72d569b$export$2f2b9559550c7bbc({ search_field_value_: search
                     get set_unfiltered_previous_searches_ () {
                         return unfiltered_previous_searches[1];
                     },
-                    search_query_param_name_: search_page_url_param_name_,
+                    search_query_param_name_: search_query_url_param_name_,
                     text_: previous_searches_text_,
                     get previous_searches_ () {
                         return (0, $46MJV$solidjs.createMemo)(()=>filtered_previous_searches().slice(0, 5));
@@ -7104,7 +7179,7 @@ function $81eea900c72d569b$export$2f2b9559550c7bbc({ search_field_value_: search
             i18n_: i18n_,
             url_transformer_: url_transformer_,
             searching_for_value_: searching_for_value,
-            search_page_url_param_name_: search_page_url_param_name_,
+            search_query_url_param_name_: search_query_url_param_name_,
             selected_index_: selected_index_,
             suggestion_memo_: read_suggestion_signal,
             currently_showing_suggestions_: currently_showing_suggestions_,
@@ -7139,13 +7214,13 @@ function $fe1bd893954cc9ca$export$c7e181728ad525f(url) {
 }
 
 
-function $4ee1f6be4255fde6$export$3340fdd8259bd4fd({ get_search_field_value_: get_search_field_value_ , search_page_url_param_name_: search_page_url_param_name_ , url_transformer_: url_transformer_ , get_search_query_: get_search_query_  }) {
+function $4ee1f6be4255fde6$export$3340fdd8259bd4fd({ get_search_field_value_: get_search_field_value_ , search_query_url_param_name_: search_query_url_param_name_ , url_transformer_: url_transformer_ , get_search_query_: get_search_query_  }) {
     let debounce_timeout;
     const stop_timeout = ()=>clearTimeout(debounce_timeout);
     const send_to_ga = (0, $46MJV$depictaiutilishared.catchify)(()=>{
         const fake_url = new URL(location.href);
         const { searchParams: searchParams  } = fake_url;
-        searchParams.set(search_page_url_param_name_, (0, $46MJV$solidjs.untrack)(get_search_field_value_));
+        searchParams.set(search_query_url_param_name_, (0, $46MJV$solidjs.untrack)(get_search_field_value_));
         searchParams.set("instant_result", "true");
         url_transformer_?.(fake_url);
         (0, $fe1bd893954cc9ca$export$c7e181728ad525f)(fake_url);
@@ -7196,7 +7271,7 @@ function $4a976b492943589f$export$f021bdedd3ec901a(props) {
 
 
 const $121d25ca6af2898f$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="discover-more"><button class="major" type="button"></button></div>`, 4), $121d25ca6af2898f$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<b></b>`, 2), $121d25ca6af2898f$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="depict-search-modal"><div class="body"><div class="padded"></div></div></div>`, 6), $121d25ca6af2898f$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="depict plp search"><div class="depict-search-modal-backdrop"></div></div>`, 4);
-function $121d25ca6af2898f$export$1c593cbd6f1e10bc({ search_field_value_: props_search_field_value , search_query_: search_query_ , search_page_url_param_name_: search_page_url_param_name_ , previous_searches_: previous_searches_ , close_modal_: close_modal_ , style_props_: style_props_ = (0, $46MJV$solidjs.createSignal)({}) , depict_api_: depict_api_ , tenant_: tenant_ , market_: market_ , submit_query_: props_submit_query , instant_results_options_: instant_results_options_ , register_closing_animation_: register_closing_animation_ , url_transformer_: url_transformer_ , closing_animation_: closing_animation_ , clear_filters_: clear_filters_ , i18n_: i18n_ , disable_scrolling_: disable_scrolling_ = true , enable_category_suggestions_: enable_category_suggestions_ , class_list_: class_list_ , bottom_distance_under_modal_: bottom_distance_under_modal_ , selected_text_range_: selected_text_range_ , dont_sync_search_field_value_except_on_submit_: dont_sync_search_field_value_except_on_submit_ = false , router_: router_  }) {
+function $121d25ca6af2898f$export$1c593cbd6f1e10bc({ search_field_value_: props_search_field_value , get_search_query_: get_search_query_ , search_query_url_param_name_: search_query_url_param_name_ , previous_searches_: previous_searches_ , close_modal_: close_modal_ , style_props_: style_props_ = (0, $46MJV$solidjs.createSignal)({}) , depict_api_: depict_api_ , tenant_: tenant_ , market_: market_ , submit_query_: props_submit_query , instant_results_options_: instant_results_options_ , register_closing_animation_: register_closing_animation_ , url_transformer_: url_transformer_ , closing_animation_: closing_animation_ , clear_filters_: clear_filters_ , i18n_: i18n_ , disable_scrolling_: disable_scrolling_ = true , enable_category_suggestions_: enable_category_suggestions_ , class_list_: class_list_ , bottom_distance_under_modal_: bottom_distance_under_modal_ , selected_text_range_: selected_text_range_ , dont_sync_search_field_value_except_on_submit_: dont_sync_search_field_value_except_on_submit_ = false , router_: router_  }) {
     let on_enter_in_search_field_function;
     // As per feedback from stronger we sometimes want a modal with the search field value disconnected from the one in the rest of the UI, see https://depictaiworkspace.slack.com/archives/C02J16R9XEH/p1679065878487709.
     // This is desired for when the modal is opened from a UI element that visually does not look connected with the search page or current query
@@ -7223,7 +7298,7 @@ function $121d25ca6af2898f$export$1c593cbd6f1e10bc({ search_field_value_: props_
         equals: false
     });
     if (disable_scrolling_) (0, $fa41c421eb980e23$export$fe334901e8bebd57)();
-    $121d25ca6af2898f$var$close_modal_when_navigating_away(close_modal_, search_page_url_param_name_);
+    $121d25ca6af2898f$var$close_modal_when_navigating_away(close_modal_, search_query_url_param_name_);
     window.addEventListener("keydown", close_on_escape_handler);
     (0, $46MJV$solidjs.onCleanup)((0, $46MJV$depictaiutilishared.catchify)(()=>window.removeEventListener("keydown", close_on_escape_handler)));
     const owner = (0, $46MJV$solidjs.getOwner)();
@@ -7248,8 +7323,8 @@ function $121d25ca6af2898f$export$1c593cbd6f1e10bc({ search_field_value_: props_
     (0, $4ee1f6be4255fde6$export$3340fdd8259bd4fd)({
         get_search_field_value_: get_search_field_value_,
         url_transformer_: url_transformer_,
-        search_page_url_param_name_: search_page_url_param_name_,
-        get_search_query_: search_query_[0]
+        search_query_url_param_name_: search_query_url_param_name_,
+        get_search_query_: get_search_query_
     });
     const random_classname = (0, $46MJV$depictaiutilishared.make_random_classname)();
     const body_style = (0, $46MJV$solidjs.createMemo)(()=>{
@@ -7266,7 +7341,6 @@ function $121d25ca6af2898f$export$1c593cbd6f1e10bc({ search_field_value_: props_
         input_field_ref_: (element)=>set_input_field(element),
         override_on_enter_: (e)=>on_enter_in_search_field_function?.(e),
         on_back_: close_modal_,
-        search_query_: search_query_,
         search_field_value_: search_field_value_,
         submit_query_: submit_query_,
         clear_filters_: clear_filters_,
@@ -7298,9 +7372,9 @@ function $121d25ca6af2898f$export$1c593cbd6f1e10bc({ search_field_value_: props_
                     get previous_searches_text_ () {
                         return i18n_.previous_searches_text_;
                     },
-                    search_query_: search_query_,
+                    get_search_query_: get_search_query_,
                     previous_searches_: previous_searches_,
-                    search_page_url_param_name_: search_page_url_param_name_,
+                    search_query_url_param_name_: search_query_url_param_name_,
                     market_: market_,
                     tenant_: tenant_,
                     selected_index_: selected_index,
@@ -7358,7 +7432,7 @@ function $121d25ca6af2898f$export$1c593cbd6f1e10bc({ search_field_value_: props_
         })()
     ];
 }
-function $121d25ca6af2898f$var$close_modal_when_navigating_away(close_modal, search_page_url_param_name_) {
+function $121d25ca6af2898f$var$close_modal_when_navigating_away(close_modal, search_query_url_param_name_) {
     const [exit_iterable, exitable_iterable] = (0, $46MJV$depictaiutilishared.make_asyncIterable_exiter)((0, $46MJV$depictaiutilishared.href_change_ipns));
     let set_initial_values = false;
     let old_pathname;
@@ -7368,7 +7442,7 @@ function $121d25ca6af2898f$var$close_modal_when_navigating_away(close_modal, sea
         for await (const href of exitable_iterable){
             const u_o = new URL(href);
             const new_pathname = u_o.pathname;
-            const new_param_value = u_o.searchParams.get(search_page_url_param_name_);
+            const new_param_value = u_o.searchParams.get(search_query_url_param_name_);
             if (set_initial_values) {
                 if (new_param_value !== old_param_value || new_pathname !== old_pathname) {
                     // close modal when pathname or query changes
@@ -7457,9 +7531,9 @@ function $ea038dec4ee16624$export$c05a196222ba1302({ suggestions_: suggestions_
 
 
 const $297ca03cb5dd5701$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<b></b>`, 2), $297ca03cb5dd5701$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="results-for"></div>`, 2);
-function $297ca03cb5dd5701$export$9dd50d35b9d94fdf({ search_query_: search_query_ , i18n_: i18n_ , formatted_number_of_results_: formatted_number_of_results_  }) {
+function $297ca03cb5dd5701$export$9dd50d35b9d94fdf({ get_search_query_: get_search_query_ , i18n_: i18n_ , formatted_number_of_results_: formatted_number_of_results_  }) {
     const contents = (0, $46MJV$solidjs.createMemo)((0, $46MJV$depictaiutilishared.catchify)(()=>{
-        const q = search_query_[0]();
+        const q = get_search_query_();
         return i18n_.get_showing_results_for_()((()=>{
             const _el$ = $297ca03cb5dd5701$var$_tmpl$.cloneNode(true);
             (0, $46MJV$solidjsweb.insert)(_el$, q);
@@ -7486,15 +7560,8 @@ function $297ca03cb5dd5701$export$9dd50d35b9d94fdf({ search_query_: search_query
 
 const $93779a41dce11249$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="filter-results-for-one-row"></div>`, 2), $93779a41dce11249$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="depict plp search"><div class="listing-page"></div></div>`, 4);
 function $93779a41dce11249$export$a54ec244c8863715(opts) {
-    const { depict_api_: depict_api_ , search_field_value_: search_field_value_ , search_query_: search_query_ , open_modal_: open_modal_ , submit_query_: submit_query_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , search_filters_open_: search_filters_open_ , search_sorting_open_: search_sorting_open_ , expanded_filters_: expanded_filters_ , input_modal_open_: input_modal_open_ , selected_filters_: selected_filters_ , i18n_: i18n_ , slider_arrow_button_: slider_arrow_button_ , make_category_suggestion_card_: make_category_suggestion_card_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , clear_filters_on_next_submit_: clear_filters_on_next_submit_ , local_filter_cache_: local_filter_cache_ , include_input_field_: include_input_field_ , tenant_: tenant_ , market_: market_ , showing_recommendation_rows_: showing_recommendation_rows_ , rr_options_: rr_options_ , recommendations_rr_options_: recommendations_rr_options_ = rr_options_ , search_recs_view_more_: search_recs_view_more_ , get_product_id_: get_product_id_ , disable_search_recommendations_: disable_search_recommendations_ , layout_options_: layout_options_ , recommendations_layout_options_: recommendations_layout_options_ = layout_options_ , scroll_restoration_data_: scroll_restoration_data_  } = opts;
-    const tenant_object_ = new (0, $46MJV$depictaiutilishared.Tenant)({
-        TENANT: (0, $46MJV$solidjs.untrack)(tenant_),
-        MARKET: (0, $46MJV$solidjs.untrack)(market_),
-        GA_ID: "",
-        get_product_id: get_product_id_
-    });
+    const { depict_api_: depict_api_ , search_field_value_: search_field_value_ , get_search_query_: get_search_query_ , open_modal_: open_modal_ , submit_query_: submit_query_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , search_filters_open_: search_filters_open_ , search_sorting_open_: search_sorting_open_ , expanded_filters_: expanded_filters_ , input_modal_open_: input_modal_open_ , selected_filters_: selected_filters_ , i18n_: i18n_ , slider_arrow_button_: slider_arrow_button_ , make_category_suggestion_card_: make_category_suggestion_card_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , clear_filters_on_next_submit_: clear_filters_on_next_submit_ , local_filter_cache_: local_filter_cache_ , include_input_field_: include_input_field_ , tenant_: tenant_ , market_: market_ , showing_recommendation_rows_: showing_recommendation_rows_ , search_recs_view_more_: search_recs_view_more_ , disable_search_recommendations_: disable_search_recommendations_ , layout_options_: layout_options_ , recommendations_layout_options_: recommendations_layout_options_ = layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_  } = opts;
     const [get_sorting] = current_sorting_;
-    const [get_search_query] = search_query_;
     const all_products_loaded_ = (0, $46MJV$solidjs.createSignal)(false);
     const [get_all_products_loaded, set_all_products_loaded] = all_products_loaded_;
     const number_of_rendered_selected_filters_items_ = (0, $46MJV$solidjs.createSignal)(0);
@@ -7510,7 +7577,7 @@ function $93779a41dce11249$export$a54ec244c8863715(opts) {
         return {
             tenant: tenant_(),
             market: market_(),
-            query: get_search_query(),
+            query: get_search_query_(),
             ...f.length ? {
                 filters: f
             } : {},
@@ -7523,7 +7590,7 @@ function $93779a41dce11249$export$a54ec244c8863715(opts) {
         set_all_products_loaded(false);
         // only first page of results
         return await (0, $151280ad98f4438b$export$cc42dd29bf655ab6)({
-            id_: (0, $46MJV$solidjs.untrack)(get_search_query),
+            id_: (0, $46MJV$solidjs.untrack)(get_search_query_),
             min_products_to_fetch_: min_products_to_fetch_,
             scroll_restoration_data_: scroll_restoration_data_,
             make_request_: (limit, cursor)=>depict_api_.query({
@@ -7536,7 +7603,7 @@ function $93779a41dce11249$export$a54ec244c8863715(opts) {
         });
     }));
     const [suggestions] = (0, $46MJV$solidjs.createResource)((0, $46MJV$solidjs.createMemo)(()=>({
-            query: search_query_[0](),
+            query: get_search_query_(),
             tenant: tenant_(),
             market: market_()
         })), (opts)=>depict_api_.suggest(opts));
@@ -7553,7 +7620,6 @@ function $93779a41dce11249$export$a54ec244c8863715(opts) {
         let div_with_field_class;
         search_field = SafeSearchField({
             i18n_: i18n_,
-            search_query_: search_query_,
             search_field_value_: search_field_value_,
             submit_query_: submit_query_,
             clear_filters_: clear_filters_on_next_submit_,
@@ -7591,7 +7657,7 @@ function $93779a41dce11249$export$a54ec244c8863715(opts) {
     });
     const [sort_and_filter_element_, set_sort_and_filter_element_] = (0, $46MJV$solidjs.createSignal)();
     const results_for = (0, $46MJV$solidjsweb.createComponent)((0, $297ca03cb5dd5701$export$9dd50d35b9d94fdf), {
-        search_query_: search_query_,
+        get_search_query_: get_search_query_,
         i18n_: i18n_,
         formatted_number_of_results_: formatted_number_of_results_
     });
@@ -7630,7 +7696,7 @@ function $93779a41dce11249$export$a54ec244c8863715(opts) {
     (0, $46MJV$depictaiutilishared.catchify)((0, $151280ad98f4438b$export$6e49da55e449af7c))({
         scroll_restoration_data_: scroll_restoration_data_,
         last_result_in_viewport_: last_result_in_viewport_,
-        id_: get_search_query,
+        id_: get_search_query_,
         can_write_scroll_restoration_: can_write_scroll_restoration_
     });
     (0, $46MJV$solidjs.createComputed)(()=>{
@@ -7642,13 +7708,9 @@ function $93779a41dce11249$export$a54ec244c8863715(opts) {
         available_filters_: available_filters_
     });
     (0, $46MJV$solidjs.createEffect)(()=>{
-        get_search_query();
+        get_search_query_();
         (0, $fe1bd893954cc9ca$export$c7e181728ad525f)(location);
     });
-    (0, $46MJV$solidjs.createComputed)(()=>{
-        tenant_object_.tenant = tenant_object_.TENANT = tenant_();
-        tenant_object_.market = tenant_object_.MARKET = market_();
-    });
     return [
         document.createComment("Search page based on Depict SDK"),
         (()=>{
@@ -7704,12 +7766,10 @@ function $93779a41dce11249$export$a54ec244c8863715(opts) {
                         last_result_in_viewport_: last_result_in_viewport_,
                         scroll_restoration_data_: scroll_restoration_data_,
                         desktop_filter_elements_: desktop_filter_elements_,
-                        rr_options_: rr_options_,
+                        product_card_template_: product_card_template_,
                         layout_options_: layout_options_,
                         sort_or_filter_open_: sort_or_filter_open_,
-                        tenant_object_: tenant_object_,
-                        type_for_tracking_: "search",
-                        id_currently_querying_for_: get_search_query,
+                        id_currently_querying_for_: get_search_query_,
                         no_results_options_: {
                             selected_filters_: selected_filters_,
                             expanded_hierarchical_filters_: expanded_hierarchical_filters_,
@@ -7735,9 +7795,8 @@ function $93779a41dce11249$export$a54ec244c8863715(opts) {
                                 search_query_base_: search_query_base_,
                                 layout_options_: recommendations_layout_options_,
                                 showing_recommendation_rows_: showing_recommendation_rows_,
-                                rr_options_: recommendations_rr_options_,
                                 view_more_button_: search_recs_view_more_,
-                                tenant_object_: tenant_object_
+                                product_card_template_: product_card_template_
                             });
                         }
                     });
@@ -7822,13 +7881,17 @@ class $79fbf145b15af988$export$ac6237957a15b3f0 {
     #modal_open_signal = (0, $46MJV$solidjs.createSignal)(false);
     static #has_been_constructed = false;
     #router = new (0, $43940d5ca403c293$export$7e1297a3a19f10d8)("hard_navigation");
-    constructor({ search_query_url_param_name: search_query_url_param_name = "query" , url_transformer: url_transformer , on_navigation: on_navigation , enable_category_suggestions: enable_category_suggestions = true , disable_scrolling_during_modal: // Stuff needed for non-standard customer deployments that we shouldn't actually expose
-    disable_scrolling_during_modal = true , api: api , bottom_distance_under_modal_: bottom_distance_under_modal_ , render_instant_card: render_instant_card , ...props_on_class }){
+    constructor({ search_query_url_param_name: search_query_url_param_name_ = "query" , url_transformer: url_transformer , on_navigation: on_navigation , enable_category_suggestions: enable_category_suggestions = true , disable_scrolling_during_modal: // Stuff needed for non-standard customer deployments that we shouldn't actually expose
+    disable_scrolling_during_modal = true , api: api , bottom_distance_under_modal: bottom_distance_under_modal , render_instant_card: render_instant_card , ...props_on_class }){
         if ($79fbf145b15af988$export$ac6237957a15b3f0.#has_been_constructed) throw new Error("You can only have one instance of DepictSearch");
         Object.assign(this, props_on_class);
-        const { current_sorting_: current_sorting_ , selected_filters_: selected_filters_  } = (0, $004640621ca953d0$export$7bcff1eb3eca57d7)(this.#router);
+        if (on_navigation) this.#router.on_navigation_ = on_navigation;
+        const { current_sorting_: current_sorting_ , selected_filters_: selected_filters_ , search_query_accessor_: raw_search_query_accessor  } = (0, $cb699e435fadd254$export$477caf01aecaeb2a)({
+            search_query_url_param_name_: search_query_url_param_name_,
+            router_: this.#router
+        });
         const [reset_history_state_, state_] = (0, $0de081f67b6d15b5$export$9862539c89138352)(()=>({
-                search_field_value: new URLSearchParams(location.search).get(search_query_url_param_name) ?? "",
+                search_field_value: new URLSearchParams(location.search).get(search_query_url_param_name_) ?? "",
                 search_filters_open: false,
                 search_sorting_open: false,
                 search_expanded_filters: [],
@@ -7837,14 +7900,15 @@ class $79fbf145b15af988$export$ac6237957a15b3f0 {
                 search_expanded_hierarchical_filters: [],
                 search_showing_recommendation_rows: (0, $9f81b7ced87aabf2$export$1c8c715550dc689d),
                 search_scroll_restoration_data: []
-            }));
+            }), this.#router);
         const search_query_updating_blocked_ = (0, $46MJV$solidjs.createSignal)(false);
-        const { [search_query_url_param_name]: raw_search_query_signal  } = (0, $690220645373c65e$export$2542ffb77b620b02)({
-            [search_query_url_param_name]: ""
+        const [get_search_query_updating_blocked] = search_query_updating_blocked_;
+        const get_search_query_ = (0, $46MJV$solidjs.createMemo)((previous_value)=>{
+            if (get_search_query_updating_blocked()) return previous_value;
+            else return raw_search_query_accessor();
         });
-        const search_query_signal_ = (0, $46MJV$solidjs.createSignal)((0, $46MJV$solidjs.untrack)(raw_search_query_signal[0]));
         const depict_api_ = api ?? new (0, $9ce64f69303c371e$export$e015ed2f2950f2e3)();
-        const previous_searches = (0, $ad118c2ba257d9b7$export$84bba84a7b837187)(search_query_signal_);
+        const previous_searches = (0, $ad118c2ba257d9b7$export$84bba84a7b837187)(get_search_query_);
         const [, set_search_showing_recommendation_rows] = state_.search_showing_recommendation_rows;
         const after_submit_ = ()=>set_search_showing_recommendation_rows((0, $9f81b7ced87aabf2$export$1c8c715550dc689d)); // do this every time after we have submitted a new query - otherwise there might already be a saved number of rows in the state
         const on_submit_with_unchanged_value_ = ()=>this.modal_open = false;
@@ -7852,31 +7916,24 @@ class $79fbf145b15af988$export$ac6237957a15b3f0 {
         const configured_submit_query_ = (new_query)=>(0, $1c323edfb89c9dca$export$e16630ecb9644a1c)({
                 on_submit_with_unchanged_value_: on_submit_with_unchanged_value_,
                 set_search_field_value_: set_search_field_value_,
-                search_query_: search_query_signal_,
-                search_param_name_: search_query_url_param_name,
-                url_transformer_: url_transformer,
+                get_search_query_: get_search_query_,
+                search_param_name_: search_query_url_param_name_,
                 after_submit_: after_submit_,
                 get_new_query: ()=>new_query || (0, $46MJV$solidjs.untrack)(get_search_field_value_),
+                url_transformer_: url_transformer,
                 router_: this.#router
             });
         const i18n_ = (0, $623202ae203e9e59$export$f091cbac892643a4)(this.#locale_signal[0]);
         const clear_filters_on_next_submit_ = (0, $8b282f736ce4f3b8$export$e026af0c7b64ea5f)({
             selected_filters_: selected_filters_,
-            search_query_: search_query_signal_,
+            get_search_query_: get_search_query_,
             current_sorting_: current_sorting_,
             expanded_hierarchical_filters_: state_.search_expanded_hierarchical_filters,
             i18n_: i18n_,
             local_filter_cache_: state_.search_local_filter_cache
         });
-        if (on_navigation) this.#router.on_navigation_ = on_navigation;
-        (0, $46MJV$solidjs.createComputed)(()=>{
-            const [get_search_query_updating_blocked] = search_query_updating_blocked_;
-            const [get_raw_search_query_signal] = raw_search_query_signal;
-            const [, set_search_query_signal] = search_query_signal_; // this signal won't get written from anywhere, see url_params_to_signals JSDoc
-            if (!get_search_query_updating_blocked()) set_search_query_signal(get_raw_search_query_signal());
-        });
         $79fbf145b15af988$var$privately_shared_properties.set(this, {
-            search_query_url_param_name_: search_query_url_param_name,
+            search_query_url_param_name_: search_query_url_param_name_,
             reset_history_state_: reset_history_state_,
             state_: state_,
             router_: this.#router,
@@ -7885,7 +7942,7 @@ class $79fbf145b15af988$export$ac6237957a15b3f0 {
             enable_category_suggestions_: enable_category_suggestions,
             clear_filters_on_next_submit_: clear_filters_on_next_submit_,
             configured_submit_query_: configured_submit_query_,
-            search_query_signal_: search_query_signal_,
+            get_search_query_: get_search_query_,
             i18n_: i18n_,
             search_query_updating_blocked_: search_query_updating_blocked_,
             current_sorting_: current_sorting_,
@@ -7899,8 +7956,8 @@ class $79fbf145b15af988$export$ac6237957a15b3f0 {
                 return (0, $121d25ca6af2898f$export$1c593cbd6f1e10bc)(...args);
             }, {
                 search_field_value_: state_.search_field_value,
-                search_query_: search_query_signal_,
-                search_page_url_param_name_: search_query_url_param_name,
+                get_search_query_: get_search_query_,
+                search_query_url_param_name_: search_query_url_param_name_,
                 previous_searches_: previous_searches,
                 depict_api_: depict_api_,
                 tenant_: this.#merchant_signal[0],
@@ -7918,7 +7975,7 @@ class $79fbf145b15af988$export$ac6237957a15b3f0 {
                 i18n_: i18n_,
                 enable_category_suggestions_: enable_category_suggestions,
                 disable_scrolling_: disable_scrolling_during_modal,
-                bottom_distance_under_modal_: bottom_distance_under_modal_
+                bottom_distance_under_modal_: bottom_distance_under_modal
             });
             // This will add some default behaviour to open_modal_ if no style_props_ are supplied
             // The default behaviour is to align the modal with the input field if possible
@@ -8029,7 +8086,7 @@ function $79fbf145b15af988$var$get_shared_properties(depict_search) {
     if (!shared_properties) throw new Error("Can't connect to provided DepictSearch instance");
     return shared_properties;
 }
-function $79fbf145b15af988$export$f2dc7e4e4aa11abb({ depict_search: depict_search , include_input_field: include_input_field , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , get_product_id: get_product_id = (0, $46MJV$depictaiutilishared.normal_get_product_id) , extra_depict_options: extra_depict_options  }) {
+function $79fbf145b15af988$export$f2dc7e4e4aa11abb({ depict_search: depict_search , include_input_field: include_input_field , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , extra_depict_options: extra_depict_options  }) {
     const shared_properties = $79fbf145b15af988$var$get_shared_properties(depict_search);
     const grid_spacing_override = typeof grid_spacing === "string" ? {
         grid_spacing: grid_spacing
@@ -8048,7 +8105,7 @@ function $79fbf145b15af988$export$f2dc7e4e4aa11abb({ depict_search: depict_searc
             min_products_to_fetch_: $79fbf145b15af988$var$min_products_to_fetch_,
             local_filter_cache_: state_.search_local_filter_cache,
             search_field_value_: state_.search_field_value,
-            search_query_: shared_properties.search_query_signal_,
+            get_search_query_: shared_properties.get_search_query_,
             clear_filters_on_next_submit_: shared_properties.clear_filters_on_next_submit_,
             open_modal_: (...args)=>depict_search.modal_open = args,
             submit_query_: shared_properties.configured_submit_query_,
@@ -8096,15 +8153,7 @@ function $79fbf145b15af988$export$f2dc7e4e4aa11abb({ depict_search: depict_searc
                 height_: 12,
                 width_: 6.46
             }),
-            rr_options_: {
-                template: (display, info)=>{
-                    const is_placeholder = info.rendering_options.type === "placeholder";
-                    return product_card_template(is_placeholder ? null : display, info);
-                },
-                pre_processors: extra_depict_options?.pre_processors,
-                post_processors: extra_depict_options?.post_processors
-            },
-            get_product_id_: get_product_id
+            product_card_template_: product_card_template
         });
     }, "Entire SearchPage failed");
 }
@@ -8113,9 +8162,6 @@ function $79fbf145b15af988$export$316f6f283ae64765({ depict_search: depict_searc
     return (0, $f27b0b326e0a87e2$export$23fca46f3143581f)(()=>{
         let input_element;
         const search_field = (0, $46MJV$solidjsweb.createComponent)((0, $2989e355f64e18e1$export$b94867ecbd698f21), {
-            get search_query_ () {
-                return shared_properties.search_query_signal_;
-            },
             get search_field_value_ () {
                 return shared_properties.state_.search_field_value;
             },