<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&#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">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$&amp;wid&#x3D;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-1 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-1">
            <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--present">1</span>
                        <h4 class="form-step__title">Select Your Style Non-Prescription</h4>
                    </div>

                    <div class="style-search-results style-search-results--cart">

                        <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$&amp;wid&#x3D;400" 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>

                    <p class="paragraph">Please start by providing some information below regarding the <strong>Non-Prescription Sunglasses</strong> you need to repair.</p>

                    <div class="repairs-autocomplete">
                        <div class="search-standalone js-search-standalone u-page-width-max-gutters">

                            <form class="search-standalone-form">
                                <label for="" class="label">Type in your style number or name</label>

                                <input class="search-standalone-form__input js-search-standalone-input" type="text" placeholder="">
                                <button class="search-standalone-form__button js-search-standalone-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>

                        <div class="repairs-autocomplete__results js-repairs-autocomplete-results">
                            <div class="repairs-autocomplete__product">
                                <ul class="repairs-autocomplete__product-list">
                                    <li class="repairs-autocomplete__variant" href="#">
                                        <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$">
                                        <div class="repairs-autocomplete__variant-info">
                                            <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                            <span class="repairs-autocomplete__variant-id">202-02</span>
                                        </div>
                                    </li>
                                    <li class="repairs-autocomplete__variant" href="#">
                                        <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$">
                                        <div class="repairs-autocomplete__variant-info">
                                            <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                            <span class="repairs-autocomplete__variant-id">B202-2M</span>
                                        </div>
                                    </li>
                                    <li class="repairs-autocomplete__variant" href="#">
                                        <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$">
                                        <div class="repairs-autocomplete__variant-info">
                                            <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                            <span class="repairs-autocomplete__variant-id">H202-10</span>
                                        </div>
                                    </li>
                                    <li class="repairs-autocomplete__variant" href="#">
                                        <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$">
                                        <div class="repairs-autocomplete__variant-info">
                                            <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                            <span class="repairs-autocomplete__variant-id">H202-2M</span>
                                        </div>
                                    </li>
                                    <li class="repairs-autocomplete__variant" href="#">
                                        <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$">
                                        <div class="repairs-autocomplete__variant-info">
                                            <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                            <span class="repairs-autocomplete__variant-id">H202-70</span>
                                        </div>
                                    </li>
                                    <li class="repairs-autocomplete__variant" href="#">
                                        <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$">
                                        <div class="repairs-autocomplete__variant-info">
                                            <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                            <span class="repairs-autocomplete__variant-id">HT202-71</span>
                                        </div>
                                    </li>
                                    <li class="repairs-autocomplete__variant" href="#">
                                        <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$">
                                        <div class="repairs-autocomplete__variant-info">
                                            <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                            <span class="repairs-autocomplete__variant-id">H202-2M-2</span>
                                        </div>
                                    </li>
                                    <li class="repairs-autocomplete__variant" href="#">
                                        <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$">
                                        <div class="repairs-autocomplete__variant-info">
                                            <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                            <span class="repairs-autocomplete__variant-id">H202-70-2</span>
                                        </div>
                                    </li>
                                    <li class="repairs-autocomplete__variant" href="#">
                                        <img class="repairs-autocomplete__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$">
                                        <div class="repairs-autocomplete__variant-info">
                                            <span class="repairs-autocomplete__variant-name">PEAHI</span>
                                            <span class="repairs-autocomplete__variant-id">HT202-71-2</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <button class="button button--plain-text js-modal-open-link js-modal-style-number-help button--style-number-help" data-modal-id="style-number-help">Your Sunglasses style is the name on the temple. (For instance: &#x27;Magnolia, &#x27;Incline&#x27;)</button>

                    <button class="button button--plain-text button--style-number-assistance" formnovalidate>I don&#x27;t know what type of product I have</button>

                    <div class="form-step">
                        <span class="form-step__step-number form-step__step-number--future">2</span>
                        <h4 class="form-step__title">Select Your Repair Package</h4>
                    </div>

                </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 &#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">
            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 &amp; 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 &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-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-1",
  "primaryComponents": [
    {
      "component": "repairs",
      "variant": "step-1-edit-zeal"
    }
  ],
  "pageModals": [
    {
      "component": "form-modal--style-number-help",
      "context": {
        "id": "style-number-help",
        "title": "Style Number",
        "form": "style-number-help",
        "formContext": {
          "formItemGroups": [
            {
              "formItems": [
                {
                  "component": "paragraph",
                  "classes": true,
                  "value": "Your Sunglasses style is the name on the temple. (For instance: 'Magnolia, 'Incline')."
                },
                {
                  "component": "image",
                  "classes": true,
                  "modifier": "sunglasses-number",
                  "src": "/assets/images/sunglass-number-show-zeal.jpg",
                  "alt": "Style number photo",
                  "attibutes": null
                }
              ]
            }
          ]
        }
      }
    }
  ]
}
  • Content:
    .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;
      }
    }
    
  • URL: /components/raw/repairs-page/repairs-page.scss
  • Filesystem Path: src/components/03-pages/repairs-page/repairs-page.scss
  • Size: 3.2 KB

There are no notes for this item.