@salla.sa/twilight-components 2.14.589 → 2.14.591

package/dist/components/salla-conditional-offer.js

@@ -2,14 +2,14 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './salla-skeleton2.js';
-import { d as defineCustomElement$2 } from './salla-tooltip2.js';
+import { d as defineCustomElement$2 } from './salla-skeleton2.js';
 
 var DiscountType;
 (function (DiscountType) {
     DiscountType["PERCENTAGE"] = "percentage";
     DiscountType["FIXED"] = "fixed";
     DiscountType["FREE_PRODUCT"] = "free_product";
+    DiscountType["FREE_SHIPPING"] = "free_shipping";
 })(DiscountType || (DiscountType = {}));
 var OfferType;
 (function (OfferType) {
@@ -17,169 +17,2730 @@ var OfferType;
     OfferType["PRODUCT_PURCHASE"] = "order_amount";
 })(OfferType || (OfferType = {}));
 
-const sallaConditionalOfferCss = "/*!twlt*/:host{display:block}.fixed{position:fixed}.absolute{position:absolute}.-top-2{top:-0.5rem}.left-0{left:0px}.mb-1{margin-bottom:0.25rem}.flex{display:flex}.h-12{height:3rem}.w-12{width:3rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.gap-3{gap:0.75rem}.rounded-lg{border-radius:0.5rem}.object-cover{object-fit:cover}.text-start{text-align:start}.text-xs{font-size:0.75rem;line-height:1rem}.leading-tight{line-height:1.25}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-conditional-offer-container{position:relative;display:inline-flex;width:100%;flex-direction:column;align-items:center;justify-content:flex-start;gap:1.25rem;border-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:1.25rem;padding-right:1.25rem;padding-top:1rem;padding-bottom:4rem}@media (min-width: 768px){.s-conditional-offer-container{padding-left:2.5rem;padding-right:2.5rem;padding-top:2rem;padding-bottom:2rem}}.s-conditional-offer-title-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;align-self:stretch}.s-conditional-offer-title{text-align:center;font-size:1.25rem;line-height:1.75rem;font-weight:700;color:var(--color-primary-dark)}.s-conditional-offer-subtitle{display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;align-self:stretch;text-align:center;font-size:0.75rem;line-height:1rem;font-weight:400;--tw-text-opacity:1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.s-conditional-offer-subtitle i{position:relative}.s-conditional-offer-progress-line{height:1px;align-self:stretch;background-color:var(--color-primary)}.s-conditional-offer-checkpoint-border{display:flex;height:60px;min-width:60px;flex-direction:column;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.s-conditional-offer-checkpoint-border-colored{border-color:var(--color-primary);color:var(--color-primary-dark)}.s-conditional-offer-product-link{display:grid;aspect-ratio:1 / 1;height:58px;place-content:center;overflow:hidden;border-radius:9999px}.s-conditional-offer-checkpoint-image-content{height:58px;width:58px;object-fit:cover}.s-conditional-offer-progress-container{position:relative;margin-bottom:2rem;display:flex;height:8rem;width:100%;align-items:center;overflow-x:auto}@media (min-width: 768px){.s-conditional-offer-progress-container{height:4rem;overflow:visible}}.s-conditional-offer-item-avatar-content{text-align:center;font-size:0.875rem;font-weight:700;line-height:1.25rem}.s-conditional-offer-item-avatar-content.active{color:var(--color-primary-dark);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.s-conditional-offer-checkpoint{position:relative;display:flex;height:60px;width:60px;flex-shrink:0;flex-direction:column;align-items:center;justify-content:center;border-radius:9999px;border-width:1px}.s-conditional-offer-progress-line-container{display:grid;width:100%;overflow:hidden;grid-template-areas:'progress-line'}.s-conditional-offer-progress-line-inactive{height:1.5px;width:100%;--tw-bg-opacity:1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1));transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);grid-area:progress-line}.s-conditional-offer-progress-line-active{height:1.5px;width:0%;background-color:var(--color-primary);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);grid-area:progress-line}.s-conditional-offer-checkpoint-label{position:absolute;top:100%;left:50%;width:max-content;--tw-translate-x:-50%;--tw-translate-y:20%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.s-conditional-offer-checkpoint-label.active{color:var(--color-primary-dark);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.s-conditional-offer-checkpoint-label.first-checkpoint{--tw-translate-y:132%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.s-conditional-offer-checkpoint-label.first-checkpoint:where([dir=\"ltr\"],[dir=\"ltr\"] *){--tw-translate-x:0%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.s-conditional-offer-checkpoint-label.first-checkpoint:where([dir=\"rtl\"],[dir=\"rtl\"] *){--tw-translate-x:-100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.s-conditional-offer-checkpoint-container{position:relative;display:flex;align-items:center}.s-conditional-offer-active-checkpoint{display:flex;justify-content:center;border-color:var(--color-primary);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.s-conditional-offer-skeleton-inner-container{margin-bottom:2rem;width:100%}@media (min-width: 768px){.s-conditional-offer-skeleton-inner-container{margin-bottom:0px}}.s-conditional-offer-skeleton-title{margin-bottom:1rem;display:flex;justify-content:center}.s-conditional-offer-skeleton-subtitle{margin-bottom:1.5rem;display:flex;justify-content:center}.s-conditional-offer-skeleton-checkpoints-wrapper{display:flex;align-items:center}";
+/**
+ * Shared free-gift lookup for the cart.
+ *
+ * The gift feature is twilight-only: no theme passes `added-by-offer` /
+ * `free-gift-quantity` attributes. `salla-conditional-offer` resolves the gift LINES it
+ * lists (read-only, as information) and the cart line count from here, never from theme
+ * attributes.
+ *
+ * Data source: `salla.api.cart.details()` — it hits the `api.cart.show`
+ * route, which IS in `CartPresenter::$routesWithItems`, so the response
+ * carries `data.cart.items[]` with the per-item keys `added_by_offer`
+ * (bool), `offer_id` (int|null) and `free_gift_quantity` (int) set by
+ * `CartItemTransformer.php`. Those three names are a pinned
+ * contract — do not rename them here or on the components that consume them.
+ *
+ * We deliberately never read these fields off a `cart::updated` payload:
+ * that event fires from `latest()` too, and `api.cart.latest` is NOT in
+ * `$routesWithItems`, so a `cart::updated` payload legitimately carries no
+ * `items` at all. Callers must fetch on mount and call
+ * `refreshCartFreeGifts()` on the event — this module never derives from
+ * event payloads.
+ *
+ * The banner asks for the gift lines and the cart line count on the same tick (initial
+ * mount, and again on every `cart::updated`). Concurrent callers share a
+ * single in-flight promise, mirroring `_pendingOffersRequest` in
+ * `twilight/packages/twilight/src/api/cart.js:831-846`.
+ */
+const EMPTY_GIFT_ITEMS = Object.freeze([]);
+/**
+ * The gift LINES from the last parsed response. `null` is the single "nothing has loaded
+ * yet" flag shared with `countCache`, which keeps the two from ever disagreeing about
+ * which response they came from.
+ */
+let itemsCache = null;
+/**
+ * The cart's line count, published in the SAME pass as `itemsCache`. Only meaningful
+ * while `itemsCache` is non-null.
+ */
+let countCache = null;
+/**
+ * Whether what sits in the caches above came from a response we actually PARSED,
+ * as opposed to the graceful fallback a rejected lookup publishes.
+ *
+ * THIS IS THE CACHE'S WARM/COLD FLAG, and it is separate from the values on purpose.
+ *
+ * A failed lookup still has to hand its in-flight callers something usable, so the
+ * `.catch` below publishes `gifts: []` / `count: null`. But `[]` is TRUTHY, so a cache
+ * populated that way used to read as WARM: every later `getCartItemCount()` /
+ * `getCartFreeGiftItems()` short-circuited on it and returned the FAILURE's values
+ * without ever re-asking. One rejected `details()` therefore pinned the count at
+ * "unknown" (or, for `CartNotCreated`, at a hard `0`) for the whole page view, and
+ * `salla-conditional-offer` — which renders nothing until it is POSITIVELY told the cart
+ * holds items — vanished on a populated cart with a live offer. Nothing corrected it:
+ * only `refreshCartFreeGifts()` clears the cache, and that runs from `cart::updated`,
+ * which a shopper who does not touch the cart never emits.
+ *
+ * So a failure now leaves the cache COLD: its fallback values are still handed to the
+ * callers already waiting, and the next caller re-asks. Concurrent callers still share
+ * one request through `pendingRequest`, so the retry costs one lookup per wave, not one
+ * per consumer — and the cheapest failure of all, `CartNotCreated`, never reaches the
+ * network at all (`details()` rejects before it requests).
+ */
+let isAuthoritative = false;
+let pendingRequest = null;
+// De-dupes concurrent `refreshCartFreeGifts()` callers — see that function.
+let pendingRefresh = null;
+// Bumped by `refreshCartFreeGifts()`. A fetch only gets to publish into
+// the caches if the generation it started under is still current when it
+// resolves — otherwise a request that was already in flight when the cart
+// mutated would win the race and cache pre-mutation data as if it were
+// fresh. Mirrors `salla.event.on('cart::updated', () => { Salla.api.cart._pendingOffersRequest = null; })`
+// in `twilight/packages/twilight/src/api/cart.js:81`, which abandons its
+// in-flight promise on cart update so a post-mutation caller gets a fresh
+// request — the same idea, expressed as a generation check instead of
+// nulling the promise (nulling it here would defeat the same-tick dedupe
+// that `refreshCartFreeGifts()` relies on).
+let generation = 0;
+/**
+ * The cart identity the caches (and any in-flight request) belong to. `undefined` until
+ * the first lookup. See `syncCartIdentity`.
+ */
+let cacheIdentity;
+/**
+ * The SDK's own name for "this visitor has no cart at all".
+ *
+ * `salla.api.cart.details()` resolves its id through
+ * `getCurrentCartId(false, …, allowCreate = false)`, which returns `null` for a guest with
+ * no stored cart id rather than creating one server-side; `details()` then throws this
+ * (twilight/src/api/cart.js:192-199). It is a STATEMENT ABOUT THE CART, not a failure to
+ * reach the server — no cart means no items — so it is the one rejection that resolves to
+ * a hard 0 instead of "unknown".
+ *
+ * Matched on `name`, never on message text: the wording is not a contract, the name is.
+ */
+const CART_NOT_CREATED = 'CartNotCreated';
+function isCartNotCreated(error) {
+    return error?.name === CART_NOT_CREATED;
+}
+/**
+ * The cart id as the SDK knows it right now, synchronously, or `null` when there is none.
+ * Same sources `salla.api.cart.getStoredCartId()` reads (the in-memory latest cart, then
+ * storage), with a storage fallback for an SDK that predates it.
+ */
+function readCartIdentity() {
+    try {
+        const id = salla.api?.cart?.getStoredCartId
+            ? salla.api.cart.getStoredCartId()
+            : salla.storage?.get?.('cart.id');
+        return id === undefined || id === null || id === '' ? null : String(id);
+    }
+    catch (_) {
+        return null;
+    }
+}
+/**
+ * Drops everything cached for a previous cart when the cart id has changed.
+ *
+ * The caches are otherwise only invalidated by `refreshCartFreeGifts()`, i.e. by
+ * `cart::updated`. A silent cross-store login writes the merged cart id directly and
+ * emits nothing, so without this a mounted banner would keep serving the previous
+ * cart's line count and gifts. Bumping `generation` also stops a request that is still
+ * in flight for the old cart from publishing, and the in-flight slot is released so the
+ * caller asks again under the new identity.
+ */
+function syncCartIdentity() {
+    const current = readCartIdentity();
+    if (cacheIdentity !== undefined && cacheIdentity !== current) {
+        generation++;
+        itemsCache = null;
+        countCache = null;
+        isAuthoritative = false;
+        pendingRequest = null;
+    }
+    cacheIdentity = current;
+}
+function toNumber(v) {
+    if (v === null || v === undefined)
+        return 0;
+    if (typeof v === 'number')
+        return isFinite(v) ? v : 0;
+    if (typeof v === 'string')
+        return parseFloat(v) || 0;
+    return 0;
+}
+function toNullableNumber(v) {
+    if (v === null || v === undefined || v === '')
+        return null;
+    const n = toNumber(v);
+    return isFinite(n) ? n : null;
+}
+/**
+ * `details()`'s envelope nests items under `data.cart.items`.
+ *
+ * Returns `null` — NOT `[]` — when the response carried no items array at all. The two
+ * are different facts: `[]` is the server saying "this cart is empty", `null` is "this
+ * response cannot answer the question". `getCartItemCount()` is built on that
+ * distinction; see `extractCartCount`.
+ */
+function findItemsArray(res) {
+    const items = res?.data?.cart?.items ?? res?.data?.items ?? res?.cart?.items ?? res?.items;
+    return Array.isArray(items) ? items : null;
+}
+/**
+ * How many LINES the cart holds, or `null` when the response could not say.
+ *
+ * `null` is load-bearing and must never be collapsed into `0`: a consumer that hides
+ * itself on an empty cart has to be able to tell "the cart is empty" apart from "the
+ * cart has not loaded yet", or it flickers (or vanishes) on a populated cart while the
+ * first `details()` request is still in flight.
+ *
+ * The items array is the PRIMARY signal because `api.cart.show` is in
+ * `CartPresenter::$routesWithItems` and therefore always emits it. `cart.count` is only
+ * consulted when the array is missing entirely, and it is a QUANTITY total rather than a
+ * line count — close enough for the only question anyone asks of it (is this zero?), and
+ * never reached on a well-formed response.
+ */
+function extractCartCount(res, items) {
+    if (items !== null)
+        return items.length;
+    const raw = res?.data?.cart?.count ?? res?.data?.count ?? res?.cart?.count ?? res?.count;
+    const count = toNullableNumber(raw);
+    return count !== null && count >= 0 ? count : null;
+}
+/**
+ * The price a gift line would have cost.
+ *
+ * Tries the keys in the order `CartItemTransformer` fills them, and accepts both the
+ * `{amount, currency}` shape a serialized `Money` produces and a bare number/string.
+ * A zero is treated as "nothing usable": the gift's own charged price IS zero, so a 0
+ * here means we read the wrong key, and rendering a struck-through "0" would be worse
+ * than rendering no price at all.
+ */
+function extractOriginalPrice(item) {
+    for (const raw of [item?.original_price, item?.product_price, item?.price]) {
+        const value = raw && typeof raw === 'object' ? raw.amount : raw;
+        const amount = toNullableNumber(value);
+        if (amount !== null && amount > 0)
+            return amount;
+    }
+    return null;
+}
+/**
+ * How many units of this line the offer granted, or `0` when the answer is "none".
+ *
+ * The two absent-ish shapes are NOT the same fact and must not collapse:
+ *
+ *  • the key is MISSING (`undefined`/`null`/`''`) — an older payload, or a
+ *    transformer that did not fill it. Nothing contradicts "the whole line is
+ *    the gift" for an unknown line quantity, so fall back to the line.
+ *  • the key is PRESENT and `0` — the server stating there are no free units on
+ *    this line. That is an answer, and it must be believed.
+ */
+function resolveFreeQuantity(item, lineQuantity) {
+    const raw = item?.free_gift_quantity;
+    const stated = raw !== undefined && raw !== null && raw !== '';
+    if (stated)
+        return toNumber(raw);
+    return lineQuantity > 0 ? lineQuantity : 0;
+}
+/**
+ * The gift LINES, in cart order. Only lines the server flagged `added_by_offer` with at
+ * least one granted free unit qualify.
+ */
+function buildGiftItems(items) {
+    const gifts = [];
+    for (const item of items) {
+        if (item?.id === undefined || item?.id === null)
+            continue;
+        if (!item.added_by_offer)
+            continue;
+        const lineQuantity = toNumber(item.quantity);
+        const freeQuantity = resolveFreeQuantity(item, lineQuantity);
+        // No free units ⇒ not a gift LINE, whatever the flag says. Listing it anyway
+        // would put a line the shopper PAID for in full into the gifts card, labelled
+        // "free" — the card states what the offer granted, so a non-positive free count
+        // means it granted nothing here.
+        if (freeQuantity <= 0)
+            continue;
+        gifts.push({
+            id: String(item.id),
+            offerId: toNullableNumber(item.offer_id),
+            quantity: freeQuantity,
+            freeQuantity,
+            lineQuantity,
+            name: String(item.product_name ?? item.name ?? ''),
+            imageUrl: String(item.product_image?.url ?? item.product_image ?? item.image?.url ?? ''),
+            imageAlt: String(item.product_image?.alt ?? item.image?.alt ?? item.product_name ?? ''),
+            url: String(item.url ?? ''),
+            originalPrice: extractOriginalPrice(item),
+        });
+    }
+    return gifts;
+}
+function fetchAndCache() {
+    if (pendingRequest)
+        return pendingRequest;
+    // Snapshot the generation this request started under — see the
+    // `generation` doc comment above for why.
+    const startedAtGeneration = generation;
+    const request = Promise.resolve()
+        .then(() => salla.api?.cart?.details?.())
+        .then((res) => {
+        const found = findItemsArray(res);
+        const items = found ?? [];
+        // Both projections come out of the SAME response, in one pass.
+        return {
+            gifts: buildGiftItems(items),
+            count: extractCartCount(res, found),
+            // The response was reached and parsed — these values are the cart, so the cache
+            // they land in may be short-circuited on. See `isAuthoritative`.
+            ok: true,
+        };
+    })
+        // A failed fetch shouldn't throw into a badge/lock render path — fail
+        // closed to "no gift info" (or whatever we already knew) rather than
+        // breaking the rest of the cart UI.
+        //
+        // The count splits the failures in two. `CartNotCreated` is the SDK
+        // stating there is no cart, which is a definitive EMPTY and resolves to
+        // 0 — without it, the ordinary first-time guest sits on "unknown"
+        // forever, because no request will ever succeed and no `cart::updated`
+        // is coming to correct it. Everything else (network, 5xx) says nothing
+        // about the contents and still fails OPEN to `null`, so a flaky
+        // connection can never claim the cart is empty.
+        .catch((error) => ({
+        gifts: itemsCache ?? [],
+        count: isCartNotCreated(error) ? 0 : countCache,
+        /**
+         * NOT authoritative, `CartNotCreated` included.
+         *
+         * `0` stays the right ANSWER for it — no cart means no items, and a first-time
+         * guest must be told "empty" rather than sitting on "unknown" — but it is no longer
+         * a FINAL one. The very first cart lookup on a page is fired before
+         * `salla.onReady()` has settled, so it can be answered by an SDK that has not yet
+         * installed the cart id (or, earlier still, not yet installed `salla.config`, whose
+         * `isGuest()` the id resolution calls unguarded). Both spell a cart that is merely
+         * unknown as one that is empty. Leaving the cache cold lets the next lookup — from
+         * a bootstrapped SDK — say so, and on a cart that genuinely is empty the retry
+         * rejects again without a request.
+         */
+        ok: false,
+    }))
+        .then(({ gifts, count, ok }) => {
+        // Only publish if nothing invalidated us while we were in flight.
+        // Otherwise this is pre-mutation data racing a newer, authoritative
+        // request — publishing it would make the lookups short-circuit on stale
+        // data until the NEXT mutation happens to come along.
+        if (startedAtGeneration === generation) {
+            itemsCache = gifts;
+            countCache = count;
+            isAuthoritative = ok;
+        }
+    })
+        .finally(() => {
+        // Only release OUR slot: an identity change may already have replaced it.
+        if (pendingRequest === request)
+            pendingRequest = null;
+    });
+    pendingRequest = request;
+    return request;
+}
+/**
+ * Every free-gift LINE currently in the cart, in cart order.
+ *
+ * Shares the cache, the in-flight promise and the generation guard with
+ * `getCartItemCount()` — the banner asking for both still issues exactly ONE
+ * `details()` request per cart mutation.
+ */
+function getCartFreeGiftItems() {
+    syncCartIdentity();
+    // `isAuthoritative`, not `itemsCache` alone — a failed lookup leaves `itemsCache` a
+    // truthy `[]`, which is not an answer. See `isAuthoritative`.
+    if (isAuthoritative && itemsCache) {
+        return Promise.resolve(itemsCache);
+    }
+    return fetchAndCache().then(() => itemsCache ?? EMPTY_GIFT_ITEMS);
+}
+/**
+ * Whether the cached cart picture came from a response that was actually reached and
+ * parsed, rather than from the fallback a rejected lookup publishes.
+ *
+ * For the ONE consumer that has to tell "the cart is empty" apart from "the lookup could
+ * not say, and guessed empty": `salla-conditional-offer` stops before it even asks for the
+ * offer when the count is `0`, which is unrecoverable if that `0` was a guess. Everything
+ * else should just read the values — they are already the best available answer.
+ *
+ * Synchronous and side-effect free: it reports on what is cached NOW, so a caller that
+ * wants a fresh answer must still await one of the lookups above.
+ */
+function hasAuthoritativeCartData() {
+    syncCartIdentity();
+    return isAuthoritative;
+}
+/**
+ * How many LINES the cart holds — `null` while that is genuinely UNKNOWN (nothing has
+ * loaded yet, or the lookup failed), never `0` for either.
+ *
+ * The distinction is the whole point: `salla-conditional-offer` hides its banner on an
+ * empty cart, and a `0` that really meant "still loading" would make the banner flicker
+ * or disappear on a populated one. Shares the cache, the in-flight promise and the
+ * generation guard with `getCartFreeGiftItems()`, so asking for the count costs no
+ * request of its own.
+ */
+function getCartItemCount() {
+    syncCartIdentity();
+    // THE ONE THAT HID THE BANNER. `itemsCache` alone read a failed lookup's `[]` as a warm
+    // cache and handed back its `null`/`0` count for ever — see `isAuthoritative`.
+    if (isAuthoritative && itemsCache) {
+        return Promise.resolve(countCache);
+    }
+    return fetchAndCache().then(() => countCache);
+}
+/**
+ * Invalidates the cache and re-fetches — call this from a `cart::updated`
+ * handler, ignoring the event payload entirely.
+ *
+ * Bumps `generation` first so that any request already in flight (started
+ * before this invalidation) can no longer publish into `cache` when it
+ * settles — mirrors `salla.event.on('cart::updated', () => { Salla.api.cart._pendingOffersRequest = null; })`
+ * in `twilight/packages/twilight/src/api/cart.js:81`, which abandons its
+ * own in-flight promise on cart update for the same reason.
+ *
+ * Then chains a fresh fetch BEHIND whatever was already in flight (rather
+ * than firing a second request in parallel): once that prior request
+ * settles — its result now guaranteed to be discarded by the generation
+ * check above — `fetchAndCache()` starts a request under the new
+ * generation, which is free to publish.
+ *
+ * `pendingRefresh` de-dupes concurrent callers of THIS function the same
+ * way `pendingRequest` de-dupes concurrent fetches: N components all
+ * invalidating within the same synchronous `cart::updated` dispatch share
+ * one refresh chain and therefore, ultimately, one fresh HTTP request.
+ *
+ * That sharing window is deliberately NARROW — it closes the instant the
+ * fresh request goes out, NOT when it comes back. Holding it open for the
+ * whole round trip silently coalesced two DIFFERENT cart mutations into one
+ * refresh: the second `cart::updated` got handed the first one's promise, so
+ * it never bumped `generation` and never issued a request, and the response
+ * that eventually published had been asked for BEFORE the second mutation
+ * happened. The cart then sat on pre-mutation gift data — a merged line
+ * showing yesterday's paid quantity beside yesterday's corrected total —
+ * until some later mutation happened to come along. A shopper clicking "+"
+ * twice inside one round trip is all it took.
+ */
+function refreshCartFreeGifts() {
+    if (pendingRefresh)
+        return pendingRefresh;
+    generation++;
+    itemsCache = null;
+    countCache = null;
+    isAuthoritative = false;
+    // This invalidation already covers whatever id the cart has now.
+    cacheIdentity = readCartIdentity();
+    const priorRequest = pendingRequest ?? Promise.resolve();
+    const startFreshRequest = () => {
+        // Sharing ends here: everything that invalidated up to this point is
+        // described by the request about to go out, and everything after it is not.
+        if (pendingRefresh === refresh)
+            pendingRefresh = null;
+        return fetchAndCache();
+    };
+    // `.then(f, f)` — a prior request that REJECTED still has to be waited out
+    // before the replacement is issued, or the two overlap.
+    const refresh = priorRequest
+        .then(startFreshRequest, startFreshRequest)
+        .finally(() => {
+        // Only ever clear OUR slot. A later refresh may already own it (it can
+        // only have taken it after `startFreshRequest` released it), and nulling
+        // that one would un-dedupe its same-tick callers.
+        if (pendingRefresh === refresh)
+            pendingRefresh = null;
+    });
+    pendingRefresh = refresh;
+    return refresh;
+}
+
+/**
+ * TRAILING window over which a BURST of `cart::updated` events collapses into ONE refresh
+ * pass in `salla-conditional-offer`.
+ *
+ * `cart::updated` is not one-event-per-shopper-action. `CartEvents.updated()` is called
+ * from SIX call sites (twilight/src/event/cart.js:122-174) — `latestFetched`, `itemAdded`,
+ * `itemDeleted`, `itemUpdated`, `couponAdded`, `couponDeleted` — and a single mutation
+ * routinely produces more than one of them, because the mutation's own response and the
+ * summary refetch that follows it both land here. Each one used to cost the banner TWO
+ * server round trips: `offers()` from `refresh()`, and `details()` from the
+ * `refreshCartFreeGifts()` + `loadCart()` pair. That is now paid ONCE per burst.
+ *
+ * TRAILING, not leading: the LAST event of a burst is the one that describes the cart the
+ * shopper is actually looking at, so the pass has to run after it, not before it. A
+ * leading-edge debounce would answer from the FIRST event and need a second pass anyway.
+ *
+ * What is deliberately NOT deferred is `readCartCountFromEvent`, which stays synchronous on
+ * every single event — it is what hides the banner the instant the cart empties, and
+ * `render()` gates on `hasCartItems()` alone, so the hidden-by-default behaviour is
+ * unaffected by this window. Only the REQUESTS wait.
+ *
+ * 200ms is comfortably below the ~500ms `Helper.debounce` the quantity stepper already
+ * applies upstream (Helpers/Helper.ts:45-51), so this cannot swallow two deliberate,
+ * separate shopper actions into one pass — it only collapses the machine-generated repeats
+ * of a single one.
+ *
+ * It lives in its own module rather than beside the component's other timing constants
+ * because Stencil allows a `@Component()` module exactly one export — the class — and the
+ * spec has to assert against the REAL number rather than a copy of it.
+ */
+const CART_UPDATE_COALESCE_MS = 200;
+
+/**
+ * Multi-stage promotion progress.
+ *
+ * Pure, component-agnostic helpers for turning a shopper's current cart value
+ * plus a list of stage thresholds into "which stage is Locked / Current /
+ * Completed, and how full is each segment".
+ *
+ * Deliberately NOT shared with `salla-tiered-offer`'s `TierUtils`:
+ *  - `TierUtils.findCurrentTierIndex` is 1-based with `0` overloaded to mean
+ *    "no tier reached", which cannot express "stage 0 is reached".
+ *  - It takes `TieredOfferTier[]`, a shape a conditional-offer `Discount` does
+ *    not share a single field with.
+ *  - It assumes its caller already sorted; the conditional-offer payload is
+ *    emitted UNSORTED by the backend.
+ *
+ * So this module takes plain numbers, is 0-based, uses an explicit
+ * `NO_STAGE_REACHED` sentinel, and sorts defensively on every call.
+ *
+ * ONE deliberate exception to "pure": `getCurrencyDecimals()` reads the store's money
+ * precision off `salla.config` so that `getRemainingToStage()` can round AT THE SOURCE
+ * and every consumer — including the `products_count` path that never touches
+ * `salla.money()` — benefits without each of them remembering to. It is fully guarded and
+ * falls back to `DEFAULT_CURRENCY_DECIMALS`, so a missing SDK degrades rather than throws;
+ * callers that want it hermetic can pass the measure and stub `salla.config`.
+ *
+ * ---------------------------------------------------------------------------
+ * WHO DECIDES A TIER IS UNLOCKED
+ * ---------------------------------------------------------------------------
+ * The ENGINE does, and it now says so: every `details.discounts[]` entry carries
+ * `is_applied`. Threshold arithmetic here is a PROJECTION ("how far to go"), never a
+ * CLAIM about what the engine granted, because the engine's formula
+ *
+ *     ($subtotal - $alreadyAppliedDiscount) - $excludedItemsAmount >= min_spend
+ *
+ * uses two terms that are not in the payload at all. On beta a gift tier at `min_spend`
+ * 300 with `current_value` 300 rendered as unlocked while the engine had refused it (the
+ * gift's own price is in that tier's excluded set), so no arithmetic over shipped keys
+ * could ever have agreed with it.
+ *
+ * BUT `is_applied` IS NOT "THE SHOPPER IS PAST THIS TIER". It answers a narrower
+ * question, and reading it as the broader one is what produced the second beta report.
+ * `CartOfferDiscount::apply()` walks the tiers, keeps the LAST one whose conditions pass
+ * and calls `discountItem()` ONCE after the loop, so a cart offer grants EXACTLY ONE
+ * reward — the best qualifying tier. Every earlier tier is therefore `is_applied: false`
+ * even for a shopper who sailed past it: its reward is SUPERSEDED, not out of reach. A
+ * cart at `current_value` 510 came back as `false / false / true` and the badge row read
+ * LOCKED / LOCKED / CHECKED, which is unreadable as a progress stepper.
+ *
+ * So there are TWO questions and this module answers both, separately:
+ *  - "which tier gave the reward" — the single winner, `appliedIndex`.
+ *  - "is the shopper past this tier"  — cumulative, `met`, which is what the ✓, the
+ *    strikethrough, the lock and the "N of M" count render from.
+ *
+ * The passed tiers carry a ✓ AND a strikethrough while the tier ahead carries a lock.
+ * Struck-through means superseded, so a ✓ means THRESHOLD PASSED, not REWARD GRANTED.
+ *
+ * Hence the split, and it is load-bearing:
+ *  - `met` / `metCount` / `nextUnmetIndex` / `allMet` are the ENGINE-DERIVED verdict.
+ *    Render from these.
+ *  - `appliedIndex` names the one tier that actually paid out. Diagnostics only so far.
+ *  - `lastReachedIndex` / `currentIndex` / `isComplete` / `fills` / `overallPercentage`
+ *    are pure threshold projections. Use them for distance and bar geometry only.
+ *
+ * `is_applied` is TRI-STATE, because twilight and the Store package deploy independently:
+ * absent means "this backend does not report it yet" and falls back to the arithmetic,
+ * while `false` is a real verdict and outranks the arithmetic. See `readAppliedFlag`.
+ *
+ * `salla-tiered-offer` keeps its own copy of the defensive ascending sort and the
+ * completed/total ratio; that duplication is deliberate and not migrated here.
+ */
+/** Explicit sentinel: no stage has been reached yet (or there is no next stage). */
+const NO_STAGE_REACHED = -1;
+var OfferStageState;
+(function (OfferStageState) {
+    OfferStageState["LOCKED"] = "locked";
+    OfferStageState["CURRENT"] = "current";
+    OfferStageState["COMPLETED"] = "completed";
+})(OfferStageState || (OfferStageState = {}));
+function parseNumeric(value) {
+    const parsed = typeof value === 'number' ? value : parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+/**
+ * Read one tier's `is_applied` as a tri-state.
+ *
+ * `true`/`false` booleans are what `CartOffersTransformer` casts and emits. The numeric
+ * and string spellings are accepted too because the `s-source: mobile` pipeline already
+ * stringifies numeric fields in this very payload (`end_value`), and reading a `0` there
+ * as "absent" would silently restore the bug this exists to fix.
+ *
+ * EVERYTHING ELSE — key missing, `undefined`, `null`, `''`, an object — is ABSENT, not
+ * `false`: a value we cannot interpret is not the engine saying no, and must degrade to
+ * the arithmetic fallback rather than lock a tier the shopper has genuinely earned.
+ */
+function readAppliedFlag(value) {
+    if (typeof value === 'boolean')
+        return value;
+    if (value === 1 || value === 0)
+        return value === 1;
+    if (value === 'true' || value === '1')
+        return true;
+    if (value === 'false' || value === '0')
+        return false;
+    return undefined;
+}
+/**
+ * Coerce a cart VALUE. Falling back to 0 is correct here: an unreadable
+ * `current_value`/`start_value` means "the shopper has made no progress".
+ */
+function toFiniteNumber(value) {
+    return parseNumeric(value) ?? 0;
+}
+/**
+ * Whether a THRESHOLD is usable.
+ *
+ * Thresholds get the opposite policy to values: an unparseable threshold is DROPPED,
+ * never coerced to 0, because a 0 threshold is satisfied by an empty cart and would
+ * render as an already-COMPLETED stage — reintroducing exactly the synthetic-zeroth-
+ * checkpoint bug this component was rewritten to remove.
+ *
+ * Callers that keep their own parallel array of stage objects MUST filter it with this
+ * predicate so their index alignment with `progress.thresholds` survives the drop.
+ */
+function isUsableThreshold(value) {
+    return parseNumeric(value) !== null;
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(value, max));
+}
+/**
+ * Fill of one segment as a 0..100 percentage.
+ * A zero-width (or inverted) segment — which duplicate thresholds produce — has
+ * no gradient to show, so it is all-or-nothing rather than a division by zero.
+ */
+function segmentFill(value, from, to) {
+    if (to <= from) {
+        return value >= to ? 100 : 0;
+    }
+    return clamp(((value - from) / (to - from)) * 100, 0, 100);
+}
+/**
+ * Stable ascending sort of arbitrary items by a numeric threshold accessor.
+ *
+ * Ties are broken by `getIdentity` when supplied and readable on BOTH sides — the tier
+ * `id` (0 = base tier, 1..N = configured options in the order the engine walks them), so
+ * two tiers sharing a `min_spend` order by what they ARE rather than by where they
+ * happened to land in an unsorted payload. Without it (or when either id is unreadable)
+ * ties keep their original relative order, which is the previous behaviour exactly.
+ */
+function sortByThreshold(items, getThreshold, getIdentity) {
+    return (items ?? [])
+        .map((item, index) => ({
+        item,
+        index,
+        threshold: toFiniteNumber(getThreshold(item)),
+        identity: getIdentity ? parseNumeric(getIdentity(item)) : null,
+    }))
+        .sort((a, b) => {
+        if (a.threshold !== b.threshold)
+            return a.threshold - b.threshold;
+        if (a.identity !== null && b.identity !== null && a.identity !== b.identity) {
+            return a.identity - b.identity;
+        }
+        return a.index - b.index;
+    })
+        .map(({ item }) => item);
+}
+/**
+ * Derive the full stage picture from the server's `current_value`.
+ *
+ * @param currentValue the server-computed cart value — never recomputed client-side.
+ * @param rawThresholds each stage's `min_spend`, in any order.
+ * @param rawStartValue the baseline the first segment fills from (`details.start_value`).
+ * @param rawApplied each stage's `is_applied`, POSITIONALLY ALIGNED WITH `rawThresholds`
+ *        before any sorting or dropping happens here. Omit it and every tier reads as
+ *        absent, i.e. the threshold behaviour, unchanged.
+ * @param rawTierValues each stage's OWN `current_value`, aligned the same way. A tier
+ *        without a readable one is measured by `currentValue`, so omitting it — an older
+ *        backend — changes nothing. See `OfferStageProgress.values`.
+ */
+function computeOfferStageProgress(currentValue, rawThresholds, rawStartValue = 0, rawApplied = [], rawTierValues = []) {
+    // Unparseable thresholds are dropped, not zeroed — see `isUsableThreshold`.
+    //
+    // The flag travels WITH its threshold through both the drop and the sort. Sorting two
+    // parallel arrays separately is how an `is_applied` ends up on the wrong tier, and a
+    // misattributed verdict is worse than no verdict at all. The tier's own value rides
+    // along for the same reason.
+    const entries = (rawThresholds ?? [])
+        .map((threshold, index) => ({
+        index,
+        threshold: parseNumeric(threshold),
+        applied: readAppliedFlag(rawApplied?.[index]),
+        tierValue: parseNumeric(rawTierValues?.[index]),
+    }))
+        .filter((entry) => entry.threshold !== null)
+        .sort((a, b) => a.threshold - b.threshold || a.index - b.index);
+    const thresholds = entries.map(entry => entry.threshold);
+    const applied = entries.map(entry => entry.applied);
+    const hasEngineVerdict = applied.some(flag => flag !== undefined);
+    const startValue = toFiniteNumber(rawStartValue);
+    if (!thresholds.length) {
+        return {
+            thresholds,
+            met: [],
+            applied,
+            appliedIndex: NO_STAGE_REACHED,
+            hasEngineVerdict,
+            metCount: 0,
+            nextUnmetIndex: NO_STAGE_REACHED,
+            allMet: false,
+            lastReachedIndex: NO_STAGE_REACHED,
+            currentIndex: NO_STAGE_REACHED,
+            isComplete: false,
+            value: Math.max(0, toFiniteNumber(currentValue)),
+            values: [],
+            startValue,
+            fills: [],
+            overallPercentage: 0,
+        };
+    }
+    const finalThreshold = thresholds[thresholds.length - 1];
+    // THE CLAMP: a stale or overshooting `current_value` must never produce a
+    // >100% bar or an out-of-range stage index.
+    const value = clamp(toFiniteNumber(currentValue), 0, Math.max(0, finalThreshold));
+    // Each tier against ITS OWN progress where the backend sent one — see `values`. A tier
+    // value that is missing or unreadable is not "no progress": it is "not reported", and
+    // falls back to the offer-level value rather than to 0.
+    const values = entries.map(({ tierValue }) => tierValue === null ? value : clamp(tierValue, 0, Math.max(0, finalThreshold)));
+    let lastReachedIndex = NO_STAGE_REACHED;
+    for (let index = 0; index < thresholds.length; index++) {
+        if (values[index] >= thresholds[index]) {
+            lastReachedIndex = index;
+        }
+    }
+    const isComplete = lastReachedIndex === thresholds.length - 1;
+    const currentIndex = isComplete ? NO_STAGE_REACHED : lastReachedIndex + 1;
+    const fills = thresholds.map((threshold, index) => segmentFill(values[index], index === 0 ? startValue : thresholds[index - 1], threshold));
+    const overallPercentage = isComplete
+        ? 100
+        : clamp(((lastReachedIndex + 1 + (fills[currentIndex] ?? 0) / 100) / thresholds.length) * 100, 0, 100);
+    // ---------------------------------------------------------------------------------
+    // THE DECISION — three cases, in this order.
+    //
+    // (1) THE ENGINE GRANTED A TIER. `appliedIndex` is the HIGHEST tier flagged `true`, and
+    //     every tier up to and including it is met. A cart offer pays out ONCE, at the best
+    //     qualifying tier, so the earlier tiers are `false` because they were SUPERSEDED —
+    //     the shopper is past them. Closing the prefix is what stops a lock rendering below
+    //     a ✓ (the beta screenshot: `false / false / true` at `current_value` 510).
+    //
+    //     HIGHEST, not first, and read AFTER the ascending sort: the payload arrives
+    //     unsorted, so "the last tier the engine kept" is only "the furthest tier reached"
+    //     once the rows are in threshold order. A NON-CONTIGUOUS set — `[true, false, true]`
+    //     — should be impossible for a single-winner engine, but if one ever arrives the
+    //     highest wins and the whole prefix reads met. That is deliberate: the alternative
+    //     is the un-steppable row this fix exists to remove, and a superset of ✓ merely
+    //     over-credits a tier the shopper has demonstrably paid past.
+    //
+    // (2) THE ENGINE SPOKE AND GRANTED NOTHING. Everything is locked, whatever the
+    //     thresholds say. This is the OTHER beta cart — `current_value` 510, zero discount,
+    //     every tier `false` — and it is the case `is_applied` was introduced for. The
+    //     arithmetic MUST NOT be consulted here or the bug comes straight back.
+    //
+    // (3) THIS BACKEND REPORTS NOTHING (`hasEngineVerdict` false — no tier carried a
+    //     readable flag). Only then does the cumulative threshold comparison run, exactly
+    //     as before `is_applied` shipped. Twilight and the Store package deploy
+    //     independently, so this path is live, not theoretical.
+    //
+    // Cases (1) and (2) are split on the WINNER, not on each tier's own flag, so `??` vs
+    // `||` no longer decides a single row on its own. The tri-state still decides which
+    // CASE we are in: an unreadable flag is absent (case 3), an explicit `false` is an
+    // answer that keeps us in cases 1-2. A mixed payload — some tiers flagged, some not,
+    // which no current backend emits — is treated as having spoken: only a `true` can name
+    // the winner, so an unflagged tier can never be one.
+    // ---------------------------------------------------------------------------------
+    let appliedIndex = NO_STAGE_REACHED;
+    for (let index = 0; index < applied.length; index++) {
+        if (applied[index] === true) {
+            appliedIndex = index;
+        }
+    }
+    // Case (3) closes the prefix at `lastReachedIndex` rather than comparing tier by tier.
+    // With one value for every tier the two are the same statement; with per-tier values
+    // it is what keeps `met` a prefix, on the same single-winner reasoning as case (1).
+    const met = hasEngineVerdict
+        ? thresholds.map((_, index) => index <= appliedIndex)
+        : thresholds.map((_, index) => index <= lastReachedIndex);
+    const metCount = met.filter(Boolean).length;
+    const nextUnmetIndex = met.findIndex(isMet => !isMet); // -1 === NO_STAGE_REACHED
+    const allMet = nextUnmetIndex === NO_STAGE_REACHED;
+    return {
+        thresholds,
+        met,
+        applied,
+        appliedIndex,
+        hasEngineVerdict,
+        metCount,
+        nextUnmetIndex,
+        allMet,
+        lastReachedIndex,
+        currentIndex,
+        isComplete,
+        value,
+        values,
+        startValue,
+        fills,
+        overallPercentage,
+    };
+}
+/**
+ * How the offer MEASURES its thresholds, which is also what its remainder rounds to.
+ *
+ * Mirrors `OfferType` in `salla-conditional-offer/interfaces.ts` without importing it —
+ * this module stays free of the component's payload types (see the header) — so a caller
+ * maps `details.based_on` onto it at the call site.
+ */
+var OfferStageMeasure;
+(function (OfferStageMeasure) {
+    /** `order_amount` — a money value, rounded to the store's currency precision. */
+    OfferStageMeasure["CURRENCY"] = "currency";
+    /** `products_count` — whole products, so the remainder is a whole number. */
+    OfferStageMeasure["COUNT"] = "count";
+})(OfferStageMeasure || (OfferStageMeasure = {}));
+/**
+ * The precision to fall back to when the store publishes none.
+ *
+ * 2 is the platform default (SAR/USD/AED); a store on a 3-decimal currency (KWD, BHD)
+ * that reports its precision gets 3, and only a store that reports NOTHING readable
+ * lands here.
+ */
+const DEFAULT_CURRENCY_DECIMALS = 2;
+/**
+ * Hard ceiling on the precision a store can ask for.
+ *
+ * The value comes off `salla.config`, i.e. off the wire, and `Math.pow(10, n)` with a
+ * large `n` reintroduces the very float noise this rounding exists to remove (and with
+ * an absurd `n`, an `Infinity` factor and a `NaN` remainder). 4 matches the cap
+ * `salla-cart-summary-card.roundToCurrency()` already applies to the same problem.
+ */
+const MAX_CURRENCY_DECIMALS = 4;
+/**
+ * Read one candidate precision, or `null` when it is not a usable one.
+ *
+ * Strict on purpose. `salla.config.get()` returns THE KEY ITSELF for a key the store did
+ * not publish (`config.ts:50`), so an unpublished `store.currency.decimals` arrives as
+ * the string `"store.currency.decimals"` — truthy, non-null, and fatal to a `?? 2`
+ * fallback, which is why this parses and range-checks rather than nullish-coalescing.
+ */
+function readDecimals(raw) {
+    const parsed = typeof raw === 'number' ? raw : parseFloat(raw);
+    if (!Number.isFinite(parsed))
+        return null;
+    const decimals = Math.trunc(parsed);
+    return decimals >= 0 && decimals <= MAX_CURRENCY_DECIMALS ? decimals : null;
+}
+/**
+ * The store's money precision — THE ONE IMPURITY IN THIS MODULE (see the header note).
+ *
+ * Asked in the order the platform answers it:
+ *  1. `salla.config.currency()` — the ACTIVE currency's own precision, which is the only
+ *     source that can differ per currency (a store displaying KWD wants 3 while its SAR
+ *     prices want 2).
+ *  2. `salla.config.get('store.currency.decimals')` — the store-level key
+ *     `salla-bought-together.tsx:142` already rounds its basket total by.
+ *  3. `DEFAULT_CURRENCY_DECIMALS`.
+ *
+ * Every step is guarded: this runs inside `render()`, where an SDK that is not on the
+ * page yet (or a `config` that throws) must degrade to the default, never take the banner
+ * down.
+ */
+function getCurrencyDecimals() {
+    try {
+        const sdk = typeof salla !== 'undefined' ? salla : undefined;
+        const fromCurrency = readDecimals(sdk?.config?.currency?.()?.decimals);
+        if (fromCurrency !== null)
+            return fromCurrency;
+        const fromConfig = readDecimals(sdk?.config?.get?.('store.currency.decimals'));
+        if (fromConfig !== null)
+            return fromConfig;
+    }
+    catch (_) {
+        // No SDK, or a config that threw — the default is the answer.
+    }
+    return DEFAULT_CURRENCY_DECIMALS;
+}
+/**
+ * Float noise allowed when rounding a remainder UP, in units of the display precision.
+ * `300 - 289.6` is `10.399999999999977`, which must still read as exactly 10.40 rather
+ * than tip over to 10.41.
+ */
+const CEIL_TOLERANCE = 1e-6;
+/**
+ * How much more of the cart value is needed to reach the given stage, rounded UP at the
+ * display precision. Never negative.
+ *
+ * `threshold - value` is raw IEEE-754 subtraction over two server-sent floats, so
+ * `300 - 289.599993` is `10.400007000000012`. Nothing downstream cleans that up:
+ * `salla.money()` only swaps digits and appends a symbol (`base/src/helpers/numbers.ts:74-84`).
+ * Rounding here, at the source, covers every consumer, including the `products_count`
+ * path that never reaches `salla.money`.
+ *
+ * Rounding goes UP, never to the nearest unit: the displayed amount must be enough to
+ * unlock the tier. Rounding 10.400007 to 10.40 asks for an amount that leaves the cart
+ * at 299.999993, still below the threshold. Float noise is guarded (see `CEIL_TOLERANCE`)
+ * so an exact 10.40 stays 10.40.
+ *
+ * A count remainder is a WHOLE number, because `salla.lang.choice('blocks.header.products_count', 10.4)`
+ * matches no plural interval and a shopper cannot add 0.4 of a product.
+ *
+ * Only the derived remainder is rounded. `progress.values` and `progress.thresholds` are
+ * server facts and stay as sent: rounding them would move the unlocked/locked boundary,
+ * which is the engine's call.
+ *
+ * A positive remainder never becomes 0: `getGuidanceMessage` drops its line on
+ * `remaining <= 0`, so a genuinely unmet tier must still ask for at least one unit of the
+ * precision (0.01 for a 2-decimal currency, 1 for a count). Exact zero, a met tier,
+ * still returns 0.
+ */
+function getRemainingToStage(index, progress, measure = OfferStageMeasure.CURRENCY) {
+    const threshold = progress.thresholds[index];
+    if (threshold === undefined) {
+        return 0;
+    }
+    // The distance to a tier is measured in THAT tier's own progress — see `values`.
+    const raw = Math.max(0, threshold - (progress.values?.[index] ?? progress.value));
+    if (raw === 0)
+        return 0;
+    const decimals = measure === OfferStageMeasure.COUNT ? 0 : getCurrencyDecimals();
+    const factor = Math.pow(10, decimals);
+    const rounded = Math.ceil(raw * factor - CEIL_TOLERANCE) / factor;
+    // Still owed something, but only float noise above zero: ask for one unit.
+    return rounded > 0 ? rounded : 1 / factor;
+}
+
+const sallaConditionalOfferCss = "/*!twlt*/:host{display:block}.s-conditional-offer-root{background-color:rgba(0, 137, 123, 0.06);background-color:color-mix(in srgb, var(--color-primary, #00897b) 7%, transparent)}.s-conditional-offer-badges::-webkit-scrollbar{height:3px}.s-conditional-offer-badges::-webkit-scrollbar-thumb{border-radius:9999px;background-color:rgba(0, 0, 0, 0.15)}.s-conditional-offer-badges::-webkit-scrollbar-track{background-color:transparent}.s-conditional-offer-tooltip{--s-conditional-offer-tooltip-shift:0px;--s-conditional-offer-tooltip-caret:0px;transform:translateX(calc(-50% + var(--s-conditional-offer-tooltip-shift)))}.s-conditional-offer-tooltip::before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translateX(calc(-50% + var(--s-conditional-offer-tooltip-caret)));border:8px solid transparent;border-bottom-color:#fff}.s-conditional-offer-tier-icon-met,.s-conditional-offer-tier-icon-unmet{color:var(--color-primary-dark, #00695c);background-color:rgba(0, 137, 123, 0.12);background-color:color-mix(in srgb, var(--color-primary, #00897b) 14%, transparent)}.s-conditional-offer-tier:not(:last-child)::before{content:\"\";position:absolute;top:2.5rem;bottom:-1rem;inset-inline-start:1.125rem;width:1px;background-color:#d1d5db}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.block{display:block}.inline{display:inline}.flex{display:flex}.hidden{display:none}.w-6{width:1.5rem}.resize{resize:both}.gap-1{gap:0.25rem}.rounded{border-radius:var(--s-radius, 0.25rem)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-conditional-offer-root{margin-bottom:1.25rem;display:block;width:100%;min-width:0px;max-width:100%;border-radius:0.375rem;padding:0.75rem}@media (min-width: 768px){.s-conditional-offer-root{padding:1rem}}.s-conditional-offer-banner{display:flex;width:100%;min-width:0px;align-items:center;justify-content:space-between;gap:0.75rem}@media (min-width: 768px){.s-conditional-offer-banner{gap:1rem}}.s-conditional-offer-lead{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:0.5rem}@media (min-width: 768px){.s-conditional-offer-lead{gap:0.75rem}}.s-conditional-offer-badges{display:flex;max-width:45%;flex-shrink:0;flex-wrap:nowrap;align-items:center;gap:0.25rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-behavior:smooth;scrollbar-width:thin}.s-conditional-offer-badge{display:inline-flex;height:1.5rem;width:1.5rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;font-size:11px;line-height:1;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.s-conditional-offer-badge-met{background-color:var(--color-primary)}.s-conditional-offer-badge-unmet{--tw-bg-opacity:1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.s-conditional-offer-badge-link{width:0.5rem;flex-shrink:0;border-top-width:1px}.s-conditional-offer-badge-link-met{border-color:var(--color-primary)}.s-conditional-offer-badge-link-unmet{border-style:dashed;--tw-border-opacity:1;border-color:rgb(82 82 82 / var(--tw-border-opacity, 1))}.s-conditional-offer-badge-icon{height:0.75rem;width:0.75rem;flex-shrink:0}.s-conditional-offer-text{display:flex;min-width:0px;flex-direction:column;gap:0.125rem;text-align:start}.s-conditional-offer-heading{display:flex;min-width:0px;align-items:center;gap:0.375rem}.s-conditional-offer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.75rem;line-height:1rem;--tw-text-opacity:1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.s-conditional-offer-info{position:relative;display:inline-flex;flex-shrink:0;align-items:center}.s-conditional-offer-info-trigger{display:inline-flex;height:1rem;width:1rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;--tw-text-opacity:1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-conditional-offer-info-trigger:hover{color:var(--color-primary-dark)}.s-conditional-offer-info-icon{height:0.875rem;width:0.875rem;flex-shrink:0}.s-conditional-offer-message{font-size:0.875rem;line-height:1.25rem;font-weight:700;color:var(--color-primary-dark)}@media (min-width: 768px){.s-conditional-offer-message{font-size:1rem;line-height:1.5rem}}.s-conditional-offer-toggle{align-items:center;justify-content:center;gap:0.375rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(38 38 38 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-conditional-offer-toggle:hover{color:var(--color-primary-dark)}.s-conditional-offer-toggle-inline{display:none;flex-shrink:0}@media (min-width: 768px){.s-conditional-offer-toggle-inline{display:inline-flex}}.s-conditional-offer-toggle-bar{margin-top:0.5rem;display:inline-flex;width:100%;border-radius:0.375rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:0.75rem;padding-right:0.75rem;padding-top:0.625rem;padding-bottom:0.625rem}@media (min-width: 768px){.s-conditional-offer-toggle-bar{display:none}}.s-conditional-offer-toggle-icon{font-size:1rem;line-height:1.5rem;line-height:1;transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-conditional-offer-toggle-icon-open{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.s-conditional-offer-panel{margin-top:0.75rem;width:100%;min-width:0px;border-radius:0.375rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:0.75rem}.s-conditional-offer-gifts-header{margin-bottom:0.75rem;display:flex;align-items:center;gap:0.5rem}.s-conditional-offer-gifts-icon{display:inline-flex;height:2rem;width:2rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-color:var(--color-primary);font-size:1rem;line-height:1.5rem;line-height:1;color:var(--color-primary)}.s-conditional-offer-gifts-title{font-size:0.875rem;line-height:1.25rem;font-weight:700;color:var(--color-primary-dark)}.s-conditional-offer-gifts-list{margin:0px;display:flex;list-style-type:none;flex-direction:column;gap:0.5rem;padding:0px}.s-conditional-offer-gift{display:flex;align-items:center;gap:0.75rem;border-radius:0.375rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));padding:0.5rem}.s-conditional-offer-gift-thumb{display:inline-flex;height:3.5rem;width:3.5rem;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:0.375rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));font-size:1.25rem;line-height:1.75rem;--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.s-conditional-offer-gift-image{height:100%;width:100%;object-fit:contain}.s-conditional-offer-gift-body{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:0.125rem;text-align:start}.s-conditional-offer-gift-name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:0.875rem;line-height:1.25rem;font-weight:700;--tw-text-opacity:1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))}.s-conditional-offer-gift-prices{display:flex;align-items:center;gap:0.5rem;font-size:0.75rem;line-height:1rem}.s-conditional-offer-gift-free{font-weight:700;--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.s-conditional-offer-gift-price{--tw-text-opacity:1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));text-decoration-line:line-through}.s-conditional-offer-tooltip{position:absolute;top:calc(100% + 0.75rem);left:50%;z-index:10;width:min(22rem, calc(100vw - 2rem));border-radius:0.5rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:1rem;text-align:start;--tw-shadow:5px 10px 30px #2B2D340D;--tw-shadow-colored:5px 10px 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.s-conditional-offer-tooltip-title{font-size:0.875rem;line-height:1.25rem;font-weight:700;color:var(--color-primary-dark)}.s-conditional-offer-tooltip-description{margin-top:0.25rem;font-size:0.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity:1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.s-conditional-offer-tooltip-list{margin:0px;margin-top:0.75rem;display:flex;list-style-type:none;flex-direction:column;gap:1rem;padding:0px}.s-conditional-offer-tier{position:relative;display:flex;align-items:flex-start;gap:0.75rem}.s-conditional-offer-tier-icon{position:relative;display:inline-flex;height:2.25rem;width:2.25rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;font-size:1rem;line-height:1.5rem;line-height:1}.s-conditional-offer-tier-icon-unmet{color:var(--color-primary-dark)}.s-conditional-offer-tier-status{position:absolute;bottom:-0.125rem;display:inline-flex;height:1rem;width:1rem;align-items:center;justify-content:center;border-radius:9999px;border-width:2px;--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));inset-inline-start:-2px}.s-conditional-offer-tier-status-met{color:var(--color-primary-dark)}.s-conditional-offer-tier-status-unmet{--tw-text-opacity:1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.s-conditional-offer-tier-status-check{height:0.75rem;width:0.75rem;flex-shrink:0}.s-conditional-offer-tier-status-lock{height:0.625rem;width:0.625rem;flex-shrink:0}.s-conditional-offer-tier-body{display:flex;min-width:0px;flex-direction:column;gap:0.125rem}.s-conditional-offer-tier-title{font-size:0.75rem;line-height:1rem;font-weight:700;color:var(--color-primary-dark)}.s-conditional-offer-tier-text{font-size:0.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity:1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.s-conditional-offer-tier-text-met{text-decoration-line:line-through}.s-conditional-offer-skeleton-text{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:0.375rem}";
 
+/** Root of every translation key this component uses. */
+const LANG = "blocks.cart_offer";
+/**
+ * Hard ceiling on the `salla.onReady()` wait.
+ *
+ * A REJECTED bootstrap was always handled; a NEVER-SETTLING one was not — and an
+ * unbounded await gates the first `refresh()`, i.e. the entire component. Timing out
+ * costs at worst one early request, which `refresh()` already treats as a retryable,
+ * non-terminal condition.
+ */
+const ON_READY_TIMEOUT_MS = 3000;
+/**
+ * Absolute ceiling on the loading skeleton.
+ *
+ * The skeleton is a TRANSIENT state, never a resting one: past this point something has
+ * gone wrong that no future code change should be able to turn back into a permanent
+ * shimmer, and rendering nothing is strictly better than a spinner that never stops.
+ */
+const SKELETON_TIMEOUT_MS = 8000;
+/**
+ * Back-off for a cart lookup that could not ANSWER — one entry per retry, so the length of
+ * the list is the bound.
+ *
+ * An unknown count renders nothing, and nothing else re-asks: every other lookup hangs off
+ * `refresh()` or `cart::updated`, and a shopper who is just looking at their cart triggers
+ * neither. Without this a connection that drops for a second at mount hides a live offer
+ * for the whole page view. BOUNDED, because a lookup that keeps failing is not going to be
+ * rescued by asking for ever — after the last entry "hidden" is the final answer until the
+ * cart changes.
+ */
+const CART_LOOKUP_RETRY_DELAYS_MS = [1000, 2000, 4000];
+/**
+ * How a cart ITEM ROW identifies itself, in document order.
+ *
+ * TWO independent markers on purpose: `data-testid` is the platform's own convention and
+ * `form[id^="item-"]` is what every Twilight cart template has always emitted, so a theme
+ * that drops one still answers the other. Deliberately NOT a column class — see
+ * `CART_COLUMN_SELECTOR`.
+ */
+const CART_ITEM_SELECTOR = '[data-testid^="store-cart-item-"], form[id^="item-"]';
+/**
+ * The FALLBACK column selectors, used only when no item row exists — i.e. an EMPTY cart,
+ * where the column is real but has nothing in it.
+ *
+ * `.main-content` is raed's own class and means nothing in another theme, which is exactly
+ * why it can never be the primary strategy: it is consulted after the item-row lookup has
+ * already failed, and its failure is non-fatal.
+ */
+const CART_COLUMN_SELECTOR = '.main-content, [data-cart-items]';
+/**
+ * How far UP from the host we look for the row that holds the items column. The theme
+ * mounts the host as a direct sibling of that row (level 0); the extra levels only cover a
+ * theme that wraps the host in a div or two.
+ */
+const RELOCATION_ANCESTOR_LIMIT = 3;
+/**
+ * Bounded wait for a cart-items column the HTML parser has not produced YET.
+ *
+ * `<salla-conditional-offer>` is parsed BEFORE the two-column row that follows it, so on a
+ * page where the bundle is already registered the first attempt legitimately runs against a
+ * DOM with no cart in it. Past this deadline the full-width banner is the final answer.
+ */
+const RELOCATION_WATCH_MS = 5000;
+/**
+ * Clear space kept between the ⓘ popover and the viewport edge when it is nudged back
+ * inside. Purely cosmetic — one gutter, both edges, both directions.
+ */
+const TOOLTIP_VIEWPORT_GUTTER_PX = 8;
+/**
+ * How close the caret may get to the popover's own rounded corner.
+ *
+ * The caret chases the ⓘ icon; once the box has been nudged away from a viewport edge the
+ * icon can end up beyond the box's corner radius, and a caret drawn there detaches from
+ * the panel. Past this inset it stops following and the popover's EDGE points at the icon
+ * instead.
+ */
+const TOOLTIP_CARET_INSET_PX = 16;
+/** Source of the per-instance suffix on every `id` this component renders — see `instanceId`. */
+let instanceCount = 0;
+/**
+ * Every shopper-facing sentence frame comes from the platform's `blocks.cart_offer.*`
+ * translations (read through `trans`); the reward wording itself is server-rendered as
+ * `discounts[].reward_label`.
+ *
+ * These are the fallbacks for a storefront locale whose platform dictionary has no
+ * `blocks.cart_offer` block yet: the platform resolves a locale's dictionary as a whole
+ * file, with no per-key fallback, so without them such a storefront would render a banner
+ * with no text at all.
+ */
+const EN_FALLBACKS = {
+    badges_summary: ':completed of :total offers unlocked',
+    congrats: 'Congratulations! You’ve unlocked all rewards in this promotion',
+    details_title: 'Offer details',
+    free_gift: 'Free Gift',
+    free_products_title: 'Free products selected from the offer',
+    guidance_conditions_unmet: 'Your cart doesn’t meet the conditions for the next reward yet',
+    guidance_next: 'Add :remaining and get :reward',
+    guidance_next_generic: 'Add :remaining to unlock the next reward',
+    manage_offer: 'Manage offer',
+    tier_requirement: 'Spend :threshold and get :reward',
+    tier_requirement_count: 'Buy :threshold and get :reward',
+    tier_requirement_count_generic: 'Buy :threshold to unlock this offer',
+    tier_requirement_generic: 'Spend :threshold to unlock this offer',
+    tier_title: 'Offer (:number)',
+};
+/** The gift price label reuses the platform's existing "free of charge" string. */
+const FREE_LABEL_KEY = 'pages.checkout.free_charge';
+const FREE_LABEL_FALLBACK = 'Free';
+/**
+ * Escape a merchant-controlled string before it is substituted into a translation
+ * template that we then render with `innerHTML`.
+ *
+ * `innerHTML` is unavoidable for the guidance and tier lines: their amount halves carry
+ * `salla.money()` markup (`<i class=sicon-sar>` when the store uses the SAR symbol).
+ * `lang.js` fills placeholders with a plain string replace and escapes nothing, and
+ * `reward_label` is produced by `theme_trans()`, i.e. merchant-overridable copy — so the
+ * untrusted half has to be escaped here.
+ */
+function escapeHtml(value) {
+    const holder = document.createElement('div');
+    holder.textContent = value ?? '';
+    return holder.innerHTML;
+}
+/**
+ * The ⓘ popover's prose, read from `details.rules` and from NOWHERE else.
+ *
+ * `CartOffersTransformer::transformConditionalOffer` sends the merchant's authored offer
+ * message under `details.rules` and holds `description` at `''` on purpose: the SHIPPED
+ * `salla-conditional-offer` renders `description` into its subtitle today, so carrying the
+ * message there would have rewritten live storefront copy on every store the moment the
+ * backend deployed. One value, one key — so this must NOT fall back to `description`, or
+ * the two sources diverge again the first time some other producer fills it.
+ *
+ * Everything absent-ish collapses to `null`, i.e. render no subtitle at all rather than an
+ * empty element or the string "undefined":
+ *
+ * - key MISSING — an older Store deploy sends no `rules` at all;
+ * - EMPTY STRING — a live store payload sent `rules: ''` verbatim,
+ *   because `$offer->message` was null and the transformer short-circuits to `''`;
+ * - WHITESPACE — `strip_tags()` on a message that was only markup leaves `" "`;
+ * - an ARRAY — the `SpecialOffer` model's own `rules` column is a rule LIST, so a future
+ *   producer confusing the two would hand us one; keep the usable strings, drop the rest;
+ * - anything else (number, object, null) is not prose and is discarded.
+ */
+function readOfferRules(offer) {
+    const rules = offer?.details?.rules;
+    if (typeof rules === 'string') {
+        const trimmed = rules.trim();
+        return trimmed === '' ? null : trimmed;
+    }
+    if (Array.isArray(rules)) {
+        const joined = rules
+            .filter((entry) => typeof entry === 'string')
+            .map(entry => entry.trim())
+            .filter(entry => entry !== '')
+            .join(' ');
+        return joined === '' ? null : joined;
+    }
+    return null;
+}
+/*
+ * ---------------------------------------------------------------------------
+ * Inline icons
+ * ---------------------------------------------------------------------------
+ * Three inline SVGs replace the check, lock and information icon-font glyphs.
+ * (The old class names are deliberately not spelled out here: the build keeps this
+ * comment in a dev bundle, and a stray literal would defeat the grep that proves the
+ * glyphs are gone.) They are INLINED AS JSX rather than imported through
+ * `stencil-inline-svg` + `innerHTML` (the other pattern in this repo) for three
+ * reasons: no build-plugin dependency in the one component that needs it, no
+ * asset path to resolve once this ships as a CDN-hosted bundle, and — because
+ * the badge renders once PER TIER — no duplicated `id` / `clip-path` in the DOM.
+ *
+ * Three invariants, all load-bearing:
+ *
+ * 1. `fill="currentColor"`. The met badge is teal and the unmet badge is grey
+ *    purely through `tier-status-met` / `tier-status-unmet`, which set `color`.
+ *    Hardcoding a fill here would freeze both states to one colour.
+ *
+ * 2. NO `width` / `height` attribute. The three sources have DIFFERENT intrinsic
+ *    sizes (10 / 14 / 16). Left on the element those would leak straight into the
+ *    layout and resize the badge each source was dropped into. Size comes from the
+ *    caller's utility class instead, so the chip and trigger keep the exact box they
+ *    have today. Beware when picking that size: NONE of the three glyphs fills its
+ *    viewBox. The check disc spans 83.3% of its 10-unit box, the lock 75% wide and
+ *    83.3% tall of its 16-unit box, the info disc 83.3% of its 14-unit box. Size by the
+ *    ink you want to SEE, not by the box.
+ *
+ * 3. NO `id` / `clip-path` / `clipPath`. A check icon source that
+ *    wrapped its path in `<g clip-path="url(#clip0_...)">` shipped NO
+ *    `<defs>` defining that clipPath — an unresolvable clip-path reference makes
+ *    the browser drop the element, so the icon rendered as nothing. The wrapper is
+ *    stripped and only the `<path>` kept. (`information-fill.svg` and
+ *    `lock-fill.svg` were checked and are clean — no `<g>`, no ids, no defs.)
+ *
+ * All three are decorative: the accessible name lives on the ancestor (the badges
+ * row's `role="img"` + "N of M" label, and the ⓘ trigger button's `aria-label`),
+ * so each carries `aria-hidden` + `focusable="false"` (the latter for IE/Edge
+ * legacy, which otherwise puts SVGs in the tab order).
+ */
+/** Filled circle enclosing a check — the MET tier status. Source: 10x10. */
+const CheckCircleIcon = (props = {}) => (h("svg", { class: props.class, viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false" }, h("path", { d: "M5.00016 9.16634C2.69898 9.16634 0.833496 7.30084 0.833496 4.99967C0.833496 2.69849 2.69898 0.833008 5.00016 0.833008C7.30133 0.833008 9.16683 2.69849 9.16683 4.99967C9.16683 7.30084 7.30133 9.16634 5.00016 9.16634ZM4.58458 6.66634L7.53087 3.72006L6.94162 3.13081L4.58458 5.48784L3.40608 4.3093L2.81683 4.89859L4.58458 6.66634Z", fill: "currentColor" })));
+/** Filled padlock — the UNMET tier status. Source: 16x16. */
+const LockIcon = (props = {}) => (h("svg", { class: props.class, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false" }, h("path", { d: "M12.6667 6.66683H13.3333C13.7015 6.66683 14 6.9653 14 7.3335V14.0002C14 14.3684 13.7015 14.6668 13.3333 14.6668H2.66667C2.29848 14.6668 2 14.3684 2 14.0002V7.3335C2 6.9653 2.29848 6.66683 2.66667 6.66683H3.33333V6.00016C3.33333 3.42284 5.42267 1.3335 8 1.3335C10.5773 1.3335 12.6667 3.42284 12.6667 6.00016V6.66683ZM11.3333 6.66683V6.00016C11.3333 4.15922 9.84093 2.66683 8 2.66683C6.15905 2.66683 4.66667 4.15922 4.66667 6.00016V6.66683H11.3333ZM7.33333 9.3335V12.0002H8.66667V9.3335H7.33333Z", fill: "currentColor" })));
+/** Filled circle enclosing an `i` — the ⓘ tooltip trigger. Source: 14x14. */
+const InformationIcon = (props = {}) => (h("svg", { class: props.class, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false" }, h("path", { d: "M7.00033 12.8337C3.77866 12.8337 1.16699 10.222 1.16699 7.00033C1.16699 3.77866 3.77866 1.16699 7.00033 1.16699C10.222 1.16699 12.8337 3.77866 12.8337 7.00033C12.8337 10.222 10.222 12.8337 7.00033 12.8337ZM6.41699 6.41699V9.91699H7.58366V6.41699H6.41699ZM6.41699 4.08366V5.25033H7.58366V4.08366H6.41699Z", fill: "currentColor" })));
 const SallaConditionalOffer$1 = /*@__PURE__*/ proxyCustomElement(class SallaConditionalOffer extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.offer = null;
-        this.products = {};
         this.isLoading = false;
         this.canRender = true;
+        /** Free-gift cart LINES belonging to this offer — the "ادارة العرض" card. */
+        this.gifts = [];
+        /**
+         * How many LINES the cart holds — `null` while that is genuinely UNKNOWN.
+         *
+         * TRI-STATE on purpose, and the whole of the empty-cart fix rests on it. `0` renders
+         * NOTHING; `null` renders normally. Collapsing the two would hide the banner on every
+         * populated cart for as long as the first `details()` request is in flight, which is
+         * the flicker this must not trade one bug for.
+         */
+        this.cartItemCount = null;
+        /** The tooltip is open while hovered OR while pinned by a click (the mobile path). */
+        this.isTooltipHovered = false;
+        this.isTooltipPinned = false;
+        /** "ادارة العرض" — open by default, the gifts card starts expanded. */
+        this.isGiftsOpen = true;
+        /**
+         * What makes this instance's `id`s its OWN. The banner can legitimately mount more than
+         * once on a page, and with fixed ids the second instance's `aria-describedby` /
+         * `aria-controls` resolve to the FIRST one's popover and gifts card.
+         */
+        this.instanceId = ++instanceCount;
+        /**
+         * Monotonic generation counter guarding `refresh()`. Two cart mutations in quick succession issue
+         * two `offers()` requests, and nothing guarantees they SETTLE in the order they were
+         * sent — without this, a slow first response can land after a fast second one and
+         * render a `current_value` that is already stale.
+         */
+        this.refreshGeneration = 0;
+        /** The same guard for the independent gift-lines lookup. */
+        this.giftsGeneration = 0;
+        /**
+         * The open coalescing window: the timer that will run the ONE refresh pass a burst of
+         * `cart::updated` events is entitled to. `null` whenever no burst is in flight.
+         *
+         * The generation guards above are untouched by this and still do their own job — the
+         * window collapses events that have not been ASKED about yet, they discard answers to
+         * questions that have since been superseded, and a burst that straddles the window
+         * (an event arriving while a pass is already in flight) needs both.
+         */
+        this.cartRefreshTimer = null;
+        /**
+         * "A burst has been seen and its pass has not run yet."
+         *
+         * Survives a disconnect on purpose, exactly as `skeletonDeadline` does: a theme that
+         * MOVES the host in the DOM mid-burst (disconnect + reconnect, same instance) would
+         * otherwise drop the trailing pass and rest on pre-burst data forever, since nothing
+         * re-runs `refresh()` but another `cart::updated`. `connectedCallback` re-arms it.
+         */
+        this.cartRefreshPending = false;
+        /**
+         * Set once `load()` has asked for `cart::updated`, and never cleared: it is what lets
+         * `connectedCallback` tell a RECONNECT (put the listener back) from the first connect,
+         * which runs before `componentWillLoad` and must leave the subscription to it.
+         */
+        this.wantsCartUpdates = false;
+        /** Whether `cartUpdatedHandler` is on `cart::updated` RIGHT NOW — the double-registration guard. */
+        this.isListeningToCartUpdates = false;
+        /** The armed cart-lookup retry; `null` whenever none is. See `CART_LOOKUP_RETRY_DELAYS_MS`. */
+        this.cartLookupRetryTimer = null;
+        /** How many of those retries this episode has SPENT — the bound. */
+        this.cartLookupRetries = 0;
+        /** "A retry is owed" — survives a disconnect for the same reason `cartRefreshPending` does. */
+        this.cartLookupRetryPending = false;
+        /**
+         * Set by the ONE branch of `refresh()` that returns without asking for the offer: the
+         * cart was reported empty.
+         *
+         * That branch is right whenever the report is, and unrecoverable whenever it is not —
+         * nothing re-runs `refresh()` except `cart::updated`, which a shopper who never
+         * touches the cart never emits. So the branch now leaves this behind, and the cart
+         * lookup it kicks off clears it by re-running `refresh()` if the count comes back
+         * `>= 1`. See both sites; the latch is what keeps that to a recovery rather than a
+         * second offer request on every load.
+         */
+        this.deferredByEmptyCart = false;
+        /** Set by `disconnectedCallback`, so a late response cannot set state on a dead host. */
+        this.isDisconnected = false;
+        /** Backstop timer that guarantees the skeleton is never a resting state. */
+        this.skeletonWatchdog = null;
+        /**
+         * WHEN the current skeleton must be gone by — the authority, with `skeletonWatchdog`
+         * demoted to a mere handle.
+         *
+         * A timer handle answers "is a timer pending", which is not the question. The question
+         * is "is this skeleton past its deadline", and the two come apart precisely when it
+         * matters: a handle that was cleared, consumed, or never armed reads exactly like one
+         * that is still counting down. Keeping the deadline as a timestamp means the watchdog
+         * can always be REBUILT from state — which is what `ensureSkeletonIsWatched` does, on
+         * every render, so a skeleton on screen can never be one nothing is watching.
+         *
+         * `0` means "not loading"; anything else is an absolute `Date.now()` deadline.
+         */
+        this.skeletonDeadline = 0;
+        /** Latched once the host sits in the items column, so it can never be moved twice. */
+        this.hasRelocated = false;
+        /** `componentDidRender` fires BEFORE the first `componentDidLoad`; this orders them. */
+        this.hasLoaded = false;
+        /** Observer waiting for a column that the parser has not emitted yet. */
+        this.relocationObserver = null;
+        /** Deadline that bounds that wait. */
+        this.relocationWatchTimer = null;
+        /** Set when the wait expired: stop re-arming, keep the cheap per-render retry. */
+        this.relocationWatchExpired = false;
+        /** "No column found" is said ONCE per instance, not on every render. */
+        this.relocationLogged = false;
+        /**
+         * The `cart::updated` payload is ignored for everything EXCEPT the item count — it may
+         * legitimately arrive with no `items` at all (`api.cart.latest` is not in
+         * `CartPresenter::$routesWithItems`). Refetch and take the server's `current_value`.
+         *
+         * `count` is the one field that is safe to read here, and reading it is what fixes the
+         * live removal path. `SallaCartEvent.updated()` dispatches `{ ...data.cart }`
+         * (twilight/src/event/cart.js:114) and writes `count` from that same object into
+         * `cart.summary` one line above it, so the field is first-class — unlike `items`, which
+         * genuinely is not. Taking it SYNCHRONOUSLY, before any request goes out, is the point:
+         * see `readCartCountFromEvent`.
+         *
+         * Two independent refetches fan out from here and are NOT chained: the offer payload
+         * (thresholds + reward labels) and the gift cart LINES. The gift lookup is shared
+         * process-wide (`shared/cart-free-gifts`), so the item-offer badges, the summary card
+         * and this banner still cost ONE `details()` request between them per mutation.
+         *
+         * Both of those refetches are COALESCED — see `CART_UPDATE_COALESCE_MS`. Only the
+         * count read below is per-event.
+         *
+         * ONE reference per instance rather than an inline closure, because `salla.event.off`
+         * can only remove the exact function `on` was given.
+         */
+        this.cartUpdatedHandler = (payload) => {
+            // FIRST, and synchronously — see `readCartCountFromEvent`. `refresh()` reads
+            // `cartItemCount` to decide whether to raise a skeleton at all, so the count has
+            // to be current before it runs, not a request later. This is also what keeps the
+            // coalescing window below invisible to the shopper on the path that matters:
+            // emptying the cart hides the banner on THIS line, not when the window closes.
+            this.readCartCountFromEvent(payload);
+            // The cart moved, so the retry episode for the OLD cart is over; the pass below
+            // re-asks, and opens a new one if that cannot answer either.
+            this.clearCartLookupRetry();
+            /**
+             * Raises `cartRefreshPending` on THIS line, and that — not the delayed pass — is
+             * what voids every cart answer older than this event: `loadCart()` publishes
+             * nothing while it is up. Left valid for the length of the window, a lookup
+             * landing inside it wrote its old positive count over the `0` this handler had
+             * just read, and the banner came back over an emptied cart.
+             */
+            this.scheduleCartRefresh();
+        };
     }
+    /**
+     * SYNCHRONOUS on purpose — an `async` version of this hook is what made the whole
+     * component invisible.
+     *
+     * Stencil awaits whatever `componentWillLoad` returns BEFORE it calls `render()` for
+     * the first time (`dispatchHooks` → `enqueue(maybePromise, () => updateComponent(...))`).
+     * An `async componentWillLoad` chaining round trips inside that promise leaves the host
+     * element literally empty for the whole chain, and FOREVER if the last of them never
+     * settles.
+     *
+     * Same posture as `salla-cart-summary-card` ("Sync: returning a promise would make
+     * Stencil defer first paint"): paint now, fill in as the data lands.
+     */
     componentWillLoad() {
-        salla.onReady().then(() => {
-            if (!salla.config.get('store.features')?.includes('conditional-offer') || (salla.storage.get("cart") !== '' && !salla.storage.get("cart")?.summary?.count)) {
-                throw new Error('feature or cart object does not existed');
+        /**
+         * The escape hatch is no longer something a single well-placed call has to get
+         * right. `ensureSkeletonIsWatched()` runs from `startLoading()`, from
+         * `connectedCallback` and from EVERY `componentDidRender`, so the watchdog is a
+         * function of state rather than of call order: whatever raises the skeleton, the
+         * render that paints it re-establishes the deadline behind it.
+         *
+         * Kept here all the same, as the first statement and ahead of anything that can
+         * throw, for the case where `isEnabled()` is already true — it costs one boolean
+         * read when it is not.
+         */
+        this.ensureSkeletonIsWatched();
+        /**
+         * The whole body is guarded. A synchronous throw here is invisible — Stencil still
+         * renders the component after a throwing `componentWillLoad` — and it has now cost
+         * two rounds, so it is caught and logged explicitly rather than trusted not to
+         * happen.
+         */
+        try {
+            if (this.isEnabled())
+                this.startLoading();
+            /**
+             * `.catch` is LOAD-BEARING. `load()` is a floating promise — `componentWillLoad`
+             * must stay synchronous (see above) and cannot await it — so anything throwing
+             * inside it becomes an unhandled rejection: invisible, and fatal, because
+             * `refresh()` is the only thing that lowers `isLoading` in the happy path.
+             *
+             * RECOVERY BEFORE LOGGING, here and everywhere else in this file — see `safeLog`.
+             */
+            this.load().catch(error => {
+                this.stopLoading();
+                this.safeLog('load() failed', error);
+            });
+        }
+        catch (error) {
+            this.stopLoading();
+            this.safeLog('componentWillLoad threw synchronously', error);
+        }
+    }
+    /**
+     * Logging that CANNOT throw.
+     *
+     * `salla.logger.warn` is not safe to call during init: `base/src/logger.ts` opens every
+     * call with `if (!salla.config.isDebug()) return;`, so it raises a TypeError whenever
+     * `salla.config` has not been installed yet — precisely the window `componentWillLoad`
+     * runs in. Every recovery path in this component used to log BEFORE it recovered, so a
+     * single throw in here silently skipped the recovery it was announcing.
+     */
+    safeLog(message, error) {
+        // The component name is passed as its OWN argument rather than interpolated into
+        // `message`: the format string stays a static literal, which keeps the caller's
+        // text out of the formatter.
+        try {
+            salla.logger.warn('salla-conditional-offer::', message, error);
+        }
+        catch (loggerFailure) {
+            /* the SDK logger is the only sink — never let logging break the caller */
+        }
+    }
+    /**
+     * Cleared on RECONNECT, not just set on disconnect. `componentWillLoad` runs once per
+     * instance, so an element that a theme moves in the DOM (disconnect + reconnect keeps
+     * the same instance) would otherwise stay permanently latched as "dead" and stop
+     * updating on every later `cart::updated`.
+     */
+    connectedCallback() {
+        this.isDisconnected = false;
+        /**
+         * `disconnectedCallback` cleared the watchdog, and `componentWillLoad` does NOT run
+         * again on reconnect — so a host the theme moves in the DOM while still loading
+         * would come back with the skeleton up and no timer behind it. The deadline
+         * survives the move, so what is rebuilt here is only the timer.
+         */
+        this.ensureSkeletonIsWatched();
+        /**
+         * A host that was genuinely REMOVED gave its listener up (see `disconnectedCallback`)
+         * and was deaf until now, so it takes the listener back and is OWED a pass for
+         * whatever it missed. Skipped on the first connect, where `load()` has not asked
+         * yet, and on a plain move, where the listener never left.
+         */
+        if (this.wantsCartUpdates && !this.isListeningToCartUpdates && this.subscribeToCartUpdates()) {
+            this.cartRefreshPending = true;
+        }
+        /**
+         * Same contract as the watchdog above: the TIMER did not survive the move but the
+         * fact that a refresh is owed did, so it is re-armed here rather than lost. A host
+         * moved between the last `cart::updated` of a burst and the end of its window must
+         * still converge on that burst's cart state.
+         */
+        if (this.cartRefreshPending)
+            this.scheduleCartRefresh();
+        // ...and the same again for a cart-lookup retry that was still counting down.
+        if (this.cartLookupRetryPending)
+            this.scheduleCartLookupRetry();
+    }
+    disconnectedCallback() {
+        this.isDisconnected = true;
+        /**
+         * The timer goes; `cartRefreshPending` deliberately stays — see `connectedCallback`.
+         */
+        if (this.cartRefreshTimer !== null) {
+            clearTimeout(this.cartRefreshTimer);
+            this.cartRefreshTimer = null;
+        }
+        // Likewise: the timer goes, `cartLookupRetryPending` stays.
+        if (this.cartLookupRetryTimer !== null) {
+            clearTimeout(this.cartLookupRetryTimer);
+            this.cartLookupRetryTimer = null;
+        }
+        /**
+         * The LISTENER goes too, but only for a host that is really gone. This hook fires
+         * synchronously on EVERY removal — our own relocation and a theme moving the host
+         * included — and those have reconnected by the time the microtask runs, so they
+         * keep the listener and miss nothing. Same posture as `salla-cart-summary-card`.
+         */
+        Promise.resolve().then(() => {
+            if (this.isDisconnected)
+                this.unsubscribeFromCartUpdates();
+        });
+        /**
+         * The TIMER goes; the DEADLINE stays. A host the theme moves in the DOM must come
+         * back to the deadline it already had rather than to a fresh full window — and
+         * `clearSkeletonWatchdog()` resets both, so it is deliberately not used here.
+         */
+        if (this.skeletonWatchdog !== null) {
+            clearTimeout(this.skeletonWatchdog);
+            this.skeletonWatchdog = null;
+        }
+        this.stopWatchingForItemsColumn();
+    }
+    componentDidLoad() {
+        this.hasLoaded = true;
+        this.relocateIntoItemsColumn();
+    }
+    /**
+     * Whether the host currently puts anything on the page.
+     *
+     * Gates the relocation: a host that renders nothing contributes no layout and must not
+     * be moved around the document either. It becomes true on the render that first paints
+     * real content, and `componentDidRender` runs inside the same frame as that render —
+     * before the browser paints it — so the move still lands ahead of the first visible
+     * pixel and there is no jump.
+     */
+    isShowingSomething() {
+        return this.canRender && this.hasCartItems();
+    }
+    /**
+     * Every later render re-attempts the move. Free once it has happened (one boolean
+     * read), and it is what covers the ordinary late-arrival case without any timer: the
+     * skeleton paints while the row is still being parsed, and the render that replaces it
+     * with the offer runs against a complete DOM.
+     */
+    componentDidRender() {
+        if (this.hasLoaded)
+            this.relocateIntoItemsColumn();
+        // After the popover exists and has a width, never before — it is measured here and
+        // adjusted with CSS custom properties, which do NOT re-enter render().
+        this.positionTooltip();
+        /**
+         * THE INVARIANT: a skeleton that has just been painted has a deadline behind it.
+         * Restoring it here — rather than trusting whichever branch raised `isLoading` to
+         * have remembered — is what makes a permanently stuck shimmer unreachable, however
+         * the loading state was entered. A no-op (one boolean read) whenever we are not
+         * loading, which is almost always.
+         */
+        this.ensureSkeletonIsWatched();
+    }
+    // ---------------------------------------------------------------------------------
+    // Relocation — the banner belongs above the CART ITEMS, not above the whole page
+    // ---------------------------------------------------------------------------------
+    /**
+     * Move the host into the cart-items column.
+     *
+     * The theme mounts this component ABOVE the two-column row (`cart.twig`), so it spans
+     * the items column AND the order summary; the design puts it above the ITEMS only,
+     * with the summary starting level with it. Theme changes are out of scope, so the
+     * component places itself.
+     *
+     * MOVING rather than re-sizing is deliberate. A moved host inherits whatever width the
+     * column has — at every breakpoint, in RTL and LTR, and on a resize — and on mobile,
+     * where the column is the only column, the move is a no-op visually, which is exactly
+     * the mobile layout. A hard-coded `calc(100% - 384px)` is raed's number and would
+     * be wrong in any other theme.
+     *
+     * NEVER throws, and never leaves the component unrendered: a cart whose column cannot
+     * be identified keeps the full-width banner. That is a degraded LAYOUT, not a degraded
+     * component.
+     */
+    relocateIntoItemsColumn() {
+        if (this.hasRelocated)
+            return;
+        // Nothing on screen yet: no host to place, and nothing that could jump. Retried on
+        // every later render, so the move happens on the one that first shows content.
+        if (!this.isShowingSomething())
+            return;
+        try {
+            const host = this.hostEl;
+            if (!host?.parentElement)
+                return;
+            const column = this.findItemsColumn(host);
+            if (!column) {
+                this.watchForItemsColumn();
+                return;
             }
-        })
-            .then(() => salla.api.cart.offers())
-            .then(({ data }) => {
-            this.offer = data.find(offer => offer.type === "conditional");
-            if (!this.offer) {
-                this.canRender = false;
+            /**
+             * Latched BEFORE the DOM write. Moving a connected element fires
+             * `disconnectedCallback` + `connectedCallback` SYNCHRONOUSLY and notifies the
+             * observer below, so everything that can re-enter here must already see "done".
+             */
+            this.hasRelocated = true;
+            this.stopWatchingForItemsColumn();
+            // Already exactly where it belongs — a theme that mounts it inside the column.
+            if (column === host.parentElement && column.firstElementChild === host)
                 return;
+            column.insertBefore(host, column.firstChild);
+        }
+        catch (error) {
+            // A selector engine or a DOM that surprises us must not cost the banner. Latch
+            // so a strategy that throws is not retried on every subsequent render.
+            this.hasRelocated = true;
+            this.stopWatchingForItemsColumn();
+            this.safeLog('relocating the banner into the cart items column failed', error);
+        }
+    }
+    /**
+     * The cart-items column, found WITHOUT depending on any single theme's class names.
+     *
+     * From the host OUTWARDS: at each level look at the elements that FOLLOW it — the row
+     * is always a later sibling, never an ancestor — and inside each of them look for a
+     * cart ITEM row. The column is then that row's own child which contains the item, i.e.
+     * precisely the element whose width the banner should inherit.
+     *
+     * Scoping to following siblings is what stops an unrelated `form[id^="item-"]` (a
+     * mini-cart drawer, a footer widget) from being mistaken for the cart.
+     */
+    findItemsColumn(host) {
+        let node = host;
+        for (let level = 0; node && level <= RELOCATION_ANCESTOR_LIMIT; level++) {
+            for (const row of this.getFollowingSiblings(node)) {
+                /**
+                 * The host is ALREADY beside the cart items, so its own parent is the
+                 * column. Without this, the item row itself would be treated as the row to
+                 * look inside and the banner would land inside a cart item.
+                 */
+                if (node === host && this.matches(row, CART_ITEM_SELECTOR))
+                    return host.parentElement;
+                const column = this.findColumnWithin(row, host);
+                if (column)
+                    return column;
             }
-            this.isLoading = true;
-            this.offer.details.discounts.unshift(({ value: 0, min_spend: 0 }));
-            return this.updateInitialOfferValue();
-        }).then(() => {
-            if (!this.offer)
+            node = node.parentElement;
+            if (!node || node === document.body || node === document.documentElement)
+                break;
+        }
+        return null;
+    }
+    getFollowingSiblings(node) {
+        const siblings = [];
+        for (let sibling = node.nextElementSibling; sibling; sibling = sibling.nextElementSibling) {
+            siblings.push(sibling);
+        }
+        return siblings;
+    }
+    /** The child of `row` that holds the cart items, if `row` is the two-column row. */
+    findColumnWithin(row, host) {
+        const item = row.querySelector(CART_ITEM_SELECTOR);
+        const column = item ? this.climbToChildOf(item, row) : null;
+        /**
+         * The item markers are the PRIMARY signal because every theme emits them. The class
+         * list is the fallback for a cart that is legitimately EMPTY — the column exists,
+         * the item rows do not — and is never reached while an item row is present.
+         */
+        const found = column ?? row.querySelector(CART_COLUMN_SELECTOR);
+        if (!found || found === host || found.contains(host))
+            return null;
+        return found;
+    }
+    /**
+     * Walk up from `node` to the DIRECT CHILD of `ancestor` that contains it.
+     *
+     * Not "the parent of the item rows": a theme that nests them (`col > ul > li > form`)
+     * would hand back the `<ul>`, and a banner is not a list item. The row's own child is
+     * the column in every shape.
+     */
+    climbToChildOf(node, ancestor) {
+        let current = node;
+        while (current && current.parentElement && current.parentElement !== ancestor) {
+            current = current.parentElement;
+        }
+        return current?.parentElement === ancestor ? current : null;
+    }
+    matches(element, selector) {
+        return typeof element.matches === 'function' && element.matches(selector);
+    }
+    /**
+     * Wait for a column that does not exist YET, then stop waiting.
+     *
+     * Bounded on both sides: the observer is disconnected the moment the move succeeds, and
+     * a deadline retires it if it never does. Where there is no `MutationObserver` (older
+     * browsers, and the spec DOM) this degrades to the per-render retry in
+     * `componentDidRender`, which is the path that matters anyway.
+     */
+    watchForItemsColumn() {
+        if (this.hasRelocated || this.relocationWatchExpired || this.relocationObserver) {
+            return;
+        }
+        if (typeof MutationObserver === 'undefined') {
+            this.logNoItemsColumn();
+            return;
+        }
+        this.relocationObserver = new MutationObserver(() => this.relocateIntoItemsColumn());
+        this.relocationObserver.observe(document.documentElement, { childList: true, subtree: true });
+        this.relocationWatchTimer = setTimeout(() => {
+            this.relocationWatchTimer = null;
+            this.relocationWatchExpired = true;
+            this.stopWatchingForItemsColumn();
+            this.logNoItemsColumn();
+        }, RELOCATION_WATCH_MS);
+    }
+    stopWatchingForItemsColumn() {
+        if (this.relocationObserver) {
+            try {
+                this.relocationObserver.disconnect();
+            }
+            catch (error) {
+                /* an observer that cannot be disconnected must not break a DOM move */
+            }
+            this.relocationObserver = null;
+        }
+        if (this.relocationWatchTimer !== null) {
+            clearTimeout(this.relocationWatchTimer);
+            this.relocationWatchTimer = null;
+        }
+    }
+    /** Said ONCE per instance: the full-width banner is a layout note, not a per-render alarm. */
+    logNoItemsColumn() {
+        if (this.relocationLogged)
+            return;
+        this.relocationLogged = true;
+        this.safeLog('no cart items column found — leaving the banner at full page width');
+    }
+    /**
+     * Guarantee that a raised skeleton has a live deadline behind it — idempotent, cheap,
+     * and called from EVERY path that can leave one on screen (`startLoading`,
+     * `connectedCallback`, and `componentDidRender`).
+     *
+     * This is the structural answer to "a skeleton with nothing watching it". The old shape
+     * armed the timer only inside `startLoading()`, and only when the HANDLE happened to be
+     * null — so any path that raised `isLoading` without going through that guard, or that
+     * left a stale-looking handle behind, produced a shimmer that nothing would ever end.
+     * Re-checking on every render means the invariant is restored by the very act of
+     * painting the skeleton, whatever raised it.
+     *
+     * The deadline is set ONCE per loading episode and never pushed out, so a stream of
+     * `cart::updated` events cannot extend a skeleton indefinitely.
+     */
+    ensureSkeletonIsWatched() {
+        if (!this.isLoading)
+            return;
+        // Already counting down towards a deadline that is still in the future.
+        if (this.skeletonWatchdog !== null)
+            return;
+        const now = Date.now();
+        if (this.skeletonDeadline === 0)
+            this.skeletonDeadline = now + SKELETON_TIMEOUT_MS;
+        // A deadline already in the past (a timer that was cleared by a disconnect, or one
+        // that never got armed at all) is honoured on the next tick rather than waiting out
+        // another full window.
+        const remaining = Math.max(0, this.skeletonDeadline - now);
+        this.skeletonWatchdog = setTimeout(() => {
+            // Released before anything else can fail, so the handle never dangles.
+            this.skeletonWatchdog = null;
+            if (!this.isLoading)
                 return;
-            return this.getProducts();
-        }).then(() => {
-            if (!this.offer)
+            // Re-armed early, or the clock moved: finish the wait rather than firing short.
+            if (Date.now() < this.skeletonDeadline) {
+                this.ensureSkeletonIsWatched();
                 return;
-            salla.event.on("cart::updated", (updatedCart) => this.updateOfferValues(updatedCart));
-        })
-            .catch(error => {
-            this.canRender = false;
-            salla.logger.warn('salla-conditional-offer:: ', error);
-        }).finally(() => {
+            }
+            /**
+             * RECOVERY FIRST. Logging used to come first here, which meant a `salla.logger`
+             * that throws (see `safeLog`) consumed the timer WITHOUT dropping the skeleton
+             * and without printing anything — indistinguishable from "the watchdog never
+             * fired", and exactly what was observed live.
+             *
+             * Note that `safeLog` is SILENT on a production storefront: `salla.logger.warn`
+             * opens with `if (!salla.config.isDebug()) return;`. "No console output" is
+             * therefore never evidence that this did not run — only the dropped skeleton is.
+             */
             this.isLoading = false;
+            this.skeletonDeadline = 0;
+            this.safeLog(`still loading after ${SKELETON_TIMEOUT_MS}ms — dropping the skeleton`);
+        }, remaining);
+    }
+    clearSkeletonWatchdog() {
+        this.skeletonDeadline = 0;
+        if (this.skeletonWatchdog === null)
+            return;
+        clearTimeout(this.skeletonWatchdog);
+        this.skeletonWatchdog = null;
+    }
+    /**
+     * The ONLY way INTO the skeleton. Raising it and arming the watchdog that ends it are
+     * deliberately the SAME operation — keeping them apart is what let `refresh()` show a
+     * skeleton that nothing was watching. The existing deadline is kept rather than
+     * refreshed, so a stream of `cart::updated` events cannot push it out indefinitely.
+     */
+    startLoading() {
+        this.isLoading = true;
+        this.ensureSkeletonIsWatched();
+    }
+    /**
+     * The ONLY way out of the skeleton, so the watchdog can never outlive it. Every
+     * terminal state — loaded, no-eligible-offer, error — goes through here.
+     */
+    stopLoading() {
+        this.isLoading = false;
+        this.clearSkeletonWatchdog();
+    }
+    /**
+     * The async half of the load, deliberately NOT awaited by `componentWillLoad` so it
+     * can never gate the first paint. Every state it sets is `@State`, so each step
+     * re-renders on its own.
+     *
+     * NOTHING here is allowed to disable the component permanently.
+     */
+    async load() {
+        /**
+         * Subscribed FIRST, and unconditionally. Subscribing only after an offer had been
+         * found made every failure terminal: a cold load that saw no offer never
+         * subscribed, so the one signal that could revive the component — the shopper
+         * changing the cart — was never listened for.
+         *
+         * WRAPPED, because this runs BEFORE the SDK is known to be ready: `componentWillLoad`
+         * fires as soon as the element connects, which on a real storefront can beat
+         * `salla.event`'s own bootstrap. A throw here used to propagate out of `load()`,
+         * whose promise nobody awaited — so `refresh()` never ran and the skeleton became
+         * permanent. Losing the subscription costs live cart updates; losing `refresh()`
+         * costs the entire component, so the two failures must not share a fate.
+         *
+         * ...and "costs live cart updates" is not a price to pay for the whole page view
+         * either: a subscription that failed this early gets a second attempt once the SDK
+         * says it is ready. See `subscribeWhenSdkIsReady`.
+         */
+        this.wantsCartUpdates = true;
+        if (!this.subscribeToCartUpdates())
+            this.subscribeWhenSdkIsReady();
+        /**
+         * Fired HERE — beside the subscription, not behind the SDK wait and not behind
+         * `refresh()` — so the cart lookup races the offers request instead of queueing
+         * behind it. An empty cart is answered by the FIRST of the two to land, which is
+         * what keeps a shopper on an empty cart from seeing the banner flash before it
+         * decides to hide. Unawaited and non-rejecting for the same reason `load()` itself
+         * is: nothing about the cart lookup may gate the offer.
+         */
+        this.loadCart();
+        await this.waitForSdk();
+        await this.refresh();
+    }
+    /**
+     * `salla.onReady()`, bounded.
+     *
+     * The previous shape caught a REJECTED bootstrap but could not catch a never-settling
+     * one, even though its comment claimed to — and an unbounded await here is the single
+     * point at which the whole component can hang with nothing logged. Racing a timer
+     * turns "the SDK never signals ready" from fatal into "we ask a few seconds early",
+     * which `refresh()` already handles non-terminally and retries on `cart::updated`.
+     *
+     * Never rejects, and absorbs a synchronous throw from `onReady` itself.
+     */
+    waitForSdk() {
+        let ready;
+        try {
+            ready = Promise.resolve(salla.onReady?.());
+        }
+        catch (error) {
+            this.safeLog('salla.onReady() threw', error);
+            return Promise.resolve();
+        }
+        // The timer is captured and cleared: `Promise.race` abandons the loser but does
+        // NOT cancel it, so a bare `setTimeout` here would leave one dangling timer per
+        // mounted component (and, in specs, fire after the test that created it).
+        let timer;
+        const deadline = new Promise(resolve => {
+            timer = setTimeout(resolve, ON_READY_TIMEOUT_MS);
+        });
+        return Promise.race([
+            ready.catch(error => this.safeLog('salla.onReady() rejected', error)),
+            deadline,
+        ]).then(() => {
+            clearTimeout(timer);
         });
     }
-    getProducts() {
-        const freeProductIDs = this.offer.details.discounts.filter(({ type }) => type === DiscountType.FREE_PRODUCT).map(({ value }) => value).filter(Boolean);
-        if (freeProductIDs.length > 0) {
-            return salla.product.fetch({ source: 'selected', source_value: freeProductIDs }).then((response) => {
-                const data = response?.data;
-                if (data && Array.isArray(data)) {
-                    const updatedProducts = { ...this.products };
-                    data.forEach(({ id, url, image, name, price }) => {
-                        if (id && name && image?.url && url && price !== undefined) {
-                            updatedProducts[id] = { url, image, name, price };
-                        }
-                    });
-                    this.products = updatedProducts;
-                }
-            });
+    /**
+     * Put `cartUpdatedHandler` on `cart::updated` — at most ONCE, however many paths ask
+     * (`load()`, the SDK-ready retry, a reconnect).
+     *
+     * Never throws, and reports whether the listener is on: `salla.event.on` can throw
+     * this early (see `load()`), and the caller decides what a failure is worth.
+     */
+    subscribeToCartUpdates() {
+        if (this.isListeningToCartUpdates)
+            return true;
+        try {
+            salla.event.on("cart::updated", this.cartUpdatedHandler);
+            this.isListeningToCartUpdates = true;
+        }
+        catch (error) {
+            this.safeLog('cart::updated subscription failed', error);
         }
+        return this.isListeningToCartUpdates;
     }
-    updateInitialOfferValue() {
-        return salla.api.cart.details().then(({ data: { cart } }) => this.updateOfferValues(cart));
+    /** The other half of `subscribeToCartUpdates` — see `disconnectedCallback`. */
+    unsubscribeFromCartUpdates() {
+        if (!this.isListeningToCartUpdates)
+            return;
+        // Lowered FIRST: an `off` that throws must not leave a host that believes it is
+        // still subscribed, or a later reconnect would never re-register.
+        this.isListeningToCartUpdates = false;
+        try {
+            salla.event.off("cart::updated", this.cartUpdatedHandler);
+        }
+        catch (error) {
+            this.safeLog('cart::updated unsubscription failed', error);
+        }
     }
-    updateOfferValues({ items, sub_total }) {
-        const current_value = this.offer.details.based_on === OfferType.PRODUCT_COUNT ? items?.reduce((count, { quantity }) => count + quantity, 0) ?? 0 : sub_total;
-        //we need to assign the offer object a new reference to trigger re-rendering
-        this.offer = {
-            ...this.offer, details: {
-                ...this.offer?.details, current_value,
-            }
+    /**
+     * The second attempt for a subscription that threw before the SDK was up.
+     *
+     * Hung off `salla.onReady()` ITSELF, not off `waitForSdk()`: that wait gives up after
+     * `ON_READY_TIMEOUT_MS` so that it cannot hold the first paint, and an SDK that comes
+     * up later than that is exactly the one this is for. Floating for the same reason —
+     * nothing in `load()` awaits it, so a bootstrap that never settles costs the listener
+     * and nothing else.
+     */
+    subscribeWhenSdkIsReady() {
+        let ready;
+        try {
+            ready = Promise.resolve(salla.onReady?.());
+        }
+        catch (error) {
+            // `waitForSdk()` reports this same throw; there is no readiness to wait for.
+            return;
+        }
+        const subscribe = () => {
+            // A host that went away in the meantime re-subscribes in `connectedCallback`.
+            if (!this.isDisconnected)
+                this.subscribeToCartUpdates();
         };
-        return this.offer;
-    }
-    renderTooltip(discount) {
-        const productId = discount.value;
-        const productItem = this.products[productId];
-        const targetId = `avatar-product-${productId}`;
-        if (!productItem) {
-            salla.logger.error(`salla-conditional-offer:: there is no product with id (${discount.value})!`);
+        // `.then(f, f)`: a bootstrap that REJECTED is still the last word the SDK will have
+        // on the matter, and the attempt itself cannot throw.
+        ready.then(subscribe, subscribe);
+    }
+    /**
+     * Open (or extend) the coalescing window, so a burst of `cart::updated` events buys ONE
+     * refresh pass instead of two server round trips each. See `CART_UPDATE_COALESCE_MS`.
+     *
+     * Restarting the timer on every event is what makes this trailing-edge: the pass runs
+     * `CART_UPDATE_COALESCE_MS` after the LAST event, never after the first, so the burst
+     * can never settle on a cart state the shopper has already moved past.
+     */
+    scheduleCartRefresh() {
+        this.cartRefreshPending = true;
+        if (this.cartRefreshTimer !== null)
+            clearTimeout(this.cartRefreshTimer);
+        this.cartRefreshTimer = null;
+        // A dead host schedules nothing, but stays OWED the pass — `connectedCallback`
+        // re-arms it if the theme puts the host back.
+        if (this.isDisconnected)
+            return;
+        this.cartRefreshTimer = setTimeout(() => {
+            this.cartRefreshTimer = null;
+            this.runCartRefresh();
+        }, CART_UPDATE_COALESCE_MS);
+    }
+    /**
+     * The one pass a burst is entitled to — byte for byte what the `cart::updated` handler
+     * used to do inline, minus the count read that now happens per event.
+     *
+     * The disconnect guard comes FIRST and leaves the flag ALONE, so a host that went away
+     * between the last event and the end of its window stays owed the pass rather than
+     * silently forfeiting it. Unreachable in practice — `disconnectedCallback` clears the
+     * timer — but the two must not disagree about who owes what.
+     *
+     * Past that, the flag is cleared BEFORE the work, not after: an event that arrives
+     * while this pass is in flight must be able to open a NEW window (and it does —
+     * `scheduleCartRefresh` sets the flag again), and clearing afterwards would swallow it.
+     */
+    runCartRefresh() {
+        if (this.isDisconnected)
+            return;
+        this.cartRefreshPending = false;
+        this.refresh();
+        refreshCartFreeGifts().then(() => this.loadCart(), () => this.loadCart());
+    }
+    /**
+     * Take the cart's item count straight off the `cart::updated` payload.
+     *
+     * THIS IS THE FIX FOR THE LIVE REMOVAL PATH, and it exists because the request-based
+     * count cannot answer there. When the shopper deletes their last line the cart id goes
+     * away, and BOTH cart endpoints then reject rather than reporting an empty cart:
+     * `details()` resolves its id through `getCurrentCartId(false, …, allowCreate=false)`,
+     * which returns `null` for a guest with no stored cart id, and throws `CartNotCreated`
+     * (twilight/src/api/cart.js:192-199); `offers()` throws through the same door
+     * (cart.js:869-874). `refreshCartFreeGifts()` has meanwhile invalidated the shared
+     * cache, so the count resolves to `null` — "unknown" — and an unknown count renders the
+     * banner. That is the beta regression: a cart that is empty, reported as unknowable.
+     *
+     * The payload has none of that dependency. It is delivered synchronously, by the same
+     * event that told us the cart changed, and it cannot fail, hang, or lose a race.
+     *
+     * Two sources, in order: the payload's own `count`, then the `cart.summary.count` the
+     * same emitter wrote a line earlier. Both are strict — see `toCartCount` — so a payload
+     * that states nothing leaves the previous value untouched rather than reading as empty.
+     */
+    readCartCountFromEvent(payload) {
+        const count = this.toCartCount(payload?.count) ?? this.readCartCountFromStorage();
+        if (count === null)
+            return;
+        this.cartItemCount = count;
+    }
+    /**
+     * The SECONDARY count, for a `cart::updated` that carried no usable `count` of its own.
+     *
+     * `SallaCartEvent.updated()` writes `cart.summary.count` from `data.cart`
+     * (twilight/src/event/cart.js:102-110) SYNCHRONOUSLY, immediately before it dispatches
+     * the event — so inside a `cart::updated` handler this value is as fresh as the payload
+     * and comes from the same object. `mobileBridge._cart` falls back to exactly this, for
+     * exactly this reason.
+     *
+     * ONLY safe from inside that handler, which is why it is private to
+     * `readCartCountFromEvent` and never consulted at mount: on a cold load the same key
+     * can hold a count left over from a previous session, and trusting it there would hide
+     * the banner on a cart that is not empty.
+     *
+     * Read through the public `salla.storage` facade; wrapped, because storage is not
+     * guaranteed to be installed and a throw here must cost nothing.
+     */
+    readCartCountFromStorage() {
+        try {
+            return this.toCartCount(salla.storage?.get?.('cart.summary.count'));
+        }
+        catch (error) {
             return null;
         }
-        return h("salla-tooltip", { class: 'absolute left-0 -top-2', targetId: targetId, theme: "dark" }, h("div", { class: "flex gap-3 text-start" }, productItem?.image?.url && h("img", { src: productItem.image.url, alt: productItem?.image?.alt || productItem.name || "", class: "w-12 h-12 object-cover rounded-lg flex-shrink-0", loading: "lazy", decoding: "async" }), h("div", { class: "flex-1" }, h("div", { class: "leading-tight mb-1" }, productItem.name), h("div", { class: "text-xs text-gray-300", innerHTML: salla.money(productItem.price) }))));
     }
-    getCheckpointContent(discount) {
-        if (discount.type === DiscountType.PERCENTAGE)
-            return `${discount.value}%`;
-        if (discount.type === DiscountType.FIXED)
-            return h("span", { innerHTML: salla.money(discount.value) });
-        if (discount.type !== DiscountType.FREE_PRODUCT) {
-            salla.logger.error(`salla-conditional-offer:: unexpected type (${discount.type})!`);
-            return "";
+    /**
+     * Coerce a reported count, STRICTLY. Only a finite, non-negative number is an answer;
+     * `undefined`, `null`, a string and a negative all mean "not stated", which leaves the
+     * previous value alone — the degenerate `{ fromLatestFetched }` payload
+     * (event/cart.js:85) must never read as an empty cart.
+     */
+    toCartCount(value) {
+        return typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : null;
+    }
+    getFreeLabel() {
+        const text = salla.lang.get(FREE_LABEL_KEY);
+        return text && text !== FREE_LABEL_KEY ? text : FREE_LABEL_FALLBACK;
+    }
+    /**
+     * Read a `blocks.cart_offer.*` translation.
+     *
+     * `salla.lang.get` returns the KEY VERBATIM when a translation is missing, which would
+     * put "blocks.cart_offer.congrats" in front of a shopper. A missing key reads as its
+     * `EN_FALLBACKS` entry instead, with the same `:placeholder` substitution.
+     */
+    trans(key, replacements) {
+        const fullKey = `${LANG}.${key}`;
+        const text = salla.lang.get(fullKey, replacements);
+        if (text && text !== fullKey)
+            return text;
+        return Object.entries(replacements ?? {}).reduce((out, [token, value]) => out.split(`:${token}`).join(value), EN_FALLBACKS[key]);
+    }
+    /**
+     * The ONLY eligibility question worth asking: does this store have the feature?
+     *
+     * `salla.config.get` is a plain object read and cannot throw, but the whole thing is
+     * still wrapped: this predicate is called from a lifecycle hook, and "the SDK is not
+     * on the page yet" must degrade to "not eligible *yet*", never to an exception.
+     */
+    isEnabled() {
+        try {
+            return !!salla.config.get('store.features')?.includes('conditional-offer');
+        }
+        catch (error) {
+            return false;
+        }
+    }
+    /**
+     * ONE banner, even when several cart offers are live the FIRST conditional
+     * offer carrying at least one checkpoint wins and the rest are ignored. Merging them
+     * would produce a badge row whose tiers belong to different promotions.
+     */
+    async fetchOffer() {
+        const { data } = await salla.api.cart.offers();
+        const offer = (data || []).find(offer => offer.type === "conditional");
+        return offer?.details?.discounts?.length ? offer : null;
+    }
+    /**
+     * The single entry point for "ask the server what this cart is entitled to".
+     *
+     * Runs on the initial load AND on every `cart::updated`, and is IDEMPOTENT and
+     * REVERSIBLE in both directions — `canRender` is derived from this pass alone, so a
+     * cart that becomes eligible after starting out ineligible turns the component back
+     * on. No state set here is a one-way door.
+     */
+    async refresh() {
+        const generation = ++this.refreshGeneration;
+        // Re-asked on EVERY pass rather than latched at mount. `store.features` arrives
+        // with the page bootstrap, but a mount that beats it must be able to recover.
+        if (!this.isEnabled()) {
+            this.stopLoading();
+            this.canRender = false;
+            return;
         }
-        const productItem = this.products[discount.value];
-        if (!productItem) {
-            salla.logger.error(`salla-conditional-offer:: there is no product with id (${discount.value})!`);
-            return "";
+        /**
+         * A cart we already KNOW is empty is a terminal answer: stop, render nothing, and
+         * never enter the loading state — the cheapest correct behaviour, and the one that
+         * makes a skeleton over "السلة فارغة" structurally impossible rather than merely
+         * short-lived. Without this, emptying the cart still raised a skeleton whenever the
+         * offer had been cleared, and a hanging `offers()` then held it up for the whole
+         * watchdog window.
+         *
+         * `=== 0` only: `null` is "not answered yet" and must still take the normal path,
+         * and the offer itself is deliberately left untouched, so re-adding an item brings
+         * the banner straight back without another round trip.
+         */
+        if (this.cartItemCount === 0) {
+            this.stopLoading();
+            /**
+             * ...but not a DEAD END when the `0` was never corroborated. This is the only
+             * branch that returns without ever asking for the offer, so a `0` that was
+             * wrong makes the banner unreachable for the rest of the page view: nothing
+             * else calls `refresh()` except `cart::updated`, which a shopper who does not
+             * touch the cart never emits.
+             *
+             * And a wrong `0` is reachable. The first cart lookup is fired from `load()`
+             * BEFORE `salla.onReady()` settles, so it can be answered by an SDK that has
+             * not installed the cart id yet — `details()` then rejects `CartNotCreated`,
+             * which the shared module reads (rightly, for a real guest) as an empty cart.
+             * Re-asking is what tells the two apart, and on a cart that IS empty it costs
+             * nothing: the retry rejects again without reaching the network.
+             *
+             * GATED ON `hasAuthoritativeCartData()`, which is the whole safety of it. A
+             * `0` that came from a response we actually read is FINAL and must stay final
+             * — re-asking there would answer from the pre-mutation cache and bring the
+             * banner back over an emptied cart, which is the beta bug this branch exists
+             * to prevent. Only a `0` the lookup GUESSED is retried.
+             */
+            if (!hasAuthoritativeCartData()) {
+                this.deferredByEmptyCart = true;
+                this.loadCart();
+            }
+            return;
         }
-        return h("a", { class: "s-conditional-offer-product-link", href: productItem.url }, h("img", { class: "s-conditional-offer-checkpoint-image-content", loading: "lazy", decoding: "async", alt: productItem?.image?.alt || "", src: productItem?.image?.url }));
+        // Past the empty-cart branch, so this pass IS going to ask for the offer and there
+        // is nothing left for `loadCart()` to recover.
+        this.deferredByEmptyCart = false;
+        // Skeleton only while there is nothing to show yet. A refresh behind an already
+        // rendered offer updates in place instead of collapsing to a skeleton. Going
+        // through `startLoading()` is what guarantees a watchdog exists behind a skeleton
+        // this method raised — `componentWillLoad` may never have armed one, because
+        // `isEnabled()` can legitimately be false at mount and true by the time we get here.
+        if (this.offer)
+            this.stopLoading();
+        else
+            this.startLoading();
+        try {
+            const offer = await this.fetchOffer();
+            // A newer cart::updated issued its own request while this one was in flight.
+            // That request reflects a later cart state, so this response is stale by
+            // definition — drop it rather than re-issuing.
+            if (this.isSuperseded(generation))
+                return;
+            if (!offer) {
+                this.offer = null;
+                this.canRender = false;
+                return;
+            }
+            // A new object reference is what triggers the re-render.
+            this.offer = offer;
+            this.canRender = true;
+            // Gift LINES are an enhancement fetched only AFTER the banner has been handed
+            // to `render()`; `gifts` is `@State`, so the card appears by itself when the
+            // lookup lands, and a lookup that never settles costs nothing but the card.
+            // Re-asked now that `this.offer` is known, because the gift filter is keyed to
+            // the offer id — the early pass in `load()` could only answer the COUNT.
+            this.loadCart();
+        }
+        catch (error) {
+            if (this.isSuperseded(generation))
+                return;
+            /**
+             * NOT terminal, and deliberately does not touch `canRender`. A failing
+             * `offers()` call is a transient network/SDK condition, not a statement that
+             * the promotion does not exist.
+             */
+            this.safeLog('offers() failed', error);
+        }
+        finally {
+            /**
+             * The skeleton ends here, on EVERY exit path — including the two early
+             * `return`s above, which `finally` still runs.
+             *
+             * Lowering `isLoading` used to live inside the try, AFTER the staleness guard,
+             * which conflated two different questions: "whose DATA wins" (the generation) and
+             * "are we still loading" (this). A superseded or throwing pass answered the
+             * first and silently skipped the second, leaving the skeleton up as a resting
+             * state. Only the NEWEST pass lowers it, so an early-settling stale response
+             * cannot flash empty content while the authoritative request is still in
+             * flight — and because `finally` is unconditional, that newest pass always
+             * reaches this line.
+             */
+            if (generation === this.refreshGeneration)
+                this.stopLoading();
+        }
+    }
+    /**
+     * The single gate on rendering anything at all: an AFFIRMATIVE "the cart holds at
+     * least one item".
+     *
+     * Deliberately not `!== 0` and not a truthy test. `cartItemCount` is `null` until
+     * something answers, and `null` must read as "do not render" — the default is hidden,
+     * and only a real, non-negative count of 1 or more opens the gate.
+     */
+    hasCartItems() {
+        return typeof this.cartItemCount === 'number' && this.cartItemCount >= 1;
+    }
+    /**
+     * Whether this pass's response should be discarded: a newer `refresh()` has since
+     * been issued (so this one describes an older cart), or the host is gone. Answers
+     * "whose data wins" ONLY — never "should the skeleton stay up"; see the `finally`
+     * in `refresh()`.
+     */
+    isSuperseded(generation) {
+        return generation !== this.refreshGeneration || this.isDisconnected;
+    }
+    /**
+     * The two things this component needs from the CART itself: how many lines it holds,
+     * and which of them are this offer's free gifts.
+     *
+     * ONE lookup for both. `getCartItemCount` and `getCartFreeGiftItems` are two
+     * projections of the same shared `details()` response and share its cache, its
+     * in-flight promise and its generation guard, so asking for both costs exactly one
+     * request — and, more importantly, the count and the gift lines can never describe
+     * two different cart states.
+     *
+     * Never rejects: a failing lookup is a missing "ادارة العرض" card and an UNKNOWN
+     * count, not a missing promotion and not an empty cart.
+     */
+    loadCart() {
+        const generation = ++this.giftsGeneration;
+        return Promise.all([getCartFreeGiftItems(), getCartItemCount()])
+            .then(([items, count]) => {
+            if (generation !== this.giftsGeneration || this.isDisconnected)
+                return;
+            /**
+             * A `cart::updated` is waiting for its pass, so this answer describes the
+             * cart BEFORE that mutation whichever way it was obtained: in flight when
+             * the event arrived, or started since and served the pre-mutation count
+             * without a request, because the shared cache is only invalidated when the
+             * window closes. Publishing it would put a stale positive count back over
+             * the event's `0`. Dropped outright: the pass re-asks, against an
+             * invalidated cache.
+             */
+            if (this.cartRefreshPending)
+                return;
+            /**
+             * NEVER walks a KNOWN count back to `null`. `count` is `null` whenever the
+             * shared lookup could not answer — which, on the removal path, is every
+             * time (see `readCartCountFromEvent`). Publishing that `null` over the 0 the
+             * event already established is exactly how the banner came back from the
+             * dead; an unknown answer is not new information, so it changes nothing.
+             */
+            if (count !== null)
+                this.cartItemCount = count;
+            /**
+             * An answer ends the retry episode. No answer, on a cart whose count is
+             * STILL unknown, buys another attempt — see `CART_LOOKUP_RETRY_DELAYS_MS`.
+             * A count something else already established needs no retry: the banner's
+             * gate is open or shut on it either way.
+             */
+            if (count !== null)
+                this.clearCartLookupRetry();
+            else if (this.cartItemCount === null)
+                this.scheduleCartLookupRetry();
+            /**
+             * The cart turned out to hold items after all — so the `refresh()` that
+             * bailed out before asking for the offer did so on a count that was wrong,
+             * and nothing else will ever re-run it. Run it here.
+             *
+             * The latch is what keeps this to a RECOVERY rather than a second refresh
+             * on every load: it is set by exactly one branch of `refresh()` and
+             * cleared both here and by the first pass that gets past that branch, so
+             * the normal path — and a store with no conditional offer at all — never
+             * reaches this line. Bounded by construction: `refresh()` re-asks the cart
+             * only on `count === 0`, this re-runs `refresh()` only on `count >= 1`,
+             * and it can only do so while the latch is set.
+             */
+            if (this.deferredByEmptyCart && this.hasCartItems()) {
+                this.deferredByEmptyCart = false;
+                this.refresh();
+            }
+            /**
+             * The gift card is keyed to the offer, so it can only be filled once the
+             * offer is known. The early pass fired from `load()` runs BEFORE
+             * `refresh()` has settled; publishing gifts from it would let another
+             * promotion's gift line flash in the card, because `selectOwnGifts` has no
+             * offer id to filter on yet. `refresh()` calls back here the moment it has
+             * one.
+             */
+            this.gifts = this.offer ? this.selectOwnGifts(items) : [];
+        })
+            .catch(error => {
+            this.safeLog('cart lookup failed', error);
+        });
+    }
+    /**
+     * Arm the next cart-lookup retry, unless one is already armed or the episode has spent
+     * its attempts. See `CART_LOOKUP_RETRY_DELAYS_MS`.
+     *
+     * The attempt is SPENT when the timer fires, not when it is armed, so a timer a
+     * disconnect cleared is re-armed by `connectedCallback` without costing one.
+     */
+    scheduleCartLookupRetry() {
+        if (this.cartLookupRetries >= CART_LOOKUP_RETRY_DELAYS_MS.length)
+            return;
+        this.cartLookupRetryPending = true;
+        // A dead host arms nothing, but stays owed the retry — as `scheduleCartRefresh`.
+        if (this.cartLookupRetryTimer !== null || this.isDisconnected)
+            return;
+        this.cartLookupRetryTimer = setTimeout(() => {
+            this.cartLookupRetryTimer = null;
+            this.cartLookupRetryPending = false;
+            // Decided HERE rather than when the timer was armed, which can be before
+            // `refresh()` has answered: with the feature off, or no offer on the store,
+            // there is nothing the count could reveal and so nothing worth a request.
+            if (!this.canRender)
+                return;
+            this.cartLookupRetries++;
+            this.loadCart();
+        }, CART_LOOKUP_RETRY_DELAYS_MS[this.cartLookupRetries]);
+    }
+    /**
+     * End the retry episode: a lookup answered, or the cart changed under it. The count
+     * goes back to zero so a LATER failure gets its own full set of attempts.
+     */
+    clearCartLookupRetry() {
+        this.cartLookupRetries = 0;
+        this.cartLookupRetryPending = false;
+        if (this.cartLookupRetryTimer === null)
+            return;
+        clearTimeout(this.cartLookupRetryTimer);
+        this.cartLookupRetryTimer = null;
+    }
+    /**
+     * Keep only the gift lines this offer granted.
+     *
+     * `CartItemTransformer::getFreeGiftData` emits `offer_id` OPTIMUS-ENCODED, exactly
+     * like `CartOffersTransformer` emits `id`, so the two join directly. When the offer id
+     * is unreadable we fall back to every gift line rather than hiding the card: only one
+     * cart offer can be applied to a cart at a time, so an unmatched gift is far more
+     * likely to be an id-shape surprise than another promotion's product.
+     */
+    selectOwnGifts(items) {
+        const offerId = Number(this.offer?.id);
+        if (!Number.isFinite(offerId))
+            return items;
+        const owned = items.filter(gift => gift.offerId !== null && Number(gift.offerId) === offerId);
+        return owned.length ? owned : items.filter(gift => gift.offerId === null);
+    }
+    /**
+     * Stages in ascending threshold order — the payload itself is UNSORTED.
+     *
+     * LOAD-BEARING: this filter and sort must mirror what `computeOfferStageProgress`
+     * does internally, because every renderer pairs `stages[i]` with
+     * `progress.thresholds[i]`. Both drop unusable thresholds via `isUsableThreshold` and
+     * both sort ascending and stably, so the two arrays stay index-aligned.
+     */
+    getStages() {
+        const usable = (this.offer?.details?.discounts ?? []).filter(({ min_spend }) => isUsableThreshold(min_spend));
+        // Ties break on the tier `id` (0 = base tier, 1..N = options in engine order), so two
+        // tiers sharing a `min_spend` order by identity rather than by their position in an
+        // unsorted payload. `id` is absent on an older backend; then it is the old index tie-break.
+        return sortByThreshold(usable, ({ min_spend }) => min_spend, ({ id }) => id);
+    }
+    /**
+     * The tier picture: the ENGINE'S verdict per tier plus the threshold projection.
+     *
+     * `is_applied` is passed positionally from THIS array, so the flag can never be
+     * attributed to the wrong tier — `stages[i]`, `progress.thresholds[i]`,
+     * `progress.met[i]` and `progress.applied[i]` are one row. Alignment matters more
+     * than ever now: the winner's INDEX decides where the ✓ run stops.
+     *
+     * Each tier's OWN `current_value` rides along the same way. It is what the distance in
+     * the guidance line is measured against, and a tier that carries none — every tier, on
+     * an older backend — is measured by the offer-level value exactly as before.
+     */
+    getProgress(stages) {
+        return computeOfferStageProgress(this.offer?.details?.current_value, stages.map(({ min_spend }) => min_spend), this.offer?.details?.start_value, stages.map(({ is_applied }) => is_applied), stages.map(({ current_value }) => current_value));
+    }
+    /**
+     * A tier's render key. `id` is the stable identity across refetches; the array
+     * position is the last resort for a backend that does not send one.
+     */
+    tierKey(discount, index) {
+        const id = Number(discount?.id);
+        return Number.isFinite(id) ? `tier-${id}` : `pos-${index}`;
+    }
+    /**
+     * How this offer MEASURES its thresholds, as `offer-stages` names it .
+     *
+     * The remainder is rounded to the measure — whole products for `products_count`,
+     * store currency precision for everything else — so `formatRequirement` is handed a
+     * value its formatter can actually render. A `products_count` offer is the one that
+     * MUST be told apart: `salla.lang.choice` matches a fraction against no plural
+     * interval and answers "no products".
+     */
+    stageMeasure() {
+        return this.offer?.details?.based_on === OfferType.PRODUCT_COUNT
+            ? OfferStageMeasure.COUNT
+            : OfferStageMeasure.CURRENCY;
     }
-    getOfferType(discount) {
-        const basedOn = this.offer.details?.based_on;
+    /**
+     * Format a cart value (a threshold, or a remaining amount/quantity) the way the
+     * offer is measured: money for `order_amount`, a pluralised item count for
+     * `products_count`. May return HTML (`salla.money`), so callers use `innerHTML`.
+     */
+    formatRequirement(value) {
+        const basedOn = this.offer?.details?.based_on;
         if (basedOn === OfferType.PRODUCT_COUNT) {
             try {
-                return salla.lang.choice("blocks.header.products_count", discount.min_spend);
+                return salla.lang.choice("blocks.header.products_count", value);
             }
             catch (error) {
-                // Some stores may define an invalid interval (e.g. [1,*]) in translations.
-                // Fallback to a safe plain label so the component does not crash.
-                salla.logger.warn("salla-conditional-offer:: invalid products_count interval", error);
-                return `${discount.min_spend}`;
+                // Some stores define an invalid interval (e.g. [1,*]) in translations.
+                // safeLog, not salla.logger: this runs inside render(), where a throwing
+                // logger would take the whole component down.
+                this.safeLog('invalid products_count interval', error);
+                return `${value}`;
             }
         }
         if (basedOn === OfferType.PRODUCT_PURCHASE)
-            return salla.money(discount.min_spend);
-        salla.logger.warn(`salla-conditional-offer:: Unexpected offer detail's based_on value: ${basedOn}`);
-        return `${discount.min_spend}`;
-    }
-    clamp(value, min, max) {
-        return Math.max(min, Math.min(value, max));
-    }
-    mapValueRanges(value, initialMinRange, initialMaxRange, newMinRange, newMaxRange) {
-        const newRange = ((value - initialMinRange) * (newMaxRange - newMinRange)) / (initialMaxRange - initialMinRange) + newMinRange;
-        if (newRange === Number.POSITIVE_INFINITY)
-            return 100;
-        if (newRange === Number.NEGATIVE_INFINITY)
-            return 0;
-        return this.clamp(newRange, 0, 100);
-    }
-    getCheckPointView(discount, index) {
-        const checkpointIndex = this.offer.details.discounts.findIndex(({ min_spend }) => min_spend === discount.min_spend);
-        const previousCheckpointValue = this.offer.details.discounts[checkpointIndex - 1]?.min_spend ?? 0;
-        const progressPercentage = this.mapValueRanges(this.offer.details.current_value, previousCheckpointValue, discount.min_spend, 0, 100);
-        const isActive = discount.min_spend <= this.offer.details.current_value;
-        return (h("div", { class: "s-conditional-offer-checkpoint-container" }, index > 0 ? [
-            h("div", { key: "progress-line", class: "s-conditional-offer-progress-line-container" }, h("div", { class: "s-conditional-offer-progress-line-inactive" }), h("div", { class: "s-conditional-offer-progress-line-active", style: { width: `${progressPercentage}%` } })),
-            h("div", { key: "checkpoint", class: `s-conditional-offer-checkpoint ${isActive ? "s-conditional-offer-active-checkpoint" : ""}` }, h("div", { class: `s-conditional-offer-item-avatar-content ${isActive ? "active" : ""}`, id: discount.type === DiscountType.FREE_PRODUCT ? `avatar-product-${discount.value}` : `avatar-${discount.value ?? index}` }, this.products && this.getCheckpointContent(discount)), this.products && discount.type === DiscountType.FREE_PRODUCT && this.renderTooltip(discount), h("div", { class: `s-conditional-offer-checkpoint-label ${isActive ? "active" : ""}`, innerHTML: this.getOfferType(discount) }))
-        ] :
-            h("div", { key: "label", class: { "s-conditional-offer-checkpoint-label": true, "first-checkpoint": index === 0, active: isActive }, innerHTML: this.getOfferType(discount) })));
+            return salla.money(value);
+        this.safeLog(`unexpected offer detail's based_on value: ${basedOn}`);
+        return `${value}`;
+    }
+    /**
+     * The shopper-facing reward text, SERVER-RENDERED.
+     *
+     * Never re-derived here. `reward_label` already carries the type-specific wording,
+     * the currency the value was converted to, and the merchant's own theme-translation
+     * overrides. Empty (free_shipping, unknown types) means "render nothing", which is
+     * why every caller has a reward-less sentence to fall back to.
+     */
+    getRewardText(discount) {
+        return (discount?.reward_label ?? '').trim();
+    }
+    /**
+     * Guidance toward the first tier ABOVE the one the engine granted. Empty once
+     * that is the last tier (then the congratulations line renders instead).
+     *
+     * The TARGET comes from the verdict (`nextUnmetIndex`), the DISTANCE from the
+     * arithmetic — which is legitimate here, because "add :remaining" is a projection
+     * about the shopper's cart, not a claim about what the engine did. It is measured in
+     * the TARGET tier's own `current_value` when the backend sends one (see `getProgress`).
+     *
+     * Without that the two can disagree: the engine can withhold a tier whose threshold is
+     * already met, because its own excluded-product set is not in the payload. Then the distance
+     * is 0 and "Add SAR 0 and get a free gift" is false in both halves, so the line is
+     * dropped rather than rendered — and we do NOT skip ahead to a farther tier, which
+     * would advertise a reward past a nearer one the shopper cannot have. Nothing is the
+     * honest answer; the tooltip still shows the tier as locked.
+     */
+    getGuidanceMessage(stages, progress) {
+        if (progress.nextUnmetIndex === NO_STAGE_REACHED)
+            return '';
+        const remainingValue = getRemainingToStage(progress.nextUnmetIndex, progress, this.stageMeasure());
+        if (remainingValue <= 0)
+            return this.trans('guidance_conditions_unmet');
+        const remaining = this.formatRequirement(remainingValue);
+        const reward = this.getRewardText(stages[progress.nextUnmetIndex]);
+        return reward
+            ? this.trans('guidance_next', { remaining, reward: escapeHtml(reward) })
+            : this.trans('guidance_next_generic', { remaining });
+    }
+    /** One tooltip row's sentence: "spend X, get Y", both halves from the offer payload. */
+    getTierSentence(discount, index, progress) {
+        const threshold = this.formatRequirement(progress.thresholds[index]);
+        const reward = this.getRewardText(discount);
+        /**
+         * "Spend" is a MONEY verb, and the Arabic frame says it outright ("اشترِ بقيمة")
+         * — so a products_count offer read "buy 3 products WORTH", describing a cart value
+         * that no tier in it measures. The threshold half was already measure-correct
+         * (@see formatRequirement); only the sentence around it assumed currency.
+         */
+        const isCount = this.stageMeasure() === OfferStageMeasure.COUNT;
+        return reward
+            ? this.trans(isCount ? 'tier_requirement_count' : 'tier_requirement', { threshold, reward: escapeHtml(reward) })
+            : this.trans(isCount ? 'tier_requirement_count_generic' : 'tier_requirement_generic', { threshold });
+    }
+    /**
+     * The reward-TYPE icon shown in a tooltip row's circle.
+     *
+     * `fixed` is the awkward one: the design draws the Saudi Riyal glyph, but a store
+     * selling in USD must not. `sicon-sar` is used on exactly the same condition
+     * `salla.money()` uses to swap the currency for that glyph
+     * (`base/src/helpers/numbers.ts:78-86`), and a currency-neutral banknote otherwise.
+     */
+    getRewardIcon(discount) {
+        switch (discount?.type) {
+            case DiscountType.PERCENTAGE:
+                return 'sicon-percentage';
+            case DiscountType.FREE_PRODUCT:
+                return 'sicon-gift';
+            case DiscountType.FIXED:
+                return this.usesSarSymbol() ? 'sicon-sar' : 'sicon-banknote';
+            default:
+                return 'sicon-tag';
+        }
+    }
+    usesSarSymbol() {
+        try {
+            const symbol = salla.config.currency?.()?.symbol;
+            return ['SAR', 'ر.س'].includes(symbol) && !!salla.config.get('store.settings.use_sar_symbol');
+        }
+        catch (error) {
+            return false;
+        }
+    }
+    // ---------------------------------------------------------------------------------
+    // Tooltip — opens on hover AND on click (the click is the mobile path), and
+    // is dismissible by Escape, by an outside click, and by un-hovering.
+    // ---------------------------------------------------------------------------------
+    get isTooltipOpen() {
+        return this.isTooltipHovered || this.isTooltipPinned;
+    }
+    toggleTooltip() {
+        this.isTooltipPinned = !this.isTooltipPinned;
+    }
+    closeTooltip(restoreFocus = false) {
+        if (!this.isTooltipOpen)
+            return;
+        this.isTooltipPinned = false;
+        this.isTooltipHovered = false;
+        if (restoreFocus)
+            this.infoTriggerEl?.focus?.();
+    }
+    /**
+     * WHY THIS IS NOT `salla-tooltip`.
+     *
+     * It is a fair question — the component exists, it is shared, and this component used
+     * to depend on it (master renders a `<salla-tooltip theme="dark">` product preview off
+     * the badge avatars). That usage was hover-only, non-interactive and string-sized, and
+     * it is exactly the shape `salla-tooltip` is built for. The ⓘ popover this design asks
+     * for is not, and the gap is not one prop wide:
+     *
+     *  - VISIBILITY IS PRIVATE TO IT. `show` is `@State`, flipped only by the component's
+     *    own `mouseover`/`mouseout` window listeners (salla-tooltip.tsx:26-38). There is no
+     *    `open` prop and no way for an owner to pin it, so the CLICK path — which is the
+     *    ONLY way this popover opens on a touch device — cannot be expressed at all.
+     *  - IT IS DELIBERATELY UNREACHABLE. `pointer-events: none` (salla-tooltip.scss:20).
+     *    A pinned panel the shopper cannot hover or scroll is not a mobile path.
+     *  - NO DISMISSAL MODEL. Escape and outside-click do not exist there, because with
+     *    hover-only visibility there is nothing to dismiss.
+     *  - NO POSITIONING TO REUSE. It is pinned by two hand-tuned magic percentages —
+     *    `translateX(-63%)` and `translateX(-72%)` under `:dir(ltr)` — with a caret nailed
+     *    to `left: 50%` and never re-aimed. There is no viewport clamp, so the exact
+     *    behaviour this method exists for is the one piece it does not have.
+     *  - IT IS SIZED FOR A STRING. `max-width: 150px` / `width: 190px` default,
+     *    `max-width: 330px` dark. This panel is a title, a description and one row per
+     *    tier.
+     *  - IT ANCHORS BY GLOBAL ID. `document.getElementById(targetId)` at `componentDidLoad`
+     *    (salla-tooltip.tsx:40-43). The ⓘ trigger has no stable document-unique id, and the
+     *    banner can legitimately mount more than once on a page.
+     *
+     * Closing all six is not "a prop, not a hack" — it is a controlled-visibility API, a
+     * dismissal model, an anchoring change and a positioning engine, i.e. a rewrite of all
+     * 55 lines of it. And `salla-tooltip` is SHARED: `salla-comment-item` and `salla-wallet`
+     * both pass a plain `text` + `targetId` and depend on precisely the hover-only,
+     * `pointer-events: none`, magic-percentage behaviour above, with a single spec between
+     * them that asserts its exact rendered HTML. Rewriting it under them to serve this
+     * banner trades a scoped 90 lines here for a silent regression surface there.
+     *
+     * So the bespoke implementation stays, and stays SMALL: everything below is the clamp
+     * and the caret. The resting position is plain CSS.
+     *
+     * Keep the popover pointing at the ⓘ icon AND inside the viewport.
+     *
+     * The CSS already centres it on the trigger — that is the resting answer, and it is
+     * correct in RTL and LTR alike because centring is symmetric, which is exactly why the
+     * rules are written with physical `left`/`translateX` rather than `inset-inline-*`.
+     * Anything logical would have to be mirrored again here, in a coordinate space
+     * (`getBoundingClientRect`) that is physical no matter what the document direction is.
+     *
+     * All this adds on top is the CLAMP: at narrow widths a popover centred on an icon
+     * that sits near the edge of the screen would hang off it, so the box is nudged back
+     * inside and the caret is shifted by the same amount in the opposite direction, so it
+     * stays over the icon while the box moves out from under it.
+     *
+     * Written as CSS CUSTOM PROPERTIES on the element, never as `@State`: this runs from
+     * `componentDidRender`, and anything that re-entered render() from here would loop.
+     */
+    positionTooltip() {
+        const tooltip = this.tooltipEl;
+        const trigger = this.infoTriggerEl;
+        if (!this.isTooltipOpen || !tooltip || !trigger)
+            return;
+        try {
+            /**
+             * Zeroed BEFORE measuring. The rect below already includes whatever shift the
+             * previous pass wrote, so correcting incrementally would drift a little further
+             * every render; from zero the measurement is absolute and one pass is exact.
+             */
+            this.setTooltipOffsets(tooltip, 0, 0);
+            const viewport = window.innerWidth || document.documentElement?.clientWidth || 0;
+            const box = tooltip.getBoundingClientRect();
+            const anchor = trigger.getBoundingClientRect();
+            const width = box?.width || 0;
+            /**
+             * No layout to measure — a spec DOM, a display:none ancestor, a browser that
+             * has not painted yet. The CSS default (centred on the trigger) is already the
+             * right answer everywhere except at a viewport edge, so degrade to it rather
+             * than to NaN.
+             */
+            if (width <= 0 || viewport <= 0)
+                return;
+            const centre = anchor.left + anchor.width / 2;
+            const ideal = centre - width / 2;
+            const gutter = TOOLTIP_VIEWPORT_GUTTER_PX;
+            // `Math.max` on the ceiling: a popover WIDER than the viewport has no valid
+            // resting place, and pinning it to the leading gutter beats a negative range.
+            const clamped = Math.min(Math.max(ideal, gutter), Math.max(gutter, viewport - gutter - width));
+            const shift = clamped - ideal;
+            // The caret undoes the shift so it stays over the icon — but only as far as the
+            // panel's own corner; see TOOLTIP_CARET_INSET_PX.
+            const limit = Math.max(0, width / 2 - TOOLTIP_CARET_INSET_PX);
+            const caret = Math.min(Math.max(-shift, -limit), limit);
+            this.setTooltipOffsets(tooltip, shift, caret);
+        }
+        catch (error) {
+            // A popover that could not be measured still renders, centred — never let
+            // positioning cost the content.
+            this.safeLog('positioning the offer details popover failed', error);
+        }
+    }
+    setTooltipOffsets(tooltip, shift, caret) {
+        tooltip.style?.setProperty?.('--s-conditional-offer-tooltip-shift', `${Math.round(shift)}px`);
+        tooltip.style?.setProperty?.('--s-conditional-offer-tooltip-caret', `${Math.round(caret)}px`);
+    }
+    /**
+     * A resize changes which edge the popover is up against, so the clamp has to be
+     * re-derived. Cheap: `positionTooltip` returns on its first line unless the popover is
+     * actually open.
+     */
+    handleWindowResize() {
+        this.positionTooltip();
+    }
+    handleDocumentKeydown(event) {
+        // `Esc` is IE/old-Edge; harmless to keep and free to check.
+        if (event.key !== 'Escape' && event.key !== 'Esc')
+            return;
+        this.closeTooltip(true);
+    }
+    /**
+     * Outside click dismisses a PINNED tooltip. `composedPath` rather than
+     * `event.target`, so a click on a slotted/nested element still resolves to the
+     * anchor; `contains` is the fallback for the (test) environments that lack it.
+     */
+    handleDocumentClick(event) {
+        if (!this.isTooltipPinned || !this.infoAnchorEl)
+            return;
+        const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+        const inside = path.length
+            ? path.includes(this.infoAnchorEl)
+            : this.infoAnchorEl.contains(event.target);
+        if (!inside)
+            this.closeTooltip();
+    }
+    // ---------------------------------------------------------------------------------
+    // Render
+    // ---------------------------------------------------------------------------------
+    /**
+     * The `id` of one of this instance's own elements. EVERY id and every reference to it
+     * (`aria-describedby`, `aria-controls`) goes through here, so the two cannot drift.
+     */
+    elementId(name) {
+        return `s-conditional-offer-${name}-${this.instanceId}`;
+    }
+    /**
+     * The badge row: one small circle per tier, joined by short connectors.
+     *
+     * Tier count is VARIABLE, so the row is a nowrap flex line that scrolls
+     * horizontally inside a bounded width instead of squeezing the message beside it.
+     * RTL correctness comes from the markup: a plain flex row inherits the document's
+     * `dir`, so tier 1 lands on the leading edge and the scroll origin follows it in both
+     * directions. Do not add physical left/right offsets here.
+     */
+    renderBadges(stages, progress) {
+        // The ENGINE-DERIVED count, not `lastReachedIndex + 1`: when the engine has spoken
+        // it counts the tiers up to the one it GRANTED, which is not what the thresholds
+        // say — a cart clearing every threshold with nothing granted counts 0 of 3.
+        const completed = progress.metCount;
+        return (h("div", { class: "s-conditional-offer-badges", role: "img", "aria-label": this.trans('badges_summary', {
+                completed: `${completed}`,
+                total: `${stages.length}`,
+            }) }, stages.map((discount, index) => {
+            // THE STEPPER: tiers up to the one the engine GRANTED (`is_applied`), or the
+            // threshold comparison when this backend sends no flag at all. Never
+            // `index <= lastReachedIndex`, and never `progress.applied[index]` — a cart
+            // offer pays out once, so reading the raw flag put a lock BELOW a check.
+            const isMet = progress.met[index];
+            const key = this.tierKey(discount, index);
+            return [
+                /* The met connector is a SOLID 8x1px line in the primary teal, the unmet
+                   one a DASHED 1px line in a dark neutral. They sit in a 16px gap
+                   between two 24px badges; the 4px breathing space is the row's
+                   `gap-1`, so the connector element itself is just the 8px rule. */
+                index > 0 ? (h("span", { key: `${key}-link`, class: {
+                        's-conditional-offer-badge-link': true,
+                        's-conditional-offer-badge-link-met': isMet,
+                        's-conditional-offer-badge-link-unmet': !isMet,
+                    }, "aria-hidden": "true" })) : null,
+                h("span", { key: key, class: {
+                        's-conditional-offer-badge': true,
+                        's-conditional-offer-badge-met': isMet,
+                        's-conditional-offer-badge-unmet': !isMet,
+                    }, "data-tier-state": isMet ? 'met' : 'unmet', "data-tier-id": discount?.id ?? undefined }, isMet ? (h(CheckCircleIcon, { class: "s-conditional-offer-badge-icon" })) : (h(LockIcon, { class: "s-conditional-offer-badge-icon" }))),
+            ];
+        })));
+    }
+    /**
+     * Spec §4 — the ⓘ popover: title, the merchant's offer message, then one row per tier.
+     *
+     * The prose is `details.rules`, NEVER `offer.description` — see `readOfferRules`.
+     */
+    renderTooltip(stages, progress) {
+        const description = readOfferRules(this.offer);
+        return (h("div", { class: "s-conditional-offer-tooltip", id: this.elementId('tooltip'), role: "tooltip", ref: (el) => (this.tooltipEl = el) }, h("div", { class: "s-conditional-offer-tooltip-title" }, this.offer?.title), description ? h("div", { class: "s-conditional-offer-tooltip-description" }, description) : null, h("ul", { class: "s-conditional-offer-tooltip-list" }, stages.map((discount, index) => {
+            // Same single source of truth as the badge row — see `renderBadges`.
+            const isMet = progress.met[index];
+            return (h("li", { key: this.tierKey(discount, index), class: "s-conditional-offer-tier", "data-tier-state": isMet ? 'met' : 'unmet', "data-tier-id": discount?.id ?? undefined }, h("span", { class: {
+                    's-conditional-offer-tier-icon': true,
+                    's-conditional-offer-tier-icon-met': isMet,
+                    's-conditional-offer-tier-icon-unmet': !isMet,
+                } }, h("i", { class: this.getRewardIcon(discount), "aria-hidden": "true" }), h("span", { class: {
+                    's-conditional-offer-tier-status': true,
+                    's-conditional-offer-tier-status-met': isMet,
+                    's-conditional-offer-tier-status-unmet': !isMet,
+                }, "aria-hidden": "true" }, isMet ? (h(CheckCircleIcon, { class: "s-conditional-offer-tier-status-check" })) : (h(LockIcon, { class: "s-conditional-offer-tier-status-lock" })))), h("div", { class: "s-conditional-offer-tier-body" }, h("div", { class: "s-conditional-offer-tier-title" }, this.trans('tier_title', { number: `${index + 1}` })), h("div", { class: {
+                    's-conditional-offer-tier-text': true,
+                    's-conditional-offer-tier-text-met': isMet,
+                }, innerHTML: this.getTierSentence(discount, index, progress) }))));
+        }))));
+    }
+    /**
+     * "ادارة العرض". Rendered TWICE with complementary responsive visibility rather than
+     * moved with `order:`: desktop wants it inline with the banner row, mobile wants a
+     * full-width bar BELOW the gifts card, and those are different places
+     * in the flow, not a different order within one flex line.
+     */
+    renderGiftsToggle(variant) {
+        return (h("button", { type: "button", id: this.elementId(`toggle-${variant}`), class: {
+                's-conditional-offer-toggle': true,
+                's-conditional-offer-toggle-inline': variant === 'inline',
+                's-conditional-offer-toggle-bar': variant === 'bar',
+            }, "aria-expanded": this.isGiftsOpen ? 'true' : 'false', "aria-controls": this.elementId('gifts'), onClick: () => (this.isGiftsOpen = !this.isGiftsOpen) }, h("span", null, this.trans('manage_offer')), h("i", { class: {
+                'sicon-keyboard_arrow_down': true,
+                's-conditional-offer-toggle-icon': true,
+                's-conditional-offer-toggle-icon-open': this.isGiftsOpen,
+            }, "aria-hidden": "true" })));
+    }
+    /** Spec §5 — the gifts card: one read-only row per gift line. */
+    renderGiftsCard() {
+        return (h("div", { class: "s-conditional-offer-panel", id: this.elementId('gifts') }, h("div", { class: "s-conditional-offer-gifts-header" }, h("span", { class: "s-conditional-offer-gifts-icon" }, h("i", { class: "sicon-gift", "aria-hidden": "true" })), h("span", { class: "s-conditional-offer-gifts-title" }, this.trans('free_products_title'))), h("ul", { class: "s-conditional-offer-gifts-list" }, this.gifts.map(gift => this.renderGiftRow(gift)))));
+    }
+    renderGiftRow(gift) {
+        return (h("li", { class: "s-conditional-offer-gift", "data-item-id": gift.id }, h("span", { class: "s-conditional-offer-gift-thumb" }, gift.imageUrl ? (h("img", { class: "s-conditional-offer-gift-image", src: gift.imageUrl, alt: gift.imageAlt || gift.name, loading: "lazy", decoding: "async" })) : (h("i", { class: "sicon-gift", "aria-hidden": "true" }))), h("div", { class: "s-conditional-offer-gift-body" }, h("span", { class: "s-conditional-offer-gift-name" }, gift.name || this.trans('free_gift')), h("span", { class: "s-conditional-offer-gift-prices" }, h("span", { class: "s-conditional-offer-gift-free" }, this.getFreeLabel()), gift.originalPrice !== null ? (
+        // innerHTML: `salla.money()` markup again.
+        h("span", { class: "s-conditional-offer-gift-price", innerHTML: salla.money(gift.originalPrice) })) : null))));
     }
     getLoadingSkeletonView() {
-        return h(Host, { class: "s-conditional-offer-container" }, h("div", { class: "s-conditional-offer-skeleton-inner-container" }, h("div", { class: "s-conditional-offer-skeleton-subtitle" }, h("salla-skeleton", { height: "16px", width: "30%" })), h("div", { class: "s-conditional-offer-skeleton-subtitle" }, h("salla-skeleton", { height: "16px", width: "35%" })), h("div", { class: "s-conditional-offer-skeleton-checkpoints-wrapper" }, Array(3).fill(null).map(() => ([h("salla-skeleton", { key: "checkpoint-line", height: "8px" }), h("div", { key: "checkpoint" }, h("salla-skeleton", { height: "60px", width: "60px", type: "circle" }))])))));
+        return (h(Host, { class: "s-conditional-offer-root" }, h("div", { class: "s-conditional-offer-banner" }, h("div", { class: "s-conditional-offer-lead" }, h("salla-skeleton", { height: "24px", width: "80px" }), h("div", { class: "s-conditional-offer-skeleton-text" }, h("salla-skeleton", { height: "12px", width: "35%" }), h("salla-skeleton", { height: "16px", width: "60%" }))))));
     }
     render() {
         if (!this.canRender)
             return null;
+        /**
+         * HIDDEN IS THE DEFAULT. Nothing renders — no banner, no skeleton, no host class,
+         * no layout at all — until it is POSITIVELY KNOWN that the cart holds at least one
+         * item. Everything else, including "the lookup has not answered yet" and "the
+         * lookup failed", is hidden.
+         *
+         * This is an inversion of the original tri-state, and it is what makes the whole
+         * class of stuck-block bugs unreachable rather than merely unlikely. The two
+         * failure modes are not symmetric: hiding when we should have shown is INVISIBLE
+         * and self-corrects the moment the count lands, while showing when we should have
+         * hidden is a tinted block sitting above "السلة فارغة" — which is what shipped
+         * twice. An unknown cart is indistinguishable from an empty one to the shopper, so
+         * it is treated as one.
+         *
+         * Note what this makes structurally impossible: a skeleton can only ever be
+         * painted once `cartItemCount >= 1`, i.e. only when there is genuinely content on
+         * the way, so a skeleton can no longer be stranded by anything that fails before
+         * the cart is known.
+         */
+        if (!this.hasCartItems())
+            return null;
+        // Past this line the cart is known to hold items, so the skeleton is a REAL
+        // loading state for content we know is coming — and the watchdog still sits
+        // behind it for the case where the offer request never settles.
         if (this.isLoading)
             return this.getLoadingSkeletonView();
         if (!this.offer)
             return null;
-        return h(Host, { class: "s-conditional-offer-container" }, h("div", { class: "s-conditional-offer-title-wrapper" }, h("div", { class: "s-conditional-offer-title" }, this.offer.title), this.offer.description ? h("div", { class: "s-conditional-offer-subtitle" }, this.offer.description, " ", h("i", { class: "sicon-information" })) : null), h("div", { class: "s-conditional-offer-progress-container" }, this.offer.details.discounts.map((discount, index) => (h("div", { class: { "flex-1": index > 0 }, key: discount.min_spend }, this.getCheckPointView(discount, index))))));
+        // Derived ONCE per render and threaded down — `stages[i]` and
+        // `progress.thresholds[i]` must be the same pair everywhere they are read.
+        const stages = this.getStages();
+        const progress = this.getProgress(stages);
+        const guidance = this.getGuidanceMessage(stages, progress);
+        const detailsTitle = this.trans('details_title');
+        // Spec §2 — the accordion exists only when there is something to manage.
+        const hasGifts = this.gifts.length > 0;
+        return (h(Host, { class: "s-conditional-offer-root" }, h("div", { class: "s-conditional-offer-banner" }, h("div", { class: "s-conditional-offer-lead" }, this.renderBadges(stages, progress), h("div", { class: "s-conditional-offer-text" }, h("div", { class: "s-conditional-offer-heading", onMouseEnter: () => (this.isTooltipHovered = true), onMouseLeave: () => (this.isTooltipHovered = false) }, h("span", { class: "s-conditional-offer-name" }, this.offer.title), h("span", { class: "s-conditional-offer-info", ref: (el) => (this.infoAnchorEl = el) }, h("button", { type: "button", class: "s-conditional-offer-info-trigger", ref: (el) => (this.infoTriggerEl = el), "aria-label": detailsTitle, title: detailsTitle, "aria-expanded": this.isTooltipOpen ? 'true' : 'false', "aria-describedby": this.elementId('tooltip'), onClick: () => this.toggleTooltip() }, h(InformationIcon, { class: "s-conditional-offer-info-icon" })), this.isTooltipOpen ? this.renderTooltip(stages, progress) : null)), progress.allMet ? (h("div", { class: "s-conditional-offer-message", role: "status" }, this.trans('congrats'))) : guidance ? (
+        // innerHTML: the `:remaining` half carries `salla.money()` markup;
+        // the reward half is escaped in `getGuidanceMessage`.
+        h("div", { class: "s-conditional-offer-message", innerHTML: guidance })) : null)), hasGifts ? this.renderGiftsToggle('inline') : null), hasGifts && this.isGiftsOpen ? this.renderGiftsCard() : null, hasGifts ? this.renderGiftsToggle('bar') : null));
     }
+    get hostEl() { return this; }
     static get style() { return sallaConditionalOfferCss; }
 }, [0, "salla-conditional-offer", {
         "offer": [32],
-        "products": [32],
         "isLoading": [32],
-        "canRender": [32]
-    }]);
+        "canRender": [32],
+        "gifts": [32],
+        "cartItemCount": [32],
+        "isTooltipHovered": [32],
+        "isTooltipPinned": [32],
+        "isGiftsOpen": [32]
+    }, [[9, "resize", "handleWindowResize"], [4, "keydown", "handleDocumentKeydown"], [4, "click", "handleDocumentClick"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-conditional-offer", "salla-skeleton", "salla-tooltip"];
+    const components = ["salla-conditional-offer", "salla-skeleton"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-conditional-offer":
             if (!customElements.get(tagName)) {
@@ -187,11 +2748,6 @@ function defineCustomElement$1() {
             }
             break;
         case "salla-skeleton":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "salla-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }