<div class="confirmation-products">
    <div class="confirmation-products__item">
        <img class="confirmation-products__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;225" alt="Gloss Black">
        <span class="confirmation-products__item-info confirmation-products__item-info--name">PEAHI</span>
        <div class="confirmation-products__item-details">
            <span class="confirmation-products__item-info"><strong>Frame:</strong> Gloss Black</span>
            <span class="confirmation-products__item-info"><strong>Lens:</strong> Neutral Grey</span>
            <span class="confirmation-products__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
            <span class="confirmation-products__item-info"><strong>Gradient:</strong> Single Gradient</span>
            <span class="confirmation-products__item-info"><strong>SKU:</strong> 202-02</span>
        </div>
        <span class="confirmation-products__item-info confirmation-products__item-info--qty">
      <strong>Qty:</strong> 1
    </span>
        <span class="confirmation-products__item-info confirmation-products__item-info--price">
      <strong>Total:</strong> $149.00
      <span class="confirmation-products__item-tax">Inkl. MWST</span>
        </span>
    </div>
    <div class="confirmation-products__item">
        <img class="confirmation-products__item-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;225" alt="Olive Stripe">
        <span class="confirmation-products__item-info confirmation-products__item-info--name">WATERWAYS</span>
        <div class="confirmation-products__item-details">
            <span class="confirmation-products__item-info"><strong>Frame:</strong> Olive Stripe</span>
            <span class="confirmation-products__item-info"><strong>Lens:</strong> Maui HT™</span>
            <span class="confirmation-products__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
            <span class="confirmation-products__item-info"><strong>Gradient:</strong> Single Gradient</span>
            <span class="confirmation-products__item-info"><strong>SKU:</strong> HTS267-15C</span>
        </div>
        <span class="confirmation-products__item-info confirmation-products__item-info--qty">
      <strong>Qty:</strong> 1
    </span>
        <span class="confirmation-products__item-info confirmation-products__item-info--price">
      <div class="confirmation-products__item-vip-info">
        <span class="confirmation-products__item-vip-card-value">VIP Card 30%</span>
        <span class="confirmation-products__item-vip-original-price">$319.00</span>
    </div>
    <strong>Total:</strong> $219.00
    <span class="confirmation-products__item-tax">Inkl. MWST</span>
    </span>
</div>
<div class="confirmation-products__item">
    <img class="confirmation-products__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;225" alt="Tortoise with Antique Gold">
    <span class="confirmation-products__item-info confirmation-products__item-info--name">KAWIKA</span>
    <div class="confirmation-products__item-details">
        <span class="confirmation-products__item-info"><strong>Frame:</strong> Tortoise with Antique Gold</span>
        <span class="confirmation-products__item-info"><strong>Lens:</strong> HCL® Bronze</span>
        <span class="confirmation-products__item-info"><strong>Lens Material:</strong> MauiPure</span>
        <span class="confirmation-products__item-info"><strong>Gradient:</strong> Single Gradient</span>
        <span class="confirmation-products__item-info"><strong>SKU:</strong> H257-16C</span>
    </div>
    <span class="confirmation-products__item-info confirmation-products__item-info--qty">
      <strong>Qty:</strong> 1
    </span>
    <span class="confirmation-products__item-info confirmation-products__item-info--price">
      <div class="confirmation-products__item-vip-info">
        <span class="confirmation-products__item-vip-card-value">VIP Card 30%</span>
    <span class="confirmation-products__item-vip-original-price">$319.00</span>
</div>
<strong>Total:</strong> $299.00
</span>
</div>
<div class="confirmation-products__item">
    <img class="confirmation-products__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;225" alt="Tortoise">
    <span class="confirmation-products__item-info confirmation-products__item-info--name">VOYAGER</span>
    <div class="confirmation-products__item-details">
        <span class="confirmation-products__item-info"><strong>Frame:</strong> Tortoise</span>
        <span class="confirmation-products__item-info"><strong>Lens:</strong> HCL® Bronze</span>
        <span class="confirmation-products__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
        <span class="confirmation-products__item-info"><strong>Gradient:</strong> Single Gradient</span>
        <span class="confirmation-products__item-info"><strong>SKU:</strong> H178-10</span>
    </div>
    <span class="confirmation-products__item-info confirmation-products__item-info--qty">
      <strong>Qty:</strong> 1
    </span>
    <span class="confirmation-products__item-info confirmation-products__item-info--price">
      <strong>Total:</strong> $219.00
    </span>
</div>
<div class="confirmation-products__item">
    <img class="confirmation-products__item-image" src="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$&amp;wid&#x3D;225" alt="Brown Feathered">
    <span class="confirmation-products__item-info confirmation-products__item-info--name">LEIA</span>
    <div class="confirmation-products__item-details">
        <span class="confirmation-products__item-info"><strong>Frame:</strong> Brown Feathered</span>
        <span class="confirmation-products__item-info"><strong>Lens:</strong> Maui Rose®</span>
        <span class="confirmation-products__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
        <span class="confirmation-products__item-info"><strong>Gradient:</strong> Single Gradient</span>
        <span class="confirmation-products__item-info"><strong>SKU:</strong> RS708-26D</span>
    </div>
    <span class="confirmation-products__item-info confirmation-products__item-info--qty">
      <strong>Qty:</strong> 1
    </span>
    <span class="confirmation-products__item-info confirmation-products__item-info--price">
      <strong>Total:</strong> $299.00
    </span>
</div>
</div>
<div class="confirmation-products{{#if repairs}} confirmation-products--repairs{{/if}}">
  {{#each products}}
  <div class="confirmation-products__item{{#if repair}} confirmation-products__item--repair{{/if}}{{#if surcharge}} confirmation-products__item--surcharge{{/if}}">
    {{#if product}}
    <img class="confirmation-products__item-image" src="{{productImage variants.0.images.front 225}}" alt="{{variants.0.name}}">
    <span class="confirmation-products__item-info confirmation-products__item-info--name">{{name}}</span>
    <div class="confirmation-products__item-details">
      <span class="confirmation-products__item-info"><strong>Frame:</strong> {{variants.0.name}}</span>
      <span class="confirmation-products__item-info"><strong>Lens:</strong> {{variants.0.lens}}</span>
      <span class="confirmation-products__item-info"><strong>Lens Material:</strong> {{variants.0.lensMaterial}}</span>
      <span class="confirmation-products__item-info"><strong>Gradient:</strong> Single Gradient</span>
      <span class="confirmation-products__item-info"><strong>SKU:</strong> {{variants.0.id}}</span>
    </div>
    <span class="confirmation-products__item-info confirmation-products__item-info--qty">
      <strong>Qty:</strong> 1
    </span>
    <span class="confirmation-products__item-info confirmation-products__item-info--price">
      {{#if vip}}
      <div class="confirmation-products__item-vip-info">
        <span class="confirmation-products__item-vip-card-value">VIP Card {{vip.cardValue}}</span>
        <span class="confirmation-products__item-vip-original-price">{{vip.originalPrice}}</span>
      </div>
      {{/if}}
      <strong>Total:</strong> {{variants.0.price}}
      {{#if tax}}
      <span class="confirmation-products__item-tax">{{tax}}</span>
      {{/if}}
    </span>
    {{/if}}
    {{#if repair}}
    <div class="confirmation-products__repair-details">
      <div class="confirmation-products__repair-header">
        <img class="confirmation-products__repair-image" src="{{productImage variants.0.images.front 225}}" alt="{{variants.0.name}}">
        <div class="confirmation-products__repair">
          <span class="confirmation-products__repair-lens">Non-Prescription Sunglasses</span>
          <span class="confirmation-products__repair-name">{{name}}</span>
          <span class="confirmation-products__repair-variant">{{variants.0.id}}</span>
        </div>
      </div>
      <div class="confirmation-products__repair-info-group">
        <span class="confirmation-products__repair-purchase"><strong>Purchase Date:</strong> {{purchaseDate}}</span>
        <span class="confirmation-products__repair-note"><strong>Repair Notes:</strong> {{repairNote}}</span>
        {{#if repairs}}
        <ul class="confirmation-products__repair-list">
          {{#each repairs}}
          <li class="confirmation-products__repair-item">
            <span class="confirmation-products__repair-type">{{{repairType}}}</span>
            <ul class="confirmation-products__repair-includes">
              <li class="confirmation-products__repair-include">Temple and Nose Pad Evaluation</li>
              <li class="confirmation-products__repair-include">Cleaning &amp; Alignment as Needed</li>
            </ul>
          </li>
          {{/each}}
        </ul>
        {{/if}}
      </div>
    </div>
    {{/if}}
    {{#if surcharge}}
    <div class="confirmation-products__surcharge">
      {{#if icon}}{{render (dynamicComponent icon)}}{{/if}}
      <span class="confirmation-products__repair-type">{{repairType}}</span>
      <span class="confirmation-products__surcharge-desc">{{surchargeDesc}}</span>
    </div>
    {{/if}}
  </div>
  {{/each}}
</div>
{
  "pageCss": [
    "checkout"
  ],
  "products": [
    {
      "name": "PEAHI",
      "summary": "Polarized men's classic sunglasses",
      "description": "Pe'ahi ('peh-AH-hee'), on Maui's north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.",
      "category": "Wrap",
      "rating": [
        "star-full",
        "star-full",
        "star-half",
        "star-empty",
        "star-empty"
      ],
      "vip": null,
      "tax": "Inkl. MWST",
      "variants": [
        {
          "id": "202-02",
          "name": "Gloss Black",
          "color": "#000",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$149.00",
          "salePrice": "$229.00",
          "url": "#202-02",
          "status": "New",
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "202-02",
            "inactive": null,
            "material": "superthin"
          }
        },
        {
          "id": "B202-2M",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$189.00",
          "salePrice": "$219.00",
          "url": "#B202-2M",
          "status": "New",
          "stock": "In Stock",
          "lens": "Blue Hawaii",
          "lensId": "bluehawaii",
          "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "B202-2M",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-10",
          "name": "Dark Tortoise",
          "color": "#303032",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": "https://mauijim.scene7.com/is/image/mauijim/10",
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-10",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-10",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-2M",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-2M",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-2M",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-70",
          "name": "Redfish",
          "color": "#7d4a07",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-70",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-70",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "HT202-71",
          "name": "MahiMahi",
          "color": "#218b16",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#HT202-71",
          "status": null,
          "stock": "In Stock",
          "lens": "Maui HT™",
          "lensId": "mauiht",
          "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "HT202-71",
            "inactive": true,
            "material": "mauipure"
          }
        },
        {
          "id": "H202-2M-2",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-2M-2",
          "status": null,
          "stock": "Out of Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-2M-2",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-70-2",
          "name": "Redfish",
          "color": "#7d4a07",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-70-2",
          "status": "New",
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-70-2",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "HT202-71-2",
          "name": "MahiMahi",
          "color": "#218b16",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#HT202-71-2",
          "status": null,
          "stock": "In Stock",
          "lens": "Maui HT™",
          "lensId": "mauiht",
          "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "HT202-71-2",
            "inactive": true,
            "material": "mauipure"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": "true",
      "prescription": null,
      "product": true
    },
    {
      "name": "WATERWAYS",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-empty",
        "star-empty",
        "star-empty"
      ],
      "vip": {
        "cardValue": "30%",
        "originalPrice": "$319.00"
      },
      "tax": "Inkl. MWST",
      "variants": [
        {
          "id": "HTS267-15C",
          "name": "Olive Stripe",
          "color": "#808000",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$219.00",
          "salePrice": null,
          "url": "#HTS267-15C",
          "status": null,
          "stock": "In Stock",
          "lens": "Maui HT™",
          "lensId": "mauiht",
          "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "HTS267-15C",
            "inactive": null,
            "material": "superthin"
          }
        },
        {
          "id": "HS267-10M",
          "name": "Matte Tortoise",
          "color": "#303032",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#HS267-10M",
          "status": "New",
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "HS267-10M",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "GS267-02MR",
          "name": "Matte Black Rubber",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$239.00",
          "salePrice": null,
          "url": "#GS267-02MR",
          "status": "New",
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "GS267-02MR",
            "inactive": true,
            "material": "superthin"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": "true",
      "prescription": null,
      "product": true
    },
    {
      "name": "KAWIKA",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-half",
        "star-empty",
        "star-empty"
      ],
      "vip": {
        "cardValue": "30%",
        "originalPrice": "$319.00"
      },
      "tax": null,
      "variants": [
        {
          "id": "H257-16C",
          "name": "Tortoise with Antique Gold",
          "color": "#e0d468",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$299.00",
          "salePrice": null,
          "url": "#H257-16C",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "H257-16C",
            "inactive": null,
            "material": "mauipure"
          }
        },
        {
          "id": "B257-05CR",
          "name": "Crystal",
          "color": "#fff; border: 1px solid #dedede",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$299.00",
          "salePrice": null,
          "url": "#B257-05CR",
          "status": "New",
          "stock": "In Stock",
          "lens": "Blue Hawaii",
          "lensId": "bluehawaii",
          "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "B257-05CR",
            "inactive": true,
            "material": "mauipure"
          }
        },
        {
          "id": "257-17C",
          "name": "Black Gloss with Antique Pewter",
          "color": "#808080",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/257-17C_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/257-17C_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/257-17C_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$299.00",
          "salePrice": null,
          "url": "#257-17C",
          "status": null,
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "257-17C",
            "inactive": true,
            "material": "mauipure"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": "true",
      "prescription": null,
      "product": true
    },
    {
      "name": "VOYAGER",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-full",
        "star-half",
        "star-empty"
      ],
      "vip": null,
      "tax": null,
      "variants": [
        {
          "id": "H178-10",
          "name": "Tortoise",
          "color": "#303032",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/H178-10_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/H178-10_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$219.00",
          "salePrice": null,
          "url": "#H178-10",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H178-10",
            "inactive": null,
            "material": "superthin"
          }
        },
        {
          "id": "178-02",
          "name": "Gloss Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/178-02_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/178-02_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/178-02_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$219.00",
          "salePrice": null,
          "url": "#178-02",
          "status": null,
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "178-02",
            "inactive": true,
            "material": "superthin"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": "true",
      "prescription": null,
      "product": true
    },
    {
      "name": "LEIA",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-full",
        "star-empty",
        "star-empty"
      ],
      "vip": null,
      "tax": null,
      "variants": [
        {
          "id": "RS708-26D",
          "name": "Brown Feathered",
          "color": "#543a10",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/RS708-26D_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/RS708-26D_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$299.00",
          "salePrice": null,
          "url": "#RS708-26D",
          "status": null,
          "stock": "In Stock",
          "lens": "Maui Rose®",
          "lensId": "mauirose",
          "lensFull": "Maui Rose® - Subtle rose tone is the most comfortable on the eyes.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "RS708-26D",
            "inactive": null,
            "material": "superthin"
          }
        },
        {
          "id": "HS708-10L",
          "name": "Tokyo Tortoise",
          "color": "#303032",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/HS708-10L_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/HS708-10L_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/HS708-10L_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$299.00",
          "salePrice": null,
          "url": "#HS708-10L",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "HS708-10L",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "GS708-03D",
          "name": "Blue with Rootbeer",
          "color": "#5353df",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/GS708-03D_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/GS708-03D_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/GS708-03D_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$299.00",
          "salePrice": null,
          "url": "#GS708-03D",
          "status": null,
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "GS708-03D",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "B708-02",
          "name": "Black Gloss",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/B708-02_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/B708-02_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/B708-02_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$299.00",
          "salePrice": null,
          "url": "#B708-02",
          "status": null,
          "stock": "In Stock",
          "lens": "Blue Hawaii",
          "lensId": "bluehawaii",
          "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "B708-02",
            "inactive": true,
            "material": "superthin"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": "true",
      "prescription": null,
      "product": true
    }
  ]
}
  • Content:
    .confirmation-products__item {
      @include clearfix;
      position: relative;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid $color-light;
      color: $color-darkest;
    
      @include breakpoint($breakpoint-xl) {
        min-height: 90px;
      }
    }
    
    .confirmation-products__item-image {
      display: inline-block;
      width: 84px;
      margin-right: 10px;
      vertical-align: middle;
    
      @include breakpoint($breakpoint-sm-only) {
        .confirmation-products--repairs & {
          position: relative;
          top: 25px;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        display: block;
        width: 113px;
        margin-top: 50px;
        float: left;
    
        .confirmation-products--repairs & {
          margin-top: 25px;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 225px;
        margin-right: 20px;
      }
    }
    
    .confirmation-products__item-details {
      margin-top: 10px;
    
      @include breakpoint($breakpoint-md) {
        margin-left: 125px;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-left: 245px;
      }
    }
    
    .confirmation-products__item-info {
      display: block;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-sm-only) {
        strong {
          display: none;
        }
      }
    }
    
    .confirmation-products__item-info--name {
      display: inline-block;
      width: calc(100% - 100px);
      font-weight: $font-weight-bold;
      text-transform: uppercase;
      vertical-align: middle;
    
      .confirmation-products--repairs & {
        position: relative;
        top: 25px;
      }
    
      @include breakpoint($breakpoint-md) {
        display: block;
        margin-left: 125px;
        font-size: 1.6rem;
        font-weight: $font-weight-normal;
        line-height: 1.9rem;
    
        .confirmation-products--repairs & {
          position: relative;
          top: 22px;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        width: auto;
        margin-left: 245px;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .confirmation-products__item-info--type {
      position: relative;
      top: -40px;
      color: $color-medium-dark;
      font-size: 1.2rem;
      line-height: 1.5rem;
    
      @include breakpoint($breakpoint-md ($breakpoint-xl - 1)) {
        top: -30px;
      }
    }
    
    .confirmation-products__item-info--qty,
    .confirmation-products__item-info--price {
      margin-top: 10px;
    
      @include breakpoint($breakpoint-sm-only) {
        strong {
          display: inline;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        color: $color-dark;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .confirmation-products__item-info--qty {
      float: left;
    
      @include breakpoint($breakpoint-md) {
        width: 200px;
        margin-left: 125px;
      }
    
      @include breakpoint($breakpoint-lg) {
        left: 640px;
      }
    
      @include breakpoint($breakpoint-xl) {
        position: absolute;
        top: 60px;
        margin-left: 0;
        float: none;
      }
    
      @include breakpoint($page-width-max) {
        left: 720px;
      }
    }
    
    .confirmation-products__item-info--price {
      position: relative;
      margin-right: 0;
      float: right;
    
      @include breakpoint($breakpoint-md) {
        margin-right: 60px;
      }
    
      @include breakpoint($breakpoint-xl) {
        position: absolute;
        top: 60px;
        right: 0;
        float: none;
      }
    
      @include breakpoint($page-width-max) {
        margin-right: 100px;
      }
    }
    
    .confirmation-products__item-tax {
      display: block;
      color: $color-medium-dark;
      font-size: 1.2rem;
      line-height: 2.0rem;
      text-align: right;
    }
    
    .confirmation-products__item-vip-info {
      position: absolute;
      right: 1px;
      margin-top: -32px;
      color: $color-dark;
      font-size: 1.2rem;
      font-weight: $font-weight-medium;
      line-height: 1.4rem;
      text-align: right;
    }
    
    .confirmation-products__item--repair {
      border-bottom-color: $color-medium-dark;
    
      @include breakpoint($breakpoint-md) {
        padding-bottom: 0;
      }
    }
    
    .confirmation-products__item-vip-card-value {
      display: block;
      white-space: nowrap;
    }
    
    .confirmation-products__item-vip-original-price {
      display: block;
      text-decoration: line-through;
    }
    
    .confirmation-products__repair-details {
      font-size: 1.4rem;
      line-height: 2.0rem;
    }
    
    .confirmation-products__repair-header {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;
    }
    
    .confirmation-products__repair-image {
      max-width: 85px;
    
      @include breakpoint($breakpoint-md) {
        max-width: 150px;
      }
    
      @include breakpoint($breakpoint-xl) {
        max-width: 225px;
        margin-right: 20px;
      }
    }
    
    .confirmation-products__repair-lens {
      display: block;
      color: $color-medium-dark;
      font-size: 1.2rem;
      line-height: 1.5rem;
    }
    
    .confirmation-products__repair-name {
      font-weight: $font-weight-bold;
    
      &:after {
        font-weight: $font-weight-bold;
        content: ' - ';
      }
    
      @include breakpoint($breakpoint-md) {
        display: block;
        font-size: 2.4rem;
        font-weight: $font-weight-normal;
        line-height: 2.8rem;
    
        &:after {
          content: none;
        }
      }
    }
    
    
    .confirmation-products__repair-variant {
      font-weight: $font-weight-bold;
    
      @include breakpoint($breakpoint-md) {
        display: block;
        font-weight: $font-weight-normal;
      }
    }
    
    .confirmation-products__repair-info-group {
      @include breakpoint($breakpoint-md) {
        margin-left: 150px;
    
        strong {
          display: block;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-left: 245px;
      }
    }
    
    .confirmation-products__repair-purchase,
    .confirmation-products__repair-note {
      display: block;
      margin-bottom: 10px;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 20px;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 0;
        margin-bottom: 15px;
        float: left;
      }
    }
    
    .confirmation-products__repair-purchase {
      @include breakpoint($breakpoint-xl) {
        width: span(3);
      }
    }
    
    .confirmation-products__repair-note {
      @include breakpoint($breakpoint-xl) {
        width: span(9);
      }
    }
    
    .confirmation-products__repair-list {
      margin: 0;
      padding: 0;
      list-style-type: none;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 15px;
      }
    
      @include breakpoint($breakpoint-xl) {
        clear: both;
      }
    }
    
    .confirmation-products__repair-item {
      margin: 10px 0;
      font-size: 1.6rem;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-md) {
        margin: 0;
        padding: 15px 0;
        border-top: 1px solid $color-light;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .confirmation-products__repair-includes {
      display: none;
    
      @include breakpoint($breakpoint-md) {
        display: block;
        margin-bottom: 0;
        padding-left: 15px;
      }
    }
    
    .confirmation-products__repair-include {
      @include breakpoint($breakpoint-md) {
        margin: 0;
        padding: 0;
        font-size: 1.4rem;
        line-height: 2.0rem;
        list-style-type: disc;
      }
    }
    
    .confirmation-products__item--surcharge {
      padding: 5px 0;
      border-bottom-style: none;
    }
    
    .confirmation-products__surcharge {
      display: flex;
      align-items: center;
      border-bottom-style: none;
    
      .icon--tools {
        width: 20px;
        height: 20px;
        margin: 0 33px;
        stroke: $color-dark;
      }
    
      .confirmation-products__repair-type {
        font-size: 1.4rem;
        font-weight: $font-weight-bold;
        line-height: 2.0rem;
      }
    
      .confirmation-products__surcharge-desc {
        display: none;
      }
    
      @include breakpoint($breakpoint-md) {
        display: block;
        position: relative;
        padding-bottom: 0;
    
        .icon--tools {
          position: absolute;
          top: 10px;
          left: 0;
          width: 30px;
          height: 30px;
          margin: 0 60px;
        }
    
        .confirmation-products__repair-type {
          margin-left: 150px;
          font-size: 2.4rem;
          font-weight: $font-weight-normal;
          line-height: 2.8rem;
        }
    
        .confirmation-products__surcharge-desc {
          display: block;
          margin-left: 150px;
          font-size: 1.4rem;
          line-height: 2.0rem;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .icon--tools {
          margin: 0 100px;
        }
    
        .confirmation-products__repair-type,
        .confirmation-products__surcharge-desc {
          margin-left: 245px;
        }
      }
    }
    
  • URL: /components/raw/confirmation-products/confirmation-products.scss
  • Filesystem Path: src/components/02-components/confirmation/confirmation-products/confirmation-products.scss
  • Size: 7.9 KB

There are no notes for this item.