feat: port cms listing layout into trade-pro (kind-branched cards/filters/pagination)

Task 10c. listing.html (category.html now includes it) replaces the thin
pro-inner-hero variant with the cms list designs:
- product-like listings (product/vehicle/brand/case/service) get the
  products/[...page].astro form: ported PageHero, 260px sticky category
  side panel, 3-col sf-tp-card grid reusing the 10a card components
- post-like listings (/news/, /post/) get the news/[...page].astro form:
  1fr+310px two-col layout, horizontal news rows (290px media + tag/
  title/summary/Read more), three aside boxes (Latest/Popular/count)
- pagination is the cms Pagination window (first/last + current-2..+2,
  ellipsis collapse) with arrow-left/arrow-right SVG icons and
  builder-consistent URLs (page 1 = section root)
- platform filter contract kept: .pro-filter-panel stays the immediate
  previous sibling of .pro-filter-scope (pro.js previousElementSibling
  lookup); cards/rows carry .pro-card + data-brand/data-category
- empty sections hide filters/grid/pagination behind a friendly empty
  state (noindex scaffold pages)

Test: test_trade_pro_listing_layout_structure drives a real build with
105 imported products + 3 posts, asserting both branches, static
pagination on /categories/pumps/ pages 1-2, contract adjacency, and
no bare arrow glyphs.

Co-Authored-By: Claude Code <noreply@anthropic.com>

themes/trade-pro/pro.css

@@ -273,3 +273,91 @@
 
 /* 询盘蜜罐：隐藏但不移出 DOM（pro-base 的 .pro-inquiry 作用域规则不覆盖新表单容器） */
 .sf-theme-trade-pro .pro-honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
+
+/* ── Task 10c：listing 列表页（products/news 列表移植）──
+   源 src/pages/[locale]/products/[...page].astro（PageHero / 260px 分类
+   侧栏 / CardGrid cols-3 / Pagination）与 news/[...page].astro
+   （1fr+310px 双栏 / news-row 横向行 / aside-box 侧栏盒）。 */
+
+/* 内页 PageHero：浅品牌横幅；有封面时叠图 + brand-soft 渐变罩（无图纯渐变） */
+.sf-theme-trade-pro .sf-tp-page-hero{position:relative;display:flex;align-items:center;overflow:hidden;min-height:calc(var(--sf-tp-space-24) * 3.5);padding-block:var(--sf-tp-space-12) calc(var(--sf-tp-space-10) + var(--sf-tp-space-1));background:linear-gradient(115deg,var(--sf-tp-color-surface-brand-soft),color-mix(in srgb,var(--sf-tp-color-surface-brand-soft) 26%,var(--sf-tp-color-surface-default)));}
+.sf-theme-trade-pro .sf-tp-page-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:calc(var(--sf-tp-z-base) - 1)}
+.sf-theme-trade-pro .sf-tp-page-hero-overlay{position:absolute;inset:0;z-index:var(--sf-tp-z-base);background:linear-gradient(90deg,var(--sf-tp-color-surface-brand-soft) 0,var(--sf-tp-color-surface-brand-soft) 44%,color-mix(in srgb,var(--sf-tp-color-surface-brand-soft) 74%,transparent) 53%,color-mix(in srgb,var(--sf-tp-color-surface-brand-soft) 8%,transparent) 68%)}
+.sf-theme-trade-pro .sf-tp-page-hero-copy{position:relative;z-index:var(--sf-tp-z-raised);width:min(calc(var(--sf-tp-container-content-max) - var(--sf-tp-space-16)),56%)}
+.sf-theme-trade-pro .sf-tp-page-hero-copy h1{margin-block:var(--sf-tp-space-2) var(--sf-tp-space-3)}
+.sf-theme-trade-pro .sf-tp-page-hero-lead{color:var(--sf-tp-color-text-secondary);font-size:var(--sf-tp-font-size-lg);line-height:var(--sf-tp-line-height-relaxed);max-width:var(--sf-tp-container-content-max);margin-block-end:var(--sf-tp-space-6)}
+
+/* 产品目录布局：260px 分类侧栏 + 主列（cms layout-sidebar / side-panel） */
+.sf-theme-trade-pro .sf-tp-catalogue-layout{display:grid;grid-template-columns:260px 1fr;gap:var(--sf-tp-space-8)}
+.sf-theme-trade-pro .sf-tp-catalogue-single{display:block}
+.sf-theme-trade-pro .sf-tp-side-panel{align-self:start;padding:var(--sf-tp-space-5);border-radius:var(--sf-tp-card-border-radius);background:var(--sf-tp-color-surface-muted);position:sticky;top:calc(var(--sf-tp-space-16) + var(--sf-tp-space-16))}
+.sf-theme-trade-pro .sf-tp-side-panel h3{font-size:var(--sf-tp-font-size-sm);letter-spacing:var(--sf-tp-letter-spacing-wide);text-transform:uppercase;margin-block-end:var(--sf-tp-space-2)}
+.sf-theme-trade-pro .sf-tp-side-link{display:block;padding:calc(var(--sf-tp-space-4) - var(--sf-tp-space-1)) var(--sf-tp-space-4);border-block-end:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-default);font-weight:var(--sf-tp-font-weight-semibold);color:var(--sf-tp-color-text-secondary);font-size:var(--sf-tp-font-size-sm)}
+.sf-theme-trade-pro .sf-tp-side-link:hover{color:var(--sf-tp-color-text-brand)}
+.sf-theme-trade-pro .sf-tp-side-link--active{color:var(--sf-tp-color-text-on-brand);background:var(--sf-tp-color-brand-primary);border-radius:var(--sf-tp-radius-xs)}
+/* 列表栅格 = cms cols-3（主列比首页窄）；双类共存时显式压过 Phase 2 的
+   .pro-card 平台着色（更高特异性，与文件顺序无关） */
+.sf-theme-trade-pro .sf-tp-card-grid--listing{grid-template-columns:repeat(3,minmax(0,1fr))}
+.sf-theme-trade-pro .sf-tp-card.pro-card{background:var(--sf-tp-color-surface-default);border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle);border-radius:var(--sf-tp-card-border-radius)}
+/* pro.js 零结果空态注入的 .pro-filter-empty：栅格内整行展示 */
+.sf-theme-trade-pro .pro-filter-scope>.pro-filter-empty{grid-column:1/-1;padding:var(--sf-tp-space-6);border:var(--sf-tp-border-width-hairline) dashed var(--sf-tp-color-border-default);color:var(--sf-tp-color-text-muted)}
+
+/* 新闻分支：1fr + 310px 双栏；行 = 290px 封面 + 文本列，行间发丝线分隔 */
+.sf-theme-trade-pro .sf-tp-news-layout{display:grid;grid-template-columns:1fr 310px;gap:calc(var(--sf-tp-space-8) + var(--sf-tp-space-2))}
+.sf-theme-trade-pro .sf-tp-news-row{display:grid;grid-template-columns:290px 1fr;gap:var(--sf-tp-space-6);padding-block-end:var(--sf-tp-space-6);margin-block-end:var(--sf-tp-space-6);border-block-end:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-default)}
+/* 行也是 pro-card（pro.js 过滤钩子）：还原为无框行形态，压过 Phase 2 着色 */
+.sf-theme-trade-pro .sf-tp-news-row.pro-card{display:grid;background:transparent;border:0;border-radius:0;overflow:visible;box-shadow:none}
+.sf-theme-trade-pro .sf-tp-news-row.pro-card:hover{transform:none;box-shadow:none}
+.sf-theme-trade-pro .sf-tp-news-row .sf-tp-card-media{border-radius:var(--sf-tp-radius-sm);background:var(--sf-tp-color-surface-muted)}
+.sf-theme-trade-pro .sf-tp-news-row:hover .sf-tp-card-media img{transform:scale(1.04)}
+.sf-theme-trade-pro .sf-tp-news-body .sf-tp-tag{margin-block-end:var(--sf-tp-space-2)}
+.sf-theme-trade-pro .sf-tp-news-body h3{font-size:var(--sf-tp-font-size-2xl);margin-block:var(--sf-tp-space-2)}
+.sf-theme-trade-pro .sf-tp-news-body h3 a{color:inherit}
+.sf-theme-trade-pro .sf-tp-news-body h3 a:hover{color:var(--sf-tp-color-text-brand)}
+.sf-theme-trade-pro .sf-tp-news-body p{color:var(--sf-tp-color-text-muted);font-size:var(--sf-tp-font-size-sm);margin-block-end:var(--sf-tp-space-3)}
+/* 侧栏三盒（cms aside-box）：灰底圆角卡 + 右浮计数 */
+.sf-theme-trade-pro .sf-tp-aside-box{background:var(--sf-tp-color-surface-muted);border-radius:var(--sf-tp-card-border-radius);padding:calc(var(--sf-tp-space-5) + var(--sf-tp-space-1));margin-block-end:var(--sf-tp-space-4)}
+.sf-theme-trade-pro .sf-tp-aside-box h3{font-size:var(--sf-tp-font-size-md);margin-block-end:var(--sf-tp-space-3)}
+.sf-theme-trade-pro .sf-tp-aside-box p{margin-block-end:var(--sf-tp-space-3);font-size:var(--sf-tp-font-size-sm)}
+.sf-theme-trade-pro .sf-tp-aside-box p:last-child{margin-block-end:0}
+.sf-theme-trade-pro .sf-tp-aside-box a:hover{color:var(--sf-tp-color-text-brand)}
+.sf-theme-trade-pro .sf-tp-aside-box strong{float:inline-end;color:var(--sf-tp-color-text-brand)}
+.sf-theme-trade-pro .sf-tp-aside-box ol{padding-inline-start:var(--sf-tp-space-6);margin-block-end:0}
+.sf-theme-trade-pro .sf-tp-aside-box li{margin-block:var(--sf-tp-space-4);font-size:var(--sf-tp-font-size-sm);color:var(--sf-tp-color-text-muted)}
+.sf-theme-trade-pro .sf-tp-aside-box li:last-child{margin-block-end:0}
+
+/* 分页器（cms Pagination）：窗口页码 + SVG 箭头，居中可换行 */
+.sf-theme-trade-pro .sf-tp-pagination{display:flex;justify-content:center;align-items:center;gap:var(--sf-tp-space-1);margin-block-start:var(--sf-tp-space-10);flex-wrap:wrap}
+.sf-theme-trade-pro .sf-tp-page-num,.sf-theme-trade-pro .sf-tp-page-arrow{display:inline-grid;place-items:center;min-width:36px;height:36px;padding-inline:6px;border-radius:var(--sf-tp-radius-sm);border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle);color:var(--sf-tp-color-text-secondary);font-size:var(--sf-tp-font-size-sm);transition:all var(--sf-tp-duration-fast) var(--sf-tp-easing-standard)}
+.sf-theme-trade-pro .sf-tp-page-num:hover,.sf-theme-trade-pro .sf-tp-page-arrow:hover:not(.is-disabled){border-color:var(--sf-tp-color-border-brand);color:var(--sf-tp-color-text-brand)}
+.sf-theme-trade-pro .sf-tp-page-num.is-active{background:var(--sf-tp-color-brand-primary);border-color:var(--sf-tp-color-brand-primary);color:var(--sf-tp-color-text-on-brand);font-weight:var(--sf-tp-font-weight-semibold)}
+.sf-theme-trade-pro .sf-tp-page-arrow.is-disabled{opacity:.35;cursor:default}
+.sf-theme-trade-pro .sf-tp-page-dots{color:var(--sf-tp-color-text-muted);padding-inline:2px}
+
+/* 空列表友好空态（noindex 栏目占位页）：居中提示，不渲染筛选/栅格/分页 */
+.sf-theme-trade-pro .sf-tp-listing-empty{text-align:center;padding:var(--sf-tp-space-12) var(--sf-tp-space-6);border:var(--sf-tp-border-width-hairline) dashed var(--sf-tp-color-border-default);border-radius:var(--sf-tp-card-border-radius);color:var(--sf-tp-color-text-muted)}
+.sf-theme-trade-pro .sf-tp-listing-empty h2{color:var(--sf-tp-color-text-secondary);margin-block-end:var(--sf-tp-space-3)}
+
+/* ── listing 响应式（cms 断点：900 双栏堆叠 / 767 hero 竖版 / 620 紧凑）── */
+@media (max-width: 900px){
+  .sf-theme-trade-pro .sf-tp-page-hero-copy{width:100%}
+  .sf-theme-trade-pro .sf-tp-catalogue-layout{grid-template-columns:1fr}
+  .sf-theme-trade-pro .sf-tp-side-panel{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--sf-tp-space-4)}
+  .sf-theme-trade-pro .sf-tp-news-layout{grid-template-columns:1fr}
+  .sf-theme-trade-pro .sf-tp-news-row{grid-template-columns:240px 1fr}
+}
+@media (max-width: 767px){
+  .sf-theme-trade-pro .sf-tp-page-hero{min-height:auto;padding-block:calc(var(--sf-tp-space-12) - var(--sf-tp-space-4)) calc(var(--sf-tp-space-8) + var(--sf-tp-space-2))}
+}
+@media (max-width: 620px){
+  .sf-theme-trade-pro .sf-tp-page-hero{padding-block:calc(var(--sf-tp-space-10) + var(--sf-tp-space-4)) calc(var(--sf-tp-space-4) + var(--sf-tp-space-2));align-items:flex-start}
+  .sf-theme-trade-pro .sf-tp-page-hero-copy{width:62%}
+  .sf-theme-trade-pro .sf-tp-page-hero-copy h1{font-size:28px;line-height:1.05;margin-block-end:8px}
+  .sf-theme-trade-pro .sf-tp-page-hero-lead{font-size:11px;line-height:1.35;margin-block-end:12px}
+  .sf-theme-trade-pro .sf-tp-side-panel{display:block}
+  .sf-theme-trade-pro .sf-tp-news-row{grid-template-columns:1fr}
+  .sf-theme-trade-pro .sf-tp-news-row .sf-tp-card-media{aspect-ratio:16/9}
+  .sf-theme-trade-pro .sf-tp-news-body h3{font-size:var(--sf-tp-font-size-lg)}
+  .sf-theme-trade-pro .sf-tp-news-aside{margin-block-start:var(--sf-tp-space-8)}
+  .sf-theme-trade-pro .sf-tp-page-num,.sf-theme-trade-pro .sf-tp-page-arrow{min-width:32px;height:32px}
+}