@charset "utf-8";

/* ==========================================================================
   show.css — 店铺详情页样式
   基础：html font-size = 10px (1rem = 10px)
   变量：--color-main, --color-red, --color-price, --color-green, --color-blue
   ========================================================================== */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

#show-detail,
#show-hot,
#show-comments,
#show-faq {
    scroll-margin-top: 6rem;
}

/* 通用占位图标（替代缺失的 iconfont 类） */
.show-icon-wechat {
    display: inline-block;
    background: var(--color-green);
    color: #fff;
    /* font-size: 1.1rem; */
    line-height: 1;
    padding: 0.2rem 0.5rem;
    border-radius: 0.2rem;
    vertical-align: middle;
    margin-right: 0.4rem;
}
.show-icon-wechat-mini {
    display: inline-block;
    background: var(--color-green);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    padding: 0.1rem 0.4rem;
    border-radius: 0.2rem;
    vertical-align: middle;
    margin-right: 0.2rem;
}
.show-icon-chat {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.6rem;
    background: #fff;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
}
.show-icon-chat::before,
.show-icon-chat::after {
    content: '';
    position: absolute;
    background: #29c5b6;
    border-radius: 1rem;
}
.show-icon-chat::before {
    width: 0.6rem;
    height: 0.6rem;
    left: 0.2rem;
    top: 0.3rem;
    box-shadow: 0.4rem 0 0 0 #29c5b6;
}
.show-icon-chat::after {
    width: 1rem;
    height: 0.7rem;
    left: 0.3rem;
    bottom: 0.2rem;
    border-radius: 0 0 0.6rem 0.6rem;
}
.show-star {
    color: #ddd;
    font-size: 1.4rem;
    margin-right: 0.2rem;
    font-style: normal;
    line-height: 1;
}
.show-star.active { color: #ff7800; }

/* 面包屑 */
.show-breadcrumb {
    background: #f7f7f7;
    padding: 1.2rem 0;
    font-size: 1.2rem;
    color: #666;
}
.show-breadcrumb a {
    color: #666;
    margin: 0 0.4rem;
}
.show-breadcrumb a:hover { color: var(--color-main); }
.show-breadcrumb a:first-child { margin-left: 0.4rem; }
.show-breadcrumb-cur { color: #999; }

/* 页面容器 */
.show-page {
    background: #f7f7f7;
    padding: 1.2rem 0 3rem;
}

/* ====================== 店铺头部 ====================== */
.show-shop-header {
    background: #fff;
    padding: 1.6rem 2rem 2rem;
    border-radius: var(--border-radius);
    /* box-shadow: var(--box-shadow-sm); */
}
.show-shop-title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    padding-bottom: 1.4rem;
    margin-bottom: 1.6rem;
    border-bottom: 0.1rem solid #eee;
}
.show-shop-main {
    display: flex;
    align-items: flex-start;
}
.show-shop-image {
    width: 32rem;
    flex: 0 0 32rem;
    margin-right: 2rem;
}
.show-shop-image img {
    width: 100%;
    height: 32rem;
    object-fit: contain;
    display: block;
    background: #fafafa;
}
.show-shop-info {
    flex: 1;
    min-width: 0;
    padding-right: 1rem;
}
.show-shop-info-list { padding-top: 0.4rem; }
.show-shop-info-list li {
    font-size: 1.4rem;
    line-height: 1.4;
    color: #333;
    margin-bottom: 1.2rem;
}
.show-shop-info-list .info-label {
    color: #666;
    margin-right: 0.4rem;
}
.show-shop-info-list .info-value a {
    color: #333;
    margin-right: 0.4rem;
}
.show-shop-info-list .info-value a:hover { color: var(--color-main); }
.show-link-green {
    color: var(--color-green) !important;
    font-weight: bold;
}

/* 操作按钮 */
.show-shop-actions {
    margin: 2.4rem 0 1.6rem;
    display: flex;
    gap: 1.2rem;
}
.show-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 13rem;
    height: 4rem;
    padding: 0 1.6rem;
    border-radius: var(--border-radius);
    font-size: 1.4rem;
    transition: all 0.2s;
    border: 0.1rem solid transparent;
}
.show-btn i {
    margin-right: 0.6rem;
    font-size: 1.6rem;
}
.show-btn-primary {
    background: var(--color-main);
    color: #fff !important;
    border-color: var(--color-main);
}
.show-btn-primary:hover {
    background: var(--color-main-hover);
    border-color: var(--color-main-hover);
}
.show-btn-secondary {
    background: #29c5b6;
    color: #fff !important;
    border-color: #29c5b6;
}
.show-btn-secondary:hover {
    background: #22b0a2;
    border-color: #22b0a2;
}

/* 服务承诺 */
.show-shop-promise {
    font-size: 1.3rem;
    color: #666;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.6rem;
}
.promise-label { color: #666; }
.promise-item {
    display: inline-flex;
    align-items: center;
    color: #333;
}
.promise-item .iconfont {
    color: var(--color-main);
    margin-right: 0.4rem;
    font-size: 1.5rem;
}

/* 二维码 */
.show-shop-qrcodes {
    width: 14rem;
    flex: 0 0 14rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.show-qrcode-item {
    background: #f5f5f5;
    border-radius: var(--border-radius);
    padding: 1rem;
    text-align: center;
}
.show-qrcode-img {
    width: 12rem;
    height: 12rem;
    background: #fff;
    margin: 0 auto;
    border-radius: 0.2rem;
    overflow: hidden;
}
.show-qrcode-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.show-qrcode-label {
    margin-top: 0.8rem;
    font-size: 1.2rem;
    color: var(--color-green);
    display: flex;
    align-items: center;
    justify-content: center;
}
.show-qrcode-blue { color: var(--color-blue); }

/* ====================== 服务保障条 ====================== */
.show-service-bar {
    background: #fff;
    border-radius: var(--border-radius);
    /* box-shadow: var(--box-shadow-sm); */
    margin-top: 1.2rem;
    overflow: hidden;
}
.show-service-tips {
    background: #fff8eb;
    color: #d49a4a;
    font-size: 1.3rem;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.show-service-tips .iconfont {
    color: #d49a4a;
    font-size: 1.4rem;
}
.show-service-list {
    display: flex;
    padding: 1.6rem 1rem;
}
.show-service-item {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
}
.service-icon {
    width: 3.6rem;
    height: 3.6rem;
    flex: 0 0 3.6rem;
    background: #fff;
    border: 0.2rem solid var(--color-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}
.service-icon .iconfont {
    color: var(--color-main);
    font-size: 2rem;
    font-weight: bold;
}
.service-text { line-height: 1.4; }
.service-title {
    font-size: 1.5rem;
    color: #333;
    font-weight: bold;
    margin-bottom: 0.4rem;
}
.service-desc {
    font-size: 1.2rem;
    color: #999;
}

/* ====================== 主体两栏 ====================== */
.show-content {
    margin-top: 1.2rem;
    display: flex;
    align-items: flex-start;
}
.show-main {
    flex: 1;
    min-width: 0;
    margin-right: 1.2rem;
    overflow: clip;
}
.show-aside {
    width: 22rem;
    flex: 0 0 22rem;
}

/* Tab 导航 */
.show-tabs {
    background: #fff;
    border-bottom: 0.1rem solid #eee;
    position: sticky;
    top: 0;
    z-index: 50;
}
.show-tabs-nav {
    display: flex;
    padding: 0 1.6rem;
}
.show-tabs-nav li {
    position: relative;
    padding: 1.6rem 1.4rem;
    font-size: 1.5rem;
    cursor: pointer;
}
.show-tabs-nav li a {
    color: #666;
    display: block;
}
.show-tabs-nav li:hover a { color: var(--color-main); }
.show-tabs-nav li.active a { color: var(--color-main); font-weight: bold; }
.show-tabs-nav li.active::after {
    content: '';
    position: absolute;
    left: 1.4rem;
    right: 1.4rem;
    bottom: -0.1rem;
    height: 0.2rem;
    background: var(--color-main);
}

/* 内容区块 */
.show-block {
    background: #fff;
    margin-bottom: 1rem;
    padding: 1.6rem;
    border-bottom: 0.1rem solid #f5f5f5;
    border-radius: var(--border-radius); 
    /* box-shadow: var(--box-shadow-sm); */
}
.show-block:last-child { border-bottom: 0; }
.show-block-header {
    border-bottom: 0.1rem solid #eee;
    padding-bottom: 1rem;
    margin-bottom: 1.2rem;
}
.show-block-title {
    font-size: 1.6rem;
    color: #333;
    font-weight: bold;
    position: relative;
    padding-left: 1rem;
}
.show-block-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2rem;
    bottom: 0.2rem;
    width: 0.3rem;
    background: var(--color-main);
    border-radius: 0.2rem;
}
.show-block-body { padding: 0.6rem 0; }

/* 详情描述 */
.show-detail-text p {
    font-size: 1.4rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 1.2rem;
}
.show-detail-text p:last-child { margin-bottom: 0; }

/* 热销产品 */
.show-hot-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.6rem;
}
.show-hot-item {
    width: 16.6666%;
    padding: 0 0.6rem;
    box-sizing: border-box;
}
.show-hot-item a {
    display: block;
    background: #fff;
    border: 0.1rem solid #f5f5f5;
    border-radius: var(--border-radius);
    overflow: hidden;
    text-align: center;
    transition: all 0.2s;
}
.show-hot-item a:hover {
    border-color: var(--color-main);
    transform: translateY(-0.2rem);
    box-shadow: var(--box-shadow-sm);
}
.show-hot-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fafafa;
    position: relative;
    overflow: hidden;
}
.show-hot-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.show-hot-name {
    font-size: 1.3rem;
    color: #333;
    margin: 0.8rem 0.4rem 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.show-hot-price {
    color: var(--color-price);
    font-size: 1.5rem;
    font-weight: bold;
    padding-bottom: 0.8rem;
}
.show-hot-price em { font-size: 1.2rem; font-style: normal; margin-right: 0.1rem; }

/* 更多款式遮罩 */
.show-hot-img-more img { filter: brightness(0.7); }
.show-hot-mask {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.25);
}
.show-hot-mask .iconfont {
    font-size: 2rem;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    line-height: 4rem;
    text-align: center;
    margin-bottom: 0.4rem;
}
.show-hot-mask p {
    font-size: 1.2rem;
    color: #fff;
}
.show-hot-price-more {
    color: var(--color-price) !important;
    font-size: 1.3rem !important;
    font-weight: normal !important;
}

/* 评价 */
.show-comment-list { }
.show-comment-item {
    padding: 1.4rem 0;
    border-bottom: 0.1rem solid #f5f5f5;
}
.show-comment-item:last-child { border-bottom: 0; }
.show-comment-head {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.show-comment-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 4rem;
    margin-right: 1rem;
    background: #f0f0f0;
}
.show-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.show-comment-user {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.show-comment-name {
    font-size: 1.4rem;
    color: #333;
    margin-right: 1rem;
}
.show-comment-stars { display: inline-flex; }
.show-comment-content p {
    font-size: 1.3rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 0.8rem;
}
.show-comment-imgs {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.6rem;
}
.show-comment-imgs li {
    width: 8rem;
    height: 8rem;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: #f0f0f0;
}
.show-comment-imgs li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 常见问题 */
.show-faq-item {
    padding: 1rem 0;
    border-bottom: 0.1rem dashed #eee;
}
.show-faq-item:last-child { border-bottom: 0; }
.show-faq-q {
    font-size: 1.4rem;
    color: #333;
    font-weight: bold;
    margin-bottom: 0.6rem;
}
.show-faq-a {
    font-size: 1.3rem;
    color: #999;
    line-height: 1.7;
}

/* ====================== 右侧栏 ====================== */
.show-aside-block {
    background: #fff;
    border-radius: var(--border-radius);
    /* box-shadow: var(--box-shadow-sm); */
    margin-bottom: 1.2rem;
    overflow: hidden;
}
.show-aside-header {
    padding: 1.2rem 1.4rem;
    border-bottom: 0.1rem solid #eee;
}
.show-aside-title {
    font-size: 1.5rem;
    color: #333;
    font-weight: bold;
    position: relative;
    padding-left: 1rem;
}
.show-aside-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2rem;
    bottom: 0.2rem;
    width: 0.3rem;
    background: var(--color-main);
    border-radius: 0.2rem;
}

/* 特价产品 */
.show-special-list { padding: 0.6rem 1rem; }
.show-special-item {
    padding: 1rem 0;
    border-bottom: 0.1rem solid #f5f5f5;
}
.show-special-item:last-child { border-bottom: 0; }
.show-special-item a {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.show-special-item a:hover .show-special-name {
    color: var(--color-main);
}
.show-special-img {
    width: 7rem;
    height: 7rem;
    flex: 0 0 7rem;
    background: #fafafa;
    border-radius: var(--border-radius);
    overflow: hidden;
}
.show-special-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.show-special-info {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}
.show-special-name {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.show-special-price {
    color: var(--color-price);
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 0.2rem;
}
.show-special-price em { font-size: 1.1rem; font-style: normal; }
.show-special-sales {
    color: #999;
    font-size: 1.2rem;
}

/* 其他人还浏览 */
.show-browse-list {
    list-style: none;
    padding: 0.4rem 1.4rem 1.4rem;
}
.show-browse-list li {
    padding: 0.8rem 0;
    border-bottom: 0.1rem solid #f5f5f5;
}
.show-browse-list li:last-child { border-bottom: 0; }
.show-browse-list a {
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    color: #666;
}
.show-browse-list a:hover { color: var(--color-main); }
.browse-num {
    width: 1.8rem;
    height: 1.8rem;
    background: #ddd;
    color: #fff;
    border-radius: 0.2rem;
    text-align: center;
    line-height: 1.8rem;
    font-size: 1.2rem;
    flex: 0 0 1.8rem;
    margin-right: 0.8rem;
    font-style: normal;
}
.show-browse-list li:nth-child(1) .browse-num { background: var(--color-main); }
.show-browse-list li:nth-child(2) .browse-num { background: #ff9a3c; }
.show-browse-list li:nth-child(3) .browse-num { background: #ffc34a; }
.browse-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   响应式 — 窄屏隐藏右侧栏
   ========================================================================== */

/* 中等屏：店铺头部分两行 */
@media only screen and (max-width: 1100px) {
    .show-shop-image { width: 26rem; flex: 0 0 26rem; }
    .show-shop-image img { height: 26rem; }
    .show-shop-qrcodes { width: 12rem; flex: 0 0 12rem; }
    .show-qrcode-img { width: 10rem; height: 10rem; }
}

/* 平板/中等屏：隐藏右侧栏 + 店铺头图片/信息上下布局 + 隐藏二维码 */
@media only screen and (max-width: 1024px) {
    .show-aside,
    .show-shop-qrcodes { display: none !important; }
    .show-main { margin-right: 0; }
    .show-shop-main {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    .show-shop-image {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        margin-right: 0 !important;
        margin-bottom: 1.6rem;
    }
    .show-shop-image img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1/1;
    }
    .show-shop-info {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        padding-right: 0;
    }
    .show-hot-item { width: 33.3333%; }
}

/* 平板竖屏：服务保障单列 */
@media only screen and (max-width: 860px) {
    .show-service-list { flex-wrap: wrap; }
    .show-service-item {
        width: 100%;
        margin-bottom: 1rem;
    }
    .show-service-item:last-child { margin-bottom: 0; }
}

/* 移动端 */
@media only screen and (max-width: 640px) {
    .show-page { padding: 0.6rem 0 2rem; }
    .show-shop-header { padding: 1rem; }
    .show-shop-title {
        font-size: 1.6rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
    .show-shop-info-list li { font-size: 1.3rem; }
    .show-shop-actions {
        flex-wrap: wrap;
        gap: 0.8rem;
        margin: 1.6rem 0 1.2rem;
    }
    .show-btn { flex: 1; min-width: 0; height: 3.6rem; font-size: 1.3rem; }
    .show-shop-promise { gap: 0.8rem; }
    .show-tabs-nav { padding: 0 0.6rem; }
    .show-tabs-nav li { padding: 1.2rem 0.6rem; font-size: 1.3rem; }
    .show-block { padding: 1rem; }
    .show-block-title { font-size: 1.4rem; }
    .show-hot-list { margin: 0 -0.4rem; }
    /* 窄屏店铺主图缩小并居中 */
    .show-shop-image {
        width: 70% !important;
        max-width: 24rem !important;
        margin: 0 auto 1.2rem !important;
    }
    .show-shop-image img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1/1;
    }
    /* 窄屏服务条目 icon + text 上下布局 */
    .show-service-item {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: 0.6rem;
        padding: 1rem 0.6rem;
    }
    .service-icon { margin-right: 0 !important; }
    .show-hot-item { padding: 0 0.4rem; }
    .show-comment-imgs li { width: 6rem; height: 6rem; }
}

/* 极小屏 */
@media only screen and (max-width: 380px) {
    .show-hot-item { width: 50%; }
    .show-hot-item:nth-child(n+3) { display: none; }
    .show-hot-item:nth-child(2) { display: block; }
}