js-cloudimage-hotspot 1.1.2 → 1.1.4

package/dist/js-cloudimage-hotspot.esm.js

@@ -12,6 +12,8 @@ const et = {
   sceneTransition: "fade",
   scrollHint: !0,
   invertMarkerTheme: !1,
+  markerTheme: "default",
+  brandColor: "#00aaff",
   fullscreenButton: !0,
   zoomControlsPosition: "bottom-right"
 }, ot = {
@@ -38,6 +40,8 @@ const et = {
   "data-ci-hotspot-scene-transition": { key: "sceneTransition", type: "string" },
   "data-ci-hotspot-scene-aspect-ratio": { key: "sceneAspectRatio", type: "string" },
   "data-ci-hotspot-invert-marker-theme": { key: "invertMarkerTheme", type: "boolean" },
+  "data-ci-hotspot-marker-theme": { key: "markerTheme", type: "string" },
+  "data-ci-hotspot-brand-color": { key: "brandColor", type: "string" },
   "data-ci-hotspot-fullscreen-button": { key: "fullscreenButton", type: "boolean" },
   "data-ci-hotspot-zoom-controls-position": { key: "zoomControlsPosition", type: "string" }
 };
@@ -82,7 +86,7 @@ function Z(s) {
     hotspots: s.hotspots || []
   };
 }
-function O(s) {
+function $(s) {
   if (s.scenes && s.scenes.length > 0) {
     const t = /* @__PURE__ */ new Set();
     for (const e of s.scenes) {
@@ -100,7 +104,7 @@ function O(s) {
   } else if (!s.src)
     throw new Error('CIHotspot: "src" is required');
 }
-const X = "ci-hotspot-styles";
+const O = "ci-hotspot-styles";
 function K() {
   return typeof window < "u" && typeof document < "u";
 }
@@ -119,18 +123,18 @@ function g(s, t, e) {
       o.setAttribute(i, a);
   return o;
 }
-function m(s, ...t) {
+function f(s, ...t) {
   s.classList.add(...t);
 }
-function b(s, ...t) {
+function v(s, ...t) {
   s.classList.remove(...t);
 }
 function rt(s) {
-  if (!K() || document.getElementById(X)) return;
+  if (!K() || document.getElementById(O)) return;
   const t = document.createElement("style");
-  t.id = X, t.textContent = s, document.head.appendChild(t);
+  t.id = O, t.textContent = s, document.head.appendChild(t);
 }
-function $(s) {
+function X(s) {
   if (typeof s == "string") {
     const t = s.trim();
     return t.endsWith("%") ? { value: parseFloat(t), isPercent: !0 } : { value: parseFloat(t), isPercent: !1 };
@@ -138,7 +142,7 @@ function $(s) {
   return { value: s, isPercent: !1 };
 }
 function W(s, t, e, o) {
-  const i = $(s), a = $(t);
+  const i = X(s), a = X(t);
   return {
     x: i.isPercent ? i.value : i.value / e * 100,
     y: a.isPercent ? a.value : a.value / o * 100
@@ -156,10 +160,10 @@ function at(s, t) {
   });
   if (e.style.left = `${s.x}%`, e.style.top = `${s.y}%`, s.className) {
     const o = s.className.trim().split(/\s+/).filter(Boolean);
-    o.length && m(e, ...o);
+    o.length && f(e, ...o);
   }
-  if (s.hidden && m(e, "ci-hotspot-marker--hidden"), t && m(e, "ci-hotspot-marker--pulse"), s.icon && ht(e, s.icon), s.markerStyle === "dot-label" && s.label) {
-    m(e, "ci-hotspot-marker--dot-label");
+  if (s.hidden && f(e, "ci-hotspot-marker--hidden"), t && f(e, "ci-hotspot-marker--pulse"), s.icon && ht(e, s.icon), s.markerStyle === "dot-label" && s.label) {
+    f(e, "ci-hotspot-marker--dot-label");
     const o = g("span", "ci-hotspot-marker-label");
     o.textContent = s.label, e.appendChild(o);
   }
@@ -215,45 +219,45 @@ function ht(s, t) {
     s.appendChild(o);
   }
 }
-function f(s, t) {
-  t ? (m(s, "ci-hotspot-marker--active"), s.setAttribute("aria-expanded", "true")) : (b(s, "ci-hotspot-marker--active"), s.setAttribute("aria-expanded", "false"));
+function m(s, t) {
+  t ? (f(s, "ci-hotspot-marker--active"), s.setAttribute("aria-expanded", "true")) : (v(s, "ci-hotspot-marker--active"), s.setAttribute("aria-expanded", "false"));
 }
 function pt(s, t) {
-  t ? m(s, "ci-hotspot-marker--hidden") : b(s, "ci-hotspot-marker--hidden");
+  t ? f(s, "ci-hotspot-marker--hidden") : v(s, "ci-hotspot-marker--hidden");
 }
-function L(s) {
+function A(s) {
   s.remove();
 }
 function dt(s, t, e, o) {
-  const i = s.getBoundingClientRect(), a = e.getBoundingClientRect(), n = t.offsetWidth, r = t.offsetHeight, c = i.left + i.width / 2 - a.left, l = i.top + i.height / 2 - a.top, h = i.top - a.top, d = i.bottom - a.top, p = i.left - a.left, v = i.right - a.left, E = e.offsetWidth, k = e.offsetHeight, w = 8, Y = {
-    top: h - w,
-    bottom: k - d - w,
-    left: p - w,
-    right: E - v - w
+  const i = s.getBoundingClientRect(), a = e.getBoundingClientRect(), n = t.offsetWidth, r = t.offsetHeight, c = i.left + i.width / 2 - a.left, l = i.top + i.height / 2 - a.top, h = i.top - a.top, d = i.bottom - a.top, p = i.left - a.left, b = i.right - a.left, E = e.offsetWidth, w = e.offsetHeight, k = 8, Y = {
+    top: h - k,
+    bottom: w - d - k,
+    left: p - k,
+    right: E - b - k
   };
   let x = o.placement;
   x === "auto" && (x = ut(Y)), x = ft(x, n, r, Y);
   let T, z, R = 0;
   switch (x) {
     case "top":
-      T = c - n / 2, z = h - w - r;
+      T = c - n / 2, z = h - k - r;
       break;
     case "bottom":
-      T = c - n / 2, z = d + w;
+      T = c - n / 2, z = d + k;
       break;
     case "left":
-      T = p - w - n, z = l - r / 2;
+      T = p - k - n, z = l - r / 2;
       break;
     case "right":
-      T = v + w, z = l - r / 2;
+      T = b + k, z = l - r / 2;
       break;
     default:
-      T = c - n / 2, z = h - w - r;
+      T = c - n / 2, z = h - k - r;
   }
-  const H = mt(T, z, n, r, E, k);
-  return R = x === "top" || x === "bottom" ? T - H.x : z - H.y, {
-    x: H.x,
-    y: H.y,
+  const L = mt(T, z, n, r, E, w);
+  return R = x === "top" || x === "bottom" ? T - L.x : z - L.y, {
+    x: L.x,
+    y: L.y,
     placement: x,
     arrowOffset: R
   };
@@ -312,7 +316,7 @@ const gt = /* @__PURE__ */ new Set([
   "title",
   "target",
   "rel"
-]), bt = /^(?:https?:|mailto:)/i, yt = /^(?:https?:|data:image\/(?!svg[+%]))/i, wt = /* @__PURE__ */ new Set([
+]), bt = /^(?:https?:|mailto:)/i, yt = /^(?:https?:|data:image\/(?!svg[+%]))/i, kt = /* @__PURE__ */ new Set([
   "noopener",
   "noreferrer",
   "nofollow",
@@ -326,7 +330,7 @@ const gt = /* @__PURE__ */ new Set([
   "tag",
   "bookmark"
 ]);
-function kt(s) {
+function wt(s) {
   const o = new DOMParser().parseFromString(`<body>${s}</body>`, "text/html").body;
   return Q(o), o.innerHTML;
 }
@@ -356,7 +360,7 @@ function Q(s) {
           else if (r === "src" && !yt.test(n.value.trim()))
             o.removeAttribute(n.name);
           else if (r === "rel") {
-            const c = n.value.trim().toLowerCase().split(/\s+/).filter((l) => wt.has(l));
+            const c = n.value.trim().toLowerCase().split(/\s+/).filter((l) => kt.has(l));
             c.length === 0 ? o.removeAttribute(n.name) : o.setAttribute(n.name, c.join(" "));
           }
         }
@@ -366,22 +370,27 @@ function Q(s) {
 }
 function xt(s) {
   const t = [];
-  s.image && t.push(`<div class="ci-hotspot-popover-image-wrapper"><img class="ci-hotspot-popover-image" src="${I(s.image)}" alt="${I(s.title || "")}"></div>`);
+  s.image && t.push(`<div class="ci-hotspot-popover-image-wrapper"><img class="ci-hotspot-popover-image" src="${S(s.image)}" alt="${S(s.title || "")}"></div>`);
   const e = [];
   if (s.title && e.push(`<h3 class="ci-hotspot-popover-title">${C(s.title)}</h3>`), s.originalPrice || s.price) {
     let o = "";
     s.originalPrice && (o += `<span class="ci-hotspot-popover-original-price">${C(s.originalPrice)}</span>`), s.price && (o += `<span class="ci-hotspot-popover-price">${C(s.price)}</span>`), e.push(`<div class="ci-hotspot-popover-price-row">${o}</div>`);
   }
   if (s.description && e.push(`<p class="ci-hotspot-popover-description">${C(s.description)}</p>`), s.url && Tt(s.url)) {
+    const o = s.ctaText || "View details", i = s.id ? ` data-product-id="${S(s.id)}"` : "";
+    e.push(
+      `<a class="ci-hotspot-popover-cta" href="${S(s.url)}"${i}>${C(String(o))}</a>`
+    );
+  } else if (s.id) {
     const o = s.ctaText || "View details";
     e.push(
-      `<a class="ci-hotspot-popover-cta" href="${I(s.url)}">${C(String(o))}</a>`
+      `<button class="ci-hotspot-popover-cta" data-product-id="${S(s.id)}">${C(String(o))}</button>`
     );
   }
   return e.length > 0 && t.push(`<div class="ci-hotspot-popover-body">${e.join("")}</div>`), t.join("");
 }
 function Et(s, t) {
-  return t ? t(s) : s.content ? kt(s.content) : s.data ? xt(s.data) : "";
+  return t ? t(s) : s.content ? wt(s.content) : s.data ? xt(s.data) : "";
 }
 function C(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
@@ -390,7 +399,7 @@ function Tt(s) {
   const t = s.replace(/[\s\x00-\x1f]/g, "");
   return /^https?:\/\//i.test(t) || /^\/(?!\/)/.test(t) || /^#/.test(t);
 }
-function I(s) {
+function S(s) {
   return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 class N {
@@ -405,7 +414,16 @@ class N {
       ...o && t.label ? { "aria-label": t.label } : {}
     }), this.arrowEl = g("div", "ci-hotspot-popover-arrow"), this.contentEl = g("div", "ci-hotspot-popover-content"), this.element.appendChild(this.arrowEl), this.element.appendChild(this.contentEl);
     const i = Et(t, e.renderFn);
-    if (typeof i == "string" ? this.contentEl.innerHTML = i : i instanceof HTMLElement && this.contentEl.appendChild(i), e.triggerMode === "hover") {
+    if (typeof i == "string" ? this.contentEl.innerHTML = i : i instanceof HTMLElement && this.contentEl.appendChild(i), e.onProductClick) {
+      const a = (n) => {
+        const r = n.target.closest(".ci-hotspot-popover-cta[data-product-id]");
+        if (!r) return;
+        const c = r.dataset.productId;
+        e.onProductClick(c, t);
+      };
+      this.contentEl.addEventListener("click", a), this.hoverCleanups.push(() => this.contentEl.removeEventListener("click", a));
+    }
+    if (e.triggerMode === "hover") {
       const a = () => this.clearHideTimer(), n = () => this.scheduleHide();
       this.element.addEventListener("mouseenter", a), this.element.addEventListener("mouseleave", n), this.hoverCleanups.push(
         () => this.element.removeEventListener("mouseenter", a),
@@ -420,7 +438,7 @@ class N {
   /** Show the popover */
   show() {
     var t, e;
-    this.clearHideTimer(), !this.visible && (this.visible = !0, m(this.element, "ci-hotspot-popover--visible"), this.element.setAttribute("aria-hidden", "false"), this.updatePosition(), (e = (t = this.options).onOpen) == null || e.call(t, this.hotspot));
+    this.clearHideTimer(), !this.visible && (this.visible = !0, f(this.element, "ci-hotspot-popover--visible"), this.element.setAttribute("aria-hidden", "false"), this.updatePosition(), (e = (t = this.options).onOpen) == null || e.call(t, this.hotspot));
   }
   /** Schedule hide with delay (for hover mode) */
   scheduleHide(t = 200) {
@@ -431,7 +449,7 @@ class N {
   /** Hide the popover immediately */
   hide() {
     var t, e;
-    this.clearHideTimer(), this.visible && (this.visible = !1, b(this.element, "ci-hotspot-popover--visible"), this.element.setAttribute("aria-hidden", "true"), (e = (t = this.options).onClose) == null || e.call(t, this.hotspot));
+    this.clearHideTimer(), this.visible && (this.visible = !1, v(this.element, "ci-hotspot-popover--visible"), this.element.setAttribute("aria-hidden", "true"), (e = (t = this.options).onClose) == null || e.call(t, this.hotspot));
   }
   /** Clear any pending hide timer */
   clearHideTimer() {
@@ -520,14 +538,14 @@ class Ct {
   }
   bindEvents() {
     const t = (n) => {
-      var p, v;
+      var p, b;
       if (!this.enabled) return;
       if (this.isGesturing) {
         n.preventDefault();
         return;
       }
       if (!n.ctrlKey) {
-        (v = (p = this.options).onScrollWithoutZoom) == null || v.call(p);
+        (b = (p = this.options).onScrollWithoutZoom) == null || b.call(p);
         return;
       }
       n.preventDefault();
@@ -545,13 +563,13 @@ class Ct {
     };
     this.container.addEventListener("dblclick", e), this.cleanups.push(() => this.container.removeEventListener("dblclick", e));
     const o = (n) => {
-      !this.enabled || this.zoom <= 1 || n.button === 0 && (this.isDragging = !0, this.dragStartX = n.clientX, this.dragStartY = n.clientY, this.lastPanX = this.panX, this.lastPanY = this.panY, m(this.viewport, "ci-hotspot-viewport--dragging"), this.container.style.cursor = "grabbing", n.preventDefault());
+      !this.enabled || this.zoom <= 1 || n.button === 0 && (this.isDragging = !0, this.dragStartX = n.clientX, this.dragStartY = n.clientY, this.lastPanX = this.panX, this.lastPanY = this.panY, f(this.viewport, "ci-hotspot-viewport--dragging"), this.container.style.cursor = "grabbing", n.preventDefault());
     }, i = (n) => {
       if (!this.isDragging) return;
       const r = (n.clientX - this.dragStartX) / this.zoom, c = (n.clientY - this.dragStartY) / this.zoom;
       this.panX = this.lastPanX + r, this.panY = this.lastPanY + c, this.clampPan(), this.applyTransform();
     }, a = () => {
-      this.isDragging && (this.isDragging = !1, b(this.viewport, "ci-hotspot-viewport--dragging"), this.container.style.cursor = this.zoom > 1 ? "grab" : "");
+      this.isDragging && (this.isDragging = !1, v(this.viewport, "ci-hotspot-viewport--dragging"), this.container.style.cursor = this.zoom > 1 ? "grab" : "");
     };
     this.container.addEventListener("mousedown", o), document.addEventListener("mousemove", i), document.addEventListener("mouseup", a), this.cleanups.push(
       () => this.container.removeEventListener("mousedown", o),
@@ -683,28 +701,28 @@ class Lt {
     this.hideTimer !== null && (clearTimeout(this.hideTimer), this.hideTimer = null), this.el.remove();
   }
 }
-const At = "cloudimg.io", Mt = "v7", D = 100;
-function Dt(s, t = D) {
+const At = "cloudimg.io", Mt = "v7", I = 100;
+function Dt(s, t = I) {
   return Math.ceil(s / t) * t;
 }
-function tt(s, t = 1, e = 1, o = D) {
+function tt(s, t = 1, e = 1, o = I) {
   const i = s * t * e;
   return Dt(i, o);
 }
-function S(s, t, e, o = 1, i = 1) {
-  const a = t.domain || At, n = t.apiVersion || Mt, r = t.limitFactor || D, c = tt(e, i, o, r), l = encodeURI(s);
+function P(s, t, e, o = 1, i = 1) {
+  const a = t.domain || At, n = t.apiVersion || Mt, r = t.limitFactor || I, c = tt(e, i, o, r), l = encodeURI(s);
   let h = `https://${t.token}.${a}/${n}/${l}?width=${c}`;
   return t.params && (h += `&${t.params}`), h;
 }
 function It(s, t, e, o) {
-  const i = e.limitFactor || D;
+  const i = e.limitFactor || I;
   let a = 0;
   const n = new ResizeObserver((r) => {
     for (const c of r) {
       const l = c.contentRect.width;
       if (l === 0) continue;
       const h = typeof window < "u" && window.devicePixelRatio || 1, d = tt(l, h, o(), i);
-      d !== a && (a = d, s.src = S(t, e, l, o(), h));
+      d !== a && (a = d, s.src = P(t, e, l, o(), h));
     }
   });
   return {
@@ -712,7 +730,7 @@ function It(s, t, e, o) {
     destroy: () => n.disconnect()
   };
 }
-const A = 50, j = 0.5;
+const M = 50, j = 0.5;
 class Ft {
   constructor(t) {
     this.cleanups = [];
@@ -726,16 +744,16 @@ class Ft {
           i == null || i();
           break;
         case "ArrowUp":
-          l && l.getZoom() > 1 && (r.preventDefault(), l.pan(0, A));
+          l && l.getZoom() > 1 && (r.preventDefault(), l.pan(0, M));
           break;
         case "ArrowDown":
-          l && l.getZoom() > 1 && (r.preventDefault(), l.pan(0, -A));
+          l && l.getZoom() > 1 && (r.preventDefault(), l.pan(0, -M));
           break;
         case "ArrowLeft":
-          l && l.getZoom() > 1 && (r.preventDefault(), l.pan(A, 0));
+          l && l.getZoom() > 1 && (r.preventDefault(), l.pan(M, 0));
           break;
         case "ArrowRight":
-          l && l.getZoom() > 1 && (r.preventDefault(), l.pan(-A, 0));
+          l && l.getZoom() > 1 && (r.preventDefault(), l.pan(-M, 0));
           break;
         case "+":
         case "=":
@@ -784,7 +802,7 @@ function _(s, t) {
   }
   return { activate: i, deactivate: a, destroy: n };
 }
-let y = null, M = 0;
+let y = null, D = 0;
 function Rt(s) {
   K() && (y || (y = g("div", void 0, {
     "aria-live": "polite",
@@ -795,16 +813,16 @@ function Rt(s) {
   }));
 }
 function B() {
-  M++;
+  D++;
 }
 function Zt() {
-  M = Math.max(0, M - 1), M === 0 && y && (y.remove(), y = null);
+  D = Math.max(0, D - 1), D === 0 && y && (y.remove(), y = null);
 }
-const G = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" x2="14" y1="3" y2="10"/><line x1="3" x2="10" y1="21" y2="14"/></svg>', Ot = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" x2="21" y1="10" y2="3"/><line x1="3" x2="10" y1="21" y2="14"/></svg>';
-function Xt() {
+const G = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" x2="14" y1="3" y2="10"/><line x1="3" x2="10" y1="21" y2="14"/></svg>', $t = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" x2="21" y1="10" y2="3"/><line x1="3" x2="10" y1="21" y2="14"/></svg>';
+function Ot() {
   return !!(document.fullscreenEnabled || document.webkitFullscreenEnabled);
 }
-function $t() {
+function Xt() {
   return document.fullscreenElement || document.webkitFullscreenElement || null;
 }
 function q(s) {
@@ -814,7 +832,7 @@ function F() {
   return document.exitFullscreen ? document.exitFullscreen() : document.webkitExitFullscreen ? (document.webkitExitFullscreen(), Promise.resolve()) : Promise.reject(new Error("Fullscreen API not supported"));
 }
 function Wt(s, t = {}) {
-  if (!Xt()) return null;
+  if (!Ot()) return null;
   const e = g("button", "ci-hotspot-fullscreen-btn", {
     "aria-label": "Enter fullscreen",
     "aria-pressed": "false",
@@ -823,12 +841,12 @@ function Wt(s, t = {}) {
   e.innerHTML = G;
   const o = [];
   function i() {
-    return $t() === s;
+    return Xt() === s;
   }
   function a() {
-    var v;
+    var b;
     const p = i();
-    e.innerHTML = p ? Ot : G, e.setAttribute("aria-label", p ? "Exit fullscreen" : "Enter fullscreen"), e.setAttribute("aria-pressed", String(p)), p ? m(s, "ci-hotspot-container--fullscreen") : b(s, "ci-hotspot-container--fullscreen"), (v = t.onChange) == null || v.call(t, p);
+    e.innerHTML = p ? $t : G, e.setAttribute("aria-label", p ? "Exit fullscreen" : "Enter fullscreen"), e.setAttribute("aria-pressed", String(p)), p ? f(s, "ci-hotspot-container--fullscreen") : v(s, "ci-hotspot-container--fullscreen"), (b = t.onChange) == null || b.call(t, p);
   }
   function n() {
     i() ? F().catch(() => {
@@ -851,7 +869,7 @@ function Wt(s, t = {}) {
   o.push(h), s.appendChild(e);
   function d() {
     i() && F().catch(() => {
-    }), b(s, "ci-hotspot-container--fullscreen"), o.forEach((p) => p()), o.length = 0, e.remove();
+    }), v(s, "ci-hotspot-container--fullscreen"), o.forEach((p) => p()), o.length = 0, e.remove();
   }
   return {
     element: e,
@@ -862,9 +880,9 @@ function Wt(s, t = {}) {
     destroy: d
   };
 }
-const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-marker-color: #ffffff;--ci-hotspot-marker-bg: rgba(0, 0, 0, .6);--ci-hotspot-marker-border-width: 2px;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .8);--ci-hotspot-marker-border: var(--ci-hotspot-marker-border-width) solid var(--ci-hotspot-marker-border-color);--ci-hotspot-marker-border-radius: 50%;--ci-hotspot-marker-shadow: 0 2px 8px rgba(0, 0, 0, .3);--ci-hotspot-pulse-color: rgba(0, 0, 0, .2);--ci-hotspot-pulse-size: 40px;--ci-hotspot-pulse-duration: 1.8s;--ci-hotspot-popover-bg: #ffffff;--ci-hotspot-popover-color: #1a1a1a;--ci-hotspot-popover-border: 1px solid rgba(0, 0, 0, .1);--ci-hotspot-popover-border-radius: 12px;--ci-hotspot-popover-shadow: 0 8px 32px rgba(0, 0, 0, .12);--ci-hotspot-popover-padding: 16px;--ci-hotspot-popover-max-width: 320px;--ci-hotspot-popover-max-height: 400px;--ci-hotspot-popover-font-family: inherit;--ci-hotspot-popover-font-size: 14px;--ci-hotspot-popover-line-height: 1.5;--ci-hotspot-popover-z-index: 1000;--ci-hotspot-arrow-size: 8px;--ci-hotspot-arrow-color: var(--ci-hotspot-popover-bg);--ci-hotspot-title-font-size: 16px;--ci-hotspot-title-font-weight: 600;--ci-hotspot-title-color: #1a1a1a;--ci-hotspot-price-color: #2d8c3c;--ci-hotspot-price-font-size: 18px;--ci-hotspot-price-font-weight: 700;--ci-hotspot-description-color: #666666;--ci-hotspot-cta-bg: #0058a3;--ci-hotspot-cta-color: #ffffff;--ci-hotspot-cta-border-radius: 8px;--ci-hotspot-cta-padding: 8px 16px;--ci-hotspot-original-price-color: #999999;--ci-hotspot-popover-text-align: left;--ci-hotspot-hover-transition: .2s ease;--ci-hotspot-popover-transition: .3s ease;--ci-hotspot-scene-transition-duration: .4s;--ci-hotspot-zoom-controls-bg: rgba(255, 255, 255, .9);--ci-hotspot-zoom-controls-color: #333333;--ci-hotspot-zoom-controls-border-radius: 8px;--ci-hotspot-zoom-controls-shadow: 0 2px 8px rgba(0, 0, 0, .15)}.ci-hotspot-container *,.ci-hotspot-container *:before,.ci-hotspot-container *:after{box-sizing:border-box}.ci-hotspot-container{position:relative;overflow:hidden;width:100%;line-height:0;user-select:none;-webkit-user-select:none}.ci-hotspot-viewport{position:relative;width:100%;transform-origin:0 0;will-change:transform;transition:transform .3s ease}.ci-hotspot-viewport--dragging{transition:none}.ci-hotspot-image{display:block;width:100%;height:auto;pointer-events:none}.ci-hotspot-markers{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.ci-hotspot-marker{position:absolute;width:var(--ci-hotspot-marker-size);height:var(--ci-hotspot-marker-size);padding:0;border:var(--ci-hotspot-marker-border);border-radius:var(--ci-hotspot-marker-border-radius);background:var(--ci-hotspot-marker-bg);color:var(--ci-hotspot-marker-color);box-shadow:var(--ci-hotspot-marker-shadow);cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%) scale(calc(1 / var(--zoom, 1)));transition:transform var(--ci-hotspot-hover-transition),box-shadow var(--ci-hotspot-hover-transition);z-index:1;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;outline:none}.ci-hotspot-marker:hover{transform:translate(-50%,-50%) scale(calc(1.2 / var(--zoom, 1)));box-shadow:0 4px 12px #0006}.ci-hotspot-marker:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:2px}.ci-hotspot-marker--active{transform:translate(-50%,-50%) scale(calc(1.2 / var(--zoom, 1)));z-index:2}.ci-hotspot-marker--hidden{display:none}.ci-hotspot-marker--dot-label{overflow:visible}.ci-hotspot-marker-label{position:absolute;left:calc(50% + var(--ci-hotspot-marker-size) / 2 + 4px);top:50%;transform:translateY(-50%);padding:3px 10px;font-size:11px;font-weight:600;white-space:nowrap;color:var(--ci-hotspot-marker-color);background:var(--ci-hotspot-marker-bg);border:var(--ci-hotspot-marker-border);border-radius:100px;box-shadow:var(--ci-hotspot-marker-shadow)}.ci-hotspot-marker--dot-label.ci-hotspot-marker--pulse{animation:none}.ci-hotspot-marker--pulse:before{content:"";position:absolute;top:50%;left:50%;width:var(--ci-hotspot-pulse-size);height:var(--ci-hotspot-pulse-size);border-radius:50%;background:var(--ci-hotspot-pulse-color);transform:translate(-50%,-50%) scale(1);animation:ci-hotspot-pulse var(--ci-hotspot-pulse-duration) ease-out infinite;pointer-events:none}@keyframes ci-hotspot-pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(1.8);opacity:0}}.ci-hotspot-marker--pulse{animation:ci-hotspot-breathe 2.4s ease-in-out infinite}.ci-hotspot-marker--pulse:hover,.ci-hotspot-marker--pulse.ci-hotspot-marker--active{animation:none}@keyframes ci-hotspot-breathe{0%,to{transform:translate(-50%,-50%) scale(calc(1 / var(--zoom, 1)))}50%{transform:translate(-50%,-50%) scale(calc(1.15 / var(--zoom, 1)))}}.ci-hotspot-popover{position:absolute;z-index:var(--ci-hotspot-popover-z-index);max-width:var(--ci-hotspot-popover-max-width);background:var(--ci-hotspot-popover-bg);color:var(--ci-hotspot-popover-color);border:var(--ci-hotspot-popover-border);border-radius:var(--ci-hotspot-popover-border-radius);box-shadow:var(--ci-hotspot-popover-shadow);font-family:var(--ci-hotspot-popover-font-family);font-size:var(--ci-hotspot-popover-font-size);line-height:var(--ci-hotspot-popover-line-height);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity var(--ci-hotspot-popover-transition),transform var(--ci-hotspot-popover-transition)}.ci-hotspot-popover--visible{opacity:1;pointer-events:auto;transform:translateY(0);animation:ci-hotspot-popover-in var(--ci-hotspot-popover-transition) forwards}@keyframes ci-hotspot-popover-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.ci-hotspot-popover-arrow{position:absolute;width:calc(var(--ci-hotspot-arrow-size) * 2);height:calc(var(--ci-hotspot-arrow-size) * 2);background:var(--ci-hotspot-arrow-color);transform:rotate(45deg);pointer-events:none}.ci-hotspot-popover[data-placement=top] .ci-hotspot-popover-arrow{bottom:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover[data-placement=bottom] .ci-hotspot-popover-arrow{top:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover[data-placement=left] .ci-hotspot-popover-arrow{right:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover[data-placement=right] .ci-hotspot-popover-arrow{left:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover-content{padding:var(--ci-hotspot-popover-padding);max-height:var(--ci-hotspot-popover-max-height);overflow-y:auto;overflow-x:hidden;border-radius:var(--ci-hotspot-popover-border-radius)}.ci-hotspot-popover-image-wrapper{aspect-ratio:16 / 9;overflow:hidden;border-radius:calc(var(--ci-hotspot-popover-border-radius) - 4px) calc(var(--ci-hotspot-popover-border-radius) - 4px) 0 0;margin:calc(var(--ci-hotspot-popover-padding) * -1);margin-bottom:12px;width:calc(100% + var(--ci-hotspot-popover-padding) * 2)}.ci-hotspot-popover-image{display:block;width:100%;height:100%;object-fit:cover}.ci-hotspot-popover-body{line-height:1.5;text-align:var(--ci-hotspot-popover-text-align)}.ci-hotspot-popover-title{margin:0 0 4px;font-size:var(--ci-hotspot-title-font-size);font-weight:var(--ci-hotspot-title-font-weight);color:var(--ci-hotspot-title-color)}.ci-hotspot-popover-price{display:inline-block;margin-bottom:8px;font-size:var(--ci-hotspot-price-font-size);font-weight:var(--ci-hotspot-price-font-weight);color:var(--ci-hotspot-price-color)}.ci-hotspot-popover-price-row{display:inline-flex;align-items:baseline;gap:6px;margin-bottom:8px;flex-wrap:wrap}.ci-hotspot-popover-price-row .ci-hotspot-popover-price{margin-bottom:0}.ci-hotspot-popover-original-price{font-size:calc(var(--ci-hotspot-price-font-size) - 2px);font-weight:500;color:var(--ci-hotspot-original-price-color);text-decoration:line-through}.ci-hotspot-popover-description{margin:0 0 12px;color:var(--ci-hotspot-description-color)}.ci-hotspot-popover-cta{display:inline-block;padding:var(--ci-hotspot-cta-padding);background:var(--ci-hotspot-cta-bg);color:var(--ci-hotspot-cta-color);border-radius:var(--ci-hotspot-cta-border-radius);text-decoration:none;font-weight:600;font-size:14px;transition:opacity .2s ease}.ci-hotspot-popover-cta:hover{opacity:.9}.ci-hotspot-popover-cta:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:2px}.ci-hotspot-zoom-controls{position:absolute;display:flex;gap:2px;background:var(--ci-hotspot-zoom-controls-bg);border-radius:var(--ci-hotspot-zoom-controls-border-radius);box-shadow:var(--ci-hotspot-zoom-controls-shadow);z-index:10;overflow:hidden}.ci-hotspot-zoom-controls button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;color:var(--ci-hotspot-zoom-controls-color);cursor:pointer;font-size:18px;line-height:1;padding:0;transition:background .15s ease}.ci-hotspot-zoom-controls button:hover{background:#0000000d}.ci-hotspot-zoom-controls button:disabled{opacity:.3;cursor:default}.ci-hotspot-zoom-controls button:disabled:hover{background:transparent}.ci-hotspot-zoom-controls button svg{width:18px;height:18px}.ci-hotspot-zoom-controls button:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:-3px}.ci-hotspot-zoom-controls[data-position=bottom-right]{bottom:16px;right:16px}.ci-hotspot-zoom-controls[data-position=bottom-left]{bottom:16px;left:16px}.ci-hotspot-zoom-controls[data-position=bottom-center]{bottom:16px;left:50%;transform:translate(-50%)}.ci-hotspot-zoom-controls[data-position=top-right]{top:16px;right:16px}.ci-hotspot-zoom-controls[data-position=top-left]{top:16px;left:16px}.ci-hotspot-zoom-controls[data-position=top-center]{top:16px;left:50%;transform:translate(-50%)}.ci-hotspot-zoom-controls[data-position=top-right]~.ci-hotspot-fullscreen-btn{right:136px}.ci-hotspot-cluster{position:absolute;display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border-radius:16px;border:2px solid rgba(255,255,255,.8);background:var(--ci-hotspot-marker-bg);color:var(--ci-hotspot-marker-color);font-size:13px;font-weight:700;cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%) scale(calc(1 / var(--zoom, 1)));box-shadow:var(--ci-hotspot-marker-shadow)}.ci-hotspot-loading .ci-hotspot-image{opacity:0;transition:opacity .3s ease}.ci-hotspot-loading .ci-hotspot-markers{display:none}.ci-hotspot-theme-dark{--ci-hotspot-marker-bg: rgba(255, 255, 255, .8);--ci-hotspot-marker-color: #1a1a1a;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .4);--ci-hotspot-pulse-color: rgba(255, 255, 255, .2);--ci-hotspot-popover-bg: #1a1a1a;--ci-hotspot-popover-color: #f0f0f0;--ci-hotspot-popover-border: 1px solid rgba(255, 255, 255, .1);--ci-hotspot-popover-shadow: 0 8px 32px rgba(0, 0, 0, .4);--ci-hotspot-title-color: #f0f0f0;--ci-hotspot-description-color: #aaaaaa;--ci-hotspot-original-price-color: #777777;--ci-hotspot-zoom-controls-bg: rgba(30, 30, 30, .9);--ci-hotspot-zoom-controls-color: #f0f0f0}.ci-hotspot-marker-inverted{--ci-hotspot-marker-bg: rgba(255, 255, 255, .8);--ci-hotspot-marker-color: #1a1a1a;--ci-hotspot-marker-border-color: rgba(0, 0, 0, .3);--ci-hotspot-marker-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ci-hotspot-pulse-color: rgba(0, 0, 0, .15)}.ci-hotspot-theme-dark.ci-hotspot-marker-inverted{--ci-hotspot-marker-bg: rgba(0, 0, 0, .6);--ci-hotspot-marker-color: #ffffff;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .3);--ci-hotspot-pulse-color: rgba(255, 255, 255, .15)}.ci-hotspot-scroll-hint{position:absolute;bottom:16px;left:50%;transform:translate(-50%) translateY(4px);padding:8px 16px;border-radius:20px;background:#000000b3;color:#fff;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1;white-space:nowrap;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}.ci-hotspot-scroll-hint--visible{opacity:1;transform:translate(-50%) translateY(0)}.ci-hotspot-container--fixed-ratio .ci-hotspot-viewport{overflow:hidden;height:0}.ci-hotspot-container--fixed-ratio .ci-hotspot-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}.ci-hotspot-container--fixed-ratio .ci-hotspot-markers{z-index:1}.ci-hotspot-scene-incoming{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:0}.ci-hotspot-scene-fade-in{animation:ci-hotspot-scene-fade-in var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-fade-out{animation:ci-hotspot-scene-fade-out var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ci-hotspot-scene-fade-out{0%{opacity:1}to{opacity:0}}.ci-hotspot-scene-slide-in{animation:ci-hotspot-scene-slide-in var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out{animation:ci-hotspot-scene-slide-out var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes ci-hotspot-scene-slide-out{0%{transform:translate(0)}to{transform:translate(-100%)}}.ci-hotspot-scene-slide-in-reverse{animation:ci-hotspot-scene-slide-in-reverse var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out-reverse{animation:ci-hotspot-scene-slide-out-reverse var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in-reverse{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes ci-hotspot-scene-slide-out-reverse{0%{transform:translate(0)}to{transform:translate(100%)}}.ci-hotspot-scene-slide-in-up{animation:ci-hotspot-scene-slide-in-up var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out-up{animation:ci-hotspot-scene-slide-out-up var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in-up{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes ci-hotspot-scene-slide-out-up{0%{transform:translateY(0)}to{transform:translateY(100%)}}.ci-hotspot-scene-slide-in-down{animation:ci-hotspot-scene-slide-in-down var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out-down{animation:ci-hotspot-scene-slide-out-down var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in-down{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes ci-hotspot-scene-slide-out-down{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.ci-hotspot-marker--navigate{--ci-hotspot-marker-bg: rgba(0, 88, 163, .7)}.ci-hotspot-navigate-icon{width:75%;height:75%;display:block}.ci-hotspot-scene-transitioning .ci-hotspot-markers{opacity:0;pointer-events:none;transition:opacity .1s ease}.ci-hotspot-scene-loading:after{content:"";position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border:3px solid rgba(0,0,0,.1);border-top-color:#00000080;border-radius:50%;animation:ci-hotspot-spin .6s linear infinite;z-index:10;pointer-events:none}.ci-hotspot-theme-dark .ci-hotspot-scene-loading:after,.ci-hotspot-scene-loading.ci-hotspot-theme-dark:after{border-color:#ffffff1a;border-top-color:#ffffff80}@keyframes ci-hotspot-spin{to{transform:rotate(360deg)}}.ci-hotspot-fullscreen-btn{position:absolute;top:16px;right:16px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--ci-hotspot-zoom-controls-border-radius);background:var(--ci-hotspot-zoom-controls-bg);color:var(--ci-hotspot-zoom-controls-color);box-shadow:var(--ci-hotspot-zoom-controls-shadow);cursor:pointer;padding:0;z-index:10;transition:background .15s ease}.ci-hotspot-fullscreen-btn:hover{background:#e6e6e6f2}.ci-hotspot-fullscreen-btn svg{width:18px;height:18px}.ci-hotspot-fullscreen-btn:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:2px}.ci-hotspot-container--fullscreen{background:#000;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}.ci-hotspot-container--fullscreen .ci-hotspot-viewport{width:fit-content;max-width:100%;max-height:100%}.ci-hotspot-container--fullscreen .ci-hotspot-image{max-height:100vh;width:auto;max-width:100%;object-fit:contain}.ci-hotspot-container--fullscreen.ci-hotspot-container--fixed-ratio .ci-hotspot-viewport{width:100%;height:100%;padding-bottom:0}.ci-hotspot-container--fullscreen.ci-hotspot-container--fixed-ratio .ci-hotspot-image{width:100%;height:100%;max-height:none}.ci-hotspot-theme-dark .ci-hotspot-fullscreen-btn,.ci-hotspot-container--fullscreen .ci-hotspot-fullscreen-btn{background:#1e1e1ee6;color:#f0f0f0}.ci-hotspot-theme-dark .ci-hotspot-fullscreen-btn:hover,.ci-hotspot-container--fullscreen .ci-hotspot-fullscreen-btn:hover{background:#3c3c3cf2}@media (prefers-reduced-motion: reduce){.ci-hotspot-marker,.ci-hotspot-marker:before,.ci-hotspot-popover{animation:none!important;transition-duration:.01ms!important}.ci-hotspot-viewport,.ci-hotspot-scroll-hint{transition-duration:.01ms!important}.ci-hotspot-scene-fade-in,.ci-hotspot-scene-fade-out,.ci-hotspot-scene-slide-in,.ci-hotspot-scene-slide-out,.ci-hotspot-scene-slide-in-reverse,.ci-hotspot-scene-slide-out-reverse,.ci-hotspot-scene-slide-in-up,.ci-hotspot-scene-slide-out-up,.ci-hotspot-scene-slide-in-down,.ci-hotspot-scene-slide-out-down{animation-duration:.01ms!important}.ci-hotspot-scene-transitioning .ci-hotspot-markers{transition-duration:.01ms!important}.ci-hotspot-scene-loading:after{animation-duration:.01ms!important}.ci-hotspot-fullscreen-btn{transition-duration:.01ms!important}}', P = class P {
+const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-marker-color: #1a1a1a;--ci-hotspot-marker-bg: rgba(255, 255, 255, .8);--ci-hotspot-marker-border-width: 2px;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .4);--ci-hotspot-marker-border: var(--ci-hotspot-marker-border-width) solid var(--ci-hotspot-marker-border-color);--ci-hotspot-marker-border-radius: 50%;--ci-hotspot-marker-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ci-hotspot-pulse-color: rgba(0, 0, 0, .15);--ci-hotspot-pulse-size: 40px;--ci-hotspot-pulse-duration: 1.8s;--ci-hotspot-popover-bg: #ffffff;--ci-hotspot-popover-color: #1a1a1a;--ci-hotspot-popover-border: 1px solid rgba(0, 0, 0, .1);--ci-hotspot-popover-border-radius: 12px;--ci-hotspot-popover-shadow: 0 8px 32px rgba(0, 0, 0, .12);--ci-hotspot-popover-padding: 16px;--ci-hotspot-popover-max-width: 320px;--ci-hotspot-popover-max-height: 400px;--ci-hotspot-popover-font-family: inherit;--ci-hotspot-popover-font-size: 14px;--ci-hotspot-popover-line-height: 1.5;--ci-hotspot-popover-z-index: 1000;--ci-hotspot-arrow-size: 8px;--ci-hotspot-arrow-color: var(--ci-hotspot-popover-bg);--ci-hotspot-title-font-size: 16px;--ci-hotspot-title-font-weight: 600;--ci-hotspot-title-color: #1a1a1a;--ci-hotspot-price-color: #2d8c3c;--ci-hotspot-price-font-size: 18px;--ci-hotspot-price-font-weight: 700;--ci-hotspot-description-color: #666666;--ci-hotspot-cta-bg: #0058a3;--ci-hotspot-cta-color: #ffffff;--ci-hotspot-cta-border-radius: 8px;--ci-hotspot-cta-padding: 8px 16px;--ci-hotspot-original-price-color: #999999;--ci-hotspot-popover-text-align: left;--ci-hotspot-hover-transition: .2s ease;--ci-hotspot-popover-transition: .3s ease;--ci-hotspot-scene-transition-duration: .4s;--ci-hotspot-zoom-controls-bg: rgba(255, 255, 255, .9);--ci-hotspot-zoom-controls-color: #333333;--ci-hotspot-zoom-controls-border-radius: 8px;--ci-hotspot-zoom-controls-shadow: 0 2px 8px rgba(0, 0, 0, .15)}.ci-hotspot-container *,.ci-hotspot-container *:before,.ci-hotspot-container *:after{box-sizing:border-box}.ci-hotspot-container{position:relative;overflow:hidden;width:100%;line-height:0;user-select:none;-webkit-user-select:none}.ci-hotspot-viewport{position:relative;width:100%;transform-origin:0 0;will-change:transform;transition:transform .3s ease}.ci-hotspot-viewport--dragging{transition:none}.ci-hotspot-image{display:block;width:100%;height:auto;pointer-events:none}.ci-hotspot-markers{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.ci-hotspot-marker{position:absolute;width:var(--ci-hotspot-marker-size);height:var(--ci-hotspot-marker-size);padding:0;border:var(--ci-hotspot-marker-border);border-radius:var(--ci-hotspot-marker-border-radius);background:var(--ci-hotspot-marker-bg);color:var(--ci-hotspot-marker-color);box-shadow:var(--ci-hotspot-marker-shadow);cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%) scale(calc(1 / var(--zoom, 1)));transition:transform var(--ci-hotspot-hover-transition),box-shadow var(--ci-hotspot-hover-transition);z-index:1;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;outline:none}.ci-hotspot-marker:hover{transform:translate(-50%,-50%) scale(calc(1.2 / var(--zoom, 1)));box-shadow:0 4px 12px #0006}.ci-hotspot-marker:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:2px}.ci-hotspot-marker--active{transform:translate(-50%,-50%) scale(calc(1.2 / var(--zoom, 1)));z-index:2}.ci-hotspot-marker--hidden{display:none}.ci-hotspot-marker--dot-label{overflow:visible}.ci-hotspot-marker-label{position:absolute;left:calc(50% + var(--ci-hotspot-marker-size) / 2 + 4px);top:50%;transform:translateY(-50%);padding:3px 10px;font-size:11px;font-weight:600;white-space:nowrap;color:var(--ci-hotspot-marker-color);background:var(--ci-hotspot-marker-bg);border:var(--ci-hotspot-marker-border);border-radius:100px;box-shadow:var(--ci-hotspot-marker-shadow)}.ci-hotspot-marker--dot-label.ci-hotspot-marker--pulse{animation:none}.ci-hotspot-marker--pulse:before{content:"";position:absolute;top:50%;left:50%;width:var(--ci-hotspot-pulse-size);height:var(--ci-hotspot-pulse-size);border-radius:50%;background:var(--ci-hotspot-pulse-color);transform:translate(-50%,-50%) scale(1);animation:ci-hotspot-pulse var(--ci-hotspot-pulse-duration) ease-out infinite;pointer-events:none}@keyframes ci-hotspot-pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(1.8);opacity:0}}.ci-hotspot-marker--pulse{animation:ci-hotspot-breathe 2.4s ease-in-out infinite}.ci-hotspot-marker--pulse:hover,.ci-hotspot-marker--pulse.ci-hotspot-marker--active{animation:none}@keyframes ci-hotspot-breathe{0%,to{transform:translate(-50%,-50%) scale(calc(1 / var(--zoom, 1)))}50%{transform:translate(-50%,-50%) scale(calc(1.15 / var(--zoom, 1)))}}.ci-hotspot-popover{position:absolute;z-index:var(--ci-hotspot-popover-z-index);max-width:var(--ci-hotspot-popover-max-width);background:var(--ci-hotspot-popover-bg);color:var(--ci-hotspot-popover-color);border:var(--ci-hotspot-popover-border);border-radius:var(--ci-hotspot-popover-border-radius);box-shadow:var(--ci-hotspot-popover-shadow);font-family:var(--ci-hotspot-popover-font-family);font-size:var(--ci-hotspot-popover-font-size);line-height:var(--ci-hotspot-popover-line-height);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity var(--ci-hotspot-popover-transition),transform var(--ci-hotspot-popover-transition)}.ci-hotspot-popover--visible{opacity:1;pointer-events:auto;transform:translateY(0);animation:ci-hotspot-popover-in var(--ci-hotspot-popover-transition) forwards}@keyframes ci-hotspot-popover-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.ci-hotspot-popover-arrow{position:absolute;width:calc(var(--ci-hotspot-arrow-size) * 2);height:calc(var(--ci-hotspot-arrow-size) * 2);background:var(--ci-hotspot-arrow-color);transform:rotate(45deg);pointer-events:none}.ci-hotspot-popover[data-placement=top] .ci-hotspot-popover-arrow{bottom:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover[data-placement=bottom] .ci-hotspot-popover-arrow{top:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover[data-placement=left] .ci-hotspot-popover-arrow{right:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover[data-placement=right] .ci-hotspot-popover-arrow{left:calc(var(--ci-hotspot-arrow-size) * -1)}.ci-hotspot-popover-content{padding:var(--ci-hotspot-popover-padding);max-height:var(--ci-hotspot-popover-max-height);overflow-y:auto;overflow-x:hidden;border-radius:var(--ci-hotspot-popover-border-radius)}.ci-hotspot-popover-image-wrapper{aspect-ratio:16 / 9;overflow:hidden;border-radius:calc(var(--ci-hotspot-popover-border-radius) - 4px) calc(var(--ci-hotspot-popover-border-radius) - 4px) 0 0;margin:calc(var(--ci-hotspot-popover-padding) * -1);margin-bottom:12px;width:calc(100% + var(--ci-hotspot-popover-padding) * 2)}.ci-hotspot-popover-image{display:block;width:100%;height:100%;object-fit:cover}.ci-hotspot-popover-body{line-height:1.5;text-align:var(--ci-hotspot-popover-text-align)}.ci-hotspot-popover-title{margin:0 0 4px;font-size:var(--ci-hotspot-title-font-size);font-weight:var(--ci-hotspot-title-font-weight);color:var(--ci-hotspot-title-color)}.ci-hotspot-popover-price{display:inline-block;margin-bottom:8px;font-size:var(--ci-hotspot-price-font-size);font-weight:var(--ci-hotspot-price-font-weight);color:var(--ci-hotspot-price-color)}.ci-hotspot-popover-price-row{display:inline-flex;align-items:baseline;gap:6px;margin-bottom:8px;flex-wrap:wrap}.ci-hotspot-popover-price-row .ci-hotspot-popover-price{margin-bottom:0}.ci-hotspot-popover-original-price{font-size:calc(var(--ci-hotspot-price-font-size) - 2px);font-weight:500;color:var(--ci-hotspot-original-price-color);text-decoration:line-through}.ci-hotspot-popover-description{margin:0 0 12px;color:var(--ci-hotspot-description-color)}.ci-hotspot-popover-cta{display:inline-block;padding:var(--ci-hotspot-cta-padding);background:var(--ci-hotspot-cta-bg);color:var(--ci-hotspot-cta-color);border-radius:var(--ci-hotspot-cta-border-radius);text-decoration:none;font-weight:600;font-size:14px;transition:opacity .2s ease}.ci-hotspot-popover-cta:hover{opacity:.9}button.ci-hotspot-popover-cta{cursor:pointer;border:none;font:inherit;width:100%}.ci-hotspot-popover-cta:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:2px}.ci-hotspot-zoom-controls{position:absolute;display:flex;gap:2px;background:var(--ci-hotspot-zoom-controls-bg);border-radius:var(--ci-hotspot-zoom-controls-border-radius);box-shadow:var(--ci-hotspot-zoom-controls-shadow);z-index:10;overflow:hidden}.ci-hotspot-zoom-controls button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;color:var(--ci-hotspot-zoom-controls-color);cursor:pointer;font-size:18px;line-height:1;padding:0;transition:background .15s ease}.ci-hotspot-zoom-controls button:hover{background:#0000000d}.ci-hotspot-zoom-controls button:disabled{opacity:.3;cursor:default}.ci-hotspot-zoom-controls button:disabled:hover{background:transparent}.ci-hotspot-zoom-controls button svg{width:18px;height:18px}.ci-hotspot-zoom-controls button:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:-3px}.ci-hotspot-zoom-controls[data-position=bottom-right]{bottom:16px;right:16px}.ci-hotspot-zoom-controls[data-position=bottom-left]{bottom:16px;left:16px}.ci-hotspot-zoom-controls[data-position=bottom-center]{bottom:16px;left:50%;transform:translate(-50%)}.ci-hotspot-zoom-controls[data-position=top-right]{top:16px;right:16px}.ci-hotspot-zoom-controls[data-position=top-left]{top:16px;left:16px}.ci-hotspot-zoom-controls[data-position=top-center]{top:16px;left:50%;transform:translate(-50%)}.ci-hotspot-zoom-controls[data-position=top-right]~.ci-hotspot-fullscreen-btn{right:136px}.ci-hotspot-cluster{position:absolute;display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border-radius:16px;border:2px solid rgba(255,255,255,.8);background:var(--ci-hotspot-marker-bg);color:var(--ci-hotspot-marker-color);font-size:13px;font-weight:700;cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%) scale(calc(1 / var(--zoom, 1)));box-shadow:var(--ci-hotspot-marker-shadow)}.ci-hotspot-loading .ci-hotspot-image{opacity:0;transition:opacity .3s ease}.ci-hotspot-loading .ci-hotspot-markers{display:none}.ci-hotspot-theme-dark{--ci-hotspot-marker-bg: rgba(0, 0, 0, .6);--ci-hotspot-marker-color: #ffffff;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .6);--ci-hotspot-pulse-color: rgba(255, 255, 255, .15);--ci-hotspot-popover-bg: #1a1a1a;--ci-hotspot-popover-color: #f0f0f0;--ci-hotspot-popover-border: 1px solid rgba(255, 255, 255, .1);--ci-hotspot-popover-shadow: 0 8px 32px rgba(0, 0, 0, .4);--ci-hotspot-title-color: #f0f0f0;--ci-hotspot-description-color: #aaaaaa;--ci-hotspot-original-price-color: #777777;--ci-hotspot-zoom-controls-bg: rgba(30, 30, 30, .9);--ci-hotspot-zoom-controls-color: #f0f0f0}.ci-hotspot-marker-inverted{--ci-hotspot-marker-bg: rgba(0, 0, 0, .6);--ci-hotspot-marker-color: #ffffff;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .8);--ci-hotspot-marker-shadow: 0 2px 8px rgba(0, 0, 0, .3);--ci-hotspot-pulse-color: rgba(0, 0, 0, .2)}.ci-hotspot-theme-dark.ci-hotspot-marker-inverted{--ci-hotspot-marker-bg: rgba(255, 255, 255, .8);--ci-hotspot-marker-color: #1a1a1a;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .4);--ci-hotspot-pulse-color: rgba(255, 255, 255, .2)}.ci-hotspot-marker-brand{--ci-hotspot-marker-bg: var(--ci-hotspot-brand-color, #00aaff);--ci-hotspot-marker-color: #ffffff;--ci-hotspot-marker-border-color: rgba(255, 255, 255, .9);--ci-hotspot-marker-shadow: 0 2px 8px rgba(0, 0, 0, .25);--ci-hotspot-pulse-color: var(--ci-hotspot-brand-color, #00aaff)}.ci-hotspot-scroll-hint{position:absolute;bottom:16px;left:50%;transform:translate(-50%) translateY(4px);padding:8px 16px;border-radius:20px;background:#000000b3;color:#fff;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1;white-space:nowrap;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}.ci-hotspot-scroll-hint--visible{opacity:1;transform:translate(-50%) translateY(0)}.ci-hotspot-container--fixed-ratio .ci-hotspot-viewport{overflow:hidden;height:0}.ci-hotspot-container--fixed-ratio .ci-hotspot-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}.ci-hotspot-container--fixed-ratio .ci-hotspot-markers{z-index:1}.ci-hotspot-scene-incoming{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:0}.ci-hotspot-scene-fade-in{animation:ci-hotspot-scene-fade-in var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-fade-out{animation:ci-hotspot-scene-fade-out var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ci-hotspot-scene-fade-out{0%{opacity:1}to{opacity:0}}.ci-hotspot-scene-slide-in{animation:ci-hotspot-scene-slide-in var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out{animation:ci-hotspot-scene-slide-out var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes ci-hotspot-scene-slide-out{0%{transform:translate(0)}to{transform:translate(-100%)}}.ci-hotspot-scene-slide-in-reverse{animation:ci-hotspot-scene-slide-in-reverse var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out-reverse{animation:ci-hotspot-scene-slide-out-reverse var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in-reverse{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes ci-hotspot-scene-slide-out-reverse{0%{transform:translate(0)}to{transform:translate(100%)}}.ci-hotspot-scene-slide-in-up{animation:ci-hotspot-scene-slide-in-up var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out-up{animation:ci-hotspot-scene-slide-out-up var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in-up{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes ci-hotspot-scene-slide-out-up{0%{transform:translateY(0)}to{transform:translateY(100%)}}.ci-hotspot-scene-slide-in-down{animation:ci-hotspot-scene-slide-in-down var(--ci-hotspot-scene-transition-duration) ease forwards;z-index:1}.ci-hotspot-scene-slide-out-down{animation:ci-hotspot-scene-slide-out-down var(--ci-hotspot-scene-transition-duration) ease forwards}@keyframes ci-hotspot-scene-slide-in-down{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes ci-hotspot-scene-slide-out-down{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.ci-hotspot-navigate-icon{width:75%;height:75%;display:block}.ci-hotspot-scene-transitioning .ci-hotspot-markers{opacity:0;pointer-events:none;transition:opacity .1s ease}.ci-hotspot-scene-loading:after{content:"";position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border:3px solid rgba(0,0,0,.1);border-top-color:#00000080;border-radius:50%;animation:ci-hotspot-spin .6s linear infinite;z-index:10;pointer-events:none}.ci-hotspot-theme-dark .ci-hotspot-scene-loading:after,.ci-hotspot-scene-loading.ci-hotspot-theme-dark:after{border-color:#ffffff1a;border-top-color:#ffffff80}@keyframes ci-hotspot-spin{to{transform:rotate(360deg)}}.ci-hotspot-fullscreen-btn{position:absolute;top:16px;right:16px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--ci-hotspot-zoom-controls-border-radius);background:var(--ci-hotspot-zoom-controls-bg);color:var(--ci-hotspot-zoom-controls-color);box-shadow:var(--ci-hotspot-zoom-controls-shadow);cursor:pointer;padding:0;z-index:10;transition:background .15s ease}.ci-hotspot-fullscreen-btn:hover{background:#e6e6e6f2}.ci-hotspot-fullscreen-btn svg{width:18px;height:18px}.ci-hotspot-fullscreen-btn:focus-visible{outline:3px solid var(--ci-hotspot-focus-ring, #4A90D9);outline-offset:2px}.ci-hotspot-container--fullscreen{background:#000;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}.ci-hotspot-container--fullscreen .ci-hotspot-viewport{width:fit-content;max-width:100%;max-height:100%}.ci-hotspot-container--fullscreen .ci-hotspot-image{max-height:100vh;width:auto;max-width:100%;object-fit:contain}.ci-hotspot-container--fullscreen.ci-hotspot-container--fixed-ratio .ci-hotspot-viewport{width:100%;height:100%;padding-bottom:0!important}.ci-hotspot-container--fullscreen.ci-hotspot-container--fixed-ratio .ci-hotspot-image{width:100%;height:100%;max-height:none;object-fit:contain}.ci-hotspot-theme-dark .ci-hotspot-fullscreen-btn,.ci-hotspot-container--fullscreen .ci-hotspot-fullscreen-btn{background:#1e1e1ee6;color:#f0f0f0}.ci-hotspot-theme-dark .ci-hotspot-fullscreen-btn:hover,.ci-hotspot-container--fullscreen .ci-hotspot-fullscreen-btn:hover{background:#3c3c3cf2}@media (prefers-reduced-motion: reduce){.ci-hotspot-marker,.ci-hotspot-marker:before,.ci-hotspot-popover{animation:none!important;transition-duration:.01ms!important}.ci-hotspot-viewport,.ci-hotspot-scroll-hint{transition-duration:.01ms!important}.ci-hotspot-scene-fade-in,.ci-hotspot-scene-fade-out,.ci-hotspot-scene-slide-in,.ci-hotspot-scene-slide-out,.ci-hotspot-scene-slide-in-reverse,.ci-hotspot-scene-slide-out-reverse,.ci-hotspot-scene-slide-in-up,.ci-hotspot-scene-slide-out-up,.ci-hotspot-scene-slide-in-down,.ci-hotspot-scene-slide-out-down{animation-duration:.01ms!important}.ci-hotspot-scene-transitioning .ci-hotspot-markers{transition-duration:.01ms!important}.ci-hotspot-scene-loading:after{animation-duration:.01ms!important}.ci-hotspot-fullscreen-btn{transition-duration:.01ms!important}}', H = class H {
   constructor(t, e) {
-    this.markers = /* @__PURE__ */ new Map(), this.popovers = /* @__PURE__ */ new Map(), this.normalizedHotspots = /* @__PURE__ */ new Map(), this.scrollHint = null, this.zoomPan = null, this.zoomControls = null, this.cloudimageHandler = null, this.resizeObserver = null, this.keyboardHandler = null, this.fullscreenControl = null, this.focusTraps = /* @__PURE__ */ new Map(), this.cleanups = [], this.hotspotCleanups = /* @__PURE__ */ new Map(), this.imageLoaded = !1, this.destroyed = !1, this.scenesMap = /* @__PURE__ */ new Map(), this.isTransitioning = !1, this.activeTimers = /* @__PURE__ */ new Set(), this.sceneHotspotOverrides = /* @__PURE__ */ new Map(), this.preloadedScenes = /* @__PURE__ */ new Set(), this.rootEl = nt(t), this.config = Z(e), O(this.config), this.config.scenes && this.config.scenes.length > 0 && this.initScenes(), B(), rt(Nt), this.buildDOM(), this.applyTheme(), this.setupImage(), this.initHotspots(), this.config.zoom && this.initZoom(), this.initKeyboard(), this.initFullscreen(), this.setupResponsive();
+    this.markers = /* @__PURE__ */ new Map(), this.popovers = /* @__PURE__ */ new Map(), this.normalizedHotspots = /* @__PURE__ */ new Map(), this.scrollHint = null, this.zoomPan = null, this.zoomControls = null, this.cloudimageHandler = null, this.resizeObserver = null, this.keyboardHandler = null, this.fullscreenControl = null, this.focusTraps = /* @__PURE__ */ new Map(), this.cleanups = [], this.hotspotCleanups = /* @__PURE__ */ new Map(), this.imageLoaded = !1, this.destroyed = !1, this.scenesMap = /* @__PURE__ */ new Map(), this.isTransitioning = !1, this.activeTimers = /* @__PURE__ */ new Set(), this.sceneHotspotOverrides = /* @__PURE__ */ new Map(), this.preloadedScenes = /* @__PURE__ */ new Set(), this.rootEl = nt(t), this.config = Z(e), $(this.config), this.config.scenes && this.config.scenes.length > 0 && this.initScenes(), B(), rt(Nt), this.buildDOM(), this.applyTheme(), this.setupImage(), this.initHotspots(), this.config.zoom && this.initZoom(), this.initKeyboard(), this.initFullscreen(), this.setupResponsive();
   }
   /** Auto-initialize all elements with data-ci-hotspot-src or data-ci-hotspot-scenes attribute */
   static autoInit(t) {
@@ -873,7 +891,7 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     ), i = [];
     return o.forEach((a) => {
       const n = it(a);
-      (n.src || n.scenes) && i.push(new P(a, n));
+      (n.src || n.scenes) && i.push(new H(a, n));
     }), i;
   }
   buildDOM() {
@@ -881,18 +899,20 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
       alt: this.config.alt || "",
       draggable: "false"
     }), this.markersEl = g("div", "ci-hotspot-markers"), this.viewportEl.appendChild(this.imgEl), this.viewportEl.appendChild(this.markersEl), this.containerEl.appendChild(this.viewportEl), this.containerEl.setAttribute("role", "group"), this.containerEl.setAttribute("aria-label", this.config.alt || "Image with hotspots"), this.config.sceneAspectRatio) {
-      m(this.containerEl, "ci-hotspot-container--fixed-ratio");
+      f(this.containerEl, "ci-hotspot-container--fixed-ratio");
       const t = this.config.sceneAspectRatio.split(/[:/\s]+/).map(Number);
       t.length >= 2 && t[0] > 0 && t[1] > 0 && (this.viewportEl.style.paddingBottom = `${t[1] / t[0] * 100}%`);
     }
-    this.rootEl.innerHTML = "", this.rootEl.appendChild(this.containerEl), this.config.lazyLoad && m(this.containerEl, "ci-hotspot-loading");
+    this.rootEl.innerHTML = "", this.rootEl.appendChild(this.containerEl), this.config.lazyLoad && f(this.containerEl, "ci-hotspot-loading");
   }
   applyTheme() {
-    this.config.theme === "dark" && m(this.containerEl, "ci-hotspot-theme-dark"), this.config.invertMarkerTheme && m(this.containerEl, "ci-hotspot-marker-inverted");
+    this.config.theme === "dark" ? f(this.containerEl, "ci-hotspot-theme-dark") : v(this.containerEl, "ci-hotspot-theme-dark");
+    const t = this.config.markerTheme && this.config.markerTheme !== "default" ? this.config.markerTheme : this.config.invertMarkerTheme ? "inverted" : "default";
+    v(this.containerEl, "ci-hotspot-marker-inverted"), v(this.containerEl, "ci-hotspot-marker-brand"), this.containerEl.style.removeProperty("--ci-hotspot-brand-color"), t === "inverted" ? f(this.containerEl, "ci-hotspot-marker-inverted") : t === "brand" && (f(this.containerEl, "ci-hotspot-marker-brand"), this.config.brandColor && this.containerEl.style.setProperty("--ci-hotspot-brand-color", this.config.brandColor));
   }
   setupImage() {
     const t = () => {
-      b(this.containerEl, "ci-hotspot-loading"), this.imageLoaded = !0, this.renormalizePixelCoordinates(), this.syncMarkersToImage(), this.showLoadTriggerPopovers();
+      v(this.containerEl, "ci-hotspot-loading"), this.imageLoaded = !0, this.renormalizePixelCoordinates(), this.syncMarkersToImage(), this.showLoadTriggerPopovers();
     };
     if (this.imgEl.addEventListener("load", t), this.cleanups.push(() => this.imgEl.removeEventListener("load", t)), this.config.lazyLoad && typeof IntersectionObserver < "u") {
       const e = new IntersectionObserver(
@@ -910,7 +930,7 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     var t, e;
     if ((t = this.config.cloudimage) != null && t.token) {
       const o = this.containerEl.offsetWidth || 300, i = window.devicePixelRatio || 1, a = ((e = this.zoomPan) == null ? void 0 : e.getZoom()) || 1;
-      this.imgEl.src = S(
+      this.imgEl.src = P(
         this.config.src,
         this.config.cloudimage,
         o,
@@ -939,9 +959,9 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     var h, d;
     if (this.markers.has(t.id)) {
       const p = this.markers.get(t.id);
-      L(p), this.markers.delete(t.id), (h = this.popovers.get(t.id)) == null || h.destroy(), this.popovers.delete(t.id);
-      const v = this.hotspotCleanups.get(t.id);
-      v && (v.forEach((k) => k()), this.hotspotCleanups.delete(t.id));
+      A(p), this.markers.delete(t.id), (h = this.popovers.get(t.id)) == null || h.destroy(), this.popovers.delete(t.id);
+      const b = this.hotspotCleanups.get(t.id);
+      b && (b.forEach((w) => w()), this.hotspotCleanups.delete(t.id));
       const E = this.focusTraps.get(t.id);
       E && (E.destroy(), this.focusTraps.delete(t.id));
     }
@@ -958,14 +978,15 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     if (t.navigateTo) {
       const p = this.enrichNavigateHotspot(t);
       if (!!(p.data || p.content || this.config.renderPopover)) {
-        const E = t.placement || this.config.placement || "top", k = new N(p, {
+        const E = t.placement || this.config.placement || "top", w = new N(p, {
           placement: E,
           triggerMode: "hover",
           renderFn: this.config.renderPopover,
           onOpen: this.config.onOpen,
-          onClose: this.config.onClose
+          onClose: this.config.onClose,
+          onProductClick: this.config.onProductClick
         });
-        this.popovers.set(t.id, k), k.mount(this.containerEl, n), this.bindNavigateTrigger(t, n, k);
+        this.popovers.set(t.id, w), w.mount(this.containerEl, n), this.bindNavigateTrigger(t, n, w);
       } else
         this.bindNavigateTrigger(t, n);
       return;
@@ -975,9 +996,10 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
       triggerMode: r,
       renderFn: this.config.renderPopover,
       onOpen: this.config.onOpen,
-      onClose: this.config.onClose
+      onClose: this.config.onClose,
+      onProductClick: this.config.onProductClick
     });
-    this.popovers.set(t.id, l), l.mount(this.containerEl, n), this.bindTrigger(t, n, l, r), r === "load" && this.imageLoaded && (this.closeAll(), l.show(), f(n, !0), this.ensureFocusTrap(t.id, l.element, n), (d = this.focusTraps.get(t.id)) == null || d.activate());
+    this.popovers.set(t.id, l), l.mount(this.containerEl, n), this.bindTrigger(t, n, l, r), r === "load" && this.imageLoaded && (this.closeAll(), l.show(), m(n, !0), this.ensureFocusTrap(t.id, l.element, n), (d = this.focusTraps.get(t.id)) == null || d.activate());
   }
   /** For navigateTo hotspots without explicit data/content, generate popover content from the destination scene */
   enrichNavigateHotspot(t) {
@@ -989,24 +1011,24 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     } : t;
   }
   bindNavigateTrigger(t, e, o) {
-    if (m(e, "ci-hotspot-marker--navigate"), e.innerHTML = P.NAVIGATE_ARROW_SVG, t.arrowDirection != null) {
+    if (f(e, "ci-hotspot-marker--navigate"), e.innerHTML = H.NAVIGATE_ARROW_SVG, t.arrowDirection != null) {
       const r = e.querySelector("svg");
       r && (r.style.transform = `rotate(${t.arrowDirection}deg)`);
     }
     const i = t.label || t.navigateTo;
     if (e.setAttribute("aria-label", `Navigate to ${i}`), e.setAttribute("aria-roledescription", "navigation hotspot"), o) {
       const r = u(e, "mouseenter", () => {
-        this.preloadSceneImage(t.navigateTo), o.clearHideTimer(), o.show(), f(e, !0);
+        this.preloadSceneImage(t.navigateTo), o.clearHideTimer(), o.show(), m(e, !0);
       }), c = () => {
         this.trackedTimeout(() => {
-          o.isVisible() || f(e, !1);
+          o.isVisible() || m(e, !1);
         }, 250);
       }, l = u(e, "mouseleave", () => {
         o.scheduleHide(200), c();
       }), h = u(o.element, "mouseleave", () => {
         c();
       }), d = u(e, "focus", () => {
-        this.preloadSceneImage(t.navigateTo), o.clearHideTimer(), o.show(), f(e, !0);
+        this.preloadSceneImage(t.navigateTo), o.clearHideTimer(), o.show(), m(e, !0);
       }), p = u(e, "blur", () => {
         o.scheduleHide(200), c();
       });
@@ -1021,10 +1043,10 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     }
     const a = u(e, "click", (r) => {
       var c, l, h;
-      r.stopPropagation(), o == null || o.hide(), f(e, !1), (l = (c = this.config).onClick) == null || l.call(c, r, t), (h = t.onClick) == null || h.call(t, r, t), this.goToScene(t.navigateTo);
+      r.stopPropagation(), o == null || o.hide(), m(e, !1), (l = (c = this.config).onClick) == null || l.call(c, r, t), (h = t.onClick) == null || h.call(t, r, t), this.goToScene(t.navigateTo);
     }), n = u(e, "keydown", (r) => {
       var c, l, h;
-      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), o == null || o.hide(), f(e, !1), (l = (c = this.config).onClick) == null || l.call(c, r, t), (h = t.onClick) == null || h.call(t, r, t), this.goToScene(t.navigateTo));
+      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), o == null || o.hide(), m(e, !1), (l = (c = this.config).onClick) == null || l.call(c, r, t), (h = t.onClick) == null || h.call(t, r, t), this.goToScene(t.navigateTo));
     });
     this.addHotspotCleanups(t.id, a, n);
   }
@@ -1033,10 +1055,10 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
   }
   bindHoverTrigger(t, e, o) {
     const i = u(e, "mouseenter", () => {
-      o.clearHideTimer(), o.show(), f(e, !0);
+      o.clearHideTimer(), o.show(), m(e, !0);
     }), a = () => {
       this.trackedTimeout(() => {
-        o.isVisible() || f(e, !1);
+        o.isVisible() || m(e, !1);
       }, 250);
     }, n = u(e, "mouseleave", () => {
       o.scheduleHide(200), a();
@@ -1050,22 +1072,22 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     this.focusTraps.set(t.id, i);
     const a = u(e, "click", (r) => {
       var c, l, h;
-      r.stopPropagation(), (l = (c = this.config).onClick) == null || l.call(c, r, t), (h = t.onClick) == null || h.call(t, r, t), o.isVisible() ? (o.hide(), f(e, !1), i.deactivate()) : (this.closeAll(), o.show(), f(e, !0), i.activate());
+      r.stopPropagation(), (l = (c = this.config).onClick) == null || l.call(c, r, t), (h = t.onClick) == null || h.call(t, r, t), o.isVisible() ? (o.hide(), m(e, !1), i.deactivate()) : (this.closeAll(), o.show(), m(e, !0), i.activate());
     }), n = u(this.containerEl, "click", (r) => {
-      o.isVisible() && !t.keepOpen && !o.element.contains(r.target) && !e.contains(r.target) && (o.hide(), f(e, !1), i.deactivate());
+      o.isVisible() && !t.keepOpen && !o.element.contains(r.target) && !e.contains(r.target) && (o.hide(), m(e, !1), i.deactivate());
     });
     this.addHotspotCleanups(t.id, a, n);
   }
   bindKeyboardTrigger(t, e, o, i) {
     const a = u(e, "focus", () => {
-      i === "hover" && (o.clearHideTimer(), o.show(), f(e, !0));
+      i === "hover" && (o.clearHideTimer(), o.show(), m(e, !0));
     }), n = u(e, "blur", () => {
       i === "hover" && (o.scheduleHide(200), this.trackedTimeout(() => {
-        o.isVisible() || f(e, !1);
+        o.isVisible() || m(e, !1);
       }, 250));
     }), r = u(e, "keydown", (c) => {
-      var l, h, d, p, v;
-      c.key === "Enter" || c.key === " " ? (c.preventDefault(), (h = (l = this.config).onClick) == null || h.call(l, c, t), o.isVisible() ? (o.hide(), f(e, !1), (d = this.focusTraps.get(t.id)) == null || d.deactivate()) : (this.closeAll(), o.show(), f(e, !0), this.ensureFocusTrap(t.id, o.element, e), (p = this.focusTraps.get(t.id)) == null || p.activate())) : c.key === "Escape" && o.isVisible() && (o.hide(), f(e, !1), (v = this.focusTraps.get(t.id)) == null || v.deactivate(), e.focus());
+      var l, h, d, p, b;
+      c.key === "Enter" || c.key === " " ? (c.preventDefault(), (h = (l = this.config).onClick) == null || h.call(l, c, t), o.isVisible() ? (o.hide(), m(e, !1), (d = this.focusTraps.get(t.id)) == null || d.deactivate()) : (this.closeAll(), o.show(), m(e, !0), this.ensureFocusTrap(t.id, o.element, e), (p = this.focusTraps.get(t.id)) == null || p.activate())) : c.key === "Escape" && o.isVisible() && (o.hide(), m(e, !1), (b = this.focusTraps.get(t.id)) == null || b.deactivate(), e.focus());
     });
     this.addHotspotCleanups(t.id, a, n, r);
   }
@@ -1088,7 +1110,7 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
       if (((i == null ? void 0 : i.trigger) || this.config.trigger || "hover") === "load" && !o.isVisible()) {
         o.show();
         const n = this.markers.get(e);
-        n && (f(n, !0), this.ensureFocusTrap(e, o.element, n), (t = this.focusTraps.get(e)) == null || t.activate());
+        n && (m(n, !0), this.ensureFocusTrap(e, o.element, n), (t = this.focusTraps.get(e)) == null || t.activate());
         break;
       }
     }
@@ -1189,7 +1211,7 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     const o = new Image();
     if ((i = this.config.cloudimage) != null && i.token) {
       const a = this.containerEl.offsetWidth || 300, n = typeof window < "u" && window.devicePixelRatio || 1;
-      o.src = S(e.src, this.config.cloudimage, a, 1, n);
+      o.src = P(e.src, this.config.cloudimage, a, 1, n);
     } else
       o.src = e.src;
   }
@@ -1219,7 +1241,7 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
       t.destroy();
     this.popovers.clear();
     for (const [, t] of this.markers)
-      L(t);
+      A(t);
     this.markers.clear(), this.normalizedHotspots.clear();
     for (const [, t] of this.focusTraps)
       t.destroy();
@@ -1238,30 +1260,30 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
       return;
     }
     const a = this.getSceneTransitionDuration();
-    m(this.containerEl, "ci-hotspot-scene-transitioning");
+    f(this.containerEl, "ci-hotspot-scene-transitioning");
     const n = g("img", "ci-hotspot-scene-incoming", {
       alt: t.alt || "",
       draggable: "false"
     });
     if ((c = this.config.cloudimage) != null && c.token) {
       const l = this.containerEl.offsetWidth || 300, h = typeof window < "u" && window.devicePixelRatio || 1;
-      n.src = S(t.src, this.config.cloudimage, l, 1, h);
+      n.src = P(t.src, this.config.cloudimage, l, 1, h);
     } else
       n.src = t.src;
     const r = () => {
-      this.destroyed || (e === "fade" ? (m(n, "ci-hotspot-scene-fade-in"), m(this.imgEl, "ci-hotspot-scene-fade-out")) : e === "slide" && (m(n, `ci-hotspot-scene-slide-in${o}`), m(this.imgEl, `ci-hotspot-scene-slide-out${o}`)), this.viewportEl.insertBefore(n, this.markersEl), this.transitionTimer = setTimeout(() => {
+      this.destroyed || (e === "fade" ? (f(n, "ci-hotspot-scene-fade-in"), f(this.imgEl, "ci-hotspot-scene-fade-out")) : e === "slide" && (f(n, `ci-hotspot-scene-slide-in${o}`), f(this.imgEl, `ci-hotspot-scene-slide-out${o}`)), this.viewportEl.insertBefore(n, this.markersEl), this.transitionTimer = setTimeout(() => {
         if (this.transitionTimer = void 0, this.destroyed) return;
         this.clearHotspots(), this.switchToScene(t);
         const l = () => {
-          n.remove(), b(this.imgEl, "ci-hotspot-scene-fade-out"), b(this.imgEl, `ci-hotspot-scene-slide-out${o}`), b(this.containerEl, "ci-hotspot-scene-transitioning"), i();
+          n.remove(), v(this.imgEl, "ci-hotspot-scene-fade-out"), v(this.imgEl, `ci-hotspot-scene-slide-out${o}`), v(this.containerEl, "ci-hotspot-scene-transitioning"), i();
         };
         this.imgEl.complete && this.imgEl.naturalWidth > 0 ? l() : (this.imgEl.addEventListener("load", l, { once: !0 }), this.imgEl.addEventListener("error", l, { once: !0 }));
       }, a));
     };
-    n.complete ? r() : (m(this.containerEl, "ci-hotspot-scene-loading"), n.onload = () => {
-      b(this.containerEl, "ci-hotspot-scene-loading"), r();
+    n.complete ? r() : (f(this.containerEl, "ci-hotspot-scene-loading"), n.onload = () => {
+      v(this.containerEl, "ci-hotspot-scene-loading"), r();
     }, n.onerror = () => {
-      this.destroyed || (b(this.containerEl, "ci-hotspot-scene-loading"), n.remove(), b(this.containerEl, "ci-hotspot-scene-transitioning"), this.clearHotspots(), this.switchToScene(t), i());
+      this.destroyed || (v(this.containerEl, "ci-hotspot-scene-loading"), n.remove(), v(this.containerEl, "ci-hotspot-scene-transitioning"), this.clearHotspots(), this.switchToScene(t), i());
     });
   }
   switchToScene(t) {
@@ -1272,7 +1294,7 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     };
     if (this.imgEl.addEventListener("load", e, { once: !0 }), (o = this.config.cloudimage) != null && o.token) {
       const i = this.containerEl.offsetWidth || 300, a = typeof window < "u" && window.devicePixelRatio || 1;
-      this.imgEl.src = S(t.src, this.config.cloudimage, i, 1, a);
+      this.imgEl.src = P(t.src, this.config.cloudimage, i, 1, a);
     } else
       this.imgEl.src = t.src;
     this.imgEl.complete && this.imgEl.naturalWidth > 0 && !this.imageLoaded && (this.imgEl.removeEventListener("load", e), e()), this.initHotspots();
@@ -1291,13 +1313,13 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     var i;
     if (this.destroyed) return;
     const e = this.popovers.get(t), o = this.markers.get(t);
-    !e || !o || e.isVisible() || (this.closeAll(), e.show(), f(o, !0), (i = this.focusTraps.get(t)) == null || i.activate());
+    !e || !o || e.isVisible() || (this.closeAll(), e.show(), m(o, !0), (i = this.focusTraps.get(t)) == null || i.activate());
   }
   close(t) {
     var i;
     if (this.destroyed) return;
     const e = this.popovers.get(t), o = this.markers.get(t);
-    e && o && (e.hide(), f(o, !1), (i = this.focusTraps.get(t)) == null || i.deactivate());
+    e && o && (e.hide(), m(o, !1), (i = this.focusTraps.get(t)) == null || i.deactivate());
   }
   closeAll() {
     var t;
@@ -1306,7 +1328,7 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
         if (o.isVisible()) {
           o.hide();
           const i = this.markers.get(e);
-          i && f(i, !1), (t = this.focusTraps.get(e)) == null || t.deactivate();
+          i && m(i, !1), (t = this.focusTraps.get(e)) == null || t.deactivate();
         }
     }
   }
@@ -1380,7 +1402,7 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     const o = this.focusTraps.get(t);
     o && (o.destroy(), this.focusTraps.delete(t));
     const i = this.markers.get(t), a = this.popovers.get(t);
-    a && (a.destroy(), this.popovers.delete(t)), i && (L(i), this.markers.delete(t)), this.normalizedHotspots.delete(t), this.config.hotspots = this.config.hotspots.filter((n) => n.id !== t), this.syncCurrentSceneHotspots();
+    a && (a.destroy(), this.popovers.delete(t)), i && (A(i), this.markers.delete(t)), this.normalizedHotspots.delete(t), this.config.hotspots = this.config.hotspots.filter((n) => n.id !== t), this.syncCurrentSceneHotspots();
   }
   updateHotspot(t, e) {
     if (this.destroyed) return;
@@ -1392,7 +1414,7 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     c && a && this.markersEl.contains(a) && this.markersEl.insertBefore(c, a), this.syncCurrentSceneHotspots();
   }
   update(t) {
-    this.destroyed || (this.destroyInternal(), B(), this.config = Z({ ...this.config, ...t }), O(this.config), this.config.scenes && this.config.scenes.length > 0 && this.initScenes(), this.buildDOM(), this.applyTheme(), this.setupImage(), this.initHotspots(), this.config.zoom && this.initZoom(), this.initKeyboard(), this.initFullscreen(), this.setupResponsive());
+    this.destroyed || (this.destroyInternal(), B(), this.config = Z({ ...this.config, ...t }), $(this.config), this.config.scenes && this.config.scenes.length > 0 && this.initScenes(), this.buildDOM(), this.applyTheme(), this.setupImage(), this.initHotspots(), this.config.zoom && this.initZoom(), this.initKeyboard(), this.initFullscreen(), this.setupResponsive());
   }
   destroy() {
     this.destroyed || (this.destroyed = !0, this.destroyInternal(), this.rootEl.innerHTML = "");
@@ -1409,15 +1431,15 @@ const Nt = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
       c.destroy();
     this.popovers.clear();
     for (const [, c] of this.markers)
-      L(c);
+      A(c);
     this.markers.clear(), this.normalizedHotspots.clear();
     for (const [, c] of this.focusTraps)
       c.destroy();
     this.focusTraps.clear(), this.scenesMap.clear(), this.preloadedScenes.clear(), this.sceneHotspotOverrides.clear(), this.currentSceneId = void 0, this.isTransitioning = !1, this.transitionTimer !== void 0 && (clearTimeout(this.transitionTimer), this.transitionTimer = void 0), (t = this.fullscreenControl) == null || t.destroy(), this.fullscreenControl = null, (e = this.keyboardHandler) == null || e.destroy(), this.keyboardHandler = null, (o = this.zoomPan) == null || o.destroy(), this.zoomPan = null, (i = this.zoomControls) == null || i.destroy(), this.zoomControls = null, (a = this.scrollHint) == null || a.destroy(), this.scrollHint = null, (n = this.cloudimageHandler) == null || n.destroy(), this.cloudimageHandler = null, (r = this.resizeObserver) == null || r.disconnect(), this.resizeObserver = null, Zt();
   }
 };
-P.NAVIGATE_ARROW_SVG = '<svg class="ci-hotspot-navigate-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>';
-let U = P;
+H.NAVIGATE_ARROW_SVG = '<svg class="ci-hotspot-navigate-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>';
+let U = H;
 export {
   U as CIHotspot,
   U as default