/* ============ 多多导购站公共样式（拼多多风格·手机优先·桌面增强） ============ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{background:#f4f4f4;}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","微软雅黑",sans-serif;
    color:#222;font-size:14px;
}
a{text-decoration:none;color:inherit;}
img{display:block;}

/* ===== 顶部红色搜索头 ===== */
.pdd-header{
    background:linear-gradient(135deg,#ff4d2e,#e8352c);
    padding:12px 12px 14px;position:sticky;top:0;z-index:100;
}
.pdd-header-inner{display:flex;align-items:center;gap:10px;max-width:600px;margin:0 auto;}
.pdd-logo{color:#fff;font-size:19px;font-weight:800;letter-spacing:1px;white-space:nowrap;
    text-shadow:0 1px 2px rgba(0,0,0,.12);}
.pdd-logo small{font-size:11px;font-weight:400;opacity:.9;display:block;letter-spacing:0;}
.pdd-search{
    flex:1;height:36px;background:#fff;border-radius:18px;
    display:flex;align-items:center;padding:0 14px;gap:7px;
}
.pdd-search .s-icon{color:#999;font-size:15px;}
.pdd-search input{
    flex:1;border:none;outline:none;font-size:14px;background:transparent;color:#333;
}
.pdd-search .s-btn{
    background:linear-gradient(135deg,#ff4d2e,#e8352c);color:#fff;border:none;
    font-size:13px;padding:5px 14px;border-radius:14px;cursor:pointer;flex-shrink:0;
}

/* ===== 分类图标条 ===== */
.cat-strip{background:#fff;padding:14px 6px 10px;}
.cat-strip .track{display:flex;overflow-x:auto;gap:4px;scrollbar-width:none;max-width:600px;margin:0 auto;}
.cat-strip .track::-webkit-scrollbar{display:none;}
.cat-item{flex:0 0 auto;width:64px;text-align:center;cursor:pointer;}
.cat-icon{
    width:46px;height:46px;border-radius:50%;margin:0 auto 6px;
    display:flex;align-items:center;justify-content:center;
    font-size:22px;color:#fff;font-weight:700;
}
.cat-name{font-size:12px;color:#444;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ===== 活动横幅 ===== */
.banner-strip{display:flex;gap:10px;padding:10px 12px;overflow-x:auto;scrollbar-width:none;background:#fff;}
.banner-strip::-webkit-scrollbar{display:none;}
.banner-strip img{width:150px;height:60px;border-radius:10px;object-fit:cover;}

/* ===== 频道 tabs ===== */
.ch-tabs{
    display:flex;background:#fff;padding:0 8px;position:sticky;top:64px;z-index:90;
    border-bottom:1px solid #f0f0f0;
}
.ch-tabs .inner{display:flex;max-width:600px;margin:0 auto;width:100%;}
.ch-tabs .tab{
    padding:11px 16px;font-size:15px;color:#666;cursor:pointer;position:relative;white-space:nowrap;
}
.ch-tabs .tab.on{color:#e8352c;font-weight:700;}
.ch-tabs .tab.on::after{
    content:'';position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
    width:22px;height:3px;border-radius:2px;background:#e8352c;
}

/* ===== 区块标题 ===== */
.section-hd{
    display:flex;align-items:center;gap:8px;padding:14px 12px 10px;
    font-size:16px;font-weight:700;max-width:600px;margin:0 auto;
}
.section-hd::before{
    content:'';width:4px;height:16px;border-radius:2px;background:#e8352c;
}
.section-hd .more{margin-left:auto;font-size:12px;color:#999;font-weight:400;}

/* ===== 商品两列网格 ===== */
.goods-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 8px 20px;
    max-width:600px;margin:0 auto;
}
.g-card{
    background:#fff;border-radius:10px;overflow:hidden;
    box-shadow:0 1px 4px rgba(0,0,0,.05);cursor:pointer;
    display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;
}
.g-card:active{transform:scale(.98);}
.g-img{position:relative;width:100%;padding-top:100%;background:#f7f7f7;}
.g-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.g-img img.img-bad{opacity:0;}
.g-img .g-coup{
    position:absolute;left:0;bottom:0;
    background:linear-gradient(90deg,#ff4d2e,#ff7a45);color:#fff;
    font-size:11px;padding:2px 8px 3px;border-radius:0 10px 0 0;
}
.g-body{padding:8px 9px 10px;display:flex;flex-direction:column;flex:1;}
.g-name{
    font-size:14px;line-height:1.35;color:#222;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:38px;
}
.g-tags{margin-top:5px;display:flex;gap:4px;flex-wrap:wrap;min-height:17px;}
.g-tags span{
    font-size:10px;color:#e8352c;border:1px solid #ffd0c4;border-radius:3px;padding:0 3px;line-height:16px;
}
.g-price-row{margin-top:6px;display:flex;align-items:baseline;gap:5px;}
.g-after{color:#e8352c;font-size:19px;font-weight:800;}
.g-after i{font-size:12px;font-style:normal;font-weight:700;}
.g-group{font-size:11px;color:#999;}
.g-old{font-size:11px;color:#bbb;text-decoration:line-through;}
.g-foot{margin-top:auto;padding-top:7px;display:flex;align-items:center;justify-content:space-between;}
.g-sales{font-size:11px;color:#999;}
.g-buy{
    background:linear-gradient(135deg,#ff4d2e,#e8352c);color:#fff;font-size:11px;
    padding:3px 10px;border-radius:11px;
}

/* ===== 加载状态 / 空状态 / 提示条 ===== */
.load-more{text-align:center;padding:14px;color:#999;font-size:13px;}
.load-more .spin{
    display:inline-block;width:15px;height:15px;border:2px solid #eee;border-top-color:#e8352c;
    border-radius:50%;vertical-align:-3px;margin-right:6px;animation:sp .8s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg);}}
.empty-box{text-align:center;padding:70px 30px;color:#999;font-size:14px;line-height:2;max-width:600px;margin:0 auto;}
.empty-box .big{font-size:48px;}
.notice-box{
    margin:14px 12px;padding:14px;background:#fff7e6;border:1px solid #ffe0a3;
    border-radius:10px;color:#8a6d3b;font-size:13px;line-height:1.8;max-width:600px;margin-left:auto;margin-right:auto;
}
.notice-box b{color:#e8352c;}

/* ===== 排序条（搜索页） ===== */
.sort-bar{
    display:flex;background:#fff;border-bottom:1px solid #f0f0f0;
    position:sticky;top:64px;z-index:90;
}
.sort-bar .inner{display:flex;width:100%;max-width:600px;margin:0 auto;}
.sort-bar .s{
    flex:1;text-align:center;padding:11px 0;font-size:14px;color:#555;cursor:pointer;
}
.sort-bar .s.on{color:#e8352c;font-weight:700;}

/* ===== 分类大全页 ===== */
.cat-group{margin:10px;background:#fff;border-radius:10px;overflow:hidden;max-width:600px;margin-left:auto;margin-right:auto;}
.cat-group .cg-hd{
    padding:11px 14px;font-size:15px;font-weight:700;background:#fafafa;
    border-bottom:1px solid #f3f3f3;display:flex;align-items:center;gap:7px;
}
.cat-group .cg-hd::before{content:'';width:4px;height:14px;background:#e8352c;border-radius:2px;}
.cat-group .cg-bd{display:grid;grid-template-columns:repeat(4,1fr);}
.cat-group .cg-bd a{
    text-align:center;padding:13px 4px;font-size:13px;color:#444;
    border-right:1px solid #f7f7f7;border-bottom:1px solid #f7f7f7;
}
.cat-group .cg-bd a:nth-child(4n){border-right:none;}
.cat-page{max-width:600px;margin:0 auto;padding-bottom:20px;}

/* ===== 子分类 chips（分类商品页） ===== */
.sub-chips{
    display:flex;gap:8px;padding:10px 12px;overflow-x:auto;background:#fff;
    border-bottom:1px solid #f0f0f0;scrollbar-width:none;
}
.sub-chips::-webkit-scrollbar{display:none;}
.sub-chips a,.sub-chips span{
    flex:0 0 auto;padding:5px 14px;border-radius:15px;background:#f4f4f4;
    font-size:13px;color:#555;cursor:pointer;
}
.sub-chips span.on{background:#e8352c;color:#fff;font-weight:700;}

/* ============ 电脑端适配 ============ */
@media(min-width:640px){
    .pdd-header-inner,.cat-strip .track,.ch-tabs .inner,.section-hd,
    .goods-grid,.sort-bar .inner,.sub-chips{max-width:720px;}
    .empty-box,.notice-box,.cat-group{max-width:720px;}
    .goods-grid{grid-template-columns:repeat(3,1fr);gap:10px;padding:0 12px 20px;}
}
@media(min-width:820px){
    .pdd-header-inner,.cat-strip .track,.ch-tabs .inner,.section-hd,
    .goods-grid,.sort-bar .inner,.sub-chips{max-width:900px;}
    .empty-box,.notice-box,.cat-group,.cat-page{max-width:900px;}
    .goods-grid{grid-template-columns:repeat(4,1fr);gap:12px;padding:0 14px 24px;}
    .cat-group .cg-bd{grid-template-columns:repeat(5,1fr);}
    .cat-group .cg-bd a:nth-child(4n){border-right:1px solid #f7f7f7;}
    .cat-group .cg-bd a:nth-child(5n){border-right:none;}
    .g-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08);}
    .g-name{font-size:15px;min-height:40px;}
    .g-after{font-size:21px;}
}
@media(min-width:1080px){
    .pdd-header-inner,.cat-strip .track,.ch-tabs .inner,.section-hd,
    .goods-grid,.sort-bar .inner,.sub-chips{max-width:1080px;}
    .empty-box,.notice-box,.cat-group,.cat-page{max-width:1080px;}
    .goods-grid{grid-template-columns:repeat(5,1fr);gap:14px;padding:0 16px 28px;}
    .cat-group .cg-bd{grid-template-columns:repeat(6,1fr);}
    .cat-group .cg-bd a:nth-child(5n){border-right:1px solid #f7f7f7;}
    .cat-group .cg-bd a:nth-child(6n){border-right:none;}
}
@media(min-width:1400px){
    .pdd-header-inner,.cat-strip .track,.ch-tabs .inner,.section-hd,
    .goods-grid,.sort-bar .inner,.sub-chips{max-width:1320px;}
    .empty-box,.notice-box,.cat-group,.cat-page{max-width:1320px;}
    .goods-grid{grid-template-columns:repeat(6,1fr);gap:16px;}
}

/* ============ 微信 X5 / 旧 Android 内核兼容 ============ */
@supports not (aspect-ratio: 1/1){
    .g-img{padding-top:100%;} /* 已有，但再强调 */
}
/* 微信 X5 不支持 :has()，这里没用 :has()，安全 */
/* 微信 X5 不支持 -webkit-line-clamp 需要配合 overflow:hidden 已写好 */