<div class="mobile-header mobile-3 {{ journal3.classes(journal3.get('mobileHeaderClasses')) }} {{ journal3.get('header_mobile_color_scheme') }}">
  <div class="mobile-top-bar {{ journal3.get('header_mobile_top_color_scheme') }}">
    <div class="mobile-top-menu-wrapper">
      {{ journal3.get('mobile_top_menu') }}
    </div>
    {% if journal3.get('mobileLangPosition') == 'top' %}
    <div class="language-currency top-menu">
      <div class="mobile-language-wrapper">
        {{ journal3.get('mobile_header_active') ? language : '' }}
      </div>
      <div class="mobile-currency-wrapper">
        {{ journal3.get('mobile_header_active') ? currency : '' }}
      </div>
    </div>
    {% endif %}
  </div>
  <div class="mobile-logo-wrapper mobile-bar {{ journal3.get('mobile_header_logo_color_scheme') }}">
    {% if journal3.get('mobile_header_active') %}
      {% if journal3.get('mobileCustomMenuStatus1') %}
      <a class="mobile-custom-menu mobile-custom-menu-1" href="{{ journal3.get('mobileCustomMenuLink1.href') }}" {{ journal3.linkAttrs(journal3.get('mobileCustomMenuLink1.attrs')) }}>
        {{ journal3.countBadge(journal3.get('mobileCustomMenuLink1.name'), journal3.get('mobileCustomMenuLink1.total'), journal3.get('mobileCustomMenuLink1.classes')) }}
      </a>
      {% endif %}
      <div id="logo">
        {% if journal3.get('mobile_logo_src') or journal3.get('mobile_logo_alternate_src') %}
          <a href="{{ home }}">
            <img class="header-logo" src="{{ journal3.get('mobile_logo_src') }}" {% if journal3.get('mobile_logo_src2x') %}srcset="{{ journal3.get('mobile_logo_src') }} 1x, {{ journal3.get('mobile_logo_src2x') }} 2x"{% endif %} width="{{ journal3.get('mobile_logo_width') }}" height="{{ journal3.get('mobile_logo_height') }}" alt="{{ name }}" title="{{ name }}"/>
            <img class="header-logo-alternate" src="{{ journal3.get('mobile_logo_alternate_src') }}" {% if journal3.get('mobile_logo_alternate_src2x') %}srcset="{{ journal3.get('mobile_logo_alternate_src') }} 1x, {{ journal3.get('mobile_logo_alternate_src2x') }} 2x"{% endif %} width="{{ journal3.get('mobile_logo_alternate_width') }}" height="{{ journal3.get('mobile_logo_alternate_height') }}" alt="{{ name }}" title="{{ name }}"/>
          </a>
        {% else %}
          <h1><a href="{{ home }}">{{ name }}</a></h1>
        {% endif %}
      </div>
      {% if journal3.get('mobileCustomMenuStatus2') %}
      <a class="mobile-custom-menu mobile-custom-menu-2" href="{{ journal3.get('mobileCustomMenuLink2.href') }}" {{ journal3.linkAttrs(journal3.get('mobileCustomMenuLink2.attrs')) }}>
        {{ journal3.countBadge(journal3.get('mobileCustomMenuLink2.name'), journal3.get('mobileCustomMenuLink2.total'), journal3.get('mobileCustomMenuLink2.classes')) }}
      </a>
      {% endif %}
    {% endif %}
  </div>
  <div class="mobile-bar-group mobile-search-group sticky-bar {{ journal3.get('header_mobile_menu_color_scheme') }}">
    <a href="javascript:;" class="menu-trigger" data-off-canvas="mobile-main-menu-container" title="{{ journal3.get('headerMobileMenuTitle') }}"><span class="menu-icon"></span></a>
    <div class="mobile-search-wrapper full-search">
      {{ journal3.get('mobile_header_active') ? search | replace({
        'color-scheme-__SEARCH_COLOR_SCHEME__': (journal3.get('header_mobile_search_color_scheme') ?: 'color-scheme-'),
        'color-scheme-__SEARCH_CATEGORIES_COLOR_SCHEME__': journal3.get('header_mobile_search_categories_color_scheme')
      }) : '' }}
    </div>
    <div class="mobile-cart-wrapper mini-cart">
      {{ journal3.get('mobile_header_active') ? cart : '' }}
    </div>
  </div>
</div>
