/* 2026 球閥頁第二輪｜四套真正不同的提案 D / E / F / G */

html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page {
    --v-ink: #20272c;
    --v-copy: #525b60;
    --v-line: #d9dddf;
    --v-white: #fff;
    --v-off: #f6f7f5;
    background: var(--v-off);
    color: var(--v-ink);
}

html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .container { max-width: 1180px; }
html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .navbar .container { max-width: 1200px; }
html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .page-hero-badges { display: flex; flex-wrap: wrap; }
html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .type-card,
html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .type-card:nth-child(even) { margin: 0; box-shadow: none; }
html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .type-gallery-item,
html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .type-gallery-item:hover { background: #fff; box-shadow: none; }
html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .type-gallery-item img { background: #fff; }

/* ───────────────── D｜精品工業白：銀灰 × 鈷藍 ───────────────── */
html.valve-variant-d .valve-page {
    --d-blue: #215ea8;
    --d-navy: #17324d;
    --d-silver: #e9edef;
    --valve-red: #215ea8;
    --valve-red-dark: #17324d;
    --valve-green: #17324d;
}

html.valve-variant-d .valve-page .page-hero {
    min-height: 620px;
    padding: 78px 0 92px;
    background: linear-gradient(90deg,#fff 0 61%,#e8edf1 61% 100%);
}
html.valve-variant-d .valve-page .page-hero-grid { grid-template-columns: 43% 57%; gap: 0; }
html.valve-variant-d .valve-page .page-hero-text { z-index: 2; padding: 26px 54px 30px 0; }
html.valve-variant-d .valve-page .page-hero-kicker { color: var(--d-blue); }
html.valve-variant-d .valve-page .page-hero h1 { font-size: clamp(38px,4.2vw,58px); line-height: 1.24; letter-spacing: .055em; }
html.valve-variant-d .valve-page .page-hero h1 small { color: var(--d-blue); font-size: .57em; }
html.valve-variant-d .valve-page .page-hero h1::after { width: 92px; height: 5px; background: linear-gradient(90deg,var(--d-blue) 0 62%,#9eb3c7 62%); }
html.valve-variant-d .valve-page .page-hero-badges { gap: 8px; margin-top: 25px; }
html.valve-variant-d .valve-page .page-hero-badges span { padding: 7px 11px; border: 1px solid #bac6ce; border-radius: 99px; background: #fff; color: var(--d-navy); font-size: 11px; }
html.valve-variant-d .valve-page .page-hero-visual { position: relative; padding: 28px 0 0 44px; }
html.valve-variant-d .valve-page .page-hero-visual::before { content: '01'; position: absolute; top: -12px; right: 12px; color: rgba(23,50,77,.12); font: 700 112px/1 Arial,sans-serif; }
html.valve-variant-d .valve-page .valve-hero-art::before { bottom: -22px; left: -22px; width: 72%; height: 42%; background: var(--d-blue); }
html.valve-variant-d .valve-page .valve-hero-art::after { display: none; }
html.valve-variant-d .valve-page .valve-hero-image { aspect-ratio: 1.42/1; border: 10px solid #fff; border-radius: 0; background: #fff; box-shadow: 0 24px 55px rgba(23,50,77,.16); }
html.valve-variant-d .valve-page .valve-hero-image img { padding: 5% 11% 10%; }

html.valve-variant-d .valve-page .valve-brand { padding: 0; background: #fff; }
html.valve-variant-d .valve-page .brand-intro { grid-template-columns: 70px .85fr 1.25fr; padding: 62px 48px; border: 0; background: #fff; }
html.valve-variant-d .valve-page .brand-intro::before { color: #c7d5df; border-right-color: #dce3e7; }
html.valve-variant-d .valve-page .brand-logo-box { padding: 24px; border: 0; border-left: 5px solid var(--d-blue); background: var(--d-silver); }

html.valve-variant-d .valve-page .valve-types { padding: 88px 0; background: #f5f7f8; }
html.valve-variant-d .valve-page .types-grid { gap: 24px; border: 0; }
html.valve-variant-d .valve-page .type-card,
html.valve-variant-d .valve-page .type-card:nth-child(even) { grid-template-columns: 235px 1fr; gap: 34px; padding: 34px; border: 1px solid #d8dfe3; border-left: 6px solid var(--d-blue); background: #fff; }
html.valve-variant-d .valve-page .type-card:nth-child(even) { border-left-color: var(--d-navy); }
html.valve-variant-d .valve-page .type-card-left { padding-right: 24px; border-right: 1px solid #dce2e5; }
html.valve-variant-d .valve-page .type-icon { width: 46px; height: 46px; padding: 10px; border-radius: 50%; background: #e9f0f7; color: var(--d-blue); }
html.valve-variant-d .valve-page .type-card::after { top: 24px; right: 25px; color: #d5dde2; font: 700 19px/1 monospace; }
html.valve-variant-d .valve-page .type-gallery-grid { grid-template-columns: repeat(4,1fr); gap: 9px; }
html.valve-variant-d .valve-page .type-gallery-item { min-height: 125px; padding: 8px; border: 1px solid #dce2e5; border-radius: 0; }
html.valve-variant-d .valve-page .type-gallery-item img { height: 76px; padding: 4px; border: 0; border-radius: 0; }
html.valve-variant-d .valve-page .common-specs-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; padding: 1px; background: var(--d-navy); }
html.valve-variant-d .valve-page .spec-row { display: block; padding: 27px; border: 0; background: #fff; }
html.valve-variant-d .valve-page .spec-row-label { padding: 0 0 14px; border: 0; background: transparent; }
html.valve-variant-d .valve-page .spec-row-content { padding: 0; }
html.valve-variant-d .valve-page .valve-applications { background: var(--d-navy); }
html.valve-variant-d .valve-page .valve-applications .section-title { color: #fff; }
html.valve-variant-d .valve-page .valve-applications .section-desc { color: #afbec9; }
html.valve-variant-d .valve-page .apps-grid { gap: 1px; border: 0; background: rgba(255,255,255,.18); }
html.valve-variant-d .valve-page .app-item { border: 0; background: rgba(255,255,255,.06); color: #fff; }
html.valve-variant-d .valve-page .app-item h5 { color: #fff; }
html.valve-variant-d .valve-page .app-item p { color: #afbec9; }
html.valve-variant-d .valve-page .app-icon { color: #74a6d5; }

/* ───────────────── E｜深色展間：海軍藍 × 霧銀 ───────────────── */
html.valve-variant-e .valve-page {
    --e-bg: #101c24;
    --e-panel: #182a35;
    --e-silver: #cdd7dc;
    --e-blue: #5fa7ca;
    --valve-red: #5fa7ca;
    --valve-red-dark: #dbeaf1;
    --valve-green: #101c24;
}
html.valve-variant-e .valve-page .page-hero { min-height: 680px; padding: 82px 0 96px; background: radial-gradient(circle at 78% 42%,#294656 0,transparent 30%),linear-gradient(135deg,#0e1920,#172b36); color: #fff; }
html.valve-variant-e .valve-page .page-hero-grid { grid-template-columns: 40% 60%; gap: 50px; }
html.valve-variant-e .valve-page .page-hero-kicker { color: var(--e-blue); }
html.valve-variant-e .valve-page .page-hero h1 { color: #fff; font-size: clamp(38px,4.2vw,58px); line-height: 1.3; }
html.valve-variant-e .valve-page .page-hero h1 small { color: var(--e-silver); font-size: .58em; }
html.valve-variant-e .valve-page .page-hero h1::after { background: var(--e-blue); }
html.valve-variant-e .valve-page .page-hero-subtitle { color: #b6c5cc; }
html.valve-variant-e .valve-page .page-hero-badges { gap: 8px; margin-top: 26px; }
html.valve-variant-e .valve-page .page-hero-badges span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 3px; background: rgba(255,255,255,.06); color: #d9e5ea; font-size: 11px; }
html.valve-variant-e .valve-page .page-hero-cta .hero-cta-line { border-color: rgba(255,255,255,.4); background: transparent; color: #fff; }
html.valve-variant-e .valve-page .page-hero-visual { position: relative; }
html.valve-variant-e .valve-page .valve-hero-art::before { inset: 9% 7% -5% 14%; width: auto; height: auto; border: 1px solid rgba(95,167,202,.52); background: transparent; transform: rotate(4deg); }
html.valve-variant-e .valve-page .valve-hero-art::after { content: ''; position: absolute; top: -28px; right: 8%; width: 160px; height: 160px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }
html.valve-variant-e .valve-page .valve-hero-image { aspect-ratio: 1.2/1; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 32px 80px rgba(0,0,0,.35); }
html.valve-variant-e .valve-page .valve-hero-image img { padding: 12%; }
html.valve-variant-e .valve-page .valve-hero-image figcaption { right: 16%; bottom: 12%; left: 16%; }

html.valve-variant-e .valve-page .valve-brand { padding: 72px 0; background: #eef1f1; }
html.valve-variant-e .valve-page .brand-intro { grid-template-columns: .8fr 1.25fr; gap: 70px; padding: 0; background: transparent; }
html.valve-variant-e .valve-page .brand-intro::before,
html.valve-variant-e .valve-page .brand-intro::after { display: none; }
html.valve-variant-e .valve-page .brand-logo-box { padding: 44px; border: 0; border-radius: 0; background: var(--e-panel); color: #fff; }
html.valve-variant-e .valve-page .brand-logo-box h2 { color: #fff; }
html.valve-variant-e .valve-page .brand-logo-box p { color: var(--e-blue); }

html.valve-variant-e .valve-page .valve-types { padding: 90px 0; background: #fff; }
html.valve-variant-e .valve-page .types-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; border: 0; }
html.valve-variant-e .valve-page .type-card,
html.valve-variant-e .valve-page .type-card:nth-child(even) { display: block; padding: 36px; border: 0; border-radius: 0; background: #f2f4f4; }
html.valve-variant-e .valve-page .type-card:nth-child(3n) { background: var(--e-panel); color: #fff; }
html.valve-variant-e .valve-page .type-card-left { padding: 0 0 24px; border: 0; border-bottom: 1px solid #d8dede; }
html.valve-variant-e .valve-page .type-card:nth-child(3n) .type-card-left { border-bottom-color: rgba(255,255,255,.15); }
html.valve-variant-e .valve-page .type-card:nth-child(3n) h3,
html.valve-variant-e .valve-page .type-card:nth-child(3n) .type-desc,
html.valve-variant-e .valve-page .type-card:nth-child(3n) .type-features li { color: #fff; }
html.valve-variant-e .valve-page .type-icon { color: var(--e-blue); }
html.valve-variant-e .valve-page .type-gallery-grid { grid-template-columns: repeat(3,1fr); }
html.valve-variant-e .valve-page .type-gallery-item { min-height: 120px; padding: 8px; border: 0; border-radius: 0; }
html.valve-variant-e .valve-page .type-gallery-item img { height: 72px; padding: 5px; border: 0; border-radius: 0; }
html.valve-variant-e .valve-page .common-specs-row { grid-column: 1/-1; }
html.valve-variant-e .valve-page .valve-applications { background: #e8eeee; }

/* ───────────────── F｜流體系統：深綠 × 青綠 ───────────────── */
html.valve-variant-f .valve-page {
    --f-green: #174f4b;
    --f-teal: #2c8b83;
    --f-mint: #dcece8;
    --f-sand: #eef0e9;
    --valve-red: #2c8b83;
    --valve-red-dark: #174f4b;
    --valve-green: #174f4b;
}
html.valve-variant-f .valve-page .page-hero { min-height: 640px; padding: 76px 0 94px; background: #f7f8f4; }
html.valve-variant-f .valve-page .page-hero-grid { grid-template-columns: 44% 56%; gap: 66px; }
html.valve-variant-f .valve-page .page-hero-grid::before { content: ''; position: absolute; right: -14%; top: -20%; width: 62%; height: 145%; border-radius: 50% 0 0 50%; background: var(--f-green); }
html.valve-variant-f .valve-page .page-hero-text,
html.valve-variant-f .valve-page .page-hero-visual { position: relative; z-index: 1; }
html.valve-variant-f .valve-page .page-hero h1 { font-size: clamp(37px,4vw,56px); }
html.valve-variant-f .valve-page .page-hero h1 small { color: var(--f-teal); font-size: .62em; }
html.valve-variant-f .valve-page .page-hero-badges { gap: 8px; margin-top: 25px; }
html.valve-variant-f .valve-page .page-hero-badges span { padding: 7px 12px; border: 0; border-radius: 99px; background: var(--f-mint); color: var(--f-green); font-size: 11px; }
html.valve-variant-f .valve-page .valve-hero-art::before { bottom: -30px; left: -38px; width: 190px; height: 70px; border-radius: 99px; background: var(--f-teal); }
html.valve-variant-f .valve-page .valve-hero-art::after { display: none; }
html.valve-variant-f .valve-page .valve-hero-image { aspect-ratio: 1.34/1; border: 0; border-radius: 180px 20px 180px 20px; background: #fff; box-shadow: 0 26px 60px rgba(3,30,27,.24); }

html.valve-variant-f .valve-page .valve-brand { padding: 76px 0; background: #fff; }
html.valve-variant-f .valve-page .brand-intro { grid-template-columns: 80px .8fr 1.3fr; padding: 50px; border: 0; border-radius: 44px 0 44px 0; background: var(--f-mint); }
html.valve-variant-f .valve-page .brand-logo-box { border: 0; background: transparent; }

html.valve-variant-f .valve-page .valve-types { padding: 84px 0; background: var(--f-sand); }
html.valve-variant-f .valve-page .product-source { margin: 12px 0 0; color: #60706b; font-size: 13px; letter-spacing: .04em; }
html.valve-variant-f .valve-page .product-source a { color: #0f6965; text-decoration: none; border-bottom: 1px solid rgba(15,105,101,.35); }
html.valve-variant-f .valve-page .product-source a:hover { border-bottom-color: #0f6965; }
html.valve-variant-f .valve-page .types-grid { gap: 34px; border: 0; }
html.valve-variant-f .valve-page .type-card,
html.valve-variant-f .valve-page .type-card:nth-child(even) { grid-template-columns: 260px 1fr; gap: 44px; padding: 38px; border: 0; border-radius: 34px 0 34px 0; background: #fff; }
html.valve-variant-f .valve-page .type-card:nth-child(even) { grid-template-columns: 1fr 260px; border-radius: 0 34px 0 34px; }
html.valve-variant-f .valve-page .type-card:nth-child(even) .type-card-left { order: 2; padding: 0 0 0 28px; border: 0; border-left: 1px solid #d5dfda; }
html.valve-variant-f .valve-page .type-card:nth-child(even) .type-card-right { order: 1; }
html.valve-variant-f .valve-page .type-card-left { padding-right: 28px; border-right: 1px solid #d5dfda; }
html.valve-variant-f .valve-page .type-icon { width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: var(--f-mint); color: var(--f-teal); }
html.valve-variant-f .valve-page .type-gallery-item { min-height: 0; padding: 8px; border: 1px solid #e2e2de; border-radius: 18px 0 18px 0; background: #fff; }
html.valve-variant-f .valve-page .type-gallery-item img { width: 100%; height: auto; aspect-ratio: 1/1; padding: 5px; border: 0; border-radius: 14px 0 0; }
html.valve-variant-f .valve-page .common-specs-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
html.valve-variant-f .valve-page .spec-row { display: block; padding: 26px; border: 0; border-radius: 24px 0 24px 0; background: var(--f-green); }
html.valve-variant-f .valve-page .spec-row-label { padding: 0 0 14px; border: 0; background: transparent; }
html.valve-variant-f .valve-page .spec-row-label h4 { color: #fff; }
html.valve-variant-f .valve-page .spec-row-content { padding: 0; color: #d6e7e3; }
html.valve-variant-f .valve-page .spec-row-content p { color: #d6e7e3; }
html.valve-variant-f .valve-page .valve-applications { background: #fff; }
html.valve-variant-f .valve-page .apps-grid { gap: 14px; border: 0; }
html.valve-variant-f .valve-page .app-item { border: 0; border-radius: 28px 0 28px 0; background: var(--f-mint); }

/* ───────────────── G｜極簡規格冊：黑白 × 訊號藍 ───────────────── */
html.valve-variant-g .valve-page {
    --g-black: #111315;
    --g-blue: #0067d9;
    --g-gray: #eceeed;
    --valve-red: #0067d9;
    --valve-red-dark: #111315;
    --valve-green: #111315;
}
html.valve-variant-g .valve-page .page-hero { min-height: 590px; padding: 64px 0 78px; border-bottom: 8px solid var(--g-blue); background: #fff; }
html.valve-variant-g .valve-page .page-hero-grid { grid-template-columns: 48% 52%; gap: 36px; }
html.valve-variant-g .valve-page .page-hero-text { padding-left: 34px; border-left: 10px solid var(--g-black); }
html.valve-variant-g .valve-page .page-hero-kicker { color: var(--g-blue); font-family: monospace; }
html.valve-variant-g .valve-page .page-hero h1 { margin-top: 20px; font-family: 'Noto Sans TC',sans-serif; font-size: clamp(40px,5vw,68px); font-weight: 900; line-height: 1.12; letter-spacing: -.02em; }
html.valve-variant-g .valve-page .page-hero h1 small { margin-top: 12px; color: var(--g-blue); font-size: .48em; letter-spacing: .02em; }
html.valve-variant-g .valve-page .page-hero h1::after { display: none; }
html.valve-variant-g .valve-page .page-hero-badges { gap: 0; margin-top: 26px; border-top: 1px solid var(--g-black); border-bottom: 1px solid var(--g-black); }
html.valve-variant-g .valve-page .page-hero-badges span { flex: 1; padding: 9px 7px; border: 0; border-right: 1px solid var(--g-black); background: #fff; color: var(--g-black); font: 700 10px/1.3 monospace; text-align: center; }
html.valve-variant-g .valve-page .page-hero-badges span:last-child { border-right: 0; }
html.valve-variant-g .valve-page .valve-hero-art::before { inset: auto -14px -14px auto; width: 70%; height: 68%; background: var(--g-blue); }
html.valve-variant-g .valve-page .valve-hero-art::after { display: none; }
html.valve-variant-g .valve-page .valve-hero-image { aspect-ratio: 1.45/1; border: 3px solid var(--g-black); border-radius: 0; background: #fff; }

html.valve-variant-g .valve-page .valve-brand { padding: 0; background: var(--g-black); color: #fff; }
html.valve-variant-g .valve-page .brand-intro { grid-template-columns: 70px .85fr 1.25fr; padding: 56px 42px; background: transparent; }
html.valve-variant-g .valve-page .brand-logo-box h2,
html.valve-variant-g .valve-page .brand-desc h3 { color: #fff; }
html.valve-variant-g .valve-page .brand-desc p { color: #c8cccf; }

html.valve-variant-g .valve-page .valve-types { padding: 78px 0; background: #fff; }
html.valve-variant-g .valve-page .section-title { font-family: 'Noto Sans TC',sans-serif; font-size: 38px; font-weight: 900; }
html.valve-variant-g .valve-page .types-grid { border-top: 4px solid var(--g-black); }
html.valve-variant-g .valve-page .type-card,
html.valve-variant-g .valve-page .type-card:nth-child(even) { grid-template-columns: 230px 1fr; gap: 34px; padding: 42px 12px; border: 0; border-bottom: 2px solid var(--g-black); background: #fff; }
html.valve-variant-g .valve-page .type-card-left { padding-right: 26px; border-right: 2px solid var(--g-black); }
html.valve-variant-g .valve-page .type-icon { color: var(--g-blue); }
html.valve-variant-g .valve-page .type-card h3 { font-family: 'Noto Sans TC',sans-serif; font-weight: 900; }
html.valve-variant-g .valve-page .type-card::after { top: 13px; right: 10px; color: var(--g-blue); font: 800 14px/1 monospace; }
html.valve-variant-g .valve-page .type-gallery-grid { grid-template-columns: repeat(5,1fr); gap: 0; border: 1px solid var(--g-black); }
html.valve-variant-g .valve-page .type-gallery-item { min-height: 120px; padding: 7px; border: 0; border-right: 1px solid var(--g-black); border-radius: 0; }
html.valve-variant-g .valve-page .type-gallery-item img { height: 72px; padding: 4px; border: 0; border-radius: 0; }
html.valve-variant-g .valve-page .common-specs-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: 3px solid var(--g-black); }
html.valve-variant-g .valve-page .spec-row { display: block; padding: 24px; border: 0; border-right: 2px solid var(--g-black); background: #fff; }
html.valve-variant-g .valve-page .spec-row-label { padding: 0 0 12px; border: 0; background: transparent; }
html.valve-variant-g .valve-page .spec-row-content { padding: 0; }
html.valve-variant-g .valve-page .valve-applications { background: var(--g-gray); }
html.valve-variant-g .valve-page .apps-grid { gap: 0; border: 2px solid var(--g-black); }
html.valve-variant-g .valve-page .app-item { border: 0; border-right: 1px solid var(--g-black); border-bottom: 1px solid var(--g-black); background: #fff; }
html.valve-variant-g .valve-page .app-icon { color: var(--g-blue); }
html.valve-variant-g .valve-page .valve-cta .container { border: 3px solid var(--g-black); border-left: 14px solid var(--g-blue); border-radius: 0; background: #fff; }

@media (max-width: 900px) {
    html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .page-hero-grid { grid-template-columns: 1fr; }
    html.valve-variant-d .valve-page .page-hero { background: linear-gradient(#fff 0 58%,#e8edf1 58%); }
    html.valve-variant-e .valve-page .types-grid { grid-template-columns: 1fr; }
    html.valve-variant-f .valve-page .page-hero-grid::before { top: 48%; right: -25%; width: 95%; height: 70%; }
    html.valve-variant-g .valve-page .page-hero-text { padding-left: 22px; }
    html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .common-specs-row { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .page-hero h1 { font-size: 30px; }
    html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .brand-intro { grid-template-columns: 1fr; padding: 38px 24px; }
    html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .type-card,
    html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .type-card:nth-child(even) { display: grid; grid-template-columns: 1fr; padding: 30px 16px; }
    html.valve-variant-f .valve-page .type-card:nth-child(even) .type-card-left { order: initial; padding: 0 0 22px; border-left: 0; border-bottom: 1px solid #d5dfda; }
    html.valve-variant-f .valve-page .type-card:nth-child(even) .type-card-right { order: initial; }
    html.valve-variant-d .valve-page .type-gallery-grid,
    html.valve-variant-g .valve-page .type-gallery-grid { grid-template-columns: repeat(2,1fr); }
}

/* Hero revision 03｜首圖回到「商品是主角」，移除圓框、異形裁切與過量裝飾 */
html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .page-hero {
    min-height: 620px;
    padding: 76px 0 86px;
}

html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .page-hero-grid {
    grid-template-columns: minmax(330px,40%) minmax(0,60%);
    gap: clamp(46px,6vw,82px);
    align-items: center;
}

html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .page-hero-visual {
    position: relative;
    padding: 0;
}

html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .valve-hero-art {
    position: relative;
    padding: 0;
}

html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .valve-hero-art::before,
html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .valve-hero-art::after,
html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .page-hero-visual::before {
    display: none;
}

html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .valve-hero-image {
    width: 100%;
    aspect-ratio: 1.5 / 1;
    border-radius: 0;
    clip-path: none;
    background: #fff;
}

html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .valve-hero-image::after { display: none; }
html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .valve-hero-image img {
    width: 100%;
    height: 100%;
    padding: 3.5% 8% 9%;
    object-fit: contain;
    mix-blend-mode: normal;
}

html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .valve-hero-image figcaption {
    right: 22px;
    bottom: 15px;
    left: 22px;
    padding-top: 8px;
}

/* D：潔淨攝影棚，只用鈷藍底座承托商品 */
html.valve-variant-d .valve-page .page-hero {
    background: #f7f8f8;
}
html.valve-variant-d .valve-page .page-hero-text {
    padding: 0 0 0 26px;
    border-left: 4px solid var(--d-blue);
}
html.valve-variant-d .valve-page .page-hero-visual::after {
    content: '';
    position: absolute;
    z-index: 0;
    right: -22px;
    bottom: -22px;
    left: 54px;
    height: 72px;
    background: var(--d-blue);
}
html.valve-variant-d .valve-page .valve-hero-art { z-index: 1; }
html.valve-variant-d .valve-page .valve-hero-image {
    border: 1px solid #ccd4d9;
    box-shadow: 0 18px 42px rgba(23,50,77,.12);
}

/* E：深色展間＋完整白色展示台，不再使用圓形裁圖 */
html.valve-variant-e .valve-page .page-hero {
    background: linear-gradient(110deg,#0e1920 0 56%,#172b36 56% 100%);
}
html.valve-variant-e .valve-page .page-hero-visual::after {
    content: 'STAINLESS STEEL / BALL VALVE';
    position: absolute;
    z-index: 2;
    top: -26px;
    right: 0;
    color: #78adca;
    font: 600 10px/1 monospace;
    letter-spacing: .15em;
}
html.valve-variant-e .valve-page .valve-hero-image {
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 28px 60px rgba(0,0,0,.32);
}
html.valve-variant-e .valve-page .valve-hero-image figcaption {
    color: #172b36;
}

/* F：流體綠只做側邊導流帶，照片維持正常矩形 */
html.valve-variant-f .valve-page .page-hero {
    background: linear-gradient(90deg,#f7f8f4 0 72%,var(--f-green) 72% 100%);
}
html.valve-variant-f .valve-page .page-hero-grid::before { display: none; }
html.valve-variant-f .valve-page .page-hero-visual::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: -18px;
    right: -18px;
    bottom: -18px;
    width: 42%;
    border: 1px solid rgba(255,255,255,.45);
}
html.valve-variant-f .valve-page .valve-hero-art { z-index: 1; }
html.valve-variant-f .valve-page .valve-hero-image {
    border: 1px solid #d8d8d5;
    border-radius: 6px;
    box-shadow: 0 22px 54px rgba(15,57,53,.19);
}

/* G：黑白大字＋無陰影商品板，只留訊號藍水平線 */
html.valve-variant-g .valve-page .page-hero {
    border-bottom: 0;
    background: #fff;
}
html.valve-variant-g .valve-page .page-hero-text {
    padding-left: 28px;
    border-left: 8px solid var(--g-black);
}
html.valve-variant-g .valve-page .page-hero-visual::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -12px;
    left: 0;
    height: 12px;
    background: var(--g-blue);
}
html.valve-variant-g .valve-page .valve-hero-image {
    border: 3px solid var(--g-black);
    box-shadow: none;
}

@media (max-width: 900px) {
    html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .page-hero-grid { grid-template-columns: 1fr; }
    html.valve-variant-e .valve-page .page-hero { background: #101c24; }
    html.valve-variant-f .valve-page .page-hero { background: linear-gradient(#f7f8f4 0 68%,var(--f-green) 68%); }
}

@media (max-width: 620px) {
    html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .page-hero { padding: 58px 0 70px; }
    html:is(.valve-variant-d,.valve-variant-e,.valve-variant-f,.valve-variant-g) .valve-page .valve-hero-image { aspect-ratio: 1.25/1; }
}

/* F 正式版｜系列編號移到內容卡外側，避免覆蓋文字
   斷點 1280：容器 1180＋編號外推 52px，窄於此會撐出橫向捲軸（1210 實測 scrollWidth 1216） */
@media (min-width: 1280px) {
    html.valve-variant-f .valve-page .type-card::after,
    html.valve-variant-f .valve-page .type-card:nth-child(even)::after {
        top: 50%;
        right: -52px;
        left: auto;
        padding: 7px 5px;
        border-left: 2px solid var(--f-teal);
        color: #66817d;
        font: 700 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
        letter-spacing: .12em;
        writing-mode: vertical-rl;
        transform: translateY(-50%);
    }

    html.valve-variant-f .valve-page .type-card:nth-child(even)::after {
        right: auto;
        left: -52px;
        border-right: 2px solid var(--f-teal);
        border-left: 0;
    }
}

@media (max-width: 1279px) {
    html.valve-variant-f .valve-page .type-card::after { display: none; }
}

/* F 正式版｜規格卡改為低彩度淺色，提高文字閱讀性 */
html.valve-variant-f .valve-page .common-specs-row {
    gap: 14px;
    padding: 0;
    background: transparent;
}

html.valve-variant-f .valve-page .spec-row,
html.valve-variant-f .valve-page .spec-row:last-child {
    padding: 30px 28px 34px;
    border: 1px solid #e2e2de;
    border-radius: 22px 0 22px 0;
    background: #fff;
    box-shadow: 0 12px 30px rgba(17, 66, 61, .06);
}

html.valve-variant-f .valve-page .spec-row:nth-child(2) {
    background: #fff;
}

html.valve-variant-f .valve-page .spec-row:nth-child(3) {
    background: #fff;
}

html.valve-variant-f .valve-page .spec-row-label h4 {
    color: #173f3c;
}

html.valve-variant-f .valve-page .spec-row-label .dot {
    background: var(--f-teal);
}

html.valve-variant-f .valve-page .spec-row:nth-child(2) .spec-row-label .dot {
    background: var(--f-teal);
}

html.valve-variant-f .valve-page .spec-row:nth-child(3) .spec-row-label .dot {
    background: var(--f-teal);
}

html.valve-variant-f .valve-page .spec-row-content,
html.valve-variant-f .valve-page .spec-row-content p,
html.valve-variant-f .valve-page .spec-row-content strong {
    color: #394743;
}

/* 詢價區移除 04 大型章節數字 */
html.valve-variant-f .valve-page .valve-cta .container::before {
    display: none;
}

@media (max-width: 900px) {
    html.valve-variant-f .valve-page .common-specs-row { gap: 12px; }
}

/* F 正式版｜首區詢價入口：編輯式細線設計 */
html.valve-variant-f .valve-page .page-hero-cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: min(100%, 390px);
    margin-top: 30px;
}

html.valve-variant-f .valve-page .page-hero-cta a {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: end;
    min-width: 0;
    min-height: 0;
    padding: 12px 2px 4px;
    border: 0;
    border-top: 1px solid #9db1aa;
    border-radius: 0;
    background: transparent;
    color: var(--f-green);
    text-align: left;
    text-decoration: none;
    box-shadow: none;
}

html.valve-variant-f .valve-page .page-hero-cta .hero-cta-line { order: 1; }
html.valve-variant-f .valve-page .page-hero-cta .hero-cta-form { order: 2; }

html.valve-variant-f .valve-page .page-hero-cta .action-meta {
    grid-column: 1 / -1;
    margin-bottom: 5px;
    color: #68827a;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
}

html.valve-variant-f .valve-page .page-hero-cta .action-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
}

html.valve-variant-f .valve-page .page-hero-cta .action-arrow {
    color: var(--f-teal);
    font-size: 19px;
    line-height: 1;
    transition: transform .2s ease;
}

html.valve-variant-f .valve-page .page-hero-cta a:hover {
    border-top-color: var(--f-teal);
    color: var(--f-teal);
}

html.valve-variant-f .valve-page .page-hero-cta a:hover .action-arrow {
    transform: translate(3px, -2px);
}

@media (max-width: 620px) {
    html.valve-variant-f .valve-page .page-hero-cta { grid-template-columns: 1fr; }
    html.valve-variant-f .valve-page .page-hero-cta a { width: 100%; }
}

/* F 正式版｜01 品牌區改為兩欄，補足左側視覺 */
html.valve-variant-f .valve-page .brand-intro {
    position: relative;
    grid-template-columns: minmax(300px,.88fr) minmax(0,1.42fr);
    gap: clamp(44px,6vw,78px);
    align-items: stretch;
    padding: 54px;
    overflow: visible;
}

html.valve-variant-f .valve-page .brand-intro::before {
    content: '01';
    position: absolute;
    top: -31px;
    left: 34px;
    min-height: 0;
    padding: 0 12px;
    border: 0;
    background: var(--f-sand);
    color: #9cb4ad;
    font: 500 54px/1 'Noto Serif TC',serif;
    letter-spacing: 0;
}

html.valve-variant-f .valve-page .brand-intro::after {
    content: 'BRAND / TAIWAN';
    top: 36px;
    right: 26px;
    left: auto;
    color: var(--f-teal);
    font: 700 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .2em;
    writing-mode: horizontal-tb;
}

html.valve-variant-f .valve-page .brand-logo-box {
    position: relative;
    display: flex;
    min-height: 230px;
    flex-direction: column;
    justify-content: center;
    padding: 42px 38px;
    overflow: hidden;
    border: 0;
    border-radius: 34px 0 34px 0;
    background: var(--f-green);
    color: #fff;
}

html.valve-variant-f .valve-page .brand-logo-box::before {
    content: '';
    position: absolute;
    right: -58px;
    bottom: -58px;
    width: 170px;
    height: 170px;
    border: 20px solid rgba(255,255,255,.10);
    border-radius: 50%;
}

html.valve-variant-f .valve-page .brand-logo-box::after {
    content: 'SUS304  /  SUS316';
    position: absolute;
    right: 22px;
    bottom: 18px;
    color: #a7d0c8;
    font: 700 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .12em;
}

html.valve-variant-f .valve-page .brand-logo-box h2 {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: clamp(24px,2.4vw,34px);
    line-height: 1.35;
}

html.valve-variant-f .valve-page .brand-logo-box p {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: fit-content;
    margin-top: 16px;
    padding: 7px 10px;
    background: rgba(255,255,255,.10);
    color: #c7e3dd;
}

html.valve-variant-f .valve-page .brand-desc {
    align-self: center;
    padding-right: 20px;
}

@media (max-width: 900px) {
    html.valve-variant-f .valve-page .brand-intro { grid-template-columns: 1fr; }
    html.valve-variant-f .valve-page .brand-logo-box { min-height: 205px; }
}

@media (max-width: 620px) {
    /* 01 編號在手機版改回流排版（grid 第一列），絕對定位會被深綠品牌卡的圓角蓋住 */
    html.valve-variant-f .valve-page .brand-intro { gap: 26px; padding: 26px 22px 28px; }
    html.valve-variant-f .valve-page .brand-intro::before {
        position: static;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: #8aa39c;
        font-size: 38px;
        line-height: 1;
    }
    html.valve-variant-f .valve-page .brand-intro::after { top: 18px; right: 18px; }
    html.valve-variant-f .valve-page .brand-logo-box { min-height: 190px; padding: 34px 27px; }
    html.valve-variant-f .valve-page .brand-desc { padding-right: 0; }
}

/* 相簿圖尺寸：桌機隨欄寬放大（4:3 框），≤900px 維持原本固定高度，避免手機整頁被拉長 */
@media (max-width: 900px) {
    html.valve-variant-f .valve-page .type-gallery-item { min-height: 130px; }
    html.valve-variant-f .valve-page .type-gallery-item img { aspect-ratio: auto; height: 78px; }
}

/* 相簿說明文字：桌機從 11.5px 放大到 13px（手機維持原值） */
@media (min-width: 901px) {
    html.valve-variant-f .valve-page .type-gallery-caption { font-size: 13px; line-height: 1.5; }
}

/* ============================================================
   F 版定稿層（2026-09-19）｜手機截圖回報四項 + 字級對齊全站基準
   以下規則集中追加於檔尾，不改動前面既有規則。variant-switcher.js
   已移除、<html> 已寫死 valve-variant-f，本檔僅 F 分支會被載入到的
   規則實際生效；variant-b.css / variant-c.css 連結已移除（其規則
   全數限定在 .valve-variant-b / .valve-variant-c 下，不影響 F 版）。
   ============================================================ */

/* 缺陷①（手機截圖）：首圖右上淡框線。
   成因：.page-hero-visual::after（353行起「F：流體綠只做側邊導流帶」區塊）是桌機
   兩欄版型才有意義的裝飾框，right/top/bottom:-18px。手機併成單欄後這個框線仍然
   套用，疊在照片卡右上角並凸出卡片邊緣（390px 實測：框右緣 x=372，距 390 視窗邊
   僅 18px，且完全脫離原本 side-panel 綠色色塊語境，變成孤立矩形框）。判定為缺陷，
   手機隱藏。 */
@media (max-width: 900px) {
    html.valve-variant-f .valve-page .page-hero-visual::after { display: none; }
}

/* 缺陷②（手機截圖）：綠色底塊從照片卡中段才開始、壓在照片卡上。
   成因：.page-hero 在 ≤900 用「距頂 68% 起始」的固定比例縱向漸層切割背景
   （見 401行 html.valve-variant-f .valve-page .page-hero { background:
   linear-gradient(#f7f8f4 0 68%,var(--f-green) 68%); }），但切割線位置是
   整個 hero 區塊高度的固定比例，不會隨文案長度（副標行數/CTA排列）跟著照片卡
   移動。實測：760px 寬時色塊邊界落在照片卡由上算 42% 處（中段），390/430px 寬時
   落在照片卡最頂端附近——兩者都會切穿照片卡，判定為缺陷。
   改法：拿掉 .page-hero 的固定比例漸層，改在 .page-hero-visual 自己疊一層
   滿版背景色，起點固定在照片卡「自身」頂緣（top:0，不受文案長度影響），
   往下延伸到 .page-hero 的 padding-bottom（即綠色一路貼到 hero 區塊底部）。
   左右出血用 left:50%+width:100vw+margin-left:-50vw 技巧貼齊視窗邊緣；
   .page-hero 本身有 overflow:hidden（index.html 內建 <style> 136-142行），
   會把 100vw 溢出的部分裁掉，不會撐出橫向捲軸。.valve-hero-art 在 F 版已有
   z-index:1（153行），圖片本身穩定疊在新背景之上，不需再加 z-index。 */
@media (max-width: 900px) {
    html.valve-variant-f .valve-page .page-hero {
        background: #f7f8f4;
    }
    html.valve-variant-f.valve-variant-f .valve-page .page-hero-visual::before { /* 類別寫兩次＝刻意加一層特異度，不靠「寫在 279 行後面」才贏；搬動順序也不會讓綠塊消失 */
        /* 279行 html:is(d,e,f,g) .valve-page .page-hero-visual::before 有一條全域
           display:none（配合 D 版的「01」浮水印數字隱藏用），本規則需明示
           display:block 蓋回來，否則單純疊加 content/background 不會生效
           （實測發現：只寫 content/background 不寫 display，背景不會出現）。 */
        display: block;
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 100vw;
        margin-left: -50vw;
        bottom: -86px;
        background: var(--f-green);
    }
}
@media (max-width: 620px) {
    /* .page-hero 在此斷點 padding-bottom 改為 70px（見 405-407行），背景延伸量同步收窄 */
    html.valve-variant-f.valve-variant-f .valve-page .page-hero-visual::before { /* 類別寫兩次＝刻意加一層特異度，不靠「寫在 279 行後面」才贏；搬動順序也不會讓綠塊消失 */
        bottom: -70px;
    }
}

/* 缺陷③（手機截圖）：副標「（球塞閥）系列」比大標「不鏽鋼球閥」視覺內縮。
   成因：全形開括號「（」字符本身，在 Noto Serif TC / Noto Sans TC 等中文字型裡，
   墨色不是貼齊字符格左緣，而是偏右繪製（CJK 標點常見的「預留半格空白」排版慣例）。
   實測（canvas measureText 比對同字級漢字的 actualBoundingBoxLeft）：
   390px/18.6px 字級下「（」墨色左緣比同格漢字晚 11px 才開始（約 -0.59em）；
   1440px/34.72px 字級下晚 22px（約 -0.63em）。用 text-indent 負值把整行拉回
   對齊，取兩者中間值 -0.6em。此問題源於字符結構，桌機同樣存在且比例一致，
   不限斷點套用，不影響桌機版面（僅整行左移約0.6字高的視覺量，不改變欄寬/換行）。 */
html.valve-variant-f .valve-page .page-hero h1 small {
    text-indent: -0.6em;
}

/* 缺陷④（手機截圖）：說明文字末行只剩「件」一個字（孤字）。
   成因：Hero 副標文字在 390~402px 寬換行後，最後一行只剩 2~3 字殘字
   （實測 400/402px 寬時末行僅「配件」兩字，與回報的「只剩一個字」現象相符）。
   不改文案，先試 text-wrap:pretty（CJK 逐字斷行，實測 A/B 比對在本頁完全無效，
   390~430px 加不加此屬性換行結果逐字元相同，Chrome 153 對 CJK 段落的孤行演算法
   未生效），改用 text-wrap:balance（讓整段文字的每行寬度盡量平均，不只顧慮最後
   一行）。實測 390/393/400/402px 下原本 3 行、末行 18 字寬的短尾巴消失，
   全部平均成 3 行更均勻的排版；390~1440px 全斷點都測過，沒有產生新的孤行。 */
html.valve-variant-f .valve-page .page-hero-subtitle {
    text-wrap: balance;
}

/* C. 字級套全站基準（比照首頁 home.css .hp-hero h1 / style.css .section-title）
   Hero H1：原 F 版另開一組 clamp(37px,4vw,56px)（148行），比全站基準大。
   改回與首頁 .hp-hero h1（home.css 50-55行）相同的 clamp(30px,3.2vw,44px)，
   ≤900px 時比照全站同斷點（home.css 569行）改為固定 27px。
   字重（700）/行高（1.5）/letter-spacing（.1em，隨字級等比例縮放）/顏色皆不變動。 */
html.valve-variant-f .valve-page .page-hero h1 {
    font-size: clamp(30px, 3.2vw, 44px);
}
@media (max-width: 900px) {
    html.valve-variant-f .valve-page .page-hero h1 {
        font-size: 27px;
    }
}

/* 區塊大標（.section-title，「產品系列」「應用領域」）：原本只有 30px（基礎）與
   page-redesign.css 630行殘留的 25px（≤620），缺 ≤1180 中間級距。
   改為 30 / 26(≤1180) / 24(≤620) 三級，比照任務指定基準。 */
@media (max-width: 1180px) {
    html.valve-variant-f .valve-page .section-title { font-size: 26px; }
}
@media (max-width: 620px) {
    html.valve-variant-f .valve-page .section-title { font-size: 24px; }
}

/* 英文小標（.page-hero-kicker）實測已是 11px / letter-spacing .22em
   （page-redesign.css 293-300行），已符合全站基準，此處不需調整。 */