﻿* {
    font-size: inherit;
}

:root {
    --font-heading-scale: 1;
    --font-body-scale: 1;
    --page-width: 120rem;
    --theme-blur: #0094ff;
    --desktop-grid-row-spacing: 8px;
    --desktop-grid-col-spacing: 8px;
    --color-orange: #fd5708;
    --shopss-theme-1-primary: var(--color-orange);
    --shopss-theme-1-bg: #fff;
    --shopss-theme-1-btn-bg: #ffc069;
    --shopss-theme-2-primary: #E31D1A;
    --shopss-theme-2-bg: #fff;
    --shopss-theme-2-btn-bg: #ffccc7;
    --shopss-theme-yellow-primary: #FFFF00;
    --shopss-theme-yellow-btn-bg: #fffb8f;
    --shopss-theme-yellow-bg: #fff;
    --shopss-theme-green-primary: #31c9b0;
    --shopss-theme-green-btn-bg: #d9f7be;
    --shopss-theme-green-bg: #fff;
    --shopss-theme-ching-primary: #3f83bf;
    --shopss-theme-ching-bg: #fff;
    --shopss-theme-ching-btn-bg: #e6fffb;
    --shopss-theme-blue-primary: #0000FF;
    --shopss-theme-blue-bg: #fff;
    --shopss-theme-blue-btn-bg: #bae0ff;
    --shopss-theme-purple-primary: #6e10cc;
    --shopss-theme-purple-bg: #fff;
    --shopss-theme-purple-btn-bg: #efdbff;
    --shopss-theme-white-primary: var(--color-orange);
    --shopss-theme-white-bg: #fff;
    --shopss-theme-white-btn-bg: #ffeee6;
    --shopss-theme-grey-primary: #6C6C6C;
    --shopss-theme-grey-bg: #fff;
    --shopss-theme-grey-btn-bg: #fff;
    --shopss-theme-black-primary: #000;
    --shopss-theme-black-bg: #fff;
    --shopss-theme-black-btn-bg: #fff;
}

body {
    font-size: 1.6rem;
    line-height: calc(1 + 0.8 / var(--font-body-scale));
}

#app {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pad4 {
    padding: 4px;
}

a {
    color: inherit;
}

.hxl {
    font-size: calc(var(--font-heading-scale) * 6.2rem);
}

.h0 {
    font-size: calc(var(--font-heading-scale) * 5.2rem);
}

.h1, h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);
    font-weight: 400;
}

.h2 {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
}

.text-heading {
    line-height: 1.2;
}

html {
    font-size: calc(var(--font-body-scale) * 62.5%);
}

.theme-theme-1 {
    color: #fff;
    background: var(--shopss-theme-1-primary);
}

.theme-theme-2 {
    color: #fff;
    background: var(--shopss-theme-2-primary);
}

.theme-grey {
    color: var(--shopss-theme-grey-primary);
    background: #f5f5f5;
}

.theme-white {
    color: rgba(18, 18, 18,.75);
    background: #fff;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.page-width {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 1.2rem;
}

.clearfix:after {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}

.subtitle {
    font-size: 1.8rem;
    line-height: calc(1 + .8 / var(--font-body-scale));
    letter-spacing: .06rem;
}

.subtitle--small {
    font-size: 1.4rem;
    letter-spacing: .1rem;
}

.subtitle--medium {
    font-size: 1.6rem;
    letter-spacing: .08rem;
}

.caption-with-letter-spacing {
    font-size: 1rem;
    letter-spacing: .13rem;
    line-height: calc(1 + .2 / var(--font-body-scale));
    text-transform: uppercase;
}

.caption-with-letter-spacing--medium {
    font-size: 1.2rem;
    letter-spacing: .16rem;
}

.flex-row-top {
    align-items: flex-start;
}

.flex-row-middle {
    align-items: center;
}

.flex-row-bottom {
    align-items: flex-end;
}

.multi-column-col-1 {
    width: calc(100%);
}

.multi-column-col-2 {
    width: calc(50% - var(--desktop-grid-col-spacing));
}

.multi-column-col-3 {
    width: calc(33.33% - var(--desktop-grid-col-spacing)*4/3);
}

.multi-column-col-4 {
    width: calc(25% - var(--desktop-grid-col-spacing)*3/2);
}

.multi-column-col-5 {
    width: calc(20% - var(--desktop-grid-col-spacing)*8/5);
}

.multi-column-col-6 {
    width: calc(16.66% - var(--desktop-grid-col-spacing)*5/3);
}

/*商品列表样式-开始*/
.feature-collection {
    display: flex;
    flex-wrap: wrap;
    column-gap: calc(var(--desktop-grid-col-spacing)*2);
    row-gap: var(--desktop-grid-row-spacing);
}

    .feature-collection .title-box {
        width: 100%;
        flex-grow: 1;
        box-sizing: border-box;
        height: 27rem;
        position: relative;
        display: flex;
        align-items: center;
    }

        .feature-collection .title-box.card_warp {
            flex-grow: 1;
            display: flex;
            align-items: center;
            height: auto;
            overflow: hidden;
        }

.card_media {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.media {
    position: absolute;
    width: 100%;
    bottom: 0;
    top: 0;
}

.card_media img {
    display: block;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    transition: all 0.2s linear;
}

    .card_media img:nth-child(2) {
        opacity: 0;
    }

.portrait .card_media, .card_media.default-img {
    padding-bottom: 100% !important;
}

.square .card_media {
    padding-bottom: 100% !important;
}

.collection-item {
    cursor: pointer;
    border: 1px solid #dcdfe6;
}

    .collection-item .collection-item_a {
        height: 100%;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
    }

    .collection-item:hover .card_media .media img {
        transform: scale(1.03);
        transition: all 0.5s ease;
    }

.show-sec-img:hover .card_media img:nth-child(1) {
    opacity: 0;
}

.show-sec-img:hover .card_media img:nth-last-child(1) {
    opacity: 1;
    transform: scale(1.03);
    transition: all 0.5s ease;
}
/*商品列表样式-结束*/
h3,
.h3 {
    font-size: calc(var(--font-heading-scale) * 1.7rem);
}

.preview-warp {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px 20px;
    box-shadow: rgb(0 0 0 / 20%) 0px -1px 3px;
    background-color: rgba(255,255,255,0.9);
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.collection-item:hover .icon-wrap path {
    transform: translateX(-0.05rem);
}

.icon-wrap svg {
    width: 1.5rem;
}

.collection-list-wrapper .collection-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    height: 100%;
}

    .collection-list-wrapper .collection-item .collection-item-img {
        flex: 1;
        display: flex;
        align-items: center;
    }

.collection-list-wrapper .feature-collection {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1.8rem;
}

    .collection-list-wrapper .feature-collection .title-box {
        width: 100%;
        background: #f3f3f3;
        box-sizing: border-box;
        padding-bottom: 100%;
        color: #121212;
    }

.collection-list-wrapper .title-box .title {
    grid-row-start: 2;
    padding: 1.3rem 1rem;
    font-size: 1.8rem;
    position: absolute;
    top: 50%;
    margin-top: -30px;
}

.collection-list-wrapper .feature-collection .title-box:hover span.title {
    text-decoration: underline;
}

.feature-collection .card-info {
    padding: 1rem;
    line-height: 2rem;
}

    .feature-collection .card-info .price-line {
        margin-top: 0.2rem;
        text-align:center;
    }

    .feature-collection .card-info .title {
        display: block;
        height: 4rem;
    }

        .feature-collection .card-info .title:hover {
            text-decoration: underline;
            text-underline-offset: 3px;
        }
    .feature-collection .card-info .scard {
        font-size:1.2rem;
    }
    .feature-collection .card-info .scard .scard-row {
        display:flex;
        justify-content:space-between;
        margin-bottom:0.5rem;
    }
        .feature-collection .card-info .scard .scard-row span {
            color: #ee4d2d;
            margin-left:4px;
        }
.feature-collection .collection-item .price {
    text-decoration: line-through;
    font-size: 1.3rem;
    margin: 1rem 0 0 0;
}

.theme-white button.j-button {
    border-color: var(--shopss-theme-1-primary) !important;
    color: var(--shopss-theme-1-primary) !important;
}

    .theme-white button.j-button:disabled {
        cursor: not-allowed;
    }

    .theme-white button.j-button.j-primary {
        background-color: var(--shopss-theme-1-primary) !important;
        color: #fff !important;
    }
    .theme-white .j-tab-top > .j-tab-buttons > .j-tab-button.actived {
        color: var(--shopss-theme-1-primary);
        border-bottom: 2px solid var(--shopss-theme-1-primary);
    }

.theme-white .j-tab-top > .j-tab-buttons > .j-tab-button:hover {
    border-bottom: 2px solid var(--shopss-theme-1-primary);
}
    .theme-white button.j-button:hover:not(:disabled):not(.j-link) {
        background-color: rgba(253,87,8, .1);
    }

    .theme-white button.j-button.j-primary:hover:not(:disabled):not(.j-link) {
        background-color: var(--shopss-theme-white-primary) !important;
        border-color: var(--shopss-theme-white-primary) !important;
    }

    .theme-white button.j-button.j-link:hover, .theme-white button.j-button.j-link {
        color: var(--shopss-theme-white-primary) !important;
        background: #fff;
    }

    .theme-white button.j-button:hover:not(:disabled):not(.j-link) {
        background-color: var(--shopss-theme-white-bg);
    }
.input-group {
    border: 1px solid #333;
    display: inline-flex;
}
.input-group span {
    display: block;
    width: 40px;
    text-align: center;
    line-height: 4.5rem;
    cursor: pointer;
    font-size: 1.8rem;
}
    .input-group span div.j-input {
        width: 40px;
    }
.input-group span svg {
    width: 1rem;
    height: 1rem;
}
.input-group input, .input-group input:focus {
    border: none;
    outline: none;
    text-align: center;
    height: 4.5rem;
}
.theme-white .input-group {
    border-color: #dcdfe6;
    color: rgba(18, 18, 18,.75);
    background: #fff;
}

    .theme-white .input-group span:hover svg {
        color: var(--shopss-theme-white-primary);
    }

    .theme-white .input-group .j-input {
        /*color: #fd5708;*/
    }

.theme-white .cart-icon .count {
    background-color: #f10e0e;
}
.shopping-car-btn {
    margin-top: 1rem;
    width: 100%;
    justify-content:center;
}
/*黄色主题*/
.theme-yellow {
    color: rgba(18, 18, 18,.75);
    background: var(--shopss-theme-yellow-primary);
}

    .theme-yellow button.j-button {
        border-color: #fff;
    }

        .theme-yellow button.j-button:not(.j-text) {
            background: #fff;
            color:  #000;
        }

        .theme-yellow button.j-button.j-primary {
            background: #fff;
            color: #000;
        }

        .theme-yellow button.j-button:hover:not(:disabled) {
            border-color: #fff;
            color: #000;
            background: var(--shopss-theme-yellow-bg)
        }

        .theme-yellow .j-tab-top > .j-tab-buttons > .j-tab-button.actived {
            color: var(--shopss-theme-yellow-primary);
            border-bottom: 2px solid var(--shopss-theme-yellow-primary);
        }

    .theme-yellow .j-tab-top > .j-tab-buttons > .j-tab-button:hover {
        border-bottom: 2px solid var(--shopss-theme-yellow-primary);
    }
    
    .theme-yellow button.j-button.j-link:hover, .theme-yellow button.j-button.j-link {
        color: var(--shopss-theme-yellow-primary) !important;
        background: #fff;
    }
/*绿色主题*/
.theme-green {
    color: rgba(18, 18, 18,.75);
    background: var(--shopss-theme-green-primary);
}
    .theme-green button.j-button:not(.j-text) {
        background: #fff;
        color:  var(--shopss-theme-green-primary);
    }
    .theme-green button.j-button.j-primary,  .theme-green button.j-button.j-primary:hover{
        border-color:#fff;
        background-color: var(--shopss-theme-green-primary);
        color: #fff;
    }
        .theme-green button.j-button:hover:not(:disabled) {
            background-color: var(--shopss-theme-green-btn-bg);
            color: var(--shopss-theme-green-primary);
        }
        .theme-green button.j-button.j-link:hover, .theme-green button.j-button.j-link {
            color: var(--shopss-theme-green-primary) !important;
            background: #fff;
        }
/*青色主题*/
.theme-ching {
    color: #fff;
    background: var(--shopss-theme-ching-primary);
}
    .theme-ching button.j-button {
        border-color: #fff;
    }

        .theme-ching button.j-button.j-primary {
            background: #fff;
            color: var(--shopss-theme-ching-primary);
        }

            .theme-ching button.j-button.j-primary:hover {
                background: #fff;
                color: var(--shopss-theme-ching-primary);
            }

        .theme-ching button.j-button:hover:not(:disabled) {
            color: #fff;
        }

    .theme-ching .j-tab-top > .j-tab-buttons > .j-tab-button.actived {
        color: var(--shopss-theme-ching-primary);
        border-bottom: 2px solid var(--shopss-theme-ching-primary);
    }

    .theme-ching .j-tab-top > .j-tab-buttons > .j-tab-button:hover {
        border-bottom: 2px solid var(--shopss-theme-ching-primary);
    }



        .theme-ching button.j-button.j-primary:not(:disabled):not(.j-link) {
            background-color: var(--shopss-theme-ching-primary);
            border-color: #fff;
            color: #fff;
        }

        .theme-ching button.j-button:hover:not(:disabled):not(.j-link) {
            background-color: var(--shopss-theme-ching-btn-bg);
            color: var(--shopss-theme-ching-primary);
        }
        .theme-ching button.j-button.j-link:hover, .theme-ching button.j-button.j-link {
            color: var(--shopss-theme-ching-primary) !important;
            background: #fff;
        }
/*蓝色主题*/
.theme-blue {
    color: #fff;
    background: var(--shopss-theme-blue-primary)
}
    .theme-blue button.j-button {
        border-color: #fff;
        color: var(--shopss-theme-blue-primary);
    }

        .theme-blue button.j-button.j-primary {
            background: var(--shopss-theme-blue-primary);
            color: #fff;
        }
        .theme-blue button.j-button:hover:not(:disabled) {
            background: var(--shopss-theme-blue-btn-bg);
            color: var(--shopss-theme-blue-primary);
        }
    .theme-blue .j-tab-top > .j-tab-buttons > .j-tab-button.actived {
        color: var(--shopss-theme-blue-primary);
        border-bottom: 2px solid var(--shopss-theme-blue-primary);
    }
    .theme-blue .j-tab-top > .j-tab-buttons > .j-tab-button:hover {
        border-bottom: 2px solid var(--shopss-theme-blue-primary);
    }
    .theme-blue button.j-button.j-link:hover, .theme-blue button.j-button.j-link {
        color: var(--shopss-theme-blue-primary) !important;
        background: #fff;
    }
    /*紫色主题*/
    .theme-purple {
        color: #fff;
        background: var(--shopss-theme-purple-primary);
    }

    .theme-purple button.j-button {
        border-color: #fff;
        color: var(--shopss-theme-purple-primary);
    }

        .theme-purple button.j-button.j-primary {
            color: #fff;
            background: var(--shopss-theme-purple-primary);
        }

    .theme-purple .j-tab-top > .j-tab-buttons > .j-tab-button.actived {
        color: var(--shopss-theme-purple-primary);
        border-bottom: 2px solid var(--shopss-theme-purple-primary);
    }
    .theme-purple .j-tab-top > .j-tab-buttons > .j-tab-button:hover {
        border-bottom: 2px solid var(--shopss-theme-purple-primary);
    }
        .theme-purple button.j-button:hover:not(:disabled) {
            background: var(--shopss-theme-purple-btn-bg);
            color: var(--shopss-theme-purple-primary);
        }
        .theme-purple button.j-button.j-link:hover, .theme-purple button.j-button.j-link {
            color: var(--shopss-theme-purple-primary) !important;
            background: #fff;
        }
    .theme-theme-1 .j-button .j-icon, .theme-theme-1 .iconfont,
    .theme-theme-2 .j-button .j-icon, .theme-theme-2 .iconfont,
    .theme-blue .j-button .j-icon, .theme-blue .iconfont,
    .theme-black .j-button .j-icon, .theme-black .iconfont,
    .theme-purple .j-button .j-icon, .theme-purple .iconfont,
    .theme-ching .j-button .j-icon, .theme-ching .iconfont,
    .theme-theme-1 .j-button .ellipsis, .theme-theme-1 .j-button .ellipsis + span,
    .theme-theme-2 .j-button .ellipsis, .theme-theme-2 .j-button .ellipsis + span,
    .theme-blue .j-button .ellipsis, .theme-blue .j-button .ellipsis + span,
    .theme-black .j-button .ellipsis, .theme-black .j-button .ellipsis + span,
    .theme-purple .j-button .ellipsis, .theme-purple .j-button .ellipsis + span,
    .theme-ching .j-button .ellipsis, .theme-ching .j-button .ellipsis + span
    {
        color: #fff;
    }
    .theme-theme-1 .j-button:hover .j-icon,
    .theme-theme-2 .j-button:hover .j-icon,
    .theme-blue .j-button:hover .j-icon,
    .theme-black .j-button:hover .j-icon,
    .theme-purple .j-button:hover .j-icon,
    .theme-ching .j-button:hover .j-icon,
    .theme-theme-1 .j-button:hover .ellipsis,
    .theme-theme-1 .j-button:hover .ellipsis + span,
    .theme-theme-2 .j-button:hover .ellipsis,
    .theme-theme-2 .j-button:hover .ellipsis + span,
    .theme-blue .j-button:hover .ellipsis,
    .theme-blue .j-button:hover .ellipsis + span,
    .theme-black .j-button:hover .ellipsis,
    .theme-black .j-button:hover .ellipsis + span,
    .theme-purple .j-button:hover .ellipsis,
    .theme-purple .j-button:hover .ellipsis + span,
    .theme-ching .j-button:hover .ellipsis,
    .theme-ching .j-button:hover .ellipsis + span
    {
        color: inherit;
    }
/*主题色1按钮*/
.theme-theme-1 button.j-button {
    background-color: transparent;
    border-color: #fff;
    color: #ffffff;
}

    .theme-theme-1 button.j-button:hover:not(:disabled) {
        background-color: var(--shopss-theme-1-btn-bg);
        border-color: #fff;
        color: var(--shopss-theme-1-primary);
    }
    .theme-theme-1 button.j-button:not(.j-text){
        background: #fff;
        color: var(--shopss-theme-1-primary);
    }
    .theme-theme-1 button.j-button.j-primary {
        color: #fff;
        background: var(--shopss-theme-1-primary);
        border-color: #fff;
    }
        .theme-theme-1 button.j-button.j-primary a {
            color: #fff !important;
        }

.theme-theme-1 .input-group, .theme-theme-2 .input-group {
    border-color: #fff !important;
}

    .theme-theme-1 .input-group .j-input, .theme-theme-2 .input-group .j-input {
        vertical-align: top;
        background: transparent;
        color: #fff;
    }

.theme-theme-1 .j-tab-top > .j-tab-buttons > .j-tab-button.actived {
    color: var(--shopss-theme-1-primary);
    border-bottom: 2px solid var(--shopss-theme-1-primary);
}

.theme-theme-1 .j-tab-top > .j-tab-buttons > .j-tab-button:hover {
    border-bottom: 2px solid var(--shopss-theme-1-primary);
}
.theme-theme-1 button.j-button:disabled {
    color: #606266
}
.theme-theme-1 button.j-button.j-link:hover, .theme-theme-1 button.j-button.j-link {
    color: var(--shopss-theme-1-primary) !important;
    background: #fff;
}
/*主题色2按钮*/
.theme-theme-2 button.j-button {
    border-color: #fff;
}
.theme-theme-2 button.j-button:not(.j-text) {
    background: #fff;
    color: var(--shopss-theme-2-primary);
}
    .theme-theme-2 button.j-button.j-primary{
        color: #fff;
        background: var(--shopss-theme-2-primary);
    }

    .theme-theme-2 button.j-button:hover:not(:disabled) {
        border-color: #fff;
        color: var(--shopss-theme-2-primary);
        background: var(--shopss-theme-2-btn-bg)
    }

.theme-theme-2 .j-tab-top > .j-tab-buttons > .j-tab-button.actived {
    color: var(--shopss-theme-2-primary);
    border-bottom: 2px solid var(--shopss-theme-2-primary);
}

.theme-theme-2 .j-tab-top > .j-tab-buttons > .j-tab-button:hover {
    border-bottom: 2px solid var(--shopss-theme-2-primary);
}
.theme-theme-2 button.j-button.j-link:hover, .theme-theme-2 button.j-button.j-link {
    color: var(--shopss-theme-2-primary) !important;
    background: #fff;
}
/*主题灰色按钮*/
.theme-grey button.j-button {
    background-color: transparent !important;
    border-color: var(--shopss-theme-grey-primary) !important;
    color: var(--shopss-theme-grey-primary) !important;
}

.theme-grey .input-group .j-input {
    background: transparent;
}

.theme-grey button.j-button.j-primary {
    background: #fff !important;
    color: var(--shopss-theme-grey-primary) !important;
    border-color: transparent !important;
}
.theme-grey .j-tab-top > .j-tab-buttons > .j-tab-button.actived {
    color: var(--shopss-theme-grey-primary);
    border-bottom: 2px solid var(--shopss-theme-grey-primary);
}

.theme-grey .j-tab-top > .j-tab-buttons > .j-tab-button:hover {
    border-bottom: 2px solid var(--shopss-theme-grey-primary);
}

.discount-price {
    color: #ee4d2d;
    font-size: 2rem;
}

.theme-theme-1 .discount-price, .theme-theme-2 .discount-price, .theme-blue .discount-price, .theme-black .discount-price, .theme-purple .discount-price {
    color: #fff;
}

.collection-item .discount-price:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.collection-item .price:hover {
    border-bottom: 1px solid #333;
}

.line2-ellipsis {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rte a {
    display: inline;
    text-decoration: underline;
}

.theme-white .rte a:hover {
    color: var(--shopss-theme-1-primary);
}

.card_content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    color: #121212;
    padding: 1rem;
}

.feature-collection .title-box .btn-panel {
    align-self: flex-end;
    grid-row-start: 3;
    justify-self: flex-start;
}
/*橘黄色主题色*/
.theme-theme-1 .only-white button.j-button {
    border-color: var(--shopss-theme-1-primary) !important;
    color: var(--shopss-theme-1-primary) !important;
}

    .theme-theme-1 .only-white button.j-button.j-primary {
        background-color: var(--shopss-theme-1-primary) !important;
        color: #fff !important;
    }

    .theme-theme-1 .only-white button.j-button:hover:not(:disabled):not(.j-link) {
        background-color: var(--shopss-theme-1-bg) !important;
    }

    .theme-theme-1 .only-white button.j-button.j-primary:hover:not(:disabled):not(.j-link) {
        background-color: var(--shopss-theme-1-primary) !important;
        border-color: var(--shopss-theme-1-primary) !important;
    }
/*红色主题色*/
.theme-theme-2 .only-white button.j-button {
    border-color: var(--shopss-theme-2-primary) !important;
    color: var(--shopss-theme-2-primary) !important;
}

    .theme-theme-2 .only-white button.j-button.j-primary {
        background-color: var(--shopss-theme-2-primary) !important;
        color: #fff !important;
    }

    .theme-theme-2 .only-white button.j-button:hover:not(:disabled):not(.j-link) {
        background-color: var(--shopss-theme-2-bg) !important;
    }

    .theme-theme-2 .only-white button.j-button.j-primary:hover:not(:disabled):not(.j-link) {
        background-color: var(--shopss-theme-2-primary) !important;
        border-color: var(--shopss-theme-2-primary) !important;
    }

    .theme-theme-2 .only-white button.j-button.j-link:hover {
        color: var(--shopss-theme-2-primary) !important;
        background: #fff;
    }

/*灰色主题色*/
.theme-grey .only-white button.j-button {
    border-color: #DCDFE6 !important;
    color: var(--shopss-theme-grey-primary)6 !important;
}

    .theme-grey .only-white button.j-button.j-primary {
        background-color: #f5f5f5 !important;
        color: var(--shopss-theme-grey-primary) !important;
    }

    .theme-grey .only-white button.j-button:hover:not(:disabled):not(.j-link) {
        background-color: #fafafa !important;
    }

    .theme-grey .only-white button.j-button.j-primary:hover:not(:disabled):not(.j-link) {
        background-color: #fafafa !important;
        border-color: #DCDFE6 !important;
    }

    .theme-grey .only-white button.j-button.j-link:hover {
        color: var(--shopss-theme-grey-primary) !important;
        background: #fff;
    }


/*黑主题*/
.theme-black {
    color: #fff;
    background: var(--shopss-theme-black-primary);
}

    .theme-black button.j-button {
        border-color: #fff;
    }

        .theme-black button.j-button.j-primary {
            background: #fff;
            background: var(--shopss-theme-black-primary);
        }

            .theme-black button.j-button.j-primary:hover {
                background: #fff;
            }

        .theme-black button.j-button:hover:not(:disabled) {
            background: #fff;
        }
        .theme-black button.j-button.j-primary:hover:not(:disabled), .theme-black button.j-button.j-text:hover {
            background: var(--shopss-theme-black-primary);
        }
@media screen and (max-width: 990px) {
    h1, .h1 {
        font-size: calc(var(--font-heading-scale) * 2.4rem);
    }

    h2, .h2 {
        font-size: calc(var(--font-heading-scale) * 2rem);
    }

    h3, .h3 {
        font-size: calc(var(--font-heading-scale) * 1.6rem);
    }

    .wrap-width {
        width: 100% !important;
    }

    .mobile-1 {
        width: 100%;
    }

    .mobile-2 {
        width: calc(50% - var(--desktop-grid-col-spacing));
    }
}
/*关闭icon继承外部颜色*/
.icon-close.j-dialog-close {
    color: unset;
}
    .icon-close.j-dialog-close:hover {
        background: #c0c4cc
    }

.theme-theme-1.cart-detail .j-table-panel, .theme-theme-1.cart-detail .j-table-panel .j-table-td, .theme-theme-1.cart-detail .j-table-panel .j-table-th, .theme-theme-1.cart-detail .j-table-td {
    background: var(--shopss-theme-1-bg)
}
.theme-theme-2.cart-detail .j-table-panel, .theme-theme-2.cart-detail .j-table-panel .j-table-td, .theme-theme-2.cart-detail .j-table-panel .j-table-th, .theme-theme-2.cart-detail .j-table-td {
    background: var(--shopss-theme-2-bg)
}
.theme-theme-1.cart-detail .input-group .j-input, .theme-theme-2 .input-group .j-input {
    color: #000;
}
.theme-yellow.cart-detail .j-table-panel, .theme-yellow.cart-detail .j-table-panel .j-table-td, .theme-yellow.cart-detail .j-table-panel .j-table-th, .theme-yellow.cart-detail .j-table-td {
    background: var(--shopss-theme-yellow-bg)
}

.theme-green.cart-detail .j-table-panel, .theme-green.cart-detail .j-table-panel .j-table-td, .theme-green.cart-detail .j-table-panel .j-table-th, .theme-green.cart-detail .j-table-td {
    background: var(--shopss-theme-green-bg)
}

.theme-ching.cart-detail .j-table-panel, .theme-ching.cart-detail .j-table-panel .j-table-td, .theme-ching.cart-detail .j-table-panel .j-table-th, .theme-ching.cart-detail .j-table-td {
    background: var(--shopss-theme-ching-bg)
}
.theme-blue.cart-detail .j-table-panel, .theme-blue.cart-detail .j-table-panel .j-table-td, .theme-blue.cart-detail .j-table-panel .j-table-th, .theme-blue.cart-detail .j-table-td {
    background: var(--shopss-theme-blue-bg)
}
.theme-purple.cart-detail .j-table-panel, .theme-purple.cart-detail .j-table-panel .j-table-td, .theme-purple.cart-detail .j-table-panel .j-table-th, .theme-purple.cart-detail .j-table-td {
    background: var(--shopss-theme-purple-bg)
}
.theme-black.cart-detail .j-table-panel, .theme-black.cart-detail .j-table-panel .j-table-td, .theme-black.cart-detail .j-table-panel .j-table-th, .theme-black.cart-detail .j-table-td {
    background: var(--shopss-theme-black-bg)
}
.theme-white button.j-button.j-primary.theme-yellow, .theme-white button.j-button.j-primary.theme-yellow:hover:not(:disabled):not(.j-link) {
    background: var(--shopss-theme-yellow-primary)!important;
    color: #000!important;
    border: var(--shopss-theme-yellow-primary)!important;
}
.theme-white button.j-button.j-primary.theme-theme-1 {
    background: var(--shopss-theme-1-primary)!important;
    color: #fff!important;
    border: var(--shopss-theme-1-primary)!important;
}
.theme-white button.j-button.j-primary.theme-theme-2 {
    background: var(--shopss-theme-2-primary)!important;
    color: #fff!important;
    border: var(--shopss-theme-2-primary)!important;
}
.theme-white button.j-button.j-primary.theme-green {
    background: var(--shopss-theme-green-primary)!important;
    color: #fff!important;
    border: var(--shopss-theme-green-primary)!important;
}
.theme-white button.j-button.j-primary.theme-ching {
    background: var(--shopss-theme-ching-primary)!important;
    color: #fff!important;
    border: var(--shopss-theme-ching-primary)!important;
}
.theme-white button.j-button.j-primary.theme-blue {
    background: var(--shopss-theme-blue-primary)!important;
    color: #fff!important;
    border: var(--shopss-theme-blue-primary)!important;
}
.theme-white button.j-button.j-primary.theme-purple {
    background: var(--shopss-theme-purple-primary)!important;
    color: #fff!important;
    border: var(--shopss-theme-purple-primary)!important;
}
.theme-white button.j-button.j-primary.theme-black {
    background: var(--shopss-theme-black-primary)!important;
    color: #fff!important;
    border: var(--shopss-theme-black-primary)!important;
}
.theme-white button.j-button.j-primary.theme-grey, .theme-white button.j-button.j-primary.theme-grey:hover:not(:disabled):not(.j-link)  {
    background: #fff!important;
    color: var(--shopss-theme-grey-primary)!important;
    border: 1px solid #dcdfe6!important;
}

.theme-white button.j-button.j-primary.theme-theme-1:hover:not(:disabled):not(.j-link) {
    background-color: var(--shopss-theme-1-btn-bg)!important;
    color: var(--shopss-theme-1-primary)!important;
    border: var(--shopss-theme-1-btn-bg)!important;
}
.theme-white button.j-button.j-primary.theme-theme-2:hover:not(:disabled):not(.j-link) {
    background: var(--shopss-theme-2-btn-bg)!important;
    color: var(--shopss-theme-2-primary)!important;
    border:  var(--shopss-theme-2-btn-bg)!important;
}
.theme-white button.j-button.j-primary.theme-green:hover:not(:disabled):not(.j-link) {
    background: var(--shopss-theme-green-btn-bg)!important;
    color: var(--shopss-theme-green-primary)!important;
    border: var(--shopss-theme-green-btn-bg)!important;
}
.theme-white button.j-button.j-primary.theme-ching:hover:not(:disabled):not(.j-link) {
    background: var(--shopss-theme-ching-btn-bg)!important;
    color: var(--shopss-theme-ching-primary)!important;
    border: var(--shopss-theme-ching-btn-bg)!important;
}
.theme-white button.j-button.j-primary.theme-blue:hover:not(:disabled):not(.j-link) {
    background: var(--shopss-theme-blue-btn-bg)!important;
    color: var(--shopss-theme-blue-primary)!important;
    border: var(--shopss-theme-blue-btn-bg)!important;
}
.theme-white button.j-button.j-primary.theme-purple:hover:not(:disabled):not(.j-link) {
    background: var(--shopss-theme-purple-btn-bg)!important;
    color: var(--shopss-theme-purple-primary)!important;
    border: var(--shopss-theme-purple-btn-bg)!important;
}
.theme-white button.j-button.j-primary.theme-black:hover:not(:disabled):not(.j-link) {
    background: var(--shopss-theme-black-primary)!important;
    color: #fff;
    border: var(--shopss-theme-black-primary)!important;
}