<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-active">
<use xlink:href="/assets/icons/icons.svg#account-active"></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'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--pdp main--pdp-rimless 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="u-page-width-max-restricted">
<div class="l-pdp-upper">
<div class="l-pdp-detail">
<div class="product-detail product-detail--rimless js-product-detail">
<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" data-mjo2010="/assets/images/dummy-products/mjo2010-20-140_front.jpg"
data-mjm025511-fake="/assets/images/dummy-products/mjo2001-20-140_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" data-mjo2010="/assets/images/dummy-products/mjo2010-20-140_quarter.jpg"
data-mjm025511-fake="/assets/images/dummy-products/mjo2001-20-140_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" data-mjo2010="/assets/images/dummy-products/mjo2010-20-140_side.jpg"
data-mjm025511-fake="/assets/images/dummy-products/mjo2001-20-140_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 class="product-detail__variant-wrapper js-product-detail-variant-wrapper">
<h3 class="product-detail__variant-label js-product-detail-variant-label" data-current-name="Matte Black">Matte Black</h3>
<ul class="product-detail__variants js-product-detail-variants js-product-detail-variants--active">
<li class="product-detail__variant js-product-detail-variant js-product-detail-variant--active" data-id="mjo2010-140" data-name="Matte Black">
<button class="product-detail__variant-button" style="background-color:#000;">
<img class="product-detail__variant-image" src="https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png" alt="Matte Black">
</button>
</li>
<li class="product-detail__variant js-product-detail-variant" data-id="mjo2010" data-name="Matte Black">
<button class="product-detail__variant-button" style="background-color:#000;">
<img class="product-detail__variant-image" src="https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png" alt="Matte Black">
</button>
</li>
<li class="product-detail__variant js-product-detail-variant" data-id="mjm025511-fake" data-name="Redfish">
<button class="product-detail__variant-button" style="background-color:#7d4a07;">
<img class="product-detail__variant-image" src="https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png" alt="Redfish">
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="l-pdp-name l-pdp-block">
<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-pdp-price-cta l-pdp-block">
<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>
</div>
<div class="l-pdp-accordion-tabs">
<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'ahi ('peh-AH-hee'), on Maui's north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.</p>
</div>
</div>
<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>
<p class="accordion-tabs__content-item">
<a class="accordion-tabs__content-call-to-action" href="#lens-details">
Lens Details
<svg class="icon icon--arrow-right">
<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</a>
</p>
</div>
</div>
<div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" 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 & returns</p>
</div>
</div>
</div>
</div>
<div class="accordion-tabs js-accordion-tabs product-description js-product-description js-hidden" data-product-id="mjo2010">
<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'ahi ('peh-AH-hee'), on Maui's north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.</p>
</div>
</div>
<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</p>
<p class="accordion-tabs__content-item">
<a class="accordion-tabs__content-call-to-action" href="#lens-details">
Lens Details
<svg class="icon icon--arrow-right">
<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</a>
</p>
</div>
</div>
<div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" 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 & returns</p>
</div>
</div>
</div>
</div>
<div class="accordion-tabs js-accordion-tabs product-description js-product-description js-hidden" data-product-id="mjm025511-fake">
<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'ahi ('peh-AH-hee'), on Maui's north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.</p>
</div>
</div>
<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> Redfish</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> mjm025511-fake</p>
<p class="accordion-tabs__content-item">
<a class="accordion-tabs__content-call-to-action" href="#lens-details">
Lens Details
<svg class="icon icon--arrow-right">
<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</a>
</p>
</div>
</div>
<div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" 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 & returns</p>
</div>
</div>
</div>
</div>
</div>
<div class="l-pdp-calls-to-action l-pdp-block">
<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-pdp-controls l-pdp-block">
<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="202-02" 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="202-02" 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>
<li class="product-controls__item">
<button class="product-controls__button product-controls__button--compare" data-product-control="compare" data-active-variant="202-02" 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-pdp-size-fit l-pdp-block">
<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-pdp-featured-products l-pdp-block">
<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$&wid=340" data-variant="202-02"
data-202-02-front="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&wid=340" data-202-02-angle="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&wid=340" data-202-02-side="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&wid=340"
data-B202-2M-front="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&wid=340" data-B202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$&wid=340" data-B202-2M-side="https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$&wid=340"
data-H202-10-front="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&wid=340" data-H202-10-angle="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&wid=340" data-H202-10-side="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&wid=340"
data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&wid=340" data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&wid=340" data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&wid=340"
data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&wid=340" data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&wid=340" data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&wid=340"
data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&wid=340" data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&wid=340" data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&wid=340"
data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&wid=340" data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&wid=340" data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&wid=340"
data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&wid=340" data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&wid=340" data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&wid=340"
data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&wid=340" data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&wid=340" data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&wid=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$&wid=340" data-variant="HTS267-15C"
data-HTS267-15C-front="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&wid=340" data-HTS267-15C-angle="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_quarter?$config1800$&wid=340" data-HTS267-15C-side="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_side?$config1800$&wid=340"
data-HS267-10M-front="https://s7d2.scene7.com/is/image/mauijim/HS267-10M_front?$config1800$&wid=340" data-HS267-10M-angle="https://s7d2.scene7.com/is/image/mauijim/HS267-10M_quarter?$config1800$&wid=340" data-HS267-10M-side="https://s7d2.scene7.com/is/image/mauijim/HS267-10M_side?$config1800$&wid=340"
data-GS267-02MR-front="https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_front?$config1800$&wid=340" data-GS267-02MR-angle="https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_quarter?$config1800$&wid=340" data-GS267-02MR-side="https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_side?$config1800$&wid=340"
data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&wid=340" data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&wid=340" data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&wid=340"
data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&wid=340" data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&wid=340" data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&wid=340"
data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&wid=340" data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&wid=340" data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&wid=340"
data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&wid=340" data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&wid=340" data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&wid=340"
data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&wid=340" data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&wid=340" data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&wid=340"
data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&wid=340" data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&wid=340" data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&wid=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$&wid=340" data-variant="H257-16C"
data-H257-16C-front="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&wid=340" data-H257-16C-angle="https://s7d2.scene7.com/is/image/mauijim/H257-16C_quarter?$config1800$&wid=340" data-H257-16C-side="https://s7d2.scene7.com/is/image/mauijim/H257-16C_side?$config1800$&wid=340"
data-B257-05CR-front="https://s7d2.scene7.com/is/image/mauijim/B257-05CR_front?$config1800$&wid=340" data-B257-05CR-angle="https://s7d2.scene7.com/is/image/mauijim/B257-05CR_quarter?$config1800$&wid=340" data-B257-05CR-side="https://s7d2.scene7.com/is/image/mauijim/B257-05CR_side?$config1800$&wid=340"
data-257-17C-front="https://s7d2.scene7.com/is/image/mauijim/257-17C_front?$config1800$&wid=340" data-257-17C-angle="https://s7d2.scene7.com/is/image/mauijim/257-17C_quarter?$config1800$&wid=340" data-257-17C-side="https://s7d2.scene7.com/is/image/mauijim/257-17C_side?$config1800$&wid=340"
data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&wid=340" data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&wid=340" data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&wid=340"
data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&wid=340" data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&wid=340" data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&wid=340"
data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&wid=340" data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&wid=340" data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&wid=340"
data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&wid=340" data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&wid=340" data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&wid=340"
data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&wid=340" data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&wid=340" data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&wid=340"
data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&wid=340" data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&wid=340" data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&wid=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$&wid=340" data-variant="H178-10"
data-H178-10-front="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&wid=340" data-H178-10-angle="https://s7d2.scene7.com/is/image/mauijim/H178-10_quarter?$config1800$&wid=340" data-H178-10-side="https://s7d2.scene7.com/is/image/mauijim/H178-10_side?$config1800$&wid=340"
data-178-02-front="https://s7d2.scene7.com/is/image/mauijim/178-02_front?$config1800$&wid=340" data-178-02-angle="https://s7d2.scene7.com/is/image/mauijim/178-02_quarter?$config1800$&wid=340" data-178-02-side="https://s7d2.scene7.com/is/image/mauijim/178-02_side?$config1800$&wid=340"
data-H202-10-front="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&wid=340" data-H202-10-angle="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&wid=340" data-H202-10-side="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&wid=340"
data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&wid=340" data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&wid=340" data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&wid=340"
data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&wid=340" data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&wid=340" data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&wid=340"
data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&wid=340" data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&wid=340" data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&wid=340"
data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&wid=340" data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&wid=340" data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&wid=340"
data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&wid=340" data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&wid=340" data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&wid=340"
data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&wid=340" data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&wid=340" data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&wid=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>
</main>
<div class="subscribe">
<div class="u-page-width-max">
<div class="subscribe__text">
<h5 class="subscribe__header">Subscribe to our '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 & 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 '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.component header.variant) header.context merge=true}}
<main class="main main--pdp{{#if modifier}} main--pdp-{{modifier}}{{/if}} u-page-width-max">
{{render '@breadcrumb' breadcrumb }}
<div class="u-page-width-max-restricted">
<div class="l-pdp-upper">
<div class="l-pdp-detail">
{{render (dynamicVariant detail.component detail.variant) detail.context}}
</div>
<div class="l-pdp-name l-pdp-block">
{{render (dynamicVariant name.component name.variant) name.context merge=true}}
</div>
<div class="l-pdp-price-cta l-pdp-block">
{{#each options}}
{{render (dynamicVariant component variant) context}}
{{/each}}
{{#if price}}
{{render (dynamicVariant price.component price.variant) price.context merge=true}}
{{/if}}
{{#each upperCallsToAction}}
{{render (dynamicVariant component variant) context merge=true}}
{{/each}}
</div>
</div>
<div class="l-pdp-accordion-tabs">
{{render (dynamicVariant description.component description.variant) description.context}}
</div>
{{#if lowerCallsToAction}}
<div class="l-pdp-calls-to-action l-pdp-block">
{{#each lowerCallsToAction}}
{{render (dynamicVariant component variant) context merge=true}}
{{/each}}
{{#if link}}
<a href="#" class="{{link.class}}">{{link.text}}</a>
{{/if}}
</div>
{{/if}}
<div class="l-pdp-controls l-pdp-block">
{{render (dynamicVariant controls.component controls.variant) controls.context merge=true}}
</div>
</div>
{{#each lowerComponents}}
<div class="l-pdp-{{component}} l-pdp-block"{{#if id}} id="{{id}}"{{/if}}>
{{render (dynamicVariant component variant) context merge=true}}
</div>
{{/each}}
</main>
{{render '@subscribe'}}
{{render (dynamicVariant footer.component footer.variant) footer.context merge=true}}
{
"pageCss": [
"products"
],
"header": {
"component": "header",
"variant": "maui-jim--eyeglasses",
"context": {
"activeAccount": true,
"activeItem": "Shop"
}
},
"footer": {
"component": "footer",
"variant": "maui-jim"
},
"breadcrumb": {
"items": [
{
"label": "Maui Jim",
"path": "#"
},
{
"label": "Eyeglasses",
"path": "#"
},
{
"label": "Specialty Metal",
"path": "#"
},
{
"label": "MJM025511",
"current": null
}
]
},
"detail": {
"component": "product-detail",
"variant": "rimless"
},
"name": {
"component": "product-name",
"variant": "maui-jim",
"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-half",
"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"
}
},
{
"id": "mjo2010",
"name": "Matte Black",
"color": "#000",
"orderMonth": null,
"orderYear": null,
"locationCategory": null,
"purchaseLocation": null,
"images": {
"front": "/assets/images/dummy-products/mjo2010-20-140_front.jpg",
"angle": "/assets/images/dummy-products/mjo2010-20-140_quarter.jpg",
"side": "/assets/images/dummy-products/mjo2010-20-140_side.jpg"
},
"swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
"swatchImage": null,
"active": null,
"price": "$229.00",
"salePrice": null,
"url": "#mjo2010",
"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",
"inactive": true,
"material": "mauipure"
}
},
{
"id": "mjm025511-fake",
"name": "Redfish",
"color": "#7d4a07",
"orderMonth": null,
"orderYear": null,
"locationCategory": null,
"purchaseLocation": null,
"images": {
"front": "/assets/images/dummy-products/mjo2001-20-140_front.jpg",
"angle": "/assets/images/dummy-products/mjo2001-20-140_quarter.jpg",
"side": "/assets/images/dummy-products/mjo2001-20-140_side.jpg"
},
"swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
"swatchImage": null,
"active": null,
"price": "$229.00",
"salePrice": null,
"url": "#mjm025511-fake",
"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": "mjm025511-fake",
"inactive": true,
"material": "mauipure"
}
}
],
"callToAction": null,
"mauijim": null,
"zeal": null,
"excludeVariants": null,
"mymaui": null,
"prescription": "true"
},
"excludeRatingLink": true
}
},
"price": null,
"description": {
"component": "product-description",
"variant": "maui-jim",
"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-half",
"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"
}
},
{
"id": "mjo2010",
"name": "Matte Black",
"color": "#000",
"orderMonth": null,
"orderYear": null,
"locationCategory": null,
"purchaseLocation": null,
"images": {
"front": "/assets/images/dummy-products/mjo2010-20-140_front.jpg",
"angle": "/assets/images/dummy-products/mjo2010-20-140_quarter.jpg",
"side": "/assets/images/dummy-products/mjo2010-20-140_side.jpg"
},
"swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
"swatchImage": null,
"active": null,
"price": "$229.00",
"salePrice": null,
"url": "#mjo2010",
"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",
"inactive": true,
"material": "mauipure"
}
},
{
"id": "mjm025511-fake",
"name": "Redfish",
"color": "#7d4a07",
"orderMonth": null,
"orderYear": null,
"locationCategory": null,
"purchaseLocation": null,
"images": {
"front": "/assets/images/dummy-products/mjo2001-20-140_front.jpg",
"angle": "/assets/images/dummy-products/mjo2001-20-140_quarter.jpg",
"side": "/assets/images/dummy-products/mjo2001-20-140_side.jpg"
},
"swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
"swatchImage": null,
"active": null,
"price": "$229.00",
"salePrice": null,
"url": "#mjm025511-fake",
"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": "mjm025511-fake",
"inactive": true,
"material": "mauipure"
}
}
],
"callToAction": null,
"mauijim": null,
"zeal": null,
"excludeVariants": null,
"mymaui": null,
"prescription": "true"
},
"featuredTab": true,
"lensDetail": true,
"excludeAvailability": true
}
},
"controls": {
"component": "product-controls",
"variant": "default",
"context": {
"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"
},
{
"component": "featured-products",
"variant": "eyeglass-featured",
"context": {
"title": "You May Also Like",
"cardVariant": "eyeglass-featured"
}
}
],
"modifier": "rimless",
"upperCallsToAction": [
{
"component": "product-call-to-action",
"variant": "find-an-optician"
}
],
"lowerCallsToAction": [
{
"component": "product-call-to-action",
"variant": "print"
}
]
}
(function (window) {
'use strict';
function handleMagnificationSelectChange(e) {
if (e.target.value) {
changeMagnification(e.target.value);
}
}
function changeMagnification(magnification) {
componentEvents.emitEvent('pdp-magnification-change', [magnification]);
}
function init() {
const magnificationSelects = document.querySelectorAll('.js-select-pdp-magnification');
for (let i = 0; i < magnificationSelects.length; i++) {
if (!magnificationSelects[i].classList.contains('js-component-init')) {
magnificationSelects[i].addEventListener('change', handleMagnificationSelectChange);
changeMagnification(magnificationSelects[i].value);
magnificationSelects[i].classList.add('js-component-init');
}
}
}
// Allow application JS to reinitialize any instances added with Ajax, etc.
if (typeof componentEvents !== 'undefined') {
componentEvents.on('component-init', init);
}
init();
})(this);
.l-pdp-block {
margin: 30px 0;
}
.l-pdp-upper {
@include breakpoint($breakpoint-sm-only) {
display: flex;
flex-direction: column;
}
@include breakpoint($breakpoint-md) {
padding: 0 $gutter-width-half;
}
@include breakpoint($breakpoint-xl) {
position: relative;
padding: 0;
}
}
.l-pdp-detail {
@include breakpoint($breakpoint-sm-only) {
order: 2;
}
@include breakpoint($breakpoint-md) {
padding-bottom: 10px;
border-bottom: 1px solid $color-light;
}
}
.l-pdp-name {
@include breakpoint($breakpoint-sm-only) {
order: 1;
margin-bottom: 0;
}
@include breakpoint($breakpoint-md) {
margin-top: 18px;
float: left;
}
@include breakpoint($breakpoint-xl) {
margin-bottom: 30px;
.product-name__summary {
margin-bottom: 0;
}
.product-name__rating-link {
margin-top: $gutter-width;
}
}
}
.l-pdp-price-cta {
@include clearfix;
.form-item--select {
@include clearfix;
margin: 0 0 25px;
font-size: 0;
}
.label {
display: inline-block;
margin: 0;
line-height: 3.0rem;
@include breakpoint($breakpoint-md) {
display: block;
text-align: left;
}
@include breakpoint($breakpoint-xl) {
display: inline-block;
float: left;
line-height: 5.0rem;
}
}
.select-wrapper {
display: inline-block;
width: 100%;
}
.product-price {
width: 100%;
float: right;
@include breakpoint($breakpoint-md) {
width: 280px;
}
@include breakpoint($breakpoint-xl) {
width: 100%;
}
}
@include breakpoint($breakpoint-sm-only) {
order: 3;
padding: 0 $gutter-width-half;
}
@include breakpoint($breakpoint-md) {
margin-top: 15px;
float: right;
.form-item--select {
text-align: right;
&.form-item--error {
margin-bottom: 46px;
}
.input-error {
position: absolute;
right: 0;
width: 200px;
text-align: left;
}
}
.label {
text-align: left;
}
}
@include breakpoint($breakpoint-xl) {
width: 32%;
.select-wrapper {
width: 300px;
}
}
}
.l-pdp-accordion-tabs,
.l-pdp-calls-to-action {
@include breakpoint($breakpoint-md) {
padding: 0 $gutter-width-half;
box-sizing: border-box;
}
}
.l-pdp-accordion-tabs {
@include breakpoint($breakpoint-md) {
clear: both;
.accordion-tabs__content-item {
font-size: 1.4rem;
line-height: 2.0rem;
}
.accordion-tabs__content-wrapper:first-child {
@include span(12);
margin-top: 0;
margin-bottom: 10px;
padding: 0;
.accordion-tabs__content {
padding: 0;
}
.accordion-tabs__content-item:first-child {
margin-top: 0;
}
}
}
@include breakpoint($breakpoint-xl) {
width: 48%;
margin: 0;
padding: 0;
float: left;
clear: left;
}
}
.l-pdp-calls-to-action {
padding: 0 $gutter-width-half;
.product-call-to-action:not(:last-of-type) {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid $color-light;
@include breakpoint($breakpoint-xl) {
margin-bottom: 24px;
padding-bottom: 30px;
border-bottom: 1px solid $color-light;
}
}
@include breakpoint($breakpoint-xl) {
width: 32%;
margin-top: -28px;
padding: 0;
float: right;
}
}
.l-pdp-controls {
@include breakpoint($breakpoint-xl) {
position: absolute;
top: 15px;
right: $gutter-width-half;
margin-top: 0;
}
}
.l-pdp-featured,
.l-pdp-featured-products {
clear: both;
}
.main--pdp-core,
.main--pdp-rimless {
@include breakpoint($breakpoint-xl) {
.product-call-to-action {
float: right;
clear: both;
&:not(:last-child) {
margin: 0 0 $gutter-width;
padding: 0;
border-bottom-style: none;
}
}
.product-call-to-action__label {
margin: 0 0 3px;
}
}
.l-pdp-price-cta {
@include breakpoint($breakpoint-sm-only) {
margin-top: 10px;
margin-bottom: 60px;
}
@include breakpoint($breakpoint-md) {
.product-call-to-action__button {
min-width: 200px;
box-sizing: border-box;
}
}
}
.l-pdp-calls-to-action {
margin-top: 35px;
@include breakpoint($breakpoint-xl) {
margin-top: -1 * $gutter-width-half;
}
}
.l-pdp-controls {
@include breakpoint(0 ($breakpoint-xl - 1)) {
.product-controls {
text-align: center;
}
.product-controls__item {
display: inline-block;
float: none;
}
}
}
}
.pdp-text-link {
display: block;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid $color-light;
color: $color-dark;
line-height: 2.3rem;
text-decoration: none;
@include breakpoint($breakpoint-xl) {
margin-top: 24px;
padding-top: 30px;
}
&:hover {
color: $color-primary;
}
}
There are no notes for this item.