feat(store-header): enhance mobile layout with improved spacing and responsive styles

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

@@ -204,7 +204,8 @@
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto auto;
       align-items: center;
-      padding: 1.25rem 0 clamp(1rem, 4vw, 1.5rem);
+      align-content: start;
+      padding: 1.875rem 0 1.5rem;
     }
 
     // Keep one search form while placing it below the hero copy on mobile.
@@ -237,7 +238,7 @@
 
     .immersive-header__copy {
       grid-area: 3 / 1 / auto / -1;
-      margin: 1rem 0 0;
+      margin: 1.25rem 0 0;
     }
 
     .immersive-header__eyebrow {
@@ -245,18 +246,21 @@
     }
 
     .immersive-header__title {
-      font-size: clamp(42px, 13vw, 64px);
+      font-size: clamp(40px, 12vw, 56px);
       line-height: 0.7;
     }
 
     .immersive-header__description {
       margin-top: 30px;
-      font-size: 18px;
+      font-size: clamp(11px, 3vw, 14px);
+      line-height: 1.5;
+      color: #666;
+      text-shadow: none;
     }
 
     .immersive-header__search {
       grid-area: 4 / 1 / auto / -1;
-      width: 76%;
+      width: 74%;
       max-width: 28rem;
       margin: 0.5rem auto 0;
     }
@@ -265,11 +269,11 @@
       right: auto;
       left: 0;
       width: 100%;
-      color: #fff;
+      color: var(--tenant-danger, #dc3545);
     }
 
     app-continuous-image-carousel {
-      grid-area: 5 / 1 / auto / -1;
+      grid-area: 6 / 1 / auto / -1;
       margin-top: 1.5rem;
       --carousel-card-width: 27vw;
       --carousel-gap: 3.3vw;
@@ -281,6 +285,9 @@
     }
 
     .immersive-header__backdrop {
+      // Keep the fade tied to the hero, independent of the content below it.
+      align-self: start;
+      height: 12.5rem;
       // Fade the entire layer so its dark base cannot leave a subpixel seam.
       mask-image: linear-gradient(#000 calc(100% - 8px), transparent 100%);
     }
@@ -288,10 +295,10 @@
     .immersive-header__backdrop::after {
       background: linear-gradient(
         180deg,
-        rgba(0, 0, 0, 0.45) 0%,
-        rgba(0, 0, 0, 0.15) 55%,
-        rgba(245, 245, 245, 0.55) 75%,
-        #f5f5f5 95%,
+        rgba(0, 0, 0, 0.25) 0%,
+        rgba(245, 245, 245, 0.1) 30%,
+        rgba(245, 245, 245, 0.65) 65%,
+        #f5f5f5 98%,
         #f5f5f5 100%
       );
     }
@@ -301,10 +308,10 @@
     .immersive-header__search .form-control {
       min-height: 36px;
       padding: 0.25rem 2.5rem 0.25rem 0.75rem;
-      border: 1px solid rgba(255, 255, 255, 0.85);
+      border: 1px solid #888;
       border-radius: 3px;
       background: transparent;
-      color: #fff;
+      color: #666;
       font-size: 16px;
 
       &::placeholder {
@@ -312,13 +319,13 @@
       }
 
       &:focus-visible {
-        outline: 2px solid #fff;
+        outline: 2px solid #666;
         outline-offset: 2px;
       }
     }
 
     .immersive-header__search .input-search-icon {
-      color: #fff;
+      color: #666;
       right: 0.75rem;
     }
 

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

@@ -48,11 +48,13 @@ app-immersive-store-header {
 
 @media (max-width: 767.98px) {
   .immersive-categories {
-    margin-top: 5rem;
-    padding: 1rem 0.25rem 0;
+    grid-area: 5 / 1 / auto / -1;
+    min-width: 0;
+    margin-top: 1.5rem;
+    padding: 0 1rem;
     font-size: clamp(10px, 2.8vw, 12px);
     --horizontal-carousel-visible-items: 3;
-    --horizontal-carousel-gap: 90px;
+    --horizontal-carousel-gap: 0.5rem;
     --horizontal-carousel-item-width: calc((100cqw - 2 * var(--horizontal-carousel-gap)) / 3);
     --horizontal-carousel-white-space: normal;
     --horizontal-carousel-snap: x mandatory;