js-cloudimage-hotspot 1.1.3 → 1.1.4

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

@@ -244,18 +244,18 @@ function v(a, t) {
 function ft(a, t) {
   t ? m(a, "ci-hotspot-marker--hidden") : b(a, "ci-hotspot-marker--hidden");
 }
-function P(a) {
+function A(a) {
   a.remove();
 }
 function mt(a, t, e, i) {
-  const o = a.getBoundingClientRect(), r = e.getBoundingClientRect(), s = t.offsetWidth, n = t.offsetHeight, c = o.left + o.width / 2 - r.left, l = o.top + o.height / 2 - r.top, d = o.top - r.top, u = o.bottom - r.top, p = o.left - r.left, g = o.right - r.left, y = e.offsetWidth, k = e.offsetHeight, x = 8, L = {
+  const o = a.getBoundingClientRect(), r = e.getBoundingClientRect(), s = t.offsetWidth, n = t.offsetHeight, c = o.left + o.width / 2 - r.left, l = o.top + o.height / 2 - r.top, d = o.top - r.top, u = o.bottom - r.top, p = o.left - r.left, g = o.right - r.left, y = e.offsetWidth, k = e.offsetHeight, x = 8, P = {
     top: d - x,
     bottom: k - u - x,
     left: p - x,
     right: y - g - x
   };
   let w = i.placement;
-  w === "auto" && (w = gt(L)), w = vt(w, s, n, L);
+  w === "auto" && (w = gt(P)), w = vt(w, s, n, P);
   let T, S, $ = 0;
   switch (w) {
     case "top":
@@ -389,16 +389,21 @@ function et(a) {
 }
 function Tt(a) {
   const t = [];
-  a.image && t.push(`<div class="ci-hotspot-popover-image-wrapper"><img class="ci-hotspot-popover-image" src="${F(a.image)}" alt="${F(a.title || "")}"></div>`);
+  a.image && t.push(`<div class="ci-hotspot-popover-image-wrapper"><img class="ci-hotspot-popover-image" src="${M(a.image)}" alt="${M(a.title || "")}"></div>`);
   const e = [];
   if (a.title && e.push(`<h3 class="ci-hotspot-popover-title">${z(a.title)}</h3>`), a.originalPrice || a.price) {
     let i = "";
     a.originalPrice && (i += `<span class="ci-hotspot-popover-original-price">${z(a.originalPrice)}</span>`), a.price && (i += `<span class="ci-hotspot-popover-price">${z(a.price)}</span>`), e.push(`<div class="ci-hotspot-popover-price-row">${i}</div>`);
   }
   if (a.description && e.push(`<p class="ci-hotspot-popover-description">${z(a.description)}</p>`), a.url && zt(a.url)) {
+    const i = a.ctaText || "View details", o = a.id ? ` data-product-id="${M(a.id)}"` : "";
+    e.push(
+      `<a class="ci-hotspot-popover-cta" href="${M(a.url)}"${o}>${z(String(i))}</a>`
+    );
+  } else if (a.id) {
     const i = a.ctaText || "View details";
     e.push(
-      `<a class="ci-hotspot-popover-cta" href="${F(a.url)}">${z(String(i))}</a>`
+      `<button class="ci-hotspot-popover-cta" data-product-id="${M(a.id)}">${z(String(i))}</button>`
     );
   }
   return e.length > 0 && t.push(`<div class="ci-hotspot-popover-body">${e.join("")}</div>`), t.join("");
@@ -413,7 +418,7 @@ function zt(a) {
   const t = a.replace(/[\s\x00-\x1f]/g, "");
   return /^https?:\/\//i.test(t) || /^\/(?!\/)/.test(t) || /^#/.test(t);
 }
-function F(a) {
+function M(a) {
   return a.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 class W {
@@ -428,7 +433,16 @@ class W {
       ...i && t.label ? { "aria-label": t.label } : {}
     }), this.arrowEl = h("div", "ci-hotspot-popover-arrow"), this.contentEl = h("div", "ci-hotspot-popover-content"), this.element.appendChild(this.arrowEl), this.element.appendChild(this.contentEl);
     const o = St(t, e.renderFn);
-    if (typeof o == "string" ? this.contentEl.innerHTML = o : o instanceof HTMLElement && this.contentEl.appendChild(o), e.triggerMode === "hover") {
+    if (typeof o == "string" ? this.contentEl.innerHTML = o : o instanceof HTMLElement && this.contentEl.appendChild(o), e.onProductClick) {
+      const r = (s) => {
+        const n = s.target.closest(".ci-hotspot-popover-cta[data-product-id]");
+        if (!n) return;
+        const c = n.dataset.productId;
+        e.onProductClick(c, t);
+      };
+      this.contentEl.addEventListener("click", r), this.hoverCleanups.push(() => this.contentEl.removeEventListener("click", r));
+    }
+    if (e.triggerMode === "hover") {
       const r = () => this.clearHideTimer(), s = () => this.scheduleHide();
       this.element.addEventListener("mouseenter", r), this.element.addEventListener("mouseleave", s), this.hoverCleanups.push(
         () => this.element.removeEventListener("mouseenter", r),
@@ -692,42 +706,42 @@ function Lt(a, t, e) {
     destroy: () => o.remove()
   };
 }
-const It = "Ctrl + scroll or pinch to zoom", Pt = 1500;
+const Pt = "Ctrl + scroll or pinch to zoom", It = 1500;
 class At {
   constructor(t) {
-    this.hideTimer = null, this.el = document.createElement("div"), this.el.className = "ci-hotspot-scroll-hint", this.el.textContent = It, this.el.setAttribute("aria-hidden", "true"), t.appendChild(this.el);
+    this.hideTimer = null, this.el = document.createElement("div"), this.el.className = "ci-hotspot-scroll-hint", this.el.textContent = Pt, this.el.setAttribute("aria-hidden", "true"), t.appendChild(this.el);
   }
   show() {
     this.hideTimer !== null && clearTimeout(this.hideTimer), this.el.classList.add("ci-hotspot-scroll-hint--visible"), this.hideTimer = setTimeout(() => {
       this.el.classList.remove("ci-hotspot-scroll-hint--visible"), this.hideTimer = null;
-    }, Pt);
+    }, It);
   }
   destroy() {
     this.hideTimer !== null && (clearTimeout(this.hideTimer), this.hideTimer = null), this.el.remove();
   }
 }
-const Dt = "cloudimg.io", Bt = "v7", B = 100;
-function Ft(a, t = B) {
+const Dt = "cloudimg.io", Bt = "v7", F = 100;
+function Ft(a, t = F) {
   return Math.ceil(a / t) * t;
 }
-function it(a, t = 1, e = 1, i = B) {
+function it(a, t = 1, e = 1, i = F) {
   const o = a * t * e;
   return Ft(o, i);
 }
-function M(a, t, e, i = 1, o = 1) {
-  const r = t.domain || Dt, s = t.apiVersion || Bt, n = t.limitFactor || B, c = it(e, o, i, n), l = encodeURI(a);
+function H(a, t, e, i = 1, o = 1) {
+  const r = t.domain || Dt, s = t.apiVersion || Bt, n = t.limitFactor || F, c = it(e, o, i, n), l = encodeURI(a);
   let d = `https://${t.token}.${r}/${s}/${l}?width=${c}`;
   return t.params && (d += `&${t.params}`), d;
 }
 function Yt(a, t, e, i) {
-  const o = e.limitFactor || B;
+  const o = e.limitFactor || F;
   let r = 0;
   const s = new ResizeObserver((n) => {
     for (const c of n) {
       const l = c.contentRect.width;
       if (l === 0) continue;
       const d = typeof window < "u" && window.devicePixelRatio || 1, u = it(l, d, i(), o);
-      u !== r && (r = u, a.src = M(t, e, l, i(), d));
+      u !== r && (r = u, a.src = H(t, e, l, i(), d));
     }
   });
   return {
@@ -735,7 +749,7 @@ function Yt(a, t, e, i) {
     destroy: () => s.disconnect()
   };
 }
-const A = 50, U = 0.5;
+const D = 50, U = 0.5;
 class Rt {
   constructor(t) {
     this.cleanups = [];
@@ -749,16 +763,16 @@ class Rt {
           o == null || o();
           break;
         case "ArrowUp":
-          l && l.getZoom() > 1 && (n.preventDefault(), l.pan(0, A));
+          l && l.getZoom() > 1 && (n.preventDefault(), l.pan(0, D));
           break;
         case "ArrowDown":
-          l && l.getZoom() > 1 && (n.preventDefault(), l.pan(0, -A));
+          l && l.getZoom() > 1 && (n.preventDefault(), l.pan(0, -D));
           break;
         case "ArrowLeft":
-          l && l.getZoom() > 1 && (n.preventDefault(), l.pan(A, 0));
+          l && l.getZoom() > 1 && (n.preventDefault(), l.pan(D, 0));
           break;
         case "ArrowRight":
-          l && l.getZoom() > 1 && (n.preventDefault(), l.pan(-A, 0));
+          l && l.getZoom() > 1 && (n.preventDefault(), l.pan(-D, 0));
           break;
         case "+":
         case "=":
@@ -807,7 +821,7 @@ function R(a, t) {
   }
   return { activate: o, deactivate: r, destroy: s };
 }
-let E = null, D = 0;
+let E = null, B = 0;
 function $t(a) {
   K() && (E || (E = h("div", void 0, {
     "aria-live": "polite",
@@ -818,10 +832,10 @@ function $t(a) {
   }));
 }
 function q() {
-  D++;
+  B++;
 }
 function Nt() {
-  D = Math.max(0, D - 1), D === 0 && E && (E.remove(), E = null);
+  B = Math.max(0, B - 1), B === 0 && E && (E.remove(), E = 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>', Xt = '<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 jt() {
@@ -885,7 +899,7 @@ function Vt(a, t = {}) {
     destroy: u
   };
 }
-const ot = '.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}.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}.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}}', H = class H {
+const ot = '.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}}', L = class L {
   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 = st(t), this.config = X(e), j(this.config), this.config.scenes && this.config.scenes.length > 0 && this.initScenes(), q(), Q(ot), this.buildDOM(), this.applyTheme(), this.setupImage(), this.initHotspots(), this.config.zoom && this.initZoom(), this.initKeyboard(), this.initFullscreen(), this.setupResponsive();
   }
@@ -896,7 +910,7 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     ), o = [];
     return i.forEach((r) => {
       const s = ct(r);
-      (s.src || s.scenes) && o.push(new H(r, s));
+      (s.src || s.scenes) && o.push(new L(r, s));
     }), o;
   }
   buildDOM() {
@@ -935,7 +949,7 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     var t, e;
     if ((t = this.config.cloudimage) != null && t.token) {
       const i = this.containerEl.offsetWidth || 300, o = window.devicePixelRatio || 1, r = ((e = this.zoomPan) == null ? void 0 : e.getZoom()) || 1;
-      this.imgEl.src = M(
+      this.imgEl.src = H(
         this.config.src,
         this.config.cloudimage,
         i,
@@ -964,7 +978,7 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     var d, u;
     if (this.markers.has(t.id)) {
       const p = this.markers.get(t.id);
-      P(p), this.markers.delete(t.id), (d = this.popovers.get(t.id)) == null || d.destroy(), this.popovers.delete(t.id);
+      A(p), this.markers.delete(t.id), (d = this.popovers.get(t.id)) == null || d.destroy(), this.popovers.delete(t.id);
       const g = this.hotspotCleanups.get(t.id);
       g && (g.forEach((k) => k()), this.hotspotCleanups.delete(t.id));
       const y = this.focusTraps.get(t.id);
@@ -988,7 +1002,8 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
           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, s), this.bindNavigateTrigger(t, s, k);
       } else
@@ -1000,7 +1015,8 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
       triggerMode: n,
       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, s), this.bindTrigger(t, s, l, n), n === "load" && this.imageLoaded && (this.closeAll(), l.show(), v(s, !0), this.ensureFocusTrap(t.id, l.element, s), (u = this.focusTraps.get(t.id)) == null || u.activate());
   }
@@ -1014,7 +1030,7 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     } : t;
   }
   bindNavigateTrigger(t, e, i) {
-    if (m(e, "ci-hotspot-marker--navigate"), e.innerHTML = H.NAVIGATE_ARROW_SVG, t.arrowDirection != null) {
+    if (m(e, "ci-hotspot-marker--navigate"), e.innerHTML = L.NAVIGATE_ARROW_SVG, t.arrowDirection != null) {
       const n = e.querySelector("svg");
       n && (n.style.transform = `rotate(${t.arrowDirection}deg)`);
     }
@@ -1214,7 +1230,7 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     const i = new Image();
     if ((o = this.config.cloudimage) != null && o.token) {
       const r = this.containerEl.offsetWidth || 300, s = typeof window < "u" && window.devicePixelRatio || 1;
-      i.src = M(e.src, this.config.cloudimage, r, 1, s);
+      i.src = H(e.src, this.config.cloudimage, r, 1, s);
     } else
       i.src = e.src;
   }
@@ -1244,7 +1260,7 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
       t.destroy();
     this.popovers.clear();
     for (const [, t] of this.markers)
-      P(t);
+      A(t);
     this.markers.clear(), this.normalizedHotspots.clear();
     for (const [, t] of this.focusTraps)
       t.destroy();
@@ -1270,7 +1286,7 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     });
     if ((c = this.config.cloudimage) != null && c.token) {
       const l = this.containerEl.offsetWidth || 300, d = typeof window < "u" && window.devicePixelRatio || 1;
-      s.src = M(t.src, this.config.cloudimage, l, 1, d);
+      s.src = H(t.src, this.config.cloudimage, l, 1, d);
     } else
       s.src = t.src;
     const n = () => {
@@ -1297,7 +1313,7 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     };
     if (this.imgEl.addEventListener("load", e, { once: !0 }), (i = this.config.cloudimage) != null && i.token) {
       const o = this.containerEl.offsetWidth || 300, r = typeof window < "u" && window.devicePixelRatio || 1;
-      this.imgEl.src = M(t.src, this.config.cloudimage, o, 1, r);
+      this.imgEl.src = H(t.src, this.config.cloudimage, o, 1, r);
     } else
       this.imgEl.src = t.src;
     this.imgEl.complete && this.imgEl.naturalWidth > 0 && !this.imageLoaded && (this.imgEl.removeEventListener("load", e), e()), this.initHotspots();
@@ -1405,7 +1421,7 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
     const i = this.focusTraps.get(t);
     i && (i.destroy(), this.focusTraps.delete(t));
     const o = this.markers.get(t), r = this.popovers.get(t);
-    r && (r.destroy(), this.popovers.delete(t)), o && (P(o), this.markers.delete(t)), this.normalizedHotspots.delete(t), this.config.hotspots = this.config.hotspots.filter((s) => s.id !== t), this.syncCurrentSceneHotspots();
+    r && (r.destroy(), this.popovers.delete(t)), o && (A(o), this.markers.delete(t)), this.normalizedHotspots.delete(t), this.config.hotspots = this.config.hotspots.filter((s) => s.id !== t), this.syncCurrentSceneHotspots();
   }
   updateHotspot(t, e) {
     if (this.destroyed) return;
@@ -1434,15 +1450,15 @@ const ot = '.ci-hotspot-container{--ci-hotspot-marker-size: 24px;--ci-hotspot-ma
       c.destroy();
     this.popovers.clear();
     for (const [, c] of this.markers)
-      P(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, (i = this.zoomPan) == null || i.destroy(), this.zoomPan = null, (o = this.zoomControls) == null || o.destroy(), this.zoomControls = null, (r = this.scrollHint) == null || r.destroy(), this.scrollHint = null, (s = this.cloudimageHandler) == null || s.destroy(), this.cloudimageHandler = null, (n = this.resizeObserver) == null || n.disconnect(), this.resizeObserver = null, Nt();
   }
 };
-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 O = H;
+L.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 O = L;
 const C = {
   cursor: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 12.586 19 19"/><path d="M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z"/></svg>',
   plus: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>',
@@ -1768,8 +1784,8 @@ class qt {
         if (this.rafId = null, !this.markerEl) return;
         const g = t.querySelector(".ci-hotspot-image");
         if (!g) return;
-        const y = g.getBoundingClientRect(), k = (u - y.left) / y.width * 100, x = (p - y.top) / y.height * 100, L = Math.max(0, Math.min(100, k)), w = Math.max(0, Math.min(100, x));
-        this.markerEl.style.left = `${L}%`, this.markerEl.style.top = `${w}%`;
+        const y = g.getBoundingClientRect(), k = (u - y.left) / y.width * 100, x = (p - y.top) / y.height * 100, P = Math.max(0, Math.min(100, k)), w = Math.max(0, Math.min(100, x));
+        this.markerEl.style.left = `${P}%`, this.markerEl.style.top = `${w}%`;
       });
     }, o = (c) => {
       if (this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null), !!this.dragId) {