@salla.sa/twilight-components 2.14.589 → 2.14.591

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

@@ -3,152 +3,1810 @@
  */
 import { Host, h } from "@stencil/core";
 import { DiscountType, OfferType, } from "./interfaces";
+import { getCartFreeGiftItems, getCartItemCount, hasAuthoritativeCartData, refreshCartFreeGifts, } from "../../shared/cart-free-gifts";
+import { CART_UPDATE_COALESCE_MS } from "./cart-update-window";
+import { NO_STAGE_REACHED, OfferStageMeasure, computeOfferStageProgress, getRemainingToStage, isUsableThreshold, sortByThreshold, } from "../../shared/offer-stages";
+/** 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" })));
 export class SallaConditionalOffer {
     constructor() {
         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;
+            }
+            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();
             }
-            this.isLoading = true;
-            this.offer.details.discounts.unshift(({ value: 0, min_spend: 0 }));
-            return this.updateInitialOfferValue();
-        }).then(() => {
-            if (!this.offer)
+            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');
         }
-        const productItem = this.products[discount.value];
-        if (!productItem) {
-            salla.logger.error(`salla-conditional-offer:: there is no product with id (${discount.value})!`);
-            return "";
+        catch (error) {
+            return false;
         }
-        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 }));
     }
-    getOfferType(discount) {
-        const basedOn = this.offer.details?.based_on;
+    /**
+     * 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;
+        }
+        /**
+         * 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;
+        }
+        // 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;
+    }
+    /**
+     * 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));
     }
     static get is() { return "salla-conditional-offer"; }
     static get originalStyleUrls() {
@@ -164,9 +1822,35 @@ export class SallaConditionalOffer {
     static get states() {
         return {
             "offer": {},
-            "products": {},
             "isLoading": {},
-            "canRender": {}
+            "canRender": {},
+            "gifts": {},
+            "cartItemCount": {},
+            "isTooltipHovered": {},
+            "isTooltipPinned": {},
+            "isGiftsOpen": {}
         };
     }
+    static get elementRef() { return "hostEl"; }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleDocumentKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }