/* ==========================================================================
   富奥东机工减振器 · 商品目录（商城式列表 + 分页）
   一套结构，三种商城观感：skin-shop-grid / skin-shop-list / skin-shop-table
   ========================================================================== */

:root{
  --ease: cubic-bezier(.22,.61,.36,1);
  --bg: #f5f6f8;
  --surface: #ffffff;
  --ink: #1b2130;
  --dim: #7b8494;
  --line: #e6e9ee;
  --accent: #20458b;
  --accent-soft: #eef3fb;
  --per: 12;               /* 每页条数，各页面自行覆盖 */
  --card-min: 210px;
  --radius: 10px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; min-height:100%; background:var(--bg); color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
button,input,select{ font-family:inherit; font-size:inherit; color:inherit; }

/* ---------------- 顶栏 ---------------- */

.top{
  position:sticky; top:0; z-index:20;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top,0px) + 12px) 0 0;
}
.top-in{ max-width:1180px; margin:0 auto; padding:0 16px; }
.brandline{ display:flex; align-items:center; gap:10px; padding-bottom:12px; }
.mark{ width:34px; height:34px; border-radius:9px; flex:0 0 auto;
  background:linear-gradient(140deg,#2f6fd0,#20458b); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font:700 17px/1 Arial,Helvetica,sans-serif; }
.brandline h1{ margin:0; font-size:16px; font-weight:600; }
.brandline .sub{ font-size:11px; color:var(--dim); margin-top:2px; }
.brandline .sp{ flex:1; }
.brandline .back{ font-size:12.5px; color:var(--accent); white-space:nowrap; }

.tools{ display:flex; gap:8px; align-items:center; padding-bottom:12px; flex-wrap:wrap; }
.search{ position:relative; flex:1 1 220px; min-width:0; }
.search input{
  width:100%; height:38px; padding:0 34px 0 13px;
  border:1px solid var(--line); border-radius:19px; background:#fafbfc; outline:none;
  transition:border-color .2s, background .2s;
}
.search input:focus{ border-color:var(--accent); background:#fff; }
.search .ic{ position:absolute; right:13px; top:50%; margin-top:-6px;
  width:11px; height:11px; border:1.8px solid var(--dim); border-radius:50%; }
.search .ic::after{ content:""; position:absolute; right:-4px; bottom:-3px; width:5px; height:1.8px;
  background:var(--dim); transform:rotate(45deg); }
.tools select{
  height:38px; padding:0 30px 0 12px; border:1px solid var(--line); border-radius:19px;
  background:#fafbfc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237b8494' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center/10px 6px;
  -webkit-appearance:none; appearance:none; outline:none; cursor:pointer;
}
.tools .count{ font-size:12px; color:var(--dim); white-space:nowrap; padding-left:2px; }

/* ---------------- 品牌筛选 ---------------- */

.chips{
  display:flex; gap:7px; overflow-x:auto; scrollbar-width:none;
  max-width:1180px; margin:0 auto; padding:0 16px 12px;
}
.chips::-webkit-scrollbar{ display:none; }
.chips button{
  flex:0 0 auto; height:30px; padding:0 13px; border-radius:15px; cursor:pointer;
  border:1px solid var(--line); background:#fafbfc; color:#4a5568; font-size:12.5px;
  transition:background .18s, border-color .18s, color .18s;
}
.chips button:hover{ border-color:#c9d3e2; }
.chips button.on{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.chips button b{ font-weight:400; opacity:.62; margin-left:4px; font-variant-numeric:tabular-nums; }
.chips button.on b{ opacity:.8; }

/* ---------------- 列表区 ---------------- */

.wrap{ max-width:1180px; margin:0 auto; padding:18px 16px 0; }

.list{ display:grid; gap:14px; }

.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:box-shadow .2s var(--ease), transform .16s var(--ease), border-color .2s;
}
.card:hover{ box-shadow:0 10px 26px rgba(27,33,48,.10); transform:translateY(-2px); border-color:#d7dde7; }
.card:active{ transform:translateY(0); }

.card .thumb{
  display:block; position:relative; aspect-ratio:1/1; background:#fff;
  border-bottom:1px solid var(--line); overflow:hidden;
}
.card .thumb img{ width:100%; height:100%; object-fit:contain; display:block;
  padding:10px; transition:transform .3s var(--ease); }
.card:hover .thumb img{ transform:scale(1.05); }
.card .badge{
  position:absolute; left:8px; top:8px; z-index:2;
  padding:2px 8px; border-radius:5px; font-size:11px; font-weight:600;
  background:var(--accent-soft); color:var(--accent);
}

.card .meta{ padding:11px 12px 13px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card .model{ margin:0; font-size:14.5px; font-weight:600; line-height:1.35; }
.card .model em{ font-style:normal; font-weight:400; font-size:11.5px; color:var(--dim); margin-left:5px; }
.card .part{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; letter-spacing:.02em;
  color:var(--accent); background:var(--accent-soft);
  padding:4px 8px; border-radius:5px; align-self:flex-start;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.card .foot{ margin-top:auto; padding-top:8px; display:flex; align-items:center; gap:8px;
  font-size:11.5px; color:var(--dim); }
.card .foot .fol{ margin-left:auto; color:var(--accent); display:inline-flex; align-items:center; gap:5px; }
.card .foot .fol::after{ content:""; width:6px; height:6px;
  border-top:1.6px solid currentColor; border-right:1.6px solid currentColor; transform:rotate(45deg); }

/* 序号（只有「清单」皮肤显示） */
.card .no{ display:none; }

/* 页脚（独立版目录页） */
.pagefoot{
  max-width:1180px; margin:0 auto; padding:22px 16px calc(env(safe-area-inset-bottom,0px) + 30px);
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center;
  font-size:11.5px; color:var(--dim); border-top:1px solid var(--line);
}
.pagefoot .r{ margin-left:auto; color:var(--ink); font-weight:600; }
@media (max-width:520px){
  .pagefoot{ font-size:11px; gap:4px 12px; }
  .pagefoot .r{ margin-left:0; flex:1 1 100%; }
}

/* ---------------- 分页 ---------------- */

.pager{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px;
  padding:22px 16px calc(env(safe-area-inset-bottom,0px) + 34px);
  max-width:1180px; margin:0 auto;
}
.pager button, .pager a{
  min-width:34px; height:34px; padding:0 10px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:#4a5568;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-variant-numeric:tabular-nums;
  transition:background .18s, border-color .18s, color .18s;
}
.pager button:hover:not(:disabled), .pager a:hover{ border-color:var(--accent); color:var(--accent); }
.pager .on{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.pager button:disabled{ opacity:.4; cursor:default; }
.pager .gap{ min-width:20px; height:34px; display:inline-flex; align-items:center;
  justify-content:center; color:var(--dim); }
.pager .info{ flex:1 1 100%; text-align:center; font-size:12px; color:var(--dim); padding-top:4px; }

.empty{ text-align:center; padding:70px 20px; color:var(--dim); font-size:13.5px; }
.empty b{ display:block; font-size:15px; color:var(--ink); margin-bottom:8px; }

/* ==========================================================================
   皮肤 1：商城网格（默认，白底电商）
   ========================================================================== */
body.skin-grid .list{ grid-template-columns:repeat(auto-fill, minmax(var(--card-min), 1fr)); }

/* ==========================================================================
   皮肤 2：商城列表（深色 B2B，信息密度高，适合查货号）
   ========================================================================== */
body.skin-list{
  --bg:#0f131a; --surface:#171d27; --ink:#e8edf5; --dim:#8892a4;
  --line:rgba(255,255,255,.09); --accent:#6ea8ff; --accent-soft:rgba(110,168,255,.13);
}
body.skin-list .mark{ background:linear-gradient(140deg,#2f6fd0,#0d2a55); }
body.skin-list .search input,
body.skin-list .tools select{ background:#1c232f; border-color:var(--line); color:var(--ink); }
body.skin-list .search input:focus{ background:#202836; }
body.skin-list .chips button{ background:#1c232f; }
body.skin-list .chips button:hover{ border-color:#3b465a; }
body.skin-list .card{ flex-direction:row; align-items:stretch; }
body.skin-list .card .thumb{ width:132px; flex:0 0 auto; border-bottom:0; border-right:1px solid var(--line); }
body.skin-list .card .badge{ left:6px; top:6px; font-size:10px; }
body.skin-list .card .meta{ padding:14px 16px; }
body.skin-list .card .model{ font-size:16px; }
body.skin-list .list{ grid-template-columns:1fr; gap:10px; }
body.skin-list .pager button, body.skin-list .pager a{ background:#1c232f; color:#c3cbd8; }
body.skin-list .pager .on{ background:var(--accent); border-color:var(--accent); color:#08111f; }
@media (max-width:560px){
  body.skin-list .card .thumb{ width:96px; }
}

/* ==========================================================================
   皮肤 3：规格表（紧凑表格，一屏看很多行）
   ========================================================================== */
body.skin-table{ --bg:#fff; --radius:8px; }
body.skin-table .list{ gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
body.skin-table .card{
  flex-direction:row; align-items:center; border:0; border-bottom:1px solid var(--line);
  border-radius:0; padding:6px 12px 6px 6px; gap:12px; background:#fff;
}
body.skin-table .card:last-child{ border-bottom:0; }
body.skin-table .card:hover{ transform:none; box-shadow:none; background:#f7f9fc; }
body.skin-table .card .thumb{
  width:56px; flex:0 0 auto; border:1px solid var(--line); border-radius:6px; aspect-ratio:1/1;
}
body.skin-table .card .thumb img{ padding:3px; }
body.skin-table .card:hover .thumb img{ transform:none; }
body.skin-table .card .badge{ display:none; }
body.skin-table .card .meta{
  flex-direction:row; align-items:center; gap:14px; padding:0; flex:1; min-width:0;
}
body.skin-table .card .model{ flex:1 1 40%; min-width:0; font-size:13.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.skin-table .card .part{ flex:0 0 auto; font-size:12.5px; }
body.skin-table .card .foot{ margin:0; padding:0; flex:0 0 auto; }
body.skin-table .card .foot .b{ display:inline-block; padding:2px 7px; border-radius:4px;
  background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:600; }

/* 表头（仅表格皮肤显示） */
.thead{ display:none; }
body.skin-table .thead{
  display:flex; gap:12px; align-items:center; padding:9px 12px 9px 6px;
  border:1px solid var(--line); border-bottom:0; border-radius:var(--radius) var(--radius) 0 0;
  background:#f7f9fc; font-size:11.5px; color:var(--dim); letter-spacing:.04em;
}
body.skin-table .thead span:nth-child(1){ width:56px; flex:0 0 auto; }
body.skin-table .thead span:nth-child(2){ flex:1 1 40%; }
body.skin-table .thead span:nth-child(3){ flex:0 0 auto; width:150px; }
body.skin-table .list{ border-radius:0 0 var(--radius) var(--radius); }
body.skin-table .pager{ padding-top:16px; }

/* ==========================================================================
   皮肤 4：清单（沿用首页那张纸的观感 —— 白纸、蓝色分隔线、大序号、箭头）
   ========================================================================== */
body.skin-clean{
  --bg:#eef1f5; --surface:#ffffff; --ink:#16233a; --dim:#6b7686;
  --line:#dbe2ec; --accent:#20458b; --accent-soft:#eef3fb; --radius:12px;
}
body.skin-clean .sheet{
  max-width:880px; margin:0 auto; min-height:100vh;
  background:#fff; padding:30px 22px 0;
  box-shadow:0 10px 40px rgba(22,35,58,.10);
}

/* 页头 —— 与首页 qr-sheet 完全一致 */
body.skin-clean .head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:16px; border-bottom:2px solid var(--accent);
}
body.skin-clean .mark{ width:52px; height:52px; border-radius:12px; font-size:28px; }
body.skin-clean .who{ flex:1 1 220px; min-width:0; }
body.skin-clean .co{ font-size:15px; font-weight:600; }
body.skin-clean .coen{ font-size:8.5px; letter-spacing:.14em; color:#8a94a4; margin-top:3px; }
body.skin-clean .right{ text-align:right; flex:0 1 auto; }
body.skin-clean .right h1{ margin:0; font-size:21px; font-weight:600; }
body.skin-clean .right .sub{ margin-top:4px; font-size:10px; color:var(--dim); letter-spacing:.06em; }

body.skin-clean .tip{
  margin:16px 0 4px; font-size:12.5px; line-height:1.8; color:#46536b;
  background:#f2f5f9; border-left:3px solid var(--accent);
  padding:11px 14px; border-radius:0 8px 8px 0;
}
body.skin-clean .tip b{ color:var(--accent); }

body.skin-clean .tools{ padding:14px 0 4px; }
body.skin-clean .search input,
body.skin-clean .tools select{ background:#fafbfc; }
body.skin-clean .chips{ max-width:none; margin:0; padding:10px 0 14px; }

/* 列表行 */
body.skin-clean .list{ gap:0; }
body.skin-clean .card{
  flex-direction:row; align-items:center; gap:16px;
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  padding:12px 10px; background:#fff;
}
body.skin-clean .card:hover{ background:#f4f7fb; transform:none; box-shadow:none; }
body.skin-clean .card .thumb{
  width:78px; height:78px; flex:0 0 auto; aspect-ratio:auto;
  border:1px solid var(--line); border-radius:9px; background:#fff;
}
body.skin-clean .card:hover .thumb img{ transform:none; }
body.skin-clean .card .badge{
  position:absolute; left:4px; top:4px; z-index:2;
  padding:1px 5px; font-size:9.5px; border-radius:4px;
}
body.skin-clean .card .meta{
  flex-direction:row; align-items:center; gap:14px; padding:0; flex:1; min-width:0;
}
body.skin-clean .card .model{ flex:0 0 auto; font-size:16px; }
body.skin-clean .card .part{ font-size:12.5px; }
body.skin-clean .card .foot{ margin:0 0 0 auto; padding:0; flex:0 0 auto; }
body.skin-clean .card .b{ display:none; }
body.skin-clean .card .no{
  display:block; flex:0 0 auto; margin-left:6px;
  font:700 26px/1 Arial, Helvetica, sans-serif; color:#e3e9f1; letter-spacing:-.02em;
}
body.skin-clean .card:hover .no{ color:#c9d7ee; }

body.skin-clean .pager{ max-width:none; padding-left:0; padding-right:0; }

@media (max-width:520px){
  body.skin-clean .sheet{ padding:22px 14px 0; }
  body.skin-clean .head{ gap:11px; }
  body.skin-clean .mark{ width:42px; height:42px; border-radius:10px; font-size:22px; }
  body.skin-clean .co{ font-size:13.5px; }
  body.skin-clean .right h1{ font-size:16px; }
  body.skin-clean .card{ gap:11px; padding:11px 4px; }
  body.skin-clean .card .thumb{ width:64px; height:64px; border-radius:8px; }
  body.skin-clean .card .model{ font-size:14.5px; }
  body.skin-clean .card .part{ font-size:11.5px; }
  body.skin-clean .card .no{ font-size:19px; }
  body.skin-clean .card .badge{ display:none; }
}

/* ---------------- 窄屏微调 ---------------- */
@media (max-width:520px){
  :root{ --card-min:150px; }
  .brandline h1{ font-size:14.5px; }
  .card .model{ font-size:13.5px; }
  .card .part{ font-size:12px; }
  .pager button, .pager a{ min-width:32px; height:32px; font-size:12.5px; }
  body.skin-table .card .model{ flex:1 1 auto; }
  body.skin-table .card .part{ font-size:11.5px; }
}
@media (prefers-reduced-motion: reduce){ *{ transition-duration:.01ms !important; } }