<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">
                    <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 header-nav__secondary-item--active 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 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" alt="">
  <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" 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>
                            <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>
        <div class="header__menu-icon">
            <button class="hamburger-spring header__icon header__icon--menu  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/brand-logos/mauijim-brand-logo--medium.png"
           alt="Maui Jim logo"
           
      srcset="/assets/images/brand-logos/mauijim-brand-logo--small.png 72w,
      /assets/images/brand-logos/mauijim-brand-logo--medium.png 160w,
      /assets/images/brand-logos/mauijim-brand-logo--large.png 2x"
      sizes="(max-width: 680px) 72px,
      (min-width: 680px) 160px",
      (-webkit-min-device-pixel-ratio: 2) 2x,
      (min-resolution: 192dpi) 2x"
      /></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 Maui Jim">
    </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-active" alt="">
  <use xlink:href="/assets/icons/icons.svg#account-active"></use>
</svg>

        </a>
                <button class="header-flyout__toggle header-flyout__toggle--cart
   header-flyout__toggle--with-fallback
  
  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
     js-header-icon-empty-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--maui-jim header-cart--tax header-cart--express ">
                            <div class="header-cart__products">
                                <div class="header-cart__item" aria-label="PEAHI">
                                    <a href="#undefined"><img class="header-cart__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;330" alt="Gloss Black front view"></a>
                                    <span class="header-cart__item-info header-cart__item-info--name">PEAHI</span>
                                    <ul class="header-cart__item-list" aria-label="Product Details">
                                        <li class="header-cart__item-info">Frame Color: Gloss Black</li>
                                        <li class="header-cart__item-info">Lens Color: Neutral Grey</li>
                                        <li class="header-cart__item-info">Lens Material: SuperThin Glass</li>
                                        <li class="header-cart__item-info">Gradient: Single Gradient</li>
                                        <li class="header-cart__item-info header-cart__item-info--qty">Qty: 1</li>
                                        <li class="header-cart__item-info header-cart__item-info--price">Price: $149.00</li>
                                    </ul>
                                    <button class="header-cart__item-remove button button--plain-text">Remove</button>
                                </div>
                                <div class="header-cart__item" aria-label="WATERWAYS">
                                    <a href="#undefined"><img class="header-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;330" alt="Olive Stripe front view"></a>
                                    <span class="header-cart__item-info header-cart__item-info--name">WATERWAYS</span>
                                    <ul class="header-cart__item-list" aria-label="Product Details">
                                        <li class="header-cart__item-info">Frame Color: Olive Stripe</li>
                                        <li class="header-cart__item-info">Lens Color: Maui HT™</li>
                                        <li class="header-cart__item-info">Lens Material: SuperThin Glass</li>
                                        <li class="header-cart__item-info">Gradient: Single Gradient</li>
                                        <li class="header-cart__item-vip-info header-cart__item-vip-info--card-value">VIP Card: 30%</li>
                                        <li class="header-cart__item-vip-info header-cart__item-vip-info--original-price"><span class="u-visually-hidden">Original Price:</span> $319.00</li>
                                        <li class="header-cart__item-info header-cart__item-info--qty">Qty: 1</li>
                                        <li class="header-cart__item-info header-cart__item-info--price">Price: $219.00</li>
                                    </ul>
                                    <button class="header-cart__item-remove button button--plain-text">Remove</button>
                                </div>
                                <div class="header-cart__item" aria-label="KAWIKA">
                                    <a href="#undefined"><img class="header-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;330" alt="Tortoise with Antique Gold front view"></a>
                                    <span class="header-cart__item-info header-cart__item-info--name">KAWIKA</span>
                                    <ul class="header-cart__item-list" aria-label="Product Details">
                                        <li class="header-cart__item-info">Frame Color: Tortoise with Antique Gold</li>
                                        <li class="header-cart__item-info">Lens Color: HCL® Bronze</li>
                                        <li class="header-cart__item-info">Lens Material: MauiPure</li>
                                        <li class="header-cart__item-info">Gradient: Single Gradient</li>
                                        <li class="header-cart__item-vip-info header-cart__item-vip-info--card-value">VIP Card: 30%</li>
                                        <li class="header-cart__item-vip-info header-cart__item-vip-info--original-price"><span class="u-visually-hidden">Original Price:</span> $319.00</li>
                                        <li class="header-cart__item-info header-cart__item-info--qty">Qty: 1</li>
                                        <li class="header-cart__item-info header-cart__item-info--price">Price: $299.00</li>
                                    </ul>
                                    <button class="header-cart__item-remove button button--plain-text">Remove</button>
                                </div>
                                <div class="header-cart__item" aria-label="VOYAGER">
                                    <a href="#undefined"><img class="header-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;330" alt="Tortoise front view"></a>
                                    <span class="header-cart__item-info header-cart__item-info--name">VOYAGER</span>
                                    <ul class="header-cart__item-list" aria-label="Product Details">
                                        <li class="header-cart__item-info">Frame Color: Tortoise</li>
                                        <li class="header-cart__item-info">Lens Color: HCL® Bronze</li>
                                        <li class="header-cart__item-info">Lens Material: SuperThin Glass</li>
                                        <li class="header-cart__item-info">Gradient: Single Gradient</li>
                                        <li class="header-cart__item-info header-cart__item-info--qty">Qty: 1</li>
                                        <li class="header-cart__item-info header-cart__item-info--price">Price: $219.00</li>
                                    </ul>
                                    <button class="header-cart__item-remove button button--plain-text">Remove</button>
                                </div>
                            </div>
                            <div class="header-cart__footer">
                                <div class="header-cart__subtotal">
                                    <span class="header-cart__subtotal-label">Subtotal (4 items):</span>
                                    <span class="header-cart__subtotal-value">$1,096.00</span>
                                    <span class="header-cart__subtotal-tax">Inkl. MWST</span>
                                </div>
                                <div class="header-cart__actions">
                                    <a class="header-cart__action button button--primary" href="#">View your cart</a>
                                </div>
                                <div class="header-cart__express">
                                    <div class="header-cart__express-label-header">
                                        <span class="header-cart__express-label">Express Checkout</span>
                                    </div>
                                    <iframe class="header-cart__express-iframe" src="../../assets/static/html/paypal.html" frameborder="0"></iframe>
                                </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-pdp u-page-width-max">
    <ul class="breadcrumb u-page-width-max-gutters js-breadcrumb">
        <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="#">Maui Jim</a>
        </li>
        <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="#">Sunglasses</a>
        </li>
        <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="#">Wrap</a>
        </li>
        <li class="breadcrumb__item breadcrumb__item--current">
            <a class="breadcrumb__link" href="#">Gloss Black</a>
        </li>
    </ul>

    <div class="u-page-width-max-restricted">
        <div class="pdp-detail__container">
            <div class="product-detail product-detail--default js-product-detail">
                <section class="product-detail__carousel-wrapper" aria-live="polite" aria-roledescription="carousel">
                    <ul class="product-detail__carousel js-product-detail-carousel">
                        <li class="product-detail__carousel-item" aria-role="group" aria-roledescription="slide">
                            <span class="product-detail__aria-description u-visually-hidden">1 of 4</span>
                            <img class="product-detail__carousel-image js-product-detail-carousel-image" data-frame="PEAHI" data-angle="front" alt="Gloss Black PEAHI front View" srcset="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;900 900w, https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;768 768w, https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;420 420w"
                                src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;900" sizes="100vw, (min-width: 920px) 900px" data-202-02="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;900"
                                alt="Matte Black PEAHI front View" data-B202-2M="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&amp;wid&#x3D;900" alt="Dark Tortoise PEAHI front View" data-H202-10="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;900"
                                alt="Matte Black PEAHI front View" data-H202-2M="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;900" alt="Redfish PEAHI front View" data-H202-70="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;900"
                                alt="MahiMahi PEAHI front View" data-HT202-71="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;900" alt="Matte Black PEAHI front View" data-H202-2M-2="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;900"
                                alt="Redfish PEAHI front View" data-H202-70-2="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;900" alt="MahiMahi PEAHI front View" data-HT202-71-2="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;900">
                        </li>
                        <li class="product-detail__carousel-item" aria-role="group" aria-roledescription="slide">
                            <span class="product-detail__aria-description u-visually-hidden">2 of 4</span>
                            <img class="product-detail__carousel-image js-product-detail-carousel-image" data-frame="PEAHI" data-angle="angle" alt="Gloss Black PEAHI angle View" srcset="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;900 900w, https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;768 768w, https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;420 420w"
                                src="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;900" sizes="100vw, (min-width: 920px) 900px" data-202-02="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;900"
                                alt="Matte Black PEAHI angle View" data-B202-2M="https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$&amp;wid&#x3D;900" alt="Dark Tortoise PEAHI angle View" data-H202-10="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;900"
                                alt="Matte Black PEAHI angle View" data-H202-2M="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;900" alt="Redfish PEAHI angle View" data-H202-70="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;900"
                                alt="MahiMahi PEAHI angle View" data-HT202-71="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;900" alt="Matte Black PEAHI angle View" data-H202-2M-2="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;900"
                                alt="Redfish PEAHI angle View" data-H202-70-2="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;900" alt="MahiMahi PEAHI angle View" data-HT202-71-2="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;900">
                        </li>
                        <li class="product-detail__carousel-item" aria-role="group" aria-roledescription="slide">
                            <span class="product-detail__aria-description u-visually-hidden">3 of 4</span>
                            <img class="product-detail__carousel-image js-product-detail-carousel-image" data-frame="PEAHI" data-angle="side" alt="Gloss Black PEAHI side View" srcset="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;900 900w, https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;768 768w, https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;420 420w"
                                src="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;900" sizes="100vw, (min-width: 920px) 900px" data-202-02="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;900"
                                alt="Matte Black PEAHI side View" data-B202-2M="https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$&amp;wid&#x3D;900" alt="Dark Tortoise PEAHI side View" data-H202-10="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;900"
                                alt="Matte Black PEAHI side View" data-H202-2M="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;900" alt="Redfish PEAHI side View" data-H202-70="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;900"
                                alt="MahiMahi PEAHI side View" data-HT202-71="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;900" alt="Matte Black PEAHI side View" data-H202-2M-2="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;900"
                                alt="Redfish PEAHI side View" data-H202-70-2="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;900" alt="MahiMahi PEAHI side View" data-HT202-71-2="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;900">
                        </li>
                        <li class="product-detail__carousel-item" aria-role="group" aria-roledescription="slide">
                            <span class="product-detail__aria-description u-visually-hidden">4 of 4</span>
                            <div class="product-detail__carousel-video-outer">
                                <div class="product-detail__carousel-video-inner">
                                    <div class="js-slide-video" data-video-id="ovvgXEYnY04"></div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="product-detail__carousel-controls js-product-detail-carousel-controls">
                        <button class="product-detail__carousel-control product-detail__carousel-control--prev">
        <span class="u-visually-hidden">Previous</span>
      </button>
                        <button class="product-detail__carousel-control product-detail__carousel-control--next">
        <span class="u-visually-hidden">Next</span>
      </button>
                    </div>
                </section>
                <div class="product-detail__carousel-nav js-product-detail-carousel-nav">
                    <button class="product-detail__carousel-nav-item">
      <span class="u-visually-hidden">1 of 4</span>
    </button>
                    <button class="product-detail__carousel-nav-item">
      <span class="u-visually-hidden">2 of 4</span>
    </button>
                    <button class="product-detail__carousel-nav-item">
      <span class="u-visually-hidden">3 of 4</span>
    </button>
                    <button class="product-detail__carousel-nav-item">
      <span class="u-visually-hidden">4 of 4</span>
    </button>
                </div>
                <div class="product-detail__variant-wrapper js-product-detail-variant-wrapper">
                    <p class="product-detail__variant-label js-product-detail-variant-label" data-current-name="Gloss Black">Gloss Black</p>
                    <ul class="product-detail__variants js-product-detail-variants js-product-detail-variants--active">
                        <li class="product-detail__variant js-product-detail-variant
         js-product-detail-variant--active" data-sku="202-02" data-name="Gloss Black" data-prescription-available="true">
                            <button class="product-detail__variant-button js-product-detail-variant-button" style="background-color:#000;" aria-pressed="true">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;140" alt="Gloss Black">
        </button>
                        </li>
                        <li class="product-detail__variant js-product-detail-variant
        " data-sku="B202-2M" data-name="Matte Black" data-prescription-available="true">
                            <button class="product-detail__variant-button js-product-detail-variant-button" style="background-color:#000;" aria-pressed="false">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&amp;wid&#x3D;140" alt="Matte Black">
        </button>
                        </li>
                        <li class="product-detail__variant js-product-detail-variant
        " data-sku="H202-10" data-name="Dark Tortoise" data-prescription-available="true">
                            <button class="product-detail__variant-button js-product-detail-variant-button" style="background-color:#303032;background-image:url(https://mauijim.scene7.com/is/image/mauijim/10);" aria-pressed="false">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;140" alt="Dark Tortoise">
        </button>
                        </li>
                        <li class="product-detail__variant js-product-detail-variant
        " data-sku="H202-2M" data-name="Matte Black" data-prescription-available="true">
                            <button class="product-detail__variant-button js-product-detail-variant-button" style="background-color:#000;" aria-pressed="false">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;140" alt="Matte Black">
        </button>
                        </li>
                        <li class="product-detail__variant js-product-detail-variant
        " data-sku="H202-70" data-name="Redfish" data-prescription-available="true">
                            <button class="product-detail__variant-button js-product-detail-variant-button" style="background-color:#7d4a07;" aria-pressed="false">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;140" alt="Redfish">
        </button>
                        </li>
                        <li class="product-detail__variant js-product-detail-variant
        " data-sku="HT202-71" data-name="MahiMahi" data-prescription-available="false">
                            <button class="product-detail__variant-button js-product-detail-variant-button" style="background-color:#218b16;" aria-pressed="false">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;140" alt="MahiMahi">
        </button>
                        </li>
                        <li class="product-detail__variant js-product-detail-variant
        " data-sku="H202-2M-2" data-name="Matte Black" data-prescription-available="true">
                            <button class="product-detail__variant-button js-product-detail-variant-button" style="background-color:#000;" aria-pressed="false">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;140" alt="Matte Black">
        </button>
                        </li>
                        <li class="product-detail__variant js-product-detail-variant
        " data-sku="H202-70-2" data-name="Redfish" data-prescription-available="true">
                            <button class="product-detail__variant-button js-product-detail-variant-button" style="background-color:#7d4a07;" aria-pressed="false">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;140" alt="Redfish">
        </button>
                        </li>
                        <li class="product-detail__variant js-product-detail-variant
        " data-sku="HT202-71-2" data-name="MahiMahi" data-prescription-available="true">
                            <button class="product-detail__variant-button js-product-detail-variant-button" style="background-color:#218b16;" aria-pressed="false">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;140" alt="MahiMahi">
        </button>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="pdp-upper__container">
            <div class="pdp-upper__left">
                <h2 class="product-name__value">PEAHI</h2>

                <p class="product-name__summary">Polarized men&#x27;s classic sunglasses</p>

                <a data-variant-202-02-visible="true" data-variant-B202-2M-visible="true" data-variant-H202-10-visible="true" data-variant-H202-2M-visible="true" data-variant-H202-70-visible="true" data-variant-HT202-71-visible="false" data-variant-H202-2M-2-visible="true"
                    data-variant-H202-70-2-visible="true" data-variant-HT202-71-2-visible="true" aria-hidden="false" class="product-name__rx js-product-name-rx" href="https://mauijim.com">
Available in Prescription</a>

                <div class="review-teaser__container" data-review-sku="420-11T" data-review-count="true" data-review-read-more="true">
                    <div class="rating" data-rating-value="5.0" aria-label="Rating: 5.0 out of 5 Stars.">
                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                    </div>

                </div>

                <div class="pdp-price-stock__container">
                    <span data-variant-202-02="$149.00" data-variant-B202-2M="$189.00" data-variant-H202-10="$229.00" data-variant-H202-2M="$229.00" data-variant-H202-70="$229.00" data-variant-HT202-71="$229.00" data-variant-H202-2M-2="$229.00" data-variant-H202-70-2="$229.00"
                        data-variant-HT202-71-2="$229.00" class="product-price__value" data-product-price-value>$149.00</span>

                    <span data-variant-202-02="In Stock" data-variant-B202-2M="In Stock" data-variant-H202-10="In Stock" data-variant-H202-2M="In Stock" data-variant-H202-70="In Stock" data-variant-HT202-71="In Stock" data-variant-H202-2M-2="Out of Stock" data-variant-H202-70-2="In Stock"
                        data-variant-HT202-71-2="In Stock" class="product-inventory" data-product-inventory>In Stock</span>

                </div>

            </div>
            <div class="pdp-upper__right">
                <button class="button button--primary button--add-to-cart" data-variant-202-02-enabled="true" data-variant-B202-2M-enabled="true" data-variant-H202-10-enabled="true" data-variant-H202-2M-enabled="true" data-variant-H202-70-enabled="true" data-variant-HT202-71-enabled="true"
                    data-variant-H202-2M-2-enabled="false" data-variant-H202-70-2-enabled="true" data-variant-HT202-71-2-enabled="true" aria-disabled="true">Add to Cart</button>

                <label for="" class="label label--not-available">No Reader Available</label>

            </div>
        </div>
        <div class="pdp-top-comment__container"></div>
        <div class="pdp-lower__container">
            <div class="pdp-lower__left">
                <div class="accordion-tabs js-accordion-tabs product-description js-product-description">
                    <div class="accordion-tabs__tabs" role="tablist">
                        <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-202-02-details" aria-expanded="true" aria-controls="panel-202-02-details" role="tab" data-tab="details">Details</button>
                        <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-202-02-included" aria-expanded="false" aria-controls="panel-202-02-included" role="tab" data-tab="included">Included</button>
                    </div>
                    <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper">
                        <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control" id="tab-202-02-details" aria-expanded="true" aria-controls="panel-202-02-details" role="tab" data-tab="details">Details
      <svg class="icon icon--arrow-down" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

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

    </button>
                        <div class="accordion-tabs__content js-accordion-tabs-content" id="panel-202-02-details js-accordion-tabs-content" aria-labelledby="tab-202-02-details" aria-hidden="false" role="tabpanel" data-tab="details">
                            <p class="accordion-tabs__content-item"><strong>Frame:</strong>
                                <span data-variant-202-02="Gloss Black" data-variant-B202-2M="Matte Black" data-variant-H202-10="Dark Tortoise" data-variant-H202-2M="Matte Black" data-variant-H202-70="Redfish" data-variant-HT202-71="MahiMahi" data-variant-H202-2M-2="Matte Black" data-variant-H202-70-2="Redfish"
                                    data-variant-HT202-71-2="MahiMahi">Gloss Black</span>
                            </p>
                            <p class="accordion-tabs__content-item"><strong>Lens:</strong>
                                <span data-variant-202-02="Neutral Grey - Highest light reduction for rich color and contrast." data-variant-B202-2M="Blue Hawaii - Blue mirror coating provides a stylish new look." data-variant-H202-10="HCL® Bronze - Versatile in changing conditions with a warm tint."
                                    data-variant-H202-2M="HCL® Bronze - Versatile in changing conditions with a warm tint." data-variant-H202-70="HCL® Bronze - Versatile in changing conditions with a warm tint." data-variant-HT202-71="Maui HT™ - Highest usable light transmission for incredible depth perception."
                                    data-variant-H202-2M-2="HCL® Bronze - Versatile in changing conditions with a warm tint." data-variant-H202-70-2="HCL® Bronze - Versatile in changing conditions with a warm tint." data-variant-HT202-71-2="Maui HT™ - Highest usable light transmission for incredible depth perception.">Neutral Grey - Highest light reduction for rich color and contrast.</span></p>
                            <p class="accordion-tabs__content-item"><strong>Lens Material:</strong>
                                <span data-variant-202-02="SuperThin Glass - Perfect when clarity is your highest priority." data-variant-B202-2M="SuperThin Glass - Perfect when clarity is your highest priority." data-variant-H202-10="SuperThin Glass - Perfect when clarity is your highest priority."
                                    data-variant-H202-2M="SuperThin Glass - Perfect when clarity is your highest priority." data-variant-H202-70="SuperThin Glass - Perfect when clarity is your highest priority." data-variant-HT202-71="MauiPure - The lightest weight choice for long days in the sun."
                                    data-variant-H202-2M-2="SuperThin Glass - Perfect when clarity is your highest priority." data-variant-H202-70-2="SuperThin Glass - Perfect when clarity is your highest priority." data-variant-HT202-71-2="MauiPure - The lightest weight choice for long days in the sun.">SuperThin Glass - Perfect when clarity is your highest priority.</span></p>
                            <p class="accordion-tabs__content-item"><strong>SKU:</strong>
                                <span data-variant-202-02="202-02" data-variant-B202-2M="B202-2M" data-variant-H202-10="H202-10" data-variant-H202-2M="H202-2M" data-variant-H202-70="H202-70" data-variant-HT202-71="HT202-71" data-variant-H202-2M-2="H202-2M-2" data-variant-H202-70-2="H202-70-2"
                                    data-variant-HT202-71-2="HT202-71-2">202-02</span></p>
                            <p class="accordion-tabs__content-item">
                                <a class="accordion-tabs__content-call-to-action" href="#lens-details">Lens Details
          <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a></p>
                        </div>
                    </div>
                    <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper">
                        <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control" id="tab-202-02-included" aria-expanded="false" aria-controls="panel-202-02-included" role="tab" data-tab="included">Included
      <svg class="icon icon--arrow-down" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

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

    </button>
                        <div class="accordion-tabs__content js-accordion-tabs-content" id="panel-202-02-included" aria-labelledby="tab-202-02-included" aria-hidden="true" role="tabpanel" data-tab="included">
                            <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                                <img class="accordion-tabs__content-image" src="/assets/images/brown-case.png" alt="">
                                <p class="accordion-tabs__content-item-description">Brown case</p>
                            </div>
                            <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                                <img class="accordion-tabs__content-image" src="/assets/images/cleansing-cloth-case.png" alt="">
                                <p class="accordion-tabs__content-item-description">Cleaning cloth case</p>
                            </div>
                            <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                                <svg class="icon icon--protection-check" alt="">
  <use xlink:href="/assets/icons/icons.svg#protection-check"></use>
</svg>

                                <p class="accordion-tabs__content-item-description">Two year warranty</p>
                            </div>
                            <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                                <svg class="icon icon--truck-delivery" alt="">
  <use xlink:href="/assets/icons/icons.svg#truck-delivery"></use>
</svg>

                                <p class="accordion-tabs__content-item-description">Free shipping &amp; returns</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="pdp-lower__right">
                <div class="call-to-action ">
                    <span class="call-to-action__label">Create a Custom Pair With MyMaui</span>
                    <a class="call-to-action__button button button--outlined" href="#">
    Customize
  </a>
                </div>

                <a class="pdp-link" href="https://mauijim.com">Compare Products</a>

                <a class="pdp-link" href="https://mauijim.com">Add to Wishlist</a>

            </div>
        </div>
        <div class="pdp-patterned-text__container">
            <div class="patterned-text patterned-text--pdp">
                <h2>PEAHI</h2>
                <p>Pe'ahi ('peh-AH-hee'), on Maui's north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.</p>
            </div>

        </div>
        <div class="pdp-featured-products">

            <div class="featured-products u-block u-page-width-max-gutters">
                <h2 class="featured-products__title">You May Also Like</h2>
                <div class="featured-products__item-wrapper">
                    <div class="featured-products__items js-featured-products-carousel cards cards--even">
                        <div class="card js-card" aria-label="PEAHI">
                            <div class="card__inner">
                                <div class="review-teaser__container" data-review-sku="" data-review-count="false" data-review-read-more="false">
                                    <div class="rating" data-rating-value="5.0" aria-label="Rating: 5.0 out of 5 Stars.">
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                    </div>

                                </div>

                                <a class="card__link js-card-url" href="#undefined" aria-label="View Gloss Black product page" data-202-02-url="#undefined" data-B202-2M-url="#undefined" data-H202-10-url="#undefined" data-H202-2M-url="#undefined" data-H202-70-url="#undefined" data-HT202-71-url="#undefined"
                                    data-H202-2M-2-url="#undefined" data-H202-70-2-url="#undefined" data-HT202-71-2-url="#undefined" 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 PEAHI Front View" data-style="PEAHI" 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="false" data-B202-2M-status="false" data-H202-10-status="false" data-H202-2M-status="false" data-H202-70-status="false" data-HT202-71-status="false" data-H202-2M-2-status="false" data-H202-70-2-status="New" data-HT202-71-2-status="false">
          false
          
          
          
          
          
          
          
          
      </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>
                        </div>

                        <div class="card js-card" aria-label="WATERWAYS">
                            <div class="card__inner">
                                <div class="review-teaser__container" data-review-sku="" data-review-count="false" data-review-read-more="false">
                                    <div class="rating" data-rating-value="5.0" aria-label="Rating: 5.0 out of 5 Stars.">
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                    </div>

                                </div>

                                <a class="card__link js-card-url" href="#undefined" aria-label="View Olive Stripe product page" data-HTS267-15C-url="#undefined" data-HS267-10M-url="#undefined" data-GS267-02MR-url="#undefined" data-H202-2M-url="#undefined" data-H202-70-url="#undefined"
                                    data-HT202-71-url="#undefined" data-H202-2M-2-url="#undefined" data-H202-70-2-url="#undefined" data-HT202-71-2-url="#undefined" data-HTS267-15C-stock="true" data-HS267-10M-stock="true" data-GS267-02MR-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://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;340" data-variant="HTS267-15C" alt="Olive Stripe WATERWAYS Front View" data-style="WATERWAYS" 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" 
                      
             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-HTS267-15C-status="false" data-HS267-10M-status="New" data-GS267-02MR-status="false" data-H202-2M-status="false" data-H202-70-status="false" data-HT202-71-status="false" data-H202-2M-2-status="false" data-H202-70-2-status="false" data-HT202-71-2-status="false">
          false
          
          
          
          
          
          
          
          
      </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" 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">
        $219.00
      </span>
    </a>
                            </div>
                        </div>

                        <div class="card js-card" aria-label="KAWIKA">
                            <div class="card__inner">
                                <div class="review-teaser__container" data-review-sku="" data-review-count="false" data-review-read-more="false">
                                    <div class="rating" data-rating-value="5.0" aria-label="Rating: 5.0 out of 5 Stars.">
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                    </div>

                                </div>

                                <a class="card__link js-card-url" href="#undefined" aria-label="View Tortoise with Antique Gold product page" data-H257-16C-url="#undefined" data-B257-05CR-url="#undefined" data-257-17C-url="#undefined" data-H202-2M-url="#undefined" data-H202-70-url="#undefined"
                                    data-HT202-71-url="#undefined" data-H202-2M-2-url="#undefined" data-H202-70-2-url="#undefined" data-HT202-71-2-url="#undefined" data-H257-16C-stock="true" data-B257-05CR-stock="true" data-257-17C-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://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;340" data-variant="H257-16C" alt="Tortoise with Antique Gold KAWIKA Front View" data-style="KAWIKA" 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" 
                      
             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-H257-16C-status="false" data-B257-05CR-status="false" data-257-17C-status="false" data-H202-2M-status="false" data-H202-70-status="false" data-HT202-71-status="false" data-H202-2M-2-status="false" data-H202-70-2-status="false" data-HT202-71-2-status="false">
          false
          
          
          
          
          
          
          
          
      </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" 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">
        $299.00
      </span>
    </a>
                            </div>
                        </div>

                        <div class="card js-card" aria-label="VOYAGER">
                            <div class="card__inner">
                                <div class="review-teaser__container" data-review-sku="" data-review-count="false" data-review-read-more="false">
                                    <div class="rating" data-rating-value="5.0" aria-label="Rating: 5.0 out of 5 Stars.">
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                    </div>

                                </div>

                                <a class="card__link js-card-url" href="#undefined" aria-label="View Tortoise product page" data-H178-10-url="#undefined" data-178-02-url="#undefined" data-H202-10-url="#undefined" data-H202-2M-url="#undefined" data-H202-70-url="#undefined" data-HT202-71-url="#undefined"
                                    data-H202-2M-2-url="#undefined" data-H202-70-2-url="#undefined" data-HT202-71-2-url="#undefined" data-H178-10-stock="true" data-178-02-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://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;340" data-variant="H178-10" alt="Tortoise VOYAGER Front View" data-style="VOYAGER" 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" 
                      
             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-H178-10-status="false" data-178-02-status="New" data-H202-10-status="false" data-H202-2M-status="false" data-H202-70-status="false" data-HT202-71-status="false" data-H202-2M-2-status="false" data-H202-70-2-status="false" data-HT202-71-2-status="false">
          false
          
          
          
          
          
          
          
          
      </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" 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">
        $219.00
      </span>
    </a>
                            </div>
                        </div>

                        <div class="card js-card" aria-label="LEIA">
                            <div class="card__inner">
                                <div class="review-teaser__container" data-review-sku="" data-review-count="false" data-review-read-more="false">
                                    <div class="rating" data-rating-value="5.0" aria-label="Rating: 5.0 out of 5 Stars.">
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                    </div>

                                </div>

                                <a class="card__link js-card-url" href="#undefined" aria-label="View Brown Feathered product page" data-RS708-26D-url="#undefined" data-HS708-10L-url="#undefined" data-GS708-03D-url="#undefined" data-B708-02-url="#undefined" data-H202-70-url="#undefined"
                                    data-HT202-71-url="#undefined" data-H202-2M-2-url="#undefined" data-H202-70-2-url="#undefined" data-HT202-71-2-url="#undefined" data-RS708-26D-stock="true" data-HS708-10L-stock="true" data-GS708-03D-stock="true" data-B708-02-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://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$&amp;wid&#x3D;340" data-variant="RS708-26D" alt="Brown Feathered LEIA Front View" data-style="LEIA" data-color="Brown Feathered" 
             data-RS708-26D-front="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$&amp;wid&#x3D;340"  data-RS708-26D-angle="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_quarter?$config1800$&amp;wid&#x3D;340"  data-RS708-26D-side="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HS708-10L-front="https://s7d2.scene7.com/is/image/mauijim/HS708-10L_front?$config1800$&amp;wid&#x3D;340"  data-HS708-10L-angle="https://s7d2.scene7.com/is/image/mauijim/HS708-10L_quarter?$config1800$&amp;wid&#x3D;340"  data-HS708-10L-side="https://s7d2.scene7.com/is/image/mauijim/HS708-10L_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-GS708-03D-front="https://s7d2.scene7.com/is/image/mauijim/GS708-03D_front?$config1800$&amp;wid&#x3D;340"  data-GS708-03D-angle="https://s7d2.scene7.com/is/image/mauijim/GS708-03D_quarter?$config1800$&amp;wid&#x3D;340"  data-GS708-03D-side="https://s7d2.scene7.com/is/image/mauijim/GS708-03D_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-B708-02-front="https://s7d2.scene7.com/is/image/mauijim/B708-02_front?$config1800$&amp;wid&#x3D;340"  data-B708-02-angle="https://s7d2.scene7.com/is/image/mauijim/B708-02_quarter?$config1800$&amp;wid&#x3D;340"  data-B708-02-side="https://s7d2.scene7.com/is/image/mauijim/B708-02_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-RS708-26D-status="false" data-HS708-10L-status="false" data-GS708-03D-status="false" data-B708-02-status="false" data-H202-70-status="false" data-HT202-71-status="false" data-H202-2M-2-status="false" data-H202-70-2-status="false" data-HT202-71-2-status="false">
          false
          
          
          
          
          
          
          
          
      </span>
      <p class="card__title">LEIA</p>
      <span class="card__price js-card-price" data-RS708-26D-price="$299.00" data-HS708-10L-price="$299.00" data-GS708-03D-price="$299.00" data-B708-02-price="$299.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">
        $299.00
      </span>
    </a>
                            </div>
                        </div>

                        <div class="card js-card" aria-label="KOHALA">
                            <div class="card__inner">
                                <div class="review-teaser__container" data-review-sku="" data-review-count="false" data-review-read-more="false">
                                    <div class="rating" data-rating-value="5.0" aria-label="Rating: 5.0 out of 5 Stars.">
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                    </div>

                                </div>

                                <a class="card__link js-card-url" href="#undefined" aria-label="View Copper product page" data-H711-18-url="#undefined" data-711-02D-url="#undefined" data-H202-10-url="#undefined" data-H202-2M-url="#undefined" data-H202-70-url="#undefined" data-HT202-71-url="#undefined"
                                    data-H202-2M-2-url="#undefined" data-H202-70-2-url="#undefined" data-HT202-71-2-url="#undefined" data-H711-18-stock="true" data-711-02D-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://s7d2.scene7.com/is/image/mauijim/H711-18_front?$config1800$&amp;wid&#x3D;340" data-variant="H711-18" alt="Copper KOHALA Front View" data-style="KOHALA" data-color="Copper" 
             data-H711-18-front="https://s7d2.scene7.com/is/image/mauijim/H711-18_front?$config1800$&amp;wid&#x3D;340"  data-H711-18-angle="https://s7d2.scene7.com/is/image/mauijim/H711-18_quarter?$config1800$&amp;wid&#x3D;340"  data-H711-18-side="https://s7d2.scene7.com/is/image/mauijim/H711-18_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-711-02D-front="https://s7d2.scene7.com/is/image/mauijim/711-02D_front?$config1800$&amp;wid&#x3D;340"  data-711-02D-angle="https://s7d2.scene7.com/is/image/mauijim/711-02D_quarter?$config1800$&amp;wid&#x3D;340"  data-711-02D-side="https://s7d2.scene7.com/is/image/mauijim/711-02D_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-H711-18-status="false" data-711-02D-status="New" data-H202-10-status="false" data-H202-2M-status="false" data-H202-70-status="false" data-HT202-71-status="false" data-H202-2M-2-status="false" data-H202-70-2-status="false" data-HT202-71-2-status="false">
          false
          
          
          
          
          
          
          
          
      </span>
      <p class="card__title">KOHALA</p>
      <span class="card__price js-card-price" data-H711-18-price="$279.00" data-711-02D-price="$279.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">
        $279.00
      </span>
    </a>
                            </div>
                        </div>

                        <div class="card js-card" aria-label="STILLWATER">
                            <div class="card__inner">
                                <div class="review-teaser__container" data-review-sku="" data-review-count="false" data-review-read-more="false">
                                    <div class="rating" data-rating-value="5.0" aria-label="Rating: 5.0 out of 5 Stars.">
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                    </div>

                                </div>

                                <a class="card__link js-card-url" href="#undefined" aria-label="View Antique Gold product page" data-H706-16C-url="#undefined" data-706-17C-url="#undefined" data-H202-10-url="#undefined" data-H202-2M-url="#undefined" data-H202-70-url="#undefined" data-HT202-71-url="#undefined"
                                    data-H202-2M-2-url="#undefined" data-H202-70-2-url="#undefined" data-HT202-71-2-url="#undefined" data-H706-16C-stock="true" data-706-17C-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://s7d2.scene7.com/is/image/mauijim/H706-16C_front?$config1800$&amp;wid&#x3D;340" data-variant="H706-16C" alt="Antique Gold STILLWATER Front View" data-style="STILLWATER" data-color="Antique Gold" 
             data-H706-16C-front="https://s7d2.scene7.com/is/image/mauijim/H706-16C_front?$config1800$&amp;wid&#x3D;340"  data-H706-16C-angle="https://s7d2.scene7.com/is/image/mauijim/H706-16C_quarter?$config1800$&amp;wid&#x3D;340"  data-H706-16C-side="https://s7d2.scene7.com/is/image/mauijim/H706-16C_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-706-17C-front="https://s7d2.scene7.com/is/image/mauijim/706-17C_front?$config1800$&amp;wid&#x3D;340"  data-706-17C-angle="https://s7d2.scene7.com/is/image/mauijim/706-17C_quarter?$config1800$&amp;wid&#x3D;340"  data-706-17C-side="https://s7d2.scene7.com/is/image/mauijim/706-17C_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-H706-16C-status="false" data-706-17C-status="false" data-H202-10-status="false" data-H202-2M-status="false" data-H202-70-status="false" data-HT202-71-status="false" data-H202-2M-2-status="false" data-H202-70-2-status="false" data-HT202-71-2-status="false">
          false
          
          
          
          
          
          
          
          
      </span>
      <p class="card__title">STILLWATER</p>
      <span class="card__price js-card-price" data-H706-16C-price="$329.00" data-706-17C-price="$329.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">
        $329.00
      </span>
    </a>
                            </div>
                        </div>

                        <div class="card js-card" aria-label="BORN AND RAISED BAMBOO SHORT SLEEVE">
                            <div class="card__inner">
                                <div class="review-teaser__container" data-review-sku="" data-review-count="false" data-review-read-more="false">
                                    <div class="rating" data-rating-value="5.0" aria-label="Rating: 5.0 out of 5 Stars.">
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                        <span class="rating__star" role="presentation">
    <svg class="icon icon--star-full" alt="">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

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

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

  </span>
                                    </div>

                                </div>

                                <a class="card__link js-card-url" href="#undefined" aria-label="View Copper product page" data-H712-18-url="#undefined" data-712-02D-url="#undefined" data-H202-10-url="#undefined" data-H202-2M-url="#undefined" data-H202-70-url="#undefined" data-HT202-71-url="#undefined"
                                    data-H202-2M-2-url="#undefined" data-H202-70-2-url="#undefined" data-HT202-71-2-url="#undefined" data-H712-18-stock="true" data-712-02D-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="/assets/images/t-shirt.png" data-variant="H712-18" alt="Copper BORN AND RAISED BAMBOO SHORT SLEEVE Front View" data-style="BORN AND RAISED BAMBOO SHORT SLEEVE" data-color="Copper" 
             data-H712-18-front="/assets/images/t-shirt.png"  data-H712-18-angle="/assets/images/t-shirt.png"  data-H712-18-side="/assets/images/t-shirt.png" 
                      
             data-712-02D-front="https://s7d2.scene7.com/is/image/mauijim/712-02D_front?$config1800$&amp;wid&#x3D;340"  data-712-02D-angle="https://s7d2.scene7.com/is/image/mauijim/712-02D_quarter?$config1800$&amp;wid&#x3D;340"  data-712-02D-side="https://s7d2.scene7.com/is/image/mauijim/712-02D_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-H712-18-status="false" data-712-02D-status="New" data-H202-10-status="false" data-H202-2M-status="false" data-H202-70-status="false" data-HT202-71-status="false" data-H202-2M-2-status="false" data-H202-70-2-status="false" data-HT202-71-2-status="false">
          false
          
          
          
          
          
          
          
          
      </span>
      <p class="card__title">BORN AND RAISED BAMBOO SHORT SLEEVE</p>
      <span class="card__price js-card-price" data-H712-18-price="$279.00" data-712-02D-price="$279.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">
        $279.00
      </span>
    </a>
                            </div>
                        </div>

                    </div>
                    <div class="featured-products__item-controls js-featured-products-controls">
                        <button class="featured-products__item-control featured-products__item-control--prev">
        <span class="u-visually-hidden">Previous</span>
        <svg class="icon icon--arrow-left" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

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

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

        </div>
        <div class="pdp-review">
            <h2 class="pdp-review__title">Reviews</h2>
            <div id="review-420-11T" class="review__container" data-review-sku="420-11T">
                <div id="tt-reviews-summary"></div>
                <div id="tt-reviews-list"></div>
            </div>

        </div>
        <div class="pdp-lens-detail" id="lens-details">

            <div class="lens-detail u-block u-page-width-max">
                <h5 class="lens-detail__title">Lens Details</h5>
                <div class="lens-detail__text">
                    <img class="lens-detail__lens-image" src="/assets/images/lens-detail-lens-neutralgrey.png" alt="Neutral Grey">
                    <h6 class="lens-detail__headline">Neutral Grey</h6>
                    <span class="lens-detail__subheadline">Best in Bright, Direct Sunlight</span>
                    <p class="lens-detail__description">Offers the highest available light reduction for the richest colors and sharpest contrast.</p>
                    <div class="lens-material">
                        <h6 class="lens-material__title">Superthin Glass</h6>
                        <p class="lens-material__description">SuperThin Glass provides the absolute best optics available. It is the heaviest of our four materials, but is 20% thinner and lighter than standard glass.</p>
                        <div class="lens-material__diagram">
                            <div class="lens-material__label lens-material__label--top">Clarity</div>
                            <div class="lens-material__middle">
                                <div class="lens-material__label lens-material__label--left">Shatter Resistance</div>
                                <div class="lens-material__image-wrapper">
                                    <img class="lens-material__image" src="/assets/images/lens-material-superthin.svg">
                                    <span class="lens-material__caption">ST</span>
                                </div>
                                <div class="lens-material__label lens-material__label--right">Scratch Resistance</div>
                            </div>
                            <div class="lens-material__label lens-material__label--bottom">Weight</div>
                        </div>
                    </div>

                </div>
                <div class="lens-detail__comparison">
                    <figure class="image-comparison js-image-comparison">
                        <img class="image-comparison__image" src="/assets/images/lens-detail-neutralgrey.jpg" alt="With">
                        <div class="image-comparison__resize js-image-comparison-resize">
                            <img class="image-comparison__image image-comparison__image--resize" src="/assets/images/lens-detail-without.jpg" alt="With">
                        </div>
                        <button class="image-comparison__handle js-image-comparison-handle" aria-label="Comparison slider (use left and right keys)"></button>
                        <figcaption class="image-comparison__caption image-comparison__caption--left">Without</figcaption>
                        <figcaption class="image-comparison__caption image-comparison__caption--center">Images are not retouched</figcaption>
                        <figcaption class="image-comparison__caption image-comparison__caption--right">With</figcaption>
                    </figure>

                </div>
            </div>

        </div>
        <div class="pdp-size-fit">

            <div class="size-fit u-block u-page-width-max">
                <div class="size-fit__title-group">
                    <h5 class="size-fit__title">Size and Fit</h5>

                </div>
                <div class="size-fit__side size-fit__side--front">
                    <div class="size-fit__measurements">
                        <img class="size-fit__image size-fit__image--front" srcset="/assets/images/size-fit/classic-front.png 1x, /assets/images/size-fit/classic-front@2x.png 2x" src="/assets/images/size-fit/classic-front.png" alt="Front">
                        <div class="size-fit__measurement-group size-fit__measurement-group--front-upper">
                            <div class="size-fit__measurement size-fit__measurement--eye">
                                <span class="size-fit__measurement-label">Eye</span>
                                <span class="size-fit__measurement-value">51.0</span>
                            </div>
                            <div class="size-fit__measurement size-fit__measurement--bridge">
                                <span class="size-fit__measurement-label">Bridge</span>
                                <span class="size-fit__measurement-value">20.0</span>
                            </div>
                            <div class="size-fit__measurement size-fit__measurement--eye">
                                <span class="size-fit__measurement-label">Eye</span>
                                <span class="size-fit__measurement-value">51.0</span>
                            </div>
                        </div>
                        <div class="size-fit__measurement-group size-fit__measurement-group--front-height">
                            <div class="size-fit__measurement size-fit__measurement--height">
                                <span class="size-fit__measurement-label">Height</span>
                                <span class="size-fit__measurement-value">41.0</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Shape:</strong> Refined rectangular shaped frame best complements oval or heart/triangle face shapes.</p>
                    <p class="size-fit__description"><strong>Bridge:</strong> Saddle style bridge with adjustable rubber nose pads for added comfort.</p>
                </div>
                <div class="size-fit__side size-fit__side--above">
                    <div class="size-fit__measurements">
                        <img class="size-fit__image size-fit__image--above" srcset="/assets/images/size-fit/classic-up.png 1x, /assets/images/size-fit/classic-up@2x.png 2x" src="/assets/images/size-fit/classic-up.png" alt="Above">
                        <div class="size-fit__measurement-group size-fit__measurement-group--above-base">
                            <div class="size-fit__measurement size-fit__measurement--base">
                                <span class="size-fit__measurement-label">Base Curve</span>
                                <span class="size-fit__measurement-value">6</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Fit:</strong> (eye) 51, (bridge) 20, (temple) 146, 6-base curve</p>
                    <p class="size-fit__description"><strong>Finishing Treatment:</strong> Three color options available in a high-gloss and matte finish.</p>
                </div>
                <div class="size-fit__side size-fit__side--side">
                    <div class="size-fit__measurements">
                        <img class="size-fit__image size-fit__image--side" srcset="/assets/images/size-fit/classic-side.png 1x, /assets/images/size-fit/classic-side@2x.png 2x" src="/assets/images/size-fit/classic-side.png" alt="Side">
                        <div class="size-fit__measurement-group size-fit__measurement-group--side-temple">
                            <div class="size-fit__measurement size-fit__measurement--temple">
                                <span class="size-fit__measurement-label">Temple</span>
                                <span class="size-fit__measurement-value">146.0</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Material:</strong> Lightweight, injected nylon frame designed for longer wear time.</p>
                    <p class="size-fit__description"><strong>Hinge:</strong> Pin hinge.</p>
                </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 (dynamicVariant header.component header.variant) header.context merge=true}}
<main id="main-section"
      class="main main-pdp{{#if modifier}} main--pdp-{{modifier}}{{/if}} u-page-width-max">
  {{render '@breadcrumb' breadcrumb }}
  <div class="u-page-width-max-restricted">
    <div class="pdp-detail__container">
      {{render (dynamicVariant detail.component detail.variant) detail.context}}
    </div>
    <div class="pdp-upper__container">
      <div class="pdp-upper__left">
        {{render '@pdp-name' product}}
        {{render '@pdp-summary' product}}
        {{render '@pdp-prescription' product}}
        {{#if (equals _self.preview "@mauijim")}}
        {{render '@review-teaser' reviewTeaser.context}}
        {{/if}}
        {{#if (equals _self.preview "@zeal")}}
        {{render '@pdp-original-price' product}}
        {{/if}}
        <div class="pdp-price-stock__container">
          {{render '@pdp-price' product}}
          {{render '@pdp-stock' product}}
        </div>
        {{render '@pdp-tax' product}}
      </div>
      <div class="pdp-upper__right">
        {{#if internationalSite}}
        {{#each internationalCta}}
        {{render (dynamicVariant component variant) context}}
        {{/each}}
        {{else}}
        {{render '@pdp-add-to-cart-button' product}}
        {{/if}}
        {{#each upperOptions}}
        {{render (dynamicVariant component variant) context}}
        {{/each}}
      </div>
    </div>
    <div class="pdp-top-comment__container"></div>
    <div class="pdp-lower__container">
      <div class="pdp-lower__left">
        {{render '@pdp-accordion-tabs' product}}
      </div>
      <div class="pdp-lower__right">
        {{#each callsToAction}}
        {{render (dynamicVariant component variant) context merge=true}}
        {{/each}}
      </div>
    </div>
    <div class="pdp-patterned-text__container">
      {{render '@pdp-patterned-text' product}}
    </div>
    {{#each lowerComponents}}
    <div class="pdp-{{component}}" {{#if id}} id="{{id}}" {{/if}}>
    {{#if (equals component 'review')}}<h2 class="pdp-{{component}}__title">Reviews</h2>{{/if}}
    {{render (dynamicVariant component variant) context merge=true}}
  </div>
  {{/each}}
</main>
{{render '@subscribe'}}
{{render (dynamicVariant footer.component footer.variant) footer.context merge=true}}
{
  "enableTurnTo": true,
  "pageCss": [
    "products"
  ],
  "header": {
    "component": "header",
    "variant": "maui-jim",
    "context": {
      "activeAccount": true,
      "activeItem": "Shop"
    }
  },
  "breadcrumb": {
    "items": [
      {
        "label": "Maui Jim",
        "path": "#"
      },
      {
        "label": "Sunglasses",
        "path": "#"
      },
      {
        "label": "Wrap",
        "path": "#"
      },
      {
        "label": "Gloss Black",
        "path": "#",
        "current": true
      }
    ]
  },
  "detail": {
    "component": "product-detail",
    "variant": "default"
  },
  "product": {
    "name": "PEAHI",
    "summary": "Polarized men's classic sunglasses",
    "description": "Pe'ahi ('peh-AH-hee'), on Maui's north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.",
    "category": "Wrap",
    "rating": "3.7",
    "vip": false,
    "tax": false,
    "variants": [
      {
        "sku": "202-02",
        "name": "Gloss Black",
        "color": "#000",
        "orderMonth": "12",
        "orderYear": "2017",
        "locationCategory": "Online Retailer",
        "purchaseLocation": "Dicks.com",
        "images": {
          "front": "https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$",
          "angle": "https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$",
          "side": "https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$"
        },
        "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
        "swatchImage": false,
        "active": true,
        "price": "$149.00",
        "originalPrice": "$229.00",
        "url": "#undefined",
        "status": false,
        "prescription": "true",
        "stock": "In Stock",
        "lens": "Neutral Grey",
        "lensId": "neutralgrey",
        "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
        "lensMaterial": "SuperThin Glass",
        "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
        "lensDetailData": {
          "product": null,
          "inactive": false,
          "material": "superthin"
        }
      },
      {
        "sku": "B202-2M",
        "name": "Matte Black",
        "color": "#000",
        "orderMonth": null,
        "orderYear": null,
        "locationCategory": null,
        "purchaseLocation": null,
        "images": {
          "front": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$",
          "angle": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$",
          "side": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$"
        },
        "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
        "swatchImage": false,
        "active": false,
        "price": "$189.00",
        "originalPrice": "$219.00",
        "url": "#undefined",
        "status": false,
        "prescription": "true",
        "stock": "In Stock",
        "lens": "Blue Hawaii",
        "lensId": "bluehawaii",
        "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
        "lensMaterial": "SuperThin Glass",
        "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
        "lensDetailData": {
          "product": null,
          "inactive": true,
          "material": "superthin"
        }
      },
      {
        "sku": "H202-10",
        "name": "Dark Tortoise",
        "color": "#303032",
        "orderMonth": null,
        "orderYear": null,
        "locationCategory": null,
        "purchaseLocation": null,
        "images": {
          "front": "https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$",
          "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$",
          "side": "https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$"
        },
        "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
        "swatchImage": "https://mauijim.scene7.com/is/image/mauijim/10",
        "active": false,
        "price": "$229.00",
        "originalPrice": null,
        "url": "#undefined",
        "status": false,
        "prescription": "true",
        "stock": "In Stock",
        "lens": "HCL® Bronze",
        "lensId": "hclbronze",
        "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
        "lensMaterial": "SuperThin Glass",
        "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
        "lensDetailData": {
          "product": null,
          "inactive": true,
          "material": "superthin"
        }
      },
      {
        "sku": "H202-2M",
        "name": "Matte Black",
        "color": "#000",
        "orderMonth": null,
        "orderYear": null,
        "locationCategory": null,
        "purchaseLocation": null,
        "images": {
          "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
          "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
          "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
        },
        "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
        "swatchImage": false,
        "active": false,
        "price": "$229.00",
        "originalPrice": null,
        "url": "#undefined",
        "status": false,
        "prescription": "true",
        "stock": "In Stock",
        "lens": "HCL® Bronze",
        "lensId": "hclbronze",
        "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
        "lensMaterial": "SuperThin Glass",
        "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
        "lensDetailData": {
          "product": null,
          "inactive": true,
          "material": "superthin"
        }
      },
      {
        "sku": "H202-70",
        "name": "Redfish",
        "color": "#7d4a07",
        "orderMonth": null,
        "orderYear": null,
        "locationCategory": null,
        "purchaseLocation": null,
        "images": {
          "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
          "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
          "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
        },
        "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
        "swatchImage": false,
        "active": false,
        "price": "$229.00",
        "originalPrice": null,
        "url": "#undefined",
        "status": "New",
        "prescription": "true",
        "stock": "In Stock",
        "lens": "HCL® Bronze",
        "lensId": "hclbronze",
        "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
        "lensMaterial": "SuperThin Glass",
        "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
        "lensDetailData": {
          "product": null,
          "inactive": true,
          "material": "superthin"
        }
      },
      {
        "sku": "HT202-71",
        "name": "MahiMahi",
        "color": "#218b16",
        "orderMonth": null,
        "orderYear": null,
        "locationCategory": null,
        "purchaseLocation": null,
        "images": {
          "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
          "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
          "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
        },
        "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
        "swatchImage": false,
        "active": false,
        "price": "$229.00",
        "originalPrice": null,
        "url": "#undefined",
        "status": false,
        "prescription": "false",
        "stock": "In Stock",
        "lens": "Maui HT™",
        "lensId": "mauiht",
        "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
        "lensMaterial": "MauiPure",
        "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
        "lensDetailData": {
          "product": null,
          "inactive": true,
          "material": "mauipure"
        }
      },
      {
        "sku": "H202-2M-2",
        "name": "Matte Black",
        "color": "#000",
        "orderMonth": null,
        "orderYear": null,
        "locationCategory": null,
        "purchaseLocation": null,
        "images": {
          "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
          "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
          "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
        },
        "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
        "swatchImage": false,
        "active": false,
        "price": "$229.00",
        "originalPrice": null,
        "url": "#undefined",
        "status": false,
        "prescription": "true",
        "stock": "Out of Stock",
        "lens": "HCL® Bronze",
        "lensId": "hclbronze",
        "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
        "lensMaterial": "SuperThin Glass",
        "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
        "lensDetailData": {
          "product": null,
          "inactive": true,
          "material": "superthin"
        }
      },
      {
        "sku": "H202-70-2",
        "name": "Redfish",
        "color": "#7d4a07",
        "orderMonth": null,
        "orderYear": null,
        "locationCategory": null,
        "purchaseLocation": null,
        "images": {
          "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
          "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
          "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
        },
        "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
        "swatchImage": false,
        "active": false,
        "price": "$229.00",
        "originalPrice": null,
        "url": "#undefined",
        "status": false,
        "prescription": "true",
        "stock": "In Stock",
        "lens": "HCL® Bronze",
        "lensId": "hclbronze",
        "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
        "lensMaterial": "SuperThin Glass",
        "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
        "lensDetailData": {
          "product": null,
          "inactive": true,
          "material": "superthin"
        }
      },
      {
        "sku": "HT202-71-2",
        "name": "MahiMahi",
        "color": "#218b16",
        "orderMonth": null,
        "orderYear": null,
        "locationCategory": null,
        "purchaseLocation": null,
        "images": {
          "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
          "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
          "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
        },
        "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
        "swatchImage": false,
        "active": false,
        "price": "$229.00",
        "originalPrice": null,
        "url": "#undefined",
        "status": "New",
        "prescription": "true",
        "stock": "In Stock",
        "lens": "Maui HT™",
        "lensId": "mauiht",
        "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
        "lensMaterial": "MauiPure",
        "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
        "lensDetailData": {
          "product": null,
          "inactive": true,
          "material": "mauipure"
        }
      }
    ],
    "callToAction": false,
    "mauijim": false,
    "zeal": false,
    "excludeVariants": false,
    "mymaui": true,
    "prescription": true,
    "prescriptionUrl": "https://mauijim.com",
    "lensDetail": true,
    "sku": "202-02"
  },
  "reviewTeaser": {
    "sku": "202-02",
    "addReviewCount": true,
    "addReviewReadMore": true
  },
  "footer": {
    "component": "footer",
    "variant": "maui-jim"
  },
  "lowerComponents": [
    {
      "component": "featured-products",
      "variant": "maui-jim",
      "context": {
        "title": "You May Also Like",
        "cardVariant": "maui-jim"
      }
    },
    {
      "component": "review",
      "variant": "default"
    },
    {
      "id": "lens-details",
      "component": "lens-detail",
      "variant": "neutralgrey"
    },
    {
      "component": "size-fit",
      "variant": "maui-jim"
    }
  ],
  "upperOptions": [
    {
      "component": "label",
      "variant": "label",
      "context": {
        "value": "No Reader Available",
        "type": "not-available"
      }
    }
  ],
  "callsToAction": [
    {
      "component": "call-to-action",
      "variant": "default",
      "context": {
        "label": "Create a Custom Pair With MyMaui",
        "buttonValue": "Customize"
      }
    },
    {
      "component": "pdp-link",
      "variant": "default",
      "context": {
        "title": "Compare Products"
      }
    },
    {
      "component": "pdp-link",
      "variant": "default",
      "context": {
        "title": "Add to Wishlist"
      }
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      function handleMagnificationSelectChange(e) {
        if (e.target.value) {
          changeMagnification(e.target.value);
        }
      }
    
      function changeMagnification(magnification) {
        componentEvents.emitEvent('pdp-magnification-change', [magnification]);
      }
    
      function createPlaceholder() {
        const placeholder = '<div class="l-controls-placeholder js-placeholder"></div>';
        const controlsBlock = document.querySelector('.js-pdp-controls');
        controlsBlock.insertAdjacentHTML('beforebegin', placeholder);
      }
    
      function getWidth() {
        return Math.max(
          document.body.scrollWidth,
          document.documentElement.scrollWidth,
          document.body.offsetWidth,
          document.documentElement.offsetWidth,
          document.documentElement.clientWidth
        );
      }
    
      //  Moves controls markup location within the document for screenreaders.
      function moveProductControls() {
        const currentWidth = getWidth();
        const breadcrumbBlock = document.querySelector('.js-breadcrumb');
        const controlsBlock = document.querySelector('.js-pdp-controls');
        const placeholder = document.querySelector('.js-placeholder');
        if (currentWidth >= 1025 ) {
          breadcrumbBlock.parentNode.insertBefore(controlsBlock, breadcrumbBlock.nextSibling);
        } else if (currentWidth < 1025) {
          placeholder.parentNode.insertBefore(controlsBlock, placeholder.nextSibling);
        }
      }
    
      const resizeDebouncer = debounce(function() {
        moveProductControls();
      }, 250);
    
      function init() {
        if (!document.querySelector('.js-pdp-controls')) {
          return;
        }
        const magnificationSelects = document.querySelectorAll('.js-select-pdp-magnification');
        createPlaceholder();
        moveProductControls();
        window.addEventListener('resize', resizeDebouncer);
    
        for (let i = 0; i < magnificationSelects.length; i++) {
          if (!magnificationSelects[i].classList.contains('js-component-init')) {
            magnificationSelects[i].addEventListener('change', handleMagnificationSelectChange);
            changeMagnification(magnificationSelects[i].value);
    
            magnificationSelects[i].classList.add('js-component-init');
          }
        }
      }
    
      // Allow application JS to reinitialize any instances added with Ajax, etc.
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/pdp/pdp.js
  • Filesystem Path: src/components/03-pages/pdp/pdp.js
  • Size: 2.4 KB
  • Content:
    // Change this to main--pdp once the current PDP get deprecated.
    .main-pdp {
      @if $brand == 'mauijim' {
        .u-block {
          margin-top: 0;
          margin-bottom: 0;
        }
    
        .pdp-patterned-text__container {
          margin-bottom: 56px;
        }
    
        .cards {
          margin: 0;
        }
    
        .pdp-size-fit {
          margin-top: 60px;
    
          @include breakpoint($breakpoint-md-only) {
            margin-top: 53px;
          }
        }
      }
    
      .about-product__feature-item-button {
        text-align: left;
      }
    
      .product-name__rx {
        color: #0c7257;
        font-size: 1.4rem;
      }
    
      .pdp-price-stock__container {
        display: flex;
        flex-direction: row;
        align-items: first baseline;
    
        .product-inventory {
          margin-left: 1rem;
          color: $color-darkest;
        }
      }
    
      .review-teaser__container {
        margin-bottom: 2.1rem;
    
        @include breakpoint($breakpoint-md) {
          margin-bottom: 1.5rem;
        }
      }
    
      .button--add-to-cart {
        margin-bottom: 2rem;
      }
    
      .pdp-review {
        margin-bottom: 16px;
        padding: 0 10px;
    
        @include breakpoint($breakpoint-md) {
          margin-bottom: 0;
        }
    
        .review__container .tt-c-reviews-list {
          @include breakpoint($breakpoint-md-only) {
            padding-bottom: 76px;
          }
        }
    
        .pdp-review__title {
          font-size: 2.7rem;
          font-weight: bold;
          line-height: 3.2rem;
          text-align: center;
          text-transform: uppercase;
        }
      }
    
      .lens-detail {
        padding: 0;
      }
    
      .size-fit {
        padding: 0;
      }
    
      .size-fit__title {
        color: $color-medium-darkest;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    
      .breadcrumb__item--current .breadcrumb__link {
        font-weight: normal;
      }
    
      .product-detail__variants {
        @include breakpoint($breakpoint-md) {
          display: flex;
          flex-wrap: wrap;
          align-content: flex-start;
          justify-content: flex-start;
          width: 70rem;
          margin: 0 auto 17px;
        }
    
        @include breakpoint($breakpoint-lg) {
          width: 84rem;
        }
      }
    
      .product-detail__variant-label {
        @include breakpoint($breakpoint-md) {
          color: $color-medium-darkest;
          font-size: 2.4rem;
          line-height: 2.8rem;
        }
      }
    
      .product-detail__variant {
        @include breakpoint($breakpoint-md) {
          display: flex;
          flex-direction: column;
          align-content: center;
          justify-content: center;
          width: auto;
          min-width: auto;
          height: 73px;
          margin: 0;
    
          &::after {
            width: 128px;
            height: 73px;
          }
        }
      }
    
      .product-original-price {
        margin-bottom: 5px;
      }
    
      .lens-detail__title {
        color: $color-medium-darkest;
        font-size: 2.4rem;
        line-height: 2.8rem;
    
        @include breakpoint($breakpoint-lg) {
          margin-bottom: 5.3rem;
        }
    
      }
    
      .form-item__tooltip {
        fill: #999;
      }
    
      .label--not-available {
        @include breakpoint($breakpoint-sm-only) {
          width: 100%;
          text-align: center;
        }
      }
    }
    
    .pdp-upper__container {
      display: flex;
      flex-direction: column;
      margin: 0 10px;
      padding-top: 10px;
      border-top: 1px solid $color-light;
    
      @include breakpoint($breakpoint-md) {
        flex-direction: row;
        padding-top: 17px;
      }
    
      .pdp-upper__left {
        flex-grow: 1;
        margin-bottom: 2rem;
    
        @include breakpoint($breakpoint-md) {
          width: 50%;
        }
      }
    
      .pdp-upper__right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-bottom: 3rem;
        text-align: right;
    
        @include breakpoint($breakpoint-md) {
          width: 50%;
    
          > * {
            max-width: 26.4rem;
          }
    
          .call-to-action {
            max-width: 26.4rem;
          }
    
          .label--not-available {
            width: 26.4rem;
            text-align: center;
          }
        }
    
        @include breakpoint($breakpoint-lg) {
          > * {
            max-width: 30rem;
          }
    
          .call-to-action {
            width: 30rem;
          }
    
          .label--not-available {
            width: 30rem;
            text-align: center;
          }
        }
    
        *:last-child {
          margin-bottom: 0;
        }
    
        .select-wrapper {
          color: #252525;
          text-align: left;
        }
    
        .button--primary {
          width: 100%;
        }
    
      }
    
      .form-item--select {
        width: 100%;
        margin-top: 0;
    
        @include breakpoint($breakpoint-md) {
          width: 300px;
          text-align: left;
        }
    
        select {
          margin-top: 5px;
        }
      }
    
      .review-teaser__container {
        justify-content: flex-start;
      }
    }
    
    .pdp-lower__container {
      display: flex;
      flex-direction: column;
      margin: 0 10px;
    
      @include breakpoint($breakpoint-lg) {
        flex-direction: row;
        padding: 40px 0 46px;
      }
    
      .pdp-lower__left,
      .pdp-lower__right {
    
        @include breakpoint($breakpoint-lg) {
          width: 50%;
        }
      }
    
      .pdp-lower__right {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 36px 0;
    
        @include breakpoint($breakpoint-md-only) {
          padding-bottom: 30px;
        }
    
        @include breakpoint($breakpoint-lg) {
          align-items: flex-end;
          padding: 0;
        }
    
        .call-to-action {
          margin-bottom: 2.4rem;
    
          @include breakpoint($breakpoint-md) {
            display: flex;
            flex-direction: row;
            align-content: center;
            justify-content: space-between;
            width: 100%;
          }
    
          @include breakpoint($breakpoint-lg) {
            flex-direction: column;
            width: 30rem;
            margin-bottom: 0;
          }
    
          .call-to-action__label {
            font-weight: normal;
            @include breakpoint($breakpoint-md) {
              flex-grow: 1;
              text-align: left;
            }
    
            @include breakpoint($breakpoint-md-only) {
              margin-bottom: 0;
              line-height: 5rem;
            }
          }
    
          .call-to-action__button {
            @include breakpoint($breakpoint-md) {
              margin: 0;
            }
          }
        }
    
        .pdp-link {
          margin-top: .8rem;
    
          @include breakpoint($breakpoint-md) {
            width: 100%;
            text-align: left;
          }
    
          @include breakpoint($breakpoint-lg) {
            width: 300px;
    
            &:first-of-type {
              margin-top: 3rem;
    
              @include breakpoint($breakpoint-lg) {
                margin-top: 3.2rem;
              }
            }
          }
        }
    
      }
    
      .accordion-tabs__accordion-control {
        border-bottom: 1px solid $color-medium-light;
    
        &::after {
          border-bottom: 0;
        }
      }
    }
    
    .pdp-patterned-text__container {
      .patterned-text {
        padding: 12px 16px;
    
        @include breakpoint($breakpoint-md) {
          padding: 44px 88px;
        }
      }
    
      h2 {
        margin: 0 0 12px;
        color: $color-medium-darkest;
        font-size: 27px;
        font-weight: bold;
        letter-spacing: 3px;
        line-height: 32px;
      }
    
      p {
        margin: 0;
        color: $color-darkest;
        font-size: 19px;
        font-weight: $font-weight-medium;
        line-height: 23px;
        text-align: left;
      }
    }
    
    .pdp-featured-products {
      .featured-products__title {
        margin: 0;
        font-size: 27px;
      }
    }
    
  • URL: /components/raw/pdp/pdp.scss
  • Filesystem Path: src/components/03-pages/pdp/pdp.scss
  • Size: 6.9 KB

There are no notes for this item.