/*
 * products-hub.css —— 产品中心总页新版 ?new=1 测试页（英文站 /products/?new=1，正文由 app\service\ProductsHub 输出）
 * 按 Claude Design「VOOHU 英文站产品中心」逐值还原：桌面 ≥1100、平板 700–1099、手机 <700 三档（设计稿自带的三档）。
 * 全部规则收在 #vh-prod 下（id 前缀压过站点通用样式），不影响页头页脚。首屏、锚点栏、按钮与核心能力页新版同一套写法。
 * 内容宽度按全站约定（vh-layout.css）：<1440 为 1200 居中（两侧 24），≥1440 跟随内容列 --vh-page；不写 vw（≥2048 有 zoom）。
 * 按钮都是带边框 / 底色的正规按钮；子类行、型号块是带边框的整行 / 整块链接，没有「文字 + 箭头」式链接。
 */

#page.dbox:has(#vh-prod) { overflow: clip; }
@keyframes l1spin { to { transform: rotate(360deg); } }

#vh-prod {
    --ph-red: #C30D23;
    --ph-red-hover: #8A0A18;
    --ph-red-hot: #E0213A;
    --ph-ink: #1A1A1A;
    --ph-muted: #565B63;
    --ph-rule: #E4E4E4;
    --ph-line: #C9C9C9;
    --ph-soft: #F4F4F4;
    position: relative;
    overflow-x: clip;
    background: #FFFFFF;
    color: var(--ph-ink);
    font-family: "VHAP Poppins", "Poppins", "Poppins Fallback", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}
#vh-prod * { font-family: inherit; box-sizing: border-box; }
#vh-prod h1, #vh-prod h2, #vh-prod h3, #vh-prod p, #vh-prod ul, #vh-prod ol { margin: 0; padding: 0; }
#vh-prod ul, #vh-prod ol { list-style: none; }
#vh-prod a { color: var(--ph-red); text-decoration: none; }
#vh-prod img { display: block; max-width: none; }
#vh-prod :focus-visible { outline: 2px solid var(--ph-red); outline-offset: 3px; }
#vh-prod [data-tone="dark"] :focus-visible { outline-color: #FFFFFF; }
#vh-prod .ph-acc { color: var(--ph-red); }
#vh-prod [data-ph-t]::after { content: attr(data-ph-t); }

#vh-prod .ph-wrap { position: relative; max-width: 1248px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1440px) {
    html #vh-prod .ph-wrap { max-width: calc(var(--vh-page, 1240px) + 48px); }
}

/* ---------------------------------------------------------------- 按钮、序号、板块标题 */
#vh-prod .ph-btns { display: flex; flex-wrap: wrap; gap: 12px; }
#vh-prod .ph-btn { height: 48px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .2s ease; }
#vh-prod .ph-btn--lg { height: 52px; padding: 0 28px; }
#vh-prod .ph-btn--sm { height: 44px; padding: 0 16px 0 20px; font-size: 14px; }
#vh-prod .ph-btn--red { background: var(--ph-red); color: #FFFFFF; }
#vh-prod .ph-btn--red:hover { background: var(--ph-red-hover); color: #FFFFFF; }
#vh-prod .ph-btn--line { border-color: var(--ph-red); background: #FFFFFF; color: var(--ph-red); }
#vh-prod .ph-btn--line:hover { background: var(--ph-red); color: #FFFFFF; }
#vh-prod .ph-btn--ghost { border-color: rgba(255, 255, 255, .5); background: transparent; color: #FFFFFF; }
#vh-prod .ph-btn--ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .08); color: #FFFFFF; }
#vh-prod .ph-btn--gray { padding: 0 20px 0 24px; border-color: var(--ph-line); background: #FFFFFF; color: var(--ph-ink); }
#vh-prod .ph-btn--gray:hover { border-color: var(--ph-red); color: var(--ph-red); }
#vh-prod .ph-arr { flex: none; transition: transform .25s ease; }
#vh-prod .ph-btn:hover .ph-arr { transform: translateX(4px); }

#vh-prod .ph-no { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1px; color: var(--ph-red); font-variant-numeric: tabular-nums; }
#vh-prod .ph-eyebrow { height: 16px; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1.5px; color: var(--ph-red); }
#vh-prod .ph-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#vh-prod .ph-sec { position: relative; padding: 72px 0; background: #FFFFFF; }
#vh-prod .ph-sec--soft { background: var(--ph-soft); }
#vh-prod .ph-h2 { font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -.01em; color: var(--ph-ink); text-wrap: balance; }
#vh-prod .ph-head { display: flex; flex-direction: column; gap: 16px; }
#vh-prod .ph-head--row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
#vh-prod .ph-head-l { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 760px; }
#vh-prod .ph-head-p { font-size: 16px; line-height: 26px; color: var(--ph-muted); text-wrap: pretty; }

/* ---------------------------------------------------------------- S1 首屏 */
#vh-prod .ph-hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 110% at 78% 50%, #2A1016 0%, #170A0E 45%, #0C0B0F 100%); color: #FFFFFF; }
#vh-prod .ph-hero-art { position: absolute; inset: 0; pointer-events: none; }
#vh-prod .ph-hero-in { z-index: 1; padding-top: 32px; padding-bottom: 72px; }
#vh-prod .ph-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, .6); }
#vh-prod .ph-crumb li { display: flex; align-items: center; gap: 8px; }
#vh-prod .ph-crumb a { color: rgba(255, 255, 255, .6); }
#vh-prod .ph-crumb a:hover { color: #FFFFFF; }
#vh-prod .ph-crumb [aria-current] { font-weight: 500; color: #FFFFFF; }
#vh-prod .ph-hero-txt { margin-top: 48px; width: calc((100% - 264px) / 2 + 120px); min-width: 0; }
#vh-prod .ph-eyebrow--hero { height: auto; gap: 10px; font-weight: 700; color: #FFFFFF; }
#vh-prod .ph-eyebrow--hero .ph-dot { background: var(--ph-red-hot); }
#vh-prod .ph-h1 { margin-top: 20px; font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -.02em; color: #FFFFFF; }
#vh-prod .ph-h1-dot { color: var(--ph-red-hot); }
/* H1 副标题（统称词，小一号）：设计稿 H1 只有「Products」，补上这一行让搜索引擎知道本页讲什么 */
#vh-prod .ph-h1-sub { display: block; margin-top: 12px; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, .88); text-wrap: balance; }
@media (min-width: 1280px) { #vh-prod .ph-h1 { font-size: 48px; line-height: 56px; } }
@media (min-width: 1440px) { #vh-prod .ph-h1 { font-size: 52px; line-height: 60px; } }
@media (min-width: 1560px) { #vh-prod .ph-h1 { font-size: 56px; line-height: 64px; } }
#vh-prod .ph-lead { margin-top: 24px; max-width: 660px; font-size: 17px; line-height: 28px; color: rgba(255, 255, 255, .78); text-wrap: pretty; }
#vh-prod .ph-hero .ph-btns { margin-top: 32px; }

/* ---------------------------------------------------------------- S0 锚点栏（吸顶；top = 站点固定页头下沿，由 JS 写进 --ph-top） */
#vh-prod .ph-anchors { position: sticky; top: var(--ph-top, 0px); z-index: 40; background: #FFFFFF; border-bottom: 1px solid var(--ph-rule); transition: box-shadow .25s ease; }
#vh-prod .ph-anchors.is-stuck { box-shadow: 0 8px 20px rgba(26, 26, 26, .08); }
#vh-prod .ph-anchors-scroll { overflow-x: auto; scrollbar-width: none; }
#vh-prod .ph-anchors-scroll::-webkit-scrollbar { display: none; }
#vh-prod .ph-anchors-row { position: relative; height: 64px; display: flex; align-items: stretch; }
#vh-prod .ph-anchors-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ph-ink); }
#vh-prod .ph-anchor { position: relative; flex: 1 1 0; min-width: max-content; padding-top: 2px; display: flex; align-items: center; color: var(--ph-ink); white-space: nowrap; transition: color .15s ease; }
#vh-prod .ph-anchor::before { content: ""; position: absolute; top: 0; left: 0; right: 16px; height: 2px; background: transparent; transition: background .25s ease; }
#vh-prod .ph-anchor + .ph-anchor::before { left: 16px; }
#vh-prod .ph-anchor-in { flex: 1; padding: 0 16px 0 0; display: flex; flex-direction: column; gap: 2px; }
#vh-prod .ph-anchor + .ph-anchor .ph-anchor-in { padding-left: 16px; border-left: 1px solid var(--ph-rule); }
#vh-prod .ph-anchor-no { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1px; color: var(--ph-muted); }
#vh-prod .ph-anchor-t { font-size: 15px; line-height: 20px; font-weight: 500; }
#vh-prod .ph-anchor:hover, #vh-prod .ph-anchor.is-on { color: var(--ph-red); }
#vh-prod .ph-anchor.is-on::before { background: var(--ph-red); }
#vh-prod .ph-anchor.is-on .ph-anchor-no { color: var(--ph-red); }
#vh-prod .ph-anchor.is-on .ph-anchor-t { font-weight: 600; }

/* ---------------------------------------------------------------- S2 产品大类（桌面：前两张横卡各 6 栏，其余竖卡各 4 栏） */
#vh-prod .ph-cats { margin-top: 40px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
#vh-prod .ph-cat { grid-column: span 4; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--ph-rule); border-radius: 10px; overflow: hidden; background: #FFFFFF; scroll-margin-top: 200px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
#vh-prod .ph-cat:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(26, 26, 26, .1); border-color: var(--ph-red); }
#vh-prod .ph-cat--wide { grid-column: span 6; flex-direction: row; }
#vh-prod .ph-cat-img { position: relative; flex: none; min-height: 200px; display: block; overflow: hidden; background: var(--ph-soft); }
#vh-prod .ph-cat--wide .ph-cat-img { flex: 0 0 40%; min-height: 100%; }
#vh-prod .ph-cat-img img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 20px; object-fit: contain; mix-blend-mode: multiply; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
#vh-prod .ph-cat:hover .ph-cat-img img { transform: scale(1.04); }
#vh-prod .ph-cat-b { flex: 1; min-width: 0; padding: 28px; display: flex; flex-direction: column; }
#vh-prod .ph-cat-t { margin-top: 8px; font-size: 22px; line-height: 30px; font-weight: 600; }
#vh-prod .ph-cat-t a { color: var(--ph-ink); transition: color .15s ease; }
#vh-prod .ph-cat-t a:hover { color: var(--ph-red); }
#vh-prod .ph-cat-d { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--ph-muted); text-wrap: pretty; }
#vh-prod .ph-subs { margin-top: 16px; border-top: 1px solid var(--ph-rule); }
#vh-prod .ph-subs li { border-bottom: 1px solid var(--ph-rule); }
#vh-prod .ph-sub { min-height: 44px; padding: 10px 0; display: flex; align-items: center; gap: 12px; color: var(--ph-ink); transition: color .15s ease; }
#vh-prod .ph-sub:hover { color: var(--ph-red); }
#vh-prod .ph-sub-t { flex: 1; min-width: 0; font-size: 15px; line-height: 22px; font-weight: 500; text-wrap: pretty; }
#vh-prod .ph-sub-n { flex: none; min-width: 28px; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ph-soft); font-size: 12px; font-weight: 600; color: var(--ph-muted); }
#vh-prod .ph-sub-go { flex: none; display: flex; color: var(--ph-red); }
#vh-prod .ph-sub:hover .ph-arr { transform: translateX(4px); }
#vh-prod .ph-cat-foot { margin-top: auto; padding-top: 20px; }
#vh-prod .ph-strip { margin-top: 48px; padding: 20px 20px 20px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; border-radius: 10px; background: var(--ph-soft); }
#vh-prod .ph-strip-t { min-width: 0; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--ph-ink); }
/* 选型指南：询盘条下面一排带边框的整卡链接（站内文章） */
#vh-prod .ph-guides { margin-top: 24px; }
#vh-prod .ph-guides-l { margin-bottom: 12px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ph-muted); }
#vh-prod .ph-guides-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#vh-prod .ph-guides-list li { min-width: 0; display: flex; }
#vh-prod .ph-guide { flex: 1; min-width: 0; min-height: 64px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--ph-rule); border-radius: 10px; background: #FFFFFF; color: var(--ph-ink); font-size: 15px; line-height: 22px; font-weight: 600; transition: border-color .2s ease, transform .2s ease, color .2s ease; }
#vh-prod .ph-guide:hover { border-color: var(--ph-red); transform: translateY(-2px); color: var(--ph-red); }
#vh-prod .ph-guide-ico { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #FBE9EB; color: var(--ph-red); }
#vh-prod .ph-guide-t { flex: 1; min-width: 0; text-wrap: pretty; }
#vh-prod .ph-guide .ph-arr { color: var(--ph-red); }
#vh-prod .ph-guide:hover .ph-arr { transform: translateX(4px); }

/* ---------------------------------------------------------------- S3 型号页（现有分页数据） */
#vh-prod .ph-total { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ph-muted); }
#vh-prod .ph-total span { font-size: 20px; color: var(--ph-ink); }
#vh-prod .ph-models { margin-top: 32px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
#vh-prod .ph-models li { min-width: 0; display: flex; }
#vh-prod .ph-model { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px 0 16px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--ph-rule); border-radius: 10px; background: #FFFFFF; color: var(--ph-ink); transition: border-color .2s ease, color .2s ease, box-shadow .2s ease; }
#vh-prod .ph-model:hover { border-color: var(--ph-red); color: var(--ph-red); box-shadow: 0 8px 20px rgba(26, 26, 26, .08); }
#vh-prod .ph-model-t { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .02em; overflow-wrap: anywhere; }
#vh-prod .ph-model-go { flex: none; display: flex; color: var(--ph-red); }
#vh-prod .ph-model:hover .ph-arr { transform: translateX(4px); }
#vh-prod .ph-pager { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
#vh-prod .ph-pg { min-width: 44px; height: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ph-line); border-radius: 10px; background: #FFFFFF; font-size: 14px; font-weight: 600; color: var(--ph-ink); font-variant-numeric: tabular-nums; transition: border-color .2s ease, color .2s ease; }
#vh-prod a.ph-pg:hover { border-color: var(--ph-red); color: var(--ph-red); }
#vh-prod .ph-pg.is-on { border-color: var(--ph-red); background: var(--ph-red); color: #FFFFFF; }
#vh-prod .ph-pg--step { padding: 0 16px; }
#vh-prod .ph-pg.is-off { opacity: .4; }
#vh-prod .ph-pg-gap { width: 32px; text-align: center; color: var(--ph-muted); }

/* ---------------------------------------------------------------- 平板 700–1099 */
@media (max-width: 1099px) {
    #vh-prod .ph-hero-in { padding-top: 24px; padding-bottom: 48px; }
    #vh-prod .ph-hero-txt { margin-top: 24px; width: auto; }
    #vh-prod .ph-h1 { font-size: 40px; line-height: 48px; }
    #vh-prod .ph-lead { font-size: 16px; }
    #vh-prod .ph-anchors-row { height: 56px; }
    #vh-prod .ph-anchor { flex: none; }
    #vh-prod .ph-sec { padding: 56px 0; }
    #vh-prod .ph-h2 { font-size: 32px; line-height: 40px; }
    #vh-prod .ph-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #vh-prod .ph-cat, #vh-prod .ph-cat--wide { grid-column: auto; flex-direction: column; }
    #vh-prod .ph-cat--wide .ph-cat-img { flex: none; min-height: 180px; }
    #vh-prod .ph-cat-img { min-height: 180px; }
    #vh-prod .ph-cat--last { grid-column: 1 / -1; }
    #vh-prod .ph-cat-b { padding: 24px; }
    #vh-prod .ph-models { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #vh-prod .ph-guides-list { grid-template-columns: minmax(0, 1fr); }
    #vh-prod .ph-h1-sub { font-size: 18px; line-height: 26px; }
}

/* ---------------------------------------------------------------- 手机 <700 */
@media (max-width: 699px) {
    #vh-prod .ph-wrap { padding: 0 16px; }
    #vh-prod .ph-hero-in { padding-top: 16px; padding-bottom: 36px; }
    #vh-prod .ph-h1 { font-size: 30px; line-height: 38px; }
    #vh-prod .ph-h1-sub { font-size: 16px; line-height: 24px; }
    #vh-prod .ph-sec { padding: 48px 0; }
    #vh-prod .ph-h2 { font-size: 28px; line-height: 36px; }
    #vh-prod .ph-btn { padding: 0 20px; }
    #vh-prod .ph-btn--lg { padding: 0 22px; }
    #vh-prod .ph-btn--gray, #vh-prod .ph-btn--sm { padding: 0 16px 0 20px; }
    #vh-prod .ph-cats { grid-template-columns: minmax(0, 1fr); }
    #vh-prod .ph-cat--last { grid-column: auto; }
    #vh-prod .ph-strip { padding: 20px; }
    #vh-prod .ph-strip .ph-btns { flex: 1 1 100%; }
    #vh-prod .ph-models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    #vh-prod *, #vh-prod *::before, #vh-prod *::after { transition-duration: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}