feat(store-header): integrate immersive categories within the header and update styles for improved layout

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

@@ -118,6 +118,9 @@
           ariaLabel="Imágenes del evento"
         />
       }
+
     }
+
+    <ng-content />
   </div>
 </header>

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

@@ -7,7 +7,6 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   isolation: isolate;
-  min-height: 640px;
   color: #fff;
   background: #f5f5f5;
 }
@@ -18,7 +17,7 @@
   z-index: 1;
   min-width: 0;
   padding-top: clamp(1.75rem, 4vw, 2.5rem);
-  padding-bottom: 0.5rem;
+  padding-bottom: clamp(2rem, 4vw, 3rem);
 }
 
 .immersive-header__backdrop {
@@ -203,7 +202,7 @@
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto auto;
       align-items: center;
-      padding: 1.25rem 0 0;
+      padding: 1.25rem 0 clamp(2rem, 8vw, 3rem);
     }
 
     // Keep one search form while placing it below the hero copy on mobile.

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

@@ -20,7 +20,17 @@
       (loginClick)="loginClick.emit()"
       (logoutClick)="logoutClick.emit()"
       (searchSubmit)="searchSubmit.emit($event)"
-    />
+    >
+      @if (displayCategories() && categories().length) {
+        <nav class="immersive-categories" aria-label="Categorías">
+          <app-horizontal-carousel
+            [items]="categoryItems()"
+            ariaLabel="Categorías"
+            (itemSelect)="onCategoryItemSelect($event)"
+          />
+        </nav>
+      }
+    </app-immersive-store-header>
   }
   @default {
     <ng-container *ngTemplateOutlet="standardHeader" />
@@ -50,13 +60,3 @@
     (categorySelect)="categorySelect.emit($event)"
   />
 </ng-template>
-
-@if (headerType() === 'immersive' && displayCategories() && categories().length) {
-  <nav class="immersive-categories" aria-label="Categor<6F>as">
-    <app-horizontal-carousel
-      [items]="categoryItems()"
-      ariaLabel="Categor<6F>as"
-      (itemSelect)="onCategoryItemSelect($event)"
-    />
-  </nav>
-}

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

@@ -14,6 +14,7 @@ app-immersive-store-header {
 }
 
 :host(.immersive-shell--compact) .immersive-categories {
+  margin-top: 0.75rem;
   border: 0;
   box-shadow: none;
   background: transparent;
@@ -33,10 +34,11 @@ app-immersive-store-header {
 
 .immersive-categories {
   position: relative;
-  z-index: 0;
+  z-index: 1;
   width: 100%;
+  margin-top: clamp(2rem, 5vw, 4rem);
   padding: 0.375rem 1rem;
-  background: #f5f5f5;
+  background: transparent;
   color: #666;
   font-size: 15px;
   font-weight: 700;
@@ -46,6 +48,7 @@ app-immersive-store-header {
 
 @media (max-width: 767.98px) {
   .immersive-categories {
+    margin-top: 2rem;
     padding: 1rem 0.25rem 0;
     font-size: clamp(10px, 2.8vw, 12px);
     --horizontal-carousel-visible-items: 3;

src/app/core/layout/store-layout/store-layout.component.spec.ts

@@ -332,7 +332,7 @@ describe('StoreLayoutComponent', () => {
     expect(element.querySelector('[data-testid="store-header-tickets"]')).not.toBeNull();
   });
 
-  it('shows immersive categories below the header and navigates on selection', () => {
+  it('shows immersive categories inside the header and navigates on selection', () => {
     tenantState.set({
       ...tenant,
       header_type: 'immersive',
@@ -362,7 +362,7 @@ describe('StoreLayoutComponent', () => {
 
     expect(header).not.toBeNull();
     expect(categories).not.toBeNull();
-    expect(header?.contains(categories)).toBe(false);
+    expect(header?.contains(categories)).toBe(true);
     expect(categoryButton?.textContent?.trim()).toBe('MÚSICA');
 
     const navigate = vi.spyOn(TestBed.inject(Router), 'navigate');