/* CKIT 品牌分类预览版样式
   沿用现站色系：主色绿 #0e9f47，深色 #1b1b1b，红 #cd0f0f，蓝 #0063ba
   宽度 960px，参考 www.ci-kitchen.com 现有设计
*/
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #fff; color: #000; font-size: 14px; line-height: 1.7;
  font-family: Helvetica, "STHeiti STXihei", "Microsoft JhengHei", "Microsoft YaHei", Arial, sans-serif;
}
ol,ul,li{list-style-type:none;}
img{border:0; vertical-align:middle; max-width:100%;}
a{color:#000; text-decoration:none; transition: color .15s ease;}
a:hover{ color:#0e9f47; }
.clear{ height:0; clear:both; overflow:hidden; }

.wrap{ margin: 0 auto; width: 960px; position: relative; max-width:100%; }

/* ====== Header ====== */
.topbar{ height:35px; line-height:35px; background:#1b1b1b; color:#fff; font-size:13px; }
.topbar .toptel{ float:left; padding-left:32px; background:url(../img/toptel.png) 10px center no-repeat; }
.topbar .topsear{ float:right; height:20px; margin-top:8px; position:relative; }
.topbar .topsear input{ display:block; background:#fff; border:none; border-radius:10px; font-size:12px; line-height:20px; height:20px; width:155px; text-indent:18px; outline:none; }
.topbar .topsear .btn{ position:absolute; right:7px; top:0; display:block; background:url(../img/search.png) center center no-repeat; border:none; line-height:100px; width:20px; height:20px; overflow:hidden; cursor:pointer; }
.topbar .toplang{ float:right; height:29px; margin-left:17px; padding-top:6px; padding-right:8px; }
.topbar .toplang a{ float:left; width:28px; height:20px; margin-left:10px; border-radius:3px; overflow:hidden; }
.topbar .toplang a img{ display:block; width:28px; height:20px; border-radius:3px; border:1px solid rgba(255,255,255,0.35); box-sizing:border-box; }
.topbar .toplang a.on img, .topbar .toplang a:hover img{ border-color:#0a9e48; box-shadow:0 0 0 2px #0a9e48; }

.topbox{ height:90px; }
.logo{ float:left; padding-top:18px; }
.logo img{ display:block; height:54px; }
.nav{ float:right; padding-top:32px; }
.nav ul li{ float:left; position:relative; }
.nav ul li > a{ display:block; height:32px; line-height:32px; padding:0 14px; font-size:14px; text-align:center; }
.nav ul li > a.on, .nav ul li > a:hover{ color:#0e9f47; }

/* 面包屑 */
.crumb{ height:42px; line-height:42px; color:#777; font-size:13px; border-bottom:1px solid #eee; margin-bottom:18px; }
.crumb a{ color:#777; }
.crumb a:hover{ color:#0e9f47; }
.crumb .sep{ margin:0 6px; color:#bbb; }

/* ====== 页面标题块 ====== */
.page-head{ padding: 8px 0 22px; border-bottom: 1px solid #eee; margin-bottom: 28px; }
.page-head h1{ font-size: 24px; line-height: 1.3; color: #1b1b1b; font-weight: 700; }
.page-head .subtitle{ margin-top:6px; color:#666; font-size:14px; }
.page-head .badge{ display:inline-block; padding:2px 10px; background:#0e9f47; color:#fff; font-size:12px; border-radius:10px; vertical-align:middle; margin-left:10px; }

/* ====== 品牌总览 (Brands overview) ====== */
.intro-block{ background:#f9f9f9; border-left:3px solid #0e9f47; padding:14px 18px; margin-bottom:30px; color:#444; font-size:14px; }
.brand-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 50px; }
.brand-card{ display:block; position:relative; background:#fff; border:1px solid #e6e6e6; border-radius:6px; overflow:hidden; transition: all .2s ease; }
.brand-card:hover{ border-color:#0e9f47; box-shadow: 0 4px 16px rgba(14,159,71,0.12); transform: translateY(-2px); }
.brand-card .cover{ display:block; width:100%; aspect-ratio: 4/3; overflow:hidden; background:#f4f4f4; }
.brand-card .cover img{ display:block; width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.brand-card:hover .cover img{ transform: scale(1.04); }
.brand-card .meta{ padding:12px 14px 14px; }
.brand-card .meta .name{ display:flex; align-items:center; justify-content:space-between; }
.brand-card .meta .name h3{ font-size:17px; color:#1b1b1b; font-weight:700; }
.brand-card .meta .name .tag{ font-size:11px; padding:2px 7px; border-radius:3px; background:#0e9f47; color:#fff; }
.brand-card .meta .cn{ color:#999; font-size:12px; margin-top:2px; }
.brand-card .meta .desc{ margin-top:8px; color:#555; font-size:12.5px; line-height:1.55; height: 4.6em; overflow:hidden; }
.brand-card .meta .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px dashed #eee; }
.brand-card .meta .foot .pdf{ color:#cd0f0f; font-size:12px; font-weight:bold; }
.brand-card .meta .foot .arrow{ color:#0e9f47; font-size:13px; font-weight:bold; }
.brand-card:hover .meta .foot .arrow{ text-decoration:underline; }

/* ====== 品牌详情页 (Brand detail) ====== */
.brand-hero{ display:grid; grid-template-columns: 360px 1fr; gap: 28px; background:#fff; border:1px solid #e6e6e6; border-radius:6px; padding:22px; margin-bottom:28px; }
.brand-hero .cover{ background:#f4f4f4; border-radius:4px; overflow:hidden; }
.brand-hero .cover img{ display:block; width:100%; height:auto; }
.brand-hero h1{ font-size: 28px; color:#1b1b1b; font-weight: 700; margin-bottom: 4px; }
.brand-hero .cn-name{ color:#888; font-size:14px; margin-bottom: 14px; }
.brand-hero .lead{ color:#444; font-size:14.5px; line-height:1.75; margin-bottom: 16px; }
.brand-hero .info-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size:13px; color:#555; margin-bottom: 18px; }
.brand-hero .info-list .k{ color:#999; }
.brand-hero .actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-download{ display:inline-flex; align-items:center; gap:8px; padding: 12px 24px; background:#0e9f47; color:#fff; border:1px solid #006d21; border-radius:4px; font-size:15px; font-weight:bold; transition: all .15s ease; }
.btn-download:hover{ background:#006d21; color:#fff; }
.btn-download .ico{ font-size:18px; }
.btn-secondary{ display:inline-flex; align-items:center; gap:8px; padding: 12px 24px; background:#fff; color:#0e9f47; border:1px solid #0e9f47; border-radius:4px; font-size:15px; font-weight:bold; }
.btn-secondary:hover{ background:#f1faf3; color:#006d21; border-color:#006d21; }

/* 产品预览画廊 */
.section-title{ display:flex; align-items:baseline; justify-content:space-between; padding-bottom: 10px; border-bottom: 1px solid #bebebe; margin-bottom: 20px; }
.section-title h2{ font-size: 20px; color: #1b1b1b; font-weight: 700; }
.section-title .sub{ color:#888; font-size:13px; }
.preview-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 50px; }
.preview-item{ background:#fff; border:1px solid #e6e6e6; border-radius:4px; overflow:hidden; }
.preview-item .img{ aspect-ratio: 4/3; overflow:hidden; background:#f4f4f4; cursor: zoom-in; }
.preview-item .img img{ display:block; width:100%; height:100%; object-fit:contain; padding:6px; }
.preview-item .cap{ padding:8px 10px; border-top:1px solid #eee; font-size:12px; color:#777; }
.preview-item .cap b{ color:#333; }

/* 规格 / 应用场景 */
.spec-block{ background:#f9f9f9; border-radius:6px; padding: 20px 22px; margin-bottom: 30px; }
.spec-block h3{ font-size: 16px; color:#1b1b1b; margin-bottom: 10px; padding-left:10px; border-left:3px solid #0e9f47; }
.spec-block ul{ padding-left: 6px; }
.spec-block li{ padding: 4px 0 4px 18px; position:relative; color:#444; font-size:13.5px; }
.spec-block li:before{ content:""; position:absolute; left:4px; top:12px; width:6px; height:6px; background:#0e9f47; border-radius:50%; }

/* footer */
.footer{ background:#1b1b1b; color:#fff; text-align:center; padding: 28px 16px; margin-top: 40px; font-size:13px; line-height:1.9; }
.footer a{ color:#fff; }
.footer a:hover{ color:#0e9f47; }
.footer .sep{ color:#555; margin: 0 8px; }

/* 预览浮水印（提醒这是预览版） */
.preview-tag{ position: fixed; right: 14px; bottom: 14px; background: #1b1b1b; color:#fff; padding: 8px 14px; border-radius: 30px; font-size: 12px; z-index: 9999; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.preview-tag b{ color:#ffd23f; }

/* === 产品列表页（与 cn.ci-kitchen.com/product/ 1:1 对齐） === */
.daohang{ height:42px; line-height:42px; margin-bottom:5px; }
.daohang a{ color:#0e9f47; }
.daohang a:hover{ text-decoration:underline; }

.pro_class{
  line-height:30px; padding:10px 14px; background:#f9f9f9; color:#999;
  margin-bottom:38px; border-radius: 6px;
}
.pro_class a{
  display:inline-block; padding:0 10px; height:28px; line-height:28px;
  border-radius:4px; margin: 2px 4px; color:#000; position:relative;
  transition: all .15s ease;
}
.pro_class a:hover{ background:#e6f7ec; color:#0e9f47; text-decoration:none; }
.pro_class a.on{ background:#cd0f0f; color:#fff; }
.pro_class a.on:hover{ background:#a30c0c; }
.pro_class a.new-cat{ background:#0e9f47; color:#fff; font-weight:700; }
.pro_class a.new-cat:hover{ background:#0b8a3d; }
.pro_class a.new-cat .new-badge{
  display:inline-block; background:#ffd23f; color:#1b1b1b;
  font-size:10px; font-weight:700; padding:1px 5px; border-radius:8px;
  margin-left:4px; vertical-align:middle; letter-spacing:.5px;
}

.pro_list{ margin-bottom:24px; }
.pro_list ul{ overflow:hidden; }
.pro_list ul li{
  display:block; float:left; width:239px; height:262px; overflow:hidden;
  padding-top:28px; border-bottom:1px #eee solid; border-right:1px #eee solid;
  background:#fff; text-align:center;
}
.pro_list ul li img{ display:block; height:110px; margin:0 auto 20px; max-width:200px; }
.pro_list ul li .t{ display:block; width:180px; margin:0 auto; font-size:12px; color:#cd0f0f; line-height:20px; font-weight:bold; }
.pro_list ul li .t2{ display:block; width:180px; margin:0 auto; font-size:12px; color:#0063ba; line-height:20px; }
.pro_list ul li .btn{ display:block; background:url(../img/view.png) center center no-repeat #f5f5f5; width:141px; height:31px; text-align:center; font-size:12px; color:#333; line-height:31px; margin:20px auto 0; border-radius:4px; }
.pro_list ul li .btn:hover{ background-color:#e6f7ec; color:#0e9f47; text-decoration:none; }
.pro_list ul li.li2{ width:239px; }

/* 新功能上線提示列 */
.preview-callout{
  display:flex; align-items:center; gap:16px; padding:18px 22px;
  background: linear-gradient(135deg, #e8fbf0 0%, #fff 100%);
  border:1px solid #b6e8c5; border-left:5px solid #0e9f47; border-radius:8px;
  margin-bottom:32px;
}
.preview-callout .ico{
  flex: 0 0 44px; height:44px; border-radius:50%; background:#0e9f47; color:#fff;
  font-size:24px; line-height:44px; text-align:center; font-weight:700;
}
.preview-callout .txt{ flex:1; font-size:14px; line-height:1.7; color:#1b1b1b; }
.preview-callout .txt b{ color:#0b8a3d; font-size:15px; }
.preview-callout .btn-go{
  flex: 0 0 auto; background:#0e9f47; color:#fff; padding:10px 22px;
  border-radius:24px; font-weight:700; font-size:14px; transition: all .15s ease;
}
.preview-callout .btn-go:hover{ background:#0b8a3d; color:#fff; text-decoration:none; transform: translateY(-1px); }

@media (max-width: 1024px){
  .pro_list ul li, .pro_list ul li.li2{ width: 33.33%; }
  .preview-callout{ flex-wrap:wrap; }
  .preview-callout .btn-go{ width:100%; text-align:center; }
}
@media (max-width: 768px){
  .pro_list ul li, .pro_list ul li.li2{ width: 50%; }
  .pro_class a{ font-size:13px; }
}
@media (max-width: 480px){
  .pro_list ul li, .pro_list ul li.li2{ width: 100%; border-right:none; }
}

/* === 入口页快速区块 === */
.quick-section h3{ font-size: 16px; margin: 28px 0 12px; color:#1b1b1b; padding-bottom:8px; border-bottom:1px solid #eee; }
.quick-section .qs-sub{ font-size: 12px; color:#999; font-weight: 400; margin-left: 8px; }
.ql-overlay{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:#fff; font-weight:800; font-size:20px; letter-spacing:2px; line-height:1.4; text-align:center; padding:14px; }

/* 响应式 */
@media (max-width: 1024px){
  .wrap{ width:auto; padding: 0 14px; }
  .brand-hero{ grid-template-columns: 1fr; }
  .brand-hero .cover{ max-width: 360px; }
}
@media (max-width: 768px){
  .topbar{ height:auto; line-height:1.5; padding:6px 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 12px; }
  .topbar .toptel, .topbar .toplang, .topbar .topsear{ float:none; height:auto; }
  .topbar .toplang{ padding:0; }
  .topbox{ height:auto; padding: 10px 0; }
  .logo{ float:none; text-align:center; padding:0; }
  .nav{ float:none; padding:6px 0 0; }
  .nav ul{ display:flex; flex-wrap:wrap; justify-content:center; }
  .nav ul li > a{ padding: 0 10px; font-size:13px; }
  .brand-grid, .preview-grid{ grid-template-columns: repeat(2, 1fr); }
  .page-head h1{ font-size: 20px; }
  .brand-hero h1{ font-size: 22px; }
}
@media (max-width: 480px){
  .brand-grid, .preview-grid{ grid-template-columns: 1fr; }
}