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

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

    <div class="headroom">
        <nav class="header-nav">
            <ul class="header-nav__primary">
                <li class="header-nav__primary-item header-nav__primary-item--active">
                    <a class="header-nav__primary-link" href="#">Sunglasses</a>
                    <div class="header-nav__secondary-wrapper js-header-nav__secondary-wrapper">
                        <div class="u-page-width-max">
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button">
                    Shop
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

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

                      Back
                    </button>
                                        <ul class="header-nav__tertiary header-nav__tertiary--marketing js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <span class="header-nav__tertiary-menu-label">Frame Style</span>
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Aviators</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Classic</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Wrap</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Fashion</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Rectangular</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Cat Eye</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Rimless</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Shield</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--accent" href="#">
                              All Frames
                              <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="header-nav__tertiary-menu">
                                                <span class="header-nav__tertiary-menu-label">Activity</span>
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Golf</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Fish</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Surf</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Run</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Drive</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Hike</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Tennis</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="header-nav__tertiary-menu">
                                                <span class="header-nav__tertiary-menu-label">More</span>
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">New Arrivals</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Best Sellers</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Prescription</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Accessories</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Readers</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Blue Hawaii</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                        <div class="header-nav__tertiary-marketing-placement">
                                            <a class="header-nav__tertiary-marketing-link" href="#">
                                                <div class="header-nav__tertiary-marketing-image" style="background-image: url('/assets/images/megamenu-marketing-placement.jpg');"></div>
                                                <div class="header-nav__tertiary-marketing-text">
                                                    <span class="header-nav__tertiary-marketing-title">Blue Hawaii</span>
                                                    <span class="header-nav__tertiary-marketing-cta">Shop now</span>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    MyMaui
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Home Try-on
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Vintage
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Apparel
                  </a>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="tel:+1800229933">
                    1-888-666-5905
                    <svg class="icon icon--action-phone">
  <use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>

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

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

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

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

                      Back
                    </button>
                                        <ul class="header-nav__tertiary js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Order Status</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Repairs</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Returns</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Product Registration</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Prescription</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Retailers</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">FAQs</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Shipping Information</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Your Account
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Your Orders
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Your Wishlist
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link header-nav__secondary-link--logout" href="#">
                    Logout
                  </a>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link js-modal-open-link" href="#" data-modal-id="country-selector">
                    United States
                    <img src="/assets/images/flag-us.png" alt="United States" width="22" height="14">
                  </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="header-nav__primary-item">
                    <a class="header-nav__primary-link" href="#">Eyeglasses</a>
                    <div class="header-nav__secondary-wrapper js-header-nav__secondary-wrapper">
                        <div class="u-page-width-max">
                        </div>
                    </div>
                </li>
            </ul>
        </nav>
        <div class="header-menu-bar"></div>
        <a class="header__logo-wrapper" href="#">
      <img class="header__logo" src="/assets/images/mauijim-brand-logo.png" alt="Maui Jim logo">
    </a>
        <div class="header__menu-icon">
            <button class="hamburger-spring header__icon header__icon--menu  js-header-icon--menu" type="button">
        <span class="u-visually-hidden">Menu</span>
        <span class="hamburger-spring__box">
          <span class="hamburger-spring__inner"></span>
        </span>
      </button>
        </div>
        <div class="header__icons">
            <div class="header__icons-inner">
                <button class="header__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--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">
          <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">4 items</span>
            </div>
            <div class="header-cart__products">
                <div class="header-cart__item">
                    <a href="#202-02"><img class="header-cart__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;330" alt="Gloss Black"></a>
                    <span class="header-cart__item-info header-cart__item-info--name">PEAHI</span>
                    <span class="header-cart__item-info">Gloss Black</span>
                    <span class="header-cart__item-info">Neutral Grey</span>
                    <span class="header-cart__item-info">SuperThin Glass</span>
                    <span class="header-cart__item-info">Single Gradient</span>
                    <span class="header-cart__item-info header-cart__item-info--qty">Qty: 1</span>
                    <span class="header-cart__item-info header-cart__item-info--price">$149.00</span>
                    <button class="header-cart__item-remove button button--plain-text">Remove</button>
                </div>
                <div class="header-cart__item">
                    <a href="#HTS267-15C"><img class="header-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;330" alt="Olive Stripe"></a>
                    <span class="header-cart__item-info header-cart__item-info--name">WATERWAYS</span>
                    <span class="header-cart__item-info">Olive Stripe</span>
                    <span class="header-cart__item-info">Maui HT™</span>
                    <span class="header-cart__item-info">SuperThin Glass</span>
                    <span class="header-cart__item-info">Single Gradient</span>
                    <div class="header-cart__item-vip-info">
                        <span class="header-cart__item-vip-card-value">VIP Card 30%</span>
                        <span class="header-cart__item-vip-original-price">$319.00</span>
                    </div>
                    <span class="header-cart__item-info header-cart__item-info--qty">Qty: 1</span>
                    <span class="header-cart__item-info header-cart__item-info--price">$219.00</span>
                    <button class="header-cart__item-remove button button--plain-text">Remove</button>
                </div>
                <div class="header-cart__item">
                    <a href="#H257-16C"><img class="header-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;330" alt="Tortoise with Antique Gold"></a>
                    <span class="header-cart__item-info header-cart__item-info--name">KAWIKA</span>
                    <span class="header-cart__item-info">Tortoise with Antique Gold</span>
                    <span class="header-cart__item-info">HCL® Bronze</span>
                    <span class="header-cart__item-info">MauiPure</span>
                    <span class="header-cart__item-info">Single Gradient</span>
                    <div class="header-cart__item-vip-info">
                        <span class="header-cart__item-vip-card-value">VIP Card 30%</span>
                        <span class="header-cart__item-vip-original-price">$319.00</span>
                    </div>
                    <span class="header-cart__item-info header-cart__item-info--qty">Qty: 1</span>
                    <span class="header-cart__item-info header-cart__item-info--price">$299.00</span>
                    <button class="header-cart__item-remove button button--plain-text">Remove</button>
                </div>
                <div class="header-cart__item">
                    <a href="#H178-10"><img class="header-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;330" alt="Tortoise"></a>
                    <span class="header-cart__item-info header-cart__item-info--name">VOYAGER</span>
                    <span class="header-cart__item-info">Tortoise</span>
                    <span class="header-cart__item-info">HCL® Bronze</span>
                    <span class="header-cart__item-info">SuperThin Glass</span>
                    <span class="header-cart__item-info">Single Gradient</span>
                    <span class="header-cart__item-info header-cart__item-info--qty">Qty: 1</span>
                    <span class="header-cart__item-info header-cart__item-info--price">$219.00</span>
                    <button class="header-cart__item-remove button button--plain-text">Remove</button>
                </div>
            </div>
            <div class="header-cart__footer">
                <div class="header-cart__subtotal">
                    <span class="header-cart__subtotal-label">Order Subtotal (4):</span>
                    <span class="header-cart__subtotal-value">$1,096.00</span>
                    <span class="header-cart__subtotal-tax">Inkl. MWST</span>
                </div>
                <div class="header-cart__actions">
                    <a class="header-cart__action button button--primary" href="#">View your cart</a>
                </div>
            </div>
        </div>
        <div class="header-flyout-overlay js-header-flyout-overlay"></div>
    </div>
</header>

<main class="main main--prescription 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 breadcrumb__item--current">
            Prescription
        </li>
    </ul>

    <div class="l-prescription-secondary-hero">
        <div class="secondary-hero">
            <img class="secondary-hero__image u-object-fit-cover" src="/assets/images/hero-prescription-1-large.jpg" sizes="(min-width: 1420px) 1420px, vw" srcset="/assets/images/hero-prescription-1-small.jpg 432w, /assets/images/hero-prescription-1-large.jpg 1420w">
            <div class="secondary-hero__copy">
                <p class="secondary-hero__pretitle">MauiPassport™ Prescription Sunglasses</p>
                <h1 class="secondary-hero__title">See More of the World’s Vibrant Beauty</h1>
                <button class="button button--outlined js-modal-open-link secondary-hero__call-to-action" data-modal-id="video-youtube" data-modal-video="OahN9R9vR5s">Watch a Fitting Experience</button>

            </div>
        </div>

    </div>
    <div class="l-prescription-basic-text">
        <div class="basic-text">
            <h3 class="basic-text__title">The MauiPassport™ Difference</h3>
            <div class="basic-text__columns">
                <div class="basic-text__column">
                    <p>Most prescription sunglasses correct your vision but obscure the brilliant world around you. We created MauiPassport prescription sunglasses to change the way you see the world around you.</p>
                    <p>Digitally processed at our state-of-the-art US lab, our MauiPassport lenses provide incredible visual acuity across the entire lens. Combined with the remarkable clarity and color enhancement of our proprietary PolarizedPlus2® technology,
                        you’ll see the world like never before.</p>
                </div>
            </div>
        </div>

    </div>
    <div class="l-prescription-secondary-hero">
        <div class="secondary-hero">
            <img class="secondary-hero__image u-object-fit-cover" src="/assets/images/hero-prescription-2-large.jpg" sizes="(min-width: 1420px) 1420px, vw" srcset="/assets/images/hero-prescription-2-small.jpg 432w, /assets/images/hero-prescription-2-large.jpg 1420w">
            <div class="secondary-hero__copy">
                <p class="secondary-hero__pretitle">MauiPassport™ Prescription Sunglasses</p>
                <h1 class="secondary-hero__title">95% of Our Sunglasses are Available in Prescription</h1>
                <button class="button button--outlined secondary-hero__call-to-action">Browse Sunglasses</button>

            </div>
        </div>

    </div>
    <div class="l-prescription-basic-text">
        <div class="basic-text">
            <h3 class="basic-text__title">Our State-of-the-Art Lab</h3>
            <div class="basic-text__columns">
                <div class="basic-text__column">
                    <p>Our passion for technology and customer service led us to build our own in-house digital prescription lab. We produce every single prescription lens from this facility in Peoria, Illinois, ensuring you get the absolute highest quality
                        and service available.</p>
                    <p>And because the world’s beauty is so important to us, we designed our lab to be absolutely waste-free. We recycle or reuse all excess lens material produced during processing, for the manufacture of other products, nearly 200,000 pounds
                        per year.</p>
                </div>
            </div>
        </div>

    </div>
    <div class="l-prescription-secondary-hero">
        <div class="secondary-hero">
            <img class="secondary-hero__image u-object-fit-cover" src="/assets/images/hero-prescription-3-large.jpg" sizes="(min-width: 1420px) 1420px, vw" srcset="/assets/images/hero-prescription-3-small.jpg 432w, /assets/images/hero-prescription-3-large.jpg 1420w">
            <div class="secondary-hero__copy">
                <p class="secondary-hero__pretitle">See For Yourself</p>
                <h1 class="secondary-hero__title">Find a Prescription Retailer</h1>
                <button class="button button--outlined secondary-hero__call-to-action">Find a Retailer</button>

            </div>
        </div>

    </div>
    <div class="l-prescription-basic-text">
        <div class="basic-text">
            <h3 class="basic-text__title">PolarizedPlus2 Lens Technology</h3>
            <div class="basic-text__columns">
                <div class="basic-text__column">
                    <p>Featured in every MauiPassport lens, our PolarizedPlus2 technology shields your eyes from glare and harmful UV while enhancing the world’s vibrant colors and intricate details.</p>
                    <ul>
                        <li>Eliminates 99.9% of glare</li>
                        <li>Enhances color and contrast</li>
                        <li>Promotes eye health</li>
                    </ul>
                </div>
                <div class="basic-text__column">
                    <p><img src="/assets/images/skin-cancer-foundation.jpg" style="float: left; margin: 0 10px 10px 0;">All Maui Jim sunglasses have been recommended by the <a href="#">Skin Cancer Foundation</a> as an effective ultraviolet (UV) filter for
                        the eyes and surrounding skin. Proper UV protection is critical, as UV radiation from the sun plays a significant role in the development of skin cancer.</p>
                    <p>Always choose polarized sunglasses that block out 99 - 100% of UVA and UVB radiation to ensure you're protected. Sunglasses that do not provide UV protection can cause more damage to your pupils because they dilate when the light is
                        blocked, exposing your eyes to more harmful rays than without sunglasses.</p>
                </div>
            </div>
        </div>

    </div>
    <div class="l-prescription-secondary-hero">
        <div class="secondary-hero">
            <img class="secondary-hero__image u-object-fit-cover" src="/assets/images/hero-prescription-4-large.jpg" sizes="(min-width: 1420px) 1420px, vw" srcset="/assets/images/hero-prescription-4-small.jpg 432w, /assets/images/hero-prescription-4-large.jpg 1420w">
            <div class="secondary-hero__copy">
                <p class="secondary-hero__pretitle">Learn More</p>
                <h1 class="secondary-hero__title">See How We Reveal the World’s Beauty</h1>
                <button class="button button--outlined secondary-hero__call-to-action">Explore Our Technology</button>

            </div>
        </div>

    </div>
    <div class="l-prescription-basic-text">
        <div class="basic-text">
            <h3 class="basic-text__title">Perfect Edge-to-Edge Clarity</h3>
            <div class="basic-text__columns">
                <div class="basic-text__column">
                    <p>We make every prescription lens using our exclusive digital lens design and cutting-edge direct surfacing technology. This approach delivers the widest possible field of view, so you can see clear, colorful detail across the entirety
                        of each lens.</p>
                    <p>Our process also produces prescriptions that are 10 times more accurate than those of conventional labs and maintains the highest optical and quality standards in the industry.</p>
                </div>
            </div>
        </div>

    </div>
    <div class="l-prescription-multi-image-hero">
        <div class="multi-image-hero u-page-width-max">
            <div class="multi-image-hero__image-wrapper">
                <div class="multi-image-hero__image-inner">
                    <img class="multi-image-hero__image" src="/assets/images/hero-multi-image-1.jpg">
                    <span class="multi-image-hero__image-title">MauiPassport Lens</span>
                </div>
                <p class="multi-image-hero__image-description">MauiPassport gives you distortion-free clarity across the entire lens. PolarizedPlus2 provides brilliant color without glare or harmful UV rays.</p>
            </div>
            <div class="multi-image-hero__image-wrapper">
                <div class="multi-image-hero__image-inner">
                    <img class="multi-image-hero__image" src="/assets/images/hero-multi-image-2.jpg">
                    <span class="multi-image-hero__image-title">Conventional Rx Lens</span>
                </div>
                <p class="multi-image-hero__image-description">For comparative field of view.</p>
            </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 (dynamicComponent header)}}
<main class="main main--prescription u-page-width-max">
  {{render '@breadcrumb' breadcrumb}}
  {{#each components}}
  <div class="l-prescription-{{component}}">
    {{render (dynamicVariant component variant) context}}
  </div>
  {{/each}}
</main>
{{render '@subscribe'}}
{{render (dynamicComponent footer)}}
{
  "header": "header",
  "footer": "footer",
  "breadcrumb": {
    "items": [
      {
        "label": "Maui Jim",
        "path": "#"
      },
      {
        "label": "Prescription",
        "current": true
      }
    ]
  },
  "components": [
    {
      "component": "secondary-hero",
      "variant": "default",
      "context": {
        "title": "See More of the World’s Vibrant Beauty",
        "pretitle": "MauiPassport™ Prescription Sunglasses",
        "callsToAction": [
          {
            "modifier": "outlined",
            "buttonValue": "Watch a Fitting Experience",
            "buttonModal": "video-youtube",
            "buttonModalVideo": "OahN9R9vR5s",
            "classes": [
              "secondary-hero__call-to-action"
            ]
          }
        ],
        "image": {
          "small": {
            "src": "/assets/images/hero-prescription-1-small.jpg",
            "width": "432"
          },
          "large": {
            "src": "/assets/images/hero-prescription-1-large.jpg",
            "width": "1420"
          },
          "vw": "100"
        }
      }
    },
    {
      "component": "basic-text",
      "variant": "default",
      "context": {
        "title": "The MauiPassport™ Difference",
        "columns": [
          {
            "items": [
              "<p>Most prescription sunglasses correct your vision but obscure the brilliant world around you. We created MauiPassport prescription sunglasses to change the way you see the world around you.</p>",
              "<p>Digitally processed at our state-of-the-art US lab, our MauiPassport lenses provide incredible visual acuity across the entire lens. Combined with the remarkable clarity and color enhancement of our proprietary PolarizedPlus2® technology, you’ll see the world like never before.</p>"
            ]
          }
        ]
      }
    },
    {
      "component": "secondary-hero",
      "variant": "default",
      "context": {
        "title": "95% of Our Sunglasses are Available in Prescription",
        "pretitle": "MauiPassport™ Prescription Sunglasses",
        "callsToAction": [
          {
            "modifier": "outlined",
            "buttonValue": "Browse Sunglasses",
            "classes": [
              "secondary-hero__call-to-action"
            ]
          }
        ],
        "image": {
          "small": {
            "src": "/assets/images/hero-prescription-2-small.jpg",
            "width": "432"
          },
          "large": {
            "src": "/assets/images/hero-prescription-2-large.jpg",
            "width": "1420"
          },
          "vw": "100"
        }
      }
    },
    {
      "component": "basic-text",
      "variant": "default",
      "context": {
        "title": "Our State-of-the-Art Lab",
        "columns": [
          {
            "items": [
              "<p>Our passion for technology and customer service led us to build our own in-house digital prescription lab. We produce every single prescription lens from this facility in Peoria, Illinois, ensuring you get the absolute highest quality and service available.</p>",
              "<p>And because the world’s beauty is so important to us, we designed our lab to be absolutely waste-free. We recycle or reuse all excess lens material produced during processing, for the manufacture of other products, nearly 200,000 pounds per year.</p>"
            ]
          }
        ]
      }
    },
    {
      "component": "secondary-hero",
      "variant": "default",
      "context": {
        "title": "Find a Prescription Retailer",
        "pretitle": "See For Yourself",
        "callsToAction": [
          {
            "modifier": "outlined",
            "buttonValue": "Find a Retailer",
            "classes": [
              "secondary-hero__call-to-action"
            ]
          }
        ],
        "image": {
          "small": {
            "src": "/assets/images/hero-prescription-3-small.jpg",
            "width": "432"
          },
          "large": {
            "src": "/assets/images/hero-prescription-3-large.jpg",
            "width": "1420"
          },
          "vw": "100"
        }
      }
    },
    {
      "component": "basic-text",
      "variant": "default",
      "context": {
        "title": "PolarizedPlus2 Lens Technology",
        "columns": [
          {
            "items": [
              "<p>Featured in every MauiPassport lens, our PolarizedPlus2 technology shields your eyes from glare and harmful UV while enhancing the world’s vibrant colors and intricate details.</p>",
              "<ul><li>Eliminates 99.9% of glare</li><li>Enhances color and contrast</li><li>Promotes eye health</li></ul>"
            ]
          },
          {
            "items": [
              "<p><img src=\"/assets/images/skin-cancer-foundation.jpg\" style=\"float: left; margin: 0 10px 10px 0;\">All Maui Jim sunglasses have been recommended by the <a href=\"#\">Skin Cancer Foundation</a> as an effective ultraviolet (UV) filter for the eyes and surrounding skin. Proper UV protection is critical, as UV radiation from the sun plays a significant role in the development of skin cancer.</p>",
              "<p>Always choose polarized sunglasses that block out 99 - 100% of UVA and UVB radiation to ensure you're protected. Sunglasses that do not provide UV protection can cause more damage to your pupils because they dilate when the light is blocked, exposing your eyes to more harmful rays than without sunglasses.</p>"
            ]
          }
        ]
      }
    },
    {
      "component": "secondary-hero",
      "variant": "default",
      "context": {
        "title": "See How We Reveal the World’s Beauty",
        "pretitle": "Learn More",
        "callsToAction": [
          {
            "modifier": "outlined",
            "buttonValue": "Explore Our Technology",
            "classes": [
              "secondary-hero__call-to-action"
            ]
          }
        ],
        "image": {
          "small": {
            "src": "/assets/images/hero-prescription-4-small.jpg",
            "width": "432"
          },
          "large": {
            "src": "/assets/images/hero-prescription-4-large.jpg",
            "width": "1420"
          },
          "vw": "100"
        }
      }
    },
    {
      "component": "basic-text",
      "variant": "default",
      "context": {
        "title": "Perfect Edge-to-Edge Clarity",
        "columns": [
          {
            "items": [
              "<p>We make every prescription lens using our exclusive digital lens design and cutting-edge direct surfacing technology. This approach delivers the widest possible field of view, so you can see clear, colorful detail across the entirety of each lens.</p>",
              "<p>Our process also produces prescriptions that are 10 times more accurate than those of conventional labs and maintains the highest optical and quality standards in the industry.</p>"
            ]
          }
        ]
      }
    },
    {
      "component": "multi-image-hero",
      "variant": "default"
    }
  ],
  "pageModals": [
    {
      "component": "video-modal",
      "context": {
        "id": "video-youtube",
        "youtubeId": null
      }
    }
  ]
}
  • Content:
    .l-prescription-basic-text {
      margin: 45px auto;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 35px;
        margin-bottom: 35px;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 75px;
        margin-bottom: 45px;
      }
    
      @include breakpoint(1200px) {
        max-width: 1180px;
      }
    }
    
    .l-prescription-multi-image-hero {
      margin-bottom: 60px;
    }
    
  • URL: /components/raw/prescription-page/prescription-page.scss
  • Filesystem Path: src/components/03-pages/prescription-page/prescription-page.scss
  • Size: 357 Bytes

There are no notes for this item.