<header class="header">
    <div class="promo-bar js-promo-bar">
        <div class="promo-bar__inner u-page-width-max">
            <a class="promo-bar__link" href="#">Free shipping and free returns</a>
            <button class="promo-bar__close-button">
      <span class="u-visually-hidden">Close</span>
      <svg class="icon icon--close">
  <use xlink:href="/assets/icons/icons.svg#close"></use>
</svg>

    </button>
        </div>
    </div>

    <div class="headroom">
        <nav class="header-nav">
            <ul class="header-nav__primary">
                <li class="header-nav__primary-item header-nav__primary-item--active">
                    <a class="header-nav__primary-link" href="#">Sunglasses</a>
                    <div class="header-nav__secondary-wrapper js-header-nav__secondary-wrapper">
                        <div class="u-page-width-max">
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button">
                    Shop
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div class="header-nav__tertiary-wrapper u-page-width-max">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                      Back
                    </button>
                                        <ul class="header-nav__tertiary header-nav__tertiary--marketing js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <span class="header-nav__tertiary-menu-label">Frame Style</span>
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Aviators</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Classic</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Wrap</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Fashion</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Rectangular</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Cat Eye</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Rimless</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Shield</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--accent" href="#">
                              All Frames
                              <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="header-nav__tertiary-menu">
                                                <span class="header-nav__tertiary-menu-label">Activity</span>
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Golf</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Fish</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Surf</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Run</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Drive</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Hike</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Tennis</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="header-nav__tertiary-menu">
                                                <span class="header-nav__tertiary-menu-label">More</span>
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">New Arrivals</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Best Sellers</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Prescription</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Accessories</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Readers</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Blue Hawaii</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                        <div class="header-nav__tertiary-marketing-placement">
                                            <a class="header-nav__tertiary-marketing-link" href="#">
                                                <div class="header-nav__tertiary-marketing-image" style="background-image: url('/assets/images/megamenu-marketing-placement.jpg');"></div>
                                                <div class="header-nav__tertiary-marketing-text">
                                                    <span class="header-nav__tertiary-marketing-title">Blue Hawaii</span>
                                                    <span class="header-nav__tertiary-marketing-cta">Shop now</span>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    MyMaui
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Home Try-on
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Vintage
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Apparel
                  </a>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="tel:+1800229933">
                    1-888-666-5905
                    <svg class="icon icon--action-phone">
  <use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>

                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Contact Us
                    <svg class="icon icon--action-mail">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Find a Retailer
                    <svg class="icon icon--action-location">
  <use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>

                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button">
                    Customer Service
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div class="header-nav__tertiary-wrapper u-page-width-max">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                      Back
                    </button>
                                        <ul class="header-nav__tertiary js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Order Status</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Repairs</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Returns</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Product Registration</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Prescription</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Retailers</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">FAQs</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Shipping Information</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Your Account
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Your Orders
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Your Wishlist
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link header-nav__secondary-link--logout" href="#">
                    Logout
                  </a>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link js-modal-open-link" href="#" data-modal-id="country-selector">
                    United States
                    <img src="/assets/images/flag-us.png" alt="United States" width="22" height="14">
                  </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="header-nav__primary-item">
                    <a class="header-nav__primary-link" href="#">Eyeglasses</a>
                    <div class="header-nav__secondary-wrapper js-header-nav__secondary-wrapper">
                        <div class="u-page-width-max">
                        </div>
                    </div>
                </li>
            </ul>
        </nav>
        <div class="header-menu-bar"></div>
        <a class="header__logo-wrapper" href="#">
      <img class="header__logo" src="/assets/images/mauijim-brand-logo.png" alt="Maui Jim logo">
    </a>
        <div class="header__menu-icon">
            <button class="hamburger-spring header__icon header__icon--menu  js-header-icon--menu" type="button">
        <span class="u-visually-hidden">Menu</span>
        <span class="hamburger-spring__box">
          <span class="hamburger-spring__inner"></span>
        </span>
      </button>
        </div>
        <div class="header__icons">
            <div class="header__icons-inner">
                <button class="header__icon header__icon--search js-header-icon--search">
          <span class="u-visually-hidden">Search</span>
          <svg class="icon icon--search">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

          <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

        </button>
                <button class="header__icon header__icon--wishlist">
          <span class="u-visually-hidden">Wishlist</span>
          <svg class="icon icon--heart-item">
  <use xlink:href="/assets/icons/icons.svg#heart-item"></use>
</svg>

        </button>
                <button class="header__icon header__icon--account">
          <span class="u-visually-hidden">Account</span>
          <svg class="icon icon--account">
  <use xlink:href="/assets/icons/icons.svg#account"></use>
</svg>

        </button>
                <button class="header__icon header__icon--cart header__icon--cart--button js-header-icon-empty-cart js-header-icon--cart">
          <span class="u-visually-hidden">Cart</span>
          <svg class="icon icon--cart">
  <use xlink:href="/assets/icons/icons.svg#cart"></use>
</svg>

          <svg class="icon icon--cart-item">
  <use xlink:href="/assets/icons/icons.svg#cart-item"></use>
</svg>

        </button>
                <a href="#" class="header__icon header__icon--cart header__icon--cart--link js-header-icon-empty-cart">
          <span class="u-visually-hidden">Cart</span>
          <svg class="icon icon--cart">
  <use xlink:href="/assets/icons/icons.svg#cart"></use>
</svg>

          <svg class="icon icon--cart-item">
  <use xlink:href="/assets/icons/icons.svg#cart-item"></use>
</svg>

        </a>
                <button class="header-nav__country js-modal-open-link" data-modal-id="country-selector">
          <img class="header-nav__country-image" src="/assets/images/flag-us.png" alt="US" width="31" height="20">
          <span class="header-nav__country-label">US</span>
        </button>
            </div>
        </div>
        <div class="header-search header-flyout header-flyout--search js-header-search">
            <form class="header-search__form">
                <input class="header-search__input js-header-search-input" type="text" placeholder="Search on Maui Jim">
                <button class="header-search__button js-header-search-button" type="reset">
          <span class="u-visually-hidden">Clear</span>
          <svg class="icon icon--search">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

          <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

        </button>
            </form>
            <div class="header-search__list">
                <span class="header-search__list-label">Latest Search</span>
                <ul class="header-search__list-items">
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Koko Head</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Tail Slide</a>
                    </li>
                </ul>
            </div>
            <div class="header-search__list">
                <span class="header-search__list-label">Popular Searches</span>
                <ul class="header-search__list-items">
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Aviators</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Man</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Surf</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Vintage</a>
                    </li>
                </ul>
            </div>
            <div class="header-search__results">
                <a class="header-search__result-link" href="#">View all results <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</a>
                <div class="search-autocomplete-result">
                    <a class="search-autocomplete-result__link" href="#">
            <span class="search-autocomplete-result__image-container">
              <img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
                srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
            </span>
            <span class="search-autocomplete-result__title">Ho&#x27;okipa Reader Universal Fit</span>
          </a>
                </div>
                <div class="search-autocomplete-result">
                    <a class="search-autocomplete-result__link" href="#">
            <span class="search-autocomplete-result__image-container">
              <img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
                srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
            </span>
            <span class="search-autocomplete-result__title">Sandy Beach Universal Fit</span>
          </a>
                </div>
                <div class="search-autocomplete-result">
                    <a class="search-autocomplete-result__link" href="#">
            <span class="search-autocomplete-result__image-container">
              <img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
                srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
            </span>
            <span class="search-autocomplete-result__title">Hanalei Universal Fit</span>
          </a>
                </div>
            </div>
        </div>
        <div class="header-cart header-cart--default header-cart--tax header-flyout header-flyout--cart js-header-cart">
            <div class="header-cart__header">
                <span class="header-cart__title">Your Cart <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</span>
                <span class="header-cart__item-count header-cart__item-count--empty">0 items</span>
            </div>
            <div class="header-cart__empty">
                <div class="header-cart__empty-inner">
                    <img class="header-cart__empty-brand-logo" src="/assets/images/mauijim-brand-mark-grey-small.png">
                    <span class="header-cart__empty-label">Your Shopping Cart is Empty</span>
                    <a class="header-cart__empty-button button button--primary">Shop Now</a>
                </div>
            </div>
        </div>
        <div class="header-flyout-overlay js-header-flyout-overlay"></div>
    </div>
</header>
<header class="header">
  {{render '@promo-bar'}}
  <div class="headroom">
    <nav class="header-nav">
      <ul class="header-nav__primary">
        {{#each navigation}}
        <li class="header-nav__primary-item{{#if active}} header-nav__primary-item--active{{/if}}">
          {{#if label}}
          <a class="header-nav__primary-link" href="{{this.path}}">{{label}}</a>
          {{/if}}
          <div class="header-nav__secondary-wrapper js-header-nav__secondary-wrapper">
            <div class="u-page-width-max">
              {{#each this.secondaryMenus}}
              <ul class="header-nav__secondary js-header-nav--secondary">
                {{#each this}}
                <li class="header-nav__secondary-item{{#if (equals label ../../../activeItem)}} header-nav__secondary-item--active{{/if}} js-header-nav-item">
                  {{#if this.tertiaryMenus}}
                  <button class="header-nav__secondary-button js-header-nav-button">
                    {{this.label}}
                    {{render '@icons--arrow-right'}}
                  </button>
                  <div class="header-nav__tertiary-wrapper u-page-width-max">
                    <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      {{render '@icons--arrow-left'}}
                      Back
                    </button>
                    <ul class="header-nav__tertiary{{#if marketingPlacement }} header-nav__tertiary--marketing{{/if}} js-header-nav--tertiary">
                      {{#each this.tertiaryMenus}}
                      <li class="header-nav__tertiary-menu">
                        {{#if this.label}}
                        <span class="header-nav__tertiary-menu-label">{{this.label}}</span>
                        {{/if}}
                        {{#if this.graphicMenu}}
                        <ul class="header-nav__tertiary-menu-items header-nav__tertiary-menu-items--graphic">
                          {{#each this.tertiaryItems}}
                          <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--graphic">
                            <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--graphic" href="{{this.path}}">
                              <img class="header-nav__tertiary-menu-graphic" src="{{this.image}}">
                              {{this.label}}
                            </a>
                          </li>
                          {{/each}}
                        </ul>
                        {{else if this.horizontalMenu}}
                        <ul class="header-nav__tertiary-menu-items header-nav__tertiary-menu-items--horizontal">
                          {{#each this.tertiaryItems}}
                          <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                            <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="{{this.path}}">
                              {{this.label}}
                            </a>
                          </li>
                          {{/each}}
                        </ul>
                        {{else}}
                        <ul class="header-nav__tertiary-menu-items">
                          {{#each this.tertiaryItems}}
                          <li class="header-nav__tertiary-menu-item">
                            {{#unless this.accent}}
                            <a class="header-nav__tertiary-menu-link" href="{{this.path}}">{{this.label}}</a>
                            {{else}}
                            <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--accent" href="{{this.path}}">
                              {{this.label}}
                              {{render '@icons--arrow-right'}}
                            </a>
                            {{/unless}}
                          </li>
                          {{/each}}
                        </ul>
                        {{/if}}
                      </li>
                      {{/each}}
                    </ul>
                    {{#if marketingPlacement}}
                    <div class="header-nav__tertiary-marketing-placement">
                      <a class="header-nav__tertiary-marketing-link" href="{{marketingPlacement.path}}">
                        <div class="header-nav__tertiary-marketing-image" style="background-image: url('{{marketingPlacement.image}}');"></div>
                        <div class="header-nav__tertiary-marketing-text">
                          <span class="header-nav__tertiary-marketing-title">{{marketingPlacement.title}}</span>
                          <span class="header-nav__tertiary-marketing-cta">{{marketingPlacement.callToAction}}</span>
                        </div>
                      </a>
                    </div>
                    {{/if}}
                  </div>
                  {{else}}
                  <a class="header-nav__secondary-link{{#if classes}}{{#each classes}} {{this}}{{/each}}{{/if}}{{#if modal}} js-modal-open-link{{/if}}" href="{{this.path}}"{{#if modal}} data-modal-id="{{modal}}"{{/if}}>
                    {{label}}
                    {{#if icon}}
                    {{render (dynamicVariant 'icons' icon)}}
                    {{/if}}
                    {{#if image}}
                    <img src="{{image.src}}" alt="{{label}}" width="{{image.width}}" height="{{image.height}}">
                    {{/if}}
                  </a>
                  {{/if}}
                </li>
                {{/each}}
              </ul>
              {{/each}}
            </div>
          </div>
        </li>
        {{/each}}
      </ul>
    </nav>
    <div class="header-menu-bar"></div>
    {{#if logo}}
    <a class="header__logo-wrapper" href="{{logo.path}}">
      <img class="header__logo" src="{{logo.image}}" alt="{{logo.alt}}">
    </a>
    {{/if}}
    <div class="header__menu-icon">
      <button class="hamburger-spring header__icon header__icon--menu {{#if zeal}} zeal{{/if}} js-header-icon--menu" type="button">
        <span class="u-visually-hidden">Menu</span>
        <span class="hamburger-spring__box">
          <span class="hamburger-spring__inner"></span>
        </span>
      </button>
    </div>
    <div class="header__icons">
      <div class="header__icons-inner">
        <button class="header__icon header__icon--search js-header-icon--search">
          <span class="u-visually-hidden">Search</span>
          {{render '@icons--search'}}
          {{render '@icons--close-large'}}
        </button>
        <button class="header__icon header__icon--wishlist{{#if activeWishlist}} js-header-icon-active-wishlist{{/if}}">
          <span class="u-visually-hidden">Wishlist</span>
          {{render '@icons--heart-item'}}
        </button>
        <button class="header__icon header__icon--account">
          <span class="u-visually-hidden">Account</span>
          {{#if activeAccount}}
          {{render '@icons--account-active'}}
          {{else}}
          {{render '@icons--account'}}
          {{/if}}
        </button>
        <button class="header__icon header__icon--cart header__icon--cart--button{{#unless cart.products}} js-header-icon-empty-cart{{/unless}} js-header-icon--cart">
          <span class="u-visually-hidden">Cart</span>
          {{render '@icons--cart'}}
          {{render '@icons--cart-item'}}
        </button>
        <a href="#" class="header__icon header__icon--cart header__icon--cart--link{{#unless cart.products}} js-header-icon-empty-cart{{/unless}}">
          <span class="u-visually-hidden">Cart</span>
          {{render '@icons--cart'}}
          {{render '@icons--cart-item'}}
        </a>
        <button class="header-nav__country js-modal-open-link" data-modal-id="country-selector">
          <img class="header-nav__country-image" src="{{country.image.src}}" alt="{{country.label}}" width="{{country.image.width}}" height="{{country.image.height}}">
          <span class="header-nav__country-label">{{country.label}}</span>
        </button>
      </div>
    </div>
    <div class="header-search header-flyout header-flyout--search js-header-search">
      <form class="header-search__form">
        <input class="header-search__input js-header-search-input" type="text" placeholder="{{search.form.placeholder}}"{{#if search.form.value}} value="{{search.form.value}}"{{/if}}>
        <button class="header-search__button js-header-search-button" type="reset">
          <span class="u-visually-hidden">Clear</span>
          {{render '@icons--search'}}
          {{render '@icons--close-large'}}
        </button>
      </form>
      {{#each search.lists}}
      <div class="header-search__list">
        <span class="header-search__list-label">{{label}}</span>
        <ul class="header-search__list-items">
          {{#each items}}
          <li class="header-search__list-item">
            <a class="header-search__list-link js-header-search-list-link" href="{{this.path}}">{{label}}</a>
          </li>
          {{/each}}
        </ul>
      </div>
      {{/each}}
      <div class="header-search__results">
        <a class="header-search__result-link" href="#">View all results {{render '@icons--arrow-right'}}</a>
        {{> '@search-autocomplete-result' path=search.resultDefaults.path title="Ho'okipa Reader Universal Fit" image=search.resultDefaults.image }}
        {{> '@search-autocomplete-result' path=search.resultDefaults.path title="Sandy Beach Universal Fit" image=search.resultDefaults.image }}
        {{> '@search-autocomplete-result' path=search.resultDefaults.path title="Hanalei Universal Fit" image=search.resultDefaults.image }}
      </div>
    </div>
    <div class="header-cart header-cart--{{_self.name}}{{#if cart.footer.subtotal.tax}} header-cart--tax{{/if}} header-flyout header-flyout--cart js-header-cart">
      <div class="header-cart__header">
        <span class="header-cart__title">{{cart.header.title}} {{render '@icons--arrow-right'}}</span>
        <span class="header-cart__item-count{{#unless cart.products}} header-cart__item-count--empty{{/unless}}">{{cart.header.itemCount}}</span>
      </div>
      {{#if cart.products}}
      <div class="header-cart__products">
        {{#each cart.products}}
        {{#if product}}
        <div class="header-cart__item">
          <a href="{{variants.0.url}}"><img class="header-cart__item-image" src="{{productImage variants.0.images.front 330}}" alt="{{variants.0.name}}"></a>
          <span class="header-cart__item-info header-cart__item-info--name">{{name}}</span>
          <span class="header-cart__item-info">{{variants.0.name}}</span>
          <span class="header-cart__item-info">{{variants.0.lens}}</span>
          <span class="header-cart__item-info">{{variants.0.lensMaterial}}</span>
          <span class="header-cart__item-info">Single Gradient</span>
          {{#if vip}}
          <div class="header-cart__item-vip-info">
            <span class="header-cart__item-vip-card-value">VIP Card {{vip.cardValue}}</span>
            <span class="header-cart__item-vip-original-price">{{vip.originalPrice}}</span>
          </div>
          {{/if}}
          <span class="header-cart__item-info header-cart__item-info--qty">Qty: 1</span>
          <span class="header-cart__item-info header-cart__item-info--price">{{variants.0.price}}</span>
          <button class="header-cart__item-remove button button--plain-text">Remove</button>
        </div>
        {{/if}}
        {{#if repair}}
        <div class="header-cart__item header-cart__item--repair">
          <img class="header-cart__item-image" src="{{productImage variants.0.images.front 330}}" alt="{{variants.0.name}}">
          {{#each repairs}}
          <div class="header-cart__item-repair">
            <span class="header-cart__item-info header-cart__item-info--repair-type">{{{repairType}}}</span>
            <span class="header-cart__item-info header-cart__item-info--repair-price">{{repairPrice}}</span>
          </div>
          {{/each}}
          <span class="header-cart__item-info header-cart__item-info--repair-name">{{name}}</span>
          <span class="header-cart__item-info header-cart__item-info--repair-variant">{{variants.0.id}}</span>
          <span class="header-cart__item-info header-cart__item-info--repair-lens">{{lensType}}</span>
          <button class="header-cart__item-remove button button--plain-text">Remove</button>
        </div>
        {{/if}}
        {{#if surcharge}}
        <div class="header-cart__item header-cart__item--surcharge">
          {{#if icon}}{{render (dynamicComponent icon)}}{{/if}}
          <span class="header-cart__item-info header-cart__item-info--repair-type">{{repairType}}</span>
          <span class="header-cart__item-info header-cart__item-info--repair-price">{{repairPrice}}</span>
        </div>
        {{/if}}
        {{/each}}
      </div>
      <div class="header-cart__footer">
        {{#if cart.footer.subtotal}}
        <div class="header-cart__subtotal">
          <span class="header-cart__subtotal-label">{{cart.footer.subtotal.label}}:</span>
          <span class="header-cart__subtotal-value">{{cart.footer.subtotal.value}}</span>
          {{#if cart.footer.subtotal.tax}}
          <span class="header-cart__subtotal-tax">{{cart.footer.subtotal.tax}}</span>
          {{/if}}
        </div>
        {{/if}}
        {{#if cart.footer.actions}}
        <div class="header-cart__actions">
          {{#each cart.footer.actions}}
          <a class="header-cart__action button button--{{modifier}}" href="{{this.path}}">{{value}}</a>
          {{/each}}
        </div>
        {{/if}}
      </div>
      {{else}}
      <div class="header-cart__empty">
        <div class="header-cart__empty-inner">
          <img class="header-cart__empty-brand-logo" src="{{cart.empty.brandLogo}}">
          <span class="header-cart__empty-label">{{cart.empty.label}}</span>
          <a class="header-cart__empty-button button button--primary">{{cart.empty.buttonValue}}</a>
        </div>
      </div>
      {{/if}}
    </div>
    <div class="header-flyout-overlay js-header-flyout-overlay"></div>
  </div>
</header>
{
  "logo": {
    "image": "/assets/images/mauijim-brand-logo.png",
    "alt": "Maui Jim logo",
    "path": "#"
  },
  "navigation": [
    {
      "label": "Sunglasses",
      "active": true,
      "path": "#",
      "secondaryMenus": [
        [
          {
            "label": "Shop",
            "tertiaryMenus": [
              {
                "label": "Frame Style",
                "tertiaryItems": [
                  {
                    "label": "Aviators",
                    "path": "#"
                  },
                  {
                    "label": "Classic",
                    "path": "#"
                  },
                  {
                    "label": "Wrap",
                    "path": "#"
                  },
                  {
                    "label": "Fashion",
                    "path": "#"
                  },
                  {
                    "label": "Rectangular",
                    "path": "#"
                  },
                  {
                    "label": "Cat Eye",
                    "path": "#"
                  },
                  {
                    "label": "Rimless",
                    "path": "#"
                  },
                  {
                    "label": "Shield",
                    "path": "#"
                  },
                  {
                    "label": "All Frames",
                    "path": "#",
                    "accent": true
                  }
                ]
              },
              {
                "label": "Activity",
                "tertiaryItems": [
                  {
                    "label": "Golf",
                    "path": "#"
                  },
                  {
                    "label": "Fish",
                    "path": "#"
                  },
                  {
                    "label": "Surf",
                    "path": "#"
                  },
                  {
                    "label": "Run",
                    "path": "#"
                  },
                  {
                    "label": "Drive",
                    "path": "#"
                  },
                  {
                    "label": "Hike",
                    "path": "#"
                  },
                  {
                    "label": "Tennis",
                    "path": "#"
                  }
                ]
              },
              {
                "label": "More",
                "tertiaryItems": [
                  {
                    "label": "New Arrivals",
                    "path": "#"
                  },
                  {
                    "label": "Best Sellers",
                    "path": "#"
                  },
                  {
                    "label": "Prescription",
                    "path": "#"
                  },
                  {
                    "label": "Accessories",
                    "path": "#"
                  },
                  {
                    "label": "Readers",
                    "path": "#"
                  },
                  {
                    "label": "Blue Hawaii",
                    "path": "#"
                  }
                ]
              }
            ],
            "marketingPlacement": {
              "path": "#",
              "image": "/assets/images/megamenu-marketing-placement.jpg",
              "title": "Blue Hawaii",
              "callToAction": "Shop now"
            }
          },
          {
            "label": "MyMaui",
            "path": "#"
          },
          {
            "label": "Home Try-on",
            "path": "#"
          },
          {
            "label": "Vintage",
            "path": "#"
          },
          {
            "label": "Apparel",
            "path": "#"
          }
        ],
        [
          {
            "label": "1-888-666-5905",
            "path": "tel:+1800229933",
            "icon": "action-phone"
          },
          {
            "label": "Contact Us",
            "path": "#",
            "icon": "action-mail"
          },
          {
            "label": "Find a Retailer",
            "path": "#",
            "icon": "action-location"
          },
          {
            "label": "Customer Service",
            "tertiaryMenus": [
              {
                "tertiaryItems": [
                  {
                    "label": "Order Status",
                    "path": "#"
                  },
                  {
                    "label": "Repairs",
                    "path": "#"
                  },
                  {
                    "label": "Returns",
                    "path": "#"
                  },
                  {
                    "label": "Product Registration",
                    "path": "#"
                  },
                  {
                    "label": "Prescription",
                    "path": "#"
                  },
                  {
                    "label": "Retailers",
                    "path": "#"
                  },
                  {
                    "label": "FAQs",
                    "path": "#"
                  },
                  {
                    "label": "Shipping Information",
                    "path": "#"
                  }
                ]
              }
            ]
          }
        ],
        [
          {
            "label": "Your Account",
            "path": "#"
          },
          {
            "label": "Your Orders",
            "path": "#"
          },
          {
            "label": "Your Wishlist",
            "path": "#"
          },
          {
            "label": "Logout",
            "path": "#",
            "classes": [
              "header-nav__secondary-link--logout"
            ]
          }
        ],
        [
          {
            "modal": "country-selector",
            "label": "United States",
            "path": "#",
            "image": {
              "src": "/assets/images/flag-us.png",
              "width": "22",
              "height": "14"
            }
          }
        ]
      ]
    },
    {
      "label": "Eyeglasses",
      "path": "#"
    }
  ],
  "country": {
    "label": "US",
    "image": {
      "src": "/assets/images/flag-us.png",
      "width": "31",
      "height": "20"
    }
  },
  "search": {
    "form": {
      "placeholder": "Search on Maui Jim"
    },
    "lists": [
      {
        "label": "Latest Search",
        "items": [
          {
            "label": "Koko Head",
            "path": "#"
          },
          {
            "label": "Tail Slide",
            "path": "#"
          }
        ]
      },
      {
        "label": "Popular Searches",
        "items": [
          {
            "label": "Aviators",
            "path": "#"
          },
          {
            "label": "Man",
            "path": "#"
          },
          {
            "label": "Surf",
            "path": "#"
          },
          {
            "label": "Vintage",
            "path": "#"
          }
        ]
      }
    ],
    "resultDefaults": {
      "path": "#",
      "title": "Red Sands",
      "image": {
        "small": {
          "path": "/assets/images/search-autocomplete-small.jpg",
          "width": "75",
          "vw": "25"
        },
        "medium": {
          "path": "/assets/images/search-autocomplete-medium.jpg",
          "width": "340",
          "vw": "50"
        }
      }
    }
  },
  "cart": {
    "header": {
      "title": "Your Cart",
      "itemCount": "0 items"
    },
    "products": null,
    "footer": {
      "subtotal": {
        "label": "Order Subtotal (4)",
        "value": "$1,096.00",
        "tax": "Inkl. MWST"
      },
      "actions": [
        {
          "modifier": "primary",
          "value": "View your cart",
          "path": "#"
        }
      ]
    },
    "empty": {
      "brandLogo": "/assets/images/mauijim-brand-mark-grey-small.png",
      "label": "Your Shopping Cart is Empty",
      "buttonValue": "Shop Now"
    }
  }
}
  • Content:
    (function (window) {
      'use strict';
    
      const header = document.querySelector('.header');
      const headroom = document.querySelector('.headroom');
      const searchFlyout = document.querySelector('.js-header-search');
      const searchInput = document.querySelector('.js-header-search-input');
      const searchButton = document.querySelector('.js-header-search-button');
      const cartFlyout = document.querySelector('.js-header-cart');
      const flyoutOverlay = document.querySelector('.js-header-flyout-overlay');
      const navigationItems = document.querySelectorAll('.js-header-nav-item');
      const secondaryMenus = document.querySelectorAll('.js-header-nav--secondary');
      const headerClass = 'js-header';
      const mobileMenuOpenClass = 'js-mobile-header-nav-open';
      const searchOpenClass = 'js-header-search-open';
      const cartOpenClass = 'js-header-cart-open';
      const activeItemClass = 'js-header-nav-item--active';
      const hiddenSecondaryMenuClass = 'js-header-nav--secondary--hidden';
      const hiddenSecondaryItemClass = 'js-header-nav-item--secondary--hidden';
      const activeSearchClass = 'js-header-search--active';
      let previousScrollTop = null;
      let resizeTimeout;
    
      // Events are emitted for flyout actions so that implementation JS can react
      // as needed.
      function emitFlyoutEvent(flyoutId, action) {
        componentEvents.emitEvent('flyout-change', [{
          id: flyoutId,
          action: action
        }]);
      }
    
      // Allows implementations to toggle whether the cart icon in the header reads
      // as empty or full. Needed as items are added/removed from the cart via Ajax.
      function handleCartIconEvent(args) {
        if (args.action) {
          const icons = document.querySelectorAll('.header__icon--cart');
    
          for (let i = 0; i < icons.length; i++) {
            if (args.action == 'full') {
              icons[i].classList.remove('js-header-icon-empty-cart');
            }
            else if (args.action == 'empty') {
              icons[i].classList.add('js-header-icon-empty-cart');
            }
          }
        }
      }
    
      function toggleMobileMenuVisibility(e) {
        if (document.body.classList.contains(mobileMenuOpenClass)) {
          closeMobileMenu();
        }
        else {
          openMobileMenu();
        }
      }
    
      function openMobileMenu() {
        document.body.classList.add(mobileMenuOpenClass);
        closeSearch();
      }
    
      function closeMobileMenu() {
        document.body.classList.remove(mobileMenuOpenClass);
        resetSecondaryMenus();
      }
    
      function toggleSearchVisibility(e) {
        if (document.body.classList.contains(searchOpenClass)) {
          closeSearch();
        }
        else {
          openSearch();
        }
      }
    
      function handlePageLoad(e) {
        if (searchInput.value) {
          searchFlyout.classList.add(activeSearchClass);
        }
      }
    
      // Throttles the resize listener added when the search or cart is open.
      function handlePageResize(e) {
        if (!resizeTimeout) {
          resizeTimeout = setTimeout(() => {
            resizeTimeout = null;
            calculatePageResize();
          }, 100);
        }
      }
    
      // Positions header elements while the search and cart flyouts are open.
      //
      // The flyouts fill the window height below the promo bar and header. Because
      // the promo bar is variable height and can change upon resize, JS is needed
      // to keep flyouts in the right place when initially opened and upon resize.
      function calculatePageResize() {
        const promoBar = document.querySelector('.js-promo-bar');
    
        if (promoBar) {
          // This should only occur when the headroom element has absolute
          // positioning. It is fixed on the smallest page widths.
          const headroomPosition = getComputedStyle(headroom, null).position;
    
          if (headroomPosition == 'absolute') {
            // Bumps the headroom element below the promo bar.
            headroom.style.top = promoBar.clientHeight + 'px';
            // Header has to be given a height so the page doesn't jump behind it.
            header.style.height = flyoutOverlay.getBoundingClientRect().top + 'px';
          }
          else {
            // Can't just call removePageResize() here because that would remove the
            // event listener, and in theory the user could still resize the page to
            // the point of this needing to take effect.
            headroom.style.removeProperty('top');
            header.style.removeProperty('height');
          }
        }
        else {
          removePageResize();
        }
      }
    
      function removePageResize() {
        window.removeEventListener('resize', handlePageResize);
        headroom.style.removeProperty('top');
        header.style.removeProperty('height');
      }
    
      function handleSearchInputChange(e) {
        if (e.target.value) {
          searchFlyout.classList.add(activeSearchClass);
        }
        else {
          searchFlyout.classList.remove(activeSearchClass);
        }
      }
    
      function handleSearchButton(e) {
        const closeIcon = searchFlyout.querySelector('.icon--close-large');
        const submitIcon = searchFlyout.querySelector('.icon--search');
        const searchForm = searchFlyout.querySelector('form');
    
        // If the search icon is visible, we submit the form on click.
        if (!isHidden(submitIcon) && searchInput.value) {
          searchForm.submit();
          e.preventDefault();
        }
        else if (!isHidden(closeIcon)) {
          // The reset button doesn't trigger an `input` event.
          searchFlyout.classList.remove(activeSearchClass);
          searchInput.setAttribute('value', '');
          searchInput.focus();
        }
      }
    
      // Populate the input with the value of the clicked link and trigger an event.
      function handleSearchListLink(e) {
        e.preventDefault();
    
        searchInput.value = e.target.text;
        triggerNativeEvent(searchInput, 'input');
      }
    
      function openSearch() {
        const searchListLinks = searchFlyout.querySelectorAll('.js-header-search-list-link');
    
        closeMobileMenu();
        closeCart();
    
        // iOS requires `body { position: fixed }` to prevent background scrolling
        // while the modal is open, which forces the page to jump to the top. The
        // following counteracts that jump.
        previousScrollTop = (document.documentElement.scrollTop || document.body.scrollTop);
        document.body.style.top = (-1 * previousScrollTop) + 'px';
    
        for (let i = 0; i < searchListLinks.length; i++) {
          searchListLinks[i].addEventListener('click', handleSearchListLink);
        }
    
        document.body.classList.add(searchOpenClass);
        document.querySelector('.header-search__input').focus();
        flyoutOverlay.addEventListener('click', closeSearch);
    
        window.addEventListener('resize', handlePageResize);
        calculatePageResize();
    
        emitFlyoutEvent('search', 'open');
      }
    
      function closeSearch() {
        if (searchFlyout) {
          const searchListLinks = searchFlyout.querySelectorAll('.js-header-search-list-link');
    
          for (let i = 0; i < searchListLinks.length; i++) {
            searchListLinks[i].removeEventListener('click', handleSearchListLink);
          }
    
          document.body.classList.remove(searchOpenClass);
          flyoutOverlay.removeEventListener('click', closeSearch);
    
          // Return the body to its state before the modal was opened.
          document.body.style.top = '';
          document.documentElement.scrollTop = document.body.scrollTop = previousScrollTop;
    
          removePageResize();
    
          emitFlyoutEvent('search', 'close');
        }
      }
    
      function toggleCartVisibility(e) {
        if (document.body.classList.contains(cartOpenClass)) {
          closeCart();
        }
        else {
          openCart();
        }
      }
    
      function openCart() {
        closeMobileMenu();
        closeSearch();
    
        document.body.classList.add(cartOpenClass);
        flyoutOverlay.addEventListener('click', closeCart);
    
        window.addEventListener('resize', handlePageResize);
        calculatePageResize();
    
        emitFlyoutEvent('cart', 'open');
      }
    
      function closeCart() {
        document.body.classList.remove(cartOpenClass);
        flyoutOverlay.removeEventListener('click', closeCart);
        removePageResize();
    
        emitFlyoutEvent('cart', 'close');
      }
    
      function isActiveNavigationItem(item) {
        return item.classList.contains(activeItemClass);
      }
    
      function toggleMenuItem(e) {
        const item = e.target.parentNode;
    
        if (isActiveNavigationItem(item)) {
          closeMenuItem(item);
        }
        else {
          item.classList.add(activeItemClass);
    
          const nextItem = document.querySelector('.js-header-nav__secondary-wrapper');
          if (nextItem !== null) {
            cstmScrollTo(nextItem, 0, 400);
          }
          // Search may be open on desktop.
          closeSearch();
        }
      }
    
      function openMenuItem(item) {
        const navigationButton = item.querySelector('.js-header-nav-button');
        const menuItems = item.parentNode.children;
    
        // Deactivate any other currently active item.
        for (let i = 0; i < navigationItems.length; i++) {
          const navigationItem = navigationItems[i];
          if (navigationItem != item && !navigationItem.contains(navigationButton)) {
            if (document.getElementsByClassName('js-header-nav-item--active').length)
              navigationItem.classList.remove(activeItemClass);
          }
        }
    
        // Hide sibling secondary menus that don't contain the item being opened.
        for (let i = 0; i < secondaryMenus.length; i++) {
          const secondaryMenu = secondaryMenus[i];
    
          if (item.parentNode != secondaryMenu) {
            if (document.getElementsByClassName('js-header-nav-item--active').length)
              secondaryMenu.classList.add(hiddenSecondaryMenuClass);
          }
        }
    
        // Hide sibling menu items that aren't the item being opened (on mobile).
        for (let i = 0; i < menuItems.length; i++) {
          const menuItem = menuItems[i];
    
          if (menuItem != item) {
            if (document.getElementsByClassName('js-header-nav-item--active').length)
              menuItem.classList.add(hiddenSecondaryItemClass);
          }
        }
      }
    
      // Github code for smooth scroll
      // Scrollto copied from github.com/andjosh https://gist.github.com/andjosh/6764939
      function cstmScrollTo(element, to = 0, duration = 1000, onlyDown) {
    
        const start = element.scrollTop;
        if (onlyDown && (start > to)){
          return;
        }
        const change = to - start;
        const increment = 20;
        let currentTime = 0;
    
        const animateScroll = (() => {
    
          currentTime += increment;
    
          const val = Math.easeInOutQuad(currentTime, start, change, duration);
    
          element.scrollTop = val;
    
          if (currentTime < duration) {
            setTimeout(animateScroll, increment);
          }
        });
    
        animateScroll();
      };
    
      Math.easeInOutQuad = function (t, b, c, d) {
    
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
      };
    
      // Github code for smooth scroll
    
      function closeMenuItem(item) {
        item.classList.remove(activeItemClass);
        resetSecondaryMenus();
      }
    
      function resetSecondaryMenus() {
        // Remove the active class set within openMenuItem().
        for (let i = 0; i < navigationItems.length; i++) {
          const item = navigationItems[i];
    
          item.classList.remove(activeItemClass);
          item.classList.remove(hiddenSecondaryItemClass);
        }
    
        // Show all secondary menus hidden within openMenuItem().
        for (let i = 0; i < secondaryMenus.length; i++) {
          secondaryMenus[i].classList.remove(hiddenSecondaryMenuClass);
        }
      }
    
      // Sticky header behavior when scrolling up/down in mobile.
      // Depends on headroom.js, which is added in gulpfile.js.
      function initHeadroom() {
        const headroomElement = header.querySelector('.headroom');
        const headerNav = header.querySelector('.header-nav');
    
        const headroom = new Headroom(headroomElement, {
          offset: headerNav.offsetHeight,
          tolerance : {
            up : 20,
            down : 0
          },
        });
    
        headroom.init();
      }
    
      // Icons may be added after the initial pageload so they can be user-specific
      // on a cached page.
      function initIcons() {
        const mobileMenuIcon = document.querySelector('.js-header-icon--menu');
        const searchIcon = document.querySelector('.js-header-icon--search');
        const cartIcon = document.querySelector('.js-header-icon--cart');
    
        if (mobileMenuIcon && !mobileMenuIcon.classList.contains('js-component-init')) {
          mobileMenuIcon.addEventListener('click', toggleMobileMenuVisibility);
          mobileMenuIcon.classList.add('js-component-init');
        }
    
        if (searchIcon && !searchIcon.classList.contains('js-component-init')) {
          searchIcon.addEventListener('click', toggleSearchVisibility);
          searchIcon.classList.add('js-component-init');
        }
    
        if (cartIcon && !cartIcon.classList.contains('js-component-init')) {
          cartIcon.addEventListener('click', toggleCartVisibility);
          cartIcon.classList.add('js-component-init');
        }
      }
    
      if (header) {
        document.body.classList.add(headerClass);
    
        const elements = document.querySelectorAll('.header-nav__tertiary-wrapper');
        for (let i = 0; i < elements.length; i++) {
    
          elements[i].addEventListener('transitionend', function(event){
            if (event.propertyName === "transform") {
              openMenuItem((event.target).parentNode);
            }
          }, false);
        }
    
        for (let i = 0; i < navigationItems.length; i++) {
          const item = navigationItems[i];
          const navigationButton = item.querySelector('.js-header-nav-button');
          const backButton = item.querySelector('.js-header-nav-back-button');
    
          if (navigationButton) {
            navigationButton.addEventListener('click', toggleMenuItem);
          }
    
          if (backButton) {
            backButton.addEventListener('click', resetSecondaryMenus);
          }
        };
    
        if (searchInput && searchButton && searchFlyout) {
          window.addEventListener('load', handlePageLoad);
          searchInput.addEventListener('input', handleSearchInputChange);
          searchButton.addEventListener('click', handleSearchButton);
        }
    
        // Allow application JS to reinitialize any instances added with Ajax, etc.
        if (typeof componentEvents !== 'undefined') {
          componentEvents.on('component-init', initIcons);
          componentEvents.on('open-search-flyout', openSearch);
          componentEvents.on('open-cart-flyout', openCart);
          componentEvents.on('close-search-flyout', closeSearch);
          componentEvents.on('close-cart-flyout', closeCart);
          componentEvents.on('change-cart-icon', handleCartIconEvent);
        }
    
        initHeadroom();
        initIcons();
      }
    
    })(this);
    
  • URL: /components/raw/header/header.js
  • Filesystem Path: src/components/02-components/header/header.js
  • Size: 14.3 KB
  • Content:
    .header {
      background-color: $color-white;
    
      @media print {
        display: none;
      }
    }
    
    .header-nav {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    
      @include breakpoint($breakpoint-sm-only) {
        z-index: 12;
      }
    
      @include breakpoint($breakpoint-md) {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        height: $header-md-height-menu-bar;
        margin-bottom: $header-md-height-secondary-nav;
        z-index: 22;
      }
    
      @include breakpoint($breakpoint-lg) {
        height: $header-lg-height-menu-bar;
      }
    }
    
    .header-nav__primary {
      @include reset-list;
      height: $header-sm-height-primary-nav;
    
      &:after {
        position: absolute;
        top: 0;
        right: 50%;
        bottom: 0;
        left: 0;
        border-right: 1px solid $color-light;
        content: '';
        pointer-events: none;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        background-color: $color-white;
      }
    
      @include breakpoint($breakpoint-md) {
        height: 100%;
    
        &:after {
          content: none;
        }
      }
    
      @include breakpoint($page-width-max) {
        max-width: $page-width-max;
        margin: 0 auto;
      }
    }
    
    .header-nav__primary-item {
      width: 50%;
      height: $header-sm-height-primary-nav - 1px;
      float: left;
      border-bottom: 1px solid $color-light;
    
      &.header-nav__primary-item--active {
        border-bottom-color: $color-primary;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .header-no-primary-links & {
          height: 0;
          border-bottom: 0;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        width: auto;
        height: 100%;
        border: 0;
      }
    }
    
    .header-nav__primary-link {
      display: block;
      width: 100%;
      height: 100%;
      transition: color $transition-standard;
      color: $color-medium-dark;
      font-size: 1.6rem;
      letter-spacing: 1px;
      line-height: $header-sm-height-primary-nav;
      text-decoration: none;
      text-transform: uppercase;
      box-sizing: border-box;
    
      .header-nav__primary-item--active & {
        color: $color-primary;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        text-align: center;
      }
    
      @include breakpoint($breakpoint-md) {
        position: relative;
        padding: 0 10px;
        line-height: $header-md-height-menu-bar;
    
        &:hover,
        .header-nav__primary-item--active & {
          color: $color-dark;
          // Make text bold without increasing container width.
          text-shadow: .5px 0 .1px, -.5px 0 .1px $color-white;
        }
    
        // The most consistent cross-browser/device way to accomplish a non-right
        // triangle (really a half-hidden diamond) filled with a background image.
        // The final visible triangle is 30px wide and 10px tall.
        .header-nav__primary-item--active &:before {
          position: absolute;
          // Would be -10px (the diamond's height is 20px after scaleY() and
          // rotate()), but zooming can causes odd issues that the 1 extra px fixes.
          bottom: -11px;
          // Centers within the parent (would be 15px if it weren't for transform).
          left: calc(50% - 10px);
          // Creates the proper angles/size after scaling/rotating.
          width: 21px;
          height: 21px;
          // scaleY(): The diamond should be 20px tall and 30px wide (20 / 30).
          // scaleX(): Makes up for the extra 1px in the bottom property.
          transform: scaleY(.6666) scaleX(1.1) rotate(-45deg);
          background-image: url('../images/#{$header-background-filename}');
          content: '';
          pointer-events: none;
    
          .header-no-primary-links & {
            content: none;
          }
        }
      }
    
      @include breakpoint($breakpoint-lg) {
        font-size: 1.9rem;
        line-height: $header-lg-height-menu-bar;
      }
    
      @include breakpoint($page-width-max) {
        font-size: 2.4rem;
      }
    }
    
    .header-nav__secondary-wrapper {
      display: none;
      position: absolute;
      top: $header-sm-height-total;
      left: 100%;
      width: 100%;
      padding: 10px 10px 120px;
      transform: translateX(-100%);
      transition: none;
      background-color: $color-lighter;
      z-index: 21;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-sm-only) {
        display: block;
        left: 0;
        transition: transform .65s cubic-bezier(.55, -.01, .39, .96), opacity 0s linear .65s;
        opacity: 0;
      }
    
      .js-mobile-header-nav-open .header-nav__primary-item--active & {
        display: block;
        transform: translateX(-100%);
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .js-mobile-header-nav-open .header-nav__primary-item--active & {
          transform: translateX(0) !important;
          transition: transform .65s cubic-bezier(.55, -.01, .39, .96);
          opacity: 1;
          overflow-x: hidden;
        }
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .header-no-primary-links & {
          top: 50px;
        }
      }
    
      @include breakpoint($breakpoint-md-only) {
        .header-no-primary-links & {
          top: 70px;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        top: auto;
        height: $header-md-height-secondary-nav;
        padding: 0;
        background: url('../images/#{$header-background-filename}') left center;
    
        .header-nav__primary-item--active & {
          display: block;
        }
      }
    
      @include breakpoint($breakpoint-lg) {
        .header-no-primary-links & {
          top: 100px;
        }
      }
    
      @include breakpoint($page-width-max) {
        background-position: center center;
      }
    }
    
    .header-nav__secondary {
      @include reset-list;
      @include clearfix;
    
      &:not(:last-child) {
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid $color-light;
      }
    
      @include breakpoint($breakpoint-md) {
        &:not(:last-child) {
          margin: 0;
          padding: 0;
          border: 0;
        }
    
        &:not(:first-child) {
          display: none;
        }
      }
    }
    
    .js-header-nav--secondary--hidden {
      display: none;
    }
    
    .header-nav__secondary-item {
      @include breakpoint($breakpoint-md) {
        height: 100%;
        float: left;
      }
    }
    
    .js-header-nav-item--secondary--hidden {
      @include breakpoint($breakpoint-sm-only) {
        display: none;
      }
    }
    
    .header-nav__secondary-button,
    .header-nav__secondary-link {
      display: block;
      color: $color-darkest;
      font-size: 1.9rem;
      letter-spacing: 1px;
    
      @include breakpoint($breakpoint-md) {
        height: $header-md-height-secondary-nav;
        transition: text-shadow $transition-standard;
        color: $color-white;
        font-size: 1.6rem;
        line-height: $header-md-height-secondary-nav + 3px;
        text-transform: uppercase;
        -webkit-font-smoothing: antialiased;
    
        .header-nav__secondary-item:hover &,
        .header-nav__secondary-item--active & {
          // Make text bold without increasing container width.
          text-shadow: .25px 0 .1px, -.25px 0 .1px $color-white;
        }
      }
    
      @include breakpoint($breakpoint-md-only) {
        .header-no-primary-links & {
          font-size: 1.3rem;
        }
      }
    
      @include breakpoint($breakpoint-lg-only) {
        .header-no-primary-links & {
          font-size: 1.6rem;
        }
      }
    
      @include breakpoint($breakpoint-lg) {
        font-size: 1.9rem;
      }
    }
    
    .header-nav__secondary-button {
      @include reset-button;
      position: relative;
      width: 100%;
      padding: 10px 0;
      text-align: left;
    
      .icon {
        position: absolute;
        top: 17px;
        right: 10px;
        z-index: -1;
      }
    
      @include breakpoint($breakpoint-md) {
        width: auto;
        padding: 0 12px;
    
        .icon {
          display: none;
        }
      }
    }
    
    .header-nav__secondary-link {
      padding: 10px 0;
      text-decoration: none;
    
      @include breakpoint($breakpoint-sm-only) {
        position: relative;
    
        .icon {
          position: absolute;
          top: 13px;
          right: 5px;
          width: 17px;
          height: 17px;
        }
    
        img {
          position: absolute;
          top: 13px;
          right: 0;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        padding: 0 12px;
        box-sizing: border-box;
      }
    }
    
    .header-nav__secondary-link--logout {
      color: $color-error;
    }
    
    .header-nav__tertiary-wrapper {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      padding: 20px 10px 120px;
      transform: translateX(0);
      transition: none;
      background-color: $color-lighter;
      z-index: 21;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-sm-only) {
        display: block;
        width: 100%;
        transform: translateX(-102%);
        transition: transform .65s cubic-bezier(.55, -.01, .39, .96), opacity .0s .7s, visibility .0s .7s;
        box-shadow: 3px 3px 8px 3px rgba(0, 0, 0, .07);
        opacity: 0;
        visibility: hidden;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    
        .js-mobile-header-nav-open .header-nav__secondary-item.js-header-nav-item--active & {
          transform: translateX(0);
          transition: transform .65s cubic-bezier(.55, -.01, .39, .96);
          box-shadow: 3px 3px 8px 3px rgba(0, 0, 0, .07);
          opacity: 1;
          visibility: visible;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        display: block;
        top: auto;
        padding: 0;
        transition: visibility .2s ease-in-out 0s, opacity .2s ease-in-out 0s;
        background-color: $color-white;
        box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .3);
        // Fade in/out on hover.
        opacity: 0;
        visibility: hidden;
    
        .header-nav__secondary-item:hover & {
          opacity: 1;
          visibility: visible;
        }
      }
    }
    
    .header-nav__tertiary-back-button {
      @include reset-button;
      @include text-ui($color-dark);
      display: block;
      position: relative;
      left: -10px;
      padding: 8px 10px;
      border-radius: 0 10px 10px 0;
      background-color: $color-white;
      text-transform: uppercase;
      cursor: pointer;
    
      .icon {
        position: relative;
        top: 1px;
        margin-right: 5px;
      }
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .header-nav__tertiary {
      @include reset-list;
      margin-bottom: 10px;
    
      @include breakpoint($breakpoint-md) {
        display: flex;
        margin-bottom: 20px;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 11px;
      }
    }
    
    .header-nav__tertiary--marketing {
      @include breakpoint($breakpoint-xl) {
        width: 75%;
        float: left;
      }
    }
    
    .header-nav__tertiary-menu {
      @include breakpoint($breakpoint-md) {
        position: relative;
        flex: 1;
        margin: 0;
        padding: 0 $gutter-width-half;
        box-sizing: border-box;
    
        &:not(:first-child):before {
          position: absolute;
          top: 55px;
          bottom: 35px;
          left: -12px;
          border-left: 1px solid $color-light;
          content: '';
        }
      }
    }
    
    .header-nav__tertiary-menu-label {
      @include text-ui($color-medium-dark);
      display: block;
      margin-top: 20px;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        margin: 20px 0 10px;
      }
    }
    
    .header-nav__tertiary-menu-items {
      @include reset-list;
      margin-top: 10px;
    }
    
    .header-nav__tertiary-menu-link {
      display: block;
      padding: 10px 0;
      color: $color-darkest;
      font-size: 1.9rem;
      letter-spacing: 1px;
      text-decoration: none;
    
      @include breakpoint($breakpoint-md) {
        padding: 7px 0;
        transition: color $transition-standard;
        color: $color-dark;
        font-size: 1.4rem;
        letter-spacing: normal;
    
        &:hover {
          color: $color-primary;
        }
      }
    
      @include breakpoint($breakpoint-lg) {
        padding: 4px 0;
        font-size: 1.9rem;
      }
    }
    
    .header-nav__tertiary-menu-link--accent {
      font-weight: $font-weight-bold;
    
      .icon {
        transition: fill $transition-standard;
      }
    
      &:hover {
        .icon {
          fill: $color-primary;
        }
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .icon {
          display: none;
        }
      }
    }
    
    .header-nav__tertiary-menu-items--graphic {
      @include breakpoint($breakpoint-md) {
        display: table;
        margin: 0 auto;
      }
    }
    
    .header-nav__tertiary-menu-item--graphic {
      @include breakpoint($breakpoint-md) {
        display: table-cell;
        position: relative;
        padding: 0 20px;
        box-sizing: border-box;
      }
    }
    
    .header-nav__tertiary-menu-link--graphic {
      max-width: 240px;
      margin: 0 auto;
      padding: 0;
      line-height: 2.3rem;
      text-align: center;
    }
    
    .header-nav__tertiary-menu-graphic {
      display: block;
      max-width: 100%;
      margin: 10px auto 0;
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 10px;
      }
    }
    
    .header-nav__tertiary-menu-item--horizontal {
      @include breakpoint($breakpoint-md) {
        padding: 15px 0 16px;
        float: left;
        box-sizing: border-box;
      }
    
      &:first-child > a {
        padding-left: 2px;
      }
    
      &:last-child > a {
        padding-right: 2px;
      }
    }
    
    .header-nav__tertiary-menu-link--horizontal {
      @include breakpoint($breakpoint-md) {
        padding: 0 12px;
        font-size: 1.4rem;
        letter-spacing: normal;
        box-sizing: border-box;
      }
    }
    
    .header-nav__tertiary-marketing-placement {
      display: none;
    
      @include breakpoint($breakpoint-xl) {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: calc(25% - 10px);
        float: right;
        box-shadow: -10px 0 10px 0 rgba(0, 0, 0, .1);
      }
    }
    
    .header-nav__tertiary-marketing-link {
      text-decoration: none;
    }
    
    // Using a background image rather than an img tag allows for easy centering
    // when the image is wider than the container. It also ensures the image won't
    // be downloaded on mobile, where it isn't ever visible.
    .header-nav__tertiary-marketing-image {
      height: calc(100% - 75px);
      background-position: top center;
    }
    
    .header-nav__tertiary-marketing-text {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 75px;
      padding-top: 1px;
      font-weight: $font-weight-bold;
    
      &:after {
        position: absolute;
        top: -9px;
        left: calc(50% - 15px);
        width: 0;
        height: 0;
        border-right: 15px solid transparent;
        border-bottom: 10px solid $color-white;
        border-left: 15px solid transparent;
        content: '';
      }
    }
    
    .header-nav__tertiary-marketing-title {
      display: block;
      margin: 15px 0 2px;
      color: $color-dark;
      font-size: 1.9rem;
      font-weight: $font-weight-normal;
      line-height: 2.3rem;
      text-align: center;
    }
    
    .header-nav__tertiary-marketing-cta {
      @include text-ui($color-primary);
      display: block;
      margin-bottom: 15px;
      line-height: 2.0rem;
      text-align: center;
      text-transform: uppercase;
    }
    
    // This element is empty, but is still needed for a background, border, and
    // shadow around the icons, logo, and large navigation. Those elements can't
    // live within this one because of different positioning and z-indexes needed at
    // different widths.
    .header-menu-bar {
      position: absolute;
      top: $header-sm-height-primary-nav;
      left: 0;
      width: 100%;
      height: $header-sm-height-menu-bar - 1px;
      border-bottom: 1px solid $color-light;
      background-color: $color-white;
      z-index: 21;
    
      @include breakpoint($breakpoint-sm-only) {
        .header-no-primary-links & {
          top: 0;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        top: 0;
        height: $header-md-height-menu-bar;
        border-bottom: 0;
      }
    
      @include breakpoint($breakpoint-lg) {
        height: $header-lg-height-menu-bar;
      }
    }
    
    .header-menu-bar:after {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100%;
      transition: opacity .65s linear;
      box-shadow: $header-dropshadow;
      content: '';
      opacity: 0;
      z-index: -1;
    
      body.js-mobile-header-nav-open:not(.js-header-search-open) & {
        transition: opacity .65s linear;
        opacity: 1;
      }
    }
    
    .header__icons {
      position: absolute;
      top: $header-sm-height-primary-nav;
      right: 0;
      height: $header-sm-height-menu-bar;
      overflow: hidden;
      z-index: 22;
    
      @include breakpoint($breakpoint-sm-only) {
        .header-no-primary-links & {
          top: 0;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        top: 0;
        height: $header-md-height-menu-bar;
        overflow: visible;
      }
    
      @include breakpoint($breakpoint-lg) {
        height: $header-lg-height-menu-bar;
      }
    
      // Correct icon placement when the page is beyond the maximum width.
      @include breakpoint($page-width-max) {
        right: auto;
        left: 50%;
        width: $page-width-max;
        margin-left: -1 * ($page-width-max / 2);
        pointer-events: none;
      }
    }
    
    .header__icons-inner {
      height: 100%;
    
      @include breakpoint($page-width-max) {
        float: right;
        pointer-events: auto;
      }
    }
    
    .header__icon {
      @include reset-button;
      position: relative;
      width: 38px;
      height: 100%;
    
      @include breakpoint($breakpoint-md) {
        width: 50px;
      }
    }
    
    .header__icon--menu {
      position: absolute;
      top: 40px;
      height: 50px;
      margin: 0;
      transition-duration: .15s;
      transition-property: opacity, filter;
      transition-timing-function: linear;
      border: 0;
      z-index: 21;
    
      &.zeal {
        top: 0;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .js-header--no-primary & {
          top: 0;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    // Code based on the "Tasty CSS-animated Hamburgers
    // https://jonsuh.com/hamburgers by Jonathan Suh"
    .hamburger-spring__box {
      position: relative;
      width: 25px;
      height: 20px;
    }
    
    .hamburger-spring__inner {
      top: 80%;
      margin-top: -2px;
    }
    
    .hamburger-spring__inner,
    .hamburger-spring__inner::before,
    .hamburger-spring__inner::after {
      position: absolute;
      width: 25px;
      height: 2px;
      transition-duration: .15s;
      transition-property: transform;
      transition-timing-function: ease;
      background-color: $color-black;
    }
    
    .hamburger-spring__inner::before,
    .hamburger-spring__inner::after {
      display: block;
      content: '';
    }
    
    .hamburger-spring__inner::before {
      top: -9px;
    }
    
    .hamburger-spring__inner::after {
      bottom: -9px;
    }
    
    .hamburger-spring .hamburger-spring__inner {
      left: -12px;
      margin-top: -10px;
      transition: top 0s .13s linear, left 0s .13s linear, background-color 0s .13s linear;
    
      .js-mobile-header-nav-open & {
        left: -13px;
        margin-top: -10px;
        transition-delay: .22s;
        background-color: transparent;
      }
    }
    
    .hamburger-spring .hamburger-spring__inner::before {
      top: 9px;
      transition: top .1s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19), background-color .13s;
    
      .js-mobile-header-nav-open & {
        top: 0;
        transform: translate3d(0, 10px, 0) rotate(45deg);
        transition: top .1s .15s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .22s cubic-bezier(.215, .61, .355, 1), background-color .13s .22s;
        background-color: #e62e2e;
      }
    }
    
    .hamburger-spring .hamburger-spring__inner::after {
      top: 18px;
      transition: top .2s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19), background-color .13s;
    
      .js-mobile-header-nav-open & {
        top: 0;
        transform: translate3d(0, 10px, 0) rotate(-45deg);
        transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .22s cubic-bezier(.215, .61, .355, 1), background-color .13s .22s;
        background-color: #e62e2e;
      }
    }
    
    .header-nav__country {
      @include reset-button;
      display: none;
      position: absolute;
      right: 0;
      bottom: (-1 * $header-md-height-secondary-nav);
      height: $header-md-height-secondary-nav;
      color: $color-white;
      font-size: 1.4rem;
      letter-spacing: 2px;
      z-index: 25;
    
      @include breakpoint($breakpoint-md) {
        display: block;
      }
    
      @include breakpoint($breakpoint-lg) {
        font-size: 1.9rem;
      }
    }
    
    .header-nav__country-label {
      display: inline-block;
      position: relative;
      top: 1px;
      padding: 0 8px 0 6px;
      transition: text-shadow $transition-standard;
      vertical-align: middle;
      -webkit-font-smoothing: antialiased;
      pointer-events: none;
    
      .header-nav__country:hover & {
        // Make text bold without increasing container width.
        text-shadow: .25px 0 .1px, -.25px 0 .1px $color-white;
      }
    }
    
    .header-nav__country-image {
      display: inline-block;
      vertical-align: middle;
      pointer-events: none;
    }
    
    .header__logo-wrapper {
      position: absolute;
      top: $header-sm-height-primary-nav;
      left: 50%;
      transform: translateX(-50%);
      z-index: 23;
    
      @include breakpoint($breakpoint-sm-only) {
        .header-no-primary-links & {
          top: 0;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        top: 0;
      }
    }
    
    .header__logo {
      display: block;
      height: $header-sm-height-menu-bar - 10px;
      margin: 5px auto;
    
      @include breakpoint($breakpoint-md) {
        height: $header-md-height-menu-bar - 10px;
      }
    
      @include breakpoint($breakpoint-lg) {
        height: $header-lg-height-menu-bar - 10px;
      }
    }
    
    .header__icon--search,
    .header__icon--wishlist,
    .header__icon--account,
    .header__icon--cart {
      display: block;
      float: left;
    
      @include breakpoint($breakpoint-md) {
        position: relative;
        width: 70px;
        height: 100%;
    
        .icon {
          transition: fill $transition-standard;
        }
    
        &:hover {
          .icon {
            fill: $color-primary;
          }
        }
      }
    }
    
    .header__icon--search {
      position: relative;
    
      .icon--close-large {
        display: none;
        width: 30px;
        height: 30px;
      }
    
      &:after {
        position: absolute;
        top: 10px;
        right: 0;
        bottom: 10px;
        border-right: 1px solid $color-light;
        content: '';
      }
    
      &:last-child {
        &:after {
          content: none;
        }
      }
    
      .js-header-search-open & {
    
        .icon--search {
          display: none;
        }
    
        .icon--close-large {
          display: inline-block;
          fill: $color-error;
        }
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .icon--close-large {
          width: 16px;
          height: 16px;
        }
    
        .icon--search {
          width: 20px;
          height: 20px;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        &:after {
          top: 4px;
          bottom: 4px;
        }
      }
    
      @include breakpoint($breakpoint-lg) {
        &:after {
          top: 20px;
          bottom: 20px;
        }
      }
    }
    
    .header__icon--wishlist {
      display: none;
      position: relative;
    
      &.js-header-icon-active-wishlist {
        display: block;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .icon {
          top: 1px;
          left: 1px;
          width: 21px;
          height: 21px;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        left: 2px;
      }
    }
    
    .header__icon--cart {
      .icon--cart {
        display: none;
      }
    
      &.js-header-icon-empty-cart {
        .icon--cart-item {
          display: none;
        }
    
        .icon--cart {
          display: inline-block;
        }
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .header__icon-trigger {
          display: none;
        }
    
        .icon {
          width: 25px;
          height: 22px;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        width: 60px;
    
        .header__icon-link {
          display: none;
        }
    
        .icon {
          position: relative;
          left: 5px;
        }
      }
    }
    
    // Opens the header cart on non-mobile breakpoints.
    .header__icon--cart--button {
      @include breakpoint($breakpoint-sm-only) {
        display: none;
      }
    }
    
    // Links to the cart on the smallest breakpoint.
    .header__icon--cart--link {
      .icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .header__icon--account {
      display: none;
    
      .icon--account-active {
        fill: $color-primary;
      }
    
      @include breakpoint($breakpoint-md) {
        display: block;
      }
    }
    
    .header-flyout {
      display: none;
      position: absolute;
      top: $header-sm-height-total;
      right: 0;
      left: 0;
      padding: 10px;
      background-color: $color-white;
      box-shadow: $header-dropshadow;
      z-index: 12;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-sm-only) {
        .header-no-primary-links & {
          top: 50px;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        top: $header-md-height-total;
        bottom: 0;
        left: auto;
        width: 360px;
        height: calc(100% - 110px);
        box-shadow: -10px 0 10px 0 rgba(0, 0, 0, .1);
        overflow-y: scroll;
        overflow-x: hidden;
      }
    
      @include breakpoint($breakpoint-lg) {
        top: $header-lg-height-total;
        height: calc(100% - 140px);
      }
    }
    
    .header-flyout--cart {
      @include breakpoint($breakpoint-md) {
        overflow-y: hidden;
      }
    }
    
    .js-header-search-open .header-flyout--search,
    .js-header-cart-open .header-flyout--cart {
      display: block;
    }
    
    .header-search__input {
      width: 100%;
      padding: 10px 20px;
      border: 1px solid $color-light;
      border-radius: 0;
      font-size: 1.4rem;
      box-sizing: border-box;
    
      &:focus {
        border: 1px solid $color-primary;
        outline: none;
      }
    
      @include breakpoint($breakpoint-md) {
        padding: 15px 20px;
      }
    }
    
    .header-search__button {
      @include reset-button;
      display: block;
      position: absolute;
      top: 10px;
      right: 10px;
      width: 40px;
      height: 40px;
      padding-right: 20px;
      pointer-events: none;
    
      .icon--search {
        display: inline-block;
        width: 20px;
        height: 20px;
    
        .js-header-search--active & {
          display: none;
        }
      }
    
      .icon--close-large {
        display: none;
    
        .js-header-search--active & {
          display: inline-block;
        }
      }
    
      .js-header-search--active & {
        pointer-events: auto;
      }
    
      @include breakpoint($breakpoint-md) {
        height: 50px;
    
        .icon--close-large {
          width: 16px;
          height: 16px;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .icon--search {
          .js-header-search--active & {
            display: inline-block;
            fill: $color-primary;
          }
        }
    
        .icon--close-large {
          .js-header-search--active & {
            display: none;
          }
        }
      }
    }
    
    .header-search__list {
      display: none;
    
      @include breakpoint($breakpoint-md) {
        display: block;
      }
    }
    
    .header-search__list-label {
      @include text-ui($color-dark);
      display: block;
      padding: 20px 0 10px;
      text-transform: uppercase;
    }
    
    .header-search__list-items {
      @include text-label;
      margin: 0;
      padding: 0;
      line-height: 2.8rem;
      list-style-type: none;
    }
    
    .header-search__list-link {
      transition: color $transition-standard;
      color: $color-darkest;
      text-decoration: none;
    
      &:hover {
        color: $color-primary;
      }
    }
    
    .header-search__results {
      display: none;
    
      .js-header-search--active & {
        display: block;
      }
    }
    
    .header-search__result-link {
      display: none;
    
      .icon {
        position: relative;
        top: 1px;
        width: 3px;
        padding-left: 8px;
      }
    
      &:hover .icon {
        fill: $color-primary;
      }
    
      @include breakpoint($breakpoint-md) {
        @include text-label($color-darkest);
        display: inline-block;
        margin-top: 10px;
        line-height: 4.0rem;
        text-decoration: none;
      }
    }
    
    .header-cart__header {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 50px;
      padding: 10px;
      background-color: $color-lighter;
      box-sizing: border-box;
    }
    
    .header-cart__title {
      color: $color-dark;
      font-size: 2.4rem;
      font-weight: $font-weight-bold;
      line-height: 3.5rem;
    
      & > .icon {
        position: relative;
        top: -2px;
        height: 9px;
        padding-left: 5px;
      }
    }
    
    .header-cart__item-count {
      position: relative;
      float: right;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 4.0rem;
    
      &:not(.header-cart__item-count--empty):before {
        display: block;
        position: absolute;
        top: calc(50% - 6px);
        left: -20px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: $color-primary;
        content: '';
      }
    }
    
    .header-cart {
      // Forces scrollbar visibility.
      // http://simurai.com/blog/2011/07/26/webkit-scrollbar
      @include breakpoint($breakpoint-md) {
        ::-webkit-scrollbar {
          width: 7px;
          -webkit-appearance: none;
        }
    
        ::-webkit-scrollbar-thumb {
          border-radius: 4px;
          background-color: rgba(0, 0, 0, .5);
          box-shadow: 0 0 1px rgba(255, 255, 255, .5);
        }
      }
    }
    
    .header-cart__products {
      position: absolute;
      top: 50px;
      right: 0;
      bottom: 141px;
      left: 10px;
      padding-right: 10px;
      overflow-y: scroll;
      overflow-x: hidden;
    
      .header-cart--tax & {
        bottom: 161px;
      }
    }
    
    .header-cart__item {
      @include clearfix;
      padding-bottom: 5px;
      border-bottom: 1px solid $color-light;
    
      & > a:focus {
        outline: none;
      }
    
      &:last-child {
        border-bottom: 0;
      }
    }
    
    .header-cart__item-image {
      max-height: 117px;
      margin: 0 auto;
    }
    
    .header-cart__item-info {
      display: block;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    }
    
    .header-cart__item-info--name {
      font-weight: $font-weight-bold;
    }
    
    .header-cart__item-vip-info {
      margin-top: -20px;
      color: $color-medium-dark;
      font-size: 1.1rem;
      line-height: 1.4rem;
      text-align: right;
    }
    
    .header-cart__item-vip-card-value {
      display: block;
      white-space: nowrap;
    }
    
    .header-cart__item-vip-original-price {
      display: block;
      text-decoration: line-through;
    }
    
    .header-cart__item-info--qty,
    .header-cart__item-info--price {
      margin-top: 10px;
    }
    
    .header-cart__item-info--qty {
      float: left;
    }
    
    .header-cart__item-info--price {
      float: right;
    }
    
    .header-cart__item-remove {
      padding: 0;
      float: right;
      clear: both;
      color: $color-error;
      line-height: 4.0rem;
    
      &:hover {
        color: $color-error;
      }
    }
    
    .header-cart__footer {
      display: none;
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 141px;
      background-color: $color-lighter;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-md) {
        display: block;
      }
    
      .header-cart--tax & {
        height: 161px;
      }
    }
    
    .header-cart__subtotal {
      height: 50px;
      margin: 0 $gutter-width-half;
      border-bottom: 1px solid $color-light;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 5.0rem;
    
      .header-cart--tax & {
        height: 70px;
      }
    }
    
    .header-cart__subtotal-value {
      float: right;
      font-weight: $font-weight-bold;
    }
    
    .header-cart__subtotal-tax {
      margin-top: -15px;
      float: right;
      clear: both;
      color: $color-medium-dark;
      font-size: 1.2rem;
      line-height: 2.0rem;
    }
    
    .header-cart__actions {
      @include clearfix;
    }
    
    .header-cart__action {
      display: block;
      width: calc(100% - 60px);
      margin: 20px 30px;
      padding: 0;
      float: left;
      box-sizing: border-box;
    }
    
    .header-cart__payment-methods {
      @include reset-list;
      display: flex;
      position: relative;
      justify-content: space-between;
      height: 30px;
      margin: 0 $gutter-width-half;
      padding: 10px 0;
      border-top: 1px solid $color-light;
      box-sizing: border-box;
    
      .payment-method {
        height: 30px;
      }
    }
    
    .header-cart__empty {
      position: absolute;
      top: 50px;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
    }
    
    .header-cart__empty-inner {
      position: absolute;
      top: 50%;
      width: 100%;
      transform: translateY(-50%);
      text-align: center;
    }
    
    .header-cart__empty-brand-logo {
      margin: 0 auto;
    }
    
    .header-cart__empty-label {
      display: block;
      margin: 20px 0;
      color: $color-darkest;
      font-size: 1.6rem;
      line-height: 1.9rem;
    }
    
    .header-cart__empty-button {
      padding: 0 20px;
    }
    
    .header-cart__item-info--repair-name {
      font-weight: $font-weight-bold;
    }
    
    .header-cart__item-info--repair-type {
      font-weight: $font-weight-bold;
    }
    
    .header-cart__item-info--repair-price {
      float: right;
      text-align: right;
    }
    
    .header-cart__item-repair {
      @include clearfix;
      margin-bottom: 10px;
    }
    
    .header-cart__item--repair {
      @include clearfix;
      padding-bottom: 5px;
      border-bottom: 1px solid $color-light;
    
      .header-cart__item-info--repair-type {
        display: inline;
      }
    }
    
    .header-cart__item--surcharge {
      padding-top: 30px;
      padding-bottom: 15px;
    
      & > span {
        display: block;
      }
    
      .icon {
        display: block;
        margin: 0 auto;
      }
    
      .header-cart__item-info--repair-type {
        margin: 30px 0 0;
      }
    
      .header-cart__item-info--repair-price {
        position: static;
        width: 100%;
        float: none;
        clear: both;
        text-align: left;
      }
    }
    
    .js-header-search-open,
    .js-header-cart-open {
      position: fixed;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    
    // Darkened overlay covering the screen when flyouts are open.
    .header-flyout-overlay {
      display: none;
    
      .js-header-search-open &,
      .js-header-cart-open & {
        display: block;
        position: absolute;
        top: $header-md-height-total;
        right: 0;
        bottom: 0;
        left: 0;
        height: calc(100% - 110px);
        background-color: $color-black;
        content: '';
        opacity: .5;
        z-index: 11;
    
        @include breakpoint($breakpoint-sm-only) {
          top: 0;
          height: 100vh;
        }
    
        @include breakpoint($breakpoint-lg) {
          top: $header-lg-height-total;
          height: calc(100% - 140px);
        }
      }
    }
    
  • URL: /components/raw/header/header.scss
  • Filesystem Path: src/components/02-components/header/header.scss
  • Size: 31.8 KB

There are no notes for this item.