/* ==========================================================================
   产品详情 · Overview 组件（照搬 cookeryaki 站 ckp-sc / ckp-pg 版式）
   2026-10-26　用于铁板烧设备 34 个产品落地页的「详情介绍」：
     ① .ckp-sc-*  适用场所页：01 使用场所（3 列带边框卡片）+ 02 定制流程（A-E 圆图标）
     ② .ckp-pg-*  产品页：5 张产品视图（上 3 下 2，第 2 行限宽居中）
     ③ .dtl-gallery 6 张共用详情图（纵向居中堆叠）
   说明：
     · 尺寸、间距、字号、边框、灰阶全部沿用英文站原值，保证「一模一样」；
     · 只用强调色（编号 + SVG 图标描边）换成中文站主色 #c80000；
     · 一律两段式选择器（.ckp-sc .ckp-sc-xxx），压过 .artUm 里 h2/h3/h4/p 的单类规则。
   ========================================================================== */

/* ---------- ① 适用场所页 ---------- */
.ckp-sc { margin: 0; }
.ckp-sc .ckp-sc-sec + .ckp-sc-sec { margin-top: 44px; }
.ckp-sc .ckp-sc-no {
  display: block; text-align: center; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; color: #c80000; margin-bottom: 6px;
}
.ckp-sc h3.ckp-sc-h {
  font-size: 22px; font-weight: 700; color: #332d2d; line-height: 1.3;
  margin: 0; padding: 0 0 10px; border-bottom: 2px solid #332d2d; text-align: center;
}
/* 老站主题 umtheme.css 给 h2/h3 加过「左侧 3px 红竖条」伪元素与 15px 左内距，这里清掉 */
.ckp-sc h3.ckp-sc-h::before,
.ckp-sc h3.ckp-sc-h::after,
.ckp-pg h2.ckp-pg-h::before,
.ckp-pg h2.ckp-pg-h::after { content: none !important; display: none !important; }
.ckp-sc .ckp-sc-lead { font-size: 13.5px; color: #55504a; line-height: 1.75; margin: 18px 0 0; }
.ckp-sc .ckp-sc-sub { font-size: 15px; font-weight: 700; color: #332d2d; line-height: 1.45; margin: 26px 0 0; }

/* 01 使用场所：3 列卡片 */
.ckp-sc .ckp-sc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.ckp-sc .ckp-sc-cell {
  border: 1px solid #e6e2da; border-radius: 4px; background: #fff;
  padding: 15px 15px 16px;
  transition: background-color .2s ease, border-color .2s ease;
}
.ckp-sc .ckp-sc-cell:hover { background: #f5f4ef; border-color: #d8d5cd; }
.ckp-sc .ckp-sc-ct { font-size: 15px; font-weight: 700; color: #332d2d; line-height: 1.4; margin: 0; }
.ckp-sc .ckp-sc-cd { font-size: 12.5px; color: #6b6357; line-height: 1.62; margin: 7px 0 0; }

/* 定制流程 A-E */
.ckp-sc .ckp-sc-steps { display: grid; gap: 12px; margin-top: 22px; }
.ckp-sc .ckp-sc-step {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 15px; align-items: start;
  border: 1px solid #e6e2da; border-radius: 4px; background: #fff; padding: 15px 16px;
  transition: background-color .2s ease, border-color .2s ease;
}
.ckp-sc .ckp-sc-step:hover { background: #f5f4ef; border-color: #d8d5cd; }
.ckp-sc .ckp-sc-ico {
  grid-row: 1 / span 2; display: block; width: 48px; height: 48px; overflow: hidden;
  border: 1px solid #e6e2da; border-radius: 50%; background-color: #faf9f6;
  background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
  font-size: 0; line-height: 1; color: transparent;
}
.ckp-sc .ckp-sc-st { font-size: 15px; font-weight: 700; color: #332d2d; line-height: 1.45; margin: 2px 0 0; }
.ckp-sc .ckp-sc-sd { font-size: 13.5px; color: #55504a; line-height: 1.75; margin: 6px 0 0; }

/* 图标：A 设计与出图 / B 生产制造 / C 包装发运 / D 安装调试 / E 售后与培训 */
.ckp-sc .ckp-sc-ico--a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c80000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
.ckp-sc .ckp-sc-ico--b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c80000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 21h19'/%3E%3Cpath d='M5 21V9.6l4.8 3.1V9.6l4.8 3.1V9.6L19 15.5V21'/%3E%3C/svg%3E"); }
.ckp-sc .ckp-sc-ico--c { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c80000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.3 7 12 12l8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); }
.ckp-sc .ckp-sc-ico--d { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c80000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94z'/%3E%3C/svg%3E"); }
.ckp-sc .ckp-sc-ico--e { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c80000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }

/* 要点列表（板前牛肉饭等） */
.ckp-sc .ckp-sc-list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ckp-sc .ckp-sc-list li { position: relative; padding-left: 17px; font-size: 13.5px; color: #55504a; line-height: 1.72; }
.ckp-sc .ckp-sc-list li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px;
  border-radius: 50%; background: #c80000;
}
.ckp-sc .ckp-sc-list strong,
.ckp-sc .ckp-sc-tbl strong,
.ckp-sc .ckp-sc-sd strong { font-weight: 700; color: #332d2d; }

/* 对照表 */
.ckp-sc .ckp-sc-tbl { margin-top: 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ckp-sc .ckp-sc-tbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ckp-sc .ckp-sc-tbl th,
.ckp-sc .ckp-sc-tbl td { border: 1px solid #e6e2da; padding: 10px 13px; text-align: left; vertical-align: top; line-height: 1.65; }
.ckp-sc .ckp-sc-tbl th { background: #faf9f6; color: #332d2d; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; }
.ckp-sc .ckp-sc-tbl td { color: #55504a; }
.ckp-sc .ckp-sc-tbl tbody tr:hover td { background: #f5f4ef; }

/* 两栏配图 */
.ckp-sc .ckp-sc-media { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.ckp-sc .ckp-sc-fig { margin: 0; }
.ckp-sc .ckp-sc-fig img { display: block; width: 100%; height: auto; border: 1px solid #e6e2da; border-radius: 4px; }
.ckp-sc .ckp-sc-fig figcaption { font-size: 12.5px; color: #6b6357; line-height: 1.6; margin-top: 8px; text-align: center; }

/* ---------- ② 产品页：5 张产品视图 ---------- */
.ckp-pg { --ckp-pg-gap: 22px; margin: 0; }
.ckp-pg h2.ckp-pg-h {
  font-size: 21px; font-weight: 700; color: #332d2d; line-height: 1.4;
  margin: 0 0 26px; padding: 0 0 12px; border-bottom: 2px solid #332d2d; text-align: center;
}
.ckp-pg .ckp-pg-row { display: grid; gap: var(--ckp-pg-gap); }
.ckp-pg .ckp-pg-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ckp-pg .ckp-pg-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ckp-pg .ckp-pg-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: calc((100% - 2 * var(--ckp-pg-gap)) / 3 * 2 + var(--ckp-pg-gap));
  margin-left: auto; margin-right: auto;
}
.ckp-pg .ckp-pg-row + .ckp-pg-row { margin-top: 28px; }
.ckp-pg .ckp-pg-fig { margin: 0; }
.ckp-pg .ckp-pg-fig img { display: block; width: 100%; height: auto; }
.ckp-pg .ckp-pg-fig figcaption {
  margin-top: 12px; text-align: center; font-size: 13px; font-weight: 700;
  color: #332d2d; line-height: 1.5;
}
/* 概述段（产品页正文第一段） */
.pd-lead { font-size: 14.5px; color: #55504a; line-height: 1.85; margin: 0 0 26px; }

/* ---------- ③ 6 张共用详情图 ---------- */
.dtl-gallery { display: flex; flex-direction: column; align-items: center; margin: 30px 0 0; }
.dtl-gallery img { display: block; width: 100%; max-width: 750px; height: auto; }
.dtl-gallery img + img { margin-top: 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 991px) {
  .ckp-sc .ckp-sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ckp-sc .ckp-sc-sec + .ckp-sc-sec { margin-top: 32px; }
  .ckp-sc h3.ckp-sc-h { font-size: 18px; padding-bottom: 8px; }
  .ckp-sc .ckp-sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
  .ckp-sc .ckp-sc-cell { padding: 12px 12px 13px; }
  .ckp-sc .ckp-sc-ct { font-size: 13.5px; }
  .ckp-sc .ckp-sc-cd { font-size: 12px; margin-top: 6px; }
  .ckp-sc .ckp-sc-steps { gap: 10px; margin-top: 16px; }
  .ckp-sc .ckp-sc-step { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 13px; }
  .ckp-sc .ckp-sc-ico { width: 40px; height: 40px; background-size: 19px 19px; }
  .ckp-sc .ckp-sc-st { font-size: 14px; }
  .ckp-sc .ckp-sc-sd { font-size: 13px; }
  .ckp-sc .ckp-sc-sub { font-size: 14px; margin-top: 20px; }
  .ckp-sc .ckp-sc-media { grid-template-columns: 1fr; gap: 10px; }
  .ckp-sc .ckp-sc-tbl table { font-size: 12.5px; min-width: 620px; }
  .ckp-pg { --ckp-pg-gap: 14px; }
  .ckp-pg h2.ckp-pg-h { font-size: 17px; margin-bottom: 18px; padding-bottom: 10px; }
  .ckp-pg .ckp-pg-row--3,
  .ckp-pg .ckp-pg-row--2,
  .ckp-pg .ckp-pg-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; }
  .ckp-pg .ckp-pg-row + .ckp-pg-row { margin-top: 20px; }
  .ckp-pg .ckp-pg-fig figcaption { font-size: 12px; margin-top: 8px; }
}
@media (max-width: 479px) {
  .ckp-sc .ckp-sc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   ④ 商用厨房设备详情（披萨炉 / 烤鱼炉 / 烧烤炉）2026-10-26
     .dtl-kit      正文外壳：标题、导语、视频、要点列表
     .ckp-pg       图组沿用上面已定义的 3 列 / 2 列栅格
   ========================================================================== */
.dtl-kit { margin: 0; }

/* 标题：清掉老主题 h2 的左侧红竖条与左内距，统一为居中 + 下框线 */
.dtl-kit h2 {
  font-size: 20px; font-weight: 700; color: #332d2d; line-height: 1.35;
  margin: 34px 0 0; padding: 0 0 10px; border-bottom: 2px solid #332d2d;
  text-align: center; letter-spacing: .01em;
}
.dtl-kit h2::before, .dtl-kit h2::after { content: none !important; display: none !important; }
.dtl-kit h2:first-child { margin-top: 0; }

.dtl-kit h3 {
  font-size: 15px; font-weight: 700; color: #332d2d; line-height: 1.5;
  margin: 22px 0 0; padding: 0; text-align: left;
}
.dtl-kit h3::before, .dtl-kit h3::after { content: none !important; display: none !important; }

.dtl-kit p { font-size: 13.5px; color: #55504a; line-height: 1.8; margin: 14px 0 0; }
.dtl-kit .dtl-lead { font-size: 14px; color: #332d2d; line-height: 1.85; margin: 0; }

/* 视频：默认不预载，点了才拉流，避免一进页面就下 100MB */
.dtl-kit .dtl-video {
  margin: 22px 0 0; background: #14100d; border-radius: 4px; overflow: hidden;
  line-height: 0;
}
.dtl-kit .dtl-video video {
  display: block; width: 100%; height: auto; max-height: 540px; background: #14100d;
}

/* 图组 */
.dtl-kit .ckp-pg { margin: 22px 0 0; }
.dtl-kit .ckp-pg-fig img { border: 1px solid #e6e2da; border-radius: 4px; background: #fbfaf7; }

/* 要点列表 */
.dtl-kit .dtl-list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.dtl-kit .dtl-list li {
  position: relative; padding-left: 17px; font-size: 13.5px; color: #55504a; line-height: 1.75;
}
.dtl-kit .dtl-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: #c80000;
}
.dtl-kit .dtl-list li strong { font-weight: 700; color: #332d2d; }

/* 表格式参数对比（沿用 ckp-pcmp 外观） */
.dtl-kit .dtl-tbl { margin: 20px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dtl-kit .dtl-tbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dtl-kit .dtl-tbl th, .dtl-kit .dtl-tbl td {
  border: 1px solid #e6e2da; padding: 9px 12px; text-align: left; vertical-align: top; line-height: 1.6;
}
.dtl-kit .dtl-tbl thead th { background: #faf9f6; color: #332d2d; font-weight: 700; font-size: 12.5px; }
.dtl-kit .dtl-tbl tbody th { background: #fdfcfa; color: #332d2d; font-weight: 700; white-space: nowrap; }
.dtl-kit .dtl-tbl td { color: #55504a; }
.dtl-kit .dtl-tbl th span { display: block; font-weight: 400; font-size: 11.5px; color: #8a8175; margin-top: 2px; }

/* 备注 */
.dtl-kit .dtl-note { font-size: 12.5px; color: #8a8175; line-height: 1.7; margin: 12px 0 0; }

@media (max-width: 991px) {
  .dtl-kit h2 { font-size: 18px; margin-top: 28px; }
  .dtl-kit .dtl-tbl table { min-width: 620px; }
}

/* 分类页（烧烤炉）图卡下的产品说明：与容器边缘留出呼吸位 */
.cat-lead .dtl-kit { padding: 0 18px; }
.cat-lead .dtl-kit h3 { margin-top: 26px; }
.cat-lead .dtl-kit h3:first-child { margin-top: 30px; }
.cat-lead .dtl-kit p { margin-top: 10px; }
@media (max-width: 991px) {
  .cat-lead .dtl-kit { padding: 0 8px; }
}
