@o2vend/theme-cli 1.0.32

package/test-theme/sections/header-fallback.liquid

@@ -0,0 +1,1805 @@
+{% comment %}
+  Header Fallback Content
+  Used when widgets are not available or widget mode is disabled
+{% endcomment %}
+
+<div class="site-header__fallback">
+  {% comment %}Mobile Header Wrapper{% endcomment %}
+  <div class="mobile-header-wrapper">
+    <div class="mobile-header-top">
+      <button type="button" class="mobile-header__menu-toggle" aria-label="Toggle navigation menu" aria-expanded="false" data-mobile-menu-toggle>
+        <svg class="hamburger-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="3" y1="6" x2="21" y2="6"></line>
+          <line x1="3" y1="12" x2="21" y2="12"></line>
+          <line x1="3" y1="18" x2="21" y2="18"></line>
+        </svg>
+      </button>
+      
+      <div class="mobile-header__brand">
+        <a href="/" aria-label="{{ shop.name }}" class="mobile-header__brand-link">
+          {% assign logo_image = settings.logo | default: section.settings.logo %}
+          {% assign logo_text = settings.logo_text | default: section.settings.logo_text | default: shop.name %}
+          {% assign logo_width = settings.logo_width | default: section.settings.logo_width | default: 150 %}
+          {% if logo_image %}
+            <img src="{{ logo_image }}" alt="{{ logo_text }}" class="mobile-header__logo" loading="lazy" style="max-height: {{ logo_width }}px;">
+          {% elsif shop.logo %}
+            <img src="{{ shop.logo }}" alt="{{ shop.name }}" class="mobile-header__logo" loading="lazy" style="max-height: {{ logo_width }}px;">
+          {% else %}
+            <span class="mobile-header__logo-text">{{ logo_text }}</span>
+          {% endif %}
+        </a>
+      </div>
+      
+      <div class="mobile-header__actions">
+        {% liquid
+          assign cart_icon_val = section.settings.show_cart_icon
+          if cart_icon_val == blank or cart_icon_val == null
+            assign cart_icon_val = settings.show_cart_icon
+          endif
+          if cart_icon_val == blank or cart_icon_val == null
+            assign cart_icon_val = true
+          endif
+        %}
+        {% if cart_icon_val or cart_icon_val == true or cart_icon_val == 'true' or cart_icon_val == 1 %}
+          <button type="button" class="mobile-header__cart-btn" aria-label="Shopping cart" data-cart-toggle title="Shopping Cart">
+            <svg class="cart-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="9" cy="21" r="1"></circle>
+              <circle cx="20" cy="21" r="1"></circle>
+              <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+            </svg>
+            <span data-cart-count>{{ cart.itemCount | default: 0 }}</span>
+          </button>
+        {% endif %}
+      </div>
+    </div>
+    
+    {% comment %}Mobile Search Bar{% endcomment %}
+    {% liquid
+      assign search_val = section.settings.show_search
+      if search_val == blank or search_val == null
+        assign search_val = settings.show_search
+      endif
+      if search_val == blank or search_val == null
+        assign search_val = true
+      endif
+    %}
+    {% if search_val or search_val == true or search_val == 'true' or search_val == 1 %}
+      <div class="mobile-header__search">
+        <form class="mobile-search-form" role="search" data-search-form>
+          <div class="mobile-search-input-wrapper">
+            <svg class="mobile-search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8"></circle>
+              <path d="m21 21-4.35-4.35"></path>
+            </svg>
+            <input type="search" name="q" class="mobile-search-input" placeholder="Search for..." aria-label="Search products" autocomplete="off" data-search-input>
+            <button type="submit" class="mobile-search-submit" aria-label="Search" style="display: none;">Search</button>
+          </div>
+        </form>
+      </div>
+    {% endif %}
+  </div>
+  
+  {% comment %}Desktop Header (Original Structure){% endcomment %}
+  <div class="site-header__fallback-inner">
+    <div class="site-header__brand">
+      <a href="/" aria-label="{{ shop.name }}" class="site-header__brand-link">
+        {% assign logo_image = settings.logo | default: section.settings.logo %}
+        {% assign logo_text = settings.logo_text | default: section.settings.logo_text | default: shop.name %}
+        {% assign logo_width = settings.logo_width | default: section.settings.logo_width | default: 150 %}
+        {% if logo_image %}
+          <img src="{{ logo_image }}" alt="{{ logo_text }}" class="site-header__logo" loading="lazy" style="max-height: {{ logo_width }}px;">
+        {% elsif shop.logo %}
+          <img src="{{ shop.logo }}" alt="{{ shop.name }}" class="site-header__logo" loading="lazy" style="max-height: {{ logo_width }}px;">
+        {% else %}
+          <span class="site-header__logo-text">{{ logo_text }}</span>
+        {% endif %}
+      </a>
+    </div>
+    
+    {% comment %}Desktop Inline Search{% endcomment %}
+    {% liquid
+      assign search_val = section.settings.show_search
+      if search_val == blank or search_val == null
+        assign search_val = settings.show_search
+      endif
+      if search_val == blank or search_val == null
+        assign search_val = true
+      endif
+    %}
+    {% if search_val or search_val == true or search_val == 'true' or search_val == 1 %}
+      <div class="site-header__search-container" data-search-container>
+        <form class="site-header__search-form" action="/search" method="get" role="search">
+          <div class="site-header__search-input-wrapper">
+            <svg class="site-header__search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8"></circle>
+              <path d="m21 21-4.35-4.35"></path>
+            </svg>
+            <input 
+              type="search"
+              name="q"
+              class="site-header__search-input"
+              placeholder="{{ section.settings.search_placeholder | default: settings.search_placeholder | default: 'Search for products...' }}"
+              aria-label="Search products"
+              autocomplete="off"
+              data-search-input>
+            <button type="button" class="site-header__search-clear" aria-label="Clear search" data-search-clear style="display: none;">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          </div>
+        </form>
+        <div class="site-header__search-dropdown" data-search-dropdown style="display: none;">
+          <div class="site-header__search-loading" data-search-loading style="display: none;">
+            <div class="site-header__search-spinner"></div>
+            <span>Searching...</span>
+          </div>
+          <div class="site-header__search-results" data-search-results></div>
+          <div class="site-header__search-empty" data-search-empty style="display: none;">
+            <p>No products found</p>
+          </div>
+        </div>
+      </div>
+    {% endif %}
+    
+    {% assign menu_handle = settings.menu | default: section.settings.menu | default: 'main-menu' %}
+    {% if menu_handle %}
+      {% render 'snippets/mega-menu', menu: menu_handle %}
+    {% elsif mainMenu and mainMenu.items and mainMenu.items.size > 0 %}
+      {% render 'snippets/mega-menu', menu: mainMenu %}
+    {% else %}
+      <nav class="site-header__menu" role="navigation" aria-label="Main navigation">
+        <ul class="site-header__menu-list">
+          <li class="site-header__menu-item"><a href="/products" class="site-header__menu-link">Shop</a></li>
+          <li class="site-header__menu-item"><a href="/contact" class="site-header__menu-link">Contact</a></li>
+        </ul>
+      </nav>
+    {% endif %}
+    <div class="site-header__actions">
+      {% comment %}Search icon - Check section.settings first (merged from global), then global settings{% endcomment %}
+      {% liquid
+        assign search_val = section.settings.show_search
+        if search_val == blank or search_val == null
+          assign search_val = settings.show_search
+        endif
+        if search_val == blank or search_val == null
+          assign search_val = true
+        endif
+      %}
+      {% if search_val or search_val == true or search_val == 'true' or search_val == 1 %}
+        <button type="button" aria-label="Search" class="site-header__search-btn" title="Search" data-search-toggle>🔍</button>
+      {% endif %}
+
+      {%- comment -%}
+        Account / Login actions
+        - If customer is authenticated, show account link and logout
+        - Otherwise, show login trigger that opens the global login modal
+      {%- endcomment -%}
+      {% if customer and customer.isAuthenticated %}
+        <a href="/account" class="site-header__account-btn" aria-label="Account" title="My Account">
+          👤
+        </a>
+        <form method="post" action="/webstoreapi/customer/logout" class="site-header__logout-form">
+          <button type="submit" class="site-header__logout-btn" aria-label="Logout" title="Logout">
+            ⎋
+          </button>
+        </form>
+      {% else %}
+        <button type="button"
+                class="site-header__account-btn"
+                aria-label="Login"
+                title="Login"
+                data-login-modal-trigger>
+          👤
+        </button>
+      {% endif %}
+
+      {% comment %}Cart icon - Check section.settings first (merged from global), then global settings{% endcomment %}
+      {% liquid
+        assign cart_icon_val = section.settings.show_cart_icon
+        if cart_icon_val == blank or cart_icon_val == null
+          assign cart_icon_val = settings.show_cart_icon
+        endif
+        if cart_icon_val == blank or cart_icon_val == null
+          assign cart_icon_val = true
+        endif
+      %}
+      {% if cart_icon_val or cart_icon_val == true or cart_icon_val == 'true' or cart_icon_val == 1 %}
+        <button type="button" class="site-header__cart-btn" aria-label="Shopping cart" data-cart-toggle title="Shopping Cart">
+          🛒 <span data-cart-count>{{ cart.itemCount | default: 0 }}</span>
+        </button>
+      {% endif %}
+    </div>
+  </div>
+</div>
+
+<style>
+  .site-header__fallback {
+    background: var(--color-background, {{ settings.color_background }});
+    border-bottom: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
+    position: relative;
+    overflow: visible;
+  }
+  .site-header__fallback-inner {
+    max-width: var(--container-width, {{ settings.container_width }}px);
+    margin: 0 auto;
+    padding: var(--spacing-element, 0.85rem) var(--spacing-component, 1.25rem);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-component, 1.5rem);
+    position: relative;
+  }
+  .site-header__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-shrink: 0;
+  }
+  
+  .site-header__actions a,
+  .site-header__actions button {
+    text-decoration: none;
+    color: var(--color-text, {{ settings.color_text }});
+    font-weight: var(--font-weight-normal, 400);
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: inherit;
+    padding: var(--spacing-element, 0.5rem);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    border-radius: var(--border-radius-small, 0);
+    transition: opacity var(--transition-fast, 0.2s) var(--ease-out, ease);
+    position: relative;
+  }
+  
+  .site-header__actions a:hover,
+  .site-header__actions button:hover {
+    opacity: 0.6;
+  }
+  
+  .site-header__cart-btn {
+    position: relative;
+    font-size: var(--text-xl, 1.25rem);
+    line-height: 1;
+  }
+  
+  .site-header__cart-btn [data-cart-count] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 var(--spacing-element, 5px);
+    background: var(--color-text, {{ settings.color_text }});
+    color: var(--color-background, {{ settings.color_background }});
+    border-radius: var(--border-radius-medium, 9px);
+    font-size: var(--text-xs, 0.75rem);
+    font-weight: var(--font-weight-bold, 600);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    font-family: var(--font-primary, var(--font-body));
+  }
+  
+  .site-header__cart-btn [data-cart-count]:empty,
+  .site-header__cart-btn [data-cart-count="0"] {
+    display: none;
+  }
+  .site-header__brand {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
+  
+  .site-header__brand-link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+  }
+  
+  .site-header__logo {
+    max-height: 44px;
+    width: auto;
+    height: auto;
+    display: block;
+  }
+  
+  .site-header__logo-text {
+    font-size: var(--text-xl, 1.25rem);
+    font-weight: var(--font-weight-bold, 600);
+    color: var(--color-text, {{ settings.color_text }});
+  }
+  
+  /* Desktop Search Container */
+  .site-header__search-container {
+    display: none;
+    flex: 1;
+    max-width: 500px;
+    margin: 0 2rem;
+    position: relative;
+  }
+
+  .site-header__search-form {
+    width: 100%;
+  }
+
+  .site-header__search-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .site-header__search-icon {
+    position: absolute;
+    left: 1rem;
+    color: var(--color-text, {{ settings.color_text }});
+    opacity: 0.5;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .site-header__search-input {
+    width: 100%;
+    padding: 0.75rem 2.5rem 0.75rem 3rem;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 8px;
+    font-size: 1rem;
+    color: var(--color-text, {{ settings.color_text }});
+    background: var(--color-background, {{ settings.color_background }});
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  }
+
+  .site-header__search-input:focus {
+    outline: none;
+    border-color: var(--color-text, #000);
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
+  }
+
+  .site-header__search-input::placeholder {
+    color: rgba(0, 0, 0, 0.4);
+  }
+
+  .site-header__search-clear {
+    position: absolute;
+    right: 0.75rem;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: var(--color-text, {{ settings.color_text }});
+    opacity: 0.5;
+    cursor: pointer;
+    padding: 0;
+    border-radius: 4px;
+    transition: opacity 0.2s ease, background-color 0.2s ease;
+    z-index: 1;
+  }
+
+  .site-header__search-clear:hover {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .site-header__search-clear svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Search Dropdown */
+  .site-header__search-dropdown {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    left: 0;
+    right: 0;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+    z-index: 1000;
+    max-height: 500px;
+    overflow-y: auto;
+    animation: fadeInDown 0.2s ease;
+  }
+
+  @keyframes fadeInDown {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .site-header__search-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    padding: 2rem;
+    color: var(--color-text, {{ settings.color_text }});
+    opacity: 0.6;
+  }
+
+  .site-header__search-spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(0, 0, 0, 0.1);
+    border-top-color: var(--color-text, #000);
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .site-header__search-results {
+    padding: 0.5rem 0;
+  }
+
+  .site-header__search-result {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem 1rem;
+    text-decoration: none;
+    color: var(--color-text, {{ settings.color_text }});
+    transition: background-color 0.2s ease;
+    cursor: pointer;
+  }
+
+  .site-header__search-result:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+
+  .site-header__search-result-image {
+    flex-shrink: 0;
+    width: 60px;
+    height: 60px;
+    object-fit: cover;
+    border-radius: 6px;
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .site-header__search-result-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .site-header__search-result-name {
+    font-weight: 600;
+    font-size: 0.9375rem;
+    margin: 0 0 0.25rem 0;
+    color: var(--color-text, {{ settings.color_text }});
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .site-header__search-result-price {
+    font-size: 0.875rem;
+    color: rgba(0, 0, 0, 0.6);
+    font-weight: 500;
+  }
+
+  .site-header__search-empty {
+    padding: 2rem;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .site-header__search-empty p {
+    margin: 0;
+    font-size: 0.9375rem;
+  }
+
+  /* Hide search button on desktop when search container is visible */
+  @media (min-width: 1024px) {
+    .site-header__search-container {
+      display: block;
+    }
+    
+    .site-header__search-btn {
+      display: none !important;
+    }
+  }
+
+  /* Hide search container on mobile */
+  @media (max-width: 1023px) {
+    .site-header__search-container {
+      display: none !important;
+    }
+    
+    .site-header__search-btn {
+      display: inline-flex !important;
+    }
+  }
+  
+  /* Menu styling - matching mega-menu.liquid styles */
+  .site-header__menu {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    position: relative;
+    overflow: visible;
+  }
+  
+  .site-header__menu-list {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: 0;
+    margin: 0;
+    padding: 0;
+    position: relative;
+  }
+  
+  .site-header__menu-item {
+    position: static;
+    margin: 0;
+    padding: 0;
+  }
+  
+  .site-header__menu-link {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-element, 0.375rem);
+    padding: var(--spacing-element, 0.75rem) var(--spacing-element, 1rem);
+    text-decoration: none;
+    color: var(--color-text, {{ settings.color_text }});
+    font-weight: var(--font-weight-normal, 400);
+    font-size: var(--text-xl, 2rem);
+    letter-spacing: var(--letter-spacing-heading, 0);
+    transition: color var(--transition-fast, 0.2s) var(--ease-out, ease);
+    white-space: nowrap;
+    font-family: var(--font-primary, var(--font-body));
+  }
+  
+  .site-header__menu-link:hover {
+    color: var(--color-primary, {{ settings.color_primary | default: '#000000' }});
+  }
+  
+  @media (min-width: 769px) {
+    .mobile-header-wrapper {
+      display: none;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .site-header__fallback-inner {
+      display: none;
+    }
+    
+    .site-header__fallback {
+      position: sticky;
+      top: 0;
+      z-index: var(--z-sticky, 1020);
+    }
+    
+    .mobile-header-wrapper {
+      display: block;
+      background: var(--color-background, {{ settings.color_background }});
+      border-bottom: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
+    }
+    
+    .mobile-header-top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--spacing-element, 0.75rem) var(--spacing-component, 1rem);
+      gap: var(--spacing-element, 0.75rem);
+    }
+    
+    .mobile-header__menu-toggle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 0;
+      color: var(--color-text, {{ settings.color_text }});
+      border-radius: var(--border-radius-small, 0);
+      transition: background-color var(--transition-fast, 0.2s) var(--ease-out, ease);
+      flex-shrink: 0;
+    }
+    
+    .mobile-header__menu-toggle:hover,
+    .mobile-header__menu-toggle:focus {
+      background-color: var(--color-surface, rgba(0, 0, 0, 0.05));
+      outline: 2px solid var(--color-primary, transparent);
+      outline-offset: 2px;
+    }
+    
+    .mobile-header__menu-toggle.active .hamburger-icon line:nth-child(1) {
+      transform: rotate(45deg) translate(5px, 5px);
+    }
+    
+    .mobile-header__menu-toggle.active .hamburger-icon line:nth-child(2) {
+      opacity: 0;
+    }
+    
+    .mobile-header__menu-toggle.active .hamburger-icon line:nth-child(3) {
+      transform: rotate(-45deg) translate(7px, -6px);
+    }
+    
+    .hamburger-icon {
+      width: 24px;
+      height: 24px;
+      transition: transform var(--transition-fast, 0.2s) var(--ease-out, ease);
+    }
+    
+    .hamburger-icon line {
+      transition: transform var(--transition-fast, 0.2s) var(--ease-out, ease), opacity var(--transition-fast, 0.2s) var(--ease-out, ease);
+      transform-origin: center;
+    }
+    
+    .mobile-header__brand {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 0;
+    }
+    
+    .mobile-header__brand-link {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-decoration: none;
+      color: inherit;
+    }
+    
+    .mobile-header__logo {
+      max-height: 40px;
+      width: auto;
+      height: auto;
+      display: block;
+    }
+    
+    .mobile-header__logo-text {
+      font-size: var(--text-lg, 1.125rem);
+      font-weight: var(--font-weight-bold, 600);
+      color: var(--color-text, {{ settings.color_text }});
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    .mobile-header__actions {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+    
+    .mobile-header__cart-btn {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 0;
+      color: var(--color-text, {{ settings.color_text }});
+      border-radius: var(--border-radius-small, 0);
+      transition: background-color var(--transition-fast, 0.2s) var(--ease-out, ease);
+    }
+    
+    .mobile-header__cart-btn:hover,
+    .mobile-header__cart-btn:focus {
+      background-color: var(--color-surface, rgba(0, 0, 0, 0.05));
+      outline: 2px solid var(--color-primary, transparent);
+      outline-offset: 2px;
+    }
+    
+    .mobile-header__cart-btn .cart-icon {
+      width: 24px;
+      height: 24px;
+    }
+    
+    .mobile-header__cart-btn [data-cart-count] {
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      min-width: 18px;
+      height: 18px;
+      padding: 0 var(--spacing-element, 5px);
+      background: var(--color-text, {{ settings.color_text }});
+      color: var(--color-background, {{ settings.color_background }});
+      border-radius: var(--border-radius-medium, 9px);
+      font-size: var(--text-xs, 0.75rem);
+      font-weight: var(--font-weight-bold, 600);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      font-family: var(--font-primary, var(--font-body));
+    }
+    
+    .mobile-header__cart-btn [data-cart-count]:empty,
+    .mobile-header__cart-btn [data-cart-count="0"] {
+      display: none;
+    }
+    
+    .mobile-header__search {
+      padding: 0 var(--spacing-component, 1rem) var(--spacing-element, 0.75rem);
+    }
+    
+    .mobile-search-form {
+      width: 100%;
+    }
+    
+    .mobile-search-input-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+    
+    .mobile-search-icon {
+      position: absolute;
+      left: var(--spacing-element, 0.75rem);
+      color: var(--color-text-muted, rgba(0, 0, 0, 0.5));
+      pointer-events: none;
+      width: 20px;
+      height: 20px;
+    }
+    
+    .mobile-search-input {
+      width: 100%;
+      padding: var(--spacing-element, 0.75rem) var(--spacing-element, 0.75rem) var(--spacing-element, 0.75rem) calc(var(--spacing-element, 0.75rem) * 2 + 20px);
+      border: 1px solid var(--color-border, rgba(15, 23, 42, 0.15));
+      border-radius: var(--border-radius-medium, 8px);
+      font-size: var(--text-base, 0.875rem);
+      font-family: var(--font-primary, var(--font-body));
+      color: var(--color-text, {{ settings.color_text }});
+      background-color: var(--color-background, {{ settings.color_background }});
+      min-height: 44px;
+      transition: border-color var(--transition-fast, 0.2s) var(--ease-out, ease);
+    }
+    
+    .mobile-search-input:focus {
+      outline: none;
+      border-color: var(--color-primary, {{ settings.color_primary | default: '#000000' }});
+    }
+    
+    .mobile-search-input::placeholder {
+      color: var(--color-text-muted, rgba(0, 0, 0, 0.5));
+    }
+    
+    .mobile-nav-drawer {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(4px);
+      -webkit-backdrop-filter: blur(4px);
+      z-index: var(--z-modal, 1050);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity var(--transition, 0.2s) var(--ease-out, ease), visibility var(--transition, 0.2s) var(--ease-out, ease);
+    }
+    
+    .mobile-nav-drawer.active {
+      opacity: 1;
+      visibility: visible;
+    }
+    
+    .mobile-nav-drawer-content {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 280px;
+      max-width: 85vw;
+      height: 100vh;
+      max-height: 100vh;
+      background-color: var(--color-background, {{ settings.color_background }});
+      padding: var(--spacing-component, 1.5rem);
+      overflow-y: auto;
+      overflow-x: hidden;
+      -webkit-overflow-scrolling: touch;
+      transform: translateX(-100%);
+      transition: transform var(--transition, 0.3s) var(--ease-out, ease);
+      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+      display: flex;
+      flex-direction: column;
+      z-index: calc(var(--z-modal, 1050) + 1);
+    }
+    
+    .mobile-nav-drawer.active .mobile-nav-drawer-content {
+      transform: translateX(0);
+    }
+    
+    .mobile-nav-drawer-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--spacing-component, 1.5rem);
+      padding-bottom: var(--spacing-element, 0.75rem);
+      border-bottom: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
+      flex-shrink: 0;
+    }
+    
+    .mobile-nav-drawer-title {
+      font-size: var(--text-lg, 1.125rem);
+      font-weight: var(--font-weight-bold, 600);
+      color: var(--color-text, {{ settings.color_text }});
+      margin: 0;
+    }
+    
+    .mobile-nav-drawer-close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      background: none;
+      border: none;
+      color: var(--color-text, {{ settings.color_text }});
+      cursor: pointer;
+      border-radius: var(--border-radius-small, 0);
+      transition: background-color var(--transition-fast, 0.2s) var(--ease-out, ease);
+    }
+    
+    .mobile-nav-drawer-close:hover,
+    .mobile-nav-drawer-close:focus {
+      background-color: var(--color-surface, rgba(0, 0, 0, 0.05));
+      outline: 2px solid var(--color-primary, transparent);
+      outline-offset: 2px;
+    }
+    
+    .mobile-nav-drawer-list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+    
+    .mobile-nav-drawer-item {
+      border-bottom: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
+    }
+    
+    .mobile-nav-drawer-item:last-child {
+      border-bottom: none;
+    }
+    
+    .mobile-nav-drawer-link {
+      display: block;
+      padding: var(--spacing-component, 1rem) 0;
+      color: var(--color-text, {{ settings.color_text }});
+      text-decoration: none;
+      font-weight: var(--font-weight-medium, 500);
+      font-size: var(--text-base, 1rem);
+      transition: color var(--transition-fast, 0.2s) var(--ease-out, ease);
+    }
+    
+    .mobile-nav-drawer-link:hover,
+    .mobile-nav-drawer-link:focus {
+      color: var(--color-primary, {{ settings.color_primary | default: '#000000' }});
+    }
+    
+    /* Override mega-menu styles inside mobile drawer */
+    .mobile-nav-drawer-nav {
+      display: block;
+      width: 100%;
+    }
+    
+    .mobile-nav-drawer-nav .site-header__menu {
+      display: block;
+      width: 100%;
+      flex: none;
+      justify-content: flex-start;
+      position: static;
+      overflow: visible;
+    }
+    
+    .mobile-nav-drawer-nav .site-header__menu-list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: block;
+      flex-direction: column;
+      gap: 0;
+      align-items: stretch;
+    }
+    
+    .mobile-nav-drawer-nav .site-header__menu-item {
+      border-bottom: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
+      position: relative;
+      width: 100%;
+    }
+    
+    .mobile-nav-drawer-nav .site-header__menu-item:last-child {
+      border-bottom: none;
+    }
+    
+    .mobile-nav-drawer-nav .site-header__menu-link {
+      display: block;
+      padding: var(--spacing-component, 1rem) 0;
+      color: var(--color-text, {{ settings.color_text }});
+      text-decoration: none;
+      font-weight: var(--font-weight-medium, 500);
+      font-size: var(--text-base, 1rem);
+      transition: color var(--transition-fast, 0.2s) var(--ease-out, ease);
+      white-space: normal;
+      line-height: 1.5;
+    }
+    
+    .mobile-nav-drawer-nav .site-header__menu-link:hover,
+    .mobile-nav-drawer-nav .site-header__menu-link:focus {
+      color: var(--color-primary, {{ settings.color_primary | default: '#000000' }});
+    }
+    
+    /* Hide desktop mega-menu features in mobile drawer */
+    .mobile-nav-drawer-nav .site-header__mega-menu {
+      display: none !important;
+      position: static !important;
+    }
+    
+    .mobile-nav-drawer-nav .site-header__menu-arrow {
+      display: none;
+    }
+    
+    /* Search Overlay Styles */
+    .search-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(4px);
+      -webkit-backdrop-filter: blur(4px);
+      z-index: var(--z-modal, 1050);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity var(--transition, 0.2s) var(--ease-out, ease), visibility var(--transition, 0.2s) var(--ease-out, ease);
+    }
+    
+    .search-overlay.active {
+      opacity: 1;
+      visibility: visible;
+    }
+    
+    .search-results-panel {
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 420px;
+      max-width: 90vw;
+      height: 100vh;
+      background-color: #ffffff;
+      box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
+      display: flex;
+      flex-direction: column;
+      z-index: calc(var(--z-modal, 1050) + 1);
+      transform: translateX(100%);
+      transition: transform var(--transition, 0.3s) var(--ease-out, ease);
+    }
+    
+    @media (min-width: 769px) {
+      .search-results-panel {
+        width: 420px;
+      }
+    }
+    
+    .search-overlay.active .search-results-panel {
+      transform: translateX(0);
+    }
+    
+    .search-results-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem 1.25rem;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      flex-shrink: 0;
+      background-color: #ffffff;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+    }
+    
+    .search-results-input-wrapper {
+      flex: 1;
+      position: relative;
+      display: flex;
+      align-items: center;
+      margin-right: 1rem;
+    }
+    
+    .search-results-input {
+      width: 100%;
+      padding: 0.75rem 2.5rem 0.75rem 2.75rem;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+      border-radius: 6px;
+      font-size: 0.9375rem;
+      outline: none;
+      background-color: #ffffff;
+      color: #000000;
+      font-weight: 400;
+    }
+    
+    .search-results-input:focus {
+      border-color: rgba(0, 0, 0, 0.4);
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+    }
+    
+    .search-results-input::placeholder {
+      color: rgba(0, 0, 0, 0.4);
+    }
+    
+    .search-results-icon {
+      position: absolute;
+      left: 0.875rem;
+      width: 18px;
+      height: 18px;
+      color: rgba(0, 0, 0, 0.5);
+      pointer-events: none;
+    }
+    
+    .search-results-close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      background: none;
+      border: none;
+      color: rgba(0, 0, 0, 0.7);
+      cursor: pointer;
+      border-radius: 4px;
+      transition: all var(--transition-fast, 0.2s) var(--ease-out, ease);
+      padding: 0;
+    }
+    
+    .search-results-close:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+      color: rgba(0, 0, 0, 1);
+    }
+    
+    .search-results-close svg {
+      width: 20px;
+      height: 20px;
+    }
+    
+    .search-results-content {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      -webkit-overflow-scrolling: touch;
+      padding: 0;
+      background-color: #ffffff;
+    }
+    
+    .search-results-list {
+      list-style: none;
+      margin: 0;
+      padding: 0.5rem 0;
+    }
+    
+    .search-result-item {
+      display: flex;
+      align-items: center;
+      padding: 0.875rem 1.25rem;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+      cursor: pointer;
+      transition: background-color var(--transition-fast, 0.15s) var(--ease-out, ease);
+      text-decoration: none;
+      color: inherit;
+    }
+    
+    .search-result-item:hover {
+      background-color: rgba(0, 0, 0, 0.03);
+    }
+    
+    .search-result-item:last-child {
+      border-bottom: none;
+    }
+    
+    .search-result-image {
+      width: 60px;
+      height: 60px;
+      object-fit: cover;
+      border-radius: 4px;
+      margin-right: 0.875rem;
+      flex-shrink: 0;
+      background-color: #f5f5f5;
+    }
+    
+    .search-result-info {
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .search-result-name {
+      font-size: 0.9375rem;
+      font-weight: 400;
+      color: #1a1a1a;
+      margin-bottom: 0.25rem;
+      line-height: 1.4;
+    }
+    
+    .search-result-name strong {
+      font-weight: 600;
+      color: #000000;
+    }
+    
+    .search-result-price {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: #666666;
+    }
+    
+    .search-results-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 3rem 1.5rem;
+      color: rgba(0, 0, 0, 0.5);
+      font-size: 0.9375rem;
+    }
+    
+    .search-results-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 3rem 1.5rem;
+      text-align: center;
+      color: rgba(0, 0, 0, 0.5);
+      font-size: 0.9375rem;
+    }
+    
+    .search-results-empty-icon {
+      width: 48px;
+      height: 48px;
+      margin-bottom: 1rem;
+      opacity: 0.3;
+    }
+    
+    @media (max-width: 768px) {
+      .search-results-panel {
+        width: 100%;
+        min-width: 100%;
+        max-width: 100%;
+      }
+      
+      .search-results-header {
+        padding: 1rem;
+      }
+      
+      .search-result-item {
+        padding: 0.875rem 1rem;
+      }
+      
+      .search-result-image {
+        width: 60px;
+        height: 60px;
+      }
+    }
+  }
+</style>
+
+{% comment %}Mobile Navigation Drawer{% endcomment %}
+<div class="mobile-nav-drawer" id="mobile-nav-drawer" aria-hidden="true">
+  <div class="mobile-nav-drawer-content">
+    <div class="mobile-nav-drawer-header">
+      <h2 class="mobile-nav-drawer-title">Menu</h2>
+      <button type="button" class="mobile-nav-drawer-close" aria-label="Close menu" data-mobile-menu-close>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+    <nav class="mobile-nav-drawer-nav" role="navigation" aria-label="Mobile navigation" style="flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0;">
+      <ul class="mobile-nav-drawer-list">
+        {% assign menu_handle = settings.menu | default: section.settings.menu | default: 'main-menu' %}
+        {% if menu_handle %}
+          {% render 'snippets/mega-menu', menu: menu_handle %}
+        {% elsif mainMenu and mainMenu.items and mainMenu.items.size > 0 %}
+          {% for item in mainMenu.items %}
+            <li class="mobile-nav-drawer-item">
+              <a href="{{ item.link | default: '#' }}" class="mobile-nav-drawer-link">{{ item.name | default: item.title }}</a>
+            </li>
+          {% endfor %}
+        {% else %}
+          <li class="mobile-nav-drawer-item">
+            <a href="/products" class="mobile-nav-drawer-link">Shop</a>
+          </li>
+          <li class="mobile-nav-drawer-item">
+            <a href="/contact" class="mobile-nav-drawer-link">Contact</a>
+          </li>
+        {% endif %}
+      </ul>
+    </nav>
+  </div>
+</div>
+
+<!-- Search Overlay -->
+<div class="search-overlay" id="search-overlay" aria-hidden="true">
+  <div class="search-results-panel">
+    <div class="search-results-header">
+      <div class="search-results-input-wrapper">
+        <svg class="search-results-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="m21 21-4.35-4.35"></path>
+        </svg>
+        <input type="text" class="search-results-input" placeholder="Search for products..." aria-label="Search products" autocomplete="off" id="search-results-input">
+      </div>
+      <button type="button" class="search-results-close" aria-label="Close search" data-search-close>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+    <div class="search-results-content" id="search-results-content">
+      <div class="search-results-empty">
+        <svg class="search-results-empty-icon" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="m21 21-4.35-4.35"></path>
+        </svg>
+        <p>Start typing to search for products</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const menuToggle = document.querySelector('[data-mobile-menu-toggle]');
+    const menuClose = document.querySelector('[data-mobile-menu-close]');
+    const drawer = document.getElementById('mobile-nav-drawer');
+    const body = document.body;
+    
+    function openMenu() {
+      if (drawer && menuToggle) {
+        drawer.classList.add('active');
+        drawer.setAttribute('aria-hidden', 'false');
+        menuToggle.setAttribute('aria-expanded', 'true');
+        menuToggle.classList.add('active');
+        body.style.overflow = 'hidden';
+      }
+    }
+    
+    function closeMenu() {
+      if (drawer && menuToggle) {
+        drawer.classList.remove('active');
+        drawer.setAttribute('aria-hidden', 'true');
+        menuToggle.setAttribute('aria-expanded', 'false');
+        menuToggle.classList.remove('active');
+        body.style.overflow = '';
+      }
+    }
+    
+    if (menuToggle) {
+      menuToggle.addEventListener('click', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (drawer && drawer.classList.contains('active')) {
+          closeMenu();
+        } else {
+          openMenu();
+        }
+      });
+    }
+    
+    if (menuClose) {
+      menuClose.addEventListener('click', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        closeMenu();
+      });
+    }
+    
+    if (drawer) {
+      drawer.addEventListener('click', function(e) {
+        if (e.target === drawer) {
+          closeMenu();
+        }
+      });
+      
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && drawer.classList.contains('active')) {
+          closeMenu();
+        }
+      });
+    }
+    
+    // Search functionality
+    const searchToggle = document.querySelector('[data-search-toggle]');
+    const searchOverlay = document.getElementById('search-overlay');
+    const searchClose = document.querySelector('[data-search-close]');
+    const searchInput = document.getElementById('search-results-input');
+    const mobileSearchInput = document.querySelector('.mobile-search-input[data-search-input]');
+    const searchResultsContent = document.getElementById('search-results-content');
+    const searchForms = document.querySelectorAll('[data-search-form]');
+    let searchTimeout = null;
+    let isSearching = false;
+    
+    function highlightSearchTerm(text, searchTerm) {
+      if (!searchTerm || !text) return text;
+      const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+      return text.replace(regex, '<strong>$1</strong>');
+    }
+    
+    function formatPrice(price, priceString) {
+      if (typeof price === 'number') {
+        return 'Price: ' + Math.round(price).toString();
+      }
+      if (priceString) {
+        // Extract numeric value from priceString if it contains currency symbols
+        const numericMatch = priceString.match(/[\d,]+\.?\d*/);
+        if (numericMatch) {
+          return 'Price: ' + numericMatch[0].replace(/,/g, '');
+        }
+        return 'Price: ' + priceString;
+      }
+      return price ? 'Price: ' + price : '';
+    }
+    
+    async function performSearch(query) {
+      if (!query || query.trim().length === 0) {
+        searchResultsContent.innerHTML = `
+          <div class="search-results-empty">
+            <svg class="search-results-empty-icon" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8"></circle>
+              <path d="m21 21-4.35-4.35"></path>
+            </svg>
+            <p>Start typing to search for products</p>
+          </div>
+        `;
+        return;
+      }
+      
+      if (isSearching) return;
+      isSearching = true;
+      
+      searchResultsContent.innerHTML = `
+        <div class="search-results-loading">
+          <p>Searching...</p>
+        </div>
+      `;
+      
+      try {
+        const response = await fetch(`/webstoreapi/search/autocomplete?q=${encodeURIComponent(query.trim())}`, {
+          method: 'GET',
+          headers: {
+            'Accept': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest'
+          }
+        });
+        
+        if (!response.ok) {
+          throw new Error('Search failed');
+        }
+        
+        const data = await response.json();
+        const products = data.success && data.products ? data.products : [];
+        
+        if (!products || products.length === 0) {
+          searchResultsContent.innerHTML = `
+            <div class="search-results-empty">
+              <svg class="search-results-empty-icon" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="11" cy="11" r="8"></circle>
+                <path d="m21 21-4.35-4.35"></path>
+              </svg>
+              <p>No products found</p>
+            </div>
+          `;
+          return;
+        }
+        
+        const productsHtml = products.map(product => {
+          const productName = highlightSearchTerm(product.name || '', query.trim());
+          const productImage = product.thumbnailUrl || '/assets/placeholder-product.png';
+          const productPrice = product.prices?.priceString || formatPrice(product.prices?.price, product.prices?.priceString);
+          const productSlug = product.slug || product.id;
+          const productUrl = productSlug ? `/${productSlug}` : '#';
+          
+          return `
+            <li>
+              <a href="${productUrl}" class="search-result-item">
+                <img src="${productImage}" alt="${product.name || 'Product'}" class="search-result-image" loading="lazy">
+                <div class="search-result-info">
+                  <div class="search-result-name">${productName}</div>
+                  <div class="search-result-price">${productPrice}</div>
+                </div>
+              </a>
+            </li>
+          `;
+        }).join('');
+        
+        searchResultsContent.innerHTML = `<ul class="search-results-list">${productsHtml}</ul>`;
+      } catch (error) {
+        console.error('Search error:', error);
+        searchResultsContent.innerHTML = `
+          <div class="search-results-empty">
+            <p>Error searching products. Please try again.</p>
+          </div>
+        `;
+      } finally {
+        isSearching = false;
+      }
+    }
+    
+    function openSearch() {
+      if (searchOverlay) {
+        searchOverlay.classList.add('active');
+        searchOverlay.setAttribute('aria-hidden', 'false');
+        document.body.style.overflow = 'hidden';
+        if (searchInput) {
+          setTimeout(() => searchInput.focus(), 100);
+        }
+      }
+    }
+    
+    function closeSearch() {
+      if (searchOverlay) {
+        searchOverlay.classList.remove('active');
+        searchOverlay.setAttribute('aria-hidden', 'true');
+        document.body.style.overflow = '';
+        if (searchInput) {
+          searchInput.value = '';
+        }
+        if (mobileSearchInput) {
+          mobileSearchInput.value = '';
+        }
+        if (searchResultsContent) {
+          searchResultsContent.innerHTML = `
+            <div class="search-results-empty">
+              <svg class="search-results-empty-icon" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="11" cy="11" r="8"></circle>
+                <path d="m21 21-4.35-4.35"></path>
+              </svg>
+              <p>Start typing to search for products</p>
+            </div>
+          `;
+        }
+      }
+    }
+    
+    if (searchToggle) {
+      searchToggle.addEventListener('click', function(e) {
+        e.preventDefault();
+        openSearch();
+      });
+    }
+    
+    if (searchClose) {
+      searchClose.addEventListener('click', function(e) {
+        e.preventDefault();
+        closeSearch();
+      });
+    }
+    
+    if (searchOverlay) {
+      searchOverlay.addEventListener('click', function(e) {
+        if (e.target === searchOverlay) {
+          closeSearch();
+        }
+      });
+    }
+    
+    if (searchInput) {
+      searchInput.addEventListener('input', function(e) {
+        const query = e.target.value.trim();
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(() => {
+          performSearch(query);
+        }, 300);
+      });
+      
+      searchInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+          closeSearch();
+        }
+      });
+    }
+    
+    if (mobileSearchInput) {
+      mobileSearchInput.addEventListener('input', function(e) {
+        const query = e.target.value.trim();
+        if (query.length > 0 && searchOverlay && !searchOverlay.classList.contains('active')) {
+          openSearch();
+          if (searchInput) {
+            searchInput.value = query;
+            performSearch(query);
+          }
+        } else {
+          clearTimeout(searchTimeout);
+          searchTimeout = setTimeout(() => {
+            if (searchInput) {
+              performSearch(query);
+            }
+          }, 300);
+        }
+      });
+    }
+    
+    if (searchForms && searchForms.length > 0) {
+      searchForms.forEach(form => {
+        form.addEventListener('submit', function(e) {
+          e.preventDefault();
+          const input = form.querySelector('[data-search-input], input[type="search"], input[name="q"]');
+          if (input && input.value.trim()) {
+            openSearch();
+            if (searchInput) {
+              searchInput.value = input.value.trim();
+              performSearch(input.value.trim());
+            }
+          }
+        });
+      });
+    }
+    
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && searchOverlay && searchOverlay.classList.contains('active')) {
+        closeSearch();
+      }
+    });
+
+    // Desktop Search Functionality
+    const desktopSearchContainer = document.querySelector('[data-search-container]');
+    if (desktopSearchContainer) {
+      const searchInput = desktopSearchContainer.querySelector('[data-search-input]');
+      const searchClear = desktopSearchContainer.querySelector('[data-search-clear]');
+      const searchDropdown = desktopSearchContainer.querySelector('[data-search-dropdown]');
+      const searchResults = desktopSearchContainer.querySelector('[data-search-results]');
+      const searchLoading = desktopSearchContainer.querySelector('[data-search-loading]');
+      const searchEmpty = desktopSearchContainer.querySelector('[data-search-empty]');
+      const searchForm = desktopSearchContainer.querySelector('.site-header__search-form');
+
+      let searchTimeout = null;
+      let selectedIndex = -1;
+      let currentResults = [];
+
+      // Debounce function
+      function debounce(func, wait) {
+        return function(...args) {
+          clearTimeout(searchTimeout);
+          searchTimeout = setTimeout(() => func.apply(this, args), wait);
+        };
+      }
+
+      // Perform search
+      async function performDesktopSearch(query) {
+        if (!query || query.trim().length < 2) {
+          hideDesktopDropdown();
+          return;
+        }
+
+        showDesktopLoading();
+        hideDesktopEmpty();
+
+        try {
+          const response = await fetch(`/webstoreapi/search/autocomplete?q=${encodeURIComponent(query.trim())}`, {
+            headers: {
+              'Accept': 'application/json',
+              'X-Requested-With': 'XMLHttpRequest'
+            }
+          });
+
+          const data = await response.json();
+
+          if (data.success && data.products && data.products.length > 0) {
+            currentResults = data.products;
+            displayDesktopResults(data.products);
+          } else {
+            showDesktopEmpty();
+            currentResults = [];
+          }
+        } catch (error) {
+          console.error('Search error:', error);
+          showDesktopEmpty();
+          currentResults = [];
+        } finally {
+          hideDesktopLoading();
+        }
+      }
+
+      // Display search results
+      function displayDesktopResults(products) {
+        searchResults.innerHTML = '';
+        selectedIndex = -1;
+
+        products.forEach((product, index) => {
+          const resultItem = document.createElement('a');
+          const productSlug = product.slug || product.id;
+          resultItem.href = productSlug ? `/${productSlug}` : '#';
+          resultItem.className = 'site-header__search-result';
+          resultItem.setAttribute('data-search-result-index', index);
+          
+          const imageHtml = product.thumbnailUrl 
+            ? `<img src="${product.thumbnailUrl}" alt="${escapeHtml(product.name)}" class="site-header__search-result-image" loading="lazy">`
+            : `<div class="site-header__search-result-image" style="background-color: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; color: rgba(0,0,0,0.3); font-size: 0.75rem;">No image</div>`;
+          
+          resultItem.innerHTML = `
+            ${imageHtml}
+            <div class="site-header__search-result-info">
+              <div class="site-header__search-result-name">${escapeHtml(product.name)}</div>
+              <div class="site-header__search-result-price">${product.prices.priceString || 'Price not available'}</div>
+            </div>
+          `;
+
+          resultItem.addEventListener('click', (e) => {
+            e.preventDefault();
+            window.location.href = resultItem.href;
+          });
+
+          resultItem.addEventListener('mouseenter', () => {
+            selectedIndex = index;
+            updateDesktopSelected();
+          });
+
+          searchResults.appendChild(resultItem);
+        });
+
+        showDesktopDropdown();
+      }
+
+      // Escape HTML to prevent XSS
+      function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+      }
+
+      // Show/hide dropdown
+      function showDesktopDropdown() {
+        if (searchDropdown) {
+          searchDropdown.style.display = 'block';
+        }
+      }
+
+      function hideDesktopDropdown() {
+        if (searchDropdown) {
+          searchDropdown.style.display = 'none';
+        }
+        selectedIndex = -1;
+        currentResults = [];
+      }
+
+      function showDesktopLoading() {
+        if (searchLoading) {
+          searchLoading.style.display = 'flex';
+        }
+        if (searchResults) {
+          searchResults.innerHTML = '';
+        }
+      }
+
+      function hideDesktopLoading() {
+        if (searchLoading) {
+          searchLoading.style.display = 'none';
+        }
+      }
+
+      function showDesktopEmpty() {
+        if (searchEmpty) {
+          searchEmpty.style.display = 'block';
+        }
+        showDesktopDropdown();
+      }
+
+      function hideDesktopEmpty() {
+        if (searchEmpty) {
+          searchEmpty.style.display = 'none';
+        }
+      }
+
+      function updateDesktopSelected() {
+        const results = searchResults.querySelectorAll('.site-header__search-result');
+        results.forEach((result, index) => {
+          if (index === selectedIndex) {
+            result.style.backgroundColor = 'rgba(0, 0, 0, 0.06)';
+          } else {
+            result.style.backgroundColor = '';
+          }
+        });
+      }
+
+      // Debounced search function
+      const debouncedDesktopSearch = debounce(performDesktopSearch, 300);
+
+      // Input event handler
+      if (searchInput) {
+        searchInput.addEventListener('input', (e) => {
+          const query = e.target.value.trim();
+          
+          if (searchClear) {
+            searchClear.style.display = query ? 'flex' : 'none';
+          }
+
+          if (query.length >= 2) {
+            debouncedDesktopSearch(query);
+          } else {
+            hideDesktopDropdown();
+          }
+        });
+
+        // Focus event handler
+        searchInput.addEventListener('focus', () => {
+          const query = searchInput.value.trim();
+          if (query.length >= 2 && currentResults.length > 0) {
+            showDesktopDropdown();
+          }
+        });
+
+        // Keyboard navigation
+        searchInput.addEventListener('keydown', (e) => {
+          const results = searchResults.querySelectorAll('.site-header__search-result');
+          
+          if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            selectedIndex = Math.min(selectedIndex + 1, results.length - 1);
+            updateDesktopSelected();
+            if (results[selectedIndex]) {
+              results[selectedIndex].scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+          } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            selectedIndex = Math.max(selectedIndex - 1, -1);
+            updateDesktopSelected();
+            if (selectedIndex >= 0 && results[selectedIndex]) {
+              results[selectedIndex].scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+          } else if (e.key === 'Enter') {
+            e.preventDefault();
+            if (selectedIndex >= 0 && results[selectedIndex]) {
+              window.location.href = results[selectedIndex].href;
+            } else {
+              // Submit form to search page
+              searchForm.submit();
+            }
+          } else if (e.key === 'Escape') {
+            hideDesktopDropdown();
+            searchInput.blur();
+          }
+        });
+      }
+
+      // Clear button handler
+      if (searchClear) {
+        searchClear.addEventListener('click', (e) => {
+          e.preventDefault();
+          if (searchInput) {
+            searchInput.value = '';
+            searchInput.focus();
+            hideDesktopDropdown();
+            searchClear.style.display = 'none';
+          }
+        });
+      }
+
+      // Click outside to close dropdown
+      document.addEventListener('click', (e) => {
+        if (desktopSearchContainer && !desktopSearchContainer.contains(e.target)) {
+          hideDesktopDropdown();
+        }
+      });
+    }
+  });
+</script>
+