@CHARSET "UTF-8";

/* ========== 简约现代风格重置 ========== */
* {
    box-sizing: border-box;
}

/* ========== 主容器 ========== */
.wst-w {
    background: #f8f9fa;
    padding: 20px 0;
}

.wst-container {
    max-width: 1200px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    padding: 30px;
    border: none;
}

/* ========== 导航筛选 ========== */
.wst-filters {
    width: 1200px;
    margin: 0 auto;
    margin-top: 10px;
    color: #6c757d;
    padding: 0 20px;
}

.wst-filters div.item {
    float: left;
    margin-right: 6px;
    position: relative;
}

.wst-filters .arrow {
    float: left;
    position: relative;
    top: 6px;
    font-style: normal;
    background-image: url(./../img/goods_detail_arrow_r.png);
    background-repeat: no-repeat;
    display: block;
    width: 10px;
    height: 10px;
}

.wst-filters div.dorpdown .arrow {
    top: 7px;
}

.wst-filters .item .link {
    color: #495057;
    float: left;
    border: 0;
    margin-right: 5px;
    height: 22px;
    line-height: 22px;
    padding: 0 8px;
    text-decoration: none;
    transition: color 0.2s;
}

.wst-filters .item .link:hover {
    color: #007bff;
}

.wst-filters .item .drop-down {
    float: left;
    border: 1px solid transparent;
    display: inline-block;
    height: 23px;
    line-height: 23px;
    vertical-align: top;
    position: relative;
    background-color: #fff;
    padding: 0 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.wst-filters .item .drop-down.hover {
    border-color: #007bff;
    border-bottom: 0;
    z-index: 2;
    background: #f8f9fa;
}

.wst-filters .item .dorp-down-layer {
    border: 1px solid #e9ecef;
    border-top: 0;
    display: none;
    left: 0;
    top: 22px;
    position: absolute;
    z-index: 100;
    background: #fff;
    min-width: 320px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.wst-filters .item .dorp-down-layer div {
    float: left;
    width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 8px 12px;
    transition: background 0.2s;
}

.wst-filters .item .dorp-down-layer div:hover,
.wst-filters .item .dorp-down-layer a:hover {
    color: #007bff;
    background: #f8f9fa;
}

.wst-filters .item .v-item {
    color: #495057;
    border: 1px solid #dee2e6;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    margin: 0 5px 5px 0;
    padding: 0 30px 0 8px;
    position: relative;
    vertical-align: top;
    border-radius: 4px;
    transition: all 0.2s;
}

.wst-filters .item .v-item:hover {
    border-color: #007bff;
    color: #007bff;
}

.wst-filters .item .v-item i {
    display: block;
    position: absolute;
    width: 25px;
    height: 24px;
    right: 0;
    text-align: center;
    font-style: normal;
    top: 0;
    border-radius: 0 4px 4px 0;
    transition: all 0.2s;
}

.wst-filters .item .v-item:hover i {
    background-color: #007bff;
    color: #fff;
}

/* ========== 商品图片区域 ========== */
.goods-img-box {
    float: left;
    height: auto;
    margin: 0;
    width: 450px;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
}

.spec-preview {
    float: left;
    height: 450px;
    width: 100%;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

.wst-video-box {
    height: 450px;
    width: 100%;
    position: absolute;
    z-index: 20;
    background: #000;
    border-radius: 8px;
}

.wst-video-box .video-close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    z-index: 100001;
    color: #fff;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
}

.wst-video-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 20px;
    left: 20px;
    z-index: 100000;
    cursor: pointer;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    background: rgba(0, 123, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.wst-video-btn:hover {
    background: rgba(0, 123, 255, 1);
    transform: scale(1.1);
}

.wst-video-btn i {
    font-size: 30px;
    opacity: 1;
}

/* ========== 商品缩略图 ========== */
.goods-pics {
    width: 100%;
    margin: 15px 0 0 0;
}

.goods-pics .items ul li {
    float: left;
    text-align: center;
    width: 80px;
    height: 80px;
    border: 2px solid #e9ecef;
    margin-right: 10px;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transition: all 0.2s;
}

.goods-pics .items ul li.hover {
    border: 2px solid #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

.goods-pics .items ul li img {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.goods-pics .prev,
.goods-pics .next {
    cursor: pointer;
    display: block;
    font-family: "Arial";
    height: 80px;
    line-height: 80px;
    text-align: center;
    text-decoration: none;
    width: 30px;
    border: 0;
    font-size: 18px;
    color: #6c757d;
    background: #f8f9fa;
    border-radius: 6px;
    transition: all 0.2s;
    float: left;
    margin-top: 0;
}

.goods-pics .prev {
    margin-right: 10px;
}

.goods-pics .next {
    float: right;
    margin-left: 10px;
}

.goods-pics .prev:hover,
.goods-pics .next:hover {
    background: #007bff;
    color: #fff;
}

/* ========== 商品操作按钮 ========== */
.goods-term-box {
    padding: 15px 20px;
    color: #6c757d;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 15px;
}

.wst-favorite {
    float: left;
    height: 38px;
    position: relative;
}

.wst-favorite .favorite {
    height: 38px;
    line-height: 38px;
    padding: 5px 15px 5px 35px;
    color: #495057;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s;
    display: inline-block;
}

.wst-favorite .j-fav {
    background: url(../img/iconfont_guanzhu_sel.png) 10px center no-repeat;
    background-color: #e7f3ff;
    color: #007bff;
}

.wst-favorite .j-fav2 {
    background: url(../img/iconfont_guanzhu_nor.png) 10px center no-repeat;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.wst-favorite .j-fav2:hover {
    background-color: #f8f9fa;
    border-color: #007bff;
    color: #007bff;
}

.wst-contrast {
    float: left;
    padding-left: 30px;
    height: 38px;
    line-height: 38px;
    position: relative;
    cursor: pointer;
    color: #495057;
    transition: color 0.2s;
}

.wst-contrast:hover {
    color: #007bff;
}

.wst-contrast i {
    position: absolute;
    top: 12px;
    left: 10px;
    width: 15px;
    height: 15px;
    background: url(../img/contrast.png) 0 0 no-repeat;
    background-size: 100%;
}

.wst-contrast:hover i {
    background: url(../img/contrast2.png) 0 0 no-repeat;
    background-size: 100%;
}

.j-inform {
    float: right;
    color: #6c757d;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 6px;
    transition: all 0.2s;
}

.j-inform:hover {
    color: #007bff;
    background: #f8f9fa;
}

/* ========== Cloud Zoom 放大镜 ========== */
.cloudzoom-lens {
    width: 30px;
    height: 30px;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: crosshair;
    z-index: 10;
    border-radius: 4px;
}

.cloudzoom-zoom {
    background: #fff;
    border: 1px solid #e9ecef;
    width: 450px;
    height: 450px;
    z-index: 200;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
}

.cloudzoom-zoom-inside {
    border: none;
    box-shadow: none;
}

.cloudzoom-blank {
    opacity: 0.3;
}

/* ========== 商品信息区域 ========== */
.intro {
    display: inline;
    float: left;
    width: calc(100% - 470px);
    min-height: 450px;
    padding: 0 0 0 30px;
    border: none;
    position: relative;
}

.intro-name {
    padding: 0 0 20px 0;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 25px;
}

.intro h2 {
    color: #212529;
    font: 700 24px/32px "Microsoft YaHei", Arial;
    line-height: 32px;
    margin: 0 0 10px 0;
}

.intro .tips {
    color: #007bff;
    font-size: 14px;
    background: #e7f3ff;
    padding: 4px 12px;
    border-radius: 4px;
    display: inline-block;
}

/* ========== 价格信息 ========== */
.summary {
    margin: 0 0 25px 0;
    background: #f8f9fa;
    line-height: 40px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.summary .dt {
    display: inline;
    color: #6c757d;
    float: left;
    font-family: "Microsoft YaHei";
    text-align: right;
    padding-left: 10px;
    font-size: 14px;
}

.summary .dd {
    width: calc(100% - 100px);
    color: #212529;
    font-size: 14px;
}

.summary .market-price {
    font-weight: 400;
    text-decoration: line-through;
    color: #adb5bd;
    font-size: 16px;
}

.summary .price {
    color: #007bff;
    display: inline-block;
    font-size: 18px;
    vertical-align: middle;
    font-weight: 600;
}

.summary .price span {
    font-size: 32px;
    font-weight: 700;
}

.summary .appraise {
    float: right;
}

.summary .appraise-num {
    color: #007bff;
    font-weight: 600;
}

.summary .infol {
    float: left;
    width: 100%;
}

.goods-intro-bg {
    position: relative;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

.ginfo_b {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.ginfo_b li {
    flex: 1;
    height: auto;
    overflow: hidden;
    text-align: center;
    padding: 0 10px;
}

.ginfo_b li:nth-child(3) {
    flex: 2;
}

.ginfo_b li .dt {
    display: block;
    color: #6c757d;
    font-size: 13px;
    margin-bottom: 5px;
    float: none;
    text-align: center;
    width: 100%;
    padding: 0;
}

.ginfo_b li .dd {
    width: 100%;
    float: none;
}

/* ========== 促销信息 ========== */
.sale_box {
    margin: 0 0 25px 0;
    padding: 20px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #fff;
}

.sale_box .dt {
    display: inline;
    color: #6c757d;
    float: left;
    font-family: "Microsoft YaHei";
    text-align: right;
    width: 90px;
    padding-left: 10px;
    font-size: 14px;
}

.sale_box .dd {
    color: #212529;
    width: calc(100% - 100px);
}

.c14_005 {
    font-size: 14px;
    color: #007bff;
    text-decoration: none;
}

.c14_005:hover {
    text-decoration: underline;
}

.login {
    font-size: 14px;
    color: #007bff;
    text-decoration: none;
}

.login:hover {
    text-decoration: underline;
}

.shop-member {
    background-color: #007bff;
    color: #fff;
    width: 70px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    margin-left: 8px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 12px;
    display: inline-block;
}

/* ========== 商品规格 ========== */
.intro .spec {
    padding: 20px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 25px;
}

.spec img {
    vertical-align: middle;
}

.intro .spec .item {
    width: 100%;
    margin-bottom: 20px;
}

.intro .spec .item:last-child {
    margin-bottom: 0;
}

.spec .dt {
    padding-left: 0;
    line-height: 40px;
    color: #495057;
    height: 40px;
    display: inline;
    float: left;
    font-family: "Microsoft YaHei";
    text-align: right;
    width: 90px;
    font-size: 14px;
    font-weight: 500;
}

.spec .dd {
    width: calc(100% - 100px);
    color: #212529;
    float: left;
    min-height: 40px;
}

.spec .j-option {
    float: left;
    margin: 5px 10px 5px 0;
    background: #fff;
    border: 2px solid #e9ecef;
    padding: 8px 16px;
    cursor: pointer;
    position: relative;
    border-radius: 6px;
    transition: all 0.2s;
    font-size: 14px;
    color: #495057;
}

.spec .j-option:hover {
    border-color: #007bff;
    color: #007bff;
    background: #f8f9fa;
}

.spec .j-selected {
    border: 2px solid #007bff;
    background: #e7f3ff;
    color: #007bff;
}

.spec .j-selected i {
    font-size: 0;
    line-height: 0;
    background: url(../img/img_gd_sel.png) no-repeat 0 0;
    display: block;
    width: 11px;
    height: 11px;
    position: absolute;
    z-index: 1;
    right: -1px;
    bottom: -1px;
}

/* ========== 购买区域 ========== */
.intro .buy {
    padding: 20px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.intro .buy .item {
    width: 100%;
    clear: both;
    margin-bottom: 20px;
}

.intro .buy .item:last-child {
    margin-bottom: 0;
}

.buy .dt {
    padding-left: 0;
    line-height: 40px;
    color: #495057;
    height: 40px;
    display: inline;
    float: left;
    font-family: "Microsoft YaHei";
    text-align: right;
    width: 90px;
    font-size: 14px;
    font-weight: 500;
}

.buy .dd {
    width: calc(100% - 100px);
    line-height: 40px;
    height: 40px;
    color: #495057;
    font-size: 14px;
}

.buy-btn {
    color: #495057;
    background: #f8f9fa;
    cursor: pointer;
    float: left;
    display: block;
    height: 36px;
    line-height: 36px;
    padding: 0 15px;
    border: 1px solid #dee2e6;
    border-radius: 6px 0 0 6px;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 16px;
    font-weight: 500;
}

.buy-btn:hover {
    background: #e9ecef;
    color: #007bff;
}

input[type="text"].buy-num {
    text-align: center;
    width: 60px;
    float: left;
    border: 1px solid #dee2e6;
    border-left: 0;
    border-right: 0;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    background: #fff;
}

input[type="text"].buy-num:focus {
    outline: none;
    border-color: #007bff;
}

.buy .addBtn {
    cursor: pointer;
    display: block;
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: #fff;
    width: 180px;
    float: left;
    margin-right: 15px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.buy .addBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
}

.buy .addBtn.un-buy {
    background: #e9ecef;
    color: #adb5bd;
    cursor: not-allowed;
    box-shadow: none;
}

.buy .addBtn.un-buy:hover {
    transform: none;
    box-shadow: none;
}

.buy .buyBtn {
    cursor: pointer;
    display: block;
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #fff;
    width: 180px;
    float: left;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.buy .buyBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(231, 76, 60, 0.4);
}

.buy .buyBtn.un-buy {
    background: #e9ecef;
    color: #adb5bd;
    cursor: not-allowed;
    box-shadow: none;
}

.buy .buyBtn.un-buy:hover {
    transform: none;
    box-shadow: none;
}

/* ========== 看了又看 ========== */
.seeing {
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-top: 30px;
    clear: both;
}

.seeing .head {
    font-size: 15px;
    color: #212529;
    height: 45px;
    line-height: 45px;
    background: #f8f9fa;
    text-align: left;
    padding: 0 15px;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    border-bottom: 1px solid #e9ecef;
}

.seeing .body {
    width: 100%;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

.see-item {
    padding-top: 0;
    width: calc(20% - 16px);
    min-width: 160px;
    float: none;
    margin-bottom: 0;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s;
    flex-shrink: 0;
}

.see-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.see-item:last-child {
    margin-bottom: 0;
}

/* 响应式调整 */
@media (max-width: 1400px) {
    .see-item {
        width: calc(25% - 15px);
    }
}

@media (max-width: 1200px) {
    .see-item {
        width: calc(25% - 15px);
    }
}

@media (max-width: 992px) {
    .see-item {
        width: calc(33.333% - 14px);
    }
}

@media (max-width: 768px) {
    .see-item {
        width: calc(50% - 10px);
        min-width: 140px;
    }
}

.see-item .see-img {
    width: 100%;
    min-height: 180px;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    background: #f8f9fa;
    border-radius: 6px;
    overflow: hidden;
    padding: 10px;
}

.see-price {
    display: block;
    width: 100%;
    min-height: 30px;
    line-height: 30px;
    color: #007bff;
    font-weight: 600;
    font-size: 16px;
    margin-top: 10px;
    text-align: center;
    flex-shrink: 0;
}

.see-item .see-img img {
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

/* ========== 店铺信息 ========== */
.wst-side {
    float: right;
    width: 240px;
    margin-left: 20px;
    margin-right: 0;
}

.goods-side {
    width: 100%;
}

.shop-intro {
    padding: 0;
    width: 100%;
    border: 1px solid #e9ecef;
    height: auto;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    margin-top: 30px;
}

.shop_imgbox {
    text-align: center;
    background-color: #f8f9fa;
    padding: 20px;
}

.shop-intro .title {
    height: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    padding-left: 15px;
}

.shop-name {
    font-size: 16px;
    color: #212529;
    font-weight: 600;
}

.shop-intro .body {
    padding: 15px 0;
    border-top: 1px solid #e9ecef;
    margin: 0 15px;
}

.shop-intro .itemScore:nth-child(2) {
    border-left: 1px solid #e9ecef;
    border-right: 1px solid #e9ecef;
}

.shop-intro .itemScore {
    width: 33.33%;
    box-sizing: border-box;
    text-align: center;
    padding: 10px 5px;
    float: left;
}

.c12_e40 {
    font-size: 16px;
    color: #007bff;
    font-weight: 600;
}

.shop-intro .footer {
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
    border-top: 1px solid #e9ecef;
}

.footer a:nth-child(1) {
    margin-right: 10px;
}

.footer a {
   
    border: 1px solid #e9ecef;
    border-radius: 6px;
    color: #495057;
    float: left;
    height: 36px;
    line-height: 36px;
    text-align: center;
    width: calc(50% - 5px);
  
    text-decoration: none;
    transition: all 0.2s;
    font-size: 14px;
    position: relative;
    overflow: hidden;
}

.footer a:hover {
    background: #e7f3ff;
    border-color: #007bff;
    color: #007bff;
}

.footer .home {
    background: url(../img/goodsdetails_icon＿jrdp.png) 8px center no-repeat;
}

.footer .home:hover {
    background: url(../img/goodsdetails_icon＿jrdp2.png) 8px center no-repeat;
}

.footer .j-fav,
.footer .j-fav:hover {
    background: url(../img/iconfont_guanzhu_sel.png) 8px center no-repeat;
}

.footer .j-fav2 {
    position: relative;
    padding-left: 30px;
}

.footer .j-fav2::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 24px;
    background: url(../img/iconfont_guanzhu_nor.png) 0 0 no-repeat;
    background-size: 16px 48px;
    transition: background-position 0.15s ease-in-out 0s;
}

.footer .j-fav2:hover::before {
    background-position: 0 -24px;
}

.footer .j-fav2:hover {
    text-decoration: none;
}

.goods-side .title {
    line-height: 45px;
    background-color: #f8f9fa;
    text-align: left;
    color: #212529;
    padding-left: 15px;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
    border: 1px solid #e9ecef;
    border-bottom: none;
}

.goods-side .guess-like {
    min-height: 300px;
    border: 1px solid #e9ecef;
    border-top: none;
    padding-bottom: 15px;
    border-radius: 0 0 8px 8px;
    background: #fff;
}

.goods-side .item {
    padding: 15px;
    border-bottom: 1px solid #f8f9fa;
    transition: all 0.2s;
}

.goods-side .item:hover {
    background: #f8f9fa;
}

.goods-side .item:last-child {
    border-bottom: none;
}

.goods-side .item .img {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    display: block;
    position: relative;
    display: table-cell;
    padding: 0;
    margin-bottom: 10px;
}

.goods-side .item .img a {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 150px;
    background: #f8f9fa;
    border-radius: 6px;
}

.goods-side .item .img a img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
}

.goods-side .item .p-price {
    padding: 5px 0;
    font-weight: 600;
    color: #007bff;
    font-size: 16px;
}

.goods-side .item .v-price {
    text-decoration: line-through;
    color: #adb5bd;
    margin-left: 8px;
    font-weight: normal;
    font-size: 13px;
}

.goods-side .hot-goods {
    min-height: 300px;
    border: 1px solid #e9ecef;
    margin-top: 20px;
    padding-bottom: 15px;
    border-radius: 8px;
    background: #fff;
}

/* ========== 商品详情 ========== */
.goods-desc {
    width: calc(100% - 260px);
    float: left;
    margin-top: 30px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    overflow: hidden;
}

.wst-tab-box {
    width: 100%;
    height: auto;
    margin: 0 auto;
    background: #ffffff;
}

.wst-tab-nav {
    margin: 0;
    padding: 0;
    height: 50px;
    top: 0;
    z-index: 30;
    background: #f8f9fa;
    width: 100%;
    border: none;
    border-bottom: 1px solid #e9ecef;
    display: flex;
}

.wst-tab-nav li {
    cursor: pointer;
    float: left;
    margin: 0;
    list-style: none;
    border: none;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #495057;
    padding: 0 25px;
    transition: all 0.2s;
    font-size: 15px;
    position: relative;
}

.wst-tab-nav li:hover {
    color: #007bff;
    background: #fff;
}

.wst-tab-nav .on {
    color: #007bff;
    font-weight: 600;
    background: #fff;
    border-bottom: 2px solid #007bff;
}

.wst-tab-nav .on .appraise-num {
    color: #007bff;
}

.wst-tab-nav #addCart2 {
    display: none;
    position: fixed;
    top: 0;
    right: 20px;
    z-index: 31;
    background: #007bff;
    padding: 8px 20px;
    margin-top: 10px;
    color: #ffffff;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
}

.wst-tab-nav #addCart2:hover {
    background: #0056b3;
}

/* 二维码样式 */
#wx_qrcode {
    position: relative;
    cursor: pointer;
}

.wx_qrcode_box {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 340px;
    text-align: center;
    white-space: nowrap;
}

.wx_qrcode_box.show {
    display: block;
}

.wx_qrcode_box .qrcode {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background: #ffffff;
}

.wx_qrcode_box .qrcode canvas,
.wx_qrcode_box .qrcode img {
    width: 300px !important;
    height: 300px !important;
}

.wx_qrcode_box p {
    margin-top: 10px;
    color: #495057;
    font-size: 14px;
}

.brand_name span {
    color: #007bff;
}

.brand_name {
    margin-left: 5px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
}

.wst-tab-content {
    word-wrap: break-word;
    word-break: break-all;
    padding: 30px;
    width: 100%;
    height: auto;
    border: none;
    background: #FFF;
}

.wst-tab-item img {
    width: 100%;
    border-radius: 6px;
}

.goods-desc .appraise-num {
    color: #007bff;
    font-weight: 600;
}

.wst-attrs-list {
    box-sizing: border-box;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 20px;
    padding: 20px;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    background: #f8f9fa;
    border-radius: 6px;
}

.wst-attrs-list li {
    color: #495057;
    padding: 8px 12px;
    width: 33.33%;
    height: auto;
    float: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
}

/* ========== 商品评价 ========== */
.apprtime {
    color: #6c757d;
    display: inline-block;
    margin: 5px 0;
    font-size: 13px;
}

.appraise-head {
    width: 100%;
    height: auto;
    display: flex;
    margin: 20px auto;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.appraise-head .text {
    font-size: 14px;
    color: #6c757d;
    font-weight: 400;
}

.percent {
    line-height: 110%;
    font-size: 48px;
    color: #007bff;
    font-family: arial;
    font-weight: 700;
}

.percent span {
    font-size: 24px;
}

.app-head-l {
    flex: 1;
    height: auto;
}

.app-head-lbox {
    padding: 10px 20px;
}

.app-head-r {
    flex: 5;
    height: auto;
}

.app-head-rbox {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
}

.app-hr-item {
    flex: 1;
}

.percentbox {
    border: 1px solid #007bff;
    float: left;
    width: 60%;
    height: 16px;
    margin-top: 4px;
    margin-left: 10px;
    border-radius: 8px;
    overflow: hidden;
}

.percentbg {
    height: 100%;
    background: #007bff;
}

.app-hr-text {
    float: left;
    font-size: 13px;
    color: #495057;
}

.appr-filter {
    width: 100%;
    height: auto;
    border: 1px solid #e9ecef;
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 10px;
}

.appr-filterbox {
    width: 100%;
    height: 100%;
    background: transparent;
}

.appr-filterbox li {
    float: left;
    padding: 8px 15px;
    margin-right: 5px;
    border-radius: 6px;
    transition: all 0.2s;
}

.appr-filterbox li a {
    color: #495057;
    text-decoration: none;
    font-size: 14px;
}

.appr-filterbox li:hover {
    background: #fff;
}

.appr-filterbox li .curr {
    background: #007bff;
    color: #fff;
    font-weight: 600;
}

.apprimg {
    width: 40px !important;
    height: 40px;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
}

.appr-star,
.appr-star-off {
    background-image: url(./../img/star.png);
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    float: left;
}

.appr-star-off {
    background-position: -80px 0px;
}

.userinfo {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
}

.appraises-box {
    width: 100%;
    border-bottom: 1px solid #e9ecef;
    margin: 15px 0;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
}

.wst-appraises-left {
    width: calc(100% - 160px);
    height: 100%;
    float: left;
}

.app-content {
    margin: 10px 0;
    color: #495057;
    line-height: 24px;
    font-size: 14px;
}

.wst-appraises-right {
    width: 150px;
    height: 100%;
    float: left;
    text-align: center;
}

.goods-spec-box {
    width: 100%;
    height: 100%;
    color: #6c757d;
    font-size: 13px;
    margin-top: 8px;
}

.appraiser {
    height: 100%;
    float: left;
    padding-left: 5px;
    line-height: 40px;
    color: #495057;
    font-size: 14px;
}

.reply-content {
    line-height: 20px;
    width: 100%;
    border-top: 1px solid #e9ecef;
    padding-top: 15px;
    color: #007bff;
    float: left;
    margin-bottom: 10px;
    font-size: 14px;
}

.reply-time {
    float: left;
    color: #6c757d;
    padding-bottom: 10px;
    font-size: 13px;
}

.reply-content > a {
    color: #007bff;
    text-decoration: none;
}

.reply-content > a:hover {
    text-decoration: underline;
}

.reply-box {
    width: 100%;
    max-height: 110px;
    position: relative;
    margin-bottom: 5px;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
}

.goods-desc-box img {
    display: block;
    border-radius: 6px;
    margin: 10px 0;
}

/* ========== 商品咨询 ========== */
.c999 {
    color: #6c757d;
}

.consult-searchbox {
    padding: 20px 30px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}

.search-tips {
    color: #6c757d;
    padding-bottom: 15px;
    font-size: 13px;
}

.search-text {
    float: left;
    width: calc(100% - 100px);
    height: 40px !important;
    border: 1px solid #dee2e6 !important;
    border-right: none;
    font: 14px/40px "Microsoft YaHei";
    color: #495057;
    padding: 0 15px;
    border-radius: 6px 0 0 6px;
}

.search-text:focus {
    outline: none;
    border-color: #007bff;
}

.csbtn {
    float: left;
    width: 100px;
    height: 40px;
    background: #007bff;
    border: none;
    line-height: 1;
    color: #fff;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    cursor: pointer;
    border-radius: 0 6px 6px 0;
    transition: all 0.2s;
}

.csbtn:hover {
    background: #0056b3;
}

.consult-list {
    padding: 0 30px;
}

.cs-content {
    width: 75%;
    color: #495057;
    font-size: 14px;
}

.ask {
    padding: 20px 0 10px;
    border-bottom: 1px dashed #e9ecef;
}

.answer {
    color: #007bff;
    padding-bottom: 20px;
    padding-top: 10px;
}

.consult-item {
    font: 14px/24px "Microsoft YaHei";
    border-bottom: 1px dotted #e9ecef;
    padding: 15px 0;
}

.consult-publish {
    height: auto;
    border: 1px solid #e9ecef;
    margin-top: 30px;
    border-radius: 8px;
    background: #fff;
    padding-bottom: 20px;
}

.consult-publish h5 {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-family: "Microsoft YaHei";
    padding-left: 20px;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
    margin: 0;
    border-bottom: 1px solid #e9ecef;
    color: #212529;
    font-weight: 600;
}

.explain,
.consult-publish ul {
    padding: 20px;
}

.consult-publish ul li {
    margin-bottom: 15px;
    line-height: 28px;
}

.fbold {
    font-weight: 600;
    vertical-align: top;
    color: #495057;
}

#consultContent {
    width: 100%;
    height: 120px;
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    resize: vertical;
}

#consultContent:focus {
    outline: none;
    border-color: #007bff;
}

#consultCommit {
    display: inline-block;
    width: 100px;
    height: 40px;
    margin-left: 0;
    vertical-align: middle;
    background: #007bff;
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 6px;
    font-size: 15px;
    transition: all 0.2s;
}

#consultCommit:hover {
    background: #0056b3;
}

button:focus {
    outline: none;
}

.intro {
    min-height: 450px;
}

/* ========== 对比框 ========== */
.wst-cont-frame {
    position: fixed;
    bottom: -200px;
    right: 50%;
    margin-right: -602px;
    z-index: 100;
    width: 986px;
    height: 139px;
    background: #fff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border-radius: 8px 8px 0 0;
}

.wst-cont-frame.show {
    bottom: 0;
}

.wst-cont-frame .head {
    height: 40px;
    border: none;
    border-bottom: 2px solid #007bff;
    position: relative;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.wst-cont-frame .head span {
    float: left;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font: 15px/40px "Microsoft YaHei";
    position: relative;
    left: 0;
    margin-top: 0;
    background: #007bff;
    border: none;
    color: #fff;
    border-radius: 8px 0 0 0;
    font-weight: 600;
}

.wst-cont-frame .head .close {
    text-align: right;
    position: absolute;
    right: 0;
    top: 0;
    padding-right: 20px;
    height: 40px;
    line-height: 40px;
    color: #495057;
    text-decoration: none;
    transition: color 0.2s;
}

.wst-cont-frame .head .close:hover {
    color: #007bff;
}

.wst-cont-frame .list {
    border: none;
    border-top: none;
    position: relative;
    padding: 15px;
}

.wst-cont-frame .goods {
    padding: 0;
    color: #495057;
    height: auto;
    overflow: hidden;
}

.wst-cont-frame .term {
    float: left;
    overflow: hidden;
    margin-right: 15px;
    padding: 10px;
    border-right: 1px solid #e9ecef;
    border-radius: 6px;
    transition: all 0.2s;
}

.wst-cont-frame .term:hover {
    background: #f8f9fa;
}

.wst-cont-frame .term:hover .info .price a {
    opacity: 1;
}

.wst-cont-frame .term .img {
    float: left;
    margin-right: 10px;
    width: 60px;
    height: 60px;
    text-align: center;
    border: 1px solid #e9ecef;
    overflow: hidden;
    border-radius: 6px;
    background: #f8f9fa;
}

.wst-cont-frame .term .info,
.wst-cont-frame .list .term-empty .info {
    float: left;
    width: 140px;
}

.wst-cont-frame .term .info .name {
    height: 36px;
    line-height: 18px;
    overflow: hidden;
    display: block;
    color: #212529;
    font-size: 13px;
    margin-bottom: 5px;
}

.wst-cont-frame .term .info .price span {
    color: #007bff;
    font-size: 16px;
    font-family: Verdana;
    font-weight: 700;
}

.wst-cont-frame .term .info .price a {
    padding-left: 10px;
    color: #007bff;
    opacity: 0;
    text-decoration: none;
    transition: opacity 0.2s;
}

.wst-cont-frame .term-empty {
    float: left;
    overflow: hidden;
    margin-right: 15px;
    padding: 10px;
    border-right: 1px solid #e9ecef;
    border-radius: 6px;
}

.wst-cont-frame .term-empty .img {
    float: left;
    margin-right: 10px;
    width: 60px;
    height: 60px;
    text-align: center;
    color: #adb5bd;
    border: 1px dashed #dee2e6;
    font: 24px/60px arial;
    overflow: hidden;
    background: #f8f9fa;
    border-radius: 6px;
}

.wst-cont-frame .term-contrast {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 100px;
    text-align: center;
}

.wst-cont-frame .term-contrast .contrast {
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
    font: 600 14px/36px "Microsoft YaHei";
    width: 80px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #007bff;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
}

.wst-cont-frame .term-contrast .contrast:hover {
    background: #0056b3;
    transform: translateY(-2px);
}

.wst-cont-frame .term-contrast .empty {
    color: #007bff;
    text-decoration: none;
    font-size: 13px;
}

.wst-cont-frame .term-contrast .empty:hover {
    text-decoration: underline;
}

/* ========== 清除浮动 ========== */
.wst-clear {
    clear: both;
}