@syntrologie/adapt-product 2.55.1 → 2.57.0

package/dist/{chunk-QXR5X22R.js → chunk-YEW72FVW.js}

@@ -1,546 +1,25 @@
 import {
+  IMAGE_STANDIN_BACKGROUND,
   VISIBLE_FACT_KEYS,
+  ViewportClassController,
   __privateAdd,
   __privateGet,
   __privateMethod,
   __privateSet,
   cardSchema,
   comparisonSchema,
+  dispatchDiveDeeper,
+  external_exports,
+  fetchLivePrice,
   getProductPlatformAdapter,
   gridSchema,
   heroSchema,
   recoSchema,
-  takeoverPlanSchema
-} from "./chunk-D2W6UYLT.js";
-
-// ../../../node_modules/@lit/context/lib/create-context.js
-function n(n2) {
-  return n2;
-}
-
-// ../../sdk-contracts/dist/canvas-context.js
-var canvasRuntimeContext = n("syntrologie:canvas-runtime");
-
-// ../../sdk-contracts/dist/detector-events.js
-var DETECTOR_EVENT_NAMES = [
-  "ui.hover",
-  "ui.idle",
-  "ui.hesitate",
-  "ui.rage_click",
-  "ui.scroll_thrash",
-  "ui.focus_bounce"
-];
-var CANONICAL_BUS_EVENT_NAMES = [
-  ...DETECTOR_EVENT_NAMES,
-  "nav.section_viewed",
-  "nav.scroll_depth"
-];
-
-// ../../sdk-contracts/dist/dive-deeper.js
-var DIVE_DEEPER_EVENT = "syntro:chat:dive-deeper";
-function dispatchDiveDeeper(detail) {
-  if (typeof window === "undefined")
-    return;
-  window.dispatchEvent(new CustomEvent(DIVE_DEEPER_EVENT, { detail }));
-}
-
-// ../../sdk-contracts/dist/mount-plumbing.js
-var MOUNT_PLUMBING_KEYS = ["instanceId", "runtime", "tileId"];
-function stripMountPlumbing(config) {
-  if (!config || typeof config !== "object") {
-    return {};
-  }
-  const out = { ...config };
-  for (const key of MOUNT_PLUMBING_KEYS) {
-    delete out[key];
-  }
-  return out;
-}
-
-// ../../sdk-contracts/dist/routes.js
-var RESERVED_BYTES = /* @__PURE__ */ new Set([
-  33,
-  // !
-  35,
-  // #
-  36,
-  // $
-  38,
-  // &
-  39,
-  // '
-  40,
-  // (
-  41,
-  // )
-  42,
-  // *
-  43,
-  // +
-  44,
-  // ,
-  47,
-  // /
-  58,
-  // :
-  59,
-  // ;
-  61,
-  // =
-  63,
-  // ?
-  64,
-  // @
-  91,
-  // [
-  93
-  // ]
-]);
-var utf8Decoder = new TextDecoder("utf-8", { fatal: false });
-function decodeUnreservedOnly(input) {
-  let out = "";
-  let pending2 = [];
-  const flushPending = () => {
-    if (pending2.length === 0)
-      return;
-    const bytes = new Uint8Array(pending2);
-    out += utf8Decoder.decode(bytes);
-    pending2 = [];
-  };
-  let i2 = 0;
-  while (i2 < input.length) {
-    const ch = input[i2];
-    if (ch === "%" && i2 + 2 < input.length && isHex(input[i2 + 1]) && isHex(input[i2 + 2])) {
-      const byte = parseInt(input.slice(i2 + 1, i2 + 3), 16);
-      if (RESERVED_BYTES.has(byte)) {
-        flushPending();
-        out += `%${input.slice(i2 + 1, i2 + 3).toUpperCase()}`;
-        i2 += 3;
-      } else {
-        pending2.push(byte);
-        i2 += 3;
-      }
-    } else {
-      flushPending();
-      out += ch;
-      i2 += 1;
-    }
-  }
-  flushPending();
-  return out;
-}
-function isHex(c2) {
-  return c2 >= "0" && c2 <= "9" || c2 >= "a" && c2 <= "f" || c2 >= "A" && c2 <= "F";
-}
-function stripQueryAndHash(s4) {
-  const q = s4.indexOf("?");
-  if (q !== -1)
-    s4 = s4.slice(0, q);
-  const h = s4.indexOf("#");
-  if (h !== -1)
-    s4 = s4.slice(0, h);
-  return s4;
-}
-function normalizeRoute(path) {
-  if (typeof path !== "string" || path.length === 0) {
-    throw new TypeError("normalizeRoute: input must be a non-empty string");
-  }
-  if (!path.startsWith("/")) {
-    throw new TypeError(`normalizeRoute: input must be absolute (start with '/'); got ${JSON.stringify(path)}`);
-  }
-  let s4 = stripQueryAndHash(path);
-  s4 = decodeUnreservedOnly(s4);
-  s4 = s4.replace(/\/+/g, "/");
-  if (s4.length > 1 && s4.endsWith("/"))
-    s4 = s4.slice(0, -1);
-  return s4;
-}
-
-// ../../sdk-contracts/dist/schemas.js
-import { z } from "zod";
-var NO_CSS_BREAKOUT_PATTERN = /^[^{}]*$/;
-var AnchorIdZ = z.object({
-  selector: z.string().regex(NO_CSS_BREAKOUT_PATTERN, {
-    message: 'selector must not contain "{" or "}" \u2014 not valid CSS selector syntax, and content:hideBySelector injects this value directly into a <style> element where these characters would break out of the generated rule.'
-  }).describe("CSS selector for the target element"),
-  route: z.union([z.string(), z.array(z.string())]).superRefine((value, ctx) => {
-    for (const route of Array.isArray(value) ? value : [value]) {
-      let canonical;
-      try {
-        canonical = normalizeRoute(route);
-      } catch (err) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: `route must be an absolute path starting with "/" (got ${JSON.stringify(route)}): ${err instanceof Error ? err.message : String(err)}`
-        });
-        continue;
-      }
-      if (canonical !== route) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: `route ${JSON.stringify(route)} is not canonical \u2014 use ${JSON.stringify(canonical)} (this must match what the backend's RouteCanonicalityCheck accepts)`
-        });
-      }
-    }
-  }).describe("URL path(s) where this element exists")
-}).strict().describe("DOM element target. selector = CSS selector, route = URL path(s) where the element exists.");
-var AuthoringFieldsZ = {
-  id: z.string().optional().describe('Stable action identifier (e.g. "act_3db6a14d2ab0").'),
-  title: z.string().max(200).optional().describe("Authoring-only: short label shown on the action plan dashboard. Stripped before serving to the runtime SDK."),
-  description: z.string().max(1e3).optional().describe("Authoring-only: one-sentence explanation of what this action does and why. Stripped before serving to the runtime SDK."),
-  validation: z.array(z.string().max(500)).max(10).optional().describe("Authoring-only: ordered steps a reviewer can follow to trigger this action and visually confirm it works. Each entry is one step. Stripped before serving to the runtime SDK.")
-};
-var COUNTABLE_EVENTS = [
-  // User interactions (from PostHog autocapture normalization)
-  "ui.click",
-  "ui.scroll",
-  "ui.input",
-  "ui.change",
-  "ui.submit",
-  // Behavioral detectors (from event-processor)
-  "ui.hover",
-  "ui.idle",
-  "ui.scroll_thrash",
-  "ui.focus_bounce",
-  "ui.hesitate",
-  "ui.rage_click",
-  // Navigation
-  "nav.page_view",
-  "nav.page_leave"
-];
-var CountableEventZ = z.enum(COUNTABLE_EVENTS).describe("Event name to count. ui.* = user interactions and behavioral detectors (hesitate, rage_click, scroll_thrash, focus_bounce, idle, hover); nav.* = page navigation.");
-var SESSION_METRIC_KEYS = ["time_on_page", "page_views", "scroll_depth"];
-var SessionMetricKeyZ = z.enum(SESSION_METRIC_KEYS).describe("Session metric key. time_on_page = seconds on current page, page_views = pages visited this session, scroll_depth = 0-100 percentage.");
-var PageUrlConditionZ = z.object({
-  type: z.literal("page_url"),
-  url: z.string().describe('URL path to match (e.g. "/pricing", "/dashboard")')
-}).describe('Fires when the current page URL matches. Use for page-specific actions. Example: {"type": "page_url", "url": "/pricing"}');
-var RouteConditionZ = z.object({
-  type: z.literal("route"),
-  routeId: z.string().describe("Named route ID from the route filter")
-}).describe("Fires when the current route matches a named route ID.");
-var AnchorVisibleConditionZ = z.object({
-  type: z.literal("anchor_visible"),
-  anchorId: z.string().describe("CSS selector of the anchor element"),
-  state: z.enum(["visible", "present", "absent"]).describe('"visible" = in viewport, "present" = in DOM, "absent" = not in DOM')
-}).describe(`Fires based on a DOM element's visibility state. Example: {"type": "anchor_visible", "anchorId": "#cta-button", "state": "visible"}`);
-var EventOccurredConditionZ = z.object({
-  type: z.literal("event_occurred"),
-  eventName: z.string().describe('Event name (e.g. "ui.click", "$pageview")'),
-  withinMs: z.number().optional().describe("Time window in ms. Omit = any time this session.")
-}).describe('Fires when a specific event has occurred during this session. Example: {"type": "event_occurred", "eventName": "ui.click", "withinMs": 5000}');
-var StateEqualsConditionZ = z.object({
-  type: z.literal("state_equals"),
-  key: z.string().describe("Key in the SDK persistent state store (localStorage). Only valid for keys the host app explicitly sets via syntro.state.set()."),
-  value: z.unknown().describe("Expected value to match against")
-}).describe("Checks the SDK persistent state store (localStorage). ONLY for host-app state set via syntro.state.set() \u2014 NOT for user attributes like region, device, or UTM params (those are handled by segment targeting). Do NOT use this for targeting. If you do not know the valid state keys, do not use this condition type.");
-var ViewportConditionZ = z.object({
-  type: z.literal("viewport"),
-  minWidth: z.number().optional().describe("Minimum viewport width in pixels"),
-  maxWidth: z.number().optional().describe("Maximum viewport width in pixels"),
-  minHeight: z.number().optional().describe("Minimum viewport height in pixels"),
-  maxHeight: z.number().optional().describe("Maximum viewport height in pixels")
-}).describe('Fires based on viewport (screen) size. Use for responsive behavior. Example: {"type": "viewport", "minWidth": 768} \u2014 fires on tablet and larger.');
-var SessionMetricConditionZ = z.object({
-  type: z.literal("session_metric"),
-  key: SessionMetricKeyZ,
-  operator: z.enum(["gte", "lte", "eq", "gt", "lt"]),
-  threshold: z.number().describe("Numeric threshold to compare against")
-}).describe('Fires when a session metric crosses a threshold. Valid keys: "time_on_page" (seconds), "page_views" (count), "scroll_depth" (0-100). Example: {"type": "session_metric", "key": "time_on_page", "operator": "gte", "threshold": 30}');
-var DismissedConditionZ = z.object({
-  type: z.literal("dismissed"),
-  key: z.string().describe("Dismissal key (usually a tile or action ID)"),
-  inverted: z.boolean().optional().describe("When true, fires if NOT dismissed (default behavior)")
-}).describe("Checks if an item has been dismissed by the user. Use with inverted: true to show only if not dismissed.");
-var CooldownActiveConditionZ = z.object({
-  type: z.literal("cooldown_active"),
-  key: z.string().describe("Cooldown key"),
-  inverted: z.boolean().optional().describe("When true, fires if cooldown is NOT active")
-}).describe("Checks if a cooldown timer is currently active. Use to prevent showing the same intervention too frequently.");
-var FrequencyLimitConditionZ = z.object({
-  type: z.literal("frequency_limit"),
-  key: z.string().describe("Frequency counter key"),
-  limit: z.number().describe("Maximum allowed count"),
-  inverted: z.boolean().optional().describe("When true, fires if limit NOT reached")
-}).describe("Checks if a frequency limit has been reached. Use to cap how many times an action fires per session.");
-var MatchOpZ = z.object({
-  equals: z.union([z.string(), z.number(), z.boolean()]).optional(),
-  contains: z.string().optional()
-}).refine((operator) => Number(operator.equals !== void 0) + Number(operator.contains !== void 0) === 1, {
-  message: "Exactly one of equals or contains must be specified."
-}).describe("Match operator for counter filters. Exactly one of equals or contains must be specified.");
-var CounterDefZ = z.object({
-  events: z.array(CountableEventZ).min(1).describe("Event names to count. Use values from the countable events enum."),
-  match: z.record(z.string(), MatchOpZ).optional().describe("Property filters. Keys are event prop names or element-chain fields (tag_name, $el_text, attr__*). All entries AND together.")
-}).describe("Defines what events to count. Registered as an accumulator predicate at config-load time.");
-var EventCountConditionZ = z.object({
-  type: z.literal("event_count"),
-  key: z.string().describe("Unique key for this counter (used for accumulator registration)"),
-  operator: z.enum(["gte", "lte", "eq", "gt", "lt"]),
-  count: z.number().int().min(0).describe("Target count threshold"),
-  withinMs: z.number().positive().optional().describe("Time window in ms. Omit = count across entire session."),
-  counter: CounterDefZ.optional().describe("Inline counter definition. Defines what events to count.")
-}).describe('Fires when accumulated event count crosses a threshold. Most powerful trigger type. Example: {"type": "event_count", "key": "pricing-clicks", "operator": "gte", "count": 3, "counter": {"events": ["ui.click"], "match": {"attr__data-cta": {"contains": "pricing"}}}}');
-var ConditionZ = z.discriminatedUnion("type", [
-  PageUrlConditionZ,
-  RouteConditionZ,
-  AnchorVisibleConditionZ,
-  EventOccurredConditionZ,
-  StateEqualsConditionZ,
-  ViewportConditionZ,
-  SessionMetricConditionZ,
-  DismissedConditionZ,
-  CooldownActiveConditionZ,
-  FrequencyLimitConditionZ,
-  EventCountConditionZ
-]);
-var RuleZ = z.object({
-  conditions: z.array(ConditionZ).describe("Array of conditions \u2014 ALL must match (AND logic) for this rule to fire."),
-  value: z.unknown().describe("Value returned when all conditions match. For triggerWhen: true = fire the action.")
-}).describe("A single rule. ALL conditions must match (AND logic). Rules in a strategy are evaluated top-to-bottom \u2014 first rule where all conditions match wins and returns its value.");
-var RuleStrategyZ = z.object({
-  type: z.literal("rules"),
-  rules: z.array(RuleZ).describe("Ordered list of rules. Evaluated top-to-bottom \u2014 first match wins."),
-  default: z.unknown().describe("Fallback value when no rule matches. For triggerWhen: false = do not fire by default.")
-}).describe("Rule-based strategy. Evaluates rules top-to-bottom. First rule where ALL conditions match returns its value. If no rule matches, returns default. For triggerWhen: set value=true on matching rules, default=false.");
-var ScoreStrategyZ = z.object({
-  type: z.literal("score"),
-  field: z.string(),
-  threshold: z.number(),
-  above: z.unknown(),
-  below: z.unknown()
-}).describe("Score-based strategy. Compares a field value against a threshold.");
-var ModelStrategyZ = z.object({
-  type: z.literal("model"),
-  modelId: z.string(),
-  inputs: z.array(z.string()),
-  outputMapping: z.record(z.string(), z.unknown()),
-  default: z.unknown()
-}).describe("ML model strategy. Sends inputs to a model and maps outputs.");
-var ExternalStrategyZ = z.object({
-  type: z.literal("external"),
-  endpoint: z.string(),
-  method: z.enum(["GET", "POST"]).optional(),
-  default: z.unknown(),
-  timeoutMs: z.number().optional()
-}).describe("External API strategy. Calls an endpoint to determine the value.");
-var DecisionStrategyZ = z.discriminatedUnion("type", [
-  RuleStrategyZ,
-  ScoreStrategyZ,
-  ModelStrategyZ,
-  ExternalStrategyZ
-]);
-var TriggerWhenZ = DecisionStrategyZ.nullable().optional();
-var EventScopeZ = z.object({
-  events: z.array(z.string()),
-  urlContains: z.string().optional(),
-  props: z.record(z.union([z.string(), z.number(), z.boolean()])).optional()
-});
-var NotifyZ = z.object({
-  title: z.string().optional().describe("Notification title"),
-  body: z.string().optional().describe("Notification body text"),
-  icon: z.string().optional().describe("Notification icon (emoji or URL)")
-}).describe("Optional toast notification shown when this action triggers.").nullable().optional();
-
-// ../../sdk-contracts/dist/telemetry-events.js
-var entry = (e2) => e2;
-var TELEMETRY_EVENTS = {
-  // --- intervention metrics (April 2026) — wire names unchanged, all plan-scope
-  syntro_config_served: entry({
-    subject: "config",
-    verb: "served",
-    scope: "plan",
-    props: ["tiles", "actions"]
-  }),
-  syntro_intervention_seen: entry({
-    subject: "intervention",
-    verb: "seen",
-    scope: "plan",
-    props: ["intervention_id", "intervention_kind"]
-  }),
-  syntro_intervention_triggered: entry({
-    subject: "intervention",
-    verb: "triggered",
-    scope: "plan",
-    props: ["intervention_id", "intervention_kind"]
-  }),
-  syntro_intervention_interacted: entry({
-    subject: "intervention",
-    verb: "interacted",
-    scope: "plan",
-    props: ["intervention_id", "intervention_kind", "interaction_type"]
-  }),
-  // --- concierge (FEAT-1789150184) ---------------------------------------
-  syntro_concierge_opened: entry({
-    subject: "concierge",
-    verb: "opened",
-    scope: "open",
-    props: ["trigger", "page_path"]
-    // trigger: ConciergeOpenTrigger
-  }),
-  syntro_concierge_closed: entry({
-    subject: "concierge",
-    verb: "closed",
-    scope: "open",
-    props: ["duration_ms", "reason", "messages_sent", "tiles_dismissed", "pages_viewed"]
-    // reason: ConciergeCloseReason
-  }),
-  syntro_deck_paged: entry({
-    subject: "deck",
-    verb: "paged",
-    scope: "open",
-    props: ["from_index", "to_index", "method"]
-    // method: DeckPageMethod
-  }),
-  syntro_tile_dismissed: entry({
-    subject: "tile",
-    verb: "dismissed",
-    scope: "open",
-    props: ["tile_id", "tile_kind", "visible_ms"]
-  }),
-  // The three chat atoms are OPEN-scope: they carry `surface` / `open_id` and
-  // only make sense inside a concierge open. An INLINE chat bar (no concierge)
-  // still dispatches them on every turn, and the core drops each one and
-  // increments the `telemetry_dropped` health counter. That is EXPECTED on an
-  // inline-chat host page, not a bug — `telemetry_dropped` there mixes "real
-  // defect" with "inline chat has no open scope", so do not alert on it alone.
-  syntro_chat_message_sent: entry({
-    subject: "chat_message",
-    verb: "sent",
-    scope: "open",
-    props: ["turn", "chars", "via"]
-    // via: ChatSendVia
-  }),
-  syntro_chat_reply_received: entry({
-    subject: "chat_reply",
-    verb: "received",
-    scope: "open",
-    props: ["turn", "ttft_ms", "total_ms", "mounts", "cards"]
-  }),
-  syntro_chat_interrupted: entry({
-    subject: "chat",
-    verb: "interrupted",
-    scope: "open",
-    props: ["turn", "after_ms"]
-  }),
-  syntro_chat_maximize_toggled: entry({
-    subject: "chat_maximize",
-    verb: "toggled",
-    scope: "open",
-    props: ["maximized"]
-  }),
-  syntro_chat_takeover_triggered: entry({
-    subject: "chat_takeover",
-    verb: "triggered",
-    scope: "open",
-    props: ["turn"]
-  })
-};
-var TELEMETRY_EVENT_NAMES = Object.keys(TELEMETRY_EVENTS);
-
-// ../../sdk-contracts/dist/viewport.js
-var VIEWPORT_CLASS_ATTR = "data-viewport";
-var DESKTOP_MIN_WIDTH_PX = 720;
-function isCoarsePointer() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function")
-    return true;
-  return window.matchMedia("(pointer: coarse)").matches;
-}
-function classifyPointer() {
-  return isCoarsePointer() ? "coarse" : "fine";
-}
-function hasAnyFinePointer() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function")
-    return true;
-  return window.matchMedia("(any-pointer: fine)").matches;
-}
-function observePointer(cb) {
-  const read = () => ({ primary: classifyPointer(), anyFine: hasAnyFinePointer() });
-  let current = read();
-  cb(current);
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function")
-    return () => {
-    };
-  const coarse = window.matchMedia("(pointer: coarse)");
-  const anyFine = window.matchMedia("(any-pointer: fine)");
-  const onChange = () => {
-    const next = read();
-    if (next.primary !== current.primary || next.anyFine !== current.anyFine) {
-      current = next;
-      cb(next);
-    }
-  };
-  const sub = (mq) => {
-    if (mq.addEventListener)
-      mq.addEventListener("change", onChange);
-    else
-      mq.addListener?.(onChange);
-  };
-  const unsub = (mq) => {
-    if (mq.removeEventListener)
-      mq.removeEventListener("change", onChange);
-    else
-      mq.removeListener?.(onChange);
-  };
-  sub(coarse);
-  sub(anyFine);
-  return () => {
-    unsub(coarse);
-    unsub(anyFine);
-  };
-}
-var POINTER_CLASS_ATTR = "data-pointer";
-function classifyViewport() {
-  if (typeof window === "undefined")
-    return "mobile";
-  return window.innerWidth >= DESKTOP_MIN_WIDTH_PX ? "desktop" : "mobile";
-}
-function observeViewportClass(cb) {
-  let current = classifyViewport();
-  cb(current);
-  if (typeof window === "undefined")
-    return () => {
-    };
-  const onResize = () => {
-    const next = classifyViewport();
-    if (next !== current) {
-      current = next;
-      cb(next);
-    }
-  };
-  window.addEventListener("resize", onResize, { passive: true });
-  return () => window.removeEventListener("resize", onResize);
-}
-var ViewportClassController = class {
-  constructor(host) {
-    this.value = classifyViewport();
-    this.pointer = classifyPointer();
-    this.anyFinePointer = hasAnyFinePointer();
-    this._unsubscribes = [];
-    this._host = host;
-    host.addController(this);
-  }
-  hostConnected() {
-    this._unsubscribes = [
-      observeViewportClass((c2) => {
-        this.value = c2;
-        this._host.setAttribute(VIEWPORT_CLASS_ATTR, c2);
-        this._host.requestUpdate();
-      }),
-      observePointer(({ primary, anyFine }) => {
-        this.pointer = primary;
-        this.anyFinePointer = anyFine;
-        this._host.setAttribute(POINTER_CLASS_ATTR, primary);
-        this._host.requestUpdate();
-      })
-    ];
-  }
-  hostDisconnected() {
-    for (const off of this._unsubscribes)
-      off();
-    this._unsubscribes = [];
-  }
-};
+  standinInitial,
+  stripMountPlumbing,
+  takeoverPlanSchema,
+  watchLivePrice
+} from "./chunk-E2PP64GL.js";
 
 // src/presets-store.ts
 function presetsWindow() {
@@ -577,9 +56,9 @@ function selectPoolItems(items, decision, max) {
   if (items.length <= max) return [...items];
   const sharp = decision && decision !== UNKNOWN_DECISION;
   if (sharp) {
-    const matched = items.filter((i2) => tagsOf(i2).includes(decision));
-    const general = items.filter((i2) => tagsOf(i2).length === 0);
-    const rest = items.filter((i2) => !matched.includes(i2) && !general.includes(i2));
+    const matched = items.filter((i) => tagsOf(i).includes(decision));
+    const general = items.filter((i) => tagsOf(i).length === 0);
+    const rest = items.filter((i) => !matched.includes(i) && !general.includes(i));
     return [...matched, ...general, ...rest].slice(0, max);
   }
   const picked = [];
@@ -587,9 +66,9 @@ function selectPoolItems(items, decision, max) {
   for (const item of items) {
     const tags = tagsOf(item);
     if (tags.length === 0) continue;
-    if (tags.some((t2) => covered.has(t2))) continue;
+    if (tags.some((t) => covered.has(t))) continue;
     picked.push(item);
-    for (const t2 of tags) covered.add(t2);
+    for (const t of tags) covered.add(t);
     if (picked.length >= max) return picked.slice(0, max);
   }
   for (const item of items) {
@@ -1052,8 +531,8 @@ async function resolveScoredTemplate(opts) {
     value = await opts.score(opts.scoreSpec);
   }
   const variant = opts.presets[value] ?? opts.presets[opts.fallbackValue ?? "unknown"] ?? {};
-  const setSlots = opts.slotIds.filter((s4) => s4 in variant);
-  const unsetSlots = opts.slotIds.filter((s4) => !(s4 in variant));
+  const setSlots = opts.slotIds.filter((s) => s in variant);
+  const unsetSlots = opts.slotIds.filter((s) => !(s in variant));
   const pageOrder = opts.orderSlots ? opts.orderSlots([...opts.slotIds], (slot) => slot in variant) : opts.slotIds;
   if (pageOrder.length > 0) {
     opts.emitPlan(opts.buildPlan(pageOrder.map((slot) => ({ slot, preset: variant[slot] }))));
@@ -1068,6 +547,62 @@ async function resolveScoredTemplate(opts) {
   return { value, decisionValue, setSlots, unsetSlots };
 }
 
+// src/storefront-urls.ts
+function storefrontBase(runtime2) {
+  if (!runtime2 || typeof runtime2 !== "object" || !("storefrontUrl" in runtime2)) return void 0;
+  if (typeof runtime2.storefrontUrl !== "string") return void 0;
+  try {
+    const base = new URL(runtime2.storefrontUrl);
+    return base.protocol === "https:" || base.protocol === "http:" ? base : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function resolveAgainst(value, base) {
+  if (typeof value !== "string" || !value || /^(?:[a-z][a-z\d+.-]*:|\/\/|[?#])/i.test(value))
+    return value;
+  try {
+    const resolved = new URL(value, base);
+    return resolved.protocol === "https:" || resolved.protocol === "http:" ? resolved.href : value;
+  } catch {
+    return value;
+  }
+}
+function resolveStorePath(value, runtime2) {
+  const base = storefrontBase(runtime2);
+  return base ? resolveAgainst(value, base) : value;
+}
+function resolveStorefrontProps(props, runtime2) {
+  const base = storefrontBase(runtime2);
+  if (!base) return props;
+  const resolve = (value) => resolveAgainst(value, base);
+  const product = (value) => ({
+    ...value,
+    ...value.image ? { image: { ...value.image, src: resolve(value.image.src) } } : {},
+    ...Array.isArray(value.ctas) ? {
+      ctas: value.ctas.map((cta) => ({
+        ...cta,
+        ...cta.href ? { href: resolve(cta.href) } : {}
+      }))
+    } : {}
+  });
+  const content = props;
+  return {
+    ...props,
+    ...content.product ? { product: product(content.product) } : {},
+    ...Array.isArray(content.products) ? { products: content.products.map((value) => value ? product(value) : value) } : {},
+    ...Array.isArray(content.items) ? {
+      items: content.items.map(
+        (item) => item ? {
+          ...item,
+          ...item.image_url ? { image_url: resolve(item.image_url) } : {},
+          pdp_href: resolve(item.pdp_href)
+        } : item
+      )
+    } : {}
+  };
+}
+
 // src/takeover/resurrectionGuard.ts
 function startResurrectionGuard(opts) {
   const maxRetries = opts.maxRetries ?? 3;
@@ -1096,8 +631,8 @@ function startResurrectionGuard(opts) {
       opts.onBudgetExhausted(exhausted.sectionId, exhausted.el);
       return;
     }
-    for (const { sectionId, el, n: n2 } of present) {
-      counts.set(sectionId, n2);
+    for (const { sectionId, el, n } of present) {
+      counts.set(sectionId, n);
       opts.onResurrected(sectionId, el);
     }
   };
@@ -1154,7 +689,7 @@ var NOOP_DISPOSE = () => {
 };
 async function runTakeover(config, ports, opts = {}) {
   if (!ports.hasSignals()) {
-    const declaredRoles = new Set(config.hostSections.map((s4) => s4.role));
+    const declaredRoles = new Set(config.hostSections.map((s) => s.role));
     void Promise.resolve().then(() => ports.fetchPlan()).then(
       (response2) => ports.renderModules(
         {
@@ -1164,9 +699,9 @@ async function runTakeover(config, ports, opts = {}) {
           // 1. host-derived entries (kind:sectionId) — review F2;
           // 2. native kinds superseding a DECLARED host role (two-Q&As
           //    bug: our qa next to their attached FAQ).
-          order: response2.plan.order.filter((entry2) => {
-            if (entry2.includes(":")) return false;
-            const superseded = KIND_SUPERSEDES_ROLE[entry2];
+          order: response2.plan.order.filter((entry) => {
+            if (entry.includes(":")) return false;
+            const superseded = KIND_SUPERSEDES_ROLE[entry];
             return !(superseded && declaredRoles.has(superseded));
           }),
           suppress: []
@@ -1200,7 +735,7 @@ async function runTakeover(config, ports, opts = {}) {
     return { outcome: "aborted-precommit", dispose: NOOP_DISPOSE };
   }
   const plan = response.plan;
-  const sectionsById = new Map(config.hostSections.map((s4) => [s4.id, s4]));
+  const sectionsById = new Map(config.hostSections.map((s) => [s.id, s]));
   const toSuppress = [];
   let reservedPx = 0;
   for (const id of plan.suppress) {
@@ -1272,9 +807,8 @@ async function runTakeover(config, ports, opts = {}) {
 }
 
 // src/takeover/fetchPlan.ts
-import { z as z2 } from "zod";
-var takeoverPlanResponseSchema = z2.object({
-  decisionArchetype: z2.string().min(1),
+var takeoverPlanResponseSchema = external_exports.object({
+  decisionArchetype: external_exports.string().min(1),
   plan: takeoverPlanSchema
 }).strict();
 function createTakeoverPlanFetcher(deps) {
@@ -1343,7 +877,7 @@ function applyRegionCurtain(region, opts = {}) {
   return lift;
 }
 function applyCurtainToTargets(targets, opts = {}) {
-  const lifts = targets.map((t2) => applyRegionCurtain(t2, opts));
+  const lifts = targets.map((t) => applyRegionCurtain(t, opts));
   return () => {
     for (const lift of lifts) lift();
   };
@@ -1398,14 +932,20 @@ function attachLifecycleDispose(result) {
 
 // src/widgets/PdpSectionHeaderLit.ts
 import { html, LitElement, nothing } from "lit";
-function ensureSectionHeaderStyles() {
+
+// src/widgets/ensureStylesInRoot.ts
+function ensureStylesInRoot(el, id, css) {
   if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-section-header-style")) return;
-  const s4 = document.createElement("style");
-  s4.id = "syntro-pdp-section-header-style";
-  s4.textContent = SECTION_HEADER_CSS;
-  document.head.appendChild(s4);
+  const root = el.getRootNode();
+  const target = root instanceof ShadowRoot ? root : document.head;
+  if (target.querySelector(`#${id}`)) return;
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = css;
+  target.appendChild(style);
 }
+
+// src/widgets/PdpSectionHeaderLit.ts
 var SECTION_HEADER_CSS = `
 /* The header renders at the FULL-WIDTH section (band) level so the eyebrow
    can center across the whole horizontal slice, while the headline below
@@ -1530,7 +1070,7 @@ var PdpSectionHeaderLit = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureSectionHeaderStyles();
+    ensureStylesInRoot(this, "syntro-pdp-section-header-style", SECTION_HEADER_CSS);
   }
   render() {
     const split = this.accent ? splitTitleAt(this.title, this.accent) : null;
@@ -1562,14 +1102,6 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-sec
 
 // 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%));
@@ -1731,7 +1263,7 @@ var PdpSlotLit = class extends LitElement2 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureSlotStyles();
+    ensureStylesInRoot(this, "syntro-pdp-slot-style", SLOT_CSS);
   }
   willUpdate() {
     this.dataset.state = this.state;
@@ -1774,23 +1306,23 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-slo
 }
 
 // src/takeover/renderModules.ts
-function parsePlanEntry(entry2) {
-  const i2 = entry2.indexOf(":");
-  if (i2 === -1) return { kind: entry2, hostSectionId: null };
-  return { kind: entry2.slice(0, i2), hostSectionId: entry2.slice(i2 + 1) || null };
+function parsePlanEntry(entry) {
+  const i = entry.indexOf(":");
+  if (i === -1) return { kind: entry, hostSectionId: null };
+  return { kind: entry.slice(0, i), hostSectionId: entry.slice(i + 1) || null };
 }
 function createTakeoverModuleRenderer(deps) {
   return async (plan, onModuleFailed) => {
     const decisionArchetype = deps.getDecisionArchetype();
     const row = deps.getPresetRow(decisionArchetype) ?? {};
     const bakedWork = [];
-    plan.order.forEach((entry2, index) => {
-      const { kind, hostSectionId } = parsePlanEntry(entry2);
+    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: entry2, kind });
+        deps.telemetry("takeover.module_kind_unknown", { entry, kind });
         onModuleFailed(hostSectionId);
         return;
       }
@@ -1799,7 +1331,7 @@ function createTakeoverModuleRenderer(deps) {
       const section = document.createElement("section");
       section.toggleAttribute("data-syntro-pdp-section", true);
       section.setAttribute("data-slot", slotId);
-      section.setAttribute("data-syntro-takeover-entry", entry2);
+      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 ?? "";
@@ -1820,7 +1352,7 @@ function createTakeoverModuleRenderer(deps) {
         } else {
           slotEl.state = "failed";
         }
-        deps.telemetry("takeover.module_failed", { entry: entry2, kind });
+        deps.telemetry("takeover.module_failed", { entry, kind });
         onModuleFailed(hostSectionId);
       };
       const mountPayload = async (payload) => {
@@ -1857,14 +1389,6 @@ var RELATIONSHIP_LABELS = {
   complement: "Pairs with this",
   alternative: "Alternative"
 };
-function ensureOtherProductTileStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-other-product-tile-style")) return;
-  const s4 = document.createElement("style");
-  s4.id = "syntro-other-product-tile-style";
-  s4.textContent = OTHER_PRODUCT_TILE_CSS;
-  document.head.appendChild(s4);
-}
 var OTHER_PRODUCT_TILE_CSS = `
 .opt-card {
   --opt-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
@@ -1909,7 +1433,7 @@ var OTHER_PRODUCT_TILE_CSS = `
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.14em;
-  color: var(--opt-primary);
+  color: var(--syntro-pdp-primary-ink, var(--opt-primary));
   font-weight: 600;
   display: flex;
   align-items: center;
@@ -1994,64 +1518,107 @@ var OTHER_PRODUCT_TILE_CSS = `
   background: color-mix(in srgb, var(--opt-primary) 10%, transparent);
 }
 `;
+var _unwatch, _OtherProductTileLit_instances, watchPrice_fn;
 var OtherProductTileLit = class extends LitElement3 {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _OtherProductTileLit_instances);
     this.tile = null;
+    /** The store's live display price, painted over the catalog price. */
+    this._livePrice = null;
+    __privateAdd(this, _unwatch, null);
+    /**
+     * View asks whoever holds the page to open this product. The event crosses
+     * shadow roots, so a canvas that mounts the page can answer it; on a page
+     * where nothing listens, the button does nothing.
+     */
+    this._onView = () => {
+      if (!this.tile) return;
+      const { recommended_product_id: productId, name, image_url, price_cents } = this.tile;
+      const price = this._livePrice ?? this.tile.price;
+      this.dispatchEvent(
+        new CustomEvent("syntro:view-product", {
+          bubbles: true,
+          composed: true,
+          detail: { productId, name, image_url, price, price_cents }
+        })
+      );
+    };
+  }
+  willUpdate(changed) {
+    if (!changed.has("tile")) return;
+    this._livePrice = null;
+    if (this.isConnected) __privateMethod(this, _OtherProductTileLit_instances, watchPrice_fn).call(this);
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = __privateGet(this, _unwatch)) == null ? void 0 : _a.call(this);
+    __privateSet(this, _unwatch, null);
   }
   createRenderRoot() {
     return this;
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureOtherProductTileStyles();
+    ensureStylesInRoot(this, "syntro-other-product-tile-style", OTHER_PRODUCT_TILE_CSS);
+    __privateMethod(this, _OtherProductTileLit_instances, watchPrice_fn).call(this);
   }
   render() {
-    const t2 = this.tile;
-    if (!t2) {
+    const t = this.tile;
+    if (!t) {
       return html3``;
     }
-    const relationshipLabel = RELATIONSHIP_LABELS[t2.relationship];
-    const price = t2.price_cents == null ? "" : `$${(t2.price_cents / 100).toFixed(0)}`;
+    const relationshipLabel = RELATIONSHIP_LABELS[t.relationship];
+    const price = this._livePrice ?? t.price ?? "";
     return html3`
-      <article class="opt-card" data-relationship="${t2.relationship}">
-        ${t2.image_url ? html3`<div class="opt-image">
-              <img src="${t2.image_url}" alt="${t2.name}" loading="lazy" />
+      <article class="opt-card" data-relationship="${t.relationship}">
+        ${t.image_url ? html3`<div class="opt-image">
+              <img src="${t.image_url}" alt="${t.name}" loading="lazy" />
             </div>` : null}
-        <div class="opt-relationship" data-relationship="${t2.relationship}">
+        <div class="opt-relationship" data-relationship="${t.relationship}">
           ${relationshipLabel ? html3`${relationshipLabel}` : null}
-          <span class="opt-relationship-type">${t2.relationship}</span>
+          <span class="opt-relationship-type">${t.relationship}</span>
         </div>
-        <h3 class="opt-name">${t2.name}</h3>
-        ${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>`)}
+        <h3 class="opt-name">${t.name}</h3>
+        ${t.tagline ? html3`<p class="opt-tagline">${t.tagline}</p>` : null}
+        ${t.why_blurb ? html3`<p class="opt-why">${t.why_blurb}</p>` : null}
+        ${t.evidence_chips.length ? html3`<div class="opt-chips">
+              ${t.evidence_chips.map((c) => html3`<span class="opt-chip">${c.display}</span>`)}
             </div>` : null}
         <div class="opt-footer">
           <span class="opt-price">${price}</span>
-          <button type="button" class="opt-cta" data-action="view-product">View</button>
+          <button type="button" class="opt-cta" data-action="view-product" @click=${this._onView}>
+            View
+          </button>
         </div>
       </article>
     `;
   }
 };
+_unwatch = new WeakMap();
+_OtherProductTileLit_instances = new WeakSet();
+/** The store's live price, now and whenever the runtime publishes a
+ *  commerce adapter; no answer keeps the catalog price the server sent. */
+watchPrice_fn = function() {
+  var _a;
+  (_a = __privateGet(this, _unwatch)) == null ? void 0 : _a.call(this);
+  __privateSet(this, _unwatch, null);
+  const id = this.tile?.recommended_product_id;
+  if (!id || !this.tile?.price) return;
+  __privateSet(this, _unwatch, watchLivePrice(id, (live) => {
+    if (this.tile?.recommended_product_id === id) this._livePrice = live.price;
+  }));
+};
 OtherProductTileLit.properties = {
-  tile: { attribute: false }
+  tile: { attribute: false },
+  _livePrice: { state: true }
 };
 if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-other-product-tile")) {
   customElements.define("syntro-pdp-other-product-tile", OtherProductTileLit);
 }
 
 // src/widgets/PdpOtherProductsCarouselLit.ts
-function ensureCarouselStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-other-products-carousel-style")) return;
-  const s4 = document.createElement("style");
-  s4.id = "syntro-pdp-other-products-carousel-style";
-  s4.textContent = CAROUSEL_CSS;
-  document.head.appendChild(s4);
-}
 var CAROUSEL_CSS = `
 /* Host containment \u2014 must not bust the PDP container width. */
 syntro-pdp-other-products-carousel {
@@ -2125,7 +1692,7 @@ var PdpOtherProductsCarouselLit = class extends LitElement4 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureCarouselStyles();
+    ensureStylesInRoot(this, "syntro-pdp-other-products-carousel-style", CAROUSEL_CSS);
   }
   render() {
     if (!this.data) return html4``;
@@ -2153,14 +1720,6 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-oth
 
 // src/widgets/PdpOtherProductsGridLit.ts
 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;
-  const s4 = document.createElement("style");
-  s4.id = "syntro-pdp-other-products-grid-style";
-  s4.textContent = GRID_CSS;
-  document.head.appendChild(s4);
-}
 var GRID_CSS = `
 syntro-pdp-other-products-grid {
   display: block;
@@ -2197,7 +1756,7 @@ var PdpOtherProductsGridLit = class extends LitElement5 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureGridStyles();
+    ensureStylesInRoot(this, "syntro-pdp-other-products-grid-style", GRID_CSS);
   }
   render() {
     if (!this.data) return html5``;
@@ -2235,7 +1794,7 @@ function _readPdpDecisionArchetypes() {
   if (typeof window === "undefined") return void 0;
   return window.__SYNTRO_PDP_DECISION_ARCHETYPES__;
 }
-async function composeModule(authedFetch, args) {
+async function composeModule(authedFetch, args, signal) {
   try {
     const requestBody = {
       product_name: args.productName,
@@ -2254,7 +1813,8 @@ async function composeModule(authedFetch, args) {
     };
     const resp = await authedFetch("/api/pdp/module", {
       method: "POST",
-      body: JSON.stringify(requestBody)
+      body: JSON.stringify(requestBody),
+      signal
     });
     if (!resp.ok) return null;
     const data = await resp.json();
@@ -2292,33 +1852,33 @@ function _titleCase(slug) {
   return slug.split(/[-_\s]+/).map((w) => w ? w[0].toUpperCase() + w.slice(1) : "").join(" ");
 }
 function _countSignals(signals) {
-  let n2 = 0;
+  let n = 0;
   const walk = (v) => {
     if (v && typeof v === "object") {
       for (const x of Object.values(v)) walk(x);
     } else if (v !== "" && v != null) {
-      n2++;
+      n++;
     }
   };
   walk(signals);
-  return n2;
+  return n;
 }
 function _signalDimensions(signals) {
-  let n2 = 0;
+  let n = 0;
   for (const v of Object.values(signals)) {
     if (v && typeof v === "object") {
-      if (Object.keys(v).length) n2++;
+      if (Object.keys(v).length) n++;
     } else if (v !== "" && v != null && v !== false) {
-      n2++;
+      n++;
     }
   }
-  return n2;
+  return n;
 }
 function _fingerprint(signals) {
-  const s4 = JSON.stringify(signals);
+  const s = JSON.stringify(signals);
   let h = 2166136261;
-  for (let i2 = 0; i2 < s4.length; i2++) {
-    h ^= s4.charCodeAt(i2);
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
     h = Math.imul(h, 16777619);
   }
   return (h >>> 0).toString(16).padStart(8, "0");
@@ -2416,9 +1976,9 @@ function buildExplain(opts) {
     dossier
   };
 }
-async function fetchDossier(authedFetch) {
+async function fetchDossier(authedFetch, signal) {
   try {
-    const resp = await authedFetch("/api/pdp/dossier", { method: "POST" });
+    const resp = await authedFetch("/api/pdp/dossier", { method: "POST", signal });
     if (!resp.ok) return [];
     const data = await resp.json();
     const rows = data.metrics;
@@ -2558,8 +2118,8 @@ var _PAGE_TRAIL_MAX_CHARS = 600;
 function _renderPageTrail(history) {
   const paths = [];
   let length = 0;
-  for (let i2 = history.length - 1; i2 >= 0; i2--) {
-    let path = history[i2].url;
+  for (let i = history.length - 1; i >= 0; i--) {
+    let path = history[i].url;
     try {
       const u = new URL(path);
       path = `${u.pathname}${u.search}`;
@@ -2572,14 +2132,6 @@ function _renderPageTrail(history) {
   }
   return paths.join(" \u2192 ");
 }
-function ensureSectionLayoutStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-layout-style")) return;
-  const s4 = document.createElement("style");
-  s4.id = "syntro-pdp-layout-style";
-  s4.textContent = SECTION_LAYOUT_CSS;
-  document.head.appendChild(s4);
-}
 var SECTION_LAYOUT_CSS = `
 [data-syntro-pdp-root] {
   --sc-pdp-max-w: var(--syntro-pdp-max-width, 1080px);
@@ -2760,6 +2312,7 @@ function resolveTagForMount(inst) {
   }
   return null;
 }
+var _abort;
 var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
   constructor() {
     super(...arguments);
@@ -2840,6 +2393,15 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
      *  after reconnect must undo that before the engine renders again. */
     this._takeoverRanBefore = false;
     this._takeoverLateWarned = false;
+    /**
+     * Cancels in-flight /api/pdp/module + /api/pdp/dossier calls when the
+     * element is removed mid-request — a canvas card can be torn down while a
+     * fetch is still pending, and an unaborted response landing after teardown
+     * would apply a mutation/mount to a disconnected element. Reset to a fresh
+     * controller on (re)connect so a re-added element gets a live signal
+     * instead of one that's already aborted from the previous lifecycle.
+     */
+    __privateAdd(this, _abort, new AbortController());
     /**
      * bfcache re-entry (review F4). pagehide disposes the run
      * (attachLifecycleDispose) but a bfcache restore does NOT re-fire
@@ -2872,8 +2434,8 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
       warn: (code, props) => this._warnDecision(code, props),
       cleanup: () => this._cleanupDecisionEffects()
     });
-    this._onDossierToggle = (e2) => {
-      const open = e2.target.open;
+    this._onDossierToggle = (e) => {
+      const open = e.target.open;
       this._dispatchDecision({ type: "dossier-toggled", open });
     };
     /** Stamps data-viewport on this tag (central classification,
@@ -2909,6 +2471,7 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
     return this;
   }
   connectedCallback() {
+    if (__privateGet(this, _abort).signal.aborted) __privateSet(this, _abort, new AbortController());
     if (!this._takeoverModeLatched) {
       this._takeoverModeLatched = true;
       this._takeoverMode = Boolean(this.takeover);
@@ -2920,7 +2483,7 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
     }
     if (this._takeoverMode) {
       super.connectedCallback();
-      ensureSectionLayoutStyles();
+      ensureStylesInRoot(this, "syntro-pdp-layout-style", SECTION_LAYOUT_CSS);
       if (typeof window !== "undefined") {
         window.removeEventListener("pageshow", this._onTakeoverPageShow);
         window.addEventListener("pageshow", this._onTakeoverPageShow);
@@ -2930,7 +2493,7 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
     }
     const reconnecting = this._decisionState.connection === "disconnected";
     super.connectedCallback();
-    ensureSectionLayoutStyles();
+    ensureStylesInRoot(this, "syntro-pdp-layout-style", SECTION_LAYOUT_CSS);
     if (!this.productId) this._selfIdentify = true;
     this._refreshNativeSlots();
     this._syncDecisionRuntime(reconnecting);
@@ -2944,6 +2507,7 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
     }
   }
   disconnectedCallback() {
+    __privateGet(this, _abort).abort();
     if (this._takeoverMode) {
       super.disconnectedCallback();
       if (typeof window !== "undefined") {
@@ -3145,24 +2709,28 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
       }),
       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] ?? ""
+        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
           },
-          behaviorSummary: "",
-          signals
-        });
+          __privateGet(this, _abort).signal
+        );
       },
       telemetry: telemetry2,
       getDecisionArchetype: () => scored.decisionArchetype
@@ -3329,13 +2897,35 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
       }
       container.innerHTML = "";
       const el = document.createElement(tag);
-      el.data = inst.content;
+      el.data = this._withStoreImages(tag, inst.content);
       container.appendChild(el);
       this._mountDurations.set(slotId, Math.round(performance.now() - slotStartedAt));
       outcomes.push({ status: "mounted", slot: slotId });
     }
     return outcomes;
   }
+  /**
+   * The cross-sell tiles' images are store-relative catalog paths. Inside an
+   * app host's card the document is the host's sandbox and <base> is blocked,
+   * so each is resolved against the runtime's storefront before the carousel
+   * or grid gets it. On a storefront page there is no storefrontUrl and
+   * nothing changes.
+   */
+  _withStoreImages(tag, content) {
+    if (tag !== "syntro-pdp-other-products-carousel" && tag !== "syntro-pdp-other-products-grid")
+      return content;
+    const tiles = content?.tiles;
+    if (!Array.isArray(tiles)) return content;
+    return {
+      ...content,
+      tiles: tiles.map(
+        (tile) => tile && typeof tile === "object" && "image_url" in tile ? {
+          ...tile,
+          image_url: resolveStorePath(tile.image_url, this.runtimeRef)
+        } : tile
+      )
+    };
+  }
   /** Render from config: score the archetype → mount the preset set-values. */
   async _fireFromConfig(productPresets, score, authedFetch, generation, run, scoreMulti) {
     const startedAt = performance.now();
@@ -3353,7 +2943,7 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
       let scoredArgs = null;
       const composeAdapter = createPdpComposeAdapter({
         scoreSummary: () => authedFetch ? score({ model_id: "summary", name: "behavior_summary", type: "string", signals }) : Promise.resolve("unknown"),
-        requestDossier: () => authedFetch ? fetchDossier(authedFetch) : Promise.resolve([]),
+        requestDossier: () => authedFetch ? fetchDossier(authedFetch, __privateGet(this, _abort).signal) : Promise.resolve([]),
         resolveTemplate: (_currentGeneration, composeUnset) => resolveScoredTemplate({
           // Wrap the scorer so the resolved SPORT archetype lands on the
           // element the instant it scores — the native-takeover check needs it
@@ -3441,22 +3031,26 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
         requestModule: async ({ slot, archetype, decisionArchetype, behaviorSummary }) => {
           if (!authedFetch || !run.isCurrent()) return;
           const kind = slot.replace("pdp-slot-", "");
-          const payload = await composeModule(authedFetch, {
-            productName: this.productName,
-            productId: this.productId || null,
-            kind,
-            variant: null,
-            archetype: {
-              slug: archetype,
-              description: archetypeDescriptions[archetype] ?? ""
+          const payload = await composeModule(
+            authedFetch,
+            {
+              productName: this.productName,
+              productId: this.productId || null,
+              kind,
+              variant: null,
+              archetype: {
+                slug: archetype,
+                description: archetypeDescriptions[archetype] ?? ""
+              },
+              decisionArchetype: decisionArchetype === "unknown" ? null : {
+                slug: decisionArchetype,
+                description: decisionDescriptions[decisionArchetype] ?? ""
+              },
+              behaviorSummary,
+              signals
             },
-            decisionArchetype: decisionArchetype === "unknown" ? null : {
-              slug: decisionArchetype,
-              description: decisionDescriptions[decisionArchetype] ?? ""
-            },
-            behaviorSummary,
-            signals
-          });
+            __privateGet(this, _abort).signal
+          );
           if (!run.isCurrent()) return;
           if (!payload) {
             run.dispatch({ type: "module-failed", generation, slot });
@@ -3582,7 +3176,7 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
   _renderWhyBox(view) {
     if (view.status === "hidden") return "";
     if (view.status === "loading") return this._renderWhyBoxLoading();
-    const e2 = view.explanation;
+    const e = view.explanation;
     return html6`
       <style>
         /* Token bridge: every color resolves from a --syntro-pdp-* var the
@@ -3624,7 +3218,7 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
         [data-syntro-pdp-why][open] > summary { margin-bottom: 6px; }
         [data-syntro-pdp-why-note] { font-size: 11px; color: var(--syntro-pdp-muted, #666); margin: 0 0 4px; }
         [data-syntro-pdp-why-archetype] { font-size: 13px; margin: 3px 0; color: var(--syntro-pdp-fg, #1a1a1a); }
-        [data-syntro-pdp-why-archetype] strong { color: var(--syntro-pdp-primary, #1a1a1a); }
+        [data-syntro-pdp-why-archetype] strong { color: var(--syntro-pdp-primary-ink, var(--syntro-pdp-primary, #1a1a1a)); }
         [data-syntro-pdp-why-summary] {
           font-size: 12.5px; font-style: italic; color: var(--syntro-pdp-muted, #666); margin: 6px 0 8px;
           border-left: 2px solid var(--syntro-pdp-accent, #555); padding-left: 10px;
@@ -3670,14 +3264,14 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
           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 ? html6` — ${e2.archetypeDesc}` : ""}
+          Shopping as: <strong>${e.archetypeLabel}</strong>${e.archetypeDesc ? html6` — ${e.archetypeDesc}` : ""}
         </div>
-        ${e2.decisionLabel ? html6`<div data-syntro-pdp-why-archetype>
-                What they're weighing: <strong>${e2.decisionLabel}</strong>${e2.decisionDesc ? html6` — “${e2.decisionDesc}”` : ""}
+        ${e.decisionLabel ? html6`<div data-syntro-pdp-why-archetype>
+                What they're weighing: <strong>${e.decisionLabel}</strong>${e.decisionDesc ? html6` — “${e.decisionDesc}”` : ""}
               </div>` : ""}
-        ${e2.summary ? html6`<div data-syntro-pdp-why-summary>"${e2.summary}"</div>` : ""}
+        ${e.summary ? html6`<div data-syntro-pdp-why-summary>"${e.summary}"</div>` : ""}
         <div data-syntro-pdp-why-metrics>
-          ${e2.metrics.map(
+          ${e.metrics.map(
       (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>
@@ -3760,10 +3354,10 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
         ${skeletonStyles}
         <div data-syntro-pdp-root data-state="pending" data-syntro-pdp-skeleton>
           ${[0, 1, 2].map(
-        (i2) => html6`
+        (i) => html6`
               <section
                 data-syntro-pdp-skeleton-section
-                style="animation-delay: ${i2 * 0.15}s"
+                style="animation-delay: ${i * 0.15}s"
               >
                 <div data-syntro-pdp-skeleton-header>
                   <div data-syntro-pdp-skeleton-eyebrow></div>
@@ -3820,6 +3414,7 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
     `;
   }
 };
+_abort = new WeakMap();
 _SyntroPdpLit.properties = {
   productId: { type: String, attribute: "product-id" },
   productName: { type: String, attribute: "product-name" },
@@ -3833,9 +3428,9 @@ _SyntroPdpLit.properties = {
 /**
  * Self-contained skeleton (shimmer) CSS. Rendered inside the component
  * during the pre-plan / streaming phase. The global section-layout +
- * per-slot accent rules live in the head-injected `SECTION_LAYOUT_CSS`
- * (see `ensureSectionLayoutStyles`), not here, so they're emitted once
- * per document rather than once per `<syntro-pdp>` instance.
+ * per-slot accent rules live in `SECTION_LAYOUT_CSS`, injected once per
+ * root via `ensureStylesInRoot`, not here, so they're emitted once per
+ * root rather than once per `<syntro-pdp>` instance.
  */
 _SyntroPdpLit._skeletonStyles = html6`
     <style>
@@ -4258,14 +3853,14 @@ function collectFromNode(node) {
   const containers = [];
   if (node.matches(`[${NATIVE_SLOT_ATTR}]`)) containers.push(node);
   containers.push(...node.querySelectorAll(`[${NATIVE_SLOT_ATTR}]`));
-  for (const c2 of containers) {
-    if (c2.closest("syntro-pdp")) continue;
-    const pid = nativeProductId(c2);
+  for (const c of containers) {
+    if (c.closest("syntro-pdp")) continue;
+    const pid = nativeProductId(c);
     if (pid) pending.add(pid);
   }
 }
-var onDemoToggle = (e2) => {
-  const detail = e2.detail;
+var onDemoToggle = (e) => {
+  const detail = e.detail;
   if (!detail || typeof detail.on !== "boolean") return;
   toggleOn = detail.on;
   renderSession();
@@ -4341,9 +3936,9 @@ async function resolveDomSelectorImage(input, _signal) {
 // src/bind/jsonld.ts
 function isProduct(node) {
   if (typeof node !== "object" || node === null) return false;
-  const t2 = node["@type"];
-  if (typeof t2 === "string") return t2 === "Product";
-  if (Array.isArray(t2)) return t2.includes("Product");
+  const t = node["@type"];
+  if (typeof t === "string") return t === "Product";
+  if (Array.isArray(t)) return t.includes("Product");
   return false;
 }
 function parseScripts(scripts) {
@@ -4358,7 +3953,7 @@ function parseScripts(scripts) {
     while (stack.length) {
       const cur = stack.pop();
       if (Array.isArray(cur)) {
-        for (const c2 of cur) stack.push(c2);
+        for (const c of cur) stack.push(c);
         continue;
       }
       if (isProduct(cur)) return cur;
@@ -4563,14 +4158,15 @@ async function resolveImageBind(input, signal) {
 }
 
 // src/bind/controller.ts
-var _abort, _pending, _destroyed, _BindController_instances, resolveImage_fn, resolvePrice_fn;
+var _abort2, _pending, _unwatch2, _destroyed, _BindController_instances, resolveImage_fn, resolvePrice_fn;
 var BindController = class {
   constructor(products, callback) {
     this.products = products;
     this.callback = callback;
     __privateAdd(this, _BindController_instances);
-    __privateAdd(this, _abort, new AbortController());
+    __privateAdd(this, _abort2, new AbortController());
     __privateAdd(this, _pending, []);
+    __privateAdd(this, _unwatch2, []);
     __privateAdd(this, _destroyed, false);
   }
   start() {
@@ -4580,6 +4176,15 @@ var BindController = class {
       }
       if (product.price?.bind) {
         __privateGet(this, _pending).push(__privateMethod(this, _BindController_instances, resolvePrice_fn).call(this, product.id, product.price.bind));
+      } else if (product.price || product.salePrice) {
+        __privateGet(this, _unwatch2).push(
+          watchLivePrice(product.id, (live) => {
+            if (__privateGet(this, _destroyed)) return;
+            this.callback(product.id, "price", live.price);
+            this.callback(product.id, "compare_at", live.compareAt);
+          })
+        );
+        __privateGet(this, _pending).push(fetchLivePrice(product.id).then(() => void 0));
       }
     }
   }
@@ -4589,23 +4194,42 @@ var BindController = class {
   destroy() {
     if (__privateGet(this, _destroyed)) return;
     __privateSet(this, _destroyed, true);
-    __privateGet(this, _abort).abort();
+    __privateGet(this, _abort2).abort();
+    for (const stop of __privateGet(this, _unwatch2)) stop();
+    __privateSet(this, _unwatch2, []);
   }
 };
-_abort = new WeakMap();
+_abort2 = new WeakMap();
 _pending = new WeakMap();
+_unwatch2 = new WeakMap();
 _destroyed = new WeakMap();
 _BindController_instances = new WeakSet();
 resolveImage_fn = async function(productId, bind) {
-  const value = await resolveImageBind(bind, __privateGet(this, _abort).signal);
+  const value = await resolveImageBind(bind, __privateGet(this, _abort2).signal);
   if (__privateGet(this, _destroyed)) return;
   this.callback(productId, "image", value);
 };
 resolvePrice_fn = async function(productId, bind) {
-  const value = await resolvePriceBind(bind, __privateGet(this, _abort).signal);
+  const value = await resolvePriceBind(bind, __privateGet(this, _abort2).signal);
   if (__privateGet(this, _destroyed)) return;
   this.callback(productId, "price", value);
 };
+function mergeResolved(resolved, productId, kind, value) {
+  if (kind === "compare_at") {
+    return { ...resolved, [productId]: { ...resolved[productId], compareAt: value } };
+  }
+  if (value == null) return resolved;
+  return { ...resolved, [productId]: { ...resolved[productId], [kind]: value } };
+}
+function keepResolved(resolved, products) {
+  const kept = {};
+  for (const product of products) {
+    const entry = resolved[product.id];
+    if (!entry || product.price?.bind || !("compareAt" in entry)) continue;
+    kept[product.id] = { price: entry.price, compareAt: entry.compareAt };
+  }
+  return kept;
+}
 
 // src/decision/card.ts
 var VARIANT_ERROR_COPY = {
@@ -4627,9 +4251,11 @@ function createInitialCardState(generation = 0) {
     variants: { status: "idle" },
     cart: { status: "idle" },
     selection: {},
-    activation: { status: "idle" }
+    activation: { status: "idle" },
+    optionsPinned: false
   };
 }
+var optionsOpen = (s) => s.face === "back" || s.optionsPinned;
 function selectCardView(state) {
   const primaryCta = state.cart.status === "added" ? {
     mode: "view-cart",
@@ -4639,7 +4265,7 @@ function selectCardView(state) {
     disabled: state.connection !== "connected" || state.commerce !== "available" || state.product.status !== "valid"
   };
   let panel = { status: "hidden", payload: null, error: null, retryable: false };
-  if (state.face === "back") {
+  if (optionsOpen(state)) {
     switch (state.variants.status) {
       case "ready":
         panel = { status: "ready", payload: state.variants.payload, error: null, retryable: false };
@@ -4684,7 +4310,11 @@ function replaceProps(state, event) {
     return { state, effects: effects2 };
   }
   const generation = state.generation + 1;
-  const next = { ...createInitialCardState(generation), commerce: state.commerce };
+  const next = {
+    ...createInitialCardState(generation),
+    commerce: state.commerce,
+    optionsPinned: state.optionsPinned
+  };
   const effects = [{ type: "cancel-flip-settle" }];
   if (!event.valid || event.productId === null) {
     return {
@@ -4717,7 +4347,13 @@ function activatePrimary(state, event) {
   // CTA is a plain navigating <a>, never dispatched here) — but the state
   // machine itself must also refuse to start the Woo/Shopify variant-
   // lookup flow for a product that has none.
-  !state.product.commerceCapable || state.face !== "front") {
+  !state.product.commerceCapable || state.face !== "front" || // A pinned (double-wide) card has no primary CTA to activate — Add to
+  // cart lives in the options panel beside the front face. Without this
+  // guard a stray primary-activated dispatch after an add (cart status
+  // 'added', face still 'front') would fall into the view-cart branch below
+  // and emit close-sdk/open-cart/view_cart_clicked, which a pinned card must
+  // never do (Task 1 keeps the card pinned open across the add).
+  state.optionsPinned) {
     return unchanged2(state);
   }
   const productId = state.product.id;
@@ -4785,7 +4421,7 @@ function serializeSelection(selection) {
   };
 }
 function activateVariantAdd(state, event) {
-  if (state.connection !== "connected" || state.commerce !== "available" || state.product.status !== "valid" || state.face !== "back" || state.variants.status !== "ready" || state.cart.status === "pending" || state.cart.status === "added") {
+  if (state.connection !== "connected" || state.commerce !== "available" || state.product.status !== "valid" || !optionsOpen(state) || state.variants.status !== "ready" || state.cart.status === "pending" || state.cart.status === "added") {
     return unchanged2(state);
   }
   const variant = state.variants.payload.variants.find(
@@ -4844,6 +4480,9 @@ function transitionCard(state, event) {
     const commerce = event.available ? "available" : "unavailable";
     return commerce === state.commerce ? unchanged2(state) : { state: { ...state, commerce }, effects: [] };
   }
+  if (event.type === "options-pinned") {
+    return event.pinned === state.optionsPinned ? unchanged2(state) : { state: { ...state, optionsPinned: event.pinned }, effects: [] };
+  }
   if ((event.type === "variants-resolved" || event.type === "variants-failed" || event.type === "add-succeeded" || event.type === "add-failed") && (event.generation !== state.generation || state.connection !== "connected" || state.product.status !== "valid")) {
     return unchanged2(state);
   }
@@ -4884,7 +4523,7 @@ function transitionCard(state, event) {
       return { state: resumed.state, effects: [failureEffect, ...resumed.effects] };
     }
     case "selection-changed":
-      if (state.commerce !== "available" || state.face !== "back" || state.variants.status !== "ready") {
+      if (state.commerce !== "available" || !optionsOpen(state) || state.variants.status !== "ready") {
         return unchanged2(state);
       }
       return {
@@ -5109,9 +4748,9 @@ function createCardEffectExecutor(ports) {
 var VIEW_DETAIL_ACTION_ID = "view_detail";
 function pickDetailCta(ctas) {
   if (!ctas?.length) return void 0;
-  const navigates = ctas.filter((c2) => !!c2.href);
+  const navigates = ctas.filter((c) => !!c.href);
   if (!navigates.length) return void 0;
-  return navigates.find((c2) => c2.actionId === VIEW_DETAIL_ACTION_ID) ?? navigates.find((c2) => c2.variant && c2.variant !== "primary") ?? navigates[0];
+  return navigates.find((c) => c.actionId === VIEW_DETAIL_ACTION_ID) ?? navigates.find((c) => c.variant && c.variant !== "primary") ?? navigates[0];
 }
 
 // src/sanitizer.ts
@@ -5157,12 +4796,12 @@ function isDangerousUrlAttr(name, value) {
   const normalized = normalizeUrlAttr(value);
   return normalized.startsWith("javascript:") || normalized.startsWith("vbscript:") || normalized.startsWith("data:");
 }
-function sanitizeHtml(html31) {
+function sanitizeHtml(html32) {
   const hasNative = typeof window.Sanitizer === "function";
   if (hasNative) {
     try {
-      const s4 = new window.Sanitizer({});
-      const frag = s4.sanitizeToFragment(html31);
+      const s = new window.Sanitizer({});
+      const frag = s.sanitizeToFragment(html32);
       const div = document.createElement("div");
       div.append(frag);
       return div.innerHTML;
@@ -5170,7 +4809,7 @@ function sanitizeHtml(html31) {
     }
   }
   const tpl = document.createElement("template");
-  tpl.innerHTML = html31;
+  tpl.innerHTML = html32;
   const root = tpl.content;
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null);
   const toRemove = [];
@@ -5197,24 +4836,71 @@ function sanitizeHtml(html31) {
   }
   return tpl.innerHTML;
 }
-
-// src/widgets/ensureStylesInRoot.ts
-function ensureStylesInRoot(el, id, css) {
-  if (typeof document === "undefined") return;
-  const root = el.getRootNode();
-  const target = root instanceof ShadowRoot ? root : document.head;
-  if (target.querySelector(`#${id}`)) return;
-  const style = document.createElement("style");
-  style.id = id;
-  style.textContent = css;
-  target.appendChild(style);
+var DESCRIPTION_TAGS = /* @__PURE__ */ new Set([
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "br",
+  "ul",
+  "ol",
+  "li",
+  "strong",
+  "b",
+  "em",
+  "i",
+  "u",
+  "small",
+  "sup",
+  "sub",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "th",
+  "td",
+  "blockquote"
+]);
+var DEMOTED_HEADING = {
+  h1: "h3",
+  h2: "h3",
+  h3: "h4",
+  h4: "h5",
+  h5: "h6",
+  h6: "h6"
+};
+function sanitizeProductDescription(html32) {
+  if (typeof html32 !== "string" || html32 === "") return "";
+  const doc = new DOMParser().parseFromString(html32, "text/html");
+  const out = document.createElement("div");
+  const copy = (from, to) => {
+    for (const child of Array.from(from.childNodes)) {
+      if (child.nodeType === Node.TEXT_NODE) {
+        to.appendChild(document.createTextNode(child.textContent ?? ""));
+        continue;
+      }
+      if (!(child instanceof Element)) continue;
+      const tag = child.tagName.toLowerCase();
+      if (tag === "script" || tag === "style" || tag === "template" || tag === "iframe") continue;
+      const kept = DEMOTED_HEADING[tag] ?? tag;
+      if (DESCRIPTION_TAGS.has(kept)) {
+        const el = document.createElement(kept);
+        copy(child, el);
+        to.appendChild(el);
+      } else {
+        copy(child, to);
+      }
+    }
+  };
+  copy(doc.body, out);
+  return out.innerHTML;
 }
 
 // src/widgets/imageStandin.ts
 import { html as html7 } from "lit";
-var IMAGE_STANDIN_BACKGROUND = "linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.22)), var(--sc-color-primary, #3a3a3a)";
 function standinMonogram(name) {
-  const initial = ([...name.trim()][0] ?? "?").toUpperCase();
+  const initial = standinInitial(name) ?? "?";
   return html7`<span
     data-standin-monogram
     style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 2.4rem/1 var(--sc-font-family, inherit);color:var(--sc-launcher-color, #ffffff);opacity:0.85;letter-spacing:0.02em;user-select:none;"
@@ -5222,12 +4908,25 @@ function standinMonogram(name) {
   >`;
 }
 
+// src/widgets/presentationContext.ts
+function presentationFromContext(el) {
+  let node = el;
+  while (node) {
+    if (node instanceof Element && node.getAttribute("data-product-presentation") === "double") {
+      return "double";
+    }
+    const parent = node.parentNode;
+    node = parent instanceof ShadowRoot ? parent.host : parent;
+  }
+  return void 0;
+}
+
 // src/widgets/renderHealth.ts
 var BLANK_MIN_AREA = 60 * 60;
 function elementPath(el, stopAt) {
-  const seg = (e2) => {
-    const tag = e2.tagName.toLowerCase();
-    const cls = typeof e2.className === "string" && e2.className.trim() ? `.${e2.className.trim().split(/\s+/)[0]}` : "";
+  const seg = (e) => {
+    const tag = e.tagName.toLowerCase();
+    const cls = typeof e.className === "string" && e.className.trim() ? `.${e.className.trim().split(/\s+/)[0]}` : "";
     return `${tag}${cls}`;
   };
   const parts = [seg(el)];
@@ -5276,7 +4975,7 @@ function measureRenderHealth(card) {
     const r = el.getBoundingClientRect();
     if (r.width === 0 || r.height === 0) continue;
     const ownText = Array.from(el.childNodes).some(
-      (n2) => n2.nodeType === 3 && (n2.textContent ?? "").trim().length > 0
+      (n) => n.nodeType === 3 && (n.textContent ?? "").trim().length > 0
     );
     if (ownText) hasText = true;
     if (el.tagName === "IMG") {
@@ -5310,8 +5009,8 @@ function measureRenderHealth(card) {
           Math.round(ar.top - r.top)
         );
         if (esc > 1 && !hasClipOkAncestor(el, card) && !hasClipOkAncestor(a, card)) {
-          const t2 = (el.textContent ?? "").trim();
-          if (t2 || ["IMG", "BUTTON", "A"].includes(el.tagName)) {
+          const t = (el.textContent ?? "").trim();
+          if (t || ["IMG", "BUTTON", "A"].includes(el.tagName)) {
             push({ path: elementPath(el, card), over_px: esc });
           }
         }
@@ -5345,9 +5044,9 @@ function reportRenderHealth(root, opts) {
       synEmit(`app:${opts.category}:blank`, base);
       return health;
     }
-    const paths = health.clips.map((c2) => c2.path).sort();
-    const over_px = health.clips.reduce((m, c2) => Math.max(m, c2.over_px), 0);
-    const identityTruncated = health.clips.some((c2) => c2.reason === "identity-truncated");
+    const paths = health.clips.map((c) => c.path).sort();
+    const over_px = health.clips.reduce((m, c) => Math.max(m, c.over_px), 0);
+    const identityTruncated = health.clips.some((c) => c.reason === "identity-truncated");
     synEmit(`app:${opts.category}:clipped`, {
       paths: paths.join(","),
       over_px,
@@ -5648,6 +5347,12 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
     __privateAdd(this, _VariantPanelLit_instances);
     this.payload = null;
     this.productTitle = "";
+    /** Set by a double-wide card presentation: the panel sits BESIDE the front
+     *  face rather than flipped to. There is no Back — the front already shows
+     *  the identity, so the panel's own title element is skipped too (the
+     *  "Showing options for …" live-region status line still speaks it, so
+     *  screen reader users get the same announcement either way). */
+    this.pinned = false;
     /** Product-level hero image, passed from the card. Shown on the back face and
      *  used as the fallback when the selected variant carries no featured_image. */
     this.productImage = null;
@@ -5671,8 +5376,8 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
     this._expandedAxes = /* @__PURE__ */ new Set();
     /** @internal — Tier-C per-axis filter text. */
     this._axisFilter = {};
-    this._onKeydown = (e2) => {
-      if (e2.key === "Escape") {
+    this._onKeydown = (e) => {
+      if (e.key === "Escape") {
         this.dispatchEvent(new CustomEvent("variant-panel-back", { bubbles: true, composed: true }));
       }
     };
@@ -5794,7 +5499,7 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
               />` : nothing3}
       </div>
       <div class="svp-body" data-panel-body>
-        ${this.productTitle ? html8`<div class="svp-product-title" data-product-title data-critical-text>${this.productTitle}</div>` : nothing3}
+        ${this.productTitle && !this.pinned ? html8`<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 ? html8`<div class="svp-single-variant-note" data-single-variant-note>
                   Just one option — ready to add.
@@ -5813,7 +5518,7 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
     // so Back fits beside it on the same row).
     ctaPrice != null ? html8`Add ${compareAt ? html8`<span class="svp-compare">$${compareAt.toFixed(2)}</span>` : nothing3}· $${ctaPrice.toFixed(2)}` : html8`Add to cart`}
           </button>
-          ${backBtn}
+          ${this.pinned ? nothing3 : backBtn}
         </div>
         <div class="svp-live" data-live data-clip-ok aria-live="polite">
           ${this.productTitle ? `Showing options for ${this.productTitle}` : nothing3}
@@ -5907,8 +5612,8 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
       )?.focus();
     });
   }
-  _onAxisFilterInput(attrKey, e2) {
-    this._axisFilter = { ...this._axisFilter, [attrKey]: e2.target.value };
+  _onAxisFilterInput(attrKey, e) {
+    this._axisFilter = { ...this._axisFilter, [attrKey]: e.target.value };
   }
   /** Density Tier C — select-style trigger + bounded scrollable listbox.
    *  ONLY this axis collapses; siblings keep their own tier. Filter appears
@@ -5926,9 +5631,9 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
         class="svp-collapse"
         data-collapsed-axis
         data-attribute-key=${attr.key}
-        @keydown=${(e2) => {
-      if (e2.key === "Escape" && expanded) {
-        e2.stopPropagation();
+        @keydown=${(e) => {
+      if (e.key === "Escape" && expanded) {
+        e.stopPropagation();
         this._toggleAxis(attr.key);
         void this.updateComplete.then(() => {
           this.querySelector(
@@ -5965,7 +5670,7 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
                         type="text"
                         placeholder=${`Filter ${attr.label.toLowerCase()}\u2026`}
                         .value=${this._axisFilter[attr.key] ?? ""}
-                        @input=${(e2) => this._onAxisFilterInput(attr.key, e2)}
+                        @input=${(e) => this._onAxisFilterInput(attr.key, e)}
                       />` : nothing3}
                 ${filtered.map((v) => {
       const disabled2 = this._isValueDisabled(attr.key, v.id);
@@ -6007,6 +5712,7 @@ _VariantPanelLit.properties = {
   state: { type: String },
   error: { type: String },
   retryable: { type: Boolean },
+  pinned: { type: Boolean },
   _selection: { state: true },
   _touched: { state: true },
   _expandedAxes: { state: true },
@@ -6127,7 +5833,7 @@ var CARD_FLIP_CSS = `
     .sc-product-card [data-card-flip] { animation: none; }
   }
 `;
-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 _effectExecutor, _controller, _unsubDevice, _double, _lastFailureFingerprint, _reportedHealthStates, _healthRaf, _ProductCardLit_instances, scheduleHealthCheck_fn, measureAndReportHealth_fn, cleanupHostResources_fn, dispatchCard_fn, _onFlipAnimationEnd, startBind_fn, renderVariantPanel_fn, readProductObservation_fn, syncDecisionInputsBeforeIntent_fn;
 var ProductCardLit = class extends LitElement8 {
   constructor() {
     super(...arguments);
@@ -6151,6 +5857,12 @@ var ProductCardLit = class extends LitElement8 {
     }));
     __privateAdd(this, _controller);
     __privateAdd(this, _unsubDevice);
+    /** Set once at connect from the canvas DOM around the card
+     *  (`data-product-presentation="double"`) — never from `props`, so the
+     *  agent that writes card props has no path to setting it. Drives the
+     *  double-wide render branch: front face and options side by side, options
+     *  pinned open. */
+    __privateAdd(this, _double, false);
     /** Fingerprint of the last reported schema-validation failure (sorted
      *  invalid paths). Guards `render_failed` telemetry against re-render spam:
      *  the same bad props re-rendering must not re-emit. Reset on a successful
@@ -6164,25 +5876,25 @@ var ProductCardLit = class extends LitElement8 {
      *  the next scheduled pass or on disconnect. */
     __privateAdd(this, _healthRaf);
     /** animationend on the flip container → the turn is done, render flat. */
-    __privateAdd(this, _onFlipAnimationEnd, (e2) => {
-      if (e2.animationName === "sc-card-flip-in") __privateMethod(this, _ProductCardLit_instances, dispatchCard_fn).call(this, { type: "animation-settled" });
+    __privateAdd(this, _onFlipAnimationEnd, (e) => {
+      if (e.animationName === "sc-card-flip-in") __privateMethod(this, _ProductCardLit_instances, dispatchCard_fn).call(this, { type: "animation-settled" });
     });
     this._onVariantBack = () => {
       __privateMethod(this, _ProductCardLit_instances, syncDecisionInputsBeforeIntent_fn).call(this);
       __privateMethod(this, _ProductCardLit_instances, dispatchCard_fn).call(this, { type: "back-activated" });
     };
-    this._onVariantSelectionChange = (e2) => {
+    this._onVariantSelectionChange = (e) => {
       __privateMethod(this, _ProductCardLit_instances, syncDecisionInputsBeforeIntent_fn).call(this);
-      const detail = e2.detail;
+      const detail = e.detail;
       __privateMethod(this, _ProductCardLit_instances, dispatchCard_fn).call(this, {
         type: "selection-changed",
         attributeKey: detail.attribute_key,
         valueId: detail.value_id
       });
     };
-    this._onVariantAdd = (e2) => {
+    this._onVariantAdd = (e) => {
       __privateMethod(this, _ProductCardLit_instances, syncDecisionInputsBeforeIntent_fn).call(this);
-      const detail = e2.detail;
+      const detail = e.detail;
       __privateMethod(this, _ProductCardLit_instances, dispatchCard_fn).call(this, { type: "variant-add-activated", variantId: detail.variant.id });
     };
     this._onVariantRetry = () => {
@@ -6195,6 +5907,8 @@ var ProductCardLit = class extends LitElement8 {
   }
   connectedCallback() {
     super.connectedCallback();
+    __privateSet(this, _double, presentationFromContext(this) === "double");
+    if (__privateGet(this, _double)) __privateMethod(this, _ProductCardLit_instances, dispatchCard_fn).call(this, { type: "options-pinned", pinned: true });
     __privateMethod(this, _ProductCardLit_instances, dispatchCard_fn).call(this, { type: "reconnected" });
     __privateMethod(this, _ProductCardLit_instances, dispatchCard_fn).call(this, {
       type: "commerce-updated",
@@ -6204,8 +5918,8 @@ var ProductCardLit = class extends LitElement8 {
     this.style.color = "var(--sc-tile-text-color, rgba(20, 20, 20, 0.92))";
     this._device = _readDevice();
     const ctx = synWindow().SynOS?.runtime?.context;
-    __privateSet(this, _unsubDevice, ctx?.subscribe?.((c2) => {
-      const d = c2?.surface?.device;
+    __privateSet(this, _unsubDevice, ctx?.subscribe?.((c) => {
+      const d = c?.surface?.device;
       const next = d === "mobile" || d === "tablet" ? d : "desktop";
       if (next !== this._device) this._device = next;
     }));
@@ -6238,18 +5952,37 @@ var ProductCardLit = class extends LitElement8 {
     const resolved = this.resolved[product.id];
     const view = selectCardView(this._decisionState);
     const articleStyles = _buildArticleStyles(density, view.face);
-    const onPrimaryCtaClick = (e2) => {
-      e2.preventDefault();
+    const onPrimaryCtaClick = (e) => {
+      e.preventDefault();
       __privateMethod(this, _ProductCardLit_instances, syncDecisionInputsBeforeIntent_fn).call(this);
       const reducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
       __privateMethod(this, _ProductCardLit_instances, dispatchCard_fn).call(this, { type: "primary-activated", reducedMotion });
     };
-    const ctasWithMorphedLabel = product.ctas.map((c2, i2) => {
-      if (i2 === 0 && view.primaryCta.mode === "view-cart") {
-        return { ...c2, label: "View cart \u2192" };
+    const ctasWithMorphedLabel = product.ctas.map((c, i) => {
+      if (i === 0 && view.primaryCta.mode === "view-cart") {
+        return { ...c, label: "View cart \u2192" };
       }
-      return c2;
+      return c;
     });
+    if (__privateGet(this, _double)) {
+      return html9`<article
+        class="sc-product-card"
+        data-presentation="double"
+        data-density=${density}
+        style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;align-items:start;"
+      >
+        <div data-face="front">
+          ${renderProductCardInner(product, density, resolved, visibleFacts, [], void 0, true)}
+        </div>
+        <div data-face="back">
+          ${__privateMethod(this, _ProductCardLit_instances, renderVariantPanel_fn).call(this, view, product, {
+        pinned: true,
+        productImage: null,
+        wireBack: false
+      })}
+        </div>
+      </article>`;
+    }
     const frontContent = renderProductCardInner(
       product,
       density,
@@ -6259,19 +5992,11 @@ var ProductCardLit = class extends LitElement8 {
       onPrimaryCtaClick,
       !view.primaryCta.disabled
     );
-    const backFace = html9`<syntro-variant-panel
-        .payload=${view.panel.payload}
-        .productTitle=${product.name ?? ""}
-        .productImage=${product.image ? { src: product.image.src, alt: product.image.alt } : null}
-        .state=${view.panel.status === "error" ? "error" : view.panel.status === "ready" ? "idle" : "loading"}
-        .error=${view.panel.error}
-        .retryable=${view.panel.retryable}
-        @variant-panel-back=${this._onVariantBack}
-        @variant-panel-add=${this._onVariantAdd}
-        @variant-panel-retry=${this._onVariantRetry}
-        @variant-panel-selection-change=${this._onVariantSelectionChange}
-      ></syntro-variant-panel>
-      ${view.addError ? html9`<div data-add-to-cart-error>${view.addError}</div>` : nothing4}`;
+    const backFace = __privateMethod(this, _ProductCardLit_instances, renderVariantPanel_fn).call(this, view, product, {
+      pinned: false,
+      productImage: product.image ? { src: product.image.src, alt: product.image.alt } : null,
+      wireBack: true
+    });
     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.
@@ -6302,6 +6027,7 @@ var ProductCardLit = class extends LitElement8 {
 _effectExecutor = new WeakMap();
 _controller = new WeakMap();
 _unsubDevice = new WeakMap();
+_double = new WeakMap();
 _lastFailureFingerprint = new WeakMap();
 _reportedHealthStates = new WeakMap();
 _healthRaf = new WeakMap();
@@ -6366,6 +6092,7 @@ dispatchCard_fn = function(event) {
 _onFlipAnimationEnd = new WeakMap();
 startBind_fn = function() {
   __privateGet(this, _controller)?.destroy();
+  const previous = this.resolved;
   this.resolved = {};
   if (!this.props) {
     this.validationError = false;
@@ -6392,15 +6119,41 @@ startBind_fn = function() {
   __privateSet(this, _lastFailureFingerprint, null);
   this.validationError = false;
   const parsed = result.data;
+  this.resolved = keepResolved(previous, [parsed.product]);
   __privateSet(this, _controller, new BindController([parsed.product], (productId, kind, value) => {
-    if (value == null) return;
-    this.resolved = {
-      ...this.resolved,
-      [productId]: { ...this.resolved[productId], [kind]: value }
-    };
+    this.resolved = mergeResolved(this.resolved, productId, kind, value);
   }));
   __privateGet(this, _controller).start();
 };
+/**
+ * The `<syntro-variant-panel>` markup, shared by the flip card's back face
+ * and the double-wide presentation's side panel — everything (payload,
+ * title, state, error, retryable, the add/retry/selection-change handlers,
+ * and the addError block) is identical between the two callers. Only three
+ * things differ, so they're the only knobs: `pinned` (double-wide has no
+ * Back and no title element — see VariantPanelLit), `productImage` (the
+ * flip back face shows the product's hero image; the double-wide panel
+ * shows none, since the front face right beside it already carries the
+ * image), and `wireBack` (the double-wide panel has no Back control to
+ * fire it and the card never flips there, so wiring the handler would be
+ * live but pointless — omitted to match the panel's own no-Back contract).
+ */
+renderVariantPanel_fn = function(view, product, options) {
+  return html9`<syntro-variant-panel
+        ?pinned=${options.pinned}
+        .payload=${view.panel.payload}
+        .productTitle=${product.name ?? ""}
+        .productImage=${options.productImage}
+        .state=${view.panel.status === "error" ? "error" : view.panel.status === "ready" ? "idle" : "loading"}
+        .error=${view.panel.error}
+        .retryable=${view.panel.retryable}
+        @variant-panel-back=${options.wireBack ? this._onVariantBack : void 0}
+        @variant-panel-add=${this._onVariantAdd}
+        @variant-panel-retry=${this._onVariantRetry}
+        @variant-panel-selection-change=${this._onVariantSelectionChange}
+      ></syntro-variant-panel>
+      ${view.addError ? html9`<div data-add-to-cart-error>${view.addError}</div>` : nothing4}`;
+};
 readProductObservation_fn = function() {
   const parsed = this.props ? cardSchema.safeParse(this.props) : null;
   const rawProductId = this.props?.product?.id;
@@ -6527,7 +6280,9 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
   const factOrder = Array.from(
     /* @__PURE__ */ new Set([...CORE_FACTS, ...visibleFacts ?? VISIBLE_FACT_KEYS])
   );
-  const hasSalePrice = product.salePrice !== void 0;
+  const storeAnswered = resolved !== void 0 && "compareAt" in resolved;
+  const hasSalePrice = storeAnswered ? Boolean(resolved?.compareAt) : product.salePrice !== void 0;
+  const originalPriceText = storeAnswered ? resolved?.compareAt : product.price?.amount;
   const activePriceText = resolved?.price ?? product.salePrice?.amount ?? product.price?.amount;
   const activeCadence = hasSalePrice ? product.salePrice?.cadence : product.price?.cadence;
   const overlay = density === "compact";
@@ -6830,10 +6585,15 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
     borderRadius: "9999px",
     border: "0",
     background: "transparent",
-    color: "var(--sc-color-primary, #3d8a5e)",
+    // Accent as ink on `transparent` is ink on the HOST's ground inside a
+    // card, where vela's #723b32 measures 1.3:1. The host's own ink wins
+    // there; the merchant's accent everywhere else.
+    color: "var(--sc-host-link-color, var(--sc-color-primary, #3d8a5e))",
     fontWeight: "600",
     fontSize: "0.82rem",
-    textDecoration: "none",
+    // Once the link is the same colour as the text around it, colour alone no
+    // longer says it is a link (WCAG 1.4.1), so the host card underlines it.
+    textDecoration: "var(--sc-host-link-decoration, none)",
     textAlign: "center",
     lineHeight: "1.15",
     // Same terminal policy as the primary pill: shrink + wrap, never overflow.
@@ -6843,41 +6603,41 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
     maxWidth: "100%",
     flexShrink: "1"
   };
-  const ctaRow = html9`<div class="sc-product-card__ctas" style=${styleMap(ctasStyles)}>
-    ${ctas.map((c2, i2) => {
-    const disabled2 = c2.actionId === "add_to_cart" && !commerceAvailable;
+  const ctaRow = ctas.length === 0 ? nothing4 : html9`<div class="sc-product-card__ctas" style=${styleMap(ctasStyles)}>
+    ${ctas.map((c, i) => {
+    const disabled2 = c.actionId === "add_to_cart" && !commerceAvailable;
     const ctaStyles = {
-      ...i2 === 0 ? primaryCtaStyles : secondaryCtaStyles,
+      ...i === 0 ? primaryCtaStyles : secondaryCtaStyles,
       ...disabled2 ? { opacity: "0.5", "pointer-events": "none", cursor: "not-allowed" } : {}
     };
-    const ctaLabel = c2.label;
+    const ctaLabel = c.label;
     return html9`<a
         class="sc-product-card__cta"
-        data-product-cta=${i2 === 0 ? "primary" : "secondary"}
+        data-product-cta=${i === 0 ? "primary" : "secondary"}
         data-critical-text
-        data-variant=${c2.variant}
+        data-variant=${c.variant}
         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" : ""}
-        data-action-id=${c2.actionId ?? ""}
+        href=${c.actionId === "add_to_cart" ? "#" : c.href ?? "#"}
+        target=${c.target}
+        rel=${c.target === "_blank" ? "noopener noreferrer" : ""}
+        data-action-id=${c.actionId ?? ""}
         style=${styleMap(ctaStyles)}
-        @click=${disabled2 ? (e2) => {
-      e2.preventDefault();
+        @click=${disabled2 ? (e) => {
+      e.preventDefault();
     } : (
       // The commerce (Add-to-cart / open-picker) intent wires ONLY to
       // an actual add_to_cart CTA. A plain navigating CTA — e.g. a
       // booking-fulfilment product's "Book a consult" href, which
       // sits at i===0 too — must fall through to its own <a href>
       // and never enter the Woo/Shopify variant-lookup flow.
-      i2 === 0 && c2.actionId === "add_to_cart" && onPrimaryCtaClick ? onPrimaryCtaClick : c2.actionId === "add_to_cart" ? (e2) => {
-        e2.preventDefault();
+      i === 0 && c.actionId === "add_to_cart" && onPrimaryCtaClick ? onPrimaryCtaClick : c.actionId === "add_to_cart" ? (e) => {
+        e.preventDefault();
       } : void 0
     )}
         >${// Secondary "Product Page" link gets a trailing chevron (panel's
     // quiet-secondary affordance) unless the author already added one.
-    i2 !== 0 && !/[›>→]\s*$/.test(ctaLabel) ? `${ctaLabel} \u203A` : ctaLabel}</a
+    i !== 0 && !/[›>→]\s*$/.test(ctaLabel) ? `${ctaLabel} \u203A` : ctaLabel}</a
       >`;
   })}
   </div>`;
@@ -7080,11 +6840,11 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
           data-product-price
           style=${styleMap(priceBlockStyles)}
         >
-          ${hasSalePrice && product.price ? html9`<span
+          ${hasSalePrice && originalPriceText ? html9`<span
                   class="sc-product-card__amount-original"
                   data-product-price-original
                   style=${styleMap(priceOriginalStyles)}
-                  >${product.price.amount}</span
+                  >${originalPriceText}</span
                 >` : nothing4}
           <span
             class="sc-product-card__amount"
@@ -7246,8 +7006,8 @@ function renderProductCard(product, density, resolved, visibleFacts) {
     </article>
   `;
 }
-function onImageError(e2) {
-  const img = e2.currentTarget;
+function onImageError(e) {
+  const img = e.currentTarget;
   img.dataset.imageError = "true";
   img.removeAttribute("src");
 }
@@ -7422,6 +7182,7 @@ syncScrollCue_fn = function() {
 };
 startBind_fn2 = function() {
   __privateGet(this, _controller2)?.destroy();
+  const previous = this.resolved;
   this.resolved = {};
   if (!this.props) {
     this.validationError = false;
@@ -7437,12 +7198,9 @@ startBind_fn2 = function() {
   }
   this.validationError = false;
   __privateSet(this, _parsed, result.data);
+  this.resolved = keepResolved(previous, result.data.products);
   __privateSet(this, _controller2, new BindController(result.data.products, (productId, kind, value) => {
-    if (value == null) return;
-    this.resolved = {
-      ...this.resolved,
-      [productId]: { ...this.resolved[productId], [kind]: value }
-    };
+    this.resolved = mergeResolved(this.resolved, productId, kind, value);
   }));
   __privateGet(this, _controller2).start();
 };
@@ -7457,7 +7215,7 @@ startBind_fn2 = function() {
  */
 renderDiveDeeper_fn = function(parsed) {
   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;";
+  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-host-link-color,var(--sc-color-primary,#3d8a5e));white-space:nowrap;";
   return html10`<button
       type="button"
       class="sc-product-comparison__dive-deeper"
@@ -7502,8 +7260,8 @@ rowComplete_fn = function(row, productCount) {
 maxFields_fn = function() {
   const raw = getComputedStyle(this).getPropertyValue("--sc-comparison-max-fields").trim();
   if (!raw) return null;
-  const n2 = Number.parseInt(raw, 10);
-  return Number.isFinite(n2) && n2 > 0 ? n2 : null;
+  const n = Number.parseInt(raw, 10);
+  return Number.isFinite(n) && n > 0 ? n : null;
 };
 /**
  * Build comparison rows from the products' own `attributes` when the assistant
@@ -7520,10 +7278,10 @@ synthesizeRows_fn = function(products) {
     }
   }
   return labels.map((label) => {
-    const [a, b, c2, d] = products.map(
+    const [a, b, c, d] = products.map(
       (p) => (p.attributes ?? []).find((x) => x.label === label)?.value ?? "\u2014"
     );
-    return { label, valueA: a ?? "\u2014", valueB: b ?? "\u2014", valueC: c2, valueD: d };
+    return { label, valueA: a ?? "\u2014", valueB: b ?? "\u2014", valueC: c, valueD: d };
   });
 };
 /**
@@ -7535,8 +7293,8 @@ renderMatrix_fn = function(products, rows) {
   const cols = `minmax(62px, 0.55fr) repeat(${products.length}, minmax(0, 1fr))`;
   const compactHeaders = products.length >= 3;
   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;";
+  const labelStyle = "padding:8px 4px 8px 2px;font-weight:600;font-size:0.75rem;opacity:0.75;border-top:1px solid var(--sc-content-divider-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-content-divider-color,rgba(0,0,0,0.08));align-self:stretch;min-width:0;overflow-wrap:anywhere;";
   return html10`
       <div
         class="sc-product-comparison__matrix"
@@ -7638,8 +7396,8 @@ renderMatrix_fn = function(products, rows) {
                 >${row.label}</span
               >
               ${products.map(
-      (_p, i2) => html10`<span class="sc-product-comparison__matrix-cell" role="cell" style=${cellStyle}
-                    >${cells[i2] ?? "\u2014"}</span
+      (_p, i) => html10`<span class="sc-product-comparison__matrix-cell" role="cell" style=${cellStyle}
+                    >${cells[i] ?? "\u2014"}</span
                   >`
     )}
             </div>
@@ -7655,10 +7413,167 @@ ProductComparisonLit.properties = {
   scrollFade: { state: true }
 };
 
-// src/widgets/ProductGridLit.ts
+// src/widgets/ProductDetailsLit.ts
 import { html as html11, LitElement as LitElement10, nothing as nothing6 } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+var EMPTY_MARKER = html11`<span data-sc-empty hidden></span>`;
+var DETAILS_CSS = `
+.pd {
+  max-width: 1040px;
+  margin: 0 auto 16px;
+  display: grid;
+  gap: 16px;
+}
+.pd-lead p {
+  margin: 0 0 6px;
+}
+.pd-eyebrow {
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  opacity: 0.75;
+}
+.pd-badge {
+  margin-left: 6px;
+  padding: 1px 8px;
+  border-radius: 9999px;
+  box-shadow: inset 0 0 0 1px currentColor;
+  text-transform: none;
+  letter-spacing: 0;
+}
+.pd-rating {
+  font-size: 0.875rem;
+}
+.pd-desc {
+  line-height: 1.5;
+  max-width: 70ch;
+}
+.pd-benefits {
+  margin: 4px 0 0;
+  padding-left: 18px;
+}
+.pd-cols {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
+  gap: 16px;
+  padding: 14px 0;
+  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+  font-size: 0.875rem;
+}
+.pd-cols h3 {
+  margin: 0 0 6px;
+  font-size: 0.8125rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  opacity: 0.8;
+}
+.pd-cols p,
+.pd-cols ul {
+  margin: 0 0 4px;
+}
+.pd-cols ul {
+  padding-left: 18px;
+}
+`;
+var ProductDetailsLit = class extends LitElement10 {
+  constructor() {
+    super(...arguments);
+    this._productId = "";
+    this._details = null;
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    ensureStylesInRoot(this, "syntro-product-details-style", DETAILS_CSS);
+  }
+  /**
+   * Widget props (the `adaptive-product:details` mountable sets `el.props`
+   * before appending). Starts the details fetch immediately — reading
+   * `productId` off the adapter, not off any attribute — and keys the
+   * in-flight request by productId so a stale answer arriving after a later
+   * `props` set (e.g. the card swapped to a different product) is dropped.
+   */
+  set props(value) {
+    const id = value?.productId ?? "";
+    this._productId = id;
+    this._details = null;
+    if (!id) return;
+    const adapter = getProductPlatformAdapter();
+    if (typeof adapter?.fetchProductDetails !== "function") return;
+    adapter.fetchProductDetails(id).then((details) => {
+      if (this._productId !== id) return;
+      this._details = details;
+    }).catch(() => {
+    });
+  }
+  get props() {
+    return this._productId ? { productId: this._productId } : void 0;
+  }
+  render() {
+    const details = this._details;
+    if (!details) return EMPTY_MARKER;
+    const d = details.details;
+    const eyebrow = [d?.category, d?.gender].filter(Boolean).join(" \xB7 ");
+    const badges = d?.badges ?? [];
+    const benefits = d?.benefits ?? [];
+    const moreBenefits = benefits.slice(3);
+    const hasFabric = Boolean(d?.fabric || moreBenefits.length);
+    const hasCols = Boolean(
+      d && (hasFabric || (d.care?.length ?? 0) > 0 || d.shipping || d.returns)
+    );
+    const hasLead = Boolean(
+      eyebrow || badges.length || details.rating || details.description || benefits.length
+    );
+    if (!hasLead && !hasCols) return EMPTY_MARKER;
+    return html11`
+      <section class="pd" data-product-details aria-label="Product details">
+        <div class="pd-lead">
+          ${eyebrow || badges.length ? html11`<p class="pd-eyebrow">
+                  ${eyebrow}${badges.map((b) => html11` <span class="pd-badge">${b}</span>`)}
+                </p>` : nothing6}
+          ${details.rating ? html11`<p class="pd-rating">
+                  ★ ${details.rating.value} · ${details.rating.count.toLocaleString("en-US")} reviews
+                </p>` : nothing6}
+          ${details.description ? html11`<div class="pd-desc">${unsafeHTML(sanitizeProductDescription(details.description))}</div>` : nothing6}
+          ${benefits.length ? html11`<ul class="pd-benefits">
+                  ${benefits.slice(0, 3).map((b) => html11`<li>${b}</li>`)}
+                </ul>` : nothing6}
+        </div>
+        ${hasCols ? html11`<div class="pd-cols">
+                ${hasFabric ? html11`<div>
+                        <h3>Fabric &amp; benefits</h3>
+                        ${d?.fabric ? html11`<p>${d.fabric}</p>` : nothing6}
+                        ${moreBenefits.length ? html11`<ul>
+                                ${moreBenefits.map((b) => html11`<li>${b}</li>`)}
+                              </ul>` : nothing6}
+                      </div>` : nothing6}
+                <div>
+                  <h3>Shipping &amp; returns</h3>
+                  ${d?.shipping ? html11`<p>${d.shipping}</p>` : nothing6}
+                  ${d?.returns ? html11`<p>${d.returns}</p>` : nothing6}
+                </div>
+                <div>
+                  <h3>Care</h3>
+                  ${d?.care?.length ? html11`<ul>
+                          ${d.care.map((c) => html11`<li>${c}</li>`)}
+                        </ul>` : nothing6}
+                </div>
+              </div>` : nothing6}
+      </section>
+    `;
+  }
+};
+ProductDetailsLit.properties = {
+  _details: { state: true }
+};
+
+// src/widgets/ProductGridLit.ts
+import { html as html12, LitElement as LitElement11, nothing as nothing7 } from "lit";
 var _controller3, _ProductGridLit_instances, startBind_fn3;
-var ProductGridLit = class extends LitElement10 {
+var ProductGridLit = class extends LitElement11 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _ProductGridLit_instances);
@@ -7684,20 +7599,20 @@ var ProductGridLit = class extends LitElement10 {
     __privateGet(this, _controller3)?.destroy();
   }
   render() {
-    if (this.validationError || !this.props) return html11``;
+    if (this.validationError || !this.props) return html12``;
     const parsed = gridSchema.safeParse(this.props);
-    if (!parsed.success) return html11``;
+    if (!parsed.success) return html12``;
     const { products, desktopColumns, heading } = parsed.data;
-    return html11`
+    return html12`
       <section class="sc-product-grid">
-        ${heading ? html11`<h2 data-grid-heading class="sc-product-grid__heading">${heading}</h2>` : nothing6}
+        ${heading ? html12`<h2 data-grid-heading class="sc-product-grid__heading">${heading}</h2>` : nothing7}
         <div
           data-grid-root
           class="sc-product-grid__cells"
           style=${`--sc-product-grid-cols:${desktopColumns}`}
         >
           ${products.map(
-      (p) => html11`<div data-grid-cell class="sc-product-grid__cell">
+      (p) => html12`<div data-grid-cell class="sc-product-grid__cell">
               ${renderProductCard(p, "standard", this.resolved[p.id])}
             </div>`
     )}
@@ -7710,6 +7625,7 @@ _controller3 = new WeakMap();
 _ProductGridLit_instances = new WeakSet();
 startBind_fn3 = function() {
   __privateGet(this, _controller3)?.destroy();
+  const previous = this.resolved;
   this.resolved = {};
   if (!this.props) {
     this.validationError = false;
@@ -7722,12 +7638,9 @@ startBind_fn3 = function() {
     return;
   }
   this.validationError = false;
+  this.resolved = keepResolved(previous, result.data.products);
   __privateSet(this, _controller3, new BindController(result.data.products, (productId, kind, value) => {
-    if (value == null) return;
-    this.resolved = {
-      ...this.resolved,
-      [productId]: { ...this.resolved[productId], [kind]: value }
-    };
+    this.resolved = mergeResolved(this.resolved, productId, kind, value);
   }));
   __privateGet(this, _controller3).start();
 };
@@ -7738,9 +7651,9 @@ ProductGridLit.properties = {
 };
 
 // src/widgets/ProductHeroLit.ts
-import { html as html12, LitElement as LitElement11, nothing as nothing7 } from "lit";
+import { html as html13, LitElement as LitElement12, nothing as nothing8 } from "lit";
 var _controller4, _ProductHeroLit_instances, startBind_fn4;
-var ProductHeroLit = class extends LitElement11 {
+var ProductHeroLit = class extends LitElement12 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _ProductHeroLit_instances);
@@ -7766,9 +7679,9 @@ var ProductHeroLit = class extends LitElement11 {
     __privateGet(this, _controller4)?.destroy();
   }
   render() {
-    if (this.validationError || !this.props) return html12``;
+    if (this.validationError || !this.props) return html13``;
     const parsed = heroSchema.safeParse(this.props);
-    if (!parsed.success) return html12``;
+    if (!parsed.success) return html13``;
     const { product, layout, longCopy } = parsed.data;
     const resolved = this.resolved[product.id];
     const imgSrc = resolved?.image ?? product.image?.src;
@@ -7777,15 +7690,15 @@ var ProductHeroLit = class extends LitElement11 {
     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 html12`
+    return html13`
       <section class="sc-product-hero" data-hero-layout=${layout} style=${sectionStyles}>
-        ${imgSrc ? html12`<img
+        ${imgSrc ? html13`<img
                 class="sc-product-hero__image"
                 src=${imgSrc}
                 alt=${product.image?.alt ?? product.name}
                 loading="lazy"
                 style=${imageStyles}
-              />` : html12`<div
+              />` : html13`<div
                 class="sc-product-hero__image"
                 data-product-image-standin
                 aria-hidden="true"
@@ -7793,25 +7706,25 @@ var ProductHeroLit = class extends LitElement11 {
               >${standinMonogram(product.name)}</div>`}
         <div class="sc-product-hero__content" style=${contentStyles}>
           <h2 class="sc-product-hero__name">${product.name}</h2>
-          ${product.tagline ? html12`<p class="sc-product-hero__tagline">${product.tagline}</p>` : nothing7}
-          ${product.price ? html12`<p class="sc-product-hero__price">
-                ${priceText}${product.price.cadence ? html12` <small>${product.price.cadence}</small>` : nothing7}
-              </p>` : nothing7}
-          ${longCopy ? html12`<div
+          ${product.tagline ? html13`<p class="sc-product-hero__tagline">${product.tagline}</p>` : nothing8}
+          ${product.price ? html13`<p class="sc-product-hero__price">
+                ${priceText}${product.price.cadence ? html13` <small>${product.price.cadence}</small>` : nothing8}
+              </p>` : nothing8}
+          ${longCopy ? html13`<div
                 data-hero-longcopy
                 class="sc-product-hero__longcopy"
                 .innerHTML=${sanitizeHtml(longCopy)}
-              ></div>` : nothing7}
+              ></div>` : nothing8}
           <div class="sc-product-hero__ctas">
             ${product.ctas.map(
-      (c2, i2) => html12`<a
+      (c, i) => html13`<a
                 class="sc-product-hero__cta"
-                data-product-cta=${i2 === 0 ? "primary" : "secondary"}
-                data-variant=${c2.variant}
-                href=${c2.href ?? "#"}
-                target=${c2.target}
-                rel=${c2.target === "_blank" ? "noopener noreferrer" : ""}
-                >${c2.label}</a
+                data-product-cta=${i === 0 ? "primary" : "secondary"}
+                data-variant=${c.variant}
+                href=${c.href ?? "#"}
+                target=${c.target}
+                rel=${c.target === "_blank" ? "noopener noreferrer" : ""}
+                >${c.label}</a
               >`
     )}
           </div>
@@ -7824,6 +7737,7 @@ _controller4 = new WeakMap();
 _ProductHeroLit_instances = new WeakSet();
 startBind_fn4 = function() {
   __privateGet(this, _controller4)?.destroy();
+  const previous = this.resolved;
   this.resolved = {};
   if (!this.props) {
     this.validationError = false;
@@ -7836,12 +7750,9 @@ startBind_fn4 = function() {
     return;
   }
   this.validationError = false;
+  this.resolved = keepResolved(previous, [result.data.product]);
   __privateSet(this, _controller4, new BindController([result.data.product], (productId, kind, value) => {
-    if (value == null) return;
-    this.resolved = {
-      ...this.resolved,
-      [productId]: { ...this.resolved[productId], [kind]: value }
-    };
+    this.resolved = mergeResolved(this.resolved, productId, kind, value);
   }));
   __privateGet(this, _controller4).start();
 };
@@ -7852,15 +7763,17 @@ ProductHeroLit.properties = {
 };
 
 // src/widgets/ProductRecoCarouselLit.ts
-import { html as html13, LitElement as LitElement12, nothing as nothing8 } from "lit";
+import { html as html14, LitElement as LitElement13, nothing as nothing9 } from "lit";
 import { styleMap as styleMap2 } from "lit/directives/style-map.js";
-var _ProductRecoCarouselLit_instances, healthProbe_fn3;
-var ProductRecoCarouselLit = class extends LitElement12 {
+var _unwatch3, _ProductRecoCarouselLit_instances, healthProbe_fn3, watchPrices_fn, stopWatching_fn;
+var ProductRecoCarouselLit = class extends LitElement13 {
   constructor() {
     super();
     __privateAdd(this, _ProductRecoCarouselLit_instances);
+    __privateAdd(this, _unwatch3, []);
     this.props = void 0;
     this._parsed = void 0;
+    this._live = {};
     new RenderHealthController(this, () => __privateMethod(this, _ProductRecoCarouselLit_instances, healthProbe_fn3).call(this));
   }
   createRenderRoot() {
@@ -7870,32 +7783,54 @@ var ProductRecoCarouselLit = class extends LitElement12 {
     if (changed.has("props")) {
       const r = this.props ? recoSchema.safeParse(this.props) : void 0;
       this._parsed = r?.success ? r.data : void 0;
+      this._live = {};
+      if (this.isConnected) __privateMethod(this, _ProductRecoCarouselLit_instances, watchPrices_fn).call(this);
     }
   }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateMethod(this, _ProductRecoCarouselLit_instances, watchPrices_fn).call(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateMethod(this, _ProductRecoCarouselLit_instances, stopWatching_fn).call(this);
+  }
   render() {
     const items = this._parsed?.items ?? [];
-    if (items.length === 0) return html13``;
-    return html13`
+    if (items.length === 0) return html14``;
+    return html14`
       <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) => html13`
+          ${items.map((it) => {
+      const shownPrice = it.product_id && this._live[it.product_id] || it.price;
+      const label = [it.name, shownPrice, it.hook].filter(Boolean).join(", ");
+      return html14`
             <div role="listitem" style="display:contents;">
               <a data-reco-item data-product-cta="primary" href=${it.pdp_href}
+                 aria-label=${label || nothing9}
                  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 ? html13`<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}
+                ${it.image_url ? html14`<img src=${it.image_url} alt=${it.hook ?? "Recommended product"} loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">` : (
+        // No photo from the store: the same branded stand-in the
+        // card and comparison paint (imageStandin.ts), never a
+        // flat grey box. Decorative: the product name is shown as
+        // text below it. Nothing to name it by -> no monogram (a
+        // '?' reads as broken).
+        html14`<div data-product-image-standin aria-hidden="true" style="position:absolute;inset:0;background:${IMAGE_STANDIN_BACKGROUND};">${it.name || it.hook ? standinMonogram(it.name || it.hook) : nothing9}</div>`
+      )}
                 <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 ? html13`<span style="display:block;font-weight:700;font-size:0.9rem;">${it.price}</span>` : nothing8}
-                  ${it.hook ? html13`<span style="display:block;font-size:0.72rem;line-height:1.2;opacity:.95;">${it.hook}</span>` : nothing8}
+                  ${!it.image_url && it.name ? html14`<span data-reco-name style="display:block;font-weight:700;font-size:0.82rem;line-height:1.2;margin-bottom:2px;">${it.name}</span>` : nothing9}
+                  ${shownPrice ? html14`<span style="display:block;font-weight:700;font-size:0.9rem;">${shownPrice}</span>` : nothing9}
+                  ${it.hook ? html14`<span style="display:block;font-size:0.72rem;line-height:1.2;opacity:.95;">${it.hook}</span>` : nothing9}
                 </span>
               </a>
-            </div>`
-    )}
+            </div>`;
+    })}
         </div>
       </section>`;
   }
 };
+_unwatch3 = new WeakMap();
 _ProductRecoCarouselLit_instances = new WeakSet();
 /** Measure only the SETTLED carousel (items rendered). An empty carousel
  *  renders nothing and is never "blank". NON-PII stateKey. */
@@ -7911,7 +7846,30 @@ healthProbe_fn3 = function() {
     widgetKind: "adaptive-product:reco"
   };
 };
-ProductRecoCarouselLit.properties = { props: { attribute: false }, _parsed: { state: true } };
+/** The store's live price for each item, now and whenever the runtime
+ *  publishes a commerce adapter; an item the store cannot price keeps the
+ *  catalog price the server sent. */
+watchPrices_fn = function() {
+  __privateMethod(this, _ProductRecoCarouselLit_instances, stopWatching_fn).call(this);
+  for (const item of this._parsed?.items ?? []) {
+    const id = item.product_id;
+    if (!id || !item.price) continue;
+    __privateGet(this, _unwatch3).push(
+      watchLivePrice(id, (live) => {
+        this._live = { ...this._live, [id]: live.price };
+      })
+    );
+  }
+};
+stopWatching_fn = function() {
+  for (const stop of __privateGet(this, _unwatch3)) stop();
+  __privateSet(this, _unwatch3, []);
+};
+ProductRecoCarouselLit.properties = {
+  props: { attribute: false },
+  _parsed: { state: true },
+  _live: { state: true }
+};
 ProductRecoCarouselLit._testing = {
   healthProbe: (host) => {
     var _a;
@@ -7922,7 +7880,7 @@ if (!customElements.get("syntro-product-reco-carousel"))
   customElements.define("syntro-product-reco-carousel", ProductRecoCarouselLit);
 
 // src/widgets/PdpTrendingNewsLit.ts
-import { html as html14, LitElement as LitElement13 } from "lit";
+import { html as html15, LitElement as LitElement14 } from "lit";
 
 // src/widgets/entrance.ts
 function armEntranceSettle(onSettle, container, settleMs, fastPath = false) {
@@ -7950,14 +7908,6 @@ function armEntranceSettle(onSettle, container, settleMs, fastPath = false) {
 }
 
 // src/widgets/PdpTrendingNewsLit.ts
-function ensureTrendingNewsStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-trending-news-style")) return;
-  const style = document.createElement("style");
-  style.id = "syntro-pdp-trending-news-style";
-  style.textContent = TRENDING_NEWS_CSS;
-  document.head.appendChild(style);
-}
 var TRENDING_NEWS_CSS = `
 .pdp-trending-news {
   --tn-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
@@ -8163,11 +8113,12 @@ var TRENDING_NEWS_CSS = `
   outline: none;
 }
 .pdp-tn-headline-link::after {
-  content: ' \\2197';
+  /* Decoration: empty alternative text keeps it out of the link's name. */
+  content: ' \\2197' / '';
   font-family: var(--tn-sans);
   font-size: 0.65em;
   letter-spacing: 0;
-  color: var(--tn-primary);
+  color: var(--syntro-pdp-primary-ink, var(--tn-primary));
   opacity: 0.55;
   vertical-align: 0.18em;
   margin-left: 0.2em;
@@ -8186,7 +8137,7 @@ var TRENDING_NEWS_CSS = `
   font-style: italic;
   font-size: 11px;
   letter-spacing: 0.06em;
-  color: color-mix(in srgb, var(--tn-primary) 70%, transparent);
+  color: var(--syntro-pdp-primary-ink, color-mix(in srgb, var(--tn-primary) 70%, transparent));
   padding: 3px 9px 3px 8px;
   border-radius: 999px;
   background: color-mix(in srgb, var(--tn-primary) 12%, transparent);
@@ -8269,7 +8220,7 @@ var TRENDING_NEWS_CSS = `
   }
 }
 `;
-var PdpTrendingNewsLit = class extends LitElement13 {
+var PdpTrendingNewsLit = class extends LitElement14 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -8282,7 +8233,7 @@ var PdpTrendingNewsLit = class extends LitElement13 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureTrendingNewsStyles();
+    ensureStylesInRoot(this, "syntro-pdp-trending-news-style", TRENDING_NEWS_CSS);
     if (this._entering) this.requestUpdate();
   }
   disconnectedCallback() {
@@ -8305,7 +8256,7 @@ var PdpTrendingNewsLit = class extends LitElement13 {
   }
   render() {
     if (!this.data) {
-      return html14`<div data-skeleton class="pdp-trending-news-skeleton">
+      return html15`<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>
@@ -8315,7 +8266,7 @@ var PdpTrendingNewsLit = class extends LitElement13 {
     const items = this.data.items;
     const featured = items[0];
     const rest = items.slice(1);
-    return html14`
+    return html15`
       <section
         class="${this._entering ? "pdp-trending-news is-entering" : "pdp-trending-news"}"
         aria-label="Trending news"
@@ -8332,7 +8283,7 @@ var PdpTrendingNewsLit = class extends LitElement13 {
           <p class="pdp-tn-blurb">${featured.blurb}</p>
         </article>
         ${rest.map(
-      (item) => html14`
+      (item) => html15`
             <article class="pdp-tn-card">
               <div class="pdp-tn-meta">
                 <span class="pdp-tn-dot" aria-hidden="true"></span>
@@ -8354,8 +8305,8 @@ PdpTrendingNewsLit.properties = {
   _entering: { state: true }
 };
 function renderHeadlineLink(item) {
-  if (!item.url) return html14`${item.headline}`;
-  return html14`<a
+  if (!item.url) return html15`${item.headline}`;
+  return html15`<a
     class="pdp-tn-headline-link"
     href=${item.url}
     target="_blank"
@@ -8368,15 +8319,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-tre
 }
 
 // src/widgets/PdpTrendingNewsMagazineLit.ts
-import { html as html15, LitElement as LitElement14 } from "lit";
-function ensureMagazineStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-trending-news-magazine-style")) return;
-  const style = document.createElement("style");
-  style.id = "syntro-pdp-trending-news-magazine-style";
-  style.textContent = MAGAZINE_CSS;
-  document.head.appendChild(style);
-}
+import { html as html16, LitElement as LitElement15 } from "lit";
 var MAGAZINE_CSS = `
 .pdp-tn-mag {
   --tn-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
@@ -8548,7 +8491,7 @@ var MAGAZINE_CSS = `
   }
 }
 `;
-var PdpTrendingNewsMagazineLit = class extends LitElement14 {
+var PdpTrendingNewsMagazineLit = class extends LitElement15 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -8558,17 +8501,17 @@ var PdpTrendingNewsMagazineLit = class extends LitElement14 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureMagazineStyles();
+    ensureStylesInRoot(this, "syntro-pdp-trending-news-magazine-style", MAGAZINE_CSS);
   }
   render() {
     if (!this.data) {
-      return html15`<div aria-busy="true" class="pdp-tn-mag" style="opacity:0.5;">…</div>`;
+      return html16`<div aria-busy="true" class="pdp-tn-mag" style="opacity:0.5;">…</div>`;
     }
     const items = this.data.items;
     const [lead, ...rest] = items;
-    return html15`
+    return html16`
       <section class="pdp-tn-mag" aria-label="Trending news">
-        ${lead ? html15`<article class="pdp-tn-mag__lead">
+        ${lead ? html16`<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}
@@ -8577,7 +8520,7 @@ var PdpTrendingNewsMagazineLit = class extends LitElement14 {
               <p class="pdp-tn-mag__blurb">${lead.blurb}</p>
             </article>` : ""}
         ${rest.map(
-      (it) => html15`<article class="pdp-tn-mag__item">
+      (it) => html16`<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}
@@ -8594,8 +8537,8 @@ PdpTrendingNewsMagazineLit.properties = {
   data: { attribute: false }
 };
 function renderHeadlineLink2(item) {
-  if (!item.url) return html15`${item.headline}`;
-  return html15`<a
+  if (!item.url) return html16`${item.headline}`;
+  return html16`<a
     class="pdp-tn-mag__headline-link"
     href=${item.url}
     target="_blank"
@@ -8608,15 +8551,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-tre
 }
 
 // src/widgets/PdpTrendingNewsHeroLit.ts
-import { html as html16, LitElement as LitElement15 } from "lit";
-function ensureHeroStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-trending-news-hero-style")) return;
-  const style = document.createElement("style");
-  style.id = "syntro-pdp-trending-news-hero-style";
-  style.textContent = HERO_CSS;
-  document.head.appendChild(style);
-}
+import { html as html17, LitElement as LitElement16 } from "lit";
 var HERO_CSS = `
 .pdp-tn-hero {
   --tn-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
@@ -8799,7 +8734,7 @@ var HERO_CSS = `
   }
 }
 `;
-var PdpTrendingNewsHeroLit = class extends LitElement15 {
+var PdpTrendingNewsHeroLit = class extends LitElement16 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -8809,15 +8744,15 @@ var PdpTrendingNewsHeroLit = class extends LitElement15 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureHeroStyles();
+    ensureStylesInRoot(this, "syntro-pdp-trending-news-hero-style", HERO_CSS);
   }
   render() {
     if (!this.data) {
-      return html16`<div aria-busy="true" class="pdp-tn-hero" style="opacity:0.5;">…</div>`;
+      return html17`<div aria-busy="true" class="pdp-tn-hero" style="opacity:0.5;">…</div>`;
     }
     const [lead, ...rest] = this.data.items;
-    if (!lead) return html16``;
-    return html16`
+    if (!lead) return html17``;
+    return html17`
       <section class="pdp-tn-hero" aria-label="Trending news">
         <article class="pdp-tn-hero__panel">
           <blockquote class="pdp-tn-hero__quote">${lead.blurb}</blockquote>
@@ -8828,9 +8763,9 @@ var PdpTrendingNewsHeroLit = class extends LitElement15 {
           </footer>
           <p class="pdp-tn-hero__headline">${renderHeadlineLink3(lead)}</p>
         </article>
-        ${rest.length ? html16`<div class="pdp-tn-hero__followon">
+        ${rest.length ? html17`<div class="pdp-tn-hero__followon">
               ${rest.map(
-      (it) => html16`<div class="pdp-tn-hero__row">
+      (it) => html17`<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>`
@@ -8844,8 +8779,8 @@ PdpTrendingNewsHeroLit.properties = {
   data: { attribute: false }
 };
 function renderHeadlineLink3(item) {
-  if (!item.url) return html16`${item.headline}`;
-  return html16`<a
+  if (!item.url) return html17`${item.headline}`;
+  return html17`<a
     class="pdp-tn-hero__headline-link"
     href=${item.url}
     target="_blank"
@@ -8858,15 +8793,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-tre
 }
 
 // src/widgets/PdpPeerFeedMasonryLit.ts
-import { html as html17, LitElement as LitElement16 } from "lit";
-function ensureMasonryStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-peer-feed-masonry-style")) return;
-  const style = document.createElement("style");
-  style.id = "syntro-pdp-peer-feed-masonry-style";
-  style.textContent = MASONRY_CSS;
-  document.head.appendChild(style);
-}
+import { html as html18, LitElement as LitElement17 } from "lit";
 var MASONRY_CSS = `
 .pdp-pf-mas {
   --pf-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
@@ -8997,12 +8924,12 @@ var MASONRY_CSS = `
   padding-top: 10px;
 }
 `;
-function personaHue(s4) {
+function personaHue(s) {
   let h = 0;
-  for (let i2 = 0; i2 < s4.length; i2++) h = h * 31 + s4.charCodeAt(i2) | 0;
+  for (let i = 0; i < s.length; i++) h = h * 31 + s.charCodeAt(i) | 0;
   return Math.abs(h) % 360;
 }
-var PdpPeerFeedMasonryLit = class extends LitElement16 {
+var PdpPeerFeedMasonryLit = class extends LitElement17 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -9012,17 +8939,17 @@ var PdpPeerFeedMasonryLit = class extends LitElement16 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureMasonryStyles();
+    ensureStylesInRoot(this, "syntro-pdp-peer-feed-masonry-style", MASONRY_CSS);
   }
   render() {
     if (!this.data) {
-      return html17`<div aria-busy="true" class="pdp-pf-mas" style="opacity:0.5;">…</div>`;
+      return html18`<div aria-busy="true" class="pdp-pf-mas" style="opacity:0.5;">…</div>`;
     }
-    return html17`
+    return html18`
       <section class="pdp-pf-mas" aria-label="Peer voices">
         <div class="pdp-pf-mas__grid">
           ${this.data.peers.map(
-      (p) => html17`<article
+      (p) => html18`<article
               class="pdp-pf-mas__card"
               style=${`--pf-avatar-hue: ${personaHue(p.persona)};`}
             >
@@ -9050,15 +8977,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-pee
 }
 
 // src/widgets/PdpPeerFeedCarouselLit.ts
-import { html as html18, LitElement as LitElement17, svg } from "lit";
-function ensureCarouselStyles2() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-peer-feed-carousel-style")) return;
-  const style = document.createElement("style");
-  style.id = "syntro-pdp-peer-feed-carousel-style";
-  style.textContent = CAROUSEL_CSS2;
-  document.head.appendChild(style);
-}
+import { html as html19, LitElement as LitElement18, svg } from "lit";
 var CAROUSEL_CSS2 = `
 /* The custom-element tag itself + its slot-mount parent must declare
    display:block AND min-width:0 so they participate in the grid cell's
@@ -9227,12 +9146,12 @@ syntro-pdp-peer-feed-carousel {
 var GLYPHS = ["waveform", "gauge", "leaf", "spark"];
 function glyphFor(persona) {
   let h = 0;
-  for (let i2 = 0; i2 < persona.length; i2++) h = h * 31 + persona.charCodeAt(i2) | 0;
+  for (let i = 0; i < persona.length; i++) h = h * 31 + persona.charCodeAt(i) | 0;
   return GLYPHS[Math.abs(h) % GLYPHS.length];
 }
 function glyphHue(persona) {
   let h = 0;
-  for (let i2 = 0; i2 < persona.length; i2++) h = h * 17 + persona.charCodeAt(i2) | 0;
+  for (let i = 0; i < persona.length; i++) h = h * 17 + persona.charCodeAt(i) | 0;
   return Math.abs(h) % 360;
 }
 function renderGlyph(kind) {
@@ -9266,7 +9185,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 LitElement17 {
+var PdpPeerFeedCarouselLit = class extends LitElement18 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -9276,19 +9195,19 @@ var PdpPeerFeedCarouselLit = class extends LitElement17 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureCarouselStyles2();
+    ensureStylesInRoot(this, "syntro-pdp-peer-feed-carousel-style", CAROUSEL_CSS2);
   }
   render() {
     if (!this.data) {
-      return html18`<div aria-busy="true" class="pdp-pf-car" style="opacity:0.5;">…</div>`;
+      return html19`<div aria-busy="true" class="pdp-pf-car" style="opacity:0.5;">…</div>`;
     }
-    return html18`
+    return html19`
       <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 html18`<article class="pdp-pf-car__card" style=${`--pf-glyph-hue: ${hue};`}>
+      return html19`<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>
@@ -9313,7 +9232,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-pee
 }
 
 // src/widgets/PdpChartLit.ts
-import { html as html19, LitElement as LitElement18, nothing as nothing9, svg as svg2 } from "lit";
+import { html as html20, LitElement as LitElement19, nothing as nothing10, 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");
@@ -9323,7 +9242,7 @@ function formatNum(v) {
   return decPart ? `${formatted}.${decPart}` : formatted;
 }
 function buildComparisonMatrix(data) {
-  const colLabels = data.series.map((s4) => s4.name);
+  const colLabels = data.series.map((s) => s.name);
   const seenRows = /* @__PURE__ */ new Map();
   const rowLabels = [];
   for (const series of data.series) {
@@ -9391,7 +9310,7 @@ function niceTicks(yMax) {
   const rawStep = yMax / targetCount;
   const mag = 10 ** Math.floor(Math.log10(rawStep));
   const niceSteps = [1, 2, 2.5, 5, 10];
-  const step = niceSteps.find((s4) => s4 * mag >= rawStep);
+  const step = niceSteps.find((s) => s * mag >= rawStep);
   const niceStep = step * mag;
   const ticks = [];
   for (let v = 0; v <= yMax + niceStep * 1e-3; v += niceStep) {
@@ -9402,8 +9321,8 @@ function niceTicks(yMax) {
 function buildLinePaths(data) {
   const seenX = /* @__PURE__ */ new Map();
   const xLabels = [];
-  for (const s4 of data.series) {
-    for (const p of s4.points) {
+  for (const s of data.series) {
+    for (const p of s.points) {
       if (!seenX.has(p.x)) {
         seenX.set(p.x, xLabels.length);
         xLabels.push(p.x);
@@ -9412,16 +9331,16 @@ function buildLinePaths(data) {
   }
   const denom = Math.max(1, xLabels.length - 1);
   let yMax = 0;
-  for (const s4 of data.series) {
-    for (const p of s4.points) {
+  for (const s of data.series) {
+    for (const p of s.points) {
       if (p.y > yMax) yMax = p.y;
     }
   }
   if (yMax === 0) yMax = 1;
-  const seriesOut = data.series.map((s4, sIdx) => ({
-    name: s4.name,
+  const seriesOut = data.series.map((s, sIdx) => ({
+    name: s.name,
     seriesIdx: sIdx,
-    points: s4.points.map((p) => {
+    points: s.points.map((p) => {
       const xIdx = seenX.get(p.x);
       return {
         cx: xIdx / denom * 100,
@@ -9433,14 +9352,6 @@ function buildLinePaths(data) {
   }));
   return { series: seriesOut, xLabels, yMax };
 }
-function ensureChartStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-chart-style")) return;
-  const style = document.createElement("style");
-  style.id = "syntro-pdp-chart-style";
-  style.textContent = CHART_CSS;
-  document.head.appendChild(style);
-}
 var CHART_CSS = `
 .pdp-chart-frame {
   --pc-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
@@ -9808,12 +9719,12 @@ var CHART_CSS = `
   background: linear-gradient(90deg, color-mix(in srgb, var(--pc-primary) 12%, transparent), transparent 80%);
 }
 .pdp-chart-table tbody tr.is-winning td:first-child {
-  color: color-mix(in srgb, var(--pc-primary) 70%, white 30%);
+  color: var(--syntro-pdp-primary-ink, color-mix(in srgb, var(--pc-primary) 70%, white 30%));
 }
 .pdp-chart-table tbody tr.is-winning td:first-child::before {
   content: '\\2726  ';
   font-size: 11px;
-  color: color-mix(in srgb, var(--pc-primary) 60%, white 40%);
+  color: var(--syntro-pdp-primary-ink, color-mix(in srgb, var(--pc-primary) 60%, white 40%));
   vertical-align: 1px;
   margin-right: 2px;
 }
@@ -9936,7 +9847,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 LitElement18 {
+var PdpChartLit = class extends LitElement19 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _PdpChartLit_instances);
@@ -9949,7 +9860,7 @@ var PdpChartLit = class extends LitElement18 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureChartStyles();
+    ensureStylesInRoot(this, "syntro-pdp-chart-style", CHART_CSS);
     if (this._entering) this.requestUpdate();
   }
   disconnectedCallback() {
@@ -9972,16 +9883,16 @@ var PdpChartLit = class extends LitElement18 {
   }
   render() {
     if (!this.data) {
-      return html19`<div data-skeleton class="pdp-chart-skeleton">
+      return html20`<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>`;
     }
     const isTable = this.data.viz_kind === "table";
-    const allSeriesOnePoint = this.data.series.every((s4) => s4.points.length <= 1);
+    const allSeriesOnePoint = this.data.series.every((s) => s.points.length <= 1);
     const effectiveKind = isTable ? "table" : this.data.viz_kind === "line" && !allSeriesOnePoint ? "line" : "bar";
     const isMultiSeries = this.data.series.length > 1;
-    return html19`
+    return html20`
       <section
         class="${this._entering ? "pdp-chart pdp-chart-frame is-entering" : "pdp-chart pdp-chart-frame"}"
         aria-label="${this.data.title}"
@@ -9992,11 +9903,11 @@ var PdpChartLit = class extends LitElement18 {
         </div>
         <h3 class="pdp-chart-title">${this.data.title}</h3>
 
-        ${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 ? html19`<p class="pdp-chart-rationale">${this.data.rationale}</p>` : nothing9}
+        ${effectiveKind === "table" ? __privateMethod(this, _PdpChartLit_instances, renderTable_fn).call(this) : nothing10}
+        ${effectiveKind === "bar" ? __privateMethod(this, _PdpChartLit_instances, renderBars_fn).call(this) : nothing10}
+        ${effectiveKind === "line" ? __privateMethod(this, _PdpChartLit_instances, renderLine_fn).call(this) : nothing10}
+        ${effectiveKind !== "table" && isMultiSeries ? __privateMethod(this, _PdpChartLit_instances, renderLegend_fn).call(this) : nothing10}
+        ${this.data.rationale ? html20`<p class="pdp-chart-rationale">${this.data.rationale}</p>` : nothing10}
       </section>
     `;
   }
@@ -10004,17 +9915,17 @@ var PdpChartLit = class extends LitElement18 {
 _PdpChartLit_instances = new WeakSet();
 renderLegend_fn = function() {
   const data = this.data;
-  return html19`
+  return html20`
       <ol class="pdp-chart-legend" aria-label="Legend">
         ${data.series.map(
-    (s4, idx) => html19`
+    (s, idx) => html20`
             <li class="pdp-chart-legend-item">
               <span
                 class="pdp-chart-legend-swatch"
                 style="background:${colorVar(idx)}"
                 aria-hidden="true"
               ></span>
-              <span>${s4.name}</span>
+              <span>${s.name}</span>
             </li>
           `
   )}
@@ -10023,22 +9934,22 @@ renderLegend_fn = function() {
 };
 renderTable_fn = function() {
   const matrix = buildComparisonMatrix(this.data);
-  return html19`
+  return html20`
       <div class="pdp-chart-table-wrap">
         <table class="pdp-chart-table">
           <thead>
             <tr>
               <th></th>
-              ${matrix.colLabels.map((label) => html19`<th>${label}</th>`)}
+              ${matrix.colLabels.map((label) => html20`<th>${label}</th>`)}
             </tr>
           </thead>
           <tbody>
             ${matrix.rowLabels.map(
-    (row, rowIdx) => html19`
+    (row, rowIdx) => html20`
                 <tr class=${rowIdx === matrix.winningRow ? "is-winning" : ""}>
                   <td>${row}</td>
                   ${matrix.cells[rowIdx].map(
-      (cell) => html19`<td class="pdp-chart-numeric-cell">${formatNum(cell)}</td>`
+      (cell) => html20`<td class="pdp-chart-numeric-cell">${formatNum(cell)}</td>`
     )}
                 </tr>
               `
@@ -10053,7 +9964,7 @@ renderBars_fn = function() {
   const { buckets, yMax } = buildBarBuckets(data);
   const ticks = niceTicks(yMax);
   const scaleMax = Math.max(yMax, ticks[ticks.length - 1]);
-  return html19`
+  return html20`
       <div
         class="pdp-chart-bars"
         role="figure"
@@ -10062,33 +9973,33 @@ renderBars_fn = function() {
       >
         <div class="pdp-chart-yaxis" aria-hidden="true">
           ${ticks.map(
-    (t2) => html19`
+    (t) => html20`
               <span
                 class="pdp-chart-yaxis-tick"
-                style="bottom:${t2 / scaleMax * 100}%"
+                style="bottom:${t / scaleMax * 100}%"
               >
-                ${formatNum(t2)}
+                ${formatNum(t)}
               </span>
             `
   )}
         </div>
         <div class="pdp-chart-bars-area">
           ${ticks.map(
-    (t2) => html19`
+    (t) => html20`
               <div
                 class="pdp-chart-bars-gridline"
-                style="bottom:${t2 / scaleMax * 100}%"
+                style="bottom:${t / scaleMax * 100}%"
                 aria-hidden="true"
               ></div>
             `
   )}
           <div class="pdp-chart-bars-baseline" aria-hidden="true"></div>
           ${buckets.map(
-    (bucket, bIdx) => html19`
+    (bucket, bIdx) => html20`
               <div class="pdp-chart-bars-bucket">
                 <div class="pdp-chart-bars-stack">
                   ${bucket.bars.map(
-      (bar, barIdxInBucket) => html19`
+      (bar, barIdxInBucket) => html20`
                       <div
                         class="pdp-chart-bar"
                         style="
@@ -10099,9 +10010,9 @@ renderBars_fn = function() {
                         role="img"
                         aria-label="${bucket.label} — ${bar.seriesName}: ${formatNum(bar.value)}"
                       >
-                        ${bucket.bars.length === 1 ? html19`<span class="pdp-chart-bar-value"
+                        ${bucket.bars.length === 1 ? html20`<span class="pdp-chart-bar-value"
                               >${formatNum(bar.value)}</span
-                            >` : nothing9}
+                            >` : nothing10}
                       </div>
                     `
     )}
@@ -10119,7 +10030,7 @@ renderLine_fn = function() {
   const { series, xLabels, yMax } = buildLinePaths(data);
   const ticks = niceTicks(yMax);
   const scaleMax = Math.max(yMax, ticks[ticks.length - 1]);
-  return html19`
+  return html20`
       <div
         class="pdp-chart-line"
         role="figure"
@@ -10129,12 +10040,12 @@ renderLine_fn = function() {
       >
         <div class="pdp-chart-line-yaxis" aria-hidden="true">
           ${ticks.map(
-    (t2) => html19`
+    (t) => html20`
               <span
                 class="pdp-chart-yaxis-tick"
-                style="bottom:${t2 / scaleMax * 100}%"
+                style="bottom:${t / scaleMax * 100}%"
               >
-                ${formatNum(t2)}
+                ${formatNum(t)}
               </span>
             `
   )}
@@ -10146,25 +10057,25 @@ renderLine_fn = function() {
             preserveAspectRatio="none"
             aria-hidden="true"
           >
-            ${ticks.map((t2) => {
-    const y = 60 - t2 / scaleMax * 56 - 2;
+            ${ticks.map((t) => {
+    const y = 60 - t / scaleMax * 56 - 2;
     return svg2`<line class="pdp-chart-line-gridline" x1="0" y1=${y} x2="100" y2=${y} />`;
   })}
             ${series.map(
-    (s4) => svg2`
+    (s) => svg2`
                 <polyline
                   class="pdp-chart-line-stroke"
-                  style=${`--line-color:${colorVar(s4.seriesIdx)}; --delay:${s4.seriesIdx * 200}ms`}
-                  points=${s4.points.map((p) => `${p.cx},${p.cy}`).join(" ")}
+                  style=${`--line-color:${colorVar(s.seriesIdx)}; --delay:${s.seriesIdx * 200}ms`}
+                  points=${s.points.map((p) => `${p.cx},${p.cy}`).join(" ")}
                 />
-                ${s4.points.map(
+                ${s.points.map(
       (p, idx) => svg2`
                     <circle
                       class="pdp-chart-line-dot"
                       cx=${p.cx}
                       cy=${p.cy}
                       r="1.4"
-                      style=${`--line-color:${colorVar(s4.seriesIdx)}; --delay:${s4.seriesIdx * 200}ms; --dot-delay:${800 + idx * 60}ms`}
+                      style=${`--line-color:${colorVar(s.seriesIdx)}; --delay:${s.seriesIdx * 200}ms; --dot-delay:${800 + idx * 60}ms`}
                     />
                   `
     )}
@@ -10178,7 +10089,7 @@ renderLine_fn = function() {
         style="--col-count:${xLabels.length}"
         aria-hidden="true"
       >
-        ${xLabels.map((label) => html19`<span>${label}</span>`)}
+        ${xLabels.map((label) => html20`<span>${label}</span>`)}
       </div>
     `;
 };
@@ -10191,15 +10102,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-cha
 }
 
 // src/widgets/PdpChartBarStackedLit.ts
-import { html as html20, LitElement as LitElement19 } from "lit";
-function ensureStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-chart-bar-style")) return;
-  const s4 = document.createElement("style");
-  s4.id = "syntro-pdp-chart-bar-style";
-  s4.textContent = CSS;
-  document.head.appendChild(s4);
-}
+import { html as html21, LitElement as LitElement20 } from "lit";
 var CSS = `
 .pdp-chart-bar {
   --c-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
@@ -10279,7 +10182,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 LitElement19 {
+var PdpChartBarStackedLit = class extends LitElement20 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -10289,39 +10192,39 @@ var PdpChartBarStackedLit = class extends LitElement19 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureStyles();
+    ensureStylesInRoot(this, "syntro-pdp-chart-bar-style", CSS);
   }
   render() {
-    if (!this.data) return html20`<div class="pdp-chart-bar" style="opacity:0.5;">…</div>`;
+    if (!this.data) return html21`<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 html20`
+    const allX = Array.from(new Set(series.flatMap((s) => s.points.map((p) => p.x))));
+    const max = Math.max(...series.flatMap((s) => s.points.map((p) => p.y)), 1);
+    return html21`
       <section class="pdp-chart-bar" aria-label=${title}>
         <h3 class="pdp-chart-bar__title">${title}</h3>
-        ${series.length > 1 ? html20`<div class="pdp-chart-bar__legend">
+        ${series.length > 1 ? html21`<div class="pdp-chart-bar__legend">
               ${series.map(
-      (s4, i2) => html20`<span
+      (s, i) => html21`<span
                   ><span
                     class="pdp-chart-bar__legend-dot"
-                    style=${`background: ${PALETTE[i2 % PALETTE.length]};`}
+                    style=${`background: ${PALETTE[i % PALETTE.length]};`}
                   ></span
-                  >${s4.name}</span
+                  >${s.name}</span
                 >`
     )}
             </div>` : ""}
         ${allX.map(
-      (x) => html20`<div class="pdp-chart-bar__row">
+      (x) => html21`<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);
+              ${series.map((s, i) => {
+        const point = s.points.find((p) => p.x === x);
         if (!point) return "";
         const pct = point.y / max * 100;
-        return html20`<div class="pdp-chart-bar__bar-track">
+        return html21`<div class="pdp-chart-bar__bar-track">
                   <div
                     class="pdp-chart-bar__bar-fill"
-                    style=${`width: ${pct.toFixed(1)}%; background: ${PALETTE[i2 % PALETTE.length]};`}
+                    style=${`width: ${pct.toFixed(1)}%; background: ${PALETTE[i % PALETTE.length]};`}
                   ></div>
                   <span class="pdp-chart-bar__bar-value">${point.y}</span>
                 </div>`;
@@ -10341,15 +10244,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-cha
 }
 
 // src/widgets/PdpChartMetricPullLit.ts
-import { html as html21, LitElement as LitElement20, svg as svg3 } from "lit";
-function ensureStyles2() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-chart-metric-style")) return;
-  const s4 = document.createElement("style");
-  s4.id = "syntro-pdp-chart-metric-style";
-  s4.textContent = CSS2;
-  document.head.appendChild(s4);
-}
+import { html as html22, LitElement as LitElement21, svg as svg3 } from "lit";
 var CSS2 = `
 .pdp-chart-met {
   --c-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
@@ -10443,17 +10338,17 @@ var CSS2 = `
 function buildSparkline(points) {
   const w = 200;
   const h = 38;
-  const xs = points.map((_, i2) => i2 / Math.max(points.length - 1, 1) * (w - 4) + 2);
+  const xs = points.map((_, i) => i / Math.max(points.length - 1, 1) * (w - 4) + 2);
   const min = Math.min(...points.map((p) => p.y));
   const max = Math.max(...points.map((p) => p.y));
   const range = max - min || 1;
   const ys = points.map((p) => h - 4 - (p.y - min) / range * (h - 8));
-  const line = xs.map((x, i2) => `${i2 === 0 ? "M" : "L"} ${x.toFixed(1)} ${ys[i2].toFixed(1)}`).join(" ");
+  const line = xs.map((x, i) => `${i === 0 ? "M" : "L"} ${x.toFixed(1)} ${ys[i].toFixed(1)}`).join(" ");
   const area = `${line} L ${xs[xs.length - 1].toFixed(1)} ${h} L ${xs[0].toFixed(1)} ${h} Z`;
-  const peakIndex = points.reduce((best, p, i2) => p.y > points[best].y ? i2 : best, 0);
+  const peakIndex = points.reduce((best, p, i) => p.y > points[best].y ? i : best, 0);
   return { linePath: line, areaPath: area, peakIndex };
 }
-var PdpChartMetricPullLit = class extends LitElement20 {
+var PdpChartMetricPullLit = class extends LitElement21 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -10463,16 +10358,16 @@ var PdpChartMetricPullLit = class extends LitElement20 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureStyles2();
+    ensureStylesInRoot(this, "syntro-pdp-chart-metric-style", CSS2);
   }
   render() {
-    if (!this.data) return html21`<div class="pdp-chart-met" style="opacity:0.5;">…</div>`;
+    if (!this.data) return html22`<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 html21``;
+    if (!first || first.points.length === 0) return html22``;
     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;
+    const mean = points.reduce((s, p) => s + p.y, 0) / points.length;
     const delta = (peak.y - mean) / Math.max(mean, 1) * 100;
     const spark = buildSparkline(points);
     const w = 200;
@@ -10482,7 +10377,7 @@ var PdpChartMetricPullLit = class extends LitElement20 {
     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 html21`
+    return html22`
       <section class="pdp-chart-met" aria-label=${title}>
         <div class="pdp-chart-met__metric">
           <span class="pdp-chart-met__big">${peak.y}</span>
@@ -10514,15 +10409,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-cha
 }
 
 // src/widgets/PdpQaAccordionLit.ts
-import { html as html22, LitElement as LitElement21 } from "lit";
-function ensureStyles3() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-qa-accordion-style")) return;
-  const s4 = document.createElement("style");
-  s4.id = "syntro-pdp-qa-accordion-style";
-  s4.textContent = CSS3;
-  document.head.appendChild(s4);
-}
+import { html as html23, LitElement as LitElement22 } from "lit";
 var CSS3 = `
 .pdp-qa-acc {
   --qa-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
@@ -10596,7 +10483,7 @@ var CSS3 = `
   max-width: 56ch;
 }
 `;
-var PdpQaAccordionLit = class extends LitElement21 {
+var PdpQaAccordionLit = class extends LitElement22 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -10606,14 +10493,14 @@ var PdpQaAccordionLit = class extends LitElement21 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureStyles3();
+    ensureStylesInRoot(this, "syntro-pdp-qa-accordion-style", CSS3);
   }
   render() {
-    if (!this.data) return html22`<div class="pdp-qa-acc" style="opacity:0.5;">…</div>`;
-    return html22`
+    if (!this.data) return html23`<div class="pdp-qa-acc" style="opacity:0.5;">…</div>`;
+    return html23`
       <section class="pdp-qa-acc" aria-label="Frequently asked questions">
         ${this.data.items.map(
-      (it) => html22`<details class="pdp-qa-acc__item">
+      (it) => html23`<details class="pdp-qa-acc__item">
             <summary>
               <span class="pdp-qa-acc__chev" aria-hidden="true"></span>
               <span>${it.question}</span>
@@ -10633,15 +10520,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-qa-
 }
 
 // src/widgets/PdpQaSideBySideLit.ts
-import { html as html23, LitElement as LitElement22 } from "lit";
-function ensureStyles4() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-qa-side-style")) return;
-  const s4 = document.createElement("style");
-  s4.id = "syntro-pdp-qa-side-style";
-  s4.textContent = CSS4;
-  document.head.appendChild(s4);
-}
+import { html as html24, LitElement as LitElement23 } from "lit";
 var CSS4 = `
 .pdp-qa-side {
   --qa-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
@@ -10707,7 +10586,7 @@ var CSS4 = `
   margin: 0;
 }
 `;
-var PdpQaSideBySideLit = class extends LitElement22 {
+var PdpQaSideBySideLit = class extends LitElement23 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -10717,14 +10596,14 @@ var PdpQaSideBySideLit = class extends LitElement22 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureStyles4();
+    ensureStylesInRoot(this, "syntro-pdp-qa-side-style", CSS4);
   }
   render() {
-    if (!this.data) return html23`<div class="pdp-qa-side" style="opacity:0.5;">…</div>`;
-    return html23`
+    if (!this.data) return html24`<div class="pdp-qa-side" style="opacity:0.5;">…</div>`;
+    return html24`
       <section class="pdp-qa-side" aria-label="Q&A">
         ${this.data.items.map(
-      (it) => html23`<div class="pdp-qa-side__item">
+      (it) => html24`<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>`
@@ -10741,15 +10620,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-qa-
 }
 
 // src/widgets/PdpRegionalFullBleedLit.ts
-import { html as html24, LitElement as LitElement23 } from "lit";
-function ensureStyles5() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-regional-fullbleed-style")) return;
-  const s4 = document.createElement("style");
-  s4.id = "syntro-pdp-regional-fullbleed-style";
-  s4.textContent = CSS5;
-  document.head.appendChild(s4);
-}
+import { html as html25, LitElement as LitElement24 } from "lit";
 var CSS5 = `
 .pdp-reg-fb {
   --r-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
@@ -10832,7 +10703,7 @@ var CSS5 = `
   font-style: italic;
 }
 `;
-var PdpRegionalFullBleedLit = class extends LitElement23 {
+var PdpRegionalFullBleedLit = class extends LitElement24 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -10842,12 +10713,12 @@ var PdpRegionalFullBleedLit = class extends LitElement23 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureStyles5();
+    ensureStylesInRoot(this, "syntro-pdp-regional-fullbleed-style", CSS5);
   }
   render() {
-    if (!this.data) return html24`<div class="pdp-reg-fb" style="opacity:0.5;">…</div>`;
+    if (!this.data) return html25`<div class="pdp-reg-fb" style="opacity:0.5;">…</div>`;
     const d = this.data;
-    return html24`
+    return html25`
       <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">
@@ -10890,15 +10761,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-reg
 }
 
 // src/widgets/PdpRegionalInlineNoteLit.ts
-import { html as html25, LitElement as LitElement24 } from "lit";
-function ensureStyles6() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-regional-inline-style")) return;
-  const s4 = document.createElement("style");
-  s4.id = "syntro-pdp-regional-inline-style";
-  s4.textContent = CSS6;
-  document.head.appendChild(s4);
-}
+import { html as html26, LitElement as LitElement25 } from "lit";
 var CSS6 = `
 .pdp-reg-in {
   --r-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
@@ -10951,7 +10814,7 @@ var CSS6 = `
   font-style: italic;
 }
 `;
-var PdpRegionalInlineNoteLit = class extends LitElement24 {
+var PdpRegionalInlineNoteLit = class extends LitElement25 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -10961,12 +10824,12 @@ var PdpRegionalInlineNoteLit = class extends LitElement24 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureStyles6();
+    ensureStylesInRoot(this, "syntro-pdp-regional-inline-style", CSS6);
   }
   render() {
-    if (!this.data) return html25`<div class="pdp-reg-in" style="opacity:0.5;">…</div>`;
+    if (!this.data) return html26`<div class="pdp-reg-in" style="opacity:0.5;">…</div>`;
     const d = this.data;
-    return html25`
+    return html26`
       <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"/>
@@ -10994,8 +10857,8 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-reg
 }
 
 // src/widgets/PdpSlotPlaceholderLit.ts
-import { html as html26, LitElement as LitElement25 } from "lit";
-var PdpSlotPlaceholderLit = class extends LitElement25 {
+import { html as html27, LitElement as LitElement26 } from "lit";
+var PdpSlotPlaceholderLit = class extends LitElement26 {
   constructor() {
     super(...arguments);
     this.label = "More personalized content coming soon";
@@ -11004,7 +10867,7 @@ var PdpSlotPlaceholderLit = class extends LitElement25 {
     return this;
   }
   render() {
-    return html26`
+    return html27`
       <div class="pdp-slot-placeholder" data-placeholder>
         <p>${this.label}</p>
         <small>Ask in chat to explore this product further.</small>
@@ -11020,15 +10883,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-slo
 }
 
 // src/widgets/PdpRibbonLit.ts
-import { html as html27, LitElement as LitElement26, nothing as nothing10 } from "lit";
-function ensureRibbonStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-ribbon-style")) return;
-  const s4 = document.createElement("style");
-  s4.id = "syntro-pdp-ribbon-style";
-  s4.textContent = RIBBON_CSS;
-  document.head.appendChild(s4);
-}
+import { html as html28, LitElement as LitElement27, nothing as nothing11 } from "lit";
 var RIBBON_CSS = `
 .syntro-pdp-ribbon {
   --rb-primary: var(--syntro-pdp-primary, hsl(150 32% 38%));
@@ -11087,7 +10942,7 @@ var RIBBON_CSS = `
   width: 16px;
   height: 16px;
   display: inline-block;
-  color: var(--rb-primary);
+  color: var(--syntro-pdp-primary-ink, var(--rb-primary));
 }
 .syntro-pdp-ribbon-copy {
   font-family: var(--rb-display);
@@ -11104,7 +10959,7 @@ var RIBBON_CSS = `
   font-style: normal;
   font-family: var(--syntro-pdp-sans, inherit);
   font-weight: 500;
-  color: var(--rb-primary);
+  color: var(--syntro-pdp-primary-ink, var(--rb-primary));
   font-size: 14.5px;
   letter-spacing: 0;
 }
@@ -11149,7 +11004,7 @@ var RIBBON_CSS = `
   100% { transform: translateX(110%); }
 }
 `;
-var PdpRibbonLit = class extends LitElement26 {
+var PdpRibbonLit = class extends LitElement27 {
   constructor() {
     super(...arguments);
     this.topic = "";
@@ -11163,7 +11018,7 @@ var PdpRibbonLit = class extends LitElement26 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureRibbonStyles();
+    ensureStylesInRoot(this, "syntro-pdp-ribbon-style", RIBBON_CSS);
     if (this._entering) this.requestUpdate();
   }
   disconnectedCallback() {
@@ -11187,7 +11042,7 @@ var PdpRibbonLit = class extends LitElement26 {
   }
   render() {
     const cls = this._entering ? "syntro-pdp-ribbon is-entering" : "syntro-pdp-ribbon";
-    return html27`
+    return html28`
       <div class="${cls}" role="status" aria-live="polite">
         <span class="syntro-pdp-ribbon-sweep" aria-hidden="true"></span>
         <svg
@@ -11207,7 +11062,7 @@ var PdpRibbonLit = class extends LitElement26 {
         </svg>
         <p class="syntro-pdp-ribbon-copy">
           Tailored to your conversation about
-          ${this.topic ? html27` <span class="syntro-pdp-ribbon-topic">${this.topic}</span>.` : nothing10}
+          ${this.topic ? html28` <span class="syntro-pdp-ribbon-topic">${this.topic}</span>.` : nothing11}
           <span class="syntro-pdp-ribbon-trail"> ${this.subtitle}</span>
         </p>
       </div>
@@ -11224,15 +11079,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-rib
 }
 
 // src/widgets/PdpQaLit.ts
-import { html as html28, LitElement as LitElement27, nothing as nothing11 } from "lit";
-function ensureQaStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-qa-style")) return;
-  const s4 = document.createElement("style");
-  s4.id = "syntro-pdp-qa-style";
-  s4.textContent = QA_CSS;
-  document.head.appendChild(s4);
-}
+import { html as html29, LitElement as LitElement28, nothing as nothing12 } from "lit";
 var QA_CSS = `
 .pdp-qa {
   --qa-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
@@ -11314,7 +11161,7 @@ var QA_CSS = `
   background: color-mix(in srgb, var(--qa-primary) 14%, transparent);
   display: grid;
   place-items: center;
-  color: color-mix(in srgb, var(--qa-primary) 80%, white 20%);
+  color: var(--syntro-pdp-primary-ink, color-mix(in srgb, var(--qa-primary) 80%, white 20%));
   transition: background 200ms ease, transform 200ms ease;
 }
 .pdp-qa-item[open] .pdp-qa-toggle {
@@ -11386,7 +11233,7 @@ var QA_CSS = `
   }
 }
 `;
-var PdpQaLit = class extends LitElement27 {
+var PdpQaLit = class extends LitElement28 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -11398,7 +11245,7 @@ var PdpQaLit = class extends LitElement27 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureQaStyles();
+    ensureStylesInRoot(this, "syntro-pdp-qa-style", QA_CSS);
     if (this._entering) this.requestUpdate();
   }
   disconnectedCallback() {
@@ -11421,19 +11268,19 @@ var PdpQaLit = class extends LitElement27 {
   }
   render() {
     if (!this.data) {
-      return html28`<div data-skeleton class="pdp-qa-skeleton">
+      return html29`<div data-skeleton class="pdp-qa-skeleton">
         <div class="pdp-qa-skeleton-row"></div>
         <div class="pdp-qa-skeleton-row"></div>
         <div class="pdp-qa-skeleton-row"></div>
       </div>`;
     }
-    return html28`
+    return html29`
       <section
         class="${this._entering ? "pdp-qa is-entering" : "pdp-qa"}"
         aria-label="Frequently asked questions"
       >
         ${this.data.items.map(
-      (item, idx) => html28`
+      (item, idx) => html29`
             <details class="pdp-qa-item" ?open=${idx === 0}>
               <summary class="pdp-qa-question">
                 <span>${item.question}</span>
@@ -11448,7 +11295,7 @@ var PdpQaLit = class extends LitElement27 {
             </details>
           `
     )}
-        ${nothing11}
+        ${nothing12}
       </section>
     `;
   }
@@ -11462,15 +11309,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-qa"
 }
 
 // src/widgets/PdpRegionalLit.ts
-import { html as html29, LitElement as LitElement28 } from "lit";
-function ensureRegionalStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-regional-style")) return;
-  const s4 = document.createElement("style");
-  s4.id = "syntro-pdp-regional-style";
-  s4.textContent = REGIONAL_CSS;
-  document.head.appendChild(s4);
-}
+import { html as html30, LitElement as LitElement29 } from "lit";
 var REGIONAL_CSS = `
 .pdp-regional {
   --rg-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
@@ -11548,7 +11387,7 @@ var REGIONAL_CSS = `
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: color-mix(in srgb, var(--rg-primary) 75%, white 25%);
+  color: var(--syntro-pdp-primary-ink, color-mix(in srgb, var(--rg-primary) 75%, white 25%));
   font-weight: 500;
   margin-bottom: 22px;
 }
@@ -11580,7 +11419,7 @@ var REGIONAL_CSS = `
 .pdp-regional-headline em {
   font-style: italic;
   font-variation-settings: 'SOFT' 100, 'WONK' 1;
-  color: var(--rg-primary);
+  color: var(--syntro-pdp-primary-ink, var(--rg-primary));
 }
 
 .pdp-regional-body {
@@ -11604,7 +11443,7 @@ var REGIONAL_CSS = `
   font-family: var(--rg-display);
   font-size: 14.5px;
   font-variation-settings: 'SOFT' 70;
-  color: color-mix(in srgb, var(--rg-primary) 65%, white 35%);
+  color: var(--syntro-pdp-primary-ink, color-mix(in srgb, var(--rg-primary) 65%, white 35%));
   line-height: 1.5;
 }
 .pdp-regional-footer-spark {
@@ -11650,7 +11489,7 @@ var REGIONAL_CSS = `
   to { opacity: 1; transform: translateY(0); }
 }
 `;
-var PdpRegionalLit = class extends LitElement28 {
+var PdpRegionalLit = class extends LitElement29 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -11662,7 +11501,7 @@ var PdpRegionalLit = class extends LitElement28 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensureRegionalStyles();
+    ensureStylesInRoot(this, "syntro-pdp-regional-style", REGIONAL_CSS);
     if (this._entering) this.requestUpdate();
   }
   disconnectedCallback() {
@@ -11686,11 +11525,11 @@ var PdpRegionalLit = class extends LitElement28 {
   }
   render() {
     if (!this.data) {
-      return html29`<div data-skeleton class="pdp-qa-skeleton" style="height:200px;">
+      return html30`<div data-skeleton class="pdp-qa-skeleton" style="height:200px;">
         <div class="pdp-qa-skeleton-row" style="height:200px;border-radius:24px;"></div>
       </div>`;
     }
-    return html29`
+    return html30`
       <section
         class="${this._entering ? "pdp-regional is-entering" : "pdp-regional"}"
         aria-label="Regional and temporal context"
@@ -11735,15 +11574,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-reg
 }
 
 // src/widgets/PdpPeerFeedLit.ts
-import { html as html30, LitElement as LitElement29 } from "lit";
-function ensurePeerFeedStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById("syntro-pdp-peer-feed-style")) return;
-  const s4 = document.createElement("style");
-  s4.id = "syntro-pdp-peer-feed-style";
-  s4.textContent = PEER_FEED_CSS;
-  document.head.appendChild(s4);
-}
+import { html as html31, LitElement as LitElement30 } from "lit";
 var PEER_FEED_CSS = `
 .pdp-peer-feed {
   --pf-fg: var(--syntro-pdp-fg, hsl(35 15% 92%));
@@ -11859,14 +11690,14 @@ var PEER_FEED_CSS = `
 }
 .pdp-peer-quote::before {
   content: '\u201C ';
-  color: color-mix(in srgb, var(--pf-primary) 60%, transparent);
+  color: var(--syntro-pdp-primary-ink, color-mix(in srgb, var(--pf-primary) 60%, transparent));
   font-size: 1.4em;
   vertical-align: -0.2em;
   margin-right: -2px;
 }
 .pdp-peer-quote::after {
   content: ' \u201D';
-  color: color-mix(in srgb, var(--pf-primary) 60%, transparent);
+  color: var(--syntro-pdp-primary-ink, color-mix(in srgb, var(--pf-primary) 60%, transparent));
   font-size: 1.4em;
   vertical-align: -0.2em;
   margin-left: -2px;
@@ -11877,7 +11708,7 @@ var PEER_FEED_CSS = `
   align-items: center;
   gap: 7px;
   font-size: 12.5px;
-  color: color-mix(in srgb, var(--pf-primary) 75%, white 25%);
+  color: var(--syntro-pdp-primary-ink, color-mix(in srgb, var(--pf-primary) 75%, white 25%));
   font-style: italic;
   font-family: var(--pf-display);
   margin-top: 2px;
@@ -11947,7 +11778,7 @@ var PEER_FEED_CSS = `
   }
 }
 `;
-var PdpPeerFeedLit = class extends LitElement29 {
+var PdpPeerFeedLit = class extends LitElement30 {
   constructor() {
     super(...arguments);
     this.data = void 0;
@@ -11959,7 +11790,7 @@ var PdpPeerFeedLit = class extends LitElement29 {
   }
   connectedCallback() {
     super.connectedCallback();
-    ensurePeerFeedStyles();
+    ensureStylesInRoot(this, "syntro-pdp-peer-feed-style", PEER_FEED_CSS);
     if (this._entering) this.requestUpdate();
   }
   disconnectedCallback() {
@@ -11982,19 +11813,19 @@ var PdpPeerFeedLit = class extends LitElement29 {
   }
   render() {
     if (!this.data) {
-      return html30`<div data-skeleton class="pdp-peer-skeleton">
+      return html31`<div data-skeleton class="pdp-peer-skeleton">
         <div class="pdp-peer-skeleton-row"></div>
         <div class="pdp-peer-skeleton-row"></div>
         <div class="pdp-peer-skeleton-row"></div>
       </div>`;
     }
-    return html30`
+    return html31`
       <section
         class="${this._entering ? "pdp-peer-feed is-entering" : "pdp-peer-feed"}"
         aria-label="Users like you"
       >
         ${this.data.peers.map(
-      (peer) => html30`
+      (peer) => html31`
             <article class="pdp-peer-post">
               <div class="pdp-peer-avatar" aria-hidden="true">${peer.initials}</div>
               <div class="pdp-peer-body">
@@ -12031,7 +11862,8 @@ var TAGS = {
   hero: "syntro-product-hero",
   grid: "syntro-product-grid",
   pdp: "syntro-pdp",
-  reco: "syntro-product-reco-carousel"
+  reco: "syntro-product-reco-carousel",
+  details: "syntro-product-details"
 };
 if (typeof customElements !== "undefined") {
   if (!customElements.get(TAGS.card)) customElements.define(TAGS.card, ProductCardLit);
@@ -12041,6 +11873,7 @@ if (typeof customElements !== "undefined") {
   if (!customElements.get(TAGS.grid)) customElements.define(TAGS.grid, ProductGridLit);
   if (!customElements.get(TAGS.pdp)) customElements.define(TAGS.pdp, SyntroPdpLit);
   if (!customElements.get(TAGS.reco)) customElements.define(TAGS.reco, ProductRecoCarouselLit);
+  if (!customElements.get(TAGS.details)) customElements.define(TAGS.details, ProductDetailsLit);
 }
 if (typeof document !== "undefined") startNativeSlotWatcher();
 var _WIRED_RUNTIMES = /* @__PURE__ */ new WeakSet();
@@ -12081,17 +11914,21 @@ function onActivate(runtime2) {
   const observer2 = wirePdpElements(runtime2, document);
   return () => {
     observer2.disconnect();
-    const i2 = _ACTIVE_OBSERVERS.indexOf(observer2);
-    if (i2 >= 0) _ACTIVE_OBSERVERS.splice(i2, 1);
+    const i = _ACTIVE_OBSERVERS.indexOf(observer2);
+    if (i >= 0) _ACTIVE_OBSERVERS.splice(i, 1);
     _WIRED_RUNTIMES.delete(runtime2);
   };
 }
-function makeMountable(tag) {
+function makeMountable(tag, hooks) {
   return {
     mount(container, config) {
-      const widgetProps = stripMountPlumbing(config ?? null);
+      const widgetProps = resolveStorefrontProps(
+        stripMountPlumbing(config ?? null),
+        config?.runtime
+      );
       const el = document.createElement(tag);
       el.props = widgetProps;
+      hooks?.afterCreate?.(el, config);
       container.appendChild(el);
       return () => el.remove();
     }
@@ -12101,8 +11938,13 @@ var ProductCardMountable = makeMountable(TAGS.card);
 var ProductComparisonMountable = makeMountable(TAGS.comparison);
 var ProductHeroMountable = makeMountable(TAGS.hero);
 var ProductGridMountable = makeMountable(TAGS.grid);
-var SyntroPdpMountable = makeMountable(TAGS.pdp);
+var SyntroPdpMountable = makeMountable(TAGS.pdp, {
+  afterCreate: (el, config) => {
+    el.runtimeRef = config?.runtime ?? null;
+  }
+});
 var SyntroRecoMountable = makeMountable(TAGS.reco);
+var ProductDetailsMountable = makeMountable(TAGS.details);
 var runtime = {
   id: "adaptive-product",
   version: "1.0.0",
@@ -12185,6 +12027,15 @@ var runtime = {
         description: "Horizontally-scrollable carousel of recommended products with image, price, hook copy, and PDP links.",
         icon: "\u{1F3A0}"
       }
+    },
+    {
+      id: "adaptive-product:details",
+      component: ProductDetailsMountable,
+      metadata: {
+        name: "Product details",
+        description: "The store's own product details",
+        icon: "\u{1F4CB}"
+      }
     }
   ]
 };
@@ -12201,35 +12052,8 @@ export {
   ProductGridMountable,
   SyntroPdpMountable,
   SyntroRecoMountable,
+  ProductDetailsMountable,
   runtime,
   runtime_default
 };
-/*! Bundled license information:
-
-@lit/context/lib/context-request-event.js:
-@lit/context/lib/create-context.js:
-@lit/context/lib/controllers/context-consumer.js:
-@lit/context/lib/value-notifier.js:
-@lit/context/lib/controllers/context-provider.js:
-@lit/context/lib/context-root.js:
-  (**
-   * @license
-   * Copyright 2021 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/context/lib/decorators/provide.js:
-  (**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/context/lib/decorators/consume.js:
-  (**
-   * @license
-   * Copyright 2022 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-*/
-//# sourceMappingURL=chunk-QXR5X22R.js.map
+//# sourceMappingURL=chunk-YEW72FVW.js.map