.hanzo-shop-car-card {
    margin       : 10px 10px 10px 0;
    border-radius: 0 4px 4px 0;
    min-height   : 120px;
    overflow     : hidden;

    .hanzo-shop-car-card__content {
        margin-left  : 10px;
        border-radius: 4px;
        background   : #fff;

        .info {
            background   : #fff;
            display      : inline-block;
            font-size    : 14px;
            height       : 30px;
            line-height  : 30px;
            color        : #FF6600;
            margin       : 0 10px;
            padding      : 3px 5px 0 5px;
            display      : flex;
            align-items  : flex-start;
            border-bottom: 1px solid #e9eaeb;

            .info-text {
                margin-left: 5px;
            }
        }

        .hanzo-shop-car-card__product-content {
            display    : flex;
            align-items: center;
            height     : 110px;
            padding    : 5px 10px;

            .hanzo-shop-car-card__checked-radio {
                width        : 14px;
                height       : 14px;
                text-align   : center;
                border       : 1px solid #ccc;
                border-radius: 50%;
                color        : #fff;
                display: flex;
                align-items:center;
                justify-content: center;
                padding: 3px 1px 0 1px;

                &--checked {
                    border    : 1px solid #e50011;
                    background: #e50011;                    
                }

                &--disabled {
                    border: 1px solid #f2f2f2;

                }
            }

            .cover-box {
                width        : 100px;
                height       : 100px;
                position     : relative;
                border-radius: 4px;
                border       : 1px solid #eeeeee;
                margin-left  : 7px;

                .tag {
                    width        : 28px;
                    height       : 33px;
                    position     : absolute;
                    top          : 0;
                    left         : 4px;
                    z-index      : 1;
                    border-radius: 4px;
                    background   : none;
                }

                .vendor {
                    position                  : absolute;
                    bottom                    : 0;
                    left                      : 0;
                    right                     : 0;
                    height                    : 15px;
                    background                : #ff8b58;
                    opacity                   : 0.9;
                    z-index                   : 1;
                    border-bottom-left-radius : 4px;
                    border-bottom-right-radius: 4px;
                    font-size                 : 11px;
                    text-align                : center;
                    color                     : #fff;
                }

                .cover-mask {
                    position  : absolute;
                    bottom    : 0;
                    left      : 0;
                    right     : 0;
                    top       : 0;
                    max-width : 100%;
                    max-height: 100%;
                    z-index   : 2;
                    opacity   : 0.7;

                    &.lack {
                        background     : url("https://front-xps-cdn.xsyx.xyz/2019/11/01/278269890.png") no-repeat center center;
                        background-size: contain;
                    }

                    &.over {
                        background     : url("https://front-xps-cdn.xsyx.xyz/2019/11/01/688498617.png") no-repeat center center;
                        background-size: contain;
                    }
                }
            }

            .base-info {
                position   : relative;
                margin-left: 10px;
                width      : 208px;
                height     : 100px;

                .title {
                    max-height        : 43px;
                    font-size         : 16px;
                    font-weight       : 500;
                    line-height       : 21px;
                    overflow          : hidden;
                    text-overflow     : ellipsis;
                    word-break        : normal;
                    white-space       : normal;
                    display           : -webkit-box;
                    -webkit-line-clamp: 2;
                }

                .sub-title {
                    font-size         : 13px;
                    color             : #999999;
                    font-weight       : 400;
                    height            : 36px;
                    overflow          : hidden;
                    text-overflow     : ellipsis;
                    word-break        : break-all;
                    white-space       : normal;
                    display           : -webkit-box;
                    -webkit-line-clamp: 2;
                }

                .price-and-buy {
                    position       : absolute;
                    left           : 0;
                    right          : 0;
                    bottom         : -6px;
                    width          : 100%;
                    display        : flex;
                    justify-content: space-between;
                    align-items    : center;

                    .price {
                        font-size  : 19px;
                        line-height: 1;
                        display    : flex;
                        align-items: center;

                        .big {
                            display    : inline-block;
                            font-size  : 19px;
                            font-weight: bold;
                            color      : #E60012;
                        }

                        .big::before {
                            content     : '¥';
                            margin-right: 2px;
                            font-size   : 16px;
                        }

                        .small {
                            display        : inline-block;
                            margin-left    : 7px;
                            font-size      : 13px;
                            font-weight    : 400;
                            text-decoration: line-through;
                            color          : #999999;
                        }

                        .small::before {
                            content: '¥';
                        }
                    }

                    .cart-button {
                        width     : 95px;
                        min-height: 27px;
                        position  : relative;
                    }

                    .button-cover {
                        width        : 100%;
                        height       : 100%;
                        line-height  : 30px;
                        border-radius: 20px;
                        font-size    : 14px;
                        color        : #fff;
                        text-align   : center;
                        font-weight  : 900;
                        position     : absolute;
                        left         : 0;
                        right        : 0;
                        top          : 0;
                        bottom       : 0;
                        z-index      : 5;
                    }

                    .button-cover::after {
                        border : none;
                        outline: none;
                    }

                    .button-cover.waiting {
                        background: #21C0AD;
                    }

                    .button-cover.active {
                        background: #E60012;
                    }

                    .button-cover.fresh-entry {
                        background: #FF7320;
                    }

                    .button-cover.over {
                        background    : #D8D8D8;
                        pointer-events: none;
                    }

                    .button-cover.soldout {
                        background    : #D8D8D8;
                        pointer-events: none;
                    }

                    .button-cover.lack {
                        background    : #D8D8D8;
                        pointer-events: none;
                    }
                }
            }
        }
    }

    .swipe-cell-right {
        display         : inline-block;
        width           : 65px;
        font-size       : 16px;
        height          : 100%;
        color           : #fff;
        text-align      : center;
        background-color: #f44;
        position        : absolute;
        top             : 0;
        border-radius: 0 5px 5px 0;


        .swipe-cell-text {
            display        : flex;
            justify-content: center;
            flex-direction : column;
            height         : 100%;
        }
    }
}