<div class="checkout-cart checkout-cart--repairs">
    <h4 class="checkout-cart__title">Your Cart</h4>
    <ul class="checkout-cart__items">
        <li class="checkout-cart__item checkout-cart__item--repair">
            <div class="checkout-cart__repair-details">
                <div class="checkout-cart__repair-header">
                    <img class="checkout-cart__repair-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;580" alt="Gloss Black">
                    <div class="checkout-cart__repair">
                        <span class="checkout-cart__repair-lens">Non-prescription</span>
                        <strong>
              <span class="checkout-cart__repair-name">PEAHI</span>
              <span class="checkout-cart__repair-variant">202-02</span>
            </strong>
                    </div>
                </div>
                <div class="checkout-cart__repair-info-group">
                    <span class="checkout-cart__repair-purchase"><strong>Purchase Date:</strong> May 2017</span>
                    <span class="checkout-cart__repair-note"><strong>Repair Notes:</strong> Please fix my favourite frame as soon as possible.</span>
                    <ul class="checkout-cart__repair-list">
                        <li class="checkout-cart__repair-item">
                            <span class="checkout-cart__repair-type">Lens Replacement Package</span>
                            <span class="checkout-cart__repair-price">$75.00</span>
                        </li>
                        <li class="checkout-cart__repair-item">
                            <span class="checkout-cart__repair-type">Frame Replacement Package</span>
                            <span class="checkout-cart__repair-price">$50.00</span>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="checkout-cart__item checkout-cart__item--repair">
            <div class="checkout-cart__repair-details">
                <div class="checkout-cart__repair-header">
                    <img class="checkout-cart__repair-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;580" alt="Olive Stripe">
                    <div class="checkout-cart__repair">
                        <span class="checkout-cart__repair-lens">Prescription</span>
                        <strong>
              <span class="checkout-cart__repair-name">WATERWAYS</span>
              <span class="checkout-cart__repair-variant">HTS267-15C</span>
            </strong>
                    </div>
                </div>
                <div class="checkout-cart__repair-info-group">
                    <span class="checkout-cart__repair-purchase"><strong>Purchase Date:</strong> May 2017</span>
                    <span class="checkout-cart__repair-note"><strong>Repair Notes:</strong> Please fix my favourite frame as soon as possible.</span>
                    <ul class="checkout-cart__repair-list">
                        <li class="checkout-cart__repair-item">
                            <span class="checkout-cart__repair-type">Lens Replacement Package</span>
                            <span class="checkout-cart__repair-price">$75.00</span>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="checkout-cart__item checkout-cart__item--surcharge">
            <div class="checkout-cart__surcharge">
                <svg class="icon icon--tools">
  <use xlink:href="/assets/icons/icons.svg#tools"></use>
</svg>

                <span class="checkout-cart__repair-type">Standard Repair Process</span>
                <span class="checkout-cart__repair-price">$10.00</span>
            </div>
        </li>
    </ul>
    <div class="checkout-cart__footer">
        <ul class="checkout-cart__totals">
            <li class="checkout-cart__totals-item">
                <span class="checkout-cart__totals-label">Subtotal (3):</span>
                <span class="checkout-cart__totals-value">$210.00</span>
            </li>
            <li class="checkout-cart__totals-item">
                <span class="checkout-cart__totals-label">Est. Tax:</span>
                <span class="checkout-cart__totals-value checkout-cart__totals-value--tbd">Based on Shipping Information</span>
            </li>
            <li class="checkout-cart__totals-item">
                <span class="checkout-cart__totals-label">Delivery:</span>
                <span class="checkout-cart__totals-value checkout-cart__totals-value--tbd">Based on Shipping Method</span>
            </li>
            <li class="checkout-cart__totals-item checkout-cart__totals-item--total">
                <span class="checkout-cart__totals-label">Total:</span>
                <span class="checkout-cart__totals-value">$210.00</span>
            </li>
        </ul>
        <div class="checkout-cart__edit">
            <button class="button button--outlined">Edit Repair</button>

            <span class="checkout-cart__edit-footer"></span>
        </div>
    </div>
</div>
<div class="checkout-cart checkout-cart--{{_self.name}}">
  {{#if title}}
  <h4 class="checkout-cart__title">{{title}}</h4>
  {{/if}}
  {{#if products}}
  <ul class="checkout-cart__items">
    {{#each products}}
    <li class="checkout-cart__item{{#if surcharge}} checkout-cart__item--surcharge{{/if}}{{#if repair}} checkout-cart__item--repair{{/if}}">
      {{#if product}}
      <table class="checkout-cart__item-details">
        <tr>
          <td><img class="checkout-cart__item-image" src="{{productImage variants.0.images.front 120}}" alt="{{variants.0.name}}"></td>
          <td class="checkout-cart__item-qty"><strong>Qty:</strong> 1</td>
          <td class="checkout-cart__item-price">
            {{variants.0.price}}
            {{#if tax}}
            <div class="checkout-cart__item-tax-info">
              <span class="checkout-cart__item-tax-value">{{tax}}</span>
            </div>
            {{/if}}
            {{#if vip}}
            <div class="checkout-cart__item-vip-info">
              <span class="checkout-cart__item-vip-card-value">VIP Card {{vip.cardValue}}</span>
              <span class="checkout-cart__item-vip-original-price">{{vip.originalPrice}}</span>
            </div>
            {{/if}}
          </td>
        </tr>
      </table>
      <div class="checkout-cart__item-info-group">
        <span class="checkout-cart__item-name"><strong>{{name}}</strong> - {{variants.0.id}}</span>
        <span class="checkout-cart__item-info">{{variants.0.name}}</span>
        <span class="checkout-cart__item-info">{{variants.0.lens}} | {{variants.0.lensMaterial}}</span>
        <span class="checkout-cart__item-info">Single Gradient</span>
      </div>
      {{/if}}
      {{#if repair}}
      <div class="checkout-cart__repair-details">
        <div class="checkout-cart__repair-header">
          <img class="checkout-cart__repair-image" src="{{productImage variants.0.images.front 580}}" alt="{{variants.0.name}}">
          <div class="checkout-cart__repair">
            {{#if lensType}}<span class="checkout-cart__repair-lens">{{lensType}}</span>{{/if}}
            <strong>
              <span class="checkout-cart__repair-name">{{name}}</span>
              <span class="checkout-cart__repair-variant">{{variants.0.id}}</span>
            </strong>
          </div>
        </div>
        <div class="checkout-cart__repair-info-group">
          {{#if purchaseDate}}<span class="checkout-cart__repair-purchase"><strong>Purchase Date:</strong> {{purchaseDate}}</span>{{/if}}
          {{#if repairNote}}<span class="checkout-cart__repair-note"><strong>Repair Notes:</strong> {{repairNote}}</span>{{/if}}
          {{#if repairs}}
          <ul class="checkout-cart__repair-list">
            {{#each repairs}}
            <li class="checkout-cart__repair-item">
              <span class="checkout-cart__repair-type">{{{repairType}}}</span>
              <span class="checkout-cart__repair-price">{{repairPrice}}</span>
            </li>
            {{/each}}
          </ul>
          {{/if}}
        </div>
      </div>
      {{/if}}
      {{#if surcharge}}
      <div class="checkout-cart__surcharge">
        {{#if icon}}{{render (dynamicComponent icon)}}{{/if}}
        <span class="checkout-cart__repair-type">{{repairType}}</span>
        <span class="checkout-cart__repair-price">{{repairPrice}}</span>
      </div>
      {{/if}}
    </li>
    {{/each}}
  </ul>
  {{/if}}
  <div class="checkout-cart__footer">
    {{#if totals}}
    <ul class="checkout-cart__totals">
      {{#each totals}}
      <li class="checkout-cart__totals-item">
        <span class="checkout-cart__totals-label">{{label}}:</span>
        <span class="checkout-cart__totals-value{{#if modifier}} checkout-cart__totals-value--{{modifier}}{{/if}}">{{value}}</span>
      </li>
      {{/each}}
      {{#if total}}
      <li class="checkout-cart__totals-item checkout-cart__totals-item--total">
        <span class="checkout-cart__totals-label">{{total.label}}:</span>
        <span class="checkout-cart__totals-value">{{total.value}}</span>
      </li>
      {{/if}}
    </ul>
    {{/if}}
    {{#if editButton}}
    <div class="checkout-cart__edit">
      {{render (dynamicVariant 'buttons' editButton.variant) editButton merge=true}}
      <span class="checkout-cart__edit-footer">{{editButton.footer}}</span>
    </div>
    {{/if}}
  </div>
</div>
{
  "pageCss": [
    "checkout"
  ],
  "title": "Your Cart",
  "products": [
    {
      "repair": true,
      "lensType": "Non-prescription",
      "purchaseDate": "May 2017",
      "repairNote": "Please fix my favourite frame as soon as possible.",
      "repairs": [
        {
          "repairType": "Lens Replacement Package",
          "repairPrice": "$75.00"
        },
        {
          "repairType": "Frame Replacement Package",
          "repairPrice": "$50.00"
        }
      ],
      "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": 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": "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": 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": "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": "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-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": "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",
            "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": "New",
          "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": 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-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
    },
    {
      "repair": true,
      "lensType": "Prescription",
      "purchaseDate": "May 2017",
      "repairNote": "Please fix my favourite frame as soon as possible.",
      "repairs": [
        {
          "repairType": "Lens Replacement Package",
          "repairPrice": "$75.00"
        }
      ],
      "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": 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": "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": 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": "GS267-02MR",
            "inactive": true,
            "material": "superthin"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": "true",
      "prescription": null
    },
    {
      "surcharge": true,
      "repairPrice": "$10.00",
      "repairType": "Standard Repair Process",
      "icon": "icons--tools"
    }
  ],
  "totals": [
    {
      "label": "Subtotal (3)",
      "value": "$210.00"
    },
    {
      "label": "Est. Tax",
      "value": "Based on Shipping Information",
      "modifier": "tbd"
    },
    {
      "label": "Delivery",
      "value": "Based on Shipping Method",
      "modifier": "tbd"
    }
  ],
  "total": {
    "label": "Total",
    "value": "$210.00"
  },
  "editButton": {
    "variant": "outlined",
    "buttonValue": "Edit Repair",
    "footer": null
  },
  "repairItem": true
}
  • Content:
    .checkout-cart__title {
      margin: 0 0 25px;
      padding-bottom: 7px;
      border-bottom: 1px solid $color-light;
      color: $color-dark;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 18px;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    
      @include breakpoint($page-width-checkout-max) {
        padding-bottom: 4px;
      }
    }
    
    .checkout-cart__items {
      @include reset-list;
    }
    
    .checkout-cart__item {
      position: relative;
      margin-bottom: 10px;
      padding-bottom: 15px;
      border-bottom: 1px solid $color-light;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      &:last-child {
        margin-bottom: 0;
        border-bottom: 0;
      }
    
      @include breakpoint($breakpoint-md ($page-width-checkout-max - 1)) {
        position: relative;
        min-height: 110px;
      }
    }
    
    .checkout-cart__item-details {
      width: 100%;
      margin-bottom: 10px;
      border-collapse: collapse;
      table-layout: fixed;
    }
    
    .checkout-cart__item-image {
      max-width: 120px;
    }
    
    .checkout-cart__item-qty {
      padding-left: 40px;
    
      @include breakpoint($breakpoint-md ($page-width-checkout-max - 1)) {
        position: absolute;
        bottom: 10px;
        left: 160px;
      }
    
      @include breakpoint($breakpoint-md) {
        padding-left: 20px;
      }
    }
    
    .checkout-cart__item-price {
      font-weight: $font-weight-bold;
      text-align: right;
    
      @include breakpoint($breakpoint-md ($page-width-checkout-max - 1)) {
        position: absolute;
        right: 12px;
        bottom: 10px;
      }
    }
    
    .checkout-cart__item-tax-info {
      color: $color-medium-dark;
      font-size: 1.2rem;
      font-weight: $font-weight-normal;
      line-height: 2.0rem;
    }
    
    .checkout-cart__item-vip-info {
      color: $color-medium-dark;
      font-size: 1.1rem;
      font-weight: $font-weight-normal;
      line-height: 1.5rem;
    }
    
    .checkout-cart__item-vip-card-value {
      display: block;
      white-space: nowrap;
    }
    
    .checkout-cart__item-vip-original-price {
      display: block;
      text-decoration: line-through;
    }
    
    .checkout-cart__item-info-group {
      // Achieves a much different layout at these page widths than all others.
      @include breakpoint($breakpoint-md ($page-width-checkout-max - 1)) {
        position: relative;
        top: -60px;
        left: 180px;
        margin-bottom: -40px;
      }
    }
    
    .checkout-cart__item-name {
      display: block;
      margin-bottom: 10px;
      clear: both;
      color: $color-medium-dark;
    
      strong {
        color: $color-darkest;
      }
    }
    
    .checkout-cart__item-info {
      display: block;
    }
    
    .checkout-cart__footer {
      padding: 13px $gutter-width-half 16px;
      background-color: $color-lighter;
      color: $color-darkest;
    
      .button {
        display: block;
        margin: 27px auto 4px;
        padding: 0 20px;
        line-height: 3.0rem;
      }
    
      @include breakpoint($breakpoint-md) {
        @include clearfix;
    
        .button {
          width: 100%;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .button {
          width: auto;
        }
      }
    }
    
    .checkout-cart__totals {
      @include reset-list;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-md ($page-width-checkout-max - 1)) {
        width: calc(55% - 10px);
        margin-left: 0;
        float: right;
      }
    }
    
    .checkout-cart__totals-value {
      float: right;
    }
    
    .checkout-cart__totals-value--tbd {
      color: $color-medium-dark;
    }
    
    .checkout-cart__totals-item--total {
      margin-top: 10px;
      font-weight: $font-weight-bold;
    }
    
    .checkout-cart__edit {
      @include breakpoint($breakpoint-md ($page-width-checkout-max - 1)) {
        width: calc(45% - 10px);
        float: left;
      }
    }
    
    .checkout-cart__edit-footer {
      display: block;
      font-size: 1.2rem;
      line-height: 2.0rem;
      text-align: center;
    }
    
    .checkout-cart--repairs {
      position: relative;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      .checkout-cart__title {
        margin-bottom: 10px;
      }
    
      .button--plain-text {
        padding: 0;
        color: $color-error;
        line-height: inherit;
      }
    }
    
    .checkout-cart__item--repair {
      padding-top: 10px;
      border-bottom-color: $color-medium-dark;
    }
    
    [class^='checkout-cart__repair-']  {
      display: block;
    }
    
    .checkout-cart__repair-header {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;
    }
    
    .checkout-cart__repair-image {
      position: static;
      max-width: 85px;
    }
    
    .checkout-cart__repair-lens {
      display: block;
      color: $color-medium-dark;
      font-size: 1.2rem;
      line-height: 1.5rem;
    }
    
    .checkout-cart__repair-name {
      display: inline;
    
      &:after {
        content: ' -';
      }
    }
    
    .checkout-cart__repair-variant {
      display: inline;
    }
    
    .checkout-cart__repair-info-group {
      padding: 0;
    
      span {
        margin-bottom: 10px;
      }
    }
    
    .checkout-cart__repair-purchase {
      display: block;
    }
    
    .checkout-cart__repair-note {
      display: block;
      margin: 10px 0 0;
    }
    
    .checkout-cart__repair-list {
      padding-left: 0;
    }
    
    .checkout-cart__repair-item {
      display: flex;
      justify-content: space-between;
    }
    
    .checkout-cart__repair-type {
      font-size: 1.6rem;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.4rem;
        font-weight: $font-weight-bold;
        line-height: 2.0rem;
      }
    }
    
    .checkout-cart__repair-price {
      font-weight: $font-weight-bold;
      text-align: right;
    }
    
    .checkout-cart__surcharge {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 0 15px;
      font-weight: $font-weight-bold;
    
      & > span {
        display: block;
      }
    
      .checkout-cart__repair-type {
        flex-grow: 1;
        margin: 30px 0 25px;
        font-size: 1.4rem;
        line-height: 2.0rem;
        text-align: left;
      }
    
      .checkout-cart__repair-price {
        position: static;
        flex-grow: 0;
        margin-left: 25px;
        padding-left: $gutter-width;
        text-align: right;
      }
    
      .icon,
      .checkout-cart__repair-type,
      .checkout-cart__repair-price {
        display: flex;
        margin: 0;
      }
    
      .icon {
        display: block;
        max-width: 25px;
        max-height: 25px;
        margin: 0 30px;
      }
    }
    
    .checkout-cart__item--surcharge {
      min-height: unset;
      padding-bottom: 0;
    }
    
  • URL: /components/raw/checkout-cart/checkout-cart.scss
  • Filesystem Path: src/components/02-components/checkout/checkout-cart/checkout-cart.scss
  • Size: 6 KB

There are no notes for this item.