/* goods.css - 商品详情页专用样式，继承common.css风格 */

/* -------------------- 商品图片区域 -------------------- */
.goods-main-img {
    text-align: center;
    margin-bottom: 15px;
}
.goods-main-img img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    transition: all 0.3s;
}

/* 缩略图轮播 */
.goods-slider .swiper-container {
    padding: 5px 0;
}
.goods-slider .swiper-slide {
    cursor: pointer;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.3s;
}
.goods-slider .swiper-slide:hover {
    border-color: #ff6b6b;
}
.goods-slider .swiper-slide-thumb-active {
    border-color: #ff6b6b;
}
.goods-slider .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}
.thumbnail {
    object-fit: cover;
}

/* -------------------- 商品基本信息 -------------------- */
.goods-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    margin: 0 0 15px;
}

/* 价格区域 */
.goods-price {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
}
.price-current {
    font-weight: 700;
    line-height: 1.2;
}
.price-original {
    color: #999;
    text-decoration: line-through;
}
.sales-num {
    font-weight: 600;
    color: #ff6b6b;
}

/* -------------------- 优惠券区域（预留） -------------------- */
.coupon-wrapper {
    margin: 15px 0;
    padding: 10px;
    background-color: #fff9f9;
    border: 1px dashed #ff6b6b;
    border-radius: 4px;
}
.coupon-wrapper .layui-form-label {
    width: auto;
    padding-left: 0;
    color: #ff6b6b;
}

/* -------------------- 商品规格 -------------------- */
.goods-spec {
    margin: 20px 0;
}
.spec-title {
    font-weight: 600;
    color: #555;
}
.spec-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.spec-option {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background-color: #fff;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.spec-option:hover {
    border-color: #ff6b6b;
    color: #ff6b6b;
}
.spec-option.active {
    background-color: #ff6b6b;
    border-color: #ff6b6b;
    color: #fff;
}
.spec-option.spec-disabled {
    background-color: #f5f5f5;
    border-color: #e0e0e0;
    color: #aaa;
    cursor: not-allowed;
    pointer-events: none;
}

/* -------------------- 购买数量 -------------------- */
.buy-num {
    margin: 20px 0;
    padding: 10px 0;
}
.buy-num .layui-input-group {
    display: flex;
    align-items: center;
    width: auto;
}
.buy-num .layui-btn-primary {
    border: 1px solid #ddd;
    background-color: #fff;
    width: 40px;
    height: 40px;
    padding: 0;
    line-height: 40px;
    font-size: 18px;
}
.buy-num .layui-btn-primary:hover {
    background-color: #f8f9fa;
    border-color: #ccc;
}
#input-num {
    width: 60px;
    height: 40px;
    text-align: center;
    border: 1px solid #ddd;
    border-left: none;
    border-right: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
}
.layui-input-suffix {
    margin-left: 15px;
    font-size: 14px;
    color: #666;
}
#stock {
    font-weight: 600;
}

/* -------------------- 操作按钮 -------------------- */
.goods-action {
    margin-top: 30px;
}
#addCart, #buyNow {
    min-width: 160px;
    border-radius: 30px;
    font-weight: 600;
    letter-spacing: 1px;
}
#addCart {
    background-color: #ff6b6b;
    border-color: #ff6b6b;
}
#buyNow {
    background-color: #f8b500;
    border-color: #f8b500;
}
#buyNow:hover {
    background-color: #e6a500;
    border-color: #e6a500;
}

/* -------------------- 商品详情选项卡 (修复横向显示) -------------------- */
.goods-tabs .layui-tab-title {
    display: block;          /* 恢复默认块级 */
    white-space: nowrap;     /* 强制不换行 */
    overflow: hidden;        /* 清除浮动 */
    border-bottom: 2px solid #ff6b6b;
    height: auto;            /* 允许高度自适应 */
}
.goods-tabs .layui-tab-title li {
    float: left;             /* 恢复浮动，实现横向排列 */
    display: block;          /* 块级配合浮动 */
    list-style: none;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 600;
    color: #666;
    line-height: 40px;       /* 与Layui默认高度一致 */
    transition: all 0.3s;
    cursor: pointer;
}
.goods-tabs .layui-tab-title li.layui-this {
    color: #ff6b6b;
    background-color: #fff5f5;
    border-radius: 4px 4px 0 0;
}
.goods-tabs .layui-tab-title li:after {
    content: none;           /* 移除Layui默认的下划线 */
}
/* 清除浮动 */
.goods-tabs .layui-tab-title::after {
    content: "";
    display: table;
    clear: both;
}

/* 产品详情内容中的图片自适应 */
.goods-content img {
    max-width: 100%;
    height: auto;
}

/* -------------------- 产品参数列表 -------------------- */
.attributes-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.attributes-list li {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px dashed #f0f0f0;
}
.attr-name {
    width: 120px;
    font-weight: 600;
    color: #555;
    background-color: #f8f9fa;
    padding: 4px 8px;
    border-radius: 4px;
}
.attr-value {
    flex: 1;
    padding: 4px 8px;
    color: #666;
}

/* -------------------- 评论统计区域 -------------------- */
.comment-statistics {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
}
.comment-percent {
    text-align: center;
}
.percent-tit {
    font-size: 16px;
    color: #666;
    margin-bottom: 5px;
}
.percent-con {
    font-size: 48px;
    font-weight: 700;
    color: #ff6b6b;
    line-height: 1.2;
}
.percent-con span {
    font-size: 24px;
}

/* 评论类型选项卡（好评/中评/差评）保持横向 */
.comment-tabs.layui-tab-title {
    border-bottom: none;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.comment-tabs.layui-tab-title li {
    padding: 8px 16px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
    margin-right: 0;
}
.comment-tabs.layui-tab-title li:hover {
    border-color: #ff6b6b;
    color: #ff6b6b;
}
.comment-tabs.layui-tab-title li.layui-this {
    background-color: #ff6b6b;
    border-color: #ff6b6b;
    color: #fff;
}
.comment-tabs.layui-tab-title li span {
    margin-left: 4px;
    font-size: 12px;
}

/* -------------------- 响应式调整 -------------------- */
@media (max-width: 768px) {
    .goods-title {
        font-size: 20px;
    }
    .price-current {
        font-size: 24px;
    }
    .spec-option {
        padding: 6px 12px;
        font-size: 13px;
    }
    .goods-action #addCart,
    .goods-action #buyNow {
        width: 100%;
        margin-left: 0 !important;
        margin-bottom: 10px;
    }
    .layui-tab-title li {
        padding: 0 10px;
        font-size: 14px;
    }
    .attributes-list li {
        flex-direction: column;
    }
    .attr-name {
        width: 100%;
        margin-bottom: 5px;
    }
    .comment-tabs.layui-tab-title li {
        padding: 6px 12px;
    }
}