@syntrologie/adapt-product 2.48.0 → 2.49.0

package/dist/{chunk-XZVLFHRB.js → chunk-LFYTHTQS.js}

@@ -4101,7 +4101,7 @@ function startNativeSlotWatcher() {
 }
 
 // src/widgets/ProductCardLit.ts
-import { html as html8, LitElement as LitElement8, nothing as nothing4 } from "lit";
+import { html as html9, LitElement as LitElement8, nothing as nothing4 } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 
 // src/bind/dom-selector.ts
@@ -4937,12 +4937,12 @@ function isDangerousUrlAttr(name, value) {
   const normalized = normalizeUrlAttr(value);
   return normalized.startsWith("javascript:") || normalized.startsWith("vbscript:") || normalized.startsWith("data:");
 }
-function sanitizeHtml(html30) {
+function sanitizeHtml(html31) {
   const hasNative = typeof window.Sanitizer === "function";
   if (hasNative) {
     try {
       const s4 = new window.Sanitizer({});
-      const frag = s4.sanitizeToFragment(html30);
+      const frag = s4.sanitizeToFragment(html31);
       const div = document.createElement("div");
       div.append(frag);
       return div.innerHTML;
@@ -4950,7 +4950,7 @@ function sanitizeHtml(html30) {
     }
   }
   const tpl = document.createElement("template");
-  tpl.innerHTML = html30;
+  tpl.innerHTML = html31;
   const root = tpl.content;
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null);
   const toRemove = [];
@@ -4991,7 +4991,16 @@ function ensureStylesInRoot(el, id, css) {
 }
 
 // src/widgets/imageStandin.ts
-var IMAGE_STANDIN_BACKGROUND = "linear-gradient(135deg, var(--sc-color-primary), var(--sc-color-primary-hover))";
+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();
+  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;"
+    >${initial}</span
+  >`;
+}
 
 // src/widgets/renderHealth.ts
 var BLANK_MIN_AREA = 60 * 60;
@@ -5181,7 +5190,7 @@ cancel_fn = function() {
 };
 
 // src/widgets/VariantPanelLit.ts
-import { html as html7, LitElement as LitElement7, nothing as nothing3 } from "lit";
+import { html as html8, LitElement as LitElement7, nothing as nothing3 } from "lit";
 var PANEL_CSS = `
   syntro-variant-panel {
     display: grid;
@@ -5525,17 +5534,17 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
   }
   render() {
     if (this.state === "error") {
-      return html7`
+      return html8`
         <div class="svp-error-block" data-error-block>
           <div>${this.error ?? "Couldn't load options."}</div>
-          ${this.retryable ? html7`<button class="svp-retry-btn" data-retry-button @click=${this._onRetry}>
+          ${this.retryable ? html8`<button class="svp-retry-btn" data-retry-button @click=${this._onRetry}>
                   Try again
                 </button>` : nothing3}
         </div>
       `;
     }
     if (this.state === "loading" || !this.payload) {
-      return html7`
+      return html8`
         <div data-loading-skeleton>
           <div class="svp-skeleton"></div>
           <div class="svp-skeleton"></div>
@@ -5548,15 +5557,15 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
     const compareAt = matching?.compare_at_price ?? null;
     const singleVariant = this.payload.attributes.length === 0;
     const heroSrc = this._heroSrc();
-    const backBtn = html7`<button
+    const backBtn = html8`<button
       class="svp-back-btn"
       data-back-button
       @click=${this._onBack}
       aria-label="Back"
     >‹ Back</button>`;
-    return html7`
+    return html8`
       <div class="svp-image-col" data-image-col>
-        ${heroSrc ? html7`<img
+        ${heroSrc ? html8`<img
                 class="svp-image"
                 data-variant-image
                 src=${heroSrc}
@@ -5565,9 +5574,9 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
               />` : nothing3}
       </div>
       <div class="svp-body" data-panel-body>
-        ${this.productTitle ? html7`<div class="svp-product-title" data-product-title data-critical-text>${this.productTitle}</div>` : nothing3}
+        ${this.productTitle ? 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 ? html7`<div class="svp-single-variant-note" data-single-variant-note>
+          ${singleVariant ? html8`<div class="svp-single-variant-note" data-single-variant-note>
                   Just one option — ready to add.
                 </div>` : this.payload.attributes.map((attr) => this._renderAttributeRow(attr))}
         </div>
@@ -5582,7 +5591,7 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
             ${// Short label: "Add · $64" (the price commits HERE — the card's
     // front face carries no price; round-3 feedback shortened this
     // so Back fits beside it on the same row).
-    ctaPrice != null ? html7`Add ${compareAt ? html7`<span class="svp-compare">$${compareAt.toFixed(2)}</span>` : nothing3}· $${ctaPrice.toFixed(2)}` : html7`Add to cart`}
+    ctaPrice != null ? html8`Add ${compareAt ? html8`<span class="svp-compare">$${compareAt.toFixed(2)}</span>` : nothing3}· $${ctaPrice.toFixed(2)}` : html8`Add to cart`}
           </button>
           ${backBtn}
         </div>
@@ -5594,11 +5603,11 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
   }
   _renderAttributeRow(attr) {
     const oosVisible = this._hasAnyOOSForAttribute(attr);
-    return html7`
+    return html8`
       <div class="svp-attribute-row" data-attribute-row data-attribute-key=${attr.key}>
         <div class="svp-attribute-label" data-attribute-label id=${`attrlabel-${attr.key}`}>${attr.label}</div>
         ${attr.values.length >= _VariantPanelLit.COLLAPSE_MIN_OPTIONS ? this._renderCollapsedAxis(attr) : attr.kind === "swatch" ? this._renderSwatchRow(attr) : this._renderPillRow(attr)}
-        ${oosVisible ? html7`<div class="svp-oos-microcopy" data-out-of-stock-microcopy>Out of stock for one or more options</div>` : nothing3}
+        ${oosVisible ? html8`<div class="svp-oos-microcopy" data-out-of-stock-microcopy>Out of stock for one or more options</div>` : nothing3}
       </div>
     `;
   }
@@ -5607,12 +5616,12 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
   }
   _renderPillRow(attr) {
     const segmented = attr.values.length <= _VariantPanelLit.SEGMENTED_MAX_OPTIONS;
-    return html7`
+    return html8`
       <div class="svp-pill-row" data-segmented=${segmented ? "" : nothing3} data-scroll=${this._isScrollTier(attr) ? "" : nothing3} role="radiogroup" aria-labelledby=${`attrlabel-${attr.key}`}>
         ${attr.values.map((v) => {
       const disabled2 = this._isValueDisabled(attr.key, v.id);
       const checked = this._selection[attr.key] === v.id;
-      return html7`<button
+      return html8`<button
             class="svp-pill"
             data-pill
             data-attribute-key=${attr.key}
@@ -5630,14 +5639,14 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
   _renderSwatchRow(attr) {
     const selectedValueId = this._selection[attr.key];
     const selectedLabel = attr.values.find((v) => v.id === selectedValueId)?.label ?? "";
-    return html7`
+    return html8`
       <div class="svp-swatch-label">${selectedLabel}</div>
       <div class="svp-swatch-row" data-scroll=${this._isScrollTier(attr) ? "" : nothing3} role="radiogroup" aria-labelledby=${`attrlabel-${attr.key}`}>
         ${attr.values.map((v) => {
       const disabled2 = this._isValueDisabled(attr.key, v.id);
       const checked = this._selection[attr.key] === v.id;
       const color = v.swatch?.kind === "color" ? v.swatch.value : "transparent";
-      return html7`<button
+      return html8`<button
             class="svp-swatch-pill"
             data-pill
             data-swatch-dot
@@ -5691,8 +5700,8 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
     const filter = (this._axisFilter[attr.key] ?? "").trim().toLowerCase();
     const filtered = filter ? attr.values.filter((v) => v.label.toLowerCase().includes(filter)) : attr.values;
     const showFilter = attr.values.length >= _VariantPanelLit.FILTER_MIN_OPTIONS;
-    const dot = (v) => v?.swatch?.kind === "color" ? html7`<span class="svp-swatch-dot" style="background-color: ${v.swatch.value}"></span>` : nothing3;
-    return html7`
+    const dot = (v) => v?.swatch?.kind === "color" ? html8`<span class="svp-swatch-dot" style="background-color: ${v.swatch.value}"></span>` : nothing3;
+    return html8`
       <div
         class="svp-collapse"
         data-collapsed-axis
@@ -5722,7 +5731,7 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
           <span class="svp-collapse-value">${selected ? selected.label : `Choose ${attr.label.toLowerCase()}`}</span>
           <span class="svp-collapse-caret">${expanded ? "\u25B4" : "\u25BE"}</span>
         </button>
-        ${expanded ? html7`
+        ${expanded ? html8`
               <div
                 class="svp-collapse-list"
                 data-clip-ok
@@ -5730,7 +5739,7 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
                 role="listbox"
                 aria-labelledby=${`attrlabel-${attr.key}`}
               >
-                ${showFilter ? html7`<input
+                ${showFilter ? html8`<input
                         class="svp-collapse-filter"
                         data-collapse-filter
                         type="text"
@@ -5741,7 +5750,7 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
                 ${filtered.map((v) => {
       const disabled2 = this._isValueDisabled(attr.key, v.id);
       const isSelected = this._selection[attr.key] === v.id;
-      return html7`<button
+      return html8`<button
                     class="svp-collapse-option"
                     data-collapse-option
                     data-value-id=${v.id}
@@ -5752,7 +5761,7 @@ var _VariantPanelLit = class _VariantPanelLit extends LitElement7 {
                     @click=${() => this._onCollapsedSelect(attr.key, v.id)}
                   >${dot(v)}<span class="svp-collapse-value">${v.label}</span></button>`;
     })}
-                ${filtered.length === 0 ? html7`<div class="svp-collapse-empty">No matches</div>` : nothing3}
+                ${filtered.length === 0 ? html8`<div class="svp-collapse-empty">No matches</div>` : nothing3}
               </div>` : nothing3}
       </div>
     `;
@@ -5981,9 +5990,9 @@ var ProductCardLit = class extends LitElement8 {
     super.disconnectedCallback();
   }
   render() {
-    if (this.validationError || !this.props) return html8``;
+    if (this.validationError || !this.props) return html9``;
     const parsed = cardSchema.safeParse(this.props);
-    if (!parsed.success) return html8``;
+    if (!parsed.success) return html9``;
     const density = this._device === "mobile" ? "compact" : parsed.data.density;
     const { product, visibleFacts } = parsed.data;
     const resolved = this.resolved[product.id];
@@ -6010,7 +6019,7 @@ var ProductCardLit = class extends LitElement8 {
       onPrimaryCtaClick,
       !view.primaryCta.disabled
     );
-    const backFace = html8`<syntro-variant-panel
+    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}
@@ -6022,22 +6031,22 @@ var ProductCardLit = class extends LitElement8 {
         @variant-panel-retry=${this._onVariantRetry}
         @variant-panel-selection-change=${this._onVariantSelectionChange}
       ></syntro-variant-panel>
-      ${view.addError ? html8`<div data-add-to-cart-error>${view.addError}</div>` : nothing4}`;
+      ${view.addError ? html9`<div data-add-to-cart-error>${view.addError}</div>` : nothing4}`;
     const backView = view.face === "back" && view.flipAnimating ? (
       // Mid-flip: both faces coexist inside a preserve-3d container. The
       // front turns away (inert + aria-hidden) while the back turns in.
-      html8`<div data-card-flip @animationend=${__privateGet(this, _onFlipAnimationEnd)}>
+      html9`<div data-card-flip @animationend=${__privateGet(this, _onFlipAnimationEnd)}>
             <div data-face="front" aria-hidden="true" inert>${frontContent}</div>
             <div data-face="back">${backFace}</div>
           </div>`
     ) : view.face === "back" ? (
       // Settled back: flat, untransformed — no flip container, no perspective.
-      html8`<div data-face="back">${backFace}</div>`
-    ) : html8`<div data-face="front">
+      html9`<div data-face="back">${backFace}</div>`
+    ) : html9`<div data-face="front">
               ${frontContent}
-              ${view.addError ? html8`<div data-add-to-cart-error>${view.addError}</div>` : nothing4}
+              ${view.addError ? html9`<div data-add-to-cart-error>${view.addError}</div>` : nothing4}
             </div>`;
-    return html8`
+    return html9`
       <article
         class="sc-product-card"
         data-active-face=${view.face}
@@ -6579,7 +6588,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
     maxWidth: "100%",
     flexShrink: "1"
   };
-  const ctaRow = html8`<div class="sc-product-card__ctas" style=${styleMap(ctasStyles)}>
+  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 ctaStyles = {
@@ -6587,7 +6596,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
       ...disabled2 ? { opacity: "0.5", "pointer-events": "none", cursor: "not-allowed" } : {}
     };
     const ctaLabel = c2.label;
-    return html8`<a
+    return html9`<a
         class="sc-product-card__cta"
         data-product-cta=${i2 === 0 ? "primary" : "secondary"}
         data-critical-text
@@ -6617,7 +6626,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
       >`;
   })}
   </div>`;
-  const ratingOverlay = overlay && product.rating && isVisible("rating") ? html8`<div
+  const ratingOverlay = overlay && product.rating && isVisible("rating") ? html9`<div
           class="sc-product-card__rating sc-product-card__rating--overlay"
           data-product-rating
           data-rating-value=${product.rating.value}
@@ -6633,7 +6642,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
             >(${product.rating.count.toLocaleString()})</span
           >
         </div>` : nothing4;
-  const priceOverlay = overlay && isVisible("price") && (product.price || product.salePrice) ? html8`<div
+  const priceOverlay = overlay && isVisible("price") && (product.price || product.salePrice) ? html9`<div
           class="sc-product-card__price sc-product-card__price--overlay"
           data-product-price
           style=${styleMap(overlayPriceStyles)}
@@ -6645,7 +6654,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
             >${activePriceText}</span
           >
         </div>` : nothing4;
-  const cardMedia = (styles) => imgSrc ? html8`<img
+  const cardMedia = (styles) => imgSrc ? html9`<img
           class="sc-product-card__image"
           data-product-image
           src=${imgSrc}
@@ -6653,16 +6662,21 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
           loading="lazy"
           @error=${onImageError}
           style=${styleMap(styles)}
-        />` : html8`<div
+        />` : html9`<div
           class="sc-product-card__image"
           data-product-image-standin
           aria-hidden="true"
-          style=${styleMap({ ...styles, objectFit: void 0, background: IMAGE_STANDIN_BACKGROUND })}
-        ></div>`;
-  const mediaBlock = overlay ? html8`<div class="sc-product-card__media" style=${styleMap(mediaWrapperStyles)}>
+          style=${styleMap({
+    ...styles,
+    objectFit: void 0,
+    position: "relative",
+    background: IMAGE_STANDIN_BACKGROUND
+  })}
+        >${standinMonogram(product.name)}</div>`;
+  const mediaBlock = overlay ? html9`<div class="sc-product-card__media" style=${styleMap(mediaWrapperStyles)}>
         ${cardMedia(overlayImgStyles)} ${ratingOverlay}${priceOverlay}
       </div>` : cardMedia(imageStyles);
-  return html8`
+  return html9`
     <div class="sc-product-card__grid" data-product-card-grid style=${styleMap(rootGridStyles)}>
       ${mediaBlock}
       <div class="sc-product-card__content" style=${styleMap(contentColStyles)}>
@@ -6729,7 +6743,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
   // products to their booker instead — see detail-cta.ts.
   (() => {
     const navCta = pickDetailCta(ctas);
-    return navCta?.href ? html8`<a
+    return navCta?.href ? html9`<a
                     data-product-name-link
                     href=${navCta.href}
                     target=${navCta.target ?? "_self"}
@@ -6739,7 +6753,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
   })()}</h3>
           ${// On compact the rating renders as an image OVERLAY pill (item 2),
   // so it is omitted from the header identity row here.
-  !overlay && product.rating && isVisible("rating") ? html8`<div
+  !overlay && product.rating && isVisible("rating") ? html9`<div
                 class="sc-product-card__rating"
                 data-product-rating
                 data-rating-value=${product.rating.value}
@@ -6756,7 +6770,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
                 <span class="sc-product-card__rating-count" style=${styleMap({ opacity: "0.65", marginLeft: "0.2rem", display: "var(--sc-card-rating-count-display, inline)" })}>(${product.rating.count.toLocaleString()})</span>
               </div>` : nothing4}
         </div>
-        ${(product.tagline || product.framing) && isVisible("tagline") ? html8`<p
+        ${(product.tagline || product.framing) && isVisible("tagline") ? html9`<p
                 class="sc-product-card__tagline"
                 data-product-tagline
                 style=${styleMap({
@@ -6806,12 +6820,12 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
     if (key === "price") {
       if (overlay) return nothing4;
       if (!isVisible("price") || !product.price && !product.salePrice) return nothing4;
-      return html8`<div
+      return html9`<div
           class="sc-product-card__price"
           data-product-price
           style=${styleMap(priceBlockStyles)}
         >
-          ${hasSalePrice && product.price ? html8`<span
+          ${hasSalePrice && product.price ? html9`<span
                   class="sc-product-card__amount-original"
                   data-product-price-original
                   style=${styleMap(priceOriginalStyles)}
@@ -6824,7 +6838,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
             style=${styleMap(priceSaleStyles)}
             >${activePriceText}</span
           >
-          ${activeCadence ? html8`<span
+          ${activeCadence ? html9`<span
                   class="sc-product-card__cadence"
                   style=${styleMap(priceCadenceStyles)}
                   >${activeCadence}</span
@@ -6833,7 +6847,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
     }
     if (key === "availability") {
       if (!isVisible("availability") || !product.availability) return nothing4;
-      return html8`<span
+      return html9`<span
           class="sc-product-card__availability"
           data-product-availability
           data-availability=${product.availability}
@@ -6843,7 +6857,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
     }
     if (key === "badge") {
       if (!isVisible("badge") || !product.badge) return nothing4;
-      return html8`<span
+      return html9`<span
           class="sc-product-card__badge"
           data-product-badge
           data-tone=${product.badge.tone}
@@ -6864,7 +6878,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
         const allRows = specGroups.flatMap((g) => g.rows);
         const highlights = allRows.slice(0, 4);
         if (highlights.length === 0) return nothing4;
-        return html8`<div
+        return html9`<div
             class="sc-product-card__specs"
             data-density="compact"
             data-clip-ok
@@ -6874,7 +6888,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
             style=${styleMap(specChipRowStyles)}
           >
             ${highlights.map(
-          (r) => html8`<span
+          (r) => html9`<span
                 data-spec-chip
                 style=${styleMap(specChipStyles)}
                 ><span style="font-weight: 600;">${r.name}</span
@@ -6883,9 +6897,9 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
         )}
           </div>`;
       }
-      return html8`<div class="sc-product-card__specs" style=${styleMap(specsContainerStyles)}>
+      return html9`<div class="sc-product-card__specs" style=${styleMap(specsContainerStyles)}>
           ${specGroups.map(
-        (g) => html8`<section
+        (g) => html9`<section
               class="sc-product-card__spec-section"
               data-spec-section=${g.section}
               style=${styleMap(specGroupStyles)}
@@ -6903,7 +6917,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
                 style=${styleMap(specRowsStyles)}
               >
                 ${g.rows.map(
-          (r) => html8`<li
+          (r) => html9`<li
                     data-spec-row
                     data-spec-chip
                     data-attribute-emphasis=${r.emphasis ? "true" : "false"}
@@ -6928,7 +6942,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
                       style=${styleMap(specValueStyles)}
                       >${r.value}</span
                     >
-                    ${r.unit ? html8`<span
+                    ${r.unit ? html9`<span
                             class="sc-product-card__spec-unit"
                             data-spec-unit
                             style="opacity: 0.72;"
@@ -6943,7 +6957,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
     }
     if (key === "framing") {
       if (!isVisible("framing") || !showFraming) return nothing4;
-      return html8`<p
+      return html9`<p
           class="sc-product-card__framing"
           style=${styleMap({
         margin: "0",
@@ -6966,7 +6980,7 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
 }
 function renderProductCard(product, density, resolved, visibleFacts) {
   const articleStyles = _buildArticleStyles(density);
-  return html8`
+  return html9`
     <article
       class="sc-product-card"
       data-density=${density}
@@ -6984,7 +6998,7 @@ function onImageError(e2) {
 }
 
 // src/widgets/ProductComparisonLit.ts
-import { html as html9, LitElement as LitElement9, nothing as nothing5 } from "lit";
+import { html as html10, LitElement as LitElement9, nothing as nothing5 } from "lit";
 var _controller2, _parsed, _ProductComparisonLit_instances, healthProbe_fn2, _scrollListenerEl, _onBodyScroll, syncScrollCue_fn, startBind_fn2, renderDiveDeeper_fn, onDiveDeeper_fn, visibleRows_fn, rowComplete_fn, maxFields_fn, synthesizeRows_fn, renderMatrix_fn;
 var ProductComparisonLit = class extends LitElement9 {
   constructor() {
@@ -7028,7 +7042,7 @@ var ProductComparisonLit = class extends LitElement9 {
     __privateGet(this, _controller2)?.destroy();
   }
   render() {
-    if (this.validationError || !__privateGet(this, _parsed)) return html9``;
+    if (this.validationError || !__privateGet(this, _parsed)) return html10``;
     const parsed = __privateGet(this, _parsed);
     const bodyStyle = (
       // touch-action:pan-y is REQUIRED for the deck swipe-to-cycle to work over a
@@ -7042,7 +7056,7 @@ var ProductComparisonLit = class extends LitElement9 {
       // rows and hands horizontal drags back to the deck's swipe handler.
       "flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain;" + (this.scrollFade ? "mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent);" : "")
     );
-    return html9`
+    return html10`
       <section
         class="sc-product-comparison"
         style="display:flex;flex-direction:column;flex:1 1 auto;padding:2px var(--sc-comparison-inset,12px) var(--sc-comparison-inset,12px);box-sizing:border-box;max-width:100%;min-width:0;min-height:0;max-height:100%;overflow:hidden;"
@@ -7077,7 +7091,7 @@ var ProductComparisonLit = class extends LitElement9 {
             }
           }
         </style>
-        ${parsed.heading ? html9`<h2
+        ${parsed.heading ? html10`<h2
                 class="sc-product-comparison__heading"
                 data-comparison-heading
                 style="flex:0 0 auto;margin:0 0 4px;font:600 14px/1.3 var(--sc-font-family,inherit);color:var(--sc-tile-title-color,inherit);min-width:0;overflow-wrap:break-word;"
@@ -7102,7 +7116,7 @@ var ProductComparisonLit = class extends LitElement9 {
     // it's in-theme; pointer-events:none so it never blocks scroll/taps;
     // gated on scrollFade (content below the current scroll) so it hides
     // at the end. Bounce is dropped under prefers-reduced-motion (style).
-    this.scrollFade ? html9`<span class="sc-product-comparison__scroll-cue" aria-hidden="true"></span>` : nothing5}
+    this.scrollFade ? html10`<span class="sc-product-comparison__scroll-cue" aria-hidden="true"></span>` : nothing5}
         </div>
         ${__privateMethod(this, _ProductComparisonLit_instances, renderDiveDeeper_fn).call(this, parsed)}
       </section>
@@ -7189,7 +7203,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;";
-  return html9`<button
+  return html10`<button
       type="button"
       class="sc-product-comparison__dive-deeper"
       data-dive-deeper
@@ -7268,7 +7282,7 @@ renderMatrix_fn = function(products, rows) {
   const colHeadStyle = "display:block;padding:6px 3px;text-align:left;font-weight:600;min-width:0;";
   const labelStyle = "padding:8px 4px 8px 2px;font-weight:600;font-size:0.75rem;opacity:0.75;border-top:1px solid var(--sc-tile-border-color,rgba(0,0,0,0.08));align-self:stretch;min-width:0;overflow-wrap:break-word;hyphens:auto;";
   const cellStyle = "padding:8px 6px;border-top:1px solid var(--sc-tile-border-color,rgba(0,0,0,0.08));align-self:stretch;min-width:0;overflow-wrap:anywhere;";
-  return html9`
+  return html10`
       <div
         class="sc-product-comparison__matrix"
         data-comparison-matrix
@@ -7302,8 +7316,8 @@ renderMatrix_fn = function(products, rows) {
     const showRatingPill = !compactHeaders && p.rating;
     const nameOverlayStyle = compactHeaders ? "display:block;font-weight:600;font-size:0.66rem;line-height:1.2;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);white-space:normal;overflow-wrap:break-word;min-width:0;" : "display:block;font-weight:600;font-size:0.76rem;line-height:1.25;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);white-space:normal;overflow-wrap:break-word;min-width:0;";
     const mediaStyle = "position:relative;display:block;width:100%;aspect-ratio:var(--sc-comparison-image-aspect, 19 / 10);border-radius:10px;overflow:hidden;background:#e5e7eb;text-decoration:none;";
-    const cardInner = html9`
-              ${imgSrc ? html9`<img
+    const cardInner = html10`
+              ${imgSrc ? html10`<img
                       class="sc-product-comparison__thumb"
                       src=${imgSrc}
                       alt=${p.image?.alt ?? p.name}
@@ -7313,14 +7327,14 @@ renderMatrix_fn = function(products, rows) {
       // Imageless product → branded stand-in tile (imageStandin.ts).
       // The scrim + name overlay below stay identical, so contrast
       // is guaranteed the same way it is over an arbitrary photo.
-      html9`<div
+      html10`<div
                       data-product-image-standin
                       aria-hidden="true"
                       style="position:absolute;inset:0;background:${IMAGE_STANDIN_BACKGROUND};"
-                    ></div>`
+                    >${standinMonogram(p.name)}</div>`
     )}
               <span aria-hidden="true" style="position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(transparent,rgba(0,0,0,.62));"></span>
-              ${showRatingPill && p.rating ? html9`<span
+              ${showRatingPill && p.rating ? html10`<span
                       class="sc-product-comparison__rating-pill"
                       data-product-rating
                       data-rating-value=${p.rating.value}
@@ -7328,7 +7342,7 @@ renderMatrix_fn = function(products, rows) {
                       style=${`${pillBase}left:4px;`}
                       ><span style="color:#f5a623;">★</span><span style="margin-left:0.12rem;">${p.rating.value}</span></span
                     >` : nothing5}
-              ${priceText ? html9`<span
+              ${priceText ? html10`<span
                       class="sc-product-comparison__price"
                       data-critical-text
                       style=${`${pillBase}right:4px;`}
@@ -7340,13 +7354,13 @@ renderMatrix_fn = function(products, rows) {
                 style=${`position:absolute;left:8px;right:8px;bottom:6px;${nameOverlayStyle}`}
                 >${p.name}</span
               >`;
-    return html9`<div
+    return html10`<div
               class="sc-product-comparison__matrix-col"
               role="columnheader"
               data-product-id=${p.id}
               style=${colHeadStyle}
             >
-              ${pdpHref ? html9`<a
+              ${pdpHref ? html10`<a
                       class="sc-product-comparison__media"
                       data-comparison-media
                       data-product-cta="primary"
@@ -7357,19 +7371,19 @@ renderMatrix_fn = function(products, rows) {
                       data-action-id=${navCta?.actionId ?? ""}
                       data-variant=${navCta?.variant ?? ""}
                       style=${mediaStyle}
-                    >${cardInner}</a>` : html9`<div class="sc-product-comparison__media" data-comparison-media style=${mediaStyle}>${cardInner}</div>`}
+                    >${cardInner}</a>` : html10`<div class="sc-product-comparison__media" data-comparison-media style=${mediaStyle}>${cardInner}</div>`}
             </div>`;
   })}
         </div>
         ${rows.map((row) => {
     const cells = [row.valueA, row.valueB, row.valueC, row.valueD];
-    return html9`
+    return html10`
             <div role="row" style="display:contents;">
               <span class="sc-product-comparison__matrix-label" role="rowheader" style=${labelStyle}
                 >${row.label}</span
               >
               ${products.map(
-      (_p, i2) => html9`<span class="sc-product-comparison__matrix-cell" role="cell" style=${cellStyle}
+      (_p, i2) => html10`<span class="sc-product-comparison__matrix-cell" role="cell" style=${cellStyle}
                     >${cells[i2] ?? "\u2014"}</span
                   >`
     )}
@@ -7387,7 +7401,7 @@ ProductComparisonLit.properties = {
 };
 
 // src/widgets/ProductGridLit.ts
-import { html as html10, LitElement as LitElement10, nothing as nothing6 } from "lit";
+import { html as html11, LitElement as LitElement10, nothing as nothing6 } from "lit";
 var _controller3, _ProductGridLit_instances, startBind_fn3;
 var ProductGridLit = class extends LitElement10 {
   constructor() {
@@ -7415,20 +7429,20 @@ var ProductGridLit = class extends LitElement10 {
     __privateGet(this, _controller3)?.destroy();
   }
   render() {
-    if (this.validationError || !this.props) return html10``;
+    if (this.validationError || !this.props) return html11``;
     const parsed = gridSchema.safeParse(this.props);
-    if (!parsed.success) return html10``;
+    if (!parsed.success) return html11``;
     const { products, desktopColumns, heading } = parsed.data;
-    return html10`
+    return html11`
       <section class="sc-product-grid">
-        ${heading ? html10`<h2 data-grid-heading class="sc-product-grid__heading">${heading}</h2>` : nothing6}
+        ${heading ? html11`<h2 data-grid-heading class="sc-product-grid__heading">${heading}</h2>` : nothing6}
         <div
           data-grid-root
           class="sc-product-grid__cells"
           style=${`--sc-product-grid-cols:${desktopColumns}`}
         >
           ${products.map(
-      (p) => html10`<div data-grid-cell class="sc-product-grid__cell">
+      (p) => html11`<div data-grid-cell class="sc-product-grid__cell">
               ${renderProductCard(p, "standard", this.resolved[p.id])}
             </div>`
     )}
@@ -7469,7 +7483,7 @@ ProductGridLit.properties = {
 };
 
 // src/widgets/ProductHeroLit.ts
-import { html as html11, LitElement as LitElement11, nothing as nothing7 } from "lit";
+import { html as html12, LitElement as LitElement11, nothing as nothing7 } from "lit";
 var _controller4, _ProductHeroLit_instances, startBind_fn4;
 var ProductHeroLit = class extends LitElement11 {
   constructor() {
@@ -7497,9 +7511,9 @@ var ProductHeroLit = class extends LitElement11 {
     __privateGet(this, _controller4)?.destroy();
   }
   render() {
-    if (this.validationError || !this.props) return html11``;
+    if (this.validationError || !this.props) return html12``;
     const parsed = heroSchema.safeParse(this.props);
-    if (!parsed.success) return html11``;
+    if (!parsed.success) return html12``;
     const { product, layout, longCopy } = parsed.data;
     const resolved = this.resolved[product.id];
     const imgSrc = resolved?.image ?? product.image?.src;
@@ -7508,34 +7522,34 @@ 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 html11`
+    return html12`
       <section class="sc-product-hero" data-hero-layout=${layout} style=${sectionStyles}>
-        ${imgSrc ? html11`<img
+        ${imgSrc ? html12`<img
                 class="sc-product-hero__image"
                 src=${imgSrc}
                 alt=${product.image?.alt ?? product.name}
                 loading="lazy"
                 style=${imageStyles}
-              />` : html11`<div
+              />` : html12`<div
                 class="sc-product-hero__image"
                 data-product-image-standin
                 aria-hidden="true"
-                style="${imageStyles}background:${IMAGE_STANDIN_BACKGROUND};"
-              ></div>`}
+                style="${imageStyles}background:${IMAGE_STANDIN_BACKGROUND};position:relative;"
+              >${standinMonogram(product.name)}</div>`}
         <div class="sc-product-hero__content" style=${contentStyles}>
           <h2 class="sc-product-hero__name">${product.name}</h2>
-          ${product.tagline ? html11`<p class="sc-product-hero__tagline">${product.tagline}</p>` : nothing7}
-          ${product.price ? html11`<p class="sc-product-hero__price">
-                ${priceText}${product.price.cadence ? html11` <small>${product.price.cadence}</small>` : nothing7}
+          ${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 ? html11`<div
+          ${longCopy ? html12`<div
                 data-hero-longcopy
                 class="sc-product-hero__longcopy"
                 .innerHTML=${sanitizeHtml(longCopy)}
               ></div>` : nothing7}
           <div class="sc-product-hero__ctas">
             ${product.ctas.map(
-      (c2, i2) => html11`<a
+      (c2, i2) => html12`<a
                 class="sc-product-hero__cta"
                 data-product-cta=${i2 === 0 ? "primary" : "secondary"}
                 data-variant=${c2.variant}
@@ -7583,7 +7597,7 @@ ProductHeroLit.properties = {
 };
 
 // src/widgets/ProductRecoCarouselLit.ts
-import { html as html12, LitElement as LitElement12, nothing as nothing8 } from "lit";
+import { html as html13, LitElement as LitElement12, nothing as nothing8 } from "lit";
 import { styleMap as styleMap2 } from "lit/directives/style-map.js";
 var _ProductRecoCarouselLit_instances, healthProbe_fn3;
 var ProductRecoCarouselLit = class extends LitElement12 {
@@ -7605,20 +7619,20 @@ var ProductRecoCarouselLit = class extends LitElement12 {
   }
   render() {
     const items = this._parsed?.items ?? [];
-    if (items.length === 0) return html12``;
-    return html12`
+    if (items.length === 0) return html13``;
+    return html13`
       <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) => html12`
+      (it) => html13`
             <div role="listitem" style="display:contents;">
               <a data-reco-item data-product-cta="primary" href=${it.pdp_href}
                  style=${styleMap2({ position: "relative", flex: "0 0 auto", aspectRatio: "4 / 5", minHeight: "var(--sc-reco-item-min-h, 162px)", maxHeight: "var(--sc-reco-item-max-h, 340px)", borderRadius: "12px", overflow: "hidden", scrollSnapAlign: "start", textDecoration: "none", display: "block", background: "#e5e7eb" })}>
-                ${it.image_url ? html12`<img src=${it.image_url} alt=${it.hook ?? "Recommended product"} loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">` : nothing8}
+                ${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}
                 <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 ? html12`<span style="display:block;font-weight:700;font-size:0.9rem;">${it.price}</span>` : nothing8}
-                  ${it.hook ? html12`<span style="display:block;font-size:0.72rem;line-height:1.2;opacity:.95;">${it.hook}</span>` : nothing8}
+                  ${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}
                 </span>
               </a>
             </div>`
@@ -7653,7 +7667,7 @@ if (!customElements.get("syntro-product-reco-carousel"))
   customElements.define("syntro-product-reco-carousel", ProductRecoCarouselLit);
 
 // src/widgets/PdpTrendingNewsLit.ts
-import { html as html13, LitElement as LitElement13 } from "lit";
+import { html as html14, LitElement as LitElement13 } from "lit";
 
 // src/widgets/entrance.ts
 function armEntranceSettle(onSettle, container, settleMs, fastPath = false) {
@@ -8036,7 +8050,7 @@ var PdpTrendingNewsLit = class extends LitElement13 {
   }
   render() {
     if (!this.data) {
-      return html13`<div data-skeleton class="pdp-trending-news-skeleton">
+      return html14`<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>
@@ -8046,7 +8060,7 @@ var PdpTrendingNewsLit = class extends LitElement13 {
     const items = this.data.items;
     const featured = items[0];
     const rest = items.slice(1);
-    return html13`
+    return html14`
       <section
         class="${this._entering ? "pdp-trending-news is-entering" : "pdp-trending-news"}"
         aria-label="Trending news"
@@ -8063,7 +8077,7 @@ var PdpTrendingNewsLit = class extends LitElement13 {
           <p class="pdp-tn-blurb">${featured.blurb}</p>
         </article>
         ${rest.map(
-      (item) => html13`
+      (item) => html14`
             <article class="pdp-tn-card">
               <div class="pdp-tn-meta">
                 <span class="pdp-tn-dot" aria-hidden="true"></span>
@@ -8085,8 +8099,8 @@ PdpTrendingNewsLit.properties = {
   _entering: { state: true }
 };
 function renderHeadlineLink(item) {
-  if (!item.url) return html13`${item.headline}`;
-  return html13`<a
+  if (!item.url) return html14`${item.headline}`;
+  return html14`<a
     class="pdp-tn-headline-link"
     href=${item.url}
     target="_blank"
@@ -8099,7 +8113,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-tre
 }
 
 // src/widgets/PdpTrendingNewsMagazineLit.ts
-import { html as html14, LitElement as LitElement14 } from "lit";
+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;
@@ -8293,13 +8307,13 @@ var PdpTrendingNewsMagazineLit = class extends LitElement14 {
   }
   render() {
     if (!this.data) {
-      return html14`<div aria-busy="true" class="pdp-tn-mag" style="opacity:0.5;">…</div>`;
+      return html15`<div aria-busy="true" class="pdp-tn-mag" style="opacity:0.5;">…</div>`;
     }
     const items = this.data.items;
     const [lead, ...rest] = items;
-    return html14`
+    return html15`
       <section class="pdp-tn-mag" aria-label="Trending news">
-        ${lead ? html14`<article class="pdp-tn-mag__lead">
+        ${lead ? html15`<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}
@@ -8308,7 +8322,7 @@ var PdpTrendingNewsMagazineLit = class extends LitElement14 {
               <p class="pdp-tn-mag__blurb">${lead.blurb}</p>
             </article>` : ""}
         ${rest.map(
-      (it) => html14`<article class="pdp-tn-mag__item">
+      (it) => html15`<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}
@@ -8325,8 +8339,8 @@ PdpTrendingNewsMagazineLit.properties = {
   data: { attribute: false }
 };
 function renderHeadlineLink2(item) {
-  if (!item.url) return html14`${item.headline}`;
-  return html14`<a
+  if (!item.url) return html15`${item.headline}`;
+  return html15`<a
     class="pdp-tn-mag__headline-link"
     href=${item.url}
     target="_blank"
@@ -8339,7 +8353,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-tre
 }
 
 // src/widgets/PdpTrendingNewsHeroLit.ts
-import { html as html15, LitElement as LitElement15 } from "lit";
+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;
@@ -8544,11 +8558,11 @@ var PdpTrendingNewsHeroLit = class extends LitElement15 {
   }
   render() {
     if (!this.data) {
-      return html15`<div aria-busy="true" class="pdp-tn-hero" style="opacity:0.5;">…</div>`;
+      return html16`<div aria-busy="true" class="pdp-tn-hero" style="opacity:0.5;">…</div>`;
     }
     const [lead, ...rest] = this.data.items;
-    if (!lead) return html15``;
-    return html15`
+    if (!lead) return html16``;
+    return html16`
       <section class="pdp-tn-hero" aria-label="Trending news">
         <article class="pdp-tn-hero__panel">
           <blockquote class="pdp-tn-hero__quote">${lead.blurb}</blockquote>
@@ -8559,9 +8573,9 @@ var PdpTrendingNewsHeroLit = class extends LitElement15 {
           </footer>
           <p class="pdp-tn-hero__headline">${renderHeadlineLink3(lead)}</p>
         </article>
-        ${rest.length ? html15`<div class="pdp-tn-hero__followon">
+        ${rest.length ? html16`<div class="pdp-tn-hero__followon">
               ${rest.map(
-      (it) => html15`<div class="pdp-tn-hero__row">
+      (it) => html16`<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>`
@@ -8575,8 +8589,8 @@ PdpTrendingNewsHeroLit.properties = {
   data: { attribute: false }
 };
 function renderHeadlineLink3(item) {
-  if (!item.url) return html15`${item.headline}`;
-  return html15`<a
+  if (!item.url) return html16`${item.headline}`;
+  return html16`<a
     class="pdp-tn-hero__headline-link"
     href=${item.url}
     target="_blank"
@@ -8589,7 +8603,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-tre
 }
 
 // src/widgets/PdpPeerFeedMasonryLit.ts
-import { html as html16, LitElement as LitElement16 } from "lit";
+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;
@@ -8747,13 +8761,13 @@ var PdpPeerFeedMasonryLit = class extends LitElement16 {
   }
   render() {
     if (!this.data) {
-      return html16`<div aria-busy="true" class="pdp-pf-mas" style="opacity:0.5;">…</div>`;
+      return html17`<div aria-busy="true" class="pdp-pf-mas" style="opacity:0.5;">…</div>`;
     }
-    return html16`
+    return html17`
       <section class="pdp-pf-mas" aria-label="Peer voices">
         <div class="pdp-pf-mas__grid">
           ${this.data.peers.map(
-      (p) => html16`<article
+      (p) => html17`<article
               class="pdp-pf-mas__card"
               style=${`--pf-avatar-hue: ${personaHue(p.persona)};`}
             >
@@ -8781,7 +8795,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-pee
 }
 
 // src/widgets/PdpPeerFeedCarouselLit.ts
-import { html as html17, LitElement as LitElement17, svg } from "lit";
+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;
@@ -9011,15 +9025,15 @@ var PdpPeerFeedCarouselLit = class extends LitElement17 {
   }
   render() {
     if (!this.data) {
-      return html17`<div aria-busy="true" class="pdp-pf-car" style="opacity:0.5;">…</div>`;
+      return html18`<div aria-busy="true" class="pdp-pf-car" style="opacity:0.5;">…</div>`;
     }
-    return html17`
+    return html18`
       <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 html17`<article class="pdp-pf-car__card" style=${`--pf-glyph-hue: ${hue};`}>
+      return html18`<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>
@@ -9044,7 +9058,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-pee
 }
 
 // src/widgets/PdpChartLit.ts
-import { html as html18, LitElement as LitElement18, nothing as nothing9, svg as svg2 } from "lit";
+import { html as html19, LitElement as LitElement18, nothing as nothing9, svg as svg2 } from "lit";
 function formatNum(v) {
   if (v === void 0 || !Number.isFinite(v)) return "\u2014";
   if (Number.isInteger(v)) return v.toLocaleString("en-US");
@@ -9703,7 +9717,7 @@ var PdpChartLit = class extends LitElement18 {
   }
   render() {
     if (!this.data) {
-      return html18`<div data-skeleton class="pdp-chart-skeleton">
+      return html19`<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>`;
@@ -9712,7 +9726,7 @@ var PdpChartLit = class extends LitElement18 {
     const allSeriesOnePoint = this.data.series.every((s4) => s4.points.length <= 1);
     const effectiveKind = isTable ? "table" : this.data.viz_kind === "line" && !allSeriesOnePoint ? "line" : "bar";
     const isMultiSeries = this.data.series.length > 1;
-    return html18`
+    return html19`
       <section
         class="${this._entering ? "pdp-chart pdp-chart-frame is-entering" : "pdp-chart pdp-chart-frame"}"
         aria-label="${this.data.title}"
@@ -9727,7 +9741,7 @@ var PdpChartLit = class extends LitElement18 {
         ${effectiveKind === "bar" ? __privateMethod(this, _PdpChartLit_instances, renderBars_fn).call(this) : nothing9}
         ${effectiveKind === "line" ? __privateMethod(this, _PdpChartLit_instances, renderLine_fn).call(this) : nothing9}
         ${effectiveKind !== "table" && isMultiSeries ? __privateMethod(this, _PdpChartLit_instances, renderLegend_fn).call(this) : nothing9}
-        ${this.data.rationale ? html18`<p class="pdp-chart-rationale">${this.data.rationale}</p>` : nothing9}
+        ${this.data.rationale ? html19`<p class="pdp-chart-rationale">${this.data.rationale}</p>` : nothing9}
       </section>
     `;
   }
@@ -9735,10 +9749,10 @@ var PdpChartLit = class extends LitElement18 {
 _PdpChartLit_instances = new WeakSet();
 renderLegend_fn = function() {
   const data = this.data;
-  return html18`
+  return html19`
       <ol class="pdp-chart-legend" aria-label="Legend">
         ${data.series.map(
-    (s4, idx) => html18`
+    (s4, idx) => html19`
             <li class="pdp-chart-legend-item">
               <span
                 class="pdp-chart-legend-swatch"
@@ -9754,22 +9768,22 @@ renderLegend_fn = function() {
 };
 renderTable_fn = function() {
   const matrix = buildComparisonMatrix(this.data);
-  return html18`
+  return html19`
       <div class="pdp-chart-table-wrap">
         <table class="pdp-chart-table">
           <thead>
             <tr>
               <th></th>
-              ${matrix.colLabels.map((label) => html18`<th>${label}</th>`)}
+              ${matrix.colLabels.map((label) => html19`<th>${label}</th>`)}
             </tr>
           </thead>
           <tbody>
             ${matrix.rowLabels.map(
-    (row, rowIdx) => html18`
+    (row, rowIdx) => html19`
                 <tr class=${rowIdx === matrix.winningRow ? "is-winning" : ""}>
                   <td>${row}</td>
                   ${matrix.cells[rowIdx].map(
-      (cell) => html18`<td class="pdp-chart-numeric-cell">${formatNum(cell)}</td>`
+      (cell) => html19`<td class="pdp-chart-numeric-cell">${formatNum(cell)}</td>`
     )}
                 </tr>
               `
@@ -9784,7 +9798,7 @@ renderBars_fn = function() {
   const { buckets, yMax } = buildBarBuckets(data);
   const ticks = niceTicks(yMax);
   const scaleMax = Math.max(yMax, ticks[ticks.length - 1]);
-  return html18`
+  return html19`
       <div
         class="pdp-chart-bars"
         role="figure"
@@ -9793,7 +9807,7 @@ renderBars_fn = function() {
       >
         <div class="pdp-chart-yaxis" aria-hidden="true">
           ${ticks.map(
-    (t2) => html18`
+    (t2) => html19`
               <span
                 class="pdp-chart-yaxis-tick"
                 style="bottom:${t2 / scaleMax * 100}%"
@@ -9805,7 +9819,7 @@ renderBars_fn = function() {
         </div>
         <div class="pdp-chart-bars-area">
           ${ticks.map(
-    (t2) => html18`
+    (t2) => html19`
               <div
                 class="pdp-chart-bars-gridline"
                 style="bottom:${t2 / scaleMax * 100}%"
@@ -9815,11 +9829,11 @@ renderBars_fn = function() {
   )}
           <div class="pdp-chart-bars-baseline" aria-hidden="true"></div>
           ${buckets.map(
-    (bucket, bIdx) => html18`
+    (bucket, bIdx) => html19`
               <div class="pdp-chart-bars-bucket">
                 <div class="pdp-chart-bars-stack">
                   ${bucket.bars.map(
-      (bar, barIdxInBucket) => html18`
+      (bar, barIdxInBucket) => html19`
                       <div
                         class="pdp-chart-bar"
                         style="
@@ -9830,7 +9844,7 @@ renderBars_fn = function() {
                         role="img"
                         aria-label="${bucket.label} — ${bar.seriesName}: ${formatNum(bar.value)}"
                       >
-                        ${bucket.bars.length === 1 ? html18`<span class="pdp-chart-bar-value"
+                        ${bucket.bars.length === 1 ? html19`<span class="pdp-chart-bar-value"
                               >${formatNum(bar.value)}</span
                             >` : nothing9}
                       </div>
@@ -9850,7 +9864,7 @@ renderLine_fn = function() {
   const { series, xLabels, yMax } = buildLinePaths(data);
   const ticks = niceTicks(yMax);
   const scaleMax = Math.max(yMax, ticks[ticks.length - 1]);
-  return html18`
+  return html19`
       <div
         class="pdp-chart-line"
         role="figure"
@@ -9860,7 +9874,7 @@ renderLine_fn = function() {
       >
         <div class="pdp-chart-line-yaxis" aria-hidden="true">
           ${ticks.map(
-    (t2) => html18`
+    (t2) => html19`
               <span
                 class="pdp-chart-yaxis-tick"
                 style="bottom:${t2 / scaleMax * 100}%"
@@ -9909,7 +9923,7 @@ renderLine_fn = function() {
         style="--col-count:${xLabels.length}"
         aria-hidden="true"
       >
-        ${xLabels.map((label) => html18`<span>${label}</span>`)}
+        ${xLabels.map((label) => html19`<span>${label}</span>`)}
       </div>
     `;
 };
@@ -9922,7 +9936,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-cha
 }
 
 // src/widgets/PdpChartBarStackedLit.ts
-import { html as html19, LitElement as LitElement19 } from "lit";
+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;
@@ -10023,16 +10037,16 @@ var PdpChartBarStackedLit = class extends LitElement19 {
     ensureStyles();
   }
   render() {
-    if (!this.data) return html19`<div class="pdp-chart-bar" style="opacity:0.5;">…</div>`;
+    if (!this.data) return html20`<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 html19`
+    return html20`
       <section class="pdp-chart-bar" aria-label=${title}>
         <h3 class="pdp-chart-bar__title">${title}</h3>
-        ${series.length > 1 ? html19`<div class="pdp-chart-bar__legend">
+        ${series.length > 1 ? html20`<div class="pdp-chart-bar__legend">
               ${series.map(
-      (s4, i2) => html19`<span
+      (s4, i2) => html20`<span
                   ><span
                     class="pdp-chart-bar__legend-dot"
                     style=${`background: ${PALETTE[i2 % PALETTE.length]};`}
@@ -10042,14 +10056,14 @@ var PdpChartBarStackedLit = class extends LitElement19 {
     )}
             </div>` : ""}
         ${allX.map(
-      (x) => html19`<div class="pdp-chart-bar__row">
+      (x) => html20`<div class="pdp-chart-bar__row">
             <div class="pdp-chart-bar__row-label">${x}</div>
             <div class="pdp-chart-bar__row-bars">
               ${series.map((s4, i2) => {
         const point = s4.points.find((p) => p.x === x);
         if (!point) return "";
         const pct = point.y / max * 100;
-        return html19`<div class="pdp-chart-bar__bar-track">
+        return html20`<div class="pdp-chart-bar__bar-track">
                   <div
                     class="pdp-chart-bar__bar-fill"
                     style=${`width: ${pct.toFixed(1)}%; background: ${PALETTE[i2 % PALETTE.length]};`}
@@ -10072,7 +10086,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-cha
 }
 
 // src/widgets/PdpChartMetricPullLit.ts
-import { html as html20, LitElement as LitElement20, svg as svg3 } from "lit";
+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;
@@ -10197,10 +10211,10 @@ var PdpChartMetricPullLit = class extends LitElement20 {
     ensureStyles2();
   }
   render() {
-    if (!this.data) return html20`<div class="pdp-chart-met" style="opacity:0.5;">…</div>`;
+    if (!this.data) return html21`<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 html20``;
+    if (!first || first.points.length === 0) return html21``;
     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;
@@ -10213,7 +10227,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 html20`
+    return html21`
       <section class="pdp-chart-met" aria-label=${title}>
         <div class="pdp-chart-met__metric">
           <span class="pdp-chart-met__big">${peak.y}</span>
@@ -10245,7 +10259,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-cha
 }
 
 // src/widgets/PdpQaAccordionLit.ts
-import { html as html21, LitElement as LitElement21 } from "lit";
+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;
@@ -10340,11 +10354,11 @@ var PdpQaAccordionLit = class extends LitElement21 {
     ensureStyles3();
   }
   render() {
-    if (!this.data) return html21`<div class="pdp-qa-acc" style="opacity:0.5;">…</div>`;
-    return html21`
+    if (!this.data) return html22`<div class="pdp-qa-acc" style="opacity:0.5;">…</div>`;
+    return html22`
       <section class="pdp-qa-acc" aria-label="Frequently asked questions">
         ${this.data.items.map(
-      (it) => html21`<details class="pdp-qa-acc__item">
+      (it) => html22`<details class="pdp-qa-acc__item">
             <summary>
               <span class="pdp-qa-acc__chev" aria-hidden="true"></span>
               <span>${it.question}</span>
@@ -10364,7 +10378,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-qa-
 }
 
 // src/widgets/PdpQaSideBySideLit.ts
-import { html as html22, LitElement as LitElement22 } from "lit";
+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;
@@ -10451,11 +10465,11 @@ var PdpQaSideBySideLit = class extends LitElement22 {
     ensureStyles4();
   }
   render() {
-    if (!this.data) return html22`<div class="pdp-qa-side" style="opacity:0.5;">…</div>`;
-    return html22`
+    if (!this.data) return html23`<div class="pdp-qa-side" style="opacity:0.5;">…</div>`;
+    return html23`
       <section class="pdp-qa-side" aria-label="Q&A">
         ${this.data.items.map(
-      (it) => html22`<div class="pdp-qa-side__item">
+      (it) => html23`<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>`
@@ -10472,7 +10486,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-qa-
 }
 
 // src/widgets/PdpRegionalFullBleedLit.ts
-import { html as html23, LitElement as LitElement23 } from "lit";
+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;
@@ -10576,9 +10590,9 @@ var PdpRegionalFullBleedLit = class extends LitElement23 {
     ensureStyles5();
   }
   render() {
-    if (!this.data) return html23`<div class="pdp-reg-fb" style="opacity:0.5;">…</div>`;
+    if (!this.data) return html24`<div class="pdp-reg-fb" style="opacity:0.5;">…</div>`;
     const d = this.data;
-    return html23`
+    return html24`
       <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">
@@ -10621,7 +10635,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-reg
 }
 
 // src/widgets/PdpRegionalInlineNoteLit.ts
-import { html as html24, LitElement as LitElement24 } from "lit";
+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;
@@ -10695,9 +10709,9 @@ var PdpRegionalInlineNoteLit = class extends LitElement24 {
     ensureStyles6();
   }
   render() {
-    if (!this.data) return html24`<div class="pdp-reg-in" style="opacity:0.5;">…</div>`;
+    if (!this.data) return html25`<div class="pdp-reg-in" style="opacity:0.5;">…</div>`;
     const d = this.data;
-    return html24`
+    return html25`
       <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"/>
@@ -10725,7 +10739,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-reg
 }
 
 // src/widgets/PdpSlotPlaceholderLit.ts
-import { html as html25, LitElement as LitElement25 } from "lit";
+import { html as html26, LitElement as LitElement25 } from "lit";
 var PdpSlotPlaceholderLit = class extends LitElement25 {
   constructor() {
     super(...arguments);
@@ -10735,7 +10749,7 @@ var PdpSlotPlaceholderLit = class extends LitElement25 {
     return this;
   }
   render() {
-    return html25`
+    return html26`
       <div class="pdp-slot-placeholder" data-placeholder>
         <p>${this.label}</p>
         <small>Ask in chat to explore this product further.</small>
@@ -10751,7 +10765,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-slo
 }
 
 // src/widgets/PdpRibbonLit.ts
-import { html as html26, LitElement as LitElement26, nothing as nothing10 } from "lit";
+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;
@@ -10918,7 +10932,7 @@ var PdpRibbonLit = class extends LitElement26 {
   }
   render() {
     const cls = this._entering ? "syntro-pdp-ribbon is-entering" : "syntro-pdp-ribbon";
-    return html26`
+    return html27`
       <div class="${cls}" role="status" aria-live="polite">
         <span class="syntro-pdp-ribbon-sweep" aria-hidden="true"></span>
         <svg
@@ -10938,7 +10952,7 @@ var PdpRibbonLit = class extends LitElement26 {
         </svg>
         <p class="syntro-pdp-ribbon-copy">
           Tailored to your conversation about
-          ${this.topic ? html26` <span class="syntro-pdp-ribbon-topic">${this.topic}</span>.` : nothing10}
+          ${this.topic ? html27` <span class="syntro-pdp-ribbon-topic">${this.topic}</span>.` : nothing10}
           <span class="syntro-pdp-ribbon-trail"> ${this.subtitle}</span>
         </p>
       </div>
@@ -10955,7 +10969,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-rib
 }
 
 // src/widgets/PdpQaLit.ts
-import { html as html27, LitElement as LitElement27, nothing as nothing11 } from "lit";
+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;
@@ -11152,19 +11166,19 @@ var PdpQaLit = class extends LitElement27 {
   }
   render() {
     if (!this.data) {
-      return html27`<div data-skeleton class="pdp-qa-skeleton">
+      return html28`<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 html27`
+    return html28`
       <section
         class="${this._entering ? "pdp-qa is-entering" : "pdp-qa"}"
         aria-label="Frequently asked questions"
       >
         ${this.data.items.map(
-      (item, idx) => html27`
+      (item, idx) => html28`
             <details class="pdp-qa-item" ?open=${idx === 0}>
               <summary class="pdp-qa-question">
                 <span>${item.question}</span>
@@ -11193,7 +11207,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-qa"
 }
 
 // src/widgets/PdpRegionalLit.ts
-import { html as html28, LitElement as LitElement28 } from "lit";
+import { html as html29, LitElement as LitElement28 } from "lit";
 function ensureRegionalStyles() {
   if (typeof document === "undefined") return;
   if (document.getElementById("syntro-pdp-regional-style")) return;
@@ -11417,11 +11431,11 @@ var PdpRegionalLit = class extends LitElement28 {
   }
   render() {
     if (!this.data) {
-      return html28`<div data-skeleton class="pdp-qa-skeleton" style="height:200px;">
+      return html29`<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 html28`
+    return html29`
       <section
         class="${this._entering ? "pdp-regional is-entering" : "pdp-regional"}"
         aria-label="Regional and temporal context"
@@ -11466,7 +11480,7 @@ if (typeof customElements !== "undefined" && !customElements.get("syntro-pdp-reg
 }
 
 // src/widgets/PdpPeerFeedLit.ts
-import { html as html29, LitElement as LitElement29 } from "lit";
+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;
@@ -11713,19 +11727,19 @@ var PdpPeerFeedLit = class extends LitElement29 {
   }
   render() {
     if (!this.data) {
-      return html29`<div data-skeleton class="pdp-peer-skeleton">
+      return html30`<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 html29`
+    return html30`
       <section
         class="${this._entering ? "pdp-peer-feed is-entering" : "pdp-peer-feed"}"
         aria-label="Users like you"
       >
         ${this.data.peers.map(
-      (peer) => html29`
+      (peer) => html30`
             <article class="pdp-peer-post">
               <div class="pdp-peer-avatar" aria-hidden="true">${peer.initials}</div>
               <div class="pdp-peer-body">
@@ -11963,4 +11977,4 @@ export {
    * SPDX-License-Identifier: BSD-3-Clause
    *)
 */
-//# sourceMappingURL=chunk-XZVLFHRB.js.map
+//# sourceMappingURL=chunk-LFYTHTQS.js.map