From 2e931bbdc445ae7f3e40b60cd67c01f72e4701fa Mon Sep 17 00:00:00 2001
From: sdarbinyan <sdarbinyan@4pay.ru>
Date: Fri, 24 Jul 2026 08:26:31 +0400
Subject: [PATCH] perf(app): remove confirmed-dead global CSS classes

RC PERF-01 asset audit (images/fonts/SVG/CSS), follow-up to 61a5714/4bf0666.

Removed from src/styles.scss - zero references (literal and hyphen-safe)
in any .html/.ts across the repo, and no dynamic class-string construction
found for the utility classes:
- .btn-primary / .btn-secondary (+ :hover) - unused button variants
- .catalog-product-card - unused selector in a shared comma group with
  .product-card/.item-card, which stay
- .item-badges-overlay, .item-simple-desc - unused component helpers
- .text-center, .mt-1..4, .mb-1..4, .p-1..4 - fully unused spacing utilities

styles-*.css: 9.60 kB -> 8.41 kB raw (2.22 kB -> 1.99 kB transfer), -12%.

No other category needed a code change:
- Images: <img> tags already have loading="lazy"/decoding="async" on
  storefront grids/galleries (product-card, catalog, category-grid,
  cart, item-detail) from prior polish passes; CLS is already handled
  via CSS aspect-ratio on those containers rather than width/height
  attrs, so none were added. Payment-logo <img>s already have explicit
  width/height. Flagged, not fixed: a handful of single-image admin/
  editor previews (page-editor, brand-overview, asset-details-drawer)
  lack loading="lazy" - low traffic, negligible impact, left alone to
  avoid unnecessary diff.
- Fonts: index.html preconnects to fonts.gstatic.com/googleapis.com and
  loads DM Sans 400/500/600/700 via Google Fonts CSS2 (display=swap
  already in the URL). All 4 loaded weights are used in app CSS - no
  dead weight to drop. Flagged, not fixed: 800/900 are used in several
  component styles but never loaded, so the browser faux-bolds those -
  a pre-existing rendering quirk, out of scope (changing loaded weights
  risks visible text changes).
- SVG: icon-registry.ts centralizes all icons via @lucide/angular (no
  inline SVG path duplication). Checked SVGs under public/ for editor
  cruft (metadata/inkscape/sodipodi comments) - found none, already
  clean. Flagged, not fixed: mastercard-logo.min.svg, dexar-logo*.svg,
  dexar-favicon.svg, novo-logo.svg, novo-favicon.svg appear unreferenced
  in src/public manifests - left in place since deletion is out of this
  task's scope and they may be used by backend-driven tenant branding.

Verified: npx tsc --noEmit clean, npm run build green (initial bundle
unchanged at 1.12 MB, this pass only touched global CSS).
---
 src/styles.scss | 72 ++-----------------------------------------------
 1 file changed, 2 insertions(+), 70 deletions(-)

diff --git a/src/styles.scss b/src/styles.scss
index c251fa7..98430b0 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -306,14 +306,12 @@ details[open] > summary::after {
 }
 
 .product-card,
-.item-card,
-.catalog-product-card {
+.item-card {
   transition: transform var(--transition-normal), box-shadow var(--transition-normal);
 }
 
 .product-card:hover,
-.item-card:hover,
-.catalog-product-card:hover {
+.item-card:hover {
   transform: translateY(-2px) scale(1.01);
 }
 
@@ -337,28 +335,6 @@ details[open] > summary::after {
   transform: translateY(-1px);
 }
 
-.btn-primary {
-  background: var(--primary-color);
-  color: #fff;
-  border-color: var(--primary-color);
-}
-
-.btn-primary:hover {
-  background: var(--primary-hover);
-  border-color: var(--primary-hover);
-}
-
-.btn-secondary {
-  background: var(--secondary-color);
-  color: #fff;
-  border-color: var(--secondary-color);
-}
-
-.btn-secondary:hover {
-  background: var(--secondary-hover);
-  border-color: var(--secondary-hover);
-}
-
 .btn-ghost {
   background: transparent;
   color: var(--text-primary);
@@ -414,37 +390,8 @@ details[open] > summary::after {
   }
 }
 
-.text-center {
-  text-align: center;
-}
-
-.mt-1 { margin-top: var(--space-sm); }
-.mt-2 { margin-top: var(--space-md); }
-.mt-3 { margin-top: var(--space-lg); }
-.mt-4 { margin-top: var(--space-xl); }
-
-.mb-1 { margin-bottom: var(--space-sm); }
-.mb-2 { margin-bottom: var(--space-md); }
-.mb-3 { margin-bottom: var(--space-lg); }
-.mb-4 { margin-bottom: var(--space-xl); }
-
-.p-1 { padding: var(--space-sm); }
-.p-2 { padding: var(--space-md); }
-.p-3 { padding: var(--space-lg); }
-.p-4 { padding: var(--space-xl); }
-
 // ─── Shared Badge & Tag Styles (from backOffice integration) ───
 
-.item-badges-overlay {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  z-index: 2;
-}
-
 .item-badge {
   display: inline-block;
   padding: 2px var(--space-xs);
@@ -476,18 +423,3 @@ details[open] > summary::after {
   border: 1px solid rgba(73, 118, 113, 0.15);
 }
 
-.item-simple-desc {
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-  line-height: var(--line-height-normal);
-  margin: 2px 0 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  line-clamp: 2;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-
-