/**
 * Component Sourcing 子页 · 段11 客供料配套
 *
 * 复用段5 的 .csrc-plan 流程条结构，仅按本段差异覆写：
 * 七步（圆心间距 217）、步骤名 #008C11 20px、追加放行路径块。
 */

.csrc-consign {
  /* 设计稿该段底色为 #F9FBFA（实测 x=30/960/1880 三处一致）；
     复用 .csrc-plan 时继承了它的白色，此处按设计稿覆写。 */
  background: #f9fbfa;
  /* 设计稿该段浅底 8517..9592（高 1076）：标题顶距段顶 67，
     路径色带底 rel 995 → 段底 rel 1076 = 81。 */
  padding-block: 67px 81px;
}

/* 七步：设计稿圆心等距 **217**（1:1461 x280 / 1:1464 x497 / 1:1466 x714 …
   即 7×56 在 1358 里两端对齐），用 1fr 会得到 194，整条窄 138px。 */
.csrc-consign .csrc-plan__steps {
  grid-template-columns: repeat(7, 56px);
  justify-content: space-between;
  max-width: 1358px;
}

/* 连接线：设计稿是**虚线**（实测实长 12 / 间隔 27 / 颜色 #B8D8BC），
   不是段5 的实线；段5 的「已走过」绿色进度段在本段不存在，隐藏。 */
.csrc-consign .csrc-plan__steps::before {
  background: none;
  background-image: repeating-linear-gradient(90deg, #b8d8bc 0 12px, transparent 12px 39px);
}

.csrc-consign .csrc-plan__steps::after { display: none; }

/* 设计稿流程条：方 56 → **间距 20** → 步骤名 20。
   1:1461 方格底 8931 → 1:1479 步骤名顶 8951。 */
.csrc-consign .csrc-plan-step__index {
  /* 圆与步骤名的间距由 .csrc-plan-step__btn 的 gap 提供（20），此处不再叠加 margin。 */
  /* 未选中方格里是图标，图标色 #3A6A50（1:1462 fill 0.2275/0.4157/0.3137） */
  color: #3a6a50;
}

.csrc-consign .csrc-consign-step__icon {
  display: grid;
  place-items: center;
}

.csrc-consign .csrc-consign-step__icon svg {
  width: 30px;
  height: 30px;
}

/* 选中方格：品牌绿实心 + 白色图标 */
.csrc-consign .csrc-plan-step.is-active .csrc-plan-step__index {
  color: #ffffff;
}

/* 步骤名：设计稿 1:1479/1:1481/1:1482/1:1484/1:1485 都是
   20px Outfit SemiBold #666666；只有选中步 1:1483 是 #008C11。 */
.csrc-consign .csrc-plan-step__title {
  font-size: 20px;
  line-height: 20px;
  color: #666666;
}

.csrc-consign .csrc-plan-step.is-active .csrc-plan-step__title {
  color: #008c11;
}

/* 步骤名：列宽只有 56，必须让它按内容撑开再限宽，否则会被 56 挤成多行。
   设计稿短名一行（Before Shipment 152 / Physical Label 128 / Special Condition 158 /
   After the Build 131），长名两行（Assembly-Usable Packaging 159 / Quantity and
   Attrition 124）——width: max-content + max-width: 170 正好复现这两种。 */
.csrc-consign .csrc-plan-step__title {
  width: max-content;
  max-width: 170px;
  white-space: normal;
  text-align: center;
}

/* 放行路径色带（节点 1:1313 区域，设计稿 rel 907..995 = 88） */
.csrc-consign__path {
  /* 设计稿路径块 x=237..1680（宽 1443 / 内容 1393），正文单行；此前 1358 会让正文折成两行。 */
  max-width: 1443px;
  /* 设计稿详情面板底 rel 873 → 色带顶 rel 907，间距 34。 */
  margin: 34px auto 0;
  /* 设计稿色带 88 = 描边 2 + 上 13 + 标签 22 + 间距 14 + 正文 20 + 下 17。 */
  padding: 13px 24px 17px;
  /* 设计稿路径标签与正文均居中。 */
  text-align: center;
  background: #eff5f3;
  border: 1px solid #b8d8bc;
  border-radius: 10px;
}

.csrc-consign__path-label {
  display: block;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: #008c11;
}

.csrc-consign__path-body {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #666666;
}

.csrc-consign__note {
  max-width: 1358px;
  margin: 20px auto 0;
  font-size: 14px;
  line-height: 20px;
  color: #666666;
}

@media (max-width: 1280px) {
  .csrc-consign { padding-block: 70px 80px; }
  .csrc-consign .csrc-plan__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: normal; }
  .csrc-consign .csrc-plan__steps::before,
  .csrc-consign .csrc-plan__steps::after { display: none; }
  .csrc-consign__path { margin-top: 36px; }
}

@media (max-width: 720px) {
  .csrc-consign .csrc-plan__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csrc-consign__path-body { font-size: 15px; line-height: 22px; }
}

/**
 * 选中步骤的详情面板
 *
 * 设计稿节点 1:1068（1636×351 / 圆角 20 / 白底 + #008C11 描边）：
 *   左卡 1:1490 —— 484×269 / 圆角 20，配图 + 绿色蒙版
 *     · 步骤名 1:9183 —— #FFB700
 *     · 芯片大字 1:9224 —— #FFFFFF 32px
 *   右栏 —— 标题 1:9147（#008C11 / 24px）+ 正文 1:9194（#666666 / 18px）
 *   面板内边距 42，左卡与右栏间距 87
 *
 * 面板高 351 = 描边 2 + 左卡 269 + 上下各 **40**（左卡在面板内垂直居中）。
 */

.csrc-consign__panel {
  display: flex;
  gap: 87px;
  align-items: center;
  /* 设计稿流程条底 rel 474 → 面板顶 rel 522，间距 48。 */
  margin-top: 48px;
  padding: 40px 42px;
  background: #ffffff;
  border: 1px solid #008c11;
  border-radius: 20px;
}

.csrc-consign-panel__card {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  /* 设计稿卡内：步骤名 1:9183（框 666..686，h=20）→ 芯片大字 1:9224（框 707..727，h=20），
     两者间距 21，内容合计 61 在 269 高的卡里居中 → 666。 */
  gap: 21px;
  align-items: center;
  justify-content: center;
  width: 484px;
  height: 269px;
  overflow: hidden;
  text-align: center;
  /* 未配图时的近似底色：设计稿该卡是品牌绿叠加照片后的观感 */
  background: linear-gradient(135deg, #2a9e38, #008c11);
  border-radius: 20px;
}

.csrc-consign-panel__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 照片之上再压一层品牌绿，还原设计稿「绿卡透图」的观感 */
.csrc-consign-panel__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 140, 17, 0.62);
}

.csrc-consign-panel__step,
.csrc-consign-panel__chip {
  position: relative;
  z-index: 1;
}

.csrc-consign-panel__step {
  font-size: 20px;
  font-weight: 700;
  /* 设计稿 1:9183 框高 20（不是 28）。 */
  line-height: 20px;
  color: #ffb700;
}

.csrc-consign-panel__chip {
  font-size: 32px;
  font-weight: 700;
  /* 设计稿 1:9224 框高 20；字号大于行高时字形照常溢出，与设计稿一致。 */
  line-height: 20px;
  color: #ffffff;
}

.csrc-consign-panel__body {
  min-width: 0;
  /* 设计稿右栏并不是与左卡垂直居中，而是**略高**：
     左卡 9081..9350（中心 9215.5），右栏字形块 9150..9241（中心 9195.5）→ 高 20。
     用下外边距把右栏盒子撑高 38，居中后正好整体上移 19 复现该偏移。 */
  margin-bottom: 38px;
}

.csrc-consign-panel__heading {
  /* 设计稿标题字形 9150 → 正文首行字形 9201 = 51；
     本页行高 34/28 的字形上留白合计 17，故盒间距取 51 − 33 = 18。 */
  margin: 0 0 18px;
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  color: #008c11;
}

.csrc-consign-panel__text {
  /* 设计稿 1:9194 宽 904（本轮之前是 975，正文折成 1 行，设计稿是 2 行）。 */
  max-width: 904px;
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: #666666;
}

/* 设计稿寄售段：正文框底 8815 → 流程条顶 8871，间距 56。
   .csrc-plan__body 是 Plan 段共用的 62px，这里只覆盖寄售段。 */
.csrc-consign .csrc-plan__body {
  margin-bottom: 56px;
}

/* 详情面板窄屏：左卡固定 484×269 是 1920 基准值，小屏需收窄/改纵向堆叠 */
@media (max-width: 1080px) {
  .csrc-consign__panel { gap: 40px; padding: 28px; }
}

@media (max-width: 820px) {
  .csrc-consign__panel {
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
    padding: 24px;
  }

  .csrc-consign-panel__card {
    width: 100%;
    height: auto;
    min-height: 220px;
  }

  .csrc-consign-panel__chip { font-size: 24px; line-height: 34px; }
}