@vio-live/web-sdk 0.26.1 → 0.28.0

package/dist/{chunk-6Q2M3MIK.js → chunk-Q2NALS7P.js}

@@ -1,5 +1,5 @@
-import { Vio, __decorateClass, primaryImageUrl, displayPrice, toCampaignId, getGlobalCurrency, ensureVippsButton, formatPrice, buyerRefOf, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, gatewayHasBuyerRef, AdyenOriginError, normalizeSlotId, autoSlotDisplayName, autoSlotId, normalizeScope, campaignCandidates } from './chunk-NXIYIY2D.js';
-import { LitElement, css, html } from 'lit';
+import { Vio, __decorateClass, primaryImageUrl, displayPrice, toCampaignId, getGlobalCurrency, ensureVippsButton, formatPrice, buyerRefOf, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, gatewayHasBuyerRef, rememberedCheckoutSponsor, checkoutSponsorOf, AdyenOriginError, normalizeSlotId, autoSlotDisplayName, autoSlotId, sponsorIdentityFrom, Configuration, normalizeScope, campaignCandidates } from './chunk-AFJ5M53F.js';
+import { LitElement, css, html, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 
 // src/ui/tokens.ts
@@ -151,7 +151,38 @@ var THEME_KEY_TO_CSS_VAR = {
   spaceSm: "--vio-space-sm",
   spaceMd: "--vio-space-md",
   spaceLg: "--vio-space-lg",
-  spaceXl: "--vio-space-xl"
+  spaceXl: "--vio-space-xl",
+  detailWidth: "--vio-detail-width",
+  detailPaddingX: "--vio-detail-padding-x",
+  detailLogoHeight: "--vio-detail-logo-height",
+  detailLogoZoom: "--vio-detail-logo-zoom",
+  detailTitleSize: "--vio-detail-title-size",
+  detailPriceSize: "--vio-detail-price-size",
+  detailImageFit: "--vio-detail-image-fit",
+  detailImageAspect: "--vio-detail-image-aspect",
+  detailImageMaxHeight: "--vio-detail-image-max-height",
+  detailImageZoom: "--vio-detail-image-zoom",
+  detailImageInset: "--vio-detail-image-inset",
+  detailImageBg: "--vio-detail-image-bg",
+  detailThumbSize: "--vio-detail-thumb-size",
+  detailThumbGap: "--vio-detail-thumb-gap",
+  detailThumbRadius: "--vio-detail-thumb-radius",
+  detailThumbActiveColor: "--vio-detail-thumb-active-color",
+  detailOptionHeight: "--vio-detail-option-height",
+  detailOptionGap: "--vio-detail-option-gap",
+  detailOptionRadius: "--vio-detail-option-radius",
+  detailOptionWrap: "--vio-detail-option-wrap",
+  detailButtonHeight: "--vio-detail-button-height",
+  detailButtonRadius: "--vio-detail-button-radius",
+  detailBuyPosition: "--vio-detail-buy-position",
+  detailBuyShadow: "--vio-detail-buy-shadow",
+  cartWidth: "--vio-cart-width",
+  checkoutWidth: "--vio-checkout-width",
+  confirmLogoHeight: "--vio-confirm-logo-height",
+  confirmTitleSize: "--vio-confirm-title-size",
+  confirmCheckBg: "--vio-confirm-check-bg",
+  redirectBg: "--vio-redirect-bg",
+  redirectSpinner: "--vio-redirect-spinner"
 };
 function applyVioTheme(overrides, target = typeof document !== "undefined" ? document.documentElement : null) {
   if (!target) return;
@@ -705,6 +736,54 @@ __decorateClass([
 __decorateClass([
   state()
 ], VioProduct.prototype, "justAdded", 2);
+function resolveSponsorIdentity(sponsorId, checkoutId) {
+  try {
+    if (typeof Vio.sponsorIdentity === "function") return Vio.sponsorIdentity(sponsorId, { checkoutId });
+    return sponsorIdentityFrom(Vio.bootstrapCache, sponsorId);
+  } catch {
+    return null;
+  }
+}
+function sponsorDetail(sponsorId, checkoutId) {
+  const sponsor = checkoutSponsorOf(resolveSponsorIdentity(sponsorId, checkoutId));
+  return sponsor ? { sponsor } : {};
+}
+var failedLogos = /* @__PURE__ */ new Set();
+function usableLogo(identity) {
+  const url = identity?.logoUrl;
+  return url && !failedLogos.has(url) ? url : null;
+}
+function renderSponsorMark(host, identity, classes) {
+  if (!identity) return nothing;
+  const logo = usableLogo(identity);
+  if (logo) {
+    return html`<img
+      class=${classes.logo}
+      src=${logo}
+      alt=${identity.name}
+      decoding="async"
+      @error=${() => {
+      failedLogos.add(logo);
+      host.requestUpdate();
+    }}
+    />`;
+  }
+  return identity.name ? html`<span class=${classes.name}>${identity.name}</span>` : nothing;
+}
+var INIT_WAIT_MS = 1e4;
+async function whenBootstrapped() {
+  try {
+    if (Vio.bootstrapCache) return true;
+    if (!Configuration.isInitialized) await Configuration.whenReady(INIT_WAIT_MS);
+    if (!Configuration.isInitialized || typeof Vio.bootstrap !== "function") return false;
+    await Vio.bootstrap();
+    return !!Vio.bootstrapCache;
+  } catch {
+    return false;
+  }
+}
+
+// src/ui/components/vio-product-carousel.ts
 var VioProductCarousel = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -1077,7 +1156,7 @@ var VioProductCarousel = class extends LitElement {
     if (this.fetched && this.fetched.length > 0) {
       return html`${this.fetched.map(({ product: p, sponsorId }) => {
         const img = primaryImageUrl(p) ?? "";
-        const retailer = sponsorNameFromBootstrap(sponsorId) ?? p.brand ?? "";
+        const retailer = resolveSponsorIdentity(sponsorId)?.name || p.brand || "";
         return html`
           <vio-product
             product-id=${String(p.id)}
@@ -1195,11 +1274,101 @@ __decorateClass([
 __decorateClass([
   state()
 ], VioProductCarousel.prototype, "fetchError", 2);
-function sponsorNameFromBootstrap(sponsorId) {
-  const boot = Vio.bootstrapCache;
-  if (!boot) return void 0;
-  if (boot.primarySponsor?.id === sponsorId) return boot.primarySponsor.name;
-  return boot.secondarySponsors?.find((s) => s.id === sponsorId)?.name;
+
+// src/ui/payment-redirect.ts
+var OVERLAY_CLASS = "vio-redirect-overlay";
+var STYLE_ID = "vio-redirect-overlay-style";
+var LABEL = { vipps: "Vipps", stripe: "Stripe", klarna: "Klarna" };
+function emit(name, detail, cancelable = false) {
+  if (typeof document === "undefined") return true;
+  return document.dispatchEvent(new CustomEvent(name, { detail, cancelable }));
+}
+function injectStyle() {
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+.${OVERLAY_CLASS} {
+  position: fixed; inset: 0; z-index: 2147483000;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
+  background: var(--vio-redirect-bg, rgba(255, 255, 255, 0.94));
+  color: var(--vio-redirect-color, var(--vio-color-text, #0a0a0a));
+  font: 600 16px/1.3 var(--vio-redirect-font, var(--vio-font-sans, -apple-system, sans-serif));
+  opacity: 0; transition: opacity 0.18s ease; cursor: progress;
+}
+.${OVERLAY_CLASS}.is-shown { opacity: 1; }
+.${OVERLAY_CLASS} .vio-redirect-spinner {
+  width: 36px; height: 36px; border-radius: 50%;
+  border: 3px solid rgba(0, 0, 0, 0.1); border-top-color: var(--vio-redirect-spinner, #ff5b24);
+  animation: vio-redirect-spin 0.8s linear infinite;
+}
+@keyframes vio-redirect-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+  .${OVERLAY_CLASS} { transition: none; }
+  .${OVERLAY_CLASS} .vio-redirect-spinner { animation: none; }
+}`;
+  document.head.appendChild(style);
+}
+var current = null;
+function removeOverlay() {
+  const el = current?.el;
+  if (!el) return;
+  el.classList.remove("is-shown");
+  setTimeout(() => el.remove(), 200);
+  current.el = null;
+}
+function onPageShow(e) {
+  if (!e.persisted || !current || current.settled) return;
+  current.settled = true;
+  removeOverlay();
+  emit("vio:payment-redirect-cancel", { ...current.detail, reason: "back" });
+  current = null;
+}
+function beginPaymentRedirect(detail) {
+  if (current && !current.settled) {
+    current.settled = true;
+    removeOverlay();
+  }
+  const hostTookOver = !emit("vio:payment-redirect-start", detail, true);
+  const state6 = { el: null, detail, settled: false };
+  current = state6;
+  if (!hostTookOver && typeof document !== "undefined" && document.body) {
+    injectStyle();
+    const el = document.createElement("div");
+    el.className = OVERLAY_CLASS;
+    el.setAttribute("role", "status");
+    el.setAttribute("aria-live", "polite");
+    const spinner = document.createElement("div");
+    spinner.className = "vio-redirect-spinner";
+    spinner.setAttribute("aria-hidden", "true");
+    const text = document.createElement("div");
+    text.className = "vio-redirect-text";
+    text.textContent = `\xC5pner ${LABEL[detail.method] ?? detail.method} \u2026`;
+    el.append(spinner, text);
+    el.addEventListener("click", (e) => e.stopPropagation());
+    document.body.appendChild(el);
+    requestAnimationFrame(() => el.classList.add("is-shown"));
+    state6.el = el;
+  }
+  if (typeof window !== "undefined") window.addEventListener("pageshow", onPageShow);
+  const settle = (event, reason) => {
+    if (state6.settled) return;
+    state6.settled = true;
+    if (current === state6) {
+      removeOverlay();
+      current = null;
+    } else if (state6.el) {
+      state6.el.remove();
+    }
+    emit(event, { ...detail, reason });
+  };
+  return {
+    fail: (reason) => settle("vio:payment-redirect-error", reason),
+    abort: (reason = "not-started") => settle("vio:payment-redirect-cancel", reason)
+  };
+}
+function returnCancelled(detail) {
+  emit("vio:payment-redirect-cancel", { ...detail, reason: "cancelled" });
 }
 
 // src/core/checkout/method-taxonomy.ts
@@ -1409,6 +1578,207 @@ function isWithin(node, ancestor) {
   return false;
 }
 
+// src/ui/bottom-sheet.ts
+var PHONE = "(max-width: 600px)";
+var SLOP = 6;
+var CLOSE_DISTANCE = 120;
+var FLICK_VELOCITY = 0.5;
+var FLICK_MIN = 24;
+var CLICK_AFTER_DRAG_MS = 400;
+function isPhoneSheet() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(PHONE).matches;
+}
+var BottomSheet = class {
+  constructor(opts) {
+    this.opts = opts;
+    this.active = false;
+    this.locked = false;
+    this.drag = null;
+    this.dragEndedAt = -Infinity;
+    this.onPointerDown = (e) => {
+      if (!e.isPrimary || e.pointerType === "mouse" && e.button !== 0) return;
+      if (this.drag || !isPhoneSheet()) return;
+      const sheet = this.opts.sheet();
+      if (!sheet || !inZone(e, sheet, this.opts.dragZones)) return;
+      this.drag = {
+        pointerId: e.pointerId,
+        startY: e.clientY,
+        lastY: e.clientY,
+        lastT: e.timeStamp,
+        velocity: 0,
+        moving: false,
+        offset: 0
+      };
+      window.addEventListener("pointermove", this.onPointerMove);
+      window.addEventListener("pointerup", this.onPointerUp);
+      window.addEventListener("pointercancel", this.onPointerCancel);
+    };
+    this.onPointerMove = (e) => {
+      const drag = this.drag;
+      if (!drag || e.pointerId !== drag.pointerId) return;
+      const dy = e.clientY - drag.startY;
+      if (!drag.moving) {
+        if (dy < -SLOP) return this.abandon();
+        if (dy <= SLOP) return;
+        drag.moving = true;
+        const sheet2 = this.opts.sheet();
+        if (sheet2) sheet2.style.transition = "none";
+        const backdrop2 = this.opts.backdrop?.();
+        if (backdrop2) backdrop2.style.transition = "none";
+      }
+      const dt = e.timeStamp - drag.lastT;
+      if (dt > 0) drag.velocity = 0.8 * ((e.clientY - drag.lastY) / dt) + 0.2 * drag.velocity;
+      drag.lastY = e.clientY;
+      drag.lastT = e.timeStamp;
+      drag.offset = Math.max(0, dy);
+      const sheet = this.opts.sheet();
+      if (sheet) sheet.style.transform = `translateY(${drag.offset}px)`;
+      const backdrop = this.opts.backdrop?.();
+      if (backdrop && sheet) {
+        const height = sheet.getBoundingClientRect().height || window.innerHeight;
+        backdrop.style.opacity = String(Math.max(0, 1 - drag.offset / height));
+      }
+      if (e.cancelable) e.preventDefault();
+    };
+    this.onPointerUp = (e) => {
+      const drag = this.drag;
+      if (!drag || e.pointerId !== drag.pointerId) return;
+      this.stopTracking();
+      this.drag = null;
+      if (!drag.moving) return;
+      this.dragEndedAt = performance.now();
+      const sheet = this.opts.sheet();
+      const height = sheet?.getBoundingClientRect().height || window.innerHeight;
+      const far = drag.offset >= Math.min(CLOSE_DISTANCE, height / 4);
+      const flick = drag.velocity >= FLICK_VELOCITY && drag.offset >= FLICK_MIN;
+      const allowed = !this.opts.canClose || this.opts.canClose();
+      this.release();
+      if ((far || flick) && allowed) {
+        if (sheet) sheet.style.transform = "translateY(100%)";
+        this.opts.close();
+      } else if (sheet) {
+        sheet.style.transform = "";
+      }
+    };
+    this.onPointerCancel = (e) => {
+      if (!this.drag || e.pointerId !== this.drag.pointerId) return;
+      this.abandon();
+    };
+    /** The press that ended a drag also fires a click on ✕ or the grab bar: swallow it. */
+    this.onClickCapture = (e) => {
+      if (performance.now() - this.dragEndedAt > CLICK_AFTER_DRAG_MS) return;
+      this.dragEndedAt = -Infinity;
+      e.stopPropagation();
+      e.preventDefault();
+    };
+  }
+  /** Call from `updated()` when `open` changed. Same value twice is a no-op. */
+  update(open) {
+    if (open === this.active) return;
+    this.active = open;
+    if (open) this.opened();
+    else this.closed();
+  }
+  /** Call from `disconnectedCallback()`: a sheet torn down while open must not keep the page locked. */
+  disconnect() {
+    if (this.active) {
+      this.active = false;
+      this.closed();
+    }
+  }
+  opened() {
+    if (isPhoneSheet()) {
+      lockPageScroll();
+      this.locked = true;
+    }
+    this.opts.host.addEventListener("pointerdown", this.onPointerDown);
+    this.opts.host.addEventListener("click", this.onClickCapture, true);
+  }
+  closed() {
+    this.opts.host.removeEventListener("pointerdown", this.onPointerDown);
+    this.opts.host.removeEventListener("click", this.onClickCapture, true);
+    this.stopTracking();
+    this.drag = null;
+    const sheet = this.opts.sheet();
+    if (sheet) {
+      sheet.style.transform = "";
+      sheet.style.transition = "";
+    }
+    const backdrop = this.opts.backdrop?.();
+    if (backdrop) {
+      backdrop.style.opacity = "";
+      backdrop.style.transition = "";
+    }
+    if (this.locked) {
+      this.locked = false;
+      unlockPageScroll();
+    }
+  }
+  /** Give up on this press and put the sheet back where it was. */
+  abandon() {
+    const moving = this.drag?.moving;
+    this.stopTracking();
+    this.drag = null;
+    if (!moving) return;
+    this.release();
+    const sheet = this.opts.sheet();
+    if (sheet) sheet.style.transform = "";
+  }
+  /** Hand the sheet and backdrop back to their CSS transitions. */
+  release() {
+    const sheet = this.opts.sheet();
+    if (sheet) sheet.style.transition = "";
+    const backdrop = this.opts.backdrop?.();
+    if (backdrop) {
+      backdrop.style.transition = "";
+      backdrop.style.opacity = "";
+    }
+  }
+  stopTracking() {
+    window.removeEventListener("pointermove", this.onPointerMove);
+    window.removeEventListener("pointerup", this.onPointerUp);
+    window.removeEventListener("pointercancel", this.onPointerCancel);
+  }
+};
+function inZone(e, sheet, zones) {
+  for (const node of e.composedPath()) {
+    if (node === sheet) return false;
+    if (node instanceof Element && node.matches(zones)) return sheet.contains(node);
+  }
+  return false;
+}
+var locks = 0;
+var saved = null;
+var LOCKED = ["position", "top", "left", "right", "width", "overflow"];
+function lockPageScroll() {
+  if (typeof document === "undefined") return;
+  locks += 1;
+  if (locks > 1) return;
+  const body = document.body;
+  const scrollY = window.scrollY || document.documentElement.scrollTop || 0;
+  saved = { scrollY, body: {} };
+  for (const p of LOCKED) saved.body[p] = body.style[p];
+  body.style.position = "fixed";
+  body.style.top = `-${scrollY}px`;
+  body.style.left = "0";
+  body.style.right = "0";
+  body.style.width = "100%";
+  body.style.overflow = "hidden";
+}
+function unlockPageScroll() {
+  if (typeof document === "undefined" || locks === 0) return;
+  locks -= 1;
+  if (locks > 0 || !saved) return;
+  const { scrollY, body } = saved;
+  saved = null;
+  for (const p of LOCKED) document.body.style[p] = body[p] ?? "";
+  const root = document.documentElement;
+  const behavior = root.style.scrollBehavior;
+  root.style.scrollBehavior = "auto";
+  window.scrollTo(0, scrollY);
+  root.style.scrollBehavior = behavior;
+}
+
 // src/ui/components/vio-product-detail.ts
 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>'
@@ -1443,6 +1813,10 @@ var VioProductDetail = class extends LitElement {
     this.selectedOptions = {};
     this.quantity = 1;
     this.activeImageIndex = 0;
+    this.thumbsOverflow = false;
+    this.thumbsAtStart = true;
+    this.thumbsAtEnd = false;
+    this.logoSquare = false;
     this.adding = false;
     this.applePayOk = false;
     this.availableMethods = null;
@@ -1460,6 +1834,14 @@ var VioProductDetail = class extends LitElement {
       container: () => this.renderRoot.querySelector(".modal"),
       close: () => this.close()
     });
+    /** Phones: the page behind is locked, and the sheet closes by pulling the bar or the top bar down. */
+    this.bottomSheet = new BottomSheet({
+      host: this,
+      sheet: () => this.renderRoot.querySelector(".modal"),
+      backdrop: () => this.renderRoot.querySelector(".backdrop"),
+      dragZones: ".handle, .topbar",
+      close: () => this.close()
+    });
     this.boundProductClick = (e) => {
       if (!this.autoOpen) return;
       const ev = e;
@@ -1487,6 +1869,14 @@ var VioProductDetail = class extends LitElement {
       this.show();
       void this.fetchProduct();
     };
+    this.onThumbsScroll = () => {
+      const row = this.thumbRow();
+      if (!row) return;
+      const atStart = row.scrollLeft <= 1;
+      const atEnd = row.scrollLeft + row.clientWidth >= row.scrollWidth - 1;
+      if (atStart !== this.thumbsAtStart) this.thumbsAtStart = atStart;
+      if (atEnd !== this.thumbsAtEnd) this.thumbsAtEnd = atEnd;
+    };
   }
   /** The card's context applies to the product it opened — not to one the host opened by hand later. */
   get fromCard() {
@@ -1574,7 +1964,10 @@ var VioProductDetail = class extends LitElement {
         height: 92vh;
         border-radius: var(--vio-radius-xl, 16px) var(--vio-radius-xl, 16px) 0 0;
         box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
+        overscroll-behavior: contain;
       }
+      /* Pulled down to close (bottom-sheet.ts): the browser must not take the gesture for a scroll. */
+      .handle, .topbar { touch-action: none; }
       .handle {
         display: flex;
         justify-content: center;
@@ -1595,8 +1988,8 @@ var VioProductDetail = class extends LitElement {
     @media (min-width: 601px) {
       .modal {
         inset: 0 0 0 auto;
-        width: min(440px, 100%);
-        max-width: 440px;
+        width: min(var(--vio-detail-width, 440px), 100%);
+        max-width: var(--vio-detail-width, 440px);
         border-radius: 0;
         box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
         transform: translateX(100%);
@@ -1610,29 +2003,59 @@ var VioProductDetail = class extends LitElement {
         max-width: none;
         grid-template-columns: 1fr;
         gap: 20px;
-        padding: 20px 24px 40px;
+        padding: var(--vio-detail-padding-top, 0px) var(--vio-detail-padding-x, var(--vio-space-lg, 24px)) 40px;
       }
-      .modal .name { font-size: 26px; line-height: 1.2; }
-      .modal .gallery-main { width: 100%; }
+      .modal .name { font-size: var(--vio-detail-title-size, 26px); line-height: 1.2; }
+      .modal .gallery-main { width: auto; }
     }
 
     .topbar {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 20px var(--vio-space-lg, 24px);
+      gap: 16px;
+      min-height: var(--vio-detail-topbar-height, 64px);
+      box-sizing: border-box;
+      padding: 10px var(--vio-detail-padding-x, var(--vio-space-lg, 24px));
       position: sticky;
       top: 0;
       background: var(--vio-color-surface, #fff);
       border-bottom: 1px solid var(--vio-color-border, #e5e5e5);
       z-index: 1;
     }
-    .topbar-brand {
-      font-size: 12px;
+    /* Who sells it, top left beside the close: the sponsor's logo, else its name. */
+    .topbar-sponsor { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
+    /* The logo box clips, so --vio-detail-logo-zoom can crop the white a
+       square file carries around its mark. */
+    .topbar-logo-box {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      height: var(--vio-detail-logo-height, 44px);
+      max-width: var(--vio-detail-logo-max-width, 220px);
+      overflow: hidden;
+    }
+    .topbar-logo {
+      display: block;
+      width: auto;
+      height: 100%;
+      max-width: var(--vio-detail-logo-max-width, 220px);
+      object-fit: contain;
+      object-position: left center;
+      transform: scale(var(--vio-detail-logo-zoom, 1));
+      transform-origin: center;
+    }
+    /* A square (or near) logo is a mark, not a wordmark: say whose it is. */
+    .topbar-sponsor:not(.is-square) .topbar-mark-name { display: none; }
+    .topbar-name {
+      font-size: var(--vio-detail-logo-name-size, 13px);
       text-transform: uppercase;
       letter-spacing: var(--vio-tracking-label, 0.1em);
       color: var(--vio-color-text-secondary, #666);
-      font-weight: 500;
+      font-weight: 600;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     .close {
       background: none;
@@ -1658,51 +2081,110 @@ var VioProductDetail = class extends LitElement {
       gap: 64px;
     }
     @media (max-width: 800px) {
-      .body { grid-template-columns: 1fr; gap: 32px; padding: 24px var(--vio-space-lg, 24px) 64px; }
+      .body {
+        grid-template-columns: 1fr;
+        gap: 24px;
+        padding: var(--vio-detail-padding-top, 0px) var(--vio-detail-padding-x, var(--vio-space-lg, 24px)) 64px;
+      }
     }
 
-    /* Gallery */
-    .gallery { display: flex; flex-direction: column; gap: 16px; }
+    /* Gallery. One fixed proportion for every image (4:5 by default) that the
+       image fills (cover): no white bars, and the panel never jumps between
+       photos of different shapes (Angelo, 2026-10-22). Its side margin is
+       --vio-detail-image-inset (the panel's padding by default; 0 = edge to
+       edge). Fit, proportion, a height cap and a zoom (to crop a white margin
+       baked into the file) are the host's to set. */
+    .gallery { display: flex; flex-direction: column; gap: var(--vio-detail-gallery-gap, 12px); min-width: 0; }
     .gallery-main {
-      aspect-ratio: 1;
-      background: var(--vio-color-surface-muted, #f2f2f2);
+      position: relative;
+      margin-inline: calc(
+        var(--vio-detail-image-inset, var(--vio-detail-padding-x, var(--vio-space-lg, 24px))) -
+          var(--vio-detail-padding-x, var(--vio-space-lg, 24px))
+      );
+      aspect-ratio: var(--vio-detail-image-aspect, 4 / 5);
+      max-height: var(--vio-detail-image-max-height, 85vh);
+      background: var(--vio-detail-image-bg, var(--vio-color-surface-muted, #f2f2f2));
+      border-radius: var(--vio-detail-image-radius, 0);
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
     }
     .gallery-main img {
+      display: block;
       width: 100%;
       height: 100%;
-      object-fit: contain;
-      padding: 24px;
-      box-sizing: border-box;
-    }
+      max-height: var(--vio-detail-image-max-height, 85vh);
+      object-fit: var(--vio-detail-image-fit, cover);
+      object-position: var(--vio-detail-image-position, center);
+      transform: scale(var(--vio-detail-image-zoom, 1));
+    }
+    /* Thumbnails: one row, never a second line — swipe on touch, arrows with a
+       mouse; the selected one scrolls into view by itself. */
+    .thumbs { position: relative; min-width: 0; }
     .gallery-thumbs {
       display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
+      gap: var(--vio-detail-thumb-gap, 8px);
+      overflow-x: auto;
+      scroll-snap-type: x proximity;
+      scroll-behavior: smooth;
+      scrollbar-width: none;
+      -webkit-overflow-scrolling: touch;
     }
+    .gallery-thumbs::-webkit-scrollbar { display: none; }
     .gallery-thumb {
-      width: 72px;
-      height: 72px;
+      flex: 0 0 auto;
+      width: var(--vio-detail-thumb-size, 64px);
+      height: var(--vio-detail-thumb-size, 64px);
       background: var(--vio-color-surface-muted, #f2f2f2);
-      border: 1px solid transparent;
+      border: var(--vio-detail-thumb-border-width, 1px) solid transparent;
+      border-radius: var(--vio-detail-thumb-radius, 0);
       cursor: pointer;
       padding: 0;
       overflow: hidden;
+      scroll-snap-align: start;
+      box-sizing: border-box;
+      opacity: var(--vio-detail-thumb-opacity, 1);
     }
     .gallery-thumb img {
+      display: block;
       width: 100%;
       height: 100%;
-      object-fit: contain;
-      padding: 6px;
-      box-sizing: border-box;
+      object-fit: var(--vio-detail-thumb-fit, cover);
+    }
+    .gallery-thumb.active {
+      border-color: var(--vio-detail-thumb-active-color, var(--vio-color-text, #0a0a0a));
+      opacity: 1;
+    }
+    .thumbs-arrow {
+      display: none;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 1;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: 1px solid var(--vio-color-border, #e5e5e5);
+      background: var(--vio-color-surface, #fff);
+      color: var(--vio-color-text, #0a0a0a);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      font: 16px/1 sans-serif;
+    }
+    .thumbs-arrow.prev { left: -6px; }
+    .thumbs-arrow.next { right: -6px; }
+    .thumbs-arrow:disabled { visibility: hidden; }
+    @media (hover: hover) and (pointer: fine) {
+      .thumbs.overflows .thumbs-arrow { display: flex; }
     }
-    .gallery-thumb.active { border-color: var(--vio-color-text, #0a0a0a); }
 
     /* Info column */
-    .info { display: flex; flex-direction: column; gap: 24px; }
+    .info { display: flex; flex-direction: column; gap: var(--vio-detail-info-gap, 20px); min-width: 0; }
     .brand {
       font-size: 12px;
       text-transform: uppercase;
@@ -1712,8 +2194,8 @@ var VioProductDetail = class extends LitElement {
     }
     .name {
       font-family: var(--vio-font-serif, Georgia, serif);
-      font-size: clamp(28px, 4vw, 40px);
-      font-weight: 400;
+      font-size: var(--vio-detail-title-size, clamp(28px, 4vw, 40px));
+      font-weight: var(--vio-detail-title-weight, 400);
       line-height: 1.15;
       margin: 0;
       letter-spacing: -0.01em;
@@ -1724,8 +2206,8 @@ var VioProductDetail = class extends LitElement {
       gap: 16px;
     }
     .price {
-      font-size: 24px;
-      font-weight: 700;
+      font-size: var(--vio-detail-price-size, 24px);
+      font-weight: var(--vio-detail-price-weight, 700);
     }
     .compare-at {
       font-size: 16px;
@@ -1743,7 +2225,7 @@ var VioProductDetail = class extends LitElement {
     .stock.out-of-stock { color: var(--vio-color-text-tertiary, #999); }
 
     /* Option pickers */
-    .option-group { display: flex; flex-direction: column; gap: 8px; }
+    .option-group { display: flex; flex-direction: column; gap: 6px; }
     .option-label {
       font-size: 11px;
       text-transform: uppercase;
@@ -1751,14 +2233,28 @@ var VioProductDetail = class extends LitElement {
       color: var(--vio-color-text-secondary, #666);
       font-weight: 500;
     }
-    .option-values { display: flex; flex-wrap: wrap; gap: 8px; }
+    /* Sizes: compact, still comfortable to tap. wrap → several lines;
+       nowrap → one line that scrolls sideways. */
+    .option-values {
+      display: flex;
+      flex-wrap: var(--vio-detail-option-wrap, wrap);
+      gap: var(--vio-detail-option-gap, 6px);
+      overflow-x: auto;
+      scrollbar-width: none;
+    }
+    .option-values::-webkit-scrollbar { display: none; }
     .option-pill {
-      padding: 10px 18px;
+      flex: 0 0 auto;
+      box-sizing: border-box;
+      min-height: var(--vio-detail-option-height, 36px);
+      min-width: var(--vio-detail-option-height, 36px);
+      padding: 0 var(--vio-detail-option-padding-x, 12px);
+      border-radius: var(--vio-detail-option-radius, 0);
       background: #fff;
       border: 1px solid var(--vio-color-border, #e5e5e5);
       cursor: pointer;
       font-family: inherit;
-      font-size: 13px;
+      font-size: var(--vio-detail-option-font-size, 13px);
       font-weight: 500;
       color: inherit;
       transition: border-color 0.15s, background 0.15s;
@@ -1777,6 +2273,34 @@ var VioProductDetail = class extends LitElement {
     }
     .option-pill.unavailable:hover { border-color: var(--vio-color-border, #e5e5e5); }
 
+    /* The buy zone: Vipps first, then quantity + add to cart, then the other
+       ways to pay. --vio-detail-buy-position: sticky pins it to the bottom of
+       the panel while the shopper scrolls (mobile, mostly). */
+    .buy {
+      display: flex;
+      flex-direction: column;
+      gap: var(--vio-detail-buy-gap, 10px);
+      position: var(--vio-detail-buy-position, static);
+      bottom: 0;
+      z-index: 2;
+      background: var(--vio-detail-buy-bg, var(--vio-color-surface, #fff));
+      padding: var(--vio-detail-buy-padding, 0);
+      box-shadow: var(--vio-detail-buy-shadow, none);
+    }
+    .buy > * { margin-top: 0 !important; }
+    /* Under the buttons: who the shopper is buying from. */
+    .seller-note {
+      margin: 2px 0 0;
+      font-size: var(--vio-detail-seller-note-size, 12px);
+      line-height: 1.4;
+      color: var(--vio-color-text-secondary, #666);
+      text-align: var(--vio-detail-seller-note-align, center);
+    }
+    .seller-note strong { font-weight: 600; color: var(--vio-color-text, #0a0a0a); }
+    .seller-links { display: block; margin-top: 2px; }
+    .seller-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
+    .seller-links a + a::before { content: '·'; display: inline-block; margin: 0 6px; text-decoration: none; }
+
     /* Qty + CTA row */
     .qty-cta-row {
       display: grid;
@@ -1791,7 +2315,7 @@ var VioProductDetail = class extends LitElement {
     }
     .qty-btn {
       width: 44px;
-      height: 56px;
+      height: var(--vio-detail-button-height, 52px);
       background: #fff;
       border: none;
       cursor: pointer;
@@ -1809,7 +2333,9 @@ var VioProductDetail = class extends LitElement {
       background: var(--vio-color-text, #0a0a0a);
       color: var(--vio-color-text-on-primary, #fff);
       border: none;
-      padding: 18px 24px;
+      min-height: var(--vio-detail-button-height, 52px);
+      border-radius: var(--vio-detail-button-radius, 0);
+      padding: 0 24px;
       font-size: 12px;
       text-transform: uppercase;
       letter-spacing: var(--vio-tracking-label, 0.1em);
@@ -1919,19 +2445,49 @@ var VioProductDetail = class extends LitElement {
     .buy-applepay:disabled { opacity: 0.5; cursor: not-allowed; }
 
     /* Description */
+    /* The description folds: a tap opens it, so it does not take the page. */
+    .description-block { border-top: 1px solid var(--vio-color-border, #e5e5e5); }
+    .description-block > summary {
+      list-style: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 0;
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      color: var(--vio-color-text-secondary, #666);
+      font-weight: 600;
+    }
+    .description-block > summary::-webkit-details-marker { display: none; }
+    .description-block > summary::after {
+      content: '';
+      width: 8px;
+      height: 8px;
+      border-right: 1.5px solid currentColor;
+      border-bottom: 1.5px solid currentColor;
+      transform: rotate(45deg) translateY(-2px);
+      transition: transform 0.15s ease;
+    }
+    .description-block[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
     .description {
       font-size: 14px;
       line-height: 1.6;
       color: var(--vio-color-text-secondary, #444);
-      margin-top: 8px;
+      padding-bottom: 14px;
+      white-space: pre-line;
     }
-    .description-label {
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: var(--vio-tracking-label, 0.1em);
-      color: var(--vio-color-text-secondary, #666);
-      font-weight: 500;
-      margin-bottom: 8px;
+    /* Desktop: the description above, the buy zone at the bottom of the panel
+       (sticky). Phones keep the order as it is: buy, then the description. */
+    @media (min-width: 601px) {
+      .description-block { order: 1; }
+      .buy {
+        order: 2;
+        position: var(--vio-detail-buy-position, sticky);
+        padding: var(--vio-detail-buy-padding, 12px 0 16px);
+        box-shadow: var(--vio-detail-buy-shadow, 0 -1px 0 var(--vio-color-border, #e5e5e5));
+      }
     }
 
     /* Skeleton loader: shimmer placeholders mirroring the product layout
@@ -1987,14 +2543,47 @@ var VioProductDetail = class extends LitElement {
   disconnectedCallback() {
     document.removeEventListener("vio:product-click", this.boundProductClick);
     this.slotRegistration.clear();
+    this.bottomSheet.disconnect();
     super.disconnectedCallback();
   }
   updated(changed) {
-    if (changed.has("open")) this.dialogFocus.update(this.open);
+    if (changed.has("open")) {
+      this.dialogFocus.update(this.open);
+      this.bottomSheet.update(this.open);
+    }
+    if (changed.has("product") || changed.has("open")) this.measureThumbs();
+    if (changed.has("activeImageIndex")) this.revealActiveThumb();
+    this.measureLogo();
     if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName") || changed.has("vioCampaign")) {
       this.slotRegistration.sync(this.slotAttributes());
     }
   }
+  thumbRow() {
+    return this.renderRoot.querySelector(".gallery-thumbs");
+  }
+  /** Arrows only when the row overflows; each one off at its own end. */
+  measureThumbs() {
+    const row = this.thumbRow();
+    if (!row) return;
+    const overflow = row.scrollWidth > row.clientWidth + 1;
+    if (overflow !== this.thumbsOverflow) this.thumbsOverflow = overflow;
+    this.onThumbsScroll();
+  }
+  /** One arrow press moves most of a visible row. */
+  scrollThumbs(direction) {
+    const row = this.thumbRow();
+    if (row) row.scrollBy({ left: direction * row.clientWidth * 0.8 });
+  }
+  /** The selected thumbnail is always visible: the row scrolls to it, the page never does. */
+  revealActiveThumb() {
+    const row = this.thumbRow();
+    const thumb = row?.querySelectorAll(".gallery-thumb")[this.activeImageIndex];
+    if (!row || !thumb) return;
+    const left = thumb.offsetLeft - row.offsetLeft;
+    if (left < row.scrollLeft || left + thumb.offsetWidth > row.scrollLeft + row.clientWidth) {
+      row.scrollTo({ left: Math.max(0, left - (row.clientWidth - thumb.offsetWidth) / 2) });
+    }
+  }
   show() {
     this.open = true;
   }
@@ -2384,9 +2973,7 @@ var VioProductDetail = class extends LitElement {
   addCurrentToCart() {
     if (!this.product) return void 0;
     const variant = this.selectedVariant();
-    const sponsor = Vio.bootstrapCache?.primarySponsor;
-    const secondaries = Vio.bootstrapCache?.secondarySponsors ?? [];
-    const sponsorName = sponsor?.id === this.sponsorId ? sponsor.name : secondaries.find((s) => s.id === this.sponsorId)?.name;
+    const sponsorName = resolveSponsorIdentity(this.sponsorId)?.name || void 0;
     const { campaignId, slot, contentId, componentTemplateId, contentUrl, contentTitle } = this.attribution();
     Vio.cart.addProduct({
       product: this.product,
@@ -2437,7 +3024,7 @@ var VioProductDetail = class extends LitElement {
         new CustomEvent("vio:checkout-open", {
           bubbles: true,
           composed: true,
-          detail: { sponsorId: this.sponsorId, paymentMethod: "klarna", express: true, ...this.attribution() }
+          detail: { sponsorId: this.sponsorId, paymentMethod: "klarna", express: true, ...this.attribution(), ...sponsorDetail(this.sponsorId) }
         })
       );
     } finally {
@@ -2467,7 +3054,7 @@ var VioProductDetail = class extends LitElement {
       new CustomEvent("vio:checkout-open", {
         bubbles: true,
         composed: true,
-        detail: { sponsorId: this.sponsorId, express: false, ...this.attribution() }
+        detail: { sponsorId: this.sponsorId, express: false, ...this.attribution(), ...sponsorDetail(this.sponsorId) }
       })
     );
   }
@@ -2483,27 +3070,33 @@ var VioProductDetail = class extends LitElement {
   }
   buyWithVipps() {
     if (!this.product || this.availableQuantity <= 0 || this.adding) return;
+    const redirect = beginPaymentRedirect({ method: "vipps", sponsorId: this.sponsorId, source: "detail" });
     this.addCurrentToCart();
     this.close();
-    void this.startVippsExpressOrCheckout();
+    void this.startVippsExpressOrCheckout(redirect);
   }
-  async startVippsExpressOrCheckout() {
+  async startVippsExpressOrCheckout(redirect) {
     let fallback = true;
     try {
-      if (!await Vio.checkout.getVippsExpressEnabled(this.sponsorId)) throw new Error("express off");
-      const res = await Vio.checkout.startVippsExpress(this.sponsorId);
-      fallback = !res?.payment_url;
+      if (!await Vio.checkout.getVippsExpressEnabled(this.sponsorId)) {
+        redirect.abort("express-off");
+      } else {
+        const res = await Vio.checkout.startVippsExpress(this.sponsorId);
+        fallback = !res?.payment_url;
+        if (fallback) redirect.abort("not-started");
+      }
     } catch (err) {
       if (typeof console !== "undefined") {
         console.warn("[VioProductDetail] Vipps Express not started:", err);
       }
+      redirect.fail(err instanceof Error ? err.message : String(err));
     }
     if (!fallback) return;
     this.dispatchEvent(
       new CustomEvent("vio:checkout-open", {
         bubbles: true,
         composed: true,
-        detail: { sponsorId: this.sponsorId, paymentMethod: "vipps", express: false, ...this.attribution() }
+        detail: { sponsorId: this.sponsorId, paymentMethod: "vipps", express: false, ...this.attribution(), ...sponsorDetail(this.sponsorId) }
       })
     );
   }
@@ -2516,7 +3109,7 @@ var VioProductDetail = class extends LitElement {
       new CustomEvent("vio:checkout-open", {
         bubbles: true,
         composed: true,
-        detail: { sponsorId: this.sponsorId, paymentMethod: "stripe", express: false, ...this.attribution() }
+        detail: { sponsorId: this.sponsorId, paymentMethod: "stripe", express: false, ...this.attribution(), ...sponsorDetail(this.sponsorId) }
       })
     );
   }
@@ -2556,14 +3149,68 @@ var VioProductDetail = class extends LitElement {
     this.sellerName = name;
     this.sellerSettled = true;
   }
+  /**
+   * Who sells the product, top left beside the close (Mote & Livsstil,
+   * 2026-10-22): the logo of the sponsor the product was fetched with — the
+   * product's brand, never the article's — with its name as `alt`; without a
+   * logo that loads, its name; without an identity, the seller's Company name
+   * (or the product's brand) once known. Size: --vio-detail-logo-height.
+   */
+  renderTopbarSponsor() {
+    const identity = resolveSponsorIdentity(this.sponsorId);
+    const mark = identity ? renderSponsorMark(this, identity, { logo: "topbar-logo", name: "topbar-name" }) : nothing;
+    if (mark !== nothing) {
+      if (identity && usableLogo(identity)) {
+        return html`<span class="topbar-logo-box">${mark}</span
+          ><span class="topbar-name topbar-mark-name">${identity.name}</span>`;
+      }
+      return mark;
+    }
+    const name = this.headerName();
+    return name ? html`<span class="topbar-name">${name}</span>` : nothing;
+  }
+  /**
+   * Under the buy buttons: «Du handler direkte hos {brand}.» — the brand the
+   * product was fetched with (the sponsor; its Company name or the product's
+   * brand when no identity is known), never the article's. Nothing when no
+   * name is known.
+   */
+  renderSellerNote() {
+    const identity = resolveSponsorIdentity(this.sponsorId);
+    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
+    ].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}
+    </p>`;
+  }
+  /** Square-ish logo (4:5 to 5:4) → the top bar shows the name beside it. */
+  measureLogo() {
+    const img = this.renderRoot.querySelector(".topbar-logo");
+    if (!img) {
+      if (this.logoSquare) this.logoSquare = false;
+      return;
+    }
+    const decide = () => {
+      if (!img.naturalWidth || !img.naturalHeight) return;
+      const ratio = img.naturalWidth / img.naturalHeight;
+      const square = ratio >= 0.8 && ratio <= 1.25;
+      if (square !== this.logoSquare) this.logoSquare = square;
+    };
+    if (img.complete) decide();
+    else img.addEventListener("load", decide, { once: true });
+  }
   render() {
     return html`
       <div class="backdrop" @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="topbar">
-          <span class="topbar-brand">${this.headerName()}</span>
-          <button class="close" @click=${this.close} aria-label="Lukk">×</button>
+        <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>
         </div>
 
         ${this.renderBody()}
@@ -2595,44 +3242,90 @@ var VioProductDetail = class extends LitElement {
     const activeImage = this.activeImage;
     return html`
       <div class="body">
-        <div class="gallery">
-          <div class="gallery-main">
+        <div class="gallery" part="gallery">
+          <div class="gallery-main" part="image">
             ${activeImage?.url ? html`<img src=${activeImage.url} alt=${p.title} />` : ""}
           </div>
           ${images.length > 1 ? html`
-                <div class="gallery-thumbs">
-                  ${images.map(
+                <div class="thumbs ${this.thumbsOverflow ? "overflows" : ""}">
+                  <button
+                    class="thumbs-arrow prev"
+                    part="thumbs-arrow"
+                    aria-label="Forrige bilder"
+                    ?disabled=${this.thumbsAtStart}
+                    @click=${() => this.scrollThumbs(-1)}
+                  >‹</button>
+                  <div class="gallery-thumbs" part="thumbs" @scroll=${this.onThumbsScroll}>
+                    ${images.map(
       (img, idx) => html`
-                      <button
-                        class="gallery-thumb ${idx === this.activeImageIndex ? "active" : ""}"
-                        @click=${() => this.activeImageIndex = idx}
-                        aria-label=${`Bilde ${idx + 1}`}
-                      >
-                        <img src=${img.url} alt="" />
-                      </button>
-                    `
+                        <button
+                          class="gallery-thumb ${idx === this.activeImageIndex ? "active" : ""}"
+                          part=${idx === this.activeImageIndex ? "thumb thumb-active" : "thumb"}
+                          @click=${() => this.activeImageIndex = idx}
+                          aria-label=${`Bilde ${idx + 1}`}
+                          aria-current=${idx === this.activeImageIndex ? "true" : "false"}
+                        >
+                          <img src=${img.url} alt="" loading="lazy" />
+                        </button>
+                      `
     )}
+                  </div>
+                  <button
+                    class="thumbs-arrow next"
+                    part="thumbs-arrow"
+                    aria-label="Neste bilder"
+                    ?disabled=${this.thumbsAtEnd}
+                    @click=${() => this.scrollThumbs(1)}
+                  >›</button>
                 </div>
               ` : ""}
         </div>
 
-        <div class="info">
-          ${p.brand ? html`<div class="brand">${p.brand}</div>` : ""}
-          <h2 class="name">${p.title}</h2>
+        <div class="info" part="info">
+          ${p.brand ? html`<div class="brand" part="brand">${p.brand}</div>` : ""}
+          <h2 class="name" part="title">${p.title}</h2>
 
           <div class="price-row">
-            <span class="price">${formatPrice(this.unitPrice, p.price.currency_code)}</span>
+            <span class="price" part="price">${formatPrice(this.unitPrice, p.price.currency_code)}</span>
             ${showCompare ? html`<span class="compare-at">${formatPrice(
       compare,
       p.price.currency_code
     )}</span>` : ""}
           </div>
 
-          <div class="stock ${stock.cls}">${stock.text}</div>
+          <div class="stock ${stock.cls}" part="stock">${stock.text}</div>
 
           ${this.renderOptionPickers(p.options)}
 
-          <div class="qty-cta-row">
+          <div class="buy" part="buy">
+          ${this.availableQuantity > 0 && this.methodEnabled("vipps") ? this.vippsOfficial ? html`
+                  <vipps-mobilepay-button
+                    class="buy-vipps-official"
+                    part="buy-vipps"
+                    brand="vipps"
+                    language="no"
+                    verb="buy"
+                    variant="primary"
+                    rounded="true"
+                    stretched="true"
+                    role="button"
+                    aria-label="Kjøp nå med Vipps"
+                    @click=${this.buyWithVipps}
+                  ></vipps-mobilepay-button>
+                ` : html`
+                  <button
+                    class="buy-vipps"
+                    part="buy-vipps"
+                    @click=${this.buyWithVipps}
+                    ?disabled=${this.adding}
+                    aria-label="Kjøp nå med Vipps"
+                  >
+                    <span>Kjøp nå med</span>
+                    <span class="vipps-badge">vipps</span>
+                  </button>
+                ` : ""}
+
+          <div class="qty-cta-row" part="quantity-row">
             <div class="qty-stepper">
               <button
                 class="qty-btn"
@@ -2653,6 +3346,7 @@ var VioProductDetail = class extends LitElement {
             </div>
             <button
               class="add-to-cart"
+              part="add-to-cart"
               @click=${this.addToCart}
               ?disabled=${this.availableQuantity <= 0 || this.adding}
             >
@@ -2714,36 +3408,14 @@ var VioProductDetail = class extends LitElement {
                 </button>
               ` : ""}
 
-          ${this.availableQuantity > 0 && this.methodEnabled("vipps") ? this.vippsOfficial ? html`
-                  <vipps-mobilepay-button
-                    class="buy-vipps-official"
-                    brand="vipps"
-                    language="no"
-                    verb="buy"
-                    variant="primary"
-                    rounded="true"
-                    stretched="true"
-                    role="button"
-                    aria-label="Kjøp nå med Vipps"
-                    @click=${this.buyWithVipps}
-                  ></vipps-mobilepay-button>
-                ` : html`
-                  <button
-                    class="buy-vipps"
-                    @click=${this.buyWithVipps}
-                    ?disabled=${this.adding}
-                    aria-label="Kjøp nå med Vipps"
-                  >
-                    <span>Kjøp nå med</span>
-                    <span class="vipps-badge">vipps</span>
-                  </button>
-                ` : ""}
+          ${this.renderSellerNote()}
+          </div>
 
           ${p.description ? html`
-                <div>
-                  <div class="description-label">Beskrivelse</div>
+                <details class="description-block" part="description">
+                  <summary>Beskrivelse</summary>
                   <div class="description">${this.stripHtml(p.description)}</div>
-                </div>
+                </details>
               ` : ""}
         </div>
       </div>
@@ -2755,9 +3427,9 @@ var VioProductDetail = class extends LitElement {
       const values = normalizeValues(opt.values);
       if (values.length === 0) return "";
       return html`
-        <div class="option-group">
-          <div class="option-label">${opt.name}</div>
-          <div class="option-values">
+        <div class="option-group" part="option-group">
+          <div class="option-label" part="option-label">${opt.name}</div>
+          <div class="option-values" part="options">
             ${values.map((val) => {
         const available = this.isValueAvailable(opt.name, val);
         const currentVal = this.selectedOptions[opt.name] ?? "";
@@ -2765,6 +3437,7 @@ var VioProductDetail = class extends LitElement {
         return html`
                 <button
                   class="option-pill ${available ? "" : "unavailable"}"
+                  part=${isSelected ? "option option-selected" : "option"}
                   @click=${() => this.selectOption(opt.name, val)}
                   aria-pressed=${isSelected}
                   ?disabled=${!available}
@@ -2780,8 +3453,8 @@ var VioProductDetail = class extends LitElement {
     })}`;
   }
   /** Best-effort HTML strip for description. */
-  stripHtml(html6) {
-    return html6.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(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();
   }
 };
 __decorateClass([
@@ -2844,6 +3517,18 @@ __decorateClass([
 __decorateClass([
   state()
 ], VioProductDetail.prototype, "activeImageIndex", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "thumbsOverflow", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "thumbsAtStart", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "thumbsAtEnd", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "logoSquare", 2);
 __decorateClass([
   state()
 ], VioProductDetail.prototype, "adding", 2);
@@ -2895,6 +3580,14 @@ var VioCart = class extends LitElement {
       container: () => this.renderRoot.querySelector(".drawer"),
       close: () => this.close()
     });
+    /** Phones: the page behind is locked, and the sheet closes by pulling the bar or the header down. */
+    this.bottomSheet = new BottomSheet({
+      host: this,
+      sheet: () => this.renderRoot.querySelector(".drawer"),
+      backdrop: () => this.renderRoot.querySelector(".backdrop"),
+      dragZones: ".handle, .header",
+      close: () => this.close()
+    });
     this.boundOnCartChange = (e) => {
       const detail = e.detail;
       this.carts = detail.cartsBySponsor;
@@ -2925,7 +3618,7 @@ var VioCart = class extends LitElement {
       top: 0;
       right: 0;
       bottom: 0;
-      width: min(440px, 100%);
+      width: min(var(--vio-cart-width, 440px), 100%);
       background: var(--vio-color-surface, #fff);
       transform: translateX(100%);
       transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
@@ -2954,8 +3647,11 @@ var VioCart = class extends LitElement {
         border-radius: var(--vio-radius-xl, 16px) var(--vio-radius-xl, 16px) 0 0;
         transform: translateY(100%);
         box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
+        overscroll-behavior: contain;
       }
       :host([open]) .drawer { transform: translateY(0); }
+      /* Pulled down to close (bottom-sheet.ts): the browser must not take the gesture for a scroll. */
+      .handle, .header { touch-action: none; }
       .handle {
         display: flex;
         justify-content: center;
@@ -3275,6 +3971,7 @@ var VioCart = class extends LitElement {
   }
   disconnectedCallback() {
     Vio.cart.removeEventListener("change", this.boundOnCartChange);
+    this.bottomSheet.disconnect();
     super.disconnectedCallback();
   }
   close() {
@@ -3321,7 +4018,10 @@ var VioCart = class extends LitElement {
     return isMethodEnabled(this.availableMethods, ...names);
   }
   updated(changed) {
-    if (changed.has("open")) this.dialogFocus.update(this.open);
+    if (changed.has("open")) {
+      this.dialogFocus.update(this.open);
+      this.bottomSheet.update(this.open);
+    }
     if (changed.has("open") && this.open) {
       this.confirmedOrder = null;
       this.preparedTotal = -1;
@@ -3356,6 +4056,8 @@ var VioCart = class extends LitElement {
     const handle = this.applePayHandle;
     if (!handle || !handle.available || this.itemCount === 0) return;
     const snapshot = this.buildConfirmation();
+    const sponsorIds = [...this.carts.keys()];
+    const sponsor = sponsorIds.length === 1 ? sponsorDetail(sponsorIds[0]) : {};
     void handle.show().then((result) => {
       if (!result) return;
       this.confirmedOrder = snapshot;
@@ -3367,7 +4069,7 @@ var VioCart = class extends LitElement {
         new CustomEvent("vio:payment-success", {
           bubbles: true,
           composed: true,
-          detail: { method: "apple-pay", result, ...buyerRef ? { buyerRef } : {} }
+          detail: { method: "apple-pay", result, ...buyerRef ? { buyerRef } : {}, ...sponsor }
         })
       );
     });
@@ -3403,7 +4105,7 @@ var VioCart = class extends LitElement {
       new CustomEvent("vio:checkout-open", {
         bubbles: true,
         composed: true,
-        detail: { sponsorId: firstSponsorId, paymentMethod: "klarna", express: true }
+        detail: { sponsorId: firstSponsorId, paymentMethod: "klarna", express: true, ...sponsorDetail(firstSponsorId) }
       })
     );
   }
@@ -3424,7 +4126,7 @@ var VioCart = class extends LitElement {
       new CustomEvent("vio:checkout-open", {
         bubbles: true,
         composed: true,
-        detail: { sponsorId: firstSponsorId, express: false }
+        detail: { sponsorId: firstSponsorId, express: false, ...sponsorDetail(firstSponsorId) }
       })
     );
   }
@@ -3438,30 +4140,36 @@ var VioCart = class extends LitElement {
     if (this.itemCount === 0) return;
     const firstSponsorId = [...this.carts.keys()][0];
     if (firstSponsorId === void 0) return;
-    void this.startVippsExpressOrCheckout(firstSponsorId);
+    const redirect = beginPaymentRedirect({ method: "vipps", sponsorId: firstSponsorId, source: "cart" });
+    void this.startVippsExpressOrCheckout(firstSponsorId, redirect);
   }
   /** Vipps' own button when its script answers; our orange one otherwise. */
   async loadVippsButton() {
     this.vippsOfficial = await ensureVippsButton();
   }
-  async startVippsExpressOrCheckout(sponsorId) {
+  async startVippsExpressOrCheckout(sponsorId, redirect) {
     let fallback = true;
     try {
       await Vio.cart.waitForCartMutations(sponsorId);
-      if (!await Vio.checkout.getVippsExpressEnabled(sponsorId)) throw new Error("express off");
-      const res = await Vio.checkout.startVippsExpress(sponsorId);
-      fallback = !res?.payment_url;
+      if (!await Vio.checkout.getVippsExpressEnabled(sponsorId)) {
+        redirect.abort("express-off");
+      } else {
+        const res = await Vio.checkout.startVippsExpress(sponsorId);
+        fallback = !res?.payment_url;
+        if (fallback) redirect.abort("not-started");
+      }
     } catch (err) {
       if (typeof console !== "undefined") {
         console.warn("[VioCart] Vipps Express not started:", err);
       }
+      redirect.fail(err instanceof Error ? err.message : String(err));
     }
     if (!fallback) return;
     this.dispatchEvent(
       new CustomEvent("vio:checkout-open", {
         bubbles: true,
         composed: true,
-        detail: { sponsorId, paymentMethod: "vipps", express: false }
+        detail: { sponsorId, paymentMethod: "vipps", express: false, ...sponsorDetail(sponsorId) }
       })
     );
   }
@@ -3474,10 +4182,14 @@ var VioCart = class extends LitElement {
       new CustomEvent("vio:checkout-open", {
         bubbles: true,
         composed: true,
-        detail: { sponsorId: firstSponsorId, paymentMethod: "stripe", express: false }
+        detail: { sponsorId: firstSponsorId, paymentMethod: "stripe", express: false, ...sponsorDetail(firstSponsorId) }
       })
     );
   }
+  /** The name over a sponsor's lines: the brand's display name by the one rule, else what the cart kept. */
+  sponsorLabel(cart) {
+    return resolveSponsorIdentity(cart.sponsorId)?.name || cart.sponsorName || "";
+  }
   get totalAcrossSponsors() {
     let sum = 0;
     for (const cart of this.carts.values()) {
@@ -3518,7 +4230,7 @@ var VioCart = class extends LitElement {
                 ${sponsorCarts.map(
       (cart) => html`
                     <div class="sponsor-group">
-                      ${cart.sponsorName ? html`<div class="sponsor-label">${cart.sponsorName}</div>` : ""}
+                      ${this.sponsorLabel(cart) ? html`<div class="sponsor-label">${this.sponsorLabel(cart)}</div>` : ""}
                       ${cart.items.map(
         (item) => html`
                           <div class="item">
@@ -3755,6 +4467,9 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.verifyingReturn = null;
     /** The checkout whose confirmation is on screen — see fillOrderNumber. */
     this.confirmedCheckoutId = null;
+    this.orderSponsor = null;
+    /** The bootstrap that names the checkout's sponsor was asked for (once per checkout) — see watchSponsorBootstrap. */
+    this.sponsorBootstrapAsked = false;
     this.confirmedOrder = null;
     /** Active Klarna Payments widget handle + the subtotal it was mounted for. */
     this.klarnaHandle = null;
@@ -3853,6 +4568,15 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       close: () => this.close(),
       canClose: () => !this.paymentInFlight
     });
+    /** Phones: the page behind is locked, and the sheet closes by pulling the bar or the top bar down — not mid-payment. */
+    this.bottomSheet = new BottomSheet({
+      host: this,
+      sheet: () => this.renderRoot.querySelector(".modal"),
+      backdrop: () => this.renderRoot.querySelector(".backdrop"),
+      dragZones: ".handle, .topbar",
+      close: () => this.close(),
+      canClose: () => !this.paymentInFlight
+    });
     this.paymentMethodsResolved = false;
     /** Guards `autoSelectSoleMethod` to ONE attempt per opening — see there. */
     this.autoSelectAttempted = false;
@@ -3905,6 +4629,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         this.paymentNotice = null;
         this.verifyingReturn = null;
         this.confirmedCheckoutId = null;
+        this.orderSponsor = null;
+        this.sponsorBootstrapAsked = false;
         this.express = false;
         this.availableMethods = null;
         this.paymentMethodsResolved = false;
@@ -4003,8 +4729,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
        from the right instead of the full-screen overlay. */
     .modal.as-side {
       inset: 0 0 0 auto;
-      width: min(440px, 100%);
-      max-width: 440px;
+      width: min(var(--vio-checkout-width, 440px), 100%);
+      max-width: var(--vio-checkout-width, 440px);
       transform: translateX(100%);
       border-radius: 0;
       box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
@@ -4019,8 +4745,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     @media (min-width: 601px) {
       .modal {
         inset: 0 0 0 auto;
-        width: min(440px, 100%);
-        max-width: 440px;
+        width: min(var(--vio-checkout-width, 440px), 100%);
+        max-width: var(--vio-checkout-width, 440px);
         transform: translateX(100%);
         border-radius: 0;
         box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
@@ -4057,7 +4783,10 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         height: 92vh;
         border-radius: var(--vio-radius-xl, 16px) var(--vio-radius-xl, 16px) 0 0;
         box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
+        overscroll-behavior: contain;
       }
+      /* Pulled down to close (bottom-sheet.ts): the browser must not take the gesture for a scroll. */
+      .handle, .topbar { touch-action: none; }
       .handle {
         display: flex;
         justify-content: center;
@@ -4090,6 +4819,33 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       font-weight: 400;
       margin: 0;
     }
+    .topbar-title {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+    }
+    /* Who the shopper buys from — the checkout's sponsor, compact under the heading. */
+    .topbar-sponsor {
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      line-height: 1.3;
+      color: var(--vio-color-text-secondary, #666);
+    }
+    .topbar-sponsor-logo {
+      display: block;
+      width: auto;
+      height: 18px;
+      max-width: 120px;
+      object-fit: contain;
+    }
+    .topbar-sponsor-name {
+      color: var(--vio-color-text, #0a0a0a);
+      font-weight: 600;
+    }
     .close {
       background: none;
       border: none;
@@ -4405,7 +5161,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       width: 48px;
       height: 48px;
       border-radius: 50%;
-      background: #2e7d32;
+      background: var(--vio-confirm-check-bg, #2e7d32);
       color: #fff;
       display: flex;
       align-items: center;
@@ -4415,10 +5171,26 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     }
     .confirm-title {
       font-family: var(--vio-font-serif, Georgia, serif);
-      font-size: 24px;
-      font-weight: 400;
+      font-size: var(--vio-confirm-title-size, 24px);
+      font-weight: var(--vio-confirm-title-weight, 400);
       margin: 0;
     }
+    /* The brand the order is with: its logo over the thanks, its name in it. */
+    .confirm-brand { display: flex; align-items: center; }
+    .confirm-brand-logo {
+      display: block;
+      width: auto;
+      height: var(--vio-confirm-logo-height, 40px);
+      max-width: var(--vio-confirm-logo-max-width, 220px);
+      object-fit: contain;
+    }
+    .confirm-sponsor {
+      font-size: var(--vio-confirm-text-size, 14px);
+      line-height: 1.4;
+      color: var(--vio-color-text, #0a0a0a);
+      margin: 4px 0 0;
+    }
+    .confirm-sponsor strong { font-weight: 600; }
     .confirm-text {
       font-size: 14px;
       color: var(--vio-color-text-secondary, #666);
@@ -4619,6 +5391,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
    * Vipps-specific (GetVippsStatus) return-verification paths. */
   applyReturnOutcome(outcome, sawStatus, vioMethod, sponsorId, checkoutId) {
     if (outcome === "paid") {
+      this.setOrderSponsor(sponsorId, checkoutId);
       if (sponsorId > 0) Vio.cart.clearSponsorCart(sponsorId);
       this.confirmedOrder = {
         items: [],
@@ -4636,6 +5409,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     } else if (outcome === "failed") {
       this.paymentError = "Betalingen ble avbrutt eller feilet. Vennligst pr\xF8v igjen.";
       this.open = true;
+      returnCancelled({ method: vioMethod, sponsorId, source: "checkout", checkoutId });
     } else if (sawStatus) {
       this.paymentNotice = "Betalingen behandles fortsatt. Du f\xE5r ordrebekreftelse p\xE5 e-post n\xE5r den er gjennomf\xF8rt. Handlekurven er uendret.";
       this.open = true;
@@ -4679,6 +5453,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       if (kustomReturn?.kind === "confirmation") {
         const kustomOrderId = kustomReturn.orderId;
         this.returningFrom = "kustom";
+        this.setOrderSponsor(sponsorId, kustomReturn.checkoutId);
         if (!this.checkoutState) {
           const spIdToUse = sponsorId || [...Vio.cart.getAllCarts().keys()][0] || 0;
           if (spIdToUse) {
@@ -4722,6 +5497,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       if (!vioPayment && !checkoutId) return;
       if (urlParams.get("payment_processor") === "QLIRO" && checkoutId) {
         this.returningFrom = "qliro";
+        this.setOrderSponsor(sponsorId, checkoutId);
         if (!this.checkoutState) {
           const spIdToUse = sponsorId || [...Vio.cart.getAllCarts().keys()][0] || 0;
           if (spIdToUse) {
@@ -4776,6 +5552,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       }
       if (urlParams.get("payment_processor") === "WALLEY" && checkoutId) {
         this.returningFrom = "walley";
+        this.setOrderSponsor(sponsorId, checkoutId);
         if (!this.checkoutState) {
           const spIdToUse = sponsorId || [...Vio.cart.getAllCarts().keys()][0] || 0;
           if (spIdToUse) {
@@ -4832,6 +5609,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         this.cleanReturnQueryParams(ADYEN_RETURN_QUERY_KEYS);
         if (!adyenReturn) return;
         this.returningFrom = "adyen";
+        this.setOrderSponsor(sponsorId, checkoutId);
         this.adyenSettled = true;
         this.autoSelectAttempted = true;
         if (!this.checkoutState) {
@@ -4888,6 +5666,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
             }
           }
         }
+        this.setOrderSponsor(sponsorId, checkoutId);
         this.open = true;
         this.verifyingReturn = "Bekrefter betalingen med Vipps\u2026";
         const { outcome, sawStatus } = await this.pollVippsStatus(checkoutId, sponsorId);
@@ -4898,6 +5677,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         let outcome = "pending";
         let sawStatus = false;
         if (checkoutId) {
+          this.setOrderSponsor(sponsorId, checkoutId);
           this.open = true;
           this.verifyingReturn = "Bekrefter betalingen\u2026";
           for (const delayMs of _VioCheckout.RETURN_VERIFY_DELAYS_MS) {
@@ -4972,10 +5752,14 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.unmountNexi();
     this.unmountAdyen();
     for (const settle of [...this.pendingSuccessEmits]) settle();
+    this.bottomSheet.disconnect();
     super.disconnectedCallback();
   }
   updated(changed) {
-    if (changed.has("open")) this.dialogFocus.update(this.open);
+    if (changed.has("open")) {
+      this.dialogFocus.update(this.open);
+      this.bottomSheet.update(this.open);
+    }
     if (changed.has("open") && this.open && this.items.length > 0 && this.availableShippingsList.length === 0) {
       void this.loadAvailableShippings();
     }
@@ -4996,6 +5780,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       this.unmountStripe();
       this.paymentError = null;
     }
+    this.watchSponsorBootstrap();
     if (!this.isConnected) return;
     void this.mountKlarnaIfNeeded();
     void this.mountKustomIfNeeded();
@@ -5427,10 +6212,12 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     }
     if (method === "vipps") {
       this.vippsLoading = true;
+      const redirect = beginPaymentRedirect({ method: "vipps", sponsorId: this.checkoutState?.sponsorId, source: "checkout" });
       void this.startVippsFromCheckout().catch((err) => {
         if (typeof console !== "undefined") {
           console.warn("[VioCheckout] Vipps payment could not start:", err);
         }
+        redirect.fail(errorText(err));
         this.paymentError = friendlyPaymentError(errorText(err));
       }).finally(() => {
         this.vippsLoading = false;
@@ -5472,6 +6259,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     const email = String(this.form.email ?? "").trim();
     const checkoutId = returnCheckoutId || this.checkoutState?.checkoutId;
     const providerOrderId = r.order?.orderId != null ? String(r.order.orderId) : "";
+    this.setOrderSponsor(sponsorId, checkoutId);
     this.confirmedOrder = {
       items: [...this.items],
       currency: this.checkoutState?.currency ?? "",
@@ -5514,17 +6302,27 @@ var _VioCheckout = class _VioCheckout extends LitElement {
    * `visibilitychange`) or the element leaves, the event goes out at once
    * without the reference. Exactly one event per call. `afterwards` runs
    * right after the event, so a path keeps the order it always had (the cart
-   * is cleared after the event).
+   * is cleared after the event). When that answer already has Vio's order
+   * number, the event carries it too (`orderNumber`): it is the purchase's
+   * `order_id`, and analytics need not ask again.
    */
   async emitPaymentSuccess(detail, checkoutId, sponsorId, afterwards) {
     let done = false;
-    const finish = (buyerRef) => {
+    const sponsorAtStart = this.sponsorOfOrder(sponsorId, checkoutId);
+    const finish = (found = {}) => {
       if (done) return;
       done = true;
+      const named = this.sponsorOfOrder(sponsorId, checkoutId);
+      const sponsor = named.sponsor ? named : sponsorAtStart;
+      const withSponsor = sponsor.sponsor ? { ...detail, ...sponsor } : detail;
       const event = new CustomEvent("vio:payment-success", {
         bubbles: true,
         composed: true,
-        detail: buyerRef ? { ...detail, buyerRef } : detail
+        detail: found.buyerRef || found.orderNumber ? {
+          ...withSponsor,
+          ...found.buyerRef ? { buyerRef: found.buyerRef } : {},
+          ...found.orderNumber ? { orderNumber: found.orderNumber } : {}
+        } : withSponsor
       });
       this.dispatchEvent(event);
       if (!this.isConnected && typeof window !== "undefined") {
@@ -5537,7 +6335,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     };
     const known = buyerRefOf(detail);
     if (known || !checkoutId || !this.shouldAskBuyerRef(detail)) {
-      finish(known);
+      finish({ buyerRef: known });
       return;
     }
     const settleEarly = () => finish();
@@ -5569,8 +6367,9 @@ var _VioCheckout = class _VioCheckout extends LitElement {
    * failed or has neither the reference nor an order yet (the webhook has not
    * written the checkout), again at 1.2 s — all within 2.5 s. An order
    * without a reference is a settled answer: the backend has none, asking
-   * again cannot help. `undefined` when the time is up, when the answer
-   * stopped mattering (`stopped()`) or on failure.
+   * again cannot help. Whatever the answer said of the order number comes
+   * back with it. `{}` when the time is up, when the answer stopped mattering
+   * (`stopped()`) or on failure.
    */
   async askBuyerRef(checkoutId, sponsorId, stopped) {
     const started = Date.now();
@@ -5583,19 +6382,20 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       for (const at of [0, _VioCheckout.BUYER_REF_RETRY_AT_MS]) {
         const wait = Math.min(at - (Date.now() - started), remaining());
         if (wait > 0) await Promise.race([new Promise((resolve) => setTimeout(resolve, wait)), timeUp]);
-        if (stopped() || remaining() <= 0) return void 0;
+        if (stopped() || remaining() <= 0) return {};
         try {
           const reference = await Promise.race([
             Vio.checkout.getOrderReference(checkoutId, sponsorId || void 0),
             timeUp
           ]);
-          if (reference === null) return void 0;
-          if (reference.buyerRef) return reference.buyerRef;
-          if (reference.orderNumber !== null) return void 0;
+          if (reference === null) return {};
+          const order = reference.orderNumber ? { orderNumber: reference.orderNumber } : {};
+          if (reference.buyerRef) return { buyerRef: reference.buyerRef, ...order };
+          if (reference.orderNumber !== null) return order;
         } catch {
         }
       }
-      return void 0;
+      return {};
     } finally {
       clearTimeout(deadline);
     }
@@ -5712,7 +6512,10 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       >
         <div class="handle" @click=${this.close} aria-hidden="true"></div>
         <div class="topbar">
-          <h2 class="heading">${this.orderConfirmed ? "Takk!" : this.heading}</h2>
+          <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>
         </div>
 
@@ -5722,6 +6525,82 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       </div>
     `;
   }
+  /**
+   * Remember whose order this is and how it is named right now, before the
+   * cart that names it is cleared. Whose: the sponsor this tab remembered for
+   * the checkout when it was created (exact for that checkout id), else the
+   * one given (the return URL's `vio_sponsor`, the state it was paid in),
+   * else the open state's — a return without `vio_sponsor` (Qliro, Walley)
+   * re-opens the state with whichever cart comes first, which is a guess.
+   */
+  setOrderSponsor(sponsorId, checkoutId) {
+    try {
+      const checkout = checkoutId || void 0;
+      const id = rememberedCheckoutSponsor(checkout)?.sponsorId ?? (sponsorId && sponsorId > 0 ? sponsorId : void 0) ?? this.checkoutState?.sponsorId;
+      if (!id) return;
+      const named = checkoutSponsorOf(resolveSponsorIdentity(id, checkout));
+      const previous = this.orderSponsor;
+      const snapshot = named ?? (previous && previous.sponsorId === id ? previous.snapshot : void 0);
+      this.orderSponsor = { sponsorId: id, ...checkout ? { checkoutId: checkout } : {}, ...snapshot ? { snapshot } : {} };
+    } catch {
+    }
+  }
+  /**
+   * Who this checkout is with, as a shopper sees it: the order being
+   * confirmed / verified (`orderSponsor`), else the open checkout's own
+   * sponsor (`checkoutState.sponsorId`) — named by `Vio.sponsorIdentity`,
+   * which falls back to this tab's memory of the checkout and the cart; the
+   * name taken before the cart was cleared last. Never the page's
+   * attribution. `null` when nothing names it.
+   */
+  checkoutSponsorIdentity() {
+    const o = this.orderSponsor;
+    if (o) return checkoutSponsorOf(resolveSponsorIdentity(o.sponsorId, o.checkoutId)) ?? o.snapshot ?? null;
+    const s = this.checkoutState;
+    return s?.sponsorId ? checkoutSponsorOf(resolveSponsorIdentity(s.sponsorId, s.checkoutId)) ?? null : null;
+  }
+  /**
+   * `{ sponsor }` for the payment event — the same sponsor the screen names
+   * (`orderSponsor`, set by every path right before it emits): named now, else
+   * as named before the cart was cleared; `{}` when nothing names it.
+   */
+  sponsorOfOrder(sponsorId, checkoutId) {
+    try {
+      const o = this.orderSponsor;
+      const sameOrder = !!o && (o.checkoutId ?? void 0) === (checkoutId || void 0);
+      const id = sameOrder ? o.sponsorId : sponsorId > 0 ? sponsorId : void 0;
+      const live = sponsorDetail(id, checkoutId);
+      if (live.sponsor) return live;
+      if (sameOrder && o.snapshot) return { sponsor: o.snapshot };
+    } catch {
+    }
+    return {};
+  }
+  /**
+   * Ask once per checkout for the bootstrap when it is not there yet and a
+   * sponsor has to be named (a redirect return renders before it), then
+   * render again — the name and the logo appear when it lands.
+   */
+  watchSponsorBootstrap() {
+    if (this.sponsorBootstrapAsked || !this.open || Vio.bootstrapCache) return;
+    if (!this.orderSponsor && !this.checkoutState?.sponsorId) return;
+    this.sponsorBootstrapAsked = true;
+    void whenBootstrapped().then(() => this.requestUpdate());
+  }
+  /**
+   * The checkout's sponsor in the header — «Du handler hos <logo|name>»
+   * («Du har handlet hos» on a provider's receipt). Not on our own
+   * confirmation, which says it in its body.
+   */
+  renderTopbarSponsor() {
+    if (this.orderConfirmed) return nothing;
+    const sponsor = this.checkoutSponsorIdentity();
+    const mark = renderSponsorMark(this, sponsor, { logo: "topbar-sponsor-logo", name: "topbar-sponsor-name" });
+    if (mark === nothing) return nothing;
+    return html`<p class="topbar-sponsor" part="sponsor">
+      <span>${this.providerReceipt ? "Du har handlet hos" : "Du handler hos"}</span> ${mark}
+    </p>`;
+  }
   /**
    * The provider's receipt on its own. It must not depend on the cart: the
    * payment step is rendered from the cart, and clearing the cart after a
@@ -5749,6 +6628,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.confirmedMethod = method;
     this.open = true;
     const checkoutId = returnCheckoutId || this.checkoutState?.checkoutId;
+    this.setOrderSponsor(sponsorId, checkoutId);
     void this.emitPaymentSuccess(
       { method, sponsorId, result, checkoutId },
       checkoutId,
@@ -5777,19 +6657,24 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     details.push(["Betalingsm\xE5te", o?.paidWith || this.methodLabel(this.confirmedMethod)]);
     if (o?.providerRef) details.push([o.providerRef.label, o.providerRef.value]);
     if (email) details.push(["Kvittering til", email]);
+    const sponsor = this.checkoutSponsorIdentity();
     return html`
-      <section class="confirmation">
+      <section class="confirmation" part="confirmation">
+        ${usableLogo(sponsor) ? html`<div class="confirm-brand" part="sponsor">
+              ${renderSponsorMark(this, sponsor, { logo: "confirm-brand-logo", name: "confirm-brand-name" })}
+            </div>` : ""}
         <header class="confirm-head">
           <div class="confirm-check" aria-hidden="true">✓</div>
           <div>
-            <h3 class="confirm-title">Takk for bestillingen!</h3>
+            <h3 class="confirm-title" part="confirm-title">Takk for bestillingen!</h3>
+            ${sponsor?.name ? html`<p class="confirm-sponsor" part="confirm-sponsor">Du har handlet hos <strong>${sponsor.name}</strong>.</p>` : ""}
             <p class="confirm-text">
               Betalingen er bekreftet.${email ? html` Du får en ordrebekreftelse på e-post.` : ""}
             </p>
           </div>
         </header>
 
-        <dl class="confirm-details">
+        <dl class="confirm-details" part="confirm-details">
           ${details.map(
       ([k, v]) => html`<div><dt>${k}</dt><dd class=${k === o?.providerRef?.label ? "ref" : ""}>${v}</dd></div>`
     )}
@@ -6199,12 +7084,12 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     for (const delay of _VioCheckout.NEXI_DETAILS_DELAYS_MS) {
       if (delay) await new Promise((r) => setTimeout(r, delay));
       const o = await Vio.checkout.getNexiOrder(checkoutId, sponsorId).catch(() => null);
-      const current = this.confirmedOrder;
-      if (!current || current.providerRef?.value !== paymentId) return;
+      const current2 = this.confirmedOrder;
+      if (!current2 || current2.providerRef?.value !== paymentId) return;
       if (!o) continue;
       const paidWith = o.payment_method ? o.card_last4 ? `${o.payment_method} \u2022\u2022\u2022\u2022 ${o.card_last4}` : o.payment_method : void 0;
       this.confirmedOrder = {
-        ...current,
+        ...current2,
         ...paidWith ? { paidWith } : {},
         ...o.email ? { email: o.email } : {}
       };
@@ -6232,15 +7117,15 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     const options = this.nexiShipping?.options ?? [];
     if (options.length < 2) return "";
     const currency = this.checkoutState?.currency || getGlobalCurrency();
-    const current = this.nexiShipping?.shipping_id;
+    const current2 = this.nexiShipping?.shipping_id;
     return html`
       <div class="ship-select nexi-ship" role="radiogroup" aria-label="Frakt">
         ${options.map(
       (o) => html`
             <button
-              class="ship-opt ${current === o.id ? "active" : ""}"
+              class="ship-opt ${current2 === o.id ? "active" : ""}"
               role="radio"
-              aria-checked=${current === o.id}
+              aria-checked=${current2 === o.id}
               ?disabled=${this.nexiPicking}
               @click=${() => void this.onPickNexiShipping(o.id)}
             >
@@ -7075,6 +7960,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], _VioCheckout.prototype, "verifyingReturn", 2);
+__decorateClass([
+  state()
+], _VioCheckout.prototype, "orderSponsor", 2);
 __decorateClass([
   state()
 ], _VioCheckout.prototype, "confirmedOrder", 2);
@@ -7211,5 +8099,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-6Q2M3MIK.js.map
-//# sourceMappingURL=chunk-6Q2M3MIK.js.map
+//# sourceMappingURL=chunk-Q2NALS7P.js.map
+//# sourceMappingURL=chunk-Q2NALS7P.js.map