feat(store-header): enhance search functionality with responsive styles and improved visibility

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

@@ -34,7 +34,7 @@
           <form
             id="immersive-search"
             class="immersive-header__search"
-            [hidden]="!showHero() && !isSearchOpen()"
+            [class.immersive-header__search--open]="isSearchOpen()"
             role="search"
             (submit)="submitSearch($event)"
           >
@@ -95,8 +95,8 @@
 
         <div class="immersive-header__account">
           <app-icon-button
-            [variant]="showHero() ? 'user' : 'bars'"
-            [ariaLabel]="showHero() ? 'Mi cuenta' : 'Abrir menú'"
+            variant="user"
+            ariaLabel="Mi cuenta"
             ariaControls="immersive-user-dropdown"
             [ariaExpanded]="isUserDropdownOpen()"
             (clicked)="toggleUserDropdown()"

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

@@ -170,7 +170,6 @@
   .immersive-header__nav {
     flex-wrap: nowrap;
     gap: 0.75rem;
-    padding-inline: 8vw !important;
     min-height: 44px;
   }
 
@@ -182,27 +181,10 @@
     flex: 0 1 auto;
     gap: 0.375rem;
   }
-
-  .immersive-header__search {
-    position: absolute;
-    top: calc(100% + 0.5rem);
-    right: 8vw;
-    width: min(320px, 84vw);
-    padding: 0.75rem;
-    border-radius: 6px;
-    background: #f5f5f5;
-    box-shadow: 0 4px 16px #0002;
-  }
-
-  .immersive-header__search-error {
-    position: static;
-    display: block;
-    margin-top: 0.25rem;
-  }
 }
 
 .immersive-header__search-toggle {
-  display: inline-flex;
+  display: none;
   flex: none;
   align-items: center;
   justify-content: center;
@@ -302,6 +284,34 @@
 }
 
 @media (max-width: 767.98px) {
+  .immersive-header--compact {
+    .immersive-header__search {
+      position: absolute;
+      top: calc(100% + 0.5rem);
+      right: 8vw;
+      display: none;
+      width: min(320px, 84vw);
+      padding: 0.75rem;
+      border-radius: 6px;
+      background: #f5f5f5;
+      box-shadow: 0 4px 16px #0002;
+    }
+
+    .immersive-header__search--open {
+      display: block;
+    }
+
+    .immersive-header__search-error {
+      position: static;
+      display: block;
+      margin-top: 0.25rem;
+    }
+
+    .immersive-header__search-toggle {
+      display: inline-flex;
+    }
+  }
+
   .immersive-header:not(.immersive-header--compact) {
     min-height: 0;