/**
 * @file
 * INBALI theme implementation for Commerce Cart components
 */

#block-inbali-cart { position: absolute; bottom: 15px; right: 15px; width: 60px; height: 60px; }

.cart-block--summary,
.cart-block--summary__count { vertical-align: middle; }

.cart-block--summary { position: relative; }
.cart-block--summary a { display: block; position: relative; width: 60px; height: 0; padding-top: 60px; cursor: pointer; overflow: hidden; border-radius: 50px;
    background-color: #ffffff; background-image: url('../../images/bag.png'); background-size: 36px; background-repeat: no-repeat; background-position: center center;
    transition: box-shadow 0.2s ease; box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2),0px 2px 4px 0px rgba(0,0,0,0.2); }
.cart-block--summary a:hover { box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2),0px 6px 8px 0px rgba(0,0,0,0.2); }
.cart-block--summary__count { position: absolute;
    pointer-events: none;
    background-color: #e4824c;
    color: #ffffff;
    height: 24px;
    line-height: 24px;
    padding: 0 8px;
    right: -5px;
    top: -5px;
    border-radius: 20px;
    font-weight: 700;
    font-family: 'OSBold',sans-serif;
    font-size: 13px;
    letter-spacing: 0;
    box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 12%), 0px 2px 4px 0px rgb(0 0 0 / 10%); }

.cart-block--contents { position: fixed; top: 0; right: -330px; width: 320px; box-sizing: border-box; height: 100%; overflow-x: hidden; z-index: 1;
    background: #ffffff;
    box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2),0px 2px 4px 0px rgba(0,0,0,0.2); }

.cart-block--contents__inner {  }
.cart--cart-block .cart-block--contents a {  }
.cart--cart-block li.cart-block--contents__item {  }

.cart-block--contents header { position: absolute; top: 0; width: 100%; padding: 60px 15px 30px; z-index: 99; }
.cart-block--contents header h2 { padding: 25px 5px; font-size: 20px; pointer-events: none; }
.cart-block--contents header #cart-close { position: absolute; display: block; top: 65px; right: 0; cursor: pointer; height: 60px; width: 0; overflow: hidden; padding: 0 0 0 60px; cursor: pointer;
    background-color: transparent; background-image: url('../../images/cross-dark.png'); background-size: 18px; background-repeat: no-repeat; background-position: center center;
    transition: transform .25s }
.cart-block--contents header #cart-close:hover { transform: rotate(90deg); }

.cart-block--contents .content { overflow-y: scroll; height: 100%; padding: 100px 50px 0 15px; margin-right: -50px; }
.cart-block--contents .content .views-row { position: relative; text-align: center; margin-top: 25px; }

.cart-block--contents .content .views-field-field-product-image img { display: inline-block; height: 100px; width: auto; }
.cart-block--contents .content .views-field-quantity { position: absolute; top: 80px; text-align: center; width: 100%; }
.cart-block--contents .content .views-field-quantity .field-content { font-family: 'OSBold',sans-serif; background: #52c0a7; color: #fff; font-weight: normal; letter-spacing: 0; padding: 5px; border-radius: 20px; font-size: 13px; }
.cart-block--contents .content .views-field-title { font-size: 18px; padding: 0 15px; font-family: 'SSThin',sans-serif; text-transform: uppercase; margin-top: 10px; }
.cart-block--contents .content .views-field-field-product-subtitle { display: block; margin: 5px 0; font-family: 'SSLight', sans-serif; font-size: 10px; text-transform: uppercase; }
.cart-block--contents .content .views-field-total-price__number { font-family: 'OSBold', sans-serif; letter-spacing: 3px; font-size: 12px; }

.cart-block--contents footer { position: absolute; bottom: 0; width: 100%; padding: 45px 15px 15px; }
.cart-block--contents footer div[data-drupal-selector=order-total-summary] { border-top: 1px solid #efefef; font-size: 13px; padding: 15px 0 15px 10px; }

.cart-block--contents footer .order-total-line-label { display: inline-block; width: 50%; text-align: right; padding: 0 10px; }
.cart-block--contents footer .order-total-line__total .order-total-line-label { font-size: 17px; }
.cart-block--contents footer .order-total-line-value { display: inline-block; width: 50%; text-align: right; font-family: 'OSBold', sans-serif; }
.cart-block--contents footer .order-total-line__total .order-total-line-value { font-size: 16px; }

.cart-block--contents footer ul.links li { width: 50%; float: left; }
.cart-block--contents footer ul.links li a { display: block; position: relative; font-size: 11px; text-decoration: none; text-align: center; font-family: 'OSBold', sans-serif; letter-spacing: 2px; text-transform: uppercase; padding: 12px 25px; outline: 0; border: 1px solid #283d38; cursor: pointer; pointer-events: all; color: #ffffff;
    background-color: transparent;
    user-select: none; -webkit-user-select: none; touch-action: manipulation; }

.cart-block--contents footer ul.links li a:after { position: absolute; content: ""; width: 100%; height: 100%; top: 5px; left: 5px; z-index: -1;
    transition: 0.2s; }
.cart-block--contents footer ul.links li.view-checkout a:after { top: -5px; }

.cart-block--contents footer ul.links li a:hover:after,
.cart-block--contents footer ul.links li a:active:after { top: 0px; left: 0px; }

.cart-block--contents footer ul.links li.view-cart { padding-right: 5px; }
.cart-block--contents footer ul.links li.view-cart a:after { background-color: #e4824c; }

.cart-block--contents footer ul.links li.view-checkout { padding-left: 5px; }
.cart-block--contents footer ul.links li.view-checkout a:after { background-color: #52c0a7; }

@media (min-width: 768px) { }