/* 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-17 改（用户最新底线，优先级最高）：配图一律不改尺寸。
   不缩小、不放大、不裁切、不拉伸 —— 模型的职责只剩"放在哪个模块、几张一行"。
     natural  单张，原尺寸
     pair     两张一行（用户说这个版式最好看，优先用）
     trio     三张一行（上限）
   旧标记 compact / row / grid 只为历史内容保留，同样不再缩图裁图；
   left/right/center/small/wide 保留一套兼容渲染，历史内容重新发布不退化。
   两列图文（po-media-split）仍需把整段文字搬进另一列，暂不放开给模型。
   注意：这段注释会随 <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}
/* 2026-10-17 用户底线：配图一律不改尺寸 —— 不缩小、不放大、不裁切、不拉伸。
   下面这些 po-media 规则只决定"放在哪、几张一行"，尺寸只受 max-width:100% 约束。
   （原来 compact/row/grid 都有 max-height 缩图、grid 还有 object-fit:cover 裁图，已全部去掉。） */
.po-page .po-media--compact{text-align:center;margin:18px 0}
.po-page .po-media--compact img{margin:0 auto}
.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--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:auto;max-width:100%;height:auto;margin:0}
/* 并排版式（2026-10-17 用户底线）：
   pair 两张一行、trio 三张一行 —— 只排布局，图的尺寸和比例一个都不动
   （没有 aspect-ratio、没有 object-fit:cover、没有 max-height；图片只在超过栏宽时等比缩小）。
   所以一行里的图高度会不齐，这是用户明确接受的状态，不要为了等高去裁图。
   大拼图 / 规格表 / 细长条照样可以并排，只要它自己不被裁 —— 由模型判断要不要 pair。 */
.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:auto;max-width:100%;height:auto;margin:0 auto}
.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:auto;max-width:100%;height:auto;margin:0 auto}
@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}
@media (max-width:720px){.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}}