<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-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">
  <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 Cart" class="header-flyout__close js-header-cart-close-button">
    <svg class="icon icon--close-large">
  <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">
                                <input class="header-search__input js-header-search-input" type="text" placeholder="Search on Maui Jim">
                            </form>
                            <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="" sizes="(min-width: 681px) vw, vw"
            srcset=" w,  w">
        </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="" sizes="(min-width: 681px) vw, vw"
            srcset=" w,  w">
        </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="" sizes="(min-width: 681px) vw, vw"
            srcset=" w,  w">
        </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">
  <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">
  <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">
  <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-flyout__link header-flyout__link--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>

                <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">
  <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">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</span>
                    </div>
                    <div class="header-flyout__content">
                        <div class="header-cart header-cart--maui-jim--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/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" 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">
          <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>

<div class="secondary-hero">
    <img class="secondary-hero__image u-object-fit-cover" src="/assets/images/hero-logo-large.jpg" sizes="(min-width: 1420px) 1420px, vw" srcset="/assets/images/hero-logo-small.jpg 432w, /assets/images/hero-logo-large.jpg 1420w">
    <div class="secondary-hero__copy">
        <img class="secondary-hero__logo" src="/assets/images/mauijim-brand-logo-large-white.png" alt="Maui Jim">
    </div>
</div>

<main id="main-section" class="main u-page-width-max">
    <div class="l-homepage-shop-diptych">
        <div class="shop-diptych u-block u-page-width-max-gutters">
            <div class="shop-diptych__item shop-diptych__item--sunglasses">
                <a class="shop-diptych__link" href="#">
                    <h2 class="shop-diptych__title">Sunglasses</h2>
                    <img class="shop-diptych__image" src="/assets/images/diptych-sunglasses-large.png" sizes="50vw" srcset="/assets/images/diptych-sunglasses-small.png 320w, /assets/images/diptych-sunglasses-large.png 580w">
                    <button class="shop-diptych__call-to-action button button--primary" tabindex="-1">Shop</button>
                </a>
            </div>
            <div class="shop-diptych__item shop-diptych__item--eyeglasses">
                <a class="shop-diptych__link" href="#">
                    <h2 class="shop-diptych__title">Eyeglasses</h2>
                    <img class="shop-diptych__image" src="/assets/images/diptych-eyeglasses-large.png" sizes="50vw" srcset="/assets/images/diptych-eyeglasses-small.png 320w, /assets/images/diptych-eyeglasses-large.png 580w">
                    <button class="shop-diptych__call-to-action button button--primary" tabindex="-1">Shop</button>
                </a>
            </div>
        </div>

    </div>
    <div class="l-homepage-mosaic-card">
        <div class="mosaic-card mosaic-card--call-to-action u-block u-page-width-max-gutters">
            <div class="mosaic-card__pair mosaic-card__pair--image-right">
                <a class="mosaic-card__link js-mosaic-card__link" href="#">
                    <div class="mosaic-card__image-container">
                        <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-1-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-1-small.jpg 300w, /assets/images/mosaic-card-1-medium.jpg 335w, /assets/images/mosaic-card-1-max.jpg 474w">
                    </div>
                    <div class="mosaic-card__text">
                        <span class="mosaic-card__prefix">Blue Hawaii</span>
                        <h2 class="mosaic-card__headline">Maui Jim&#x27;s Blue Mirror Lens</h2>
                        <button class="mosaic-card__call-to-action button button--outlined js-mosaic-card__call-to-action" href="#" tabindex="-1">Discover the Vibrant Blue</button>
                    </div>
                </a>
            </div>
            <div class="mosaic-card__pair mosaic-card__pair--image-left">
                <a class="mosaic-card__link js-mosaic-card__link" href="#">
                    <div class="mosaic-card__image-container">
                        <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-2-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-2-small.jpg 300w, /assets/images/mosaic-card-2-medium.jpg 335w, /assets/images/mosaic-card-2-max.jpg 474w">
                    </div>
                    <div class="mosaic-card__text">
                        <span class="mosaic-card__prefix">New Arrivals</span>
                        <h2 class="mosaic-card__headline">Color. Clarity. Detail.</h2>
                        <button class="mosaic-card__call-to-action button button--outlined js-mosaic-card__call-to-action" href="#" tabindex="-1">Shop New Arrivals</button>
                    </div>
                </a>
            </div>
            <div class="mosaic-card__pair mosaic-card__pair--image-bottom">
                <a class="mosaic-card__link js-mosaic-card__link" href="#">
                    <div class="mosaic-card__image-container">
                        <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-3-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-3-small.jpg 300w, /assets/images/mosaic-card-3-medium.jpg 335w, /assets/images/mosaic-card-3-max.jpg 474w">
                    </div>
                    <div class="mosaic-card__text">
                        <span class="mosaic-card__prefix">Classic Collection</span>
                        <h2 class="mosaic-card__headline">KAWIKA</h2>
                        <button class="mosaic-card__call-to-action button button--outlined js-mosaic-card__call-to-action" href="#" tabindex="-1">View Product</button>
                    </div>
                </a>
            </div>
        </div>

    </div>
    <div class="l-homepage-popular-items">
        <div class="popular-items u-block u-page-width-max-gutters">
            <h2 class="popular-items__title">Most Popular Items</h2>
            <div class="popular-items__items cards cards--even">
                <div class="card js-card" aria-label="PEAHI">
                    <div class="card__inner">
                        <a class="card__link js-card-url" href="#202-02" aria-label="View Gloss Black product page" data-202-02-url="#202-02" data-B202-2M-url="#B202-2M" data-H202-10-url="#H202-10" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71"
                            data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-202-02-stock="true" data-B202-2M-stock="true" data-H202-10-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true"
                            data-HT202-71-stock="true" data-H202-2M-2-stock="true" data-H202-70-2-stock="true" data-HT202-71-2-stock="true">
            <img class="card__image js-card-image" data-angle="front"
                   src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340" data-variant="202-02" alt="Gloss Black  Front View" data-style="" data-color="Gloss Black" 
                   data-202-02-front="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340"  data-202-02-angle="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;340"  data-202-02-side="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;340" 
                            
                   data-B202-2M-front="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&amp;wid&#x3D;340"  data-B202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-B202-2M-side="https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$&amp;wid&#x3D;340" 
                            
                   data-H202-10-front="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;340"  data-H202-10-angle="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-10-side="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;340" 
                            
                   data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                            
                   data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                            
                   data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
                            
                   data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                            
                   data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                            
                   data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
                >
            <span class="card__status js-card-status" data-202-02-status="" data-B202-2M-status="New" data-H202-10-status="" data-H202-2M-status="" data-H202-70-status="" data-HT202-71-status="New" data-H202-2M-2-status="" data-H202-70-2-status="" data-HT202-71-2-status="">
                
                
                
                
                
                
                
                
                
            </span>
            <p class="card__title">PEAHI</p>
            <span class="card__price js-card-price" data-202-02-price="$149.00" data-B202-2M-price="$189.00" data-H202-10-price="$229.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
              $149.00
            </span>
          </a>
                        <div class="card__variants-wrapper">
                            <ul class="card__variants js-card-variants">
                                <li class="card__variant js-card-variant js-card-variant--active" data-id="202-02">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Gloss Black</button>
                                </li>
                                <li class="card__variant js-card-variant" data-id="B202-2M">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                                </li>
                                <li class="card__variant js-card-variant" data-id="H202-10">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#303032;background-image:url(https://mauijim.scene7.com/is/image/mauijim/10);" type="button">Dark Tortoise</button>
                                </li>
                                <li class="card__variant js-card-variant" data-id="H202-2M">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                                </li>
                                <li class="card__variant js-card-variant" data-id="H202-70">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#7d4a07;" type="button">Redfish</button>
                                </li>
                                <li class="card__variant js-card-variant" data-id="HT202-71">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#218b16;" type="button">MahiMahi</button>
                                </li>
                                <li class="card__variant js-card-variant" data-id="H202-2M-2">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                                </li>
                                <li class="card__variant js-card-variant" data-id="H202-70-2">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#7d4a07;" type="button">Redfish</button>
                                </li>
                                <li class="card__variant js-card-variant" data-id="HT202-71-2">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#218b16;" type="button">MahiMahi</button>
                                </li>
                            </ul>
                            <div class="card__variants-controls js-card-variants-controls">
                                <button class="card__variants-control card__variants-control--prev" type="button">
                <span class="u-visually-hidden">Previous</span>
                <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

              </button>
                                <button class="card__variants-control card__variants-control--next" type="button">
                <span class="u-visually-hidden">Next</span>
                <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

              </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card js-card" aria-label="WATERWAYS">
                    <div class="card__inner">
                        <a class="card__link js-card-url" href="#HTS267-15C" aria-label="View Olive Stripe product page" data-HTS267-15C-url="#HTS267-15C" data-HS267-10M-url="#HS267-10M" data-GS267-02MR-url="#GS267-02MR" data-HTS267-15C-stock="true" data-HS267-10M-stock="true"
                            data-GS267-02MR-stock="true">
            <img class="card__image js-card-image" data-angle="front"
                   src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;340" data-variant="HTS267-15C" alt="Olive Stripe  Front View" data-style="" data-color="Olive Stripe" 
                   data-HTS267-15C-front="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;340"  data-HTS267-15C-angle="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_quarter?$config1800$&amp;wid&#x3D;340"  data-HTS267-15C-side="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_side?$config1800$&amp;wid&#x3D;340" 
                            
                   data-HS267-10M-front="https://s7d2.scene7.com/is/image/mauijim/HS267-10M_front?$config1800$&amp;wid&#x3D;340"  data-HS267-10M-angle="https://s7d2.scene7.com/is/image/mauijim/HS267-10M_quarter?$config1800$&amp;wid&#x3D;340"  data-HS267-10M-side="https://s7d2.scene7.com/is/image/mauijim/HS267-10M_side?$config1800$&amp;wid&#x3D;340" 
                            
                   data-GS267-02MR-front="https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_front?$config1800$&amp;wid&#x3D;340"  data-GS267-02MR-angle="https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_quarter?$config1800$&amp;wid&#x3D;340"  data-GS267-02MR-side="https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_side?$config1800$&amp;wid&#x3D;340" 
                >
            <span class="card__status js-card-status" data-HTS267-15C-status="" data-HS267-10M-status="" data-GS267-02MR-status="">
                
                
                
            </span>
            <p class="card__title">WATERWAYS</p>
            <span class="card__price js-card-price" data-HTS267-15C-price="$219.00" data-HS267-10M-price="$229.00" data-GS267-02MR-price="$239.00">
              $219.00
            </span>
          </a>
                        <div class="card__variants-wrapper">
                            <ul class="card__variants js-card-variants">
                                <li class="card__variant js-card-variant js-card-variant--active" data-id="HTS267-15C">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#808000;" type="button">Olive Stripe</button>
                                </li>
                                <li class="card__variant js-card-variant" data-id="HS267-10M">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#303032;" type="button">Matte Tortoise</button>
                                </li>
                                <li class="card__variant js-card-variant" data-id="GS267-02MR">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black Rubber</button>
                                </li>
                            </ul>
                            <div class="card__variants-controls js-card-variants-controls">
                                <button class="card__variants-control card__variants-control--prev" type="button">
                <span class="u-visually-hidden">Previous</span>
                <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

              </button>
                                <button class="card__variants-control card__variants-control--next" type="button">
                <span class="u-visually-hidden">Next</span>
                <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

              </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card js-card" aria-label="KAWIKA">
                    <div class="card__inner">
                        <a class="card__link js-card-url" href="#H257-16C" aria-label="View Tortoise with Antique Gold product page" data-H257-16C-url="#H257-16C" data-B257-05CR-url="#B257-05CR" data-257-17C-url="#257-17C" data-H257-16C-stock="true" data-B257-05CR-stock="true"
                            data-257-17C-stock="true">
            <img class="card__image js-card-image" data-angle="front"
                   src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;340" data-variant="H257-16C" alt="Tortoise with Antique Gold  Front View" data-style="" data-color="Tortoise with Antique Gold" 
                   data-H257-16C-front="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;340"  data-H257-16C-angle="https://s7d2.scene7.com/is/image/mauijim/H257-16C_quarter?$config1800$&amp;wid&#x3D;340"  data-H257-16C-side="https://s7d2.scene7.com/is/image/mauijim/H257-16C_side?$config1800$&amp;wid&#x3D;340" 
                            
                   data-B257-05CR-front="https://s7d2.scene7.com/is/image/mauijim/B257-05CR_front?$config1800$&amp;wid&#x3D;340"  data-B257-05CR-angle="https://s7d2.scene7.com/is/image/mauijim/B257-05CR_quarter?$config1800$&amp;wid&#x3D;340"  data-B257-05CR-side="https://s7d2.scene7.com/is/image/mauijim/B257-05CR_side?$config1800$&amp;wid&#x3D;340" 
                            
                   data-257-17C-front="https://s7d2.scene7.com/is/image/mauijim/257-17C_front?$config1800$&amp;wid&#x3D;340"  data-257-17C-angle="https://s7d2.scene7.com/is/image/mauijim/257-17C_quarter?$config1800$&amp;wid&#x3D;340"  data-257-17C-side="https://s7d2.scene7.com/is/image/mauijim/257-17C_side?$config1800$&amp;wid&#x3D;340" 
                >
            <span class="card__status js-card-status" data-H257-16C-status="" data-B257-05CR-status="" data-257-17C-status="">
                
                
                
            </span>
            <p class="card__title">KAWIKA</p>
            <span class="card__price js-card-price" data-H257-16C-price="$299.00" data-B257-05CR-price="$299.00" data-257-17C-price="$299.00">
              $299.00
            </span>
          </a>
                        <div class="card__variants-wrapper">
                            <ul class="card__variants js-card-variants">
                                <li class="card__variant js-card-variant js-card-variant--active" data-id="H257-16C">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#e0d468;" type="button">Tortoise with Antique Gold</button>
                                </li>
                                <li class="card__variant js-card-variant" data-id="B257-05CR">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#fff; border: 1px solid #dedede;" type="button">Crystal</button>
                                </li>
                                <li class="card__variant js-card-variant" data-id="257-17C">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#808080;" type="button">Black Gloss with Antique Pewter</button>
                                </li>
                            </ul>
                            <div class="card__variants-controls js-card-variants-controls">
                                <button class="card__variants-control card__variants-control--prev" type="button">
                <span class="u-visually-hidden">Previous</span>
                <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

              </button>
                                <button class="card__variants-control card__variants-control--next" type="button">
                <span class="u-visually-hidden">Next</span>
                <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

              </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card js-card" aria-label="VOYAGER">
                    <div class="card__inner">
                        <a class="card__link js-card-url" href="#H178-10" aria-label="View Tortoise product page" data-H178-10-url="#H178-10" data-178-02-url="#178-02" data-H178-10-stock="true" data-178-02-stock="true">
            <img class="card__image js-card-image" data-angle="front"
                   src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;340" data-variant="H178-10" alt="Tortoise  Front View" data-style="" data-color="Tortoise" 
                   data-H178-10-front="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;340"  data-H178-10-angle="https://s7d2.scene7.com/is/image/mauijim/H178-10_quarter?$config1800$&amp;wid&#x3D;340"  data-H178-10-side="https://s7d2.scene7.com/is/image/mauijim/H178-10_side?$config1800$&amp;wid&#x3D;340" 
                            
                   data-178-02-front="https://s7d2.scene7.com/is/image/mauijim/178-02_front?$config1800$&amp;wid&#x3D;340"  data-178-02-angle="https://s7d2.scene7.com/is/image/mauijim/178-02_quarter?$config1800$&amp;wid&#x3D;340"  data-178-02-side="https://s7d2.scene7.com/is/image/mauijim/178-02_side?$config1800$&amp;wid&#x3D;340" 
                >
            <span class="card__status js-card-status" data-H178-10-status="New" data-178-02-status="New">
                New
                
            </span>
            <p class="card__title">VOYAGER</p>
            <span class="card__price js-card-price" data-H178-10-price="$219.00" data-178-02-price="$219.00">
              $219.00
            </span>
          </a>
                        <div class="card__variants-wrapper">
                            <ul class="card__variants js-card-variants">
                                <li class="card__variant js-card-variant js-card-variant--active" data-id="H178-10">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#303032;" type="button">Tortoise</button>
                                </li>
                                <li class="card__variant js-card-variant" data-id="178-02">
                                    <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Gloss Black</button>
                                </li>
                            </ul>
                            <div class="card__variants-controls js-card-variants-controls">
                                <button class="card__variants-control card__variants-control--prev" type="button">
                <span class="u-visually-hidden">Previous</span>
                <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

              </button>
                                <button class="card__variants-control card__variants-control--next" type="button">
                <span class="u-visually-hidden">Next</span>
                <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

              </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <a class="popular-items__call-to-action button button--outlined" href="#">View Popular Items</a>
        </div>

    </div>
    <div class="l-homepage-big-card">
        <div class="big-card big-card--image-left-landscape u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-landscape-left-large.jpg" sizes="(min-width: 681px) 66vw, 100vw" srcset="/assets/images/big-card-landscape-left-small.jpg 400w, /assets/images/big-card-landscape-left-medium.jpg 710w, /assets/images/big-card-landscape-left-large.jpg 947w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">Monstera Leaf</span>
                    <h2 class="big-card__headline">Indulge in 24K Luxury</h2>
                    <button class="big-card__call-to-action button button--outlined" tabindex="-1">Learn More</button>
                </div>
            </a>
        </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">
                <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Your Email" autocomplete="email">
                <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail">
  <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">
  <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">
  <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">
  <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">
  <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">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Maui Jim
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

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

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

          </button>
                    <ul class="footer-nav__menu-items">
                        <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">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Customer Service
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

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

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

          </button>
                    <ul class="footer-nav__menu-items">
                        <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">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Legal
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

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

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

          </button>
                    <ul class="footer-nav__menu-items">
                        <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">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Gift Cards
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

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

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

          </button>
                    <ul class="footer-nav__menu-items">
                        <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="footer__retailer-input">Retailers</label>
                <input 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">
  <use xlink:href="/assets/icons/icons.svg#angle-right"></use>
</svg>

        </button>
            </form>
            <div class="subscribe-form-wrapper subscribe-form-wrapper--mini js-subscribe-form js-subscribe-form--default">
                <form class="subscribe-form">
                    <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Subscribe to Our &#x27;Ohana" autocomplete="email">
                    <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail">
  <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">
  <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">
            <a class="footer__geo footer__geo--country js-modal-open-link" data-modal-id="country-selector" href="#">
        <span class="footer__geo-label">Country:</span>
        <span class="footer__geo-current">
          United Arab Emirates
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </span>
      </a>
            <a class="footer__geo footer__geo--language js-modal-open-link" data-modal-id="language-selector" href="#">
        <span class="footer__geo-current">
          English
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </span>
      </a>
            <ul class="social-icons">
                <li class="social-icons__item social-icons__item--social-youtube">
                    <a class="social-icons__link" href="#"><svg class="icon icon--social-youtube">
  <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="#"><svg class="icon icon--social-linkedin">
  <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="#"><svg class="icon icon--social-twitter">
  <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="#"><svg class="icon icon--social-facebook">
  <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="#"><svg class="icon icon--social-instagram">
  <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>

<div class="js-spinning js-interstitial">
    <svg class="icon icon--spinner">
  <use xlink:href="/assets/icons/icons.svg#spinner"></use>
</svg>

</div>
{{render '@homepage--maui-jim--image'}}
<div class="js-spinning js-interstitial">
  {{render '@icons--spinner'}}
</div>
{
  "bodyClasses": [
    "js-interstitial-open"
  ]
}
  • Content:
    (function () {
      const body = document.body;
      const interstitial = document.querySelector('.js-interstitial');
    
      if (typeof componentEvents !== 'undefined' && interstitial) {
        componentEvents.on('show-interstitial', showInterstitial);
        componentEvents.on('hide-interstitial', hideInterstitial);
      }
    
      function showInterstitial() {
        body.dataset.previousScrollTop = (document.documentElement.scrollTop || body.scrollTop);
        body.style.top = (-1 * body.dataset.previousScrollTop) + 'px';
        body.classList.add('js-interstitial-open');
      }
    
      function hideInterstitial() {
        body.classList.remove('js-interstitial-open');
        document.documentElement.scrollTop = body.scrollTop = body.dataset.previousScrollTop;
        body.style.top = '';
        delete body.dataset.previousScrollTop;
      }
    })();
    
  • URL: /components/raw/interstitial-demo/interstitial.js
  • Filesystem Path: src/components/03-pages/interstitial/interstitial.js
  • Size: 804 Bytes
  • Content:
    // .js-interstitial is intended for use in conjunction with .js-spinning. When
    // both classes are applied to the body element and a spinner component is
    // added to the body, the spinner’s overlay will cover everything.
    .js-spinning.js-interstitial {
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 50;
    
      .icon--spinner {
        z-index: 50;
      }
    
      .js-interstitial-open & {
        display: block;
      }
    }
    
    .js-interstitial-open {
      position: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    
  • URL: /components/raw/interstitial-demo/interstitial.scss
  • Filesystem Path: src/components/03-pages/interstitial/interstitial.scss
  • Size: 544 Bytes

The interstitial component uses the spinner component in conjunction with additional styles and JavaScript to prevent activity on the page while critical operations are undergoing. Use this feature sparingly and with caution.

Required HTML

You’ll need to add the following HTML near the bottom of the body element.

<div class="js-spinning js-interstitial">
  <svg class="icon icon--spinner">
    <use xlink:href="/assets/icons/icons.svg#spinner"></use>
  </svg>
</div>

Usage

You can show and hide the interstitial using two custom JavaScript events.

To show the interstitial, use this:

if (typeof componentEvents !== 'undefined') {
  componentEvents.emitEvent('show-interstitial');
}

To hide the interstitial, use this:

if (typeof componentEvents !== 'undefined') {
  componentEvents.emitEvent('hide-interstitial');
}