@vio-live/web-sdk 0.2.0 → 0.4.0

package/dist/{chunk-7JSSYPRN.js → chunk-V5ZQG2H5.js}

@@ -1,7 +1,159 @@
-import { Vio, __decorateClass, primaryImageUrl, displayPrice, formatPrice, KLARNA_SHIPPING_OPTIONS } from './chunk-SOO2G6CF.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 THEME_KEY_TO_CSS_VAR = {
+  colorText: "--vio-color-text",
+  colorTextSecondary: "--vio-color-text-secondary",
+  colorTextTertiary: "--vio-color-text-tertiary",
+  colorTextOnPrimary: "--vio-color-text-on-primary",
+  colorAccent: "--vio-color-accent",
+  colorSurface: "--vio-color-surface",
+  colorSurfaceMuted: "--vio-color-surface-muted",
+  colorSurfaceHover: "--vio-color-surface-hover",
+  colorBorder: "--vio-color-border",
+  colorBorderDefault: "--vio-color-border-default",
+  fontSerif: "--vio-font-serif",
+  fontSans: "--vio-font-sans"
+};
+function applyVioTheme(overrides, target = typeof document !== "undefined" ? document.documentElement : null) {
+  if (!target) return;
+  for (const key of Object.keys(THEME_KEY_TO_CSS_VAR)) {
+    const cssVar = THEME_KEY_TO_CSS_VAR[key];
+    const value = overrides[key];
+    if (value) {
+      target.style.setProperty(cssVar, value);
+    } else if (key in overrides) {
+      target.style.removeProperty(cssVar);
+    }
+  }
+}
 var VioProduct = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -13,6 +165,9 @@ 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;
@@ -185,7 +340,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;
     }
@@ -236,12 +391,13 @@ 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>
     `;
   }
@@ -270,6 +426,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);
@@ -625,6 +790,9 @@ function sponsorNameFromBootstrap(sponsorId) {
   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);
@@ -641,6 +809,12 @@ var VioProductDetail = class extends LitElement {
     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) => {
@@ -652,6 +826,7 @@ var VioProductDetail = class extends LitElement {
       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();
     };
@@ -890,6 +1065,13 @@ var VioProductDetail = class extends LitElement {
       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 {
@@ -960,6 +1142,35 @@ var VioProductDetail = class extends LitElement {
     .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 {
@@ -1071,49 +1282,262 @@ var VioProductDetail = class extends LitElement {
       this.product = null;
       return;
     }
+    const seq = ++this.fetchSeq;
     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;
+    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));
       }
-    } catch (err) {
-      this.fetchError = err instanceof Error ? err.message : String(err);
-    } finally {
+    }
+    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 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;
+    }
+  }
+  /** 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;
   }
-  /** Resolve the active variant from the selected option values. */
+  /** 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 || 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())
-      );
+    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));
     });
-    return found ?? this.product.variants[0] ?? null;
   }
   get unitPrice() {
     const v = this.selectedVariant();
@@ -1127,7 +1551,7 @@ var VioProductDetail = class extends LitElement {
   }
   get availableQuantity() {
     const v = this.selectedVariant();
-    if (v) return v.quantity ?? 0;
+    if (v) return this.variantSellableQty(v);
     return this.product?.quantity ?? 0;
   }
   stockLabel() {
@@ -1136,9 +1560,50 @@ var VioProductDetail = class extends LitElement {
     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) {
-    this.selectedOptions = { ...this.selectedOptions, [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 ?? [];
@@ -1209,6 +1674,32 @@ var VioProductDetail = class extends LitElement {
       this.adding = false;
     }
   }
+  /** Buy with Vipps — opens the checkout with Vipps preselected. */
+  buyWithVipps() {
+    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: "vipps", express: false }
+      })
+    );
+  }
+  /** 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 }
+      })
+    );
+  }
   /**
    * 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
@@ -1333,17 +1824,35 @@ var VioProductDetail = class extends LitElement {
             </button>
           </div>
 
-          ${this.availableQuantity > 0 && this.applePayOk ? html`
+          ${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"
                 >
-                  Kjøp nå med  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 ? html`
+          ${this.availableQuantity > 0 && this.methodEnabled("klarna") ? html`
                 <button
                   class="buy-klarna"
                   @click=${this.buyWithKlarna}
@@ -1358,6 +1867,18 @@ var VioProductDetail = class extends LitElement {
                 </button>
               ` : ""}
 
+          ${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>
@@ -1377,17 +1898,22 @@ var VioProductDetail = class extends LitElement {
         <div class="option-group">
           <div class="option-label">${opt.name}</div>
           <div class="option-values">
-            ${values.map(
-        (val) => html`
+            ${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"
+                  class="option-pill ${available ? "" : "unavailable"}"
                   @click=${() => this.selectOption(opt.name, val)}
-                  aria-pressed=${this.selectedOptions[opt.name] === val}
+                  aria-pressed=${isSelected}
+                  ?disabled=${!available}
+                  title=${available ? "" : "Utsolgt"}
                 >
                   ${val}
                 </button>
-              `
-      )}
+              `;
+      })}
           </div>
         </div>
       `;
@@ -1437,6 +1963,9 @@ __decorateClass([
 __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);
@@ -1446,6 +1975,9 @@ function normalizeValues(raw) {
   }
   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);
@@ -1456,15 +1988,21 @@ var VioCart = class extends LitElement {
     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 {
@@ -1672,7 +2210,7 @@ var VioCart = class extends LitElement {
       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%;
@@ -1694,6 +2232,50 @@ var VioCart = class extends LitElement {
     }
     .klarna-btn:hover { background: #ffa1ba; }
     .klarna-btn .klarna-logo { height: 15px; width: auto; display: inline-block; }
+    /* 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;
+      justify-content: center;
+      font-family: var(--vio-font-sans, -apple-system, sans-serif);
+      transition: background 0.15s;
+    }
+    .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 {
@@ -1768,6 +2350,7 @@ var VioCart = class extends LitElement {
     this.carts = Vio.cart.getAllCarts();
     this.itemCount = Vio.cart.itemCount;
     Vio.cart.addEventListener("change", this.boundOnCartChange);
+    void this.loadAvailablePaymentMethods();
   }
   disconnectedCallback() {
     Vio.cart.removeEventListener("change", this.boundOnCartChange);
@@ -1778,6 +2361,39 @@ var VioCart = class extends LitElement {
   }
   show() {
     this.open = true;
+    void this.loadAvailablePaymentMethods();
+  }
+  /** 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;
+    }
+    try {
+      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("[VioCart] 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));
   }
   updated(changed) {
     if (changed.has("open") && this.open) {
@@ -1864,6 +2480,32 @@ var VioCart = class extends LitElement {
       })
     );
   }
+  /** 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:checkout-open", {
+        bubbles: true,
+        composed: true,
+        detail: { sponsorId: firstSponsorId, paymentMethod: "vipps", express: false }
+      })
+    );
+  }
+  /** 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()) {
@@ -1959,27 +2601,48 @@ var VioCart = class extends LitElement {
                     ${formatPrice(this.totalAcrossSponsors, this.primaryCurrency)}
                   </span>
                 </div>
-                ${this.applePayAvailable ? html`
+                ${this.methodEnabled("apple-pay") && this.applePayAvailable ? html`
                       <button
                         class="applepay-btn"
                         @click=${this.onApplePay}
                         aria-label="Betal med Apple Pay"
                       >
-                        <span class="ap-logo">${"\uF8FF"}</span> 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>
                     ` : ""}
-                <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>
               </div>
             `}
       </aside>
@@ -2033,10 +2696,16 @@ __decorateClass([
 __decorateClass([
   state()
 ], VioCart.prototype, "applePayAvailable", 2);
+__decorateClass([
+  state()
+], VioCart.prototype, "availableMethods", 2);
 __decorateClass([
   state()
 ], VioCart.prototype, "confirmedOrder", 2);
-var VioCheckout = class extends LitElement {
+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;
@@ -2051,6 +2720,7 @@ var VioCheckout = class extends LitElement {
     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;
@@ -2061,6 +2731,10 @@ var VioCheckout = class extends LitElement {
     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: "",
@@ -2069,13 +2743,27 @@ var VioCheckout = class extends LitElement {
       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) {
-        this.refreshApplePay();
-        this.refreshKlarna();
+        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;
@@ -2083,7 +2771,9 @@ var VioCheckout = class extends LitElement {
         this.confirmedMethod = null;
         this.confirmedOrder = null;
         this.paymentError = null;
+        this.paymentNotice = null;
         this.express = false;
+        this.availableMethods = null;
         this.unmountKlarna();
       }
     };
@@ -2164,6 +2854,21 @@ var VioCheckout = class extends LitElement {
       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 {
@@ -2344,8 +3049,9 @@ var VioCheckout = class extends LitElement {
       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);
@@ -2429,9 +3135,27 @@ var VioCheckout = class extends LitElement {
       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 {
@@ -2559,6 +3283,209 @@ var VioCheckout = class extends LitElement {
     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() {
@@ -2568,7 +3495,10 @@ var VioCheckout = class extends LitElement {
     this.unmountKlarna();
     super.disconnectedCallback();
   }
-  updated() {
+  updated(changed) {
+    if (changed.has("open") && this.open && this.availableShippingsList.length === 0) {
+      void this.loadAvailableShippings();
+    }
     void this.mountKlarnaIfNeeded();
   }
   close() {
@@ -2578,6 +3508,83 @@ var VioCheckout = class extends LitElement {
   }
   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();
@@ -2616,6 +3623,12 @@ var VioCheckout = class extends LitElement {
       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);
@@ -2636,14 +3649,33 @@ var VioCheckout = class extends LitElement {
     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() {
-    return KLARNA_SHIPPING_OPTIONS.find((o) => o.id === this.selectedShipping) ?? null;
+    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. */
-  onSelectShipping(id) {
+  /** 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) {
@@ -2661,6 +3693,7 @@ var VioCheckout = class extends LitElement {
   async onKlarnaAuthorize() {
     if (!this.klarnaHandle || this.klarnaAuthorizing) return;
     this.paymentError = null;
+    this.paymentNotice = null;
     this.klarnaAuthorizing = true;
     try {
       await this.klarnaHandle.authorize();
@@ -2685,24 +3718,80 @@ var VioCheckout = class extends LitElement {
       this.applePayInProgress = false;
     }
   }
-  onPay(method) {
+  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 (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.
+   * 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);
   }
   /**
@@ -2739,8 +3828,10 @@ var VioCheckout = class extends LitElement {
         return "Klarna";
       case "vipps":
         return "Vipps";
+      case "stripe":
+        return "Stripe";
       case "card":
-        return "kort";
+        return "Kort";
       default:
         return "";
     }
@@ -2754,9 +3845,14 @@ var VioCheckout = class extends LitElement {
     if (!s) return "";
     return formatPrice(s.subtotal, s.currency);
   }
-  /** Shipping cost (major units) applied in express mode, else 0. */
+  /** 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() {
-    return this.express ? (this.shippingOption?.price ?? 0) / 100 : 0;
+    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() {
@@ -2815,24 +3911,26 @@ var VioCheckout = class extends LitElement {
   }
   /** Klarna Payments widget panel: shipping + category chips + widget + pay button. */
   renderKlarnaPanel() {
-    const currency = this.checkoutState?.currency ?? "NOK";
+    const currency = this.checkoutState?.currency || getGlobalCurrency();
     return html`
       <div class="klarna-panel">
         ${this.express ? html`
               <div class="ship-select" role="radiogroup" aria-label="Frakt">
-                ${KLARNA_SHIPPING_OPTIONS.map(
+                ${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=${() => this.onSelectShipping(o.id)}
+                      @click=${() => void this.onSelectShipping(o.id)}
                     >
                       <span class="ship-meta">
-                        <b>${o.method}</b><span>${o.description}</span>
+                        <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>
-                      <span class="ship-price">${formatPrice(o.price / 100, currency)}</span>
                     </button>
                   `
     )}
@@ -2852,19 +3950,43 @@ var VioCheckout = class extends LitElement {
     )}
               </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" : `Betal ${this.payTotalLabel()} med Klarna`}
+          ${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>
@@ -2874,13 +3996,13 @@ var VioCheckout = class extends LitElement {
       (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>
+                      <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(), this.checkoutState?.currency ?? "NOK")}</span>
+                  <span>${formatPrice(this.shippingMajor(), currency)}</span>
                 </div>
                 <div class="order-row total">
                   <span>Totalt</span><span>${this.payTotalLabel()}</span>
@@ -2888,6 +4010,7 @@ var VioCheckout = class extends LitElement {
               </div>
             ` : ""}
         ${this.renderKlarnaPanel()}
+        ${this.paymentNotice ? html`<div class="payment-notice">${this.paymentNotice}</div>` : ""}
         ${this.paymentError ? html`<div class="payment-error">${this.paymentError}</div>` : ""}
       </section>
     `;
@@ -2895,24 +4018,28 @@ var VioCheckout = class extends LitElement {
   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>
+                <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>
+                <label>Etternavn *</label>
                 <input
                   type="text"
+                  required
                   autocomplete="family-name"
                   .value=${this.form.lastName}
                   @input=${(e) => this.onFieldChange("lastName", e.target.value)}
@@ -2920,18 +4047,20 @@ var VioCheckout = class extends LitElement {
               </div>
             </div>
             <div class="field">
-              <label>E-post</label>
+              <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>
+              <label>Adresse *</label>
               <input
                 type="text"
+                required
                 autocomplete="street-address"
                 .value=${this.form.address}
                 @input=${(e) => this.onFieldChange("address", e.target.value)}
@@ -2939,79 +4068,182 @@ var VioCheckout = class extends LitElement {
             </div>
             <div class="form-row">
               <div class="field">
-                <label>Postnummer</label>
+                <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>
+                <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>
+          ` : ""}
+
+          ${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>
+              ` : ""}
 
           <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`
+            <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
-                      class="payment-btn primary complete-cta"
-                      @click=${this.onCompleteOrder}
+                      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("");
+    }}
                     >
-                      Betal ${this.orderTotal()} med ${this.methodLabel(method ?? null)}
+                      Endre
                     </button>
-                  ` : ""}
-              ${method === "klarna" ? this.renderKlarnaPanel() : ""}
-              ${this.paymentError ? html`<div class="payment-error">${this.paymentError}</div>` : ""}
-            </div>
+                  </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`
@@ -3037,10 +4269,11 @@ var VioCheckout = class extends LitElement {
                     <span>Sum</span><span>${this.orderTotal()}</span>
                   </div>
                   <div class="order-row">
-                    <span>Frakt</span><span>${this.shippingLabel}</span>
+                    <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.orderTotal()}</span>
+                    <span>Totalt</span><span>${this.payTotalLabel()}</span>
                   </div>
                 </section>
               ` : ""}
@@ -3051,62 +4284,79 @@ var VioCheckout = class extends LitElement {
 };
 __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, "applePayAvailable", 2);
+__decorateClass([
+  state()
+], _VioCheckout.prototype, "applePayInProgress", 2);
+__decorateClass([
+  state()
+], _VioCheckout.prototype, "klarnaAvailable", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "checkoutState", 2);
+], _VioCheckout.prototype, "orderConfirmed", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "items", 2);
+], _VioCheckout.prototype, "confirmedMethod", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "applePayAvailable", 2);
+], _VioCheckout.prototype, "paymentError", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "applePayInProgress", 2);
+], _VioCheckout.prototype, "paymentNotice", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "klarnaAvailable", 2);
+], _VioCheckout.prototype, "confirmedOrder", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "orderConfirmed", 2);
+], _VioCheckout.prototype, "klarnaCategories", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "confirmedMethod", 2);
+], _VioCheckout.prototype, "klarnaSelectedCat", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "paymentError", 2);
+], _VioCheckout.prototype, "klarnaAuthorizing", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "confirmedOrder", 2);
+], _VioCheckout.prototype, "selectedShipping", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "klarnaCategories", 2);
+], _VioCheckout.prototype, "availableShippingsList", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "klarnaSelectedCat", 2);
+], _VioCheckout.prototype, "availableMethods", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "klarnaAuthorizing", 2);
+], _VioCheckout.prototype, "stripeLoading", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "selectedShipping", 2);
+], _VioCheckout.prototype, "vippsLoading", 2);
 __decorateClass([
   state()
-], VioCheckout.prototype, "form", 2);
+], _VioCheckout.prototype, "form", 2);
+var VioCheckout = _VioCheckout;
 
 // src/ui/elements.ts
 function registerVioElements() {
-  if (typeof customElements === "undefined") return;
+  if (typeof customElements === "undefined" || typeof customElements.get !== "function" || typeof customElements.define !== "function")
+    return;
   const defs = [
     ["vio-product", VioProduct],
     ["vio-product-carousel", VioProductCarousel],
@@ -3119,6 +4369,6 @@ function registerVioElements() {
   }
 }
 
-export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, registerVioElements };
-//# sourceMappingURL=chunk-7JSSYPRN.js.map
-//# sourceMappingURL=chunk-7JSSYPRN.js.map
+export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
+//# sourceMappingURL=chunk-V5ZQG2H5.js.map
+//# sourceMappingURL=chunk-V5ZQG2H5.js.map