/* 2026-09-14 改（按要求）：
   ① .po-page 不再写 font-family / font-size —— 字体型号与基准字号跟随客户原页面，上下一致；
      （原来硬写 -apple-system… / 16px，和客户页面自带字体不一致）
   ② 标题/表格字号由固定 px 改为 em（相对继承来的正文字号）—— 整块随客户页面等比缩放，
      既"跟客户页面一致"，又保证标题与正文的层级比例不走样（不会出现标题和正文一样大）。
   ③ h2 / h3 / FAQ 问题显式 font-weight:700 —— 不再依赖浏览器对标题的默认加粗，
      避免客户主题把 h2/h3 重置成 400 后看起来"没加粗"（正文里也不再需要塞 <strong>）。
   ④ 不再写 max-width + margin:0 auto —— 原来是 1180px 定宽居中，在比它宽的页面里
      会左右各留一段空白、看起来"缩进/居中"，和客户原页面靠左的内容对不齐。
      现在整块跟随所在容器宽度、靠左排版。
   ⑤ .po-page 加 clear:both —— 客户原描述常常以 float:left 的图片收尾，我们的块紧跟其后
      会被"绕排"到图片右边的窄栏里（实测 signowa 的 SIG-X1M 页：3 张浮动大图把整块挤成半栏）。
      清浮动后整块永远另起一行、占满宽度。 */
.po-page{color:#1a202c;line-height:1.7;clear:both}
.po-page h2{clear:both;font-weight:700;font-size:1.75em;line-height:1.25;margin:56px 0 18px;padding-bottom:10px;border-bottom:1px solid #e2e5ec;position:relative;letter-spacing:-.015em}
.po-page h2::before{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:3px;background:#1e40d8;border-radius:3px}
.po-page h3{font-weight:700;font-size:1.25em;line-height:1.35;margin:34px 0 12px;display:flex;align-items:center;gap:10px}
.po-page h3::before{content:"";width:6px;height:6px;border-radius:50%;background:#1e40d8;flex:none}
.po-page p{margin:0 0 18px}
.po-page ul,.po-page ol{margin:0 0 18px;padding-left:22px}
.po-page li{margin-bottom:8px}
.po-page .po-table-wrap{border:1px solid #eef0f4;border-radius:12px;overflow:hidden;background:#fff;margin:14px 0 18px}
.po-page table.po-table{width:100%;border-collapse:collapse}
.po-page .po-table th,.po-page .po-table td{padding:13px 18px;border-bottom:1px solid #eef0f4;text-align:left}
.po-page .po-table thead th{background:#f7f8fb;color:#52525b;font-weight:700}
.po-page .po-table tbody tr:last-child td{border-bottom:0}
.po-page .po-table tbody tr:nth-child(even){background:#fbfcfe}
.po-page .po-faq-list{border-top:1px solid #eef0f4}
.po-page .po-faq-item{border-bottom:1px solid #eef0f4;padding:22px 0}
.po-page .po-faq-item h3{margin:0 0 8px;font-size:1.125em;font-weight:700}
.po-page .po-faq-item p{margin:0;color:#52525b}
/* 项目符号列表：普通单列圆点列表。
   2026-09-13 改：原来这里是 display:grid 的多列卡片，短文本配大卡片又空又乱，
   而且每页都用同一种卡片 → 视觉上"一眼看出是模板"。按要求改为最朴素的单列分点。 */
.po-page ul.po-list{list-style:none;padding:0;margin:0 0 18px}
.po-page ul.po-list>li{position:relative;padding-left:20px;margin-bottom:10px}
.po-page ul.po-list>li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:#1e40d8}
.po-page ul.po-list>li strong{font-weight:700}
/* 2026-10-16 改（用户口径）：配图版式交给 LLM 判断，代码不再自己排。
   为什么改：以前代码按固定节奏轮换尺寸（一律 320px、固定居中或两列），
   遇到「图少 but 图很高」就变成一张竖图孤零零居中、左右一大片空白，既不专业也不好看。
   现在代码只提供几种可选样式，由配图判断那一步的模型按页面实际情况挑：
     natural  图少时按原始尺寸显示，不缩高
     compact  图多时缩到较矮
     row      几张并排一行
     grid     更多图排成网格（窄屏自动换行）
     split    图与它后面整段文字两列（整块搬过去，不拆字）
   旧标记 left/right/center/small/wide 保留一套兼容渲染，历史内容重新发布不退化。

   注意：这段注释会随 <style> 一起进 productDescription，而 validateContent 会检查三样东西：
   连续的星号（两个及以上）、作为独立词的三个横线、以及未闭合的嵌套加粗标签 —— 命中即整条失败。
   所以写注释时不要用星号做强调、也不要用横线做分隔（2026-10-15 踩过：注释里用星号写强调，
   导致所有新生成的产品被判「markdown leak」整条失败）。函数末尾有自检拦这件事。 */
.po-page .po-media{margin:16px 0}
.po-page .po-media img{display:block;width:auto;max-width:100%;height:auto;border-radius:10px;box-shadow:0 3px 12px rgba(15,23,42,.10)}
.po-page .po-media--natural{text-align:center;margin:20px 0}
.po-page .po-media--natural img{margin:0 auto}
.po-page .po-media--compact{text-align:center;margin:18px 0}
.po-page .po-media--compact img{margin:0 auto;max-height:260px}
.po-page .po-media--row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:flex-start;margin:18px 0}
.po-page .po-media--row img{max-height:240px}
.po-page .po-media--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:start;margin:18px 0}
.po-page .po-media--grid img{width:100%;height:auto;max-height:200px;object-fit:contain;margin:0}
/* 并排版式（2026-10-16 用户逐版实测确认）：pair 两张一行、trio 三张一行；
   po-ar-* 只负责同一行的图等高（原始比例差得远时裁切对齐，普通产品照 15-40 个百分点）。
   例外：大拼图、规格表、细长条不参与并排 —— 它们本身是整幅描述图或表格，裁切会切掉内容，
   一律单图独占一行完整显示（见 extractSingles）。 */
.po-page .po-media--pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;margin:20px 0}
.po-page .po-media--pair img{width:100%;height:auto;margin:0}
.po-page .po-media--trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;margin:20px 0}
.po-page .po-media--trio img{width:100%;height:auto;margin:0}
.po-page .po-media--pair.po-ar-portrait img,.po-page .po-media--trio.po-ar-portrait img{aspect-ratio:1/2.1;object-fit:cover}
.po-page .po-media--pair.po-ar-square img,.po-page .po-media--trio.po-ar-square img{aspect-ratio:1/1;object-fit:cover}
.po-page .po-media--pair.po-ar-landscape img,.po-page .po-media--trio.po-ar-landscape img{aspect-ratio:4/3;object-fit:cover}
@media (max-width:720px){.po-page .po-media--pair,.po-page .po-media--trio{grid-template-columns:1fr}}
/* 两列：图 + 它后面整段内容（整块搬进另一列，一个字都不拆；两列垂直居中）
   图列限宽 42%：宽图（尺寸表之类，视觉证据里常常查不到尺寸）万一进了两列，
   也不会把文字挤成细长条（实测不设限宽时宽图能把页面撑到 19000px）。 */
.po-page .po-media-split{display:flex;gap:26px;align-items:center;margin:22px 0}
.po-page .po-media-split>.po-media{flex:0 0 auto;max-width:42%;margin:0;text-align:left}
.po-page .po-media-split>.po-media img{margin:0;max-width:100%}
.po-page .po-media-split>.po-split-text{flex:1 1 auto;min-width:0}
.po-page .po-media-split>.po-split-text>*:first-child{margin-top:0}
/* 兼容旧标记：一律按"居中块 + 320px"渲染 */
.po-page .po-media--center,.po-page .po-media--left,.po-page .po-media--right,.po-page .po-media--small,.po-page .po-media--wide{text-align:center}
.po-page .po-media--center img,.po-page .po-media--left img,.po-page .po-media--right img,.po-page .po-media--small img,.po-page .po-media--wide img{margin:0 auto;max-height:320px}
@media (max-width:720px){.po-page .po-media--row img{max-height:180px}.po-page .po-media--grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.po-page .po-media-split{flex-direction:column;gap:10px}.po-page .po-media-split>.po-media{flex:none;width:auto;max-width:none}}
@media (max-width:720px){.po-page h2{font-size:1.5em}.po-page h3{font-size:1.125em}.po-page ul,.po-page ol{padding-left:18px}}