/* ================= 前台手机端样式 ================= */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root{
  --primary:#ff5b37; --primary-d:#e8441f; --p2:#ff8a3d;
  --ink:#20242e; --muted:#8b91a0; --line:#eef0f5; --bg:#f5f6fa; --card:#fff;
  --gold:#ffb02e; --blue:#3b7bff; --green:#15b374;
}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.55;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* 桌面端模拟手机居中框架 */
.app-frame{ max-width:480px; margin:0 auto; background:var(--bg); min-height:100vh;
  box-shadow:0 0 40px rgba(0,0,0,.10); position:relative; padding-bottom:26px; }
@media(min-width:520px){ body{background:#e7eaf2;} }

/* 顶部渐变区 */
.hero{ background:linear-gradient(135deg,#ff7a3d 0%,#ff5b37 45%,#f2355b 100%); color:#fff; padding:16px 16px 60px; position:relative; }
.hero-top{ display:flex; align-items:center; justify-content:space-between; }
.hero-brand{ display:flex; align-items:center; gap:9px; }
.hero-brand .ico{ width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.2); display:flex;align-items:center;justify-content:center;font-size:21px; backdrop-filter:blur(4px); }
.hero-brand b{ font-size:18px; letter-spacing:.5px; display:block; }
.hero-brand small{ font-size:11px; opacity:.88; }
.hero-entry{ font-size:12px; background:rgba(255,255,255,.18); padding:7px 13px; border-radius:999px; display:flex; align-items:center; gap:4px; backdrop-filter:blur(4px); }
.hero-entry:active{ background:rgba(255,255,255,.3); }

/* 搜索 */
.search-box{ position:absolute; left:16px; right:16px; bottom:-22px; }
.search-box form{ display:flex; background:#fff; border-radius:999px; height:46px; align-items:center; padding:0 6px 0 18px;
  box-shadow:0 10px 26px rgba(242,53,91,.18); }
.search-box input{ flex:1; border:none; outline:none; font-size:14px; background:transparent; color:var(--ink); }
.search-box button{ width:74px; height:36px; border-radius:999px; border:none; background:linear-gradient(135deg,var(--p2),var(--primary)); color:#fff; font-size:14px; font-weight:600; }

.notice-bar{ margin:36px 16px 0; background:#fff7f0; color:#c26a12; border-radius:10px; padding:8px 12px; font-size:12px; display:flex; gap:7px; align-items:center; }

/* 品牌横滑 */
.chips{ display:flex; gap:8px; overflow-x:auto; padding:14px 16px 6px; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{ flex:0 0 auto; font-size:13px; line-height:1; color:var(--muted); background:#fff;
  border-radius:999px; padding:9px 16px; white-space:nowrap; box-shadow:0 2px 8px rgba(20,30,60,.05); transition:.2s; }
.chip:active{ transform:scale(.96); }
.chip.active{ background:linear-gradient(135deg,var(--p2),var(--primary)); color:#fff; font-weight:600;
  box-shadow:0 4px 12px rgba(255,91,55,.3); }
.c-all{ background:linear-gradient(135deg,#4557f5,#7a4dff); }
.c-0{background:linear-gradient(135deg,#ff8a3d,#ff5b37);} .c-1{background:linear-gradient(135deg,#ff5b37,#f2355b);}
.c-2{background:linear-gradient(135deg,#f7a625,#f76b25);} .c-3{background:linear-gradient(135deg,#16b981,#0a9b8e);}
.c-4{background:linear-gradient(135deg,#2f7cf6,#56a0ff);} .c-5{background:linear-gradient(135deg,#7a4dff,#4557f5);}
.c-6{background:linear-gradient(135deg,#36415a,#6b7693);} .c-7{background:linear-gradient(135deg,#f2355b,#b5179e);}
.c-8{background:linear-gradient(135deg,#18a999,#0e7c86);} .c-9{background:linear-gradient(135deg,#f5a524,#d6770b);}
.c-10{background:linear-gradient(135deg,#4338ca,#6366f1);} .c-11{background:linear-gradient(135deg,#64748b,#94a3b8);}

/* 排序+筛选条 */
.toolbar{ display:flex; align-items:center; justify-content:space-between; padding:8px 16px 10px; }
.sort-tabs{ display:flex; gap:6px; background:#fff; border-radius:999px; padding:4px; box-shadow:0 3px 10px rgba(20,30,60,.05); }
.sort-tabs a{ font-size:12.5px; padding:6px 14px; border-radius:999px; color:var(--muted); display:flex; align-items:center; gap:3px; }
.sort-tabs a.on{ background:linear-gradient(135deg,var(--p2),var(--primary)); color:#fff; font-weight:600; box-shadow:0 4px 10px rgba(255,91,55,.3); }
.filter-btn{ background:#fff; border:none; height:34px; padding:0 14px; border-radius:999px; font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:5px; box-shadow:0 3px 10px rgba(20,30,60,.05); }
.filter-btn.on{ color:var(--primary); font-weight:600; }

.filter-panel{ display:none; margin:0 16px 10px; background:#fff; border-radius:14px; padding:14px; box-shadow:0 6px 18px rgba(20,30,60,.06); }
.filter-panel.show{ display:block; }
.fp-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.fp-row:last-child{ margin-bottom:0; }
.fp-row .lb{ font-size:12.5px; color:var(--muted); width:42px; }
.fp-opt{ font-size:12.5px; padding:6px 13px; border-radius:999px; background:#f3f5f9; color:#555d70; }
.fp-opt.on{ background:#fff0ea; color:var(--primary); font-weight:600; }
.fp-input{ width:90px; height:34px; border:1px solid var(--line); border-radius:8px; padding:0 10px; font-size:13px; outline:none; }
.fp-input:focus{ border-color:var(--primary); }
.fp-go{ margin-left:auto; height:34px; padding:0 18px; border-radius:999px; border:none; background:linear-gradient(135deg,var(--p2),var(--primary)); color:#fff; font-size:13px; font-weight:600; }

/* 机型卡片 */
/* 机型列表：两列网格卡片（无图片） */
.list{ padding:2px 12px 0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.p-card{ display:flex; flex-direction:column; background:var(--card); border-radius:14px; padding:11px 11px 10px;
  box-shadow:0 3px 12px rgba(20,30,60,.06); transition:.18s; overflow:hidden; }
.p-card:active{ transform:scale(.97); }
.p-brand{ align-self:flex-start; font-size:10.5px; font-weight:600; color:var(--primary);
  background:#fff0ea; border-radius:6px; padding:2px 8px; margin-bottom:7px; }
.p-title{ font-size:13.5px; font-weight:700; line-height:1.4; color:#1d2433;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.p-tags{ display:flex; gap:4px; flex-wrap:wrap; margin:8px 0 0; }
.tag-s{ font-size:10px; line-height:1.5; padding:1px 6px; border-radius:5px; background:#f3f5f9; color:#5d6678; }
.tag-s.q{ background:#fff0ea; color:var(--primary); }
.p-shop{ font-size:10.5px; color:var(--muted); margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.p-price{ margin-top:auto; padding-top:9px; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.price{ color:var(--primary); font-weight:800; white-space:nowrap; }
.price small{ font-size:11px; font-weight:600; }
.price b{ font-size:19px; letter-spacing:-.5px; }
.price-old{ font-size:10.5px; color:#b4bac7; text-decoration:line-through; font-weight:400; }
.empty{ grid-column:1 / -1; text-align:center; padding:70px 30px; color:var(--muted); }
.empty .e-ico{ font-size:58px; margin-bottom:14px; opacity:.65; }
.empty p{ font-size:13.5px; }
.empty a{ display:inline-block; margin-top:16px; padding:9px 26px; background:#fff; border-radius:999px; color:var(--primary); font-size:13px; font-weight:600; box-shadow:0 4px 12px rgba(20,30,60,.08); }

/* 分页 */
.pager{ text-align:center; padding:18px 0 6px; }
.pager ul{ display:inline-flex; gap:6px; list-style:none; flex-wrap:wrap; justify-content:center; padding:0 10px; }
.pager li a,.pager li span{ display:inline-flex; min-width:34px; height:34px; padding:0 10px; align-items:center; justify-content:center;
  background:#fff; border-radius:9px; font-size:13px; color:#5d6678; box-shadow:0 2px 8px rgba(20,30,60,.05); }
.pager li.active span{ background:linear-gradient(135deg,var(--p2),var(--primary)); color:#fff; }
.pager li.disabled span{ color:#c2c7d2; }

/* 底部版权（不可修改） */
.foot{ text-align:center; padding:26px 20px 10px; color:var(--muted); font-size:12px; line-height:2; }
.foot .f-title{ font-weight:700; color:#5d6678; font-size:13px; margin-bottom:3px; }
.foot .f-copy{ border-top:1px dashed #dfe3ec; margin:14px auto 0; padding-top:14px; max-width:300px; color:#9aa1af; }

/* ===== 详情页 ===== */
.back-bar{ display:flex; align-items:center; gap:8px; padding:13px 16px; background:#fff; position:sticky; top:0; z-index:20; box-shadow:0 2px 10px rgba(20,30,60,.05); }
.back-bar a{ width:34px;height:34px;border-radius:10px;background:#f3f5f9; display:flex;align-items:center;justify-content:center;font-size:17px; }
.back-bar b{ font-size:15.5px; }
.d-hero{ margin:12px; background:linear-gradient(135deg,#ff7a3d,#f2355b); border-radius:18px; padding:24px 20px; color:#fff; position:relative; overflow:hidden; }
.d-hero::after{ content:"📱"; position:absolute; right:-10px; bottom:-22px; font-size:120px; opacity:.13; }
.d-hero .d-brand{ font-size:12.5px; opacity:.9; background:rgba(255,255,255,.2); display:inline-block; padding:3px 12px; border-radius:999px; }
.d-hero h2{ font-size:21px; margin:10px 0 4px; }
.d-hero .d-price{ font-size:34px; font-weight:800; letter-spacing:-1px; }
.d-hero .d-price small{ font-size:14px; }
.d-hero .d-old{ text-decoration:line-through; opacity:.8; font-size:13px; margin-left:8px; }
.d-hero .d-meta{ font-size:12px; opacity:.9; margin-top:7px; }

.sec-card{ margin:12px; background:#fff; border-radius:16px; padding:16px; box-shadow:0 4px 12px rgba(20,30,60,.05); }
.sec-title{ font-size:15px; font-weight:700; margin-bottom:13px; display:flex; align-items:center; gap:7px; }
.sec-title::before{ content:""; width:4px; height:15px; border-radius:2px; background:linear-gradient(var(--p2),var(--primary)); }
.spec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-radius:12px; overflow:hidden; }
.spec-cell{ background:#fff; padding:12px 14px; }
.spec-cell .k{ font-size:11.5px; color:var(--muted); }
.spec-cell .v{ font-size:14.5px; font-weight:600; margin-top:3px; }
.d-desc{ font-size:14px; color:#3a4150; line-height:1.85; white-space:pre-wrap; word-break:break-all; }
.shop-card{ display:flex; align-items:center; gap:12px; }
.shop-ava{ width:50px;height:50px;border-radius:14px; background:linear-gradient(135deg,#4557f5,#7a4dff); color:#fff; display:flex;align-items:center;justify-content:center;font-size:22px; font-weight:700; }
.shop-info{ flex:1; min-width:0; }
.shop-info b{ font-size:15.5px; display:block; }
.shop-info span{ font-size:12px; color:var(--muted); }
.shop-card a.go{ font-size:12.5px; padding:8px 16px; border-radius:999px; background:#fff0ea; color:var(--primary); font-weight:600; }
/* 商户联系方式 */
.shop-contact{ margin-top:12px; border-top:1px dashed #eceef3; }
.sc-row{ display:flex; align-items:center; gap:9px; padding:11px 2px 0; font-size:13.5px; color:#2a3140; }
a.sc-row{ color:inherit; }
.sc-row .sc-ico{ width:26px; height:26px; border-radius:8px; background:#f3f5f9; display:flex; align-items:center; justify-content:center; font-size:14px; flex:0 0 26px; }
.sc-row .sc-label{ color:var(--muted); font-size:12.5px; flex:0 0 auto; }
.sc-row .sc-val{ flex:1; min-width:0; font-weight:600; word-break:break-all; }
.sc-row .sc-copy{ font-style:normal; font-size:11px; color:var(--primary); background:#fff0ea; border-radius:6px; padding:2px 8px; margin-left:8px; }
.related-item{ display:block; width:138px; flex:0 0 138px; background:#fafbfd; border-radius:13px; padding:10px; }
.related-scroll{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.related-scroll::-webkit-scrollbar{ display:none; }
.related-item .r-thumb{ height:74px; border-radius:10px; display:flex;align-items:center;justify-content:center;font-size:30px; color:#fff; margin-bottom:8px; }
.related-item .r-name{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.related-item .r-price{ color:var(--primary); font-weight:800; font-size:15px; margin-top:3px; }

/* 店铺页头部 */
.shop-hero{ margin:12px; background:#fff; border-radius:18px; padding:22px 18px; text-align:center; box-shadow:0 4px 14px rgba(20,30,60,.06); }
.shop-hero .big-ava{ width:68px;height:68px;border-radius:20px; margin:0 auto 10px; background:linear-gradient(135deg,#4557f5,#7a4dff); color:#fff; font-size:30px; display:flex;align-items:center;justify-content:center; font-weight:700; }
.shop-hero h2{ font-size:19px; }
.shop-hero p{ color:var(--muted); font-size:12.5px; margin-top:5px; }
.sec-head{ padding:6px 16px 9px; font-size:15px; font-weight:700; display:flex; align-items:center; gap:7px; }
.sec-head::before{ content:""; width:4px; height:15px; border-radius:2px; background:linear-gradient(var(--p2),var(--primary)); }
.sec-head em{ font-style:normal; font-size:12px; color:var(--muted); font-weight:400; }