/* ==========================================================================
   博株生物 —— 型号目录 / 详情页 组件样式
   变量全部来自 css/style.css，本文件不覆盖任何原有样式
   ========================================================================== */

/* ---------- 品牌目录卡（首页 / 产品中心 / 品牌页 / 关于页共用） ---------- */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.catcard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--shadow);transition:.25s}
.catcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:transparent}
.catcard b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:5px}
.catcard .f{display:block;font-size:13px;color:var(--muted);line-height:1.5}
.catcard .n{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;color:var(--blue);background:var(--sky);padding:3px 10px;border-radius:20px}

/* 产品中心里各方向下的目录直达 */
.tocats{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tocat{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--blue);
  border:1px solid var(--line);border-radius:20px;padding:6px 13px;background:#fff;transition:.25s}
.tocat:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* AICON 产品图 */
.brandimgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;
  margin:22px 0}
.brandimgs img{width:100%;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:14px}

/* ---------- 型号表工具条 ---------- */
.cat-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:26px 0 14px}
.cat-search{flex:1;min-width:230px;position:relative}
.cat-search input{width:100%;height:46px;padding:0 16px 0 42px;font-size:15px;
  border:1px solid var(--line);border-radius:40px;background:#fff;color:var(--ink);
  font-family:inherit;box-shadow:var(--shadow)}
.cat-search input:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(21,89,224,.12)}
.cat-search::before{content:"🔍";position:absolute;left:16px;top:12px;font-size:15px;opacity:.5}
.cat-tools select{height:46px;padding:0 16px;font-size:14px;background:#fff;
  border:1px solid var(--line);border-radius:40px;color:var(--ink);font-family:inherit;
  max-width:100%;box-shadow:var(--shadow)}
.cat-count{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--faint)}
.cat-count b{color:var(--blue)}

/* ---------- 表格内元素 ---------- */
.ptable td .plink{color:var(--ink);font-weight:500}
.ptable td .plink:hover{color:var(--blue)}
.ptable td .pgrp{display:block;font-family:var(--mono);font-size:11.5px;color:var(--faint);
  margin-top:4px;letter-spacing:.03em}
.ptable td.tright{text-align:right;white-space:nowrap}
.ptable button.ask{font-family:inherit;font-size:13px;font-weight:600;padding:7px 18px;
  border-radius:30px;cursor:pointer;border:1.5px solid var(--blue);color:var(--blue);
  background:#fff;transition:.25s}
.ptable button.ask:hover{background:var(--blue);color:#fff}
.ptable button.ask.on{background:var(--grad);border-color:transparent;color:#fff}

.cat-empty{padding:48px 16px;text-align:center;color:var(--muted)}
.cat-empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:8px}

/* ---------- 分页 ---------- */
.cat-pager{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:24px 0 0}
.cat-pager button{min-width:40px;height:38px;font-size:13.5px;cursor:pointer;font-family:inherit;
  border:1px solid var(--line);background:#fff;border-radius:10px;color:var(--ink);transition:.2s}
.cat-pager button:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.cat-pager button[disabled]{opacity:.35;cursor:default}
.cat-pager button.cur{background:var(--grad);border-color:transparent;color:#fff;font-weight:600}

/* ---------- 询价清单浮条 ---------- */
.cat-cart{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--navy);
  color:#cfe0f5;transform:translateY(110%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -8px 30px rgba(10,26,53,.25)}
.cat-cart.open{transform:none}
.cat-cart .wrap{display:flex;align-items:center;gap:12px;padding:14px 24px;flex-wrap:wrap}
.cat-cart .txt{font-size:14px}
.cat-cart .txt b{color:var(--cyan);font-family:var(--mono)}
.cat-cart .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.cat-cart button{border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;
  font-size:13.5px;padding:9px 18px;border-radius:30px;cursor:pointer;font-family:inherit;
  transition:.25s}
.cat-cart button:hover{background:rgba(255,255,255,.12)}
.cat-cart button.pri{background:var(--grad);border-color:transparent;font-weight:600}

.cat-toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);
  background:var(--navy);color:#fff;padding:11px 20px;border-radius:30px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:.25s;z-index:80;box-shadow:var(--shadow-lg)}
.cat-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 详情页 ---------- */
.pd-side .askbtn{display:flex;justify-content:center;width:100%;margin-bottom:10px}
.pd-note{color:var(--faint);font-size:13px;line-height:1.75;margin-top:16px}
.pd-rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:10px}
.pd-rel a{display:block;padding:13px 15px;border:1px solid var(--line);border-radius:12px;
  color:var(--ink);font-size:13.5px;background:#fff;transition:.25s}
.pd-rel a:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.pd-rel b{display:block;font-family:var(--mono);font-size:11.5px;color:var(--blue);
  margin-bottom:4px;letter-spacing:.04em}
.pd-table td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:14.5px}
.pd-table tr:last-child td{border-bottom:none}
.pd-table .k{width:110px;color:var(--muted);white-space:nowrap}

@media (max-width:820px){
  .cat-count{margin-left:0;width:100%}
  .ptable td.tright{text-align:left}
  .brandimgs{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .catcard,.cat-cart,.cat-toast,.tocat,.ptable button.ask{transition:none}
  .catcard:hover{transform:none}
}