/* 内容种草社区电商系统详情页专属样式：4 个 sections（本页无 JS；main 全局 common.css 先行，home.css 管轮播公告） */

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

/* ============ 通用区块头 .section-head（grass 复用结构；几何走 inline） ============ */
.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（同站最小一次性方案，由 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;
  }
}

/* ============ Banner grs-banner（区间[697,1347]高650） ============ */
/* 去图层化：section min-height:650＋overflow:hidden；bg 盒定宽 1920 居中（背景定则 B，
   center/cover 不动，1920 下逐像素一致，窄屏对称裁边）；stage 100%+max-width:1920px 直挂文案
   （标题左对齐 left:256px，top 不变）；无按钮（原案无，不虚构）；无 z-index；无断点 */
.grs-banner {
  position: relative;
  width: 100%;
  min-height: 650px;
  overflow: hidden;  scroll-margin-top: 88px; /* 首页产品直达锚：吸顶 72＋16 */
}

.grs-banner__bg {
  position: absolute;
  left: max(0px, calc(50% - 960px));
  top: 0;
  width: 1920px;
  height: 650px;
  background: url('/images/grass/grs-banner-5584.jpg') center / cover no-repeat;
}

/* v2 坐标统一：底图与 stage 同用 max(0px, 50% - 960px)——>=1920 居中，<1920 左缘贴视口只裁右边，
   两层同一坐标原点，文案不再随浏览器宽度相对底图漂移 */
.grs-banner__stage {
  position: relative;
  width: 1920px;
  min-height: 650px;
  margin-left: max(0px, calc(50% - 960px));
}

/* 标题：(256,229) 560×68，56px #1D43A4 左 */
.grs-banner__title {
  position: absolute;
  left: 256px;
  top: 229px;
  width: 560px;
  height: 68px;
  margin: 0;
  font-size: 56px;
  line-height: 68px;
  font-weight: 400;
  color: #1d43a4;
  text-align: left;
  white-space: nowrap;
}

/* 副标题：(256,336) 624×29，24px #000 左 */
.grs-banner__sub {
  position: absolute;
  left: 256px;
  top: 336px;
  width: 624px;
  height: 29px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  color: #000;
  text-align: left;
  white-space: nowrap;
}

/* ============ 经营闭环（拆三段：logic 0..471／modules 471..1090／advs 1090..1511，总 1511 不变） ============ */
/* 去图层化：色带纯色 #EBF3FF 在 471 处一刀两断（上截 logic 底 288..471，下截 modules 顶 0..215，无缝）；
   三段各保 min-height（471／619／421）；stage 去 min-height；
   reveal 由 common.js 驱动（逐段触发）；hover 步骤圆/卡片上浮；无 z-index；无断点 */
/* 去图层化：logic 头换 sectionHead（标题 34／线 510×5／缝 12），padding-top:67，头高 58；
   白板 margin-top:59；modules 头换 sectionHead（标题 38／线 570×5／缝 12），头高 63，
   四卡 grid margin-top:59；adv 头换 sectionHead（标题 34／线 570×5／缝 12），头高 58，
   三卡 grid margin-top:51；三段 min-height 471／619／421，总 1511 不变 */
.grs-logic {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 471px;
  padding-top: 67px;
  background: #f3f8fe;
}

.grs-logic__band {
  position: absolute;
  left: 0;
  top: 288px;
  bottom: 0;
  width: 100%;
  background: #ebf3ff;
}

.grs-modules {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 619px;
  background: #f3f8fe;
}

.grs-modules__band {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 215px;
  background: #ebf3ff;
}

.grs-advs {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 421px;
  background: #f3f8fe;
}

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

/* 逻辑白板：1200×220 r24（整幅展示板，静态不 hover；内改 flex 流：边垫 88/89＋4 节点＋3 连接段锁死 178/178/171；
 * 连接段内容居中（±3.5px 以内）；线＋三角并排（Figma 原箭头，10 等大）；图标嵌进圆；步骤圆 hover 保留） */
.grs-loop__panel {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  width: 1200px;
  height: 220px;
  margin: 59px auto 0;
  padding: 30px 89px 0 88px;
  background: #fff;
  border-radius: 24px;
}

/* 逻辑步骤列：圆 100 居中置顶＋标题＋描述（纵缝 17/11：117−100／150−139；宽走数据） */
.grs-loop__step {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grs-loop__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #e0f2fe;
  transition: transform 0.3s ease;
}

.grs-loop__step:hover .grs-loop__circle {
  transform: translateY(-4px);
}

.grs-loop__icon {
  display: block;
  object-fit: contain;
}

.grs-loop__step-title {
  margin: 17px 0 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: #1e293b;
  text-align: center;
  white-space: nowrap;
}

.grs-loop__step-desc {
  margin: 11px 0 0;
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #64748b;
  text-align: center;
  white-space: nowrap;
}

/* 连接段锁死（--1/--2:178，--3:171）；线＋端点并排居中；线中 112 对缝 */
.grs-loop__conn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10px;
  margin-top: 77px;
}

.grs-loop__conn--1 { width: 178px; }
.grs-loop__conn--2 { width: 178px; }
.grs-loop__conn--3 { width: 171px; }

/* 连接线/端点改纯 CSS（原 100×4/#0284c7 dashed 图＋10 圆点图，按像素取色；img 退役）： */
.grs-loop__line {
  width: 100px;
  height: 0;
  border-top: 4px dashed #0284c7;
}

.grs-loop__arrow {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid #0284c7;
}

/* 模块四卡：580×200 r16 白底 */
.grs-loop__mods {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 580px);
  column-gap: 40px;
  row-gap: 30px;
  width: 100%;
  max-width: 1200px;
  margin: 59px auto 0;
}

.grs-loop__mod-card {
  position: relative;
  width: 580px;
  height: 200px;
  background: #fff;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.grs-loop__mod-icon {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #f1f5f9;
  border-radius: 16px;
}

.grs-loop__mod-glyph {
  position: absolute;
  object-fit: contain;
}

.grs-loop__mod-title {
  position: absolute;
  height: 27px;
  margin: 0;
  font-size: 22px;
  line-height: 27px;
  font-weight: 400;
  color: #1e293b;
  text-align: left;
  white-space: nowrap;
}

.grs-loop__mod-desc {
  position: absolute;
  margin: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #64748b;
  text-align: left;
  white-space: pre-line;
}

/* 优势三卡：370×280 r20（底色走数据） */
.grs-loop__advs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 370px);
  column-gap: 45px;
  width: 100%;
  max-width: 1200px;
  margin: 51px auto 0;
}

.grs-loop__adv-card {
  position: relative;
  width: 370px;
  height: 280px;
  border-radius: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.grs-loop__adv-big {
  position: absolute;
  height: 58px;
  margin: 0;
  font-size: 48px;
  line-height: 58px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.grs-loop__adv-sub {
  position: absolute;
  height: 24px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #bae6fd;
  text-align: center;
  white-space: nowrap;
}

.grs-loop__adv-line {
  position: absolute;
  height: 17px;
  margin: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #e0f2fe;
  text-align: center;
  white-space: nowrap;
}

/* ============ 产品介绍 grs-intro（区间[2858,3493]高635，底 #FCFCFC） ============ */
/* 去图层化：头换 sectionHead（标题 34 #0f172a／线 152×5 #0284c7／缝 13，无副标题），
   section 加 box-sizing＋padding-top:35（原标题 top），头高 59；
   线框整图改流式居中（977×474，margin-top:35 即 129−94）；
   stage 去 min-height；section 保 min-height:635；reveal 由 common.js 驱动；
   整图静态不 hover；无 z-index；无断点 */
.grs-intro {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 635px;
  padding-top: 35px;
  background: #fcfcfc;
}

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

/* 线框图改活字 SVG 内联（977×474 精确尺寸直出，Figma 原稿 4 段 <text>；text 族指普惠体，12px/400 落 55-Regular） */
.grs-intro__wireframe {
  display: block;
  width: 977px;
  height: 474px;
  margin: 35px auto 0;
}

.grs-intro__wireframe text {
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ============ 种草业务 grs-cats（区间[3493,4082]高589，底带 #F3F8FE） ============ */
/* 去图层化：头换 sectionHead（标题 34 #0f172a／线 646×5 #0284c7／缝 13，无副标题），
   section 加 box-sizing＋padding-top:35（原标题 top），头高 59；
   四卡改 grid 4 列 280px、列缝 26 居中（缝 28/25/27，最大差 2px 可忽略），
   卡片区 margin-top:59（153−94）；卡改 relative；
   卡内灰底/黑底/头图/标题/三行相对卡不动（灰黑两层照缓存保留）；
   stage 去 min-height；section 保 min-height:589；reveal 由 common.js 驱动；
   hover 卡上浮＋图缩放（overflow:hidden 防溢出）；无 z-index；无断点 */
.grs-cats {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 589px;
  padding-top: 35px;
  background: #f3f8fe;
}

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

.grs-cats__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 280px);
  column-gap: 26px;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: 59px auto 0;
}

/* 业务卡：280×340 r16 白底 */
.grs-cats__card {
  position: relative;
  width: 280px;
  height: 340px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* 灰底 280×200＋黑底 260×200 r12 照缓存保留两层，顶图盖上露底边 */
.grs-cats__pic {
  position: absolute;
  left: 0;
  top: 0;
  width: 280px;
  height: 184px;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
  transition: transform 0.3s ease;
}

.grs-cats__card:hover .grs-cats__pic {
  transform: scale(1.2);
}

.grs-cats__card-title {
  position: absolute;
  left: 24px;
  top: 202px;
  height: 24px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #1e293b;
  text-align: left;
  white-space: nowrap;
}

.grs-cats__desc {
  position: absolute;
  left: 24px;
  height: 17px;
  margin: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #64748b;
  text-align: left;
  white-space: nowrap;
}

.grs-cats__desc--l1 { top: 245px; }
.grs-cats__desc--l2 { top: 273px; }
.grs-cats__desc--l3 { top: 301px; }