/* ==========================================================================
 * ROBAM 网页版商城 · 样式表（PC 优先 / 1200px 栅格 / 零依赖）
 * 配色沿用品牌蓝金：主色 #005CA6，点缀金 #D8BB82，价格红 #E8453C
 * ========================================================================== */

:root{
  --blue:#005CA6; --blue-d:#00457F; --blue-l:#EAF3FA; --blue-2:#3197D1;
  --gold:#D8BB82; --gold-l:#FBF6EC;
  --red:#E8453C; --green:#12A150;
  --ink:#16233A; --ink-2:#3B4A61; --muted:#8A94A6; --line:#E7EDF4;
  --bg:#F4F7FB; --card:#fff;
  --radius:16px; --radius-s:10px;
  --shadow:0 6px 20px rgba(8,52,92,.08);
  --shadow-h:0 14px 34px rgba(8,52,92,.14);
  --w:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;outline:none}
button{cursor:pointer;border:none;background:none}
ul{list-style:none}
h1,h2,h3,h4{font-weight:700;line-height:1.35}
.wrap{width:min(var(--w),92vw);margin:0 auto}
.boot{padding:120px 0;text-align:center;color:var(--muted)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:40px;padding:0 20px;border-radius:22px;font-size:14px;font-weight:600;
  border:1px solid transparent;transition:.18s;white-space:nowrap;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-d);box-shadow:0 6px 16px rgba(0,92,166,.28)}
.btn-gold{background:linear-gradient(135deg,#E3C88E,#C9A96A);color:#5A4416}
.btn-gold:hover{filter:brightness(1.05);box-shadow:0 6px 16px rgba(201,169,106,.36)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{filter:brightness(.94)}
.btn-ghost{border-color:var(--line);background:#fff;color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-line{border-color:var(--blue);color:var(--blue);background:#fff}
.btn-line:hover{background:var(--blue-l)}
.btn-lg{height:48px;padding:0 30px;font-size:15px;border-radius:26px}
.btn-sm{height:32px;padding:0 14px;font-size:13px;border-radius:16px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-block{width:100%}

/* ---------- 标签 ---------- */
.tag{display:inline-block;padding:1px 7px;border-radius:5px;font-size:11px;font-weight:600;line-height:17px;vertical-align:middle}
.tag-blue{background:var(--blue-l);color:var(--blue)}
.tag-gold{background:var(--gold-l);color:#A67C1F;border:1px solid #EEDFC0}
.tag-red{background:#FDEceA;color:var(--red)}
.tag-green{background:#E9F7EF;color:var(--green)}

/* ---------- 顶部工具条 ---------- */
.topbar{background:var(--blue-d);color:#CFE3F2;font-size:12.5px;height:34px;line-height:34px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between}
.topbar b{color:#fff;font-weight:600}
.topbar a{color:#CFE3F2;transition:.15s}
.topbar a:hover{color:#fff}
.topbar-r{display:flex;gap:18px;align-items:center}

/* ---------- 主导航 ---------- */
.nav{background:#fff;box-shadow:0 2px 12px rgba(8,52,92,.06);position:sticky;top:0;z-index:60}
/* LOGO 水平居中：三列网格（左留白 | LOGO 居中 | 菜单靠右），互不挤压 */
.nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;height:70px}
.nav .brand{grid-column:2;grid-row:1;justify-self:center}
.nav .menu{grid-column:3;grid-row:1;justify-self:end;flex:initial}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* logo 按原始比例显示（/img/logo.svg 是 331×84 的「ROBAM 老板 + 你的 AI 烹饪伙伴」横版标，
   旧版硬写成 34×34 正方形容器会把横版标压扁 → 这里改成固定高度、宽度自适应） */
.brand img{height:46px;width:auto;max-width:240px;object-fit:contain}
.brand.has-logo .brand-t,.brand.has-logo .brand-s{display:none}
.brand-t{font-size:19px;font-weight:800;letter-spacing:.4px;color:var(--blue-d)}
.brand-s{font-size:11px;color:var(--muted);margin-top:-4px;letter-spacing:2px}
.menu{display:flex;gap:4px;flex:1}
.menu a{
  padding:8px 15px;border-radius:20px;font-size:15px;font-weight:600;color:var(--ink-2);
  transition:.16s;white-space:nowrap;
}
.menu a:hover{color:var(--blue);background:var(--blue-l)}
.menu a.on{color:#fff;background:var(--blue)}
.nav-r{display:flex;align-items:center;gap:12px;flex-shrink:0}
.search{position:relative;width:250px}
.search input{
  width:100%;height:38px;border:1.5px solid var(--line);border-radius:19px;
  padding:0 44px 0 16px;background:#F8FAFD;transition:.16s;
}
.search input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(0,92,166,.08)}
.search button{
  position:absolute;right:4px;top:4px;width:30px;height:30px;border-radius:50%;
  background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;
}
.search button:hover{background:var(--blue-d)}
.icobtn{
  position:relative;height:38px;padding:0 14px;border-radius:19px;background:#F8FAFD;
  border:1.5px solid var(--line);display:flex;align-items:center;gap:7px;font-weight:600;
  font-size:13.5px;color:var(--ink-2);transition:.16s;
}
.icobtn:hover{border-color:var(--blue);color:var(--blue);background:#fff}
.badge-n{
  position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;
  background:var(--red);color:#fff;border-radius:9px;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
}

/* ---------- 首页 hero 轮播 ---------- */
.hero{position:relative;height:430px;border-radius:20px;overflow:hidden;margin:22px 0 8px;box-shadow:var(--shadow)}
/* 轮播遮罩：图片素材本身常带宣传文案，不加遮罩会和我们的标题糊成一片。
   双层渐变（左深右浅 + 底部压暗），保证左下角标题在图上清晰可读。 */
.hero-slide::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(5,18,34,.84) 0%,rgba(5,18,34,.55) 40%,rgba(5,18,34,.14) 70%,rgba(5,18,34,0) 90%),
             linear-gradient(to top,rgba(5,18,34,.62) 0%,rgba(5,18,34,0) 50%)}
.hero-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .7s ease;
  background-size:cover;background-position:center;display:flex;align-items:flex-end;
}
.hero-slide.on{opacity:1}
.hero-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,32,56,.78),rgba(9,32,56,.28) 55%,transparent)}
.hero-txt{position:relative;z-index:2;padding:0 0 58px 58px;color:#fff;max-width:620px}
.hero-txt h2{font-size:38px;letter-spacing:.5px;text-shadow:0 2px 16px rgba(0,0,0,.3)}
.hero-txt p{margin-top:10px;font-size:16px;color:#DCE9F5}
.hero-txt .btn{margin-top:22px}
.hero-dots{position:absolute;left:58px;bottom:26px;z-index:3;display:flex;gap:9px}
.hero-dots i{width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.42);cursor:pointer;transition:.2s}
.hero-dots i.on{background:#fff;width:40px}
.hero-ar{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;
  border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:20px;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:.2s;
}
.hero-ar:hover{background:rgba(255,255,255,.4)}
.hero-ar.l{left:16px} .hero-ar.r{right:16px}

/* ---------- 区块 ---------- */
.sec{margin:34px 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.sec-h h2{font-size:23px;letter-spacing:.3px}
.sec-h h2 em{font-style:normal;color:var(--blue)}
.sec-h p{font-size:13px;color:var(--muted);margin-top:2px}
.sec-more{font-size:13.5px;color:var(--muted);font-weight:600;transition:.15s}
.sec-more:hover{color:var(--blue)}

/* ---------- 套系卡 ---------- */
.suite-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.suite{position:relative;height:230px;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:#DCE6F0;box-shadow:var(--shadow)}
.suite:hover{box-shadow:var(--shadow-h)}
.suite-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s}
.suite:hover .suite-img{transform:scale(1.06)}
.suite-txt{position:absolute;inset:auto 0 0 0;padding:36px 18px 16px;color:#fff;background:linear-gradient(transparent,rgba(9,32,56,.82))}
.suite-txt b{display:block;font-size:16.5px}
.suite-txt span{font-size:12px;color:#CFE0EF}
.suite-go{
  position:absolute;right:14px;bottom:14px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--blue);display:flex;align-items:center;justify-content:center;
  font-weight:700;opacity:0;transform:translateY(6px);transition:.24s;
}
.suite:hover .suite-go{opacity:1;transform:none}

/* ---------- 分类卡 ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cat{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 10px;
  text-align:center;cursor:pointer;transition:.18s;
}
.cat:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow)}
.cat-ic{color:var(--blue);margin-bottom:9px;display:flex;justify-content:center}.cat-ic svg{width:30px;height:30px;display:block}
.cat b{display:block;font-size:14px}
.cat span{font-size:11.5px;color:var(--muted)}

/* ---------- 商品卡 ---------- */
.p-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.p-grid.c3{grid-template-columns:repeat(3,1fr)}
.p{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  cursor:pointer;transition:.2s;display:flex;flex-direction:column;
}
.p:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);border-color:#D6E5F2}
.p-img{position:relative;aspect-ratio:3/2;background:#F1F5FA;overflow:hidden}
.p-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.p:hover .p-img img{transform:scale(1.06)}
.p-img .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#A9B8C9;font-weight:700;font-size:15px;background:linear-gradient(140deg,#EDF3F9,#DFE9F3)}
.p-flag{position:absolute;left:10px;top:10px;display:flex;gap:5px;flex-wrap:wrap}
.p-body{padding:12px 14px 14px;flex:1;display:flex;flex-direction:column;gap:5px}
.p-name{font-size:14px;font-weight:600;line-height:1.45;height:40px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.p-sub{font-size:11.5px;color:var(--muted);height:17px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.p-price{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:6px}
.p-price b{color:var(--red);font-size:20px;font-weight:800;letter-spacing:-.3px}
.p-price b i{font-size:13px;font-style:normal;margin-right:1px}
.p-price s{color:#AEB8C4;font-size:12.5px}
.p-promo{
  font-size:11.5px;border-radius:7px;padding:4px 8px;margin-top:5px;
  background:var(--gold-l);color:#8A6A1C;border:1px solid #F0E2C6;
}
.p-promo.inner{background:#E9F3FB;color:var(--blue);border-color:#D3E6F6}

/* ---------- 服务卡 ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.svc{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  display:flex;gap:13px;cursor:pointer;transition:.18s;
}
.svc:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-2px)}
.svc-ic{
  width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--blue-l);
  display:flex;align-items:center;justify-content:center;font-size:21px;
}
.svc b{display:block;font-size:14.5px;margin-bottom:3px}
.svc span{font-size:12px;color:var(--muted);display:block;line-height:1.5}

/* ---------- 视频 ---------- */
.vbox{position:relative;border-radius:var(--radius);overflow:hidden;background:#0E1A28;aspect-ratio:16/9;box-shadow:var(--shadow)}
.vbox img.vcover{width:100%;height:100%;object-fit:cover}
.vbox video{width:100%;height:100%;object-fit:cover;display:block}
.vplay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(9,25,42,.42);cursor:pointer;transition:.2s;
}
.vplay:hover{background:rgba(9,25,42,.28)}
.vplay i{
  width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:26px;padding-left:5px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}

/* ---------- 保障条 ---------- */
.assure{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:var(--radius);overflow:hidden;margin:30px 0}
.assure div{background:#fff;padding:20px;text-align:center}
.assure b{display:block;font-size:14px;margin:6px 0 2px}
.assure span{font-size:12px;color:var(--muted)}
.assure em{font-style:normal;font-size:22px}

/* ---------- 页脚 ---------- */
.foot{background:#0F2138;color:#9FB3C7;margin-top:48px;padding:44px 0 0;font-size:13px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:30px;padding-bottom:34px}
.foot h4{color:#fff;font-size:15px;margin-bottom:14px}
.foot li{margin-bottom:8px}
.foot a:hover{color:#fff}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.foot-brand img{height:30px;width:auto;max-width:180px;object-fit:contain;filter:brightness(0) invert(1);opacity:.92}
.foot-brand b{color:#fff;font-size:17px;letter-spacing:.4px}
.foot-hot b{color:var(--gold);font-size:22px;display:block;letter-spacing:.5px;margin-bottom:4px}
.foot-bot{border-top:1px solid rgba(255,255,255,.1);padding:16px 0;text-align:center;font-size:12.5px;color:#7A8DA3}

/* ---------- 通用页头 ---------- */
.crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);padding:18px 0 4px}
.crumb a:hover{color:var(--blue)}
.crumb i{font-style:normal;color:#C6D0DC}
.page-h{display:flex;align-items:center;justify-content:space-between;margin:6px 0 18px}
.page-h h1{font-size:26px;letter-spacing:.3px}
.page-h p{color:var(--muted);font-size:13.5px;margin-top:3px}

/* ---------- 列表页：筛选 + 网格 ---------- */
.shop{display:grid;grid-template-columns:236px 1fr;gap:20px;align-items:start;padding-bottom:20px}
.facet{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:6px 16px 16px;position:sticky;top:86px}
.facet-g{padding:14px 0;border-bottom:1px dashed var(--line)}
.facet-g:last-child{border-bottom:none}
.facet-g>b{display:block;font-size:13px;margin-bottom:9px;color:var(--ink)}
.facet-opts{display:flex;flex-wrap:wrap;gap:7px}
.fopt{
  padding:4px 11px;border-radius:14px;font-size:12.5px;color:var(--ink-2);
  background:#F4F7FB;border:1px solid transparent;transition:.15s;cursor:pointer;
}
.fopt:hover{color:var(--blue);background:var(--blue-l)}
.fopt.on{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:600}
.facet-reset{width:100%;margin-top:12px}
.sortbar{
  display:flex;align-items:center;gap:6px;margin-bottom:14px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;
}
.sortbar .sopt{padding:5px 14px;border-radius:15px;font-size:13.5px;font-weight:600;color:var(--ink-2);transition:.15s}
.sortbar .sopt:hover{color:var(--blue)}
.sortbar .sopt.on{background:var(--blue-l);color:var(--blue)}
.sortbar .cnt{margin-left:auto;font-size:13px;color:var(--muted)}
.pager{display:flex;justify-content:center;gap:7px;margin:26px 0}
.pager button{
  min-width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;
  font-weight:600;color:var(--ink-2);transition:.15s;
}
.pager button:hover{border-color:var(--blue);color:var(--blue)}
.pager button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.pager button[disabled]{opacity:.42;cursor:not-allowed}
.empty{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:70px 20px;text-align:center;color:var(--muted)}
.empty em{font-style:normal;font-size:40px;display:block;margin-bottom:12px;opacity:.5}

/* ---------- 详情页 ---------- */
.detail{display:grid;grid-template-columns:500px 1fr;gap:34px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:20px}
.gal-main{position:relative;aspect-ratio:1/1;border-radius:var(--radius-s);overflow:hidden;background:#F4F7FB;border:1px solid var(--line)}
.gal-main img{width:100%;height:100%;object-fit:contain}
.gal-thumbs{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap}
.gal-thumbs img{
  width:70px;height:70px;object-fit:cover;border-radius:9px;border:2px solid var(--line);
  cursor:pointer;transition:.16s;background:#fff;
}
.gal-thumbs img:hover{border-color:#9CC4E2}
.gal-thumbs img.on{border-color:var(--blue)}
.d-title{font-size:24px;line-height:1.4}
.d-meta{display:flex;gap:10px;align-items:center;margin-top:9px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.price-box{background:linear-gradient(120deg,#FFF8EC,#FDF1E0);border:1px solid #F3E3C8;border-radius:var(--radius-s);padding:16px 18px;margin:16px 0}
.price-now{display:flex;align-items:baseline;gap:10px}
.price-now b{color:var(--red);font-size:34px;font-weight:800;letter-spacing:-.6px}
.price-now b i{font-size:18px;font-style:normal}
.price-now s{color:#A9B4C1;font-size:14px}
.price-save{font-size:12.5px;color:#A67C1F;margin-top:4px}
.price-rows{margin-top:12px;border-top:1px dashed #EBDCC0;padding-top:10px;display:grid;gap:6px}
.price-rows div{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2)}
.price-rows div b{color:var(--red)}
.spec-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.spec-table td{padding:8px 10px;border:1px solid var(--line)}
.spec-table td:nth-child(odd){background:#F8FAFD;color:var(--muted);width:96px}
.buy-row{display:flex;align-items:center;gap:16px;margin:18px 0}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden}
.qty button{width:36px;height:38px;font-size:17px;color:var(--ink-2);background:#F8FAFD}
.qty button:hover{background:var(--blue-l);color:var(--blue)}
.qty input{width:54px;height:38px;text-align:center;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);font-weight:600}
.buy-btns{display:flex;gap:12px;margin-top:4px}
.d-note{margin-top:14px;font-size:12.5px;color:var(--muted);display:grid;gap:5px}
.d-note span::before{content:'· ';color:var(--blue)}
.d-tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin-bottom:20px}
.d-tabs button{padding:11px 22px;font-size:15px;font-weight:600;color:var(--muted);position:relative}
.d-tabs button.on{color:var(--blue)}
.d-tabs button.on::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--blue)}
.d-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.d-gallery-img{width:100%;border-radius:var(--radius-s);margin-bottom:14px;border:1px solid var(--line)}
.d-sec-t{font-size:17px;font-weight:700;margin:22px 0 12px;padding-left:11px;border-left:4px solid var(--blue)}
.d-gallery-img:first-child,.d-sec-t:first-child{margin-top:0}

/* ---------- 购物车 ---------- */
.cart-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:20px}
.cart-head,.cart-row{display:grid;grid-template-columns:44px 1fr 130px 128px 120px 80px;gap:12px;align-items:center;padding:14px 18px}
.cart-head{background:#F8FAFD;font-size:13px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}
.cart-row{border-bottom:1px solid var(--line)}
.cart-row:last-child{border-bottom:none}
.cart-row:hover{background:#FCFDFF}
.cart-goods{display:flex;gap:13px;align-items:center;min-width:0;cursor:pointer}
.cart-goods img{width:74px;height:74px;object-fit:cover;border-radius:10px;border:1px solid var(--line);flex-shrink:0}
.cart-goods .cg-t{min-width:0}
.cart-goods b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-goods span{font-size:12px;color:var(--muted)}
.cart-price{color:var(--ink-2);font-weight:600}
.cart-sum{color:var(--red);font-weight:800;font-size:16px}
.link-del{color:var(--muted);font-size:13px;transition:.15s}
.link-del:hover{color:var(--red)}
.cart-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:24px;padding:18px;
  background:#F8FAFD;border-top:1px solid var(--line);
}
.cart-foot .cf-t{font-size:14px;color:var(--muted)}
.cart-foot .cf-s{font-size:26px;font-weight:800;color:var(--red)}
.cart-foot .cf-s i{font-size:16px;font-style:normal}

/* ---------- 结算 ---------- */
.checkout{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;padding-bottom:24px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:16px}
.panel>h3{font-size:16px;margin-bottom:16px;padding-left:11px;border-left:4px solid var(--blue)}
.form-row{display:flex;gap:14px;margin-bottom:14px}
.form-row>label{width:88px;flex-shrink:0;font-size:13.5px;color:var(--ink-2);padding-top:10px}
.form-row>label em{color:var(--red);font-style:normal}
.form-row .fi{flex:1;min-width:0}
.fi input,.fi textarea,.fi select{
  width:100%;border:1.5px solid var(--line);border-radius:var(--radius-s);padding:10px 13px;
  background:#FBFCFE;transition:.16s;
}
.fi input:focus,.fi textarea:focus,.fi select:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(0,92,166,.08)}
.fi textarea{resize:vertical;min-height:74px}
.fi .err{color:var(--red);font-size:12px;margin-top:5px}
.ol-item{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px dashed var(--line)}
.ol-item:last-of-type{border-bottom:none}
.ol-item img{width:58px;height:58px;object-fit:cover;border-radius:9px;border:1px solid var(--line);flex-shrink:0}
.ol-item .oi-t{flex:1;min-width:0}
.ol-item .oi-t b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol-item .oi-t span{font-size:12px;color:var(--muted)}
.ol-item .oi-p{text-align:right;flex-shrink:0}
.ol-item .oi-p b{display:block;color:var(--red);font-weight:700}
.ol-item .oi-p span{font-size:12px;color:var(--muted)}
.sum-rows{display:grid;gap:9px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.sum-rows div{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink-2)}
.sum-rows div b{font-weight:700}
.sum-rows .cut b{color:var(--red)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.sum-total span{font-size:14px;color:var(--muted)}
.sum-total b{font-size:28px;color:var(--red);font-weight:800}
.sum-total b i{font-size:16px;font-style:normal}

/* ---------- 订单 ---------- */
.ord-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.ord-tabs button{padding:8px 18px;border-radius:20px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:13.5px;color:var(--ink-2);transition:.15s}
.ord-tabs button:hover{border-color:var(--blue);color:var(--blue)}
.ord-tabs button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.order{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;overflow:hidden}
.order-h{display:flex;align-items:center;gap:16px;padding:13px 20px;background:#F8FAFD;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.order-h b{color:var(--ink);font-weight:600}
.order-h .ost{margin-left:auto;font-weight:700}
.ost-已转发顾问{color:#D98A00} .ost-顾问已接{color:var(--blue-2)} .ost-到店体验{color:var(--blue)}
.ost-已成交{color:var(--green)} .ost-已核销{color:var(--green)} .ost-已取消{color:var(--muted)}
.order-b{padding:6px 20px 14px}
.order-goods{display:flex;gap:13px;align-items:center;padding:11px 0;border-bottom:1px dashed var(--line);cursor:pointer}
.order-goods:last-of-type{border-bottom:none}
.order-goods:hover .og-t b{color:var(--blue)}
.order-goods img{width:66px;height:66px;object-fit:cover;border-radius:10px;border:1px solid var(--line);flex-shrink:0}
.og-t{flex:1;min-width:0}
.og-t b{display:block;font-size:13.5px;transition:.15s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.og-t span{font-size:12px;color:var(--muted)}
.og-p{text-align:right;flex-shrink:0}
.og-p b{display:block;color:var(--red)}
.og-p span{font-size:12px;color:var(--muted)}
.order-f{display:flex;align-items:center;gap:14px;justify-content:flex-end;padding:13px 20px;border-top:1px solid var(--line);background:#FCFDFF}
.order-f .of-t{margin-right:auto;font-size:13px;color:var(--muted)}
.order-f .of-t b{color:var(--red);font-size:18px}
.timeline{margin-top:6px}
.tl-node{display:flex;gap:13px;padding:9px 0;font-size:13px}
.tl-node i{width:9px;height:9px;border-radius:50%;background:var(--line);margin-top:7px;flex-shrink:0;position:relative}
.tl-node.on i{background:var(--blue);box-shadow:0 0 0 4px rgba(0,92,166,.14)}
.tl-node time{color:var(--muted);flex-shrink:0;font-size:12.5px}

/* ---------- 服务 / 门店 ---------- */
.svc-list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.store-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.store{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;transition:.18s}
.store:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.store b{display:block;font-size:15px;margin-bottom:7px}
.store p{font-size:13px;color:var(--muted);display:flex;gap:6px;margin-bottom:5px}
.store .st-tel{color:var(--blue);font-weight:700;font-size:14px}
.store .st-no{color:#B6C0CC;font-size:12.5px}

/* ---------- 客服 ---------- */
.cs-layout{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.chat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;aspect-ratio:9/16;width:100%;max-width:400px;margin:0 auto;min-height:420px;overflow:hidden}
.chat-h{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;font-weight:700}
.chat-h i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(18,161,80,.16)}
.chat-body{flex:1;overflow-y:auto;padding:18px;background:#FAFCFE;display:flex;flex-direction:column;gap:12px}
.msg{max-width:76%;padding:11px 15px;border-radius:14px;font-size:13.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.msg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start}
.msg.me{background:var(--blue);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.chat-quick{display:flex;gap:8px;flex-wrap:wrap;padding:11px 18px;border-top:1px solid var(--line);background:#fff}
.chat-in{display:flex;gap:10px;padding:13px 18px;border-top:1px solid var(--line)}
.chat-in input{flex:1;border:1.5px solid var(--line);border-radius:20px;padding:10px 16px;background:#FBFCFE}
.chat-in input:focus{border-color:var(--blue);background:#fff}

/* ---------- 我的 ---------- */
.mine-top{
  background:linear-gradient(120deg,var(--blue-d),var(--blue));border-radius:var(--radius);
  padding:26px 30px;color:#fff;display:flex;align-items:center;gap:22px;margin-bottom:18px;
}
.avatar{
  width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;
  border:2px solid rgba(255,255,255,.32);
}
.mine-top .mt-t h2{font-size:22px}
.mine-top .mt-t p{font-size:13.5px;color:#C9DEF1;margin-top:3px}
.mine-top .mt-r{margin-left:auto;display:flex;gap:26px;text-align:center}
.mine-top .mt-r div b{display:block;font-size:23px;font-weight:800}
.mine-top .mt-r div span{font-size:12.5px;color:#C9DEF1}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.stat span{font-size:12.5px;color:var(--muted)}
.stat b{display:block;font-size:26px;font-weight:800;margin-top:4px;letter-spacing:-.5px}
.stat b.blue{color:var(--blue)} .stat b.red{color:var(--red)}
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.menu-grid .mi{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  display:flex;align-items:center;gap:12px;cursor:pointer;transition:.16s;
}
.menu-grid .mi:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-2px)}
.menu-grid .mi em{font-style:normal;font-size:20px}
.menu-grid .mi b{font-size:14px}
.inner-box{
  background:linear-gradient(120deg,#FFF9EE,#FDF3E3);border:1px solid #F1E2C6;border-radius:var(--radius);
  padding:20px 22px;display:flex;align-items:center;gap:16px;margin-bottom:18px;
}
.inner-box .ib-ic{font-size:26px}
.inner-box .ib-t{flex:1}
.inner-box .ib-t b{display:block;font-size:15px}
.inner-box .ib-t span{font-size:12.5px;color:#96794A}
.code-input{display:flex;gap:10px}
.code-input input{border:1.5px solid #EBD9B8;border-radius:var(--radius-s);padding:10px 14px;background:#fff;width:190px}
.code-input input:focus{border-color:var(--gold)}

/* ---------- 登录 ---------- */
.login-wrap{max-width:430px;margin:56px auto 72px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:38px 40px;box-shadow:var(--shadow)}
.login-wrap h1{font-size:24px;text-align:center}
.login-wrap .lg-sub{text-align:center;color:var(--muted);font-size:13px;margin:6px 0 26px}
.login-wrap .fi{margin-bottom:14px}
.login-wrap .fi input{width:100%;border:1.5px solid var(--line);border-radius:var(--radius-s);padding:13px 15px;background:#FBFCFE}
.login-wrap .fi input:focus{border-color:var(--blue);background:#fff}
.code-row{display:flex;gap:10px}
.code-row button{flex-shrink:0;width:118px;border:1px solid var(--blue);color:var(--blue);border-radius:var(--radius-s);font-weight:600;font-size:13.5px}
.code-row button:hover:not([disabled]){background:var(--blue-l)}
.code-row button[disabled]{opacity:.55;cursor:not-allowed;border-color:var(--line);color:var(--muted)}
.lg-agree{font-size:12px;color:var(--muted);margin-top:16px;text-align:center;line-height:1.7}
.lg-tip{margin-top:14px;background:var(--blue-l);border-radius:var(--radius-s);padding:10px 14px;font-size:12.5px;color:var(--blue)}

/* ---------- 抽屉 ---------- */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;z-index:200;
  transform:translateX(102%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 40px rgba(8,52,92,.16);display:flex;flex-direction:column;
}
.drawer.show{transform:none}
.drawer-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.drawer-h b{font-size:16px}
.drawer-x{width:30px;height:30px;border-radius:50%;background:#F4F7FB;color:var(--muted);font-size:16px;display:flex;align-items:center;justify-content:center}
.drawer-x:hover{background:#FDEceA;color:var(--red)}
.drawer-b{flex:1;overflow-y:auto;padding:14px 22px}
.drawer-f{padding:16px 22px;border-top:1px solid var(--line);background:#F8FAFD}
.dc-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line)}
.dc-item img{width:66px;height:66px;object-fit:cover;border-radius:10px;border:1px solid var(--line);flex-shrink:0}
.dc-item .dc-t{flex:1;min-width:0}
.dc-item .dc-t b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-item .dc-t span{font-size:12px;color:var(--muted)}
.dc-item .dc-p{display:flex;align-items:center;justify-content:space-between;margin-top:7px}
.dc-item .dc-p b{color:var(--red);font-size:14px}
.qty-sm{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.qty-sm button{width:26px;height:26px;background:#F8FAFD;font-size:14px;color:var(--ink-2)}
.qty-sm button:hover{background:var(--blue-l);color:var(--blue)}
.qty-sm span{min-width:34px;text-align:center;font-size:13px;font-weight:600}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;background:rgba(9,25,42,.42);backdrop-filter:blur(3px);padding:20px}
.modal.show{display:flex}
.modal-card{background:#fff;border-radius:18px;width:min(620px,94vw);max-height:88vh;overflow:auto;box-shadow:0 24px 60px rgba(8,52,92,.28)}
.modal-h{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:2}
.modal-h b{font-size:16.5px}
.modal-b{padding:22px 24px}
.modal-f{padding:15px 24px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;position:sticky;bottom:0;background:#fff}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;top:76px;transform:translate(-50%,-14px);z-index:400;
  background:rgba(22,35,58,.94);color:#fff;padding:11px 22px;border-radius:24px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:.24s;box-shadow:0 10px 30px rgba(0,0,0,.22);max-width:78vw;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 响应式（以 PC 为主，窄屏可用） ---------- */
@media (max-width:1120px){
  .p-grid{grid-template-columns:repeat(3,1fr)}
  .suite-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .svc-grid,.svc-list{grid-template-columns:repeat(2,1fr)}
  .detail{grid-template-columns:1fr;gap:22px}
  .shop{grid-template-columns:1fr}
  .facet{position:static}
  .foot-top{grid-template-columns:1fr 1fr 1fr}
  .store-grid{grid-template-columns:repeat(2,1fr)}
  .menu a{padding:8px 11px;font-size:14px}
  .search{width:190px}
}
@media (max-width:820px){
  .nav .wrap{height:auto;display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:12px}
  .nav .brand{grid-column:auto;grid-row:auto;justify-self:auto}
  .nav .menu{grid-column:auto;grid-row:auto;justify-self:auto}
  .menu{order:2;width:100%;overflow-x:auto;padding-bottom:2px;justify-content:center}
  .p-grid,.p-grid.c3{grid-template-columns:repeat(2,1fr)}
  .stat-grid,.menu-grid{grid-template-columns:repeat(2,1fr)}
  .assure{grid-template-columns:repeat(2,1fr)}
  .checkout,.cs-layout{grid-template-columns:1fr}
  .cart-head{display:none}
  .cart-row{grid-template-columns:1fr;gap:8px}
  .hero{height:300px}
  .hero-txt{padding:0 0 40px 24px}
  .hero-txt h2{font-size:26px}
  .hero-dots{left:24px}
  .topbar .topbar-r{display:none}
  .mine-top{flex-direction:column;text-align:center;gap:14px}
  .mine-top .mt-r{margin:0}
  .store-grid{grid-template-columns:1fr}
}

/* ===== MOBILE-ADAPT ===== */
/* ==========================================================================
 * 手机端适配（默认隐藏元素 + 底部导航）
 * 断点：≤768px 手机 / ≤400px 小屏
 * ========================================================================== */

/* 底部导航（仅手机端显示，桌面端由 .tabbar{display:none} 隐藏） */
.tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  padding:5px 0 calc(5px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 14px rgba(8,52,92,.06);
}
.tabbar .tb{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:10.5px;color:var(--muted);padding:4px 0;position:relative;line-height:1.35;
}
.tabbar .tb em{font-style:normal;font-size:19px;line-height:1}
.tabbar .tb.on{color:var(--blue);font-weight:600}
.tabbar .tb .tb-badge{
  position:absolute;top:-1px;left:50%;margin-left:6px;min-width:16px;height:16px;padding:0 4px;
  background:var(--red);color:#fff;border-radius:8px;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
/* 筛选折叠按钮：桌面端隐藏 */
.facet-mb{display:none}

@media (max-width:768px){
  :root{ --w:100%; --radius:14px; --radius-s:9px }
  .wrap{ width:calc(100% - 24px) }
  body:not(.no-tab){ padding-bottom:calc(60px + env(safe-area-inset-bottom)) }
  body.on-product{ padding-bottom:calc(128px + env(safe-area-inset-bottom)) }
  body.on-checkout{ padding-bottom:calc(140px + env(safe-area-inset-bottom)) }

  /* ---------- 顶栏：隐藏工具条，导航两行 ---------- */
  .topbar{ display:none }
  .nav .wrap{ height:auto; flex-direction:column; align-items:center; padding:9px 0; gap:8px }
  .nav .brand{ gap:8px; justify-content:center }
  .brand img{ height:28px; width:auto; max-width:170px }
  .brand-t{ font-size:16.5px }
  .brand-s{ display:none }
  .menu{ display:none }
  .nav-r{ flex:1; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-left:0 }
  .search{ order:3; width:100%; margin-top:0 }
  .search input{ height:38px; font-size:14px }
  .icobtn{ height:34px; padding:0 11px; gap:5px }
  .icobtn>span:not(.badge-n){ display:none }
  .icobtn>em,.icobtn>svg{ font-size:16px }

  /* ---------- 首页 hero ---------- */
  .hero{ height:212px; border-radius:14px; margin:12px 0 6px }
  .hero-slide::after{ background:linear-gradient(0deg,rgba(9,32,56,.84),rgba(9,32,56,.22) 62%,transparent) }
  .hero-txt{ padding:0 0 26px 16px; max-width:calc(100% - 32px) }
  .hero-txt h2{ font-size:21px }
  .hero-txt p{ font-size:12.5px; margin-top:6px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden }
  .hero-txt .btn{ margin-top:12px; height:36px; padding:0 18px; font-size:13px }
  .hero-ar{ display:none }
  .hero-dots{ left:16px; bottom:14px; gap:6px }
  .hero-dots i{ width:20px } .hero-dots i.on{ width:30px }

  /* ---------- 区块 / 标题 ---------- */
  .sec{ margin:22px 0 }
  .sec-h{ margin-bottom:12px; align-items:center }
  .sec-h h2{ font-size:18px }
  .sec-h p{ font-size:12px; margin-top:1px }
  .sec-more{ font-size:12.5px }

  /* ---------- 套系 / 品类 ---------- */
  .suite-grid{ grid-template-columns:repeat(2,1fr); gap:10px }
  .suite{ height:132px; border-radius:13px }
  .suite-txt{ padding:26px 12px 11px }
  .suite-txt b{ font-size:14px }
  .suite-txt span{ font-size:11px }
  .suite-go{ display:none }
  .cat-grid{ grid-template-columns:repeat(3,1fr); gap:9px }
  .cat{ padding:13px 6px; border-radius:13px }
  .cat-ic svg{ width:24px; height:24px }
  .cat b{ font-size:12.5px }
  .cat span{ font-size:10.5px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

  /* ---------- 商品网格 ---------- */
  .p-grid,.p-grid.c3{ grid-template-columns:repeat(2,1fr); gap:10px }
  .p{ border-radius:13px }
  .p-body{ padding:9px 10px 11px; gap:4px }
  .p-name{ font-size:13px; height:37px }
  .p-sub{ font-size:10.5px; height:15px }
  .p-price{ gap:6px; padding-top:4px }
  .p-price b{ font-size:17px }
  .p-price b i{ font-size:12px }
  .p-price s{ font-size:11px }
  .p-promo{ font-size:10.5px; padding:3px 6px; border-radius:6px }
  .p-flag{ left:8px; top:8px }
  .p-flag .tag{ font-size:10px; padding:1px 5px; line-height:15px }

  /* ---------- 服务 / 视频 / 保障 ---------- */
  .svc-grid,.svc-list{ grid-template-columns:1fr 1fr; gap:10px }
  .svc{ padding:13px; gap:10px; border-radius:13px }
  .svc-ic{ width:38px; height:38px; font-size:18px; border-radius:10px }
  .svc b{ font-size:13.5px; margin-bottom:1px }
  .svc span{ font-size:11.5px; line-height:1.45 }
  .vbox{ border-radius:13px }
  .vplay i{ width:56px; height:56px; font-size:20px }
  .assure{ grid-template-columns:1fr 1fr; margin:20px 0; border-radius:13px }
  .assure div{ padding:14px 8px }
  .assure em{ font-size:19px }
  .assure b{ font-size:13px; margin:4px 0 1px }
  .assure span{ font-size:11px }

  /* ---------- 通用页头 ---------- */
  .crumb{ font-size:12px; padding:12px 0 2px; flex-wrap:wrap }
  .page-h{ margin:4px 0 14px; gap:10px }
  .page-h h1{ font-size:20px }
  .page-h p{ font-size:12.5px; margin-top:2px }

  /* ---------- 列表页：筛选折叠 + 排序横滑 ---------- */
  .shop{ grid-template-columns:1fr; gap:12px }
  .facet{ position:static; padding:0; overflow:hidden; border-radius:13px }
  .facet-mb{
    display:flex; align-items:center; gap:8px; width:100%; padding:13px 15px;
    font-size:14px; font-weight:700; color:var(--ink); text-align:left;
  }
  .facet-mb .facet-n{ font-size:12px; font-weight:500; color:var(--muted) }
  .facet-mb .ft-ic{ margin-left:auto; font-size:12px; color:var(--muted); transition:transform .2s }
  .facet.open .facet-mb .ft-ic{ transform:rotate(180deg) }
  .facet-body{ display:none; padding:0 15px 15px }
  .facet.open .facet-body{ display:block }
  .facet-g{ padding:12px 0 }
  .facet-g>b{ font-size:12.5px; margin-bottom:8px }
  .fopt{ padding:5px 12px; font-size:12.5px }
  .sortbar{
    gap:4px; padding:8px 10px; border-radius:13px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .sortbar::-webkit-scrollbar{ display:none }
  .sortbar .sopt{ padding:5px 11px; font-size:12.5px; flex-shrink:0 }
  .sortbar .cnt{ display:none }
  .pager{ gap:5px; margin:20px 0 }
  .pager button{ min-width:34px; height:34px; font-size:13px }
  .empty{ padding:44px 16px; border-radius:13px }
  .empty em{ font-size:34px; margin-bottom:8px }

  /* ---------- 详情页 ---------- */
  .detail{ grid-template-columns:1fr; gap:16px; padding:14px; margin-bottom:14px; border-radius:14px }
  .gal-main{ border-radius:10px }
  .gal-thumbs{ gap:7px; margin-top:9px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch }
  .gal-thumbs img{ width:56px; height:56px; flex-shrink:0 }
  .d-title{ font-size:19px }
  .d-meta{ font-size:12px; margin-top:7px }
  .price-box{ padding:13px 14px; margin:12px 0; border-radius:10px }
  .price-now{ gap:8px; flex-wrap:wrap }
  .price-now b{ font-size:27px }
  .price-now b i{ font-size:15px }
  .price-now s{ font-size:12.5px }
  .price-save{ font-size:12px }
  .price-rows div{ font-size:12.5px }
  .spec-table{ font-size:12.5px }
  .spec-table td{ padding:7px 9px }
  .spec-table td:nth-child(odd){ width:84px }
  .buy-row{ flex-wrap:wrap; gap:10px; margin:14px 0 }
  /* 详情页底部固定购买栏 */
  .buy-btns{
    position:fixed; left:0; right:0; bottom:calc(56px + env(safe-area-inset-bottom)); z-index:130; margin:0;
    display:flex; gap:10px;
    background:#fff; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(8,52,92,.10);
  }
  .buy-btns .btn{ flex:1; height:44px; font-size:14.5px; border-radius:24px }
  .d-note{ font-size:12px; gap:4px }
  .d-tabs{
    gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .d-tabs::-webkit-scrollbar{ display:none }
  .d-tabs button{ padding:10px 16px; font-size:14px; flex-shrink:0 }
  .d-panel{ padding:14px; border-radius:13px }
  .d-sec-t{ font-size:15.5px; margin:18px 0 10px }

  /* ---------- 购物车 ---------- */
  .cart-wrap{ border-radius:13px }
  .cart-head{ display:none }
  .cart-row{ grid-template-columns:1fr; gap:8px; padding:13px 14px; position:relative }
  .cart-row>div:first-child{ display:none }            /* 独立缩略图列，手机端用 .cart-goods 内的图 */
  .cart-goods{ gap:11px; padding-right:34px }
  .cart-goods img{ width:62px; height:62px; border-radius:9px }
  .cart-goods b{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:13.5px }
  .cart-goods span{ font-size:11.5px }
  .cart-price{ font-size:12.5px; color:var(--muted); font-weight:600 }
  .cart-price::before{ content:'单价 '; font-weight:400 }
  .cart-sum::before{ content:'小计 '; font-size:11.5px; color:var(--muted); font-weight:400 }
  .cart-row>div:nth-child(4){ position:absolute; right:14px; bottom:13px }
  .cart-row .link-del{ position:absolute; right:12px; top:11px; font-size:12px }
  .cart-foot{ flex-wrap:wrap; gap:10px; padding:14px; justify-content:space-between }
  .cart-foot .cf-t{ font-size:13px }
  .cart-foot .cf-s{ font-size:22px }
  .cart-foot .btn{ width:100%; order:3; height:44px }

  /* ---------- 结算 ---------- */
  .checkout{ grid-template-columns:1fr; gap:14px }
  .panel{ padding:15px; border-radius:13px; margin-bottom:13px }
  .panel>h3{ font-size:15px; margin-bottom:12px; padding-left:9px; border-left-width:3px }
  .form-row{ flex-direction:column; gap:5px; margin-bottom:13px }
  .form-row>label{ width:auto; padding-top:0; font-size:13px }
  .fi input,.fi textarea,.fi select{ padding:11px 13px; font-size:14px }
  .ol-item{ padding:10px 0 }
  .ol-item img{ width:52px; height:52px }
  .ol-item .oi-t b{ font-size:13px }
  .sum-rows div{ font-size:13px }
  .sum-total b{ font-size:24px }
  /* 结算页底部固定提交按钮 */
  #submitBtn{
    position:fixed; left:12px; right:12px; bottom:calc(70px + env(safe-area-inset-bottom));
    z-index:130; margin:0; height:46px; box-shadow:0 10px 26px rgba(232,69,60,.32);
  }

  /* ---------- 订单 ---------- */
  .ord-tabs{
    flex-wrap:nowrap; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:4px; margin-bottom:13px; scrollbar-width:none;
  }
  .ord-tabs::-webkit-scrollbar{ display:none }
  .ord-tabs button{ flex-shrink:0; padding:7px 14px; font-size:12.5px }
  .order{ border-radius:13px }
  .order-h{ flex-wrap:wrap; gap:4px 12px; padding:11px 14px; font-size:12px }
  .order-h .ost{ margin-left:auto }
  .order-b{ padding:2px 14px 12px }
  .order-goods{ padding:10px 0; gap:11px }
  .order-goods img{ width:56px; height:56px; border-radius:9px }
  .og-t b{ font-size:13px; white-space:normal; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical }
  .order-f{ flex-wrap:wrap; gap:8px; padding:11px 14px; justify-content:flex-start }
  .order-f .of-t{ margin-right:0; width:100%; font-size:12.5px }
  .order-f .of-t b{ font-size:16px }
  .tl-node{ font-size:12.5px; gap:10px }

  /* ---------- 门店 ---------- */
  .store-grid{ grid-template-columns:1fr; gap:10px }
  .store{ padding:14px; border-radius:13px }
  .store b{ font-size:14.5px }
  .store p{ font-size:12.5px }

  /* ---------- 客服 ---------- */
  .cs-layout{ grid-template-columns:1fr; gap:14px }
  .chat{ aspect-ratio:9/16;width:100%;max-width:420px;margin:0 auto;min-height:360px;border-radius:13px }
  .chat-h{ padding:13px 15px; font-size:14px }
  .chat-body{ padding:14px; gap:10px }
  .msg{ max-width:84%; font-size:13px; padding:10px 13px }
  .chat-quick{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:10px 14px; scrollbar-width:none;
  }
  .chat-quick::-webkit-scrollbar{ display:none }
  .chat-quick .btn{ flex-shrink:0 }
  .chat-in{ padding:11px 14px; gap:8px }
  .chat-in input{ padding:10px 14px; font-size:14px }

  /* ---------- 我的 / 登录 ---------- */
  .mine-top{
    flex-direction:column; align-items:stretch; text-align:left;
    gap:12px; padding:18px; border-radius:14px;
  }
  .avatar{ width:52px; height:52px; font-size:22px }
  .mine-top .mt-t h2{ font-size:18px }
  .mine-top .mt-t p{ font-size:12.5px }
  .mine-top .mt-r{
    margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center;
    padding:12px 0; border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18);
  }
  .mine-top .mt-r div b{ font-size:19px }
  .mine-top .mt-r div span{ font-size:11.5px }
  .mine-top .btn{ margin-left:0 !important; width:100% }
  .stat-grid,.menu-grid{ grid-template-columns:1fr 1fr; gap:10px }
  .stat{ padding:14px; border-radius:13px }
  .stat span{ font-size:12px }
  .stat b{ font-size:21px }
  .menu-grid .mi{ padding:13px; gap:9px; border-radius:13px }
  .menu-grid .mi em{ font-size:18px }
  .menu-grid .mi b{ font-size:13px }
  .inner-box{ flex-direction:column; align-items:stretch; gap:12px; padding:16px; border-radius:13px }
  .inner-box .ib-ic{ font-size:22px }
  .inner-box .ib-t b{ font-size:14.5px }
  .code-input{ width:100% }
  .code-input input{ flex:1; width:auto; min-width:0 }
  .login-wrap{ margin:22px auto 38px; padding:26px 20px; border-radius:16px }
  .login-wrap h1{ font-size:20px }
  .login-wrap .lg-sub{ font-size:12.5px; margin:5px 0 20px }
  .code-row button{ width:104px; font-size:12.5px }

  /* ---------- 抽屉 / 弹窗 / toast ---------- */
  .drawer{ width:100%; max-width:100% }
  .drawer-h{ padding:15px 16px }
  .drawer-b{ padding:12px 16px }
  .drawer-f{ padding:14px 16px calc(14px + env(safe-area-inset-bottom)) }
  .dc-item img{ width:60px; height:60px }
  .modal{ padding:14px }
  .modal-card{ width:100%; max-height:88vh; border-radius:14px }
  .modal-h{ padding:14px 16px }
  .modal-b{ padding:16px }
  .modal-f{ padding:12px 16px }
  .toast{ top:64px; padding:10px 18px; font-size:13px; max-width:86vw }

  /* ---------- 页脚 ---------- */
  .foot{ margin-top:26px; padding:26px 0 0; font-size:12.5px }
  .foot-top{ grid-template-columns:1fr 1fr; gap:18px 16px; padding-bottom:22px }
  .foot-top>div:first-child{ grid-column:1/-1 }
  .foot h4{ font-size:14px; margin-bottom:10px }
  .foot-hot b{ font-size:19px }
  .foot-bot{ padding:13px 0; font-size:12px }
  .foot-brand{ gap:8px; margin-bottom:9px; flex-wrap:wrap; align-items:center }
  .foot-brand img{ height:19px; width:auto; max-width:126px }
  .foot-brand b{ font-size:13.5px; letter-spacing:.2px; line-height:1.25 }
  .foot p{ font-size:12px; line-height:1.62 }

  /* ---------- 底部导航开启 ---------- */
  .tabbar{ display:flex }
  body.no-tab .tabbar{ display:none }
}

@media (max-width:400px){
  .wrap{ width:calc(100% - 20px) }
  .brand-t{ font-size:15px }
  .hero{ height:182px }
  .hero-txt h2{ font-size:19px }
  .p-price b{ font-size:16px }
  .cat-grid{ gap:7px }
  .suite{ height:118px }
  .mine-top .mt-r div b{ font-size:17px }
  .chat{ aspect-ratio:9/16;width:100%;max-width:420px;margin:0 auto;min-height:320px }
}


/* ---------- 客服对话窗口（用户 ↔ 后台管理员）---------- */
.chat-state{ margin-left:auto; font-size:11.5px; font-weight:600; color:var(--green) }
.chat-state.off{ color:var(--muted) }
.chat-h{ flex-wrap:wrap; row-gap:4px }
.msg-who{ display:block; font-size:11px; font-weight:600; color:var(--blue); margin-bottom:3px }
.msg.me .msg-who{ display:none }
.msg-time{ display:block; font-size:10.5px; color:var(--muted); margin-top:4px; opacity:.85 }
.msg.me .msg-time{ color:rgba(255,255,255,.75) }
.chat-hint{ font-size:11.5px; color:var(--muted); text-align:center; padding:2px 0 }
.chat-tip{ background:var(--blue-l); border-radius:10px; padding:9px 12px; font-size:12px; color:var(--blue-d); line-height:1.65; margin-bottom:12px }

/* ===== 内购价解锁：提示盒 + 转发遮罩 ===== */
.ig-box{ background:#FFF9EE; border:1px solid #F1E2C6; border-radius:12px;
  padding:12px 14px; margin:14px 0; }
.ig-box .ig-t{ font-size:14px; font-weight:700; color:#8A6A1C }
.ig-box .ig-s{ font-size:12.5px; color:#96794A; margin:5px 0 10px; line-height:1.6 }
.ig-box .ig-s b{ color:#8A6A1C }
.modal-b{ padding:18px 24px }
.sf-tip{ font-size:13px; color:var(--muted); margin:0 0 12px; line-height:1.6 }
.sf-tip b{ color:var(--blue) }
.sf-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px }
.sf-row{ display:flex; align-items:center; gap:10px; border:1px solid var(--line);
  border-radius:10px; padding:9px 12px }
.sf-av{ width:30px; height:30px; border-radius:50%; background:var(--blue-l); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none }
.sf-nm{ flex:1; font-size:13.5px }
@media (max-width:768px){
  .ig-box{ padding:11px 12px; margin:12px 0 }
  .modal-b{ padding:14px 16px }
}

/* ==========================================================================
 * 商品宣传页（商品详情）：滚播图 → 产品介绍 → 产品参数 → 安装尺寸图
 * 设计口径：以「手机打开网页」的尺寸为准（390px 视口优先），桌面端居中收窄到 900px
 * 素材全部为老板电器官网外链，按官网顺序原样排布
 * ========================================================================== */
.pd{width:100%;max-width:900px;margin:0 auto;padding:0 12px 24px}
@media (min-width:769px){ .pd{max-width:980px;padding:16px 0 30px} }

/* ---------- ① 滚播图（官网 1500×985，约 1.52:1） ---------- */
.pd-hero{position:relative;background:#F1F5FA;border-radius:var(--radius);overflow:hidden}
.pd-track{position:relative;aspect-ratio:1500/985}
.pd-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.pd-slide.on{opacity:1;pointer-events:auto}
.pd-slide img{width:100%;height:100%;object-fit:contain}
.pd-vbox{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#0B1A2B;cursor:pointer}
.pd-vbox img{width:100%;height:100%;object-fit:contain;opacity:.5}
.pd-vbox video{width:100%;height:100%;object-fit:contain;background:#000}
.pd-play{position:absolute;width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.94);
  color:var(--blue);font-style:normal;font-size:22px;display:flex;align-items:center;justify-content:center;
  padding-left:5px;box-shadow:0 8px 26px rgba(0,0,0,.35)}
.pd-play-t{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#fff;font-size:12.5px;letter-spacing:.5px}
.pd-ar{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(8,52,92,.22)}
.pd-ar.l{left:10px} .pd-ar.r{right:10px}
.pd-dots{position:absolute;left:0;right:0;bottom:12px;z-index:3;display:flex;gap:6px;justify-content:center}
.pd-dots i{width:18px;height:3px;border-radius:2px;background:rgba(8,32,56,.22);cursor:pointer;transition:.2s}
.pd-dots i.on{background:var(--blue);width:26px}
.pd-count{position:absolute;right:10px;top:10px;z-index:3;background:rgba(8,32,56,.5);color:#fff;
  font-size:11.5px;padding:2px 9px;border-radius:20px;letter-spacing:.5px}
.pd-count b{font-weight:700}

/* ---------- 标题 / 价格 / 卖点 / 购买 ---------- */
.pd-info{padding:14px 2px 0}
.pd-info .crumb{padding:0 0 10px;font-size:12px}
.pd-title{font-size:20px;line-height:1.35}
.pd-subsidy-badge{display:inline-block;vertical-align:5px;margin-left:9px;padding:2px 9px;border:1.5px solid var(--red);border-radius:6px;color:var(--red);font-size:13px;font-weight:700;letter-spacing:1px;line-height:1.5}
.pd-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;font-size:12.5px;color:var(--muted)}
.pd-slogan{margin-top:9px;font-size:13.5px;color:var(--blue-d);background:var(--blue-l);
  border-radius:10px;padding:9px 12px;line-height:1.6}
.pd-info .price-box{margin:14px 0 0}
.pd-info .ig-box{margin:14px 0 0}
.pd-info .buy-row{margin:16px 0 0}
.buy-lb{font-size:13.5px;color:var(--muted)}
.buy-tip{font-size:12.5px;color:var(--muted)}
.pd-info .buy-btns{margin-top:14px}
.pd-points{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.pd-points span{font-size:12px;color:var(--blue-d);background:var(--blue-l);border:1px solid #D6E7F4;
  border-radius:20px;padding:4px 11px;line-height:1.5}
.pd-notes{margin-top:14px;display:grid;gap:5px;font-size:12.5px;color:var(--muted)}
.pd-notes li::before{content:'· ';color:var(--blue)}
.pd-notes b{color:var(--ink-2)}
.pd-src{margin-top:10px;font-size:11.5px;color:#A9B4C1}
.pd-src a{color:var(--blue);text-decoration:underline}

/* ---------- ②③④ 内容分段卡片 ---------- */
.pd-sec{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  margin-top:14px;padding:14px 14px 16px}
.pd-h{font-size:17px;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.pd-h i{font-style:normal;width:21px;height:21px;border-radius:7px;background:var(--blue);color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pd-pics{display:block}
.pd-pics img{width:100%;height:auto;display:block;border-radius:8px;margin-bottom:8px;background:#F1F5FA}
.pd-pics img:last-child{margin-bottom:0}
.pd-install{display:grid;grid-template-columns:1fr;gap:8px}
.pd-install img{margin-bottom:0}
@media (min-width:600px){ .pd-install{grid-template-columns:1fr 1fr} }
.pd-params{width:100%;border-collapse:collapse;font-size:13px}
.pd-params th,.pd-params td{padding:8px 10px;border:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.55}
.pd-params th{background:#F8FAFD;color:var(--muted);font-weight:600;width:42%}
.pd-hint{margin-top:11px;font-size:12px;color:var(--muted);line-height:1.7}
.pd-serv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.pd-serv>div{background:#F8FAFD;border:1px solid var(--line);border-radius:10px;padding:11px 12px}
.pd-serv em{font-style:normal;font-size:17px;line-height:1}
.pd-serv b{display:block;font-size:13px;margin:5px 0 2px}
.pd-serv span{font-size:11.5px;color:var(--muted);line-height:1.5}
.pd-rel{margin-top:22px}

/* 首页保障条 / hero 轮播：整块可点 */
.assure>div{cursor:pointer;transition:background .15s}
.assure>div:hover{background:#F8FAFD}
.hero-slide{cursor:pointer}
@media (max-width:768px){
  .pd{padding:0 12px 18px}
  .pd-title{font-size:18.5px}
  .pd-h{font-size:15.5px}
  .pd-sec{padding:12px 12px 14px;border-radius:13px;margin-top:12px}
  .pd-hero{border-radius:13px}
  .pd-ar{width:32px;height:32px;font-size:17px}
  .pd-play{width:54px;height:54px;font-size:19px}
  .pd-serv{grid-template-columns:1fr 1fr;gap:8px}
  .pd-serv>div{padding:10px}
  .pd-params{font-size:12.5px}
  .pd-params th,.pd-params td{padding:7px 9px}
  .pd-params th{width:44%}
  .pd-points span{font-size:11.5px;padding:3px 10px}
  .pd-notes{font-size:12px}
}
@media (max-width:400px){
  .pd{padding:0 10px 16px}
  .pd-title{font-size:17.5px}
  .pd-serv{grid-template-columns:1fr}
}

/* ---------- 分享 / 微信转发 ---------- */
.pd-share{display:flex;gap:10px;margin:15px 0 6px}
.pd-share .btn{flex:1 1 0;min-width:0;font-size:13px;padding:10px 6px;white-space:nowrap}
/* 微信内置浏览器里的「点右上角转发」引导（微信不允许网页调用分享接口，只能这样引导） */
#wxask{position:fixed;inset:0;z-index:9998;background:rgba(4,14,28,.78);animation:wxfade .18s ease}
#wxask .wxask-bd{position:absolute;top:14px;right:16px;left:16px;background:#12263F;color:#fff;border-radius:14px;padding:18px 18px 16px;box-shadow:0 12px 34px rgba(0,0,0,.45)}
#wxask .wxask-bd b{display:block;font-size:16px;margin-bottom:8px}
#wxask .wxask-bd p{margin:0 0 14px;font-size:13.5px;line-height:1.8;color:#C7D6E6}
#wxask .wxask-bd p span{display:inline-block;background:#fff;color:#12263F;border-radius:6px;padding:1px 8px;font-weight:700;letter-spacing:1px}
#wxask .wxask-bd .btn{width:100%}
#wxask .wxask-ar{position:absolute;top:-10px;right:42px;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:11px solid #12263F}
@keyframes wxfade{from{opacity:0}to{opacity:1}}
@media (max-width:400px){.pd-share .btn{font-size:12.5px;padding:10px 4px}}

/* ==========================================================================
 * 本轮优化新增样式（2026-09-16）
 * 首页视频静音自动播放 + 开声 / 线下门店卡片 / 精简页脚 / 购物车转发提示 /
 * 我的页转发解锁机型 / 后台购物车列 / 客服购物车清单卡片
 * ========================================================================== */

/* ---------- 首屏视频（静音自动播放，可手动开声） ---------- */
.sec-video{ margin:18px 0 }
.vbox{ position:relative; border-radius:var(--radius); overflow:hidden; background:#0B1A2B }
.vbox video{ width:100%; display:block; background:#000 }
.vbox-auto{ aspect-ratio:16/9 }
.vbox-auto video{ width:100%; height:100%; object-fit:cover; cursor:pointer }

/* ---------- 线下门店卡片 ---------- */
.store-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px }
.store-card{ display:flex; flex-direction:column; gap:3px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-s); padding:14px 15px; transition:.18s; min-height:96px }
.store-card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); border-color:#D6E4F0 }
.store-ic{ font-size:20px; margin-bottom:2px }
.store-card b{ font-size:14px; color:var(--ink) }
.store-card span{ font-size:12px; color:var(--muted); line-height:1.5; overflow:hidden;
  text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.store-tel{ color:var(--blue) !important; font-weight:600 }
@media (max-width:768px){ .store-grid{ grid-template-columns:repeat(2,1fr); gap:10px } }

/* ---------- 精简页脚（仅版权；已删除原蓝紫色大底框） ---------- */
#ft{ background:#fff; border-top:1px solid var(--line) }
.foot-min{ text-align:center; color:var(--muted); font-size:12.5px; padding:22px 0; line-height:1.7 }

/* ---------- 客服页：企业微信二维码 ---------- */
.cs-qr .qr-box{ display:flex; justify-content:center; padding:8px 0 2px }
.cs-qr .qr-box img{ width:190px; height:190px; object-fit:cover; border-radius:12px; border:1px solid var(--line); background:#fff }
.cs-qr .qr-tip{ text-align:center; font-size:14px; font-weight:700; color:var(--ink); margin:12px 0 4px }
.cs-qr .qr-sub{ text-align:center; font-size:12px; color:var(--muted); margin:0; line-height:1.7 }

/* ---------- 购物车页：移除线上结算 + 转发提示 ---------- */
.cart-tip{ font-size:12.5px; color:var(--muted); background:var(--blue-l); border-radius:10px;
  padding:10px 13px; margin:0 0 12px; line-height:1.6 }
.cart-tip b{ color:var(--blue) }

/* ---------- 我的页：转发解锁机型模块 ---------- */
.unlock-box{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; background:
  linear-gradient(100deg,#FFF8EC,#FBF1DF); border:1px solid #EFDDB8; border-radius:var(--radius);
  padding:16px 18px; margin-top:14px }
.unlock-box .ib-ic{ font-size:24px }
.unlock-box .ib-t{ flex:1; min-width:200px }
.unlock-box .ib-t b{ display:block; font-size:15px; color:#8A6A1C; margin-bottom:3px }
.unlock-box .ib-t span{ font-size:12.5px; color:#9A804E; line-height:1.6 }
.ub-stat{ width:100%; font-size:13px; color:#7A5F2C; background:rgba(255,255,255,.6);
  border-radius:10px; padding:9px 13px }
.ub-stat b{ color:#8A6A1C; font-size:15px }

/* ---------- 后台用户表：购物车列 ---------- */
.cart-mini{ display:flex; flex-direction:column; gap:4px; max-width:220px }
.cm-i{ font-size:12px; color:var(--ink-2); background:#F4F8FC; border:1px solid var(--line);
  border-radius:7px; padding:3px 8px; line-height:1.4; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis }

/* ---------- 后台客服会话：购物车清单卡片 ---------- */
.cart-msg .cart-card{ background:#FFF8EC; border:1px solid #EFDDB8; border-radius:12px;
  padding:12px 14px; font-size:13px; color:#7A5F2C; line-height:1.75; white-space:normal;
  font-family:"SFMono-Regular",Consolas,"PingFang SC",monospace; max-width:640px }
.cart-msg .cmsg-w{ color:#B07A1E !important }
/* ---------- 前台 / 后台通用：购物车清单可点商品卡 ---------- */
.msg.cart-msg{ max-width:90% }
.msg.cart-msg .cart-card{ background:#FFFDF8; border:1px solid #F0E2C4; border-radius:14px;
  padding:10px 12px; color:#5A4A2E; line-height:1.5; white-space:normal; max-width:none; font-family:inherit }
.ccard-h{ font-size:12.5px; font-weight:600; color:#B07A1E; margin-bottom:6px }
.ccard{ display:flex; flex-direction:column; gap:6px }
.ccard-i{ display:flex; align-items:center; gap:10px; padding:6px; border-radius:10px;
  background:#fff; border:1px solid #F1E7D2; cursor:pointer }
.ccard-i:active{ background:#FBF4E6 }
.ccard-ph{ width:46px; height:46px; border-radius:8px; object-fit:contain; background:#fff;
  box-shadow:0 2px 6px rgba(8,52,92,.08); flex:0 0 auto }
.ccard-ph--n{ background:#F2F5F9 }
.ccard-mid{ flex:1 1 auto; min-width:0 }
.ccard-t{ font-size:13px; color:#22324A; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ccard-m{ font-size:11.5px; color:#8A9AAB }
.ccard-r{ flex:0 0 auto; text-align:right; min-width:64px }
.ccard-st{ font-size:12px; color:#8A9AAB }
.ccard-pr{ font-size:12px; color:#22324A }
.ccard-sum{ font-size:13px; font-weight:700; color:#C8992C }
.ccard-foot{ display:flex; justify-content:flex-end; gap:6px; padding-top:6px; margin-top:4px;
  border-top:1px dashed #EADBC0; font-size:13px; color:#5A4A2E }
.ccard-foot b{ color:#C8992C }
.mine-login-tip{padding:18px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);text-align:center;background:#fff;margin-top:14px}

/* ===== 需求#9 客服聊天框蓝色高对比主题 + 需求#2 图片消息 + 需求#7 购物车内购金框 ===== */
.chat-h{ background:var(--blue); color:#fff; border-bottom:none }
.chat-h i{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.35) }
.chat-state{ color:rgba(255,255,255,.9) }
.chat-state.off{ color:rgba(255,255,255,.65) }
.chat-body{ background:linear-gradient(180deg,#EAF2FB 0%,#F4F8FD 100%) }
.msg.bot{ background:#fff; border:1.5px solid #C9DDF2; color:#16263a; box-shadow:0 1px 2px rgba(0,60,140,.06) }
.msg.me{ background:var(--blue); color:#fff; box-shadow:0 2px 6px rgba(0,60,140,.25) }
.chat-quick{ background:#fff }
.chat-in{ background:#fff }
.chat-in input{ background:#F2F7FD; border:1.5px solid #C9DDF2 }
.chat-in input:focus{ border-color:var(--blue); background:#fff }
.chat-img-btn{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:1.5px solid #C9DDF2; background:#EAF2FB; font-size:18px; cursor:pointer; line-height:1 }
.chat-img-btn:hover{ background:var(--blue); }
.chat-img{ max-width:100%; border-radius:12px; display:block; border:1px solid #C9DDF2; margin-top:2px }
.img-msg{ max-width:80% }
.chat-img-save{ display:inline-block; margin-top:6px; font-size:12px; color:var(--blue); text-decoration:underline; font-weight:700 }
/* 购物车内购金框（需求#7） */
.cg-badge{ display:inline-block; margin-top:6px; padding:2px 9px; border-radius:20px; background:linear-gradient(135deg,#F6C860,#E0A53A); color:#5a3c00; font-weight:700; font-size:11.5px; box-shadow:0 1px 3px rgba(200,140,20,.4) }
.cg-bottom{ margin-top:5px; font-size:12px; color:#8a6a12 }
.cg-bottom b{ color:#c8851a; font-size:13.5px }
.cg-bottom i{ font-style:normal; color:#2f9e57; font-weight:700 }
.cp-old{ color:var(--muted); text-decoration:line-through; font-size:12px; margin-right:6px; font-weight:400 }
.cp-new{ color:#c8851a; font-weight:800; font-size:15px }
/* 转发给客服 · 醒目操作引导（需求#7） */
.cart-cta{ margin-top:16px; background:linear-gradient(135deg,#FFF7E6,#FFEFD0); border:1.5px solid #F0D49A; border-radius:14px; padding:16px 18px }
.cart-cta b{ display:block; font-size:15px; color:#9a6b12; margin-bottom:8px }
.cart-cta p{ font-size:13px; color:#6b5320; line-height:1.75; margin:0 0 14px }
.cart-cta p span{ color:#c8851a; font-weight:800; padding:0 2px }
.cart-cta .btn-gold{ box-shadow:0 4px 12px rgba(200,140,20,.35) }

/* ===== v16：内购专员页 / 购物车省钱汇总 / 国补标注 ===== */
.cs-qr-page{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.cs-cart{background:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.cs-cart h3{font-size:15px;margin:0 0 12px;color:var(--ink)}
.cs-ci{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed #eee}
.cs-ci-l b{font-size:14px}.cs-ci-l span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.cs-ci-r{text-align:right}.cs-ci-r span{font-size:12px;color:var(--muted);margin-right:8px}.cs-ci-r b{font-size:15px;color:var(--red)}
.cs-ct{display:flex;justify-content:space-between;font-size:15px;margin-top:12px;padding-top:10px;border-top:1px solid #eee}
.cs-ct b{color:var(--red)}.cs-ct.sub{color:var(--ink-2);font-size:13px}.cs-ct.sub b{color:var(--gold-d)}
.qr-card{background:#fff;border-radius:14px;padding:20px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.qr-img{width:220px;height:220px;margin:0 auto 12px;border:1px solid #eee;border-radius:10px;overflow:hidden;background:#fafafa}
.qr-img img{width:100%;height:100%;object-fit:contain}
.qr-tip{font-size:15px;font-weight:700;color:var(--blue)}
.qr-note{font-size:12.5px;color:var(--muted);line-height:1.7;margin-top:10px;text-align:left}
.cart-save{margin-top:12px;padding:10px 14px;background:#FFF7E6;border:1px solid var(--gold);border-radius:10px;color:#8a5a00;font-size:14px;text-align:center}
.cart-save b{color:var(--red);font-size:16px}
.cg-bottom{font-size:12px;color:var(--ink-2);margin-top:6px;line-height:1.8}
.cg-bottom b{color:var(--red)}.cg-bottom i{font-style:normal;color:var(--red);font-weight:700}

/* ===== v17：内购清单分享图（所选机器 + 手机号 + 内购口令）===== */
.adv-poster{margin-bottom:16px}
.adv-poster img{width:100%;border-radius:12px;border:1px solid var(--line);display:block;background:#f7f8fa;cursor:zoom-in}
.adv-poster-tip{font-size:12.5px;color:var(--muted);text-align:center;margin:8px 0 10px;line-height:1.6}
.adv-poster-tip b{color:var(--blue)}
.adv-id{display:flex;gap:10px;margin-bottom:14px}
.adv-id-r{flex:1;background:#f5f8fc;border:1px solid #e6edf5;border-radius:12px;padding:10px 12px}
.adv-id-r span{display:block;font-size:11.5px;color:#8a97a6;margin-bottom:3px}
.adv-id-r b{font-size:14px;color:#10365e;word-break:break-all}
.adv-poster .btn-gold{margin-top:2px}
/* 清单图全屏预览：微信内长按这张大图即可保存到相册 */
.poster-view{position:fixed;inset:0;z-index:400;background:#0a1a2b;display:flex;flex-direction:column;padding:14px}
.poster-view .pv-bar{display:flex;align-items:center;justify-content:space-between;color:#fff;padding:2px 2px 12px;flex:0 0 auto}
.poster-view .pv-bar b{font-size:14.5px}
.poster-view img{flex:1 1 auto;min-height:0;width:100%;object-fit:contain;border-radius:10px;-webkit-touch-callout:default}
body.pv-lock{overflow:hidden}

.icp-link{color:inherit;text-decoration:none;opacity:.85;margin-left:6px;white-space:nowrap}
.icp-link:hover{opacity:1;text-decoration:underline}