/* ===================================================================
 * 类目总览 /categories/ 与类目详情 /categories/<slug>/（含三语镜像）
 * 2026-09-28 按 Figma「Categories · Categories2」+「分类页 说明」整份重写。在 cmh-brand.css 之后加载。
 * 两页都是白底：面包屑 → 80 → 页头（标题 Poppins 64/70 → 24 → 说明 16/26 slate；右侧统计瓷砖）→ 卡片网格（3 列、间距 16）。
 * =================================================================== */

/* ── 面包屑（稿：12/18；可点的层级橙色，当前页 ink） ─────────────── */
.breadcrumb { padding: 20px 0 0; margin: 0; font: 400 12px/18px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text); }
.breadcrumb a { color: var(--orange); text-decoration: none; }
.breadcrumb .sep { margin: 0 6px; color: var(--orange); }
.breadcrumb .current { color: var(--text); }

/* ── 页头 ─────────────────────────────────────────────────────────── */
.cat-hero, main > section:has(> .container > .cat-header) { padding: 80px 0 0; }
.cat-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; padding: 0; border: 0; }
.cat-header > div:first-child { flex: 0 1 726px; display: flex; flex-direction: column; gap: 24px; }
.cat-eyebrow { display: none; }
.cat-title { margin: 0; font: 500 64px/70px var(--font-display); letter-spacing: 0; color: var(--text); }
.cat-title em { font-style: normal; color: inherit; }
.cat-desc { margin: 0; max-width: 726px; font: 400 16px/26px var(--font-body); color: var(--slate); }
/* 统计瓷砖：216×118、圆角 12、内边距 16/24；数字 Poppins 40/48（单位 28/36），说明 12/18；右上 36px 图标 */
.cat-meta { flex: none; display: grid; grid-template-columns: repeat(2, 216px); gap: 8px; margin: 0; padding: 0; border: 0; font: 400 12px/18px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text); }
.cat-meta-row {
  position: relative; overflow: hidden; margin: 0; height: 118px; min-height: 118px; padding: 16px 24px; border: 0; border-radius: 12px;
  background: #fff; color: var(--text); display: flex; flex-direction: column; justify-content: space-between;
}
.cat-meta-row::after { content: ''; position: absolute; top: 6px; right: 10px; width: 36px; height: 36px; background: center / 36px 36px no-repeat; }
.cat-meta strong, .cat-meta-row strong { display: block; margin: 0; padding-right: 36px; font: 500 40px/48px var(--font-display); letter-spacing: 0; color: inherit; white-space: nowrap; }
.cat-meta-row strong .u { font-size: 28px; line-height: 36px; }
/* 总览页：与首页同一组四块 —— 橙 / 白 / 白 / 藏青 */
.cat-meta-row:nth-child(1) { background: var(--orange); color: #fff; }
.cat-meta-row:nth-child(1)::after { background-image: url('/assets/img/icons/stat-factory.svg'); }
.cat-meta-row:nth-child(2)::after { background-image: url('/assets/img/icons/stat-box.svg'); }
.cat-meta-row:nth-child(3)::after { background-image: url('/assets/img/icons/stat-map.svg'); }
.cat-meta-row:nth-child(4) { background: var(--navy); color: #fff; }
.cat-meta-row:nth-child(4)::after { background-image: url('/assets/img/icons/stat-money.svg'); }
/* 详情页：三块一行 —— 橙（在架数）/ 白（主产区，28/36）/ cloud（MOQ，28/36，购物车图标） */
.cat-hero .cat-meta { grid-template-columns: repeat(3, auto); }
.cat-hero .cat-meta-row { width: 216px; }
.cat-hero .cat-meta-row:nth-child(2) { width: 210px; }
.cat-hero .cat-meta-row:nth-child(2)::after { background-image: url('/assets/img/icons/stat-map.svg'); }
.cat-hero .cat-meta-row:nth-child(3) { background: var(--cloud); }
.cat-hero .cat-meta-row:nth-child(3)::after { background-image: url('/assets/img/icons/stat-cart.svg'); }
.cat-hero .cat-meta-row strong, .cat-hero .cat-meta-row { color: var(--text); }
.cat-hero .cat-meta-row:nth-child(1), .cat-hero .cat-meta-row:nth-child(1) strong { color: #fff; }
.cat-hero .cat-meta-row:nth-child(n+2) strong { font-size: 28px; line-height: 36px; }

/* 详情页原来是深色照片页头；稿子是白底 —— 照片与压暗层都不要 */
.cat-hero { position: relative; background: #fff; color: var(--text); min-height: 0; }
.cat-hero-bg, .cat-hero-overlay { display: none; }
.cat-hero .cat-title, .cat-hero .cat-desc { color: inherit; }
.cat-hero .cat-desc { color: var(--slate); max-width: 582px; }
.cat-hero .cat-header > div:first-child { flex-basis: 582px; }

/* ── 总览：分类卡（稿「分类卡片」）
 * 429×492、白底、圆角 14、无描边；上半张图（默认填满，约 372 高）+ 左上藏青标签「001 Furniture」（16/26 semibold + 12/18，右下角圆角 14）；
 * 下半文字：内边距 16/24/20，名称 Poppins 20/28 → 16 → 说明 14/20 slate；
 * 悬浮 / 点击：图缩到 326，露出橙色「N workshops ↗」小按钮（12/18 白，右侧 20px 白底箭头） ── */
main > section:has(> .container > .cat-grid) { padding: 80px 0 110px; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; border: 0; background: none; }
.cat-card {
  position: relative; display: flex; flex-direction: column; height: 492px; overflow: hidden; border: 0; border-radius: 14px; background: #fff;
  color: var(--text); text-decoration: none; transform: none; box-shadow: none;
}
@media (hover: hover) { .cat-card:hover { transform: none; box-shadow: none; background: #fff; } .cat-card:hover .cat-card-name { color: var(--text); } }
.cat-card-image { position: relative; flex: 1 1 auto; min-height: 0; aspect-ratio: auto; border-radius: 14px 14px 0 0; overflow: hidden; background: var(--cloud); transition: flex-basis .35s cubic-bezier(.22,1,.36,1); }
.cat-card-image > img, .cat-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transform: none; transition: none; }
.cat-card-image > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cat-card-tab {
  position: absolute; top: 0; left: 0; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px;
  border-radius: 14px 0 14px 0; background: #123478; color: #fff; font: 400 12px/18px var(--font-body); letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.cat-card-tab b { font: 600 16px/26px var(--font-body); }
.cat-card-badge, .cat-card-id, .cat-card-footer { display: none; }   /* 旧标记（生成器已换成 .cat-card-tab） */
.cat-card-body { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 16px 24px 20px; }
.cat-card-name { margin: 0; font: 500 20px/28px var(--font-display); letter-spacing: 0; color: var(--text); }
.cat-card-desc { margin: 0; font: 400 14px/20px var(--font-body); color: var(--slate); }
.cat-card-count {
  order: 3; display: inline-flex; align-items: center; gap: 8px; padding: 5px 5px 5px 10px; border-radius: 6px; background: var(--orange);
  font: 400 12px/18px var(--font-body); letter-spacing: 0; text-transform: none; color: #fff;
}
.cat-card-count .ico { width: 20px; height: 20px; background-image: url('/assets/img/icons/count-go.svg'); background-size: 20px 20px; }
@media (hover: hover) and (min-width: 769px) {
  .cat-card-count { display: none; }
  .cat-card:hover .cat-card-image, .cat-card:focus-visible .cat-card-image { flex: 0 0 326px; }
  .cat-card:hover .cat-card-count, .cat-card:focus-visible .cat-card-count { display: inline-flex; }
}

/* ── 详情：筛选（稿：SUBCATEGORY 10.88/16.9 大写字距 1.088；胶囊 12/18、内边距 6/14、圆角 6；当前 = 藏青底白字；
 *   下方 16：「Showing 9 of 9 listed workshops」12/18 slate，数字 semibold 橙） ── */
.filter-bar { position: static; padding: 50px 0 0; border: 0; background: transparent; box-shadow: none; }
.filter-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.filter-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.filter-label { margin-right: 8px; font: 400 10.88px/16.864px var(--font-body); letter-spacing: 1.088px; text-transform: uppercase; color: var(--text); }
.chip, .filter-chip {
  padding: 6px 14px; border: 1px solid var(--mist); border-radius: 6px; background: #fff;
  font: 400 12px/18px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--slate); cursor: pointer;
}
@media (hover: hover) { .chip:hover, .filter-chip:hover { border-color: var(--navy); color: var(--navy); } }
.chip.active, .filter-chip.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.filter-sort select { height: 32px; border: 1px solid var(--mist); border-radius: 6px; font: 400 12px/18px var(--font-body); color: var(--text); padding: 0 28px 0 10px; text-transform: none; letter-spacing: 0; }
.factories-section { padding: 16px 0 0; }
.results-meta { margin: 0 0 50px; font: 400 12px/18px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--slate); }
.results-meta strong { font-weight: 600; color: var(--orange); }

/* ── 详情：工厂卡（稿「工厂卡片」）
 * 429×630、白底、圆角 14、无描边；左上「✓ Verified」藏青标签（14/20 semibold）；
 * 默认：大图（约 504 高）+ 名称 Poppins 20/28 → 8 → 城市 · 成立 12/18 slate → 8 → 标签（描边 mist、4/12、圆角 4、12/18）；
 * 悬浮：图缩到 326，下面依次露出 2×2 参数（数值 Inter 600 14/20、名称 10/18 大写 slate）、简介 14/20 slate + 右下 32px 橙色箭头块；
 * 没图：cloud 底 + 居中的厂房占位插画 ── */
.factory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fcard {
  position: relative; display: flex; flex-direction: column; height: 630px; overflow: hidden; border: 0; border-radius: 14px; background: #fff;
  color: var(--text); text-decoration: none; transform: none; box-shadow: none;
}
@media (hover: hover) { .fcard:hover { transform: none; box-shadow: none; background: #fff; } .fcard:hover .fcard-name { color: var(--text); } }
.fcard-image { position: relative; flex: 1 1 auto; min-height: 0; aspect-ratio: auto; border-radius: 14px 14px 0 0; overflow: hidden; background: var(--cloud); transition: flex-basis .35s cubic-bezier(.22,1,.36,1); }
.fcard-image > img, .fcard-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; transition: none; }
.fcard-image:not(:has(img)) { background: var(--cloud) url('/assets/img/factory-placeholder.svg') center / 178.7px 140.8px no-repeat; }
.fcard-image:not(:has(img)) > svg { display: none; }
.fcard-badge {
  position: absolute; top: 0; left: 0; z-index: 2; display: inline-flex; align-items: center; padding: 6px 10px; border: 0; border-radius: 14px 0 14px 0;
  background: #123478; color: #fff; font: 600 14px/20px var(--font-body); letter-spacing: 0; text-transform: none; white-space: pre;
}
.fcard-badge.pending { background: #fff; color: var(--slate); border: 1px solid var(--mist); border-top: 0; border-left: 0; }
.fcard-id { display: none; }
.fcard-body { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 24px 20px; }
.fcard-name { order: 1; margin: 0; font: 500 20px/28px var(--font-display); letter-spacing: 0; color: var(--text); }
.fcard-loc { order: 2; margin: 0; font: 400 12px/18px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--slate); }
.fcard-tags { order: 3; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.fcard-tags .tag, .fcard-tags span {
  padding: 4px 12px; border: 1px solid var(--mist); border-radius: 4px; background: #fff;
  font: 400 12px/18px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--slate);
}
.fcard-specs { order: 4; width: 263px; max-width: 100%; margin: 8px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; }
.fcard-spec { display: flex; flex-direction: column; gap: 1px; padding: 0; border: 0; font: 400 10px/18px var(--font-body); letter-spacing: 0; text-transform: uppercase; color: var(--slate); }
.fcard-spec strong { font: 600 14px/20px var(--font-body); text-transform: none; color: var(--text); }
.fcard-desc {
  order: 5; margin: 8px 0 0; padding-right: 48px; font: 400 14px/20px var(--font-body); color: var(--slate);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fcard-body::after {
  content: ''; position: absolute; right: 24px; bottom: 20px; width: 32px; height: 32px;
  background: url('/assets/img/icons/arrow-tile-orange.svg') center / 32px 32px no-repeat;
}
@media (hover: hover) and (min-width: 769px) {
  .fcard-specs, .fcard-desc, .fcard-body::after { display: none; }
  .fcard:hover .fcard-image, .fcard:focus-visible .fcard-image { flex: 0 0 326px; }
  .fcard:hover .fcard-specs, .fcard:focus-visible .fcard-specs { display: grid; }
  .fcard:hover .fcard-desc, .fcard:focus-visible .fcard-desc { display: -webkit-box; }
  .fcard:hover .fcard-body::after, .fcard:focus-visible .fcard-body::after { display: block; }
}
.fcard.hidden { display: none; }

/* ── 详情：相关阅读与底部 CTA（稿子里没有这两块；保留内容，按设计系统收样式） ── */
.factories-section + .factories-section { padding: 110px 0 0; }
.cta-strip { margin-top: 110px; padding: 80px 0; background: var(--orange); color: #fff; border: 0; }
.cta-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-strip h3 { margin: 0; max-width: 760px; font: 500 28px/36px var(--font-display); letter-spacing: 0; color: #fff; }
.cta-strip h3 em { font-style: normal; color: #fff; }
.cta-strip .btn-light { display: inline-flex; align-items: center; height: 48px; padding: 10px 24px; border-radius: 6px; background: #fff; color: var(--text); font: 600 14px/20px var(--font-body); letter-spacing: 0; text-transform: none; }
.cta-strip .btn-light svg { display: none; }
@media (hover: hover) { .cta-strip .btn-light:hover { background: var(--navy); color: #fff; transform: none; box-shadow: none; } }

/* ── 响应式（稿子只有 1440 桌面稿） ─────────────────────────────── */
@media (max-width: 1100px) {
  .cat-header { flex-direction: column; gap: 32px; }
  .cat-header > div:first-child { flex-basis: auto; }
  .cat-hero .cat-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .cat-hero .cat-meta-row, .cat-hero .cat-meta-row:nth-child(2) { width: auto; }
  .cat-grid, .factory-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .cat-hero, main > section:has(> .container > .cat-header) { padding-top: 40px; }
  .cat-title { font-size: 40px; line-height: 46px; }
  .cat-meta { grid-template-columns: 1fr 1fr; width: 100%; }
  .cat-hero .cat-meta { grid-template-columns: 1fr 1fr; }
  .cat-meta-row { height: auto; min-height: 96px; padding: 12px 14px; }
  .cat-meta strong, .cat-meta-row strong { font-size: 28px; line-height: 34px; }
  .cat-grid, .factory-grid { grid-template-columns: 1fr; }
  .cat-card { height: 440px; }
  .fcard { height: auto; }
  .fcard-image { flex: 0 0 260px; }
  .filter-inner { flex-direction: column; align-items: flex-start; }
  .cta-strip-inner { flex-direction: column; align-items: flex-start; }
  .cta-strip h3 { font-size: 22px; line-height: 30px; }
}