@depict-ai/ui 2.1.23 → 3.0.1

package/latest/index.cjs

@@ -1,6 +1,7 @@
 var $gVhhF$depictaiutilishared = require("@depict-ai/utilishared/latest");
 var $gVhhF$solidjsweb = require("solid-js/web");
 var $gVhhF$solidjs = require("solid-js");
+var $gVhhF$depictaiutilisharedlatest = require("@depict-ai/utilishared/latest");
 var $gVhhF$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,202 +77,16 @@ $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);
-}
-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);
-}
-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 $gVhhF$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($gVhhF$depictaiutilishared.base64_decode_unicode(encoded_data));
-  } catch (e) {
-    $gVhhF$depictaiutilishared.dlog("Failed to fallback parse filter data", op, encoded_data, e);
-  }
-  return null;
-}
-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);
-  }
-}
-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;
-}
-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"
-  };
-  $gVhhF$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__*/$gVhhF$solidjs.createContext();
-function $84798aaa863a4909$export$e68cff63f76bd15b(props) {
-  const our_object = {};
-  return $gVhhF$solidjsweb.createComponent($84798aaa863a4909$var$ListingContext.Provider, {
-    value: our_object,
-    get children() {
-      return props.children;
-    }
-  });
-}
-function $84798aaa863a4909$export$8d0c4fdbb05a2f2e() {
-  return $gVhhF$solidjs.useContext($84798aaa863a4909$var$ListingContext);
-}
-const $93304d59a9747aa6$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`);
-function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
+const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.1";
+const $0f313083912e447a$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<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>`);
+function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
   return (() => {
-    const _el$ = $gVhhF$solidjsweb.getNextElement($93304d59a9747aa6$var$_tmpl$);
+    const _el$ = $gVhhF$solidjsweb.getNextElement($0f313083912e447a$var$_tmpl$);
     $gVhhF$solidjsweb.effect(_p$ => {
-      const _v$ = `position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`,
-        _v$2 = props.class;
-      _p$._v$ = $gVhhF$solidjsweb.style(_el$, _v$, _p$._v$);
-      _v$2 !== _p$._v$2 && $gVhhF$solidjsweb.className(_el$, _p$._v$2 = _v$2);
+      const _v$ = props.width_ ?? 14,
+        _v$2 = props.height_ ?? 26;
+      _v$ !== _p$._v$ && $gVhhF$solidjsweb.setAttribute(_el$, "width", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && $gVhhF$solidjsweb.setAttribute(_el$, "height", _p$._v$2 = _v$2);
       return _p$;
     }, {
       _v$: undefined,
@@ -276,207 +95,532 @@ function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
     return _el$;
   })();
 }
-function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
-  const [size, setSize] = $gVhhF$solidjs.createSignal(0);
-  const resizeObserver = new ResizeObserver($gVhhF$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, $gVhhF$depictaiutilishared.is_safari) ? 4 / 3 : 1);
-      setSize(Math.round(new_size));
+const $a0e53f99354809d9$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<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, $gVhhF$depictaiutilishared.Amazing_Slider)({
+    button_contents: {
+      left: [(() => {
+        const _el$ = $gVhhF$solidjsweb.getNextElement($a0e53f99354809d9$var$_tmpl$);
+        $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
+          height_: arrow_height_,
+          width_: arrow_width_
+        }));
+        return _el$;
+      })()],
+      right: [(() => {
+        const _el$2 = $gVhhF$solidjsweb.getNextElement($a0e53f99354809d9$var$_tmpl$);
+        $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
+          height_: arrow_height_,
+          width_: arrow_width_
+        }));
+        return _el$2;
+      })()]
+    },
+    constructor_plugins: [$gVhhF$depictaiutilishared.slider_snap_css().constructor_plugin],
+    mutation_plugins: [...(disable_fading_ ? [] : [$gVhhF$depictaiutilishared.slider_fading_factory({
+      threshold_: 0.96,
+      faded_opacity_: faded_opacity_
+    }).mutation_plugin_]), ...mutation_plugins_]
+  });
+  $gVhhF$solidjsweb.insert(slider.insert_here, children);
+  $gVhhF$solidjs.onCleanup(() => slider.observer.disconnect());
+  slider_ref_?.(slider);
+  return slider.container;
+}
+const $8c38828ae2321937$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<section aria-live=polite role=region class=tabs-body>`),
+  $8c38828ae2321937$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<nav role=tablist class=tabs-bar>`),
+  $8c38828ae2321937$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<article role=tabpanel>`);
+const $8c38828ae2321937$var$TabsContext = /*@__PURE__*/$gVhhF$solidjs.createContext();
+const $8c38828ae2321937$var$useTabs = () => $gVhhF$solidjs.useContext($8c38828ae2321937$var$TabsContext);
+function $8c38828ae2321937$export$b2539bed5023c21c(props) {
+  return $gVhhF$solidjsweb.createComponent($8c38828ae2321937$var$TabsContext.Provider, {
+    value: new (0, $gVhhF$depictaiutilisharedlatest.ListenableSet)(),
+    get children() {
+      return $gVhhF$solidjsweb.createComponent($8c38828ae2321937$var$ActualTabs, $gVhhF$solidjsweb.mergeProps(props, {
+        get children() {
+          return props.children;
+        }
+      }));
     }
-  }));
-  // 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, $gVhhF$depictaiutilishared.observer).onexists(whatToWatch, ({
-    element: element
-  }) => requestAnimationFrame($gVhhF$depictaiutilishared.catchify(() => resizeObserver.observe(element))));
-  $gVhhF$solidjs.onCleanup(() => {
-    resizeObserver.disconnect();
-    disconnect();
   });
-  return size;
 }
-const $19950faaac026e09$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
-function $19950faaac026e09$export$6e5611bc7e57e477(props) {
-  // Enable reactive props
-  const otherOptions = $gVhhF$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 src_options = $gVhhF$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
-    };
+function $8c38828ae2321937$var$ActualTabs(props) {
+  const [tabsReactive, setTabsReactive] = $gVhhF$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] = $gVhhF$solidjs.createSignal();
+  const [tabsVisitedOnce, setTabsVisitedOnce] = $gVhhF$solidjs.createSignal(new Set(), {
+    equals: false
   });
-  // 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] = $gVhhF$solidjs.createSignal(false);
-  const [hasDecoded, setHasDecoded] = $gVhhF$solidjs.createSignal(false);
-  const sizePX = $gVhhF$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();
+  const isSelected = $gVhhF$solidjs.createSelector(currentlySelected);
+  const owner = $gVhhF$solidjs.getOwner();
+  const updateTabsSignal = $gVhhF$depictaiutilisharedlatest.catchify(() => $gVhhF$solidjs.runWithOwner(owner, () => setTabsReactive([...ourTabsSet])));
+  const ourTabsSet = $8c38828ae2321937$var$useTabs();
+  const location = $gVhhF$depictaiutilisharedlatest.use_href_accessor();
+  const linkWithChangedHash = hash => {
+    const u_o = new URL(location());
+    u_o.hash = hash;
+    return u_o.href;
   };
-  let sizeSetFastPath = false;
-  let hasDecodedFastPath = false;
-  let timeoutSet = false;
-  let gotCleanedUp = false;
-  $gVhhF$solidjs.onCleanup(() => gotCleanedUp = true);
-  $gVhhF$solidjsweb.spread(img, $gVhhF$solidjs.mergeProps(otherOptions), false, true);
-  $gVhhF$solidjs.createEffect(() => {
-    if (!props.size()) return; // wait until we have a size
-    if (timeoutSet) return;
-    const handler = $gVhhF$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;
+  const headerItems = $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
+    get each() {
+      return tabsReactive();
+    },
+    children: item => {
+      const weSelected = $gVhhF$solidjs.createMemo(() => isSelected(item().id));
+      return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjsweb.Dynamic), $gVhhF$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>
+  $gVhhF$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);
+    $gVhhF$solidjs.onCleanup(() => ourTabsSet.removeEventListener(event, updateTabsSignal));
+  }
+  updateTabsSignal();
   $gVhhF$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;
+    const {
+      hash: hash
+    } = new URL(location());
+    const id = hash.slice(1);
+    if (tabsReactive().some(item => item.id === id)) {
+      setCurrentlySelected(id);
       return;
     }
-    img.decode().catch(e => $gVhhF$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 $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-    get when() {
-      return hasDecoded();
-    },
-    children: img
+    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 [$gVhhF$solidjsweb.memo(() => (props.wrapTabBar || (v => v))((() => {
+    const _el$2 = $gVhhF$solidjsweb.getNextElement($8c38828ae2321937$var$_tmpl$2);
+    $gVhhF$solidjsweb.insert(_el$2, (() => {
+      const _c$ = $gVhhF$solidjsweb.memo(() => !!props.slidable);
+      return () => _c$() ? $gVhhF$solidjsweb.createComponent((0, $a0e53f99354809d9$export$6649caad96ef8870), {
+        children: headerItems
+      }) : headerItems;
+    })());
+    return _el$2;
+  })())), (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($8c38828ae2321937$var$_tmpl$);
+    $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
+      get each() {
+        return tabsReactive();
+      },
+      children: item => {
+        const weSelected = $gVhhF$solidjs.createMemo(() => isSelected(item().id));
+        $gVhhF$solidjs.createEffect(() => {
+          if (weSelected()) {
+            setTabsVisitedOnce(prev => {
+              prev.add(item().id);
+              return prev;
+            });
+            $gVhhF$solidjs.untrack(() => item().onSelected?.());
+          }
+        });
+        $gVhhF$solidjs.onCleanup(() => setTabsVisitedOnce(prev => (prev.delete(item().id), prev)));
+        return (() => {
+          const _el$3 = $gVhhF$solidjsweb.getNextElement($8c38828ae2321937$var$_tmpl$3);
+          $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+            get when() {
+              return tabsVisitedOnce().has(item().id);
+            },
+            get children() {
+              return item().children;
+            }
+          }));
+          $gVhhF$solidjsweb.effect(_p$ => {
+            const _v$ = item().id,
+              _v$2 = !!weSelected(),
+              _v$3 = weSelected() ? "" : "none";
+            _v$ !== _p$._v$ && $gVhhF$solidjsweb.setAttribute(_el$3, "id", _p$._v$ = _v$);
+            _v$2 !== _p$._v$2 && _el$3.classList.toggle("selected", _p$._v$2 = _v$2);
+            _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$3.style.setProperty("display", _v$3) : _el$3.style.removeProperty("display"));
+            return _p$;
+          }, {
+            _v$: undefined,
+            _v$2: undefined,
+            _v$3: undefined
+          });
+          return _el$3;
+        })();
+      }
+    }));
+    return _el$;
+  })()];
 }
-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;
+function $8c38828ae2321937$export$3e41faf802a29e71(props) {
+  const currentTabs = $8c38828ae2321937$var$useTabs();
+  if (!currentTabs) throw new Error("Tab must be a child of Tabs");
+  const id = $gVhhF$solidjs.createUniqueId();
+  const ourSet = currentTabs;
+  const extendedProps = $gVhhF$solidjs.mergeProps({
+    id: id
+  }, props);
+  ourSet.add(extendedProps);
+  $gVhhF$solidjs.onCleanup(() => ourSet.delete(extendedProps));
+  return undefined;
 }
-const $a33065cfed827fc0$var$backupSizeSignal = /*@__PURE__*/$gVhhF$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] = $gVhhF$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 = $gVhhF$solidjsweb.createComponent((0, $93304d59a9747aa6$export$94026ee33dbabc26), {
-    get aspectRatio() {
-      return props.aspectRatio;
-    },
-    get ["class"]() {
-      return props.class;
+async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
+  const body = parent || (await (0, $gVhhF$depictaiutilishared.observer).wait_for_element("body"));
+  let dispose_and_remove;
+  const open_modal_ = $gVhhF$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 = $gVhhF$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();
+          $gVhhF$depictaiutilishared.catchify(closing_animation)()?.then($gVhhF$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_ = $gVhhF$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();
     }
   });
-  const owner = $gVhhF$solidjs.getOwner();
-  let createdSizeAccessor = false;
-  let wasCleanedUp = false;
-  $gVhhF$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(() => $gVhhF$solidjs.runWithOwner(owner, () => $19950faaac026e09$export$e6fffe67d4cdd848(container)));
+  return {
+    open_modal_: open_modal_,
+    close_modal_: close_modal_
+  };
+}
+function $6e22b5314fb52f4c$export$e183a13865960371(params_to_default_value, router_) {
+  const signals = {};
+  const entries = Object.entries(params_to_default_value);
+  const event_handler = $gVhhF$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);
   });
-  $gVhhF$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;
-    $gVhhF$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
+  // createRenderEffect because we need the instant execution so the signals always contain values, even before solid's render phase
+  $gVhhF$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] ||= $gVhhF$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);
   });
-
-  $gVhhF$solidjsweb.insert(container, $gVhhF$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), {
-    style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
-    get size() {
-      return $gVhhF$solidjs.createMemo(() => currentImageSize()?.() || 0);
+  // 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, $gVhhF$depictaiutilishared.instant_exec_on_suspect_history_change).add(event_handler);
+  $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.catchify(() => (0, $gVhhF$depictaiutilishared.instant_exec_on_suspect_history_change).delete(event_handler)));
+  $gVhhF$solidjs.createEffect($gVhhF$depictaiutilishared.catchify(() => $gVhhF$solidjs.untrack($gVhhF$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) {
+  $gVhhF$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) {
+        $gVhhF$depictaiutilishared.report([e, "Failed to preserve items in history.state"], "error");
+      }
+      return Reflect.apply(target, this_arg, arg_list);
+    }
+  });
+}
+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, $gVhhF$depictaiutilishared.instant_exec_on_suspect_history_change).delete(handler);
+        }
+      };
+      (0, $gVhhF$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, "");
     },
-    get src() {
-      return props.src;
+    /**
+    * 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_: $gVhhF$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
+          $gVhhF$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) $gVhhF$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 = $gVhhF$depictaiutilishared.catchify(animation.play.bind(animation));
+      cleanup_fns.push(fn);
+      $gVhhF$solidjs.onCleanup(fn);
+    } catch (e) {
+      $gVhhF$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 = $gVhhF$depictaiutilishared.catchify(() => style.overflow = original_value);
+      cleanup_fns.push(fn);
+      $gVhhF$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$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div><!$><!/><!$><!/>`);
+function $edafe91daf3091d7$export$b69d0d92862de18b(props) {
+  return $gVhhF$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 $gVhhF$depictaiutilishared.report([err, message_], severity_);
+      return (() => {
+        const _el$ = $gVhhF$solidjsweb.getNextElement($edafe91daf3091d7$var$_tmpl$),
+          _el$2 = _el$.firstChild,
+          [_el$3, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$2.nextSibling),
+          _el$4 = _el$3.nextSibling,
+          [_el$5, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$4.nextSibling);
+        $gVhhF$solidjsweb.insert(_el$, message, _el$3, _co$);
+        $gVhhF$solidjsweb.insert(_el$, () => props.on_error_?.(retry), _el$5, _co$2);
+        $gVhhF$solidjsweb.effect(_$p => $gVhhF$solidjsweb.classList(_el$, Object.fromEntries(props.class_list_?.map(c => [c, true]) || []), _$p));
+        return _el$;
+      })();
     },
-    get alt() {
-      return props.alt;
+    get children() {
+      return props.children;
     }
-  }));
-  return container;
+  });
 }
-const $0f313083912e447a$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<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>`);
-function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
+const $c77c68e559a1506c$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg width=21.064 height=21.064 viewBox="0 0 21.064 21.064"><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">`);
+function $c77c68e559a1506c$export$3b621d86b1566b2(props = {}) {
   return (() => {
-    const _el$ = $gVhhF$solidjsweb.getNextElement($0f313083912e447a$var$_tmpl$);
+    const _el$ = $gVhhF$solidjsweb.getNextElement($c77c68e559a1506c$var$_tmpl$);
+    $gVhhF$solidjsweb.spread(_el$, props, true, true);
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$;
+  })();
+}
+const $9fe9883b1d8ecccc$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span>`);
+function $9fe9883b1d8ecccc$export$acb3eaade4b23afd(props) {
+  return (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($9fe9883b1d8ecccc$var$_tmpl$);
     $gVhhF$solidjsweb.effect(_p$ => {
-      const _v$ = props.width_ ?? 14,
-        _v$2 = props.height_ ?? 26;
-      _v$ !== _p$._v$ && $gVhhF$solidjsweb.setAttribute(_el$, "width", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && $gVhhF$solidjsweb.setAttribute(_el$, "height", _p$._v$2 = _v$2);
+      const _v$ = `depict-placeholder ${props.class || ""}`,
+        _v$2 = props.style;
+      _v$ !== _p$._v$ && $gVhhF$solidjsweb.className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = $gVhhF$solidjsweb.style(_el$, _v$2, _p$._v$2);
       return _p$;
     }, {
       _v$: undefined,
@@ -485,109 +629,149 @@ function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
     return _el$;
   })();
 }
-const $a0e53f99354809d9$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<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, $gVhhF$depictaiutilishared.Amazing_Slider)({
-    button_contents: {
-      left: [(() => {
-        const _el$ = $gVhhF$solidjsweb.getNextElement($a0e53f99354809d9$var$_tmpl$);
-        $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
-          height_: arrow_height_,
-          width_: arrow_width_
-        }));
-        return _el$;
-      })()],
-      right: [(() => {
-        const _el$2 = $gVhhF$solidjsweb.getNextElement($a0e53f99354809d9$var$_tmpl$);
-        $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
-          height_: arrow_height_,
-          width_: arrow_width_
-        }));
-        return _el$2;
-      })()]
+function $3bc4a89b971a3af5$export$3f37af283f8fb843(props) {
+  const style = $gVhhF$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 $gVhhF$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
+    get style() {
+      return style();
     },
-    constructor_plugins: [$gVhhF$depictaiutilishared.slider_snap_css().constructor_plugin],
-    mutation_plugins: [...(disable_fading_ ? [] : [$gVhhF$depictaiutilishared.slider_fading_factory({
-      threshold_: 0.96,
-      faded_opacity_: faded_opacity_
-    }).mutation_plugin_]), ...mutation_plugins_]
+    get ["class"]() {
+      return props.class;
+    }
   });
-  $gVhhF$solidjsweb.insert(slider.insert_here, children);
-  $gVhhF$solidjs.onCleanup(() => slider.observer.disconnect());
-  slider_ref_?.(slider);
-  return slider.container;
 }
-
-/** @jsxImportSource solid-js */
-
-function $f13855d1b951b24a$export$ebdc3711f7e02ccd(what_to_watch) {
-  const [width, setWidth] = $gVhhF$solidjs.createSignal();
-  const resizeObserver = new ResizeObserver($gVhhF$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 $bbe694fe824b9c78$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=image-container>`);
+function $bbe694fe824b9c78$export$41e1a079d40a0d58(props) {
+  const [display] = $gVhhF$solidjs.createResource(() => ({
+    merchant: props.merchant_,
+    market: props.market_,
+    locale: props.locale_,
+    product_ids: [props.productId_]
+  }), async request => {
+    const response = await fetch($gVhhF$depictaiutilishared.add_version_query_params(`${(0, $gVhhF$depictaiutilishared.base_url)}/v3/get-displays`), {
+      method: "POST",
+      body: JSON.stringify(request)
+    });
+    const decoded = await response.json();
+    return decoded.displays[0];
+  });
+  const placeholder = $gVhhF$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
+    get aspectRatio() {
+      return props.imageAspectRatio_;
     }
-  }));
-  // 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, $gVhhF$depictaiutilishared.observer).onexists(what_to_watch, ({
-    element: element
-  }) => requestAnimationFrame($gVhhF$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);
-  })));
-  $gVhhF$solidjs.onCleanup(() => {
-    resizeObserver.disconnect();
-    disconnect();
   });
-  return width;
+  return (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($bbe694fe824b9c78$var$_tmpl$);
+    $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
+      fallback: placeholder,
+      get children() {
+        return (() => {
+          const imageUrl = $gVhhF$solidjs.createMemo(() => {
+            const d = display();
+            const variant = d?.variant_displays[d?.variant_index];
+            return variant?.image_urls?.[0] || variant?.display_image_url;
+          });
+          return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+            get when() {
+              return imageUrl();
+            },
+            fallback: "Cannot load image",
+            get children() {
+              return $gVhhF$solidjsweb.createComponent((0, $gVhhF$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"
+              });
+            }
+          });
+        })();
+      }
+    }));
+    return _el$;
+  })();
 }
-const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
-  const cols_at_size = [];
-  for (let i = 0; i < sorted_cols_at_size.length; i++) {
-    const [nb_cols, width] = sorted_cols_at_size[i];
-    const next_width = sorted_cols_at_size[i + 1]?.[1];
-    const max_width = i === 0 ? "" : `${width}px`;
-    const min_width = next_width !== undefined ? `${next_width + 1}px` : "";
-    const col_at_size = [nb_cols, min_width, max_width];
-    cols_at_size.push(col_at_size);
-  }
-  return cols_at_size;
-};
-const $4e04be41243c3d80$export$6daf8749b65a1b77 = cols_at_size => {
-  // Check that every element is an array
-  const are_arrays = cols_at_size.every(element => Array.isArray(element));
-  if (!are_arrays) throw new Error("Every element in cols_at_size must be an array");
-  // Check width duplicates
-  const widths = cols_at_size.map(([_, width]) => width);
-  const widths_set = new Set(widths);
-  if (widths_set.size < widths.length) throw new Error("There are duplicate widths in cols_at_size");
-  if (cols_at_size.length === 1) {
-    const [nb_cols, width] = cols_at_size[0];
-    const max_width = width !== undefined ? `${width}px` : "";
-    return [[nb_cols, "", max_width]];
-  }
-  // Sort widths in ascending order
-  const sorted_cols_at_size = [...cols_at_size].sort((a, b) => {
-    const [_b, width_A] = a;
-    const [_a, width_b] = b;
-    if (width_A === undefined) return -1;
-    if (width_b === undefined) return 1;
-    return width_b - width_A;
+function $061ff5b4c3d36171$export$89c6019e4baa40b1(props) {
+  const style = $gVhhF$solidjs.createMemo(() => {
+    const {
+      style: style,
+      height: height,
+      width: width
+    } = props;
+    return {
+      ...(style || {}),
+      height: height ?? "1em",
+      ...(width && {
+        width: width
+      })
+    };
   });
-  return $4e04be41243c3d80$var$transform_elements(sorted_cols_at_size);
-};
+  return $gVhhF$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$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=category-title><h1 class=title></h1><span class=explanation> \u{2014} <!$><!/>`);
+const $0b23bfd073d9a4e8$export$b91cec6bdc6b32a1 = /*@__PURE__*/(() => {
+  const actual_function = ({
+    category_title_: category_title_,
+    product_count_: product_count_
+  }) => {
+    return (() => {
+      const _el$ = $gVhhF$solidjsweb.getNextElement($0b23bfd073d9a4e8$var$_tmpl$),
+        _el$2 = _el$.firstChild,
+        _el$3 = _el$2.nextSibling,
+        _el$4 = _el$3.firstChild,
+        _el$5 = _el$4.nextSibling,
+        [_el$6, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$5.nextSibling);
+      $gVhhF$solidjsweb.insert(_el$2, () => category_title_() || $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+        height: "1em",
+        width: "10ch"
+      }));
+      $gVhhF$solidjsweb.insert(_el$3, product_count_, _el$6, _co$);
+      return _el$;
+    })();
+  };
+  // 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, $gVhhF$solidjsweb.isServer) ? {
@@ -730,8 +914,6 @@ function $a73063cc642f3e5f$export$7f8bd308237ab5a5(get_displays_) {
 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_
@@ -752,10 +934,9 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
           return prev;
         return new_display;
       });
-      const [product_card_resource] = $gVhhF$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]) => {
+      const [product_card_resource] = $gVhhF$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
@@ -768,12 +949,9 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
           }
         }
         return product_card_template_(display, {
-          set_on_index_change: fn => $gVhhF$solidjs.runWithOwner(owner, () => $gVhhF$solidjs.createEffect(() => fn(index()))),
-          merchant: merchant,
-          market: market // recommendation_grid can provide a sneaky undefined here just FYI
+          set_on_index_change: fn => $gVhhF$solidjs.runWithOwner(owner, () => $gVhhF$solidjs.createEffect(() => fn(index())))
         });
       });
-
       const node_accessor = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(product_card_resource);
       $gVhhF$solidjs.createEffect(() => {
         const product_card_nodes = node_accessor();
@@ -824,46 +1002,6 @@ function $a73063cc642f3e5f$var$deep_equal(obj1, obj2) {
   }
   return false;
 }
-
-// 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$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div><!$><!/><!$><!/>`);
-function $edafe91daf3091d7$export$b69d0d92862de18b(props) {
-  return $gVhhF$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 $gVhhF$depictaiutilishared.report([err, message_], severity_);
-      return (() => {
-        const _el$ = $gVhhF$solidjsweb.getNextElement($edafe91daf3091d7$var$_tmpl$),
-          _el$2 = _el$.firstChild,
-          [_el$3, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$2.nextSibling),
-          _el$4 = _el$3.nextSibling,
-          [_el$5, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$4.nextSibling);
-        $gVhhF$solidjsweb.insert(_el$, message, _el$3, _co$);
-        $gVhhF$solidjsweb.insert(_el$, () => props.on_error_?.(retry), _el$5, _co$2);
-        $gVhhF$solidjsweb.effect(_$p => $gVhhF$solidjsweb.classList(_el$, Object.fromEntries(props.class_list_?.map(c => [c, true]) || []), _$p));
-        return _el$;
-      })();
-    },
-    get children() {
-      return props.children;
-    }
-  });
-}
 const $f48d0fbb00835aaa$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`),
   $f48d0fbb00835aaa$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<style type=text/css>`);
 function $f48d0fbb00835aaa$export$d21e32dfedac04be(props) {
@@ -943,69 +1081,1016 @@ function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, ins
     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);
   });
-  $gVhhF$solidjs.createEffect(() => set_force_style_update(" ")); // force style update after hydration due to https://discord.com/channels/722131463138705510/722167424186843267/1151544212517552168
-  $gVhhF$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;
+  $gVhhF$solidjs.createEffect(() => set_force_style_update(" ")); // force style update after hydration due to https://discord.com/channels/722131463138705510/722167424186843267/1151544212517552168
+  $gVhhF$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;
+    }
+    update_children_count();
+    if (!(0, $gVhhF$solidjsweb.isServer)) {
+      const mutation_observer = new MutationObserver($gVhhF$depictaiutilishared.catchify(update_children_count));
+      mutation_observer.observe(container_element, {
+        childList: true
+      });
+      $gVhhF$solidjs.onCleanup(() => mutation_observer.disconnect());
+    }
+    set_styling(
+    // this is needed because solid will think that the memo-accessor is a setter function otherwise
+    () => $gVhhF$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 = $gVhhF$depictaiutilishared.layout_get_visible_recs_without_partial_rows(rows_visible, children_count, options);
+          const visible_recs_next_show_more = $gVhhF$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 = $gVhhF$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 `${$gVhhF$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("");
+    }));
+  });
+  const style_element = (() => {
+    const _el$4 = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$2);
+    $gVhhF$solidjsweb.insert(_el$4, get_styling);
+    return _el$4;
+  })(); // 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, $gVhhF$solidjsweb.memo(view_more_button_container), $gVhhF$solidjsweb.memo(view_less_button_container), style_element];
+}
+$gVhhF$solidjsweb.delegateEvents(["click"]);
+const $b8e79813f4f7ebe4$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<h2 class=recs-title>`),
+  $b8e79813f4f7ebe4$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=recommendation-grid><!$><!/><!$><!/>`);
+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 = $gVhhF$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $gVhhF$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
+  const num_placeholders_ = () => 20;
+  const elements = [$gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      const _el$ = $gVhhF$solidjsweb.getNextElement($b8e79813f4f7ebe4$var$_tmpl$);
+      $gVhhF$solidjsweb.insert(_el$, title);
+      return _el$;
+    }
+  }), (() => {
+    const _el$2 = $gVhhF$solidjsweb.getNextElement($b8e79813f4f7ebe4$var$_tmpl$2),
+      _el$3 = _el$2.firstChild,
+      [_el$4, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$3.nextSibling),
+      _el$5 = _el$4.nextSibling,
+      [_el$6, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$5.nextSibling);
+    $gVhhF$solidjsweb.insert(_el$2, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), _el$4, _co$);
+    $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $gVhhF$solidjsweb.mergeProps({
+      get rows() {
+        return rows_object_();
+      },
+      layout: "grid",
+      element_attributes: {
+        class: "cards"
+      }
+    }, layout_options_, {
+      get children() {
+        return $gVhhF$solidjsweb.createComponent((0, $gVhhF$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($gVhhF$solidjs.createMemo(() => recommendations_resource_() || []));
+              return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
+                displays_by_key_: displays_by_key_,
+                product_card_template_: product_card_template_
+              });
+            })();
+          }
+        });
+      }
+    })), _el$6, _co$2);
+    return _el$2;
+  })()];
+  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+    get when() {
+      return is_showing_something();
+    },
+    children: elements
+  });
+}
+const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
+  const cols_at_size = [];
+  for (let i = 0; i < sorted_cols_at_size.length; i++) {
+    const [nb_cols, width] = sorted_cols_at_size[i];
+    const next_width = sorted_cols_at_size[i + 1]?.[1];
+    const max_width = i === 0 ? "" : `${width}px`;
+    const min_width = next_width !== undefined ? `${next_width + 1}px` : "";
+    const col_at_size = [nb_cols, min_width, max_width];
+    cols_at_size.push(col_at_size);
+  }
+  return cols_at_size;
+};
+const $4e04be41243c3d80$export$6daf8749b65a1b77 = cols_at_size => {
+  // Check that every element is an array
+  const are_arrays = cols_at_size.every(element => Array.isArray(element));
+  if (!are_arrays) throw new Error("Every element in cols_at_size must be an array");
+  // Check width duplicates
+  const widths = cols_at_size.map(([_, width]) => width);
+  const widths_set = new Set(widths);
+  if (widths_set.size < widths.length) throw new Error("There are duplicate widths in cols_at_size");
+  if (cols_at_size.length === 1) {
+    const [nb_cols, width] = cols_at_size[0];
+    const max_width = width !== undefined ? `${width}px` : "";
+    return [[nb_cols, "", max_width]];
+  }
+  // Sort widths in ascending order
+  const sorted_cols_at_size = [...cols_at_size].sort((a, b) => {
+    const [_b, width_A] = a;
+    const [_a, width_b] = b;
+    if (width_A === undefined) return -1;
+    if (width_b === undefined) return 1;
+    return width_b - width_A;
+  });
+  return $4e04be41243c3d80$var$transform_elements(sorted_cols_at_size);
+};
+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 = $gVhhF$solidjs.getOwner();
+  if (owner == null) return $gVhhF$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, $gVhhF$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();
+}
+const $84798aaa863a4909$var$ListingContext = /*@__PURE__*/$gVhhF$solidjs.createContext();
+function $84798aaa863a4909$export$e68cff63f76bd15b(props) {
+  const our_object = {};
+  return $gVhhF$solidjsweb.createComponent($84798aaa863a4909$var$ListingContext.Provider, {
+    value: our_object,
+    get children() {
+      return props.children;
+    }
+  });
+}
+function $84798aaa863a4909$export$8d0c4fdbb05a2f2e() {
+  return $gVhhF$solidjs.useContext($84798aaa863a4909$var$ListingContext);
+}
+const $1f8dbf7e28b3eff2$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="show-more major"type=button>`),
+  $1f8dbf7e28b3eff2$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict plp recommendations">`);
+function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
+  return $95837413165cc2df$export$23fca46f3143581f(() => {
+    const rows_object_ = $gVhhF$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: (() => {
+          const _el$ = $gVhhF$solidjsweb.getNextElement($1f8dbf7e28b3eff2$var$_tmpl$);
+          $gVhhF$solidjsweb.insert(_el$, () => view_more_button.text);
+          return _el$;
+        })()
+      };
+    });
+    const grid_spacing_override = $gVhhF$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_] = $gVhhF$solidjs.createResource(() => props.recommendations, recs => recs);
+    return (() => {
+      const _el$2 = $gVhhF$solidjsweb.getNextElement($1f8dbf7e28b3eff2$var$_tmpl$2);
+      $gVhhF$solidjsweb.insert(_el$2, $gVhhF$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_: $gVhhF$solidjs.createMemo(() => ({
+              cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
+              ...grid_spacing_override()
+            }))
+          });
+        }
+      }));
+      return _el$2;
+    })();
+  }, "RecommendationGrid failed");
+}
+const $f55548318724b05c$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<a>`);
+function $f55548318724b05c$export$6b35356958ae5587(props) {
+  const gridSpacing = (0, $a3280f0aad997933$export$864d304a0bc46829);
+  const columnsAtSize = [[3], [2, 901]];
+  const href = $gVhhF$depictaiutilishared.use_href_accessor();
+  const hrefWithoutHash = $gVhhF$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 = $gVhhF$solidjs.children(() => returnValue);
+    $gVhhF$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", $gVhhF$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)
+        $gVhhF$solidjs.runWithOwner(props.modalOwner_, () => $gVhhF$solidjs.createEffect($gVhhF$solidjs.on(hrefWithoutHash, props.actually_close_modal_, {
+          defer: true
+        })))), {
+          capture: true
+        });
+      }
+    });
+    return resolved;
+  };
+  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+    get when() {
+      return !props.products_to_shop_.error;
+    },
+    fallback: "Failed fetching shop by look recommendations",
+    get children() {
+      return $gVhhF$solidjsweb.createComponent((0, $8c38828ae2321937$export$b2539bed5023c21c), {
+        AnchorComponent: anchorProps => (() => {
+          const _el$ = $gVhhF$solidjsweb.getNextElement($f55548318724b05c$var$_tmpl$);
+          _el$.$$click = e => {
+            const {
+              href: href
+            } = anchorProps;
+            if (!href) return;
+            props.pseudo_router_.navigate_.go_to_({
+              scroll: false,
+              is_replace_: false,
+              new_url_: new URL(href),
+              event_: e
+            });
+          };
+          $gVhhF$solidjsweb.spread(_el$, anchorProps, false, true);
+          $gVhhF$solidjsweb.insert(_el$, () => anchorProps.children);
+          $gVhhF$solidjsweb.runHydrationEvents();
+          return _el$;
+        })(),
+        get children() {
+          return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
+            get fallback() {
+              return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
+                get each() {
+                  return Array.from({
+                    length: 2
+                  });
+                },
+                children: () => $gVhhF$solidjsweb.createComponent((0, $8c38828ae2321937$export$3e41faf802a29e71), {
+                  get label() {
+                    return $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+                      height: "1em",
+                      width: "10ch"
+                    });
+                  },
+                  get children() {
+                    return $gVhhF$solidjsweb.createComponent((0, $1f8dbf7e28b3eff2$export$9756467d34d91cdb), {
+                      grid_spacing: gridSpacing,
+                      cols_at_size: columnsAtSize,
+                      recommendations: new Promise(r => $gVhhF$solidjs.onCleanup(() => r([]))),
+                      get product_card_template() {
+                        return props.productCardTemplate_;
+                      },
+                      max_rows: 2
+                    });
+                  }
+                })
+              });
+            },
+            get children() {
+              return (() => {
+                const groups = $gVhhF$solidjs.createMemo(() => Object.keys(props.products_to_shop_()?.shop_the_look || {}));
+                return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.For), {
+                  get each() {
+                    return groups();
+                  },
+                  children: group => $gVhhF$solidjsweb.createComponent((0, $8c38828ae2321937$export$3e41faf802a29e71), {
+                    label: group,
+                    get id() {
+                      return "shop-the-look-" + group.replaceAll(" ", "-").toLowerCase();
+                    },
+                    get children() {
+                      return $gVhhF$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 = $gVhhF$solidjs.getOwner();
+                            return returnValue.then(returnValue => $gVhhF$solidjs.runWithOwner(owner, () => makeJSXElementCloseModalWhenClicked(returnValue)));
+                          }
+                          return makeJSXElementCloseModalWhenClicked(returnValue);
+                        }
+                      });
+                    }
+                  })
+                });
+              })();
+            }
+          });
+        }
+      });
+    }
+  });
+}
+$gVhhF$solidjsweb.delegateEvents(["click"]);
+const $b0ceb08960135d83$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=top-bar><button class=close>`),
+  $b0ceb08960135d83$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=below-top-bar><h2>Outfit recommendations</h2><div class=image-and-suggestions><!$><!/><div class=tabs>`),
+  $b0ceb08960135d83$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div id=depict-shop-the-look-modal class="depict shop-the-look"><div class=shop-the-look-backdrop></div><div class=modal-contents>`);
+function $b0ceb08960135d83$export$a3cbef418994a664(props) {
+  const pseudo_router_ = new (0, $e96dd13889871fc0$export$7e1297a3a19f10d8)(props.onNavigation);
+  const closing_animations = [];
+  const owner = $gVhhF$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 [(() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($b0ceb08960135d83$var$_tmpl$3),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling;
+    const _ref$ = $gVhhF$depictaiutilishared.catchify(element => {
+      const disconnect = (0, $gVhhF$depictaiutilishared.observer).onexists(element, ({
+        element: element
+      }) => {
+        const animation = element.animate({
+          opacity: [0, 1],
+          backdropFilter: ["blur(0)", "blur(3px)"]
+        }, {
+          duration: 150,
+          fill: "forwards",
+          easing: "ease-in-out"
+        });
+        closing_animations.push(() => (animation.reverse(), animation));
+      });
+      $gVhhF$solidjs.onCleanup(disconnect);
+    });
+    typeof _ref$ === "function" && $gVhhF$solidjsweb.use(_ref$, _el$2);
+    $gVhhF$solidjsweb.addEventListener(_el$2, "click", props.actually_close_modal_, true);
+    $gVhhF$solidjsweb.use(element => {
+      const disconnect = (0, $gVhhF$depictaiutilishared.observer).onexists(element, ({
+        element: element
+      }) => element.animate({
+        opacity: [0, 1],
+        transform: isBig() ? ["translate(-50%,-150%)", "translate(-50%,-50%)"] : ["translate(-50%,80%)", "translate(-50%,0%)"]
+      }, {
+        duration: 250,
+        easing: "ease-in"
+      }));
+      closing_animations.push(() => element.animate({
+        opacity: [1, 0],
+        transform: isBig() ? ["translate(-50%,-50%)", "translate(-50%,-150%)"] : ["translate(-50%,0%)", "translate(-50%,80%)"]
+      }, {
+        duration: 150,
+        easing: "ease-out"
+      }));
+      $gVhhF$solidjs.onCleanup(disconnect);
+    }, _el$3);
+    $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
+      message_: "ShopTheLookModal failed",
+      severity_: "error",
+      get children() {
+        return [(() => {
+          const _el$4 = $gVhhF$solidjsweb.getNextElement($b0ceb08960135d83$var$_tmpl$),
+            _el$5 = _el$4.firstChild;
+          $gVhhF$solidjsweb.addEventListener(_el$5, "click", props.actually_close_modal_, true);
+          $gVhhF$solidjsweb.insert(_el$5, $gVhhF$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {
+            width: 16,
+            height: 16
+          }));
+          $gVhhF$solidjsweb.runHydrationEvents();
+          return _el$4;
+        })(), (() => {
+          const _el$6 = $gVhhF$solidjsweb.getNextElement($b0ceb08960135d83$var$_tmpl$2),
+            _el$7 = _el$6.firstChild,
+            _el$8 = _el$7.nextSibling,
+            _el$10 = _el$8.firstChild,
+            [_el$11, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$10.nextSibling),
+            _el$9 = _el$11.nextSibling;
+          $gVhhF$solidjsweb.insert(_el$8, $gVhhF$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;
+            }
+          }), _el$11, _co$);
+          $gVhhF$solidjsweb.insert(_el$9, $gVhhF$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_;
+            }
+          }));
+          return _el$6;
+        })()];
+      }
+    }));
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$;
+  })()];
+}
+$gVhhF$solidjsweb.delegateEvents(["click"]);
+const $a5f3eaa1a24bbc1e$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>Failed fetching shop the look recommendations`),
+  $a5f3eaa1a24bbc1e$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button>`);
+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 $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.ErrorBoundary), {
+    fallback: () => $gVhhF$solidjsweb.getNextElement($a5f3eaa1a24bbc1e$var$_tmpl$),
+    get children() {
+      return $gVhhF$solidjsweb.createComponent($a5f3eaa1a24bbc1e$var$ActualShopTheLookButton, props);
+    }
+  });
+}
+function $a5f3eaa1a24bbc1e$var$ActualShopTheLookButton(props) {
+  const [products_to_shop_] = $gVhhF$solidjs.createResource(() => ({
+    merchant: props.merchant,
+    market: props.market,
+    locale: props.locale,
+    product_ids: [props.productId],
+    type: "shop_the_look",
+    session_id: $gVhhF$depictaiutilishared.get_session_id()
+  }), async request => {
+    const response = await fetch($gVhhF$depictaiutilishared.add_version_query_params(`${(0, $gVhhF$depictaiutilishared.base_url)}/v3/shop-the-look`), {
+      method: "POST",
+      body: JSON.stringify(request)
+    });
+    if (!response.ok) {
+      $gVhhF$depictaiutilishared.dwarn(response);
+      throw new Error($a5f3eaa1a24bbc1e$var$CANT_FETCH);
+    }
+    const decoded = await response.json();
+    return decoded;
+  });
+  const [localProps, partForModal] = $gVhhF$solidjs.splitProps(props, ["buttonAttributes"]);
+  const {
+    openModal: openModal,
+    closeModal: closeModal
+  } = $a5f3eaa1a24bbc1e$var$useShopTheLookModal();
+  const hasAnythingToShow = $gVhhF$solidjs.createMemo(() => Object.entries(products_to_shop_()?.shop_the_look || {}).length);
+  const displayStyleValue = $gVhhF$solidjs.createMemo(() => hasAnythingToShow() ? "" : "none");
+  const button = (() => {
+    const _el$2 = $gVhhF$solidjsweb.getNextElement($a5f3eaa1a24bbc1e$var$_tmpl$2);
+    $gVhhF$solidjsweb.spread(_el$2, $gVhhF$solidjsweb.mergeProps(() => localProps.buttonAttributes), false, true);
+    $gVhhF$solidjsweb.insert(_el$2, () => localProps?.buttonAttributes?.children || "Shop the look");
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$2;
+  })();
+  $gVhhF$solidjs.createEffect(() => button.style.display = displayStyleValue()); // Set our attributes like this, so we allow total control over the button from the outside via buttonAttributes
+  $gVhhF$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 = $gVhhF$solidjs.mergeProps(partForModal, {
+    products_to_shop_: products_to_shop_
+  });
+  button.addEventListener("click", openModal);
+  return button;
+}
+/**
+ * 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 $a5f3eaa1a24bbc1e$var$useShopTheLookModal() {
+  if ($a5f3eaa1a24bbc1e$var$setModalShouldBeOpen) return $a5f3eaa1a24bbc1e$var$setModalShouldBeOpen;
+  return $a5f3eaa1a24bbc1e$var$setModalShouldBeOpen = $gVhhF$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 = $gVhhF$solidjs.getOwner();
+  $gVhhF$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_
+    });
+    $gVhhF$solidjs.runWithOwner(owner, () => $gVhhF$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];
+};
+/**
+ * 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);
+}
+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);
+}
+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 $gVhhF$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($gVhhF$depictaiutilishared.base64_decode_unicode(encoded_data));
+  } catch (e) {
+    $gVhhF$depictaiutilishared.dlog("Failed to fallback parse filter data", op, encoded_data, e);
+  }
+  return null;
+}
+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);
+  }
+}
+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;
+}
+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"
+  };
+  $gVhhF$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$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`);
+function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
+  return (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($93304d59a9747aa6$var$_tmpl$);
+    $gVhhF$solidjsweb.effect(_p$ => {
+      const _v$ = `position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`,
+        _v$2 = props.class;
+      _p$._v$ = $gVhhF$solidjsweb.style(_el$, _v$, _p$._v$);
+      _v$2 !== _p$._v$2 && $gVhhF$solidjsweb.className(_el$, _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+    return _el$;
+  })();
+}
+function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
+  const [size, setSize] = $gVhhF$solidjs.createSignal(0);
+  const resizeObserver = new ResizeObserver($gVhhF$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, $gVhhF$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, $gVhhF$depictaiutilishared.observer).onexists(whatToWatch, ({
+    element: element
+  }) => requestAnimationFrame($gVhhF$depictaiutilishared.catchify(() => resizeObserver.observe(element))));
+  $gVhhF$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
+  return size;
+}
+const $19950faaac026e09$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
+function $19950faaac026e09$export$6e5611bc7e57e477(props) {
+  // Enable reactive props
+  const otherOptions = $gVhhF$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 src_options = $gVhhF$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
+    };
+  });
+  // 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] = $gVhhF$solidjs.createSignal(false);
+  const [hasDecoded, setHasDecoded] = $gVhhF$solidjs.createSignal(false);
+  const sizePX = $gVhhF$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;
+  $gVhhF$solidjs.onCleanup(() => gotCleanedUp = true);
+  $gVhhF$solidjsweb.spread(img, $gVhhF$solidjs.mergeProps(otherOptions), false, true);
+  $gVhhF$solidjs.createEffect(() => {
+    if (!props.size()) return; // wait until we have a size
+    if (timeoutSet) return;
+    const handler = $gVhhF$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;
+  });
+  $gVhhF$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;
+    }
+    img.decode().catch(e => $gVhhF$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 $gVhhF$solidjsweb.createComponent((0, $gVhhF$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;
+}
+const $a33065cfed827fc0$var$backupSizeSignal = /*@__PURE__*/$gVhhF$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] = $gVhhF$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 = $gVhhF$solidjsweb.createComponent((0, $93304d59a9747aa6$export$94026ee33dbabc26), {
+    get aspectRatio() {
+      return props.aspectRatio;
+    },
+    get ["class"]() {
+      return props.class;
+    }
+  });
+  const owner = $gVhhF$solidjs.getOwner();
+  let createdSizeAccessor = false;
+  let wasCleanedUp = false;
+  $gVhhF$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(() => $gVhhF$solidjs.runWithOwner(owner, () => $19950faaac026e09$export$e6fffe67d4cdd848(container)));
+  });
+  $gVhhF$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;
+    $gVhhF$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
+  });
+
+  $gVhhF$solidjsweb.insert(container, $gVhhF$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), {
+    style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
+    get size() {
+      return $gVhhF$solidjs.createMemo(() => currentImageSize()?.() || 0);
+    },
+    get src() {
+      return props.src;
+    },
+    get alt() {
+      return props.alt;
     }
-    update_children_count();
-    if (!(0, $gVhhF$solidjsweb.isServer)) {
-      const mutation_observer = new MutationObserver($gVhhF$depictaiutilishared.catchify(update_children_count));
-      mutation_observer.observe(container_element, {
-        childList: true
-      });
-      $gVhhF$solidjs.onCleanup(() => mutation_observer.disconnect());
+  }));
+  return container;
+}
+
+/** @jsxImportSource solid-js */
+
+function $f13855d1b951b24a$export$ebdc3711f7e02ccd(what_to_watch) {
+  const [width, setWidth] = $gVhhF$solidjs.createSignal();
+  const resizeObserver = new ResizeObserver($gVhhF$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);
     }
-    set_styling(
-    // this is needed because solid will think that the memo-accessor is a setter function otherwise
-    () => $gVhhF$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 = $gVhhF$depictaiutilishared.layout_get_visible_recs_without_partial_rows(rows_visible, children_count, options);
-          const visible_recs_next_show_more = $gVhhF$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 = $gVhhF$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 `${$gVhhF$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("");
-    }));
+  }));
+  // 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, $gVhhF$depictaiutilishared.observer).onexists(what_to_watch, ({
+    element: element
+  }) => requestAnimationFrame($gVhhF$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);
+  })));
+  $gVhhF$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
   });
-  const style_element = (() => {
-    const _el$4 = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$2);
-    $gVhhF$solidjsweb.insert(_el$4, get_styling);
-    return _el$4;
-  })(); // 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, $gVhhF$solidjsweb.memo(view_more_button_container), $gVhhF$solidjsweb.memo(view_less_button_container), style_element];
+  return width;
 }
-$gVhhF$solidjsweb.delegateEvents(["click"]);
 const $363ce4d1d71041aa$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<h2 class=recs-title>`);
 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 = $gVhhF$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
@@ -1039,203 +2124,35 @@ function $363ce4d1d71041aa$export$d41d19e89346fa2({
     },
     get children() {
       return $gVhhF$solidjsweb.createComponent((0, $gVhhF$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($gVhhF$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 $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-    get when() {
-      return is_showing_something();
-    },
-    children: slider
-  });
-}
-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 = $gVhhF$solidjs.getOwner();
-  if (owner == null) return $gVhhF$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, $gVhhF$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();
-}
-const $72f96c4782db0b1b$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict recommendations">`);
-function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
-  return $95837413165cc2df$export$23fca46f3143581f(() => {
-    const grid_spacing_override = $gVhhF$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_] = $gVhhF$solidjs.createResource(() => props.recommendations, recs => recs);
-    return (() => {
-      const _el$ = $gVhhF$solidjsweb.getNextElement($72f96c4782db0b1b$var$_tmpl$);
-      $gVhhF$solidjsweb.insert(_el$, $gVhhF$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_: $gVhhF$solidjs.createMemo(() => ({
-              cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
-              ...grid_spacing_override()
-            }))
-          });
-        }
-      }));
-      return _el$;
-    })();
-  }, "RecommendationSlider failed");
-}
-const $b8e79813f4f7ebe4$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<h2 class=recs-title>`),
-  $b8e79813f4f7ebe4$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=recommendation-grid><!$><!/><!$><!/>`);
-function $b8e79813f4f7ebe4$export$7da560f849543dff({
-  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 = $gVhhF$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
-  const title = $gVhhF$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
-  const num_placeholders_ = () => 20;
-  const elements = [$gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-    get when() {
-      return title();
-    },
-    get children() {
-      const _el$ = $gVhhF$solidjsweb.getNextElement($b8e79813f4f7ebe4$var$_tmpl$);
-      $gVhhF$solidjsweb.insert(_el$, title);
-      return _el$;
-    }
-  }), (() => {
-    const _el$2 = $gVhhF$solidjsweb.getNextElement($b8e79813f4f7ebe4$var$_tmpl$2),
-      _el$3 = _el$2.firstChild,
-      [_el$4, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$3.nextSibling),
-      _el$5 = _el$4.nextSibling,
-      [_el$6, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$5.nextSibling);
-    $gVhhF$solidjsweb.insert(_el$2, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), _el$4, _co$);
-    $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $gVhhF$solidjsweb.mergeProps({
-      get rows() {
-        return rows_object_();
-      },
-      layout: "grid",
-      element_attributes: {
-        class: "cards"
-      }
-    }, layout_options_, {
-      get children() {
-        return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
-          get fallback() {
-            return $0caf87eaa19079da$export$f33414a4df0afd3f({
-              num_placeholders_: num_placeholders_,
+        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($gVhhF$solidjs.createMemo(() => recommendations_resource_() || []));
+            return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
+              displays_by_key_: displays_by_key_,
               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($gVhhF$solidjs.createMemo(() => recommendations_resource_() || []));
-              return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
-                displays_by_key_: displays_by_key_,
-                merchant_: merchant_,
-                market_: market_,
-                product_card_template_: product_card_template_
-              });
-            })();
-          }
-        });
-      }
-    })), _el$6, _co$2);
-    return _el$2;
-  })()];
+          })();
+        }
+      });
+    }
+  })];
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
     get when() {
       return is_showing_something();
     },
-    children: elements
+    children: slider
   });
 }
-const $1f8dbf7e28b3eff2$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="show-more major"type=button>`),
-  $1f8dbf7e28b3eff2$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict plp recommendations">`);
-function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
+const $72f96c4782db0b1b$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict recommendations">`);
+function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
   return $95837413165cc2df$export$23fca46f3143581f(() => {
-    const rows_object_ = $gVhhF$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: (() => {
-          const _el$ = $gVhhF$solidjsweb.getNextElement($1f8dbf7e28b3eff2$var$_tmpl$);
-          $gVhhF$solidjsweb.insert(_el$, () => view_more_button.text);
-          return _el$;
-        })()
-      };
-    });
     const grid_spacing_override = $gVhhF$solidjs.createMemo(() => {
       const {
         grid_spacing: grid_spacing
@@ -1249,15 +2166,12 @@ function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
     });
     const [recommendations_resource_] = $gVhhF$solidjs.createResource(() => props.recommendations, recs => recs);
     return (() => {
-      const _el$2 = $gVhhF$solidjsweb.getNextElement($1f8dbf7e28b3eff2$var$_tmpl$2);
-      $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
+      const _el$ = $gVhhF$solidjsweb.getNextElement($72f96c4782db0b1b$var$_tmpl$);
+      $gVhhF$solidjsweb.insert(_el$, $gVhhF$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_: $gVhhF$solidjs.createMemo(() => ({
               cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
@@ -1266,9 +2180,9 @@ function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
           });
         }
       }));
-      return _el$2;
+      return _el$;
     })();
-  }, "RecommendationGrid failed");
+  }, "RecommendationSlider failed");
 }
 function $4b455f60dadde8b8$export$5bad61ecde080b1f(...params) {
   const {
@@ -1563,15 +2477,6 @@ function $47e2cc552c02110c$export$8895d39404bd2bb1(props) {
   if (delay_toast_) return show_configured_toast;else show_configured_toast();
 }
 $gVhhF$solidjsweb.delegateEvents(["click"]);
-const $c77c68e559a1506c$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg width=21.064 height=21.047 viewBox="0 0 21.064 21.064"><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">`);
-function $c77c68e559a1506c$export$3b621d86b1566b2(props = {}) {
-  return (() => {
-    const _el$ = $gVhhF$solidjsweb.getNextElement($c77c68e559a1506c$var$_tmpl$);
-    $gVhhF$solidjsweb.spread(_el$, props, true, true);
-    $gVhhF$solidjsweb.runHydrationEvents();
-    return _el$;
-  })();
-}
 
 /**
  * Lower cases a string if possible. Mostly used to make the filter url values case-insensitive.
@@ -1582,7 +2487,7 @@ function $daa394359b026187$export$325f75597868c4f0(stuff) {
 }
 const $235a2771a44e28e9$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="clear-all-filters minor">`),
   $235a2771a44e28e9$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=inner><span class=title><!$><!/>: </span><!$><!/>`),
-  $235a2771a44e28e9$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="clear-filter major"><!$><!/><span><!$><!/><!$><!/><!$><!/> – <!$><!/><!$><!/><!$><!/>`),
+  $235a2771a44e28e9$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="clear-filter major"><!$><!/><span><!$><!/><!$><!/><!$><!/> \u{2013} <!$><!/><!$><!/><!$><!/>`),
   $235a2771a44e28e9$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="clear-filter major"><!$><!/><span>`);
 function $235a2771a44e28e9$export$fecbb157621501bd({
   number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
@@ -2755,7 +3660,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) => {
@@ -2847,7 +3752,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;
@@ -3861,7 +4766,7 @@ function $b064919833b3e80b$export$53c59af873b303c9({
           get price_formatting_() {
             return price_formatting_();
           }
-        }), $gVhhF$solidjsweb.memo(() => price_formatting_().post_), " – ", $gVhhF$solidjsweb.memo(() => price_formatting_().pre_), $gVhhF$solidjsweb.createComponent((0, $d659702496cb72ea$export$a71e92cfbb498adc), {
+        }), $gVhhF$solidjsweb.memo(() => price_formatting_().post_), " \u2013 ", $gVhhF$solidjsweb.memo(() => price_formatting_().pre_), $gVhhF$solidjsweb.createComponent((0, $d659702496cb72ea$export$a71e92cfbb498adc), {
           get price_() {
             return selected_filter.data[1];
           },
@@ -3951,47 +4856,6 @@ function $8c939a05b87fbbbc$export$ab34afce88557c0e(props) {
   }));
   return is_open;
 }
-const $9fe9883b1d8ecccc$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span>`);
-function $9fe9883b1d8ecccc$export$acb3eaade4b23afd(props) {
-  return (() => {
-    const _el$ = $gVhhF$solidjsweb.getNextElement($9fe9883b1d8ecccc$var$_tmpl$);
-    $gVhhF$solidjsweb.effect(_p$ => {
-      const _v$ = `depict-placeholder ${props.class || ""}`,
-        _v$2 = props.style;
-      _v$ !== _p$._v$ && $gVhhF$solidjsweb.className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = $gVhhF$solidjsweb.style(_el$, _v$2, _p$._v$2);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined
-    });
-    return _el$;
-  })();
-}
-function $061ff5b4c3d36171$export$89c6019e4baa40b1(props) {
-  const style = $gVhhF$solidjs.createMemo(() => {
-    const {
-      style: style,
-      height: height,
-      width: width
-    } = props;
-    return {
-      ...(style || {}),
-      height: height ?? "1em",
-      ...(width && {
-        width: width
-      })
-    };
-  });
-  return $gVhhF$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
-    get style() {
-      return style();
-    },
-    get ["class"]() {
-      return props.class;
-    }
-  });
-}
 const $87d7574e1d89d69b$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=22 viewBox="0 0 20 22"><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">`);
 function $87d7574e1d89d69b$export$82eafebb825fc23f(props = {}) {
   return (() => {
@@ -4546,150 +5410,33 @@ 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, $gVhhF$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 = $gVhhF$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();
-          $gVhhF$depictaiutilishared.catchify(closing_animation)()?.then($gVhhF$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 $gVhhF$depictaiutilishared.fetch_recs({
-    tenant: merchant,
-    market: market
-  }, $gVhhF$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 = $gVhhF$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
-  $gVhhF$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] ||= $gVhhF$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, $gVhhF$depictaiutilishared.instant_exec_on_suspect_history_change).add(event_handler);
-  $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.catchify(() => (0, $gVhhF$depictaiutilishared.instant_exec_on_suspect_history_change).delete(event_handler)));
-  $gVhhF$solidjs.createEffect($gVhhF$depictaiutilishared.catchify(() => $gVhhF$solidjs.untrack($gVhhF$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) {
-  $gVhhF$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) {
-        $gVhhF$depictaiutilishared.report([e, "Failed to preserve items in history.state"], "error");
-      }
-      return Reflect.apply(target, this_arg, arg_list);
+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 = $gVhhF$depictaiutilishared.snakeCasifyObject(options);
+  delete cleaned_up_options.headers;
+  delete cleaned_up_options.product_id;
+  cleaned_up_options.session_id ||= $gVhhF$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 = $gVhhF$depictaiutilishared.add_version_query_params(`${(0, $gVhhF$depictaiutilishared.base_url)}/v3/recommend/products`);
+  return await $gVhhF$depictaiutilishared.fetch_retry(url, {
+    body: JSON.stringify(options_to_send),
+    ...(headers ? {
+      headers: headers
+    } : {}),
+    method: "POST"
+  }).catch(e => $gVhhF$depictaiutilishared.dlog("fetch_retry threw", e)).then(async maybe_response => {
+    if (!maybe_response) return [];
+    let decoded;
+    try {
+      decoded = await maybe_response.json();
+    } catch (e) {
+      $gVhhF$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_,
@@ -4745,8 +5492,8 @@ function $67dc366d96177e70$export$967e966fca9515e(api_response) {
   }
   return api_response;
 }
-const $e1d6c0f3d89d531c$var$v2_base_url = (0, $gVhhF$depictaiutilishared.base_url) + "/v2/";
-const $e1d6c0f3d89d531c$var$search_base_url = $e1d6c0f3d89d531c$var$v2_base_url + "search/";
+const $e1d6c0f3d89d531c$var$v3_base_url = (0, $gVhhF$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 = {};
@@ -4765,18 +5512,14 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
     const request = {
       ...input_req
     };
-    request.dsid ??= $gVhhF$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?.() || $gVhhF$depictaiutilishared.get_user_id();
     request.session_id ??= this.#get_session_id?.() || $gVhhF$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;
       });
@@ -4813,8 +5556,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 = $gVhhF$solidjs.getOwner();
     const {
-      breadcrumb: breadcrumb,
+      breadcrumbs: breadcrumbs,
       quick_links: quick_links,
       content_search_links: content_search_links
     } = input_data;
@@ -4843,40 +5587,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 $gVhhF$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 $gVhhF$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 = $gVhhF$solidjs.getOwner();
     const metaData = await this.#get_metadata?.();
     const request = metaData ? Object.assign(with_ids, {
       metadata: metaData
     }) : with_ids;
-    const body = JSON.stringify($gVhhF$depictaiutilishared.sort_obj(request));
+    const sorted_request = $gVhhF$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];
@@ -4884,18 +5636,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 $gVhhF$depictaiutilishared.fetch_retry($gVhhF$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_ : $gVhhF$depictaiutilishared.make_url_with_query_params(endpoint_, sorted_request);
+      const api_response = await $gVhhF$depictaiutilishared.fetch_retry($gVhhF$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 $gVhhF$solidjs.runWithOwner(owner, () => this.#run_display_transformers_for_rest(input_req_.merchant, input_req_.market, unmodified_result));
         } catch (e) {
-          $gVhhF$depictaiutilishared.dwarn("URL creator or json decoding failed", e);
+          $gVhhF$depictaiutilishared.dwarn("displayTransformer or json decoding failed", e);
           break return_successfully;
         }
         // Here result actually becomes O
@@ -4913,7 +5670,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 {
@@ -4923,19 +5680,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 = $gVhhF$solidjs.getOwner();
     const metaData = await this.#get_metadata?.();
     const request = metaData ? Object.assign(with_ids, {
       metadata: JSON.stringify(metaData)
@@ -4947,9 +5703,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 $gVhhF$solidjs.runWithOwner(owner, () => this.#run_url_creator_for_suggest(input_req.merchant, input_req.market, decoded_json));
       } catch (e) {
-        $gVhhF$depictaiutilishared.dwarn("URL creator failed", e);
+        $gVhhF$depictaiutilishared.dwarn("displayTransformer failed", e);
       }
     }
     return {
@@ -4959,31 +5715,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) {
@@ -5082,7 +5874,7 @@ function $76b6ac05693f5c71$export$205efb947c7ffd78(handler, passive = true) {
     $gVhhF$solidjs.onCleanup(() => removeEventListener(event, catchified_handler));
   }
 }
-const $401aee5f33dca9e2$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=scroll-status style=display:none><span class=text><b></b> – <b></b> <!$><!/> <b>`);
+const $401aee5f33dca9e2$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=scroll-status style=display:none><span class=text><b></b> \u{2013} <b></b> <!$><!/> <b>`);
 function $401aee5f33dca9e2$export$83fd5de5504a7a67({
   formatted_number_of_results_: formatted_number_of_results_,
   first_result_in_viewport_: [get_first_result_in_viewport],
@@ -5304,7 +6096,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
@@ -5367,8 +6159,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_,
@@ -5420,8 +6210,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) =>
@@ -5577,37 +6365,6 @@ function $055384b985678603$export$a79e666719b3647c(cols_at_size_) {
   });
   return n_cols_currently_showing;
 }
-function $3bc4a89b971a3af5$export$3f37af283f8fb843(props) {
-  const style = $gVhhF$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 $gVhhF$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
-    get style() {
-      return style();
-    },
-    get ["class"]() {
-      return props.class;
-    }
-  });
-}
 const $d92f338ba8f9da9b$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=content-block-wrapper>`);
 function $d92f338ba8f9da9b$export$791ef57e62e21c3f({
   content_blocks_: incoming_content_blocks,
@@ -5818,8 +6575,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_ = $gVhhF$solidjs.createMemo(() => plp_results_.loading || query_base_.loading);
-  const merchant_ = $gVhhF$solidjs.createMemo(() => query_base_().tenant);
-  const market_ = $gVhhF$solidjs.createMemo(() => query_base_().market);
   const has_no_results_or_failed = $gVhhF$solidjs.createMemo(() => {
     const displays = plp_results_()?.displays;
     return !is_loading_() && (!Array.isArray(displays) || !displays.length);
@@ -5933,8 +6688,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_,
@@ -6113,42 +6866,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 = $gVhhF$depictaiutilishared.catchify(animation.play.bind(animation));
-      cleanup_fns.push(fn);
-      $gVhhF$solidjs.onCleanup(fn);
-    } catch (e) {
-      $gVhhF$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 = $gVhhF$depictaiutilishared.catchify(() => style.overflow = original_value);
-      cleanup_fns.push(fn);
-      $gVhhF$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$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg width=14 height=14 class=sort-icon><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><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">`);
 function $f958b5ac0e4a78da$export$da32f7add8a22e86(props = {}) {
   return (() => {
@@ -6987,7 +7704,6 @@ function $e53b2e7e632ac4cb$export$5646050d516e06bc({
 }) {
   const placeholder_crumb_data = [,,,];
   const crumb_data = $gVhhF$solidjs.createMemo(() => get_api_crumb_data() || placeholder_crumb_data);
-  const href_accessor = $gVhhF$depictaiutilishared.use_href_accessor();
   return $gVhhF$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
     severity_: "error",
     message_: "BreadCrumbs failed",
@@ -6998,11 +7714,11 @@ function $e53b2e7e632ac4cb$export$5646050d516e06bc({
           return crumb_data();
         },
         children: (display_accessor, index) => {
-          const is_last = $gVhhF$solidjs.createMemo(() => index === crumb_data()?.length - 1);
-          const url = $gVhhF$solidjs.createMemo(() => is_last() ? href_accessor() : display_accessor()?.page_url);
           const href = $gVhhF$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 [$gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
@@ -7022,7 +7738,7 @@ function $e53b2e7e632ac4cb$export$5646050d516e06bc({
                 is_replace_: false,
                 event_: ev,
                 force_spa_navigation_: true,
-                category_query_id_: display_accessor()?.query_id
+                listing_id_: display_accessor()?.listing_id
               })), true);
               $gVhhF$solidjsweb.insert(_el$2, () => display_accessor().title);
               $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.setAttribute(_el$2, "href", href()));
@@ -7053,42 +7769,42 @@ const $8cceb1d3a967f369$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<n
 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;
   $gVhhF$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 = $gVhhF$solidjs.createMemo(() => quicklinks_data_() || [,,,]);
-  const selected_index = $gVhhF$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 = $gVhhF$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 = $gVhhF$solidjs.untrack(current_query_id_);
+      const current_id = $gVhhF$solidjs.untrack(current_listing_id_);
       // make sure to not save position where selected item isn't in viewport
       const current_selected_index = $gVhhF$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];
     }
   }];
   $gVhhF$solidjs.createComputed(() => {
-    if (place_holdey_quicklinks_data()?.[0]?.query_id) {
+    if (place_holdey_quicklinks_data()?.[0]?.listing_id) {
       if (last_was_placeholder) queueMicrotask($gVhhF$depictaiutilishared.catchify(() => {
         sliding_element?.scrollTo({
           left: 0
@@ -7141,13 +7857,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 = $gVhhF$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
@@ -7189,10 +7905,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 = $gVhhF$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 = $gVhhF$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
@@ -7213,7 +7929,7 @@ function $8cceb1d3a967f369$export$466cdc317043f6cb({
                     is_replace_: false,
                     event_: ev,
                     force_spa_navigation_: true,
-                    category_query_id_: display_accessor()?.query_id
+                    listing_id_: display_accessor()?.listing_id
                   });
                 }), true);
                 $gVhhF$solidjsweb.insert(_el$3, () => display_accessor()?.title || $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
@@ -7311,10 +8027,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 = $gVhhF$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 $gVhhF$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;
@@ -7368,7 +8086,7 @@ let $0b6e2070a98de347$export$44dad306455dddf;
 })($0b6e2070a98de347$export$44dad306455dddf || ($0b6e2070a98de347$export$44dad306455dddf = {}));
 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_,
@@ -7387,15 +8105,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 = $gVhhF$solidjs.untrack(crumb_data_);
-  let query_id_when_we_got_previous_data = $gVhhF$solidjs.untrack(query_id_);
+  let listing_id_when_we_got_previous_data = $gVhhF$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
   $gVhhF$solidjs.onCleanup(() => window.removeEventListener("popstate", handler));
   $gVhhF$solidjs.createEffect($gVhhF$solidjs.on(crumb_data_, $gVhhF$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;
@@ -7403,8 +8121,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,
@@ -7418,7 +8136,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;
   })));
@@ -7450,17 +8168,17 @@ function $ef972f5c10b1c5b4$var$clear_if_opened_new_tab_with_sideways_url_params_
   });
   tracking_function_for_plp_results(plp_results_);
 }
-const $839b3341523d31a2$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=statement style=white-space:pre-wrap>No category ID specified, this is probably unintentional. Make sure to create (and insert) the CategoryPage *after* you have specified a category ID in your Depict Provider.`),
-  $839b3341523d31a2$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=buttons><button class="ok major">`);
-function $839b3341523d31a2$export$d4fc5c0e68a52116(el, query_id_, i18n_) {
+const $bb9760b7a8acdc18$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=statement style=white-space:pre-wrap>No listingId specified, this is probably unintentional. Make sure to create (and insert) the CategoryPage *after* you have specified a listingId.`),
+  $bb9760b7a8acdc18$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=buttons><button class="ok major">`);
+function $bb9760b7a8acdc18$export$7af06a63c5a976c9(el, listing_id, i18n_) {
   if (!(0, $gVhhF$depictaiutilishared.is_debug)) return; // Just to make sure we don't show this in production
   const owner = $gVhhF$solidjs.getOwner();
   const disconnect = (0, $gVhhF$depictaiutilishared.observer).onexists(el, ({
     element: element
   }) => $gVhhF$solidjs.runWithOwner(owner, () => $gVhhF$solidjs.createEffect(() => {
     if (!document.documentElement.contains(element)) return;
-    if (!query_id_()) {
-      const warning = "No category ID specified, this is probably unintentional. Make sure to create (and insert) the CategoryPage *after* you have specified a category ID in your Depict Provider.";
+    if (!listing_id()) {
+      const warning = "No listingId specified, this is probably unintentional. Make sure to create (and insert) the CategoryPage *after* you have specified a listingId.";
       $gVhhF$depictaiutilishared.dwarn(warning);
       const {
         close_toast_: close_toast_
@@ -7470,8 +8188,8 @@ function $839b3341523d31a2$export$d4fc5c0e68a52116(el, query_id_, i18n_) {
         style: {
           background: "#ffb830"
         },
-        children: [$gVhhF$solidjsweb.getNextElement($839b3341523d31a2$var$_tmpl$), (() => {
-          const _el$2 = $gVhhF$solidjsweb.getNextElement($839b3341523d31a2$var$_tmpl$2),
+        children: [$gVhhF$solidjsweb.getNextElement($bb9760b7a8acdc18$var$_tmpl$), (() => {
+          const _el$2 = $gVhhF$solidjsweb.getNextElement($bb9760b7a8acdc18$var$_tmpl$2),
             _el$3 = _el$2.firstChild;
           _el$3.$$click = () => close_toast_() /* We have to wait for close_toast_ to get defined after the call to show_toast */;
           $gVhhF$solidjsweb.insert(_el$3, () => i18n_.ok_());
@@ -7484,7 +8202,6 @@ function $839b3341523d31a2$export$d4fc5c0e68a52116(el, query_id_, i18n_) {
   $gVhhF$solidjs.onCleanup(disconnect);
 }
 $gVhhF$solidjsweb.delegateEvents(["click"]);
-const $6b502b1b2155a0bc$export$5c28802497c8a83c = /*@__PURE__*/Symbol("category_title_type");
 function $6a8e766e914723d8$export$d31a1a1a83ad9413(plp_results_, [get_selected_filters, set_selected_filters]) {
   $gVhhF$solidjs.createComputed(() => {
     const available_filters = plp_results_()?.filters;
@@ -7516,8 +8233,7 @@ const $840d88a04b2d22a7$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<d
   $840d88a04b2d22a7$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict plp category"><div class=listing-page><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></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_,
@@ -7530,7 +8246,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_,
@@ -7553,22 +8269,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_ = $gVhhF$solidjs.createSignal(0);
   const first_result_in_viewport_ = $gVhhF$solidjs.createSignal();
   const last_result_in_viewport_ = $gVhhF$solidjs.createSignal();
   const [can_write_scroll_restoration_, set_can_write_scroll_restoration] = $gVhhF$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
       } : {}),
@@ -7577,13 +8296,14 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
       } : {})
     };
   });
-  const [plp_results_] = $gVhhF$solidjs.createResource(query_base_,
+  // Make "Get products in listing" request to get products in listing
+  const [plp_products_] = $gVhhF$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)
   $gVhhF$depictaiutilishared.catchify(base_query => $276380e4607fb9fb$export$cc42dd29bf655ab6({
-    id_: $gVhhF$solidjs.untrack(query_id_),
+    id_: $gVhhF$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 ? {
@@ -7591,24 +8311,33 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
       } : {})
     })
   })));
-  const available_sortings_ = $gVhhF$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] = $gVhhF$solidjs.createResource(meta_query_base, $gVhhF$depictaiutilishared.catchify(query => depict_api_.get_listing(query)));
+  const available_sortings_ = $gVhhF$solidjs.createMemo(() => plp_products_()?.sorts?.map(sort => ({
     ...sort,
     order: sort.order ?? "desc"
   })));
-  const available_filters_ = $gVhhF$solidjs.createMemo(() => plp_results_()?.filters);
-  const crumb_data_ = $gVhhF$solidjs.createMemo(() => plp_results_()?.breadcrumb);
-  const quicklinks_data_ = $gVhhF$solidjs.createMemo(() => plp_results_()?.quick_links);
+  const available_filters_ = $gVhhF$solidjs.createMemo(() => plp_products_()?.filters);
+  const title = $gVhhF$solidjs.createMemo(() => plp_meta()?.title);
+  const crumb_data_ = $840d88a04b2d22a7$var$add_us_to_crumbs(plp_meta, title);
+  const quicklinks_data_ = $gVhhF$solidjs.createMemo(() => plp_meta()?.quick_links);
   const meta_tag_data_ = $gVhhF$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
     };
   });
   $gVhhF$depictaiutilishared.edit_current_page_meta_tags(meta_tag_data_);
   const [sort_or_filter_open_, set_sort_or_filter_open_] = $gVhhF$solidjs.createSignal(false);
   const [desktop_filter_elements_, set_desktop_filter_elements] = $gVhhF$solidjs.createSignal();
   const formatted_number_of_results_ = $0f400c3f7248d5f1$export$92f2da32c6e7e7ee({
-    number_: $gVhhF$solidjs.createMemo(() => plp_results_()?.n_hits),
+    number_: $gVhhF$solidjs.createMemo(() => plp_products_()?.n_hits),
     i18n_: i18n_
   });
   const [sort_and_filter_element_, set_sort_and_filter_element_] = $gVhhF$solidjs.createSignal();
@@ -7627,7 +8356,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
       [_el$6, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$5.nextSibling);
     $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
       get when() {
-        return plp_results_.loading;
+        return plp_products_.loading;
       },
       fallback: formatted_number_of_results_,
       get children() {
@@ -7639,7 +8368,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
     }), _el$4, _co$);
     $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
       get when() {
-        return plp_results_()?.n_hits === 1;
+        return plp_products_()?.n_hits === 1;
       },
       get fallback() {
         return i18n_.products_();
@@ -7650,11 +8379,10 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
     }), _el$6, _co$2);
     return _el$;
   })();
-  $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 = $gVhhF$solidjs.createMemo(() => crumb_data_()?.at(-1)?.title ?? plp_results_()?.metadata?.title);
     results_for = $gVhhF$solidjsweb.createComponent(CategoryTitleComponent, {
       category_title_: title,
       get product_count_() {
@@ -7700,12 +8428,12 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
   $gVhhF$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_?.();
   $gVhhF$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);
   });
   $gVhhF$solidjs.createRenderEffect($gVhhF$depictaiutilishared.catchify(async () => {
     const slim = is_slim_();
@@ -7729,13 +8457,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_);
@@ -7759,7 +8487,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
       [_el$28, _co$11] = $gVhhF$solidjsweb.getNextMarker(_el$27.nextSibling),
       _el$29 = _el$28.nextSibling,
       [_el$30, _co$12] = $gVhhF$solidjsweb.getNextMarker(_el$29.nextSibling);
-    $gVhhF$solidjsweb.use(el => process.env.NODE_ENV === "development" && $839b3341523d31a2$export$d4fc5c0e68a52116(el, query_id_, i18n_), _el$13);
+    $gVhhF$solidjsweb.use(el => process.env.NODE_ENV === "development" && $bb9760b7a8acdc18$export$7af06a63c5a976c9(el, listing_id_, i18n_), _el$13);
     $gVhhF$solidjsweb.insert(_el$14, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
       get when() {
         return show_breadcrumbs_();
@@ -7781,7 +8509,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
       get children() {
         return $gVhhF$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_,
@@ -7824,8 +8552,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_,
@@ -7835,7 +8563,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_,
@@ -7856,7 +8584,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_: $gVhhF$solidjs.createMemo(() => plp_results_()?.n_hits)
+          number_of_results_: $gVhhF$solidjs.createMemo(() => plp_products_()?.n_hits)
         });
       }
     }), _el$28, _co$11);
@@ -7877,16 +8605,40 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
     return _el$13;
   })()];
 }
+/**
+ * Adds the current page as last breadcrumb to the breadcrumb trail
+ */
+function $840d88a04b2d22a7$var$add_us_to_crumbs(plp_meta, title) {
+  const href_accessor = $gVhhF$depictaiutilishared.use_href_accessor();
+  return $gVhhF$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_ ? $gVhhF$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_ ? $gVhhF$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_ ? $gVhhF$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_ = $gVhhF$solidjs.createSignal();
   const selected_filters_ = $gVhhF$solidjs.createSignal([]);
   const sideways_filter_clearing_flag_ = $gVhhF$solidjs.createSignal(false);
@@ -7931,10 +8683,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) $gVhhF$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) $gVhhF$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);
@@ -7961,8 +8713,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_
     } : {})
   };
 }
@@ -8007,108 +8759,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, $gVhhF$depictaiutilishared.instant_exec_on_suspect_history_change).delete(handler);
-        }
-      };
-      (0, $gVhhF$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_: $gVhhF$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
-          $gVhhF$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) $gVhhF$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.
@@ -8144,26 +8794,25 @@ const $48567ac5b39bac56$var$InExternalAreaDiv = ({
 })();
 class $48567ac5b39bac56$export$f34314aa9505732e {
   #router;
-  #locale_signal = $gVhhF$solidjs.createSignal();
+  #localization_signal = $gVhhF$solidjs.createSignal();
   #merchant_signal = $gVhhF$solidjs.createSignal();
   #market_signal = $gVhhF$solidjs.createSignal();
-  #query_id_signal = $gVhhF$solidjs.createSignal("");
+  #listing_id_signal = $gVhhF$solidjs.createSignal("");
   #meta_title_suffix_ = $gVhhF$solidjs.createSignal();
-  #disable_override_query_id = $gVhhF$solidjs.createSignal();
-  #listing_type_signal = $gVhhF$solidjs.createSignal();
+  #disable_override_listing_id = $gVhhF$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]();
@@ -8177,23 +8826,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)
@@ -8208,7 +8851,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 = $gVhhF$solidjs.getOwner() || $gVhhF$solidjs.createRoot(() => $gVhhF$solidjs.getOwner()); // we might have an owner, if so, pass it on. Otherwise, create one so solid doesn't print warnings to the console
@@ -8218,21 +8861,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_: () => ({
@@ -8247,7 +8890,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_: $gVhhF$solidjs.createSignal(),
@@ -8262,7 +8905,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_
@@ -8282,11 +8925,11 @@ function $48567ac5b39bac56$export$e2bf8ce7779e827e(props) {
   return $95837413165cc2df$export$23fca46f3143581f(() => {
     $gVhhF$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;
     });
-    $gVhhF$solidjs.onCleanup(() => $deaaf04362a1bc71$export$f50b88e2a00918b5(props.on_query_id_change)());
+    $gVhhF$solidjs.onCleanup(() => $deaaf04362a1bc71$export$f50b88e2a00918b5(props.on_listing_id_change)());
     const grid_spacing_override = $gVhhF$solidjs.createMemo(() => {
       const {
         grid_spacing: grid_spacing
@@ -8309,7 +8952,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_,
@@ -8322,14 +8965,13 @@ function $48567ac5b39bac56$export$e2bf8ce7779e827e(props) {
     } = shared_properties;
     $gVhhF$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_: $gVhhF$solidjs.createMemo(() => !depict_category.disable_override_query_id && override_query_id_accessor_() || depict_category.category_id),
+      listing_id_: $gVhhF$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_: $gVhhF$solidjs.createMemo(() => props.show_quicklinks ?? true),
       category_title_: category_title,
@@ -8395,7 +9037,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_
@@ -8408,31 +9050,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$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=category-title><h1 class=title></h1><span class=explanation> — <!$><!/>`);
-const $0b23bfd073d9a4e8$export$b91cec6bdc6b32a1 = /*@__PURE__*/(() => {
-  const actual_function = ({
-    category_title_: category_title_,
-    product_count_: product_count_
-  }) => {
-    return (() => {
-      const _el$ = $gVhhF$solidjsweb.getNextElement($0b23bfd073d9a4e8$var$_tmpl$),
-        _el$2 = _el$.firstChild,
-        _el$3 = _el$2.nextSibling,
-        _el$4 = _el$3.firstChild,
-        _el$5 = _el$4.nextSibling,
-        [_el$6, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$5.nextSibling);
-      $gVhhF$solidjsweb.insert(_el$2, () => category_title_() || $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
-        height: "1em",
-        width: "10ch"
-      }));
-      $gVhhF$solidjsweb.insert(_el$3, product_count_, _el$6, _co$);
-      return _el$;
-    })();
-  };
-  // 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$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<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><!$><!/><!$><!/><!$><!/>`);
 const $85b747260aa175c9$export$824dde41348efed1 = /*@__PURE__*/(() => {
   const actual_function = ({
@@ -8531,11 +9148,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);
@@ -8547,20 +9164,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 => $gVhhF$depictaiutilishared.report([e, "couldn't fetch categories"], "warning"));
+      $6382a1b83da39674$var$fetch_and_store_categories(merchant, market, locale, localstorage_key).catch(e => $gVhhF$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(),
@@ -8572,24 +9189,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 $gVhhF$depictaiutilishared.fetch_retry((0, $gVhhF$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, $gVhhF$depictaiutilishared.base_url) + "/v3/listings");
+  const request = {
+    merchant: merchant,
+    market: market,
+    locale: locale
+  };
+  url.search = "" + new URLSearchParams(request);
+  const fetched = await $gVhhF$depictaiutilishared.fetch_retry(url.href);
   if (!fetched) return [];
   try {
     if (fetched.status !== 200) {
       $gVhhF$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) {
     $gVhhF$depictaiutilishared.dlog("failed to decode queries json", fetched, e);
     return [];
@@ -8840,8 +9455,6 @@ function $fb29c6201c369e39$export$7de92c4c2205ebf3({
               }));
               return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
                 displays_by_key_: displays_by_key_,
-                merchant_: $gVhhF$solidjs.createMemo(() => search_query_base_().tenant),
-                market_: $gVhhF$solidjs.createMemo(() => search_query_base_().market),
                 product_card_template_: product_card_template_
               });
             })();
@@ -9157,7 +9770,7 @@ const $6ae556e536054e87$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<d
 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_,
@@ -9181,8 +9794,10 @@ function $6ae556e536054e87$export$62f101a8aa597bf8({
     timeout = setTimeout($gVhhF$depictaiutilishared.catchify(() => write_current_instant_query(value)), 250);
   });
   const [search_results] = $gVhhF$solidjs.createResource($gVhhF$solidjs.createMemo(() => ({
-    tenant: tenant_(),
+    // <-- key order important, see comment below
+    merchant: merchant_(),
     market: market_(),
+    locale: i18n_.backend_locale_(),
     query: read_current_instant_query()
   })), $gVhhF$depictaiutilishared.catchify(variable_data => {
     return depict_api_.query({
@@ -9230,12 +9845,12 @@ function $6ae556e536054e87$export$62f101a8aa597bf8({
             const card = render_instant_card_ ? $gVhhF$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;
@@ -9872,7 +10487,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_,
@@ -9945,9 +10560,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);
     }
@@ -10083,7 +10699,7 @@ function $f40a47a30a358305$export$1c593cbd6f1e10bc({
   close_modal_: close_modal_,
   style_props_ = $gVhhF$solidjs.createSignal({}),
   depict_api_: depict_api_,
-  tenant_: tenant_,
+  merchant_: merchant_,
   market_: market_,
   submit_query_: props_submit_query,
   instant_results_options_: instant_results_options_,
@@ -10220,7 +10836,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_,
@@ -10243,7 +10859,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_,
@@ -10725,6 +11341,9 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
   const first_result_in_viewport_ = $gVhhF$solidjs.createSignal();
   const last_result_in_viewport_ = $gVhhF$solidjs.createSignal();
   const [can_write_scroll_restoration_, set_can_write_scroll_restoration] = $gVhhF$solidjs.createSignal(false);
+  const {
+    backend_locale_: backend_locale_
+  } = i18n_;
   const search_query_base_ = $8cd545330f2674dc$export$210f130a61ac1e8d(() => {
     const sort_obj = get_sorting() && {
       ...get_sorting()
@@ -10732,8 +11351,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
@@ -10759,11 +11379,12 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
       })
     });
   }));
-  const [suggestions] = $gVhhF$solidjs.createResource($gVhhF$solidjs.createMemo(() => ({
+  const [suggestions] = $gVhhF$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_ = $gVhhF$solidjs.createMemo(() => search_results_()?.sorts?.map(sort => ({
     ...sort,
     order: sort.order ?? "desc"
@@ -11248,7 +11869,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_,
@@ -11362,11 +11983,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;
@@ -11806,7 +12428,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);
 $gVhhF$depictaiutilishared.add_to_version_info("ui", (0, $b757f75811f3261f$export$83d89fbfd8236492));