@vio-live/web-sdk 0.1.0 → 0.3.0

package/dist/{chunk-4CCGE7DE.js → chunk-NWORYWIL.js}

@@ -1,133 +1,7 @@
-import { __decorateClass, Vio, primaryImageUrl, displayPrice, formatPrice, KLARNA_SHIPPING_OPTIONS } from './chunk-5SPY7TH6.js';
-import { css, LitElement, html } from 'lit';
-import { property, state, customElement, query } from 'lit/decorators.js';
+import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency, formatPrice, KLARNA_SHIPPING_OPTIONS } from './chunk-NP2KCM7X.js';
+import { LitElement, css, html } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
 
-// src/ui/tokens.ts
-var VioTokens = {
-  color: {
-    text: {
-      primary: "#0a0a0a",
-      secondary: "#666666",
-      tertiary: "#999999",
-      onPrimary: "#ffffff"
-    },
-    accent: {
-      editorial: "#c14a3b"
-      // "REDAKSJONENS FAVORITTER" red
-    },
-    surface: {
-      base: "#ffffff",
-      muted: "#f2f2f2",
-      // product image background
-      hover: "#fafafa"
-    },
-    border: {
-      subtle: "#e5e5e5",
-      default: "#cccccc"
-    }
-  },
-  font: {
-    serif: '"Tinos", "Playfair Display", Georgia, serif',
-    sans: '"Inter", -apple-system, "Helvetica Neue", Arial, sans-serif'
-  },
-  size: {
-    xs: "12px",
-    sm: "14px",
-    md: "16px",
-    lg: "20px",
-    xl: "24px",
-    "2xl": "32px",
-    "3xl": "40px"
-  },
-  weight: {
-    regular: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700
-  },
-  tracking: {
-    label: "0.1em",
-    // uppercase labels (BRAND, RETAILER, REDAKSJONENS FAVORITTER)
-    title: "0"
-  },
-  lineHeight: {
-    tight: 1.1,
-    snug: 1.3,
-    normal: 1.5
-  },
-  space: {
-    xs: "4px",
-    sm: "8px",
-    md: "16px",
-    lg: "24px",
-    xl: "32px",
-    "2xl": "48px",
-    "3xl": "64px"
-  },
-  radius: {
-    none: "0",
-    sm: "2px",
-    md: "4px",
-    lg: "8px",
-    full: "9999px"
-  }
-};
-var VIO_TOKENS_CSS = `
-  :root {
-    /* color \u2014 text */
-    --vio-color-text:           ${VioTokens.color.text.primary};
-    --vio-color-text-secondary: ${VioTokens.color.text.secondary};
-    --vio-color-text-tertiary:  ${VioTokens.color.text.tertiary};
-    --vio-color-text-on-primary:${VioTokens.color.text.onPrimary};
-
-    /* color \u2014 accent */
-    --vio-color-accent: ${VioTokens.color.accent.editorial};
-
-    /* color \u2014 surface */
-    --vio-color-surface:       ${VioTokens.color.surface.base};
-    --vio-color-surface-muted: ${VioTokens.color.surface.muted};
-    --vio-color-surface-hover: ${VioTokens.color.surface.hover};
-
-    /* color \u2014 border */
-    --vio-color-border:         ${VioTokens.color.border.subtle};
-    --vio-color-border-default: ${VioTokens.color.border.default};
-
-    /* font */
-    --vio-font-serif: ${VioTokens.font.serif};
-    --vio-font-sans:  ${VioTokens.font.sans};
-
-    /* size */
-    --vio-size-xs: ${VioTokens.size.xs};
-    --vio-size-sm: ${VioTokens.size.sm};
-    --vio-size-md: ${VioTokens.size.md};
-    --vio-size-lg: ${VioTokens.size.lg};
-    --vio-size-xl: ${VioTokens.size.xl};
-
-    /* tracking (uppercase letterspacing) */
-    --vio-tracking-label: ${VioTokens.tracking.label};
-
-    /* space */
-    --vio-space-xs: ${VioTokens.space.xs};
-    --vio-space-sm: ${VioTokens.space.sm};
-    --vio-space-md: ${VioTokens.space.md};
-    --vio-space-lg: ${VioTokens.space.lg};
-    --vio-space-xl: ${VioTokens.space.xl};
-
-    /* radius */
-    --vio-radius-sm: ${VioTokens.radius.sm};
-    --vio-radius-md: ${VioTokens.radius.md};
-    --vio-radius-lg: ${VioTokens.radius.lg};
-  }
-`;
-function injectTokens() {
-  if (typeof document === "undefined") return;
-  if (document.querySelector('style[data-vio="tokens"]') !== null) return;
-  const style = document.createElement("style");
-  style.setAttribute("data-vio", "tokens");
-  style.textContent = VIO_TOKENS_CSS;
-  document.head.appendChild(style);
-}
-injectTokens();
 var VioProduct = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -139,11 +13,124 @@ var VioProduct = class extends LitElement {
     this.productId = "";
     this.sponsorId = "";
     this.hasVariants = false;
+    this.variants = void 0;
+    this.options = void 0;
+    this.hideMeta = false;
     this.inCart = false;
     this.cartQty = 0;
     this.justAdded = false;
     this.boundCartChange = () => this.updateInCart();
   }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      cursor: pointer;
+      font-family: var(--vio-font-sans, -apple-system, sans-serif);
+      color: var(--vio-color-text, #0a0a0a);
+      -webkit-tap-highlight-color: transparent;
+    }
+    .card {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+    .image {
+      position: relative;
+      aspect-ratio: 1 / 1;
+      width: 100%;
+      background-color: var(--vio-color-surface-muted, #f2f2f2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      transition: opacity 0.2s ease;
+    }
+    :host(:hover) .image img { opacity: 0.92; }
+
+    /* Quick add-to-cart button — overlaid bottom-right of the image, like the
+       reference card's wishlist heart but wired to add the product to the cart. */
+    .add-btn {
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.96);
+      border: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: #0a0a0a;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
+      transition: transform 0.14s ease, background 0.14s ease, color 0.14s ease;
+      padding: 0;
+      z-index: 2;
+    }
+    .add-btn:hover { background: #fff; transform: scale(1.08); }
+    .add-btn:active { transform: scale(0.95); }
+    /* In cart → black circle with a white tick (matches the floating cart). */
+    .add-btn.in-cart { background: #0a0a0a; color: #fff; }
+    .add-btn.in-cart:hover { background: #222; }
+    .add-btn.pop { animation: vio-add-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
+    .add-btn svg { width: 18px; height: 18px; }
+    .add-btn .add-count { font-size: 15px; font-weight: 700; line-height: 1; }
+    @keyframes vio-add-pop {
+      0% { transform: scale(1); }
+      35% { transform: scale(1.32); }
+      60% { transform: scale(0.9); }
+      100% { transform: scale(1); }
+    }
+    .image img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+    .meta {
+      padding-top: 14px;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+    .brand {
+      font-size: var(--vio-size-xs, 12px);
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      text-transform: uppercase;
+      color: var(--vio-color-text-secondary, #666);
+      font-weight: 500;
+      margin-bottom: 6px;
+    }
+    .name {
+      font-size: var(--vio-size-md, 16px);
+      font-weight: 500;
+      line-height: 1.3;
+      margin: 0 0 10px;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .price {
+      font-size: var(--vio-size-md, 16px);
+      font-weight: 700;
+      margin-bottom: 16px;
+    }
+    .retailer {
+      font-size: var(--vio-size-xs, 12px);
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      text-transform: uppercase;
+      color: var(--vio-color-text-tertiary, #999);
+      font-weight: 500;
+      margin-top: auto;
+    }
+  `;
+  }
   connectedCallback() {
     super.connectedCallback();
     this.updateInCart();
@@ -201,7 +188,7 @@ var VioProduct = class extends LitElement {
    * `vio:product-add` so the host adds it (bumping quantity on repeat taps). */
   onAdd(e) {
     e.stopPropagation();
-    if (this.hasVariants) {
+    if (this.hasVariants || Array.isArray(this.variants) && this.variants.length > 1 || Array.isArray(this.options) && this.options.length > 0) {
       this.onClick();
       return;
     }
@@ -252,124 +239,17 @@ var VioProduct = class extends LitElement {
                 </svg>`}
           </button>
         </div>
+        ${this.hideMeta ? "" : html`
         <div class="meta">
           ${this.brand ? html`<div class="brand">${this.brand}</div>` : ""}
           ${this.name ? html`<div class="name">${this.name}</div>` : ""}
           ${this.price ? html`<div class="price">${this.price}</div>` : ""}
           ${this.retailer ? html`<div class="retailer">${this.retailer}</div>` : ""}
-        </div>
+        </div>`}
       </div>
     `;
   }
 };
-VioProduct.styles = css`
-    :host {
-      display: block;
-      box-sizing: border-box;
-      width: 100%;
-      cursor: pointer;
-      font-family: var(--vio-font-sans, -apple-system, sans-serif);
-      color: var(--vio-color-text, #0a0a0a);
-      -webkit-tap-highlight-color: transparent;
-    }
-    .card {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-    .image {
-      position: relative;
-      aspect-ratio: 1 / 1;
-      width: 100%;
-      background-color: var(--vio-color-surface-muted, #f2f2f2);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      transition: opacity 0.2s ease;
-    }
-    :host(:hover) .image img { opacity: 0.92; }
-
-    /* Quick add-to-cart button — overlaid bottom-right of the image, like the
-       reference card's wishlist heart but wired to add the product to the cart. */
-    .add-btn {
-      position: absolute;
-      right: 10px;
-      bottom: 10px;
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.96);
-      border: none;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      color: #0a0a0a;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
-      transition: transform 0.14s ease, background 0.14s ease, color 0.14s ease;
-      padding: 0;
-      z-index: 2;
-    }
-    .add-btn:hover { background: #fff; transform: scale(1.08); }
-    .add-btn:active { transform: scale(0.95); }
-    /* In cart → black circle with a white tick (matches the floating cart). */
-    .add-btn.in-cart { background: #0a0a0a; color: #fff; }
-    .add-btn.in-cart:hover { background: #222; }
-    .add-btn.pop { animation: vio-add-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
-    .add-btn svg { width: 18px; height: 18px; }
-    .add-btn .add-count { font-size: 15px; font-weight: 700; line-height: 1; }
-    @keyframes vio-add-pop {
-      0% { transform: scale(1); }
-      35% { transform: scale(1.32); }
-      60% { transform: scale(0.9); }
-      100% { transform: scale(1); }
-    }
-    .image img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      display: block;
-    }
-    .meta {
-      padding-top: 14px;
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-    }
-    .brand {
-      font-size: var(--vio-size-xs, 12px);
-      letter-spacing: var(--vio-tracking-label, 0.1em);
-      text-transform: uppercase;
-      color: var(--vio-color-text-secondary, #666);
-      font-weight: 500;
-      margin-bottom: 6px;
-    }
-    .name {
-      font-size: var(--vio-size-md, 16px);
-      font-weight: 500;
-      line-height: 1.3;
-      margin: 0 0 10px;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-    .price {
-      font-size: var(--vio-size-md, 16px);
-      font-weight: 700;
-      margin-bottom: 16px;
-    }
-    .retailer {
-      font-size: var(--vio-size-xs, 12px);
-      letter-spacing: var(--vio-tracking-label, 0.1em);
-      text-transform: uppercase;
-      color: var(--vio-color-text-tertiary, #999);
-      font-weight: 500;
-      margin-top: auto;
-    }
-  `;
 __decorateClass([
   property({ type: String })
 ], VioProduct.prototype, "brand", 2);
@@ -394,6 +274,15 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "has-variants" })
 ], VioProduct.prototype, "hasVariants", 2);
+__decorateClass([
+  property({ attribute: false })
+], VioProduct.prototype, "variants", 2);
+__decorateClass([
+  property({ attribute: false })
+], VioProduct.prototype, "options", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-meta" })
+], VioProduct.prototype, "hideMeta", 2);
 __decorateClass([
   state()
 ], VioProduct.prototype, "inCart", 2);
@@ -403,9 +292,6 @@ __decorateClass([
 __decorateClass([
   state()
 ], VioProduct.prototype, "justAdded", 2);
-VioProduct = __decorateClass([
-  customElement("vio-product")
-], VioProduct);
 var VioProductCarousel = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -423,158 +309,23 @@ var VioProductCarousel = class extends LitElement {
     this.isLoading = false;
     this.fetchError = "";
   }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.productRefs.trim() || this.productIds.trim()) {
-      void this.autoFetch();
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      font-family: var(--vio-font-sans, -apple-system, sans-serif);
+      color: var(--vio-color-text, #0a0a0a);
+      padding: var(--vio-space-xl, 32px) 0;
     }
-  }
-  updated(changed) {
-    const propChanged = changed.has("productRefs") || changed.has("productIds") || changed.has("commerceKey") || changed.has("sponsorId");
-    if (propChanged && (this.productRefs.trim() || this.productIds.trim())) {
-      void this.autoFetch();
-    }
-  }
-  async autoFetch() {
-    if (!Vio.isInitialized) {
-      this.fetchError = "Vio not initialized \u2014 call Vio.init({ apiKey }) first";
-      return;
-    }
-    this.isLoading = true;
-    this.fetchError = "";
-    try {
-      const refs = this.productRefs.trim() ? this.parseRefs(this.productRefs) : this.productIds.split(",").map((s) => parseInt(s.trim(), 10)).filter((n) => !Number.isNaN(n)).map((id) => ({ sponsorId: this.sponsorId, productId: id }));
-      if (refs.length === 0) {
-        this.fetched = [];
-        return;
-      }
-      const bySponsor = /* @__PURE__ */ new Map();
-      for (const r of refs) {
-        const arr = bySponsor.get(r.sponsorId) ?? [];
-        arr.push(r.productId);
-        bySponsor.set(r.sponsorId, arr);
-      }
-      const fetched = await Promise.all(
-        Array.from(bySponsor.entries()).map(async ([sponsorId, ids]) => {
-          const commerce = this.commerceKey && this.productRefs.trim() === "" ? Vio.commerceWithKey(this.commerceKey) : Vio.commerceFor(sponsorId);
-          const products = await commerce.channel.product.getByIds({
-            product_ids: ids,
-            currency: this.currency,
-            image_size: "large"
-          });
-          return { sponsorId, products };
-        })
-      );
-      const lookup = /* @__PURE__ */ new Map();
-      for (const { sponsorId, products } of fetched) {
-        for (const p of products) lookup.set(`${sponsorId}:${p.id}`, p);
-      }
-      this.fetched = refs.map(({ sponsorId, productId }) => {
-        const product = lookup.get(`${sponsorId}:${productId}`);
-        return product ? { product, sponsorId } : null;
-      }).filter((x) => x !== null);
-    } catch (err) {
-      this.fetchError = err instanceof Error ? err.message : String(err);
-    } finally {
-      this.isLoading = false;
-    }
-  }
-  parseRefs(raw) {
-    return raw.split(",").map((pair) => pair.trim()).filter((s) => s.length > 0).map((pair) => {
-      const [sidStr, pidStr] = pair.split(":");
-      const sid = parseInt((sidStr ?? "").trim(), 10);
-      const pid = parseInt((pidStr ?? "").trim(), 10);
-      if (Number.isNaN(sid) || Number.isNaN(pid)) return null;
-      return { sponsorId: sid, productId: pid };
-    }).filter((x) => x !== null);
-  }
-  scrollByDirection(direction) {
-    if (!this.scroller) return;
-    const item = this.scroller.querySelector(":scope > *");
-    const step = (item?.offsetWidth ?? 240) + 16;
-    this.scroller.scrollBy({ left: direction * step * 2, behavior: "smooth" });
-  }
-  renderScrollerContent() {
-    if (this.isLoading && !this.fetched) {
-      return html`${Array.from({ length: 5 }).map(
-        () => html`
-          <div class="skeleton">
-            <div class="skeleton-image"></div>
-            <div class="skeleton-text"></div>
-            <div class="skeleton-text shorter"></div>
-          </div>
-        `
-      )}`;
-    }
-    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 ?? "";
-        return html`
-          <vio-product
-            product-id=${String(p.id)}
-            sponsor-id=${String(sponsorId)}
-            brand=${p.brand ?? ""}
-            name=${p.title}
-            price=${displayPrice(p)}
-            retailer=${retailer}
-            image-url=${img}
-            ?has-variants=${(p.variants?.length ?? 0) > 1}
-          ></vio-product>
-        `;
-      })}`;
-    }
-    return html`<slot></slot>`;
-  }
-  render() {
-    return html`
-      <div class="header">
-        <div class="header-text">
-          ${this.label ? html`<div class="label">${this.label}</div>` : ""}
-          <div class="heading-row">
-            ${this.heading ? html`<h2 class="heading">${this.heading}</h2>` : ""}
-            ${this.disclaimer ? html`<span class="disclaimer">(${this.disclaimer})</span>` : ""}
-          </div>
-        </div>
-        ${this.seeAllHref ? html`<a class="see-all" href=${this.seeAllHref}>${this.seeAllLabel}</a>` : ""}
-      </div>
-      <div class="viewport">
-        <button
-          class="nav-btn prev"
-          @click=${() => this.scrollByDirection(-1)}
-          aria-label="Forrige"
-        >
-          ‹
-        </button>
-        <div class="scroller">${this.renderScrollerContent()}</div>
-        <button
-          class="nav-btn next"
-          @click=${() => this.scrollByDirection(1)}
-          aria-label="Neste"
-        >
-          ›
-        </button>
-      </div>
-      ${this.fetchError && !this.fetched ? html`<div class="state error">${this.fetchError}</div>` : ""}
-    `;
-  }
-};
-VioProductCarousel.styles = css`
-    :host {
-      display: block;
-      box-sizing: border-box;
-      width: 100%;
-      font-family: var(--vio-font-sans, -apple-system, sans-serif);
-      color: var(--vio-color-text, #0a0a0a);
-      padding: var(--vio-space-xl, 32px) 0;
-    }
-    .header {
-      display: flex;
-      align-items: flex-end;
-      justify-content: space-between;
-      gap: var(--vio-space-md, 16px);
-      margin-bottom: var(--vio-space-lg, 24px);
-      padding: 0 var(--vio-space-lg, 24px);
+    .header {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      gap: var(--vio-space-md, 16px);
+      margin-bottom: var(--vio-space-lg, 24px);
+      padding: 0 var(--vio-space-lg, 24px);
     }
     .header-text { flex: 1; min-width: 0; }
     .label {
@@ -702,445 +453,234 @@ VioProductCarousel.styles = css`
       50% { opacity: 0.5; }
     }
   `;
-__decorateClass([
-  property({ type: String })
-], VioProductCarousel.prototype, "label", 2);
-__decorateClass([
-  property({ type: String })
-], VioProductCarousel.prototype, "heading", 2);
-__decorateClass([
-  property({ type: String })
-], VioProductCarousel.prototype, "disclaimer", 2);
-__decorateClass([
-  property({ type: String, attribute: "see-all-href" })
-], VioProductCarousel.prototype, "seeAllHref", 2);
-__decorateClass([
-  property({ type: String, attribute: "see-all-label" })
-], VioProductCarousel.prototype, "seeAllLabel", 2);
-__decorateClass([
-  property({ type: String, attribute: "product-ids" })
-], VioProductCarousel.prototype, "productIds", 2);
-__decorateClass([
-  property({ type: String, attribute: "commerce-key" })
-], VioProductCarousel.prototype, "commerceKey", 2);
-__decorateClass([
-  property({ type: Number, attribute: "sponsor-id" })
-], VioProductCarousel.prototype, "sponsorId", 2);
-__decorateClass([
-  property({ type: String, attribute: "product-refs" })
-], VioProductCarousel.prototype, "productRefs", 2);
-__decorateClass([
-  property({ type: String })
-], VioProductCarousel.prototype, "currency", 2);
-__decorateClass([
-  query(".scroller")
-], VioProductCarousel.prototype, "scroller", 2);
-__decorateClass([
-  state()
-], VioProductCarousel.prototype, "fetched", 2);
-__decorateClass([
-  state()
-], VioProductCarousel.prototype, "isLoading", 2);
-__decorateClass([
-  state()
-], VioProductCarousel.prototype, "fetchError", 2);
-VioProductCarousel = __decorateClass([
-  customElement("vio-product-carousel")
-], VioProductCarousel);
-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;
-}
-var VioProductDetail = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.productId = "";
-    this.sponsorId = 0;
-    this.autoOpen = true;
-    this.currency = "NOK";
-    this.product = null;
-    this.isLoading = false;
-    this.fetchError = "";
-    this.selectedOptions = {};
-    this.quantity = 1;
-    this.activeImageIndex = 0;
-    this.adding = false;
-    this.applePayOk = false;
-    /** Pre-prepared Apple Pay handle — show() fires synchronously on tap. */
-    this.applePayHandle = null;
-    this.boundProductClick = (e) => {
-      if (!this.autoOpen) return;
-      const ev = e;
-      const productIdNum = parseInt(ev.detail.productId, 10);
-      if (Number.isNaN(productIdNum)) return;
-      const sponsorIdNum = parseInt(ev.detail.sponsorId, 10);
-      if (Number.isNaN(sponsorIdNum) || sponsorIdNum <= 0) return;
-      this.productId = ev.detail.productId;
-      this.sponsorId = sponsorIdNum;
-      this.show();
-      void this.fetchProduct();
-    };
   }
   connectedCallback() {
     super.connectedCallback();
-    document.addEventListener("vio:product-click", this.boundProductClick);
-  }
-  disconnectedCallback() {
-    document.removeEventListener("vio:product-click", this.boundProductClick);
-    super.disconnectedCallback();
-  }
-  show() {
-    this.open = true;
+    if (this.productRefs.trim() || this.productIds.trim()) {
+      void this.autoFetch();
+    }
   }
-  close() {
-    this.open = false;
-    setTimeout(() => {
-      if (!this.open) {
-        this.product = null;
-        this.selectedOptions = {};
-        this.quantity = 1;
-        this.activeImageIndex = 0;
-        this.fetchError = "";
-      }
-    }, 400);
+  updated(changed) {
+    const propChanged = changed.has("productRefs") || changed.has("productIds") || changed.has("commerceKey") || changed.has("sponsorId");
+    if (propChanged && (this.productRefs.trim() || this.productIds.trim())) {
+      void this.autoFetch();
+    }
   }
-  async fetchProduct() {
-    const productIdNum = parseInt(this.productId, 10);
-    if (Number.isNaN(productIdNum) || !this.sponsorId) {
-      this.product = null;
+  async autoFetch() {
+    if (!Vio.isInitialized) {
+      this.fetchError = "Vio not initialized \u2014 call Vio.init({ apiKey }) first";
       return;
     }
     this.isLoading = true;
     this.fetchError = "";
     try {
-      const commerce = Vio.commerceFor(this.sponsorId);
-      const products = await commerce.channel.product.getByIds({
-        product_ids: [productIdNum],
-        currency: this.currency,
-        image_size: "large"
-      });
-      this.product = products[0] ?? null;
-      if (this.product) {
-        const initial = {};
-        for (const opt of this.product.options) {
-          const values = normalizeValues(opt.values);
-          if (values.length > 0) initial[opt.name] = values[0];
-        }
-        this.selectedOptions = initial;
-        void Vio.checkout.prepareApplePayFor(this.unitPrice * this.quantity, this.currency).then((handle) => {
-          this.applePayHandle = handle;
-          this.applePayOk = handle.available;
-        }).catch(() => {
-          this.applePayHandle = null;
-          this.applePayOk = false;
-        });
-      }
-    } catch (err) {
-      this.fetchError = err instanceof Error ? err.message : String(err);
+      const refs = this.productRefs.trim() ? this.parseRefs(this.productRefs) : this.productIds.split(",").map((s) => parseInt(s.trim(), 10)).filter((n) => !Number.isNaN(n)).map((id) => ({ sponsorId: this.sponsorId, productId: id }));
+      if (refs.length === 0) {
+        this.fetched = [];
+        return;
+      }
+      const bySponsor = /* @__PURE__ */ new Map();
+      for (const r of refs) {
+        const arr = bySponsor.get(r.sponsorId) ?? [];
+        arr.push(r.productId);
+        bySponsor.set(r.sponsorId, arr);
+      }
+      const fetched = await Promise.all(
+        Array.from(bySponsor.entries()).map(async ([sponsorId, ids]) => {
+          const commerce = this.commerceKey && this.productRefs.trim() === "" ? Vio.commerceWithKey(this.commerceKey) : Vio.commerceFor(sponsorId);
+          const products = await commerce.channel.product.getByIds({
+            product_ids: ids,
+            currency: this.currency,
+            image_size: "large"
+          });
+          return { sponsorId, products };
+        })
+      );
+      const lookup = /* @__PURE__ */ new Map();
+      for (const { sponsorId, products } of fetched) {
+        for (const p of products) lookup.set(`${sponsorId}:${p.id}`, p);
+      }
+      this.fetched = refs.map(({ sponsorId, productId }) => {
+        const product = lookup.get(`${sponsorId}:${productId}`);
+        return product ? { product, sponsorId } : null;
+      }).filter((x) => x !== null);
+    } catch (err) {
+      this.fetchError = err instanceof Error ? err.message : String(err);
     } finally {
       this.isLoading = false;
     }
   }
-  /** Resolve the active variant from the selected option values. */
-  selectedVariant() {
-    if (!this.product || this.product.variants.length === 0) return null;
-    const vals = Object.values(this.selectedOptions);
-    if (vals.length === 0) return this.product.variants[0] ?? null;
-    const found = this.product.variants.find((v) => {
-      if (!v.title) return false;
-      return vals.every(
-        (val) => v.title.toLowerCase().includes(val.toLowerCase())
-      );
-    });
-    return found ?? this.product.variants[0] ?? null;
-  }
-  get unitPrice() {
-    const v = this.selectedVariant();
-    const price = v?.price ?? this.product?.price;
-    return price?.amount_incl_taxes ?? price?.amount ?? 0;
-  }
-  get compareAt() {
-    const v = this.selectedVariant();
-    const price = v?.price ?? this.product?.price;
-    return price?.compare_at_incl_taxes ?? price?.compare_at ?? null;
-  }
-  get availableQuantity() {
-    const v = this.selectedVariant();
-    if (v) return v.quantity ?? 0;
-    return this.product?.quantity ?? 0;
-  }
-  stockLabel() {
-    const qty = this.availableQuantity;
-    if (qty <= 0) return { text: "Utsolgt", cls: "out-of-stock" };
-    if (qty <= 3) return { text: `F\xE5 igjen \u2014 ${qty} stk`, cls: "low-stock" };
-    return { text: "P\xE5 lager", cls: "in-stock" };
-  }
-  selectOption(optionName, value) {
-    this.selectedOptions = { ...this.selectedOptions, [optionName]: value };
-  }
-  allImages() {
-    if (!this.product) return [];
-    const variantImages = this.selectedVariant()?.images ?? [];
-    if (variantImages.length > 0) return variantImages;
-    return this.product.images;
-  }
-  get activeImage() {
-    return this.allImages()[this.activeImageIndex];
-  }
-  /** Add the current product + selected variant + qty to the cart. Returns the variant id used. */
-  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;
-    Vio.cart.addProduct({
-      product: this.product,
-      sponsorId: this.sponsorId,
-      sponsorName,
-      quantity: this.quantity,
-      variantId: variant?.id
-    });
-    return variant?.id;
+  parseRefs(raw) {
+    return raw.split(",").map((pair) => pair.trim()).filter((s) => s.length > 0).map((pair) => {
+      const [sidStr, pidStr] = pair.split(":");
+      const sid = parseInt((sidStr ?? "").trim(), 10);
+      const pid = parseInt((pidStr ?? "").trim(), 10);
+      if (Number.isNaN(sid) || Number.isNaN(pid)) return null;
+      return { sponsorId: sid, productId: pid };
+    }).filter((x) => x !== null);
   }
-  async addToCart() {
-    if (!this.product || this.availableQuantity <= 0 || this.adding) return;
-    this.adding = true;
-    try {
-      const variantId = this.addCurrentToCart();
-      this.dispatchEvent(
-        new CustomEvent("vio:added-to-cart", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            productId: this.product.id,
-            sponsorId: this.sponsorId,
-            quantity: this.quantity,
-            variantId
-          }
-        })
-      );
-      this.close();
-    } finally {
-      this.adding = false;
-    }
+  scrollByDirection(direction) {
+    if (!this.scroller) return;
+    const item = this.scroller.querySelector(":scope > *");
+    const step = (item?.offsetWidth ?? 240) + 16;
+    this.scroller.scrollBy({ left: direction * step * 2, behavior: "smooth" });
   }
-  /**
-   * Express buy: add to cart, then open the checkout overlay with Klarna
-   * preselected. The host app handles `vio:checkout-open` (same event the cart
-   * uses) — the `paymentMethod` hint tells it to preselect Klarna so its widget
-   * loads immediately. Reuses the working Klarna Payments flow (no express SDK).
-   */
-  async buyWithKlarna() {
-    if (!this.product || this.availableQuantity <= 0 || this.adding) return;
-    this.adding = true;
-    try {
-      this.addCurrentToCart();
-      this.close();
-      this.dispatchEvent(
-        new CustomEvent("vio:checkout-open", {
-          bubbles: true,
-          composed: true,
-          detail: { sponsorId: this.sponsorId, paymentMethod: "klarna", express: true }
-        })
-      );
-    } finally {
-      this.adding = false;
+  renderScrollerContent() {
+    if (this.isLoading && !this.fetched) {
+      return html`${Array.from({ length: 5 }).map(
+        () => html`
+          <div class="skeleton">
+            <div class="skeleton-image"></div>
+            <div class="skeleton-text"></div>
+            <div class="skeleton-text shorter"></div>
+          </div>
+        `
+      )}`;
     }
-  }
-  /**
-   * Express buy with Apple Pay. Runs synchronously inside the click so the
-   * Apple Pay sheet keeps the user gesture: add to cart → open checkout (sets
-   * state) → launch the sheet. On authorize, `payment-complete` drives the
-   * confirmation drawer (same path as the in-checkout Apple Pay button).
-   */
-  buyWithApplePay() {
-    if (!this.product || this.availableQuantity <= 0 || !this.applePayHandle) return;
-    this.addCurrentToCart();
-    try {
-      Vio.checkout.open(this.sponsorId);
-    } catch (err) {
-      if (typeof console !== "undefined") {
-        console.warn("[VioProductDetail] checkout open failed:", err);
-      }
-      return;
+    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 ?? "";
+        return html`
+          <vio-product
+            product-id=${String(p.id)}
+            sponsor-id=${String(sponsorId)}
+            brand=${p.brand ?? ""}
+            name=${p.title}
+            price=${displayPrice(p)}
+            retailer=${retailer}
+            image-url=${img}
+            ?has-variants=${(p.variants?.length ?? 0) > 1}
+          ></vio-product>
+        `;
+      })}`;
     }
-    void this.applePayHandle.show();
-    this.close();
+    return html`<slot></slot>`;
   }
   render() {
     return html`
-      <div class="backdrop" @click=${this.close}></div>
-      <div class="modal" role="dialog" aria-label="Produkt">
-        <div class="handle" @click=${this.close} aria-hidden="true"></div>
-        <div class="topbar">
-          <span class="topbar-brand">${this.product?.brand ?? ""}</span>
-          <button class="close" @click=${this.close} aria-label="Lukk">×</button>
+      <div class="header">
+        <div class="header-text">
+          ${this.label ? html`<div class="label">${this.label}</div>` : ""}
+          <div class="heading-row">
+            ${this.heading ? html`<h2 class="heading">${this.heading}</h2>` : ""}
+            ${this.disclaimer ? html`<span class="disclaimer">(${this.disclaimer})</span>` : ""}
+          </div>
         </div>
-
-        ${this.renderBody()}
+        ${this.seeAllHref ? html`<a class="see-all" href=${this.seeAllHref}>${this.seeAllLabel}</a>` : ""}
+      </div>
+      <div class="viewport">
+        <button
+          class="nav-btn prev"
+          @click=${() => this.scrollByDirection(-1)}
+          aria-label="Forrige"
+        >
+          ‹
+        </button>
+        <div class="scroller">${this.renderScrollerContent()}</div>
+        <button
+          class="nav-btn next"
+          @click=${() => this.scrollByDirection(1)}
+          aria-label="Neste"
+        >
+          ›
+        </button>
       </div>
+      ${this.fetchError && !this.fetched ? html`<div class="state error">${this.fetchError}</div>` : ""}
     `;
   }
-  renderBody() {
-    if (this.isLoading && !this.product) {
-      return html`
-        <div class="skeleton" role="status" aria-busy="true" aria-label="Laster produkt">
-          <div class="sk-image"></div>
-          <div class="sk-line sk-brand"></div>
-          <div class="sk-line sk-title"></div>
-          <div class="sk-line sk-title-2"></div>
-          <div class="sk-line sk-price"></div>
-          <div class="sk-button"></div>
-        </div>
-      `;
-    }
-    if (this.fetchError) {
-      return html`<div class="error">Kunne ikke laste produkt: ${this.fetchError}</div>`;
-    }
-    if (!this.product) return html``;
-    const p = this.product;
-    const stock = this.stockLabel();
-    const compare = this.compareAt;
-    const showCompare = compare !== null && compare > this.unitPrice;
-    const images = this.allImages();
-    const activeImage = this.activeImage;
-    return html`
-      <div class="body">
-        <div class="gallery">
-          <div class="gallery-main">
-            ${activeImage?.url ? html`<img src=${activeImage.url} alt=${p.title} />` : ""}
-          </div>
-          ${images.length > 1 ? html`
-                <div class="gallery-thumbs">
-                  ${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>
-                    `
-    )}
-                </div>
-              ` : ""}
-        </div>
-
-        <div class="info">
-          ${p.brand ? html`<div class="brand">${p.brand}</div>` : ""}
-          <h2 class="name">${p.title}</h2>
-
-          <div class="price-row">
-            <span class="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>
-
-          ${this.renderOptionPickers(p.options)}
-
-          <div class="qty-cta-row">
-            <div class="qty-stepper">
-              <button
-                class="qty-btn"
-                @click=${() => this.quantity = Math.max(1, this.quantity - 1)}
-                aria-label="Reduser antall"
-              >
-                −
-              </button>
-              <span class="qty-value">${this.quantity}</span>
-              <button
-                class="qty-btn"
-                @click=${() => this.quantity = Math.min(this.availableQuantity, this.quantity + 1)}
-                aria-label="Øk antall"
-                ?disabled=${this.quantity >= this.availableQuantity}
-              >
-                +
-              </button>
-            </div>
-            <button
-              class="add-to-cart"
-              @click=${this.addToCart}
-              ?disabled=${this.availableQuantity <= 0 || this.adding}
-            >
-              ${this.adding ? "Legger til\u2026" : this.availableQuantity <= 0 ? "Utsolgt" : "Legg i handlekurv"}
-            </button>
-          </div>
-
-          ${this.availableQuantity > 0 && this.applePayOk ? html`
-                <button
-                  class="buy-applepay"
-                  @click=${this.buyWithApplePay}
-                  ?disabled=${this.adding}
-                  aria-label="Kjøp nå med Apple Pay"
-                >
-                  Kjøp nå med  Pay
-                </button>
-              ` : ""}
-          ${this.availableQuantity > 0 ? html`
-                <button
-                  class="buy-klarna"
-                  @click=${this.buyWithKlarna}
-                  ?disabled=${this.adding}
-                >
-                  <span>Kjøp nå med</span>
-                  <img
-                    class="klarna-badge"
-                    src="https://x.klarnacdn.net/payment-method/assets/badges/generic/klarna.svg"
-                    alt="Klarna"
-                  />
-                </button>
-              ` : ""}
-
-          ${p.description ? html`
-                <div>
-                  <div class="description-label">Beskrivelse</div>
-                  <div class="description">${this.stripHtml(p.description)}</div>
-                </div>
-              ` : ""}
-        </div>
-      </div>
-    `;
-  }
-  renderOptionPickers(options) {
-    if (options.length === 0) return "";
-    return html`${options.map((opt) => {
-      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">
-            ${values.map(
-        (val) => html`
-                <button
-                  class="option-pill"
-                  @click=${() => this.selectOption(opt.name, val)}
-                  aria-pressed=${this.selectedOptions[opt.name] === val}
-                >
-                  ${val}
-                </button>
-              `
-      )}
-          </div>
-        </div>
-      `;
-    })}`;
-  }
-  /** 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();
-  }
 };
-VioProductDetail.styles = css`
+__decorateClass([
+  property({ type: String })
+], VioProductCarousel.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], VioProductCarousel.prototype, "heading", 2);
+__decorateClass([
+  property({ type: String })
+], VioProductCarousel.prototype, "disclaimer", 2);
+__decorateClass([
+  property({ type: String, attribute: "see-all-href" })
+], VioProductCarousel.prototype, "seeAllHref", 2);
+__decorateClass([
+  property({ type: String, attribute: "see-all-label" })
+], VioProductCarousel.prototype, "seeAllLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "product-ids" })
+], VioProductCarousel.prototype, "productIds", 2);
+__decorateClass([
+  property({ type: String, attribute: "commerce-key" })
+], VioProductCarousel.prototype, "commerceKey", 2);
+__decorateClass([
+  property({ type: Number, attribute: "sponsor-id" })
+], VioProductCarousel.prototype, "sponsorId", 2);
+__decorateClass([
+  property({ type: String, attribute: "product-refs" })
+], VioProductCarousel.prototype, "productRefs", 2);
+__decorateClass([
+  property({ type: String })
+], VioProductCarousel.prototype, "currency", 2);
+__decorateClass([
+  query(".scroller")
+], VioProductCarousel.prototype, "scroller", 2);
+__decorateClass([
+  state()
+], VioProductCarousel.prototype, "fetched", 2);
+__decorateClass([
+  state()
+], VioProductCarousel.prototype, "isLoading", 2);
+__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;
+}
+var STRIPE_LOGO_SRC = "data:image/svg+xml;utf8," + encodeURIComponent(
+  '<svg width="360" height="150" viewBox="0 0 360 150" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M360 77.4001C360 51.8001 347.6 31.6001 323.9 31.6001C300.1 31.6001 285.7 51.8001 285.7 77.2001C285.7 107.3 302.7 122.5 327.1 122.5C339 122.5 348 119.8 354.8 116V96.0001C348 99.4001 340.2 101.5 330.3 101.5C320.6 101.5 312 98.1001 310.9 86.3001H359.8C359.8 85.0001 360 79.8001 360 77.4001ZM310.6 67.9001C310.6 56.6001 317.5 51.9001 323.8 51.9001C329.9 51.9001 336.4 56.6001 336.4 67.9001H310.6Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M247.1 31.6001C237.3 31.6001 231 36.2001 227.5 39.4001L226.2 33.2001H204.2V149.8L229.2 144.5L229.3 116.2C232.9 118.8 238.2 122.5 247 122.5C264.9 122.5 281.2 108.1 281.2 76.4001C281.1 47.4001 264.6 31.6001 247.1 31.6001ZM241.1 100.5C235.2 100.5 231.7 98.4001 229.3 95.8001L229.2 58.7001C231.8 55.8001 235.4 53.8001 241.1 53.8001C250.2 53.8001 256.5 64.0001 256.5 77.1001C256.5 90.5001 250.3 100.5 241.1 100.5Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M169.8 25.7L194.9 20.3V0L169.8 5.3V25.7Z" fill="#533AFD"/><path d="M194.9 33.3H169.8V120.8H194.9V33.3Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M142.9 40.7L141.3 33.3H119.7V120.8H144.7V61.5C150.6 53.8 160.6 55.2 163.7 56.3V33.3C160.5 32.1 148.8 29.9 142.9 40.7Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M92.8999 11.6001L68.4999 16.8001L68.3999 96.9001C68.3999 111.7 79.4999 122.6 94.2999 122.6C102.5 122.6 108.5 121.1 111.8 119.3V99.0001C108.6 100.3 92.7999 104.9 92.7999 90.1001V54.6001H111.8V33.3001H92.7999L92.8999 11.6001Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M25.3 58.7001C25.3 54.8001 28.5 53.3001 33.8 53.3001C41.4 53.3001 51 55.6001 58.6 59.7001V36.2001C50.3 32.9001 42.1 31.6001 33.8 31.6001C13.5 31.6001 0 42.2001 0 59.9001C0 87.5001 38 83.1001 38 95.0001C38 99.6001 34 101.1 28.4 101.1C20.1 101.1 9.5 97.7001 1.1 93.1001V116.9C10.4 120.9 19.8 122.6 28.4 122.6C49.2 122.6 63.5 112.3 63.5 94.4001C63.4 64.6001 25.3 69.9001 25.3 58.7001Z" fill="#533AFD"/></svg>'
+);
+var VioProductDetail = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.productId = "";
+    this.sponsorId = 0;
+    this.autoOpen = true;
+    this.currency = "NOK";
+    this.product = null;
+    this.isLoading = false;
+    this.fetchError = "";
+    this.selectedOptions = {};
+    this.quantity = 1;
+    this.activeImageIndex = 0;
+    this.adding = false;
+    this.applePayOk = false;
+    this.availableMethods = null;
+    /** Race guard: only the latest fetch may write state (two quick taps on
+     * different cards would otherwise let the slow response win). */
+    this.fetchSeq = 0;
+    /** Memoised option maps per variant object (recomputed per product). */
+    this.optMapCache = /* @__PURE__ */ new WeakMap();
+    /** Pre-prepared Apple Pay handle — show() fires synchronously on tap. */
+    this.applePayHandle = null;
+    this.boundProductClick = (e) => {
+      if (!this.autoOpen) return;
+      const ev = e;
+      const productIdNum = parseInt(ev.detail.productId, 10);
+      if (Number.isNaN(productIdNum)) return;
+      const sponsorIdNum = parseInt(ev.detail.sponsorId, 10);
+      if (Number.isNaN(sponsorIdNum) || sponsorIdNum <= 0) return;
+      this.productId = ev.detail.productId;
+      this.sponsorId = sponsorIdNum;
+      this.currency = ev.detail.currency || getGlobalCurrency();
+      this.show();
+      void this.fetchProduct();
+    };
+  }
+  static {
+    this.styles = css`
     :host { display: contents; }
 
     .backdrop {
@@ -1373,6 +913,13 @@ VioProductDetail.styles = css`
       background: var(--vio-color-text, #0a0a0a);
       color: var(--vio-color-text-on-primary, #fff);
     }
+    .option-pill.unavailable {
+      opacity: 0.4;
+      cursor: not-allowed;
+      text-decoration: line-through;
+      background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 5px, #f0f0f0 5px, #f0f0f0 10px);
+    }
+    .option-pill.unavailable:hover { border-color: var(--vio-color-border, #e5e5e5); }
 
     /* Qty + CTA row */
     .qty-cta-row {
@@ -1443,6 +990,35 @@ VioProductDetail.styles = css`
     .buy-klarna .klarna-badge { height: 22px; width: auto; display: block; }
     .buy-klarna:hover:not(:disabled) { background: #ffa0b9; }
     .buy-klarna:disabled { opacity: 0.5; cursor: not-allowed; }
+    .buy-applepay .ap-logo { width: 20px; height: 20px; }
+    /* Vipps — brand orange buy button. */
+    .buy-vipps {
+      width: 100%;
+      margin-top: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      background: #ff5b24;
+      color: #fff;
+      border: none;
+      padding: 14px 24px;
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      font-weight: 700;
+      cursor: pointer;
+      font-family: inherit;
+      transition: background 0.15s;
+    }
+    .buy-vipps .vipps-badge {
+      font-size: 20px;
+      font-weight: 800;
+      letter-spacing: -0.02em;
+      text-transform: none;
+    }
+    .buy-vipps:hover:not(:disabled) { background: #ec4f1c; }
+    .buy-vipps:disabled { opacity: 0.5; cursor: not-allowed; }
     /* Apple Pay express button — black, per Apple's button guidelines. Only
        shown in Safari (canApplePay). The  glyph is the Apple logo (Safari). */
     .buy-applepay {
@@ -1524,329 +1100,761 @@ VioProductDetail.styles = css`
       font-size: 14px;
     }
   `;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], VioProductDetail.prototype, "open", 2);
-__decorateClass([
-  property({ type: String, attribute: "product-id" })
-], VioProductDetail.prototype, "productId", 2);
-__decorateClass([
-  property({ type: Number, attribute: "sponsor-id" })
-], VioProductDetail.prototype, "sponsorId", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "auto-open" })
-], VioProductDetail.prototype, "autoOpen", 2);
-__decorateClass([
-  property({ type: String })
-], VioProductDetail.prototype, "currency", 2);
-__decorateClass([
-  state()
-], VioProductDetail.prototype, "product", 2);
-__decorateClass([
-  state()
-], VioProductDetail.prototype, "isLoading", 2);
-__decorateClass([
-  state()
-], VioProductDetail.prototype, "fetchError", 2);
-__decorateClass([
-  state()
-], VioProductDetail.prototype, "selectedOptions", 2);
-__decorateClass([
-  state()
-], VioProductDetail.prototype, "quantity", 2);
-__decorateClass([
-  state()
-], VioProductDetail.prototype, "activeImageIndex", 2);
-__decorateClass([
-  state()
-], VioProductDetail.prototype, "adding", 2);
-__decorateClass([
-  state()
-], VioProductDetail.prototype, "applePayOk", 2);
-VioProductDetail = __decorateClass([
-  customElement("vio-product-detail")
-], VioProductDetail);
-function normalizeValues(raw) {
-  if (Array.isArray(raw)) {
-    return raw.map((v) => String(v).trim()).filter((v) => v.length > 0);
   }
-  if (typeof raw === "string") {
-    return raw.split(",").map((v) => v.trim()).filter((v) => v.length > 0);
-  }
-  return [];
-}
-var VioCart = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.heading = "Handlekurv";
-    this.checkoutLabel = "Til kassen";
-    this.emptyLabel = "Handlekurven er tom";
-    this.subtotalLabel = "Sum";
-    this.carts = /* @__PURE__ */ new Map();
-    this.itemCount = 0;
-    this.applePayAvailable = false;
-    this.confirmedOrder = null;
-    /** Pre-resolved Apple Pay handle; `show()` fires the sheet synchronously. */
-    this.applePayHandle = null;
-    /** Cart total Apple Pay was last prepared for (avoids redundant prep). */
-    this.preparedTotal = -1;
-    this.boundOnCartChange = (e) => {
-      const detail = e.detail;
-      this.carts = detail.cartsBySponsor;
-      this.itemCount = detail.itemCount;
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.carts = Vio.cart.getAllCarts();
-    this.itemCount = Vio.cart.itemCount;
-    Vio.cart.addEventListener("change", this.boundOnCartChange);
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("vio:product-click", this.boundProductClick);
   }
   disconnectedCallback() {
-    Vio.cart.removeEventListener("change", this.boundOnCartChange);
+    document.removeEventListener("vio:product-click", this.boundProductClick);
     super.disconnectedCallback();
   }
-  close() {
-    this.open = false;
-  }
   show() {
     this.open = true;
   }
-  updated(changed) {
-    if (changed.has("open") && this.open) {
-      this.confirmedOrder = null;
-      this.preparedTotal = -1;
+  close() {
+    this.open = false;
+    setTimeout(() => {
+      if (!this.open) {
+        this.product = null;
+        this.selectedOptions = {};
+        this.quantity = 1;
+        this.activeImageIndex = 0;
+        this.fetchError = "";
+      }
+    }, 400);
+  }
+  async fetchProduct() {
+    const productIdNum = parseInt(this.productId, 10);
+    if (Number.isNaN(productIdNum) || !this.sponsorId) {
+      this.product = null;
+      return;
     }
-    if (this.open && this.itemCount > 0) {
-      const total = this.totalAcrossSponsors;
-      if (total !== this.preparedTotal) {
-        this.preparedTotal = total;
-        void this.refreshApplePay(total);
+    const seq = ++this.fetchSeq;
+    this.isLoading = true;
+    this.fetchError = "";
+    let products = null;
+    let lastError = null;
+    for (let attempt = 0; attempt < 4; attempt++) {
+      try {
+        const activeCurrency = getGlobalCurrency() || this.currency;
+        this.currency = activeCurrency;
+        const commerce = Vio.commerceFor(this.sponsorId);
+        products = await commerce.channel.product.getByIds({
+          product_ids: [productIdNum],
+          currency: activeCurrency,
+          image_size: "large"
+        });
+        lastError = null;
+        break;
+      } catch (err) {
+        lastError = err;
+        await new Promise((resolve) => setTimeout(resolve, 300));
       }
     }
-  }
-  /** Pre-resolve the Apple Pay sheet for the current cart total. */
-  async refreshApplePay(total) {
-    if (total <= 0) {
-      this.applePayHandle = null;
-      this.applePayAvailable = false;
+    if (seq !== this.fetchSeq) return;
+    if (lastError) {
+      this.fetchError = lastError instanceof Error ? lastError.message : String(lastError);
+      console.warn("[VioDetail] fetch failed after retries \u2192", this.fetchError);
+      this.isLoading = false;
       return;
     }
+    this.optMapCache = /* @__PURE__ */ new WeakMap();
+    this.product = products?.[0] ?? null;
+    if (!this.product) {
+      this.fetchError = "Fant ikke produktet.";
+    }
+    if (this.product) {
+      const initial = {};
+      for (const opt of this.product.options ?? []) {
+        const values = normalizeValues(opt.values);
+        if (values.length > 0) initial[opt.name] = values[0];
+      }
+      this.selectedOptions = initial;
+      void Vio.checkout.prepareApplePayFor(this.unitPrice * this.quantity, this.currency).then((handle) => {
+        this.applePayHandle = handle;
+        this.applePayOk = handle.available;
+      }).catch(() => {
+        this.applePayHandle = null;
+        this.applePayOk = false;
+      });
+      void this.loadAvailablePaymentMethods();
+    }
+    this.isLoading = false;
+  }
+  /** Which buy buttons to render — backend-configured per sponsor. */
+  async loadAvailablePaymentMethods() {
+    const spId = this.sponsorId || globalThis.__VIO_SPONSOR_ID__;
+    if (!spId) return;
     try {
-      const handle = await Vio.checkout.prepareApplePayExpress(total, this.primaryCurrency);
-      if (this.preparedTotal !== total) return;
-      this.applePayHandle = handle;
-      this.applePayAvailable = handle.available;
-    } catch {
-      this.applePayHandle = null;
-      this.applePayAvailable = false;
+      const methods = await Vio.checkout.getAvailablePaymentMethods(spId);
+      if (Array.isArray(methods)) {
+        this.availableMethods = methods.map((m) => m.name);
+      } else {
+        this.availableMethods = null;
+      }
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[VioProductDetail] Failed to load payment methods:", err);
+      }
+      this.availableMethods = null;
     }
   }
-  /** Apple Pay express — pay the whole cart, then show the confirmation. */
-  onApplePay() {
-    const handle = this.applePayHandle;
-    if (!handle || !handle.available || this.itemCount === 0) return;
-    const snapshot = this.buildConfirmation();
-    void handle.show().then((result) => {
-      if (!result) return;
-      this.confirmedOrder = snapshot;
-      for (const sponsorId of [...this.carts.keys()]) {
-        Vio.cart.clearSponsorCart(sponsorId);
+  /** Backend names arrive as e.g. "Apple Pay" — compare letters only. */
+  methodEnabled(...names) {
+    if (this.availableMethods === null) return true;
+    const norm = (s) => s.toLowerCase().replace(/[^a-z]/g, "");
+    return this.availableMethods.some((m) => names.some((n) => norm(m) === norm(n)));
+  }
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  /**
+   * Build an option-name → value map for a variant, from every shape the feeds
+   * ship: option1/2/3 columns, options/selected_options/variant arrays, plain
+   * object maps, and finally the title (value scan first, position fallback).
+   */
+  getVariantOptionMap(v, productOptions) {
+    if (v && typeof v === "object") {
+      const cached = this.optMapCache.get(v);
+      if (cached) return cached;
+    }
+    const map = {};
+    if (!v) return { map, titleParts: [] };
+    if (v.option1 != null && productOptions?.[0]) {
+      map[productOptions[0].name.toLowerCase()] = String(v.option1).trim().toLowerCase();
+    }
+    if (v.option2 != null && productOptions?.[1]) {
+      map[productOptions[1].name.toLowerCase()] = String(v.option2).trim().toLowerCase();
+    }
+    if (v.option3 != null && productOptions?.[2]) {
+      map[productOptions[2].name.toLowerCase()] = String(v.option3).trim().toLowerCase();
+    }
+    const optArray = Array.isArray(v.options) ? v.options : Array.isArray(v.selected_options) ? v.selected_options : Array.isArray(v.variant) ? v.variant : null;
+    if (optArray) {
+      for (const item of optArray) {
+        const key = (item.name || item.option || "").trim().toLowerCase();
+        const val = (item.value || "").trim().toLowerCase();
+        if (key && val) map[key] = val;
+      }
+    } else if (v.options && typeof v.options === "object") {
+      for (const [k, val] of Object.entries(v.options)) {
+        map[k.trim().toLowerCase()] = String(val).trim().toLowerCase();
+      }
+    }
+    const title = String(v.title ?? "").trim();
+    const titleLower = title.toLowerCase();
+    if (Array.isArray(productOptions)) {
+      for (const opt of productOptions) {
+        const key = opt.name.toLowerCase();
+        if (!map[key]) {
+          const rawValues = normalizeValues(opt.values).filter(
+            (val) => !productOptions.some(
+              (other) => other !== opt && normalizeValues(other.values).some(
+                (ov) => ov.trim().toLowerCase() === val.trim().toLowerCase()
+              )
+            )
+          );
+          const sortedVals = [...rawValues].sort((a, b) => b.length - a.length);
+          for (const valStr of sortedVals) {
+            const valLower = valStr.trim().toLowerCase();
+            const escaped = valLower.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+            const regex = new RegExp(`(?:^|[/|\\-,;\\s])${escaped}(?:$|[/|\\-,;\\s])`, "i");
+            if (regex.test(titleLower) || titleLower === valLower) {
+              map[key] = valLower;
+              break;
+            }
+          }
+        }
+      }
+    }
+    const titleParts = title.split(/\s*[/|,]\s*|\s+-\s+/).map((s) => s.trim()).filter(Boolean);
+    if (Array.isArray(productOptions)) {
+      productOptions.forEach((opt, idx) => {
+        const key = opt.name.toLowerCase();
+        if (!map[key] && titleParts[idx] != null) {
+          map[key] = titleParts[idx].toLowerCase();
+        }
+      });
+    }
+    const result = { map, titleParts };
+    if (v && typeof v === "object") this.optMapCache.set(v, result);
+    return result;
+  }
+  /** Option values a variant represents (map values ∪ title parts). */
+  variantOptionValues(v) {
+    const { map, titleParts } = this.getVariantOptionMap(v, this.product?.options);
+    const set = new Set(titleParts.map((s) => s.toLowerCase()));
+    for (const val of Object.values(map)) set.add(val);
+    return Array.from(set);
+  }
+  /** Does a variant part represent this option value? Exact match, plus a
+   * whole-token match ONLY for numeric values ("30" matches "30 ml") — word
+   * subsets of text values are not matches ("Large" must NOT match
+   * "Extra Large"). */
+  partMatchesValue(part, value) {
+    if (!part || !value) return false;
+    const p = String(part).trim().toLowerCase();
+    const v = String(value).trim().toLowerCase();
+    if (p === v) return true;
+    if (!/^[\d.,]+$/.test(v)) return false;
+    return p.split(/\s+/).includes(v);
+  }
+  /** Does a variant satisfy every currently-selected option value? */
+  variantMatchesSelection(v, selection) {
+    if (!v || !selection) return false;
+    const entries = Object.entries(selection);
+    if (entries.length === 0) return true;
+    const { map, titleParts } = this.getVariantOptionMap(v, this.product?.options);
+    const titlePartsLower = titleParts.map((t) => t.toLowerCase());
+    return entries.every(([optName, val]) => {
+      const key = optName.trim().toLowerCase();
+      const targetVal = String(val).trim().toLowerCase();
+      if (map[key]) {
+        return this.partMatchesValue(map[key], targetVal);
+      }
+      return titlePartsLower.some((part) => this.partMatchesValue(part, targetVal));
+    });
+  }
+  /** Sellable quantity for a variant, across the stock field zoo. Boolean
+   * availability flags win; a numeric field wins next; `null` = the feed does
+   * not report stock for this variant (callers fall back to product stock —
+   * never assume "in stock" from absent data). */
+  getVariantQty(v) {
+    if (!v) return 0;
+    if (v.available === false || v.in_stock === false || v.is_available === false) return 0;
+    if (v.available === true || v.in_stock === true || v.is_available === true) return 999;
+    const rawQty = v.quantity ?? v.inventory_quantity ?? v.stock ?? v.available_quantity ?? v.stock_quantity;
+    if (rawQty !== null && rawQty !== void 0 && rawQty !== "") {
+      const parsed = Number(rawQty);
+      if (!Number.isNaN(parsed)) return parsed;
+    }
+    return null;
+  }
+  /** Variant stock with the product-level fallback applied (0 = not sellable). */
+  variantSellableQty(v) {
+    const q = this.getVariantQty(v);
+    if (q !== null) return q;
+    return this.product?.quantity ?? 0;
+  }
+  /** Resolve the active variant: full in-stock match → full match → best score
+   * (2 per mapped option match, 1 per title match, +0.5 if in stock). */
+  selectedVariant() {
+    if (!this.product || !Array.isArray(this.product.variants) || this.product.variants.length === 0) {
+      return null;
+    }
+    const sel = this.selectedOptions;
+    const entries = Object.entries(sel);
+    if (entries.length === 0) return this.product.variants[0] ?? null;
+    const fullInStock = this.product.variants.find(
+      (v) => this.variantMatchesSelection(v, sel) && this.variantSellableQty(v) > 0
+    );
+    if (fullInStock) return fullInStock;
+    const full = this.product.variants.find((v) => this.variantMatchesSelection(v, sel));
+    if (full) return full;
+    let bestVariant = null;
+    let maxScore = -1;
+    for (const v of this.product.variants) {
+      const { map, titleParts } = this.getVariantOptionMap(v, this.product?.options);
+      const titlePartsLower = titleParts.map((t) => t.toLowerCase());
+      let score = 0;
+      for (const [optName, val] of entries) {
+        const key = optName.trim().toLowerCase();
+        const targetVal = String(val).trim().toLowerCase();
+        if (map[key] && this.partMatchesValue(map[key], targetVal)) {
+          score += 2;
+        } else if (titlePartsLower.some((part) => this.partMatchesValue(part, targetVal))) {
+          score += 1;
+        }
+      }
+      if (this.variantSellableQty(v) > 0) score += 0.5;
+      if (score > maxScore) {
+        maxScore = score;
+        bestVariant = v;
+      }
+    }
+    return bestVariant ?? this.product.variants[0] ?? null;
+  }
+  /** True if some in-stock variant carries this option value. */
+  isValueAvailable(optionName, value) {
+    if (!this.product || !Array.isArray(this.product.variants) || this.product.variants.length === 0) {
+      return true;
+    }
+    const valLower = String(value).trim().toLowerCase();
+    const key = optionName.trim().toLowerCase();
+    return this.product.variants.some((v) => {
+      const { map, titleParts } = this.getVariantOptionMap(v, this.product?.options);
+      if (this.variantSellableQty(v) <= 0) return false;
+      if (map[key]) return this.partMatchesValue(map[key], valLower);
+      return titleParts.some((part) => this.partMatchesValue(part.toLowerCase(), valLower));
+    });
+  }
+  get unitPrice() {
+    const v = this.selectedVariant();
+    const price = v?.price ?? this.product?.price;
+    return price?.amount_incl_taxes ?? price?.amount ?? 0;
+  }
+  get compareAt() {
+    const v = this.selectedVariant();
+    const price = v?.price ?? this.product?.price;
+    return price?.compare_at_incl_taxes ?? price?.compare_at ?? null;
+  }
+  get availableQuantity() {
+    const v = this.selectedVariant();
+    if (v) return this.variantSellableQty(v);
+    return this.product?.quantity ?? 0;
+  }
+  stockLabel() {
+    const qty = this.availableQuantity;
+    if (qty <= 0) return { text: "Utsolgt", cls: "out-of-stock" };
+    if (qty <= 3) return { text: `F\xE5 igjen \u2014 ${qty} stk`, cls: "low-stock" };
+    return { text: "P\xE5 lager", cls: "in-stock" };
+  }
+  /** Pick an option value. If the exact combination doesn't exist, jump to an
+   * in-stock variant that carries the value and adopt its full option map
+   * (keeps the selection always resolvable to a real variant). */
+  selectOption(optionName, value) {
+    const newSelection = { ...this.selectedOptions, [optionName]: value };
+    const exactInStock = this.product?.variants?.find(
+      (v) => this.variantMatchesSelection(v, newSelection) && this.variantSellableQty(v) > 0
+    );
+    if (exactInStock) {
+      this.selectedOptions = newSelection;
+      return;
+    }
+    const exactAnyStock = this.product?.variants?.find(
+      (v) => this.variantMatchesSelection(v, newSelection)
+    );
+    if (exactAnyStock) {
+      this.selectedOptions = newSelection;
+      return;
+    }
+    const valLower = String(value).trim().toLowerCase();
+    const key = optionName.trim().toLowerCase();
+    const anyInStockWithVal = this.product?.variants?.find((v) => {
+      const { map, titleParts } = this.getVariantOptionMap(v, this.product?.options);
+      if (this.variantSellableQty(v) <= 0) return false;
+      if (map[key]) return this.partMatchesValue(map[key], valLower);
+      return titleParts.some((p) => this.partMatchesValue(p.toLowerCase(), valLower));
+    });
+    if (anyInStockWithVal) {
+      const { map } = this.getVariantOptionMap(anyInStockWithVal, this.product?.options);
+      const updated = { ...newSelection };
+      for (const opt of this.product?.options ?? []) {
+        const k = opt.name.toLowerCase();
+        if (map[k]) {
+          const optValues = normalizeValues(opt.values);
+          const origCase = optValues.find((val) => val.toLowerCase() === map[k]) || map[k];
+          updated[opt.name] = origCase;
+        }
       }
+      this.selectedOptions = updated;
+    } else {
+      this.selectedOptions = newSelection;
+    }
+  }
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+  allImages() {
+    if (!this.product) return [];
+    const variantImages = this.selectedVariant()?.images ?? [];
+    if (variantImages.length > 0) return variantImages;
+    return this.product.images;
+  }
+  get activeImage() {
+    return this.allImages()[this.activeImageIndex];
+  }
+  /** Add the current product + selected variant + qty to the cart. Returns the variant id used. */
+  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;
+    Vio.cart.addProduct({
+      product: this.product,
+      sponsorId: this.sponsorId,
+      sponsorName,
+      quantity: this.quantity,
+      variantId: variant?.id
+    });
+    return variant?.id;
+  }
+  async addToCart() {
+    if (!this.product || this.availableQuantity <= 0 || this.adding) return;
+    this.adding = true;
+    try {
+      const variantId = this.addCurrentToCart();
       this.dispatchEvent(
-        new CustomEvent("vio:payment-success", {
+        new CustomEvent("vio:added-to-cart", {
           bubbles: true,
           composed: true,
-          detail: { method: "apple-pay", result }
+          detail: {
+            productId: this.product.id,
+            sponsorId: this.sponsorId,
+            quantity: this.quantity,
+            variantId
+          }
         })
       );
-    });
+      this.close();
+    } finally {
+      this.adding = false;
+    }
   }
-  buildConfirmation() {
-    const items = [];
-    for (const cart of this.carts.values()) {
-      for (const it of cart.items) {
-        items.push({
-          brand: it.brand,
-          name: it.name,
-          quantity: it.quantity,
-          unitPrice: it.unitPrice,
-          currency: it.currency
-        });
-      }
+  /**
+   * Express buy: add to cart, then open the checkout overlay with Klarna
+   * preselected. The host app handles `vio:checkout-open` (same event the cart
+   * uses) — the `paymentMethod` hint tells it to preselect Klarna so its widget
+   * loads immediately. Reuses the working Klarna Payments flow (no express SDK).
+   */
+  async buyWithKlarna() {
+    if (!this.product || this.availableQuantity <= 0 || this.adding) return;
+    this.adding = true;
+    try {
+      this.addCurrentToCart();
+      this.close();
+      this.dispatchEvent(
+        new CustomEvent("vio:checkout-open", {
+          bubbles: true,
+          composed: true,
+          detail: { sponsorId: this.sponsorId, paymentMethod: "klarna", express: true }
+        })
+      );
+    } finally {
+      this.adding = false;
     }
-    return { items, total: this.totalAcrossSponsors, currency: this.primaryCurrency };
   }
-  closeConfirmation() {
-    this.confirmedOrder = null;
+  /** Buy with Vipps — opens the checkout with Vipps preselected. */
+  buyWithVipps() {
+    if (!this.product || this.availableQuantity <= 0 || this.adding) return;
+    this.addCurrentToCart();
     this.close();
-  }
-  /** Klarna express — opens the side-drawer Klarna checkout for the whole cart,
-   * skipping the address form (leveringsadresse) and method picker
-   * (betalingsmetode). The host's checkout-open handler closes this cart and
-   * opens <vio-checkout> in express mode with Klarna preselected. */
-  onKlarnaExpress() {
-    if (this.itemCount === 0) return;
-    const firstSponsorId = [...this.carts.keys()][0];
-    if (firstSponsorId === void 0) return;
     this.dispatchEvent(
       new CustomEvent("vio:checkout-open", {
         bubbles: true,
         composed: true,
-        detail: { sponsorId: firstSponsorId, paymentMethod: "klarna", express: true }
+        detail: { sponsorId: this.sponsorId, paymentMethod: "vipps", express: false }
       })
     );
   }
-  get totalAcrossSponsors() {
-    let sum = 0;
-    for (const cart of this.carts.values()) {
-      for (const item of cart.items) sum += item.unitPrice * item.quantity;
-    }
-    return sum;
-  }
-  get primaryCurrency() {
-    for (const cart of this.carts.values()) return cart.currency;
-    return "NOK";
-  }
-  onIncrement(item) {
-    Vio.cart.updateQuantity(item.id, item.sponsorId, item.quantity + 1);
-  }
-  onDecrement(item) {
-    Vio.cart.updateQuantity(item.id, item.sponsorId, item.quantity - 1);
+  /** Buy with Stripe — opens the checkout with Stripe preselected. */
+  buyWithStripe() {
+    if (!this.product || this.availableQuantity <= 0 || this.adding) return;
+    this.addCurrentToCart();
+    this.close();
+    this.dispatchEvent(
+      new CustomEvent("vio:checkout-open", {
+        bubbles: true,
+        composed: true,
+        detail: { sponsorId: this.sponsorId, paymentMethod: "stripe", express: false }
+      })
+    );
   }
-  onRemove(item) {
-    Vio.cart.removeItem(item.id, item.sponsorId);
+  /**
+   * Express buy with Apple Pay. Runs synchronously inside the click so the
+   * Apple Pay sheet keeps the user gesture: add to cart → open checkout (sets
+   * state) → launch the sheet. On authorize, `payment-complete` drives the
+   * confirmation drawer (same path as the in-checkout Apple Pay button).
+   */
+  buyWithApplePay() {
+    if (!this.product || this.availableQuantity <= 0 || !this.applePayHandle) return;
+    this.addCurrentToCart();
+    try {
+      Vio.checkout.open(this.sponsorId);
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[VioProductDetail] checkout open failed:", err);
+      }
+      return;
+    }
+    void this.applePayHandle.show();
+    this.close();
   }
   render() {
-    const isEmpty = this.itemCount === 0;
-    const sponsorCarts = [...this.carts.values()].filter((c) => c.items.length > 0);
     return html`
       <div class="backdrop" @click=${this.close}></div>
-      <aside class="drawer" role="dialog" aria-label=${this.heading}>
+      <div class="modal" role="dialog" aria-label="Produkt">
         <div class="handle" @click=${this.close} aria-hidden="true"></div>
-        <div class="header">
-          <h2 class="heading">${this.confirmedOrder ? "Takk!" : this.heading}</h2>
+        <div class="topbar">
+          <span class="topbar-brand">${this.product?.brand ?? ""}</span>
           <button class="close" @click=${this.close} aria-label="Lukk">×</button>
         </div>
 
-        ${this.confirmedOrder ? this.renderConfirmation() : isEmpty ? html`<div class="empty">${this.emptyLabel}</div>` : html`
-              <div class="body">
-                ${sponsorCarts.map(
-      (cart) => html`
-                    <div class="sponsor-group">
-                      ${cart.sponsorName ? html`<div class="sponsor-label">${cart.sponsorName}</div>` : ""}
-                      ${cart.items.map(
-        (item) => html`
-                          <div class="item">
-                            <div class="item-image">
-                              ${item.imageUrl ? html`<img src=${item.imageUrl} alt=${item.name} />` : ""}
-                            </div>
-                            <div>
-                              <div class="item-brand">${item.brand}</div>
-                              <div class="item-name">${item.name}</div>
-                              <div class="item-row">
-                                <span class="item-qty">
-                                  <button
-                                    class="qty-btn"
-                                    @click=${() => this.onDecrement(item)}
-                                    aria-label="Reduser"
-                                  >
-                                    −
-                                  </button>
-                                  ${item.quantity}
-                                  <button
-                                    class="qty-btn"
-                                    @click=${() => this.onIncrement(item)}
-                                    aria-label="Øk"
-                                  >
-                                    +
-                                  </button>
-                                  <button
-                                    class="qty-btn"
-                                    @click=${() => this.onRemove(item)}
-                                    aria-label="Fjern"
-                                    style="margin-left: 8px;"
-                                  >
-                                    ×
-                                  </button>
-                                </span>
-                                <span class="item-price">
-                                  ${formatPrice(
-          item.unitPrice * item.quantity,
-          item.currency
-        )}
-                                </span>
-                              </div>
-                            </div>
-                          </div>
-                        `
-      )}
-                    </div>
-                  `
-    )}
-              </div>
-              <div class="footer">
-                <div class="subtotal-row">
-                  <span class="subtotal-label">${this.subtotalLabel}</span>
-                  <span class="subtotal-value">
-                    ${formatPrice(this.totalAcrossSponsors, this.primaryCurrency)}
-                  </span>
-                </div>
-                ${this.applePayAvailable ? html`
+        ${this.renderBody()}
+      </div>
+    `;
+  }
+  renderBody() {
+    if (this.isLoading && !this.product) {
+      return html`
+        <div class="skeleton" role="status" aria-busy="true" aria-label="Laster produkt">
+          <div class="sk-image"></div>
+          <div class="sk-line sk-brand"></div>
+          <div class="sk-line sk-title"></div>
+          <div class="sk-line sk-title-2"></div>
+          <div class="sk-line sk-price"></div>
+          <div class="sk-button"></div>
+        </div>
+      `;
+    }
+    if (this.fetchError) {
+      return html`<div class="error">Kunne ikke laste produkt: ${this.fetchError}</div>`;
+    }
+    if (!this.product) return html``;
+    const p = this.product;
+    const stock = this.stockLabel();
+    const compare = this.compareAt;
+    const showCompare = compare !== null && compare > this.unitPrice;
+    const images = this.allImages();
+    const activeImage = this.activeImage;
+    return html`
+      <div class="body">
+        <div class="gallery">
+          <div class="gallery-main">
+            ${activeImage?.url ? html`<img src=${activeImage.url} alt=${p.title} />` : ""}
+          </div>
+          ${images.length > 1 ? html`
+                <div class="gallery-thumbs">
+                  ${images.map(
+      (img, idx) => html`
                       <button
-                        class="applepay-btn"
-                        @click=${this.onApplePay}
-                        aria-label="Betal med Apple Pay"
+                        class="gallery-thumb ${idx === this.activeImageIndex ? "active" : ""}"
+                        @click=${() => this.activeImageIndex = idx}
+                        aria-label=${`Bilde ${idx + 1}`}
                       >
-                        <span class="ap-logo">${"\uF8FF"}</span> Pay
+                        <img src=${img.url} alt="" />
                       </button>
-                    ` : ""}
+                    `
+    )}
+                </div>
+              ` : ""}
+        </div>
+
+        <div class="info">
+          ${p.brand ? html`<div class="brand">${p.brand}</div>` : ""}
+          <h2 class="name">${p.title}</h2>
+
+          <div class="price-row">
+            <span class="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>
+
+          ${this.renderOptionPickers(p.options)}
+
+          <div class="qty-cta-row">
+            <div class="qty-stepper">
+              <button
+                class="qty-btn"
+                @click=${() => this.quantity = Math.max(1, this.quantity - 1)}
+                aria-label="Reduser antall"
+              >
+                −
+              </button>
+              <span class="qty-value">${this.quantity}</span>
+              <button
+                class="qty-btn"
+                @click=${() => this.quantity = Math.min(this.availableQuantity, this.quantity + 1)}
+                aria-label="Øk antall"
+                ?disabled=${this.quantity >= this.availableQuantity}
+              >
+                +
+              </button>
+            </div>
+            <button
+              class="add-to-cart"
+              @click=${this.addToCart}
+              ?disabled=${this.availableQuantity <= 0 || this.adding}
+            >
+              ${this.adding ? "Legger til\u2026" : this.availableQuantity <= 0 ? "Utsolgt" : "Legg i handlekurv"}
+            </button>
+          </div>
+
+          ${this.availableQuantity > 0 && this.applePayOk && this.methodEnabled("apple-pay", "applepay") ? html`
+                <button
+                  class="buy-applepay"
+                  @click=${this.buyWithApplePay}
+                  ?disabled=${this.adding}
+                  aria-label="Kjøp nå med Apple Pay"
+                >
+                  <span>Kjøp nå med</span>
+                  <svg class="ap-logo" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
+                  <span>Apple Pay</span>
+                </button>
+              ` : ""}
+          ${this.availableQuantity > 0 && this.methodEnabled("stripe") ? html`
+                <button
+                  class="buy-stripe"
+                  @click=${this.buyWithStripe}
+                  ?disabled=${this.adding}
+                  aria-label="Kjøp nå med Stripe"
+                  style="width: 100%; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; background: #635bff; color: #fff; border: none; padding: 14px 24px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;"
+                >
+                  <span>Kjøp nå med</span>
+                  <img
+                    src=${STRIPE_LOGO_SRC}
+                    style="height: 20px; display: block; filter: brightness(0) invert(1);"
+                    alt="Stripe"
+                  />
+                </button>
+              ` : ""}
+          ${this.availableQuantity > 0 && this.methodEnabled("klarna") ? html`
                 <button
-                  class="klarna-btn"
-                  @click=${this.onKlarnaExpress}
-                  aria-label="Betal med Klarna"
+                  class="buy-klarna"
+                  @click=${this.buyWithKlarna}
+                  ?disabled=${this.adding}
                 >
-                  Kjøp med
+                  <span>Kjøp nå med</span>
                   <img
-                    class="klarna-logo"
+                    class="klarna-badge"
                     src="https://x.klarnacdn.net/payment-method/assets/badges/generic/klarna.svg"
                     alt="Klarna"
                   />
                 </button>
-              </div>
-            `}
-      </aside>
+              ` : ""}
+
+          ${this.availableQuantity > 0 && this.methodEnabled("vipps") ? 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>
+              ` : ""}
+
+          ${p.description ? html`
+                <div>
+                  <div class="description-label">Beskrivelse</div>
+                  <div class="description">${this.stripHtml(p.description)}</div>
+                </div>
+              ` : ""}
+        </div>
+      </div>
     `;
   }
-  renderConfirmation() {
-    const o = this.confirmedOrder;
-    if (!o) return html``;
-    return html`
-      <div class="confirm">
-        <div class="confirm-check" aria-hidden="true">✓</div>
-        <h3>Takk for handelen!</h3>
-        <p>Betaling med Apple Pay er bekreftet.</p>
-        <div class="confirm-summary">
-          ${o.items.map(
-      (it) => html`
-              <div class="order-row">
-                <span>${it.brand ? `${it.brand} ` : ""}${it.name} ×${it.quantity}</span>
-                <span>${formatPrice(it.unitPrice * it.quantity, it.currency)}</span>
-              </div>
-            `
-    )}
-          <div class="order-row total">
-            <span>Totalt</span>
-            <span>${formatPrice(o.total, o.currency)}</span>
+  renderOptionPickers(options) {
+    if (options.length === 0) return "";
+    return html`${options.map((opt) => {
+      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">
+            ${values.map((val) => {
+        const available = this.isValueAvailable(opt.name, val);
+        const currentVal = this.selectedOptions[opt.name] ?? "";
+        const isSelected = String(currentVal).trim().toLowerCase() === String(val).trim().toLowerCase();
+        return html`
+                <button
+                  class="option-pill ${available ? "" : "unavailable"}"
+                  @click=${() => this.selectOption(opt.name, val)}
+                  aria-pressed=${isSelected}
+                  ?disabled=${!available}
+                  title=${available ? "" : "Utsolgt"}
+                >
+                  ${val}
+                </button>
+              `;
+      })}
           </div>
         </div>
-        <button class="confirm-close" @click=${this.closeConfirmation}>Lukk</button>
-      </div>
-    `;
+      `;
+    })}`;
+  }
+  /** 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();
   }
 };
-VioCart.styles = css`
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], VioProductDetail.prototype, "open", 2);
+__decorateClass([
+  property({ type: String, attribute: "product-id" })
+], VioProductDetail.prototype, "productId", 2);
+__decorateClass([
+  property({ type: Number, attribute: "sponsor-id" })
+], VioProductDetail.prototype, "sponsorId", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "auto-open" })
+], VioProductDetail.prototype, "autoOpen", 2);
+__decorateClass([
+  property({ type: String })
+], VioProductDetail.prototype, "currency", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "product", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "isLoading", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "fetchError", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "selectedOptions", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "quantity", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "activeImageIndex", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "adding", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "applePayOk", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "availableMethods", 2);
+function normalizeValues(raw) {
+  if (Array.isArray(raw)) {
+    return raw.map((v) => String(v).trim()).filter((v) => v.length > 0);
+  }
+  if (typeof raw === "string") {
+    return raw.split(",").map((v) => v.trim()).filter((v) => v.length > 0);
+  }
+  return [];
+}
+var STRIPE_LOGO_SRC2 = "data:image/svg+xml;utf8," + encodeURIComponent(
+  '<svg width="360" height="150" viewBox="0 0 360 150" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M360 77.4001C360 51.8001 347.6 31.6001 323.9 31.6001C300.1 31.6001 285.7 51.8001 285.7 77.2001C285.7 107.3 302.7 122.5 327.1 122.5C339 122.5 348 119.8 354.8 116V96.0001C348 99.4001 340.2 101.5 330.3 101.5C320.6 101.5 312 98.1001 310.9 86.3001H359.8C359.8 85.0001 360 79.8001 360 77.4001ZM310.6 67.9001C310.6 56.6001 317.5 51.9001 323.8 51.9001C329.9 51.9001 336.4 56.6001 336.4 67.9001H310.6Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M247.1 31.6001C237.3 31.6001 231 36.2001 227.5 39.4001L226.2 33.2001H204.2V149.8L229.2 144.5L229.3 116.2C232.9 118.8 238.2 122.5 247 122.5C264.9 122.5 281.2 108.1 281.2 76.4001C281.1 47.4001 264.6 31.6001 247.1 31.6001ZM241.1 100.5C235.2 100.5 231.7 98.4001 229.3 95.8001L229.2 58.7001C231.8 55.8001 235.4 53.8001 241.1 53.8001C250.2 53.8001 256.5 64.0001 256.5 77.1001C256.5 90.5001 250.3 100.5 241.1 100.5Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M169.8 25.7L194.9 20.3V0L169.8 5.3V25.7Z" fill="#533AFD"/><path d="M194.9 33.3H169.8V120.8H194.9V33.3Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M142.9 40.7L141.3 33.3H119.7V120.8H144.7V61.5C150.6 53.8 160.6 55.2 163.7 56.3V33.3C160.5 32.1 148.8 29.9 142.9 40.7Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M92.8999 11.6001L68.4999 16.8001L68.3999 96.9001C68.3999 111.7 79.4999 122.6 94.2999 122.6C102.5 122.6 108.5 121.1 111.8 119.3V99.0001C108.6 100.3 92.7999 104.9 92.7999 90.1001V54.6001H111.8V33.3001H92.7999L92.8999 11.6001Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M25.3 58.7001C25.3 54.8001 28.5 53.3001 33.8 53.3001C41.4 53.3001 51 55.6001 58.6 59.7001V36.2001C50.3 32.9001 42.1 31.6001 33.8 31.6001C13.5 31.6001 0 42.2001 0 59.9001C0 87.5001 38 83.1001 38 95.0001C38 99.6001 34 101.1 28.4 101.1C20.1 101.1 9.5 97.7001 1.1 93.1001V116.9C10.4 120.9 19.8 122.6 28.4 122.6C49.2 122.6 63.5 112.3 63.5 94.4001C63.4 64.6001 25.3 69.9001 25.3 58.7001Z" fill="#533AFD"/></svg>'
+);
+var VioCart = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.heading = "Handlekurv";
+    this.emptyLabel = "Handlekurven er tom";
+    this.subtotalLabel = "Sum";
+    this.carts = /* @__PURE__ */ new Map();
+    this.itemCount = 0;
+    this.applePayAvailable = false;
+    this.availableMethods = null;
+    this.confirmedOrder = null;
+    /** Pre-resolved Apple Pay handle; `show()` fires the sheet synchronously. */
+    this.applePayHandle = null;
+    /** Cart total Apple Pay was last prepared for (avoids redundant prep). */
+    this.preparedTotal = -1;
+    /** In-flight guard for loadAvailablePaymentMethods. */
+    this.loadingPaymentMethods = false;
+    this.boundOnCartChange = (e) => {
+      const detail = e.detail;
+      this.carts = detail.cartsBySponsor;
+      this.itemCount = detail.itemCount;
+      if (this.availableMethods === null) {
+        void this.loadAvailablePaymentMethods();
+      }
+    };
+  }
+  static {
+    this.styles = css`
     :host { display: contents; }
 
     .backdrop {
@@ -2029,27 +2037,7 @@ VioCart.styles = css`
     .subtotal-label { color: var(--vio-color-text-secondary, #666); }
     .subtotal-value { font-weight: 700; font-size: 16px; }
 
-    .checkout-btn {
-      width: 100%;
-      padding: 18px;
-      background: var(--vio-color-text, #0a0a0a);
-      color: var(--vio-color-text-on-primary, #fff);
-      border: none;
-      font-size: 12px;
-      text-transform: uppercase;
-      letter-spacing: var(--vio-tracking-label, 0.1em);
-      cursor: pointer;
-      font-weight: 600;
-      font-family: var(--vio-font-sans, -apple-system, sans-serif);
-      transition: background 0.15s;
-    }
-    .checkout-btn:hover:not(:disabled) { background: #222; }
-    .checkout-btn:disabled {
-      background: var(--vio-color-text-tertiary, #999);
-      cursor: not-allowed;
-    }
-
-    /* Apple Pay express — pay the whole cart directly, above "Til kassen". */
+    /* Apple Pay express — pay the whole cart directly. */
     .applepay-btn {
       width: 100%;
       padding: 15px;
@@ -2070,7 +2058,7 @@ VioCart.styles = css`
       transition: opacity 0.15s;
     }
     .applepay-btn:hover { opacity: 0.86; }
-    .applepay-btn .ap-logo { font-size: 19px; line-height: 1; }
+    .applepay-btn .ap-logo { width: 20px; height: 20px; }
     /* Klarna express — pink brand button, same express row as Apple Pay. */
     .klarna-btn {
       width: 100%;
@@ -2092,23 +2080,50 @@ VioCart.styles = css`
     }
     .klarna-btn:hover { background: #ffa1ba; }
     .klarna-btn .klarna-logo { height: 15px; width: auto; display: inline-block; }
-    .express-divider {
+    /* Vipps — brand orange button, same express row. */
+    .vipps-btn {
+      width: 100%;
+      padding: 15px;
+      margin-bottom: 10px;
+      background: #ff5b24;
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
       display: flex;
       align-items: center;
-      gap: 12px;
-      margin: 4px 0 12px;
-      color: var(--vio-color-text-tertiary, #999);
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
+      justify-content: center;
+      font-family: var(--vio-font-sans, -apple-system, sans-serif);
+      transition: background 0.15s;
     }
-    .express-divider::before,
-    .express-divider::after {
-      content: '';
-      flex: 1;
-      height: 1px;
-      background: var(--vio-color-border, #e5e5e5);
+    .vipps-btn:hover { background: #ec4f1c; }
+    .vipps-btn .vipps-logo {
+      font-size: 20px;
+      font-weight: 800;
+      letter-spacing: -0.02em;
+      line-height: 1;
+    }
+    /* Stripe — brand blurple button, same express row. */
+    .stripe-btn {
+      width: 100%;
+      padding: 15px;
+      margin-bottom: 10px;
+      background: #635bff;
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      font-family: var(--vio-font-sans, -apple-system, sans-serif);
+      transition: background 0.15s;
     }
+    .stripe-btn:hover { background: #5248ff; }
+    .stripe-btn .stripe-logo { height: 20px; width: auto; display: inline-block; filter: brightness(0) invert(1); }
 
     /* In-drawer confirmation after Apple Pay (nothing else is shown). */
     .confirm {
@@ -2177,601 +2192,454 @@ VioCart.styles = css`
     }
     .confirm-close:hover { background: #222; }
   `;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], VioCart.prototype, "open", 2);
-__decorateClass([
-  property({ type: String })
-], VioCart.prototype, "heading", 2);
-__decorateClass([
-  property({ type: String, attribute: "checkout-label" })
-], VioCart.prototype, "checkoutLabel", 2);
-__decorateClass([
-  property({ type: String, attribute: "empty-label" })
-], VioCart.prototype, "emptyLabel", 2);
-__decorateClass([
-  property({ type: String, attribute: "subtotal-label" })
-], VioCart.prototype, "subtotalLabel", 2);
-__decorateClass([
-  state()
-], VioCart.prototype, "carts", 2);
-__decorateClass([
-  state()
-], VioCart.prototype, "itemCount", 2);
-__decorateClass([
-  state()
-], VioCart.prototype, "applePayAvailable", 2);
-__decorateClass([
-  state()
-], VioCart.prototype, "confirmedOrder", 2);
-VioCart = __decorateClass([
-  customElement("vio-cart")
-], VioCart);
-var VioCheckout = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.heading = "Kasse";
-    this.shippingLabel = "Beregnes ved kasse";
-    this.express = false;
-    this.checkoutState = null;
-    this.items = [];
-    this.applePayAvailable = false;
-    this.applePayInProgress = false;
-    this.klarnaAvailable = false;
-    this.orderConfirmed = false;
-    this.confirmedMethod = null;
-    this.paymentError = null;
-    this.confirmedOrder = null;
-    /** Active Klarna Payments widget handle + the subtotal it was mounted for. */
-    this.klarnaHandle = null;
-    this.klarnaMountedAmount = null;
-    this.klarnaMountedShipping = null;
-    this.klarnaMounting = false;
-    this.klarnaCategories = [];
-    this.klarnaSelectedCat = "";
-    this.klarnaAuthorizing = false;
-    this.selectedShipping = KLARNA_SHIPPING_OPTIONS.find((o) => o.preselected)?.id ?? KLARNA_SHIPPING_OPTIONS[0]?.id ?? "";
-    this.form = {
-      firstName: "",
-      lastName: "",
-      email: "",
-      address: "",
-      postalCode: "",
-      city: ""
-    };
-    this.boundOnCheckoutChange = (e) => {
-      const detail = e.detail;
-      this.checkoutState = detail.state;
-      this.items = Vio.checkout.items;
-      if (this.checkoutState) {
-        this.refreshApplePay();
-        this.refreshKlarna();
-      } else {
-        this.applePayAvailable = false;
-        this.klarnaAvailable = false;
-        this.orderConfirmed = false;
-        this.confirmedMethod = null;
-        this.confirmedOrder = null;
-        this.paymentError = null;
-        this.express = false;
-        this.unmountKlarna();
-      }
-    };
-    this.boundOnPaymentComplete = (e) => {
-      const detail = e.detail;
-      if (detail.method !== "klarna" && detail.method !== "apple-pay") return;
-      const sponsorId = detail.state?.sponsorId ?? this.checkoutState?.sponsorId;
-      if (sponsorId == null) return;
-      this.confirmOrder(detail.method, sponsorId, detail.result);
-    };
-    this.boundOnPaymentError = (e) => {
-      const detail = e.detail;
-      this.paymentError = detail.method === "klarna" ? `Klarna-betalingen kunne ikke fullf\xF8res: ${detail.error}` : detail.error;
-      this.open = true;
-    };
   }
   connectedCallback() {
     super.connectedCallback();
-    this.checkoutState = Vio.checkout.currentState;
-    this.items = Vio.checkout.items;
-    Vio.checkout.addEventListener("change", this.boundOnCheckoutChange);
-    Vio.checkout.addEventListener("payment-complete", this.boundOnPaymentComplete);
-    Vio.checkout.addEventListener("payment-error", this.boundOnPaymentError);
-    if (this.checkoutState) {
-      void this.refreshApplePay();
-      void this.refreshKlarna();
-    }
-  }
-  disconnectedCallback() {
-    Vio.checkout.removeEventListener("change", this.boundOnCheckoutChange);
-    Vio.checkout.removeEventListener("payment-complete", this.boundOnPaymentComplete);
-    Vio.checkout.removeEventListener("payment-error", this.boundOnPaymentError);
-    this.unmountKlarna();
-    super.disconnectedCallback();
+    this.carts = Vio.cart.getAllCarts();
+    this.itemCount = Vio.cart.itemCount;
+    Vio.cart.addEventListener("change", this.boundOnCartChange);
+    void this.loadAvailablePaymentMethods();
   }
-  updated() {
-    void this.mountKlarnaIfNeeded();
+  disconnectedCallback() {
+    Vio.cart.removeEventListener("change", this.boundOnCartChange);
+    super.disconnectedCallback();
   }
   close() {
     this.open = false;
-    this.express = false;
-    Vio.checkout.close();
   }
   show() {
     this.open = true;
+    void this.loadAvailablePaymentMethods();
   }
-  async refreshApplePay() {
-    Vio.checkout.clearApplePayCache();
-    this.applePayAvailable = await Vio.checkout.isApplePayAvailable("NO");
-  }
-  async refreshKlarna() {
-    const available = await Vio.checkout.klarnaPaymentsAvailable();
-    if (available !== this.klarnaAvailable) {
-      if (!available) this.unmountKlarna();
-      this.klarnaAvailable = available;
-    }
-  }
-  /** Mount (or re-mount on amount change) the Klarna Payments widget. */
-  async mountKlarnaIfNeeded() {
-    if (!this.klarnaAvailable || !this.open || !this.checkoutState) return;
-    if (this.checkoutState.paymentMethod !== "klarna" && !this.express) return;
-    if (this.klarnaMounting) return;
-    const amount = this.checkoutState.subtotal;
-    if (this.klarnaHandle && this.klarnaMountedAmount === amount && this.klarnaMountedShipping === this.selectedShipping) {
+  /** Which payment buttons to render — backend-configured per sponsor.
+   * Falls back to showing everything if the query fails or none is set. */
+  async loadAvailablePaymentMethods() {
+    if (this.loadingPaymentMethods) return;
+    this.loadingPaymentMethods = true;
+    const firstSponsorId = [...this.carts.keys()][0] ?? globalThis.__VIO_SPONSOR_ID__;
+    if (firstSponsorId === void 0) {
+      this.loadingPaymentMethods = false;
       return;
     }
-    const container = this.renderRoot?.querySelector(
-      "#vio-klarna-payments-container"
-    );
-    if (!container) return;
-    this.klarnaMounting = true;
-    this.unmountKlarna();
-    container.innerHTML = "";
     try {
-      const handle = await Vio.checkout.mountKlarnaPayments(container, {
-        withShipping: this.express,
-        shippingId: this.selectedShipping
-      });
-      this.klarnaHandle = handle;
-      this.klarnaMountedAmount = amount;
-      this.klarnaMountedShipping = this.selectedShipping;
-      this.klarnaCategories = handle.categories;
-      this.klarnaSelectedCat = handle.selected;
+      const methods = await Vio.checkout.getAvailablePaymentMethods(firstSponsorId);
+      if (Array.isArray(methods)) {
+        this.availableMethods = methods.map((m) => m.name);
+      } else {
+        this.availableMethods = null;
+      }
     } catch (err) {
       if (typeof console !== "undefined") {
-        console.warn("[VioCheckout] Klarna Payments mount failed:", err);
+        console.warn("[VioCart] Failed to load payment methods:", err);
       }
-      this.paymentError = `Kunne ikke laste Klarna: ${err instanceof Error ? err.message : String(err)}`;
+      this.availableMethods = null;
     } finally {
-      this.klarnaMounting = false;
-    }
-  }
-  unmountKlarna() {
-    if (this.klarnaHandle) {
-      this.klarnaHandle.unmount();
-      this.klarnaHandle = null;
+      this.loadingPaymentMethods = false;
     }
-    this.klarnaMountedAmount = null;
-    this.klarnaMountedShipping = null;
-    this.klarnaCategories = [];
-    this.klarnaSelectedCat = "";
-    this.klarnaAuthorizing = false;
   }
-  /** Selected shipping option (express flow). */
-  get shippingOption() {
-    return KLARNA_SHIPPING_OPTIONS.find((o) => o.id === this.selectedShipping) ?? null;
-  }
-  /** Pick a shipping option → re-mounts the Klarna widget with the new total. */
-  onSelectShipping(id) {
-    if (this.selectedShipping === id || this.klarnaMounting) return;
-    this.selectedShipping = id;
+  /** Backend names arrive as e.g. "Apple Pay" — compare letters only. */
+  methodEnabled(name) {
+    if (this.availableMethods === null) return true;
+    const norm = (s) => s.toLowerCase().replace(/[^a-z]/g, "");
+    return this.availableMethods.some((m) => norm(m) === norm(name));
   }
-  /** Switch the Klarna widget to a different payment_method_category. */
-  async onKlarnaCategory(identifier) {
-    if (!this.klarnaHandle || this.klarnaSelectedCat === identifier) return;
-    this.klarnaSelectedCat = identifier;
-    try {
-      await this.klarnaHandle.load(identifier);
-    } catch (err) {
-      if (typeof console !== "undefined") {
-        console.warn("[VioCheckout] Klarna category switch failed:", err);
+  updated(changed) {
+    if (changed.has("open") && this.open) {
+      this.confirmedOrder = null;
+      this.preparedTotal = -1;
+    }
+    if (this.open && this.itemCount > 0) {
+      const total = this.totalAcrossSponsors;
+      if (total !== this.preparedTotal) {
+        this.preparedTotal = total;
+        void this.refreshApplePay(total);
       }
     }
   }
-  /** Authorize the selected Klarna method → backend creates the order. */
-  async onKlarnaAuthorize() {
-    if (!this.klarnaHandle || this.klarnaAuthorizing) return;
-    this.paymentError = null;
-    this.klarnaAuthorizing = true;
+  /** Pre-resolve the Apple Pay sheet for the current cart total. */
+  async refreshApplePay(total) {
+    if (total <= 0) {
+      this.applePayHandle = null;
+      this.applePayAvailable = false;
+      return;
+    }
     try {
-      await this.klarnaHandle.authorize();
-    } finally {
-      this.klarnaAuthorizing = false;
+      const handle = await Vio.checkout.prepareApplePayExpress(total, this.primaryCurrency);
+      if (this.preparedTotal !== total) return;
+      this.applePayHandle = handle;
+      this.applePayAvailable = handle.available;
+    } catch {
+      this.applePayHandle = null;
+      this.applePayAvailable = false;
     }
   }
-  onFieldChange(field, value) {
-    this.form = { ...this.form, [field]: value };
-    Vio.checkout.setAddress(this.form);
+  /** Apple Pay express — pay the whole cart, then show the confirmation. */
+  onApplePay() {
+    const handle = this.applePayHandle;
+    if (!handle || !handle.available || this.itemCount === 0) return;
+    const snapshot = this.buildConfirmation();
+    void handle.show().then((result) => {
+      if (!result) return;
+      this.confirmedOrder = snapshot;
+      for (const sponsorId of [...this.carts.keys()]) {
+        Vio.cart.clearSponsorCart(sponsorId);
+      }
+      this.dispatchEvent(
+        new CustomEvent("vio:payment-success", {
+          bubbles: true,
+          composed: true,
+          detail: { method: "apple-pay", result }
+        })
+      );
+    });
   }
-  async onApplePay() {
-    if (this.applePayInProgress) return;
-    this.applePayInProgress = true;
-    try {
-      await Vio.checkout.startApplePay({ country: "NO", label: "Vio" });
-    } catch (err) {
-      if (typeof console !== "undefined") {
-        console.warn("[VioCheckout] Apple Pay flow ended:", err);
+  buildConfirmation() {
+    const items = [];
+    for (const cart of this.carts.values()) {
+      for (const it of cart.items) {
+        items.push({
+          brand: it.brand,
+          name: it.name,
+          quantity: it.quantity,
+          unitPrice: it.unitPrice,
+          currency: it.currency
+        });
       }
-    } finally {
-      this.applePayInProgress = false;
     }
+    return { items, total: this.totalAcrossSponsors, currency: this.primaryCurrency };
   }
-  onPay(method) {
-    this.paymentError = null;
-    if (method === "apple-pay") {
-      void this.onApplePay();
-      return;
-    }
-    Vio.checkout.selectPaymentMethod(method);
+  closeConfirmation() {
+    this.confirmedOrder = null;
+    this.close();
   }
-  /**
-   * Complete the order for the selected method (Vipps / Card / plain Klarna).
-   * Apple Pay and Klarna Express finish inside their own sheet/popup, so they
-   * never reach here. No real PSP is wired for Vipps/Card in this iteration —
-   * the capture happens backend-side in the full flow — so this confirms the
-   * order state-only and shows the confirmation screen.
-   */
-  onCompleteOrder() {
-    const s = this.checkoutState;
-    if (!s || !s.paymentMethod) return;
-    this.confirmOrder(s.paymentMethod, s.sponsorId);
+  /** Klarna express — opens the side-drawer Klarna checkout for the whole cart,
+   * skipping the address form (leveringsadresse) and method picker
+   * (betalingsmetode). The host's checkout-open handler closes this cart and
+   * opens <vio-checkout> in express mode with Klarna preselected. */
+  onKlarnaExpress() {
+    if (this.itemCount === 0) return;
+    const firstSponsorId = [...this.carts.keys()][0];
+    if (firstSponsorId === void 0) return;
+    this.dispatchEvent(
+      new CustomEvent("vio:checkout-open", {
+        bubbles: true,
+        composed: true,
+        detail: { sponsorId: firstSponsorId, paymentMethod: "klarna", express: true }
+      })
+    );
   }
-  /**
-   * Shared order confirmation — reached from both the plain "Betal" CTA
-   * (Vipps/Card/Klarna) and the Klarna Express authorize callback. Shows
-   * the confirmation screen, emits `vio:payment-success`, and clears the
-   * paid sponsor's cart so the badge + drawer reflect the purchase.
-   */
-  confirmOrder(method, sponsorId, result) {
-    const r = result ?? {};
-    this.confirmedOrder = {
-      items: [...this.items],
-      currency: this.checkoutState?.currency ?? "",
-      total: typeof r.chargedTotal === "number" ? r.chargedTotal : this.checkoutState?.subtotal ?? 0,
-      orderId: r.order?.orderId
-    };
-    this.confirmedMethod = method;
-    this.orderConfirmed = true;
-    this.open = true;
+  /** Vipps — opens the checkout with Vipps preselected. */
+  onVipps() {
+    if (this.itemCount === 0) return;
+    const firstSponsorId = [...this.carts.keys()][0];
+    if (firstSponsorId === void 0) return;
     this.dispatchEvent(
-      new CustomEvent("vio:payment-success", {
+      new CustomEvent("vio:checkout-open", {
         bubbles: true,
         composed: true,
-        detail: { method, sponsorId, result }
+        detail: { sponsorId: firstSponsorId, paymentMethod: "vipps", express: false }
       })
     );
-    Vio.cart.clearSponsorCart(sponsorId);
   }
-  methodLabel(method) {
-    switch (method) {
-      case "apple-pay":
-        return "Apple Pay";
-      case "klarna":
-        return "Klarna";
-      case "vipps":
-        return "Vipps";
-      case "card":
-        return "kort";
-      default:
-        return "";
+  /** Stripe — opens the checkout with Stripe preselected. */
+  onStripe() {
+    if (this.itemCount === 0) return;
+    const firstSponsorId = [...this.carts.keys()][0];
+    if (firstSponsorId === void 0) return;
+    this.dispatchEvent(
+      new CustomEvent("vio:checkout-open", {
+        bubbles: true,
+        composed: true,
+        detail: { sponsorId: firstSponsorId, paymentMethod: "stripe", express: false }
+      })
+    );
+  }
+  get totalAcrossSponsors() {
+    let sum = 0;
+    for (const cart of this.carts.values()) {
+      for (const item of cart.items) sum += item.unitPrice * item.quantity;
     }
+    return sum;
   }
-  /** True for methods that complete via a separate sheet/widget, not the CTA. */
-  isExpressMethod(method) {
-    return method === "apple-pay" || method === "klarna";
+  get primaryCurrency() {
+    for (const cart of this.carts.values()) return cart.currency;
+    return "NOK";
   }
-  orderTotal() {
-    const s = this.checkoutState;
-    if (!s) return "";
-    return formatPrice(s.subtotal, s.currency);
+  onIncrement(item) {
+    Vio.cart.updateQuantity(item.id, item.sponsorId, item.quantity + 1);
   }
-  /** Shipping cost (major units) applied in express mode, else 0. */
-  shippingMajor() {
-    return this.express ? (this.shippingOption?.price ?? 0) / 100 : 0;
+  onDecrement(item) {
+    Vio.cart.updateQuantity(item.id, item.sponsorId, item.quantity - 1);
   }
-  /** Total to charge — items + shipping (express). */
-  payTotalLabel() {
-    const s = this.checkoutState;
-    if (!s) return "";
-    return formatPrice(s.subtotal + this.shippingMajor(), s.currency);
+  onRemove(item) {
+    Vio.cart.removeItem(item.id, item.sponsorId);
   }
   render() {
+    const isEmpty = this.itemCount === 0;
+    const sponsorCarts = [...this.carts.values()].filter((c) => c.items.length > 0);
     return html`
       <div class="backdrop" @click=${this.close}></div>
-      <div
-        class="modal ${this.express ? "as-side" : this.orderConfirmed ? "as-confirm" : ""}"
-        role="dialog"
-        aria-label=${this.heading}
-      >
+      <aside class="drawer" role="dialog" aria-label=${this.heading}>
         <div class="handle" @click=${this.close} aria-hidden="true"></div>
-        <div class="topbar">
-          <h2 class="heading">${this.orderConfirmed ? "Takk!" : this.heading}</h2>
+        <div class="header">
+          <h2 class="heading">${this.confirmedOrder ? "Takk!" : this.heading}</h2>
           <button class="close" @click=${this.close} aria-label="Lukk">×</button>
         </div>
 
-        <div class="body">
-          ${this.orderConfirmed ? this.renderConfirmation() : this.express ? this.renderKlarnaExpress() : this.renderCheckoutBody()}
-        </div>
-      </div>
-    `;
-  }
-  renderConfirmation() {
-    const o = this.confirmedOrder;
-    return html`
-      <section class="confirmation">
-        <div class="confirm-check" aria-hidden="true">✓</div>
-        <h3 class="confirm-title">Takk for bestillingen!</h3>
-        <p class="confirm-text">
-          Betaling med ${this.methodLabel(this.confirmedMethod)} er bekreftet.${this.form.email ? html` Kvittering sendes til ${this.form.email}.` : ""}
-        </p>
-        ${o?.orderId ? html`<div class="confirm-order-id">Ordrenummer: <b>${o.orderId}</b></div>` : ""}
-        ${o && o.items.length > 0 ? html`
-              <div class="confirm-summary">
-                ${o.items.map(
-      (it) => html`
-                    <div class="order-row">
-                      <span>${it.brand ? `${it.brand} ` : ""}${it.name} ×${it.quantity}</span>
-                      <span>${formatPrice(it.unitPrice * it.quantity, it.currency)}</span>
+        ${this.confirmedOrder ? this.renderConfirmation() : isEmpty ? html`<div class="empty">${this.emptyLabel}</div>` : html`
+              <div class="body">
+                ${sponsorCarts.map(
+      (cart) => html`
+                    <div class="sponsor-group">
+                      ${cart.sponsorName ? html`<div class="sponsor-label">${cart.sponsorName}</div>` : ""}
+                      ${cart.items.map(
+        (item) => html`
+                          <div class="item">
+                            <div class="item-image">
+                              ${item.imageUrl ? html`<img src=${item.imageUrl} alt=${item.name} />` : ""}
+                            </div>
+                            <div>
+                              <div class="item-brand">${item.brand}</div>
+                              <div class="item-name">${item.name}</div>
+                              <div class="item-row">
+                                <span class="item-qty">
+                                  <button
+                                    class="qty-btn"
+                                    @click=${() => this.onDecrement(item)}
+                                    aria-label="Reduser"
+                                  >
+                                    −
+                                  </button>
+                                  ${item.quantity}
+                                  <button
+                                    class="qty-btn"
+                                    @click=${() => this.onIncrement(item)}
+                                    aria-label="Øk"
+                                  >
+                                    +
+                                  </button>
+                                  <button
+                                    class="qty-btn"
+                                    @click=${() => this.onRemove(item)}
+                                    aria-label="Fjern"
+                                    style="margin-left: 8px;"
+                                  >
+                                    ×
+                                  </button>
+                                </span>
+                                <span class="item-price">
+                                  ${formatPrice(
+          item.unitPrice * item.quantity,
+          item.currency
+        )}
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        `
+      )}
                     </div>
                   `
     )}
-                <div class="order-row total">
-                  <span>Totalt</span><span>${formatPrice(o.total, o.currency)}</span>
+              </div>
+              <div class="footer">
+                <div class="subtotal-row">
+                  <span class="subtotal-label">${this.subtotalLabel}</span>
+                  <span class="subtotal-value">
+                    ${formatPrice(this.totalAcrossSponsors, this.primaryCurrency)}
+                  </span>
                 </div>
+                ${this.methodEnabled("apple-pay") && this.applePayAvailable ? html`
+                      <button
+                        class="applepay-btn"
+                        @click=${this.onApplePay}
+                        aria-label="Betal med Apple Pay"
+                      >
+                        <svg class="ap-logo" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
+                        Apple Pay
+                      </button>
+                    ` : ""}
+                ${this.methodEnabled("stripe") ? html`
+                      <button
+                        class="stripe-btn"
+                        @click=${this.onStripe}
+                        aria-label="Betal med Stripe"
+                      >
+                        <img class="stripe-logo" src=${STRIPE_LOGO_SRC2} alt="Stripe" />
+                      </button>
+                    ` : ""}
+                ${this.methodEnabled("klarna") ? html`
+                      <button
+                        class="klarna-btn"
+                        @click=${this.onKlarnaExpress}
+                        aria-label="Betal med Klarna"
+                      >
+                        Kjøp med
+                        <img
+                          class="klarna-logo"
+                          src="https://x.klarnacdn.net/payment-method/assets/badges/generic/klarna.svg"
+                          alt="Klarna"
+                        />
+                      </button>
+                    ` : ""}
+                ${this.methodEnabled("vipps") ? html`
+                      <button
+                        class="vipps-btn"
+                        @click=${this.onVipps}
+                        aria-label="Betal med Vipps"
+                      >
+                        <span class="vipps-logo">vipps</span>
+                      </button>
+                    ` : ""}
               </div>
-            ` : ""}
-        <button class="confirm-close" @click=${this.close}>Lukk</button>
-      </section>
+            `}
+      </aside>
     `;
   }
-  /** Klarna Payments widget panel: shipping + category chips + widget + pay button. */
-  renderKlarnaPanel() {
-    const currency = this.checkoutState?.currency ?? "NOK";
+  renderConfirmation() {
+    const o = this.confirmedOrder;
+    if (!o) return html``;
     return html`
-      <div class="klarna-panel">
-        ${this.express ? html`
-              <div class="ship-select" role="radiogroup" aria-label="Frakt">
-                ${KLARNA_SHIPPING_OPTIONS.map(
-      (o) => html`
-                    <button
-                      class="ship-opt ${this.selectedShipping === o.id ? "active" : ""}"
-                      role="radio"
-                      aria-checked=${this.selectedShipping === o.id}
-                      ?disabled=${this.klarnaMounting}
-                      @click=${() => this.onSelectShipping(o.id)}
-                    >
-                      <span class="ship-meta">
-                        <b>${o.method}</b><span>${o.description}</span>
-                      </span>
-                      <span class="ship-price">${formatPrice(o.price / 100, currency)}</span>
-                    </button>
-                  `
-    )}
+      <div class="confirm">
+        <div class="confirm-check" aria-hidden="true">✓</div>
+        <h3>Takk for handelen!</h3>
+        <p>Betaling med Apple Pay er bekreftet.</p>
+        <div class="confirm-summary">
+          ${o.items.map(
+      (it) => html`
+              <div class="order-row">
+                <span>${it.brand ? `${it.brand} ` : ""}${it.name} ×${it.quantity}</span>
+                <span>${formatPrice(it.unitPrice * it.quantity, it.currency)}</span>
               </div>
-            ` : ""}
-        ${this.klarnaCategories.length > 1 ? html`
-              <div class="klarna-cats">
-                ${this.klarnaCategories.map(
-      (c) => html`
-                    <button
-                      class="klarna-cat ${this.klarnaSelectedCat === c.identifier ? "active" : ""}"
-                      @click=${() => void this.onKlarnaCategory(c.identifier)}
-                    >
-                      ${c.name}
-                    </button>
-                  `
+            `
     )}
-              </div>
-            ` : ""}
-        <div class="klarna-widget" id="vio-klarna-payments-container"></div>
-        <button
-          class="payment-btn primary complete-cta"
-          @click=${() => void this.onKlarnaAuthorize()}
-          ?disabled=${this.klarnaAuthorizing || !this.klarnaHandle || this.klarnaMounting}
-        >
-          ${this.klarnaAuthorizing ? "Behandler\u2026" : `Betal ${this.payTotalLabel()} med Klarna`}
-        </button>
-      </div>
-    `;
-  }
-  /** Express layout — only the Klarna widget + a compact order summary. */
-  renderKlarnaExpress() {
-    return html`
-      <section class="section">
-        <h3 class="section-heading">Kjøp med Klarna</h3>
-        ${this.items.length > 0 ? html`
-              <div class="express-summary">
-                ${this.items.map(
-      (item) => html`
-                    <div class="order-row">
-                      <span>${item.brand ? `${item.brand} ` : ""}${item.name} ×${item.quantity}</span>
-                      <span>${formatPrice(item.unitPrice * item.quantity, item.currency)}</span>
-                    </div>
-                  `
-    )}
-                <div class="order-row">
-                  <span>Frakt${this.shippingOption ? ` \u2013 ${this.shippingOption.method}` : ""}</span>
-                  <span>${formatPrice(this.shippingMajor(), this.checkoutState?.currency ?? "NOK")}</span>
-                </div>
-                <div class="order-row total">
-                  <span>Totalt</span><span>${this.payTotalLabel()}</span>
-                </div>
-              </div>
-            ` : ""}
-        ${this.renderKlarnaPanel()}
-        ${this.paymentError ? html`<div class="payment-error">${this.paymentError}</div>` : ""}
-      </section>
-    `;
-  }
-  renderCheckoutBody() {
-    const method = this.checkoutState?.paymentMethod;
-    const showCompleteCta = !!method && !this.isExpressMethod(method);
-    return html`
-          <section class="section">
-            <div class="section-label">Steg 1</div>
-            <h3 class="section-heading">Leveringsadresse</h3>
-            <div class="form-row">
-              <div class="field">
-                <label>Fornavn</label>
-                <input
-                  type="text"
-                  autocomplete="given-name"
-                  .value=${this.form.firstName}
-                  @input=${(e) => this.onFieldChange("firstName", e.target.value)}
-                />
-              </div>
-              <div class="field">
-                <label>Etternavn</label>
-                <input
-                  type="text"
-                  autocomplete="family-name"
-                  .value=${this.form.lastName}
-                  @input=${(e) => this.onFieldChange("lastName", e.target.value)}
-                />
-              </div>
-            </div>
-            <div class="field">
-              <label>E-post</label>
-              <input
-                type="email"
-                autocomplete="email"
-                .value=${this.form.email}
-                @input=${(e) => this.onFieldChange("email", e.target.value)}
-              />
-            </div>
-            <div class="field">
-              <label>Adresse</label>
-              <input
-                type="text"
-                autocomplete="street-address"
-                .value=${this.form.address}
-                @input=${(e) => this.onFieldChange("address", e.target.value)}
-              />
-            </div>
-            <div class="form-row">
-              <div class="field">
-                <label>Postnummer</label>
-                <input
-                  type="text"
-                  autocomplete="postal-code"
-                  .value=${this.form.postalCode}
-                  @input=${(e) => this.onFieldChange("postalCode", e.target.value)}
-                />
-              </div>
-              <div class="field">
-                <label>Sted</label>
-                <input
-                  type="text"
-                  autocomplete="address-level2"
-                  .value=${this.form.city}
-                  @input=${(e) => this.onFieldChange("city", e.target.value)}
-                />
-              </div>
-            </div>
-          </section>
-
-          <section class="section">
-            <div class="section-label">Steg 2</div>
-            <h3 class="section-heading">Velg betalingsmåte</h3>
-            <div class="payment-grid">
-              ${this.applePayAvailable ? html`
-                    <button
-                      class="payment-btn primary"
-                      @click=${() => this.onPay("apple-pay")}
-                      ?disabled=${this.applePayInProgress}
-                      aria-pressed=${this.checkoutState?.paymentMethod === "apple-pay"}
-                    >
-                      ${this.applePayInProgress ? "\xC5pner\u2026" : " Pay"}
-                    </button>
-                  ` : ""}
-              ${this.klarnaAvailable ? html`
-                    <button
-                      class="payment-btn"
-                      @click=${() => this.onPay("klarna")}
-                      aria-pressed=${this.checkoutState?.paymentMethod === "klarna"}
-                    >
-                      Klarna
-                    </button>
-                  ` : ""}
-              <button
-                class="payment-btn"
-                @click=${() => this.onPay("vipps")}
-                aria-pressed=${this.checkoutState?.paymentMethod === "vipps"}
-              >
-                Vipps
-              </button>
-              <button
-                class="payment-btn"
-                @click=${() => this.onPay("card")}
-                aria-pressed=${this.checkoutState?.paymentMethod === "card"}
-              >
-                Kort
-              </button>
-              ${!this.applePayAvailable ? html`
-                    <div class="apple-pay-note">
-                       Pay krever Safari på iOS eller macOS med Apple Pay konfigurert.
-                    </div>
-                  ` : ""}
-              ${showCompleteCta ? html`
-                    <button
-                      class="payment-btn primary complete-cta"
-                      @click=${this.onCompleteOrder}
-                    >
-                      Betal ${this.orderTotal()} med ${this.methodLabel(method ?? null)}
-                    </button>
-                  ` : ""}
-              ${method === "klarna" ? this.renderKlarnaPanel() : ""}
-              ${this.paymentError ? html`<div class="payment-error">${this.paymentError}</div>` : ""}
-            </div>
-          </section>
-
-          ${this.items.length > 0 ? html`
-                <section class="order-summary">
-                  ${this.items.map(
-      (item) => html`
-                      <div class="order-line">
-                        <div class="order-line-img">
-                          ${item.imageUrl ? html`<img src=${item.imageUrl} alt=${item.name} />` : ""}
-                        </div>
-                        <div class="order-line-meta">
-                          <span>${item.brand}</span>
-                          <b>${item.name}</b>
-                          <span>×${item.quantity}</span>
-                        </div>
-                        <div class="order-line-price">
-                          ${formatPrice(item.unitPrice * item.quantity, item.currency)}
-                        </div>
-                      </div>
-                    `
-    )}
-                  <div class="order-row" style="margin-top: 16px;">
-                    <span>Sum</span><span>${this.orderTotal()}</span>
-                  </div>
-                  <div class="order-row">
-                    <span>Frakt</span><span>${this.shippingLabel}</span>
-                  </div>
-                  <div class="order-row total">
-                    <span>Totalt</span><span>${this.orderTotal()}</span>
-                  </div>
-                </section>
-              ` : ""}
-        </div>
+          <div class="order-row total">
+            <span>Totalt</span>
+            <span>${formatPrice(o.total, o.currency)}</span>
+          </div>
+        </div>
+        <button class="confirm-close" @click=${this.closeConfirmation}>Lukk</button>
       </div>
     `;
   }
 };
-VioCheckout.styles = css`
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], VioCart.prototype, "open", 2);
+__decorateClass([
+  property({ type: String })
+], VioCart.prototype, "heading", 2);
+__decorateClass([
+  property({ type: String, attribute: "empty-label" })
+], VioCart.prototype, "emptyLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "subtotal-label" })
+], VioCart.prototype, "subtotalLabel", 2);
+__decorateClass([
+  state()
+], VioCart.prototype, "carts", 2);
+__decorateClass([
+  state()
+], VioCart.prototype, "itemCount", 2);
+__decorateClass([
+  state()
+], VioCart.prototype, "applePayAvailable", 2);
+__decorateClass([
+  state()
+], VioCart.prototype, "availableMethods", 2);
+__decorateClass([
+  state()
+], VioCart.prototype, "confirmedOrder", 2);
+var STRIPE_LOGO_SRC3 = "data:image/svg+xml;utf8," + encodeURIComponent(
+  '<svg width="360" height="150" viewBox="0 0 360 150" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M360 77.4001C360 51.8001 347.6 31.6001 323.9 31.6001C300.1 31.6001 285.7 51.8001 285.7 77.2001C285.7 107.3 302.7 122.5 327.1 122.5C339 122.5 348 119.8 354.8 116V96.0001C348 99.4001 340.2 101.5 330.3 101.5C320.6 101.5 312 98.1001 310.9 86.3001H359.8C359.8 85.0001 360 79.8001 360 77.4001ZM310.6 67.9001C310.6 56.6001 317.5 51.9001 323.8 51.9001C329.9 51.9001 336.4 56.6001 336.4 67.9001H310.6Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M247.1 31.6001C237.3 31.6001 231 36.2001 227.5 39.4001L226.2 33.2001H204.2V149.8L229.2 144.5L229.3 116.2C232.9 118.8 238.2 122.5 247 122.5C264.9 122.5 281.2 108.1 281.2 76.4001C281.1 47.4001 264.6 31.6001 247.1 31.6001ZM241.1 100.5C235.2 100.5 231.7 98.4001 229.3 95.8001L229.2 58.7001C231.8 55.8001 235.4 53.8001 241.1 53.8001C250.2 53.8001 256.5 64.0001 256.5 77.1001C256.5 90.5001 250.3 100.5 241.1 100.5Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M169.8 25.7L194.9 20.3V0L169.8 5.3V25.7Z" fill="#533AFD"/><path d="M194.9 33.3H169.8V120.8H194.9V33.3Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M142.9 40.7L141.3 33.3H119.7V120.8H144.7V61.5C150.6 53.8 160.6 55.2 163.7 56.3V33.3C160.5 32.1 148.8 29.9 142.9 40.7Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M92.8999 11.6001L68.4999 16.8001L68.3999 96.9001C68.3999 111.7 79.4999 122.6 94.2999 122.6C102.5 122.6 108.5 121.1 111.8 119.3V99.0001C108.6 100.3 92.7999 104.9 92.7999 90.1001V54.6001H111.8V33.3001H92.7999L92.8999 11.6001Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M25.3 58.7001C25.3 54.8001 28.5 53.3001 33.8 53.3001C41.4 53.3001 51 55.6001 58.6 59.7001V36.2001C50.3 32.9001 42.1 31.6001 33.8 31.6001C13.5 31.6001 0 42.2001 0 59.9001C0 87.5001 38 83.1001 38 95.0001C38 99.6001 34 101.1 28.4 101.1C20.1 101.1 9.5 97.7001 1.1 93.1001V116.9C10.4 120.9 19.8 122.6 28.4 122.6C49.2 122.6 63.5 112.3 63.5 94.4001C63.4 64.6001 25.3 69.9001 25.3 58.7001Z" fill="#533AFD"/></svg>'
+);
+var _VioCheckout = class _VioCheckout extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.heading = "Kasse";
+    this.shippingLabel = "Beregnes ved kasse";
+    this.express = false;
+    this.checkoutState = null;
+    this.items = [];
+    this.applePayAvailable = false;
+    this.applePayInProgress = false;
+    this.klarnaAvailable = false;
+    this.orderConfirmed = false;
+    this.confirmedMethod = null;
+    this.paymentError = null;
+    this.paymentNotice = null;
+    this.confirmedOrder = null;
+    /** Active Klarna Payments widget handle + the subtotal it was mounted for. */
+    this.klarnaHandle = null;
+    this.klarnaMountedAmount = null;
+    this.klarnaMountedShipping = null;
+    this.klarnaMounting = false;
+    this.klarnaCategories = [];
+    this.klarnaSelectedCat = "";
+    this.klarnaAuthorizing = false;
+    this.selectedShipping = KLARNA_SHIPPING_OPTIONS.find((o) => o.preselected)?.id ?? KLARNA_SHIPPING_OPTIONS[0]?.id ?? "";
+    this.availableShippingsList = [];
+    this.availableMethods = null;
+    this.stripeLoading = false;
+    this.vippsLoading = false;
+    this.form = {
+      firstName: "",
+      lastName: "",
+      email: "",
+      address: "",
+      postalCode: "",
+      city: ""
+    };
+    /** In-flight guard for loadAvailablePaymentMethods. */
+    this.loadingPaymentMethods = false;
+    /** In-flight + attempted guards for loadAvailableShippings (change events
+     * fire per keystroke — without these, typing an address hammers the API). */
+    this.loadingShippings = false;
+    this.shippingsAttempted = false;
+    this.boundOnCheckoutChange = (e) => {
+      const detail = e.detail;
+      const prevSponsorId = this.checkoutState?.sponsorId;
+      const sponsorChanged = !prevSponsorId || prevSponsorId !== detail.state?.sponsorId;
+      this.checkoutState = detail.state;
+      this.items = Vio.checkout.items;
+      if (this.checkoutState) {
+        if (sponsorChanged || this.availableMethods === null) {
+          void this.refreshApplePay();
+          void this.refreshKlarna();
+          void this.loadAvailablePaymentMethods();
+          void this.loadAvailableShippings();
+        } else if (!this.shippingsAttempted) {
+          void this.loadAvailableShippings();
+        }
+      } else {
+        this.applePayAvailable = false;
+        this.klarnaAvailable = false;
+        this.orderConfirmed = false;
+        this.confirmedMethod = null;
+        this.confirmedOrder = null;
+        this.paymentError = null;
+        this.paymentNotice = null;
+        this.express = false;
+        this.availableMethods = null;
+        this.unmountKlarna();
+      }
+    };
+    this.boundOnPaymentComplete = (e) => {
+      const detail = e.detail;
+      if (detail.method !== "klarna" && detail.method !== "apple-pay") return;
+      const sponsorId = detail.state?.sponsorId ?? this.checkoutState?.sponsorId;
+      if (sponsorId == null) return;
+      this.confirmOrder(detail.method, sponsorId, detail.result);
+    };
+    this.boundOnPaymentError = (e) => {
+      const detail = e.detail;
+      this.paymentError = detail.method === "klarna" ? `Klarna-betalingen kunne ikke fullf\xF8res: ${detail.error}` : detail.error;
+      this.open = true;
+    };
+  }
+  static {
+    this.styles = css`
     :host { display: contents; }
     .backdrop {
       position: fixed;
@@ -2834,6 +2702,21 @@ VioCheckout.styles = css`
       box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
     }
     :host([open]) .modal.as-side { transform: translateX(0); }
+
+    /* Desktop: the checkout ALWAYS lives as a right-side panel (like the cart,
+       product detail and express drawer) — never a full-width overlay. Only the
+       compact confirmation card stays centered. */
+    @media (min-width: 601px) {
+      .modal:not(.as-confirm) {
+        inset: 0 0 0 auto;
+        width: min(440px, 100%);
+        max-width: 440px;
+        transform: translateX(100%);
+        border-radius: 0;
+        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
+      }
+      :host([open]) .modal:not(.as-confirm) { transform: translateX(0); }
+    }
     @media (max-width: 600px) {
       /* On phones, keep it a bottom sheet for reachability. */
       .modal.as-side {
@@ -3014,8 +2897,9 @@ VioCheckout.styles = css`
       background: var(--vio-color-surface-hover, #fafafa);
     }
     .payment-btn:disabled {
-      cursor: progress;
-      opacity: 0.6;
+      cursor: not-allowed;
+      opacity: 0.45;
+      pointer-events: none;
     }
     .payment-btn.primary {
       background: var(--vio-color-text, #0a0a0a);
@@ -3099,9 +2983,27 @@ VioCheckout.styles = css`
       color: var(--vio-color-accent, #c14a3b);
       text-align: center;
     }
+    .payment-notice {
+      grid-column: 1 / -1;
+      padding: 12px 16px;
+      background: #f4f4f2;
+      border: 1px solid var(--vio-color-border, #ddd);
+      border-radius: 8px;
+      font-size: 13px;
+      color: var(--vio-color-text, #1a1a1a);
+      text-align: center;
+    }
     /* "Betal" CTA — sits full-width below the method grid once a method is
        picked. Reuses .payment-btn.primary (its grid-column spans the row). */
-    .complete-cta { margin-top: 8px; }
+    .complete-cta {
+      width: 100% !important;
+      box-sizing: border-box !important;
+      margin-top: 8px;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      text-align: center !important;
+    }
 
     /* Order confirmation — compact, shown inside the drawer. */
     .confirmation {
@@ -3169,116 +3071,1152 @@ VioCheckout.styles = css`
       font-family: inherit;
       margin-top: 16px;
     }
-    .confirm-close:hover { background: #222; }
+    .confirm-close:hover { background: #222; }
+
+    .order-summary {
+      background: var(--vio-color-surface-muted, #f2f2f2);
+      padding: var(--vio-space-lg, 24px);
+      margin-top: var(--vio-space-xl, 32px);
+    }
+    .order-line {
+      display: grid;
+      grid-template-columns: 56px 1fr auto;
+      gap: 12px;
+      padding: 8px 0;
+      align-items: center;
+    }
+    .order-line-img {
+      aspect-ratio: 1;
+      background: #fff;
+      overflow: hidden;
+    }
+    .order-line-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
+    .order-line-meta { font-size: 13px; }
+    .order-line-meta b { display: block; }
+    .order-line-meta span {
+      color: var(--vio-color-text-secondary, #666);
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+    }
+    .order-line-price { font-weight: 700; font-size: 14px; }
+    .order-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 8px 0;
+      font-size: 14px;
+    }
+    .order-row.total {
+      border-top: 1px solid var(--vio-color-border-default, #ccc);
+      margin-top: var(--vio-space-sm, 8px);
+      padding-top: var(--vio-space-md, 16px);
+      font-weight: 700;
+      font-size: 16px;
+    }
+
+    @media (max-width: 600px) {
+      .form-row { grid-template-columns: 1fr; gap: 0; }
+      .payment-grid { grid-template-columns: 1fr; }
+      .body { padding: 32px var(--vio-space-lg, 24px) 64px; }
+    }
+  `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.checkoutState = Vio.checkout.currentState;
+    this.items = Vio.checkout.items;
+    Vio.checkout.addEventListener("change", this.boundOnCheckoutChange);
+    Vio.checkout.addEventListener("payment-complete", this.boundOnPaymentComplete);
+    Vio.checkout.addEventListener("payment-error", this.boundOnPaymentError);
+    if (this.checkoutState) {
+      void this.refreshApplePay();
+      void this.refreshKlarna();
+      void this.loadAvailablePaymentMethods();
+    }
+    void Vio.checkout.resumeKlarnaReturn();
+    void this.checkReturnPaymentStatus();
+  }
+  static {
+    /**
+     * Detect the redirect return from a hosted payment page (Stripe / Vipps /
+     * Klarna): the return URL carries vio_payment/vio_method/vio_sponsor. On
+     * success: clear that sponsor's cart, show the confirmation drawer, emit
+     * vio:payment-success (analytics/host hooks) and scrub the URL params.
+     */
+    /** Backend checkout statuses that mean the payment went through. */
+    this.PAID_STATUSES = /* @__PURE__ */ new Set([
+      "paid",
+      "completed",
+      "complete",
+      "success",
+      "succeeded",
+      "confirmed",
+      "captured"
+    ]);
+  }
+  static {
+    /** Statuses that mean the payment definitively did NOT go through. */
+    this.FAILED_STATUSES = /* @__PURE__ */ new Set([
+      "failed",
+      "cancelled",
+      "canceled",
+      "rejected",
+      "declined",
+      "expired",
+      "aborted",
+      "terminated",
+      "error",
+      "voided",
+      "unpaid"
+    ]);
+  }
+  static {
+    /** Waits between GetCheckout attempts — PSP webhooks (Vipps especially) can
+     * land seconds after the shopper is redirected back, so a single immediate
+     * check misreads a successful charge as unpaid. ~20s total. */
+    this.RETURN_VERIFY_DELAYS_MS = [0, 2e3, 4e3, 6e3, 8e3];
+  }
+  static {
+    /** Vipps polling cadence — up to 2 minutes. Its webhook can lag well behind
+     * the redirect; this window was verified against a live checkout. */
+    this.VIPPS_STATUS_MAX_ATTEMPTS = 24;
+  }
+  static {
+    this.VIPPS_STATUS_DELAY_MS = 5e3;
+  }
+  /**
+   * Vipps redirects to our return URL the same way on cancel as on success —
+   * the URL alone can't tell them apart, and the generic checkout status can
+   * lag behind Vipps' own webhook. Poll Vipps' own state directly instead:
+   * AUTHORIZED confirms, CREATED means still processing (keep polling),
+   * anything else (including an unrecognized state) is treated as failed —
+   * fail-closed by default rather than guessing.
+   */
+  async pollVippsStatus(checkoutId, sponsorId) {
+    let sawStatus = false;
+    for (let attempt = 0; attempt < _VioCheckout.VIPPS_STATUS_MAX_ATTEMPTS; attempt++) {
+      if (attempt > 0) {
+        await new Promise((r) => setTimeout(r, _VioCheckout.VIPPS_STATUS_DELAY_MS));
+      }
+      try {
+        const vippsStatus = await Vio.checkout.getVippsStatus(checkoutId, sponsorId || void 0);
+        const state6 = String(vippsStatus?.state ?? "").toUpperCase();
+        sawStatus = true;
+        if (state6 === "AUTHORIZED") return { outcome: "paid", sawStatus };
+        if (state6 === "CREATED") continue;
+        return { outcome: "failed", sawStatus };
+      } catch (err) {
+        if (typeof console !== "undefined") {
+          console.warn("[VioCheckout] GetVippsStatus attempt failed:", err);
+        }
+      }
+    }
+    return { outcome: "pending", sawStatus };
+  }
+  /** Shared outcome handler for both the generic (GetCheckout) and the
+   * Vipps-specific (GetVippsStatus) return-verification paths. */
+  applyReturnOutcome(outcome, sawStatus, vioMethod, sponsorId, checkoutId) {
+    if (outcome === "paid") {
+      if (sponsorId > 0) Vio.cart.clearSponsorCart(sponsorId);
+      this.confirmedOrder = {
+        items: [],
+        currency: getGlobalCurrency(),
+        total: 0,
+        orderId: checkoutId || void 0
+      };
+      this.confirmedMethod = vioMethod;
+      this.orderConfirmed = true;
+      this.open = true;
+      this.dispatchEvent(
+        new CustomEvent("vio:payment-success", {
+          bubbles: true,
+          composed: true,
+          detail: { method: vioMethod, sponsorId, orderId: checkoutId }
+        })
+      );
+    } else if (outcome === "failed") {
+      this.paymentError = "Betalingen ble avbrutt eller feilet. Vennligst pr\xF8v igjen.";
+      this.open = true;
+    } 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;
+    } else {
+      this.paymentError = "Vi kunne ikke bekrefte betalingen. Handlekurven er uendret \u2014 pr\xF8v igjen, eller kontakt support hvis du ble belastet.";
+      this.open = true;
+    }
+  }
+  async checkReturnPaymentStatus() {
+    if (typeof window === "undefined" || !window.location || !window.location.search) return;
+    try {
+      const urlParams = new URLSearchParams(window.location.search);
+      const vioPayment = urlParams.get("vio_payment");
+      const vioMethod = urlParams.get("vio_method") || "stripe";
+      const sponsorId = Number(urlParams.get("vio_sponsor") || 0);
+      const checkoutId = urlParams.get("checkout_id") || "";
+      if (!vioPayment && !checkoutId) return;
+      if (vioMethod === "klarna" && typeof sessionStorage !== "undefined" && sessionStorage.getItem("vio.klarna.pending.v1")) {
+        this.cleanReturnQueryParams(["vio_payment", "vio_method", "vio_sponsor", "checkout_id"]);
+        return;
+      }
+      if (vioMethod === "vipps" && checkoutId) {
+        if (!this.checkoutState) {
+          const spIdToUse = sponsorId || [...Vio.cart.getAllCarts().keys()][0] || 0;
+          if (spIdToUse) {
+            try {
+              Vio.checkout.open(spIdToUse);
+              Vio.checkout.selectPaymentMethod("vipps");
+            } catch {
+            }
+          }
+        }
+        this.open = true;
+        this.paymentNotice = "Bekrefter betalingen med Vipps\u2026";
+        const { outcome, sawStatus } = await this.pollVippsStatus(checkoutId, sponsorId);
+        this.paymentNotice = null;
+        this.applyReturnOutcome(outcome, sawStatus, vioMethod, sponsorId, checkoutId);
+        this.cleanReturnQueryParams(["vio_payment", "vio_method", "vio_sponsor", "checkout_id"]);
+      } else if (vioPayment === "success") {
+        let outcome = "pending";
+        let sawStatus = false;
+        if (checkoutId) {
+          this.open = true;
+          this.paymentNotice = "Bekrefter betalingen\u2026";
+          for (const delayMs of _VioCheckout.RETURN_VERIFY_DELAYS_MS) {
+            if (delayMs > 0) await new Promise((r) => setTimeout(r, delayMs));
+            try {
+              const checkout = await Vio.checkout.getCheckout(checkoutId, sponsorId || void 0);
+              const status = String(checkout?.status ?? "").toLowerCase();
+              sawStatus = true;
+              if (_VioCheckout.FAILED_STATUSES.has(status)) {
+                outcome = "failed";
+                break;
+              }
+              if (_VioCheckout.PAID_STATUSES.has(status) || Boolean(checkout?.origin_payment_id)) {
+                outcome = "paid";
+                break;
+              }
+            } catch (err) {
+              if (typeof console !== "undefined") {
+                console.warn("[VioCheckout] return verification attempt failed:", err);
+              }
+            }
+          }
+          this.paymentNotice = null;
+        }
+        this.applyReturnOutcome(outcome, sawStatus, vioMethod, sponsorId, checkoutId);
+        this.cleanReturnQueryParams(["vio_payment", "vio_method", "vio_sponsor", "checkout_id"]);
+      } else if (vioPayment === "cancel" || vioPayment === "error") {
+        this.paymentError = "Betalingen ble avbrutt eller feilet. Vennligst pr\xF8v igjen.";
+        this.open = true;
+        this.cleanReturnQueryParams(["vio_payment", "vio_method", "vio_sponsor", "checkout_id"]);
+      }
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[VioCheckout] checkReturnPaymentStatus failed:", err);
+      }
+    }
+  }
+  /** Remove our payment-return params from the URL without a reload. */
+  cleanReturnQueryParams(keys) {
+    try {
+      if (typeof window === "undefined" || !window.history || !window.location) return;
+      const url = new URL(window.location.href);
+      let changed = false;
+      keys.forEach((k) => {
+        if (url.searchParams.has(k)) {
+          url.searchParams.delete(k);
+          changed = true;
+        }
+      });
+      if (changed) {
+        const newSearch = url.searchParams.toString();
+        const newUrl = url.pathname + (newSearch ? "?" + newSearch : "") + url.hash;
+        window.history.replaceState({}, document.title, newUrl);
+      }
+    } catch {
+    }
+  }
+  disconnectedCallback() {
+    Vio.checkout.removeEventListener("change", this.boundOnCheckoutChange);
+    Vio.checkout.removeEventListener("payment-complete", this.boundOnPaymentComplete);
+    Vio.checkout.removeEventListener("payment-error", this.boundOnPaymentError);
+    this.unmountKlarna();
+    super.disconnectedCallback();
+  }
+  updated(changed) {
+    if (changed.has("open") && this.open && this.availableShippingsList.length === 0) {
+      void this.loadAvailableShippings();
+    }
+    void this.mountKlarnaIfNeeded();
+  }
+  close() {
+    this.open = false;
+    this.express = false;
+    Vio.checkout.close();
+  }
+  show() {
+    this.open = true;
+    if (this.availableShippingsList.length === 0) {
+      void this.loadAvailableShippings();
+    }
+  }
+  /** Fetch the real per-supplier shippings and preselect + persist the first. */
+  async loadAvailableShippings() {
+    const spId = this.checkoutState?.sponsorId;
+    if (!spId) return;
+    if (this.loadingShippings) return;
+    this.loadingShippings = true;
+    this.shippingsAttempted = true;
+    try {
+      const shippings = await Vio.checkout.fetchAvailableShippings(spId);
+      if (Array.isArray(shippings) && shippings.length > 0) {
+        this.availableShippingsList = shippings;
+        if (!this.selectedShipping || !shippings.some((s) => s.id === this.selectedShipping)) {
+          const firstOpt = shippings[0];
+          this.selectedShipping = firstOpt.id;
+          if (firstOpt.supplierId) {
+            void Vio.checkout.updateShippingsBySupplier(
+              [{ shipping_id: firstOpt.id, supplier_id: Number(firstOpt.supplierId) }],
+              spId
+            );
+          }
+        }
+      }
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[VioCheckout] loadAvailableShippings failed:", err);
+      }
+    } finally {
+      this.loadingShippings = false;
+    }
+  }
+  /** Whether all mandatory Leveringsadresse fields are filled. */
+  get isAddressValid() {
+    const f = this.form;
+    if (!f) return false;
+    return Boolean(
+      f.firstName && String(f.firstName).trim().length > 0 && f.lastName && String(f.lastName).trim().length > 0 && f.email && String(f.email).trim().length > 0 && String(f.email).includes("@") && f.address && String(f.address).trim().length > 0 && f.postalCode && String(f.postalCode).trim().length > 0 && f.city && String(f.city).trim().length > 0
+    );
+  }
+  /** Whether a valid shipping option is selected (when shippings exist). */
+  get hasSelectedShipping() {
+    if (this.availableShippingsList.length === 0) return true;
+    return Boolean(
+      this.selectedShipping && this.shippingList.some((s) => s.id === this.selectedShipping)
+    );
+  }
+  /** Which payment buttons to render — backend-configured per sponsor. */
+  async loadAvailablePaymentMethods() {
+    if (!this.checkoutState) return;
+    if (this.loadingPaymentMethods) return;
+    this.loadingPaymentMethods = true;
+    try {
+      const methods = await Vio.checkout.getAvailablePaymentMethods(
+        this.checkoutState.sponsorId
+      );
+      if (Array.isArray(methods)) {
+        this.availableMethods = methods.map((m) => m.name);
+      } else {
+        this.availableMethods = null;
+      }
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[VioCheckout] Failed to load payment methods:", err);
+      }
+      this.availableMethods = null;
+    } finally {
+      this.loadingPaymentMethods = false;
+    }
+  }
+  /** Backend names arrive as e.g. "Apple Pay" — compare letters only. */
+  methodEnabled(name) {
+    if (this.availableMethods === null) return true;
+    const norm = (s) => s.toLowerCase().replace(/[^a-z]/g, "");
+    return this.availableMethods.some((m) => norm(m) === norm(name));
+  }
+  async refreshApplePay() {
+    Vio.checkout.clearApplePayCache();
+    this.applePayAvailable = await Vio.checkout.isApplePayAvailable("NO");
+  }
+  async refreshKlarna() {
+    const available = await Vio.checkout.klarnaPaymentsAvailable();
+    if (available !== this.klarnaAvailable) {
+      if (!available) this.unmountKlarna();
+      this.klarnaAvailable = available;
+    }
+  }
+  /** Mount (or re-mount on amount change) the Klarna Payments widget. */
+  async mountKlarnaIfNeeded() {
+    if (!this.klarnaAvailable || !this.open || !this.checkoutState) return;
+    if (this.checkoutState.paymentMethod !== "klarna" && !this.express) return;
+    if (this.klarnaMounting) return;
+    const amount = this.checkoutState.subtotal;
+    if (this.klarnaHandle && this.klarnaMountedAmount === amount && this.klarnaMountedShipping === this.selectedShipping) {
+      return;
+    }
+    const container = this.renderRoot?.querySelector(
+      "#vio-klarna-payments-container"
+    );
+    if (!container) return;
+    this.klarnaMounting = true;
+    this.unmountKlarna();
+    container.innerHTML = "";
+    try {
+      const handle = await Vio.checkout.mountKlarnaPayments(container, {
+        withShipping: this.express,
+        shippingId: this.selectedShipping
+      });
+      this.klarnaHandle = handle;
+      this.klarnaMountedAmount = amount;
+      this.klarnaMountedShipping = this.selectedShipping;
+      this.klarnaCategories = handle.categories;
+      this.klarnaSelectedCat = handle.selected;
+      if (Array.isArray(handle.shippings) && handle.shippings.length > 0) {
+        this.availableShippingsList = handle.shippings;
+        if (!this.selectedShipping || !handle.shippings.some((s) => s.id === this.selectedShipping)) {
+          this.selectedShipping = handle.shippings[0].id;
+        }
+      }
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[VioCheckout] Klarna Payments mount failed:", err);
+      }
+      this.paymentError = `Kunne ikke laste Klarna: ${err instanceof Error ? err.message : String(err)}`;
+    } finally {
+      this.klarnaMounting = false;
+    }
+  }
+  unmountKlarna() {
+    if (this.klarnaHandle) {
+      this.klarnaHandle.unmount();
+      this.klarnaHandle = null;
+    }
+    this.klarnaMountedAmount = null;
+    this.klarnaMountedShipping = null;
+    this.klarnaCategories = [];
+    this.klarnaSelectedCat = "";
+    this.klarnaAuthorizing = false;
+  }
+  /** Shippings in effect: backend per-supplier when loaded, static otherwise. */
+  get shippingList() {
+    return this.availableShippingsList.length > 0 ? this.availableShippingsList : KLARNA_SHIPPING_OPTIONS;
+  }
+  /** Selected shipping option (express flow). */
+  get shippingOption() {
+    const list = this.shippingList;
+    return list.find((o) => o.id === this.selectedShipping) ?? list[0] ?? null;
+  }
+  /** Pick a shipping option → re-mounts the Klarna widget with the new total.
+   * Also persists the choice on the backend cart (per supplier). */
+  async onSelectShipping(id) {
+    if (this.selectedShipping === id || this.klarnaMounting) return;
+    this.selectedShipping = id;
+    const selectedOpt = this.shippingList.find((s) => s.id === id);
+    if (selectedOpt?.supplierId) {
+      try {
+        await Vio.checkout.updateShippingsBySupplier(
+          [{ shipping_id: selectedOpt.id, supplier_id: Number(selectedOpt.supplierId) }],
+          this.checkoutState?.sponsorId
+        );
+      } catch (err) {
+        if (typeof console !== "undefined") {
+          console.warn("[VioCheckout] updateShippingsBySupplier failed:", err);
+        }
+      }
+    }
+  }
+  /** Switch the Klarna widget to a different payment_method_category. */
+  async onKlarnaCategory(identifier) {
+    if (!this.klarnaHandle || this.klarnaSelectedCat === identifier) return;
+    this.klarnaSelectedCat = identifier;
+    try {
+      await this.klarnaHandle.load(identifier);
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[VioCheckout] Klarna category switch failed:", err);
+      }
+    }
+  }
+  /** Authorize the selected Klarna method → backend creates the order. */
+  async onKlarnaAuthorize() {
+    if (!this.klarnaHandle || this.klarnaAuthorizing) return;
+    this.paymentError = null;
+    this.paymentNotice = null;
+    this.klarnaAuthorizing = true;
+    try {
+      await this.klarnaHandle.authorize();
+    } finally {
+      this.klarnaAuthorizing = false;
+    }
+  }
+  onFieldChange(field, value) {
+    this.form = { ...this.form, [field]: value };
+    Vio.checkout.setAddress(this.form);
+  }
+  async onApplePay() {
+    if (this.applePayInProgress) return;
+    this.applePayInProgress = true;
+    try {
+      await Vio.checkout.startApplePay({ country: "NO", label: "Vio" });
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[VioCheckout] Apple Pay flow ended:", err);
+      }
+    } finally {
+      this.applePayInProgress = false;
+    }
+  }
+  async onPay(method) {
+    this.paymentError = null;
+    this.paymentNotice = null;
+    if (method === "apple-pay") {
+      void this.onApplePay();
+      return;
+    }
+    if (method === "vipps") {
+      const email = String(this.form.email ?? "").trim();
+      if (!email || !email.includes("@")) {
+        this.paymentError = "Vennligst fyll inn e-postadressen din.";
+        return;
+      }
+    } else {
+      if (!this.isAddressValid) {
+        this.paymentError = "Vennligst fyll ut alle feltene i leveringsadresse.";
+        return;
+      }
+      if (!this.hasSelectedShipping) {
+        this.paymentError = "Vennligst velg en fraktmetode.";
+        return;
+      }
+    }
+    Vio.checkout.selectPaymentMethod(method);
+    if (method === "stripe") {
+      const selectedOpt = this.shippingList.find((s) => s.id === this.selectedShipping);
+      if (selectedOpt?.supplierId) {
+        try {
+          await Vio.checkout.updateShippingsBySupplier(
+            [{ shipping_id: selectedOpt.id, supplier_id: Number(selectedOpt.supplierId) }],
+            this.checkoutState?.sponsorId
+          );
+        } catch (err) {
+          if (typeof console !== "undefined") {
+            console.warn("[VioCheckout] updateShippingsBySupplier on stripe pay failed:", err);
+          }
+        }
+      }
+      this.stripeLoading = true;
+      void Vio.checkout.startStripePayment(this.checkoutState?.sponsorId, this.form).catch((err) => {
+        this.paymentError = `Kunne ikke starte Stripe-betaling: ${err instanceof Error ? err.message : String(err)}`;
+      }).finally(() => {
+        this.stripeLoading = false;
+      });
+    }
+    if (method === "vipps") {
+      this.vippsLoading = true;
+      void Vio.checkout.startVippsPayment(this.checkoutState?.sponsorId, this.form).catch((err) => {
+        this.paymentError = `Kunne ikke starte Vipps-betaling: ${err instanceof Error ? err.message : String(err)}`;
+      }).finally(() => {
+        this.vippsLoading = false;
+      });
+    }
+  }
+  /**
+   * Complete the order for the selected method. Apple Pay and Klarna Express
+   * finish inside their own sheet/popup; Stripe and Vipps redirect to their
+   * hosted pages (via onPay). Anything else confirms state-only.
+   */
+  onCompleteOrder() {
+    const s = this.checkoutState;
+    if (!s || !s.paymentMethod) return;
+    if (s.paymentMethod !== "vipps" && !this.isAddressValid) {
+      this.paymentError = "Vennligst fyll ut alle feltene i leveringsadresse.";
+      return;
+    }
+    if (s.paymentMethod === "stripe" || s.paymentMethod === "vipps") {
+      void this.onPay(s.paymentMethod);
+      return;
+    }
+    if (s.paymentMethod !== "klarna" && s.paymentMethod !== "apple-pay") {
+      this.paymentError = "Betalingsmetoden er ikke tilgjengelig enn\xE5.";
+      return;
+    }
+    this.confirmOrder(s.paymentMethod, s.sponsorId);
+  }
+  /**
+   * Shared order confirmation — reached from both the plain "Betal" CTA
+   * (Vipps/Card/Klarna) and the Klarna Express authorize callback. Shows
+   * the confirmation screen, emits `vio:payment-success`, and clears the
+   * paid sponsor's cart so the badge + drawer reflect the purchase.
+   */
+  confirmOrder(method, sponsorId, result) {
+    const r = result ?? {};
+    this.confirmedOrder = {
+      items: [...this.items],
+      currency: this.checkoutState?.currency ?? "",
+      total: typeof r.chargedTotal === "number" ? r.chargedTotal : this.checkoutState?.subtotal ?? 0,
+      orderId: r.order?.orderId
+    };
+    this.confirmedMethod = method;
+    this.orderConfirmed = true;
+    this.open = true;
+    this.dispatchEvent(
+      new CustomEvent("vio:payment-success", {
+        bubbles: true,
+        composed: true,
+        detail: { method, sponsorId, result }
+      })
+    );
+    Vio.cart.clearSponsorCart(sponsorId);
+  }
+  methodLabel(method) {
+    switch (method) {
+      case "apple-pay":
+        return "Apple Pay";
+      case "klarna":
+        return "Klarna";
+      case "vipps":
+        return "Vipps";
+      case "stripe":
+        return "Stripe";
+      case "card":
+        return "Kort";
+      default:
+        return "";
+    }
+  }
+  /** True for methods that complete via a separate sheet/widget, not the CTA. */
+  isExpressMethod(method) {
+    return method === "apple-pay" || method === "klarna";
+  }
+  orderTotal() {
+    const s = this.checkoutState;
+    if (!s) return "";
+    return formatPrice(s.subtotal, s.currency);
+  }
+  /** Shipping cost (major units) whenever a shipping option is in effect —
+   * express always has one; the normal flow has one once the backend
+   * shippings loaded (the choice IS persisted on the cart and charged). */
+  shippingMajor() {
+    if (!this.express && this.availableShippingsList.length === 0) return 0;
+    const o = this.shippingOption;
+    if (!o) return 0;
+    return o.priceMajor ?? o.price / 100;
+  }
+  /** Total to charge — items + shipping (express). */
+  payTotalLabel() {
+    const s = this.checkoutState;
+    if (!s) return "";
+    return formatPrice(s.subtotal + this.shippingMajor(), s.currency);
+  }
+  render() {
+    return html`
+      <div class="backdrop" @click=${this.close}></div>
+      <div
+        class="modal ${this.express ? "as-side" : this.orderConfirmed ? "as-confirm" : ""}"
+        role="dialog"
+        aria-label=${this.heading}
+      >
+        <div class="handle" @click=${this.close} aria-hidden="true"></div>
+        <div class="topbar">
+          <h2 class="heading">${this.orderConfirmed ? "Takk!" : this.heading}</h2>
+          <button class="close" @click=${this.close} aria-label="Lukk">×</button>
+        </div>
+
+        <div class="body">
+          ${this.orderConfirmed ? this.renderConfirmation() : this.express ? this.renderKlarnaExpress() : this.renderCheckoutBody()}
+        </div>
+      </div>
+    `;
+  }
+  renderConfirmation() {
+    const o = this.confirmedOrder;
+    return html`
+      <section class="confirmation">
+        <div class="confirm-check" aria-hidden="true">✓</div>
+        <h3 class="confirm-title">Takk for bestillingen!</h3>
+        <p class="confirm-text">
+          Betaling med ${this.methodLabel(this.confirmedMethod)} er bekreftet.${this.form.email ? html` Kvittering sendes til ${this.form.email}.` : ""}
+        </p>
+        ${o?.orderId ? html`<div class="confirm-order-id">Ordrenummer: <b>${o.orderId}</b></div>` : ""}
+        ${o && o.items.length > 0 ? html`
+              <div class="confirm-summary">
+                ${o.items.map(
+      (it) => html`
+                    <div class="order-row">
+                      <span>${it.brand ? `${it.brand} ` : ""}${it.name} ×${it.quantity}</span>
+                      <span>${formatPrice(it.unitPrice * it.quantity, it.currency)}</span>
+                    </div>
+                  `
+    )}
+                <div class="order-row total">
+                  <span>Totalt</span><span>${formatPrice(o.total, o.currency)}</span>
+                </div>
+              </div>
+            ` : ""}
+        <button class="confirm-close" @click=${this.close}>Lukk</button>
+      </section>
+    `;
+  }
+  /** Klarna Payments widget panel: shipping + category chips + widget + pay button. */
+  renderKlarnaPanel() {
+    const currency = this.checkoutState?.currency || getGlobalCurrency();
+    return html`
+      <div class="klarna-panel">
+        ${this.express ? html`
+              <div class="ship-select" role="radiogroup" aria-label="Frakt">
+                ${this.shippingList.map(
+      (o) => html`
+                    <button
+                      class="ship-opt ${this.selectedShipping === o.id ? "active" : ""}"
+                      role="radio"
+                      aria-checked=${this.selectedShipping === o.id}
+                      ?disabled=${this.klarnaMounting}
+                      @click=${() => void this.onSelectShipping(o.id)}
+                    >
+                      <span class="ship-meta">
+                        <b>${o.method || o.name}</b><span>${o.description}</span>
+                      </span>
+                      <span class="ship-price">
+                        ${formatPrice(o.priceMajor ?? o.price / 100, o.currency || currency)}
+                      </span>
+                    </button>
+                  `
+    )}
+              </div>
+            ` : ""}
+        ${this.klarnaCategories.length > 1 ? html`
+              <div class="klarna-cats">
+                ${this.klarnaCategories.map(
+      (c) => html`
+                    <button
+                      class="klarna-cat ${this.klarnaSelectedCat === c.identifier ? "active" : ""}"
+                      @click=${() => void this.onKlarnaCategory(c.identifier)}
+                    >
+                      ${c.name}
+                    </button>
+                  `
+    )}
+              </div>
+            ` : ""}
+        ${this.klarnaMounting ? html`
+              <div style="padding: 20px; text-align: center; color: var(--vio-color-text-secondary, #666); font-size: 14px;">
+                Klargjør Klarna-betaling…
+              </div>
+            ` : ""}
+        <div class="klarna-widget" id="vio-klarna-payments-container"></div>
+        <button
+          class="payment-btn primary complete-cta"
+          @click=${() => void this.onKlarnaAuthorize()}
+          ?disabled=${this.klarnaAuthorizing || !this.klarnaHandle || this.klarnaMounting}
+        >
+          ${this.klarnaAuthorizing ? "Behandler\u2026" : this.klarnaMounting ? "Klargj\xF8r Klarna\u2026" : `Betal ${this.payTotalLabel()} med Klarna`}
+        </button>
+      </div>
+    `;
+  }
+  /** Express layout — only the Klarna widget + a compact order summary. */
+  renderKlarnaExpress() {
+    const currency = this.checkoutState?.currency || getGlobalCurrency();
+    if (!this.klarnaAvailable) {
+      return html`
+        <section class="section">
+          <h3 class="section-heading">Kjøp med Klarna</h3>
+          <div class="payment-error">
+            Klarna er ikke tilgjengelig akkurat nå (kan være blokkert av nettleseren).
+          </div>
+          <button
+            class="payment-btn primary complete-cta"
+            @click=${() => {
+        this.express = false;
+      }}
+          >
+            Gå til vanlig kasse
+          </button>
+        </section>
+      `;
+    }
+    return html`
+      <section class="section">
+        <h3 class="section-heading">Kjøp med Klarna</h3>
+        ${this.items.length > 0 ? html`
+              <div class="express-summary">
+                ${this.items.map(
+      (item) => html`
+                    <div class="order-row">
+                      <span>${item.brand ? `${item.brand} ` : ""}${item.name} ×${item.quantity}</span>
+                      <span>${formatPrice(item.unitPrice * item.quantity, item.currency || currency)}</span>
+                    </div>
+                  `
+    )}
+                <div class="order-row">
+                  <span>Frakt${this.shippingOption ? ` \u2013 ${this.shippingOption.method}` : ""}</span>
+                  <span>${formatPrice(this.shippingMajor(), currency)}</span>
+                </div>
+                <div class="order-row total">
+                  <span>Totalt</span><span>${this.payTotalLabel()}</span>
+                </div>
+              </div>
+            ` : ""}
+        ${this.renderKlarnaPanel()}
+        ${this.paymentNotice ? html`<div class="payment-notice">${this.paymentNotice}</div>` : ""}
+        ${this.paymentError ? html`<div class="payment-error">${this.paymentError}</div>` : ""}
+      </section>
+    `;
+  }
+  renderCheckoutBody() {
+    const method = this.checkoutState?.paymentMethod;
+    const showCompleteCta = !!method && !this.isExpressMethod(method);
+    const isVipps = method === "vipps";
+    return html`
+          ${!isVipps ? html`
+          <section class="section">
+            <div class="section-label">Steg 1</div>
+            <h3 class="section-heading">Leveringsadresse</h3>
+            <div class="form-row">
+              <div class="field">
+                <label>Fornavn *</label>
+                <input
+                  type="text"
+                  required
+                  autocomplete="given-name"
+                  .value=${this.form.firstName}
+                  @input=${(e) => this.onFieldChange("firstName", e.target.value)}
+                />
+              </div>
+              <div class="field">
+                <label>Etternavn *</label>
+                <input
+                  type="text"
+                  required
+                  autocomplete="family-name"
+                  .value=${this.form.lastName}
+                  @input=${(e) => this.onFieldChange("lastName", e.target.value)}
+                />
+              </div>
+            </div>
+            <div class="field">
+              <label>E-post *</label>
+              <input
+                type="email"
+                required
+                autocomplete="email"
+                .value=${this.form.email}
+                @input=${(e) => this.onFieldChange("email", e.target.value)}
+              />
+            </div>
+            <div class="field">
+              <label>Adresse *</label>
+              <input
+                type="text"
+                required
+                autocomplete="street-address"
+                .value=${this.form.address}
+                @input=${(e) => this.onFieldChange("address", e.target.value)}
+              />
+            </div>
+            <div class="form-row">
+              <div class="field">
+                <label>Postnummer *</label>
+                <input
+                  type="text"
+                  required
+                  autocomplete="postal-code"
+                  .value=${this.form.postalCode}
+                  @input=${(e) => this.onFieldChange("postalCode", e.target.value)}
+                />
+              </div>
+              <div class="field">
+                <label>Sted *</label>
+                <input
+                  type="text"
+                  required
+                  autocomplete="address-level2"
+                  .value=${this.form.city}
+                  @input=${(e) => this.onFieldChange("city", e.target.value)}
+                />
+              </div>
+            </div>
+            ${this.availableShippingsList.length > 0 ? html`
+                  <div style="margin-top: 16px;">
+                    <label style="display: block; font-weight: 600; font-size: 13px; margin-bottom: 8px;">
+                      Fraktmetode *
+                    </label>
+                    <div class="ship-select">
+                      ${this.availableShippingsList.map(
+      (o) => html`
+                          <button
+                            type="button"
+                            class="ship-opt ${this.selectedShipping === o.id ? "active" : ""}"
+                            @click=${() => void this.onSelectShipping(o.id)}
+                          >
+                            <span class="ship-meta">
+                              <b>${o.method || o.name}</b>
+                              ${o.description ? html`<span>${o.description}</span>` : ""}
+                            </span>
+                            <span class="ship-price">
+                              ${formatPrice(
+        o.priceMajor ?? o.price / 100,
+        o.currency || this.checkoutState?.currency || "NOK"
+      )}
+                            </span>
+                          </button>
+                        `
+    )}
+                    </div>
+                  </div>
+                ` : ""}
+          </section>
+          ` : ""}
 
-    .order-summary {
-      background: var(--vio-color-surface-muted, #f2f2f2);
-      padding: var(--vio-space-lg, 24px);
-      margin-top: var(--vio-space-xl, 32px);
-    }
-    .order-line {
-      display: grid;
-      grid-template-columns: 56px 1fr auto;
-      gap: 12px;
-      padding: 8px 0;
-      align-items: center;
-    }
-    .order-line-img {
-      aspect-ratio: 1;
-      background: #fff;
-      overflow: hidden;
-    }
-    .order-line-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
-    .order-line-meta { font-size: 13px; }
-    .order-line-meta b { display: block; }
-    .order-line-meta span {
-      color: var(--vio-color-text-secondary, #666);
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: var(--vio-tracking-label, 0.1em);
-    }
-    .order-line-price { font-weight: 700; font-size: 14px; }
-    .order-row {
-      display: flex;
-      justify-content: space-between;
-      padding: 8px 0;
-      font-size: 14px;
-    }
-    .order-row.total {
-      border-top: 1px solid var(--vio-color-border-default, #ccc);
-      margin-top: var(--vio-space-sm, 8px);
-      padding-top: var(--vio-space-md, 16px);
-      font-weight: 700;
-      font-size: 16px;
-    }
+          ${isVipps ? html`
+                <section class="section">
+                  <div class="section-label">Kontakt</div>
+                  <div class="field">
+                    <label>E-post * <span style="font-weight:400;opacity:0.6">(for kvittering — adresse fylles ut i Vipps)</span></label>
+                    <input
+                      type="email"
+                      required
+                      autocomplete="email"
+                      .value=${this.form.email}
+                      @input=${(e) => this.onFieldChange("email", e.target.value)}
+                    />
+                  </div>
+                </section>
+              ` : ""}
 
-    @media (max-width: 600px) {
-      .form-row { grid-template-columns: 1fr; gap: 0; }
-      .payment-grid { grid-template-columns: 1fr; }
-      .body { padding: 32px var(--vio-space-lg, 24px) 64px; }
-    }
-  `;
+          <section class="section">
+            <div class="section-label">${isVipps ? "Betaling" : "Steg 2"}</div>
+            ${method ? html`
+                  <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
+                    <h3 class="section-heading" style="margin:0;">
+                      Betalingsmåte: <b>${this.methodLabel(method)}</b>
+                    </h3>
+                    <button
+                      type="button"
+                      style="background:none; border:none; color:var(--vio-color-accent, #c14a3b); text-decoration:underline; font-size:13px; cursor:pointer;"
+                      @click=${() => {
+      this.unmountKlarna();
+      Vio.checkout.selectPaymentMethod("");
+    }}
+                    >
+                      Endre
+                    </button>
+                  </div>
+
+                  ${method === "klarna" ? this.renderKlarnaPanel() : ""}
+                  ${method === "stripe" ? html`
+                        <button
+                          class="payment-btn primary complete-cta"
+                          @click=${() => void this.onPay("stripe")}
+                          ?disabled=${this.stripeLoading || !this.isAddressValid || !this.hasSelectedShipping}
+                          title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
+                        >
+                          ${this.stripeLoading ? "G\xE5r til Stripe\u2026" : `Betal ${this.payTotalLabel()} med Stripe`}
+                        </button>
+                      ` : ""}
+                  ${method === "vipps" ? html`
+                        <button
+                          class="payment-btn primary complete-cta"
+                          @click=${() => void this.onPay("vipps")}
+                          ?disabled=${this.vippsLoading}
+                        >
+                          ${this.vippsLoading ? "G\xE5r til Vipps\u2026" : `Betal ${this.payTotalLabel()} med Vipps`}
+                        </button>
+                      ` : ""}
+                  ${method === "apple-pay" ? html`
+                        <button
+                          class="payment-btn primary complete-cta"
+                          @click=${() => void this.onPay("apple-pay")}
+                          ?disabled=${this.applePayInProgress || !this.isAddressValid || !this.hasSelectedShipping}
+                          title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
+                        >
+                          ${this.applePayInProgress ? "\xC5pner\u2026" : `Betal ${this.payTotalLabel()} med Apple Pay`}
+                        </button>
+                      ` : ""}
+                  ${showCompleteCta && method !== "stripe" && method !== "vipps" ? html`
+                        <button
+                          class="payment-btn primary complete-cta"
+                          @click=${this.onCompleteOrder}
+                          ?disabled=${!this.isAddressValid || !this.hasSelectedShipping}
+                          title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
+                        >
+                          Betal ${this.payTotalLabel()} med ${this.methodLabel(method ?? null)}
+                        </button>
+                      ` : ""}
+                  ${!isVipps && !this.isAddressValid ? html`
+                        <div style="font-size: 12px; color: var(--vio-color-accent, #c14a3b); text-align: center; margin-top: 8px;">
+                          Vennligst fyll ut leveringsadresse for å fullføre betalingen
+                        </div>
+                      ` : !isVipps && !this.hasSelectedShipping ? html`
+                          <div style="font-size: 12px; color: var(--vio-color-accent, #c14a3b); text-align: center; margin-top: 8px;">
+                            Vennligst velg en fraktmetode for å fullføre betalingen
+                          </div>
+                        ` : ""}
+                ` : html`
+                  <h3 class="section-heading">Velg betalingsmåte</h3>
+                  <div class="payment-grid">
+                    ${this.methodEnabled("apple-pay") && this.applePayAvailable ? html`
+                          <button
+                            class="payment-btn primary"
+                            @click=${() => this.onPay("apple-pay")}
+                            ?disabled=${this.applePayInProgress}
+                          >
+                            ${this.applePayInProgress ? "\xC5pner\u2026" : html`<span style="display:inline-flex;align-items:center;gap:6px"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="width:18px;height:18px"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>Apple Pay</span>`}
+                          </button>
+                        ` : ""}
+                    ${this.methodEnabled("stripe") ? html`
+                          <button
+                            class="payment-btn"
+                            @click=${() => this.onPay("stripe")}
+                            ?disabled=${this.stripeLoading}
+                          >
+                            <img src=${STRIPE_LOGO_SRC3} style="height: 20px; display: block;" alt="Stripe" />
+                          </button>
+                        ` : ""}
+                    ${this.methodEnabled("klarna") && this.klarnaAvailable ? html`
+                          <button class="payment-btn" @click=${() => this.onPay("klarna")}>
+                            Klarna
+                          </button>
+                        ` : ""}
+                    ${this.methodEnabled("vipps") ? html`
+                          <button class="payment-btn" @click=${() => this.onPay("vipps")}>
+                            <span style="color:#ff5b24;font-weight:800;font-size:17px;letter-spacing:-0.02em">vipps</span>
+                          </button>
+                        ` : ""}
+                    ${this.methodEnabled("apple-pay") && !this.applePayAvailable ? html`
+                          <div class="apple-pay-note">
+                             Pay krever Safari på iOS eller macOS med Apple Pay konfigurert.
+                          </div>
+                        ` : ""}
+                  </div>
+                `}
+            ${this.paymentNotice ? html`<div class="payment-notice">${this.paymentNotice}</div>` : ""}
+            ${this.paymentError ? html`<div class="payment-error">${this.paymentError}</div>` : ""}
+          </section>
+
+          ${this.items.length > 0 ? html`
+                <section class="order-summary">
+                  ${this.items.map(
+      (item) => html`
+                      <div class="order-line">
+                        <div class="order-line-img">
+                          ${item.imageUrl ? html`<img src=${item.imageUrl} alt=${item.name} />` : ""}
+                        </div>
+                        <div class="order-line-meta">
+                          <span>${item.brand}</span>
+                          <b>${item.name}</b>
+                          <span>×${item.quantity}</span>
+                        </div>
+                        <div class="order-line-price">
+                          ${formatPrice(item.unitPrice * item.quantity, item.currency)}
+                        </div>
+                      </div>
+                    `
+    )}
+                  <div class="order-row" style="margin-top: 16px;">
+                    <span>Sum</span><span>${this.orderTotal()}</span>
+                  </div>
+                  <div class="order-row">
+                    <span>Frakt${this.shippingMajor() > 0 && this.shippingOption ? ` \u2013 ${this.shippingOption.method || this.shippingOption.name}` : ""}</span>
+                    <span>${this.shippingMajor() > 0 ? formatPrice(this.shippingMajor(), this.checkoutState?.currency) : this.shippingLabel}</span>
+                  </div>
+                  <div class="order-row total">
+                    <span>Totalt</span><span>${this.payTotalLabel()}</span>
+                  </div>
+                </section>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], VioCheckout.prototype, "open", 2);
+], _VioCheckout.prototype, "open", 2);
 __decorateClass([
   property({ type: String })
-], VioCheckout.prototype, "heading", 2);
+], _VioCheckout.prototype, "heading", 2);
 __decorateClass([
   property({ type: String, attribute: "shipping-label" })
-], VioCheckout.prototype, "shippingLabel", 2);
+], _VioCheckout.prototype, "shippingLabel", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], VioCheckout.prototype, "express", 2);
+], _VioCheckout.prototype, "express", 2);
+__decorateClass([
+  state()
+], _VioCheckout.prototype, "checkoutState", 2);
+__decorateClass([
+  state()
+], _VioCheckout.prototype, "items", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "checkoutState", 2);
+], _VioCheckout.prototype, "applePayAvailable", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "items", 2);
+], _VioCheckout.prototype, "applePayInProgress", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "applePayAvailable", 2);
+], _VioCheckout.prototype, "klarnaAvailable", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "applePayInProgress", 2);
+], _VioCheckout.prototype, "orderConfirmed", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "klarnaAvailable", 2);
+], _VioCheckout.prototype, "confirmedMethod", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "orderConfirmed", 2);
+], _VioCheckout.prototype, "paymentError", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "confirmedMethod", 2);
+], _VioCheckout.prototype, "paymentNotice", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "paymentError", 2);
+], _VioCheckout.prototype, "confirmedOrder", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "confirmedOrder", 2);
+], _VioCheckout.prototype, "klarnaCategories", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "klarnaCategories", 2);
+], _VioCheckout.prototype, "klarnaSelectedCat", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "klarnaSelectedCat", 2);
+], _VioCheckout.prototype, "klarnaAuthorizing", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "klarnaAuthorizing", 2);
+], _VioCheckout.prototype, "selectedShipping", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "selectedShipping", 2);
+], _VioCheckout.prototype, "availableShippingsList", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "form", 2);
-VioCheckout = __decorateClass([
-  customElement("vio-checkout")
-], VioCheckout);
+], _VioCheckout.prototype, "availableMethods", 2);
+__decorateClass([
+  state()
+], _VioCheckout.prototype, "stripeLoading", 2);
+__decorateClass([
+  state()
+], _VioCheckout.prototype, "vippsLoading", 2);
+__decorateClass([
+  state()
+], _VioCheckout.prototype, "form", 2);
+var VioCheckout = _VioCheckout;
 
-// src/ui/index.ts
-var VIO_UI_VERSION = "0.1.0";
+// src/ui/elements.ts
+function registerVioElements() {
+  if (typeof customElements === "undefined" || typeof customElements.get !== "function" || typeof customElements.define !== "function")
+    return;
+  const defs = [
+    ["vio-product", VioProduct],
+    ["vio-product-carousel", VioProductCarousel],
+    ["vio-product-detail", VioProductDetail],
+    ["vio-cart", VioCart],
+    ["vio-checkout", VioCheckout]
+  ];
+  for (const [tag, ctor] of defs) {
+    if (!customElements.get(tag)) customElements.define(tag, ctor);
+  }
+}
 
-export { VIO_UI_VERSION, VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens };
-//# sourceMappingURL=chunk-4CCGE7DE.js.map
-//# sourceMappingURL=chunk-4CCGE7DE.js.map
+export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, registerVioElements };
+//# sourceMappingURL=chunk-NWORYWIL.js.map
+//# sourceMappingURL=chunk-NWORYWIL.js.map