/* 全渠道社区团购系统详情页专属样式：5 个 sections（本页无 JS；main 全局 common.css 先行，home.css 管轮播公告） */

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

/* ============ 通用区块头 .section-head（groupbuy 复用结构；几何走 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 gb-banner（相对[696,1346]高650） ============ */
/* 去图层化：section min-height:650＋overflow:hidden；bg 盒定宽 1920 居中（背景定则 B，
   bottom/cover 不动，1920 下逐像素一致，窄屏对称裁边）；stage 100%+max-width:1920px 直挂文案
   （标题左对齐 left:206px，top 不变）；组221 UI 失误已排除；无 z-index；无断点 */
.gb-banner {
  position: relative;
  width: 100%;
  min-height: 650px;
  overflow: hidden;  scroll-margin-top: 88px; /* 首页产品直达锚：吸顶 72＋16 */
}

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

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

/* 标题：(206,244) 504×68，56px #2A5FC8 左 */
.gb-banner__title {
  position: absolute;
  left: 206px;
  top: 244px;
  width: 504px;
  height: 68px;
  margin: 0;
  font-size: 56px;
  line-height: 68px;
  font-weight: 400;
  color: #2a5fc8;
  text-align: left;
  white-space: nowrap;
}

/* 副标题：(206,351) 706×29，24px #0C3D7A 左 */
.gb-banner__sub {
  position: absolute;
  left: 206px;
  top: 351px;
  width: 706px;
  height: 29px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  color: #0c3d7a;
  text-align: left;
  white-space: nowrap;
}

/* ============ 品类 gb-cats（相对[1346,1830]高484＋跨区底图） ============ */
/* 去图层化：头换 sectionHead（标题 34 #111827／线 544×5 #10b981／缝 12，无副标题），
   section 加 box-sizing＋padding-top:67（原标题 top），头高 58；
   四卡改 grid 4 列 270px、列缝 40 均匀（930+270=1200 整，无需垫片），
   卡片区 margin-top:59（184−125）；卡改 relative；
   卡2/3/4 灰黑占位不搬（真图全盖住，XD 垃圾）；卡内图/标题/双行相对卡不动；
   跨模块底图 absolute top:0 宽 100%×2540 cover 置顶，z-index:-1 沉底，
   section 不设 hidden 只纵向溢出（flow 渐变盖／features 透明透出／adv 纯色盖，与原案一致）；
   stage 去 min-height；section 保 min-height:500（484＋16 下垫，卡底齐平留阴影位）；
   reveal 由 common.js 驱动；hover 卡上浮＋图缩放；无断点 */
.gb-cats {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 500px;
  padding-top: 67px;
}

.gb-cats__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2540px;
  object-fit: cover;
  object-position: top center;
  z-index: -1;
}

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

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

/* 品类卡：270×300 白底 r12（静止无影，hover 起影） */
.gb-cats__card {
  position: relative;
  width: 270px;
  height: 300px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.gb-cats__pic {
  position: absolute;
  left: 0;
  top: 0;
  width: 270px;
  height: 165px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  transition: transform 0.3s ease;
}

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

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

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

.gb-cats__desc--l1 { top: 234px; }
.gb-cats__desc--l2 { top: 260px; }

/* ============ 功能 gb-feats（相对[1830,2333]高503；底透明，品类跨区底图垫底） ============ */
/* 去图层化：头换 sectionHead（标题 34 #1a1a2e／线 190×6 #1890ff／缝 12，无副标题；
   标题原 left:893 与居中 960 差 1px 系取整噪声）；
   section 加 box-sizing＋padding-top:67（原标题 top），头高 59；
   六卡改 grid 3 列 384px、列缝 24、行缝 40，卡片区 margin-top:45（171−126）；
   卡改 relative；卡内圆/手拼 glyph/标题/双行相对卡不动；
   stage 去 min-height；section 保 min-height:503；reveal 由 common.js 驱动；
   hover 卡上浮（图标不动）；无 z-index；无断点 */
.gb-feats {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 503px;
  padding-top: 67px;
}

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

.gb-feats__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;
}

/* 功能卡：384×130 白底 r10＋静止阴影 */
.gb-feats__card {
  position: relative;
  width: 384px;
  height: 130px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.160784);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* 圆底：24,26 79×79 #E8F1FF；glyph 40,42 48×48 手拼近似 */
.gb-feats__circle {
  position: absolute;
  left: 24px;
  top: 26px;
  width: 79px;
  height: 79px;
  border-radius: 50%;
  background: #e8f1ff;
}

.gb-feats__glyph {
  position: absolute;
  left: 40px;
  top: 42px;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.gb-feats__card-title {
  position: absolute;
  left: 149px;
  top: 28px;
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: #1a1a2e;
  text-align: left;
  white-space: nowrap;
}

.gb-feats__desc {
  position: absolute;
  left: 149px;
  margin: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #666;
  text-align: left;
  white-space: nowrap;
}

.gb-feats__desc--l1 { top: 65px; }
.gb-feats__desc--l2 { top: 82px; }

/* ============ 流程 gb-flow（相对[2333,3491]高1158；底渐变直接画 section） ============ */
/* 去图层化：头换 sectionHead（标题 34 #1a1a2e／线 272×6 #1890ff／缝 12，无副标题；
   标题原 left:826 与居中差 2px 系取整噪声；蓝条原 824 即居中）；
   section 加 box-sizing＋padding-top:35（原标题 top），头高 59；
   大整图改流式居中（1000×1000，margin-top:32 即 126−94）；
   stage 去 min-height；section 保 min-height:1158＋overflow:hidden；
   reveal 由 common.js 驱动；整图静态不 hover；无 z-index；无断点 */
.gb-flow {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 1158px;
  padding-top: 35px;
  overflow: hidden;
  background: linear-gradient(180deg, #fdfdfd 0%, #eef5fd 100%);
}

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

/* 流程大整图：1000×1000 contain 居中（文字已 baked 进图） */
.gb-flow__img {
  display: block;
  width: 1000px;
  height: 1000px;
  margin: 32px auto 0;
  object-fit: contain;
}

/* ============ 优势 gb-adv（相对[3492,3886]高394，底 #DAEBFD 纯色覆盖跨底图） ============ */
/* 去图层化：头换 sectionHead（标题 34 #111827／线 136×5 r3 #1890ff／缝 12，无副标题），
   section 加 box-sizing＋padding-top:34（原标题 top），头高 58；
   四卡改 grid 4 列 285px、列缝 20（第三卡 612 与均缝 610 差 2，
   nth-child(3) left:2px 归整，同 life-advantages 做法），卡片区 margin-top:56（148−92）；
   卡改 relative；卡内圆点/数字/标题/描述相对卡不动；
   stage 去 min-height；section 保 min-height:394；reveal 由 common.js 驱动；
   hover 卡上浮（数字不动）；无 z-index 叠顺序；无断点 */
.gb-adv {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 394px;
  padding-top: 34px;
  background: #daebfd;
  overflow: hidden;
}

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

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

/* 优势卡：285×150 白底 r12＋静止阴影 */
.gb-adv__card {
  position: relative;
  width: 285px;
  height: 150px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.160784);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

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

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

.gb-adv__num {
  position: absolute;
  height: 39px;
  margin: 0;
  font-size: 32px;
  line-height: 39px;
  font-weight: 400;
  color: #1890ff;
  text-align: left;
  white-space: nowrap;
}

.gb-adv__card-title {
  position: absolute;
  top: 74px;
  height: 19px;
  margin: 0;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  color: #1a1a2e;
  text-align: center;
  white-space: nowrap;
}

.gb-adv__card-desc {
  position: absolute;
  top: 101px;
  height: 30px;
  margin: 0;
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #888;
  text-align: center;
}