@vio-live/web-sdk 0.28.0 → 0.32.0

package/CHANGELOG.md

@@ -14,9 +14,250 @@ How to keep this file: see [CONTRIBUTING → Changelog](CONTRIBUTING.md#changelo
 The details of each feature live in the [README](README.md); this file says *what*
 and *when*, and links there.
 
-## Unreleased
+## 0.32.0 — 2026-10-28
 
-Nothing yet.
+> First version published to npm since 0.29.0: **0.30.0 and 0.31.0 were never published on their own** — their
+> changes (below) ship in this version too. A host on 0.29.0 should read the three sections.
+
+### Added
+- **Options for the product detail** (README → *Options of the detail and the product cards*):
+  `gallery="carousel"` (every photo in one swipeable row with dots, no thumbnails),
+  `description-mode` (`preview` · `folded` · `open`), `highlights`, `delivery-time`,
+  `carrier-logos`; theme keys `detailGallery`, `detailCarouselPeek`, `detailDescriptionMode`,
+  `detailDescriptionPreviewLines`, `detailHighlightsDisplay`, `detailShippingReturnsDisplay`.
+- **The brand's promises** under the buy zone (icon, title, line of text — up to three), from the
+  sponsor block's `highlights` (dashboard Settings → Brand) unless the host passes its own.
+- **«Frakt & retur»** fold after «Beskrivelse»: one row per carrier (its logo from Commerce's
+  `logo_url`, or `carrier-logos`, or a line icon by the kind of delivery), how it delivers, the
+  price; the delivery time the brand wrote on the rate («Leveringstid 1-5 dager»); the right of
+  withdrawal and the brand's pages.
+- **Product cards:** `<vio-product-carousel layout="list">` (one under the other),
+  `show-description` / `descriptions` (the catalogue's text or the editor's own per product),
+  `button-style` (`icon` · `bar` · `hidden`) and `button-label` (the Vev card's «Kjøp» bar); card
+  look through theme keys `card*` and `--vio-card-*`.
+- `commerce.channel.product.getShippingRates` returns each rate's `description` and `logoUrl`.
+
+### Changed
+- **The detail's order is the same on every screen**: sizes first in the buy zone, «Frakt fra …»
+  under them, stock on the name's line, «Beskrivelse» at the very bottom. The buy zone no longer
+  pins itself on desktop (`detailBuyPosition: 'sticky'` brings that back).
+- **«Beskrivelse» shows a preview** (the first three lines and «Les mer») instead of being folded
+  shut. `description-mode="folded"` keeps the old behaviour.
+- **The sheets close with a pull down from anywhere** while their content is at the top, not only
+  from the grab bar or the top bar (detail, cart, checkout).
+
+### ⚠️ Upgrade notes
+- Rates are asked with `logo_url`; a gateway without the field is asked again without it once
+  (and not again on that page), so the rates never go missing over a logo.
+- A host that styled `details.description-block` for «Beskrivelse» now gets
+  `.description-preview` (`part="description"` unchanged).
+
+## 0.31.0 — 2026-10-28
+
+### Added
+- **Delivery and returns under the price in the product detail.** It reads «Frakt fra X · 14
+  dagers angrerett», where X is the product's cheapest shipping rate for the page's market (the
+  same `product_shipping` rates the backend cart offers). A cheapest rate of 0 reads «Gratis frakt».
+  With no known rate, only «14 dagers angrerett» is shown (`part="delivery-note"`). The rates come
+  from a separate query (`commerce.channel.product.getShippingRates`), so a failure there only
+  loses this line.
+- **The cart drawer shows shipping and the total including it.** It uses the rate chosen on the
+  server cart, or the cheapest rate offered. Without a known rate it reads «Frakt: Beregnes i
+  kassen» and shows no total (`part="cart-shipping"`, `part="cart-total"`).
+- **«Lagt i handlekurven» after «Legg i handlekurv».** The detail closes and a small toast offers
+  **«Til kassen»** and **«Fortsett å handle»** (`part="added-toast"`). «Til kassen» dispatches
+  `vio:checkout-open` for that brand, the same event the cart's «Til kassen» sends. It does nothing
+  when the cart was emptied in the meantime. The toast closes by itself after 8 s.
+- **A line under «Kjøp nå med Vipps» in the product detail:** «Vipps fyller inn navn og adresse –
+  du godkjenner og betaler i appen» (`part="vipps-note"`). It is shown only when that button goes
+  straight to the app: Express is on for the brand and the brand's cart is empty. In other cases
+  the button opens the checkout first.
+### Changed
+- **The product detail no longer picks a size for the shopper.** Only an option with a single
+  value is preselected. The chosen value is shown beside the option's name («Størrelse: M») and
+  on its pill. Every buy button (Vipps, «Legg i handlekurv», «Kjøp nå», Stripe, Klarna, Apple Pay)
+  checks for a missing choice first: it shows «Velg størrelse» (or «Velg farge», etc.) and adds or
+  pays nothing. «Få igjen — N stk» now counts only the variant actually chosen. Before a size is
+  chosen it says «På lager» if any size is in stock.
+- **Two Vipps paths.** The product detail's «Kjøp nå med Vipps» stays **Express**. The
+  **cart's** Vipps button now opens the checkout with Vipps preselected. It no longer starts
+  Express or hands over to Vipps. **The checkout's Vipps is always the standard payment**, even
+  when the brand has Express on:
+  - the address form, the delivery and its price are required before paying, as for Stripe;
+  - the summary counts our shipping rate, so «Velges i Vipps» is gone;
+  - the payment is `startVippsPayment(sponsorId, form, { express: false })`, which now puts the
+    form's complete address on the checkout's shipping and billing address.
+
+  `COLLECTS_OWN_ADDRESS` no longer lists Vipps. See
+  [README → Two Vipps paths](README.md#the-hand-over-to-vipps-028).
+- **«Mobilnummer» in the checkout's address form.** It is required only for the standard Vipps
+  payment, and optional for every other method; it never blocks their buttons or widgets.
+  - It accepts any market's number. A `+`/`00` prefix sets the calling code; without one, the
+    shipping country does (NO 47, SE 46, DK 45, FI 358, DE 49, GB 44…), falling back to the
+    page's country. A trunk 0 is dropped.
+  - A number that cannot be read shows «Skriv et gyldig mobilnummer…».
+  - It is sent as `phone` (national digits) + `phone_code` (digits, no plus) on the shipping and
+    billing address of every method that takes our form. `CheckoutAddress.phone` is new.
+- **The checkout's Vipps refuses to start without the delivery saved.** If the chosen rate cannot
+  be saved on the cart, the Vipps or Stripe-link payment does not start and the checkout says
+  «Kunne ikke lagre fraktmetoden. Prøv igjen.». This covers a failed save and a rate without a
+  supplier. `startVippsPayment(…, { express: false })` also throws before creating anything when
+  the address is incomplete or has no usable mobile.
+
+### Fixed
+- **«Velg størrelse» no mueve las tallas.** El aviso sale en la misma línea que el nombre de la opción, así que tocar comprar sin talla ya no desplaza los botones bajo el dedo.
+- **No checkout and no payment for an empty cart or a total of 0 kr.** `Vio.checkout.open()`
+  throws for a cart that totals 0, as it already did for an empty one. Vipps (`startVippsPayment`,
+  `startVippsExpress`), the Stripe link, native Stripe and Adyen read the cart from the server and
+  refuse to create a checkout or a payment when it is empty or 0 kr. The buttons check the same
+  thing first: the cart's «Til kassen» is disabled, the checkout's pay buttons are disabled and
+  say «Handlekurven er tom.», and the detail shows no Vipps or Apple Pay button for a product at 0 kr.
+- **Desktop: the product detail's pinned buy bar no longer covers the size picker.** The option
+  pickers now sit at the top of the buy zone (`part="buy-options"`), so they move with the
+  buttons whether the zone is static or sticky.
+- **No buttons for payment methods the brand does not have while its methods load.** The
+  product detail and the cart drawer show a neutral placeholder (`part="buy-pending"` /
+  `.methods-pending`) until `getAvailablePaymentMethods` answers. They used to show every method,
+  so a Vipps-only brand flashed Stripe and Klarna. «Legg i handlekurv» and «Til kassen» are there
+  from the start. A failed lookup still shows every button, as before.
+- **Storage never blocks add to cart or checkout (in-app browsers, private modes).** Every read
+  and write of `localStorage`/`sessionStorage` goes through one guard, `src/core/safe-storage.ts`.
+  A storage property that throws on access, a `null` storage or a refused write now falls back to
+  the page's memory. This covers the cart, the customer session id, the market's
+  currency/country/locale and the Klarna return. Before, `typeof localStorage` outside a `try`
+  could throw while the SDK started. Without storage, every browser also sent the same customer
+  session id, `cs_session_default`. It is now one id per page.
+
+### ⚠️ Upgrade notes
+- The detail's buy buttons stay enabled before a size is chosen. Tapping one shows the prompt
+  instead of buying. A host that clicks `.add-to-cart` from a script needs a value in every option
+  first.
+- A host's `vio:checkout-open` handler that calls `Vio.checkout.open()` must still catch the throw
+  (it already threw for an empty cart). It now also throws for a cart of 0 kr.
+- Host CSS that placed `::part(option-group)` relative to `::part(buy)` should be checked: the
+  option groups are now inside `buy`.
+- A host that already answers `vio:added-to-cart` with its own UI (for example, opening its cart
+  drawer) can turn the new toast off with `<vio-product-detail no-added-toast>`. The toast's
+  «Til kassen» relies on the host's `vio:checkout-open` handler, like the cart's does.
+- **Backend (shopcart):** the checkout's Vipps payment is now `express: false` with the address
+  already on the checkout. shopcart must not request the Vipps profile on these standard
+  payments, and must carry the address `phone`/`phone_code` through to the order. Until that is
+  deployed, check a QA order to confirm the phone arrives.
+- Hosts that pre-fill the checkout form through `Vio.checkout.setAddress()` should include
+  `phone`, or the shopper has to type it when paying with Vipps. Other methods do not need it.
+- **The cart's Vipps button now opens the checkout through `vio:checkout-open`**, with
+  `paymentMethod: 'vipps'`. A host without a handler for that event loses direct Vipps from the
+  cart. The `vio:payment-redirect-*` events with `source: 'cart'` are gone; those with
+  `'detail'` and `'checkout'` remain.
+- **`startVippsPayment(sponsorId, form, { express: false })` writes the full address**, including
+  the mobile, to the checkout's shipping and billing address before it creates the payment.
+  Without the flag, or with `express: true`, nothing changes.
+- `Vio.checkout.open()` throws on a cart that totals 0, as well as on an empty one.
+- The «Lagt i handlekurven» toast is on by default. Use `<vio-product-detail no-added-toast>` to
+  turn it off.
+
+## 0.30.0 — 2026-10-27
+
+### Added
+- **Internal traffic** (ADR-0041): opening any page with **`?vio_internal=1`** marks the browser
+  (`localStorage`, `vio.internal.v1`) and `?vio_internal=0` clears it; read once at `Vio.init()`.
+  While marked, every analytics event carries **`client.internal: true`** and the collector's
+  reads leave it out. **`Vio.analytics.setInternal(boolean)`** / `Vio.analytics.isInternal` for
+  hosts; one `console.info` when marked. See
+  [README → Internal traffic](README.md#internal-traffic--mark-your-browser-as-a-tester-unreleased).
+
+### Changed
+- **Stripe.js (~300 KB) is downloaded only for a brand that uses Stripe.** It used to load on
+  every page as soon as the SDK started, to have Apple Pay ready. Now it loads when the brand's
+  payment methods come back with a Stripe key (or when the host passes `stripePublishableKey`
+  to `Vio.init`). A brand that only takes Vipps never downloads it. Apple Pay still has it before
+  the tap: its button waits for the same key.
+- **`component_impression` of `<vio-product-carousel>` carries `commerce.items`** — the products
+  shown, like its `view_item_list` — so the collector can count per-product impressions
+  (ADR-0041). The impression is observed once the products have loaded (the 1 s dwell starts
+  then); a failed fetch still counts it, without items. `Vio.analytics.observeImpression()` takes
+  a `commerce` getter, read when the impression fires. See
+  [README → Impressions carry the products shown](README.md#impressions-carry-the-products-shown-unreleased).
+- Events never carry more than 100 `commerce.items` (the collector rejects the whole event above
+  its cap).
+
+### ⚠️ Upgrade notes
+- `client.internal` needs the collector that knows the field; an older one strips it (the event is
+  kept, just not marked). Nothing to do on the host.
+
+## 0.29.0 — 2026-10-24
+
+### Added
+- **`vio:cart-updated`** on `document` — `{ sponsorId, cartId, items, itemCount, subtotal, currency, source }`,
+  `source: 'server'` when the cart was just read from the server (right before a checkout is
+  created or a payment link minted, and when the drawer or the checkout opens), `'storage'` when
+  another tab of the site changed it. For hosts that draw their own cart or badge.
+  `Vio.cart.refreshFromServer(sponsorId)` asks on demand. See
+  [README → What the shopper pays is what the page shows](README.md#what-the-shopper-pays-is-what-the-page-shows--the-cart-the-server-the-other-tabs).
+- **`add_payment_info`** (analytics, GA4 name) the moment a backend checkout exists for a payment
+  — Vipps from the detail, the cart or the checkout, a Stripe payment link or Element, Klarna,
+  Apple Pay, Nexi, Kustom, Qliro, Walley, Adyen — with `commerce.checkout_id`, `payment_method`,
+  the cart's lines and the same context as `begin_checkout` (per campaign like it). Once per
+  checkout per page load, none when the checkout could not be created, and by beacon BEFORE the
+  page leaves for Vipps or a Stripe link. It is how a paid order whose `purchase` never came back
+  keeps its session, page and slot (ADR-0039; order 4128, 2026-10-23). The checkout manager
+  announces it on `window` as **`vio:checkout-created`** `{ sponsorId, checkoutId, paymentMethod,
+  campaignId?, redirect }`. See [README → `add_payment_info`](README.md#add_payment_info--the-checkout-linked-to-this-session-0290).
+
+### Changed
+- **«Kjøp nå med Vipps» on the product detail goes straight to Vipps only when the cart is
+  empty.** With lines already in the cart, the product is added and the checkout opens first
+  (`vio:checkout-open`, Vipps preselected, no `vio:payment-redirect-*` events), every line and
+  the total on screen. Before, the tap paid the WHOLE cart with only the Vipps page saying so
+  (Mote & Livsstil, 2026-10-23: a jumper left in the cart 13 minutes earlier was paid along
+  with the top bought «nå»). The cart's own Vipps button is unchanged: it pays the lines it shows.
+- **Apple Pay on the product detail shows what it charges.** The sheet's amount is fixed before
+  the tap and was the product's price, while the charge was the sponsor's whole cart. The sheet
+  now opens only on an empty cart, prepared for the product × the chosen quantity (it is prepared
+  again when the quantity or variant changes); with lines already in the cart — or while the
+  sheet for a new quantity is still being prepared — the product is added and the checkout opens
+  (`vio:checkout-open` with `paymentMethod: 'apple-pay'`), where Apple Pay charges the total shown.
+
+### Fixed
+- **The lines the shopper pays for are the lines the page shows.** The checkout, and the
+  Vipps / Stripe page, are built on the backend cart — every line in it — while the drawer
+  and the checkout summary drew this tab's memory. Now the SDK reads the server's cart right
+  before a checkout is created or a payment link minted, and when `<vio-cart>` / `<vio-checkout>`
+  open, and draws that; an open checkout recomputes its lines and total when the cart changes
+  under it.
+- **Other tabs of the site are heard.** The carts are shared through `localStorage` but each
+  tab read them once, at load: a payment in one tab left the others showing — and adding to —
+  a cart that was already paid; a line added in one tab was missing from the others until a
+  reload. Now a tab adopts what another tab wrote (`storage` event), except for a sponsor it is
+  mid-add for.
+- **Vipps Express: the checkout no longer adds our shipping to the total.** The delivery is
+  chosen and paid inside Vipps, but with Vipps selected the checkout still added the seller's
+  first rate (Careless QA, 2026-10-24: «Frakt – Default Shipping» 10 kr, 1 308 kr on screen and
+  on the button, 1 298 kr in Vipps). With Vipps as the method and Express on for the seller,
+  the summary says «Frakt: Velges i Vipps» and the total and «Betal … med Vipps» are the items.
+  Vipps without Express, and every other method, still add the rate as before.
+- **The `purchase` of a paid return is sent, not left in the queue** (2026-10-24). Order 4128
+  (Careless, prod, 2026-10-23 22:40, after two abandoned trips to Vipps): the shopper
+  paid, came back, saw the confirmation, and the brand's panel never counted the sale — Commerce
+  had its `order_paid`, the collector no `purchase`. The return was read as paid; the one way the
+  code loses that purchase is the queue: it was built, with the order number, into a queue sent
+  every 5 s, and leaving the page right away (back to the Vipps app, the home screen) beaconed
+  only a purchase still waiting for its number — a phone that discards a hidden tab never runs
+  the next tick. Now the purchase is sent as soon as it is built, and when the page hides
+  everything still queued leaves by beacon.
+
+### ⚠️ Upgrade notes
+- **The collector must accept `add_payment_info`** before it is counted: one that does not know the
+  name rejects that event alone (`202` with `rejected`), the rest of the batch is kept. Nothing to
+  do in the host.
+- A host that handles `vio:checkout-open` only from the cart: the product detail now emits it
+  too when «Kjøp nå med Vipps» or Apple Pay is tapped on a non-empty cart (it already did when
+  Express was off for the seller), now also with `paymentMethod: 'apple-pay'`. Check that your
+  handler opens `<vio-checkout>` for the detail's event.
+- A host with its own cart drawer or badge: listen to `vio:cart-updated` (or `Vio.cart`'s
+  `change`) — the lines can now change without a tap in that tab.
+- One more `GetCart` per checkout creation / payment link and per opening of the drawer or the
+  checkout.
 
 ## 0.28.0 — 2026-10-22
 

package/README.md

@@ -487,11 +487,81 @@ could never be netted.
   arrives after the event left with the checkout id adds no second event. `ts`
   and `event_id` are fixed at the payment, whenever the event leaves; a purchase
   split per campaign waits once and every slice carries the same number.
+- **Sent at once.** A `purchase` does not wait for the queue's 5 s tick: it is
+  sent as soon as it is built, and when the page hides (`visibilitychange`, the
+  last thing a phone is sure to say before it discards a tab) whatever is still
+  queued leaves by beacon (0.29.0; order 4128 had been recorded and never sent).
 - **A host with its own sink** (Vev) reads the same ids from the detail with
   `purchaseIdsOf(detail)` → `{ orderId, checkoutId, orderIdKind }` (or
   `purchaseFromPaymentSuccess(detail)`, exported from `/core`), and waits for the
   number the same way through `Vio.checkout.getOrderReference(checkoutId)`.
 
+### `add_payment_info` — the checkout, linked to this session (0.29.0)
+
+The moment a backend checkout exists for a payment — Vipps (from the product
+detail, the cart or the checkout), a Stripe payment link or Element, Klarna, Apple
+Pay, Nexi, Kustom, Qliro, Walley, Adyen — the SDK emits **`add_payment_info`**
+(the GA4 name) with **`commerce.checkout_id`**, **`payment_method`**, the cart's
+lines (`items`, `value`, `currency`) and the same context as `begin_checkout`
+(sponsor, campaign, slot, content), split per campaign like it. Once per checkout
+per page load; nothing when the checkout could not be created. When the page is
+about to leave for the provider (Vipps, a Stripe payment link) it goes out by
+beacon first.
+
+Why (ADR-0039): Commerce's `order_paid` is what says a sale happened, and the
+browser's `purchase` can be missing (a closed tab, a phone that discards the page
+on the way back). The collector attributes an `order_paid` without a `purchase` to
+the session, page and slot of the `add_payment_info` with the same `checkout_id`.
+
+The checkout manager announces each checkout on `window` as
+**`vio:checkout-created`** — `{ sponsorId, checkoutId, paymentMethod, campaignId?,
+redirect }` — which is what analytics listens to; a host with its own sink can
+listen to it too. With `dataLayer: true` it is pushed as GA4's `add_payment_info`
+with `payment_type`.
+
+### Impressions carry the products shown (unreleased)
+
+`<vio-product-carousel>`'s **`component_impression`** (≥50% visible for ≥1 s, once
+per session and carousel) carries the products it shows in **`commerce.items`**
+(`product_id`, `name`, `price`) and `commerce.currency` — the same lines as its
+`view_item_list`. The collector counts the per-product "saw" step of the funnel
+from them (ADR-0041). While the products load nothing is observed: the 1 s dwell
+starts once they are on screen. A carousel whose fetch failed (slotted fallback)
+still counts its impression, without items. A host calling
+`Vio.analytics.observeImpression(el, context, { commerce: () => ({ items, currency }) })`
+does the same for its own elements: the getter is read when the impression fires.
+
+### Internal traffic — mark your browser as a tester (unreleased)
+
+Our own visits (testers, the team, agents) must not count in the dashboard. Mark
+**each browser you test with** once:
+
+1. Open any page of the site that runs the SDK with **`?vio_internal=1`** added to
+   the URL — e.g. `https://example.com/article?vio_internal=1` (or
+   `…?utm_source=x&vio_internal=1` when the URL already has a query).
+2. Open the browser's console: the SDK says once
+   `[Vio.analytics] this browser is marked as internal traffic …`.
+3. That's it. The mark is remembered in this browser (`localStorage`,
+   `vio.internal.v1`, per site) for every page and every later visit, and every
+   analytics event it sends carries **`client.internal: true`**; the collector's
+   reads leave those events out.
+
+To **undo** it, open any page with **`?vio_internal=0`**. Things to know:
+
+- The mark is per browser and per site: Safari and Chrome on the same phone, a
+  private window, or another site are marked separately. Clearing the site's data
+  clears the mark.
+- In-app browsers (Instagram, Facebook) and private windows may not keep
+  `localStorage`: there, only the page opened with `?vio_internal=1` is marked.
+  Prefer a regular browser for testing.
+- The URL is read once per page load (at `Vio.init()`), not on client-side
+  navigation.
+- The mark is the tester's own choice, not a tracking id: it is written even
+  before consent (`requireConsent`).
+- A host can mark from code: **`Vio.analytics.setInternal(true | false)`**
+  (`Vio.analytics.isInternal` reads it). `resolveInternal()` / `INTERNAL_KEY` are
+  exported from `/core`.
+
 ## Sponsor identity — name and logo
 
 The elements say **who sells**: the sponsor's (brand's) display name and logo.
@@ -623,7 +693,7 @@ or on the element (`vio-product-detail { --vio-detail-logo-height: 48px; }`).
 | `detailOptionHeight` / `detailOptionGap` | `--vio-detail-option-height` / `--vio-detail-option-gap` | `36px` / `6px` | Size / option buttons (height is also their min width) |
 | `detailOptionRadius` / `detailOptionWrap` | `--vio-detail-option-radius` / `--vio-detail-option-wrap` | `0` / `wrap` | `nowrap` = one line that scrolls sideways |
 | `detailButtonHeight` / `detailButtonRadius` | `--vio-detail-button-height` / `--vio-detail-button-radius` | `52px` / `0` | Quantity stepper and «Legg i handlekurv» |
-| `detailBuyPosition` / `detailBuyShadow` | `--vio-detail-buy-position` / `--vio-detail-buy-shadow` | phones `static`, desktop `sticky` | Whether the buy zone (Vipps, quantity, add to cart) stays at the bottom of the panel while scrolling |
+| `detailBuyPosition` / `detailBuyShadow` | `--vio-detail-buy-position` / `--vio-detail-buy-shadow` | `static` | `sticky` pins the buy zone (Vipps, quantity, add to cart) to the bottom of the panel while scrolling |
 | `cartWidth` / `checkoutWidth` | `--vio-cart-width` / `--vio-checkout-width` | `440px` | Drawer widths (desktop) |
 | `confirmLogoHeight` / `confirmTitleSize` / `confirmCheckBg` | `--vio-confirm-logo-height` / `--vio-confirm-title-size` / `--vio-confirm-check-bg` | `40px` / `24px` / green | The confirmation |
 | `redirectBg` / `redirectSpinner` | `--vio-redirect-bg` / `--vio-redirect-spinner` | translucent white / Vipps orange | The «Åpner Vipps …» overlay |
@@ -639,10 +709,14 @@ Also settable as CSS only: `--vio-detail-logo-max-width` (`220px`), `--vio-detai
 **`::part` names**, for what the properties do not cover:
 
 - `<vio-product-detail>`: `topbar`, `sponsor`, `close`, `gallery`, `image`, `thumbs`, `thumb`
-  (+ `thumb-active`), `thumbs-arrow`, `info`, `brand`, `title`, `price`, `stock`,
-  `option-group`, `option-label`, `options`, `option` (+ `option-selected`), `buy`,
-  `buy-vipps`, `quantity-row`, `add-to-cart`, `seller-note`, `seller-terms`, `seller-refund`,
-  `description`.
+  (+ `thumb-active`), `thumbs-arrow`, `info`, `brand`, `title`, `price`, `delivery-note`
+  (`delivery-shipping`, `delivery-withdrawal`), `stock`, `buy`, `buy-options`, `option-group`,
+  `option-label`, `option-chosen`, `option-prompt`, `options`, `option` (+ `option-selected`),
+  `buy-pending`, `buy-vipps`, `vipps-note`, `quantity-row`, `add-to-cart`, `seller-note`,
+  `seller-terms`, `seller-refund`, `description`, `highlights`, `highlight`, `shipping-returns`,
+  `slide`, `image-dots`, `carousel-arrow`, `added-toast` (`added-toast-checkout`,
+  `added-toast-continue`).
+- `<vio-cart>`: `cart-shipping`, `cart-total`.
 - `<vio-checkout>`: `sponsor`, `confirmation`, `confirm-title`, `confirm-sponsor`, `confirm-details`.
 
 ```css
@@ -650,14 +724,51 @@ vio-product-detail::part(add-to-cart) { letter-spacing: 0; text-transform: none;
 vio-product-detail::part(option-selected) { background: #2b2b2b; }
 ```
 
-**The detail's order:** the selling brand top left; the main image; the thumbnails;
-name, price, stock, sizes; then, **on phones**, the buy zone — **Vipps first** (when the
-channel has it), quantity + «Legg i handlekurv», then the other ways to pay, and under them
-«Du handler direkte hos {brand}.» (the product's brand, never the article's) with links to
-the brand's «Kjøpsvilkår» and «Angrerett og retur» when it gave them (the sponsor block's
-`termsUrl` / `refundPolicyUrl`, https only, opened in a new tab) — and the
-description; **on desktop**, the description first and the buy zone pinned at the bottom
-of the panel. The description folds: «Beskrivelse» opens on a tap.
+**The detail's order:** the selling brand top left; the images (thumbnails, or a carousel);
+name and stock on one line, the price; the buy zone — the sizes (none preselected; every buy
+button asks «Velg størrelse» first), «Frakt fra X · 14 dagers angrerett», **Vipps first** (when
+the channel has it), quantity + «Legg i handlekurv», the other ways to pay, and under them «Du
+handler direkte hos {brand}.» (the product's brand, never the article's) with links to the
+brand's «Kjøpsvilkår» and «Angrerett og retur» when it gave them (the sponsor block's
+`termsUrl` / `refundPolicyUrl`, https only, new tab); the brand's promises; «Beskrivelse»; and
+«Frakt & retur». The same order on every screen.
+
+### Options of the detail and the product cards (0.32)
+
+Every one is off or as before unless the host sets it: per element (attribute), or for the
+whole page through `applyVioTheme` (theme key → custom property). The element wins.
+
+**`<vio-product-detail>`**
+
+| Attribute | Theme key | Values | What |
+|---|---|---|---|
+| `gallery` | `detailGallery` | `thumbs` (default) · `carousel` | `carousel`: every photo in one swipeable row with a dot per photo, no thumbnails — less height. `detailCarouselPeek` (`--vio-detail-carousel-peek`) shows the edge of the next one |
+| `description-mode` | `detailDescriptionMode` | `preview` (default) · `folded` · `open` | «Beskrivelse»: the first lines fading out + «Les mer» (`detailDescriptionPreviewLines`, `3`); only the heading until a tap; or all of it |
+| `highlights` | — | `[{ icon, title, text }]` (JSON) | The brand's promises under the buy zone. By default the brand's own (dashboard Settings → Brand, sponsor block `highlights`); this list replaces them on the page. Icons: `plane heart shirt truck return leaf star shield mailbox home pin clock`, or an image URL. `detailHighlightsDisplay: 'none'` hides the strip |
+| `delivery-time` | — | text, e.g. `2-5 virkedager` | «Leveringstid …» in «Frakt & retur» for a brand whose rates do not say it (each rate's own text in Commerce — «Leveringstid 1-5 dager» — wins) |
+| `carrier-logos` | — | `{ "Bring": "https://…" }` (JSON) | Carrier logos by the name the rate starts with («Bring - Pakke i postkasse»), for rates without their own logo in Commerce (`logo_url`, which wins); otherwise a line icon by the kind of delivery |
+| — | `detailShippingReturnsDisplay` | `block` (default) · `none` | «Frakt & retur»: one row per carrier (logo or icon, carrier, how it delivers, price), the delivery time, the right of withdrawal and the brand's pages |
+
+The sheet closes with a pull down from its top bar, or from anywhere while its content is at the top.
+
+**`<vio-product-carousel>`** (and its cards, `<vio-product>`)
+
+| Attribute | Theme key | Values | What |
+|---|---|---|---|
+| `layout` | `carouselLayout` | `carousel` (default) · `list` | `list`: one card under the other, as wide as the column (`--vio-carousel-list-max-width`, `480px`) |
+| `show-description` | — | boolean | Each card shows its product's description (`cardDescriptionLines`, `4`) |
+| `descriptions` | — | `{ "<productId>": "text" }` (JSON) | The editor's own text for a product, over the catalogue's — shown even without `show-description`; `""` hides that one |
+| `button-style` | — | `icon` (default) · `bar` · `hidden` | The buy button: the round bag on the image, a full-width «Kjøp» bar under the price (as the Vev card), or none. Both add to the cart, or open the product when it has sizes |
+| `button-label` | — | text, default `Kjøp` | The bar's text («Kjøp · 2» once two are in the cart) |
+
+Card look, by theme key (custom property): `cardFont`, `cardBorder`, `cardImageAspect`,
+`cardImageFit`, `cardImageBg`, `cardImagePadding`, `cardMetaPadding`, `cardPriceFont`,
+`cardAccent`, `cardBarRadius`, `cardDescriptionLines`, `cardRetailerOrder` (`-1` lifts the seller
+line above the name). CSS only: `--vio-card-border-hover-color`, `--vio-card-add-size`,
+`--vio-card-add-icon-size`, `--vio-card-brand-{size,tracking,weight,color,gap}`,
+`--vio-card-name-{font,size,weight,gap}`, `--vio-card-price-{size,weight,gap}`,
+`--vio-card-retailer-{display,size,tracking,weight,color,margin}`,
+`--vio-card-description-{size,color,gap}`, `--vio-card-accent-text`.
 
 ### The hand-over to Vipps (0.28)
 
@@ -674,6 +785,57 @@ tap, so a second payment cannot start. Events on `document`:
 `source` is `'detail'`, `'cart'` or `'checkout'`. The overlay is `.vio-redirect-overlay`
 in the light DOM.
 
+**The detail's Vipps button pays the whole cart.** «Kjøp nå med Vipps» on the product
+detail adds the product to the sponsor's cart and the checkout is built on that cart —
+every line in it. It goes straight to Vipps only when the cart was **empty**; with lines
+already in it, the product is added and the checkout opens first (`vio:checkout-open`
+with `paymentMethod: 'vipps'`, no hand-over events), every line and the total on screen,
+so what the Vipps page lists is what the shopper saw.
+
+**Two Vipps paths (2026-10-28).** The detail's «Kjøp nå med Vipps» is **Express**: the app
+fills in name and address. The **cart's** Vipps button opens the checkout with Vipps
+preselected, and the checkout's Vipps is always the **standard** payment, even when the
+brand has Express on. Our form collects name, e-mail, **Mobilnummer**, address and the
+delivery with its price before paying. The mobile is required for Vipps only and accepts any
+market's number: the `+` prefix or the shipping country sets the calling code. The delivery is
+saved on the cart first; if that fails, no payment starts. The payment goes out with
+`express: false`, and the address (with `phone` + `phone_code`) is on the checkout's shipping
+and billing address. **Apple Pay on the detail follows the same
+rule**: its sheet's amount is fixed before the tap, so it opens only on an empty cart, for the
+product × the chosen quantity; otherwise the checkout opens (`paymentMethod: 'apple-pay'`).
+
+### What the shopper pays is what the page shows — the cart, the server, the other tabs
+
+The cart lives in this tab's memory and in `localStorage` (`vio.cart.v1`, one entry per
+sponsor with the backend cart id), and the checkout — and the Vipps / Stripe page — is
+built on the **backend** cart, every line of it. Three things keep the two the same:
+
+- **Before a checkout is created or a payment link minted**, and **when `<vio-cart>` or
+  `<vio-checkout>` opens**, the SDK asks the server for the cart (`GetCart`) and draws that
+  answer: a line another tab added, a cart another tab emptied. `Vio.cart.refreshFromServer(sponsorId)`
+  does the same on demand and resolves with the sponsor's cart. A `GetCart` that fails leaves
+  the cart as it was (and warns) — the checkout then goes on with the lines the last mutation
+  answered, as before.
+- **Other tabs of the site are heard.** A payment in one tab (its cart cleared) empties the
+  drawer of the others and the next add there opens a new backend cart; a line added in one
+  tab is in the others without a reload. Through the browser's `storage` event — a tab that
+  is mid-add for a sponsor keeps its own lines until its answer lands.
+- **An open checkout follows its cart**: its lines and its total are recomputed when the
+  cart changes under it (the widgets that captured an amount at mount ask to be refreshed,
+  as they already did for a changed cart).
+
+`vio:cart-updated` on `document` says when either of the first two happened:
+
+```ts
+document.addEventListener('vio:cart-updated', (e) => {
+  const { sponsorId, cartId, items, itemCount, subtotal, currency, source } = e.detail
+  // source: 'server' (GetCart, right before a checkout / on opening) | 'storage' (another tab)
+})
+```
+
+`items` are copies of the lines (`CartLineItem[]`). A host that draws its own cart or badge
+redraws it from this event; `<vio-cart>` and the badge wired to `Vio.cart`'s `change` need nothing.
+
 ## Headless / SSR
 
 The root and `/core` entries export the framework-agnostic core with **no DOM side-effects** — SSR-safe and **tree-shakeable** (importing one helper pulls only that helper, ~0.5 kB):