@vio-live/web-sdk 0.35.0 → 0.37.0

package/dist/{chunk-F7LE5AZY.js → chunk-LDA7RI43.js}

@@ -1,4 +1,4 @@
-import { Vio, __decorateClass, primaryImageUrl, displayPrice, resolveDetailLayout, toCampaignId, getGlobalCurrency, copyAppliedLayout, onGlobalDetailLayoutChange, layoutSignature, layoutOriginOf, ensureVippsButton, formatPrice, shippingDescriptionOf, buyerRefOf, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, storageGet, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, getGlobalCountryCode, isValidPhone, gatewayHasBuyerRef, rememberedCheckoutSponsor, checkoutSponsorOf, AdyenOriginError, normalizeSlotId, autoSlotDisplayName, autoSlotId, sponsorIdentityFrom, Configuration, normalizeScope, campaignCandidates } from './chunk-QA5R4VYF.js';
+import { Vio, __decorateClass, primaryImageUrl, displayPrice, resolveDetailLayout, toCampaignId, getGlobalCurrency, layoutOriginOf, copyAppliedLayout, onGlobalDetailLayoutChange, layoutSignature, ensureVippsButton, formatPrice, currentGlobalDescriptionLabel, shippingDescriptionOf, lineOrigins, buyerRefOf, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, storageGet, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, getGlobalCountryCode, isValidPhone, gatewayHasBuyerRef, rememberedCheckoutSponsor, checkoutSponsorOf, AdyenOriginError, normalizeSlotId, autoSlotDisplayName, autoSlotId, sponsorIdentityFrom, Configuration, normalizeScope, campaignCandidates, ctaText } from './chunk-KVI56NGO.js';
 import { LitElement, css, html, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 
@@ -171,6 +171,7 @@ var THEME_KEY_TO_CSS_VAR = {
   detailDescriptionPreviewLines: "--vio-detail-description-preview-lines",
   detailHighlightsDisplay: "--vio-detail-highlights-display",
   detailShippingReturnsDisplay: "--vio-detail-shipping-returns-display",
+  cartHighlightsDisplay: "--vio-cart-highlights-display",
   detailThumbSize: "--vio-detail-thumb-size",
   detailThumbGap: "--vio-detail-thumb-gap",
   detailThumbRadius: "--vio-detail-thumb-radius",
@@ -372,6 +373,61 @@ function closestAcrossShadow(start, selector) {
   return null;
 }
 
+// src/ui/cta.ts
+function labelOf(button) {
+  if (button.hasAttribute("data-vio-cta-label")) return ctaText(button.getAttribute("data-vio-cta-label"));
+  return ctaText(button.getAttribute("aria-label")) ?? ctaText(button.textContent);
+}
+function emitCta(host, location, cta, contextOf, extra = {}, button = null) {
+  try {
+    const context = contextOf(cta, button);
+    if (context === null) return;
+    const detail = { ...context, ...stripUndefined(extra), cta, location };
+    host.dispatchEvent(new CustomEvent("vio:cta-click", { bubbles: true, composed: true, detail }));
+  } catch {
+  }
+}
+function stripUndefined(obj) {
+  const out = {};
+  for (const [k, v] of Object.entries(obj)) if (v !== void 0) out[k] = v;
+  return out;
+}
+function trackCtaClicks(host, location, contextOf) {
+  const root = host.renderRoot ?? host.shadowRoot;
+  if (!root || typeof root.addEventListener !== "function") return () => {
+  };
+  const onClick = (ev) => {
+    try {
+      const button = markedButton(ev, root);
+      if (!button) return;
+      const cta = button.getAttribute("data-vio-cta") ?? "";
+      if (button.tagName === "SUMMARY" && button.parentElement?.open) return;
+      const option = button.getAttribute("data-vio-cta-option");
+      emitCta(
+        host,
+        location,
+        cta,
+        contextOf,
+        { label: labelOf(button), ...option !== null ? { optionValue: option } : {} },
+        button
+      );
+    } catch {
+    }
+  };
+  root.addEventListener("click", onClick, { capture: true });
+  return () => root.removeEventListener("click", onClick, { capture: true });
+}
+function markedButton(ev, root) {
+  const path = typeof ev.composedPath === "function" ? ev.composedPath() : [];
+  for (const node of path) {
+    if (node === root) break;
+    if (!(node instanceof Element)) continue;
+    if (node.getRootNode() !== root) continue;
+    if (node.hasAttribute("data-vio-cta")) return node;
+  }
+  return null;
+}
+
 // src/ui/components/vio-product.ts
 var VioProduct = class extends LitElement {
   constructor() {
@@ -404,6 +460,21 @@ var VioProduct = class extends LitElement {
     this.cartQty = 0;
     this.justAdded = false;
     this.boundCartChange = () => this.updateInCart();
+    /** Stops reporting the taps on the buttons (`vio:cta-click`). */
+    this.stopCtaClicks = null;
+    /** What a tap on the card says (`vio:cta-click`): its product, sponsor and attribution. */
+    this.ctaContext = () => {
+      const a = this.attribution();
+      return {
+        productId: this.productId || void 0,
+        sponsorId: this.sponsorId || this.sponsorFromAttribution(),
+        campaignId: a.campaignId,
+        slot: a.slot,
+        contentId: a.contentId,
+        contentTitle: a.contentTitle,
+        componentTemplateId: a.componentTemplateId
+      };
+    };
   }
   /** The slot id in effect: `vio-slot`, else the auto id (`card-N`). Read-only. */
   get effectiveSlot() {
@@ -608,8 +679,12 @@ var VioProduct = class extends LitElement {
     this.updateInCart();
     this.slotRegistration.connect(this.slotAttributes());
     Vio.cart.addEventListener("change", this.boundCartChange);
+    this.stopCtaClicks?.();
+    this.stopCtaClicks = trackCtaClicks(this, "card", this.ctaContext);
   }
   disconnectedCallback() {
+    this.stopCtaClicks?.();
+    this.stopCtaClicks = null;
     Vio.cart.removeEventListener("change", this.boundCartChange);
     this.slotRegistration.clear();
     super.disconnectedCallback();
@@ -659,6 +734,7 @@ var VioProduct = class extends LitElement {
   onKeydown(e) {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
+      if (e.target === e.currentTarget) emitCta(this, "card", "open", this.ctaContext);
       this.onClick();
     }
   }
@@ -709,6 +785,8 @@ var VioProduct = class extends LitElement {
     return html`
       <div
         class="card"
+        data-vio-cta="open"
+        data-vio-cta-label=""
         @click=${this.onClick}
         @keydown=${this.onKeydown}
         role="button"
@@ -719,6 +797,8 @@ var VioProduct = class extends LitElement {
           ${this.imageUrl ? html`<img src=${this.imageUrl} alt=${this.name || this.brand} loading="lazy" />` : ""}
           ${this.buttonStyle === "icon" ? html`<button
             class="add-btn ${this.inCart ? "in-cart" : ""} ${this.justAdded ? "pop" : ""}"
+            data-vio-cta="add"
+            data-vio-cta-label="Legg i kurv"
             @click=${this.onAdd}
             aria-label=${this.inCart ? "I handlekurven \u2013 legg til en til" : "Legg i kurv"}
             title=${this.inCart ? "I handlekurven" : "Legg i kurv"}
@@ -739,7 +819,7 @@ var VioProduct = class extends LitElement {
           ${this.showDescription && this.description ? html`<p class="description">${this.description}</p>` : ""}
           ${this.price ? html`<div class="price">${this.price}</div>` : ""}
           ${this.retailer ? html`<div class="retailer">${this.retailer}</div>` : ""}
-          ${this.buttonStyle === "bar" ? html`<button class="bar-btn ${this.justAdded ? "pop" : ""}" @click=${this.onAdd}>
+          ${this.buttonStyle === "bar" ? html`<button class="bar-btn ${this.justAdded ? "pop" : ""}" data-vio-cta="add" data-vio-cta-label=${this.buttonLabel} @click=${this.onAdd}>
                 ${this.inCart ? `${this.buttonLabel} \xB7 ${this.cartQty}` : this.buttonLabel}
               </button>` : ""}
         </div>`}
@@ -2051,6 +2131,67 @@ function unlockPageScroll() {
   window.scrollTo(0, scrollY);
   root.style.scrollBehavior = behavior;
 }
+var HIGHLIGHT_ICONS = {
+  plane: "M21.5 2.5 2.5 10l7 3m12-10.5-12 10.5m12-10.5L17 21l-7.5-8m0 0V20l3-4M5 17l-2.5 2.5M7.5 18.5 6 20",
+  heart: "M12 20.5s-8.5-5-8.5-11A4.75 4.75 0 0 1 12 6.75 4.75 4.75 0 0 1 20.5 9.5c0 6-8.5 11-8.5 11Z",
+  shirt: "M8.5 3.5 3 6l1.75 4.25L7 9.5v11h10v-11l2.25.75L21 6l-5.5-2.5a3.5 3.5 0 0 1-7 0Z",
+  truck: "M2.5 5.5h11v10h-11zM13.5 9.5h4l3 3.5v2.5h-7M6.5 18.5a2 2 0 1 0 0-.01M17 18.5a2 2 0 1 0 0-.01",
+  return: "M4 9h11.5a4.5 4.5 0 0 1 0 9H8M4 9l4-4M4 9l4 4",
+  leaf: "M5 19C5 10 10 4.5 20 4.5c0 10-5.5 15-14 15M5 19l7-7",
+  star: "m12 3.5 2.6 5.4 5.9.8-4.3 4.1 1 5.9L12 17l-5.2 2.7 1-5.9-4.3-4.1 5.9-.8Z",
+  shield: "M12 3 4.5 6v5.5c0 4.5 3.2 8.2 7.5 9.5 4.3-1.3 7.5-5 7.5-9.5V6Z",
+  mailbox: "M3 19v-8a4 4 0 0 1 8 0v8m-8 0h18v-7a4 4 0 0 0-4-4H7m8 0V4h3M6 12h2",
+  home: "M3 11 12 4l9 7M5.5 9.5V20h13V9.5M10 20v-5h4v5",
+  pin: "M12 21s-6.5-6-6.5-11a6.5 6.5 0 0 1 13 0c0 5-6.5 11-6.5 11Zm0-8.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z",
+  clock: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-13.5V12l3 2"
+};
+function renderHighlights(items) {
+  const list = (Array.isArray(items) ? items : []).filter((h) => h && h.title);
+  if (list.length === 0) return nothing;
+  return html`<ul class="highlights" part="highlights">
+    ${list.map((h) => {
+    const path = h.icon ? HIGHLIGHT_ICONS[h.icon] : void 0;
+    const icon = path ? html`<svg class="hl-icon" viewBox="0 0 24 24" aria-hidden="true"><path d=${path}></path></svg>` : h.icon ? html`<img class="hl-icon" src=${h.icon} alt="" />` : nothing;
+    return html`<li class="hl" part="highlight">
+        ${icon}
+        <span class="hl-title">${h.title}</span>
+        ${h.text ? html`<span class="hl-text">${h.text}</span>` : nothing}
+      </li>`;
+  })}
+  </ul>`;
+}
+function highlightsStyles(scope) {
+  const display = scope === "detail" ? css`var(--vio-detail-highlights-display, grid)` : css`var(--vio-cart-highlights-display, grid)`;
+  const padding = scope === "detail" ? css`var(--vio-detail-highlights-padding, 16px 0 2px)` : css`var(--vio-cart-highlights-padding, 14px 0 2px)`;
+  return css`
+    /* Like a shop's trust strip: a thin icon, the promise in regular weight,
+       a smaller line under it — nothing bold. */
+    .highlights {
+      list-style: none;
+      margin: 0;
+      padding: ${padding};
+      display: ${display};
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+      gap: 10px;
+      border-top: 1px solid var(--vio-color-border, #e5e5e5);
+    }
+    .hl { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; }
+    .hl-icon {
+      width: var(--vio-detail-highlight-icon-size, 22px);
+      height: var(--vio-detail-highlight-icon-size, 22px);
+      margin-bottom: 8px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      object-fit: contain;
+    }
+    .hl-title { font-size: 12px; font-weight: 400; line-height: 1.3; letter-spacing: 0.01em; color: var(--vio-color-text, #0a0a0a); }
+    .hl-text { font-size: 10.5px; line-height: 1.35; letter-spacing: 0.01em; color: var(--vio-color-text-secondary, #666); }
+  `;
+}
 
 // src/ui/components/vio-product-detail.ts
 var layoutAttribute = {
@@ -2070,20 +2211,6 @@ var ADDED_TOAST_MS = 8e3;
 var STRIPE_LOGO_SRC = "data:image/svg+xml;utf8," + encodeURIComponent(
   '<svg width="360" height="150" viewBox="0 0 360 150" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M360 77.4001C360 51.8001 347.6 31.6001 323.9 31.6001C300.1 31.6001 285.7 51.8001 285.7 77.2001C285.7 107.3 302.7 122.5 327.1 122.5C339 122.5 348 119.8 354.8 116V96.0001C348 99.4001 340.2 101.5 330.3 101.5C320.6 101.5 312 98.1001 310.9 86.3001H359.8C359.8 85.0001 360 79.8001 360 77.4001ZM310.6 67.9001C310.6 56.6001 317.5 51.9001 323.8 51.9001C329.9 51.9001 336.4 56.6001 336.4 67.9001H310.6Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M247.1 31.6001C237.3 31.6001 231 36.2001 227.5 39.4001L226.2 33.2001H204.2V149.8L229.2 144.5L229.3 116.2C232.9 118.8 238.2 122.5 247 122.5C264.9 122.5 281.2 108.1 281.2 76.4001C281.1 47.4001 264.6 31.6001 247.1 31.6001ZM241.1 100.5C235.2 100.5 231.7 98.4001 229.3 95.8001L229.2 58.7001C231.8 55.8001 235.4 53.8001 241.1 53.8001C250.2 53.8001 256.5 64.0001 256.5 77.1001C256.5 90.5001 250.3 100.5 241.1 100.5Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M169.8 25.7L194.9 20.3V0L169.8 5.3V25.7Z" fill="#533AFD"/><path d="M194.9 33.3H169.8V120.8H194.9V33.3Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M142.9 40.7L141.3 33.3H119.7V120.8H144.7V61.5C150.6 53.8 160.6 55.2 163.7 56.3V33.3C160.5 32.1 148.8 29.9 142.9 40.7Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M92.8999 11.6001L68.4999 16.8001L68.3999 96.9001C68.3999 111.7 79.4999 122.6 94.2999 122.6C102.5 122.6 108.5 121.1 111.8 119.3V99.0001C108.6 100.3 92.7999 104.9 92.7999 90.1001V54.6001H111.8V33.3001H92.7999L92.8999 11.6001Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M25.3 58.7001C25.3 54.8001 28.5 53.3001 33.8 53.3001C41.4 53.3001 51 55.6001 58.6 59.7001V36.2001C50.3 32.9001 42.1 31.6001 33.8 31.6001C13.5 31.6001 0 42.2001 0 59.9001C0 87.5001 38 83.1001 38 95.0001C38 99.6001 34 101.1 28.4 101.1C20.1 101.1 9.5 97.7001 1.1 93.1001V116.9C10.4 120.9 19.8 122.6 28.4 122.6C49.2 122.6 63.5 112.3 63.5 94.4001C63.4 64.6001 25.3 69.9001 25.3 58.7001Z" fill="#533AFD"/></svg>'
 );
-var HIGHLIGHT_ICONS = {
-  plane: "M21.5 2.5 2.5 10l7 3m12-10.5-12 10.5m12-10.5L17 21l-7.5-8m0 0V20l3-4M5 17l-2.5 2.5M7.5 18.5 6 20",
-  heart: "M12 20.5s-8.5-5-8.5-11A4.75 4.75 0 0 1 12 6.75 4.75 4.75 0 0 1 20.5 9.5c0 6-8.5 11-8.5 11Z",
-  shirt: "M8.5 3.5 3 6l1.75 4.25L7 9.5v11h10v-11l2.25.75L21 6l-5.5-2.5a3.5 3.5 0 0 1-7 0Z",
-  truck: "M2.5 5.5h11v10h-11zM13.5 9.5h4l3 3.5v2.5h-7M6.5 18.5a2 2 0 1 0 0-.01M17 18.5a2 2 0 1 0 0-.01",
-  return: "M4 9h11.5a4.5 4.5 0 0 1 0 9H8M4 9l4-4M4 9l4 4",
-  leaf: "M5 19C5 10 10 4.5 20 4.5c0 10-5.5 15-14 15M5 19l7-7",
-  star: "m12 3.5 2.6 5.4 5.9.8-4.3 4.1 1 5.9L12 17l-5.2 2.7 1-5.9-4.3-4.1 5.9-.8Z",
-  shield: "M12 3 4.5 6v5.5c0 4.5 3.2 8.2 7.5 9.5 4.3-1.3 7.5-5 7.5-9.5V6Z",
-  mailbox: "M3 19v-8a4 4 0 0 1 8 0v8m-8 0h18v-7a4 4 0 0 0-4-4H7m8 0V4h3M6 12h2",
-  home: "M3 11 12 4l9 7M5.5 9.5V20h13V9.5M10 20v-5h4v5",
-  pin: "M12 21s-6.5-6-6.5-11a6.5 6.5 0 0 1 13 0c0 5-6.5 11-6.5 11Zm0-8.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z",
-  clock: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-13.5V12l3 2"
-};
 function rateIcon(method) {
   const m = method.toLowerCase();
   if (/postkasse|mailbox|brevkasse/.test(m)) return "mailbox";
@@ -2119,6 +2246,7 @@ var VioProductDetail = class extends LitElement {
     this.vippsCartPayment = "";
     this.gallery = "";
     this.descriptionMode = "";
+    this.descriptionLabel = "";
     this.highlights = [];
     this.deliveryTime = "";
     this.carrierLogos = {};
@@ -2216,12 +2344,54 @@ var VioProductDetail = class extends LitElement {
       this.show();
       void this.fetchProduct();
     };
+    /** Stops reporting the taps on the buttons (`vio:cta-click`). */
+    this.stopCtaClicks = null;
+    /** The product open when the shopper last changed photo: `gallery_swipe` once per open. */
+    this.gallerySwipedFor = null;
+    /** A finger, a pen or a wheel is on the carousel: its scroll is the shopper's swipe, not the SDK's. */
+    this.galleryGesture = false;
+    /**
+     * What a tap on a button of the detail says (`vio:cta-click`, README
+     * «Button tracking»): the open product and the variant chosen (when every
+     * option is), its sponsor and attribution, and the layout shown (only a
+     * non-default one). `gallery_swipe` only once per open product.
+     */
+    this.ctaContext = (cta) => {
+      const product = this.product;
+      if (cta === "gallery_swipe") {
+        if (!product || this.gallerySwipedFor === product) return null;
+        this.gallerySwipedFor = product;
+      }
+      const a = this.attribution();
+      const variants = Array.isArray(product?.variants) ? product.variants : [];
+      const variant = product && (variants.length === 1 || !this.missingOption()) ? this.selectedVariant() : null;
+      const layout = layoutOriginOf(this.layoutNow);
+      return {
+        productId: product?.id ?? (this.productId || void 0),
+        productVariantId: variant?.id,
+        sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0,
+        campaignId: a.campaignId,
+        slot: a.slot,
+        contentId: a.contentId,
+        contentTitle: a.contentTitle,
+        componentTemplateId: a.componentTemplateId,
+        layout: layout.layoutId ? layout : null
+      };
+    };
+    /** The carousel scrolled under the shopper's finger: their first swipe of this product. */
+    this.onGalleryGesture = () => {
+      this.galleryGesture = true;
+    };
     /** The cart changed (another tab, the drawer): the line under Vipps counts it again. */
     this.boundCartChange = () => {
       if (this.open) this.requestUpdate();
     };
     /** The photo in view is the active one (dots, Apple Pay sheet, events). */
     this.onCarouselScroll = () => {
+      if (this.galleryGesture) {
+        this.galleryGesture = false;
+        emitCta(this, "detail", "gallery_swipe", this.ctaContext);
+      }
       const track = this.carouselTrack();
       const step = this.carouselStep(track);
       if (!track || !step) return;
@@ -2307,7 +2477,8 @@ var VioProductDetail = class extends LitElement {
     };
   }
   static {
-    this.styles = css`
+    this.styles = [
+      css`
     :host { display: contents; }
 
     .backdrop {
@@ -2680,35 +2851,6 @@ var VioProductDetail = class extends LitElement {
       margin: 0;
       letter-spacing: -0.01em;
     }
-    /* The brand's promises: one row, an icon over a title and a line of text,
-       centred like a shop's own trust strip. */
-    .highlights {
-      list-style: none;
-      /* --vio-detail-highlights-display: none hides the strip (theme detailHighlightsDisplay). */
-      margin: 0;
-      padding: var(--vio-detail-highlights-padding, 16px 0 2px);
-      display: var(--vio-detail-highlights-display, grid);
-      grid-auto-flow: column;
-      grid-auto-columns: 1fr;
-      gap: 10px;
-      border-top: 1px solid var(--vio-color-border, #e5e5e5);
-    }
-    /* Like a shop's trust strip: a thin icon, the promise in regular weight,
-       a smaller line under it — nothing bold. */
-    .hl { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; }
-    .hl-icon {
-      width: var(--vio-detail-highlight-icon-size, 22px);
-      height: var(--vio-detail-highlight-icon-size, 22px);
-      margin-bottom: 8px;
-      fill: none;
-      stroke: currentColor;
-      stroke-width: 1.2;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      object-fit: contain;
-    }
-    .hl-title { font-size: 12px; font-weight: 400; line-height: 1.3; letter-spacing: 0.01em; color: var(--vio-color-text, #0a0a0a); }
-    .hl-text { font-size: 10.5px; line-height: 1.35; letter-spacing: 0.01em; color: var(--vio-color-text-secondary, #666); }
     /* «Frakt & retur»: same fold as «Beskrivelse», with a small list of rates.
        --vio-detail-shipping-returns-display: none hides it (theme detailShippingReturnsDisplay). */
     .shipping-returns { display: var(--vio-detail-shipping-returns-display, block); }
@@ -3253,7 +3395,9 @@ var VioProductDetail = class extends LitElement {
       color: var(--vio-color-accent, #c14a3b);
       font-size: 14px;
     }
-  `;
+  `,
+      highlightsStyles("detail")
+    ];
   }
   connectedCallback() {
     super.connectedCallback();
@@ -3263,12 +3407,16 @@ var VioProductDetail = class extends LitElement {
     this.slotRegistration.connect(this.slotAttributes());
     void this.loadVippsButton();
     document.addEventListener("vio:product-click", this.boundProductClick);
+    this.stopCtaClicks?.();
+    this.stopCtaClicks = trackCtaClicks(this, "detail", this.ctaContext);
   }
   disconnectedCallback() {
     if (this.addedToastTimer) clearTimeout(this.addedToastTimer);
     this.addedToastTimer = null;
     document.removeEventListener("vio:product-click", this.boundProductClick);
     Vio.cart.removeEventListener("change", this.boundCartChange);
+    this.stopCtaClicks?.();
+    this.stopCtaClicks = null;
     this.slotRegistration.clear();
     this.bottomSheet.disconnect();
     this.unsubscribeLayout?.();
@@ -3938,7 +4086,7 @@ var VioProductDetail = class extends LitElement {
       <div class="added-toast" part="added-toast" role="status" aria-live="polite">
         <div class="added-toast-text">Lagt i handlekurven</div>
         <div class="added-toast-actions">
-          <button class="added-toast-checkout" part="added-toast-checkout" @click=${this.toastToCheckout}>Til kassen</button>
+          <button class="added-toast-checkout" part="added-toast-checkout" data-vio-cta="checkout" @click=${this.toastToCheckout}>Til kassen</button>
           <button class="added-toast-continue" part="added-toast-continue" @click=${this.hideAddedToast}>Fortsett å handle</button>
         </div>
       </div>
@@ -4201,7 +4349,14 @@ var VioProductDetail = class extends LitElement {
     const current2 = Math.min(this.activeImageIndex, Math.max(0, count - 1));
     return html`
       <div class="gallery carousel" part="gallery">
-        <div class="carousel-track" part="image" @scroll=${this.onCarouselScroll}>
+        <div
+          class="carousel-track"
+          part="image"
+          @scroll=${this.onCarouselScroll}
+          @pointerdown=${this.onGalleryGesture}
+          @touchstart=${this.onGalleryGesture}
+          @wheel=${this.onGalleryGesture}
+        >
           ${images.map(
       (img, idx) => html`
               <div class="carousel-slide" part="slide" aria-label=${`Bilde ${idx + 1} av ${count}`}>
@@ -4215,6 +4370,7 @@ var VioProductDetail = class extends LitElement {
                 class="carousel-arrow prev"
                 part="carousel-arrow"
                 aria-label="Forrige bilde"
+                data-vio-cta="gallery_swipe"
                 ?disabled=${current2 === 0}
                 @click=${() => this.stepCarousel(-1)}
               >‹</button>
@@ -4222,6 +4378,7 @@ var VioProductDetail = class extends LitElement {
                 class="carousel-arrow next"
                 part="carousel-arrow"
                 aria-label="Neste bilde"
+                data-vio-cta="gallery_swipe"
                 ?disabled=${current2 === count - 1}
                 @click=${() => this.stepCarousel(1)}
               >›</button>
@@ -4237,11 +4394,16 @@ var VioProductDetail = class extends LitElement {
    * the heading, the text or «Les mer» opens the rest (Angelo, 2026-10-28).
    * A description that fits in the preview has nothing to open.
    */
+  /** The description fold's heading: this element's, else the page's, else «Beskrivelse». */
+  descriptionHeading() {
+    const own = this.descriptionLabel.trim();
+    return (own && own.length <= 40 ? own : "") || currentGlobalDescriptionLabel() || "Beskrivelse";
+  }
   renderDescription(text) {
     const mode = this.resolvedDescriptionMode;
     if (mode === "open") {
       return html`<div class="description-block description-preview open" part="description">
-        <div class="desc-head">Beskrivelse</div>
+        <div class="desc-head">${this.descriptionHeading()}</div>
         <div class="description">${text}</div>
       </div>`;
     }
@@ -4250,10 +4412,16 @@ var VioProductDetail = class extends LitElement {
     const toggle = () => {
       if (foldable) this.descriptionOpen = !this.descriptionOpen;
     };
+    const opens = foldable && !open ? "description_open" : nothing;
     return html`<div class="description-block description-preview ${open ? "open" : ""} ${foldable ? "clipped" : ""} ${mode}" part="description">
-      <button class="desc-head" type="button" aria-expanded=${open ? "true" : "false"} @click=${toggle}>Beskrivelse</button>
-      ${mode === "folded" && !open ? nothing : html`<div class="description ${open ? "" : "collapsed"}" @click=${() => !this.descriptionOpen && toggle()}>${text}</div>`}
-      ${mode === "preview" && this.descriptionClipped ? html`<button class="desc-more" type="button" @click=${toggle}>${this.descriptionOpen ? "Vis mindre" : "Les mer"}</button>` : nothing}
+      <button class="desc-head" type="button" aria-expanded=${open ? "true" : "false"} data-vio-cta=${opens} @click=${toggle}>${this.descriptionHeading()}</button>
+      ${mode === "folded" && !open ? nothing : html`<div
+            class="description ${open ? "" : "collapsed"}"
+            data-vio-cta=${opens}
+            data-vio-cta-label=${opens === nothing ? nothing : this.descriptionHeading()}
+            @click=${() => !this.descriptionOpen && toggle()}
+          >${text}</div>`}
+      ${mode === "preview" && this.descriptionClipped ? html`<button class="desc-more" type="button" data-vio-cta=${opens} @click=${toggle}>${this.descriptionOpen ? "Vis mindre" : "Les mer"}</button>` : nothing}
     </div>`;
   }
   /** Is the preview hiding part of the text? Measured with the preview applied. */
@@ -4268,19 +4436,7 @@ var VioProductDetail = class extends LitElement {
   }
   renderHighlights() {
     const own = (Array.isArray(this.highlights) ? this.highlights : []).filter((h) => h && h.title);
-    const items = own.length ? own : resolveSponsorIdentity(this.sponsorId)?.highlights ?? [];
-    if (items.length === 0) return nothing;
-    return html`<ul class="highlights" part="highlights">
-      ${items.map((h) => {
-      const path = h.icon ? HIGHLIGHT_ICONS[h.icon] : void 0;
-      const icon = path ? html`<svg class="hl-icon" viewBox="0 0 24 24" aria-hidden="true"><path d=${path}></path></svg>` : h.icon ? html`<img class="hl-icon" src=${h.icon} alt="" />` : nothing;
-      return html`<li class="hl" part="highlight">
-          ${icon}
-          <span class="hl-title">${h.title}</span>
-          ${h.text ? html`<span class="hl-text">${h.text}</span>` : nothing}
-        </li>`;
-    })}
-    </ul>`;
+    return renderHighlights(own.length ? own : resolveSponsorIdentity(this.sponsorId)?.highlights ?? []);
   }
   /**
    * «Frakt & retur», folded like «Beskrivelse»: the delivery options for the
@@ -4299,11 +4455,11 @@ var VioProductDetail = class extends LitElement {
     const perRateTime = times.length > 1;
     const sharedTime = times.length === 1 ? times[0] : times.length === 0 && this.deliveryTime.trim() ? `Leveringstid: ${this.deliveryTime.trim()}` : "";
     const links = [
-      identity?.refundPolicyUrl ? html`<a href=${identity.refundPolicyUrl} target="_blank" rel="noopener noreferrer">Angrerett og retur</a>` : null,
-      identity?.termsUrl ? html`<a href=${identity.termsUrl} target="_blank" rel="noopener noreferrer">Kjøpsvilkår</a>` : null
+      identity?.refundPolicyUrl ? html`<a href=${identity.refundPolicyUrl} target="_blank" rel="noopener noreferrer" data-vio-cta="refund_link">Angrerett og retur</a>` : null,
+      identity?.termsUrl ? html`<a href=${identity.termsUrl} target="_blank" rel="noopener noreferrer" data-vio-cta="terms_link">Kjøpsvilkår</a>` : null
     ].filter(Boolean);
     return html`<details class="description-block shipping-returns" part="shipping-returns">
-      <summary>Frakt &amp; retur</summary>
+      <summary data-vio-cta="shipping_returns_open">Frakt &amp; retur</summary>
       <div class="description shipping-returns-body">
         <div class="sr-title">Frakt</div>
         ${rates.length ? html`<ul class="sr-rates">
@@ -4386,8 +4542,8 @@ var VioProductDetail = class extends LitElement {
     const name = identity?.name || this.headerName();
     if (!name) return nothing;
     const links = [
-      identity?.termsUrl ? html`<a href=${identity.termsUrl} target="_blank" rel="noopener noreferrer" part="seller-terms">Kjøpsvilkår</a>` : null,
-      identity?.refundPolicyUrl ? html`<a href=${identity.refundPolicyUrl} target="_blank" rel="noopener noreferrer" part="seller-refund">Angrerett og retur</a>` : null
+      identity?.termsUrl ? html`<a href=${identity.termsUrl} target="_blank" rel="noopener noreferrer" part="seller-terms" data-vio-cta="terms_link">Kjøpsvilkår</a>` : null,
+      identity?.refundPolicyUrl ? html`<a href=${identity.refundPolicyUrl} target="_blank" rel="noopener noreferrer" part="seller-refund" data-vio-cta="refund_link">Angrerett og retur</a>` : null
     ].filter(Boolean);
     return html`<p class="seller-note" part="seller-note">
       Du handler direkte hos <strong>${name}</strong>.${links.length ? html`<span class="seller-links">${links}</span>` : nothing}
@@ -4411,12 +4567,12 @@ var VioProductDetail = class extends LitElement {
   }
   render() {
     return html`
-      <div class="backdrop" @click=${this.close}></div>
+      <div class="backdrop" data-vio-cta="close" data-vio-cta-label="" @click=${this.close}></div>
       <div class="modal" role="dialog" aria-modal="true" aria-label="Produkt" tabindex="-1">
-        <div class="handle" @click=${this.close} aria-hidden="true"></div>
+        <div class="handle" data-vio-cta="close" data-vio-cta-label="" @click=${this.close} aria-hidden="true"></div>
         <div class="topbar" part="topbar">
           <div class="topbar-sponsor ${this.logoSquare ? "is-square" : ""}" part="sponsor">${this.renderTopbarSponsor()}</div>
-          <button class="close" part="close" @click=${this.close} aria-label="Lukk">×</button>
+          <button class="close" part="close" data-vio-cta="close" @click=${this.close} aria-label="Lukk">×</button>
         </div>
 
         ${this.renderBody()}
@@ -4466,6 +4622,7 @@ var VioProductDetail = class extends LitElement {
                           class="gallery-thumb ${idx === this.activeImageIndex ? "active" : ""}"
                           part=${idx === this.activeImageIndex ? "thumb thumb-active" : "thumb"}
                           @click=${() => this.activeImageIndex = idx}
+                          data-vio-cta=${idx === this.activeImageIndex ? nothing : "gallery_swipe"}
                           aria-label=${`Bilde ${idx + 1}`}
                           aria-current=${idx === this.activeImageIndex ? "true" : "false"}
                         >
@@ -4604,12 +4761,14 @@ var VioProductDetail = class extends LitElement {
                     stretched="true"
                     role="button"
                     aria-label="Kjøp nå med Vipps"
+                    data-vio-cta="vipps"
                     @click=${this.buyWithVipps}
                   ></vipps-mobilepay-button>
                 ` : html`
                   <button
                     class="buy-vipps"
                     part="buy-vipps"
+                    data-vio-cta="vipps"
                     @click=${this.buyWithVipps}
                     ?disabled=${this.adding}
                     aria-label="Kjøp nå med Vipps"
@@ -4624,6 +4783,7 @@ var VioProductDetail = class extends LitElement {
             <div class="qty-stepper">
               <button
                 class="qty-btn"
+                data-vio-cta="quantity_minus"
                 @click=${() => this.quantity = Math.max(1, this.quantity - 1)}
                 aria-label="Reduser antall"
               >
@@ -4632,6 +4792,7 @@ var VioProductDetail = class extends LitElement {
               <span class="qty-value">${this.quantity}</span>
               <button
                 class="qty-btn"
+                data-vio-cta="quantity_plus"
                 @click=${() => this.quantity = Math.min(this.availableQuantity, this.quantity + 1)}
                 aria-label="Øk antall"
                 ?disabled=${this.quantity >= this.availableQuantity}
@@ -4642,6 +4803,7 @@ var VioProductDetail = class extends LitElement {
             <button
               class="add-to-cart"
               part="add-to-cart"
+              data-vio-cta="add_to_cart"
               @click=${this.addToCart}
               ?disabled=${this.availableQuantity <= 0 || this.adding}
             >
@@ -4652,6 +4814,7 @@ var VioProductDetail = class extends LitElement {
           ${this.availableQuantity > 0 && this.methodEnabled(...NO_EXPRESS_BUTTON_METHODS) ? html`
                 <button
                   class="buy-now"
+                  data-vio-cta="buy_now"
                   @click=${this.buyNow}
                   ?disabled=${this.adding}
                   aria-label="Kjøp nå"
@@ -4663,6 +4826,7 @@ var VioProductDetail = class extends LitElement {
           ${this.availableQuantity > 0 && this.hasPrice && this.applePayOk && this.methodEnabled("apple-pay", "applepay") ? html`
                 <button
                   class="buy-applepay"
+                  data-vio-cta="apple_pay"
                   @click=${this.buyWithApplePay}
                   ?disabled=${this.adding}
                   aria-label="Kjøp nå med Apple Pay"
@@ -4675,6 +4839,7 @@ var VioProductDetail = class extends LitElement {
           ${this.availableQuantity > 0 && this.methodEnabled("stripe") ? html`
                 <button
                   class="buy-stripe"
+                  data-vio-cta="stripe"
                   @click=${this.buyWithStripe}
                   ?disabled=${this.adding}
                   aria-label="Kjøp nå med Stripe"
@@ -4691,6 +4856,8 @@ var VioProductDetail = class extends LitElement {
           ${this.availableQuantity > 0 && this.methodEnabled("klarna") ? html`
                 <button
                   class="buy-klarna"
+                  data-vio-cta="klarna"
+                  data-vio-cta-label="Kjøp nå med Klarna"
                   @click=${this.buyWithKlarna}
                   ?disabled=${this.adding}
                 >
@@ -4733,6 +4900,8 @@ var VioProductDetail = class extends LitElement {
                 <button
                   class="option-pill ${available ? "" : "unavailable"}"
                   part=${isSelected ? "option option-selected" : "option"}
+                  data-vio-cta="size"
+                  data-vio-cta-option=${val}
                   @click=${() => this.selectOption(opt.name, val)}
                   aria-pressed=${isSelected}
                   ?disabled=${!available}
@@ -4748,8 +4917,8 @@ var VioProductDetail = class extends LitElement {
     })}`;
   }
   /** Best-effort HTML strip for description. */
-  stripHtml(html7) {
-    return html7.replace(/<br\s*\/?>/gi, "\n").replace(/<\/p>/gi, "\n\n").replace(/<[^>]+>/g, "").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").trim();
+  stripHtml(html8) {
+    return html8.replace(/<br\s*\/?>/gi, "\n").replace(/<\/p>/gi, "\n\n").replace(/<[^>]+>/g, "").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").trim();
   }
 };
 __decorateClass([
@@ -4800,6 +4969,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "description-mode" })
 ], VioProductDetail.prototype, "descriptionMode", 2);
+__decorateClass([
+  property({ type: String, attribute: "description-label" })
+], VioProductDetail.prototype, "descriptionLabel", 2);
 __decorateClass([
   property({ type: Array })
 ], VioProductDetail.prototype, "highlights", 2);
@@ -4931,6 +5103,12 @@ function cartShipping(items, currency) {
   }
   return null;
 }
+function cartShippingIsFrom(items, currency) {
+  if (items.some((item) => ratePrice(item.shipping, currency) !== null)) return false;
+  return items.some(
+    (item) => (item.availableShippings ?? []).filter((r) => ratePrice(r, currency) !== null).length > 1
+  );
+}
 var VioCart = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -4980,9 +5158,39 @@ var VioCart = class extends LitElement {
         void this.loadAvailablePaymentMethods();
       }
     };
+    /** Stops reporting the taps on the buttons (`vio:cta-click`). */
+    this.stopCtaClicks = null;
+    /**
+     * What a tap on a button of the cart says (`vio:cta-click`): a line's
+     * buttons name its product, variant and sponsor, and where its most recent
+     * units came from (campaign, slot, article); the footer's buttons name the
+     * sponsor they pay (Vipps: the one it pays; the others: the first).
+     */
+    this.ctaContext = (_cta, button) => {
+      const lineId = button?.getAttribute("data-vio-cta-line");
+      if (lineId) {
+        for (const cart of this.carts.values()) {
+          const item = cart.items.find((i) => i.id === lineId);
+          if (!item) continue;
+          const origin = [...lineOrigins(item)].reverse().find((o) => o.campaignId !== void 0 || o.slot || o.contentId);
+          return {
+            productId: item.productId,
+            productVariantId: item.variantId,
+            sponsorId: item.sponsorId,
+            campaignId: origin?.campaignId,
+            slot: origin?.slot,
+            contentId: origin?.contentId
+          };
+        }
+        return {};
+      }
+      const sponsorId = _cta === "vipps" ? this.vippsSponsorId() : [...this.carts.keys()][0];
+      return { sponsorId };
+    };
   }
   static {
-    this.styles = css`
+    this.styles = [
+      css`
     :host { display: contents; }
 
     .backdrop {
@@ -5201,6 +5409,12 @@ var VioCart = class extends LitElement {
       font-size: 14px;
     }
     .total-row { font-weight: 700; font-size: 16px; margin-top: 0; }
+    /* Where the shipping method is chosen: in Vipps, or in the checkout. */
+    .shipping-hint {
+      margin: calc(var(--vio-space-md, 16px) * -0.5) 0 var(--vio-space-md, 16px);
+      font-size: 12px;
+      color: var(--vio-color-text-secondary, #666);
+    }
     .subtotal-value { font-weight: 700; font-size: 16px; }
 
     /* Apple Pay express — pay the whole cart directly. */
@@ -5358,7 +5572,9 @@ var VioCart = class extends LitElement {
       font-family: var(--vio-font-sans, -apple-system, sans-serif);
     }
     .confirm-close:hover { background: #222; }
-  `;
+  `,
+      highlightsStyles("cart")
+    ];
   }
   connectedCallback() {
     super.connectedCallback();
@@ -5367,8 +5583,12 @@ var VioCart = class extends LitElement {
     this.itemCount = Vio.cart.itemCount;
     Vio.cart.addEventListener("change", this.boundOnCartChange);
     void this.loadAvailablePaymentMethods();
+    this.stopCtaClicks?.();
+    this.stopCtaClicks = trackCtaClicks(this, "cart", this.ctaContext);
   }
   disconnectedCallback() {
+    this.stopCtaClicks?.();
+    this.stopCtaClicks = null;
     Vio.cart.removeEventListener("change", this.boundOnCartChange);
     this.bottomSheet.disconnect();
     super.disconnectedCallback();
@@ -5683,12 +5903,12 @@ var VioCart = class extends LitElement {
     const isEmpty = this.itemCount === 0;
     const sponsorCarts = [...this.carts.values()].filter((c) => c.items.length > 0);
     return html`
-      <div class="backdrop" @click=${this.close}></div>
+      <div class="backdrop" data-vio-cta="close" data-vio-cta-label="" @click=${this.close}></div>
       <aside class="drawer" role="dialog" aria-modal="true" aria-label=${this.heading} tabindex="-1">
-        <div class="handle" @click=${this.close} aria-hidden="true"></div>
+        <div class="handle" data-vio-cta="close" data-vio-cta-label="" @click=${this.close} aria-hidden="true"></div>
         <div class="header">
           <h2 class="heading">${this.confirmedOrder ? "Takk!" : this.heading}</h2>
-          <button class="close" @click=${this.close} aria-label="Lukk">×</button>
+          <button class="close" data-vio-cta="close" @click=${this.close} aria-label="Lukk">×</button>
         </div>
 
         ${this.confirmedOrder ? this.renderConfirmation() : isEmpty ? html`<div class="empty">${this.emptyLabel}</div>` : html`
@@ -5710,6 +5930,8 @@ var VioCart = class extends LitElement {
                                 <span class="item-qty">
                                   <button
                                     class="qty-btn"
+                                    data-vio-cta="quantity_minus"
+                                    data-vio-cta-line=${item.id}
                                     @click=${() => this.onDecrement(item)}
                                     aria-label="Reduser"
                                   >
@@ -5718,6 +5940,8 @@ var VioCart = class extends LitElement {
                                   ${item.quantity}
                                   <button
                                     class="qty-btn"
+                                    data-vio-cta="quantity_plus"
+                                    data-vio-cta-line=${item.id}
                                     @click=${() => this.onIncrement(item)}
                                     aria-label="Øk"
                                   >
@@ -5725,6 +5949,8 @@ var VioCart = class extends LitElement {
                                   </button>
                                   <button
                                     class="qty-btn"
+                                    data-vio-cta="remove"
+                                    data-vio-cta-line=${item.id}
                                     @click=${() => this.onRemove(item)}
                                     aria-label="Fjern"
                                     style="margin-left: 8px;"
@@ -5757,6 +5983,7 @@ var VioCart = class extends LitElement {
                 ${this.renderShippingRows()}
                 <button
                   class="checkout-btn"
+                  data-vio-cta="checkout"
                   @click=${this.onCheckout}
                   ?disabled=${!this.payable}
                   aria-label="Til kassen"
@@ -5767,6 +5994,7 @@ var VioCart = class extends LitElement {
                 ${this.methodEnabled("apple-pay") && this.applePayAvailable ? html`
                       <button
                         class="applepay-btn"
+                        data-vio-cta="apple_pay"
                         @click=${this.onApplePay}
                         aria-label="Betal med Apple Pay"
                       >
@@ -5777,6 +6005,7 @@ var VioCart = class extends LitElement {
                 ${this.methodEnabled("stripe") ? html`
                       <button
                         class="stripe-btn"
+                        data-vio-cta="stripe"
                         @click=${this.onStripe}
                         aria-label="Betal med Stripe"
                       >
@@ -5786,6 +6015,7 @@ var VioCart = class extends LitElement {
                 ${this.methodEnabled("klarna") ? html`
                       <button
                         class="klarna-btn"
+                        data-vio-cta="klarna"
                         @click=${this.onKlarnaExpress}
                         aria-label="Betal med Klarna"
                       >
@@ -5808,34 +6038,52 @@ var VioCart = class extends LitElement {
                           stretched="true"
                           role="button"
                           aria-label="Betal med Vipps"
+                          data-vio-cta="vipps"
                           @click=${this.onVipps}
                         ></vipps-mobilepay-button>
                       ` : html`
                         <button
                           class="vipps-btn"
+                          data-vio-cta="vipps"
                           @click=${this.onVipps}
                           aria-label="Betal med Vipps"
                         >
                           <span class="vipps-logo">vipps</span>
                         </button>
                       ` : ""}
+                ${this.renderBrandHighlights()}
               </div>
             `}
       </aside>
     `;
   }
+  /**
+   * The selling brand's promises under the ways to pay, as in the product
+   * detail (one article = one brand: the cart's brand). Hidden with the theme's
+   * `cartHighlightsDisplay: 'none'`; nothing when the brand has none.
+   */
+  renderBrandHighlights() {
+    const sponsorId = [...this.carts.keys()].find((id) => (this.carts.get(id)?.items.length ?? 0) > 0);
+    if (sponsorId === void 0) return "";
+    return renderHighlights(resolveSponsorIdentity(sponsorId)?.highlights ?? []);
+  }
   /** «Frakt» (the chosen or cheapest rate) and «Totalt» with it; «Beregnes i kassen» when unknown. */
   renderShippingRows() {
     const shipping = this.shippingAcrossSponsors;
+    const from = shipping !== null && shipping > 0 && [...this.carts.values()].some(
+      (cart) => cart.items.length > 0 && cartShippingIsFrom(cart.items, cart.currency)
+    );
+    const fra = from ? "fra " : "";
     return html`
       <div class="shipping-row" part="cart-shipping">
         <span class="subtotal-label">Frakt</span>
-        <span>${shipping === null ? "Beregnes i kassen" : shipping <= 0 ? "Gratis" : formatPrice(shipping, this.primaryCurrency)}</span>
+        <span>${shipping === null ? "Beregnes i kassen" : shipping <= 0 ? "Gratis" : `${fra}${formatPrice(shipping, this.primaryCurrency)}`}</span>
       </div>
       ${shipping !== null ? html`<div class="total-row" part="cart-total">
             <span>Totalt</span>
-            <span>${formatPrice(this.totalAcrossSponsors + shipping, this.primaryCurrency)}</span>
+            <span>${fra}${formatPrice(this.totalAcrossSponsors + shipping, this.primaryCurrency)}</span>
           </div>` : ""}
+      <p class="shipping-hint" part="cart-shipping-hint">Frakt velger du i Vipps eller i neste steg.</p>
     `;
   }
   renderConfirmation() {
@@ -5860,7 +6108,7 @@ var VioCart = class extends LitElement {
             <span>${formatPrice(o.total, o.currency)}</span>
           </div>
         </div>
-        <button class="confirm-close" @click=${this.closeConfirmation}>Lukk</button>
+        <button class="confirm-close" data-vio-cta="close" @click=${this.closeConfirmation}>Lukk</button>
       </div>
     `;
   }
@@ -6155,6 +6403,12 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       this.paymentError = detail.method === "klarna" ? `Klarna-betalingen kunne ikke fullf\xF8res: ${detail.error}` : friendlyPaymentError(detail.error, detail.method);
       this.open = true;
     };
+    /** Stops reporting the taps on the buttons (`vio:cta-click`). */
+    this.stopCtaClicks = null;
+    /** What a tap on a button of the checkout says (`vio:cta-click`): the sponsor whose cart it pays. */
+    this.ctaContext = () => ({
+      sponsorId: this.checkoutState?.sponsorId ?? this.orderSponsor?.sponsorId
+    });
     /** Payment events still waiting for their buyer reference: settled early (without it) when the page hides or the element leaves. */
     this.pendingSuccessEmits = /* @__PURE__ */ new Set();
   }
@@ -6786,6 +7040,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     void Vio.checkout.resumeKlarnaReturn();
     void this.checkReturnPaymentStatus();
     this.requestUpdate();
+    this.stopCtaClicks?.();
+    this.stopCtaClicks = trackCtaClicks(this, "checkout", this.ctaContext);
   }
   static {
     /**
@@ -7238,6 +7494,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     }
   }
   disconnectedCallback() {
+    this.stopCtaClicks?.();
+    this.stopCtaClicks = null;
     Vio.checkout.removeEventListener("change", this.boundOnCheckoutChange);
     Vio.checkout.removeEventListener("payment-complete", this.boundOnPaymentComplete);
     Vio.checkout.removeEventListener("payment-error", this.boundOnPaymentError);
@@ -8058,7 +8316,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
   }
   render() {
     return html`
-      <div class="backdrop" @click=${this.close}></div>
+      <div class="backdrop" data-vio-cta="close" data-vio-cta-label="" @click=${this.close}></div>
       <div
         class="modal ${this.express ? "as-side" : this.orderConfirmed ? "as-confirm" : ""}"
         role="dialog"
@@ -8066,13 +8324,13 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         aria-label=${this.heading}
         tabindex="-1"
       >
-        <div class="handle" @click=${this.close} aria-hidden="true"></div>
+        <div class="handle" data-vio-cta="close" data-vio-cta-label="" @click=${this.close} aria-hidden="true"></div>
         <div class="topbar">
           <div class="topbar-title">
             <h2 class="heading">${this.orderConfirmed ? "Takk!" : this.heading}</h2>
             ${this.renderTopbarSponsor()}
           </div>
-          <button class="close" @click=${this.close} aria-label="Lukk">×</button>
+          <button class="close" data-vio-cta="close" @click=${this.close} aria-label="Lukk">×</button>
         </div>
 
         <div class="body">
@@ -8169,7 +8427,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     return html`
       <section class="section provider-receipt">
         <slot name=${slot}></slot>
-        <button class="confirm-close" @click=${this.close}>Lukk</button>
+        <button class="confirm-close" data-vio-cta="close" @click=${this.close}>Lukk</button>
       </section>
     `;
   }
@@ -8265,7 +8523,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                 </div>
               </div>
             ` : ""}
-        <button class="confirm-close" @click=${this.close}>Fortsett å handle</button>
+        <button class="confirm-close" data-vio-cta="close" @click=${this.close}>Fortsett å handle</button>
       </section>
     `;
   }
@@ -8851,6 +9109,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                 class="payment-btn primary complete-cta"
                 ?disabled=${!ready}
                 title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
+                data-vio-cta="pay_adyen"
                 @click=${() => {
       this.adyenRequested = true;
     }}
@@ -9021,6 +9280,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                 class="payment-btn primary complete-cta"
                 ?disabled=${!ready}
                 title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
+                data-vio-cta="pay_stripe"
                 @click=${() => {
       this.stripeRequested = true;
     }}
@@ -9033,6 +9293,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
               <button
                 class="payment-btn primary complete-cta"
                 ?disabled=${this.stripePaying || !this.stripeReady}
+                data-vio-cta="pay_stripe_confirm"
                 @click=${() => void this.onStripePay()}
               >
                 ${this.stripePaying ? "Betaler\u2026" : `Betal ${this.payTotalLabel()}`}
@@ -9099,6 +9360,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         <div class="klarna-widget" id="vio-klarna-payments-container"></div>
         <button
           class="payment-btn primary complete-cta"
+          data-vio-cta="pay_klarna"
           @click=${() => void this.onKlarnaAuthorize()}
           ?disabled=${this.klarnaAuthorizing || !this.klarnaHandle || this.klarnaMounting || !this.express && (!this.isAddressValid || !this.hasSelectedShipping)}
         >
@@ -9315,6 +9577,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                   ${method === "stripe" && this.stripeMode !== "native" ? html`
                         <button
                           class="payment-btn primary complete-cta"
+                          data-vio-cta="pay_stripe"
                           @click=${() => void this.onPay("stripe")}
                           ?disabled=${this.stripeLoading || !this.cartPayable || !this.isAddressValid || !this.hasSelectedShipping}
                           title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
@@ -9325,6 +9588,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                   ${method === "vipps" ? html`
                         <button
                           class="payment-btn primary complete-cta"
+                          data-vio-cta="pay_vipps"
                           @click=${() => void this.onPay("vipps")}
                           ?disabled=${this.vippsLoading || !this.cartPayable || !this.isAddressValid || !this.hasSelectedShipping}
                           title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
@@ -9335,6 +9599,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                   ${method === "apple-pay" ? html`
                         <button
                           class="payment-btn primary complete-cta"
+                          data-vio-cta="pay_apple_pay"
                           @click=${() => void this.onPay("apple-pay")}
                           ?disabled=${this.applePayInProgress || !this.cartPayable || !this.isAddressValid || !this.hasSelectedShipping}
                           title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
@@ -9345,6 +9610,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                   ${showCompleteCta && method !== "stripe" && method !== "vipps" ? html`
                         <button
                           class="payment-btn primary complete-cta"
+                          data-vio-cta=${`pay_${ctaMethod(method)}`}
                           @click=${this.onCompleteOrder}
                           ?disabled=${!this.cartPayable || !this.isAddressValid || !this.hasSelectedShipping}
                           title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
@@ -9373,6 +9639,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                     ${this.methodEnabled("apple-pay") && this.applePayAvailable && !this.stripeOwnsWallets() ? html`
                           <button
                             class="payment-btn primary"
+                            data-vio-cta="select_apple_pay"
+                            data-vio-cta-label="Apple Pay"
                             @click=${() => this.onPay("apple-pay")}
                             ?disabled=${this.applePayInProgress}
                           >
@@ -9382,6 +9650,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                     ${this.methodEnabled("stripe") ? html`
                           <button
                             class="payment-btn"
+                            data-vio-cta="select_stripe"
+                            data-vio-cta-label="Stripe"
                             @click=${() => this.onPay("stripe")}
                             ?disabled=${this.stripeLoading}
                           >
@@ -9389,37 +9659,37 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                           </button>
                         ` : ""}
                     ${this.methodEnabled("klarna") && this.klarnaAvailable ? html`
-                          <button class="payment-btn" @click=${() => this.onPay("klarna")}>
+                          <button class="payment-btn" data-vio-cta="select_klarna" data-vio-cta-label="Klarna" @click=${() => this.onPay("klarna")}>
                             Klarna
                           </button>
                         ` : ""}
                     ${this.methodEnabled("kustom") ? html`
-                          <button class="payment-btn" @click=${() => this.onPay("kustom")}>
+                          <button class="payment-btn" data-vio-cta="select_kustom" data-vio-cta-label="Kustom" @click=${() => this.onPay("kustom")}>
                             <span style="font-weight:800;font-size:16px;letter-spacing:-0.01em">Kustom</span>
                           </button>
                         ` : ""}
                     ${this.methodEnabled("qliro") ? html`
-                          <button class="payment-btn" @click=${() => this.onPay("qliro")}>
+                          <button class="payment-btn" data-vio-cta="select_qliro" data-vio-cta-label="Qliro" @click=${() => this.onPay("qliro")}>
                             <span style="font-weight:800;font-size:16px;letter-spacing:-0.01em">Qliro</span>
                           </button>
                         ` : ""}
                     ${this.methodEnabled("walley") ? html`
-                          <button class="payment-btn" @click=${() => this.onPay("walley")}>
+                          <button class="payment-btn" data-vio-cta="select_walley" data-vio-cta-label="Walley" @click=${() => this.onPay("walley")}>
                             <span style="font-weight:800;font-size:16px;letter-spacing:-0.01em">Walley</span>
                           </button>
                         ` : ""}
                     ${this.methodEnabled("nexi") ? html`
-                          <button class="payment-btn" @click=${() => this.onPay("nexi")}>
+                          <button class="payment-btn" data-vio-cta="select_nexi" data-vio-cta-label="Nexi" @click=${() => this.onPay("nexi")}>
                             <span style="font-weight:800;font-size:16px;letter-spacing:-0.01em">Nexi</span>
                           </button>
                         ` : ""}
                     ${this.methodEnabled("adyen") ? html`
-                          <button class="payment-btn" @click=${() => this.onPay("adyen")}>
+                          <button class="payment-btn" data-vio-cta="select_adyen" @click=${() => this.onPay("adyen")}>
                             <span style="font-weight:700;font-size:15px;letter-spacing:-0.01em">${this.methodLabel("adyen")}</span>
                           </button>
                         ` : ""}
                     ${this.methodEnabled("vipps") ? html`
-                          <button class="payment-btn" @click=${() => this.onPay("vipps")} aria-label="Vipps">
+                          <button class="payment-btn" data-vio-cta="select_vipps" @click=${() => this.onPay("vipps")} aria-label="Vipps">
                             ${this.vippsOfficial ? html`<vipps-mobilepay-button
                                   brand="vipps"
                                   variant="primary"
@@ -9637,6 +9907,9 @@ __decorateClass([
   state()
 ], _VioCheckout.prototype, "shippingsReadyFor", 2);
 var VioCheckout = _VioCheckout;
+function ctaMethod(method) {
+  return String(method ?? "unknown").toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "") || "unknown";
+}
 
 // src/ui/elements.ts
 function registerVioElements() {
@@ -9655,5 +9928,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-F7LE5AZY.js.map
-//# sourceMappingURL=chunk-F7LE5AZY.js.map
+//# sourceMappingURL=chunk-LDA7RI43.js.map
+//# sourceMappingURL=chunk-LDA7RI43.js.map