/* 产品页面专用样式 */

:root{
  --bg-primary:#ffffff;
  --surface-color:#ffffff;
  --text-primary:#2b2f36;
  --text-secondary:#7a828f;
  --border-color:#e6e8eb;
  --accent-color:#1a73e8;
  --card-bg: var(--surface-color);
}
.dark-theme{
  --bg-primary:#0f1115;
  --surface-color:#16181d;
  --text-primary:#e3e5e9;
  --text-secondary:#9aa0a6;
  --border-color:#2b3138;
  --accent-color:#8ab4f8;
  --card-bg: var(--surface-color);
}

/* —— 这里是关键：与 .container.nav 对齐 —— */
.cards-page .container{ max-width:1200px; margin-left:auto; margin-right:auto; padding-left:0 !important; padding-right:0 !important; }
.cards-page .row{ margin-left:0 !important; margin-right:0 !important; }
.cards-page .col-xs-12, .cards-page .col-sm-12, .cards-page .col-md-12, .cards-page .col-lg-12{ padding-left:0 !important; padding-right:0 !important; }

/* 标题区 */
.section-header{ display:flex; align-items:center; justify-content:space-between; margin:8px 0 12px; }
.section-header h4{ margin:0; color:var(--text-primary); font-weight:600; }
.section-header a.more{ color:var(--accent-color); text-decoration:none; }
.section-header a.more:hover{ text-decoration:underline; }

/* 网格：lg=4列（保持一行 4 个） */
.cards-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:768px){  .cards-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){  .cards-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1200px){ .cards-grid{ grid-template-columns:repeat(4,1fr); } }

/* 卡片（扁平、无边线） */
.mcp-card{
  display:block; text-decoration:none; color:var(--text-primary);
  background:var(--card-bg); border:none; border-radius:16px;
  padding:14px 14px 12px; box-shadow:0 6px 14px rgba(17,17,26,.06);
}
.mcp-card:hover{ box-shadow:0 8px 18px rgba(17,17,26,.10); }
.mcp-card:focus{ outline:none; }

.mcp-card .card-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.mcp-card .card-logo{ width:40px; height:40px; border-radius:10px; object-fit:cover; background:#fff; }
.dark-theme .mcp-card .card-logo{ background:#0b0c0f; }
.mcp-card .card-title{ font-size:18px; font-weight:600; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;color: var(--text-primary); }
.mcp-card .card-desc{ margin-top:4px; font-size:13px; color:var(--text-secondary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.mcp-card .meta{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; font-size:12px; color:var(--text-secondary); }
.mcp-card .meta .left .item{ margin-right:10px; white-space:nowrap; }
.mcp-card .meta i{ margin-right:4px; }

/* 标签：扁平无边线 */
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.tag-chip{ font-size:12px; line-height:1; padding:6px 10px; border-radius:999px; border:none; }
.product-tag-0{ background:#fff8e1; color:#f57c00; }
.product-tag-1{ background:#e8f5e8; color:#2e7d32; }
.product-tag-2{ background:#fce4ec; color:#c2185b; }
.product-tag-3{ background:#e3f2fd; color:#1976d2; }
.dark-theme .product-tag-0{ background:rgba(255,183,77,.18); color:#ffcf93; }
.dark-theme .product-tag-1{ background:rgba(76,175,80,.18); color:#9be7a3; }
.dark-theme .product-tag-2{ background:rgba(233,30,99,.18); color:#f48fb1; }
.dark-theme .product-tag-3{ background:rgba(33,150,243,.18); color:#9ecbff; }

/* 热议话题：扁平无边线 */
.hot-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px 12px; }
.hot-tags li{ margin:0; padding:0; }
.hot-tags .chip{
  display:inline-flex; align-items:center; height:36px; padding:0 16px;
  font-size:14px; border-radius:999px; text-decoration:none; border:none;
  background:#e8f0fe; color:#1a73e8;
  transition:background .2s ease, transform .1s ease;
}
.hot-tags .chip:hover{ background:#dbe7fd; text-decoration:none; }
.dark-theme .hot-tags .chip{ background:rgba(138,180,248,.22); color:#c7d7ff; }
.dark-theme .hot-tags .chip:hover{ background:rgba(138,180,248,.30); }

/* 分类条：扁平无边框，留白与首页一致 */
.cards-category{ margin-top:14px; margin-bottom:14px; }
.cards-category .list{ display:flex; flex-wrap:wrap; gap:10px 14px; margin:0; padding:0; list-style:none; }
.cards-category .list > li{ margin:0; }
.cards-category .list a{
  display:inline-flex; align-items:center; height:36px; line-height:36px; padding:0 12px;
  border-radius:10px; background:transparent; color:var(--text-primary); text-decoration:none;
}
.cards-category .list a:hover{ background:rgba(26,115,232,.08); color:var(--accent-color); }
.cards-category .active a{ background:var(--accent-color); color:#fff; }
.dark-theme .cards-category .list a:hover{ background:rgba(138,180,248,.12); }

.cards-tabs{ margin:10px 0 12px; }