fix(storefront): home carousel overflow, static-page content, compare colour swatch

- product-carousel-widget: implicit CSS grid track had no min-width:0,
  so the flex scroller's intrinsic content width (fixed 220px product
  cards) overflowed the grid item and pushed body width to ~2187px on
  a 1440px viewport, squeezing the entire homepage into a ~340px column.
  Added min-width:0 to the track and scroller (standard grid/flex
  overflow fix).
- bootstrap.json mock fixture: about-us/privacy-policy/terms-of-service
  static pages (the real CMS pages served via bootstrap.staticPages,
  per docs/PROJECT_INDEX.md) used a 'content' field, but
  content-page.service.ts's normalizePage() only reads 'html' -
  ContentPageBootstrapInput has no 'content' field. Title rendered,
  body was always empty. Renamed the 3 fixture entries' field from
  content to html to match the schema; content now renders.
- compare-table: colour row rendered raw hex/name values as plain text
  (e.g. '#fCfCfC') with no swatch, inconsistent with variant-selector's
  established colour-swatch pattern used on the product page. Added a
  small circular swatch (reusing the same border-radius:50% pattern)
  next to the value.

Verified live via ng serve: overflow gone (body/viewport width match
at 1440/1280/375), static pages render real content, compare swatch
displays. tsc --noEmit and ng build both clean (pre-existing bundle-
budget warning only, already tracked in KNOWN-ISSUES item 12).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/app/features/website/user-experience/compare/components/compare-table.component.html

@@ -16,7 +16,16 @@
           <tr [class.compare-different]="isDifferentRow(row)">
             <th scope="row">{{ row.label }}</th>
             @for (value of row.values; track $index) {
-              <td>{{ value }}</td>
+              <td>
+                @if (row.key === 'color' && value !== '—') {
+                  <span class="compare-colour-value">
+                    <span class="compare-colour-swatch" [style.background-color]="value"></span>
+                    {{ value }}
+                  </span>
+                } @else {
+                  {{ value }}
+                }
+              </td>
             }
           </tr>
         }

src/app/features/website/user-experience/compare/components/compare-table.component.scss

@@ -46,6 +46,20 @@
   background: color-mix(in srgb, var(--warning-color) 9%, white);
 }
 
+.compare-colour-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.compare-colour-swatch {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  border: 1px solid var(--border-color);
+  border-radius: 50%;
+}
+
 @media (max-width: 640px) {
   .compare-table th,
   .compare-table td {