<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">
<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 js-header-nav--tertiary">
<li class="header-nav__tertiary-menu">
<ul class="header-nav__tertiary-menu-items header-nav__tertiary-menu-items--graphic">
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--graphic">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--graphic" href="#">
<img class="header-nav__tertiary-menu-graphic" src="/assets/images/zeal-header-nav-sunglasses.png">
Sunglasses
</a>
</li>
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--graphic">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--graphic" href="#">
<img class="header-nav__tertiary-menu-graphic" src="/assets/images/zeal-header-nav-sunglasses.png">
Goggles
</a>
</li>
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--graphic">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--graphic" href="#">
<img class="header-nav__tertiary-menu-graphic" src="/assets/images/zeal-header-nav-sunglasses.png">
Accessory Lenses
</a>
</li>
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--graphic">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--graphic" href="#">
<img class="header-nav__tertiary-menu-graphic" src="/assets/images/zeal-header-nav-sunglasses.png">
Accessories
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="header-nav__secondary-item js-header-nav-item">
<button class="header-nav__secondary-button js-header-nav-button">
TECHNOLOGY
<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 header-nav__tertiary-menu-items--horizontal">
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
Sunglasses Technology
</a>
</li>
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
Prescription
</a>
</li>
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
Goggle Technology
</a>
</li>
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
Tech Goggle Support
</a>
</li>
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
RLs
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="header-nav__secondary-item js-header-nav-item">
<button class="header-nav__secondary-button js-header-nav-button">
OUR STORY
<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 header-nav__tertiary-menu-items--horizontal">
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
Who We Are
</a>
</li>
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
Ambassadors
</a>
</li>
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
Community
</a>
</li>
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
Footprint
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="header-nav__secondary-item js-header-nav-item">
<button class="header-nav__secondary-button js-header-nav-button">
EXPLORE MORE
<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 header-nav__tertiary-menu-items--horizontal">
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
Blog
</a>
</li>
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
Events
</a>
</li>
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
Media
</a>
</li>
<li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
Adventures
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="header-nav__secondary-item js-header-nav-item">
<a class="header-nav__secondary-link" href="">
Customer Service
</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:+18884549325">
(888) 454-9325
<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="#">
Login
</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>
</ul>
</nav>
<div class="header-menu-bar"></div>
<a class="header__logo-wrapper" href="#">
<img class="header__logo" src="/assets/images/zeal-brand-logo.png" alt="Zeal Optics 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 Zeal">
<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="#">Forecast</a>
</li>
<li class="header-search__list-item">
<a class="header-search__list-link js-header-search-list-link" href="#">Eclipse</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="#">Slate</a>
</li>
<li class="header-search__list-item">
<a class="header-search__list-link js-header-search-list-link" href="#">Tramline</a>
</li>
<li class="header-search__list-item">
<a class="header-search__list-link js-header-search-list-link" href="#">Level</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">2 items</span>
</div>
<div class="header-cart__products">
<div class="header-cart__item header-cart__item--repair">
<img class="header-cart__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&wid=330" alt="Gloss Black">
<div class="header-cart__item-repair">
<span class="header-cart__item-info header-cart__item-info--repair-type">Lens Replacement Package</span>
<span class="header-cart__item-info header-cart__item-info--repair-price">$75.00</span>
</div>
<span class="header-cart__item-info header-cart__item-info--repair-name">PEAHI</span>
<span class="header-cart__item-info header-cart__item-info--repair-variant">202-02</span>
<span class="header-cart__item-info header-cart__item-info--repair-lens">Non-prescription Sunglasses</span>
<button class="header-cart__item-remove button button--plain-text">Remove</button>
</div>
<div class="header-cart__item header-cart__item--surcharge">
<svg class="icon icon--tools">
<use xlink:href="/assets/icons/icons.svg#tools"></use>
</svg>
<span class="header-cart__item-info header-cart__item-info--repair-type">Standard Repair Process</span>
<span class="header-cart__item-info header-cart__item-info--repair-price">$10.00 fee includes nose pads and temples</span>
</div>
</div>
<div class="header-cart__footer">
<div class="header-cart__subtotal">
<span class="header-cart__subtotal-label">Order Subtotal (2):</span>
<span class="header-cart__subtotal-value">$100.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--repairs main--repairs-step-2 u-page-width-max">
<ul class="breadcrumb u-page-width-max-gutters">
<li class="breadcrumb__item">
<a class="breadcrumb__link" href="#">Zeal</a>
</li>
<li class="breadcrumb__item breadcrumb__item--current">
Repairs
</li>
</ul>
<div class="l-repairs-primary">
<form class="repairs-form repairs-form--step-2">
<div class="repairs-form__items">
<div class="repairs-form__item-group">
<div class="form-step">
<span class="form-step__step-number form-step__step-number--past">1</span>
<h4 class="form-step__title">Select Your Style</h4>
<button class="form-step__edit-button button button--outlined">Edit</button>
</div>
<div class="style-search-results style-search-results--selected">
<div class="style-search-results__result">
<div class="style-search-results__image-wrapper">
<img src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&wid=169" alt="PEAHI thumbnail" class="style-search-results__image">
</div>
<div class="style-search-results__details">
<span class="style-search-results__lens-type">Non-prescription Sunglasses</span>
<span class="style-search-results__name">PEAHI</span>
<span class="style-search-results__style-number">202-02</span>
</div>
</div>
</div>
<div class="form-step">
<span class="form-step__step-number form-step__step-number--present">2</span>
<h4 class="form-step__title">Select Your Repair Package</h4>
</div>
<div class="repairs-cards">
<div class="repairs-card repairs-card--nose-pads">
<div class="repairs-card__heading">Need nose pads?</div>
<div class="repairs-card__image-wrapper">
<img src="/assets/images/repairs-nose-pads-zeal.jpg" alt="Photo of nose pads" class="image repairs-card__image">
</div>
<div class="repairs-card__description">
<p>Nose pads are free as long as parts are available.</p>
</div>
<div class="repairs-card__price">Free</div>
<div class="repairs-card__actions">
<button class="button button--primary">Add</button>
</div>
</div>
<div class="repairs-card repairs-card--temples">
<div class="repairs-card__heading">Need temples?</div>
<div class="repairs-card__image-wrapper">
<img src="/assets/images/repairs-temples-zeal.jpg" alt="Photo of nose pads" class="image repairs-card__image">
</div>
<div class="repairs-card__description">
<p>Temples are free as long as parts are available.</p>
</div>
<div class="repairs-card__price">Free</div>
<div class="repairs-card__actions">
<span class="repairs-card__included">Included</span>
</div>
</div>
<div class="repairs-card repairs-card--frame">
<div class="repairs-card__heading">Frame</div>
<div class="repairs-card__image-wrapper">
<img src="/assets/images/repairs-frame-zeal.jpg" alt="Photo of frames" class="image repairs-card__image">
</div>
<div class="repairs-card__description">
<ul>
<li>
Temple and Nose Pad Evaluation
</li>
<li>
Cleaning & Alignment as Needed
</li>
</ul>
</div>
<div class="repairs-card__price">$71.00</div>
<div class="repairs-card__actions">
<button class="button button--plain-text">Remove</button>
</div>
</div>
<div class="repairs-card repairs-card--lens prescription">
<div class="repairs-card__heading">Lens</div>
<div class="repairs-card__image-wrapper">
<img src="/assets/images/repairs-lens-zeal.jpg" alt="Photo of lenses" class="image repairs-card__image">
</div>
<div class="repairs-card__description">
<p>If your prescription lenses are damaged or need replaced, please contact your eye doctor or search for an authorized Maui Jim prescription retail location.</p>
</div>
<div class="repairs-card__actions">
<button class="button button--plain-text">Search for retailer</button>
</div>
</div>
</div>
</div>
<div class="repairs-form__actions js-repairs-form-actions">
<button class="button button--primary">Continue</button>
</div>
</div>
</form>
</div>
<div class="l-repairs-secondary">
<div class="l-repairs-block">
<div class="block">
<h4 class="block__heading">The ZEAL Optics Warranty</h4>
<div class="block__contents">
<p class="paragraph">Our sunglasses and goggles are warrantied to the original purchaser for two years from the date of purchase against any defect in materials and/or workmanship. We will repair or replace, at our option, any ZEAL product deemed defective
by our in-house technicians. Nose Pads and Temples are replaced at no additional cost as long as the parts are available.</p>
</div>
</div>
</div>
<div class="l-repairs-assistance-info">
<div class="assistance-info assistance-info--default">
<h4 class="assistance-info__title">Need assistance?</h4>
<ul class="assistance-info__items">
<li class="assistance-info__item">
<a class="assistance-info__item-value" href="tel:+18884549325">
<svg class="icon icon--action-phone">
<use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>
<span class="assistance-info__item-label">(888) 454-9325</span>
</a>
</li>
<li class="assistance-info__item">
<a class="assistance-info__item-value" href="mailto:info@zealoptics.com">
<svg class="icon icon--action-mail">
<use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>
<span class="assistance-info__item-label">info@zealoptics.com</span>
</a>
</li>
</ul>
</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">
Zeal Optics
<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="#">Sunglasses Technology</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Goggles Technology</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Events</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Careers</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Flagship Store</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Trade Login</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Blog</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Media</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Adventures</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="#">Contact Us</a>
</li>
<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="#">Prescription</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Tech Goggle Support</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>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link js-modal-open-link" href="#" data-modal-id="footer-catalogs">Catalogs</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 & Privacy</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-identifier" 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>
<ul class="social-icons">
<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>
<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-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-tumblr">
<use xlink:href="/assets/icons/icons.svg#social-tumblr"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div class="footer__copyright">
<img class="footer__copyright-logo" src="/assets/images/zeal-brand-logo-small-white.png">
<span class="footer__copyright-text">©2016 Zeal Optics, Colorado</span>
</div>
</footer>
{{render (dynamicVariant header.component header.variant)}}
<main class="main main--repairs main--{{modifier}} u-page-width-max">
{{render '@breadcrumb' breadcrumb}}
{{#if hero}}
{{render '@landing-hero' hero merge=true}}
{{/if}}
<div class="l-repairs-primary">
{{#if pageTitle}}{{> '@page-title' value=pageTitle}}{{/if}}
{{#each primaryComponents}}
{{render (dynamicVariant component variant) context merge=true}}
{{/each}}
</div>
{{#if secondaryComponents}}
<div class="l-repairs-secondary">
{{#each secondaryComponents}}
<div class="l-repairs-{{component}}">
{{render (dynamicVariant component variant) context merge=true}}
</div>
{{/each}}
</div>
{{/if}}
</main>
{{render '@subscribe'}}
{{render (dynamicVariant footer.component footer.variant)}}
{
"header": {
"component": "header",
"variant": "zeal-repairs"
},
"footer": {
"component": "footer",
"variant": "zeal"
},
"breadcrumb": {
"items": [
{
"label": "Zeal",
"path": "#"
},
{
"label": "Repairs",
"current": true
}
]
},
"secondaryComponents": [
{
"component": "block",
"variant": "default",
"context": {
"heading": "The ZEAL Optics Warranty",
"level": "4",
"items": [
{
"component": "paragraph",
"classes": true,
"value": "Our sunglasses and goggles are warrantied to the original purchaser for two years from the date of purchase against any defect in materials and/or workmanship. We will repair or replace, at our option, any ZEAL product deemed defective by our in-house technicians. Nose Pads and Temples are replaced at no additional cost as long as the parts are available."
}
]
}
},
{
"component": "assistance-info",
"variant": "default",
"context": {
"items": [
{
"label": "(888) 454-9325",
"path": "tel:+18884549325",
"prefixIcon": "action-phone"
},
{
"label": "info@zealoptics.com",
"path": "mailto:info@zealoptics.com",
"prefixIcon": "action-mail"
}
]
}
}
],
"modifier": "repairs-step-2",
"primaryComponents": [
{
"component": "repairs",
"variant": "step-2-zeal"
}
]
}
.main--repairs {
.l-repairs-primary,
.l-repairs-secondary {
padding-right: $gutter-width / 2;
padding-left: $gutter-width / 2;
@include breakpoint($breakpoint-md) {
padding-right: 50px;
padding-left: 50px;
}
@include breakpoint($breakpoint-xl) {
padding-right: 70px;
padding-left: 70px;
}
}
}
.main--repairs-welcome {
.l-repairs-primary,
.l-repairs-secondary {
padding-right: $gutter-width-half;
padding-left: $gutter-width-half;
@include breakpoint($breakpoint-md) {
padding-right: 25px;
padding-left: 25px;
}
@include breakpoint($breakpoint-xl) {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding-right: $gutter-width-half;
padding-left: $gutter-width-half;
float: none;
}
}
}
.main--repairs-cart {
.l-repairs-primary {
padding-top: 15px;
.page-title {
margin-top: 0;
border-bottom: 1px solid $color-light;
color: $color-dark;
font-size: 1.6rem;
font-weight: bold;
letter-spacing: 1px;
line-height: 1.9rem;
text-align: left;
text-transform: none;
}
}
@include breakpoint($breakpoint-md) {
.l-repairs-primary {
padding-top: 20px;
padding-right: $gutter-width / 2;
padding-left: $gutter-width / 2;
.page-title {
display: none;
}
}
.repairs-form__items {
margin-left: 0;
}
}
}
.l-repairs-primary {
padding: 20px 0 60px;
.page-title {
margin: 15px 0 8px;
padding: 0;
border-bottom-style: none;
font-size: 3.0rem;
line-height: 3.6rem;
text-align: center;
}
@include breakpoint($breakpoint-md) {
padding: 15px 0 60px;
.page-title {
margin-top: 15px;
margin-bottom: 15px;
font-size: 3.8rem;
line-height: 4.6rem;
}
}
@include breakpoint($breakpoint-xl) {
@include span(8);
padding: 40px 50px 60px 70px;
float: left;
.page-title {
margin-bottom: 30px;
font-size: 5.7rem;
line-height: 6.8rem;
}
}
}
.l-repairs-secondary {
font-size: 1.4rem;
line-height: 2.0rem;
.block {
margin-bottom: 50px;
}
.block__heading {
margin: 0 0 15px;
border-bottom: 1px solid $color-light;
font-size: 1.6rem;
font-weight: bold;
letter-spacing: 1px;
line-height: 1.9rem;
}
@include breakpoint($breakpoint-md) {
@include clearfix;
padding-right: 50px;
padding-left: 50px;
}
@include breakpoint($breakpoint-xl) {
@include span(4);
padding-top: 27px;
padding-right: 70px;
float: left;
.block__heading {
font-size: 2.4rem;
line-height: 2.8rem;
}
}
}
@include breakpoint($breakpoint-md) {
.assistance-info__title {
text-transform: none;
}
.l-repairs-block,
.l-repairs-assistance-info {
width: calc(50% - 40px);
float: left;
}
.l-repairs-block {
margin-right: 40px;
}
.l-repairs-assistance-info {
margin-left: 40px;
}
}
@include breakpoint($breakpoint-xl) {
.l-repairs-block,
.l-repairs-assistance-info {
width: 100%;
margin-right: 0;
margin-left: 0;
}
}
There are no notes for this item.