@syntrologie/adapt-product 2.34.0 → 2.35.0

package/dist/{chunk-NH3CFDTZ.js → chunk-HV6QS4PQ.js}

@@ -9,8 +9,9 @@ import {
   getProductPlatformAdapter,
   gridSchema,
   heroSchema,
-  recoSchema
-} from "./chunk-FAKCB3BS.js";
+  recoSchema,
+  takeoverPlanSchema
+} from "./chunk-AAV4C3P4.js";
 
 // ../../../node_modules/@lit/context/lib/create-context.js
 function n(n2) {
@@ -279,7 +280,7 @@ function selectPresetData(kind, data, decision) {
 }
 
 // src/widgets/SyntroPdpLit.ts
-import { html as html5, LitElement as LitElement5, render } from "lit";
+import { html as html6, LitElement as LitElement6, render } from "lit";
 
 // src/decision/pdp.ts
 function createInitialPdpState(generation = 0) {
@@ -734,6 +735,319 @@ async function resolveScoredTemplate(opts) {
   return { value, decisionValue, setSlots, unsetSlots };
 }
 
+// src/takeover/resurrectionGuard.ts
+function startResurrectionGuard(opts) {
+  const maxRetries = opts.maxRetries ?? 3;
+  const debounceMs = opts.debounceMs ?? 50;
+  const watched = new Map(opts.anchors);
+  const counts = /* @__PURE__ */ new Map();
+  let timer = null;
+  let stopped = false;
+  const sweep = () => {
+    if (stopped) return;
+    const present = [];
+    for (const [sectionId, selector] of watched) {
+      let matches = [];
+      try {
+        matches = Array.from(opts.region.querySelectorAll(selector));
+      } catch {
+        continue;
+      }
+      const el = matches.find((m) => !(opts.ignore?.(m) ?? false));
+      if (!el) continue;
+      present.push({ sectionId, el, n: (counts.get(sectionId) ?? 0) + 1 });
+    }
+    const exhausted = present.find((p) => p.n > maxRetries);
+    if (exhausted) {
+      for (const p of present) p.el.remove();
+      opts.onBudgetExhausted(exhausted.sectionId, exhausted.el);
+      return;
+    }
+    for (const { sectionId, el, n: n2 } of present) {
+      counts.set(sectionId, n2);
+      opts.onResurrected(sectionId, el);
+    }
+  };
+  const observer2 = new MutationObserver(() => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(sweep, debounceMs);
+  });
+  observer2.observe(opts.region, { childList: true, subtree: true });
+  return {
+    stop() {
+      stopped = true;
+      if (timer) clearTimeout(timer);
+      observer2.disconnect();
+    },
+    unwatch(sectionId) {
+      watched.delete(sectionId);
+      counts.delete(sectionId);
+    }
+  };
+}
+
+// src/takeover/sectionDetach.ts
+var activeDetaches = /* @__PURE__ */ new WeakSet();
+function detachSection(section) {
+  if (activeDetaches.has(section)) return null;
+  if (!section.parentNode) return null;
+  activeDetaches.add(section);
+  const anchor = document.createComment("syntro-takeover-section");
+  section.before(anchor);
+  section.remove();
+  let restored = false;
+  return {
+    section,
+    get restored() {
+      return restored;
+    },
+    restore() {
+      if (restored) return;
+      restored = true;
+      if (anchor.parentNode) anchor.after(section);
+      anchor.remove();
+      activeDetaches.delete(section);
+    }
+  };
+}
+
+// src/takeover/engine.ts
+var DEFAULT_COMMIT_TIMEOUT_MS = 500;
+var NOOP_DISPOSE = () => {
+};
+async function runTakeover(config, ports, opts = {}) {
+  if (!ports.hasSignals()) {
+    void Promise.resolve().then(() => ports.fetchPlan()).then(
+      (response2) => ports.renderModules(
+        {
+          // Host-derived entries (kind:sectionId) are ALSO dropped here:
+          // their source sections stay attached on this path, and rendering
+          // our re-presentation next to the attached original duplicates
+          // host content — the exact class the spec forbids (review F2).
+          order: response2.plan.order.filter((entry) => !entry.includes(":")),
+          suppress: []
+        },
+        () => {
+        }
+      )
+    ).catch(() => ports.telemetry("takeover.render_failed", { path: "progressive" }));
+    return { outcome: "progressive", dispose: NOOP_DISPOSE };
+  }
+  const commitTimeoutMs = opts.commitTimeoutMs ?? DEFAULT_COMMIT_TIMEOUT_MS;
+  const region = ports.region();
+  const lift = ports.curtain();
+  let timeoutId;
+  const timedOut = /* @__PURE__ */ Symbol("timeout");
+  const fetchFailed = /* @__PURE__ */ Symbol("fetch-failed");
+  const response = await Promise.race([
+    ports.fetchPlan().catch(() => fetchFailed),
+    new Promise((r) => {
+      timeoutId = setTimeout(() => r(timedOut), commitTimeoutMs);
+    })
+  ]).finally(() => clearTimeout(timeoutId));
+  if (response === timedOut || response === fetchFailed) {
+    ports.deactivateRoot();
+    lift();
+    if (response === timedOut) {
+      ports.telemetry("takeover.precommit_timeout", { budgetMs: commitTimeoutMs });
+    } else {
+      ports.telemetry("takeover.plan_fetch_failed", { budgetMs: commitTimeoutMs });
+    }
+    return { outcome: "aborted-precommit", dispose: NOOP_DISPOSE };
+  }
+  const plan = response.plan;
+  const sectionsById = new Map(config.hostSections.map((s4) => [s4.id, s4]));
+  const toSuppress = [];
+  let reservedPx = 0;
+  for (const id of plan.suppress) {
+    const section = sectionsById.get(id);
+    if (!section) {
+      ports.telemetry("takeover.suppress_undeclared", { sectionId: id });
+      continue;
+    }
+    let el = null;
+    try {
+      el = ports.findSection(section.anchor);
+    } catch {
+    }
+    if (!el) {
+      ports.telemetry("takeover.section_anchor_missing", { sectionId: id });
+      continue;
+    }
+    reservedPx += ports.measureSection(el);
+    toSuppress.push({ id, el });
+  }
+  ports.reserve(reservedPx);
+  const handles = /* @__PURE__ */ new Map();
+  for (const { id, el } of toSuppress) {
+    const handle = detachSection(el);
+    if (handle) handles.set(id, handle);
+  }
+  let disposed = false;
+  let guard;
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    guard?.stop();
+    for (const handle of handles.values()) handle.restore();
+    handles.clear();
+    ports.deactivateRoot();
+    lift();
+  };
+  guard = startResurrectionGuard({
+    region,
+    ignore: (el) => ports.ownsNode(el),
+    anchors: new Map(toSuppress.map(({ id }) => [id, sectionsById.get(id).anchor])),
+    onResurrected: (sectionId, el) => {
+      ports.telemetry("takeover.section_resurrected", { sectionId });
+      el.remove();
+    },
+    onBudgetExhausted: (sectionId, el) => {
+      ports.telemetry("takeover.resurrection_budget_exhausted", { sectionId });
+      el.remove();
+      dispose();
+    }
+  });
+  const onModuleFailed = (suppressedSectionId) => {
+    if (!suppressedSectionId) return;
+    const handle = handles.get(suppressedSectionId);
+    if (!handle) return;
+    guard?.unwatch(suppressedSectionId);
+    handle.restore();
+    handles.delete(suppressedSectionId);
+    ports.telemetry("takeover.module_failed_section_restored", {
+      sectionId: suppressedSectionId
+    });
+  };
+  void Promise.resolve().then(() => ports.renderModules(plan, onModuleFailed)).catch(() => {
+    ports.telemetry("takeover.render_failed", { path: "committed" });
+    dispose();
+  }).finally(() => ports.releaseReservation());
+  lift();
+  return { outcome: "committed", dispose };
+}
+
+// src/takeover/fetchPlan.ts
+import { z as z2 } from "zod";
+var takeoverPlanResponseSchema = z2.object({
+  decisionArchetype: z2.string().min(1),
+  plan: takeoverPlanSchema
+}).strict();
+function createTakeoverPlanFetcher(deps) {
+  return async () => {
+    const resp = await deps.authedFetch("/api/pdp/plan", {
+      method: "POST",
+      // FROZEN SEAM SHAPE — field set AND order are pinned byte-for-byte by
+      // `src/__fixtures__/takeover-plan-request.json`; the runtime-backend PR
+      // commits the same fixture. Change both sides together or not at all.
+      // Deliberately NO client-scored archetype/decision slugs: the server
+      // scores (spec rev 3) — the client sends vocabulary + signals only.
+      body: JSON.stringify({
+        product_id: deps.productId,
+        product_name: deps.productName,
+        // Page anatomy: ids + roles only. Anchors are host DOM selectors —
+        // client-side facts the server has no business receiving.
+        host_sections: deps.config.hostSections.map(({ id, role }) => ({ id, role })),
+        decision_archetypes: deps.decisionArchetypes,
+        behavior_summary: deps.behaviorSummary,
+        signals: deps.signals,
+        ingest_snapshot: deps.config.ingestSnapshot
+      })
+    });
+    if (!resp.ok) {
+      throw new Error(`takeover plan fetch failed: HTTP ${resp.status}`);
+    }
+    const data = await resp.json();
+    return takeoverPlanResponseSchema.parse(data);
+  };
+}
+
+// src/takeover/regionCurtain.ts
+var CLASS = "syntro-takeover-curtain";
+var STYLE_ATTR = "data-syntro-takeover-curtain";
+var styleRefs = 0;
+function acquireStyle() {
+  styleRefs += 1;
+  if (document.head.querySelector(`style[${STYLE_ATTR}]`)) return;
+  const styleEl = document.createElement("style");
+  styleEl.setAttribute(STYLE_ATTR, "");
+  styleEl.textContent = `.${CLASS} { opacity: 0 !important; }`;
+  document.head.appendChild(styleEl);
+}
+function releaseStyle() {
+  styleRefs = Math.max(0, styleRefs - 1);
+  if (styleRefs === 0) {
+    document.head.querySelector(`style[${STYLE_ATTR}]`)?.remove();
+  }
+}
+function applyRegionCurtain(region, opts = {}) {
+  const timeoutMs = opts.timeoutMs ?? 3e3;
+  acquireStyle();
+  region.classList.add(CLASS);
+  let lifted = false;
+  const lift = () => {
+    if (lifted) return;
+    lifted = true;
+    clearTimeout(timeoutId);
+    region.classList.remove(CLASS);
+    releaseStyle();
+  };
+  const timeoutId = setTimeout(lift, timeoutMs);
+  return lift;
+}
+function applyCurtainToTargets(targets, opts = {}) {
+  const lifts = targets.map((t2) => applyRegionCurtain(t2, opts));
+  return () => {
+    for (const lift of lifts) lift();
+  };
+}
+
+// src/takeover/ports.ts
+function createDomPorts(config, deps) {
+  return {
+    hasSignals: () => deps.signalCount > 0,
+    findSection(anchor) {
+      try {
+        return document.querySelector(anchor);
+      } catch {
+        return null;
+      }
+    },
+    measureSection: (el) => el.getBoundingClientRect().height,
+    reserve(minHeightPx) {
+      if (minHeightPx > 0) deps.root.style.minHeight = `${Math.round(minHeightPx)}px`;
+    },
+    releaseReservation() {
+      deps.root.style.removeProperty("min-height");
+    },
+    region: () => deps.root.parentElement ?? deps.root,
+    ownsNode: (el) => deps.root.contains(el),
+    curtain() {
+      const targets = [deps.root];
+      for (const section of config.hostSections) {
+        try {
+          const el = document.querySelector(section.anchor);
+          if (el) targets.push(el);
+        } catch {
+        }
+      }
+      return applyCurtainToTargets(targets);
+    },
+    deactivateRoot() {
+      deps.root.replaceChildren();
+      deps.root.style.display = "none";
+    },
+    fetchPlan: deps.fetchPlan,
+    renderModules: deps.renderModules,
+    telemetry: deps.telemetry
+  };
+}
+function attachLifecycleDispose(result) {
+  const onHide = () => result.dispose();
+  window.addEventListener("pagehide", onHide, { once: true });
+  return () => window.removeEventListener("pagehide", onHide);
+}
+
 // src/widgets/PdpSectionHeaderLit.ts
 import { html, LitElement, nothing } from "lit";
 function ensureSectionHeaderStyles() {
@@ -898,11 +1212,298 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-sec
   customElements.define("syntro-pdp-section-header", PdpSectionHeaderLit);
 }
 
+// src/widgets/PdpSlotLit.ts
+import { html as html2, LitElement as LitElement2, nothing as nothing2 } from "lit";
+function ensureSlotStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById("syntro-pdp-slot-style")) return;
+  const s4 = document.createElement("style");
+  s4.id = "syntro-pdp-slot-style";
+  s4.textContent = SLOT_CSS;
+  document.head.appendChild(s4);
+}
+var SLOT_CSS = `
+.syntro-pdp-slot {
+  --sl-primary: var(--syntro-pdp-primary, hsl(150 32% 38%));
+  --sl-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
+  --sl-muted: var(--syntro-pdp-muted, hsl(30 8% 55%));
+  --sl-border: var(--syntro-pdp-border, hsl(30 6% 18%));
+  --sl-bg-a: var(--syntro-pdp-card-bg, hsl(25 10% 11%));
+  --sl-bg-b: var(--syntro-pdp-card-bg-b, hsl(25 10% 9%));
+  --sl-display: var(--syntro-pdp-display, inherit);
+
+  position: relative;
+  display: grid;
+  grid-template-areas: 'stack';
+  font-family: var(--syntro-pdp-sans, inherit);
+}
+.syntro-pdp-slot > .syntro-pdp-slot-mount,
+.syntro-pdp-slot > .syntro-pdp-slot-pending,
+.syntro-pdp-slot > .syntro-pdp-slot-failed {
+  grid-area: stack;
+}
+
+.syntro-pdp-slot-mount {
+  min-height: 220px;
+}
+
+/* When mutation arrived, hide the pending layer */
+.syntro-pdp-slot[data-state='mounted'] .syntro-pdp-slot-pending,
+.syntro-pdp-slot[data-state='failed'] .syntro-pdp-slot-pending {
+  display: none;
+}
+.syntro-pdp-slot[data-state='mounted'] .syntro-pdp-slot-failed,
+.syntro-pdp-slot[data-state='pending'] .syntro-pdp-slot-failed {
+  display: none;
+}
+
+/* Pending \u2014 a quietly-animated waiting state. */
+.syntro-pdp-slot-pending {
+  position: relative;
+  border: 1px dashed var(--sl-border);
+  border-radius: 22px;
+  min-height: 220px;
+  padding: 36px 28px;
+  background: linear-gradient(180deg, var(--sl-bg-a), var(--sl-bg-b));
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.syntro-pdp-slot-pending-shimmer {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--sl-primary) 7%, transparent),
+    transparent
+  );
+  transform: translateX(-100%);
+  animation: syntro-pdp-slot-sweep 1800ms ease-in-out infinite;
+}
+.syntro-pdp-slot-pending-row {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.syntro-pdp-slot-pending-dot {
+  flex: 0 0 auto;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--sl-primary);
+  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sl-primary) 14%, transparent);
+  animation: syntro-pdp-slot-pulse 1600ms ease-in-out infinite;
+}
+.syntro-pdp-slot-pending-label {
+  font-family: var(--sl-display);
+  font-style: italic;
+  font-size: 18px;
+  font-variation-settings: 'SOFT' 70;
+  color: var(--sl-muted);
+  margin: 0;
+  line-height: 1.4;
+}
+
+/* Failed \u2014 the planner or sub-agent failed; the host page still works. */
+.syntro-pdp-slot-failed {
+  border: 1px solid var(--sl-border);
+  border-radius: 22px;
+  min-height: 180px;
+  padding: 24px 28px;
+  background: linear-gradient(180deg, var(--sl-bg-a), var(--sl-bg-b));
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 6px;
+}
+.syntro-pdp-slot-failed-title {
+  font-family: var(--sl-display);
+  font-style: italic;
+  font-size: 17px;
+  color: var(--sl-fg);
+  margin: 0;
+  font-variation-settings: 'SOFT' 70;
+}
+.syntro-pdp-slot-failed-body {
+  color: var(--sl-muted);
+  font-size: 13.5px;
+  margin: 0;
+  line-height: 1.5;
+}
+
+@media (max-width: 640px) {
+  .syntro-pdp-slot-pending,
+  .syntro-pdp-slot-failed {
+    border-radius: 18px;
+    padding: 24px 18px;
+    min-height: 180px;
+  }
+  .syntro-pdp-slot-pending-label {
+    font-size: 15.5px;
+  }
+}
+
+@keyframes syntro-pdp-slot-sweep {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+@keyframes syntro-pdp-slot-pulse {
+  0%, 100% {
+    opacity: 0.6;
+    box-shadow: 0 0 0 6px color-mix(in srgb, var(--sl-primary) 14%, transparent);
+  }
+  50% {
+    opacity: 1;
+    box-shadow: 0 0 0 8px color-mix(in srgb, var(--sl-primary) 26%, transparent);
+  }
+}
+`;
+var PENDING_COPY = {
+  "trending-news": "Composing this section\u2026",
+  chart: "Drawing the comparison\u2026",
+  qa: "Picking the questions worth answering\u2026",
+  regional: "Locating you in time and place\u2026",
+  "peer-feed": "Finding people like you\u2026"
+};
+var PENDING_FALLBACK = "Composing\u2026";
+var PdpSlotLit = class extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    /** DOM id the host's mutation runtime targets when appending the widget. */
+    this.slotId = "";
+    this.kind = "";
+    this.state = "pending";
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    ensureSlotStyles();
+  }
+  willUpdate() {
+    this.dataset.state = this.state;
+  }
+  render() {
+    const pendingLabel = PENDING_COPY[this.kind] ?? PENDING_FALLBACK;
+    return html2`
+      <div class="syntro-pdp-slot" data-state=${this.state} data-kind=${this.kind}>
+        <div
+          class="syntro-pdp-slot-mount"
+          id=${this.slotId || nothing2}
+          data-pdp-slot=${this.kind}
+        ></div>
+        <div class="syntro-pdp-slot-pending" aria-hidden=${this.state !== "pending"}>
+          <div class="syntro-pdp-slot-pending-shimmer" aria-hidden="true"></div>
+          <div class="syntro-pdp-slot-pending-row">
+            <span class="syntro-pdp-slot-pending-dot" aria-hidden="true"></span>
+            <p class="syntro-pdp-slot-pending-label">${pendingLabel}</p>
+          </div>
+        </div>
+        <div class="syntro-pdp-slot-failed" aria-hidden=${this.state !== "failed"}>
+          <p class="syntro-pdp-slot-failed-title">
+            Personalized view couldn't load.
+          </p>
+          <p class="syntro-pdp-slot-failed-body">
+            The standard page still has everything you need.
+          </p>
+        </div>
+      </div>
+    `;
+  }
+};
+PdpSlotLit.properties = {
+  slotId: { type: String, attribute: "slot-id" },
+  kind: { type: String },
+  state: { type: String, reflect: true }
+};
+if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-slot")) {
+  customElements.define("syntro-pdp-slot", PdpSlotLit);
+}
+
+// src/takeover/renderModules.ts
+function parsePlanEntry(entry) {
+  const i2 = entry.indexOf(":");
+  if (i2 === -1) return { kind: entry, hostSectionId: null };
+  return { kind: entry.slice(0, i2), hostSectionId: entry.slice(i2 + 1) || null };
+}
+function createTakeoverModuleRenderer(deps) {
+  return async (plan, onModuleFailed) => {
+    const decisionArchetype = deps.getDecisionArchetype();
+    const row = deps.getPresetRow(decisionArchetype) ?? {};
+    const bakedWork = [];
+    plan.order.forEach((entry, index) => {
+      const { kind, hostSectionId } = parsePlanEntry(entry);
+      const slotId = `pdp-slot-${kind}`;
+      const preset = row[slotId];
+      const tag = deps.resolveTag(kind, preset?.variant ?? null);
+      if (!tag) {
+        deps.telemetry("takeover.module_kind_unknown", { entry, kind });
+        onModuleFailed(hostSectionId);
+        return;
+      }
+      const envelope = buildPdpPlan([{ slot: slotId, preset }]);
+      const task = envelope.tasks[0];
+      const section = document.createElement("section");
+      section.toggleAttribute("data-syntro-pdp-section", true);
+      section.setAttribute("data-slot", slotId);
+      section.setAttribute("data-syntro-takeover-entry", entry);
+      const header = document.createElement("syntro-pdp-section-header");
+      header.eyebrow = task.header.eyebrow ?? "";
+      header.title = task.header.title ?? "";
+      header.accent = task.header.accent ?? "";
+      header.subtitle = task.header.subtitle ?? "";
+      const inner = document.createElement("div");
+      inner.toggleAttribute("data-syntro-pdp-section-inner", true);
+      const slotEl = document.createElement("syntro-pdp-slot");
+      slotEl.slotId = `syntro-takeover-${index}-${slotId}`;
+      slotEl.kind = kind;
+      slotEl.state = "pending";
+      inner.appendChild(slotEl);
+      section.append(header, inner);
+      deps.root.appendChild(section);
+      const fail = () => {
+        if (hostSectionId) {
+          section.remove();
+        } else {
+          slotEl.state = "failed";
+        }
+        deps.telemetry("takeover.module_failed", { entry, kind });
+        onModuleFailed(hostSectionId);
+      };
+      const mountPayload = async (payload) => {
+        await slotEl.updateComplete;
+        const mount = slotEl.querySelector(".syntro-pdp-slot-mount");
+        if (!mount) {
+          fail();
+          return;
+        }
+        mount.replaceChildren();
+        const widget = document.createElement(tag);
+        widget.data = payload;
+        mount.appendChild(widget);
+        slotEl.state = "mounted";
+      };
+      if (preset) {
+        const data = selectPresetData(preset.kind, preset.data, decisionArchetype);
+        bakedWork.push(mountPayload(data).catch(fail));
+      } else {
+        void deps.requestLiveModule(kind, decisionArchetype).then((payload) => payload ? mountPayload(payload) : fail()).catch(fail);
+      }
+    });
+    await Promise.all(bakedWork);
+  };
+}
+
 // src/widgets/PdpOtherProductsCarouselLit.ts
-import { html as html3, LitElement as LitElement3 } from "lit";
+import { html as html4, LitElement as LitElement4 } from "lit";
 
 // src/widgets/OtherProductTileLit.ts
-import { html as html2, LitElement as LitElement2 } from "lit";
+import { html as html3, LitElement as LitElement3 } from "lit";
 var RELATIONSHIP_LABELS = {
   discovery: "Recommended for you",
   complement: "Pairs with this",
@@ -1045,7 +1646,7 @@ var OTHER_PRODUCT_TILE_CSS = `
   background: color-mix(in srgb, var(--opt-primary) 10%, transparent);
 }
 `;
-var OtherProductTileLit = class extends LitElement2 {
+var OtherProductTileLit = class extends LitElement3 {
   constructor() {
     super(...arguments);
     this.tile = null;
@@ -1060,24 +1661,24 @@ var OtherProductTileLit = class extends LitElement2 {
   render() {
     const t2 = this.tile;
     if (!t2) {
-      return html2``;
+      return html3``;
     }
     const relationshipLabel = RELATIONSHIP_LABELS[t2.relationship];
     const price = t2.price_cents == null ? "" : `$${(t2.price_cents / 100).toFixed(0)}`;
-    return html2`
+    return html3`
       <article class="opt-card" data-relationship="${t2.relationship}">
-        ${t2.image_url ? html2`<div class="opt-image">
+        ${t2.image_url ? html3`<div class="opt-image">
               <img src="${t2.image_url}" alt="${t2.name}" loading="lazy" />
             </div>` : null}
         <div class="opt-relationship" data-relationship="${t2.relationship}">
-          ${relationshipLabel ? html2`${relationshipLabel}` : null}
+          ${relationshipLabel ? html3`${relationshipLabel}` : null}
           <span class="opt-relationship-type">${t2.relationship}</span>
         </div>
         <h3 class="opt-name">${t2.name}</h3>
-        ${t2.tagline ? html2`<p class="opt-tagline">${t2.tagline}</p>` : null}
-        ${t2.why_blurb ? html2`<p class="opt-why">${t2.why_blurb}</p>` : null}
-        ${t2.evidence_chips.length ? html2`<div class="opt-chips">
-              ${t2.evidence_chips.map((c2) => html2`<span class="opt-chip">${c2.display}</span>`)}
+        ${t2.tagline ? html3`<p class="opt-tagline">${t2.tagline}</p>` : null}
+        ${t2.why_blurb ? html3`<p class="opt-why">${t2.why_blurb}</p>` : null}
+        ${t2.evidence_chips.length ? html3`<div class="opt-chips">
+              ${t2.evidence_chips.map((c2) => html3`<span class="opt-chip">${c2.display}</span>`)}
             </div>` : null}
         <div class="opt-footer">
           <span class="opt-price">${price}</span>
@@ -1160,7 +1761,7 @@ syntro-pdp-other-products-carousel {
   }
 }
 `;
-var PdpOtherProductsCarouselLit = class extends LitElement3 {
+var PdpOtherProductsCarouselLit = class extends LitElement4 {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -1173,12 +1774,12 @@ var PdpOtherProductsCarouselLit = class extends LitElement3 {
     ensureCarouselStyles();
   }
   render() {
-    if (!this.data) return html3``;
-    return html3`
+    if (!this.data) return html4``;
+    return html4`
       <div class="opc-carousel">
         <div class="carousel" role="list">
           ${this.data.tiles.map(
-      (tile) => html3`
+      (tile) => html4`
               <div class="opc-item" role="listitem">
                 <syntro-pdp-other-product-tile .tile=${tile}></syntro-pdp-other-product-tile>
               </div>
@@ -1197,7 +1798,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-oth
 }
 
 // src/widgets/PdpOtherProductsGridLit.ts
-import { html as html4, LitElement as LitElement4 } from "lit";
+import { html as html5, LitElement as LitElement5 } from "lit";
 function ensureGridStyles() {
   if (typeof document === "undefined") return;
   if (document.getElementById("syntro-pdp-other-products-grid-style")) return;
@@ -1226,7 +1827,7 @@ syntro-pdp-other-products-grid {
   }
 }
 `;
-var PdpOtherProductsGridLit = class extends LitElement4 {
+var PdpOtherProductsGridLit = class extends LitElement5 {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -1239,11 +1840,11 @@ var PdpOtherProductsGridLit = class extends LitElement4 {
     ensureGridStyles();
   }
   render() {
-    if (!this.data) return html4``;
-    return html4`
+    if (!this.data) return html5``;
+    return html5`
       <div class="grid" role="list">
         ${this.data.tiles.map(
-      (tile) => html4`
+      (tile) => html5`
             <syntro-pdp-other-product-tile role="listitem" .tile=${tile}></syntro-pdp-other-product-tile>
           `
     )}
@@ -1750,6 +2351,9 @@ function gatherVisitorSignals() {
     extras: gatherExtras(runtime2, context)
   };
 }
+function countTakeoverSignals(signals) {
+  return _countSignals(signals.session_metrics) + (signals.chat_excerpt ? 1 : 0);
+}
 var TEMPLATE_TO_TAG = {
   // trending-news (TrendingNewsVariant)
   "trending-news": "syntro-pdp-trending-news",
@@ -1794,12 +2398,21 @@ function resolveTagForMount(inst) {
   }
   return null;
 }
-var _SyntroPdpLit = class _SyntroPdpLit extends LitElement5 {
+var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
   constructor() {
     super(...arguments);
     this.productId = "";
     this.productName = "";
     this.productBlurb = "";
+    /**
+     * Page-takeover anatomy (FEAT-1785977524), normally delivered through the
+     * widget `props` below. Presence at CONNECT time latches the element into
+     * takeover mode: the engine owns the root and the six-slot compose path
+     * never starts. Setting it after a legacy connect is ignored (warned) —
+     * flipping modes on a live element could leave both paths' DOM behind.
+     */
+    this.takeover = void 0;
+    this._propsValue = void 0;
     /**
      * SDK runtime. Null until the mountable wires it in. We only render
      * the personalized surface once runtimeRef is present AND the
@@ -1840,6 +2453,48 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement5 {
      */
     this._nativeSlots = /* @__PURE__ */ new Set();
     this._nativeHandles = /* @__PURE__ */ new Map();
+    /**
+     * Takeover mode latch — decided ONCE, at the element's FIRST connect, from
+     * the `takeover` prop, and kept for the element's whole lifetime. While
+     * true, Lit never renders into this element (see shouldUpdate): the engine
+     * renders imperatively and its deactivateRoot() calls replaceChildren() on
+     * this root, which would destroy Lit's child parts. The latch is one-way in
+     * BOTH directions — an element that ever rendered legacy has live Lit parts
+     * (engaging the engine would render next to them, then destroy them), and
+     * an element the engine ever owned has no parts left for Lit to resume.
+     */
+    this._takeoverMode = false;
+    this._takeoverModeLatched = false;
+    /** The single in-flight/settled takeover run for this connected lifetime. */
+    this._takeoverRun = null;
+    /**
+     * Settles when the previous run's dispose has fully completed. A re-run
+     * (reconnect, or a synchronous move between parents) chains on this so a
+     * LATE dispose from the torn-down run can never deactivate the root the
+     * new run is rendering into.
+     */
+    this._takeoverDisposal = Promise.resolve();
+    /** A previous run deactivated the root (display:none + emptied); a re-run
+     *  after reconnect must undo that before the engine renders again. */
+    this._takeoverRanBefore = false;
+    this._takeoverLateWarned = false;
+    /**
+     * bfcache re-entry (review F4). pagehide disposes the run
+     * (attachLifecycleDispose) but a bfcache restore does NOT re-fire
+     * connectedCallback — without this listener the restored page would sit on
+     * the native fallback forever. `persisted` is true only for bfcache
+     * restores; the normal-load pageshow is owned by the connect path. Arrow
+     * function per Lit event-handler convention (stable identity for
+     * add/removeEventListener).
+     */
+    this._onTakeoverPageShow = (event) => {
+      if (!event.persisted) return;
+      if (!this._takeoverMode || !this.isConnected) return;
+      const config = this.takeover;
+      if (!config) return;
+      this._teardownTakeover();
+      this._startTakeover(config);
+    };
     /**
      * The scored axes from the current config pass — the SAME values
      * `_fireFromConfig` resolved (sport-archetype preset key + decision archetype).
@@ -1860,6 +2515,23 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement5 {
       this._dispatchDecision({ type: "dossier-toggled", open });
     };
   }
+  /**
+   * Widget props (the `adaptive-product:pdp` mountable sets `el.props` before
+   * appending). Mapped IMMEDIATELY in the setter — not in willUpdate — so
+   * `takeover` is already on the element when connectedCallback latches the
+   * mode. Absent fields leave the element's current values untouched.
+   */
+  get props() {
+    return this._propsValue;
+  }
+  set props(value) {
+    this._propsValue = value;
+    if (!value) return;
+    if (value.productId) this.productId = value.productId;
+    if (value.productName) this.productName = value.productName;
+    if (value.productBlurb) this.productBlurb = value.productBlurb;
+    if (value.takeover) this.takeover = value.takeover;
+  }
   _dispatchDecision(event) {
     const transition = transitionPdp(this._decisionState, event);
     this._decisionState = transition.state;
@@ -1869,6 +2541,25 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement5 {
     return this;
   }
   connectedCallback() {
+    if (!this._takeoverModeLatched) {
+      this._takeoverModeLatched = true;
+      this._takeoverMode = Boolean(this.takeover);
+    } else if (!this._takeoverMode && this.takeover && !this._takeoverLateWarned) {
+      this._takeoverLateWarned = true;
+      console.warn(
+        "[syntro-pdp] takeover prop set on an element that already connected on the standard compose path \u2014 ignored (mode is latched per element). Mount a fresh element with `takeover` in its widget props."
+      );
+    }
+    if (this._takeoverMode) {
+      super.connectedCallback();
+      ensureSectionLayoutStyles();
+      if (typeof window !== "undefined") {
+        window.removeEventListener("pageshow", this._onTakeoverPageShow);
+        window.addEventListener("pageshow", this._onTakeoverPageShow);
+      }
+      if (this.takeover) this._startTakeover(this.takeover);
+      return;
+    }
     const reconnecting = this._decisionState.connection === "disconnected";
     super.connectedCallback();
     ensureSectionLayoutStyles();
@@ -1885,6 +2576,14 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement5 {
     }
   }
   disconnectedCallback() {
+    if (this._takeoverMode) {
+      super.disconnectedCallback();
+      if (typeof window !== "undefined") {
+        window.removeEventListener("pageshow", this._onTakeoverPageShow);
+      }
+      this._teardownTakeover();
+      return;
+    }
     super.disconnectedCallback();
     this._navUnsub?.();
     this._navUnsub = null;
@@ -1892,6 +2591,16 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement5 {
     this._nativeHandles.clear();
     this._dispatchDecision({ type: "disconnected" });
   }
+  shouldUpdate(changed) {
+    if (this._takeoverMode) return false;
+    if (changed.has("takeover") && this.takeover && !this._takeoverLateWarned) {
+      this._takeoverLateWarned = true;
+      console.warn(
+        "[syntro-pdp] takeover prop set after the element already connected on the standard compose path \u2014 ignored. Provide `takeover` in the widget props before the element connects (or re-mount it)."
+      );
+    }
+    return true;
+  }
   willUpdate(changed) {
     if (changed.has("runtimeRef")) {
       this._syncDecisionRuntime(false);
@@ -2014,6 +2723,135 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement5 {
   _syncDecisionPortal() {
     this._dispatchDecision({ type: "portal-updated", present: this._whyPortalEl() !== null });
   }
+  // ── Takeover wiring (FEAT-1785977524) ────────────────────────────────────
+  /**
+   * Run the takeover engine with real ports: this element as the root,
+   * `SynOS.authedFetch` as the plan/module transport and the existing slot
+   * machinery as the renderer. Activation is config delivery itself: the
+   * served config either carries `takeover` or it doesn't. Runs at
+   * most once per connected lifetime (`_takeoverRun` latch); disconnect tears
+   * it down and a reconnect re-evaluates fresh.
+   */
+  _startTakeover(config) {
+    if (this._takeoverRun) return;
+    if (!this.productId) {
+      this._track("takeover.missing_product_id", {});
+      console.warn(
+        "[syntro-pdp] takeover requires a product id (widget props / product-id attr) \u2014 skipping takeover, native page untouched."
+      );
+      return;
+    }
+    const synos = _readSynOS();
+    const authedFetch = synos?.authedFetch;
+    const signals = { ...gatherVisitorSignals(), chat_excerpt: readChatExcerpt() };
+    const decisionDescriptions = _readPdpDecisionArchetypes() ?? {};
+    const telemetry2 = (event, props) => this._track(event, props);
+    const scored = { decisionArchetype: "unknown" };
+    const fetchPlan = authedFetch ? createTakeoverPlanFetcher({
+      authedFetch,
+      config,
+      productId: this.productId,
+      productName: this.productName,
+      decisionArchetypes: decisionDescriptions,
+      // No client-side summary exists on the takeover path (the server
+      // scores); the field mirrors /api/pdp/module's for the scorer.
+      behaviorSummary: "",
+      signals
+    }) : null;
+    const run = {
+      disposed: false,
+      detach: null,
+      result: Promise.resolve(null)
+    };
+    const renderModules = createTakeoverModuleRenderer({
+      root: this,
+      getPresetRow: (decisionArchetype) => {
+        const table = _readPdpPresets()?.[this.productId];
+        return table?.[decisionArchetype] ?? table?.unknown;
+      },
+      resolveTag: (kind, variant) => resolveTagForMount({
+        slot: `pdp-slot-${kind}`,
+        kind,
+        variant,
+        header: { eyebrow: "", title: "", accent: null, subtitle: null }
+      }),
+      requestLiveModule: async (kind, decisionArchetype) => {
+        if (!authedFetch) return null;
+        return composeModule(authedFetch, {
+          productName: this.productName,
+          // Guaranteed non-empty: _startTakeover gates on a missing product id.
+          productId: this.productId,
+          kind,
+          variant: null,
+          // The takeover round trip scores only the decision axis (the server
+          // resolves the plan from it); the sport-archetype axis is unscored
+          // on this path, so it is sent as an explicit 'unknown' — never a
+          // silently-invented value.
+          archetype: { slug: "unknown", description: "" },
+          decisionArchetype: decisionArchetype === "unknown" ? null : {
+            slug: decisionArchetype,
+            description: decisionDescriptions[decisionArchetype] ?? ""
+          },
+          behaviorSummary: "",
+          signals
+        });
+      },
+      telemetry: telemetry2,
+      getDecisionArchetype: () => scored.decisionArchetype
+    });
+    const ports = createDomPorts(config, {
+      root: this,
+      signalCount: countTakeoverSignals(signals),
+      fetchPlan: fetchPlan ? async () => {
+        const response = await fetchPlan();
+        scored.decisionArchetype = response.decisionArchetype;
+        return response;
+      } : async () => {
+        throw new Error("SynOS.authedFetch unavailable \u2014 cannot fetch takeover plan");
+      },
+      // Torn-down guard: the progressive path's dispose is a no-op (nothing
+      // was detached), so its BACKGROUND render has no cancellation handle —
+      // this gate is what stops a stale run from appending into a root a
+      // newer run may own by then.
+      renderModules: async (plan, onModuleFailed) => {
+        if (run.disposed) return;
+        return renderModules(plan, onModuleFailed);
+      },
+      telemetry: telemetry2
+    });
+    run.result = this._takeoverDisposal.then(() => {
+      if (run.disposed) return null;
+      if (this._takeoverRanBefore) {
+        this.style.removeProperty("display");
+        this.replaceChildren();
+      }
+      this._takeoverRanBefore = true;
+      return runTakeover(config, ports);
+    }).then((result) => {
+      if (!result) return null;
+      telemetry2("takeover.outcome", { outcome: result.outcome });
+      if (run.disposed) {
+        result.dispose();
+        return result;
+      }
+      run.detach = attachLifecycleDispose(result);
+      return result;
+    }).catch((err) => {
+      telemetry2("takeover.run_failed", { error: String(err).slice(0, 200) });
+      return null;
+    });
+    this._takeoverRun = run;
+  }
+  /** Dispose the current takeover run (idempotent). */
+  _teardownTakeover() {
+    const run = this._takeoverRun;
+    if (!run) return;
+    this._takeoverRun = null;
+    run.disposed = true;
+    run.detach?.();
+    run.detach = null;
+    this._takeoverDisposal = run.result.then((result) => result?.dispose());
+  }
   /**
    * Emit a telemetry event via the runtime's track API.
    * Wrapped in try/catch so a broken telemetry integration never crashes the
@@ -2377,7 +3215,7 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement5 {
     if (view.status === "hidden") return "";
     if (view.status === "loading") return this._renderWhyBoxLoading();
     const e2 = view.explanation;
-    return html5`
+    return html6`
       <style>
         /* Token bridge: every color resolves from a --syntro-pdp-* var the
          * host (vela pages + SPA) publishes, falling back to a NEUTRAL host
@@ -2464,29 +3302,29 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement5 {
           Shown in demo mode only — a peek under the hood at the live personalization.
         </div>
         <div data-syntro-pdp-why-archetype>
-          Shopping as: <strong>${e2.archetypeLabel}</strong>${e2.archetypeDesc ? html5` — ${e2.archetypeDesc}` : ""}
+          Shopping as: <strong>${e2.archetypeLabel}</strong>${e2.archetypeDesc ? html6` — ${e2.archetypeDesc}` : ""}
         </div>
-        ${e2.decisionLabel ? html5`<div data-syntro-pdp-why-archetype>
-                What they're weighing: <strong>${e2.decisionLabel}</strong>${e2.decisionDesc ? html5` — “${e2.decisionDesc}”` : ""}
+        ${e2.decisionLabel ? html6`<div data-syntro-pdp-why-archetype>
+                What they're weighing: <strong>${e2.decisionLabel}</strong>${e2.decisionDesc ? html6` — “${e2.decisionDesc}”` : ""}
               </div>` : ""}
-        ${e2.summary ? html5`<div data-syntro-pdp-why-summary>"${e2.summary}"</div>` : ""}
+        ${e2.summary ? html6`<div data-syntro-pdp-why-summary>"${e2.summary}"</div>` : ""}
         <div data-syntro-pdp-why-metrics>
           ${e2.metrics.map(
-      (m) => html5`<div data-syntro-pdp-why-metric>
+      (m) => html6`<div data-syntro-pdp-why-metric>
               <span data-syntro-pdp-why-metric-value>${m.value}</span>
               <span data-syntro-pdp-why-metric-label>${m.label}</span>
             </div>`
     )}
         </div>
-        ${view.dossier.length ? html5`<details data-syntro-pdp-why-dossier ?open=${view.dossierOpen} @toggle=${this._onDossierToggle}>
+        ${view.dossier.length ? html6`<details data-syntro-pdp-why-dossier ?open=${view.dossierOpen} @toggle=${this._onDossierToggle}>
               <summary>What was measured</summary>
               <div data-syntro-pdp-why-dossier-list>
                 ${view.dossier.map(
-      (m) => html5`<div data-syntro-pdp-why-dossier-row>
+      (m) => html6`<div data-syntro-pdp-why-dossier-row>
                     <span data-syntro-pdp-why-dossier-value>${m.value}</span>
                     <div data-syntro-pdp-why-dossier-text>
                       <span data-syntro-pdp-why-dossier-label>${m.label}</span>
-                      ${m.hint ? html5`<span data-syntro-pdp-why-dossier-hint>${m.hint}</span>` : ""}
+                      ${m.hint ? html6`<span data-syntro-pdp-why-dossier-hint>${m.hint}</span>` : ""}
                     </div>
                   </div>`
     )}
@@ -2503,7 +3341,7 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement5 {
    * so the swap to the filled box is a state change, not a first appearance.
    */
   _renderWhyBoxLoading() {
-    return html5`
+    return html6`
       <style>
         [data-syntro-pdp-why] {
           margin: 0; padding: 4px 0;
@@ -2543,18 +3381,18 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement5 {
     `;
   }
   render() {
-    if (this._pageUnresolvable) return html5``;
+    if (this._pageUnresolvable) return html6``;
     if (this._presetsSettled && this._decisionState.stream.status === "idle" && this._decisionState.plan.status === "empty" && !_readPdpPresets()?.[this.productId]) {
-      return html5``;
+      return html6``;
     }
     const skeletonStyles = _SyntroPdpLit._skeletonStyles;
     const view = selectPdpView(this._decisionState);
     if (view.layout === "skeleton") {
-      return html5`
+      return html6`
         ${skeletonStyles}
         <div data-syntro-pdp-root data-state="pending" data-syntro-pdp-skeleton>
           ${[0, 1, 2].map(
-        (i2) => html5`
+        (i2) => html6`
               <section
                 data-syntro-pdp-skeleton-section
                 style="animation-delay: ${i2 * 0.15}s"
@@ -2571,7 +3409,7 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement5 {
         </div>
       `;
     }
-    return html5`
+    return html6`
       ${skeletonStyles}
       <div data-syntro-pdp-root data-state=${view.rootState}>
         ${view.whyBox.destination === "inline" ? this._renderWhyBox(view.whyBox) : ""}
@@ -2579,7 +3417,7 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement5 {
       if (!slot.visible) return "";
       const task = slot.task;
       if (this._nativeSlots.has(task.slot)) return "";
-      return html5`
+      return html6`
             <section data-syntro-pdp-section data-slot=${task.slot}>
               <syntro-pdp-section-header
                 .eyebrow=${task.header.eyebrow}
@@ -2603,7 +3441,7 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement5 {
        * change) without ever touching the imperatively-managed
        * slot subtree. See adversarial-review failure mode #2.
        */
-      slot.showLoading ? html5`<div data-syntro-pdp-slot-shimmer>
+      slot.showLoading ? html6`<div data-syntro-pdp-slot-shimmer>
                       <div data-syntro-pdp-skeleton-body></div>
                     </div>` : ""}
               </div>
@@ -2619,6 +3457,7 @@ _SyntroPdpLit.properties = {
   productName: { type: String, attribute: "product-name" },
   productBlurb: { type: String, attribute: "product-blurb" },
   runtimeRef: { attribute: false },
+  takeover: { attribute: false },
   _decisionState: { state: true },
   _pageUnresolvable: { state: true },
   _presetsSettled: { state: true }
@@ -2630,7 +3469,7 @@ _SyntroPdpLit.properties = {
  * (see `ensureSectionLayoutStyles`), not here, so they're emitted once
  * per document rather than once per `<syntro-pdp>` instance.
  */
-_SyntroPdpLit._skeletonStyles = html5`
+_SyntroPdpLit._skeletonStyles = html6`
     <style>
       [data-syntro-pdp-skeleton] {
         display: flex;
@@ -3033,6 +3872,10 @@ async function flush() {
     pending.clear();
     return;
   }
+  if (typeof document !== "undefined" && document.querySelector("syntro-pdp")) {
+    pending.clear();
+    return;
+  }
   const ids = [...pending];
   pending.clear();
   for (const id of ids) await onProductAppeared(id);
@@ -3110,7 +3953,7 @@ function startNativeSlotWatcher() {
 }
 
 // src/widgets/ProductCardLit.ts
-import { html as html7, LitElement as LitElement7, nothing as nothing3 } from "lit";
+import { html as html8, LitElement as LitElement8, nothing as nothing4 } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 
 // src/bind/dom-selector.ts
@@ -4138,7 +4981,7 @@ cancel_fn = function() {
 };
 
 // src/widgets/VariantPanelLit.ts
-import { html as html6, LitElement as LitElement6, nothing as nothing2 } from "lit";
+import { html as html7, LitElement as LitElement7, nothing as nothing3 } from "lit";
 var PANEL_CSS = `
   syntro-variant-panel {
     display: grid;
@@ -4370,7 +5213,7 @@ var PANEL_CSS = `
   .svp-live { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
 `;
 var _VariantPanelLit_instances, healthProbe_fn;
-var _VariantPanelLit = class _VariantPanelLit extends LitElement6 {
+var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
   constructor() {
     super();
     __privateAdd(this, _VariantPanelLit_instances);
@@ -4472,7 +5315,7 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement6 {
   }
   render() {
     if (this.state === "error") {
-      return html6`
+      return html7`
         <div class="svp-error-block" data-error-block>
           <div>Couldn't load options. ${this.error ?? ""}</div>
           <button class="svp-retry-btn" data-retry-button @click=${this._onRetry}>Try again</button>
@@ -4480,7 +5323,7 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement6 {
       `;
     }
     if (this.state === "loading" || !this.payload) {
-      return html6`
+      return html7`
         <div data-loading-skeleton>
           <div class="svp-skeleton"></div>
           <div class="svp-skeleton"></div>
@@ -4493,26 +5336,26 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement6 {
     const compareAt = matching?.compare_at_price ?? null;
     const singleVariant = this.payload.attributes.length === 0;
     const heroSrc = this._heroSrc();
-    const backBtn = html6`<button
+    const backBtn = html7`<button
       class="svp-back-btn"
       data-back-button
       @click=${this._onBack}
       aria-label="Back"
     >‹ Back</button>`;
-    return html6`
+    return html7`
       <div class="svp-image-col" data-image-col>
-        ${heroSrc ? html6`<img
+        ${heroSrc ? html7`<img
                 class="svp-image"
                 data-variant-image
                 src=${heroSrc}
                 alt=${this.productImage?.alt ?? ""}
                 loading="lazy"
-              />` : nothing2}
+              />` : nothing3}
       </div>
       <div class="svp-body" data-panel-body>
-        ${this.productTitle ? html6`<div class="svp-product-title" data-product-title data-critical-text>${this.productTitle}</div>` : nothing2}
+        ${this.productTitle ? html7`<div class="svp-product-title" data-product-title data-critical-text>${this.productTitle}</div>` : nothing3}
         <div class="svp-attributes-scroll" data-attributes-scroll data-clip-ok>
-          ${singleVariant ? html6`<div class="svp-single-variant-note" data-single-variant-note>
+          ${singleVariant ? html7`<div class="svp-single-variant-note" data-single-variant-note>
                   Just one option — ready to add.
                 </div>` : this.payload.attributes.map((attr) => this._renderAttributeRow(attr))}
         </div>
@@ -4527,23 +5370,23 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement6 {
             ${// Short label: "Add · $64" (the price commits HERE — the card's
     // front face carries no price; round-3 feedback shortened this
     // so Back fits beside it on the same row).
-    ctaPrice != null ? html6`Add ${compareAt ? html6`<span class="svp-compare">$${compareAt.toFixed(2)}</span>` : nothing2}· $${ctaPrice.toFixed(2)}` : html6`Add to cart`}
+    ctaPrice != null ? html7`Add ${compareAt ? html7`<span class="svp-compare">$${compareAt.toFixed(2)}</span>` : nothing3}· $${ctaPrice.toFixed(2)}` : html7`Add to cart`}
           </button>
           ${backBtn}
         </div>
         <div class="svp-live" data-live data-clip-ok aria-live="polite">
-          ${this.productTitle ? `Showing options for ${this.productTitle}` : nothing2}
+          ${this.productTitle ? `Showing options for ${this.productTitle}` : nothing3}
         </div>
       </div>
     `;
   }
   _renderAttributeRow(attr) {
     const oosVisible = this._hasAnyOOSForAttribute(attr);
-    return html6`
+    return html7`
       <div class="svp-attribute-row" data-attribute-row data-attribute-key=${attr.key}>
         <div class="svp-attribute-label" data-attribute-label id=${`attrlabel-${attr.key}`}>${attr.label}</div>
         ${attr.values.length >= _VariantPanelLit.COLLAPSE_MIN_OPTIONS ? this._renderCollapsedAxis(attr) : attr.kind === "swatch" ? this._renderSwatchRow(attr) : this._renderPillRow(attr)}
-        ${oosVisible ? html6`<div class="svp-oos-microcopy" data-out-of-stock-microcopy>Out of stock for one or more options</div>` : nothing2}
+        ${oosVisible ? html7`<div class="svp-oos-microcopy" data-out-of-stock-microcopy>Out of stock for one or more options</div>` : nothing3}
       </div>
     `;
   }
@@ -4552,12 +5395,12 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement6 {
   }
   _renderPillRow(attr) {
     const segmented = attr.values.length <= _VariantPanelLit.SEGMENTED_MAX_OPTIONS;
-    return html6`
-      <div class="svp-pill-row" data-segmented=${segmented ? "" : nothing2} data-scroll=${this._isScrollTier(attr) ? "" : nothing2} role="radiogroup" aria-labelledby=${`attrlabel-${attr.key}`}>
+    return html7`
+      <div class="svp-pill-row" data-segmented=${segmented ? "" : nothing3} data-scroll=${this._isScrollTier(attr) ? "" : nothing3} role="radiogroup" aria-labelledby=${`attrlabel-${attr.key}`}>
         ${attr.values.map((v) => {
       const disabled2 = this._isValueDisabled(attr.key, v.id);
       const checked = this._selection[attr.key] === v.id;
-      return html6`<button
+      return html7`<button
             class="svp-pill"
             data-pill
             data-attribute-key=${attr.key}
@@ -4575,14 +5418,14 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement6 {
   _renderSwatchRow(attr) {
     const selectedValueId = this._selection[attr.key];
     const selectedLabel = attr.values.find((v) => v.id === selectedValueId)?.label ?? "";
-    return html6`
+    return html7`
       <div class="svp-swatch-label">${selectedLabel}</div>
-      <div class="svp-swatch-row" data-scroll=${this._isScrollTier(attr) ? "" : nothing2} role="radiogroup" aria-labelledby=${`attrlabel-${attr.key}`}>
+      <div class="svp-swatch-row" data-scroll=${this._isScrollTier(attr) ? "" : nothing3} role="radiogroup" aria-labelledby=${`attrlabel-${attr.key}`}>
         ${attr.values.map((v) => {
       const disabled2 = this._isValueDisabled(attr.key, v.id);
       const checked = this._selection[attr.key] === v.id;
       const color = v.swatch?.kind === "color" ? v.swatch.value : "transparent";
-      return html6`<button
+      return html7`<button
             class="svp-swatch-pill"
             data-pill
             data-swatch-dot
@@ -4636,8 +5479,8 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement6 {
     const filter = (this._axisFilter[attr.key] ?? "").trim().toLowerCase();
     const filtered = filter ? attr.values.filter((v) => v.label.toLowerCase().includes(filter)) : attr.values;
     const showFilter = attr.values.length >= _VariantPanelLit.FILTER_MIN_OPTIONS;
-    const dot = (v) => v?.swatch?.kind === "color" ? html6`<span class="svp-swatch-dot" style="background-color: ${v.swatch.value}"></span>` : nothing2;
-    return html6`
+    const dot = (v) => v?.swatch?.kind === "color" ? html7`<span class="svp-swatch-dot" style="background-color: ${v.swatch.value}"></span>` : nothing3;
+    return html7`
       <div
         class="svp-collapse"
         data-collapsed-axis
@@ -4667,7 +5510,7 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement6 {
           <span class="svp-collapse-value">${selected ? selected.label : `Choose ${attr.label.toLowerCase()}`}</span>
           <span class="svp-collapse-caret">${expanded ? "\u25B4" : "\u25BE"}</span>
         </button>
-        ${expanded ? html6`
+        ${expanded ? html7`
               <div
                 class="svp-collapse-list"
                 data-clip-ok
@@ -4675,18 +5518,18 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement6 {
                 role="listbox"
                 aria-labelledby=${`attrlabel-${attr.key}`}
               >
-                ${showFilter ? html6`<input
+                ${showFilter ? html7`<input
                         class="svp-collapse-filter"
                         data-collapse-filter
                         type="text"
                         placeholder=${`Filter ${attr.label.toLowerCase()}\u2026`}
                         .value=${this._axisFilter[attr.key] ?? ""}
                         @input=${(e2) => this._onAxisFilterInput(attr.key, e2)}
-                      />` : nothing2}
+                      />` : nothing3}
                 ${filtered.map((v) => {
       const disabled2 = this._isValueDisabled(attr.key, v.id);
       const isSelected = this._selection[attr.key] === v.id;
-      return html6`<button
+      return html7`<button
                     class="svp-collapse-option"
                     data-collapse-option
                     data-value-id=${v.id}
@@ -4697,8 +5540,8 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement6 {
                     @click=${() => this._onCollapsedSelect(attr.key, v.id)}
                   >${dot(v)}<span class="svp-collapse-value">${v.label}</span></button>`;
     })}
-                ${filtered.length === 0 ? html6`<div class="svp-collapse-empty">No matches</div>` : nothing2}
-              </div>` : nothing2}
+                ${filtered.length === 0 ? html7`<div class="svp-collapse-empty">No matches</div>` : nothing3}
+              </div>` : nothing3}
       </div>
     `;
   }
@@ -4823,7 +5666,7 @@ var CARD_FLIP_CSS = `
   }
 `;
 var _effectExecutor, _controller, _unsubDevice, _lastFailureFingerprint, _reportedHealthStates, _healthRaf, _ProductCardLit_instances, scheduleHealthCheck_fn, measureAndReportHealth_fn, cleanupHostResources_fn, dispatchCard_fn, _onFlipAnimationEnd, startBind_fn, readProductObservation_fn, syncDecisionInputsBeforeIntent_fn;
-var ProductCardLit = class extends LitElement7 {
+var ProductCardLit = class extends LitElement8 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _ProductCardLit_instances);
@@ -4925,9 +5768,9 @@ var ProductCardLit = class extends LitElement7 {
     super.disconnectedCallback();
   }
   render() {
-    if (this.validationError || !this.props) return html7``;
+    if (this.validationError || !this.props) return html8``;
     const parsed = cardSchema.safeParse(this.props);
-    if (!parsed.success) return html7``;
+    if (!parsed.success) return html8``;
     const density = this._device === "mobile" ? "compact" : parsed.data.density;
     const { product, visibleFacts } = parsed.data;
     const resolved = this.resolved[product.id];
@@ -4954,7 +5797,7 @@ var ProductCardLit = class extends LitElement7 {
       onPrimaryCtaClick,
       !view.primaryCta.disabled
     );
-    const backFace = html7`<syntro-variant-panel
+    const backFace = html8`<syntro-variant-panel
         .payload=${view.panel.payload}
         .productTitle=${product.name ?? ""}
         .productImage=${product.image ? { src: product.image.src, alt: product.image.alt } : null}
@@ -4965,27 +5808,27 @@ var ProductCardLit = class extends LitElement7 {
         @variant-panel-retry=${this._onVariantRetry}
         @variant-panel-selection-change=${this._onVariantSelectionChange}
       ></syntro-variant-panel>
-      ${view.addError ? html7`<div data-add-to-cart-error>${view.addError}</div>` : nothing3}`;
+      ${view.addError ? html8`<div data-add-to-cart-error>${view.addError}</div>` : nothing4}`;
     const backView = view.face === "back" && view.flipAnimating ? (
       // Mid-flip: both faces coexist inside a preserve-3d container. The
       // front turns away (inert + aria-hidden) while the back turns in.
-      html7`<div data-card-flip @animationend=${__privateGet(this, _onFlipAnimationEnd)}>
+      html8`<div data-card-flip @animationend=${__privateGet(this, _onFlipAnimationEnd)}>
             <div data-face="front" aria-hidden="true" inert>${frontContent}</div>
             <div data-face="back">${backFace}</div>
           </div>`
     ) : view.face === "back" ? (
       // Settled back: flat, untransformed — no flip container, no perspective.
-      html7`<div data-face="back">${backFace}</div>`
-    ) : html7`<div data-face="front">
+      html8`<div data-face="back">${backFace}</div>`
+    ) : html8`<div data-face="front">
               ${frontContent}
-              ${view.addError ? html7`<div data-add-to-cart-error>${view.addError}</div>` : nothing3}
+              ${view.addError ? html8`<div data-add-to-cart-error>${view.addError}</div>` : nothing4}
             </div>`;
-    return html7`
+    return html8`
       <article
         class="sc-product-card"
         data-active-face=${view.face}
         data-density=${density}
-        data-labels=${product.labels ? JSON.stringify(product.labels) : nothing3}
+        data-labels=${product.labels ? JSON.stringify(product.labels) : nothing4}
         style=${styleMap(articleStyles)}
       >
         ${backView}
@@ -5515,7 +6358,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
     maxWidth: "100%",
     flexShrink: "1"
   };
-  const ctaRow = html7`<div class="sc-product-card__ctas" style=${styleMap(ctasStyles)}>
+  const ctaRow = html8`<div class="sc-product-card__ctas" style=${styleMap(ctasStyles)}>
     ${ctas.map((c2, i2) => {
     const disabled2 = c2.actionId === "add_to_cart" && !commerceAvailable;
     const ctaStyles = {
@@ -5523,13 +6366,13 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
       ...disabled2 ? { opacity: "0.5", "pointer-events": "none", cursor: "not-allowed" } : {}
     };
     const ctaLabel = c2.label;
-    return html7`<a
+    return html8`<a
         class="sc-product-card__cta"
         data-product-cta=${i2 === 0 ? "primary" : "secondary"}
         data-critical-text
         data-variant=${c2.variant}
-        data-disabled=${disabled2 ? "true" : nothing3}
-        aria-disabled=${disabled2 ? "true" : nothing3}
+        data-disabled=${disabled2 ? "true" : nothing4}
+        aria-disabled=${disabled2 ? "true" : nothing4}
         href=${c2.actionId === "add_to_cart" ? "#" : c2.href ?? "#"}
         target=${c2.target}
         rel=${c2.target === "_blank" ? "noopener noreferrer" : ""}
@@ -5546,7 +6389,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
       >`;
   })}
   </div>`;
-  const ratingOverlay = overlay && product.rating && isVisible("rating") ? html7`<div
+  const ratingOverlay = overlay && product.rating && isVisible("rating") ? html8`<div
           class="sc-product-card__rating sc-product-card__rating--overlay"
           data-product-rating
           data-rating-value=${product.rating.value}
@@ -5561,20 +6404,20 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
             style=${styleMap({ opacity: "0.8", marginLeft: "0.15rem", display: "var(--sc-card-rating-count-display, inline)" })}
             >(${product.rating.count.toLocaleString()})</span
           >
-        </div>` : nothing3;
-  const priceOverlay = overlay && isVisible("price") && (product.price || product.salePrice) ? html7`<div
+        </div>` : nothing4;
+  const priceOverlay = overlay && isVisible("price") && (product.price || product.salePrice) ? html8`<div
           class="sc-product-card__price sc-product-card__price--overlay"
           data-product-price
           style=${styleMap(overlayPriceStyles)}
         >
           <span
             class="sc-product-card__amount"
-            data-product-price-sale=${hasSalePrice ? "true" : nothing3}
+            data-product-price-sale=${hasSalePrice ? "true" : nothing4}
             data-critical-text
             >${activePriceText}</span
           >
-        </div>` : nothing3;
-  const mediaBlock = overlay ? html7`<div class="sc-product-card__media" style=${styleMap(mediaWrapperStyles)}>
+        </div>` : nothing4;
+  const mediaBlock = overlay ? html8`<div class="sc-product-card__media" style=${styleMap(mediaWrapperStyles)}>
         <img
           class="sc-product-card__image"
           data-product-image
@@ -5585,7 +6428,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
           style=${styleMap(overlayImgStyles)}
         />
         ${ratingOverlay}${priceOverlay}
-      </div>` : html7`<img
+      </div>` : html8`<img
         class="sc-product-card__image"
         data-product-image
         src=${imgSrc}
@@ -5594,7 +6437,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
         @error=${onImageError}
         style=${styleMap(imageStyles)}
       />`;
-  return html7`
+  return html8`
     <div class="sc-product-card__grid" data-product-card-grid style=${styleMap(rootGridStyles)}>
       ${mediaBlock}
       <div class="sc-product-card__content" style=${styleMap(contentColStyles)}>
@@ -5658,7 +6501,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
   // the product page reachable.
   (() => {
     const navCta = ctas.find((c2) => c2.href);
-    return navCta?.href ? html7`<a
+    return navCta?.href ? html8`<a
                     data-product-name-link
                     href=${navCta.href}
                     target=${navCta.target ?? "_self"}
@@ -5668,7 +6511,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
   })()}</h3>
           ${// On compact the rating renders as an image OVERLAY pill (item 2),
   // so it is omitted from the header identity row here.
-  !overlay && product.rating && isVisible("rating") ? html7`<div
+  !overlay && product.rating && isVisible("rating") ? html8`<div
                 class="sc-product-card__rating"
                 data-product-rating
                 data-rating-value=${product.rating.value}
@@ -5683,9 +6526,9 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
                 <span class="sc-product-card__rating-stars" style="color: #f5a623;">★</span>
                 <span style=${styleMap({ marginLeft: "0.2rem", fontWeight: "600" })}>${product.rating.value}</span>
                 <span class="sc-product-card__rating-count" style=${styleMap({ opacity: "0.65", marginLeft: "0.2rem", display: "var(--sc-card-rating-count-display, inline)" })}>(${product.rating.count.toLocaleString()})</span>
-              </div>` : nothing3}
+              </div>` : nothing4}
         </div>
-        ${(product.tagline || product.framing) && isVisible("tagline") ? html7`<p
+        ${(product.tagline || product.framing) && isVisible("tagline") ? html8`<p
                 class="sc-product-card__tagline"
                 data-product-tagline
                 style=${styleMap({
@@ -5719,7 +6562,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
     minWidth: "0",
     overflowWrap: "anywhere"
   })}
-              >${product.tagline || product.framing}</p>` : nothing3}
+              >${product.tagline || product.framing}</p>` : nothing4}
       </header>
     <div
       class="sc-product-card__body"
@@ -5733,36 +6576,36 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
     >
     ${factOrder.map((key) => {
     if (key === "price") {
-      if (overlay) return nothing3;
-      if (!isVisible("price") || !product.price && !product.salePrice) return nothing3;
-      return html7`<div
+      if (overlay) return nothing4;
+      if (!isVisible("price") || !product.price && !product.salePrice) return nothing4;
+      return html8`<div
           class="sc-product-card__price"
           data-product-price
           style=${styleMap(priceBlockStyles)}
         >
-          ${hasSalePrice && product.price ? html7`<span
+          ${hasSalePrice && product.price ? html8`<span
                   class="sc-product-card__amount-original"
                   data-product-price-original
                   style=${styleMap(priceOriginalStyles)}
                   >${product.price.amount}</span
-                >` : nothing3}
+                >` : nothing4}
           <span
             class="sc-product-card__amount"
-            data-product-price-sale=${hasSalePrice ? "true" : nothing3}
+            data-product-price-sale=${hasSalePrice ? "true" : nothing4}
             data-critical-text
             style=${styleMap(priceSaleStyles)}
             >${activePriceText}</span
           >
-          ${activeCadence ? html7`<span
+          ${activeCadence ? html8`<span
                   class="sc-product-card__cadence"
                   style=${styleMap(priceCadenceStyles)}
                   >${activeCadence}</span
-                >` : nothing3}
+                >` : nothing4}
         </div>`;
     }
     if (key === "availability") {
-      if (!isVisible("availability") || !product.availability) return nothing3;
-      return html7`<span
+      if (!isVisible("availability") || !product.availability) return nothing4;
+      return html8`<span
           class="sc-product-card__availability"
           data-product-availability
           data-availability=${product.availability}
@@ -5771,8 +6614,8 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
         >`;
     }
     if (key === "badge") {
-      if (!isVisible("badge") || !product.badge) return nothing3;
-      return html7`<span
+      if (!isVisible("badge") || !product.badge) return nothing4;
+      return html8`<span
           class="sc-product-card__badge"
           data-product-badge
           data-tone=${product.badge.tone}
@@ -5788,12 +6631,12 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
         >`;
     }
     if (key === "specs") {
-      if (!isVisible("specs") || specGroups.length === 0) return nothing3;
+      if (!isVisible("specs") || specGroups.length === 0) return nothing4;
       if (density === "compact") {
         const allRows = specGroups.flatMap((g) => g.rows);
         const highlights = allRows.slice(0, 4);
-        if (highlights.length === 0) return nothing3;
-        return html7`<div
+        if (highlights.length === 0) return nothing4;
+        return html8`<div
             class="sc-product-card__specs"
             data-density="compact"
             data-clip-ok
@@ -5803,7 +6646,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
             style=${styleMap(specChipRowStyles)}
           >
             ${highlights.map(
-          (r) => html7`<span
+          (r) => html8`<span
                 data-spec-chip
                 style=${styleMap(specChipStyles)}
                 ><span style="font-weight: 600;">${r.name}</span
@@ -5812,9 +6655,9 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
         )}
           </div>`;
       }
-      return html7`<div class="sc-product-card__specs" style=${styleMap(specsContainerStyles)}>
+      return html8`<div class="sc-product-card__specs" style=${styleMap(specsContainerStyles)}>
           ${specGroups.map(
-        (g) => html7`<section
+        (g) => html8`<section
               class="sc-product-card__spec-section"
               data-spec-section=${g.section}
               style=${styleMap(specGroupStyles)}
@@ -5832,7 +6675,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
                 style=${styleMap(specRowsStyles)}
               >
                 ${g.rows.map(
-          (r) => html7`<li
+          (r) => html8`<li
                     data-spec-row
                     data-spec-chip
                     data-attribute-emphasis=${r.emphasis ? "true" : "false"}
@@ -5857,12 +6700,12 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
                       style=${styleMap(specValueStyles)}
                       >${r.value}</span
                     >
-                    ${r.unit ? html7`<span
+                    ${r.unit ? html8`<span
                             class="sc-product-card__spec-unit"
                             data-spec-unit
                             style="opacity: 0.72;"
                             >${r.unit}</span
-                          >` : nothing3}
+                          >` : nothing4}
                   </li>`
         )}
               </ul>
@@ -5871,8 +6714,8 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
         </div>`;
     }
     if (key === "framing") {
-      if (!isVisible("framing") || !showFraming) return nothing3;
-      return html7`<p
+      if (!isVisible("framing") || !showFraming) return nothing4;
+      return html8`<p
           class="sc-product-card__framing"
           style=${styleMap({
         margin: "0",
@@ -5885,7 +6728,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
           .innerHTML=${sanitizeHtml(product.framing ?? "")}
         ></p>`;
     }
-    return nothing3;
+    return nothing4;
   })}
     </div>
     </div>
@@ -5895,11 +6738,11 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
 }
 function renderProductCard(product, density, resolved, visibleFacts) {
   const articleStyles = _buildArticleStyles(density);
-  return html7`
+  return html8`
     <article
       class="sc-product-card"
       data-density=${density}
-      data-labels=${product.labels ? JSON.stringify(product.labels) : nothing3}
+      data-labels=${product.labels ? JSON.stringify(product.labels) : nothing4}
       style=${styleMap(articleStyles)}
     >
       ${renderProductCardInner(product, density, resolved, visibleFacts, product.ctas, void 0)}
@@ -5913,9 +6756,9 @@ function onImageError(e2) {
 }
 
 // src/widgets/ProductComparisonLit.ts
-import { html as html8, LitElement as LitElement8, nothing as nothing4 } from "lit";
+import { html as html9, LitElement as LitElement9, nothing as nothing5 } from "lit";
 var _controller2, _parsed, _ProductComparisonLit_instances, healthProbe_fn2, _scrollListenerEl, _onBodyScroll, syncScrollCue_fn, startBind_fn2, renderDiveDeeper_fn, onDiveDeeper_fn, visibleRows_fn, rowComplete_fn, maxFields_fn, synthesizeRows_fn, renderMatrix_fn;
-var ProductComparisonLit = class extends LitElement8 {
+var ProductComparisonLit = class extends LitElement9 {
   constructor() {
     super();
     __privateAdd(this, _ProductComparisonLit_instances);
@@ -5957,7 +6800,7 @@ var ProductComparisonLit = class extends LitElement8 {
     __privateGet(this, _controller2)?.destroy();
   }
   render() {
-    if (this.validationError || !__privateGet(this, _parsed)) return html8``;
+    if (this.validationError || !__privateGet(this, _parsed)) return html9``;
     const parsed = __privateGet(this, _parsed);
     const bodyStyle = (
       // touch-action:pan-y is REQUIRED for the deck swipe-to-cycle to work over a
@@ -5971,7 +6814,7 @@ var ProductComparisonLit = class extends LitElement8 {
       // rows and hands horizontal drags back to the deck's swipe handler.
       "flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain;" + (this.scrollFade ? "mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent);" : "")
     );
-    return html8`
+    return html9`
       <section
         class="sc-product-comparison"
         style="display:flex;flex-direction:column;flex:1 1 auto;padding:2px var(--sc-comparison-inset,12px) var(--sc-comparison-inset,12px);box-sizing:border-box;max-width:100%;min-width:0;min-height:0;max-height:100%;overflow:hidden;"
@@ -6006,11 +6849,11 @@ var ProductComparisonLit = class extends LitElement8 {
             }
           }
         </style>
-        ${parsed.heading ? html8`<h2
+        ${parsed.heading ? html9`<h2
                 class="sc-product-comparison__heading"
                 data-comparison-heading
                 style="flex:0 0 auto;margin:0 0 4px;font:600 14px/1.3 var(--sc-font-family,inherit);color:var(--sc-tile-title-color,inherit);min-width:0;overflow-wrap:break-word;"
-              >${parsed.heading}</h2>` : nothing4}
+              >${parsed.heading}</h2>` : nothing5}
         <div
           class="sc-product-comparison__scroll-wrap"
           style="position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;"
@@ -6031,7 +6874,7 @@ var ProductComparisonLit = class extends LitElement8 {
     // it's in-theme; pointer-events:none so it never blocks scroll/taps;
     // gated on scrollFade (content below the current scroll) so it hides
     // at the end. Bounce is dropped under prefers-reduced-motion (style).
-    this.scrollFade ? html8`<span class="sc-product-comparison__scroll-cue" aria-hidden="true"></span>` : nothing4}
+    this.scrollFade ? html9`<span class="sc-product-comparison__scroll-cue" aria-hidden="true"></span>` : nothing5}
         </div>
         ${__privateMethod(this, _ProductComparisonLit_instances, renderDiveDeeper_fn).call(this, parsed)}
       </section>
@@ -6116,9 +6959,9 @@ startBind_fn2 = function() {
  * chat-bar mountable turns it into a user turn.
  */
 renderDiveDeeper_fn = function(parsed) {
-  if (parsed.products.length < 2) return nothing4;
+  if (parsed.products.length < 2) return nothing5;
   const chipStyle = "flex:0 0 auto;align-self:flex-end;margin-top:6px;padding:4px 10px;border-radius:9999px;border:1px solid var(--sc-color-border,rgba(0,0,0,0.14));background:transparent;cursor:pointer;font:600 12px/1.2 var(--sc-font-family,inherit);color:var(--sc-color-primary,#3d8a5e);white-space:nowrap;";
-  return html8`<button
+  return html9`<button
       type="button"
       class="sc-product-comparison__dive-deeper"
       data-dive-deeper
@@ -6197,7 +7040,7 @@ renderMatrix_fn = function(products, rows) {
   const colHeadStyle = "display:block;padding:6px 3px;text-align:left;font-weight:600;min-width:0;";
   const labelStyle = "padding:8px 4px 8px 2px;font-weight:600;font-size:0.75rem;opacity:0.75;border-top:1px solid var(--sc-tile-border-color,rgba(0,0,0,0.08));align-self:stretch;min-width:0;overflow-wrap:break-word;hyphens:auto;";
   const cellStyle = "padding:8px 6px;border-top:1px solid var(--sc-tile-border-color,rgba(0,0,0,0.08));align-self:stretch;min-width:0;overflow-wrap:anywhere;";
-  return html8`
+  return html9`
       <div
         class="sc-product-comparison__matrix"
         data-comparison-matrix
@@ -6231,7 +7074,7 @@ renderMatrix_fn = function(products, rows) {
     const showRatingPill = !compactHeaders && p.rating;
     const nameOverlayStyle = compactHeaders ? "display:block;font-weight:600;font-size:0.66rem;line-height:1.2;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);white-space:normal;overflow-wrap:break-word;min-width:0;" : "display:block;font-weight:600;font-size:0.76rem;line-height:1.25;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);white-space:normal;overflow-wrap:break-word;min-width:0;";
     const mediaStyle = "position:relative;display:block;width:100%;aspect-ratio:var(--sc-comparison-image-aspect, 19 / 10);border-radius:10px;overflow:hidden;background:#e5e7eb;text-decoration:none;";
-    const cardInner = html8`
+    const cardInner = html9`
               <img
                 class="sc-product-comparison__thumb"
                 src=${imgSrc}
@@ -6240,33 +7083,33 @@ renderMatrix_fn = function(products, rows) {
                 style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"
               />
               <span aria-hidden="true" style="position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(transparent,rgba(0,0,0,.62));"></span>
-              ${showRatingPill && p.rating ? html8`<span
+              ${showRatingPill && p.rating ? html9`<span
                       class="sc-product-comparison__rating-pill"
                       data-product-rating
                       data-rating-value=${p.rating.value}
                       aria-label=${`${p.rating.value} out of ${p.rating.max ?? 5}, ${p.rating.count} reviews`}
                       style=${`${pillBase}left:4px;`}
                       ><span style="color:#f5a623;">★</span><span style="margin-left:0.12rem;">${p.rating.value}</span></span
-                    >` : nothing4}
-              ${priceText ? html8`<span
+                    >` : nothing5}
+              ${priceText ? html9`<span
                       class="sc-product-comparison__price"
                       data-critical-text
                       style=${`${pillBase}right:4px;`}
                       >${priceText}</span
-                    >` : nothing4}
+                    >` : nothing5}
               <span
                 class="sc-product-comparison__name"
                 data-critical-text
                 style=${`position:absolute;left:8px;right:8px;bottom:6px;${nameOverlayStyle}`}
                 >${p.name}</span
               >`;
-    return html8`<div
+    return html9`<div
               class="sc-product-comparison__matrix-col"
               role="columnheader"
               data-product-id=${p.id}
               style=${colHeadStyle}
             >
-              ${pdpHref ? html8`<a
+              ${pdpHref ? html9`<a
                       class="sc-product-comparison__media"
                       data-comparison-media
                       data-product-cta="primary"
@@ -6277,19 +7120,19 @@ renderMatrix_fn = function(products, rows) {
                       data-action-id=${navCta?.actionId ?? ""}
                       data-variant=${navCta?.variant ?? ""}
                       style=${mediaStyle}
-                    >${cardInner}</a>` : html8`<div class="sc-product-comparison__media" data-comparison-media style=${mediaStyle}>${cardInner}</div>`}
+                    >${cardInner}</a>` : html9`<div class="sc-product-comparison__media" data-comparison-media style=${mediaStyle}>${cardInner}</div>`}
             </div>`;
   })}
         </div>
         ${rows.map((row) => {
     const cells = [row.valueA, row.valueB, row.valueC, row.valueD];
-    return html8`
+    return html9`
             <div role="row" style="display:contents;">
               <span class="sc-product-comparison__matrix-label" role="rowheader" style=${labelStyle}
                 >${row.label}</span
               >
               ${products.map(
-      (_p, i2) => html8`<span class="sc-product-comparison__matrix-cell" role="cell" style=${cellStyle}
+      (_p, i2) => html9`<span class="sc-product-comparison__matrix-cell" role="cell" style=${cellStyle}
                     >${cells[i2] ?? "\u2014"}</span
                   >`
     )}
@@ -6307,9 +7150,9 @@ ProductComparisonLit.properties = {
 };
 
 // src/widgets/ProductGridLit.ts
-import { html as html9, LitElement as LitElement9, nothing as nothing5 } from "lit";
+import { html as html10, LitElement as LitElement10, nothing as nothing6 } from "lit";
 var _controller3, _ProductGridLit_instances, startBind_fn3;
-var ProductGridLit = class extends LitElement9 {
+var ProductGridLit = class extends LitElement10 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _ProductGridLit_instances);
@@ -6335,20 +7178,20 @@ var ProductGridLit = class extends LitElement9 {
     __privateGet(this, _controller3)?.destroy();
   }
   render() {
-    if (this.validationError || !this.props) return html9``;
+    if (this.validationError || !this.props) return html10``;
     const parsed = gridSchema.safeParse(this.props);
-    if (!parsed.success) return html9``;
+    if (!parsed.success) return html10``;
     const { products, desktopColumns, heading } = parsed.data;
-    return html9`
+    return html10`
       <section class="sc-product-grid">
-        ${heading ? html9`<h2 data-grid-heading class="sc-product-grid__heading">${heading}</h2>` : nothing5}
+        ${heading ? html10`<h2 data-grid-heading class="sc-product-grid__heading">${heading}</h2>` : nothing6}
         <div
           data-grid-root
           class="sc-product-grid__cells"
           style=${`--sc-product-grid-cols:${desktopColumns}`}
         >
           ${products.map(
-      (p) => html9`<div data-grid-cell class="sc-product-grid__cell">
+      (p) => html10`<div data-grid-cell class="sc-product-grid__cell">
               ${renderProductCard(p, "standard", this.resolved[p.id])}
             </div>`
     )}
@@ -6389,9 +7232,9 @@ ProductGridLit.properties = {
 };
 
 // src/widgets/ProductHeroLit.ts
-import { html as html10, LitElement as LitElement10, nothing as nothing6 } from "lit";
+import { html as html11, LitElement as LitElement11, nothing as nothing7 } from "lit";
 var _controller4, _ProductHeroLit_instances, startBind_fn4;
-var ProductHeroLit = class extends LitElement10 {
+var ProductHeroLit = class extends LitElement11 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _ProductHeroLit_instances);
@@ -6417,9 +7260,9 @@ var ProductHeroLit = class extends LitElement10 {
     __privateGet(this, _controller4)?.destroy();
   }
   render() {
-    if (this.validationError || !this.props) return html10``;
+    if (this.validationError || !this.props) return html11``;
     const parsed = heroSchema.safeParse(this.props);
-    if (!parsed.success) return html10``;
+    if (!parsed.success) return html11``;
     const { product, layout, longCopy } = parsed.data;
     const resolved = this.resolved[product.id];
     const imgSrc = resolved?.image ?? product.image.src;
@@ -6428,7 +7271,7 @@ var ProductHeroLit = class extends LitElement10 {
     const sectionStyles = isTopLayout ? "display:block;" : `display:flex;flex-direction:${layout === "image-right" ? "row-reverse" : "row"};gap:1rem;align-items:flex-start;`;
     const imageStyles = isTopLayout ? "width:100%;max-height:160px;object-fit:cover;border-radius:8px;display:block;margin-bottom:0.75rem;" : "width:128px;height:128px;object-fit:cover;border-radius:8px;flex-shrink:0;";
     const contentStyles = isTopLayout ? "" : "flex:1;min-width:0;";
-    return html10`
+    return html11`
       <section class="sc-product-hero" data-hero-layout=${layout} style=${sectionStyles}>
         <img
           class="sc-product-hero__image"
@@ -6439,18 +7282,18 @@ var ProductHeroLit = class extends LitElement10 {
         />
         <div class="sc-product-hero__content" style=${contentStyles}>
           <h2 class="sc-product-hero__name">${product.name}</h2>
-          ${product.tagline ? html10`<p class="sc-product-hero__tagline">${product.tagline}</p>` : nothing6}
-          ${product.price ? html10`<p class="sc-product-hero__price">
-                ${priceText}${product.price.cadence ? html10` <small>${product.price.cadence}</small>` : nothing6}
-              </p>` : nothing6}
-          ${longCopy ? html10`<div
+          ${product.tagline ? html11`<p class="sc-product-hero__tagline">${product.tagline}</p>` : nothing7}
+          ${product.price ? html11`<p class="sc-product-hero__price">
+                ${priceText}${product.price.cadence ? html11` <small>${product.price.cadence}</small>` : nothing7}
+              </p>` : nothing7}
+          ${longCopy ? html11`<div
                 data-hero-longcopy
                 class="sc-product-hero__longcopy"
                 .innerHTML=${sanitizeHtml(longCopy)}
-              ></div>` : nothing6}
+              ></div>` : nothing7}
           <div class="sc-product-hero__ctas">
             ${product.ctas.map(
-      (c2, i2) => html10`<a
+      (c2, i2) => html11`<a
                 class="sc-product-hero__cta"
                 data-product-cta=${i2 === 0 ? "primary" : "secondary"}
                 data-variant=${c2.variant}
@@ -6498,10 +7341,10 @@ ProductHeroLit.properties = {
 };
 
 // src/widgets/ProductRecoCarouselLit.ts
-import { html as html11, LitElement as LitElement11, nothing as nothing7 } from "lit";
+import { html as html12, LitElement as LitElement12, nothing as nothing8 } from "lit";
 import { styleMap as styleMap2 } from "lit/directives/style-map.js";
 var _ProductRecoCarouselLit_instances, healthProbe_fn3;
-var ProductRecoCarouselLit = class extends LitElement11 {
+var ProductRecoCarouselLit = class extends LitElement12 {
   constructor() {
     super();
     __privateAdd(this, _ProductRecoCarouselLit_instances);
@@ -6520,20 +7363,20 @@ var ProductRecoCarouselLit = class extends LitElement11 {
   }
   render() {
     const items = this._parsed?.items ?? [];
-    if (items.length === 0) return html11``;
-    return html11`
+    if (items.length === 0) return html12``;
+    return html12`
       <section class="sc-reco" style="box-sizing:border-box;display:flex;flex-direction:column;height:100%;padding:2px var(--sc-reco-inset,12px) var(--sc-reco-inset,12px);">
         <div class="sc-reco__carousel" role="list" style="display:flex;align-items:stretch;gap:8px;flex:1 1 auto;min-height:0;overflow-x:auto;scroll-snap-type:x mandatory;">
           ${items.map(
-      (it) => html11`
+      (it) => html12`
             <div role="listitem" style="display:contents;">
               <a data-reco-item data-product-cta="primary" href=${it.pdp_href}
                  style=${styleMap2({ position: "relative", flex: "0 0 auto", aspectRatio: "4 / 5", minHeight: "var(--sc-reco-item-min-h, 162px)", maxHeight: "var(--sc-reco-item-max-h, 340px)", borderRadius: "12px", overflow: "hidden", scrollSnapAlign: "start", textDecoration: "none", display: "block", background: "#e5e7eb" })}>
-                ${it.image_url ? html11`<img src=${it.image_url} alt=${it.hook ?? "Recommended product"} loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">` : nothing7}
+                ${it.image_url ? html12`<img src=${it.image_url} alt=${it.hook ?? "Recommended product"} loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">` : nothing8}
                 <span style="position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(transparent,rgba(0,0,0,.62));"></span>
                 <span style="position:absolute;left:8px;right:8px;bottom:8px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);">
-                  ${it.price ? html11`<span style="display:block;font-weight:700;font-size:0.9rem;">${it.price}</span>` : nothing7}
-                  ${it.hook ? html11`<span style="display:block;font-size:0.72rem;line-height:1.2;opacity:.95;">${it.hook}</span>` : nothing7}
+                  ${it.price ? html12`<span style="display:block;font-weight:700;font-size:0.9rem;">${it.price}</span>` : nothing8}
+                  ${it.hook ? html12`<span style="display:block;font-size:0.72rem;line-height:1.2;opacity:.95;">${it.hook}</span>` : nothing8}
                 </span>
               </a>
             </div>`
@@ -6568,7 +7411,7 @@ if (!customElements.get("syntro-product-reco-carousel"))
   customElements.define("syntro-product-reco-carousel", ProductRecoCarouselLit);
 
 // src/widgets/PdpTrendingNewsLit.ts
-import { html as html12, LitElement as LitElement12 } from "lit";
+import { html as html13, LitElement as LitElement13 } from "lit";
 
 // src/widgets/entrance.ts
 function armEntranceSettle(onSettle, container, settleMs, fastPath = false) {
@@ -6915,7 +7758,7 @@ var TRENDING_NEWS_CSS = `
   }
 }
 `;
-var PdpTrendingNewsLit = class extends LitElement12 {
+var PdpTrendingNewsLit = class extends LitElement13 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -6951,7 +7794,7 @@ var PdpTrendingNewsLit = class extends LitElement12 {
   }
   render() {
     if (!this.data) {
-      return html12`<div data-skeleton class="pdp-trending-news-skeleton">
+      return html13`<div data-skeleton class="pdp-trending-news-skeleton">
         <div class="pdp-skeleton-bar" style="width:60%"></div>
         <div class="pdp-skeleton-bar" style="width:90%"></div>
         <div class="pdp-skeleton-bar" style="width:80%"></div>
@@ -6961,7 +7804,7 @@ var PdpTrendingNewsLit = class extends LitElement12 {
     const items = this.data.items;
     const featured = items[0];
     const rest = items.slice(1);
-    return html12`
+    return html13`
       <section
         class="${this._entering ? "pdp-trending-news is-entering" : "pdp-trending-news"}"
         aria-label="Trending news"
@@ -6978,7 +7821,7 @@ var PdpTrendingNewsLit = class extends LitElement12 {
           <p class="pdp-tn-blurb">${featured.blurb}</p>
         </article>
         ${rest.map(
-      (item) => html12`
+      (item) => html13`
             <article class="pdp-tn-card">
               <div class="pdp-tn-meta">
                 <span class="pdp-tn-dot" aria-hidden="true"></span>
@@ -7000,8 +7843,8 @@ PdpTrendingNewsLit.properties = {
   _entering: { state: true }
 };
 function renderHeadlineLink(item) {
-  if (!item.url) return html12`${item.headline}`;
-  return html12`<a
+  if (!item.url) return html13`${item.headline}`;
+  return html13`<a
     class="pdp-tn-headline-link"
     href=${item.url}
     target="_blank"
@@ -7014,7 +7857,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-tre
 }
 
 // src/widgets/PdpTrendingNewsMagazineLit.ts
-import { html as html13, LitElement as LitElement13 } from "lit";
+import { html as html14, LitElement as LitElement14 } from "lit";
 function ensureMagazineStyles() {
   if (typeof document === "undefined") return;
   if (document.getElementById("syntro-pdp-trending-news-magazine-style")) return;
@@ -7194,7 +8037,7 @@ var MAGAZINE_CSS = `
   }
 }
 `;
-var PdpTrendingNewsMagazineLit = class extends LitElement13 {
+var PdpTrendingNewsMagazineLit = class extends LitElement14 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -7208,13 +8051,13 @@ var PdpTrendingNewsMagazineLit = class extends LitElement13 {
   }
   render() {
     if (!this.data) {
-      return html13`<div aria-busy="true" class="pdp-tn-mag" style="opacity:0.5;">…</div>`;
+      return html14`<div aria-busy="true" class="pdp-tn-mag" style="opacity:0.5;">…</div>`;
     }
     const items = this.data.items;
     const [lead, ...rest] = items;
-    return html13`
+    return html14`
       <section class="pdp-tn-mag" aria-label="Trending news">
-        ${lead ? html13`<article class="pdp-tn-mag__lead">
+        ${lead ? html14`<article class="pdp-tn-mag__lead">
               <div class="pdp-tn-mag__meta">
                 <span class="pdp-tn-mag__meta-source">${lead.source}</span>
                 · ${lead.published_relative}
@@ -7223,7 +8066,7 @@ var PdpTrendingNewsMagazineLit = class extends LitElement13 {
               <p class="pdp-tn-mag__blurb">${lead.blurb}</p>
             </article>` : ""}
         ${rest.map(
-      (it) => html13`<article class="pdp-tn-mag__item">
+      (it) => html14`<article class="pdp-tn-mag__item">
             <div class="pdp-tn-mag__meta">
               <span class="pdp-tn-mag__meta-source">${it.source}</span>
               · ${it.published_relative}
@@ -7240,8 +8083,8 @@ PdpTrendingNewsMagazineLit.properties = {
   data: { attribute: false }
 };
 function renderHeadlineLink2(item) {
-  if (!item.url) return html13`${item.headline}`;
-  return html13`<a
+  if (!item.url) return html14`${item.headline}`;
+  return html14`<a
     class="pdp-tn-mag__headline-link"
     href=${item.url}
     target="_blank"
@@ -7254,7 +8097,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-tre
 }
 
 // src/widgets/PdpTrendingNewsHeroLit.ts
-import { html as html14, LitElement as LitElement14 } from "lit";
+import { html as html15, LitElement as LitElement15 } from "lit";
 function ensureHeroStyles() {
   if (typeof document === "undefined") return;
   if (document.getElementById("syntro-pdp-trending-news-hero-style")) return;
@@ -7445,7 +8288,7 @@ var HERO_CSS = `
   }
 }
 `;
-var PdpTrendingNewsHeroLit = class extends LitElement14 {
+var PdpTrendingNewsHeroLit = class extends LitElement15 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -7459,11 +8302,11 @@ var PdpTrendingNewsHeroLit = class extends LitElement14 {
   }
   render() {
     if (!this.data) {
-      return html14`<div aria-busy="true" class="pdp-tn-hero" style="opacity:0.5;">…</div>`;
+      return html15`<div aria-busy="true" class="pdp-tn-hero" style="opacity:0.5;">…</div>`;
     }
     const [lead, ...rest] = this.data.items;
-    if (!lead) return html14``;
-    return html14`
+    if (!lead) return html15``;
+    return html15`
       <section class="pdp-tn-hero" aria-label="Trending news">
         <article class="pdp-tn-hero__panel">
           <blockquote class="pdp-tn-hero__quote">${lead.blurb}</blockquote>
@@ -7474,9 +8317,9 @@ var PdpTrendingNewsHeroLit = class extends LitElement14 {
           </footer>
           <p class="pdp-tn-hero__headline">${renderHeadlineLink3(lead)}</p>
         </article>
-        ${rest.length ? html14`<div class="pdp-tn-hero__followon">
+        ${rest.length ? html15`<div class="pdp-tn-hero__followon">
               ${rest.map(
-      (it) => html14`<div class="pdp-tn-hero__row">
+      (it) => html15`<div class="pdp-tn-hero__row">
                   <p class="pdp-tn-hero__row-headline">${renderHeadlineLink3(it)}</p>
                   <span class="pdp-tn-hero__row-meta">${it.source}</span>
                 </div>`
@@ -7490,8 +8333,8 @@ PdpTrendingNewsHeroLit.properties = {
   data: { attribute: false }
 };
 function renderHeadlineLink3(item) {
-  if (!item.url) return html14`${item.headline}`;
-  return html14`<a
+  if (!item.url) return html15`${item.headline}`;
+  return html15`<a
     class="pdp-tn-hero__headline-link"
     href=${item.url}
     target="_blank"
@@ -7504,7 +8347,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-tre
 }
 
 // src/widgets/PdpPeerFeedMasonryLit.ts
-import { html as html15, LitElement as LitElement15 } from "lit";
+import { html as html16, LitElement as LitElement16 } from "lit";
 function ensureMasonryStyles() {
   if (typeof document === "undefined") return;
   if (document.getElementById("syntro-pdp-peer-feed-masonry-style")) return;
@@ -7648,7 +8491,7 @@ function personaHue(s4) {
   for (let i2 = 0; i2 < s4.length; i2++) h = h * 31 + s4.charCodeAt(i2) | 0;
   return Math.abs(h) % 360;
 }
-var PdpPeerFeedMasonryLit = class extends LitElement15 {
+var PdpPeerFeedMasonryLit = class extends LitElement16 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -7662,13 +8505,13 @@ var PdpPeerFeedMasonryLit = class extends LitElement15 {
   }
   render() {
     if (!this.data) {
-      return html15`<div aria-busy="true" class="pdp-pf-mas" style="opacity:0.5;">…</div>`;
+      return html16`<div aria-busy="true" class="pdp-pf-mas" style="opacity:0.5;">…</div>`;
     }
-    return html15`
+    return html16`
       <section class="pdp-pf-mas" aria-label="Peer voices">
         <div class="pdp-pf-mas__grid">
           ${this.data.peers.map(
-      (p) => html15`<article
+      (p) => html16`<article
               class="pdp-pf-mas__card"
               style=${`--pf-avatar-hue: ${personaHue(p.persona)};`}
             >
@@ -7696,7 +8539,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-pee
 }
 
 // src/widgets/PdpPeerFeedCarouselLit.ts
-import { html as html16, LitElement as LitElement16, svg } from "lit";
+import { html as html17, LitElement as LitElement17, svg } from "lit";
 function ensureCarouselStyles2() {
   if (typeof document === "undefined") return;
   if (document.getElementById("syntro-pdp-peer-feed-carousel-style")) return;
@@ -7912,7 +8755,7 @@ function renderGlyph(kind) {
       <path d="M30 6 L34 26 L54 30 L34 34 L30 54 L26 34 L6 30 L26 26 Z" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linejoin="round"/>
     </svg>`;
 }
-var PdpPeerFeedCarouselLit = class extends LitElement16 {
+var PdpPeerFeedCarouselLit = class extends LitElement17 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -7926,15 +8769,15 @@ var PdpPeerFeedCarouselLit = class extends LitElement16 {
   }
   render() {
     if (!this.data) {
-      return html16`<div aria-busy="true" class="pdp-pf-car" style="opacity:0.5;">…</div>`;
+      return html17`<div aria-busy="true" class="pdp-pf-car" style="opacity:0.5;">…</div>`;
     }
-    return html16`
+    return html17`
       <section class="pdp-pf-car" aria-label="Peer voices">
         <div class="pdp-pf-car__track">
           ${this.data.peers.map((p) => {
       const kind = glyphFor(p.persona);
       const hue = glyphHue(p.persona);
-      return html16`<article class="pdp-pf-car__card" style=${`--pf-glyph-hue: ${hue};`}>
+      return html17`<article class="pdp-pf-car__card" style=${`--pf-glyph-hue: ${hue};`}>
               <span class="pdp-pf-car__glyph" aria-hidden="true">${renderGlyph(kind)}</span>
               <span class="pdp-pf-car__persona">${p.persona}</span>
               <blockquote class="pdp-pf-car__quote">${p.quote}</blockquote>
@@ -7959,7 +8802,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-pee
 }
 
 // src/widgets/PdpChartLit.ts
-import { html as html17, LitElement as LitElement17, nothing as nothing8, svg as svg2 } from "lit";
+import { html as html18, LitElement as LitElement18, nothing as nothing9, svg as svg2 } from "lit";
 function formatNum(v) {
   if (v === void 0 || !Number.isFinite(v)) return "\u2014";
   if (Number.isInteger(v)) return v.toLocaleString("en-US");
@@ -8582,7 +9425,7 @@ function colorVar(seriesIdx) {
   return `var(--pc-color-${seriesIdx % PALETTE_SIZE})`;
 }
 var _PdpChartLit_instances, renderLegend_fn, renderTable_fn, renderBars_fn, renderLine_fn;
-var PdpChartLit = class extends LitElement17 {
+var PdpChartLit = class extends LitElement18 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _PdpChartLit_instances);
@@ -8618,7 +9461,7 @@ var PdpChartLit = class extends LitElement17 {
   }
   render() {
     if (!this.data) {
-      return html17`<div data-skeleton class="pdp-chart-skeleton">
+      return html18`<div data-skeleton class="pdp-chart-skeleton">
         <div class="pdp-skeleton-bar" style="width:50%"></div>
         <div class="pdp-skeleton-rect" style="height:200px"></div>
       </div>`;
@@ -8627,7 +9470,7 @@ var PdpChartLit = class extends LitElement17 {
     const allSeriesOnePoint = this.data.series.every((s4) => s4.points.length <= 1);
     const effectiveKind = isTable ? "table" : this.data.viz_kind === "line" && !allSeriesOnePoint ? "line" : "bar";
     const isMultiSeries = this.data.series.length > 1;
-    return html17`
+    return html18`
       <section
         class="${this._entering ? "pdp-chart pdp-chart-frame is-entering" : "pdp-chart pdp-chart-frame"}"
         aria-label="${this.data.title}"
@@ -8638,11 +9481,11 @@ var PdpChartLit = class extends LitElement17 {
         </div>
         <h3 class="pdp-chart-title">${this.data.title}</h3>
 
-        ${effectiveKind === "table" ? __privateMethod(this, _PdpChartLit_instances, renderTable_fn).call(this) : nothing8}
-        ${effectiveKind === "bar" ? __privateMethod(this, _PdpChartLit_instances, renderBars_fn).call(this) : nothing8}
-        ${effectiveKind === "line" ? __privateMethod(this, _PdpChartLit_instances, renderLine_fn).call(this) : nothing8}
-        ${effectiveKind !== "table" && isMultiSeries ? __privateMethod(this, _PdpChartLit_instances, renderLegend_fn).call(this) : nothing8}
-        ${this.data.rationale ? html17`<p class="pdp-chart-rationale">${this.data.rationale}</p>` : nothing8}
+        ${effectiveKind === "table" ? __privateMethod(this, _PdpChartLit_instances, renderTable_fn).call(this) : nothing9}
+        ${effectiveKind === "bar" ? __privateMethod(this, _PdpChartLit_instances, renderBars_fn).call(this) : nothing9}
+        ${effectiveKind === "line" ? __privateMethod(this, _PdpChartLit_instances, renderLine_fn).call(this) : nothing9}
+        ${effectiveKind !== "table" && isMultiSeries ? __privateMethod(this, _PdpChartLit_instances, renderLegend_fn).call(this) : nothing9}
+        ${this.data.rationale ? html18`<p class="pdp-chart-rationale">${this.data.rationale}</p>` : nothing9}
       </section>
     `;
   }
@@ -8650,10 +9493,10 @@ var PdpChartLit = class extends LitElement17 {
 _PdpChartLit_instances = new WeakSet();
 renderLegend_fn = function() {
   const data = this.data;
-  return html17`
+  return html18`
       <ol class="pdp-chart-legend" aria-label="Legend">
         ${data.series.map(
-    (s4, idx) => html17`
+    (s4, idx) => html18`
             <li class="pdp-chart-legend-item">
               <span
                 class="pdp-chart-legend-swatch"
@@ -8669,22 +9512,22 @@ renderLegend_fn = function() {
 };
 renderTable_fn = function() {
   const matrix = buildComparisonMatrix(this.data);
-  return html17`
+  return html18`
       <div class="pdp-chart-table-wrap">
         <table class="pdp-chart-table">
           <thead>
             <tr>
               <th></th>
-              ${matrix.colLabels.map((label) => html17`<th>${label}</th>`)}
+              ${matrix.colLabels.map((label) => html18`<th>${label}</th>`)}
             </tr>
           </thead>
           <tbody>
             ${matrix.rowLabels.map(
-    (row, rowIdx) => html17`
+    (row, rowIdx) => html18`
                 <tr class=${rowIdx === matrix.winningRow ? "is-winning" : ""}>
                   <td>${row}</td>
                   ${matrix.cells[rowIdx].map(
-      (cell) => html17`<td class="pdp-chart-numeric-cell">${formatNum(cell)}</td>`
+      (cell) => html18`<td class="pdp-chart-numeric-cell">${formatNum(cell)}</td>`
     )}
                 </tr>
               `
@@ -8699,7 +9542,7 @@ renderBars_fn = function() {
   const { buckets, yMax } = buildBarBuckets(data);
   const ticks = niceTicks(yMax);
   const scaleMax = Math.max(yMax, ticks[ticks.length - 1]);
-  return html17`
+  return html18`
       <div
         class="pdp-chart-bars"
         role="figure"
@@ -8708,7 +9551,7 @@ renderBars_fn = function() {
       >
         <div class="pdp-chart-yaxis" aria-hidden="true">
           ${ticks.map(
-    (t2) => html17`
+    (t2) => html18`
               <span
                 class="pdp-chart-yaxis-tick"
                 style="bottom:${t2 / scaleMax * 100}%"
@@ -8720,7 +9563,7 @@ renderBars_fn = function() {
         </div>
         <div class="pdp-chart-bars-area">
           ${ticks.map(
-    (t2) => html17`
+    (t2) => html18`
               <div
                 class="pdp-chart-bars-gridline"
                 style="bottom:${t2 / scaleMax * 100}%"
@@ -8730,11 +9573,11 @@ renderBars_fn = function() {
   )}
           <div class="pdp-chart-bars-baseline" aria-hidden="true"></div>
           ${buckets.map(
-    (bucket, bIdx) => html17`
+    (bucket, bIdx) => html18`
               <div class="pdp-chart-bars-bucket">
                 <div class="pdp-chart-bars-stack">
                   ${bucket.bars.map(
-      (bar, barIdxInBucket) => html17`
+      (bar, barIdxInBucket) => html18`
                       <div
                         class="pdp-chart-bar"
                         style="
@@ -8745,9 +9588,9 @@ renderBars_fn = function() {
                         role="img"
                         aria-label="${bucket.label} — ${bar.seriesName}: ${formatNum(bar.value)}"
                       >
-                        ${bucket.bars.length === 1 ? html17`<span class="pdp-chart-bar-value"
+                        ${bucket.bars.length === 1 ? html18`<span class="pdp-chart-bar-value"
                               >${formatNum(bar.value)}</span
-                            >` : nothing8}
+                            >` : nothing9}
                       </div>
                     `
     )}
@@ -8765,7 +9608,7 @@ renderLine_fn = function() {
   const { series, xLabels, yMax } = buildLinePaths(data);
   const ticks = niceTicks(yMax);
   const scaleMax = Math.max(yMax, ticks[ticks.length - 1]);
-  return html17`
+  return html18`
       <div
         class="pdp-chart-line"
         role="figure"
@@ -8775,7 +9618,7 @@ renderLine_fn = function() {
       >
         <div class="pdp-chart-line-yaxis" aria-hidden="true">
           ${ticks.map(
-    (t2) => html17`
+    (t2) => html18`
               <span
                 class="pdp-chart-yaxis-tick"
                 style="bottom:${t2 / scaleMax * 100}%"
@@ -8824,7 +9667,7 @@ renderLine_fn = function() {
         style="--col-count:${xLabels.length}"
         aria-hidden="true"
       >
-        ${xLabels.map((label) => html17`<span>${label}</span>`)}
+        ${xLabels.map((label) => html18`<span>${label}</span>`)}
       </div>
     `;
 };
@@ -8837,7 +9680,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-cha
 }
 
 // src/widgets/PdpChartBarStackedLit.ts
-import { html as html18, LitElement as LitElement18 } from "lit";
+import { html as html19, LitElement as LitElement19 } from "lit";
 function ensureStyles() {
   if (typeof document === "undefined") return;
   if (document.getElementById("syntro-pdp-chart-bar-style")) return;
@@ -8925,7 +9768,7 @@ var CSS = `
 }
 `;
 var PALETTE = ["hsl(150 32% 50%)", "hsl(40 75% 60%)", "hsl(208 50% 55%)", "hsl(320 38% 60%)"];
-var PdpChartBarStackedLit = class extends LitElement18 {
+var PdpChartBarStackedLit = class extends LitElement19 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -8938,16 +9781,16 @@ var PdpChartBarStackedLit = class extends LitElement18 {
     ensureStyles();
   }
   render() {
-    if (!this.data) return html18`<div class="pdp-chart-bar" style="opacity:0.5;">…</div>`;
+    if (!this.data) return html19`<div class="pdp-chart-bar" style="opacity:0.5;">…</div>`;
     const { title, series } = this.data;
     const allX = Array.from(new Set(series.flatMap((s4) => s4.points.map((p) => p.x))));
     const max = Math.max(...series.flatMap((s4) => s4.points.map((p) => p.y)), 1);
-    return html18`
+    return html19`
       <section class="pdp-chart-bar" aria-label=${title}>
         <h3 class="pdp-chart-bar__title">${title}</h3>
-        ${series.length > 1 ? html18`<div class="pdp-chart-bar__legend">
+        ${series.length > 1 ? html19`<div class="pdp-chart-bar__legend">
               ${series.map(
-      (s4, i2) => html18`<span
+      (s4, i2) => html19`<span
                   ><span
                     class="pdp-chart-bar__legend-dot"
                     style=${`background: ${PALETTE[i2 % PALETTE.length]};`}
@@ -8957,14 +9800,14 @@ var PdpChartBarStackedLit = class extends LitElement18 {
     )}
             </div>` : ""}
         ${allX.map(
-      (x) => html18`<div class="pdp-chart-bar__row">
+      (x) => html19`<div class="pdp-chart-bar__row">
             <div class="pdp-chart-bar__row-label">${x}</div>
             <div class="pdp-chart-bar__row-bars">
               ${series.map((s4, i2) => {
         const point = s4.points.find((p) => p.x === x);
         if (!point) return "";
         const pct = point.y / max * 100;
-        return html18`<div class="pdp-chart-bar__bar-track">
+        return html19`<div class="pdp-chart-bar__bar-track">
                   <div
                     class="pdp-chart-bar__bar-fill"
                     style=${`width: ${pct.toFixed(1)}%; background: ${PALETTE[i2 % PALETTE.length]};`}
@@ -8987,7 +9830,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-cha
 }
 
 // src/widgets/PdpChartMetricPullLit.ts
-import { html as html19, LitElement as LitElement19, svg as svg3 } from "lit";
+import { html as html20, LitElement as LitElement20, svg as svg3 } from "lit";
 function ensureStyles2() {
   if (typeof document === "undefined") return;
   if (document.getElementById("syntro-pdp-chart-metric-style")) return;
@@ -9099,7 +9942,7 @@ function buildSparkline(points) {
   const peakIndex = points.reduce((best, p, i2) => p.y > points[best].y ? i2 : best, 0);
   return { linePath: line, areaPath: area, peakIndex };
 }
-var PdpChartMetricPullLit = class extends LitElement19 {
+var PdpChartMetricPullLit = class extends LitElement20 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -9112,10 +9955,10 @@ var PdpChartMetricPullLit = class extends LitElement19 {
     ensureStyles2();
   }
   render() {
-    if (!this.data) return html19`<div class="pdp-chart-met" style="opacity:0.5;">…</div>`;
+    if (!this.data) return html20`<div class="pdp-chart-met" style="opacity:0.5;">…</div>`;
     const { title, series } = this.data;
     const first = series[0];
-    if (!first || first.points.length === 0) return html19``;
+    if (!first || first.points.length === 0) return html20``;
     const points = first.points;
     const peak = points.reduce((b, p) => p.y > b.y ? p : b, points[0]);
     const mean = points.reduce((s4, p) => s4 + p.y, 0) / points.length;
@@ -9128,7 +9971,7 @@ var PdpChartMetricPullLit = class extends LitElement19 {
     const max = Math.max(...points.map((p) => p.y));
     const range = max - min || 1;
     const py = h - 4 - (peak.y - min) / range * (h - 8);
-    return html19`
+    return html20`
       <section class="pdp-chart-met" aria-label=${title}>
         <div class="pdp-chart-met__metric">
           <span class="pdp-chart-met__big">${peak.y}</span>
@@ -9160,7 +10003,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-cha
 }
 
 // src/widgets/PdpQaAccordionLit.ts
-import { html as html20, LitElement as LitElement20 } from "lit";
+import { html as html21, LitElement as LitElement21 } from "lit";
 function ensureStyles3() {
   if (typeof document === "undefined") return;
   if (document.getElementById("syntro-pdp-qa-accordion-style")) return;
@@ -9242,7 +10085,7 @@ var CSS3 = `
   max-width: 56ch;
 }
 `;
-var PdpQaAccordionLit = class extends LitElement20 {
+var PdpQaAccordionLit = class extends LitElement21 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -9255,11 +10098,11 @@ var PdpQaAccordionLit = class extends LitElement20 {
     ensureStyles3();
   }
   render() {
-    if (!this.data) return html20`<div class="pdp-qa-acc" style="opacity:0.5;">…</div>`;
-    return html20`
+    if (!this.data) return html21`<div class="pdp-qa-acc" style="opacity:0.5;">…</div>`;
+    return html21`
       <section class="pdp-qa-acc" aria-label="Frequently asked questions">
         ${this.data.items.map(
-      (it) => html20`<details class="pdp-qa-acc__item">
+      (it) => html21`<details class="pdp-qa-acc__item">
             <summary>
               <span class="pdp-qa-acc__chev" aria-hidden="true"></span>
               <span>${it.question}</span>
@@ -9279,7 +10122,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-qa-
 }
 
 // src/widgets/PdpQaSideBySideLit.ts
-import { html as html21, LitElement as LitElement21 } from "lit";
+import { html as html22, LitElement as LitElement22 } from "lit";
 function ensureStyles4() {
   if (typeof document === "undefined") return;
   if (document.getElementById("syntro-pdp-qa-side-style")) return;
@@ -9353,7 +10196,7 @@ var CSS4 = `
   margin: 0;
 }
 `;
-var PdpQaSideBySideLit = class extends LitElement21 {
+var PdpQaSideBySideLit = class extends LitElement22 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -9366,11 +10209,11 @@ var PdpQaSideBySideLit = class extends LitElement21 {
     ensureStyles4();
   }
   render() {
-    if (!this.data) return html21`<div class="pdp-qa-side" style="opacity:0.5;">…</div>`;
-    return html21`
+    if (!this.data) return html22`<div class="pdp-qa-side" style="opacity:0.5;">…</div>`;
+    return html22`
       <section class="pdp-qa-side" aria-label="Q&A">
         ${this.data.items.map(
-      (it) => html21`<div class="pdp-qa-side__item">
+      (it) => html22`<div class="pdp-qa-side__item">
             <h4 class="pdp-qa-side__q">${it.question}</h4>
             <p class="pdp-qa-side__a">${it.answer}</p>
           </div>`
@@ -9387,7 +10230,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-qa-
 }
 
 // src/widgets/PdpRegionalFullBleedLit.ts
-import { html as html22, LitElement as LitElement22 } from "lit";
+import { html as html23, LitElement as LitElement23 } from "lit";
 function ensureStyles5() {
   if (typeof document === "undefined") return;
   if (document.getElementById("syntro-pdp-regional-fullbleed-style")) return;
@@ -9478,7 +10321,7 @@ var CSS5 = `
   font-style: italic;
 }
 `;
-var PdpRegionalFullBleedLit = class extends LitElement22 {
+var PdpRegionalFullBleedLit = class extends LitElement23 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -9491,9 +10334,9 @@ var PdpRegionalFullBleedLit = class extends LitElement22 {
     ensureStyles5();
   }
   render() {
-    if (!this.data) return html22`<div class="pdp-reg-fb" style="opacity:0.5;">…</div>`;
+    if (!this.data) return html23`<div class="pdp-reg-fb" style="opacity:0.5;">…</div>`;
     const d = this.data;
-    return html22`
+    return html23`
       <section class="pdp-reg-fb" aria-label="Where you are">
         <article class="pdp-reg-fb__panel">
           <svg class="pdp-reg-fb__glyph" viewBox="0 0 56 56" aria-hidden="true">
@@ -9536,7 +10379,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-reg
 }
 
 // src/widgets/PdpRegionalInlineNoteLit.ts
-import { html as html23, LitElement as LitElement23 } from "lit";
+import { html as html24, LitElement as LitElement24 } from "lit";
 function ensureStyles6() {
   if (typeof document === "undefined") return;
   if (document.getElementById("syntro-pdp-regional-inline-style")) return;
@@ -9597,7 +10440,7 @@ var CSS6 = `
   font-style: italic;
 }
 `;
-var PdpRegionalInlineNoteLit = class extends LitElement23 {
+var PdpRegionalInlineNoteLit = class extends LitElement24 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -9610,9 +10453,9 @@ var PdpRegionalInlineNoteLit = class extends LitElement23 {
     ensureStyles6();
   }
   render() {
-    if (!this.data) return html23`<div class="pdp-reg-in" style="opacity:0.5;">…</div>`;
+    if (!this.data) return html24`<div class="pdp-reg-in" style="opacity:0.5;">…</div>`;
     const d = this.data;
-    return html23`
+    return html24`
       <aside class="pdp-reg-in" aria-label="Regional note">
         <svg class="pdp-reg-in__icon" viewBox="0 0 22 22" aria-hidden="true">
           <circle cx="11" cy="11" r="9" fill="none" stroke="currentColor" stroke-width="1.6"/>
@@ -9640,8 +10483,8 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-reg
 }
 
 // src/widgets/PdpSlotPlaceholderLit.ts
-import { html as html24, LitElement as LitElement24 } from "lit";
-var PdpSlotPlaceholderLit = class extends LitElement24 {
+import { html as html25, LitElement as LitElement25 } from "lit";
+var PdpSlotPlaceholderLit = class extends LitElement25 {
   constructor() {
     super(...arguments);
     this.label = "More personalized content coming soon";
@@ -9650,7 +10493,7 @@ var PdpSlotPlaceholderLit = class extends LitElement24 {
     return this;
   }
   render() {
-    return html24`
+    return html25`
       <div class="pdp-slot-placeholder" data-placeholder>
         <p>${this.label}</p>
         <small>Ask in chat to explore this product further.</small>
@@ -9666,7 +10509,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-slo
 }
 
 // src/widgets/PdpRibbonLit.ts
-import { html as html25, LitElement as LitElement25, nothing as nothing9 } from "lit";
+import { html as html26, LitElement as LitElement26, nothing as nothing10 } from "lit";
 function ensureRibbonStyles() {
   if (typeof document === "undefined") return;
   if (document.getElementById("syntro-pdp-ribbon-style")) return;
@@ -9795,7 +10638,7 @@ var RIBBON_CSS = `
   100% { transform: translateX(110%); }
 }
 `;
-var PdpRibbonLit = class extends LitElement25 {
+var PdpRibbonLit = class extends LitElement26 {
   constructor() {
     super(...arguments);
     this.topic = "";
@@ -9833,7 +10676,7 @@ var PdpRibbonLit = class extends LitElement25 {
   }
   render() {
     const cls = this._entering ? "syntro-pdp-ribbon is-entering" : "syntro-pdp-ribbon";
-    return html25`
+    return html26`
       <div class="${cls}" role="status" aria-live="polite">
         <span class="syntro-pdp-ribbon-sweep" aria-hidden="true"></span>
         <svg
@@ -9853,7 +10696,7 @@ var PdpRibbonLit = class extends LitElement25 {
         </svg>
         <p class="syntro-pdp-ribbon-copy">
           Tailored to your conversation about
-          ${this.topic ? html25` <span class="syntro-pdp-ribbon-topic">${this.topic}</span>.` : nothing9}
+          ${this.topic ? html26` <span class="syntro-pdp-ribbon-topic">${this.topic}</span>.` : nothing10}
           <span class="syntro-pdp-ribbon-trail"> ${this.subtitle}</span>
         </p>
       </div>
@@ -9869,219 +10712,6 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-rib
   customElements.define("syntro-pdp-ribbon", PdpRibbonLit);
 }
 
-// src/widgets/PdpSlotLit.ts
-import { html as html26, LitElement as LitElement26, nothing as nothing10 } from "lit";
-function ensureSlotStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-slot-style")) return;
-  const s4 = document.createElement("style");
-  s4.id = "syntro-pdp-slot-style";
-  s4.textContent = SLOT_CSS;
-  document.head.appendChild(s4);
-}
-var SLOT_CSS = `
-.syntro-pdp-slot {
-  --sl-primary: var(--syntro-pdp-primary, hsl(150 32% 38%));
-  --sl-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
-  --sl-muted: var(--syntro-pdp-muted, hsl(30 8% 55%));
-  --sl-border: var(--syntro-pdp-border, hsl(30 6% 18%));
-  --sl-bg-a: var(--syntro-pdp-card-bg, hsl(25 10% 11%));
-  --sl-bg-b: var(--syntro-pdp-card-bg-b, hsl(25 10% 9%));
-  --sl-display: var(--syntro-pdp-display, inherit);
-
-  position: relative;
-  display: grid;
-  grid-template-areas: 'stack';
-  font-family: var(--syntro-pdp-sans, inherit);
-}
-.syntro-pdp-slot > .syntro-pdp-slot-mount,
-.syntro-pdp-slot > .syntro-pdp-slot-pending,
-.syntro-pdp-slot > .syntro-pdp-slot-failed {
-  grid-area: stack;
-}
-
-.syntro-pdp-slot-mount {
-  min-height: 220px;
-}
-
-/* When mutation arrived, hide the pending layer */
-.syntro-pdp-slot[data-state='mounted'] .syntro-pdp-slot-pending,
-.syntro-pdp-slot[data-state='failed'] .syntro-pdp-slot-pending {
-  display: none;
-}
-.syntro-pdp-slot[data-state='mounted'] .syntro-pdp-slot-failed,
-.syntro-pdp-slot[data-state='pending'] .syntro-pdp-slot-failed {
-  display: none;
-}
-
-/* Pending \u2014 a quietly-animated waiting state. */
-.syntro-pdp-slot-pending {
-  position: relative;
-  border: 1px dashed var(--sl-border);
-  border-radius: 22px;
-  min-height: 220px;
-  padding: 36px 28px;
-  background: linear-gradient(180deg, var(--sl-bg-a), var(--sl-bg-b));
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-.syntro-pdp-slot-pending-shimmer {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    color-mix(in srgb, var(--sl-primary) 7%, transparent),
-    transparent
-  );
-  transform: translateX(-100%);
-  animation: syntro-pdp-slot-sweep 1800ms ease-in-out infinite;
-}
-.syntro-pdp-slot-pending-row {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-.syntro-pdp-slot-pending-dot {
-  flex: 0 0 auto;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--sl-primary);
-  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sl-primary) 14%, transparent);
-  animation: syntro-pdp-slot-pulse 1600ms ease-in-out infinite;
-}
-.syntro-pdp-slot-pending-label {
-  font-family: var(--sl-display);
-  font-style: italic;
-  font-size: 18px;
-  font-variation-settings: 'SOFT' 70;
-  color: var(--sl-muted);
-  margin: 0;
-  line-height: 1.4;
-}
-
-/* Failed \u2014 the planner or sub-agent failed; the host page still works. */
-.syntro-pdp-slot-failed {
-  border: 1px solid var(--sl-border);
-  border-radius: 22px;
-  min-height: 180px;
-  padding: 24px 28px;
-  background: linear-gradient(180deg, var(--sl-bg-a), var(--sl-bg-b));
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 6px;
-}
-.syntro-pdp-slot-failed-title {
-  font-family: var(--sl-display);
-  font-style: italic;
-  font-size: 17px;
-  color: var(--sl-fg);
-  margin: 0;
-  font-variation-settings: 'SOFT' 70;
-}
-.syntro-pdp-slot-failed-body {
-  color: var(--sl-muted);
-  font-size: 13.5px;
-  margin: 0;
-  line-height: 1.5;
-}
-
-@media (max-width: 640px) {
-  .syntro-pdp-slot-pending,
-  .syntro-pdp-slot-failed {
-    border-radius: 18px;
-    padding: 24px 18px;
-    min-height: 180px;
-  }
-  .syntro-pdp-slot-pending-label {
-    font-size: 15.5px;
-  }
-}
-
-@keyframes syntro-pdp-slot-sweep {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
-}
-@keyframes syntro-pdp-slot-pulse {
-  0%, 100% {
-    opacity: 0.6;
-    box-shadow: 0 0 0 6px color-mix(in srgb, var(--sl-primary) 14%, transparent);
-  }
-  50% {
-    opacity: 1;
-    box-shadow: 0 0 0 8px color-mix(in srgb, var(--sl-primary) 26%, transparent);
-  }
-}
-`;
-var PENDING_COPY = {
-  "trending-news": "Composing this section\u2026",
-  chart: "Drawing the comparison\u2026",
-  qa: "Picking the questions worth answering\u2026",
-  regional: "Locating you in time and place\u2026",
-  "peer-feed": "Finding people like you\u2026"
-};
-var PENDING_FALLBACK = "Composing\u2026";
-var PdpSlotLit = class extends LitElement26 {
-  constructor() {
-    super(...arguments);
-    /** DOM id the host's mutation runtime targets when appending the widget. */
-    this.slotId = "";
-    this.kind = "";
-    this.state = "pending";
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    ensureSlotStyles();
-  }
-  willUpdate() {
-    this.dataset.state = this.state;
-  }
-  render() {
-    const pendingLabel = PENDING_COPY[this.kind] ?? PENDING_FALLBACK;
-    return html26`
-      <div class="syntro-pdp-slot" data-state=${this.state} data-kind=${this.kind}>
-        <div
-          class="syntro-pdp-slot-mount"
-          id=${this.slotId || nothing10}
-          data-pdp-slot=${this.kind}
-        ></div>
-        <div class="syntro-pdp-slot-pending" aria-hidden=${this.state !== "pending"}>
-          <div class="syntro-pdp-slot-pending-shimmer" aria-hidden="true"></div>
-          <div class="syntro-pdp-slot-pending-row">
-            <span class="syntro-pdp-slot-pending-dot" aria-hidden="true"></span>
-            <p class="syntro-pdp-slot-pending-label">${pendingLabel}</p>
-          </div>
-        </div>
-        <div class="syntro-pdp-slot-failed" aria-hidden=${this.state !== "failed"}>
-          <p class="syntro-pdp-slot-failed-title">
-            Personalized view couldn't load.
-          </p>
-          <p class="syntro-pdp-slot-failed-body">
-            The standard page still has everything you need.
-          </p>
-        </div>
-      </div>
-    `;
-  }
-};
-PdpSlotLit.properties = {
-  slotId: { type: String, attribute: "slot-id" },
-  kind: { type: String },
-  state: { type: String, reflect: true }
-};
-if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-slot")) {
-  customElements.define("syntro-pdp-slot", PdpSlotLit);
-}
-
 // src/widgets/PdpQaLit.ts
 import { html as html27, LitElement as LitElement27, nothing as nothing11 } from "lit";
 function ensureQaStyles() {
@@ -11050,6 +11680,8 @@ var runtime = {
 var runtime_default = runtime;
 
 export {
+  detachSection,
+  runTakeover,
   _testing,
   onActivate,
   ProductCardMountable,
@@ -11089,4 +11721,4 @@ export {
    * SPDX-License-Identifier: BSD-3-Clause
    *)
 */
-//# sourceMappingURL=chunk-NH3CFDTZ.js.map
+//# sourceMappingURL=chunk-HV6QS4PQ.js.map