fix(storefront): composition audit fixes for cart, catalog, product, compare, wishlist, static pages

- Replace hand-rolled loading/error/empty markup with shared app-skeleton,
  app-empty-state, and app-button across catalog, product details, cart,
  compare, wishlist, and the public static-page renderer
- Fix hardcoded hex colors that bypassed theme CSS variables (catalog,
  product details), restoring multi-tenant theme correctness
- Remove ~1100 lines of dead "alt" cart theme CSS (never applied by the
  template) from cart.component.scss, bringing it back under the 40kB
  build budget (89.49kB -> 59.39kB cart-component chunk)
- Swap legacy global .btn/.btn-ghost/.btn-primary classes for app-button
  in compare and wishlist empty/toolbar actions

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

@@ -6,7 +6,7 @@
     </div>
 
     @if (hasItems()) {
-      <button type="button" class="btn btn-ghost" (click)="clear()">{{ 'ux.clearCompare' | translate }}</button>
+      <app-button variant="ghost" (click)="clear()">{{ 'ux.clearCompare' | translate }}</app-button>
     }
   </header>
 
@@ -38,9 +38,11 @@
       [highlightDifferences]="highlightDifferences()" />
   } @else {
     <section class="compare-empty card">
-      <h2>{{ 'ux.compareEmptyTitle' | translate }}</h2>
-      <p>{{ 'ux.compareEmptyDescription' | translate }}</p>
-      <a [routerLink]="'/catalog' | langRoute" class="btn btn-primary">{{ 'ux.goToCatalog' | translate }}</a>
+      <app-empty-state [title]="'ux.compareEmptyTitle' | translate" [description]="'ux.compareEmptyDescription' | translate">
+        <div slot="actions">
+          <app-button variant="primary" [routerLink]="'/catalog' | langRoute">{{ 'ux.goToCatalog' | translate }}</app-button>
+        </div>
+      </app-empty-state>
     </section>
   }
 </main>

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

@@ -67,18 +67,7 @@
 
 .compare-empty {
   min-height: 220px;
-  display: grid;
-  place-content: center;
-  gap: 8px;
-  text-align: center;
-  padding: 24px;
-}
-
-.compare-empty h2,
-.compare-empty p {
-  margin: 0;
-}
-
-.compare-empty p {
-  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

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

@@ -7,11 +7,13 @@ import { TranslatePipe } from '../../../../../i18n/translate.pipe';
 import { LangRoutePipe } from '../../../../../pipes/lang-route.pipe';
 import { DEFAULT_USER_EXPERIENCE_CONFIG } from '../../../../../shared/models/config';
 import { CompareTableComponent } from '../components/compare-table.component';
+import { EmptyStateComponent } from '../../../../../shared/ui/empty-state/empty-state.component';
+import { ButtonComponent } from '../../../../../shared/ui/button/button.component';
 
 @Component({
   selector: 'app-compare-page',
   standalone: true,
-  imports: [RouterLink, TranslatePipe, LangRoutePipe, CompareTableComponent],
+  imports: [RouterLink, TranslatePipe, LangRoutePipe, CompareTableComponent, EmptyStateComponent, ButtonComponent],
   templateUrl: './compare-page.component.html',
   styleUrls: ['./compare-page.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush

src/app/features/website/user-experience/wishlist/containers/wishlist-page.component.html

@@ -5,7 +5,7 @@
       <p>{{ favorites().length }} {{ 'ux.items' | translate }}</p>
     </div>
     @if (hasItems()) {
-      <button type="button" class="btn btn-ghost" (click)="clearWishlist()">{{ 'ux.clearWishlist' | translate }}</button>
+      <app-button variant="ghost" (click)="clearWishlist()">{{ 'ux.clearWishlist' | translate }}</app-button>
     }
   </header>
 
@@ -27,9 +27,11 @@
     </section>
   } @else {
     <section class="wishlist-empty card">
-      <h2>{{ 'ux.wishlistEmptyTitle' | translate }}</h2>
-      <p>{{ 'ux.wishlistEmptyDescription' | translate }}</p>
-      <a [routerLink]="'/catalog' | langRoute" class="btn btn-primary">{{ 'ux.goToCatalog' | translate }}</a>
+      <app-empty-state [title]="'ux.wishlistEmptyTitle' | translate" [description]="'ux.wishlistEmptyDescription' | translate">
+        <div slot="actions">
+          <app-button variant="primary" [routerLink]="'/catalog' | langRoute">{{ 'ux.goToCatalog' | translate }}</app-button>
+        </div>
+      </app-empty-state>
     </section>
   }
 </main>

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

@@ -30,18 +30,7 @@
 
 .wishlist-empty {
   min-height: 220px;
-  display: grid;
-  place-content: center;
-  gap: 8px;
-  text-align: center;
-  padding: 24px;
-}
-
-.wishlist-empty h2,
-.wishlist-empty p {
-  margin: 0;
-}
-
-.wishlist-empty p {
-  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

src/app/features/website/user-experience/wishlist/containers/wishlist-page.component.ts

@@ -7,11 +7,13 @@ import { TranslateService } from '../../../../../i18n/translate.service';
 import { LangRoutePipe } from '../../../../../pipes/lang-route.pipe';
 import { CartService } from '../../../../../services';
 import { UserNotificationService } from '../../services/user-notification.service';
+import { EmptyStateComponent } from '../../../../../shared/ui/empty-state/empty-state.component';
+import { ButtonComponent } from '../../../../../shared/ui/button/button.component';
 
 @Component({
   selector: 'app-wishlist-page',
   standalone: true,
-  imports: [RouterLink, ProductCardComponent, TranslatePipe, LangRoutePipe],
+  imports: [RouterLink, ProductCardComponent, TranslatePipe, LangRoutePipe, EmptyStateComponent, ButtonComponent],
   templateUrl: './wishlist-page.component.html',
   styleUrls: ['./wishlist-page.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush