diff --git a/blocks/table/table.css b/blocks/table/table.css
index de1df9a5..1dcac7cf 100644
--- a/blocks/table/table.css
+++ b/blocks/table/table.css
@@ -33,3 +33,124 @@
 .table.striped tbody tr:nth-child(odd) {
   background-color: var(--color-gray-200);
 }
+
+/* Comparison variant: heading row + heading column, 2x first column width */
+.table.comparison .table-comparison-scroll {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.table.comparison .table-comparison-scroll table {
+  width: 100%;
+  min-width: 600px;
+  table-layout: fixed;
+  border-collapse: collapse;
+  border: 1px solid #e0e0e0;
+}
+
+.table.comparison .table-comparison-scroll th,
+.table.comparison .table-comparison-scroll td {
+  padding: 16px 12px;
+  border: 1px solid #e0e0e0;
+  vertical-align: top;
+}
+
+.table.comparison .table-comparison-scroll thead th {
+  background-color: #ececec;
+  font-weight: 700;
+  text-align: center;
+  color: #333;
+}
+
+.table.comparison .table-comparison-scroll tbody th {
+  background-color: #fff;
+  font-weight: 600;
+  text-align: left;
+  color: #333;
+  vertical-align: middle;
+}
+
+.table.comparison .table-comparison-scroll thead th:first-child {
+  text-align: left;
+  color: #6c757d;
+  font-weight: 600;
+}
+
+/* Heading column: flex on <p>, image left, text right, vertically centered */
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content p {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0;
+}
+
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content p picture,
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content p img {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  margin: 0;
+}
+
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content p img {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content p a {
+  color: #06c;
+  text-decoration: none;
+  flex: 1;
+  min-width: 0;
+}
+
+.table.comparison .table-comparison-scroll tbody th .table-comparison-cell-content p a:hover {
+  text-decoration: underline;
+}
+
+.table.comparison .table-comparison-scroll tbody td {
+  background-color: #fff;
+  text-align: center;
+  color: #333;
+}
+
+.table.comparison .table-comparison-scroll thead tr.table-comparison-row-header-empty th,
+.table.comparison .table-comparison-scroll tbody tr.table-comparison-row-header-empty th,
+.table.comparison .table-comparison-scroll tbody tr.table-comparison-row-header-empty td {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+/* Comparison table: colors row – round swatches from pdp/color-swatches.css */
+.table.comparison .table-comparison-scroll .table-comparison-color-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.table.comparison .table-comparison-scroll .table-comparison-color-swatch {
+  width: 24px;
+  height: 24px;
+  border: 1px solid #333f48;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.table.comparison .table-comparison-scroll .table-comparison-color-inner {
+  width: 16px;
+  height: 16px;
+  border: 1px solid #333f48;
+  border-radius: 50%;
+}
+
+.table.comparison .table-comparison-scroll .table-comparison-color-text {
+  font-size: 0.9em;
+  color: #666;
+}
diff --git a/blocks/table/table.js b/blocks/table/table.js
index afe00f81..74decde2 100644
--- a/blocks/table/table.js
+++ b/blocks/table/table.js
@@ -1,3 +1,40 @@
+import { toClassName } from '../../scripts/aem.js';
+
+const COLOR_SWATCHES_CSS_PATH = '/blocks/pdp/color-swatches.css';
+
+/**
+ * Fetch color-swatches.css, parse --color-* names and the rule body, inject a scoped
+ * <style> so .table.comparison .table-comparison-color-swatch gets the same variables,
+ * and return the set of color names for matching.
+ * @returns {Promise<Set<string>>}
+ */
+async function loadColorSwatchesForTable() {
+  const base = typeof window.hlx?.codeBasePath === 'string' ? window.hlx.codeBasePath : '';
+  const url = `${base}${COLOR_SWATCHES_CSS_PATH}`;
+  const res = await fetch(url);
+  if (!res.ok) return new Set();
+  const css = await res.text();
+
+  const names = new Set([...css.matchAll(/--color-([a-z0-9-]+):/g)].map((m) => m[1]));
+
+  const open = css.indexOf('{');
+  if (open === -1) return names;
+  let depth = 1;
+  let pos = open + 1;
+  while (depth && pos < css.length) {
+    if (css[pos] === '{') depth += 1;
+    else if (css[pos] === '}') depth -= 1;
+    pos += 1;
+  }
+  const body = css.slice(open + 1, pos - 1);
+
+  const style = document.createElement('style');
+  style.textContent = `.table.comparison .table-comparison-color-swatch { ${body} }`;
+  document.head.appendChild(style);
+
+  return names;
+}
+
 function buildRow(row, cellType = 'td') {
   const tr = document.createElement('tr');
   [...row.children].forEach((col) => {
@@ -20,18 +57,126 @@ function buildRowWithRowHeaders(row) {
   return tr;
 }
 
+function buildComparisonTable(rows) {
+  const table = document.createElement('table');
+  const colCount = rows[0]?.children?.length || 0;
+
+  // colgroup: first column 2x width of others (2/(n+1) vs 1/(n+1))
+  if (colCount > 0) {
+    const colgroup = document.createElement('colgroup');
+    const firstPct = (200 / (1 + colCount)).toFixed(2);
+    const otherPct = (100 / (1 + colCount)).toFixed(2);
+    const firstCol = document.createElement('col');
+    firstCol.style.width = `${firstPct}%`;
+    colgroup.appendChild(firstCol);
+    for (let i = 1; i < colCount; i += 1) {
+      const col = document.createElement('col');
+      col.style.width = `${otherPct}%`;
+      colgroup.appendChild(col);
+    }
+    table.appendChild(colgroup);
+  }
+
+  const thead = document.createElement('thead');
+  if (rows.length > 0) {
+    const headerRow = buildRow(rows[0], 'th');
+    const firstHeaderCell = headerRow.querySelector('th');
+    if (firstHeaderCell && !firstHeaderCell.querySelector('img') && !firstHeaderCell.textContent.trim()) {
+      headerRow.classList.add('table-comparison-row-header-empty');
+    }
+    thead.appendChild(headerRow);
+  }
+
+  const tbody = document.createElement('tbody');
+  rows.slice(1).forEach((row) => {
+    const tr = document.createElement('tr');
+    let rowHeaderEmpty = false;
+    [...row.children].forEach((col, index) => {
+      const cell = document.createElement(index === 0 ? 'th' : 'td');
+      if (index === 0) {
+        cell.setAttribute('scope', 'row');
+        const wrap = document.createElement('div');
+        wrap.className = 'table-comparison-cell-content';
+        wrap.innerHTML = col.innerHTML;
+        cell.appendChild(wrap);
+        rowHeaderEmpty = !wrap.querySelector('img') && !wrap.textContent.trim();
+      } else {
+        cell.innerHTML = col.innerHTML;
+      }
+      tr.appendChild(cell);
+    });
+    if (rowHeaderEmpty) tr.classList.add('table-comparison-row-header-empty');
+    tbody.appendChild(tr);
+  });
+
+  table.append(thead, tbody);
+  return table;
+}
+
+function createColorSwatch(slug, label) {
+  const swatch = document.createElement('div');
+  swatch.className = 'table-comparison-color-swatch';
+  swatch.title = label || slug;
+  const inner = document.createElement('div');
+  inner.className = 'table-comparison-color-inner';
+  inner.style.backgroundColor = `var(--color-${slug})`;
+  swatch.appendChild(inner);
+  return swatch;
+}
+
+function replaceColorsRowWithSwatches(table, colorNames) {
+  if (!colorNames?.size) return;
+  const tbody = table.querySelector('tbody');
+  if (!tbody) return;
+  tbody.querySelectorAll('tr').forEach((tr) => {
+    tr.querySelectorAll('td').forEach((td) => {
+      const text = td.textContent.trim();
+      const tokens = text.split(',').map((t) => t.trim()).filter(Boolean);
+      if (tokens.length === 0) return;
+      const hasMatchingColor = tokens.some((t) => colorNames.has(toClassName(t)));
+      if (!hasMatchingColor) return;
+      const swatchContainer = document.createElement('div');
+      swatchContainer.className = 'table-comparison-color-swatches';
+      tokens.forEach((token) => {
+        const slug = toClassName(token);
+        if (colorNames.has(slug)) {
+          swatchContainer.appendChild(createColorSwatch(slug, token));
+        } else {
+          const span = document.createElement('span');
+          span.className = 'table-comparison-color-text';
+          span.textContent = token;
+          swatchContainer.appendChild(span);
+        }
+      });
+      td.textContent = '';
+      td.appendChild(swatchContainer);
+    });
+  });
+}
+
 export default function decorate(block) {
   const table = document.createElement('table');
   const rows = [...block.children];
   const hasRowHeaders = block.classList.contains('row-headers');
+  const isComparison = block.classList.contains('comparison');
 
-  if (hasRowHeaders) {
+  if (isComparison) {
+    const comparisonTable = buildComparisonTable(rows);
+    loadColorSwatchesForTable().then((colorNames) => {
+      replaceColorsRowWithSwatches(comparisonTable, colorNames);
+    });
+    const scrollWrapper = document.createElement('div');
+    scrollWrapper.className = 'table-comparison-scroll';
+    scrollWrapper.appendChild(comparisonTable);
+    block.replaceChildren(scrollWrapper);
+  } else if (hasRowHeaders) {
     // build table with row headers (first column is header)
     const tbody = document.createElement('tbody');
     rows.forEach((row) => {
       tbody.appendChild(buildRowWithRowHeaders(row));
     });
     table.appendChild(tbody);
+    block.replaceChildren(table);
   } else {
     // build table head
     const thead = document.createElement('thead');
@@ -46,7 +191,6 @@ export default function decorate(block) {
     });
 
     table.append(thead, tbody);
+    block.replaceChildren(table);
   }
-
-  block.replaceChildren(table);
 }
diff --git a/package.json b/package.json
index 8d2390b0..1faf161b 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "description": "Starter project for Adobe Helix",
   "scripts": {
     "lint:js": "eslint .",
-    "lint:css": "stylelint blocks/**/*.css styles/*.css",
+    "lint:css": "stylelint blocks/**/*.css styles/*.css widgets/**/*.css",
     "lint": "npm run lint:js && npm run lint:css",
     "build:json": "npm run build:json:models && npm run build:json:definitions && npm run build:json:filters",
     "build:json:models": "merge-json-cli -i \"ue/models/component-models.json\" -o \"component-models.json\"",
diff --git a/scripts/scripts.js b/scripts/scripts.js
index d121f91e..ab097c68 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -621,6 +621,7 @@ function decorateFullWidthBlocks(main) {
  */
 function decorateButtons(main) {
   main.querySelectorAll('p a[href]').forEach((a) => {
+    if (a.closest('[data-button-decoration="disabled"]')) return;
     a.title = a.title || a.textContent;
     const p = a.closest('p');
     const text = a.textContent.trim();
diff --git a/widgets/compare-products/compare-products.css b/widgets/compare-products/compare-products.css
new file mode 100644
index 00000000..859d65fd
--- /dev/null
+++ b/widgets/compare-products/compare-products.css
@@ -0,0 +1,320 @@
+/* Compare Products Widget – layout only; typography, buttons, colors inherit from site */
+
+/* Swatch colors aligned with blocks/pdp/color-swatches.css */
+.compare-products-product-color {
+  width: 24px;
+  height: 24px;
+  border: var(--border-s) solid var(--color-gray-400);
+  border-radius: 50%;
+  padding: 0;
+  cursor: pointer;
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.compare-products-product-color:hover {
+  transform: scale(1.1);
+}
+
+.compare-products-product-color.selected {
+  border-width: 2px;
+  border-color: var(--color-charcoal);
+  box-shadow: 0 0 0 2px var(--color-background);
+}
+
+.compare-products .compare-products-product-color {
+  /* blacks */
+  --color-black: #000;
+  --color-shadow-black: #000;
+  --color-1100001: #100;
+  --color-1100002: #100;
+  --color-black-stainless-metal-finish: #161616;
+
+  /* grays */
+  --color-onyx: #353935;
+  --color-abalone-grey: #3b363b;
+  --color-graphite: #414141;
+  --color-nano-gray: #5b6770;
+  --color-graphite-metal-finish: #606060;
+  --color-slate: #666;
+  --color-pearl-gray: #858583;
+  --color-black-diamond: #928b8b;
+  --color-brushed-stainless: #b0b3b7;
+  --color-grey: #e5e4e2;
+  --color-platinum: #e5e4e2;
+
+  /* whites */
+  --color-white: #fff;
+  --color-polar-white: #fff;
+
+  /* browns */
+  --color-espresso: #67564e;
+  --color-copper-metal-finish: #f2a57e;
+  --color-reflection: #f2a57e;
+  --color-brushed-stainless-metal-finish: #b5aa9d;
+  --color-brushed-gold: #ccba78;
+  --color-cream: #fffdd0;
+
+  /* reds */
+  --color-red: #c03;
+  --color-candy-apple: #c00310;
+  --color-candy-apple-red: #c00310;
+  --color-ruby: #e01160;
+
+  /* oranges */
+  --color-orange: #ffa600;
+  --color-cinnamon: #d2691e;
+
+  /* yellows */
+  --color-yellow: #f7f700;
+
+  /* greens */
+  --color-sour-apple-green: #e3edb5;
+  --color-turquoise: #30d5c7;
+
+  /* blues */
+  --color-cobalt: #0047ab;
+  --color-blue: #1131d4;
+  --color-matte-navy: #00263e;
+  --color-midnight-blue: #00263e;
+
+  /* purples */
+  --color-purple: #800080;
+
+  /* undefined */
+  --color-color-not-available: ;
+}
+
+.compare-products {
+  max-width: var(--site-width);
+  margin: 0 auto;
+  padding: var(--spacing-400) var(--spacing-600);
+  overflow-x: auto;
+  position: relative;
+  -webkit-overflow-scrolling: touch;
+}
+
+.compare-products::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 48px;
+  background: linear-gradient(to right, transparent, var(--color-background));
+  pointer-events: none;
+  z-index: 1;
+}
+
+@media (width >= 900px) {
+  .compare-products::after {
+    display: none;
+  }
+}
+
+.compare-products-scroll {
+  min-width: 900px;
+  display: grid;
+  grid-template-columns: minmax(120px, auto) repeat(var(--compare-cols, 2), 1fr);
+  gap: 0;
+}
+
+.compare-products-empty {
+  margin: var(--spacing-200) 0;
+}
+
+/* Add-a-product grid (Full Size Blenders from index.json) */
+.compare-products-products {
+  grid-column: 2 / -1;
+  display: grid;
+  grid-template-columns: repeat(var(--compare-cols, 2), 1fr);
+  gap: var(--spacing-400);
+  border-bottom: var(--border-m) solid var(--color-gray-300);
+  padding-bottom: var(--spacing-400);
+  margin-bottom: var(--spacing-300);
+}
+
+.compare-products-products:has(.compare-products-add-heading) {
+  display: block;
+  grid-column: 1 / -1;
+}
+
+.compare-products-add-heading {
+  margin: 0 0 var(--spacing-300);
+  font-size: var(--heading-font-size-m);
+}
+
+.compare-products-add-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--spacing-400);
+}
+
+.compare-products-add-card .compare-products-add-to-comparison {
+  margin-top: var(--spacing-200);
+  margin-bottom: var(--spacing-200);
+}
+
+.compare-products-add-empty {
+  margin: var(--spacing-200) 0;
+}
+
+.compare-products-add-section {
+  margin-top: var(--spacing-400);
+  padding-top: var(--spacing-400);
+  border-top: var(--border-m) solid var(--color-gray-300);
+}
+
+.compare-products-product {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--spacing-200);
+}
+
+.compare-products-product-remove {
+  position: absolute;
+  top: var(--spacing-80);
+  right: var(--spacing-80);
+}
+
+.compare-products-product-image-wrap {
+  width: 100%;
+  max-width: 280px;
+  margin-bottom: 0;
+  aspect-ratio: 1;
+}
+
+.compare-products-product-image-wrap img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.compare-products-product-colors {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--spacing-60);
+  margin-bottom: var(--spacing-200);
+}
+
+.compare-products-product-name {
+  margin: 0 0 var(--spacing-100);
+  text-align: center;
+}
+
+.compare-products-product-price {
+  margin-bottom: var(--spacing-100);
+  text-align: center;
+}
+
+.compare-products-product-price-now {
+  display: block;
+}
+
+.compare-products-product-placeholder {
+  justify-content: center;
+  min-height: 200px;
+}
+
+.compare-products-product-placeholder-msg {
+  margin: var(--spacing-200) 0;
+  text-align: center;
+}
+
+/* Features section */
+.compare-products-features {
+  grid-column: 1 / -1;
+}
+
+.compare-products-features-table {
+  display: grid;
+  grid-template-columns: minmax(120px, auto) repeat(var(--compare-cols, 2), minmax(0, 1fr));
+  gap: 0;
+  min-width: 0;
+}
+
+.compare-products-features-row {
+  display: contents;
+}
+
+.compare-products-features-cell {
+  padding: var(--spacing-100) var(--spacing-200);
+  border: var(--border-s) solid var(--color-gray-200);
+  border-top: 0;
+  border-left: 0;
+}
+
+.compare-products-features-row:first-of-type .compare-products-features-cell {
+  border-top: var(--border-s) solid var(--color-gray-200);
+}
+
+.compare-products-features-cell.row-even {
+  background-color: var(--color-background);
+}
+
+.compare-products-features-cell.row-odd {
+  background-color: var(--color-gray-200);
+}
+
+.compare-products-features-cell.feature-name {
+  border-left: var(--border-s) solid var(--color-gray-200);
+  font-weight: var(--weight-medium);
+}
+
+.compare-products-features-cell-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25em;
+  height: 1.25em;
+  border-radius: 50%;
+  background-color: var(--color-charcoal);
+  color: var(--color-white);
+  font-size: 0.75em;
+  line-height: 1;
+  font-weight: bold;
+}
+
+/* When compare-products param filtered columns: table reflows so visible columns share width */
+.widget-container.compare-products-columns-filtered .table.comparison .table-comparison-scroll table {
+  table-layout: auto;
+  width: 100%;
+}
+
+.widget-container.compare-products-columns-filtered .table.comparison .table-comparison-scroll th.compare-products-column-visible,
+.widget-container.compare-products-columns-filtered .table.comparison .table-comparison-scroll td.compare-products-column-visible {
+  min-width: 120px;
+}
+
+/* Remove-from-comparison button on each product column (compare-products param flow) */
+.table.comparison .table-comparison-scroll thead th.compare-products-column-with-remove {
+  position: relative;
+}
+
+.table.comparison .table-comparison-scroll .compare-products-remove-from-comparison {
+  position: absolute;
+  top: var(--spacing-80);
+  right: var(--spacing-80);
+  z-index: 1;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--color-gray-200);
+  color: var(--color-charcoal);
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.table.comparison .table-comparison-scroll .compare-products-remove-from-comparison:hover {
+  background: var(--color-gray-300);
+}
+
diff --git a/widgets/compare-products/compare-products.html b/widgets/compare-products/compare-products.html
new file mode 100644
index 00000000..3fea5ed1
--- /dev/null
+++ b/widgets/compare-products/compare-products.html
@@ -0,0 +1,8 @@
+<div class="compare-products">
+  <div class="compare-products-scroll">
+    <div class="compare-products-products" role="grid"></div>
+    <div class="compare-products-features">
+      <div class="compare-products-features-table" role="table"></div>
+    </div>
+  </div>
+</div>
diff --git a/widgets/compare-products/compare-products.js b/widgets/compare-products/compare-products.js
new file mode 100644
index 00000000..7ac9dda7
--- /dev/null
+++ b/widgets/compare-products/compare-products.js
@@ -0,0 +1,1375 @@
+import { loadCSS, toClassName } from '../../scripts/aem.js';
+import { formatPrice as formatPriceValue, getLocaleAndLanguage } from '../../scripts/scripts.js';
+import { lookupProducts } from '../../blocks/plp/plp.js';
+
+const DEBUG = typeof window !== 'undefined' && (
+  new URLSearchParams(window.location.search).has('compare-products-debug')
+  || new URLSearchParams(window.location.search).has('compare-products')
+);
+
+function debug(...args) {
+  if (DEBUG) {
+    // eslint-disable-next-line no-console
+    console.log('[compare-products]', ...args);
+  }
+}
+
+/** productType used to show "add a product" grid (from products index) */
+const ADD_TO_COMPARE_PRODUCT_TYPE = 'Countertop Blender';
+
+/** Show "add a product" grid until this many products are in the comparison */
+const MAX_COMPARISON_PRODUCTS = 4;
+
+const FEATURE_KEYS = [
+  'Series',
+  'Blending Programs',
+  'Variable Speed Control',
+  'Touch Buttons',
+  'Pulse',
+  'Digital Timer',
+  'Self-Detect Technology',
+  'Tamper Indicator',
+  'Plus 15 Second Button',
+  'Warranty',
+  'Dimensions (L × W × H)',
+];
+
+const FEATURES_BY_PRODUCT_PATH_DEFAULT = '/us/en_us/products/config/features-by-product.json';
+
+/** Merged Key->Text from translations + placeholders (locale config) */
+let comparisonTranslations = {};
+
+/**
+ * Get products config base path for current locale (e.g. /ca/fr_ca/products/config).
+ * @returns {string}
+ */
+function getConfigBasePath() {
+  const match = window.location.pathname.match(/^(\/[^/]+\/[^/]+)\//);
+  if (match) return `${match[1]}/products/config`;
+  return '/us/en_us/products/config';
+}
+
+/**
+ * Load translations + placeholders from config (Key/Text sheets); set comparisonTranslations.
+ * Call once before rendering; safe to call multiple times (overwrites).
+ */
+async function loadComparisonTranslations() {
+  const base = getConfigBasePath();
+  const urls = [
+    `${base}/translations.json`,
+    `${base}/placeholders.json`,
+  ];
+  const map = {};
+  await Promise.all(urls.map(async (url) => {
+    try {
+      const resp = await fetch(new URL(url, window.location.origin).href);
+      if (!resp.ok) return;
+      const json = await resp.json();
+      const data = json?.data;
+      if (Array.isArray(data)) {
+        data.forEach((entry) => {
+          if (entry?.Key != null) map[entry.Key] = entry.Text ?? entry.Key;
+        });
+      }
+    } catch {
+      // ignore
+    }
+  }));
+  comparisonTranslations = map;
+}
+
+/**
+ * Translate a key if present in loaded translations/placeholders; otherwise return key.
+ * @param {string} key - English (or source) string
+ * @returns {string}
+ */
+function t(key) {
+  if (!key || typeof key !== 'string') return key;
+  return comparisonTranslations[key] ?? key;
+}
+
+/** SVG path for checkmark icon in comparison table */
+const CHECK_ICON_PATH = 'M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293'
+  + 'a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z';
+
+/**
+ * Get features-by-product config path for current locale.
+ * E.g. /ca/fr_ca/... -> /ca/fr_ca/products/config/features-by-product.json
+ * @returns {string}
+ */
+function getFeaturesByProductPath() {
+  const match = window.location.pathname.match(/^(\/[^/]+\/[^/]+)\//);
+  if (match) {
+    return `${match[1]}/products/config/features-by-product.json`;
+  }
+  return FEATURES_BY_PRODUCT_PATH_DEFAULT;
+}
+
+/**
+ * Fetch features-by-product config (same-origin only; no fcors).
+ * @returns {Promise<Object|null>} { data: Array<{ Path, Series, ... }> } or null
+ */
+async function fetchFeaturesByProduct() {
+  const path = getFeaturesByProductPath();
+  const url = new URL(path, window.location.origin).href;
+  const resp = await fetch(url);
+  if (!resp.ok) return null;
+  try {
+    return await resp.json();
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Normalize product path for lookup (strip hash/query, trailing slash, ensure leading slash).
+ * @param {string} path - Product path or URL
+ * @returns {string}
+ */
+function normalizePathForLookup(path) {
+  if (!path || typeof path !== 'string') return '';
+  const p = path.replace(/#.*$/, '').replace(/\?.*$/, '').trim();
+  const slash = p.startsWith('/') ? p : `/${p}`;
+  const normalized = slash.endsWith('/') && slash.length > 1 ? slash.slice(0, -1) : slash;
+  return normalized.toLowerCase();
+}
+
+/**
+ * Get the last path segment (slug) from a path.
+ * @param {string} path - e.g. /ca/fr_ca/products/vx1-and-pca-bundle-ca
+ * @returns {string} e.g. vx1-and-pca-bundle-ca
+ */
+function getPathSlug(path) {
+  const p = (path || '').trim().replace(/\/+$/, '');
+  if (!p) return '';
+  const segments = p.split('/').filter(Boolean);
+  return segments[segments.length - 1] || '';
+}
+
+/**
+ * Get the features row for a product path from features-by-product.data.
+ * Paths are expected to match the index; lookup is exact (normalized) with slug fallback.
+ * @param {Object} featuresByProduct - { data: Array<{ Path: string, Series: string, ... }> }
+ * @param {string} productPath - Product path (e.g. /ca/fr_ca/products/propel-series-510)
+ * @returns {Object|null} Row object or null
+ */
+function getFeaturesRowByPath(featuresByProduct, productPath) {
+  const { data } = featuresByProduct || {};
+  if (!data?.length || !productPath) return null;
+  const key = normalizePathForLookup(productPath);
+
+  const exact = data.find((row) => normalizePathForLookup(row.Path) === key);
+  if (exact) return exact;
+
+  const keySlug = getPathSlug(key).toLowerCase();
+  if (!keySlug) return null;
+  return data.find((row) => getPathSlug(row.Path).toLowerCase() === keySlug) || null;
+}
+
+/**
+ * Normalize series name for matching: remove Vitamix, Series/Séries, trim, strip ®™.
+ * @param {string} s - Series or product name
+ * @returns {string} Normalized string for comparison
+ */
+function normalizeSeriesForMatch(s) {
+  if (!s || typeof s !== 'string') return '';
+  let norm = s
+    .replace(/\s*®\s*|\s*™\s*/gi, ' ')
+    .replace(/\bVitamix\b/gi, '')
+    .replace(/\s+series\s*$/gi, '')
+    .replace(/\s+série\s*$/gi, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+  // Strip leading "Séries" / "Series" so "Séries Ascent et Venturist" matches "venturist"
+  norm = norm.replace(/^\s*séries\s+/gi, '').replace(/^\s*series\s+/gi, '').trim();
+  return norm;
+}
+
+/** Map our feature keys to features-by-product.json column names (locale may vary) */
+const FEATURE_KEY_TO_JSON_KEY = {
+  'Blending Programs': 'Programmes de fusion',
+  'Variable Speed Control': 'Commande de vitesse variable',
+  'Touch Buttons': 'Boutons tactiles',
+  Pulse: 'Impulsion',
+  'Digital Timer': 'Minuteur numérique',
+  'Self-Detect Technology': "Technologie d'autodétection",
+  'Tamper Indicator': 'Indicateur de falsification',
+  'Plus 15 Second Button': '+15 secondes',
+  Warranty: 'Garantie',
+  'Dimensions (L × W × H)': 'Dimensions',
+  'Ce que vous pouvez fabriquer': 'Ce que vous pouvez fabriquer',
+};
+
+/**
+ * Find the value for a feature in a row by matching keys (exact, then by normalized match).
+ * Handles sheet keys that differ slightly (e.g. with ™ or "Dimensions (L × W × H)").
+ * @param {Object} featuresRow - Row from features-by-product.data
+ * @param {string} jsonKey - Preferred key (e.g. "Technologie d'autodétection", "Dimensions")
+ * @returns {*} Raw value or undefined
+ */
+function getFeatureValueFromRow(featuresRow, jsonKey) {
+  if (!featuresRow || typeof featuresRow !== 'object') return undefined;
+  const exact = featuresRow[jsonKey];
+  if (exact !== undefined && exact !== null && String(exact).trim() !== '') return exact;
+  const norm = (s) => String(s || '').replace(/\s*®\s*|\s*™\s*/gi, ' ').toLowerCase().trim();
+  const targetNorm = norm(jsonKey);
+  if (!targetNorm) return undefined;
+  const rowKey = Object.keys(featuresRow).find((k) => {
+    const kn = norm(k);
+    return kn === targetNorm || kn.startsWith(targetNorm) || targetNorm.startsWith(kn);
+  });
+  return rowKey != null ? featuresRow[rowKey] : undefined;
+}
+
+/**
+ * Get display value from a features-by-product row for a feature key.
+ * :check: -> 'Yes', - or empty -> '—', else verbatim.
+ * @param {Object} featuresRow - Row from features-by-product.data
+ * @param {string} featureKey - Our feature key (e.g. 'Blending Programs')
+ * @returns {string}
+ */
+function getFeatureDisplayFromRow(featuresRow, featureKey) {
+  if (!featuresRow) return '—';
+  const jsonKey = FEATURE_KEY_TO_JSON_KEY[featureKey] ?? featureKey;
+  const raw = getFeatureValueFromRow(featuresRow, jsonKey) ?? featuresRow[featureKey];
+  if (raw == null || String(raw).trim() === '') return '—';
+  const s = String(raw).trim();
+  if (s === ':check:') return t('Yes');
+  if (s === '-') return '—';
+  return s;
+}
+
+/**
+ * Resolve product comparison paths from window.location query
+ * (e.g. ?productComparison=/path1,/path2).
+ * @returns {string[]} Array of product paths (e.g. /us/en_us/products/ascent-x2)
+ */
+function getProductComparisonPaths() {
+  const params = new URLSearchParams(window.location.search);
+  const raw = params.get('productComparison');
+  if (!raw || typeof raw !== 'string') return [];
+  return raw
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .map((s) => {
+      try {
+        const url = new URL(s, window.location.origin);
+        return url.pathname;
+      } catch {
+        return s;
+      }
+    });
+}
+
+/**
+ * Product paths from ?compare-products= (comma-separated).
+ * Each path replaces that product's series column.
+ * @returns {string[]} Array of product paths; empty if not set
+ */
+function getCompareProductsParamPaths() {
+  const params = new URLSearchParams(window.location.search);
+  const raw = params.get('compare-products');
+  debug('getCompareProductsParamPaths: raw=', raw);
+  if (!raw || typeof raw !== 'string') return [];
+  let decoded = raw;
+  try {
+    decoded = decodeURIComponent(raw);
+  } catch {
+    // keep raw if invalid encoding
+  }
+  const paths = decoded
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .map((s) => {
+      try {
+        if (s.startsWith('http')) return new URL(s).pathname;
+        const url = new URL(s, window.location.origin);
+        return url.pathname;
+      } catch {
+        return s.startsWith('/') ? s : `/${s}`;
+      }
+    });
+  debug('getCompareProductsParamPaths: parsed paths=', paths);
+  return paths;
+}
+
+/** True when ?compare-products= was set (single or multiple paths). */
+function getCompareProductsParam() {
+  return getCompareProductsParamPaths().length > 0;
+}
+
+/** Map row header text (EN/FR) to FEATURE_KEYS for table column replacement */
+const ROW_LABEL_TO_FEATURE = {
+  series: 'Series',
+  série: 'Series',
+  'blending programs': 'Blending Programs',
+  'programmes de fusion': 'Blending Programs',
+  'variable speed control': 'Variable Speed Control',
+  'commande de vitesse variable': 'Variable Speed Control',
+  'touch buttons': 'Touch Buttons',
+  'boutons tactiles': 'Touch Buttons',
+  pulse: 'Pulse',
+  impulsion: 'Pulse',
+  'digital timer': 'Digital Timer',
+  'minuteur numérique': 'Digital Timer',
+  'self-detect technology': 'Self-Detect Technology',
+  "technologie d'autodétection": 'Self-Detect Technology',
+  'tamper indicator': 'Tamper Indicator',
+  'indicateur de falsification': 'Tamper Indicator',
+  'plus 15 second': 'Plus 15 Second Button',
+  '+15 secondes': 'Plus 15 Second Button',
+  warranty: 'Warranty',
+  garantie: 'Warranty',
+  dimensions: 'Dimensions (L × W × H)',
+  couleurs: 'Colors',
+  colors: 'Colors',
+  'ce que vous pouvez fabriquer': 'Ce que vous pouvez fabriquer',
+};
+
+const AEM_NETWORK_ORIGIN = 'https://main--vitamix--aemsites.aem.network';
+
+/**
+ * Whether to use fcors proxy (localhost, .aem.page, .aem.live).
+ * @returns {boolean}
+ */
+function useFcors() {
+  const { hostname } = window.location;
+  return hostname === 'localhost'
+    || hostname.endsWith('.aem.page')
+    || hostname.endsWith('.aem.live');
+}
+
+/**
+ * Resolve image URL for display: when on localhost / .aem.page / .aem.live, load from aem.network.
+ * @param {string} url - Image URL (absolute or path)
+ * @returns {string} URL to use for img src
+ */
+function resolveImageUrlForDisplay(url) {
+  if (!url) return '';
+  if (!useFcors()) return url;
+  if (url.startsWith('http')) return url;
+  const path = url.startsWith('/') ? url : `/${url}`;
+  return `${AEM_NETWORK_ORIGIN}${path}`;
+}
+
+/**
+ * Fetch product page HTML (no .json). Uses fcors from aem.network on
+ * localhost / .aem.page / .aem.live.
+ * @param {string} path - Product path (e.g. /us/en_us/products/ascent-x2)
+ * @returns {Promise<{ html: string|null, status: number }>}
+ */
+async function fetchProductPage(path) {
+  const pathOnly = path.startsWith('http') ? new URL(path).pathname : path;
+  const fullUrl = path.startsWith('http') ? path : `${AEM_NETWORK_ORIGIN}${pathOnly}`;
+
+  debug('fetchProductPage: path=', path, 'fullUrl=', fullUrl, 'useFcors=', useFcors());
+
+  let resp;
+  if (useFcors()) {
+    const corsProxy = 'https://fcors.org/?url=';
+    const corsKey = '&key=Mg23N96GgR8O3NjU';
+    const proxyUrl = `${corsProxy}${encodeURIComponent(fullUrl)}${corsKey}`;
+    resp = await fetch(proxyUrl);
+  } else {
+    const url = path.startsWith('http') ? path : new URL(path, window.location.origin).href;
+    resp = await fetch(url);
+  }
+
+  debug('fetchProductPage: path=', path, 'status=', resp.status, 'ok=', resp.ok);
+  if (!resp.ok) return { html: null, status: resp.status };
+  const html = await resp.text();
+  debug('fetchProductPage: path=', path, 'htmlLength=', html?.length);
+  return { html, status: resp.status };
+}
+
+/**
+ * Parse Product Specifications from main content (h3#product-specifications + ul > li).
+ * @param {Document} doc - Parsed document
+ * @returns {Object.<string, string>} Map of spec label -> value
+ */
+function parseSpecsFromPage(doc) {
+  const specs = {};
+  const heading = doc.querySelector('h3#product-specifications, [id="product-specifications"]');
+  if (!heading) return specs;
+  const list = heading.closest('div')?.querySelector('ul');
+  if (!list) return specs;
+  list.querySelectorAll(':scope > li').forEach((li) => {
+    const strong = li.querySelector('strong');
+    const label = strong?.textContent?.replace(/:$/, '').trim();
+    if (!label) return;
+    let value = '';
+    const next = strong?.nextSibling;
+    if (next?.nodeType === Node.TEXT_NODE) {
+      value = next.textContent.trim();
+    }
+    const nextP = li.querySelector('p');
+    if (nextP && (value === '' || value.length < 3)) {
+      value = nextP.textContent.trim();
+    }
+    if (value === '' && strong?.nextElementSibling) {
+      value = strong.nextElementSibling.textContent.trim();
+    }
+    if (label && value) specs[label] = value;
+  });
+  return specs;
+}
+
+/**
+ * Parse warranty text from a section heading (e.g. "10-Year Full Warranty").
+ * @param {Document} doc - Parsed document
+ * @returns {string} Warranty text or ''
+ */
+function parseWarrantyFromPage(doc) {
+  const headings = [...doc.querySelectorAll('main h3')];
+  const h = headings.find((el) => /warranty/i.test(el.textContent || ''));
+  if (!h) return '';
+  const strong = h.querySelector('strong');
+  return (strong?.textContent || h.textContent || '').trim();
+}
+
+/**
+ * Parse variant sections (main .section[data-sku][data-color]) for first image per variant.
+ * @param {Document} doc - Parsed document
+ * @param {string} baseUrl - Base URL for resolving relative image src
+ * @returns {Array<{sku:string, color:string, imageUrl:string}>}
+ */
+function parseVariantSectionsFromPage(doc, baseUrl) {
+  const variants = [];
+  doc.querySelectorAll('main .section[data-sku][data-color]').forEach((section) => {
+    const { sku, color } = section.dataset;
+    const img = section.querySelector('picture img, img');
+    let imageUrl = img?.getAttribute('src') || '';
+    if (imageUrl && !imageUrl.startsWith('http') && baseUrl) {
+      try {
+        imageUrl = new URL(imageUrl, baseUrl).href;
+      } catch {
+        // keep relative
+      }
+    }
+    variants.push({ sku, color, imageUrl });
+  });
+  return variants;
+}
+
+/**
+ * Build product object from fetched HTML (JSON-LD + parsed specs and variants).
+ * @param {string} html - Full page HTML
+ * @param {string} path - Product path
+ * @returns {Object|null} Normalized product object or null
+ */
+function parseProductFromPage(html, path) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  const canonical = doc.querySelector('link[rel="canonical"]')?.href;
+  const baseUrl = canonical || new URL(path, window.location.origin).href;
+
+  const jsonLdScript = doc.querySelector('script[type="application/ld+json"]');
+  if (!jsonLdScript?.textContent) {
+    debug('parseProductFromPage: no JSON-LD script', path);
+    return null;
+  }
+  let ld;
+  try {
+    ld = JSON.parse(jsonLdScript.textContent);
+  } catch (e) {
+    debug('parseProductFromPage: JSON parse error', path, e);
+    return null;
+  }
+  if (ld['@type'] !== 'Product' || !ld.name) {
+    debug('parseProductFromPage: not Product or no name', path, '@type=', ld['@type'], 'name=', ld?.name);
+    return null;
+  }
+
+  const offers = ld.offers || [];
+  const firstOffer = offers[0];
+  const listPrice = firstOffer?.priceSpecification?.price;
+  const finalPrice = firstOffer?.price ?? listPrice;
+  const price = {
+    currency: firstOffer?.priceCurrency || 'USD',
+    regular: listPrice != null ? String(listPrice) : String(finalPrice),
+    final: String(finalPrice ?? '0'),
+  };
+
+  const pageSpecs = parseSpecsFromPage(doc);
+  const warrantyHeading = parseWarrantyFromPage(doc);
+  if (warrantyHeading) pageSpecs.Warranty = warrantyHeading;
+
+  const variantSections = parseVariantSectionsFromPage(doc, baseUrl);
+
+  const variants = offers.map((offer) => {
+    const sectionMatch = variantSections.find((v) => v.sku === offer.sku);
+    const imageUrl = sectionMatch?.imageUrl || (Array.isArray(offer.image) ? offer.image[0] : '') || ld.image?.[0] || '';
+    const colorOpt = offer.options?.find((o) => o.id === 'color');
+    return {
+      sku: offer.sku,
+      name: offer.name,
+      options: offer.options || [],
+      images: imageUrl ? [{ url: imageUrl }] : (offer.image || []).map((u) => ({ url: u })),
+      price: {
+        currency: offer.priceCurrency || 'USD',
+        regular: String(offer.priceSpecification?.price ?? offer.price ?? price.regular),
+        final: String(offer.price ?? price.final),
+      },
+      color: colorOpt?.value,
+    };
+  });
+
+  const colorValues = variants
+    .filter((v) => v.color)
+    .map((v) => ({ value: v.color, uid: v.options?.find((o) => o.id === 'color')?.uid || '' }));
+  let options;
+  if (colorValues.length) {
+    options = [{
+      id: 'color', label: 'Color', position: 1, values: colorValues,
+    }];
+  } else if (ld.custom?.options) {
+    options = [{ id: 'color', label: 'Color', values: colorValues }];
+  } else {
+    options = [];
+  }
+
+  const images = Array.isArray(ld.image) ? ld.image.map((u) => ({ url: u })) : [];
+
+  return {
+    name: ld.name,
+    path,
+    url: ld.url || baseUrl,
+    images,
+    price,
+    variants,
+    options,
+    custom: ld.custom || {},
+    specs: pageSpecs,
+  };
+}
+
+/**
+ * Fetch product by loading the live page (no .json) and parsing HTML.
+ * @param {string} path - Product path
+ * @returns {Promise<{ product: Object|null, errorStatus?: number }>}
+ */
+async function fetchProduct(path) {
+  debug('fetchProduct: start', path);
+  const { html, status } = await fetchProductPage(path);
+  if (!html) {
+    debug('fetchProduct: no html', path, 'status=', status);
+    return { product: null, errorStatus: status };
+  }
+  const product = parseProductFromPage(html, path);
+  debug('fetchProduct: parsed', path, 'product=', product ? { name: product.name } : null);
+  return { product, errorStatus: product ? undefined : status };
+}
+
+/** Placeholders for locale-aware price formatting (languageCode + currencyCode). */
+function getPricePlaceholders() {
+  const { locale, language } = getLocaleAndLanguage();
+  return {
+    languageCode: language,
+    currencyCode: locale === 'ca' ? 'CAD' : 'USD',
+  };
+}
+
+/**
+ * Format price for display using central Intl-based formatter (e.g. "50 $" for fr-CA).
+ * @param {Object} price - { currency, regular, final }
+ * @returns {{ now: string, save: string|null }}
+ */
+function formatPrice(price) {
+  if (!price || price.final == null) return { now: '', save: null };
+  const ph = getPricePlaceholders();
+  const finalVal = parseFloat(price.final);
+  const regular = parseFloat(price.regular);
+  const now = formatPriceValue(finalVal, ph);
+  const save = regular > finalVal
+    ? `${t('Save')} ${formatPriceValue(regular - finalVal, ph)} | ${t('Was')} ${formatPriceValue(regular, ph)}`
+    : null;
+  return { now, save };
+}
+
+/**
+ * Find which table column index (1-based, 0 = row header) matches the given series.
+ * Uses first table's first tbody row and second table's thead for labels.
+ * @param {HTMLElement} container - .widget-container (section that has tables + widget)
+ * @param {string} series - Product series name
+ * @returns {number} 1-based column index or 1 if no match
+ */
+function findColumnIndexForSeries(container, series) {
+  const tables = container.querySelectorAll('.table.comparison .table-comparison-scroll table');
+  const firstTable = tables[0];
+  if (!firstTable) {
+    debug('findColumnIndexForSeries: no first table');
+    return 1;
+  }
+  const firstDataRow = firstTable.querySelector('tbody tr');
+  if (!firstDataRow) {
+    debug('findColumnIndexForSeries: no first tbody tr');
+    return 1;
+  }
+  const headerTable = tables[1] || firstTable;
+  const theadRow = headerTable.querySelector('thead tr');
+  const bodyCells = [...firstDataRow.children];
+  const targetNorm = normalizeSeriesForMatch(series).toLowerCase();
+  debug('findColumnIndexForSeries: series=', series, 'targetNorm=', targetNorm, 'cellCount=', bodyCells.length);
+  if (!targetNorm) return 1;
+
+  // Explicit match for "venturist" -> "Séries Ascent et Venturist" column (column 2)
+  if (targetNorm === 'venturist' && theadRow) {
+    for (let i = 1; i < theadRow.children.length; i += 1) {
+      const thText = (theadRow.children[i]?.textContent || '').toLowerCase();
+      if (thText.includes('venturist') && !thText.includes('ascent x')) {
+        debug('findColumnIndexForSeries: venturist match at column', i, 'thText=', thText.slice(0, 50));
+        return i;
+      }
+    }
+  }
+
+  const isAscentNonX = targetNorm === 'ascent' || (targetNorm.startsWith('ascent') && !targetNorm.includes('x'));
+  const isAscentX = targetNorm.includes('ascent') && targetNorm.includes('x');
+  const isVenturist = targetNorm.includes('venturist');
+
+  for (let i = 1; i < bodyCells.length; i += 1) {
+    let columnText = (firstDataRow.children[i]?.textContent || '').trim();
+    if (theadRow?.children[i]) {
+      const thText = (theadRow.children[i].textContent || '').trim();
+      if (thText) columnText = `${thText} ${columnText}`;
+    }
+    const cellNorm = normalizeSeriesForMatch(columnText).toLowerCase();
+    const matches = cellNorm && (
+      cellNorm === targetNorm
+      || cellNorm.includes(targetNorm)
+      || targetNorm.includes(cellNorm)
+    );
+    if (matches
+        && !(isAscentNonX && cellNorm.includes('ascent x'))
+        && !(isAscentX && cellNorm.includes('venturist'))
+        && !(isVenturist && cellNorm.includes('ascent x'))) {
+      debug('findColumnIndexForSeries: match at column', i, 'cellText=', columnText.slice(0, 60));
+      return i;
+    }
+  }
+  debug('findColumnIndexForSeries: no match, using column 1');
+  return 1;
+}
+
+/**
+ * Create color swatches DOM for comparison table (same structure as table block).
+ * @param {Object} product - Product with options[].values (color names)
+ * @returns {DocumentFragment}
+ */
+function createColorSwatchesForProduct(product) {
+  const frag = document.createDocumentFragment();
+  const wrap = document.createElement('div');
+  wrap.className = 'table-comparison-color-swatches';
+  const colorOpt = product?.options?.find((o) => o.id === 'color');
+  const values = colorOpt?.values || [];
+  values.forEach((opt) => {
+    const label = opt.value || '';
+    const slug = toClassName(label);
+    const swatch = document.createElement('div');
+    swatch.className = 'table-comparison-color-swatch';
+    swatch.title = label;
+    const inner = document.createElement('div');
+    inner.className = 'table-comparison-color-inner';
+    inner.style.backgroundColor = slug ? `var(--color-${slug}, #888)` : '#888';
+    swatch.appendChild(inner);
+    wrap.appendChild(swatch);
+  });
+  frag.appendChild(wrap);
+  return frag;
+}
+
+/**
+ * Resolve image URL for display (variant or product level).
+ * @param {Object} product - Product JSON
+ * @param {number} variantIndex - Selected variant index
+ * @returns {string} Image URL
+ */
+function getProductImageUrl(product, variantIndex = 0) {
+  const variants = product?.variants;
+  if (Array.isArray(variants) && variants[variantIndex]?.images?.length > 0) {
+    const [{ url }] = variants[variantIndex].images;
+    return url.startsWith('http') || url.startsWith('/')
+      ? url : new URL(url, window.location.origin).pathname;
+  }
+  const images = product?.images;
+  if (Array.isArray(images) && images.length > 0) {
+    const [{ url }] = images;
+    return url.startsWith('http') || url.startsWith('/')
+      ? url : new URL(url, window.location.origin).pathname;
+  }
+  return '';
+}
+
+/**
+ * Snapshot original table cell content (by table, row, column) before any replacement.
+ * @param {HTMLElement} container - .widget-container
+ * @returns {Array<Array<string[]>>} snapshot[tableIndex][rowIndex][colIndex] = cell innerHTML
+ */
+function snapshotTableContent(container) {
+  const tables = container.querySelectorAll('.table.comparison .table-comparison-scroll table');
+  return [...tables].map((table) => {
+    const rows = table.querySelectorAll('tbody tr');
+    return [...rows].map((row) => {
+      const cells = [...row.children];
+      return cells.map((cell) => (cell.tagName === 'TD' ? cell.innerHTML : ''));
+    });
+  });
+}
+
+/**
+ * Replace one column in all comparison tables with the specific product's data.
+ * First table: from features-by-product.json; others: copy from series column.
+ * @param {HTMLElement} container - .widget-container (section that has tables + widget)
+ * @param {number} columnIndex - Column index (0 = row header, 1 = first product)
+ * @param {Object} product - Parsed product from fetchProduct
+ * @param {number} [sourceSeriesColumnIndex] - For tables 1+: column index to copy from
+ * @param {Array<Array<string[]>>} [originalContent] - Snapshot; for tables 1+
+ * @param {Object} [featuresByProduct] - { data } from features-by-product.json
+ */
+function replaceColumnWithProduct(
+  container,
+  columnIndex,
+  product,
+  sourceSeriesColumnIndex,
+  originalContent,
+  featuresByProduct,
+) {
+  const tables = container.querySelectorAll('.table.comparison .table-comparison-scroll table');
+  if (!tables.length) return;
+
+  const productUrl = product.path?.startsWith('http')
+    ? product.path
+    : new URL(product.path || '', window.location.origin).href;
+  const imageUrl = getProductImageUrl(product, 0);
+  const priceOrVariant = product?.price || product?.variants?.[0]?.price;
+  const { now: priceNow, save: priceSave } = formatPrice(priceOrVariant);
+  const priceText = priceSave
+    ? `${t('Now')} ${priceNow} | ${priceSave}`
+    : `${t('Starting at')} ${priceNow}`;
+  const learnMoreText = t('En savoir plus');
+
+  tables.forEach((table, tableIndex) => {
+    const theadRow = table.querySelector('thead tr');
+    const isFirstTable = tableIndex === 0;
+    const th = theadRow?.children[columnIndex];
+
+    if (th) {
+      th.innerHTML = '';
+      const pathToRemove = product.path;
+      if (isFirstTable && pathToRemove) {
+        th.classList.add('compare-products-column-with-remove');
+        const removeBtn = document.createElement('button');
+        removeBtn.type = 'button';
+        removeBtn.className = 'compare-products-remove-from-comparison';
+        removeBtn.setAttribute('aria-label', `${t('Remove')} ${product.name || t('product')} ${t('from comparison')}`);
+        removeBtn.textContent = '×';
+        removeBtn.addEventListener('click', () => {
+          const current = getCompareProductsParamPaths();
+          const next = current.filter((p) => p !== pathToRemove);
+          const url = new URL(window.location.href);
+          if (next.length) {
+            url.searchParams.set('compare-products', next.join(','));
+          } else {
+            url.searchParams.delete('compare-products');
+          }
+          window.location.href = url.toString();
+        });
+        th.appendChild(removeBtn);
+      }
+      if (isFirstTable && imageUrl) {
+        const picture = document.createElement('picture');
+        const img = document.createElement('img');
+        img.loading = 'lazy';
+        img.alt = product.name || '';
+        img.src = imageUrl;
+        img.width = 320;
+        img.height = 440;
+        picture.appendChild(img);
+        th.appendChild(picture);
+      } else if (!isFirstTable || !imageUrl) {
+        const label = product.name || product.series || '—';
+        const p = document.createElement('p');
+        p.textContent = label;
+        th.appendChild(p);
+      }
+    }
+
+    const bodyRows = table.querySelectorAll('tbody tr');
+    bodyRows.forEach((row, rowIndex) => {
+      const cells = [...row.children];
+      const cell = cells[columnIndex];
+      if (!cell || cell.tagName !== 'TD') return;
+
+      if (isFirstTable && row.classList.contains('table-comparison-row-header-empty') && rowIndex === 0) {
+        cell.innerHTML = `
+          <p><strong>${(product.name || '').replace(/</g, '&lt;')}</strong></p>
+          <p>${priceText.replace(/</g, '&lt;')}</p>
+          <p><strong><a href="${productUrl.replace(/"/g, '&quot;')}">${learnMoreText}</a></strong></p>
+        `;
+        return;
+      }
+
+      const headerCell = row.querySelector('th');
+      const headerText = (headerCell?.textContent || '').trim().toLowerCase();
+      const normalized = headerText.replace(/\s+/g, ' ').trim();
+      const featureKey = ROW_LABEL_TO_FEATURE[normalized]
+        || Object.keys(ROW_LABEL_TO_FEATURE).find((k) => normalized.includes(k));
+
+      if (featureKey === 'Colors') {
+        cell.textContent = '';
+        cell.appendChild(createColorSwatchesForProduct(product));
+        return;
+      }
+
+      if (featureKey === 'Series') {
+        const p = document.createElement('p');
+        p.textContent = product.name || '—';
+        cell.textContent = '';
+        cell.appendChild(p);
+        return;
+      }
+
+      // Feature rows (from any table): use features-by-product when available
+      // Use for all tables so duplicated tables (e.g. sticky header clone) get correct data
+      if (featureKey && featuresByProduct?.data) {
+        const featuresRow = getFeaturesRowByPath(featuresByProduct, product.path);
+        const value = getFeatureDisplayFromRow(featuresRow, featureKey);
+        if (value === 'Yes') {
+          const checkHtml = '<p><span class="icon icon-check"><svg xmlns="http://www.w3.org/2000/svg" '
+            + `viewBox="0 0 20 20" fill="currentColor" width="20" height="20"><title>${t('Check')}</title>`
+            + `<path fill-rule="evenodd" d="${CHECK_ICON_PATH}" clip-rule="evenodd"></path></svg></span></p>`;
+          cell.innerHTML = checkHtml;
+        } else {
+          cell.textContent = value || '—';
+          if (!cell.querySelector('p')) {
+            const p = document.createElement('p');
+            p.textContent = cell.textContent;
+            cell.textContent = '';
+            cell.appendChild(p);
+          }
+        }
+        return;
+      }
+
+      // Rows without a feature key (e.g. compatibility): copy from series column in DOM
+      const copyFromSeries = sourceSeriesColumnIndex != null
+        && sourceSeriesColumnIndex !== columnIndex
+        && originalContent;
+      if (copyFromSeries) {
+        const rowSnapshot = originalContent[tableIndex]?.[rowIndex];
+        const cloned = rowSnapshot?.[sourceSeriesColumnIndex];
+        if (cloned != null) cell.innerHTML = cloned;
+      }
+    });
+  });
+}
+
+/**
+ * Hide table columns whose index is not in the used set.
+ * Keeps row header column 0 and selected product columns.
+ * @param {HTMLElement} container - .widget-container
+ * @param {Set<number>} usedColumnIndices - Column indices to keep (e.g. 0, 1, 2, 5)
+ */
+function hideUnusedColumns(container, usedColumnIndices) {
+  const tables = container.querySelectorAll('.table.comparison .table-comparison-scroll table');
+  tables.forEach((table) => {
+    const colgroup = table.querySelector('colgroup');
+    if (colgroup) {
+      [...colgroup.children].forEach((col, index) => {
+        if (usedColumnIndices.has(index)) {
+          col.classList.add('compare-products-column-visible');
+        } else {
+          col.style.display = 'none';
+        }
+      });
+    }
+    [...table.querySelectorAll('thead tr'), ...table.querySelectorAll('tbody tr')].forEach((tr) => {
+      [...tr.children].forEach((cell, index) => {
+        if (usedColumnIndices.has(index)) {
+          cell.classList.add('compare-products-column-visible');
+        } else {
+          cell.style.display = 'none';
+        }
+      });
+    });
+  });
+  debug('hideUnusedColumns: kept columns', [...usedColumnIndices].sort((a, b) => a - b));
+}
+
+/**
+ * Remove the widget wrapper on the next task so widget block can finish.
+ * @param {HTMLElement} widget - Widget root
+ */
+function removeWidgetWrapperLater(widget) {
+  setTimeout(() => {
+    const wrapper = widget.closest('.widget-wrapper');
+    if (wrapper) wrapper.remove();
+  }, 0);
+}
+
+/**
+ * When compare-products=path[,path2,...] is set: inject each product into the column that
+ * matches its series (so the table’s existing feature values stay correct), hide other columns.
+ * @param {HTMLElement} widget - Widget root
+ * @returns {Promise<boolean>} true if the param was set and handling was done
+ */
+async function handleCompareProductsParam(widget) {
+  const paths = getCompareProductsParamPaths();
+  debug('handleCompareProductsParam: paths=', paths);
+  if (paths.length === 0) {
+    debug('handleCompareProductsParam: no paths, skip');
+    return false;
+  }
+
+  const container = widget.closest('.widget-container');
+  debug(
+    'handleCompareProductsParam: container=',
+    container ? 'found' : 'NOT FOUND (need .widget-container on page)',
+  );
+  if (!container) return false;
+
+  const [featuresByProduct, ...results] = await Promise.all([
+    fetchFeaturesByProduct(),
+    ...paths.map((path) => fetchProduct(path)),
+  ]);
+  debug('handleCompareProductsParam: results=', results.map((r, i) => ({ path: paths[i], hasProduct: !!r.product, errorStatus: r.errorStatus })));
+
+  const originalContent = snapshotTableContent(container);
+
+  const firstTable = container.querySelector('.table.comparison .table-comparison-scroll table');
+  const firstRow = firstTable?.querySelector('thead tr, tbody tr');
+  const maxColumns = firstRow ? firstRow.children.length : 0;
+
+  const usedColumnIndices = new Set([0]);
+  let anyReplaced = false;
+  results.forEach(({ product }, i) => {
+    if (!product) {
+      debug('handleCompareProductsParam: skip path (no product)', paths[i]);
+      return;
+    }
+    const columnIndex = i + 1;
+    if (columnIndex >= maxColumns) {
+      debug('handleCompareProductsParam: skip path (no column left)', paths[i]);
+      return;
+    }
+    const featuresRow = getFeaturesRowByPath(featuresByProduct, product.path);
+    const series = featuresRow?.Series ?? '';
+    const sourceSeriesColumnIndex = findColumnIndexForSeries(container, series);
+    usedColumnIndices.add(columnIndex);
+    debug(
+      'handleCompareProductsParam: replace column',
+      'path=',
+      paths[i],
+      'series=',
+      series,
+      'columnIndex=',
+      columnIndex,
+      'sourceSeriesColumn=',
+      sourceSeriesColumnIndex,
+    );
+    replaceColumnWithProduct(
+      container,
+      columnIndex,
+      product,
+      sourceSeriesColumnIndex,
+      originalContent,
+      featuresByProduct,
+    );
+    anyReplaced = true;
+  });
+
+  if (anyReplaced) {
+    hideUnusedColumns(container, usedColumnIndices);
+    container.classList.add('compare-products-columns-filtered');
+    container.dataset.compareProductsVisible = String(usedColumnIndices.size - 1);
+  }
+
+  debug(
+    'handleCompareProductsParam: done, anyReplaced=',
+    anyReplaced,
+    'visibleColumns=',
+    usedColumnIndices.size - 1,
+  );
+
+  if (paths.length >= MAX_COMPARISON_PRODUCTS) {
+    removeWidgetWrapperLater(widget);
+  }
+  return true;
+}
+
+/**
+ * Build a placeholder card when a product failed to load.
+ * @param {string} path - Product path (for link)
+ * @param {number} index - Index (for remove)
+ * @param {Function} onRemove - Callback when remove is clicked
+ * @param {number} [errorStatus] - HTTP status when failed (e.g. 404)
+ * @returns {HTMLElement}
+ */
+function buildPlaceholderCard(path, index, onRemove, errorStatus) {
+  const col = document.createElement('div');
+  col.className = 'compare-products-product compare-products-product-placeholder';
+  col.dataset.index = String(index);
+
+  const removeBtn = document.createElement('button');
+  removeBtn.type = 'button';
+  removeBtn.className = 'button button close compare-products-product-remove';
+  removeBtn.setAttribute('aria-label', t('Remove from comparison'));
+  removeBtn.textContent = '×';
+  removeBtn.addEventListener('click', () => onRemove(index));
+
+  const msg = document.createElement('p');
+  msg.className = 'compare-products-product-placeholder-msg';
+  msg.textContent = errorStatus === 404
+    ? t('Product not found (404).')
+    : t('Could not load this product.');
+
+  const link = document.createElement('a');
+  link.href = path.startsWith('http') ? path : new URL(path, window.location.origin).href;
+  link.textContent = t('View Details');
+  link.className = 'button link';
+
+  col.append(removeBtn, msg, link);
+  return col;
+}
+
+/**
+ * Build one product card DOM node.
+ * @param {Object} product - Product JSON
+ * @param {number} index - Index in products array (for remove)
+ * @param {Function} onRemove - Callback when remove is clicked
+ * @returns {HTMLElement}
+ */
+function buildProductCard(product, index, onRemove) {
+  const col = document.createElement('div');
+  col.className = 'compare-products-product';
+  col.dataset.index = String(index);
+
+  const removeBtn = document.createElement('button');
+  removeBtn.type = 'button';
+  removeBtn.className = 'button button close compare-products-product-remove';
+  removeBtn.setAttribute('aria-label', `${t('Remove')} ${product.name || t('product')} ${t('from comparison')}`);
+  removeBtn.textContent = '×';
+  removeBtn.addEventListener('click', () => onRemove(index));
+
+  const imgWrap = document.createElement('div');
+  imgWrap.className = 'compare-products-product-image-wrap';
+  const img = document.createElement('img');
+  img.src = getProductImageUrl(product, 0);
+  img.alt = '';
+  img.loading = 'lazy';
+  imgWrap.appendChild(img);
+
+  const colorsWrap = document.createElement('div');
+  colorsWrap.className = 'compare-products-product-colors';
+  const options = product?.options?.find((o) => o.id === 'color');
+  const variants = product?.variants || [];
+  if (options?.values?.length) {
+    options.values.forEach((opt, i) => {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = `compare-products-product-color ${i === 0 ? 'selected' : ''}`;
+      btn.setAttribute('aria-label', opt.value);
+      btn.title = opt.value;
+      const colorSlug = toClassName(opt.value);
+      btn.style.backgroundColor = colorSlug
+        ? `var(--color-${colorSlug}, var(--color-gray-300))`
+        : 'var(--color-gray-300)';
+      btn.dataset.variantIndex = String(i);
+      btn.addEventListener('click', () => {
+        colorsWrap.querySelectorAll('.compare-products-product-color').forEach((c) => c.classList.remove('selected'));
+        btn.classList.add('selected');
+        const idx = parseInt(btn.dataset.variantIndex, 10);
+        img.src = getProductImageUrl(product, idx);
+      });
+      colorsWrap.appendChild(btn);
+    });
+  }
+
+  const nameEl = document.createElement('h3');
+  nameEl.className = 'compare-products-product-name';
+  nameEl.textContent = product.name || '';
+
+  const priceEl = document.createElement('div');
+  priceEl.className = 'compare-products-product-price';
+  const price = product?.price || variants[0]?.price;
+  const { now, save } = formatPrice(price);
+  priceEl.innerHTML = `<span class="compare-products-product-price-now">${t('Now')} ${now}</span>`;
+  if (save) {
+    const saveEl = document.createElement('span');
+    saveEl.className = 'compare-products-product-price-save';
+    saveEl.textContent = save;
+    priceEl.appendChild(saveEl);
+  }
+
+  const cta = document.createElement('a');
+  cta.className = 'button emphasis';
+  const { path: productPath, url: productUrl } = product || {};
+  cta.href = productPath || productUrl || '#';
+  cta.textContent = t('View Details').toUpperCase();
+
+  col.append(removeBtn, imgWrap, colorsWrap, nameEl, priceEl, cta);
+  return col;
+}
+
+/**
+ * Build features table body (feature rows with one cell per product/slot).
+ * Uses features-by-product.json by path; product still used for name/colors when needed.
+ * @param {{ path: string, product: Object|null }[]} slots - One slot per requested path
+ * @param {HTMLElement} tableEl - Table container
+ * @param {Object} [featuresByProduct] - Optional { data } from features-by-product.json
+ */
+function buildFeaturesTable(slots, tableEl, featuresByProduct) {
+  const columnCount = slots.length;
+  tableEl.style.setProperty('--compare-cols', String(columnCount));
+  tableEl.innerHTML = '';
+
+  FEATURE_KEYS.forEach((key, rowIndex) => {
+    const row = document.createElement('div');
+    row.className = `compare-products-features-row ${rowIndex % 2 ? 'row-odd' : 'row-even'}`;
+    const nameCell = document.createElement('div');
+    nameCell.className = `compare-products-features-cell feature-name ${rowIndex % 2 ? 'row-odd' : 'row-even'}`;
+    nameCell.textContent = t(key);
+    row.appendChild(nameCell);
+    slots.forEach((slot) => {
+      const cell = document.createElement('div');
+      cell.className = `compare-products-features-cell ${rowIndex % 2 ? 'row-odd' : 'row-even'}`;
+      let value = '—';
+      if (slot.product && featuresByProduct?.data) {
+        const featuresRow = getFeaturesRowByPath(featuresByProduct, slot.path);
+        if (key === 'Series') {
+          value = slot.product.name || featuresRow?.Series || '—';
+        } else {
+          value = getFeatureDisplayFromRow(featuresRow, key);
+        }
+      } else if (slot.product) {
+        value = '—';
+      }
+      if (value === 'Yes') {
+        const check = document.createElement('span');
+        check.className = 'compare-products-features-cell-check';
+        check.setAttribute('aria-hidden', 'true');
+        check.textContent = '✓';
+        cell.appendChild(check);
+      } else {
+        cell.textContent = value;
+      }
+      row.appendChild(cell);
+    });
+    tableEl.appendChild(row);
+  });
+}
+
+/**
+ * Build a card for the "add a product" grid (product from index.json).
+ * @param {Object} product - Product from lookupProducts (title, image, price, url)
+ * @returns {HTMLElement}
+ */
+function buildAddProductCard(product) {
+  const col = document.createElement('div');
+  col.className = 'compare-products-product compare-products-add-card';
+
+  const imgWrap = document.createElement('div');
+  imgWrap.className = 'compare-products-product-image-wrap';
+  const img = document.createElement('img');
+  img.src = resolveImageUrlForDisplay(product.image) || '';
+  img.alt = '';
+  img.loading = 'lazy';
+  imgWrap.appendChild(img);
+
+  const nameEl = document.createElement('h3');
+  nameEl.className = 'compare-products-product-name';
+  nameEl.textContent = product.title || '';
+
+  const priceEl = document.createElement('div');
+  priceEl.className = 'compare-products-product-price';
+  const price = product.price != null
+    ? formatPriceValue(Number(product.price), getPricePlaceholders())
+    : '';
+  priceEl.innerHTML = price ? `<span class="compare-products-product-price-now">${price}</span>` : '';
+
+  const addBtn = document.createElement('button');
+  addBtn.type = 'button';
+  addBtn.className = 'button emphasis compare-products-add-to-comparison';
+  addBtn.textContent = t('Add to comparison');
+  addBtn.addEventListener('click', () => {
+    const current = getCompareProductsParamPaths();
+    const next = [...current, product.url].filter(Boolean);
+    const url = new URL(window.location.href);
+    url.searchParams.set('compare-products', next.join(','));
+    window.location.href = url.toString();
+  });
+
+  col.append(imgWrap, addBtn, nameEl, priceEl);
+  return col;
+}
+
+/**
+ * Fetch Full Size Blenders from index (fcors like PLP) and render grid to add a product.
+ * @param {HTMLElement} widget - Widget root
+ * @param {Object} [options] - Options
+ * @param {boolean} [options.inSection] - If true, render into .compare-products-add-section
+ *   below features (1–2 products); else replace products area (0 products).
+ * @param {string[]} [options.excludePaths] - Paths already in comparison (omit from grid).
+ */
+async function renderAddProductsGrid(widget, options = {}) {
+  const { inSection = false, excludePaths = [] } = options;
+  const scroll = widget.querySelector('.compare-products-scroll');
+  const productsContainer = widget.querySelector('.compare-products-products');
+  const featuresSection = widget.querySelector('.compare-products-features');
+  if (!scroll) return;
+
+  let container;
+  if (inSection) {
+    let section = widget.querySelector('.compare-products-add-section');
+    if (!section) {
+      section = document.createElement('div');
+      section.className = 'compare-products-add-section';
+      scroll.appendChild(section);
+    }
+    section.hidden = false;
+    section.innerHTML = '';
+    container = section;
+  } else {
+    if (!productsContainer) return;
+    container = productsContainer;
+    container.innerHTML = '';
+    if (featuresSection) featuresSection.hidden = true;
+  }
+
+  const heading = document.createElement('h2');
+  heading.className = 'compare-products-add-heading';
+  heading.textContent = t('Add a product to compare');
+  container.appendChild(heading);
+
+  let products = [];
+  try {
+    products = await lookupProducts({ productType: ADD_TO_COMPARE_PRODUCT_TYPE });
+  } catch (e) {
+    debug('renderAddProductsGrid: lookupProducts failed', e);
+  }
+
+  const excludeSet = new Set(excludePaths.filter(Boolean));
+  const filtered = products.filter((p) => p.url && !excludeSet.has(p.url));
+
+  if (filtered.length === 0) {
+    const empty = document.createElement('p');
+    empty.className = 'compare-products-add-empty';
+    empty.textContent = inSection && products.length > 0
+      ? t('All selected. Remove one to add another.')
+      : t('No countertop blenders found.');
+    container.appendChild(empty);
+    return;
+  }
+
+  const grid = document.createElement('div');
+  grid.className = 'compare-products-add-grid';
+  filtered.forEach((product) => grid.appendChild(buildAddProductCard(product)));
+  container.appendChild(grid);
+}
+
+/**
+ * Render the full compare view: product cards + features table.
+ * @param {HTMLElement} widget - Widget root
+ * @param {{ path: string, product: Object|null }[]} slots - One slot per requested path
+ * @param {Object} [featuresByProduct] - Optional { data } from features-by-product.json
+ */
+function render(widget, slots, featuresByProduct) {
+  const productsContainer = widget.querySelector('.compare-products-products');
+  const featuresTable = widget.querySelector('.compare-products-features-table');
+  if (!productsContainer || !featuresTable) return;
+
+  widget.style.setProperty('--compare-cols', String(slots.length));
+  productsContainer.innerHTML = '';
+
+  const removeProduct = (index) => {
+    const next = slots.filter((_, i) => i !== index);
+    if (next.length === 0) {
+      widget.dispatchEvent(new CustomEvent('compare-products-empty'));
+      return;
+    }
+    render(widget, next, featuresByProduct);
+  };
+
+  slots.forEach((slot, index) => {
+    const card = slot.product
+      ? buildProductCard(slot.product, index, removeProduct)
+      : buildPlaceholderCard(slot.path, index, removeProduct, slot.errorStatus);
+    productsContainer.appendChild(card);
+  });
+
+  buildFeaturesTable(slots, featuresTable, featuresByProduct);
+}
+
+/**
+ * Initialize compare-products widget: read config, fetch products, render.
+ * If ?compare-products=path is set, inject that product into the matching series column.
+ * Otherwise use ?productComparison=path1,path2 to show the widget comparison grid.
+ * @param {HTMLElement} widget - Widget root
+ */
+export default async function decorate(widget) {
+  await loadComparisonTranslations();
+  const paths = getCompareProductsParamPaths();
+  debug('decorate: compare-products paths=', paths.length ? paths : 'none');
+  const handled = await handleCompareProductsParam(widget);
+  debug('decorate: handled=', handled);
+  if (handled) {
+    const pathsAfter = getCompareProductsParamPaths();
+    if (pathsAfter.length < MAX_COMPARISON_PRODUCTS) {
+      await renderAddProductsGrid(widget, { excludePaths: pathsAfter });
+    }
+    return;
+  }
+
+  if (getCompareProductsParam()) {
+    removeWidgetWrapperLater(widget);
+    return;
+  }
+
+  const comparisonPaths = getProductComparisonPaths();
+  if (comparisonPaths.length === 0) {
+    await renderAddProductsGrid(widget);
+    return;
+  }
+
+  const [featuresByProduct, ...slotResults] = await Promise.all([
+    fetchFeaturesByProduct(),
+    ...comparisonPaths.map((path) => fetchProduct(path)),
+  ]);
+
+  const slots = slotResults.map(({ product, errorStatus }, i) => ({
+    path: comparisonPaths[i],
+    product,
+    errorStatus,
+  }));
+
+  const allFailed = slots.every((slot) => !slot.product);
+  if (allFailed) {
+    removeWidgetWrapperLater(widget);
+    return;
+  }
+
+  render(widget, slots, featuresByProduct || undefined);
+
+  if (slots.length < MAX_COMPARISON_PRODUCTS) {
+    await renderAddProductsGrid(widget, {
+      inSection: true,
+      excludePaths: comparisonPaths,
+    });
+  } else {
+    const addSection = widget.querySelector('.compare-products-add-section');
+    if (addSection) addSection.hidden = true;
+  }
+}
+
+// Load CSS
+const start = () => {
+  loadCSS('/widgets/compare-products/compare-products.css');
+};
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', start);
+} else {
+  start();
+}