fix(storefront): premium UX polish for product, compare, wishlist

- delivery-information, product-actions, product-description,
  product-gallery, product-information, related-products,
  variant-selector: normalize hardcoded hex colors to design tokens
  (--text-primary, --text-secondary, --border-color, --bg-primary/
  --bg-secondary, --primary-color/--primary-hover); stock status and
  discount badge now use semantic --success-color/--warning-color/
  --error-color instead of near-duplicate literal hex
- product-actions: add aria-pressed to wishlist/compare toggle
  buttons; add hover/active/disabled states to action buttons
- product-gallery: add aria-current + aria-label to active thumbnail
  button; add focus-visible ring and hover state on thumbnails and
  toolbar buttons
- variant-selector: add aria-pressed to colour/size option buttons;
  add a visible checkmark glyph on the selected colour swatch so
  selection isn't color-only; add hover states
- product-tabs: add role="tab"/aria-selected to tab buttons
- star-selector: add per-star aria-label (new starsLabel i18n key
  added to en/hy/ru + translations.ts interface)
- question-list: add aria-expanded to the ask-question disclosure
  toggle; swap plain empty-state <p> for app-empty-state; add
  hover/disabled states to pager buttons
- review-list: swap plain empty-state <p> for app-empty-state; add
  hover/disabled states to pager and load-more buttons
- question-card, question-form, review-form: normalize accepted/
  success/error colors to semantic tokens; add focus-visible and
  hover/disabled states to inputs and submit buttons
- compare-table: add scope="col"/scope="row" to table headers; make
  header row and attribute column sticky for easier comparison on
  long tables
- compare-page: add hover/focus states to the remove-from-compare
  chip button

Build verified green via `npm run build`.

Out of scope / skipped:
- src/app/pages/item-detail/* is dead code (not referenced by any
  route or component) - left untouched
- wishlist page and product-details-container were already fully
  composed with shared skeleton/empty-state/button components from
  the RC-Visual-02 pass - no changes needed
- stars.component display-only rating glyphs use a light gray not an
  exact token match - left as-is to avoid an unintended visual shift

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

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

@@ -3,9 +3,9 @@
     <table class="compare-table">
       <thead>
         <tr>
-          <th>{{ 'ux.compareAttribute' | translate }}</th>
+          <th scope="col">{{ 'ux.compareAttribute' | translate }}</th>
           @for (product of products; track product.itemID) {
-            <th>
+            <th scope="col">
               <div class="compare-product-title">{{ product.name }}</div>
             </th>
           }
@@ -14,7 +14,7 @@
       <tbody>
         @for (row of rows(); track row.key) {
           <tr [class.compare-different]="isDifferentRow(row)">
-            <th>{{ row.label }}</th>
+            <th scope="row">{{ row.label }}</th>
             @for (value of row.values; track $index) {
               <td>{{ value }}</td>
             }

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

@@ -24,6 +24,18 @@
   background: color-mix(in srgb, var(--bg-secondary) 60%, white);
 }
 
+.compare-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.compare-table tbody th {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+}
+
 .compare-product-title {
   font-size: var(--font-size-md, 0.9375rem);
   font-weight: var(--font-weight-bold, 700);

src/app/features/website/user-experience/compare/containers/compare-page.component.scss

@@ -50,6 +50,12 @@
   border-radius: var(--radius-full, 999px);
   padding: 4px 10px;
   background: var(--bg-primary);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.compare-product-chip:hover {
+  border-color: var(--primary-color);
+  box-shadow: var(--shadow-sm);
 }
 
 .compare-product-chip a {
@@ -58,11 +64,33 @@
   font-weight: var(--font-weight-semibold, 600);
 }
 
+.compare-product-chip a:hover {
+  color: var(--primary-color);
+  text-decoration: underline;
+}
+
 .compare-product-chip button {
   border: 0;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   background: transparent;
   color: var(--text-secondary);
   cursor: pointer;
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+
+.compare-product-chip button:hover {
+  background: var(--bg-tertiary);
+  color: var(--error-color);
+}
+
+.compare-product-chip button:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
 }
 
 .compare-empty {