@vio-live/web-sdk 0.32.0 → 0.35.0

package/dist/{chunk-C5Q6W4B2.js → chunk-F7LE5AZY.js}

@@ -1,4 +1,4 @@
-import { Vio, __decorateClass, primaryImageUrl, displayPrice, toCampaignId, getGlobalCurrency, ensureVippsButton, formatPrice, buyerRefOf, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, storageGet, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, getGlobalCountryCode, isValidPhone, gatewayHasBuyerRef, rememberedCheckoutSponsor, checkoutSponsorOf, AdyenOriginError, normalizeSlotId, autoSlotDisplayName, autoSlotId, sponsorIdentityFrom, Configuration, normalizeScope, campaignCandidates } from './chunk-IR4XYTZL.js';
+import { Vio, __decorateClass, primaryImageUrl, displayPrice, resolveDetailLayout, toCampaignId, getGlobalCurrency, copyAppliedLayout, onGlobalDetailLayoutChange, layoutSignature, layoutOriginOf, ensureVippsButton, formatPrice, shippingDescriptionOf, buyerRefOf, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, storageGet, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, getGlobalCountryCode, isValidPhone, gatewayHasBuyerRef, rememberedCheckoutSponsor, checkoutSponsorOf, AdyenOriginError, normalizeSlotId, autoSlotDisplayName, autoSlotId, sponsorIdentityFrom, Configuration, normalizeScope, campaignCandidates } from './chunk-QA5R4VYF.js';
 import { LitElement, css, html, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 
@@ -201,7 +201,8 @@ var THEME_KEY_TO_CSS_VAR = {
   confirmTitleSize: "--vio-confirm-title-size",
   confirmCheckBg: "--vio-confirm-check-bg",
   redirectBg: "--vio-redirect-bg",
-  redirectSpinner: "--vio-redirect-spinner"
+  redirectSpinner: "--vio-redirect-spinner",
+  vippsCartPayment: "--vio-vipps-cart-payment"
 };
 function applyVioTheme(overrides, target = typeof document !== "undefined" ? document.documentElement : null) {
   if (!target) return;
@@ -1151,6 +1152,21 @@ var VioProductCarousel = class extends LitElement {
    * sponsor of the campaign the slot shows (ADR-0034 — "the campaign of the
    * block is its sponsor"), else 0 (unknown).
    */
+  /**
+   * The campaign whose channel sells a sponsor's products here (one article =
+   * one campaign = one channel): the campaign this slot credits for that
+   * sponsor (`Vio.attribution`), then the element's own (`vio-campaign`, an
+   * ancestor's `data-vio-campaign`).
+   */
+  commerceCampaigns(sponsorId) {
+    const own = this.slotRegistration.campaignHint;
+    try {
+      const resolved = typeof Vio.attribution === "function" ? Vio.attribution(this.effectiveSlot || null, { sponsorId, campaignId: own }).campaignId : void 0;
+      return resolved !== void 0 ? [resolved, ...own] : own;
+    } catch {
+      return own;
+    }
+  }
   effectiveSponsorId() {
     if (this.sponsorId > 0) return this.sponsorId;
     const fromSlot = typeof Vio.campaignForSlot === "function" ? Number(Vio.campaignForSlot(this.effectiveSlot || null, { campaignId: this.slotRegistration.campaignHint })?.primarySponsor?.id) : NaN;
@@ -1188,7 +1204,7 @@ var VioProductCarousel = class extends LitElement {
       }
       const fetched = await Promise.all(
         Array.from(bySponsor.entries()).map(async ([sponsorId2, ids]) => {
-          const commerce = this.commerceKey && this.productRefs.trim() === "" ? Vio.commerceWithKey(this.commerceKey) : Vio.commerceFor(sponsorId2);
+          const commerce = this.commerceKey && this.productRefs.trim() === "" ? Vio.commerceWithKey(this.commerceKey) : Vio.commerceFor(sponsorId2, { campaignId: this.commerceCampaigns(sponsorId2) });
           const products = await commerce.channel.product.getByIds({
             product_ids: ids,
             currency: this.currency,
@@ -1541,6 +1557,21 @@ function returnCancelled(detail) {
   emit("vio:payment-redirect-cancel", { ...detail, reason: "cancelled" });
 }
 
+// src/ui/vipps-cart-payment.ts
+var VIPPS_CART_PAYMENT_VAR = "--vio-vipps-cart-payment";
+function resolveVippsCartPayment(el, own) {
+  let fromTheme = "";
+  if (!own) {
+    try {
+      fromTheme = typeof getComputedStyle === "function" ? getComputedStyle(el).getPropertyValue(VIPPS_CART_PAYMENT_VAR) : "";
+    } catch {
+      fromTheme = "";
+    }
+  }
+  const value = String(own || fromTheme || "").trim().replace(/^["']|["']$/g, "").toLowerCase();
+  return value === "checkout" ? "checkout" : "express";
+}
+
 // src/core/checkout/method-taxonomy.ts
 function normalizeMethodName(name) {
   return String(name ?? "").toLowerCase().replace(/[^a-z]/g, "");
@@ -2022,6 +2053,19 @@ function unlockPageScroll() {
 }
 
 // src/ui/components/vio-product-detail.ts
+var layoutAttribute = {
+  fromAttribute(value) {
+    if (value === null || value.trim() === "") return null;
+    try {
+      return JSON.parse(value);
+    } catch {
+      return value;
+    }
+  },
+  toAttribute(value) {
+    return value === null || value === void 0 ? null : JSON.stringify(value);
+  }
+};
 var ADDED_TOAST_MS = 8e3;
 var STRIPE_LOGO_SRC = "data:image/svg+xml;utf8," + encodeURIComponent(
   '<svg width="360" height="150" viewBox="0 0 360 150" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M360 77.4001C360 51.8001 347.6 31.6001 323.9 31.6001C300.1 31.6001 285.7 51.8001 285.7 77.2001C285.7 107.3 302.7 122.5 327.1 122.5C339 122.5 348 119.8 354.8 116V96.0001C348 99.4001 340.2 101.5 330.3 101.5C320.6 101.5 312 98.1001 310.9 86.3001H359.8C359.8 85.0001 360 79.8001 360 77.4001ZM310.6 67.9001C310.6 56.6001 317.5 51.9001 323.8 51.9001C329.9 51.9001 336.4 56.6001 336.4 67.9001H310.6Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M247.1 31.6001C237.3 31.6001 231 36.2001 227.5 39.4001L226.2 33.2001H204.2V149.8L229.2 144.5L229.3 116.2C232.9 118.8 238.2 122.5 247 122.5C264.9 122.5 281.2 108.1 281.2 76.4001C281.1 47.4001 264.6 31.6001 247.1 31.6001ZM241.1 100.5C235.2 100.5 231.7 98.4001 229.3 95.8001L229.2 58.7001C231.8 55.8001 235.4 53.8001 241.1 53.8001C250.2 53.8001 256.5 64.0001 256.5 77.1001C256.5 90.5001 250.3 100.5 241.1 100.5Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M169.8 25.7L194.9 20.3V0L169.8 5.3V25.7Z" fill="#533AFD"/><path d="M194.9 33.3H169.8V120.8H194.9V33.3Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M142.9 40.7L141.3 33.3H119.7V120.8H144.7V61.5C150.6 53.8 160.6 55.2 163.7 56.3V33.3C160.5 32.1 148.8 29.9 142.9 40.7Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M92.8999 11.6001L68.4999 16.8001L68.3999 96.9001C68.3999 111.7 79.4999 122.6 94.2999 122.6C102.5 122.6 108.5 121.1 111.8 119.3V99.0001C108.6 100.3 92.7999 104.9 92.7999 90.1001V54.6001H111.8V33.3001H92.7999L92.8999 11.6001Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M25.3 58.7001C25.3 54.8001 28.5 53.3001 33.8 53.3001C41.4 53.3001 51 55.6001 58.6 59.7001V36.2001C50.3 32.9001 42.1 31.6001 33.8 31.6001C13.5 31.6001 0 42.2001 0 59.9001C0 87.5001 38 83.1001 38 95.0001C38 99.6001 34 101.1 28.4 101.1C20.1 101.1 9.5 97.7001 1.1 93.1001V116.9C10.4 120.9 19.8 122.6 28.4 122.6C49.2 122.6 63.5 112.3 63.5 94.4001C63.4 64.6001 25.3 69.9001 25.3 58.7001Z" fill="#533AFD"/></svg>'
@@ -2072,11 +2116,18 @@ var VioProductDetail = class extends LitElement {
     this.vioContentId = "";
     this.vioContentTitle = "";
     this.noAddedToast = false;
+    this.vippsCartPayment = "";
     this.gallery = "";
     this.descriptionMode = "";
     this.highlights = [];
     this.deliveryTime = "";
     this.carrierLogos = {};
+    this.layout = null;
+    /** The layout the detail renders with now (resolved before each render). */
+    this.layoutNow = resolveDetailLayout(null);
+    /** The product and layout `vio:detail-layout-applied` was last said for. */
+    this.appliedFor = null;
+    this.unsubscribeLayout = null;
     this.slotRegistration = new SlotRegistration(this, "detail");
     /** What the click that opened the detail carried ('' when nothing), and for which product. */
     this.eventSlot = "";
@@ -2165,6 +2216,10 @@ var VioProductDetail = class extends LitElement {
       this.show();
       void this.fetchProduct();
     };
+    /** The cart changed (another tab, the drawer): the line under Vipps counts it again. */
+    this.boundCartChange = () => {
+      if (this.open) this.requestUpdate();
+    };
     /** The photo in view is the active one (dots, Apple Pay sheet, events). */
     this.onCarouselScroll = () => {
       const track = this.carouselTrack();
@@ -2183,6 +2238,14 @@ var VioProductDetail = class extends LitElement {
       if (atEnd !== this.thumbsAtEnd) this.thumbsAtEnd = atEnd;
     };
   }
+  /**
+   * The layout this detail applies (0.34): `{ id, revision, experimentId?,
+   * variantId?, sections, adjusted, source }` — `source` is `element` (its own
+   * `layout`), `global` (`Vio.configureDetail`) or `default`. A copy.
+   */
+  get appliedLayout() {
+    return copyAppliedLayout(resolveDetailLayout(this.layout));
+  }
   /** The card's context applies to the product it opened — not to one the host opened by hand later. */
   get fromCard() {
     return this.eventProductId !== "" && this.eventProductId === String(this.productId);
@@ -2204,6 +2267,21 @@ var VioProductDetail = class extends LitElement {
     const own = this.slotRegistration.campaignHint;
     return this.fromCard && this.eventCampaignId !== void 0 ? [this.eventCampaignId, ...own] : own;
   }
+  /**
+   * The campaign whose channel sells the open product (one article = one
+   * campaign = one channel): the campaign its events credit, then the opening
+   * click's and this element's own — so the product, its rates and its
+   * seller are read with that channel's key, the one the cart is created on.
+   */
+  commerceCampaigns() {
+    const hint = this.activeCampaignHint;
+    try {
+      const resolved = this.attribution().campaignId;
+      return typeof resolved === "number" ? [resolved, ...hint] : hint;
+    } catch {
+      return hint;
+    }
+  }
   slotAttributes() {
     return {
       vioSlot: this.vioSlot,
@@ -2684,6 +2762,10 @@ var VioProductDetail = class extends LitElement {
     }
     /* The sizes follow the price closely: they are the next thing to do. */
     .headline + .purchase { margin-top: calc(var(--vio-detail-sizes-gap, 2px) - var(--vio-detail-info-gap, 20px)); }
+    /* A layout with the sizes apart from the buy zone (0.34): they follow the
+       price closely instead, and the buy zone keeps the normal gap. */
+    .headline + .buy-options.options-apart { margin-top: calc(var(--vio-detail-sizes-gap, 2px) - var(--vio-detail-info-gap, 20px)); }
+    .headline + .purchase.options-apart { margin-top: 0; }
     .price {
       font-size: var(--vio-detail-price-size, 24px);
       font-weight: var(--vio-detail-price-weight, 700);
@@ -3175,6 +3257,9 @@ var VioProductDetail = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    Vio.cart.addEventListener("change", this.boundCartChange);
+    this.unsubscribeLayout?.();
+    this.unsubscribeLayout = onGlobalDetailLayoutChange(() => this.requestUpdate());
     this.slotRegistration.connect(this.slotAttributes());
     void this.loadVippsButton();
     document.addEventListener("vio:product-click", this.boundProductClick);
@@ -3183,8 +3268,11 @@ var VioProductDetail = class extends LitElement {
     if (this.addedToastTimer) clearTimeout(this.addedToastTimer);
     this.addedToastTimer = null;
     document.removeEventListener("vio:product-click", this.boundProductClick);
+    Vio.cart.removeEventListener("change", this.boundCartChange);
     this.slotRegistration.clear();
     this.bottomSheet.disconnect();
+    this.unsubscribeLayout?.();
+    this.unsubscribeLayout = null;
     super.disconnectedCallback();
   }
   updated(changed) {
@@ -3208,17 +3296,38 @@ var VioProductDetail = class extends LitElement {
       else this.revealActiveSlide();
     }
     this.measureLogo();
+    this.announceLayout();
     if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName") || changed.has("vioCampaign")) {
       this.slotRegistration.sync(this.slotAttributes());
     }
   }
   willUpdate(changed) {
+    this.layoutNow = resolveDetailLayout(this.layout);
     if (changed.has("gallery") || changed.has("open") && this.open) this.galleryMode = this.resolveGalleryMode();
     if (changed.has("descriptionMode") || changed.has("open") && this.open) {
       const value = this.themeChoice(this.descriptionMode, "--vio-detail-description-mode");
       this.resolvedDescriptionMode = value === "folded" || value === "open" ? value : "preview";
     }
   }
+  /**
+   * `vio:detail-layout-applied` (bubbles, composed), with the applied layout,
+   * each time a product renders with a layout it has not been shown with yet:
+   * every open of a product, and every change of layout while it is open.
+   */
+  announceLayout() {
+    const product = this.product;
+    if (!product || this.fetchError) return;
+    const signature = layoutSignature(this.layoutNow);
+    if (this.appliedFor && this.appliedFor.product === product && this.appliedFor.signature === signature) return;
+    this.appliedFor = { product, signature };
+    this.dispatchEvent(
+      new CustomEvent("vio:detail-layout-applied", {
+        bubbles: true,
+        composed: true,
+        detail: { ...copyAppliedLayout(this.layoutNow), productId: product.id, sponsorId: this.sponsorId }
+      })
+    );
+  }
   /** An option as the element says it, else as the theme's custom property says it (lower case, unquoted). */
   themeChoice(own, cssVar) {
     const fromTheme = typeof getComputedStyle === "function" ? getComputedStyle(this).getPropertyValue(cssVar) : "";
@@ -3319,7 +3428,7 @@ var VioProductDetail = class extends LitElement {
       try {
         const activeCurrency = getGlobalCurrency() || this.currency;
         this.currency = activeCurrency;
-        const commerce = Vio.commerceFor(this.sponsorId);
+        const commerce = Vio.commerceFor(this.sponsorId, { campaignId: this.commerceCampaigns() });
         products = await commerce.channel.product.getByIds({
           product_ids: [productIdNum],
           currency: activeCurrency,
@@ -3348,10 +3457,17 @@ var VioProductDetail = class extends LitElement {
         const price = Number(
           this.product.price?.amount_incl_taxes ?? this.product.price?.amount
         );
+        const shown = layoutOriginOf(resolveDetailLayout(this.layout));
         Vio.analytics.track("view_item", {
           context: {
             sponsorId: this.sponsorId > 0 ? Number(this.sponsorId) : void 0,
-            ...this.attribution()
+            ...this.attribution(),
+            ...shown.layoutId ? {
+              layoutId: shown.layoutId,
+              layoutRevision: shown.layoutRevision ?? "",
+              experimentId: shown.experimentId,
+              variantId: shown.variantId
+            } : {}
           },
           commerce: {
             items: [
@@ -3682,7 +3798,8 @@ var VioProductDetail = class extends LitElement {
     this.selectionPrompt = missing.name;
     void this.updateComplete.then(() => {
       const group = this.renderRoot.querySelector(".option-group.needs-choice");
-      group?.scrollIntoView?.({ behavior: "smooth", block: "nearest" });
+      const apart = !!group?.closest(".options-apart");
+      group?.scrollIntoView?.({ behavior: "smooth", block: apart ? "center" : "nearest" });
     });
     return false;
   }
@@ -3752,13 +3869,14 @@ var VioProductDetail = class extends LitElement {
     const variant = this.selectedVariant();
     const sponsorName = resolveSponsorIdentity(this.sponsorId)?.name || void 0;
     const { campaignId, slot, contentId, componentTemplateId, contentUrl, contentTitle } = this.attribution();
+    const layout = layoutOriginOf(this.layoutNow);
     Vio.cart.addProduct({
       product: this.product,
       sponsorId: this.sponsorId,
       sponsorName,
       quantity: this.quantity,
       variantId: variant?.id,
-      origin: { campaignId, slot, contentId, componentKind: componentTemplateId, contentUrl, contentTitle }
+      origin: { campaignId, slot, contentId, componentKind: componentTemplateId, contentUrl, contentTitle, ...layout }
     });
     return variant?.id;
   }
@@ -3777,7 +3895,9 @@ var VioProductDetail = class extends LitElement {
             sponsorId: this.sponsorId,
             quantity: this.quantity,
             variantId,
-            ...this.attribution()
+            ...this.attribution(),
+            // The detail layout of the add (0.34) — `variantId` above is the product's.
+            ...this.layoutNow.source !== "default" ? { layout: layoutOriginOf(this.layoutNow) } : {}
           }
         })
       );
@@ -3890,7 +4010,7 @@ var VioProductDetail = class extends LitElement {
     if (!this.product || this.availableQuantity <= 0 || this.adding) return;
     if (!this.requireSelection()) return;
     if (!(this.unitPrice > 0)) return;
-    if ((Vio.cart.getCart(this.sponsorId)?.items.length ?? 0) > 0) {
+    if (this.cartHasLines() && this.vippsCartMode() === "checkout") {
       this.addCurrentToCart();
       this.close();
       this.openCheckoutWithVipps();
@@ -3902,12 +4022,46 @@ var VioProductDetail = class extends LitElement {
     void this.startVippsExpressOrCheckout(redirect);
   }
   /**
-   * The Vipps button will open the app with Express (see buyWithVipps): the
-   * brand has Express on, and this brand's cart is empty — with lines in it
-   * the checkout opens first.
+   * The Vipps button will open the app with Express for this product alone
+   * (see buyWithVipps): the brand has Express on, and this brand's cart is
+   * empty.
    */
   vippsGoesStraightToApp() {
-    return this.vippsExpress && (Vio.cart.getCart(this.sponsorId)?.items.length ?? 0) === 0;
+    return this.vippsExpress && !this.cartHasLines();
+  }
+  /** This brand's cart already has lines. */
+  cartHasLines() {
+    return (Vio.cart.getCart(this.sponsorId)?.items.length ?? 0) > 0;
+  }
+  /** `vipps-cart-payment`, else the theme's, else `express`. */
+  vippsCartMode() {
+    return resolveVippsCartPayment(this, this.vippsCartPayment);
+  }
+  /**
+   * What the Vipps button will pay when the brand's cart already has lines
+   * (`express` mode): every unit in the cart plus this product at the chosen
+   * quantity, and their total, as the cart sums it (shipping is chosen in
+   * Vipps). null with an empty cart, or in `checkout` mode.
+   */
+  wholeCartToPay() {
+    if (this.vippsCartMode() !== "express") return null;
+    const cart = Vio.cart.getCart(this.sponsorId);
+    const items = cart?.items ?? [];
+    if (items.length === 0) return null;
+    const units = items.reduce((n, i) => n + (Number(i.quantity) || 0), 0) + this.quantity;
+    const total = items.reduce((sum, i) => sum + (Number(i.unitPrice) || 0) * (Number(i.quantity) || 0), 0) + this.unitPrice * this.quantity;
+    return { units, total, currency: cart?.currency || this.currency };
+  }
+  /** The line under the Vipps button: what is paid (a cart with lines) or what happens in the app (Express, empty cart). */
+  renderVippsNote() {
+    const whole = this.wholeCartToPay();
+    if (whole) {
+      return html`<p class="vipps-note vipps-note-cart" part="vipps-note">Betaler hele handlekurven · ${whole.units} varer · ${formatPrice(whole.total, whole.currency)}</p>`;
+    }
+    if (this.vippsGoesStraightToApp()) {
+      return html`<p class="vipps-note" part="vipps-note">Vipps fyller inn navn og adresse – du godkjenner og betaler i appen</p>`;
+    }
+    return "";
   }
   async startVippsExpressOrCheckout(redirect) {
     let fallback = true;
@@ -3982,8 +4136,8 @@ var VioProductDetail = class extends LitElement {
    * after an await, so it cannot wait for the server's cart), while the
    * charge is the sponsor's WHOLE cart. So the sheet opens only when it shows
    * what will be charged: an empty cart, and a sheet prepared for this
-   * product × quantity. Otherwise — lines already in the cart (as with Vipps,
-   * see buyWithVipps), or a quantity whose sheet is still being prepared —
+   * product × quantity. Otherwise — lines already in the cart, or a quantity
+   * whose sheet is still being prepared —
    * the product is added and the checkout opens with Apple Pay preselected:
    * every line and the total on screen, and its own Apple Pay button pays
    * that total.
@@ -4019,7 +4173,7 @@ var VioProductDetail = class extends LitElement {
   async loadShippingFrom(productId, seq) {
     let rates = null;
     try {
-      const product = Vio.commerceFor(this.sponsorId).channel.product;
+      const product = Vio.commerceFor(this.sponsorId, { campaignId: this.commerceCampaigns() }).channel.product;
       rates = typeof product.getShippingRates === "function" ? await product.getShippingRates(productId, { currency: this.currency }) : null;
     } catch {
       rates = null;
@@ -4135,7 +4289,12 @@ var VioProductDetail = class extends LitElement {
    */
   renderShippingReturns() {
     const identity = resolveSponsorIdentity(this.sponsorId);
-    const rates = this.shippingRates;
+    const rates = shippingRatesShown(this.shippingRates, [
+      this.product?.title,
+      this.product?.brand,
+      this.sellerName,
+      identity?.name
+    ]);
     const times = [...new Set(rates.map((r) => r.description).filter(Boolean))];
     const perRateTime = times.length > 1;
     const sharedTime = times.length === 1 ? times[0] : times.length === 0 && this.deliveryTime.trim() ? `Leveringstid: ${this.deliveryTime.trim()}` : "";
@@ -4188,7 +4347,7 @@ var VioProductDetail = class extends LitElement {
   async loadSeller(productId, seq) {
     let name = null;
     try {
-      name = await Vio.commerceFor(this.sponsorId).channel.product.getSellerCompany(productId);
+      name = await Vio.commerceFor(this.sponsorId, { campaignId: this.commerceCampaigns() }).channel.product.getSellerCompany(productId);
     } catch {
       name = null;
     }
@@ -4283,9 +4442,6 @@ var VioProductDetail = class extends LitElement {
     }
     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`
@@ -4330,24 +4486,110 @@ var VioProductDetail = class extends LitElement {
         </div>`}
 
         <div class="info" part="info">
-          ${p.brand ? html`<div class="brand" part="brand">${p.brand}</div>` : ""}
-          <div class="headline">
-            <div class="title-row">
-              <h2 class="name" part="title">${p.title}</h2>
-              <div class="stock ${stock.cls}" part="stock">${stock.text}</div>
-            </div>
-            <div class="price-row">
+          ${this.renderSections(this.layoutNow.sections)}
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * The info column in the applied layout's order (0.34) — the real DOM in
+   * that order, never CSS `order`, the same on every screen. The default
+   * order renders exactly the column before 0.34: brand, `.headline` (the
+   * title row with the stock, the price row), then `.purchase` — `.buy` with
+   * the options first — and highlights, description, «Frakt & retur» in it.
+   *
+   * A run of `title` / `stock` / `price` is one `.headline`; `title`
+   * right before `stock` share the title row. `options` right before
+   * `purchase` live in `.buy` (a pinned buy zone keeps them); elsewhere they
+   * are a block of their own. Everything after `purchase` goes in
+   * `.purchase`, as the description does by default: a pinned buy zone may
+   * slide over it, never over what comes before.
+   */
+  renderSections(sections) {
+    const out = [];
+    for (let i = 0; i < sections.length; i++) {
+      const s = sections[i];
+      if (s === "title" || s === "stock" || s === "price") {
+        let j = i;
+        while (j < sections.length && ["title", "stock", "price"].includes(sections[j])) j++;
+        out.push(this.renderHeadline(sections.slice(i, j)));
+        i = j - 1;
+        continue;
+      }
+      if (s === "options" && sections[i + 1] === "purchase") continue;
+      if (s === "purchase") {
+        const optionsInBuy = sections[i - 1] === "options";
+        out.push(this.renderPurchase(optionsInBuy, sections.slice(i + 1)));
+        break;
+      }
+      out.push(this.renderSection(s));
+    }
+    return out;
+  }
+  /** A run of title / stock / price: one `.headline`. */
+  renderHeadline(run) {
+    const p = this.product;
+    const stock = this.stockLabel();
+    const compare = this.compareAt;
+    const showCompare = compare !== null && compare > this.unitPrice;
+    const name = html`<h2 class="name" part="title">${p.title}</h2>`;
+    const stockLine = html`<div class="stock ${stock.cls}" part="stock">${stock.text}</div>`;
+    const parts = [];
+    for (let i = 0; i < run.length; i++) {
+      const s = run[i];
+      if (s === "title" && run[i + 1] === "stock") {
+        parts.push(html`<div class="title-row">
+              ${name}
+              ${stockLine}
+            </div>`);
+        i++;
+      } else if (s === "title") {
+        parts.push(html`<div class="title-row">${name}</div>`);
+      } else if (s === "stock") {
+        parts.push(stockLine);
+      } else {
+        parts.push(html`<div class="price-row">
               <span class="price" part="price">${formatPrice(this.unitPrice, p.price.currency_code)}</span>
               ${showCompare ? html`<span class="compare-at">${formatPrice(
-      compare,
-      p.price.currency_code
-    )}</span>` : ""}
-            </div>
-          </div>
-
-          <div class="purchase">
+          compare,
+          p.price.currency_code
+        )}</span>` : ""}
+            </div>`);
+      }
+    }
+    return html`<div class="headline">
+            ${parts}
+          </div>`;
+  }
+  /** One section that is not the headline nor the purchase group. */
+  renderSection(section) {
+    const p = this.product;
+    switch (section) {
+      case "brand":
+        return p.brand ? html`<div class="brand" part="brand">${p.brand}</div>` : "";
+      case "options":
+        return p.options.length > 0 ? html`<div class="buy-options options-apart" part="buy-options">${this.renderOptionPickers(p.options)}</div>` : "";
+      case "highlights":
+        return this.renderHighlights();
+      case "description":
+        return p.description ? this.renderDescription(this.stripHtml(p.description)) : "";
+      case "shippingReturns":
+        return this.renderShippingReturns();
+      default:
+        return "";
+    }
+  }
+  /**
+   * The SDK-managed buy group, never split: «Frakt fra…», Vipps / Apple Pay /
+   * the other ways to pay, quantity + «Legg i handlekurv», «Du handler direkte
+   * hos …». The options when they come right before it; then what follows it.
+   */
+  renderPurchase(optionsInBuy, rest) {
+    const p = this.product;
+    const optionsApart = !optionsInBuy && p.options.length > 0;
+    return html`<div class=${optionsApart ? "purchase options-apart" : "purchase"}>
           <div class="buy" part="buy">
-          ${p.options.length > 0 ? html`<div class="buy-options" part="buy-options">${this.renderOptionPickers(p.options)}</div>` : ""}
+          ${optionsInBuy && p.options.length > 0 ? html`<div class="buy-options" part="buy-options">${this.renderOptionPickers(p.options)}</div>` : ""}
           ${this.renderDeliveryNote()}
           ${this.methodsPending && this.availableQuantity > 0 ? html`<div class="buy-pending" part="buy-pending" role="status" aria-label="Laster betalingsmåter"></div>` : ""}
           ${this.availableQuantity > 0 && this.hasPrice && this.methodEnabled("vipps") ? this.vippsOfficial ? html`
@@ -4376,7 +4618,7 @@ var VioProductDetail = class extends LitElement {
                     <span class="vipps-badge">vipps</span>
                   </button>
                 ` : ""}
-          ${this.availableQuantity > 0 && this.hasPrice && this.methodEnabled("vipps") && this.vippsGoesStraightToApp() ? html`<p class="vipps-note" part="vipps-note">Vipps fyller inn navn og adresse – du godkjenner og betaler i appen</p>` : ""}
+          ${this.availableQuantity > 0 && this.hasPrice && this.methodEnabled("vipps") ? this.renderVippsNote() : ""}
 
           <div class="qty-cta-row" part="quantity-row">
             <div class="qty-stepper">
@@ -4464,14 +4706,8 @@ var VioProductDetail = class extends LitElement {
           ${this.renderSellerNote()}
           </div>
 
-          ${this.renderHighlights()}
-
-          ${p.description ? this.renderDescription(this.stripHtml(p.description)) : ""}
-          ${this.renderShippingReturns()}
-          </div>
-        </div>
-      </div>
-    `;
+          ${this.renderSections(rest)}
+          </div>`;
   }
   renderOptionPickers(options) {
     if (options.length === 0) return "";
@@ -4555,6 +4791,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "no-added-toast" })
 ], VioProductDetail.prototype, "noAddedToast", 2);
+__decorateClass([
+  property({ type: String, attribute: "vipps-cart-payment" })
+], VioProductDetail.prototype, "vippsCartPayment", 2);
 __decorateClass([
   property({ type: String })
 ], VioProductDetail.prototype, "gallery", 2);
@@ -4570,6 +4809,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Object, attribute: "carrier-logos" })
 ], VioProductDetail.prototype, "carrierLogos", 2);
+__decorateClass([
+  property({ attribute: "layout", converter: layoutAttribute })
+], VioProductDetail.prototype, "layout", 2);
 __decorateClass([
   state()
 ], VioProductDetail.prototype, "product", 2);
@@ -4657,6 +4899,9 @@ function normalizeValues(raw) {
   }
   return [];
 }
+function shippingRatesShown(rates, repeats = []) {
+  return rates.map((r) => ({ ...r, description: shippingDescriptionOf(r.description, [r.name, ...repeats]) }));
+}
 function splitRateName(name) {
   const text = String(name ?? "").trim();
   const m = text.match(/^(.+?)\s+[-–—]\s+(.+)$/);
@@ -4693,12 +4938,15 @@ var VioCart = class extends LitElement {
     this.heading = "Handlekurv";
     this.emptyLabel = "Handlekurven er tom";
     this.subtotalLabel = "Sum";
+    this.vippsCartPayment = "";
     this.carts = /* @__PURE__ */ new Map();
     this.itemCount = 0;
     this.applePayAvailable = false;
     this.availableMethods = null;
     this.methodsLoading = false;
     this.vippsOfficial = false;
+    /** A Vipps payment is being started from here: one at a time. */
+    this.vippsStarting = false;
     /** Whether the method lookup has been attempted — see boundOnCartChange. */
     this.paymentMethodsAttempted = false;
     this.confirmedOrder = null;
@@ -5274,7 +5522,6 @@ var VioCart = class extends LitElement {
       })
     );
   }
-  /** Vipps — opens the checkout with Vipps preselected. */
   /**
    * Open the checkout without preselecting a method.
    *
@@ -5296,21 +5543,73 @@ var VioCart = class extends LitElement {
     );
   }
   /**
-   * Vipps from the cart: the checkout opens with Vipps preselected — the
-   * standard path, where our form collects name, address, mobile and the
-   * delivery (with its price) before paying (Mote & Livsstil, 2026-10-28).
-   * It no longer starts Express from here: Express is the product detail's
-   * «Kjøp nå med Vipps» only.
+   * Vipps from the cart (2026-10-29: «el botón negro va con el nuestro y el
+   * botón de Vipps paga el carrito entero»): Vipps Express for the sponsor's
+   * WHOLE cart — the same Express as the detail's «Kjøp nå med Vipps»: the
+   * hand-over overlay, `vio:payment-redirect-*` with source `'cart'`, the
+   * return and its confirmation. «Til kassen» is the way into our checkout.
+   * When the brand has Express off, or this cart cannot have it (several
+   * suppliers, no rate), the checkout opens with Vipps preselected.
+   *
+   * `vipps-cart-payment="checkout"` keeps the 0.31–0.34 behaviour: the
+   * checkout opens with Vipps preselected, the standard payment.
    */
   onVipps() {
     if (!this.payable) return;
-    const firstSponsorId = [...this.carts.keys()][0];
-    if (firstSponsorId === void 0) return;
+    if (resolveVippsCartPayment(this, this.vippsCartPayment) === "checkout") {
+      const firstSponsorId = [...this.carts.keys()][0];
+      if (firstSponsorId === void 0) return;
+      this.openCheckoutWithVipps(firstSponsorId);
+      return;
+    }
+    if (this.vippsStarting) return;
+    const sponsorId = this.vippsSponsorId();
+    if (sponsorId === void 0) return;
+    this.vippsStarting = true;
+    const redirect = beginPaymentRedirect({ method: "vipps", sponsorId, source: "cart" });
+    void this.startVippsExpressOrCheckout(sponsorId, redirect).finally(() => {
+      this.vippsStarting = false;
+    });
+  }
+  /**
+   * The one sponsor whose cart the Vipps button pays: the first with
+   * something to pay for. Express is built on THAT sponsor's backend cart
+   * only — another sponsor's lines are never in it.
+   */
+  vippsSponsorId() {
+    for (const cart of this.carts.values()) {
+      const total = cart.items.reduce((sum, i) => sum + i.unitPrice * i.quantity, 0);
+      if (cart.items.length > 0 && total > 0) return cart.sponsorId;
+    }
+    return void 0;
+  }
+  async startVippsExpressOrCheckout(sponsorId, redirect) {
+    let fallback = true;
+    try {
+      await Vio.cart.waitForCartMutations(sponsorId);
+      if (!await Vio.checkout.getVippsExpressEnabled(sponsorId)) {
+        redirect.abort("express-off");
+      } else {
+        const res = await Vio.checkout.startVippsExpress(sponsorId);
+        fallback = !res?.payment_url;
+        if (fallback) redirect.abort("not-started");
+      }
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[VioCart] Vipps Express not started:", err);
+      }
+      redirect.fail(err instanceof Error ? err.message : String(err));
+    }
+    if (!fallback) return;
+    this.openCheckoutWithVipps(sponsorId);
+  }
+  /** Our checkout with Vipps preselected: the host opens it on `vio:checkout-open`. */
+  openCheckoutWithVipps(sponsorId) {
     this.dispatchEvent(
       new CustomEvent("vio:checkout-open", {
         bubbles: true,
         composed: true,
-        detail: { sponsorId: firstSponsorId, paymentMethod: "vipps", express: false, ...sponsorDetail(firstSponsorId) }
+        detail: { sponsorId, paymentMethod: "vipps", express: false, ...sponsorDetail(sponsorId) }
       })
     );
   }
@@ -5578,6 +5877,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "subtotal-label" })
 ], VioCart.prototype, "subtotalLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "vipps-cart-payment" })
+], VioCart.prototype, "vippsCartPayment", 2);
 __decorateClass([
   state()
 ], VioCart.prototype, "carts", 2);
@@ -9353,5 +9655,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-C5Q6W4B2.js.map
-//# sourceMappingURL=chunk-C5Q6W4B2.js.map
+//# sourceMappingURL=chunk-F7LE5AZY.js.map
+//# sourceMappingURL=chunk-F7LE5AZY.js.map