:root{
  --brand:#f4511e;
  --brand-dark:#d63d0c;
  --navy:#123a63;
  --navy-2:#0b2a4a;
  --navy-3:#1c5a94;
  --gold:#f0c463;
  --ink:#1f2329;
  --ink-2:#5b626b;
  --ink-3:#8d949d;
  --line:#e5e8eb;
  --bg:#f4f5f7;
  --card:#fff;
  --radius:10px;
  --shadow:0 1px 3px rgba(20,24,28,.06),0 6px 18px rgba(20,24,28,.05);
}
*{box-sizing:border-box;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px;}

/* ---------- ★ 顶部服务热线条（400 电话醒目） ---------- */
.hotline-bar{background:linear-gradient(90deg,#d63d0c,#f4511e);color:#fff;}
.hotline-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:38px;}
.hotline-slogan{font-size:12.5px;opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hotline-phone{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.hotline-phone .hotline-label{font-size:12px;opacity:.9;}
.hotline-phone strong{font-size:19px;font-weight:800;letter-spacing:.5px;}
/* ★ 2026-10-07: on mobile (≤760px) the topbar brand row is removed, so the logo moves here
   (far left of the announcement bar). Hidden on desktop — the topbar .brand already shows it. */
/* ★ 2026-10-15: white rounded backing for the mobile announcement-bar logo (option A).
   logo.png is a transparent-background navy+gold emblem; on the orange gradient bar the
   orange bleeds through its transparent gaps and the navy has no separating layer, so at
   22–26px it reads as an unreadable blob. The white plate gives orange → white → logo. */
.hotline-brand{
  display:none;align-items:center;flex:0 0 auto;
  background:#fff;border-radius:8px;padding:2px 4px;
  box-shadow:0 1px 2px rgba(15,23,32,.18);
}
.hb-logo{display:block;width:auto;max-width:none;}
@media(max-width:760px){.hotline-slogan{display:none;} .hotline-inner{justify-content:center;gap:10px;} .hotline-brand{display:inline-flex;} .hb-logo{height:26px;}}

/* ---------- 顶栏 ---------- */
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
/* ★ v1.61：--ctl-h = topbar control unified height (search / about / lang / account / cart).
   Previously each control sized itself with vertical padding -> 26.5 / 31 / 34.8 / 36.8 / 38px coexisted.
   Now one box height (`*{box-sizing:border-box}` is global, so borders are included); content centered by flex. */
.topbar-inner{display:flex;align-items:center;gap:24px;min-height:68px;padding:10px 0;--ctl-h:36px;}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.brand picture{display:block;line-height:0;}
.brand-logo{height:50px;width:auto;max-width:none;display:block;}
.brand-text{display:flex;flex-direction:column;line-height:1.28;}
.brand-mark{font-size:16.5px;font-weight:800;letter-spacing:.3px;color:var(--navy);}
.brand-sub{font-size:11.5px;color:var(--ink-3);}
@media(max-width:700px){.brand-text{display:none;} .brand-logo{height:42px;}}
/* 搜索区：输入行 + 热门搜索热词行（京东式） */
.search{flex:1;display:flex;flex-direction:column;gap:7px;max-width:560px;}
.search-row{display:flex;border:2px solid var(--brand);border-radius:8px;overflow:hidden;height:var(--ctl-h);}
/* input: height:100% + no vertical padding — a single-line input self-centers, so line-height cannot break the unified height */
.search-row input{flex:1;border:0;outline:0;padding:0 14px;font-size:14px;background:#fff;min-width:0;height:100%;}
.search-row button{border:0;background:var(--brand);color:#fff;padding:0 22px;font-size:14px;font-weight:600;white-space:nowrap;height:100%;}
.search-row button:hover{background:var(--brand-dark);}
.hotwords{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:12px;color:var(--ink-3);line-height:1.5;}
.hotwords .hw-label{color:var(--ink-3);opacity:.85;}
.hotwords a{color:var(--ink-2);transition:color .14s;}
.hotwords a:hover{color:var(--brand);}
@media(max-width:760px){.hotwords{display:none;} .search{max-width:none;}}
.topbar-right{display:flex;align-items:center;gap:16px;flex-shrink:0;}
/* 账号区：未登录 / 已登录两态 */
.acct{position:relative;flex-shrink:0;}
.acct-login{display:inline-flex;align-items:center;height:var(--ctl-h);border:1px solid var(--brand);background:#fff;color:var(--brand);border-radius:8px;padding:0 15px;font-size:13px;font-weight:700;white-space:nowrap;}
.acct-login:hover{background:var(--brand);color:#fff;}
.acct-on{position:relative;}
.acct-name{display:inline-flex;align-items:center;height:var(--ctl-h);gap:6px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:0 11px;font-size:13px;font-weight:600;color:var(--ink);max-width:170px;}
.acct-name:hover{border-color:var(--brand);color:var(--brand);}
.acct-name .an-ico{width:17px;height:17px;color:var(--brand);flex-shrink:0;}
.acct-name .an-ico svg{width:100%;height:100%;display:block;}
.acct-name .an-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-name .an-caret{font-size:10px;color:var(--ink-3);}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:216px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(11,42,74,.16);padding:6px;z-index:80;}
.acct-menu a,.acct-menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;border-radius:7px;font-size:13.5px;color:var(--ink-2);font-family:inherit;}
.acct-menu a:hover,.acct-menu button:hover{background:#f4f6f9;color:var(--brand);}
.acct-menu .am-head{padding:9px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:5px;display:flex;flex-direction:column;gap:3px;}
.acct-menu .am-head b{font-size:14px;color:var(--navy);}
.acct-menu .am-type{align-self:flex-start;font-size:11.5px;font-weight:700;color:var(--brand);background:#fff2ec;border-radius:5px;padding:1px 7px;}
.acct-menu .am-org{font-size:12px;color:var(--ink-3);} 
.cart-link{display:inline-flex;align-items:center;gap:4px;height:var(--ctl-h);background:var(--brand);color:#fff;padding:0 16px;border-radius:8px;font-weight:600;font-size:13px;white-space:nowrap;}
.cart-link b{background:rgba(255,255,255,.28);border-radius:9px;padding:1px 7px;margin-left:4px;font-size:12px;}
.guest-tip{background:#fff8e6;color:#8a6100;font-size:12px;padding:7px 14px;text-align:center;border-top:1px solid #f5e7bf;}
.guest-tip.hide{display:none;}
.guest-tip .gt-btn{border:0;background:none;padding:0;font:inherit;font-weight:700;color:#d63d0c;text-decoration:underline;text-underline-offset:2px;}

/* ---------- 分类导航 ----------
 * ★ v1.45：一行摆不下就自动换行（2~3 行），不再横向滚动。
 *   原因：品类增到 17 个后单行必然溢出，横向拖着看很别扭。
 *   做法：flex-wrap:wrap 取代 overflow-x:auto；行间隔 6px。 */
.catnav{background:#fff;border-bottom:1px solid var(--line);}
.catnav-inner{display:flex;flex-wrap:wrap;gap:6px;padding:10px 20px;max-width:1240px;margin:0 auto;align-content:center;}
.catnav a{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 14px;border-radius:16px;font-size:13px;color:var(--ink-2);
  white-space:nowrap;border:1px solid transparent;
}
.catnav a:hover{background:#f7f8fa;}
.catnav a.on{background:var(--brand);color:#fff;font-weight:600;}
.catnav a .n{opacity:.6;font-size:12px;margin-left:4px;}
/* 分类小图标（线性 SVG，随文字变色） */
.jc-ico{flex-shrink:0;vertical-align:-3px;opacity:.72;}
.catnav a .jc-ico{color:var(--ink-3);}
.catnav a:hover .jc-ico{color:var(--brand);opacity:1;}
.catnav a.on .jc-ico{color:#fff;opacity:1;}

/* ---------- 页面通用 ---------- */
main{padding:22px 0 60px;min-height:60vh;}
.page-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.page-head h2{margin:0;font-size:20px;}
.page-head .sub{color:var(--ink-3);font-size:13px;}

/* ---------- ★ v1.57：列表页排序条（综合 / 价格↑↓ / 名称 / 热度） ----------
 * 靠右对齐（margin-left:auto）；窄屏整行换到标题下方（见 @media 760px）。 */
.sortbar{margin-left:auto;align-self:center;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.sortbar .sort-label{color:var(--ink-3);font-size:13px;}
.sortbar .sortbtn{border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:6px;padding:5px 12px;font-size:13px;line-height:1.2;transition:border-color .14s,color .14s,background .14s;}
.sortbar .sortbtn:hover{border-color:var(--brand);color:var(--brand);}
.sortbar .sortbtn.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;}
.sortbar .sortbtn .sar{font-style:normal;margin-left:2px;font-size:11px;opacity:.9;}

/* ---------- 商品网格 ----------
 * ★ v1.54：改用弹性栅格（原 CSS Grid auto-fill）。
 *   原因：Grid 的轨道是「整列对齐」的 —— 最后一行不满时，空位必然留在最右端
 *   （用户反馈：列表页每一页、首页展示位的末行末尾都空一格）。
 *   做法：flex-wrap + justify-content:center —— 排满的行没有任何余量，居中不产生位移，
 *   与原来完全一致；只有「不满的最后一行」会整体居中，右端不再留空位。
 *   列数用断点写死为 --gc（不再 auto-fill），这样列表页「每页件数 = 列数 × 行数」
 *   才能保证每一页都正好排满。★ 改这里的断点必须同步改 app.js 的 listGridSize()。 */
.grid{display:flex;flex-wrap:wrap;gap:var(--gg,14px);justify-content:center;--gc:6;--gg:14px;}
.grid>.card{flex:0 0 calc((100% - (var(--gc) - 1) * var(--gg)) / var(--gc) - .4px);}
@media(max-width:1180px){.grid{--gc:5;}}
@media(max-width:980px){.grid{--gc:4;}}
.card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;cursor:pointer;}
.card:hover{transform:translateY(-3px);box-shadow:0 6px 22px rgba(20,24,28,.11);}
.card-link{display:flex;flex-direction:column;flex:1;min-height:0;color:inherit;}
.card-img{aspect-ratio:1/1;background:#fafbfc;position:relative;overflow:hidden;}
.card-img img{width:100%;height:100%;object-fit:contain;}
.card-img .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#c8cdd3;font-size:12px;background:#f7f8fa;}
.card-img .badge{position:absolute;left:8px;top:8px;background:rgba(31,35,41,.78);color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;}
.card-body{padding:10px 12px 0;display:flex;flex-direction:column;gap:6px;flex:1;}
.card-name{font-size:16.2px;line-height:1.45;height:47px;overflow:hidden;font-weight:600;}
.card-cat{font-size:13.8px;color:var(--ink-3);}
/* 价格行 + 快速加购按钮（v1.48）：按钮在价格行右端，卡片窄时自动落到第二行 */
.card-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;row-gap:7px;padding:8px 12px 14px;}
.card-price{display:flex;align-items:baseline;gap:6px;min-width:0;flex-wrap:wrap;}
.card-price .v{color:var(--brand);font-weight:800;font-size:20px;}
.card-price .v small{font-size:14px;font-weight:600;}
.card-price .suffix{font-size:11.5px;color:var(--ink-3);}
.card-price .lock{color:var(--ink-3);font-size:12.5px;font-weight:600;}
/* ★ 未登录看价引导（2026-10-07）：价格位不再是纯文字，而是可点击的「Sign in to view price」，
   点击打开注册/登录弹窗。放在 .lock 规则之后以便同权重时覆盖颜色/字重。 */
.card-price .lock-cta{border:0;background:none;padding:0;font-family:inherit;font-size:inherit;font-weight:700;
  color:var(--brand);cursor:pointer;text-decoration:underline;text-underline-offset:2px;
  white-space:normal;text-align:left;line-height:1.35;}
.card-price .lock-cta:hover{color:var(--brand-dark);}
.pick-lock.pick-cta{border:0;background:none;padding:0;font-family:inherit;font-size:inherit;font-weight:700;
  color:var(--brand);cursor:pointer;text-decoration:underline;text-underline-offset:2px;
  white-space:nowrap;text-align:right;}
.pick-lock.pick-cta:hover{color:var(--brand-dark);}
/* ★ 快速加购按钮：老客户不必进详情页 */
.card-cart{margin-left:auto;flex:none;border:0;border-radius:999px;background:var(--brand);color:#fff;
  font-size:12px;font-weight:600;line-height:1.2;padding:6px 12px;white-space:nowrap;
  transition:background .15s,transform .1s;}
.card-cart:hover{background:var(--brand-dark);}
.card-cart:active{transform:scale(.95);}
.range{display:flex;flex-direction:column;gap:6px;}

/* ---------- 首页「全部展品」区（v1.58：桌面每行 6 个 / 窄屏 4、3、2） ----------
 * ★ 首页件数与列数必须整除：db.homePicks() 固定抽 36 件（每品类 2 件 + 差额给件数最多的品类各 +1），
 *   36/6=6、36/4=9、36/3=12、36/2=18 都是整行；改列数或抽样件数时两者必须一起改，
 *   否则末行会留空（v1.27 的 9 列 × 44 件就是 44%9=8 → 末行空一格）。 */
body.home #listzone .grid{--gc:6;--gg:12px;}
body.home #listzone .card-body{padding:8px 9px 0;gap:4px;}
body.home #listzone .card-foot{padding:7px 9px 11px;gap:6px;row-gap:6px;}
body.home #listzone .card-cart{flex:0 0 100%;font-size:10.5px;padding:4px 9px;background:#fdece3;color:var(--brand-dark);font-weight:600;}
body.home #listzone .card-cart:hover{background:#f9d9c8;}
body.home #listzone .card-name{font-size:14.4px;line-height:1.42;height:41px;}
body.home #listzone .card-cat{font-size:12.6px;}
body.home #listzone .card-price .v{font-size:17px;}
body.home #listzone .card-price .suffix{font-size:10.5px;}
body.home #listzone .card-price .lock{font-size:11px;}
body.home #listzone .card-img .badge{font-size:10px;padding:1px 6px;left:6px;top:6px;}
/* 桌面 6 列；再窄依次 4、3、2 列，均能整除 36 件 */
@media(max-width:980px){body.home #listzone .grid{--gc:4;}}
@media(max-width:760px){body.home #listzone .grid{--gc:3;--gg:10px;}}
@media(max-width:430px){body.home #listzone .grid{--gc:2;}}

/* 查看全部展品（首页精选 → 全量列表页） */
.more-row{display:flex;justify-content:center;margin-top:24px;}
.more-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;color:#123a63;font-weight:700;font-size:14px;padding:11px 28px;border-radius:26px;box-shadow:var(--shadow);transition:background .15s,color .15s,border-color .15s;}
.more-btn:hover{background:#123a63;border-color:#123a63;color:#fff;}
.more-btn .ar{transition:transform .15s;}
.more-btn:hover .ar{transform:translateX(3px);}

/* ---------- 分页 ---------- */
.pager{display:flex;justify-content:center;gap:6px;margin-top:26px;}
.pager button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:7px 13px;font-size:13px;color:var(--ink-2);}
.pager button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;}
.pager button:disabled{opacity:.45;cursor:default;}

/* ---------- 详情页 ---------- */
/* ★ v1.53.7：轨道改用 minmax(0,1fr)，避免宽子元素（加购行）把 min-content 撑破容器 → 窄屏横向溢出 */
.detail{display:grid;grid-template-columns:460px minmax(0,1fr);gap:32px;align-items:start;}
@media(max-width:900px){.detail{grid-template-columns:minmax(0,1fr);}}

/* 左栏：图集 + 咨询留言 竖排（v1.32 把留言栏从页面底部移到图片下方，填满左栏空白） */
.detail-left{display:flex;flex-direction:column;gap:24px;min-width:0;}
.detail-left .sec-head{margin-bottom:14px;}
.detail-left .sec-head h2{font-size:19px;}
.detail-left .sec-head p{font-size:13px;line-height:1.7;}
.detail-left .qa-wrap{grid-template-columns:1fr;gap:16px;padding:18px;}
.detail-left .qa-list{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px;min-height:84px;}
.detail-left .qa-form textarea{min-height:84px;}
@media(max-width:900px){
  .detail-left{order:2;}
  .detail .info{order:1;}
  .detail-left .qa-wrap{padding:20px 22px;}
}
.gallery{background:#fff;border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);}
.gallery-main{aspect-ratio:1/1;background:#fafbfc;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.gallery-main img{width:100%;height:100%;object-fit:contain;}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px;}
.thumbs img{width:60px;height:60px;object-fit:contain;border:2px solid var(--line);border-radius:6px;background:#fff;flex-shrink:0;cursor:pointer;}
.thumbs img.on{border-color:var(--brand);}

.info{background:#fff;border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow);min-width:0;}
.info h1{margin:0 0 10px;font-size:23px;line-height:1.35;}
.info .crumbs{font-size:12.5px;color:var(--ink-3);margin-bottom:12px;}
.info .crumbs a{color:var(--ink-2);}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.tag{background:#f2f4f7;color:var(--ink-2);font-size:12px;padding:3px 10px;border-radius:12px;}

.pricebox{background:linear-gradient(180deg,#fff8f5,#fff);border:1px solid #ffe3d8;border-radius:8px;padding:16px 18px;margin-bottom:18px;}
.pricebox .row{display:flex;align-items:baseline;gap:10px;}
.pricebox .now{color:var(--brand);font-weight:800;font-size:35px;line-height:1.1;}
.pricebox .now small{font-size:18px;}
.pricebox .basis{font-size:12px;color:var(--ink-3);}
.pricebox .hint{font-size:12.5px;color:var(--ink-2);margin-top:6px;}
.pricebox .hint-tip{color:var(--brand-dark);font-weight:600;}
.pricebox .locked{font-size:15px;font-weight:700;color:var(--ink-2);}

.sec-title{font-size:13.5px;font-weight:700;margin:20px 0 10px;display:flex;align-items:center;gap:8px;}
.sec-title .must{color:var(--brand);font-weight:600;font-size:12px;}
.sec-title .pick{color:var(--ink-3);font-weight:400;font-size:12px;}

/* ---------- ★ 款式选择器（看图选款） ---------- */
.variants{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;max-height:340px;overflow-y:auto;padding:2px;}
.variants::-webkit-scrollbar{width:8px;}
.variants::-webkit-scrollbar-thumb{background:#d8dde3;border-radius:4px;}
.variant{border:2px solid var(--line);border-radius:8px;background:#fff;padding:5px;cursor:pointer;transition:border-color .12s,box-shadow .12s;text-align:left;}
.variant:hover{border-color:#f8b39b;}
.variant.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(244,81,30,.13);}
.variant-img{aspect-ratio:1/1;background:#fafbfc;border-radius:5px;overflow:hidden;position:relative;}
.variant-img img{width:100%;height:100%;object-fit:contain;}
.variant-img .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#c8cdd3;font-size:11px;background:#f7f8fa;}
.variant-img .tick{position:absolute;right:4px;bottom:4px;width:17px;height:17px;border-radius:50%;background:var(--brand);color:#fff;font-size:11px;display:none;align-items:center;justify-content:center;font-weight:700;}
.variant.on .variant-img .tick{display:flex;}
.variant-label{font-size:11px;color:var(--ink-2);margin-top:5px;line-height:1.35;height:30px;overflow:hidden;}
.variant.on .variant-label{color:var(--brand);font-weight:600;}

/* ---------- ★ 逐款式文案（v1.50）：功能概述 / 参考参数 / 展项评测随所选款式切换 ---------- */
.vtext-sub{font-size:12px;color:var(--ink-3);margin-top:10px;line-height:1.5;}
.vtext-sub b{color:var(--brand);font-weight:600;}
.vtext{font-size:13.5px;color:#3d444d;white-space:pre-wrap;line-height:1.72;}
/* 参考参数：规格块（浅底 + 左侧色条），长文自动换行 */
.vparam{font-size:13px;color:#3d444d;white-space:pre-wrap;line-height:1.7;
  background:#fafbfc;border:1px solid var(--line);border-left:3px solid #f8b39b;
  border-radius:7px;padding:12px 14px;}

/* ---------- 加购 ---------- */
/* ★ v1.53.7：加购行允许换行；数量器不可被压缩（否则内容被裁切、按钮文字折行） */
.buybar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:7px;overflow:hidden;flex:0 0 auto;}
.qty button{width:34px;height:38px;border:0;background:#fff;font-size:17px;color:var(--ink-2);}
.qty button:hover{background:#f7f8fa;}
.qty input{width:52px;height:38px;border:0;text-align:center;font-size:14px;outline:0;border-left:1px solid var(--line);border-right:1px solid var(--line);}
.btn-buy{border:0;border-radius:8px;padding:0 30px;height:44px;font-size:15px;font-weight:700;background:var(--brand);color:#fff;}
.btn-buy:hover:not(:disabled){background:var(--brand-dark);}
.btn-buy:disabled{background:#dfe3e8;color:#a8afb8;cursor:not-allowed;}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink-2);border-radius:8px;height:44px;padding:0 20px;font-size:14px;}
.notice{font-size:12.5px;color:#b26a00;background:#fff8e6;border-radius:6px;padding:9px 12px;margin-top:12px;}

/* ---------- 参数表 ---------- */
.spec{width:100%;border-collapse:collapse;font-size:13px;}
.spec th,.spec td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top;}
.spec th{background:#fafbfc;color:var(--ink-2);font-weight:600;width:120px;white-space:nowrap;}

/* ---------- 购物车 ---------- */
.cart-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.cart-table th{background:#fafbfc;color:var(--ink-2);font-size:13px;font-weight:600;padding:12px;text-align:left;border-bottom:1px solid var(--line);}
.cart-table td{padding:12px;border-bottom:1px solid #f2f4f7;vertical-align:middle;}
.cart-prod{display:flex;gap:12px;align-items:center;}
.cart-prod img,.cart-prod .ph{width:62px;height:62px;object-fit:contain;border-radius:6px;background:#fafbfc;border:1px solid var(--line);flex-shrink:0;}
.cart-prod .ph{display:flex;align-items:center;justify-content:center;color:#c8cdd3;font-size:11px;}
.cart-prod .pn{font-weight:600;font-size:13.5px;}
.cart-prod .pinfo{min-width:0;flex:1;}                 /* 防长款式名撑破左列 */
.cart-prod .pv{font-size:12px;color:var(--ink-3);margin-top:3px;}
/* ★ 购物车换款式（v1.51）：多款式展品的「款式」行改为下拉框，可在清单里直接切换 */
.pv.vrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.vlb{color:var(--ink-3);flex-shrink:0;}
.vsel{max-width:256px;min-width:0;padding:1px 4px;font:inherit;font-size:12px;line-height:1.6;
  color:var(--ink);background:#fff;border:1px solid #dfe3e8;border-radius:5px;cursor:pointer;}
.vsel:hover{border-color:var(--brand);}
.vsel:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px rgba(244,81,30,.12);}
.vtag{font-size:11px;color:#bcc2ca;flex-shrink:0;}
@media(max-width:780px){ .vsel{max-width:188px;} .vtag{display:none;} }
.money{color:var(--brand);font-weight:700;}
.btn-del{border:0;background:none;color:var(--ink-3);font-size:13px;}
.btn-del:hover{color:var(--brand);}
.cart-foot{display:flex;justify-content:flex-end;align-items:center;gap:18px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 24px;margin-top:14px;}
.cart-foot .tot{font-size:15px;}
.cart-foot .tot b{color:var(--brand);font-size:25px;font-weight:800;}
.btn-xls{border:0;border-radius:8px;height:44px;padding:0 24px;font-size:14.5px;font-weight:700;background:#1f2329;color:#fff;}
.btn-xls:hover:not(:disabled){background:#000;}
.btn-xls:disabled{background:#dfe3e8;color:#a8afb8;cursor:not-allowed;}
.btn-xls2{border:1px solid #1f2329;border-radius:8px;height:44px;padding:0 20px;font-size:14px;font-weight:700;background:#fff;color:#1f2329;white-space:nowrap;}
.btn-xls2:hover:not(:disabled){background:#f2f3f5;}
.btn-xls2:disabled{background:#dfe3e8;color:#a8afb8;cursor:not-allowed;}
/* 购物车按分类归类 */
.cat-row td{background:#f7f8fa;padding:10px 14px;border-bottom:2px solid var(--line);}
.cat-row .cat-name{font-weight:800;font-size:14px;color:var(--ink);}
.cat-row .cat-n{margin-left:10px;font-size:12px;color:var(--ink-3);font-weight:500;}
.empty{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:60px 20px;text-align:center;color:var(--ink-3);}
.empty .big{font-size:44px;margin-bottom:10px;}

/* ---------- 尾部 ---------- */
.foot{border-top:1px solid var(--line);background:#fff;padding:16px 0;margin-top:16px;}
.foot-contact{display:flex;gap:18px 26px;flex-wrap:wrap;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:8px;}
/* ★ v1.62：原来 .fc-left 是 flex:0 0 auto（基准=最宽行 max-content，且禁止收缩）→ 被 673px 的通栏标语撑满，
   而品牌行文字仅 281px（倒梯形）；右侧二维码卡组因此贴不到容器右边缘（1280 下右侧空 95px）。
   改为「可增长 + 可收缩」：左栏吸收剩余空间，二维码卡组始终贴右。 */
.fc-left{flex:1 1 380px;min-width:0;}
.fc-brand{font-size:14.5px;font-weight:800;color:var(--brand);}
/* 标语折两行（HTML 里已按逗号插 <br>），行宽约 350/300px，与品牌行（281px）不再悬殊。
   不用 text-wrap:balance —— 它会把词跨过 <br> 重新分配，破坏「按逗号断」的断点。 */
.fc-slogan{font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.6;max-width:430px;}
/* ★ v1.29：页脚 400 已删除（与上方 CTA 横幅的 400 距离过近、重复），勿再加回 */
.fc-web{font-size:12px;font-weight:400;color:var(--ink-2);margin-left:9px;}
.fc-regions{flex:1 1 460px;align-self:center;align-content:center;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:4px 18px;}
.fc-item{font-size:12px;line-height:1.45;color:var(--ink-2);white-space:nowrap;}
.fc-item .reg{display:inline-block;min-width:50px;margin-right:5px;color:var(--brand);font-weight:600;}
.fc-item b{color:var(--ink);font-weight:700;margin-right:5px;}
.foot-note{margin:0;font-size:12px;color:var(--ink-2);line-height:1.7;}
.foot-note .sep{margin:0 7px;color:#d8dde3;}
.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);background:rgba(31,35,41,.93);color:#fff;padding:11px 22px;border-radius:8px;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .2s,bottom .2s;z-index:99;}
.toast.on{opacity:1;bottom:52px;}
.loading{text-align:center;color:var(--ink-3);padding:40px;font-size:13px;}

/* ================================================================
   首页专属区块（Hero 轮播 / 数据条 / 服务 / 流程 / 案例墙 / 主题 / 优势 / CTA / 简介）
   图片素材均来自「整馆效果图」真实场馆，已转码为 WebP（assets/halls/）
   ================================================================ */

/* ---------- Hero 轮播 ---------- */
.hero{position:relative;border-radius:14px;overflow:hidden;background:var(--navy-2);box-shadow:0 10px 34px rgba(11,42,74,.22);}
.hero-track{position:relative;height:clamp(290px,38vw,430px);}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none;}
.hero-slide.on{opacity:1;pointer-events:auto;}
.hero-slide img{width:100%;height:100%;object-fit:cover;}
.hero-veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,20,38,.42) 0%,rgba(6,20,38,.16) 38%,rgba(6,20,38,0) 66%),linear-gradient(0deg,rgba(6,20,38,.68) 0%,rgba(6,20,38,.22) 34%,rgba(6,20,38,0) 60%);}
.hero-cap{
  position:absolute;inset:0;max-width:1240px;margin:0 auto;
  padding:0 40px 46px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:11px;color:#fff;
}
.hero-cap strong{font-size:clamp(20px,2.7vw,32px);font-weight:800;line-height:1.32;max-width:660px;text-shadow:0 2px 12px rgba(0,0,0,.55);}
.hero-cap em{font-style:normal;font-size:clamp(13px,1.2vw,15.5px);opacity:.94;max-width:620px;text-shadow:0 1px 8px rgba(0,0,0,.5);}
.hero-btn{
  margin-top:8px;display:inline-block;background:var(--brand);color:#fff;font-size:14px;font-weight:700;
  padding:11px 26px;border:0;border-radius:8px;box-shadow:0 6px 18px rgba(244,81,30,.34);transition:background .15s,transform .15s;
}
.hero-btn:hover{background:var(--brand-dark);transform:translateY(-1px);}
.hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(6,20,38,.34);color:#fff;font-size:24px;line-height:1;backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.hero-nav:hover{background:rgba(6,20,38,.58);}
.hero-nav.prev{left:14px;}
.hero-nav.next{right:14px;}
.hero-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:7px;}
.hero-dots i{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.42);cursor:pointer;transition:background .2s,width .2s;}
.hero-dots i.on{background:var(--gold);width:34px;}
@media(max-width:760px){.hero-nav{display:none;} .hero-cap{padding:0 20px 38px;} .hero{border-radius:10px;}}

/* ---------- 京东式顶部：左侧竖排分类菜单 + 右侧轮播海报 ---------- */
.jd-hero{display:grid;grid-template-columns:216px minmax(0,1fr);gap:14px;align-items:stretch;margin-top:18px;}
.jd-cats{
  background:#fff;border-radius:14px;box-shadow:var(--shadow);
  padding:8px 0;display:flex;flex-direction:column;overflow:hidden;
}
.jd-cats-head{
  font-size:13px;font-weight:800;color:var(--navy);letter-spacing:.5px;
  padding:6px 18px 10px;border-bottom:1px solid var(--line);margin-bottom:6px;
}
.jd-cat{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 18px;height:34px;font-size:13.5px;color:var(--ink-2);
  border-left:3px solid transparent;transition:background .14s,color .14s,border-color .14s;
}
.jd-cat .jc-name{display:flex;align-items:center;gap:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jd-cat .jc-ico{color:var(--ink-3);opacity:.8;}
.jd-cat:hover .jc-ico,.jd-cat.on .jc-ico{color:var(--brand);opacity:1;}
.jd-cat .jc-n{font-size:11.5px;color:var(--ink-3);flex-shrink:0;}
.jd-cat:hover{background:#fff4ef;color:var(--brand);border-left-color:var(--brand);}
.jd-cat:hover .jc-n{color:var(--brand);}
.jd-cat.on{background:#fff4ef;color:var(--brand);font-weight:700;border-left-color:var(--brand);}
.jd-banner{min-width:0;display:flex;}
.jd-banner .hero{flex:1;height:100%;}
.jd-banner .hero-track{height:100%;min-height:392px;}
/* 首页隐藏顶部横向分类条（分类已移到左侧竖排菜单）；小屏再恢复横向条 */
body.home .catnav{display:none;}
@media(max-width:900px){
  body.home .catnav{display:block;}
  .jd-hero{grid-template-columns:1fr;gap:12px;}
  .jd-cats{display:none;}
  .jd-banner .hero-track{min-height:300px;}
}
/* ★ 2026-10-07：mobile home also drops the top horizontal category bar
   (categories are reachable from the bottom nav "All Exhibits").
   Breakpoint = 760px, same as the collapsed top bar and .mobbar — the 761–900px
   band keeps the bar, otherwise neither the left rail (.jd-cats, hidden below 900px)
   nor the bottom nav exists there and there would be no way to browse categories. */
@media(max-width:760px){
  body.home .catnav{display:none;}
}

/* ---------- 数据条（深蓝 + 金，呼应 logo 配色） ---------- */
.stats{margin-top:14px;border-radius:12px;overflow:hidden;background:linear-gradient(100deg,#0b2a4a,#15497a 52%,#0b2a4a);}
.stat-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:22px 12px;}
.stat{text-align:center;color:#fff;border-right:1px solid rgba(255,255,255,.14);padding:2px 8px;}
.stat:last-child{border-right:0;}
.stat b{display:block;font-size:clamp(21px,2.5vw,29px);font-weight:800;color:var(--gold);letter-spacing:.5px;line-height:1.2;}
.stat b i{font-size:13px;font-style:normal;font-weight:600;margin-left:3px;color:#e6d5a8;}
.stat span{font-size:12.5px;opacity:.86;}
@media(max-width:700px){.stat-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 4px;} .stat:nth-child(2){border-right:0;}}

/* ---------- 通用区块标题 ---------- */
.sec{margin-top:46px;}
.sec-head{margin-bottom:20px;}
.sec-head h2{margin:0 0 8px;font-size:22px;color:var(--navy);position:relative;padding-left:14px;line-height:1.35;}
.sec-head h2::before{content:'';position:absolute;left:0;top:5px;bottom:4px;width:4px;border-radius:2px;background:linear-gradient(180deg,var(--navy-3),var(--brand));}
.sec-head p{margin:0;font-size:13.5px;color:var(--ink-2);padding-left:14px;max-width:920px;line-height:1.75;}

/* ---------- 服务能力 ---------- */
/* ★ v1.58：服务能力固定 3 列 —— 原 auto-fit/minmax(238px) 在介绍页内容宽 962px 下
   （floor((962+16)/(238+16))=3）只会排 3 列，4 张卡就变成「3+1」末行空两格。
   现按 6 项服务写死 3 列，天然 3×2 对齐；窄屏降 2 列（3 行）、手机 1 列，任一断点都无空位。 */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
@media(max-width:980px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:480px){.svc-grid{grid-template-columns:minmax(0,1fr);}}
.svc{background:#fff;border-radius:12px;padding:22px 22px 24px;box-shadow:var(--shadow);border-top:3px solid #eef1f4;transition:transform .16s,box-shadow .16s,border-top-color .16s;}
.svc:hover{transform:translateY(-3px);box-shadow:0 8px 26px rgba(18,58,99,.13);border-top-color:var(--brand);}
.svc-ico{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--navy),var(--navy-3));color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:13px;}
.svc-ico svg{width:25px;height:25px;}
.svc h3{margin:0 0 8px;font-size:15.5px;color:var(--navy);}
.svc p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.75;}

/* ---------- 服务流程 ---------- */
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.proc{position:relative;background:#fff;border-radius:12px;padding:20px 20px 22px;box-shadow:var(--shadow);border-left:3px solid var(--navy-3);}
.proc-n{font-size:26px;font-weight:800;color:#e3e9f0;letter-spacing:1px;line-height:1;}
.proc h3{margin:8px 0 8px;font-size:15px;color:var(--navy);}
.proc p{margin:0;font-size:12.8px;color:var(--ink-2);line-height:1.72;}
.proc-arrow{position:absolute;right:-11px;top:50%;transform:translateY(-50%);font-size:22px;color:#c3cfdb;font-weight:700;}
@media(max-width:900px){.proc-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .proc-arrow{display:none;}}
@media(max-width:520px){.proc-grid{grid-template-columns:minmax(0,1fr);}}

/* ---------- 展馆设计参考墙（CSS 瀑布流，保留各图原始比例） ---------- */
.case-grid{columns:4;column-gap:12px;}
.case-card{position:relative;break-inside:avoid;margin:0 0 12px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);background:#e9edf1;}
.case-card img{width:100%;display:block;transition:transform .45s ease;}
.case-card:hover img{transform:scale(1.05);}
.case-cap{
  position:absolute;inset:auto 0 0 0;padding:30px 13px 11px;
  background:linear-gradient(180deg,transparent,rgba(6,20,38,.88));color:#fff;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.case-cap b{font-size:13.5px;font-weight:700;}
.case-cap i{font-style:normal;font-size:11px;color:var(--gold);white-space:nowrap;background:rgba(255,255,255,.14);border-radius:9px;padding:2px 8px;}
@media(max-width:1000px){.case-grid{columns:3;}}
@media(max-width:700px){.case-grid{columns:2;}}

/* ---------- 联系科普猫（全国 6 大区域分公司 + 负责人微信，3 列 × 2 行） ---------- */
.ct-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.ct-card{
  min-width:0;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);
  border-radius:14px;padding:15px 13px 14px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:transform .3s ease,box-shadow .3s ease;
}
.ct-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(16,42,72,.15);}
.ct-region{
  font-size:15px;font-weight:700;letter-spacing:.3px;color:#c2410c;
  background:#fff4e8;border:1px solid #f6d8b8;border-radius:999px;padding:4px 15px;
}
.ct-qr{width:100%;background:#fff;border-radius:10px;overflow:hidden;}
.ct-qr img{width:100%;display:block;aspect-ratio:1/1;object-fit:contain;}
.ct-info{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;margin-top:-5%;}
.ct-branch{font-size:18px;font-weight:700;color:var(--navy);line-height:1.3;}
.ct-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3px 9px;line-height:1.3;}
.ct-person{font-style:normal;font-size:15px;color:var(--ink-3);}
.ct-tel{font-size:17px;font-weight:800;color:var(--brand-dark);letter-spacing:.2px;white-space:nowrap;text-decoration:none;}
.ct-tel:hover{text-decoration:underline;}
@media(max-width:640px){.ct-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.ct-card{padding:13px 11px 12px;}.ct-region{font-size:13.5px;padding:3px 13px;}.ct-branch{font-size:16px;}.ct-person{font-size:13.5px;}.ct-tel{font-size:15.5px;}}
@media(max-width:380px){.ct-grid{grid-template-columns:1fr;}}

/* ---------- 关注我们（五大平台二维码，统一白底方块） ---------- */
.follow-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;}
.follow-card{
  min-width:0;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--fc,var(--navy));
  border-radius:14px;padding:14px 12px 11px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:11px;
  transition:transform .3s ease,box-shadow .3s ease;
}
.follow-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(16,42,72,.15);}
.fc-qr{width:100%;background:#fff;border-radius:10px;overflow:hidden;}
/* height:auto 必需：img 带 width/height 属性时，属性会以零优先级声明 height:640px，会把图拉变形 */
.fc-qr img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:contain;}
.fc-meta{display:flex;align-items:center;gap:8px;width:100%;}
.fc-ico{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;background:var(--fc,var(--navy));
}
.fc-ico svg{display:block;}
.fc-txt{display:flex;flex-direction:column;min-width:0;line-height:1.32;}
.fc-txt b{font-size:13.5px;color:var(--navy);white-space:nowrap;}
.fc-txt i{font-style:normal;font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:1000px){.follow-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:640px){.follow-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}}

/* ---------- 主题方案 ---------- */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:14px;}
.theme-card{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:3/2;box-shadow:var(--shadow);background:#e9edf1;}
.theme-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.theme-card:hover img{transform:scale(1.07);}
.theme-cap{
  position:absolute;inset:auto 0 0 0;padding:28px 12px 10px;
  background:linear-gradient(180deg,transparent,rgba(6,20,38,.88));color:#fff;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.theme-cap b{font-size:14px;font-weight:700;}
.theme-cap i{font-style:normal;font-size:11.5px;color:var(--gold);white-space:nowrap;}

/* ---------- 源头厂家优势对比 ---------- */
.adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.adv-col{background:#fff;border-radius:12px;padding:20px 22px 22px;box-shadow:var(--shadow);}
.adv-col.ours{border-top:3px solid var(--brand);}
.adv-col.theirs{border-top:3px solid #cfd6dd;background:#fafbfc;}
.adv-head{font-size:14.5px;font-weight:800;margin-bottom:13px;padding-left:26px;position:relative;line-height:1.4;}
.adv-col.ours .adv-head{color:var(--navy);}
.adv-col.theirs .adv-head{color:var(--ink-2);}
.adv-head::before{position:absolute;left:0;top:1px;font-size:15px;font-weight:800;}
.adv-col.ours .adv-head::before{content:'✓';color:var(--brand);}
.adv-col.theirs .adv-head::before{content:'×';color:#aab3bc;}
.adv-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.adv-col li{font-size:13px;line-height:1.65;color:var(--ink-2);padding-left:18px;position:relative;}
.adv-col.ours li{color:#3d444d;}
.adv-col li::before{content:'';position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--navy-3);}
.adv-col.theirs li::before{background:#c3cbd3;}
@media(max-width:800px){.adv-grid{grid-template-columns:1fr;}}

/* ---------- CTA 横幅（暖奶油/浅金底 + 藏青标题 + 品牌橙按钮：取自 logo 配色，避免与 logo 撞色） ---------- */
.cta-band{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  background:linear-gradient(112deg,#fff9f0,#fdefd8 58%,#fbe3c4);
  border:1px solid #f2d8b4;
  border-radius:14px;padding:26px 32px;box-shadow:0 10px 30px rgba(176,120,44,.14);
}
.cta-brand{flex:0 0 auto;line-height:0;}
.cta-brand img{height:74px;width:auto;}
.cta-txt{flex:1 1 300px;min-width:240px;}
.cta-txt b{display:block;color:#0b2a4a;font-size:clamp(17px,1.8vw,21px);font-weight:800;margin-bottom:8px;line-height:1.4;}
.cta-txt span{color:#8a6a46;font-size:13.5px;line-height:1.7;}
.cta-act{flex:0 0 auto;}
.cta-phone{display:flex;flex-direction:column;align-items:center;gap:1px;background:linear-gradient(180deg,#f5791f,#d9450a);padding:12px 28px;border-radius:10px;color:#fff;box-shadow:0 6px 16px rgba(217,69,10,.32);transition:filter .15s,transform .15s;}
.cta-phone:hover{filter:brightness(1.16);transform:translateY(-2px);}
.cta-phone small{font-size:11.5px;opacity:.92;}
.cta-phone strong{font-size:24px;font-weight:800;letter-spacing:.6px;}
@media(max-width:760px){.cta-band{padding:22px 20px;} .cta-brand img{height:58px;}}

/* ---------- 首页底部简介（利于收录） ---------- */
.about{background:#fff;border-radius:12px;padding:26px 30px 28px;box-shadow:var(--shadow);}
.about h2{margin:0 0 14px;font-size:19px;color:var(--navy);}
.about p{margin:0 0 12px;font-size:13.2px;line-height:1.95;color:var(--ink-2);text-align:justify;}
.about p:last-child{margin-bottom:0;}
@media(max-width:700px){.about{padding:20px 18px;}}

/* ---------- 页脚备案信息 ---------- */
.foot-icp{margin:10px 0 0;font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.foot-icp a{color:var(--ink-2);border-bottom:1px dotted #c8cdd3;padding-bottom:1px;transition:color .15s,border-color .15s;}
.foot-icp a:hover{color:var(--brand);border-bottom-color:var(--brand);}
.foot-icp .sep{color:#d8dde3;}

/* ================================================================
   首页「活动专区」/ 中英文切换 / 弹窗 / 咨询留言 / 评价（预留）/ AI 导出
   ================================================================ */

/* ---------- 顶栏：介绍入口 + 中英文切换 ---------- */
/* 科普猫介绍（v1.28：价签式高亮入口，替代原重复的 400 电话位） */
.topbar-intro{display:inline-flex;align-items:center;height:var(--ctl-h);gap:5px;font-size:13px;font-weight:700;color:#a8480a;white-space:nowrap;
  padding:0 12px;border-radius:999px;
  background:linear-gradient(135deg,#fff8ea,#ffe6b8 58%,#ffd58c);
  border:1px solid #f2c983;box-shadow:0 1px 3px rgba(210,120,20,.16);
  transition:filter .15s,transform .15s,box-shadow .15s,color .15s;}
.topbar-intro .ti-ico{width:14px;height:14px;display:block;flex:0 0 auto;opacity:.9;}
.topbar-intro:hover{color:#8f3c05;filter:brightness(1.03);transform:translateY(-1px);box-shadow:0 5px 12px rgba(210,120,20,.24);}
@media(max-width:1080px){.topbar-intro{display:none;}}
.lang{display:inline-flex;align-items:center;height:var(--ctl-h);border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:12.5px;line-height:1;flex-shrink:0;}
.lang span,.lang a{padding:0 10px;height:100%;display:inline-flex;align-items:center;}
.lang span.on{background:var(--navy);color:#fff;font-weight:600;}
.lang a{color:var(--ink-2);}
.lang a:hover{background:#f2f4f7;color:var(--brand);}
@media(max-width:560px){.lang span{display:none;}}

/* ---------- 活动专区（京东式活动入口） ---------- */
.promo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.promo{position:relative;display:flex;flex-direction:column;gap:8px;border-radius:12px;padding:20px 20px 18px;color:#fff;overflow:hidden;box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s;min-height:160px;}
.promo:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(11,42,74,.24);}
.promo::after{content:'';position:absolute;right:-30px;bottom:-40px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.12);}
.promo b{font-size:16.5px;font-weight:800;line-height:1.4;position:relative;}
.promo i{font-style:normal;font-size:12.5px;opacity:.93;line-height:1.65;position:relative;}
.promo-tag{align-self:flex-start;background:rgba(255,255,255,.22);border-radius:10px;padding:2px 10px;font-size:11.5px;font-weight:600;letter-spacing:.3px;}
.promo-go{margin-top:auto;font-size:12.5px;font-weight:700;opacity:.96;}
.promo.p-hot{background:linear-gradient(135deg,#f4511e,#ff7a45);}
.promo.p-sale{background:linear-gradient(135deg,#c0392b,#e74c3c);}
.promo.p-vip{background:linear-gradient(135deg,#8a6d1f,#d4a72c);}
.promo.p-new{background:linear-gradient(135deg,#0b2a4a,#1c5a94);}
@media(max-width:980px){.promo-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.promo-grid{grid-template-columns:minmax(0,1fr);}}

/* ---------- 通用弹窗 ---------- */
#modal-root{position:fixed;inset:0;z-index:200;display:none;}
#modal-root.on{display:block;}
#modal-root .mask{position:absolute;inset:0;background:rgba(11,20,32,.55);}
#modal-root .dialog{
  position:relative;margin:9vh auto 0;width:min(560px,92vw);max-height:82vh;overflow-y:auto;
  background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.3);animation:dlgIn .18s ease;
}
@keyframes dlgIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.dlg-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);}
.dlg-head h3{margin:0;font-size:17px;color:var(--navy);}
.dlg-x{border:0;background:none;font-size:24px;line-height:1;color:var(--ink-3);padding:0 4px;}
.dlg-x:hover{color:var(--brand);}
.dlg-body{padding:20px 22px;}
.dlg-lead{margin:0 0 16px;font-size:13.5px;line-height:1.85;color:var(--ink-2);}
.dlg-note{margin-top:14px;font-size:12px;color:var(--ink-3);background:#f7f8fa;border-radius:8px;padding:10px 12px;line-height:1.7;}
.dlg-foot{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;padding:16px 22px;border-top:1px solid var(--line);}
.dlg-foot .btn-buy{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
.contact-list{display:flex;flex-direction:column;gap:8px;}
.cl-item{display:flex;align-items:center;gap:10px;background:#fafbfc;border:1px solid var(--line);border-radius:9px;padding:10px 14px;font-size:13.5px;transition:border-color .15s,background .15s;}
.cl-item:hover{border-color:var(--brand);background:#fff8f5;}
.cl-reg{flex:0 0 68px;color:var(--brand);font-weight:600;font-size:13px;}
.cl-item b{color:var(--ink);font-size:15px;letter-spacing:.3px;}
.cl-who{color:var(--ink-3);font-size:12.5px;margin-left:auto;}

/* ★ v1.54：卡片快速加购 · 多款式选择弹窗 */
.pick-loading{padding:26px 0;text-align:center;color:var(--ink-2);font-size:14px;}
.pick-tip{font-size:13px;line-height:1.75;color:var(--ink-2);margin-bottom:14px;}
.pick-tip b{color:var(--brand-dark);}
/* 内层限高 56vh：常见 5 个款式可一屏显示完，更多款式时仅列表区滚动（标题/按钮不动） */
.pick-list{display:flex;flex-direction:column;gap:10px;max-height:56vh;overflow-y:auto;padding:2px;}
.pick-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:#fff;transition:border-color .15s,box-shadow .15s;}
.pick-row:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(214,61,12,.09);}
.pick-img{width:60px;height:60px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:#f4f5f7;}
.pick-img.ph{display:flex;align-items:center;justify-content:center;color:#c2c9d1;font-size:12px;}
.pick-info{flex:1;min-width:0;}
.pick-label{font-size:14.5px;font-weight:700;color:var(--ink);}
.pick-size{font-size:12.5px;color:var(--ink-2);margin-top:4px;word-break:break-all;}
.pick-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:0 0 auto;}
.pick-price{font-size:18.6px;font-weight:800;color:var(--brand-dark);white-space:nowrap;}
.pick-lock{font-size:12px;color:var(--ink-3);white-space:nowrap;}
.pick-add{border:0;border-radius:8px;background:var(--brand);color:#fff;font-size:13px;font-weight:700;padding:7px 16px;cursor:pointer;transition:background .15s;}
.pick-add:hover{background:var(--brand-dark);}
@media(max-width:560px){
  .pick-img{width:52px;height:52px;}
  .pick-label{font-size:13.5px;}
  .pick-add{padding:6px 12px;}
}

/* ---------- 咨询留言 ---------- */
.qa-wrap{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:20px 22px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
@media(max-width:820px){.qa-wrap{grid-template-columns:1fr;}}
.qa-form{display:flex;flex-direction:column;gap:10px;}
.qa-fields{display:flex;gap:10px;flex-wrap:wrap;}
.qa-fields input{flex:1 1 160px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13.5px;outline:0;font-family:inherit;}
.qa-form textarea{border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13.5px;outline:0;min-height:92px;resize:vertical;font-family:inherit;line-height:1.7;}
.qa-fields input:focus,.qa-form textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(244,81,30,.1);}
.qa-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.qa-act .btn-buy{height:42px;padding:0 26px;font-size:14px;}
.qa-tip{font-size:12px;color:var(--ink-3);}
.qa-list{border-left:1px solid var(--line);padding-left:22px;min-height:120px;}
@media(max-width:820px){.qa-list{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:16px;}}
.qa-item{padding:12px 0;border-bottom:1px dashed var(--line);}
.qa-item:last-child{border-bottom:0;}
.qa-head{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink-3);margin-bottom:6px;}
.qa-head b{color:var(--navy);font-size:13px;}
.qa-body{font-size:13.5px;line-height:1.75;color:var(--ink-2);}
.qa-reply{margin-top:8px;background:#f6f9fc;border-left:3px solid var(--navy-3);border-radius:6px;padding:8px 12px;font-size:13px;color:var(--ink-2);line-height:1.7;}
.qa-reply b{color:var(--navy-3);}
.qa-empty{color:var(--ink-3);font-size:13px;padding:20px 0;text-align:center;}

/* ---------- 商品评价（预留，REVIEWS_ENABLED=false 时不渲染） ---------- */
.rv-summary{display:flex;gap:26px;align-items:center;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:20px 24px;flex-wrap:wrap;}
.rv-score{text-align:center;min-width:110px;}
.rv-score b{display:block;font-size:34px;color:var(--brand);font-weight:800;line-height:1.1;}
.rv-score span{font-size:12.5px;color:var(--ink-3);}
.rv-bars{flex:1;display:flex;flex-direction:column;gap:6px;min-width:200px;}
.rv-bar{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);}
.rv-bar i{flex:1;height:7px;background:#eef1f4;border-radius:4px;overflow:hidden;}
.rv-bar em{display:block;height:100%;background:var(--gold);}
.rv-empty{margin-top:14px;color:var(--ink-3);font-size:13px;text-align:center;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:24px;}

/* ---------- AI 导出方案 ---------- */
.ai-box{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:20px 22px;}
.ai-preview{margin:0 0 14px;background:#0b2a4a;color:#dbe6f2;border-radius:10px;padding:16px 18px;font-size:12.5px;line-height:1.8;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow-y:auto;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;}
.ai-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.btn-copy{border:0;border-radius:8px;height:40px;padding:0 22px;font-size:13.5px;font-weight:700;background:var(--navy);color:#fff;}
.btn-copy:hover{background:var(--navy-2);}
.ai-link{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:8px;border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink-2);background:#fff;}
.ai-link:hover{border-color:var(--brand);color:var(--brand);}
.ai-hint{margin-top:12px;font-size:12px;color:var(--ink-3);}

/* ---------- 购物车操作区 ---------- */
.cart-foot{justify-content:space-between;flex-wrap:wrap;}
.cart-acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.btn-ai{border:1px solid var(--navy);border-radius:8px;height:44px;padding:0 20px;font-size:14px;font-weight:700;background:#fff;color:var(--navy);}
.btn-ai:hover{background:#f2f7fc;}
.btn-submit{border:0;border-radius:8px;height:44px;padding:0 26px;font-size:14.5px;font-weight:700;background:var(--brand);color:#fff;}
.btn-submit:hover{background:var(--brand-dark);}

/* ---------- 介绍页 ---------- */
.about-head{margin-bottom:22px;}
/* ★ 自有产品商城 高亮徽标：金色系，与顶栏「科普猫介绍」价签风格呼应 */
.own-badge{
  display:inline-flex;align-items:center;gap:4px;
  margin-left:2px;padding:3px 11px;border-radius:999px;
  font-size:12.5px;font-weight:800;letter-spacing:.5px;
  color:#7a4600;
  background:linear-gradient(135deg,#fff3d6,#ffe1a6 58%,#ffd279);
  border:1px solid #f0c569;
  box-shadow:0 1px 3px rgba(180,120,0,.20);
  white-space:nowrap;
}
.own-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#e58a00;box-shadow:0 0 0 3px rgba(229,138,0,.18);}

/* ★ v1.29 About page: left vertical category rail (same as Home) + article body on the right;
   the rail is sticky (--sticky-top is written by app.js from the real top-bar height so it
   never slides under the sticky header).
   ★ 2026-10-07: ONLY the mobile view loses the category list — on small screens the rail is
   hidden and the top horizontal category bar is deliberately NOT restored (the bottom mobile
   nav already has "All exhibits"). Desktop keeps the left rail exactly as before. */
.about-layout{display:grid;grid-template-columns:216px minmax(0,1fr);gap:22px;align-items:start;}
.about-side{position:sticky;top:var(--sticky-top,104px);}
.about-body{min-width:0;}
/* Note: body class is `aboutPage` (NOT `about` — `.about` is the intro card style) */
body.aboutPage .catnav{display:none;}          /* desktop: categories live in the left rail */
@media(max-width:900px){
  /* ★ Mobile: intentionally NO "restore the category bar on small screens" rule here */
  .about-layout{grid-template-columns:1fr;gap:0;}
  .about-side{display:none;}
}
/* ★ 2026-10-07: the mobile "My account" page (/me) also hides the top horizontal category bar —
   the bottom mobile nav already offers "All exhibits", while on small screens the bar costs 6–8 rows
   and pushes the account card below the fold. **Mobile only; desktop is unchanged** (same rule as About).
   The body class is added by renderMe(). */
@media(max-width:900px){
  body.mePage .catnav{display:none;}
}
/* ★ 2026-10-07: the mobile "My List" page (/cart) also hides the top category bar — it is a task page
   and the bottom mobile nav already offers "All exhibits". **Mobile only; desktop unchanged**
   (same rule as About / My account). The body class is added by renderCart(). */
@media(max-width:900px){
  body.cartPage .catnav{display:none;}
}
/* ★ 2026-10-07：in-page anchor jumps (e.g. the top-bar WeChat link → the About page
   contact block) must leave room for the sticky top bar, otherwise the target heading
   ends up hidden underneath it and the jump looks like it "did not land".
   --sticky-top is written by app.js from the real top-bar height. */
#main [id]{scroll-margin-top:calc(var(--sticky-top,104px) + 4px);}

/* ================= 账号：登录 / 注册 ================= */
.hide{display:none !important;}
.btn-login-inline{border:0;border-radius:8px;height:38px;padding:0 18px;font-size:13.5px;font-weight:700;background:var(--brand);color:#fff;font-family:inherit;}
.btn-login-inline:hover{background:var(--brand-dark);}

.auth-tabs{display:flex;border-bottom:1px solid var(--line);padding:0 22px;}
.auth-tabs .at{border:0;background:none;padding:13px 4px;margin-right:24px;font-size:14px;font-weight:700;color:var(--ink-3);font-family:inherit;border-bottom:2.5px solid transparent;}
.auth-tabs .at.on{color:var(--brand);border-bottom-color:var(--brand);}
.auth-form{display:flex;flex-direction:column;gap:13px;}
.af-field{display:flex;flex-direction:column;gap:6px;}
.af-field>label{font-size:12.5px;font-weight:700;color:var(--ink-2);}
.af-field>input{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13.5px;font-family:inherit;outline:0;background:#fff;}
.af-field>input:focus,.af-inline input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(244,81,30,.1);}
.af-inline{display:flex;gap:8px;}
.af-inline input{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13.5px;font-family:inherit;outline:0;}
.af-code{flex-shrink:0;border:1px solid var(--brand);background:#fff;color:var(--brand);border-radius:8px;padding:0 13px;font-size:13px;font-weight:700;font-family:inherit;white-space:nowrap;}
.af-code:hover:not(:disabled){background:var(--brand);color:#fff;}
.af-code:disabled{opacity:.5;cursor:not-allowed;}
.af-types{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.af-type{position:relative;display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--line);border-radius:9px;padding:10px 10px 9px;cursor:pointer;background:#fff;}
.af-type input{position:absolute;opacity:0;pointer-events:none;}
.af-type .aft-name{font-size:13.5px;font-weight:700;color:var(--ink);display:flex;align-items:baseline;gap:4px;}
.af-type .aft-name b{font-size:12px;color:var(--brand);}
.af-type em{font-size:11px;color:var(--ink-3);font-style:normal;line-height:1.45;}
.af-type:has(input:checked),.af-type.on{border-color:var(--brand);background:#fff7f3;box-shadow:0 0 0 3px rgba(244,81,30,.08);}
.af-type:has(input:checked) .aft-name,.af-type.on .aft-name{color:var(--brand-dark);}
.af-aux{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.af-wx{border:1px dashed var(--line);background:#fafbfc;color:var(--ink-2);border-radius:8px;padding:8px 12px;font-size:12.5px;font-family:inherit;}
.af-wx:hover{border-color:#2aae67;color:#2aae67;}
.af-smshint{font-size:11.5px;color:#8a6100;background:#fff8e6;border-radius:6px;padding:5px 9px;line-height:1.5;}
.af-err{display:none;font-size:12.5px;color:#c0392b;background:#ffecec;border-radius:7px;padding:8px 11px;line-height:1.6;}
.af-err.on{display:block;}
.af-submit{width:100%;height:44px;}
.af-submit:disabled{opacity:.6;cursor:not-allowed;}
.af-note{margin:0;font-size:11.5px;color:var(--ink-3);line-height:1.7;}
.af-spam{margin:4px 0 0;padding:9px 11px;font-size:11.5px;color:#9a6b00;line-height:1.7;background:#fff8e6;border:1px solid #f3e2b3;border-radius:8px;}
.tip{font-size:11.5px;color:var(--ink-3);}

/* ================= 我的资料 ================= */
.me-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start;}
.me-card{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:22px 24px;}
.me-card h3{margin:0 0 12px;font-size:16px;color:var(--navy);}
.me-card p{margin:0 0 10px;font-size:13px;line-height:1.85;color:var(--ink-2);}
.me-hero{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:14px;}
.me-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#ff8a5c);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;flex-shrink:0;}
.me-name{display:block;font-size:18px;color:var(--navy);}
.me-type{display:inline-block;margin-top:4px;font-size:12px;font-weight:700;color:var(--brand);background:#fff2ec;border-radius:5px;padding:2px 9px;}
.me-rows{display:flex;flex-direction:column;}
.me-rows>div{display:flex;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px;}
.me-rows>div:last-child{border-bottom:0;}
.me-rows span{width:74px;flex-shrink:0;color:var(--ink-3);}
.me-rows b{color:var(--ink);font-weight:600;word-break:break-all;}
.me-rows i{font-style:normal;font-size:11.5px;border-radius:4px;padding:1px 6px;margin-left:6px;}
.me-ok{background:#e8f7ee;color:#1e8a4c;}
.me-warn{background:#fff8e6;color:#8a6100;}
.me-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.me-acts .btn-buy{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}

/* ================= 移动端（底部固定导航 + 小屏适配） ================= */
.mobbar{display:none;}

@media(max-width:760px){
  /* Topbar: on mobile only the search box remains (the brand row is removed — see below) */
  /* ★ v1.61：統一 42px（与原搜索框 42px 一致） */
  .topbar-inner{flex-wrap:wrap;gap:10px 12px;padding:9px 0;--ctl-h:42px;}
  .search{order:3;flex:1 1 100%;max-width:none;}
  /* ★ 2026-10-07: the whole topbar brand row (logo + About + lang + account + cart) is removed on
     mobile — it duplicated the bottom navigation. The logo moved to the announcement bar (.hotline-brand),
     "About" moved into the bottom navigation, and account / cart already have bottom-nav entries.
     **Desktop keeps this row exactly as before** (.brand and .topbar-right stay visible). */
  .brand,.topbar-right{display:none;}
  .guest-tip{font-size:11.5px;line-height:1.6;}

  /* 分类导航：多行换行（v1.45，原「横向滚动」已废弃） */
  .catnav-inner{flex-wrap:wrap;gap:6px;padding:9px 14px;}
  .catnav a{padding:5px 11px;font-size:12.5px;}

  /* 主体留出底部导航高度 */
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom));}
  .mobbar{
    /* ★ v1.53.6：minmax(0,1fr) 防止长文案（Sign in / Register）把轨道撑破、导致末项被挤出屏幕
       ★ 2026-10-07：4 → 5 columns — added "About" (moved out of the topbar, which is gone on mobile) */
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mb-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 0 6px;color:var(--ink-3);font-size:10.5px;position:relative;min-width:0;overflow:hidden;}
  .mb-item.on{color:var(--brand);}
  .mb-ico{position:relative;width:23px;height:23px;}
  .mb-ico svg{width:100%;height:100%;display:block;}
  .mb-badge{position:absolute;top:-4px;right:-9px;background:var(--brand);color:#fff;font-size:9.5px;line-height:1;border-radius:8px;padding:2px 4.5px;font-weight:700;}
  .mb-txt{line-height:1;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* 商品栅格：两列更贴合手机（★ v1.54 起列数由 --gc 控制，间距走 --gg；与 app.js listGridSize() 对应） */
  .grid{--gc:2;--gg:10px;}
  .card-body{padding:9px 10px 0;}
  .card-foot{padding:7px 10px 11px;}
  .card-name{font-size:15.6px;}

  /* 详情页 */
  .detail{gap:14px;}
  .page-head h2{font-size:19px;}
  /* ★ v1.57：排序条在小屏独占一行、靠左，避免与标题、件数挤在一行 */
  .sortbar{margin-left:0;width:100%;}
  /* ★ v1.53.7：加购行窄屏换行 —— 数量器保持完整；「加入购物车」与数量同排、
     「查看购物车」独占一行，按钮文字一律不折行 */
  .buybar{gap:10px;}
  .buybar .btn-buy{flex:1 1 auto;white-space:nowrap;padding:0 18px;}
  .buybar .btn-ghost{flex:1 1 100%;white-space:nowrap;}
  /* 选择款式标题：小屏让说明文字独立成行，避免挤在一行错行 */
  .sec-title{flex-wrap:wrap;}
  .sec-title .must{white-space:nowrap;}
  .sec-title .pick{flex:1 1 100%;}

  /* 弹窗全宽、表单更紧凑 */
  #modal-root .dialog{width:94vw;max-width:520px;max-height:88vh;}
  .dlg-head{padding:15px 16px;}
  .dlg-body{padding:16px;}
  .auth-tabs{padding:0 16px;}
  .af-types{grid-template-columns:minmax(0,1fr);gap:7px;}
  .af-type{flex-direction:row;align-items:baseline;gap:8px;padding:9px 11px;}
  .af-type em{display:none;}

  /* ★ 清单表格：手机端改为卡片式，单列纵向排布，彻底去掉左右滑动
     tr 用 grid 划分 商品信息/单价/数量/小计/删除 五个区，删除键固定在卡片右上角 */
  .cart-table{display:block;overflow:visible;white-space:normal;}
  .cart-table thead{display:none;}
  .cart-table tbody{display:block;}
  .cart-table tr.cat-row{display:block;margin:16px 0 10px;padding:8px 12px;
    background:#fafbfc;border:1px solid var(--line);border-radius:8px;}
  .cart-table tr.cat-row td{border:0;padding:0;}
  .cart-table tr.cat-row .cat-name{font-weight:700;font-size:14px;color:var(--ink);}
  .cart-table tr.cat-row .cat-n{margin-left:8px;color:var(--ink-3);font-size:12px;}
  .cart-table tr[data-vid]{
    display:grid;gap:8px 10px;align-items:center;
    grid-template-columns:1fr auto auto;
    grid-template-areas:"prod prod del" "price qty qty" "sub sub sub";
    background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:12px;margin-bottom:12px;box-shadow:var(--shadow);
  }
  .cart-table tr[data-vid] td{border:0;padding:0;vertical-align:middle;min-width:0;}
  .cart-table tr[data-vid] td:nth-child(1){grid-area:prod;}
  .cart-table tr[data-vid] td:nth-child(2){grid-area:price;}
  .cart-table tr[data-vid] td:nth-child(3){grid-area:qty;justify-self:end;}
  .cart-table tr[data-vid] td:nth-child(4){grid-area:sub;text-align:right;color:var(--brand);font-weight:700;}
  .cart-table tr[data-vid] td:nth-child(4)::before{content:"Subtotal ";color:var(--ink-3);font-weight:400;}
  .cart-table tr[data-vid] td:nth-child(5){grid-area:del;justify-self:end;align-self:start;}
  .cart-table tr[data-vid] td:nth-child(2)::before{content:"Unit price ";color:var(--ink-3);font-weight:400;}
  .cart-table tr[data-vid] .money{font-size:15px;}
  .cart-table tr[data-vid] .btn-del{border:1px solid var(--line);border-radius:6px;padding:4px 10px;color:var(--ink-3);font-size:12px;}
  .cart-table tr[data-vid] .btn-del:hover{color:var(--brand);border-color:var(--brand);}
  /* ★ v1.53.8：轨道改 minmax(0,1fr)（裸 1fr=minmax(auto,1fr) 会被长文案按钮撑破容器 → 横向溢出）；
     按钮一律 nowrap、收窄内边距与字号；超长时省略号兜底，杜绝文字折行跑出按钮 */
  .cart-foot{padding:16px 14px;flex-direction:column;align-items:stretch;gap:12px;}
  .cart-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:10px;min-width:0;width:100%;}
  .cart-acts .btn-xls2{grid-column:1 / -1;}
  .cart-acts .btn-submit{grid-column:1 / -1;}
  .cart-acts button{width:100%;min-width:0;white-space:nowrap;padding:0 10px;font-size:13px;overflow:hidden;text-overflow:ellipsis;}

  /* 我的资料：单列 */
  .me-grid{grid-template-columns:minmax(0,1fr);}
  .me-card{padding:18px 16px;}
  .me-rows>div{flex-direction:column;gap:2px;}
  .me-rows span{width:auto;}
  /* ★ v1.53.8：同 cart-acts，轨道 minmax(0,1fr) + 按钮不折行，防溢出 */
  .me-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0;width:100%;}
  .me-acts .btn-buy,.me-acts .btn-ghost{width:100%;min-width:0;white-space:nowrap;padding:0 10px;font-size:13px;overflow:hidden;text-overflow:ellipsis;}
  .acct-menu{right:-4px;min-width:196px;}

  /* 页脚：小屏进一步收紧 */
  .foot{padding:16px 0;margin-top:16px;}
  .foot-contact{gap:12px;padding-bottom:10px;margin-bottom:8px;}
  /* ★ v1.53.6：原来 .fc-left 是 flex:0 0 auto（禁止收缩）+ 标语不换行 → 宽 412px 撑破 360 屏，
     导致整页横向滚动、右侧内容（含登录入口）被挤出可视区。小屏改为可收缩 + 标语换行。 */
  .fc-left{flex:1 1 100%;min-width:0;}
  .fc-slogan{white-space:normal;max-width:none;}
  .fc-brand{font-size:14.5px;}
  .fc-web{margin-left:8px;}
  .fc-regions{flex:1 1 100%;gap:4px 16px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
  .fc-item{font-size:11.5px;white-space:normal;}
  .foot-note{font-size:11.5px;line-height:1.8;}

  /* 触摸目标 ≥ 44px */
  .hotline-phone strong{font-size:17px;}
  .search-row input{padding:0 12px;font-size:15px;}
  .search-row button{padding:0 18px;}
}

/* 更小屏：分类条再收紧一档（v1.45），换行后尽量少占竖向空间 */
@media(max-width:430px){
  .catnav-inner{gap:5px;padding:8px 12px;}
  .catnav a{padding:4px 10px;font-size:11.5px;gap:4px;}
  .catnav a .jc-ico{width:15px;height:15px;}
  .catnav a .n{font-size:10.5px;margin-left:2px;}
}

@media(max-width:380px){
  .acct-name .an-text{max-width:64px;}
  .card-name{font-size:15px;}
}

/* ---------- 首页特色能力条（v1.53） ---------- */
.feat-sec{margin-top:26px;}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.feat-card{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:20px 22px;border-top:3px solid var(--brand);display:flex;flex-direction:column;gap:8px;transition:transform .16s,box-shadow .16s;}
.feat-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(11,42,74,.14);}
.feat-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fdece3,#ffe0cf);color:var(--brand);}
.feat-card b{font-size:16px;color:var(--navy);font-weight:800;}
.feat-card p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.75;}
@media(max-width:1180px){.feat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.feat-grid{grid-template-columns:1fr;}}

/* ---------- 购物车云端同步状态提示（v1.55） ---------- */
.sync-tip{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.6;border-radius:10px;padding:9px 14px;margin:0 0 12px;}
.sync-tip .st-ico{font-size:14px;line-height:1;}
.sync-tip.ok{background:#eef7f0;border:1px solid #cfe8d6;color:#2f6b41;}
.sync-tip.warn{background:#fff8ed;border:1px solid #f3ddb8;color:#8a5a12;}
.st-login{border:0;background:none;padding:0;margin-left:2px;font-size:13px;font-weight:800;color:var(--brand);text-decoration:underline;cursor:pointer;font-family:inherit;}
@media(max-width:760px){.sync-tip{font-size:12.5px;padding:9px 12px;}}

/* ---------- 购物车特色提示条 + 一键 AI 方案（v1.53） ---------- */
.cart-feats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px;}
.cf-item{display:flex;align-items:center;gap:12px;background:#fdf6f1;border:1px solid #f6ddcd;border-radius:10px;padding:12px 16px;}
.cf-ico{flex:0 0 40px;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--brand);box-shadow:0 1px 4px rgba(244,81,30,.14);}
.cf-tx{display:flex;flex-direction:column;gap:2px;}
.cf-tx b{font-size:14px;color:var(--brand-dark);font-weight:800;}
.cf-tx span{font-size:12.5px;color:var(--ink-2);}
@media(max-width:760px){.cart-feats{grid-template-columns:1fr;}}

.btn-aigen{border:0;border-radius:8px;height:44px;padding:0 22px;font-size:14.5px;font-weight:800;background:linear-gradient(135deg,#f4511e,#ff7a45);color:#fff;white-space:nowrap;box-shadow:0 4px 14px rgba(244,81,30,.28);}
.btn-aigen:hover:not(:disabled){background:linear-gradient(135deg,#e0430f,#f4663a);}
.btn-aigen:disabled{background:#dfe3e8;color:#a8afb8;cursor:not-allowed;box-shadow:none;}

/* AI 方案弹窗 */
.dlg-proposal{width:min(760px,94vw);}
.ai-loading{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 10px;color:var(--ink-2);font-size:14px;text-align:center;}
.ai-loading-sub{font-size:12.5px;color:var(--ink-3);}
.spin{width:30px;height:30px;border-radius:50%;border:3px solid #f1d6c8;border-top-color:var(--brand);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.ai-err{background:#ffecec;color:#c0392b;border-radius:10px;padding:14px 16px;font-size:13.5px;line-height:1.7;}
.proposal{font-size:14px;color:var(--ink);line-height:1.85;}
.proposal h1{font-size:20px;color:var(--navy);border-bottom:2px solid var(--brand);padding-bottom:8px;margin:0 0 14px;}
.proposal h2{font-size:17px;color:var(--navy);margin:22px 0 8px;}
.proposal h3{font-size:15px;margin:16px 0 6px;}
.proposal h4{font-size:14px;margin:12px 0 4px;}
.proposal p{margin:8px 0;}
.proposal ul,.proposal ol{margin:8px 0;padding-left:22px;}
.proposal li{margin:4px 0;}
.proposal blockquote{margin:10px 0;padding:8px 14px;border-left:4px solid var(--brand);background:#fdf3ee;color:#5a4636;border-radius:0 8px 8px 0;}
.proposal hr{border:0;border-top:1px solid var(--line);margin:18px 0;}
.proposal strong{color:var(--navy);}
.proposal code{background:#f2f3f5;border-radius:4px;padding:1px 5px;font-size:.9em;}
.ai-meta{margin-top:16px;font-size:12px;color:var(--ink-3);}

/* ================================================================
   ★ 微信（推荐联系方式）：页脚 / 联系页 / CTA / 弹窗（EN 站特有）
   ================================================================ */
.hl-wx{color:#1f9e57;font-weight:800;}

/* 页脚联系块：二维码 + 徽标（微信=绿，WhatsApp=品牌绿，用 --fcc 变量区分） */
.fc-wechat,.fc-whatsapp{--fcc:#2aae67;--fcc-soft:#f5fbf7;--fcc-line:#cfe8d6;
  flex:0 0 auto;align-self:center;display:flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;
  background:var(--fcc-soft);border:1px solid var(--fcc-line);border-radius:11px;text-decoration:none;
  transition:border-color .15s,box-shadow .15s,transform .15s;}
.fc-whatsapp{--fcc:#25d366;--fcc-soft:#f2fcf5;--fcc-line:#c6edda;}
.fc-wechat:hover,.fc-whatsapp:hover{border-color:var(--fcc);box-shadow:0 6px 16px rgba(42,174,103,.16);transform:translateY(-1px);}
.fc-wechat img,.fc-whatsapp img{flex:0 0 auto;width:76px;height:76px;max-width:none;object-fit:contain;
  border-radius:7px;display:block;background:#fff;}
.fcw-txt{display:flex;flex-direction:column;line-height:1.25;}
.fcw-txt em{font-style:normal;align-self:flex-start;font-size:10px;font-weight:700;color:#fff;background:var(--fcc);border-radius:999px;padding:2px 8px;margin-bottom:3px;letter-spacing:.3px;}
.fcw-txt b{font-size:14px;font-weight:800;color:var(--ink);}
.fcw-txt i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--fcc);}
/* 服务承诺小字行：补足左栏高度（约 93px）与二维码卡（92px）齐平，并给页脚联系区更多信息量 */
.fc-tags{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:7px;padding-top:7px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-2);line-height:1.45;}
/* 二维码卡组：两张卡永远作为一组换行，避免窄屏被拆到两行 */
.fc-qrs{flex:0 0 auto;display:flex;align-items:center;gap:12px;}
/* 中屏（≤860）：一排放不下「左栏 + 卡组」时，让左栏占满一行、卡组整体换行并仍贴右边缘 */
@media(max-width:860px){.fc-left{flex:1 1 100%;}.fc-qrs{flex:1 1 100%;justify-content:flex-end;}}
@media(max-width:760px){.fc-wechat,.fc-whatsapp{align-self:stretch;justify-content:center;}
  .fc-qrs{flex:1 1 100%;flex-wrap:wrap;gap:10px;justify-content:center;}
  .fc-tags{margin-top:6px;padding-top:6px;}}

/* 联系页卡：微信 / WhatsApp 双二维码卡（绿调强调 + 二维码） */
.ct-card-wx{border-top-color:#2aae67;}
.ct-card-wx .ct-branch{color:#1f9e57;}
.ct-card-wa{border-top-color:#25d366;}
.ct-card-wa .ct-branch{color:#128c46;}
.ct-badge{align-self:center;font-size:11.5px;font-weight:700;color:#fff;background:#2aae67;border-radius:999px;padding:3px 12px;letter-spacing:.3px;}
.ct-badge-wa{background:#25d366;}
.ct-qr-wx,.ct-qr-wa{max-width:210px;margin:0 auto;}
@media(max-width:640px){.ct-qr-wx,.ct-qr-wa{max-width:170px;}}
.ct-card:not(.ct-card-wx):not(.ct-card-wa){justify-content:center;}

/* CTA 微信按钮：绿调，与橙色 Email / WhatsApp 区分（纵向排列，宽度对齐） */
.cta-act{display:flex;flex-direction:column;gap:9px;}
.cta-phone.cta-wx{background:linear-gradient(180deg,#34c46f,#1f9e57);box-shadow:0 6px 16px rgba(31,158,87,.32);}
/* CTA 邮箱按钮下的联系人（Mr. Liu · International Sales Manager） */
.cta-phone .cta-person{display:block;font-style:normal;font-size:12px;line-height:1.35;opacity:.94;margin-top:3px;letter-spacing:.2px;}

/* 弹窗内微信条目高亮 */
.cl-item.cl-wx{border-color:#cfe8d6;background:#f5fbf7;}
.cl-item.cl-wx:hover{border-color:#2aae67;}
.cl-item.cl-wx .cl-reg{color:#1f9e57;}

/* ================================================================
   ★ 顶部条右上：微信（推荐联系方式）+ 悬停/聚焦弹出二维码（EN 站特有）
   底栏 .hotline-bar / .hotline-inner / .hotline-slogan / .hotline-label 复用 CN 站样式
   ================================================================ */
.hotline-wx{position:relative;display:inline-flex;align-items:center;white-space:nowrap;}
.hotline-wx-link{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;}
.hotline-wx-link .hotline-label{font-size:12px;opacity:.9;}
.hotline-wx-link .hotline-or{font-size:12px;opacity:.9;font-weight:600;}
.hotline-wx-link strong{font-size:19px;font-weight:800;letter-spacing:.5px;
  border-bottom:1px dashed rgba(255,255,255,.55);}
.hotline-wx-link:hover strong,.hotline-wx:focus-within .hotline-wx-link strong{border-bottom-style:solid;}
.hotline-wx-link:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px;}
/* 二维码浮层：右对齐到链接（顶部条链接贴右），窄屏收缩码尺寸，绝不溢出视口 */
.hotline-wx-pop{position:absolute;top:calc(100% + 9px);right:-4px;left:auto;z-index:70;
  /* width:max-content：绝对定位默认按 containing block 宽度收缩，会把两张码挤扁，
     这里强制按内容撑开并向左溢出（左边界无约束，不会跑出视口） */
  width:max-content;max-width:calc(100vw - 16px);
  padding:11px 11px 9px;
  background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;
  box-shadow:0 12px 28px rgba(20,30,40,.2);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-5px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;}
.hotline-qr-row{display:flex;flex-wrap:nowrap;gap:11px;align-items:flex-start;}
.hotline-qr{margin:0;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;}
/* ★ 必须 max-width:none + flex:0 0 auto：全局 img{max-width:100%} 一旦生效，
   固定 height 不变 → 二维码被横向压扁变形 */
.hotline-qr img{display:block;flex:0 0 auto;width:150px;height:150px;max-width:none;
  object-fit:contain;border-radius:6px;background:#fff;}
.hotline-qr figcaption{font-size:11.5px;font-weight:700;color:#5b6b7c;white-space:nowrap;}
.hotline-qr:first-child figcaption{color:#1f9e57;}
.hotline-qr:last-child figcaption{color:#128c46;}
.hotline-wx:hover .hotline-wx-pop,
.hotline-wx:focus-within .hotline-wx-pop{opacity:1;visibility:visible;transform:translateY(0);}
@media(max-width:560px){
  .hotline-qr img{width:116px;height:116px;}
  .hotline-qr figcaption{font-size:10.5px;}
  .hotline-qr-row{gap:8px;}
  .hotline-wx-pop{padding:9px 9px 7px;}
}
/* ★ 顶部条邮箱（2026-10-06，与微信并列；margin-left:auto 把「邮箱+微信」整组推到最右，
   正好抵消 .hotline-inner 的 justify-content:space-between）
   窄屏 ≤560px 隐藏：顶部条一行放不下三个入口，让位给主渠道微信（邮箱在 CTA / Contact 页仍可点） */
.hotline-mail{display:inline-flex;align-items:center;gap:7px;margin-left:auto;
  color:#fff;text-decoration:none;white-space:nowrap;}
.hotline-mail .hotline-label{font-size:12px;opacity:.9;}
.hotline-mail strong{font-size:13px;font-weight:700;letter-spacing:.2px;
  border-bottom:1px dashed rgba(255,255,255,.55);}
.hotline-mail:hover strong{border-bottom-style:solid;}
.hotline-mail:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px;}
@media(max-width:760px){.hotline-mail{margin-left:0;}}   /* ★ 2026-10-07：logo 进热线条后，「邮箱 + 微信」与 logo 一起居中（与中文站同口径） */
@media(max-width:560px){.hotline-mail{display:none;}}

/* ---------- 邮箱验证：注册后「去收邮件」弹层 / /verify 页 / 账号页状态 ---------- */
.verify-sent{text-align:center;padding:10px 4px 4px;}
.vs-ico{font-size:42px;line-height:1;margin-bottom:8px;}
.vs-title{font-size:14px;color:var(--muted,#7b8794);margin:6px 0 2px;}
.vs-email{font-size:16px;font-weight:800;color:var(--ink,#1f2933);margin:0 0 10px;word-break:break-all;}
.vs-tip{font-size:13px;color:var(--muted,#7b8794);line-height:1.6;margin:0 0 14px;}
.vs-resend{font-size:13px;color:var(--muted,#7b8794);}
.link-btn{background:none;border:none;color:#0f9d58;font-weight:700;font-size:13px;cursor:pointer;padding:2px 4px;text-decoration:underline;}
.link-btn:disabled{opacity:.6;cursor:default;}

.verify-box{max-width:480px;margin:30px auto;text-align:center;}
.vb-loading{font-size:15px;color:var(--muted,#7b8794);padding:30px 0;}
.vb-ok{padding:18px 10px;}
.vb-ok .vb-ico{width:64px;height:64px;border-radius:50%;background:#e6f7ee;color:#0f9d58;font-size:34px;line-height:64px;margin:0 auto 14px;}
.vb-ok h3{font-size:20px;margin:0 0 8px;color:var(--ink,#1f2933);}
.vb-ok p{font-size:14px;color:var(--muted,#7b8794);line-height:1.6;margin:0 auto 6px;max-width:360px;}
.vb-err{max-width:420px;margin:0 auto;background:#fff4f4;border:1px solid #f3c9c9;color:#c0392b;border-radius:10px;padding:18px 16px;font-size:14px;line-height:1.6;}

.me-warn{display:inline-block;font-style:normal;font-size:11px;font-weight:700;color:#fff;background:#e0a800;border-radius:999px;padding:2px 8px;margin-left:4px;letter-spacing:.3px;}
.me-ok{display:inline-block;font-style:normal;font-size:11px;font-weight:700;color:#fff;background:#0f9d58;border-radius:999px;padding:2px 8px;margin-left:4px;letter-spacing:.3px;}