<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" alt="">
  <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">
                    <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" aria-haspopup="true" aria-expanded="false" aria-controls="shop">
                    SHOP
                    <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div id="shop" class="header-nav__tertiary-wrapper u-page-width-max" aria-hidden="true">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left" alt="">
  <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 header-nav__tertiary-menu-items--graphic">
                                                    <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="#">
                              <img class="header-nav__tertiary-menu-graphic" src="/assets/images/zeal-header-nav-sunglasses.png">
                              Sunglasses
                            </a>
                                                    </li>
                                                    <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="#">
                              <img class="header-nav__tertiary-menu-graphic" src="/assets/images/zeal-header-nav-sunglasses.png">
                              Goggles
                            </a>
                                                    </li>
                                                    <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="#">
                              <img class="header-nav__tertiary-menu-graphic" src="/assets/images/zeal-header-nav-sunglasses.png">
                              Accessory Lenses
                            </a>
                                                    </li>
                                                    <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="#">
                              <img class="header-nav__tertiary-menu-graphic" src="/assets/images/zeal-header-nav-sunglasses.png">
                              Accessories
                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button" aria-haspopup="true" aria-expanded="false" aria-controls="technology">
                    TECHNOLOGY
                    <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div id="technology" class="header-nav__tertiary-wrapper u-page-width-max" aria-hidden="true">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left" alt="">
  <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 header-nav__tertiary-menu-items--horizontal">
                                                    <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="#">
                              Sunglasses Technology
                            </a>
                                                    </li>
                                                    <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="#">
                              Prescription
                            </a>
                                                    </li>
                                                    <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="#">
                              Goggle Technology
                            </a>
                                                    </li>
                                                    <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="#">
                              Tech Goggle Support
                            </a>
                                                    </li>
                                                    <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="#">
                              RLs
                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button" aria-haspopup="true" aria-expanded="false" aria-controls="our-story">
                    OUR STORY
                    <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div id="our-story" class="header-nav__tertiary-wrapper u-page-width-max" aria-hidden="true">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left" alt="">
  <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 header-nav__tertiary-menu-items--horizontal">
                                                    <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="#">
                              Who We Are
                            </a>
                                                    </li>
                                                    <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="#">
                              Ambassadors
                            </a>
                                                    </li>
                                                    <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="#">
                              Community
                            </a>
                                                    </li>
                                                    <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="#">
                              Footprint
                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button" aria-haspopup="true" aria-expanded="false" aria-controls="explore-more">
                    EXPLORE MORE
                    <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div id="explore-more" class="header-nav__tertiary-wrapper u-page-width-max" aria-hidden="true">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left" alt="">
  <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 header-nav__tertiary-menu-items--horizontal">
                                                    <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="#">
                              Blog
                            </a>
                                                    </li>
                                                    <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="#">
                              Events
                            </a>
                                                    </li>
                                                    <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="#">
                              Media
                            </a>
                                                    </li>
                                                    <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="#">
                              Adventures
                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="">
                    Customer Service
                  </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:+18884549325">
                    (888) 454-9325
                    <svg class="icon icon--action-phone" alt="">
  <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" alt="">
  <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" alt="">
  <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" aria-haspopup="true" aria-expanded="false" aria-controls="customer-service">
                    Customer Service
                    <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div id="customer-service" class="header-nav__tertiary-wrapper u-page-width-max" aria-hidden="true">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left" alt="">
  <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>
                        </div>
                    </div>
                </li>
            </ul>
        </nav>
        <div class="header-menu-bar"></div>
        <div class="header__menu-icon">
            <button class="hamburger-spring header__icon header__icon--menu  zeal js-header-icon--menu" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="navigation">
        <span class="u-visually-hidden">Open Menu</span>
        <span class="hamburger-spring__box">
          <span class="hamburger-spring__inner"></span>
        </span>
      </button>
        </div>
        <a class="header__logo-wrapper" href="#">
      <img class="header__logo"
           src="/assets/images/zeal-brand-logo.png"
           alt="Zeal Optics logo"
           
/></a>
        <div class="header__icons">
            <div class="header__icons-inner">
                <button class="header-flyout__toggle header-flyout__toggle--search
  
  
  js-header-icon--search" id="header-flyout-search-toggle" aria-controls="header-flyout-search" aria-expanded="false" data-header-flyout data-header-flyout-type="search">
  <span class="u-visually-hidden">Search</span>
    <svg class="icon icon--search" alt="">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

</button>

                <div class="header-flyout header-flyout--search
  " id="header-flyout-search" aria-hidden="true">
                    <button aria-label="Close search" class="header-flyout__close js-header-search-close-button">
    <svg class="icon icon--close-large" alt="">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

  </button>
                    <div class="header-flyout__content">
                        <div class="header-search js-header-search">
                            <form class="header-search__form">
                                <label class="header-search__form-label">
      <span class="u-visually-hidden">Search</span>
      <input class="header-search__input js-header-search-input" type="text" placeholder="Search on Zeal">
    </label>
                            </form>
                            <div class="header-search__results">
                                <a class="header-search__result-link" href="#">View all results <svg class="icon icon--arrow-right" alt="">
  <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"
            alt="Front-side view of the Ho&#x27;okipa Reader Universal Fit">
        </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"
            alt="Front-side view of the Sandy Beach Universal Fit">
        </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"
            alt="Front-side view of the Hanalei Universal Fit">
        </span>
        <span class="search-autocomplete-result__title">Hanalei Universal Fit</span>
      </a>
                                </div>
                            </div>
                            <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>

                    </div>
                </div>

                <div class="header-flyout__overlay header-flyout__overlay--search js-header-flyout-overlay js-header-flyout-overlay--search"></div>

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

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

        </a>
                <button class="header-flyout__toggle header-flyout__toggle--cart
   header-flyout__toggle--with-fallback
   js-header-flyout-icon-empty-cart
  js-header-icon--cart" id="header-flyout-cart-toggle" aria-controls="header-flyout-cart" aria-expanded="false" data-header-flyout data-header-flyout-type="cart">
  <span class="u-visually-hidden">Cart</span>
    <svg class="icon icon--cart" alt="">
  <use xlink:href="/assets/icons/icons.svg#cart"></use>
</svg>

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

</button>

                <a href="#" class="header-flyout__link header-flyout__link--cart
    ">
    <span class="u-visually-hidden">Cart</span>
      <svg class="icon icon--cart" alt="">
  <use xlink:href="/assets/icons/icons.svg#cart"></use>
</svg>

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

  </a>

                <div class="header-flyout header-flyout--cart
   header-flyout--with-fallback" id="header-flyout-cart" aria-hidden="true">
                    <button aria-label="Close cart" class="header-flyout__close js-header-cart-close-button">
    <svg class="icon icon--close-large" alt="">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

  </button>
                    <div class="header-flyout__header">
                        <span class="header-cart__title">Your Cart <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</span>
                    </div>
                    <div class="header-flyout__content">
                        <div class="header-cart header-cart--zeal--empty-cart header-cart--tax header-cart--express ">
                            <div class="header-cart__empty">
                                <div class="header-cart__empty-inner">
                                    <img class="header-cart__empty-brand-logo" src="/assets/images/zeal-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" href="#">Shop Now</a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="header-flyout__overlay header-flyout__overlay--cart js-header-flyout-overlay js-header-flyout-overlay--cart"></div>

                <button class="header-nav__country js-modal-open-link" data-modal-id="country-selector" aria-label="Current country is US. Click to select country.">
          <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>
</header>

<main id='main-section' class='main main--dealer-profiles'>
    <ul class="breadcrumb u-page-width-max-gutters js-breadcrumb">
        <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="#">Zeal</a>
        </li>
        <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="#">Retailers</a>
        </li>
        <li class="breadcrumb__item breadcrumb__item--current">
            <a class="breadcrumb__link" href="#">United States</a>
        </li>
        <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="#">Illinois</a>
        </li>
        <li class="breadcrumb__item breadcrumb__item--current">
            Chicago, IL
        </li>
    </ul>

    <div class='dealer-profiles__container dealer-profiles__container--dealer'>
        <a href='/components/preview/select-city' class='dealer-profiles__back-to'>
      Change city
    </a>
        <h2 class="page-title page-title--dealer-profile">Chicago, IL</h2>

        <h3 class="section-title section-title--dealer-profile">Authorized Maui Jim Locations</h3>

        <div class="search-standalone js-search-standalone u-page-width-max-gutters">

            <form class="search-standalone-form">

                <label class="u-visually-hidden" for="search-standalone-form__input">Search</label>
                <input id="search-standalone-form__input" class="search-standalone-form__input js-search-standalone-input" type="text" placeholder="Search store by name or address" data-filter-input="true">
                <button class="search-standalone-form__button js-search-standalone-button" type="reset">
      <span class="u-visually-hidden">Submit style number or name</span>
      <svg class="icon icon--search" alt="">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

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

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

        <div class='select-dealer__options'>
            <span data-mobile-tooltip-toggle>
        <span class='select-dealer__options-icon'>
          <svg class="icon icon--filters" alt="">
  <use xlink:href="/assets/icons/icons.svg#filters"></use>
</svg>

        </span>
            <span class='select-dealer__options-label'>Filter by</span>
            </span>
            <fieldset id='select-dealer-options-group' class='select-dealer__options-group' data-mobile-tooltip>
                <div class="form-item form-item--checkbox">
                    <input type="checkbox" id="select-dealer-option-sunglasses" name="sunglasses" class="checkbox checkbox--default" checked="true" data-filter-option="" value="sunglasses">
                    <label for="select-dealer-option-sunglasses">
    
    Sunglasses
    
  </label>
                </div>

                <div class="form-item form-item--checkbox">
                    <input type="checkbox" id="select-dealer-option-sunglasses-with-prescription" name="sunglasses-with-prescription" class="checkbox checkbox--default" data-filter-option="" value="sunglasses-with-prescription">
                    <label for="select-dealer-option-sunglasses-with-prescription">
    
    Sunglasses with Prescription
    
  </label>
                </div>

                <div class="form-item form-item--checkbox">
                    <input type="checkbox" id="select-dealer-option-eyeglasses" name="eyeglasses" class="checkbox checkbox--default" data-filter-option="" value="eyeglasses">
                    <label for="select-dealer-option-eyeglasses">
    
    Eyeglasses
    
  </label>
                </div>

            </fieldset>
        </div>

        <div class='filter-controls__sort-wrapper select-tooltip js-select-tooltip'>
            <button class='filter-controls__button filter-controls__button--sort js-select-tooltip-trigger' aria-expanded='false'>
        <span class='filter-controls__label'>Sort by</span>
        <span class='filter-controls__icon'><svg class="icon icon--sort" alt="">
  <use xlink:href="/assets/icons/icons.svg#sort"></use>
</svg>
</span>
      </button>
            <select id='select-dealer-sorter' class='js-select-tooltip-select'>
        <option value='unique-sunglass-styles' selected='selected'>Unique Sunglass Styles</option>
        <option value='unique-eyeglass-styles'>Unique Eyeglass Styles</option>
        <option value='name-ascending'>Name (A-Z)</option>
        <option value='name-descending'>Name (Z-A)</option>
      </select>
            <div class='filter-controls__sort-tooltip tooltip js-select-tooltip-list'>
                <button class='js-select-tooltip-option' aria-pressed='true' data-value='unique-sunglass-styles'>Unique Sunglass Styles</button>
                <button class='js-select-tooltip-option' aria-pressed='false' data-value='unique-eyeglass-styles'>Unique Eyeglass Styles</button>
                <button class='js-select-tooltip-option' aria-pressed='false' data-value='name-ascending'>Name (A-Z)</button>
                <button class='js-select-tooltip-option' aria-pressed='false' data-value='name-descending'>Name (Z-A)</button>
            </div>
        </div>

        <hr class="header-body-divider">

        <div class='select-dealer__container' data-sortable>
            <div class='select-dealer__dealer' data-filter-item='Dean Optical Ltd 209 S La Salle St, Lbby 120, Chicago, IL, 60604-1436, United States' data-filter-option-sunglasses data-filter-option-eyeglasses data-sortable-item data-sortable-item-name='Dean Optical Ltd'
                data-sortable-item-unique-sunglass-styles='64' data-sortable-item-unique-eyeglass-styles='9'>
                <svg class="icon icon--action-location" alt="">
  <use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>

                <div class='select-dealer__body'>
                    <h3 class='select-dealer__name'>Dean Optical Ltd</h3>
                    <address class='select-dealer__address'>209 S La Salle St, Lbby 120, Chicago, IL, 60604-1436, United States</address>
                    <ul class='select-dealer__attributes'>
                        <li class='select-dealer__attributes-item' data-highlight-sunglasses>Sunglasses</li>
                        <li class='select-dealer__attributes-item' data-highlight-eyeglasses>Eyeglasses</li>
                    </ul>
                    <ul class='select-dealer__unique-styles-wrapper'>
                        <li class='select-dealer__unique-sunglass-styles'>
                            <svg class="icon icon--glasses-sun" alt="">
  <use xlink:href="/assets/icons/icons.svg#glasses-sun"></use>
</svg>

                            <span>64</span> Unique Sunglass Styles
                        </li>
                        <li class='select-dealer__unique-eyeglass-styles'>
                            <svg class="icon icon--glasses-frame" alt="">
  <use xlink:href="/assets/icons/icons.svg#glasses-frame"></use>
</svg>

                            <span>9</span> Unique Eyeglass Styles
                        </li>
                    </ul>
                    <a href='#' class='select-dealer__details-link button--plain-text'>
            Store details
            <svg class="icon icon--angle-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#angle-right"></use>
</svg>

          </a>
                </div>
            </div>
            <div class='select-dealer__dealer' data-filter-item='Rosyn Eye Care - B.O.T. 141 W Jackson Blvd, Chicago, IL, 60604-2992, United States' data-filter-option-sunglasses data-filter-option-sunglasses-with-prescription data-filter-option-eyeglasses data-sortable-item
                data-sortable-item-name='Rosyn Eye Care - B.O.T.' data-sortable-item-unique-sunglass-styles='54' data-sortable-item-unique-eyeglass-styles='24'>
                <svg class="icon icon--action-location" alt="">
  <use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>

                <div class='select-dealer__body'>
                    <h3 class='select-dealer__name'>Rosyn Eye Care - B.O.T.</h3>
                    <address class='select-dealer__address'>141 W Jackson Blvd, Chicago, IL, 60604-2992, United States</address>
                    <ul class='select-dealer__attributes'>
                        <li class='select-dealer__attributes-item' data-highlight-sunglasses>Sunglasses</li>
                        <li class='select-dealer__attributes-item' data-highlight-sunglasses-with-prescription>Sunglasses with prescription</li>
                        <li class='select-dealer__attributes-item' data-highlight-eyeglasses>Eyeglasses</li>
                    </ul>
                    <ul class='select-dealer__unique-styles-wrapper'>
                        <li class='select-dealer__unique-sunglass-styles'>
                            <svg class="icon icon--glasses-sun" alt="">
  <use xlink:href="/assets/icons/icons.svg#glasses-sun"></use>
</svg>

                            <span>54</span> Unique Sunglass Styles
                        </li>
                        <li class='select-dealer__unique-eyeglass-styles'>
                            <svg class="icon icon--glasses-frame" alt="">
  <use xlink:href="/assets/icons/icons.svg#glasses-frame"></use>
</svg>

                            <span>24</span> Unique Eyeglass Styles
                        </li>
                    </ul>
                    <a href='#' class='select-dealer__details-link button--plain-text'>
            Store details
            <svg class="icon icon--angle-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#angle-right"></use>
</svg>

          </a>
                </div>
            </div>
            <div class='select-dealer__dealer' data-filter-item='Eyelines 112 W Monroe St, Chicago, IL, 60603-1607, United States' data-filter-option-sunglasses data-filter-option-sunglasses-with-prescription data-sortable-item data-sortable-item-name='Eyelines'
                data-sortable-item-unique-sunglass-styles='18'>
                <svg class="icon icon--action-location" alt="">
  <use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>

                <div class='select-dealer__body'>
                    <h3 class='select-dealer__name'>Eyelines</h3>
                    <address class='select-dealer__address'>112 W Monroe St, Chicago, IL, 60603-1607, United States</address>
                    <ul class='select-dealer__attributes'>
                        <li class='select-dealer__attributes-item' data-highlight-sunglasses>Sunglasses</li>
                        <li class='select-dealer__attributes-item' data-highlight-sunglasses-with-prescription>Sunglasses with prescription</li>
                    </ul>
                    <ul class='select-dealer__unique-styles-wrapper'>
                        <li class='select-dealer__unique-sunglass-styles'>
                            <svg class="icon icon--glasses-sun" alt="">
  <use xlink:href="/assets/icons/icons.svg#glasses-sun"></use>
</svg>

                            <span>18</span> Unique Sunglass Styles
                        </li>
                    </ul>
                    <a href='#' class='select-dealer__details-link button--plain-text'>
            Store details
            <svg class="icon icon--angle-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#angle-right"></use>
</svg>

          </a>
                </div>
            </div>
            <div class='select-dealer__dealer' data-filter-item='Pelini Eyecare 328 S Michigan Ave, Chicago, IL, 60604-4201, United States' data-filter-option-sunglasses data-filter-option-sunglasses-with-prescription data-sortable-item data-sortable-item-name='Pelini Eyecare'
                data-sortable-item-unique-sunglass-styles='14'>
                <svg class="icon icon--action-location" alt="">
  <use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>

                <div class='select-dealer__body'>
                    <h3 class='select-dealer__name'>Pelini Eyecare</h3>
                    <address class='select-dealer__address'>328 S Michigan Ave, Chicago, IL, 60604-4201, United States</address>
                    <ul class='select-dealer__attributes'>
                        <li class='select-dealer__attributes-item' data-highlight-sunglasses>Sunglasses</li>
                        <li class='select-dealer__attributes-item' data-highlight-sunglasses-with-prescription>Sunglasses with prescription</li>
                    </ul>
                    <ul class='select-dealer__unique-styles-wrapper'>
                        <li class='select-dealer__unique-sunglass-styles'>
                            <svg class="icon icon--glasses-sun" alt="">
  <use xlink:href="/assets/icons/icons.svg#glasses-sun"></use>
</svg>

                            <span>14</span> Unique Sunglass Styles
                        </li>
                    </ul>
                    <a href='#' class='select-dealer__details-link button--plain-text'>
            Store details
            <svg class="icon icon--angle-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#angle-right"></use>
</svg>

          </a>
                </div>
            </div>
            <div class='select-dealer__dealer' data-filter-item='My Eye Dr - East Madison 328 S Michigan Ave, Chicago, IL, 60604-4201, United States' data-filter-option-sunglasses data-filter-option-sunglasses-with-prescription data-sortable-item data-sortable-item-name='My Eye Dr - East Madison'
                data-sortable-item-unique-sunglass-styles='5'>
                <svg class="icon icon--action-location" alt="">
  <use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>

                <div class='select-dealer__body'>
                    <h3 class='select-dealer__name'>My Eye Dr - East Madison</h3>
                    <address class='select-dealer__address'>328 S Michigan Ave, Chicago, IL, 60604-4201, United States</address>
                    <ul class='select-dealer__attributes'>
                        <li class='select-dealer__attributes-item' data-highlight-sunglasses>Sunglasses</li>
                        <li class='select-dealer__attributes-item' data-highlight-sunglasses-with-prescription>Sunglasses with prescription</li>
                    </ul>
                    <ul class='select-dealer__unique-styles-wrapper'>
                        <li class='select-dealer__unique-sunglass-styles'>
                            <svg class="icon icon--glasses-sun" alt="">
  <use xlink:href="/assets/icons/icons.svg#glasses-sun"></use>
</svg>

                            <span>5</span> Unique Sunglass Styles
                        </li>
                    </ul>
                    <a href='#' class='select-dealer__details-link button--plain-text'>
            Store details
            <svg class="icon icon--angle-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#angle-right"></use>
</svg>

          </a>
                </div>
            </div>
            <div class='select-dealer__dealer' data-filter-item='Visionary Eyecare 328 S Michigan Ave, Chicago, IL, 60604-4201, United States' data-filter-option-sunglasses data-filter-option-sunglasses-with-prescription data-sortable-item data-sortable-item-name='Visionary Eyecare'
                data-sortable-item-unique-sunglass-styles='3'>
                <svg class="icon icon--action-location" alt="">
  <use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>

                <div class='select-dealer__body'>
                    <h3 class='select-dealer__name'>Visionary Eyecare</h3>
                    <address class='select-dealer__address'>328 S Michigan Ave, Chicago, IL, 60604-4201, United States</address>
                    <ul class='select-dealer__attributes'>
                        <li class='select-dealer__attributes-item' data-highlight-sunglasses>Sunglasses</li>
                        <li class='select-dealer__attributes-item' data-highlight-sunglasses-with-prescription>Sunglasses with prescription</li>
                    </ul>
                    <ul class='select-dealer__unique-styles-wrapper'>
                        <li class='select-dealer__unique-sunglass-styles'>
                            <svg class="icon icon--glasses-sun" alt="">
  <use xlink:href="/assets/icons/icons.svg#glasses-sun"></use>
</svg>

                            <span>3</span> Unique Sunglass Styles
                        </li>
                    </ul>
                    <a href='#' class='select-dealer__details-link button--plain-text'>
            Store details
            <svg class="icon icon--angle-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#angle-right"></use>
</svg>

          </a>
                </div>
            </div>
        </div>
    </div>
</main>
<div class="subscribe">
    <div class="u-page-width-max">
        <div class="subscribe__text">
            <p class="subscribe__header">Subscribe to our &#x27;ohana</p>
            <span class="subscribe__description">Keep up with the Latest Products and News.</span>
        </div>
        <div class="subscribe-form-wrapper subscribe-form-wrapper--default js-subscribe-form js-subscribe-form--default">
            <form class="subscribe-form">
                <label class="subscribe-form__label">
      <span class="u-visually-hidden">Subscribe</span>
      <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Your Email" autocomplete="email">
    </label>
                <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail" alt="">
  <use xlink:href="/assets/icons/icons.svg#submit-mail"></use>
</svg>

    </button>
            </form>
            <div class="subscribe-form-status">
                <span class="subscribe-form-status__message js-subscribe-status-message"></span>
                <span class="subscribe-form-status__close js-subscribe-status-close-button">
      <svg class="icon icon--close-large" alt="">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

    </span>
            </div>
            <span class="subscribe-form-legal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="subscribe-form-legal__link" href="#">Privacy Policy</a>
  </span>
        </div>

    </div>
</div>

<footer class="footer footer--default">
    <div class="footer-nav u-page-width-max">
        <a class="footer-nav__action footer-nav__action--phone" href="tel:+1800229933">
      1-888-666-5905
      <svg class="icon icon--action-phone" alt="">
  <use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>

    </a>
        <a class="footer-nav__action footer-nav__action--contact" href="#">
      Contact Us
      <svg class="icon icon--action-mail" alt="">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

    </a>
        <a class="footer-nav__action footer-nav__action--retailers" href="#">
      Find a Retailer
      <svg class="icon icon--action-location" alt="">
  <use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>

    </a>
        <div class="footer-nav__menus">
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <h6 class="footer-nav__menu-header">Maui Jim</h6>
                    <button class="footer-nav__menu-button js-footer-nav-button" aria-disabled="false" aria-controls="maui-jim" aria-expanded="false">
            Maui Jim
            <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items" id="maui-jim">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">About Us</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Contact Us</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Technology</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Golf Events</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Corporate Gifts</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link js-modal-open-link" href="#" data-modal-id="data-protection">Careers</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Austine Wood Comarow Polage ® Art</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Trade Login</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <h6 class="footer-nav__menu-header">Customer Service</h6>
                    <button class="footer-nav__menu-button js-footer-nav-button" aria-disabled="false" aria-controls="customer-service" aria-expanded="false">
            Customer Service
            <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items" id="customer-service">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Order Status</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Repairs</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Returns</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Product Registration</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Prescription</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Retailers</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">FAQs</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Shipping Information</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <h6 class="footer-nav__menu-header">Legal</h6>
                    <button class="footer-nav__menu-button js-footer-nav-button" aria-disabled="false" aria-controls="legal" aria-expanded="false">
            Legal
            <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items" id="legal">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Terms of Use</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Privacy Policy</a>
                        </li>
                    </ul>
                </div>
                <div class="footer-nav__menu js-footer-nav-menu">
                    <h6 class="footer-nav__menu-header">Gift Cards</h6>
                    <button class="footer-nav__menu-button js-footer-nav-button" aria-disabled="false" aria-controls="gift-cards" aria-expanded="false">
            Gift Cards
            <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items" id="gift-cards">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">VIP &amp; Gift Cardholder</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Shop Gift Card</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-nav__forms">
            <form class="footer__retailer-form">
                <label class="footer__retailer-label" for="zipcode_or_city">
          <span>Retailers</span>
          <input id="zipcode_or_city" class="footer__retailer-input" name="footer__retailer-input" type="text" placeholder="ZIP code or City" />
          <button class="footer__retailer-submit" type="submit">
            <svg class="icon icon--angle-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#angle-right"></use>
</svg>

          </button>
        </label>
                <a href="#" class="footer__retailer-link">
          Browse retailers by country
          <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
            </form>
            <div class="subscribe-form-wrapper subscribe-form-wrapper--mini js-subscribe-form js-subscribe-form--default">
                <form class="subscribe-form">
                    <label class="subscribe-form__label">
      <span class="u-visually-hidden">Subscribe</span>
      <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Subscribe to Our &#x27;Ohana" autocomplete="email">
    </label>
                    <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail" alt="">
  <use xlink:href="/assets/icons/icons.svg#submit-mail"></use>
</svg>

    </button>
                </form>
                <div class="subscribe-form-status">
                    <span class="subscribe-form-status__message js-subscribe-status-message"></span>
                    <span class="subscribe-form-status__close js-subscribe-status-close-button">
      <svg class="icon icon--close-large" alt="">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

    </span>
                </div>
                <span class="subscribe-form-legal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="subscribe-form-legal__link" href="#">Privacy Policy</a>
  </span>
            </div>

        </div>
    </div>
    <div class="footer__bottom">
        <div class="u-page-width-max">
            <button class="footer__geo footer__geo--country js-modal-open-link" data-modal-id="country-selector" aria-label="Current country is United Arab Emirates. Click to select country.">
        <span class="footer__geo-label">Country:</span>
        <span class="footer__geo-current">
          United Arab Emirates
          <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </span>
      </button>
            <button class="footer__geo footer__geo--language js-modal-open-link" data-modal-id="language-selector" aria-label="Current language is English. Click to select language.">
        <span class="footer__geo-current">
          English
          <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </span>
      </button>
            <ul class="social-icons">
                <li class="social-icons__item social-icons__item--social-youtube">
                    <a class="social-icons__link" href="#" aria-label="social-youtube"><svg class="icon icon--social-youtube" alt="">
  <use xlink:href="/assets/icons/icons.svg#social-youtube"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item social-icons__item--social-linkedin">
                    <a class="social-icons__link" href="#" aria-label="social-linkedin"><svg class="icon icon--social-linkedin" alt="">
  <use xlink:href="/assets/icons/icons.svg#social-linkedin"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item social-icons__item--social-twitter">
                    <a class="social-icons__link" href="#" aria-label="social-twitter"><svg class="icon icon--social-twitter" alt="">
  <use xlink:href="/assets/icons/icons.svg#social-twitter"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item social-icons__item--social-facebook">
                    <a class="social-icons__link" href="#" aria-label="social-facebook"><svg class="icon icon--social-facebook" alt="">
  <use xlink:href="/assets/icons/icons.svg#social-facebook"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item social-icons__item--social-instagram">
                    <a class="social-icons__link" href="#" aria-label="social-instagram"><svg class="icon icon--social-instagram" alt="">
  <use xlink:href="/assets/icons/icons.svg#social-instagram"></use>
</svg>
</a>
                </li>
            </ul>

        </div>
    </div>
    <div class="footer__copyright">
        <img class="footer__copyright-logo" src="/assets/images/mauijim-brand-logo-monochromatic.svg">
        <span class="footer__copyright-text">©2016 Maui Jim, Inc. Lahana, Hawaii</span>
    </div>
</footer>
{{render (dynamicComponent header)}}
<main id='main-section' class='main main--dealer-profiles'>
  {{#each topComponents}}
  {{render (dynamicVariant component variant) context merge=true}}
  {{/each}}
  <div class='dealer-profiles__container dealer-profiles__container--dealer'>
    {{#if linkBackTo}}
    <a href='{{linkBackTo.url}}' class='dealer-profiles__back-to'>
      {{linkBackTo.title}}
    </a>
    {{/if}}
    {{#each components}}
    {{render (dynamicVariant component variant) context merge=true}}
    {{/each}}

    <div class='select-dealer__options'>
      <span data-mobile-tooltip-toggle>
        <span class='select-dealer__options-icon'>
          {{render (dynamicVariant 'icons' 'filters')}}
        </span>
        <span class='select-dealer__options-label'>Filter by</span>
      </span>
      <fieldset id='select-dealer-options-group' class='select-dealer__options-group' data-mobile-tooltip>
        {{#each options}}
        {{render '@checkbox' this}}
        {{/each}}
      </fieldset>
    </div>

    <div class='filter-controls__sort-wrapper select-tooltip js-select-tooltip'>
      <button class='filter-controls__button filter-controls__button--sort js-select-tooltip-trigger' aria-expanded='false'>
        <span class='filter-controls__label'>Sort by</span>
        <span class='filter-controls__icon'>{{render '@icons--sort'}}</span>
      </button>
      <select id='select-dealer-sorter' class='js-select-tooltip-select'>
        {{#each sortOptions}}
        <option value='{{value}}'{{#if default}} selected='selected'{{/if}}>{{label}}</option>
        {{/each}}
      </select>
      <div class='filter-controls__sort-tooltip tooltip js-select-tooltip-list'>
        {{#each sortOptions}}
        <button class='js-select-tooltip-option' aria-pressed='{{#if default}}true{{else}}false{{/if}}' data-value='{{value}}'>{{label}}</button>
        {{/each}}
      </div>
    </div>

    <hr class="header-body-divider">

    <div class='select-dealer__container' data-sortable>
      {{#each dealers}}
      <div class='select-dealer__dealer' data-filter-item='{{this.name}} {{this.address}}'
        {{#each attributes}} data-filter-option-{{this.slug}}{{/each}}
        data-sortable-item data-sortable-item-name='{{this.name}}'
        {{#if uniqueSunglassStyles}}
        data-sortable-item-unique-sunglass-styles='{{this.uniqueSunglassStyles}}'
        {{/if}}
        {{#if uniqueEyeglassStyles}}
        data-sortable-item-unique-eyeglass-styles='{{this.uniqueEyeglassStyles}}'
        {{/if}}
        >
        {{render '@icons--action-location'}}
        <div class='select-dealer__body'>
          <h3 class='select-dealer__name'>{{this.name}}</h3>
          <address class='select-dealer__address'>{{this.address}}</address>
          <ul class='select-dealer__attributes'>
            {{#each this.attributes}}
            <li class='select-dealer__attributes-item' data-highlight-{{this.slug}}>{{this.label}}</li>
            {{/each}}
          </ul>
          {{#ifor this.uniqueSunglassStyles this.uniqueEyeglassStyles}}
          <ul class='select-dealer__unique-styles-wrapper'>
            {{#if this.uniqueSunglassStyles}}
            <li class='select-dealer__unique-sunglass-styles'>
              {{render '@icons--glasses-sun'}}
              <span>{{this.uniqueSunglassStyles}}</span> Unique Sunglass Styles
            </li>
            {{/if}}
            {{#if this.uniqueEyeglassStyles}}
            <li class='select-dealer__unique-eyeglass-styles'>
              {{render '@icons--glasses-frame'}}
              <span>{{this.uniqueEyeglassStyles}}</span> Unique Eyeglass Styles
            </li>
            {{/if}}
          </ul>
          {{/ifor}}
          <a href='#' class='select-dealer__details-link button--plain-text'>
            Store details
            {{render '@icons--angle-right'}}
          </a>
        </div>
      </div>
      {{/each}}
    </div>
  </div>
</main>
{{render '@subscribe'}}
{{render '@footer'}}
{
  "snapshot": true,
  "pageCss": [
    "dealer-profiles"
  ],
  "header": "header--zeal--empty-cart",
  "linkBackTo": {
    "url": "/components/preview/select-city",
    "title": "Change city"
  },
  "topComponents": [
    {
      "component": "breadcrumb",
      "variant": "default",
      "context": {
        "items": [
          {
            "label": "Zeal",
            "path": "#"
          },
          {
            "label": "Retailers",
            "path": "#"
          },
          {
            "label": "United States",
            "path": "#"
          },
          {
            "label": "Illinois",
            "path": "#"
          },
          {
            "label": "Chicago, IL",
            "current": true
          }
        ]
      }
    }
  ],
  "components": [
    {
      "component": "page-title",
      "variant": "default",
      "context": {
        "value": "Chicago, IL",
        "modifiers": [
          "dealer-profile"
        ]
      }
    },
    {
      "component": "section-title",
      "variant": "default",
      "context": {
        "value": "Authorized Maui Jim Locations",
        "modifiers": [
          "dealer-profile"
        ]
      }
    },
    {
      "component": "search-standalone",
      "variant": "default",
      "context": {
        "title": null,
        "placeholder": "Search store by name or address",
        "label": false,
        "dataAttributes": [
          {
            "name": "data-filter-input",
            "value": true
          }
        ]
      }
    }
  ],
  "options": [
    {
      "id": "select-dealer-option-sunglasses",
      "label": "Sunglasses",
      "name": "sunglasses",
      "modifier": "default",
      "checked": true,
      "attributes": [
        {
          "name": "data-filter-option",
          "value": ""
        },
        {
          "name": "value",
          "value": "sunglasses"
        }
      ]
    },
    {
      "id": "select-dealer-option-sunglasses-with-prescription",
      "label": "Sunglasses with Prescription",
      "name": "sunglasses-with-prescription",
      "modifier": "default",
      "attributes": [
        {
          "name": "data-filter-option",
          "value": ""
        },
        {
          "name": "value",
          "value": "sunglasses-with-prescription"
        }
      ]
    },
    {
      "id": "select-dealer-option-eyeglasses",
      "label": "Eyeglasses",
      "name": "eyeglasses",
      "modifier": "default",
      "attributes": [
        {
          "name": "data-filter-option",
          "value": ""
        },
        {
          "name": "value",
          "value": "eyeglasses"
        }
      ]
    }
  ],
  "sortOptions": [
    {
      "value": "unique-sunglass-styles",
      "label": "Unique Sunglass Styles",
      "default": true
    },
    {
      "value": "unique-eyeglass-styles",
      "label": "Unique Eyeglass Styles"
    },
    {
      "value": "name-ascending",
      "label": "Name (A-Z)"
    },
    {
      "value": "name-descending",
      "label": "Name (Z-A)"
    }
  ],
  "dealers": [
    {
      "name": "Dean Optical Ltd",
      "address": "209 S La Salle St, Lbby 120, Chicago, IL, 60604-1436, United States",
      "attributes": [
        {
          "label": "Sunglasses",
          "slug": "sunglasses"
        },
        {
          "label": "Eyeglasses",
          "slug": "eyeglasses"
        }
      ],
      "uniqueSunglassStyles": 64,
      "uniqueEyeglassStyles": 9
    },
    {
      "name": "Rosyn Eye Care - B.O.T.",
      "address": "141 W Jackson Blvd, Chicago, IL, 60604-2992, United States",
      "attributes": [
        {
          "label": "Sunglasses",
          "slug": "sunglasses"
        },
        {
          "label": "Sunglasses with prescription",
          "slug": "sunglasses-with-prescription"
        },
        {
          "label": "Eyeglasses",
          "slug": "eyeglasses"
        }
      ],
      "uniqueSunglassStyles": 54,
      "uniqueEyeglassStyles": 24
    },
    {
      "name": "Eyelines",
      "address": "112 W Monroe St, Chicago, IL, 60603-1607, United States",
      "attributes": [
        {
          "label": "Sunglasses",
          "slug": "sunglasses"
        },
        {
          "label": "Sunglasses with prescription",
          "slug": "sunglasses-with-prescription"
        }
      ],
      "uniqueSunglassStyles": 18
    },
    {
      "name": "Pelini Eyecare",
      "address": "328 S Michigan Ave, Chicago, IL, 60604-4201, United States",
      "attributes": [
        {
          "label": "Sunglasses",
          "slug": "sunglasses"
        },
        {
          "label": "Sunglasses with prescription",
          "slug": "sunglasses-with-prescription"
        }
      ],
      "uniqueSunglassStyles": 14
    },
    {
      "name": "My Eye Dr - East Madison",
      "address": "328 S Michigan Ave, Chicago, IL, 60604-4201, United States",
      "attributes": [
        {
          "label": "Sunglasses",
          "slug": "sunglasses"
        },
        {
          "label": "Sunglasses with prescription",
          "slug": "sunglasses-with-prescription"
        }
      ],
      "uniqueSunglassStyles": 5
    },
    {
      "name": "Visionary Eyecare",
      "address": "328 S Michigan Ave, Chicago, IL, 60604-4201, United States",
      "attributes": [
        {
          "label": "Sunglasses",
          "slug": "sunglasses"
        },
        {
          "label": "Sunglasses with prescription",
          "slug": "sunglasses-with-prescription"
        }
      ],
      "uniqueSunglassStyles": 3
    }
  ]
}

There are no notes for this item.