/*
* Shopify Ajax Cart
* Copyright 2014 Shopify Inc.
* Author Carson Shold @cshold
* Built with Sass - http://sass-lang.com/

* Some things to know about this file:
    - This file uses the same grid as timber.scss.liquid.
      - If you want to use this separately, please include the following sections from timber.scss.liquid:
        * #Breakpoint and Grid Variables
        * #Grid Setup
      - You may need to massage the code so it doesn't reference any non-existent mixins.
*
* This file includes
*    - Sass helpers
*    - Colour variables to customize
*    - Styles for cart drawer, modal, and the flipped add to cart button
*/

// ==============================================================================
// Sass Helpers
// ==============================================================================
@mixin border-box($type: border-box) {
  -webkit-box-sizing: $type;
  -moz-box-sizing: $type;
  box-sizing: $type;
}

@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin transform-origin($origin) {
  -webkit-transform-origin: $origin;
  -moz-transform-origin: $origin;
  -o-transform-origin: $origin;
  -ms-transform-origin: $origin;
  transform-origin: $origin;
}

@mixin transform-style($style: preserve-3d) {
  -moz-transform-style: $style;
  -webkit-transform-style: $style;
  -o-transform-style: $style;
  transform-style: $style;
}

@mixin rotateX($t) {
  -webkit-transform: rotateX($t);
  -moz-transform: rotateX($t);
  -o-transform: rotateX($t);
  -ms-transform: rotateX($t);
  transform: rotateX($t);
}

@mixin perspective ($p) {
  -webkit-perspective: $p;
  -moz-perspective: $p;
  -o-perspective: $p;
  perspective: $p;
}

@mixin backface($visibility: hidden) {
  -moz-backface-visibility: $visibility;
  -webkit-backface-visibility: $visibility;
  -o-backface-visibility: $visibility;
  backface-visibility: $visibility;
}

@mixin transform($transform) {
  -webkit-transform: $transform;
     -moz-transform: $transform;
      -ms-transform: $transform;
       -o-transform: $transform;
          transform: $transform;
}

@mixin transition($transition) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -ms-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}

@mixin clearfix() {
  &:after {
    content: "";
    display: table;
    clear: both;
  }

  *zoom: 1;
}

.ajaxify-clearfix {
  @include clearfix;
}


// ==============================================================================
// Ajaxify Colours
// ==============================================================================
$ajaxifyGrey: #444;
$ajaxifyGreyLight: #d3d3d3;
$ajaxifyGreyDark: #454545;

$drawerBackgroundColor: #222;
$drawerTextColor: #fff;
$drawerLinkColor: #fff;

/* Border colors from Timber */
$borderColor: #e5e5e5;

$quantityTextColor: #fff;

.ajaxify-grey {
  color: $ajaxifyGrey;
}

// ==============================================================================
// Ajaxify Loader
// ==============================================================================
.ajaxifyCart-loader {
  display: none;
  opacity: 0;
  position: absolute;
  right: -24px;
  top: 50%;
  margin-top: -5px;
  padding: 0;
  width: 16px;
  height: 16px;
  @include transition(opacity 0.1s);
  background-repeat: no-repeat;
  background-color: #fff;
  background-image: url(data:image/gif;base64,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);

  .flip--is-loading & {
    display: block;
    opacity: 1;
  }
}

// ==============================================================================
// Ajaxify Flip
// ==============================================================================
form[action="/cart/add"],
form[action^="/cart/add"] {
  @include clearfix;
}

.flip {
  display: block;
  float: left;
  position: relative;
  @include perspective(600px);
}

.flip-front,
.flip-back {
  @include transform-style(preserve-3d);
  @include transition(all 0.3s);
  @include backface(hidden);
  overflow: hidden;

  position: relative;
  z-index: 10;

  &:focus {
    outline: 0 none;
  }
}

.flip-front {
  @include transform-origin(100% 0);

  .is-flipped & {
    @include transform(rotateX(92deg) translateY(-50%));
  }
}

.flip-back {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  text-align: center;
  background-color: #464646;
  @include border-box();
  @include transform(rotateX(-90deg) translateY(50%));
  @include transform-origin(0 100%);

  .is-flipped & {
    opacity: 1;
    @include rotateX(0);
  }
}

// Backup for no transforms
.no-transforms {
  .flip-back {
    display: none;
  }

  &.is-flipped {
    .flip-back {
      display: block;
    }
  }
}

.flip-extra {
  display: inline;
  position: relative;
  padding: 2px 10px;
  opacity: 0;
  visibility: hidden;
  overflow: visible;
  white-space: nowrap;
  z-index: 5;
  top: 4px;
  line-height: 34px;
  @include transition(opacity 450ms cubic-bezier(0.57,.06,.05,.95));

  .is-flipped + & {
    opacity: 1;
    visibility: visible;
    @include transition(opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95) 750ms);
  }
}

.flip-cart {
  display: inline-block;
  padding: 0 8px;
}

.flip-checkout {
  margin: 0;
}


// ==============================================================================
// Ajaxify Cart - General
// ==============================================================================
.ajaxifyCart--content {
  position: relative;
  @include perspective(1000px);
  @include transform-style(preserve-3d);
  @include transition(all 450ms cubic-bezier(0.57,.06,.05,.95));
  padding-top: 30px;
  padding-bottom: 30px;

  .is-visible & {
    @include transition(all 550ms cubic-bezier(0.57, 0.06, 0.05, 0.95));
  }

  form {
    margin-bottom: 0;
  }
}

// Row and column spacing
.ajaxifyCart--products {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid $ajaxifyGreyDark;
}

.ajaxifyCart--product {
  position: relative;
  @include transform-origin(top);
  @include transition(all 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95));
  @include rotateX(0deg);
  max-height: 200px;
  padding: 10px 0;

  &:first-child {
    padding-top: 0;
  }

  &.is-removed {
    overflow: hidden;
    opacity: 0;
    padding: 0;
    @include rotateX(-92deg);
    @include backface(hidden);
    @include transition(all 450ms cubic-bezier(0.57,.06,.05,.95));
    max-height: 0;
  }
}

.ajaxifyCart--row {
  clear: both;
  @include clearfix;

  a {
    text-decoration: none;

    &.ajaxifyCart--remove {
      text-decoration: underline;
    }
  }
}

.ajaxCart--product-image {
  display: block;
  overflow: hidden;
  margin-bottom: 15px;

  img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
}


// ==============================================================================
// #Quantity Selectors
// ==============================================================================
.js-qty {
  position: relative;
  border: 1px solid transparent;
  border-radius: 2px;
  margin-bottom: 1em;
  max-width: 100px;
  @include transition(all 0.4s ease-out);
  @include backface();

  input[type="text"] {
    display: block;
    border-radius: 0;
    background: none;
    text-align: center;
    width: 100%;
    padding: 5px 25px;
    margin: 0;
    @include box-shadow(none);
  }
}

.js--qty-adjuster {
  cursor: pointer;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  padding: 5px 0;
  width: 20px;
  text-align: center;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select:    none;
  -ms-user-select:     none;
  -o-user-select:      none;
  user-select:         none;
  @include transition(all 0.2s ease-out);

  &:hover {
    background-color: $borderColor;
  }
}

.js--add {
  right: 0;
  border-left: 1px solid $borderColor;
}

.js--minus {
  left: 0;
  border-right: 1px solid $borderColor;
}

// ==============================================================================
// #Quantity Selectors in the Ajax Cart
// ==============================================================================
.ajaxifyCart--qty {
  @extend .js-qty;
  top: -5px;
  right: -30px;
  margin-bottom: 0;
  overflow: hidden;
  max-width: 90px;

  .ajaxifyCart--product:hover &,
  .ajaxify-touch &,
  &:hover {
    border-color: $ajaxifyGreyDark;
    @include transition(none);
  }

  input[type="text"] {
    color: $quantityTextColor;
    border: 0 none;
  }

  .ajaxifyCart--is-loading & {
    opacity: 0.6;
    border-color: $ajaxifyGreyDark;
    @include transition(none);
  }
}

.ajaxifyCart--qty-adjuster {
  @extend .js--qty-adjuster;
  opacity: 0;

  .ajaxifyCart--product:hover &,
  .ajaxify-touch &,
  .ajaxifyCart--qty:hover & {
    opacity: 1;
    @include transition(background-color 0.2s ease-out);
  }

  &:hover {
    background-color: $ajaxifyGreyDark;
  }

  &:active {
    background-color: darken($ajaxifyGreyDark, 10%);
    color: #c7c7c7;
  }

  // Turn off animation on initial hover
  .ajaxifyCart--product:hover &:hover {
    @include transition(none);
  }
}

.ajaxifyCart--add {
  @extend .js--add;
  border-left: 1px solid $ajaxifyGreyDark;
}

.ajaxifyCart--minus {
  @extend .js--minus;
  border-right: 1px solid $ajaxifyGreyDark;
}


// ==============================================================================
// Ajaxify Modal
// ==============================================================================
#ajaxifyModal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 960px;
  max-height: 80%;
  height: auto;
  z-index: 99999999;
  visibility: hidden;
  overflow: auto;
  @include transform(translateX(-50%) translateY(-50%));
  @include transition(box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms);

  .ajaxifyCart--content {
    padding: 30px;
  }

  &.is-visible {
    visibility: visible;
    @include box-shadow(0px 10px 80px rgba(0,0,0,.25));
  }

  &.no-transforms {
    width: 700px;
    max-height: 500px;
    margin: -250px 0 0 -350px;
    border: 1px solid $ajaxifyGrey;
  }

  // Typography
  .ajaxifyCart--remove:hover {
    color: #555;
  }

  .ajaxifyCart--row {

    & > div {
      padding-left: 20px;

      &:first-child {
        padding-left: 0;
      }
    }
  }

  .ajaxifyCart--product {
    @include transform(none);
  }

  .ajaxifyCart--products {
    border-bottom-color: $ajaxifyGreyLight;
  }

  // Quantity selectors
  .ajaxifyCart--product:hover .ajaxifyCart--qty {
    border-color: $ajaxifyGreyLight;
  }

  .ajaxifyCart--is-loading .ajaxifyCart--qty {
    opacity: 0.7;
    border-color: $ajaxifyGreyLight;
  }

  .ajaxifyCart--qty-adjuster {

    &:hover {
      background-color: $ajaxifyGreyLight;
    }

    &:active {
      background-color: darken($ajaxifyGreyLight, 10%);
    }
  }

  .ajaxifyCart--add {
    border-left-color: $ajaxifyGreyLight;
  }

  .ajaxifyCart--minus {
    border-right-color: $ajaxifyGreyLight;
  }

}

#ajaxifyCart-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 99999998;
  opacity: 0;
  cursor: pointer;
  background-color: rgba(211,211,211,0.8);
  @include transition(opacity 450ms cubic-bezier(0.57,.06,.05,.95));
}

.is-visible ~ #ajaxifyCart-overlay {
  opacity: 1;
  visibility: visible;
  @include transition(opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95));
}

#ajaxifyModal .ajaxifyCart--content {
  background-color: #fff;
  @include transform(scale(0.7));
  opacity: 0;
}

#ajaxifyModal.is-visible .ajaxifyCart--content {
  @include transform(scale(1));
  opacity: 1;
}

#ajaxifyModal {
  .ajaxifyCart--qty input[type="text"] {
    color: #000;
  }
}

// ==============================================================================
// Ajaxify Drawer
// ==============================================================================
#ajaxifyDrawer {
  background-color: $drawerBackgroundColor;
  color: #fff;
  height: 0px;
  overflow: hidden;
  @include perspective (1000px);
  @include transform-style(preserve-3d);
  @include transition(all 600ms cubic-bezier(0.47, 0.5, 0, 0.95));

  &.is-visible {
    @include transition(all 550ms cubic-bezier(0.47, 0, 0, 0.95));
  }

  // Typography styles
  h1, h2, h3, h4 {
    color: $drawerTextColor;
    margin-bottom: 6px;

    a {
      color: $drawerLinkColor;
    }

  }

  h4 {
    font-size: 18px;
    line-height: 22px;
    display: inline;
  }

  p, a {
    color: $drawerTextColor;
  }
}

#ajaxifyDrawer .ajaxifyCart--content {
  margin: 0 auto;
  opacity: 0;
  overflow: hidden;
  background-color: $drawerBackgroundColor;

  @include transform-origin(top);
  @include rotateX(-90deg);
}

#ajaxifyDrawer.is-visible .ajaxifyCart--content {
  opacity: 1;
  @include rotateX(0deg);
}

.ajaxifyDrawer-caret {
  position: relative;
  display: block;
  height: 0;
  opacity: 0;
  overflow: hidden;

  .is-visible + & {
    opacity: 1;
    overflow: visible;
  }

  & > span {
    position: absolute;
    top: 0;
    left: 100%;
    display: block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #000;
    margin-left: -6px;
    opacity: 0;
    @include transform(translate(0,-12px));
    @include transition(all 0.25s ease-in-out 0.2s);
  }

  .is-visible + & > span {
    @include transform(translate(0,0));
    opacity: 1;
  }
}



// ==============================================================================
// Sprites
//   - using data URIs to prevent any additional http requests
// ==============================================================================
.sprite {
  display: block;
  text-indent: -9999px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.ajaxifyCart--add {
  @extend .sprite;
  background-position: center center;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxNTJBNEY1NDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxNTJBNEY2NDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUU4MjYyOEE0NjU3MTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjE1MkE0RjQ0NjU5MTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6VbCy4AAAAWklEQVR42mJsampigAIeIH4GZUsB8RcQg4UBAUACvEhsBpgCkE5GKA0DklBF/0EKXgExJwMqgFn1nYmBAACZIIZkBbojwVbAHPQZSeNzZBOQvfkZiQ3WCBBgALZlEm83dptmAAAAAElFTkSuQmCC);
}

.ajaxifyCart--minus {
  @extend .sprite;
  background-position: center center;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxNTJBNEZENDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxNTJBNEZFNDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjE1MkE0RkI0NjU5MTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjE1MkE0RkM0NjU5MTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6MzbYiAAAALElEQVR42mL6//8/Az7MxEAAEFTA2NTU9A1Ic+KQ/07YBJBDKHIDQQUAAQYAbksecMSS2doAAAAASUVORK5CYII=);
}

.ajaxifyCart--close {
  @extend .sprite;
  display: none;
  position: relative;
  z-index: 10;
  border: none;
  width: 20px;
  height: 20px;
  float: right;
  cursor: pointer;
  background-position: center center;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMzRUY2REVBNDY1QjExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMzRUY2REVCNDY1QjExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzNFRjZERTg0NjVCMTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzNFRjZERTk0NjVCMTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7sdZ8fAAAAp0lEQVR42nSPQQ6CMBBFx4ZEj+DSY8BGt9SVwRP1QBDdULeygaN4BFzpn+Q3mZCW5DFk/uvQ2YUQfiIygYuUnzc4O7wW/QCxIEbmi8oNG23mgO03js0reDF4gCNry77mUpkpHvSgo7QHA7gnwW1+q8FKcbViTtbJB/Bl7Uty5BWe4MTa2aWTPJplbuDDmpYe04IzqBn4zbU8J2udHcUpI9oDmtd/AQYAX20mtnhTCxQAAAAASUVORK5CYII=);

  #ajaxifyModal & {
    display: block;
  }

  &:hover {
    opacity: 0.7;
  }
}


@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

  .ajaxifyCart--add {
    background-size: 8px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFFODI2Mjg4NDY1NzExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFFODI2Mjg5NDY1NzExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUU4MjYyODY0NjU3MTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUU4MjYyODc0NjU3MTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Q1IXcAAAAL0lEQVR42mJsampiwAH+o/EZsSliYqAQjBrAwMCCJbSJjZXhFAaMoylxgA0ACDAAufIFqTR3duwAAAAASUVORK5CYII=);
  }

  .ajaxifyCart--minus {
    background-size: 8px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxNTJBNEY5NDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxNTJBNEZBNDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjE1MkE0Rjc0NjU5MTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjE1MkE0Rjg0NjU5MTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz54TqQaAAAAKElEQVR42mL8//8/AyWAiYFCMGoAAwNLc3Pz/xEeBoyjKXEQGAAQYABVgwijPO94YQAAAABJRU5ErkJggg==);
  }


}