@depict-ai/ui 2.1.23 → 3.0.1

package/server/latest/index.cjs

@@ -1,6 +1,7 @@
 var $5vyXB$depictaiutilishared = require("@depict-ai/utilishared/latest");
 var $5vyXB$solidjsweb = require("solid-js/web");
 var $5vyXB$solidjs = require("solid-js");
+var $5vyXB$depictaiutilisharedlatest = require("@depict-ai/utilishared/latest");
 var $5vyXB$solidjsstore = require("solid-js/store");
 require("../../multi_import_deduplicator.cjs").register_es_version("ui", "latest");
 function $parcel$export(e, n, v, s) {
@@ -11,6 +12,10 @@ function $parcel$export(e, n, v, s) {
     configurable: true
   });
 }
+$parcel$export(module.exports, "Tab", () => $8c38828ae2321937$export$3e41faf802a29e71);
+$parcel$export(module.exports, "Tabs", () => $8c38828ae2321937$export$b2539bed5023c21c);
+$parcel$export(module.exports, "ShopTheLookButton", () => $a5f3eaa1a24bbc1e$export$d4973c31938cbfd1);
+$parcel$export(module.exports, "history_dot_state_to_state", () => $6e22b5314fb52f4c$export$e183a13865960371);
 $parcel$export(module.exports, "strip_encoded_filter_and_sort", () => $1ab22f2cd39b3061$export$916e6850778505f6);
 $parcel$export(module.exports, "encode_filters", () => $1ab22f2cd39b3061$export$58aa3f171519b6d7);
 $parcel$export(module.exports, "decode_filters", () => $1ab22f2cd39b3061$export$f934fa24c3a86811);
@@ -37,12 +42,12 @@ $parcel$export(module.exports, "SolidLayout", () => $f48d0fbb00835aaa$export$d21
 $parcel$export(module.exports, "general_modal_abstraction", () => $9abb0a35d4b60ed3$export$79b1565500412d9b);
 $parcel$export(module.exports, "CrossIcon", () => $c77c68e559a1506c$export$3b621d86b1566b2);
 $parcel$export(module.exports, "GenericSliderArrowButton", () => $0f313083912e447a$export$8be2714ec7f169ee);
-$parcel$export(module.exports, "fetchDepictRecommendations", () => $bc91d938b8c601b4$export$58e808b1db15d3bc);
+$parcel$export(module.exports, "fetchDepictRecommendations", () => $bd429c994399dd82$export$58e808b1db15d3bc);
 $parcel$export(module.exports, "QuickLinks", () => $48567ac5b39bac56$export$de035477d6fef996);
 $parcel$export(module.exports, "BreadCrumbs", () => $48567ac5b39bac56$export$5b7c3ce0ebe51f86);
 $parcel$export(module.exports, "CategoryTitle", () => $0b23bfd073d9a4e8$export$b91cec6bdc6b32a1);
 $parcel$export(module.exports, "embedded_num_products", () => $85b747260aa175c9$export$824dde41348efed1);
-$parcel$export(module.exports, "get_categories", () => $63b10c9f461e0ef6$export$643598a327b5833e);
+$parcel$export(module.exports, "get_listings", () => $6382a1b83da39674$export$c1a6b039e689a58e);
 $parcel$export(module.exports, "DepictCategory", () => $48567ac5b39bac56$export$f34314aa9505732e);
 $parcel$export(module.exports, "CategoryPage", () => $48567ac5b39bac56$export$e2bf8ce7779e827e);
 $parcel$export(module.exports, "DepictSearch", () => $2c61e4cd8229c49a$export$ac6237957a15b3f0);
@@ -72,452 +77,1010 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.23";
-const $1ab22f2cd39b3061$var$fallback_operator = "in";
-const $1ab22f2cd39b3061$var$fallback_token = "";
-const $1ab22f2cd39b3061$var$legacy_filter_prefix = "filter_";
-const $1ab22f2cd39b3061$var$operator_map = {
-  "eq": "≡",
-  "neq": "≠",
-  "in": "∈",
-  "nin": "∉",
-  "leq": "≤",
-  "geq": "≥",
-  "inrange": "\uD83D\uDD22"
-};
-const $1ab22f2cd39b3061$var$ascending_token = "\uD83D\uDCC8";
-const $1ab22f2cd39b3061$var$descending_token = "\uD83D\uDCC9";
-const $1ab22f2cd39b3061$var$range_delimiter = "-";
-const $1ab22f2cd39b3061$var$string_item_delimiter = "‚"; // This is not a comma but a comma-like character that browsers will render in the URL bar.
-const $1ab22f2cd39b3061$var$array_item_delimiter = "‣"; // FIXME: decide on a character. Could theoretically be a double string delimiter.
-const $1ab22f2cd39b3061$var$empty_item_replacement = "0️⃣";
-const $1ab22f2cd39b3061$var$op_to_token = op => {
-  if (op === $1ab22f2cd39b3061$var$fallback_operator) return $1ab22f2cd39b3061$var$fallback_token;
-  return $1ab22f2cd39b3061$var$operator_map[op];
-};
-/**
- * Checks if a given array of filter data can be neatly serialized into an URL query parameter, or if it should fall back to JSON+base64.
- * The requirements are either an array of strings, containing no reserved characters, or an array of arrays of strings, containing no reserved characters.
- * No deep or mixed nesting levels are supported.
- */
-function $1ab22f2cd39b3061$var$array_is_serializable(array, is_root = true) {
-  if (array.every(item => Array.isArray(item))) {
-    if (!is_root)
-      // Deeply nested arrays are not supported, but also don't exist as filters (yet)
-      return false;
-    return array.every(item => $1ab22f2cd39b3061$var$array_is_serializable(item, false));
-  }
-  if (array.some(item => typeof item !== "string"))
-    // Numbers are not supported, since 1 and "1" would encode to the same thing
-    return false;
-  // Encoding reserved characters is not supported
-  return !array.some(item => item.includes($1ab22f2cd39b3061$var$array_item_delimiter) || item.includes($1ab22f2cd39b3061$var$string_item_delimiter) || item === $1ab22f2cd39b3061$var$empty_item_replacement);
-}
-/**
- * Human readable string[] or string[][] serialization for URLs.
- * @param array
- * @returns
- */
-function $1ab22f2cd39b3061$var$encode_array(array) {
-  const is_nested = array.every(item => Array.isArray(item));
-  if (is_nested) return array.map($1ab22f2cd39b3061$var$encode_array).join($1ab22f2cd39b3061$var$array_item_delimiter) + $1ab22f2cd39b3061$var$array_item_delimiter; // Nested arrays require a suffix to close nesting levels
-  return array.map(item => item === "" ? $1ab22f2cd39b3061$var$empty_item_replacement : item).join($1ab22f2cd39b3061$var$string_item_delimiter);
+const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.1";
+const $0f313083912e447a$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
+function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
+  return $5vyXB$solidjsweb.ssr($0f313083912e447a$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("width", $5vyXB$solidjsweb.escape(props.width_, true) ?? 14, false) + $5vyXB$solidjsweb.ssrAttribute("height", $5vyXB$solidjsweb.escape(props.height_, true) ?? 26, false));
 }
-function $1ab22f2cd39b3061$var$decode_array(encoded_array) {
-  const is_nested = encoded_array.includes($1ab22f2cd39b3061$var$array_item_delimiter);
-  if (is_nested) return encoded_array.split($1ab22f2cd39b3061$var$array_item_delimiter).filter(s => s !== "") // Remove empty segments, caused by trailing delimiter
-  .map($1ab22f2cd39b3061$var$decode_array);
-  return encoded_array.split($1ab22f2cd39b3061$var$string_item_delimiter).filter(s => s !== "") // Remove empty segments, caused by trailing delimiter in the single item special case
-  .map(item => item === $1ab22f2cd39b3061$var$empty_item_replacement ? "" : item);
+const $a0e53f99354809d9$var$_tmpl$ = ["<div", ">", "</div>"];
+function $a0e53f99354809d9$export$6649caad96ef8870({
+  children: children,
+  slider_ref_: slider_ref_,
+  faded_opacity_ = 0.7,
+  mutation_plugins_ = [],
+  disable_fading_: disable_fading_,
+  arrow_width_: arrow_width_,
+  arrow_height_: arrow_height_
+}) {
+  const slider = new (0, $5vyXB$depictaiutilishared.Amazing_Slider)({
+    button_contents: {
+      left: [$5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
+        height_: arrow_height_,
+        width_: arrow_width_
+      })))],
+      right: [$5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
+        height_: arrow_height_,
+        width_: arrow_width_
+      })))]
+    },
+    constructor_plugins: [$5vyXB$depictaiutilishared.slider_snap_css().constructor_plugin],
+    mutation_plugins: [...(disable_fading_ ? [] : [$5vyXB$depictaiutilishared.slider_fading_factory({
+      threshold_: 0.96,
+      faded_opacity_: faded_opacity_
+    }).mutation_plugin_]), ...mutation_plugins_]
+  });
+  $5vyXB$solidjsweb.insert(slider.insert_here, children);
+  $5vyXB$solidjs.onCleanup(() => slider.observer.disconnect());
+  slider_ref_?.(slider);
+  return slider.container;
 }
-function $1ab22f2cd39b3061$var$encode_filter_data(op, data) {
-  if (data === "true")
-    // boolean encoding
-    return "1";
-  if (data === "false")
-    // boolean encoding
-    return "0";
-  const data_is_array = Array.isArray(data);
-  if (op === "inrange" && data_is_array && data.every(item => typeof item === "number"))
-    // numeric range filter encoding
-    return data.join($1ab22f2cd39b3061$var$range_delimiter);
-  if (data_is_array && $1ab22f2cd39b3061$var$array_is_serializable(data)) {
-    const encoded_data = $1ab22f2cd39b3061$var$encode_array(data);
-    if (!encoded_data.includes($1ab22f2cd39b3061$var$array_item_delimiter) && !encoded_data.includes($1ab22f2cd39b3061$var$string_item_delimiter))
-      // A string[] with only one item will encode without delimiters, which is indistinguishable from a plain string during decoding
-      // In that case we add a delimiter suffix at the end
-      return encoded_data + $1ab22f2cd39b3061$var$string_item_delimiter;
-    return encoded_data;
-  }
-  // Fallback encoding
-  return $5vyXB$depictaiutilishared.base64_encode_unicode(JSON.stringify(data));
+const $8c38828ae2321937$var$_tmpl$ = ["<section", ' aria-live="polite" role="region" class="tabs-body">', "</section>"],
+  $8c38828ae2321937$var$_tmpl$2 = ["<nav", ' role="tablist" class="tabs-bar">', "</nav>"],
+  $8c38828ae2321937$var$_tmpl$3 = ["<article", ' role="tabpanel" class="', '" style="', '">', "</article>"];
+const $8c38828ae2321937$var$TabsContext = /*@__PURE__*/$5vyXB$solidjs.createContext();
+const $8c38828ae2321937$var$useTabs = () => $5vyXB$solidjs.useContext($8c38828ae2321937$var$TabsContext);
+function $8c38828ae2321937$export$b2539bed5023c21c(props) {
+  return $5vyXB$solidjsweb.createComponent($8c38828ae2321937$var$TabsContext.Provider, {
+    value: new (0, $5vyXB$depictaiutilisharedlatest.ListenableSet)(),
+    get children() {
+      return $5vyXB$solidjsweb.createComponent($8c38828ae2321937$var$ActualTabs, $5vyXB$solidjsweb.mergeProps(props, {
+        get children() {
+          return props.children;
+        }
+      }));
+    }
+  });
 }
-function $1ab22f2cd39b3061$var$decode_filter_data(op, encoded_data) {
-  if (encoded_data === "1") return "true";
-  if (encoded_data === "0") return "false";
-  if (op === "inrange" && encoded_data.includes($1ab22f2cd39b3061$var$range_delimiter)) return encoded_data.split($1ab22f2cd39b3061$var$range_delimiter).map(x => parseFloat(x));
-  if (encoded_data.includes($1ab22f2cd39b3061$var$string_item_delimiter) || encoded_data.includes($1ab22f2cd39b3061$var$array_item_delimiter)) return $1ab22f2cd39b3061$var$decode_array(encoded_data);
-  try {
-    return JSON.parse($5vyXB$depictaiutilishared.base64_decode_unicode(encoded_data));
-  } catch (e) {
-    $5vyXB$depictaiutilishared.dlog("Failed to fallback parse filter data", op, encoded_data, e);
+function $8c38828ae2321937$var$ActualTabs(props) {
+  const [tabsReactive, setTabsReactive] = $5vyXB$solidjs.createSignal([]); // Can't have a store since reconciling with a store would call the children getters, and we could get x-tle rendered components
+  const [currentlySelected, setCurrentlySelected] = $5vyXB$solidjs.createSignal();
+  const [tabsVisitedOnce, setTabsVisitedOnce] = $5vyXB$solidjs.createSignal(new Set(), {
+    equals: false
+  });
+  const isSelected = $5vyXB$solidjs.createSelector(currentlySelected);
+  const owner = $5vyXB$solidjs.getOwner();
+  const updateTabsSignal = $5vyXB$depictaiutilisharedlatest.catchify(() => $5vyXB$solidjs.runWithOwner(owner, () => setTabsReactive([...ourTabsSet])));
+  const ourTabsSet = $8c38828ae2321937$var$useTabs();
+  const location = $5vyXB$depictaiutilisharedlatest.use_href_accessor();
+  const linkWithChangedHash = hash => {
+    const u_o = new URL(location());
+    u_o.hash = hash;
+    return u_o.href;
+  };
+  const headerItems = $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Index), {
+    get each() {
+      return tabsReactive();
+    },
+    children: item => {
+      const weSelected = $5vyXB$solidjs.createMemo(() => isSelected(item().id));
+      return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjsweb.Dynamic), $5vyXB$solidjsweb.mergeProps({
+        get component() {
+          return props.AnchorComponent;
+        },
+        get ["aria-controls"]() {
+          return item().id;
+        },
+        role: "tab",
+        get classList() {
+          return {
+            selected: weSelected()
+          };
+        }
+      }, () => weSelected() ? {} : {
+        href: linkWithChangedHash(item().id)
+      }, {
+        get children() {
+          return item().label;
+        }
+      }));
+    }
+  });
+  // Enable nice pattern of doing <Tabs><Tab>Content</Tab><Tab>More content</Tab></Tabs>
+  $5vyXB$solidjs.children(() => props.children); // "Render" children (.children is a getter), this means that we now can connect the children with the parent
+  for (const event of ["add", "delete"]) {
+    ourTabsSet.addEventListener(event, updateTabsSignal);
+    $5vyXB$solidjs.onCleanup(() => ourTabsSet.removeEventListener(event, updateTabsSignal));
   }
-  return null;
-}
-function $1ab22f2cd39b3061$export$58aa3f171519b6d7(filters, search_params, filter_query_param_prefix) {
-  for (const filter of filters) {
+  updateTabsSignal();
+  $5vyXB$solidjs.createEffect(() => {
     const {
-      field: field,
-      op: op,
-      data: data
-    } = filter;
-    const encoded_data = $1ab22f2cd39b3061$var$encode_filter_data(op, data);
-    search_params.set(filter_query_param_prefix + field + $1ab22f2cd39b3061$var$op_to_token(op), encoded_data);
-  }
-}
-function $1ab22f2cd39b3061$export$f934fa24c3a86811(search_params, filter_query_param_prefix) {
-  const found_filters = [];
-  for (const key of search_params.keys()) {
-    // Allow for backwards compatibility with the old filter query param prefix
-    let chosen_prefix = filter_query_param_prefix;
-    if (!key.startsWith(chosen_prefix)) {
-      chosen_prefix = $1ab22f2cd39b3061$var$legacy_filter_prefix;
-      if (!key.startsWith(chosen_prefix)) continue;
+      hash: hash
+    } = new URL(location());
+    const id = hash.slice(1);
+    if (tabsReactive().some(item => item.id === id)) {
+      setCurrentlySelected(id);
+      return;
     }
-    const encoded_data = search_params.get(key);
-    if (!encoded_data) continue;
-    const [op, token] = Object.entries($1ab22f2cd39b3061$var$operator_map).find(([, token]) => key.endsWith(token)) || [$1ab22f2cd39b3061$var$fallback_operator, $1ab22f2cd39b3061$var$fallback_token];
-    const data = $1ab22f2cd39b3061$var$decode_filter_data(op, encoded_data);
-    if (!data) continue;
-    const field = key.slice(chosen_prefix.length, token ? -token.length : undefined);
-    found_filters.push({
-      field: field,
-      op: op,
-      data: data
-    });
-  }
-  return found_filters;
-}
-function $1ab22f2cd39b3061$export$62acb285a7579555(sorting, search_params, sorting_query_param) {
-  if (!sorting) return;
-  const {
-    field: field,
-    order: order
-  } = sorting;
-  const ascending = order === "asc";
-  search_params.set(sorting_query_param, field + (ascending ? $1ab22f2cd39b3061$var$ascending_token : $1ab22f2cd39b3061$var$descending_token));
-}
-function $1ab22f2cd39b3061$export$766e9676e74997d3(search_params, sorting_query_param_) {
-  const encoded_sorting = search_params.get(sorting_query_param_);
-  if (!encoded_sorting) return;
-  if (encoded_sorting.endsWith($1ab22f2cd39b3061$var$ascending_token)) return {
-    field: encoded_sorting.slice(0, -$1ab22f2cd39b3061$var$ascending_token.length),
-    order: "asc"
-  };
-  if (encoded_sorting.endsWith($1ab22f2cd39b3061$var$descending_token)) return {
-    field: encoded_sorting.slice(0, -$1ab22f2cd39b3061$var$descending_token.length),
-    order: "desc"
-  };
-  $5vyXB$depictaiutilishared.dlog("Invalid sorting query param value", encoded_sorting);
-  return;
-}
-function $1ab22f2cd39b3061$export$916e6850778505f6(search_params, filter_query_param_prefix, sorting_query_param) {
-  // We'll be modifying the URLSearchParams object, so we need to make a copy of the keys first
-  const keys = [...search_params.keys()];
-  for (const key of keys) if (key.startsWith(filter_query_param_prefix) || key === sorting_query_param || key.startsWith($1ab22f2cd39b3061$var$legacy_filter_prefix)) search_params.delete(key);
-}
-const $1ab22f2cd39b3061$export$cf5feb2102aec7f2 = "went_sideways_clear_filters";
-function $1ab22f2cd39b3061$export$43cd1e747fecd42e({
-  to_url_: to_url_,
-  set_clearing_flag_: set_clearing_flag_,
-  from_search_params_ = new URLSearchParams(location.search),
-  sorting_query_param_: sorting_query_param_,
-  filter_query_param_prefix_: filter_query_param_prefix_
-}) {
-  if (!to_url_) return to_url_;
-  const was_url_object = to_url_ instanceof URL;
-  const url_object = was_url_object ? to_url_ : new URL(to_url_, location.origin);
-  const {
-    searchParams: searchParams
-  } = url_object;
-  if (set_clearing_flag_) searchParams.set($1ab22f2cd39b3061$export$cf5feb2102aec7f2, "true");
-  if (from_search_params_.has(sorting_query_param_)) searchParams.set(sorting_query_param_, from_search_params_.get(sorting_query_param_));
-  for (const key of from_search_params_.keys()) if (key.startsWith(filter_query_param_prefix_)) searchParams.set(key, from_search_params_.get(key));
-  if (was_url_object) return url_object;
-  return url_object.href;
-}
-const $84798aaa863a4909$var$ListingContext = /*@__PURE__*/$5vyXB$solidjs.createContext();
-function $84798aaa863a4909$export$e68cff63f76bd15b(props) {
-  const our_object = {};
-  return $5vyXB$solidjsweb.createComponent($84798aaa863a4909$var$ListingContext.Provider, {
-    value: our_object,
-    get children() {
-      return props.children;
+    if (!currentlySelected() || !tabsReactive().some(item => item.id === currentlySelected())) {
+      // Select first one by default if possible
+      const firstTab = tabsReactive()[0]?.id;
+      if (!firstTab) return;
+      setCurrentlySelected(firstTab);
     }
   });
+  return [(props.wrapTabBar || (v => v))($5vyXB$solidjsweb.ssr($8c38828ae2321937$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), props.slidable ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $a0e53f99354809d9$export$6649caad96ef8870), {
+    children: headerItems
+  })) : $5vyXB$solidjsweb.escape(headerItems))), $5vyXB$solidjsweb.ssr($8c38828ae2321937$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Index), {
+    get each() {
+      return tabsReactive();
+    },
+    children: item => {
+      const weSelected = $5vyXB$solidjs.createMemo(() => isSelected(item().id));
+      $5vyXB$solidjs.createEffect(() => {
+        if (weSelected()) {
+          setTabsVisitedOnce(prev => {
+            prev.add(item().id);
+            return prev;
+          });
+          $5vyXB$solidjs.untrack(() => item().onSelected?.());
+        }
+      });
+      $5vyXB$solidjs.onCleanup(() => setTabsVisitedOnce(prev => (prev.delete(item().id), prev)));
+      return $5vyXB$solidjsweb.ssr($8c38828ae2321937$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey() + $5vyXB$solidjsweb.ssrAttribute("id", $5vyXB$solidjsweb.escape(item().id, true), false), weSelected() ? "selected" : "", "display:" + (weSelected() ? "" : "none"), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+        get when() {
+          return tabsVisitedOnce().has(item().id);
+        },
+        get children() {
+          return item().children;
+        }
+      })));
+    }
+  })))];
 }
-function $84798aaa863a4909$export$8d0c4fdbb05a2f2e() {
-  return $5vyXB$solidjs.useContext($84798aaa863a4909$var$ListingContext);
-}
-const $93304d59a9747aa6$var$_tmpl$ = ["<div", ' style="', '"', "></div>"];
-function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
-  return $5vyXB$solidjsweb.ssr($93304d59a9747aa6$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrStyle(`position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`), $5vyXB$solidjsweb.ssrAttribute("class", $5vyXB$solidjsweb.escape(props.class, true), false));
+function $8c38828ae2321937$export$3e41faf802a29e71(props) {
+  const currentTabs = $8c38828ae2321937$var$useTabs();
+  if (!currentTabs) throw new Error("Tab must be a child of Tabs");
+  const id = $5vyXB$solidjs.createUniqueId();
+  const ourSet = currentTabs;
+  const extendedProps = $5vyXB$solidjs.mergeProps({
+    id: id
+  }, props);
+  ourSet.add(extendedProps);
+  $5vyXB$solidjs.onCleanup(() => ourSet.delete(extendedProps));
+  return undefined;
 }
-function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
-  const [size, setSize] = $5vyXB$solidjs.createSignal(0);
-  const resizeObserver = new ResizeObserver($5vyXB$depictaiutilishared.catchify(records => {
-    for (let j = 0; j < records.length; j++) {
-      const {
-        width: width
-      } = records[j].contentRect;
-      if (!width) continue;
-      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
-      const new_size = width * 1.05 * ((0, $5vyXB$depictaiutilishared.is_safari) ? 4 / 3 : 1);
-      setSize(Math.round(new_size));
-    }
-  }));
-  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
-  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
-  const disconnect = (0, $5vyXB$depictaiutilishared.observer).onexists(whatToWatch, ({
-    element: element
-  }) => requestAnimationFrame($5vyXB$depictaiutilishared.catchify(() => resizeObserver.observe(element))));
-  $5vyXB$solidjs.onCleanup(() => {
-    resizeObserver.disconnect();
-    disconnect();
+async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
+  const body = parent || (await (0, $5vyXB$depictaiutilishared.observer).wait_for_element("body"));
+  let dispose_and_remove;
+  const open_modal_ = $5vyXB$depictaiutilishared.catchify(async (extra_options_for_modal = {}, on_dispose) => {
+    // Below await is very intentional,
+    // The reason is that effects don't run in <Suspense> boundaries before they've resolved and this carries even through roots created, but if a modal is opened from a suspense boundary we still want the effects in it to run
+    // This is because the suspense is for the content in the page and not the modal (the modal goes above it)
+    // By having an await here, solid loses all its knowledge of the suspense boundary
+    // (there is also some bug where effects don't run when created inside a suspense boundary that is resolved)
+    if (await dispose_and_remove)
+      // modal is already open
+      return;
+    const modal_els = $5vyXB$solidjs.createRoot(dispose => {
+      let closing_animation;
+      let animation_started;
+      dispose_and_remove = () => {
+        const actually_close = () => {
+          dispose();
+          on_dispose?.();
+          modal_els.forEach(el => el.remove());
+        };
+        if (animation_started && +new Date() - animation_started > 1000)
+          // Animation broke, close it this time
+          actually_close();else if (!animation_started && closing_animation) {
+          animation_started = +new Date();
+          $5vyXB$depictaiutilishared.catchify(closing_animation)()?.then($5vyXB$depictaiutilishared.catchify(actually_close));
+        } else actually_close();
+      };
+      return search_modal({
+        ...modal_fn_opts,
+        ...extra_options_for_modal,
+        close_modal_: close_modal_,
+        open_modal_: open_modal_,
+        register_closing_animation_: animation => closing_animation = animation
+      });
+    });
+    body.append(...modal_els);
   });
-  return size;
+  const close_modal_ = $5vyXB$depictaiutilishared.catchify(() => {
+    if (dispose_and_remove) {
+      // modal is open
+      const dispose_fn = dispose_and_remove;
+      // set dispose function to undefined in case that it triggers this dispose function itself. Not doing it leads to a bug like https://github.com/solidjs/solid/discussions/1194
+      dispose_and_remove = undefined;
+      dispose_fn();
+    }
+  });
+  return {
+    open_modal_: open_modal_,
+    close_modal_: close_modal_
+  };
 }
-const $19950faaac026e09$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
-function $19950faaac026e09$export$6e5611bc7e57e477(props) {
-  // Enable reactive props
-  const otherOptions = $5vyXB$solidjs.createMemo(() => {
-    const cloned_props = {
-      ...props
-    };
-    delete cloned_props.resolutions;
-    // @ts-ignore
-    delete cloned_props.size;
-    // @ts-ignore
-    delete cloned_props.src;
-    return cloned_props;
+function $6e22b5314fb52f4c$export$e183a13865960371(params_to_default_value, router_) {
+  const signals = {};
+  const entries = Object.entries(params_to_default_value);
+  const event_handler = $5vyXB$depictaiutilishared.catchify((what_happened, args) => {
+    // Intentionally always update our signals to the history state to allow external control of SDK state for doing things like https://linear.app/depictai/issue/X-1432/is-this-possible-with-the-depict-sdk
+    if (what_happened !== "popstate") return;
+    // Had to undo the comment above,but leaving the history. Doing this because discovering why it doesn't work is a deja-vu and I don't want to have to discover it again.
+    // If we want others to interface with our state, it's better to expose it from DepictCategory/DepictSearch
+    // The reason for that is because writes to the state trigger writes to the state (something about local filter state, see the comment where `last_remote_state !== available_filters_()` happens in create_modified_filters.tsx)
+    // And can infinite loop, like in https://app.jiminny.com/playback/569c8f65-edea-4735-bd9e-4eb5a0b14cad
+    // It's the classical equilibrium problem when syncing state both down and up, and it's much easier to avoid than solve
+    $6e22b5314fb52f4c$var$history_state_change(signals, entries, args.state);
   });
-  const src_options = $5vyXB$solidjs.createMemo(() => {
-    const src = new URL(props.src, location.origin);
-    const fallback_src = $19950faaac026e09$var$generateImageUrl(src, 400);
-    const srcset = $19950faaac026e09$var$make_srcset(src, props.resolutions || [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096]);
-    return {
-      src: fallback_src,
-      srcset: srcset
-    };
+  // createRenderEffect because we need the instant execution so the signals always contain values, even before solid's render phase
+  $5vyXB$solidjs.createRenderEffect(() => {
+    let signal_changed = false;
+    let {
+      state: state
+    } = globalThis?.history || {
+      state: {}
+    }; // 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] ||= $5vyXB$solidjs.createSignal(state[param] ?? default_value);
+      const new_value = read_signal();
+      if (new_value !== state[param]) {
+        signal_changed = true;
+        state[param] = new_value;
+      }
+    }
+    if (signal_changed) router_.navigate_.replace_state_(state);
   });
-  // Work around https://github.com/solidjs/solid/issues/1828
-  const img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
-  const [hasSetSize, setHasSetSize] = $5vyXB$solidjs.createSignal(false);
-  const [hasDecoded, setHasDecoded] = $5vyXB$solidjs.createSignal(false);
-  const sizePX = $5vyXB$solidjs.createMemo(() => `${props.size()}px`); // props.size could be a getter that expects a cleanup so get it in this memo instead of where we set img.sizes
-  const listingContext = $84798aaa863a4909$export$8d0c4fdbb05a2f2e();
-  // Batch idle callbacks so that MutationObserver can batch the resulting mutations better, so we don't lose tons of CPU time to MutationObservers doing lots of things for each image
-  // Happened on singular, they have some weird observer (+we also have one but ours is at least 3x more efficient)
-  const executeWhenIdleBatched = fn => {
-    if (typeof requestIdleCallback !== "function") return setTimeout(fn); // Old browsers don't get optimisation
-    const existingStack = listingContext?.[$19950faaac026e09$var$onIdleFunctionsSymbol];
-    if (existingStack) return existingStack.add(fn);
-    const newStack = new Set([fn]);
-    if (listingContext) listingContext[$19950faaac026e09$var$onIdleFunctionsSymbol] = newStack;
-    const processStackWhenIdle = () => requestIdleCallback(deadline => {
-      const start = performance.now();
-      const thirdDeadlineTime = deadline.timeRemaining() / 3; // observers coming after this take up 2-3x the time so don't use all of it
-      for (const fn of newStack) {
-        newStack.delete(fn);
-        fn();
-        const timeTaken = performance.now() - start;
-        if ((!deadline.timeRemaining() || timeTaken > thirdDeadlineTime) && newStack.size) {
-          // There's still work to be done but no time, so schedule another idle callback
-          processStackWhenIdle();
-          return;
+  // history_dot_state_to_state needs to update after its signals after url_state does BUT in the same task (might even have to be in the same tick in the microtask queue). If we'd use window.addEventListener("popstate") it would be guaranteed to be too late since each event listener has its own task
+  (0, $5vyXB$depictaiutilishared.instant_exec_on_suspect_history_change).add(event_handler);
+  $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.catchify(() => (0, $5vyXB$depictaiutilishared.instant_exec_on_suspect_history_change).delete(event_handler)));
+  $5vyXB$solidjs.createEffect($5vyXB$depictaiutilishared.catchify(() => $5vyXB$solidjs.untrack($5vyXB$depictaiutilishared.catchify(() => $6e22b5314fb52f4c$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 $6e22b5314fb52f4c$var$history_state_change(signals, entries, state) {
+  $5vyXB$solidjs.batch(() => {
+    for (const [param, default_value] of entries) {
+      const [, write_signal] = signals[param];
+      const new_value = state?.[param];
+      write_signal(new_value ?? default_value);
+    }
+  });
+}
+const $d84fe647b84b5dc5$export$3064e1e8c6513da3 = new Set();
+let $d84fe647b84b5dc5$var$has_ran = false;
+function $d84fe647b84b5dc5$export$5162a71f252e6122() {
+  if ($d84fe647b84b5dc5$var$has_ran || typeof history !== "object") return;
+  $d84fe647b84b5dc5$var$has_ran = true;
+  for (const function_name of ["replaceState", "pushState"]) {
+    if (Object.getOwnPropertyNames(history).includes(function_name)) $d84fe647b84b5dc5$var$proxy_push_state(function_name, history);
+    $d84fe647b84b5dc5$var$proxy_push_state(function_name, History.prototype);
+  }
+}
+function $d84fe647b84b5dc5$var$proxy_push_state(function_name, thing) {
+  thing[function_name] = new Proxy(thing[function_name], {
+    apply(target, this_arg, arg_list) {
+      try {
+        const old_state = history.state;
+        if (typeof old_state == "object" && old_state !== null) {
+          // This effectively disallows the user from passing in a string, number, null or undefined
+          const intended_new_value_as_obj = typeof arg_list[0] === "object" ? arg_list[0] ?? {} : {};
+          const cloned_object = {
+            ...intended_new_value_as_obj
+          };
+          for (const key in old_state) {
+            if (!$d84fe647b84b5dc5$var$starts_with_any_prefix(key)) continue;
+            if (!(key in cloned_object)) cloned_object[key] = old_state[key];
+          }
+          arg_list[0] = cloned_object;
         }
+      } catch (e) {
+        $5vyXB$depictaiutilishared.report([e, "Failed to preserve items in history.state"], "error");
       }
-      // Stack is empty
-      if (listingContext) delete listingContext[$19950faaac026e09$var$onIdleFunctionsSymbol];
-    }, {
-      timeout: 15000
-    } // long timeout, better to not have images than to freeze the browser. But also we don't want to confuse user why no iamges are loading
-    );
-
-    processStackWhenIdle();
-  };
-  let sizeSetFastPath = false;
-  let hasDecodedFastPath = false;
-  let timeoutSet = false;
-  let gotCleanedUp = false;
-  $5vyXB$solidjs.onCleanup(() => gotCleanedUp = true);
-  $5vyXB$solidjsweb.spread(img, $5vyXB$solidjs.mergeProps(otherOptions), false, true);
-  $5vyXB$solidjs.createEffect(() => {
-    if (!props.size()) return; // wait until we have a size
-    if (timeoutSet) return;
-    const handler = $5vyXB$depictaiutilishared.catchify(() => {
-      if (gotCleanedUp) return;
-      img.sizes = sizePX(); // use latest available value of props.size
-      if (!sizeSetFastPath) {
-        setHasSetSize(true);
-        sizeSetFastPath = true;
-      }
-      timeoutSet = false;
-    });
-    // Throttle the updating of sizes to avoid unnecessary image re-fetches during resize
-    // And also because we first set src after sizes has been set, wait with loading and decoding images until browser is idle
-    // This greatly improves performance when loading (more) products
-    // See https://depictaiworkspace.slack.com/archives/C05NJ0K3WRL/p1698220617663139
-    executeWhenIdleBatched(handler);
-    timeoutSet = true;
+      return Reflect.apply(target, this_arg, arg_list);
+    }
   });
-  $5vyXB$solidjs.createEffect(() => {
-    if (!props.size() || !hasSetSize()) return; // If size isn't known or set, don't assign src yet since it would cause the most low res image to load
-    Object.assign(img, src_options());
-    // Add to DOM once decoded to not require/block any paints before image has completed loading and avoid showing broken image symbol
-    // We can do this because there has to be a container around us giving us a size
-    // No need to listen if we're already in the DOM
-    if (hasDecodedFastPath) return;
-    if (props.loading === "lazy") {
-      // For lazy loading there's no decoding to wait for as it only occurs when the image is visible
-      // Make sure src is set before we put the image into the DOM though so no broken image symbol is shown
-      setHasDecoded(true);
-      hasDecodedFastPath = true;
-      return;
+}
+function $d84fe647b84b5dc5$var$starts_with_any_prefix(key) {
+  for (const prefix of $d84fe647b84b5dc5$export$3064e1e8c6513da3) {
+    if (key.startsWith(prefix)) return true;
+  }
+}
+class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
+  /**
+  * Function that will be called when we want to navigate, or a string saying it's not an SPA. You can change this OTG
+  */ /**
+     * We store listing_id in history.state and do operate on this both here and in js-ui, this is the key to be used which js-ui provides
+     */
+  #throwing_on_navigation(...args) {
+    const {
+      on_navigation_: on_navigation_
+    } = this;
+    if (typeof on_navigation_ !== "function") throw new Error("on_navigation_ is not a function");
+    // make sure that we don't accidentally catchify if the SDK consumer has fucked up
+    try {
+      return on_navigation_(...args);
+    } catch (e) {
+      queueMicrotask(() => {
+        throw e;
+      });
+    }
+  }
+  /**
+  * Checks if this tab shouldn't navigate because user wants to open in new tab
+  */
+  #dont_attempt_navigation(ev) {
+    return ev?.button || ev?.metaKey || ev?.ctrlKey;
+  }
+  /**
+  * Vue has async router that needs to be awaited (it navigates after a microtask)
+  * This standardises waiting for all kinds of routers
+  */
+  #get_navigation_happened_promise(is_replace) {
+    return new Promise(resolve => {
+      const handler = what_happened => {
+        if (what_happened === (is_replace ? "replaceState" : "pushState")) {
+          resolve();
+          (0, $5vyXB$depictaiutilishared.instant_exec_on_suspect_history_change).delete(handler);
+        }
+      };
+      (0, $5vyXB$depictaiutilishared.instant_exec_on_suspect_history_change).add(handler);
+    });
+  }
+  navigate_ = {
+    /**
+    * Call this if you *just* want to replace the state object in history.state
+    */
+    replace_state_: new_state => {
+      // This doesn't break any router, so we just do this directly for now, since many don't expose an interface for changing the state
+      globalThis?.history?.replaceState(new_state, "");
+    },
+    /**
+    * Call this to change the URL
+    * @param new_url_ new URL to go to
+    * @param event_ event if you have this in a click handler, will not do anything on cmd/ctrl or non-left click then
+    * @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 listing_id_ If you are navigating to a category and know the listing_id of, please provide it. This is for making a better devEx in js-ui
+    */
+    go_to_: $5vyXB$depictaiutilishared.catchify(async ({
+      new_url_: raw_new_url,
+      event_: event_,
+      force_spa_navigation_: force_spa_navigation_,
+      is_replace_: is_replace_,
+      listing_id_: listing_id_,
+      scroll = true
+    }) => {
+      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;
+      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
+          $5vyXB$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;
+      }
+      event_?.preventDefault();
+      const promise = this.#get_navigation_happened_promise(true);
+      if (force_spa_navigation_ && wants_hard_navigation) {
+        // Don't allow hard navigation if we're forcing SPA navigation, which we do for things where PageReplacer can be used for performance
+        const new_state = history.state;
+        if (listing_id_) {
+          // In JS-UI we need to know the listing_id of the current category, therefore push it into state
+          if (!this.listing_id_state_key) $5vyXB$depictaiutilishared.report(new Error("listing_id_state_key is not set"), "error");
+          new_state[this.listing_id_state_key] = listing_id_;
+        }
+        history[is_replace_ ? "replaceState" : "pushState"](new_state, "", new_url_);
+      } else this.#throwing_on_navigation.call(this, {
+        is_replace: is_replace_,
+        new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin),
+        scroll: scroll
+      });
+      await promise;
+    })
+  };
+  constructor(on_navigation, listing_id_state_key) {
+    this.listing_id_state_key = listing_id_state_key;
+    this.on_navigation_ = on_navigation;
+  }
+}
+function $ca1176b694a6ee2e$export$fe334901e8bebd57() {
+  const cleanup_fns = [];
+  const cleanup = () => cleanup_fns.forEach(f => f());
+  // use an animation to automatically retain the `overflow` values and all other styling
+  for (const element of [document.documentElement, document.body]) {
+    try {
+      const animation = element.animate({
+        overflow: "hidden",
+        offset: 0
+      }, 1);
+      animation.pause();
+      const fn = $5vyXB$depictaiutilishared.catchify(animation.play.bind(animation));
+      cleanup_fns.push(fn);
+      $5vyXB$solidjs.onCleanup(fn);
+    } catch (e) {
+      $5vyXB$depictaiutilishared.dlog("Probably partial keyframe error", e);
+    }
+    if (getComputedStyle(element).overflow !== "hidden") {
+      // safari gets special hacky treatment
+      const style = element.style;
+      const original_value = style.overflow;
+      style.overflow = "hidden";
+      const fn = $5vyXB$depictaiutilishared.catchify(() => style.overflow = original_value);
+      cleanup_fns.push(fn);
+      $5vyXB$solidjs.onCleanup(fn);
+    }
+  }
+  return cleanup;
+} // the way that houdini does that (FYI) it fixes the page jumps
+// const from_top = scrollY;
+// document.body.style.position = "fixed";
+// document.body.style.left = 0;
+// document.body.style.right = 0;
+// document.body.style.top = `-${from_top}px`;
+// document.body.style.overflowY = "scroll";
+
+// Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
+class $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 extends Error {}
+class $7dd1edb2ee2b43ad$export$aa14a9f43128f61f extends $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 {
+  constructor(templateError) {
+    super("Uncaught error in product card template", {
+      cause: templateError
+    });
+  }
+}
+const $edafe91daf3091d7$var$_tmpl$ = ["<div", ' class="', '"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
+function $edafe91daf3091d7$export$b69d0d92862de18b(props) {
+  return $5vyXB$solidjs.ErrorBoundary({
+    fallback(err, retry) {
+      const {
+        message_: message_,
+        severity_: severity_
+      } = props;
+      let message = message_;
+      if (err instanceof (0, $7dd1edb2ee2b43ad$export$aa14a9f43128f61f)) {
+        console.error(err.cause);
+        message = `${message}: ${err.message}`;
+      } else $5vyXB$depictaiutilishared.report([err, message_], severity_);
+      return $5vyXB$solidjsweb.ssr($edafe91daf3091d7$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrClassList(Object.fromEntries(props.class_list_?.map(c => [c, true]) || [])), $5vyXB$solidjsweb.escape(message), $5vyXB$solidjsweb.escape(props.on_error_?.(retry)));
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+const $c77c68e559a1506c$var$_tmpl$ = '<path d="M11.669 10.531l9.156-9.156a.78.78 0 0 0 .237-.569c0-.221-.079-.412-.237-.569A.8.8 0 0 0 20.24 0a.77.77 0 0 0-.569.237l-9.14 9.14-9.14-9.14A.79.79 0 0 0 .807 0a.77.77 0 0 0-.569.237A.78.78 0 0 0 0 .807a.77.77 0 0 0 .237.569l9.156 9.156-9.156 9.14c-.159.157-.237.349-.237.569s.079.412.237.569c.085.085.174.148.268.19a1.095 1.095 0 0 0 .316.048.894.894 0 0 0 .285-.048.84.84 0 0 0 .285-.19l9.139-9.14 9.14 9.14a.894.894 0 0 0 .268.19 1.049 1.049 0 0 0 .301.048.941.941 0 0 0 .301-.048.84.84 0 0 0 .285-.19.78.78 0 0 0 .237-.569c0-.221-.079-.412-.237-.569z"></path>';
+function $c77c68e559a1506c$export$3b621d86b1566b2(props = {}) {
+  return $5vyXB$solidjsweb.ssrElement("svg", $5vyXB$solidjsweb.mergeProps({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "21.064",
+    height: "21.064",
+    viewBox: "0 0 21.064 21.064"
+  }, props), () => $5vyXB$solidjsweb.ssr($c77c68e559a1506c$var$_tmpl$), true);
+}
+const $9fe9883b1d8ecccc$var$_tmpl$ = ["<span", ' class="', '" style="', '"></span>'];
+function $9fe9883b1d8ecccc$export$acb3eaade4b23afd(props) {
+  return $5vyXB$solidjsweb.ssr($9fe9883b1d8ecccc$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `depict-placeholder${$5vyXB$solidjsweb.escape(props.class, true) || ""}`, $5vyXB$solidjsweb.ssrStyle(props.style));
+}
+function $3bc4a89b971a3af5$export$3f37af283f8fb843(props) {
+  const style = $5vyXB$solidjs.createMemo(() => {
+    const {
+      style: style,
+      height: height,
+      width: width,
+      aspectRatio: aspectRatio
+    } = props;
+    const is_image = aspectRatio != undefined;
+    const size_data = is_image ? {
+      width: "100%",
+      "padding-bottom": 1 / aspectRatio * 100 + "%"
+    } : {
+      width: width,
+      height: height
+    };
+    return {
+      display: "block",
+      ...(style || {}),
+      ...size_data
+    };
+  });
+  return $5vyXB$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
+    get style() {
+      return style();
+    },
+    get ["class"]() {
+      return props.class;
+    }
+  });
+}
+const $bbe694fe824b9c78$var$_tmpl$ = ["<div", ' class="image-container">', "</div>"];
+function $bbe694fe824b9c78$export$41e1a079d40a0d58(props) {
+  const [display] = $5vyXB$solidjs.createResource(() => ({
+    merchant: props.merchant_,
+    market: props.market_,
+    locale: props.locale_,
+    product_ids: [props.productId_]
+  }), async request => {
+    const response = await fetch($5vyXB$depictaiutilishared.add_version_query_params(`${(0, $5vyXB$depictaiutilishared.base_url)}/v3/get-displays`), {
+      method: "POST",
+      body: JSON.stringify(request)
+    });
+    const decoded = await response.json();
+    return decoded.displays[0];
+  });
+  const placeholder = $5vyXB$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
+    get aspectRatio() {
+      return props.imageAspectRatio_;
+    }
+  });
+  return $5vyXB$solidjsweb.ssr($bbe694fe824b9c78$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Suspense), {
+    fallback: placeholder,
+    get children() {
+      return (() => {
+        const imageUrl = $5vyXB$solidjs.createMemo(() => {
+          const d = display();
+          const variant = d?.variant_displays[d?.variant_index];
+          return variant?.image_urls?.[0] || variant?.display_image_url;
+        });
+        return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+          get when() {
+            return imageUrl();
+          },
+          fallback: "Cannot load image",
+          get children() {
+            return $5vyXB$solidjsweb.createComponent((0, $5vyXB$depictaiutilishared.ContainedImage), {
+              loading: "lazy",
+              srcset_opts: {
+                set_dataset: false
+              },
+              get src() {
+                return imageUrl();
+              },
+              get aspect_ratio() {
+                return props.imageAspectRatio_;
+              },
+              rendering_options: {},
+              alt: "Product image showing the current product with other outfits highlighted on the model"
+            });
+          }
+        });
+      })();
+    }
+  })));
+}
+function $061ff5b4c3d36171$export$89c6019e4baa40b1(props) {
+  const style = $5vyXB$solidjs.createMemo(() => {
+    const {
+      style: style,
+      height: height,
+      width: width
+    } = props;
+    return {
+      ...(style || {}),
+      height: height ?? "1em",
+      ...(width && {
+        width: width
+      })
+    };
+  });
+  return $5vyXB$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
+    get style() {
+      return style();
+    },
+    get ["class"]() {
+      return props.class;
+    }
+  });
+}
+const $6b502b1b2155a0bc$export$5c28802497c8a83c = /*@__PURE__*/Symbol("category_title_type");
+const $0b23bfd073d9a4e8$var$_tmpl$ = ["<div", ' class="category-title"><h1 class="title">', '</h1><span class="explanation"> \u2014 <!--$-->', "<!--/--></span></div>"];
+const $0b23bfd073d9a4e8$export$b91cec6bdc6b32a1 = /*@__PURE__*/(() => {
+  const actual_function = ({
+    category_title_: category_title_,
+    product_count_: product_count_
+  }) => {
+    return $5vyXB$solidjsweb.ssr($0b23bfd073d9a4e8$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(category_title_()) || $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+      height: "1em",
+      width: "10ch"
+    })), $5vyXB$solidjsweb.escape(product_count_));
+  };
+  // This is wrong but parcel can't build correctly, it says unexpected undefined
+  actual_function[(0, $6b502b1b2155a0bc$export$5c28802497c8a83c)] = "simple";
+  return actual_function;
+})();
+const $a3280f0aad997933$export$c3834fa86c616831 = [[4], [3, 1024], [2, 901]];
+const $a3280f0aad997933$export$864d304a0bc46829 = "2%";
+const $a3280f0aad997933$export$7bf543b9d9be2c22 = (0, $0b23bfd073d9a4e8$export$b91cec6bdc6b32a1);
+function $fc23d7668ae0011d$export$a2cc176055f8f08() {
+  const text = "Please try setting `columnsAtSize`/`gridSpacing` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
+  return (0, $5vyXB$solidjsweb.isServer) ? {
+    t: `<!-- ${text} -->`
+  } : document.createComment(text);
+}
+function $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(elements) {
+  // FYI this probably doesn't work on hugely deep nestings or large amount of elements
+  return $5vyXB$solidjs.createMemo(() => $5f7d55c710fd1bc2$var$unwrapping_helper(elements));
+}
+function $5f7d55c710fd1bc2$var$unwrapping_helper(elements) {
+  const result = [];
+  if (Array.isArray(elements)) for (let i = 0; i < elements.length; i++) {
+    const element = elements[i];
+    result.push(...$5f7d55c710fd1bc2$var$unwrapping_helper(element));
+  } else if (typeof elements == "function") result.push(...$5f7d55c710fd1bc2$var$unwrapping_helper(elements()));else if (elements != undefined && typeof elements != "boolean") result.push(elements);
+  return result;
+}
+let $0caf87eaa19079da$var$cached_placeholder_element;
+let $0caf87eaa19079da$var$rendering_cached_placeholder_element;
+function $0caf87eaa19079da$export$f33414a4df0afd3f({
+  product_card_template_: product_card_template_,
+  num_placeholders_: num_placeholders_,
+  content_blocks_: content_blocks_
+}) {
+  const [num_to_actually_show, set_num_to_actually_show] = $5vyXB$solidjs.createSignal($5vyXB$solidjs.untrack(num_placeholders_));
+  if (0, $5vyXB$solidjsweb.isServer)
+    // want to render simple placeholders on server, effects don't run there
+    // FIXME when adding proper SSR: also SSR content blocks
+    return $5vyXB$solidjs.createMemo(() => Array.from({
+      length: num_placeholders_()
+    }).map(() => {
+      const template_result = product_card_template_(null, undefined);
+      // @ts-ignore
+      if (typeof template_result?.then !== "function") return template_result;
+    }));
+  $5vyXB$solidjs.createRenderEffect(() => {
+    const existing_num = num_to_actually_show();
+    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.
+    // Above comments were from when we added elements in this createRenderEffect. Now I changed it to just increment the number and render them from an <Index> instead, so I can add content blocks better
+    // Functionality should be the same
+    set_num_to_actually_show(existing_num + to_add);
+  });
+  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Index), {
+    get each() {
+      return Array.from({
+        length: num_to_actually_show()
+      });
+    },
+    children: (_item, index) => {
+      const possible_content_block = $5vyXB$solidjs.createMemo(() => content_blocks_?.()?.()?.[index]);
+      // Show content block before product card, so it's *at* that index
+      return [possible_content_block, $0caf87eaa19079da$var$Placeholder({
+        product_card_template_: product_card_template_
+      })]; // 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 $0caf87eaa19079da$var$Placeholder({
+  product_card_template_: product_card_template_
+}) {
+  const get_cloned_placeholders = (element_to_clone = $0caf87eaa19079da$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 ($0caf87eaa19079da$var$cached_placeholder_element) return get_cloned_placeholders();
+  let dispose_original_copy;
+  const get_unwrapped_element = $5vyXB$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] = $5vyXB$solidjs.createResource(() => {
+      if ($0caf87eaa19079da$var$rendering_cached_placeholder_element) return $0caf87eaa19079da$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
+        $0caf87eaa19079da$var$rendering_cached_placeholder_element = return_value;
+      return return_value;
+    });
+    return $5vyXB$solidjs.createMemo(() => {
+      if (resource.loading) return () => [];
+      return $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(resource);
+    });
+  });
+  $5vyXB$solidjs.onCleanup(() => {
+    if ($0caf87eaa19079da$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();
+        $0caf87eaa19079da$var$rendering_cached_placeholder_element = undefined;
+      };
+      $0caf87eaa19079da$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 $5vyXB$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
+    // here we might receive the result of a promise that has already been received, tore down and put into cached_placeholder_element, so don't overwrite that more valid result if it's already set
+    $0caf87eaa19079da$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
+    $0caf87eaa19079da$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
+  });
+}
+
+/**
+ * Gets product_id (the thing we key the rendering on) from a display
+ */
+function $a5871dacf261adf8$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;
+}
+let $a73063cc642f3e5f$var$printedCloneError = false;
+function $a73063cc642f3e5f$export$7f8bd308237ab5a5(get_displays_) {
+  const displays_by_key_ = $5vyXB$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 = $a5871dacf261adf8$export$548d053aba053d79(display);
+      map.set(product_id, display);
+    }
+    return map;
+  });
+  return displays_by_key_;
+}
+const $a73063cc642f3e5f$var$result_ids = ["search_result_id", "product_listing_result_id", "recommendation_id"];
+function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
+  displays_by_key_: displays_by_key_,
+  product_card_template_: product_card_template_,
+  do_per_elements_: do_per_elements_,
+  content_blocks_: content_blocks_
+}) {
+  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.For), {
+    get each() {
+      return [...displays_by_key_().keys()];
+    },
+    children: (product_id, index) => {
+      const owner = $5vyXB$solidjs.getOwner();
+      const possible_content_block = $5vyXB$solidjs.createMemo(() => content_blocks_?.()?.()?.[index()]);
+      const display_accessor = $5vyXB$solidjs.createMemo(prev => {
+        const new_display = displays_by_key_().get(product_id);
+        if (prev && $a73063cc642f3e5f$var$deep_equal(prev, new_display))
+          // If displays are identical, they haven't changed due to merchant/market changing OR we made a new query and the displays are the same. Return the old display (same object reference) to avoid re-rendering.
+          // This doesn't work if people mutate the displays from within the template but we hope they don't
+          // (We can't know if the display changing is due to merchant/market changing or a new query otherwise and don't want to run into https://gitlab.com/depict-ai/depict.ai/-/merge_requests/6890/diffs)
+          return prev;
+        return new_display;
+      });
+      const [product_card_resource] = $5vyXB$solidjs.createResource(display_accessor,
+      // re-render when the reference to the display object changes
+      display => {
+        // It's easy for merchants to accidentally mutate the display or some sub-object thereof
+        // We had a case on singular where they popped an image url and due to use caching after some time there was no image
+        // Attempt cloning the displays if possible (99.9% of the cases probably) and if not, just use the original display
+        try {
+          display = structuredClone(display);
+        } catch (e) {
+          if (!$a73063cc642f3e5f$var$printedCloneError) {
+            $a73063cc642f3e5f$var$printedCloneError = true;
+            $5vyXB$depictaiutilishared.dlog("Can't clone display", display, " (uncloneable objects in it), make sure you don't mutate it in the template since we cache.", e);
+          }
+        }
+        return product_card_template_(display, {
+          set_on_index_change: fn => $5vyXB$solidjs.runWithOwner(owner, () => $5vyXB$solidjs.createEffect(() => fn(index())))
+        });
+      });
+      const node_accessor = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(product_card_resource);
+      $5vyXB$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
+          for (let i = 0; i < $a73063cc642f3e5f$var$result_ids.length; i++) {
+            const id = $a73063cc642f3e5f$var$result_ids[i];
+            const value = display[id];
+            if (value) Object.assign(element.dataset, $5vyXB$depictaiutilishared.camelCasifyObject({
+              [id]: value
+            }));
+          }
+        }
+        do_per_elements_?.(elements, index);
+      });
+      return [
+      // Show content block before product card, so it's *at* that index
+      possible_content_block, product_card_resource]; // https://github.com/solidjs/solid/releases/tag/v1.7.0
     }
-    img.decode().catch(e => $5vyXB$depictaiutilishared.dwarn("Failed to decode image", e, img)) // Display the image also if loading failed so webdev can debug and doesn't get "no image"
-    .then(async () => {
-      // Also wait with inserting image (i.e. paint) until browser is idle
-      await new Promise(r => executeWhenIdleBatched(r));
-      if (gotCleanedUp) return;
-      setHasDecoded(true);
-      hasDecodedFastPath = true;
-    });
-  });
-  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
-    get when() {
-      return hasDecoded();
-    },
-    children: img
   });
 }
-function $19950faaac026e09$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => `${$19950faaac026e09$var$generateImageUrl(url, width)} ${width}w`).join(", ");
-}
-function $19950faaac026e09$var$generateImageUrl(url, width) {
-  // This function is quite slow, we maybe could do string concat with encodeURIComponent instead if shopify handles double width params well?
-  url.searchParams.set("width", width);
-  return url.href;
+// source: https://medium.com/@pancemarko/deep-equality-in-javascript-determining-if-two-objects-are-equal-bf98cf47e934
+function $a73063cc642f3e5f$var$deep_equal(obj1, obj2) {
+  if (obj1 === obj2) return true;
+  if (Array.isArray(obj1) && Array.isArray(obj2)) {
+    if (obj1.length !== obj2.length) return false;
+    return obj1.every((elem, index) => {
+      return $a73063cc642f3e5f$var$deep_equal(elem, obj2[index]);
+    });
+  }
+  if (typeof obj1 === "object" && typeof obj2 === "object" && obj1 !== null && obj2 !== null) {
+    if (Array.isArray(obj1) || Array.isArray(obj2)) return false;
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length || !keys1.every(key => keys2.includes(key))) return false;
+    for (const key in obj1) {
+      if ($a73063cc642f3e5f$var$result_ids.includes(key)) continue; // ignore keys changing with every request
+      const isEqual = $a73063cc642f3e5f$var$deep_equal(obj1[key], obj2[key]);
+      if (!isEqual) return false;
+    }
+    return true;
+  }
+  return false;
 }
-const $a33065cfed827fc0$var$backupSizeSignal = /*@__PURE__*/$5vyXB$solidjs.createSignal();
-const $a33065cfed827fc0$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
-function $a33065cfed827fc0$export$e4b984597b71e989(props) {
-  const context = $84798aaa863a4909$export$8d0c4fdbb05a2f2e();
-  if (context && !context[$a33065cfed827fc0$export$d7b7ab832c20e2f4])
-    // create a signal that's the same for all items in this listing
-    context[$a33065cfed827fc0$export$d7b7ab832c20e2f4] = $5vyXB$solidjs.createSignal();
-  const [currentImageSize, setCurrentImageSize] = context?.[$a33065cfed827fc0$export$d7b7ab832c20e2f4] || $a33065cfed827fc0$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
-  const container = $5vyXB$solidjsweb.createComponent((0, $93304d59a9747aa6$export$94026ee33dbabc26), {
-    get aspectRatio() {
-      return props.aspectRatio;
+const $f48d0fbb00835aaa$var$_tmpl$ = ["<div", ' class="', '">', "</div>"],
+  $f48d0fbb00835aaa$var$_tmpl$2 = ["<style", ' type="text/css">', "</style>"];
+function $f48d0fbb00835aaa$export$d21e32dfedac04be(props) {
+  const container_class = "x" + $5vyXB$solidjs.createUniqueId();
+  const container_element_ = $5vyXB$solidjsweb.ssrElement("div", $5vyXB$solidjsweb.mergeProps(() => props.element_attributes, {
+    classList: {
+      [container_class]: true
+    }
+  }), () => $5vyXB$solidjsweb.escape(props.children), true); // Don't want this in the error boundary below, it should only be for the actual layouting
+  return $5vyXB$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
+    get message_() {
+      return "Failed calculating " + props.layout + " layout";
     },
-    get ["class"]() {
-      return props.class;
+    severity_: "error",
+    get children() {
+      return $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element_, false, container_class);
     }
   });
-  const owner = $5vyXB$solidjs.getOwner();
-  let createdSizeAccessor = false;
-  let wasCleanedUp = false;
-  $5vyXB$solidjs.createEffect(() => {
-    if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
-    // ensure we always have a size accessor
-    // what this whole thing does is set the sizes attribute to the actual size of one of the existing image containers, therefore the value doesn't have to manually be specified
-    createdSizeAccessor = true;
-    setCurrentImageSize(() => $5vyXB$solidjs.runWithOwner(owner, () => $19950faaac026e09$export$e6fffe67d4cdd848(container)));
+}
+function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, insert_after_container = false, container_class) {
+  if (!container_class) {
+    // only try to add if it wasn't provided, so that we have a code path without classList when doing SSR
+    container_class = $5vyXB$depictaiutilishared.make_random_classname();
+    container_element.classList.add(container_class);
+  }
+  // Copy of Layout from utilishared but using solid-js signals instead of async iterable IPNS
+  const show_all_rows = $5vyXB$solidjs.createMemo(() => props.rows === "all");
+  const rows_or_empty_object = $5vyXB$solidjs.createMemo(() => show_all_rows() ? {} : props.rows);
+  const view_more_button_elements = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52($5vyXB$solidjs.createMemo(() => rows_or_empty_object().button));
+  const view_less_button_elements = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52($5vyXB$solidjs.createMemo(() => rows_or_empty_object().view_less_button));
+  const have_a_view_more_button = $5vyXB$solidjs.createMemo(() => {
+    const button = view_more_button_elements();
+    return !(!button || Array.isArray(button) && !button.length);
   });
-  $5vyXB$solidjs.onCleanup(() => {
-    wasCleanedUp = true; // important to set this before the function call below and always, so the dead effects don't create dead size accessors
-    if (!createdSizeAccessor) return;
-    $5vyXB$depictaiutilishared.queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
+  const have_a_view_less_button = $5vyXB$solidjs.createMemo(() => {
+    const button = view_less_button_elements();
+    return !(!button || Array.isArray(button) && !button.length);
   });
-
-  $5vyXB$solidjsweb.insert(container, $5vyXB$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), {
-    style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
-    get size() {
-      return $5vyXB$solidjs.createMemo(() => currentImageSize()?.() || 0);
-    },
-    get src() {
-      return props.src;
-    },
-    get alt() {
-      return props.alt;
+  const [get_styling, set_styling] = $5vyXB$solidjs.createSignal();
+  const selector_beginning = `.depict .${container_class}>`; // class so ppl can have id if needed
+  const [get_children_count, set_children_count] = $5vyXB$solidjs.createSignal(0);
+  const update_children_count = () => (0, $5vyXB$solidjsweb.isServer) ? 20 : set_children_count(container_element.children.length);
+  const col_styling = $5vyXB$solidjs.createMemo(() => $5vyXB$depictaiutilishared.n_col_styling_with_dist(selector_beginning, props.grid_spacing, props.cols_at_size, props.layout, props.override_vertical_spacing));
+  const default_currently_visible_signal = $5vyXB$solidjs.createSignal($5vyXB$solidjs.untrack(() => rows_or_empty_object().start_rows ?? 1)); // Keep this signal here, so it doesn't change when rows_or_empty_object and I think it's to be expected that the "internal default signal" stays the same
+  const rows_visible_signal = $5vyXB$solidjs.createMemo(() => rows_or_empty_object().currently_visible || default_currently_visible_signal);
+  const get_rows_visible = $5vyXB$solidjs.createMemo(() => rows_visible_signal()[0]());
+  const set_rows_visible = $5vyXB$solidjs.createMemo(() => rows_visible_signal()[1]);
+  const view_more_button_class = "m" + $5vyXB$solidjs.createUniqueId();
+  const view_less_button_class = "l" + $5vyXB$solidjs.createUniqueId(); //  https://github.com/solidjs/solid-docs/issues/263#issuecomment-1622388079
+  const view_more_button_container = $5vyXB$solidjs.createMemo(() => have_a_view_more_button() && $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `load-more-container ${$5vyXB$solidjsweb.escape(view_more_button_class, true)}`, $5vyXB$solidjsweb.escape(rows_or_empty_object().button)));
+  // We need to have duplicate buttons because which ones is shown depends on the number of rows visible and therefore on the viewport size and therefore on the css media queries
+  const view_less_button_container = $5vyXB$solidjs.createMemo(() => have_a_view_less_button() && $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `load-less-container ${$5vyXB$solidjsweb.escape(view_less_button_class, true)}`, $5vyXB$solidjsweb.escape(rows_or_empty_object().view_less_button)));
+  const [force_style_update, set_force_style_update] = $5vyXB$solidjs.createSignal("");
+  $5vyXB$solidjs.createComputed(() => {
+    // Make sure we don't have more rows visible than max_rows (this could happen by max_rows being decreased)
+    const rows_visible = get_rows_visible();
+    const max_rows = rows_or_empty_object().max_rows;
+    if (!isNaN(max_rows) && max_rows >= 0 && rows_visible > max_rows) set_rows_visible()(max_rows);
+  });
+  $5vyXB$solidjs.createEffect(() => set_force_style_update(" ")); // force style update after hydration due to https://discord.com/channels/722131463138705510/722167424186843267/1151544212517552168
+  $5vyXB$solidjs.createRenderEffect(() => {
+    // Be careful to only read show_all_rows in here (ofc doesn't apply to nested effects)
+    if (show_all_rows()) {
+      // no view more functionality requested
+      set_styling(() => col_styling);
+      return;
     }
-  }));
-  return container;
-}
-const $0f313083912e447a$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
-function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
-  return $5vyXB$solidjsweb.ssr($0f313083912e447a$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("width", $5vyXB$solidjsweb.escape(props.width_, true) ?? 14, false) + $5vyXB$solidjsweb.ssrAttribute("height", $5vyXB$solidjsweb.escape(props.height_, true) ?? 26, false));
-}
-const $a0e53f99354809d9$var$_tmpl$ = ["<div", ">", "</div>"];
-function $a0e53f99354809d9$export$6649caad96ef8870({
-  children: children,
-  slider_ref_: slider_ref_,
-  faded_opacity_ = 0.7,
-  mutation_plugins_ = [],
-  disable_fading_: disable_fading_,
-  arrow_width_: arrow_width_,
-  arrow_height_: arrow_height_
-}) {
-  const slider = new (0, $5vyXB$depictaiutilishared.Amazing_Slider)({
-    button_contents: {
-      left: [$5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
-        height_: arrow_height_,
-        width_: arrow_width_
-      })))],
-      right: [$5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
-        height_: arrow_height_,
-        width_: arrow_width_
-      })))]
-    },
-    constructor_plugins: [$5vyXB$depictaiutilishared.slider_snap_css().constructor_plugin],
-    mutation_plugins: [...(disable_fading_ ? [] : [$5vyXB$depictaiutilishared.slider_fading_factory({
-      threshold_: 0.96,
-      faded_opacity_: faded_opacity_
-    }).mutation_plugin_]), ...mutation_plugins_]
+    update_children_count();
+    if (!(0, $5vyXB$solidjsweb.isServer)) {
+      const mutation_observer = new MutationObserver($5vyXB$depictaiutilishared.catchify(update_children_count));
+      mutation_observer.observe(container_element, {
+        childList: true
+      });
+      $5vyXB$solidjs.onCleanup(() => mutation_observer.disconnect());
+    }
+    set_styling(
+    // this is needed because solid will think that the memo-accessor is a setter function otherwise
+    () => $5vyXB$solidjs.createMemo(() => {
+      const {
+        rows_per_click: rows_per_click,
+        max_rows = -1,
+        start_rows: start_rows
+      } = rows_or_empty_object();
+      const rows_visible = get_rows_visible();
+      const children_count = get_children_count();
+      return force_style_update() + col_styling() + props.cols_at_size.map(options => {
+        const [recs_per_row, min, max] = options;
+        let should_hide_view_more_button;
+        let visible_recs;
+        if (props.disable_partial_rows) {
+          visible_recs = $5vyXB$depictaiutilishared.layout_get_visible_recs_without_partial_rows(rows_visible, children_count, options);
+          const visible_recs_next_show_more = $5vyXB$depictaiutilishared.layout_get_visible_recs_without_partial_rows(rows_visible + (rows_per_click || 0),
+          // Should this really be zero when we default rows_per_click to 1?
+          children_count, options);
+          should_hide_view_more_button = visible_recs === visible_recs_next_show_more;
+        } else {
+          visible_recs = $5vyXB$depictaiutilishared.layout_get_total_rec_amount_for_row(rows_visible, options);
+          should_hide_view_more_button = visible_recs >= children_count;
+        }
+        const should_hide_button_final = should_hide_view_more_button || max_rows !== -1 && rows_visible >= max_rows;
+        // I don't really understand the logic for when the view more button gets hidden so IDK if below is correct, but it works how it should for now
+        const should_hide_view_less_button = !should_hide_view_more_button || start_rows == undefined || rows_visible <= start_rows || children_count <= recs_per_row * start_rows;
+        return `${$5vyXB$depictaiutilishared.layout_media_query_header(min, max)}{${selector_beginning}:nth-child(n+${visible_recs + 1}){display:none}${props.layout == "slider" ? `${selector_beginning}:nth-child(n+${visible_recs}){margin-right:0}` : ""}${should_hide_button_final ? `.depict .${view_more_button_class}{display:none!important}` : ``}${should_hide_view_less_button ? `.depict .${view_less_button_class}{display:none!important}` : ``}}`;
+      }).join("");
+    }));
   });
-  $5vyXB$solidjsweb.insert(slider.insert_here, children);
-  $5vyXB$solidjs.onCleanup(() => slider.observer.disconnect());
-  slider_ref_?.(slider);
-  return slider.container;
+  const style_element = $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), get_styling); // need to create this after set_styling has been called or else there will be no styling in the SSR'd output
+  if (insert_after_container) container_element.after(style_element);
+  return [container_element, view_more_button_container(), view_less_button_container(), style_element];
 }
-
-/** @jsxImportSource solid-js */
-
-function $f13855d1b951b24a$export$ebdc3711f7e02ccd(what_to_watch) {
-  const [width, setWidth] = $5vyXB$solidjs.createSignal();
-  const resizeObserver = new ResizeObserver($5vyXB$depictaiutilishared.catchify(records => {
-    for (let j = 0; j < records.length; j++) {
-      const width = records[j].borderBoxSize?.[0]?.inlineSize ?? what_to_watch.getBoundingClientRect().width;
-      setWidth(width);
+const $b8e79813f4f7ebe4$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"],
+  $b8e79813f4f7ebe4$var$_tmpl$2 = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
+function $b8e79813f4f7ebe4$export$7da560f849543dff({
+  recommendations_resource_: recommendations_resource_,
+  product_card_template_: product_card_template_,
+  layout_options_: layout_options_,
+  rows_object_: rows_object_,
+  title_: title_
+}) {
+  const is_showing_something = $5vyXB$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $5vyXB$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
+  const num_placeholders_ = () => 20;
+  const elements = [$5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      return $5vyXB$solidjsweb.ssr($b8e79813f4f7ebe4$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(title()));
     }
-  }));
-  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
-  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
-  const disconnect = (0, $5vyXB$depictaiutilishared.observer).onexists(what_to_watch, ({
-    element: element
-  }) => requestAnimationFrame($5vyXB$depictaiutilishared.catchify(() => {
-    const current_size = what_to_watch.getBoundingClientRect().width;
-    if (current_size)
-      // If element has size, set signal to that. ResizeObserver only triggers when the content is visible in some cases, but it might already have a size. This reduces size filter expanding animation jank in chrome.
-      setWidth(current_size);
-    resizeObserver.observe(element);
-  })));
-  $5vyXB$solidjs.onCleanup(() => {
-    resizeObserver.disconnect();
-    disconnect();
+  }), $5vyXB$solidjsweb.ssr($b8e79813f4f7ebe4$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($fc23d7668ae0011d$export$a2cc176055f8f08()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $5vyXB$solidjsweb.mergeProps({
+    get rows() {
+      return rows_object_();
+    },
+    layout: "grid",
+    element_attributes: {
+      class: "cards"
+    }
+  }, layout_options_, {
+    get children() {
+      return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Suspense), {
+        get fallback() {
+          return $0caf87eaa19079da$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_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($5vyXB$solidjs.createMemo(() => recommendations_resource_() || []));
+            return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
+              displays_by_key_: displays_by_key_,
+              product_card_template_: product_card_template_
+            });
+          })();
+        }
+      });
+    }
+  }))))];
+  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      return is_showing_something();
+    },
+    children: elements
   });
-  return width;
 }
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
@@ -554,546 +1117,777 @@ const $4e04be41243c3d80$export$6daf8749b65a1b77 = cols_at_size => {
   });
   return $4e04be41243c3d80$var$transform_elements(sorted_cols_at_size);
 };
-function $fc23d7668ae0011d$export$a2cc176055f8f08() {
-  const text = "Please try setting `columnsAtSize`/`gridSpacing` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
-  return (0, $5vyXB$solidjsweb.isServer) ? {
-    t: `<!-- ${text} -->`
-  } : document.createComment(text);
+function $95837413165cc2df$export$23fca46f3143581f(component, error_message) {
+  const component_in_error_boundary = do_with_elements => {
+    const error_boundary_wrapped = $edafe91daf3091d7$export$b69d0d92862de18b({
+      severity_: "error",
+      message_: error_message,
+      get children() {
+        const elements = component();
+        do_with_elements?.(elements);
+        return elements;
+      }
+    });
+    // This might return an accessor, in that case we need to "unwrap" it since our SDK consumers expect HTML elements or arrays thereof
+    if (typeof error_boundary_wrapped === "function")
+      // @ts-ignore
+      return error_boundary_wrapped();
+    // On the server it returns a string, so we just return that
+    return error_boundary_wrapped;
+  };
+  const owner = $5vyXB$solidjs.getOwner();
+  if (owner == null) return $5vyXB$solidjs.createRoot(dispose => {
+    // if we're not already run in a root, create a root and automatically dispose it when the first returned element is removed from the DOM
+    return component_in_error_boundary(elements => {
+      const have_multiple = Array.isArray(elements);
+      if (have_multiple ? !elements?.length : !elements) return;
+      (0, $5vyXB$depictaiutilishared.observer).onremoved(have_multiple ? elements[0] : elements, ({
+        element: element
+      }) => {
+        if (document.documentElement.contains(element)) return; // If element has instantly been re-inserted, don't dispose
+        // See https://depictaiworkspace.slack.com/archives/C050GHEPBTR/p1695809102791259?thread_ts=1695106805.459729&cid=C050GHEPBTR
+        dispose();
+      });
+    });
+  });else
+    // we're already in a root so cleanups are handled
+    return component_in_error_boundary();
 }
-function $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(elements) {
-  // FYI this probably doesn't work on hugely deep nestings or large amount of elements
-  return $5vyXB$solidjs.createMemo(() => $5f7d55c710fd1bc2$var$unwrapping_helper(elements));
+const $84798aaa863a4909$var$ListingContext = /*@__PURE__*/$5vyXB$solidjs.createContext();
+function $84798aaa863a4909$export$e68cff63f76bd15b(props) {
+  const our_object = {};
+  return $5vyXB$solidjsweb.createComponent($84798aaa863a4909$var$ListingContext.Provider, {
+    value: our_object,
+    get children() {
+      return props.children;
+    }
+  });
 }
-function $5f7d55c710fd1bc2$var$unwrapping_helper(elements) {
-  const result = [];
-  if (Array.isArray(elements)) for (let i = 0; i < elements.length; i++) {
-    const element = elements[i];
-    result.push(...$5f7d55c710fd1bc2$var$unwrapping_helper(element));
-  } else if (typeof elements == "function") result.push(...$5f7d55c710fd1bc2$var$unwrapping_helper(elements()));else if (elements != undefined && typeof elements != "boolean") result.push(elements);
-  return result;
+function $84798aaa863a4909$export$8d0c4fdbb05a2f2e() {
+  return $5vyXB$solidjs.useContext($84798aaa863a4909$var$ListingContext);
 }
-let $0caf87eaa19079da$var$cached_placeholder_element;
-let $0caf87eaa19079da$var$rendering_cached_placeholder_element;
-function $0caf87eaa19079da$export$f33414a4df0afd3f({
-  product_card_template_: product_card_template_,
-  num_placeholders_: num_placeholders_,
-  content_blocks_: content_blocks_
-}) {
-  const [num_to_actually_show, set_num_to_actually_show] = $5vyXB$solidjs.createSignal($5vyXB$solidjs.untrack(num_placeholders_));
-  if (0, $5vyXB$solidjsweb.isServer)
-    // want to render simple placeholders on server, effects don't run there
-    // FIXME when adding proper SSR: also SSR content blocks
-    return $5vyXB$solidjs.createMemo(() => Array.from({
-      length: num_placeholders_()
-    }).map(() => {
-      const template_result = product_card_template_(null, undefined);
-      // @ts-ignore
-      if (typeof template_result?.then !== "function") return template_result;
-    }));
-  $5vyXB$solidjs.createRenderEffect(() => {
-    const existing_num = num_to_actually_show();
-    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.
-    // Above comments were from when we added elements in this createRenderEffect. Now I changed it to just increment the number and render them from an <Index> instead, so I can add content blocks better
-    // Functionality should be the same
-    set_num_to_actually_show(existing_num + to_add);
-  });
-  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Index), {
-    get each() {
-      return Array.from({
-        length: num_to_actually_show()
-      });
+const $1f8dbf7e28b3eff2$var$_tmpl$ = ["<button", ' class="show-more major" type="button">', "</button>"],
+  $1f8dbf7e28b3eff2$var$_tmpl$2 = ["<div", ' class="depict plp recommendations">', "</div>"];
+function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
+  return $95837413165cc2df$export$23fca46f3143581f(() => {
+    const rows_object_ = $5vyXB$solidjs.createMemo(() => {
+      const {
+        view_more_button: view_more_button,
+        max_rows: max_rows
+      } = props;
+      if (!view_more_button) {
+        if (max_rows) return {
+          max_rows: max_rows
+        };
+        return "all";
+      }
+      return {
+        max_rows: max_rows,
+        start_rows: view_more_button.start_rows,
+        rows_per_click: view_more_button.rows_per_click ?? 2,
+        button: $5vyXB$solidjsweb.ssr($1f8dbf7e28b3eff2$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(view_more_button.text))
+      };
+    });
+    const grid_spacing_override = $5vyXB$solidjs.createMemo(() => {
+      const {
+        grid_spacing: grid_spacing
+      } = props; // can be reactive
+      return typeof grid_spacing === "string" ? {
+        grid_spacing: grid_spacing
+      } : {
+        override_vertical_spacing: grid_spacing.vertical,
+        grid_spacing: grid_spacing.horizontal
+      };
+    });
+    const [recommendations_resource_] = $5vyXB$solidjs.createResource(() => props.recommendations, recs => recs);
+    return $5vyXB$solidjsweb.ssr($1f8dbf7e28b3eff2$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
+      get children() {
+        return $b8e79813f4f7ebe4$export$7da560f849543dff({
+          rows_object_: rows_object_,
+          product_card_template_: (...args) => props.product_card_template(...args),
+          recommendations_resource_: recommendations_resource_,
+          title_: () => props.title,
+          layout_options_: $5vyXB$solidjs.createMemo(() => ({
+            cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
+            ...grid_spacing_override()
+          }))
+        });
+      }
+    })));
+  }, "RecommendationGrid failed");
+}
+function $f55548318724b05c$export$6b35356958ae5587(props) {
+  const gridSpacing = (0, $a3280f0aad997933$export$864d304a0bc46829);
+  const columnsAtSize = [[3], [2, 901]];
+  const href = $5vyXB$depictaiutilishared.use_href_accessor();
+  const hrefWithoutHash = $5vyXB$solidjs.createMemo(() => {
+    // Don't let the hash count for knowing when the user navigated away as we change the hash when different tabs are selected
+    const url = new URL(href());
+    url.hash = "";
+    return "" + url;
+  });
+  const makeJSXElementCloseModalWhenClicked = returnValue => {
+    const resolved = $5vyXB$solidjs.children(() => returnValue);
+    $5vyXB$solidjs.createEffect(() => {
+      // If someone clicks on a product card in the shop the look modal, close the modal the next time the href changes
+      for (const item of resolved.toArray()) {
+        if (!(item instanceof Element)) return;
+        item.addEventListener("click", $5vyXB$depictaiutilishared.catchify(() =>
+        // run with modal owner so we don't do stuff after the modal closes
+        // can't have the owner of the product card as that gets disposed if the productId changes which might be too early (before location.href has changed)
+        $5vyXB$solidjs.runWithOwner(props.modalOwner_, () => $5vyXB$solidjs.createEffect($5vyXB$solidjs.on(hrefWithoutHash, props.actually_close_modal_, {
+          defer: true
+        })))), {
+          capture: true
+        });
+      }
+    });
+    return resolved;
+  };
+  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      return !props.products_to_shop_.error;
     },
-    children: (_item, index) => {
-      const possible_content_block = $5vyXB$solidjs.createMemo(() => content_blocks_?.()?.()?.[index]);
-      // Show content block before product card, so it's *at* that index
-      return [possible_content_block, $0caf87eaa19079da$var$Placeholder({
-        product_card_template_: product_card_template_
-      })]; // https://github.com/solidjs/solid/releases/tag/v1.7.0
+    fallback: "Failed fetching shop by look recommendations",
+    get children() {
+      return $5vyXB$solidjsweb.createComponent((0, $8c38828ae2321937$export$b2539bed5023c21c), {
+        AnchorComponent: anchorProps => $5vyXB$solidjsweb.ssrElement("a", anchorProps, () => $5vyXB$solidjsweb.escape(anchorProps.children), true),
+        get children() {
+          return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Suspense), {
+            get fallback() {
+              return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Index), {
+                get each() {
+                  return Array.from({
+                    length: 2
+                  });
+                },
+                children: () => $5vyXB$solidjsweb.createComponent((0, $8c38828ae2321937$export$3e41faf802a29e71), {
+                  get label() {
+                    return $5vyXB$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+                      height: "1em",
+                      width: "10ch"
+                    });
+                  },
+                  get children() {
+                    return $5vyXB$solidjsweb.createComponent((0, $1f8dbf7e28b3eff2$export$9756467d34d91cdb), {
+                      grid_spacing: gridSpacing,
+                      cols_at_size: columnsAtSize,
+                      recommendations: new Promise(r => $5vyXB$solidjs.onCleanup(() => r([]))),
+                      get product_card_template() {
+                        return props.productCardTemplate_;
+                      },
+                      max_rows: 2
+                    });
+                  }
+                })
+              });
+            },
+            get children() {
+              return (() => {
+                const groups = $5vyXB$solidjs.createMemo(() => Object.keys(props.products_to_shop_()?.shop_the_look || {}));
+                return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.For), {
+                  get each() {
+                    return groups();
+                  },
+                  children: group => $5vyXB$solidjsweb.createComponent((0, $8c38828ae2321937$export$3e41faf802a29e71), {
+                    label: group,
+                    get id() {
+                      return "shop-the-look-" + group.replaceAll(" ", "-").toLowerCase();
+                    },
+                    get children() {
+                      return $5vyXB$solidjsweb.createComponent((0, $1f8dbf7e28b3eff2$export$9756467d34d91cdb), {
+                        grid_spacing: gridSpacing,
+                        cols_at_size: columnsAtSize,
+                        get recommendations() {
+                          return Promise.resolve(props.products_to_shop_().shop_the_look[group]);
+                        },
+                        product_card_template: (...args) => {
+                          const returnValue = props.productCardTemplate_(...args);
+                          // Product card template can return promise, handle that
+                          if (typeof returnValue === "object" && returnValue && "then" in returnValue) {
+                            const owner = $5vyXB$solidjs.getOwner();
+                            return returnValue.then(returnValue => $5vyXB$solidjs.runWithOwner(owner, () => makeJSXElementCloseModalWhenClicked(returnValue)));
+                          }
+                          return makeJSXElementCloseModalWhenClicked(returnValue);
+                        }
+                      });
+                    }
+                  })
+                });
+              })();
+            }
+          });
+        }
+      });
+    }
+  });
+}
+const $b0ceb08960135d83$var$_tmpl$ = ["<div", ' class="top-bar"><button class="close">', "</button></div>"],
+  $b0ceb08960135d83$var$_tmpl$2 = ["<div", ' class="below-top-bar"><h2>Outfit recommendations</h2><div class="image-and-suggestions"><!--$-->', '<!--/--><div class="tabs">', "</div></div></div>"],
+  $b0ceb08960135d83$var$_tmpl$3 = ["<div", ' id="depict-shop-the-look-modal" class="depict shop-the-look"><div class="shop-the-look-backdrop"></div><div class="modal-contents">', "</div></div>"];
+function $b0ceb08960135d83$export$a3cbef418994a664(props) {
+  const pseudo_router_ = new (0, $e96dd13889871fc0$export$7e1297a3a19f10d8)(props.onNavigation);
+  const closing_animations = [];
+  const owner = $5vyXB$solidjs.getOwner();
+  const isBig = () => matchMedia("(min-height: 740px) and (min-width: 740px)").matches;
+  props.register_closing_animation_(() => Promise.all(closing_animations.map(animation => animation().finished)));
+  $ca1176b694a6ee2e$export$fe334901e8bebd57();
+  return [$5vyXB$solidjsweb.ssr($b0ceb08960135d83$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
+    message_: "ShopTheLookModal failed",
+    severity_: "error",
+    get children() {
+      return [$5vyXB$solidjsweb.ssr($b0ceb08960135d83$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {
+        width: 16,
+        height: 16
+      }))), $5vyXB$solidjsweb.ssr($b0ceb08960135d83$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $bbe694fe824b9c78$export$41e1a079d40a0d58), {
+        get locale_() {
+          return props.locale;
+        },
+        get market_() {
+          return props.market;
+        },
+        get merchant_() {
+          return props.merchant;
+        },
+        get imageAspectRatio_() {
+          return props.imageAspectRatio;
+        },
+        get productId_() {
+          return props.productId;
+        }
+      })), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $f55548318724b05c$export$6b35356958ae5587), {
+        modalOwner_: owner,
+        pseudo_router_: pseudo_router_,
+        get productCardTemplate_() {
+          return props.productCardTemplate;
+        },
+        get products_to_shop_() {
+          return props.products_to_shop_;
+        },
+        get actually_close_modal_() {
+          return props.actually_close_modal_;
+        }
+      })))];
+    }
+  })))];
+}
+const $a5f3eaa1a24bbc1e$var$_tmpl$ = ["<div", ">Failed fetching shop the look recommendations</div>"];
+const $a5f3eaa1a24bbc1e$var$CANT_FETCH = "Failed fetching shop the look recommendations";
+let $a5f3eaa1a24bbc1e$var$setModalShouldBeOpen;
+let $a5f3eaa1a24bbc1e$var$modalProps;
+function $a5f3eaa1a24bbc1e$export$d4973c31938cbfd1(props) {
+  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.ErrorBoundary), {
+    fallback: () => $5vyXB$solidjsweb.ssr($a5f3eaa1a24bbc1e$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey()),
+    get children() {
+      return $5vyXB$solidjsweb.createComponent($a5f3eaa1a24bbc1e$var$ActualShopTheLookButton, props);
+    }
+  });
+}
+function $a5f3eaa1a24bbc1e$var$ActualShopTheLookButton(props) {
+  const [products_to_shop_] = $5vyXB$solidjs.createResource(() => ({
+    merchant: props.merchant,
+    market: props.market,
+    locale: props.locale,
+    product_ids: [props.productId],
+    type: "shop_the_look",
+    session_id: $5vyXB$depictaiutilishared.get_session_id()
+  }), async request => {
+    const response = await fetch($5vyXB$depictaiutilishared.add_version_query_params(`${(0, $5vyXB$depictaiutilishared.base_url)}/v3/shop-the-look`), {
+      method: "POST",
+      body: JSON.stringify(request)
+    });
+    if (!response.ok) {
+      $5vyXB$depictaiutilishared.dwarn(response);
+      throw new Error($a5f3eaa1a24bbc1e$var$CANT_FETCH);
     }
+    const decoded = await response.json();
+    return decoded;
   });
+  const [localProps, partForModal] = $5vyXB$solidjs.splitProps(props, ["buttonAttributes"]);
+  const {
+    openModal: openModal,
+    closeModal: closeModal
+  } = $a5f3eaa1a24bbc1e$var$useShopTheLookModal();
+  const hasAnythingToShow = $5vyXB$solidjs.createMemo(() => Object.entries(products_to_shop_()?.shop_the_look || {}).length);
+  const displayStyleValue = $5vyXB$solidjs.createMemo(() => hasAnythingToShow() ? "" : "none");
+  const button = $5vyXB$solidjsweb.ssrElement("button", localProps.buttonAttributes, () => $5vyXB$solidjsweb.escape(localProps?.buttonAttributes?.children) || "Shop the look", true);
+  $5vyXB$solidjs.createEffect(() => button.style.display = displayStyleValue()); // Set our attributes like this, so we allow total control over the button from the outside via buttonAttributes
+  $5vyXB$solidjs.createEffect(() => !hasAnythingToShow() && closeModal()); // close modal if we ever get into the state of having it open and not having anything to show
+  $a5f3eaa1a24bbc1e$var$modalProps = $5vyXB$solidjs.mergeProps(partForModal, {
+    products_to_shop_: products_to_shop_
+  });
+  button.addEventListener("click", openModal);
+  return button;
 }
 /**
- * Get one placeholder element. It will be cloned for each placeholder for ultimate performance even when solid-js isn't rendering the placeholders.
+ * This does not need to be run in a root at all, it will create a root every time the modal is opened and then tear it down when the modal is closed again
  */
-function $0caf87eaa19079da$var$Placeholder({
-  product_card_template_: product_card_template_
-}) {
-  const get_cloned_placeholders = (element_to_clone = $0caf87eaa19079da$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 ($0caf87eaa19079da$var$cached_placeholder_element) return get_cloned_placeholders();
-  let dispose_original_copy;
-  const get_unwrapped_element = $5vyXB$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] = $5vyXB$solidjs.createResource(() => {
-      if ($0caf87eaa19079da$var$rendering_cached_placeholder_element) return $0caf87eaa19079da$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
-        $0caf87eaa19079da$var$rendering_cached_placeholder_element = return_value;
-      return return_value;
-    });
-    return $5vyXB$solidjs.createMemo(() => {
-      if (resource.loading) return () => [];
-      return $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(resource);
-    });
-  });
-  $5vyXB$solidjs.onCleanup(() => {
-    if ($0caf87eaa19079da$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();
-        $0caf87eaa19079da$var$rendering_cached_placeholder_element = undefined;
-      };
-      $0caf87eaa19079da$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 $5vyXB$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
-    // here we might receive the result of a promise that has already been received, tore down and put into cached_placeholder_element, so don't overwrite that more valid result if it's already set
-    $0caf87eaa19079da$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
-    $0caf87eaa19079da$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
+function $a5f3eaa1a24bbc1e$var$useShopTheLookModal() {
+  if ($a5f3eaa1a24bbc1e$var$setModalShouldBeOpen) return $a5f3eaa1a24bbc1e$var$setModalShouldBeOpen;
+  return $a5f3eaa1a24bbc1e$var$setModalShouldBeOpen = $5vyXB$solidjs.createRoot(() => $a5f3eaa1a24bbc1e$var$actualSetupModal());
+}
+function $a5f3eaa1a24bbc1e$var$actualSetupModal() {
+  // Save modal state in history so modal is still open after people go back
+  const history_key = "depict_shop_the_look_open";
+  const {
+    [history_key]: [history_value, set_history_value]
+  } = $6e22b5314fb52f4c$export$e183a13865960371({
+    [history_key]: false
+  }, {
+    navigate_: {
+      replace_state_: new_state => globalThis?.history?.replaceState(new_state, "")
+    }
   });
+  (0, $d84fe647b84b5dc5$export$3064e1e8c6513da3).add(history_key);
+  const actually_close_modal_ = () => set_history_value(false);
+  const owner = $5vyXB$solidjs.getOwner();
+  $5vyXB$depictaiutilishared.catchify(async () => {
+    const {
+      open_modal_: open_modal_,
+      close_modal_: close_modal_
+    } = await $9abb0a35d4b60ed3$export$79b1565500412d9b((0, $b0ceb08960135d83$export$a3cbef418994a664), {
+      actually_close_modal_: actually_close_modal_
+    });
+    $5vyXB$solidjs.runWithOwner(owner, () => $5vyXB$solidjs.createEffect(() => {
+      if (history_value()) open_modal_($a5f3eaa1a24bbc1e$var$modalProps);else close_modal_();
+    }));
+  })();
+  return {
+    openModal: () => set_history_value(true),
+    closeModal: actually_close_modal_
+  };
 }
-
+const $1ab22f2cd39b3061$var$fallback_operator = "in";
+const $1ab22f2cd39b3061$var$fallback_token = "";
+const $1ab22f2cd39b3061$var$legacy_filter_prefix = "filter_";
+const $1ab22f2cd39b3061$var$operator_map = {
+  "eq": "\u2261",
+  "neq": "\u2260",
+  "in": "\u2208",
+  "nin": "\u2209",
+  "leq": "\u2264",
+  "geq": "\u2265",
+  "inrange": "\uD83D\uDD22"
+};
+const $1ab22f2cd39b3061$var$ascending_token = "\uD83D\uDCC8";
+const $1ab22f2cd39b3061$var$descending_token = "\uD83D\uDCC9";
+const $1ab22f2cd39b3061$var$range_delimiter = "-";
+const $1ab22f2cd39b3061$var$string_item_delimiter = "\u201A"; // This is not a comma but a comma-like character that browsers will render in the URL bar.
+const $1ab22f2cd39b3061$var$array_item_delimiter = "\u2023"; // FIXME: decide on a character. Could theoretically be a double string delimiter.
+const $1ab22f2cd39b3061$var$empty_item_replacement = "0\uFE0F\u20E3";
+const $1ab22f2cd39b3061$var$op_to_token = op => {
+  if (op === $1ab22f2cd39b3061$var$fallback_operator) return $1ab22f2cd39b3061$var$fallback_token;
+  return $1ab22f2cd39b3061$var$operator_map[op];
+};
 /**
- * Gets product_id (the thing we key the rendering on) from a display
+ * Checks if a given array of filter data can be neatly serialized into an URL query parameter, or if it should fall back to JSON+base64.
+ * The requirements are either an array of strings, containing no reserved characters, or an array of arrays of strings, containing no reserved characters.
+ * No deep or mixed nesting levels are supported.
  */
-function $a5871dacf261adf8$export$548d053aba053d79(display) {
-  if ("variant_index" in display) {
-    const actual_display = display.variant_displays[display.variant_index];
-    return actual_display.product_id;
+function $1ab22f2cd39b3061$var$array_is_serializable(array, is_root = true) {
+  if (array.every(item => Array.isArray(item))) {
+    if (!is_root)
+      // Deeply nested arrays are not supported, but also don't exist as filters (yet)
+      return false;
+    return array.every(item => $1ab22f2cd39b3061$var$array_is_serializable(item, false));
   }
-  return display.product_id;
+  if (array.some(item => typeof item !== "string"))
+    // Numbers are not supported, since 1 and "1" would encode to the same thing
+    return false;
+  // Encoding reserved characters is not supported
+  return !array.some(item => item.includes($1ab22f2cd39b3061$var$array_item_delimiter) || item.includes($1ab22f2cd39b3061$var$string_item_delimiter) || item === $1ab22f2cd39b3061$var$empty_item_replacement);
 }
-let $a73063cc642f3e5f$var$printedCloneError = false;
-function $a73063cc642f3e5f$export$7f8bd308237ab5a5(get_displays_) {
-  const displays_by_key_ = $5vyXB$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 = $a5871dacf261adf8$export$548d053aba053d79(display);
-      map.set(product_id, display);
-    }
-    return map;
-  });
-  return displays_by_key_;
+/**
+ * Human readable string[] or string[][] serialization for URLs.
+ * @param array
+ * @returns
+ */
+function $1ab22f2cd39b3061$var$encode_array(array) {
+  const is_nested = array.every(item => Array.isArray(item));
+  if (is_nested) return array.map($1ab22f2cd39b3061$var$encode_array).join($1ab22f2cd39b3061$var$array_item_delimiter) + $1ab22f2cd39b3061$var$array_item_delimiter; // Nested arrays require a suffix to close nesting levels
+  return array.map(item => item === "" ? $1ab22f2cd39b3061$var$empty_item_replacement : item).join($1ab22f2cd39b3061$var$string_item_delimiter);
 }
-const $a73063cc642f3e5f$var$result_ids = ["search_result_id", "product_listing_result_id", "recommendation_id"];
-function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
-  displays_by_key_: displays_by_key_,
-  merchant_: merchant_,
-  market_: market_,
-  product_card_template_: product_card_template_,
-  do_per_elements_: do_per_elements_,
-  content_blocks_: content_blocks_
-}) {
-  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.For), {
-    get each() {
-      return [...displays_by_key_().keys()];
-    },
-    children: (product_id, index) => {
-      const owner = $5vyXB$solidjs.getOwner();
-      const possible_content_block = $5vyXB$solidjs.createMemo(() => content_blocks_?.()?.()?.[index()]);
-      const display_accessor = $5vyXB$solidjs.createMemo(prev => {
-        const new_display = displays_by_key_().get(product_id);
-        if (prev && $a73063cc642f3e5f$var$deep_equal(prev, new_display))
-          // If displays are identical, they haven't changed due to merchant/market changing OR we made a new query and the displays are the same. Return the old display (same object reference) to avoid re-rendering.
-          // This doesn't work if people mutate the displays from within the template but we hope they don't
-          // (We can't know if the display changing is due to merchant/market changing or a new query otherwise and don't want to run into https://gitlab.com/depict-ai/depict.ai/-/merge_requests/6890/diffs)
-          return prev;
-        return new_display;
-      });
-      const [product_card_resource] = $5vyXB$solidjs.createResource(() => [merchant_(), market_(), display_accessor()],
-      // re-render when the reference to the display object changes or the merchant or market changes
-      // (We don't want to re-render if nothing has changed)
-      ([merchant, market, display]) => {
-        // It's easy for merchants to accidentally mutate the display or some sub-object thereof
-        // We had a case on singular where they popped an image url and due to use caching after some time there was no image
-        // Attempt cloning the displays if possible (99.9% of the cases probably) and if not, just use the original display
-        try {
-          display = structuredClone(display);
-        } catch (e) {
-          if (!$a73063cc642f3e5f$var$printedCloneError) {
-            $a73063cc642f3e5f$var$printedCloneError = true;
-            $5vyXB$depictaiutilishared.dlog("Can't clone display", display, " (uncloneable objects in it), make sure you don't mutate it in the template since we cache.", e);
-          }
-        }
-        return product_card_template_(display, {
-          set_on_index_change: fn => $5vyXB$solidjs.runWithOwner(owner, () => $5vyXB$solidjs.createEffect(() => fn(index()))),
-          merchant: merchant,
-          market: market // recommendation_grid can provide a sneaky undefined here just FYI
-        });
-      });
-
-      const node_accessor = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(product_card_resource);
-      $5vyXB$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
-          for (let i = 0; i < $a73063cc642f3e5f$var$result_ids.length; i++) {
-            const id = $a73063cc642f3e5f$var$result_ids[i];
-            const value = display[id];
-            if (value) Object.assign(element.dataset, $5vyXB$depictaiutilishared.camelCasifyObject({
-              [id]: value
-            }));
-          }
-        }
-        do_per_elements_?.(elements, index);
-      });
-      return [
-      // Show content block before product card, so it's *at* that index
-      possible_content_block, product_card_resource]; // https://github.com/solidjs/solid/releases/tag/v1.7.0
-    }
-  });
+function $1ab22f2cd39b3061$var$decode_array(encoded_array) {
+  const is_nested = encoded_array.includes($1ab22f2cd39b3061$var$array_item_delimiter);
+  if (is_nested) return encoded_array.split($1ab22f2cd39b3061$var$array_item_delimiter).filter(s => s !== "") // Remove empty segments, caused by trailing delimiter
+  .map($1ab22f2cd39b3061$var$decode_array);
+  return encoded_array.split($1ab22f2cd39b3061$var$string_item_delimiter).filter(s => s !== "") // Remove empty segments, caused by trailing delimiter in the single item special case
+  .map(item => item === $1ab22f2cd39b3061$var$empty_item_replacement ? "" : item);
 }
-// source: https://medium.com/@pancemarko/deep-equality-in-javascript-determining-if-two-objects-are-equal-bf98cf47e934
-function $a73063cc642f3e5f$var$deep_equal(obj1, obj2) {
-  if (obj1 === obj2) return true;
-  if (Array.isArray(obj1) && Array.isArray(obj2)) {
-    if (obj1.length !== obj2.length) return false;
-    return obj1.every((elem, index) => {
-      return $a73063cc642f3e5f$var$deep_equal(elem, obj2[index]);
-    });
+function $1ab22f2cd39b3061$var$encode_filter_data(op, data) {
+  if (data === "true")
+    // boolean encoding
+    return "1";
+  if (data === "false")
+    // boolean encoding
+    return "0";
+  const data_is_array = Array.isArray(data);
+  if (op === "inrange" && data_is_array && data.every(item => typeof item === "number"))
+    // numeric range filter encoding
+    return data.join($1ab22f2cd39b3061$var$range_delimiter);
+  if (data_is_array && $1ab22f2cd39b3061$var$array_is_serializable(data)) {
+    const encoded_data = $1ab22f2cd39b3061$var$encode_array(data);
+    if (!encoded_data.includes($1ab22f2cd39b3061$var$array_item_delimiter) && !encoded_data.includes($1ab22f2cd39b3061$var$string_item_delimiter))
+      // A string[] with only one item will encode without delimiters, which is indistinguishable from a plain string during decoding
+      // In that case we add a delimiter suffix at the end
+      return encoded_data + $1ab22f2cd39b3061$var$string_item_delimiter;
+    return encoded_data;
   }
-  if (typeof obj1 === "object" && typeof obj2 === "object" && obj1 !== null && obj2 !== null) {
-    if (Array.isArray(obj1) || Array.isArray(obj2)) return false;
-    const keys1 = Object.keys(obj1);
-    const keys2 = Object.keys(obj2);
-    if (keys1.length !== keys2.length || !keys1.every(key => keys2.includes(key))) return false;
-    for (const key in obj1) {
-      if ($a73063cc642f3e5f$var$result_ids.includes(key)) continue; // ignore keys changing with every request
-      const isEqual = $a73063cc642f3e5f$var$deep_equal(obj1[key], obj2[key]);
-      if (!isEqual) return false;
-    }
-    return true;
+  // Fallback encoding
+  return $5vyXB$depictaiutilishared.base64_encode_unicode(JSON.stringify(data));
+}
+function $1ab22f2cd39b3061$var$decode_filter_data(op, encoded_data) {
+  if (encoded_data === "1") return "true";
+  if (encoded_data === "0") return "false";
+  if (op === "inrange" && encoded_data.includes($1ab22f2cd39b3061$var$range_delimiter)) return encoded_data.split($1ab22f2cd39b3061$var$range_delimiter).map(x => parseFloat(x));
+  if (encoded_data.includes($1ab22f2cd39b3061$var$string_item_delimiter) || encoded_data.includes($1ab22f2cd39b3061$var$array_item_delimiter)) return $1ab22f2cd39b3061$var$decode_array(encoded_data);
+  try {
+    return JSON.parse($5vyXB$depictaiutilishared.base64_decode_unicode(encoded_data));
+  } catch (e) {
+    $5vyXB$depictaiutilishared.dlog("Failed to fallback parse filter data", op, encoded_data, e);
   }
-  return false;
+  return null;
 }
-
-// Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
-class $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 extends Error {}
-class $7dd1edb2ee2b43ad$export$aa14a9f43128f61f extends $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 {
-  constructor(templateError) {
-    super("Uncaught error in product card template", {
-      cause: templateError
-    });
+function $1ab22f2cd39b3061$export$58aa3f171519b6d7(filters, search_params, filter_query_param_prefix) {
+  for (const filter of filters) {
+    const {
+      field: field,
+      op: op,
+      data: data
+    } = filter;
+    const encoded_data = $1ab22f2cd39b3061$var$encode_filter_data(op, data);
+    search_params.set(filter_query_param_prefix + field + $1ab22f2cd39b3061$var$op_to_token(op), encoded_data);
   }
 }
-const $edafe91daf3091d7$var$_tmpl$ = ["<div", ' class="', '"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
-function $edafe91daf3091d7$export$b69d0d92862de18b(props) {
-  return $5vyXB$solidjs.ErrorBoundary({
-    fallback(err, retry) {
-      const {
-        message_: message_,
-        severity_: severity_
-      } = props;
-      let message = message_;
-      if (err instanceof (0, $7dd1edb2ee2b43ad$export$aa14a9f43128f61f)) {
-        console.error(err.cause);
-        message = `${message}: ${err.message}`;
-      } else $5vyXB$depictaiutilishared.report([err, message_], severity_);
-      return $5vyXB$solidjsweb.ssr($edafe91daf3091d7$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrClassList(Object.fromEntries(props.class_list_?.map(c => [c, true]) || [])), $5vyXB$solidjsweb.escape(message), $5vyXB$solidjsweb.escape(props.on_error_?.(retry)));
-    },
-    get children() {
-      return props.children;
+function $1ab22f2cd39b3061$export$f934fa24c3a86811(search_params, filter_query_param_prefix) {
+  const found_filters = [];
+  for (const key of search_params.keys()) {
+    // Allow for backwards compatibility with the old filter query param prefix
+    let chosen_prefix = filter_query_param_prefix;
+    if (!key.startsWith(chosen_prefix)) {
+      chosen_prefix = $1ab22f2cd39b3061$var$legacy_filter_prefix;
+      if (!key.startsWith(chosen_prefix)) continue;
     }
-  });
+    const encoded_data = search_params.get(key);
+    if (!encoded_data) continue;
+    const [op, token] = Object.entries($1ab22f2cd39b3061$var$operator_map).find(([, token]) => key.endsWith(token)) || [$1ab22f2cd39b3061$var$fallback_operator, $1ab22f2cd39b3061$var$fallback_token];
+    const data = $1ab22f2cd39b3061$var$decode_filter_data(op, encoded_data);
+    if (!data) continue;
+    const field = key.slice(chosen_prefix.length, token ? -token.length : undefined);
+    found_filters.push({
+      field: field,
+      op: op,
+      data: data
+    });
+  }
+  return found_filters;
 }
-const $f48d0fbb00835aaa$var$_tmpl$ = ["<div", ' class="', '">', "</div>"],
-  $f48d0fbb00835aaa$var$_tmpl$2 = ["<style", ' type="text/css">', "</style>"];
-function $f48d0fbb00835aaa$export$d21e32dfedac04be(props) {
-  const container_class = "x" + $5vyXB$solidjs.createUniqueId();
-  const container_element_ = $5vyXB$solidjsweb.ssrElement("div", $5vyXB$solidjsweb.mergeProps(() => props.element_attributes, {
-    classList: {
-      [container_class]: true
-    }
-  }), () => $5vyXB$solidjsweb.escape(props.children), true); // Don't want this in the error boundary below, it should only be for the actual layouting
-  return $5vyXB$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
-    get message_() {
-      return "Failed calculating " + props.layout + " layout";
-    },
-    severity_: "error",
-    get children() {
-      return $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element_, false, container_class);
+function $1ab22f2cd39b3061$export$62acb285a7579555(sorting, search_params, sorting_query_param) {
+  if (!sorting) return;
+  const {
+    field: field,
+    order: order
+  } = sorting;
+  const ascending = order === "asc";
+  search_params.set(sorting_query_param, field + (ascending ? $1ab22f2cd39b3061$var$ascending_token : $1ab22f2cd39b3061$var$descending_token));
+}
+function $1ab22f2cd39b3061$export$766e9676e74997d3(search_params, sorting_query_param_) {
+  const encoded_sorting = search_params.get(sorting_query_param_);
+  if (!encoded_sorting) return;
+  if (encoded_sorting.endsWith($1ab22f2cd39b3061$var$ascending_token)) return {
+    field: encoded_sorting.slice(0, -$1ab22f2cd39b3061$var$ascending_token.length),
+    order: "asc"
+  };
+  if (encoded_sorting.endsWith($1ab22f2cd39b3061$var$descending_token)) return {
+    field: encoded_sorting.slice(0, -$1ab22f2cd39b3061$var$descending_token.length),
+    order: "desc"
+  };
+  $5vyXB$depictaiutilishared.dlog("Invalid sorting query param value", encoded_sorting);
+  return;
+}
+function $1ab22f2cd39b3061$export$916e6850778505f6(search_params, filter_query_param_prefix, sorting_query_param) {
+  // We'll be modifying the URLSearchParams object, so we need to make a copy of the keys first
+  const keys = [...search_params.keys()];
+  for (const key of keys) if (key.startsWith(filter_query_param_prefix) || key === sorting_query_param || key.startsWith($1ab22f2cd39b3061$var$legacy_filter_prefix)) search_params.delete(key);
+}
+const $1ab22f2cd39b3061$export$cf5feb2102aec7f2 = "went_sideways_clear_filters";
+function $1ab22f2cd39b3061$export$43cd1e747fecd42e({
+  to_url_: to_url_,
+  set_clearing_flag_: set_clearing_flag_,
+  from_search_params_ = new URLSearchParams(location.search),
+  sorting_query_param_: sorting_query_param_,
+  filter_query_param_prefix_: filter_query_param_prefix_
+}) {
+  if (!to_url_) return to_url_;
+  const was_url_object = to_url_ instanceof URL;
+  const url_object = was_url_object ? to_url_ : new URL(to_url_, location.origin);
+  const {
+    searchParams: searchParams
+  } = url_object;
+  if (set_clearing_flag_) searchParams.set($1ab22f2cd39b3061$export$cf5feb2102aec7f2, "true");
+  if (from_search_params_.has(sorting_query_param_)) searchParams.set(sorting_query_param_, from_search_params_.get(sorting_query_param_));
+  for (const key of from_search_params_.keys()) if (key.startsWith(filter_query_param_prefix_)) searchParams.set(key, from_search_params_.get(key));
+  if (was_url_object) return url_object;
+  return url_object.href;
+}
+const $93304d59a9747aa6$var$_tmpl$ = ["<div", ' style="', '"', "></div>"];
+function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
+  return $5vyXB$solidjsweb.ssr($93304d59a9747aa6$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrStyle(`position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`), $5vyXB$solidjsweb.ssrAttribute("class", $5vyXB$solidjsweb.escape(props.class, true), false));
+}
+function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
+  const [size, setSize] = $5vyXB$solidjs.createSignal(0);
+  const resizeObserver = new ResizeObserver($5vyXB$depictaiutilishared.catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const {
+        width: width
+      } = records[j].contentRect;
+      if (!width) continue;
+      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
+      const new_size = width * 1.05 * ((0, $5vyXB$depictaiutilishared.is_safari) ? 4 / 3 : 1);
+      setSize(Math.round(new_size));
     }
+  }));
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
+  const disconnect = (0, $5vyXB$depictaiutilishared.observer).onexists(whatToWatch, ({
+    element: element
+  }) => requestAnimationFrame($5vyXB$depictaiutilishared.catchify(() => resizeObserver.observe(element))));
+  $5vyXB$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
   });
+  return size;
 }
-function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, insert_after_container = false, container_class) {
-  if (!container_class) {
-    // only try to add if it wasn't provided, so that we have a code path without classList when doing SSR
-    container_class = $5vyXB$depictaiutilishared.make_random_classname();
-    container_element.classList.add(container_class);
-  }
-  // Copy of Layout from utilishared but using solid-js signals instead of async iterable IPNS
-  const show_all_rows = $5vyXB$solidjs.createMemo(() => props.rows === "all");
-  const rows_or_empty_object = $5vyXB$solidjs.createMemo(() => show_all_rows() ? {} : props.rows);
-  const view_more_button_elements = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52($5vyXB$solidjs.createMemo(() => rows_or_empty_object().button));
-  const view_less_button_elements = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52($5vyXB$solidjs.createMemo(() => rows_or_empty_object().view_less_button));
-  const have_a_view_more_button = $5vyXB$solidjs.createMemo(() => {
-    const button = view_more_button_elements();
-    return !(!button || Array.isArray(button) && !button.length);
+const $19950faaac026e09$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
+function $19950faaac026e09$export$6e5611bc7e57e477(props) {
+  // Enable reactive props
+  const otherOptions = $5vyXB$solidjs.createMemo(() => {
+    const cloned_props = {
+      ...props
+    };
+    delete cloned_props.resolutions;
+    // @ts-ignore
+    delete cloned_props.size;
+    // @ts-ignore
+    delete cloned_props.src;
+    return cloned_props;
   });
-  const have_a_view_less_button = $5vyXB$solidjs.createMemo(() => {
-    const button = view_less_button_elements();
-    return !(!button || Array.isArray(button) && !button.length);
+  const src_options = $5vyXB$solidjs.createMemo(() => {
+    const src = new URL(props.src, location.origin);
+    const fallback_src = $19950faaac026e09$var$generateImageUrl(src, 400);
+    const srcset = $19950faaac026e09$var$make_srcset(src, props.resolutions || [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096]);
+    return {
+      src: fallback_src,
+      srcset: srcset
+    };
   });
-  const [get_styling, set_styling] = $5vyXB$solidjs.createSignal();
-  const selector_beginning = `.depict .${container_class}>`; // class so ppl can have id if needed
-  const [get_children_count, set_children_count] = $5vyXB$solidjs.createSignal(0);
-  const update_children_count = () => (0, $5vyXB$solidjsweb.isServer) ? 20 : set_children_count(container_element.children.length);
-  const col_styling = $5vyXB$solidjs.createMemo(() => $5vyXB$depictaiutilishared.n_col_styling_with_dist(selector_beginning, props.grid_spacing, props.cols_at_size, props.layout, props.override_vertical_spacing));
-  const default_currently_visible_signal = $5vyXB$solidjs.createSignal($5vyXB$solidjs.untrack(() => rows_or_empty_object().start_rows ?? 1)); // Keep this signal here, so it doesn't change when rows_or_empty_object and I think it's to be expected that the "internal default signal" stays the same
-  const rows_visible_signal = $5vyXB$solidjs.createMemo(() => rows_or_empty_object().currently_visible || default_currently_visible_signal);
-  const get_rows_visible = $5vyXB$solidjs.createMemo(() => rows_visible_signal()[0]());
-  const set_rows_visible = $5vyXB$solidjs.createMemo(() => rows_visible_signal()[1]);
-  const view_more_button_class = "m" + $5vyXB$solidjs.createUniqueId();
-  const view_less_button_class = "l" + $5vyXB$solidjs.createUniqueId(); //  https://github.com/solidjs/solid-docs/issues/263#issuecomment-1622388079
-  const view_more_button_container = $5vyXB$solidjs.createMemo(() => have_a_view_more_button() && $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `load-more-container ${$5vyXB$solidjsweb.escape(view_more_button_class, true)}`, $5vyXB$solidjsweb.escape(rows_or_empty_object().button)));
-  // We need to have duplicate buttons because which ones is shown depends on the number of rows visible and therefore on the viewport size and therefore on the css media queries
-  const view_less_button_container = $5vyXB$solidjs.createMemo(() => have_a_view_less_button() && $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `load-less-container ${$5vyXB$solidjsweb.escape(view_less_button_class, true)}`, $5vyXB$solidjsweb.escape(rows_or_empty_object().view_less_button)));
-  const [force_style_update, set_force_style_update] = $5vyXB$solidjs.createSignal("");
-  $5vyXB$solidjs.createComputed(() => {
-    // Make sure we don't have more rows visible than max_rows (this could happen by max_rows being decreased)
-    const rows_visible = get_rows_visible();
-    const max_rows = rows_or_empty_object().max_rows;
-    if (!isNaN(max_rows) && max_rows >= 0 && rows_visible > max_rows) set_rows_visible()(max_rows);
+  // Work around https://github.com/solidjs/solid/issues/1828
+  const img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
+  const [hasSetSize, setHasSetSize] = $5vyXB$solidjs.createSignal(false);
+  const [hasDecoded, setHasDecoded] = $5vyXB$solidjs.createSignal(false);
+  const sizePX = $5vyXB$solidjs.createMemo(() => `${props.size()}px`); // props.size could be a getter that expects a cleanup so get it in this memo instead of where we set img.sizes
+  const listingContext = $84798aaa863a4909$export$8d0c4fdbb05a2f2e();
+  // Batch idle callbacks so that MutationObserver can batch the resulting mutations better, so we don't lose tons of CPU time to MutationObservers doing lots of things for each image
+  // Happened on singular, they have some weird observer (+we also have one but ours is at least 3x more efficient)
+  const executeWhenIdleBatched = fn => {
+    if (typeof requestIdleCallback !== "function") return setTimeout(fn); // Old browsers don't get optimisation
+    const existingStack = listingContext?.[$19950faaac026e09$var$onIdleFunctionsSymbol];
+    if (existingStack) return existingStack.add(fn);
+    const newStack = new Set([fn]);
+    if (listingContext) listingContext[$19950faaac026e09$var$onIdleFunctionsSymbol] = newStack;
+    const processStackWhenIdle = () => requestIdleCallback(deadline => {
+      const start = performance.now();
+      const thirdDeadlineTime = deadline.timeRemaining() / 3; // observers coming after this take up 2-3x the time so don't use all of it
+      for (const fn of newStack) {
+        newStack.delete(fn);
+        fn();
+        const timeTaken = performance.now() - start;
+        if ((!deadline.timeRemaining() || timeTaken > thirdDeadlineTime) && newStack.size) {
+          // There's still work to be done but no time, so schedule another idle callback
+          processStackWhenIdle();
+          return;
+        }
+      }
+      // Stack is empty
+      if (listingContext) delete listingContext[$19950faaac026e09$var$onIdleFunctionsSymbol];
+    }, {
+      timeout: 15000
+    } // long timeout, better to not have images than to freeze the browser. But also we don't want to confuse user why no iamges are loading
+    );
+
+    processStackWhenIdle();
+  };
+  let sizeSetFastPath = false;
+  let hasDecodedFastPath = false;
+  let timeoutSet = false;
+  let gotCleanedUp = false;
+  $5vyXB$solidjs.onCleanup(() => gotCleanedUp = true);
+  $5vyXB$solidjsweb.spread(img, $5vyXB$solidjs.mergeProps(otherOptions), false, true);
+  $5vyXB$solidjs.createEffect(() => {
+    if (!props.size()) return; // wait until we have a size
+    if (timeoutSet) return;
+    const handler = $5vyXB$depictaiutilishared.catchify(() => {
+      if (gotCleanedUp) return;
+      img.sizes = sizePX(); // use latest available value of props.size
+      if (!sizeSetFastPath) {
+        setHasSetSize(true);
+        sizeSetFastPath = true;
+      }
+      timeoutSet = false;
+    });
+    // Throttle the updating of sizes to avoid unnecessary image re-fetches during resize
+    // And also because we first set src after sizes has been set, wait with loading and decoding images until browser is idle
+    // This greatly improves performance when loading (more) products
+    // See https://depictaiworkspace.slack.com/archives/C05NJ0K3WRL/p1698220617663139
+    executeWhenIdleBatched(handler);
+    timeoutSet = true;
   });
-  $5vyXB$solidjs.createEffect(() => set_force_style_update(" ")); // force style update after hydration due to https://discord.com/channels/722131463138705510/722167424186843267/1151544212517552168
-  $5vyXB$solidjs.createRenderEffect(() => {
-    // Be careful to only read show_all_rows in here (ofc doesn't apply to nested effects)
-    if (show_all_rows()) {
-      // no view more functionality requested
-      set_styling(() => col_styling);
+  $5vyXB$solidjs.createEffect(() => {
+    if (!props.size() || !hasSetSize()) return; // If size isn't known or set, don't assign src yet since it would cause the most low res image to load
+    Object.assign(img, src_options());
+    // Add to DOM once decoded to not require/block any paints before image has completed loading and avoid showing broken image symbol
+    // We can do this because there has to be a container around us giving us a size
+    // No need to listen if we're already in the DOM
+    if (hasDecodedFastPath) return;
+    if (props.loading === "lazy") {
+      // For lazy loading there's no decoding to wait for as it only occurs when the image is visible
+      // Make sure src is set before we put the image into the DOM though so no broken image symbol is shown
+      setHasDecoded(true);
+      hasDecodedFastPath = true;
       return;
     }
-    update_children_count();
-    if (!(0, $5vyXB$solidjsweb.isServer)) {
-      const mutation_observer = new MutationObserver($5vyXB$depictaiutilishared.catchify(update_children_count));
-      mutation_observer.observe(container_element, {
-        childList: true
-      });
-      $5vyXB$solidjs.onCleanup(() => mutation_observer.disconnect());
-    }
-    set_styling(
-    // this is needed because solid will think that the memo-accessor is a setter function otherwise
-    () => $5vyXB$solidjs.createMemo(() => {
-      const {
-        rows_per_click: rows_per_click,
-        max_rows = -1,
-        start_rows: start_rows
-      } = rows_or_empty_object();
-      const rows_visible = get_rows_visible();
-      const children_count = get_children_count();
-      return force_style_update() + col_styling() + props.cols_at_size.map(options => {
-        const [recs_per_row, min, max] = options;
-        let should_hide_view_more_button;
-        let visible_recs;
-        if (props.disable_partial_rows) {
-          visible_recs = $5vyXB$depictaiutilishared.layout_get_visible_recs_without_partial_rows(rows_visible, children_count, options);
-          const visible_recs_next_show_more = $5vyXB$depictaiutilishared.layout_get_visible_recs_without_partial_rows(rows_visible + (rows_per_click || 0),
-          // Should this really be zero when we default rows_per_click to 1?
-          children_count, options);
-          should_hide_view_more_button = visible_recs === visible_recs_next_show_more;
-        } else {
-          visible_recs = $5vyXB$depictaiutilishared.layout_get_total_rec_amount_for_row(rows_visible, options);
-          should_hide_view_more_button = visible_recs >= children_count;
-        }
-        const should_hide_button_final = should_hide_view_more_button || max_rows !== -1 && rows_visible >= max_rows;
-        // I don't really understand the logic for when the view more button gets hidden so IDK if below is correct, but it works how it should for now
-        const should_hide_view_less_button = !should_hide_view_more_button || start_rows == undefined || rows_visible <= start_rows || children_count <= recs_per_row * start_rows;
-        return `${$5vyXB$depictaiutilishared.layout_media_query_header(min, max)}{${selector_beginning}:nth-child(n+${visible_recs + 1}){display:none}${props.layout == "slider" ? `${selector_beginning}:nth-child(n+${visible_recs}){margin-right:0}` : ""}${should_hide_button_final ? `.depict .${view_more_button_class}{display:none!important}` : ``}${should_hide_view_less_button ? `.depict .${view_less_button_class}{display:none!important}` : ``}}`;
-      }).join("");
-    }));
+    img.decode().catch(e => $5vyXB$depictaiutilishared.dwarn("Failed to decode image", e, img)) // Display the image also if loading failed so webdev can debug and doesn't get "no image"
+    .then(async () => {
+      // Also wait with inserting image (i.e. paint) until browser is idle
+      await new Promise(r => executeWhenIdleBatched(r));
+      if (gotCleanedUp) return;
+      setHasDecoded(true);
+      hasDecodedFastPath = true;
+    });
   });
-  const style_element = $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), get_styling); // need to create this after set_styling has been called or else there will be no styling in the SSR'd output
-  if (insert_after_container) container_element.after(style_element);
-  return [container_element, view_more_button_container(), view_less_button_container(), style_element];
-}
-const $363ce4d1d71041aa$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"];
-function $363ce4d1d71041aa$export$d41d19e89346fa2({
-  recommendations_resource_: recommendations_resource_,
-  product_card_template_: product_card_template_,
-  layout_options_: layout_options_,
-  merchant_: merchant_,
-  market_: market_,
-  title_: title_
-}) {
-  const is_showing_something = $5vyXB$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
-  const title = $5vyXB$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
-  const num_placeholders_ = () => 20;
-  const slider = [$5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
-    get when() {
-      return title();
-    },
-    get children() {
-      return $5vyXB$solidjsweb.ssr($363ce4d1d71041aa$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(title()));
-    }
-  }), $5vyXB$solidjsweb.createComponent((0, $a0e53f99354809d9$export$6649caad96ef8870), {
-    arrow_height_: 25,
-    arrow_width_: 12.5,
-    disable_fading_: true,
-    slider_ref_: slider => {
-      const {
-        insert_here: insert_here
-      } = slider;
-      const Layout = props => $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, insert_here, true);
-      // Do like this, so we don't have to call mergeProps ourselves
-      $5vyXB$solidjsweb.createComponent(Layout, $5vyXB$solidjsweb.mergeProps({
-        rows: "all",
-        layout: "slider"
-      }, layout_options_));
-      $5vyXB$depictaiutilishared.slider_fractional_factory(0, 0.75).constructor_plugin.call(slider, {}); // enable fractional scrolling
-      insert_here.before($fc23d7668ae0011d$export$a2cc176055f8f08());
-    },
-    get children() {
-      return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Suspense), {
-        get fallback() {
-          return $0caf87eaa19079da$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_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($5vyXB$solidjs.createMemo(() => recommendations_resource_() || []));
-            return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
-              displays_by_key_: displays_by_key_,
-              merchant_: merchant_,
-              market_: market_,
-              product_card_template_: product_card_template_
-            });
-          })();
-        }
-      });
-    }
-  })];
   return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
-      return is_showing_something();
+      return hasDecoded();
     },
-    children: slider
+    children: img
   });
 }
-function $95837413165cc2df$export$23fca46f3143581f(component, error_message) {
-  const component_in_error_boundary = do_with_elements => {
-    const error_boundary_wrapped = $edafe91daf3091d7$export$b69d0d92862de18b({
-      severity_: "error",
-      message_: error_message,
-      get children() {
-        const elements = component();
-        do_with_elements?.(elements);
-        return elements;
-      }
-    });
-    // This might return an accessor, in that case we need to "unwrap" it since our SDK consumers expect HTML elements or arrays thereof
-    if (typeof error_boundary_wrapped === "function")
-      // @ts-ignore
-      return error_boundary_wrapped();
-    // On the server it returns a string, so we just return that
-    return error_boundary_wrapped;
-  };
+function $19950faaac026e09$var$make_srcset(url, resolutions) {
+  return resolutions.map(width => `${$19950faaac026e09$var$generateImageUrl(url, width)} ${width}w`).join(", ");
+}
+function $19950faaac026e09$var$generateImageUrl(url, width) {
+  // This function is quite slow, we maybe could do string concat with encodeURIComponent instead if shopify handles double width params well?
+  url.searchParams.set("width", width);
+  return url.href;
+}
+const $a33065cfed827fc0$var$backupSizeSignal = /*@__PURE__*/$5vyXB$solidjs.createSignal();
+const $a33065cfed827fc0$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
+function $a33065cfed827fc0$export$e4b984597b71e989(props) {
+  const context = $84798aaa863a4909$export$8d0c4fdbb05a2f2e();
+  if (context && !context[$a33065cfed827fc0$export$d7b7ab832c20e2f4])
+    // create a signal that's the same for all items in this listing
+    context[$a33065cfed827fc0$export$d7b7ab832c20e2f4] = $5vyXB$solidjs.createSignal();
+  const [currentImageSize, setCurrentImageSize] = context?.[$a33065cfed827fc0$export$d7b7ab832c20e2f4] || $a33065cfed827fc0$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
+  const container = $5vyXB$solidjsweb.createComponent((0, $93304d59a9747aa6$export$94026ee33dbabc26), {
+    get aspectRatio() {
+      return props.aspectRatio;
+    },
+    get ["class"]() {
+      return props.class;
+    }
+  });
   const owner = $5vyXB$solidjs.getOwner();
-  if (owner == null) return $5vyXB$solidjs.createRoot(dispose => {
-    // if we're not already run in a root, create a root and automatically dispose it when the first returned element is removed from the DOM
-    return component_in_error_boundary(elements => {
-      const have_multiple = Array.isArray(elements);
-      if (have_multiple ? !elements?.length : !elements) return;
-      (0, $5vyXB$depictaiutilishared.observer).onremoved(have_multiple ? elements[0] : elements, ({
-        element: element
-      }) => {
-        if (document.documentElement.contains(element)) return; // If element has instantly been re-inserted, don't dispose
-        // See https://depictaiworkspace.slack.com/archives/C050GHEPBTR/p1695809102791259?thread_ts=1695106805.459729&cid=C050GHEPBTR
-        dispose();
-      });
-    });
-  });else
-    // we're already in a root so cleanups are handled
-    return component_in_error_boundary();
+  let createdSizeAccessor = false;
+  let wasCleanedUp = false;
+  $5vyXB$solidjs.createEffect(() => {
+    if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
+    // ensure we always have a size accessor
+    // what this whole thing does is set the sizes attribute to the actual size of one of the existing image containers, therefore the value doesn't have to manually be specified
+    createdSizeAccessor = true;
+    setCurrentImageSize(() => $5vyXB$solidjs.runWithOwner(owner, () => $19950faaac026e09$export$e6fffe67d4cdd848(container)));
+  });
+  $5vyXB$solidjs.onCleanup(() => {
+    wasCleanedUp = true; // important to set this before the function call below and always, so the dead effects don't create dead size accessors
+    if (!createdSizeAccessor) return;
+    $5vyXB$depictaiutilishared.queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
+  });
+
+  $5vyXB$solidjsweb.insert(container, $5vyXB$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), {
+    style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
+    get size() {
+      return $5vyXB$solidjs.createMemo(() => currentImageSize()?.() || 0);
+    },
+    get src() {
+      return props.src;
+    },
+    get alt() {
+      return props.alt;
+    }
+  }));
+  return container;
 }
-const $72f96c4782db0b1b$var$_tmpl$ = ["<div", ' class="depict recommendations">', "</div>"];
-function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
-  return $95837413165cc2df$export$23fca46f3143581f(() => {
-    const grid_spacing_override = $5vyXB$solidjs.createMemo(() => {
-      const {
-        grid_spacing: grid_spacing
-      } = props; // can be reactive
-      return typeof grid_spacing === "string" ? {
-        grid_spacing: grid_spacing
-      } : {
-        override_vertical_spacing: grid_spacing.vertical,
-        grid_spacing: grid_spacing.horizontal
-      };
-    });
-    const [recommendations_resource_] = $5vyXB$solidjs.createResource(() => props.recommendations, recs => recs);
-    return $5vyXB$solidjsweb.ssr($72f96c4782db0b1b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
-      get children() {
-        return $363ce4d1d71041aa$export$d41d19e89346fa2({
-          product_card_template_: (...args) => props.product_card_template(...args),
-          recommendations_resource_: recommendations_resource_,
-          market_: () => props.market,
-          merchant_: () => props.merchant,
-          title_: () => props.title,
-          layout_options_: $5vyXB$solidjs.createMemo(() => ({
-            cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
-            ...grid_spacing_override()
-          }))
-        });
-      }
-    })));
-  }, "RecommendationSlider failed");
+
+/** @jsxImportSource solid-js */
+
+function $f13855d1b951b24a$export$ebdc3711f7e02ccd(what_to_watch) {
+  const [width, setWidth] = $5vyXB$solidjs.createSignal();
+  const resizeObserver = new ResizeObserver($5vyXB$depictaiutilishared.catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const width = records[j].borderBoxSize?.[0]?.inlineSize ?? what_to_watch.getBoundingClientRect().width;
+      setWidth(width);
+    }
+  }));
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
+  const disconnect = (0, $5vyXB$depictaiutilishared.observer).onexists(what_to_watch, ({
+    element: element
+  }) => requestAnimationFrame($5vyXB$depictaiutilishared.catchify(() => {
+    const current_size = what_to_watch.getBoundingClientRect().width;
+    if (current_size)
+      // If element has size, set signal to that. ResizeObserver only triggers when the content is visible in some cases, but it might already have a size. This reduces size filter expanding animation jank in chrome.
+      setWidth(current_size);
+    resizeObserver.observe(element);
+  })));
+  $5vyXB$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
+  return width;
 }
-const $b8e79813f4f7ebe4$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"],
-  $b8e79813f4f7ebe4$var$_tmpl$2 = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
-function $b8e79813f4f7ebe4$export$7da560f849543dff({
+const $363ce4d1d71041aa$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"];
+function $363ce4d1d71041aa$export$d41d19e89346fa2({
   recommendations_resource_: recommendations_resource_,
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
-  merchant_: merchant_,
-  market_: market_,
-  rows_object_: rows_object_,
   title_: title_
 }) {
   const is_showing_something = $5vyXB$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
   const title = $5vyXB$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
   const num_placeholders_ = () => 20;
-  const elements = [$5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+  const slider = [$5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
       return title();
     },
     get children() {
-      return $5vyXB$solidjsweb.ssr($b8e79813f4f7ebe4$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(title()));
+      return $5vyXB$solidjsweb.ssr($363ce4d1d71041aa$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(title()));
     }
-  }), $5vyXB$solidjsweb.ssr($b8e79813f4f7ebe4$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($fc23d7668ae0011d$export$a2cc176055f8f08()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $5vyXB$solidjsweb.mergeProps({
-    get rows() {
-      return rows_object_();
+  }), $5vyXB$solidjsweb.createComponent((0, $a0e53f99354809d9$export$6649caad96ef8870), {
+    arrow_height_: 25,
+    arrow_width_: 12.5,
+    disable_fading_: true,
+    slider_ref_: slider => {
+      const {
+        insert_here: insert_here
+      } = slider;
+      const Layout = props => $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, insert_here, true);
+      // Do like this, so we don't have to call mergeProps ourselves
+      $5vyXB$solidjsweb.createComponent(Layout, $5vyXB$solidjsweb.mergeProps({
+        rows: "all",
+        layout: "slider"
+      }, layout_options_));
+      $5vyXB$depictaiutilishared.slider_fractional_factory(0, 0.75).constructor_plugin.call(slider, {}); // enable fractional scrolling
+      insert_here.before($fc23d7668ae0011d$export$a2cc176055f8f08());
     },
-    layout: "grid",
-    element_attributes: {
-      class: "cards"
-    }
-  }, layout_options_, {
     get children() {
       return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Suspense), {
         get fallback() {
@@ -1108,44 +1902,23 @@ function $b8e79813f4f7ebe4$export$7da560f849543dff({
             const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($5vyXB$solidjs.createMemo(() => recommendations_resource_() || []));
             return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
               displays_by_key_: displays_by_key_,
-              merchant_: merchant_,
-              market_: market_,
               product_card_template_: product_card_template_
             });
           })();
         }
       });
     }
-  }))))];
+  })];
   return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
       return is_showing_something();
     },
-    children: elements
+    children: slider
   });
 }
-const $1f8dbf7e28b3eff2$var$_tmpl$ = ["<button", ' class="show-more major" type="button">', "</button>"],
-  $1f8dbf7e28b3eff2$var$_tmpl$2 = ["<div", ' class="depict plp recommendations">', "</div>"];
-function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
+const $72f96c4782db0b1b$var$_tmpl$ = ["<div", ' class="depict recommendations">', "</div>"];
+function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
   return $95837413165cc2df$export$23fca46f3143581f(() => {
-    const rows_object_ = $5vyXB$solidjs.createMemo(() => {
-      const {
-        view_more_button: view_more_button,
-        max_rows: max_rows
-      } = props;
-      if (!view_more_button) {
-        if (max_rows) return {
-          max_rows: max_rows
-        };
-        return "all";
-      }
-      return {
-        max_rows: max_rows,
-        start_rows: view_more_button.start_rows,
-        rows_per_click: view_more_button.rows_per_click ?? 2,
-        button: $5vyXB$solidjsweb.ssr($1f8dbf7e28b3eff2$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(view_more_button.text))
-      };
-    });
     const grid_spacing_override = $5vyXB$solidjs.createMemo(() => {
       const {
         grid_spacing: grid_spacing
@@ -1158,14 +1931,11 @@ function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
       };
     });
     const [recommendations_resource_] = $5vyXB$solidjs.createResource(() => props.recommendations, recs => recs);
-    return $5vyXB$solidjsweb.ssr($1f8dbf7e28b3eff2$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
+    return $5vyXB$solidjsweb.ssr($72f96c4782db0b1b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
       get children() {
-        return $b8e79813f4f7ebe4$export$7da560f849543dff({
-          rows_object_: rows_object_,
+        return $363ce4d1d71041aa$export$d41d19e89346fa2({
           product_card_template_: (...args) => props.product_card_template(...args),
           recommendations_resource_: recommendations_resource_,
-          market_: () => props.market,
-          merchant_: () => props.merchant,
           title_: () => props.title,
           layout_options_: $5vyXB$solidjs.createMemo(() => ({
             cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
@@ -1174,7 +1944,7 @@ function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
         });
       }
     })));
-  }, "RecommendationGrid failed");
+  }, "RecommendationSlider failed");
 }
 function $4b455f60dadde8b8$export$5bad61ecde080b1f(...params) {
   const {
@@ -1294,15 +2064,6 @@ function $d659702496cb72ea$export$a71e92cfbb498adc(props) {
     return $5vyXB$depictaiutilishared.standard_price_format(props.price_, price_formatting.places_after_comma_, price_formatting.decimal_places_delimiter_, price_formatting.thousands_delimiter_);
   });
 }
-const $c77c68e559a1506c$var$_tmpl$ = '<path d="M11.669 10.531l9.156-9.156a.78.78 0 0 0 .237-.569c0-.221-.079-.412-.237-.569A.8.8 0 0 0 20.24 0a.77.77 0 0 0-.569.237l-9.14 9.14-9.14-9.14A.79.79 0 0 0 .807 0a.77.77 0 0 0-.569.237A.78.78 0 0 0 0 .807a.77.77 0 0 0 .237.569l9.156 9.156-9.156 9.14c-.159.157-.237.349-.237.569s.079.412.237.569c.085.085.174.148.268.19a1.095 1.095 0 0 0 .316.048.894.894 0 0 0 .285-.048.84.84 0 0 0 .285-.19l9.139-9.14 9.14 9.14a.894.894 0 0 0 .268.19 1.049 1.049 0 0 0 .301.048.941.941 0 0 0 .301-.048.84.84 0 0 0 .285-.19.78.78 0 0 0 .237-.569c0-.221-.079-.412-.237-.569z"></path>';
-function $c77c68e559a1506c$export$3b621d86b1566b2(props = {}) {
-  return $5vyXB$solidjsweb.ssrElement("svg", $5vyXB$solidjsweb.mergeProps({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "21.064",
-    height: "21.047",
-    viewBox: "0 0 21.064 21.064"
-  }, props), () => $5vyXB$solidjsweb.ssr($c77c68e559a1506c$var$_tmpl$), true);
-}
 
 /**
  * Lower cases a string if possible. Mostly used to make the filter url values case-insensitive.
@@ -1313,7 +2074,7 @@ function $daa394359b026187$export$325f75597868c4f0(stuff) {
 }
 const $235a2771a44e28e9$var$_tmpl$ = ["<button", ' class="clear-all-filters minor">', "</button>"],
   $235a2771a44e28e9$var$_tmpl$2 = ["<div", ' class="inner"><span class="title"><!--$-->', "<!--/-->: </span><!--$-->", "<!--/--></div>"],
-  $235a2771a44e28e9$var$_tmpl$3 = ["<button", ' class="clear-filter major"><!--$-->', "<!--/--><span><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--> – <!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></span></button>"],
+  $235a2771a44e28e9$var$_tmpl$3 = ["<button", ' class="clear-filter major"><!--$-->', "<!--/--><span><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--> \u2013 <!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></span></button>"],
   $235a2771a44e28e9$var$_tmpl$4 = ["<button", ' class="clear-filter major"><!--$-->', "<!--/--><span>", "</span></button>"];
 function $235a2771a44e28e9$export$fecbb157621501bd({
   number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
@@ -2082,7 +2843,7 @@ function $5ea5a82e398f6f44$var$cut_text(segmented_text) {
   // identical split point, or split end before split start, can't do anything
   split_start_segment == split_end_segment && split_start_character >= split_end_character || split_start_segment > split_end_segment) return;
   const dots_segment = {
-    text_: " … ",
+    text_: " \u2026 ",
     highlighted_: false
   };
   const split_and_dotted_values = segmented_text.flatMap((segment, i) => {
@@ -2174,7 +2935,7 @@ function $5ea5a82e398f6f44$var$cut_start(cut_left_of_index, segmented_text) {
         if (character === "," || is_space)
           // if we cut at a comma or psace, we add a … at the beginning
           segmented_text.unshift({
-            text_: "… ",
+            text_: "\u2026 ",
             highlighted_: false
           });
         break outmost_loop;
@@ -3065,7 +3826,7 @@ function $b064919833b3e80b$export$53c59af873b303c9({
           get price_formatting_() {
             return price_formatting_();
           }
-        }), price_formatting_().post_, " – ", price_formatting_().pre_, $5vyXB$solidjsweb.createComponent((0, $d659702496cb72ea$export$a71e92cfbb498adc), {
+        }), price_formatting_().post_, " \u2013 ", price_formatting_().pre_, $5vyXB$solidjsweb.createComponent((0, $d659702496cb72ea$export$a71e92cfbb498adc), {
           get price_() {
             return selected_filter.data[1];
           },
@@ -3147,34 +3908,6 @@ function $8c939a05b87fbbbc$export$ab34afce88557c0e(props) {
   }));
   return is_open;
 }
-const $9fe9883b1d8ecccc$var$_tmpl$ = ["<span", ' class="', '" style="', '"></span>'];
-function $9fe9883b1d8ecccc$export$acb3eaade4b23afd(props) {
-  return $5vyXB$solidjsweb.ssr($9fe9883b1d8ecccc$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `depict-placeholder${$5vyXB$solidjsweb.escape(props.class, true) || ""}`, $5vyXB$solidjsweb.ssrStyle(props.style));
-}
-function $061ff5b4c3d36171$export$89c6019e4baa40b1(props) {
-  const style = $5vyXB$solidjs.createMemo(() => {
-    const {
-      style: style,
-      height: height,
-      width: width
-    } = props;
-    return {
-      ...(style || {}),
-      height: height ?? "1em",
-      ...(width && {
-        width: width
-      })
-    };
-  });
-  return $5vyXB$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
-    get style() {
-      return style();
-    },
-    get ["class"]() {
-      return props.class;
-    }
-  });
-}
 const $87d7574e1d89d69b$var$_tmpl$ = '<path d="M19.811 20.174l-6.234-6.809a7.96 7.96 0 0 0 .923-1.179c.274-.424.502-.865.687-1.323a8.04 8.04 0 0 0 .42-1.436 7.88 7.88 0 0 0 .144-1.507c0-.526-.051-1.042-.154-1.548-.096-.506-.243-.995-.441-1.466s-.441-.919-.728-1.343a8.28 8.28 0 0 0-.984-1.21 7.86 7.86 0 0 0-1.2-.984A7.56 7.56 0 0 0 10.89.651C10.418.453 9.929.302 9.423.2S8.401.046 7.875.046 6.833.097 6.327.2 5.332.453 4.86.651a7.56 7.56 0 0 0-1.354.718c-.431.287-.831.615-1.2.984a8.28 8.28 0 0 0-.984 1.21 7.73 7.73 0 0 0-.728 1.343c-.198.472-.349.96-.451 1.466A8.31 8.31 0 0 0 0 7.921a8.31 8.31 0 0 0 .144 1.548c.103.506.253.995.451 1.466a8.08 8.08 0 0 0 .728 1.354 7.86 7.86 0 0 0 .984 1.2 7.54 7.54 0 0 0 1.2.995c.431.287.882.53 1.354.728.472.191.96.338 1.466.441a8.31 8.31 0 0 0 1.548.144c.451 0 .896-.038 1.333-.113a7.83 7.83 0 0 0 1.282-.328 7.55 7.55 0 0 0 1.2-.533 8.08 8.08 0 0 0 1.107-.749l6.245 6.809a.45.45 0 0 0 .174.123.55.55 0 0 0 .205.041.61.61 0 0 0 .195-.031c.061-.021.116-.055.164-.102.109-.096.164-.219.164-.369.007-.144-.038-.267-.133-.369zM1.046 7.921c0-.937.178-1.818.533-2.646.362-.834.851-1.559 1.466-2.174.622-.615 1.347-1.101 2.174-1.456.827-.362 1.712-.543 2.656-.543s1.829.181 2.656.543c.827.355 1.548.841 2.164 1.456.622.615 1.111 1.34 1.466 2.174a6.52 6.52 0 0 1 .543 2.646c0 .943-.181 1.829-.543 2.656a6.89 6.89 0 0 1-1.466 2.174c-.615.615-1.336 1.104-2.164 1.466-.827.356-1.712.533-2.656.533s-1.829-.178-2.656-.533c-.827-.362-1.552-.851-2.174-1.466-.615-.622-1.104-1.347-1.466-2.174-.355-.827-.533-1.712-.533-2.656z"></path>';
 function $87d7574e1d89d69b$export$82eafebb825fc23f(props = {}) {
   return $5vyXB$solidjsweb.ssrElement("svg", $5vyXB$solidjsweb.mergeProps({
@@ -3633,152 +4366,35 @@ function $70482f04605572e2$var$modify_only_local_filter(local_filter_object, sel
       }
     }
   }
-  return modified_filter_object;
-}
-async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
-  const body = parent || (await (0, $5vyXB$depictaiutilishared.observer).wait_for_element("body"));
-  let dispose_and_remove;
-  const open_modal_ = (extra_options_for_modal = {}, on_dispose) => {
-    if (dispose_and_remove)
-      // modal is already open
-      return;
-    const modal_els = $5vyXB$solidjs.createRoot(dispose => {
-      let closing_animation;
-      let animation_started;
-      dispose_and_remove = () => {
-        const actually_close = () => {
-          dispose();
-          on_dispose?.();
-          modal_els.forEach(el => el.remove());
-        };
-        if (animation_started && +new Date() - animation_started > 1000)
-          // Animation broke, close it this time
-          actually_close();else if (!animation_started && closing_animation) {
-          animation_started = +new Date();
-          $5vyXB$depictaiutilishared.catchify(closing_animation)()?.then($5vyXB$depictaiutilishared.catchify(actually_close));
-        } else actually_close();
-      };
-      return search_modal({
-        ...modal_fn_opts,
-        ...extra_options_for_modal,
-        close_modal_: close_modal_,
-        open_modal_: open_modal_,
-        register_closing_animation_: animation => closing_animation = animation
-      });
-    });
-    body.append(...modal_els);
-  };
-  const close_modal_ = () => {
-    if (dispose_and_remove) {
-      // modal is open
-      const dispose_fn = dispose_and_remove;
-      // set dispose function to undefined in case that it triggers this dispose function itself. Not doing it leads to a bug like https://github.com/solidjs/solid/discussions/1194
-      dispose_and_remove = undefined;
-      dispose_fn();
-    }
-  };
-  return {
-    open_modal_: open_modal_,
-    close_modal_: close_modal_
-  };
-}
-async function $bc91d938b8c601b4$export$58e808b1db15d3bc({
-  merchant: merchant,
-  market: market,
-  headers: headers,
-  ...fetch_recs_options
-}) {
-  return await $5vyXB$depictaiutilishared.fetch_recs({
-    tenant: merchant,
-    market: market
-  }, $5vyXB$depictaiutilishared.snakeCasifyObject(fetch_recs_options), headers);
-}
-function $6e22b5314fb52f4c$export$e183a13865960371(params_to_default_value, router_) {
-  const signals = {};
-  const entries = Object.entries(params_to_default_value);
-  const event_handler = $5vyXB$depictaiutilishared.catchify((what_happened, args) => {
-    // Intentionally always update our signals to the history state to allow external control of SDK state for doing things like https://linear.app/depictai/issue/X-1432/is-this-possible-with-the-depict-sdk
-    if (what_happened !== "popstate") return;
-    // Had to undo the comment above,but leaving the history. Doing this because discovering why it doesn't work is a deja-vu and I don't want to have to discover it again.
-    // If we want others to interface with our state, it's better to expose it from DepictCategory/DepictSearch
-    // The reason for that is because writes to the state trigger writes to the state (something about local filter state, see the comment where `last_remote_state !== available_filters_()` happens in create_modified_filters.tsx)
-    // And can infinite loop, like in https://app.jiminny.com/playback/569c8f65-edea-4735-bd9e-4eb5a0b14cad
-    // It's the classical equilibrium problem when syncing state both down and up, and it's much easier to avoid than solve
-    $6e22b5314fb52f4c$var$history_state_change(signals, entries, args.state);
-  });
-  // createRenderEffect because we need the instant execution so the signals always contain values, even before solid's render phase
-  $5vyXB$solidjs.createRenderEffect(() => {
-    let signal_changed = false;
-    let {
-      state: state
-    } = globalThis?.history || {
-      state: {}
-    }; // 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] ||= $5vyXB$solidjs.createSignal(state[param] ?? default_value);
-      const new_value = read_signal();
-      if (new_value !== state[param]) {
-        signal_changed = true;
-        state[param] = new_value;
-      }
-    }
-    if (signal_changed) router_.navigate_.replace_state_(state);
-  });
-  // history_dot_state_to_state needs to update after its signals after url_state does BUT in the same task (might even have to be in the same tick in the microtask queue). If we'd use window.addEventListener("popstate") it would be guaranteed to be too late since each event listener has its own task
-  (0, $5vyXB$depictaiutilishared.instant_exec_on_suspect_history_change).add(event_handler);
-  $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.catchify(() => (0, $5vyXB$depictaiutilishared.instant_exec_on_suspect_history_change).delete(event_handler)));
-  $5vyXB$solidjs.createEffect($5vyXB$depictaiutilishared.catchify(() => $5vyXB$solidjs.untrack($5vyXB$depictaiutilishared.catchify(() => $6e22b5314fb52f4c$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 $6e22b5314fb52f4c$var$history_state_change(signals, entries, state) {
-  $5vyXB$solidjs.batch(() => {
-    for (const [param, default_value] of entries) {
-      const [, write_signal] = signals[param];
-      const new_value = state?.[param];
-      write_signal(new_value ?? default_value);
-    }
-  });
-}
-const $d84fe647b84b5dc5$export$3064e1e8c6513da3 = new Set();
-let $d84fe647b84b5dc5$var$has_ran = false;
-function $d84fe647b84b5dc5$export$5162a71f252e6122() {
-  if ($d84fe647b84b5dc5$var$has_ran || typeof history !== "object") return;
-  $d84fe647b84b5dc5$var$has_ran = true;
-  for (const function_name of ["replaceState", "pushState"]) {
-    if (Object.getOwnPropertyNames(history).includes(function_name)) $d84fe647b84b5dc5$var$proxy_push_state(function_name, history);
-    $d84fe647b84b5dc5$var$proxy_push_state(function_name, History.prototype);
-  }
-}
-function $d84fe647b84b5dc5$var$proxy_push_state(function_name, thing) {
-  thing[function_name] = new Proxy(thing[function_name], {
-    apply(target, this_arg, arg_list) {
-      try {
-        const old_state = history.state;
-        if (typeof old_state == "object" && old_state !== null) {
-          // This effectively disallows the user from passing in a string, number, null or undefined
-          const intended_new_value_as_obj = typeof arg_list[0] === "object" ? arg_list[0] ?? {} : {};
-          const cloned_object = {
-            ...intended_new_value_as_obj
-          };
-          for (const key in old_state) {
-            if (!$d84fe647b84b5dc5$var$starts_with_any_prefix(key)) continue;
-            if (!(key in cloned_object)) cloned_object[key] = old_state[key];
-          }
-          arg_list[0] = cloned_object;
-        }
-      } catch (e) {
-        $5vyXB$depictaiutilishared.report([e, "Failed to preserve items in history.state"], "error");
-      }
-      return Reflect.apply(target, this_arg, arg_list);
+  return modified_filter_object;
+}
+async function $bd429c994399dd82$export$58e808b1db15d3bc(options) {
+  const headers = options.headers;
+  const product_id = options.productId || options.product_id; // Second fallback here is just because there was very little missing to make this work with snake_case input and in case someone puts in snake case'd stuff already (preview browser did) we can easily not break it
+  const cleaned_up_options = $5vyXB$depictaiutilishared.snakeCasifyObject(options);
+  delete cleaned_up_options.headers;
+  delete cleaned_up_options.product_id;
+  cleaned_up_options.session_id ||= $5vyXB$depictaiutilishared.get_session_id();
+  if (product_id && !cleaned_up_options.product_ids) cleaned_up_options.product_ids = [product_id];
+  const options_to_send = cleaned_up_options;
+  const url = $5vyXB$depictaiutilishared.add_version_query_params(`${(0, $5vyXB$depictaiutilishared.base_url)}/v3/recommend/products`);
+  return await $5vyXB$depictaiutilishared.fetch_retry(url, {
+    body: JSON.stringify(options_to_send),
+    ...(headers ? {
+      headers: headers
+    } : {}),
+    method: "POST"
+  }).catch(e => $5vyXB$depictaiutilishared.dlog("fetch_retry threw", e)).then(async maybe_response => {
+    if (!maybe_response) return [];
+    let decoded;
+    try {
+      decoded = await maybe_response.json();
+    } catch (e) {
+      $5vyXB$depictaiutilishared.dlog("Failed to decode JSON", e);
     }
+    return decoded?.displays || [];
   });
 }
-function $d84fe647b84b5dc5$var$starts_with_any_prefix(key) {
-  for (const prefix of $d84fe647b84b5dc5$export$3064e1e8c6513da3) {
-    if (key.startsWith(prefix)) return true;
-  }
-}
 function $26a56f6b44703084$export$9862539c89138352({
   get_default_values_: get_default_values_,
   router_: router_,
@@ -3834,8 +4450,8 @@ function $67dc366d96177e70$export$967e966fca9515e(api_response) {
   }
   return api_response;
 }
-const $e1d6c0f3d89d531c$var$v2_base_url = (0, $5vyXB$depictaiutilishared.base_url) + "/v2/";
-const $e1d6c0f3d89d531c$var$search_base_url = $e1d6c0f3d89d531c$var$v2_base_url + "search/";
+const $e1d6c0f3d89d531c$var$v3_base_url = (0, $5vyXB$depictaiutilishared.base_url) + "/v3/";
+const $e1d6c0f3d89d531c$var$search_base_url = $e1d6c0f3d89d531c$var$v3_base_url + "search/";
 class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
   #supports_finalization_registry = typeof FinalizationRegistry === "function";
   #cache_objs = {};
@@ -3854,18 +4470,14 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
     const request = {
       ...input_req
     };
-    request.dsid ??= $5vyXB$depictaiutilishared.get_depict_id();
-    // Todo: remove the default user and session IDs once we've confirmed backend can handle it and do whatever fallback is necessary.
-    request.user_id ??= this.#get_user_id?.() || $5vyXB$depictaiutilishared.get_user_id();
     request.session_id ??= this.#get_session_id?.() || $5vyXB$depictaiutilishared.get_session_id();
     return request;
   };
   #get_metadata;
-  #get_user_id;
   #get_session_id;
   #guard_url_creator_length(expected, received) {
     if (expected.length !== received.length) {
-      const e = new Error("Page URL creator returned wrong number of page URLs, got " + received.length + ", expected " + expected.length);
+      const e = new Error("displayTransformer returned wrong number of page URLs, got " + received.length + ", expected " + expected.length);
       queueMicrotask(() => {
         throw e;
       });
@@ -3902,8 +4514,9 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
     const category_transformer = display_transformers?.categories;
     const content_result_transformer = display_transformers?.contentResults;
     const displays = input_data.displays;
+    const owner = $5vyXB$solidjs.getOwner();
     const {
-      breadcrumb: breadcrumb,
+      breadcrumbs: breadcrumbs,
       quick_links: quick_links,
       content_search_links: content_search_links
     } = input_data;
@@ -3932,40 +4545,48 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
           displays[i] = new_display_or_page_url;
       }
     }
-    if (page_url_creator || category_transformer) for (const category_display_array of [breadcrumb, quick_links]) {
+    if (page_url_creator || category_transformer) for (const category_display_array of [breadcrumbs, quick_links]) {
       if (!category_display_array) continue;
-      const page_urls = await (page_url_creator || category_transformer)({
+      const page_urls = await $5vyXB$solidjs.runWithOwner(owner, () => (page_url_creator || category_transformer)({
         merchant: merchant,
         market: market,
         data: [...category_display_array],
         ...(page_url_creator ? {
           type: "categories"
         } : {})
-      });
+      }));
       this.#guard_url_creator_length(category_display_array, page_urls);
       for (let i = 0; i < category_display_array.length; i++)
       // Copy over getters so we sneakily can make this reactive
       Object.defineProperties(category_display_array[i], Object.getOwnPropertyDescriptors(page_urls[i]));
     }
     if (content_search_links?.length && content_result_transformer) {
-      const result = await content_result_transformer({
+      const result = await $5vyXB$solidjs.runWithOwner(owner, () => content_result_transformer({
         merchant: merchant,
         market: market,
         data: [...content_search_links]
-      });
+      }));
       this.#guard_url_creator_length(content_search_links, result);
       input_data.content_search_links = result;
     }
     return input_data;
   }
-  async #cached_post_request(endpoint, input_req, fallback_response) {
-    const cache_obj = this.#get_cache_obj_for_endpoint(endpoint);
-    const with_ids = this.#add_ids_to_request(input_req);
+  async #cached_request({
+    endpoint_: endpoint_,
+    input_req_: input_req_,
+    fallback_response_: fallback_response_,
+    method_ = "POST",
+    delete_key_before_sending_: delete_key_before_sending_ // only supported for GET requests
+  }) {
+    const cache_obj = this.#get_cache_obj_for_endpoint(endpoint_);
+    const with_ids = this.#add_ids_to_request(input_req_);
+    const owner = $5vyXB$solidjs.getOwner();
     const metaData = await this.#get_metadata?.();
     const request = metaData ? Object.assign(with_ids, {
       metadata: metaData
     }) : with_ids;
-    const body = JSON.stringify($5vyXB$depictaiutilishared.sort_obj(request));
+    const sorted_request = $5vyXB$depictaiutilishared.sort_obj(request);
+    const body = JSON.stringify(sorted_request);
     const response_from_cache = cache_obj.cache_[body]?.deref?.();
     if (response_from_cache) return response_from_cache;
     const in_progress_request = cache_obj.in_progress_[body];
@@ -3973,18 +4594,23 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
     let resolve_in_progress;
     cache_obj.in_progress_[body] = new Promise(r => resolve_in_progress = r);
     try {
-      const api_response = await $5vyXB$depictaiutilishared.fetch_retry($5vyXB$depictaiutilishared.add_version_query_params(endpoint), {
-        method: "POST",
-        body: body
+      const is_post = method_ === "POST";
+      if (!is_post && delete_key_before_sending_) delete sorted_request[delete_key_before_sending_];
+      const url_to_request = is_post ? endpoint_ : $5vyXB$depictaiutilishared.make_url_with_query_params(endpoint_, sorted_request);
+      const api_response = await $5vyXB$depictaiutilishared.fetch_retry($5vyXB$depictaiutilishared.add_version_query_params(url_to_request), {
+        method: method_,
+        ...(is_post ? {
+          body: body
+        } : {})
       });
       return_successfully: {
         if (!api_response || api_response.status !== 200) break return_successfully;
         let result;
         try {
           const unmodified_result = await api_response.json();
-          result = await this.#run_display_transformers_for_rest(input_req.tenant, input_req.market, unmodified_result);
+          result = await $5vyXB$solidjs.runWithOwner(owner, () => this.#run_display_transformers_for_rest(input_req_.merchant, input_req_.market, unmodified_result));
         } catch (e) {
-          $5vyXB$depictaiutilishared.dwarn("URL creator or json decoding failed", e);
+          $5vyXB$depictaiutilishared.dwarn("displayTransformer or json decoding failed", e);
           break return_successfully;
         }
         // Here result actually becomes O
@@ -4002,7 +4628,7 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
         return result;
       }
       // If we get here, the request failed
-      const retval = fallback_response(input_req);
+      const retval = fallback_response_(input_req_);
       resolve_in_progress(retval);
       return retval;
     } finally {
@@ -4012,19 +4638,18 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
   constructor(options) {
     const {
       get_metadata: get_metadata,
-      get_user_id: get_user_id,
       get_session_id: get_session_id,
       page_url_creator: page_url_creator,
       display_transformers: display_transformers
     } = options ?? {};
     this.#get_metadata = get_metadata;
-    this.#get_user_id = get_user_id;
     this.#get_session_id = get_session_id;
     this.page_url_creator = page_url_creator;
     this.display_transformers = display_transformers;
   }
   async suggest(input_req) {
     const with_ids = this.#add_ids_to_request(input_req);
+    const owner = $5vyXB$solidjs.getOwner();
     const metaData = await this.#get_metadata?.();
     const request = metaData ? Object.assign(with_ids, {
       metadata: JSON.stringify(metaData)
@@ -4036,9 +4661,9 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
       const decoded_json = await results.json();
       if (!Array.isArray(decoded_json?.suggestions)) break attempt_to_return_api_response;
       try {
-        return await this.#run_url_creator_for_suggest(input_req.tenant, input_req.market, decoded_json);
+        return await $5vyXB$solidjs.runWithOwner(owner, () => this.#run_url_creator_for_suggest(input_req.merchant, input_req.market, decoded_json));
       } catch (e) {
-        $5vyXB$depictaiutilishared.dwarn("URL creator failed", e);
+        $5vyXB$depictaiutilishared.dwarn("displayTransformer failed", e);
       }
     }
     return {
@@ -4048,31 +4673,67 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
     };
   }
   async query(input_req) {
-    return await this.#cached_post_request($e1d6c0f3d89d531c$var$search_base_url + "results", input_req, () => ({
-      "n_hits": 0,
-      "displays": [],
-      "sorts": [],
-      "filters": [],
-      "search_request_id": "error",
-      failed: true
-    }));
+    return await this.#cached_request({
+      endpoint_: $e1d6c0f3d89d531c$var$search_base_url + "results",
+      input_req_: input_req,
+      fallback_response_: () => ({
+        "n_hits": 0,
+        "displays": [],
+        "sorts": [],
+        "filters": [],
+        "search_request_id": "error",
+        failed: true
+      })
+    });
   }
-  async list(input_req) {
-    return await this.#cached_post_request($e1d6c0f3d89d531c$var$v2_base_url + "product-listing", input_req, () => ({
-      "n_hits": 0,
-      "displays": [],
-      "sorts": [],
-      "filters": [],
-      "breadcrumb": [],
-      "quick_links": [],
-      "product_listing_request_id": "error",
-      failed: true
-    }));
+  async get_listing(input_req) {
+    return await this.#cached_request({
+      endpoint_: $e1d6c0f3d89d531c$var$v3_base_url + "listings/" + encodeURIComponent(input_req.listing_id),
+      input_req_: input_req,
+      fallback_response_: () => ({
+        listing_id: "",
+        listing_type: "category",
+        "title": "",
+        "description": "string",
+        "replace_meta_tags": true,
+        "slug": "",
+        "updated_at": new Date().toISOString(),
+        "breadcrumbs": [],
+        "quick_links": [],
+        failed: true
+      }),
+      method_: "GET",
+      delete_key_before_sending_: "listing_id" // this goes into the path, but we still need to have it in the request object until the last second as we want to include it as a key when caching requests
+    });
+  }
+
+  async get_listing_products(input_req) {
+    const listing_id = input_req.listing_id; // listing_id goes into the path
+    const cloned_request = {
+      ...input_req
+    };
+    delete cloned_request["listing_id"];
+    return await this.#cached_request({
+      endpoint_: $e1d6c0f3d89d531c$var$v3_base_url + "listings/" + encodeURIComponent(listing_id) + "/products",
+      input_req_: input_req,
+      fallback_response_: () => ({
+        "n_hits": 0,
+        "displays": [],
+        "sorts": [],
+        "filters": [],
+        "product_listing_request_id": "error",
+        failed: true
+      })
+    });
   }
   async get_recommended(input_req) {
-    return await this.#cached_post_request($e1d6c0f3d89d531c$var$search_base_url + "related", input_req, () => ({
-      displays: []
-    }));
+    return await this.#cached_request({
+      endpoint_: $e1d6c0f3d89d531c$var$search_base_url + "related",
+      input_req_: input_req,
+      fallback_response_: () => ({
+        displays: []
+      })
+    });
   }
 }
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
@@ -4171,7 +4832,7 @@ function $76b6ac05693f5c71$export$205efb947c7ffd78(handler, passive = true) {
     $5vyXB$solidjs.onCleanup(() => removeEventListener(event, catchified_handler));
   }
 }
-const $401aee5f33dca9e2$var$_tmpl$ = ["<div", ' class="scroll-status" style="display:none"><span class="text"><b>', "</b> – <b>", "</b> <!--$-->", "<!--/--> <b>", "</b></span></div>"];
+const $401aee5f33dca9e2$var$_tmpl$ = ["<div", ' class="scroll-status" style="display:none"><span class="text"><b>', "</b> \u2013 <b>", "</b> <!--$-->", "<!--/--> <b>", "</b></span></div>"];
 function $401aee5f33dca9e2$export$83fd5de5504a7a67({
   formatted_number_of_results_: formatted_number_of_results_,
   first_result_in_viewport_: [get_first_result_in_viewport],
@@ -4355,7 +5016,7 @@ function $3f08fe2992a2a8ca$export$5e4aed86c12acdd9({
     // 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"]({
+    const api_response = await depict_api_["listing_id" in base_part ? "get_listing_products" : "query"]({
       cursor: get_last_cursor(),
       limit: number_of_results_to_load,
       ...base_part
@@ -4418,8 +5079,6 @@ function $ac167f6af6a48fc3$export$a1fd619a4743ca08({
   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_,
@@ -4471,8 +5130,6 @@ function $ac167f6af6a48fc3$export$a1fd619a4743ca08({
   });
   return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
     displays_by_key_: displays_by_key_,
-    merchant_: merchant_,
-    market_: market_,
     product_card_template_: product_card_template_,
     content_blocks_: content_blocks_,
     do_per_elements_: (elements, index_accessor) =>
@@ -4617,37 +5274,6 @@ function $055384b985678603$export$a79e666719b3647c(cols_at_size_) {
   });
   return n_cols_currently_showing;
 }
-function $3bc4a89b971a3af5$export$3f37af283f8fb843(props) {
-  const style = $5vyXB$solidjs.createMemo(() => {
-    const {
-      style: style,
-      height: height,
-      width: width,
-      aspectRatio: aspectRatio
-    } = props;
-    const is_image = aspectRatio != undefined;
-    const size_data = is_image ? {
-      width: "100%",
-      "padding-bottom": 1 / aspectRatio * 100 + "%"
-    } : {
-      width: width,
-      height: height
-    };
-    return {
-      display: "block",
-      ...(style || {}),
-      ...size_data
-    };
-  });
-  return $5vyXB$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
-    get style() {
-      return style();
-    },
-    get ["class"]() {
-      return props.class;
-    }
-  });
-}
 const $d92f338ba8f9da9b$var$_tmpl$ = ["<div", ' class="content-block-wrapper" style="', '">', "</div>"];
 function $d92f338ba8f9da9b$export$791ef57e62e21c3f({
   content_blocks_: incoming_content_blocks,
@@ -4841,8 +5467,6 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
 }) {
   // 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_ = $5vyXB$solidjs.createMemo(() => plp_results_.loading || query_base_.loading);
-  const merchant_ = $5vyXB$solidjs.createMemo(() => query_base_().tenant);
-  const market_ = $5vyXB$solidjs.createMemo(() => query_base_().market);
   const has_no_results_or_failed = $5vyXB$solidjs.createMemo(() => {
     const displays = plp_results_()?.displays;
     return !is_loading_() && (!Array.isArray(displays) || !displays.length);
@@ -4950,8 +5574,6 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
                   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_,
@@ -5079,42 +5701,6 @@ function $be89be42ce9ea60f$export$1f1775a58da589b5({
     }
   });
 }
-function $ca1176b694a6ee2e$export$fe334901e8bebd57() {
-  const cleanup_fns = [];
-  const cleanup = () => cleanup_fns.forEach(f => f());
-  // use an animation to automatically retain the `overflow` values and all other styling
-  for (const element of [document.documentElement, document.body]) {
-    try {
-      const animation = element.animate({
-        overflow: "hidden",
-        offset: 0
-      }, 1);
-      animation.pause();
-      const fn = $5vyXB$depictaiutilishared.catchify(animation.play.bind(animation));
-      cleanup_fns.push(fn);
-      $5vyXB$solidjs.onCleanup(fn);
-    } catch (e) {
-      $5vyXB$depictaiutilishared.dlog("Probably partial keyframe error", e);
-    }
-    if (getComputedStyle(element).overflow !== "hidden") {
-      // safari gets special hacky treatment
-      const style = element.style;
-      const original_value = style.overflow;
-      style.overflow = "hidden";
-      const fn = $5vyXB$depictaiutilishared.catchify(() => style.overflow = original_value);
-      cleanup_fns.push(fn);
-      $5vyXB$solidjs.onCleanup(fn);
-    }
-  }
-  return cleanup;
-} // the way that houdini does that (FYI) it fixes the page jumps
-// const from_top = scrollY;
-// document.body.style.position = "fixed";
-// document.body.style.left = 0;
-// document.body.style.right = 0;
-// document.body.style.top = `-${from_top}px`;
-// document.body.style.overflowY = "scroll";
-
 const $f958b5ac0e4a78da$var$_tmpl$ = '<path d="M6.199 10.254a.35.35 0 0 0-.496 0L3.5 12.453V.348a.35.35 0 0 0-.7 0v12.105L.598 10.254c-.137-.137-.359-.137-.492 0a.35.35 0 0 0 0 .492l2.797 2.801a.35.35 0 0 0 .496 0L6.2 10.746c.137-.137.137-.355 0-.492zM9.449 3.5H8.051a.35.35 0 0 1-.352-.352V1.75c0-.191.156-.352.352-.352h1.398c.195 0 .352.16.352.352v1.398a.35.35 0 0 1-.352.352zm-1.051-.699h.703v-.699h-.703zm0 0"></path>',
   $f958b5ac0e4a78da$var$_tmpl$2 = '<path d="M10.852 6.301H8.051a.35.35 0 0 1-.352-.352V4.551a.35.35 0 0 1 .352-.352h2.801a.35.35 0 0 1 .348.352v1.398a.35.35 0 0 1-.348.352zm-2.453-.699H10.5v-.703H8.398zm3.851 3.5H8.051c-.195 0-.352-.16-.352-.352V7.352A.35.35 0 0 1 8.051 7h4.199c.191 0 .352.156.352.352V8.75c0 .191-.16.352-.352.352zm-3.852-.703h3.5V7.7h-3.5zm5.25 3.499H8.051a.35.35 0 0 1-.352-.348v-1.402a.35.35 0 0 1 .352-.348h5.598a.35.35 0 0 1 .352.348v1.402a.35.35 0 0 1-.352.348zm-5.25-.699H13.3V10.5H8.398zm0 0"></path>';
 function $f958b5ac0e4a78da$export$da32f7add8a22e86(props = {}) {
@@ -5674,7 +6260,6 @@ function $e53b2e7e632ac4cb$export$5646050d516e06bc({
 }) {
   const placeholder_crumb_data = [,,,];
   const crumb_data = $5vyXB$solidjs.createMemo(() => get_api_crumb_data() || placeholder_crumb_data);
-  const href_accessor = $5vyXB$depictaiutilishared.use_href_accessor();
   return $5vyXB$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
     severity_: "error",
     message_: "BreadCrumbs failed",
@@ -5684,11 +6269,11 @@ function $e53b2e7e632ac4cb$export$5646050d516e06bc({
           return crumb_data();
         },
         children: (display_accessor, index) => {
-          const is_last = $5vyXB$solidjs.createMemo(() => index === crumb_data()?.length - 1);
-          const url = $5vyXB$solidjs.createMemo(() => is_last() ? href_accessor() : display_accessor()?.page_url);
           const href = $5vyXB$solidjs.createMemo(() => $1ab22f2cd39b3061$export$43cd1e747fecd42e({
-            to_url_: url(),
-            filter_query_param_prefix_: filter_query_param_prefix_,
+            to_url_: display_accessor()?.page_url,
+            filter_query_param_prefix_:
+            // page_url here can be a getter if that was added in the display transformers as a way of making this reactive
+            filter_query_param_prefix_,
             sorting_query_param_: sorting_query_param_
           }));
           return [$5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
@@ -5723,42 +6308,42 @@ const $8cceb1d3a967f369$var$_tmpl$ = ["<nav", ' class="quicklinks"', ">", "</nav
 function $8cceb1d3a967f369$export$466cdc317043f6cb({
   quicklinks_data_: quicklinks_data_,
   router_: router_,
-  current_query_id_: current_query_id_,
+  current_listing_id_: current_listing_id_,
   breadcrumb_data_: breadcrumb_data_,
   i18n_: i18n_,
   sorting_query_param_: sorting_query_param_,
   filter_query_param_prefix_: filter_query_param_prefix_
 }) {
-  let scrolling_logic_ran_for_query_id = false;
+  let scrolling_logic_ran_for_listing_id = false;
   let last_scroll_position;
   let scroll_to_element_on_dom_insertion;
   let last_was_placeholder = false;
   let sliding_element;
   $5vyXB$solidjs.createComputed(() => {
-    current_query_id_();
-    scrolling_logic_ran_for_query_id = false;
+    current_listing_id_();
+    scrolling_logic_ran_for_listing_id = false;
   });
   const place_holdey_quicklinks_data = $5vyXB$solidjs.createMemo(() => quicklinks_data_() || [,,,]);
-  const selected_index = $5vyXB$solidjs.createMemo(() => quicklinks_data_()?.findIndex(item => item.query_id === current_query_id_())); // this will be -1 when viewing child categories
-  const scrollpos_per_queryid = {};
+  const selected_index = $5vyXB$solidjs.createMemo(() => quicklinks_data_()?.findIndex(item => item.listing_id === current_listing_id_())); // this will be -1 when viewing child categories
+  const scrollpos_per_listing_id = {};
   const mutation_plugins = [function () {
-    if (!scrolling_logic_ran_for_query_id) return;
+    if (!scrolling_logic_ran_for_listing_id) return;
     const {
       scrollLeft: scrollLeft
     } = this.insert_here;
     if (scrollLeft > 0) {
       last_scroll_position = scrollLeft;
-      const current_id = $5vyXB$solidjs.untrack(current_query_id_);
+      const current_id = $5vyXB$solidjs.untrack(current_listing_id_);
       // make sure to not save position where selected item isn't in viewport
       const current_selected_index = $5vyXB$solidjs.untrack(selected_index);
       const intersecting_thing = this.intersecting_items_object[current_selected_index];
-      if (intersecting_thing?.intersectionRatio >= 0.95 || current_selected_index == undefined || current_selected_index < 0) scrollpos_per_queryid[current_id] = scrollLeft;else if (current_id in scrollpos_per_queryid)
+      if (intersecting_thing?.intersectionRatio >= 0.95 || current_selected_index == undefined || current_selected_index < 0) scrollpos_per_listing_id[current_id] = scrollLeft;else if (current_id in scrollpos_per_listing_id)
         // if about to go out of view, stop saving it so that the "always show new things in view" thing can get to work
-        delete scrollpos_per_queryid[current_id];
+        delete scrollpos_per_listing_id[current_id];
     }
   }];
   $5vyXB$solidjs.createComputed(() => {
-    if (place_holdey_quicklinks_data()?.[0]?.query_id) {
+    if (place_holdey_quicklinks_data()?.[0]?.listing_id) {
       if (last_was_placeholder) queueMicrotask($5vyXB$depictaiutilishared.catchify(() => {
         sliding_element?.scrollTo({
           left: 0
@@ -5810,13 +6395,13 @@ function $8cceb1d3a967f369$export$466cdc317043f6cb({
             equals: false
           }), new_data => {
             const quicklinks_data = quicklinks_data_(); // this signal should have updated by now since this is a createEffect
-            const current_id = current_query_id_();
+            const current_id = current_listing_id_();
             if (!new_data || !quicklinks_data || !current_id) return;
             const owner = $5vyXB$solidjs.getOwner();
             queueMicrotask(() => {
               // has to be in microtask so that elements have rendered and are scroll-to-able
-              scrolling_logic_ran_for_query_id = true;
-              const saved_scroll_position = scrollpos_per_queryid[current_id];
+              scrolling_logic_ran_for_listing_id = true;
+              const saved_scroll_position = scrollpos_per_listing_id[current_id];
               if (saved_scroll_position) {
                 insert_here.scrollTo({
                   left: saved_scroll_position
@@ -5858,10 +6443,10 @@ function $8cceb1d3a967f369$export$466cdc317043f6cb({
               // Problem: When you don't open a link in a new tab, we don't display the filter cleared toast
               // Solution: instead of not adding the state to the url, add a flag to the link if it's a sibling and then display the toast on load if the flag is set
               const is_sibling = $5vyXB$solidjs.createMemo(() => {
-                const current_id = current_query_id_();
+                const current_id = current_listing_id_();
                 return quicklinks_data_()?.some(({
-                  query_id: query_id
-                }) => query_id === current_id);
+                  listing_id: listing_id
+                }) => listing_id === current_id);
               });
               const href = $5vyXB$solidjs.createMemo(() =>
               // We don't want these links to delete the sort and filter state by default, only if `clear_filters_when_going_sideways` explicitly clears them
@@ -5950,10 +6535,12 @@ async function $276380e4607fb9fb$export$cc42dd29bf655ab6({
   const total_products_to_fetch = to_fetch_according_to_state < min_products_to_fetch_ ? min_products_to_fetch_ : to_fetch_according_to_state + 20; // if we fetch according to state, fetch some more in case that the screen size increased, there's some in-accuracy or for the user to scroll. Sometimes the load more post processor will trigger to fetch more after this, but I think that's ok.
   if (total_products_to_fetch <= $276380e4607fb9fb$var$api_max_products_per_request) return await make_request_(total_products_to_fetch);
   const displays = [];
+  const owner = $5vyXB$solidjs.getOwner();
   let last_response;
   let next_cursor;
   for (let fetch_this_time = $276380e4607fb9fb$var$api_max_products_per_request; displays.length < total_products_to_fetch;) {
-    last_response = await make_request_(fetch_this_time, next_cursor);
+    // Carry over the request when making the owner so that display transformers can use onCleanup
+    last_response = await $5vyXB$solidjs.runWithOwner(owner, () => make_request_(fetch_this_time, next_cursor));
     const new_displays = last_response.displays;
     displays.push(...new_displays);
     next_cursor = last_response.cursor;
@@ -6067,7 +6654,7 @@ function $47e2cc552c02110c$export$8895d39404bd2bb1(props) {
 }
 function $ef972f5c10b1c5b4$export$3945d6db2dfd3d12({
   crumb_data_: crumb_data_,
-  query_id_: query_id_,
+  listing_id_: listing_id_,
   i18n_: i18n_,
   selected_filters_: selected_filters_,
   local_filter_cache_: local_filter_cache_,
@@ -6086,15 +6673,15 @@ function $ef972f5c10b1c5b4$export$3945d6db2dfd3d12({
   });
   // Code below is for when we're already open and the user navigates to a new category
   let previous_crumb_data = $5vyXB$solidjs.untrack(crumb_data_);
-  let query_id_when_we_got_previous_data = $5vyXB$solidjs.untrack(query_id_);
+  let listing_id_when_we_got_previous_data = $5vyXB$solidjs.untrack(listing_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
   $5vyXB$solidjs.onCleanup(() => window.removeEventListener("popstate", handler));
   $5vyXB$solidjs.createEffect($5vyXB$solidjs.on(crumb_data_, $5vyXB$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 listing_id_of_new_data = listing_id_();
+    if (allow_filter_clearing && previous_crumb_data && new_crumb_data && listing_id_of_new_data !== listing_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;
@@ -6102,8 +6689,8 @@ function $ef972f5c10b1c5b4$export$3945d6db2dfd3d12({
       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))) {
+        listing_id: listing_id
+      }, index) => longer_array[index].listing_id === listing_id))) {
         // We went sideways, not up or down. Clear filters.
         $47e2cc552c02110c$export$8895d39404bd2bb1({
           user_triggered_: false,
@@ -6117,7 +6704,7 @@ function $ef972f5c10b1c5b4$export$3945d6db2dfd3d12({
         sideways_filter_clearing_flag_[1](false);
       }
     }
-    query_id_when_we_got_previous_data = query_id_of_new_data;
+    listing_id_when_we_got_previous_data = listing_id_of_new_data;
     previous_crumb_data = new_crumb_data;
     if (!allow_filter_clearing) allow_filter_clearing = true;
   })));
@@ -6149,7 +6736,6 @@ function $ef972f5c10b1c5b4$var$clear_if_opened_new_tab_with_sideways_url_params_
   });
   tracking_function_for_plp_results(plp_results_);
 }
-const $6b502b1b2155a0bc$export$5c28802497c8a83c = /*@__PURE__*/Symbol("category_title_type");
 function $6a8e766e914723d8$export$d31a1a1a83ad9413(plp_results_, [get_selected_filters, set_selected_filters]) {
   $5vyXB$solidjs.createComputed(() => {
     const available_filters = plp_results_()?.filters;
@@ -6181,8 +6767,7 @@ const $840d88a04b2d22a7$var$_tmpl$ = ["<div", ' class="product-count"><!--$-->',
   $840d88a04b2d22a7$var$_tmpl$4 = ["<div", ' class="depict plp category"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
 function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
   depict_api_: depict_api_,
-  query_id_: query_id_,
-  listing_type_: listing_type_,
+  listing_id_: listing_id_,
   meta_title_suffix_: meta_title_suffix_,
   current_sorting_: current_sorting_,
   min_products_to_fetch_: min_products_to_fetch_,
@@ -6195,7 +6780,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
   get_breadcrumb_accessor_: get_breadcrumb_accessor_,
   expanded_hierarchical_filters_: expanded_hierarchical_filters_,
   local_filter_cache_: local_filter_cache_,
-  tenant_: tenant_,
+  merchant_: merchant_,
   market_: market_,
   router_: router_,
   show_quicklinks_: show_quicklinks_,
@@ -6218,22 +6803,25 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
     show_n_results_: incoming_i18n.show_n_products_,
     no_results_text_: incoming_i18n.no_products_text_
   };
+  const {
+    backend_locale_: backend_locale_
+  } = i18n_;
   const [get_sorting] = current_sorting_;
   const number_of_rendered_selected_filters_items_ = $5vyXB$solidjs.createSignal(0);
   const first_result_in_viewport_ = $5vyXB$solidjs.createSignal();
   const last_result_in_viewport_ = $5vyXB$solidjs.createSignal();
   const [can_write_scroll_restoration_, set_can_write_scroll_restoration] = $5vyXB$solidjs.createSignal(false);
-  const query_base_ = $8cd545330f2674dc$export$210f130a61ac1e8d(() => {
+  const products_query_base_ = $8cd545330f2674dc$export$210f130a61ac1e8d(() => {
     const sort_obj = get_sorting() && {
       ...get_sorting()
     };
     delete sort_obj?.meta;
     const f = selected_filters_[0]();
     return {
-      tenant: tenant_(),
+      merchant: merchant_(),
       market: market_(),
-      query_id: query_id_(),
-      type: listing_type_(),
+      locale: backend_locale_(),
+      listing_id: listing_id_(),
       ...(f.length ? {
         filters: f
       } : {}),
@@ -6242,13 +6830,14 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
       } : {})
     };
   });
-  const [plp_results_] = $5vyXB$solidjs.createResource(query_base_,
+  // Make "Get products in listing" request to get products in listing
+  const [plp_products_] = $5vyXB$solidjs.createResource(products_query_base_,
   // only first page of results, unless the history state says we should load more (can't do that in load more thing, I tested, they need to be added at once for the browser to not give up scroll restoration)
   $5vyXB$depictaiutilishared.catchify(base_query => $276380e4607fb9fb$export$cc42dd29bf655ab6({
-    id_: $5vyXB$solidjs.untrack(query_id_),
+    id_: $5vyXB$solidjs.untrack(listing_id_),
     scroll_restoration_data_: scroll_restoration_data_,
     min_products_to_fetch_: min_products_to_fetch_,
-    make_request_: (limit, cursor) => depict_api_.list({
+    make_request_: (limit, cursor) => depict_api_.get_listing_products({
       ...base_query,
       limit: limit,
       ...(cursor ? {
@@ -6256,24 +6845,33 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
       } : {})
     })
   })));
-  const available_sortings_ = $5vyXB$solidjs.createMemo(() => plp_results_()?.sorts?.map(sort => ({
+  const meta_query_base = $8cd545330f2674dc$export$210f130a61ac1e8d(() => ({
+    merchant: merchant_(),
+    market: market_(),
+    locale: backend_locale_(),
+    listing_id: listing_id_()
+  }));
+  // Make "Get Listing" request to get quicklinks, breadcrumbs, title, etc
+  const [plp_meta] = $5vyXB$solidjs.createResource(meta_query_base, $5vyXB$depictaiutilishared.catchify(query => depict_api_.get_listing(query)));
+  const available_sortings_ = $5vyXB$solidjs.createMemo(() => plp_products_()?.sorts?.map(sort => ({
     ...sort,
     order: sort.order ?? "desc"
   })));
-  const available_filters_ = $5vyXB$solidjs.createMemo(() => plp_results_()?.filters);
-  const crumb_data_ = $5vyXB$solidjs.createMemo(() => plp_results_()?.breadcrumb);
-  const quicklinks_data_ = $5vyXB$solidjs.createMemo(() => plp_results_()?.quick_links);
+  const available_filters_ = $5vyXB$solidjs.createMemo(() => plp_products_()?.filters);
+  const title = $5vyXB$solidjs.createMemo(() => plp_meta()?.title);
+  const crumb_data_ = $840d88a04b2d22a7$var$add_us_to_crumbs(plp_meta, title);
+  const quicklinks_data_ = $5vyXB$solidjs.createMemo(() => plp_meta()?.quick_links);
   const meta_tag_data_ = $5vyXB$solidjs.createMemo(() => {
-    if (plp_results_()?.metadata?.replace_meta_tags) return {
-      title: plp_results_()?.metadata?.title + (meta_title_suffix_() || ""),
-      description: plp_results_()?.metadata?.description
+    if (plp_meta()?.replace_meta_tags) return {
+      title: plp_meta()?.title + (meta_title_suffix_() || ""),
+      description: plp_meta()?.description
     };
   });
   $5vyXB$depictaiutilishared.edit_current_page_meta_tags(meta_tag_data_);
   const [sort_or_filter_open_, set_sort_or_filter_open_] = $5vyXB$solidjs.createSignal(false);
   const [desktop_filter_elements_, set_desktop_filter_elements] = $5vyXB$solidjs.createSignal();
   const formatted_number_of_results_ = $0f400c3f7248d5f1$export$92f2da32c6e7e7ee({
-    number_: $5vyXB$solidjs.createMemo(() => plp_results_()?.n_hits),
+    number_: $5vyXB$solidjs.createMemo(() => plp_products_()?.n_hits),
     i18n_: i18n_
   });
   const [sort_and_filter_element_, set_sort_and_filter_element_] = $5vyXB$solidjs.createSignal();
@@ -6285,7 +6883,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
   const extra_sort_and_filter_args_ = {};
   const make_product_count_ = () => $5vyXB$solidjsweb.ssr($840d88a04b2d22a7$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
-      return plp_results_.loading;
+      return plp_products_.loading;
     },
     fallback: formatted_number_of_results_,
     get children() {
@@ -6296,7 +6894,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
     }
   })), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
-      return plp_results_()?.n_hits === 1;
+      return plp_products_()?.n_hits === 1;
     },
     get fallback() {
       return i18n_.products_();
@@ -6305,11 +6903,10 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
       return i18n_.product_();
     }
   })));
-  $6a8e766e914723d8$export$d31a1a1a83ad9413(plp_results_, selected_filters_);
+  $6a8e766e914723d8$export$d31a1a1a83ad9413(plp_products_, selected_filters_);
   // aiming to have as little unneeded functionality in the bundle as possible, therefore we have two kinds of components that can "plug in" here depending on if there should be a title in the category page along with the count in a row above the buttons on mobile or if it should merge between the buttons when possible
   if (category_title_type === "simple") {
     const CategoryTitleComponent = category_title_;
-    const title = $5vyXB$solidjs.createMemo(() => crumb_data_()?.at(-1)?.title ?? plp_results_()?.metadata?.title);
     results_for = $5vyXB$solidjsweb.createComponent(CategoryTitleComponent, {
       category_title_: title,
       get product_count_() {
@@ -6355,12 +6952,12 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
   $5vyXB$depictaiutilishared.catchify((0, $276380e4607fb9fb$export$6e49da55e449af7c))({
     scroll_restoration_data_: scroll_restoration_data_,
     last_result_in_viewport_: last_result_in_viewport_,
-    id_: query_id_,
+    id_: listing_id_,
     can_write_scroll_restoration_: can_write_scroll_restoration_
   });
   on_filters_constructed_?.();
   $5vyXB$solidjs.createComputed(() => {
-    if (plp_results_.loading) set_can_write_scroll_restoration(false);else if (plp_results_()) set_can_write_scroll_restoration(true);
+    if (plp_products_.loading) set_can_write_scroll_restoration(false);else if (plp_products_()) set_can_write_scroll_restoration(true);
   });
   $5vyXB$solidjs.createRenderEffect($5vyXB$depictaiutilishared.catchify(async () => {
     const slim = is_slim_();
@@ -6375,13 +6972,13 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
     available_filters_: available_filters_
   });
   $ef972f5c10b1c5b4$export$3945d6db2dfd3d12({
-    query_id_: query_id_,
+    listing_id_: listing_id_,
     crumb_data_: crumb_data_,
     i18n_: i18n_,
     selected_filters_: selected_filters_,
     local_filter_cache_: local_filter_cache_,
     expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-    plp_results_: plp_results_,
+    plp_results_: plp_products_,
     sideways_filter_clearing_flag_: sideways_filter_clearing_flag_
   });
   get_breadcrumb_accessor_?.(crumb_data_);
@@ -6406,7 +7003,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
     get children() {
       return $5vyXB$solidjsweb.createComponent((0, $8cceb1d3a967f369$export$466cdc317043f6cb), {
         quicklinks_data_: quicklinks_data_,
-        current_query_id_: query_id_,
+        current_listing_id_: listing_id_,
         router_: router_,
         breadcrumb_data_: crumb_data_,
         i18n_: i18n_,
@@ -6445,8 +7042,8 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
             min_products_to_fetch_:
             // if you want to get if all products have been loaded you can add an optional signal here, see SearchPage
             min_products_to_fetch_,
-            query_base_: query_base_,
-            plp_results_: plp_results_,
+            query_base_: products_query_base_,
+            plp_results_: plp_products_,
             depict_api_: depict_api_,
             first_result_in_viewport_: first_result_in_viewport_,
             last_result_in_viewport_: last_result_in_viewport_,
@@ -6456,7 +7053,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
             sort_or_filter_open_: sort_or_filter_open_,
             desktop_filter_elements_: desktop_filter_elements_,
             content_blocks_by_row_: content_blocks_by_row_,
-            id_currently_querying_for_: query_id_,
+            id_currently_querying_for_: listing_id_,
             no_results_options_: {
               selected_filters_: selected_filters_,
               expanded_hierarchical_filters_: expanded_hierarchical_filters_,
@@ -6476,7 +7073,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
         last_result_in_viewport_: last_result_in_viewport_,
         formatted_number_of_results_: formatted_number_of_results_,
         i18n_: i18n_,
-        number_of_results_: $5vyXB$solidjs.createMemo(() => plp_results_()?.n_hits)
+        number_of_results_: $5vyXB$solidjs.createMemo(() => plp_products_()?.n_hits)
       });
     }
   })), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
@@ -6493,16 +7090,40 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
     }
   })))];
 }
+/**
+ * Adds the current page as last breadcrumb to the breadcrumb trail
+ */
+function $840d88a04b2d22a7$var$add_us_to_crumbs(plp_meta, title) {
+  const href_accessor = $5vyXB$depictaiutilishared.use_href_accessor();
+  return $5vyXB$solidjs.createMemo(() => {
+    const api_value = plp_meta()?.breadcrumbs;
+    if (!api_value) return api_value;
+    return [...api_value, {
+      get listing_id() {
+        return plp_meta().listing_id;
+      },
+      get title() {
+        return title();
+      },
+      get page_url() {
+        return href_accessor();
+      },
+      get slug() {
+        return plp_meta().slug;
+      }
+    }];
+  });
+}
 function $c79fd10a3ab7d6e0$export$477caf01aecaeb2a(options) {
   const router_ = options.router_;
   const search_query_url_param_name_ = "search_query_url_param_name_" in options ? options.search_query_url_param_name_ : undefined;
   const search_query_ = search_query_url_param_name_ ? $5vyXB$solidjs.createSignal("") : undefined;
-  const override_query_id_query_param_names_ = "override_query_id_query_param_names_" in options ? options.override_query_id_query_param_names_ : undefined;
-  const override_query_id_ = override_query_id_query_param_names_ ? $5vyXB$solidjs.createSignal(null) : undefined;
+  const override_listing_id_query_param_names_ = "override_listing_id_query_param_names_" in options ? options.override_listing_id_query_param_names_ : undefined;
+  const override_listing_id_ = override_listing_id_query_param_names_ ? $5vyXB$solidjs.createSignal(null) : undefined;
   const get_search_query_ = search_query_?.[0];
   const set_search_query = search_query_?.[1];
-  const get_override_query_id_ = override_query_id_?.[0];
-  const set_override_query_id = override_query_id_?.[1];
+  const get_override_listing_id_ = override_listing_id_?.[0];
+  const set_override_listing_id = override_listing_id_?.[1];
   const current_sorting_ = $5vyXB$solidjs.createSignal();
   const selected_filters_ = $5vyXB$solidjs.createSignal([]);
   const sideways_filter_clearing_flag_ = $5vyXB$solidjs.createSignal(false);
@@ -6547,10 +7168,10 @@ function $c79fd10a3ab7d6e0$export$477caf01aecaeb2a(options) {
         const found_query = searchParams.get(search_query_url_param_name_);
         set_search_query(found_query || "");
       }
-      if (override_query_id_query_param_names_) {
-        const found_override_query_id = override_query_id_query_param_names_.map(n => searchParams.get(n)).find(n => n);
-        set_override_query_id(found_override_query_id || null);
-        if (found_override_query_id) $5vyXB$depictaiutilishared.dlog("Found override query id:", found_override_query_id); // This stuff might get confusing so better log it
+      if (override_listing_id_query_param_names_) {
+        const found_override_listing_id = override_listing_id_query_param_names_.map(n => searchParams.get(n)).find(n => n);
+        set_override_listing_id(found_override_listing_id || null);
+        if (found_override_listing_id) $5vyXB$depictaiutilishared.dlog("Found override query id:", found_override_listing_id); // This stuff might get confusing so better log it
       }
 
       if (searchParams.get((0, $1ab22f2cd39b3061$export$cf5feb2102aec7f2)) === "true") set_has_sideways_filter_clearing_flag(true);
@@ -6577,8 +7198,8 @@ function $c79fd10a3ab7d6e0$export$477caf01aecaeb2a(options) {
     } : {
       sideways_filter_clearing_flag_: sideways_filter_clearing_flag_
     }),
-    ...(typeof override_query_id_query_param_names_ === "object" ? {
-      override_query_id_accessor_: get_override_query_id_
+    ...(typeof override_listing_id_query_param_names_ === "object" ? {
+      override_listing_id_accessor_: get_override_listing_id_
     } : {})
   };
 }
@@ -6623,108 +7244,6 @@ function $c79fd10a3ab7d6e0$var$start_href_writer({
 function $c79fd10a3ab7d6e0$var$delete_sideways_param_flag(searchParams) {
   if (searchParams.get((0, $1ab22f2cd39b3061$export$cf5feb2102aec7f2)) === "true") searchParams.delete((0, $1ab22f2cd39b3061$export$cf5feb2102aec7f2));
 }
-class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
-  /**
-  * Function that will be called when we want to navigate, or a string saying it's not an SPA. You can change this OTG
-  */ /**
-     * We store query_id in history.state and do operate on this both here and in js-ui, this is the key to be used which js-ui provides
-     */
-  #throwing_on_navigation(...args) {
-    const {
-      on_navigation_: on_navigation_
-    } = this;
-    if (typeof on_navigation_ !== "function") throw new Error("on_navigation_ is not a function");
-    // make sure that we don't accidentally catchify if the SDK consumer has fucked up
-    try {
-      return on_navigation_(...args);
-    } catch (e) {
-      queueMicrotask(() => {
-        throw e;
-      });
-    }
-  }
-  /**
-  * Checks if this tab shouldn't navigate because user wants to open in new tab
-  */
-  #dont_attempt_navigation(ev) {
-    return ev?.button || ev?.metaKey || ev?.ctrlKey;
-  }
-  /**
-  * Vue has async router that needs to be awaited (it navigates after a microtask)
-  * This standardises waiting for all kinds of routers
-  */
-  #get_navigation_happened_promise(is_replace) {
-    return new Promise(resolve => {
-      const handler = what_happened => {
-        if (what_happened === (is_replace ? "replaceState" : "pushState")) {
-          resolve();
-          (0, $5vyXB$depictaiutilishared.instant_exec_on_suspect_history_change).delete(handler);
-        }
-      };
-      (0, $5vyXB$depictaiutilishared.instant_exec_on_suspect_history_change).add(handler);
-    });
-  }
-  navigate_ = {
-    /**
-    * Call this if you *just* want to replace the state object in history.state
-    */
-    replace_state_: new_state => {
-      // This doesn't break any router, so we just do this directly for now, since many don't expose an interface for changing the state
-      globalThis?.history?.replaceState(new_state, "");
-    },
-    /**
-    * Call this to change the URL
-    * @param new_url_ new URL to go to
-    * @param event_ event if you have this in a click handler, will not do anything on cmd/ctrl or non-left click then
-    * @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_: $5vyXB$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_,
-      scroll = true
-    }) => {
-      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;
-      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
-          $5vyXB$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;
-      }
-      event_?.preventDefault();
-      const promise = this.#get_navigation_happened_promise(true);
-      if (force_spa_navigation_ && wants_hard_navigation) {
-        // Don't allow hard navigation if we're forcing SPA navigation, which we do for things where PageReplacer can be used for performance
-        const new_state = history.state;
-        if (category_query_id_) {
-          // In JS-UI we need to know the query_id of the current category, therefore push it into state
-          if (!this.query_id_state_key) $5vyXB$depictaiutilishared.report(new Error("query_id_state_key is not set"), "error");
-          new_state[this.query_id_state_key] = category_query_id_;
-        }
-        history[is_replace_ ? "replaceState" : "pushState"](new_state, "", new_url_);
-      } else this.#throwing_on_navigation.call(this, {
-        is_replace: is_replace_,
-        new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin),
-        scroll: scroll
-      });
-      await promise;
-    })
-  };
-  constructor(on_navigation, query_id_state_key) {
-    this.query_id_state_key = query_id_state_key;
-    this.on_navigation_ = on_navigation;
-  }
-}
 
 /**
  * Wraps a function in a try/catch block and throws the error globally. If undefined is provided as fn, a no-op is returned.
@@ -6755,26 +7274,25 @@ const $48567ac5b39bac56$var$InExternalAreaDiv = ({
 }) => $5vyXB$solidjsweb.ssr($48567ac5b39bac56$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey() + $5vyXB$solidjsweb.ssrAttribute("id", $5vyXB$solidjsweb.escape((0, $0b6e2070a98de347$export$44dad306455dddf).PLP_CATEGORY, true), false), $5vyXB$solidjsweb.escape(children));
 class $48567ac5b39bac56$export$f34314aa9505732e {
   #router;
-  #locale_signal = $5vyXB$solidjs.createSignal();
+  #localization_signal = $5vyXB$solidjs.createSignal();
   #merchant_signal = $5vyXB$solidjs.createSignal();
   #market_signal = $5vyXB$solidjs.createSignal();
-  #query_id_signal = $5vyXB$solidjs.createSignal("");
+  #listing_id_signal = $5vyXB$solidjs.createSignal("");
   #meta_title_suffix_ = $5vyXB$solidjs.createSignal();
-  #disable_override_query_id = $5vyXB$solidjs.createSignal();
-  #listing_type_signal = $5vyXB$solidjs.createSignal();
+  #disable_override_listing_id = $5vyXB$solidjs.createSignal();
   static #keys_constructed_with = /*@__PURE__*/new Set();
   get localization() {
     // allow reactive access
-    return this.#locale_signal[0]();
+    return this.#localization_signal[0]();
   }
   set localization(locale_obj) {
-    this.#locale_signal[1](locale_obj);
+    this.#localization_signal[1](locale_obj);
   }
-  get category_id() {
-    return this.#query_id_signal[0]();
+  get listing_id() {
+    return this.#listing_id_signal[0]();
   }
-  set category_id(id) {
-    this.#query_id_signal[1](id);
+  set listing_id(id) {
+    this.#listing_id_signal[1](id);
   }
   get merchant() {
     return this.#merchant_signal[0]();
@@ -6788,23 +7306,17 @@ class $48567ac5b39bac56$export$f34314aa9505732e {
   set market(market) {
     this.#market_signal[1](market);
   }
-  get listing_type() {
-    return this.#listing_type_signal[0]();
-  }
-  set listing_type(listing_type) {
-    this.#listing_type_signal[1](listing_type);
-  }
   get meta_title_suffix() {
     return this.#meta_title_suffix_[0]();
   }
   set meta_title_suffix(new_suffix) {
     this.#meta_title_suffix_[1](new_suffix);
   }
-  get disable_override_query_id() {
-    return this.#disable_override_query_id[0]();
+  get disable_override_listing_id() {
+    return this.#disable_override_listing_id[0]();
   }
-  set disable_override_query_id(new_value) {
-    this.#disable_override_query_id[1](new_value);
+  set disable_override_listing_id(new_value) {
+    this.#disable_override_listing_id[1](new_value);
   }
   get on_navigation() {
     // The only non-reactive public property on the class (I don't see it making sense to have it reactive)
@@ -6819,7 +7331,7 @@ class $48567ac5b39bac56$export$f34314aa9505732e {
     page_url_creator: page_url_creator,
     display_transformers: display_transformers,
     unique_instance_key_for_state = "",
-    query_id_state_key: query_id_state_key,
+    listing_id_state_key: listing_id_state_key,
     ...props_on_class
   }) {
     const owner = $5vyXB$solidjs.getOwner() || $5vyXB$solidjs.createRoot(() => $5vyXB$solidjs.getOwner()); // we might have an owner, if so, pass it on. Otherwise, create one so solid doesn't print warnings to the console
@@ -6829,21 +7341,21 @@ class $48567ac5b39bac56$export$f34314aa9505732e {
         throw new Error("You can only have one instance of DepictCategory with the same uniqueInstanceKeyForState");
       Object.assign(this, props_on_class); // set initial signal values
       $d84fe647b84b5dc5$export$5162a71f252e6122();
-      this.#router = new (0, $e96dd13889871fc0$export$7e1297a3a19f10d8)("hard_navigation", query_id_state_key);
+      this.#router = new (0, $e96dd13889871fc0$export$7e1297a3a19f10d8)("hard_navigation", listing_id_state_key);
       if (on_navigation) this.#router.on_navigation_ = on_navigation;
-      const override_query_id_query_param_names_ = ["query_id_" + unique_instance_key_for_state, "query_id"]; // If you're wondering why this is an array https://gitlab.com/depict-ai/depict.ai/-/merge_requests/7958#note_1511700842
+      const override_listing_id_query_param_names_ = ["listing_id_" + unique_instance_key_for_state, "listing_id"]; // If you're wondering why this is an array https://gitlab.com/depict-ai/depict.ai/-/merge_requests/7958#note_1511700842
       const sorting_query_param_ = "sorting" + unique_instance_key_for_state;
       const filter_query_param_prefix_ = "f" + unique_instance_key_for_state + "_";
       const {
         selected_filters_: selected_filters_,
         current_sorting_: current_sorting_,
         sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
-        override_query_id_accessor_: override_query_id_accessor_
+        override_listing_id_accessor_: override_listing_id_accessor_
       } = $c79fd10a3ab7d6e0$export$477caf01aecaeb2a({
         router_: this.#router,
         sorting_query_param_: sorting_query_param_,
         filter_query_param_prefix_: filter_query_param_prefix_,
-        override_query_id_query_param_names_: override_query_id_query_param_names_
+        override_listing_id_query_param_names_: override_listing_id_query_param_names_
       });
       const [reset_history_state_, state_] = $26a56f6b44703084$export$9862539c89138352({
         get_default_values_: () => ({
@@ -6858,7 +7370,7 @@ class $48567ac5b39bac56$export$f34314aa9505732e {
         router_: this.#router,
         prefix_: "category" + unique_instance_key_for_state + "_"
       });
-      const i18n_ = $0785f4c9947d9b5f$export$f091cbac892643a4(this.#locale_signal[0]);
+      const i18n_ = $0785f4c9947d9b5f$export$f091cbac892643a4(this.#localization_signal[0]);
       $48567ac5b39bac56$var$privately_shared_properties.set(this, {
         state_: state_,
         breadcrumb_signal_: $5vyXB$solidjs.createSignal(),
@@ -6873,7 +7385,7 @@ class $48567ac5b39bac56$export$f34314aa9505732e {
         router_: this.#router,
         selected_filters_: selected_filters_,
         current_sorting_: current_sorting_,
-        override_query_id_accessor_: override_query_id_accessor_,
+        override_listing_id_accessor_: override_listing_id_accessor_,
         sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
         sorting_query_param_: sorting_query_param_,
         filter_query_param_prefix_: filter_query_param_prefix_
@@ -6893,11 +7405,11 @@ function $48567ac5b39bac56$export$e2bf8ce7779e827e(props) {
   return $95837413165cc2df$export$23fca46f3143581f(() => {
     $5vyXB$solidjs.createEffect(prev => {
       // this is here (and not on DepictCategory) so that people also know when PageReplacer removes the page, it's intended to help people replace their own content when a depict page is navigated, see https://depictaiworkspace.slack.com/archives/C04M8MGCF3K/p1691670636155369
-      const id = depict_category.category_id; // <- this is a reactive getter
-      $deaaf04362a1bc71$export$f50b88e2a00918b5(props.on_query_id_change)(id, prev);
+      const id = depict_category.listing_id; // <- this is a reactive getter
+      $deaaf04362a1bc71$export$f50b88e2a00918b5(props.on_listing_id_change)(id, prev);
       return id;
     });
-    $5vyXB$solidjs.onCleanup(() => $deaaf04362a1bc71$export$f50b88e2a00918b5(props.on_query_id_change)());
+    $5vyXB$solidjs.onCleanup(() => $deaaf04362a1bc71$export$f50b88e2a00918b5(props.on_listing_id_change)());
     const grid_spacing_override = $5vyXB$solidjs.createMemo(() => {
       const {
         grid_spacing: grid_spacing
@@ -6920,7 +7432,7 @@ function $48567ac5b39bac56$export$e2bf8ce7779e827e(props) {
       },
       current_sorting_: current_sorting_,
       selected_filters_: selected_filters_,
-      override_query_id_accessor_: override_query_id_accessor_,
+      override_listing_id_accessor_: override_listing_id_accessor_,
       reset_history_state_: reset_history_state_,
       depict_api_: depict_api_,
       i18n_: i18n_,
@@ -6933,14 +7445,13 @@ function $48567ac5b39bac56$export$e2bf8ce7779e827e(props) {
     } = shared_properties;
     $5vyXB$solidjs.onCleanup(reset_history_state_);
     return $840d88a04b2d22a7$export$f7d2f673fc2f091d({
-      tenant_: () => depict_category.merchant,
+      merchant_: () => depict_category.merchant,
       market_: () => depict_category.market,
       depict_api_: depict_api_,
       min_products_to_fetch_: $48567ac5b39bac56$var$min_products_to_fetch_,
       local_filter_cache_: local_filter_cache_,
-      query_id_: $5vyXB$solidjs.createMemo(() => !depict_category.disable_override_query_id && override_query_id_accessor_() || depict_category.category_id),
+      listing_id_: $5vyXB$solidjs.createMemo(() => !depict_category.disable_override_listing_id && override_listing_id_accessor_() || depict_category.listing_id),
       meta_title_suffix_: () => depict_category.meta_title_suffix,
-      listing_type_: () => depict_category.listing_type,
       i18n_: i18n_,
       show_quicklinks_: $5vyXB$solidjs.createMemo(() => props.show_quicklinks ?? true),
       category_title_: category_title,
@@ -7006,7 +7517,7 @@ function $48567ac5b39bac56$export$de035477d6fef996({
         i18n_: i18n_,
         quicklinks_data_: quicklinks_data_,
         router_: router_,
-        current_query_id_: () => depict_category.category_id,
+        current_listing_id_: () => depict_category.listing_id,
         breadcrumb_data_: breadcrumb_data_,
         sorting_query_param_: sorting_query_param_,
         filter_query_param_prefix_: filter_query_param_prefix_
@@ -7019,21 +7530,6 @@ function $48567ac5b39bac56$var$get_shared_properties(depict_category) {
   if (!shared_properties) throw new Error("Can't connect to provided DepictCategory instance");
   return shared_properties;
 }
-const $0b23bfd073d9a4e8$var$_tmpl$ = ["<div", ' class="category-title"><h1 class="title">', '</h1><span class="explanation"> — <!--$-->', "<!--/--></span></div>"];
-const $0b23bfd073d9a4e8$export$b91cec6bdc6b32a1 = /*@__PURE__*/(() => {
-  const actual_function = ({
-    category_title_: category_title_,
-    product_count_: product_count_
-  }) => {
-    return $5vyXB$solidjsweb.ssr($0b23bfd073d9a4e8$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(category_title_()) || $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
-      height: "1em",
-      width: "10ch"
-    })), $5vyXB$solidjsweb.escape(product_count_));
-  };
-  // This is wrong but parcel can't build correctly, it says unexpected undefined
-  actual_function[(0, $6b502b1b2155a0bc$export$5c28802497c8a83c)] = "simple";
-  return actual_function;
-})();
 const $85b747260aa175c9$var$_tmpl$ = ["<div", ' class="sort-and-filter-buttons fake" aria-hidden="true" style="position:absolute;z-index:-1;pointer-events:none;opacity:0"><div class="outer"><div class="inner"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div></div></div>"];
 const $85b747260aa175c9$export$824dde41348efed1 = /*@__PURE__*/(() => {
   const actual_function = ({
@@ -7118,11 +7614,11 @@ const $85b747260aa175c9$export$824dde41348efed1 = /*@__PURE__*/(() => {
   actual_function[(0, $6b502b1b2155a0bc$export$5c28802497c8a83c)] = "interactive";
   return actual_function;
 })();
-const $63b10c9f461e0ef6$var$TEN_MINUTES = 600000;
-const $63b10c9f461e0ef6$var$TWENTY_FOUR_HOURS = 86400000;
-async function $63b10c9f461e0ef6$export$643598a327b5833e(tenant, market, type) {
+const $6382a1b83da39674$var$TEN_MINUTES = 600000;
+const $6382a1b83da39674$var$TWENTY_FOUR_HOURS = 86400000;
+async function $6382a1b83da39674$export$c1a6b039e689a58e(merchant, market, locale) {
   let localstorage_value;
-  const localstorage_key = `depict_${tenant}_${type ?? "categories"}_` + market;
+  const localstorage_key = `depict_listings_${JSON.stringify([merchant, market, locale])}}`;
   try {
     const in_ls = localStorage[localstorage_key];
     if (in_ls) localstorage_value = JSON.parse(in_ls);
@@ -7134,20 +7630,20 @@ async function $63b10c9f461e0ef6$export$643598a327b5833e(tenant, market, type) {
   const stored_queries = localstorage_value?.queries;
   if (Array.isArray(stored_queries) && typeof updated === "number") {
     const age = now - updated;
-    if (stored_queries.length && age < $63b10c9f461e0ef6$var$TEN_MINUTES)
+    if (stored_queries.length && age < $6382a1b83da39674$var$TEN_MINUTES)
       // if younger than 10 minutes and probably valid data, just return stored value
-      return stored_queries;else if (age < $63b10c9f461e0ef6$var$TWENTY_FOUR_HOURS) {
+      return stored_queries;else if (age < $6382a1b83da39674$var$TWENTY_FOUR_HOURS) {
       // if younger than a day, return stored value but still trigger re-fetch, so we have fresh data next page load (stale data this one but never a delay)
-      $63b10c9f461e0ef6$var$fetch_and_store_categories(tenant, market, localstorage_key, type).catch(e => $5vyXB$depictaiutilishared.report([e, "couldn't fetch categories"], "warning"));
+      $6382a1b83da39674$var$fetch_and_store_categories(merchant, market, locale, localstorage_key).catch(e => $5vyXB$depictaiutilishared.report([e, "couldn't fetch categories"], "warning"));
       return stored_queries;
     }
     // else: we are older and just fetch, store and return new queries
   }
 
-  return await $63b10c9f461e0ef6$var$fetch_and_store_categories(tenant, market, localstorage_key, type);
+  return await $6382a1b83da39674$var$fetch_and_store_categories(merchant, market, locale, localstorage_key);
 }
-async function $63b10c9f461e0ef6$var$fetch_and_store_categories(tenant, market, localstorage_key, type) {
-  const new_categories = await $63b10c9f461e0ef6$var$download_categories(tenant, market, type);
+async function $6382a1b83da39674$var$fetch_and_store_categories(merchant, market, locale, localstorage_key) {
+  const new_categories = await $6382a1b83da39674$var$download_categories(merchant, market, locale);
   try {
     localStorage[localstorage_key] = JSON.stringify({
       updated: +new Date(),
@@ -7159,24 +7655,22 @@ async function $63b10c9f461e0ef6$var$fetch_and_store_categories(tenant, market,
 
   return new_categories;
 }
-async function $63b10c9f461e0ef6$var$download_categories(tenant, market, type) {
-  const fetched = await $5vyXB$depictaiutilishared.fetch_retry((0, $5vyXB$depictaiutilishared.base_url) + "/v2/product-listing/queries", {
-    method: "POST",
-    body: JSON.stringify({
-      tenant: tenant,
-      market: market,
-      ...(type ? {
-        type: type
-      } : {})
-    })
-  });
+async function $6382a1b83da39674$var$download_categories(merchant, market, locale) {
+  const url = new URL((0, $5vyXB$depictaiutilishared.base_url) + "/v3/listings");
+  const request = {
+    merchant: merchant,
+    market: market,
+    locale: locale
+  };
+  url.search = "" + new URLSearchParams(request);
+  const fetched = await $5vyXB$depictaiutilishared.fetch_retry(url.href);
   if (!fetched) return [];
   try {
     if (fetched.status !== 200) {
       $5vyXB$depictaiutilishared.dlog("failed to fetch queries, server responded with", fetched.status, fetched, await fetched.text());
       return [];
     }
-    return (await fetched.json())?.query_ids;
+    return await fetched.json();
   } catch (e) {
     $5vyXB$depictaiutilishared.dlog("failed to decode queries json", fetched, e);
     return [];
@@ -7287,8 +7781,6 @@ function $fb29c6201c369e39$export$7de92c4c2205ebf3({
             }));
             return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
               displays_by_key_: displays_by_key_,
-              merchant_: $5vyXB$solidjs.createMemo(() => search_query_base_().tenant),
-              market_: $5vyXB$solidjs.createMemo(() => search_query_base_().market),
               product_card_template_: product_card_template_
             });
           })();
@@ -7533,7 +8025,7 @@ const $6ae556e536054e87$var$_tmpl$ = ["<div", ' class="instant-results">', "</di
 function $6ae556e536054e87$export$62f101a8aa597bf8({
   depict_api_: depict_api_,
   search_field_value_: [get_search_field_value],
-  tenant_: tenant_,
+  merchant_: merchant_,
   market_: market_,
   render_instant_card_: render_instant_card_,
   render_instant_card_placeholder_: render_instant_card_placeholder_,
@@ -7557,8 +8049,10 @@ function $6ae556e536054e87$export$62f101a8aa597bf8({
     timeout = setTimeout($5vyXB$depictaiutilishared.catchify(() => write_current_instant_query(value)), 250);
   });
   const [search_results] = $5vyXB$solidjs.createResource($5vyXB$solidjs.createMemo(() => ({
-    tenant: tenant_(),
+    // <-- key order important, see comment below
+    merchant: merchant_(),
     market: market_(),
+    locale: i18n_.backend_locale_(),
     query: read_current_instant_query()
   })), $5vyXB$depictaiutilishared.catchify(variable_data => {
     return depict_api_.query({
@@ -7604,12 +8098,12 @@ function $6ae556e536054e87$export$62f101a8aa597bf8({
           const card = render_instant_card_ ? $5vyXB$solidjs.createMemo(() => render_instant_card_(d(), {
             index: i,
             i18n: $639c124c22b6cbaa$export$27b710c08412a7ad(i18n_),
-            merchant: tenant_(),
+            merchant: merchant_(),
             market: market_()
           })) : $6ae613870d3380fc$export$b05c0ae390cf3e06(d, {
             index: i,
             i18n: i18n_,
-            merchant: tenant_(),
+            merchant: merchant_(),
             market: market_()
           }, router_);
           return card;
@@ -8062,7 +8556,7 @@ function $3ec9e21d6b6debdd$export$2f2b9559550c7bbc({
   previous_searches_: [unfiltered_previous_searches, set_unfiltered_previous_searches_],
   previous_searches_text_: previous_searches_text_,
   depict_api_: depict_api_,
-  tenant_: tenant_,
+  merchant_: merchant_,
   market_: market_,
   input_field_: input_field_,
   url_transformer_: url_transformer_,
@@ -8135,9 +8629,10 @@ function $3ec9e21d6b6debdd$export$2f2b9559550c7bbc({
       set_show_stale_content_results(true);else {
       set_searching_for_value(field_value);
       deparallelized_fn({
-        query: field_value,
-        tenant: tenant_(),
-        market: market_()
+        merchant: merchant_(),
+        market: market_(),
+        locale: i18n_.backend_locale_(),
+        query: field_value
       });
       set_show_stale_content_results(false);
     }
@@ -8269,7 +8764,7 @@ function $f40a47a30a358305$export$1c593cbd6f1e10bc({
   close_modal_: close_modal_,
   style_props_ = $5vyXB$solidjs.createSignal({}),
   depict_api_: depict_api_,
-  tenant_: tenant_,
+  merchant_: merchant_,
   market_: market_,
   submit_query_: props_submit_query,
   instant_results_options_: instant_results_options_,
@@ -8369,7 +8864,7 @@ function $f40a47a30a358305$export$1c593cbd6f1e10bc({
         previous_searches_: previous_searches_,
         search_query_url_param_name_: search_query_url_param_name_,
         market_: market_,
-        tenant_: tenant_,
+        merchant_: merchant_,
         selected_index_: selected_index,
         currently_showing_suggestions_: currently_showing_suggestions_,
         depict_api_: depict_api_,
@@ -8391,7 +8886,7 @@ function $f40a47a30a358305$export$1c593cbd6f1e10bc({
           return $6ae556e536054e87$export$62f101a8aa597bf8({
             search_field_value_: search_field_value_,
             depict_api_: depict_api_,
-            tenant_: tenant_,
+            merchant_: merchant_,
             i18n_: i18n_,
             market_: market_,
             set_total_num_results_accessor_: set_total_num_results_accessor_,
@@ -8780,6 +9275,9 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
   const first_result_in_viewport_ = $5vyXB$solidjs.createSignal();
   const last_result_in_viewport_ = $5vyXB$solidjs.createSignal();
   const [can_write_scroll_restoration_, set_can_write_scroll_restoration] = $5vyXB$solidjs.createSignal(false);
+  const {
+    backend_locale_: backend_locale_
+  } = i18n_;
   const search_query_base_ = $8cd545330f2674dc$export$210f130a61ac1e8d(() => {
     const sort_obj = get_sorting() && {
       ...get_sorting()
@@ -8787,8 +9285,9 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
     delete sort_obj?.meta;
     const f = selected_filters_[0]();
     return {
-      tenant: tenant_(),
+      merchant: tenant_(),
       market: market_(),
+      locale: backend_locale_(),
       query: get_search_query_(),
       ...(f.length ? {
         filters: f
@@ -8814,11 +9313,12 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
       })
     });
   }));
-  const [suggestions] = $5vyXB$solidjs.createResource($5vyXB$solidjs.createMemo(() => ({
+  const [suggestions] = $5vyXB$solidjs.createResource(() => ({
     query: get_search_query_(),
-    tenant: tenant_(),
-    market: market_()
-  })), opts => depict_api_.suggest(opts));
+    merchant: tenant_(),
+    market: market_(),
+    locale: backend_locale_()
+  }), opts => depict_api_.suggest(opts));
   const available_sortings_ = $5vyXB$solidjs.createMemo(() => search_results_()?.sorts?.map(sort => ({
     ...sort,
     order: sort.order ?? "desc"
@@ -9262,7 +9762,7 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
           search_query_url_param_name_: search_query_url_param_name_,
           previous_searches_: previous_searches,
           depict_api_: depict_api_,
-          tenant_: this.#merchant_signal[0],
+          merchant_: this.#merchant_signal[0],
           clear_filters_: clear_filters_on_next_submit_,
           market_: this.#market_signal[0],
           submit_query_: configured_submit_query_,
@@ -9376,11 +9876,12 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
       depict_api_: depict_api_
     } = $2c61e4cd8229c49a$var$privately_shared_properties.get(this);
     const result = await depict_api_.query({
-      tenant: this.merchant,
+      merchant: this.merchant,
       market: this.market,
       query: query,
       filters: filters,
-      limit: maxResults
+      limit: maxResults,
+      locale: this.localization.backend_locale_
     });
     if (result.failed) throw new Error("Failed to fetch search results");
     return result.displays;
@@ -9816,7 +10317,4 @@ function $0a6acf31d1eae57c$var$clean_url(url) {
   url_object.hash = "";
   return url_object.href;
 }
-const $a3280f0aad997933$export$c3834fa86c616831 = [[4], [3, 1024], [2, 901]];
-const $a3280f0aad997933$export$864d304a0bc46829 = "2%";
-const $a3280f0aad997933$export$7bf543b9d9be2c22 = (0, $0b23bfd073d9a4e8$export$b91cec6bdc6b32a1);
 $5vyXB$depictaiutilishared.add_to_version_info("ui", (0, $b757f75811f3261f$export$83d89fbfd8236492));