From 92cc1c0275cf45b69912b61640fd7f941c170bf8 Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Wed, 23 Sep 2026 12:04:23 -0300
Subject: [PATCH] feat(store-header): enhance immersive header styles and
 adjust background handling for better visual consistency

---
 .../standard-store-header.component.scss         |  4 ----
 .../store-header/store-header.component.scss     | 16 ++++++++++++++--
 .../store-header/store-header.component.ts       |  5 +++--
 .../event-detail-page.component.scss             |  1 +
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/app/core/layout/store-layout/store-header/standard-store-header.component.scss b/src/app/core/layout/store-layout/store-header/standard-store-header.component.scss
index 256dd7c..4707ae8 100644
--- a/src/app/core/layout/store-layout/store-header/standard-store-header.component.scss
+++ b/src/app/core/layout/store-layout/store-header/standard-store-header.component.scss
@@ -6,10 +6,6 @@
   background-size: cover;
 }
 
-.store-layout__header-main {
-  border-bottom: 1px solid var(--border-color);
-}
-
 .store-layout__categories {
   height: 3.5rem;
 }
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 b0917c9..342b5e8 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
@@ -8,9 +8,21 @@ app-immersive-store-header {
 }
 
 :host(.immersive-shell--compact) {
+  position: relative;
   background-color: #f5f5f5;
-  background-position: center 42%;
-  background-size: cover;
+  background-image: none !important;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-image: var(--compact-header-background);
+    background-position: left top, center 42%;
+    background-size: 100% 100%, cover;
+    background-repeat: no-repeat;
+    mask-image: linear-gradient(#000 calc(100% - 12px), transparent calc(100% - 4px));
+  }
 }
 
 .immersive-categories {
diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.ts b/src/app/core/layout/store-layout/store-header/store-header.component.ts
index a38024c..642e465 100644
--- a/src/app/core/layout/store-layout/store-header/store-header.component.ts
+++ b/src/app/core/layout/store-layout/store-header/store-header.component.ts
@@ -24,7 +24,8 @@ export type StoreHeaderType = 'standard' | 'immersive';
   styleUrl: './store-header.component.scss',
   host: {
     '[class.immersive-shell--compact]': 'isCompactImmersive()',
-    '[style.background-image]': 'compactBackground()',
+    '[style.background-image]': 'null',
+    '[style.--compact-header-background]': 'compactBackground()',
   },
 })
 export class StoreHeaderComponent {
@@ -41,7 +42,7 @@ export class StoreHeaderComponent {
     if (!this.isCompactImmersive()) return null;
 
     const gradient =
-      'linear-gradient(180deg, rgba(245, 245, 245, 0.72) 0%, rgba(245, 245, 245, 0.88) 58%, #f5f5f5 100%)';
+      'linear-gradient(180deg, rgba(245, 245, 245, 0.72) 0%, rgba(245, 245, 245, 0.88) 58%, #f5f5f5 calc(100% - 4px), #f5f5f5 100%)';
     const image = this.backgroundImageUrl();
     return image ? `${gradient}, url(${JSON.stringify(image)})` : gradient;
   });
diff --git a/src/app/features/store/pages/event-detail-page/event-detail-page.component.scss b/src/app/features/store/pages/event-detail-page/event-detail-page.component.scss
index 8a8abf3..78f4da4 100644
--- a/src/app/features/store/pages/event-detail-page/event-detail-page.component.scss
+++ b/src/app/features/store/pages/event-detail-page/event-detail-page.component.scss
@@ -44,6 +44,7 @@
   .event-detail { grid-template-columns: minmax(0, 1fr); }
   .event-detail__sidebar, .event-detail__main, .event-detail__details { grid-column: 1; grid-row: auto; }
   .event-detail__main { margin-top: 2rem; }
+  .event-detail__date-select { width: 100%; }
   .event-detail__description, .event-detail__social { margin-top: 1.5rem; }
   .event-detail__header { min-height: 0; margin-bottom: 2rem; }
   .event-detail__header h1 { font-size: 20px; }