<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 product components for snapshot testing.</p>

    </div>
    <div class="l-collected-components l-collected-components--about-product--image">
        Handle: <code>@about-product--image</code>
        <div class="about-product">
            <div class="about-product__copy">
                <h3 class="about-product__label">About Eclipse</h3>
                <div class="about-product__description">
                    ECLIPSE is back for a new winter of fun with updated styling to a timeless favorite. We’ve enhanced this classic frame to perform better than ever. The completely redesigned interior foam allows for better breathability, while an updated frame pattern
                    carries ECLIPSE into a new year of skiing, snowboarding, snowmobiling and all around mountain fun.
                </div>
                <ul class="about-product__features">
                    <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="Photochromic Lens Option" data-modal-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus tortor non lobortis lobortis. Nulla sollicitudin lectus sit amet purus blandit, eget porta tortor porta.">Photochromic Lens Option</li>
                    <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="Polarized Lens Option" data-modal-description="Vivamus in accumsan neque, at fringilla quam. Nam sit amet feugiat massa. Quisque consequat laoreet magna, eget tincidunt est condimentum eu.">Polarized Lens Option</li>
                    <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="100% UV Protection" data-modal-description="Sed efficitur odio in mauris molestie pulvinar. Proin ultricies nisi nibh. Duis pharetra nunc eu facilisis luctus. Aenean vitae magna commodo, consequat libero ut, pharetra diam.">100% UV Protection</li>
                    <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="Everclear Anti-Fog" data-modal-description="Mauris convallis, elit vel accumsan dictum, diam arcu condimentum justo, a scelerisque enim ipsum vitae dolor. Proin et purus id nisl euismod viverra vel sed quam.">Everclear Anti-Fog</li>
                    <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="Permashield Hardcoat" data-modal-description="Vivamus sagittis ultrices mauris ac vulputate. Fusce vehicula congue leo, eu sodales lectus consectetur eget. Pellentesque eget diam ultricies, semper dolor sed, dignissim justo. Nulla vel lacus est. Nulla nec lacus interdum, pharetra massa at, rhoncus metus. Cras condimentum ut sapien non congue.">Permashield Hardcoat</li>
                    <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="Dual Lens Construction" data-modal-description="Nullam hendrerit auctor libero, id scelerisque nibh sodales id. Vivamus ut pellentesque velit, sit amet dignissim purus. Nulla et lacus neque. Proin ac vestibulum libero.">Dual Lens Construction</li>
                    <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="Dual Strap Adjustment" data-modal-description="Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin convallis vestibulum dui, vitae auctor enim aliquam vel. Maecenas id bibendum risus.">Dual Strap Adjustment</li>
                    <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="No Slip Grip" data-modal-description="Nunc lacinia luctus leo eu lobortis. Integer commodo metus ac maximus rutrum. Curabitur dui tellus, auctor ut eleifend semper, accumsan eget leo. Praesent velit urna, iaculis non convallis sed, semper nec erat.">No Slip Grip</li>
                    <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="Helmet Compatible" data-modal-description="Nullam sed est tempus, eleifend purus sit amet, vehicula tortor. Maecenas porttitor erat sed nisl cursus vestibulum. Ut nec urna sapien.">Helmet Compatible</li>
                    <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="Impact Resistant Frame" data-modal-description="Integer vehicula augue nibh. Aenean blandit vehicula risus sit amet ultrices. Maecenas quis nibh non augue bibendum mattis vel at mauris. Praesent accumsan mi lacus, sed consequat lorem imperdiet sit amet.">Impact Resistant Frame</li>
                    <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="High Density Lens Technology" data-modal-description="Maecenas in mollis ipsum. Vivamus quis volutpat leo. Sed vel fringilla lacus. Suspendisse maximus dui eget metus vehicula elementum. Aliquam condimentum, mauris sed convallis interdum, urna purus suscipit dui, vitae hendrerit nulla nisl sed dolor.">High Density Lens Technology</li>
                </ul>
            </div>
            <div class="about-product__media">
                <p class="about-product__media-title">One Lens, Every Condition</p>
                <div class="about-product__image-wrapper">
                    <img class="about-product__image" src="/assets/images/zeal-about-product-eclipse.jpg" alt="Eclipse">
                </div>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--customize--mymaui l-collected-components--narrow">
        Handle: <code>@customize--mymaui</code>
        <div class="js-customize customize--mymaui mymaui-customize js-mymaui-customize">
            <div class="mymaui-customize__options">
                <div class="mymaui-customize__option mymaui-customize__option--square js-mymaui-customize-option">
                    <div class="mymaui-customize__option-label">
                        Frame Color: <span class="mymaui-customize__option-value js-mymaui-customize-option-value">Black</span>
                        <button class="mymaui-customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                        <div class="tooltip">Morbi semper sed elit eu tempus.</div>
                    </div>
                    <ul class="mymaui-customize__items">
                        <li class="mymaui-customize__item">
                            <input type="radio" id="fc-black" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="frame-color" data-id="fc-black" data-value="Black" data-frame-color="Black" checked="true">
                            <label class="mymaui-customize__item-label" for="fc-black">
            <span class="mymaui-customize__item-alternate-fill" style="background: #303032;"></span>
            <span class="u-visually-hidden">Black</span>
          </label>
                        </li>
                        <li class="mymaui-customize__item">
                            <input type="radio" id="fc-brown" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="frame-color" data-id="fc-brown" data-value="Brown" data-frame-color="Brown">
                            <label class="mymaui-customize__item-label" for="fc-brown">
            <span class="mymaui-customize__item-alternate-fill" style="background: #543a10;"></span>
            <span class="u-visually-hidden">Brown</span>
          </label>
                        </li>
                        <li class="mymaui-customize__item">
                            <input type="radio" id="fc-green" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="frame-color" data-id="fc-green" data-value="Green" data-frame-color="Green">
                            <label class="mymaui-customize__item-label" for="fc-green">
            <span class="mymaui-customize__item-alternate-fill" style="background: #66da4a;"></span>
            <span class="u-visually-hidden">Green</span>
          </label>
                        </li>
                        <li class="mymaui-customize__item">
                            <input type="radio" id="fc-purple" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="frame-color" data-id="fc-purple" data-value="Purple" data-frame-color="Purple">
                            <label class="mymaui-customize__item-label" for="fc-purple">
            <span class="mymaui-customize__item-alternate-fill" style="background: #8c46d2;"></span>
            <span class="u-visually-hidden">Purple</span>
          </label>
                        </li>
                        <li class="mymaui-customize__item">
                            <input type="radio" id="fc-blue" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="frame-color" data-id="fc-blue" data-value="Blue" data-frame-color="Blue">
                            <label class="mymaui-customize__item-label" for="fc-blue">
            <span class="mymaui-customize__item-alternate-fill" style="background: #5353df;"></span>
            <span class="u-visually-hidden">Blue</span>
          </label>
                        </li>
                    </ul>
                </div>
                <div class="mymaui-customize__option mymaui-customize__option--round js-mymaui-customize-option">
                    <div class="mymaui-customize__option-label">
                        Lens Color: <span class="mymaui-customize__option-value js-mymaui-customize-option-value">Neutral Grey</span>
                        <button class="mymaui-customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                        <div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                    </div>
                    <ul class="mymaui-customize__items">
                        <li class="mymaui-customize__item js-customize-disabled">
                            <input type="radio" id="lc-bluehawaii" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="lens-color" data-id="lc-bluehawaii" data-value="Blue Hawaii" data-lens-color="Blue Hawaii">
                            <label class="mymaui-customize__item-label" for="lc-bluehawaii">
            <span class="mymaui-customize__item-alternate-fill" style="background: #297fbc;"></span>
            <span class="u-visually-hidden">Blue Hawaii</span>
          </label>
                        </li>
                        <li class="mymaui-customize__item">
                            <input type="radio" id="lc-neutralgrey" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="lens-color" data-id="lc-neutralgrey" data-value="Neutral Grey" data-lens-color="Neutral Grey" checked="true">
                            <label class="mymaui-customize__item-label" for="lc-neutralgrey">
            <span class="mymaui-customize__item-alternate-fill" style="background: #535B54;"></span>
            <span class="u-visually-hidden">Neutral Grey</span>
          </label>
                        </li>
                        <li class="mymaui-customize__item">
                            <input type="radio" id="lc-hclbronze" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="lens-color" data-id="lc-hclbronze" data-value="HCL® Bronze" data-lens-color="HCL® Bronze">
                            <label class="mymaui-customize__item-label" for="lc-hclbronze">
            <span class="mymaui-customize__item-alternate-fill" style="background: #987858;"></span>
            <span class="u-visually-hidden">HCL® Bronze</span>
          </label>
                        </li>
                        <li class="mymaui-customize__item">
                            <input type="radio" id="lc-mauiht" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="lens-color" data-id="lc-mauiht" data-value="Maui HT™" data-lens-color="Maui HT™">
                            <label class="mymaui-customize__item-label" for="lc-mauiht">
            <span class="mymaui-customize__item-alternate-fill" style="background: #798b57;"></span>
            <span class="u-visually-hidden">Maui HT™</span>
          </label>
                        </li>
                        <li class="mymaui-customize__item">
                            <input type="radio" id="lc-mauirose" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="lens-color" data-id="lc-mauirose" data-value="Maui Rose®" data-lens-color="Maui Rose®">
                            <label class="mymaui-customize__item-label" for="lc-mauirose">
            <span class="mymaui-customize__item-alternate-fill" style="background: #9c5950;"></span>
            <span class="u-visually-hidden">Maui Rose®</span>
          </label>
                        </li>
                    </ul>
                </div>
                <div class="mymaui-customize__option mymaui-customize__option--square mymaui-customize__option--label js-mymaui-customize-option">
                    <div class="mymaui-customize__option-label">
                        Gradient
                        <button class="mymaui-customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                        <div class="tooltip">In vitae congue leo. Morbi orci arcu, condimentum sit amet semper sed.</div>
                    </div>
                    <ul class="mymaui-customize__items">
                        <li class="mymaui-customize__item">
                            <input type="radio" id="gr-single" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="gradient" data-id="gr-single" data-value="Single" data-gradient="Single">
                            <label class="mymaui-customize__item-label" for="gr-single">
            <span class="mymaui-customize__item-alternate-fill" style="background: linear-gradient(-180deg, #FFFFFF 0%, #999999 100%);"></span>
            Single
          </label>
                        </li>
                        <li class="mymaui-customize__item">
                            <input type="radio" id="gr-bi" class="radio radio--alternate mymaui-customize__item-input js-mymaui-customize-item-input" name="gradient" data-id="gr-bi" data-value="Bi-Gradient" data-gradient="Bi-Gradient" checked="true">
                            <label class="mymaui-customize__item-label" for="gr-bi">
            <span class="mymaui-customize__item-alternate-fill" style="background: linear-gradient(-180deg, #FFFFFF 0%, #999999 50%, #FFFFFF 100%);"></span>
            Bi-Gradient
          </label>
                        </li>
                    </ul>
                </div>
                <div class="mymaui-customize__option mymaui-customize__option--select js-mymaui-customize-option">
                    <div class="mymaui-customize__option-label">
                        Readers
                        <button class="mymaui-customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                        <div class="tooltip">Integer congue sit amet turpis sagittis dictum. Sed et congue nisi. Quisque vehicula finibus sapien a faucibus. Nunc rhoncus urna nisi, at molestie dolor vehicula ac.</div>
                    </div>
                    <ul class="mymaui-customize__items">
                        <li class="mymaui-customize__item">
                            <div class="form-item form-item--select">
                                <div class="select-wrapper">
                                    <label for="readers" class="label">
              
              <select id="readers" name="readers" class="select js-select">
                <option value="none" >No readers</option>
              </select>
              </label>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--customize--rimless-shapes l-collected-components--narrow">
        Handle: <code>@customize--rimless-shapes</code>
        <div class="customize js-customize customize--rimless customize--rimless-shapes">
            <div class="customize__options">
                <div class="customize__option js-customize-option">
                    <div class="customize__option-label">
                        Rectangle
                        <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                        <div class="tooltip">Pellentesque viverra in nibh ut consectetur.</div>
                    </div>
                    <ul class="customize__items">
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2001" value="mjo2001" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2001-140" data-frame-style="mjo2001-140" data-frame="Matte Black - mockdata2001" data-lens="Clear  - mockdata2001" data-material="MauiPure - The lightest weight choice for long days in the sun.  - mockdata2001">
                                <label for="mjo2001">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2001.svg">
    <span class="radio__label-text u-visually-hidden">
      MJO2001
    </span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2007" value="mjo2007" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2007-140" data-frame-style="mjo2007-140" data-frame="Matte Black - mockdata2007" data-lens="Clear - mockdata2007" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2007">
                                <label for="mjo2007">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2007.svg">
    <span class="radio__label-text u-visually-hidden">
      MJO2007
    </span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2008" value="mjo2008" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2008-140" data-frame-style="mjo2008-140" data-frame="Matte Black - mockdata2008" data-lens="Clear - mockdata2008" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2008">
                                <label for="mjo2008">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2008.svg">
    <span class="radio__label-text u-visually-hidden">
      MJO2008
    </span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2009" value="mjo2009" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2009-140" data-frame-style="mjo2009-140" data-frame="Matte Black - mockdata2009" data-lens="Clear - mockdata2009" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2009">
                                <label for="mjo2009">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2009.svg">
    <span class="radio__label-text u-visually-hidden">
      MJO2009
    </span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2010" value="mjo2010" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2010-140" data-frame-style="mjo2010-140" data-frame="Matte Black - mockdata2010" data-lens="Clear - mockdata2010" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2010"
                                    checked="true">
                                <label for="mjo2010">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2010.svg">
    <span class="radio__label-text u-visually-hidden">
      MJO2010
    </span>
  </label>
                            </div>

                        </li>
                    </ul>
                </div>
                <div class="customize__option js-customize-option">
                    <div class="customize__option-label">
                        Oval
                        <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                        <div class="tooltip">Morbi semper sed elit eu tempus.</div>
                    </div>
                    <ul class="customize__items">
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2002" value="mjo2002" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2002-140" data-frame-style="mjo2002-140" data-frame="Matte Black - mockdata2002" data-lens="Clear - mockdata2002" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2002">
                                <label for="mjo2002">
    <img class="radio__image" src="/assets/images/silhouettes/oval/mjo2002.svg">
    <span class="radio__label-text u-visually-hidden">
      MJO2002
    </span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2003" value="mjo2003" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2003-140" data-frame-style="mjo2003-140" data-frame="Matte Black - mockdata2003" data-lens="Clear - mockdata2003" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2003">
                                <label for="mjo2003">
    <img class="radio__image" src="/assets/images/silhouettes/oval/mjo2003.svg">
    <span class="radio__label-text u-visually-hidden">
      MJO2003
    </span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2004" value="mjo2004" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2004-140" data-frame-style="mjo2004-140" data-frame="Matte Black - mockdata2004" data-lens="Clear - mockdata2004" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2004">
                                <label for="mjo2004">
    <img class="radio__image" src="/assets/images/silhouettes/oval/mjo2004.svg">
    <span class="radio__label-text u-visually-hidden">
      MJO2004
    </span>
  </label>
                            </div>

                        </li>
                    </ul>
                </div>
                <div class="customize__option js-customize-option">
                    <div class="customize__option-label">
                        Round
                        <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                        <div class="tooltip">Maecenas blandit ex nec nunc condimentum facilisis.</div>
                    </div>
                    <ul class="customize__items">
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2005" value="mjo2005" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2005-140" data-frame-style="mjo2005-140" data-frame="Matte Black - mockdata2005" data-lens="Clear - mockdata2005" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2005">
                                <label for="mjo2005">
    <img class="radio__image" src="/assets/images/silhouettes/round/mjo2005.svg">
    <span class="radio__label-text u-visually-hidden">
      MJO2005
    </span>
  </label>
                            </div>

                        </li>
                    </ul>
                </div>
                <div class="customize__option js-customize-option">
                    <div class="customize__option-label">
                        Square
                        <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                        <div class="tooltip">Quisque pellentesque malesuada eros.</div>
                    </div>
                    <ul class="customize__items">
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2006" value="mjo2006" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2006-140" data-frame-style="mjo2006-140" data-frame="Matte Black - mockdata2006" data-lens="Clear - mockdata2006" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2006">
                                <label for="mjo2006">
    <img class="radio__image" src="/assets/images/silhouettes/square/mjo2006.svg">
    <span class="radio__label-text u-visually-hidden">
      MJO2006
    </span>
  </label>
                            </div>

                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--customize--core-clip-on l-collected-components--narrow">
        Handle: <code>@customize--core-clip-on</code>
        <div class="customize js-customize customize--core-clip-on customize--core-clip-on">
            <div class="customize__options">
                <div class="customize__option customize__option--square js-customize-option">
                    <div class="customize__option-label">
                        Frame Color: <span class="customize__option-value js-customize-option-value">Light Brown</span>
                        <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                        <div class="tooltip">Morbi semper sed elit eu tempus.</div>
                    </div>
                    <ul class="customize__items">
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="fc-light-brown" value="10" name="frame-color" class="radio radio--alternate customize__item-input js-customize-item-input" data-value="MJO2204 (Light Brown)" data-frame-style="mjo2204-79ar" data-frame-color="79ar" checked="true">
                                <label for="fc-light-brown" class=" customize__item-label">
    <span class="radio__alternate-fill" style="background: #b38353;"></span>
    
    <span class="radio__label-text u-visually-hidden">
      Light Brown
    </span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="fc-black" value="20" name="frame-color" class="radio radio--alternate customize__item-input js-customize-item-input" data-value="MJO2204 (Black)" data-frame-style="mjo2204-80ar" data-frame-color="80ar">
                                <label for="fc-black" class=" customize__item-label">
    <span class="radio__alternate-fill" style="background: #303032;"></span>
    
    <span class="radio__label-text u-visually-hidden">
      false
    </span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="fc-dark-brown" value="30" name="frame-color" class="radio radio--alternate customize__item-input js-customize-item-input" data-value="MJO2204 (Dark Brown)" data-frame-style="mjo2204-81ar" data-frame-color="81ar">
                                <label for="fc-dark-brown" class=" customize__item-label">
    <span class="radio__alternate-fill" style="background: #4A2C21;"></span>
    
    <span class="radio__label-text u-visually-hidden">
      Dark Brown
    </span>
  </label>
                            </div>

                        </li>
                    </ul>
                </div>
                <div class="customize__option customize__option--switch js-customize-option">
                    <div class="customize__option-label">
                        Clip-On
                    </div>
                    <ul class="customize__items">
                        <li class="customize__item">
                            <div class="form-item form-item--checkbox">
                                <input type="checkbox" id="clip-on" name="clip-on" class="checkbox checkbox--switch">
                                <label for="clip-on">
    <img class="checkbox__image" src="/assets/images/dummy-products/mjo2204-79ar_front.jpg">Clip-On
    
  </label>
                            </div>

                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--features-showcase">
        Handle: <code>@features-showcase</code>
        <div class="features-showcase">
            <div class="basic-text">
                <h3 class="basic-text__title">Seeing is Believing</h3>
            </div>

            <p class="paragraph">Every detail is crisper, brighter, and clearer through the view from our lenses.</p>

            <div class="features-showcase__items">
                <div class="feature-item">
                    <div class="feature-item__image">
                        <span class="feature-item__icon">
      <svg class="icon icon--shield">
  <use xlink:href="/assets/icons/icons.svg#shield"></use>
</svg>

    </span>
                    </div>
                    <div class="feature-item__copy">
                        <div class="feature-item__title">A Warranty Like No Other</div>
                        <p class="feature-item__body">We’re passionate about making the best sunglasses in the world.</p>
                        <p class="feature-item__body">
                            <a class="feature-item__link" href="#">Learn more</a>
                        </p>
                    </div>
                </div>

                <div class="feature-item">
                    <div class="feature-item__image">
                        <span class="feature-item__icon">
      <svg class="icon icon--chat">
  <use xlink:href="/assets/icons/icons.svg#chat"></use>
</svg>

    </span>
                    </div>
                    <div class="feature-item__copy">
                        <div class="feature-item__title">Unparallelled Customer Service</div>
                        <p class="feature-item__body">We promise that you will always be greeted with a friendly voice and a dedicated representative.</p>
                        <p class="feature-item__body">
                            <a class="feature-item__link" href="#">Learn more</a>
                        </p>
                    </div>
                </div>

                <div class="feature-item">
                    <div class="feature-item__image">
                        <span class="feature-item__icon">
      <svg class="icon icon--tree">
  <use xlink:href="/assets/icons/icons.svg#tree"></use>
</svg>

    </span>
                    </div>
                    <div class="feature-item__copy">
                        <div class="feature-item__title">Authentic Hawaiian Roots</div>
                        <p class="feature-item__body">Born in Hawaii. After 30 years, we’re still independently owned.</p>
                        <p class="feature-item__body">
                            <a class="feature-item__link" href="#">Learn more</a>
                        </p>
                    </div>
                </div>

                <div class="feature-item">
                    <div class="feature-item__image">
                        <span class="feature-item__icon">
      <svg class="icon icon--gear">
  <use xlink:href="/assets/icons/icons.svg#gear"></use>
</svg>

    </span>
                    </div>
                    <div class="feature-item__copy">
                        <div class="feature-item__title">Patented Technology</div>
                        <p class="feature-item__body">PolarizedPlus2 lens technology. Designed to enhance your view in every condition.</p>
                        <p class="feature-item__body">
                            <a class="feature-item__link" href="#">Learn more</a>
                        </p>
                    </div>
                </div>

                <div class="feature-item">
                    <div class="feature-item__image">
                        <span class="feature-item__icon">
      <svg class="icon icon--star">
  <use xlink:href="/assets/icons/icons.svg#star"></use>
</svg>

    </span>
                    </div>
                    <div class="feature-item__copy">
                        <div class="feature-item__title">The Maui Jim Difference</div>
                        <p class="feature-item__body">Not all sunglasses are created equal. Learn how our sunglasses protect your vision.</p>
                        <p class="feature-item__body">
                            <a class="feature-item__link" href="#">Learn more</a>
                        </p>
                    </div>
                </div>

                <div class="feature-item">
                    <div class="feature-item__image">
                        <span class="feature-item__icon">
      <svg class="icon icon--truck">
  <use xlink:href="/assets/icons/icons.svg#truck"></use>
</svg>

    </span>
                    </div>
                    <div class="feature-item__copy">
                        <div class="feature-item__title">Free Shipping and Free Returns</div>
                        <p class="feature-item__body">
                            <a class="feature-item__link" href="#">Learn more</a>
                        </p>
                    </div>
                </div>

            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--filters--default">
        Handle: <code>@filters--default</code>
        <div class="filters js-filters u-page-width-max-gutters">
            <div class="filter-controls">
                <span class="filter-controls__result-summary">
      <span class="filter__controls-result-count">14</span> Results
                </span>
                <button class="filter-controls__button filter-controls__button--open js-filters-open-button">
      <span class="filter-controls__icon filter-controls__icon--open">
        <svg class="icon icon--filters">
  <use xlink:href="/assets/icons/icons.svg#filters"></use>
</svg>

      </span>
      <span class="filter-controls__label">Filter</span>
    </button>
                <div class="filter-controls__prescription filter-controls__prescription--medium">
                    <input type="checkbox" id="filters-prescription" class="js-filters-prescription-control checkbox checkbox--default">
                    <label for="filters-prescription">Available for prescription</label>
                </div>
                <div class="filter-controls__sort-wrapper select-tooltip js-select-tooltip">
                    <button class="filter-controls__button filter-controls__button--sort js-select-tooltip-trigger">
        <span class="filter-controls__label">Sort by</span>
        <span class="filter-controls__icon">
          <svg class="icon icon--sort">
  <use xlink:href="/assets/icons/icons.svg#sort"></use>
</svg>

        </span>
      </button>
                    <select class="js-select-tooltip-select">
        <option value="new-arrivals" selected="selected">New Arrivals</option>
        <option value="price-asc">Price (low to high)</option>
        <option value="price-dsc">Price (high to low)</option>
        <option value="name-asc">Name (A-Z)</option>
        <option value="name-dsc">Name (Z-A)</option>
      </select>
                    <ul class="filter-controls__sort-tooltip tooltip js-select-tooltip-list">
                        <li class="js-select-tooltip-option js-select-tooltip-option--active" data-value="new-arrivals">New Arrivals</li>
                        <li class="js-select-tooltip-option" data-value="price-asc">Price (low to high)</li>
                        <li class="js-select-tooltip-option" data-value="price-dsc">Price (high to low)</li>
                        <li class="js-select-tooltip-option" data-value="name-asc">Name (A-Z)</li>
                        <li class="js-select-tooltip-option" data-value="name-dsc">Name (Z-A)</li>
                    </ul>
                </div>
            </div>
            <div class="filters__categories-wrapper js-filters-categories-wrapper">
                <button class="filters__close-button js-filters-close-button">
      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

      Close filters
    </button>
                <div class="js-selected-filter-close-icon"><svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>
                </div>
                <ul class="filters__selected js-filters-selected"></ul>
                <div class="filter-controls__prescription filter-controls__prescription--small">
                    <input type="checkbox" id="filters-prescription-small" class="js-filters-prescription-control checkbox checkbox--default">
                    <label for="filters-prescription-small">Available for prescription</label>
                </div>
                <ul class="filters__categories js-filters-categories">
                    <li class="filters__category js-filters-category">
                        <button class="filters__category-button js-filters-category-button">
          Frame
          <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

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

        </button>
                        <div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
                            <div class="filters__subcategory filters__subcategory--frame-style">
                                <fieldset class="filters__subcategory-inner">
                                    <legend class="filters__subcategory-label">Frame Style</legend>
                                    <ul class="filters__items">
                                        <li class="filters__item filters__item--checkbox filters__item--image">
                                            <input type="checkbox" id="fs-aviators" class="checkbox checkbox--image filters__item-input js-filters-item-input" name="frame-style" data-id="fs-aviators" data-value="Aviators">
                                            <label class="filters__item-label" for="fs-aviators">
                    <img class="filters__item-image-default" src="/assets/images/frame-styles/sunglasses_aviators_default.svg">
                    <img class="filters__item-image-active" src="/assets/images/frame-styles/sunglasses_aviators_active.svg">
                    Aviators
                    <span class="filters__item-count">
                      (13)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--image">
                                            <input type="checkbox" id="fs-rectangular" class="checkbox checkbox--image filters__item-input js-filters-item-input" name="frame-style" data-id="fs-rectangular" data-value="Rectangular">
                                            <label class="filters__item-label" for="fs-rectangular">
                    <img class="filters__item-image-default" src="/assets/images/frame-styles/sunglasses_rectangular_default.svg">
                    <img class="filters__item-image-active" src="/assets/images/frame-styles/sunglasses_rectangular_active.svg">
                    Rectangular
                    <span class="filters__item-count">
                      (19)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--image">
                                            <input type="checkbox" id="fs-cateye" class="checkbox checkbox--image filters__item-input js-filters-item-input" name="frame-style" data-id="fs-cateye" data-value="Cat Eye">
                                            <label class="filters__item-label" for="fs-cateye">
                    <img class="filters__item-image-default" src="/assets/images/frame-styles/sunglasses_cat_eye_default.svg">
                    <img class="filters__item-image-active" src="/assets/images/frame-styles/sunglasses_cat_eye_active.svg">
                    Cat Eye
                    <span class="filters__item-count">
                      (8)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--image">
                                            <input type="checkbox" id="fs-rimless" class="checkbox checkbox--image filters__item-input js-filters-item-input" name="frame-style" data-id="fs-rimless" data-value="Rimless">
                                            <label class="filters__item-label" for="fs-rimless">
                    <img class="filters__item-image-default" src="/assets/images/frame-styles/sunglasses_rimless_default.svg">
                    <img class="filters__item-image-active" src="/assets/images/frame-styles/sunglasses_rimless_active.svg">
                    Rimless
                    <span class="filters__item-count">
                      (34)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--image">
                                            <input type="checkbox" id="fs-classic" class="checkbox checkbox--image filters__item-input js-filters-item-input" name="frame-style" data-id="fs-classic" data-value="Classic">
                                            <label class="filters__item-label" for="fs-classic">
                    <img class="filters__item-image-default" src="/assets/images/frame-styles/sunglasses_classic_default.svg">
                    <img class="filters__item-image-active" src="/assets/images/frame-styles/sunglasses_classic_active.svg">
                    Classic
                    <span class="filters__item-count">
                      (14)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--image">
                                            <input type="checkbox" id="fs-shield" class="checkbox checkbox--image filters__item-input js-filters-item-input" name="frame-style" data-id="fs-shield" data-value="Shield">
                                            <label class="filters__item-label" for="fs-shield">
                    <img class="filters__item-image-default" src="/assets/images/frame-styles/sunglasses_shield_default.svg">
                    <img class="filters__item-image-active" src="/assets/images/frame-styles/sunglasses_shield_active.svg">
                    Shield
                    <span class="filters__item-count">
                      (4)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--image">
                                            <input type="checkbox" id="fs-fashion" class="checkbox checkbox--image filters__item-input js-filters-item-input" name="frame-style" data-id="fs-fashion" data-value="Fashion">
                                            <label class="filters__item-label" for="fs-fashion">
                    <img class="filters__item-image-default" src="/assets/images/frame-styles/sunglasses_fashion_default.svg">
                    <img class="filters__item-image-active" src="/assets/images/frame-styles/sunglasses_fashion_active.svg">
                    Fashion
                    <span class="filters__item-count">
                      (15)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--image">
                                            <input type="checkbox" id="fs-wrap" class="checkbox checkbox--image filters__item-input js-filters-item-input" name="frame-style" data-id="fs-wrap" data-value="Wrap">
                                            <label class="filters__item-label" for="fs-wrap">
                    <img class="filters__item-image-default" src="/assets/images/frame-styles/sunglasses_wrap_default.svg">
                    <img class="filters__item-image-active" src="/assets/images/frame-styles/sunglasses_wrap_active.svg">
                    Wrap
                    <span class="filters__item-count">
                      (19)
                    </span>
                  </label>
                                        </li>
                                    </ul>
                                </fieldset>
                            </div>
                            <div class="filters__subcategory filters__subcategory--frame-color">
                                <fieldset class="filters__subcategory-inner">
                                    <legend class="filters__subcategory-label">Frame Color</legend>
                                    <ul class="filters__items">
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-black" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-black" data-value="Black">
                                            <label class="filters__item-label" for="fc-black">
                    <span class="filters__item-alternate-fill" style="background: #303032;"></span>
                    Black
                    <span class="filters__item-count">
                      (2)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-brown" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-brown" data-value="Brown">
                                            <label class="filters__item-label" for="fc-brown">
                    <span class="filters__item-alternate-fill" style="background: #543a10;"></span>
                    Brown
                    <span class="filters__item-count">
                      (3)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-green" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-green" data-value="Green">
                                            <label class="filters__item-label" for="fc-green">
                    <span class="filters__item-alternate-fill" style="background: #66da4a;"></span>
                    Green
                    <span class="filters__item-count">
                      (1)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-purple" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-purple" data-value="Purple">
                                            <label class="filters__item-label" for="fc-purple">
                    <span class="filters__item-alternate-fill" style="background: #8c46d2;"></span>
                    Purple
                    <span class="filters__item-count">
                      (2)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-blue" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-blue" data-value="Blue">
                                            <label class="filters__item-label" for="fc-blue">
                    <span class="filters__item-alternate-fill" style="background: #5353df;"></span>
                    Blue
                    <span class="filters__item-count">
                      (4)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-gold" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-gold" data-value="Gold">
                                            <label class="filters__item-label" for="fc-gold">
                    <span class="filters__item-alternate-fill" style="background: linear-gradient(to bottom, #f2e575 0%, #a59937 50%, #f2e575 100%);"></span>
                    Gold
                    <span class="filters__item-count">
                      (3)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-grey" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-grey" data-value="Grey">
                                            <label class="filters__item-label" for="fc-grey">
                    <span class="filters__item-alternate-fill" style="background: #ccc;"></span>
                    Grey
                    <span class="filters__item-count">
                      (2)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-red" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-red" data-value="Red">
                                            <label class="filters__item-label" for="fc-red">
                    <span class="filters__item-alternate-fill" style="background: #c81616;"></span>
                    Red
                    <span class="filters__item-count">
                      (1)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-silver" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-silver" data-value="Silver">
                                            <label class="filters__item-label" for="fc-silver">
                    <span class="filters__item-alternate-fill" style="background: linear-gradient(to bottom, #ffffff 0%, #c1bdbd 50%, #d5d5d5 100%);"></span>
                    Silver
                    <span class="filters__item-count">
                      (4)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-white" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-white" data-value="White">
                                            <label class="filters__item-label" for="fc-white">
                    <span class="filters__item-alternate-fill" style="background: #fff;border: 1px solid #e2e2e2;"></span>
                    White
                    <span class="filters__item-count">
                      (2)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-tortoise" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-tortoise" data-value="Tortoise">
                                            <label class="filters__item-label" for="fc-tortoise">
                    <span class="filters__item-alternate-fill" style="background: #303032;"></span>
                    Tortoise
                    <span class="filters__item-count">
                      (2)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-twotone" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-twotone" data-value="Two-Tone">
                                            <label class="filters__item-label" for="fc-twotone">
                    <span class="filters__item-alternate-fill" style="background: linear-gradient(to bottom, #525252 50%, #cccccc 51%);"></span>
                    Two-Tone
                    <span class="filters__item-count">
                      (2)
                    </span>
                  </label>
                                        </li>
                                    </ul>
                                </fieldset>
                            </div>
                        </div>
                    </li>
                    <li class="filters__category js-filters-category">
                        <button class="filters__category-button js-filters-category-button">
          Lens
          <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

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

        </button>
                        <div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
                            <div class="filters__subcategory filters__subcategory--lens-color">
                                <fieldset class="filters__subcategory-inner">
                                    <legend class="filters__subcategory-label">Lens Color</legend>
                                    <ul class="filters__items">
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="lc-bluehawaii" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="lens-color" data-id="lc-bluehawaii" data-value="Blue Hawaii">
                                            <label class="filters__item-label" for="lc-bluehawaii">
                    <span class="filters__item-alternate-fill" style="background: #297fbc;"></span>
                    Blue Hawaii
                    <span class="filters__item-count">
                      (1)
                    </span>
                  </label>
                                            <div class="tooltip">Our blue mirror coating provides a stylish new look that offers the same amazing color enhancement and clarity as all other Maui Jim lenses.</div>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="lc-neutralgrey" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="lens-color" data-id="lc-neutralgrey" data-value="Neutral Grey">
                                            <label class="filters__item-label" for="lc-neutralgrey">
                    <span class="filters__item-alternate-fill" style="background: #535B54;"></span>
                    Neutral Grey
                    <span class="filters__item-count">
                      (3)
                    </span>
                  </label>
                                            <div class="tooltip">Perfect for especially bright, direct sunlight. Offers rich color and contrast along with the highest available light production, unlike ordinary grey lenses that flatten light evenly across the spectrum.</div>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="lc-hclbronze" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="lens-color" data-id="lc-hclbronze" data-value="HCL® Bronze">
                                            <label class="filters__item-label" for="lc-hclbronze">
                    <span class="filters__item-alternate-fill" style="background: #987858;"></span>
                    HCL® Bronze
                    <span class="filters__item-count">
                      (13)
                    </span>
                  </label>
                                            <div class="tooltip">For everyday variable conditions, from full sun to overcast. Provides excellent contrast. Great if you love a warm, subtle bronze tint.</div>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="lc-mauiht" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="lens-color" data-id="lc-mauiht" data-value="Maui HT™">
                                            <label class="filters__item-label" for="lc-mauiht">
                    <span class="filters__item-alternate-fill" style="background: #798b57;"></span>
                    Maui HT™
                    <span class="filters__item-count">
                      (3)
                    </span>
                  </label>
                                            <div class="tooltip">High Transmission lenses work hard when distance counts. With the highest usable light transmission, HT technology balances contrast and depth of field for crisper details during varying conditions.</div>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="lc-mauirose" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="lens-color" data-id="lc-mauirose" data-value="Maui Rose®">
                                            <label class="filters__item-label" for="lc-mauirose">
                    <span class="filters__item-alternate-fill" style="background: #9c5950;"></span>
                    Maui Rose®
                    <span class="filters__item-count">
                      (4)
                    </span>
                  </label>
                                            <div class="tooltip">For everyday variable conditions, from full sun to overcast. The highest contrast available - excellent for fast moving sports. Provides a subtle rose tint.</div>
                                        </li>
                                    </ul>
                                </fieldset>
                            </div>
                            <div class="filters__subcategory filters__subcategory--lens-size">
                                <fieldset class="filters__subcategory-inner">
                                    <legend class="filters__subcategory-label">Lens Size</legend>
                                    <ul class="filters__items">
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="ls-small" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="lens-size" data-id="ls-small" data-value="Small">
                                            <label class="filters__item-label" for="ls-small">
                    Small
                    <span class="filters__item-count">
                      (3)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="ls-medium" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="lens-size" data-id="ls-medium" data-value="Medium">
                                            <label class="filters__item-label" for="ls-medium">
                    Medium
                    <span class="filters__item-count">
                      (5)
                    </span>
                  </label>
                                        </li>
                                    </ul>
                                </fieldset>
                            </div>
                        </div>
                    </li>
                    <li class="filters__category js-filters-category">
                        <button class="filters__category-button js-filters-category-button">
          Material
          <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

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

        </button>
                        <div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
                            <div class="filters__subcategory filters__subcategory--frame-material">
                                <fieldset class="filters__subcategory-inner">
                                    <legend class="filters__subcategory-label">Frame Material</legend>
                                    <ul class="filters__items">
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="fm-acetate" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="frame-material" data-id="fm-acetate" data-value="Acetate">
                                            <label class="filters__item-label" for="fm-acetate">
                    Acetate
                    <span class="filters__item-count">
                      (3)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="fm-metals" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="frame-material" data-id="fm-metals" data-value="Metals">
                                            <label class="filters__item-label" for="fm-metals">
                    Metals
                    <span class="filters__item-count">
                      (5)
                    </span>
                  </label>
                                            <div class="tooltip">Extremely strong, corrosion-resistant alloy for long-lasting comfort.</div>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="fm-plastics" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="frame-material" data-id="fm-plastics" data-value="Plastics">
                                            <label class="filters__item-label" for="fm-plastics">
                    Plastics
                    <span class="filters__item-count">
                      (3)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="lc-titaniums" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="frame-material" data-id="lc-titaniums" data-value="Titaniums">
                                            <label class="filters__item-label" for="lc-titaniums">
                    Titaniums
                    <span class="filters__item-count">
                      (2)
                    </span>
                  </label>
                                            <div class="tooltip">Pure titanium frames are lightweight, durable and comfortable.</div>
                                        </li>
                                    </ul>
                                </fieldset>
                            </div>
                            <div class="filters__subcategory filters__subcategory--lens-material">
                                <fieldset class="filters__subcategory-inner">
                                    <legend class="filters__subcategory-label">Lens Material</legend>
                                    <ul class="filters__items">
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="lm-mauievolution" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="lens-material" data-id="lm-mauievolution" data-value="Maui Evolution®">
                                            <label class="filters__item-label" for="lm-mauievolution">
                    Maui Evolution®
                    <span class="filters__item-count">
                      (1)
                    </span>
                  </label>
                                            <div class="tooltip">When you need an everyday lens for your active life.</div>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="lm-mauipure" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="lens-material" data-id="lm-mauipure" data-value="MauiPure®">
                                            <label class="filters__item-label" for="lm-mauipure">
                    MauiPure®
                    <span class="filters__item-count">
                      (2)
                    </span>
                  </label>
                                            <div class="tooltip">The lightest weight choice for long days in the sun.</div>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="lm-superthinglass" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="lens-material" data-id="lm-superthinglass" data-value="SuperThin Glass">
                                            <label class="filters__item-label" for="lm-superthinglass">
                    SuperThin Glass
                    <span class="filters__item-count">
                      (6)
                    </span>
                  </label>
                                            <div class="tooltip">When clarity is the priority, go with the best optics available.</div>
                                        </li>
                                    </ul>
                                </fieldset>
                            </div>
                        </div>
                    </li>
                    <li class="filters__category js-filters-category">
                        <button class="filters__category-button js-filters-category-button">
          Fit
          <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

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

        </button>
                        <div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
                            <div class="filters__subcategory filters__subcategory--fit">
                                <fieldset class="filters__subcategory-inner">
                                    <legend class="filters__subcategory-label">Fit</legend>
                                    <ul class="filters__items">
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="fi-small" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="fit" data-id="fi-small" data-value="Small">
                                            <label class="filters__item-label" for="fi-small">
                    Small
                    <span class="filters__item-count">
                      (3)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="fi-medium" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="fit" data-id="fi-medium" data-value="Medium">
                                            <label class="filters__item-label" for="fi-medium">
                    Medium
                    <span class="filters__item-count">
                      (5)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="fi-large" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="fit" data-id="fi-large" data-value="Large">
                                            <label class="filters__item-label" for="fi-large">
                    Large
                    <span class="filters__item-count">
                      (1)
                    </span>
                  </label>
                                        </li>
                                    </ul>
                                </fieldset>
                            </div>
                        </div>
                    </li>
                    <li class="filters__category js-filters-category">
                        <button class="filters__category-button js-filters-category-button">
          Gender
          <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

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

        </button>
                        <div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
                            <div class="filters__subcategory filters__subcategory--gender">
                                <fieldset class="filters__subcategory-inner">
                                    <legend class="filters__subcategory-label">Gender</legend>
                                    <ul class="filters__items">
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="ge-men" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="gender" data-id="ge-men" data-value="Men">
                                            <label class="filters__item-label" for="ge-men">
                    Men
                    <span class="filters__item-count">
                      (6)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="ge-women" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="gender" data-id="ge-women" data-value="Women">
                                            <label class="filters__item-label" for="ge-women">
                    Women
                    <span class="filters__item-count">
                      (9)
                    </span>
                  </label>
                                        </li>
                                    </ul>
                                </fieldset>
                            </div>
                        </div>
                    </li>
                    <li class="filters__category js-filters-category">
                        <button class="filters__category-button js-filters-category-button">
          Lifestyle
          <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

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

        </button>
                        <div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
                            <div class="filters__subcategory filters__subcategory--activity">
                                <fieldset class="filters__subcategory-inner">
                                    <legend class="filters__subcategory-label">Activity</legend>
                                    <ul class="filters__items">
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="ac-golf" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="activity" data-id="ac-golf" data-value="Golf">
                                            <label class="filters__item-label" for="ac-golf">
                    Golf
                    <span class="filters__item-count">
                      (11)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="ac-fish" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="activity" data-id="ac-fish" data-value="Fish">
                                            <label class="filters__item-label" for="ac-fish">
                    Fish
                    <span class="filters__item-count">
                      (23)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="ac-surf" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="activity" data-id="ac-surf" data-value="Surf">
                                            <label class="filters__item-label" for="ac-surf">
                    Surf
                    <span class="filters__item-count">
                      (5)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="ac-run" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="activity" data-id="ac-run" data-value="Run">
                                            <label class="filters__item-label" for="ac-run">
                    Run
                    <span class="filters__item-count">
                      (8)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="ac-drive" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="activity" data-id="ac-drive" data-value="Drive">
                                            <label class="filters__item-label" for="ac-drive">
                    Drive
                    <span class="filters__item-count">
                      (13)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="ac-hike" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="activity" data-id="ac-hike" data-value="Hike">
                                            <label class="filters__item-label" for="ac-hike">
                    Hike
                    <span class="filters__item-count">
                      (21)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="ac-tennis" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="activity" data-id="ac-tennis" data-value="Tennis">
                                            <label class="filters__item-label" for="ac-tennis">
                    Tennis
                    <span class="filters__item-count">
                      (34)
                    </span>
                  </label>
                                        </li>
                                    </ul>
                                </fieldset>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="filters__submit-wrapper">
                <button class="filters__submit button button--primary js-filters-submit-button">See Results (14)</button>
            </div>
            <div class="filters__reset-wrapper">
                <button class="filters__reset js-filters-reset-button">Reset Filters</button>
            </div>
            <ul class="filters__angles">
                <li class="filters__angle filters__angle--front">
                    <button class="filters__angle-button js-filters-angle-button js-filters-angle-button--active" data-id="front">
        <img class="filters__angle-image" src="/assets/images/filter-front.png" alt="Front">
        <span class="filters__angle-label">Front</span>
      </button>
                </li>
                <li class="filters__angle filters__angle--angle">
                    <button class="filters__angle-button js-filters-angle-button" data-id="angle">
        <img class="filters__angle-image" src="/assets/images/filter-angle.png" alt="Angle">
        <span class="filters__angle-label">Angle</span>
      </button>
                </li>
                <li class="filters__angle filters__angle--side">
                    <button class="filters__angle-button js-filters-angle-button" data-id="side">
        <img class="filters__angle-image" src="/assets/images/filter-side.png" alt="Side">
        <span class="filters__angle-label">Side</span>
      </button>
                </li>
            </ul>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--filters--eyeglasses">
        Handle: <code>@filters--eyeglasses</code>
        <div class="filters js-filters u-page-width-max-gutters">
            <div class="filter-controls">
                <span class="filter-controls__result-summary">
      <span class="filter__controls-result-count">14</span> Results
                </span>
                <button class="filter-controls__button filter-controls__button--open js-filters-open-button">
      <span class="filter-controls__icon filter-controls__icon--open">
        <svg class="icon icon--filters">
  <use xlink:href="/assets/icons/icons.svg#filters"></use>
</svg>

      </span>
      <span class="filter-controls__label">Filter</span>
    </button>
                <div class="filter-controls__sort-wrapper select-tooltip js-select-tooltip">
                    <button class="filter-controls__button filter-controls__button--sort js-select-tooltip-trigger">
        <span class="filter-controls__label">Sort by</span>
        <span class="filter-controls__icon">
          <svg class="icon icon--sort">
  <use xlink:href="/assets/icons/icons.svg#sort"></use>
</svg>

        </span>
      </button>
                    <select class="js-select-tooltip-select">
        <option value="new-arrivals" selected="selected">New Arrivals</option>
        <option value="price-asc">Price (low to high)</option>
        <option value="price-dsc">Price (high to low)</option>
        <option value="name-asc">Name (A-Z)</option>
        <option value="name-dsc">Name (Z-A)</option>
      </select>
                    <ul class="filter-controls__sort-tooltip tooltip js-select-tooltip-list">
                        <li class="js-select-tooltip-option js-select-tooltip-option--active" data-value="new-arrivals">New Arrivals</li>
                        <li class="js-select-tooltip-option" data-value="price-asc">Price (low to high)</li>
                        <li class="js-select-tooltip-option" data-value="price-dsc">Price (high to low)</li>
                        <li class="js-select-tooltip-option" data-value="name-asc">Name (A-Z)</li>
                        <li class="js-select-tooltip-option" data-value="name-dsc">Name (Z-A)</li>
                    </ul>
                </div>
            </div>
            <div class="filters__categories-wrapper js-filters-categories-wrapper">
                <button class="filters__close-button js-filters-close-button">
      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

      Close filters
    </button>
                <div class="js-selected-filter-close-icon"><svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>
                </div>
                <ul class="filters__selected js-filters-selected"></ul>
                <ul class="filters__categories js-filters-categories">
                    <li class="filters__category js-filters-category">
                        <button class="filters__category-button js-filters-category-button">
          Frame
          <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

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

        </button>
                        <div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
                            <div class="filters__subcategory filters__subcategory--frame-material">
                                <fieldset class="filters__subcategory-inner">
                                    <legend class="filters__subcategory-label">Frame Material</legend>
                                    <ul class="filters__items">
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="fm-acetate" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="frame-material" data-id="fm-acetate" data-value="Specialty Metal">
                                            <label class="filters__item-label" for="fm-acetate">
                    Specialty Metal
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="fm-metals" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="frame-material" data-id="fm-metals" data-value="Metal">
                                            <label class="filters__item-label" for="fm-metals">
                    Metal
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="fm-rimless" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="frame-material" data-id="fm-rimless" data-value="Rimless">
                                            <label class="filters__item-label" for="fm-rimless">
                    Rimless
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="fm-acetate" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="frame-material" data-id="fm-acetate" data-value="Acetate">
                                            <label class="filters__item-label" for="fm-acetate">
                    Acetate
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="fm-nylon" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="frame-material" data-id="fm-nylon" data-value="Nylon">
                                            <label class="filters__item-label" for="fm-nylon">
                    Nylon
                  </label>
                                        </li>
                                    </ul>
                                </fieldset>
                            </div>
                            <div class="filters__subcategory filters__subcategory--frame-color">
                                <fieldset class="filters__subcategory-inner">
                                    <legend class="filters__subcategory-label">Frame Color</legend>
                                    <ul class="filters__items">
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-black" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-black" data-value="Black">
                                            <label class="filters__item-label" for="fc-black">
                    <span class="filters__item-alternate-fill" style="background: #303032;"></span>
                    Black
                    <span class="filters__item-count">
                      (4)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-green" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-green" data-value="Green">
                                            <label class="filters__item-label" for="fc-green">
                    <span class="filters__item-alternate-fill" style="background: #47aa91;"></span>
                    Green
                    <span class="filters__item-count">
                      (4)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-blue" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-blue" data-value="Blue">
                                            <label class="filters__item-label" for="fc-blue">
                    <span class="filters__item-alternate-fill" style="background: #4a8fe2;"></span>
                    Blue
                    <span class="filters__item-count">
                      (4)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-yellow" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-yellow" data-value="Yellow">
                                            <label class="filters__item-label" for="fc-yellow">
                    <span class="filters__item-alternate-fill" style="background: #FCE44A;"></span>
                    Yellow
                    <span class="filters__item-count">
                      (4)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--alternate">
                                            <input type="checkbox" id="fc-red" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-red" data-value="Red">
                                            <label class="filters__item-label" for="fc-red">
                    <span class="filters__item-alternate-fill" style="background: #e62f2f;"></span>
                    Red
                    <span class="filters__item-count">
                      (4)
                    </span>
                  </label>
                                        </li>
                                    </ul>
                                </fieldset>
                            </div>
                        </div>
                    </li>
                    <li class="filters__category js-filters-category">
                        <button class="filters__category-button js-filters-category-button">
          Shape
          <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

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

        </button>
                        <div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
                            <div class="filters__subcategory filters__subcategory--shapes">
                                <fieldset class="filters__subcategory-inner">
                                    <legend class="filters__subcategory-label">Shapes</legend>
                                    <ul class="filters__items">
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="sh-rectangular" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="shapes" data-id="sh-rectangular" data-value="Rectangular">
                                            <label class="filters__item-label" for="sh-rectangular">
                    Rectangular
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="sh-round" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="shapes" data-id="sh-round" data-value="Round">
                                            <label class="filters__item-label" for="sh-round">
                    Round
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="sh-oval" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="shapes" data-id="sh-oval" data-value="Oval">
                                            <label class="filters__item-label" for="sh-oval">
                    Oval
                  </label>
                                        </li>
                                    </ul>
                                </fieldset>
                            </div>
                        </div>
                    </li>
                    <li class="filters__category js-filters-category">
                        <button class="filters__category-button js-filters-category-button">
          Gender
          <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

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

        </button>
                        <div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
                            <div class="filters__subcategory filters__subcategory--gender">
                                <fieldset class="filters__subcategory-inner">
                                    <legend class="filters__subcategory-label">Gender</legend>
                                    <ul class="filters__items">
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="ge-men" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="gender" data-id="ge-men" data-value="Men">
                                            <label class="filters__item-label" for="ge-men">
                    Men
                    <span class="filters__item-count">
                      (4)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="ge-women" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="gender" data-id="ge-women" data-value="Women">
                                            <label class="filters__item-label" for="ge-women">
                    Women
                    <span class="filters__item-count">
                      (4)
                    </span>
                  </label>
                                        </li>
                                    </ul>
                                </fieldset>
                            </div>
                        </div>
                    </li>
                    <li class="filters__category js-filters-category">
                        <button class="filters__category-button js-filters-category-button">
          Fit
          <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

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

        </button>
                        <div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
                            <div class="filters__subcategory filters__subcategory--fit">
                                <fieldset class="filters__subcategory-inner">
                                    <legend class="filters__subcategory-label">Fit</legend>
                                    <ul class="filters__items">
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="fi-medium" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="fit" data-id="fi-medium" data-value="Medium">
                                            <label class="filters__item-label" for="fi-medium">
                    Medium
                    <span class="filters__item-count">
                      (2)
                    </span>
                  </label>
                                        </li>
                                        <li class="filters__item filters__item--checkbox filters__item--default">
                                            <input type="checkbox" id="fi-large" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="fit" data-id="fi-large" data-value="Large">
                                            <label class="filters__item-label" for="fi-large">
                    Large
                    <span class="filters__item-count">
                      (2)
                    </span>
                  </label>
                                        </li>
                                    </ul>
                                </fieldset>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="filters__submit-wrapper">
                <button class="filters__submit button button--primary js-filters-submit-button">See Results (14)</button>
            </div>
            <div class="filters__reset-wrapper">
                <button class="filters__reset js-filters-reset-button">Reset Filters</button>
            </div>
            <ul class="filters__angles">
                <li class="filters__angle filters__angle--front-eyeglasses">
                    <button class="filters__angle-button js-filters-angle-button js-filters-angle-button--active" data-id="front-eyeglasses">
        <img class="filters__angle-image" src="/assets/images/filter-front-eyeglasses.png" alt="Front">
        <span class="filters__angle-label">Front</span>
      </button>
                </li>
                <li class="filters__angle filters__angle--angle-eyeglasses">
                    <button class="filters__angle-button js-filters-angle-button" data-id="angle-eyeglasses">
        <img class="filters__angle-image" src="/assets/images/filter-angle-eyeglasses.png" alt="Angle">
        <span class="filters__angle-label">Angle</span>
      </button>
                </li>
                <li class="filters__angle filters__angle--side-eyeglasses">
                    <button class="filters__angle-button js-filters-angle-button" data-id="side-eyeglasses">
        <img class="filters__angle-image" src="/assets/images/filter-side-eyeglasses.png" alt="Side">
        <span class="filters__angle-label">Side</span>
      </button>
                </li>
            </ul>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--lens-detail--bluehawaii">
        Handle: <code>@lens-detail--bluehawaii</code>
        <div class="lens-detail u-block u-page-width-max">
            <h5 class="lens-detail__title">Lens Details</h5>
            <div class="lens-detail__text">
                <img class="lens-detail__lens-image" src="/assets/images/lens-detail-lens-neutralgrey.png" alt="Blue Hawaii">
                <h6 class="lens-detail__headline">Blue Hawaii</h6>
                <span class="lens-detail__subheadline">Best in Bright, Direct Sunlight</span>
                <p class="lens-detail__description">Offers the highest available light reduction for the richest colors and sharpest contrast.</p>
                <div class="lens-material">
                    <h6 class="lens-material__title">Superthin Glass</h6>
                    <p class="lens-material__description">SuperThin Glass provides the absolute best optics available. It is the heaviest of our four materials, but is 20% thinner and lighter than standard glass.</p>
                    <div class="lens-material__diagram">
                        <div class="lens-material__label lens-material__label--top">Clarity</div>
                        <div class="lens-material__middle">
                            <div class="lens-material__label lens-material__label--left">Shatter Resistance</div>
                            <div class="lens-material__image-wrapper">
                                <img class="lens-material__image" src="/assets/images/lens-material-superthin.svg">
                                <span class="lens-material__caption">ST</span>
                            </div>
                            <div class="lens-material__label lens-material__label--right">Scratch Resistance</div>
                        </div>
                        <div class="lens-material__label lens-material__label--bottom">Weight</div>
                    </div>
                </div>

            </div>
            <div class="lens-detail__comparison">
                <figure class="image-comparison js-image-comparison">
                    <img class="image-comparison__image" src="/assets/images/lens-detail-neutralgrey.jpg" alt="With">
                    <div class="image-comparison__resize js-image-comparison-resize">
                        <img class="image-comparison__image image-comparison__image--resize" src="/assets/images/lens-detail-without.jpg" alt="With">
                    </div>
                    <span class="image-comparison__handle js-image-comparison-handle"></span>
                    <figcaption class="image-comparison__caption image-comparison__caption--left">Without</figcaption>
                    <figcaption class="image-comparison__caption image-comparison__caption--center">Images are not retouched</figcaption>
                    <figcaption class="image-comparison__caption image-comparison__caption--right">With</figcaption>
                </figure>

            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--product-controls">
        Handle: <code>@product-controls</code>
        <ul class="product-controls">
            <li class="product-controls__item">
                <button class="product-controls__button product-controls__button--wishlist" data-product-control="wishlist" data-active-variant="202-02" data-product-list="202-02 H202-2M">
      <span class="product-controls__state product-controls__state--add">
        <svg class="icon icon--heart">
  <use xlink:href="/assets/icons/icons.svg#heart"></use>
</svg>

        <span class="product-controls__label product-controls__label--small">Wishlist</span>
        <span class="product-controls__label product-controls__label--medium">Add to Wishlist</span>
        <span class="product-controls__label product-controls__label--large">Add to Wishlist</span>
      </span>
      <span class="product-controls__state product-controls__state--remove">
        <svg class="icon icon--heart-filled">
  <use xlink:href="/assets/icons/icons.svg#heart-filled"></use>
</svg>

        <span class="product-controls__label product-controls__label--small">Wishlist</span>
        <span class="product-controls__label product-controls__label--medium">Remove from Wishlist</span>
        <span class="product-controls__label product-controls__label--large">Remove from Wishlist</span>
      </span>
    </button>
            </li>
            <li class="product-controls__item">
                <button class="product-controls__button" data-active-variant="202-02" data-product-list="">
      <span class="product-controls__state">
        <svg class="icon icon--binoculars">
  <use xlink:href="/assets/icons/icons.svg#binoculars"></use>
</svg>

        <span class="product-controls__label product-controls__label--small">Find a Retailer</span>
        <span class="product-controls__label product-controls__label--medium">Find a Retailer</span>
        <span class="product-controls__label product-controls__label--large">Find a Prescription Retailer</span>
      </span>
    </button>
            </li>
            <li class="product-controls__item">
                <button class="product-controls__button product-controls__button--compare" data-product-control="compare" data-active-variant="202-02" data-product-list="">
      <span class="product-controls__state product-controls__state--add">
        <svg class="icon icon--compare">
  <use xlink:href="/assets/icons/icons.svg#compare"></use>
</svg>

        <span class="product-controls__label product-controls__label--small">Compare</span>
        <span class="product-controls__label product-controls__label--medium">Add to Compare</span>
        <span class="product-controls__label product-controls__label--large">Add to Compare</span>
      </span>
      <span class="product-controls__state product-controls__state--remove">
        <svg class="icon icon--compare-filled">
  <use xlink:href="/assets/icons/icons.svg#compare-filled"></use>
</svg>

        <span class="product-controls__label product-controls__label--small">Remove</span>
        <span class="product-controls__label product-controls__label--medium">Remove from Compare</span>
        <span class="product-controls__label product-controls__label--large">Remove from Compare</span>
      </span>
    </button>
            </li>
        </ul>

    </div>
    <div class="l-collected-components l-collected-components--product-description--maui-jim">
        Handle: <code>@product-description--maui-jim</code>
        <div class="accordion-tabs js-accordion-tabs product-description js-product-description" data-product-id="202-02">
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" data-tab="product-description">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Description
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item">Pe&#x27;ahi (&#x27;peh-AH-hee&#x27;), on Maui&#x27;s north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.</p>
                </div>
            </div>
            <ul class="accordion-tabs__tabs">
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-202-02-product-description" aria-selected="false" role="tab" data-tab="product-description">Description</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-202-02-details" aria-selected="true" role="tab" data-tab="details">Details</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-202-02-included" aria-selected="false" role="tab" data-tab="included">Included</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-202-02-store-availability" aria-selected="false" role="tab" data-tab="store-availability">Store Availability</button>
                </li>
            </ul>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-202-02-details" aria-hidden="false" role="tabpanel" data-tab="details">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Details
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Frame:</strong> Gloss Black</p>
                    <p class="accordion-tabs__content-item"><strong>Lens:</strong> Neutral Grey - Highest light reduction for rich color and contrast.</p>
                    <p class="accordion-tabs__content-item"><strong>Lens Material:</strong> SuperThin Glass - Perfect when clarity is your highest priority.</p>
                    <p class="accordion-tabs__content-item"><strong>SKU:</strong> 202-02</p>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-202-02-included" aria-hidden="true" role="tabpanel" data-tab="included">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Included
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/brown-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Brown case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/cleansing-cloth-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Cleaning cloth case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--protection-check">
  <use xlink:href="/assets/icons/icons.svg#protection-check"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Two year warranty</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--truck-delivery">
  <use xlink:href="/assets/icons/icons.svg#truck-delivery"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Free shipping &amp; returns</p>
                    </div>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-202-02-store-availability" aria-hidden="true" role="tabpanel" data-tab="store-availability">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Store Availability
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Check Store Availability</strong></p>
                    <p class="accordion-tabs__content-item">SPEX<br>1819 St Johns Ave, Highland Park, 60035, United States</p>
                    <p class="accordion-tabs__content-item"><strong>Available Now</strong></p>
                    <p class="accordion-tabs__content-item">
                        <a class="accordion-tabs__content-call-to-action" href="#">
          Choose a Store
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
                    </p>
                </div>
            </div>
        </div>
        <div class="accordion-tabs js-accordion-tabs product-description js-product-description js-hidden" data-product-id="B202-2M">
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" data-tab="product-description">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Description
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item">Pe&#x27;ahi (&#x27;peh-AH-hee&#x27;), on Maui&#x27;s north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.</p>
                </div>
            </div>
            <ul class="accordion-tabs__tabs">
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-B202-2M-product-description" aria-selected="false" role="tab" data-tab="product-description">Description</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-B202-2M-details" aria-selected="true" role="tab" data-tab="details">Details</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-B202-2M-included" aria-selected="false" role="tab" data-tab="included">Included</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-B202-2M-store-availability" aria-selected="false" role="tab" data-tab="store-availability">Store Availability</button>
                </li>
            </ul>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-B202-2M-details" aria-hidden="false" role="tabpanel" data-tab="details">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Details
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Frame:</strong> Matte Black</p>
                    <p class="accordion-tabs__content-item"><strong>Lens:</strong> Blue Hawaii - Blue mirror coating provides a stylish new look.</p>
                    <p class="accordion-tabs__content-item"><strong>Lens Material:</strong> SuperThin Glass - Perfect when clarity is your highest priority.</p>
                    <p class="accordion-tabs__content-item"><strong>SKU:</strong> B202-2M</p>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-B202-2M-included" aria-hidden="true" role="tabpanel" data-tab="included">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Included
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/brown-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Brown case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/cleansing-cloth-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Cleaning cloth case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--protection-check">
  <use xlink:href="/assets/icons/icons.svg#protection-check"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Two year warranty</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--truck-delivery">
  <use xlink:href="/assets/icons/icons.svg#truck-delivery"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Free shipping &amp; returns</p>
                    </div>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-B202-2M-store-availability" aria-hidden="true" role="tabpanel" data-tab="store-availability">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Store Availability
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Check Store Availability</strong></p>
                    <p class="accordion-tabs__content-item">SPEX<br>1819 St Johns Ave, Highland Park, 60035, United States</p>
                    <p class="accordion-tabs__content-item"><strong>Available Now</strong></p>
                    <p class="accordion-tabs__content-item">
                        <a class="accordion-tabs__content-call-to-action" href="#">
          Choose a Store
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
                    </p>
                </div>
            </div>
        </div>
        <div class="accordion-tabs js-accordion-tabs product-description js-product-description js-hidden" data-product-id="H202-10">
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" data-tab="product-description">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Description
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item">Pe&#x27;ahi (&#x27;peh-AH-hee&#x27;), on Maui&#x27;s north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.</p>
                </div>
            </div>
            <ul class="accordion-tabs__tabs">
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-10-product-description" aria-selected="false" role="tab" data-tab="product-description">Description</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-10-details" aria-selected="true" role="tab" data-tab="details">Details</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-10-included" aria-selected="false" role="tab" data-tab="included">Included</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-10-store-availability" aria-selected="false" role="tab" data-tab="store-availability">Store Availability</button>
                </li>
            </ul>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-H202-10-details" aria-hidden="false" role="tabpanel" data-tab="details">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Details
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Frame:</strong> Dark Tortoise</p>
                    <p class="accordion-tabs__content-item"><strong>Lens:</strong> HCL® Bronze - Versatile in changing conditions with a warm tint.</p>
                    <p class="accordion-tabs__content-item"><strong>Lens Material:</strong> SuperThin Glass - Perfect when clarity is your highest priority.</p>
                    <p class="accordion-tabs__content-item"><strong>SKU:</strong> H202-10</p>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-H202-10-included" aria-hidden="true" role="tabpanel" data-tab="included">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Included
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/brown-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Brown case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/cleansing-cloth-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Cleaning cloth case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--protection-check">
  <use xlink:href="/assets/icons/icons.svg#protection-check"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Two year warranty</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--truck-delivery">
  <use xlink:href="/assets/icons/icons.svg#truck-delivery"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Free shipping &amp; returns</p>
                    </div>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-H202-10-store-availability" aria-hidden="true" role="tabpanel" data-tab="store-availability">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Store Availability
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Check Store Availability</strong></p>
                    <p class="accordion-tabs__content-item">SPEX<br>1819 St Johns Ave, Highland Park, 60035, United States</p>
                    <p class="accordion-tabs__content-item"><strong>Available Now</strong></p>
                    <p class="accordion-tabs__content-item">
                        <a class="accordion-tabs__content-call-to-action" href="#">
          Choose a Store
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
                    </p>
                </div>
            </div>
        </div>
        <div class="accordion-tabs js-accordion-tabs product-description js-product-description js-hidden" data-product-id="H202-2M">
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" data-tab="product-description">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Description
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item">Pe&#x27;ahi (&#x27;peh-AH-hee&#x27;), on Maui&#x27;s north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.</p>
                </div>
            </div>
            <ul class="accordion-tabs__tabs">
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-2M-product-description" aria-selected="false" role="tab" data-tab="product-description">Description</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-2M-details" aria-selected="true" role="tab" data-tab="details">Details</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-2M-included" aria-selected="false" role="tab" data-tab="included">Included</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-2M-store-availability" aria-selected="false" role="tab" data-tab="store-availability">Store Availability</button>
                </li>
            </ul>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-H202-2M-details" aria-hidden="false" role="tabpanel" data-tab="details">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Details
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Frame:</strong> Matte Black</p>
                    <p class="accordion-tabs__content-item"><strong>Lens:</strong> HCL® Bronze - Versatile in changing conditions with a warm tint.</p>
                    <p class="accordion-tabs__content-item"><strong>Lens Material:</strong> SuperThin Glass - Perfect when clarity is your highest priority.</p>
                    <p class="accordion-tabs__content-item"><strong>SKU:</strong> H202-2M</p>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-H202-2M-included" aria-hidden="true" role="tabpanel" data-tab="included">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Included
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/brown-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Brown case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/cleansing-cloth-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Cleaning cloth case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--protection-check">
  <use xlink:href="/assets/icons/icons.svg#protection-check"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Two year warranty</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--truck-delivery">
  <use xlink:href="/assets/icons/icons.svg#truck-delivery"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Free shipping &amp; returns</p>
                    </div>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-H202-2M-store-availability" aria-hidden="true" role="tabpanel" data-tab="store-availability">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Store Availability
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Check Store Availability</strong></p>
                    <p class="accordion-tabs__content-item">SPEX<br>1819 St Johns Ave, Highland Park, 60035, United States</p>
                    <p class="accordion-tabs__content-item"><strong>Available Now</strong></p>
                    <p class="accordion-tabs__content-item">
                        <a class="accordion-tabs__content-call-to-action" href="#">
          Choose a Store
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
                    </p>
                </div>
            </div>
        </div>
        <div class="accordion-tabs js-accordion-tabs product-description js-product-description js-hidden" data-product-id="H202-70">
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" data-tab="product-description">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Description
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item">Pe&#x27;ahi (&#x27;peh-AH-hee&#x27;), on Maui&#x27;s north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.</p>
                </div>
            </div>
            <ul class="accordion-tabs__tabs">
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-70-product-description" aria-selected="false" role="tab" data-tab="product-description">Description</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-70-details" aria-selected="true" role="tab" data-tab="details">Details</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-70-included" aria-selected="false" role="tab" data-tab="included">Included</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-70-store-availability" aria-selected="false" role="tab" data-tab="store-availability">Store Availability</button>
                </li>
            </ul>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-H202-70-details" aria-hidden="false" role="tabpanel" data-tab="details">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Details
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Frame:</strong> Redfish</p>
                    <p class="accordion-tabs__content-item"><strong>Lens:</strong> HCL® Bronze - Versatile in changing conditions with a warm tint.</p>
                    <p class="accordion-tabs__content-item"><strong>Lens Material:</strong> SuperThin Glass - Perfect when clarity is your highest priority.</p>
                    <p class="accordion-tabs__content-item"><strong>SKU:</strong> H202-70</p>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-H202-70-included" aria-hidden="true" role="tabpanel" data-tab="included">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Included
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/brown-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Brown case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/cleansing-cloth-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Cleaning cloth case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--protection-check">
  <use xlink:href="/assets/icons/icons.svg#protection-check"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Two year warranty</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--truck-delivery">
  <use xlink:href="/assets/icons/icons.svg#truck-delivery"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Free shipping &amp; returns</p>
                    </div>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-H202-70-store-availability" aria-hidden="true" role="tabpanel" data-tab="store-availability">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Store Availability
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Check Store Availability</strong></p>
                    <p class="accordion-tabs__content-item">SPEX<br>1819 St Johns Ave, Highland Park, 60035, United States</p>
                    <p class="accordion-tabs__content-item"><strong>Available Now</strong></p>
                    <p class="accordion-tabs__content-item">
                        <a class="accordion-tabs__content-call-to-action" href="#">
          Choose a Store
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
                    </p>
                </div>
            </div>
        </div>
        <div class="accordion-tabs js-accordion-tabs product-description js-product-description js-hidden" data-product-id="HT202-71">
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" data-tab="product-description">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Description
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item">Pe&#x27;ahi (&#x27;peh-AH-hee&#x27;), on Maui&#x27;s north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.</p>
                </div>
            </div>
            <ul class="accordion-tabs__tabs">
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-HT202-71-product-description" aria-selected="false" role="tab" data-tab="product-description">Description</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-HT202-71-details" aria-selected="true" role="tab" data-tab="details">Details</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-HT202-71-included" aria-selected="false" role="tab" data-tab="included">Included</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-HT202-71-store-availability" aria-selected="false" role="tab" data-tab="store-availability">Store Availability</button>
                </li>
            </ul>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-HT202-71-details" aria-hidden="false" role="tabpanel" data-tab="details">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Details
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Frame:</strong> MahiMahi</p>
                    <p class="accordion-tabs__content-item"><strong>Lens:</strong> Maui HT™ - Highest usable light transmission for incredible depth perception.</p>
                    <p class="accordion-tabs__content-item"><strong>Lens Material:</strong> MauiPure - The lightest weight choice for long days in the sun.</p>
                    <p class="accordion-tabs__content-item"><strong>SKU:</strong> HT202-71</p>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-HT202-71-included" aria-hidden="true" role="tabpanel" data-tab="included">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Included
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/brown-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Brown case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/cleansing-cloth-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Cleaning cloth case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--protection-check">
  <use xlink:href="/assets/icons/icons.svg#protection-check"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Two year warranty</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--truck-delivery">
  <use xlink:href="/assets/icons/icons.svg#truck-delivery"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Free shipping &amp; returns</p>
                    </div>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-HT202-71-store-availability" aria-hidden="true" role="tabpanel" data-tab="store-availability">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Store Availability
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Check Store Availability</strong></p>
                    <p class="accordion-tabs__content-item">SPEX<br>1819 St Johns Ave, Highland Park, 60035, United States</p>
                    <p class="accordion-tabs__content-item"><strong>Available Now</strong></p>
                    <p class="accordion-tabs__content-item">
                        <a class="accordion-tabs__content-call-to-action" href="#">
          Choose a Store
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
                    </p>
                </div>
            </div>
        </div>
        <div class="accordion-tabs js-accordion-tabs product-description js-product-description js-hidden" data-product-id="H202-2M-2">
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" data-tab="product-description">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Description
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item">Pe&#x27;ahi (&#x27;peh-AH-hee&#x27;), on Maui&#x27;s north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.</p>
                </div>
            </div>
            <ul class="accordion-tabs__tabs">
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-2M-2-product-description" aria-selected="false" role="tab" data-tab="product-description">Description</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-2M-2-details" aria-selected="true" role="tab" data-tab="details">Details</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-2M-2-included" aria-selected="false" role="tab" data-tab="included">Included</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-2M-2-store-availability" aria-selected="false" role="tab" data-tab="store-availability">Store Availability</button>
                </li>
            </ul>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-H202-2M-2-details" aria-hidden="false" role="tabpanel" data-tab="details">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Details
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Frame:</strong> Matte Black</p>
                    <p class="accordion-tabs__content-item"><strong>Lens:</strong> HCL® Bronze - Versatile in changing conditions with a warm tint.</p>
                    <p class="accordion-tabs__content-item"><strong>Lens Material:</strong> SuperThin Glass - Perfect when clarity is your highest priority.</p>
                    <p class="accordion-tabs__content-item"><strong>SKU:</strong> H202-2M-2</p>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-H202-2M-2-included" aria-hidden="true" role="tabpanel" data-tab="included">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Included
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/brown-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Brown case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/cleansing-cloth-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Cleaning cloth case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--protection-check">
  <use xlink:href="/assets/icons/icons.svg#protection-check"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Two year warranty</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--truck-delivery">
  <use xlink:href="/assets/icons/icons.svg#truck-delivery"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Free shipping &amp; returns</p>
                    </div>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-H202-2M-2-store-availability" aria-hidden="true" role="tabpanel" data-tab="store-availability">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Store Availability
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Check Store Availability</strong></p>
                    <p class="accordion-tabs__content-item">SPEX<br>1819 St Johns Ave, Highland Park, 60035, United States</p>
                    <p class="accordion-tabs__content-item"><strong>Available Now</strong></p>
                    <p class="accordion-tabs__content-item">
                        <a class="accordion-tabs__content-call-to-action" href="#">
          Choose a Store
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
                    </p>
                </div>
            </div>
        </div>
        <div class="accordion-tabs js-accordion-tabs product-description js-product-description js-hidden" data-product-id="H202-70-2">
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" data-tab="product-description">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Description
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item">Pe&#x27;ahi (&#x27;peh-AH-hee&#x27;), on Maui&#x27;s north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.</p>
                </div>
            </div>
            <ul class="accordion-tabs__tabs">
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-70-2-product-description" aria-selected="false" role="tab" data-tab="product-description">Description</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-70-2-details" aria-selected="true" role="tab" data-tab="details">Details</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-70-2-included" aria-selected="false" role="tab" data-tab="included">Included</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-H202-70-2-store-availability" aria-selected="false" role="tab" data-tab="store-availability">Store Availability</button>
                </li>
            </ul>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-H202-70-2-details" aria-hidden="false" role="tabpanel" data-tab="details">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Details
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Frame:</strong> Redfish</p>
                    <p class="accordion-tabs__content-item"><strong>Lens:</strong> HCL® Bronze - Versatile in changing conditions with a warm tint.</p>
                    <p class="accordion-tabs__content-item"><strong>Lens Material:</strong> SuperThin Glass - Perfect when clarity is your highest priority.</p>
                    <p class="accordion-tabs__content-item"><strong>SKU:</strong> H202-70-2</p>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-H202-70-2-included" aria-hidden="true" role="tabpanel" data-tab="included">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Included
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/brown-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Brown case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/cleansing-cloth-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Cleaning cloth case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--protection-check">
  <use xlink:href="/assets/icons/icons.svg#protection-check"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Two year warranty</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--truck-delivery">
  <use xlink:href="/assets/icons/icons.svg#truck-delivery"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Free shipping &amp; returns</p>
                    </div>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-H202-70-2-store-availability" aria-hidden="true" role="tabpanel" data-tab="store-availability">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Store Availability
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Check Store Availability</strong></p>
                    <p class="accordion-tabs__content-item">SPEX<br>1819 St Johns Ave, Highland Park, 60035, United States</p>
                    <p class="accordion-tabs__content-item"><strong>Available Now</strong></p>
                    <p class="accordion-tabs__content-item">
                        <a class="accordion-tabs__content-call-to-action" href="#">
          Choose a Store
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
                    </p>
                </div>
            </div>
        </div>
        <div class="accordion-tabs js-accordion-tabs product-description js-product-description js-hidden" data-product-id="HT202-71-2">
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" data-tab="product-description">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Description
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item">Pe&#x27;ahi (&#x27;peh-AH-hee&#x27;), on Maui&#x27;s north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.</p>
                </div>
            </div>
            <ul class="accordion-tabs__tabs">
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-HT202-71-2-product-description" aria-selected="false" role="tab" data-tab="product-description">Description</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-HT202-71-2-details" aria-selected="true" role="tab" data-tab="details">Details</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-HT202-71-2-included" aria-selected="false" role="tab" data-tab="included">Included</button>
                </li>
                <li class="accordion-tabs__list-item">
                    <button class="accordion-tabs__tab js-accordion-tabs-tab" id="tab-HT202-71-2-store-availability" aria-selected="false" role="tab" data-tab="store-availability">Store Availability</button>
                </li>
            </ul>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-HT202-71-2-details" aria-hidden="false" role="tabpanel" data-tab="details">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Details
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Frame:</strong> MahiMahi</p>
                    <p class="accordion-tabs__content-item"><strong>Lens:</strong> Maui HT™ - Highest usable light transmission for incredible depth perception.</p>
                    <p class="accordion-tabs__content-item"><strong>Lens Material:</strong> MauiPure - The lightest weight choice for long days in the sun.</p>
                    <p class="accordion-tabs__content-item"><strong>SKU:</strong> HT202-71-2</p>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-HT202-71-2-included" aria-hidden="true" role="tabpanel" data-tab="included">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Included
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/brown-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Brown case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <img class="accordion-tabs__content-image" src="/assets/images/cleansing-cloth-case.png" alt="">
                        <p class="accordion-tabs__content-item-description">Cleaning cloth case</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--protection-check">
  <use xlink:href="/assets/icons/icons.svg#protection-check"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Two year warranty</p>
                    </div>
                    <div class="accordion-tabs__content-item accordion-tabs__content-item--image">
                        <svg class="icon icon--truck-delivery">
  <use xlink:href="/assets/icons/icons.svg#truck-delivery"></use>
</svg>

                        <p class="accordion-tabs__content-item-description">Free shipping &amp; returns</p>
                    </div>
                </div>
            </div>
            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-HT202-71-2-store-availability" aria-hidden="true" role="tabpanel" data-tab="store-availability">
                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Store Availability
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
                <div class="accordion-tabs__content">
                    <p class="accordion-tabs__content-item"><strong>Check Store Availability</strong></p>
                    <p class="accordion-tabs__content-item">SPEX<br>1819 St Johns Ave, Highland Park, 60035, United States</p>
                    <p class="accordion-tabs__content-item"><strong>Available Now</strong></p>
                    <p class="accordion-tabs__content-item">
                        <a class="accordion-tabs__content-call-to-action" href="#">
          Choose a Store
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
                    </p>
                </div>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--product-detail--default">
        Handle: <code>@product-detail--default</code>
        <div class="product-detail product-detail--default js-product-detail">
            <div class="product-detail__carousel-wrapper">
                <ul class="product-detail__carousel js-product-detail-carousel">
                    <li class="product-detail__carousel-item">
                        <img class="product-detail__carousel-image js-product-detail-carousel-image" data-frame="PEAHI" data-angle="front" alt="Gloss Black PEAHI front View" srcset="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;900 900w, https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;768 768w, https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;420 420w"
                            src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;900" sizes="100vw, (min-width: 920px) 900px" data-202-02="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;900"
                            alt="Matte Black PEAHI front View" data-B202-2M="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&amp;wid&#x3D;900" alt="Dark Tortoise PEAHI front View" data-H202-10="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;900"
                            alt="Matte Black PEAHI front View" data-H202-2M="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;900" alt="Redfish PEAHI front View" data-H202-70="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;900"
                            alt="MahiMahi PEAHI front View" data-HT202-71="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;900" alt="Matte Black PEAHI front View" data-H202-2M-2="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;900"
                            alt="Redfish PEAHI front View" data-H202-70-2="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;900" alt="MahiMahi PEAHI front View" data-HT202-71-2="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;900">
                    </li>
                    <li class="product-detail__carousel-item">
                        <img class="product-detail__carousel-image js-product-detail-carousel-image" data-frame="PEAHI" data-angle="angle" alt="Gloss Black PEAHI angle View" srcset="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;900 900w, https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;768 768w, https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;420 420w"
                            src="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;900" sizes="100vw, (min-width: 920px) 900px" data-202-02="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;900"
                            alt="Matte Black PEAHI angle View" data-B202-2M="https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$&amp;wid&#x3D;900" alt="Dark Tortoise PEAHI angle View" data-H202-10="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;900"
                            alt="Matte Black PEAHI angle View" data-H202-2M="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;900" alt="Redfish PEAHI angle View" data-H202-70="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;900"
                            alt="MahiMahi PEAHI angle View" data-HT202-71="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;900" alt="Matte Black PEAHI angle View" data-H202-2M-2="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;900"
                            alt="Redfish PEAHI angle View" data-H202-70-2="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;900" alt="MahiMahi PEAHI angle View" data-HT202-71-2="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;900">
                    </li>
                    <li class="product-detail__carousel-item">
                        <img class="product-detail__carousel-image js-product-detail-carousel-image" data-frame="PEAHI" data-angle="side" alt="Gloss Black PEAHI side View" srcset="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;900 900w, https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;768 768w, https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;420 420w"
                            src="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;900" sizes="100vw, (min-width: 920px) 900px" data-202-02="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;900"
                            alt="Matte Black PEAHI side View" data-B202-2M="https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$&amp;wid&#x3D;900" alt="Dark Tortoise PEAHI side View" data-H202-10="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;900"
                            alt="Matte Black PEAHI side View" data-H202-2M="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;900" alt="Redfish PEAHI side View" data-H202-70="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;900"
                            alt="MahiMahi PEAHI side View" data-HT202-71="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;900" alt="Matte Black PEAHI side View" data-H202-2M-2="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;900"
                            alt="Redfish PEAHI side View" data-H202-70-2="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;900" alt="MahiMahi PEAHI side View" data-HT202-71-2="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;900">
                    </li>
                    <li class="product-detail__carousel-item">
                        <div class="product-detail__carousel-video-outer">
                            <div class="product-detail__carousel-video-inner">
                                <div class="js-slide-video" data-video-id="ovvgXEYnY04"></div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="product-detail__carousel-controls js-product-detail-carousel-controls">
                    <button class="product-detail__carousel-control product-detail__carousel-control--prev">
        <span class="u-visually-hidden">Previous</span>
      </button>
                    <button class="product-detail__carousel-control product-detail__carousel-control--next">
        <span class="u-visually-hidden">Next</span>
      </button>
                </div>
            </div>
            <div class="product-detail__carousel-nav js-product-detail-carousel-nav">
                <button class="product-detail__carousel-nav-item">
      <span class="u-visually-hidden">0</span>
    </button>
                <button class="product-detail__carousel-nav-item">
      <span class="u-visually-hidden">1</span>
    </button>
                <button class="product-detail__carousel-nav-item">
      <span class="u-visually-hidden">2</span>
    </button>
                <button class="product-detail__carousel-nav-item">
      <span class="u-visually-hidden">3</span>
    </button>
            </div>
            <div class="product-detail__variant-wrapper js-product-detail-variant-wrapper">
                <h3 class="product-detail__variant-label js-product-detail-variant-label" data-current-name="Gloss Black">Gloss Black</h3>
                <ul class="product-detail__variants js-product-detail-variants js-product-detail-variants--active">
                    <li class="product-detail__variant js-product-detail-variant js-product-detail-variant--active" data-id="202-02" data-name="Gloss Black" data-prescription-available="true">
                        <button class="product-detail__variant-button" style="background-color:#000;">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;140" alt="Gloss Black">
        </button>
                    </li>
                    <li class="product-detail__variant js-product-detail-variant" data-id="B202-2M" data-name="Matte Black" data-prescription-available="true">
                        <button class="product-detail__variant-button" style="background-color:#000;">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&amp;wid&#x3D;140" alt="Matte Black">
        </button>
                    </li>
                    <li class="product-detail__variant js-product-detail-variant" data-id="H202-10" data-name="Dark Tortoise" data-prescription-available="true">
                        <button class="product-detail__variant-button" style="background-color:#303032;background-image:url(https://mauijim.scene7.com/is/image/mauijim/10);">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;140" alt="Dark Tortoise">
        </button>
                    </li>
                    <li class="product-detail__variant js-product-detail-variant" data-id="H202-2M" data-name="Matte Black" data-prescription-available="true">
                        <button class="product-detail__variant-button" style="background-color:#000;">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;140" alt="Matte Black">
        </button>
                    </li>
                    <li class="product-detail__variant js-product-detail-variant" data-id="H202-70" data-name="Redfish" data-prescription-available="true">
                        <button class="product-detail__variant-button" style="background-color:#7d4a07;">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;140" alt="Redfish">
        </button>
                    </li>
                    <li class="product-detail__variant js-product-detail-variant" data-id="HT202-71" data-name="MahiMahi" data-prescription-available="false">
                        <button class="product-detail__variant-button" style="background-color:#218b16;">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;140" alt="MahiMahi">
        </button>
                    </li>
                    <li class="product-detail__variant js-product-detail-variant" data-id="H202-2M-2" data-name="Matte Black" data-prescription-available="true">
                        <button class="product-detail__variant-button" style="background-color:#000;">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;140" alt="Matte Black">
        </button>
                    </li>
                    <li class="product-detail__variant js-product-detail-variant" data-id="H202-70-2" data-name="Redfish" data-prescription-available="true">
                        <button class="product-detail__variant-button" style="background-color:#7d4a07;">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;140" alt="Redfish">
        </button>
                    </li>
                    <li class="product-detail__variant js-product-detail-variant" data-id="HT202-71-2" data-name="MahiMahi" data-prescription-available="true">
                        <button class="product-detail__variant-button" style="background-color:#218b16;">
          <img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;140" alt="MahiMahi">
        </button>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--product-name--maui-jim">
        Handle: <code>@product-name--maui-jim</code>
        <div class="product-name">
            <h1 class="product-name__value">PEAHI</h1>
            <h2 class="product-name__summary">Polarized men&#x27;s classic sunglasses</h2>
            <a class="product-name__rx js-product-name-rx" href="#">
    Available in Prescription
  </a>
            <a class="product-name__rating-link" href="#">
                <ul class="product-name__rating">
                    <li class="product-name__rating-star product-name__rating-star--star-full">
                        <svg class="icon icon--star icon--star-full">
          <use xlink:href="/assets/icons/icons.svg#star-full"></use>
        </svg>
                    </li>
                    <li class="product-name__rating-star product-name__rating-star--star-full">
                        <svg class="icon icon--star icon--star-full">
          <use xlink:href="/assets/icons/icons.svg#star-full"></use>
        </svg>
                    </li>
                    <li class="product-name__rating-star product-name__rating-star--star-full">
                        <svg class="icon icon--star icon--star-full">
          <use xlink:href="/assets/icons/icons.svg#star-full"></use>
        </svg>
                    </li>
                    <li class="product-name__rating-star product-name__rating-star--star-full">
                        <svg class="icon icon--star icon--star-full">
          <use xlink:href="/assets/icons/icons.svg#star-full"></use>
        </svg>
                    </li>
                    <li class="product-name__rating-star product-name__rating-star--star-empty">
                        <svg class="icon icon--star icon--star-empty">
          <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
        </svg>
                    </li>
                </ul>
                <span class="product-name__rating-label" href="#">
      4.8 (12)
    </span>
                <span class="product-name__rating-review" href="#">
      Write a review
    </span>
            </a>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--product-price--maui-jim">
        Handle: <code>@product-price--maui-jim</code>
        <div class="product-price js-product-price" data-product-id="202-02">
            <div class="product-price__inner">
                <span class="product-price__value">$149.00</span>

                <div class="product-price__details">
                    <span class="product-price__tax">Inkl. MWST</span>
                    <span class="product-price__inventory">In Stock</span>
                </div>
            </div>
            <button class="button button--primary product-price__add-button">Add to Cart</button>

        </div>
        <div class="product-price js-product-price js-hidden" data-product-id="B202-2M">
            <div class="product-price__inner">
                <span class="product-price__value">$189.00</span>

                <div class="product-price__details">
                    <span class="product-price__tax">Inkl. MWST</span>
                    <span class="product-price__inventory">In Stock</span>
                </div>
            </div>
            <button class="button button--primary product-price__add-button">Add to Cart</button>

        </div>
        <div class="product-price js-product-price js-hidden" data-product-id="H202-10">
            <div class="product-price__inner">
                <span class="product-price__value">$229.00</span>

                <div class="product-price__details">
                    <span class="product-price__tax">Inkl. MWST</span>
                    <span class="product-price__inventory">In Stock</span>
                </div>
            </div>
            <button class="button button--primary product-price__add-button">Add to Cart</button>

        </div>
        <div class="product-price js-product-price js-hidden" data-product-id="H202-2M">
            <div class="product-price__inner">
                <span class="product-price__value">$229.00</span>

                <div class="product-price__details">
                    <span class="product-price__tax">Inkl. MWST</span>
                    <span class="product-price__inventory">In Stock</span>
                </div>
            </div>
            <button class="button button--primary product-price__add-button">Add to Cart</button>

        </div>
        <div class="product-price js-product-price js-hidden" data-product-id="H202-70">
            <div class="product-price__inner">
                <span class="product-price__value">$229.00</span>

                <div class="product-price__details">
                    <span class="product-price__tax">Inkl. MWST</span>
                    <span class="product-price__inventory">In Stock</span>
                </div>
            </div>
            <button class="button button--primary product-price__add-button">Add to Cart</button>

        </div>
        <div class="product-price js-product-price js-hidden" data-product-id="HT202-71">
            <div class="product-price__inner">
                <span class="product-price__value">$229.00</span>

                <div class="product-price__details">
                    <span class="product-price__tax">Inkl. MWST</span>
                    <span class="product-price__inventory">In Stock</span>
                </div>
            </div>
            <button class="button button--primary product-price__add-button">Add to Cart</button>

        </div>
        <div class="product-price js-product-price js-hidden" data-product-id="H202-2M-2">
            <div class="product-price__inner">
                <span class="product-price__value">$229.00</span>

                <div class="product-price__details">
                    <span class="product-price__tax">Inkl. MWST</span>
                    <span class="product-price__inventory">Out of Stock</span>
                </div>
            </div>
            <button class="button button--primary button--disabled product-price__add-button">Add to Cart</button>

        </div>
        <div class="product-price js-product-price js-hidden" data-product-id="H202-70-2">
            <div class="product-price__inner">
                <span class="product-price__value">$229.00</span>

                <div class="product-price__details">
                    <span class="product-price__tax">Inkl. MWST</span>
                    <span class="product-price__inventory">In Stock</span>
                </div>
            </div>
            <button class="button button--primary product-price__add-button">Add to Cart</button>

        </div>
        <div class="product-price js-product-price js-hidden" data-product-id="HT202-71-2">
            <div class="product-price__inner">
                <span class="product-price__value">$229.00</span>

                <div class="product-price__details">
                    <span class="product-price__tax">Inkl. MWST</span>
                    <span class="product-price__inventory">In Stock</span>
                </div>
            </div>
            <button class="button button--primary product-price__add-button">Add to Cart</button>

        </div>

    </div>
    <div class="l-collected-components l-collected-components--size-fit--maui-jim">
        Handle: <code>@size-fit--maui-jim</code>
        <div class="size-fit u-block u-page-width-max">
            <div class="size-fit__title-group">
                <h5 class="size-fit__title">Size and Fit</h5>

            </div>
            <div class="size-fit__side size-fit__side--front">
                <div class="size-fit__measurements">
                    <img class="size-fit__image size-fit__image--front" srcset="/assets/images/size-fit/classic-front.png 1x, /assets/images/size-fit/classic-front@2x.png 2x" src="/assets/images/size-fit/classic-front.png" alt="Front">
                    <div class="size-fit__measurement-group size-fit__measurement-group--front-upper">
                        <div class="size-fit__measurement size-fit__measurement--eye">
                            <span class="size-fit__measurement-label">Eye</span>
                            <span class="size-fit__measurement-value">51.0</span>
                        </div>
                        <div class="size-fit__measurement size-fit__measurement--bridge">
                            <span class="size-fit__measurement-label">Bridge</span>
                            <span class="size-fit__measurement-value">20.0</span>
                        </div>
                        <div class="size-fit__measurement size-fit__measurement--eye">
                            <span class="size-fit__measurement-label">Eye</span>
                            <span class="size-fit__measurement-value">51.0</span>
                        </div>
                    </div>
                    <div class="size-fit__measurement-group size-fit__measurement-group--front-height">
                        <div class="size-fit__measurement size-fit__measurement--height">
                            <span class="size-fit__measurement-label">Height</span>
                            <span class="size-fit__measurement-value">41.0</span>
                        </div>
                    </div>
                </div>
                <p class="size-fit__description"><strong>Shape:</strong> Refined rectangular shaped frame best complements oval or heart/triangle face shapes.</p>
                <p class="size-fit__description"><strong>Bridge:</strong> Saddle style bridge with adjustable rubber nose pads for added comfort.</p>
            </div>
            <div class="size-fit__side size-fit__side--above">
                <div class="size-fit__measurements">
                    <img class="size-fit__image size-fit__image--above" srcset="/assets/images/size-fit/classic-up.png 1x, /assets/images/size-fit/classic-up@2x.png 2x" src="/assets/images/size-fit/classic-up.png" alt="Above">
                    <div class="size-fit__measurement-group size-fit__measurement-group--above-base">
                        <div class="size-fit__measurement size-fit__measurement--base">
                            <span class="size-fit__measurement-label">Base Curve</span>
                            <span class="size-fit__measurement-value">6</span>
                        </div>
                    </div>
                </div>
                <p class="size-fit__description"><strong>Fit:</strong> (eye) 51, (bridge) 20, (temple) 146, 6-base curve</p>
                <p class="size-fit__description"><strong>Finishing Treatment:</strong> Three color options available in a high-gloss and matte finish.</p>
            </div>
            <div class="size-fit__side size-fit__side--side">
                <div class="size-fit__measurements">
                    <img class="size-fit__image size-fit__image--side" srcset="/assets/images/size-fit/classic-side.png 1x, /assets/images/size-fit/classic-side@2x.png 2x" src="/assets/images/size-fit/classic-side.png" alt="Side">
                    <div class="size-fit__measurement-group size-fit__measurement-group--side-temple">
                        <div class="size-fit__measurement size-fit__measurement--temple">
                            <span class="size-fit__measurement-label">Temple</span>
                            <span class="size-fit__measurement-value">146.0</span>
                        </div>
                    </div>
                </div>
                <p class="size-fit__description"><strong>Material:</strong> Lightweight, injected nylon frame designed for longer wear time.</p>
                <p class="size-fit__description"><strong>Hinge:</strong> Pin hinge.</p>
            </div>
        </div>

    </div>
</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,
  "pageCss": [
    "products"
  ],
  "components": [
    {
      "component": "paragraph",
      "context": {
        "value": "This page collects product components for snapshot testing.",
        "classes": [
          "u-text-center"
        ]
      }
    },
    {
      "component": "about-product--image"
    },
    {
      "component": "customize--mymaui",
      "modifiers": [
        "narrow"
      ]
    },
    {
      "component": "customize--rimless-shapes",
      "modifiers": [
        "narrow"
      ]
    },
    {
      "component": "customize--core-clip-on",
      "modifiers": [
        "narrow"
      ]
    },
    {
      "component": "features-showcase"
    },
    {
      "component": "filters--default"
    },
    {
      "component": "filters--eyeglasses"
    },
    {
      "component": "lens-detail--bluehawaii"
    },
    {
      "component": "product-controls"
    },
    {
      "component": "product-description--maui-jim"
    },
    {
      "component": "product-detail--default"
    },
    {
      "component": "product-name--maui-jim"
    },
    {
      "component": "product-price--maui-jim"
    },
    {
      "component": "size-fit--maui-jim"
    }
  ]
}
  • 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.