@vio-live/web-sdk 0.27.0 → 0.28.0

package/dist/{chunk-GLAKUYQA.js → chunk-Q2NALS7P.js}

@@ -1,4 +1,4 @@
-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-HJRIPCWB.js';
+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';
 
@@ -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;
@@ -1244,6 +1275,102 @@ __decorateClass([
   state()
 ], VioProductCarousel.prototype, "fetchError", 2);
 
+// 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
 function normalizeMethodName(name) {
   return String(name ?? "").toLowerCase().replace(/[^a-z]/g, "");
@@ -1451,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>'
@@ -1485,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;
@@ -1502,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;
@@ -1529,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() {
@@ -1616,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;
@@ -1637,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%);
@@ -1652,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;
@@ -1700,74 +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-color-text, #0a0a0a); }
-
-    /* Who sells it: the sponsor's logo, or its name — small, above everything. */
-    .sponsor-header {
-      grid-column: 1 / -1;
-      display: flex;
-      align-items: center;
-      min-height: 24px;
+    .gallery-thumb.active {
+      border-color: var(--vio-detail-thumb-active-color, var(--vio-color-text, #0a0a0a));
+      opacity: 1;
     }
-    .sponsor-logo {
-      display: block;
-      width: auto;
-      height: auto;
-      max-height: 28px;
-      max-width: 160px;
-      object-fit: contain;
+    .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;
     }
-    .sponsor-name {
-      font-size: 12px;
-      text-transform: uppercase;
-      letter-spacing: var(--vio-tracking-label, 0.1em);
-      color: var(--vio-color-text-secondary, #666);
-      font-weight: 600;
+    .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; }
     }
 
     /* 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;
@@ -1777,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;
@@ -1789,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;
@@ -1808,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;
@@ -1816,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;
@@ -1842,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;
@@ -1856,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;
@@ -1874,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);
@@ -1984,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
@@ -2052,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;
   }
@@ -2546,20 +3070,26 @@ 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(
@@ -2620,28 +3150,67 @@ var VioProductDetail = class extends LitElement {
     this.sellerSettled = true;
   }
   /**
-   * Who sells the product: the brand of the sponsor it was fetched with —
-   * its logo, with the name as `alt`. Without a logo that loads, the topbar
-   * already names the seller (its Company name, else the brand), so the name
-   * goes here only when the topbar names nobody once the seller is known —
-   * never the same name twice. Nothing at all when no identity is known.
+   * 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.
    */
-  renderSponsorHeader() {
+  renderTopbarSponsor() {
     const identity = resolveSponsorIdentity(this.sponsorId);
-    if (!identity) return nothing;
-    if (!usableLogo(identity) && (!this.sellerSettled || this.headerName())) return nothing;
-    const mark = renderSponsorMark(this, identity, { logo: "sponsor-logo", name: "sponsor-name" });
-    if (mark === nothing) return nothing;
-    return html`<div class="sponsor-header" part="sponsor">${mark}</div>`;
+    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()}
@@ -2673,45 +3242,90 @@ var VioProductDetail = class extends LitElement {
     const activeImage = this.activeImage;
     return html`
       <div class="body">
-        ${this.renderSponsorHeader()}
-        <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"
@@ -2732,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}
             >
@@ -2793,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>
@@ -2834,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] ?? "";
@@ -2844,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}
@@ -2923,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);
@@ -2974,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;
@@ -3004,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);
@@ -3033,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;
@@ -3354,6 +3971,7 @@ var VioCart = class extends LitElement {
   }
   disconnectedCallback() {
     Vio.cart.removeEventListener("change", this.boundOnCartChange);
+    this.bottomSheet.disconnect();
     super.disconnectedCallback();
   }
   close() {
@@ -3400,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;
@@ -3519,23 +4140,29 @@ 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(
@@ -3941,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;
@@ -4093,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);
@@ -4109,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);
@@ -4147,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;
@@ -4522,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;
@@ -4532,8 +5171,8 @@ 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. */
@@ -4541,13 +5180,12 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     .confirm-brand-logo {
       display: block;
       width: auto;
-      height: auto;
-      max-height: 32px;
-      max-width: 160px;
+      height: var(--vio-confirm-logo-height, 40px);
+      max-width: var(--vio-confirm-logo-max-width, 220px);
       object-fit: contain;
     }
     .confirm-sponsor {
-      font-size: 14px;
+      font-size: var(--vio-confirm-text-size, 14px);
       line-height: 1.4;
       color: var(--vio-color-text, #0a0a0a);
       margin: 4px 0 0;
@@ -4771,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;
@@ -5113,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();
     }
@@ -5569,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;
@@ -5657,12 +6302,14 @@ 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 sponsorAtStart = this.sponsorOfOrder(sponsorId, checkoutId);
-    const finish = (buyerRef) => {
+    const finish = (found = {}) => {
       if (done) return;
       done = true;
       const named = this.sponsorOfOrder(sponsorId, checkoutId);
@@ -5671,7 +6318,11 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       const event = new CustomEvent("vio:payment-success", {
         bubbles: true,
         composed: true,
-        detail: buyerRef ? { ...withSponsor, buyerRef } : withSponsor
+        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") {
@@ -5684,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();
@@ -5716,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();
@@ -5730,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);
     }
@@ -6006,22 +6659,22 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     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>
-            ${sponsor?.name ? html`<p class="confirm-sponsor">Du har handlet hos <strong>${sponsor.name}</strong>.</p>` : ""}
+            <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>`
     )}
@@ -6431,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 } : {}
       };
@@ -6464,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)}
             >
@@ -7446,5 +8099,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-GLAKUYQA.js.map
-//# sourceMappingURL=chunk-GLAKUYQA.js.map
+//# sourceMappingURL=chunk-Q2NALS7P.js.map
+//# sourceMappingURL=chunk-Q2NALS7P.js.map