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/pages/cart/cart.component.html

@@ -11,12 +11,12 @@
 
   @if (itemCount() === 0) {
     <div class="empty-cart">
-      <div class="empty-icon">
-        <app-icon name="cart" [size]="64" />
-      </div>
-      <h2>{{ 'cart.empty' | translate }}</h2>
-      <p>{{ 'cart.emptyDesc' | translate }}</p>
-      <a [routerLink]="'/' | langRoute" class="shop-btn">{{ 'cart.goShopping' | translate }}</a>
+      <app-empty-state [title]="'cart.empty' | translate" [description]="'cart.emptyDesc' | translate">
+        <app-icon slot="icon" name="cart" [size]="64" />
+        <div slot="actions">
+          <app-button variant="primary" [routerLink]="'/' | langRoute">{{ 'cart.goShopping' | translate }}</app-button>
+        </div>
+      </app-empty-state>
     </div>
   }
 

src/app/pages/cart/cart.component.ts

@@ -15,6 +15,8 @@ import { TranslatePipe } from '../../i18n/translate.pipe';
 import { TranslateService } from '../../i18n/translate.service';
 import { PAYMENT_POLL_INTERVAL_MS, PAYMENT_MIN_POLL_SECONDS, PAYMENT_TIMEOUT_CLOSE_MS, LINK_COPIED_DURATION_MS } from '../../config/constants';
 import { IconComponent } from '../../shared/ui/icon/icon.component';
+import { EmptyStateComponent } from '../../shared/ui/empty-state/empty-state.component';
+import { ButtonComponent } from '../../shared/ui/button/button.component';
 import { ConfigService } from '../../core/config/config.service';
 import { TenantResolverService } from '../../core/config/tenant-resolver.service';
 
@@ -22,7 +24,7 @@ type PaymentMethod = 'qr' | 'card';
 
 @Component({
   selector: 'app-cart',
-  imports: [DecimalPipe, RouterLink, FormsModule, DeliverySelectorComponent, TelegramLoginComponent, LangRoutePipe, TranslatePipe, IconComponent],
+  imports: [DecimalPipe, RouterLink, FormsModule, DeliverySelectorComponent, TelegramLoginComponent, LangRoutePipe, TranslatePipe, IconComponent, EmptyStateComponent, ButtonComponent],
   templateUrl: './cart.component.html',
   styleUrls: ['./cart.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush

src/app/pages/static-page/static-page.component.html

@@ -1,11 +1,18 @@
 <main class="static-page page-container" [attr.dir]="dir()">
   @if (loading()) {
-    <section class="static-page__state" role="status" aria-live="polite">{{ 'app.connecting' | translate }}</section>
+    <section class="static-page__state" role="status" aria-live="polite" aria-busy="true">
+      <app-skeleton shape="text" width="40%" height="28px" />
+      <app-skeleton shape="text" height="16px" />
+      <app-skeleton shape="text" height="16px" />
+      <app-skeleton shape="text" width="70%" height="16px" />
+    </section>
   } @else if (notFound()) {
     <section class="static-page__state">
-      <h1>404</h1>
-      <p>{{ 'staticPages.notFound' | translate }}</p>
-      <a [routerLink]="homeRoute()">{{ 'staticPages.backHome' | translate }}</a>
+      <app-empty-state title="404" [description]="'staticPages.notFound' | translate">
+        <div slot="actions">
+          <app-button variant="primary" [routerLink]="homeRoute()">{{ 'staticPages.backHome' | translate }}</app-button>
+        </div>
+      </app-empty-state>
     </section>
   } @else {
     <article class="static-page__content">

src/app/pages/static-page/static-page.component.scss

@@ -3,24 +3,9 @@
 }
 
 .static-page__state {
-  text-align: center;
   padding: 2rem 0;
-  color: var(--text-secondary, #667a77);
-
-  h1 {
-    margin-bottom: 0.5rem;
-    color: var(--text-primary, #1e3c38);
-  }
-
-  a {
-    color: var(--primary-color, #497671);
-    text-decoration: none;
-
-    &:focus-visible {
-      outline: 2px solid var(--primary-color, #497671);
-      outline-offset: 2px;
-    }
-  }
+  display: grid;
+  gap: 0.75rem;
 }
 
 .static-page__content {

src/app/pages/static-page/static-page.component.ts

@@ -6,11 +6,14 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { StaticPageResolverService } from '../../core/config/static-page-resolver.service';
 import { LanguageService } from '../../services/language.service';
 import { TranslatePipe } from '../../i18n/translate.pipe';
+import { EmptyStateComponent } from '../../shared/ui/empty-state/empty-state.component';
+import { SkeletonComponent } from '../../shared/ui/skeleton/skeleton.component';
+import { ButtonComponent } from '../../shared/ui/button/button.component';
 
 @Component({
   selector: 'app-static-page',
   standalone: true,
-  imports: [CommonModule, RouterLink, TranslatePipe],
+  imports: [CommonModule, RouterLink, TranslatePipe, EmptyStateComponent, SkeletonComponent, ButtonComponent],
   templateUrl: './static-page.component.html',
   styleUrls: ['./static-page.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush