<div class="header-cart header-cart--maui-jim-repairs header-cart--express ">
    <div class="header-cart__products">
        <div class="header-cart__item header-cart__item--repair" aria-label="Repair">
            <img class="header-cart__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;330" alt="Gloss Black front view">
            <ul class="header-cart__item-list" aria-label="Repair Details">
                <li class="header-cart__item-info header-cart__item-info--repair-type">Repair Type: Lens Replacement Package</li>
                <li class="header-cart__item-info header-cart__item-info--repair-price">Repair Price: $75.00</li>
                <li class="header-cart__item-info header-cart__item-info--repair-name">Name: PEAHI</li>
                <li class="header-cart__item-info header-cart__item-info--repair-variant">SKU: 202-02</li>
                <li class="header-cart__item-info header-cart__item-info--repair-lens">Lens Type: Non-prescription Sunglasses</li>
            </ul>
            <button class="header-cart__item-remove button button--plain-text">Remove</button>
        </div>
        <div class="header-cart__item header-cart__item--surcharge" aria-label="Surcharge">
            <svg class="icon icon--tools">
  <use xlink:href="/assets/icons/icons.svg#tools"></use>
</svg>

            <ul class="header-cart__item-list" aria-label="Surcharge Details">
                <li class="header-cart__item-info header-cart__item-info--repair-type">Repair Type: Standard Repair Process</li>
                <li class="header-cart__item-info header-cart__item-info--repair-price">Repair Price: $10.00 fee includes nose pads and temples</li>
            </ul>
        </div>
    </div>
    <div class="header-cart__footer">
        <div class="header-cart__subtotal">
            <span class="header-cart__subtotal-label">Subtotal (2 items):</span>
            <span class="header-cart__subtotal-value">$100.00</span>
        </div>
        <div class="header-cart__actions">
            <a class="header-cart__action button button--primary" href="#">View your cart</a>
        </div>
        <div class="header-cart__express">
            <div class="header-cart__express-label-header">
                <span class="header-cart__express-label">Express Checkout</span>
            </div>
            <iframe class="header-cart__express-iframe" src="../../assets/static/paypal.html" frameborder="0"></iframe>
        </div>
    </div>
</div>
<div class="header-cart header-cart--{{_self.name}}{{#if cart.footer.subtotal.tax}} header-cart--tax{{/if}}{{#if cart.footer.express}} header-cart--express{{/if}} {{#if b2b}}b2b{{/if}}">
  {{#if cart.products}}
  <div class="header-cart__products">
    {{#each cart.products}}
    {{#if product}}
    <div class="header-cart__item" aria-label="{{name}}">
      <a href="{{variants.0.url}}"><img class="header-cart__item-image" src="{{productImage variants.0.images.front 330}}" alt="{{variants.0.name}} front view"></a>
      <span class="header-cart__item-info header-cart__item-info--name">{{name}}</span>
      <ul class="header-cart__item-list" aria-label="Product Details">
        <li class="header-cart__item-info">Frame Color: {{variants.0.name}}</li>
        <li class="header-cart__item-info">Lens Color: {{variants.0.lens}}</li>
        <li class="header-cart__item-info">Lens Material: {{variants.0.lensMaterial}}</li>
        <li class="header-cart__item-info">Gradient: Single Gradient</li>
        {{#if vip}}
        <li class="header-cart__item-vip-info header-cart__item-vip-info--card-value">VIP Card: {{vip.cardValue}}</li>
        <li class="header-cart__item-vip-info header-cart__item-vip-info--original-price"><span class="u-visually-hidden">Original Price:</span> {{vip.originalPrice}}</li>
        {{/if}}
        <li class="header-cart__item-info header-cart__item-info--qty">Qty: 1</li>
        <li class="header-cart__item-info header-cart__item-info--price">Price: {{variants.0.price}}</li>
      </ul>
      <button class="header-cart__item-remove button button--plain-text">Remove</button>
    </div>
    {{/if}}
    {{#if b2b}}
    <div class="header-cart__item" aria-label="{{name}}">
      <a href="{{variants.0.url}}"><img class="header-cart__item-image" src="{{productImage variants.0.images.front 330}}" alt="{{variants.0.name}} front view"></a>
      <span class="header-cart__item-info header-cart__item-info--name">{{name}}</span>
      <span class="header-cart__item-info header-cart__item-info--sku">SKU: {{variants.0.id}}</span>
      <ul class="header-cart__item-list" aria-label="Product Details">
        <li class="header-cart__item-info--qty">Qty: 1</li>
        <li class="header-cart__item-info--price">Price: {{variants.0.price}}</li>
      </ul>
      <button class="header-cart__item-remove button button--plain-text">Remove</button>
    </div>
    {{/if}}
    {{#if orderReference}}
    <div class="header-cart__item" aria-label="{{name}}">
      <a href="{{variants.0.url}}"><img class="header-cart__item-image" src="{{productImage variants.0.images.front 330}}" alt="{{variants.0.name}} front view"></a>
      <span class="header-cart__item-info header-cart__item-info--name">{{name}}</span>
      <span class="header-cart__item-info header-cart__item-info--sku">SKU: {{variants.0.id}}</span>
      <ul class="header-cart__item-list" aria-label="Product Details">
        <li class="header-cart__item-info"><span class="header-cart__item-info--label">ORDER
           REFERENCE OR PATIENT NAME:</span> {{ref}}</li>
        <li class="header-cart__item-info--qty">Qty: 1</li>
        <li class="header-cart__item-info--price">Price: {{variants.0.price}}</li>
      </ul>
      <button class="header-cart__item-remove button button--plain-text">Remove</button>
    </div>
    {{/if}}
    {{#if repair}}
    <div class="header-cart__item header-cart__item--repair" aria-label="Repair">
      <img class="header-cart__item-image" src="{{productImage variants.0.images.front 330}}" alt="{{variants.0.name}} front view">
      {{#each repairs}}
      <ul class="header-cart__item-list" aria-label="Repair Details">
        <li class="header-cart__item-info header-cart__item-info--repair-type">Repair Type: {{{repairType}}}</li>
        <li class="header-cart__item-info header-cart__item-info--repair-price">Repair Price: {{repairPrice}}</li>
      {{/each}}
        <li class="header-cart__item-info header-cart__item-info--repair-name">Name: {{name}}</li>
        <li class="header-cart__item-info header-cart__item-info--repair-variant">SKU: {{variants.0.id}}</li>
        <li class="header-cart__item-info header-cart__item-info--repair-lens">Lens Type: {{lensType}}</li>
      </ul>
      <button class="header-cart__item-remove button button--plain-text">Remove</button>
    </div>
    {{/if}}
    {{#if surcharge}}
    <div class="header-cart__item header-cart__item--surcharge" aria-label="Surcharge">
      {{#if icon}}{{render (dynamicComponent icon)}}{{/if}}
      <ul class="header-cart__item-list" aria-label="Surcharge Details">
        <li class="header-cart__item-info header-cart__item-info--repair-type">Repair Type: {{repairType}}</li>
        <li class="header-cart__item-info header-cart__item-info--repair-price">Repair Price: {{repairPrice}}</li>
      </ul>
    </div>
    {{/if}}
    {{/each}}
  </div>
  <div class="header-cart__footer">
    {{#if cart.footer.subtotal}}
    <div class="header-cart__subtotal">
      <span class="header-cart__subtotal-label">{{cart.footer.subtotal.label}}:</span>
      <span class="header-cart__subtotal-value">{{cart.footer.subtotal.value}}</span>
      {{#if cart.footer.subtotal.tax}}
      <span class="header-cart__subtotal-tax">{{cart.footer.subtotal.tax}}</span>
      {{/if}}
    </div>
    {{/if}}
    {{#if cart.footer.actions}}
    <div class="header-cart__actions">
      {{#each cart.footer.actions}}
      <a class="header-cart__action button button--{{modifier}}" href="{{this.path}}">{{value}}</a>
      {{/each}}
    </div>
    {{/if}}
    {{#if cart.footer.express}}
    <div class="header-cart__express">
      <div class="header-cart__express-label-header">
        <span class="header-cart__express-label">{{cart.footer.express.heading}}</span>
      </div>
      <iframe class="header-cart__express-iframe" src="{{path '/assets/static/paypal.html'}}" frameborder="0"></iframe>
    </div>
    {{/if}}
  </div>
  {{else}}
  <div class="header-cart__empty">
    <div class="header-cart__empty-inner">
      <img class="header-cart__empty-brand-logo" src="{{cart.empty.brandLogo}}">
      <span class="header-cart__empty-label">{{cart.empty.label}}</span>
      <a class="header-cart__empty-button button button--primary">{{cart.empty.buttonValue}}</a>
    </div>
  </div>
  {{/if}}
</div>
{
  "cart": {
    "header": {
      "title": "Your Cart"
    },
    "products": [
      {
        "repair": true,
        "lensType": "Non-prescription Sunglasses",
        "repairs": [
          {
            "repairType": "Lens Replacement Package",
            "repairPrice": "$75.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-full",
          "star-half",
          "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": "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": "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-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": true
      },
      {
        "surcharge": true,
        "repairPrice": "$10.00 fee includes nose pads and temples",
        "repairType": "Standard Repair Process",
        "icon": "icons--tools"
      }
    ],
    "footer": {
      "subtotal": {
        "label": "Subtotal (2 items)",
        "value": "$100.00",
        "tax": null
      },
      "actions": [
        {
          "modifier": "primary",
          "value": "View your cart",
          "path": "#"
        }
      ],
      "express": {
        "heading": "Express Checkout"
      }
    }
  }
}
  • Content:
    // Note: This entire stylesheet is served as critical CSS.
    /* critical:start */
    .header-cart {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    
      // Forces scrollbar visibility.
      // http://simurai.com/blog/2011/07/26/webkit-scrollbar
      @include breakpoint($breakpoint-md) {
        ::-webkit-scrollbar {
          width: 7px;
          -webkit-appearance: none;
        }
    
        ::-webkit-scrollbar-thumb {
          border-radius: 4px;
          background-color: rgba(0, 0, 0, .5);
          box-shadow: 0 0 1px rgba(255, 255, 255, .5);
        }
      }
    }
    
    .header-flyout--cart {
      @include breakpoint($breakpoint-md) {
        overflow-y: hidden;
      }
    }
    
    .header-cart__count {
      padding-top: 1rem;
      float: right;
      color: $color-darkest;
      font-size: 1.2rem;
    
      &:before {
        width: 1rem;
        height: 1rem;
        margin-right: 1rem;
        float: left;
        border-radius: .75rem;
        background-color: $color-primary;
        content: '';
      }
    }
    
    .header-cart__title {
      color: $color-dark;
      font-size: 2.4rem;
      font-weight: $font-weight-bold;
      line-height: 3.5rem;
    
      & > .icon {
        position: relative;
        top: -2px;
        height: 9px;
        padding-left: 5px;
      }
    }
    
    .header-cart__item-count {
      position: relative;
      float: right;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 4.0rem;
    
      &:not(.header-cart__item-count--empty):before {
        display: block;
        position: absolute;
        top: calc(50% - 6px);
        left: -20px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: $color-primary;
        content: '';
      }
    }
    
    .header-cart__products {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 141px;
      left: 10px;
      padding-right: 10px;
      overflow-y: scroll;
      overflow-x: hidden;
    
      .header-cart--express & {
        bottom: 276px;
      }
    
      .header-cart--tax & {
        bottom: 161px;
      }
    
      .header-cart--express.header-cart--tax & {
        bottom: 296px;
      }
    }
    
    .header-cart__item {
      @include clearfix;
      padding-bottom: 5px;
      border-bottom: 1px solid $color-light;
    
      @if $brand == 'b2b' {
        padding-top: 2rem;
      }
    
      &:last-child {
        border-bottom: 0;
      }
    }
    
    .header-cart__item-image {
      max-height: 117px;
      margin: 0 auto;
    
      @if $brand == 'b2b' {
        max-height: 3.5rem;
        float: left;
      }
    }
    
    .header-cart__item-list {
      padding-left: 0;
      list-style-type: none;
    }
    
    .header-cart__item-info {
      display: block;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    }
    
    .header-cart__item-info--name {
      font-weight: $font-weight-bold;
    
      //@if $b2b {
      .b2b & {
        font-size: 1.6rem;
      }
    }
    
    .header-cart__item-info--label {
      font-weight: $font-weight-bold;
    }
    
    .header-cart__item-vip-info {
      display: block;
      font-size: 1.1rem;
      line-height: 1.4rem;
      text-align: right;
    
      &--card-value {
        margin-top: -20px;
        white-space: nowrap;
      }
    
      &--original-price {
        text-decoration: line-through;
      }
    }
    
    .header-cart__item-info--qty,
    .header-cart__item-info--price {
      margin-top: 10px;
    
      @if $brand == 'b2b' {
        color: $color-darkest;
      }
    }
    
    .header-cart__item-info--qty {
      float: left;
    }
    
    .header-cart__item-info--price {
      float: right;
    }
    
    .header-cart__item-remove {
      padding: 0;
      float: right;
      clear: both;
      color: $color-error;
      line-height: 4.0rem;
    
      &:hover {
        color: $color-error;
      }
    }
    
    .header-cart__footer {
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: $color-lighter;
      box-sizing: border-box;
    }
    
    .header-cart__subtotal {
      height: 50px;
      margin: 0 $gutter-width-half;
      border-bottom: 1px solid $color-light;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 5.0rem;
    
      .header-cart--tax & {
        height: 70px;
      }
    }
    
    .header-cart__express {
      .header-cart__express-label-header {
        color: $color-darkest;
        font-size: 1.4rem;
        line-height: 5.0rem;
        text-align: center;
        text-transform: uppercase;
        overflow: hidden;
    
        &:before,
        &:after {
          display: inline-block;
          position: relative;
          width: 50%;
          height: 1px;
          background-color: $color-light;
          content: '';
          vertical-align: middle;
        }
    
        &:before {
          right: .5em;
          margin-left: -50%;
        }
    
        &:after {
          left: .5em;
          margin-right: -50%;
        }
      }
    
      .header-cart__express-iframe {
        width: 100%;
        height: 80px;
      }
    }
    
    .header-cart__subtotal-value {
      float: right;
      font-weight: $font-weight-bold;
    }
    
    .header-cart__subtotal-tax {
      margin-top: -15px;
      float: right;
      clear: both;
      color: $color-medium-dark;
      font-size: 1.2rem;
      line-height: 2.0rem;
    }
    
    .header-cart__actions {
      @include clearfix;
    }
    
    .header-cart__action {
      display: block;
      width: calc(100% - 60px);
      margin: 20px 30px;
      padding: 0;
      float: left;
      box-sizing: border-box;
    }
    
    .header-cart__payment-methods {
      @include reset-list;
      display: flex;
      position: relative;
      justify-content: space-between;
      height: 30px;
      margin: 0 $gutter-width-half;
      padding: 10px 0;
      border-top: 1px solid $color-light;
      box-sizing: border-box;
    
      .payment-method {
        height: 30px;
      }
    }
    
    .header-cart__empty {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
    }
    
    .header-cart__empty-inner {
      position: absolute;
      top: 50%;
      width: 100%;
      transform: translateY(-50%);
      text-align: center;
    }
    
    .header-cart__empty-brand-logo {
      margin: 0 auto;
    }
    
    .header-cart__empty-label {
      display: block;
      margin: 20px 0;
      color: $color-darkest;
      font-size: 1.6rem;
      line-height: 1.9rem;
    }
    
    .header-cart__empty-button {
      padding: 0 20px;
    }
    
    .header-cart__item-info--repair-name {
      font-weight: $font-weight-bold;
    }
    
    .header-cart__item-info--repair-type {
      font-weight: $font-weight-bold;
    }
    
    .header-cart__item-repair {
      @include clearfix;
      margin-bottom: 10px;
    }
    
    .header-cart__item--repair {
      @include clearfix;
      padding-bottom: 5px;
      border-bottom: 1px solid $color-light;
    
      .header-cart__item-info--repair-type {
        display: inline;
      }
    }
    
    .header-cart__item--surcharge {
      padding-top: 30px;
      padding-bottom: 15px;
    
      & > span {
        display: block;
      }
    
      .icon {
        display: block;
        margin: 0 auto;
      }
    
      .header-cart__item-info--repair-type {
        margin: 30px 0 0;
      }
    
      .header-cart__item-info--repair-price {
        position: static;
        width: 100%;
        float: none;
        clear: both;
        text-align: left;
      }
    }
    /* critical:end */
    
  • URL: /components/raw/mini-cart/mini-cart.scss
  • Filesystem Path: src/components/02-components/mini-cart/mini-cart.scss
  • Size: 6.3 KB

There are no notes for this item.