/*
 *  Created by: Cyro
 *
 *  Important: somethings are needed to do like it is here, as we are styling a plugin, we can't change the html since it can get updated.
*/

/*
 *  Clean not needed styles
*/
#orderTotal + br,
form + br {
    display: none;
}

.cartTotalsDisplay {
    margin-bottom: 21px;
}

/*
 *  .mobile-only = just show things for devices smaller than 843px
 *  .desktop-only = just show things for devices smaller than 843px
*/
.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

/*
 * buttons (all)
 * 
 * [1] - doesn't get the same class as the others because it is generated by php, 
 * so we need to add this code here
*/
.btn a,
.btn a:hover,
.qty-btns a, /* 1 */
.qty-btns a:hover,
#cartContentsDisplay .cartProductDisplay a,
#cartContentsDisplay .cartQuantity a,
#cartContentsDisplay .cartProductDisplay a:hover,
#cartContentsDisplay .cartQuantity a:hover {
    text-decoration: none;
}

.btn--link,
.btn--link a,
.qty-btns a,
#cartContentsDisplay .cartProductDisplay a,
#cartContentsDisplay .cartQuantity a /* 1 */ {
    color: #333;
}

.btn--link:hover,
.btn--link a:hover,
.qty-btns a:hover,
.cartQuantity input[type="submit"]:hover,
.cartQuantity button:hover,
#cartContentsDisplay .cartProductDisplay a:hover,
#cartContentsDisplay .cartQuantity a:hover {
    color: #000;
}

/*
 * buttons Continue Shopping and Checkout
*/
.btn-container {
    overflow: hidden;
}

.btn-container--bottom {
    margin-bottom: 51px;
    margin-top: 30px
}

.btn-container--top {
    margin-bottom: 30px;
}

.cartTotalsDisplay + .btn-container--top {
    margin-top: 30px;
}

    .btn-container .btn a {
        height: 37px;
        line-height: 37px;
        position: relative;
        padding-left: 18px;
    }

    .btn-container .btn a:before {
        content: '';
        position: absolute;
        left: 0;
        top: 4px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 4px 8px 4px 0;
        border-color: transparent #333 transparent transparent;
    }

    /*
     * [1] = line heigh = 37 (btn height) - 4 (border top and bottom). Necessary because of border-box
     * 
     * .button_update might have a different height
    */
    #coupon_code .button_update,
    .btn-container .btn--primary a,
    #shippingEstimatorContent .button_update {
        float: right;
        background: #333;
        line-height: 33px; /* 1 */
        border: 2px solid #333;
            color: #222a2b;
         
        padding: 0 9px;
        text-transform: uppercase;
        width: auto !important;
        cursor: pointer;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }

    .btn-container .btn--primary a:before {
        display: none;
    }

    #coupon_code .button_update,
    #shippingEstimatorContent .button_update {
        font-size: 12px
    }
    
    #coupon_code .button_update:hover,
    .btn-container .btn--primary a:hover,
    #shippingEstimatorContent .button_update:hover {
        color: #333;
        background: #fff;

    }

    .btn-container .btn--link {
        float: left;
    }

    .btn-container .btn--link + .btn--link {
        margin-left: 21px;
        position: relative;
        top: 1px; /* */
    }
        
        .btn--link .left-arrow,
        .btn--link .right-arrow,
        .btn-container .btn--link + .btn--link {
            position: relative;
            top: 2px;
        }

        .btn--link .left-arrow,
        .btn--link .right-arrow {
            display: none;
        }

/*
 * Shopping cart table
 *
 * [1] = overrides color and width that comes from ajax_shopping_cart_overrides
*/
#cartContentsDisplay,
#cartContentsDisplay tr,
#cartSubTotal,
#otcoupon,
#orderTotal,
#orderTotal .table__subtotal td,
#shippingEstimatorContent table td,
#shippingEstimatorContent table th,
#shippingEstimatorContent h2 {
    border-style: solid;
    border-color: #EBEBEB; /* 1 */
    border-bottom-width: 2px; /* 1 */
}

#orderTotal .table__subtotal td {
    border-style: solid;
    padding-left: 0;
}

#cartContentsDisplay,
#shippingEstimatorContent table th,
#shippingEstimatorContent h2 {
    border-top-width: 2px;
    
}

#cartContentsDisplay,
#cartContentsDisplay .cartProductDisplay a,
#cartContentsDisplay .cartQuantity a {
    font-size: 14px;
}

    #cartContentsDisplay tr td,
    #cartContentsDisplay tr th,
    #shippingEstimatorContent h2 {
        padding: 12px 15px;
    }

    #cartContentsDisplay tr td {
        vertical-align: top;
    }

    /*
     *  Heading
    */
    #cartContentsDisplay .tableHeading th,
    #shippingEstimatorContent h2 {
        font-size: 18px;
        font-weight: 500;
        text-align: left;
        text-transform: uppercase;
    }

        #cartContentsDisplay tr #scImageHeading,
        #cartContentsDisplay tr #scTotalHeading,
        #cartContentsDisplay tr td.cartTotalDisplay {
            padding-left: 0;
            padding-right: 0;
        }

        #cartContentsDisplay tr #scImageHeading {
            text-align: left;
        }

        #cartContentsDisplay tr #scTotalHeading,
        #cartContentsDisplay tr .cartTotalDisplay {
            text-align: right;
        }
 
    /*
     * #cartContentsDisplay tr td.cartTotalDisplay is here because 
     * we need to overrides its properties that come from ajax_shopping_cart.css
    */
    #cartContentsDisplay tr td,
    #cartContentsDisplay tr td.cartTotalDisplay {
        padding-bottom: 30px;
        padding-top: 30px;
    }
    
    /* 
     *  Image column
    */
    #cartContentsDisplay tr td.productImage {
        width: 1%;
    }

    #cartContentsDisplay .productImage {
        padding-left: 0;
    }

        span.cartImage {
            margin-right: 0;    
        }

        #cartContentsDisplay .productImage a img {
            display: block;
            height: 120px !important;
            width: 120px !important;
            max-width: 120px;
            max-height: 120px;
        }

    /* 
     *  Item column
    */
    .cartProductDisplay .btn--link {
        display: block;
        margin-top: 30px;
    }

    .cartAttribsList {
        margin: 12px 0 0 15px !important;
    }
        
        .cartAttribsList ul {
            list-style: disc;
            font-size: 12px !important;
            padding-left: 0 !important;
        }
        
            .cartAttribsList li + li {
                margin-top: 12px;
            }

    #cartContentsDisplay .cartProdTitle {
         
        line-height: 1.5;
    }

    /* 
     *  Quantity column
    */
    #cartContentsDisplay .cartQuantity input[type="text"] {
        border-color: #333;
        height: 30px;
        width: 38px;
        float: left;
        text-align: center;
    }

    .cartQuantity .qty-btns {
        float: left;
        margin-right: 15px;
    }

        .cartQuantity input[type="submit"],
        .cartQuantity button {
            display: block;
            cursor: pointer;
            font-family: inherit;
            background: none;
            border: none;
            margin: 0 0 5px;
            padding: 0;
            text-align: left;
        }

        #cartContentsDisplay .cartQuantity .icon_remove,
        .cartQuantity input[type="submit"],
        .cartQuantity button {
            font-size: 12px;
            line-height: 100%;
        }

    .cartQuantity .markProductOutOfStock {
        display: inline-block;
        padding: 0 0 7px;
    }

/*
 *  Total/subtotal/Coupon
*/
#cartSubTotal,
#otcoupon,
#ottotal {
    padding: 21px 0;
}

#cartSubTotal,
#ottotal,
#otcoupon {
     
}

#orderTotal {
    border-style: solid;
    border-collapse: collapse;
    width: 100%;
}

    #orderTotal td {
        text-align: right;
        padding: 15px 0
    }

        .cart__section {
            display: block;
            text-align: left;
            font-weight: 500;
            padding-bottom: 10px;
        }
    
    #orderTotal .table__subtotal.is__applyed {
        position: relative;
        z-index: 2;
    }

    #orderTotal .table__subtotal.is__applyed td {
        vertical-align: middle;
    }

    #orderTotal .table__subtotal.is__applyed + tr td {
        border-top-width: 2px;
        position: relative;
        top: 0;
        background: none;
        z-index: 1;
    }

    #orderTotal .table__subtotal.mb__only {
        display: none;
    }

    #orderTotal .table__subtotal.table__subtotal-discount td {
        font-weight: 500;
    }
    
  .table__subtotal td:first-child {width: 60%;}
  .table__subtotal td {width: 30%;}
  .table__subtotal td:last-child {width: 10%;}    

    #orderTotal .estimator__total span,
    #orderTotal .discount__totall span {
        position: relative;
        top: 32px;
    }

    #orderTotal .discount__totall span,
    #orderTotal .estimator__total.no__spacetop span {
        top: 0;
    }

    #orderTotal .estimator__total,
    #orderTotal .discount__totall {
        vertical-align: top;
    }

    #orderTotal .estimator__total.no__spacetop {
        vertical-align: middle;
    }

    #shippingEstimatorContent .form__alert {
        text-align: left;
    }

    #orderTotal .table__subtotal:last-child td {
        border-bottom: none;
    }

    .table__subtotal-total + .table__subtotal-total {
        display: none !important;
    }

/*
 *  Coupon
 *
 *  [1] = same value as #cartSubTotal .totalBox (you will find it on ajax_shopping_cart.css)
*/
#coupon_code {
    background: transparent;
    float: left;
    height: auto;
    line-height: normal;
    overflow: hidden;
    margin: 0;
    padding: 0; /* 1 */
    position: relative;
    z-index: 3;
}
    
    #coupon_code label {
        float: left;
        display: none;
        height: 30px;
        line-height: 30px;
        margin-right: 15px;
    }

    #coupon_code .button_update,
    #coupon_code #promotion_code {
        cursor: pointer;
        float: left;
        height: 30px;
        width: auto;
    }

    #coupon_code #promotion_code {
        cursor: text;
    }

    #coupon_code .button_update {
        line-height: 27px;
    }

    #coupon_code #promotion_code,
    #cartContentsDisplay .cartQuantity input[type="text"],
    .form__field select,
    .form__field input[type="text"] {
        background: #fff;
        border: 1px solid #B9B9B9;
        height: 30px;
        margin: 0;
        padding: 0 9px !important;
        font-size: 12px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }

    #coupon_code #promotion_code,
    .form__field select,
    .form__field input[type="text"] {
        margin-right: 30px;
    }

    .form__field--addresses select {
        margin-right: 0;
    }

    #cartContentsDisplay .cartQuantity input[type="text"] {
        margin: 0 15px 12px 0;    
    }
    

#coupon_code + #otcoupon {
    padding-top: 0;
    color: rgb(206, 33, 33);
    clear: both;
}

#ottotal {
    border: 0;
    margin: 0;
}

#messageStackErrorCoupon {
    clear: left;
    white-space: nowrap;
}

#messageStackErrorCoupon.is--active {
    display: block;
}

#messageStackErrorCoupon:empty { padding-top: 0; }

    #messageStackErrorCoupon [class*="messageStack"] {
        line-height: 100%;
        margin-bottom: 0;
        padding: 15px 0 9px !important;
    }

    #messageStackErrorCoupon [class*="messageStack"]:before {
        display: none;
    }

/*
 *  Shipping Estimator
*/
#shippingEstimatorContent {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
}

    #shippingEstimatorContent h2,
    #shippingEstimatorContent .estimateCostTitle,
    #shippingEstimatorContent table,
    #shippingEstimatorContent .inputLabel,
    #shippingEstimatorContent #shippingPolicy span {
        padding-right: 0;
        padding-left: 0;
        margin-left: 0;
        margin-right: 0;
    }

    #shippingEstimatorContent h2 {
        margin-bottom: 21px
    }

    #shippingEstimatorContent h3 {
        margin-bottom: 12px;
    }

    #shippingEstimatorContent p + h3 {
        margin-top: 30px;
    }

    #shippingEstimatorContent .estimateCostTitle {
         
        font-size: 14px;
    }

    #shippingEstimatorContent {
        color: #31152b;
         
    }
    
    #shippingEstimatorContent .form__field {
        float: left;
    }

    #coupon_code #promotion_code,
    #shippingEstimatorContent .form__field {
        max-width: 165px;
    }

    #shippingEstimatorContent .form__field--addresses {
        float: none;
        overflow: hidden;
        text-align: right;
        max-width: 100%;
        margin-bottom: 5px;
    }

        #shippingEstimatorContent .form__field--addresses select {
            float: right;
            max-width: 230px
        }

    #coupon_code #promotion_code {
        width: 165px;   
    }
    
        /* fields type */
        #shippingEstimatorContent .form__field--hidden {
            display: none;
        }

        #shippingEstimatorContent .shipping__estimator .form__field.al__right {
            float: right;
            max-width: 190px;
            line-height: 30px; /* if there is need to change here, there will be need to the value found in the function resizeEstimatorName in jquery_ac_shopping_cart */
        }

        #shippingEstimatorContent .selected__shipping__address + .al__right {
            max-width: none;
        }

        #shippingEstimatorContent .al__right.no--height {
            height: auto;
            line-height: 1.4;
            white-space: wrap;
        }

        #shippingEstimatorContent .form__field--zipcode {
            max-width: 141px
        }

    #shippingEstimatorContent .form__field + .form__field {
        margin-top: 0;
        margin-left: 30px;
        
    }

        #shippingEstimatorContent .inputLabel {
            float: left;
            font-size: 14px;
            width: 130px;
            position: relative;
            top: 8px;
        }

        #shippingEstimatorContent .selected__shipping__address .inputLabel {
            float: none;
            position: static;
            font-weight: 500;
            display: block;
            text-align: right;
            width: auto;
            margin-bottom: 9px;
        }
            
            #shippingEstimatorContent .form__item {
                overflow: hidden;
            }
                
            #shippingEstimatorContent .form__item select {
                width: 100%
            }

            #shippingEstimatorContent .form__field input[type="text"],
            #shippingEstimatorContent .form__field select {
                width: 100%;
            }

        #shippingEstimatorContent input[name="zip_code"] {
            position: relative;
        }

        #form__field-state {
            margin-left: 130px;
        }

            #form__field-state .inputLabel {
                top: 0;
                width: 100%;
            }
        
        #shippingEstimatorContent #country + br
        #shippingEstimatorContent #stateZone + br,
        #shippingEstimatorContent #stText,
        #shippingEstimatorContent #stBreak,
        #shippingEstimatorContent #stText + br,
        #shippingEstimatorContent #stateLabel {
            display: none;
        }

            #shippingEstimatorContent .button_update {
                height: 30px;
                line-height: 26px;
            }

        #shippingEstimatorContent table {
            border-top: none;
            border-left: none;
            border-right: none;
            border-spacing: inherit;
            border-collapse: collapse;
        }

            #shippingEstimatorContent table #seProductsHeading {
                padding: 0 0 12px !important;
                font-weight: 500;
                border-left: none;
                border-right: none;
                border-top: none;
                 
            }

            #shippingEstimatorContent table th,
            #shippingEstimatorContent table td {
                background: #fff;
                font-size: 14px;
                padding: 12px 0;
            }

             #shippingEstimatorContent table th {
                font-weight: 500;
                text-align: left;
             }

        #shippingEstimatorContent #shippingPolicy h3 {
            margin-bottom: 12px;
            margin-top: 15px;
            padding: 0;
            font-weight: 500;
        }

        #shippingEstimatorContent #shippingPolicy .cta,
        #shippingEstimatorContent #shippingPolicy p {
            background: none;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            padding-right: 0;
        }

        #shoppingCartDefault > .forward:first-child {
            position: relative;
            top: 6px;
        }

        #shippingEstimatorContent #shippingPolicy .cta,
        #shoppingCartDefault > .forward:first-child a {
            color: #333;
            text-decoration: underline;
        }

        #shippingEstimatorContent #shippingPolicy .cta {
            text-align: left;
            margin-top: 19px;
        }

        #shippingEstimatorContent #shippingPolicy .cta:hover,
        #shoppingCartDefault > .forward:first-child a:hover {
            text-decoration: none;
        }

    #shippingPolicy,
    .table__rates,
    #seShipTo {
        margin-top: 21px;
        font-size: 14px;
        line-height: 1.5
    }

    #seShipTo address {
        display: block;
        padding: 0;
        margin: 0;
        margin-top: 9px;
    }

    #shippingPolicy strong,
    .table__rates strong,
    #seShipTo strong {
        font-weight: 500;
    }

        #shippingPolicy .hidden {
            display: none;
        }

/*
 *  bottom of the page
*/
.grid__row #shippingEstimatorContent .form__field {
    float: none;
    max-width: 300px;
}

.grid__row #shippingEstimatorContent .form__field + .form__field {
    margin-left: 0;
    margin-top: 12px;
}

.grid__row #shippingEstimatorContent #form__field-state {
    margin-top: 0;
    margin-left: 130px;
}

.grid__row #shippingEstimatorContent #form__field-state .visibleField {
    margin-top: 12px;
}

.grid__row #btn__update-rates {
    margin-top: 18px;
}

/* Shipping Methods Form */ 
#shippingMethodsForm {
    padding: 15px 0 0;
    border-top: 1px solid #EBEBEB;
    margin-top: 30px;
}

#shippingMethodsForm > p {
    margin-bottom: 15px;
}

#shippingMethodsForm > h3 {
  text-transform: uppercase;
  margin-bottom: -10px;
}

#shippingMethodsForm > h3:first-child {
    
}

#shippingMethodsForm .shippingMethod h3 {
    margin:28px 0 10px;
}

#shippingMethodsForm .shippingMethod ul li {
    border: 2px solid #EBEBEB;
    padding: 7px 12px 5px;
}

#shippingMethodsForm .shippingMethod ul li.checked {
    border-color: currentColor;
}

#shippingMethodsForm .shippingMethod ul li.checked + li{
    border-top-color: currentColor;
}

#shippingMethodsForm .shippingMethod ul li + li {
    margin-top: -2px;
}

/* shipping method not available for address */
#shippingEstimatorContent .shipping__estimator {}

  #shippingEstimatorContent .shipping__estimator .form__field input,
  #shippingEstimatorContent .shipping__estimator .form__field select {
    margin-left: 0;
    margin-right: 0;
  }

  #shippingEstimatorContent .shipping__estimator .form__field {
    max-width: 243px;
    float: left;
  }

  #shippingEstimatorContent .shipping__estimator .form__field + .form__field {
    margin-top: 0;
    margin-left: 15px;
  }

  #shippingEstimatorContent .shipping__estimator .form__field--zipcode {
    max-width: 232px;
  }

/*
 *  Responsive
*/
@media only screen and (max-width: 980px) {
    /*
     *  Hide items hidden for small screens
    */
    .desktop-only {
        display: none;
    }

    #middle-column-wrapper,
    #navBreadCrumb {
        padding: 0;
    }
    
    /* hiddne */
    #youMayAlsoLike {
        display: none;
    }

    /* estimator */
    #shippingEstimatorContent .shipping__estimator .form__field {
        float: none;
    }
    
    #shippingEstimatorContent .shipping__estimator .form__field,
    #coupon_code #promotion_code {
        width: 100%;
        max-width: 200px;
    }

    #shippingEstimatorContent .shipping__estimator .form__field + .form__field {
        margin-left: 0;
        margin-top: 15px;
    }

    #shippingEstimatorContent .shipping__estimator .form__field:last-child {
        text-align: left;
        width: auto;
    }

    #shippingEstimatorContent .shipping__estimator .button_update,
    #shippingEstimatorContent .table__subtotal .button_update {
        width: 100% !important;
        float: none;
    }

        #orderTotal .table__subtotal td {
            vertical-align: bottom;
        }

        #orderTotal .estimator__total span {
            top: auto;
            bottom: 7px;
        }

    #orderTotal .table__subtotal.is__applyed td {
        border-bottom: none;
    }

    #orderTotal .table__subtotal.mb__only {
        display: table-row;
    }

        #orderTotal .table__subtotal.mb__only td {
            border-top: none;
        }

    #orderTotal .table__subtotal .dk__only {
        display: none;
    }

    /* coupon */
    #coupon_code {
        max-width: 200px;
        float: none;
    }
        
        #coupon_code #promotion_code {
            clear: left;
            margin-bottom: 15px;
        }

        #orderTotal .table__subtotal.is__applyed + tr td {
            padding-top: 15px;
            padding-bottom: 18px;
            top: 0;
        }
}

@media only screen and (max-width: 843px) {
    
    /*
     *  Show items hidden for big screens
    */
    .mobile-only {
        display: none;
         
        color: #333;
        font-weight: 500;
        margin-bottom: 15px;
    }
    
    /*
     *  Table
    */
    .cartTotalsDisplay {
        margin-bottom: 30px;
    }

    .tableHeading {
        display: none;
    }

    #cartContentsDisplay tr td,
    #cartContentsDisplay tr td.cartTotalDisplay {
        padding: 8px 0 !important;
        display: block;
    }

    #cartContentsDisplay tr td.productImage {
        display: table-cell;
    }

        #cartContentsDisplay tr td.productImage,
        #cartContentsDisplay tr td.cartProductDisplay {
            padding-top: 12px !important;
            font-size: 15px;

    
    
        }

        #cartContentsDisplay tr td.productImage,
        #cartContentsDisplay tr td.cartQuantity {
            padding-bottom: 12px !important;
        }

        /*
         *  Image item
        */
        #cartContentsDisplay tr td.productImage {
            padding-right: 21px !important;
            width: 120px !important
        }

        /*
         *  Items
        */
        .cartAttribsList {
            margin-top: 6px;
        }

        .cartProductDisplay .btn--link {
            margin-top: 15px;
        }

        /*
         *  Quantity
        */
        #cartContentsDisplay tr td .qty-btns {
            clear: left;
            float: none;
            padding-top: 0 !important
        }

        #cartContentsDisplay tr td .qty-btns a,
        #cartContentsDisplay tr td .qty-btns .btn {
            display: inline-block;
            margin-right: 10px;
        }
        
        /*
         *  Total
        */
        #cartContentsDisplay tr td.cartTotalDisplay {
            display: none;
        }

    /*
     *  Order
    */
    #orderTotal tr td:first-child {
        padding-right: 21px;
        text-align: left;
    }

    /*
     *  Coupon code
    */
    #coupon_code {
        margin-top: 0 !important;
        text-align: left;
    }

    /*
     *  Buttons
    */
    .btn-container .btn--link,
    .btn-container .btn--primary a {
        display: block;
        float: none;
        text-align: center;
    }

    .btn-container .btn--primary a {
        margin-bottom: 12px
    }

    .btn-container .btn--link + .btn--link {
        margin: 5px 0 0;
        top: 0;
    }

    /* shippping */
    #shippingEstimatorContent {
        width: auto;
    }


}

@media only screen and (max-width: 480px) {

    /*
     * Coupon
    */
    #coupon_code {
        float: none !important;
        padding-left: 0;
    }

        #coupon_code #promotion_code {
            width: 100%
        }
}