feat(store-header): update button variant and adjust z-index for improved navigation

src/app/core/layout/store-layout/store-header/immersive-store-header.component.html

@@ -52,7 +52,7 @@
         @if (!showHero()) {
           @if (ticketsMenu(); as menu) {
             <app-button
-              variant="secondary"
+              variant="primary"
               hostClass="immersive-header__tickets"
               data-testid="store-header-tickets"
               (click)="ticketsClick.emit()"

src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss

@@ -59,7 +59,10 @@
 
 .immersive-header__nav {
   position: relative;
-  z-index: 1;
+  // Keep the whole navigation stacking context above the hero copy and carousel.
+  // Otherwise those later siblings can sit on top of the dropdown and capture
+  // pointer events even though the dropdown itself has a high z-index.
+  z-index: 10;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -102,15 +105,11 @@
 }
 .immersive-header__account {
   position: relative;
+  // The nav becomes display: contents on mobile, so it cannot provide the
+  // stacking context there. Keep the dropdown trigger above following rows.
+  z-index: 10;
   display: flex;
 }
-.immersive-header__account app-user-dropdown {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  z-index: 20;
-  color: #222;
-}
 :host ::ng-deep .immersive-header__actions .icon-btn,
 :host ::ng-deep .immersive-header__actions .cart-icon {
   color: var(--tenant-primary, #ff7006);

src/app/core/layout/store-layout/store-header/store-header.component.scss

@@ -2,6 +2,11 @@
   display: block;
 }
 
+app-immersive-store-header {
+  position: relative;
+  z-index: 1;
+}
+
 :host(.immersive-shell--compact) {
   background-color: #f5f5f5;
   background-position: center 42%;
@@ -9,11 +14,26 @@
 }
 
 :host(.immersive-shell--compact) .immersive-categories {
-  border-top: 1px solid rgba(255, 255, 255, 0.6);
+  border: 0;
+  box-shadow: none;
   background: transparent;
 }
 
+:host(.immersive-shell--compact) .immersive-categories::after {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  background: #f5f5f5;
+  pointer-events: none;
+}
+
 .immersive-categories {
+  position: relative;
+  z-index: 0;
   width: 100%;
   padding: 0.375rem 1rem;
   background: #f5f5f5;

src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.scss

@@ -71,6 +71,7 @@
 
 @media (max-width: 575.98px) {
   :host {
-    right: -0.5rem;
+    right: 0;
+    width: min(18rem, calc(100vw - 1rem));
   }
 }