@vio-live/web-sdk 0.1.0 → 0.2.0

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

@@ -1,133 +1,7 @@
-import { __decorateClass, Vio, primaryImageUrl, displayPrice, formatPrice, KLARNA_SHIPPING_OPTIONS } from './chunk-5SPY7TH6.js';
-import { css, LitElement, html } from 'lit';
-import { property, state, customElement, query } from 'lit/decorators.js';
+import { Vio, __decorateClass, primaryImageUrl, displayPrice, formatPrice, KLARNA_SHIPPING_OPTIONS } from './chunk-SOO2G6CF.js';
+import { LitElement, css, html } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
 
-// src/ui/tokens.ts
-var VioTokens = {
-  color: {
-    text: {
-      primary: "#0a0a0a",
-      secondary: "#666666",
-      tertiary: "#999999",
-      onPrimary: "#ffffff"
-    },
-    accent: {
-      editorial: "#c14a3b"
-      // "REDAKSJONENS FAVORITTER" red
-    },
-    surface: {
-      base: "#ffffff",
-      muted: "#f2f2f2",
-      // product image background
-      hover: "#fafafa"
-    },
-    border: {
-      subtle: "#e5e5e5",
-      default: "#cccccc"
-    }
-  },
-  font: {
-    serif: '"Tinos", "Playfair Display", Georgia, serif',
-    sans: '"Inter", -apple-system, "Helvetica Neue", Arial, sans-serif'
-  },
-  size: {
-    xs: "12px",
-    sm: "14px",
-    md: "16px",
-    lg: "20px",
-    xl: "24px",
-    "2xl": "32px",
-    "3xl": "40px"
-  },
-  weight: {
-    regular: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700
-  },
-  tracking: {
-    label: "0.1em",
-    // uppercase labels (BRAND, RETAILER, REDAKSJONENS FAVORITTER)
-    title: "0"
-  },
-  lineHeight: {
-    tight: 1.1,
-    snug: 1.3,
-    normal: 1.5
-  },
-  space: {
-    xs: "4px",
-    sm: "8px",
-    md: "16px",
-    lg: "24px",
-    xl: "32px",
-    "2xl": "48px",
-    "3xl": "64px"
-  },
-  radius: {
-    none: "0",
-    sm: "2px",
-    md: "4px",
-    lg: "8px",
-    full: "9999px"
-  }
-};
-var VIO_TOKENS_CSS = `
-  :root {
-    /* color \u2014 text */
-    --vio-color-text:           ${VioTokens.color.text.primary};
-    --vio-color-text-secondary: ${VioTokens.color.text.secondary};
-    --vio-color-text-tertiary:  ${VioTokens.color.text.tertiary};
-    --vio-color-text-on-primary:${VioTokens.color.text.onPrimary};
-
-    /* color \u2014 accent */
-    --vio-color-accent: ${VioTokens.color.accent.editorial};
-
-    /* color \u2014 surface */
-    --vio-color-surface:       ${VioTokens.color.surface.base};
-    --vio-color-surface-muted: ${VioTokens.color.surface.muted};
-    --vio-color-surface-hover: ${VioTokens.color.surface.hover};
-
-    /* color \u2014 border */
-    --vio-color-border:         ${VioTokens.color.border.subtle};
-    --vio-color-border-default: ${VioTokens.color.border.default};
-
-    /* font */
-    --vio-font-serif: ${VioTokens.font.serif};
-    --vio-font-sans:  ${VioTokens.font.sans};
-
-    /* size */
-    --vio-size-xs: ${VioTokens.size.xs};
-    --vio-size-sm: ${VioTokens.size.sm};
-    --vio-size-md: ${VioTokens.size.md};
-    --vio-size-lg: ${VioTokens.size.lg};
-    --vio-size-xl: ${VioTokens.size.xl};
-
-    /* tracking (uppercase letterspacing) */
-    --vio-tracking-label: ${VioTokens.tracking.label};
-
-    /* space */
-    --vio-space-xs: ${VioTokens.space.xs};
-    --vio-space-sm: ${VioTokens.space.sm};
-    --vio-space-md: ${VioTokens.space.md};
-    --vio-space-lg: ${VioTokens.space.lg};
-    --vio-space-xl: ${VioTokens.space.xl};
-
-    /* radius */
-    --vio-radius-sm: ${VioTokens.radius.sm};
-    --vio-radius-md: ${VioTokens.radius.md};
-    --vio-radius-lg: ${VioTokens.radius.lg};
-  }
-`;
-function injectTokens() {
-  if (typeof document === "undefined") return;
-  if (document.querySelector('style[data-vio="tokens"]') !== null) return;
-  const style = document.createElement("style");
-  style.setAttribute("data-vio", "tokens");
-  style.textContent = VIO_TOKENS_CSS;
-  document.head.appendChild(style);
-}
-injectTokens();
 var VioProduct = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -144,6 +18,116 @@ var VioProduct = class extends LitElement {
     this.justAdded = false;
     this.boundCartChange = () => this.updateInCart();
   }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      cursor: pointer;
+      font-family: var(--vio-font-sans, -apple-system, sans-serif);
+      color: var(--vio-color-text, #0a0a0a);
+      -webkit-tap-highlight-color: transparent;
+    }
+    .card {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+    .image {
+      position: relative;
+      aspect-ratio: 1 / 1;
+      width: 100%;
+      background-color: var(--vio-color-surface-muted, #f2f2f2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      transition: opacity 0.2s ease;
+    }
+    :host(:hover) .image img { opacity: 0.92; }
+
+    /* Quick add-to-cart button — overlaid bottom-right of the image, like the
+       reference card's wishlist heart but wired to add the product to the cart. */
+    .add-btn {
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.96);
+      border: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: #0a0a0a;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
+      transition: transform 0.14s ease, background 0.14s ease, color 0.14s ease;
+      padding: 0;
+      z-index: 2;
+    }
+    .add-btn:hover { background: #fff; transform: scale(1.08); }
+    .add-btn:active { transform: scale(0.95); }
+    /* In cart → black circle with a white tick (matches the floating cart). */
+    .add-btn.in-cart { background: #0a0a0a; color: #fff; }
+    .add-btn.in-cart:hover { background: #222; }
+    .add-btn.pop { animation: vio-add-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
+    .add-btn svg { width: 18px; height: 18px; }
+    .add-btn .add-count { font-size: 15px; font-weight: 700; line-height: 1; }
+    @keyframes vio-add-pop {
+      0% { transform: scale(1); }
+      35% { transform: scale(1.32); }
+      60% { transform: scale(0.9); }
+      100% { transform: scale(1); }
+    }
+    .image img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+    .meta {
+      padding-top: 14px;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+    .brand {
+      font-size: var(--vio-size-xs, 12px);
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      text-transform: uppercase;
+      color: var(--vio-color-text-secondary, #666);
+      font-weight: 500;
+      margin-bottom: 6px;
+    }
+    .name {
+      font-size: var(--vio-size-md, 16px);
+      font-weight: 500;
+      line-height: 1.3;
+      margin: 0 0 10px;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .price {
+      font-size: var(--vio-size-md, 16px);
+      font-weight: 700;
+      margin-bottom: 16px;
+    }
+    .retailer {
+      font-size: var(--vio-size-xs, 12px);
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      text-transform: uppercase;
+      color: var(--vio-color-text-tertiary, #999);
+      font-weight: 500;
+      margin-top: auto;
+    }
+  `;
+  }
   connectedCallback() {
     super.connectedCallback();
     this.updateInCart();
@@ -262,114 +246,6 @@ var VioProduct = class extends LitElement {
     `;
   }
 };
-VioProduct.styles = css`
-    :host {
-      display: block;
-      box-sizing: border-box;
-      width: 100%;
-      cursor: pointer;
-      font-family: var(--vio-font-sans, -apple-system, sans-serif);
-      color: var(--vio-color-text, #0a0a0a);
-      -webkit-tap-highlight-color: transparent;
-    }
-    .card {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-    .image {
-      position: relative;
-      aspect-ratio: 1 / 1;
-      width: 100%;
-      background-color: var(--vio-color-surface-muted, #f2f2f2);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      transition: opacity 0.2s ease;
-    }
-    :host(:hover) .image img { opacity: 0.92; }
-
-    /* Quick add-to-cart button — overlaid bottom-right of the image, like the
-       reference card's wishlist heart but wired to add the product to the cart. */
-    .add-btn {
-      position: absolute;
-      right: 10px;
-      bottom: 10px;
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.96);
-      border: none;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      color: #0a0a0a;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
-      transition: transform 0.14s ease, background 0.14s ease, color 0.14s ease;
-      padding: 0;
-      z-index: 2;
-    }
-    .add-btn:hover { background: #fff; transform: scale(1.08); }
-    .add-btn:active { transform: scale(0.95); }
-    /* In cart → black circle with a white tick (matches the floating cart). */
-    .add-btn.in-cart { background: #0a0a0a; color: #fff; }
-    .add-btn.in-cart:hover { background: #222; }
-    .add-btn.pop { animation: vio-add-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
-    .add-btn svg { width: 18px; height: 18px; }
-    .add-btn .add-count { font-size: 15px; font-weight: 700; line-height: 1; }
-    @keyframes vio-add-pop {
-      0% { transform: scale(1); }
-      35% { transform: scale(1.32); }
-      60% { transform: scale(0.9); }
-      100% { transform: scale(1); }
-    }
-    .image img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      display: block;
-    }
-    .meta {
-      padding-top: 14px;
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-    }
-    .brand {
-      font-size: var(--vio-size-xs, 12px);
-      letter-spacing: var(--vio-tracking-label, 0.1em);
-      text-transform: uppercase;
-      color: var(--vio-color-text-secondary, #666);
-      font-weight: 500;
-      margin-bottom: 6px;
-    }
-    .name {
-      font-size: var(--vio-size-md, 16px);
-      font-weight: 500;
-      line-height: 1.3;
-      margin: 0 0 10px;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-    .price {
-      font-size: var(--vio-size-md, 16px);
-      font-weight: 700;
-      margin-bottom: 16px;
-    }
-    .retailer {
-      font-size: var(--vio-size-xs, 12px);
-      letter-spacing: var(--vio-tracking-label, 0.1em);
-      text-transform: uppercase;
-      color: var(--vio-color-text-tertiary, #999);
-      font-weight: 500;
-      margin-top: auto;
-    }
-  `;
 __decorateClass([
   property({ type: String })
 ], VioProduct.prototype, "brand", 2);
@@ -403,9 +279,6 @@ __decorateClass([
 __decorateClass([
   state()
 ], VioProduct.prototype, "justAdded", 2);
-VioProduct = __decorateClass([
-  customElement("vio-product")
-], VioProduct);
 var VioProductCarousel = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -423,158 +296,23 @@ var VioProductCarousel = class extends LitElement {
     this.isLoading = false;
     this.fetchError = "";
   }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.productRefs.trim() || this.productIds.trim()) {
-      void this.autoFetch();
-    }
-  }
-  updated(changed) {
-    const propChanged = changed.has("productRefs") || changed.has("productIds") || changed.has("commerceKey") || changed.has("sponsorId");
-    if (propChanged && (this.productRefs.trim() || this.productIds.trim())) {
-      void this.autoFetch();
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      font-family: var(--vio-font-sans, -apple-system, sans-serif);
+      color: var(--vio-color-text, #0a0a0a);
+      padding: var(--vio-space-xl, 32px) 0;
     }
-  }
-  async autoFetch() {
-    if (!Vio.isInitialized) {
-      this.fetchError = "Vio not initialized \u2014 call Vio.init({ apiKey }) first";
-      return;
-    }
-    this.isLoading = true;
-    this.fetchError = "";
-    try {
-      const refs = this.productRefs.trim() ? this.parseRefs(this.productRefs) : this.productIds.split(",").map((s) => parseInt(s.trim(), 10)).filter((n) => !Number.isNaN(n)).map((id) => ({ sponsorId: this.sponsorId, productId: id }));
-      if (refs.length === 0) {
-        this.fetched = [];
-        return;
-      }
-      const bySponsor = /* @__PURE__ */ new Map();
-      for (const r of refs) {
-        const arr = bySponsor.get(r.sponsorId) ?? [];
-        arr.push(r.productId);
-        bySponsor.set(r.sponsorId, arr);
-      }
-      const fetched = await Promise.all(
-        Array.from(bySponsor.entries()).map(async ([sponsorId, ids]) => {
-          const commerce = this.commerceKey && this.productRefs.trim() === "" ? Vio.commerceWithKey(this.commerceKey) : Vio.commerceFor(sponsorId);
-          const products = await commerce.channel.product.getByIds({
-            product_ids: ids,
-            currency: this.currency,
-            image_size: "large"
-          });
-          return { sponsorId, products };
-        })
-      );
-      const lookup = /* @__PURE__ */ new Map();
-      for (const { sponsorId, products } of fetched) {
-        for (const p of products) lookup.set(`${sponsorId}:${p.id}`, p);
-      }
-      this.fetched = refs.map(({ sponsorId, productId }) => {
-        const product = lookup.get(`${sponsorId}:${productId}`);
-        return product ? { product, sponsorId } : null;
-      }).filter((x) => x !== null);
-    } catch (err) {
-      this.fetchError = err instanceof Error ? err.message : String(err);
-    } finally {
-      this.isLoading = false;
-    }
-  }
-  parseRefs(raw) {
-    return raw.split(",").map((pair) => pair.trim()).filter((s) => s.length > 0).map((pair) => {
-      const [sidStr, pidStr] = pair.split(":");
-      const sid = parseInt((sidStr ?? "").trim(), 10);
-      const pid = parseInt((pidStr ?? "").trim(), 10);
-      if (Number.isNaN(sid) || Number.isNaN(pid)) return null;
-      return { sponsorId: sid, productId: pid };
-    }).filter((x) => x !== null);
-  }
-  scrollByDirection(direction) {
-    if (!this.scroller) return;
-    const item = this.scroller.querySelector(":scope > *");
-    const step = (item?.offsetWidth ?? 240) + 16;
-    this.scroller.scrollBy({ left: direction * step * 2, behavior: "smooth" });
-  }
-  renderScrollerContent() {
-    if (this.isLoading && !this.fetched) {
-      return html`${Array.from({ length: 5 }).map(
-        () => html`
-          <div class="skeleton">
-            <div class="skeleton-image"></div>
-            <div class="skeleton-text"></div>
-            <div class="skeleton-text shorter"></div>
-          </div>
-        `
-      )}`;
-    }
-    if (this.fetched && this.fetched.length > 0) {
-      return html`${this.fetched.map(({ product: p, sponsorId }) => {
-        const img = primaryImageUrl(p) ?? "";
-        const retailer = sponsorNameFromBootstrap(sponsorId) ?? p.brand ?? "";
-        return html`
-          <vio-product
-            product-id=${String(p.id)}
-            sponsor-id=${String(sponsorId)}
-            brand=${p.brand ?? ""}
-            name=${p.title}
-            price=${displayPrice(p)}
-            retailer=${retailer}
-            image-url=${img}
-            ?has-variants=${(p.variants?.length ?? 0) > 1}
-          ></vio-product>
-        `;
-      })}`;
-    }
-    return html`<slot></slot>`;
-  }
-  render() {
-    return html`
-      <div class="header">
-        <div class="header-text">
-          ${this.label ? html`<div class="label">${this.label}</div>` : ""}
-          <div class="heading-row">
-            ${this.heading ? html`<h2 class="heading">${this.heading}</h2>` : ""}
-            ${this.disclaimer ? html`<span class="disclaimer">(${this.disclaimer})</span>` : ""}
-          </div>
-        </div>
-        ${this.seeAllHref ? html`<a class="see-all" href=${this.seeAllHref}>${this.seeAllLabel}</a>` : ""}
-      </div>
-      <div class="viewport">
-        <button
-          class="nav-btn prev"
-          @click=${() => this.scrollByDirection(-1)}
-          aria-label="Forrige"
-        >
-          ‹
-        </button>
-        <div class="scroller">${this.renderScrollerContent()}</div>
-        <button
-          class="nav-btn next"
-          @click=${() => this.scrollByDirection(1)}
-          aria-label="Neste"
-        >
-          ›
-        </button>
-      </div>
-      ${this.fetchError && !this.fetched ? html`<div class="state error">${this.fetchError}</div>` : ""}
-    `;
-  }
-};
-VioProductCarousel.styles = css`
-    :host {
-      display: block;
-      box-sizing: border-box;
-      width: 100%;
-      font-family: var(--vio-font-sans, -apple-system, sans-serif);
-      color: var(--vio-color-text, #0a0a0a);
-      padding: var(--vio-space-xl, 32px) 0;
-    }
-    .header {
-      display: flex;
-      align-items: flex-end;
-      justify-content: space-between;
-      gap: var(--vio-space-md, 16px);
-      margin-bottom: var(--vio-space-lg, 24px);
-      padding: 0 var(--vio-space-lg, 24px);
+    .header {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      gap: var(--vio-space-md, 16px);
+      margin-bottom: var(--vio-space-lg, 24px);
+      padding: 0 var(--vio-space-lg, 24px);
     }
     .header-text { flex: 1; min-width: 0; }
     .label {
@@ -702,445 +440,224 @@ VioProductCarousel.styles = css`
       50% { opacity: 0.5; }
     }
   `;
-__decorateClass([
-  property({ type: String })
-], VioProductCarousel.prototype, "label", 2);
-__decorateClass([
-  property({ type: String })
-], VioProductCarousel.prototype, "heading", 2);
-__decorateClass([
-  property({ type: String })
-], VioProductCarousel.prototype, "disclaimer", 2);
-__decorateClass([
-  property({ type: String, attribute: "see-all-href" })
-], VioProductCarousel.prototype, "seeAllHref", 2);
-__decorateClass([
-  property({ type: String, attribute: "see-all-label" })
-], VioProductCarousel.prototype, "seeAllLabel", 2);
-__decorateClass([
-  property({ type: String, attribute: "product-ids" })
-], VioProductCarousel.prototype, "productIds", 2);
-__decorateClass([
-  property({ type: String, attribute: "commerce-key" })
-], VioProductCarousel.prototype, "commerceKey", 2);
-__decorateClass([
-  property({ type: Number, attribute: "sponsor-id" })
-], VioProductCarousel.prototype, "sponsorId", 2);
-__decorateClass([
-  property({ type: String, attribute: "product-refs" })
-], VioProductCarousel.prototype, "productRefs", 2);
-__decorateClass([
-  property({ type: String })
-], VioProductCarousel.prototype, "currency", 2);
-__decorateClass([
-  query(".scroller")
-], VioProductCarousel.prototype, "scroller", 2);
-__decorateClass([
-  state()
-], VioProductCarousel.prototype, "fetched", 2);
-__decorateClass([
-  state()
-], VioProductCarousel.prototype, "isLoading", 2);
-__decorateClass([
-  state()
-], VioProductCarousel.prototype, "fetchError", 2);
-VioProductCarousel = __decorateClass([
-  customElement("vio-product-carousel")
-], VioProductCarousel);
-function sponsorNameFromBootstrap(sponsorId) {
-  const boot = Vio.bootstrapCache;
-  if (!boot) return void 0;
-  if (boot.primarySponsor?.id === sponsorId) return boot.primarySponsor.name;
-  return boot.secondarySponsors?.find((s) => s.id === sponsorId)?.name;
-}
-var VioProductDetail = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.productId = "";
-    this.sponsorId = 0;
-    this.autoOpen = true;
-    this.currency = "NOK";
-    this.product = null;
-    this.isLoading = false;
-    this.fetchError = "";
-    this.selectedOptions = {};
-    this.quantity = 1;
-    this.activeImageIndex = 0;
-    this.adding = false;
-    this.applePayOk = false;
-    /** Pre-prepared Apple Pay handle — show() fires synchronously on tap. */
-    this.applePayHandle = null;
-    this.boundProductClick = (e) => {
-      if (!this.autoOpen) return;
-      const ev = e;
-      const productIdNum = parseInt(ev.detail.productId, 10);
-      if (Number.isNaN(productIdNum)) return;
-      const sponsorIdNum = parseInt(ev.detail.sponsorId, 10);
-      if (Number.isNaN(sponsorIdNum) || sponsorIdNum <= 0) return;
-      this.productId = ev.detail.productId;
-      this.sponsorId = sponsorIdNum;
-      this.show();
-      void this.fetchProduct();
-    };
   }
   connectedCallback() {
     super.connectedCallback();
-    document.addEventListener("vio:product-click", this.boundProductClick);
-  }
-  disconnectedCallback() {
-    document.removeEventListener("vio:product-click", this.boundProductClick);
-    super.disconnectedCallback();
-  }
-  show() {
-    this.open = true;
+    if (this.productRefs.trim() || this.productIds.trim()) {
+      void this.autoFetch();
+    }
   }
-  close() {
-    this.open = false;
-    setTimeout(() => {
-      if (!this.open) {
-        this.product = null;
-        this.selectedOptions = {};
-        this.quantity = 1;
-        this.activeImageIndex = 0;
-        this.fetchError = "";
-      }
-    }, 400);
+  updated(changed) {
+    const propChanged = changed.has("productRefs") || changed.has("productIds") || changed.has("commerceKey") || changed.has("sponsorId");
+    if (propChanged && (this.productRefs.trim() || this.productIds.trim())) {
+      void this.autoFetch();
+    }
   }
-  async fetchProduct() {
-    const productIdNum = parseInt(this.productId, 10);
-    if (Number.isNaN(productIdNum) || !this.sponsorId) {
-      this.product = null;
+  async autoFetch() {
+    if (!Vio.isInitialized) {
+      this.fetchError = "Vio not initialized \u2014 call Vio.init({ apiKey }) first";
       return;
     }
     this.isLoading = true;
     this.fetchError = "";
     try {
-      const commerce = Vio.commerceFor(this.sponsorId);
-      const products = await commerce.channel.product.getByIds({
-        product_ids: [productIdNum],
-        currency: this.currency,
-        image_size: "large"
-      });
-      this.product = products[0] ?? null;
-      if (this.product) {
-        const initial = {};
-        for (const opt of this.product.options) {
-          const values = normalizeValues(opt.values);
-          if (values.length > 0) initial[opt.name] = values[0];
-        }
-        this.selectedOptions = initial;
-        void Vio.checkout.prepareApplePayFor(this.unitPrice * this.quantity, this.currency).then((handle) => {
-          this.applePayHandle = handle;
-          this.applePayOk = handle.available;
-        }).catch(() => {
-          this.applePayHandle = null;
-          this.applePayOk = false;
-        });
+      const refs = this.productRefs.trim() ? this.parseRefs(this.productRefs) : this.productIds.split(",").map((s) => parseInt(s.trim(), 10)).filter((n) => !Number.isNaN(n)).map((id) => ({ sponsorId: this.sponsorId, productId: id }));
+      if (refs.length === 0) {
+        this.fetched = [];
+        return;
+      }
+      const bySponsor = /* @__PURE__ */ new Map();
+      for (const r of refs) {
+        const arr = bySponsor.get(r.sponsorId) ?? [];
+        arr.push(r.productId);
+        bySponsor.set(r.sponsorId, arr);
+      }
+      const fetched = await Promise.all(
+        Array.from(bySponsor.entries()).map(async ([sponsorId, ids]) => {
+          const commerce = this.commerceKey && this.productRefs.trim() === "" ? Vio.commerceWithKey(this.commerceKey) : Vio.commerceFor(sponsorId);
+          const products = await commerce.channel.product.getByIds({
+            product_ids: ids,
+            currency: this.currency,
+            image_size: "large"
+          });
+          return { sponsorId, products };
+        })
+      );
+      const lookup = /* @__PURE__ */ new Map();
+      for (const { sponsorId, products } of fetched) {
+        for (const p of products) lookup.set(`${sponsorId}:${p.id}`, p);
       }
+      this.fetched = refs.map(({ sponsorId, productId }) => {
+        const product = lookup.get(`${sponsorId}:${productId}`);
+        return product ? { product, sponsorId } : null;
+      }).filter((x) => x !== null);
     } catch (err) {
       this.fetchError = err instanceof Error ? err.message : String(err);
     } finally {
       this.isLoading = false;
     }
   }
-  /** Resolve the active variant from the selected option values. */
-  selectedVariant() {
-    if (!this.product || this.product.variants.length === 0) return null;
-    const vals = Object.values(this.selectedOptions);
-    if (vals.length === 0) return this.product.variants[0] ?? null;
-    const found = this.product.variants.find((v) => {
-      if (!v.title) return false;
-      return vals.every(
-        (val) => v.title.toLowerCase().includes(val.toLowerCase())
-      );
-    });
-    return found ?? this.product.variants[0] ?? null;
-  }
-  get unitPrice() {
-    const v = this.selectedVariant();
-    const price = v?.price ?? this.product?.price;
-    return price?.amount_incl_taxes ?? price?.amount ?? 0;
-  }
-  get compareAt() {
-    const v = this.selectedVariant();
-    const price = v?.price ?? this.product?.price;
-    return price?.compare_at_incl_taxes ?? price?.compare_at ?? null;
-  }
-  get availableQuantity() {
-    const v = this.selectedVariant();
-    if (v) return v.quantity ?? 0;
-    return this.product?.quantity ?? 0;
-  }
-  stockLabel() {
-    const qty = this.availableQuantity;
-    if (qty <= 0) return { text: "Utsolgt", cls: "out-of-stock" };
-    if (qty <= 3) return { text: `F\xE5 igjen \u2014 ${qty} stk`, cls: "low-stock" };
-    return { text: "P\xE5 lager", cls: "in-stock" };
-  }
-  selectOption(optionName, value) {
-    this.selectedOptions = { ...this.selectedOptions, [optionName]: value };
-  }
-  allImages() {
-    if (!this.product) return [];
-    const variantImages = this.selectedVariant()?.images ?? [];
-    if (variantImages.length > 0) return variantImages;
-    return this.product.images;
-  }
-  get activeImage() {
-    return this.allImages()[this.activeImageIndex];
-  }
-  /** Add the current product + selected variant + qty to the cart. Returns the variant id used. */
-  addCurrentToCart() {
-    if (!this.product) return void 0;
-    const variant = this.selectedVariant();
-    const sponsor = Vio.bootstrapCache?.primarySponsor;
-    const secondaries = Vio.bootstrapCache?.secondarySponsors ?? [];
-    const sponsorName = sponsor?.id === this.sponsorId ? sponsor.name : secondaries.find((s) => s.id === this.sponsorId)?.name;
-    Vio.cart.addProduct({
-      product: this.product,
-      sponsorId: this.sponsorId,
-      sponsorName,
-      quantity: this.quantity,
-      variantId: variant?.id
-    });
-    return variant?.id;
+  parseRefs(raw) {
+    return raw.split(",").map((pair) => pair.trim()).filter((s) => s.length > 0).map((pair) => {
+      const [sidStr, pidStr] = pair.split(":");
+      const sid = parseInt((sidStr ?? "").trim(), 10);
+      const pid = parseInt((pidStr ?? "").trim(), 10);
+      if (Number.isNaN(sid) || Number.isNaN(pid)) return null;
+      return { sponsorId: sid, productId: pid };
+    }).filter((x) => x !== null);
   }
-  async addToCart() {
-    if (!this.product || this.availableQuantity <= 0 || this.adding) return;
-    this.adding = true;
-    try {
-      const variantId = this.addCurrentToCart();
-      this.dispatchEvent(
-        new CustomEvent("vio:added-to-cart", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            productId: this.product.id,
-            sponsorId: this.sponsorId,
-            quantity: this.quantity,
-            variantId
-          }
-        })
-      );
-      this.close();
-    } finally {
-      this.adding = false;
-    }
+  scrollByDirection(direction) {
+    if (!this.scroller) return;
+    const item = this.scroller.querySelector(":scope > *");
+    const step = (item?.offsetWidth ?? 240) + 16;
+    this.scroller.scrollBy({ left: direction * step * 2, behavior: "smooth" });
   }
-  /**
-   * Express buy: add to cart, then open the checkout overlay with Klarna
-   * preselected. The host app handles `vio:checkout-open` (same event the cart
-   * uses) — the `paymentMethod` hint tells it to preselect Klarna so its widget
-   * loads immediately. Reuses the working Klarna Payments flow (no express SDK).
-   */
-  async buyWithKlarna() {
-    if (!this.product || this.availableQuantity <= 0 || this.adding) return;
-    this.adding = true;
-    try {
-      this.addCurrentToCart();
-      this.close();
-      this.dispatchEvent(
-        new CustomEvent("vio:checkout-open", {
-          bubbles: true,
-          composed: true,
-          detail: { sponsorId: this.sponsorId, paymentMethod: "klarna", express: true }
-        })
-      );
-    } finally {
-      this.adding = false;
+  renderScrollerContent() {
+    if (this.isLoading && !this.fetched) {
+      return html`${Array.from({ length: 5 }).map(
+        () => html`
+          <div class="skeleton">
+            <div class="skeleton-image"></div>
+            <div class="skeleton-text"></div>
+            <div class="skeleton-text shorter"></div>
+          </div>
+        `
+      )}`;
     }
-  }
-  /**
-   * Express buy with Apple Pay. Runs synchronously inside the click so the
-   * Apple Pay sheet keeps the user gesture: add to cart → open checkout (sets
-   * state) → launch the sheet. On authorize, `payment-complete` drives the
-   * confirmation drawer (same path as the in-checkout Apple Pay button).
-   */
-  buyWithApplePay() {
-    if (!this.product || this.availableQuantity <= 0 || !this.applePayHandle) return;
-    this.addCurrentToCart();
-    try {
-      Vio.checkout.open(this.sponsorId);
-    } catch (err) {
-      if (typeof console !== "undefined") {
-        console.warn("[VioProductDetail] checkout open failed:", err);
-      }
-      return;
+    if (this.fetched && this.fetched.length > 0) {
+      return html`${this.fetched.map(({ product: p, sponsorId }) => {
+        const img = primaryImageUrl(p) ?? "";
+        const retailer = sponsorNameFromBootstrap(sponsorId) ?? p.brand ?? "";
+        return html`
+          <vio-product
+            product-id=${String(p.id)}
+            sponsor-id=${String(sponsorId)}
+            brand=${p.brand ?? ""}
+            name=${p.title}
+            price=${displayPrice(p)}
+            retailer=${retailer}
+            image-url=${img}
+            ?has-variants=${(p.variants?.length ?? 0) > 1}
+          ></vio-product>
+        `;
+      })}`;
     }
-    void this.applePayHandle.show();
-    this.close();
+    return html`<slot></slot>`;
   }
   render() {
     return html`
-      <div class="backdrop" @click=${this.close}></div>
-      <div class="modal" role="dialog" aria-label="Produkt">
-        <div class="handle" @click=${this.close} aria-hidden="true"></div>
-        <div class="topbar">
-          <span class="topbar-brand">${this.product?.brand ?? ""}</span>
-          <button class="close" @click=${this.close} aria-label="Lukk">×</button>
+      <div class="header">
+        <div class="header-text">
+          ${this.label ? html`<div class="label">${this.label}</div>` : ""}
+          <div class="heading-row">
+            ${this.heading ? html`<h2 class="heading">${this.heading}</h2>` : ""}
+            ${this.disclaimer ? html`<span class="disclaimer">(${this.disclaimer})</span>` : ""}
+          </div>
         </div>
-
-        ${this.renderBody()}
+        ${this.seeAllHref ? html`<a class="see-all" href=${this.seeAllHref}>${this.seeAllLabel}</a>` : ""}
+      </div>
+      <div class="viewport">
+        <button
+          class="nav-btn prev"
+          @click=${() => this.scrollByDirection(-1)}
+          aria-label="Forrige"
+        >
+          ‹
+        </button>
+        <div class="scroller">${this.renderScrollerContent()}</div>
+        <button
+          class="nav-btn next"
+          @click=${() => this.scrollByDirection(1)}
+          aria-label="Neste"
+        >
+          ›
+        </button>
       </div>
+      ${this.fetchError && !this.fetched ? html`<div class="state error">${this.fetchError}</div>` : ""}
     `;
   }
-  renderBody() {
-    if (this.isLoading && !this.product) {
-      return html`
-        <div class="skeleton" role="status" aria-busy="true" aria-label="Laster produkt">
-          <div class="sk-image"></div>
-          <div class="sk-line sk-brand"></div>
-          <div class="sk-line sk-title"></div>
-          <div class="sk-line sk-title-2"></div>
-          <div class="sk-line sk-price"></div>
-          <div class="sk-button"></div>
-        </div>
-      `;
-    }
-    if (this.fetchError) {
-      return html`<div class="error">Kunne ikke laste produkt: ${this.fetchError}</div>`;
-    }
-    if (!this.product) return html``;
-    const p = this.product;
-    const stock = this.stockLabel();
-    const compare = this.compareAt;
-    const showCompare = compare !== null && compare > this.unitPrice;
-    const images = this.allImages();
-    const activeImage = this.activeImage;
-    return html`
-      <div class="body">
-        <div class="gallery">
-          <div class="gallery-main">
-            ${activeImage?.url ? html`<img src=${activeImage.url} alt=${p.title} />` : ""}
-          </div>
-          ${images.length > 1 ? html`
-                <div class="gallery-thumbs">
-                  ${images.map(
-      (img, idx) => html`
-                      <button
-                        class="gallery-thumb ${idx === this.activeImageIndex ? "active" : ""}"
-                        @click=${() => this.activeImageIndex = idx}
-                        aria-label=${`Bilde ${idx + 1}`}
-                      >
-                        <img src=${img.url} alt="" />
-                      </button>
-                    `
-    )}
-                </div>
-              ` : ""}
-        </div>
-
-        <div class="info">
-          ${p.brand ? html`<div class="brand">${p.brand}</div>` : ""}
-          <h2 class="name">${p.title}</h2>
-
-          <div class="price-row">
-            <span class="price">${formatPrice(this.unitPrice, p.price.currency_code)}</span>
-            ${showCompare ? html`<span class="compare-at">${formatPrice(
-      compare,
-      p.price.currency_code
-    )}</span>` : ""}
-          </div>
-
-          <div class="stock ${stock.cls}">${stock.text}</div>
-
-          ${this.renderOptionPickers(p.options)}
-
-          <div class="qty-cta-row">
-            <div class="qty-stepper">
-              <button
-                class="qty-btn"
-                @click=${() => this.quantity = Math.max(1, this.quantity - 1)}
-                aria-label="Reduser antall"
-              >
-                −
-              </button>
-              <span class="qty-value">${this.quantity}</span>
-              <button
-                class="qty-btn"
-                @click=${() => this.quantity = Math.min(this.availableQuantity, this.quantity + 1)}
-                aria-label="Øk antall"
-                ?disabled=${this.quantity >= this.availableQuantity}
-              >
-                +
-              </button>
-            </div>
-            <button
-              class="add-to-cart"
-              @click=${this.addToCart}
-              ?disabled=${this.availableQuantity <= 0 || this.adding}
-            >
-              ${this.adding ? "Legger til\u2026" : this.availableQuantity <= 0 ? "Utsolgt" : "Legg i handlekurv"}
-            </button>
-          </div>
-
-          ${this.availableQuantity > 0 && this.applePayOk ? html`
-                <button
-                  class="buy-applepay"
-                  @click=${this.buyWithApplePay}
-                  ?disabled=${this.adding}
-                  aria-label="Kjøp nå med Apple Pay"
-                >
-                  Kjøp nå med  Pay
-                </button>
-              ` : ""}
-          ${this.availableQuantity > 0 ? html`
-                <button
-                  class="buy-klarna"
-                  @click=${this.buyWithKlarna}
-                  ?disabled=${this.adding}
-                >
-                  <span>Kjøp nå med</span>
-                  <img
-                    class="klarna-badge"
-                    src="https://x.klarnacdn.net/payment-method/assets/badges/generic/klarna.svg"
-                    alt="Klarna"
-                  />
-                </button>
-              ` : ""}
-
-          ${p.description ? html`
-                <div>
-                  <div class="description-label">Beskrivelse</div>
-                  <div class="description">${this.stripHtml(p.description)}</div>
-                </div>
-              ` : ""}
-        </div>
-      </div>
-    `;
-  }
-  renderOptionPickers(options) {
-    if (options.length === 0) return "";
-    return html`${options.map((opt) => {
-      const values = normalizeValues(opt.values);
-      if (values.length === 0) return "";
-      return html`
-        <div class="option-group">
-          <div class="option-label">${opt.name}</div>
-          <div class="option-values">
-            ${values.map(
-        (val) => html`
-                <button
-                  class="option-pill"
-                  @click=${() => this.selectOption(opt.name, val)}
-                  aria-pressed=${this.selectedOptions[opt.name] === val}
-                >
-                  ${val}
-                </button>
-              `
-      )}
-          </div>
-        </div>
-      `;
-    })}`;
-  }
-  /** Best-effort HTML strip for description. */
-  stripHtml(html6) {
-    return html6.replace(/<br\s*\/?>/gi, "\n").replace(/<\/p>/gi, "\n\n").replace(/<[^>]+>/g, "").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").trim();
-  }
 };
-VioProductDetail.styles = css`
+__decorateClass([
+  property({ type: String })
+], VioProductCarousel.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], VioProductCarousel.prototype, "heading", 2);
+__decorateClass([
+  property({ type: String })
+], VioProductCarousel.prototype, "disclaimer", 2);
+__decorateClass([
+  property({ type: String, attribute: "see-all-href" })
+], VioProductCarousel.prototype, "seeAllHref", 2);
+__decorateClass([
+  property({ type: String, attribute: "see-all-label" })
+], VioProductCarousel.prototype, "seeAllLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "product-ids" })
+], VioProductCarousel.prototype, "productIds", 2);
+__decorateClass([
+  property({ type: String, attribute: "commerce-key" })
+], VioProductCarousel.prototype, "commerceKey", 2);
+__decorateClass([
+  property({ type: Number, attribute: "sponsor-id" })
+], VioProductCarousel.prototype, "sponsorId", 2);
+__decorateClass([
+  property({ type: String, attribute: "product-refs" })
+], VioProductCarousel.prototype, "productRefs", 2);
+__decorateClass([
+  property({ type: String })
+], VioProductCarousel.prototype, "currency", 2);
+__decorateClass([
+  query(".scroller")
+], VioProductCarousel.prototype, "scroller", 2);
+__decorateClass([
+  state()
+], VioProductCarousel.prototype, "fetched", 2);
+__decorateClass([
+  state()
+], VioProductCarousel.prototype, "isLoading", 2);
+__decorateClass([
+  state()
+], VioProductCarousel.prototype, "fetchError", 2);
+function sponsorNameFromBootstrap(sponsorId) {
+  const boot = Vio.bootstrapCache;
+  if (!boot) return void 0;
+  if (boot.primarySponsor?.id === sponsorId) return boot.primarySponsor.name;
+  return boot.secondarySponsors?.find((s) => s.id === sponsorId)?.name;
+}
+var VioProductDetail = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.productId = "";
+    this.sponsorId = 0;
+    this.autoOpen = true;
+    this.currency = "NOK";
+    this.product = null;
+    this.isLoading = false;
+    this.fetchError = "";
+    this.selectedOptions = {};
+    this.quantity = 1;
+    this.activeImageIndex = 0;
+    this.adding = false;
+    this.applePayOk = false;
+    /** Pre-prepared Apple Pay handle — show() fires synchronously on tap. */
+    this.applePayHandle = null;
+    this.boundProductClick = (e) => {
+      if (!this.autoOpen) return;
+      const ev = e;
+      const productIdNum = parseInt(ev.detail.productId, 10);
+      if (Number.isNaN(productIdNum)) return;
+      const sponsorIdNum = parseInt(ev.detail.sponsorId, 10);
+      if (Number.isNaN(sponsorIdNum) || sponsorIdNum <= 0) return;
+      this.productId = ev.detail.productId;
+      this.sponsorId = sponsorIdNum;
+      this.show();
+      void this.fetchProduct();
+    };
+  }
+  static {
+    this.styles = css`
     :host { display: contents; }
 
     .backdrop {
@@ -1524,329 +1041,434 @@ VioProductDetail.styles = css`
       font-size: 14px;
     }
   `;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], VioProductDetail.prototype, "open", 2);
-__decorateClass([
-  property({ type: String, attribute: "product-id" })
-], VioProductDetail.prototype, "productId", 2);
-__decorateClass([
-  property({ type: Number, attribute: "sponsor-id" })
-], VioProductDetail.prototype, "sponsorId", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "auto-open" })
-], VioProductDetail.prototype, "autoOpen", 2);
-__decorateClass([
-  property({ type: String })
-], VioProductDetail.prototype, "currency", 2);
-__decorateClass([
-  state()
-], VioProductDetail.prototype, "product", 2);
-__decorateClass([
-  state()
-], VioProductDetail.prototype, "isLoading", 2);
-__decorateClass([
-  state()
-], VioProductDetail.prototype, "fetchError", 2);
-__decorateClass([
-  state()
-], VioProductDetail.prototype, "selectedOptions", 2);
-__decorateClass([
-  state()
-], VioProductDetail.prototype, "quantity", 2);
-__decorateClass([
-  state()
-], VioProductDetail.prototype, "activeImageIndex", 2);
-__decorateClass([
-  state()
-], VioProductDetail.prototype, "adding", 2);
-__decorateClass([
-  state()
-], VioProductDetail.prototype, "applePayOk", 2);
-VioProductDetail = __decorateClass([
-  customElement("vio-product-detail")
-], VioProductDetail);
-function normalizeValues(raw) {
-  if (Array.isArray(raw)) {
-    return raw.map((v) => String(v).trim()).filter((v) => v.length > 0);
-  }
-  if (typeof raw === "string") {
-    return raw.split(",").map((v) => v.trim()).filter((v) => v.length > 0);
-  }
-  return [];
-}
-var VioCart = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.heading = "Handlekurv";
-    this.checkoutLabel = "Til kassen";
-    this.emptyLabel = "Handlekurven er tom";
-    this.subtotalLabel = "Sum";
-    this.carts = /* @__PURE__ */ new Map();
-    this.itemCount = 0;
-    this.applePayAvailable = false;
-    this.confirmedOrder = null;
-    /** Pre-resolved Apple Pay handle; `show()` fires the sheet synchronously. */
-    this.applePayHandle = null;
-    /** Cart total Apple Pay was last prepared for (avoids redundant prep). */
-    this.preparedTotal = -1;
-    this.boundOnCartChange = (e) => {
-      const detail = e.detail;
-      this.carts = detail.cartsBySponsor;
-      this.itemCount = detail.itemCount;
-    };
   }
   connectedCallback() {
     super.connectedCallback();
-    this.carts = Vio.cart.getAllCarts();
-    this.itemCount = Vio.cart.itemCount;
-    Vio.cart.addEventListener("change", this.boundOnCartChange);
+    document.addEventListener("vio:product-click", this.boundProductClick);
   }
   disconnectedCallback() {
-    Vio.cart.removeEventListener("change", this.boundOnCartChange);
+    document.removeEventListener("vio:product-click", this.boundProductClick);
     super.disconnectedCallback();
   }
-  close() {
-    this.open = false;
-  }
   show() {
     this.open = true;
   }
-  updated(changed) {
-    if (changed.has("open") && this.open) {
-      this.confirmedOrder = null;
-      this.preparedTotal = -1;
-    }
-    if (this.open && this.itemCount > 0) {
-      const total = this.totalAcrossSponsors;
-      if (total !== this.preparedTotal) {
-        this.preparedTotal = total;
-        void this.refreshApplePay(total);
+  close() {
+    this.open = false;
+    setTimeout(() => {
+      if (!this.open) {
+        this.product = null;
+        this.selectedOptions = {};
+        this.quantity = 1;
+        this.activeImageIndex = 0;
+        this.fetchError = "";
       }
-    }
+    }, 400);
   }
-  /** Pre-resolve the Apple Pay sheet for the current cart total. */
-  async refreshApplePay(total) {
-    if (total <= 0) {
-      this.applePayHandle = null;
-      this.applePayAvailable = false;
+  async fetchProduct() {
+    const productIdNum = parseInt(this.productId, 10);
+    if (Number.isNaN(productIdNum) || !this.sponsorId) {
+      this.product = null;
       return;
     }
+    this.isLoading = true;
+    this.fetchError = "";
     try {
-      const handle = await Vio.checkout.prepareApplePayExpress(total, this.primaryCurrency);
-      if (this.preparedTotal !== total) return;
-      this.applePayHandle = handle;
-      this.applePayAvailable = handle.available;
-    } catch {
-      this.applePayHandle = null;
-      this.applePayAvailable = false;
+      const commerce = Vio.commerceFor(this.sponsorId);
+      const products = await commerce.channel.product.getByIds({
+        product_ids: [productIdNum],
+        currency: this.currency,
+        image_size: "large"
+      });
+      this.product = products[0] ?? null;
+      if (this.product) {
+        const initial = {};
+        for (const opt of this.product.options) {
+          const values = normalizeValues(opt.values);
+          if (values.length > 0) initial[opt.name] = values[0];
+        }
+        this.selectedOptions = initial;
+        void Vio.checkout.prepareApplePayFor(this.unitPrice * this.quantity, this.currency).then((handle) => {
+          this.applePayHandle = handle;
+          this.applePayOk = handle.available;
+        }).catch(() => {
+          this.applePayHandle = null;
+          this.applePayOk = false;
+        });
+      }
+    } catch (err) {
+      this.fetchError = err instanceof Error ? err.message : String(err);
+    } finally {
+      this.isLoading = false;
     }
   }
-  /** Apple Pay express — pay the whole cart, then show the confirmation. */
-  onApplePay() {
-    const handle = this.applePayHandle;
-    if (!handle || !handle.available || this.itemCount === 0) return;
-    const snapshot = this.buildConfirmation();
-    void handle.show().then((result) => {
-      if (!result) return;
-      this.confirmedOrder = snapshot;
-      for (const sponsorId of [...this.carts.keys()]) {
-        Vio.cart.clearSponsorCart(sponsorId);
-      }
-      this.dispatchEvent(
-        new CustomEvent("vio:payment-success", {
-          bubbles: true,
-          composed: true,
-          detail: { method: "apple-pay", result }
-        })
+  /** Resolve the active variant from the selected option values. */
+  selectedVariant() {
+    if (!this.product || this.product.variants.length === 0) return null;
+    const vals = Object.values(this.selectedOptions);
+    if (vals.length === 0) return this.product.variants[0] ?? null;
+    const found = this.product.variants.find((v) => {
+      if (!v.title) return false;
+      return vals.every(
+        (val) => v.title.toLowerCase().includes(val.toLowerCase())
       );
     });
+    return found ?? this.product.variants[0] ?? null;
   }
-  buildConfirmation() {
-    const items = [];
-    for (const cart of this.carts.values()) {
-      for (const it of cart.items) {
-        items.push({
-          brand: it.brand,
-          name: it.name,
-          quantity: it.quantity,
-          unitPrice: it.unitPrice,
-          currency: it.currency
-        });
-      }
-    }
-    return { items, total: this.totalAcrossSponsors, currency: this.primaryCurrency };
+  get unitPrice() {
+    const v = this.selectedVariant();
+    const price = v?.price ?? this.product?.price;
+    return price?.amount_incl_taxes ?? price?.amount ?? 0;
   }
-  closeConfirmation() {
-    this.confirmedOrder = null;
-    this.close();
+  get compareAt() {
+    const v = this.selectedVariant();
+    const price = v?.price ?? this.product?.price;
+    return price?.compare_at_incl_taxes ?? price?.compare_at ?? null;
   }
-  /** Klarna express — opens the side-drawer Klarna checkout for the whole cart,
-   * skipping the address form (leveringsadresse) and method picker
-   * (betalingsmetode). The host's checkout-open handler closes this cart and
-   * opens <vio-checkout> in express mode with Klarna preselected. */
-  onKlarnaExpress() {
-    if (this.itemCount === 0) return;
-    const firstSponsorId = [...this.carts.keys()][0];
-    if (firstSponsorId === void 0) return;
-    this.dispatchEvent(
-      new CustomEvent("vio:checkout-open", {
-        bubbles: true,
-        composed: true,
-        detail: { sponsorId: firstSponsorId, paymentMethod: "klarna", express: true }
-      })
-    );
+  get availableQuantity() {
+    const v = this.selectedVariant();
+    if (v) return v.quantity ?? 0;
+    return this.product?.quantity ?? 0;
   }
-  get totalAcrossSponsors() {
-    let sum = 0;
-    for (const cart of this.carts.values()) {
-      for (const item of cart.items) sum += item.unitPrice * item.quantity;
-    }
-    return sum;
+  stockLabel() {
+    const qty = this.availableQuantity;
+    if (qty <= 0) return { text: "Utsolgt", cls: "out-of-stock" };
+    if (qty <= 3) return { text: `F\xE5 igjen \u2014 ${qty} stk`, cls: "low-stock" };
+    return { text: "P\xE5 lager", cls: "in-stock" };
   }
-  get primaryCurrency() {
-    for (const cart of this.carts.values()) return cart.currency;
-    return "NOK";
+  selectOption(optionName, value) {
+    this.selectedOptions = { ...this.selectedOptions, [optionName]: value };
   }
-  onIncrement(item) {
-    Vio.cart.updateQuantity(item.id, item.sponsorId, item.quantity + 1);
+  allImages() {
+    if (!this.product) return [];
+    const variantImages = this.selectedVariant()?.images ?? [];
+    if (variantImages.length > 0) return variantImages;
+    return this.product.images;
   }
-  onDecrement(item) {
-    Vio.cart.updateQuantity(item.id, item.sponsorId, item.quantity - 1);
+  get activeImage() {
+    return this.allImages()[this.activeImageIndex];
   }
-  onRemove(item) {
-    Vio.cart.removeItem(item.id, item.sponsorId);
+  /** Add the current product + selected variant + qty to the cart. Returns the variant id used. */
+  addCurrentToCart() {
+    if (!this.product) return void 0;
+    const variant = this.selectedVariant();
+    const sponsor = Vio.bootstrapCache?.primarySponsor;
+    const secondaries = Vio.bootstrapCache?.secondarySponsors ?? [];
+    const sponsorName = sponsor?.id === this.sponsorId ? sponsor.name : secondaries.find((s) => s.id === this.sponsorId)?.name;
+    Vio.cart.addProduct({
+      product: this.product,
+      sponsorId: this.sponsorId,
+      sponsorName,
+      quantity: this.quantity,
+      variantId: variant?.id
+    });
+    return variant?.id;
   }
-  render() {
-    const isEmpty = this.itemCount === 0;
-    const sponsorCarts = [...this.carts.values()].filter((c) => c.items.length > 0);
-    return html`
-      <div class="backdrop" @click=${this.close}></div>
-      <aside class="drawer" role="dialog" aria-label=${this.heading}>
-        <div class="handle" @click=${this.close} aria-hidden="true"></div>
-        <div class="header">
-          <h2 class="heading">${this.confirmedOrder ? "Takk!" : this.heading}</h2>
-          <button class="close" @click=${this.close} aria-label="Lukk">×</button>
-        </div>
-
-        ${this.confirmedOrder ? this.renderConfirmation() : isEmpty ? html`<div class="empty">${this.emptyLabel}</div>` : html`
-              <div class="body">
-                ${sponsorCarts.map(
-      (cart) => html`
-                    <div class="sponsor-group">
-                      ${cart.sponsorName ? html`<div class="sponsor-label">${cart.sponsorName}</div>` : ""}
-                      ${cart.items.map(
-        (item) => html`
-                          <div class="item">
-                            <div class="item-image">
-                              ${item.imageUrl ? html`<img src=${item.imageUrl} alt=${item.name} />` : ""}
-                            </div>
-                            <div>
-                              <div class="item-brand">${item.brand}</div>
-                              <div class="item-name">${item.name}</div>
-                              <div class="item-row">
-                                <span class="item-qty">
-                                  <button
-                                    class="qty-btn"
-                                    @click=${() => this.onDecrement(item)}
-                                    aria-label="Reduser"
-                                  >
-                                    −
-                                  </button>
-                                  ${item.quantity}
-                                  <button
-                                    class="qty-btn"
-                                    @click=${() => this.onIncrement(item)}
-                                    aria-label="Øk"
-                                  >
-                                    +
-                                  </button>
-                                  <button
-                                    class="qty-btn"
-                                    @click=${() => this.onRemove(item)}
-                                    aria-label="Fjern"
-                                    style="margin-left: 8px;"
-                                  >
-                                    ×
-                                  </button>
-                                </span>
-                                <span class="item-price">
-                                  ${formatPrice(
-          item.unitPrice * item.quantity,
-          item.currency
-        )}
-                                </span>
-                              </div>
-                            </div>
-                          </div>
-                        `
-      )}
-                    </div>
-                  `
-    )}
-              </div>
-              <div class="footer">
-                <div class="subtotal-row">
-                  <span class="subtotal-label">${this.subtotalLabel}</span>
-                  <span class="subtotal-value">
-                    ${formatPrice(this.totalAcrossSponsors, this.primaryCurrency)}
-                  </span>
-                </div>
-                ${this.applePayAvailable ? html`
+  async addToCart() {
+    if (!this.product || this.availableQuantity <= 0 || this.adding) return;
+    this.adding = true;
+    try {
+      const variantId = this.addCurrentToCart();
+      this.dispatchEvent(
+        new CustomEvent("vio:added-to-cart", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            productId: this.product.id,
+            sponsorId: this.sponsorId,
+            quantity: this.quantity,
+            variantId
+          }
+        })
+      );
+      this.close();
+    } finally {
+      this.adding = false;
+    }
+  }
+  /**
+   * Express buy: add to cart, then open the checkout overlay with Klarna
+   * preselected. The host app handles `vio:checkout-open` (same event the cart
+   * uses) — the `paymentMethod` hint tells it to preselect Klarna so its widget
+   * loads immediately. Reuses the working Klarna Payments flow (no express SDK).
+   */
+  async buyWithKlarna() {
+    if (!this.product || this.availableQuantity <= 0 || this.adding) return;
+    this.adding = true;
+    try {
+      this.addCurrentToCart();
+      this.close();
+      this.dispatchEvent(
+        new CustomEvent("vio:checkout-open", {
+          bubbles: true,
+          composed: true,
+          detail: { sponsorId: this.sponsorId, paymentMethod: "klarna", express: true }
+        })
+      );
+    } finally {
+      this.adding = false;
+    }
+  }
+  /**
+   * Express buy with Apple Pay. Runs synchronously inside the click so the
+   * Apple Pay sheet keeps the user gesture: add to cart → open checkout (sets
+   * state) → launch the sheet. On authorize, `payment-complete` drives the
+   * confirmation drawer (same path as the in-checkout Apple Pay button).
+   */
+  buyWithApplePay() {
+    if (!this.product || this.availableQuantity <= 0 || !this.applePayHandle) return;
+    this.addCurrentToCart();
+    try {
+      Vio.checkout.open(this.sponsorId);
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[VioProductDetail] checkout open failed:", err);
+      }
+      return;
+    }
+    void this.applePayHandle.show();
+    this.close();
+  }
+  render() {
+    return html`
+      <div class="backdrop" @click=${this.close}></div>
+      <div class="modal" role="dialog" aria-label="Produkt">
+        <div class="handle" @click=${this.close} aria-hidden="true"></div>
+        <div class="topbar">
+          <span class="topbar-brand">${this.product?.brand ?? ""}</span>
+          <button class="close" @click=${this.close} aria-label="Lukk">×</button>
+        </div>
+
+        ${this.renderBody()}
+      </div>
+    `;
+  }
+  renderBody() {
+    if (this.isLoading && !this.product) {
+      return html`
+        <div class="skeleton" role="status" aria-busy="true" aria-label="Laster produkt">
+          <div class="sk-image"></div>
+          <div class="sk-line sk-brand"></div>
+          <div class="sk-line sk-title"></div>
+          <div class="sk-line sk-title-2"></div>
+          <div class="sk-line sk-price"></div>
+          <div class="sk-button"></div>
+        </div>
+      `;
+    }
+    if (this.fetchError) {
+      return html`<div class="error">Kunne ikke laste produkt: ${this.fetchError}</div>`;
+    }
+    if (!this.product) return html``;
+    const p = this.product;
+    const stock = this.stockLabel();
+    const compare = this.compareAt;
+    const showCompare = compare !== null && compare > this.unitPrice;
+    const images = this.allImages();
+    const activeImage = this.activeImage;
+    return html`
+      <div class="body">
+        <div class="gallery">
+          <div class="gallery-main">
+            ${activeImage?.url ? html`<img src=${activeImage.url} alt=${p.title} />` : ""}
+          </div>
+          ${images.length > 1 ? html`
+                <div class="gallery-thumbs">
+                  ${images.map(
+      (img, idx) => html`
                       <button
-                        class="applepay-btn"
-                        @click=${this.onApplePay}
-                        aria-label="Betal med Apple Pay"
+                        class="gallery-thumb ${idx === this.activeImageIndex ? "active" : ""}"
+                        @click=${() => this.activeImageIndex = idx}
+                        aria-label=${`Bilde ${idx + 1}`}
                       >
-                        <span class="ap-logo">${"\uF8FF"}</span> Pay
+                        <img src=${img.url} alt="" />
                       </button>
-                    ` : ""}
+                    `
+    )}
+                </div>
+              ` : ""}
+        </div>
+
+        <div class="info">
+          ${p.brand ? html`<div class="brand">${p.brand}</div>` : ""}
+          <h2 class="name">${p.title}</h2>
+
+          <div class="price-row">
+            <span class="price">${formatPrice(this.unitPrice, p.price.currency_code)}</span>
+            ${showCompare ? html`<span class="compare-at">${formatPrice(
+      compare,
+      p.price.currency_code
+    )}</span>` : ""}
+          </div>
+
+          <div class="stock ${stock.cls}">${stock.text}</div>
+
+          ${this.renderOptionPickers(p.options)}
+
+          <div class="qty-cta-row">
+            <div class="qty-stepper">
+              <button
+                class="qty-btn"
+                @click=${() => this.quantity = Math.max(1, this.quantity - 1)}
+                aria-label="Reduser antall"
+              >
+                −
+              </button>
+              <span class="qty-value">${this.quantity}</span>
+              <button
+                class="qty-btn"
+                @click=${() => this.quantity = Math.min(this.availableQuantity, this.quantity + 1)}
+                aria-label="Øk antall"
+                ?disabled=${this.quantity >= this.availableQuantity}
+              >
+                +
+              </button>
+            </div>
+            <button
+              class="add-to-cart"
+              @click=${this.addToCart}
+              ?disabled=${this.availableQuantity <= 0 || this.adding}
+            >
+              ${this.adding ? "Legger til\u2026" : this.availableQuantity <= 0 ? "Utsolgt" : "Legg i handlekurv"}
+            </button>
+          </div>
+
+          ${this.availableQuantity > 0 && this.applePayOk ? html`
                 <button
-                  class="klarna-btn"
-                  @click=${this.onKlarnaExpress}
-                  aria-label="Betal med Klarna"
+                  class="buy-applepay"
+                  @click=${this.buyWithApplePay}
+                  ?disabled=${this.adding}
+                  aria-label="Kjøp nå med Apple Pay"
                 >
-                  Kjøp med
+                  Kjøp nå med  Pay
+                </button>
+              ` : ""}
+          ${this.availableQuantity > 0 ? html`
+                <button
+                  class="buy-klarna"
+                  @click=${this.buyWithKlarna}
+                  ?disabled=${this.adding}
+                >
+                  <span>Kjøp nå med</span>
                   <img
-                    class="klarna-logo"
+                    class="klarna-badge"
                     src="https://x.klarnacdn.net/payment-method/assets/badges/generic/klarna.svg"
                     alt="Klarna"
                   />
                 </button>
-              </div>
-            `}
-      </aside>
+              ` : ""}
+
+          ${p.description ? html`
+                <div>
+                  <div class="description-label">Beskrivelse</div>
+                  <div class="description">${this.stripHtml(p.description)}</div>
+                </div>
+              ` : ""}
+        </div>
+      </div>
     `;
   }
-  renderConfirmation() {
-    const o = this.confirmedOrder;
-    if (!o) return html``;
-    return html`
-      <div class="confirm">
-        <div class="confirm-check" aria-hidden="true">✓</div>
-        <h3>Takk for handelen!</h3>
-        <p>Betaling med Apple Pay er bekreftet.</p>
-        <div class="confirm-summary">
-          ${o.items.map(
-      (it) => html`
-              <div class="order-row">
-                <span>${it.brand ? `${it.brand} ` : ""}${it.name} ×${it.quantity}</span>
-                <span>${formatPrice(it.unitPrice * it.quantity, it.currency)}</span>
-              </div>
-            `
-    )}
-          <div class="order-row total">
-            <span>Totalt</span>
-            <span>${formatPrice(o.total, o.currency)}</span>
+  renderOptionPickers(options) {
+    if (options.length === 0) return "";
+    return html`${options.map((opt) => {
+      const values = normalizeValues(opt.values);
+      if (values.length === 0) return "";
+      return html`
+        <div class="option-group">
+          <div class="option-label">${opt.name}</div>
+          <div class="option-values">
+            ${values.map(
+        (val) => html`
+                <button
+                  class="option-pill"
+                  @click=${() => this.selectOption(opt.name, val)}
+                  aria-pressed=${this.selectedOptions[opt.name] === val}
+                >
+                  ${val}
+                </button>
+              `
+      )}
           </div>
         </div>
-        <button class="confirm-close" @click=${this.closeConfirmation}>Lukk</button>
-      </div>
-    `;
+      `;
+    })}`;
+  }
+  /** Best-effort HTML strip for description. */
+  stripHtml(html6) {
+    return html6.replace(/<br\s*\/?>/gi, "\n").replace(/<\/p>/gi, "\n\n").replace(/<[^>]+>/g, "").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").trim();
   }
 };
-VioCart.styles = css`
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], VioProductDetail.prototype, "open", 2);
+__decorateClass([
+  property({ type: String, attribute: "product-id" })
+], VioProductDetail.prototype, "productId", 2);
+__decorateClass([
+  property({ type: Number, attribute: "sponsor-id" })
+], VioProductDetail.prototype, "sponsorId", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "auto-open" })
+], VioProductDetail.prototype, "autoOpen", 2);
+__decorateClass([
+  property({ type: String })
+], VioProductDetail.prototype, "currency", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "product", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "isLoading", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "fetchError", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "selectedOptions", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "quantity", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "activeImageIndex", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "adding", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "applePayOk", 2);
+function normalizeValues(raw) {
+  if (Array.isArray(raw)) {
+    return raw.map((v) => String(v).trim()).filter((v) => v.length > 0);
+  }
+  if (typeof raw === "string") {
+    return raw.split(",").map((v) => v.trim()).filter((v) => v.length > 0);
+  }
+  return [];
+}
+var VioCart = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.heading = "Handlekurv";
+    this.emptyLabel = "Handlekurven er tom";
+    this.subtotalLabel = "Sum";
+    this.carts = /* @__PURE__ */ new Map();
+    this.itemCount = 0;
+    this.applePayAvailable = false;
+    this.confirmedOrder = null;
+    /** Pre-resolved Apple Pay handle; `show()` fires the sheet synchronously. */
+    this.applePayHandle = null;
+    /** Cart total Apple Pay was last prepared for (avoids redundant prep). */
+    this.preparedTotal = -1;
+    this.boundOnCartChange = (e) => {
+      const detail = e.detail;
+      this.carts = detail.cartsBySponsor;
+      this.itemCount = detail.itemCount;
+    };
+  }
+  static {
+    this.styles = css`
     :host { display: contents; }
 
     .backdrop {
@@ -2029,27 +1651,7 @@ VioCart.styles = css`
     .subtotal-label { color: var(--vio-color-text-secondary, #666); }
     .subtotal-value { font-weight: 700; font-size: 16px; }
 
-    .checkout-btn {
-      width: 100%;
-      padding: 18px;
-      background: var(--vio-color-text, #0a0a0a);
-      color: var(--vio-color-text-on-primary, #fff);
-      border: none;
-      font-size: 12px;
-      text-transform: uppercase;
-      letter-spacing: var(--vio-tracking-label, 0.1em);
-      cursor: pointer;
-      font-weight: 600;
-      font-family: var(--vio-font-sans, -apple-system, sans-serif);
-      transition: background 0.15s;
-    }
-    .checkout-btn:hover:not(:disabled) { background: #222; }
-    .checkout-btn:disabled {
-      background: var(--vio-color-text-tertiary, #999);
-      cursor: not-allowed;
-    }
-
-    /* Apple Pay express — pay the whole cart directly, above "Til kassen". */
+    /* Apple Pay express — pay the whole cart directly. */
     .applepay-btn {
       width: 100%;
       padding: 15px;
@@ -2092,23 +1694,6 @@ VioCart.styles = css`
     }
     .klarna-btn:hover { background: #ffa1ba; }
     .klarna-btn .klarna-logo { height: 15px; width: auto; display: inline-block; }
-    .express-divider {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin: 4px 0 12px;
-      color: var(--vio-color-text-tertiary, #999);
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-    }
-    .express-divider::before,
-    .express-divider::after {
-      content: '';
-      flex: 1;
-      height: 1px;
-      background: var(--vio-color-border, #e5e5e5);
-    }
 
     /* In-drawer confirmation after Apple Pay (nothing else is shown). */
     .confirm {
@@ -2177,601 +1762,346 @@ VioCart.styles = css`
     }
     .confirm-close:hover { background: #222; }
   `;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], VioCart.prototype, "open", 2);
-__decorateClass([
-  property({ type: String })
-], VioCart.prototype, "heading", 2);
-__decorateClass([
-  property({ type: String, attribute: "checkout-label" })
-], VioCart.prototype, "checkoutLabel", 2);
-__decorateClass([
-  property({ type: String, attribute: "empty-label" })
-], VioCart.prototype, "emptyLabel", 2);
-__decorateClass([
-  property({ type: String, attribute: "subtotal-label" })
-], VioCart.prototype, "subtotalLabel", 2);
-__decorateClass([
-  state()
-], VioCart.prototype, "carts", 2);
-__decorateClass([
-  state()
-], VioCart.prototype, "itemCount", 2);
-__decorateClass([
-  state()
-], VioCart.prototype, "applePayAvailable", 2);
-__decorateClass([
-  state()
-], VioCart.prototype, "confirmedOrder", 2);
-VioCart = __decorateClass([
-  customElement("vio-cart")
-], VioCart);
-var VioCheckout = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.heading = "Kasse";
-    this.shippingLabel = "Beregnes ved kasse";
-    this.express = false;
-    this.checkoutState = null;
-    this.items = [];
-    this.applePayAvailable = false;
-    this.applePayInProgress = false;
-    this.klarnaAvailable = false;
-    this.orderConfirmed = false;
-    this.confirmedMethod = null;
-    this.paymentError = null;
-    this.confirmedOrder = null;
-    /** Active Klarna Payments widget handle + the subtotal it was mounted for. */
-    this.klarnaHandle = null;
-    this.klarnaMountedAmount = null;
-    this.klarnaMountedShipping = null;
-    this.klarnaMounting = false;
-    this.klarnaCategories = [];
-    this.klarnaSelectedCat = "";
-    this.klarnaAuthorizing = false;
-    this.selectedShipping = KLARNA_SHIPPING_OPTIONS.find((o) => o.preselected)?.id ?? KLARNA_SHIPPING_OPTIONS[0]?.id ?? "";
-    this.form = {
-      firstName: "",
-      lastName: "",
-      email: "",
-      address: "",
-      postalCode: "",
-      city: ""
-    };
-    this.boundOnCheckoutChange = (e) => {
-      const detail = e.detail;
-      this.checkoutState = detail.state;
-      this.items = Vio.checkout.items;
-      if (this.checkoutState) {
-        this.refreshApplePay();
-        this.refreshKlarna();
-      } else {
-        this.applePayAvailable = false;
-        this.klarnaAvailable = false;
-        this.orderConfirmed = false;
-        this.confirmedMethod = null;
-        this.confirmedOrder = null;
-        this.paymentError = null;
-        this.express = false;
-        this.unmountKlarna();
-      }
-    };
-    this.boundOnPaymentComplete = (e) => {
-      const detail = e.detail;
-      if (detail.method !== "klarna" && detail.method !== "apple-pay") return;
-      const sponsorId = detail.state?.sponsorId ?? this.checkoutState?.sponsorId;
-      if (sponsorId == null) return;
-      this.confirmOrder(detail.method, sponsorId, detail.result);
-    };
-    this.boundOnPaymentError = (e) => {
-      const detail = e.detail;
-      this.paymentError = detail.method === "klarna" ? `Klarna-betalingen kunne ikke fullf\xF8res: ${detail.error}` : detail.error;
-      this.open = true;
-    };
   }
   connectedCallback() {
     super.connectedCallback();
-    this.checkoutState = Vio.checkout.currentState;
-    this.items = Vio.checkout.items;
-    Vio.checkout.addEventListener("change", this.boundOnCheckoutChange);
-    Vio.checkout.addEventListener("payment-complete", this.boundOnPaymentComplete);
-    Vio.checkout.addEventListener("payment-error", this.boundOnPaymentError);
-    if (this.checkoutState) {
-      void this.refreshApplePay();
-      void this.refreshKlarna();
-    }
+    this.carts = Vio.cart.getAllCarts();
+    this.itemCount = Vio.cart.itemCount;
+    Vio.cart.addEventListener("change", this.boundOnCartChange);
   }
   disconnectedCallback() {
-    Vio.checkout.removeEventListener("change", this.boundOnCheckoutChange);
-    Vio.checkout.removeEventListener("payment-complete", this.boundOnPaymentComplete);
-    Vio.checkout.removeEventListener("payment-error", this.boundOnPaymentError);
-    this.unmountKlarna();
+    Vio.cart.removeEventListener("change", this.boundOnCartChange);
     super.disconnectedCallback();
   }
-  updated() {
-    void this.mountKlarnaIfNeeded();
-  }
   close() {
     this.open = false;
-    this.express = false;
-    Vio.checkout.close();
   }
   show() {
     this.open = true;
   }
-  async refreshApplePay() {
-    Vio.checkout.clearApplePayCache();
-    this.applePayAvailable = await Vio.checkout.isApplePayAvailable("NO");
-  }
-  async refreshKlarna() {
-    const available = await Vio.checkout.klarnaPaymentsAvailable();
-    if (available !== this.klarnaAvailable) {
-      if (!available) this.unmountKlarna();
-      this.klarnaAvailable = available;
+  updated(changed) {
+    if (changed.has("open") && this.open) {
+      this.confirmedOrder = null;
+      this.preparedTotal = -1;
     }
-  }
-  /** Mount (or re-mount on amount change) the Klarna Payments widget. */
-  async mountKlarnaIfNeeded() {
-    if (!this.klarnaAvailable || !this.open || !this.checkoutState) return;
-    if (this.checkoutState.paymentMethod !== "klarna" && !this.express) return;
-    if (this.klarnaMounting) return;
-    const amount = this.checkoutState.subtotal;
-    if (this.klarnaHandle && this.klarnaMountedAmount === amount && this.klarnaMountedShipping === this.selectedShipping) {
-      return;
-    }
-    const container = this.renderRoot?.querySelector(
-      "#vio-klarna-payments-container"
-    );
-    if (!container) return;
-    this.klarnaMounting = true;
-    this.unmountKlarna();
-    container.innerHTML = "";
-    try {
-      const handle = await Vio.checkout.mountKlarnaPayments(container, {
-        withShipping: this.express,
-        shippingId: this.selectedShipping
-      });
-      this.klarnaHandle = handle;
-      this.klarnaMountedAmount = amount;
-      this.klarnaMountedShipping = this.selectedShipping;
-      this.klarnaCategories = handle.categories;
-      this.klarnaSelectedCat = handle.selected;
-    } catch (err) {
-      if (typeof console !== "undefined") {
-        console.warn("[VioCheckout] Klarna Payments mount failed:", err);
+    if (this.open && this.itemCount > 0) {
+      const total = this.totalAcrossSponsors;
+      if (total !== this.preparedTotal) {
+        this.preparedTotal = total;
+        void this.refreshApplePay(total);
       }
-      this.paymentError = `Kunne ikke laste Klarna: ${err instanceof Error ? err.message : String(err)}`;
-    } finally {
-      this.klarnaMounting = false;
-    }
-  }
-  unmountKlarna() {
-    if (this.klarnaHandle) {
-      this.klarnaHandle.unmount();
-      this.klarnaHandle = null;
     }
-    this.klarnaMountedAmount = null;
-    this.klarnaMountedShipping = null;
-    this.klarnaCategories = [];
-    this.klarnaSelectedCat = "";
-    this.klarnaAuthorizing = false;
-  }
-  /** Selected shipping option (express flow). */
-  get shippingOption() {
-    return KLARNA_SHIPPING_OPTIONS.find((o) => o.id === this.selectedShipping) ?? null;
-  }
-  /** Pick a shipping option → re-mounts the Klarna widget with the new total. */
-  onSelectShipping(id) {
-    if (this.selectedShipping === id || this.klarnaMounting) return;
-    this.selectedShipping = id;
   }
-  /** Switch the Klarna widget to a different payment_method_category. */
-  async onKlarnaCategory(identifier) {
-    if (!this.klarnaHandle || this.klarnaSelectedCat === identifier) return;
-    this.klarnaSelectedCat = identifier;
-    try {
-      await this.klarnaHandle.load(identifier);
-    } catch (err) {
-      if (typeof console !== "undefined") {
-        console.warn("[VioCheckout] Klarna category switch failed:", err);
-      }
+  /** Pre-resolve the Apple Pay sheet for the current cart total. */
+  async refreshApplePay(total) {
+    if (total <= 0) {
+      this.applePayHandle = null;
+      this.applePayAvailable = false;
+      return;
     }
-  }
-  /** Authorize the selected Klarna method → backend creates the order. */
-  async onKlarnaAuthorize() {
-    if (!this.klarnaHandle || this.klarnaAuthorizing) return;
-    this.paymentError = null;
-    this.klarnaAuthorizing = true;
     try {
-      await this.klarnaHandle.authorize();
-    } finally {
-      this.klarnaAuthorizing = false;
+      const handle = await Vio.checkout.prepareApplePayExpress(total, this.primaryCurrency);
+      if (this.preparedTotal !== total) return;
+      this.applePayHandle = handle;
+      this.applePayAvailable = handle.available;
+    } catch {
+      this.applePayHandle = null;
+      this.applePayAvailable = false;
     }
   }
-  onFieldChange(field, value) {
-    this.form = { ...this.form, [field]: value };
-    Vio.checkout.setAddress(this.form);
-  }
-  async onApplePay() {
-    if (this.applePayInProgress) return;
-    this.applePayInProgress = true;
-    try {
-      await Vio.checkout.startApplePay({ country: "NO", label: "Vio" });
-    } catch (err) {
-      if (typeof console !== "undefined") {
-        console.warn("[VioCheckout] Apple Pay flow ended:", err);
+  /** Apple Pay express — pay the whole cart, then show the confirmation. */
+  onApplePay() {
+    const handle = this.applePayHandle;
+    if (!handle || !handle.available || this.itemCount === 0) return;
+    const snapshot = this.buildConfirmation();
+    void handle.show().then((result) => {
+      if (!result) return;
+      this.confirmedOrder = snapshot;
+      for (const sponsorId of [...this.carts.keys()]) {
+        Vio.cart.clearSponsorCart(sponsorId);
       }
-    } finally {
-      this.applePayInProgress = false;
-    }
+      this.dispatchEvent(
+        new CustomEvent("vio:payment-success", {
+          bubbles: true,
+          composed: true,
+          detail: { method: "apple-pay", result }
+        })
+      );
+    });
   }
-  onPay(method) {
-    this.paymentError = null;
-    if (method === "apple-pay") {
-      void this.onApplePay();
-      return;
+  buildConfirmation() {
+    const items = [];
+    for (const cart of this.carts.values()) {
+      for (const it of cart.items) {
+        items.push({
+          brand: it.brand,
+          name: it.name,
+          quantity: it.quantity,
+          unitPrice: it.unitPrice,
+          currency: it.currency
+        });
+      }
     }
-    Vio.checkout.selectPaymentMethod(method);
+    return { items, total: this.totalAcrossSponsors, currency: this.primaryCurrency };
   }
-  /**
-   * Complete the order for the selected method (Vipps / Card / plain Klarna).
-   * Apple Pay and Klarna Express finish inside their own sheet/popup, so they
-   * never reach here. No real PSP is wired for Vipps/Card in this iteration —
-   * the capture happens backend-side in the full flow — so this confirms the
-   * order state-only and shows the confirmation screen.
-   */
-  onCompleteOrder() {
-    const s = this.checkoutState;
-    if (!s || !s.paymentMethod) return;
-    this.confirmOrder(s.paymentMethod, s.sponsorId);
+  closeConfirmation() {
+    this.confirmedOrder = null;
+    this.close();
   }
-  /**
-   * Shared order confirmation — reached from both the plain "Betal" CTA
-   * (Vipps/Card/Klarna) and the Klarna Express authorize callback. Shows
-   * the confirmation screen, emits `vio:payment-success`, and clears the
-   * paid sponsor's cart so the badge + drawer reflect the purchase.
-   */
-  confirmOrder(method, sponsorId, result) {
-    const r = result ?? {};
-    this.confirmedOrder = {
-      items: [...this.items],
-      currency: this.checkoutState?.currency ?? "",
-      total: typeof r.chargedTotal === "number" ? r.chargedTotal : this.checkoutState?.subtotal ?? 0,
-      orderId: r.order?.orderId
-    };
-    this.confirmedMethod = method;
-    this.orderConfirmed = true;
-    this.open = true;
+  /** Klarna express — opens the side-drawer Klarna checkout for the whole cart,
+   * skipping the address form (leveringsadresse) and method picker
+   * (betalingsmetode). The host's checkout-open handler closes this cart and
+   * opens <vio-checkout> in express mode with Klarna preselected. */
+  onKlarnaExpress() {
+    if (this.itemCount === 0) return;
+    const firstSponsorId = [...this.carts.keys()][0];
+    if (firstSponsorId === void 0) return;
     this.dispatchEvent(
-      new CustomEvent("vio:payment-success", {
+      new CustomEvent("vio:checkout-open", {
         bubbles: true,
         composed: true,
-        detail: { method, sponsorId, result }
+        detail: { sponsorId: firstSponsorId, paymentMethod: "klarna", express: true }
       })
     );
-    Vio.cart.clearSponsorCart(sponsorId);
   }
-  methodLabel(method) {
-    switch (method) {
-      case "apple-pay":
-        return "Apple Pay";
-      case "klarna":
-        return "Klarna";
-      case "vipps":
-        return "Vipps";
-      case "card":
-        return "kort";
-      default:
-        return "";
+  get totalAcrossSponsors() {
+    let sum = 0;
+    for (const cart of this.carts.values()) {
+      for (const item of cart.items) sum += item.unitPrice * item.quantity;
     }
+    return sum;
   }
-  /** True for methods that complete via a separate sheet/widget, not the CTA. */
-  isExpressMethod(method) {
-    return method === "apple-pay" || method === "klarna";
+  get primaryCurrency() {
+    for (const cart of this.carts.values()) return cart.currency;
+    return "NOK";
   }
-  orderTotal() {
-    const s = this.checkoutState;
-    if (!s) return "";
-    return formatPrice(s.subtotal, s.currency);
+  onIncrement(item) {
+    Vio.cart.updateQuantity(item.id, item.sponsorId, item.quantity + 1);
   }
-  /** Shipping cost (major units) applied in express mode, else 0. */
-  shippingMajor() {
-    return this.express ? (this.shippingOption?.price ?? 0) / 100 : 0;
+  onDecrement(item) {
+    Vio.cart.updateQuantity(item.id, item.sponsorId, item.quantity - 1);
   }
-  /** Total to charge — items + shipping (express). */
-  payTotalLabel() {
-    const s = this.checkoutState;
-    if (!s) return "";
-    return formatPrice(s.subtotal + this.shippingMajor(), s.currency);
+  onRemove(item) {
+    Vio.cart.removeItem(item.id, item.sponsorId);
   }
   render() {
+    const isEmpty = this.itemCount === 0;
+    const sponsorCarts = [...this.carts.values()].filter((c) => c.items.length > 0);
     return html`
       <div class="backdrop" @click=${this.close}></div>
-      <div
-        class="modal ${this.express ? "as-side" : this.orderConfirmed ? "as-confirm" : ""}"
-        role="dialog"
-        aria-label=${this.heading}
-      >
+      <aside class="drawer" role="dialog" aria-label=${this.heading}>
         <div class="handle" @click=${this.close} aria-hidden="true"></div>
-        <div class="topbar">
-          <h2 class="heading">${this.orderConfirmed ? "Takk!" : this.heading}</h2>
+        <div class="header">
+          <h2 class="heading">${this.confirmedOrder ? "Takk!" : this.heading}</h2>
           <button class="close" @click=${this.close} aria-label="Lukk">×</button>
         </div>
 
-        <div class="body">
-          ${this.orderConfirmed ? this.renderConfirmation() : this.express ? this.renderKlarnaExpress() : this.renderCheckoutBody()}
-        </div>
-      </div>
-    `;
-  }
-  renderConfirmation() {
-    const o = this.confirmedOrder;
-    return html`
-      <section class="confirmation">
-        <div class="confirm-check" aria-hidden="true">✓</div>
-        <h3 class="confirm-title">Takk for bestillingen!</h3>
-        <p class="confirm-text">
-          Betaling med ${this.methodLabel(this.confirmedMethod)} er bekreftet.${this.form.email ? html` Kvittering sendes til ${this.form.email}.` : ""}
-        </p>
-        ${o?.orderId ? html`<div class="confirm-order-id">Ordrenummer: <b>${o.orderId}</b></div>` : ""}
-        ${o && o.items.length > 0 ? html`
-              <div class="confirm-summary">
-                ${o.items.map(
-      (it) => html`
-                    <div class="order-row">
-                      <span>${it.brand ? `${it.brand} ` : ""}${it.name} ×${it.quantity}</span>
-                      <span>${formatPrice(it.unitPrice * it.quantity, it.currency)}</span>
+        ${this.confirmedOrder ? this.renderConfirmation() : isEmpty ? html`<div class="empty">${this.emptyLabel}</div>` : html`
+              <div class="body">
+                ${sponsorCarts.map(
+      (cart) => html`
+                    <div class="sponsor-group">
+                      ${cart.sponsorName ? html`<div class="sponsor-label">${cart.sponsorName}</div>` : ""}
+                      ${cart.items.map(
+        (item) => html`
+                          <div class="item">
+                            <div class="item-image">
+                              ${item.imageUrl ? html`<img src=${item.imageUrl} alt=${item.name} />` : ""}
+                            </div>
+                            <div>
+                              <div class="item-brand">${item.brand}</div>
+                              <div class="item-name">${item.name}</div>
+                              <div class="item-row">
+                                <span class="item-qty">
+                                  <button
+                                    class="qty-btn"
+                                    @click=${() => this.onDecrement(item)}
+                                    aria-label="Reduser"
+                                  >
+                                    −
+                                  </button>
+                                  ${item.quantity}
+                                  <button
+                                    class="qty-btn"
+                                    @click=${() => this.onIncrement(item)}
+                                    aria-label="Øk"
+                                  >
+                                    +
+                                  </button>
+                                  <button
+                                    class="qty-btn"
+                                    @click=${() => this.onRemove(item)}
+                                    aria-label="Fjern"
+                                    style="margin-left: 8px;"
+                                  >
+                                    ×
+                                  </button>
+                                </span>
+                                <span class="item-price">
+                                  ${formatPrice(
+          item.unitPrice * item.quantity,
+          item.currency
+        )}
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        `
+      )}
                     </div>
                   `
     )}
-                <div class="order-row total">
-                  <span>Totalt</span><span>${formatPrice(o.total, o.currency)}</span>
+              </div>
+              <div class="footer">
+                <div class="subtotal-row">
+                  <span class="subtotal-label">${this.subtotalLabel}</span>
+                  <span class="subtotal-value">
+                    ${formatPrice(this.totalAcrossSponsors, this.primaryCurrency)}
+                  </span>
                 </div>
+                ${this.applePayAvailable ? html`
+                      <button
+                        class="applepay-btn"
+                        @click=${this.onApplePay}
+                        aria-label="Betal med Apple Pay"
+                      >
+                        <span class="ap-logo">${"\uF8FF"}</span> Pay
+                      </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>
-            ` : ""}
-        <button class="confirm-close" @click=${this.close}>Lukk</button>
-      </section>
+            `}
+      </aside>
     `;
   }
-  /** Klarna Payments widget panel: shipping + category chips + widget + pay button. */
-  renderKlarnaPanel() {
-    const currency = this.checkoutState?.currency ?? "NOK";
+  renderConfirmation() {
+    const o = this.confirmedOrder;
+    if (!o) return html``;
     return html`
-      <div class="klarna-panel">
-        ${this.express ? html`
-              <div class="ship-select" role="radiogroup" aria-label="Frakt">
-                ${KLARNA_SHIPPING_OPTIONS.map(
-      (o) => html`
-                    <button
-                      class="ship-opt ${this.selectedShipping === o.id ? "active" : ""}"
-                      role="radio"
-                      aria-checked=${this.selectedShipping === o.id}
-                      ?disabled=${this.klarnaMounting}
-                      @click=${() => this.onSelectShipping(o.id)}
-                    >
-                      <span class="ship-meta">
-                        <b>${o.method}</b><span>${o.description}</span>
-                      </span>
-                      <span class="ship-price">${formatPrice(o.price / 100, currency)}</span>
-                    </button>
-                  `
-    )}
+      <div class="confirm">
+        <div class="confirm-check" aria-hidden="true">✓</div>
+        <h3>Takk for handelen!</h3>
+        <p>Betaling med Apple Pay er bekreftet.</p>
+        <div class="confirm-summary">
+          ${o.items.map(
+      (it) => html`
+              <div class="order-row">
+                <span>${it.brand ? `${it.brand} ` : ""}${it.name} ×${it.quantity}</span>
+                <span>${formatPrice(it.unitPrice * it.quantity, it.currency)}</span>
               </div>
-            ` : ""}
-        ${this.klarnaCategories.length > 1 ? html`
-              <div class="klarna-cats">
-                ${this.klarnaCategories.map(
-      (c) => html`
-                    <button
-                      class="klarna-cat ${this.klarnaSelectedCat === c.identifier ? "active" : ""}"
-                      @click=${() => void this.onKlarnaCategory(c.identifier)}
-                    >
-                      ${c.name}
-                    </button>
-                  `
+            `
     )}
-              </div>
-            ` : ""}
-        <div class="klarna-widget" id="vio-klarna-payments-container"></div>
-        <button
-          class="payment-btn primary complete-cta"
-          @click=${() => void this.onKlarnaAuthorize()}
-          ?disabled=${this.klarnaAuthorizing || !this.klarnaHandle || this.klarnaMounting}
-        >
-          ${this.klarnaAuthorizing ? "Behandler\u2026" : `Betal ${this.payTotalLabel()} med Klarna`}
-        </button>
-      </div>
-    `;
-  }
-  /** Express layout — only the Klarna widget + a compact order summary. */
-  renderKlarnaExpress() {
-    return html`
-      <section class="section">
-        <h3 class="section-heading">Kjøp med Klarna</h3>
-        ${this.items.length > 0 ? html`
-              <div class="express-summary">
-                ${this.items.map(
-      (item) => html`
-                    <div class="order-row">
-                      <span>${item.brand ? `${item.brand} ` : ""}${item.name} ×${item.quantity}</span>
-                      <span>${formatPrice(item.unitPrice * item.quantity, item.currency)}</span>
-                    </div>
-                  `
-    )}
-                <div class="order-row">
-                  <span>Frakt${this.shippingOption ? ` \u2013 ${this.shippingOption.method}` : ""}</span>
-                  <span>${formatPrice(this.shippingMajor(), this.checkoutState?.currency ?? "NOK")}</span>
-                </div>
-                <div class="order-row total">
-                  <span>Totalt</span><span>${this.payTotalLabel()}</span>
-                </div>
-              </div>
-            ` : ""}
-        ${this.renderKlarnaPanel()}
-        ${this.paymentError ? html`<div class="payment-error">${this.paymentError}</div>` : ""}
-      </section>
-    `;
-  }
-  renderCheckoutBody() {
-    const method = this.checkoutState?.paymentMethod;
-    const showCompleteCta = !!method && !this.isExpressMethod(method);
-    return html`
-          <section class="section">
-            <div class="section-label">Steg 1</div>
-            <h3 class="section-heading">Leveringsadresse</h3>
-            <div class="form-row">
-              <div class="field">
-                <label>Fornavn</label>
-                <input
-                  type="text"
-                  autocomplete="given-name"
-                  .value=${this.form.firstName}
-                  @input=${(e) => this.onFieldChange("firstName", e.target.value)}
-                />
-              </div>
-              <div class="field">
-                <label>Etternavn</label>
-                <input
-                  type="text"
-                  autocomplete="family-name"
-                  .value=${this.form.lastName}
-                  @input=${(e) => this.onFieldChange("lastName", e.target.value)}
-                />
-              </div>
-            </div>
-            <div class="field">
-              <label>E-post</label>
-              <input
-                type="email"
-                autocomplete="email"
-                .value=${this.form.email}
-                @input=${(e) => this.onFieldChange("email", e.target.value)}
-              />
-            </div>
-            <div class="field">
-              <label>Adresse</label>
-              <input
-                type="text"
-                autocomplete="street-address"
-                .value=${this.form.address}
-                @input=${(e) => this.onFieldChange("address", e.target.value)}
-              />
-            </div>
-            <div class="form-row">
-              <div class="field">
-                <label>Postnummer</label>
-                <input
-                  type="text"
-                  autocomplete="postal-code"
-                  .value=${this.form.postalCode}
-                  @input=${(e) => this.onFieldChange("postalCode", e.target.value)}
-                />
-              </div>
-              <div class="field">
-                <label>Sted</label>
-                <input
-                  type="text"
-                  autocomplete="address-level2"
-                  .value=${this.form.city}
-                  @input=${(e) => this.onFieldChange("city", e.target.value)}
-                />
-              </div>
-            </div>
-          </section>
-
-          <section class="section">
-            <div class="section-label">Steg 2</div>
-            <h3 class="section-heading">Velg betalingsmåte</h3>
-            <div class="payment-grid">
-              ${this.applePayAvailable ? html`
-                    <button
-                      class="payment-btn primary"
-                      @click=${() => this.onPay("apple-pay")}
-                      ?disabled=${this.applePayInProgress}
-                      aria-pressed=${this.checkoutState?.paymentMethod === "apple-pay"}
-                    >
-                      ${this.applePayInProgress ? "\xC5pner\u2026" : " Pay"}
-                    </button>
-                  ` : ""}
-              ${this.klarnaAvailable ? html`
-                    <button
-                      class="payment-btn"
-                      @click=${() => this.onPay("klarna")}
-                      aria-pressed=${this.checkoutState?.paymentMethod === "klarna"}
-                    >
-                      Klarna
-                    </button>
-                  ` : ""}
-              <button
-                class="payment-btn"
-                @click=${() => this.onPay("vipps")}
-                aria-pressed=${this.checkoutState?.paymentMethod === "vipps"}
-              >
-                Vipps
-              </button>
-              <button
-                class="payment-btn"
-                @click=${() => this.onPay("card")}
-                aria-pressed=${this.checkoutState?.paymentMethod === "card"}
-              >
-                Kort
-              </button>
-              ${!this.applePayAvailable ? html`
-                    <div class="apple-pay-note">
-                       Pay krever Safari på iOS eller macOS med Apple Pay konfigurert.
-                    </div>
-                  ` : ""}
-              ${showCompleteCta ? html`
-                    <button
-                      class="payment-btn primary complete-cta"
-                      @click=${this.onCompleteOrder}
-                    >
-                      Betal ${this.orderTotal()} med ${this.methodLabel(method ?? null)}
-                    </button>
-                  ` : ""}
-              ${method === "klarna" ? this.renderKlarnaPanel() : ""}
-              ${this.paymentError ? html`<div class="payment-error">${this.paymentError}</div>` : ""}
-            </div>
-          </section>
-
-          ${this.items.length > 0 ? html`
-                <section class="order-summary">
-                  ${this.items.map(
-      (item) => html`
-                      <div class="order-line">
-                        <div class="order-line-img">
-                          ${item.imageUrl ? html`<img src=${item.imageUrl} alt=${item.name} />` : ""}
-                        </div>
-                        <div class="order-line-meta">
-                          <span>${item.brand}</span>
-                          <b>${item.name}</b>
-                          <span>×${item.quantity}</span>
-                        </div>
-                        <div class="order-line-price">
-                          ${formatPrice(item.unitPrice * item.quantity, item.currency)}
-                        </div>
-                      </div>
-                    `
-    )}
-                  <div class="order-row" style="margin-top: 16px;">
-                    <span>Sum</span><span>${this.orderTotal()}</span>
-                  </div>
-                  <div class="order-row">
-                    <span>Frakt</span><span>${this.shippingLabel}</span>
-                  </div>
-                  <div class="order-row total">
-                    <span>Totalt</span><span>${this.orderTotal()}</span>
-                  </div>
-                </section>
-              ` : ""}
-        </div>
+          <div class="order-row total">
+            <span>Totalt</span>
+            <span>${formatPrice(o.total, o.currency)}</span>
+          </div>
+        </div>
+        <button class="confirm-close" @click=${this.closeConfirmation}>Lukk</button>
       </div>
     `;
   }
 };
-VioCheckout.styles = css`
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], VioCart.prototype, "open", 2);
+__decorateClass([
+  property({ type: String })
+], VioCart.prototype, "heading", 2);
+__decorateClass([
+  property({ type: String, attribute: "empty-label" })
+], VioCart.prototype, "emptyLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "subtotal-label" })
+], VioCart.prototype, "subtotalLabel", 2);
+__decorateClass([
+  state()
+], VioCart.prototype, "carts", 2);
+__decorateClass([
+  state()
+], VioCart.prototype, "itemCount", 2);
+__decorateClass([
+  state()
+], VioCart.prototype, "applePayAvailable", 2);
+__decorateClass([
+  state()
+], VioCart.prototype, "confirmedOrder", 2);
+var VioCheckout = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.heading = "Kasse";
+    this.shippingLabel = "Beregnes ved kasse";
+    this.express = false;
+    this.checkoutState = null;
+    this.items = [];
+    this.applePayAvailable = false;
+    this.applePayInProgress = false;
+    this.klarnaAvailable = false;
+    this.orderConfirmed = false;
+    this.confirmedMethod = null;
+    this.paymentError = null;
+    this.confirmedOrder = null;
+    /** Active Klarna Payments widget handle + the subtotal it was mounted for. */
+    this.klarnaHandle = null;
+    this.klarnaMountedAmount = null;
+    this.klarnaMountedShipping = null;
+    this.klarnaMounting = false;
+    this.klarnaCategories = [];
+    this.klarnaSelectedCat = "";
+    this.klarnaAuthorizing = false;
+    this.selectedShipping = KLARNA_SHIPPING_OPTIONS.find((o) => o.preselected)?.id ?? KLARNA_SHIPPING_OPTIONS[0]?.id ?? "";
+    this.form = {
+      firstName: "",
+      lastName: "",
+      email: "",
+      address: "",
+      postalCode: "",
+      city: ""
+    };
+    this.boundOnCheckoutChange = (e) => {
+      const detail = e.detail;
+      this.checkoutState = detail.state;
+      this.items = Vio.checkout.items;
+      if (this.checkoutState) {
+        this.refreshApplePay();
+        this.refreshKlarna();
+      } else {
+        this.applePayAvailable = false;
+        this.klarnaAvailable = false;
+        this.orderConfirmed = false;
+        this.confirmedMethod = null;
+        this.confirmedOrder = null;
+        this.paymentError = null;
+        this.express = false;
+        this.unmountKlarna();
+      }
+    };
+    this.boundOnPaymentComplete = (e) => {
+      const detail = e.detail;
+      if (detail.method !== "klarna" && detail.method !== "apple-pay") return;
+      const sponsorId = detail.state?.sponsorId ?? this.checkoutState?.sponsorId;
+      if (sponsorId == null) return;
+      this.confirmOrder(detail.method, sponsorId, detail.result);
+    };
+    this.boundOnPaymentError = (e) => {
+      const detail = e.detail;
+      this.paymentError = detail.method === "klarna" ? `Klarna-betalingen kunne ikke fullf\xF8res: ${detail.error}` : detail.error;
+      this.open = true;
+    };
+  }
+  static {
+    this.styles = css`
     :host { display: contents; }
     .backdrop {
       position: fixed;
@@ -3171,53 +2501,554 @@ VioCheckout.styles = css`
     }
     .confirm-close:hover { background: #222; }
 
-    .order-summary {
-      background: var(--vio-color-surface-muted, #f2f2f2);
-      padding: var(--vio-space-lg, 24px);
-      margin-top: var(--vio-space-xl, 32px);
-    }
-    .order-line {
-      display: grid;
-      grid-template-columns: 56px 1fr auto;
-      gap: 12px;
-      padding: 8px 0;
-      align-items: center;
-    }
-    .order-line-img {
-      aspect-ratio: 1;
-      background: #fff;
-      overflow: hidden;
-    }
-    .order-line-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
-    .order-line-meta { font-size: 13px; }
-    .order-line-meta b { display: block; }
-    .order-line-meta span {
-      color: var(--vio-color-text-secondary, #666);
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: var(--vio-tracking-label, 0.1em);
-    }
-    .order-line-price { font-weight: 700; font-size: 14px; }
-    .order-row {
-      display: flex;
-      justify-content: space-between;
-      padding: 8px 0;
-      font-size: 14px;
-    }
-    .order-row.total {
-      border-top: 1px solid var(--vio-color-border-default, #ccc);
-      margin-top: var(--vio-space-sm, 8px);
-      padding-top: var(--vio-space-md, 16px);
-      font-weight: 700;
-      font-size: 16px;
-    }
+    .order-summary {
+      background: var(--vio-color-surface-muted, #f2f2f2);
+      padding: var(--vio-space-lg, 24px);
+      margin-top: var(--vio-space-xl, 32px);
+    }
+    .order-line {
+      display: grid;
+      grid-template-columns: 56px 1fr auto;
+      gap: 12px;
+      padding: 8px 0;
+      align-items: center;
+    }
+    .order-line-img {
+      aspect-ratio: 1;
+      background: #fff;
+      overflow: hidden;
+    }
+    .order-line-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
+    .order-line-meta { font-size: 13px; }
+    .order-line-meta b { display: block; }
+    .order-line-meta span {
+      color: var(--vio-color-text-secondary, #666);
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+    }
+    .order-line-price { font-weight: 700; font-size: 14px; }
+    .order-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 8px 0;
+      font-size: 14px;
+    }
+    .order-row.total {
+      border-top: 1px solid var(--vio-color-border-default, #ccc);
+      margin-top: var(--vio-space-sm, 8px);
+      padding-top: var(--vio-space-md, 16px);
+      font-weight: 700;
+      font-size: 16px;
+    }
+
+    @media (max-width: 600px) {
+      .form-row { grid-template-columns: 1fr; gap: 0; }
+      .payment-grid { grid-template-columns: 1fr; }
+      .body { padding: 32px var(--vio-space-lg, 24px) 64px; }
+    }
+  `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.checkoutState = Vio.checkout.currentState;
+    this.items = Vio.checkout.items;
+    Vio.checkout.addEventListener("change", this.boundOnCheckoutChange);
+    Vio.checkout.addEventListener("payment-complete", this.boundOnPaymentComplete);
+    Vio.checkout.addEventListener("payment-error", this.boundOnPaymentError);
+    if (this.checkoutState) {
+      void this.refreshApplePay();
+      void this.refreshKlarna();
+    }
+  }
+  disconnectedCallback() {
+    Vio.checkout.removeEventListener("change", this.boundOnCheckoutChange);
+    Vio.checkout.removeEventListener("payment-complete", this.boundOnPaymentComplete);
+    Vio.checkout.removeEventListener("payment-error", this.boundOnPaymentError);
+    this.unmountKlarna();
+    super.disconnectedCallback();
+  }
+  updated() {
+    void this.mountKlarnaIfNeeded();
+  }
+  close() {
+    this.open = false;
+    this.express = false;
+    Vio.checkout.close();
+  }
+  show() {
+    this.open = true;
+  }
+  async refreshApplePay() {
+    Vio.checkout.clearApplePayCache();
+    this.applePayAvailable = await Vio.checkout.isApplePayAvailable("NO");
+  }
+  async refreshKlarna() {
+    const available = await Vio.checkout.klarnaPaymentsAvailable();
+    if (available !== this.klarnaAvailable) {
+      if (!available) this.unmountKlarna();
+      this.klarnaAvailable = available;
+    }
+  }
+  /** Mount (or re-mount on amount change) the Klarna Payments widget. */
+  async mountKlarnaIfNeeded() {
+    if (!this.klarnaAvailable || !this.open || !this.checkoutState) return;
+    if (this.checkoutState.paymentMethod !== "klarna" && !this.express) return;
+    if (this.klarnaMounting) return;
+    const amount = this.checkoutState.subtotal;
+    if (this.klarnaHandle && this.klarnaMountedAmount === amount && this.klarnaMountedShipping === this.selectedShipping) {
+      return;
+    }
+    const container = this.renderRoot?.querySelector(
+      "#vio-klarna-payments-container"
+    );
+    if (!container) return;
+    this.klarnaMounting = true;
+    this.unmountKlarna();
+    container.innerHTML = "";
+    try {
+      const handle = await Vio.checkout.mountKlarnaPayments(container, {
+        withShipping: this.express,
+        shippingId: this.selectedShipping
+      });
+      this.klarnaHandle = handle;
+      this.klarnaMountedAmount = amount;
+      this.klarnaMountedShipping = this.selectedShipping;
+      this.klarnaCategories = handle.categories;
+      this.klarnaSelectedCat = handle.selected;
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[VioCheckout] Klarna Payments mount failed:", err);
+      }
+      this.paymentError = `Kunne ikke laste Klarna: ${err instanceof Error ? err.message : String(err)}`;
+    } finally {
+      this.klarnaMounting = false;
+    }
+  }
+  unmountKlarna() {
+    if (this.klarnaHandle) {
+      this.klarnaHandle.unmount();
+      this.klarnaHandle = null;
+    }
+    this.klarnaMountedAmount = null;
+    this.klarnaMountedShipping = null;
+    this.klarnaCategories = [];
+    this.klarnaSelectedCat = "";
+    this.klarnaAuthorizing = false;
+  }
+  /** Selected shipping option (express flow). */
+  get shippingOption() {
+    return KLARNA_SHIPPING_OPTIONS.find((o) => o.id === this.selectedShipping) ?? null;
+  }
+  /** Pick a shipping option → re-mounts the Klarna widget with the new total. */
+  onSelectShipping(id) {
+    if (this.selectedShipping === id || this.klarnaMounting) return;
+    this.selectedShipping = id;
+  }
+  /** Switch the Klarna widget to a different payment_method_category. */
+  async onKlarnaCategory(identifier) {
+    if (!this.klarnaHandle || this.klarnaSelectedCat === identifier) return;
+    this.klarnaSelectedCat = identifier;
+    try {
+      await this.klarnaHandle.load(identifier);
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[VioCheckout] Klarna category switch failed:", err);
+      }
+    }
+  }
+  /** Authorize the selected Klarna method → backend creates the order. */
+  async onKlarnaAuthorize() {
+    if (!this.klarnaHandle || this.klarnaAuthorizing) return;
+    this.paymentError = null;
+    this.klarnaAuthorizing = true;
+    try {
+      await this.klarnaHandle.authorize();
+    } finally {
+      this.klarnaAuthorizing = false;
+    }
+  }
+  onFieldChange(field, value) {
+    this.form = { ...this.form, [field]: value };
+    Vio.checkout.setAddress(this.form);
+  }
+  async onApplePay() {
+    if (this.applePayInProgress) return;
+    this.applePayInProgress = true;
+    try {
+      await Vio.checkout.startApplePay({ country: "NO", label: "Vio" });
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[VioCheckout] Apple Pay flow ended:", err);
+      }
+    } finally {
+      this.applePayInProgress = false;
+    }
+  }
+  onPay(method) {
+    this.paymentError = null;
+    if (method === "apple-pay") {
+      void this.onApplePay();
+      return;
+    }
+    Vio.checkout.selectPaymentMethod(method);
+  }
+  /**
+   * Complete the order for the selected method (Vipps / Card / plain Klarna).
+   * Apple Pay and Klarna Express finish inside their own sheet/popup, so they
+   * never reach here. No real PSP is wired for Vipps/Card in this iteration —
+   * the capture happens backend-side in the full flow — so this confirms the
+   * order state-only and shows the confirmation screen.
+   */
+  onCompleteOrder() {
+    const s = this.checkoutState;
+    if (!s || !s.paymentMethod) return;
+    this.confirmOrder(s.paymentMethod, s.sponsorId);
+  }
+  /**
+   * Shared order confirmation — reached from both the plain "Betal" CTA
+   * (Vipps/Card/Klarna) and the Klarna Express authorize callback. Shows
+   * the confirmation screen, emits `vio:payment-success`, and clears the
+   * paid sponsor's cart so the badge + drawer reflect the purchase.
+   */
+  confirmOrder(method, sponsorId, result) {
+    const r = result ?? {};
+    this.confirmedOrder = {
+      items: [...this.items],
+      currency: this.checkoutState?.currency ?? "",
+      total: typeof r.chargedTotal === "number" ? r.chargedTotal : this.checkoutState?.subtotal ?? 0,
+      orderId: r.order?.orderId
+    };
+    this.confirmedMethod = method;
+    this.orderConfirmed = true;
+    this.open = true;
+    this.dispatchEvent(
+      new CustomEvent("vio:payment-success", {
+        bubbles: true,
+        composed: true,
+        detail: { method, sponsorId, result }
+      })
+    );
+    Vio.cart.clearSponsorCart(sponsorId);
+  }
+  methodLabel(method) {
+    switch (method) {
+      case "apple-pay":
+        return "Apple Pay";
+      case "klarna":
+        return "Klarna";
+      case "vipps":
+        return "Vipps";
+      case "card":
+        return "kort";
+      default:
+        return "";
+    }
+  }
+  /** True for methods that complete via a separate sheet/widget, not the CTA. */
+  isExpressMethod(method) {
+    return method === "apple-pay" || method === "klarna";
+  }
+  orderTotal() {
+    const s = this.checkoutState;
+    if (!s) return "";
+    return formatPrice(s.subtotal, s.currency);
+  }
+  /** Shipping cost (major units) applied in express mode, else 0. */
+  shippingMajor() {
+    return this.express ? (this.shippingOption?.price ?? 0) / 100 : 0;
+  }
+  /** Total to charge — items + shipping (express). */
+  payTotalLabel() {
+    const s = this.checkoutState;
+    if (!s) return "";
+    return formatPrice(s.subtotal + this.shippingMajor(), s.currency);
+  }
+  render() {
+    return html`
+      <div class="backdrop" @click=${this.close}></div>
+      <div
+        class="modal ${this.express ? "as-side" : this.orderConfirmed ? "as-confirm" : ""}"
+        role="dialog"
+        aria-label=${this.heading}
+      >
+        <div class="handle" @click=${this.close} aria-hidden="true"></div>
+        <div class="topbar">
+          <h2 class="heading">${this.orderConfirmed ? "Takk!" : this.heading}</h2>
+          <button class="close" @click=${this.close} aria-label="Lukk">×</button>
+        </div>
+
+        <div class="body">
+          ${this.orderConfirmed ? this.renderConfirmation() : this.express ? this.renderKlarnaExpress() : this.renderCheckoutBody()}
+        </div>
+      </div>
+    `;
+  }
+  renderConfirmation() {
+    const o = this.confirmedOrder;
+    return html`
+      <section class="confirmation">
+        <div class="confirm-check" aria-hidden="true">✓</div>
+        <h3 class="confirm-title">Takk for bestillingen!</h3>
+        <p class="confirm-text">
+          Betaling med ${this.methodLabel(this.confirmedMethod)} er bekreftet.${this.form.email ? html` Kvittering sendes til ${this.form.email}.` : ""}
+        </p>
+        ${o?.orderId ? html`<div class="confirm-order-id">Ordrenummer: <b>${o.orderId}</b></div>` : ""}
+        ${o && o.items.length > 0 ? html`
+              <div class="confirm-summary">
+                ${o.items.map(
+      (it) => html`
+                    <div class="order-row">
+                      <span>${it.brand ? `${it.brand} ` : ""}${it.name} ×${it.quantity}</span>
+                      <span>${formatPrice(it.unitPrice * it.quantity, it.currency)}</span>
+                    </div>
+                  `
+    )}
+                <div class="order-row total">
+                  <span>Totalt</span><span>${formatPrice(o.total, o.currency)}</span>
+                </div>
+              </div>
+            ` : ""}
+        <button class="confirm-close" @click=${this.close}>Lukk</button>
+      </section>
+    `;
+  }
+  /** Klarna Payments widget panel: shipping + category chips + widget + pay button. */
+  renderKlarnaPanel() {
+    const currency = this.checkoutState?.currency ?? "NOK";
+    return html`
+      <div class="klarna-panel">
+        ${this.express ? html`
+              <div class="ship-select" role="radiogroup" aria-label="Frakt">
+                ${KLARNA_SHIPPING_OPTIONS.map(
+      (o) => html`
+                    <button
+                      class="ship-opt ${this.selectedShipping === o.id ? "active" : ""}"
+                      role="radio"
+                      aria-checked=${this.selectedShipping === o.id}
+                      ?disabled=${this.klarnaMounting}
+                      @click=${() => this.onSelectShipping(o.id)}
+                    >
+                      <span class="ship-meta">
+                        <b>${o.method}</b><span>${o.description}</span>
+                      </span>
+                      <span class="ship-price">${formatPrice(o.price / 100, currency)}</span>
+                    </button>
+                  `
+    )}
+              </div>
+            ` : ""}
+        ${this.klarnaCategories.length > 1 ? html`
+              <div class="klarna-cats">
+                ${this.klarnaCategories.map(
+      (c) => html`
+                    <button
+                      class="klarna-cat ${this.klarnaSelectedCat === c.identifier ? "active" : ""}"
+                      @click=${() => void this.onKlarnaCategory(c.identifier)}
+                    >
+                      ${c.name}
+                    </button>
+                  `
+    )}
+              </div>
+            ` : ""}
+        <div class="klarna-widget" id="vio-klarna-payments-container"></div>
+        <button
+          class="payment-btn primary complete-cta"
+          @click=${() => void this.onKlarnaAuthorize()}
+          ?disabled=${this.klarnaAuthorizing || !this.klarnaHandle || this.klarnaMounting}
+        >
+          ${this.klarnaAuthorizing ? "Behandler\u2026" : `Betal ${this.payTotalLabel()} med Klarna`}
+        </button>
+      </div>
+    `;
+  }
+  /** Express layout — only the Klarna widget + a compact order summary. */
+  renderKlarnaExpress() {
+    return html`
+      <section class="section">
+        <h3 class="section-heading">Kjøp med Klarna</h3>
+        ${this.items.length > 0 ? html`
+              <div class="express-summary">
+                ${this.items.map(
+      (item) => html`
+                    <div class="order-row">
+                      <span>${item.brand ? `${item.brand} ` : ""}${item.name} ×${item.quantity}</span>
+                      <span>${formatPrice(item.unitPrice * item.quantity, item.currency)}</span>
+                    </div>
+                  `
+    )}
+                <div class="order-row">
+                  <span>Frakt${this.shippingOption ? ` \u2013 ${this.shippingOption.method}` : ""}</span>
+                  <span>${formatPrice(this.shippingMajor(), this.checkoutState?.currency ?? "NOK")}</span>
+                </div>
+                <div class="order-row total">
+                  <span>Totalt</span><span>${this.payTotalLabel()}</span>
+                </div>
+              </div>
+            ` : ""}
+        ${this.renderKlarnaPanel()}
+        ${this.paymentError ? html`<div class="payment-error">${this.paymentError}</div>` : ""}
+      </section>
+    `;
+  }
+  renderCheckoutBody() {
+    const method = this.checkoutState?.paymentMethod;
+    const showCompleteCta = !!method && !this.isExpressMethod(method);
+    return html`
+          <section class="section">
+            <div class="section-label">Steg 1</div>
+            <h3 class="section-heading">Leveringsadresse</h3>
+            <div class="form-row">
+              <div class="field">
+                <label>Fornavn</label>
+                <input
+                  type="text"
+                  autocomplete="given-name"
+                  .value=${this.form.firstName}
+                  @input=${(e) => this.onFieldChange("firstName", e.target.value)}
+                />
+              </div>
+              <div class="field">
+                <label>Etternavn</label>
+                <input
+                  type="text"
+                  autocomplete="family-name"
+                  .value=${this.form.lastName}
+                  @input=${(e) => this.onFieldChange("lastName", e.target.value)}
+                />
+              </div>
+            </div>
+            <div class="field">
+              <label>E-post</label>
+              <input
+                type="email"
+                autocomplete="email"
+                .value=${this.form.email}
+                @input=${(e) => this.onFieldChange("email", e.target.value)}
+              />
+            </div>
+            <div class="field">
+              <label>Adresse</label>
+              <input
+                type="text"
+                autocomplete="street-address"
+                .value=${this.form.address}
+                @input=${(e) => this.onFieldChange("address", e.target.value)}
+              />
+            </div>
+            <div class="form-row">
+              <div class="field">
+                <label>Postnummer</label>
+                <input
+                  type="text"
+                  autocomplete="postal-code"
+                  .value=${this.form.postalCode}
+                  @input=${(e) => this.onFieldChange("postalCode", e.target.value)}
+                />
+              </div>
+              <div class="field">
+                <label>Sted</label>
+                <input
+                  type="text"
+                  autocomplete="address-level2"
+                  .value=${this.form.city}
+                  @input=${(e) => this.onFieldChange("city", e.target.value)}
+                />
+              </div>
+            </div>
+          </section>
+
+          <section class="section">
+            <div class="section-label">Steg 2</div>
+            <h3 class="section-heading">Velg betalingsmåte</h3>
+            <div class="payment-grid">
+              ${this.applePayAvailable ? html`
+                    <button
+                      class="payment-btn primary"
+                      @click=${() => this.onPay("apple-pay")}
+                      ?disabled=${this.applePayInProgress}
+                      aria-pressed=${this.checkoutState?.paymentMethod === "apple-pay"}
+                    >
+                      ${this.applePayInProgress ? "\xC5pner\u2026" : " Pay"}
+                    </button>
+                  ` : ""}
+              ${this.klarnaAvailable ? html`
+                    <button
+                      class="payment-btn"
+                      @click=${() => this.onPay("klarna")}
+                      aria-pressed=${this.checkoutState?.paymentMethod === "klarna"}
+                    >
+                      Klarna
+                    </button>
+                  ` : ""}
+              <button
+                class="payment-btn"
+                @click=${() => this.onPay("vipps")}
+                aria-pressed=${this.checkoutState?.paymentMethod === "vipps"}
+              >
+                Vipps
+              </button>
+              <button
+                class="payment-btn"
+                @click=${() => this.onPay("card")}
+                aria-pressed=${this.checkoutState?.paymentMethod === "card"}
+              >
+                Kort
+              </button>
+              ${!this.applePayAvailable ? html`
+                    <div class="apple-pay-note">
+                       Pay krever Safari på iOS eller macOS med Apple Pay konfigurert.
+                    </div>
+                  ` : ""}
+              ${showCompleteCta ? html`
+                    <button
+                      class="payment-btn primary complete-cta"
+                      @click=${this.onCompleteOrder}
+                    >
+                      Betal ${this.orderTotal()} med ${this.methodLabel(method ?? null)}
+                    </button>
+                  ` : ""}
+              ${method === "klarna" ? this.renderKlarnaPanel() : ""}
+              ${this.paymentError ? html`<div class="payment-error">${this.paymentError}</div>` : ""}
+            </div>
+          </section>
 
-    @media (max-width: 600px) {
-      .form-row { grid-template-columns: 1fr; gap: 0; }
-      .payment-grid { grid-template-columns: 1fr; }
-      .body { padding: 32px var(--vio-space-lg, 24px) 64px; }
-    }
-  `;
+          ${this.items.length > 0 ? html`
+                <section class="order-summary">
+                  ${this.items.map(
+      (item) => html`
+                      <div class="order-line">
+                        <div class="order-line-img">
+                          ${item.imageUrl ? html`<img src=${item.imageUrl} alt=${item.name} />` : ""}
+                        </div>
+                        <div class="order-line-meta">
+                          <span>${item.brand}</span>
+                          <b>${item.name}</b>
+                          <span>×${item.quantity}</span>
+                        </div>
+                        <div class="order-line-price">
+                          ${formatPrice(item.unitPrice * item.quantity, item.currency)}
+                        </div>
+                      </div>
+                    `
+    )}
+                  <div class="order-row" style="margin-top: 16px;">
+                    <span>Sum</span><span>${this.orderTotal()}</span>
+                  </div>
+                  <div class="order-row">
+                    <span>Frakt</span><span>${this.shippingLabel}</span>
+                  </div>
+                  <div class="order-row total">
+                    <span>Totalt</span><span>${this.orderTotal()}</span>
+                  </div>
+                </section>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], VioCheckout.prototype, "open", 2);
@@ -3272,13 +3103,22 @@ __decorateClass([
 __decorateClass([
   state()
 ], VioCheckout.prototype, "form", 2);
-VioCheckout = __decorateClass([
-  customElement("vio-checkout")
-], VioCheckout);
 
-// src/ui/index.ts
-var VIO_UI_VERSION = "0.1.0";
+// src/ui/elements.ts
+function registerVioElements() {
+  if (typeof customElements === "undefined") return;
+  const defs = [
+    ["vio-product", VioProduct],
+    ["vio-product-carousel", VioProductCarousel],
+    ["vio-product-detail", VioProductDetail],
+    ["vio-cart", VioCart],
+    ["vio-checkout", VioCheckout]
+  ];
+  for (const [tag, ctor] of defs) {
+    if (!customElements.get(tag)) customElements.define(tag, ctor);
+  }
+}
 
-export { VIO_UI_VERSION, VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens };
-//# sourceMappingURL=chunk-4CCGE7DE.js.map
-//# sourceMappingURL=chunk-4CCGE7DE.js.map
+export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, registerVioElements };
+//# sourceMappingURL=chunk-7JSSYPRN.js.map
+//# sourceMappingURL=chunk-7JSSYPRN.js.map