折叠，**零 JS**；箭头是 CSS 画的，
不用图标字体，避免主题没引图标时显示成方块。
想调浓淡：只改下面第 1 节的 9 个变量，规则一行都不用动。
========================================================================== */
/* ---------- 1. 容器与令牌 ---------- */
/* 同样用 `.fpj-pd.fpj-pd` 而不是单个 `.fpj-pd`：主题会给描述容器挂 typography 类
（`body3` 之类，也是 (0,1,0)），同分靠顺序不保险，翻一倍特异性最省事。 */
.fpj-pd.fpj-pd{
--fpj-red: #E24B4A;
--fpj-red-d: #A32D2D;
--fpj-red-l: #F2D2D2;
--fpj-ink: #1A1A1A;
--fpj-body: #3A3A3A;
--fpj-mut: #6B6B6B;
--fpj-line: #EFE9E9;
--fpj-soft: #FAFAFA;
--fpj-tint: #FFF6F6;
max-width: 860px; /* ⚠️ 不能写 100%：线上描述的富文本区块是全宽的，
1380px 下一个自然行 120+ 字符根本读不下去，
why 卡也会被拉成 453px 的空宽卡。
预览页里量不出这个问题（那边容器只有 600px）。 */
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", sans-serif;
font-size: 15px;
line-height: 1.7;
color: var(--fpj-body);
text-align: left;
letter-spacing: 0;
overflow-wrap: anywhere; /* 防 NikeConnect 这类超长单词撑破容器 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 主题 reset 兜底：描述区内的列表圆点 / 缩进 / 段距全部收回自己管
--------------------------------------------------------------------------
⚠️ 描述在商品页上渲染在主题的 `.rte` 容器里（blocks/product-description.html:
``），而主题 base/index.css 里有一整套
`.rte p` / `.rte ul` / `.rte li` / `.rte a` 规则 —— 特异性都是 (0,1,1)，
跟 `.fpj-pd p` 同分。同分就比加载顺序，顺序一变（主题升级、缓存、内联）
排版就塌。所以下面这些「基础 reset」统一写成 `.fpj-pd.fpj-pd xxx`：
类名重复一次 → 特异性翻到 (0,2,0)，不用 !important 也能稳赢。
带二级类名的规则（`.fpj-pd .fpj-pd__specs li` = 0,2,1）本来就够，不用改。 */
.fpj-pd.fpj-pd *,
.fpj-pd.fpj-pd *::before,
.fpj-pd.fpj-pd *::after { box-sizing: border-box; }
.fpj-pd.fpj-pd p { margin: 0; padding: 0; }
.fpj-pd.fpj-pd ul,
.fpj-pd.fpj-pd ol { margin: 0; padding: 0; list-style: none; }
.fpj-pd.fpj-pd li { margin: 0; padding: 0; list-style: none; }
.fpj-pd.fpj-pd li::marker { content: none; }
.fpj-pd.fpj-pd b,
.fpj-pd.fpj-pd strong { font-weight: 700; color: var(--fpj-ink); }
.fpj-pd.fpj-pd a { color: var(--fpj-red); text-decoration: underline; text-underline-offset: 2px; }
.fpj-pd.fpj-pd img { max-width: 100%; height: auto; }
/* ---------- 2. 开场句（唯一的「标题级」大句，给足呼吸） ---------- */
.fpj-pd .fpj-pd__lede{
margin: 0 0 16px;
font-size: 20px;
line-height: 1.45;
font-weight: 700;
letter-spacing: -.012em;
color: var(--fpj-ink);
}
/* ---------- 3. 分区小标题（红色字距 + 渐隐细线） ---------- */
/* 11px → 14px（第十一轮）：11px 大写红字在商品页里像脚注，读不出「这是分区」 */
.fpj-pd .fpj-pd__h{
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 15px; /* 紧接着上一块，间距由下面的组合规则给 */
font-size: 14px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--fpj-red);
}
.fpj-pd .fpj-pd__h::after{
content: "";
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg, var(--fpj-line), rgba(239,233,233,0));
}
/* ---------- 4. 规格列表：浅底卡片 + 双列自动平衡 + 红点 ---------- */
/* 🔴 这里的 padding 必须带 !important。
实测（线上商品页 computed 自检）：`.fpj-pd .fpj-pd__specs{padding:20px 22px}`
是 (0,2,0)，而主题 base/index.css 里针对富文本列表的规则带 typography 类
（`.rte.body3 ul{…}` 这一族，≥(0,2,1)）会把它压成 0 —— 卡片内边距归零、
红点贴着容器边、双列之间没有呼吸，一眼就是「坏了」。
同级元素的 padding-list/margin 同理，下面凡是列表相关的盒模型属性统一加
!important：主题对 ul/li 的 reset 最狠，靠特异性拼不过就明着声明优先级。 */
.fpj-pd .fpj-pd__specs{
columns: 2;
column-gap: 34px;
margin: 0;
padding: 20px 22px !important;
background: var(--fpj-soft);
border: 1px solid var(--fpj-line);
border-radius: 14px;
font-size: 14px;
line-height: 1.55;
}
.fpj-pd .fpj-pd__specs li{
position: relative;
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin: 0 0 11px !important;
padding: 0 0 0 16px !important;
color: var(--fpj-body);
}
.fpj-pd .fpj-pd__specs li:last-child { margin-bottom: 0 !important; }
.fpj-pd .fpj-pd__specs li::before{
content: "";
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--fpj-red);
}
/* 分号分隔的长条目（有些商品原描述把半句话塞进一条）自动断行更自然 */
.fpj-pd .fpj-pd__specs li b { color: var(--fpj-ink); }
/* ---------- 4b. 正文（开场句之后、规格之前）：多段，行距放松好读 ---------- */
/* 两小段各 2 句：段一讲给谁穿、什么时候穿，段二讲耐不耐穿。
它跟开场句不是同一个字号，读起来才有「标题 → 正文」的层次感。 */
.fpj-pd .fpj-pd__prose{
margin: 0 0 30px;
}
.fpj-pd .fpj-pd__prose p{
margin: 0 0 12px;
font-size: 15.5px;
line-height: 1.78;
color: var(--fpj-body);
}
/* ---------- 4c. Why 卡片：两列（4 张卡正好 2×2；3 张卡 2+1，末张不拉满） ---------- */
/* 用 flex 而不是 grid：grid 的 auto-fit 在 1380px 全宽下会摊成 5 列，
每张卡 453px 宽、里面只有两行字，空得难看。flex + max-width:50% 保证
任何容器宽度下每行最多两张，末张留半宽而不是被 1fr 拉满。 */
.fpj-pd .fpj-pd__why{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
}
.fpj-pd .fpj-pd__why li{
flex: 1 1 340px;
max-width: calc(50% - 5px);
padding: 15px 17px 15px 19px !important;
background: #FFFFFF;
border: 1px solid var(--fpj-line);
border-left: 3px solid var(--fpj-red-l);
border-radius: 12px;
}
.fpj-pd .fpj-pd__why li b{
display: block;
margin-bottom: 5px;
font-size: 15px;
font-weight: 800;
letter-spacing: -.005em;
color: var(--fpj-ink);
}
.fpj-pd .fpj-pd__why li span{
display: block;
font-size: 14px;
line-height: 1.62;
color: var(--fpj-body);
}
/* ---------- 4d. FAQ：原生 折叠，零 JS；箭头纯 CSS 画 ---------- */
.fpj-pd .fpj-pd__faq details{
border-top: 1px solid var(--fpj-line);
}
.fpj-pd .fpj-pd__faq details:first-child{
border-top: 0;
}
/* 主题常给 summary 加自己的默认样式与三角标 —— 这里全部收回自己管，
padding 同样加 !important（理由见规格列表那段：主题对列表元素的 reset 最强） */
.fpj-pd .fpj-pd__faq summary{
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 15px 0 !important;
font-size: 15px;
font-weight: 700;
line-height: 1.5;
color: var(--fpj-ink);
cursor: pointer;
list-style: none;
outline: none;
}
.fpj-pd .fpj-pd__faq summary::-webkit-details-marker{ display: none; }
.fpj-pd .fpj-pd__faq summary::marker{ content: none; }
.fpj-pd .fpj-pd__faq summary::after{
content: "";
flex: 0 0 auto;
width: 8px;
height: 8px;
margin-top: -4px;
border-right: 2px solid var(--fpj-red);
border-bottom: 2px solid var(--fpj-red);
transform: rotate(45deg);
transition: transform .18s ease, margin-top .18s ease;
}
.fpj-pd .fpj-pd__faq details[open] summary{ color: var(--fpj-red-d); }
.fpj-pd .fpj-pd__faq details[open] summary::after{
margin-top: 3px;
transform: rotate(-135deg);
}
.fpj-pd .fpj-pd__faq details p{
margin: 0;
padding: 0 26px 16px 0;
font-size: 14.5px;
line-height: 1.72;
color: var(--fpj-body);
}
/* 分区之间的顶距：首块紧跟正文，只给一次间距，不叠加 */
.fpj-pd .fpj-pd__prose + .fpj-pd__h,
.fpj-pd .fpj-pd__specs + .fpj-pd__h,
.fpj-pd .fpj-pd__why + .fpj-pd__h { margin-top: 34px; }
/* ---------- 5. 窄容器自适应（商品页右栏常只有 400px 上下） ---------- */
/* ⚠️ @container 里的选择器必须带 .fpj-pd 前缀：不带的话特异性只有 (0,1,0)，
压不过第 4 节的 .fpj-pd .fpj-pd__specs (0,2,0)，规则会静默失效。 */
@supports (container-type: inline-size){
.fpj-pd { container-type: inline-size; }
@container (max-width: 460px){
.fpj-pd .fpj-pd__specs { columns: 1; padding: 16px 17px !important; }
.fpj-pd .fpj-pd__why li { flex-basis: 100%; max-width: 100%; }
}
}
/* ---------- 6. 移动端 ---------- */
@media screen and (max-width: 749px){
.fpj-pd { font-size: 14.5px; line-height: 1.65; }
.fpj-pd .fpj-pd__lede { font-size: 18px; margin-bottom: 14px; }
.fpj-pd .fpj-pd__h { font-size: 13px; margin-bottom: 13px; }
.fpj-pd .fpj-pd__prose { margin-bottom: 26px; }
.fpj-pd .fpj-pd__prose p { font-size: 15px; line-height: 1.74; }
.fpj-pd .fpj-pd__specs { columns: 1; padding: 16px 17px !important; column-gap: 0; }
.fpj-pd .fpj-pd__specs li { margin-bottom: 9px !important; }
.fpj-pd .fpj-pd__why { gap: 9px; }
.fpj-pd .fpj-pd__why li { flex-basis: 100%; max-width: 100%; }
.fpj-pd .fpj-pd__faq summary { font-size: 14.5px; padding: 14px 0 !important; }
.fpj-pd .fpj-pd__faq details p { padding-right: 18px !important; }
.fpj-pd .fpj-pd__prose + .fpj-pd__h,
.fpj-pd .fpj-pd__specs + .fpj-pd__h,
.fpj-pd .fpj-pd__why + .fpj-pd__h { margin-top: 28px; }
}
/* ---------- 7. 打印（后台打样用，不影响前台） ---------- */
@media print{
.fpj-pd .fpj-pd__specs { background: #FFF; }
}