*{box-sizing:border-box}
/* ===================================================================
   主题：潜水海底风（沿用老站素材，提亮 + 白卡片，保证文字清楚）
   三条硬规矩：
     1) 海底图只做「浅底纹」或「首屏横幅」，正文一律放在白色半透明卡片上；
     2) 底纹上覆盖一层白色纱（rgba(255,255,255,.86)），文字对比度 ≥ 4.5:1；
     3) 深色文字 #12283a 打在卡上，标题 #0b2b3c，价格 #c0392b（上涨红）。
   =================================================================== */
:root{
  --navy:#062338; --blue:#0a6ebd; --blue-d:#085a9c; --teal:#12b8a6;
  --ink:#12283a; --muted:#5f7891; --line:#e3ecf3;
  --soft:#f5f9fc; --card:rgba(255,255,255,.94);
  --ok:#17a673; --warn:#e08c1f; --bad:#d9534f;
}
body{
  margin:0;font:15px/1.7 "Microsoft YaHei","Hiragino Sans GB",Arial,sans-serif;
  color:var(--ink);
  /* 老站原海底图：提亮版 + 内容区白纱，字就清楚了 */
  background:#eef4f8;
  background-image:
    linear-gradient(rgba(255,255,255,.86),rgba(255,255,255,.90)),
    url("img/bg_tile_1440.jpg");
  background-size:cover,cover;
  background-position:center top,center top;
  background-attachment:scroll,fixed;
  background-repeat:no-repeat,no-repeat;
}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-d)}
img{max-width:100%;height:auto}
/* ★ 宽幅版式：1440px 容器。
   主流分辨率 1920×1080 / 1600 / 1440 / 1366 都能把内容铺满又不至于行长过长；
   1366 及以下由下面各板块的媒体查询自动降列。 */
.wrap{max-width:1440px;margin:0 auto;padding:0 24px}
/* ===================================================================
   顶栏 = 三段各自独立的横条（顶条 / logo+搜索 / 导航条），一段一行、互不重叠。
   ★ 为什么必须这么改：原来 .hd 把首页横幅图(hd_banner.jpg)当背景，导航黑条又压在这张图上，
     而横幅图里本来就印着 "KEEP DIVING … IN ONE STATION" —— 于是出现两个 logo、
     横幅的字从导航条上下冒出来；再加上 logo + 7 项导航 + 搜索挤在 1180px 里溢出，
     logo 和「首页」直接叠在一起。这就是"顶栏很乱"的来源。
     现在横幅图只出现在「海报」区块（首页大类栏下面），顶栏三段全是纯色，永远不会互相压。
   =================================================================== */
/* ★ 顶栏底 = 原站同款「深蓝底 + 海底照片 + 蓝色蒙版」。
   照片就是老站 header 那张 1915×250 的潜水图（assets/img/hd_photo.jpg，从原站首页 CSS 里抠出来的原图）；
   蒙版沿用老站 .width-head 的 rgba(8,94,160,.44) 思路但调淡（用户反馈原来太厚、背景几乎看不见）；
   这张原图本身偏暗(平均 luma≈63)，淡蒙版下白字/白 logo 依然清楚。
   注意：蓝顶条(.topbar)仍是纯色 #085ea0 —— 用户标注的红框就是从它下面开始往下，
   所以顶条保持原样，照片+蒙版从 logo 那一行往下铺。 */
.hd{position:relative;z-index:20;
  background-color:#051b40;
  background-image:linear-gradient(rgba(8,94,160,.20),rgba(5,27,64,.34)),url("img/hd_photo.jpg");
  background-size:cover,cover;background-position:center top,center 42%;background-repeat:no-repeat,no-repeat;
  box-shadow:0 2px 16px rgba(3,18,32,.42)}
.hd .wrap{position:relative;z-index:1}
/* 兼容：顶条 .topbar 已不再输出（新顶栏把公司名/热线并到了 logo 下面），
   但服务器上还没重新生成的旧静态页仍在用它 —— site.css 是外链、上传即生效，所以留着别删。 */
.topbar{background-color:#085ea0}
.tbin{display:flex;align-items:center;gap:10px;min-height:34px;font-size:12.5px;color:#dbeaf6;flex-wrap:wrap}
.tbin .sp{flex:1;min-width:8px}
.tbin .tsep{width:1px;height:12px;background:rgba(255,255,255,.25);flex:0 0 1px}
/* 主栏：左「品牌（logo + 下面一行公司名/热线）」、右「会员按钮 + 搜索框」。底色透明，露出照片+蒙版。
   ★ 用户要求「把公司名/热线和 logo 合并」：公司名不再挤在 34px 高的蓝顶条里，
     而是放到 logo 正下方，字号从 12.5px 放大到 20px 并加粗，白字+投影保证在照片上很清楚。 */
.hdrow{background:transparent}
.hdin{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:112px;padding:12px 0}
.hdbrand{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:0 1 auto}
.logo{display:flex;align-items:center;gap:16px;color:#fff;font-size:26px;font-weight:700;letter-spacing:1.5px;flex:0 0 auto;text-shadow:0 2px 10px rgba(0,0,0,.5);text-decoration:none}
.logo b{color:#7fd0ff}
.logo i{font-size:12px;font-style:normal;color:#cfe6f2;margin-left:8px}
/* logo 下方那一行：公司名（大、醒目）+ 服务热线（暖黄，和公司名拉开层次） */
.hbl{display:flex;align-items:baseline;gap:16px;margin-top:9px;flex-wrap:wrap}
.hbl .hcomp{font-size:20px;font-weight:700;color:#fff;letter-spacing:1px;white-space:nowrap;
  text-shadow:0 2px 12px rgba(0,0,0,.62),0 0 2px rgba(0,0,0,.5)}
.hbl .htel{font-size:15px;color:#ffd97a;letter-spacing:.5px;white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.6)}
.hbl .htel:before{content:"\260E";margin-right:5px;opacity:.9}
/* 右侧：会员按钮在上、搜索框在下 */
.hdright{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex:0 0 auto}
.hdtools{display:flex;justify-content:flex-end}
/* ★ 登录/注册：加深色蒙版胶囊底 + 内描边，从深蓝照片里跳出来，一眼能看见。
   （#membar 里先静态输出登录/注册，site.js 拿到登录态后整条替换成「你好…｜退出」） */
.membar{display:inline-flex;align-items:center;gap:7px;padding:4px 8px;border-radius:999px;
  background:rgba(3,22,40,.55);
  box-shadow:0 2px 12px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.18)}
.membar:empty{display:none}
.membar a.hb{display:inline-block;padding:5px 18px;border-radius:999px;font-size:13.5px;
  color:#eaf6fc;letter-spacing:1px;text-decoration:none;white-space:nowrap;
  background:rgba(255,255,255,.10);text-shadow:0 1px 3px rgba(0,0,0,.45)}
.membar a.hb:hover{background:rgba(255,255,255,.24);color:#fff}
.membar a.hb.pri{background:#0a6ebd;color:#fff;font-weight:700}
.membar a.hb.pri:hover{background:#0d7fd4}
.membar .hi{color:#cfe6f2;font-size:13.5px;padding:0 8px;max-width:170px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.45)}
/* 品牌 logo 图（白版，压在深色照片上）：主品牌 KEEP DIVING + 高端子品牌 AquaTide，中间细竖线分隔。
   原来这里是文字 logo，现在换成真图；旧静态页重生成前还走上面的文字规则，互不影响。 */
.logo img{display:block;width:auto}
.logo .lgkd{height:48px}
/* AquaTide（高端子品牌）要比左边的 KEEP DIVING 略大 —— 用户明确要求「比例不要比左边的小」。 */
.logo .lgaq{height:54px;opacity:.96}
.logo .lgdiv{width:1px;height:44px;background:rgba(255,255,255,.42);flex:0 0 1px}
/* 导航条：半透明黑压在照片上（原站就是整条半透明黑底 #000，条目白字 16px、hover 变红）。
   ★ overflow 必须是 visible —— 「产品中心」的 hover 下拉就在这条里，hidden 会被裁掉。 */
.navbar{background-color:rgba(0,0,0,.44)}
.navin{display:flex;align-items:center;flex-wrap:nowrap;overflow:visible}
.navin a{color:#fff;font-size:16px;height:44px;line-height:44px;padding:0 18px;
  white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.navin a:hover{background-color:#c0392b;color:#fff}
/* 兼容：本次改版之前生成的旧静态页顶栏还是「logo + .nav 挤一行」的结构，
   site.css 是外链、上传即生效，所以 .nav 这几条要留着，等静态页重新生成后再删。 */
.nav{display:flex;align-items:center;flex:0 0 auto;margin-left:auto;flex-wrap:nowrap;
  background-color:#000;overflow:visible}
.nav a{color:#fff;font-size:16px;height:44px;line-height:44px;padding:0 18px;
  white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.nav a:hover{background-color:#c0392b;color:#fff}
/* .hdr 是「旧一层式顶栏」右侧那一格的容器。新 Tpl.Layout 已改成两层、
   不再输出 .hdr，但服务器上还没重新生成的旧静态页仍在用它 —— site.css 是
   外链文件、上传即对旧页生效，所以这条必须留着，否则重生成前老页面顶栏会散架。
   ★ .membar 的样式已上移到顶栏那一段（新的蒙版胶囊 + 按钮），这里不要再重复定义，
     否则同优先级下后写的会把胶囊效果覆盖掉。 */
.hdr{display:flex;align-items:center;gap:14px}
.tel,.tmail{color:#cfe6f2;text-shadow:0 1px 3px rgba(0,0,0,.45);white-space:nowrap}
.langbtn{border:1px solid rgba(255,255,255,.45);border-radius:14px;padding:2px 12px;color:#e6f3f9;font-size:12px;flex:0 0 auto}
.langbtn:hover{background:rgba(255,255,255,.14);color:#fff}
/* 首页 hero：老站整幅海底图，压深色纱 → 白字依然清楚 */
.hero{position:relative;color:#fff;border-radius:12px;padding:64px 44px;margin:20px 0 26px;overflow:hidden;
  background-color:#0a4d7a;
  background-image:linear-gradient(rgba(4,32,58,.55),rgba(4,32,58,.62)),url("img/hero_dark_1600x620.jpg");
  background-size:cover;background-position:center;box-shadow:0 10px 30px rgba(9,45,73,.18)}
.hero h1{margin:0 0 10px;font-size:34px;letter-spacing:2px;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.hero p{margin:6px 0;color:#eaf6fc;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.hero2{font-size:16px;color:#a8ecf6 !important}
/* 板块：全部白卡片，文字绝不会压在花纹上 */
.blk{background:var(--card);border:1px solid rgba(255,255,255,.7);border-radius:12px;padding:22px;margin-bottom:22px;
  box-shadow:0 6px 22px rgba(9,45,73,.07);backdrop-filter:saturate(1.1)}
.blkh{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:16px}
.blkh h2{margin:0;font-size:19px;color:#0b2b3c}
.blk h2{margin:0;font-size:19px;color:#0b2b3c}
.more{font-size:13px;color:var(--muted)}
/* 产品网格 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;transition:.15s;display:flex;flex-direction:column}
.card:hover{box-shadow:0 10px 24px rgba(9,45,73,.12);transform:translateY(-2px);border-color:#cfe2f0}
.cimg{display:block;aspect-ratio:1/1;background:#f0f4f5;overflow:hidden}
.cimg img{width:100%;height:100%;object-fit:cover}
.cbd{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px;flex:1}
.ct{font-size:13px;line-height:1.5;color:var(--ink);height:60px;overflow:hidden}
.cmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cact{margin-top:auto}
/* 库存徽标 */
.stk{display:inline-block;font-size:12px;padding:1px 9px;border-radius:10px;line-height:1.7}
.stk.ok{background:#e6f7ee;color:#12805a;border:1px solid #b7e6d0}
.stk.no{background:#fdeaea;color:#c0392b;border:1px solid #f5c6c2}
/* 旧页面里写的是 bad，补一条同款规则，免得无效/过期状态的标签没有样式 */
.stk.bad{background:#fdeaea;color:#c0392b;border:1px solid #f5c6c2}
.tag{font-size:11px;padding:1px 7px;border-radius:3px;background:#eef4f7;color:var(--muted)}
/* 按钮 */
.btn{display:inline-block;padding:7px 18px;border-radius:6px;background:var(--blue);color:#fff;font-size:13px;border:0;cursor:pointer}
.btn:hover{background:var(--blue-d);color:#fff}
.btn.gray{background:#eef2f4;color:#4a6570}
.btn.gray:hover{background:#e2eaee;color:#2b424c}
.btn.sm{padding:4px 12px;font-size:12px}
/* 面包屑/分类 */
.crumb{color:var(--muted);font-size:13px;margin:16px 0}
.crumb span:last-child{color:#4a6570}
.catnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.catnav a{padding:4px 14px;border:1px solid #dfe7eb;border-radius:16px;font-size:13px;background:#fff}
.catnav a.on{background:var(--blue);border-color:var(--blue);color:#fff}
.pageh{font-size:22px;color:#0b2b3c;margin:6px 0 18px;text-shadow:0 1px 2px rgba(255,255,255,.8)}
/* 产品页：左侧分类树 + 右侧产品 */
.catlayout{display:flex;gap:20px;align-items:flex-start;background:var(--card);border:1px solid rgba(255,255,255,.7);border-radius:12px;padding:18px;box-shadow:0 6px 22px rgba(9,45,73,.07)}
.cattree{flex:0 0 232px;width:232px;max-height:80vh;overflow:auto;position:sticky;top:78px;padding-right:6px}
.cattree .roottitle{font-size:13px;font-weight:700;color:#0b2b3c;margin:0 0 6px;padding:0 4px}
.cattree .rootall{display:block;padding:5px 8px;border-radius:6px;font-size:13px;color:var(--ink);margin-bottom:6px;border:1px solid #eef2f4;background:#fff}
.cattree .rootall.on,.cattree a.on{color:var(--blue);font-weight:700}
.cattree ul{list-style:none;margin:0;padding:0}
.cattree li{font-size:13px;line-height:1.55}
.cattree details>summary{list-style:none;cursor:pointer;padding:3px 6px;border-radius:6px;display:flex;align-items:center;gap:5px}
.cattree details>summary::-webkit-details-marker{display:none}
/* 展开/收起的 +/− 号样式在文件末尾「分类树：三角号 → 加号 / 减号」那一段，
   旧的两条三角号规则已删除，别再往这里加，免得两处打架。 */
.cattree details>summary>a{flex:1;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cattree details>summary>a:hover{color:var(--blue)}
.cattree li>a{display:block;padding:3px 6px;border-radius:6px;color:var(--ink)}
.cattree li>a:hover{background:#eef5f9;color:var(--blue)}
.cattree ul ul{margin-left:8px;padding-left:10px;border-left:1px dashed var(--line)}
.cattree .cnt{font-size:11px;color:#9bb0bd;flex:0 0 auto;margin-left:2px}
.catmain{flex:1;min-width:0}
@media(max-width:860px){
  .catlayout{flex-direction:column;padding:14px}
  .cattree{flex:none;width:100%;max-height:none;position:static}
}
/* 产品详情 */
/* align-items:start —— 两列各按自身高度排，不再把短的那列拉伸，右侧就不会出现大片空白 */
.pdetail{display:grid;grid-template-columns:minmax(320px,500px) 1fr;gap:32px;align-items:start;background:#fff;border-radius:12px;padding:22px;box-shadow:0 6px 22px rgba(9,45,73,.07)}
/* 兼容：本次改版之前生成的旧静态页还在用 .pg / .thumbs，
   保留这几条规则，重新生成全部静态页之后可以删掉。 */
.pg img{width:100%;border:1px solid #eef2f4;border-radius:8px}
.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.thumbs img{width:62px;height:62px;object-fit:cover;border:1px solid var(--line);border-radius:5px;cursor:pointer}

/* 图片区：上大图 + 下方横排缩略图。
   原来缩略图是 62px 的竖排小列，客户反馈「副图太小」，改成横排、76px 大方块。 */
.pgal{display:flex;flex-direction:column;gap:12px}
.pgal-main{width:100%;min-width:0}
.pgal-thumbs{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;width:100%}
.pgal-main img{width:100%;aspect-ratio:1/1;object-fit:contain;border:1px solid #eef2f4;border-radius:8px;display:block;background:#fafcfd}
.pgal-thumbs .th{width:76px;height:76px;flex:none;border:2px solid transparent;border-radius:7px;overflow:hidden;cursor:pointer;background:#fafcfd}
.pgal-thumbs .th.on{border-color:#e07b1a}
.pgal-thumbs .th:hover{border-color:#bcd6e6}
.pgal-thumbs .th img{width:100%;height:100%;object-fit:cover;display:block}

/* 规格 / 颜色选择器 */
.skuline{display:flex;gap:12px;align-items:flex-start;margin:10px 0}
.skulabel{width:42px;flex:none;font-size:13px;color:#5b7784;line-height:32px}
.skuitems{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.skuitems .si{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #dde5e9;border-radius:5px;background:#fff;font-size:13px;color:#26414f;cursor:pointer;user-select:none}
.skuitems .si em{font-style:normal;color:#c0392b}
.skuitems .si.on{border-color:#e07b1a;background:#fff7ec}
.skucolors{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.skucolors .sw{display:inline-flex;flex-direction:column;align-items:center;gap:3px;width:62px;padding:4px;border:1px solid #dde5e9;border-radius:6px;background:#fff;cursor:pointer;font-size:12px;color:#26414f;overflow:hidden}
.skucolors .sw img{width:100%;height:46px;object-fit:cover;border-radius:4px;display:block;background:#f2f6f8}
.skucolors .sw span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skucolors .sw.on{border-color:#e07b1a;background:#fff7ec}
.selinfo{font-size:13px;color:#5b7784;margin:8px 0}
.selinfo .pprice{font-size:20px;margin:0}
.qtybox{display:inline-flex;align-items:stretch;border:1px solid #dde5e9;border-radius:5px;overflow:hidden;background:#fff}
.qtybox button{width:30px;border:0;background:#f5f8fa;color:#26414f;font-size:16px;cursor:pointer;line-height:1}
.qtybox button:hover{background:#eaf0f4}
.qtybox input{width:56px;border:0;border-left:1px solid #dde5e9;border-right:1px solid #dde5e9;text-align:center;padding:6px 4px;font-size:13px;font-family:inherit}
.buybtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pinfo h1{font-size:22px;margin:0 0 10px;color:#0b2b3c}
.pcode{color:var(--muted);font-size:13px;margin:4px 0}
.pstk{margin:12px 0}
.pprice{font-size:24px;color:#c0392b;margin:10px 0}
.sku{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}
.sku th,.sku td{border-bottom:1px solid #eef2f4;padding:7px 8px;text-align:left}
.sku th{background:#f7fafb;color:var(--muted);font-weight:400}
.pact{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
/* 详情页加购表单（会员可见）：规格 + 数量 + 加入购物车 */
.pact .addcart{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;margin:0 0 8px}
.pact .addcart label{font-size:13px;color:#5b7784}
.pact .addcart select{padding:7px 10px;border:1px solid #dde5e9;border-radius:5px;font-size:13px;font-family:inherit;max-width:300px;background:#fff}
.pact .addcart input.qty{width:72px;padding:7px 8px;border:1px solid #dde5e9;border-radius:5px;font-size:13px;font-family:inherit}
.pact .btn[disabled]{opacity:.55;cursor:not-allowed}
.tip.warn{color:#c0392b}
.member-wait{margin-top:10px}
.psum{color:var(--muted);font-size:13px;margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}

.pdesc{line-height:1.9;word-break:break-word}
.pdesc img{border-radius:6px;margin:8px 0}
/* 新闻 */
.news{list-style:none;padding:0;margin:0}
.news li{border-bottom:1px solid #eef2f4}
.news li a{display:flex;gap:14px;padding:12px 0;color:inherit}
.news img{width:110px;height:76px;object-fit:cover;border-radius:6px}
.news h3{margin:0 0 5px;font-size:15px;color:#22303a}
.news p{margin:0;color:#7a8b93;font-size:13px}
.dt{color:#a3b1b8;font-size:12px}
.art h1{font-size:24px;color:#0b2b3c;margin-bottom:6px}
.art .dt{display:block;margin-bottom:16px}
.contact{list-style:none;padding:0;color:#4a6570}
/* 表单 */
.fm{max-width:460px;background:#fff;border-radius:10px;padding:22px;margin:20px auto}
.fm h1{margin:0 0 16px;font-size:20px;color:#0b2b3c}
.fm label{display:block;margin:12px 0 4px;font-size:13px;color:#5b7784}
.fm input[type=text],.fm input[type=password],.fm input[type=email],.fm textarea,
.fm select{width:100%;padding:9px 11px;border:1px solid #dde5e9;border-radius:5px;font-size:14px;font-family:inherit}
.fm .btn{width:100%;padding:10px;margin-top:18px;font-size:15px}
.msg{padding:9px 12px;border-radius:5px;font-size:13px;margin:10px 0}
.msg.err{background:#fdeaea;color:#c0392b}
.msg.ok{background:#e6f7ee;color:#12805a}
.tip{color:#8a9aa2;font-size:12px;margin:8px 0}
/* 会员中心 */
/* 注意：.tabs 只在这里定义一次！下方 v1.1 区块还有一套 —— 曾因两处定义叠加
   （前一处的 background:#0b6b7c 与后一处的 color:#0a6ebd 各生效一半）
   导致选中标签"深青底 + 蓝字"看不清。统一挪到 v1.1 区块里单点定义。 */
.box{background:#fff;border-radius:10px;padding:20px;margin-bottom:18px}
.chk{display:inline-flex;align-items:center;gap:6px;margin:6px 16px 6px 0;font-size:14px}
.empty{color:#a3b1b8;text-align:center;padding:34px 0}
/* 后台 */
body.admin{background:#eef2f4}
.adhd{background:#12333f;color:#fff;height:54px;display:flex;align-items:center;padding:0 20px;gap:18px;
  background-image:linear-gradient(rgba(6,35,56,.78),rgba(6,35,56,.78)),url("img/hd_light_1915.jpg");
  background-size:cover;background-position:center}
.adhd a{color:#bcd6de}
.adhd .sp{flex:1}
.adbox{max-width:1240px;margin:18px auto;padding:0 16px}
.adbox .panel{background:rgba(255,255,255,.96)}
.panel{background:#fff;border-radius:8px;padding:16px;margin-bottom:16px}
table.tb{width:100%;border-collapse:collapse;font-size:13px}
table.tb th,table.tb td{border-bottom:1px solid #eef2f4;padding:7px 8px;text-align:left;vertical-align:top}
table.tb th{background:#f7fafb;color:#5b7784;font-weight:400}
table.tb tr:hover td{background:#fafcfd}
/* 分类拖拽排序：行 + 把手 + 拖动中的上下插入线 */
table.tb tr.dragrow{ cursor:grab; }
table.tb tr.dragrow.dragging{ opacity:.45; cursor:grabbing; }
table.tb tr.dragrow td.draghandle{ text-align:center; color:#9db4c2; cursor:grab;
  user-select:none; -webkit-user-select:none; font-size:15px; line-height:1; }
table.tb tr.dragrow.over-top td{ box-shadow:inset 0 2px 0 0 #0a6ebd; }
table.tb tr.dragrow.over-bot td{ box-shadow:inset 0 -2px 0 0 #0a6ebd; }

/* ---------- 后台分类管理：一级 / 二级的层级区分 + 二级默认收起 ---------- */
/* 工具条 */
.cattools{ margin:0 0 10px; font-size:13px; color:#5b7784; }
.cattools b{ color:#0b2b3c; }
.cattools button{ margin-left:6px; }

/* 一级行：底色分隔 + 名字加粗，一眼看出这是"大类" */
table.tb.cattb tr.lvt0 td{
  background:#f4f9fc; border-bottom:1px solid #dbe7ee; border-top:1px solid #dbe7ee;
  font-weight:700;
}
table.tb.cattb tr.lvt0:first-child td{ border-top:0; }
table.tb.cattb tr.lvt0:hover td{ background:#eaf3f9; }
table.tb.cattb tr.lvt0 td.draghandle{ color:#0a6ebd; }

/* 二级行：★ 不加粗、字号略小、白底 —— 与一级形成明确反差。
   二级默认收起（admin.js 的 cattoggleInit 加 .cattuck） */
table.tb.cattb tr.lvt1 td{ background:#fff; font-weight:400; }
table.tb.cattb tr.lvt1:hover td{ background:#fafcfd; }
table.tb.cattb tr.lvt1.cattuck{ display:none; }

/* 层级标签：直接标出"一级分类/二级分类"，不靠猜字号 */
table.tb.cattb .catdepth{
  display:inline-block; min-width:52px; margin-right:8px; padding:1px 6px;
  font-size:11px; line-height:17px; text-align:center; vertical-align:middle;
  border-radius:3px; font-weight:400;
}
table.tb.cattb tr.lvt0 .catdepth{ background:#0a6ebd; color:#fff; }
table.tb.cattb tr.lvt1 .catdepth{ background:#e8eef2; color:#6b8494; }
table.tb.cattb .catname input{ font-weight:inherit; }

/* 折叠三角 */
table.tb.cattb td.cattoggle{ cursor:pointer; cursor:pointer; }
table.tb.cattb td.cattoggle .tri{
  display:inline-block; font-size:12px; color:#0a6ebd; line-height:1;
  transition:transform .15s;
}
table.tb.cattb tr.catopen td.cattoggle .tri{ transform:rotate(90deg); }

/* 分类图标列 */
table.tb.cattb td.catpic{ white-space:nowrap; }
table.tb.cattb td.catpic .picprev{
  width:34px; height:34px; object-fit:cover; vertical-align:middle;
  border:1px solid #dbe7ee; border-radius:5px; background:#f7fafb;
}
table.tb.cattb td.catpic .upgo{ margin:3px 0; }
table.tb.cattb td.catpic .uptip{ font-size:11px; color:#6b8494; margin-left:4px; }
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:#fff;border-radius:8px;padding:14px 16px}
.kpi b{display:block;font-size:24px;color:#0b6b7c}
.kpi span{color:#8a9aa2;font-size:12px}
/* 页脚 */
.ft{background:#0b2b3c;color:#9fc3ce;margin-top:30px;padding:26px 0;font-size:13px}
.ft h4{color:#fff;margin:0 0 8px;font-size:15px}
.ft p{margin:4px 0}
.icp{opacity:.7}
/* 后台：同样海底底纹 + 白卡，但更朴素，主要看字 */
body.admin{background-image:linear-gradient(rgba(255,255,255,.93),rgba(255,255,255,.95)),url("img/bg_tile_1440.jpg")}

/* ===== v1.1 商城 / 会员 / 授权 ===== */
.fm.wide{max-width:1000px}
.bizbox{border-left:3px solid #0a6ebd;padding-left:10px;margin:8px 0}
.thumb{width:100px;height:100px;object-fit:cover;border:1px solid #e3ecf3;border-radius:6px;background:#f5f9fc}
.cart .thumb{width:60px;height:60px}
.cart-total{margin:12px 0;font-size:16px}

/* ── 售后申请：勾选要退的明细行（2026-10-06）
   原来只有一个金额框，后台只知道「退了一笔钱」不知道退什么货，
   现在让客户明确选商品行 + 可填退货数量。 */
.asitems{ border:1px solid #e2ebf0; border-radius:8px; overflow:hidden; }
.asitem{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 11px; margin:0;
  border-bottom:1px solid #eef3f6; cursor:pointer; line-height:1.5;
}
.asitem:last-child{ border-bottom:0; }
.asitem:hover{ background:#f7fafc; }
.asitem input{ width:16px; height:16px; margin:0; cursor:pointer; flex:0 0 auto; }
.asitem .mut{ font-size:12.5px; color:#7d94a3; margin-left:auto; text-align:right; }
.cart-total b,.big{font-size:22px;color:#c0392b}
.cart-act{display:flex;gap:10px;align-items:center;margin-top:8px}
/* 标签页（.tabs 全站唯一定义处，别再在别处重复定义） */
.tabs{display:flex;gap:6px;margin:10px 0 14px;border-bottom:1px solid #e3ecf3;flex-wrap:wrap}
.tabs a{padding:8px 16px;color:#37566a;font-size:14px;border-bottom:2px solid transparent;border-radius:6px 6px 0 0}
.tabs a:hover{color:#0a6ebd;background:#f4f9fd}
.tabs a.on{color:#0a6ebd;border-bottom-color:#0a6ebd;font-weight:700;background:#eaf4fd}
/* 售后待处理角标（订单/售后 两个选项卡共用 .tabs） */
.tabbadge{
  display:inline-block; min-width:17px; padding:0 5px; margin-left:5px;
  font-style:normal; font-size:11.5px; line-height:17px; text-align:center;
  color:#fff; background:#e2483c; border-radius:9px; vertical-align:1px;
}
/* 售后单号下面的详情块：申请时间/联系人/买家回寄/处理说明/处理人 */
.asdetail{ margin-top:5px; font-size:12px; color:#7d94a3; line-height:1.55; }
.asdetail div{ margin-top:2px; }
.mut{color:#7d94a3;font-size:12.5px}
/* 订单列表：订单主行 + 紧跟其下的产品明细行（缩略图/标题/条码/SKU/数量/小计/备注） */
tr.odit>td{background:#f7fafc;border-bottom:1px solid #e9f0f5;padding:10px 10px 12px}
.oits{display:flex;flex-direction:column;gap:8px}
.oit{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #e9f0f5;border-radius:8px;padding:8px 10px}
.oit-img{flex:0 0 56px;width:56px;height:56px;border:1px solid #e3ecf3;border-radius:6px;overflow:hidden;background:#f5f9fc;display:flex;align-items:center;justify-content:center}
.oit-img img{width:100%;height:100%;object-fit:cover;display:block}
.oit-img i{font-size:11px;color:#a3b1b8;font-style:normal}
.oit-main{flex:1;min-width:0;display:block}
.oit-t{display:block;font-size:13.5px;color:#12283a;line-height:1.5;margin-bottom:4px}
a.oit-t:hover{color:#0a6ebd}
.oit-m{font-size:12px;color:#7d94a3;line-height:1.7;display:block;word-break:break-all}
.oit-m b{color:#4a6570;font-weight:600}
.oit-sum{flex:0 0 auto;text-align:right;font-size:12.5px;color:#7d94a3;white-space:nowrap;line-height:1.6}
.oit-sum b{display:block;font-size:15px;color:#c0392b}
.oit-note{margin-top:9px;font-size:12.5px;color:#7d94a3}
.oit-none{font-size:12.5px;color:#a3b1b8}
.up b{color:#17a673}.down b{color:#d9534f}
table.kv{width:100%;margin-bottom:14px}
table.kv th{width:120px;text-align:left;color:#5b7784;font-weight:400;padding:6px 0}
table.kv td{padding:6px 0}
.wrapcell{max-width:260px;white-space:normal}
.inline{display:inline-block;margin-right:6px}
form.inline{margin:0}
.btn.mini{padding:3px 8px;font-size:12px}
.btn.sm{padding:5px 10px;font-size:13px}
.qform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.stk.warn{background:#fdf8ee;border-color:#f3ddb6;color:#a57612}
.empty{padding:22px 0;color:#7d94a3;text-align:center}
/* 授权书 */
.auth-wrap{max-width:820px}
.auth-bar{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.auth-paper{background:#fff;border:1px solid #e3ecf3;border-radius:10px;padding:34px 38px}
.auth-doc{font-size:15px;line-height:1.9;color:#12283a}
.auth-doc h1{text-align:center;font-size:26px;letter-spacing:4px;margin:0 0 6px}
.auth-no{text-align:center;color:#5b7784;font-size:13px}
.auth-big{font-size:20px;font-weight:700;text-align:center;margin:14px 0}
.auth-sign{margin-top:40px;text-align:right;line-height:1.9}
.auth-seal{margin-top:22px;color:#7d94a3}
.auth-foot{margin-top:26px;font-size:12.5px;color:#7d94a3;border-top:1px dashed #e3ecf3;padding-top:10px}
@media print{
  .hd,.ft,.auth-bar,.noprint{display:none!important}
  .auth-paper{border:0;padding:0}
  body{background:#fff}
}
@media(max-width:760px){
  .hdin{flex-wrap:wrap;height:auto;padding:10px 0}
  .nav{flex-wrap:wrap;gap:12px;font-size:13px}
  .hero{padding:34px 20px}.hero h1{font-size:24px}
  .pdetail{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .ct{height:auto}
}

/* ===== 后台产品编辑：1688 式规格录入（先列规格值 → 自动组合 SKU 表）===== */
.attrbox{border:1px solid #e3ecf3;background:#fafcfd;border-radius:8px;padding:12px 14px;margin:10px 0 16px}
.attrhd{margin:0 0 10px;font-size:13px;color:#5b7784;line-height:1.7}
.attrhd b{color:#12283a}
.attrline{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px dashed #e6eef3;flex-wrap:wrap}
.attrline:first-of-type{border-top:0}
.attrlabel{flex:0 0 44px;width:44px;font-weight:600;color:#33525f;font-size:13.5px;padding-top:7px}
.attritems{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;min-width:260px;padding-top:2px}
.attradd{display:flex;gap:6px;align-items:center;flex:1 1 300px}
.attrin{flex:1 1 auto;min-width:170px;padding:6px 9px;border:1px solid #dde5e9;border-radius:5px;font-size:13px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #cfdde5;background:#fff;border-radius:6px;padding:3px 7px 3px 4px;font-size:13px;max-width:290px}
.chip b{font-weight:500;color:#12283a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.chip .cimgwrap{position:relative;width:32px;height:32px;flex:0 0 32px;cursor:pointer;display:block}
.chip .cimg{width:32px;height:32px;border-radius:4px;border:1px solid #e3ecf1;background:#f2f6f8;object-fit:cover;display:block}
.chip .cimg.ph{display:flex;align-items:center;justify-content:center;color:#9fb3be;font-size:11px;border-style:dashed}
.chip .cf{display:none}
.chip .chipdel{color:#c0392b;text-decoration:none;font-weight:700;font-size:15px;line-height:1;padding:0 2px}
.chip .chipdel:hover{color:#e74c3c}
.attrbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:11px;border-top:1px solid #e6eef3}
.attrbar .barlab{font-weight:600;color:#33525f;font-size:13.5px}
.attrbar input.num{width:78px;padding:6px 8px;border:1px solid #dde5e9;border-radius:5px}
.attrbar input.pre{width:132px;padding:6px 8px;border:1px solid #dde5e9;border-radius:5px}
.attrbar .sp{margin-left:auto}
.skuhd{margin:14px 0 6px;font-size:13.5px;color:#5b7784}
.skuhd b{color:#12283a}
.skuhd .mut,.attrbox .mut{color:#93a7b2}
table.skugrid td.idx{color:#93a7b2;font-size:12px;text-align:center}
table.skugrid td.ck{font-weight:600;color:#12283a}
table.skugrid td.im input[type=file]{font-size:11px;margin-top:3px;display:block}
table.skugrid .rmv{color:#c0392b;text-decoration:none;font-size:17px;font-weight:700;line-height:1;display:block;text-align:center}
table.skugrid .rmv:hover{color:#e74c3c}

/* 前台详情页：整色缺货的颜色块变淡（仍可点，点了会显示缺货） */
.skucolors .sw.dis{opacity:.5}
.skucolors .sw.dis.on{opacity:.85}
.skuitems .si{min-width:74px;justify-content:center;text-align:center}

/* ===== 详情页 1688 式规格表（v1.6）：筛选条 + 规格表（行内填数量）+ 汇总 + 批量加购 =====
   表体由 site.js 从 #skudata 生成；筛选条与「加入购物车」由 Generator 输出。 */
.skuarea{margin-top:4px}
/* 「全部」是个纯文字 chip，不用 62px 的色块宽度 */
.skucolors .sw.all{width:auto;min-width:56px;justify-content:center;height:auto;padding:7px 10px}
.skutable-box{max-height:342px;overflow:auto;border:1px solid #e6e0d4;border-radius:6px;background:#fff;margin:10px 0 12px}
.skutable{width:100%;border-collapse:collapse;font-size:13px}
.skutable th{position:sticky;top:0;z-index:1;background:#f7f4ec;color:#5b7784;font-weight:600;
  text-align:left;padding:9px 10px;border-bottom:1px solid #e6e0d4;white-space:nowrap}
.skutable td{padding:8px 10px;border-bottom:1px solid #f1ece1;vertical-align:middle}
.skutable tr.skur:last-child td{border-bottom:0}
.skutable tr.skur:hover{background:#fffdf7}
.skutable .c-name{color:#12283a;font-weight:600}
.skutable .c-price{color:#c0392b;font-weight:700;white-space:nowrap}
.skutable .c-stock{color:#7d94a3;white-space:nowrap}
/* 规格图列：每行左侧显示该 SKU 的规格专属图（客户要求「规格图放产品规格左边」） */
.skutable .c-img{width:52px;padding:5px 6px 5px 10px}
.skutable .c-img img{width:38px;height:38px;object-fit:cover;border:1px solid #eef2f4;border-radius:4px;display:block;background:#fafcfd}
.skutable .c-img .noimg{display:block;width:38px;height:38px;border:1px dashed #e6e0d4;border-radius:4px;background:#fafcfd}
.skutable .c-qty{white-space:nowrap;width:136px}
.skutable tr.skur.out .c-name,.skutable tr.skur.out .c-price{color:#9aa8b4;font-weight:400}
.skutable .c-qty .qm,.skutable .c-qty .qp{width:26px;height:26px;line-height:1;padding:0;border:1px solid #dcd5c6;
  background:#faf8f3;color:#12283a;border-radius:4px;cursor:pointer;font-size:15px;vertical-align:middle}
.skutable .c-qty .qm:hover,.skutable .c-qty .qp:hover{background:#f1ece1}
.skutable .c-qty .qty{width:56px;height:26px;margin:0 4px;padding:0 2px;text-align:center;
  border:1px solid #dcd5c6;border-radius:4px;font-size:13px;font-family:inherit;vertical-align:middle}
.skunone{color:#7d94a3;font-size:13px;padding:10px 2px}
.skusum{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;color:#5b7784;font-size:13.5px;padding:2px 2px 10px}
.skusum b{color:#12283a}
.skusum .ss-amt b{color:#c0392b;font-size:16px}

/* 加购成功弹窗（DOM 由 site.js 建）：点遮罩关闭=继续浏览，只有「去购物车」会离开本页 */
.kdmodal{display:none;position:fixed;inset:0;z-index:9000}
.kdmodal .kdmask{position:absolute;inset:0;background:rgba(15,22,36,.45)}
.kdmodal .kdbox{position:relative;margin:14vh auto 0;width:min(88vw,340px);background:#fff;border-radius:10px;
  box-shadow:0 18px 48px rgba(10,18,35,.35);padding:26px 22px 20px;text-align:center}
.kdmodal .kdtick{width:52px;height:52px;border-radius:50%;background:#22a06b;margin:0 auto 12px;position:relative}
.kdmodal .kdtick:after{content:"";position:absolute;left:18px;top:11px;width:13px;height:23px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.kdmodal .kdt{font-size:19px;font-weight:700;color:#12283a;margin-bottom:8px}
.kdmodal .kds{font-size:13px;color:#5b7784;line-height:1.7;margin-bottom:18px}
.kdmodal .kdacts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media print{ .kdmodal{display:none !important} }

/* ===== 授权书金框模板（v1.5：金框背景 + 公章 + 可编辑文字）=====
   缩放：.gf-page 自己定义 --gf-pw / --gf-u，所有定位按底图 1312x1776 像素 * var(--gf-u)。
   纯 calc，兼容老浏览器；后台编辑态靠 admin.js 收集文字后提交。 */
.gf-wrap{max-width:1040px;margin:18px auto}
.gf-page{
  --gf-pw: min(calc(100vw - 40px), 1000px);
  --gf-u: calc(var(--gf-pw) / 1312);
  position:relative; width:var(--gf-pw); height:calc(var(--gf-u) * 1776);
  background:#fdfaf2; box-shadow:0 6px 28px rgba(20,30,60,.25); overflow:hidden; margin:0 auto;
}
.gf-bg{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; -webkit-user-drag:none; }
.gf-layer{ position:absolute; inset:0; }
.gf-f{ position:absolute; z-index:2; color:#1b2b4b;
  font-family:"Source Han Serif SC","Noto Serif SC","Songti SC","SimSun","STSong",serif;
  outline:0; white-space:pre-wrap; word-break:break-word; border-radius:4px; }
.gf-body{ left:calc(246 * var(--gf-u)); top:calc(700 * var(--gf-u)); width:calc(812 * var(--gf-u));
  font-size:calc(40 * var(--gf-u)); line-height:calc(71 * var(--gf-u)); text-indent:2em; text-align:justify; }
.gf-valid{ left:calc(246 * var(--gf-u)); top:calc(1146 * var(--gf-u)); width:calc(812 * var(--gf-u));
  font-size:calc(40 * var(--gf-u)); line-height:calc(71 * var(--gf-u)); text-align:center; }
.gf-unit{ left:calc(246 * var(--gf-u)); top:calc(1454 * var(--gf-u)); width:calc(812 * var(--gf-u));
  font-size:calc(34 * var(--gf-u)); line-height:calc(58 * var(--gf-u)); text-align:center; }
.gf-date{ left:calc(246 * var(--gf-u)); top:calc(1510 * var(--gf-u)); width:calc(812 * var(--gf-u));
  font-size:calc(34 * var(--gf-u)); line-height:calc(58 * var(--gf-u)); text-align:center; }
.gf-authno{ right:calc(232 * var(--gf-u)); top:calc(100 * var(--gf-u));
  font-size:calc(36 * var(--gf-u)); line-height:calc(44 * var(--gf-u));
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif; font-weight:700; letter-spacing:-0.02em;
  text-align:right; color:#ffffff; text-shadow:0 1px 2px rgba(0,0,0,.40); }
.gf-seal{ position:absolute; z-index:1; left:calc(528 * var(--gf-u)); top:calc(1229 * var(--gf-u));
  width:calc(310 * var(--gf-u)); height:calc(310 * var(--gf-u)); opacity:.92; pointer-events:none; }
/* 前台防伪水印（只在 authorize_view.aspx 的只读展示上叠加，后台不带）
   调法：① 字号大小 = .gf-wm span 的 font-size（默认屏宽的 4% -> 单个水印宽约屏宽 40%）；
        ② 疏密 = .gf-wm 的列数 + gap，或 Generator 里 span 的个数；
        ③ 透明度 = color 里的 .5。
   45° 靠整体 rotate(-45deg)，容器故意放大到 1.9 倍，旋转后仍能铺满整页。 */
.gf-wm{ position:absolute; left:-45%; right:-45%; top:-45%; bottom:-45%;
  z-index:3; pointer-events:none; overflow:hidden;
  display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr;
  gap:0; place-items:center; transform:rotate(-45deg); }
.gf-wm span{ font-size:calc(var(--gf-pw) * 0.04); line-height:1.25; font-weight:700;
  font-family:"Source Han Serif SC","Noto Serif SC","Songti SC","SimSun","STSong",serif;
  color:rgba(27,43,75,.5); white-space:nowrap; letter-spacing:0; }
/* 后台编辑态：文字可点改 */
.gf-page.is-edit .gf-f{ cursor:text; }
.gf-page.is-edit .gf-f:hover{ background:rgba(216,180,90,.14); }
.gf-page.is-edit .gf-f:focus{ background:rgba(216,180,90,.22); box-shadow:0 0 0 2px rgba(216,180,90,.65); }
.gf-page.is-edit .gf-authno:hover{ background:rgba(255,255,255,.16); }
.gf-page.is-edit .gf-authno:focus{ background:rgba(255,255,255,.24); box-shadow:0 0 0 2px rgba(216,180,90,.85); }
.gf-editbar{ display:flex; gap:10px; align-items:center; max-width:1040px; margin:0 auto 12px; flex-wrap:wrap; }
.gf-editbar .mut{ color:#7d94a3; font-size:12.5px; }
/* 前台「仅能查看」提示：只在打印时出现（屏幕上不占地方）。
   .gf-view 只加在前台 authorize_view.aspx 的容器上，后台编辑页不受影响。 */
.gf-view-note{ display:none; }
@media print{
  /* A4 上下左右各留 8mm → 可印区 194mm × 281mm。
     纸宽取「宽、高两个约束里更小的那个」：宽不过 194mm，高按比例也不许超 281mm。
     直接写 210mm 会算出 284.4mm 的纸高，加默认页边距后会溢出成第二张空白页。 */
  @page{ size:A4; margin:8mm; }
  .gf-page{
    --gf-pw: min( calc(210mm - 16mm), calc((297mm - 16mm) * 1312 / 1776) ) !important;
    width:var(--gf-pw); height:calc(var(--gf-u) * 1776); box-shadow:none;
  }
  .hd,.ft,.auth-bar,.noprint,.gf-editbar,.adhd{ display:none !important; }
  .gf-wrap,.adbox{ max-width:none !important; margin:0 !important; padding:0 !important; }
  .gf-page.is-edit .gf-f:hover,.gf-page.is-edit .gf-f:focus{ background:transparent !important; box-shadow:none !important; }
  /* 前台授权书 = 仅在线查看：打印时不给正文与印章，只留一句提示（后台编辑页没有 .gf-view，照常可打印） */
  .gf-view{ display:none !important; }
  .gf-view-note{ display:block !important; padding:90px 20px; text-align:center;
    font-size:17px; color:#444; letter-spacing:.02em; }
}

/* ===================================================================
   产品分类树：三角号 → 加号 / 减号（v1.6）
   用 CSS 转义 \2212（U+2212 减号）而不是字面量字符，
   这样文件无论被当成 UTF-8 还是 GBK 读都不会乱码。
   =================================================================== */
.cattree details>summary:before{
  content:"+"; color:var(--blue); font:700 19px/1 Consolas,"Courier New",monospace;
  width:16px; flex:0 0 16px; text-align:center; user-select:none;
}
.cattree details[open]>summary:before{ content:"\2212"; color:var(--muted); }
.cattree details>summary:hover:before{ color:var(--blue-d); }
/* 分类页「只显示当前分支」时的返回上级入口 */
.cattree .backup{ display:block; padding:5px 8px; margin-bottom:6px; border-radius:6px;
  font-size:13px; color:var(--blue); background:#eaf4fb; border:1px solid #d6e8f4; }
.cattree .backup:hover{ background:#dcecf8; }
.cattree .branchname{ display:block; padding:4px 8px; margin:0 0 4px; font-size:13px;
  font-weight:700; color:#0b2b3c; border-bottom:1px dashed var(--line); }

/* ===================================================================
   产品列表：一排 4 个（v1.6）
   原来 .grid 是 auto-fill minmax(210px)，在分类页 1180-232-20 的可用宽度里
   刚好卡在 3 列。这里给 catmain 内的列表固定 4 列，并按屏宽回落到 3/2 列。
   =================================================================== */
.catmain .grid{ grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:1280px){ .catmain .grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:900px){  .catmain .grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){  .catmain .grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }

/* 产品卡片上的型号行（前台能一眼看到型号，也方便核对搜索结果） */
.cmod{ font-size:12px; color:var(--muted); margin:2px 0 0; }
.cmod b{ color:var(--ink); font-weight:600; }
/* 新品上市卡片：标题下方那行「上市 2026年10月」 */
/* ★ 上市时间：用户要求「用红字突出显示」。
   背景是深蓝底，所以不能用暗红 #c8102e（会糊掉），用偏亮的珊瑚红才跳得出来。 */
.ctime{ font-size:12px; color:#ff5f6d; margin:2px 0 0; letter-spacing:.5px; }
.ctime b{ color:#ff8a94; font-weight:700; }

/* ===================================================================
   顶栏：搜索框 + 「产品中心」hover 展开分类（v1.6）
   下拉背景透明度统一走 --navdrop-bg，要调只改这一个值。
   =================================================================== */
/* 分类下拉的透明度：取自原站 header .nav .knowWin —— background-color:#fff; opacity:.9。
   ★ v1.7 修正文字发虚：原值 .9/.96 太透，且带 backdrop-filter:blur(8px)。
     Chromium 里 backdrop-filter 会关掉文字的次像素抗锯齿（LCD text），
     面板内所有字都会比页面其它位置明显发虚 —— 再叠 13px 小字就「看不清」了。
     现在改成接近实底 + 去掉 blur，并靠 box-shadow 保留层次感与悬浮感。 */
:root{ --navdrop-bg: rgba(255,255,255,.985); --navdrop-bg2: #fff; }
/* 搜索框在主栏右侧（.hdsearch 里）。主栏现在露出的是「深蓝照片+蒙版」，
   搜索框做成白色胶囊（和老站一样），在深底上清晰可见。 */
.hdsearch{ margin-left:auto; flex:0 0 auto; display:flex; align-items:center; }
.hdin .navsearch{ margin-left:14px; flex:0 0 auto; display:flex; align-items:center; }
.navsearch .sbx{ display:flex; align-items:center; gap:2px;
  background:#f2f6f9; border:1px solid #d8e3ea;
  border-radius:18px; padding:3px 5px 3px 12px; }
.navsearch .sbx:focus-within{ background:#fff; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(10,110,189,.12); }
.navsearch input[type=text]{ width:200px; background:transparent; border:0; outline:0;
  color:var(--ink); font:13px/1.6 inherit; font-family:inherit; }
.navsearch input[type=text]::placeholder{ color:#8ba0af; }
.navsearch .sbtn{ border:0; background:transparent; color:#4a6570; cursor:pointer;
  font-size:15px; line-height:1; padding:3px 7px; border-radius:14px; }
.navsearch .sbtn:hover{ background:#e6eef4; color:var(--blue); }
/* 以图搜图：照相机按钮 + 粘贴提示 */
.navsearch .scam{ position:relative; }
.navsearch .stip{ position:absolute; top:120%; right:0; white-space:nowrap;
  background:rgba(6,35,56,.94); color:#dff1f9; font-size:12px; padding:5px 9px;
  border-radius:6px; opacity:0; visibility:hidden; transition:opacity .15s; z-index:31; }
.navsearch .scam:hover .stip{ opacity:1; visibility:visible; }
@media(max-width:980px){ .navsearch input[type=text]{ width:130px; } }
@media(max-width:700px){
  .navsearch input[type=text]{ width:104px; }
  .logo{ font-size:19px; gap:10px; }
  .logo i{ display:none; }
  .logo .lgkd{ height:34px; }
  /* 窄屏同样保持 AquaTide ≥ KEEP DIVING */
  .logo .lgaq{ height:38px; }
  .logo .lgdiv{ height:30px; }
  /* 新顶栏：公司名/热线那行在窄屏缩小并允许换行，别把 logo 挤走 */
  .hdin{ min-height:0; padding:10px 0; gap:12px; }
  .hbl{ margin-top:6px; gap:4px 12px; }
  .hbl .hcomp{ font-size:15px; letter-spacing:0; }
  .hbl .htel{ font-size:12.5px; }
  .membar a.hb{ padding:4px 12px; font-size:12.5px; letter-spacing:0; }
}
@media(max-width:460px){
  /* 极窄屏：logo 和右侧区上下堆叠，公司名/热线独占一行，保证都看得清 */
  .hdin{ flex-direction:column; align-items:flex-start; }
  .hdright{ align-items:flex-start; width:100%; }
  .hdtools{ justify-content:flex-start; }
  /* ★ margin-left 必须显式归零，而且选择器要带 .hdin 才压得住上面那两条：
       .hdin .navsearch{margin-left:14px} / .hdsearch{margin-left:auto}
       都是「搜索框当 logo 的兄弟节点」那套老结构留下的，descendant 选择器在新结构
       （.hdin > .hdright > .hdsearch > .navsearch）里仍然命中。
       不清掉会多出 14px 把整页撑出横向滚动条（实测 scrollW 404 > clientW 390），
       垂直堆叠时 .hdsearch 的 margin-left:auto 还会把搜索框顶到右边。 */
  .hdin .hdsearch{ width:100%; margin-left:0; }
  .hdin .navsearch{ width:100%; margin-left:0; }
  .navsearch input[type=text]{ width:auto; flex:1 1 auto; }
}

/* 导航项（带下拉的那个）独立放在 .nav 外面：
   .nav 有 overflow:hidden（防换行溢出压正文），下拉放进去会被裁掉。 */
.navitem{ position:relative; display:flex; align-items:center; flex:0 0 auto; }
.navitem>a{ color:#fff; font-size:16px; height:44px; line-height:44px; padding:0 18px;
  white-space:nowrap; display:flex; align-items:center; gap:4px;
  text-shadow:0 1px 3px rgba(0,0,0,.35); }
/* 鼠标停在「产品中心」上（或停在面板上）都算展开 */
.navitem:hover>a,.navitem.on>a{ background-color:#c0392b; color:#fff; }
.navitem .caret{ width:0; height:0; border-left:4px solid transparent;
  border-right:4px solid transparent; border-top:5px solid rgba(255,255,255,.9); }
/* ★ 隐藏态必须用 display:none。原来用 opacity:0 + visibility:hidden 隐藏，元素仍参与
   滚动溢出计算，会把文档撑高（线上实测多出 115px）→ 页脚下面露出一大块背景。
   下拉打开时补回 display:flex，布局/尺寸不变。 */
.navdrop{ position:absolute; top:100%; left:0; margin-top:0;
  display:none; flex-wrap:wrap; gap:4px; padding:10px 6px;
  /* 宽度按内容自适应，但最多不超过「屏幕宽 - 60px」，窄屏时列会自动折行 */
  width:max-content; max-width:min(920px, calc(100vw - 60px));
  background:var(--navdrop-bg);
  /* 刻意不用 backdrop-filter：它会让面板内文字失去次像素抗锯齿而发虚 */
  border:1px solid rgba(11,58,82,.12); border-radius:10px;
  box-shadow:0 14px 36px rgba(4,26,40,.24);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:30; }
/* 鼠标从导航项移到下拉之间的「桥」，否则一离开链接下拉就消失 */
.navdrop:before{ content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
.navitem:hover .navdrop{ display:flex; opacity:1; visibility:visible; transform:translateY(0); }
.ndcol{ list-style:none; margin:0; padding:0 4px; flex:1 1 180px; min-width:170px; }
.ndcol>li{ position:relative; }
.ndcol a{ display:block; padding:6px 10px; border-radius:6px; color:#123c53;
  font-size:14px; font-weight:600; line-height:1.5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ndcol a:hover{ background:rgba(10,110,189,.18); color:var(--blue); }
.ndcol>li.hassub>a:after{ content:"\203A"; float:right; margin-left:6px; color:#8aa7b8; }
.ndsub{ position:absolute; left:100%; top:-6px; margin-left:2px; list-style:none;
  margin-block:0; padding:6px; min-width:170px; display:none;
  background:var(--navdrop-bg2);
  border:1px solid rgba(11,58,82,.12); border-radius:8px;
  box-shadow:0 10px 26px rgba(4,26,40,.20);
  opacity:0; visibility:hidden; transform:translateX(-4px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s; z-index:31; }
/* 子菜单与父项之间的桥 */
.ndsub:before{ content:""; position:absolute; top:0; bottom:0; left:-8px; width:8px; }
.ndcol>li.hassub:hover>.ndsub{ display:block; opacity:1; visibility:visible; transform:translateX(0); }
/* ★ 窄屏（≤900px）隐藏一级下拉面板：此时导航条改成横向滚动，
   overflow 会把下拉面板裁掉，所以两者必须同一个断点。 */
@media(max-width:900px){ .navitem .navdrop{ display:none; } }

/* ===================================================================
   搜索页 / 搜索结果（v1.6）
   =================================================================== */
.schbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  background:var(--card); border:1px solid rgba(255,255,255,.7); border-radius:12px;
  padding:14px 16px; box-shadow:0 6px 22px rgba(9,45,73,.07); margin-bottom:16px; }
.schbar .q{ flex:1; min-width:220px; padding:9px 12px; font-size:15px;
  border:1px solid #dbe6ec; border-radius:8px; outline:0; font-family:inherit; }
.schbar .q:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,110,189,.12); }
.schbar .btn{ padding:9px 18px; }
.schtabs{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.schtabs a{ padding:5px 16px; border:1px solid #dfe7eb; border-radius:16px;
  font-size:13px; background:#fff; color:var(--ink); }
.schtabs a.on{ background:var(--blue); border-color:var(--blue); color:#fff; font-weight:700; }
.schsec h2{ font-size:16px; margin:22px 0 10px; color:#0b2b3c; }
/* 搜索结果也是一排 4 个，跟产品中心保持一致 */
.schsec .grid{ grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:1280px){ .schsec .grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:900px){  .schsec .grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){  .schsec .grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }
.schhint{ font-size:12.5px; color:var(--muted); margin:6px 0 0; }
.schimg{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px;
  border:1px dashed #9fb8c8; border-radius:8px; background:#fff;
  color:var(--blue); cursor:pointer; font-size:13px; }
.schimg:hover{ border-color:var(--blue); background:#f2f8fd; }
.schimg.on{ border-style:solid; border-color:var(--ok); color:var(--ok); }
/* 以图搜图的结果：显示相似度 */
.simbar{ font-size:11.5px; color:#7d94a3; margin-top:2px; }
.simbar i{ display:inline-block; height:4px; background:var(--teal);
  border-radius:2px; vertical-align:middle; margin-right:4px; }

/* ===== 以图搜图：粘贴/选图后的缩略图框选面板 =====
   贴在触发它的搜索框正下方；拖拽框出产品主体，框外自动变暗，点「搜索相似产品」再检索。 */
.kdimgpick{ position:absolute; z-index:60; width:344px; background:#fff;
  border:1px solid #d7e2e9; border-radius:12px; box-shadow:0 18px 50px rgba(4,26,40,.28);
  padding:12px; font-size:13px; color:var(--ink); }
.kdimgpick .kip-hd{ margin-bottom:8px; color:#0b2b3c; font-weight:600; }
.kdimgpick .kip-stage{ position:relative; display:inline-block; line-height:0;
  border:1px solid #e3ebf0; border-radius:8px; overflow:hidden; cursor:crosshair; user-select:none; }
.kdimgpick .kip-stage img{ display:block; }
.kdimgpick .kip-sel{ position:absolute; box-sizing:border-box; border:2px solid #12b8a6;
  /* 框外整体压暗，聚焦在产品上 */
  box-shadow:0 0 0 9999px rgba(8,35,56,.34); }
.kdimgpick .kip-sel .kip-h{ position:absolute; width:13px; height:13px; background:#fff;
  border:2px solid #12b8a6; border-radius:50%; }
.kdimgpick .kip-sel .h-tl{ left:-7px; top:-7px; cursor:nwse-resize; }
.kdimgpick .kip-sel .h-tr{ right:-7px; top:-7px; cursor:nesw-resize; }
.kdimgpick .kip-sel .h-bl{ left:-7px; bottom:-7px; cursor:nesw-resize; }
.kdimgpick .kip-sel .h-br{ right:-7px; bottom:-7px; cursor:nwse-resize; }
.kdimgpick .kip-act{ display:flex; gap:8px; margin-top:10px; }
.kdimgpick .kip-act .btn{ flex:1; padding:8px 0; text-align:center; }
.kdimgpick .kip-tip{ font-size:12px; color:#7d94a3; margin-top:8px; }

/* ===== 首页改版 v1.8：按原站结构（大类栏 / 海报轮播 / 公司简介 / 联系+新品 / end 页脚）
   ★ 底色：老站整站是「深蓝海底调」，用户要求首页从顶栏往下都用那种深蓝背景+蒙版。
     于是首页 body.home 用海底图 + 深蓝蒙版做底，顶栏也是深蓝照片+蒙版，连成一片。
     这一段的文字统一改浅色；产品卡仍是白卡（产品图要在白底上看），保证可读。
     内页（表格/表单多）不加 .home，仍是浅底白卡。 ===== */

/* 首页整页底色：深蓝 + 海底图 + 蒙版 */
body.home{
  color:#e6f2fa;
  background-color:#05243d;
  background-image:linear-gradient(rgba(5,32,56,.60),rgba(6,45,82,.72)),url("img/bg_tile_1440.jpg");
  background-size:cover,cover;background-position:center top,center top;
  background-attachment:scroll,fixed;background-repeat:no-repeat,no-repeat;
}
/* 通栏海报 .poster 用 width:100vw 突破 .wrap 的 1180 宽 —— 一旦出现垂直滚动条，
   100vw 会比可视宽多出约一个滚动条宽（17–21px），页面就能横向滚、底部多出一条横向滚动条。
   ★ 裁剪必须落在 main 上：overflow 只有作用在 html/body 上才有「传播到视口」的特殊规则
     （而 Chromium 里 clip 不参与该传播，实测无效）；落在 main 上是真实裁剪，稳妥。
   ★ overflow-y 必须显式写 visible，否则会被 clip 连带裁掉纵向内容。 */
main.wrap{ overflow-x:clip; overflow-y:visible; }
/* 首页板块标题：白字 + 浅分隔线（.blkh 内页也在用，所以只覆盖 body.home 下的） */
body.home .blkh{ border-bottom-color:rgba(255,255,255,.22); }
body.home .blkh h2{ color:#fff; }
body.home .more{ color:#a8cfe6; }
body.home .more:hover{ color:#fff; }
body.home .empty{ color:#a8cfe6; }

/* 顶条：公司名（左）+ 电话（左）+ 会员登录态（右）。搜索框已移到主栏右侧，这里不再有。 */
.tbin .tbname{ font-weight:600; color:#fff; font-size:13px; letter-spacing:.02em; white-space:nowrap; }
.tbin .tel{ color:#cfe6f2; white-space:nowrap; }
.tbin .membar{ margin-left:auto; }

/* ① 产品大类栏：6 个带图入口（深蓝玻璃卡，压在海底底上） */
.homecats{ display:flex; margin:18px 0 4px;
  background:rgba(9,48,84,.55); border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:14px 6px;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.hcat{ flex:1 1 0; text-align:center; text-decoration:none; color:#e6f2fa;
  padding:4px 4px; border-right:1px solid rgba(255,255,255,.14); }
.hcat:last-child{ border-right:0; }
/* 大类名称：★ 之前按「去掉那一排字」删掉了，后用户反馈「字号太小不容易看清」→
   恢复显示并放大到 19px 加粗白字 + 投影，压在深蓝玻璃卡上很清楚。
   名称同时挂在 img 的 alt 上，SEO / 无障碍不受影响。 */
.hcat .hcimg{ display:block; margin:0 auto 8px; width:104px; height:104px; }
.hcat .hcimg img{ width:100%; height:100%; object-fit:contain; }
.hcat .hcname{ display:block; font-size:19px; font-weight:700; color:#fff; letter-spacing:1.5px;
  text-shadow:0 2px 8px rgba(0,0,0,.55); }
.hcat:hover .hcname{ color:#7fd0ff; }
.hcat:hover .hcimg{ transform:translateY(-2px); transition:transform .15s; }

/* ② 海报轮播：通栏满幅（左右到屏幕边），潜水大图直接贴边。
   多张时自动轮播（assets/site.js 接管）；只有 1 张时不渲染箭头和圆点。
   用「绝对定位叠放 + opacity 淡入淡出」而不是横向位移：气泡里没有容器宽度依赖，窄屏也不会露白。 */
.poster{ position:relative; width:100vw; margin-left:calc(50% - 50vw); margin-top:16px;
  overflow:hidden; background:var(--navy); }
.pv{ position:relative; width:100%; }
/* 海报规格 2075×530（≈3.915:1）：高度随宽度按此比例自适应，图片 object-fit:cover 铺满 */
.pvs{ position:relative; width:100%; aspect-ratio:2075 / 530; }
.pvi{ position:absolute; top:0; left:0; right:0; bottom:0; opacity:0;
  transition:opacity .6s ease; pointer-events:none; }
.pvi.on{ opacity:1; pointer-events:auto; }
.pvimg{ display:block; width:100%; height:100%; }
.pvimg img{ display:block; width:100%; height:100%; object-fit:cover; }
.poster .ptxt{ position:absolute; left:0; right:0; bottom:0; padding:24px 28px;
  background:linear-gradient(transparent, rgba(4,32,52,.78)); color:#fff; }
.poster .ptxt h2{ font-size:26px; margin:0 0 6px; text-shadow:0 1px 4px rgba(0,0,0,.4); }
.poster .ptxt h2 a{ color:#fff; }
.poster .ptxt p{ font-size:14px; margin:0; opacity:.94; }
/* 左右箭头（触屏也有 hover 残影，所以默认就给可见度，鼠标上去变实） */
.pvn{ position:absolute; top:50%; margin-top:-21px; width:42px; height:42px; line-height:40px;
  border:0; border-radius:50%; background:rgba(4,26,44,.45); color:#fff; font-size:26px;
  cursor:pointer; z-index:3; padding:0; opacity:.8; transition:opacity .2s, background .2s; }
.pvn:hover{ opacity:1; background:rgba(10,110,189,.9); }
.pvprev{ left:16px; }
.pvnext{ right:16px; }
/* 圆点 */
.pvd{ position:absolute; left:0; right:0; bottom:10px; text-align:center; z-index:3; }
.pvd i{ display:inline-block; width:9px; height:9px; margin:0 4px; border-radius:50%;
  background:rgba(255,255,255,.42); cursor:pointer; transition:.2s; }
.pvd i.on{ background:#fff; transform:scale(1.25); }

/* ③ 公司简介：★ 整段完整显示，不截断。
   版式参考老站「关于我们」—— 左边一张蓝色水下品牌图，右边黑底白字整段正文，
   右边缘再压一道中国红竖条（和参考稿一致），让这一屏在整片深蓝底里跳出来。 */
.homeabout{ margin:22px 0; }
.homeabout .blkh{ margin-bottom:14px; }
.aboutwrap{ display:grid; grid-template-columns:minmax(280px,36%) 1fr; gap:22px; align-items:stretch; }
.aboutpic{ position:relative; overflow:hidden; border-radius:10px; min-height:300px;
  background:#0a2243 url("img/hero_dark_1600x620.jpg") center 42%/cover no-repeat;
  border:1px solid rgba(255,255,255,.14); }
.aboutpic:before{ content:""; position:absolute; inset:0;
  background:linear-gradient(transparent 42%, rgba(4,22,38,.72) 100%); }
.aboutpic .absx{ position:absolute; left:24px; right:24px; bottom:64px; color:#bcdcee;
  font-size:12.5px; letter-spacing:2px; }
.aboutpic .absl{ position:absolute; left:24px; bottom:20px; }
.aboutpic .absl img{ display:block; height:42px; width:auto; }
.abouttext{ background:#0b0f15; border:1px solid rgba(255,255,255,.10);
  border-right:3px solid #c8102e; border-radius:10px; padding:24px 28px; }
.abouttext p{ color:#dde6ed; line-height:2.05; font-size:14.5px; margin:0 0 10px; text-indent:2em; }
.abouttext p:last-child{ margin-bottom:0; }

/* ④ 我们的优势：标题区 + 8 个红灰交错卡片。
   红 #b81c22 / 浅灰 #eef1f3 棋盘式交错，卡片紧贴（gap:2px 只留一道细缝），
   在整片深蓝底上形成强对比的一条色块带。
   ★ 用户反馈「高度太大」→ 已把标题中英文合并成一行、去掉圆形下箭头、
     卡片中文两段用「·」连成一行、内边距收紧，整个模块从约 590px 压到约 300px。 */
.homeadv{ margin:26px 0 10px; }
.advhd{ text-align:center; margin-bottom:18px; }
.advhd h2{ margin:0 0 6px; font-size:28px; color:#fff; letter-spacing:3px;
  display:flex; align-items:baseline; justify-content:center; gap:14px; }
.aeyebrow{ color:#e8536a; font-size:13px; font-weight:700; letter-spacing:3px; font-style:normal; }
.aen{ color:#8fb6cf; font-size:11.5px; letter-spacing:1px; line-height:1.6; }
.advbar{ display:flex; align-items:center; gap:18px; max-width:520px; margin:14px auto 0; }
.advbar i{ flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.42)); }
.advbar i.r{ background:linear-gradient(270deg,transparent,rgba(255,255,255,.42)); }
.advbar span{ color:#fff; font-size:18px; font-weight:700; letter-spacing:3px; white-space:nowrap; }
.advgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.advc{ padding:24px 16px; text-align:center; }
.advc.r{ background:#b81c22; color:#fff; }
.advc.g{ background:#eef1f3; color:#2b3a45; }
.advc h3{ margin:0; font-size:22px; line-height:1.35; font-weight:700; letter-spacing:1px; }
.advc h3 .adsep{ margin:0 6px; font-weight:400; opacity:.55; }
.advc .adline{ width:26px; height:2px; margin:11px auto 9px; background:currentColor; opacity:.5; }
.advc .aden{ font-size:10px; line-height:1.5; letter-spacing:.3px; opacity:.75; }

/* ⑤ 联系我们（左）+ 新品列表（右：2 排 × 4 个）。
   ① 等高：左右两栏 stretch 到同一高度；② 标题只显示一行、超出省略；
   ③ 首页新品卡不显示库存徽标和「立即购买」按钮（这些只在产品中心/详情留着）。 */
.homenew{ display:flex; gap:20px; margin:20px 0 8px; align-items:stretch; }
.hmcontact{ flex:0 0 340px; background:rgba(9,48,84,.58);
  border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:16px 18px; }
.hmcontact h2{ font-size:18px; margin:0 0 12px; color:#fff; }
.hmcontact .cname{ font-weight:600; color:#eaf6fc; margin:0 0 10px; font-size:14px; }
.hmcontact .cline{ margin:6px 0; font-size:13.5px; color:#c3dcec; line-height:1.7; }
.hmnew{ flex:1 1 auto; min-width:0; }
.hmnew .grid{ grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:1280px){ .hmnew .grid{ grid-template-columns:repeat(3,1fr); } }
/* 首页新品卡的标题单行省略。
   ★ 必须 height:auto 覆盖通用 .ct 的 height:60px（那是给内页两行标题预留的），
     否则单行标题只占 1 行、盒子仍撑 60px，标题与「上市 x年x月」之间空出一大块。 */
.hmnew .card .ct{ display:block; height:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 首页新品卡去掉库存状态 + 购买按钮（只留图片/标题/型号，更干净） */
.hmnew .card .cmeta, .hmnew .card .cact{ display:none; }

/* ⑤ 页脚 end（按原站：底部导航 → 联系 → 版权备案 → 友情链接）
   注意：旧的 .ftc / .icp 规则不能删 —— 服务器上还没重新生成的老静态页仍在用。 */
.ftnav{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-wrap:wrap;
  justify-content:center; gap:0 10px; font-size:13px; }
.ftnav li{ display:flex; align-items:center; gap:10px; }
.ftnav a{ color:#cfe6f2; text-decoration:none; }
.ftnav a:hover{ color:#fff; }
.ftnav span{ opacity:.35; }
.ftcontact{ text-align:center; margin:0 0 6px; font-size:13px; opacity:.9; }
.ftcopy{ text-align:center; margin:0 0 12px; font-size:12.5px; opacity:.85; }
.ftcopy a{ color:#cfe6f2; text-decoration:none; }
.ftlink{ text-align:center; font-size:12.5px; opacity:.9;
  border-top:1px solid rgba(255,255,255,.12); padding-top:12px; margin-top:4px; }
.ftlink span{ opacity:.75; margin-right:4px; }
.ftlink a{ color:#cfe6f2; margin:0 8px; text-decoration:none; }
.ftlink a:hover{ color:#fff; }

@media(max-width:1100px){
  .advgrid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px){
  /* 窄屏导航条：7 项一行放不下（实测 7×100=704px > 390px 会把整页撑出横向滚动条），
     改成横向可滚动，滚动条隐藏但仍可用手指/滚轮滑。 */
  .navin{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .navin::-webkit-scrollbar{ display:none; }
  .homenew{ flex-direction:column; }
  .hmcontact{ flex:none; width:100%; }
  .homecats{ flex-wrap:wrap; }
  .hcat{ flex:0 0 33.33%; border-right:0; }
  /* 窄屏仍按 2075×530 比例，但给一个最小高度，避免手机上海报被压得看不清 */
  .pvs{ aspect-ratio:2075 / 530; min-height:150px; }
  .poster .ptxt{ padding:14px 16px; }
  .poster .ptxt h2{ font-size:19px; }
  .pvn{ width:34px; height:34px; line-height:32px; font-size:21px; margin-top:-17px; }
  .pvprev{ left:8px; }
  .pvnext{ right:8px; }
  /* 简介图文在窄屏改成上下堆叠：图在上、正文在下 */
  .aboutwrap{ grid-template-columns:1fr; }
  .aboutpic{ min-height:230px; }
  .aboutpic .absx{ bottom:56px; }
  .aboutpic .absl img{ height:32px; }
  .abouttext{ padding:18px 16px; }
  .advhd h2{ font-size:25px; }
  .advbar span{ font-size:17px; letter-spacing:2px; }
  .advc{ padding:22px 12px; }
  .advc h3{ font-size:17px; }
}
@media(max-width:520px){
  .hcat{ flex:0 0 50%; }
  .hcat .hcimg{ width:80px; height:80px; }
  .hmnew .grid{ grid-template-columns:repeat(2,1fr); }
  .advgrid{ grid-template-columns:repeat(2,1fr); }
  .advc .aden{ font-size:9.5px; }
}

/* ============================================================
   分类页改版（2026-10-05）
   需求3：分类名 + 产品数量同一行、不换行，数量跟在名字后面加括号
   需求4：一级分类加粗、字号更大，与二级明显区分
   需求5：分类名前的小图标
   需求7：默认只显示一级分类，二级收起（点 <details> 展开）
   ============================================================ */
.pageh{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pageh .pgtotal{ font-size:13px; color:#7d94a3; font-weight:400; }

/* —— 同级分类快捷条（一级页列二级、二级页列兄弟）—— */
.sibbar{ display:flex; flex-wrap:wrap; gap:7px; margin:-6px 0 14px; }
.sibbar .sibchip{
  display:inline-flex; align-items:baseline; white-space:nowrap;
  padding:4px 11px; border:1px solid #e2ebf0; border-radius:999px;
  background:#f7fafc; color:var(--ink); font-size:12.5px; text-decoration:none;
}
.sibbar .sibchip em{ font-style:normal; color:#9bb0bd; font-size:11.5px; margin-left:2px; }
.sibbar .sibchip:hover{ border-color:var(--blue); color:var(--blue); background:#eef5fa; }
.sibbar .sibchip.on{ background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600; }
.sibbar .sibchip.on em{ color:rgba(255,255,255,.8); }

/* —— 分类树：名称与数量同行不换行 —— */
.cattree .ctree > li > details > summary > a,
.cattree .ctree > li > a{ display:flex; align-items:center; gap:5px; white-space:nowrap; }
.cattree .catnm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.cattree .cnt{
  font-style:normal; font-size:11px; color:#9bb0bd; flex:0 0 auto;
  margin-left:1px; font-weight:400;
}
/* 数量必须跟名字同行：整条链一路 nowrap，flex 也不允许被挤断 */
.cattree li, .cattree summary, .cattree summary > a{ white-space:nowrap; }

/* —— 需求4：一级分类加粗，与二级区分 ——
   ★ 注意：Generator 输出的是 <li class="lv0 toplit">（toplist 与 lv0 在同一个 li 上），
     所以这里必须用 .cattree li.toplist，不能写 .cattree .toplist（后代选择器匹配不到）。 */
.cattree li.toplist > details > summary > a,
.cattree li.toplist > a{
  font-weight:700; font-size:13.5px; color:#0b2b3c;
  padding:5px 6px; margin-top:2px;
  border-top:1px solid #eef2f5;
}
.cattree .ctree > li:first-child > details > summary > a,
.cattree .ctree > li:first-child > a{ border-top:0; margin-top:0; }
.cattree li.toplist > details > summary > a:hover,
.cattree li.toplist > a:hover{ color:var(--blue); }
.cattree li.toplist .cnt{ font-weight:600; color:#7d94a3; }
/* 二级：不加粗 + 缩进 + 略小，三重区分。★ 层级判断必须落在带 lvN 的 li 上，
   不能用 .cattree ul ul（顶层的 ul 里挂的是二级，会把一级的 .catnm 一起压成 400）。 */
.cattree li.lv1, .cattree li.lv2, .cattree li.lv3{ font-weight:400 !important; }
.cattree li.lv1 .catnm, .cattree li.lv2 .catnm, .cattree li.lv3 .catnm{
  font-weight:400 !important; font-size:13px; color:#4a6274;
}
.cattree li.lv1 > details > summary > a, .cattree li.lv1 > a,
.cattree li.lv2 > details > summary > a, .cattree li.lv2 > a,
.cattree li.lv3 > details > summary > a, .cattree li.lv3 > a{
  font-weight:400 !important; font-size:13px; color:#4a6274;
  padding:3px 6px 3px 14px;   /* 左侧缩进，视觉上一眼分出层级 */
  border-top:0; margin-top:0;
}
.cattree li.lv1 > details > summary > a:hover, .cattree li.lv1 > a:hover,
.cattree li.lv2 > details > summary > a:hover, .cattree li.lv2 > a:hover{ color:var(--blue); }
.cattree li.lv1 .cnt, .cattree li.lv2 .cnt, .cattree li.lv3 .cnt{ font-weight:400 !important; }
.cattree li.lv0 .catnm, .cattree li.toplist .catnm{ font-weight:700 !important; }

/* —— 需求2：当前分类高亮凸显 —— */
.cattree a.on,
.cattree summary > a.on{
  color:#fff !important; font-weight:700;
  background:var(--blue); border-radius:6px;
  box-shadow:0 2px 6px rgba(9,45,73,.18);
}
.cattree a.on .cnt, .cattree summary > a.on .cnt{ color:rgba(255,255,255,.85) !important; }
.cattree li.toplist > a .cnt, .cattree li.toplist > details > summary > a .cnt{ font-weight:600; }
.cattree a.on:hover, .cattree summary > a.on:hover{ background:var(--blue-d); color:#fff !important; }
/* 当前分类所在的一级分支：轻微底色，方便眼睛定位 */
.cattree details.open > summary > a{ background:#eef5fa; color:var(--blue-d); }

/* —— 需求5：分类小图标 —— */
.cattree .caticon{
  width:18px; height:18px; flex:0 0 18px; object-fit:cover;
  border-radius:4px; border:1px solid rgba(11,43,60,.10); background:#fff;
}
.cattree a.on .caticon{ border-color:rgba(255,255,255,.6); }

/* —— 空分类提示（需求1）—— */
.emptybox{
  padding:38px 20px; text-align:center; color:#7d94a3;
  background:#fafcfd; border:1px dashed #dbe5eb; border-radius:10px;
}
.emptybox p{ margin:0 0 14px; font-size:14px; }

/* ============================================================
   会员收藏夹（需求6）
   ============================================================ */
.fm h1{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.fm h1 .favcnt{ font-size:13px; color:#7d94a3; font-weight:400; }
/* ★★ 2026-10-06 客户要求：「这块区域帮我锁定表头」——
   红框里是「按分类筛选」+「全选/已选N/加入所选/查看购物车」两块，列表长时滚下去
   就看不见 → 点不到加购、切不了分类。合成一个吸顶容器。
   · top:0 而不是 top:78px —— 顶栏（.hd + .navbar）本来就不是 sticky，滚上去就没了，
     吸顶块必须贴视口顶，否则会留一条空白缝。
   · 实测过main.wrap 的 overflow-x:clip **不会**破坏 sticky（clip 不创建滚动容器，
     只有 hidden/auto/scroll 会），所以不用改那个全局裁剪规则。
   · 必须不透明背景 + z-index，否则下层卡片会透上来叠字。*/
.favhead{
  position:sticky; top:0; z-index:8;
  background:#fff;
  padding:2px 0 6px;
  box-shadow:0 6px 14px -10px rgba(9,45,73,.35);
}
.favhead .favcats{ margin:0 0 6px; }
.favhead .favbar{ margin:0; }
/* 移动端吸顶会占掉太多屏，窄屏就不吸了 */
@media(max-width:680px){
  .favhead{ position:static; box-shadow:none; }
}
.favcats{ margin:0 0 14px; font-size:13px; color:#5a7183; }
.favchip{
  display:inline-block; margin:3px 4px 0 0; padding:3px 10px; border-radius:999px;
  background:#eef3f6; color:#2a5d7d; text-decoration:none; font-size:12.5px;
}
.favchip:hover{ background:#dcecf8; }
.favchip.on{ background:var(--blue); color:#fff; }
/* ── 工具条：2026-10-06 客户要求「红框那一大块去掉」。
      改成：全选本页 + 已选数 + 加入所选 + 查看购物车，压成**一行**、行高 30px。── */
.favbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:5px 10px; margin:0 0 10px;
  background:#fff; border:1px solid #e2ebf0; border-radius:8px;
}
.favbar .favbar-l{ display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; }
.favbar .favbar-r{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; }
/* ★ 必写：全局 `.fm .btn{width:100%;padding:10px;margin-top:18px}`（表单页整宽按钮）会把本工具条里
   的按钮撑成 100% 宽 + 18px 上边距 → 工具条被撑到 64~76px 高、按钮各占一行。
   客户 2026-10-06 明确要求「行高不用太高」，这里把宽度/边距/间距全部复位。 */
/* ★ 必写：收藏夹页是 .fm 容器，而全局有两条针对「表单页」的规则会污染这里：
     ① `.fm label{display:block;margin:12px 0 4px}`  → 全选复选框的 label 吃到 12px 上边距，工具条被撑高
     ② `.fm input[type=text]{width:100%;padding:9px 11px}` → 数量框被拉成整行宽
     ③ `.fm .btn{width:100%;padding:10px;margin-top:18px}`     → 按钮各占一行
     客户 2026-10-06 明确要求「行高不用太高」，在收藏夹作用域内全部复位。 */
.favbar .favallck{ display:inline-flex; align-items:center; gap:5px; margin:0;
  font-size:13px; color:#26414f; cursor:pointer; user-select:none; }
.favbar .favallck input{ width:15px; height:15px; cursor:pointer; }
.favbar .mut{ color:#7d94a3; font-size:12.5px; }
.favbar .btn{ width:auto; padding:4px 12px; margin:0; font-size:12.5px; line-height:1.6; }
.favsec{ margin:0 0 14px; }
.favsec-t{
  font-size:16px; color:#0b2b3c; margin:14px 0 8px;
  display:flex; align-items:baseline; gap:6px;
  padding-bottom:6px; border-bottom:2px solid #e6eef3;
}
.favsec-t em{ font-style:normal; font-size:12px; color:#9bb0bd; font-weight:400; }
.favsub{ margin:0 0 6px; }
.favsub h3{
  font-size:13px; color:#5b7784; font-weight:600; margin:8px 0 5px;
  display:flex; align-items:baseline; gap:5px;
}
.favsub h3 em{ font-style:normal; font-size:11.5px; color:#9bb0bd; font-weight:400; }
.favsub.plain{ margin-top:0; }
/* 收藏夹：一个产品一行（客户反馈原来 4 列方块「排序乱、占地方、复选框压图上看不清」） */
.favgrid{ display:flex; flex-direction:column; gap:5px; }
.favcard{
  display:flex; align-items:center; gap:10px; padding:6px 10px; min-height:52px;
  background:#fff; border:1px solid #e6edf1; border-radius:8px;
}
.favcard:hover{ border-color:#bcd6e6; box-shadow:0 3px 12px rgba(9,45,73,.07); }
.favcard.off{ opacity:.62; background:#f7f9fa; }
/* 复选框单独一列，不再压在图片上。
   ★ 必须带 .fm 前缀：全局 `.fm label{display:block;margin:12px 0 4px}` 特异性 (0,2,1)，
   只写 `.favck` (0,1,0) 会被它赢过去 → 复选框在卡片里下沉。 */
.fm .favck{ flex:0 0 auto; display:flex; align-items:center; margin:0; }
.favck input{ width:16px; height:16px; cursor:pointer; }
.favthumb{ flex:0 0 44px; width:44px; height:44px; border-radius:6px; overflow:hidden;
  background:#f2f6f8; display:flex; align-items:center; justify-content:center; }
.favthumb img{ width:100%; height:100%; object-fit:cover; }
.favthumb .nopic{ font-size:11px; color:#9bb0bd; }
/* ★ 信息列不再无限撑开：给了 max-width，右侧就不会留一大片空白（客户 2026-10-06 反馈） */
.favinfo{ flex:1 1 auto; min-width:0; max-width:560px; display:flex; flex-direction:column; gap:2px; }
.favname{
  display:block; font-size:13.5px; color:var(--ink); line-height:1.35; text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.favname:hover{ color:var(--blue); }
.favmeta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; line-height:1.4; }
.favmodel{ font-size:12px; color:#9bb0bd; }
.favprice{ font-size:14px; color:#e2680f; font-weight:700; }
.favprice em{ font-style:normal; font-size:11px; font-weight:400; }
/* 下单频次徽标：让客户一眼看出「为什么它排最前面」 */
.favfreq{ font-size:11px; color:#0b6b3a; background:#e6f6ec; border-radius:3px; padding:1px 6px; }
.favtag{ display:inline-block; font-size:11px; padding:1px 6px; border-radius:3px; }
.favtag.warn{ background:#fdf0e6; color:#c0600f; }
/* ★ 同上：全局 `.fm select{padding:9px 11px}` 特异性 (0,2,1)，只写 `.favsku` (0,1,0) 会被赢过去
   → 规格下拉变 41px 高、字号 14px。补 .fm 前缀凑到 (0,2,1) 仍相同权重但后写胜出。 */
.fm .favsku{ font-size:12.5px; padding:3px 6px; border:1px solid #dde6eb; border-radius:5px; max-width:220px; }
.favsku1{ font-size:12px; color:#7d94a3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
/* ★ 每行自带「数量 + 加购」（红框大工具条删掉后，逐条加购） */
.favadd{ flex:0 0 auto; display:flex; align-items:center; gap:5px; }
/* ★ 同上：全局 `.fm input[type=text]{width:100%;padding:9px 11px}` 与 `.fm select{padding:9px 11px}`
   特异性都是 (0,2,1)，只写 `.favadd .favqty` / `.favsku` (0,2,0) 会输给它 → 数量框被拉成整行宽、
   规格下拉变成 41px 高。必须补 .fm 前缀凑到 (0,3,1) 才赢。 */
.fm .favadd .favqty{ width:42px; padding:4px 6px; border:1px solid #d3dee5; border-radius:5px;
  text-align:center; font-size:12px; }
/* 同上：抵消全局 `.fm .btn` 的 width:100% / margin-top，否则每行按钮独占一行 */
.fm .favadd .btn, .fm .favops .btn{ width:auto; margin:0; padding:3px 10px; font-size:12px; line-height:1.5; white-space:nowrap; }
.favadd .favaddbtn{ white-space:nowrap; }
/* 操作列：靠右不换行。★ .nowrap 强制「取消收藏」4 个字一行，
   原来按钮被挤成竖排 4 行（客户 2026-10-06 截图指正）。 */
.favops{ flex:0 0 auto; display:flex; gap:6px; align-items:center; margin-left:auto; }
.favops form{ display:inline; }
.nowrap{ white-space:nowrap; }
@media(max-width:680px){
  .favcard{ flex-wrap:wrap; }
  .favinfo{ flex-basis:100%; order:3; max-width:none; }
  .favops{ order:4; margin-left:0; }
}
.favfoot{ margin-top:20px; padding-top:14px; border-top:1px solid #eef2f4;
  display:flex; align-items:center; gap:12px; font-size:13px; }
.favfoot form{ display:inline; }
/* 同上：抵消 `.fm .btn{margin-top:18px}`，否则页脚「清空收藏夹」会跟页脚线拉开一大段 */
.fm .favfoot .btn{ width:auto; margin:0; }

/* 下单成功后回收藏夹继续选品 */
.orderback{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 14px; margin:0 0 16px;
  background:#eef7f2; border:1px solid #cfe8da; border-radius:8px;
}
.orderback .mut{ color:#5c7a68; font-size:12.5px; }

/* 详情页收藏按钮 —— 必须够醒目：橙色描边 + 明确文案，跟「加入购物车」同一排。
   客户扫一眼购买区就能看到，不用找。 */
.favbtn{
  display:inline-flex; align-items:center; gap:6px;
  padding:0 18px; height:42px; line-height:40px;
  font-size:15px; font-weight:700;
  background:#fff; color:#e2680f; border:2px solid #f0a500; border-radius:6px;
  cursor:pointer; transition:background .15s,color .15s;
}
.favbtn:hover{ background:#fff8ec; }
.favbtn .favico{ font-size:17px; color:#f0a500; }
.favbtn.on{ background:#fff4e0; border-color:#f0a500; color:#b4700d; }
.favbtn.on .favico{ color:#f0a500; }
.favbtn.busy{ opacity:.6; cursor:wait; }
/* 按钮下方的文字说明：告诉客户收藏到底能干什么 */
.favtip{
  margin:9px 0 0; padding:0; font-size:12.5px; line-height:1.6; color:#7d94a3;
}
.favtip b{ color:#e2680f; }

/* 顶栏收藏夹件数徽标 */
.favbadge{
  display:none; font-style:normal; font-size:10.5px; line-height:1;
  min-width:15px; height:15px; padding:0 4px; margin-left:4px;
  background:#e2680f; color:#fff; border-radius:999px;
  text-align:center; vertical-align:middle;
}

/* 轻提示（收藏/加购反馈） */
.kdtip{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(8px);
  max-width:82vw; padding:9px 18px; border-radius:999px;
  background:rgba(11,43,60,.93); color:#fff; font-size:13px;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  z-index:9999;
}
.kdtip.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* —— 顶栏分类下拉：图标 + 名称 + 数量同行（需求3/5）—— */
.navdrop li a{ display:flex; align-items:center; gap:5px; white-space:nowrap; }
.navdrop .ndnm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.navdrop .ndcnt{ font-style:normal; font-size:11px; color:#9bb0bd; flex:0 0 auto; }
.navdrop .ndicon{
  width:16px; height:16px; flex:0 0 16px; object-fit:cover;
  border-radius:3px; border:1px solid rgba(11,43,60,.10); background:#fff;
}
.navdrop li.hassub > a{ font-weight:600; }

/* —— 顶栏分类下拉：图标 + 名称 + 数量同行（需求3/5）—— */
.navdrop li a{ display:flex; align-items:center; gap:5px; white-space:nowrap; }
.navdrop .ndnm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.navdrop .ndcnt{ font-style:normal; font-size:11px; color:#9bb0bd; flex:0 0 auto; }
.navdrop .ndicon{
  width:16px; height:16px; flex:0 0 16px; object-fit:cover;
  border-radius:3px; border:1px solid rgba(11,43,60,.10); background:#fff;
}
.navdrop li.hassub > a{ font-weight:600; }