From 85f1b820b4f8420511d562c86b168b8d58febfeb Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Tue, 22 Sep 2026 15:17:11 -0300
Subject: [PATCH] feat(store-header): refine immersive mobile layout

---
 .../immersive-store-header.component.scss     | 137 ++++++++++++++++++
 .../continuous-image-carousel.component.scss  |   8 +-
 2 files changed, 142 insertions(+), 3 deletions(-)

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 d053234..8d0293e 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
@@ -195,3 +195,140 @@
     font-size: clamp(3rem, 12vw, 5rem);
   }
 }
+
+@media (max-width: 767.98px) {
+  .immersive-header:not(.immersive-header--compact) {
+    min-height: 0;
+
+    .immersive-header__content {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto auto;
+      align-items: center;
+      padding: 1.25rem 0 0;
+    }
+
+    // Keep one search form while placing it below the hero copy on mobile.
+    .immersive-header__nav,
+    .immersive-header__actions {
+      display: contents;
+    }
+
+    .immersive-header__brand {
+      grid-area: 1 / 1;
+      margin-left: 8vw;
+    }
+
+    .immersive-header__brand img {
+      width: clamp(105px, 34vw, 145px);
+    }
+
+    app-cart-icon {
+      grid-area: 1 / 2;
+    }
+
+    .immersive-header__account {
+      grid-area: 1 / 3;
+      margin-right: calc(8vw - 0.75rem);
+    }
+
+    .immersive-header__timer {
+      grid-area: 2 / 1 / auto / -1;
+    }
+
+    .immersive-header__copy {
+      grid-area: 3 / 1 / auto / -1;
+      margin: 1rem 0 0;
+    }
+
+    .immersive-header__eyebrow {
+      font-size: clamp(18px, 5.5vw, 24px);
+    }
+
+    .immersive-header__title {
+      font-size: clamp(42px, 13vw, 64px);
+      line-height: 0.95;
+    }
+
+    .immersive-header__description {
+      margin-top: 2rem;
+      font-size: clamp(11px, 3vw, 14px);
+    }
+
+    .immersive-header__search {
+      grid-area: 4 / 1 / auto / -1;
+      width: 76%;
+      max-width: 28rem;
+      margin: 0.5rem auto 0;
+    }
+
+    .immersive-header__search-error {
+      right: auto;
+      left: 0;
+      width: 100%;
+      color: #fff;
+    }
+
+    app-continuous-image-carousel {
+      grid-area: 5 / 1 / auto / -1;
+      margin-top: 1.5rem;
+      --carousel-card-width: 27vw;
+      --carousel-gap: 3.3vw;
+      --carousel-offset: -9vw;
+    }
+
+    .immersive-header__backdrop-image {
+      object-position: center 42%;
+    }
+
+    .immersive-header__backdrop {
+      // Fade the entire layer so its dark base cannot leave a subpixel seam.
+      mask-image: linear-gradient(#000 calc(100% - 8px), transparent 100%);
+    }
+
+    .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%,
+        #f5f5f5 100%
+      );
+    }
+  }
+
+  :host ::ng-deep .immersive-header:not(.immersive-header--compact) {
+    .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-radius: 3px;
+      background: transparent;
+      color: #fff;
+      font-size: 16px;
+
+      &::placeholder {
+        color: transparent;
+      }
+
+      &:focus-visible {
+        outline: 2px solid #fff;
+        outline-offset: 2px;
+      }
+    }
+
+    .immersive-header__search .input-search-icon {
+      color: #fff;
+      right: 0.75rem;
+    }
+
+    .immersive-header__account .icon-btn {
+      min-width: 44px;
+      min-height: 44px;
+
+      i {
+        font-size: 18px;
+      }
+    }
+  }
+}
diff --git a/src/app/shared/components/continuous-image-carousel/continuous-image-carousel.component.scss b/src/app/shared/components/continuous-image-carousel/continuous-image-carousel.component.scss
index a67349f..6d1f6e9 100644
--- a/src/app/shared/components/continuous-image-carousel/continuous-image-carousel.component.scss
+++ b/src/app/shared/components/continuous-image-carousel/continuous-image-carousel.component.scss
@@ -14,20 +14,21 @@
 .continuous-carousel__track {
   display: flex;
   width: max-content;
+  margin-left: var(--carousel-offset, 0px);
   animation: continuous-carousel-scroll var(--duration) linear infinite;
 }
 
 .continuous-carousel__set {
   display: flex;
   flex: none;
-  gap: var(--gap);
-  padding-right: var(--gap);
+  gap: var(--carousel-gap, var(--gap));
+  padding-right: var(--carousel-gap, var(--gap));
 }
 
 .continuous-carousel__image {
   display: block;
   flex: none;
-  width: var(--card-width);
+  width: var(--carousel-card-width, var(--card-width));
   aspect-ratio: 1.45;
   object-fit: cover;
   border-radius: 2px;
@@ -64,6 +65,7 @@
   }
   .continuous-carousel__track {
     animation: none;
+    margin-left: 0;
   }
   .continuous-carousel__set[aria-hidden='true'] {
     display: none;