/* ============================================================
   博之宇 BOZHIYU · 流体控制商城
   设计系统 v4 —— 商务工业高级 BUSINESS · INDUSTRIAL · PREMIUM
   浅色底 · 钢蓝主色 · 哑光银金属点缀 · 精密青辅助
   高级商务风：温润圆角 / 细线条 / 网格底纹 / 衬线大标题 / 等宽数字
   ============================================================ */

:root{
  /* 底层 —— 浅色商务高级（干净中性灰白） */
  --bg:#eef1f5;
  --surface:#ffffff;
  --surface-2:#f7f9fb;
  --surface-3:#eef2f6;

  /* 线条 —— 精密 */
  --line:#e7ebf1;
  --line-2:#d8dfe7;
  --line-3:#aeb8c4;

  /* 主色 —— 钢蓝（专业 · 稳重 · 工业权威） */
  --steel:#1b3556;
  --steel-2:#284b75;
  --steel-3:#3a6694;
  --steel-soft:rgba(27,53,86,.06);

  /* 强调 —— 哑光银（金属点缀 · 高级质感）
     注：沿用 --amber* 命名承载银色，全站强调金属统一为哑光银 */
  --amber:#6f7b88;
  --amber-2:#aab4bf;
  --amber-deep:#56616d;
  --amber-soft:rgba(140,151,163,.12);
  --amber-soft-2:rgba(140,151,163,.20);

  /* 哑光银体系（新增：按钮 / 金属面 / 高光） */
  --silver:#9aa6b2;
  --silver-2:#b9c2cc;
  --silver-3:#d3dae2;
  --silver-lt:#eef1f5;
  --silver-dk:#5d6772;
  --silver-grad:linear-gradient(145deg,#f5f7fa 0%,#d6dde4 50%,#b7c0cb 100%);
  --silver-grad-deep:linear-gradient(145deg,#9aa6b2 0%,#6c7884 100%);
  --silver-soft:rgba(140,151,163,.14);
  --silver-soft-2:rgba(140,151,163,.22);

  /* 辅色 —— 精密青（技术参数，降为辅助） */
  --cyan:#0f7c8a;
  --cyan-2:#1499aa;
  --cyan-soft:rgba(15,124,138,.08);

  /* 文本 —— 石墨 */
  --text-1:#141d2b;
  --text-2:#48566a;
  --text-3:#8492a3;

  /* 功能 */
  --success:#2f9e6e;
  --danger:#c9502f;
  --danger-2:#e0694a;

  /* v22：1360 → 1540。对齐云汉芯城等主流商城的版心宽度，
     1920 屏左右留白由 280px 收到 190px，中列 Banner 由 496px 拓到 ~676px。
     注意：改这里必须同步 .equip-deco 的 calc(50vw - 770px) 与 1720px 断点。 */
  --maxw:1540px;
  --pad-x:32px;

  /* 圆角 —— 商务高级：略放宽，更温润 */
  --r-xs:3px;
  --r-sm:5px;
  --r-md:6px;
  --r-lg:10px;
  --r-xl:14px;

  /* 等宽：价格/型号/规格数字对齐（系统优先，去掉 Web Font） */
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;
  /* 无衬线：正文/全局（对标京东·天猫·1688 系统字体栈，国内零白屏） */
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑',Arial,sans-serif;
  /* 衬线：仅少数标题装饰，回归系统宋体，避免 Web Font 慢加载 */
  --serif:Georgia,'Times New Roman','Songti SC','SimSun','宋体',serif;

  --shadow:0 1px 2px rgba(20,30,45,.04), 0 4px 14px rgba(20,30,45,.05);
  --shadow-md:0 2px 8px rgba(20,30,45,.06), 0 12px 30px rgba(20,30,45,.07);
  --shadow-hover:0 6px 14px rgba(20,30,45,.08), 0 22px 46px rgba(20,30,45,.10);
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:linear-gradient(180deg,#e7eef6 0%,#d9e3ef 58%,#cfdbe9 100%);color:var(--text-1);
  font-family:var(--sans);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font-family:inherit;color:inherit}
ul,ol{list-style:none;padding:0;margin:0}
h1,h2,h3,h4,p{margin:0}
strong,b{font-weight:700}
em,i{font-style:normal}
img,svg{display:block;max-width:100%}

/* 技术图纸网格底纹 + 四角大型几何装饰（填充周边空白） */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(30,58,95,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,58,95,.035) 1px, transparent 1px),
    radial-gradient(circle at 4% 2%,  rgba(27,53,86,.07), transparent 30%),
    radial-gradient(circle at 97% 8%, rgba(140,151,163,.06), transparent 26%),
    radial-gradient(circle at 95% 95%, rgba(27,53,86,.07),  transparent 30%),
    radial-gradient(circle at 2% 92%,  rgba(15,124,138,.05), transparent 26%);
  background-size:44px 44px, 44px 44px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
/* 顶部底图：横向设备线稿，极淡、向下渐隐，衬在导航与首屏之上 */
body::after{
  content:'';position:fixed;top:0;left:0;right:0;height:600px;pointer-events:none;z-index:0;
  background:url(assets/equip-line-h.svg) center top/100% auto no-repeat;
  opacity:.22;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.8),transparent 92%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.8),transparent 92%);
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);position:relative;z-index:1}

/* ---------- 工程图纸边框（v15 移除） ----------
   原宽屏装饰：内容区两侧竖向图框 + 每 60px 刻度。
   问题：该 position:fixed 元素在 DOM 中后于头部注入，会盖在首页深蓝「三横幅轮播」之上，
   两条 1px 竖线在深色底上读作「左右各一条白竖条」，故整体下线。 */
.dwg-frame{display:none!important}

/* ============================================================
   通用组件
   ============================================================ */

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;height:40px;border-radius:var(--r-md);font-size:14px;font-weight:600;transition:all .2s var(--ease);white-space:nowrap;border:1px solid transparent}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn--primary{background:linear-gradient(180deg,var(--steel-2),var(--steel));color:#fff;border-color:var(--steel);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 1px 3px rgba(27,53,86,.30)}
.btn--primary:hover{filter:brightness(1.08);box-shadow:0 6px 18px rgba(27,53,86,.32);transform:translateY(-1px)}
.btn--silver{background:var(--silver-grad);color:var(--silver-dk);border:1px solid var(--silver-3);box-shadow:0 1px 0 rgba(255,255,255,.65) inset,0 1px 3px rgba(93,103,114,.18)}
.btn--silver:hover{filter:brightness(1.04);border-color:var(--silver-2);box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 5px 14px rgba(93,103,114,.22);transform:translateY(-1px)}
.btn--ghost{background:var(--surface);border-color:var(--line-2);color:var(--text-1)}
.btn--ghost:hover{border-color:var(--steel-3);color:var(--steel);background:var(--steel-soft)}
.btn--cyan{background:var(--cyan);color:#fff;border-color:var(--cyan)}
.btn--cyan:hover{background:var(--cyan-2);border-color:var(--cyan-2)}
.btn--lg{height:48px;padding:0 28px;font-size:15px;border-radius:var(--r-lg)}
.btn--sm{height:32px;padding:0 14px;font-size:13px;border-radius:var(--r-sm)}
.btn--block{width:100%}
.btn--disabled,.btn:disabled{opacity:.45;pointer-events:none}

/* 价格 —— 等宽 */
.price{font-family:var(--mono);font-weight:700;color:var(--steel);letter-spacing:-.2px}
.price small{font-size:.72em;font-weight:600;margin-right:1px}
.price--lg{font-size:28px}
.price--xl{font-size:36px;line-height:1}
.price-origin{font-family:var(--mono);font-size:13px;color:var(--text-3);text-decoration:line-through}

/* 标签 */
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--r-xs);font-size:11px;font-weight:600;letter-spacing:.3px;white-space:nowrap;border:1px solid transparent}
.tag--amber{background:var(--amber-soft-2);color:var(--amber-deep);border-color:rgba(140,151,163,.34)}
.tag--cyan{background:var(--cyan-soft);color:var(--cyan);border-color:rgba(15,124,138,.25)}
.tag--silver{background:var(--surface-3);color:var(--text-2);border-color:var(--line-2)}
.tag--steel{background:var(--steel-soft);color:var(--steel);border-color:rgba(30,58,95,.18)}
.tag--danger{background:rgba(201,80,47,.1);color:var(--danger);border-color:rgba(201,80,47,.25)}
.tag--success{background:rgba(47,158,110,.1);color:var(--success);border-color:rgba(47,158,110,.25)}
.tag--solid{background:var(--steel);color:#fff;border-color:var(--steel)}

/* 卡片 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);transition:all .25s var(--ease)}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow-md)}

/* 面包屑 */
.crumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3);padding:16px 0}
.crumb a{color:var(--text-2);transition:color .2s}
.crumb a:hover{color:var(--amber-deep)}
.crumb .sep{color:var(--line-2)}
.crumb .cur{color:var(--text-2)}

/* 分页 */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;padding:40px 0 0}
.pager button{min-width:36px;height:36px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--text-2);font-family:var(--mono);font-size:13px;transition:all .2s}
.pager button:hover:not(:disabled){border-color:var(--steel-3);color:var(--steel);background:var(--steel-soft)}
.pager button.is-active{background:var(--steel);border-color:var(--steel);color:#fff;font-weight:700}
.pager button:disabled{opacity:.4;cursor:not-allowed}
.pager .dots{color:var(--text-3);padding:0 4px}

/* 数量步进器 */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.stepper button{width:30px;height:30px;display:grid;place-items:center;color:var(--text-2);font-size:16px;line-height:1;transition:all .15s;background:var(--surface-2)}
.stepper button:hover{background:var(--steel-soft);color:var(--steel)}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.stepper input{width:48px;height:30px;border:0;background:var(--surface);text-align:center;font-family:var(--mono);font-size:13px;font-weight:600;outline:none;border-left:1px solid var(--line);border-right:1px solid var(--line);color:var(--text-1)}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper--lg button{width:38px;height:38px;font-size:18px}
.stepper--lg input{width:60px;height:38px;font-size:15px}

/* 表单控件 */
.field{display:block}
.field > span{display:block;font-size:13px;color:var(--text-2);margin-bottom:7px;font-weight:500}
.field .req{color:var(--danger);margin-left:2px}
.input,.select,.textarea{
  width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:11px 14px;font-size:14px;color:var(--text-1);outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--steel-3);box-shadow:0 0 0 3px var(--steel-soft)}
.textarea{resize:vertical;min-height:88px;line-height:1.6}
.select{appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%238492a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;background-size:15px}
.select option{background:var(--surface);color:var(--text-1)}

/* 复选框 */
.cbox{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;font-size:13px;color:var(--text-2)}
.cbox input{position:absolute;opacity:0;width:0;height:0}
.cbox .box{width:16px;height:16px;border:1px solid var(--line-3);border-radius:var(--r-xs);background:var(--surface);display:grid;place-items:center;transition:all .18s;flex-shrink:0}
.cbox .box::after{content:'';width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .18s;margin-top:-2px}
.cbox input:checked + .box{background:var(--steel);border-color:var(--steel)}
.cbox input:checked + .box::after{transform:rotate(-45deg) scale(1)}
.cbox:hover .box{border-color:var(--steel-3)}
.cbox:hover{color:var(--text-1)}

/* 单选 */
.rbox{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;font-size:13px;color:var(--text-2)}
.rbox input{position:absolute;opacity:0;width:0;height:0}
.rbox .dot{width:16px;height:16px;border:1px solid var(--line-3);border-radius:50%;background:var(--surface);display:grid;place-items:center;transition:all .18s;flex-shrink:0}
.rbox .dot::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--steel);transform:scale(0);transition:transform .18s}
.rbox input:checked + .dot{border-color:var(--steel)}
.rbox input:checked + .dot::after{transform:scale(1)}
.rbox:hover{color:var(--text-1)}
.rbox:hover .dot{border-color:var(--steel-3)}

/* 楼层头 */
.floor__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.floor__title{display:flex;align-items:baseline;gap:14px}
.floor__title h2{font-family:var(--serif);font-size:25px;font-weight:700;letter-spacing:0;color:var(--text-1)}
.floor__title .en{font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:2.5px;text-transform:uppercase}
.floor__title .bar{width:4px;height:22px;background:linear-gradient(180deg,var(--silver-2),var(--silver-dk));border-radius:2px;align-self:center}
.floor__more{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);transition:all .2s;font-weight:500}
.floor__more:hover{color:var(--steel);gap:10px}

/* Tab */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line-2);margin-bottom:22px}
.tabs button{position:relative;padding:11px 18px;font-size:14px;font-weight:600;color:var(--text-2);transition:color .2s}
.tabs button:hover{color:var(--text-1)}
.tabs button.is-active{color:var(--steel)}
.tabs button.is-active::after{content:'';position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--steel);border-radius:1px}

/* 空状态 */
.empty{padding:80px 20px;text-align:center;color:var(--text-3)}
.empty svg{width:64px;height:64px;margin:0 auto 18px;opacity:.3}
.empty p{font-size:14px}

/* Toast */
.toast{
  position:fixed;left:50%;top:88px;transform:translate(-50%,-16px);
  background:var(--surface);border:1px solid var(--steel);border-left:3px solid var(--amber);color:var(--text-1);
  padding:12px 22px;border-radius:var(--r-md);font-size:14px;font-weight:500;
  box-shadow:var(--shadow-hover);z-index:999;
  opacity:0;pointer-events:none;transition:all .28s var(--ease);
  display:flex;align-items:center;gap:10px;
}
.toast.is-show{opacity:1;transform:translate(-50%,0)}
.toast svg{width:17px;height:17px;color:var(--success);flex-shrink:0}
/* v30：警告态（橙红）—— 例如后台上传的横幅图比例/清晰度不符合规范 */
.toast.is-warn{border-left-color:#ff6a2c}
.toast.is-warn svg{color:#ff6a2c}

/* ---------- 询盘弹窗（前台提交 → 后台可见） ---------- */
.inq-overlay{position:fixed;inset:0;background:rgba(15,30,48,.55);backdrop-filter:blur(2px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;animation:inqFade .2s ease}
.inq-overlay[hidden]{display:none}
@keyframes inqFade{from{opacity:0}to{opacity:1}}
.inq-modal{width:100%;max-width:460px;background:var(--surface);border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(15,30,48,.28);overflow:hidden;animation:inqPop .22s var(--ease);max-height:92vh;display:flex;flex-direction:column}
@keyframes inqPop{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.inq-hd{padding:20px 22px 14px;background:linear-gradient(135deg,var(--steel) 0%,var(--steel-2) 100%);color:#fff;position:relative}
.inq-hd h3{font-size:18px;font-weight:800;letter-spacing:.3px}
.inq-hd p{font-size:12.5px;opacity:.8;margin-top:4px}
.inq-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:50%;font-size:18px;line-height:1;cursor:pointer;transition:background .15s}
.inq-x:hover{background:rgba(255,255,255,.28)}
.inq-body{padding:18px 22px;overflow:auto}
.inq-body .field{margin-bottom:14px}
.inq-body .field>span{display:block;font-size:12.5px;color:var(--text-2);margin-bottom:6px;font-weight:500}
.inq-body .field>span i{color:var(--text-3);font-style:normal;font-weight:400}
.inq-body .input{width:100%;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:10px 12px;font-size:13.5px;color:var(--text-1);outline:none;transition:border-color .15s,box-shadow .15s;font-family:inherit}
.inq-body .input:focus{border-color:var(--steel-3);box-shadow:0 0 0 3px var(--steel-soft)}
.inq-body textarea.input{resize:vertical;line-height:1.6}
.inq-foot{padding:14px 22px 20px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--line-2)}

/* ============================================================
   顶部条 + Header + 分类导航
   ============================================================ */
.topbar{background:linear-gradient(180deg,var(--steel),#152740);border-bottom:1px solid rgba(255,255,255,.14);font-size:12px;position:relative;z-index:60}
.topbar__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);height:34px;display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.6)}
.topbar__l,.topbar__r{display:flex;align-items:center;gap:16px}
.topbar a{color:rgba(255,255,255,.75);transition:color .2s}
.topbar a:hover{color:#fff}
.topbar .sep{color:rgba(255,255,255,.2)}
.topbar .live{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.7)}
.topbar .live i{width:5px;height:5px;border-radius:50%;background:#5fd6a0;box-shadow:0 0 7px #5fd6a0;animation:blink 1.8s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.topbar .num{font-family:var(--mono);color:var(--amber-2);font-weight:600}

.header{background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line-2);position:sticky;top:0;z-index:55;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 2px 10px rgba(20,30,45,.05)}
/* 导航底图：极淡设备线稿水印（右侧浮现，左侧渐隐），显高级不抢内容 */
.header::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:url(assets/equip-line-h.svg) right -30px center/auto 210px no-repeat;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.85) 62%);mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.85) 62%)}
.header__in{max-width:var(--maxw);margin:0 auto;padding:11px var(--pad-x);display:flex;align-items:center;gap:26px;position:relative;z-index:1}

.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo__mark{width:44px;height:44px;border-radius:13px;background:linear-gradient(145deg,var(--steel-2),var(--steel));border:1px solid var(--steel);display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:0 4px 12px -6px rgba(27,53,86,.5)}
.logo__mark::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 62%)}
.logo__mark svg{width:27px;height:27px;position:relative;z-index:1}
.logo__txt strong{display:block;font-size:18px;font-weight:800;letter-spacing:.6px;line-height:1.16;color:var(--steel)}
.logo__txt strong span{font-family:var(--mono);font-size:9.5px;color:var(--text-3);font-weight:600;letter-spacing:2.2px;margin-left:6px}
.logo__txt em{display:block;font-size:11px;color:var(--steel-3);letter-spacing:.4px;margin-top:2px}

/* 全部分类 */
.allcat{position:relative;flex-shrink:0}
.allcat__btn{display:flex;align-items:center;gap:9px;height:44px;padding:0 16px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);font-size:14px;font-weight:600;color:var(--text-1);transition:all .2s}
.allcat__btn:hover{border-color:var(--steel-3);color:var(--steel);background:var(--steel-soft)}
.allcat__btn .ico{display:flex;flex-direction:column;gap:3px;width:14px}
.allcat__btn .ico i{height:1.5px;background:currentColor;border-radius:2px;transition:all .2s}
.allcat__btn .ico i:nth-child(1){width:14px}
.allcat__btn .ico i:nth-child(2){width:10px}
.allcat__btn .ico i:nth-child(3){width:13px}
.allcat:hover .allcat__btn .ico i{width:14px}
.allcat__menu{
  position:absolute;top:calc(100% + 8px);left:0;width:230px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:8px;box-shadow:var(--shadow-hover);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .22s var(--ease);z-index:70;
}
.allcat:hover .allcat__menu{opacity:1;visibility:visible;transform:translateY(0)}
.allcat__menu a{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:var(--r-sm);font-size:13.5px;color:var(--text-2);transition:all .18s}
.allcat__menu a:hover{background:var(--steel-soft);color:var(--steel)}
.allcat__menu a .arw{opacity:0;transform:translateX(-4px);transition:all .18s;font-size:12px}
.allcat__menu a:hover .arw{opacity:1;transform:translateX(0)}
.allcat__menu .div{height:1px;background:var(--line);margin:6px 4px}

/* 搜索 */
.search{flex:1;max-width:620px;display:flex;align-items:center;height:44px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);padding:0 4px 0 14px;transition:border-color .2s,box-shadow .2s}
.search:focus-within{border-color:var(--steel-3);box-shadow:0 0 0 3px var(--steel-soft)}
.search svg{width:16px;height:16px;color:var(--text-3);flex-shrink:0}
.search input{flex:1;background:transparent;border:0;padding:0 12px;font-size:13.5px;outline:none;min-width:0;color:var(--text-1)}
.search input::placeholder{color:var(--text-3)}
.search .hot{display:flex;gap:8px;padding-right:12px;font-size:11.5px;color:var(--text-3);white-space:nowrap}
.search .hot span{cursor:pointer;transition:color .15s}
.search .hot span:hover{color:var(--amber-deep)}
.search button{height:36px;padding:0 22px;background:var(--steel);color:#fff;font-weight:700;border-radius:var(--r-sm);font-size:13.5px;transition:background .2s;flex-shrink:0}
.search button:hover{background:var(--steel-2)}

/* 头部右侧 */
.hd__act{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
/* 「意见与反馈」：与右侧按钮组同高同款（此前缺失样式，裸 svg 失控撑高 header） */
.hd__fb{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 15px;border:1px solid var(--line-2);border-radius:var(--r-md);color:var(--text-2);background:var(--surface);font-size:13px;font-weight:600;white-space:nowrap;transition:all .2s}
.hd__fb:hover{border-color:var(--steel-3);color:var(--steel);background:var(--steel-soft)}
.hd__fb svg{width:18px;height:18px;flex-shrink:0}
.hd__fb em{font-style:normal;line-height:1}
.hd__icon{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r-md);color:var(--text-2);background:var(--surface);transition:all .2s}
.hd__icon:hover{border-color:var(--steel-3);color:var(--steel);background:var(--steel-soft)}
.hd__icon svg{width:18px;height:18px}
.hd__icon .badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;background:var(--silver-grad-deep);color:#fff;border-radius:9px;font-family:var(--mono);font-size:10.5px;font-weight:700;display:grid;place-items:center;border:2px solid var(--surface)}
.cartbtn{display:flex;align-items:center;gap:9px;height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--r-md);font-size:13.5px;font-weight:600;color:var(--text-1);background:var(--surface);transition:all .2s;position:relative}
.cartbtn:hover{border-color:var(--steel-3);color:var(--steel);background:var(--steel-soft)}
.cartbtn svg{width:17px;height:17px}
.cartbtn .badge{min-width:18px;height:18px;padding:0 5px;background:var(--silver-grad-deep);color:#fff;border-radius:9px;font-family:var(--mono);font-size:11px;font-weight:700;display:grid;place-items:center}

/* 分类导航条 */
.catnav{background:var(--surface);border-bottom:1px solid var(--line-2);position:relative;z-index:40;box-shadow:0 1px 2px rgba(22,32,46,.03)}
.catnav__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);display:flex;align-items:center;gap:4px;height:42px;overflow-x:auto;scrollbar-width:none}
.catnav__in::-webkit-scrollbar{display:none}
.catnav a{padding:0 14px;height:42px;display:flex;align-items:center;font-size:14px;font-weight:600;color:var(--text-2);white-space:nowrap;border-bottom:2px solid transparent;transition:all .2s}
.catnav a:hover{color:var(--text-1)}
.catnav a.is-active{color:var(--steel);border-bottom-color:var(--silver-dk)}
.catnav .spacer{flex:1}
.catnav .promo{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--cyan);white-space:nowrap;padding-left:12px;font-weight:500}
.catnav .promo svg{width:14px;height:14px}

/* ============================================================
   首页 · Banner
   ============================================================ */
.hero{margin:24px 0 0}
.hero__grid{display:grid;grid-template-columns:1fr 300px;gap:16px;height:340px}

.banner{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--surface);border:1px solid var(--line-2);display:flex;align-items:center;padding:0 56px;
  background-image:
    linear-gradient(rgba(30,58,95,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,58,95,.04) 1px, transparent 1px);
  background-size:36px 36px;
}
/* 技术感装饰：同心圆 + 十字定位 */
.banner::before{
  content:'';position:absolute;right:60px;top:50%;transform:translateY(-50%);
  width:260px;height:260px;border-radius:50%;
  border:1px solid rgba(30,58,95,.1);
  box-shadow:inset 0 0 0 40px rgba(30,58,95,.03), inset 0 0 0 80px rgba(30,58,95,.02);
}
/* 十字定位标记（技术图纸感） */
.banner::after{
  content:'';position:absolute;right:168px;top:50%;margin-top:-22px;
  width:44px;height:44px;
  background:
    linear-gradient(rgba(140,151,163,.5) 1px, transparent 1px) center/100% 1px no-repeat,
    linear-gradient(90deg, rgba(140,151,163,.5) 1px, transparent 1px) center/1px 100% no-repeat;
}
.banner__txt{position:relative;z-index:2;max-width:540px}
.banner__eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:2.5px;color:var(--silver-dk);padding:5px 12px;background:var(--silver-soft);border:1px solid rgba(140,151,163,.34);border-radius:var(--r-xs);margin-bottom:20px}
.banner__eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--silver-2);animation:blink 1.8s infinite}
.banner h1{font-size:38px;font-weight:800;line-height:1.24;letter-spacing:-.6px;margin-bottom:14px;color:var(--steel)}
.banner h1 .hl{background:linear-gradient(100deg,var(--steel),var(--silver-dk));-webkit-background-clip:text;background-clip:text;color:transparent}
.banner p{font-size:15px;color:var(--text-2);line-height:1.7;margin-bottom:26px}
.banner__cta{display:flex;gap:12px}
.banner__dots{position:absolute;bottom:22px;left:56px;display:flex;gap:7px;z-index:2}
.banner__dots i{width:22px;height:3px;border-radius:1px;background:var(--line-2);cursor:pointer;transition:all .25s}
.banner__dots i.is-active{background:var(--steel);width:34px}

/* ---------- 英雄区轮播（图片/视频背景 + 文字浮层） ---------- */
.banner{display:block;padding:0}
.banner__txt{padding:0 56px;z-index:3}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease;display:flex;align-items:center;overflow:hidden}
.slide.is-active{opacity:1;visibility:visible}
/* v23 图片策略：素材 1200×960（1.25）且机器顶部贴素材上边缘 → 若用 width:100% + cover
   把 banner 拉宽会转为"按宽铺满、裁上下"，机器被切顶。改为「钉右 + 按高度自适应宽度」：
   图片始终完整（不裁切），容器宽出的部分落在左侧，正好被 .slide__scrim 深色遮罩吞掉，
   且素材左半本就是空白网格，与 .banner 自身底纹同色 → 无缝。 */
.slide__bg{position:absolute;top:0;right:0;bottom:0;left:auto;width:auto;height:100%;max-width:none;object-fit:cover;object-position:right center;z-index:1;background:var(--surface);
  /* 左缘羽化：容器宽于图片时（图片左缘会与 .banner 自身底纹形成一条可见竖缝），
     羽化后与容器背景无缝衔接（素材左 27% 内无产品，羽化不伤主体）。
     v24 起桌面端图片高度抬高、图片宽≈容器宽，多数档位已无塞缝，但 900 高的屏
     或 ≤1280 档仍有死区 → 统一保留羽化，两种情况都不会露缝。 */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 7%,rgba(0,0,0,.9) 17%,#000 27%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 7%,rgba(0,0,0,.9) 17%,#000 27%);
}
/* v23 scrim：banner 加宽后文字栏与产品图横向距离缩短，原「中段 .45 即快速衰减」的遮罩
   会让产品（banner_solution 的压力桶横向占到 39.6%）从文字下方透出 → 把不透明度衰减点
   整体右移并抬高，文字区内残留内容都被压成暗纹，产品主体（62% 以右）仍明亮清晰。 */
.slide__scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(15,28,48,.86) 0%,rgba(15,28,48,.72) 40%,rgba(15,28,48,.40) 62%,rgba(15,28,48,.08) 86%,rgba(15,28,48,.02) 100%)}
.slide--steel{background:linear-gradient(120deg,#1e3a5f,#2f567f)}
.slide--cyan{background:linear-gradient(120deg,#0f7c8a,#1a9aab)}
.slide--amber{background:linear-gradient(135deg,#5b6470,#3a4250)}
.slide--amber::after{content:'';position:absolute;right:0;top:0;bottom:0;width:42%;background:linear-gradient(90deg,rgba(176,184,194,0),rgba(176,184,194,.32))}
.banner__dots{z-index:4}

/* Banner 右侧小卡 */
.hero__side{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.sidecard{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:22px 24px;display:flex;flex-direction:column;justify-content:space-between;transition:all .25s var(--ease);position:relative;overflow:hidden}
.sidecard::after{content:'';position:absolute;right:-30px;bottom:-30px;width:130px;height:130px;border-radius:50%;border:1px solid rgba(30,58,95,.05);box-shadow:inset 0 0 0 22px rgba(30,58,95,.03)}
.sidecard:hover{border-color:var(--steel-3);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.sidecard h3{font-size:17px;font-weight:700;margin-bottom:6px;color:var(--text-1)}
.sidecard p{font-size:12.5px;color:var(--text-2);line-height:1.55;position:relative;z-index:1}
.sidecard .go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--steel);margin-top:12px;transition:gap .2s;position:relative;z-index:1}
.sidecard:hover .go{gap:11px}
.sidecard .kpi{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--steel);line-height:1;position:relative;z-index:1}

/* 服务承诺条 */
.promise{display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);margin-top:16px;padding:18px 0;overflow:hidden}
.promise__i{display:flex;align-items:center;justify-content:center;gap:11px;padding:0 18px;border-right:1px solid var(--line);font-size:13px;color:var(--text-2)}
.promise__i:last-child{border-right:0}
.promise__i svg{width:19px;height:19px;color:var(--steel-3);flex-shrink:0}
.promise__i strong{color:var(--text-1);font-weight:600}

/* ============================================================
   首页 · 楼层
   ============================================================ */
/* 楼层改为纵向 padding + 全宽背景，横向铺满视口，消除宽屏两侧大片空白 */
.floor{margin-top:0;padding:54px 0;position:relative;z-index:1}
.floor__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);position:relative;z-index:1}

/* 交替全宽底色（奇偶楼层交替，由 app.js 加 floor--tint） */
.floor--tint{
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
/* 白底楼层里，卡片用浅灰底，保证层次不被吃掉 */
.floor--tint .gcard{background:var(--surface)}
.floor--tint .seckill{border-color:var(--line-2)}

/* 巨大背景编号：宽屏时正好落在内容区右侧的空白带里，把它变成设计元素 */
.floor--tint::before{display:none}
@media (min-width:1500px){
  .floor--tint::before{
    display:block;
    content:counter(floor,decimal-leading-zero);
    position:absolute;right:3.5%;top:50%;transform:translateY(-50%);
    font-family:var(--mono);font-weight:700;line-height:.8;
    font-size:clamp(170px, 15vw, 290px);
    letter-spacing:-.05em;
    color:rgba(30,58,95,.038);
    pointer-events:none;user-select:none;
  }
}

/* 楼层自动编号 —— 技术规格文档感 */
body{counter-reset:floor}
.floor{counter-increment:floor}
.floor__title h2::before{
  content:counter(floor,decimal-leading-zero) ' /';
  font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--silver-dk);margin-right:9px;letter-spacing:.5px;
  vertical-align:2px;
}

/* 秒杀 */
.seckill{background:var(--surface);border:1px solid rgba(140,151,163,.36);border-radius:var(--r-xl);overflow:hidden}
.seckill__hd{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 28px;border-bottom:1px solid var(--line-2);background:linear-gradient(180deg,#fafbfc,#f1f4f7)}
.seckill__hd .l{display:flex;align-items:center;gap:16px}
.seckill__hd .l h2{font-size:20px;font-weight:800;letter-spacing:-.2px;display:flex;align-items:center;gap:10px;color:var(--text-1)}
.seckill__hd .l h2 svg{width:20px;height:20px;color:var(--steel)}
.countdown{display:flex;align-items:center;gap:6px;font-family:var(--mono)}
.countdown .lb{font-size:12px;color:var(--text-2);margin-right:2px;font-family:var(--sans)}
.countdown b{min-width:32px;height:30px;padding:0 5px;background:var(--steel);border-radius:var(--r-sm);color:#fff;font-size:15px;font-weight:700;display:grid;place-items:center}
.countdown .cl{color:var(--amber);font-weight:700}
.seckill__bd{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.seckill__i{background:var(--surface);padding:20px 18px;display:block;transition:all .25s var(--ease);border-right:1px solid var(--line);position:relative}
.seckill__i:last-child{border-right:0}
.seckill__i:hover{background:var(--surface-2)}
.seckill__i::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--amber),var(--cyan));transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.seckill__i:hover::before{transform:scaleX(1)}
.seckill__i .thumb{height:118px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:14px;overflow:hidden}
.seckill__i .thumb svg{width:100%;height:100%}
.seckill__i h4{font-size:13.5px;font-weight:600;line-height:1.45;margin-bottom:10px;height:39px;overflow:hidden;color:var(--text-1)}
.seckill__i .pr{display:flex;align-items:baseline;gap:7px;margin-bottom:10px}
.seckill__i .bar{height:4px;background:var(--surface-3);border-radius:2px;overflow:hidden;margin-bottom:6px}
.seckill__i .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--danger));border-radius:2px}
.seckill__i .sold{font-size:11px;color:var(--text-3);font-family:var(--mono)}

/* 分类楼层 */
.catfloor{display:grid;grid-template-columns:220px 1fr;gap:16px}
.catfloor__side{border-radius:var(--r-lg);padding:26px 24px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;border:1px solid var(--line-2);background:var(--surface-2);transition:all .28s var(--ease)}
.catfloor__side::after{content:'';position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;border:1px solid rgba(30,58,95,.07);box-shadow:inset 0 0 0 30px rgba(30,58,95,.035)}
.catfloor__side:hover{border-color:var(--steel-3);box-shadow:var(--shadow-md)}
.catfloor__side h3{font-size:22px;font-weight:800;letter-spacing:-.3px;margin-bottom:8px;position:relative;z-index:1;color:var(--steel)}
.catfloor__side p{font-size:13px;color:var(--text-2);line-height:1.6;margin-bottom:18px;position:relative;z-index:1}
.catfloor__side .sub{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px;position:relative;z-index:1}
.catfloor__side .sub a{font-size:12px;padding:5px 11px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--text-2);transition:all .2s}
.catfloor__side .sub a:hover{border-color:var(--steel-3);color:var(--steel);background:var(--steel-soft)}
.catfloor__side .more{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--steel);position:relative;z-index:1;transition:gap .2s}
.catfloor__side:hover .more{gap:12px}
.catfloor__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.catfloor__extra{grid-column:2;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.catfloor__extra-i{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:16px 18px;transition:all .25s var(--ease)}
.catfloor__extra-i:hover{border-color:var(--steel-3);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.catfloor__extra-ic{width:42px;height:42px;border-radius:var(--r-md);background:var(--surface-2);display:grid;place-items:center;flex-shrink:0}
.catfloor__extra-ic svg{width:22px;height:22px}
.catfloor__extra-tx{flex:1;min-width:0}
.catfloor__extra-tx b{display:block;font-size:14px;font-weight:700;color:var(--text-1);margin-bottom:4px}
.catfloor__extra-tx span{display:block;font-size:11.5px;color:var(--text-2);line-height:1.5}
.catfloor__extra-arw{width:24px;height:24px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);display:grid;place-items:center;font-size:12px;color:var(--steel);font-weight:700;flex-shrink:0;transition:all .2s}
.catfloor__extra-i:hover .catfloor__extra-arw{background:var(--steel);color:#fff;border-color:var(--steel)}

/* 楼层引导 + 快捷筛选 */
.floor__lead{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:12px 0 18px;flex-wrap:wrap}
.floor__lead p{font-size:13px;color:var(--text-2);max-width:520px;line-height:1.7}
.floor__chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.floor__chips a{font-size:12px;padding:6px 13px;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;color:var(--text-2);transition:all .2s}
.floor__chips a:hover{border-color:var(--steel-3);color:var(--steel);background:var(--steel-soft)}
.floor__chips a.hot{color:var(--danger);border-color:rgba(201,80,47,.2);background:rgba(201,80,47,.04)}

/* 左侧业务卡片增强 */
.cside__head{display:flex;align-items:center;gap:12px;margin-bottom:10px;position:relative;z-index:1}
.cside__ic{width:42px;height:42px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--steel),var(--steel-2));color:#fff;display:grid;place-items:center;box-shadow:0 2px 6px rgba(30,58,95,.18)}
.cside__ic svg{width:22px;height:22px}
.cside__tit h3{font-size:20px;font-weight:800;color:var(--steel);letter-spacing:-.2px;margin-bottom:2px}
.cside__tit span{font-size:11px;color:var(--text-3);letter-spacing:1px;text-transform:uppercase}
.cside__tagline{font-size:12.5px;color:var(--text-2);line-height:1.65;margin-bottom:14px;position:relative;z-index:1}
.cside__scenes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;position:relative;z-index:1}
.cside__scenes span{font-size:11px;padding:4px 9px;background:rgba(15,124,138,.08);border:1px solid rgba(15,124,138,.15);border-radius:999px;color:var(--cyan)}
.cside__scenes span.silver{background:var(--steel-soft);border-color:var(--line-3);color:var(--steel-2)}
.cside__series{margin-bottom:14px;position:relative;z-index:1}
.cside__series h4{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-3);margin-bottom:8px;font-weight:600}
.cside__series ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.cside__series li a{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-1);transition:all .15s;padding:2px 0}
.cside__series li a::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--steel-3)}
.cside__series li a:hover{color:var(--steel);gap:10px}
.cside__specs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;position:relative;z-index:1}
.cside__specs b{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:5px 10px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--text-2);font-weight:600}
.cside__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.cside__foot .more{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--steel);transition:gap .2s}
.catfloor__side:hover .cside__foot .more{gap:12px}
.cside__foot .cta{font-size:12px;padding:6px 13px;background:var(--steel);color:#fff;border-radius:var(--r-md);font-weight:600;transition:all .2s}
.cside__foot .cta:hover{background:var(--steel-2)}

/* 商品卡 —— 顶部渐进强调条 */
.gcard{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:all .28s var(--ease);position:relative;box-shadow:0 1px 2px rgba(22,32,46,.05)}
.gcard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--amber),var(--cyan));transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);z-index:3}
.gcard:hover::before{transform:scaleX(1)}
.gcard:hover{border-color:var(--steel-3);transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.gcard__media{position:relative;height:172px;background:var(--surface-2);display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.gcard__media svg{width:78%;height:78%;transition:transform .32s var(--ease)}
.gcard:hover .gcard__media svg{transform:scale(1.06)}
.gcard__badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;z-index:2}
.gcard__body{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
.gcard__title{font-size:13.5px;font-weight:600;line-height:1.5;margin-bottom:9px;height:40px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--text-1)}
.gcard:hover .gcard__title{color:var(--steel)}
.gcard__spec{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.gcard__spec span{font-family:var(--mono);font-size:10.5px;padding:3px 6px;background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-xs);color:var(--text-2)}
.gcard__foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.gcard__foot .l{min-width:0}
.gcard__foot .sales{font-size:11px;color:var(--text-3);margin-top:4px;font-family:var(--mono)}
.gcard__btn{width:32px;height:32px;border-radius:var(--r-sm);background:var(--steel-soft);border:1px solid rgba(30,58,95,.18);color:var(--steel);display:grid;place-items:center;transition:all .2s;flex-shrink:0}
.gcard__btn:hover{background:var(--steel);color:#fff;border-color:var(--steel)}
.gcard__btn svg{width:15px;height:15px}

/* 热销榜 */
.rankfloor{display:grid;grid-template-columns:1fr 300px;gap:16px}
.ranklist{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.ranklist__hd{display:grid;grid-template-columns:44px 1fr 120px 110px;gap:12px;padding:15px 22px;background:var(--surface-3);border-bottom:1px solid var(--line-2);font-size:12px;color:var(--text-3);letter-spacing:.5px}
.ranklist__i{display:grid;grid-template-columns:44px 1fr 120px 110px;gap:12px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line);transition:background .2s}
.ranklist__i:last-child{border-bottom:0}
.ranklist__i:hover{background:var(--surface-2)}
.ranklist__i .no{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--line-3);text-align:center}
.ranklist__i:nth-child(2) .no{color:var(--danger)}
.ranklist__i:nth-child(3) .no{color:var(--amber-deep)}
.ranklist__i:nth-child(4) .no{color:var(--steel-3)}
.ranklist__i .nm{display:flex;align-items:center;gap:12px;min-width:0}
.ranklist__i .nm .pic{width:46px;height:46px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line-2);display:grid;place-items:center;flex-shrink:0;overflow:hidden}
.ranklist__i .nm .pic svg{width:82%;height:82%}
.ranklist__i .nm .tx{min-width:0}
.ranklist__i .nm .tx b{display:block;font-size:13.5px;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-1)}
.ranklist__i .nm .tx span{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.ranklist__i .sk{font-family:var(--mono);font-size:12px;color:var(--text-2)}
.ranklist__i .ac{text-align:right}

/* 耗材复购 */
.rebuy{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.rebuy__i{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);padding:16px 14px;text-align:center;transition:all .24s var(--ease);position:relative;overflow:hidden}
.rebuy__i::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--cyan);transform:scaleX(0);transition:transform .26s var(--ease)}
.rebuy__i:hover::before{transform:scaleX(1)}
.rebuy__i:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.rebuy__i .pic{height:64px;display:grid;place-items:center;margin-bottom:11px}
.rebuy__i .pic svg{width:66px;height:64px}
.rebuy__i b{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px;line-height:1.4;color:var(--text-1)}
.rebuy__i .pr{font-family:var(--mono);font-size:13px;color:var(--amber-deep);font-weight:700}
.rebuy__i .mo{font-size:10.5px;color:var(--text-3);margin-top:3px}

/* 服务保障 */
.guarantee{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.guarantee__i{display:flex;gap:14px;padding:22px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);transition:all .24s var(--ease)}
.guarantee__i:hover{border-color:var(--steel-3);box-shadow:var(--shadow-md)}
.guarantee__i .ic{width:42px;height:42px;border-radius:var(--r-md);background:var(--steel-soft);border:1px solid rgba(30,58,95,.12);display:grid;place-items:center;flex-shrink:0;color:var(--steel)}
.guarantee__i .ic svg{width:20px;height:20px}
.guarantee__i b{display:block;font-size:14.5px;font-weight:700;margin-bottom:5px;color:var(--text-1)}
.guarantee__i p{font-size:12.5px;color:var(--text-2);line-height:1.55}

/* ============================================================
   列表页
   ============================================================ */
.plp{display:grid;grid-template-columns:216px 1fr;gap:20px;align-items:start;padding-bottom:20px}

.filter{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;position:sticky;top:106px}
.filter__hd{padding:15px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;background:var(--surface-3)}
.filter__hd b{font-size:14px;font-weight:700;color:var(--text-1)}
.filter__hd button{font-size:12px;color:var(--text-3);transition:color .2s}
.filter__hd button:hover{color:var(--amber-deep)}
.filter__sec{border-bottom:1px solid var(--line);padding:16px 18px}
.filter__sec:last-child{border-bottom:0}
.filter__sec > h4{font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.filter__sec > h4 svg{width:14px;height:14px;color:var(--text-3);transition:transform .2s}
.filter__sec.is-collapsed > h4 svg{transform:rotate(-90deg)}
.filter__sec.is-collapsed .filter__body{display:none}
.filter__body{display:flex;flex-direction:column;gap:10px}
.filter__body .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--text-3)}
.pricerange{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.pricerange input{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:7px 9px;font-family:var(--mono);font-size:12px;outline:none;text-align:center;color:var(--text-1)}
.pricerange input:focus{border-color:var(--steel-3)}
.pricerange span{color:var(--text-3);flex-shrink:0}

.plp__main{min-width:0}
.sortbar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:11px 16px;margin-bottom:16px;flex-wrap:wrap}
.sortbar__l{display:flex;align-items:center;gap:4px}
.sortbar__l button{padding:7px 14px;border-radius:var(--r-sm);font-size:13px;color:var(--text-2);transition:all .2s;display:flex;align-items:center;gap:5px}
.sortbar__l button:hover{background:var(--surface-3);color:var(--text-1)}
.sortbar__l button.is-active{background:var(--steel-soft);color:var(--steel);font-weight:600}
.sortbar__l button .ar{font-size:10px;opacity:.6}
.sortbar__r{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--text-3)}
.sortbar__r .total b{font-family:var(--mono);color:var(--amber-deep);font-size:14px}
.chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;background:var(--steel-soft);border:1px solid rgba(30,58,95,.18);border-radius:var(--r-sm);font-size:12px;color:var(--steel)}
.chip button{color:var(--steel);font-size:14px;line-height:1;opacity:.6}
.chip button:hover{opacity:1}
.chips .clr{font-size:12px;color:var(--text-3);margin-left:4px;transition:color .2s}
.chips .clr:hover{color:var(--danger)}

.goodsgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.goodsgrid--list{grid-template-columns:1fr}
.gcard--row{flex-direction:row;height:172px}
.gcard--row .gcard__media{width:200px;height:100%;flex-shrink:0;border-bottom:0;border-right:1px solid var(--line)}
.gcard--row .gcard__body{flex:1;padding:20px 22px;display:flex;flex-direction:column;min-width:0}
.gcard--row .gcard__title{font-size:15px;height:auto;margin-bottom:10px;-webkit-line-clamp:1}
.gcard--row .gcard__desc{font-size:12.5px;color:var(--text-2);line-height:1.6;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard--row .gcard__foot{border-top:0;padding-top:0;margin-top:auto}
.gcard--row .gcard__acts{display:flex;gap:8px;margin-top:14px}

/* ============================================================
   详情页
   ============================================================ */
.pdp{display:grid;grid-template-columns:440px 1fr 260px;gap:28px;align-items:start;padding-bottom:20px}

.gallery{position:sticky;top:106px}
.gallery__main{height:400px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:zoom-in;
  background-image:
    linear-gradient(rgba(30,58,95,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,58,95,.04) 1px, transparent 1px);
  background-size:32px 32px;
}
.gallery__media{width:100%;height:100%;padding:28px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;position:relative;z-index:1}
.gallery__main .gallery__media svg{width:78%;height:78%;display:block}
.gallery__media img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;margin:0 auto;object-fit:contain}
.gallery__media--img img{transition:transform .25s ease}
.gallery__main:hover .gallery__media--img img{transform:scale(1.04)}
.gallery__tags{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;z-index:2}
.gallery__zoom{position:absolute;bottom:14px;right:14px;font-size:11.5px;color:var(--text-2);display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.9);padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);backdrop-filter:blur(6px);cursor:pointer;z-index:4}
.gallery__zoom svg{width:13px;height:13px}
.gallery__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.gallery__thumbs button{aspect-ratio:1;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;transition:all .2s;padding:6px}
.gallery__thumbs button:hover{border-color:var(--line-3)}
.gallery__thumbs button.is-active{border-color:var(--steel);background:var(--steel-soft)}
.gallery__thumbs button svg,.gallery__thumbs button img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}

/* 详情页 · 图片放大灯箱 */
.pdp-lightbox{position:fixed;inset:0;background:rgba(10,20,34,.92);z-index:10000;display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out;opacity:0;transition:opacity .2s}
.pdp-lightbox.is-on{display:flex;opacity:1}
.pdp-lightbox img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:var(--r-md);box-shadow:0 20px 60px rgba(0,0,0,.45);cursor:default}
.pdp-lightbox__close{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.pdp-lightbox__close:hover{background:rgba(255,255,255,.22)}
.pdp-lightbox__close svg{width:18px;height:18px}

.pinfo__hd{padding-bottom:18px;border-bottom:1px solid var(--line)}
.pinfo__hd .tags{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.pinfo__hd h1{font-size:24px;font-weight:700;line-height:1.4;letter-spacing:-.3px;margin-bottom:10px;color:var(--text-1)}
.pinfo__hd .code{font-family:var(--mono);font-size:12.5px;color:var(--text-3);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pinfo__hd .code b{color:var(--text-2);font-weight:500}

.pricebox{background:linear-gradient(135deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);border-left:3px solid var(--amber);border-radius:var(--r-lg);padding:18px 20px;margin:18px 0}
.pricebox__row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pricebox__row .lb{font-size:13px;color:var(--text-2);width:56px;flex-shrink:0}
.pricebox .remark{font-size:12.5px;color:var(--text-3);margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-2);display:flex;gap:16px;flex-wrap:wrap}
.pricebox .remark span{display:flex;align-items:center;gap:5px}
.pricebox .remark svg{width:13px;height:13px;color:var(--success)}

.sku{padding:20px 0;border-bottom:1px solid var(--line)}
.sku__lab{font-size:13px;color:var(--text-2);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.sku__lab .sel{color:var(--steel);font-weight:600}
.sku__opts{display:flex;flex-wrap:wrap;gap:9px}
.sku__opt{min-width:76px;padding:9px 15px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);font-size:13.5px;text-align:center;transition:all .2s;position:relative;color:var(--text-2)}
.sku__opt:hover{border-color:var(--line-3);color:var(--text-1)}
.sku__opt.is-active{border-color:var(--steel);background:var(--steel-soft);color:var(--steel);font-weight:600}
.sku__opt.is-disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.sku__opt .tick{position:absolute;bottom:-1px;right:-1px;width:0;height:0;border-style:solid;border-width:0 0 15px 15px;border-color:transparent transparent var(--steel) transparent;opacity:0;transition:opacity .2s}
.sku__opt.is-active .tick{opacity:1}
.sku__opt.is-active .tick::after{content:'';position:absolute;left:-13px;top:6px;width:5px;height:3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}

.buyline{display:flex;align-items:center;gap:14px;padding:20px 0;flex-wrap:wrap}
.buyline .lab{font-size:13px;color:var(--text-2)}
.buyline .stock{font-family:var(--mono);font-size:12.5px;color:var(--text-3);margin-left:6px}
.buyacts{display:flex;gap:12px;padding:6px 0 20px;flex-wrap:wrap}

.srvlist{display:flex;flex-wrap:wrap;gap:18px;padding:16px 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-2)}
.srvlist span{display:flex;align-items:center;gap:6px}
.srvlist svg{width:14px;height:14px;color:var(--success)}

/* 供应商卡 */
.vendor{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;position:sticky;top:106px}
.vendor__hd{padding:18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.vendor__hd .nm{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.vendor__hd .nm .lg{width:40px;height:40px;border-radius:var(--r-md);background:var(--steel);border:1px solid var(--steel);display:grid;place-items:center;overflow:hidden}
.vendor__hd .nm .lg svg{width:26px;height:26px}
.vendor__hd .nm b{font-size:14.5px;font-weight:700;color:var(--text-1)}
.vendor__hd .nm .bd{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:2px 7px;background:var(--amber-soft-2);color:var(--amber-deep);border-radius:var(--r-xs);margin-top:3px;font-weight:600}
.vendor__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.vendor__stats div{padding:8px 4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm)}
.vendor__stats b{display:block;font-family:var(--mono);font-size:15px;color:var(--steel);font-weight:700}
.vendor__stats span{font-size:10.5px;color:var(--text-3)}
.vendor__bd{padding:16px 18px;display:flex;flex-direction:column;gap:9px}
.vendor__bd .row{display:flex;justify-content:space-between;font-size:12.5px;gap:10px}
.vendor__bd .row span{color:var(--text-3);flex-shrink:0}
.vendor__bd .row b{color:var(--text-1);font-weight:500;text-align:right}
.vendor__ft{padding:14px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px;background:var(--surface-2)}

/* 详情 Tab */
.ptabs{margin-top:56px;position:relative;z-index:1}
.ptabs__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}
.ptabs__nav{display:flex;gap:2px;border-bottom:1px solid var(--line-2);margin-bottom:32px;background:var(--surface);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:0 8px;border:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.ptabs__nav button{padding:15px 24px;font-size:14.5px;font-weight:600;color:var(--text-2);position:relative;transition:color .2s}
.ptabs__nav button:hover{color:var(--text-1)}
.ptabs__nav button.is-active{color:var(--steel)}
.ptabs__nav button.is-active::after{content:'';position:absolute;left:16px;right:16px;bottom:-1px;height:2px;background:var(--steel);border-radius:1px}

.spec-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.spec-table th,.spec-table td{padding:13px 22px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--line)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table th{width:190px;background:var(--surface-3);color:var(--text-2);font-weight:500}
.spec-table td{color:var(--text-1);font-family:var(--mono)}
.spec-table tr:hover td{background:var(--surface-2)}

.detail-doc{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:32px 36px}
.detail-doc h3{font-size:17px;font-weight:700;margin:28px 0 14px;padding-left:12px;border-left:3px solid var(--amber);color:var(--text-1)}
.detail-doc h3:first-child{margin-top:0}
.detail-doc p{font-size:14px;color:var(--text-2);line-height:1.85;margin-bottom:14px}
.detail-doc ul{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.detail-doc ul li{font-size:14px;color:var(--text-2);line-height:1.7;padding-left:18px;position:relative}
.detail-doc ul li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:1px;background:var(--amber)}
.detail-doc ul li b{color:var(--text-1);font-weight:600}

.faq{display:flex;flex-direction:column;gap:10px}
.faq__i{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.faq__q{padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;transition:background .2s}
.faq__q:hover{background:var(--surface-2)}
.faq__q b{font-size:14px;font-weight:600;display:flex;align-items:center;gap:11px;color:var(--text-1)}
.faq__q b i{font-family:var(--mono);font-size:12px;color:var(--amber-deep);font-style:normal}
.faq__q svg{width:16px;height:16px;color:var(--text-3);transition:transform .25s;flex-shrink:0}
.faq__i.is-open .faq__q svg{transform:rotate(180deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.faq__i.is-open .faq__a{max-height:400px}
.faq__a p{padding:0 22px 18px;font-size:13.5px;color:var(--text-2);line-height:1.8}

/* ============================================================
   购物车
   ============================================================ */
.cart{position:relative;z-index:1;padding:8px 0 40px}
.cart__hd{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.cart__hd h1{font-size:24px;font-weight:800;letter-spacing:-.3px;color:var(--text-1)}
.cart__hd h1 em{font-family:var(--mono);font-size:15px;color:var(--text-3);font-weight:500;margin-left:10px}
.cart__table{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.cart__th{display:grid;grid-template-columns:44px 1fr 170px 150px 130px 80px;gap:14px;align-items:center;padding:15px 22px;background:var(--surface-3);border-bottom:1px solid var(--line-2);font-size:12.5px;color:var(--text-3)}
.cart__i{display:grid;grid-template-columns:44px 1fr 170px 150px 130px 80px;gap:14px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line);transition:background .2s}
.cart__i:last-child{border-bottom:0}
.cart__i:hover{background:var(--surface-2)}
.cart__i.is-off{opacity:.5}
.cart__i .g{display:flex;align-items:center;gap:14px;min-width:0}
.cart__i .g .pic{width:76px;height:76px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line-2);display:grid;place-items:center;flex-shrink:0;padding:7px}
.cart__i .g .pic svg{width:100%;height:100%}
.cart__i .g .tx{min-width:0}
.cart__i .g .tx b{display:block;font-size:14px;font-weight:600;margin-bottom:6px;line-height:1.45;color:var(--text-1)}
.cart__i .g .tx span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--text-3);margin-bottom:3px}
.cart__i .g .tx .tags{display:flex;gap:5px;margin-top:6px}
.cart__i .sp{font-family:var(--mono);font-size:12.5px;color:var(--text-2);line-height:1.7}
.cart__i .up{font-family:var(--mono);font-size:12px;color:var(--text-3);margin-top:2px}
.cart__i .st{font-size:11.5px;color:var(--success);margin-top:4px}
.cart__i .st.off{color:var(--danger)}
.cart__i .del{font-size:12.5px;color:var(--text-3);transition:color .2s}
.cart__i .del:hover{color:var(--danger)}
.cart__i .sub{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--amber-deep)}
.cart__i .act{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cart__i .act .buy{font-size:12px;color:var(--cyan);transition:color .2s;font-weight:500}
.cart__i .act .buy:hover{color:var(--cyan-2)}

.cart__bar{position:sticky;bottom:0;margin-top:16px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:0 -4px 20px rgba(22,32,46,.07)}
.cart__bar .l{display:flex;align-items:center;gap:22px;font-size:13px;color:var(--text-2);flex-wrap:wrap}
.cart__bar .l button{transition:color .2s}
.cart__bar .l button:hover{color:var(--danger)}
.cart__bar .r{display:flex;align-items:center;gap:22px}
.cart__bar .sum{text-align:right}
.cart__bar .sum .t{font-size:12.5px;color:var(--text-2);margin-bottom:3px}
.cart__bar .sum .t b{font-family:var(--mono);color:var(--amber-deep)}

/* ============================================================
   结算页
   ============================================================ */
.checkout{position:relative;z-index:1;padding:8px 0 60px}
.checkout h1{font-size:24px;font-weight:800;margin-bottom:22px;letter-spacing:-.3px;color:var(--text-1)}
.co__grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.co__sec{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:24px 26px;margin-bottom:16px}
.co__sec > h2{font-size:16px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:10px;color:var(--text-1)}
.co__sec > h2 .no{width:22px;height:22px;border-radius:var(--r-xs);background:var(--steel);color:#fff;font-family:var(--mono);font-size:12px;display:grid;place-items:center;font-weight:700}
.co__sec > h2 .edit{margin-left:auto;font-size:12.5px;color:var(--cyan);font-weight:500;transition:color .2s}
.co__sec > h2 .edit:hover{color:var(--cyan-2)}

.addr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.addr{position:relative;padding:16px 18px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);cursor:pointer;transition:all .2s}
.addr:hover{border-color:var(--line-3)}
.addr.is-active{border-color:var(--steel);background:var(--steel-soft)}
.addr .top{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.addr .top b{font-size:14px;font-weight:700;color:var(--text-1)}
.addr .top .tag{margin-left:auto}
.addr .ph{font-family:var(--mono);font-size:12.5px;color:var(--text-2);margin-bottom:5px}
.addr .dt{font-size:12.5px;color:var(--text-3);line-height:1.6}
.addr .mk{position:absolute;bottom:0;right:0;width:0;height:0;border-style:solid;border-width:0 0 24px 24px;border-color:transparent transparent var(--steel) transparent;opacity:0;transition:opacity .2s}
.addr.is-active .mk{opacity:1}
.addr .mk::after{content:'';position:absolute;right:-21px;top:11px;width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.addr--add{display:grid;place-items:center;gap:7px;border-style:dashed;color:var(--text-3);min-height:104px;background:var(--surface-2)}
.addr--add:hover{border-color:var(--steel-3);color:var(--steel);background:var(--steel-soft)}
.addr--add svg{width:20px;height:20px}
.addr--add span{font-size:13px}

.co__goods{display:flex;flex-direction:column;gap:12px}
.co__gi{display:flex;align-items:center;gap:14px;padding:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md)}
.co__gi .pic{width:58px;height:58px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line-2);display:grid;place-items:center;flex-shrink:0;padding:6px}
.co__gi .pic svg{width:100%;height:100%}
.co__gi .tx{flex:1;min-width:0}
.co__gi .tx b{display:block;font-size:13.5px;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-1)}
.co__gi .tx span{font-family:var(--mono);font-size:11.5px;color:var(--text-3)}
.co__gi .qt{font-family:var(--mono);font-size:13px;color:var(--text-2);flex-shrink:0}
.co__gi .pr{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--amber-deep);flex-shrink:0;min-width:88px;text-align:right}

.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.opt{padding:15px 18px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);cursor:pointer;transition:all .2s}
.opt:hover{border-color:var(--line-3)}
.opt.is-active{border-color:var(--steel);background:var(--steel-soft)}
.opt b{display:block;font-size:14px;font-weight:600;margin-bottom:4px;color:var(--text-1)}
.opt span{font-size:12px;color:var(--text-3)}
.opt .ex{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--amber-deep);font-weight:600}

.paylist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pay{display:flex;align-items:center;gap:12px;padding:15px 18px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);cursor:pointer;transition:all .2s}
.pay:hover{border-color:var(--line-3)}
.pay.is-active{border-color:var(--steel);background:var(--steel-soft)}
.pay .ic{width:34px;height:34px;border-radius:var(--r-sm);background:var(--surface-3);display:grid;place-items:center;flex-shrink:0;color:var(--steel)}
.pay .ic svg{width:18px;height:18px}
.pay b{display:block;font-size:13.5px;font-weight:600;color:var(--text-1)}
.pay span{font-size:11.5px;color:var(--text-3)}

.inv-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.inv-grid .opt{min-width:130px;flex:0 0 auto}

/* 金额汇总 */
.summary{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:24px 26px;position:sticky;top:106px}
.summary h2{font-size:16px;font-weight:700;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line-2);color:var(--text-1)}
.summary .row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;padding:8px 0;color:var(--text-2)}
.summary .row b{font-family:var(--mono);color:var(--text-1);font-weight:600}
.summary .row.dis b{color:var(--danger)}
.summary .div{height:1px;background:var(--line-2);margin:12px 0}
.summary .fin{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:4px}
.summary .fin .lb{font-size:13.5px;color:var(--text-2)}
.summary .note{font-size:11.5px;color:var(--text-3);line-height:1.7;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-2)}
.summary .agree{margin:16px 0 14px;font-size:12.5px;color:var(--text-2)}
.summary .agree a{color:var(--cyan)}
.summary .agree{border:1px solid transparent;border-radius:var(--r-xs);padding:10px 12px;transition:background .18s,border-color .18s}
.summary .agree.is-agreed{background:rgba(15,124,138,.08);border-color:rgba(15,124,138,.4);color:var(--steel)}
.summary .agree.is-agreed a{color:var(--cyan)}
.summary .agree .hint{display:none;margin-top:8px;font-size:11.5px;font-weight:600;color:var(--cyan)}
.summary .agree.is-agreed .hint{display:block}
.summary .agree input:checked + .box{background:var(--cyan);border-color:var(--cyan)}
#submit:not(.ready){background:var(--line-2);color:var(--text-3);box-shadow:none;cursor:not-allowed}
#submit:not(.ready):hover{background:var(--line-2)}

/* ============================================================
   下单成功
   ============================================================ */
.done{position:relative;z-index:1;padding:56px 0 80px;text-align:center}
.done__ico{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;background:rgba(47,158,110,.1);border:1px solid rgba(47,158,110,.3);display:grid;place-items:center;animation:pop .45s var(--ease)}
.done__ico svg{width:36px;height:36px;color:var(--success)}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.done h1{font-size:26px;font-weight:800;margin-bottom:10px;letter-spacing:-.3px;color:var(--text-1)}
.done .sub{font-size:14px;color:var(--text-2);margin-bottom:32px}
.done__card{max-width:660px;margin:0 auto;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:28px 32px;text-align:left;box-shadow:var(--shadow)}
.done__card .top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.done__card .top .oid{font-family:var(--mono);font-size:15px;color:var(--steel);font-weight:700}
.done__card .top .cp{font-size:12px;color:var(--cyan);cursor:pointer;transition:color .2s;font-weight:500}
.done__card .top .cp:hover{color:var(--cyan-2)}
.done__rows{display:flex;flex-direction:column;gap:11px}
.done__rows .r{display:flex;gap:14px;font-size:13.5px}
.done__rows .r .k{width:80px;color:var(--text-3);flex-shrink:0}
.done__rows .r .v{color:var(--text-1);flex:1}
.done__rows .r .v b{font-family:var(--mono);color:var(--amber-deep)}
.done__next{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:32px}
.done__tips{max-width:660px;margin:32px auto 0;background:var(--surface-2);border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:20px 24px;text-align:left}
.done__tips h4{font-size:13.5px;font-weight:700;margin-bottom:12px;color:var(--text-2)}
.done__tips ul{display:flex;flex-direction:column;gap:8px}
.done__tips li{font-size:12.5px;color:var(--text-3);line-height:1.7;padding-left:16px;position:relative}
.done__tips li::before{content:'';position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:1px;background:var(--amber)}

/* ============================================================
   Footer —— 钢蓝深底，收住页面重心
   ============================================================ */
.footer{position:relative;z-index:1;background:var(--steel);border-top:3px solid var(--amber);margin-top:72px;color:rgba(255,255,255,.65)}
.footer__svc{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid rgba(255,255,255,.1)}
.footer__svc .i{display:flex;align-items:center;justify-content:center;gap:11px;padding:30px 18px;border-right:1px solid rgba(255,255,255,.1);font-size:13.5px}
.footer__svc .i:last-child{border-right:0}
.footer__svc .i svg{width:22px;height:22px;color:var(--amber-2);flex-shrink:0}
.footer__svc .i b{color:#fff;font-weight:600}
.footer__in{max-width:var(--maxw);margin:0 auto;padding:44px var(--pad-x) 32px;display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1.2fr;gap:36px}
.footer__brand p{font-size:12.5px;line-height:1.75;margin:16px 0 18px}
.footer__brand .logo__mark{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
.footer__brand .logo__txt strong{color:#fff}
.footer__brand .logo__txt em{color:rgba(255,255,255,.5)}
.footer__brand .logo__txt strong span{color:rgba(255,255,255,.4)}
.footer__ct{display:flex;flex-direction:column;gap:10px}
.footer__ct .tel{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--amber-2)}
.footer__ct .tm{font-size:12px;color:rgba(255,255,255,.5)}
.footer__ct .tel--mb{font-family:var(--mono);font-size:15px;font-weight:600;color:#fff;opacity:.92;margin-top:2px}
.footer__ct .tel--mb i{font-style:normal;font-size:12px;font-weight:500;color:rgba(255,255,255,.6);margin-right:7px}
.footer__col h4{font-size:13.5px;color:#fff;font-weight:700;margin:0 0 16px;letter-spacing:.5px}
.footer__col a{display:block;font-size:12.5px;color:rgba(255,255,255,.55);padding:5px 0;transition:all .2s}
.footer__col a:hover{color:var(--amber-2);padding-left:5px}
/* v-20260929a：页脚二维码由「棋盘格占位」换成真实码图（企业微信 / 顾问微信）。
   flex-wrap 兜底：窄屏两列布局下若列宽不足则换行，避免撑破页脚。 */
.footer__qr{display:flex;gap:14px;flex-wrap:wrap}
.footer__qr .q{text-align:center;cursor:zoom-in}
.footer__qr .q .img{width:100px;height:100px;background:#fff;border-radius:var(--r-md);margin-bottom:7px;
  display:block;object-fit:contain;transition:box-shadow .18s}
.footer__qr .q:hover .img{box-shadow:0 0 0 2px rgba(192,152,96,.55)}
.footer__qr .q em{display:block;font-style:normal;font-size:10.5px;line-height:1.3;color:rgba(255,255,255,.34);margin-top:1px}
.footer__qr .q span{font-size:11.5px;color:rgba(255,255,255,.5)}
.footer__bt{max-width:var(--maxw);margin:0 auto;padding:20px var(--pad-x) 32px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;color:rgba(255,255,255,.45);flex-wrap:wrap}
.footer__bt .lk{display:flex;align-items:center;gap:14px}
.footer__bt .lk a{transition:color .2s}
.footer__bt .lk a:hover{color:var(--amber-2)}
.footer__bt .lk .sp{color:rgba(255,255,255,.2)}

/* ---------- 右侧悬浮工具条（宽屏填充右侧空白） ---------- */
.sidetools{display:none}
/* v22：断点 1560→1720。版心加宽到 1540 后页边 =(100vw-1540)/2，1720 以下页边 <90px，
   而本元素定位是「贴视口边」→ 会压到内容文字上；1720 起页边 ≥90，正好落在内容 32px padding 之外。
   公式常量 752→842 同步（842 = 1540/2 + 72，与原 752 = 1360/2 + 72 语义一致）。 */
@media (min-width:1720px){
  .sidetools{
    display:flex;flex-direction:column;
    position:fixed;right:clamp(14px, calc(50vw - 842px), 22px);top:50%;
    transform:translateY(-50%);z-index:60;
    background:linear-gradient(180deg,#e9eff7 0%,#dde7f1 100%);
    border:1px solid #c6d4e3;
    border-radius:20px;overflow:hidden;
    box-shadow:0 14px 34px rgba(22,42,66,.16),0 3px 8px rgba(22,42,66,.08);
  }
  /* 顶部品牌色条，与左侧品牌头呼应 */
  .sidetools::before{
    content:'';position:absolute;top:0;left:14px;right:14px;height:3px;
    border-radius:0 0 4px 4px;
    background:linear-gradient(90deg,var(--steel),var(--cyan));z-index:1;
  }
  .sidetools a{
    width:52px;height:52px;display:grid;place-items:center;
    color:var(--text-3);position:relative;
    border-bottom:1px solid rgba(27,53,86,.07);transition:all .2s var(--ease);
  }
  .sidetools a:last-child{border-bottom:0}
  .sidetools a:hover{background:var(--steel);color:#fff}
  .sidetools svg{width:20px;height:20px}
  /* hover 左侧弹出说明 */
  .sidetools a::after{
    content:attr(data-tip);
    position:absolute;right:calc(100% + 9px);top:50%;transform:translateY(-50%);
    background:var(--steel);color:#fff;padding:5px 11px;border-radius:var(--r-sm);
    font-size:12px;font-weight:500;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .2s var(--ease);
    box-shadow:var(--shadow-md);
  }
  .sidetools a:hover::after{opacity:1}
}

/* ---------- 左侧竖向导航栏（宽屏填充左侧空白，与右侧工具条对称，设计感导航） ---------- */
/* ---------- 侧面留白设备线稿装饰（宽屏填充左右外边距，极淡、高级） ----------
   v22：版心由 1360 加宽到 1540，页边留白 = (100vw - 1540px)/2，
   故公式由 calc(50vw - 680px) 改为 calc(50vw - 770px)（770 = 1540/2），
   断点由 1560 提到 1720（此时页边才 ≥90px，放得下完整线稿；更窄会缩成碎片）。 */
.equip-deco{display:none}
@media (min-width:1720px){
  .equip-deco{
    display:block;position:fixed;top:0;bottom:0;width:calc(50vw - 770px);max-width:380px;min-width:0;
    z-index:0;pointer-events:none;
  background:url(assets/equip-line.svg?v=20260923q) center/contain no-repeat;
  opacity:.2;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.9) 6%,rgba(0,0,0,.95) 94%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.9) 6%,rgba(0,0,0,.95) 94%,transparent 100%);
  }
  .equip-deco--l{left:0;background-position:left center}
  .equip-deco--r{right:0;background-position:right center;transform:scaleX(-1)}
}

/* ---------- 楼层头/分类页顶部的淡色设备线稿背景 ---------- */
.floor--tint,.banner-mini{position:relative}
.floor--tint::after,.banner-mini::before{
  content:'';position:absolute;left:0;right:0;top:0;height:90px;pointer-events:none;z-index:0;
  background:url(assets/equip-line-floor.svg?v=20260921f) center top/auto 70px no-repeat;
  opacity:.22;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.5) 70%,transparent 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.5) 70%,transparent 100%);
}
.banner-mini::before{height:70px;background-size:auto 55px;opacity:.18;top:auto;bottom:100%}
.floor--tint>* , .banner-mini>* {position:relative;z-index:1}

.leftrail{display:none}
/* v22：断点 1560→1720，常量 764→854（= 1540/2 + 84），理由同 .sidetools。 */
@media (min-width:1720px){
  .leftrail{
    display:flex;flex-direction:column;align-items:center;
    position:fixed;left:clamp(14px, calc(50vw - 854px), 22px);top:50%;
    transform:translateY(-50%);z-index:60;width:74px;padding:14px 0 13px;
    background:linear-gradient(180deg,#ffffff 0%,#f2f7fc 100%);
    border:1px solid var(--line-2);border-radius:20px;
    box-shadow:0 14px 34px rgba(22,42,66,.12),0 3px 8px rgba(22,42,66,.06);
  }
  /* 品牌渐变头 */
  .leftrail .lr-brand{
    width:48px;height:48px;border-radius:15px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:2px;
    background:linear-gradient(145deg,var(--steel) 0%,#244a73 52%,var(--cyan) 138%);
    box-shadow:0 6px 16px rgba(27,53,86,.34);
    transition:transform .2s var(--ease),box-shadow .2s var(--ease);
  }
  .leftrail .lr-brand:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(27,53,86,.42)}
  .leftrail .lr-brand svg{width:25px;height:25px;filter:brightness(0) invert(1)}
  .leftrail .lr-brand__t{font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:1.5px;color:#d4e3f1;line-height:1}
  /* 渐隐分隔线（非硬格线） */
  .leftrail .lr-div{width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);margin:7px 0}
  /* 导航 */
  .leftrail .lr-nav{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%}
  .leftrail .lr-link{
    width:60px;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 0;border-radius:13px;color:var(--text-3);text-decoration:none;
    position:relative;transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
  }
  .leftrail .lr-link svg{width:21px;height:21px;transition:transform .2s var(--ease)}
  .leftrail .lr-link span{font-size:11px;font-weight:600;letter-spacing:1px;line-height:1}
  .leftrail .lr-link:hover{background:rgba(27,53,86,.07);color:var(--steel)}
  .leftrail .lr-link:hover svg{transform:scale(1.08)}
  .leftrail .lr-link.is-active{
    background:linear-gradient(180deg,var(--steel),#22456b);color:#fff;
    box-shadow:0 7px 15px rgba(27,53,86,.32);
  }
  /* 琥珀金激活指示（贴导航栏左缘，像 active tab 标记） */
  .leftrail .lr-link.is-active::before{
    content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);
    width:3px;height:26px;border-radius:3px;
    background:linear-gradient(180deg,#e2a93a,#c8920f);
    box-shadow:0 0 8px rgba(226,169,58,.55);
  }
  /* 服务在线 */
  .leftrail .lr-status{display:flex;flex-direction:column;align-items:center;gap:7px}
  .leftrail .lr-dot{
    width:9px;height:9px;border-radius:50%;background:var(--cyan);
    box-shadow:0 0 0 4px rgba(15,124,138,.16);position:relative;flex:none;
  }
  .leftrail .lr-dot::after{
    content:'';position:absolute;inset:0;border-radius:50%;border:1px solid var(--cyan);
    animation:lrPulse 2.4s ease-out infinite;
  }
  .leftrail .lr-status__t{
    font-size:10px;letter-spacing:2px;color:var(--text-3);user-select:none;
  }
}
@keyframes lrPulse{0%{transform:scale(.7);opacity:.7}100%{transform:scale(2.4);opacity:0}}

/* ---------- 移动端底部 Tab 导航 ---------- */
.mtab{display:none}
@media (max-width:760px){
  .mtab{
    display:flex;position:fixed;left:0;right:0;bottom:0;
    height:calc(56px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:rgba(255,255,255,.97);
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-top:1px solid var(--line-2);
    box-shadow:0 -2px 14px rgba(22,32,46,.08);
    z-index:90;
  }
  .mtab a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;font-size:10.5px;font-weight:600;color:var(--text-3);position:relative;
    -webkit-tap-highlight-color:transparent;
  }
  .mtab a svg{width:22px;height:22px}
  .mtab a.is-active{color:var(--steel)}
  .mtab__bdg{
    position:absolute;top:3px;left:50%;margin-left:5px;
    min-width:16px;height:16px;padding:0 4px;
    background:var(--amber);color:#fff;border-radius:8px;
    font-family:var(--mono);font-size:10px;font-weight:700;
    display:grid;place-items:center;
  }
  /* 页面底部让出导航空间 */
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  /* 购物车结算栏上移，避免被导航盖住 */
  .cart__bar{bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:1200px){
  :root{--pad-x:20px}
  .pdp{grid-template-columns:380px 1fr}
  .vendor{display:none}
  .hero__grid{grid-template-columns:1fr;height:auto}
  .hero__side{grid-template-rows:auto;grid-template-columns:1fr 1fr}
  .banner{min-height:300px;padding:0 36px}
  .banner::before{right:20px;width:200px;height:200px}
  .banner::after{right:98px}
  .seckill__bd{grid-template-columns:repeat(3,1fr)}
  .goodsgrid{grid-template-columns:repeat(3,1fr)}
  .catfloor__grid{grid-template-columns:repeat(3,1fr)}
  .rankfloor{grid-template-columns:1fr}
  .footer__in{grid-template-columns:1fr 1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:980px){
  .header__in{flex-wrap:wrap;gap:14px}
  .search{order:3;max-width:none;flex:1 0 100%}
  .search .hot{display:none}
  .promise{grid-template-columns:repeat(3,1fr);gap:14px 0}
  .promise__i{border-right:0}
  .plp{grid-template-columns:1fr}
  .filter{position:static}
  .co__grid{grid-template-columns:1fr}
  .summary{position:static}
  .spec-table th{width:130px}
  .cart__th,.cart__i{grid-template-columns:40px 1fr 110px 90px}
  .cart__th span:nth-child(5),.cart__i .sub{display:none}
  .cart__th span:nth-child(4){display:none}
  .cart__i .stepper{display:none}
}
@media (max-width:720px){
  .topbar__l{display:none}
  .banner h1{font-size:26px}
  .banner{padding:0}
  .banner::before,.banner::after{display:none}
  .banner__txt{padding:0 22px}
  .banner__dots{left:22px}
  .hero__side{grid-template-columns:1fr}
  .seckill__bd{grid-template-columns:repeat(2,1fr)}
  .goodsgrid,.catfloor__grid{grid-template-columns:repeat(2,1fr)}
  .rebuy{grid-template-columns:repeat(3,1fr)}
  .guarantee{grid-template-columns:1fr 1fr}
  .footer__svc{grid-template-columns:1fr 1fr;gap:1px 0}
  .footer__svc .i:nth-child(2){border-right:0}
  .footer__in{grid-template-columns:1fr 1fr}
  .addr-grid,.opt-grid,.paylist{grid-template-columns:1fr}
  .pdp{grid-template-columns:1fr}
  .gallery{position:static}
  .ranklist__hd,.ranklist__i{grid-template-columns:34px 1fr 92px}
  .ranklist__hd span:nth-child(4),.ranklist__i .sk{display:none}
  .cart__th,.cart__i{grid-template-columns:34px 1fr 76px}
  .detail-doc{padding:22px 20px}
}

/* ============================================================
   移动端增强 —— 触控尺寸 / 比例 / 卡片化 / 底部导航避让
   ============================================================ */
@media (max-width:760px){
  :root{--pad-x:16px}

  /* 楼层纵向留白收紧（桌面 54px 在大屏才合适） */
  .floor{padding:38px 0}

  /* ---- 顶部：收窄，分类入口交给底部 Tab ---- */
  .allcat{display:none}
  .header__in{gap:12px;padding:11px var(--pad-x)}
  .logo__mark{width:36px;height:36px}
  .logo__mark svg{width:22px;height:22px}
  .logo__txt strong{font-size:15px}
  .logo__txt strong span{display:none}
  .logo__txt em{font-size:9.5px}
  .search{height:38px}
  .search input{font-size:13px}
  .search button{padding:0 15px;font-size:13px}
  .cartbtn{padding:0 12px;height:38px;font-size:12.5px}
  .cb-tx{display:none}
  .hd__icon{width:38px;height:38px}
  .hd__icon svg{width:17px;height:17px}

  /* 分类条保留但收窄，可横向滑动 */
  .catnav__in{height:42px}
  .catnav a{padding:0 13px;font-size:13px;height:42px}
  .catnav .promo{display:none}
  /* 右侧渐隐，提示分类条还能继续横向滑动 */
  .catnav{position:relative}
  .catnav::after{content:'';position:absolute;right:0;top:0;bottom:0;width:34px;pointer-events:none;z-index:2;
    background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.94) 78%)}

  /* ---- Banner 比例 ---- */
  .hero{margin-top:16px}
  .banner{min-height:240px;padding:26px 20px}
  .banner h1{font-size:23px;line-height:1.3;margin-bottom:12px}
  .banner p{font-size:13.5px;margin-bottom:20px;line-height:1.65}
  .banner__cta{gap:10px}
  .banner__cta .btn{flex:1;height:46px;padding:0 16px;font-size:14px}
  .banner__dots{bottom:16px;left:20px}
  .hero__grid{gap:12px}
  .hero__side{gap:12px}
  .sidecard{padding:18px 20px}

  /* ---- 触控尺寸：按下目标不小于 44px ---- */
  .btn{height:44px}
  .btn--lg{height:48px}
  .btn--sm{height:36px;padding:0 14px}
  .stepper button{width:40px;height:40px;font-size:18px}
  .stepper input{width:54px;height:40px}
  .stepper--lg button{width:46px;height:46px}
  .stepper--lg input{width:66px;height:46px}
  .gcard__btn{width:38px;height:38px}

  /* ---- 商品卡：压扁图片，比例更协调 ---- */
  .gcard__media{height:132px}
  .gcard__body{padding:12px 13px 14px}
  .gcard__title{font-size:13px;height:38px;margin-bottom:8px}
  .gcard__spec{margin-bottom:9px}
  .gcard__foot .sales{font-size:10.5px}
  .price--lg{font-size:22px}
  .goodsgrid,.catfloor__grid{gap:10px}
  .seckill__i{padding:14px 12px}
  .seckill__i .thumb{height:94px;margin-bottom:10px}
  .seckill__i h4{font-size:12.5px;height:36px}

  /* ---- 分类楼层侧栏：改横向条 ---- */
  .catfloor{grid-template-columns:1fr;gap:12px}
  .catfloor__side{padding:18px 20px;flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px}
  .catfloor__side h3{font-size:18px;margin-bottom:4px}
  .catfloor__side p{margin-bottom:0;font-size:12.5px;flex:1;min-width:170px}
  .catfloor__side .sub{margin-bottom:0}
  .catfloor__side .more{margin-left:auto}
  .cside__series,.cside__specs{display:none}
  .floor__lead p{max-width:100%;order:2}
  .floor__chips{order:1;width:100%}
  .catfloor__extra{grid-column:1;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:0}
  .catfloor__extra-i{padding:13px 14px;gap:11px}
  .catfloor__extra-ic{width:36px;height:36px}
  .catfloor__extra-ic svg{width:19px;height:19px}
  .catfloor__extra-tx b{font-size:13px}
  .catfloor__extra-tx span{font-size:11px}
  .catfloor__extra-arw{display:none}

  /* ---- 热销榜 / 耗材 ---- */
  .ranklist__i{padding:12px 14px}
  .ranklist__i .nm .tx b{font-size:13px}
  .ranklist__i .nm .pic{width:40px;height:40px}
  .rebuy{gap:8px}
  .rebuy__i{padding:12px 8px}
  .rebuy__i .pic{height:48px}
  .rebuy__i .pic svg{width:52px;height:48px}
  .rebuy__i b{font-size:11.5px}
  .guarantee{grid-template-columns:1fr;gap:10px}
  .guarantee__i{padding:16px}

  /* ---- 详情页 ---- */
  .gallery__main{height:250px}
  .gallery__main .gallery__media svg{width:68%;height:68%}   /* v-20260928h：原是 .gallery__main svg，会误伤 .gallery__zoom/.gallery__dl 内的图标 → 胶囊被撑成整块遮罩 */
  .gallery__thumbs{gap:8px;margin-top:10px}
  .pinfo__hd h1{font-size:19px}
  .price--xl{font-size:30px}
  .pricebox{padding:16px}
  .sku__opt{min-width:66px;padding:11px 14px;font-size:13px}
  .buyacts{gap:10px;flex-wrap:wrap}
  .buyacts .btn{flex:1;min-width:calc(50% - 5px);height:46px;padding:0 14px;font-size:14px}
  .buyacts .btn:first-child{flex:1 0 100%}
  .srvlist{gap:10px 16px;font-size:12px}
  .ptabs__nav{padding:0 4px;gap:0;overflow-x:auto;scrollbar-width:none}
  .ptabs__nav::-webkit-scrollbar{display:none}
  .ptabs__nav button{padding:13px 15px;font-size:13.5px;white-space:nowrap}
  .spec-table th{width:112px;padding:11px 14px;font-size:12.5px}
  .spec-table td{padding:11px 14px;font-size:12.5px}
  .packlist{grid-template-columns:1fr}
  .detail-doc{padding:20px 18px}

  /* ---- 购物车：表格转卡片 ---- */
  .cart__th{display:none}
  .cart__i{
    grid-template-columns:32px 1fr;
    grid-template-areas:
      "chk  g"
      "meta meta"
      "qty  sub"
      "act  act";
    gap:12px 12px;padding:14px;
  }
  .cart__i > .cbox{grid-area:chk}
  .cart__i .g{grid-area:g}
  .cart__i .meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
  .cart__i .meta .up{margin-top:0}
  .cart__i .meta .st{margin-top:0}
  .cart__i .stepper{grid-area:qty;display:inline-flex;justify-self:start}
  .cart__i .sub{grid-area:sub;display:block;justify-self:end;align-self:center;font-size:17px}
  .cart__i .act{
    grid-area:act;flex-direction:row;align-items:center;gap:20px;
    padding-top:11px;border-top:1px dashed var(--line-2);
  }
  .cart__i .g .pic{width:68px;height:68px}
  .cart__bar{flex-direction:column;align-items:stretch;gap:14px;padding:14px 16px}
  .cart__bar .l{justify-content:space-between;gap:10px;font-size:12.5px}
  .cart__bar .r{justify-content:space-between;align-items:center}
  .cart__bar .sum{text-align:left}
  .cart__hd h1{font-size:20px}
  .cart__hd h1 em{font-size:13px}

  /* ---- 结算 / 成功页 ---- */
  .checkout h1{font-size:20px}
  .co__sec{padding:18px 16px}
  .summary{padding:18px 16px}
  .done{padding:36px 0 60px}
  .done h1{font-size:21px}
  .done__card{padding:20px 18px}
  .done__rows .r{flex-direction:column;gap:2px}
  .done__rows .r .k{width:auto;font-size:12px}
  .done__next{flex-direction:column;gap:10px}
  .done__next .btn{width:100%}
  .done__tips{padding:18px 20px}

  /* Toast 移到底部，靠近操作区 */
  .toast{top:auto;bottom:calc(74px + env(safe-area-inset-bottom));transform:translate(-50%,16px)}
  .toast.is-show{transform:translate(-50%,0)}
}

/* ============================================================
   小屏手机（≤480px）
   ============================================================ */
@media (max-width:480px){
  :root{--pad-x:12px}
  .banner h1{font-size:20px}
  .banner p{font-size:13px}
  .banner__cta{flex-direction:column}
  .banner__cta .btn{width:100%}
  .goodsgrid,.catfloor__grid,.seckill__bd{grid-template-columns:repeat(2,1fr);gap:8px}
  .catfloor__extra{grid-template-columns:1fr;gap:8px}
  .catfloor__extra-i{padding:11px 12px}
  .catfloor__extra-tx b{font-size:12.5px}
  .gcard__media{height:118px}
  .gcard__title{font-size:12.5px;height:34px}
  .gcard__spec span{font-size:9.5px;padding:2px 5px}
  .gcard__body{padding:11px 12px 13px}
  .rebuy{grid-template-columns:repeat(2,1fr)}
  .promise{grid-template-columns:repeat(2,1fr);padding:12px 0;gap:8px 0}
  .promise__i{padding:4px 10px;font-size:12px;gap:7px}
  .promise__i svg{width:16px;height:16px}
  .floor{padding:32px 0}
  .floor__head{margin-bottom:16px;gap:12px}
  .floor__title h2{font-size:19px}
  .floor__title h2::before{font-size:10.5px;margin-right:7px}
  .floor__title .en{display:none}
  .floor__title .bar{height:16px}
  .gallery__main{height:210px}
  .pinfo__hd h1{font-size:17.5px}
  .price--xl{font-size:27px}
  .buyacts .btn{min-width:100%;flex:1 0 100%}
  .sku__opts{gap:7px}
  .sku__opt{min-width:60px;padding:10px 12px;font-size:12.5px}
  .cart__i .g .pic{width:60px;height:60px}
  .cart__i .g .tx b{font-size:13px}
  .cart__i .act{gap:16px}
  .footer__in{grid-template-columns:1fr;gap:26px}
  .footer__svc{grid-template-columns:1fr}
  .footer__svc .i{border-right:0;border-bottom:1px solid rgba(255,255,255,.1);padding:16px}
  .footer__svc .i:last-child{border-bottom:0}
  .footer__qr{gap:12px}
  .footer__qr .q .img{width:92px;height:92px}
}

/* ============================================================
   大屏增强（≥1500px）—— 提高内容密度，避免超宽屏两侧过空
   ============================================================ */
@media (min-width:1500px){
  .gcard__media{height:186px}
  .gcard__title{font-size:14px}
  .seckill__i .thumb{height:132px}
  .catfloor{grid-template-columns:240px 1fr}
  .hero__grid{height:366px}
  .banner h1{font-size:42px}
  .banner p{font-size:16px}
}
@media (min-width:1700px){
  /* 列表页商品 5 列，进一步吃掉横向空白 */
  .plp__main .goodsgrid{grid-template-columns:repeat(5,1fr)}
  .hero__grid{height:390px}
  .rankfloor{grid-template-columns:1fr 340px}
  .rebuy{grid-template-columns:repeat(6,1fr);gap:16px}
  .guarantee{gap:20px}
}

/* ============================================================
   会员价 / 阶梯价 / 登录弹窗
   ============================================================ */
.mem-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;line-height:1;padding:3px 7px;border-radius:4px;font-family:var(--mono);letter-spacing:.2px;vertical-align:middle;margin-left:4px}
.mem-tag--amber{background:rgba(140,151,163,.14);color:var(--amber-deep)}
.mem-tag--cyan{background:rgba(15,124,138,.12);color:#0f7c8a}
.mem-tag--silver{background:var(--surface-3);color:var(--text-2)}
.price-old{font-size:12px;color:var(--text-3);text-decoration:line-through;font-family:var(--mono);margin-left:3px}
.mem-hint{display:inline-block;margin-top:5px;font-size:11.5px;color:var(--amber-deep);font-weight:600;cursor:pointer;border-bottom:1px dashed currentColor}

/* 顶栏会员卡 —— 深色底专用：玻璃胶囊 + 等级色徽标（浅色底不再使用该组件） */
.topbar .mem-chip{
  display:inline-flex;align-items:center;gap:7px;height:25px;
  padding:0 3px 0 11px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
  font-size:12.5px;line-height:1;letter-spacing:.2px;color:rgba(255,255,255,.74);
  transition:background .2s,border-color .2s;
}
.topbar .mem-chip:hover{background:linear-gradient(180deg,rgba(255,255,255,.19),rgba(255,255,255,.08));border-color:rgba(255,255,255,.28)}
.topbar .mem-chip b{color:#f2f6fa;font-weight:600;letter-spacing:.3px;transition:color .2s}
.topbar .mem-chip:hover b{color:#fff}
.topbar .mem-chip .mem-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block}
.topbar .mem-lv{
  display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.6px;line-height:1;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
}
.topbar .mem-out{
  display:inline-flex;align-items:center;height:25px;padding:0 11px;margin-left:0;
  border-left:1px solid rgba(255,255,255,.16);border-radius:0 999px 999px 0;
  color:rgba(255,255,255,.46);font-size:11.5px;cursor:pointer;
  transition:color .18s,background .18s;
}
.topbar .mem-out:hover{color:#ffd7cb;background:rgba(224,105,74,.18)}

/* ============================================================
   视频播放（商品主图 / 案例库 / 素材下载中心 共用）
   ============================================================ */
.vplay{display:block;width:100%;height:100%;object-fit:contain;background:#0e1622;border-radius:var(--r-md);border:1px solid var(--line-2)}
.vph{position:relative;width:100%;border-radius:var(--r-md);overflow:hidden;display:grid;place-items:center;background:#16243a;border:1px solid var(--line-2)}
.vph__bg{position:absolute;inset:0;background:linear-gradient(135deg,#1b3556,#3a6694);opacity:.94}
.vph__bg::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px}
.vph__btn{position:relative;z-index:2;width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(0,0,0,.26);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .2s,background .2s}
.vph__btn:hover{background:rgba(0,0,0,.44);transform:scale(1.06)}
.vph__btn svg{width:25px;height:25px;margin-left:3px}
.vph__tt{position:absolute;z-index:2;left:0;right:0;bottom:32px;text-align:center;color:#fff;font-size:13px;font-weight:600;line-height:1.5;padding:0 14px}
.vph__sub{position:absolute;z-index:2;left:0;right:0;bottom:12px;text-align:center;color:rgba(255,255,255,.72);font-size:11.5px;padding:0 14px}

/* 商品详情 · 图册支持视频 */
.gallery__media .vplay,.gallery__media .vph{width:100%}
.gallery__thumbs button.is-video{border-color:var(--cyan)}
.g-thumb-v{position:absolute;left:4px;top:4px;width:21px;height:21px;border-radius:5px;background:rgba(15,124,138,.94);color:#fff;display:grid;place-items:center;z-index:3}
.g-thumb-v svg{width:11px;height:11px}
.g-thumb-lb{position:absolute;left:0;right:0;bottom:3px;text-align:center;font-size:9.5px;color:var(--cyan);font-weight:600;z-index:3}

/* 案例库 / 素材中心 · 弹窗播放区 */
.pv-box{margin:12px 0 4px}
.pv-box .vplay,.pv-box .vph{border-radius:var(--r-md)}
@media (max-width:720px){
  .vph__tt{font-size:12px;bottom:28px}
  .vph__sub{font-size:10.5px;bottom:9px}
  .vph__btn{width:46px;height:46px}
  .vph__btn svg{width:20px;height:20px}
}

/* 素材下载中心 · 视频预览弹窗 */
.av-modal{position:fixed;inset:0;background:rgba(15,23,35,.62);display:none;align-items:center;justify-content:center;z-index:9000;padding:20px}
.av-modal.is-show{display:flex}
.av-modal__in{background:#fff;border-radius:var(--r-lg);max-width:640px;width:100%;padding:22px;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.28)}
.av-modal__x{position:absolute;right:12px;top:6px;width:30px;height:30px;border:0;background:transparent;font-size:23px;color:var(--text-3);cursor:pointer;line-height:1}
.av-modal__x:hover{color:var(--text-1)}
.av-modal__t{margin:0 0 12px;font-size:16px;font-weight:700;color:var(--text-1);padding-right:30px;line-height:1.5}
.av-modal__bd{margin-bottom:4px}
.av-modal__ft{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}

/* 首页 · 新品分类入口（暂无商品的分类也保留通道） */
.newcat{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.newcat__i{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--nc,#1b3556);border-radius:var(--r-lg);transition:.2s}
.newcat__i:hover{box-shadow:0 8px 24px rgba(30,58,95,.1);transform:translateY(-2px)}
.newcat__ic{width:52px;height:52px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--bg-2,#f3f5f8);color:var(--nc,#1b3556)}
.newcat__ic svg{width:26px;height:26px}
.newcat__tx{flex:1;min-width:0}
.newcat__tx b{display:block;font-size:16px;font-weight:700;margin-bottom:3px;color:var(--text-1)}
.newcat__tx .s{display:block;font-size:12px;color:var(--text-3);margin-bottom:8px}
.newcat__tx p{margin:0;font-size:13px;color:var(--text-2);line-height:1.7}
.newcat__arw{font-size:13px;color:var(--cyan);white-space:nowrap;font-weight:600;align-self:center}

/* 商品真实图片：后台填主图 URL 后显示；未填或加载失败回退内置图标 */
.pimg{width:100%;height:100%;object-fit:cover;display:block}
.gallery__thumbs button{position:relative}
.ranklist__i .pic,.rebuy__i .pic,.seckill__i .thumb{overflow:hidden}
@media (max-width:720px){
  .newcat{grid-template-columns:1fr}
  .newcat__arw{align-self:flex-start}
}

/* 登录弹窗 */
.login-mask{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(12,18,30,.55);backdrop-filter:blur(3px);padding:20px}
.login-card{position:relative;width:380px;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(12,18,30,.28);padding:26px 26px 22px;animation:loginIn .26s var(--ease)}
@keyframes loginIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.login-x{position:absolute;top:12px;right:14px;width:30px;height:30px;border:0;background:transparent;font-size:22px;line-height:1;color:var(--text-3);cursor:pointer;border-radius:8px}
.login-x:hover{background:var(--surface-3);color:var(--text-1)}
.login-hd{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.login-hd .mk{width:42px;height:42px}
.login-hd b{display:block;font-size:18px;color:var(--steel)}
.login-hd span{font-size:12px;color:var(--text-3);font-family:var(--mono)}
.login-sub{font-size:12.5px;color:var(--text-2);margin:4px 0 16px}
.login-demo{border:1px dashed var(--line-2);border-radius:var(--r-md);padding:12px;margin-bottom:16px;background:var(--surface-2)}
.login-demo__t{font-size:12px;color:var(--text-3);margin-bottom:10px}
.login-demo__b{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;margin-bottom:8px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);cursor:pointer;transition:all .2s var(--ease)}
.login-demo__b:last-child{margin-bottom:0}
.login-demo__b:hover{border-color:var(--amber);background:var(--surface-2);transform:translateX(2px)}
.login-demo__b b{font-size:14px;color:var(--steel)}
.login-demo__b span{font-size:12px;font-family:var(--mono);color:var(--amber-deep);font-weight:700}
.login-form .field{margin-bottom:12px}
.login-code{display:flex;gap:8px;margin-bottom:12px}
.login-code .input{flex:1}
.login-code .btn{white-space:nowrap}
.login-note{font-size:11.5px;color:var(--text-3);margin:12px 0 0;line-height:1.5}

/* 邀请码 */
.login-form .field .req{font-style:normal;color:var(--danger,#c9502f)}
.login-form .field .opt{
  font-style:normal;font-size:10px;font-weight:500;letter-spacing:.2px;
  color:var(--text-3);background:var(--surface-3);border:1px solid var(--line-2);
  border-radius:4px;padding:1px 5px;margin-left:4px;vertical-align:1px;
}
.inv-hint{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3);margin:0 0 10px}
.inv-hint a{
  display:inline-block;padding:3px 8px;border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--mono);font-size:11px;color:var(--amber-deep);background:var(--surface-2);
  text-decoration:none;transition:all .18s var(--ease);
}
.inv-hint a:hover{border-color:var(--amber);background:var(--amber-soft,#fdf6e8)}
.inv-owner{
  display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.5;
  padding:8px 10px;border-radius:var(--r-md);margin:0 0 12px;border:1px solid transparent;
}
.inv-owner.is-ok{background:var(--cyan-soft,#e8f5f7);border-color:rgba(15,124,138,.28);color:var(--cyan,#0f7c8a)}
.inv-owner.is-ok b{color:var(--steel)}
.inv-owner.is-err{background:#fdf0ec;border-color:rgba(201,80,47,.3);color:#c9502f}

/* 详情页：阶梯报价 */
.tierbox{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface-2)}
.tierbox__t{display:flex;align-items:baseline;gap:8px;padding:10px 14px;font-size:13px;font-weight:700;color:var(--steel);border-bottom:1px solid var(--line);background:var(--surface)}
.tierbox__t em{font-style:normal;font-size:11.5px;font-weight:500;color:var(--text-3)}
.tiers{display:grid;grid-template-columns:repeat(4,1fr)}
.tier{padding:12px 10px;text-align:center;border-right:1px solid var(--line);transition:background .2s var(--ease);position:relative}
.tier:last-child{border-right:0}
.tier.is-active{background:rgba(140,151,163,.12)}
.tier.is-active::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--amber)}
.tier__r{display:block;font-size:11.5px;color:var(--text-3);margin-bottom:5px}
.tier__p{display:block;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--steel)}
.tier__p small{font-size:10px;font-weight:500;color:var(--text-3)}
.tier__o{display:block;font-size:10.5px;color:var(--text-3);text-decoration:line-through;font-family:var(--mono);margin-top:2px}
.buyline__price{margin-left:auto;font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:6px}
.buyline__price b{color:var(--steel)}
.buyline__price .price{color:var(--amber-deep)}
.mem-banner{display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 14px;border:1px solid rgba(140,151,163,.4);background:rgba(140,151,163,.08);border-radius:var(--r-md);font-size:12.5px;color:var(--amber-deep)}
.mem-banner b{color:var(--amber-deep)}
.mem-banner .btn{padding:6px 14px;font-size:12.5px;margin-left:auto}

/* ============================================================
   营销活动前台投放位（后台「营销中心 → 活动投放」维护）
   ============================================================ */
.promo-bar{
  display:flex; align-items:center; gap:9px; padding:7px 0;
  background:linear-gradient(90deg,#1b3556,#0f7c8a); color:#fff;
}
.promo-bar__ic{ display:flex; flex:none; opacity:.9 }
.promo-bar__ic svg{ width:15px; height:15px }
.promo-bar__tx{
  flex:1; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);
}
.promo-bar__track{ display:flex; width:max-content; will-change:transform }
.promo-bar__track.is-run{ animation:promoScroll var(--dur,16s) linear infinite }
.promo-bar__u{ display:inline-block; white-space:nowrap; font-size:12.5px; letter-spacing:.2px; padding-right:72px }
@keyframes promoScroll{ from{transform:translateX(0)} to{transform:translateX(var(--shift,-50%))} }

.promo-band{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin:12px auto; padding:11px 16px; border-radius:var(--r-md);
  background:linear-gradient(100deg,rgba(27,53,86,.06),rgba(15,124,138,.09));
  border:1px solid rgba(15,124,138,.26);
}
.promo-band__tag{
  flex:none; padding:2px 9px; border-radius:5px; background:var(--cyan); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.3px;
}
.promo-band b{ font-size:14.5px; color:var(--steel) }
.promo-band__tx{ font-size:13px; color:var(--text-2) }
.promo-band__end{ margin-left:auto; font-size:11.5px; color:var(--text-3); font-family:var(--mono) }
.promo-band--home_floor{ margin:18px auto }
.promo-band--cat_top,.promo-band--pd_top{ margin:12px 0 }

.promo-tip{
  display:flex; align-items:flex-start; gap:8px; margin:10px 0;
  padding:9px 12px; border-radius:var(--r-md);
  background:rgba(200,150,62,.09); border:1px dashed rgba(200,150,62,.4);
  font-size:12.5px; color:var(--amber-deep); line-height:1.6;
}
.promo-tip i{
  flex:none; width:17px; height:17px; border-radius:4px; background:var(--amber);
  color:#fff; font-style:normal; font-size:10.5px; font-weight:700;
  display:grid; place-items:center; margin-top:1px;
}

.promo-float{ position:fixed; right:18px; bottom:96px; z-index:60; display:flex; flex-direction:column; gap:8px }
.promo-float__c{
  width:190px; padding:11px 13px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line-2);
  box-shadow:0 8px 24px rgba(15,32,56,.14);
}
.promo-float__c b{ display:block; font-size:12.5px; color:var(--steel); margin-bottom:3px }
.promo-float__c span{ font-size:11.5px; color:var(--text-3); line-height:1.55 }
@media (max-width:900px){ .promo-float{ display:none } }

/* 规格加价小标（后台「商品管理 → 规格」配置） */
.sku__add{
  display:inline-block; margin-left:5px; padding:0 4px; border-radius:3px;
  background:rgba(200,150,62,.14); color:var(--amber-deep);
  font-size:10.5px; font-weight:700; font-family:var(--mono); vertical-align:middle;
}

/* ============================================================
   在线客服面板 / 发票申请面板（登录后可用）
   ============================================================ */
.cs-mask{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:rgba(15,32,56,.42); backdrop-filter:blur(3px); padding:20px;
}
.cs-card{
  width:100%; max-width:520px; max-height:88vh; overflow:auto; border-radius:var(--r-lg);
  background:var(--surface); box-shadow:0 22px 60px rgba(15,32,56,.28); position:relative;
}
.cs-x{
  position:absolute; top:12px; right:14px; width:28px; height:28px; border:0; border-radius:50%;
  background:var(--surface-2); color:var(--text-3); font-size:19px; line-height:1; cursor:pointer;
}
.cs-x:hover{ background:var(--surface-3); color:var(--text-1) }
.cs-hd{
  display:flex; align-items:center; gap:12px; padding:20px 22px 16px; border-bottom:1px solid var(--line);
}
.cs-hd .mk{ width:38px; height:38px; flex-shrink:0 }
.cs-hd .mk svg{ width:100%; height:100% }
.cs-hd b{ display:block; font-size:16px; color:var(--steel) }
.cs-hd span{ font-size:12px; color:var(--text-3) }
.cs-bd{ padding:18px 22px 22px; display:flex; flex-direction:column; gap:14px }
.cs-wx{ display:flex; gap:16px; padding:14px; border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--surface-2) }
/* v-20260929a：客服弹窗二维码改真实「企业微信」码图（原为占位 SVG 图标）。
   尺寸 96→124px：实测 1x 显示器上 QR 需 ≥120px 才可被识别（zxing 解码验证），
   并支持点击放大到 340px 再扫。 */
.cs-qr{
  width:124px; height:124px; flex-shrink:0; border-radius:var(--r-md); border:1px solid var(--line-2);
  background:#fff; display:grid; place-items:center; overflow:hidden; cursor:zoom-in; transition:box-shadow .18s;
}
.cs-qr:hover{ box-shadow:0 0 0 2px rgba(192,152,96,.5) }
.cs-qr img{ width:100%; height:100%; display:block; object-fit:contain }
.cs-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px }
.cs-t b{ font-size:14.5px; color:var(--text-1) }
.cs-t span{ font-size:12px; color:var(--text-3) }
.cs-t .btn{ align-self:flex-start; margin-top:2px }
.cs-note{ font-size:11.5px; color:var(--text-3); line-height:1.6; margin:0 }
.cs-acts{ display:flex; gap:8px; flex-wrap:wrap }
.cs-acts button{
  font-size:12.5px; padding:6px 12px; border:1px solid var(--line-2); border-radius:999px;
  background:var(--surface-2); color:var(--text-2); cursor:pointer; transition:all .18s;
}
.cs-acts button:hover{ border-color:var(--amber); color:var(--amber-deep) }
.cs-ft{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.cs-ft .muted{ font-size:12px }

/* 客服登录门槛 */
.cs-gate{
  grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:54px 26px; text-align:center; background:var(--surface);
}
.cs-gate__ic{
  width:58px; height:58px; border-radius:50%; background:var(--steel-soft,#eef2f7); color:var(--steel);
  display:grid; place-items:center;
}
.cs-gate__ic svg{ width:28px; height:28px }
.cs-gate b{ font-size:17px; color:var(--steel) }
.cs-gate p{ font-size:13px; color:var(--text-3); line-height:1.75; margin:0; max-width:440px }
.cs-gate__b{ display:flex; gap:10px; margin-top:4px; flex-wrap:wrap; justify-content:center }
.cs-gate__w{ display:flex; gap:14px; margin-top:6px }
.cs-gate__w a{ font-size:12.5px; color:var(--cyan); text-decoration:none }
.cs-gate__w a:hover{ text-decoration:underline }
@media (max-width:600px){
  .cs-wx{ flex-direction:column; align-items:center; text-align:center }
  .cs-t .btn{ align-self:center }
}

/* ============================================================
   修复：移动端商品详情页横向溢出
   根因 —— .pdp 是 grid，子项默认 min-width:auto，被阶梯价表的
   min-content 撑开轨道（397px > 视口 351px），整页出现横向滚动。
   1) 轨道子项允许收缩  2) 小屏阶梯价改两列
   ============================================================ */
.pdp>*{ min-width:0 }
.tier{ min-width:0 }
.tier__p{ word-break:break-all }
@media (max-width:760px){
  .tiers{ grid-template-columns:repeat(2,1fr) }
  .tier:nth-child(2n){ border-right:0 }
  .tier:nth-child(n+3){ border-top:1px solid var(--line) }
}

/* ============================================================
   修复：平板区间（768-1024px）商品详情页横向溢出
   根因 —— .pdp 在 1200 断点下为「380px 1fr」两列，右列实测仅
   360px，而 .buyacts 三个按钮（立即购买/加入购物车/批量询价）
   原本不换行，min-content 约 500px 撑破轨道，整页横向滚动
   （768px 实测 scrollWidth=890）。原换行规则只写在 760 断点，
   覆盖不到 768px。
   处理 —— 基础样式允许换行 + 1024 断点起按钮改成两列排布。
   ============================================================ */
@media (max-width:1024px){
  .buyacts{ gap:10px; flex-wrap:wrap }
  .buyacts .btn{ flex:1; min-width:calc(50% - 5px); height:46px; padding:0 14px; font-size:14px }
  .buyacts .btn:first-child{ flex:1 0 100% }
}

/* ============================================================
   触控目标安全网（手机 + 平板 ≤1024px）
   确保关键可点元素高度 ≥ 30px，避免手指误触
   ============================================================ */
@media (max-width:1024px){
  /* 顶部条次导航链接（企业登录 / 免费注册 / 我的订单 / 帮助中心） */
  .topbar a{ display:inline-flex; align-items:center; min-height:30px; padding:0 5px }
  /* 搜索框：输入框与按钮给足高度 */
  .search{ height:44px }
  .search input{ min-height:24px }
  .search button{ height:38px }
  /* 分类楼层箭头按钮 */
  .catfloor__extra-arw{ width:30px; height:30px }
  /* 楼层「查看全部 →」类文字链接 */
  .floor__more{ min-height:30px; padding:4px 6px }
  /* 分类楼层侧栏的小标签 chip（可点） */
  .catfloor__side .sub a{ display:inline-flex; align-items:center; min-height:28px }
  /* 横滑分类条项 */
  .catnav a{ min-height:42px }
  /* 按钮触控保底：移动端 .btn 多为 flex 子项，height 会被 flex 算法忽略，
     用 min-height 兜底确保 ≥ 44px（btn--lg≥48 / btn--sm≥36） */
  .btn{ min-height:44px }
  .btn--lg{ min-height:48px }
  .btn--sm{ min-height:36px }
  .banner__cta .btn{ min-height:46px }
}

/* ============================================================
   博之宇 v5 美工升级（精工 · 信赖）
   在既有设计系统上做加法：更深邃的钢蓝层次、更柔和的层叠阴影、
   更精致的按钮 / 搜索框 / 导航 / 商品卡，并强化头部质感。
   仅覆盖/增强既有类，不动结构。
   ============================================================ */
:root{
  /* 阴影：更柔和、更有层次的"浮起感"（高级 B 端常用） */
  --shadow:0 1px 2px rgba(20,30,45,.04), 0 6px 18px rgba(20,30,45,.05);
  --shadow-md:0 2px 8px rgba(20,30,45,.05), 0 16px 40px rgba(20,30,45,.08);
  --shadow-hover:0 8px 18px rgba(20,30,45,.08), 0 28px 60px rgba(20,30,45,.12);
  /* 钢蓝主色更饱满的渐变（Hero / 深色块 / 主按钮） */
  --steel-grad:linear-gradient(135deg,#2b5680 0%,#16314f 100%);
  --steel-grad-2:linear-gradient(120deg,#274d76 0%,#1b3556 55%,#14283d 100%);
  --accent-grad:linear-gradient(135deg,#1aa6b6,#0f7c8a);
}

/* —— 顶部条：更深邃的钢蓝渐变 —— */
.topbar{ background:var(--steel-grad-2); }

/* —— 头部：底部一道渐变细线 + 更克制的阴影，Logo 更醒目 —— */
.header{ border-bottom-color:transparent; box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 8px 22px -14px rgba(20,30,45,.20); }
.header::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cyan) 16%,var(--steel-3) 50%,var(--cyan) 84%,transparent); opacity:.55; }
.logo__mark{ filter:drop-shadow(0 2px 6px rgba(27,53,86,.28)); }
.logo__txt strong{ font-size:19px; letter-spacing:.4px; }
.logo__txt em{ color:var(--text-2); letter-spacing:.6px; }

/* —— 全部分类按钮：钢蓝填充更突出（对标京东/1688 的类目入口） —— */
.allcat__btn{ background:var(--steel-grad); color:#fff; border:0; border-radius:var(--r-md); height:42px; padding:0 18px;
  font-weight:700; box-shadow:0 6px 16px -8px rgba(27,53,86,.75); transition:transform .2s var(--ease), filter .2s var(--ease); }
.allcat__btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }

/* —— 搜索框：更高更醒目，聚焦钢蓝描边 + 柔光（B 端核心转化区） —— */
.search{ height:46px; border-radius:var(--r-lg); border-color:var(--line-2); background:#fff; box-shadow:0 2px 10px -6px rgba(20,30,45,.18); }
.search:focus-within{ border-color:var(--steel-3); box-shadow:0 0 0 4px var(--steel-soft), 0 10px 24px -12px rgba(27,53,86,.38); }
.search input{ font-size:14px; }
.search button{ height:36px; border-radius:var(--r-md); background:var(--steel-grad); box-shadow:0 4px 12px -6px rgba(27,53,86,.6); }
.search button:hover{ background:linear-gradient(135deg,#2b5680,#1b3556); }

/* —— 分类导航：激活项渐变下划线 + 悬停底色（去掉生硬实色） —— */
.catnav a{ position:relative; border-radius:var(--r-sm) var(--r-sm) 0 0; }
.catnav a:hover{ color:var(--steel); background:var(--steel-soft); }
.catnav a.is-active{ color:var(--steel); border-bottom-color:transparent; }
.catnav a.is-active::after{ content:''; position:absolute; left:14px; right:14px; bottom:0; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--steel),var(--cyan)); box-shadow:0 0 10px rgba(15,124,138,.5); }
.catnav .promo{ background:var(--cyan-soft); padding:7px 12px; border-radius:999px; }

/* —— 主按钮：更饱满的钢蓝 + 顶部高光 + 悬停上浮 —— */
.btn--primary{ background:var(--steel-grad); border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -8px rgba(27,53,86,.6); }
.btn--primary:hover{ filter:brightness(1.07); transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 12px 26px -10px rgba(27,53,86,.65); }
.btn--cyan{ background:var(--accent-grad); box-shadow:0 8px 20px -10px rgba(15,124,138,.6); }
.btn--cyan:hover{ filter:brightness(1.06); }

/* —— 商品卡：媒体区聚光、图标更立体、标签浮起、悬停更"浮起" —— */
.gcard{ box-shadow:var(--shadow); }
.gcard::before{ height:3px; background:linear-gradient(90deg,var(--cyan),var(--steel)); }
.gcard__media{ background:
    radial-gradient(120% 90% at 50% 16%, rgba(255,255,255,.92), rgba(238,242,247,.35) 55%, rgba(214,222,230,.55) 100%),
    linear-gradient(160deg,#f5f8fc,#e9eff5); }
.gcard__media svg{ width:62%; height:62%; opacity:.92; filter:drop-shadow(0 6px 14px rgba(27,53,86,.18)); }
.gcard:hover .gcard__media svg{ transform:scale(1.08) translateY(-2px); }
.gcard__badges .tag{ box-shadow:0 3px 8px -3px rgba(20,30,45,.32); }
.gcard__title{ font-size:14.5px; line-height:1.45; }
.gcard__btn{ background:var(--steel-soft); border:1px solid rgba(30,58,95,.16); color:var(--steel); transition:all .2s var(--ease); }
.gcard__btn:hover{ background:var(--steel); color:#fff; border-color:var(--steel); transform:translateY(-1px); }
.gcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }

/* ============================================================
   v8 · 顶部信息栏（20260921f）
   对齐 ickey 顶部结构：左「欢迎语 + 登录/注册」，右「实用链接组」
   同时下线原「全站滚动公告条」——总开关见 app.js → SITE_BAR_ENABLED
   ============================================================ */
.topbar__l{ gap:8px; min-width:0; }
.topbar__r{ gap:0; }
.topbar .hi{ color:rgba(255,255,255,.58); letter-spacing:.2px; white-space:nowrap; }
.topbar .hi b{ color:#eef4fa; font-weight:600; }
.topbar a.reg{ color:var(--amber-2); font-weight:600; }
.topbar a.reg:hover{ color:#fff; }
.topbar__r .tb-i{ display:inline-flex; align-items:center; }
.topbar__r .tb-i>a{ padding:0 12px; white-space:nowrap; }
.topbar__r .tb-i:first-child>a{ padding-left:0; }
.topbar__r .tb-i:last-child>a{ padding-right:0; }
.topbar__r .sep{ color:rgba(255,255,255,.15); }
@media (max-width:900px){
  .topbar__l{ display:none; }
  .topbar__r{ flex:1; justify-content:flex-end; }
  .topbar__r .tb-i>a{ padding:0 10px; font-size:11.5px; }
}
@media (max-width:560px){
  .topbar__r .tb-x{ display:none; }
}

/* ===================== v-blueprint · 周边留白：蓝图网格 + 四角柔光增强 =====================
   注：v19 起，左右页边的「精密设备线稿」改由 .equip-deco（assets/equip-line.svg，见上方
   侧面留白设备线稿装饰）承担 —— 一张竖长工程线稿满高铺满页边，非常淡。
   此处 body::before 只保留蓝图网格 + 四角柔光，避免与 .equip-deco 两张线稿在页边叠加发糊。 */
body::before{
  background-image:
    linear-gradient(rgba(30,58,95,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,58,95,.045) 1px, transparent 1px),
    radial-gradient(circle at 3% 3%, rgba(27,53,86,.08), transparent 26%),
    radial-gradient(circle at 97% 6%, rgba(140,151,163,.07), transparent 24%),
    radial-gradient(circle at 96% 94%, rgba(27,53,86,.08), transparent 26%),
    radial-gradient(circle at 4% 95%, rgba(15,124,138,.06), transparent 22%);
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 46px 46px, 46px 46px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: center, center, center, center, center, center;
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed;
}

/* ==========================================================================
   v18 · 底部固定「新客注册即享818券包」领券条（全站）
   参考：云汉芯城 ickey.cn 底栏 —— 橙渐变底 + 礼盒插画 + 白描边胶囊输入 +
   红渐变小胶囊按钮（含白圈箭头）+ 协议勾选 + 右上关闭
   ①购物车页（含 .cart__bar）由 JS 跳过，避免与结算条叠压
   ②≤760px 时叠在移动端 Tab 导航 .mtab（56px）之上，body 让出总高
   ③标题「白字 + 红橙描边」用 12 向 text-shadow 实现，
     不用 -webkit-text-stroke（paint-order 兼容性不稳，可能反过来糊住白字）
   ========================================================================== */
.newbar{
  --nb-out:#ef3a10; --nb-o:3px; --nb-o2:1.5px; --nb-d:2.1px;
  position:fixed; left:0; right:0; bottom:0; height:78px; z-index:89;
  background:
    radial-gradient(58% 150% at 88% 124%, rgba(255,247,231,.74), transparent 68%),
    radial-gradient(46% 140% at 6% 130%, rgba(255,232,196,.55), transparent 70%),
    linear-gradient(96deg,#ffa76a 0%,#ffbb84 30%,#ffc793 52%,#ffb179 78%,#ffa46d 100%);
  border-top:1px solid rgba(255,255,255,.5);
  box-shadow:0 -8px 26px -10px rgba(150,60,10,.30);
  font-family:var(--sans);
  animation:nbUp .42s cubic-bezier(.22,.9,.28,1) both;
}
@keyframes nbUp{ from{ transform:translateY(100%) } to{ transform:translateY(0) } }
.newbar.is-hide{ animation:none; transform:translateY(100%); transition:transform .26s ease }
.newbar__wrap{
  position:relative; max-width:var(--maxw); margin:0 auto; height:100%;
  padding:0 var(--pad-x); display:flex; align-items:center; gap:20px;
}
.newbar__gift{ flex:none; width:62px; height:56px; }
.newbar__gift svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 3px 6px rgba(150,50,20,.28)) }
/* 标题：白字 + 红橙描边 + 轻微斜切（对齐参考站的节庆感） */
.newbar__ttl{ flex:none; white-space:nowrap; line-height:1; }
.newbar__ttl i{
  display:inline-block; font-style:italic; font-weight:900; font-size:27px;
  letter-spacing:.4px; color:#fff; transform:skewX(-5deg);
  text-shadow:
    var(--nb-o) 0 0 var(--nb-out), calc(-1 * var(--nb-o)) 0 0 var(--nb-out),
    0 var(--nb-o) 0 var(--nb-out), 0 calc(-1 * var(--nb-o)) 0 var(--nb-out),
    var(--nb-o2) 0 0 var(--nb-out), calc(-1 * var(--nb-o2)) 0 0 var(--nb-out),
    0 var(--nb-o2) 0 var(--nb-out), 0 calc(-1 * var(--nb-o2)) 0 var(--nb-out),
    var(--nb-d) var(--nb-d) 0 var(--nb-out), calc(-1 * var(--nb-d)) calc(-1 * var(--nb-d)) 0 var(--nb-out),
    var(--nb-d) calc(-1 * var(--nb-d)) 0 var(--nb-out), calc(-1 * var(--nb-d)) var(--nb-d) 0 var(--nb-out),
    0 5px 12px rgba(150,40,10,.22);
}
/* 右侧：输入 + 按钮（上）/ 协议（下），两组左对齐 */
.newbar__act{ margin-left:auto; display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.newbar__row{ display:flex; align-items:center; gap:10px; }
.newbar__field input{
  width:216px; height:38px; border-radius:999px;
  border:2px solid rgba(255,255,255,.92); background:rgba(255,92,30,.40);
  padding:0 18px; color:#fff; font-size:14px; font-weight:700;
  font-family:var(--sans); outline:none;
  transition:background .2s, box-shadow .2s;
}
.newbar__field input::placeholder{ color:#fff; opacity:.96; font-weight:700 }
.newbar__field input:focus{ background:rgba(255,86,24,.58); box-shadow:0 0 0 3px rgba(255,255,255,.3) }
.newbar__btn{
  height:38px; padding:0 14px 0 20px; border:0; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg,#ff5f2e,#ef310d); color:#fff;
  font-family:var(--sans); font-size:15px; font-weight:800; letter-spacing:.4px;
  box-shadow:0 4px 12px -4px rgba(180,40,10,.55), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .18s, box-shadow .18s;
}
.newbar__btn i{
  width:19px; height:19px; border-radius:50%; background:#fff; color:#ef310d;
  display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:900; line-height:1;
}
.newbar__btn:hover{ transform:translateY(-1px); box-shadow:0 7px 16px -5px rgba(180,40,10,.6) }
.newbar__btn:active{ transform:none }
.newbar__agree{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  font-size:11.5px; font-weight:600; color:#a93210; line-height:1.5;
}
.newbar__agree input[type=checkbox]{
  appearance:none; -webkit-appearance:none; flex:none; width:14px; height:14px; margin:0;
  border-radius:3px; border:1.5px solid rgba(255,255,255,.95);
  background:rgba(255,255,255,.3); cursor:pointer; position:relative;
  transition:background .16s;
}
.newbar__agree input[type=checkbox]:checked{ background:#fff }
.newbar__agree input[type=checkbox]:checked::after{
  content:''; position:absolute; left:3.5px; top:1px; width:5px; height:8px;
  border:solid #ef310d; border-width:0 2px 2px 0; transform:rotate(42deg);
}
.newbar__agree a{ color:#fff; font-weight:800; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.55) }
.newbar__agree a:hover{ border-bottom-color:#fff }
.newbar__close{
  position:absolute; top:7px; right:0; width:22px; height:22px; padding:0;
  border:0; background:transparent; color:#fff; font-size:22px; line-height:1;
  cursor:pointer; opacity:.92; transition:opacity .16s, transform .16s;
}
.newbar__close:hover{ opacity:1; transform:scale(1.12) }
/* 领取成功态 */
.newbar__act--ok{ margin-left:auto; flex-direction:row; align-items:center; gap:12px; color:#fff }
.newbar__act--ok b{ font-size:17px; font-weight:900; letter-spacing:.5px; text-shadow:0 1px 0 rgba(160,45,10,.3) }
.newbar__act--ok span{ font-size:12.5px; font-weight:600; color:rgba(255,255,255,.95) }
.newbar__act--ok em{ font-style:normal; font-family:var(--mono); font-weight:700 }
.newbar__go{
  height:34px; padding:0 16px; border-radius:999px; text-decoration:none;
  display:inline-flex; align-items:center; font-size:13.5px; font-weight:800; color:#ef310d;
  background:#fff; box-shadow:0 4px 12px -4px rgba(180,40,10,.5);
}
/* 页面底部让出固定栏高度（JS 注入时才加这个类） */
body.has-newbar{ padding-bottom:78px }

/* 协议弹窗 */
.nb-modal{ position:fixed; inset:0; z-index:9998; display:none; align-items:center; justify-content:center; padding:20px }
.nb-modal.is-open{ display:flex }
.nb-modal__mask{ position:absolute; inset:0; background:rgba(12,18,30,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px) }
.nb-modal__box{
  position:relative; z-index:1; width:min(520px,100%); max-height:76vh; overflow:auto;
  background:#fff; border-radius:16px; padding:24px 26px 20px;
  box-shadow:0 30px 70px -20px rgba(10,20,34,.5); font-family:var(--sans);
  animation:nbPop .22s ease both;
}
@keyframes nbPop{ from{ opacity:0; transform:translateY(10px) scale(.98) } to{ opacity:1; transform:none } }
.nb-modal__x{ position:absolute; top:12px; right:14px; border:0; background:transparent; font-size:24px; line-height:1; color:#94a3b8; cursor:pointer }
.nb-modal__x:hover{ color:#334155 }
.nb-modal__box h3{ margin:0 0 14px; padding-right:28px; font-size:17px; font-weight:800; color:#0f2033 }
.nb-modal__box ul{ margin:0; padding:0; list-style:none }
.nb-modal__box li{ position:relative; padding-left:16px; margin-bottom:9px; font-size:13px; line-height:1.72; color:#42536b }
.nb-modal__box li::before{ content:''; position:absolute; left:3px; top:9px; width:5px; height:5px; border-radius:50%; background:#2b86f0 }
.nb-modal__foot{ margin:14px 0 0; padding-top:12px; border-top:1px solid #e8eef6; font-size:12px; color:#7c8ca1 }
.nb-modal__foot b{ color:#ef310d }

/* —— 移动端：叠在 .mtab(56px) 之上，紧凑单行 —— */
@media (max-width:760px){
  .newbar{ --nb-o:2px; --nb-o2:1px; --nb-d:1.4px; height:60px; bottom:calc(56px + env(safe-area-inset-bottom)) }
  body.has-newbar{ padding-bottom:calc(116px + env(safe-area-inset-bottom)) }
  .newbar__wrap{ gap:10px; padding:0 12px }
  .newbar__gift{ display:none }
  .newbar__ttl i{ font-size:16px; letter-spacing:.2px }
  .newbar__act{ gap:0 }
  .newbar__agree{ display:none }
  .newbar__field input{ width:128px; height:34px; padding:0 12px; font-size:12.5px; border-width:1.5px }
  .newbar__btn{ height:34px; padding:0 10px 0 14px; font-size:13px; gap:6px }
  .newbar__btn i{ width:17px; height:17px; font-size:11px }
  .newbar__close{ top:3px; right:2px; font-size:18px }
  .newbar__act--ok{ gap:8px }
  .newbar__act--ok b{ font-size:14px }
  .newbar__act--ok span{ display:none }
}

/* —— v18 修复（既有缺陷）：1024–1199px 横向滚动 ——
   header 一行放不下：logo + 全部分类 + .search(max-width:620) + .hd__act(342)
   实需 ≈1146px，超出视口最多 122px（1024 视口 scrollWidth=1146），
   .search 虽有 flex:1 但内部 .hot 热词胶囊 white-space:nowrap 不可收缩，
   flex-shrink 无法突破 min-content → 隐藏热词胶囊即可让搜索框真正收缩。
   （A/B 已验证：与底部领券条无关，移除领券条后 scrollWidth 仍为 1146） */
@media (min-width:1024px) and (max-width:1199px){
  .search .hot{ display:none }
  .header__in{ gap:16px }
  .search{ padding-right:8px }
}

/* ============================================================================
   v-20260928a · 三处前台缺陷修正（头部热线溢出 / 官方 LOGO / 商品卡角标 / 券包条）
   ============================================================================
   ①「采购热线」尺寸规则原先只写在 body.home-art 作用域（见 home.css），
      非首页（类目 / 详情 / 帮助 / 结算 / 订单…）完全没有规则 → .tb-tel 作为
      .topbar__l(flex) 的子项被块化，内部内联 SVG 退回 300×150 默认固有尺寸，
      实测元素高 98px；在只有 35px 高的 .topbar 里 align-items:center 上下各溢出，
      直接压到下方 header 的 logo 上（1100~1920px 全中招）。
      这里补一组「与主题无关」的尺寸 / 不换行规则：颜色不写，仍由各页原有规则决定
      （首页浅底、内页深底都安全）。
   ② 官方 LOGO 接入：.logo__mark 原为「深蓝圆角方块 + 手绘 SVG 占位」，
      改为透明容器直接放位图；不设宽高，沿用原 44 / 36px 断点。
   ③ 商品卡角标从「盖在图片上」改到内容区（.gcard__tags），上传真实产品图后不再压住产品。
   ============================================================================ */
.topbar__l .tb-tel{ display:inline-flex; align-items:center; gap:8px; min-width:0; white-space:nowrap; font-weight:700; }
.topbar__l .tb-tel__ic{ display:inline-flex; align-items:center; flex:none; }
.topbar__l .tb-tel__ic svg{ width:15px; height:15px; display:block; }
.topbar__l .tb-tel b{ font-size:14px; letter-spacing:.5px; font-family:var(--mono); white-space:nowrap; }
.topbar__l .tb-hot{ font-size:12px; font-weight:600; white-space:nowrap; flex:none; }

.logo__mark{ background:none; border:0; box-shadow:none; filter:none; }
.logo__mark::after{ content:none; }
/* v-20260928d：.logo__mark 与 img 原各带一层 drop-shadow（「深蓝方块 + 手绘 SVG」时代的投影）。
   接入金色徽标位图后，这两层投影会在徽标圆环外侧/内圈叠出「浅灰圆角方块」的错觉
   （实测 DSF4 采样：双滤镜开启时圆环外围四角 ≈ rgb(224,228,233)，关闭后恢复纯白 rgb(254,254,255)）。
   故一并去掉，徽标直接落在页面底色上。 */
.logo__mark img{ width:100%; height:100%; display:block; object-fit:contain; position:relative; z-index:1; filter:none; }
.footer__brand .logo__mark{ background:none; border-color:transparent; }
.footer__brand .logo__mark img{ filter:none; }
.leftrail .lr-brand img{ width:25px; height:25px; display:block; }
.login-hd .mk img{ width:100%; height:100%; display:block; object-fit:contain; }
.cs-hd .mk img{ width:100%; height:100%; display:block; object-fit:contain; }

/* v-20260928d：品牌字「博之宇」改「徽标金 + 雅黑加宽字距」（与金色徽标同色系）。
   页脚为深色底，其 .footer__brand 规则特异性更高(0,2,1)，仍保持白字，不受影响。 */
.logo__txt strong{ color:#c09860; font-family:"Microsoft YaHei UI","Microsoft YaHei",-apple-system,"Segoe UI Variable Text","Segoe UI",sans-serif; font-weight:800; letter-spacing:5px; }
.logo__txt strong span{ color:#c09860; opacity:.66; }

.gcard__tags{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-bottom:9px; }
.gcard__tags .tag{ height:19px; padding:0 7px; font-size:10.5px; }
/* ④ 商品图铺满修正：.gcard__media 是 grid + place-items:center，隐式行是 auto 尺寸，
   子元素 height:100% 会因「百分比高度对着 auto 行」形成循环 → 被当 auto 处理，
   图片退回原始比例（1000×1000 → 271×271），超出 172px 的媒体框被 overflow 裁掉底部。
   改成绝对定位铺满（媒体框本身有确定高度 172px，row 卡为 height:100% 的 172px），
   图片才真正按 cover 居中裁切、不溢出。 */
.gcard__media .pimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

.newbar__gift img{ width:100%; height:100%; display:block; object-fit:contain; filter:drop-shadow(0 3px 6px rgba(150,50,20,.28)); }
.newbar__ttl em{ display:block; font-style:normal; font-size:12px; font-weight:600; letter-spacing:.2px; color:rgba(255,255,255,.95); margin-top:6px; }
@media (max-width:1180px){
  .newbar__ttl em{ display:none }
}

/* ============================================================
   v-20260929a · 二维码放大弹层（页脚「企业微信 / 顾问微信」+ 客服弹窗二维码）
   ------------------------------------------------------------
   动机：页脚二维码受列宽限制只能 100px，实测 1x 显示器上 <120px 无法识别。
   点击任意二维码 → 放大到 340px（1x / 2x 均稳定可读）再扫。
   z-index 1200：高于在线客服(.cs-mask 200) 与询价浮层(.inq-overlay 1000)，
   低于登录弹窗(.login-mask 9999)。
   ============================================================ */
.qrz-mask{
  position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center;
  background:rgba(12,22,36,.6); backdrop-filter:blur(3px); padding:20px;
}
.qrz-card{
  position:relative; background:#fff; border-radius:var(--r-lg); padding:24px 24px 20px;
  text-align:center; box-shadow:0 24px 70px rgba(8,20,36,.42); animation:qrzIn .2s var(--ease);
}
@keyframes qrzIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.qrz-x{
  position:absolute; top:8px; right:10px; width:30px; height:30px; border:0; border-radius:50%;
  background:var(--surface-2); color:var(--text-2); font-size:19px; line-height:1; cursor:pointer; transition:all .18s;
}
.qrz-x:hover{ background:var(--line-2); color:var(--text-1) }
.qrz-img{
  width:340px; max-width:min(78vw,340px); aspect-ratio:1/1; margin:0 auto 14px;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-md); overflow:hidden;
}
.qrz-img img{ width:100%; height:100%; display:block; object-fit:contain }
.qrz-card b{ display:block; font-size:16px; color:var(--steel); margin-bottom:6px }
.qrz-card p{ margin:0; font-size:12.5px; line-height:1.65; color:var(--text-3); max-width:340px }
@media (max-width:480px){
  .qrz-card{ padding:18px 16px 16px }
  .qrz-card p{ font-size:12px }
}

/* ===== v-20260928h · 详情页图库浮层不再遮挡文字 =====
   背景：.gallery__zoom（右下白胶囊「点击放大·悬停看细节」）会盖住视频占位块的
   底部说明 .vph__sub；且 .gallery__dl（右下蓝按钮）与它同角互压；
   移动端曾有 .gallery__main svg 通配把胶囊内的放大镜图标撑到 68%（整块遮罩）。
   ① 视频/占位块作主媒体时隐藏缩放胶囊（视频无图可放大，且它会压字）；
   ② 胶囊内图标固定像素、禁止被 flex 拉伸；
   ③ 兜底：胶囊宽度不超过图库宽度，永不横跨整块。 */
.gallery__main.is-video{cursor:default}
.gallery__main.is-video .gallery__zoom{display:none}
.gallery__zoom svg{width:13px;height:13px;flex:none}
.gallery__zoom{max-width:calc(100% - 28px)}
.gallery__main.is-video .gallery__media{cursor:default}