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

    </div>
    <div class="l-collected-components l-collected-components--big-card--image-right">
        Handle: <code>@big-card--image-right</code>
        <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">New Arrivals</span>
                    <h2 class="big-card__headline">Created on the Hawaiian Islands.</h2>
                    <button class="big-card__call-to-action button button--outlined" tabindex="-1">View new arrivals</button>
                </div>
            </a>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--big-card--image-left">
        Handle: <code>@big-card--image-left</code>
        <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">New Arrivals</span>
                    <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                    <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                    <button class="big-card__call-to-action button button--outlined" tabindex="-1">View</button>
                </div>
            </a>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--big-card--image-right-landscape">
        Handle: <code>@big-card--image-right-landscape</code>
        <div class="big-card big-card--image-right-landscape u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-landscape-right-large.jpg" sizes="(min-width: 681px) 66vw, 100vw" srcset="/assets/images/big-card-landscape-right-small.jpg 400w, /assets/images/big-card-landscape-right-medium.jpg 710w, /assets/images/big-card-landscape-right-large.jpg 947w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">New Arrivals</span>
                    <h2 class="big-card__headline">Blue Hawaii</h2>
                    <button class="big-card__call-to-action button button--outlined" tabindex="-1">Learn More</button>
                </div>
            </a>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--big-card--image-left-landscape">
        Handle: <code>@big-card--image-left-landscape</code>
        <div class="big-card big-card--image-left-landscape u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-landscape-left-large.jpg" sizes="(min-width: 681px) 66vw, 100vw" srcset="/assets/images/big-card-landscape-left-small.jpg 400w, /assets/images/big-card-landscape-left-medium.jpg 710w, /assets/images/big-card-landscape-left-large.jpg 947w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">Monstera Leaf</span>
                    <h2 class="big-card__headline">Indulge in 24K Luxury</h2>
                    <button class="big-card__call-to-action button button--outlined" tabindex="-1">Learn More</button>
                </div>
            </a>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--big-card--image-right-landscape-text">
        Handle: <code>@big-card--image-right-landscape-text</code>
        <div class="big-card big-card--image-right-landscape u-block u-page-width-max-gutters">
            <div class="big-card__image-container">
                <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-landscape-right-large.jpg" sizes="(min-width: 681px) 66vw, 100vw" srcset="/assets/images/big-card-landscape-right-small.jpg 400w, /assets/images/big-card-landscape-right-medium.jpg 710w, /assets/images/big-card-landscape-right-large.jpg 947w">
            </div>
            <div class="big-card__text">
                <span class="big-card__prefix">New Arrivals</span>
                <h2 class="big-card__headline">Blue Hawaii</h2>
                <p class="big-card__description">A blue mirror coating is applied to the outside surface of our PolarizedPlus2® Neutral Grey lens wich eliminates glare, protects from harmful UV rays, and enhances color.</p>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--big-card--image-left-landscape-text">
        Handle: <code>@big-card--image-left-landscape-text</code>
        <div class="big-card big-card--image-left-landscape u-block u-page-width-max-gutters">
            <div class="big-card__image-container">
                <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-landscape-left-large.jpg" sizes="(min-width: 681px) 66vw, 100vw" srcset="/assets/images/big-card-landscape-left-small.jpg 400w, /assets/images/big-card-landscape-left-medium.jpg 710w, /assets/images/big-card-landscape-left-large.jpg 947w">
            </div>
            <div class="big-card__text">
                <span class="big-card__prefix">Monstera Leaf</span>
                <h2 class="big-card__headline">Indulge in 24K Luxury</h2>
                <p class="big-card__description">Blue Hawaii features a patented blend of elements that increase and balance the saturation of the colors you can see.</p>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--breadcrumb">
        Handle: <code>@breadcrumb</code>
        <ul class="breadcrumb u-page-width-max-gutters js-breadcrumb">
            <li class="breadcrumb__item">
                <a class="breadcrumb__link" href="#">Maui Jim</a>
            </li>
            <li class="breadcrumb__item">
                <a class="breadcrumb__link" href="#">Sunglasses</a>
            </li>
            <li class="breadcrumb__item breadcrumb__item--current">
                Classic
            </li>
        </ul>

    </div>
    <div class="l-collected-components l-collected-components--call-to-action--mymaui">
        Handle: <code>@call-to-action--mymaui</code>
        <div class="call-to-action call-to-action--mymaui">
            <span class="call-to-action__label">Customize your Maui Jim</span>
            <a class="call-to-action__button button button--outlined" href="#">
    MyMaui
    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

  </a>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--call-to-action--home-try-on">
        Handle: <code>@call-to-action--home-try-on</code>
        <div class="call-to-action call-to-action--home-try-on">
            <span class="call-to-action__label">Do you wanna try at home for free?</span>
            <a class="call-to-action__button button button--outlined" href="#">
    Add to Home Try-on
  </a>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--call-to-action--try-in-store">
        Handle: <code>@call-to-action--try-in-store</code>
        <div class="call-to-action call-to-action--try-in-store">
            <span class="call-to-action__label">Hold online. Try in the store.</span>
            <a class="call-to-action__button button button--outlined js-modal-open-link" href="#" data-modal-id="reserve-in-store">
    Reserve Now
  </a>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--call-to-action--find-an-optician">
        Handle: <code>@call-to-action--find-an-optician</code>
        <div class="call-to-action call-to-action--find-an-optician">
            <span class="call-to-action__label">Ready to buy?</span>
            <a class="call-to-action__button button button--primary" href="#">
    Find an Optician
  </a>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--call-to-action--print">
        Handle: <code>@call-to-action--print</code>
        <div class="call-to-action call-to-action--print">
            <span class="call-to-action__label">Bring this to your optician</span>
            <a class="call-to-action__button button button--outlined" href="#">
    Print
  </a>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--card--maui-jim">
        Handle: <code>@card--maui-jim</code>
        <div class="card js-card" aria-label="PEAHI">
            <div class="card__inner">
                <a class="card__link js-card-url" href="#202-02" aria-label="View Gloss Black product page" data-202-02-url="#202-02" data-B202-2M-url="#B202-2M" data-H202-10-url="#H202-10" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71"
                    data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-202-02-stock="true" data-B202-2M-stock="true" data-H202-10-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true" data-HT202-71-stock="true"
                    data-H202-2M-2-stock="true" data-H202-70-2-stock="true" data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340" data-variant="202-02" alt="Gloss Black PEAHI Front View" data-style="PEAHI" data-color="Gloss Black" 
             data-202-02-front="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340"  data-202-02-angle="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;340"  data-202-02-side="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-B202-2M-front="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&amp;wid&#x3D;340"  data-B202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-B202-2M-side="https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-10-front="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;340"  data-H202-10-angle="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-10-side="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
          >
      <span class="card__status js-card-status" data-202-02-status="New" data-B202-2M-status="" data-H202-10-status="" data-H202-2M-status="New" data-H202-70-status="" data-HT202-71-status="New" data-H202-2M-2-status="New" data-H202-70-2-status="New" data-HT202-71-2-status="New">
          New
          
          
          
          
          
          
          
          
      </span>
      <p class="card__title">PEAHI</p>
      <span class="card__price js-card-price" data-202-02-price="$149.00" data-B202-2M-price="$189.00" data-H202-10-price="$229.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
        $149.00
      </span>
    </a>
                <div class="card__variants-wrapper">
                    <ul class="card__variants js-card-variants">
                        <li class="card__variant js-card-variant js-card-variant--active" data-id="202-02">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Gloss Black</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="B202-2M">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-10">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#303032;background-image:url(https://mauijim.scene7.com/is/image/mauijim/10);" type="button">Dark Tortoise</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-2M">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-70">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#7d4a07;" type="button">Redfish</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="HT202-71">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#218b16;" type="button">MahiMahi</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-2M-2">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-70-2">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#7d4a07;" type="button">Redfish</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="HT202-71-2">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#218b16;" type="button">MahiMahi</button>
                        </li>
                    </ul>
                    <div class="card__variants-controls js-card-variants-controls">
                        <button class="card__variants-control card__variants-control--prev" type="button">
          <span class="u-visually-hidden">Previous</span>
          <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

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

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

    </div>
    <div class="l-collected-components l-collected-components--card--call-to-action">
        Handle: <code>@card--call-to-action</code>
        <div class="card js-card" aria-label="PEAHI">
            <div class="card__inner">
                <a class="card__link js-card-url" href="#202-02" aria-label="View Gloss Black product page" data-202-02-url="#202-02" data-B202-2M-url="#B202-2M" data-H202-10-url="#H202-10" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71"
                    data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-202-02-stock="true" data-B202-2M-stock="true" data-H202-10-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true" data-HT202-71-stock="true"
                    data-H202-2M-2-stock="true" data-H202-70-2-stock="true" data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340" data-variant="202-02" alt="Gloss Black PEAHI Front View" data-style="PEAHI" data-color="Gloss Black" 
             data-202-02-front="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340"  data-202-02-angle="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;340"  data-202-02-side="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-B202-2M-front="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&amp;wid&#x3D;340"  data-B202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-B202-2M-side="https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-10-front="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;340"  data-H202-10-angle="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-10-side="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
          >
      <span class="card__status js-card-status" data-202-02-status="" data-B202-2M-status="" data-H202-10-status="New" data-H202-2M-status="" data-H202-70-status="" data-HT202-71-status="New" data-H202-2M-2-status="New" data-H202-70-2-status="" data-HT202-71-2-status="">
          
          
          
          
          
          
          
          
          
      </span>
      <p class="card__title">PEAHI</p>
      <span class="card__price js-card-price" data-202-02-price="$149.00" data-B202-2M-price="$189.00" data-H202-10-price="$229.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
        $149.00
      </span>
    </a>
                <div class="card__variants-wrapper">
                    <ul class="card__variants js-card-variants">
                        <li class="card__variant js-card-variant js-card-variant--active" data-id="202-02">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Gloss Black</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="B202-2M">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-10">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#303032;background-image:url(https://mauijim.scene7.com/is/image/mauijim/10);" type="button">Dark Tortoise</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-2M">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-70">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#7d4a07;" type="button">Redfish</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="HT202-71">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#218b16;" type="button">MahiMahi</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-2M-2">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-70-2">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#7d4a07;" type="button">Redfish</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="HT202-71-2">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#218b16;" type="button">MahiMahi</button>
                        </li>
                    </ul>
                    <div class="card__variants-controls js-card-variants-controls">
                        <button class="card__variants-control card__variants-control--prev" type="button">
          <span class="u-visually-hidden">Previous</span>
          <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

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

        </button>
                    </div>
                </div>
                <a class="card__call-to-action-button button button--primary" href="#">Add to Cart</a>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--card--tax-information">
        Handle: <code>@card--tax-information</code>
        <div class="card js-card" aria-label="PEAHI">
            <div class="card__inner">
                <a class="card__link js-card-url" href="#202-02" aria-label="View Gloss Black product page" data-202-02-url="#202-02" data-B202-2M-url="#B202-2M" data-H202-10-url="#H202-10" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71"
                    data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-202-02-stock="true" data-B202-2M-stock="true" data-H202-10-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true" data-HT202-71-stock="true"
                    data-H202-2M-2-stock="true" data-H202-70-2-stock="true" data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340" data-variant="202-02" alt="Gloss Black PEAHI Front View" data-style="PEAHI" data-color="Gloss Black" 
             data-202-02-front="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340"  data-202-02-angle="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;340"  data-202-02-side="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-B202-2M-front="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&amp;wid&#x3D;340"  data-B202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-B202-2M-side="https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-10-front="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;340"  data-H202-10-angle="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-10-side="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
          >
      <span class="card__status js-card-status" data-202-02-status="" data-B202-2M-status="" data-H202-10-status="New" data-H202-2M-status="" data-H202-70-status="New" data-HT202-71-status="New" data-H202-2M-2-status="" data-H202-70-2-status="" data-HT202-71-2-status="New">
          
          
          
          
          
          
          
          
          
      </span>
      <p class="card__title">PEAHI</p>
      <span class="card__price js-card-price" data-202-02-price="$149.00" data-B202-2M-price="$189.00" data-H202-10-price="$229.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
        $149.00
      </span>
      <span class="card__tax">
        Inkl. MWST
      </span>
    </a>
                <div class="card__variants-wrapper">
                    <ul class="card__variants js-card-variants">
                        <li class="card__variant js-card-variant js-card-variant--active" data-id="202-02">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Gloss Black</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="B202-2M">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-10">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#303032;background-image:url(https://mauijim.scene7.com/is/image/mauijim/10);" type="button">Dark Tortoise</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-2M">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-70">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#7d4a07;" type="button">Redfish</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="HT202-71">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#218b16;" type="button">MahiMahi</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-2M-2">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-70-2">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#7d4a07;" type="button">Redfish</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="HT202-71-2">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#218b16;" type="button">MahiMahi</button>
                        </li>
                    </ul>
                    <div class="card__variants-controls js-card-variants-controls">
                        <button class="card__variants-control card__variants-control--prev" type="button">
          <span class="u-visually-hidden">Previous</span>
          <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

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

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

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

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

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

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

    </div>
    <div class="l-collected-components l-collected-components--card--confirmed-style">
        Handle: <code>@card--confirmed-style</code>
        <div class="card js-card card--confirmed-style" aria-label="PEAHI">
            <div class="card__inner">
                <a class="card__link js-card-url" href="#202-02" aria-label="View Gloss Black product page" data-202-02-url="#202-02" data-202-02-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340" data-variant="202-02" alt="Gloss Black PEAHI Front View" data-style="PEAHI" data-color="Gloss Black" 
             data-202-02-front="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340"  data-202-02-angle="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;340"  data-202-02-side="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;340" 
          >
      <p class="card__title">PEAHI</p>
      <span class="card__price js-card-price" data-202-02-price="$149.00">
        $149.00
      </span>
      <span class="card__variant-name js-card-variant-name" data-202-02-variant-name="Gloss Black">
        Gloss Black
      </span>
    </a>
                <div class="card__variants-wrapper">
                    <ul class="card__variants js-card-variants">
                        <li class="card__variant js-card-variant js-card-variant--active" data-id="202-02">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Gloss Black</button>
                        </li>
                    </ul>
                    <div class="card__variants-controls js-card-variants-controls">
                        <button class="card__variants-control card__variants-control--prev" type="button">
          <span class="u-visually-hidden">Previous</span>
          <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

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

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

    </div>
    <div class="l-collected-components l-collected-components--featured-products--maui-jim">
        Handle: <code>@featured-products--maui-jim</code>
        <div class="featured-products u-block u-page-width-max-gutters">
            <h2 class="featured-products__title">Featured Products</h2>
            <div class="featured-products__item-wrapper">
                <div class="featured-products__items js-featured-products-carousel cards cards--even">
                    <div class="card js-card" aria-label="PEAHI">
                        <div class="card__inner">
                            <a class="card__link js-card-url" href="#202-02" aria-label="View Gloss Black product page" data-202-02-url="#202-02" data-B202-2M-url="#B202-2M" data-H202-10-url="#H202-10" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71"
                                data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-202-02-stock="true" data-B202-2M-stock="true" data-H202-10-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true"
                                data-HT202-71-stock="true" data-H202-2M-2-stock="true" data-H202-70-2-stock="true" data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340" data-variant="202-02" alt="Gloss Black PEAHI Front View" data-style="PEAHI" data-color="Gloss Black" 
             data-202-02-front="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340"  data-202-02-angle="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;340"  data-202-02-side="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-B202-2M-front="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&amp;wid&#x3D;340"  data-B202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-B202-2M-side="https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-10-front="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;340"  data-H202-10-angle="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-10-side="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
          >
      <span class="card__status js-card-status" data-202-02-status="" data-B202-2M-status="New" data-H202-10-status="" data-H202-2M-status="New" data-H202-70-status="" data-HT202-71-status="" data-H202-2M-2-status="" data-H202-70-2-status="New" data-HT202-71-2-status="">
          
          
          
          
          
          
          
          
          
      </span>
      <p class="card__title">PEAHI</p>
      <span class="card__price js-card-price" data-202-02-price="$149.00" data-B202-2M-price="$189.00" data-H202-10-price="$229.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
        $149.00
      </span>
    </a>
                        </div>
                    </div>

                    <div class="card js-card" aria-label="WATERWAYS">
                        <div class="card__inner">
                            <a class="card__link js-card-url" href="#HTS267-15C" aria-label="View Olive Stripe product page" data-HTS267-15C-url="#HTS267-15C" data-HS267-10M-url="#HS267-10M" data-GS267-02MR-url="#GS267-02MR" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70"
                                data-HT202-71-url="#HT202-71" data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-HTS267-15C-stock="true" data-HS267-10M-stock="true" data-GS267-02MR-stock="true" data-H202-2M-stock="true"
                                data-H202-70-stock="true" data-HT202-71-stock="true" data-H202-2M-2-stock="true" data-H202-70-2-stock="true" data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;340" data-variant="HTS267-15C" alt="Olive Stripe WATERWAYS Front View" data-style="WATERWAYS" data-color="Olive Stripe" 
             data-HTS267-15C-front="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;340"  data-HTS267-15C-angle="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_quarter?$config1800$&amp;wid&#x3D;340"  data-HTS267-15C-side="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HS267-10M-front="https://s7d2.scene7.com/is/image/mauijim/HS267-10M_front?$config1800$&amp;wid&#x3D;340"  data-HS267-10M-angle="https://s7d2.scene7.com/is/image/mauijim/HS267-10M_quarter?$config1800$&amp;wid&#x3D;340"  data-HS267-10M-side="https://s7d2.scene7.com/is/image/mauijim/HS267-10M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-GS267-02MR-front="https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_front?$config1800$&amp;wid&#x3D;340"  data-GS267-02MR-angle="https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_quarter?$config1800$&amp;wid&#x3D;340"  data-GS267-02MR-side="https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
          >
      <span class="card__status js-card-status" data-HTS267-15C-status="" data-HS267-10M-status="New" data-GS267-02MR-status="New" data-H202-2M-status="New" data-H202-70-status="" data-HT202-71-status="New" data-H202-2M-2-status="New" data-H202-70-2-status="New" data-HT202-71-2-status="New">
          
          
          
          
          
          
          
          
          
      </span>
      <p class="card__title">WATERWAYS</p>
      <span class="card__price js-card-price" data-HTS267-15C-price="$219.00" data-HS267-10M-price="$229.00" data-GS267-02MR-price="$239.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
        $219.00
      </span>
    </a>
                        </div>
                    </div>

                    <div class="card js-card" aria-label="KAWIKA">
                        <div class="card__inner">
                            <a class="card__link js-card-url" href="#H257-16C" aria-label="View Tortoise with Antique Gold product page" data-H257-16C-url="#H257-16C" data-B257-05CR-url="#B257-05CR" data-257-17C-url="#257-17C" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70"
                                data-HT202-71-url="#HT202-71" data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-H257-16C-stock="true" data-B257-05CR-stock="true" data-257-17C-stock="true" data-H202-2M-stock="true"
                                data-H202-70-stock="true" data-HT202-71-stock="true" data-H202-2M-2-stock="true" data-H202-70-2-stock="true" data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;340" data-variant="H257-16C" alt="Tortoise with Antique Gold KAWIKA Front View" data-style="KAWIKA" data-color="Tortoise with Antique Gold" 
             data-H257-16C-front="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;340"  data-H257-16C-angle="https://s7d2.scene7.com/is/image/mauijim/H257-16C_quarter?$config1800$&amp;wid&#x3D;340"  data-H257-16C-side="https://s7d2.scene7.com/is/image/mauijim/H257-16C_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-B257-05CR-front="https://s7d2.scene7.com/is/image/mauijim/B257-05CR_front?$config1800$&amp;wid&#x3D;340"  data-B257-05CR-angle="https://s7d2.scene7.com/is/image/mauijim/B257-05CR_quarter?$config1800$&amp;wid&#x3D;340"  data-B257-05CR-side="https://s7d2.scene7.com/is/image/mauijim/B257-05CR_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-257-17C-front="https://s7d2.scene7.com/is/image/mauijim/257-17C_front?$config1800$&amp;wid&#x3D;340"  data-257-17C-angle="https://s7d2.scene7.com/is/image/mauijim/257-17C_quarter?$config1800$&amp;wid&#x3D;340"  data-257-17C-side="https://s7d2.scene7.com/is/image/mauijim/257-17C_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
          >
      <span class="card__status js-card-status" data-H257-16C-status="" data-B257-05CR-status="New" data-257-17C-status="" data-H202-2M-status="New" data-H202-70-status="" data-HT202-71-status="New" data-H202-2M-2-status="New" data-H202-70-2-status="New" data-HT202-71-2-status="New">
          
          
          
          
          
          
          
          
          
      </span>
      <p class="card__title">KAWIKA</p>
      <span class="card__price js-card-price" data-H257-16C-price="$299.00" data-B257-05CR-price="$299.00" data-257-17C-price="$299.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
        $299.00
      </span>
    </a>
                        </div>
                    </div>

                    <div class="card js-card" aria-label="VOYAGER">
                        <div class="card__inner">
                            <a class="card__link js-card-url" href="#H178-10" aria-label="View Tortoise product page" data-H178-10-url="#H178-10" data-178-02-url="#178-02" data-H202-10-url="#H202-10" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71"
                                data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-H178-10-stock="true" data-178-02-stock="true" data-H202-10-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true"
                                data-HT202-71-stock="true" data-H202-2M-2-stock="true" data-H202-70-2-stock="true" data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;340" data-variant="H178-10" alt="Tortoise VOYAGER Front View" data-style="VOYAGER" data-color="Tortoise" 
             data-H178-10-front="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;340"  data-H178-10-angle="https://s7d2.scene7.com/is/image/mauijim/H178-10_quarter?$config1800$&amp;wid&#x3D;340"  data-H178-10-side="https://s7d2.scene7.com/is/image/mauijim/H178-10_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-178-02-front="https://s7d2.scene7.com/is/image/mauijim/178-02_front?$config1800$&amp;wid&#x3D;340"  data-178-02-angle="https://s7d2.scene7.com/is/image/mauijim/178-02_quarter?$config1800$&amp;wid&#x3D;340"  data-178-02-side="https://s7d2.scene7.com/is/image/mauijim/178-02_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-10-front="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;340"  data-H202-10-angle="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-10-side="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
          >
      <span class="card__status js-card-status" data-H178-10-status="" data-178-02-status="" data-H202-10-status="" data-H202-2M-status="New" data-H202-70-status="" data-HT202-71-status="New" data-H202-2M-2-status="New" data-H202-70-2-status="New" data-HT202-71-2-status="New">
          
          
          
          
          
          
          
          
          
      </span>
      <p class="card__title">VOYAGER</p>
      <span class="card__price js-card-price" data-H178-10-price="$219.00" data-178-02-price="$219.00" data-H202-10-price="$229.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
        $219.00
      </span>
    </a>
                        </div>
                    </div>

                    <div class="card js-card" aria-label="LEIA">
                        <div class="card__inner">
                            <a class="card__link js-card-url" href="#RS708-26D" aria-label="View Brown Feathered product page" data-RS708-26D-url="#RS708-26D" data-HS708-10L-url="#HS708-10L" data-GS708-03D-url="#GS708-03D" data-B708-02-url="#B708-02" data-H202-70-url="#H202-70"
                                data-HT202-71-url="#HT202-71" data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-RS708-26D-stock="true" data-HS708-10L-stock="true" data-GS708-03D-stock="true" data-B708-02-stock="true"
                                data-H202-70-stock="true" data-HT202-71-stock="true" data-H202-2M-2-stock="true" data-H202-70-2-stock="true" data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$&amp;wid&#x3D;340" data-variant="RS708-26D" alt="Brown Feathered LEIA Front View" data-style="LEIA" data-color="Brown Feathered" 
             data-RS708-26D-front="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$&amp;wid&#x3D;340"  data-RS708-26D-angle="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_quarter?$config1800$&amp;wid&#x3D;340"  data-RS708-26D-side="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HS708-10L-front="https://s7d2.scene7.com/is/image/mauijim/HS708-10L_front?$config1800$&amp;wid&#x3D;340"  data-HS708-10L-angle="https://s7d2.scene7.com/is/image/mauijim/HS708-10L_quarter?$config1800$&amp;wid&#x3D;340"  data-HS708-10L-side="https://s7d2.scene7.com/is/image/mauijim/HS708-10L_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-GS708-03D-front="https://s7d2.scene7.com/is/image/mauijim/GS708-03D_front?$config1800$&amp;wid&#x3D;340"  data-GS708-03D-angle="https://s7d2.scene7.com/is/image/mauijim/GS708-03D_quarter?$config1800$&amp;wid&#x3D;340"  data-GS708-03D-side="https://s7d2.scene7.com/is/image/mauijim/GS708-03D_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-B708-02-front="https://s7d2.scene7.com/is/image/mauijim/B708-02_front?$config1800$&amp;wid&#x3D;340"  data-B708-02-angle="https://s7d2.scene7.com/is/image/mauijim/B708-02_quarter?$config1800$&amp;wid&#x3D;340"  data-B708-02-side="https://s7d2.scene7.com/is/image/mauijim/B708-02_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
          >
      <span class="card__status js-card-status" data-RS708-26D-status="" data-HS708-10L-status="New" data-GS708-03D-status="New" data-B708-02-status="" data-H202-70-status="" data-HT202-71-status="New" data-H202-2M-2-status="New" data-H202-70-2-status="New" data-HT202-71-2-status="New">
          
          
          
          
          
          
          
          
          
      </span>
      <p class="card__title">LEIA</p>
      <span class="card__price js-card-price" data-RS708-26D-price="$299.00" data-HS708-10L-price="$299.00" data-GS708-03D-price="$299.00" data-B708-02-price="$299.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
        $299.00
      </span>
    </a>
                        </div>
                    </div>

                    <div class="card js-card" aria-label="KOHALA">
                        <div class="card__inner">
                            <a class="card__link js-card-url" href="#H711-18" aria-label="View Copper product page" data-H711-18-url="#H711-18" data-711-02D-url="#711-02D" data-H202-10-url="#H202-10" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71"
                                data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-H711-18-stock="true" data-711-02D-stock="true" data-H202-10-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true"
                                data-HT202-71-stock="true" data-H202-2M-2-stock="true" data-H202-70-2-stock="true" data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://s7d2.scene7.com/is/image/mauijim/H711-18_front?$config1800$&amp;wid&#x3D;340" data-variant="H711-18" alt="Copper KOHALA Front View" data-style="KOHALA" data-color="Copper" 
             data-H711-18-front="https://s7d2.scene7.com/is/image/mauijim/H711-18_front?$config1800$&amp;wid&#x3D;340"  data-H711-18-angle="https://s7d2.scene7.com/is/image/mauijim/H711-18_quarter?$config1800$&amp;wid&#x3D;340"  data-H711-18-side="https://s7d2.scene7.com/is/image/mauijim/H711-18_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-711-02D-front="https://s7d2.scene7.com/is/image/mauijim/711-02D_front?$config1800$&amp;wid&#x3D;340"  data-711-02D-angle="https://s7d2.scene7.com/is/image/mauijim/711-02D_quarter?$config1800$&amp;wid&#x3D;340"  data-711-02D-side="https://s7d2.scene7.com/is/image/mauijim/711-02D_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-10-front="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;340"  data-H202-10-angle="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-10-side="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
          >
      <span class="card__status js-card-status" data-H711-18-status="" data-711-02D-status="New" data-H202-10-status="" data-H202-2M-status="New" data-H202-70-status="" data-HT202-71-status="New" data-H202-2M-2-status="New" data-H202-70-2-status="New" data-HT202-71-2-status="New">
          
          
          
          
          
          
          
          
          
      </span>
      <p class="card__title">KOHALA</p>
      <span class="card__price js-card-price" data-H711-18-price="$279.00" data-711-02D-price="$279.00" data-H202-10-price="$229.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
        $279.00
      </span>
    </a>
                        </div>
                    </div>

                    <div class="card js-card" aria-label="STILLWATER">
                        <div class="card__inner">
                            <a class="card__link js-card-url" href="#H706-16C" aria-label="View Antique Gold product page" data-H706-16C-url="#H706-16C" data-706-17C-url="#706-17C" data-H202-10-url="#H202-10" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71"
                                data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-H706-16C-stock="true" data-706-17C-stock="true" data-H202-10-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true"
                                data-HT202-71-stock="true" data-H202-2M-2-stock="true" data-H202-70-2-stock="true" data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://s7d2.scene7.com/is/image/mauijim/H706-16C_front?$config1800$&amp;wid&#x3D;340" data-variant="H706-16C" alt="Antique Gold STILLWATER Front View" data-style="STILLWATER" data-color="Antique Gold" 
             data-H706-16C-front="https://s7d2.scene7.com/is/image/mauijim/H706-16C_front?$config1800$&amp;wid&#x3D;340"  data-H706-16C-angle="https://s7d2.scene7.com/is/image/mauijim/H706-16C_quarter?$config1800$&amp;wid&#x3D;340"  data-H706-16C-side="https://s7d2.scene7.com/is/image/mauijim/H706-16C_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-706-17C-front="https://s7d2.scene7.com/is/image/mauijim/706-17C_front?$config1800$&amp;wid&#x3D;340"  data-706-17C-angle="https://s7d2.scene7.com/is/image/mauijim/706-17C_quarter?$config1800$&amp;wid&#x3D;340"  data-706-17C-side="https://s7d2.scene7.com/is/image/mauijim/706-17C_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-10-front="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;340"  data-H202-10-angle="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-10-side="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
          >
      <span class="card__status js-card-status" data-H706-16C-status="" data-706-17C-status="" data-H202-10-status="" data-H202-2M-status="New" data-H202-70-status="" data-HT202-71-status="New" data-H202-2M-2-status="New" data-H202-70-2-status="New" data-HT202-71-2-status="New">
          
          
          
          
          
          
          
          
          
      </span>
      <p class="card__title">STILLWATER</p>
      <span class="card__price js-card-price" data-H706-16C-price="$329.00" data-706-17C-price="$329.00" data-H202-10-price="$229.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
        $329.00
      </span>
    </a>
                        </div>
                    </div>

                    <div class="card js-card" aria-label="BORN AND RAISED BAMBOO SHORT SLEEVE">
                        <div class="card__inner">
                            <a class="card__link js-card-url" href="#H712-18" aria-label="View Copper product page" data-H712-18-url="#H712-18" data-712-02D-url="#712-02D" data-H202-10-url="#H202-10" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71"
                                data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-H712-18-stock="true" data-712-02D-stock="true" data-H202-10-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true"
                                data-HT202-71-stock="true" data-H202-2M-2-stock="true" data-H202-70-2-stock="true" data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="/assets/images/t-shirt.png" data-variant="H712-18" alt="Copper BORN AND RAISED BAMBOO SHORT SLEEVE Front View" data-style="BORN AND RAISED BAMBOO SHORT SLEEVE" data-color="Copper" 
             data-H712-18-front="/assets/images/t-shirt.png"  data-H712-18-angle="/assets/images/t-shirt.png"  data-H712-18-side="/assets/images/t-shirt.png" 
                      
             data-712-02D-front="https://s7d2.scene7.com/is/image/mauijim/712-02D_front?$config1800$&amp;wid&#x3D;340"  data-712-02D-angle="https://s7d2.scene7.com/is/image/mauijim/712-02D_quarter?$config1800$&amp;wid&#x3D;340"  data-712-02D-side="https://s7d2.scene7.com/is/image/mauijim/712-02D_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-10-front="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;340"  data-H202-10-angle="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-10-side="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340"  data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" 
                      
             data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340"  data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" 
          >
      <span class="card__status js-card-status" data-H712-18-status="New" data-712-02D-status="" data-H202-10-status="" data-H202-2M-status="New" data-H202-70-status="" data-HT202-71-status="New" data-H202-2M-2-status="New" data-H202-70-2-status="New" data-HT202-71-2-status="New">
          New
          
          
          
          
          
          
          
          
      </span>
      <p class="card__title">BORN AND RAISED BAMBOO SHORT SLEEVE</p>
      <span class="card__price js-card-price" data-H712-18-price="$279.00" data-712-02D-price="$279.00" data-H202-10-price="$229.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
        $279.00
      </span>
    </a>
                        </div>
                    </div>

                </div>
                <div class="featured-products__item-controls js-featured-products-controls">
                    <button class="featured-products__item-control featured-products__item-control--prev">
        <span class="u-visually-hidden">Previous</span>
        <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

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

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

    </div>
    <div class="l-collected-components l-collected-components--landing-hero--maui-jim">
        Handle: <code>@landing-hero--maui-jim</code>
        <div class="landing-hero u-page-width-max-gutters">
            <img class="landing-hero__image u-object-fit-cover" src="/assets/images/hero-plp-large.jpg" sizes="(min-width: 1440px) 1420px, (min-width: 769px) calc(100vw - 20px), 100vw" srcset="/assets/images/hero-plp-small.jpg 900w, /assets/images/hero-plp-large.jpg 1420w">
            <h1 class="landing-hero__title">Classic</h1>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--multi-image-hero">
        Handle: <code>@multi-image-hero</code>
        <div class="multi-image-hero u-page-width-max">
            <div class="multi-image-hero__image-wrapper">
                <div class="multi-image-hero__image-inner">
                    <img class="multi-image-hero__image" src="/assets/images/hero-multi-image-1.jpg">
                    <span class="multi-image-hero__image-title">MauiPassport Lens</span>
                </div>
                <p class="multi-image-hero__image-description">MauiPassport gives you distortion-free clarity across the entire lens. PolarizedPlus2 provides brilliant color without glare or harmful UV rays.</p>
            </div>
            <div class="multi-image-hero__image-wrapper">
                <div class="multi-image-hero__image-inner">
                    <img class="multi-image-hero__image" src="/assets/images/hero-multi-image-2.jpg">
                    <span class="multi-image-hero__image-title">Conventional Rx Lens</span>
                </div>
                <p class="multi-image-hero__image-description">For comparative field of view.</p>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--secondary-hero--default">
        Handle: <code>@secondary-hero--default</code>
        <div class="secondary-hero">
            <img class="secondary-hero__image u-object-fit-cover" src="/assets/images/hero-blue-hawaii-large.jpg" sizes="(min-width: 1420px) 1420px, vw" srcset="/assets/images/hero-blue-hawaii-small.jpg 432w, /assets/images/hero-blue-hawaii-large.jpg 1420w">
            <div class="secondary-hero__copy">
                <h1 class="secondary-hero__title">Blue Hawaii Collection</h1>
                <h2 class="secondary-hero__subtitle">Maui Jim’s Blue Mirror Lens</h2>
                <div class="secondary-hero__calls-to-action-wrapper">
                    <div class="call-to-action call-to-action--secondary-hero">
                        <a class="call-to-action__button button button--outlined secondary-hero__call-to-action" href="#">
    Shop Now
  </a>
                    </div>

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

    </div>
    <div class="l-collected-components l-collected-components--secondary-hero--logo">
        Handle: <code>@secondary-hero--logo</code>
        <div class="secondary-hero">
            <img class="secondary-hero__image u-object-fit-cover" src="/assets/images/hero-logo-large.jpg" sizes="(min-width: 1420px) 1420px, vw" srcset="/assets/images/hero-logo-small.jpg 432w, /assets/images/hero-logo-large.jpg 1420w">
            <div class="secondary-hero__copy">
                <img class="secondary-hero__logo" src="/assets/images/mauijim-brand-logo-large-white.png" alt="Maui Jim">
                <div class="secondary-hero__calls-to-action-wrapper">
                </div>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--secondary-hero--pretitle">
        Handle: <code>@secondary-hero--pretitle</code>
        <div class="secondary-hero">
            <img class="secondary-hero__image u-object-fit-cover" src="/assets/images/hero-prescription-1-large.jpg" sizes="(min-width: 1420px) 1420px, vw" srcset="/assets/images/hero-prescription-1-small.jpg 432w, /assets/images/hero-prescription-1-large.jpg 1420w">
            <div class="secondary-hero__copy">
                <p class="secondary-hero__pretitle">MauiPassport™ Prescription Sunglasses</p>
                <h1 class="secondary-hero__title">See More of the World’s Vibrant Beauty</h1>
                <div class="secondary-hero__calls-to-action-wrapper">
                </div>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--secondary-hero--description">
        Handle: <code>@secondary-hero--description</code>
        <div class="secondary-hero">
            <img class="secondary-hero__image u-object-fit-cover" src="/assets/images/hero-leaf-large.jpg" sizes="(min-width: 1420px) 1420px, vw" srcset="/assets/images/hero-leaf-small.jpg 432w, /assets/images/hero-leaf-large.jpg 1420w">
            <div class="secondary-hero__copy">
                <h1 class="secondary-hero__title">Monstera Leaf</h1>
                <p class="secondary-hero__description secondary-hero__description--short">Indulge in 24k luxury</p>
                <p class="secondary-hero__description secondary-hero__description--full">Created on the Hawaiian Islands to make the colors shine, Maui Jim sunglasses feature patented PolarizedPlus2® lens technology for brilliant color so every detail is crisper and cleaner and without glare or harmful UV.</p>
                <div class="secondary-hero__calls-to-action-wrapper">
                    <div class="call-to-action call-to-action--primary">
                        <a class="call-to-action__button button button--primary secondary-hero__call-to-action" href="#">
    Shop Now
  </a>
                    </div>

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

    </div>
    <div class="l-collected-components l-collected-components--image-card">
        Handle: <code>@image-card</code>
        <div class="image-card">
            <div class="image-card__inner">
                <a class="image-card__link" href="#">
      <img class="image-card__image" src="/assets/images/image-card.jpg" alt="Alison Teal image">
      <div class="image-card__text">
        <h4 class="image-card__title">Alison Teal</h4>
        <h5 class="image-card__subtitle">Surf / Explorer</h5>
      </div>
    </a>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--lens-material--evolution">
        Handle: <code>@lens-material--evolution</code>
        <div class="lens-material">
            <h6 class="lens-material__title">Maui Evolution®</h6>
            <p class="lens-material__description">Maui Evolution® features the light weight and scratch and shatter resistance of polycarbonate while offering a much higher optical clarity.</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-evolution.svg">
                        <span class="lens-material__caption">ME</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="l-collected-components l-collected-components--lens-material--spanish">
        Handle: <code>@lens-material--spanish</code>
        <div class="lens-material">
            <h6 class="lens-material__title">MauiPure</h6>
            <p class="lens-material__description">Los lentes perfector para su estilo de vida activo de todos los días, MauiPure™ es la opción más liviana para los largos días en el sol. Resistentes a arañazos e impactos. Moldeada por inyección lo que brinda la óptica más nítida después del
                cristal.</p>
            <div class="lens-material__diagram">
                <div class="lens-material__label lens-material__label--top">Claridad</div>
                <div class="lens-material__middle">
                    <div class="lens-material__label lens-material__label--left">Resistencia a roturas</div>
                    <div class="lens-material__image-wrapper">
                        <img class="lens-material__image" src="/assets/images/lens-material-mauipure.svg">
                        <span class="lens-material__caption">MP</span>
                    </div>
                    <div class="lens-material__label lens-material__label--right">Anti rayones</div>
                </div>
                <div class="lens-material__label lens-material__label--bottom">Peso</div>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--mosaic-card--call-to-action">
        Handle: <code>@mosaic-card--call-to-action</code>
        <div class="mosaic-card mosaic-card--call-to-action u-block u-page-width-max-gutters">
            <div class="mosaic-card__pair mosaic-card__pair--image-right">
                <div class="mosaic-card__image-container">
                    <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-1-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-1-small.jpg 300w, /assets/images/mosaic-card-1-medium.jpg 335w, /assets/images/mosaic-card-1-max.jpg 474w">
                </div>
                <div class="mosaic-card__text">
                    <span class="mosaic-card__prefix">Blue Hawaii</span>
                    <h2 class="mosaic-card__headline">Maui Jim&#x27;s Blue Mirror Lens</h2>
                    <div class="call-to-action call-to-action--mosaic">
                        <a class="call-to-action__button button button--outlined js-mosaic-card__call-to-action" href="#">
    Discover the vibrant blue
  </a>
                    </div>

                </div>
            </div>
            <div class="mosaic-card__pair mosaic-card__pair--image-left">
                <div class="mosaic-card__image-container">
                    <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-2-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-2-small.jpg 300w, /assets/images/mosaic-card-2-medium.jpg 335w, /assets/images/mosaic-card-2-max.jpg 474w">
                </div>
                <div class="mosaic-card__text">
                    <span class="mosaic-card__prefix">New Arrivals</span>
                    <h2 class="mosaic-card__headline">Color. Clarity. Detail.</h2>
                    <div class="call-to-action call-to-action--mosaic">
                        <a class="call-to-action__button button button--outlined js-mosaic-card__call-to-action" href="#">
    Shop new arrivals
  </a>
                    </div>

                </div>
            </div>
            <div class="mosaic-card__pair mosaic-card__pair--image-bottom">
                <div class="mosaic-card__image-container">
                    <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-3-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-3-small.jpg 300w, /assets/images/mosaic-card-3-medium.jpg 335w, /assets/images/mosaic-card-3-max.jpg 474w">
                </div>
                <div class="mosaic-card__text">
                    <span class="mosaic-card__prefix">Classic Collection</span>
                    <h2 class="mosaic-card__headline">KAWIKA</h2>
                    <div class="call-to-action call-to-action--mosaic">
                        <a class="call-to-action__button button button--outlined js-mosaic-card__call-to-action" href="#">
    View product
  </a>
                    </div>

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

    </div>
    <div class="l-collected-components l-collected-components--mosaic-card--text">
        Handle: <code>@mosaic-card--text</code>
        <div class="mosaic-card mosaic-card--text u-block u-page-width-max-gutters">
            <div class="mosaic-card__pair mosaic-card__pair--image-right">
                <div class="mosaic-card__image-container">
                    <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-4-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-4-small.jpg 300w, /assets/images/mosaic-card-4-medium.jpg 335w, /assets/images/mosaic-card-4-max.jpg 474w">
                </div>
                <div class="mosaic-card__text">
                    <h2 class="mosaic-card__headline">New look. Same color, charity and detail.</h2>
                    <p class="mosaic-card__description">A blue mirror coating is applied to the outside surface of our PolarizedPlus2® Neutral Grey lens wich eliminates glare, protects from harmful UV rays, and enhances color.</p>
                </div>
            </div>
            <div class="mosaic-card__pair mosaic-card__pair--image-left">
                <div class="mosaic-card__image-container">
                    <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-5-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-5-small.jpg 300w, /assets/images/mosaic-card-5-medium.jpg 335w, /assets/images/mosaic-card-5-max.jpg 474w">
                </div>
                <div class="mosaic-card__text">
                    <h2 class="mosaic-card__headline">Through the lens.</h2>
                    <p class="mosaic-card__description">Blue Hawaii features a patented blend of elements that increase and balance the saturation of the colors you can see.</p>
                </div>
            </div>
            <div class="mosaic-card__pair mosaic-card__pair--image-bottom">
                <div class="mosaic-card__image-container">
                    <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-6-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-6-small.jpg 300w, /assets/images/mosaic-card-6-medium.jpg 335w, /assets/images/mosaic-card-6-max.jpg 474w">
                </div>
                <div class="mosaic-card__text">
                    <h2 class="mosaic-card__headline">Protection from the sun&#x27;s damaging rays.</h2>
                    <p class="mosaic-card__description">Blue Hawaii offers patented PolarizedPlus2® technology, an effective UV filter for the eyes and surrounding skin.</p>
                </div>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--mosaic-card--quote">
        Handle: <code>@mosaic-card--quote</code>
        <div class="mosaic-card mosaic-card--quote u-block u-page-width-max-gutters">
            <div class="mosaic-card__pair mosaic-card__pair--image-right">
                <div class="mosaic-card__image-container">
                    <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-4-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-4-small.jpg 300w, /assets/images/mosaic-card-4-medium.jpg 335w, /assets/images/mosaic-card-4-max.jpg 474w">
                </div>
                <div class="mosaic-card__text">
                    <blockquote class="mosaic-card__quote">anywhere that we are going in the world, we know Maui Jim is going to deliver and that it’s going to be a great experience.</blockquote>
                    <cite class="mosaic-card__cite">&mdash; Melissa Van Dyke &#124; President, The Incentive Research Foundation</cite>
                </div>
            </div>
            <div class="mosaic-card__pair mosaic-card__pair--image-left">
                <div class="mosaic-card__image-container">
                    <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-5-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-5-small.jpg 300w, /assets/images/mosaic-card-5-medium.jpg 335w, /assets/images/mosaic-card-5-max.jpg 474w">
                </div>
                <div class="mosaic-card__text">
                    <blockquote class="mosaic-card__quote">for my team IT is a piece of cake. The Maui Jim Reps do it all from helping us decide what styles to offer, to inventorying, to fitting. We just sit back and let our attendees enjoy.</blockquote>
                    <cite class="mosaic-card__cite">&mdash; Brett Barrowman &#124; VP &amp; Director Conference & Travel Management Services, American Fidelity Assurance</cite>
                </div>
            </div>
            <div class="mosaic-card__pair mosaic-card__pair--image-bottom">
                <div class="mosaic-card__image-container">
                    <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-6-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-6-small.jpg 300w, /assets/images/mosaic-card-6-medium.jpg 335w, /assets/images/mosaic-card-6-max.jpg 474w">
                </div>
                <div class="mosaic-card__text">
                    <blockquote class="mosaic-card__quote">it sends a message that we care and we want to give you something that is going to be useful.</blockquote>
                    <cite class="mosaic-card__cite">&mdash; Johan Marzuki &#124; Account Executive, BCD Meetings and Incentives</cite>
                </div>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--share-feed">
        Handle: <code>@share-feed</code>
        <div class="share-feed u-block u-page-width-max-gutters">
            <h2 class="share-feed__title">#AlohaFriday</h2>
            <p class="share-feed__description">Share your view on Instagram, Facebook or Twitter</p>
            <button class="button button--primary share-feed__call-to-action">Submit Your Photo</button>

            <div class="share-feed__widget">
                <!-- Replace everything inside .share-feed__widget during implementation. Styles are inline so they aren't included in the build. -->
                <div style="position: relative; min-height: 200px; background-color: #e2e2e2; text-align: center;">
                    <span style="position: absolute; top: 50%; transform: translateY(-50%); right: 0; left: 0; color: #999999; font-size: 2.7rem; font-weight: bold; letter-spacing: 3px; line-height: 3.2rem; text-transform: uppercase;">Third Party Widget</span>
                </div>
            </div>
            <button class="button button--outlined share-feed__load-more">Load More</button>

        </div>

    </div>
    <div class="l-collected-components l-collected-components--shop-diptych">
        Handle: <code>@shop-diptych</code>
        <div class="shop-diptych u-block u-page-width-max-gutters">
            <div class="shop-diptych__item shop-diptych__item--sunglasses">
                <a class="shop-diptych__link" href="#">
                    <h2 class="shop-diptych__title">Sunglasses</h2>
                    <img class="shop-diptych__image" src="/assets/images/diptych-sunglasses-large.png" sizes="50vw" srcset="/assets/images/diptych-sunglasses-small.png 320w, /assets/images/diptych-sunglasses-large.png 580w">
                    <button class="shop-diptych__call-to-action button button--primary" tabindex="-1">Shop</button>
                </a>
            </div>
            <div class="shop-diptych__item shop-diptych__item--eyeglasses">
                <a class="shop-diptych__link" href="#">
                    <h2 class="shop-diptych__title">Eyeglasses</h2>
                    <img class="shop-diptych__image" src="/assets/images/diptych-eyeglasses-large.png" sizes="50vw" srcset="/assets/images/diptych-eyeglasses-small.png 320w, /assets/images/diptych-eyeglasses-large.png 580w">
                    <button class="shop-diptych__call-to-action button button--primary" tabindex="-1">Shop</button>
                </a>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--card-tabs">
        Handle: <code>@card-tabs</code>
        <div class="card-tabs js-card-tabs">
            <ul class="card-tabs__tabs">
                <li class="card-tabs__tab js-card-tabs-tab js-card-tabs-tab--active" data-tab="glare">Glare Elimination</li>
                <li class="card-tabs__tab js-card-tabs-tab" data-tab="color">Color Enhancement</li>
                <li class="card-tabs__tab js-card-tabs-tab" data-tab="health">Eye Health</li>
                <li class="card-tabs__tab js-card-tabs-tab" data-tab="protection">Lens Protection</li>
            </ul>
            <div class="card-tabs__content-wrapper js-card-tabs-content-wrapper js-card-tabs-content-wrapper--active" data-tab="glare">
                <h3 class="card-tabs__content-title">Glare Elimination</h3>
                <h4 class="card-tabs__content-subtitle">See True</h4>
                <div class="card-tabs__content-description">
                    <p>Glare washes out colors, obscures details, and fatigues your eyes. PolarizedPlus2® lenses eliminate 99.9% of glare, allowing you to see the world at its brilliant best. Feature the industry&#x27;s most advanced techniques, our patented
                        lens creation process creates an amazing difference you&#x27;ll see immediately.</p>
                </div>
                <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                            <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                            <button class="big-card__call-to-action button button--outlined" tabindex="-1">View</button>
                        </div>
                    </a>
                </div>

                <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Created on the Hawaiian Islands.</h2>
                            <button class="big-card__call-to-action button button--outlined" tabindex="-1">View new arrivals</button>
                        </div>
                    </a>
                </div>

                <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                            <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                            <button class="big-card__call-to-action button button--outlined" tabindex="-1">View</button>
                        </div>
                    </a>
                </div>

                <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Created on the Hawaiian Islands.</h2>
                            <button class="big-card__call-to-action button button--outlined" tabindex="-1">View new arrivals</button>
                        </div>
                    </a>
                </div>

                <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                            <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                            <button class="big-card__call-to-action button button--outlined" tabindex="-1">View</button>
                        </div>
                    </a>
                </div>

                <a class="button button--outlined card-tabs__content-call-to-action" href="#">Shop Now</a>
            </div>
            <div class="card-tabs__content-wrapper js-card-tabs-content-wrapper" data-tab="color">
                <h3 class="card-tabs__content-title">Color Enhancement</h3>
                <h4 class="card-tabs__content-subtitle">Perceive More</h4>
                <div class="card-tabs__content-description">
                    <p>Many sunglass lenses simply darken your view, dimming and fading color for a flat, low-contrast perspective.</p>
                    <p>Our PolarizedPlus2® lenses enhance the colors your eyes naturally perceive. So you see vibrant, saturated colors with a higher level of contrast and greater depth perception.</p>
                </div>
                <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                            <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                            <button class="big-card__call-to-action button button--outlined" tabindex="-1">View</button>
                        </div>
                    </a>
                </div>

                <a class="button button--outlined card-tabs__content-call-to-action" href="#">Shop Now</a>
            </div>
            <div class="card-tabs__content-wrapper js-card-tabs-content-wrapper" data-tab="health">
                <h3 class="card-tabs__content-title">Eye Health</h3>
                <h4 class="card-tabs__content-subtitle">Be Well</h4>
                <div class="card-tabs__content-description">
                    <p>Just like your skin, your eyes need protection from exposure to the sun&#x27;s rays. PolarizedPlus2® lenses eliminate 100% of UV radiation and provide protection against a number of additional stresses, helping your eyes stay healthy
                        so you can keep taking in all the world&#x27;s beauty.</p>
                </div>
                <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                            <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                            <button class="big-card__call-to-action button button--outlined" tabindex="-1">View</button>
                        </div>
                    </a>
                </div>

                <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Created on the Hawaiian Islands.</h2>
                            <button class="big-card__call-to-action button button--outlined" tabindex="-1">View new arrivals</button>
                        </div>
                    </a>
                </div>

                <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                            <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                            <button class="big-card__call-to-action button button--outlined" tabindex="-1">View</button>
                        </div>
                    </a>
                </div>

                <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Created on the Hawaiian Islands.</h2>
                            <button class="big-card__call-to-action button button--outlined" tabindex="-1">View new arrivals</button>
                        </div>
                    </a>
                </div>

                <a class="button button--outlined card-tabs__content-call-to-action" href="#">Shop Now</a>
            </div>
            <div class="card-tabs__content-wrapper js-card-tabs-content-wrapper" data-tab="protection">
                <h3 class="card-tabs__content-title">Lens Protection</h3>
                <h4 class="card-tabs__content-subtitle">Live Freely</h4>
                <div class="card-tabs__content-description">
                    <p>Our sunglasses are meant to be worn, on sunny and cloudy days, on the beach and city streets. They&#x27;re there to protect your eyes and reveal the world&#x27;s brilliance, so the last thing we want is for you to worry about them.</p>
                    <p>Our PolarizedPlus2® lenses incorporate a number of technologies specifically intended to maximize durability and convenience.</p>
                </div>
                <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                            <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                            <button class="big-card__call-to-action button button--outlined" tabindex="-1">View</button>
                        </div>
                    </a>
                </div>

                <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Created on the Hawaiian Islands.</h2>
                            <button class="big-card__call-to-action button button--outlined" tabindex="-1">View new arrivals</button>
                        </div>
                    </a>
                </div>

                <a class="button button--outlined card-tabs__content-call-to-action" href="#">Shop Now</a>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--lens-collections">
        Handle: <code>@lens-collections</code>
        <div class="lens-collections js-lens-collections js-accordion-tabs">
            <ul class="lens-collections__tabs">
                <li class="lens-collections__list-item">
                    <button class="lens-collections__tab accordion-tabs__tab js-accordion-tabs-tab" id="tab-optimum" aria-selected="true" role="tab" data-tab="optimum">
        <div class="lens-collections__tab-inner">
          <div class="lens-collections__tab-image-wrapper" style="background-color: #E91D2B">
            <img class="lens-collections__tab-image" src="/assets/images/zeal-tech-collection-optimum.png" alt="Optimum">
          </div>
          <h3 class="lens-collections__tab-title">Optimum</h3>
          <h4 class="lens-collections__tab-subtitle">Clearly Superior</h4>
        </div>
      </button>
                </li>
                <li class="lens-collections__list-item">
                    <button class="lens-collections__tab accordion-tabs__tab js-accordion-tabs-tab" id="tab-polarized" aria-selected="" role="tab" data-tab="polarized">
        <div class="lens-collections__tab-inner">
          <div class="lens-collections__tab-image-wrapper" style="background-color: #1E5732">
            <img class="lens-collections__tab-image" src="/assets/images/zeal-tech-collection-polarized.png" alt="Polarized">
          </div>
          <h3 class="lens-collections__tab-title">Polarized</h3>
          <h4 class="lens-collections__tab-subtitle">Clarity &amp; Protection</h4>
        </div>
      </button>
                </li>
                <li class="lens-collections__list-item">
                    <button class="lens-collections__tab accordion-tabs__tab js-accordion-tabs-tab" id="tab-auto" aria-selected="" role="tab" data-tab="auto">
        <div class="lens-collections__tab-inner">
          <div class="lens-collections__tab-image-wrapper" style="background-color: #1C3C6C">
            <img class="lens-collections__tab-image" src="/assets/images/zeal-tech-collection-auto.png" alt="Auto+">
          </div>
          <h3 class="lens-collections__tab-title">Auto+</h3>
          <h4 class="lens-collections__tab-subtitle">One lens. Every condition.</h4>
        </div>
      </button>
                </li>
            </ul>
            <div class="lens-collections__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-optimum" aria-hidden="false" role="tabpanel" data-tab="optimum">
                <button class="lens-collections__accordion-control js-accordion-tabs-accordion-control">
      Optimum
      <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="lens-collections__content">
                    <h5 class="lens-collections__headline">Lenses for all conditions</h5>
                    <p class="lens-collections__description">Our Optimum Collection offers advanced lens technology because we know that having the right lens can change your day entirely. Optimum blocks 100% of harmful UV rays and comes standard with blue light filters, Everclear Anti-Fog and
                        Permashield Hardcoat. With a quiver of mirrors and tints, we have you covered, no matter the condition.</p>
                    <h6 class="lens-collections__features-title">Tech Features</h6>
                    <ul class="lens-collections__features">
                        <li class="lens-collections__feature">Blue light filters to enhance color</li>
                        <li class="lens-collections__feature">Blocks 100% UVA/B/C light</li>
                        <li class="lens-collections__feature">Permashield Hardcoat</li>
                        <li class="lens-collections__feature">Everclear Anti-Fog</li>
                        <li class="lens-collections__feature">Hydro/Oleo on mirrored lenses</li>
                    </ul>
                </div>
            </div>
            <div class="lens-collections__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-polarized" aria-hidden="true" role="tabpanel" data-tab="polarized">
                <button class="lens-collections__accordion-control js-accordion-tabs-accordion-control">
      Polarized
      <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="lens-collections__content">
                    <h5 class="lens-collections__headline">Lorem for all conditions</h5>
                    <p class="lens-collections__description">Our Polarized Collection offers advanced lens technology because we know that having the right lens can change your day entirely. Polarized blocks 100% of harmful UV rays and comes standard with blue light filters, Everclear Anti-Fog
                        and Permashield Hardcoat. With a quiver of mirrors and tints, we have you covered, no matter the condition.</p>
                    <h6 class="lens-collections__features-title">Tech Features</h6>
                    <ul class="lens-collections__features">
                        <li class="lens-collections__feature">Hydro/Oleo on mirrored lenses</li>
                        <li class="lens-collections__feature">Blue light filters to enhance color</li>
                        <li class="lens-collections__feature">Blocks 100% UVA/B/C light</li>
                        <li class="lens-collections__feature">Permashield Hardcoat</li>
                        <li class="lens-collections__feature">Everclear Anti-Fog</li>
                    </ul>
                </div>
            </div>
            <div class="lens-collections__content-wrapper js-accordion-tabs-content-wrapper" aria-labelledby="tab-auto" aria-hidden="true" role="tabpanel" data-tab="auto">
                <button class="lens-collections__accordion-control js-accordion-tabs-accordion-control">
      Auto+
      <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="lens-collections__content">
                    <h5 class="lens-collections__headline">Lenses for all ipsum</h5>
                    <p class="lens-collections__description">Our Auto+ Collection offers advanced lens technology because we know that having the right lens can change your day entirely. Auto+ blocks 100% of harmful UV rays and comes standard with blue light filters, Everclear Anti-Fog and Permashield
                        Hardcoat. With a quiver of mirrors and tints, we have you covered, no matter the condition.</p>
                    <h6 class="lens-collections__features-title">Tech Features</h6>
                    <ul class="lens-collections__features">
                        <li class="lens-collections__feature">Everclear Anti-Fog</li>
                        <li class="lens-collections__feature">Hydro/Oleo on mirrored lenses</li>
                        <li class="lens-collections__feature">Blue light filters to enhance color</li>
                        <li class="lens-collections__feature">Blocks 100% UVA/B/C light</li>
                        <li class="lens-collections__feature">Permashield Hardcoat</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--lens-colors">
        Handle: <code>@lens-colors</code>
        <div class="lens-colors js-lens-colors">
            <h3 class="technology__title">The Colors</h3>
            <h4 class="technology__subtitle">A Color for Every Condition</h4>
            <ul class="lens-colors__colors js-lens-colors-carousel">
                <li class="lens-colors__color js-lens-colors-color js-lens-colors-color--active">
                    <div class="lens-colors__color-info js-lens-colors-color-toggle">
                        <img class="lens-colors__color-image" src="/assets/images/lens-detail-lens-neutralgrey-medium.png" alt="Neutral Grey">
                        <h6 class="lens-colors__color-title">Neutral Grey</h6>
                        <p class="lens-colors__color-description">Offers the highest available light reduction for the richest colors and sharpest contrast.</p>
                        <p class="lens-colors__color-use">Best in Bright, Direct Sunlight</p>
                    </div>
                    <div class="lens-colors__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>
                </li>
                <li class="lens-colors__color js-lens-colors-color">
                    <div class="lens-colors__color-info js-lens-colors-color-toggle">
                        <img class="lens-colors__color-image" src="/assets/images/lens-detail-lens-hclbronze-medium.png" alt="HCL® Bronze">
                        <h6 class="lens-colors__color-title">HCL® Bronze</h6>
                        <p class="lens-colors__color-description">This &quot;High Contrast Lens&quot; provides a beautiful warm tint, excellent for varied, everyday conditions.</p>
                        <p class="lens-colors__color-use">Best for Everyday Use</p>
                    </div>
                    <div class="lens-colors__comparison">
                        <figure class="image-comparison js-image-comparison">
                            <img class="image-comparison__image" src="/assets/images/lens-detail-hclbronze.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>
                </li>
                <li class="lens-colors__color js-lens-colors-color">
                    <div class="lens-colors__color-info js-lens-colors-color-toggle">
                        <img class="lens-colors__color-image" src="/assets/images/lens-detail-lens-mauirose-medium.png" alt="Maui Rose®">
                        <h6 class="lens-colors__color-title">Maui Rose®</h6>
                        <p class="lens-colors__color-description">Provides a subtle rose tint with the highest available contrast that’s perfect for fast moving sports.</p>
                        <p class="lens-colors__color-use">Best for fast Action Activities</p>
                    </div>
                    <div class="lens-colors__comparison">
                        <figure class="image-comparison js-image-comparison">
                            <img class="image-comparison__image" src="/assets/images/lens-detail-mauirose.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>
                </li>
                <li class="lens-colors__color js-lens-colors-color">
                    <div class="lens-colors__color-info js-lens-colors-color-toggle">
                        <img class="lens-colors__color-image" src="/assets/images/lens-detail-lens-mauiht-medium.png" alt="Maui HT™">
                        <h6 class="lens-colors__color-title">Maui HT™</h6>
                        <p class="lens-colors__color-description">When most lenses would be too dark, this &quot;High Transmission&quot; lens offers extra contrast and color.</p>
                        <p class="lens-colors__color-use">Best for Low Light &amp; Golf</p>
                    </div>
                    <div class="lens-colors__comparison">
                        <figure class="image-comparison js-image-comparison">
                            <img class="image-comparison__image" src="/assets/images/lens-detail-mauiht.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>
                </li>
            </ul>
            <div class="lens-colors__color-controls js-lens-colors-controls">
                <button class="lens-colors__color-control lens-colors__color-control--prev">
      <span class="u-visually-hidden">Previous</span>
      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

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

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

    </div>
    <div class="l-collected-components l-collected-components--lens-features">
        Handle: <code>@lens-features</code>
        <div class="lens-features js-lens-features">
            <h2 class="lens-features__title">Our Features</h2>
            <div class="lens-features__image-wrapper">
                <img class="lens-features__image" src="/assets/images/zeal-tech-lens-features.jpg" alt="Our Features illustration">
                <ul class="lens-features__numbers">
                    <li class="lens-features__number lens-features__number--1 js-lens-features-number--active js-lens-features-number" data-feature="1">
                        <span class="lens-features__number-label">1</span>
                    </li>
                    <li class="lens-features__number lens-features__number--2 js-lens-features-number" data-feature="2">
                        <span class="lens-features__number-label">2</span>
                    </li>
                    <li class="lens-features__number lens-features__number--3 js-lens-features-number" data-feature="3">
                        <span class="lens-features__number-label">3</span>
                    </li>
                    <li class="lens-features__number lens-features__number--4 js-lens-features-number" data-feature="4">
                        <span class="lens-features__number-label">4</span>
                    </li>
                    <li class="lens-features__number lens-features__number--5 js-lens-features-number" data-feature="5">
                        <span class="lens-features__number-label">5</span>
                    </li>
                </ul>
            </div>
            <ul class="lens-features__features">
                <li class="lens-features__feature js-lens-features-feature--active js-lens-features-feature" data-feature="1">
                    <p class="lens-features__feature-title">Guiding Rails</p>
                    <p class="lens-features__feature-description">Our patent-pending rail system allows the lens to seamlessly slide into the channel for a simple and secure lens swap.</p>
                </li>
                <li class="lens-features__feature js-lens-features-feature" data-feature="2">
                    <p class="lens-features__feature-title">Lorem Ipsum Dolor</p>
                    <p class="lens-features__feature-description">Vestibulum sit amet metus metus. Quisque condimentum aliquet massa, eget suscipit libero scelerisque vitae.</p>
                </li>
                <li class="lens-features__feature js-lens-features-feature" data-feature="3">
                    <p class="lens-features__feature-title">Sit Amet Consectetur</p>
                    <p class="lens-features__feature-description">Quisque commodo purus in felis commodo, et tincidunt sapien imperdiet. Praesent convallis porttitor dolor sed vulputate.</p>
                </li>
                <li class="lens-features__feature js-lens-features-feature" data-feature="4">
                    <p class="lens-features__feature-title">Adipiscing Elit</p>
                    <p class="lens-features__feature-description">Vestibulum sed sem augue. Quisque volutpat justo sed massa volutpat, quis consectetur odio molestie.</p>
                </li>
                <li class="lens-features__feature js-lens-features-feature" data-feature="5">
                    <p class="lens-features__feature-title">Vestibulum Non Neque</p>
                    <p class="lens-features__feature-description">Aenean tincidunt sem non nisi ullamcorper, a dignissim diam rhoncus. Phasellus sollicitudin mauris ut neque consectetur blandit.</p>
                </li>
            </ul>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--lens-materials">
        Handle: <code>@lens-materials</code>
        <div class="lens-materials">
            <h3 class="technology__title">The Materials</h3>
            <h4 class="technology__subtitle">Formed For Function</h4>
            <ul class="lens-materials__materials">
                <li class="lens-materials__material">
                    <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>

                    <a class="button button--outlined lens-materials__shop" href="#">Shop SuperThin Glass</a>
                </li>
                <li class="lens-materials__material">
                    <div class="lens-material">
                        <h6 class="lens-material__title">MauiPure®</h6>
                        <p class="lens-material__description">Our most popular lens material. It combines optics almost as crisp as SuperThin Glass with ultra lightweight and excellent scratch and shatter resistance.</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-mauipure.svg">
                                    <span class="lens-material__caption">MP</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>

                    <a class="button button--outlined lens-materials__shop" href="#">Shop MauiPure®</a>
                </li>
                <li class="lens-materials__material">
                    <div class="lens-material">
                        <h6 class="lens-material__title">Maui Evolution®</h6>
                        <p class="lens-material__description">Maui Evolution® features the light weight and scratch and shatter resistance of polycarbonate while offering a much higher optical clarity.</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-evolution.svg">
                                    <span class="lens-material__caption">ME</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>

                    <a class="button button--outlined lens-materials__shop" href="#">Shop Maui Evolution®</a>
                </li>
                <li class="lens-materials__material">
                    <div class="lens-material">
                        <h6 class="lens-material__title">MauiBrilliant</h6>
                        <p class="lens-material__description">Maui Jim’s most advanced lens material that features optics nearly as clear as glass with just one- third of the weight.</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-mauibrilliant.svg">
                                    <span class="lens-material__caption">MB</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>

                    <a class="button button--outlined lens-materials__shop" href="#">Shop MauiBrilliant</a>
                </li>
            </ul>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--technology-link--benefits">
        Handle: <code>@technology-link--benefits</code>
        <div class="technology-link">
            <img class="technology-link__image" src="/assets/images/technology-link-benefits.jpg" alt="The Benefits">
            <span class="technology-link__title">The Benefits</span>
            <a class="button button--primary technology-link__call-to-action" href="#">Explore More</a>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--technology-link--lens">
        Handle: <code>@technology-link--lens</code>
        <div class="technology-link">
            <img class="technology-link__image" src="/assets/images/technology-link-lens.jpg" alt="The Lens">
            <span class="technology-link__title">The Lens</span>
            <a class="button button--primary technology-link__call-to-action" href="#">Learn More</a>
        </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,
  "components": [
    {
      "component": "paragraph",
      "context": {
        "value": "This page collects miscellaneous components for snapshot testing.",
        "classes": [
          "u-text-center"
        ]
      }
    },
    {
      "component": "big-card--image-right"
    },
    {
      "component": "big-card--image-left"
    },
    {
      "component": "big-card--image-right-landscape"
    },
    {
      "component": "big-card--image-left-landscape"
    },
    {
      "component": "big-card--image-right-landscape-text"
    },
    {
      "component": "big-card--image-left-landscape-text"
    },
    {
      "component": "breadcrumb"
    },
    {
      "component": "call-to-action--mymaui"
    },
    {
      "component": "call-to-action--home-try-on"
    },
    {
      "component": "call-to-action--try-in-store"
    },
    {
      "component": "call-to-action--find-an-optician"
    },
    {
      "component": "call-to-action--print"
    },
    {
      "component": "card--maui-jim"
    },
    {
      "component": "card--call-to-action"
    },
    {
      "component": "card--tax-information"
    },
    {
      "component": "card--reserve-in-store"
    },
    {
      "component": "card--confirmed-style"
    },
    {
      "component": "featured-products--maui-jim"
    },
    {
      "component": "landing-hero--maui-jim"
    },
    {
      "component": "multi-image-hero"
    },
    {
      "component": "secondary-hero--default"
    },
    {
      "component": "secondary-hero--logo"
    },
    {
      "component": "secondary-hero--pretitle"
    },
    {
      "component": "secondary-hero--description"
    },
    {
      "component": "image-card"
    },
    {
      "component": "lens-material--evolution"
    },
    {
      "component": "lens-material--spanish"
    },
    {
      "component": "mosaic-card--call-to-action"
    },
    {
      "component": "mosaic-card--text"
    },
    {
      "component": "mosaic-card--quote"
    },
    {
      "component": "share-feed"
    },
    {
      "component": "shop-diptych"
    },
    {
      "component": "card-tabs"
    },
    {
      "component": "lens-collections"
    },
    {
      "component": "lens-colors"
    },
    {
      "component": "lens-features"
    },
    {
      "component": "lens-materials"
    },
    {
      "component": "technology-link--benefits"
    },
    {
      "component": "technology-link--lens"
    }
  ]
}
  • 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.