设计Section 06 · Component Sourcing & BOM Risk Control

下面是 Section 06 · Component Sourcing & BOM Risk Control 的完整 Block Editor 操作步骤。
H2 保持全局居中，不做左对齐；不添加 "SECTION 06 --- KEY DIFFERENTIATOR"；不添加 Design Spec；不使用 Ninja Tables；不重复定义全局 CSS。 这些红线来自 V14.2 规范，尤其是 H2 默认居中、section 只允许定义背景/节奏变量/独有组件差异。

Section 06 结构总览

[Gutenberg Group] Section 外层
└── [Gutenberg Group] Section inner
    ├── [Gutenberg Group] orange kicker line
    ├── [Gutenberg Heading H2] Component Sourcing & BOM Risk Control
    ├── [Gutenberg Paragraph] lead text
    ├── [Gutenberg Group] Our Position box
    └── [Stackable Columns] sourcing control grid
        ├── [Stackable Column] + [Gutenberg Group] Card 01
        ├── [Stackable Column] + [Gutenberg Group] Card 02
        ├── [Stackable Column] + [Gutenberg Group] Card 03
        ├── [Stackable Column] + [Gutenberg Group] Card 04
        ├── [Stackable Column] + [Gutenberg Group] Card 05
        └── [Stackable Column] + [Gutenberg Group] Orange outcome card

Ninja Tables：本 Section 不使用。

这是差异化控制点卡片，不是参数表、能力表或报价表。

---

一、Section 外层

Step 1 --- 添加 Section 外层

组件：Gutenberg → Group

在 Section 05 后面新增一个 Group。

设置：

Alignment: Full width

Advanced → Additional CSS class(es) 填：

suga-pillar-section suga-pillar-section--06 suga-pillar-section--sourcing

不要设置：

background
margin-top
margin-bottom
padding
width
max-width

说明：

suga-pillar-section
= 全局 full-bleed 和 section rhythm 拥有者

suga-pillar-section--06
= section 编号，只放在 class 里，不作为页面正文显示

suga-pillar-section--sourcing
= 语义 modifier，表示这是 sourcing / BOM risk section

---

Step 2 --- 添加 Section Inner

组件：Gutenberg → Group

在外层 Group 里面添加一个 Group。

Advanced → Additional CSS class(es) 填：

suga-pillar-section__inner

不要设置：

width
max-width
左右 padding
background
margin
Spacer

.suga-pillar-section__inner 的宽度、安全边距、上下 padding 都由 V14.2 全局 CSS 控制。

---

二、标题区域

Step 3 --- 添加橘黄色短线

组件：Gutenberg → Group

在 .suga-pillar-section__inner 里面添加一个空 Group。

Advanced → Additional CSS class(es) 填：

suga-pillar-kicker-line

注意：

不要用 Gutenberg Separator
不要输入 "------"
不要用空段落模拟线
不要手动设置颜色或高度

---

Step 4 --- 添加 H2

组件：Gutenberg → Heading

Heading level 选择：

H2

内容输入：

Component Sourcing & BOM Risk Control

Advanced → Additional CSS class(es) 填：

suga-pillar-h2

重要：

虽然效果图 H2 是靠左，但你的规则是 普通 section H2 统一居中 ，所以这里不要添加 has-text-align-left，也不要新写 Section 06 H2 左对齐 CSS。

---

Step 5 --- 添加 Lead 文案

组件：Gutenberg → Paragraph

内容输入：

Turnkey success is determined at the BOM level --- not the assembly line.

Advanced → Additional CSS class(es) 填：

suga-pillar-lead

---

三、Our Position 横向强调框

Step 6 --- 添加 Position Box

组件：Gutenberg → Group

在 Lead 后面添加一个 Group。

Advanced → Additional CSS class(es) 填：

suga-sourcing-position

里面放两个 Gutenberg Paragraph。

---

Step 7 --- 添加 Position Label

组件：Gutenberg → Paragraph

内容输入：

OUR POSITION

Advanced → Additional CSS class(es) 填：

suga-sourcing-position__label

说明：
OUR POSITION 是正文里的观点标签，可以保留；它不是 "SECTION 06" 这种后台说明文字。

---

Step 8 --- 添加 Position Text

组件：Gutenberg → Paragraph

内容输入：

A great assembly line cannot fix a bad BOM. We treat sourcing as the first line of quality control.

Advanced → Additional CSS class(es) 填：

suga-sourcing-position__text

---

四、5 个控制点 + 1 个橙色结果卡

Step 9 --- 添加卡片 Grid 父级

组件：Stackable → Columns

在 Position Box 后面添加 Stackable Columns。

建议设置：

Columns: 3

Advanced → Additional CSS class(es) 填：

suga-stack-grid suga-stack-grid--3 suga-sourcing-grid

说明：

suga-stack-grid
= 使用全局 Stackable Columns 兼容层

suga-stack-grid--3
= 三列布局

suga-sourcing-grid
= Section 06 独有 grid modifier

不要用：

suga-card-grid

也不要自己写普通 .suga-card-grid { display:grid }，这会踩红线。

---

五、Card 01 --- BOM Completeness & MPN Accuracy

Step 10 --- 添加第 1 个 Column

组件：Stackable → Column

第 1 个 Column 的 Advanced → Additional CSS class(es) 建议留空，或者只填结构类：

suga-sourcing-grid__item

不要在 Column 上加 suga-sourcing-card，避免后面出现双层卡片边框。

---

Step 11 --- 在 Column 内添加卡片 Group

组件：Gutenberg → Group

Advanced → Additional CSS class(es) 填：

suga-sourcing-card suga-sourcing-card--01

卡片里面依次添加以下内容。

11.1 编号

组件：Gutenberg → Paragraph

内容：

01

class：

suga-sourcing-card__num

11.2 H3 标题

组件：Gutenberg → Heading

Heading level：

H3

内容：

BOM Completeness & MPN Accuracy

class：

suga-sourcing-card__title

11.3 要点列表

组件：Gutenberg → List

内容：

Every MPN validated against manufacturer catalog before sourcing starts
Missing parameters flagged pre-quote
Avoids mid-build BOM rework

class：

suga-sourcing-card__list

---

六、Card 02 --- Lifecycle, Availability & Lead-Time Review

Step 12 --- 添加第 2 个 Column

组件：Stackable → Column

Advanced → Additional CSS class(es)：

suga-sourcing-grid__item

内部添加：

组件：Gutenberg → Group

class：

suga-sourcing-card suga-sourcing-card--02

内容：

编号：02
H3：Lifecycle, Availability & Lead-Time Review
List：
EOL / NRND / obsolete parts flagged
Long-lead items escalated early
Buffer strategy proposed where needed
No surprises two weeks before build

对应 class：

suga-sourcing-card__num
suga-sourcing-card__title
suga-sourcing-card__list

---

七、Card 03 --- Approved Alternates & Substitution Control

Step 13 --- 添加第 3 个 Column

组件：Stackable → Column

Advanced → Additional CSS class(es)：

suga-sourcing-grid__item

内部添加：

组件：Gutenberg → Group

class：

suga-sourcing-card suga-sourcing-card--03

内容：

编号：03
H3：Approved Alternates & Substitution Control
List：
Alternates proposed with datasheet proof
Customer approval required before swap
AVL / restricted vendor list honored
All changes logged & traceable

---

八、Card 04 --- Counterfeit Risk Prevention

Step 14 --- 添加第 4 个 Column

组件：Stackable → Column

Advanced → Additional CSS class(es)：

suga-sourcing-grid__item

内部添加：

组件：Gutenberg → Group

class：

suga-sourcing-card suga-sourcing-card--04

内容：

编号：04
H3：Counterfeit Risk Prevention
List：
Authorized distribution prioritized
Broker sourcing only when necessary, with explicit inspection & disclosure
Incoming inspection for risk-flagged lots

---

九、Card 05 --- Traceable Procurement Records

Step 15 --- 添加第 5 个 Column

组件：Stackable → Column

Advanced → Additional CSS class(es)：

suga-sourcing-grid__item

内部添加：

组件：Gutenberg → Group

class：

suga-sourcing-card suga-sourcing-card--05

内容：

编号：05
H3：Traceable Procurement Records
List：
Purchase records linked to lot numbers
Traceability from source → assembly
Fast root-cause containment if needed
Customer-requested records deliverable

---

十、橙色 Outcome Card

Step 16 --- 添加第 6 个 Column

组件：Stackable → Column

Advanced → Additional CSS class(es)：

suga-sourcing-grid__item

内部添加：

组件：Gutenberg → Group

class：

suga-sourcing-card suga-sourcing-card--outcome

这张卡不是 H3 控制点，而是结果强调卡。

---

Step 17 --- Outcome Card 标题

组件：Gutenberg → Heading

Heading level：

H3

内容：

Why sourcing control determines project success

Advanced → Additional CSS class(es) 填：

suga-sourcing-card__title

---

Step 18 --- Outcome Card 要点

组件：Gutenberg → List

内容：

Lower hidden cost exposure
Faster, predictable lead times
Fewer mid-build surprises
Audit-ready documentation
This is where turnkey earns its cost.

Advanced → Additional CSS class(es) 填：

suga-sourcing-card__list

---

十一、Block Editor List View 最终结构

你在 Gutenberg 左上角打开 List View 后，结构应该类似这样：

Group --- suga-pillar-section suga-pillar-section--06 suga-pillar-section--sourcing
└── Group --- suga-pillar-section__inner
    ├── Group --- suga-pillar-kicker-line
    ├── Heading H2 --- suga-pillar-h2
    ├── Paragraph --- suga-pillar-lead
    ├── Group --- suga-sourcing-position
    │   ├── Paragraph --- suga-sourcing-position__label
    │   └── Paragraph --- suga-sourcing-position__text
    └── Stackable Columns --- suga-stack-grid suga-stack-grid--3 suga-sourcing-grid
        ├── Stackable Column --- suga-sourcing-grid__item
        │   └── Group --- suga-sourcing-card suga-sourcing-card--01
        ├── Stackable Column --- suga-sourcing-grid__item
        │   └── Group --- suga-sourcing-card suga-sourcing-card--02
        ├── Stackable Column --- suga-sourcing-grid__item
        │   └── Group --- suga-sourcing-card suga-sourcing-card--03
        ├── Stackable Column --- suga-sourcing-grid__item
        │   └── Group --- suga-sourcing-card suga-sourcing-card--04
        ├── Stackable Column --- suga-sourcing-grid__item
        │   └── Group --- suga-sourcing-card suga-sourcing-card--05
        └── Stackable Column --- suga-sourcing-grid__item
            └── Group --- suga-sourcing-card suga-sourcing-card--outcome

---

十二、必须避免的错误

不要添加 "SECTION 06 --- KEY DIFFERENTIATOR"
不要添加 Design Spec
不要把 H2 改成左对齐
不要用 Gutenberg Separator 做橘黄色线
不要用 Spacer 或空段落制造间距
不要在 inner 上设置背景色
不要在 Stackable Column 和里面 Group 同时添加 suga-sourcing-card
不要使用 Ninja Tables
不要用 suga-card-grid display:grid 接管 Stackable Columns
不要写 one-off class，例如 bom-risk-section、turnkey-source-box

十三、Section 06 后续 CSS 只允许新增这些类

后续如果你要我输出 CSS，只允许新增 Section 06 独有组件规则：

.suga-pillar-section--06
.suga-pillar-section--sourcing
.suga-sourcing-position
.suga-sourcing-position__label
.suga-sourcing-position__text
.suga-sourcing-grid
.suga-sourcing-grid__item
.suga-sourcing-card
.suga-sourcing-card--01
.suga-sourcing-card--02
.suga-sourcing-card--03
.suga-sourcing-card--04
.suga-sourcing-card--05
.suga-sourcing-card--outcome
.suga-sourcing-card__num
.suga-sourcing-card__title
.suga-sourcing-card__list

不能再碰：

.suga-pillar-section full-bleed
.suga-pillar-section__inner width / max-width / 左右 padding
.suga-pillar-h2 全局对齐
.suga-pillar-lead 全局对齐
.suga-stack-grid 基础兼容
Gutenberg gap reset
section outer margin

Section 6 CSS

/* =========================================================
   SECTION 06 --- COMPONENT SOURCING & BOM RISK CONTROL
   Only Section 06 unique styles.
   Does not redefine base layout / inner width / global H2 alignment.
   ========================================================= */


/* ---------------------------------------------------------
   06.1) Section background + rhythm variables only
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-pillar-section--06,
body[data-prefix="single_page"] .suga-pillar-section--sourcing {
  background: var(--suga-color-navy);
  --suga-section-padding-bottom: 48px;
}


/* ---------------------------------------------------------
   06.2) Dark section heading color only
   Important:
   - Only changes color for readability on dark background.
   - Does NOT change H2 font-size / font-weight / line-height / alignment / margin.
   - Therefore it does NOT break global H2 consistency.
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-pillar-section--06 .suga-pillar-h2,
body[data-prefix="single_page"] .suga-pillar-section--06 .suga-pillar-h2 h2,
body[data-prefix="single_page"] .suga-pillar-section--06 .suga-pillar-h2 .stk-block-heading__text,
body[data-prefix="single_page"] .suga-pillar-section--sourcing .suga-pillar-h2,
body[data-prefix="single_page"] .suga-pillar-section--sourcing .suga-pillar-h2 h2,
body[data-prefix="single_page"] .suga-pillar-section--sourcing .suga-pillar-h2 .stk-block-heading__text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body[data-prefix="single_page"] .suga-pillar-section--06 .suga-pillar-lead,
body[data-prefix="single_page"] .suga-pillar-section--06 .suga-pillar-lead p,
body[data-prefix="single_page"] .suga-pillar-section--06 .suga-pillar-lead .stk-block-text__text,
body[data-prefix="single_page"] .suga-pillar-section--sourcing .suga-pillar-lead,
body[data-prefix="single_page"] .suga-pillar-section--sourcing .suga-pillar-lead p,
body[data-prefix="single_page"] .suga-pillar-section--sourcing .suga-pillar-lead .stk-block-text__text {
  color: rgba(255, 255, 255, 0.76) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.76) !important;
}


/* ---------------------------------------------------------
   06.3) Position box
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-sourcing-position {
  margin: 34px 0;
  padding: 18px 24px;
  border: 2px solid var(--suga-color-orange);
  background: rgba(255, 255, 255, 0.035);
  box-sizing: border-box;
}

body[data-prefix="single_page"] .suga-sourcing-position__label {
  margin: 0 0 8px;
  padding: 0;
  color: var(--suga-color-orange);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-prefix="single_page"] .suga-sourcing-position__text {
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 500;
}


/* ---------------------------------------------------------
   06.4) Sourcing grid
   Stackable Columns only.
   Do NOT use .suga-card-grid display:grid here.
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-sourcing-grid {
  margin-top: 0;
  margin-bottom: 0;
}

body[data-prefix="single_page"] .suga-sourcing-grid .stk-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

body[data-prefix="single_page"] .suga-sourcing-grid .stk-column,
body[data-prefix="single_page"] .suga-sourcing-grid .stk-block-column {
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
}

body[data-prefix="single_page"] .suga-sourcing-grid__item > .stk-column-wrapper,
body[data-prefix="single_page"] .suga-sourcing-grid__item > .stk-column-wrapper > .stk-inner-blocks {
  height: 100%;
}


/* ---------------------------------------------------------
   06.5) Sourcing cards
   Card class should be applied to the inner Gutenberg Group:
   .suga-sourcing-card
   Do NOT apply .suga-sourcing-card to Stackable Column.
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-sourcing-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 16px;
  row-gap: 18px;
  height: 100%;
  min-height: 210px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.065);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
}

body[data-prefix="single_page"] .suga-sourcing-card__num {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: var(--suga-color-orange);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
}

body[data-prefix="single_page"] .suga-sourcing-card__title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  padding: 0;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 18px;
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -0.01em;
}

body[data-prefix="single_page"] .suga-sourcing-card__list {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  padding: 18px 0 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  line-height: 1.72;
  font-weight: 500;
}

body[data-prefix="single_page"] .suga-sourcing-card__list li {
  margin: 0 0 8px;
}

body[data-prefix="single_page"] .suga-sourcing-card__list li:last-child {
  margin-bottom: 0;
}


/* ---------------------------------------------------------
   06.6) Orange outcome card
   --------------------------------------------------------- */

body[data-prefix="single_page"] .suga-sourcing-card--outcome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 210px;
  background: var(--suga-color-orange);
  border-color: var(--suga-color-orange);
  box-shadow: 0 18px 36px rgba(253, 83, 32, 0.22);
}

body[data-prefix="single_page"] .suga-sourcing-card--outcome .suga-sourcing-card__title {
  margin: 0 0 18px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 20px;
  line-height: 1.3;
}

body[data-prefix="single_page"] .suga-sourcing-card--outcome .suga-sourcing-card__list {
  padding-top: 18px;
  border-top-color: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.94);
}

body[data-prefix="single_page"] .suga-sourcing-card--outcome .suga-sourcing-card__list li:last-child {
  font-weight: 800;
  color: #ffffff;
}


/* ---------------------------------------------------------
   06.7) Responsive behavior
   --------------------------------------------------------- */

@media (max-width: 1024px) {
  body[data-prefix="single_page"] .suga-sourcing-grid .stk-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }

  body[data-prefix="single_page"] .suga-sourcing-card {
    min-height: 200px;
  }
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-pillar-section--06,
  body[data-prefix="single_page"] .suga-pillar-section--sourcing {
    --suga-section-padding-bottom: 38px;
  }

  body[data-prefix="single_page"] .suga-sourcing-position {
    margin: 26px 0 28px;
    padding: 16px 18px;
  }

  body[data-prefix="single_page"] .suga-sourcing-position__text {
    font-size: 15px;
  }

  body[data-prefix="single_page"] .suga-sourcing-grid .stk-row {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body[data-prefix="single_page"] .suga-sourcing-card {
    min-height: auto;
    padding: 22px 20px;
  }

  body[data-prefix="single_page"] .suga-sourcing-card__title {
    font-size: 17px;
  }

  body[data-prefix="single_page"] .suga-sourcing-card__list {
    font-size: 13.5px;
  }

  body[data-prefix="single_page"] .suga-sourcing-card--outcome .suga-sourcing-card__title {
    font-size: 19px;
  }
}

@media (max-width: 480px) {
  body[data-prefix="single_page"] .suga-sourcing-card {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 14px;
    padding: 20px 18px;
  }

  body[data-prefix="single_page"] .suga-sourcing-card__num {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  body[data-prefix="single_page"] .suga-sourcing-card__title {
    font-size: 16px;
  }
}