@import "good", "chose-panel", "gift-advance-good", "order-ensure", "select-coupon", "select-address";


.icon-checkbox:before { content: "\e61c"; }
.icon-cb-checked:before { content: "\e61d"; }

.shopping-cart-page {
    padding-bottom: 120rem / $pxConvertRem;

    .cart-nav {
        color: #c6c6c6;
        border-bottom: 1px solid #e0e0e0;

        li {
            float: left;
            width: 50%;
            padding: 30rem / $pxConvertRem 0;
            height: 30rem / $pxConvertRem;
        }

        li.active {
            color: #000;
        }

        span {
            display: block;
            box-sizing: border-box;
            width: 100%;
            height: 30rem / $pxConvertRem;
            line-height: 30rem / $pxConvertRem;
            font-size: 30rem / $pxConvertRem;
            text-align: center;
        }

        li:first-child span {
            border-right: 1px solid #e0e0e0;
        }
    }

    .login-info {
        height: 46rem / $pxConvertRem;
        padding: 17rem / $pxConvertRem 20rem / $pxConvertRem;
        color: #24acaa;
        text-align: center;
        font-size: 28rem / $pxConvertRem;

        .btn {
            display: inline-block;
            background: #ed0010;
            color: #fff;
            width: 80rem / $pxConvertRem;
            height: 46rem / $pxConvertRem;
            line-height: 46rem / $pxConvertRem;
        }
    }

    .presell-info {
        height: 60rem / $pxConvertRem;
        padding: 15rem / $pxConvertRem 30rem / $pxConvertRem;
        font-size: 22rem / $pxConvertRem;
        background: #f0f0f0;
        color: #b7b7b7;

        > span {
            display: block;
        }

        .iconfont {
            float: left;
            font-size: 45rem / $pxConvertRem;
        }

        .txt {
            height: 30rem / $pxConvertRem;
            line-height: 30rem / $pxConvertRem;
            margin-left: 80rem / $pxConvertRem;
        }
    }

    .cart-goods {
        border-bottom: 1px solid #e0e0e0;

        .shopping-cart-good:last-child .info {
            border-bottom: none;
        }
    }

    .freebie-and-advance-buy {
        padding: 20rem / $pxConvertRem;
        font-size: 24rem / $pxConvertRem;
        border-bottom: 1px solid #e0e0e0;

        > li {
            box-sizing: border-box;
            height: 90rem / $pxConvertRem;
            line-height: 90rem / $pxConvertRem;
            margin-bottom: 10rem / $pxConvertRem;
            background: #f8f8f8;
            padding: 0 20rem / $pxConvertRem;

            &:last-child {
                margin-bottom: 0;
            }

            a {
                float: right;
            }
        }

        .count {
            color: #f00;
        }

        .icon-right-arrow {
            color: #8f8f8f;
        }
    }

    .price-compute {
        padding: 20rem / $pxConvertRem;
        border-bottom: 1px solid #e0e0e0;
        font-size: 26rem / $pxConvertRem;

        .title {
            display: inline-block;
            width: 175rem / $pxConvertRem;
        }

        .minus {
            float: right;
        }
    }

    .balance {
        position: fixed;
        box-sizing: border-box;
        bottom: 0;
        width: 100%;
        padding: 20rem / $pxConvertRem;
        height: 120rem / $pxConvertRem;
        border-top: 1px solid #e0e0e0;
        background: #fff;

        .iconfont {
            position: absolute;
            top: 50%;
            margin-top: -14rem / $pxConvertRem;
            font-size: 28rem / $pxConvertRem;
        }

        p {
            float: left;
            margin-left: 50rem / $pxConvertRem;
            font-size: 26rem / $pxConvertRem;

            span {
                display: block;
                height: 40rem / $pxConvertRem;
                line-height: 40rem / $pxConvertRem;
            }

            .tip {
                color: #666;
                font-size: 22rem / $pxConvertRem;
            }
        }

        .btn-balance {
            float: right;
            width: 140rem / $pxConvertRem;
            height: 80rem / $pxConvertRem;
            line-height: 80rem / $pxConvertRem;
            text-align: center;
            background: #e01;
            color: #fff;
            border: none;
            font-size: 28rem / $pxConvertRem;
        }
    }

    .gift-advance-good {
        position: relative;
        padding: 20rem / $pxConvertRem 0;
        margin-left: 34rem / $pxConvertRem;
        height: 160rem / $pxConvertRem;
        border-bottom: 1px solid #e0e0e0;

        &:last-child {
            border-bottom: none;
        }
    }


    .advance-block .gift-advance-good:last-child {
        border-bottom: none;
    }

    .advance-block:last-child .gift-advance-good:last-child {
        border-bottom: 1px solid #e0e0e0;
    }

    .thumb-wrap {
        position: relative;
        float: left;
        width: 120rem / $pxConvertRem;
        height: 160rem / $pxConvertRem;

        .thumb {
            width: 100%;
            height: 100%;
        }
    }

    .tag {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 25rem / $pxConvertRem;
        color: #fff;
        text-align: center;
        background: #a1ce4e;

        &:before {
            content: '赠品';
        }
    }

    .deps {
        margin-left: 135rem / $pxConvertRem;
    }

    .name {
        font-size: 28rem / $pxConvertRem;
    }

    .row:nth-child(2) {
        font-size: 22rem / $pxConvertRem;
        height: 45rem / $pxConvertRem;
        line-height: 45rem / $pxConvertRem;

        > span {
            margin-right: 15rem / $pxConvertRem;
        }
    }

    .row:nth-child(3) {
        position: relative;
    }

    .color, .size {
        color: #b6b6b6;
    }

    .price {
        font-size: 24rem / $pxConvertRem;
        color: #000;
    }

    .count {
        font-size: 20rem / $pxConvertRem;
        color: #999;
        margin-left: 22rem / $pxConvertRem;
    }

    .chose {
        position: absolute;
        width: 88rem / $pxConvertRem;
        height: 58rem / $pxConvertRem;
        background: #f8f8f8;
        border: 1px solid #ccc;
        right: 20rem / $pxConvertRem;
        top: 71rem / $pxConvertRem;
        font-size: 26rem / $pxConvertRem;
    }

    .title {
        height: 50rem / $pxConvertRem;
        line-height: 50rem / $pxConvertRem;
        padding-left: 20rem / $pxConvertRem;
        font-size: 24rem / $pxConvertRem;
        background: #f8f8f8;
    }

    .advance-block .tag {
        background: #eb76aa;
        &:before {
            content: '加价购';
        }
    }
}