@vio-live/web-sdk 0.1.0

package/dist/chunk-4CCGE7DE.js

@@ -0,0 +1,3284 @@
+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';
+
+// 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);
+    this.brand = "";
+    this.name = "";
+    this.price = "";
+    this.retailer = "";
+    this.imageUrl = "";
+    this.productId = "";
+    this.sponsorId = "";
+    this.hasVariants = false;
+    this.inCart = false;
+    this.cartQty = 0;
+    this.justAdded = false;
+    this.boundCartChange = () => this.updateInCart();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateInCart();
+    Vio.cart.addEventListener("change", this.boundCartChange);
+  }
+  disconnectedCallback() {
+    Vio.cart.removeEventListener("change", this.boundCartChange);
+    super.disconnectedCallback();
+  }
+  updated(changed) {
+    if (changed.has("productId") || changed.has("sponsorId")) this.updateInCart();
+  }
+  /** Reflect whether (and how many units of) this product sit in the cart. */
+  updateInCart() {
+    const pid = Number(this.productId);
+    if (!Number.isFinite(pid) || pid <= 0) {
+      this.inCart = false;
+      this.cartQty = 0;
+      return;
+    }
+    const sid = Number(this.sponsorId);
+    let qty = 0;
+    for (const cart of Vio.cart.getAllCarts().values()) {
+      if (Number.isFinite(sid) && sid > 0 && cart.sponsorId !== sid) continue;
+      for (const i of cart.items) if (Number(i.productId) === pid) qty += i.quantity;
+    }
+    this.inCart = qty > 0;
+    this.cartQty = qty;
+  }
+  onClick() {
+    this.dispatchEvent(
+      new CustomEvent("vio:product-click", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          productId: this.productId,
+          sponsorId: this.sponsorId,
+          brand: this.brand,
+          name: this.name,
+          price: this.price,
+          retailer: this.retailer,
+          imageUrl: this.imageUrl
+        }
+      })
+    );
+  }
+  onKeydown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this.onClick();
+    }
+  }
+  /** Quick add-to-cart. If the product has selectable variants, open the detail
+   * to pick one instead (the host can't choose for the user). Otherwise emit
+   * `vio:product-add` so the host adds it (bumping quantity on repeat taps). */
+  onAdd(e) {
+    e.stopPropagation();
+    if (this.hasVariants) {
+      this.onClick();
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("vio:product-add", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          productId: this.productId,
+          sponsorId: this.sponsorId,
+          brand: this.brand,
+          name: this.name,
+          price: this.price,
+          retailer: this.retailer,
+          imageUrl: this.imageUrl
+        }
+      })
+    );
+    this.justAdded = true;
+    setTimeout(() => {
+      this.justAdded = false;
+    }, 450);
+  }
+  render() {
+    return html`
+      <div
+        class="card"
+        @click=${this.onClick}
+        @keydown=${this.onKeydown}
+        role="button"
+        tabindex="0"
+        aria-label=${`${this.brand} ${this.name} ${this.price}`}
+      >
+        <div class="image">
+          ${this.imageUrl ? html`<img src=${this.imageUrl} alt=${this.name || this.brand} loading="lazy" />` : ""}
+          <button
+            class="add-btn ${this.inCart ? "in-cart" : ""} ${this.justAdded ? "pop" : ""}"
+            @click=${this.onAdd}
+            aria-label=${this.inCart ? "I handlekurven \u2013 legg til en til" : "Legg i kurv"}
+            title=${this.inCart ? "I handlekurven" : "Legg i kurv"}
+          >
+            ${this.inCart ? this.cartQty > 1 ? html`<span class="add-count">${this.cartQty}</span>` : html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4">
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                  </svg>` : html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
+                  <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
+                  <line x1="3" y1="6" x2="21" y2="6"></line>
+                  <path d="M16 10a4 4 0 0 1-8 0"></path>
+                </svg>`}
+          </button>
+        </div>
+        <div class="meta">
+          ${this.brand ? html`<div class="brand">${this.brand}</div>` : ""}
+          ${this.name ? html`<div class="name">${this.name}</div>` : ""}
+          ${this.price ? html`<div class="price">${this.price}</div>` : ""}
+          ${this.retailer ? html`<div class="retailer">${this.retailer}</div>` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+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);
+__decorateClass([
+  property({ type: String })
+], VioProduct.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], VioProduct.prototype, "price", 2);
+__decorateClass([
+  property({ type: String })
+], VioProduct.prototype, "retailer", 2);
+__decorateClass([
+  property({ type: String, attribute: "image-url" })
+], VioProduct.prototype, "imageUrl", 2);
+__decorateClass([
+  property({ type: String, attribute: "product-id" })
+], VioProduct.prototype, "productId", 2);
+__decorateClass([
+  property({ type: String, attribute: "sponsor-id" })
+], VioProduct.prototype, "sponsorId", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "has-variants" })
+], VioProduct.prototype, "hasVariants", 2);
+__decorateClass([
+  state()
+], VioProduct.prototype, "inCart", 2);
+__decorateClass([
+  state()
+], VioProduct.prototype, "cartQty", 2);
+__decorateClass([
+  state()
+], VioProduct.prototype, "justAdded", 2);
+VioProduct = __decorateClass([
+  customElement("vio-product")
+], VioProduct);
+var VioProductCarousel = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.heading = "";
+    this.disclaimer = "";
+    this.seeAllHref = "";
+    this.seeAllLabel = "Se alle";
+    this.productIds = "";
+    this.commerceKey = "";
+    this.sponsorId = 0;
+    this.productRefs = "";
+    this.currency = "NOK";
+    this.fetched = null;
+    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();
+    }
+  }
+  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-text { flex: 1; min-width: 0; }
+    .label {
+      font-size: var(--vio-size-xs, 12px);
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      text-transform: uppercase;
+      color: var(--vio-color-accent, #c14a3b);
+      font-weight: 500;
+      margin-bottom: var(--vio-space-sm, 8px);
+    }
+    .heading-row {
+      display: flex;
+      align-items: baseline;
+      gap: var(--vio-space-sm, 8px);
+      flex-wrap: wrap;
+    }
+    .heading {
+      font-family: var(--vio-font-serif, Georgia, serif);
+      font-size: clamp(28px, 4vw, 40px);
+      font-weight: 400;
+      line-height: 1.1;
+      margin: 0;
+    }
+    .disclaimer {
+      color: var(--vio-color-text-tertiary, #999);
+      font-size: var(--vio-size-sm, 14px);
+      font-style: italic;
+    }
+    .see-all {
+      font-size: var(--vio-size-sm, 14px);
+      color: var(--vio-color-text, #0a0a0a);
+      text-decoration: underline;
+      text-underline-offset: 4px;
+      white-space: nowrap;
+      font-weight: 500;
+    }
+    .see-all:hover { color: var(--vio-color-text-secondary, #666); }
+
+    .viewport {
+      position: relative;
+    }
+    .scroller {
+      display: flex;
+      gap: var(--vio-space-md, 16px);
+      /* Extra left padding so the first card clears the prev chevron. */
+      padding: 0 var(--vio-space-lg, 24px) 8px 72px;
+      overflow-x: auto;
+      scroll-snap-type: x mandatory;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      -webkit-overflow-scrolling: touch;
+    }
+    @media (max-width: 600px) {
+      .scroller { padding: 0 var(--vio-space-lg, 24px) 8px; }
+    }
+    .scroller::-webkit-scrollbar { display: none; }
+    ::slotted(*),
+    vio-product {
+      flex: 0 0 240px;
+      scroll-snap-align: start;
+    }
+    @media (max-width: 600px) {
+      ::slotted(*),
+      vio-product {
+        /* Two complete cards per screen (+ a sliver of the next), matching the
+           reference: card = (viewport − side padding − gap) / 2. */
+        flex: 0 0 calc((100vw - 64px) / 2);
+      }
+    }
+
+    .nav-btn {
+      position: absolute;
+      top: 30%;
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      background: #fff;
+      border: none;
+      box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      color: #0a0a0a;
+      z-index: 2;
+      transition: background 0.15s, transform 0.15s;
+      font-family: inherit;
+      padding: 0;
+    }
+    .nav-btn:hover { background: #fafafa; transform: scale(1.05); }
+    .nav-btn:active { transform: scale(0.98); }
+    .nav-btn.prev { left: 8px; }
+    .nav-btn.next { right: 8px; }
+    @media (max-width: 600px) {
+      .nav-btn { display: none; }
+    }
+
+    .state {
+      padding: 60px var(--vio-space-lg, 24px);
+      text-align: center;
+      color: var(--vio-color-text-secondary, #666);
+      font-size: 14px;
+    }
+    .state.error { color: var(--vio-color-accent, #c14a3b); }
+    .skeleton {
+      flex: 0 0 240px;
+      scroll-snap-align: start;
+    }
+    .skeleton-image {
+      aspect-ratio: 1 / 1;
+      background: var(--vio-color-surface-muted, #f2f2f2);
+      animation: vio-pulse 1.6s ease-in-out infinite;
+    }
+    .skeleton-text {
+      height: 12px;
+      background: var(--vio-color-surface-muted, #f2f2f2);
+      margin-top: 12px;
+      animation: vio-pulse 1.6s ease-in-out infinite;
+    }
+    .skeleton-text.shorter { width: 60%; }
+    @keyframes vio-pulse {
+      0%,
+      100% { opacity: 1; }
+      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;
+  }
+  close() {
+    this.open = false;
+    setTimeout(() => {
+      if (!this.open) {
+        this.product = null;
+        this.selectedOptions = {};
+        this.quantity = 1;
+        this.activeImageIndex = 0;
+        this.fetchError = "";
+      }
+    }, 400);
+  }
+  async fetchProduct() {
+    const productIdNum = parseInt(this.productId, 10);
+    if (Number.isNaN(productIdNum) || !this.sponsorId) {
+      this.product = null;
+      return;
+    }
+    this.isLoading = true;
+    this.fetchError = "";
+    try {
+      const commerce = Vio.commerceFor(this.sponsorId);
+      const products = await commerce.channel.product.getByIds({
+        product_ids: [productIdNum],
+        currency: this.currency,
+        image_size: "large"
+      });
+      this.product = products[0] ?? null;
+      if (this.product) {
+        const initial = {};
+        for (const opt of this.product.options) {
+          const values = normalizeValues(opt.values);
+          if (values.length > 0) initial[opt.name] = values[0];
+        }
+        this.selectedOptions = initial;
+        void Vio.checkout.prepareApplePayFor(this.unitPrice * this.quantity, this.currency).then((handle) => {
+          this.applePayHandle = handle;
+          this.applePayOk = handle.available;
+        }).catch(() => {
+          this.applePayHandle = null;
+          this.applePayOk = false;
+        });
+      }
+    } catch (err) {
+      this.fetchError = err instanceof Error ? err.message : String(err);
+    } 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;
+  }
+  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="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`
+    :host { display: contents; }
+
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.25s ease;
+      z-index: 1100;
+    }
+    :host([open]) .backdrop { opacity: 1; pointer-events: auto; }
+
+    .modal {
+      position: fixed;
+      inset: 0;
+      background: var(--vio-color-surface, #fff);
+      transform: translateY(100%);
+      transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
+      display: flex;
+      flex-direction: column;
+      font-family: var(--vio-font-sans, -apple-system, sans-serif);
+      color: var(--vio-color-text, #0a0a0a);
+      z-index: 1101;
+      overflow-y: auto;
+    }
+    :host([open]) .modal { transform: translateY(0); }
+
+    .handle { display: none; }
+
+    /* Mobile: bottom sheet (not fullscreen), rounded top, drag handle. */
+    @media (max-width: 600px) {
+      .modal {
+        top: auto;
+        height: 92vh;
+        border-radius: 16px 16px 0 0;
+        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
+      }
+      .handle {
+        display: flex;
+        justify-content: center;
+        padding: 10px 0 4px;
+        flex-shrink: 0;
+      }
+      .handle::before {
+        content: '';
+        width: 40px;
+        height: 4px;
+        background: var(--vio-color-border, #e5e5e5);
+        border-radius: 2px;
+      }
+    }
+
+    /* Desktop: right-side drawer (matches the cart/checkout), so the product
+       shows "al lado" instead of a centered modal. Info stacks in one column. */
+    @media (min-width: 601px) {
+      .modal {
+        inset: 0 0 0 auto;
+        width: min(440px, 100%);
+        max-width: 440px;
+        border-radius: 0;
+        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
+        transform: translateX(100%);
+        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+      }
+      :host([open]) .modal { transform: translateX(0); }
+      /* Content overrides are prefixed with .modal so they beat the base
+         .body / .name / .gallery-main rules defined LATER in this stylesheet
+         (equal specificity, later wins; the extra class tips the cascade). */
+      .modal .body {
+        max-width: none;
+        grid-template-columns: 1fr;
+        gap: 20px;
+        padding: 20px 24px 40px;
+      }
+      .modal .name { font-size: 26px; line-height: 1.2; }
+      .modal .gallery-main { width: 100%; }
+    }
+
+    .topbar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px var(--vio-space-lg, 24px);
+      position: sticky;
+      top: 0;
+      background: var(--vio-color-surface, #fff);
+      border-bottom: 1px solid var(--vio-color-border, #e5e5e5);
+      z-index: 1;
+    }
+    .topbar-brand {
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      color: var(--vio-color-text-secondary, #666);
+      font-weight: 500;
+    }
+    .close {
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: 28px;
+      line-height: 1;
+      padding: 0;
+      color: var(--vio-color-text, #0a0a0a);
+      font-family: inherit;
+    }
+    .close:hover { color: var(--vio-color-text-secondary, #666); }
+
+    .body {
+      flex: 1;
+      max-width: 1200px;
+      width: 100%;
+      margin: 0 auto;
+      padding: 48px var(--vio-space-lg, 24px) 80px;
+      box-sizing: border-box;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 64px;
+    }
+    @media (max-width: 800px) {
+      .body { grid-template-columns: 1fr; gap: 32px; padding: 24px var(--vio-space-lg, 24px) 64px; }
+    }
+
+    /* Gallery */
+    .gallery { display: flex; flex-direction: column; gap: 16px; }
+    .gallery-main {
+      aspect-ratio: 1;
+      background: var(--vio-color-surface-muted, #f2f2f2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+    .gallery-main img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      padding: 24px;
+      box-sizing: border-box;
+    }
+    .gallery-thumbs {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    .gallery-thumb {
+      width: 72px;
+      height: 72px;
+      background: var(--vio-color-surface-muted, #f2f2f2);
+      border: 1px solid transparent;
+      cursor: pointer;
+      padding: 0;
+      overflow: hidden;
+    }
+    .gallery-thumb img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      padding: 6px;
+      box-sizing: border-box;
+    }
+    .gallery-thumb.active { border-color: var(--vio-color-text, #0a0a0a); }
+
+    /* Info column */
+    .info { display: flex; flex-direction: column; gap: 24px; }
+    .brand {
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      color: var(--vio-color-text-secondary, #666);
+      font-weight: 500;
+    }
+    .name {
+      font-family: var(--vio-font-serif, Georgia, serif);
+      font-size: clamp(28px, 4vw, 40px);
+      font-weight: 400;
+      line-height: 1.15;
+      margin: 0;
+      letter-spacing: -0.01em;
+    }
+    .price-row {
+      display: flex;
+      align-items: baseline;
+      gap: 16px;
+    }
+    .price {
+      font-size: 24px;
+      font-weight: 700;
+    }
+    .compare-at {
+      font-size: 16px;
+      color: var(--vio-color-text-tertiary, #999);
+      text-decoration: line-through;
+    }
+    .stock {
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      font-weight: 500;
+    }
+    .stock.in-stock { color: #2e7d32; }
+    .stock.low-stock { color: #ed6c02; }
+    .stock.out-of-stock { color: var(--vio-color-text-tertiary, #999); }
+
+    /* Option pickers */
+    .option-group { display: flex; flex-direction: column; gap: 8px; }
+    .option-label {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      color: var(--vio-color-text-secondary, #666);
+      font-weight: 500;
+    }
+    .option-values { display: flex; flex-wrap: wrap; gap: 8px; }
+    .option-pill {
+      padding: 10px 18px;
+      background: #fff;
+      border: 1px solid var(--vio-color-border, #e5e5e5);
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 13px;
+      font-weight: 500;
+      color: inherit;
+      transition: border-color 0.15s, background 0.15s;
+    }
+    .option-pill:hover { border-color: var(--vio-color-text, #0a0a0a); }
+    .option-pill[aria-pressed='true'] {
+      border-color: var(--vio-color-text, #0a0a0a);
+      background: var(--vio-color-text, #0a0a0a);
+      color: var(--vio-color-text-on-primary, #fff);
+    }
+
+    /* Qty + CTA row */
+    .qty-cta-row {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 16px;
+      align-items: stretch;
+    }
+    .qty-stepper {
+      display: flex;
+      align-items: center;
+      border: 1px solid var(--vio-color-border, #e5e5e5);
+    }
+    .qty-btn {
+      width: 44px;
+      height: 56px;
+      background: #fff;
+      border: none;
+      cursor: pointer;
+      font-size: 18px;
+      color: var(--vio-color-text, #0a0a0a);
+      font-family: inherit;
+    }
+    .qty-btn:hover { background: var(--vio-color-surface-hover, #fafafa); }
+    .qty-value {
+      width: 40px;
+      text-align: center;
+      font-weight: 600;
+    }
+    .add-to-cart {
+      background: var(--vio-color-text, #0a0a0a);
+      color: var(--vio-color-text-on-primary, #fff);
+      border: none;
+      padding: 18px 24px;
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      font-weight: 600;
+      cursor: pointer;
+      font-family: inherit;
+      transition: background 0.15s;
+    }
+    .add-to-cart:hover:not(:disabled) { background: #222; }
+    .add-to-cart:disabled {
+      background: var(--vio-color-text-tertiary, #999);
+      cursor: not-allowed;
+    }
+    /* Klarna express button — sits full-width below the add-to-cart row. */
+    .buy-klarna {
+      width: 100%;
+      margin-top: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      background: #ffb3c7; /* Klarna pink */
+      color: #0b051d;
+      border: none;
+      padding: 14px 24px;
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      font-weight: 700;
+      cursor: pointer;
+      font-family: inherit;
+      transition: background 0.15s;
+    }
+    .buy-klarna .klarna-badge { height: 22px; width: auto; display: block; }
+    .buy-klarna:hover:not(:disabled) { background: #ffa0b9; }
+    .buy-klarna:disabled { opacity: 0.5; cursor: not-allowed; }
+    /* Apple Pay express button — black, per Apple's button guidelines. Only
+       shown in Safari (canApplePay). The  glyph is the Apple logo (Safari). */
+    .buy-applepay {
+      width: 100%;
+      margin-top: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      background: #000;
+      color: #fff;
+      border: none;
+      padding: 15px 24px;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      font-family: inherit;
+      letter-spacing: 0.01em;
+    }
+    .buy-applepay:hover:not(:disabled) { background: #1a1a1a; }
+    .buy-applepay:disabled { opacity: 0.5; cursor: not-allowed; }
+
+    /* Description */
+    .description {
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--vio-color-text-secondary, #444);
+      margin-top: 8px;
+    }
+    .description-label {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      color: var(--vio-color-text-secondary, #666);
+      font-weight: 500;
+      margin-bottom: 8px;
+    }
+
+    /* Skeleton loader: shimmer placeholders mirroring the product layout
+       (image, brand, title, price, CTA) for a smooth load-in. */
+    .skeleton {
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      padding: 20px 24px 40px;
+    }
+    .skeleton > * {
+      background: linear-gradient(
+        100deg,
+        var(--vio-color-surface-muted, #f1f1f1) 30%,
+        rgba(255, 255, 255, 0.65) 50%,
+        var(--vio-color-surface-muted, #f1f1f1) 70%
+      );
+      background-size: 200% 100%;
+      animation: vio-skeleton-shimmer 1.4s ease-in-out infinite;
+      border-radius: 8px;
+    }
+    .sk-image { width: 100%; aspect-ratio: 1; border-radius: 12px; }
+    .sk-line { height: 14px; }
+    .sk-brand { width: 38%; height: 10px; margin-top: 6px; }
+    .sk-title { width: 85%; height: 26px; }
+    .sk-title-2 { width: 55%; height: 26px; }
+    .sk-price { width: 30%; height: 20px; margin-top: 6px; }
+    .sk-button { width: 100%; height: 54px; border-radius: 0; margin-top: 10px; }
+    @keyframes vio-skeleton-shimmer {
+      0% { background-position: 200% 0; }
+      100% { background-position: -200% 0; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .skeleton > * {
+        animation: none;
+        background: var(--vio-color-surface-muted, #f1f1f1);
+      }
+    }
+    .error {
+      padding: 80px 24px;
+      text-align: center;
+      color: var(--vio-color-accent, #c14a3b);
+      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);
+  }
+  disconnectedCallback() {
+    Vio.cart.removeEventListener("change", this.boundOnCartChange);
+    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);
+      }
+    }
+  }
+  /** Pre-resolve the Apple Pay sheet for the current cart total. */
+  async refreshApplePay(total) {
+    if (total <= 0) {
+      this.applePayHandle = null;
+      this.applePayAvailable = false;
+      return;
+    }
+    try {
+      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;
+    }
+  }
+  /** 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 }
+        })
+      );
+    });
+  }
+  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 };
+  }
+  closeConfirmation() {
+    this.confirmedOrder = null;
+    this.close();
+  }
+  /** Klarna express — opens the side-drawer Klarna checkout for the whole cart,
+   * skipping the address form (leveringsadresse) and method picker
+   * (betalingsmetode). The host's checkout-open handler closes this cart and
+   * opens <vio-checkout> in express mode with Klarna preselected. */
+  onKlarnaExpress() {
+    if (this.itemCount === 0) return;
+    const firstSponsorId = [...this.carts.keys()][0];
+    if (firstSponsorId === void 0) return;
+    this.dispatchEvent(
+      new CustomEvent("vio:checkout-open", {
+        bubbles: true,
+        composed: true,
+        detail: { sponsorId: firstSponsorId, paymentMethod: "klarna", express: true }
+      })
+    );
+  }
+  get totalAcrossSponsors() {
+    let sum = 0;
+    for (const cart of this.carts.values()) {
+      for (const item of cart.items) sum += item.unitPrice * item.quantity;
+    }
+    return sum;
+  }
+  get primaryCurrency() {
+    for (const cart of this.carts.values()) return cart.currency;
+    return "NOK";
+  }
+  onIncrement(item) {
+    Vio.cart.updateQuantity(item.id, item.sponsorId, item.quantity + 1);
+  }
+  onDecrement(item) {
+    Vio.cart.updateQuantity(item.id, item.sponsorId, item.quantity - 1);
+  }
+  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>
+      <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`
+                      <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>
+            `}
+      </aside>
+    `;
+  }
+  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>
+          </div>
+        </div>
+        <button class="confirm-close" @click=${this.closeConfirmation}>Lukk</button>
+      </div>
+    `;
+  }
+};
+VioCart.styles = css`
+    :host { display: contents; }
+
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.4);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.25s ease;
+      z-index: 998;
+    }
+    :host([open]) .backdrop { opacity: 1; pointer-events: auto; }
+
+    .drawer {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: min(440px, 100%);
+      background: var(--vio-color-surface, #fff);
+      transform: translateX(100%);
+      transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+      display: flex;
+      flex-direction: column;
+      font-family: var(--vio-font-sans, -apple-system, sans-serif);
+      color: var(--vio-color-text, #0a0a0a);
+      z-index: 999;
+      box-shadow: -8px 0 24px rgba(0, 0, 0, 0.06);
+    }
+    :host([open]) .drawer { transform: translateX(0); }
+
+    .handle { display: none; }
+
+    /* Mobile: bottom sheet (slide up, rounded top, drag handle). */
+    @media (max-width: 600px) {
+      .drawer {
+        top: auto;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 88vh;
+        border-radius: 16px 16px 0 0;
+        transform: translateY(100%);
+        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
+      }
+      :host([open]) .drawer { transform: translateY(0); }
+      .handle {
+        display: flex;
+        justify-content: center;
+        padding: 10px 0 4px;
+      }
+      .handle::before {
+        content: '';
+        width: 40px;
+        height: 4px;
+        background: var(--vio-color-border, #e5e5e5);
+        border-radius: 2px;
+      }
+    }
+
+    .header {
+      padding: var(--vio-space-lg, 24px);
+      border-bottom: 1px solid var(--vio-color-border, #e5e5e5);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .heading {
+      font-family: var(--vio-font-serif, Georgia, serif);
+      font-size: 24px;
+      font-weight: 400;
+      margin: 0;
+    }
+    .close {
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: 28px;
+      line-height: 1;
+      padding: 0;
+      color: var(--vio-color-text, #0a0a0a);
+      font-family: inherit;
+    }
+    .close:hover { color: var(--vio-color-text-secondary, #666); }
+
+    .body {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .sponsor-group {
+      padding: var(--vio-space-md, 16px) var(--vio-space-lg, 24px);
+      border-bottom: 1px solid var(--vio-color-border, #e5e5e5);
+    }
+    .sponsor-group:last-child { border-bottom: none; }
+    .sponsor-label {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      color: var(--vio-color-text-tertiary, #999);
+      font-weight: 500;
+      margin: 0 0 var(--vio-space-md, 16px);
+    }
+
+    .item {
+      display: grid;
+      grid-template-columns: 80px 1fr;
+      gap: var(--vio-space-md, 16px);
+      padding: var(--vio-space-md, 16px) 0;
+      border-bottom: 1px solid var(--vio-color-border, #e5e5e5);
+    }
+    .item:last-child { border-bottom: none; }
+    .item-image {
+      aspect-ratio: 1;
+      background: var(--vio-color-surface-muted, #f2f2f2);
+      overflow: hidden;
+    }
+    .item-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
+    .item-brand {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      color: var(--vio-color-text-secondary, #666);
+      font-weight: 500;
+    }
+    .item-name {
+      font-size: 14px;
+      margin: 4px 0;
+      font-weight: 500;
+      line-height: 1.3;
+    }
+    .item-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: var(--vio-space-sm, 8px);
+    }
+    .item-qty {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--vio-color-text-secondary, #666);
+      font-size: 12px;
+    }
+    .qty-btn {
+      width: 24px;
+      height: 24px;
+      border: 1px solid var(--vio-color-border, #e5e5e5);
+      background: #fff;
+      border-radius: 2px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--vio-color-text, #0a0a0a);
+      line-height: 1;
+      padding: 0;
+      font-family: inherit;
+    }
+    .qty-btn:hover { border-color: var(--vio-color-text, #0a0a0a); }
+    .item-price { font-size: 14px; font-weight: 700; }
+
+    .empty {
+      padding: 80px var(--vio-space-lg, 24px);
+      text-align: center;
+      color: var(--vio-color-text-secondary, #666);
+      font-size: 14px;
+    }
+
+    .footer {
+      padding: var(--vio-space-lg, 24px);
+      border-top: 1px solid var(--vio-color-border, #e5e5e5);
+      background: var(--vio-color-surface, #fff);
+    }
+    .subtotal-row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: var(--vio-space-md, 16px);
+      font-size: 14px;
+    }
+    .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". */
+    .applepay-btn {
+      width: 100%;
+      padding: 15px;
+      margin-bottom: 10px;
+      background: #000;
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      font-size: 19px;
+      font-weight: 500;
+      line-height: 1;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 5px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      transition: opacity 0.15s;
+    }
+    .applepay-btn:hover { opacity: 0.86; }
+    .applepay-btn .ap-logo { font-size: 19px; line-height: 1; }
+    /* Klarna express — pink brand button, same express row as Apple Pay. */
+    .klarna-btn {
+      width: 100%;
+      padding: 15px;
+      margin-bottom: 10px;
+      background: #ffb3c7;
+      color: #0a0a0a;
+      border: none;
+      border-radius: 8px;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      font-family: var(--vio-font-sans, -apple-system, sans-serif);
+      transition: background 0.15s;
+    }
+    .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 {
+      padding: 56px var(--vio-space-lg, 24px) 40px;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .confirm-check {
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      background: #0a8a3f;
+      color: #fff;
+      font-size: 34px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 20px;
+    }
+    .confirm h3 {
+      font-family: var(--vio-font-serif, Georgia, serif);
+      font-size: 24px;
+      font-weight: 400;
+      margin: 0 0 8px;
+    }
+    .confirm p {
+      color: var(--vio-color-text-secondary, #666);
+      font-size: 14px;
+      margin: 0 0 24px;
+    }
+    .confirm-summary {
+      width: 100%;
+      border-top: 1px solid var(--vio-color-border, #e5e5e5);
+      padding-top: 16px;
+      margin-bottom: 28px;
+      text-align: left;
+    }
+    .order-row {
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+      font-size: 14px;
+      margin-bottom: 10px;
+      color: var(--vio-color-text, #0a0a0a);
+    }
+    .order-row.total {
+      border-top: 1px solid var(--vio-color-border, #e5e5e5);
+      padding-top: 12px;
+      margin-top: 4px;
+      font-weight: 700;
+    }
+    .confirm-close {
+      width: 100%;
+      padding: 16px;
+      background: var(--vio-color-text, #0a0a0a);
+      color: #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);
+    }
+    .confirm-close:hover { background: #222; }
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], VioCart.prototype, "open", 2);
+__decorateClass([
+  property({ type: String })
+], VioCart.prototype, "heading", 2);
+__decorateClass([
+  property({ type: String, attribute: "checkout-label" })
+], VioCart.prototype, "checkoutLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "empty-label" })
+], VioCart.prototype, "emptyLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "subtotal-label" })
+], VioCart.prototype, "subtotalLabel", 2);
+__decorateClass([
+  state()
+], VioCart.prototype, "carts", 2);
+__decorateClass([
+  state()
+], VioCart.prototype, "itemCount", 2);
+__decorateClass([
+  state()
+], VioCart.prototype, "applePayAvailable", 2);
+__decorateClass([
+  state()
+], VioCart.prototype, "confirmedOrder", 2);
+VioCart = __decorateClass([
+  customElement("vio-cart")
+], VioCart);
+var VioCheckout = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.heading = "Kasse";
+    this.shippingLabel = "Beregnes ved kasse";
+    this.express = false;
+    this.checkoutState = null;
+    this.items = [];
+    this.applePayAvailable = false;
+    this.applePayInProgress = false;
+    this.klarnaAvailable = false;
+    this.orderConfirmed = false;
+    this.confirmedMethod = null;
+    this.paymentError = null;
+    this.confirmedOrder = null;
+    /** Active Klarna Payments widget handle + the subtotal it was mounted for. */
+    this.klarnaHandle = null;
+    this.klarnaMountedAmount = null;
+    this.klarnaMountedShipping = null;
+    this.klarnaMounting = false;
+    this.klarnaCategories = [];
+    this.klarnaSelectedCat = "";
+    this.klarnaAuthorizing = false;
+    this.selectedShipping = KLARNA_SHIPPING_OPTIONS.find((o) => o.preselected)?.id ?? KLARNA_SHIPPING_OPTIONS[0]?.id ?? "";
+    this.form = {
+      firstName: "",
+      lastName: "",
+      email: "",
+      address: "",
+      postalCode: "",
+      city: ""
+    };
+    this.boundOnCheckoutChange = (e) => {
+      const detail = e.detail;
+      this.checkoutState = detail.state;
+      this.items = Vio.checkout.items;
+      if (this.checkoutState) {
+        this.refreshApplePay();
+        this.refreshKlarna();
+      } else {
+        this.applePayAvailable = false;
+        this.klarnaAvailable = false;
+        this.orderConfirmed = false;
+        this.confirmedMethod = null;
+        this.confirmedOrder = null;
+        this.paymentError = null;
+        this.express = false;
+        this.unmountKlarna();
+      }
+    };
+    this.boundOnPaymentComplete = (e) => {
+      const detail = e.detail;
+      if (detail.method !== "klarna" && detail.method !== "apple-pay") return;
+      const sponsorId = detail.state?.sponsorId ?? this.checkoutState?.sponsorId;
+      if (sponsorId == null) return;
+      this.confirmOrder(detail.method, sponsorId, detail.result);
+    };
+    this.boundOnPaymentError = (e) => {
+      const detail = e.detail;
+      this.paymentError = detail.method === "klarna" ? `Klarna-betalingen kunne ikke fullf\xF8res: ${detail.error}` : detail.error;
+      this.open = true;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.checkoutState = Vio.checkout.currentState;
+    this.items = Vio.checkout.items;
+    Vio.checkout.addEventListener("change", this.boundOnCheckoutChange);
+    Vio.checkout.addEventListener("payment-complete", this.boundOnPaymentComplete);
+    Vio.checkout.addEventListener("payment-error", this.boundOnPaymentError);
+    if (this.checkoutState) {
+      void this.refreshApplePay();
+      void this.refreshKlarna();
+    }
+  }
+  disconnectedCallback() {
+    Vio.checkout.removeEventListener("change", this.boundOnCheckoutChange);
+    Vio.checkout.removeEventListener("payment-complete", this.boundOnPaymentComplete);
+    Vio.checkout.removeEventListener("payment-error", this.boundOnPaymentError);
+    this.unmountKlarna();
+    super.disconnectedCallback();
+  }
+  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>
+
+          ${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>
+    `;
+  }
+};
+VioCheckout.styles = css`
+    :host { display: contents; }
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.25s ease;
+      z-index: 999;
+    }
+    :host([open]) .backdrop { opacity: 1; pointer-events: auto; }
+
+    .modal {
+      position: fixed;
+      inset: 0;
+      background: var(--vio-color-surface, #fff);
+      transform: translateY(100%);
+      transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
+      display: flex;
+      flex-direction: column;
+      font-family: var(--vio-font-sans, -apple-system, sans-serif);
+      color: var(--vio-color-text, #0a0a0a);
+      z-index: 1000;
+      overflow-y: auto;
+    }
+    :host([open]) .modal { transform: translateY(0); }
+
+    /* Confirmation drawer — compact bottom sheet, not the full-screen overlay. */
+    .modal.as-drawer {
+      inset: auto 0 0 0;
+      height: auto;
+      max-height: 88vh;
+      max-width: 460px;
+      margin: 0 auto;
+      border-radius: 16px 16px 0 0;
+      box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
+    }
+    .modal.as-drawer .handle {
+      display: flex;
+      justify-content: center;
+      padding: 10px 0 4px;
+      flex-shrink: 0;
+    }
+    .modal.as-drawer .handle::before {
+      content: '';
+      width: 40px;
+      height: 4px;
+      background: var(--vio-color-border, #e5e5e5);
+      border-radius: 2px;
+    }
+
+    /* Express (Apple Pay-style): right-side drawer, like the cart. Slides in
+       from the right instead of the full-screen overlay. */
+    .modal.as-side {
+      inset: 0 0 0 auto;
+      width: min(440px, 100%);
+      max-width: 440px;
+      transform: translateX(100%);
+      border-radius: 0;
+      box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
+    }
+    :host([open]) .modal.as-side { transform: translateX(0); }
+    @media (max-width: 600px) {
+      /* On phones, keep it a bottom sheet for reachability. */
+      .modal.as-side {
+        inset: auto 0 0 0;
+        width: 100%;
+        max-width: none;
+        height: 92vh;
+        transform: translateY(100%);
+        border-radius: 16px 16px 0 0;
+      }
+      :host([open]) .modal.as-side { transform: translateY(0); }
+    }
+
+    /* Confirmation: a centered desktop dialog (the bottom-sheet looked like
+       mobile on desktop). Falls back to a bottom sheet on phones. */
+    .modal.as-confirm {
+      inset: auto;
+      top: 50%;
+      left: 50%;
+      width: min(92vw, 440px);
+      max-width: 440px;
+      height: auto;
+      max-height: 88vh;
+      border-radius: 16px;
+      box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.4);
+      transform: translate(-50%, -50%) scale(0.96);
+      opacity: 0;
+    }
+    :host([open]) .modal.as-confirm {
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+    }
+    @media (max-width: 600px) {
+      .modal.as-confirm {
+        inset: auto 0 0 0;
+        top: auto;
+        left: 0;
+        width: 100%;
+        max-width: none;
+        border-radius: 16px 16px 0 0;
+        transform: translateY(100%) scale(1);
+        opacity: 1;
+      }
+      :host([open]) .modal.as-confirm { transform: translateY(0); }
+    }
+
+    .handle { display: none; }
+
+    /* Mobile: bottom sheet with rounded top + drag handle. */
+    @media (max-width: 600px) {
+      .modal {
+        top: auto;
+        height: 92vh;
+        border-radius: 16px 16px 0 0;
+        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
+      }
+      .handle {
+        display: flex;
+        justify-content: center;
+        padding: 10px 0 4px;
+        flex-shrink: 0;
+      }
+      .handle::before {
+        content: '';
+        width: 40px;
+        height: 4px;
+        background: var(--vio-color-border, #e5e5e5);
+        border-radius: 2px;
+      }
+    }
+
+    .topbar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px var(--vio-space-lg, 24px);
+      border-bottom: 1px solid var(--vio-color-border, #e5e5e5);
+      position: sticky;
+      top: 0;
+      background: var(--vio-color-surface, #fff);
+      z-index: 1;
+    }
+    .heading {
+      font-family: var(--vio-font-serif, Georgia, serif);
+      font-size: 24px;
+      font-weight: 400;
+      margin: 0;
+    }
+    .close {
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: 28px;
+      line-height: 1;
+      padding: 0;
+      color: var(--vio-color-text, #0a0a0a);
+      font-family: inherit;
+    }
+    .close:hover { color: var(--vio-color-text-secondary, #666); }
+
+    .body {
+      max-width: 720px;
+      margin: 0 auto;
+      width: 100%;
+      padding: 56px var(--vio-space-lg, 24px) 80px;
+      box-sizing: border-box;
+    }
+    .section { margin-bottom: 56px; }
+    .section-label {
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      color: var(--vio-color-accent, #c14a3b);
+      margin-bottom: 12px;
+      font-weight: 500;
+    }
+    .section-heading {
+      font-family: var(--vio-font-serif, Georgia, serif);
+      font-size: 28px;
+      margin: 0 0 var(--vio-space-lg, 24px);
+      font-weight: 400;
+      line-height: 1.2;
+    }
+
+    .form-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--vio-space-md, 16px);
+    }
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      margin-bottom: var(--vio-space-md, 16px);
+    }
+    .field label {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      color: var(--vio-color-text-secondary, #666);
+      font-weight: 500;
+    }
+    .field input {
+      padding: 12px 0;
+      border: none;
+      border-bottom: 1px solid var(--vio-color-border, #e5e5e5);
+      font-size: 16px;
+      font-family: inherit;
+      color: inherit;
+      background: transparent;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+    .field input:focus { border-bottom-color: var(--vio-color-text, #0a0a0a); }
+
+    .payment-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--vio-space-md, 16px);
+    }
+    .payment-btn {
+      padding: 20px;
+      background: #fff;
+      border: 1px solid var(--vio-color-border, #e5e5e5);
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      transition: border-color 0.15s, background 0.15s;
+      color: var(--vio-color-text, #0a0a0a);
+    }
+    .payment-btn:hover:not(:disabled) {
+      border-color: var(--vio-color-text, #0a0a0a);
+      background: var(--vio-color-surface-hover, #fafafa);
+    }
+    .payment-btn:disabled {
+      cursor: progress;
+      opacity: 0.6;
+    }
+    .payment-btn.primary {
+      background: var(--vio-color-text, #0a0a0a);
+      color: var(--vio-color-text-on-primary, #fff);
+      grid-column: 1 / -1;
+      border-color: var(--vio-color-text, #0a0a0a);
+      padding: 22px;
+      font-weight: 600;
+    }
+    .payment-btn.primary:hover:not(:disabled) { background: #222; border-color: #222; }
+    .payment-btn[aria-pressed='true'] {
+      border-color: var(--vio-color-accent, #c14a3b);
+    }
+    .apple-pay-note {
+      grid-column: 1 / -1;
+      font-size: 12px;
+      color: var(--vio-color-text-tertiary, #999);
+      text-align: center;
+      margin-top: 4px;
+    }
+    /* Klarna Payments — inline widget panel, shown once Klarna is selected. */
+    .klarna-panel {
+      grid-column: 1 / -1;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin-top: 4px;
+    }
+    .klarna-cats {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+    .klarna-cat {
+      flex: 1 1 auto;
+      padding: 8px 12px;
+      border: 1px solid var(--vio-color-border, #ddd);
+      border-radius: 8px;
+      background: #fff;
+      font-size: 13px;
+      cursor: pointer;
+    }
+    .klarna-cat.active {
+      border-color: var(--vio-color-text, #111);
+      background: var(--vio-color-surface-2, #f6f6f6);
+      font-weight: 600;
+    }
+    .klarna-widget {
+      min-height: 48px;
+    }
+    .express-summary {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      margin-bottom: 16px;
+    }
+    /* Shipping selector (express) — Standard / Express options. */
+    .ship-select { display: flex; flex-direction: column; gap: 8px; }
+    .ship-opt {
+      display: flex; align-items: center; justify-content: space-between; gap: 12px;
+      padding: 12px 14px; border: 1px solid var(--vio-color-border, #ddd);
+      border-radius: 10px; background: #fff; cursor: pointer; font-family: inherit;
+      text-align: left;
+    }
+    .ship-opt.active {
+      border-color: var(--vio-color-text, #111);
+      background: var(--vio-color-surface-2, #f6f6f6);
+    }
+    .ship-opt:disabled { opacity: 0.6; cursor: default; }
+    .ship-meta { display: flex; flex-direction: column; gap: 2px; }
+    .ship-meta b { font-weight: 600; font-size: 13px; }
+    .ship-meta span { color: var(--vio-color-text-secondary, #666); font-size: 12px; }
+    .ship-price { font-weight: 600; font-size: 13px; }
+    .payment-error {
+      grid-column: 1 / -1;
+      padding: 12px 16px;
+      background: #fdecea;
+      border: 1px solid var(--vio-color-accent, #c14a3b);
+      border-radius: 8px;
+      font-size: 13px;
+      color: var(--vio-color-accent, #c14a3b);
+      text-align: center;
+    }
+    /* "Betal" CTA — sits full-width below the method grid once a method is
+       picked. Reuses .payment-btn.primary (its grid-column spans the row). */
+    .complete-cta { margin-top: 8px; }
+
+    /* Order confirmation — compact, shown inside the drawer. */
+    .confirmation {
+      text-align: center;
+      padding: 24px 24px 28px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 14px;
+    }
+    .confirm-check {
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      background: #2e7d32;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 32px;
+      line-height: 1;
+    }
+    .confirm-title {
+      font-family: var(--vio-font-serif, Georgia, serif);
+      font-size: 28px;
+      font-weight: 400;
+      margin: 0;
+    }
+    .confirm-text {
+      font-size: 14px;
+      color: var(--vio-color-text-secondary, #666);
+      max-width: 360px;
+      line-height: 1.6;
+      margin: 0;
+    }
+    .confirm-order-id {
+      font-size: 13px;
+      color: var(--vio-color-text-secondary, #666);
+    }
+    .confirm-order-id b {
+      color: var(--vio-color-text, #0a0a0a);
+      font-variant-numeric: tabular-nums;
+    }
+    .confirm-summary {
+      width: 100%;
+      max-width: 360px;
+      border-top: 1px solid var(--vio-color-border, #eee);
+      padding-top: 14px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      text-align: left;
+      font-size: 13px;
+    }
+    .confirm-close {
+      border: none;
+      background: var(--vio-color-text, #0a0a0a);
+      color: var(--vio-color-text-on-primary, #fff);
+      padding: 16px 48px;
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      font-weight: 600;
+      cursor: pointer;
+      font-family: inherit;
+      margin-top: 16px;
+    }
+    .confirm-close:hover { background: #222; }
+
+    .order-summary {
+      background: var(--vio-color-surface-muted, #f2f2f2);
+      padding: var(--vio-space-lg, 24px);
+      margin-top: var(--vio-space-xl, 32px);
+    }
+    .order-line {
+      display: grid;
+      grid-template-columns: 56px 1fr auto;
+      gap: 12px;
+      padding: 8px 0;
+      align-items: center;
+    }
+    .order-line-img {
+      aspect-ratio: 1;
+      background: #fff;
+      overflow: hidden;
+    }
+    .order-line-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
+    .order-line-meta { font-size: 13px; }
+    .order-line-meta b { display: block; }
+    .order-line-meta span {
+      color: var(--vio-color-text-secondary, #666);
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+    }
+    .order-line-price { font-weight: 700; font-size: 14px; }
+    .order-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 8px 0;
+      font-size: 14px;
+    }
+    .order-row.total {
+      border-top: 1px solid var(--vio-color-border-default, #ccc);
+      margin-top: var(--vio-space-sm, 8px);
+      padding-top: var(--vio-space-md, 16px);
+      font-weight: 700;
+      font-size: 16px;
+    }
+
+    @media (max-width: 600px) {
+      .form-row { grid-template-columns: 1fr; gap: 0; }
+      .payment-grid { grid-template-columns: 1fr; }
+      .body { padding: 32px var(--vio-space-lg, 24px) 64px; }
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], VioCheckout.prototype, "open", 2);
+__decorateClass([
+  property({ type: String })
+], VioCheckout.prototype, "heading", 2);
+__decorateClass([
+  property({ type: String, attribute: "shipping-label" })
+], VioCheckout.prototype, "shippingLabel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], VioCheckout.prototype, "express", 2);
+__decorateClass([
+  state()
+], VioCheckout.prototype, "checkoutState", 2);
+__decorateClass([
+  state()
+], VioCheckout.prototype, "items", 2);
+__decorateClass([
+  state()
+], VioCheckout.prototype, "applePayAvailable", 2);
+__decorateClass([
+  state()
+], VioCheckout.prototype, "applePayInProgress", 2);
+__decorateClass([
+  state()
+], VioCheckout.prototype, "klarnaAvailable", 2);
+__decorateClass([
+  state()
+], VioCheckout.prototype, "orderConfirmed", 2);
+__decorateClass([
+  state()
+], VioCheckout.prototype, "confirmedMethod", 2);
+__decorateClass([
+  state()
+], VioCheckout.prototype, "paymentError", 2);
+__decorateClass([
+  state()
+], VioCheckout.prototype, "confirmedOrder", 2);
+__decorateClass([
+  state()
+], VioCheckout.prototype, "klarnaCategories", 2);
+__decorateClass([
+  state()
+], VioCheckout.prototype, "klarnaSelectedCat", 2);
+__decorateClass([
+  state()
+], VioCheckout.prototype, "klarnaAuthorizing", 2);
+__decorateClass([
+  state()
+], VioCheckout.prototype, "selectedShipping", 2);
+__decorateClass([
+  state()
+], VioCheckout.prototype, "form", 2);
+VioCheckout = __decorateClass([
+  customElement("vio-checkout")
+], VioCheckout);
+
+// src/ui/index.ts
+var VIO_UI_VERSION = "0.1.0";
+
+export { VIO_UI_VERSION, VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens };
+//# sourceMappingURL=chunk-4CCGE7DE.js.map
+//# sourceMappingURL=chunk-4CCGE7DE.js.map