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

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

    <div class="headroom">
        <nav class="header-nav">
            <ul class="header-nav__primary">
                <li class="header-nav__primary-item">
                    <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">
                        </div>
                    </div>
                </li>
                <li class="header-nav__primary-item header-nav__primary-item--active">
                    <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">
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button">
                    Catalog
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

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

                      Back
                    </button>
                                        <ul class="header-nav__tertiary header-nav__tertiary--marketing js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <span class="header-nav__tertiary-menu-label">Frame Family</span>
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Specialty Metal</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Metal</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="#">Acetate</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Nylon</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Clip-On Collection</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--accent" href="#">
                              Show All
                              <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="header-nav__tertiary-menu">
                                                <span class="header-nav__tertiary-menu-label">Shape</span>
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Round</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Rectangle</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Oval</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="header-nav__tertiary-menu">
                                                <span class="header-nav__tertiary-menu-label">Gender</span>
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Male</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Female</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-clipons.jpg');"></div>
                                                <div class="header-nav__tertiary-marketing-text">
                                                    <span class="header-nav__tertiary-marketing-title">Clip-On Styles</span>
                                                    <span class="header-nav__tertiary-marketing-cta">Explore</span>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Design
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Find an optician
                  </a>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="tel:+1800229933">
                    1-888-666-5905
                    <svg class="icon icon--action-phone">
  <use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>

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

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

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

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

                      Back
                    </button>
                                        <ul class="header-nav__tertiary js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Order Status</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Repairs</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Returns</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Product Registration</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Prescription</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Retailers</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">FAQs</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Shipping Information</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    My Account
                  </a>
                                </li>
                                <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>
            </ul>
        </nav>
        <div class="header-menu-bar"></div>
        <a class="header__logo-wrapper" href="#">
      <img class="header__logo" src="/assets/images/mauijim-brand-logo.png" alt="Maui Jim logo">
    </a>
        <div class="header__menu-icon">
            <button class="hamburger-spring header__icon header__icon--menu  js-header-icon--menu" type="button">
        <span class="u-visually-hidden">Menu</span>
        <span class="hamburger-spring__box">
          <span class="hamburger-spring__inner"></span>
        </span>
      </button>
        </div>
        <div class="header__icons">
            <div class="header__icons-inner">
                <button class="header__icon header__icon--search js-header-icon--search">
          <span class="u-visually-hidden">Search</span>
          <svg class="icon icon--search">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

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

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

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

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

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

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

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

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

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

        </button>
            </form>
            <div class="header-search__list">
                <span class="header-search__list-label">Latest Search</span>
                <ul class="header-search__list-items">
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Koko Head</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Tail Slide</a>
                    </li>
                </ul>
            </div>
            <div class="header-search__list">
                <span class="header-search__list-label">Popular Searches</span>
                <ul class="header-search__list-items">
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Aviators</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Man</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Surf</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Vintage</a>
                    </li>
                </ul>
            </div>
            <div class="header-search__results">
                <a class="header-search__result-link" href="#">View all results <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</a>
                <div class="search-autocomplete-result">
                    <a class="search-autocomplete-result__link" href="#">
            <span class="search-autocomplete-result__image-container">
              <img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
                srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
            </span>
            <span class="search-autocomplete-result__title">Ho&#x27;okipa Reader Universal Fit</span>
          </a>
                </div>
                <div class="search-autocomplete-result">
                    <a class="search-autocomplete-result__link" href="#">
            <span class="search-autocomplete-result__image-container">
              <img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
                srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
            </span>
            <span class="search-autocomplete-result__title">Sandy Beach Universal Fit</span>
          </a>
                </div>
                <div class="search-autocomplete-result">
                    <a class="search-autocomplete-result__link" href="#">
            <span class="search-autocomplete-result__image-container">
              <img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
                srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
            </span>
            <span class="search-autocomplete-result__title">Hanalei Universal Fit</span>
          </a>
                </div>
            </div>
        </div>
        <div class="header-cart header-cart--default header-cart--tax header-flyout header-flyout--cart js-header-cart">
            <div class="header-cart__header">
                <span class="header-cart__title">Your Cart <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</span>
                <span class="header-cart__item-count header-cart__item-count--empty">0 items</span>
            </div>
            <div class="header-cart__empty">
                <div class="header-cart__empty-inner">
                    <img class="header-cart__empty-brand-logo" src="/assets/images/mauijim-brand-mark-grey-small.png">
                    <span class="header-cart__empty-label">Your Shopping Cart is Empty</span>
                    <a class="header-cart__empty-button button button--primary">Shop Now</a>
                </div>
            </div>
        </div>
        <div class="header-flyout-overlay js-header-flyout-overlay"></div>
    </div>
</header>

<main class="main main--customize u-page-width-max">
    <ul class="breadcrumb u-page-width-max-gutters">
        <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="#">Maui Jim</a>
        </li>
        <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="#">Eyeglasses</a>
        </li>
        <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="#">Specialty Metal</a>
        </li>
        <li class="breadcrumb__item">
            MJM025511
        </li>
    </ul>

    <div class="l-customize-upper">
        <div class="l-customize-detail">
            <div class="product-detail product-detail--rimless js-product-detail js-product-detail-variant--active" data-id="MJM025511-140" data-sku-form="[s]-[c]-140">
                <div class="product-detail__carousel-wrapper">
                    <ul class="product-detail__carousel js-product-detail-carousel">
                        <li class="product-detail__carousel-item">
                            <img class="product-detail__carousel-image js-product-detail-carousel-image" data-angle="front" srcset="/assets/images/dummy-products/mjo2010/mjo2010-20_front.jpg 900w, /assets/images/dummy-products/mjo2010/mjo2010-20_front.jpg 768w, /assets/images/dummy-products/mjo2010/mjo2010-20_front.jpg 420w"
                                src="/assets/images/dummy-products/mjo2010/mjo2010-20_front.jpg" sizes="100vw, (min-width: 920px) 900px" data-mjo2010-140="/assets/images/dummy-products/mjo2010/mjo2010-20_front.jpg">
                        </li>
                        <li class="product-detail__carousel-item">
                            <img class="product-detail__carousel-image js-product-detail-carousel-image" data-angle="angle" srcset="/assets/images/dummy-products/mjo2010/mjo2010-20_quarter.jpg 900w, /assets/images/dummy-products/mjo2010/mjo2010-20_quarter.jpg 768w, /assets/images/dummy-products/mjo2010/mjo2010-20_quarter.jpg 420w"
                                src="/assets/images/dummy-products/mjo2010/mjo2010-20_quarter.jpg" sizes="100vw, (min-width: 920px) 900px" data-mjo2010-140="/assets/images/dummy-products/mjo2010/mjo2010-20_quarter.jpg">
                        </li>
                        <li class="product-detail__carousel-item">
                            <img class="product-detail__carousel-image js-product-detail-carousel-image" data-angle="side" srcset="/assets/images/dummy-products/mjo2010/mjo2010-20_side.jpg 900w, /assets/images/dummy-products/mjo2010/mjo2010-20_side.jpg 768w, /assets/images/dummy-products/mjo2010/mjo2010-20_side.jpg 420w"
                                src="/assets/images/dummy-products/mjo2010/mjo2010-20_side.jpg" sizes="100vw, (min-width: 920px) 900px" data-mjo2010-140="/assets/images/dummy-products/mjo2010/mjo2010-20_side.jpg">
                        </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>
                </div>
                <div class="product-detail__carousel-nav js-product-detail-carousel-nav">
                    <button class="product-detail__carousel-nav-item">
      <span class="u-visually-hidden">0</span>
    </button>
                    <button class="product-detail__carousel-nav-item">
      <span class="u-visually-hidden">1</span>
    </button>
                    <button class="product-detail__carousel-nav-item">
      <span class="u-visually-hidden">2</span>
    </button>
                </div>
            </div>

        </div>
        <div class="l-customize-customize">
            <div class="tabs js-tabs tabs--customize-rimless">
                <ul class="tabs__tabs">
                    <li class="tabs__tab js-tabs-tab js-tabs-tab--active" data-tab="lens-shape">Lens Shape</li>
                    <li class="tabs__tab js-tabs-tab" data-tab="lens-color">Color</li>
                </ul>
                <div class="tabs__content-wrapper js-tabs-content-wrapper js-tabs-content-wrapper--active" data-tab="lens-shape">

                    <div class="customize js-customize customize--rimless customize--rimless-shapes">
                        <div class="customize__options">
                            <div class="customize__option js-customize-option">
                                <div class="customize__option-label">
                                    Rectangle
                                    <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                                    <div class="tooltip">Pellentesque viverra in nibh ut consectetur.</div>
                                </div>
                                <ul class="customize__items">
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="mjo2001" value="mjo2001" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2001-140" data-frame-style="mjo2001-140" data-frame="Matte Black - mockdata2001" data-lens="Clear  - mockdata2001" data-material="MauiPure - The lightest weight choice for long days in the sun.  - mockdata2001">
                                            <label for="mjo2001">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2001.svg">
    <span class="radio__label-text u-visually-hidden">MJO2001</span>
  </label>
                                        </div>

                                    </li>
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="mjo2007" value="mjo2007" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2007-140" data-frame-style="mjo2007-140" data-frame="Matte Black - mockdata2007" data-lens="Clear - mockdata2007" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2007">
                                            <label for="mjo2007">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2007.svg">
    <span class="radio__label-text u-visually-hidden">MJO2007</span>
  </label>
                                        </div>

                                    </li>
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="mjo2008" value="mjo2008" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2008-140" data-frame-style="mjo2008-140" data-frame="Matte Black - mockdata2008" data-lens="Clear - mockdata2008" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2008">
                                            <label for="mjo2008">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2008.svg">
    <span class="radio__label-text u-visually-hidden">MJO2008</span>
  </label>
                                        </div>

                                    </li>
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="mjo2009" value="mjo2009" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2009-140" data-frame-style="mjo2009-140" data-frame="Matte Black - mockdata2009" data-lens="Clear - mockdata2009" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2009">
                                            <label for="mjo2009">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2009.svg">
    <span class="radio__label-text u-visually-hidden">MJO2009</span>
  </label>
                                        </div>

                                    </li>
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="mjo2010" value="mjo2010" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2010-140" data-frame-style="mjo2010-140" data-frame="Matte Black - mockdata2010" data-lens="Clear - mockdata2010" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2010"
                                                checked="true">
                                            <label for="mjo2010">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2010.svg">
    <span class="radio__label-text u-visually-hidden">MJO2010</span>
  </label>
                                        </div>

                                    </li>
                                </ul>
                            </div>
                            <div class="customize__option js-customize-option">
                                <div class="customize__option-label">
                                    Oval
                                    <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                                    <div class="tooltip">Morbi semper sed elit eu tempus.</div>
                                </div>
                                <ul class="customize__items">
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="mjo2002" value="mjo2002" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2002-140" data-frame-style="mjo2002-140" data-frame="Matte Black - mockdata2002" data-lens="Clear - mockdata2002" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2002">
                                            <label for="mjo2002">
    <img class="radio__image" src="/assets/images/silhouettes/oval/mjo2002.svg">
    <span class="radio__label-text u-visually-hidden">MJO2002</span>
  </label>
                                        </div>

                                    </li>
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="mjo2003" value="mjo2003" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2003-140" data-frame-style="mjo2003-140" data-frame="Matte Black - mockdata2003" data-lens="Clear - mockdata2003" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2003">
                                            <label for="mjo2003">
    <img class="radio__image" src="/assets/images/silhouettes/oval/mjo2003.svg">
    <span class="radio__label-text u-visually-hidden">MJO2003</span>
  </label>
                                        </div>

                                    </li>
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="mjo2004" value="mjo2004" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2004-140" data-frame-style="mjo2004-140" data-frame="Matte Black - mockdata2004" data-lens="Clear - mockdata2004" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2004">
                                            <label for="mjo2004">
    <img class="radio__image" src="/assets/images/silhouettes/oval/mjo2004.svg">
    <span class="radio__label-text u-visually-hidden">MJO2004</span>
  </label>
                                        </div>

                                    </li>
                                </ul>
                            </div>
                            <div class="customize__option js-customize-option">
                                <div class="customize__option-label">
                                    Round
                                    <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                                    <div class="tooltip">Maecenas blandit ex nec nunc condimentum facilisis.</div>
                                </div>
                                <ul class="customize__items">
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="mjo2005" value="mjo2005" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2005-140" data-frame-style="mjo2005-140" data-frame="Matte Black - mockdata2005" data-lens="Clear - mockdata2005" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2005">
                                            <label for="mjo2005">
    <img class="radio__image" src="/assets/images/silhouettes/round/mjo2005.svg">
    <span class="radio__label-text u-visually-hidden">MJO2005</span>
  </label>
                                        </div>

                                    </li>
                                </ul>
                            </div>
                            <div class="customize__option js-customize-option">
                                <div class="customize__option-label">
                                    Square
                                    <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                                    <div class="tooltip">Quisque pellentesque malesuada eros.</div>
                                </div>
                                <ul class="customize__items">
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="mjo2006" value="mjo2006" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2006-140" data-frame-style="mjo2006-140" data-frame="Matte Black - mockdata2006" data-lens="Clear - mockdata2006" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2006">
                                            <label for="mjo2006">
    <img class="radio__image" src="/assets/images/silhouettes/square/mjo2006.svg">
    <span class="radio__label-text u-visually-hidden">MJO2006</span>
  </label>
                                        </div>

                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="tabs__content-wrapper js-tabs-content-wrapper" data-tab="lens-color">

                    <div class="customize js-customize customize--rimless customize--rimless-colors">
                        <div class="customize__options">
                            <div class="customize__option js-customize-option">
                                <div class="customize__option-label">
                                    Color: <span class="customize__option-value js-customize-option-value">Chrome / Chrome / Color 2 / Color 2</span>
                                </div>
                                <ul class="customize__items">
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="color-10" value="10" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="10" data-value="Chrome / Chrome / Color 1 / Color 1">
                                            <label for="color-10">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-1.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 1 / Color 1</span>
  </label>
                                        </div>

                                    </li>
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="color-20" value="20" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="20" data-value="Chrome / Chrome / Color 2 / Color 2" checked="true">
                                            <label for="color-20">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-2.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 2 / Color 2</span>
  </label>
                                        </div>

                                    </li>
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="color-30" value="30" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="30" data-value="Chrome / Chrome / Color 3 / Color 3">
                                            <label for="color-30">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-3.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 3 / Color 3</span>
  </label>
                                        </div>

                                    </li>
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="color-40" value="40" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="40" data-value="Chrome / Chrome / Color 4 / Color 4">
                                            <label for="color-40">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-4.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 4 / Color 4</span>
  </label>
                                        </div>

                                    </li>
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="color-50" value="50" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="50" data-value="Chrome / Chrome / Color 5 / Color 5">
                                            <label for="color-50">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-5.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 5 / Color 5</span>
  </label>
                                        </div>

                                    </li>
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="color-60" value="60" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="60" data-value="Chrome / Chrome / Color 6 / Color 6">
                                            <label for="color-60">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-6.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 6 / Color 6</span>
  </label>
                                        </div>

                                    </li>
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="color-70" value="70" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="70" data-value="Chrome / Chrome / Color 70 / Color 70">
                                            <label for="color-70">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-7.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 7 / Color 7</span>
  </label>
                                        </div>

                                    </li>
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="color-80" value="80" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="80" data-value="Chrome / Chrome / Color 8 / Color 8">
                                            <label for="color-80">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-8.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 8 / Color 8</span>
  </label>
                                        </div>

                                    </li>
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="color-90" value="90" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="90" data-value="Chrome / Chrome / Color 9 / Color 9">
                                            <label for="color-90">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-9.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 9 / Color 9</span>
  </label>
                                        </div>

                                    </li>
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="color-100" value="100" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="100" data-value="Chrome / Chrome / Color 10 / Color 10">
                                            <label for="color-100">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-10.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 10 / Color 10</span>
  </label>
                                        </div>

                                    </li>
                                    <li class="customize__item">
                                        <div class="form-item form-item--radio">
                                            <input type="radio" id="color-110" value="110" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="110" data-value="Chrome / Chrome / Color 11 / Color 11">
                                            <label for="color-110">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-11.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 11 / Color 11</span>
  </label>
                                        </div>

                                    </li>
                                </ul>
                            </div>
                            <div class="customize__options-help">
                                <p class="paragraph"><strong>The colors refer to:</strong> Bridge/Temple &amp; endpiece/Sleeve/Disc</p>

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

                </div>
            </div>

        </div>
        <div class="l-customize-price-cta">
            <div class="product-call-to-action product-call-to-action--find-an-optician">
                <span class="product-call-to-action__label">Ready to buy?</span>
                <a class="product-call-to-action__button button button--primary" href="#">
    Find an Optician
  </a>
            </div>

            <div class="product-call-to-action product-call-to-action--print">
                <span class="product-call-to-action__label">Bring this to your optician</span>
                <a class="product-call-to-action__button button button--outlined" href="#">
    Print
  </a>
            </div>

        </div>
        <div class="l-customize-name">
            <div class="product-name">
                <h1 class="product-name__value">MJM025511</h1>
                <h2 class="product-name__summary">Mens Specialty Metal Eyeglasses</h2>
            </div>

        </div>
        <div class="l-customize-description">
            <div class="accordion-tabs js-accordion-tabs product-description js-product-description" data-product-id="mjo2010-140">
                <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" data-tab="product-description">
                    <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Description
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

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

    </button>
                    <div class="accordion-tabs__content">
                        <p class="accordion-tabs__content-item">Pe&#x27;ahi (&#x27;peh-AH-hee&#x27;), on Maui&#x27;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>
                <ul class="accordion-tabs__tabs">
                    <li class="accordion-tabs__tab js-accordion-tabs-tab" data-tab="product-description">Description</li>
                    <li class="accordion-tabs__tab js-accordion-tabs-tab js-accordion-tabs-tab--active" data-tab="details">Details</li>
                    <li class="accordion-tabs__tab js-accordion-tabs-tab" data-tab="included">Included</li>
                </ul>
                <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper js-accordion-tabs-content-wrapper--active" data-tab="details">
                    <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Details
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

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

    </button>
                    <div class="accordion-tabs__content">
                        <p class="accordion-tabs__content-item"><strong>Frame:</strong> Matte Black</p>
                        <p class="accordion-tabs__content-item"><strong>Lens:</strong> Clear</p>
                        <p class="accordion-tabs__content-item"><strong>Lens Material:</strong> MauiPure - The lightest weight choice for long days in the sun.</p>
                        <p class="accordion-tabs__content-item"><strong>SKU:</strong> mjo2010-140</p>
                    </div>
                </div>
                <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" data-tab="included">
                    <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Included
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

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

    </button>
                    <div class="accordion-tabs__content">
                        <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                            <img class="accordion-tabs__content-image" src="/assets/images/brown-case.png" alt="Brown case">
                            <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="Cleaning cloth case">
                            <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">
  <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">
  <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="l-customize-controls">
            <ul class="product-controls">
                <li class="product-controls__item">
                    <button class="product-controls__button product-controls__button--wishlist" data-product-control="wishlist" data-active-variant="mjo2010-140" data-product-list="">
            <span class="product-controls__state product-controls__state--add">
              <svg class="icon icon--heart">
  <use xlink:href="/assets/icons/icons.svg#heart"></use>
</svg>

              <span class="product-controls__label product-controls__label--small">Wishlist</span>
              <span class="product-controls__label product-controls__label--medium">Add to Wishlist</span>
              <span class="product-controls__label product-controls__label--large">Add to Wishlist</span>
            </span>
            <span class="product-controls__state product-controls__state--remove">
              <svg class="icon icon--heart-filled">
  <use xlink:href="/assets/icons/icons.svg#heart-filled"></use>
</svg>

              <span class="product-controls__label product-controls__label--small">Wishlist</span>
              <span class="product-controls__label product-controls__label--medium">Remove from Wishlist</span>
              <span class="product-controls__label product-controls__label--large">Remove from Wishlist</span>
            </span>
          </button>
                </li>
                <li class="product-controls__item">
                    <button class="product-controls__button product-controls__button--compare" data-product-control="compare" data-active-variant="mjo2010-140" data-product-list="">
            <span class="product-controls__state product-controls__state--add">
              <svg class="icon icon--compare">
  <use xlink:href="/assets/icons/icons.svg#compare"></use>
</svg>

              <span class="product-controls__label product-controls__label--small">Compare</span>
              <span class="product-controls__label product-controls__label--medium">Add to Compare</span>
              <span class="product-controls__label product-controls__label--large">Add to Compare</span>
            </span>
            <span class="product-controls__state product-controls__state--remove">
              <svg class="icon icon--compare-filled">
  <use xlink:href="/assets/icons/icons.svg#compare-filled"></use>
</svg>

              <span class="product-controls__label product-controls__label--small">Remove</span>
              <span class="product-controls__label product-controls__label--medium">Remove from Compare</span>
              <span class="product-controls__label product-controls__label--large">Remove from Compare</span>
            </span>
          </button>
                </li>
            </ul>
        </div>
    </div>
    <div class="l-customize-lower">
        <div class="l-customize-size-fit js-customize-size-fit" data-id="MJO2001">
            <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>
        <div class="l-customize-size-fit js-customize-size-fit js-hidden" data-id="MJO2002">
            <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-v.png 1x, /assets/images/size-fit/classic-front-v@2x.png 2x" src="/assets/images/size-fit/classic-front-v.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">49.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">21.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">49.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">39.0</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Shape:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                    <p class="size-fit__description"><strong>Bridge:</strong> Aenean commodo ligula eget dolor.</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-v.png 1x, /assets/images/size-fit/classic-up-v@2x.png 2x" src="/assets/images/size-fit/classic-up-v.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">5.5</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Fit:</strong> (eye) 49, (bridge) 21, (temple) 144, 6-base curve</p>
                    <p class="size-fit__description"><strong>Finishing Treatment:</strong> Aenean massa. Cum sociis natoque.</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-v.png 1x, /assets/images/size-fit/classic-side-v@2x.png 2x" src="/assets/images/size-fit/classic-side-v.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">144.0</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Material:</strong> Quisque rutrum. Aenean imperdiet.</p>
                    <p class="size-fit__description"><strong>Hinge:</strong> Lorem ipsum.</p>
                </div>
            </div>

        </div>
        <div class="l-customize-size-fit js-customize-size-fit js-hidden" data-id="MJO2003">
            <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>
        <div class="l-customize-size-fit js-customize-size-fit js-hidden" data-id="MJO2004">
            <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-v.png 1x, /assets/images/size-fit/classic-front-v@2x.png 2x" src="/assets/images/size-fit/classic-front-v.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">49.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">21.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">49.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">39.0</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Shape:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                    <p class="size-fit__description"><strong>Bridge:</strong> Aenean commodo ligula eget dolor.</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-v.png 1x, /assets/images/size-fit/classic-up-v@2x.png 2x" src="/assets/images/size-fit/classic-up-v.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">5.5</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Fit:</strong> (eye) 49, (bridge) 21, (temple) 144, 6-base curve</p>
                    <p class="size-fit__description"><strong>Finishing Treatment:</strong> Aenean massa. Cum sociis natoque.</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-v.png 1x, /assets/images/size-fit/classic-side-v@2x.png 2x" src="/assets/images/size-fit/classic-side-v.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">144.0</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Material:</strong> Quisque rutrum. Aenean imperdiet.</p>
                    <p class="size-fit__description"><strong>Hinge:</strong> Lorem ipsum.</p>
                </div>
            </div>

        </div>
        <div class="l-customize-size-fit js-customize-size-fit js-hidden" data-id="MJO2005">
            <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>
        <div class="l-customize-size-fit js-customize-size-fit js-hidden" data-id="MJO2006">
            <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-v.png 1x, /assets/images/size-fit/classic-front-v@2x.png 2x" src="/assets/images/size-fit/classic-front-v.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">49.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">21.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">49.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">39.0</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Shape:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                    <p class="size-fit__description"><strong>Bridge:</strong> Aenean commodo ligula eget dolor.</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-v.png 1x, /assets/images/size-fit/classic-up-v@2x.png 2x" src="/assets/images/size-fit/classic-up-v.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">5.5</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Fit:</strong> (eye) 49, (bridge) 21, (temple) 144, 6-base curve</p>
                    <p class="size-fit__description"><strong>Finishing Treatment:</strong> Aenean massa. Cum sociis natoque.</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-v.png 1x, /assets/images/size-fit/classic-side-v@2x.png 2x" src="/assets/images/size-fit/classic-side-v.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">144.0</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Material:</strong> Quisque rutrum. Aenean imperdiet.</p>
                    <p class="size-fit__description"><strong>Hinge:</strong> Lorem ipsum.</p>
                </div>
            </div>

        </div>
        <div class="l-customize-size-fit js-customize-size-fit js-hidden" data-id="MJO2007">
            <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-v.png 1x, /assets/images/size-fit/classic-front-v@2x.png 2x" src="/assets/images/size-fit/classic-front-v.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">49.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">21.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">49.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">39.0</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Shape:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                    <p class="size-fit__description"><strong>Bridge:</strong> Aenean commodo ligula eget dolor.</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-v.png 1x, /assets/images/size-fit/classic-up-v@2x.png 2x" src="/assets/images/size-fit/classic-up-v.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">5.5</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Fit:</strong> (eye) 49, (bridge) 21, (temple) 144, 6-base curve</p>
                    <p class="size-fit__description"><strong>Finishing Treatment:</strong> Aenean massa. Cum sociis natoque.</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-v.png 1x, /assets/images/size-fit/classic-side-v@2x.png 2x" src="/assets/images/size-fit/classic-side-v.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">144.0</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Material:</strong> Quisque rutrum. Aenean imperdiet.</p>
                    <p class="size-fit__description"><strong>Hinge:</strong> Lorem ipsum.</p>
                </div>
            </div>

        </div>
        <div class="l-customize-size-fit js-customize-size-fit js-hidden" data-id="MJO2008">
            <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>
        <div class="l-customize-size-fit js-customize-size-fit js-hidden" data-id="MJO2009">
            <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-v.png 1x, /assets/images/size-fit/classic-front-v@2x.png 2x" src="/assets/images/size-fit/classic-front-v.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">49.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">21.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">49.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">39.0</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Shape:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                    <p class="size-fit__description"><strong>Bridge:</strong> Aenean commodo ligula eget dolor.</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-v.png 1x, /assets/images/size-fit/classic-up-v@2x.png 2x" src="/assets/images/size-fit/classic-up-v.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">5.5</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Fit:</strong> (eye) 49, (bridge) 21, (temple) 144, 6-base curve</p>
                    <p class="size-fit__description"><strong>Finishing Treatment:</strong> Aenean massa. Cum sociis natoque.</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-v.png 1x, /assets/images/size-fit/classic-side-v@2x.png 2x" src="/assets/images/size-fit/classic-side-v.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">144.0</span>
                            </div>
                        </div>
                    </div>
                    <p class="size-fit__description"><strong>Material:</strong> Quisque rutrum. Aenean imperdiet.</p>
                    <p class="size-fit__description"><strong>Hinge:</strong> Lorem ipsum.</p>
                </div>
            </div>

        </div>
        <div class="l-customize-size-fit js-customize-size-fit js-hidden" data-id="MJO2010">
            <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>
        <div class="l-customize-featured-products js-customize-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 card--eyeglass-featured">
                            <div class="card__inner">
                                <a class="card__link js-card-url" href="#202-02" data-202-02-url="#202-02" data-B202-2M-url="#B202-2M" data-H202-10-url="#H202-10" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71" data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2"
                                    data-HT202-71-2-url="#HT202-71-2" data-202-02-stock="true" data-B202-2M-stock="true" data-H202-10-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true" data-HT202-71-stock="true" data-H202-2M-2-stock="true" data-H202-70-2-stock="true"
                                    data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340" data-variant="202-02"
             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"
          >
      <h5 class="card__title">PEAHI</h5>
    </a>
                            </div>
                        </div>

                        <div class="card js-card card--eyeglass-featured">
                            <div class="card__inner">
                                <a class="card__link js-card-url" href="#HTS267-15C" data-HTS267-15C-url="#HTS267-15C" data-HS267-10M-url="#HS267-10M" data-GS267-02MR-url="#GS267-02MR" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71" data-H202-2M-2-url="#H202-2M-2"
                                    data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-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"
             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"
          >
      <h5 class="card__title">WATERWAYS</h5>
    </a>
                            </div>
                        </div>

                        <div class="card js-card card--eyeglass-featured">
                            <div class="card__inner">
                                <a class="card__link js-card-url" href="#H257-16C" data-H257-16C-url="#H257-16C" data-B257-05CR-url="#B257-05CR" data-257-17C-url="#257-17C" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71" data-H202-2M-2-url="#H202-2M-2"
                                    data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-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"
             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"
          >
      <h5 class="card__title">KAWIKA</h5>
    </a>
                            </div>
                        </div>

                        <div class="card js-card card--eyeglass-featured">
                            <div class="card__inner">
                                <a class="card__link js-card-url" href="#H178-10" data-H178-10-url="#H178-10" data-178-02-url="#178-02" data-H202-10-url="#H202-10" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71" data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2"
                                    data-HT202-71-2-url="#HT202-71-2" data-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"
             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"
          >
      <h5 class="card__title">VOYAGER</h5>
    </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">
  <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">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

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

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

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

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

    </div>
</div>

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

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

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

    </a>
        <div class="footer-nav__menus">
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Maui Jim
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

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

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

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

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

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

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Order Status</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Repairs</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Returns</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Product Registration</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Prescription</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Retailers</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">FAQs</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Shipping Information</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Legal
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

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

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

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Terms of Use</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Privacy Policy</a>
                        </li>
                    </ul>
                </div>
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Gift Cards
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

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

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

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

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

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

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

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

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

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

        </div>
    </div>
    <div class="footer__copyright">
        <img class="footer__copyright-logo" src="/assets/images/mauijim-brand-logo-monochromatic.svg">
        <span class="footer__copyright-text">©2016 Maui Jim, Inc. Lahana, Hawaii</span>
    </div>
</footer>
{{render (dynamicVariant 'header' header.variant) header.context merge=true}}
<main class="main main--customize u-page-width-max">
  {{render '@breadcrumb' breadcrumb }}
  <div class="l-customize-upper">
    <div class="l-customize-detail">
      {{render (dynamicVariant 'product-detail' detail.variant) detail.context}}
    </div>
    <div class="l-customize-customize">
      {{render (dynamicVariant customize.component customize.variant) customize.context merge=true}}
    </div>
    <div class="l-customize-price-cta">
      {{#each callsToAction}}
      {{render (dynamicVariant component variant) context merge=true}}
      {{/each}}
    </div>
    <div class="l-customize-name">
      {{render '@product-name' name.context merge=true}}
    </div>
    {{#if description}}
    <div class="l-customize-description">
      {{render '@product-description' description.context}}
    </div>
    {{/if}}
    {{#if controls}}
    <div class="l-customize-controls">
      {{> '@product-controls' controls.context}}
    </div>
    {{/if}}
  </div>
  <div class="l-customize-lower">
    {{#each lowerComponents}}
    <div class="l-customize-{{component}} js-customize-{{component}}{{#if inactive}} js-hidden{{/if}}"{{#if id}} id="{{id}}"{{/if}}{{#if data-id}} data-id="{{data-id}}"{{/if}}>
      {{render (dynamicVariant component variant) context merge=true}}
    </div>
    {{/each}}
  </div>
</main>
{{render '@subscribe'}}
{{render '@footer'}}
{
  "pageCss": [
    "products"
  ],
  "header": {
    "variant": "maui-jim--eyeglasses",
    "context": {}
  },
  "breadcrumb": {
    "items": [
      {
        "label": "Maui Jim",
        "path": "#"
      },
      {
        "label": "Eyeglasses",
        "path": "#"
      },
      {
        "label": "Specialty Metal",
        "path": "#"
      },
      {
        "label": "MJM025511",
        "current": null
      }
    ]
  },
  "customize": {
    "component": "tabs",
    "variant": "customize-rimless",
    "context": {}
  },
  "detail": {
    "variant": "rimless",
    "context": {
      "id": "MJM025511-140",
      "variants": [
        {
          "id": "mjo2010-140",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "/assets/images/dummy-products/mjo2010/mjo2010-20_front.jpg",
            "angle": "/assets/images/dummy-products/mjo2010/mjo2010-20_quarter.jpg",
            "side": "/assets/images/dummy-products/mjo2010/mjo2010-20_side.jpg"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$229.00",
          "salePrice": null,
          "url": "#mjo2010-140",
          "status": null,
          "stock": "In Stock",
          "lens": "Clear",
          "lensId": null,
          "lensFull": "Clear",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "mjo2010-140",
            "inactive": null,
            "material": "mauipure"
          }
        }
      ],
      "images": [
        {
          "angleId": "front",
          "angleImages": [
            {
              "id": "mjo2010-140",
              "src": "/assets/images/dummy-products/mjo2010/mjo2010-20_front.jpg",
              "active": true
            }
          ],
          "video": null
        },
        {
          "angleId": "angle",
          "angleImages": [
            {
              "id": "mjo2010-140",
              "src": "/assets/images/dummy-products/mjo2010/mjo2010-20_quarter.jpg",
              "active": true
            }
          ],
          "video": null
        },
        {
          "angleId": "side",
          "angleImages": [
            {
              "id": "mjo2010-140",
              "src": "/assets/images/dummy-products/mjo2010/mjo2010-20_side.jpg",
              "active": true
            }
          ],
          "video": null
        }
      ],
      "excludeVariants": true,
      "skuForm": "[s]-[c]-140",
      "active": true
    }
  },
  "name": {
    "context": {
      "product": {
        "name": "MJM025511",
        "summary": "Mens Specialty Metal Eyeglasses",
        "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": "Classic",
        "rating": [
          "star-full",
          "star-full",
          "star-full",
          "star-full",
          "star-empty"
        ],
        "vip": null,
        "tax": null,
        "variants": [
          {
            "id": "mjo2010-140",
            "name": "Matte Black",
            "color": "#000",
            "orderMonth": "12",
            "orderYear": "2017",
            "locationCategory": "Online Retailer",
            "purchaseLocation": "Dicks.com",
            "images": {
              "front": "/assets/images/dummy-products/mjo2010/mjo2010-20_front.jpg",
              "angle": "/assets/images/dummy-products/mjo2010/mjo2010-20_quarter.jpg",
              "side": "/assets/images/dummy-products/mjo2010/mjo2010-20_side.jpg"
            },
            "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
            "swatchImage": null,
            "active": true,
            "price": "$229.00",
            "salePrice": null,
            "url": "#mjo2010-140",
            "status": null,
            "stock": "In Stock",
            "lens": "Clear",
            "lensId": null,
            "lensFull": "Clear",
            "lensMaterial": "MauiPure",
            "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
            "lensDetailData": {
              "product": "mjo2010-140",
              "inactive": null,
              "material": "mauipure"
            }
          }
        ],
        "callToAction": null,
        "mauijim": null,
        "zeal": null,
        "excludeVariants": null,
        "mymaui": null,
        "prescription": "true"
      },
      "excludeRatingLink": true
    }
  },
  "callsToAction": [
    {
      "component": "product-call-to-action",
      "variant": "find-an-optician",
      "context": {}
    },
    {
      "component": "product-call-to-action",
      "variant": "print",
      "context": {}
    }
  ],
  "description": {
    "context": {
      "product": {
        "name": "MJM025511",
        "summary": "Mens Specialty Metal Eyeglasses",
        "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": "Classic",
        "rating": [
          "star-full",
          "star-full",
          "star-full",
          "star-full",
          "star-empty"
        ],
        "vip": null,
        "tax": null,
        "variants": [
          {
            "id": "mjo2010-140",
            "name": "Matte Black",
            "color": "#000",
            "orderMonth": "12",
            "orderYear": "2017",
            "locationCategory": "Online Retailer",
            "purchaseLocation": "Dicks.com",
            "images": {
              "front": "/assets/images/dummy-products/mjo2010/mjo2010-20_front.jpg",
              "angle": "/assets/images/dummy-products/mjo2010/mjo2010-20_quarter.jpg",
              "side": "/assets/images/dummy-products/mjo2010/mjo2010-20_side.jpg"
            },
            "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
            "swatchImage": null,
            "active": true,
            "price": "$229.00",
            "salePrice": null,
            "url": "#mjo2010-140",
            "status": null,
            "stock": "In Stock",
            "lens": "Clear",
            "lensId": null,
            "lensFull": "Clear",
            "lensMaterial": "MauiPure",
            "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
            "lensDetailData": {
              "product": "mjo2010-140",
              "inactive": null,
              "material": "mauipure"
            }
          }
        ],
        "callToAction": null,
        "mauijim": null,
        "zeal": null,
        "excludeVariants": null,
        "mymaui": null,
        "prescription": "true"
      },
      "excludeAvailability": true,
      "featuredTab": true
    }
  },
  "controls": {
    "context": {
      "current": "mjo2010-140",
      "controls": [
        {
          "control": "wishlist",
          "productList": null,
          "states": [
            {
              "state": "add",
              "icon": "heart",
              "label-small": "Wishlist",
              "label-medium": "Add to Wishlist",
              "label-large": "Add to Wishlist"
            },
            {
              "state": "remove",
              "icon": "heart-filled",
              "label-small": "Wishlist",
              "label-medium": "Remove from Wishlist",
              "label-large": "Remove from Wishlist"
            }
          ]
        },
        {
          "control": "compare",
          "productList": null,
          "states": [
            {
              "state": "add",
              "icon": "compare",
              "label-small": "Compare",
              "label-medium": "Add to Compare",
              "label-large": "Add to Compare"
            },
            {
              "state": "remove",
              "icon": "compare-filled",
              "label-small": "Remove",
              "label-medium": "Remove from Compare",
              "label-large": "Remove from Compare"
            }
          ]
        }
      ]
    }
  },
  "lowerComponents": [
    {
      "component": "size-fit",
      "variant": "maui-jim",
      "data-id": "MJO2001",
      "context": {}
    },
    {
      "component": "size-fit",
      "variant": "maui-jim",
      "data-id": "MJO2002",
      "inactive": true,
      "context": {
        "sides": [
          {
            "modifier": "front",
            "image": {
              "srcset": "/assets/images/size-fit/classic-front-v.png 1x, /assets/images/size-fit/classic-front-v@2x.png 2x",
              "src": "/assets/images/size-fit/classic-front-v.png",
              "alt": "Front"
            },
            "groups": [
              {
                "modifier": "front-upper",
                "measurements": [
                  {
                    "modifier": "eye",
                    "label": "Eye",
                    "value": "49.0"
                  },
                  {
                    "modifier": "bridge",
                    "label": "Bridge",
                    "value": "21.0"
                  },
                  {
                    "modifier": "eye",
                    "label": "Eye",
                    "value": "49.0"
                  }
                ]
              },
              {
                "modifier": "front-height",
                "measurements": [
                  {
                    "modifier": "height",
                    "label": "Height",
                    "value": "39.0"
                  }
                ]
              }
            ],
            "descriptions": [
              {
                "label": "Shape",
                "value": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
              },
              {
                "label": "Bridge",
                "value": "Aenean commodo ligula eget dolor."
              }
            ]
          },
          {
            "modifier": "above",
            "image": {
              "srcset": "/assets/images/size-fit/classic-up-v.png 1x, /assets/images/size-fit/classic-up-v@2x.png 2x",
              "src": "/assets/images/size-fit/classic-up-v.png",
              "alt": "Above"
            },
            "groups": [
              {
                "modifier": "above-base",
                "measurements": [
                  {
                    "modifier": "base",
                    "label": "Base Curve",
                    "value": "5.5"
                  }
                ]
              }
            ],
            "descriptions": [
              {
                "label": "Fit",
                "value": "(eye) 49, (bridge) 21, (temple) 144, 6-base curve"
              },
              {
                "label": "Finishing Treatment",
                "value": "Aenean massa. Cum sociis natoque."
              }
            ]
          },
          {
            "modifier": "side",
            "image": {
              "srcset": "/assets/images/size-fit/classic-side-v.png 1x, /assets/images/size-fit/classic-side-v@2x.png 2x",
              "src": "/assets/images/size-fit/classic-side-v.png",
              "alt": "Side"
            },
            "groups": [
              {
                "modifier": "side-temple",
                "measurements": [
                  {
                    "modifier": "temple",
                    "label": "Temple",
                    "value": "144.0"
                  }
                ]
              }
            ],
            "descriptions": [
              {
                "label": "Material",
                "value": "Quisque rutrum. Aenean imperdiet."
              },
              {
                "label": "Hinge",
                "value": "Lorem ipsum."
              }
            ]
          }
        ]
      }
    },
    {
      "component": "size-fit",
      "variant": "maui-jim",
      "data-id": "MJO2003",
      "inactive": true,
      "context": {}
    },
    {
      "component": "size-fit",
      "variant": "maui-jim",
      "data-id": "MJO2004",
      "inactive": true,
      "context": {
        "sides": [
          {
            "modifier": "front",
            "image": {
              "srcset": "/assets/images/size-fit/classic-front-v.png 1x, /assets/images/size-fit/classic-front-v@2x.png 2x",
              "src": "/assets/images/size-fit/classic-front-v.png",
              "alt": "Front"
            },
            "groups": [
              {
                "modifier": "front-upper",
                "measurements": [
                  {
                    "modifier": "eye",
                    "label": "Eye",
                    "value": "49.0"
                  },
                  {
                    "modifier": "bridge",
                    "label": "Bridge",
                    "value": "21.0"
                  },
                  {
                    "modifier": "eye",
                    "label": "Eye",
                    "value": "49.0"
                  }
                ]
              },
              {
                "modifier": "front-height",
                "measurements": [
                  {
                    "modifier": "height",
                    "label": "Height",
                    "value": "39.0"
                  }
                ]
              }
            ],
            "descriptions": [
              {
                "label": "Shape",
                "value": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
              },
              {
                "label": "Bridge",
                "value": "Aenean commodo ligula eget dolor."
              }
            ]
          },
          {
            "modifier": "above",
            "image": {
              "srcset": "/assets/images/size-fit/classic-up-v.png 1x, /assets/images/size-fit/classic-up-v@2x.png 2x",
              "src": "/assets/images/size-fit/classic-up-v.png",
              "alt": "Above"
            },
            "groups": [
              {
                "modifier": "above-base",
                "measurements": [
                  {
                    "modifier": "base",
                    "label": "Base Curve",
                    "value": "5.5"
                  }
                ]
              }
            ],
            "descriptions": [
              {
                "label": "Fit",
                "value": "(eye) 49, (bridge) 21, (temple) 144, 6-base curve"
              },
              {
                "label": "Finishing Treatment",
                "value": "Aenean massa. Cum sociis natoque."
              }
            ]
          },
          {
            "modifier": "side",
            "image": {
              "srcset": "/assets/images/size-fit/classic-side-v.png 1x, /assets/images/size-fit/classic-side-v@2x.png 2x",
              "src": "/assets/images/size-fit/classic-side-v.png",
              "alt": "Side"
            },
            "groups": [
              {
                "modifier": "side-temple",
                "measurements": [
                  {
                    "modifier": "temple",
                    "label": "Temple",
                    "value": "144.0"
                  }
                ]
              }
            ],
            "descriptions": [
              {
                "label": "Material",
                "value": "Quisque rutrum. Aenean imperdiet."
              },
              {
                "label": "Hinge",
                "value": "Lorem ipsum."
              }
            ]
          }
        ]
      }
    },
    {
      "component": "size-fit",
      "variant": "maui-jim",
      "data-id": "MJO2005",
      "inactive": true,
      "context": {}
    },
    {
      "component": "size-fit",
      "variant": "maui-jim",
      "data-id": "MJO2006",
      "inactive": true,
      "context": {
        "sides": [
          {
            "modifier": "front",
            "image": {
              "srcset": "/assets/images/size-fit/classic-front-v.png 1x, /assets/images/size-fit/classic-front-v@2x.png 2x",
              "src": "/assets/images/size-fit/classic-front-v.png",
              "alt": "Front"
            },
            "groups": [
              {
                "modifier": "front-upper",
                "measurements": [
                  {
                    "modifier": "eye",
                    "label": "Eye",
                    "value": "49.0"
                  },
                  {
                    "modifier": "bridge",
                    "label": "Bridge",
                    "value": "21.0"
                  },
                  {
                    "modifier": "eye",
                    "label": "Eye",
                    "value": "49.0"
                  }
                ]
              },
              {
                "modifier": "front-height",
                "measurements": [
                  {
                    "modifier": "height",
                    "label": "Height",
                    "value": "39.0"
                  }
                ]
              }
            ],
            "descriptions": [
              {
                "label": "Shape",
                "value": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
              },
              {
                "label": "Bridge",
                "value": "Aenean commodo ligula eget dolor."
              }
            ]
          },
          {
            "modifier": "above",
            "image": {
              "srcset": "/assets/images/size-fit/classic-up-v.png 1x, /assets/images/size-fit/classic-up-v@2x.png 2x",
              "src": "/assets/images/size-fit/classic-up-v.png",
              "alt": "Above"
            },
            "groups": [
              {
                "modifier": "above-base",
                "measurements": [
                  {
                    "modifier": "base",
                    "label": "Base Curve",
                    "value": "5.5"
                  }
                ]
              }
            ],
            "descriptions": [
              {
                "label": "Fit",
                "value": "(eye) 49, (bridge) 21, (temple) 144, 6-base curve"
              },
              {
                "label": "Finishing Treatment",
                "value": "Aenean massa. Cum sociis natoque."
              }
            ]
          },
          {
            "modifier": "side",
            "image": {
              "srcset": "/assets/images/size-fit/classic-side-v.png 1x, /assets/images/size-fit/classic-side-v@2x.png 2x",
              "src": "/assets/images/size-fit/classic-side-v.png",
              "alt": "Side"
            },
            "groups": [
              {
                "modifier": "side-temple",
                "measurements": [
                  {
                    "modifier": "temple",
                    "label": "Temple",
                    "value": "144.0"
                  }
                ]
              }
            ],
            "descriptions": [
              {
                "label": "Material",
                "value": "Quisque rutrum. Aenean imperdiet."
              },
              {
                "label": "Hinge",
                "value": "Lorem ipsum."
              }
            ]
          }
        ]
      }
    },
    {
      "component": "size-fit",
      "variant": "maui-jim",
      "data-id": "MJO2007",
      "inactive": true,
      "context": {
        "sides": [
          {
            "modifier": "front",
            "image": {
              "srcset": "/assets/images/size-fit/classic-front-v.png 1x, /assets/images/size-fit/classic-front-v@2x.png 2x",
              "src": "/assets/images/size-fit/classic-front-v.png",
              "alt": "Front"
            },
            "groups": [
              {
                "modifier": "front-upper",
                "measurements": [
                  {
                    "modifier": "eye",
                    "label": "Eye",
                    "value": "49.0"
                  },
                  {
                    "modifier": "bridge",
                    "label": "Bridge",
                    "value": "21.0"
                  },
                  {
                    "modifier": "eye",
                    "label": "Eye",
                    "value": "49.0"
                  }
                ]
              },
              {
                "modifier": "front-height",
                "measurements": [
                  {
                    "modifier": "height",
                    "label": "Height",
                    "value": "39.0"
                  }
                ]
              }
            ],
            "descriptions": [
              {
                "label": "Shape",
                "value": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
              },
              {
                "label": "Bridge",
                "value": "Aenean commodo ligula eget dolor."
              }
            ]
          },
          {
            "modifier": "above",
            "image": {
              "srcset": "/assets/images/size-fit/classic-up-v.png 1x, /assets/images/size-fit/classic-up-v@2x.png 2x",
              "src": "/assets/images/size-fit/classic-up-v.png",
              "alt": "Above"
            },
            "groups": [
              {
                "modifier": "above-base",
                "measurements": [
                  {
                    "modifier": "base",
                    "label": "Base Curve",
                    "value": "5.5"
                  }
                ]
              }
            ],
            "descriptions": [
              {
                "label": "Fit",
                "value": "(eye) 49, (bridge) 21, (temple) 144, 6-base curve"
              },
              {
                "label": "Finishing Treatment",
                "value": "Aenean massa. Cum sociis natoque."
              }
            ]
          },
          {
            "modifier": "side",
            "image": {
              "srcset": "/assets/images/size-fit/classic-side-v.png 1x, /assets/images/size-fit/classic-side-v@2x.png 2x",
              "src": "/assets/images/size-fit/classic-side-v.png",
              "alt": "Side"
            },
            "groups": [
              {
                "modifier": "side-temple",
                "measurements": [
                  {
                    "modifier": "temple",
                    "label": "Temple",
                    "value": "144.0"
                  }
                ]
              }
            ],
            "descriptions": [
              {
                "label": "Material",
                "value": "Quisque rutrum. Aenean imperdiet."
              },
              {
                "label": "Hinge",
                "value": "Lorem ipsum."
              }
            ]
          }
        ]
      }
    },
    {
      "component": "size-fit",
      "variant": "maui-jim",
      "data-id": "MJO2008",
      "inactive": true,
      "context": {}
    },
    {
      "component": "size-fit",
      "variant": "maui-jim",
      "data-id": "MJO2009",
      "inactive": true,
      "context": {
        "sides": [
          {
            "modifier": "front",
            "image": {
              "srcset": "/assets/images/size-fit/classic-front-v.png 1x, /assets/images/size-fit/classic-front-v@2x.png 2x",
              "src": "/assets/images/size-fit/classic-front-v.png",
              "alt": "Front"
            },
            "groups": [
              {
                "modifier": "front-upper",
                "measurements": [
                  {
                    "modifier": "eye",
                    "label": "Eye",
                    "value": "49.0"
                  },
                  {
                    "modifier": "bridge",
                    "label": "Bridge",
                    "value": "21.0"
                  },
                  {
                    "modifier": "eye",
                    "label": "Eye",
                    "value": "49.0"
                  }
                ]
              },
              {
                "modifier": "front-height",
                "measurements": [
                  {
                    "modifier": "height",
                    "label": "Height",
                    "value": "39.0"
                  }
                ]
              }
            ],
            "descriptions": [
              {
                "label": "Shape",
                "value": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
              },
              {
                "label": "Bridge",
                "value": "Aenean commodo ligula eget dolor."
              }
            ]
          },
          {
            "modifier": "above",
            "image": {
              "srcset": "/assets/images/size-fit/classic-up-v.png 1x, /assets/images/size-fit/classic-up-v@2x.png 2x",
              "src": "/assets/images/size-fit/classic-up-v.png",
              "alt": "Above"
            },
            "groups": [
              {
                "modifier": "above-base",
                "measurements": [
                  {
                    "modifier": "base",
                    "label": "Base Curve",
                    "value": "5.5"
                  }
                ]
              }
            ],
            "descriptions": [
              {
                "label": "Fit",
                "value": "(eye) 49, (bridge) 21, (temple) 144, 6-base curve"
              },
              {
                "label": "Finishing Treatment",
                "value": "Aenean massa. Cum sociis natoque."
              }
            ]
          },
          {
            "modifier": "side",
            "image": {
              "srcset": "/assets/images/size-fit/classic-side-v.png 1x, /assets/images/size-fit/classic-side-v@2x.png 2x",
              "src": "/assets/images/size-fit/classic-side-v.png",
              "alt": "Side"
            },
            "groups": [
              {
                "modifier": "side-temple",
                "measurements": [
                  {
                    "modifier": "temple",
                    "label": "Temple",
                    "value": "144.0"
                  }
                ]
              }
            ],
            "descriptions": [
              {
                "label": "Material",
                "value": "Quisque rutrum. Aenean imperdiet."
              },
              {
                "label": "Hinge",
                "value": "Lorem ipsum."
              }
            ]
          }
        ]
      }
    },
    {
      "component": "size-fit",
      "variant": "maui-jim",
      "data-id": "MJO2010",
      "inactive": true,
      "context": {}
    },
    {
      "component": "featured-products",
      "variant": "eyeglass-featured",
      "context": {
        "title": "You May Also Like"
      }
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      /**
       * The customize-page.js file acts as a coordinator for activities in response
       * to events emitted by customize.js, the customize component's script.
       */
    
      const customizeMain = document.querySelector('.main--customize');
      const activeVariant = document.querySelector('.js-product-detail-variant--active');
      const activeProductName = document.querySelector('.product-name__value');
    
      // Use a builder to create an object containing all our product data
      // that will be used to repopulate the Details tab content.
      class Details {
        constructor(builder) {
          this.sku = builder.sku;
          this.frame = builder.frame || false;
          this.lens = builder.lens || false;
          this.material = builder.material || false;
        }
      }
    
      class DetailsBuilder {
        setSku(sku) {
          this.sku = sku;
          return this;
        }
    
        setFrame(frame) {
          this.frame = frame;
          return this;
        }
    
        setLens(lens) {
          this.lens = lens;
          return this;
        }
    
        setMaterial(material) {
          this.material = material;
          return this;
        }
    
        build() {
          return new Details(this);
        }
      }
    
      function getSku(customizations) {
        const skuPattern = activeVariant.getAttribute('data-sku-form');
        // Create a sku based on the incoming info. This will not issue console
        // errors or warnings if either the search or replace string is absent.
        return skuPattern.replace('[s]', customizations.dataFrameStyle)
                         .replace('[c]', customizations.dataFrameColor)
                         .replace('[t]', customizations.dataTempleLength);
      }
    
      // Loop over our details object data and replace the info in the
      // Details tab with updated product data.
      function setDetails(details) {
        const accordionContents = document.querySelectorAll('.js-accordion-tabs-content-wrapper--active .accordion-tabs__content-item');
        const values = [];
    
        Object.keys(details).map(function(key){
          values.push(details[key]);
        });
    
        for (let i = 0; i < accordionContents.length; i++) {
          const labelElement = accordionContents[i].querySelector('strong');
    
          if (labelElement && values[i] != null) {
            accordionContents[i].lastChild.nodeValue = ` ${values[i]}`;
          }
        }
      }
    
      function setImagePaths(sku, customizations) {
        const images = document.querySelectorAll('.js-product-detail-carousel-image');
    
        for (let i = 0; i < images.length; i++) {
          const originalFileName = images[i].src.substring(images[i].src.lastIndexOf('/') + 1);
          const paths = images[i].src.split('/');
          const dir = paths[paths.length - 2];
          const originalPathNameRimless = images[i].src.substring(images[i].src.lastIndexOf('/') - dir.length);
    
          // Assumption: the image file names will be EXACTLY ${sku} (as contained
          // in the radio's `value` attribute) concatenated to `front`, `side`,
          // `quarter` or whatever with an underscore:
          //
          // e.g. `${sku}_quarter.jpg`
          //
          // If this was a bad assumption, this variable will need work.
          const newFileName = originalFileName.replace(/^[^_]+/, sku);
    
          // Sets a rimless sku that removes the temple length suffix
          // because of how images are named (mjo2010-20_front.jpg).
          const rimlessSku = sku.replace(/-[a-z0-9]+$/i, '');
          const newFileNameRimless = originalFileName.replace(/^[^_]+/, rimlessSku);
    
          // This sets the path instead of just filename.
          const newPathNameRimless = (sku.split("-",1))[0] + "/" + newFileNameRimless;
    
          // We have to use getAttribute and setAttribute for srcset
          // because simply using images[i].srcset evaluates to
          // [object HTMLImageElement] and 'undefined' in IE11.
          const rimlessSrcSet = images[i].getAttribute('srcset').replace(originalPathNameRimless, newPathNameRimless);
          const srcSet = images[i].getAttribute('srcset').replace(originalFileName, newFileName);
    
          // If it is rimless (format: MJO2010-140), we need to modify the path.
          // Unlike other products, rimless images are stored in directories according to style values.
          if (customizations.rimless) {
            images[i].src = images[i].src.replace(originalPathNameRimless, newPathNameRimless);
            images[i].setAttribute('srcset', rimlessSrcSet);
          } else {
            images[i].src = images[i].src.replace(originalFileName, newFileName);
            images[i].setAttribute('srcset', srcSet);
          }
        }
      }
    
      function setSizeFit(customizations) {
        const sku = customizations.dataValue;
        const sizeFitSections = document.querySelectorAll('.js-customize-size-fit');
    
        // This goes through all the size and fit sections, matches the data-id
        // with the data-id of the currently selected variant, unhides the match,
        // and hides all other size/fit sections.
        for (let i = 0; i < sizeFitSections.length; i++) {
          const sizeFitDataId = sizeFitSections[i].getAttribute('data-id');
    
          if (sizeFitDataId === sku) {
            sizeFitSections[i].classList.remove('js-hidden');
          }
          else {
            sizeFitSections[i].classList.add('js-hidden');
          }
        }
      }
    
      function handleCustomizationNotify(customizations) {
        // Assemble the sku--see `customizationsNotify()` in `customize.js` to
        // find out where this comes from, and what `customizations` contains.
        const sku = getSku(customizations);
        const activeProductStyleName = document.querySelector('.breadcrumb__item--current');
    
        // Make changes to the current product.
        //
        // Set the data-id attribute on the appropriate element.
        activeVariant.setAttribute('data-id', sku);
        // Update the product name. Clip-on requires style name.
        if (customizations.clipon) {
          activeProductName.innerHTML = activeProductStyleName.innerHTML;
        } else {
          activeProductName.innerHTML = customizations.dataValue;
        }
        // Update the image paths.
        setImagePaths(sku, customizations);
    
        // Update all the product details.
        const details = (new DetailsBuilder())
        .setFrame(customizations.dataFrame)
        .setLens(customizations.dataLens)
        .setMaterial(customizations.dataMaterial)
        .setSku(sku);
    
        setDetails(details);
    
        // Update Size and Fit section.
        setSizeFit(customizations);
    
        // Notify product controls and other listeners.
        window.componentEvents.emitEvent('active-product-variant');
      }
    
      function init() {
        if (activeVariant && customizeMain && !customizeMain.classList.contains('js-component-init')) {
          componentEvents.on('customization-options-notify', handleCustomizationNotify);
          customizeMain.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/customize-page/customize-page.js
  • Filesystem Path: src/components/03-pages/customize-page/customize-page.js
  • Size: 6.9 KB
  • Content:
    .l-customize-upper {
      &:after {
        display: table;
        clear: both;
        content: '';
      }
    
      @include breakpoint($breakpoint-sm-only) {
        display: flex;
        flex-direction: column;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 30px;
      }
    }
    
    .l-customize-customize {
      @include breakpoint($breakpoint-sm-only) {
        order: -4;
      }
    
      @include breakpoint($breakpoint-xl) {
        @include span(4);
        padding-right: 20px;
        float: left;
        border-right: 1px solid $color-light;
      }
    }
    
    .l-customize-detail {
      margin-bottom: 20px;
    
      @include breakpoint($breakpoint-sm-only) {
        order: -5;
      }
    
      @include breakpoint($breakpoint-xl) {
        max-width: calc(66.6666% - 65px);
        margin: 0 20px 0 45px;
        padding-right: 0;
        padding-bottom: 20px;
        padding-left: 0;
        float: right;
        border-bottom: 1px solid $color-light;
    
        .product-detail {
          // Product detail button widths: 36px.
          max-width: calc(100% - 72px);
        }
      }
    }
    
    .l-customize-name {
      margin: 20px $gutter-width-half;
    
      .product-name__summary {
        margin-bottom: 5px;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        order: -6;
      }
    
      @include breakpoint($breakpoint-md) {
        width: calc(100% - 334px);
        float: left;
      }
    
      @include breakpoint($breakpoint-xl) {
        max-width: calc(60% - 318px);
        margin-right: 20px;
        margin-left: 45px;
        padding-right: 0;
        padding-left: 0;
      }
    }
    
    .l-customize-price-cta {
      @include breakpoint($breakpoint-sm-only) {
        order: -3;
        margin: 30px $gutter-width-half;
    
        .product-call-to-action {
          margin-bottom: 30px;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        width: 300px;
        margin-top: 25px;
        margin-right: $gutter-width-half;
        float: right;
        clear: right;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 20px;
        margin-right: $gutter-width;
    
        .product-call-to-action {
          margin-bottom: 20px;
        }
    
        // Customize retains price layout from smaller widths, unlike PDP.
    
        .product-price__inner {
          float: none;
        }
    
        .product-price__value {
          float: left;
        }
    
        .product-price__inventory {
          margin-top: 10px;
          float: right;
        }
    
        .product-price__add-button {
          width: 100%;
        }
      }
    }
    
    .l-customize-description {
      margin: 0 $gutter-width-half;
      font-size: 1.4rem;
      line-height: 2rem;
    
      @include breakpoint($breakpoint-sm-only) {
        order: -2;
      }
    
      @include breakpoint($breakpoint-md) {
        width: calc(100% - 334px);
        clear: left;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: calc(66.6666% - 420px);
        margin-left: 45px;
        float: left;
        clear: none;
      }
    }
    
    .l-customize-controls {
      margin-top: 30px;
      margin-bottom: 30px;
    
      @include breakpoint($breakpoint-sm-only) {
        order: -1;
      }
    
      @include breakpoint(0 ($breakpoint-xl - 1)) {
        .product-controls {
          text-align: center;
        }
    
        .product-controls__item {
          display: inline-block;
          float: none;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        position: absolute;
        top: 15px;
        right: $gutter-width-half;
        margin-top: 0;
      }
    }
    
    .l-customize-lower {
      clear: both;
    }
    
    .customize--rimless,
    .customize--core-clip-on {
      @include breakpoint($breakpoint-xl) {
        min-height: 550px;
      }
    }
    
  • URL: /components/raw/customize-page/customize-page.scss
  • Filesystem Path: src/components/03-pages/customize-page/customize-page.scss
  • Size: 3.3 KB

Product SKUs

The @product-detail component supplies a data attribute used by this page called data-sku-form, and the @customize component provides a custom event type customization-options-notify.

These are used together to create SKU values on the fly. For example, given:

  • an attribute value of [s]-[c]-140, and
  • the following customize-options-notify-event:

    {
      dataFrameStyle: "mjo2001",
      dataFrameColor: "20",
      dataValue: "MJO2001"
    }

The script will assemble and use the sku mjo2001-20-140.