<main id="main-section" class="main main--collected-components">
    <div class="l-collected-components l-collected-components--paragraph">
        Handle: <code>@paragraph</code>
        <p class="paragraph u-text-center">This page collects form components for snapshot testing.</p>

    </div>
    <div class="l-collected-components l-collected-components--registration--registration-anonymous">
        Handle: <code>@registration--registration-anonymous</code>
        <form class="registration-form">
            <div class="personal-info registration-section">
                <h4 class="registration-title">Personal Info</h4>
                <div class="personal-info__form-items">
                    <div class="form-item form-item--text form-item--registration-first-name form-item--required">
                        <label for="registration-first-name" class="label label--text label--required">
  First Name
  <input type="text"  name="first-name" class="input input--text" autocomplete="given-name" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--registration-last-name form-item--required">
                        <label for="registration-last-name" class="label label--text label--required">
  Last Name
  <input type="text"  name="last-name" class="input input--text" autocomplete="family-name" >
  </label>
                    </div>

                    <div class="form-item form-item--email form-item--registration-email">
                        <label for="registration-email" class="label label--email">
  Email Address
  <input type="email"  class="input input--email" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--registration-address-1 form-item--required">
                        <label for="registration-address-1" class="label label--text label--required">
  Address 1
  <input type="text"  name="address-1" class="input input--text" autocomplete="address-line1" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--registration-address-2">
                        <label for="registration-address-2" class="label label--text">
  Address 2
  <input type="text"  name="address-2" class="input input--text" placeholder="Optional" autocomplete="address-line2" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--registration-city form-item--required">
                        <label for="registration-city" class="label label--text label--required">
  City
  <input type="text"  name="city" class="input input--text" autocomplete="address-level2" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--registration-zip form-item--required">
                        <label for="registration-zip" class="label label--text label--required">
  Zip Code
  <input type="text"  name="zip" class="input input--text" autocomplete="postal-code" >
  </label>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="registration-state" class="label label--required">
    State
    <select id="registration-state" name="state" class="select js-select" autocomplete="address-level1">
      <option value="" >Select</option>
      <option value="AL" >Alabama</option>
      <option value="AK" >Alaska</option>
      <option value="AZ" >Arizona</option>
      <option value="AR" >Arkansas</option>
      <option value="CA" >California</option>
      <option value="CO" >Colorado</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--checkbox">
                        <input type="checkbox" id="receive-updates" name="receive-updates" class="checkbox checkbox--default" checked="true">
                        <label for="receive-updates">
    
    I'd like to receive email 'ohana updates from Maui Jim.
    
  </label>
                    </div>

                </div>
            </div>
            <div class="proof-of-purchase registration-section">
                <h4 class="registration-title">Proof of Purchase</h4>
                <div class="proof-of-purchase__form-items">
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="purchase-month" class="label label--required">
    Date of Purchase
    <select id="purchase-month" name="month" class="select js-select">
      <option value="" >Month</option>
      <option value="m01" >January</option>
      <option value="m02" >February</option>
      <option value="m03" >March</option>
      <option value="m04" >April</option>
      <option value="m05" >May</option>
      <option value="m06" >June</option>
      <option value="m07" >July</option>
      <option value="m08" >August</option>
      <option value="m09" >September</option>
      <option value="m10" >October</option>
      <option value="m11" >November</option>
      <option value="m12" >December</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="purchase-year" class="label label--required">
    <select id="purchase-year" name="year" class="select js-select">
      <option value="" >Year</option>
      <option value="y17" >2017</option>
      <option value="y16" >2016</option>
      <option value="y15" >2015</option>
      <option value="y14" >2014</option>
      <option value="y13" >2013</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="purchase-where" class="label label--required">
    Where?
    <select id="purchase-where" name="where" class="select js-select js-select--purchase-where">
      <option value="" >Choose</option>
      <option value="direct" >Direct from Maui Jim</option>
      <option value="authorized-retail" >Authorized Retail Location</option>
      <option value="authorized-online" >Authorized Online Retailer</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--text form-item--purchase-location form-item--required js-form-item--purchase-location">
                        <label for="purchase-location" class="label label--text label--required">
  
  <input type="text"  name="purchase-info" class="input input--text" placeholder="Order Details"  disabled>
  </label>
                    </div>

                </div>
            </div>
            <div class="product-details registration-section">
                <h4 class="registration-title">Product Details</h4>
                <div class="product-details__form-items">
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="product-details-prescription" class="label label--required">
    Is This Product Prescription?
    <select id="product-details-prescription" name="prescription" class="select js-select">
      <option value="" >Choose Yes/No</option>
      <option value="m01" >Yes</option>
      <option value="m02" >No</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="product-details-custom" class="label label--required">
    Is This Product MyMaui (Custom)?
    <select id="product-details-custom" name="custom" class="select js-select">
      <option value="" >Choose Yes/No</option>
      <option value="m01" >Yes</option>
      <option value="m02" >No</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--text-tooltip-drawer form-item--sku form-item--required">
                        <button class="form-item__tooltip js-tooltip-drawer-open-link">
    <svg class="icon icon--question-mark-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

  </button>
                        <label for="sku" class="label label--text-tooltip-drawer label--required">
  Product SKU
  <input type="text-tooltip-drawer"  name="sku" class="input input--text-tooltip-drawer" placeholder="MJ 737-63W" >
  </label>
                    </div>

                    <div class="form-item form-item--checkbox">
                        <input type="checkbox" id="terms-and-conditions" name="terms-and-conditions" class="checkbox checkbox--default">
                        <label for="terms-and-conditions">
    
    I agree to the <a href='#'>Terms and Conditions</a> of the website
    
  </label>
                    </div>

                    <div class="drawer js-drawer">
                        <div class="find-model" id="find-model">
                            <h4 class="find-model__title">Find your style model</h4>
                            <p class="find-model__content">Refer to the right temple of your sunglasses (refer to image below) for the Style Number. Style Number begins with MJ-</p>
                            <img class="find-model__image" alt="An image displaying the model number on the right temple of the sunglasses" src="/assets/images/find-model.jpg">
                        </div>

                    </div>

                </div>
            </div>
            <div class="registration-form__actions">
                <button class="button button--primary">Submit</button>

            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--registration--registration-auth">
        Handle: <code>@registration--registration-auth</code>
        <form class="registration-form">
            <div class="personal-info registration-section">
                <h4 class="registration-title">Personal Info</h4>
                <div class="personal-info__form-items">
                    <div class="form-item form-item--text form-item--registration-first-name form-item--required">
                        <label for="registration-first-name" class="label label--text label--required">
  First Name Test
  <input type="text"  name="first-name" class="input input--text" autocomplete="given-name"  value="John">
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--registration-last-name form-item--required">
                        <label for="registration-last-name" class="label label--text label--required">
  Last Name
  <input type="text"  name="last-name" class="input input--text" autocomplete="family-name"  value="Doe">
  </label>
                    </div>

                    <div class="form-item form-item--email form-item--registration-email">
                        <label for="registration-email" class="label label--email">
  Email Address
  <input type="email"  class="input input--email"  value="johndoe@mauijim.com">
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--registration-address-1 form-item--required">
                        <label for="registration-address-1" class="label label--text label--required">
  Address 1
  <input type="text"  name="address-1" class="input input--text" autocomplete="address-line1"  value="112 W Monroe St">
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--registration-address-2">
                        <label for="registration-address-2" class="label label--text">
  Address 2
  <input type="text"  name="address-2" class="input input--text" placeholder="Optional" autocomplete="address-line2" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--registration-city form-item--required">
                        <label for="registration-city" class="label label--text label--required">
  City
  <input type="text"  name="city" class="input input--text" autocomplete="address-level2"  value="Chicago">
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--registration-zip form-item--required">
                        <label for="registration-zip" class="label label--text label--required">
  Zip Code
  <input type="text"  name="zip" class="input input--text" autocomplete="postal-code"  value="60603">
  </label>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="registration-state" class="label label--required">
    State
    <select id="registration-state" name="state" class="select js-select" autocomplete="address-level1">
      <option value="" >Select</option>
      <option value="AL" >Alabama</option>
      <option value="AK" >Alaska</option>
      <option value="AZ" >Arizona</option>
      <option value="AR" >Arkansas</option>
      <option value="CA" >California</option>
      <option value="CO" >Colorado</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--checkbox">
                        <input type="checkbox" id="receive-updates" name="receive-updates" class="checkbox checkbox--default" checked="true">
                        <label for="receive-updates">
    
    I'd like to receive email 'ohana updates from Maui Jim.
    
  </label>
                    </div>

                </div>
            </div>
            <div class="proof-of-purchase registration-section">
                <h4 class="registration-title">Proof of Purchase</h4>
                <div class="proof-of-purchase__form-items">
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="purchase-month" class="label label--required">
    Date of Purchase
    <select id="purchase-month" name="month" class="select js-select">
      <option value="" >Month</option>
      <option value="m01" >January</option>
      <option value="m02" >February</option>
      <option value="m03" >March</option>
      <option value="m04" >April</option>
      <option value="m05" >May</option>
      <option value="m06" >June</option>
      <option value="m07" >July</option>
      <option value="m08" >August</option>
      <option value="m09" >September</option>
      <option value="m10" >October</option>
      <option value="m11" >November</option>
      <option value="m12" >December</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="purchase-year" class="label label--required">
    <select id="purchase-year" name="year" class="select js-select">
      <option value="" >Year</option>
      <option value="y17" >2017</option>
      <option value="y16" >2016</option>
      <option value="y15" >2015</option>
      <option value="y14" >2014</option>
      <option value="y13" >2013</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="purchase-where" class="label label--required">
    Where?
    <select id="purchase-where" name="where" class="select js-select js-select--purchase-where">
      <option value="" >Choose</option>
      <option value="direct" >Direct from Maui Jim</option>
      <option value="authorized-retail" >Authorized Retail Location</option>
      <option value="authorized-online" >Authorized Online Retailer</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--text form-item--purchase-location form-item--required js-form-item--purchase-location">
                        <label for="purchase-location" class="label label--text label--required">
  
  <input type="text"  name="purchase-info" class="input input--text" placeholder="Order Details"  disabled>
  </label>
                    </div>

                </div>
            </div>
            <div class="product-details registration-section">
                <h4 class="registration-title">Product Details</h4>
                <div class="product-details__form-items">
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="product-details-prescription" class="label label--required">
    Is This Product Prescription?
    <select id="product-details-prescription" name="prescription" class="select js-select">
      <option value="" >Choose Yes/No</option>
      <option value="m01" >Yes</option>
      <option value="m02" >No</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="product-details-custom" class="label label--required">
    Is This Product MyMaui (Custom)?
    <select id="product-details-custom" name="custom" class="select js-select">
      <option value="" >Choose Yes/No</option>
      <option value="m01" >Yes</option>
      <option value="m02" >No</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--text-tooltip-drawer form-item--sku form-item--required">
                        <button class="form-item__tooltip js-tooltip-drawer-open-link">
    <svg class="icon icon--question-mark-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

  </button>
                        <label for="sku" class="label label--text-tooltip-drawer label--required">
  Product SKU
  <input type="text-tooltip-drawer"  name="sku" class="input input--text-tooltip-drawer" placeholder="MJ 737-63W" >
  </label>
                    </div>

                    <div class="form-item form-item--checkbox">
                        <input type="checkbox" id="terms-and-conditions" name="terms-and-conditions" class="checkbox checkbox--default">
                        <label for="terms-and-conditions">
    
    I agree to the <a href='#'>Terms and Conditions</a> of the website
    
  </label>
                    </div>

                    <div class="drawer js-drawer">
                        <div class="find-model" id="find-model">
                            <h4 class="find-model__title">Find your style model</h4>
                            <p class="find-model__content">Refer to the right temple of your sunglasses (refer to image below) for the Style Number. Style Number begins with MJ-</p>
                            <img class="find-model__image" alt="An image displaying the model number on the right temple of the sunglasses" src="/assets/images/find-model.jpg">
                        </div>

                    </div>

                </div>
            </div>
            <div class="registration-form__actions">
                <button class="button button--primary">Submit</button>

            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--registration--registration-non-us">
        Handle: <code>@registration--registration-non-us</code>
        <form class="registration-form">
            <div class="personal-info registration-section">
                <h4 class="registration-title">Personal Info</h4>
                <div class="personal-info__form-items">
                    <div class="form-item form-item--text form-item--registration-first-name form-item--required">
                        <label for="registration-first-name" class="label label--text label--required">
  First Name
  <input type="text"  name="first-name" class="input input--text" autocomplete="given-name" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--registration-last-name form-item--required">
                        <label for="registration-last-name" class="label label--text label--required">
  Last Name
  <input type="text"  name="last-name" class="input input--text" autocomplete="family-name" >
  </label>
                    </div>

                    <div class="form-item form-item--email form-item--registration-email">
                        <label for="registration-email" class="label label--email">
  Email Address
  <input type="email"  class="input input--email" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--registration-address-1 form-item--required">
                        <label for="registration-address-1" class="label label--text label--required">
  Address 1
  <input type="text"  name="address-1" class="input input--text" autocomplete="address-line1" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--registration-address-2">
                        <label for="registration-address-2" class="label label--text">
  Address 2
  <input type="text"  name="address-2" class="input input--text" placeholder="Optional" autocomplete="address-line2" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--registration-city form-item--required">
                        <label for="registration-city" class="label label--text label--required">
  City
  <input type="text"  name="city" class="input input--text" autocomplete="address-level2" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--registration-zip form-item--required">
                        <label for="registration-zip" class="label label--text label--required">
  Zip Code
  <input type="text"  name="zip" class="input input--text" autocomplete="postal-code" >
  </label>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="registration-state" class="label label--required">
    State
    <select id="registration-state" name="state" class="select js-select" autocomplete="address-level1">
      <option value="" >Select</option>
      <option value="AL" >Alabama</option>
      <option value="AK" >Alaska</option>
      <option value="AZ" >Arizona</option>
      <option value="AR" >Arkansas</option>
      <option value="CA" >California</option>
      <option value="CO" >Colorado</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--checkbox">
                        <input type="checkbox" id="receive-updates" name="receive-updates" class="checkbox checkbox--default">
                        <label for="receive-updates">
    
    I'd like to receive email 'ohana updates from Maui Jim.
    
  </label>
                    </div>

                </div>
            </div>
            <div class="proof-of-purchase registration-section">
                <h4 class="registration-title">Proof of Purchase</h4>
                <div class="proof-of-purchase__form-items">
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="purchase-month" class="label label--required">
    Date of Purchase
    <select id="purchase-month" name="month" class="select js-select">
      <option value="" >Month</option>
      <option value="m01" >January</option>
      <option value="m02" >February</option>
      <option value="m03" >March</option>
      <option value="m04" >April</option>
      <option value="m05" >May</option>
      <option value="m06" >June</option>
      <option value="m07" >July</option>
      <option value="m08" >August</option>
      <option value="m09" >September</option>
      <option value="m10" >October</option>
      <option value="m11" >November</option>
      <option value="m12" >December</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="purchase-year" class="label label--required">
    <select id="purchase-year" name="year" class="select js-select">
      <option value="" >Year</option>
      <option value="y17" >2017</option>
      <option value="y16" >2016</option>
      <option value="y15" >2015</option>
      <option value="y14" >2014</option>
      <option value="y13" >2013</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="purchase-where" class="label label--required">
    Where?
    <select id="purchase-where" name="where" class="select js-select js-select--purchase-where">
      <option value="" >Choose</option>
      <option value="direct" >Direct from Maui Jim</option>
      <option value="authorized-retail" >Authorized Retail Location</option>
      <option value="authorized-online" >Authorized Online Retailer</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--text form-item--purchase-location form-item--required js-form-item--purchase-location">
                        <label for="purchase-location" class="label label--text label--required">
  
  <input type="text"  name="purchase-info" class="input input--text" placeholder="Order Details"  disabled>
  </label>
                    </div>

                </div>
            </div>
            <div class="product-details registration-section">
                <h4 class="registration-title">Product Details</h4>
                <div class="product-details__form-items">
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="product-details-prescription" class="label label--required">
    Is This Product Prescription?
    <select id="product-details-prescription" name="prescription" class="select js-select">
      <option value="" >Choose Yes/No</option>
      <option value="m01" >Yes</option>
      <option value="m02" >No</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="product-details-custom" class="label label--required">
    Is This Product MyMaui (Custom)?
    <select id="product-details-custom" name="custom" class="select js-select">
      <option value="" >Choose Yes/No</option>
      <option value="m01" >Yes</option>
      <option value="m02" >No</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--text-tooltip-drawer form-item--sku form-item--required">
                        <button class="form-item__tooltip js-tooltip-drawer-open-link">
    <svg class="icon icon--question-mark-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

  </button>
                        <label for="sku" class="label label--text-tooltip-drawer label--required">
  Product SKU
  <input type="text-tooltip-drawer"  name="sku" class="input input--text-tooltip-drawer" placeholder="MJ 737-63W" >
  </label>
                    </div>

                    <div class="form-item form-item--checkbox">
                        <input type="checkbox" id="terms-and-conditions" name="terms-and-conditions" class="checkbox checkbox--default">
                        <label for="terms-and-conditions">
    
    I agree to the <a href='#'>Terms and Conditions</a> of the website
    
  </label>
                    </div>

                    <div class="drawer js-drawer">
                        <div class="find-model" id="find-model">
                            <h4 class="find-model__title">Find your style model</h4>
                            <p class="find-model__content">Refer to the right temple of your sunglasses (refer to image below) for the Style Number. Style Number begins with MJ-</p>
                            <img class="find-model__image" alt="An image displaying the model number on the right temple of the sunglasses" src="/assets/images/find-model.jpg">
                        </div>

                    </div>

                </div>
            </div>
            <div class="registration-form__actions">
                <button class="button button--primary">Submit</button>

            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--checkout-form--addresses-edit-auth">
        Handle: <code>@checkout-form--addresses-edit-auth</code>
        <form class="checkout-form checkout-form--addresses-edit-auth js-checkout-form js-checkout-form-addresses-edit-auth">
            <span class="checkout-form__step-number checkout-form__step-number--present">1</span>
            <div class="checkout-form__title">
                <h4 class="checkout-form__title-embedded-heading">Shipping &amp; Billing Addresses</h4>
            </div>
            <div class="checkout-form__form-items">
                <div class="checkout-form__form-item-group checkout-form__form-item-group--shipping-addresses js-checkout-form-item-group">
                    <div class="shipping-address js-modal-form-item">
                        <input type="radio" id="checkout-shipping-address-1" name="checkout-shipping-address" class="radio radio--default" checked="true">
                        <label class="shipping-address__details" for="checkout-shipping-address-1">
    <p class="shipping-address__name">
      <span class="js-shipping-address-value" data-value-id="shipping-address-first-name">John</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-last-name">Doe</span>
    </p>
    <p class="shipping-address__address">
      <span class="js-shipping-address-value" data-value-id="shipping-address-company">Apple, Inc.</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-address-1">112 W Monroe St</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-city">Chicago</span>,
      <span class="js-shipping-address-value" data-value-id="shipping-address-state">IL</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-zip">60603</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-country" data-value-value="USA">United States</span>
    </p>
    <p class="shipping-address__phone">
      <span class="js-shipping-address-value" data-value-id="shipping-address-phone-number">888-888-1234</span>
    </p>
  </label>
                        <div class="shipping-address__actions">
                            <button class="button button--plain-text js-modal-open-link shipping-address__edit js-modal-form-item-edit-button" data-modal-id="shipping-address-edit" formnovalidate>Edit</button>
                        </div>
                        <span class="shipping-address__accent"></span>
                    </div>

                    <div class="shipping-address js-modal-form-item">
                        <input type="radio" id="checkout-shipping-address-2" name="checkout-shipping-address" class="radio radio--default">
                        <label class="shipping-address__details" for="checkout-shipping-address-2">
    <p class="shipping-address__name">
      <span class="js-shipping-address-value" data-value-id="shipping-address-first-name">John</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-last-name">Smith</span>
    </p>
    <p class="shipping-address__address">
      <span class="js-shipping-address-value" data-value-id="shipping-address-address-1">One Aloha Lane</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-city">Peoria</span>,
      <span class="js-shipping-address-value" data-value-id="shipping-address-state">IL</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-zip">61615</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-country" data-value-value="USA">United States</span>
    </p>
    <p class="shipping-address__phone">
      <span class="js-shipping-address-value" data-value-id="shipping-address-phone-number">888-888-4321</span>
    </p>
  </label>
                        <div class="shipping-address__actions">
                            <button class="button button--plain-text js-modal-open-link shipping-address__edit js-modal-form-item-edit-button" data-modal-id="shipping-address-edit" formnovalidate>Edit</button>
                        </div>
                        <span class="shipping-address__accent"></span>
                    </div>

                    <button class="shipping-address shipping-address--button js-modal-open-link" data-modal-id="shipping-address-add" formnovalidate>
  <svg class="icon icon--new-address" alt="">
  <use xlink:href="/assets/icons/icons.svg#new-address"></use>
</svg>

  <p class="shipping-address__button-label">Add New Shipping Address</p>
  <span class="shipping-address__accent"></span>
</button>

                </div>
                <div class="checkout-form__form-item-group js-checkout-form-item-group">
                    <div class="form-item form-item--checkbox">
                        <input type="checkbox" id="checkout-billing-address-shipping" name="checkout-billing-address" class="checkbox checkbox--default" checked="true">
                        <label for="checkout-billing-address-shipping">
    
    Billing address same as shipping address
    
  </label>
                    </div>

                </div>
                <div class="checkout-form__form-item-group js-checkout-form-item-group js-hidden" data-toggle-id="checkout-billing-address-shipping" data-reverse-toggle="true">
                    <h5 class="checkout-form__form-item-group-title">Billing Address</h5>
                    <div class="form-item form-item--text form-item--checkout-first-name form-item--required">
                        <label for="checkout-first-name" class="label label--text label--required">
  First Name
  <input type="text"  name="first-name" class="input input--text" autocomplete="given-name" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-last-name form-item--required">
                        <label for="checkout-last-name" class="label label--text label--required">
  Last Name
  <input type="text"  name="last-name" class="input input--text" autocomplete="family-name" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-company-name">
                        <label for="checkout-company-name" class="label label--text">
  Company Name or c/o
  <input type="text"  name="company-name" class="input input--text" placeholder="Optional" autocomplete="organization" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-address-1 form-item--required">
                        <label for="checkout-address-1" class="label label--text label--required">
  Address 1
  <input type="text"  name="address-1" class="input input--text" autocomplete="address-line1" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-address-2">
                        <label for="checkout-address-2" class="label label--text">
  Address 2
  <input type="text"  name="address-2" class="input input--text" placeholder="Optional" autocomplete="address-line2" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-city form-item--required">
                        <label for="checkout-city" class="label label--text label--required">
  City
  <input type="text"  name="city" class="input input--text" autocomplete="address-level2" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-zip form-item--required">
                        <label for="checkout-zip" class="label label--text label--required">
  Zip Code
  <input type="text"  name="zip" class="input input--text" autocomplete="postal-code" >
  </label>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="checkout-country" class="label label--required">
    Country
    <select id="checkout-country" name="country" class="select js-select" autocomplete="country">
      <option value="" >Select</option>
      <option value="USA" >United States</option>
      <option value="AUS" >Australia</option>
      <option value="CAN" >Canada</option>
      <option value="FRA" >France</option>
      <option value="GER" >Germany</option>
      <option value="HK" >Hong Kong</option>
      <option value="IND" >India</option>
      <option value="IRE" >Ireland</option>
      <option value="ITA" >Italy</option>
      <option value="MEX" >Mexico</option>
      <option value="NZE" >New Zealand</option>
      <option value="SAF" >South Africa</option>
      <option value="SPA" >Spain</option>
      <option value="SWE" >Sweden</option>
      <option value="UAE" >United Arab Emirates</option>
      <option value="UK" >United Kingdom</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="checkout-state" class="label label--required">
    State
    <select id="checkout-state" name="state" class="select js-select" autocomplete="address-level1">
      <option value="" >Select</option>
      <option value="AL" >Alabama</option>
      <option value="AK" >Alaska</option>
      <option value="AZ" >Arizona</option>
      <option value="AR" >Arkansas</option>
      <option value="CA" >California</option>
      <option value="CO" >Colorado</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-phone form-item--required">
                        <label for="checkout-phone" class="label label--text label--required">
  Phone Number
  <input type="text"  name="phone" class="input input--text" placeholder="000-123-4567" autocomplete="tel" >
  </label>
                    </div>

                </div>
            </div>
            <div class="checkout-form__form-items">
                <div class="checkout-form__actions js-checkout-form-actions">
                    <button class="button button--primary">Next: Shipping Method &amp; Payment</button>

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

    </div>
    <div class="l-collected-components l-collected-components--checkout-form--addresses-edit-guest">
        Handle: <code>@checkout-form--addresses-edit-guest</code>
        <form class="checkout-form checkout-form--addresses-edit-guest js-checkout-form js-checkout-form-addresses-edit-guest">
            <span class="checkout-form__step-number checkout-form__step-number--present">1</span>
            <div class="checkout-form__title">
                <h4 class="checkout-form__title-embedded-heading">Shipping &amp; Billing Addresses</h4>
                <span class="checkout-form__login-message">
      Have an account?
      <a href="#" class="checkout-form__login-link js-modal-open-link" data-modal-id="login">Login</a>
      to speed things up.
    </span>
            </div>
            <div class="checkout-form__form-items">
                <div class="checkout-form__form-item-group js-checkout-form-item-group">
                    <div class="form-item form-item--text form-item--checkout-first-name form-item--required">
                        <label for="checkout-first-name" class="label label--text label--required">
  First Name
  <input type="text"  name="first-name" class="input input--text" autocomplete="given-name" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-last-name form-item--required">
                        <label for="checkout-last-name" class="label label--text label--required">
  Last Name
  <input type="text"  name="last-name" class="input input--text" autocomplete="family-name" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-company-name">
                        <label for="checkout-company-name" class="label label--text">
  Company Name or c/o
  <input type="text"  name="company-name" class="input input--text" placeholder="Optional" autocomplete="organization" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-address-1 form-item--required">
                        <label for="checkout-address-1" class="label label--text label--required">
  Address 1
  <input type="text"  name="address-1" class="input input--text" autocomplete="address-line1" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-address-2">
                        <label for="checkout-address-2" class="label label--text">
  Address 2
  <input type="text"  name="address-2" class="input input--text" placeholder="Optional" autocomplete="address-line2" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-city form-item--required">
                        <label for="checkout-city" class="label label--text label--required">
  City
  <input type="text"  name="city" class="input input--text" autocomplete="address-level2" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-zip form-item--required">
                        <label for="checkout-zip" class="label label--text label--required">
  Zip Code
  <input type="text"  name="zip" class="input input--text" autocomplete="postal-code" >
  </label>
                    </div>

                    <div class="form-item form-item--select form-item--required form-item--locked">
                        <div class="select-wrapper">
                            <label for="checkout-country" class="label label--required">
    Country
    <select id="checkout-country" name="country" class="select js-select" autocomplete="country">
      <option value="USA" >United States</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="checkout-state" class="label label--required">
    State
    <select id="checkout-state" name="state" class="select js-select" autocomplete="address-level1">
      <option value="" >Select</option>
      <option value="AL" >Alabama</option>
      <option value="AK" >Alaska</option>
      <option value="AZ" >Arizona</option>
      <option value="AR" >Arkansas</option>
      <option value="CA" >California</option>
      <option value="CO" >Colorado</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--email form-item--checkout-email form-item--required">
                        <label for="checkout-email" class="label label--email label--required">
  Email Address
  <input type="email"  name="email" class="input input--email" placeholder="name@example.com" autocomplete="email" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-phone form-item--required">
                        <label for="checkout-phone" class="label label--text label--required">
  Phone Number
  <input type="text"  name="phone" class="input input--text" placeholder="000-123-4567" autocomplete="tel" >
  </label>
                    </div>

                </div>
                <div class="checkout-form__form-item-group js-checkout-form-item-group">
                    <div class="form-item form-item--checkbox">
                        <input type="checkbox" id="checkout-billing-address-shipping" name="checkout-billing-address" class="checkbox checkbox--default" checked="true">
                        <label for="checkout-billing-address-shipping">
    
    Billing address same as shipping address
    
  </label>
                    </div>

                </div>
                <div class="checkout-form__form-item-group js-checkout-form-item-group js-hidden" data-toggle-id="checkout-billing-address-shipping" data-reverse-toggle="true">
                    <h5 class="checkout-form__form-item-group-title">Billing Address</h5>
                    <div class="form-item form-item--text form-item--checkout-first-name form-item--required">
                        <label for="checkout-first-name" class="label label--text label--required">
  First Name
  <input type="text"  name="first-name" class="input input--text" autocomplete="given-name" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-last-name form-item--required">
                        <label for="checkout-last-name" class="label label--text label--required">
  Last Name
  <input type="text"  name="last-name" class="input input--text" autocomplete="family-name" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-company-name">
                        <label for="checkout-company-name" class="label label--text">
  Company Name or c/o
  <input type="text"  name="company-name" class="input input--text" placeholder="Optional" autocomplete="organization" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-address-1 form-item--required">
                        <label for="checkout-address-1" class="label label--text label--required">
  Address 1
  <input type="text"  name="address-1" class="input input--text" autocomplete="address-line1" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-address-2">
                        <label for="checkout-address-2" class="label label--text">
  Address 2
  <input type="text"  name="address-2" class="input input--text" placeholder="Optional" autocomplete="address-line2" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-city form-item--required">
                        <label for="checkout-city" class="label label--text label--required">
  City
  <input type="text"  name="city" class="input input--text" autocomplete="address-level2" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-zip form-item--required">
                        <label for="checkout-zip" class="label label--text label--required">
  Zip Code
  <input type="text"  name="zip" class="input input--text" autocomplete="postal-code" >
  </label>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="checkout-country" class="label label--required">
    Country
    <select id="checkout-country" name="country" class="select js-select" autocomplete="country">
      <option value="" >Select</option>
      <option value="USA" >United States</option>
      <option value="AUS" >Australia</option>
      <option value="CAN" >Canada</option>
      <option value="FRA" >France</option>
      <option value="GER" >Germany</option>
      <option value="HK" >Hong Kong</option>
      <option value="IND" >India</option>
      <option value="IRE" >Ireland</option>
      <option value="ITA" >Italy</option>
      <option value="MEX" >Mexico</option>
      <option value="NZE" >New Zealand</option>
      <option value="SAF" >South Africa</option>
      <option value="SPA" >Spain</option>
      <option value="SWE" >Sweden</option>
      <option value="UAE" >United Arab Emirates</option>
      <option value="UK" >United Kingdom</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="checkout-state" class="label label--required">
    State
    <select id="checkout-state" name="state" class="select js-select" autocomplete="address-level1">
      <option value="" >Select</option>
      <option value="AL" >Alabama</option>
      <option value="AK" >Alaska</option>
      <option value="AZ" >Arizona</option>
      <option value="AR" >Arkansas</option>
      <option value="CA" >California</option>
      <option value="CO" >Colorado</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--text form-item--checkout-phone form-item--required">
                        <label for="checkout-phone" class="label label--text label--required">
  Phone Number
  <input type="text"  name="phone" class="input input--text" placeholder="000-123-4567" autocomplete="tel" >
  </label>
                    </div>

                </div>
            </div>
            <div class="checkout-form__form-items">
                <div class="checkout-form__actions js-checkout-form-actions">
                    <button class="button button--primary">Next: Shipping Method &amp; Payment </button>

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

    </div>
    <div class="l-collected-components l-collected-components--checkout-form--addresses-review">
        Handle: <code>@checkout-form--addresses-review</code>
        <form class="checkout-form checkout-form--addresses-review js-checkout-form js-checkout-form-addresses-review">
            <span class="checkout-form__step-number checkout-form__step-number--past">1</span>
            <div class="checkout-form__title">
                <h4 class="checkout-form__title-embedded-heading">Shipping &amp; Billing Addresses</h4>
            </div>
            <button class="checkout-form__edit-button button button--outlined">Edit</button>
            <div class="checkout-form__review-items">
                <div class="checkout-form__review-item-group">
                    <span class="checkout-form__review-label">Shipping Information</span>
                    <p class="checkout-form__review-item">
                        John Doe<br>Apple, Inc.<br>112W Monroe St<br>Chicago, IL 60603<br>United States
                    </p>
                    <p class="checkout-form__review-item">
                        888-888-1234<br>johndoe@email.com
                    </p>
                </div>
                <div class="checkout-form__review-item-group">
                    <span class="checkout-form__review-label">Billing Information</span>
                    <p class="checkout-form__review-item">
                        John Smith<br>Apple, Inc.<br>One Aloha Lane<br>Peoria, IL 61615<br>United States
                    </p>
                    <p class="checkout-form__review-item">
                        888-888-1234
                    </p>
                </div>
            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--checkout-form--shipping-and-payment">
        Handle: <code>@checkout-form--shipping-and-payment</code>
        <form class="checkout-form checkout-form--shipping-and-payment js-checkout-form js-checkout-form-shipping-and-payment">
            <span class="checkout-form__step-number checkout-form__step-number--present">2</span>
            <div class="checkout-form__title">
                <h4 class="checkout-form__title-embedded-heading">Shipping &amp; Payment</h4>
            </div>
            <div class="checkout-form__form-items">
                <div class="checkout-form__form-item-group-split">
                    <div class="checkout-form__form-item-group js-checkout-form-item-group">
                        <div class="form-item form-item--payment-widget">
                            <!-- Replace everything inside .form-item with the payment widget during implementation. Styles are inline so they aren't included in the build. -->
                            <div style="position: relative; min-height: 350px; background-color: #e2e2e2; text-align: center;">
                                <span style="position: absolute; top: calc(50% - 16px); right: 0; left: 0; color: #999999; font-size: 2.7rem; font-weight: bold; letter-spacing: 3px; line-height: 3.2rem; text-transform: uppercase;">Delego Widget</span>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="checkout-form__form-item-group-split">
                    <div class="checkout-form__form-item-group js-checkout-form-item-group">
                        <div class="form-item form-item--radio">
                            <input type="radio" id="checkout-shipping-method-standard" value="" name="shipping-method" class="radio radio--default" checked="true">
                            <label for="checkout-shipping-method-standard" class=" radio__label--outlined">
    
    <span class="radio__label-text">
      Standard
      <br>
      <span class="radio__description">Estimated Arrival: Wednesday, January 31st</span>
    </span>
    <span class="radio__meta">Free</span>
  </label>
                        </div>

                        <div class="form-item form-item--radio">
                            <input type="radio" id="checkout-shipping-method-two-day" value="" name="shipping-method" class="radio radio--default">
                            <label for="checkout-shipping-method-two-day" class=" radio__label--outlined">
    
    <span class="radio__label-text">
      2 Day
      <br>
      <span class="radio__description">Estimated Arrival: Tuesday, January 30th</span>
    </span>
    <span class="radio__meta">$16.00</span>
  </label>
                        </div>

                        <div class="form-item form-item--radio">
                            <input type="radio" id="checkout-shipping-method-next-day" value="" name="shipping-method" class="radio radio--default">
                            <label for="checkout-shipping-method-next-day" class=" radio__label--outlined">
    
    <span class="radio__label-text">
      Next Day
      <br>
      <span class="radio__description">Estimated Arrival: Monday, January 29th</span>
    </span>
    <span class="radio__meta">$24.00</span>
  </label>
                        </div>

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

    </div>
    <div class="l-collected-components l-collected-components--checkout-form--shipping-and-payment-repairs">
        Handle: <code>@checkout-form--shipping-and-payment-repairs</code>
        <form class="checkout-form checkout-form--shipping-and-payment js-checkout-form js-checkout-form-shipping-and-payment">
            <span class="checkout-form__step-number checkout-form__step-number--">2</span>
            <div class="checkout-form__title">
                <h4 class="checkout-form__title-embedded-heading">Shipping &amp; Payment</h4>
            </div>
            <div class="checkout-form__form-items">
                <div class="checkout-form__form-item-group js-checkout-form-item-group">
                    <p class="paragraph">If your sunglasses are covered under our 2-year warranty against manufacturer defects we will replace the part(s) at no charge. The $13 processing fee is still required.</p>

                    <p class="paragraph">If you approve the estimates charges for the replacement part(s), we will complete the repair and charge your card the estimated charges without further contact. Your credit card will not be charged until your repair is completed.</p>

                    <p class="paragraph">If there are additional part(s) required to complete your repair and/or additional charge(s) that exceed your estimated charge, a repair technicial will contact you.</p>

                </div>
            </div>
            <div class="checkout-form__form-items">
                <div class="checkout-form__form-item-group-split">
                    <div class="checkout-form__form-item-group js-checkout-form-item-group">
                        <div class="form-item form-item--radio">
                            <input type="radio" id="repairs-payment-information-method-check" value="" name="payment-information-method" class="radio radio--default" checked="true">
                            <label for="repairs-payment-information-method-check">
    
    <span class="radio__label-text">
      I will send in a check
    </span>
  </label>
                        </div>

                    </div>
                    <div class="checkout-form__form-item-group js-checkout-form-item-group js-hidden" data-toggle-id="repairs-payment-information-method-check">
                        <p class="paragraph checkout-form__radio-help">Please include a check made out to Maui Jim Sunglasses in your package.</p>

                    </div>
                    <div class="checkout-form__form-item-group js-checkout-form-item-group">
                        <div class="form-item form-item--radio">
                            <input type="radio" id="repairs-payment-information-method-card" value="" name="payment-information-method" class="radio radio--default">
                            <label for="repairs-payment-information-method-card">
    
    <span class="radio__label-text">
      I will pay by credit card
    </span>
  </label>
                        </div>

                    </div>
                    <div class="checkout-form__form-item-group js-checkout-form-item-group js-hidden" data-toggle-id="repairs-payment-information-method-card">
                        <div class="form-item form-item--checkbox">
                            <input type="checkbox" id="repairs-payment-information-card-estimate-approval" name="card-estimate-approval" class="checkbox checkbox--default">
                            <label for="repairs-payment-information-card-estimate-approval">
    
    By checking this box I approve the estimated charges to complete my repair for non-warranty repairs.
    
  </label>
                        </div>

                        <div class="form-item form-item--payment-widget">
                            <!-- Replace everything inside .form-item with the payment widget during implementation. Styles are inline so they aren't included in the build. -->
                            <div style="position: relative; min-height: 350px; background-color: #e2e2e2; text-align: center;">
                                <span style="position: absolute; top: calc(50% - 16px); right: 0; left: 0; color: #999999; font-size: 2.7rem; font-weight: bold; letter-spacing: 3px; line-height: 3.2rem; text-transform: uppercase;">Delego Widget</span>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="checkout-form__form-item-group-split">
                    <div class="checkout-form__form-item-group js-checkout-form-item-group">
                        <div class="form-item form-item--radio">
                            <input type="radio" id="checkout-shipping-method-standard" value="" name="shipping-method" class="radio radio--default" checked="true">
                            <label for="checkout-shipping-method-standard" class=" radio__label--outlined">
    
    <span class="radio__label-text">
      Standard
      <br>
      <span class="radio__description">Estimated Arrival: Wednesday, January 31st</span>
    </span>
    <span class="radio__meta">Free</span>
  </label>
                        </div>

                        <div class="form-item form-item--radio">
                            <input type="radio" id="checkout-shipping-method-two-day" value="" name="shipping-method" class="radio radio--default">
                            <label for="checkout-shipping-method-two-day" class=" radio__label--outlined">
    
    <span class="radio__label-text">
      2 Day
      <br>
      <span class="radio__description">Estimated Arrival: Tuesday, January 30th</span>
    </span>
    <span class="radio__meta">$16.00</span>
  </label>
                        </div>

                        <div class="form-item form-item--radio">
                            <input type="radio" id="checkout-shipping-method-next-day" value="" name="shipping-method" class="radio radio--default">
                            <label for="checkout-shipping-method-next-day" class=" radio__label--outlined">
    
    <span class="radio__label-text">
      Next Day
      <br>
      <span class="radio__description">Estimated Arrival: Monday, January 29th</span>
    </span>
    <span class="radio__meta">$24.00</span>
  </label>
                        </div>

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

    </div>
    <div class="l-collected-components l-collected-components--checkout-form--shipping-and-payment-submit">
        Handle: <code>@checkout-form--shipping-and-payment-submit</code>
        <form class="checkout-form checkout-form--shipping-and-payment js-checkout-form js-checkout-form-shipping-and-payment">
            <span class="checkout-form__step-number checkout-form__step-number--">2</span>
            <div class="checkout-form__title">
                <h4 class="checkout-form__title-embedded-heading">Shipping &amp; Payment</h4>
            </div>
            <div class="checkout-form__form-items">
                <div class="checkout-form__form-item-group-split">
                    <div class="checkout-form__form-item-group js-checkout-form-item-group">
                        <div class="form-item form-item--payment-widget">
                            <!-- Replace everything inside .form-item with the payment widget during implementation. Styles are inline so they aren't included in the build. -->
                            <div style="position: relative; min-height: 350px; background-color: #e2e2e2; text-align: center;">
                                <span style="position: absolute; top: calc(50% - 16px); right: 0; left: 0; color: #999999; font-size: 2.7rem; font-weight: bold; letter-spacing: 3px; line-height: 3.2rem; text-transform: uppercase;">Delego Widget</span>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="checkout-form__form-item-group-split">
                    <div class="checkout-form__form-item-group js-checkout-form-item-group">
                        <div class="form-item form-item--radio">
                            <input type="radio" id="checkout-shipping-method-standard" value="" name="shipping-method" class="radio radio--default" checked="true">
                            <label for="checkout-shipping-method-standard" class=" radio__label--outlined">
    
    <span class="radio__label-text">
      Standard
      <br>
      <span class="radio__description">Estimated Arrival: Wednesday, January 31st</span>
    </span>
    <span class="radio__meta">Free</span>
  </label>
                        </div>

                        <div class="form-item form-item--radio">
                            <input type="radio" id="checkout-shipping-method-two-day" value="" name="shipping-method" class="radio radio--default">
                            <label for="checkout-shipping-method-two-day" class=" radio__label--outlined">
    
    <span class="radio__label-text">
      2 Day
      <br>
      <span class="radio__description">Estimated Arrival: Tuesday, January 30th</span>
    </span>
    <span class="radio__meta">$16.00</span>
  </label>
                        </div>

                        <div class="form-item form-item--radio">
                            <input type="radio" id="checkout-shipping-method-next-day" value="" name="shipping-method" class="radio radio--default">
                            <label for="checkout-shipping-method-next-day" class=" radio__label--outlined">
    
    <span class="radio__label-text">
      Next Day
      <br>
      <span class="radio__description">Estimated Arrival: Monday, January 29th</span>
    </span>
    <span class="radio__meta">$24.00</span>
  </label>
                        </div>

                        <div class="form-item form-item--checkbox">
                            <input type="checkbox" id="checkout-terms-conditions" name="terms-conditions" class="checkbox checkbox--default">
                            <label for="checkout-terms-conditions">
    
    I agree to the <a href='#'>Terms and Conditions</a> of the website
    
  </label>
                        </div>

                        <div class="form-item form-item--checkbox">
                            <input type="checkbox" id="checkout-mailing-list" name="mailing-list" class="checkbox checkbox--default" checked="true">
                            <label for="checkout-mailing-list">
    
    Join our mailing list for latest offers and new arrivals
    
  </label>
                        </div>

                    </div>
                </div>
            </div>
            <div class="checkout-form__form-items">
                <div class="checkout-form__actions js-checkout-form-actions">
                    <button class="button button--primary">Submit Order</button>

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

    </div>
    <div class="l-collected-components l-collected-components--checkout-form--shipping-and-payment-submit-repairs">
        Handle: <code>@checkout-form--shipping-and-payment-submit-repairs</code>
        <form class="checkout-form checkout-form--shipping-and-payment js-checkout-form js-checkout-form-shipping-and-payment">
            <span class="checkout-form__step-number checkout-form__step-number--">2</span>
            <div class="checkout-form__title">
                <h4 class="checkout-form__title-embedded-heading">Shipping &amp; Payment</h4>
            </div>
            <div class="checkout-form__form-items">
                <div class="checkout-form__form-item-group js-checkout-form-item-group">
                    <p class="paragraph">If your sunglasses are covered under our 2-year warranty against manufacturer defects we will replace the part(s) at no charge. The $13 processing fee is still required.</p>

                    <p class="paragraph">If you approve the estimates charges for the replacement part(s), we will complete the repair and charge your card the estimated charges without further contact. Your credit card will not be charged until your repair is completed.</p>

                    <p class="paragraph">If there are additional part(s) required to complete your repair and/or additional charge(s) that exceed your estimated charge, a repair technicial will contact you.</p>

                </div>
            </div>
            <div class="checkout-form__form-items">
                <div class="checkout-form__form-item-group-split">
                    <div class="checkout-form__form-item-group js-checkout-form-item-group">
                        <div class="form-item form-item--radio">
                            <input type="radio" id="repairs-payment-information-method-check" value="" name="payment-information-method" class="radio radio--default" checked="true">
                            <label for="repairs-payment-information-method-check">
    
    <span class="radio__label-text">
      I will send in a check
    </span>
  </label>
                        </div>

                    </div>
                    <div class="checkout-form__form-item-group js-checkout-form-item-group js-hidden" data-toggle-id="repairs-payment-information-method-check">
                        <p class="paragraph checkout-form__radio-help">Please include a check made out to Maui Jim Sunglasses in your package.</p>

                    </div>
                    <div class="checkout-form__form-item-group js-checkout-form-item-group">
                        <div class="form-item form-item--radio">
                            <input type="radio" id="repairs-payment-information-method-card" value="" name="payment-information-method" class="radio radio--default">
                            <label for="repairs-payment-information-method-card">
    
    <span class="radio__label-text">
      I will pay by credit card
    </span>
  </label>
                        </div>

                    </div>
                    <div class="checkout-form__form-item-group js-checkout-form-item-group js-hidden" data-toggle-id="repairs-payment-information-method-card">
                        <div class="form-item form-item--checkbox">
                            <input type="checkbox" id="repairs-payment-information-card-estimate-approval" name="card-estimate-approval" class="checkbox checkbox--default">
                            <label for="repairs-payment-information-card-estimate-approval">
    
    By checking this box I approve the estimated charges to complete my repair for non-warranty repairs.
    
  </label>
                        </div>

                        <div class="form-item form-item--payment-widget">
                            <!-- Replace everything inside .form-item with the payment widget during implementation. Styles are inline so they aren't included in the build. -->
                            <div style="position: relative; min-height: 350px; background-color: #e2e2e2; text-align: center;">
                                <span style="position: absolute; top: calc(50% - 16px); right: 0; left: 0; color: #999999; font-size: 2.7rem; font-weight: bold; letter-spacing: 3px; line-height: 3.2rem; text-transform: uppercase;">Delego Widget</span>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="checkout-form__form-item-group-split">
                    <div class="checkout-form__form-item-group js-checkout-form-item-group">
                        <div class="form-item form-item--radio">
                            <input type="radio" id="checkout-shipping-method-standard" value="" name="shipping-method" class="radio radio--default" checked="true">
                            <label for="checkout-shipping-method-standard" class=" radio__label--outlined">
    
    <span class="radio__label-text">
      Standard
      <br>
      <span class="radio__description">Estimated Arrival: Wednesday, January 31st</span>
    </span>
    <span class="radio__meta">Free</span>
  </label>
                        </div>

                        <div class="form-item form-item--radio">
                            <input type="radio" id="checkout-shipping-method-two-day" value="" name="shipping-method" class="radio radio--default">
                            <label for="checkout-shipping-method-two-day" class=" radio__label--outlined">
    
    <span class="radio__label-text">
      2 Day
      <br>
      <span class="radio__description">Estimated Arrival: Tuesday, January 30th</span>
    </span>
    <span class="radio__meta">$16.00</span>
  </label>
                        </div>

                        <div class="form-item form-item--radio">
                            <input type="radio" id="checkout-shipping-method-next-day" value="" name="shipping-method" class="radio radio--default">
                            <label for="checkout-shipping-method-next-day" class=" radio__label--outlined">
    
    <span class="radio__label-text">
      Next Day
      <br>
      <span class="radio__description">Estimated Arrival: Monday, January 29th</span>
    </span>
    <span class="radio__meta">$24.00</span>
  </label>
                        </div>

                        <div class="form-item form-item--checkbox">
                            <input type="checkbox" id="checkout-terms-conditions" name="terms-conditions" class="checkbox checkbox--default">
                            <label for="checkout-terms-conditions">
    
    I agree to the <a href='#'>Terms and Conditions</a> of the website
    
  </label>
                        </div>

                        <div class="form-item form-item--checkbox">
                            <input type="checkbox" id="checkout-mailing-list" name="mailing-list" class="checkbox checkbox--default" checked="true">
                            <label for="checkout-mailing-list">
    
    Join our mailing list for latest offers and new arrivals
    
  </label>
                        </div>

                    </div>
                </div>
            </div>
            <div class="checkout-form__form-items">
                <div class="checkout-form__actions js-checkout-form-actions">
                    <button class="button button--primary">Submit Order</button>

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

    </div>
    <div class="l-collected-components l-collected-components--confirmation-account-create--password-request">
        Handle: <code>@confirmation-account-create--password-request</code>
        <form class="confirmation-account-create confirmation-account-create--request">
            <h4 class="confirmation-account-create__title">Create your account now:</h4>
            <div class="confirmation-account-create__form-items">
                <div class="form-item form-item--password form-item--confirmation-account-create-password form-item--required">
                    <label for="confirmation-account-create-password" class="label label--password label--required">
  Password
  <input type="password"  name="password" class="input input--password" autocomplete="current-password" >
  </label>
                </div>

                <div class="form-item form-item--password form-item--confirmation-account-create-password-verify form-item--required">
                    <label for="confirmation-account-create-password-verify" class="label label--password label--required">
  Verify Password
  <input type="password"  name="password-verify" class="input input--password" autocomplete="current-password" >
  </label>
                </div>

            </div>
            <div class="confirmation-account-create__actions">
                <button class="button button--primary">Create Account</button>

            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--confirmation-account-create--password-submitted">
        Handle: <code>@confirmation-account-create--password-submitted</code>
        <form class="confirmation-account-create confirmation-account-create--submitted">
            <h4 class="confirmation-account-create__title">Thank you for creating your account.</h4>
            <div class="confirmation-account-create__actions">
                <button class="button button--primary">View your account</button>

            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--contact-us">
        Handle: <code>@contact-us</code>
        <form class="contact-us js-contact-us u-page-width-max-restricted">
            <div class="contact-us__form-items">
                <div class="form-item form-item--text form-item--contact-us-first-name form-item--required">
                    <label for="contact-us-first-name" class="label label--text label--required">
      First name
      <input type="text"  name="first-name" class="input input--text" autocomplete="given-name" >
      </label>
                </div>
                <div class="form-item form-item--text form-item--contact-us-last-name form-item--required">
                    <label for="contact-us-last-name" class="label label--text label--required">
      Last name
      <input type="text"  name="last-name" class="input input--text" autocomplete="family-name" >
      </label>
                </div>
                <div class="form-item form-item--text form-item--contact-us-company">
                    <label for="contact-us-company" class="label label--text">
      Company
      <input type="text"  name="company" class="input input--text" placeholder="Optional" autocomplete="organization" >
      </label>
                </div>
                <div class="form-item form-item--email form-item--contact-us-email form-item--required">
                    <label for="contact-us-email" class="label label--email label--required">
      Email address
      <input type="email"  name="email" class="input input--email" autocomplete="email" >
      </label>
                </div>
                <div class="form-item form-item--select form-item--required">
                    <div class="select-wrapper">
                        <label for="contact-us-inquiry-reason" class="label label--required">
        Reason of inquiry
        <select id="contact-us-inquiry-reason" name="inquiry-reason" class="select js-select">
          <option value="" >Select</option>
          <option value="repair" >Repair</option>
          <option value="corporate" >Corporate Gift</option>
          <option value="golf" >Golf Event</option>
          <option value="general" >General Questions</option>
        </select>
        </label>
                    </div>
                </div>
                <div class="contact-us__additional-options js-contact-us-additional-options js-hidden" data-options-id="repair">
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="contact-us-repair-prescription" class="label label--required">
          Are your sunglasses prescription?
          <select id="contact-us-repair-prescription" name="repair-prescription" class="select js-select">
            <option value="" >select</option>
            <option value="yes" >Yes</option>
            <option value="no" >No</option>
          </select>
          </label>
                        </div>
                    </div>
                </div>
                <div class="contact-us__additional-options js-contact-us-additional-options js-hidden" data-options-id="corporate">
                    <div class="form-item form-item--text form-item--contact-us-order-address1 form-item--required">
                        <label for="contact-us-order-address1" class="label label--text label--required">
        Address 1
        <input type="text"  name="order-address1" class="input input--text" autocomplete="address-line1" >
        </label>
                    </div>
                    <div class="form-item form-item--text form-item--contact-us-order-address2">
                        <label for="contact-us-order-address2" class="label label--text">
        Address 2
        <input type="text"  name="order-address2" class="input input--text" placeholder="Optional" autocomplete="address-line2" >
        </label>
                    </div>
                    <div class="form-item form-item--text form-item--contact-us-order-city form-item--required">
                        <label for="contact-us-order-city" class="label label--text label--required">
        City
        <input type="text"  name="order-city" class="input input--text" autocomplete="address-level2" >
        </label>
                    </div>
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="contact-us-order-state" class="label label--required">
          State
          <select id="contact-us-order-state" name="order-state" class="select js-select" autocomplete="address-level1">
            <option value="" >Select</option>
            <option value="AL" >Alabama</option>
            <option value="AK" >Alaska</option>
            <option value="AS" >American Samoa</option>
            <option value="AZ" >Arizona</option>
            <option value="AR" >Arkansas</option>
            <option value="CA" >California</option>
            <option value="CO" >Colorado</option>
            <option value="CT" >Connecticut</option>
            <option value="DE" >Delaware</option>
            <option value="DC" >District Of Columbia</option>
            <option value="FM" >Federated States Of Micronesia</option>
            <option value="FL" >Florida</option>
            <option value="GA" >Georgia</option>
            <option value="GU" >Guam</option>
            <option value="HI" >Hawaii</option>
            <option value="ID" >Idaho</option>
            <option value="IL" >Illinois</option>
            <option value="IN" >Indiana</option>
            <option value="IA" >Iowa</option>
            <option value="KS" >Kansas</option>
            <option value="KY" >Kentucky</option>
            <option value="LA" >Louisiana</option>
            <option value="ME" >Maine</option>
            <option value="MH" >Marshall Islands</option>
            <option value="MD" >Maryland</option>
            <option value="MA" >Massachusetts</option>
            <option value="MI" >Michigan</option>
            <option value="MN" >Minnesota</option>
            <option value="MS" >Mississippi</option>
            <option value="MO" >Missouri</option>
            <option value="MT" >Montana</option>
            <option value="NE" >Nebraska</option>
            <option value="NV" >Nevada</option>
            <option value="NH" >New Hampshire</option>
            <option value="NJ" >New Jersey</option>
            <option value="NM" >New Mexico</option>
            <option value="NY" >New York</option>
            <option value="NC" >North Carolina</option>
            <option value="ND" >North Dakota</option>
            <option value="MP" >Northern Mariana Islands</option>
            <option value="OH" >Ohio</option>
            <option value="OK" >Oklahoma</option>
            <option value="OR" >Oregon</option>
            <option value="PW" >Palau</option>
            <option value="PA" >Pennsylvania</option>
            <option value="PR" >Puerto Rico</option>
            <option value="RI" >Rhode Island</option>
            <option value="SC" >South Carolina</option>
            <option value="SD" >South Dakota</option>
            <option value="TN" >Tennessee</option>
            <option value="TX" >Texas</option>
            <option value="UT" >Utah</option>
            <option value="VT" >Vermont</option>
            <option value="VI" >Virgin Islands</option>
            <option value="VA" >Virginia</option>
            <option value="WA" >Washington</option>
            <option value="WV" >West Virginia</option>
            <option value="WI" >Wisconsin</option>
            <option value="WY" >Wyoming</option>
          </select>
          </label>
                        </div>
                    </div>
                    <div class="form-item form-item--text form-item--contact-us-order-zip-code form-item--required">
                        <label for="contact-us-order-zip-code" class="label label--text label--required">
        ZIP code
        <input type="text"  name="order-zip-code" class="input input--text" autocomplete="postal-code" >
        </label>
                    </div>
                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="contact-us-order-country" class="label label--required">
          Country
          <select id="contact-us-order-country" name="order-country" class="select js-select" autocomplete="country">
            <option value="" >Select</option>
            <option value="USA" >United States</option>
            <option value="AUS" >Australia</option>
            <option value="CAN" >Canada</option>
            <option value="FRA" >France</option>
            <option value="GER" >Germany</option>
            <option value="HK" >Hong Kong</option>
            <option value="IND" >India</option>
            <option value="IRE" >Ireland</option>
            <option value="ITA" >Italy</option>
            <option value="MEX" >Mexico</option>
            <option value="NZE" >New Zealand</option>
            <option value="SAF" >South Africa</option>
            <option value="SPA" >Spain</option>
            <option value="SWE" >Sweden</option>
            <option value="UAE" >United Arab Emirates</option>
            <option value="UK" >United Kingdom</option>
          </select>
          </label>
                        </div>
                    </div>
                    <div class="form-item form-item--tel form-item--contact-us-order-phone form-item--required">
                        <label for="contact-us-order-phone" class="label label--tel label--required">
        Phone number
        <input type="tel"  name="order-phone" class="input input--tel" autocomplete="tel" >
        </label>
                    </div>
                </div>
                <div class="contact-us__additional-options js-contact-us-additional-options js-hidden" data-options-id="golf">
                    <fieldset class="contact-us__options-group form-item form-item--checkboxes">
                        <legend>How can we help you? (Select all that apply)</legend>
                        <div class="form-item form-item--checkbox">
                            <input type="checkbox" id="contact-us-golf-help-contact" name="golf-help" class="checkbox checkbox--default">
                            <label for="contact-us-golf-help-contact">
            
            Have a Maui Jim representative contact me
            
          </label>
                        </div>
                        <div class="form-item form-item--checkbox">
                            <input type="checkbox" id="contact-us-golf-help-catalog" name="golf-help" class="checkbox checkbox--default">
                            <label for="contact-us-golf-help-catalog">
            
            Send me a catalog
            
          </label>
                        </div>
                    </fieldset>
                    <div class="contact-us__options-group">
                        <div class="form-item form-item--select">
                            <div class="select-wrapper">
                                <label for="contact-us-golf-id" class="label">
            I am a... (Select one)
            <select id="contact-us-golf-id" name="golf-id" class="select js-select">
              <option value="" >Select</option>
              <option value="charity-event" >Charity event</option>
              <option value="member-guest" >Member guest</option>
              <option value="golf-pro" >Golf pro</option>
              <option value="current-account" >Current Account</option>
              <option value="end-user" >End user</option>
              <option value="other" >Other</option>
            </select>
            </label>
                            </div>
                        </div>
                        <div class="form-item form-item--text form-item--contact-us-golf-id-other">
                            <label for="contact-us-golf-id-other" class="label label--text">
          Other
          <input type="text"  name="golf-id-other" class="input input--text" >
          </label>
                        </div>
                    </div>
                    <div class="contact-us__options-group">
                        <div class="form-item form-item--text form-item--contact-us-golf-address1 form-item--required">
                            <label for="contact-us-golf-address1" class="label label--text label--required">
          Address 1
          <input type="text"  name="golf-address1" class="input input--text" autocomplete="address-line1" >
          </label>
                        </div>
                        <div class="form-item form-item--text form-item--contact-us-golf-address2">
                            <label for="contact-us-golf-address2" class="label label--text">
          Address 2
          <input type="text"  name="golf-address2" class="input input--text" placeholder="Optional" autocomplete="address-line2" >
          </label>
                        </div>
                        <div class="form-item form-item--text form-item--contact-us-golf-city form-item--required">
                            <label for="contact-us-golf-city" class="label label--text label--required">
          City
          <input type="text"  name="golf-city" class="input input--text" autocomplete="address-level2" >
          </label>
                        </div>
                        <div class="form-item form-item--select form-item--required">
                            <div class="select-wrapper">
                                <label for="contact-us-golf-state" class="label label--required">
            State
            <select id="contact-us-golf-state" name="golf-state" class="select js-select" autocomplete="address-level1">
              <option value="" >Select</option>
              <option value="AL" >Alabama</option>
              <option value="AK" >Alaska</option>
              <option value="AS" >American Samoa</option>
              <option value="AZ" >Arizona</option>
              <option value="AR" >Arkansas</option>
              <option value="CA" >California</option>
              <option value="CO" >Colorado</option>
              <option value="CT" >Connecticut</option>
              <option value="DE" >Delaware</option>
              <option value="DC" >District Of Columbia</option>
              <option value="FM" >Federated States Of Micronesia</option>
              <option value="FL" >Florida</option>
              <option value="GA" >Georgia</option>
              <option value="GU" >Guam</option>
              <option value="HI" >Hawaii</option>
              <option value="ID" >Idaho</option>
              <option value="IL" >Illinois</option>
              <option value="IN" >Indiana</option>
              <option value="IA" >Iowa</option>
              <option value="KS" >Kansas</option>
              <option value="KY" >Kentucky</option>
              <option value="LA" >Louisiana</option>
              <option value="ME" >Maine</option>
              <option value="MH" >Marshall Islands</option>
              <option value="MD" >Maryland</option>
              <option value="MA" >Massachusetts</option>
              <option value="MI" >Michigan</option>
              <option value="MN" >Minnesota</option>
              <option value="MS" >Mississippi</option>
              <option value="MO" >Missouri</option>
              <option value="MT" >Montana</option>
              <option value="NE" >Nebraska</option>
              <option value="NV" >Nevada</option>
              <option value="NH" >New Hampshire</option>
              <option value="NJ" >New Jersey</option>
              <option value="NM" >New Mexico</option>
              <option value="NY" >New York</option>
              <option value="NC" >North Carolina</option>
              <option value="ND" >North Dakota</option>
              <option value="MP" >Northern Mariana Islands</option>
              <option value="OH" >Ohio</option>
              <option value="OK" >Oklahoma</option>
              <option value="OR" >Oregon</option>
              <option value="PW" >Palau</option>
              <option value="PA" >Pennsylvania</option>
              <option value="PR" >Puerto Rico</option>
              <option value="RI" >Rhode Island</option>
              <option value="SC" >South Carolina</option>
              <option value="SD" >South Dakota</option>
              <option value="TN" >Tennessee</option>
              <option value="TX" >Texas</option>
              <option value="UT" >Utah</option>
              <option value="VT" >Vermont</option>
              <option value="VI" >Virgin Islands</option>
              <option value="VA" >Virginia</option>
              <option value="WA" >Washington</option>
              <option value="WV" >West Virginia</option>
              <option value="WI" >Wisconsin</option>
              <option value="WY" >Wyoming</option>
            </select>
            </label>
                            </div>
                        </div>
                        <div class="form-item form-item--text form-item--contact-us-golf-zip-code form-item--required">
                            <label for="contact-us-golf-zip-code" class="label label--text label--required">
          ZIP code
          <input type="text"  name="golf-zip-code" class="input input--text" autocomplete="postal-code" >
          </label>
                        </div>
                        <div class="form-item form-item--select form-item--required">
                            <div class="select-wrapper">
                                <label for="contact-us-golf-country" class="label label--required">
            Country
            <select id="contact-us-golf-country" name="golf-country" class="select js-select" autocomplete="country">
              <option value="" >Select</option>
              <option value="USA" >United States</option>
              <option value="AUS" >Australia</option>
              <option value="CAN" >Canada</option>
              <option value="FRA" >France</option>
              <option value="GER" >Germany</option>
              <option value="HK" >Hong Kong</option>
              <option value="IND" >India</option>
              <option value="IRE" >Ireland</option>
              <option value="ITA" >Italy</option>
              <option value="MEX" >Mexico</option>
              <option value="NZE" >New Zealand</option>
              <option value="SAF" >South Africa</option>
              <option value="SPA" >Spain</option>
              <option value="SWE" >Sweden</option>
              <option value="UAE" >United Arab Emirates</option>
              <option value="UK" >United Kingdom</option>
            </select>
            </label>
                            </div>
                        </div>
                        <div class="form-item form-item--tel form-item--contact-us-golf-phone form-item--required">
                            <label for="contact-us-golf-phone" class="label label--tel label--required">
          Phone number
          <input type="tel"  name="golf-phone" class="input input--tel" autocomplete="tel" >
          </label>
                        </div>
                    </div>
                </div>
                <div class="form-item form-item--textarea form-item--required">
                    <label for="contact-us-comments" class="label label--required">Comments</label>
                    <textarea id="contact-us-comments" class="textarea"></textarea>
                </div>
            </div>
            <div class="contact-us__actions">
                <button class="button button--primary">Submit</button>
            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--gift-card-form--buy">
        Handle: <code>@gift-card-form--buy</code>
        <form class="gift-card-form">
            <p class="gift-card-form__details">To buy a gift card, select your desired quantity and amount below. The gift card will be added to your shopping cart. Gift cards are non-refundable and may not be used towards prescription purchases. Gift cards can only be redeemed on Mauijim.com.</p>
            <div class="gift-card-form__form-items">
                <div class="form-item form-item--select form-item--required">
                    <div class="select-wrapper">
                        <label for="buy-gift-card-qty" class="label label--required">
    Quantity
    <select id="buy-gift-card-qty" name="qty" class="select js-select">
      <option value="1" >1</option>
      <option value="2" >2</option>
      <option value="3" >3</option>
      <option value="4" >4</option>
      <option value="5" >5</option>
      <option value="6" >6</option>
      <option value="7" >7</option>
      <option value="8" >8</option>
      <option value="9" >9</option>
    </select>
    </label>
                    </div>
                </div>

                <div class="form-item form-item--select form-item--required">
                    <div class="select-wrapper">
                        <label for="buy-gift-card-amount" class="label label--required">
    Amount
    <select id="buy-gift-card-amount" name="amount" class="select js-select">
      <option value="25" >$25</option>
      <option value="50" >$50</option>
      <option value="100" >$100</option>
      <option value="250" >$250</option>
      <option value="500" >$500</option>
    </select>
    </label>
                    </div>
                </div>

            </div>
            <div class="gift-card-form__actions">
                <button class="button button--primary">Add to Cart</button>

            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--gift-card-form--redeem">
        Handle: <code>@gift-card-form--redeem</code>
        <form class="gift-card-form">
            <h4 class="gift-card-form__title">Redeem your VIP &amp; Gift Card</h4>
            <p class="gift-card-form__details">Provide the 16 digit card Number and the 4 digit PIN number that can be found on the back of your card.</p>
            <div class="gift-card-form__form-items">
                <div class="form-item form-item--text form-item--redeem-gift-card-number form-item--required">
                    <label for="redeem-gift-card-number" class="label label--text label--required">
  VIP or Gift Card Number
  <input type="text"  name="number" class="input input--text" >
  </label>
                </div>

                <div class="form-item form-item--text form-item--redeem-gift-card-pin form-item--required">
                    <label for="redeem-gift-card-pin" class="label label--text label--required">
  PIN
  <input type="text"  name="pin" class="input input--text" >
  </label>
                </div>

                <button class="button button--plain-text js-modal-open-link" data-modal-id="help-text-pin" formnovalidate type="button">What&#x27;s this?</button>

            </div>
            <div class="gift-card-form__actions">
                <button class="button button--primary">Redeem</button>

                <button class="button button--outlined">Check Balance</button>

            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--login-form--login">
        Handle: <code>@login-form--login</code>
        <form class="login-form login-form--login">
            <h4 class="login-form__title">Login</h4>
            <p class="login-form__description">If you are a returning user, please enter your email and password.</p>
            <div class="login-form__form-items">
                <div class="form-item form-item--email form-item--login-email form-item--required">
                    <label for="login-email" class="label label--email label--required">
  Email Address
  <input type="email"  name="email" class="input input--email" placeholder="name@example.com" autocomplete="email" >
  </label>
                </div>

                <div class="form-item form-item--password form-item--login-password form-item--required">
                    <label for="login-password" class="label label--password label--required">
  Password
  <input type="password"  name="password" class="input input--password" autocomplete="current-password" >
  </label>
                </div>

            </div>
            <div class="login-form__actions">
                <button class="button button--primary">Login</button>

                <button class="button button--plain-text js-button-disabled js-modal-open-link" data-modal-id="reset-password" formnovalidate>Forgot password?</button>

            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--login-form--create-account">
        Handle: <code>@login-form--create-account</code>
        <form class="login-form login-form--create-account">
            <h4 class="login-form__title">Create an account</h4>
            <p class="login-form__description">To create an account, fill out the form below.</p>
            <div class="login-form__form-items">
                <div class="form-item form-item--text form-item--create-account-first-name form-item--required">
                    <label for="create-account-first-name" class="label label--text label--required">
  First Name
  <input type="text"  name="first-name" class="input input--text" autocomplete="given-name" >
  </label>
                </div>

                <div class="form-item form-item--text form-item--create-account-last-name form-item--required">
                    <label for="create-account-last-name" class="label label--text label--required">
  Last Name
  <input type="text"  name="last-name" class="input input--text" autocomplete="family-name" >
  </label>
                </div>

                <div class="form-item form-item--email form-item--create-account-email form-item--required">
                    <label for="create-account-email" class="label label--email label--required">
  Email Address
  <input type="email"  name="email" class="input input--email" placeholder="name@example.com" autocomplete="email" >
  </label>
                </div>

                <div class="form-item form-item--email form-item--create-account-verify-email form-item--required">
                    <label for="create-account-verify-email" class="label label--email label--required">
  Verify Email Address
  <input type="email"  name="verify-email" class="input input--email" autocomplete="email" >
  </label>
                </div>

                <div class="form-item form-item--password form-item--create-account-password form-item--required">
                    <label for="create-account-password" class="label label--password label--required">
  Password
  <input type="password"  name="password" class="input input--password" autocomplete="new-password" >
  </label>
                </div>

                <div class="form-item form-item--password form-item--create-account-verify-password form-item--required">
                    <label for="create-account-verify-password" class="label label--password label--required">
  Verify Password
  <input type="password"  name="verify-password" class="input input--password" autocomplete="new-password" >
  </label>
                </div>

                <div class="form-item form-item--checkbox">
                    <input type="checkbox" id="create-account-email-updates" name="email-updates" class="checkbox checkbox--default" checked="true">
                    <label for="create-account-email-updates">
    
    Sign up to receive email updates
    
  </label>
                </div>

            </div>
            <div class="login-form__actions">
                <button class="button button--primary">Create an account</button>

            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--login-form--reset-password">
        Handle: <code>@login-form--reset-password</code>
        <form class="login-form login-form--reset-password">
            <h4 class="login-form__title">Reset password</h4>
            <p class="login-form__description">Enter the email address associated with your account in order to receive instructions on how to reset your password.</p>
            <div class="login-form__form-items">
                <div class="form-item form-item--email form-item--reset-password-email form-item--required">
                    <label for="reset-password-email" class="label label--email label--required">
  Email Address
  <input type="email"  name="email" class="input input--email" placeholder="name@example.com" autocomplete="email" >
  </label>
                </div>

            </div>
            <div class="login-form__actions">
                <button class="button button--primary">Send email</button>

            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--login-form--reset-password-feedback">
        Handle: <code>@login-form--reset-password-feedback</code>
        <form class="login-form login-form--reset-password-feedback">
            <h4 class="login-form__title">Reset password</h4>
            <p class="login-form__description">Please check your email account. We sent you an email with a link to reset your password.</p>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--login-form--create-password">
        Handle: <code>@login-form--create-password</code>
        <form class="login-form login-form--create-password">
            <h4 class="login-form__title">Create a new password</h4>
            <p class="login-form__description">Enter your new password below.</p>
            <div class="login-form__form-items">
                <div class="form-item form-item--password form-item--create-password-password form-item--required">
                    <label for="create-password-password" class="label label--password label--required">
  New Password
  <input type="password"  name="password" class="input input--password" autocomplete="new-password" >
  </label>
                </div>

                <div class="form-item form-item--password form-item--create-password-verify-password form-item--required">
                    <label for="create-password-verify-password" class="label label--password label--required">
  Verify New Password
  <input type="password"  name="verify-password" class="input input--password" autocomplete="new-password" >
  </label>
                </div>

            </div>
            <div class="login-form__actions">
                <button class="button button--primary">Reset password</button>

            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--login-form--create-password-feedback">
        Handle: <code>@login-form--create-password-feedback</code>
        <form class="login-form login-form--create-password-feedback">
            <h4 class="login-form__title">Create a new password</h4>
            <p class="login-form__description">Your password has been changed. Please go to the login page.</p>
            <div class="login-form__actions">
                <button class="button button--primary">Go to login</button>

            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--login-form--guest-checkout">
        Handle: <code>@login-form--guest-checkout</code>
        <form class="login-form login-form--guest-checkout">
            <h4 class="login-form__title">Guest Checkout</h4>
            <p class="login-form__description">You’ll have a chance to create an account once you’ve completed checking out.</p>
            <div class="login-form__form-items">
                <div class="form-item form-item--email form-item--guest-checkout-email form-item--required">
                    <label for="guest-checkout-email" class="label label--email label--required">
  Email Address
  <input type="email"  name="email" class="input input--email" placeholder="name@example.com" autocomplete="email" >
  </label>
                </div>

            </div>
            <div class="login-form__actions">
                <button class="button button--primary">Continue as a guest</button>

            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--modal-form--login">
        Handle: <code>@modal-form--login</code>
        <form class="modal-form modal-form--login js-modal-form">
            <div class="modal-form__items modal-form__items--1-cols">
                <div class="modal-form__item-group">
                    <div class="form-item form-item--email form-item--login-email">
                        <label for="login-email" class="label label--email">
  Email Address
  <input type="email"  name="email" class="input input--email" placeholder="name@example.com" >
  </label>
                    </div>

                    <div class="form-item form-item--password form-item--login-password">
                        <label for="login-password" class="label label--password">
  Password
  <input type="password"  name="password" class="input input--password" >
  </label>
                    </div>

                </div>
            </div>
            <div class="modal-form__actions js-modal-form-actions">
                <div class="modal-form__action">
                    <button class="button button--primary">Login</button>

                </div>
                <div class="modal-form__action">
                    <button class="button button--plain-text js-modal-open-link js-modal-close-button" data-modal-id="reset-password">Forgot password?</button>

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

    </div>
    <div class="l-collected-components l-collected-components--modal-form--reset-password">
        Handle: <code>@modal-form--reset-password</code>
        <form class="modal-form modal-form--reset-password js-modal-form">
            <div class="modal-form__items modal-form__items--1-cols">
                <div class="modal-form__item-group">
                    <p>Enter the email address associated with your account in order to receive instructions on how to reset your password.</p>

                    <div class="form-item form-item--email form-item--reset-password-email">
                        <label for="reset-password-email" class="label label--email">
  Email Address
  <input type="email"  name="email" class="input input--email" placeholder="name@example.com" >
  </label>
                    </div>

                </div>
            </div>
            <div class="modal-form__actions js-modal-form-actions">
                <div class="modal-form__action">
                    <button class="button button--primary">Send Email</button>

                </div>
                <div class="modal-form__action">
                    <button class="button button--plain-text js-modal-close-button">Cancel</button>

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

    </div>
    <div class="l-collected-components l-collected-components--modal-form--reset-password-feedback">
        Handle: <code>@modal-form--reset-password-feedback</code>
        <form class="modal-form modal-form--reset-password-feedback js-modal-form">
            <div class="modal-form__items modal-form__items--1-cols">
                <div class="modal-form__item-group">
                    <p>Please check your email account. We sent you an email with a link to reset your password.</p>

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

    </div>
    <div class="l-collected-components l-collected-components--modal-form--repair-options">
        Handle: <code>@modal-form--repair-options</code>
        <form class="modal-form modal-form--repair-options js-modal-form">
            <div class="modal-form__items modal-form__items--1-cols">
                <div class="modal-form__item-group">
                    <p class="paragraph">What type of sunglasses do you want to repair today?</p>

                </div>
            </div>
            <div class="modal-form__actions js-modal-form-actions">
                <div class="modal-form__action">
                    <button class="button button--outlined">Prescription</button>

                </div>
                <div class="modal-form__action">
                    <button class="button button--primary">Non-prescription</button>

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

    </div>
    <div class="l-collected-components l-collected-components--modal-form--style-number-help">
        Handle: <code>@modal-form--style-number-help</code>
        <form class="modal-form modal-form--style-number-help js-modal-form">
            <div class="modal-form__items modal-form__items--1-cols">
                <div class="modal-form__item-group">
                    <p class="paragraph">Please refer to the right temple of your sunglasses. Your style number is only the first 3 numbers ('266' in the example below). Do not include MJ or any letters before the style number.</p>

                    <img src="/assets/images/sunglass-number-show1.jpg" alt="Style number photo" class="image image--sunglasses-number">

                </div>
            </div>
            <div class="modal-form__actions js-modal-form-actions">
                <div class="modal-form__action">
                    <button class="button button--primary js-modal-close-button" formnovalidate>Close</button>

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

    </div>
    <div class="l-collected-components l-collected-components--modal-form--data-protection">
        Handle: <code>@modal-form--data-protection</code>
        <form class="modal-form modal-form--data-protection js-modal-form">
            <div class="modal-form__items modal-form__items--1-cols">
                <div class="modal-form__item-group">
                    <div class="form-item form-item--checkbox">
                        <input type="checkbox" id="data-protection-url-redirect-approval" name="url-redirect-approval" class="checkbox checkbox--default js-form-item-redirect" data-redirect-url="https://careers.mauijim.com/">
                        <label for="data-protection-url-redirect-approval">
    
    He leído y acepto la <a href='#'>Política de Protección de Datos</a>
    
  </label>
                    </div>

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

    </div>
    <div class="l-collected-components l-collected-components--modal-form--shipping-address-add">
        Handle: <code>@modal-form--shipping-address-add</code>
        <form class="modal-form modal-form--shipping-address-add js-modal-form">
            <div class="modal-form__items modal-form__items--3-cols">
                <div class="modal-form__item-group">
                    <input type="hidden" id="shipping-address-modal-form-item-id" name="id">

                    <div class="form-item form-item--text form-item--shipping-address-first-name form-item--required">
                        <label for="shipping-address-first-name" class="label label--text label--required">
  First Name
  <input type="text"  name="first-name" class="input input--text" autocomplete="given-name" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--shipping-address-last-name form-item--required">
                        <label for="shipping-address-last-name" class="label label--text label--required">
  Last Name
  <input type="text"  name="last-name" class="input input--text" autocomplete="family-name" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--shipping-address-company-name">
                        <label for="shipping-address-company-name" class="label label--text">
  Company Name or c/o
  <input type="text"  name="company-name" class="input input--text" placeholder="Optional" autocomplete="organization" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--shipping-address-address-1 form-item--required">
                        <label for="shipping-address-address-1" class="label label--text label--required">
  Address 1
  <input type="text"  name="address-1" class="input input--text" autocomplete="shipping address-line1" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--shipping-address-address-2">
                        <label for="shipping-address-address-2" class="label label--text">
  Address 2
  <input type="text"  name="address-2" class="input input--text" placeholder="Optional" autocomplete="shipping address-line2" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--shipping-address-city form-item--required">
                        <label for="shipping-address-city" class="label label--text label--required">
  City
  <input type="text"  name="city" class="input input--text" autocomplete="shipping address-level2" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--shipping-address-zip form-item--required">
                        <label for="shipping-address-zip" class="label label--text label--required">
  Zip Code
  <input type="text"  name="zip" class="input input--text" autocomplete="shipping postal-code" >
  </label>
                    </div>

                    <div class="form-item form-item--select form-item--required form-item--locked">
                        <div class="select-wrapper">
                            <label for="shipping-address-country" class="label label--required">
    Country
    <select id="shipping-address-country" name="country" class="select js-select" autocomplete="shipping country">
      <option value="USA" >United States</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--select form-item--required">
                        <div class="select-wrapper">
                            <label for="shipping-address-state" class="label label--required">
    State
    <select id="shipping-address-state" name="state" class="select js-select" autocomplete="shipping address-level1">
      <option value="" >Select</option>
      <option value="AL" >Alabama</option>
      <option value="AK" >Alaska</option>
      <option value="AZ" >Arizona</option>
      <option value="AR" >Arkansas</option>
      <option value="CA" >California</option>
      <option value="CO" >Colorado</option>
      <option value="IL" >Illinois</option>
    </select>
    </label>
                        </div>
                    </div>

                    <div class="form-item form-item--text form-item--shipping-address-phone-number form-item--required">
                        <label for="shipping-address-phone-number" class="label label--text label--required">
  Phone Number
  <input type="text"  name="phone-number" class="input input--text" placeholder="000-123-4567" autocomplete="tel" >
  </label>
                    </div>

                </div>
            </div>
            <div class="modal-form__actions js-modal-form-actions">
                <div class="modal-form__action">
                    <button class="button button--outlined js-modal-close-button" formnovalidate type="cancel">Cancel</button>

                </div>
                <div class="modal-form__action">
                    <button class="button button--primary" type="submit">Save</button>

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

    </div>
    <div class="l-collected-components l-collected-components--modal-form--fullname-edit">
        Handle: <code>@modal-form--fullname-edit</code>
        <form class="modal-form modal-form--fullname-edit js-modal-form">
            <div class="modal-form__items modal-form__items--1-cols">
                <div class="modal-form__item-group">
                    <input type="hidden" id="fullname-modal-form-item-id" name="id">

                    <div class="form-item form-item--text form-item--fullname-first-name form-item--required">
                        <label for="fullname-first-name" class="label label--text label--required">
  First Name
  <input type="text"  name="first-name" class="input input--text" autocomplete="given-name" >
  </label>
                    </div>

                    <div class="form-item form-item--text form-item--fullname-last-name form-item--required">
                        <label for="fullname-last-name" class="label label--text label--required">
  Last Name
  <input type="text"  name="last-name" class="input input--text" autocomplete="family-name" >
  </label>
                    </div>

                </div>
            </div>
            <div class="modal-form__actions js-modal-form-actions">
                <div class="modal-form__action">
                    <button class="button button--outlined js-modal-close-button" type="cancel">Cancel</button>

                </div>
                <div class="modal-form__action">
                    <button class="button button--primary" type="submit">Save</button>

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

    </div>
    <div class="l-collected-components l-collected-components--modal-form--password-edit">
        Handle: <code>@modal-form--password-edit</code>
        <form class="modal-form modal-form--password-edit js-modal-form">
            <div class="modal-form__items modal-form__items--1-cols">
                <div class="modal-form__item-group">
                    <input type="hidden" id="password-modal-form-item-id" name="id">

                    <div class="form-item form-item--password form-item--old-password form-item--required">
                        <label for="old-password" class="label label--password label--required">
  Old Password
  <input type="password"  name="old-password" class="input input--password" autocomplete="current-password" >
  </label>
                    </div>

                    <div class="form-item form-item--password form-item--new-password form-item--required">
                        <label for="new-password" class="label label--password label--required">
  New Password
  <input type="password"  name="new-password" class="input input--password" autocomplete="new-password" >
  </label>
                    </div>

                    <div class="form-item form-item--password form-item--verify-new-password form-item--required">
                        <label for="verify-new-password" class="label label--password label--required">
  Verify New Password
  <input type="password"  name="verify-new-password" class="input input--password" autocomplete="new-password" >
  </label>
                    </div>

                </div>
            </div>
            <div class="modal-form__actions js-modal-form-actions">
                <div class="modal-form__action">
                    <button class="button button--outlined js-modal-close-button" type="cancel">Cancel</button>

                </div>
                <div class="modal-form__action">
                    <button class="button button--primary" type="submit">Save</button>

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

    </div>
    <div class="l-collected-components l-collected-components--modal-form--reserve-in-store">
        Handle: <code>@modal-form--reserve-in-store</code>
        <form class="modal-form modal-form--reserve-in-store js-modal-form" action="8f6ce88d42dd6b994dd53f53149d089a">
            <div class="modal-form__items modal-form__items--1-cols">
                <div class="modal-form__item-group modal-form__item-group--product">
                    <div class="card js-card card--reserve-in-store" aria-label="PEAHI">
                        <div class="card__inner">
                            <a class="card__link js-card-url" href="#202-02" aria-label="View Gloss Black product page" data-202-02-url="#202-02" data-B202-2M-url="#B202-2M" data-H202-10-url="#H202-10" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71"
                                data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-202-02-stock="true" data-B202-2M-stock="true" data-H202-10-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true"
                                data-HT202-71-stock="true" data-H202-2M-2-stock="true" data-H202-70-2-stock="true" data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340" data-variant="202-02" alt="Gloss Black PEAHI Front View" data-style="PEAHI" data-color="Gloss Black" 
             data-202-02-front="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340"  data-202-02-angle="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;340"  data-202-02-side="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-B202-2M-front="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&amp;wid&#x3D;340"  data-B202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-B202-2M-side="https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-10-front="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;340"  data-H202-10-angle="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-10-side="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
          >
      <p class="card__title">PEAHI</p>
      <span class="card__price js-card-price" data-202-02-price="$149.00" data-B202-2M-price="$189.00" data-H202-10-price="$229.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
        $149.00
      </span>
      <span class="card__back-link"><svg class="icon icon--arrow-left" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>
 Back</span>
      <span class="card__variant-name js-card-variant-name" data-202-02-variant-name="Gloss Black" data-B202-2M-variant-name="Matte Black" data-H202-10-variant-name="Dark Tortoise" data-H202-2M-variant-name="Matte Black" data-H202-70-variant-name="Redfish" data-HT202-71-variant-name="MahiMahi" data-H202-2M-2-variant-name="Matte Black" data-H202-70-2-variant-name="Redfish" data-HT202-71-2-variant-name="MahiMahi">
        Gloss Black
      </span>
      <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

    </a>
                            <div class="card__variants-wrapper">
                                <ul class="card__variants js-card-variants">
                                    <li class="card__variant js-card-variant js-card-variant--active" data-id="202-02">
                                        <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button" aria-pressed="true">Gloss Black</button>
                                    </li>
                                    <li class="card__variant js-card-variant" data-id="B202-2M">
                                        <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button" aria-pressed="false">Matte Black</button>
                                    </li>
                                    <li class="card__variant js-card-variant" data-id="H202-10">
                                        <button class="card__variant-button js-card-variant-button" style="background-color:#303032;background-image:url(https://mauijim.scene7.com/is/image/mauijim/10);" type="button" aria-pressed="false">Dark Tortoise</button>
                                    </li>
                                    <li class="card__variant js-card-variant" data-id="H202-2M">
                                        <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button" aria-pressed="false">Matte Black</button>
                                    </li>
                                    <li class="card__variant js-card-variant" data-id="H202-70">
                                        <button class="card__variant-button js-card-variant-button" style="background-color:#7d4a07;" type="button" aria-pressed="false">Redfish</button>
                                    </li>
                                    <li class="card__variant js-card-variant" data-id="HT202-71">
                                        <button class="card__variant-button js-card-variant-button" style="background-color:#218b16;" type="button" aria-pressed="false">MahiMahi</button>
                                    </li>
                                    <li class="card__variant js-card-variant" data-id="H202-2M-2">
                                        <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button" aria-pressed="false">Matte Black</button>
                                    </li>
                                    <li class="card__variant js-card-variant" data-id="H202-70-2">
                                        <button class="card__variant-button js-card-variant-button" style="background-color:#7d4a07;" type="button" aria-pressed="false">Redfish</button>
                                    </li>
                                    <li class="card__variant js-card-variant" data-id="HT202-71-2">
                                        <button class="card__variant-button js-card-variant-button" style="background-color:#218b16;" type="button" aria-pressed="false">MahiMahi</button>
                                    </li>
                                </ul>
                                <div class="card__variants-controls js-card-variants-controls">
                                    <button class="card__variants-control card__variants-control--prev" type="button">
          <span class="u-visually-hidden">Previous</span>
          <svg class="icon icon--arrow-left" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

        </button>
                                    <button class="card__variants-control card__variants-control--next" type="button">
          <span class="u-visually-hidden">Next</span>
          <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

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

                </div>
                <div class="modal-form__item-group modal-form__item-group--views">
                    <div class="views-wrapper js-views-wrapper views-wrapper--default modal-form--views" id="modal-form--views">
                        <div class="view js-view js-view--active view--active js-view--default modal-form--search" id="modal-form--search">
                            <div class="form-item form-item--zip-geolocate zip-geolocate js-zip-geolocate">

                                <input value="" class="input zip-geolocate__input js-input-zip-geolocate" maxlength="10" type="text" placeholder="Zip code" id="form-example-zip-geolocate" />
                                <button class="button button--primary zip-geolocate--zip zip-geolocate__button" type="button">
    <svg class="icon icon--search" alt="">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

    <span class="zip-geolocate__submit-label zip-geolocate__submit-label--large">Find Stores</span>
  </button>
                                <button class="button button--plain-text zip-geolocate--reset zip-geolocate__button" type="reset">
    <svg class="icon icon--close-large" alt="">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

    <span class="zip-geolocate__submit-label zip-geolocate__submit-label--large u-visually-hidden">Clear</span>
  </button>
                            </div>

                            <div class="views-wrapper js-views-wrapper views-wrapper--default modal-form--search-views" id="modal-form--search-views">
                                <div class="view js-view js-view--active view--active js-view--default modal-form--search-view search-views--start" id="modal-form--search-views--start">
                                    <p class="paragraph reserve-in-store__search-message">Type your Zip code to find stores and see product availability.</p>

                                    <img src="/assets/images/mauijim-brand-logo.png" alt="" class="image reserve-in-store__search-image">

                                </div>
                                <div class="view js-view view--hidden modal-form__item-group--error modal-form--search-view search-views--no-results" id="modal-form--search-views--no-results">
                                    <img src="/assets/images/mauijim-brand-mark-grey-small.png" alt="" class="image reserve-in-store__error-image">

                                    <p class="paragraph reserve-in-store__kaumaha">Kaumaha!</p>

                                    <p class="paragraph reserve-in-store__no-results-message">Unfortunately this style is not available to reserve online in your area.</p>

                                </div>
                                <div class="view js-view view--hidden modal-form__item-group--error modal-form--search-view search-views--error" id="modal-form--search-views--error">
                                    <img src="/assets/images/mauijim-brand-mark-grey-small.png" alt="" class="image reserve-in-store__error-image">

                                    <p class="paragraph reserve-in-store__kaumaha">Kaumaha!</p>

                                    <p class="paragraph reserve-in-store__error">Something went wrong, please try again later.</p>

                                    <button class="button button--outlined reserve-in-store__continue-shopping" type="button">Continue Shopping</button>

                                </div>
                                <div class="view js-view view--hidden modal-form--search-view search-views--store-results" id="modal-form--search-views--store-results">
                                    <div class="zip-geolocate__results reserve-in-store--store-results">
                                        <p class="paragraph reserve-in-store__results-found">
                                            <span class="reserve-in-store__results-found--results"></span> results for ZIP code <span class="reserve-in-store__results-found--zip"></span>
                                        </p>
                                    </div>

                                    <p class="paragraph reserve-in-store__availability-update">Product availability daily updated.</p>

                                </div>
                            </div>

                        </div>
                        <div class="view js-view view--hidden modal-form--form" id="modal-form--form">
                            <div class="modal-form__item-group--store-info" id="store-info">
                                <div class="zip-geolocate__results">
                                    <div class="zip-geolocate__result">
                                        <span class="zip-geolocate-result__back-link">
      <svg class="icon icon--arrow-left" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

      Back
    </span>
                                        <div class="zip-geolocate-result__summary zip-geolocate-result__details">
                                            <span class="zip-geolocate-result__name"></span>
                                            <span class="zip-geolocate-result__distance"></span>
                                        </div>
                                        <span class="zip-geolocate-result__address zip-geolocate-result__details"></span>
                                        <span class="zip-geolocate-result__type zip-geolocate-result__details">Prescription Retailer</span>
                                        <a href="#" class="zip-geolocate-result__details-link">
      <svg class="icon icon--arrow-right" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

    </a>
                                        <div class="zip-geolocate__actions">
                                        </div>
                                    </div>
                                </div>

                                <button class="button button--outlined reserve-in-store--change-store-button" type="button">Change Store</button>

                            </div>
                            <div class="modal-form__item-group--contact-info" id="contact-info">
                                <div class="block block--store-info-contact">
                                    <h3 class="block__heading">Your contact information</h3>
                                    <div class="block__contents">
                                        <p class="paragraph">Please wait for the confirmation email. Email will be sent within 24h.</p>

                                    </div>
                                </div>

                            </div>
                            <div class="modal-form__item-group--contact-info-form" id="contact-info-form">
                                <div class="form-item form-item--text form-item--reserve-first-name form-item--required">
                                    <label for="reserve-first-name" class="label label--text label--required">
  First Name
  <input type="text"  name="reserve-first-name" class="input input--text" >
  </label>
                                </div>

                                <div class="form-item form-item--text form-item--reserve-last-name form-item--required">
                                    <label for="reserve-last-name" class="label label--text label--required">
  Last Name
  <input type="text"  name="reserve-last-name" class="input input--text" >
  </label>
                                </div>

                                <div class="form-item form-item--text form-item--reserve-phone-number form-item--required">
                                    <label for="reserve-phone-number" class="label label--text label--required">
  Phone number
  <input type="text"  name="reserve-phone-number" class="input input--text" >
  </label>
                                </div>

                                <div class="form-item form-item--email form-item--reserve-email-address form-item--required">
                                    <label for="reserve-email-address" class="label label--email label--required">
  Email address
  <input type="email"  name="reserve-email-address" class="input input--email" >
  </label>
                                </div>

                                <div class="form-item form-item--checkbox">
                                    <input type="checkbox" id="reserve-receive-updates" name="reserve-receive-updates" class="checkbox checkbox--default" checked="true">
                                    <label for="reserve-receive-updates">
    
    I want to receive email updates and information.
    
  </label>
                                </div>

                            </div>
                            <div class="modal-form__actions js-modal-form-actions">
                                <div class="modal-form__action">
                                    <button class="button button--primary reserve-variation--button" formnovalidate type="button">Reserve</button>

                                </div>
                            </div>
                            <div class="modal-form__item-group--reservation-info" id="reservation-info">
                                <p class="paragraph paragraph--store-info-reservation"><strong>Please Note:</strong> You can reserve 5 items daily. After we confirm an item is available, we hold it until the store closes the next day.</p>

                            </div>
                        </div>
                        <div class="view js-view view--hidden modal-form--form modal-form__item-group--error" id="modal-form--error">
                            <img src="/assets/images/mauijim-brand-mark-grey-small.png" alt="" class="image reserve-in-store__error-image">

                            <p class="paragraph reserve-in-store__kaumaha">Kaumaha!</p>

                            <p class="paragraph reserve-in-store__error">Something went wrong, please try again later or contact the Customer Service at 888-666-5905</p>

                            <p class="paragraph reserve-in-store__add-to-cart"><a href="#">Add this product to cart</a></p>

                            <button class="button button--outlined reserve-in-store__continue-shopping" type="button">Continue Shopping</button>

                        </div>
                        <div class="view js-view view--hidden modal-form--confirmation" id="modal-form--confirmation">
                            <div class="modal-form__item-group--request-received">
                                <div class="block block--request-received">
                                    <h3 class="block__heading reserve-in-store--request-received--customer-name">Thanks {{reserve--first-name}} {{reserve--last-name}}!</h3>
                                    <div class="block__contents">
                                        <p class="paragraph paragraph--request-received">Your request is received.</p>

                                    </div>
                                </div>

                                <div class="block block--request-store-confirmation">
                                    <h3 class="block__heading">Almost Done!</h3>
                                    <div class="block__contents">
                                        <div class="icon-step icon-step--we-contact-you">
                                            <svg class="icon icon--clock" alt="">
  <use xlink:href="/assets/icons/icons.svg#clock"></use>
</svg>

                                            <span class="icon-step__details"><strong>We'll contact you within 24h</strong> to confirm that your item is ready.</span>
                                        </div>

                                        <div class="icon-step icon-step--check-your-email">
                                            <svg class="icon icon--action-mail" alt="">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

                                            <span class="icon-step__details"><strong>Check your email</strong> {{reserve--email-address}} for further instructions.</span>
                                        </div>

                                        <div class="icon-step icon-step--after-confirmation">
                                            <svg class="icon icon--store" alt="">
  <use xlink:href="/assets/icons/icons.svg#store"></use>
</svg>

                                            <span class="icon-step__details"><strong>After the confirmation email,</strong> go to the store within the next two days.</span>
                                        </div>

                                    </div>
                                </div>

                                <div class="block block--request-store-details">
                                    <h3 class="block__heading">Store Details:</h3>
                                    <div class="block__contents">
                                        <div class="zip-geolocate__results">
                                            <div class="zip-geolocate__result">
                                                <div class="zip-geolocate-result__summary zip-geolocate-result__details">
                                                    <span class="zip-geolocate-result__name"></span>
                                                    <span class="zip-geolocate-result__distance"></span>
                                                </div>
                                                <span class="zip-geolocate-result__address zip-geolocate-result__details"></span>
                                                <span class="zip-geolocate-result__type zip-geolocate-result__details">Prescription Retailer</span>
                                                <div class="zip-geolocate__actions">
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <img src="/assets/images/mauijim-brand-logo.png" alt="" class="image reserved-product__image">

                                <button class="button button--primary reserved-product__continue-shopping" type="button">Continue Shopping</button>

                                <p class="paragraph paragraph--store-info-reservation"><strong>Please Note:</strong> You can reserve 5 items daily. After we confirm an item is available, we hold it until the store closes the next day.</p>

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

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

    </div>
    <div class="l-collected-components l-collected-components--modal-form--product-variant-selector">
        Handle: <code>@modal-form--product-variant-selector</code>
        <form class="modal-form modal-form--product-variant-selector js-modal-form js-modal-form-no-reset">
            <div class="modal-form__items modal-form__items--3-cols">
                <div class="modal-form__item-group">
                    <div class="form-item form-item--radio">
                        <input type="radio" id="202-02" value="202-02" name="variant" class="radio radio--image js-pdp-variant-selector-item">
                        <label for="202-02">
    <img class="radio__image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;90">
    <span class="radio__label-text">
      Gloss Black
    </span>
  </label>
                    </div>

                    <div class="form-item form-item--radio">
                        <input type="radio" id="B202-2M" value="B202-2M" name="variant" class="radio radio--image js-pdp-variant-selector-item">
                        <label for="B202-2M">
    <img class="radio__image" src="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&amp;wid&#x3D;90">
    <span class="radio__label-text">
      Matte Black
    </span>
  </label>
                    </div>

                    <div class="form-item form-item--radio">
                        <input type="radio" id="H202-10" value="H202-10" name="variant" class="radio radio--image js-pdp-variant-selector-item">
                        <label for="H202-10">
    <img class="radio__image" src="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;90">
    <span class="radio__label-text">
      Dark Tortoise
    </span>
  </label>
                    </div>

                    <div class="form-item form-item--radio">
                        <input type="radio" id="H202-2M" value="H202-2M" name="variant" class="radio radio--image js-pdp-variant-selector-item">
                        <label for="H202-2M">
    <img class="radio__image" src="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;90">
    <span class="radio__label-text">
      Matte Black
    </span>
  </label>
                    </div>

                    <div class="form-item form-item--radio">
                        <input type="radio" id="H202-70" value="H202-70" name="variant" class="radio radio--image js-pdp-variant-selector-item">
                        <label for="H202-70">
    <img class="radio__image" src="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;90">
    <span class="radio__label-text">
      Redfish
    </span>
  </label>
                    </div>

                    <div class="form-item form-item--radio">
                        <input type="radio" id="HT202-71" value="HT202-71" name="variant" class="radio radio--image js-pdp-variant-selector-item">
                        <label for="HT202-71">
    <img class="radio__image" src="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;90">
    <span class="radio__label-text">
      MahiMahi
    </span>
  </label>
                    </div>

                    <div class="form-item form-item--radio">
                        <input type="radio" id="H202-2M-2" value="H202-2M-2" name="variant" class="radio radio--image js-pdp-variant-selector-item">
                        <label for="H202-2M-2">
    <img class="radio__image" src="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;90">
    <span class="radio__label-text">
      Matte Black
    </span>
  </label>
                    </div>

                    <div class="form-item form-item--radio">
                        <input type="radio" id="H202-70-2" value="H202-70-2" name="variant" class="radio radio--image js-pdp-variant-selector-item">
                        <label for="H202-70-2">
    <img class="radio__image" src="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;90">
    <span class="radio__label-text">
      Redfish
    </span>
  </label>
                    </div>

                    <div class="form-item form-item--radio">
                        <input type="radio" id="HT202-71-2" value="HT202-71-2" name="variant" class="radio radio--image js-pdp-variant-selector-item">
                        <label for="HT202-71-2">
    <img class="radio__image" src="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;90">
    <span class="radio__label-text">
      MahiMahi
    </span>
  </label>
                    </div>

                </div>
            </div>
            <div class="modal-form__actions js-modal-form-actions">
                <div class="modal-form__action">
                    <button class="button button--outlined js-modal-close-button" formnovalidate type="cancel">Cancel</button>

                </div>
                <div class="modal-form__action">
                    <button class="button button--primary" formnovalidate>Choose</button>

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

    </div>
    <div class="l-collected-components l-collected-components--repairs--welcome">
        Handle: <code>@repairs--welcome</code>
        <form class="repairs-form repairs-form--welcome">
            <div class="repairs-form__items">

                <div class="repairs-form__item-group">
                    <p class="paragraph">Need your sunglasses repaired? We have several repair options available for your convenience.</p>

                    <p class="paragraph">Our fast, friendly service team is happy to help. Our sunglasses are warranted to the original purchaser for two years from the date of purchase against any defect in materials and workmanship.</p>

                    <ul class="list list--ul">
                        <li class="list-item list-item--ul">
                            Start Repair
                        </li>
                        <li class="list-item list-item--ul">
                            Print Repair Form
                        </li>
                        <li class="list-item list-item--ul">
                            Send Sunglasses for Repair
                        </li>
                    </ul>

                </div>
                <div class="repairs-form__actions js-repairs-form-actions">
                    <button class="button button--outlined repairs__track-repair">Track Repair</button>

                    <button class="button button--primary js-modal-open-link repairs__start-repair js-modal-form-item-start-repair-button" data-modal-id="repair-type-select" formnovalidate>Start Repair</button>

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

    </div>
    <div class="l-collected-components l-collected-components--repairs--step-1">
        Handle: <code>@repairs--step-1</code>
        <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</h4>
                    </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>

                                <label class="u-visually-hidden" for="search-standalone-form__input">Search</label>
                                <input id="search-standalone-form__input" class="search-standalone-form__input js-search-standalone-input" type="text">
                                <button class="search-standalone-form__button js-search-standalone-button" type="reset">
      <span class="u-visually-hidden">Submit style number or name</span>
      <svg class="icon icon--search" alt="">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

      <svg class="icon icon--close-large" alt="">
  <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 style number is the first 3 numbers (&#x27;266&#x27; instead of &#x27;MJ-266&#x27; or &#x27;Maui 266&#x27;) on the right temple of your sunglasses. Do not include MJ or any letters before the style number. Click here to find your style number.</button>

                    <button class="button button--plain-text button--style-number-assistance" formnovalidate>I don&#x27;t know what type of sunglasses 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-collected-components l-collected-components--repairs--step-1-edit">
        Handle: <code>@repairs--step-1-edit</code>
        <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>

                                <label class="u-visually-hidden" for="search-standalone-form__input">Search</label>
                                <input id="search-standalone-form__input" class="search-standalone-form__input js-search-standalone-input" type="text">
                                <button class="search-standalone-form__button js-search-standalone-button" type="reset">
      <span class="u-visually-hidden">Submit style number or name</span>
      <svg class="icon icon--search" alt="">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

      <svg class="icon icon--close-large" alt="">
  <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 style number is the first 3 numbers (&#x27;266&#x27; instead of &#x27;MJ-266&#x27; or &#x27;Maui 266&#x27;) on the right temple of your sunglasses. Do not include MJ or any letters before the style number. Click here to find your style number.</button>

                    <div class="style-search-results style-search-results--list">
                        <a class="style-search-results__result-link" href="#">
                            <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;169" alt="PEAHI thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">PEAHI</span>
                                    <span class="style-search-results__style-number">202-02</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;169" alt="WATERWAYS thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">WATERWAYS</span>
                                    <span class="style-search-results__style-number">HTS267-15C</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;169" alt="KAWIKA thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">KAWIKA</span>
                                    <span class="style-search-results__style-number">H257-16C</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;169" alt="VOYAGER thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">VOYAGER</span>
                                    <span class="style-search-results__style-number">H178-10</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$&amp;wid&#x3D;169" alt="LEIA thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">LEIA</span>
                                    <span class="style-search-results__style-number">RS708-26D</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="https://s7d2.scene7.com/is/image/mauijim/H711-18_front?$config1800$&amp;wid&#x3D;169" alt="KOHALA thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">KOHALA</span>
                                    <span class="style-search-results__style-number">H711-18</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="https://s7d2.scene7.com/is/image/mauijim/H706-16C_front?$config1800$&amp;wid&#x3D;169" alt="STILLWATER thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">STILLWATER</span>
                                    <span class="style-search-results__style-number">H706-16C</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="/assets/images/t-shirt.png" alt="BORN AND RAISED BAMBOO SHORT SLEEVE thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">BORN AND RAISED BAMBOO SHORT SLEEVE</span>
                                    <span class="style-search-results__style-number">H712-18</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="https://s7d2.scene7.com/is/image/mauijim/R420-04T_front?$config1800$&amp;wid&#x3D;169" alt="KEANAE thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">KEANAE</span>
                                    <span class="style-search-results__style-number">R420-04T</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="https://s7d2.scene7.com/is/image/mauijim/R740-02MB_front?$config1800$&amp;wid&#x3D;169" alt="TAIL SLIDE thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">TAIL SLIDE</span>
                                    <span class="style-search-results__style-number">R740-02MB</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <div class="style-search-results__results-actions">
                            <button class="button button--outlined">Show All (13)</button>
                        </div>
                    </div>

                    <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-collected-components l-collected-components--repairs--step-1-results">
        Handle: <code>@repairs--step-1-results</code>
        <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</h4>
                    </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>

                                <label class="u-visually-hidden" for="search-standalone-form__input">Search</label>
                                <input id="search-standalone-form__input" class="search-standalone-form__input js-search-standalone-input" type="text">
                                <button class="search-standalone-form__button js-search-standalone-button" type="reset">
      <span class="u-visually-hidden">Submit style number or name</span>
      <svg class="icon icon--search" alt="">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

      <svg class="icon icon--close-large" alt="">
  <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 style number is the first 3 numbers (&#x27;266&#x27; instead of &#x27;MJ-266&#x27; or &#x27;Maui 266&#x27;) on the right temple of your sunglasses. Do not include MJ or any letters before the style number. Click here to find your style number.</button>

                    <div class="style-search-results style-search-results--list">
                        <a class="style-search-results__result-link" href="#">
                            <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;169" alt="PEAHI thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">PEAHI</span>
                                    <span class="style-search-results__style-number">202-02</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;169" alt="WATERWAYS thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">WATERWAYS</span>
                                    <span class="style-search-results__style-number">HTS267-15C</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;169" alt="KAWIKA thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">KAWIKA</span>
                                    <span class="style-search-results__style-number">H257-16C</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;169" alt="VOYAGER thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">VOYAGER</span>
                                    <span class="style-search-results__style-number">H178-10</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$&amp;wid&#x3D;169" alt="LEIA thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">LEIA</span>
                                    <span class="style-search-results__style-number">RS708-26D</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="https://s7d2.scene7.com/is/image/mauijim/H711-18_front?$config1800$&amp;wid&#x3D;169" alt="KOHALA thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">KOHALA</span>
                                    <span class="style-search-results__style-number">H711-18</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="https://s7d2.scene7.com/is/image/mauijim/H706-16C_front?$config1800$&amp;wid&#x3D;169" alt="STILLWATER thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">STILLWATER</span>
                                    <span class="style-search-results__style-number">H706-16C</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="/assets/images/t-shirt.png" alt="BORN AND RAISED BAMBOO SHORT SLEEVE thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">BORN AND RAISED BAMBOO SHORT SLEEVE</span>
                                    <span class="style-search-results__style-number">H712-18</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="https://s7d2.scene7.com/is/image/mauijim/R420-04T_front?$config1800$&amp;wid&#x3D;169" alt="KEANAE thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">KEANAE</span>
                                    <span class="style-search-results__style-number">R420-04T</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <a class="style-search-results__result-link" href="#">
                            <div class="style-search-results__result">
                                <div class="style-search-results__image-wrapper">
                                    <img src="https://s7d2.scene7.com/is/image/mauijim/R740-02MB_front?$config1800$&amp;wid&#x3D;169" alt="TAIL SLIDE thumbnail" class="style-search-results__image">
                                </div>
                                <div class="style-search-results__details">
                                    <span class="style-search-results__name">TAIL SLIDE</span>
                                    <span class="style-search-results__style-number">R740-02MB</span>
                                </div>
                                <div class="style-search-results__result-actions">
                                    <button class="button button--primary">Select</button>
                                    <button class="button button--plain-text">
          <span class="u-visually-hidden">Select</span>
          <svg class="icon icon--check-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#check-circle"></use>
</svg>

        </button>
                                </div>
                            </div>
                        </a>
                        <div class="style-search-results__results-actions">
                            <button class="button button--outlined">Show All (13)</button>
                        </div>
                    </div>

                    <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-collected-components l-collected-components--repairs--step-2">
        Handle: <code>@repairs--step-2</code>
        <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$&amp;wid&#x3D;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.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.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.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">$50.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.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--centered">WILL EVALUATE</button>

                            </div>
                        </div>

                    </div>
                </div>
                <div class="repairs-form__actions js-repairs-form-actions">
                    <button class="button button--primary">Continue</button>

                </div>
                <span class="repairs-form__footer-text">* Inkl. MWST</span>
            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--repairs--step-2-error">
        Handle: <code>@repairs--step-2-error</code>
        <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$&amp;wid&#x3D;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>

                    <span class="error">Please select a package below to continue</span>

                    <div class="repairs-cards">
                        <div class="repairs-card repairs-card--nose-pads js-repairs-card-error">
                            <div class="repairs-card__heading">Need nose pads?</div>
                            <div class="repairs-card__image-wrapper">
                                <img src="/assets/images/repairs-nose-pads.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 js-repairs-card-error">
                            <div class="repairs-card__heading">Need temples?</div>
                            <div class="repairs-card__image-wrapper">
                                <img src="/assets/images/repairs-temples.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">
                                <button class="button button--primary">Add</button>

                            </div>
                        </div>

                        <div class="repairs-card repairs-card--frame js-repairs-card-error">
                            <div class="repairs-card__heading">Frame</div>
                            <div class="repairs-card__image-wrapper">
                                <img src="/assets/images/repairs-frame.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">$50.00 *</div>
                            <div class="repairs-card__actions">
                                <button class="button button--primary">Add</button>

                            </div>
                        </div>

                        <div class="repairs-card repairs-card--lens js-repairs-card-error">
                            <div class="repairs-card__heading">Lens</div>
                            <div class="repairs-card__image-wrapper">
                                <img src="/assets/images/repairs-lens.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__price">Free</div>
                            <div class="repairs-card__actions">
                                <button class="button button--primary">Add</button>

                            </div>
                        </div>

                    </div>
                </div>
                <div class="repairs-form__actions js-repairs-form-actions">
                    <button class="button button--primary">Continue</button>

                </div>
                <span class="repairs-form__footer-text">* Inkl. MWST</span>
            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--repairs--cart">
        Handle: <code>@repairs--cart</code>
        <form class="repairs-form repairs-form--cart">
            <div class="repairs-form__items">
                <div class="repairs-form__header">
                    <span class="repairs-form__header--items">Items</span>
                    <span class="repairs-form__header--price">Price</span>
                </div>

                <div class="repairs-form__item-group">
                    <div class="repairs-form__item-details">
                        <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>

                        <div class="repairs-form__item-info">
                            <div class="form-item form-item--select">
                                <div class="select-wrapper">
                                    <label for="repair-item-month" class="label">
    Purchase Month
    <select id="repair-item-month" name="repair-month" class="select js-select">
      <option value="" >Month</option>
      <option value="m01" >January</option>
      <option value="m02" >February</option>
      <option value="m03" >March</option>
      <option value="m04" >April</option>
      <option value="m05" >May</option>
      <option value="m06" >June</option>
      <option value="m07" >July</option>
      <option value="m08" >August</option>
      <option value="m09" >September</option>
      <option value="m10" >October</option>
      <option value="m11" >November</option>
      <option value="m12" >December</option>
    </select>
    </label>
                                </div>
                            </div>

                            <div class="form-item form-item--select">
                                <div class="select-wrapper">
                                    <label for="repair-item-year" class="label">
    Purchase Year
    <select id="repair-item-year" name="repair-year" class="select js-select">
      <option value="" >Year</option>
      <option value="y17" >2017</option>
      <option value="y16" >2016</option>
      <option value="y15" >2015</option>
      <option value="y14" >2014</option>
      <option value="y13" >2013</option>
    </select>
    </label>
                                </div>
                            </div>

                            <div class="form-item form-item--textarea">
                                <label for="repair-item-notes" class="label label--textarea">Repair notes</label>
                                <textarea id="repair-item-notes" class="textarea"></textarea>
                            </div>

                        </div>
                        <div class="repairs-form__repairs">
                            <div class="repairs-form__repair">
                                <span class="repairs-form__repair-type">Lens Replacement Package</span>
                                <ul class="list list--ul">
                                    <li class="list-item list-item--ul">
                                        Temple and Nose Pad Evaluation
                                    </li>
                                    <li class="list-item list-item--ul">
                                        Cleaning and Alignment as Needed
                                    </li>
                                </ul>

                                <div class="repairs-form__repair-price">$75.00</div>
                                <span class="repairs-form__repair-tax">Inkl. MWST</span>
                                <div class="repairs-form__repair-actions">
                                    <button class="button button--plain-text repairs-form__repair-delete-button">Remove</button>

                                </div>
                            </div>
                            <div class="repairs-form__repair">
                                <span class="repairs-form__repair-type">Frame Replacement Package</span>
                                <ul class="list list--ul">
                                    <li class="list-item list-item--ul">
                                        Temple and Nose Pad Evaluation
                                    </li>
                                    <li class="list-item list-item--ul">
                                        Cleaning and Alignment as Needed
                                    </li>
                                </ul>

                                <div class="repairs-form__repair-price">$50.00</div>
                                <div class="repairs-form__repair-actions">
                                    <button class="button button--plain-text repairs-form__repair-delete-button">Remove</button>

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

                <div class="repairs-form__item-group">
                    <div class="repairs-form__item-details">
                        <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://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;400" alt="WATERWAYS 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">WATERWAYS</span>
                                    <span class="style-search-results__style-number">HTS267-15C</span>
                                </div>
                            </div>

                        </div>

                        <div class="repairs-form__item-info">
                            <div class="form-item form-item--select">
                                <div class="select-wrapper">
                                    <label for="repair-item-month" class="label">
    Purchase Month
    <select id="repair-item-month" name="repair-month" class="select js-select">
      <option value="" >Month</option>
      <option value="m01" >January</option>
      <option value="m02" >February</option>
      <option value="m03" >March</option>
      <option value="m04" >April</option>
      <option value="m05" >May</option>
      <option value="m06" >June</option>
      <option value="m07" >July</option>
      <option value="m08" >August</option>
      <option value="m09" >September</option>
      <option value="m10" >October</option>
      <option value="m11" >November</option>
      <option value="m12" >December</option>
    </select>
    </label>
                                </div>
                            </div>

                            <div class="form-item form-item--select">
                                <div class="select-wrapper">
                                    <label for="repair-item-year" class="label">
    Purchase Year
    <select id="repair-item-year" name="repair-year" class="select js-select">
      <option value="" >Year</option>
      <option value="y17" >2017</option>
      <option value="y16" >2016</option>
      <option value="y15" >2015</option>
      <option value="y14" >2014</option>
      <option value="y13" >2013</option>
    </select>
    </label>
                                </div>
                            </div>

                            <div class="form-item form-item--textarea">
                                <label for="repair-item-notes" class="label label--textarea">Repair notes</label>
                                <textarea id="repair-item-notes" class="textarea"></textarea>
                            </div>

                        </div>
                        <div class="repairs-form__repairs">
                            <div class="repairs-form__repair">
                                <span class="repairs-form__repair-type">Lens Replacement Package</span>
                                <ul class="list list--ul">
                                    <li class="list-item list-item--ul">
                                        Temple and Nose Pad Evaluation
                                    </li>
                                    <li class="list-item list-item--ul">
                                        Cleaning and Alignment as Needed
                                    </li>
                                </ul>

                                <div class="repairs-form__repair-price">$75.00</div>
                                <div class="repairs-form__repair-actions">
                                    <button class="button button--plain-text repairs-form__repair-delete-button">Remove</button>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="repairs-form__standard">
                    <svg class="icon icon--tools" alt="">
  <use xlink:href="/assets/icons/icons.svg#tools"></use>
</svg>

                    <div class="block block--repairs-form">
                        <h4 class="block__heading">Standard Repair Process</h4>
                        <div class="block__contents">
                            <p class="paragraph">$10 fee includes nose pads and temple evaluation, cleaning and alignment as needed, and insurred shipping.</p>

                        </div>
                    </div>

                    <div class="repairs-form__standard-price-wrapper">
                        <span class="repairs-form__standard-price">$10.00</span>
                        <span class="repairs-form__standard-tax">Inkl. MWST</span>
                    </div>
                </div>
                <div class="repairs-form__summary">
                    <div class="repairs-form__summary-actions">
                        <button class="button button--outlined repairs-form__add-repair">Add Another Repair</button>

                    </div>
                    <ul class="repairs-form__line-items">
                        <li class="repairs-form__line-item">
                            <span class="repairs-form__subtotal-label">Order Subtotal (2):</span>
                            <span class="repairs-form__subtotal-value">$210.00</span>
                        </li>
                        <li class="repairs-form__line-item">
                            <span class="repairs-form__tax-label">Estimated Tax*:</span>
                            <span class="repairs-form__tax-value">-</span>
                        </li>
                        <li class="repairs-form__line-item">
                            <span class="repairs-form__shipping-label">Shipping*:</span>
                            <span class="repairs-form__shipping-value">-</span>
                        </li>
                        <li class="repairs-form__line-item">
                            <span class="repairs-form__tbd-label">* Calculated at Checkout</span>

                        </li>
                        <li class="repairs-form__line-item">
                            <span class="repairs-form__total-label">Total:</span>
                            <span class="repairs-form__total-value">$210.00</span>
                        </li>
                    </ul>
                    <p class="paragraph repairs-form__warning"><strong>Important:</strong> The estimated charge will appear on your card after we receive your glasses, we review any warranty coverage, and you approve the repair estimate.</p>

                </div>
                <div class="repairs-form__actions">
                    <button class="button button--primary repairs-form__checkout">Checkout</button>

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

    </div>
    <div class="l-collected-components l-collected-components--repairs-autocomplete">
        Handle: <code>@repairs-autocomplete</code>
        <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>

                    <label class="u-visually-hidden" for="search-standalone-form__input">Search</label>
                    <input id="search-standalone-form__input" class="search-standalone-form__input js-search-standalone-input" type="text">
                    <button class="search-standalone-form__button js-search-standalone-button" type="reset">
      <span class="u-visually-hidden">Submit style number or name</span>
      <svg class="icon icon--search" alt="">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

      <svg class="icon icon--close-large" alt="">
  <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>

    </div>
    <div class="l-collected-components l-collected-components--repairs-autocomplete-error">
        Handle: <code>@repairs-autocomplete-error</code>
        <div class="repairs-autocomplete-error">
            <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>

                    <label class="u-visually-hidden" for="search-standalone-form__input">Search</label>
                    <input id="search-standalone-form__input" class="search-standalone-form__input js-search-standalone-input" type="text" value="John Doe">
                    <button class="search-standalone-form__button js-search-standalone-button" type="reset">
      <span class="u-visually-hidden">Submit style number or name</span>
      <svg class="icon icon--search" alt="">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

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

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

            <span class="error">Sorry, the style number or name entered does not exist.</span>

        </div>

    </div>
    <div class="l-collected-components l-collected-components--returns-form">
        Handle: <code>@returns-form</code>
        <form class="returns-form">
            <h4 class="returns-form__title">Your Information</h4>
            <div class="returns-form__items">
                <div class="form-item form-item--text-tooltip form-item--returns-customer-number form-item--required">
                    <button class="form-item__tooltip js-tooltip-open-link" aria-describedby="tooltip-returns-customer-number" aria-label="Customer Number tooltip" type="button">
    <svg class="icon icon--question-mark-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

  </button>
                    <div id="tooltip-returns-customer-number" class="tooltip" role="tooltip">Pellentesque faucibus odio sed rutrum maximus. Duis mattis fermentum hendrerit. Nam magna dui, tempus id venenatis nec, pellentesque a orci.</div>
                    <label for="returns-customer-number" class="label label--text-tooltip label--required">
  Customer Number
  <input type="text-tooltip"  name="customer-number" class="input input--text-tooltip" >
  </label>
                </div>

                <div class="form-item form-item--text-tooltip form-item--returns-order-number form-item--required">
                    <button class="form-item__tooltip js-tooltip-open-link" aria-describedby="tooltip-returns-order-number" aria-label="Order Number tooltip" type="button">
    <svg class="icon icon--question-mark-circle" alt="">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

  </button>
                    <div id="tooltip-returns-order-number" class="tooltip" role="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus, ligula sit amet rhoncus aliquam, tellus ipsum euismod turpis, nec lobortis mi purus non mi.</div>
                    <label for="returns-order-number" class="label label--text-tooltip label--required">
  Order Number
  <input type="text-tooltip"  name="order-number" class="input input--text-tooltip" >
  </label>
                </div>

                <div class="form-item form-item--text form-item--returns-phone-number form-item--required">
                    <label for="returns-phone-number" class="label label--text label--required">
  Phone Number
  <input type="text"  name="phone-number" class="input input--text" placeholder="000-123-4567" >
  </label>
                </div>

                <div class="form-item form-item--text form-item--returns-first-name form-item--required">
                    <label for="returns-first-name" class="label label--text label--required">
  First Name
  <input type="text"  name="first-name" class="input input--text" >
  </label>
                </div>

                <div class="form-item form-item--text form-item--returns-last-name form-item--required">
                    <label for="returns-last-name" class="label label--text label--required">
  Last Name
  <input type="text"  name="last-name" class="input input--text" >
  </label>
                </div>

                <div class="form-item form-item--text form-item--returns-company-name">
                    <label for="returns-company-name" class="label label--text">
  Company Name or c/o
  <input type="text"  name="company-name" class="input input--text" placeholder="Optional" >
  </label>
                </div>

                <div class="form-item form-item--text form-item--returns-address-1 form-item--required">
                    <label for="returns-address-1" class="label label--text label--required">
  Address 1
  <input type="text"  name="address-1" class="input input--text" >
  </label>
                </div>

                <div class="form-item form-item--text form-item--returns-address-2">
                    <label for="returns-address-2" class="label label--text">
  Address 2
  <input type="text"  name="address-2" class="input input--text" placeholder="Optional" >
  </label>
                </div>

                <div class="form-item form-item--text form-item--returns-city form-item--required">
                    <label for="returns-city" class="label label--text label--required">
  City
  <input type="text"  name="city" class="input input--text" >
  </label>
                </div>

                <div class="form-item form-item--text form-item--returns-zip form-item--required">
                    <label for="returns-zip" class="label label--text label--required">
  Zip Code
  <input type="text"  name="zip" class="input input--text" >
  </label>
                </div>

                <div class="form-item form-item--select form-item--required">
                    <div class="select-wrapper">
                        <label for="returns-state" class="label label--required">
    State
    <select id="returns-state" name="state" class="select js-select">
      <option value="" >Select</option>
      <option value="AL" >Alabama</option>
      <option value="AK" >Alaska</option>
      <option value="AZ" >Arizona</option>
      <option value="AR" >Arkansas</option>
      <option value="CA" >California</option>
      <option value="CO" >Colorado</option>
      <option value="IL" >Illinois</option>
    </select>
    </label>
                    </div>
                </div>

                <div class="form-item form-item--select form-item--required">
                    <div class="select-wrapper">
                        <label for="returns-country" class="label label--required">
    Country
    <select id="returns-country" name="country" class="select js-select">
      <option value="USA" >United States</option>
    </select>
    </label>
                    </div>
                </div>

            </div>
            <div class="returns-form__actions">
                <button class="button button--primary returns-form__submit">Submit</button>

            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--search-standalone--default">
        Handle: <code>@search-standalone--default</code>
        <div class="search-standalone js-search-standalone u-page-width-max-gutters">
            <h3 class="search-standalone__title">Search</h3>
            <form class="search-standalone-form">

                <label class="u-visually-hidden" for="search-standalone-form__input">Search</label>
                <input id="search-standalone-form__input" class="search-standalone-form__input js-search-standalone-input" type="text" placeholder="Begin typing...">
                <button class="search-standalone-form__button js-search-standalone-button" type="reset">
      <span class="u-visually-hidden">Submit style number or name</span>
      <svg class="icon icon--search" alt="">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

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

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

    </div>
    <div class="l-collected-components l-collected-components--search-standalone--prepopulated">
        Handle: <code>@search-standalone--prepopulated</code>
        <div class="search-standalone js-search-standalone u-page-width-max-gutters">
            <h3 class="search-standalone__title">Search</h3>
            <form class="search-standalone-form">

                <label class="u-visually-hidden" for="search-standalone-form__input">Search</label>
                <input id="search-standalone-form__input" class="search-standalone-form__input js-search-standalone-input" type="text" placeholder="Begin typing..." value="Kawika">
                <button class="search-standalone-form__button js-search-standalone-button" type="reset">
      <span class="u-visually-hidden">Submit style number or name</span>
      <svg class="icon icon--search" alt="">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

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

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

    </div>
    <div class="l-collected-components l-collected-components--subscribe-form--default">
        Handle: <code>@subscribe-form--default</code>
        <div class="subscribe-form-wrapper subscribe-form-wrapper--default js-subscribe-form js-subscribe-form--default">
            <form class="subscribe-form">
                <label class="subscribe-form__label">
      <span class="u-visually-hidden">Subscribe</span>
      <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Your Email" autocomplete="email">
    </label>
                <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail" alt="">
  <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" alt="">
  <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 class="l-collected-components l-collected-components--subscribe-form--success">
        Handle: <code>@subscribe-form--success</code>
        <div class="subscribe-form-wrapper subscribe-form-wrapper--default js-subscribe-form js-subscribe-form--success">
            <form class="subscribe-form">
                <label class="subscribe-form__label">
      <span class="u-visually-hidden">Subscribe</span>
      <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Your Email" autocomplete="email">
    </label>
                <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail" alt="">
  <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">Thank you. Welcome to our &#x27;Ohana!</span>
                <span class="subscribe-form-status__close js-subscribe-status-close-button">
      <svg class="icon icon--close-large" alt="">
  <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 class="l-collected-components l-collected-components--subscribe-form--error">
        Handle: <code>@subscribe-form--error</code>
        <div class="subscribe-form-wrapper subscribe-form-wrapper--default js-subscribe-form js-subscribe-form--error">
            <form class="subscribe-form">
                <label class="subscribe-form__label">
      <span class="u-visually-hidden">Subscribe</span>
      <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Your Email" autocomplete="email">
    </label>
                <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail" alt="">
  <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">Please enter a valid email address.</span>
                <span class="subscribe-form-status__close js-subscribe-status-close-button">
      <svg class="icon icon--close-large" alt="">
  <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 class="l-collected-components l-collected-components--subscribe-form--mini">
        Handle: <code>@subscribe-form--mini</code>
        <div class="subscribe-form-wrapper subscribe-form-wrapper--mini js-subscribe-form js-subscribe-form--default">
            <form class="subscribe-form">
                <label class="subscribe-form__label">
      <span class="u-visually-hidden">Subscribe</span>
      <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Subscribe to Our &#x27;Ohana" autocomplete="email">
    </label>
                <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail" alt="">
  <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" alt="">
  <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 class="l-collected-components l-collected-components--your-account--your-account">
        Handle: <code>@your-account--your-account</code>

        <form class="your-account">
            <div class="your-account__form-items">
                <h4 class="your-account__form-item-group-title">Your Account</h4>
                <div class="your-account__form-item-group">
                    <div class="form-item form-item--fake js-modal-form-item">
                        <label for="account-fullname" class="label">Full Name</label>
                        <span class="input input--fake-editable">
    <span data-value-id="fullname-first-name">John</span>
                        <span data-value-id="fullname-last-name">Doe</span>

                        <button class="button button--plain-text js-modal-open-link js-modal-form-item-edit-button" data-modal-id="fullname-edit" formnovalidate>Edit</button>

                        </span>
                    </div>

                    <div class="form-item form-item--fake">
                        <label for="account-email-address" class="label">Email Address</label>
                        <span class="input input--fake">
    johndoe@email.component
  </span>
                    </div>

                    <div class="form-item form-item--fake js-modal-form-item">
                        <label for="account-password" class="label">Password</label>
                        <span class="input input--fake-editable">
    &bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;
    <button class="button button--plain-text js-modal-open-link js-modal-form-item-edit-button" data-modal-id="password-edit" formnovalidate>Edit</button>

  </span>
                    </div>

                    <div class="form-item form-item--checkbox">
                        <input type="checkbox" id="receive-updates" name="receive-updates" class="checkbox checkbox--default" checked="true">
                        <label for="receive-updates">
    
    I want to receive email updates and information.
    
  </label>
                    </div>

                </div>
                <h4 class="your-account__form-item-group-title">Shipping Addresses</h4>
                <div class="your-account__form-item-group your-account__form-item-group--shipping-addresses">
                    <div class="shipping-address js-modal-form-item">
                        <input type="radio" id="checkout-shipping-address-1" name="checkout-shipping-address" class="radio radio--default" checked="true">
                        <label class="shipping-address__details" for="checkout-shipping-address-1">
    <p class="shipping-address__name">
      <span class="js-shipping-address-value" data-value-id="shipping-address-first-name">John</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-last-name">Doe</span>
    </p>
    <p class="shipping-address__address">
      <span class="js-shipping-address-value" data-value-id="shipping-address-address-1">112 W Monroe St</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-city">Chicago</span>,
      <span class="js-shipping-address-value" data-value-id="shipping-address-state">IL</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-zip">60603</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-country" data-value-value="USA">United States</span>
    </p>
    <p class="shipping-address__phone">
      <span class="js-shipping-address-value" data-value-id="shipping-address-phone-number">888-888-1234</span>
    </p>
  </label>
                        <div class="shipping-address__actions">
                            <button class="button button--plain-text js-modal-open-link shipping-address__edit js-modal-form-item-edit-button" data-modal-id="shipping-address-edit" formnovalidate>Edit</button>
                            <button class="button button--plain-text shipping-address__delete">Delete</button>
                        </div>
                        <span class="shipping-address__accent"></span>
                    </div>

                    <div class="shipping-address js-modal-form-item">
                        <input type="radio" id="checkout-shipping-address-2" name="checkout-shipping-address" class="radio radio--default">
                        <label class="shipping-address__details" for="checkout-shipping-address-2">
    <p class="shipping-address__name">
      <span class="js-shipping-address-value" data-value-id="shipping-address-first-name">John</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-last-name">Smith</span>
    </p>
    <p class="shipping-address__address">
      <span class="js-shipping-address-value" data-value-id="shipping-address-address-1">One Aloha Lane</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-city">Peoria</span>,
      <span class="js-shipping-address-value" data-value-id="shipping-address-state">IL</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-zip">61615</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-country" data-value-value="USA">United States</span>
    </p>
    <p class="shipping-address__phone">
      <span class="js-shipping-address-value" data-value-id="shipping-address-phone-number">888-888-4321</span>
    </p>
  </label>
                        <div class="shipping-address__actions">
                            <button class="button button--plain-text js-modal-open-link shipping-address__edit js-modal-form-item-edit-button" data-modal-id="shipping-address-edit" formnovalidate>Edit</button>
                            <button class="button button--plain-text shipping-address__delete">Delete</button>
                        </div>
                        <span class="shipping-address__accent"></span>
                    </div>

                    <button class="shipping-address shipping-address--button js-modal-open-link" data-modal-id="shipping-address-add" formnovalidate>
  <svg class="icon icon--new-address" alt="">
  <use xlink:href="/assets/icons/icons.svg#new-address"></use>
</svg>

  <p class="shipping-address__button-label">Add New Shipping Address</p>
  <span class="shipping-address__accent"></span>
</button>

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

    </div>
    <div class="l-collected-components l-collected-components--your-account--new-account">
        Handle: <code>@your-account--new-account</code>

        <form class="your-account">
            <div class="your-account__form-items">
                <h4 class="your-account__form-item-group-title">Your Account</h4>
                <div class="your-account__form-item-group">
                    <div class="form-item form-item--fake js-modal-form-item">
                        <label for="account-fullname" class="label">Full Name</label>
                        <span class="input input--fake-editable">
    <span data-value-id="fullname-first-name">John</span>
                        <span data-value-id="fullname-last-name">Doe</span>

                        <button class="button button--plain-text js-modal-open-link js-modal-form-item-edit-button" data-modal-id="fullname-edit" formnovalidate>Edit</button>

                        </span>
                    </div>

                    <div class="form-item form-item--fake">
                        <label for="account-email-address" class="label">Email Address</label>
                        <span class="input input--fake">
    johndoe@email.component
  </span>
                    </div>

                    <div class="form-item form-item--fake js-modal-form-item">
                        <label for="account-password" class="label">Password</label>
                        <span class="input input--fake-editable">
    &bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;
    <button class="button button--plain-text js-modal-open-link js-modal-form-item-edit-button" data-modal-id="password-edit" formnovalidate>Edit</button>

  </span>
                    </div>

                    <div class="form-item form-item--checkbox">
                        <input type="checkbox" id="receive-updates" name="receive-updates" class="checkbox checkbox--default" checked="true">
                        <label for="receive-updates">
    
    I want to receive email updates and information.
    
  </label>
                    </div>

                </div>
                <h4 class="your-account__form-item-group-title">Shipping Addresses</h4>
                <div class="your-account__form-item-group">
                    <button class="shipping-address shipping-address--button js-modal-open-link" data-modal-id="shipping-address-add" formnovalidate>
  <svg class="icon icon--new-address" alt="">
  <use xlink:href="/assets/icons/icons.svg#new-address"></use>
</svg>

  <p class="shipping-address__button-label">Add New Shipping Address</p>
  <span class="shipping-address__accent"></span>
</button>

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

    </div>
    <div class="l-collected-components l-collected-components--your-account--messages">
        Handle: <code>@your-account--messages</code>
        <ul class="message__list">
            <li class="message__list-item"><span class="error">The form could not be submitted. Please try again.</span>
            </li>
            <li class="message__list-item"><span class="success">Shipping address updated successfully</span>
            </li>
        </ul>

        <form class="your-account">
            <div class="your-account__form-items">
                <h4 class="your-account__form-item-group-title">Your Account</h4>
                <div class="your-account__form-item-group">
                    <div class="form-item form-item--fake js-modal-form-item">
                        <label for="account-fullname" class="label">Full Name</label>
                        <span class="input input--fake-editable">
    <span data-value-id="fullname-first-name">John</span>
                        <span data-value-id="fullname-last-name">Doe</span>

                        <button class="button button--plain-text js-modal-open-link js-modal-form-item-edit-button" data-modal-id="fullname-edit" formnovalidate>Edit</button>

                        </span>
                    </div>

                    <div class="form-item form-item--fake">
                        <label for="account-email-address" class="label">Email Address</label>
                        <span class="input input--fake">
    johndoe@email.component
  </span>
                    </div>

                    <div class="form-item form-item--fake js-modal-form-item">
                        <label for="account-password" class="label">Password</label>
                        <span class="input input--fake-editable">
    &bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;
    <button class="button button--plain-text js-modal-open-link js-modal-form-item-edit-button" data-modal-id="password-edit" formnovalidate>Edit</button>

  </span>
                    </div>

                    <div class="form-item form-item--checkbox">
                        <input type="checkbox" id="receive-updates" name="receive-updates" class="checkbox checkbox--default" checked="true">
                        <label for="receive-updates">
    
    I want to receive email updates and information.
    
  </label>
                    </div>

                </div>
                <h4 class="your-account__form-item-group-title">Shipping Addresses</h4>
                <div class="your-account__form-item-group your-account__form-item-group--shipping-addresses">
                    <div class="shipping-address js-modal-form-item">
                        <input type="radio" id="checkout-shipping-address-1" name="checkout-shipping-address" class="radio radio--default" checked="true">
                        <label class="shipping-address__details" for="checkout-shipping-address-1">
    <p class="shipping-address__name">
      <span class="js-shipping-address-value" data-value-id="shipping-address-first-name">John</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-last-name">Doe</span>
    </p>
    <p class="shipping-address__address">
      <span class="js-shipping-address-value" data-value-id="shipping-address-address-1">112 W Monroe St</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-city">Chicago</span>,
      <span class="js-shipping-address-value" data-value-id="shipping-address-state">IL</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-zip">60603</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-country" data-value-value="USA">United States</span>
    </p>
    <p class="shipping-address__phone">
      <span class="js-shipping-address-value" data-value-id="shipping-address-phone-number">888-888-1234</span>
    </p>
  </label>
                        <div class="shipping-address__actions">
                            <button class="button button--plain-text js-modal-open-link shipping-address__edit js-modal-form-item-edit-button" data-modal-id="shipping-address-edit" formnovalidate>Edit</button>
                            <button class="button button--plain-text shipping-address__delete">Delete</button>
                        </div>
                        <span class="shipping-address__accent"></span>
                    </div>

                    <div class="shipping-address js-modal-form-item">
                        <input type="radio" id="checkout-shipping-address-2" name="checkout-shipping-address" class="radio radio--default">
                        <label class="shipping-address__details" for="checkout-shipping-address-2">
    <p class="shipping-address__name">
      <span class="js-shipping-address-value" data-value-id="shipping-address-first-name">John</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-last-name">Smith</span>
    </p>
    <p class="shipping-address__address">
      <span class="js-shipping-address-value" data-value-id="shipping-address-address-1">One Aloha Lane</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-city">Peoria</span>,
      <span class="js-shipping-address-value" data-value-id="shipping-address-state">IL</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-zip">61615</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-country" data-value-value="USA">United States</span>
    </p>
    <p class="shipping-address__phone">
      <span class="js-shipping-address-value" data-value-id="shipping-address-phone-number">888-888-4321</span>
    </p>
  </label>
                        <div class="shipping-address__actions">
                            <button class="button button--plain-text js-modal-open-link shipping-address__edit js-modal-form-item-edit-button" data-modal-id="shipping-address-edit" formnovalidate>Edit</button>
                            <button class="button button--plain-text shipping-address__delete">Delete</button>
                        </div>
                        <span class="shipping-address__accent"></span>
                    </div>

                    <button class="shipping-address shipping-address--button js-modal-open-link" data-modal-id="shipping-address-add" formnovalidate>
  <svg class="icon icon--new-address" alt="">
  <use xlink:href="/assets/icons/icons.svg#new-address"></use>
</svg>

  <p class="shipping-address__button-label">Add New Shipping Address</p>
  <span class="shipping-address__accent"></span>
</button>

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

    </div>
</main>
{{#if header}}
{{render (dynamicComponent header)}}
{{/if}}
<main id="main-section" class="main main--collected-components">
  {{#each components}}
  <div class="l-collected-components l-collected-components--{{component}}{{#each modifiers}} l-collected-components--{{this}}{{/each}}">
    Handle: <code>@{{component}}</code>
    {{render (dynamicComponent component) context merge=true}}
  </div>
  {{/each}}
</main>
{{#if footer}}
{{render '@subscribe'}}
{{render (dynamicComponent footer)}}
{{/if}}
{
  "snapshot": true,
  "components": [
    {
      "component": "paragraph",
      "context": {
        "value": "This page collects form components for snapshot testing.",
        "classes": [
          "u-text-center"
        ]
      }
    },
    {
      "component": "registration--registration-anonymous"
    },
    {
      "component": "registration--registration-auth"
    },
    {
      "component": "registration--registration-non-us"
    },
    {
      "component": "checkout-form--addresses-edit-auth"
    },
    {
      "component": "checkout-form--addresses-edit-guest"
    },
    {
      "component": "checkout-form--addresses-review"
    },
    {
      "component": "checkout-form--shipping-and-payment"
    },
    {
      "component": "checkout-form--shipping-and-payment-repairs"
    },
    {
      "component": "checkout-form--shipping-and-payment-submit"
    },
    {
      "component": "checkout-form--shipping-and-payment-submit-repairs"
    },
    {
      "component": "confirmation-account-create--password-request"
    },
    {
      "component": "confirmation-account-create--password-submitted"
    },
    {
      "component": "contact-us"
    },
    {
      "component": "gift-card-form--buy"
    },
    {
      "component": "gift-card-form--redeem"
    },
    {
      "component": "login-form--login"
    },
    {
      "component": "login-form--create-account"
    },
    {
      "component": "login-form--reset-password"
    },
    {
      "component": "login-form--reset-password-feedback"
    },
    {
      "component": "login-form--create-password"
    },
    {
      "component": "login-form--create-password-feedback"
    },
    {
      "component": "login-form--guest-checkout"
    },
    {
      "component": "modal-form--login"
    },
    {
      "component": "modal-form--reset-password"
    },
    {
      "component": "modal-form--reset-password-feedback"
    },
    {
      "component": "modal-form--repair-options"
    },
    {
      "component": "modal-form--style-number-help"
    },
    {
      "component": "modal-form--data-protection"
    },
    {
      "component": "modal-form--shipping-address-add"
    },
    {
      "component": "modal-form--fullname-edit"
    },
    {
      "component": "modal-form--password-edit"
    },
    {
      "component": "modal-form--reserve-in-store"
    },
    {
      "component": "modal-form--product-variant-selector"
    },
    {
      "component": "repairs--welcome"
    },
    {
      "component": "repairs--step-1"
    },
    {
      "component": "repairs--step-1-edit"
    },
    {
      "component": "repairs--step-1-results"
    },
    {
      "component": "repairs--step-2"
    },
    {
      "component": "repairs--step-2-error"
    },
    {
      "component": "repairs--cart"
    },
    {
      "component": "repairs-autocomplete"
    },
    {
      "component": "repairs-autocomplete-error"
    },
    {
      "component": "returns-form"
    },
    {
      "component": "search-standalone--default"
    },
    {
      "component": "search-standalone--prepopulated"
    },
    {
      "component": "subscribe-form--default"
    },
    {
      "component": "subscribe-form--success"
    },
    {
      "component": "subscribe-form--error"
    },
    {
      "component": "subscribe-form--mini"
    },
    {
      "component": "your-account--your-account"
    },
    {
      "component": "your-account--new-account"
    },
    {
      "component": "your-account--messages"
    }
  ]
}
  • Content:
    .l-collected-components {
      position: relative;
      margin: 2rem 0;
      padding: 2rem 0;
    
      & + &::before {
        position: absolute;
        top: 0;
        left: 50%;
        width: 100vw;
        height: .1rem;
        margin-left: -50vw;
        background-color: $color-light;
        content: '';
      }
    
      &--narrow {
        max-width: 50rem;
        margin-right: auto;
        margin-left: auto;
      }
    }
    
  • URL: /components/raw/collected-components/collected-components.scss
  • Filesystem Path: src/components/03-pages/collected-components/collected-components.scss
  • Size: 363 Bytes

There are no notes for this item.