From 230e5b01acda77cf29b9f3b911327fb1f8bb9150 Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Tue, 22 Sep 2026 16:01:47 -0300
Subject: [PATCH] feat(store-header): update button variant and adjust z-index
 for improved navigation

---
 .../immersive-store-header.component.html     |  2 +-
 .../immersive-store-header.component.scss     | 15 ++++++-------
 .../store-header/store-header.component.scss  | 22 ++++++++++++++++++-
 .../user-dropdown.component.scss              |  3 ++-
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.html b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.html
index 3930a15..7dda3bd 100644
--- a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.html
+++ b/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()"
diff --git a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss
index 8d0293e..9abb08c 100644
--- a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss
+++ b/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);
diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.scss b/src/app/core/layout/store-layout/store-header/store-header.component.scss
index de815ff..5781be3 100644
--- a/src/app/core/layout/store-layout/store-header/store-header.component.scss
+++ b/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;
diff --git a/src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.scss b/src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.scss
index 022069a..9b2266c 100644
--- a/src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.scss
+++ b/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));
   }
 }