/* ==========================================================================
   VANTRE 商品详情页 · 正文模板 B（产品信息版式）
   --------------------------------------------------------------------------
   加载方式：由 src/app/[[...slug]]/page.jsx 按 ERP 下发的 detail_template=B
   注入 <link rel="stylesheet">，只在商品详情页加载。

   与 A 模板的差异：
   - A 沿用服务业的居中长文版式（适合品牌叙事）
   - B 是为「产品信息页」重写的一套：左对齐、层级更硬、强调可扫读，
     适合规格密集、参数罗列、采购决策型内容

   定位：非电商环境 —— 没有价格、没有加购、没有库存。
   只呈现「这是什么 / 参数是什么 / 能怎么定制 / 注意事项」。

    约束：
    - 只用 design token 变量，不硬编码色值
    - 圆角遵循 6/10/14/18/24 分级
    - 不引入新阴影；断点统一 860px
    - 无任何内联 style
    - ERP 正文新增组件类（清洗器 pdp- 前缀放行，无需改 allowlist）：
      警告区 .pdp-alert(.pdp-alert-warn) / 背景分区 .pdp-band /
      分栏 .pdp-cols / 勾选列表 .pdp-checklist / 步骤条 .pdp-steps
    ========================================================================== */

/* ---------- 第二屏容器 ---------- */
.pdp-body.pdp-tpl-b {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px 88px;
}

/* ---------- 分类导航：详情 / 可用项 / FAQ ---------- */
.pdp-tpl-b .pdp-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
  margin: 0 0 32px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* B 模板用「下划线高亮」而非 A 的胶囊，与全站 .catalog-header-tabs 一致 */
.pdp-tpl-b .pdp-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.pdp-tpl-b .pdp-tabs button:hover {
  color: var(--ink);
}

.pdp-tpl-b .pdp-tabs button.active {
  color: var(--green-dark);
  border-bottom-color: var(--green-dark);
}

/* ---------- 面板 ---------- */
.pdp-tpl-b .pdp-panel[hidden] {
  display: none;
}

/* ---------- 正文版式 ---------- */
/* 覆盖 globals.css .article-body 的大内距（那是博客的双栏留白），
   商品信息页改为单栏、与页面同宽、最大 900px 保证扫读效率。 */
.pdp-tpl-b .pdp-panel > .article-body {
  max-width: 900px;
  margin: 0 auto;
  padding-inline: 0;
  color: var(--charcoal);
  font-size: 16px;
  line-height: 1.8;
}

.pdp-tpl-b .pdp-panel > .article-body > :first-child {
  margin-top: 0;
}

/* H2：左对齐 + 绿色短规则线，区分于 A 模板的居中 */
.pdp-tpl-b .pdp-panel .article-body h2 {
  margin: 2.4em 0 0.7em;
  font-size: clamp(23px, 2.1vw, 29px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: left;
  text-wrap: balance;
}

.pdp-tpl-b .pdp-panel .article-body h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 14px;
  background: var(--green);
}

.pdp-tpl-b .pdp-panel .article-body h2:first-child {
  margin-top: 0;
}

/* H3：左侧绿线，参数小节的层级标记 */
.pdp-tpl-b .pdp-panel .article-body h3 {
  margin: 2em 0 0.6em;
  padding-left: 12px;
  border-left: 2px solid var(--green-deep);
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.pdp-tpl-b .pdp-panel .article-body h4 {
  margin: 1.6em 0 0.5em;
  font-size: 16px;
  color: var(--ink);
}

.pdp-tpl-b .pdp-panel .article-body p {
  margin: 0 0 1.35em;
  color: var(--charcoal);
  line-height: 1.8;
  text-wrap: pretty;
}

/* 开场段：给采购/AI 摘要用的完整陈述，读起来要比正文更「实」 */
.pdp-tpl-b .pdp-panel .article-body > p:first-of-type {
  font-size: 17px;
  color: var(--black);
}

/* ---------- 列表：参数罗列的主要载体 ---------- */
.pdp-tpl-b .pdp-panel .article-body ul,
.pdp-tpl-b .pdp-panel .article-body ol {
  margin: 0 0 1.6em;
  padding-left: 1.25em;
}

.pdp-tpl-b .pdp-panel .article-body li {
  margin-bottom: 0.5em;
  line-height: 1.75;
}

.pdp-tpl-b .pdp-panel .article-body li::marker {
  color: var(--green-deep);
}

/* ---------- 定义列表：规格键值对 ---------- */
.pdp-tpl-b .pdp-panel .article-body dl {
  margin: 0 0 1.8em;
  border-top: 1px solid var(--line);
}

.pdp-tpl-b .pdp-panel .article-body dt {
  margin-top: 1em;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.pdp-tpl-b .pdp-panel .article-body dd {
  margin: 4px 0 0;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  line-height: 1.7;
}

/* ---------- 表格 ---------- */
.pdp-tpl-b .pdp-panel .article-table-wrap {
  max-width: 100%;
  margin: 2em 0;
  overflow-x: auto;
}

.pdp-tpl-b .pdp-panel .article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94em;
}

.pdp-tpl-b .pdp-panel .article-table th,
.pdp-tpl-b .pdp-panel .article-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  line-height: 1.65;
}

.pdp-tpl-b .pdp-panel .article-table th {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 图片 ---------- */
.pdp-tpl-b .pdp-panel .article-body figure {
  margin: 2.2em 0;
}

.pdp-tpl-b .pdp-panel .article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.pdp-tpl-b .pdp-panel .article-body figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- 引用 ---------- */
/* B 模板不用 A 的 Georgia 斜体大引用（那是叙事语气），
   改为克制的注释框，更符合产品信息页的事实陈述口吻。 */
.pdp-tpl-b .pdp-panel .article-body blockquote {
  margin: 2em 0;
  padding: 18px 22px;
  border: 1px solid rgba(26, 77, 46, 0.16);
  border-radius: var(--radius-md);
  background: var(--green-soft);
  color: var(--charcoal);
  font-size: 15px;
  font-style: normal;
  line-height: 1.8;
}

/* ---------- 链接与 CTA ---------- */
.pdp-tpl-b .pdp-panel .article-body a {
  color: var(--green-deep);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(26, 77, 46, 0.42);
  text-underline-offset: 0.18em;
}

.pdp-tpl-b .pdp-panel .article-body a:hover {
  color: var(--deep-green);
}

/* ---------- ERP 正文语义类（跨模板契约） ----------
   与 A 模板同名的 pdp-* 类，但按 B 的左对齐产品信息语气实现。
   同一份 ERP 正文切换模板时无需改数据，只换 CSS 文件。 */

.pdp-tpl-b .pdp-lede {
  margin: 0 0 1.5em;
  font-size: 17px;
  line-height: 1.75;
  color: var(--black);
  text-align: left;
  text-wrap: pretty;
}

.pdp-tpl-b .pdp-note {
  margin: 2em 0;
  padding: 18px 22px;
  border: 1px solid rgba(26, 77, 46, 0.16);
  border-left: 3px solid var(--green-deep);
  border-radius: var(--radius-md);
  background: var(--green-soft);
  font-size: 15px;
  line-height: 1.8;
}

.pdp-tpl-b .pdp-figure {
  margin: 2.4em 0;
}

.pdp-tpl-b .pdp-caption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- FAQ ---------- */
/* 折叠本体沿用 styles.css 的裸 details/summary 规则，与主页保持一致；
   B 模板只把宽度收敛到正文栏。 */
.pdp-tpl-b .pdp-faq-list {
  max-width: 900px;
  margin: 0 auto;
}

/* ---------- 警告区：免责 / 注意 / 限制说明 ----------
   ERP 用法：
   <div class="pdp-alert"><p><strong>天然材质说明</strong></p><p>……</p></div>
   <div class="pdp-alert pdp-alert-warn"><p><strong>定制限制</strong></p><p>……</p></div>
   第一行 strong 即标题行（::before 挂标记点），后面 p 为正文。 */
.pdp-tpl-b .pdp-panel .article-body .pdp-alert {
  margin: 2em 0;
  padding: 18px 22px 6px;
  border: 1px solid rgba(26, 77, 46, 0.16);
  border-left: 3px solid var(--green-deep, var(--green));
  border-radius: var(--radius-md, 10px);
  background: var(--green-soft);
  font-size: 15px;
  line-height: 1.8;
}

.pdp-tpl-b .pdp-panel .article-body .pdp-alert > p:first-child strong::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--green-deep, var(--green));
  vertical-align: 1px;
}

.pdp-tpl-b .pdp-panel .article-body .pdp-alert-warn {
  border-color: rgba(185, 138, 87, 0.35);
  border-left-color: var(--wood);
  background: var(--paper);
}

.pdp-tpl-b .pdp-panel .article-body .pdp-alert-warn > p:first-child strong::before {
  background: var(--wood);
}

/* ---------- 背景分区：把一节包成浅底通栏 ----------
   ERP 用法：<div class="pdp-band"><h3>……</h3><p>……</p></div>
   h3 在 band 内去掉左侧绿线，改用小标题间距。 */
.pdp-tpl-b .pdp-panel .article-body .pdp-band {
  margin: 2.2em 0;
  padding: 26px 28px 8px;
  border-radius: var(--radius-lg, 14px);
  background: var(--mist);
}

.pdp-tpl-b .pdp-panel .article-body .pdp-band > h3:first-child {
  margin-top: 0;
  padding-left: 0;
  border-left: 0;
}

/* ---------- 分栏：双栏（移动端自动单栏） ----------
   ERP 用法：
   <div class="pdp-cols"><div><h3>……</h3><p>……</p></div><div>……</div></div> */
.pdp-tpl-b .pdp-panel .article-body .pdp-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 36px;
  margin: 2em 0;
}

.pdp-tpl-b .pdp-panel .article-body .pdp-cols > div {
  min-width: 0;
}

.pdp-tpl-b .pdp-panel .article-body .pdp-cols h3:first-child {
  margin-top: 0;
}

/* ---------- 勾选列表：卖点/包含项 ----------
   ERP 用法：<ul class="pdp-checklist"><li>……</li></ul> */
.pdp-tpl-b .pdp-panel .article-body .pdp-checklist {
  list-style: none;
  padding-left: 0;
}

.pdp-tpl-b .pdp-panel .article-body .pdp-checklist li {
  position: relative;
  padding-left: 30px;
}

.pdp-tpl-b .pdp-panel .article-body .pdp-checklist li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 0.1em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-deep, var(--green));
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}

/* ---------- 步骤条：定制流程 / 使用步骤 ----------
   ERP 用法：<ol class="pdp-steps"><li>……</li></ol>，序号自动生成。 */
.pdp-tpl-b .pdp-panel .article-body .pdp-steps {
  list-style: none;
  padding-left: 0;
  counter-reset: pdp-step;
}

.pdp-tpl-b .pdp-panel .article-body .pdp-steps li {
  position: relative;
  padding-left: 46px;
  counter-increment: pdp-step;
}

.pdp-tpl-b .pdp-panel .article-body .pdp-steps li::before {
  content: counter(pdp-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--green-deep, var(--green));
}

/* ---------- 表格增强：沿用 .article-table，斑马纹 + 首行吸顶 ---------- */
.pdp-tpl-b .pdp-panel .article-table thead th {
  background: var(--mist);
}

.pdp-tpl-b .pdp-panel .article-table tbody tr:nth-child(even) td {
  background: var(--mist);
}

.pdp-tpl-b .pdp-panel .article-table tbody tr {
  transition: background-color 160ms ease;
}

.pdp-tpl-b .pdp-panel .article-table tbody tr:hover td {
  background: var(--green-soft);
}

/* ---------- CSS 动效（全站无 JS 依赖，尊重降低动效偏好） ---------- */
@keyframes pdp-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 面板切换显现时的轻微上浮（hidden 切换即触发） */
.pdp-tpl-b .pdp-panel:not([hidden]) > :first-child {
  animation: pdp-fade-up 320ms ease both;
}

/* 可用项卡片 hover 轻微上浮 */
.pdp-tpl-b .pdp-panel .customization-grid .custom-item {
  transition: transform 180ms ease, border-color 180ms ease;
}

.pdp-tpl-b .pdp-panel .customization-grid .custom-item:hover {
  transform: translateY(-3px);
}

/* H2 绿色规则线随显现生长 */
.pdp-tpl-b .pdp-panel:not([hidden]) .article-body h2::after {
  animation: pdp-rule-grow 480ms ease both;
  transform-origin: left center;
}

@keyframes pdp-rule-grow {
  from {
    transform: scaleX(0.2);
    opacity: 0.4;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* ---------- 可用项面板 ---------- */
.pdp-tpl-b .pdp-panel .customization-grid {
  margin-top: 28px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .pdp-body.pdp-tpl-b {
    padding: 0 16px 56px;
  }

  .pdp-tpl-b .pdp-panel > .article-body {
    font-size: 15.5px;
  }

  .pdp-tpl-b .pdp-panel .article-body h2 {
    font-size: 22px;
  }

  .pdp-tpl-b .pdp-panel .article-body .pdp-band {
    padding: 20px 18px 4px;
  }

  .pdp-tpl-b .pdp-panel .article-body .pdp-cols {
    grid-template-columns: 1fr;
  }

  .pdp-tpl-b .pdp-panel .article-body .pdp-alert {
    padding: 16px 18px 4px;
  }
}

/* ---------- RTL：左侧强调线镜像 ---------- */
[dir="rtl"] .pdp-tpl-b .pdp-panel .article-body h3 {
  padding-left: 0;
  padding-right: 12px;
  border-left: 0;
  border-right: 2px solid var(--green-deep, var(--green));
}

[dir="rtl"] .pdp-tpl-b .pdp-panel .article-body .pdp-alert,
[dir="rtl"] .pdp-tpl-b .pdp-note {
  border-left: 1px solid rgba(26, 77, 46, 0.16);
  border-right: 3px solid var(--green-deep, var(--green));
}

[dir="rtl"] .pdp-tpl-b .pdp-panel .article-body .pdp-alert-warn {
  border-left: 1px solid rgba(185, 138, 87, 0.35);
  border-right-color: var(--wood);
}

[dir="rtl"] .pdp-tpl-b .pdp-panel:not([hidden]) .article-body h2::after {
  transform-origin: right center;
}

/* ---------- 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .pdp-tpl-b .pdp-tabs button {
    transition: none;
  }

  .pdp-tpl-b .pdp-panel:not([hidden]) > :first-child,
  .pdp-tpl-b .pdp-panel:not([hidden]) .article-body h2::after {
    animation: none;
  }

  .pdp-tpl-b .pdp-panel .customization-grid .custom-item,
  .pdp-tpl-b .pdp-panel .article-table tbody tr {
    transition: none;
  }

  .pdp-tpl-b .pdp-panel .customization-grid .custom-item:hover {
    transform: none;
  }
}