fix(storefront): polish header

Fix keyboard-inaccessible mobile nav items (catalog + static pages):
were <a> with no href, activated only by (click), so not reachable
via Enter/Space or exposed correctly to assistive tech. Converted to
<button type="button"> matching the existing desktop nav-btn pattern.
Also drop the redundant inline cursor style now covered by the class.

Remove ~495 lines of dead .header/.alt-header CSS from two earlier
redesigns superseded by the current .platform-* template (verified
zero template references).

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

src/app/components/header/header.component.html

@@ -133,7 +133,7 @@
       </a>
 
       @if (headerConfig().showCategories) {
-      <a (click)="navigateToCatalog()" class="platform-mobile-item" style="cursor: pointer;">
+      <button type="button" (click)="navigateToCatalog()" class="platform-mobile-item">
         <svg width="24" height="24" viewBox="0 0 31 31" fill="none">
           <path d="M1.9375 4.84375C1.9375 3.23867 3.23867 1.9375 4.84375 1.9375L10.6562 1.9375C12.2613 1.9375 13.5625 3.23867 13.5625 4.84375V10.6562C13.5625 12.2613 12.2613 13.5625 10.6562 13.5625H4.84375C3.23867 13.5625 1.9375 12.2613 1.9375 10.6562L1.9375 4.84375ZM4.84375 3.875C4.30872 3.875 3.875 4.30872 3.875 4.84375V10.6562C3.875 11.1913 4.30872 11.625 4.84375 11.625H10.6562C11.1913 11.625 11.625 11.1913 11.625 10.6562V4.84375C11.625 4.30872 11.1913 3.875 10.6562 3.875H4.84375ZM17.4375 4.84375C17.4375 3.23867 18.7387 1.9375 20.3438 1.9375L26.1562 1.9375C27.7613 1.9375 29.0625 3.23867 29.0625 4.84375V10.6562C29.0625 12.2613 27.7613 13.5625 26.1562 13.5625H20.3438C18.7387 13.5625 17.4375 12.2613 17.4375 10.6562V4.84375ZM20.3438 3.875C19.8087 3.875 19.375 4.30872 19.375 4.84375V10.6562C19.375 11.1913 19.8087 11.625 20.3438 11.625H26.1562C26.6913 11.625 27.125 11.1913 27.125 10.6562V4.84375C27.125 4.30872 26.6913 3.875 26.1562 3.875H20.3438ZM1.9375 20.3438C1.9375 18.7387 3.23867 17.4375 4.84375 17.4375H10.6562C12.2613 17.4375 13.5625 18.7387 13.5625 20.3438V26.1562C13.5625 27.7613 12.2613 29.0625 10.6562 29.0625H4.84375C3.23867 29.0625 1.9375 27.7613 1.9375 26.1562L1.9375 20.3438ZM4.84375 19.375C4.30872 19.375 3.875 19.8087 3.875 20.3438V26.1562C3.875 26.6913 4.30872 27.125 4.84375 27.125H10.6562C11.1913 27.125 11.625 26.6913 11.625 26.1562V20.3438C11.625 19.8087 11.1913 19.375 10.6562 19.375H4.84375ZM17.4375 20.3438C17.4375 18.7387 18.7387 17.4375 20.3438 17.4375H26.1562C27.7613 17.4375 29.0625 18.7387 29.0625 20.3438V26.1562C29.0625 27.7613 27.7613 29.0625 26.1562 29.0625H20.3438C18.7387 29.0625 17.4375 27.7613 17.4375 26.1562V20.3438ZM20.3438 19.375C19.8087 19.375 19.375 19.8087 19.375 20.3438V26.1562C19.375 26.6913 19.8087 27.125 20.3438 27.125H26.1562C26.6913 27.125 27.125 26.6913 27.125 26.1562V20.3438C27.125 19.8087 26.6913 19.375 26.1562 19.375H20.3438Z" fill="#497671" />
         </svg>
@@ -141,16 +141,16 @@
         <svg class="platform-mobile-chevron" width="8" height="14" viewBox="0 0 8 14" fill="none">
           <path d="M1 1L7 7L1 13" stroke="#697777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
-      </a>
+      </button>
       }
 
       @for (page of headerPages(); track page.id) {
-        <a (click)="navigateToStatic(page.route)" class="platform-mobile-item" style="cursor: pointer;">
+        <button type="button" (click)="navigateToStatic(page.route)" class="platform-mobile-item">
           <span>{{ page.title }}</span>
           <svg class="platform-mobile-chevron" width="8" height="14" viewBox="0 0 8 14" fill="none">
             <path d="M1 1L7 7L1 13" stroke="#697777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
-        </a>
+        </button>
       }
 
       <div class="platform-mobile-controls">

src/app/components/header/header.component.scss

@@ -1,498 +1,3 @@
-.header {
-  background: white;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-}
-
-.header-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 16px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  text-decoration: none;
-  color: #333;
-  font-size: 1.5rem;
-  font-weight: 700;
-  transition: color 0.2s;
-
-  .logo-icon {
-    font-size: 2rem;
-  }
-
-  &:hover {
-    color: var(--primary-hover);
-  }
-}
-
-/* Shared badge styling for cart count */
-.cart-badge {
-  background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
-  color: white;
-  font-weight: 700;
-  padding: 3px 7px;
-  border-radius: 12px;
-  min-width: 20px;
-  text-align: center;
-  box-shadow: 0 3px 8px rgba(255, 71, 87, 0.4);
-  border: 2px solid white;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.nav {
-  display: flex;
-  align-items: center;
-  gap: 32px;
-
-  a {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    text-decoration: none;
-    color: #333;
-    font-weight: 500;
-    transition: all 0.2s;
-    position: relative;
-    padding: 8px 12px;
-    border-radius: 6px;
-
-    .nav-icon {
-      font-size: 1.2rem;
-      line-height: 1;
-    }
-
-    .nav-text {
-      font-size: 1rem;
-    }
-
-    &:hover {
-      color: var(--primary-hover);
-      background: rgba(73, 118, 113, 0.05);
-    }
-
-    &.active {
-      color: var(--primary-hover);
-      background: rgba(73, 118, 113, 0.1);
-      font-weight: 600;
-    }
-  }
-
-  .cart-link {
-    .cart-badge {
-      position: absolute;
-      top: -6px;
-      right: -6px;
-      font-size: 0.75rem;
-    }
-  }
-}
-
-.cart-link {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  position: relative;
-
-  .cart-icon {
-    font-size: 1.3rem;
-  }
-
-  .cart-badge {
-    position: absolute;
-    top: -8px;
-    right: -12px;
-    font-size: 0.8rem;
-  }
-}
-
-.menu-toggle {
-  display: none;
-  flex-direction: column;
-  gap: 5px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 8px;
-
-  span {
-    width: 25px;
-    height: 3px;
-    background: #333;
-    border-radius: 2px;
-    transition: all 0.3s;
-  }
-
-  &.active {
-    span:nth-child(1) {
-      transform: rotate(45deg) translate(7px, 4.5px);
-    }
-
-    span:nth-child(2) {
-      opacity: 0;
-    }
-
-    span:nth-child(3) {
-      transform: rotate(-45deg) translate(7px, -4.5px);
-    }
-  }
-}
-
-.cart-link-mobile {
-  display: none;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-right: 8px;
-}
-
-@media (max-width: 768px) {
-  .cart-link-mobile {
-    display: flex;
-    align-items: center;
-    position: relative;
-    text-decoration: none;
-    margin-right: 8px;
-    padding: 8px;
-    border-radius: 6px;
-    transition: background 0.2s;
-
-    .cart-icon {
-      font-size: 1.5rem;
-      color: #333;
-    }
-
-    .cart-badge {
-      position: absolute;
-      top: 2px;
-      right: 2px;
-      font-size: 0.75rem;
-    }
-
-    &:hover {
-      background: rgba(73, 118, 113, 0.05);
-    }
-
-    &.active {
-      background: rgba(73, 118, 113, 0.1);
-    }
-  }
-
-  .nav {
-    position: fixed;
-    top: 68px;
-    left: 0;
-    right: 0;
-    background: white;
-    flex-direction: column;
-    gap: 0;
-    padding: 0;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease;
-
-    &.nav-open {
-      max-height: 300px;
-    }
-
-    a {
-      width: 100%;
-      padding: 16px 20px;
-      border-bottom: 1px solid #f0f0f0;
-
-      &::after {
-        display: none;
-      }
-
-      &.active {
-        background: #f5f5f5;
-      }
-    }
-
-    .cart-link {
-      display: none;
-    }
-  }
-
-  .menu-toggle {
-    display: flex;
-  }
-
-  .logo-text {
-    font-size: 1.2rem;
-  }
-}
-
-// ========== alt HEADER STYLES ==========
-.alt-header {
-  background: white;
-  border-bottom: 1px solid var(--border-color);
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  backdrop-filter: blur(10px);
-  background: rgba(255, 255, 255, 0.95);
-}
-
-.alt-header-container {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 1rem 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.alt-left {
-  flex: 1;
-}
-
-.alt-logo {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  text-decoration: none;
-  
-  .alt-brand {
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: var(--text-primary);
-    transition: color 0.3s;
-  }
-  
-  &:hover .alt-brand {
-    color: var(--primary-color);
-  }
-}
-
-.alt-nav {
-  flex: 2;
-  display: flex;
-  justify-content: center;
-  
-  .alt-nav-links {
-    display: flex;
-    gap: 2.5rem;
-  }
-  
-  .alt-link {
-    color: var(--text-secondary);
-    text-decoration: none;
-    font-weight: 500;
-    font-size: 0.95rem;
-    position: relative;
-    padding: 0.5rem 0;
-    transition: color 0.3s;
-    
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 0;
-      height: 2px;
-      background: var(--primary-color);
-      transition: width 0.3s;
-    }
-    
-    &:hover,
-    &.alt-active {
-      color: var(--primary-color);
-      
-      &::after {
-        width: 100%;
-      }
-    }
-  }
-}
-
-.alt-right {
-  flex: 1;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 1.5rem;
-}
-
-.alt-mobile-controls {
-  display: none;
-}
-
-.alt-cart {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.2rem;
-  color: var(--text-primary);
-  text-decoration: none;
-  padding: 0.5rem;
-  border-radius: var(--radius-md);
-  transition: all 0.3s;
-  
-  &:hover,
-  &.alt-cart-active {
-    color: var(--primary-color);
-    background: var(--bg-secondary);
-  }
-}
-
-.alt-cart-icon {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 0;
-
-  svg {
-    display: block;
-  }
-}
-
-.alt-cart-badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  background: var(--primary-color);
-  color: white;
-  font-size: 0.7rem;
-  font-weight: 700;
-  min-width: 18px;
-  height: 18px;
-  border-radius: 9px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 5px;
-  box-shadow: var(--shadow-sm);
-}
-
-.alt-cart-total {
-  font-size: 0.68rem;
-  font-weight: 700;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.alt-menu-toggle {
-  display: none;
-  flex-direction: column;
-  gap: 5px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0.5rem;
-  
-  span {
-    width: 24px;
-    height: 2px;
-    background: var(--text-primary);
-    border-radius: 2px;
-    transition: all 0.3s;
-  }
-  
-  &.alt-active {
-    span:nth-child(1) {
-      transform: rotate(45deg) translate(6px, 6px);
-    }
-    span:nth-child(2) {
-      opacity: 0;
-    }
-    span:nth-child(3) {
-      transform: rotate(-45deg) translate(7px, -7px);
-    }
-  }
-}
-
-@media (max-width: 968px) {
-  .alt-nav {
-    position: fixed;
-    top: 65px;
-    left: 0;
-    right: 0;
-    background: white;
-    border-bottom: 1px solid var(--border-color);
-    box-shadow: var(--shadow-md);
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s;
-    
-    &.alt-nav-open {
-      max-height: calc(100dvh - 65px);
-      overflow-y: auto;
-    }
-    
-    .alt-nav-links {
-      width: 100%;
-      flex-direction: column;
-      gap: 0;
-      padding: 1rem 0;
-    }
-    
-    .alt-link {
-      padding: 1rem 2rem;
-      border-bottom: 1px solid var(--border-color);
-      text-align: center;
-      
-      &::after {
-        display: none;
-      }
-      
-      &:hover,
-      &.alt-active {
-        background: var(--bg-secondary);
-      }
-    }
-  }
-
-  .alt-right {
-    flex: 0 0 auto;
-    gap: 0.75rem;
-  }
-
-  .alt-right > app-region-selector,
-  .alt-right > app-language-selector {
-    display: none;
-  }
-
-  .alt-mobile-controls {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 12px;
-    padding: 1rem 2rem 1.25rem;
-    border-top: 1px solid var(--border-color);
-  }
-  
-  .alt-menu-toggle {
-    display: flex;
-  }
-}
-
-@media (max-width: 768px) {
-  .alt-header-container {
-    padding: 1rem;
-  }
-  
-  .alt-logo .alt-brand {
-    font-size: 1.1rem;
-  }
-}
-
-// ========== platform REDESIGN 2026 STYLES ==========
 .platform-header {
   background: rgba(117, 121, 124, 0.1);
   padding: 8px 0;
@@ -526,7 +31,7 @@
   align-items: center;
   text-decoration: none;
   flex-shrink: 0;
-  
+
   ::ng-deep .logo-img {
     width: 120px;
     height: 38px;
@@ -622,7 +127,7 @@
   font-size: 15px;
   color: #828e8d;
   cursor: pointer;
-  
+
   &::placeholder {
     color: #828e8d;
   }
@@ -690,16 +195,16 @@
   cursor: pointer;
   transition: opacity 0.3s ease;
   gap: 2px;
-  
+
   svg {
     width: 36px;
     height: 28px;
   }
-  
+
   &:hover {
     opacity: 0.85;
   }
-  
+
   &.platform-cart-active {
     opacity: 1;
   }
@@ -775,6 +280,8 @@
   font-weight: 500;
   color: #1e3c38;
   text-decoration: none;
+  text-align: left;
+  appearance: none;
   cursor: pointer;
   transition: background 0.2s ease, transform 0.15s ease;
   box-sizing: border-box;
@@ -878,7 +385,7 @@
   padding: 6px;
   margin-left: auto;
   transition: opacity 0.2s ease;
-  
+
   &:hover {
     opacity: 0.7;
   }
@@ -890,20 +397,20 @@
     padding: 0 32px;
     gap: 32px;
   }
-  
+
   .platform-nav-btn {
     font-size: 18px;
     padding: 8px 32px !important;
   }
-  
+
   .platform-nav-btn-left {
     padding: 8px 32px !important;
   }
-  
+
   .platform-nav-btn-middle {
     padding: 8px 40px !important;
   }
-  
+
   .platform-nav-btn-right {
     padding: 8px 28px !important;
   }
@@ -914,33 +421,33 @@
     padding: 0 20px;
     gap: 20px;
   }
-  
+
   .platform-logo ::ng-deep .logo-img {
     width: 120px;
     height: 40px;
   }
-  
+
   .platform-nav-btn {
     font-size: 16px;
     padding: 8px 24px !important;
   }
-  
+
   .platform-nav-btn-left {
     padding: 8px 24px !important;
   }
-  
+
   .platform-nav-btn-middle {
     padding: 8px 28px !important;
   }
-  
+
   .platform-nav-btn-right {
     padding: 8px 20px !important;
   }
-  
+
   .platform-search-box {
     height: 42px;
   }
-  
+
   .platform-search-input {
     font-size: 18px;
   }
@@ -951,35 +458,35 @@
     gap: 12px;
     padding: 0 16px;
   }
-  
+
   // Hide desktop nav
   .platform-nav {
     display: none;
   }
-  
+
   // Hide desktop language selector
   .platform-lang-desktop {
     display: none !important;
   }
-  
+
   .platform-search-wrapper {
     display: none;
   }
-  
+
   .platform-search-mobile {
     display: flex;
   }
-  
+
   .platform-menu-toggle {
     display: flex;
   }
-  
+
   .platform-logo ::ng-deep .logo-img {
     width: 100px;
     height: 32px;
   }
 
-  // Mobile Menu Backdrop <EFBFBD> full-screen, blurred, blocks interaction
+  // Mobile Menu Backdrop – full-screen, blurred, blocks interaction
   .platform-menu-backdrop {
     display: block;
     position: fixed;
@@ -1011,7 +518,7 @@
     box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
     z-index: 999;
     box-sizing: border-box;
-    
+
     // Hide by default, animate in
     max-height: 0;
     padding-top: 0;
@@ -1053,5 +560,3 @@
   from { opacity: 0; }
   to { opacity: 1; }
 }
-
-