/* 喜莱收收银系统详情页专属样式：6 个 sections（本页无 JS；main 全局 common.css 先行，home.css 管轮播公告） */

/* ============ cashier 字体：阿里普惠体按字重映射（族在 common.css 注册） ============ */
[class*="ch-"] {
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ============ Banner ch-banner（区间[695,1079]高384） ============ */
/* 去图层化：section min-height:384＋overflow:hidden；bg 盒定宽 1920 居中（背景定则 B，cover 不动，
   1920 下逐像素一致，窄屏对称裁边）；stage 100%+max-width:1920px；
   content 100%+max-width:1200px 居中承接标题（标题左对齐，用内容列 left:0，1920 下内容左缘 360 不动）；
   无 z-index；无断点 */
.ch-banner {
  position: relative;
  width: 100%;
  min-height: 384px;
  overflow: hidden;
  scroll-margin-top: 88px; /* 轮播直达锚：吸顶 72＋16，id="chb" */
}

.ch-banner__bg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 1920px;
  min-height: 384px;
  height: 100%;
  background: url('/images/cashier/cashier-29bg-3026.jpg') center / cover no-repeat;
}

.ch-banner__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-height: 384px;
  margin: 0 auto;
}

.ch-banner__content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 100%;
  max-width: 1200px;
  min-height: 384px;
}

/* 标题：内容列(0,121) 560×97，80px #1A1A2E 左 */
.ch-banner__title {
  position: absolute;
  left: 0;
  top: 121px;
  width: 560px;
  height: 97px;
  margin: 0;
  font-size: 80px;
  line-height: 97px;
  font-weight: 400;
  color: #1a1a2e;
  text-align: left;
  white-space: nowrap;
}

/* 副标题：内容列(0,244) 260×24，20px #1890FF 左 */
.ch-banner__sub {
  position: absolute;
  left: 0;
  top: 244px;
  width: 260px;
  height: 24px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #1890ff;
  text-align: left;
  white-space: nowrap;
}

/* ============ 产品概述 ch-overview（区间[1079,1734]高655） ============ */
/* 去图层化：整组改正常流——section 加 box-sizing＋padding-top:67（原组 top），
   组改 relative＋margin:0 auto 居中（宽 659）；组内标题/蓝条/配图/描述相对组不动；
   描述去 height 留 min-height:99（内容长撑组）；section 保 min-height:655；
   头左对齐保持特有，不用 sectionHead；无 z-index；无断点 */
.ch-overview {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 655px;
  padding-top: 67px;
}

.ch-overview__group {
  position: relative;
  width: 664px;
  min-height: 556px;
  margin: 0 auto;
}

/* 标题：组内(258,0) 136×41，34px #333 居中 */
.ch-overview__title {
  position: absolute;
  left: 258px;
  top: 0;
  width: 136px;
  height: 41px;
  margin: 0;
  font-size: 34px;
  line-height: 41px;
  font-weight: 400;
  text-align: center;
  color: #333;
  white-space: nowrap;
}

/* 蓝条：组内(231,53) 190×6 #1890FF */
.ch-overview__line {
  position: absolute;
  left: 231px;
  top: 53px;
  width: 190px;
  height: 6px;
  background: #1890ff;
}

/* 配图：组内(0,85) 653×340 r12 cover（原图 2848×1600；右下“豆包AI生成”水印占底部约 64px，
   cover 按 653 宽渲染裁掉上下各 13.5px，居中时水印剩约 1px 漏出；改上对齐，27px 全裁底部，水印净空） */
.ch-overview__img {
  position: absolute;
  left: 0;
  top: 85px;
  width: 653px;
  height: 340px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* 描述：组内(4,457) 664×99（三行不断行），24px/33px #555 pre-line（源码换行保留，原案分行；
   去 height 留 min-height；第二行 27 全角字＋空格≈656px，原 655 盒在浏览器溢出 1 字 cascade 成四行，
   盒放宽到 664 保三行，组同宽跟进） */
.ch-overview__desc {
  position: absolute;
  left: 4px;
  top: 457px;
  width: 664px;
  min-height: 99px;
  margin: 0;
  font-size: 24px;
  line-height: 33px;
  font-weight: 400;
  color: #555;
  white-space: pre-line;
}

/* ============ 通用区块头 .section-head（cashier 复用结构；几何走 inline，线色走 inline lineColor） ============ */
.section-head {
  margin: 0;
  padding: 0;
}

.section-head__title {
  margin: 0 auto;
  padding: 0;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.section-head__sub {
  margin: 14px auto 0;
  padding: 0;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.section-head__line {
  height: 4px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  padding: 0;
}

/* ============ 滚动显现 reveal（同 shequo2o/life 最小一次性方案，由 common.js 全局 Observer 驱动加 .in） ============ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============ 核心功能 ch-features（模块高470，底 #F8F9FD） ============ */
/* 去图层化：头换 sectionHead（标题 34 #1a1a2e／线 190×6 #1890ff／缝 12），
   section 加 box-sizing＋padding-top:35（原标题 top:35），头高 59；
   六卡改 grid 3 列 384px、列缝 24、行缝 40，卡片区 margin-top:45（139−94）；
   卡改 relative；卡内圆/图标/标题/描述相对卡不动；stage 去 min-height；
   hover 上浮照 home.css:634 产品卡值；无 z-index；无断点 */
.ch-features {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 470px;
  padding-top: 35px;
  background: #f8f9fd;
}

.ch-features__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.ch-features__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 384px);
  column-gap: 24px;
  row-gap: 40px;
  width: 100%;
  max-width: 1200px;
  margin: 45px auto 0;
}

.ch-features__cell {
  position: relative;
  width: 384px;
  height: 130px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ch-features__cell:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(37, 99, 200, 0.25);
}

/* 圆底：24,26 79×79 #E8F1FF */
.ch-features__circle {
  position: absolute;
  left: 24px;
  top: 26px;
  width: 79px;
  height: 79px;
  border-radius: 50%;
  background: #e8f1ff;
}

/* 图标：几何走 inline（含小数宽高原值） */
.ch-features__icon {
  position: absolute;
  object-fit: contain;
}

/* 格标题：20px #1A1A2E；描述 16px #666 pre-line */
.ch-features__cell-title {
  position: absolute;
  height: 24px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #1a1a2e;
  white-space: nowrap;
}

.ch-features__cell-desc {
  position: absolute;
  margin: 0;
  font-size: 16px;
  line-height: 19.4px;
  font-weight: 400;
  color: #666;
  white-space: pre-line;
}

/* ============ 产品优势 ch-adv（区间[2204,2502]高298） ============ */
/* 去图层化：头换 sectionHead（标题 34 #1a1a2e／线 190×6 #1890ff／缝 12），
   section 加 box-sizing＋padding-top:35（原标题 top:35），头高 59；
   四卡改 grid 4 列 285px、列缝 20（第三卡 612 与均缝 610 差 2，
   nth-child(3) left:2px 归整，同 life-advantages 做法），卡片区 margin-top:64（158−94）；
   蓝带 #D5E4FC 1920×242 顶对齐 bg 盒定宽居中，卡片 z-index:1 压带（原案交叠意图保留）；
   卡改 relative；卡内圆/数字/标题/描述相对卡不动；stage 去 min-height；
   hover 上浮照 home.css:634 产品卡值（无图不缩放）；无 z-index 叠顺序（卡压带除外）；无断点 */
.ch-adv {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 298px;
  padding-top: 35px;
}

.ch-adv__bg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 1920px;
  height: 242px;
  background: #d5e4fc;
}

.ch-adv__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.ch-adv__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 285px);
  column-gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 64px auto 0;
}

.ch-adv__card {
  position: relative;
  z-index: 1;
  width: 285px;
  height: 140px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ch-adv__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(37, 99, 200, 0.25);
}

.ch-adv__card:nth-child(3) {
  left: 2px;
}

/* 圆底：119,16 48×48 #E8F4FD；数字 32px #1890FF */
.ch-adv__icon {
  position: absolute;
  left: 119px;
  top: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e8f4fd;
}

.ch-adv__num {
  position: absolute;
  left: 133px;
  top: 20px;
  height: 39px;
  margin: 0;
  font-size: 32px;
  line-height: 39px;
  font-weight: 400;
  color: #1890ff;
}

.ch-adv__card-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 74px;
  height: 19px;
  margin: 0;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  color: #1a1a2e;
  text-align: center;
  white-space: nowrap;
}

.ch-adv__card-desc {
  position: absolute;
  top: 100px;
  height: 15px;
  margin: 0;
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #888;
  text-align: center;
  white-space: nowrap;
}

/* ============ 应用场景 ch-scene（区间[2502,3387]高885＋顶部 56 重叠） ============ */
/* 去图层化：底图 1920×941 原 top:-56 探入优势区，流式保留重叠——section 用 margin-top:-56 上探
   （padding-top:123＝67+56），bg 改 top:0 同尺寸同图同 center-bottom，页面相对位置与原一致；
   section overflow:hidden 只裁两边（背景定则 B），不裁重叠；
   头换 sectionHead（标题 34 #1a1a2e／线 190×6 #1890ff／缝 12），头高 59；
   四卡改 grid 4 列 270px、列缝 40（310−270=40，4×270+3×40=1200 整），卡片区 margin-top:64；
   卡改 relative；卡内图标（白 glyph 反白）/标题/描述相对卡不动；stage 去 min-height；
   流程图改流式居中（margin-top:64 即 454−390）；section 保 min-height:941（885+56）；
   hover 上浮照 home.css:634 产品卡值；无 z-index；无断点 */
.ch-scene {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 941px;
  margin-top: -56px;
  padding-top: 123px;
  overflow: hidden;
}

.ch-scene__bg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 1920px;
  height: 941px;
  background: url('/images/home/product-bg-a75b1f67.png') no-repeat center bottom / cover;
}

.ch-scene__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.ch-scene__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 270px);
  column-gap: 40px;
  width: 100%;
  max-width: 1200px;
  margin: 64px auto 0;
}

.ch-scene__card {
  position: relative;
  width: 270px;
  height: 200px;
  border-radius: 8px;
  background: linear-gradient(180deg, #2d72ff 0%, #1954cb 100%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ch-scene__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(37, 99, 200, 0.25);
}

.ch-scene__card-icon {
  position: absolute;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.ch-scene__card-title {
  position: absolute;
  left: 95px;
  top: 106px;
  width: 80px;
  height: 24px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.ch-scene__card-desc {
  position: absolute;
  top: 146px;
  height: 17px;
  margin: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #e0ebff;
  text-align: center;
  white-space: nowrap;
}

/* 流程图：647,454 650×400 r12 cover */
.ch-scene__flow {
  width: 650px;
  height: 400px;
  margin: 64px auto 0;
  border-radius: 12px;
  overflow: hidden;
  background: url('/images/cashier/cashier-liucheng.jpg') center / cover no-repeat;
}

/* ============ 业务详情段 ch-detail（区间[3387,3924]高537） ============ */
/* 去图层化：头无下划线不进 sectionHead，h2 居中手写；section 加 box-sizing＋padding-top:36；
   三卡改 grid 3 列 205px、列缝 120（内容列居中偏移 172.5，与原内容列 173 一致），
   卡片区 margin-top:52.5（129.5−36−41，.5 分数原样保留）；
   卡改 relative；卡内幽灵框/图标/文字相对卡不动；
   按钮改流式居中（margin-top:63 即 389−326，flex 居中保留，不加跳转）；
   底渐变直接画 section；section 保 min-height:537；stage 去 min-height；
   hover 上浮照 home.css:634 产品卡值＋图标缩放；无 z-index；无断点 */
.ch-detail {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 537px;
  padding-top: 36px;
  background: linear-gradient(180deg, #eef6fe 0%, #fbfbfb 100%);
}

.ch-detail__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* 标题：726,36 476×41，34px #1A1A2E 居中（726+238=964≈960） */
.ch-detail__title {
  width: 476px;
  height: 41px;
  margin: 0 auto;
  font-size: 34px;
  line-height: 41px;
  font-weight: 400;
  color: #1a1a2e;
  text-align: center;
  white-space: nowrap;
}

.ch-detail__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 205px);
  column-gap: 120px;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: 52.5px auto 0;
}

.ch-detail__card {
  position: relative;
  width: 205px;
  height: 196.5px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ch-detail__card:hover {
  transform: translateY(-4px);
}

.ch-detail__card:hover .ch-detail__icon {
  transform: scale(1.2);
}

/* 幽灵框：0,118.5 205×78 透明＋1px #2B7FFF＋r12 */
.ch-detail__ghost {
  position: absolute;
  left: 0;
  top: 118.5px;
  width: 205px;
  height: 78px;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid #2b7fff;
  border-radius: 12px;
  pointer-events: none;
}

.ch-detail__icon {
  position: absolute;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* 文字：31,143.5 144×29，24px #2B7FFF 居中 */
.ch-detail__text {
  position: absolute;
  left: 31px;
  top: 143.5px;
  width: 144px;
  height: 29px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  color: #2b7fff;
  text-align: center;
  white-space: nowrap;
}

/* 按钮：280×52 胶囊渐变，flex 居中 */
.ch-detail__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 52px;
  margin: 63px auto 0;
  border-radius: 26px;
  background: linear-gradient(90deg, #1890ff 0%, #40a9ff 100%);
}

.ch-detail__btn-text {
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
