/* 全局重置：极简写法，减少冗余代码，提升加载速度 */
*{margin:0;padding:0;box-sizing:border-box}
html{
    /* 优化移动端字体渲染，提升可读性 */
    font-size:16px;
    -webkit-font-smoothing:antialiased;
}
body {
    font-family:"Microsoft Yahei",system-ui,Arial,sans-serif;
    background:#f5f7fa;
    color:#333;
    line-height:1.7; /* 加大行高，提升阅读体验，SEO加分 */
    padding:24px 12px;
    min-height:100vh;
}
/* 主容器：居中、限定宽度，识别页面主体内容区 */
.container {
    max-width:1200px;
    margin:0 auto;
    background:#fff;
    padding:30px;
    border-radius:8px;
    /* 轻量化阴影，减少渲染消耗 */
    box-shadow:0 1px 6px rgba(0,0,0,0.06);
}
/* H1全局唯一，SEO核心标题，禁止多h1 */
h1 {
    font-size:24px;
    color:#111;
    text-align:center;
    margin-bottom:24px;
    font-weight:600;
}
/* 搜索区域：独立区块，识别搜索功能模块 */
.search-box {
    text-align:center;
    margin-bottom:28px;
    padding-bottom:18px;
    border-bottom:1px solid #eee;
}
.search-box input {
    width:100%;
    max-width:460px;
    height:44px;
    padding:0 16px;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:15px;
    outline:0;
    /* 移动端输入框优化，防止缩放错位 */
    font-size:1rem;
}
.search-box button {
    height:44px;
    padding:0 28px;
    margin-left:10px;
    background:#ff4400;
    color:#fff;
    border:0;
    border-radius:4px;
    font-size:15px;
    cursor:pointer;
    /* 触摸优化，移动端点击区域足够大 */
    min-width:90px;
}
.search-box button:hover {
    background:#e03e00;
}
.error {
    color:#f53f3f;
    text-align:center;
    font-size:16px;
    padding:18px 0;
}
/* 店铺卡片：独立内容块，结构化便于抓取店铺信息 */
.shop-card {
    border:1px solid #eee;
    border-radius:6px;
    padding:24px;
    margin-bottom:28px;
}
.shop-top {
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:18px;
}
.shop-logo {
    width:80px;
    height:80px;
    border-radius:4px;
    object-fit:cover;
    border:1px solid #eee;
    /* 固定图片尺寸，消除布局偏移CLS */
    aspect-ratio:1/1;
}
.shop-name {
    font-size:20px;
    font-weight:600;
    color:#111;
    margin-bottom:6px;
}
.shop-tag {
    display:inline-block;
    padding:2px 10px;
    background:#f0f7ff;
    color:#2f54eb;
    border-radius:99px;
    font-size:13px;
}
.shop-info {
    margin-top:18px;
}
.info-item {
    display:flex;
    padding:11px 0;
    border-bottom:1px dashed #eee;
    font-size:15px;
}
.info-label {
    width:120px;
    color:#555;
    flex-shrink:0;
}
.info-value {
    flex:1;
    color:#222;
}
.shop-link a {
    display:inline-block;
    margin-top:14px;
    padding:10px 22px;
    background:#1677ff;
    color:#fff;
    text-decoration:none;
    border-radius:4px;
}
.shop-link a:hover {
    background:#0958d9;
}
.empty-tip {
    text-align:center;
    color:#888;
    font-size:16px;
    padding:36px 0;
}
/* 商品模块标题，次级内容标题，利于爬虫区分内容模块 */
.goods-title{
    font-size:18px;
    margin:18px 0 14px;
    padding-left:10px;
    border-left:4px solid #ff4400;
    color:#222;
}
/* 商品列表布局，流式自适应无溢出 */
.goods-row{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}
.goods-item{
    width:calc((100% - 60px) / 4);
    border:1px solid #eee;
    border-radius:6px;
    overflow:hidden;
    background:#fff;
    /* 轻量化过渡，不占用过多渲染资源 */
    transition:transform .2s ease;
    will-change:transform; /* GPU加速，优化Core Web Vitals */
}
.goods-item:hover{
    transform:translateY(-2px);
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.goods-item img{
    width:100%;
    height:200px;
    object-fit:cover;
    display:block;
    aspect-ratio:4/3; /* 固定图片比例，消除布局偏移 */
}
.goods-desc{
    padding:12px;
}
.goods-name{
    height:42px;
    overflow:hidden;
    font-size:14px;
    margin-bottom:8px;
    line-height:1.4;
}
.goods-item a{
    text-decoration:none;
    color:#222;
}
.goods-item a:hover{
    color:#ff4400;
}
.tips{
    color:#555;
    font-size:14px;
    margin:8px 0;
}
footer{
    margin-top:36px;
    padding-top:18px;
    border-top:1px solid #eee;
    text-align:center;
    color:#888;
    font-size:13px;
}

/* ========== 移动端响应式（百度移动索引核心） ========== */
@media (max-width:768px) {
    body {
        padding:16px 8px;
    }
    .container {
        padding:18px;
    }
    h1 {
        font-size:20px;
    }
    /* 搜索框垂直排列，彻底解决横向溢出，移动端体验满分 */
    .search-box {
        display:flex;
        flex-direction:column;
        gap:10px;
    }
    .search-box button {
        margin-left:0;
        width:100%;
        max-width:460px;
    }
    /* 店铺头部竖排，不挤压页面 */
    .shop-top {
        flex-direction:column;
        text-align:center;
    }
    /* 信息条目上下分行，适配窄屏 */
    .info-item {
        flex-direction:column;
        gap:4px;
    }
    .info-label {
        width:auto;
    }
    /* 平板商品2列 */
    .goods-item{
        width:calc((100% - 20px) / 2);
    }
    .goods-item img {
        height:160px;
    }
}
/* 小手机 480px以下单列商品，移动端体验评分更高 */
@media (max-width:480px) {
    .goods-item {
        width:100%;
    }
    .shop-card {
        padding:16px;
    }
}
/* ===== 面包屑导航 ===== */
.breadcrumb { margin: 10px 0; font-size: 13px; color: #999; }
.breadcrumb ol { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.breadcrumb li { display: flex; align-items: center; gap: 4px; }
.breadcrumb li::after { content: '›'; color: #ccc; margin: 0 2px; }
.breadcrumb li:last-child::after { display: none; }
.breadcrumb a { color: #666; text-decoration: none; }
.breadcrumb a:hover { color: #ff4757; }
.breadcrumb li:last-child a { color: #333; font-weight: 500; }

/* ===== 社交分享栏 ===== */
.share-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 0;
    margin: 10px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
}
.share-label {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
}
.share-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
    text-decoration: none;
}
.share-btn:hover {
    transform: scale(1.15);
    opacity: 0.85;
}
.share-wechat  { background: #07c160; }
.share-weibo   { background: #e6162d; }
.share-qq      { background: #12b7f5; }
.share-qzone   { background: #fece00; color: #333; }
.share-link    { background: #999; }

/* ===== PC端：显示微信二维码按钮，隐藏微信分享按钮 ===== */
.share-btn.share-wechat-native { display: none; }
.share-btn.share-wechat { display: inline-flex; }

/* ===== 移动端：显示微信分享按钮，隐藏二维码按钮 ===== */
@media (max-width: 768px) {
    .share-btn.share-wechat-native { display: inline-flex; }
    .share-btn.share-wechat { display: none; }
    .share-bar { gap: 8px; padding: 12px 0; }
    .share-btn { width: 38px; height: 38px; font-size: 16px; }
    .share-label { font-size: 13px; }
    .breadcrumb { font-size: 12px; }
}

/* 微信二维码弹窗 */
.wechat-qr-popup {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.qr-inner {
    background: #fff;
    border-radius: 12px;
    padding: 24px 20px 16px;
    text-align: center;
    max-width: 260px;
    width: 90%;
}
.qr-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #333;
}
#wechatQrCode {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
#wechatQrCode canvas {
    border-radius: 4px;
}
.qr-tip {
    font-size: 12px;
    color: #999;
    margin-bottom: 12px;
}
.qr-close {
    background: #f5f5f5;
    border: none;
    border-radius: 20px;
    padding: 6px 28px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
}
.qr-close:hover {
    background: #e8e8e8;
}

/* ===== FAQ 问答区 ===== */
.faq-section { margin: 20px 0; padding: 15px 0; border-top: 1px solid #f0f0f0; }
.faq-heading { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 12px; padding-left: 8px; border-left: 3px solid #ff4757; }
.faq-item { margin-bottom: 8px; border: 1px solid #f0f0f0; border-radius: 8px; overflow: hidden; }
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    background: #fafafa;
    cursor: pointer;
    transition: background 0.2s;
    -webkit-user-select: none;
    user-select: none;
}
.faq-question:hover { background: #f0f0f0; }
.faq-question .faq-toggle {
    font-size: 12px;
    color: #999;
    transition: transform 0.3s;
}
.faq-item.active .faq-toggle { transform: rotate(180deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 14px;
    font-size: 13px;
    color: #666;
    line-height: 1.8;
}
.faq-item.active .faq-answer {
    max-height: 200px;
    padding: 8px 14px 12px;
}

/* ===== 相关店铺推荐 ===== */
.related-shops { margin: 20px 0; padding: 15px 0; border-top: 1px solid #f0f0f0; }
.related-heading { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 12px; padding-left: 8px; border-left: 3px solid #ff4757; }
.related-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.related-list::-webkit-scrollbar { height: 4px; }
.related-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
.related-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 80px;
    text-decoration: none;
    color: #333;
    font-size: 12px;
    text-align: center;
    padding: 8px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    transition: border-color 0.2s;
}
.related-item:hover { border-color: #ff4757; }
.related-item img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
@media (max-width: 768px) {
    .related-item { min-width: 70px; font-size: 11px; }
    .related-item img { width: 40px; height: 40px; }
}

/* 复制成功提示 */
.copy-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 10000;
    pointer-events: none;
    animation: toastFade 2s ease forwards;
}
@keyframes toastFade {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    75%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -60%); }
}