@vio-live/web-sdk 0.28.0 → 0.32.0

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

@@ -1,4 +1,4 @@
-import { Vio, __decorateClass, primaryImageUrl, displayPrice, toCampaignId, getGlobalCurrency, ensureVippsButton, formatPrice, buyerRefOf, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, gatewayHasBuyerRef, rememberedCheckoutSponsor, checkoutSponsorOf, AdyenOriginError, normalizeSlotId, autoSlotDisplayName, autoSlotId, sponsorIdentityFrom, Configuration, normalizeScope, campaignCandidates } from './chunk-AFJ5M53F.js';
+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 { LitElement, css, html, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 
@@ -164,6 +164,13 @@ var THEME_KEY_TO_CSS_VAR = {
   detailImageZoom: "--vio-detail-image-zoom",
   detailImageInset: "--vio-detail-image-inset",
   detailImageBg: "--vio-detail-image-bg",
+  detailGallery: "--vio-detail-gallery",
+  carouselLayout: "--vio-carousel-layout",
+  detailCarouselPeek: "--vio-detail-carousel-peek",
+  detailDescriptionMode: "--vio-detail-description-mode",
+  detailDescriptionPreviewLines: "--vio-detail-description-preview-lines",
+  detailHighlightsDisplay: "--vio-detail-highlights-display",
+  detailShippingReturnsDisplay: "--vio-detail-shipping-returns-display",
   detailThumbSize: "--vio-detail-thumb-size",
   detailThumbGap: "--vio-detail-thumb-gap",
   detailThumbRadius: "--vio-detail-thumb-radius",
@@ -176,6 +183,18 @@ var THEME_KEY_TO_CSS_VAR = {
   detailButtonRadius: "--vio-detail-button-radius",
   detailBuyPosition: "--vio-detail-buy-position",
   detailBuyShadow: "--vio-detail-buy-shadow",
+  cardFont: "--vio-card-font",
+  cardBorder: "--vio-card-border",
+  cardImageAspect: "--vio-card-image-aspect",
+  cardImageFit: "--vio-card-image-fit",
+  cardImageBg: "--vio-card-image-bg",
+  cardImagePadding: "--vio-card-image-padding",
+  cardMetaPadding: "--vio-card-meta-padding",
+  cardPriceFont: "--vio-card-price-font",
+  cardAccent: "--vio-card-accent",
+  cardBarRadius: "--vio-card-bar-radius",
+  cardDescriptionLines: "--vio-card-description-lines",
+  cardRetailerOrder: "--vio-card-retailer-order",
   cartWidth: "--vio-cart-width",
   checkoutWidth: "--vio-checkout-width",
   confirmLogoHeight: "--vio-confirm-logo-height",
@@ -359,6 +378,10 @@ var VioProduct = class extends LitElement {
     this.brand = "";
     this.name = "";
     this.price = "";
+    this.description = "";
+    this.showDescription = false;
+    this.buttonStyle = "icon";
+    this.buttonLabel = "Kj\xF8p";
     this.retailer = "";
     this.imageUrl = "";
     this.productId = "";
@@ -427,20 +450,29 @@ var VioProduct = class extends LitElement {
       box-sizing: border-box;
       width: 100%;
       cursor: pointer;
-      font-family: var(--vio-font-sans, -apple-system, sans-serif);
+      font-family: var(--vio-card-font, var(--vio-font-sans, -apple-system, sans-serif));
       color: var(--vio-color-text, #0a0a0a);
       -webkit-tap-highlight-color: transparent;
     }
+    /* Every --vio-card-* below defaults to the look the card always had; a
+       host restyles the card with them (they cross the carousel's shadow
+       root, ::part would not). E.g. a framed card with a buy button:
+       --vio-card-border, --vio-card-meta-padding, --vio-card-image-fit: contain. */
     .card {
       display: flex;
       flex-direction: column;
       height: 100%;
+      box-sizing: border-box;
+      border: var(--vio-card-border, none);
+      background: var(--vio-card-bg, transparent);
+      transition: border-color 0.2s ease;
     }
+    :host(:hover) .card { border-color: var(--vio-card-border-hover-color, var(--vio-color-border, #e5e5e5)); }
     .image {
       position: relative;
-      aspect-ratio: 1 / 1;
+      aspect-ratio: var(--vio-card-image-aspect, 1 / 1);
       width: 100%;
-      background-color: var(--vio-color-surface-muted, #f2f2f2);
+      background-color: var(--vio-card-image-bg, var(--vio-color-surface-muted, #f2f2f2));
       display: flex;
       align-items: center;
       justify-content: center;
@@ -455,8 +487,8 @@ var VioProduct = class extends LitElement {
       position: absolute;
       right: 10px;
       bottom: 10px;
-      width: 40px;
-      height: 40px;
+      width: var(--vio-card-add-size, 40px);
+      height: var(--vio-card-add-size, 40px);
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.96);
       border: none;
@@ -476,7 +508,7 @@ var VioProduct = class extends LitElement {
     .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 svg { width: var(--vio-card-add-icon-size, 18px); height: var(--vio-card-add-icon-size, 18px); }
     .add-btn .add-count { font-size: 15px; font-weight: 700; line-height: 1; }
     @keyframes vio-add-pop {
       0% { transform: scale(1); }
@@ -487,47 +519,87 @@ var VioProduct = class extends LitElement {
     .image img {
       width: 100%;
       height: 100%;
-      object-fit: cover;
+      box-sizing: border-box;
+      padding: var(--vio-card-image-padding, 0);
+      object-fit: var(--vio-card-image-fit, cover);
       display: block;
     }
     .meta {
-      padding-top: 14px;
+      padding: var(--vio-card-meta-padding, 14px 0 0);
       display: flex;
       flex-direction: column;
       flex: 1;
     }
     .brand {
-      font-size: var(--vio-size-xs, 12px);
-      letter-spacing: var(--vio-tracking-label, 0.1em);
+      font-size: var(--vio-card-brand-size, var(--vio-size-xs, 12px));
+      letter-spacing: var(--vio-card-brand-tracking, var(--vio-tracking-label, 0.1em));
       text-transform: uppercase;
-      color: var(--vio-color-text-secondary, #666);
-      font-weight: 500;
-      margin-bottom: 6px;
+      color: var(--vio-card-brand-color, var(--vio-color-text-secondary, #666));
+      font-weight: var(--vio-card-brand-weight, 500);
+      margin-bottom: var(--vio-card-brand-gap, 6px);
     }
     .name {
-      font-size: var(--vio-size-md, 16px);
-      font-weight: 500;
+      font-family: var(--vio-card-name-font, inherit);
+      font-size: var(--vio-card-name-size, var(--vio-size-md, 16px));
+      font-weight: var(--vio-card-name-weight, 500);
       line-height: 1.3;
-      margin: 0 0 10px;
+      margin: 0 0 var(--vio-card-name-gap, 10px);
       display: -webkit-box;
       -webkit-line-clamp: 2;
       line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
     }
+    /* show-description: cut after --vio-card-description-lines (4). */
+    .description {
+      display: -webkit-box;
+      -webkit-line-clamp: var(--vio-card-description-lines, 4);
+      line-clamp: var(--vio-card-description-lines, 4);
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-size: var(--vio-card-description-size, 14px);
+      line-height: 1.45;
+      color: var(--vio-card-description-color, var(--vio-color-text-secondary, #737373));
+      margin: 0 0 var(--vio-card-description-gap, 12px);
+    }
     .price {
-      font-size: var(--vio-size-md, 16px);
-      font-weight: 700;
-      margin-bottom: 16px;
+      font-family: var(--vio-card-price-font, inherit);
+      font-size: var(--vio-card-price-size, var(--vio-size-md, 16px));
+      font-weight: var(--vio-card-price-weight, 700);
+      margin-bottom: var(--vio-card-price-gap, 16px);
     }
+    /* Who sells it. --vio-card-retailer-order: -1 lifts it above the name
+       (where a brand line goes), for catalogues without a brand of their own. */
     .retailer {
-      font-size: var(--vio-size-xs, 12px);
-      letter-spacing: var(--vio-tracking-label, 0.1em);
+      display: var(--vio-card-retailer-display, block);
+      order: var(--vio-card-retailer-order, 0);
+      font-size: var(--vio-card-retailer-size, var(--vio-size-xs, 12px));
+      letter-spacing: var(--vio-card-retailer-tracking, var(--vio-tracking-label, 0.1em));
       text-transform: uppercase;
-      color: var(--vio-color-text-tertiary, #999);
-      font-weight: 500;
+      color: var(--vio-card-retailer-color, var(--vio-color-text-tertiary, #999));
+      font-weight: var(--vio-card-retailer-weight, 500);
+      margin: var(--vio-card-retailer-margin, auto 0 0);
+    }
+    /* button-style="bar": the Vev card's bar — full width under the price,
+       uppercase, the accent colour, 6px corners (--vio-card-bar-radius). */
+    .bar-btn {
+      width: 100%;
       margin-top: auto;
+      padding: 14px;
+      border: none;
+      border-radius: var(--vio-card-bar-radius, 6px);
+      background: var(--vio-card-accent, var(--vio-color-text, #0a0a0a));
+      color: var(--vio-card-accent-text, #fff);
+      font-family: inherit;
+      font-size: 13px;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      cursor: pointer;
+      transition: opacity 0.15s ease;
     }
+    .bar-btn:hover { opacity: 0.88; }
+    .bar-btn.pop { animation: vio-add-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
   `;
   }
   connectedCallback() {
@@ -644,7 +716,7 @@ var VioProduct = class extends LitElement {
       >
         <div class="image">
           ${this.imageUrl ? html`<img src=${this.imageUrl} alt=${this.name || this.brand} loading="lazy" />` : ""}
-          <button
+          ${this.buttonStyle === "icon" ? html`<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"}
@@ -657,14 +729,18 @@ var VioProduct = class extends LitElement {
                   <line x1="3" y1="6" x2="21" y2="6"></line>
                   <path d="M16 10a4 4 0 0 1-8 0"></path>
                 </svg>`}
-          </button>
+          </button>` : ""}
         </div>
         ${this.hideMeta ? "" : html`
         <div class="meta">
           ${this.brand ? html`<div class="brand">${this.brand}</div>` : ""}
           ${this.name ? html`<div class="name">${this.name}</div>` : ""}
+          ${this.showDescription && this.description ? html`<p class="description">${this.description}</p>` : ""}
           ${this.price ? html`<div class="price">${this.price}</div>` : ""}
           ${this.retailer ? html`<div class="retailer">${this.retailer}</div>` : ""}
+          ${this.buttonStyle === "bar" ? html`<button class="bar-btn ${this.justAdded ? "pop" : ""}" @click=${this.onAdd}>
+                ${this.inCart ? `${this.buttonLabel} \xB7 ${this.cartQty}` : this.buttonLabel}
+              </button>` : ""}
         </div>`}
       </div>
     `;
@@ -679,6 +755,18 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], VioProduct.prototype, "price", 2);
+__decorateClass([
+  property({ type: String })
+], VioProduct.prototype, "description", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-description" })
+], VioProduct.prototype, "showDescription", 2);
+__decorateClass([
+  property({ type: String, attribute: "button-style" })
+], VioProduct.prototype, "buttonStyle", 2);
+__decorateClass([
+  property({ type: String, attribute: "button-label" })
+], VioProduct.prototype, "buttonLabel", 2);
 __decorateClass([
   property({ type: String })
 ], VioProduct.prototype, "retailer", 2);
@@ -797,6 +885,12 @@ var VioProductCarousel = class extends LitElement {
     this.sponsorId = 0;
     this.productRefs = "";
     this.currency = "NOK";
+    this.layout = "";
+    this.showDescription = false;
+    this.descriptions = {};
+    this.buttonStyle = "icon";
+    this.buttonLabel = "Kj\xF8p";
+    this.resolvedLayout = "carousel";
     this.vioSlot = "";
     this.vioSlotName = "";
     this.vioScope = "";
@@ -810,7 +904,11 @@ var VioProductCarousel = class extends LitElement {
     this.fetchError = "";
     // ── Analytics (auto) ──────────────────────────────────────────────
     // component_impression on the contract rule (≥50% visible ≥1s, once per
-    // session) + view_item_list with the rendered products. No-ops unless
+    // session) with the products shown in `commerce.items` (ADR-0041: the
+    // collector counts per-product impressions from them) + view_item_list with
+    // the rendered products. While products load the impression is not
+    // observed: it starts once they are here (or the fetch failed — slotted
+    // fallback is still an impression, without items). No-ops unless
     // Vio.analytics.start() ran.
     this.unobserveImpression = null;
     this.impressed = false;
@@ -919,6 +1017,21 @@ var VioProductCarousel = class extends LitElement {
       .scroller { padding: 0 var(--vio-space-lg, 24px) 8px; }
     }
     .scroller::-webkit-scrollbar { display: none; }
+    /* layout="list": one card under the other, as wide as the column. */
+    .viewport.list .scroller {
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--vio-carousel-list-gap, 32px);
+      max-width: var(--vio-carousel-list-max-width, 480px);
+      margin: 0 auto;
+      padding: 0 var(--vio-space-lg, 24px);
+      overflow: visible;
+      scroll-snap-type: none;
+    }
+    .viewport.list .scroller vio-product,
+    .viewport.list ::slotted(*),
+    .viewport.list .skeleton { flex: 0 0 auto; width: 100%; }
+    .viewport.list .nav-btn { display: none; }
     ::slotted(*),
     vio-product {
       flex: 0 0 240px;
@@ -991,13 +1104,32 @@ var VioProductCarousel = class extends LitElement {
     }
   `;
   }
+  overrideFor(p) {
+    const own = this.descriptions?.[String(p.id)];
+    return typeof own === "string" ? own : void 0;
+  }
+  descriptionFor(p) {
+    return this.overrideFor(p) ?? cardDescription(p.description);
+  }
+  /** The editor's text always shows (unless empty); the catalogue's only with show-description. */
+  showsDescription(p) {
+    const own = this.overrideFor(p);
+    return own !== void 0 ? own.trim() !== "" : this.showDescription;
+  }
+  willUpdate(changed) {
+    if (changed.has("layout") || !this.hasUpdated) {
+      const fromTheme = typeof getComputedStyle === "function" ? getComputedStyle(this).getPropertyValue("--vio-carousel-layout") : "";
+      const value = (this.layout || fromTheme).trim().replace(/^["']|["']$/g, "").toLowerCase();
+      this.resolvedLayout = value === "list" ? "list" : "carousel";
+    }
+  }
   connectedCallback() {
     super.connectedCallback();
     this.slotRegistration.connect(this.slotAttributes());
-    this.observeForAnalytics();
     if (this.productRefs.trim() || this.productIds.trim()) {
       void this.autoFetch();
     }
+    this.observeForAnalytics();
   }
   disconnectedCallback() {
     this.unobserveImpression?.();
@@ -1031,6 +1163,10 @@ var VioProductCarousel = class extends LitElement {
     }
     this.isLoading = true;
     this.fetchError = "";
+    if (!this.impressed) {
+      this.unobserveImpression?.();
+      this.unobserveImpression = null;
+    }
     try {
       if (this.productRefs.trim() === "" && !this.commerceKey && this.sponsorId <= 0 && !Vio.bootstrapCache) {
         try {
@@ -1074,10 +1210,11 @@ var VioProductCarousel = class extends LitElement {
       this.fetchError = err instanceof Error ? err.message : String(err);
     } finally {
       this.isLoading = false;
+      this.observeForAnalytics();
     }
   }
   observeForAnalytics() {
-    if (this.unobserveImpression) return;
+    if (this.unobserveImpression || this.isLoading || !this.isConnected) return;
     try {
       this.unobserveImpression = Vio.analytics.observeImpression(
         this,
@@ -1092,7 +1229,8 @@ var VioProductCarousel = class extends LitElement {
           onImpression: () => {
             this.impressed = true;
             this.maybeTrackList();
-          }
+          },
+          commerce: () => this.listCommerce()
         }
       );
     } catch {
@@ -1113,19 +1251,25 @@ var VioProductCarousel = class extends LitElement {
           locationId: this.effectiveSlot || this.label || void 0,
           ...this.attribution()
         },
-        commerce: {
-          items: entries.map(({ product, sponsorId: sponsorId2 }) => ({
-            productId: product.id,
-            name: product.title,
-            price: Number(product.price?.amount_incl_taxes ?? product.price?.amount) || void 0
-          })),
-          currency: entries[0]?.product.price?.currency_code
-        },
+        commerce: this.listCommerce() ?? void 0,
         props: this.label ? { list_name: this.label } : void 0
       });
     } catch {
     }
   }
+  /** The products on show as analytics lines (impression and view_item_list); null before they load. */
+  listCommerce() {
+    const entries = this.fetched ?? [];
+    if (entries.length === 0) return null;
+    return {
+      items: entries.map(({ product }) => ({
+        productId: product.id,
+        name: product.title,
+        price: Number(product.price?.amount_incl_taxes ?? product.price?.amount) || void 0
+      })),
+      currency: entries[0]?.product.price?.currency_code
+    };
+  }
   parseRefs(raw) {
     return raw.split(",").map((pair) => pair.trim()).filter((s) => s.length > 0).map((pair) => {
       const [sidStr, pidStr] = pair.split(":");
@@ -1165,6 +1309,10 @@ var VioProductCarousel = class extends LitElement {
             name=${p.title}
             price=${displayPrice(p)}
             retailer=${retailer}
+            description=${this.descriptionFor(p)}
+            ?show-description=${this.showsDescription(p)}
+            button-style=${this.buttonStyle}
+            button-label=${this.buttonLabel}
             image-url=${img}
             ?has-variants=${(p.variants?.length ?? 0) > 1}
             .vioSlot=${this.effectiveSlot}
@@ -1190,7 +1338,7 @@ var VioProductCarousel = class extends LitElement {
         </div>
         ${this.seeAllHref ? html`<a class="see-all" href=${this.seeAllHref}>${this.seeAllLabel}</a>` : ""}
       </div>
-      <div class="viewport">
+      <div class="viewport ${this.resolvedLayout}">
         <button
           class="nav-btn prev"
           @click=${() => this.scrollByDirection(-1)}
@@ -1241,6 +1389,24 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], VioProductCarousel.prototype, "currency", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], VioProductCarousel.prototype, "layout", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-description" })
+], VioProductCarousel.prototype, "showDescription", 2);
+__decorateClass([
+  property({ type: Object })
+], VioProductCarousel.prototype, "descriptions", 2);
+__decorateClass([
+  property({ type: String, attribute: "button-style" })
+], VioProductCarousel.prototype, "buttonStyle", 2);
+__decorateClass([
+  property({ type: String, attribute: "button-label" })
+], VioProductCarousel.prototype, "buttonLabel", 2);
+__decorateClass([
+  state()
+], VioProductCarousel.prototype, "resolvedLayout", 2);
 __decorateClass([
   property({ type: String, attribute: "vio-slot" })
 ], VioProductCarousel.prototype, "vioSlot", 2);
@@ -1274,6 +1440,10 @@ __decorateClass([
 __decorateClass([
   state()
 ], VioProductCarousel.prototype, "fetchError", 2);
+function cardDescription(description) {
+  if (!description) return "";
+  return description.replace(/<[^>]+>/g, " ").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/\s+/g, " ").trim();
+}
 
 // src/ui/payment-redirect.ts
 var OVERLAY_CLASS = "vio-redirect-overlay";
@@ -1381,7 +1551,7 @@ var NO_EXPRESS_BUTTON_METHODS = [
   ...EMBEDDED_METHODS,
   ...FORM_FIRST_WIDGET_METHODS
 ];
-var COLLECTS_OWN_ADDRESS = [...EMBEDDED_METHODS, "vipps"];
+var COLLECTS_OWN_ADDRESS = [...EMBEDDED_METHODS];
 var isEmbeddedMethod = (name) => EMBEDDED_METHODS.includes(normalizeMethodName(name));
 var isFormFirstWidgetMethod = (name) => FORM_FIRST_WIDGET_METHODS.includes(normalizeMethodName(name));
 var collectsOwnAddress = (name) => COLLECTS_OWN_ADDRESS.includes(normalizeMethodName(name));
@@ -1595,6 +1765,8 @@ var BottomSheet = class {
     this.locked = false;
     this.drag = null;
     this.dragEndedAt = -Infinity;
+    /** A finger down in the content, not yet known to be a pull (down) or a scroll. */
+    this.pull = null;
     this.onPointerDown = (e) => {
       if (!e.isPrimary || e.pointerType === "mouse" && e.button !== 0) return;
       if (this.drag || !isPhoneSheet()) return;
@@ -1620,45 +1792,54 @@ var BottomSheet = class {
       if (!drag.moving) {
         if (dy < -SLOP) return this.abandon();
         if (dy <= SLOP) return;
-        drag.moving = true;
-        const sheet2 = this.opts.sheet();
-        if (sheet2) sheet2.style.transition = "none";
-        const backdrop2 = this.opts.backdrop?.();
-        if (backdrop2) backdrop2.style.transition = "none";
-      }
-      const dt = e.timeStamp - drag.lastT;
-      if (dt > 0) drag.velocity = 0.8 * ((e.clientY - drag.lastY) / dt) + 0.2 * drag.velocity;
-      drag.lastY = e.clientY;
-      drag.lastT = e.timeStamp;
-      drag.offset = Math.max(0, dy);
-      const sheet = this.opts.sheet();
-      if (sheet) sheet.style.transform = `translateY(${drag.offset}px)`;
-      const backdrop = this.opts.backdrop?.();
-      if (backdrop && sheet) {
-        const height = sheet.getBoundingClientRect().height || window.innerHeight;
-        backdrop.style.opacity = String(Math.max(0, 1 - drag.offset / height));
+        this.startMoving(drag);
       }
+      this.follow(drag, e.clientY, e.timeStamp);
       if (e.cancelable) e.preventDefault();
     };
     this.onPointerUp = (e) => {
       const drag = this.drag;
       if (!drag || e.pointerId !== drag.pointerId) return;
       this.stopTracking();
-      this.drag = null;
-      if (!drag.moving) return;
-      this.dragEndedAt = performance.now();
+      this.finish(drag);
+    };
+    // ── Pull from the content (touch) ─────────────────────────────────────────
+    this.onTouchStart = (e) => {
+      this.pull = null;
+      if (this.drag || e.touches.length !== 1 || !isPhoneSheet()) return;
       const sheet = this.opts.sheet();
-      const height = sheet?.getBoundingClientRect().height || window.innerHeight;
-      const far = drag.offset >= Math.min(CLOSE_DISTANCE, height / 4);
-      const flick = drag.velocity >= FLICK_VELOCITY && drag.offset >= FLICK_MIN;
-      const allowed = !this.opts.canClose || this.opts.canClose();
-      this.release();
-      if ((far || flick) && allowed) {
-        if (sheet) sheet.style.transform = "translateY(100%)";
-        this.opts.close();
-      } else if (sheet) {
-        sheet.style.transform = "";
+      if (!sheet || !e.composedPath().includes(sheet)) return;
+      if (inZone(e, sheet, this.opts.dragZones)) return;
+      const t = e.touches[0];
+      if (t) this.pull = { startX: t.clientX, startY: t.clientY };
+    };
+    this.onTouchMove = (e) => {
+      const t = e.touches[0];
+      if (!t) return;
+      if (this.pull) {
+        const dx = t.clientX - this.pull.startX;
+        const dy = t.clientY - this.pull.startY;
+        if (Math.max(Math.abs(dx), Math.abs(dy)) <= SLOP) return;
+        const startY = this.pull.startY;
+        this.pull = null;
+        if (Math.abs(dx) >= Math.abs(dy) || dy < 0 || this.scrolledDown(e)) return;
+        this.drag = { pointerId: -1, startY, lastY: startY, lastT: e.timeStamp, velocity: 0, moving: false, offset: 0 };
+        this.startMoving(this.drag);
       }
+      const drag = this.drag;
+      if (!drag || drag.pointerId !== -1) return;
+      this.follow(drag, t.clientY, e.timeStamp);
+      if (e.cancelable) e.preventDefault();
+    };
+    this.onTouchEnd = (e) => {
+      this.pull = null;
+      const drag = this.drag;
+      if (!drag || drag.pointerId !== -1 || e.touches.length > 0) return;
+      this.finish(drag);
+    };
+    this.onTouchCancel = () => {
+      this.pull = null;
+      if (this.drag?.pointerId === -1) this.abandon();
     };
     this.onPointerCancel = (e) => {
       if (!this.drag || e.pointerId !== this.drag.pointerId) return;
@@ -1693,12 +1874,21 @@ var BottomSheet = class {
     }
     this.opts.host.addEventListener("pointerdown", this.onPointerDown);
     this.opts.host.addEventListener("click", this.onClickCapture, true);
+    this.opts.host.addEventListener("touchstart", this.onTouchStart, { passive: true });
+    this.opts.host.addEventListener("touchmove", this.onTouchMove, { passive: false });
+    this.opts.host.addEventListener("touchend", this.onTouchEnd);
+    this.opts.host.addEventListener("touchcancel", this.onTouchCancel);
   }
   closed() {
     this.opts.host.removeEventListener("pointerdown", this.onPointerDown);
     this.opts.host.removeEventListener("click", this.onClickCapture, true);
+    this.opts.host.removeEventListener("touchstart", this.onTouchStart);
+    this.opts.host.removeEventListener("touchmove", this.onTouchMove);
+    this.opts.host.removeEventListener("touchend", this.onTouchEnd);
+    this.opts.host.removeEventListener("touchcancel", this.onTouchCancel);
     this.stopTracking();
     this.drag = null;
+    this.pull = null;
     const sheet = this.opts.sheet();
     if (sheet) {
       sheet.style.transform = "";
@@ -1714,6 +1904,58 @@ var BottomSheet = class {
       unlockPageScroll();
     }
   }
+  /** Is the content under the finger scrolled away from its top (the sheet's scroller, or one inside it)? */
+  scrolledDown(e) {
+    const sheet = this.opts.sheet();
+    const scroller = this.opts.scroller?.() ?? sheet;
+    if (scroller && scroller.scrollTop > 0) return true;
+    for (const node of e.composedPath()) {
+      if (node === sheet) break;
+      if (node instanceof HTMLElement && node.scrollTop > 0 && node.scrollHeight > node.clientHeight) return true;
+    }
+    return false;
+  }
+  // ── Shared by both ────────────────────────────────────────────────────────
+  /** The press is a drag now: the sheet and backdrop follow the finger without easing. */
+  startMoving(drag) {
+    drag.moving = true;
+    const sheet = this.opts.sheet();
+    if (sheet) sheet.style.transition = "none";
+    const backdrop = this.opts.backdrop?.();
+    if (backdrop) backdrop.style.transition = "none";
+  }
+  follow(drag, y, timeStamp) {
+    const dt = timeStamp - drag.lastT;
+    if (dt > 0) drag.velocity = 0.8 * ((y - drag.lastY) / dt) + 0.2 * drag.velocity;
+    drag.lastY = y;
+    drag.lastT = timeStamp;
+    drag.offset = Math.max(0, y - drag.startY);
+    const sheet = this.opts.sheet();
+    if (sheet) sheet.style.transform = `translateY(${drag.offset}px)`;
+    const backdrop = this.opts.backdrop?.();
+    if (backdrop && sheet) {
+      const height = sheet.getBoundingClientRect().height || window.innerHeight;
+      backdrop.style.opacity = String(Math.max(0, 1 - drag.offset / height));
+    }
+  }
+  /** Let go: close if far or fast enough (and allowed), else spring back. */
+  finish(drag) {
+    this.drag = null;
+    if (!drag.moving) return;
+    this.dragEndedAt = performance.now();
+    const sheet = this.opts.sheet();
+    const height = sheet?.getBoundingClientRect().height || window.innerHeight;
+    const far = drag.offset >= Math.min(CLOSE_DISTANCE, height / 4);
+    const flick = drag.velocity >= FLICK_VELOCITY && drag.offset >= FLICK_MIN;
+    const allowed = !this.opts.canClose || this.opts.canClose();
+    this.release();
+    if ((far || flick) && allowed) {
+      if (sheet) sheet.style.transform = "translateY(100%)";
+      this.opts.close();
+    } else if (sheet) {
+      sheet.style.transform = "";
+    }
+  }
   /** Give up on this press and put the sheet back where it was. */
   abandon() {
     const moving = this.drag?.moving;
@@ -1780,9 +2022,40 @@ function unlockPageScroll() {
 }
 
 // src/ui/components/vio-product-detail.ts
+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>'
 );
+var HIGHLIGHT_ICONS = {
+  plane: "M21.5 2.5 2.5 10l7 3m12-10.5-12 10.5m12-10.5L17 21l-7.5-8m0 0V20l3-4M5 17l-2.5 2.5M7.5 18.5 6 20",
+  heart: "M12 20.5s-8.5-5-8.5-11A4.75 4.75 0 0 1 12 6.75 4.75 4.75 0 0 1 20.5 9.5c0 6-8.5 11-8.5 11Z",
+  shirt: "M8.5 3.5 3 6l1.75 4.25L7 9.5v11h10v-11l2.25.75L21 6l-5.5-2.5a3.5 3.5 0 0 1-7 0Z",
+  truck: "M2.5 5.5h11v10h-11zM13.5 9.5h4l3 3.5v2.5h-7M6.5 18.5a2 2 0 1 0 0-.01M17 18.5a2 2 0 1 0 0-.01",
+  return: "M4 9h11.5a4.5 4.5 0 0 1 0 9H8M4 9l4-4M4 9l4 4",
+  leaf: "M5 19C5 10 10 4.5 20 4.5c0 10-5.5 15-14 15M5 19l7-7",
+  star: "m12 3.5 2.6 5.4 5.9.8-4.3 4.1 1 5.9L12 17l-5.2 2.7 1-5.9-4.3-4.1 5.9-.8Z",
+  shield: "M12 3 4.5 6v5.5c0 4.5 3.2 8.2 7.5 9.5 4.3-1.3 7.5-5 7.5-9.5V6Z",
+  mailbox: "M3 19v-8a4 4 0 0 1 8 0v8m-8 0h18v-7a4 4 0 0 0-4-4H7m8 0V4h3M6 12h2",
+  home: "M3 11 12 4l9 7M5.5 9.5V20h13V9.5M10 20v-5h4v5",
+  pin: "M12 21s-6.5-6-6.5-11a6.5 6.5 0 0 1 13 0c0 5-6.5 11-6.5 11Zm0-8.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z",
+  clock: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-13.5V12l3 2"
+};
+function rateIcon(method) {
+  const m = method.toLowerCase();
+  if (/postkasse|mailbox|brevkasse/.test(m)) return "mailbox";
+  if (/hente|pakkeboks|automat|postkontor|pickup|utlever/.test(m)) return "pin";
+  if (/dør|hjem|home|door/.test(m)) return "home";
+  return "truck";
+}
+function carrierLogo(logos, carrier) {
+  if (!logos || !carrier) return "";
+  const want = carrier.trim().toLowerCase();
+  for (const [name, url] of Object.entries(logos)) if (name.trim().toLowerCase() === want && url) return url;
+  return "";
+}
+function lineIcon(name, cls = "line-icon") {
+  return html`<svg class=${cls} viewBox="0 0 24 24" aria-hidden="true"><path d=${HIGHLIGHT_ICONS[name] ?? ""}></path></svg>`;
+}
 var VioProductDetail = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -1798,6 +2071,12 @@ var VioProductDetail = class extends LitElement {
     this.vioCampaign = "";
     this.vioContentId = "";
     this.vioContentTitle = "";
+    this.noAddedToast = false;
+    this.gallery = "";
+    this.descriptionMode = "";
+    this.highlights = [];
+    this.deliveryTime = "";
+    this.carrierLogos = {};
     this.slotRegistration = new SlotRegistration(this, "detail");
     /** What the click that opened the detail carried ('' when nothing), and for which product. */
     this.eventSlot = "";
@@ -1808,18 +2087,31 @@ var VioProductDetail = class extends LitElement {
     this.product = null;
     this.sellerName = null;
     this.sellerSettled = false;
+    this.shippingFrom = null;
+    this.shippingRates = [];
     this.isLoading = false;
     this.fetchError = "";
     this.selectedOptions = {};
+    this.selectionPrompt = "";
     this.quantity = 1;
     this.activeImageIndex = 0;
     this.thumbsOverflow = false;
     this.thumbsAtStart = true;
     this.thumbsAtEnd = false;
+    this.descriptionOpen = false;
+    this.descriptionClipped = false;
+    this.galleryMode = "thumbs";
+    this.resolvedDescriptionMode = "preview";
     this.logoSquare = false;
     this.adding = false;
+    this.addedToast = null;
+    this.addedToastTimer = null;
     this.applePayOk = false;
     this.availableMethods = null;
+    this.methodsLoading = false;
+    this.vippsExpress = false;
+    /** Whose methods `availableMethods` are — another brand's are not shown while its own load. */
+    this.methodsSponsorId = 0;
     this.vippsOfficial = false;
     /** Race guard: only the latest fetch may write state (two quick taps on
      * different cards would otherwise let the slow response win). */
@@ -1828,6 +2120,10 @@ var VioProductDetail = class extends LitElement {
     this.optMapCache = /* @__PURE__ */ new WeakMap();
     /** Pre-prepared Apple Pay handle — show() fires synchronously on tap. */
     this.applePayHandle = null;
+    /** The amount `applePayHandle`'s sheet shows (product × quantity when it was prepared). */
+    this.applePayAmount = null;
+    /** The amount the latest preparation was asked for — a newer one supersedes it. */
+    this.applePayAskedFor = null;
     /** Keyboard and focus while open: Escape closes, Tab stays inside, focus returns to the opener. */
     this.dialogFocus = new DialogFocus({
       host: this,
@@ -1869,6 +2165,15 @@ var VioProductDetail = class extends LitElement {
       this.show();
       void this.fetchProduct();
     };
+    /** The photo in view is the active one (dots, Apple Pay sheet, events). */
+    this.onCarouselScroll = () => {
+      const track = this.carouselTrack();
+      const step = this.carouselStep(track);
+      if (!track || !step) return;
+      const last = track.children.length - 1;
+      const idx = Math.min(last, Math.max(0, Math.round(track.scrollLeft / step)));
+      if (idx !== this.activeImageIndex) this.activeImageIndex = idx;
+    };
     this.onThumbsScroll = () => {
       const row = this.thumbRow();
       if (!row) return;
@@ -2183,6 +2488,103 @@ var VioProductDetail = class extends LitElement {
       .thumbs.overflows .thumbs-arrow { display: flex; }
     }
 
+    /* Carousel (gallery="carousel" / theme detailGallery): the same box as the
+       main image — proportion, fit, background, inset — one per photo, in a
+       row that snaps. --vio-detail-carousel-peek shows the edge of the next. */
+    .carousel {
+      position: relative;
+      margin-inline: calc(
+        var(--vio-detail-image-inset, var(--vio-detail-padding-x, var(--vio-space-lg, 24px))) -
+          var(--vio-detail-padding-x, var(--vio-space-lg, 24px))
+      );
+    }
+    .carousel-track {
+      display: flex;
+      gap: var(--vio-detail-carousel-gap, 0px);
+      overflow-x: auto;
+      scroll-snap-type: x mandatory;
+      scroll-behavior: smooth;
+      scrollbar-width: none;
+      -webkit-overflow-scrolling: touch;
+      overscroll-behavior-x: contain;
+      /* Sideways is the carousel's, up and down the panel's; no double-tap
+         zoom delay. The sheet only drags from its top bar, never from here. */
+      touch-action: pan-x pan-y;
+      border-radius: var(--vio-detail-image-radius, 0);
+    }
+    .carousel-track::-webkit-scrollbar { display: none; }
+    .carousel-slide {
+      flex: 0 0 calc(100% - var(--vio-detail-carousel-peek, 0px));
+      aspect-ratio: var(--vio-detail-image-aspect, 4 / 5);
+      max-height: var(--vio-detail-image-max-height, 85vh);
+      background: var(--vio-detail-image-bg, var(--vio-color-surface-muted, #f2f2f2));
+      scroll-snap-align: start;
+      scroll-snap-stop: always;
+      overflow: hidden;
+    }
+    .carousel-slide img {
+      display: block;
+      /* A press on a photo is a swipe: no image drag, no long-press menu, no selection. */
+      pointer-events: none;
+      user-select: none;
+      -webkit-user-select: none;
+      -webkit-user-drag: none;
+      -webkit-touch-callout: none;
+      width: 100%;
+      height: 100%;
+      object-fit: var(--vio-detail-image-fit, cover);
+      object-position: var(--vio-detail-image-position, center);
+      transform: scale(var(--vio-detail-image-zoom, 1));
+    }
+    /* One dot per photo over the bottom of the image: there is more than one,
+       and which one this is. White with a shadow reads on light and dark photos. */
+    .carousel-dots {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 12px;
+      display: flex;
+      justify-content: center;
+      gap: 6px;
+      pointer-events: none;
+    }
+    .carousel-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--vio-detail-dot-color, rgba(255, 255, 255, 0.6));
+      box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
+      transition: background 0.2s ease, transform 0.2s ease;
+    }
+    .carousel-dot.active {
+      background: var(--vio-detail-dot-active-color, #fff);
+      transform: scale(1.35);
+    }
+    .carousel-arrow {
+      display: none;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      border: 1px solid var(--vio-color-border, #e5e5e5);
+      background: var(--vio-color-surface, #fff);
+      color: var(--vio-color-text, #0a0a0a);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      font: 18px/1 sans-serif;
+    }
+    .carousel-arrow.prev { left: 12px; }
+    .carousel-arrow.next { right: 12px; }
+    .carousel-arrow:disabled { visibility: hidden; }
+    @media (hover: hover) and (pointer: fine) {
+      .carousel-arrow { display: flex; }
+    }
+
     /* Info column */
     .info { display: flex; flex-direction: column; gap: var(--vio-detail-info-gap, 20px); min-width: 0; }
     .brand {
@@ -2200,11 +2602,88 @@ var VioProductDetail = class extends LitElement {
       margin: 0;
       letter-spacing: -0.01em;
     }
+    /* The brand's promises: one row, an icon over a title and a line of text,
+       centred like a shop's own trust strip. */
+    .highlights {
+      list-style: none;
+      /* --vio-detail-highlights-display: none hides the strip (theme detailHighlightsDisplay). */
+      margin: 0;
+      padding: var(--vio-detail-highlights-padding, 16px 0 2px);
+      display: var(--vio-detail-highlights-display, grid);
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+      gap: 10px;
+      border-top: 1px solid var(--vio-color-border, #e5e5e5);
+    }
+    /* Like a shop's trust strip: a thin icon, the promise in regular weight,
+       a smaller line under it — nothing bold. */
+    .hl { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; }
+    .hl-icon {
+      width: var(--vio-detail-highlight-icon-size, 22px);
+      height: var(--vio-detail-highlight-icon-size, 22px);
+      margin-bottom: 8px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      object-fit: contain;
+    }
+    .hl-title { font-size: 12px; font-weight: 400; line-height: 1.3; letter-spacing: 0.01em; color: var(--vio-color-text, #0a0a0a); }
+    .hl-text { font-size: 10.5px; line-height: 1.35; letter-spacing: 0.01em; color: var(--vio-color-text-secondary, #666); }
+    /* «Frakt & retur»: same fold as «Beskrivelse», with a small list of rates.
+       --vio-detail-shipping-returns-display: none hides it (theme detailShippingReturnsDisplay). */
+    .shipping-returns { display: var(--vio-detail-shipping-returns-display, block); }
+    .description.shipping-returns-body { white-space: normal; }
+    .shipping-returns-body p { margin: 0 0 10px; }
+    .sr-title {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      color: var(--vio-color-text-secondary, #666);
+      font-weight: 600;
+      margin: 4px 0 6px;
+    }
+    .sr-rates { list-style: none; margin: 0 0 10px; padding: 0; }
+    /* One row per carrier: «Helthjem» over «Til postkasse/dørmatte», price right. */
+    .sr-rates li {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px 0;
+      border-bottom: 1px solid var(--vio-color-border, #eee);
+    }
+    .sr-rates li:last-child { border-bottom: none; }
+    .sr-rate { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
+    .line-icon { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
+    .sr-icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--vio-color-text, #0a0a0a); }
+    .sr-line { display: flex; align-items: center; gap: 12px; }
+    /* A carrier's logo in a fixed box, so rows line up whatever its shape. */
+    .sr-logo { flex: 0 0 auto; width: var(--vio-detail-carrier-logo-width, 56px); height: 24px; object-fit: contain; object-position: left center; }
+    .sr-carrier { font-weight: 600; color: var(--vio-color-text, #0a0a0a); }
+    .sr-method { font-size: 13px; }
+    .sr-time { margin: 0 0 14px; }
+    .sr-price { font-weight: 600; color: var(--vio-color-text, #0a0a0a); white-space: nowrap; }
+    .sr-links { display: flex; gap: 16px; padding-left: 32px; }
+    .sr-links a { color: inherit; }
+    /* Name and price read as one block (stock on the name's line, right);
+       the sizes come after a wider gap, then shipping/returns by the buttons. */
+    .headline { display: flex; flex-direction: column; gap: var(--vio-detail-headline-gap, 8px); }
+    .title-row {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 16px;
+    }
+    .title-row .name { min-width: 0; }
+    .title-row .stock { flex: 0 0 auto; white-space: nowrap; }
     .price-row {
       display: flex;
       align-items: baseline;
       gap: 16px;
     }
+    /* 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)); }
     .price {
       font-size: var(--vio-detail-price-size, 24px);
       font-weight: var(--vio-detail-price-weight, 700);
@@ -2214,6 +2693,11 @@ var VioProductDetail = class extends LitElement {
       color: var(--vio-color-text-tertiary, #999);
       text-decoration: line-through;
     }
+    .delivery-note {
+      margin-top: calc(var(--vio-detail-info-gap, 20px) * -0.6);
+      font-size: 13px;
+      color: var(--vio-color-text-secondary, #666);
+    }
     .stock {
       font-size: 12px;
       text-transform: uppercase;
@@ -2225,8 +2709,15 @@ var VioProductDetail = class extends LitElement {
     .stock.out-of-stock { color: var(--vio-color-text-tertiary, #999); }
 
     /* Option pickers */
-    .option-group { display: flex; flex-direction: column; gap: 6px; }
+    .option-group { display: flex; flex-direction: column; gap: 8px; }
+    /* The prompt sits on the label's own line: tapping a buy button before
+       choosing must not push the pills down under the shopper's finger. */
     .option-label {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 12px;
+      min-height: 1.4em;
       font-size: 11px;
       text-transform: uppercase;
       letter-spacing: var(--vio-tracking-label, 0.1em);
@@ -2272,6 +2763,19 @@ var VioProductDetail = class extends LitElement {
       background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 5px, #f0f0f0 5px, #f0f0f0 10px);
     }
     .option-pill.unavailable:hover { border-color: var(--vio-color-border, #e5e5e5); }
+    /* The value chosen, beside the option's name: «Størrelse: M». */
+    .option-chosen { color: var(--vio-color-text, #0a0a0a); font-weight: 700; }
+    /* A buy button was tapped before choosing: say what is missing. */
+    .option-prompt {
+      text-transform: none;
+      letter-spacing: normal;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--vio-color-accent, #c14a3b);
+    }
+    .option-group.needs-choice .option-pill:not(.unavailable) {
+      border-color: var(--vio-color-accent, #c14a3b);
+    }
 
     /* The buy zone: Vipps first, then quantity + add to cart, then the other
        ways to pay. --vio-detail-buy-position: sticky pins it to the bottom of
@@ -2288,6 +2792,37 @@ var VioProductDetail = class extends LitElement {
       box-shadow: var(--vio-detail-buy-shadow, none);
     }
     .buy > * { margin-top: 0 !important; }
+    /* The buy zone and the description, apart from the name, price and stock:
+       a pinned buy zone can slide up over what is in this box (the
+       description) but never above it — never over the name, the price or
+       the stock line (Mote & Livsstil, 2026-10-28). */
+    .purchase { display: flex; flex-direction: column; gap: var(--vio-detail-info-gap, 20px); }
+    /* The pickers live in the buy zone: when it is pinned to the bottom of the
+       panel (desktop, or a host's sticky), it can never cover them — they
+       travel with the buttons they gate (Mote & Livsstil, 2026-10-28). */
+    .buy-options {
+      display: flex;
+      flex-direction: column;
+      gap: var(--vio-detail-info-gap, 20px);
+      padding-bottom: 4px;
+    }
+    /* Where the express buttons go while the brand's methods load: neutral,
+       the height of one button, no method named. */
+    .buy-pending {
+      height: var(--vio-detail-button-height, 52px);
+      border-radius: var(--vio-detail-button-radius, 0);
+      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;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .buy-pending { animation: none; background: var(--vio-color-surface-muted, #f1f1f1); }
+    }
     /* Under the buttons: who the shopper is buying from. */
     .seller-note {
       margin: 2px 0 0;
@@ -2420,6 +2955,14 @@ var VioProductDetail = class extends LitElement {
     }
     .buy-vipps:hover:not(:disabled) { background: #ec4f1c; }
     .buy-vipps:disabled { opacity: 0.5; cursor: not-allowed; }
+    /* Under the Express button: what happens in the app. */
+    .vipps-note {
+      margin: 0;
+      font-size: 12px;
+      line-height: 1.4;
+      color: var(--vio-color-text-secondary, #666);
+      text-align: center;
+    }
     /* Vipps' own button (web component) — same slot, their drawing. */
     .buy-vipps-official { display: block; width: 100%; margin-top: 10px; cursor: pointer; }
     /* Apple Pay express button — black, per Apple's button guidelines. Only
@@ -2471,6 +3014,61 @@ var VioProductDetail = class extends LitElement {
       transition: transform 0.15s ease;
     }
     .description-block[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
+    /* «Beskrivelse» with a preview: the same heading as the folds, then the
+       first lines fading out, then «Les mer». */
+    .desc-head {
+      all: unset;
+      box-sizing: border-box;
+      width: 100%;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 0 6px;
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: var(--vio-tracking-label, 0.1em);
+      color: var(--vio-color-text-secondary, #666);
+      font-weight: 600;
+      font-family: inherit;
+    }
+    .description-preview.clipped .desc-head::after {
+      content: '';
+      width: 8px;
+      height: 8px;
+      border-right: 1.5px solid currentColor;
+      border-bottom: 1.5px solid currentColor;
+      transform: rotate(45deg) translateY(-2px);
+      transition: transform 0.15s ease;
+    }
+    .description-preview.open .desc-head::after { transform: rotate(-135deg) translateY(-2px); }
+    .description-preview .description { padding-bottom: 6px; }
+    .description-preview.folded .desc-head, .description-preview.open:not(.clipped) .desc-head { padding-bottom: 14px; }
+    .description-preview.folded.open .desc-head { padding-bottom: 6px; }
+    .description-preview.folded .description { padding-bottom: 14px; }
+    .description-preview:not(.clipped) .description { padding-bottom: 14px; }
+    .description.collapsed {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: var(--vio-detail-description-preview-lines, 3);
+      line-clamp: var(--vio-detail-description-preview-lines, 3);
+      overflow: hidden;
+      cursor: pointer;
+      -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
+      mask-image: linear-gradient(to bottom, #000 45%, transparent);
+    }
+    .desc-more {
+      all: unset;
+      cursor: pointer;
+      display: inline-block;
+      margin: 0 0 14px;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--vio-color-text, #0a0a0a);
+      text-decoration: underline;
+      text-underline-offset: 3px;
+      font-family: inherit;
+    }
     .description {
       font-size: 14px;
       line-height: 1.6;
@@ -2478,15 +3076,13 @@ var VioProductDetail = class extends LitElement {
       padding-bottom: 14px;
       white-space: pre-line;
     }
-    /* Desktop: the description above, the buy zone at the bottom of the panel
-       (sticky). Phones keep the order as it is: buy, then the description. */
+    /* Same order on every screen: buy, then the description at the very
+       bottom (folded). Hosts that want the buy zone pinned can still set
+       --vio-detail-buy-position: sticky. */
     @media (min-width: 601px) {
-      .description-block { order: 1; }
       .buy {
-        order: 2;
-        position: var(--vio-detail-buy-position, sticky);
+        position: var(--vio-detail-buy-position, static);
         padding: var(--vio-detail-buy-padding, 12px 0 16px);
-        box-shadow: var(--vio-detail-buy-shadow, 0 -1px 0 var(--vio-color-border, #e5e5e5));
       }
     }
 
@@ -2526,6 +3122,49 @@ var VioProductDetail = class extends LitElement {
         background: var(--vio-color-surface-muted, #f1f1f1);
       }
     }
+    /* «Lagt i handlekurven»: above the page, below where a thumb reaches. */
+    .added-toast {
+      position: fixed;
+      left: 50%;
+      bottom: max(16px, env(safe-area-inset-bottom));
+      transform: translateX(-50%);
+      z-index: 1102;
+      width: min(420px, calc(100vw - 32px));
+      box-sizing: border-box;
+      padding: 14px 16px;
+      background: var(--vio-color-surface, #fff);
+      color: var(--vio-color-text, #0a0a0a);
+      border: 1px solid var(--vio-color-border, #e5e5e5);
+      border-radius: var(--vio-radius-lg, 8px);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
+      font-family: var(--vio-font-sans, -apple-system, sans-serif);
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .added-toast-text { font-size: 14px; font-weight: 600; }
+    .added-toast-text::before { content: '✓ '; color: #2e7d32; }
+    .added-toast-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+    .added-toast-actions button {
+      min-height: 44px;
+      padding: 0 12px;
+      font-family: inherit;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      border-radius: var(--vio-detail-button-radius, 0);
+    }
+    .added-toast-checkout {
+      background: var(--vio-color-text, #0a0a0a);
+      color: var(--vio-color-text-on-primary, #fff);
+      border: 1px solid var(--vio-color-text, #0a0a0a);
+    }
+    .added-toast-continue {
+      background: transparent;
+      color: var(--vio-color-text, #0a0a0a);
+      border: 1px solid var(--vio-color-border, #e5e5e5);
+    }
+
     .error {
       padding: 80px 24px;
       text-align: center;
@@ -2541,6 +3180,8 @@ var VioProductDetail = class extends LitElement {
     document.addEventListener("vio:product-click", this.boundProductClick);
   }
   disconnectedCallback() {
+    if (this.addedToastTimer) clearTimeout(this.addedToastTimer);
+    this.addedToastTimer = null;
     document.removeEventListener("vio:product-click", this.boundProductClick);
     this.slotRegistration.clear();
     this.bottomSheet.disconnect();
@@ -2551,13 +3192,63 @@ var VioProductDetail = class extends LitElement {
       this.dialogFocus.update(this.open);
       this.bottomSheet.update(this.open);
     }
-    if (changed.has("product") || changed.has("open")) this.measureThumbs();
-    if (changed.has("activeImageIndex")) this.revealActiveThumb();
+    if (changed.has("product") || changed.has("open")) {
+      this.measureThumbs();
+      this.measureDescription();
+    }
+    if ((changed.has("quantity") || changed.has("selectedOptions")) && this.product && this.applePayAskedFor !== null) {
+      if (this.unitPrice * this.quantity !== this.applePayAskedFor) this.prepareApplePaySheet();
+    }
+    if (changed.has("activeImageIndex")) {
+      this.revealActiveThumb();
+      this.revealActiveSlide();
+    }
+    if (changed.has("selectedOptions") && this.galleryMode === "carousel") {
+      if (this.activeImageIndex !== 0) this.activeImageIndex = 0;
+      else this.revealActiveSlide();
+    }
     this.measureLogo();
     if (changed.has("vioSlot") || changed.has("vioSlotName") || changed.has("vioScope") || changed.has("vioScopeName") || changed.has("vioCampaign")) {
       this.slotRegistration.sync(this.slotAttributes());
     }
   }
+  willUpdate(changed) {
+    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";
+    }
+  }
+  /** 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) : "";
+    return (own || fromTheme).trim().replace(/^["']|["']$/g, "").toLowerCase();
+  }
+  /** The attribute wins; else the theme's `--vio-detail-gallery`; else thumbnails. */
+  resolveGalleryMode() {
+    return this.themeChoice(this.gallery, "--vio-detail-gallery") === "carousel" ? "carousel" : "thumbs";
+  }
+  carouselTrack() {
+    return this.renderRoot.querySelector(".carousel-track");
+  }
+  /** One photo's width plus the gap (with a peek a photo is narrower than the row). */
+  carouselStep(track) {
+    const slide = track?.firstElementChild;
+    if (!track || !slide || slide.offsetWidth === 0) return 0;
+    return slide.offsetWidth + (parseFloat(getComputedStyle(track).columnGap) || 0);
+  }
+  /** Bring the active photo into view — only when it is not already the one a swipe is on. */
+  revealActiveSlide() {
+    const track = this.carouselTrack();
+    const step = this.carouselStep(track);
+    if (!track || !step) return;
+    const target = Math.min(this.activeImageIndex * step, track.scrollWidth - track.clientWidth);
+    if (Math.abs(track.scrollLeft - target) > step / 2) track.scrollTo({ left: target });
+  }
+  stepCarousel(direction) {
+    const last = this.allImages().length - 1;
+    this.activeImageIndex = Math.min(last, Math.max(0, this.activeImageIndex + direction));
+  }
   thumbRow() {
     return this.renderRoot.querySelector(".gallery-thumbs");
   }
@@ -2586,6 +3277,7 @@ var VioProductDetail = class extends LitElement {
   }
   show() {
     this.open = true;
+    this.hideAddedToast();
   }
   close() {
     this.open = false;
@@ -2599,9 +3291,12 @@ var VioProductDetail = class extends LitElement {
         this.product = null;
         this.sellerName = null;
         this.sellerSettled = false;
+        this.shippingFrom = null;
         this.selectedOptions = {};
+        this.selectionPrompt = "";
         this.quantity = 1;
         this.activeImageIndex = 0;
+        this.descriptionOpen = false;
         this.fetchError = "";
       }
     }, 400);
@@ -2617,6 +3312,7 @@ var VioProductDetail = class extends LitElement {
     this.fetchError = "";
     this.sellerName = null;
     this.sellerSettled = false;
+    this.shippingFrom = null;
     let products = null;
     let lastError = null;
     for (let attempt = 0; attempt < 4; attempt++) {
@@ -2646,6 +3342,7 @@ var VioProductDetail = class extends LitElement {
     this.optMapCache = /* @__PURE__ */ new WeakMap();
     this.product = products?.[0] ?? null;
     if (this.product) void this.loadSeller(productIdNum, seq);
+    if (this.product) void this.loadShippingFrom(productIdNum, seq);
     if (this.product) {
       try {
         const price = Number(
@@ -2678,16 +3375,11 @@ var VioProductDetail = class extends LitElement {
       const initial = {};
       for (const opt of this.product.options ?? []) {
         const values = normalizeValues(opt.values);
-        if (values.length > 0) initial[opt.name] = values[0];
+        if (values.length === 1) 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;
-      });
+      this.selectionPrompt = "";
+      this.prepareApplePaySheet();
       void this.loadAvailablePaymentMethods();
     }
     this.isLoading = false;
@@ -2696,22 +3388,41 @@ var VioProductDetail = class extends LitElement {
   async loadAvailablePaymentMethods() {
     const spId = this.sponsorId || (typeof Vio.campaignForSlot === "function" ? Number(Vio.campaignForSlot(this.activeSlot || null, { campaignId: this.activeCampaignHint })?.primarySponsor?.id) : 0) || globalThis.__VIO_SPONSOR_ID__;
     if (!spId) return;
+    if (spId !== this.methodsSponsorId) {
+      this.availableMethods = null;
+      this.vippsExpress = false;
+    }
+    this.methodsSponsorId = spId;
+    this.methodsLoading = true;
     try {
       const methods = await Vio.checkout.getAvailablePaymentMethods(spId);
       if (Array.isArray(methods)) {
         this.availableMethods = methods.map((m) => m.name);
+        const vipps = methods.find(
+          (m) => String(m?.name ?? "").toLowerCase() === "vipps"
+        );
+        this.vippsExpress = !!vipps && vipps.config?.find((c) => c?.name === "express")?.value !== "false";
       } else {
         this.availableMethods = null;
+        this.vippsExpress = false;
       }
     } catch (err) {
       if (typeof console !== "undefined") {
         console.warn("[VioProductDetail] Failed to load payment methods:", err);
       }
       this.availableMethods = null;
+      this.vippsExpress = false;
+    } finally {
+      this.methodsLoading = false;
     }
   }
+  /** The methods are still on their way: a placeholder stands where the buttons go. */
+  get methodsPending() {
+    return this.methodsLoading && this.availableMethods === null;
+  }
   /** Backend names arrive as e.g. "Apple Pay" — compare letters only. */
   methodEnabled(...names) {
+    if (this.methodsPending) return false;
     return isMethodEnabled(this.availableMethods, ...names);
   }
   /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -2900,26 +3611,92 @@ var VioProductDetail = class extends LitElement {
     const price = v?.price ?? this.product?.price;
     return price?.amount_incl_taxes ?? price?.amount ?? 0;
   }
+  /**
+   * There is something to pay for — whether the express buttons show. With
+   * every option chosen, the chosen variant's price; before that, the
+   * product's or any variant's: the first variant (what `unitPrice` falls
+   * back to) at 0 must not hide Vipps for a size that costs 699.
+   */
+  get hasPrice() {
+    if (!this.missingOption()) return this.unitPrice > 0;
+    const priceOf = (p) => Number(p?.amount_incl_taxes ?? p?.amount ?? 0);
+    return priceOf(this.product?.price) > 0 || (this.product?.variants ?? []).some((v) => priceOf(v.price) > 0);
+  }
   get compareAt() {
     const v = this.selectedVariant();
     const price = v?.price ?? this.product?.price;
     return price?.compare_at_incl_taxes ?? price?.compare_at ?? null;
   }
+  /** The options the shopper has to choose (those with values), in order. */
+  choosableOptions() {
+    return (this.product?.options ?? []).filter((o) => normalizeValues(o.values).length > 0);
+  }
+  /** The first option still without a value, or null when every one is chosen. */
+  missingOption() {
+    return this.choosableOptions().find((o) => !String(this.selectedOptions[o.name] ?? "").trim()) ?? null;
+  }
+  /**
+   * Units that can be sold. With every option chosen, the chosen variant's;
+   * before that, the most any variant still matching the partial choice has
+   * — so the stepper and «Utsolgt» do not speak for a variant (the first
+   * one) the shopper never picked.
+   */
   get availableQuantity() {
+    if (this.missingOption() && Array.isArray(this.product?.variants) && this.product.variants.length > 0) {
+      const sel = this.selectedOptions;
+      const qtys = this.product.variants.filter((v2) => this.variantMatchesSelection(v2, sel)).map((v2) => this.variantSellableQty(v2));
+      return qtys.length > 0 ? Math.max(0, ...qtys) : 0;
+    }
     const v = this.selectedVariant();
     if (v) return this.variantSellableQty(v);
     return this.product?.quantity ?? 0;
   }
+  /**
+   * «Få igjen — N stk» only for the variant actually chosen: before a size is
+   * picked the count belonged to the first variant, which said «Få igjen» of
+   * a product with plenty of other sizes.
+   */
   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" };
+    if (qty <= 3 && !this.missingOption()) return { text: `F\xE5 igjen \u2014 ${qty} stk`, cls: "low-stock" };
     return { text: "P\xE5 lager", cls: "in-stock" };
   }
+  /** «Velg størrelse» for a size, «Velg farge» for a colour… */
+  promptFor(option) {
+    const name = String(option.name ?? "").trim();
+    if (!name || /^(st(ø|o)rrelse|str\.?|size)$/i.test(name)) return "Velg st\xF8rrelse";
+    return `Velg ${name.toLowerCase()}`;
+  }
+  /**
+   * Every buy button goes through here first: with an option not chosen yet,
+   * nothing is added or paid — the picker says what is missing and comes
+   * into view (it sits right above the buttons, inside the buy zone).
+   */
+  requireSelection() {
+    const missing = this.missingOption();
+    if (!missing) {
+      this.selectionPrompt = "";
+      return true;
+    }
+    this.selectionPrompt = missing.name;
+    void this.updateComplete.then(() => {
+      const group = this.renderRoot.querySelector(".option-group.needs-choice");
+      group?.scrollIntoView?.({ behavior: "smooth", block: "nearest" });
+    });
+    return false;
+  }
   /** Pick an option value. If the exact combination doesn't exist, jump to an
    * in-stock variant that carries the value and adopt its full option map
    * (keeps the selection always resolvable to a real variant). */
   selectOption(optionName, value) {
+    this.applyOption(optionName, value);
+    if (this.selectionPrompt && !this.missingOption()) this.selectionPrompt = "";
+    else if (this.selectionPrompt) this.selectionPrompt = this.missingOption()?.name ?? "";
+    const max = this.availableQuantity;
+    if (max > 0 && this.quantity > max) this.quantity = max;
+  }
+  applyOption(optionName, value) {
     const newSelection = { ...this.selectedOptions, [optionName]: value };
     const exactInStock = this.product?.variants?.find(
       (v) => this.variantMatchesSelection(v, newSelection) && this.variantSellableQty(v) > 0
@@ -2987,6 +3764,7 @@ var VioProductDetail = class extends LitElement {
   }
   async addToCart() {
     if (!this.product || this.availableQuantity <= 0 || this.adding) return;
+    if (!this.requireSelection()) return;
     this.adding = true;
     try {
       const variantId = this.addCurrentToCart();
@@ -3003,11 +3781,49 @@ var VioProductDetail = class extends LitElement {
           }
         })
       );
+      this.showAddedToast();
       this.close();
     } finally {
       this.adding = false;
     }
   }
+  /** The toast after an add; it goes by itself after a while. */
+  showAddedToast() {
+    if (this.noAddedToast) return;
+    this.addedToast = {
+      sponsorId: this.sponsorId,
+      detail: { sponsorId: this.sponsorId, express: false, ...this.attribution(), ...sponsorDetail(this.sponsorId) }
+    };
+    if (this.addedToastTimer) clearTimeout(this.addedToastTimer);
+    this.addedToastTimer = setTimeout(() => this.hideAddedToast(), ADDED_TOAST_MS);
+  }
+  hideAddedToast() {
+    if (this.addedToastTimer) clearTimeout(this.addedToastTimer);
+    this.addedToastTimer = null;
+    this.addedToast = null;
+  }
+  /** «Til kassen»: the checkout of the brand just added to — the host opens it on `vio:checkout-open`, as from the cart. */
+  toastToCheckout() {
+    const toast = this.addedToast;
+    this.hideAddedToast();
+    if (!toast) return;
+    const cart = Vio.cart.getCart(toast.sponsorId);
+    const total = (cart?.items ?? []).reduce((sum, i) => sum + i.unitPrice * i.quantity, 0);
+    if (!cart || cart.items.length === 0 || !(total > 0)) return;
+    this.dispatchEvent(new CustomEvent("vio:checkout-open", { bubbles: true, composed: true, detail: toast.detail }));
+  }
+  renderAddedToast() {
+    if (!this.addedToast) return nothing;
+    return html`
+      <div class="added-toast" part="added-toast" role="status" aria-live="polite">
+        <div class="added-toast-text">Lagt i handlekurven</div>
+        <div class="added-toast-actions">
+          <button class="added-toast-checkout" part="added-toast-checkout" @click=${this.toastToCheckout}>Til kassen</button>
+          <button class="added-toast-continue" part="added-toast-continue" @click=${this.hideAddedToast}>Fortsett å handle</button>
+        </div>
+      </div>
+    `;
+  }
   /**
    * Express buy: add to cart, then open the checkout overlay with Klarna
    * preselected. The host app handles `vio:checkout-open` (same event the cart
@@ -3016,6 +3832,7 @@ var VioProductDetail = class extends LitElement {
    */
   async buyWithKlarna() {
     if (!this.product || this.availableQuantity <= 0 || this.adding) return;
+    if (!this.requireSelection()) return;
     this.adding = true;
     try {
       this.addCurrentToCart();
@@ -3048,6 +3865,7 @@ var VioProductDetail = class extends LitElement {
    */
   buyNow() {
     if (!this.product || this.availableQuantity <= 0 || this.adding) return;
+    if (!this.requireSelection()) return;
     this.addCurrentToCart();
     this.close();
     this.dispatchEvent(
@@ -3070,11 +3888,27 @@ var VioProductDetail = class extends LitElement {
   }
   buyWithVipps() {
     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) {
+      this.addCurrentToCart();
+      this.close();
+      this.openCheckoutWithVipps();
+      return;
+    }
     const redirect = beginPaymentRedirect({ method: "vipps", sponsorId: this.sponsorId, source: "detail" });
     this.addCurrentToCart();
     this.close();
     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.
+   */
+  vippsGoesStraightToApp() {
+    return this.vippsExpress && (Vio.cart.getCart(this.sponsorId)?.items.length ?? 0) === 0;
+  }
   async startVippsExpressOrCheckout(redirect) {
     let fallback = true;
     try {
@@ -3092,17 +3926,26 @@ var VioProductDetail = class extends LitElement {
       redirect.fail(err instanceof Error ? err.message : String(err));
     }
     if (!fallback) return;
+    this.openCheckoutWithVipps();
+  }
+  /** The ordinary way in, Vipps preselected: the host opens the checkout on `vio:checkout-open`. */
+  openCheckoutWithVipps() {
+    this.openCheckoutWith("vipps");
+  }
+  /** The ordinary way in with a method preselected: the host opens the checkout on `vio:checkout-open`. */
+  openCheckoutWith(paymentMethod) {
     this.dispatchEvent(
       new CustomEvent("vio:checkout-open", {
         bubbles: true,
         composed: true,
-        detail: { sponsorId: this.sponsorId, paymentMethod: "vipps", express: false, ...this.attribution(), ...sponsorDetail(this.sponsorId) }
+        detail: { sponsorId: this.sponsorId, paymentMethod, express: false, ...this.attribution(), ...sponsorDetail(this.sponsorId) }
       })
     );
   }
   /** Buy with Stripe — opens the checkout with Stripe preselected. */
   buyWithStripe() {
     if (!this.product || this.availableQuantity <= 0 || this.adding) return;
+    if (!this.requireSelection()) return;
     this.addCurrentToCart();
     this.close();
     this.dispatchEvent(
@@ -3113,14 +3956,49 @@ var VioProductDetail = class extends LitElement {
       })
     );
   }
+  /** Prepare the Apple Pay sheet for this product × quantity; the newest preparation wins. */
+  prepareApplePaySheet() {
+    const amount = this.unitPrice * this.quantity;
+    this.applePayAskedFor = amount;
+    void Vio.checkout.prepareApplePayFor(amount, this.currency).then((handle) => {
+      if (this.applePayAskedFor !== amount) return;
+      this.applePayHandle = handle;
+      this.applePayAmount = amount;
+      this.applePayOk = handle.available;
+    }).catch(() => {
+      if (this.applePayAskedFor !== amount) return;
+      this.applePayHandle = null;
+      this.applePayAmount = null;
+      this.applePayOk = 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).
+   *
+   * The sheet's amount is fixed before the tap (Apple blocks a sheet opened
+   * 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 —
+   * 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.
    */
   buyWithApplePay() {
     if (!this.product || this.availableQuantity <= 0 || !this.applePayHandle) return;
+    if (!this.requireSelection()) return;
+    if (!(this.unitPrice > 0)) return;
+    const cartHasLines = (Vio.cart.getCart(this.sponsorId)?.items.length ?? 0) > 0;
+    if (cartHasLines || this.applePayAmount !== this.unitPrice * this.quantity) {
+      this.addCurrentToCart();
+      this.close();
+      this.openCheckoutWith("apple-pay");
+      return;
+    }
     this.addCurrentToCart();
     try {
       Vio.checkout.open(this.sponsorId);
@@ -3133,6 +4011,175 @@ var VioProductDetail = class extends LitElement {
     void this.applePayHandle.show();
     this.close();
   }
+  /**
+   * The product's cheapest rate for the page's market — the rates the
+   * backend cart offers for its line. A rate in another currency than the
+   * product's price is not shown (never a price the shopper would not pay).
+   */
+  async loadShippingFrom(productId, seq) {
+    let rates = null;
+    try {
+      const product = Vio.commerceFor(this.sponsorId).channel.product;
+      rates = typeof product.getShippingRates === "function" ? await product.getShippingRates(productId, { currency: this.currency }) : null;
+    } catch {
+      rates = null;
+    }
+    if (seq !== this.fetchSeq) return;
+    const currency = String(this.product?.price?.currency_code ?? this.currency ?? "").toUpperCase();
+    const usable = (rates ?? []).filter((r) => !r.currency || r.currency.toUpperCase() === currency);
+    const cheapest = usable[0];
+    this.shippingFrom = cheapest ? { price: cheapest.price, currency: cheapest.currency || currency } : null;
+    this.shippingRates = usable.map((r) => ({
+      name: String(r.name ?? ""),
+      price: r.price,
+      currency: r.currency || currency,
+      description: String(r.description ?? "").trim(),
+      logoUrl: String(r.logoUrl ?? "")
+    }));
+  }
+  /**
+   * `gallery="carousel"`: every photo in one row that snaps one at a time —
+   * swipe on touch, arrows with a mouse — and a dot per photo over it
+   * instead of thumbnails, so the name, price and sizes come up higher.
+   */
+  renderCarousel(images, title) {
+    const count = images.length;
+    const current2 = Math.min(this.activeImageIndex, Math.max(0, count - 1));
+    return html`
+      <div class="gallery carousel" part="gallery">
+        <div class="carousel-track" part="image" @scroll=${this.onCarouselScroll}>
+          ${images.map(
+      (img, idx) => html`
+              <div class="carousel-slide" part="slide" aria-label=${`Bilde ${idx + 1} av ${count}`}>
+                <img src=${img.url} alt=${idx === 0 ? title : ""} loading=${idx === 0 ? "eager" : "lazy"} />
+              </div>
+            `
+    )}
+        </div>
+        ${count > 1 ? html`
+              <button
+                class="carousel-arrow prev"
+                part="carousel-arrow"
+                aria-label="Forrige bilde"
+                ?disabled=${current2 === 0}
+                @click=${() => this.stepCarousel(-1)}
+              >‹</button>
+              <button
+                class="carousel-arrow next"
+                part="carousel-arrow"
+                aria-label="Neste bilde"
+                ?disabled=${current2 === count - 1}
+                @click=${() => this.stepCarousel(1)}
+              >›</button>
+              <div class="carousel-dots" part="image-dots" aria-hidden="true">
+                ${images.map((_, idx) => html`<span class="carousel-dot ${idx === current2 ? "active" : ""}"></span>`)}
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+  /**
+   * «Beskrivelse», not shut: the first lines show, fading out, and a tap on
+   * the heading, the text or «Les mer» opens the rest (Angelo, 2026-10-28).
+   * A description that fits in the preview has nothing to open.
+   */
+  renderDescription(text) {
+    const mode = this.resolvedDescriptionMode;
+    if (mode === "open") {
+      return html`<div class="description-block description-preview open" part="description">
+        <div class="desc-head">Beskrivelse</div>
+        <div class="description">${text}</div>
+      </div>`;
+    }
+    const foldable = mode === "folded" || this.descriptionClipped;
+    const open = this.descriptionOpen || !foldable;
+    const toggle = () => {
+      if (foldable) this.descriptionOpen = !this.descriptionOpen;
+    };
+    return html`<div class="description-block description-preview ${open ? "open" : ""} ${foldable ? "clipped" : ""} ${mode}" part="description">
+      <button class="desc-head" type="button" aria-expanded=${open ? "true" : "false"} @click=${toggle}>Beskrivelse</button>
+      ${mode === "folded" && !open ? nothing : html`<div class="description ${open ? "" : "collapsed"}" @click=${() => !this.descriptionOpen && toggle()}>${text}</div>`}
+      ${mode === "preview" && this.descriptionClipped ? html`<button class="desc-more" type="button" @click=${toggle}>${this.descriptionOpen ? "Vis mindre" : "Les mer"}</button>` : nothing}
+    </div>`;
+  }
+  /** Is the preview hiding part of the text? Measured with the preview applied. */
+  measureDescription() {
+    const el = this.renderRoot.querySelector(".description-preview .description");
+    if (!el || this.descriptionOpen) return;
+    const wasCollapsed = el.classList.contains("collapsed");
+    el.classList.add("collapsed");
+    const clipped = el.scrollHeight > el.clientHeight + 1;
+    if (!wasCollapsed) el.classList.remove("collapsed");
+    if (clipped !== this.descriptionClipped) this.descriptionClipped = clipped;
+  }
+  renderHighlights() {
+    const own = (Array.isArray(this.highlights) ? this.highlights : []).filter((h) => h && h.title);
+    const items = own.length ? own : resolveSponsorIdentity(this.sponsorId)?.highlights ?? [];
+    if (items.length === 0) return nothing;
+    return html`<ul class="highlights" part="highlights">
+      ${items.map((h) => {
+      const path = h.icon ? HIGHLIGHT_ICONS[h.icon] : void 0;
+      const icon = path ? html`<svg class="hl-icon" viewBox="0 0 24 24" aria-hidden="true"><path d=${path}></path></svg>` : h.icon ? html`<img class="hl-icon" src=${h.icon} alt="" />` : nothing;
+      return html`<li class="hl" part="highlight">
+          ${icon}
+          <span class="hl-title">${h.title}</span>
+          ${h.text ? html`<span class="hl-text">${h.text}</span>` : nothing}
+        </li>`;
+    })}
+    </ul>`;
+  }
+  /**
+   * «Frakt & retur», folded like «Beskrivelse»: the delivery options for the
+   * page's country with their price, and the right of withdrawal with the
+   * brand's own terms and returns pages when it gave them.
+   */
+  renderShippingReturns() {
+    const identity = resolveSponsorIdentity(this.sponsorId);
+    const rates = this.shippingRates;
+    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()}` : "";
+    const links = [
+      identity?.refundPolicyUrl ? html`<a href=${identity.refundPolicyUrl} target="_blank" rel="noopener noreferrer">Angrerett og retur</a>` : null,
+      identity?.termsUrl ? html`<a href=${identity.termsUrl} target="_blank" rel="noopener noreferrer">Kjøpsvilkår</a>` : null
+    ].filter(Boolean);
+    return html`<details class="description-block shipping-returns" part="shipping-returns">
+      <summary>Frakt &amp; retur</summary>
+      <div class="description shipping-returns-body">
+        <div class="sr-title">Frakt</div>
+        ${rates.length ? html`<ul class="sr-rates">
+              ${rates.map((r) => {
+      const { carrier, method } = splitRateName(r.name);
+      const logo = r.logoUrl || carrierLogo(this.carrierLogos, carrier);
+      return html`<li>
+                  ${logo ? html`<img class="sr-logo" src=${logo} alt=${carrier} />` : lineIcon(rateIcon(r.name ?? ""), "line-icon sr-icon")}
+                  <span class="sr-rate">
+                    <span class="sr-carrier">${carrier || method || "Frakt"}</span>
+                    ${carrier && method ? html`<span class="sr-method">${method}</span>` : nothing}
+                    ${perRateTime && r.description ? html`<span class="sr-method">${r.description}</span>` : nothing}
+                  </span>
+                  <span class="sr-price">${r.price <= 0 ? "Gratis" : formatPrice(r.price, r.currency)}</span>
+                </li>`;
+    })}
+            </ul>` : html`<p>Fraktprisen vises i kassen.</p>`}
+        ${sharedTime ? html`<p class="sr-line sr-time">${lineIcon("clock", "line-icon sr-icon")}<span>${sharedTime}</span></p>` : nothing}
+        <div class="sr-title">Retur</div>
+        <p class="sr-line">${lineIcon("return", "line-icon sr-icon")}<span>Du har 14 dagers angrerett fra du mottar varen.</span></p>
+        ${links.length ? html`<p class="sr-links">${links}</p>` : nothing}
+      </div>
+    </details>`;
+  }
+  /** Under the price: «Frakt fra X · 14 dagers angrerett» (or «Gratis frakt · …»). */
+  renderDeliveryNote() {
+    const ship = this.shippingFrom;
+    const shipping = ship ? ship.price <= 0 ? "Gratis frakt" : `Frakt fra ${formatPrice(ship.price, ship.currency)}` : "";
+    return html`<div class="delivery-note" part="delivery-note">
+      ${shipping ? html`<span part="delivery-shipping">${shipping}</span><span aria-hidden="true"> · </span>` : ""}<span
+        part="delivery-withdrawal"
+        >14 dagers angrerett</span
+      >
+    </div>`;
+  }
   /** The seller's Company name; the brand when there is none; nothing while asking. */
   headerName() {
     if (this.sellerName) return this.sellerName;
@@ -3215,6 +4262,7 @@ var VioProductDetail = class extends LitElement {
 
         ${this.renderBody()}
       </div>
+      ${this.renderAddedToast()}
     `;
   }
   renderBody() {
@@ -3242,7 +4290,7 @@ var VioProductDetail = class extends LitElement {
     const activeImage = this.activeImage;
     return html`
       <div class="body">
-        <div class="gallery" part="gallery">
+        ${this.galleryMode === "carousel" ? this.renderCarousel(images, p.title) : html`<div class="gallery" part="gallery">
           <div class="gallery-main" part="image">
             ${activeImage?.url ? html`<img src=${activeImage.url} alt=${p.title} />` : ""}
           </div>
@@ -3279,26 +4327,30 @@ var VioProductDetail = class extends LitElement {
                   >›</button>
                 </div>
               ` : ""}
-        </div>
+        </div>`}
 
         <div class="info" part="info">
           ${p.brand ? html`<div class="brand" part="brand">${p.brand}</div>` : ""}
-          <h2 class="name" part="title">${p.title}</h2>
-
-          <div class="price-row">
-            <span class="price" part="price">${formatPrice(this.unitPrice, p.price.currency_code)}</span>
-            ${showCompare ? html`<span class="compare-at">${formatPrice(
+          <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">
+              <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="stock ${stock.cls}" part="stock">${stock.text}</div>
-
-          ${this.renderOptionPickers(p.options)}
-
+          <div class="purchase">
           <div class="buy" part="buy">
-          ${this.availableQuantity > 0 && this.methodEnabled("vipps") ? this.vippsOfficial ? html`
+          ${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`
                   <vipps-mobilepay-button
                     class="buy-vipps-official"
                     part="buy-vipps"
@@ -3324,6 +4376,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>` : ""}
 
           <div class="qty-cta-row" part="quantity-row">
             <div class="qty-stepper">
@@ -3365,7 +4418,7 @@ var VioProductDetail = class extends LitElement {
                 </button>
               ` : ""}
 
-          ${this.availableQuantity > 0 && this.applePayOk && this.methodEnabled("apple-pay", "applepay") ? html`
+          ${this.availableQuantity > 0 && this.hasPrice && this.applePayOk && this.methodEnabled("apple-pay", "applepay") ? html`
                 <button
                   class="buy-applepay"
                   @click=${this.buyWithApplePay}
@@ -3411,12 +4464,11 @@ var VioProductDetail = class extends LitElement {
           ${this.renderSellerNote()}
           </div>
 
-          ${p.description ? html`
-                <details class="description-block" part="description">
-                  <summary>Beskrivelse</summary>
-                  <div class="description">${this.stripHtml(p.description)}</div>
-                </details>
-              ` : ""}
+          ${this.renderHighlights()}
+
+          ${p.description ? this.renderDescription(this.stripHtml(p.description)) : ""}
+          ${this.renderShippingReturns()}
+          </div>
         </div>
       </div>
     `;
@@ -3426,9 +4478,16 @@ var VioProductDetail = class extends LitElement {
     return html`${options.map((opt) => {
       const values = normalizeValues(opt.values);
       if (values.length === 0) return "";
+      const chosen = String(this.selectedOptions[opt.name] ?? "").trim();
+      const asked = this.selectionPrompt === opt.name && !chosen;
       return html`
-        <div class="option-group" part="option-group">
-          <div class="option-label" part="option-label">${opt.name}</div>
+        <div class="option-group ${asked ? "needs-choice" : ""}" part="option-group">
+          <div class="option-label" part="option-label">
+            <span
+              >${opt.name}${chosen ? html`: <span class="option-chosen" part="option-chosen">${chosen}</span>` : ""}</span
+            >
+            ${asked ? html`<span class="option-prompt" part="option-prompt" role="alert">${this.promptFor(opt)}</span>` : ""}
+          </div>
           <div class="option-values" part="options">
             ${values.map((val) => {
         const available = this.isValueAvailable(opt.name, val);
@@ -3493,6 +4552,24 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "vio-content-title" })
 ], VioProductDetail.prototype, "vioContentTitle", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "no-added-toast" })
+], VioProductDetail.prototype, "noAddedToast", 2);
+__decorateClass([
+  property({ type: String })
+], VioProductDetail.prototype, "gallery", 2);
+__decorateClass([
+  property({ type: String, attribute: "description-mode" })
+], VioProductDetail.prototype, "descriptionMode", 2);
+__decorateClass([
+  property({ type: Array })
+], VioProductDetail.prototype, "highlights", 2);
+__decorateClass([
+  property({ type: String, attribute: "delivery-time" })
+], VioProductDetail.prototype, "deliveryTime", 2);
+__decorateClass([
+  property({ type: Object, attribute: "carrier-logos" })
+], VioProductDetail.prototype, "carrierLogos", 2);
 __decorateClass([
   state()
 ], VioProductDetail.prototype, "product", 2);
@@ -3502,6 +4579,12 @@ __decorateClass([
 __decorateClass([
   state()
 ], VioProductDetail.prototype, "sellerSettled", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "shippingFrom", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "shippingRates", 2);
 __decorateClass([
   state()
 ], VioProductDetail.prototype, "isLoading", 2);
@@ -3511,6 +4594,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], VioProductDetail.prototype, "selectedOptions", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "selectionPrompt", 2);
 __decorateClass([
   state()
 ], VioProductDetail.prototype, "quantity", 2);
@@ -3526,18 +4612,39 @@ __decorateClass([
 __decorateClass([
   state()
 ], VioProductDetail.prototype, "thumbsAtEnd", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "descriptionOpen", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "descriptionClipped", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "galleryMode", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "resolvedDescriptionMode", 2);
 __decorateClass([
   state()
 ], VioProductDetail.prototype, "logoSquare", 2);
 __decorateClass([
   state()
 ], VioProductDetail.prototype, "adding", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "addedToast", 2);
 __decorateClass([
   state()
 ], VioProductDetail.prototype, "applePayOk", 2);
 __decorateClass([
   state()
 ], VioProductDetail.prototype, "availableMethods", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "methodsLoading", 2);
+__decorateClass([
+  state()
+], VioProductDetail.prototype, "vippsExpress", 2);
 __decorateClass([
   state()
 ], VioProductDetail.prototype, "vippsOfficial", 2);
@@ -3550,9 +4657,35 @@ function normalizeValues(raw) {
   }
   return [];
 }
+function splitRateName(name) {
+  const text = String(name ?? "").trim();
+  const m = text.match(/^(.+?)\s+[-–—]\s+(.+)$/);
+  if (!m?.[1] || !m[2]) return { carrier: "", method: text };
+  const method = m[2].trim();
+  return { carrier: m[1].trim(), method: method.charAt(0).toUpperCase() + method.slice(1) };
+}
 var STRIPE_LOGO_SRC2 = "data:image/svg+xml;utf8," + encodeURIComponent(
   '<svg width="360" height="150" viewBox="0 0 360 150" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M360 77.4001C360 51.8001 347.6 31.6001 323.9 31.6001C300.1 31.6001 285.7 51.8001 285.7 77.2001C285.7 107.3 302.7 122.5 327.1 122.5C339 122.5 348 119.8 354.8 116V96.0001C348 99.4001 340.2 101.5 330.3 101.5C320.6 101.5 312 98.1001 310.9 86.3001H359.8C359.8 85.0001 360 79.8001 360 77.4001ZM310.6 67.9001C310.6 56.6001 317.5 51.9001 323.8 51.9001C329.9 51.9001 336.4 56.6001 336.4 67.9001H310.6Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M247.1 31.6001C237.3 31.6001 231 36.2001 227.5 39.4001L226.2 33.2001H204.2V149.8L229.2 144.5L229.3 116.2C232.9 118.8 238.2 122.5 247 122.5C264.9 122.5 281.2 108.1 281.2 76.4001C281.1 47.4001 264.6 31.6001 247.1 31.6001ZM241.1 100.5C235.2 100.5 231.7 98.4001 229.3 95.8001L229.2 58.7001C231.8 55.8001 235.4 53.8001 241.1 53.8001C250.2 53.8001 256.5 64.0001 256.5 77.1001C256.5 90.5001 250.3 100.5 241.1 100.5Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M169.8 25.7L194.9 20.3V0L169.8 5.3V25.7Z" fill="#533AFD"/><path d="M194.9 33.3H169.8V120.8H194.9V33.3Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M142.9 40.7L141.3 33.3H119.7V120.8H144.7V61.5C150.6 53.8 160.6 55.2 163.7 56.3V33.3C160.5 32.1 148.8 29.9 142.9 40.7Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M92.8999 11.6001L68.4999 16.8001L68.3999 96.9001C68.3999 111.7 79.4999 122.6 94.2999 122.6C102.5 122.6 108.5 121.1 111.8 119.3V99.0001C108.6 100.3 92.7999 104.9 92.7999 90.1001V54.6001H111.8V33.3001H92.7999L92.8999 11.6001Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M25.3 58.7001C25.3 54.8001 28.5 53.3001 33.8 53.3001C41.4 53.3001 51 55.6001 58.6 59.7001V36.2001C50.3 32.9001 42.1 31.6001 33.8 31.6001C13.5 31.6001 0 42.2001 0 59.9001C0 87.5001 38 83.1001 38 95.0001C38 99.6001 34 101.1 28.4 101.1C20.1 101.1 9.5 97.7001 1.1 93.1001V116.9C10.4 120.9 19.8 122.6 28.4 122.6C49.2 122.6 63.5 112.3 63.5 94.4001C63.4 64.6001 25.3 69.9001 25.3 58.7001Z" fill="#533AFD"/></svg>'
 );
+function ratePrice(rate, currency) {
+  const price = rate?.price;
+  if (!price) return null;
+  const amount = typeof price.amount_incl_taxes === "number" ? price.amount_incl_taxes : price.amount;
+  if (typeof amount !== "number" || !Number.isFinite(amount) || amount < 0) return null;
+  if (price.currency_code && currency && price.currency_code.toUpperCase() !== currency.toUpperCase()) return null;
+  return amount;
+}
+function cartShipping(items, currency) {
+  for (const item of items) {
+    const chosen = ratePrice(item.shipping, currency);
+    if (chosen !== null) return chosen;
+  }
+  for (const item of items) {
+    const offered = (item.availableShippings ?? []).map((r) => ratePrice(r, currency)).filter((p) => p !== null);
+    if (offered.length > 0) return Math.min(...offered);
+  }
+  return null;
+}
 var VioCart = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -3564,6 +4697,7 @@ var VioCart = class extends LitElement {
     this.itemCount = 0;
     this.applePayAvailable = false;
     this.availableMethods = null;
+    this.methodsLoading = false;
     this.vippsOfficial = false;
     /** Whether the method lookup has been attempted — see boundOnCartChange. */
     this.paymentMethodsAttempted = false;
@@ -3586,6 +4720,7 @@ var VioCart = class extends LitElement {
       sheet: () => this.renderRoot.querySelector(".drawer"),
       backdrop: () => this.renderRoot.querySelector(".backdrop"),
       dragZones: ".handle, .header",
+      scroller: () => this.renderRoot.querySelector(".body"),
       close: () => this.close()
     });
     this.boundOnCartChange = (e) => {
@@ -3790,6 +4925,14 @@ var VioCart = class extends LitElement {
       cursor: pointer;
     }
     .checkout-btn:hover { opacity: 0.9; }
+    .checkout-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    /* Where the express buttons go while the brand's methods load. */
+    .methods-pending {
+      height: 48px;
+      margin-bottom: 10px;
+      border-radius: var(--vio-radius-lg, 8px);
+      background: var(--vio-color-surface-muted, #f1f1f1);
+    }
     .footer {
       padding: var(--vio-space-lg, 24px);
       border-top: 1px solid var(--vio-color-border, #e5e5e5);
@@ -3802,6 +4945,14 @@ var VioCart = class extends LitElement {
       font-size: 14px;
     }
     .subtotal-label { color: var(--vio-color-text-secondary, #666); }
+    .shipping-row,
+    .total-row {
+      display: flex;
+      justify-content: space-between;
+      margin: calc(var(--vio-space-md, 16px) * -0.5) 0 var(--vio-space-md, 16px);
+      font-size: 14px;
+    }
+    .total-row { font-weight: 700; font-size: 16px; margin-top: 0; }
     .subtotal-value { font-weight: 700; font-size: 16px; }
 
     /* Apple Pay express — pay the whole cart directly. */
@@ -3997,6 +5148,7 @@ var VioCart = class extends LitElement {
       this.loadingPaymentMethods = false;
       return;
     }
+    this.methodsLoading = true;
     try {
       const methods = await Vio.checkout.getAvailablePaymentMethods(firstSponsorId);
       if (Array.isArray(methods)) {
@@ -4011,10 +5163,20 @@ var VioCart = class extends LitElement {
       this.availableMethods = null;
     } finally {
       this.loadingPaymentMethods = false;
+      this.methodsLoading = false;
     }
   }
-  /** Backend names arrive as e.g. "Apple Pay" — compare letters only. */
+  /** The methods are on their way and none is known yet. */
+  get methodsPending() {
+    return this.methodsLoading && this.availableMethods === null;
+  }
+  /**
+   * Backend names arrive as e.g. "Apple Pay" — compare letters only. While
+   * the list loads, no method's button is drawn: «unknown = all» painted
+   * Stripe and Klarna for a Vipps-only brand until it came.
+   */
   methodEnabled(...names) {
+    if (this.methodsPending) return false;
     return isMethodEnabled(this.availableMethods, ...names);
   }
   updated(changed) {
@@ -4025,6 +5187,9 @@ var VioCart = class extends LitElement {
     if (changed.has("open") && this.open) {
       this.confirmedOrder = null;
       this.preparedTotal = -1;
+      for (const cart of this.carts.values()) {
+        if (cart.cartId) void Vio.cart.refreshFromServer(cart.sponsorId);
+      }
     }
     if (this.open && this.itemCount > 0) {
       const total = this.totalAcrossSponsors;
@@ -4054,7 +5219,7 @@ var VioCart = class extends LitElement {
   /** Apple Pay express — pay the whole cart, then show the confirmation. */
   onApplePay() {
     const handle = this.applePayHandle;
-    if (!handle || !handle.available || this.itemCount === 0) return;
+    if (!handle || !handle.available || !this.payable) return;
     const snapshot = this.buildConfirmation();
     const sponsorIds = [...this.carts.keys()];
     const sponsor = sponsorIds.length === 1 ? sponsorDetail(sponsorIds[0]) : {};
@@ -4098,7 +5263,7 @@ var VioCart = class extends LitElement {
    * (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;
+    if (!this.payable) return;
     const firstSponsorId = [...this.carts.keys()][0];
     if (firstSponsorId === void 0) return;
     this.dispatchEvent(
@@ -4119,7 +5284,7 @@ var VioCart = class extends LitElement {
    * method present the others were unreachable from here.
    */
   onCheckout() {
-    if (this.itemCount === 0) return;
+    if (!this.payable) return;
     const firstSponsorId = [...this.carts.keys()][0];
     if (firstSponsorId === void 0) return;
     this.dispatchEvent(
@@ -4131,51 +5296,31 @@ var VioCart = class extends LitElement {
     );
   }
   /**
-   * Vipps — Express: the app collects address and delivery, so the cart
-   * goes straight to Vipps. When this cart cannot have Express (several
-   * suppliers, digital goods, no rate) or Vipps cannot be started, the
-   * checkout opens with Vipps preselected, as before.
+   * 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.
    */
   onVipps() {
-    if (this.itemCount === 0) return;
+    if (!this.payable) return;
     const firstSponsorId = [...this.carts.keys()][0];
     if (firstSponsorId === void 0) return;
-    const redirect = beginPaymentRedirect({ method: "vipps", sponsorId: firstSponsorId, source: "cart" });
-    void this.startVippsExpressOrCheckout(firstSponsorId, redirect);
-  }
-  /** Vipps' own button when its script answers; our orange one otherwise. */
-  async loadVippsButton() {
-    this.vippsOfficial = await ensureVippsButton();
-  }
-  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.dispatchEvent(
       new CustomEvent("vio:checkout-open", {
         bubbles: true,
         composed: true,
-        detail: { sponsorId, paymentMethod: "vipps", express: false, ...sponsorDetail(sponsorId) }
+        detail: { sponsorId: firstSponsorId, paymentMethod: "vipps", express: false, ...sponsorDetail(firstSponsorId) }
       })
     );
   }
+  /** Vipps' own button when its script answers; our orange one otherwise. */
+  async loadVippsButton() {
+    this.vippsOfficial = await ensureVippsButton();
+  }
   /** Stripe — opens the checkout with Stripe preselected. */
   onStripe() {
-    if (this.itemCount === 0) return;
+    if (!this.payable) return;
     const firstSponsorId = [...this.carts.keys()][0];
     if (firstSponsorId === void 0) return;
     this.dispatchEvent(
@@ -4190,6 +5335,10 @@ var VioCart = class extends LitElement {
   sponsorLabel(cart) {
     return resolveSponsorIdentity(cart.sponsorId)?.name || cart.sponsorName || "";
   }
+  /** Something to pay for: lines, and a total above 0. No button opens a checkout or a payment otherwise. */
+  get payable() {
+    return this.itemCount > 0 && this.totalAcrossSponsors > 0;
+  }
   get totalAcrossSponsors() {
     let sum = 0;
     for (const cart of this.carts.values()) {
@@ -4197,6 +5346,24 @@ var VioCart = class extends LitElement {
     }
     return sum;
   }
+  /**
+   * Shipping across the carts, from what the server cart says of its lines:
+   * the rate chosen for them, else the cheapest one offered (the one the
+   * checkout preselects). null when some cart has no known rate — the footer
+   * says it is worked out in the checkout then.
+   */
+  get shippingAcrossSponsors() {
+    let sum = 0;
+    let any = false;
+    for (const cart of this.carts.values()) {
+      if (cart.items.length === 0) continue;
+      const rate = cartShipping(cart.items, cart.currency);
+      if (rate === null) return null;
+      sum += rate;
+      any = true;
+    }
+    return any ? sum : null;
+  }
   get primaryCurrency() {
     for (const cart of this.carts.values()) return cart.currency;
     return "NOK";
@@ -4288,13 +5455,16 @@ var VioCart = class extends LitElement {
                     ${formatPrice(this.totalAcrossSponsors, this.primaryCurrency)}
                   </span>
                 </div>
+                ${this.renderShippingRows()}
                 <button
                   class="checkout-btn"
                   @click=${this.onCheckout}
+                  ?disabled=${!this.payable}
                   aria-label="Til kassen"
                 >
                   Til kassen
                 </button>
+                ${this.methodsPending ? html`<div class="methods-pending" role="status" aria-label="Laster betalingsmåter"></div>` : ""}
                 ${this.methodEnabled("apple-pay") && this.applePayAvailable ? html`
                       <button
                         class="applepay-btn"
@@ -4355,6 +5525,20 @@ var VioCart = class extends LitElement {
       </aside>
     `;
   }
+  /** «Frakt» (the chosen or cheapest rate) and «Totalt» with it; «Beregnes i kassen» when unknown. */
+  renderShippingRows() {
+    const shipping = this.shippingAcrossSponsors;
+    return html`
+      <div class="shipping-row" part="cart-shipping">
+        <span class="subtotal-label">Frakt</span>
+        <span>${shipping === null ? "Beregnes i kassen" : shipping <= 0 ? "Gratis" : formatPrice(shipping, this.primaryCurrency)}</span>
+      </div>
+      ${shipping !== null ? html`<div class="total-row" part="cart-total">
+            <span>Totalt</span>
+            <span>${formatPrice(this.totalAcrossSponsors + shipping, this.primaryCurrency)}</span>
+          </div>` : ""}
+    `;
+  }
   renderConfirmation() {
     const o = this.confirmedOrder;
     if (!o) return html``;
@@ -4406,6 +5590,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], VioCart.prototype, "availableMethods", 2);
+__decorateClass([
+  state()
+], VioCart.prototype, "methodsLoading", 2);
 __decorateClass([
   state()
 ], VioCart.prototype, "vippsOfficial", 2);
@@ -4447,6 +5634,8 @@ function errorText(err) {
 var STRIPE_LOGO_SRC3 = "data:image/svg+xml;utf8," + encodeURIComponent(
   '<svg width="360" height="150" viewBox="0 0 360 150" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M360 77.4001C360 51.8001 347.6 31.6001 323.9 31.6001C300.1 31.6001 285.7 51.8001 285.7 77.2001C285.7 107.3 302.7 122.5 327.1 122.5C339 122.5 348 119.8 354.8 116V96.0001C348 99.4001 340.2 101.5 330.3 101.5C320.6 101.5 312 98.1001 310.9 86.3001H359.8C359.8 85.0001 360 79.8001 360 77.4001ZM310.6 67.9001C310.6 56.6001 317.5 51.9001 323.8 51.9001C329.9 51.9001 336.4 56.6001 336.4 67.9001H310.6Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M247.1 31.6001C237.3 31.6001 231 36.2001 227.5 39.4001L226.2 33.2001H204.2V149.8L229.2 144.5L229.3 116.2C232.9 118.8 238.2 122.5 247 122.5C264.9 122.5 281.2 108.1 281.2 76.4001C281.1 47.4001 264.6 31.6001 247.1 31.6001ZM241.1 100.5C235.2 100.5 231.7 98.4001 229.3 95.8001L229.2 58.7001C231.8 55.8001 235.4 53.8001 241.1 53.8001C250.2 53.8001 256.5 64.0001 256.5 77.1001C256.5 90.5001 250.3 100.5 241.1 100.5Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M169.8 25.7L194.9 20.3V0L169.8 5.3V25.7Z" fill="#533AFD"/><path d="M194.9 33.3H169.8V120.8H194.9V33.3Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M142.9 40.7L141.3 33.3H119.7V120.8H144.7V61.5C150.6 53.8 160.6 55.2 163.7 56.3V33.3C160.5 32.1 148.8 29.9 142.9 40.7Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M92.8999 11.6001L68.4999 16.8001L68.3999 96.9001C68.3999 111.7 79.4999 122.6 94.2999 122.6C102.5 122.6 108.5 121.1 111.8 119.3V99.0001C108.6 100.3 92.7999 104.9 92.7999 90.1001V54.6001H111.8V33.3001H92.7999L92.8999 11.6001Z" fill="#533AFD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M25.3 58.7001C25.3 54.8001 28.5 53.3001 33.8 53.3001C41.4 53.3001 51 55.6001 58.6 59.7001V36.2001C50.3 32.9001 42.1 31.6001 33.8 31.6001C13.5 31.6001 0 42.2001 0 59.9001C0 87.5001 38 83.1001 38 95.0001C38 99.6001 34 101.1 28.4 101.1C20.1 101.1 9.5 97.7001 1.1 93.1001V116.9C10.4 120.9 19.8 122.6 28.4 122.6C49.2 122.6 63.5 112.3 63.5 94.4001C63.4 64.6001 25.3 69.9001 25.3 58.7001Z" fill="#533AFD"/></svg>'
 );
+var EMPTY_CART_MESSAGE2 = "Handlekurven er tom.";
+var SHIPPING_NOT_SAVED_MESSAGE = "Kunne ikke lagre fraktmetoden. Pr\xF8v igjen.";
 var _VioCheckout = class _VioCheckout extends LitElement {
   constructor() {
     super(...arguments);
@@ -4552,6 +5741,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       firstName: "",
       lastName: "",
       email: "",
+      phone: "",
       address: "",
       postalCode: "",
       city: ""
@@ -4912,6 +6102,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       transition: border-color 0.15s;
     }
     .field input:focus { border-bottom-color: var(--vio-color-text, #0a0a0a); }
+    .field input[aria-invalid='true'] { border-bottom-color: var(--vio-color-accent, #c14a3b); }
+    .field-error { margin-top: 4px; font-size: 12px; color: var(--vio-color-accent, #c14a3b); }
 
     .payment-grid {
       display: grid;
@@ -5600,7 +6792,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         this.cleanReturnQueryParams(["checkout_id", "payment_processor"]);
         return;
       }
-      if (vioMethod === "klarna" && typeof sessionStorage !== "undefined" && sessionStorage.getItem("vio.klarna.pending.v1")) {
+      if (vioMethod === "klarna" && storageGet("session", "vio.klarna.pending.v1")) {
         this.cleanReturnQueryParams(["vio_payment", "vio_method", "vio_sponsor", "checkout_id"]);
         return;
       }
@@ -5766,6 +6958,9 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     if (changed.has("open") && this.open) {
       this.autoSelectSoleMethod();
     }
+    if (changed.has("open") && this.open && this.checkoutState?.sponsorId && !this.orderConfirmed) {
+      void Vio.cart.refreshFromServer(this.checkoutState.sponsorId);
+    }
     if ((changed.has("klarnaAvailable") && this.klarnaAvailable || changed.has("applePayAvailable") && this.applePayAvailable) && this.paymentMethodsResolved && !this.checkoutState?.paymentMethod) {
       this.autoSelectAttempted = false;
       this.autoSelectSoleMethod();
@@ -5864,12 +7059,34 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       (i) => Array.isArray(i.availableShippings) && i.availableShippings.length > 0
     );
   }
-  /** Whether all mandatory Leveringsadresse fields are filled. */
+  /** The shipping country the mobile's calling code defaults to (no +prefix typed). */
+  get phoneCountry() {
+    return String(this.form.country || getGlobalCountryCode());
+  }
+  /**
+   * The mobile is required only for the standard Vipps payment — shopcart
+   * does not ask Vipps for the profile there. Every other method takes it
+   * when given and never waits for it (a host that pre-fills the form with
+   * `setAddress()` and no phone keeps working).
+   */
+  get phoneRequired() {
+    return this.checkoutState?.paymentMethod === "vipps";
+  }
+  /** A number typed that is not usable (nothing said while the field is empty). */
+  get phoneError() {
+    const raw = String(this.form.phone ?? "").trim();
+    return raw.length > 0 && !isValidPhone(raw, this.phoneCountry);
+  }
+  /** The mobile as the chosen method needs it: valid when required, else anything. */
+  get phoneReady() {
+    return !this.phoneRequired || isValidPhone(this.form.phone, this.phoneCountry);
+  }
+  /** Whether all mandatory Leveringsadresse fields are filled (the mobile only for Vipps). */
   get isAddressValid() {
     const f = this.form;
     if (!f) return false;
     return Boolean(
-      f.firstName && String(f.firstName).trim().length > 0 && f.lastName && String(f.lastName).trim().length > 0 && f.email && String(f.email).trim().length > 0 && String(f.email).includes("@") && f.address && String(f.address).trim().length > 0 && f.postalCode && String(f.postalCode).trim().length > 0 && f.city && String(f.city).trim().length > 0
+      f.firstName && String(f.firstName).trim().length > 0 && f.lastName && String(f.lastName).trim().length > 0 && f.email && String(f.email).trim().length > 0 && String(f.email).includes("@") && f.address && String(f.address).trim().length > 0 && f.postalCode && String(f.postalCode).trim().length > 0 && f.city && String(f.city).trim().length > 0 && this.phoneReady
     );
   }
   /** Whether a valid shipping option is selected (when shippings exist). */
@@ -6109,21 +7326,44 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     });
   }
   /**
-   * Vipps from the checkout: Express when the channel allows it, so the
-   * shopper picks the delivery inside the app — our rate on the cart is the
-   * one preselected there — and never silently keeps the default our form
-   * chose for them. When the cart cannot have Express (several suppliers)
-   * the backend says so without creating a payment, and the plain payment
-   * follows: profile shared, the rate already on the cart.
+   * Vipps from the checkout: the STANDARD payment, always (Mote & Livsstil,
+   * 2026-10-28). The shopper filled our form — name, address, mobile — and
+   * chose the delivery with its price here; the payment carries that address
+   * and the rate on the cart, and Vipps only approves and pays. Express (the
+   * app filling in name and address) is the product detail's «Kjøp nå med
+   * Vipps» alone, even when the brand has Express on.
    */
   async startVippsFromCheckout() {
     const sponsorId = this.checkoutState?.sponsorId;
-    const express = await Vio.checkout.getVippsExpressEnabled(sponsorId);
-    if (express) {
-      const res = await Vio.checkout.startVippsPayment(sponsorId, this.form, { express: true });
-      if (res?.payment_url) return;
+    await Vio.checkout.startVippsPayment(sponsorId, this.form, { express: false });
+  }
+  /**
+   * The chosen delivery on the cart before a hosted payment is minted (its
+   * total depends on it). False — and the payment must not start — when it
+   * could not be saved: the selected rate has no supplier to save it under,
+   * or the backend refused. A cart with no rates at all has nothing to save.
+   */
+  async persistSelectedShipping(method) {
+    if (this.availableShippingsList.length === 0) return true;
+    const selectedOpt = this.shippingList.find((s) => s.id === this.selectedShipping);
+    if (!selectedOpt?.supplierId) {
+      if (typeof console !== "undefined") {
+        console.warn(`[VioCheckout] no supplier for the selected shipping \u2014 ${method} not started`);
+      }
+      return false;
+    }
+    try {
+      const updated = await Vio.checkout.updateShippingsBySupplier(
+        [{ shipping_id: selectedOpt.id, supplier_id: Number(selectedOpt.supplierId) }],
+        this.checkoutState?.sponsorId
+      );
+      return updated != null;
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn(`[VioCheckout] updateShippingsBySupplier on ${method} pay failed:`, err);
+      }
+      return false;
     }
-    await Vio.checkout.startVippsPayment(sponsorId, this.form);
   }
   async onApplePay() {
     if (this.applePayInProgress) return;
@@ -6142,6 +7382,10 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     if (this.shippingBlocked) return;
     this.paymentError = null;
     this.paymentNotice = null;
+    if (!this.cartPayable) {
+      this.paymentError = EMPTY_CART_MESSAGE2;
+      return;
+    }
     if (method === "apple-pay") {
       void this.onApplePay();
       return;
@@ -6162,8 +7406,9 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       Vio.checkout.selectPaymentMethod("nexi");
       return;
     }
-    if (method !== "vipps") {
-      const missing = !this.isAddressValid ? "Vennligst fyll ut alle feltene i leveringsadresse." : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode." : null;
+    {
+      const phoneMissing = method === "vipps" && !isValidPhone(this.form.phone, this.phoneCountry);
+      const missing = !this.isAddressValid || phoneMissing ? "Vennligst fyll ut alle feltene i leveringsadresse." : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode." : null;
       if (missing) {
         if (this.checkoutState?.paymentMethod !== method) {
           Vio.checkout.selectPaymentMethod(method);
@@ -6187,20 +7432,12 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         this.stripeRequested = true;
         return;
       }
-      const selectedOpt = this.shippingList.find((s) => s.id === this.selectedShipping);
-      if (selectedOpt?.supplierId) {
-        try {
-          await Vio.checkout.updateShippingsBySupplier(
-            [{ shipping_id: selectedOpt.id, supplier_id: Number(selectedOpt.supplierId) }],
-            this.checkoutState?.sponsorId
-          );
-        } catch (err) {
-          if (typeof console !== "undefined") {
-            console.warn("[VioCheckout] updateShippingsBySupplier on stripe pay failed:", err);
-          }
-        }
-      }
       this.stripeLoading = true;
+      if (!await this.persistSelectedShipping("stripe")) {
+        this.stripeLoading = false;
+        this.paymentError = SHIPPING_NOT_SAVED_MESSAGE;
+        return;
+      }
       void Vio.checkout.startStripePayment(this.checkoutState?.sponsorId, this.form).catch((err) => {
         if (typeof console !== "undefined") {
           console.warn("[VioCheckout] Stripe payment could not start:", err);
@@ -6212,6 +7449,11 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     }
     if (method === "vipps") {
       this.vippsLoading = true;
+      if (!await this.persistSelectedShipping("vipps")) {
+        this.vippsLoading = false;
+        this.paymentError = SHIPPING_NOT_SAVED_MESSAGE;
+        return;
+      }
       const redirect = beginPaymentRedirect({ method: "vipps", sponsorId: this.checkoutState?.sponsorId, source: "checkout" });
       void this.startVippsFromCheckout().catch((err) => {
         if (typeof console !== "undefined") {
@@ -6233,7 +7475,11 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     const s = this.checkoutState;
     if (!s || !s.paymentMethod) return;
     if (this.shippingBlocked) return;
-    if (s.paymentMethod !== "vipps" && !this.isAddressValid) {
+    if (!this.cartPayable) {
+      this.paymentError = EMPTY_CART_MESSAGE2;
+      return;
+    }
+    if (!this.isAddressValid) {
       this.paymentError = "Vennligst fyll ut alle feltene i leveringsadresse.";
       return;
     }
@@ -6458,6 +7704,14 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     return method === "apple-pay" || method === "klarna" || isEmbeddedMethod(method ?? "") || // Adyen's Drop-in brings its own Pay button.
     isFormFirstWidgetMethod(method ?? "");
   }
+  /**
+   * A total above 0 — every pay button needs it. The state's subtotal follows
+   * the cart (CheckoutManager.onCartChange): a cart emptied or paid in
+   * another tab drops it to 0 here.
+   */
+  get cartPayable() {
+    return (this.checkoutState?.subtotal ?? 0) > 0;
+  }
   orderTotal() {
     const s = this.checkoutState;
     if (!s) return "";
@@ -7603,7 +8857,6 @@ var _VioCheckout = class _VioCheckout extends LitElement {
   renderCheckoutBody() {
     const method = this.checkoutState?.paymentMethod;
     const showCompleteCta = !!method && !this.isExpressMethod(method);
-    const isVipps = method === "vipps";
     const needsOurForm = !!method && !collectsOwnAddress(method);
     return html`
           ${needsOurForm ? html`
@@ -7642,6 +8895,22 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                 @input=${(e) => this.onFieldChange("email", e.target.value)}
               />
             </div>
+            <div class="field">
+              <label for="vio-checkout-phone">${this.phoneRequired ? "Mobilnummer *" : "Mobilnummer (valgfritt)"}</label>
+              <input
+                id="vio-checkout-phone"
+                class="phone-input"
+                type="tel"
+                ?required=${this.phoneRequired}
+                inputmode="tel"
+                autocomplete="tel"
+                placeholder=${this.phoneCountry.toUpperCase() === "NO" ? "8 siffer" : "+46 70 123 45 67"}
+                aria-invalid=${this.phoneError ? "true" : "false"}
+                .value=${this.form.phone ?? ""}
+                @input=${(e) => this.onFieldChange("phone", e.target.value)}
+              />
+              ${this.phoneError ? html`<div class="field-error" role="alert">Skriv et gyldig mobilnummer (med landskode, f.eks. +46, hvis det ikke er norsk)</div>` : ""}
+            </div>
             <div class="field">
               <label>Adresse *</label>
               <input
@@ -7706,22 +8975,6 @@ var _VioCheckout = class _VioCheckout extends LitElement {
           </section>
           ` : ""}
 
-          ${isVipps ? html`
-                <section class="section">
-                  <div class="section-label">Kontakt</div>
-                  <div class="field">
-                    <label>E-post * <span style="font-weight:400;opacity:0.6">(for kvittering — adresse fylles ut i Vipps)</span></label>
-                    <input
-                      type="email"
-                      required
-                      autocomplete="email"
-                      .value=${this.form.email}
-                      @input=${(e) => this.onFieldChange("email", e.target.value)}
-                    />
-                  </div>
-                </section>
-              ` : ""}
-
           <section class="section">
             <div class="section-label">
               ${needsOurForm ? "Steg 2" : "Betaling"}
@@ -7761,7 +9014,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                         <button
                           class="payment-btn primary complete-cta"
                           @click=${() => void this.onPay("stripe")}
-                          ?disabled=${this.stripeLoading || !this.isAddressValid || !this.hasSelectedShipping}
+                          ?disabled=${this.stripeLoading || !this.cartPayable || !this.isAddressValid || !this.hasSelectedShipping}
                           title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
                         >
                           ${this.stripeLoading ? "G\xE5r til Stripe\u2026" : `Betal ${this.payTotalLabel()} med Stripe`}
@@ -7771,7 +9024,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                         <button
                           class="payment-btn primary complete-cta"
                           @click=${() => void this.onPay("vipps")}
-                          ?disabled=${this.vippsLoading}
+                          ?disabled=${this.vippsLoading || !this.cartPayable || !this.isAddressValid || !this.hasSelectedShipping}
+                          title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
                         >
                           ${this.vippsLoading ? "G\xE5r til Vipps\u2026" : `Betal ${this.payTotalLabel()} med Vipps`}
                         </button>
@@ -7780,7 +9034,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                         <button
                           class="payment-btn primary complete-cta"
                           @click=${() => void this.onPay("apple-pay")}
-                          ?disabled=${this.applePayInProgress || !this.isAddressValid || !this.hasSelectedShipping}
+                          ?disabled=${this.applePayInProgress || !this.cartPayable || !this.isAddressValid || !this.hasSelectedShipping}
                           title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
                         >
                           ${this.applePayInProgress ? "\xC5pner\u2026" : `Betal ${this.payTotalLabel()} med Apple Pay`}
@@ -7790,7 +9044,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                         <button
                           class="payment-btn primary complete-cta"
                           @click=${this.onCompleteOrder}
-                          ?disabled=${!this.isAddressValid || !this.hasSelectedShipping}
+                          ?disabled=${!this.cartPayable || !this.isAddressValid || !this.hasSelectedShipping}
                           title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
                         >
                           Betal ${this.payTotalLabel()} med ${this.methodLabel(method ?? null)}
@@ -8099,5 +9353,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-Q2NALS7P.js.map
-//# sourceMappingURL=chunk-Q2NALS7P.js.map
+//# sourceMappingURL=chunk-C5Q6W4B2.js.map
+//# sourceMappingURL=chunk-C5Q6W4B2.js.map