/* ============================================================
   源码商城站 · 样式表（对齐 qitheme.com 的 b2 主题风格）
   👉 这个文件要上传到网站根目录的 /assets/ 下面
      也就是：你的网站/assets/style.css
   👉 想换主色调，只改下面「配色变量」那几行，全站跟着变
   ============================================================ */

/* ===== 配色变量（👉 改这里就能全站换色） ===== */
:root{
  --brand:#0066FF;        /* 主色：纯蓝（跟参考站同一个蓝） */
  --brand-d:#0052CC;      /* 主色深一点，鼠标移上去用 */
  --brand-l:#4D94FF;      /* 主色浅一点，渐变另一端 */
  --brand-bg:rgba(0,102,255,.08);
  --acc:#FF6A00;          /* 价格用橙色 */
  --acc-l:#FFA03D;
  --vip:#FF9500;          /* 开通 VIP 按钮 */
  --bg:#F5F6F7;           /* 整站底色：浅灰 */
  --card:#FFFFFF;         /* 卡片底色：白 */
  --txt:#1F2329;          /* 正文 */
  --sub:#8A919F;          /* 次要说明 */
  --line:#EEF0F4;         /* 分隔线 */
  --ink:#1F2329;          /* 标题/深色底 */
  --ok:#00A88A;
  --r:12px;               /* 统一圆角 */
  --sh:0 1px 3px rgba(31,35,41,.06), 0 4px 12px rgba(31,35,41,.04);
  --sh-h:0 2px 6px rgba(31,35,41,.08), 0 12px 28px rgba(31,35,41,.10);
}

/* ===== 基础设定 ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  color:var(--txt); background:var(--bg); line-height:1.7; font-size:15px;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; transition:color .2s; }
img { max-width:100%; display:block; }
ul { list-style:none; }
.wrap { max-width:1490px; margin:0 auto; padding:0 20px; }

/* 通用按钮 */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--brand); color:#fff; padding:10px 20px; border-radius:8px;
  font-size:14px; font-weight:500; border:none; cursor:pointer; transition:.2s;
}
.btn:hover { background:var(--brand-d); }
.btn.line { background:#fff; color:var(--brand); border:1px solid #D6E4FF; }
.btn.line:hover { background:var(--brand-bg); }
.btn.org { background:var(--acc); }
.btn.org:hover { background:#E85D00; }
.btn.vip { background:linear-gradient(135deg,#FF9500,#FFB340); color:#fff; font-weight:600; }
.btn.vip:hover { filter:brightness(1.06); }
.btn.big { padding:14px 32px; font-size:16px; border-radius:10px; }

/* ===== 顶部导航（白底 + logo 左 + 菜单 + 右侧按钮组） ===== */
.nav {
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:60; margin-bottom:18px;
  transition:box-shadow .25s;
}
.nav.shadow { box-shadow:0 4px 18px rgba(31,35,41,.08); }
.nav .wrap { display:flex; align-items:center; gap:24px; height:64px; }
.logo { display:flex; align-items:center; gap:9px; font-size:19px; font-weight:800; color:var(--ink); white-space:nowrap; letter-spacing:-.3px; }
.logo img { height:34px; width:auto; }
.logo i {
  width:34px; height:34px; border-radius:9px; font-style:normal;
  background:linear-gradient(135deg,var(--brand),var(--brand-l)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800;
}
.menu { display:flex; align-items:center; gap:2px; flex:1; }
.menu a {
  padding:8px 14px; font-size:15px; color:#3B4250; white-space:nowrap;
  position:relative; border-radius:6px;
}
/* 👉 菜单下面那条蓝色小横杠：鼠标移上去出现，当前页常驻（跟参考站一样） */
.menu a:after {
  content:""; position:absolute; left:50%; bottom:-2px; transform:translateX(-50%) scaleX(0);
  width:18px; height:3px; border-radius:2px; background:var(--brand);
  transition:transform .22s;
}
.menu a:hover { color:var(--brand); }
.menu a:hover:after { transform:translateX(-50%) scaleX(1); }
.menu a.on { color:var(--brand); font-weight:600; }
.menu a.on:after { transform:translateX(-50%) scaleX(1); }
.nav .act { display:flex; gap:9px; align-items:center; white-space:nowrap; }
.nav .act .btn { padding:8px 15px; }
.nav .act a.lnk { font-size:14px; color:#6B7280; }
.nav .act a.lnk:hover { color:var(--brand); }

/* 购物车里的数字 */
.cartnum {
  display:inline-block; min-width:18px; height:18px; line-height:18px; padding:0 5px;
  background:rgba(255,255,255,.28); border-radius:9px; font-size:11px; font-weight:700; margin-left:3px;
}

/* ===== 首屏轮播 ===== */
.slider {
  position:relative; background:var(--card); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--sh); margin-bottom:18px;
}
/* 3.5 : 1 的宽幅比例（跟参考站同一个比例） */
.slider .box { position:relative; padding-top:28.571429%; overflow:hidden; }
.slider .track { position:absolute; inset:0; display:flex; transition:transform .5s ease; }
.slider .track a { flex:0 0 100%; position:relative; display:block; }
.slider .track img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
/* 没配图时的占位渐变（带一句标语，不会开天窗） */
.slider .ph-slide {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; color:#fff; padding:30px;
  background:linear-gradient(120deg,#0044CC 0%,var(--brand) 45%,#6FA8FF 100%);
}
.slider .ph-slide.s2 { background:linear-gradient(120deg,#1F2329 0%,#4A5568 60%,#718096 100%); }
.slider .ph-slide.s3 { background:linear-gradient(120deg,#FF6A00 0%,#FF9500 55%,#FFB84D 100%); }
.slider .ph-slide b { font-size:30px; font-weight:800; letter-spacing:-.5px; margin-bottom:8px; }
.slider .ph-slide span { font-size:15px; opacity:.92; }
/* 图上压的那句标题 */
.slider .cap {
  position:absolute; left:0; right:0; bottom:0; padding:26px 30px; z-index:2;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  color:#fff; font-size:19px; font-weight:700; letter-spacing:-.3px;
}
/* 左右箭头 */
.slider .arw {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,.3); color:#fff; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:.25s;
}
.slider:hover .arw { opacity:1; }
.slider .arw.l { left:14px; } .slider .arw.r { right:14px; }
.slider .arw:hover { background:rgba(0,0,0,.5); }
/* 底下小圆点 */
.slider .dots { position:absolute; right:18px; bottom:16px; z-index:3; display:flex; gap:7px; }
.slider .dots i {
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.55);
  cursor:pointer; transition:.25s;
}
.slider .dots i.on { background:#fff; width:22px; border-radius:4px; }

/* ===== 首屏下方：一排分类快捷标签 ===== */
.quick {
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background:var(--card); border-radius:var(--r); padding:14px 18px;
  box-shadow:var(--sh); margin-bottom:22px;
}
.quick b { font-size:14px; color:var(--sub); font-weight:400; margin-right:2px; }
.quick a {
  padding:6px 15px; border-radius:20px; background:var(--bg); font-size:14px; color:#4B5563; transition:.2s;
}
.quick a:hover { background:var(--brand); color:#fff; }
.quick a.on { background:var(--brand-bg); color:var(--brand); font-weight:600; }

/* ===== 通用板块 ===== */
.sec { margin-bottom:22px; }
.sec-box { background:var(--card); border-radius:var(--r); padding:24px; box-shadow:var(--sh); }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px; gap:14px; }
.sec-head h2 {
  font-size:21px; font-weight:800; color:var(--ink); letter-spacing:-.4px;
  display:flex; align-items:center; gap:9px;
}
/* 标题左边那条蓝色竖杠 */
.sec-head h2:before { content:""; width:4px; height:19px; border-radius:3px; background:var(--brand); }
.sec-head .sub { font-size:14px; color:var(--sub); flex:1; }
.sec-head a.more { font-size:14px; color:var(--sub); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.sec-head a.more:hover { color:var(--brand); }
.more { text-align:center; margin-top:26px; }
.more a {
  display:inline-flex; align-items:center; gap:6px; background:var(--card);
  border:1px solid var(--line); padding:10px 30px; border-radius:8px;
  color:var(--brand); font-weight:500; transition:.2s;
}
.more a:hover { border-color:var(--brand); background:var(--brand); color:#fff; }

/* ===== 商品卡片（参考站那种：图 + 价格 + 标题 + 简介 + 浏览量） ===== */
.goods { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.g {
  background:var(--card); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--sh); transition:.25s;
}
.g:hover { box-shadow:var(--sh-h); transform:translateY(-4px); }
.g .pic { position:relative; padding-top:80%; overflow:hidden; background:#E9EDF3; }
.g .pic img, .g .pic .ph { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.g .pic img { transition:transform .45s ease; }
.g:hover .pic img { transform:scale(1.06); }
.ph {
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; font-weight:600; letter-spacing:1px;
  background:linear-gradient(135deg,var(--brand),var(--brand-l));
}
.ph.g2 { background:linear-gradient(135deg,#7C5CFF,#A98CFF); }
.ph.g3 { background:linear-gradient(135deg,#00A88A,#3FD3B6); }
.ph.g4 { background:linear-gradient(135deg,#FF6A00,#FFA14D); }
.ph.g5 { background:linear-gradient(135deg,#E8407A,#FF8AB0); }
.ph.g6 { background:linear-gradient(135deg,#0D9DE0,#6FD0F5); }
.ph.g7 { background:linear-gradient(135deg,#5A6478,#98A3B8); }
.ph.g8 { background:linear-gradient(135deg,#1F2329,#4A5568); }
/* 左上角角标（热卖/新品） */
.g .tag {
  position:absolute; left:10px; top:10px; z-index:2;
  background:var(--acc); color:#fff; font-size:12px; font-weight:600;
  padding:3px 9px; border-radius:5px;
}
/* 右上角身份标（自营商品） */
.g .own {
  position:absolute; right:10px; top:10px; z-index:2;
  background:rgba(0,102,255,.92); color:#fff; font-size:12px;
  padding:3px 9px; border-radius:5px;
}
.g .body { padding:14px 15px 15px; flex:1; display:flex; flex-direction:column; }
.g .price { color:var(--acc); font-size:21px; font-weight:800; letter-spacing:-.5px; line-height:1.2; }
.g .price small { font-size:13px; font-weight:400; color:var(--sub); margin-left:2px; }
.g .body h3 {
  font-size:15px; font-weight:700; margin:8px 0 7px; line-height:1.5; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:45px;
}
.g .body h3 a:hover { color:var(--brand); }
.g .body .sell {
  font-size:13px; color:var(--sub); margin-bottom:12px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:42px;
}
/* 底部：浏览量 + 查看详情 */
.g .body .foot {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:auto; padding-top:11px; border-top:1px solid var(--line);
}
.g .hits { font-size:13px; color:var(--sub); }
.g .body .foot a { font-size:13px; color:var(--brand); font-weight:500; }
.g .body .foot a:hover { text-decoration:underline; }

/* ===== 插件服务小卡 ===== */
.plugs { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.p {
  background:var(--card); border-radius:var(--r); padding:18px 16px;
  text-align:center; box-shadow:var(--sh); transition:.25s;
}
.p:hover { box-shadow:var(--sh-h); transform:translateY(-4px); }
.p h4 { font-size:15px; margin-bottom:8px; color:var(--ink); font-weight:700; }
.p .p2 { color:var(--acc); font-size:20px; font-weight:800; margin-bottom:10px; letter-spacing:-.4px; }
.p a { font-size:13px; color:var(--brand); font-weight:500; }

/* ===== 网址导航 / 客户案例（参考站那种小卡） ===== */
.links { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.lk {
  background:var(--card); border-radius:var(--r); padding:16px; display:flex; gap:12px;
  align-items:flex-start; box-shadow:var(--sh); transition:.25s;
}
.lk:hover { box-shadow:var(--sh-h); transform:translateY(-3px); }
.lk .ico {
  flex:0 0 40px; height:40px; border-radius:10px; color:#fff; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-l));
}
.lk .ico.k2 { background:linear-gradient(135deg,#7C5CFF,#A98CFF); }
.lk .ico.k3 { background:linear-gradient(135deg,#00A88A,#3FD3B6); }
.lk .ico.k4 { background:linear-gradient(135deg,#FF6A00,#FFA14D); }
.lk .ico.k5 { background:linear-gradient(135deg,#E8407A,#FF8AB0); }
.lk h4 { font-size:15px; color:var(--ink); font-weight:700; margin-bottom:4px; }
.lk p { font-size:13px; color:var(--sub); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ===== 文档教程：一行一条的列表 ===== */
.dlist { display:grid; grid-template-columns:repeat(2,1fr); gap:0 26px; }
.dlist li { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:13px 0; border-bottom:1px dashed #F0F2F5; }
.dlist li a {
  font-size:15px; color:#3B4250; flex:1;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.dlist li a:hover { color:var(--brand); }
.dlist li time { font-size:13px; color:var(--sub); white-space:nowrap; }

/* ===== 服务保障 / 信任点 ===== */
.trust { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.t { background:var(--bg); border-radius:var(--r); padding:22px 20px; transition:.25s; }
.t:hover { background:var(--brand-bg); }
.t h4 { font-size:16px; margin-bottom:8px; color:var(--ink); font-weight:700;
  display:flex; align-items:center; gap:8px; }
.t h4:before { content:""; width:7px; height:7px; border-radius:50%; background:var(--brand); }
.t p { font-size:14px; color:var(--sub); line-height:1.75; }
.t .ok { color:var(--ok); font-weight:700; }

/* ===== 正版查询框 ===== */
.check {
  background:linear-gradient(120deg,#0044CC 0%,var(--brand) 55%,#5C9BFF 100%);
  border-radius:var(--r); padding:34px; color:#fff; text-align:center;
  position:relative; overflow:hidden; box-shadow:0 12px 30px rgba(0,102,255,.22);
}
.check:before {
  content:""; position:absolute; width:300px; height:300px; right:-80px; top:-110px;
  background:radial-gradient(circle,rgba(255,255,255,.15),transparent 70%);
}
.check h2 { font-size:24px; margin-bottom:8px; position:relative; font-weight:800; letter-spacing:-.4px; }
.check p { color:#CFE0FF; margin-bottom:22px; font-size:14.5px; position:relative; }
.check .box { display:flex; gap:10px; max-width:560px; margin:0 auto; position:relative; }
.check input {
  flex:1; height:46px; border:none; border-radius:8px; padding:0 16px;
  font-size:15px; outline:none; color:var(--txt);
}
.check button {
  height:46px; padding:0 28px; border:none; border-radius:8px; cursor:pointer;
  background:var(--acc); color:#fff; font-size:15px; font-weight:700; transition:.2s;
}
.check button:hover { background:#E85D00; }
.check .tip { font-size:13px; color:#B4CFFF; margin-top:14px; position:relative; }

/* ===== 底部 ===== */
.foot { background:var(--card); border-top:1px solid var(--line); padding:34px 0 24px; color:var(--sub); font-size:14px; margin-top:12px; }
.foot .cols { display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:30px; padding-bottom:26px; }
.foot h4 { color:var(--ink); font-size:15px; margin-bottom:13px; font-weight:700; }
.foot li { padding:5px 0; }
.foot li a:hover { color:var(--brand); }
.foot .about p { margin-bottom:12px; line-height:1.8; }
.foot .about .tel { color:var(--acc); font-size:22px; font-weight:800; letter-spacing:-.3px; }
.foot .flinks { border-top:1px solid var(--line); padding:16px 0; font-size:13.5px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.foot .flinks a { color:var(--sub); }
.foot .flinks a:hover { color:var(--brand); }
.foot .copy { border-top:1px solid var(--line); padding:18px 0 0; text-align:center; font-size:13px; color:#A8AEB9; }

/* ===== 内页：列表页顶头 ===== */
.page-top { background:var(--card); border-bottom:1px solid var(--line); padding:30px 0; margin-bottom:22px; }
.page-top h1 { font-size:26px; font-weight:800; margin-bottom:6px; color:var(--ink); letter-spacing:-.4px; }
.page-top .crumb { font-size:13.5px; color:var(--sub); }
.page-top .crumb a:hover { color:var(--brand); }
.list-wrap { padding:0 0 40px; }
.list-goods { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:34px; }
.pages { text-align:center; }
.pages a, .pages b {
  display:inline-block; min-width:38px; height:38px; line-height:36px; padding:0 13px;
  border:1px solid var(--line); border-radius:8px; margin:0 4px; color:#4B5563; background:var(--card); font-weight:500;
}
.pages b { background:var(--brand); color:#fff; border-color:var(--brand); }
.pages a:hover { border-color:var(--brand); color:var(--brand); }

/* ===== 内页：内容页 ===== */
.detail { padding:0 0 40px; display:grid; grid-template-columns:1fr 320px; gap:22px; align-items:start; }
.detail .main { background:var(--card); border-radius:var(--r); padding:30px; box-shadow:var(--sh); }
.detail .main h1 { font-size:26px; line-height:1.45; margin-bottom:12px; color:var(--ink); font-weight:800; letter-spacing:-.4px; }
.detail .meta { font-size:13px; color:var(--sub); padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.detail .content { font-size:15.5px; line-height:1.95; color:#3B4250; }
.detail .content p { margin-bottom:15px; }
.detail .content img { border-radius:10px; margin:16px 0; }
.detail .content h3 { font-size:20px; margin:26px 0 14px; color:var(--ink); font-weight:700; }
.side { background:var(--card); border-radius:var(--r); padding:24px; position:sticky; top:86px; box-shadow:var(--sh); }
.side .pr { font-size:34px; color:var(--acc); font-weight:800; margin-bottom:6px; letter-spacing:-1px; }
.side .pr small { font-size:15px; color:var(--sub); font-weight:400; }
.side .row { display:flex; justify-content:space-between; font-size:14px; padding:10px 0; border-bottom:1px dashed var(--line); }
.side .row span { color:var(--sub); }
.side .btns { margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.side .btns .btn { width:100%; }
.side .wx { text-align:center; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); font-size:13px; color:var(--sub); }

/* ===== 列表页分类筛选条 ===== */
.filter { display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:24px; }
.filter b { font-size:14px; color:var(--sub); font-weight:400; }
.filter a {
  padding:7px 16px; border-radius:20px; border:1px solid var(--line);
  font-size:14px; color:#4B5563; background:var(--card); transition:.2s;
}
.filter a.on, .filter a:hover { background:var(--brand); color:#fff; border-color:var(--brand); }

/* ===== 文章列表 ===== */
.alist { background:var(--card); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh); margin-bottom:24px; }
.alist li { display:flex; gap:20px; padding:18px 22px; border-bottom:1px solid var(--line); transition:.2s; }
.alist li:last-child { border-bottom:none; }
.alist li:hover { background:#FAFBFC; }
.alist li .thumb { flex:0 0 200px; height:120px; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,var(--brand),var(--brand-l)); }
.alist li .thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.alist li:hover .thumb img { transform:scale(1.06); }
.alist li .txt { flex:1; }
.alist li h3 { font-size:18px; margin-bottom:6px; color:var(--ink); font-weight:700; }
.alist li p { font-size:14px; color:var(--sub); margin-bottom:10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.alist li .info { font-size:13px; color:#A8AEB9; }

/* ===== 单页 ===== */
.single { background:var(--card); border-radius:var(--r); padding:36px; box-shadow:var(--sh); }
.single h1 { font-size:26px; margin-bottom:8px; color:var(--ink); font-weight:800; }
.single .meta { font-size:13px; color:var(--sub); padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.single .content { font-size:15.5px; line-height:1.95; color:#3B4250; }
.single .content h3 { font-size:20px; margin:26px 0 12px; color:var(--ink); font-weight:700; }
.single .content p { margin-bottom:15px; }
.single .content ul { margin-bottom:15px; }
.single .content li { padding-left:20px; position:relative; margin-bottom:8px; }
.single .content li:before { content:"·"; position:absolute; left:7px; color:var(--brand); font-weight:800; }
.prevnext { display:flex; justify-content:space-between; gap:16px; margin-top:26px; padding-top:18px; border-top:1px solid var(--line); font-size:14px; }
.prevnext a { color:var(--brand); }
.prevnext span { color:#A8AEB9; }
.contact-card { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
.contact-card .c { border:1px solid var(--line); border-radius:10px; padding:22px; text-align:center; background:var(--bg); }
.contact-card .c span { display:block; font-size:13px; color:var(--sub); margin-bottom:6px; }
.contact-card .c b { font-size:18px; color:var(--ink); }

/* ===== 加入购物车小按钮 ===== */
.g .gbtn {
  display:block; margin-top:10px; text-align:center;
  border:1px solid #D6E4FF; color:var(--brand); border-radius:7px; padding:6px; font-size:13px; font-weight:500;
}
.g .gbtn:hover { background:var(--brand); color:#fff; }

/* 屏幕下方的小黑提示条 */
.toast {
  position:fixed; left:50%; bottom:44px; transform:translateX(-50%);
  background:rgba(31,35,41,.94); color:#fff; padding:12px 26px;
  border-radius:8px; font-size:14px; z-index:999; box-shadow:0 12px 30px rgba(0,0,0,.24);
}

/* ===== 购物车 ===== */
.cart-tb { background:var(--card); border-radius:var(--r); overflow:hidden; margin-bottom:18px; box-shadow:var(--sh); }
.cart-tb .hd { display:flex; padding:13px 24px; background:#FAFBFC; font-size:13px; color:var(--sub); border-bottom:1px solid var(--line); }
.cart-tb .row { display:flex; align-items:center; gap:14px; padding:18px 24px; border-bottom:1px solid var(--line); }
.cart-tb .row:last-child { border-bottom:none; }
.cart-tb .pic { flex:0 0 92px; height:62px; border-radius:8px; overflow:hidden; }
.cart-tb .name { flex:1; font-size:16px; font-weight:600; color:var(--ink); }
.cart-tb .name small { display:block; font-size:13px; color:var(--sub); font-weight:400; margin-top:3px; }
.cart-tb .price { flex:0 0 110px; color:var(--acc); font-weight:700; font-size:17px; }
.cart-tb .qty { flex:0 0 118px; display:flex; align-items:center; }
.cart-tb .qty button { width:30px; height:30px; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:16px; color:#4B5563; line-height:1; }
.cart-tb .qty button:hover { background:var(--brand-bg); color:var(--brand); }
.cart-tb .qty input { width:48px; height:30px; border:1px solid var(--line); border-left:none; border-right:none; text-align:center; font-size:14px; outline:none; color:var(--txt); }
.cart-tb .sub { flex:0 0 110px; text-align:right; font-weight:700; }
.cart-tb .del { flex:0 0 46px; text-align:right; color:#B8BEC9; cursor:pointer; font-size:13px; }
.cart-tb .del:hover { color:#E8407A; }
.cart-bar { display:flex; justify-content:space-between; align-items:center; background:var(--card); border-radius:var(--r); padding:20px 24px; flex-wrap:wrap; gap:14px; box-shadow:var(--sh); }
.cart-bar .total span { font-size:14px; color:var(--sub); }
.cart-bar .total b { color:var(--acc); font-size:28px; margin-left:8px; font-weight:800; letter-spacing:-.8px; }
.cart-empty { text-align:center; padding:70px 20px; background:var(--card); border-radius:var(--r); box-shadow:var(--sh); }
.cart-empty h3 { font-size:19px; margin-bottom:8px; }
.cart-empty p { color:var(--sub); margin-bottom:22px; font-size:14px; }

/* ===== 表单 ===== */
.form .fi { margin-bottom:18px; }
.form label { display:block; font-size:14px; color:#4B5563; margin-bottom:7px; }
.form label em { color:var(--acc); font-style:normal; margin-right:3px; }
.form input[type=text], .form input[type=tel], .form input[type=password], .form textarea {
  width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:8px; padding:11px 14px;
  font-size:15px; outline:none; font-family:inherit; color:var(--txt); background:#fff; transition:.2s;
}
.form input:focus, .form textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,102,255,.1); }
.form .tip { color:#A8AEB9; font-size:12.5px; margin-top:6px; }
.form textarea { height:88px; resize:vertical; }
.pay { display:flex; flex-direction:column; gap:10px; }
.pay label { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:8px; padding:12px 14px; cursor:pointer; margin:0; font-size:15px; transition:.2s; }
.pay label.on { border-color:var(--brand); background:var(--brand-bg); }
.pay input { width:16px; height:16px; accent-color:var(--brand); }
.pay small { color:var(--sub); font-size:13px; margin-left:auto; }

/* ===== 订单摘要 ===== */
.sum { background:var(--card); border-radius:var(--r); padding:24px; position:sticky; top:86px; box-shadow:var(--sh); }
.sum h4 { font-size:17px; margin-bottom:12px; color:var(--ink); font-weight:700; }
.sum li { display:flex; justify-content:space-between; font-size:14px; padding:9px 0; border-bottom:1px dashed var(--line); color:#4B5563; }
.sum li b { color:var(--txt); }
.sum .tt { display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; }
.sum .tt b { color:var(--acc); font-size:26px; font-weight:800; letter-spacing:-.7px; }
.sum .btn { width:100%; margin-top:16px; }
.sum .note { font-size:12.5px; color:var(--sub); margin-top:12px; line-height:1.75; }

/* ===== 下单成功 ===== */
.done { text-align:center; background:var(--card); border-radius:var(--r); padding:58px 30px; box-shadow:var(--sh); }
.done .ico {
  width:68px; height:68px; border-radius:50%; margin:0 auto 20px;
  background:var(--ok); color:#fff; font-size:32px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.done h2 { font-size:25px; margin-bottom:10px; color:var(--ink); font-weight:800; }
.done p { color:var(--sub); margin-bottom:6px; font-size:15px; }
.done .no { display:inline-block; background:var(--bg); border-radius:8px; padding:12px 22px; margin:20px 0 26px; font-size:15px; color:#4B5563; }
.done .no b { color:var(--acc); letter-spacing:1px; font-size:17px; }
.done .btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ===== 返回顶部按钮 ===== */
.gotop {
  position:fixed; right:22px; bottom:26px; z-index:99;
  width:46px; height:46px; border-radius:50%;
  background:var(--brand); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,102,255,.36);
  opacity:0; visibility:hidden; transform:translateY(14px); transition:.25s;
}
.gotop.show { opacity:1; visibility:visible; transform:translateY(0); }
.gotop:hover { background:var(--brand-d); }
.gotop .arw { width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:9px solid #fff; margin-bottom:3px; }
.gotop:hover .arw { animation:jump .6s ease-in-out infinite; }
@keyframes jump { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* ===== 登录 / 注册 ===== */
.auth { max-width:420px; margin:44px auto 60px; }
.auth-box { background:#fff; border-radius:14px; padding:34px 32px 30px; box-shadow:var(--sh-h); }
.auth-box h1 { font-size:24px; margin:0 0 8px; color:var(--ink); font-weight:800; }
.auth-box .sub { color:var(--sub); font-size:14px; margin-bottom:22px; }
.auth-box .fi { margin-bottom:16px; }
.auth-box .fi label { display:block; margin-bottom:7px; font-size:14px; color:#4B5563; }
.auth-box .fi input { width:100%; box-sizing:border-box; padding:12px 14px; border:1px solid var(--line); border-radius:8px; font-size:15px; outline:none; transition:.2s; }
.auth-box .fi input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,102,255,.1); }
.auth-box .fi .tip { color:var(--sub); font-size:12.5px; margin-top:6px; }
.auth-box .btn.full { width:100%; display:block; text-align:center; border:none; padding:13px; font-size:16px; cursor:pointer; }
.auth-foot { display:flex; justify-content:space-between; margin-top:18px; font-size:14px; color:#6B7280; }

/* ===== 会员中心 ===== */
.mbox { background:var(--card); border-radius:var(--r); margin-bottom:18px; overflow:hidden; box-shadow:var(--sh); }
.mbox h3 { margin:0; padding:16px 22px; border-bottom:1px solid var(--line); font-size:17px; color:var(--ink); font-weight:700; }
.mbox .bd { padding:20px 22px; }
.mmenu { background:var(--card); border-radius:var(--r); padding:10px; box-shadow:var(--sh); }
.mmenu a { display:block; padding:12px 16px; border-radius:8px; color:#3B4250; font-size:15px; transition:.2s; }
.mmenu a:hover { background:var(--bg); color:var(--brand); }
.mmenu a.on { background:var(--brand-bg); color:var(--brand); font-weight:700; }
.mmenu .quit { color:#E0413A; }
.mstat { display:flex; gap:14px; flex-wrap:wrap; }
.mstat .b { flex:1; min-width:120px; background:var(--bg); border-radius:10px; padding:16px; }
.mstat .b b { display:block; font-size:22px; color:var(--brand); font-weight:800; letter-spacing:-.5px; }
.mstat .b span { font-size:13px; color:var(--sub); }
.mtable { width:100%; border-collapse:collapse; font-size:14px; }
.mtable th { text-align:left; padding:11px 12px; background:#FAFBFC; color:#6B7280; font-weight:600; font-size:13px; }
.mtable td { padding:12px 12px; border-top:1px solid var(--line); }
.mtable tr:hover td { background:#FAFBFC; }
.st0 { color:#D48806; }
.st1 { color:var(--ok); }

/* ===== 登录 / 注册 弹窗 ===== */
.mask {
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999;
  display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(31,35,41,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .22s;
}
.mask.show { opacity:1; }
.modal {
  position:relative; width:400px; max-width:100%; max-height:92vh; overflow:auto;
  background:#fff; border-radius:16px; box-shadow:0 24px 60px rgba(31,35,41,.3);
  transform:translateY(16px) scale(.98); transition:.24s cubic-bezier(.2,.8,.3,1);
}
.mask.show .modal { transform:translateY(0) scale(1); }
.modal .close {
  position:absolute; right:14px; top:10px; z-index:2; width:30px; height:30px;
  border-radius:50%; color:#fff; font-size:20px; line-height:28px; text-align:center;
  cursor:pointer; background:rgba(255,255,255,.18); transition:.2s;
}
.modal .close:hover { background:rgba(255,255,255,.34); }
.mhead {
  background:linear-gradient(135deg,#0044CC 0%,var(--brand) 60%,#5C9BFF 100%);
  color:#fff; padding:28px 32px 24px; border-radius:16px 16px 0 0; text-align:center; position:relative; overflow:hidden;
}
.mhead:before { content:""; position:absolute; width:180px; height:180px; left:-50px; top:-80px; background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%); }
.mhead .mlogo {
  width:44px; height:44px; margin:0 auto 12px; border-radius:12px; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.mhead h3 { font-size:19px; font-weight:700; letter-spacing:1px; margin-bottom:6px; position:relative; }
.mhead p { font-size:12.5px; color:#CFE0FF; letter-spacing:.5px; position:relative; }
.mtabs { display:flex; border-bottom:1px solid var(--line); }
.mtabs a { flex:1; text-align:center; padding:15px 0; font-size:15.5px; font-weight:600; color:var(--sub); position:relative; transition:.2s; }
.mtabs a:hover { color:var(--brand); }
.mtabs a.on { color:var(--brand); }
.mtabs a.on:after { content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%); width:52px; height:2.5px; border-radius:2px; background:var(--brand); }
.mbody { padding:26px 32px 30px; }
.authform .err { background:#FFF1F0; border:1px solid #FFA39E; color:#CF1322; padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:16px; line-height:1.6; }
.mf { position:relative; margin-bottom:14px; }
.mf input {
  width:100%; height:46px; padding:0 14px; border:none; border-radius:8px;
  font-size:14.5px; font-family:inherit; color:var(--txt); background:#fff;
  box-shadow:0 0 0 1px var(--line) inset; outline:none; transition:.2s; box-sizing:border-box;
}
.mf input::placeholder { color:#B8BEC9; }
.mf input:focus { box-shadow:0 0 0 1.5px var(--brand) inset,0 0 0 4px rgba(0,102,255,.12); }
.mf.has-ico input { padding-left:42px; }
.mf .mico { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#A8AEB9; display:flex; pointer-events:none; }
.mf:focus-within .mico { color:var(--brand); }
.mbtn {
  width:100%; height:46px; margin-top:8px; border:none; cursor:pointer; font-family:inherit;
  border-radius:8px; font-size:15.5px; font-weight:600; letter-spacing:5px; color:#fff;
  background:var(--brand); box-shadow:0 6px 16px rgba(0,102,255,.3); transition:.22s;
}
.mbtn:hover { background:var(--brand-d); transform:translateY(-1px); }
.mbtn:disabled { opacity:.72; cursor:default; transform:none; box-shadow:none; }
.mfoot { margin-top:16px; text-align:center; font-size:12.5px; color:var(--sub); }
.auth-wrap { min-height:70vh; display:flex; align-items:center; justify-content:center; padding:44px 20px 60px; background:var(--bg); }
.auth-wrap .modal { transform:none; box-shadow:var(--sh-h); }

/* ===== 滚动进场动画（👉 JS 没加载时也不会把内容藏起来） ===== */
.js-rev .reveal { opacity:0; transform:translateY(20px); }
.js-rev .reveal.in { opacity:1; transform:none; transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.3,1); }

/* ===== 手机端 ===== */
/* 屏幕不够宽的时候先降到三列，不然四张卡挤在一起会变得很小 */
@media (max-width:1320px){
  .goods, .list-goods { grid-template-columns:repeat(3,1fr); }
  .coll { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .alist li { flex-direction:column; }
  .alist li .thumb { flex:none; width:100%; }
  .contact-card { grid-template-columns:1fr; }
  .single { padding:24px; }
  .cart-tb .hd { display:none; }
  .cart-tb .row { flex-wrap:wrap; }
  .cart-tb .name { flex:1 1 100%; }
  .sum { position:static; }
  .gotop { right:14px; bottom:16px; width:42px; height:42px; }
  .auth { margin:24px auto 40px; padding:0 16px; }
  .mtable th:nth-child(3), .mtable td:nth-child(3) { display:none; }
  .goods, .list-goods { grid-template-columns:repeat(2,1fr); }
  .plugs { grid-template-columns:repeat(2,1fr); }
  .links { grid-template-columns:repeat(2,1fr); }
  .trust { grid-template-columns:repeat(2,1fr); }
  .dlist { grid-template-columns:1fr; }
  .foot .cols { grid-template-columns:repeat(2,1fr); }
  .detail { grid-template-columns:1fr; }
  .side { position:static; }
  .menu { display:none; }
}
@media (max-width:560px){
  .goods, .list-goods { grid-template-columns:1fr; }
  .slider .ph-slide b { font-size:22px; }
  .slider .cap { font-size:15px; padding:16px 18px; }
  .sec-head h2 { font-size:18px; }
  .check { padding:26px 20px; }
  .check .box { flex-direction:column; }
  .mask { padding:0; align-items:flex-end; }
  .modal { width:100%; border-radius:16px 16px 0 0; max-height:94vh; }
  .mhead { padding:24px 22px 20px; }
  .mbody { padding:22px 22px 26px; }
  .auth-wrap { padding:0; min-height:100vh; align-items:stretch; }
  .auth-wrap .modal { border-radius:0; max-height:none; width:100%; }
}

/* ============================================================
   1:1 对齐版追加样式（分类合集 / 公告 / 售后条）+ 视觉升级
   ============================================================ */
:root{
  --r:8px;                                    /* 圆角跟参考站一样，不要那种很圆的感觉 */
  --sh:0 1px 2px rgba(31,35,41,.05), 0 6px 16px rgba(31,35,41,.05);
  --sh-h:0 4px 10px rgba(31,35,41,.07), 0 18px 40px rgba(31,35,41,.11);
}

/* ===== 顶部公告条 ===== */
.notice{
  display:flex; align-items:center; gap:10px; margin:16px 0 0;
  background:linear-gradient(90deg,#FFF7ED,#FFFCF7);
  border:1px solid #FFE3C2; border-radius:var(--r); padding:12px 16px;
  font-size:14px; color:#8A5A1B;
}
.notice .ntag{
  flex:0 0 auto; background:var(--acc); color:#fff; font-size:12px; font-weight:700;
  padding:3px 9px; border-radius:6px; letter-spacing:.5px;
}
.notice p{ flex:1; line-height:1.6; }
.notice a{ color:#C2410C; font-weight:600; white-space:nowrap; }

/* ===== 分类合集（参考站那种：一张分类封面 + 下面四个小图） ===== */
.coll{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.coll-i{
  background:var(--card); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--sh); transition:.28s cubic-bezier(.2,.7,.3,1);
  display:flex; flex-direction:column;
}
.coll-i:hover{ box-shadow:var(--sh-h); transform:translateY(-5px); }

/* 上半部分：分类封面，用渐变兜底，后台填了图就显示图 */
.coll-top{
  position:relative; padding-top:46%; overflow:hidden;
  background:linear-gradient(135deg,var(--brand),var(--brand-l));
}
.coll-top.c2{ background:linear-gradient(135deg,#7C5CFF,#A98CFF); }
.coll-top.c3{ background:linear-gradient(135deg,#00A88A,#3FD3B6); }
.coll-top.c4{ background:linear-gradient(135deg,#FF6A00,#FFA14D); }
.coll-top.c5{ background:linear-gradient(135deg,#E8407A,#FF8AB0); }
.coll-top.c6{ background:linear-gradient(135deg,#0D9DE0,#6FD0F5); }
.coll-top.c7{ background:linear-gradient(135deg,#5A6478,#98A3B8); }
.coll-top.c8{ background:linear-gradient(135deg,#1F2329,#4A5568); }
.coll-top img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.coll-i:hover .coll-top img{ transform:scale(1.08); }
/* 封面右下角那两个白色小圆，纯装饰，让画面不那么空 */
.coll-top:after{
  content:""; position:absolute; right:-30px; bottom:-46px; width:130px; height:130px;
  border-radius:50%; background:rgba(255,255,255,.14);
}
.coll-top:before{
  content:""; position:absolute; right:34px; top:-34px; width:78px; height:78px;
  border-radius:50%; background:rgba(255,255,255,.10); z-index:2;
}
.coll-txt{ position:absolute; left:20px; bottom:16px; z-index:3; }
.coll-txt b{ display:block; color:#fff; font-size:19px; font-weight:800; letter-spacing:-.3px; text-shadow:0 2px 8px rgba(0,0,0,.18); }
.coll-txt span{ display:inline-block; margin-top:5px; font-size:12.5px; color:#fff; background:rgba(0,0,0,.22); padding:2px 9px; border-radius:20px; }

/* 下半部分：这个分类下最新的四个源码缩略图 */
.coll-th{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:10px; }
.coll-th a{ position:relative; display:block; padding-top:100%; border-radius:9px; overflow:hidden; background:#EDF0F5; }
.coll-th img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.coll-th a:hover img{ transform:scale(1.12); }
.coll-th .mini{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:700; background:linear-gradient(135deg,var(--brand),var(--brand-l));
}
.coll-th .mini.m2{ background:linear-gradient(135deg,#7C5CFF,#A98CFF); }
.coll-th .mini.m3{ background:linear-gradient(135deg,#00A88A,#3FD3B6); }
.coll-th .mini.m4{ background:linear-gradient(135deg,#FF6A00,#FFA14D); }
.coll-th .mini.m5{ background:linear-gradient(135deg,#E8407A,#FF8AB0); }
.coll-th .mini.m6{ background:linear-gradient(135deg,#0D9DE0,#6FD0F5); }
.coll-btm{
  padding:2px 14px 14px; display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color:var(--sub);
}
.coll-btm em{ font-style:normal; color:var(--brand); font-weight:600; }

/* ===== 售后支持条（参考站 footer 那一块，我做成卡片放到底部） ===== */
.svc{
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  background:linear-gradient(105deg,#0A4BD6,var(--brand) 45%,#4D94FF);
  border-radius:var(--r); padding:26px 30px; color:#fff; box-shadow:0 10px 30px rgba(0,102,255,.22);
}
.svc .si{ flex:0 0 58px; height:58px; border-radius:16px; background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; font-size:26px; }
.svc .stx{ flex:1; min-width:220px; }
.svc .stx b{ display:block; font-size:19px; font-weight:800; letter-spacing:-.3px; }
.svc .stx span{ display:block; margin-top:5px; font-size:14px; color:rgba(255,255,255,.85); line-height:1.6; }
.svc .sb{
  flex:0 0 auto; background:#fff; color:var(--brand); font-weight:700; font-size:14.5px;
  padding:12px 26px; border-radius:10px; text-decoration:none; transition:.2s;
}
.svc .sb:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.16); }

/* ===== 视觉细节升级：尺寸和圆角都按参考站来 ===== */
/* ⚠️ 宽度必须一致：.wrap 是 1490 减掉左右各 20 的内边距 = 内容 1450，
   跟参考站的 content-area 1450 一样，这样卡片大小也跟他一样（约 350 宽）。
   轮播没有内边距，所以直接写 1450，不然会宽出去 40 像素。 */
.slider{ max-width:1450px; margin:18px auto; }
.sec{ max-width:1490px; margin:22px auto; padding:0 20px; }
/* 卡片：圆角已经是 8px（上面的 --r），这里统一加一圈浅边框，
   白底卡片放在白底板块里也看得出边界 */
.g{ height:100%; border:1px solid var(--line); }
.coll-i{ border:1px solid var(--line); }
.lk{ border:1px solid var(--line); align-items:flex-start; }
/* 卡片底部那一行（浏览量 / 详情）统一贴底，同一排的卡片才在一条线上 */
.g .body h3{ min-height:45px; }
.g .body .sell{ min-height:42px; }
.sec-box{ padding:20px; }
.sec-head{ margin-bottom:18px; }
.sec-head h2{ font-size:22px; }   /* 跟参考站的板块标题一样大 */
.sec-head h2:before{ height:18px; width:4px; }
/* 列间距 16px，跟参考站一致；四列算下来每张卡约 350 宽 */
.goods{ gap:16px; }
.g .pic{ padding-top:80%; }              /* 350 × 280 的比例，跟参考站一张图一样高 */
.g .body{ padding:14px 15px 15px; }
.g .price{ font-size:21px; }
/* 网址导航：改成参考站那种一行一条的小卡 */
.links{ gap:16px; }
.lk{ padding:16px; }
.lk .ico{ flex:0 0 42px; height:42px; border-radius:8px; font-size:16px; }
/* 文档教程：行距拉开一点，更耐看 */
.dlist li{ padding:13px 4px; }
/* 小图、缩略图的圆角也收一点，别太圆 */
.coll-th a{ border-radius:6px; }
.coll-txt span{ border-radius:6px; }

@media (max-width:900px){
  .coll{ grid-template-columns:repeat(2,1fr); }
  .svc{ padding:22px; gap:16px; }
  .svc .si{ display:none; }
}
@media (max-width:560px){
  .coll{ grid-template-columns:1fr; }
  .notice{ flex-wrap:wrap; }
}

/* ============================================================
   分类合集按截图改：上面一张大图，下面四张小图，每张小图带一行商品名
   ============================================================ */
.coll-top{ padding-top:56%; }                    /* 大图改成 16:9 的扁长方形 */
.coll-txt{ display:none; }                        /* 大图上不再压分类名 */
/* 大图下面单独一行：左边分类名，右边「N 套 · 查看全部」 */
.coll-name{ padding:12px 14px 2px; display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.coll-name b{ font-size:15px; color:var(--ink); font-weight:700; }
.coll-name a{ font-size:12.5px; color:var(--sub); white-space:nowrap; }
.coll-name a:hover{ color:var(--brand); }
/* 四张小图：图上、字下 */
.coll-th{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:8px 14px 16px; }
.coll-th a{ display:block; padding-top:0; }       /* 旧的 a 是比例容器，现在改到 .ti 上 */
.coll-th .ti{ display:block; position:relative; padding-top:100%; border-radius:6px; overflow:hidden; background:#EDF0F5; }
.coll-th .ti img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.coll-th a:hover .ti img{ transform:scale(1.1); }
.coll-th .tt{ display:block; font-size:11px; color:#6B7280; margin-top:5px; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
/* 没配图时的占位色块，显示商品名前两字 */
.coll-th .ti .mini{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:700; background:linear-gradient(135deg,var(--brand),var(--brand-l)); }
.coll-th .ti .mini.m2{ background:linear-gradient(135deg,#7C5CFF,#A98CFF); }
.coll-th .ti .mini.m3{ background:linear-gradient(135deg,#00A88A,#3FD3B6); }
.coll-th .ti .mini.m4{ background:linear-gradient(135deg,#FF6A00,#FFA14D); }
.coll-th .ti .mini.m5{ background:linear-gradient(135deg,#E8407A,#FF8AB0); }
.coll-th .ti .mini.m6{ background:linear-gradient(135deg,#0D9DE0,#6FD0F5); }
/* 旧的底部那行不要了，分类名那行已经包含了数量 */
.coll-btm{ display:none; }

/* ============================================================
   商品卡按参考站截图改：图 + 压在图下的深色标题条
   ============================================================ */
/* 价格做成小标签，贴在图的右上角 */
.g .gprice{
  position:absolute; top:10px; right:10px; z-index:3;
  background:linear-gradient(135deg,#FF6A00,#FF8A3D); color:#fff;
  font-size:14px; font-weight:800; padding:4px 10px; border-radius:6px;
  box-shadow:0 3px 10px rgba(255,106,0,.35);
}
/* 深色标题条：压在图的底部，藏青底白字，一行写不下自动省略 */
.g .gbar{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:#1B2436; color:#fff;
  font-size:14px; font-weight:600; letter-spacing:.2px;
  padding:11px 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 图下面那条白色信息行：左边浏览量，右边「自营商品」小蓝标 */
.g .gfoot{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; background:#fff; font-size:12.5px; color:#8A919F;
}
/* 自营商品标从图上挪到信息行里，改成浅蓝底小胶囊 */
.g .gfoot .own{
  position:static; background:#EAF3FF; color:#0066FF;
  font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:5px;
}

/* ============================================================
   卡片挨近一点（跟参考站一样，缝隙只有 8px）
   ============================================================ */
.goods{ gap:8px; }
.list-goods{ gap:8px; }
.coll{ gap:10px; }
/* 卡片自身的浅色边框留着，缝再小也分得清哪张是哪张 */

/* ============================================================
   卡片按参考站最终版改：整张就是一张图（角标/价格/标题全烧在图里），
   图下面只有「两行简介 + 浏览量/自营商品」一行小字
   ============================================================ */
.g .gbody{ padding:12px 14px 13px; background:#fff; }
/* 简介：两行，超出自动省略号 */
.g .gsell{
  font-size:12.5px; color:#6B7280; line-height:1.6; height:40px; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
/* 底部一行：左边眼睛+浏览量，右边橙色自营商品标 */
.g .gmeta{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:9px; font-size:12px; color:#9AA1AF;
}
.g .gmeta .hits{ display:flex; align-items:center; gap:4px; }
.g .gmeta .own{ display:flex; align-items:center; gap:5px; color:#FF6A00; font-weight:600; font-size:12px; }
/* 自营商品前面那个橙色小方块 V 标 */
.g .gmeta .own:before{
  content:"V"; display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:4px; background:linear-gradient(135deg,#FF6A00,#FF8A3D);
  color:#fff; font-size:10px; font-weight:800;
}

/* ===== 卡片左上角红角标（新品/热卖），跟参考站一样的红色气泡 ===== */
.g .gtag{
  position:absolute; left:0; top:10px; z-index:3;
  display:inline-block; white-space:nowrap;
  background:#F5222D; color:#fff;
  font-size:12px; font-weight:700; line-height:1;
  padding:6px 9px 6px 8px; border-radius:0 4px 4px 0;
  box-shadow:0 2px 6px rgba(245,34,45,.35);
}
.g .gtag:after{
  content:""; position:absolute; left:0; bottom:-5px;
  width:0; height:0;
  border-top:5px solid #B71C1C; border-left:5px solid transparent;
}