/* ═══════════════════════════════════════
   EVERHOT 恒热 — Design System
   官方 VI（VI-2026 定版）色彩/字体 + Rheem 级排版结构标准。规范摘录见 ../VI-SPEC.md
   ── 标准色（official）──────────────────────────
   主色 恒热红 #BF1924（RGB 191/25/36）：避免大面积使用，比例 ≤30%，配合次级色。
   次级色为【中性灰】（背景填充）：Black #2F302F / Dark Gray #515253 / Grey #86898B / White。
   注意：官方中性色是中性/冷灰，不是暖色；VI 中无蓝/navy。
   ── 辅助色（仅点缀）─────────────────────────────
   暖（家用）：Yellow #F2B03D / Orange #D8632F / Burgundy #6C1525
   冷（可持续）：Light Teal #41A9A9 / Dark Teal #398087 / Chartreuse #8AAE42 / Green #64863C
   ── 字体 ───────────────────────────────────────
   阿里巴巴普惠体 3.0（中英统一）：标题115Black / 副标65Medium / 内文45Regular。
   字体文件放 assets/fonts/（见该目录 README），未就位时回退系统字。
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; letter-spacing: 0; }
:root {
  /* 主色 — 恒热红（≤30%，点缀/强调） */
  --red:     #BF1924;   /* EverHot Red 恒热红 (official RGB 191/25/36) */
  --red-dk:  #9E141D;   /* pressed/hover */
  --red-hi:  #C81C28;   /* 红场渐变高光（顶部更亮） */
  --red-lo:  #8E1018;   /* 红场渐变低光（边缘更深） */
  /* 次级色 — 暖中性灰（创意决策：官方为冷灰，但为契合恒热「温暖」品牌感，
     改用克制的暖中性/高级灰；红主色 + 暖灰点缀，绿仅用于可持续场景） */
  --black:   #2B2623;   /* 暖近黑 */
  --dark:    #2B2623;   /* 深色大块 → 暖炭灰（取代冷灰 #2F302F） */
  --ink:     #2B2623;   /* 近黑文本（暖） */
  --gray:    #5A534E;   /* 正文（暖中灰） */
  --gray-lt: #6D655D;   /* 弱化文本（暖灰）— 调深至 ≥4.5:1 达 WCAG AA */
  --border:  #E8E2DC;   /* 边框（暖浅灰） */
  --border-lt: #F1EDE8; /* 发丝线（暖） */
  --surface: #F6F3EF;   /* 浅面（暖米白） */
  --surface-2: #FBF9F6;
  --page:    #FFFFFF;
  /* 辅助色 — 仅点缀，须配合主色+次级色 */
  --aux-yellow: #F2B03D; --aux-orange: #D8632F; --aux-burgundy: #6C1525;
  --aux-teal: #41A9A9; --aux-teal-dk: #398087; --aux-chartreuse: #8AAE42; --aux-green: #64863C;
  --accent:  #BF1924;   /* 强调点缀统一为恒热红（Rheem 级克制；橙/teal/green 仅留作热水波形小点缀） */
  --green:   #64863C;   /* 仅供热水波形图标等小点缀，勿作区块色 */
  --navy:    #2B2623;   /* legacy alias → 暖炭灰（VI 无蓝） */
  /* 辅助图形：图表纸底纹（恒热网格模式，作背景纹理 ≤30%） */
  --grid-line: rgba(43,38,34,.05); --grid-line-d: rgba(255,255,255,.07); --grid-size: 28px;
  /* 字体 — Alibaba PuHuiTi 3.0 */
  /* 拉丁文对标 Rheem 几何无衬线（Mulish 正文 / Montserrat 标题）；中文自动落到阿里普惠体 3.0。 */
  --font:      "Mulish","Alibaba PuHuiTi 3.0","AlibabaPuHuiTi-3-55-Regular","PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --font-head: "Montserrat","Alibaba PuHuiTi 3.0 Heavy","Alibaba PuHuiTi 3.0","AlibabaPuHuiTi-3-105-Heavy","PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  /* 圆角（Rheem 级硬朗工程感：方正、克制） */
  --r-sm:    4px;
  --r:       6px;
  --r-lg:    10px;
  --r-xl:    16px;
  --r-pill:  999px;  /* 标签/胶囊统一全圆角 */
  /* 字号模数阶（统一节奏，取代散装 clamp） */
  --fs-display: clamp(42px, 6vw, 80px);
  --fs-h1:      clamp(32px, 4.5vw, 54px);
  --fs-h2:      clamp(28px, 3.4vw, 44px);
  --fs-h3:      clamp(20px, 2.2vw, 28px);
  --fs-lead:    clamp(16px, 1.3vw, 18px);
  --fs-body:    16px;
  --fs-sm:      13px;
  --lh-tight: 1.04; --lh-head: 1.14; --lh-body: 1.65;
  --tracking-tight: -0.02em;
  /* 区块间距（Rheem 级留白） */
  --sp-section: clamp(40px,5.5vw,80px);
  /* 间距阶（4px 基数的一把尺：auto-layout gap/padding 统一取此，杜绝散装 px） */
  --space-05: 2px;  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4:  16px; --space-5: 20px;  --space-6: 24px;  --space-7: 32px;
  --space-8:  40px; --space-9: 48px;  --space-10: 64px;
  /* 语义微染（hover/选中态浅底，取代内联 rgba / 散装粉底） */
  --red-tint:   rgba(191,25,36,.05);  /* 极浅：行/单元格底 */
  --red-tint-2: rgba(191,25,36,.09);  /* 稍深：选中/激活态底、标签底 */
  --red-tint-3: rgba(191,25,36,.04);  /* 最浅：错误输入底 */
  --red-hover:  rgba(191,25,36,.06);  /* 图标/按钮 hover 填充 */
  --red-active: rgba(191,25,36,.10);  /* 激活/hover 图标底稍深 */
  --red-line:   rgba(191,25,36,.18);  /* 标签实底 / 弱边框 */
  --red-line-2: rgba(191,25,36,.40);  /* 链接下划线等中强边框 */
  /* 品牌红阴影（FAB / 置顶卡等强调投影） */
  --red-shadow:    0 8px 24px rgba(191,25,36,.34);
  --red-shadow-lg: 0 12px 30px rgba(191,25,36,.42);
  --red-shadow-sm: 0 6px 22px rgba(191,25,36,.12);
  /* 成功态（对比/复制反馈等，非品牌绿区块） */
  --ok:      #1A8A3C;
  --ok-tint: #F0FAF2;
  /* 阴影 / 分层电梯（柔、分层；弹层按层级取用） */
  --shadow:    0 1px 2px rgba(43,38,34,.04), 0 8px 24px rgba(43,38,34,.08);
  --shadow-lg: 0 4px 12px rgba(43,38,34,.06), 0 24px 48px rgba(43,38,34,.12);
  --elev-1:    0 1px 2px rgba(43,38,34,.05);
  --elev-2:    0 4px 12px rgba(43,38,34,.10);
  --elev-3:    0 8px 32px rgba(43,38,34,.12);
  /* ── 标准品牌底板（baseplate）──────────────────────────────────────
     线稿层=everhot-baseplate.svg（栅格+椭圆），字标层=everhot-wordmark.svg（官方 EVERHOT 矢量）。
     此处仅定义「创意颜色层」默认值；按需在使用处覆盖 --baseplate-bg 即可换色，线稿/字标不变。 */
  --baseplate-bg: radial-gradient(135% 150% at 50% -12%, var(--red-hi) 0%, var(--red) 44%, var(--red-lo) 100%);
}
/* 阿里巴巴普惠体 3.0 — 中英统一品牌字（official VI）。
   local() 优先：装有该字体的环境直接用；否则取 assets/fonts/ 下 woff2；
   都没有时回退 PingFang SC / YaHei。文件就位说明见 assets/fonts/README.md。 */
@font-face {
  font-family: "Alibaba PuHuiTi 3.0"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("Alibaba PuHuiTi 3.0 Regular"), local("AlibabaPuHuiTi-3-55-Regular"),
       url("/assets/fonts/AlibabaPuHuiTi-3-55-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Alibaba PuHuiTi 3.0"; font-style: normal; font-weight: 500; font-display: swap;
  src: local("Alibaba PuHuiTi 3.0 Medium"), local("AlibabaPuHuiTi-3-65-Medium"),
       url("/assets/fonts/AlibabaPuHuiTi-3-65-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Alibaba PuHuiTi 3.0"; font-style: normal; font-weight: 900; font-display: swap;
  src: local("Alibaba PuHuiTi 3.0 Heavy"), local("AlibabaPuHuiTi-3-105-Heavy"),
       url("/assets/fonts/AlibabaPuHuiTi-3-105-Heavy.woff2") format("woff2");
}
/* 全站基础「地板」：恒热网格虚化线条（暖灰极淡），统一所有浅底区块的底纹气质 */
body { font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 16px; line-height: 1.65;
  background-color: var(--page);
  background-image: linear-gradient(rgba(43,38,34,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(43,38,34,.035) 1px, transparent 1px);
  background-size: 44px 44px; }

/* ═══════════════════════════════════════
   标准品牌底板 .eh-baseplate（设计语言 · LOCKED）
   用法：给任意区块加 class="eh-baseplate"（线稿+幽灵字由下方「全站统一底板」规则提供）。
   颜色：创意层 --baseplate-bg，使用处可覆盖；线稿/字标恒定。
   ═══════════════════════════════════════ */
.eh-baseplate {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--baseplate-bg); color: #fff;
}
.eh-baseplate > * { position: relative; z-index: 1; }
/* 创意颜色变体（仅换底色，线稿不变）——示例，可继续扩展 */
.eh-baseplate--ink    { --baseplate-bg: radial-gradient(125% 130% at 32% 30%, #3a332e 0%, #2b2623 55%, #17130f 100%); }
.eh-baseplate--teal   { --baseplate-bg: radial-gradient(125% 130% at 32% 30%, #41a9a9 0%, #398087 50%, #1f4a4f 100%); }
.eh-baseplate--ember  { --baseplate-bg: radial-gradient(135% 150% at 50% -12%, var(--aux-orange) 0%, var(--red) 50%, var(--aux-burgundy) 100%); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 900; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
/* 焦点环（可达性 + 精致度） */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 3px; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(var(--space-4),4vw,var(--space-8)); }

/* === UTILITY BAR — Rheem: white bg, small bold links, thin bottom border === */
.utility-bar { background: #fff; border-bottom: 1px solid var(--border-lt); font-size: 12px; padding: 7px 0; }
.utility-inner { display: flex; justify-content: space-between; align-items: center; }
.utility-left, .utility-right { display: flex; gap: var(--space-4); align-items: center; }
.utility-bar a { color: var(--gray); font-weight: 600; }
.utility-bar a:hover { color: var(--red); }
.utility-bar .div { color: var(--border); }
.group-link { color: var(--dark) !important; font-weight: 700; }

/* === MASTHEAD — Rheem: white, sticky, red 4px bottom line === */
.masthead { background: #fff; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border-lt); }
.brand-line { height: 4px; background: var(--red); }
.masthead-inner { height: 76px; display: flex; align-items: center; gap: var(--space-7); }
/* 官方 VI LOGO（EVERHOT 弧形 swoosh + 恒热）— 以图片呈现，文字保留供 SEO/无障碍但视觉隐藏 */
.logo { display: inline-block; flex-shrink: 0; width: 118px; height: 44px; background: url(/assets/img/brand/everhot-logo.png) left center / contain no-repeat; line-height: 0; }
.logo-en, .logo-cn { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.primary-nav { display: flex; gap: 0; flex: 1; }
/* Rheem nav: no border-radius, hover shows red underline */
.primary-nav a { padding: 0 var(--space-4); height: 76px; line-height: 76px; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; border-bottom: 3px solid transparent; }
.primary-nav a:hover { color: var(--red); border-bottom-color: var(--red); }
.masthead-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.icon-btn { background: none; border: none; cursor: pointer; font-size: 16px; padding: 6px; }

/* === BUTTONS — Rheem: 8px radius, bold, solid fill === */
.btn { display: inline-block; padding: 13px 28px; border-radius: var(--r); font-size: 14px; font-weight: 800; cursor: pointer; border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: 16px; }
.btn-brand { background: var(--red); color: #fff; border-color: var(--red); }
.btn-brand:hover { background: var(--red-dk); border-color: var(--red-dk); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-light { background: #fff; color: var(--red); border-color: #fff; }
.btn-light:hover { background: var(--surface); }

/* === HERO — Rheem: full-bleed photo, overlay text on left, no border-radius === */
.hero { position: relative; min-height: 460px; display: flex; align-items: center; overflow: hidden; background: var(--ink); color: #fff; padding: clamp(52px,6.5vw,84px) 0; }
/* Rheem hero: poster image shown first, looping muted video fades in on top (full-bleed) */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-poster-mobile { display: none; }
.hero-video { opacity: 0; transition: opacity .6s ease-in; }
.hero-video.is-ready { opacity: 1; }
/* Rheem hero: full-bleed media with a left-anchored dark scrim so headline stays legible */
.hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(43,38,34,.86) 0%, rgba(43,38,34,.64) 42%, rgba(43,38,34,.18) 78%, rgba(43,38,34,.08) 100%); }
/* 标准底板叠层（hero 专用）：仅线稿层(栅格+椭圆)，淡淡叠在媒体上，不放巨型字以免压住标题 */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("/assets/img/brand/everhot-baseplate.svg") center / cover no-repeat;
  opacity: .55; mix-blend-mode: screen; }
.hero-content { position: relative; z-index: 2; max-width: 600px; }
.hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 18px; }
.hero h1 { font-size: var(--fs-display); font-weight: 900; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin-bottom: 12px; }
.hero p { font-size: 16px; color: rgba(255,255,255,.65); line-height: 1.75; margin-bottom: 36px; }
/* 核心产品主张：大户型选恒热，多点用水没烦恼（功能购买理由，仅次于情感主标） */
.hero-claim { font-size: clamp(17px,2vw,22px); font-weight: 700; color: rgba(255,255,255,.9); line-height: 1.45; letter-spacing: var(--tracking-tight); margin-bottom: 28px; }
/* 品牌英文标语：与中文主标配对的显性 brand lockup（凸显、非小字水印） */
.hero-slogan { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-head); font-size: clamp(15px,1.7vw,20px); font-weight: 800; letter-spacing: 4px; text-transform: uppercase; color: #fff; margin-bottom: 24px; }
.hero-slogan::before { content: ""; width: 40px; height: 3px; background: var(--red); display: inline-block; border-radius: 2px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* staggered entrance for hero copy */
.hero-eyebrow, .hero h1, .hero-slogan, .hero-claim, .hero-actions { opacity: 0; transform: translateY(16px); animation: heroRise .7s cubic-bezier(.16,.84,.44,1) forwards; }
.hero h1 { animation-delay: .08s; }
.hero-slogan { animation-delay: .16s; }
.hero-claim { animation-delay: .22s; }
.hero-actions { animation-delay: .3s; }
@keyframes heroRise { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .hero-video { transition: none; }
  .hero-eyebrow, .hero h1, .hero-slogan, .hero-claim, .hero-actions { animation: none; opacity: 1; transform: none; }
}

/* === DUAL ENTRY — Rheem style: full-bleed split, sharp corners === */
.dual-entry { display: grid; grid-template-columns: 1fr 1fr 1fr; min-height: 300px; }
.entry-card { position: relative; overflow: hidden; padding: clamp(var(--space-7),5vw,var(--space-10)); display: flex; align-items: flex-end; color: #fff; }
.entry-res { background: url(/assets/img/home-card1.webp) center/cover no-repeat; }
.entry-com { background: url(/assets/img/home-card3.webp) center/cover no-repeat; }
.entry-pro { background: url(/assets/img/home-card-2.webp) center/cover no-repeat, var(--ink); }
.entry-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(43,38,34,.85) 0%, rgba(43,38,34,.35) 60%, rgba(43,38,34,.15) 100%); transition: background .2s; }
.entry-card:hover .entry-overlay { background: linear-gradient(0deg, rgba(43,38,34,.88) 0%, rgba(43,38,34,.45) 60%, rgba(43,38,34,.25) 100%); }
.entry-text { position: relative; }
.entry-tag { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--red); margin-bottom: 10px; background: var(--red-line); display: inline-block; padding: 3px 10px; border-radius: var(--r-sm); }
.entry-card h2 { font-size: var(--fs-h3); font-weight: 900; letter-spacing: -0.015em; margin-bottom: var(--space-2); }
.entry-card p { font-size: 13px; color: rgba(255,255,255,.65); margin-bottom: var(--space-4); }
.entry-link { font-size: 13px; font-weight: 700; color: var(--red); border-bottom: 1px solid var(--red-line-2); padding-bottom: 1px; }
.entry-card:hover .entry-link { color: var(--red-dk); border-color: var(--red-dk); }
/* Air/Water 子入口（rheem.com 式：每卡多条产品大类直达） */
.entry-links { display: flex; gap: 10px; flex-wrap: wrap; }
.entry-links a { font-size: 13px; font-weight: 800; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); padding: var(--space-2) 14px; border-radius: var(--r-sm); transition: background .15s, border-color .15s, color .15s; }
.entry-links a:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* === 按品类选购 tiles (rheem「Shop by category」parity) === */
.cat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.cat-tile { display: flex; align-items: center; gap: 14px; padding: 22px var(--space-5); background: var(--page); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color .15s, box-shadow .2s, transform .12s; }
.cat-tile:hover { border-color: var(--red); box-shadow: var(--shadow); transform: translateY(-2px); }
.cat-ic { font-size: 30px; line-height: 1; flex-shrink: 0; }
.cat-tx { display: flex; flex-direction: column; gap: var(--space-05); min-width: 0; }
.cat-tx strong { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.cat-tx em { font-size: 12px; font-style: normal; color: var(--gray); line-height: 1.3; }
.cat-ar { margin-left: auto; font-size: 18px; color: var(--gray-lt); transition: color .15s, transform .15s; flex-shrink: 0; }
.cat-tile:hover .cat-ar { color: var(--red); transform: translateX(3px); }
@media (max-width: 900px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } }

/* === 为什么选择恒热 value strip (rheem「Why Rheem」parity) === */
.value-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.value-item { text-align: center; }
.value-ic { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--page); border: 1px solid var(--border); font-size: 26px; margin-bottom: var(--space-4); box-shadow: var(--shadow); }
.value-item h4 { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: var(--space-2); }
.value-item p { font-size: 13px; color: var(--gray); line-height: 1.7; }
@media (max-width: 900px) { .value-strip { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-6); } }
@media (max-width: 480px) { .value-strip { grid-template-columns: 1fr; } }

/* === 可持续发展 支柱卡 (rheem「Degrees of Change」parity) === */
.pillar-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }
.pillar-card { background: var(--page); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px 26px; display: flex; flex-direction: column; gap: var(--space-3); }
.pillar-ic { font-size: 34px; line-height: 1; }
.pillar-card h3 { font-size: 18px; font-weight: 900; color: var(--ink); }
.pillar-card h3 span { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray-lt); margin-top: 3px; }
.pillar-target { align-self: flex-start; background: var(--red-tint-2); color: var(--red); font-size: 12px; font-weight: 800; padding: 5px var(--space-3); border-radius: var(--r-pill); line-height: 1.4; }
.pillar-card ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-05); }
.pillar-card li { font-size: 13px; color: var(--gray); line-height: 1.5; padding-left: 18px; position: relative; }
.pillar-card li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
@media (max-width: 880px) { .pillar-grid { grid-template-columns: 1fr; } }

/* === 研发流程 步骤 (innovation process) === */
.proc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-5); counter-reset: proc; }
.proc-step { position: relative; background: var(--page); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 22px; }
.proc-step::before { counter-increment: proc; content: counter(proc, decimal-leading-zero); display: block; font-family: var(--font-head); font-size: 15px; font-weight: 900; color: var(--red); letter-spacing: 1px; margin-bottom: var(--space-3); }
.proc-step h4 { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: var(--space-2); }
.proc-step p { font-size: 13px; color: var(--gray); line-height: 1.7; }
@media (max-width: 880px) { .proc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .proc-grid { grid-template-columns: 1fr; } }

/* === 分类页 facet 筛选条 (rheem「filter」parity) === */
.cat-filter { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--border-lt); }
.cat-filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cat-chip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: var(--space-2) var(--space-4); font-size: 13px; font-weight: 700; color: var(--gray); cursor: pointer; font-family: var(--font); transition: background .15s, color .15s, border-color .15s; }
.cat-chip:hover { border-color: var(--red); color: var(--red); }
.cat-chip.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.cat-count { font-size: 12px; font-weight: 700; color: var(--gray-lt); white-space: nowrap; }

/* === 统一线性图标 (替代 emoji) === */
.ev-ico { display: block; }
.value-ic { color: var(--red); }
.value-ic .ev-ico { width: 26px; height: 26px; }
.cat-ic { color: var(--red); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--surface); }
.section-alt .cat-ic { background: var(--page); }
.cat-ic .ev-ico { width: 26px; height: 26px; }
.pillar-ic { color: var(--red); }
.pillar-ic .ev-ico { width: 32px; height: 32px; }
.ev-aud-ic { color: var(--red); display: inline-flex; }
.ev-aud-ic .ev-ico { width: 32px; height: 32px; }
.ev-mega-card-ic { color: var(--red); display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--surface); }
.ev-mega-card-ic .ev-ico { width: 22px; height: 22px; }
.ico-inline { display: inline-flex; vertical-align: -4px; color: var(--red); margin-right: var(--space-1); }
.ico-inline .ev-ico { width: 18px; height: 18px; }
.peg-icon { color: var(--red); display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--surface); flex-shrink: 0; }
.section-alt .peg-icon { background: var(--page); }
.peg-icon .ev-ico { width: 28px; height: 28px; }
.cmp-pick-ic { color: var(--red); display: inline-flex; }
.cmp-pick-ic .ev-ico { width: 24px; height: 24px; }
/* 快捷任务条（rheem.com 式服务直达） */
.qt-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.qt-card { display: flex; align-items: center; gap: 14px; padding: var(--space-5) var(--space-5); background: var(--page); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color .15s, box-shadow .2s, transform .12s; }
.qt-card:hover { border-color: var(--red); box-shadow: var(--shadow); transform: translateY(-2px); }
.qt-ic { color: var(--red); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--surface); flex-shrink: 0; }
.qt-card:hover .qt-ic { background: var(--red-active); }
.qt-ic .ev-ico { width: 24px; height: 24px; }
.qt-tx { display: flex; flex-direction: column; gap: var(--space-05); min-width: 0; }
.qt-tx strong { font-size: 15px; font-weight: 800; color: var(--ink); }
.qt-tx em { font-size: 12px; font-style: normal; color: var(--gray); }
.qt-ar { margin-left: auto; font-size: 18px; color: var(--gray-lt); transition: color .15s, transform .15s; flex-shrink: 0; }
.qt-card:hover .qt-ar { color: var(--red); transform: translateX(2px); }
@media (max-width: 900px) { .qt-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .qt-grid { grid-template-columns: 1fr; } }
/* 新闻「查看全部」链接 */
.news-more { font-size: 14px; font-weight: 800; color: var(--red); }
.news-more:hover { color: var(--red-dk); }

/* === SECTION BASE — Rheem: generous padding, sharp dividers === */
.section { padding: var(--sp-section) 0; background: transparent; } /* 透出 body 网格地板 */
.section-alt { background: var(--surface); }
.section-head { margin-bottom: var(--space-7); }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--red); margin-bottom: var(--space-3); }
.section-head h2 { font-size: var(--fs-h2); font-weight: 900; letter-spacing: var(--tracking-tight); line-height: var(--lh-head); color: var(--ink); margin-bottom: 14px; }
.section-head p { font-size: 14px; color: var(--gray); }
.center-light { text-align: center; }
.eyebrow.light { color: rgba(255,255,255,.6); }
.lead-light { color: rgba(255,255,255,.7); font-size: 15px; max-width: 520px; margin: 0 auto; }
.h2-sub-en { display: block; font-family: var(--font-head); font-size: .42em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-lt); margin-top: var(--space-2); }
.section-dark .h2-sub-en, .section-green .h2-sub-en, .section-cta .h2-sub-en, .page-hero .h2-sub-en, .pd-hero .h2-sub-en, .hero .h2-sub-en { color: rgba(255,255,255,.5); }

/* ═══════════════════════════════════════
   EVERHOT 辅助图形（official VI「AUXILIARY GRAPHIC」）
   1) 图表纸底纹 = 恒热网格模式：作背景纹理，≤30% 版面（masked）。
   2) WARM U 曲线：呼应 logo swoosh，作 eyebrow 下分隔（无法用曲线时退化为横线）。
   注意：teal/green/orange 仅可作热水波形等「小点缀」，不得作区块底色。
═══════════════════════════════════════ */
/* ═══ 标准品牌底板（baseplate）· 全站统一 LOCKED ═══════════════════
   所有品牌色表面共用同一底板：① 线稿层(::before, SVG 栅格+椭圆双线)
   ② 幽灵字层(::after, EVERHOT/Montserrat)。颜色由各表面自身背景决定（创意色轴）。
   三要素几何锁定 → 改 everhot-baseplate.svg 或本规则即全站统一，杜绝碎片化。 */
.section-dark, .section-cta, .page-hero, .section-green, .pd-hero, .ev-brandfield {
  position: relative; isolation: isolate; overflow: hidden;
}
.section-dark > *, .section-cta > *, .page-hero > *, .section-green > *, .pd-hero > *,
.ev-brandfield > * { position: relative; z-index: 1; }
/* ① 线稿层：栅格 + 椭圆双线（白色半透明，可叠在任意色底上） */
.section-dark::before, .section-cta::before, .section-green::before,
.page-hero::before, .pd-hero::before, .ev-brandfield::before, .eh-baseplate::before,
.ev-aud-head::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/assets/img/brand/everhot-baseplate.svg") center / cover no-repeat;
}
/* ② 幽灵字层：官方 EVERHOT 字标（VI 矢量，由 everhot-logo-white.png potrace 描摹，含 swoosh） */
.section-dark::after, .section-cta::after, .section-green::after,
.page-hero::after, .pd-hero::after, .ev-brandfield::after, .eh-baseplate::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(64%, 720px); aspect-ratio: 380 / 86;
  background: url("/assets/img/brand/everhot-wordmark.svg") center / contain no-repeat;
  opacity: .08; z-index: 0; pointer-events: none; user-select: none;
}
/* 品牌红场 ev-brandfield 底色（official VI 封面红） */
.ev-brandfield { color: #fff;
  background: var(--baseplate-bg); }
/* WARM U 曲线：品牌弧形分隔（呼应 logo swoosh） */
.section-head .eyebrow::after {
  content: ""; display: block; width: 56px; height: 11px; margin-top: var(--space-3);
  background: left center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 11'%3E%3Cpath d='M2 3 Q28 14 54 3' fill='none' stroke='%23BF1924' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.section-head.center-light .eyebrow::after, .center-light .eyebrow::after { margin-left: auto; margin-right: auto; }
.hero-eyebrow::after, .page-hero .eyebrow::after {
  content: ""; display: block; width: 56px; height: 11px; margin-top: var(--space-3);
  background: left center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 11'%3E%3Cpath d='M2 3 Q28 14 54 3' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: .85;
}

/* === PRODUCT BLOCK — Rheem style: sharp card, red hover border === */
.product-block { margin-bottom: 36px; }
.block-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: var(--space-5); padding-bottom: 10px; border-bottom: 3px solid var(--red); display: flex; align-items: baseline; gap: var(--space-3); }
.block-title span { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--gray-lt); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: var(--space-5); align-items: stretch; }
/* 首页精选：固定 3 列，2 行整齐排布（rheem 级克制） */
.product-grid[data-featured] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .product-grid[data-featured] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .product-grid[data-featured] { grid-template-columns: 1fr; } }
.pc-media-icon-img { width: min(58%, 150px); height: min(58%, 150px); object-fit: contain; display: block; }
.pc-inline-icon-img { width: 28px; height: 28px; object-fit: contain; display: inline-block; vertical-align: middle; }
.ss-ic-img, .selw-rec-ic-img { width: 28px; height: 28px; object-fit: contain; display: inline-block; vertical-align: middle; }
.product-card { background: var(--page); border: 1px solid var(--border); border-radius: var(--r-lg); transition: box-shadow .2s, border-color .2s, transform .2s; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.product-card:hover { border-color: var(--red); box-shadow: var(--shadow); }
.pc-img { width: 100%; height: 132px; object-fit: contain; display: block; background: var(--surface); padding: var(--space-4); margin-bottom: 14px; }
.product-card h4 { font-size: 16px; font-weight: 900; margin: 0 var(--space-5) 6px; color: var(--ink); }
.product-card p { margin-left: 18px; margin-right: 18px; }
.product-card .model { margin-left: 18px; }
.product-card p { font-size: 13.5px; color: var(--gray); line-height: 1.65; margin-bottom: var(--space-3); }
.model { font-size: 11px; color: var(--gray-lt); font-style: italic; }

/* === INNOVATION — deep warm espresso band === */
.section-dark { background: var(--dark); color: #fff; padding: var(--sp-section) 0; }
.innovation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; }
.innovation-text h2 { font-size: var(--fs-h2); font-weight: 900; letter-spacing: var(--tracking-tight); margin: var(--space-3) 0 var(--space-4); }
.innovation-text p { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.8; margin-bottom: var(--space-6); }
.feature-list { margin-bottom: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); }
.feature { font-size: 14px; color: rgba(255,255,255,.65); }
.feature strong { color: #fff; margin-right: var(--space-2); }
.innovation-visual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.visual-stat { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); padding: 28px var(--space-5); text-align: center; }
.vs-val { display: block; font-size: 32px; font-weight: 900; color: #fff; border-bottom: 2px solid var(--red); padding-bottom: var(--space-2); margin-bottom: var(--space-2); }
.vs-label { font-size: 11px; color: rgba(255,255,255,.45); letter-spacing: 1px; }

/* === SUSTAINABILITY === */
/* 可持续发展：恒热绿场（official 辅助色 Green #64863C），仅用于可持续语境 */
.section-green { background: radial-gradient(135% 150% at 50% -12%, #7A9E4A 0%, var(--green) 42%, #3F5A2A 100%); color: #fff; padding: var(--sp-section) 0; }
.sustain-stats { display: flex; gap: var(--space-9); justify-content: center; flex-wrap: wrap; margin-top: var(--space-6); }
.sustain-stats div { text-align: center; font-size: 13px; color: rgba(255,255,255,.75); }
.sustain-stats span { display: block; font-size: 40px; font-weight: 900; color: #fff; margin-bottom: var(--space-1); }

/* === FIND PRO === */
.find-pro { background: var(--surface); }
.find-pro .section-head { text-align: center; }
.find-pro p { font-size: 14px; color: var(--gray); }
.pro-search { display: flex; max-width: 560px; margin: 28px auto var(--space-3); gap: 0; }
.pro-search input { flex: 1; padding: 13px 18px; border: 1px solid var(--border); border-right: none; border-radius: var(--r) 0 0 var(--r); font-size: 14px; font-family: var(--font); outline: none; }
.pro-search input:focus { border-color: var(--red); }
.pro-search .btn { border-radius: 0 var(--r) var(--r) 0; }
.pro-note { text-align: center; font-size: 12px; color: var(--gray-lt); }

/* === NEWS === */
.news-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.news-card { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: box-shadow .15s; }
.news-card:hover { box-shadow: var(--shadow); }
.news-img { height: 180px; background: var(--surface) center/cover no-repeat; }
.news-1 { background-image: url(/assets/img/home-card1.webp); }
.news-2 { background-image: url(/assets/img/sust-product-new.webp); }
.news-3 { background-image: url(/assets/img/home-card3.webp); }
.news-body { padding: 18px; }
.news-date { font-size: 11px; color: var(--gray-lt); display: block; margin-bottom: 6px; }
.news-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 7px; color: var(--ink); }
.news-card p { font-size: 12px; color: var(--gray); line-height: 1.65; }

/* === SUPPORT CTA — Rheem: full-bleed red band === */
.section-cta { background: var(--baseplate-bg); color: #fff; padding: var(--sp-section) 0; text-align: center; }
.section-cta h2 { font-size: var(--fs-h2); font-weight: 900; letter-spacing: var(--tracking-tight); margin-bottom: 10px; }
.section-cta p { font-size: 14px; color: rgba(255,255,255,.75); margin-bottom: var(--space-7); }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* 品牌 slogan（结尾红场水印旁的收束语，由 nav.js 注入） */
.section-cta .cta-slogan { margin: 26px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 2px; color: rgba(255,255,255,.62); }
.section-cta .cta-slogan::before, .section-cta .cta-slogan::after { content: ""; display: inline-block; width: 28px; height: 1px; background: rgba(255,255,255,.4); vertical-align: middle; }
.section-cta .cta-slogan::before { margin-right: var(--space-3); }
.section-cta .cta-slogan::after { margin-left: var(--space-3); }
/* 选型向导：大户型场景的 slogan 呼应 */
.selw-slogan { text-align: center; margin: -2px 0 var(--space-5); font-size: 15px; font-weight: 800; letter-spacing: 1px; color: var(--red); }

/* === FOOTER — Rheem: deep ink, white links, red hover === */
.footer { background: #211C19; padding: 56px 0 0; } /* 暖近黑（契合恒热温暖感） */
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr; gap: var(--space-7); padding-bottom: var(--space-9); }
.footer-brand .logo { margin-bottom: 14px; width: 132px; height: 50px; background-image: url(/assets/img/brand/everhot-logo-white.png); }
.footer-brand p { font-size: 13px; color: rgba(255,255,255,.58); line-height: 1.8; }
.footer-slogan { font-family: var(--font-head); font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 14px; }
.footer-col strong { display: block; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7); margin-bottom: 14px; }
.footer-col strong span { display: block; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-top: var(--space-05); }
.footer-col a { display: block; font-size: 13px; color: rgba(255,255,255,.62); margin-bottom: 9px; }
.footer-col a:hover { color: rgba(255,255,255,.85); }
.footer-col a:hover { color: var(--red); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.07); }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 11px; color: rgba(255,255,255,.6); flex-wrap: wrap; gap: var(--space-2); }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.footer-legal a { color: rgba(255,255,255,.62); text-decoration: none; }
.footer-legal a:hover { color: rgba(255,255,255,.8); }

/* === 空产品网格兜底 === */
.catalog-empty { grid-column: 1 / -1; text-align: center; padding: var(--space-9) var(--space-4); border: 1px dashed var(--border); border-radius: var(--r); background: var(--bg-soft, #faf9f7); }
.catalog-empty-tt { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-h4, 20px); color: var(--ink); margin: 0 0 var(--space-2); }
.catalog-empty-tx { color: var(--gray); max-width: 520px; margin: 0 auto var(--space-5); line-height: 1.7; }
.catalog-empty-act { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* === Cookie 同意横幅 === */
.ev-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1900; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); padding: 16px 20px; background: var(--ink, #1a1a1a); color: rgba(255,255,255,.9); box-shadow: 0 -6px 24px rgba(0,0,0,.18); }
.ev-consent-tx { font-size: 13px; line-height: 1.6; margin: 0; max-width: 760px; }
.ev-consent-tx a { color: #fff; text-decoration: underline; }
.ev-consent-act { display: flex; gap: var(--space-2); flex-shrink: 0; }
.ev-consent .btn { font-size: 13px; padding: 8px 18px; }
@media (max-width: 560px) { .ev-consent { flex-direction: column; align-items: stretch; text-align: center; } .ev-consent-act { justify-content: center; } }

/* === 可访问性 A11y === */
.ev-skip { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--red); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--r) 0; font-weight: 700; text-decoration: none; }
.ev-skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
#evMain { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* 法律/合规长文页 */
.legal { max-width: 820px; }
.legal p, .legal li { color: var(--gray); line-height: 1.8; }
.legal .legal-meta { font-size: var(--fs-sm); color: var(--gray-lt); margin-bottom: var(--space-5); }
.legal ul { padding-left: 1.2em; }
.legal li { margin: 6px 0; }
.legal .section-head { margin-top: var(--space-8); scroll-margin-top: 96px; }
.legal .legal-rule { border: 0; border-top: 1px solid var(--border); margin: var(--space-9) 0; }

/* === RESPONSIVE === */
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .innovation-grid { grid-template-columns: 1fr; }
}
@media (min-width: 721px) and (max-width: 1080px) {
  .dual-entry { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .dual-entry { grid-template-columns: 1fr; }
  .primary-nav { display: none; }
  .news-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .sustain-stats { gap: var(--space-6); }
  .utility-left { display: none; }
}
@media (max-width: 720px) {
  .hero-poster-desktop { display: none; }
  .hero-poster-mobile { display: block; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .pro-search { flex-direction: column; }
  .pro-search input { border-right: 1px solid var(--border); border-radius: var(--r); border-bottom: none; border-radius: var(--r) var(--r) 0 0; }
  .pro-search .btn { border-radius: 0 0 var(--r) var(--r); }
}

/* === PAGE HERO === */
.page-hero { background: var(--dark); color: #fff; padding: clamp(var(--space-9),7vw,80px) 0; }
/* 可持续 hero：围绕「Earth Day · 日出」创意——晨曦暖绿渐变。
   顶部深绿天幕(保白字清晰) → 向下变暖 → 底部中央升起一轮暖光(日出)；左上一抹嫩绿(生长)。
   仅用 official 色：Green #64863C / Chartreuse #8AAE42（可持续）+ Yellow #F2B03D / Orange #D8632F（暖·晨曦点缀） */
.page-hero-green {
  background:
    radial-gradient(70% 90% at 50% 122%, rgba(242,176,61,.72) 0%, rgba(216,99,47,.34) 34%, rgba(216,99,47,0) 64%),
    radial-gradient(120% 130% at 14% -14%, rgba(138,174,66,.4) 0%, rgba(138,174,66,0) 50%),
    linear-gradient(178deg, #28401E 0%, #3F6029 44%, #5C8438 78%, #7DA34C 100%);
}
/* 品牌红场 hero：恒热红径向场（呼应 .ev-brandfield / .section-cta），用于产品中心等品牌页 */
.page-hero-red { background: var(--baseplate-bg); }
.page-hero .eyebrow { color: rgba(255,255,255,.5); }
.page-hero-red .eyebrow { color: rgba(255,255,255,.7); }
.page-hero h1 { font-size: var(--fs-h1); font-weight: 900; line-height: var(--lh-head); letter-spacing: var(--tracking-tight); margin: var(--space-3) 0 var(--space-4); }
.page-hero p { font-size: 15px; color: rgba(255,255,255,.65); line-height: 1.75; max-width: 560px; }

/* === BREADCRUMB === */
.breadcrumb-bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 0; font-size: 12px; color: var(--gray); }
.breadcrumb-bar a { color: var(--gray); }
.breadcrumb-bar a:hover { color: var(--red); }

/* === PRODUCT ENTRY GRID (products index) === */
.product-entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: var(--space-4); }
.peg-card { background: var(--page); border: 1px solid var(--border); border-radius: var(--r); padding: var(--space-6) var(--space-5); display: flex; align-items: center; gap: var(--space-4); transition: border-color .15s, box-shadow .15s; }
.peg-card:hover { border-color: var(--red); box-shadow: var(--shadow); }
.peg-icon { font-size: 36px; flex-shrink: 0; }
.peg-text h3 { font-size: 15px; font-weight: 700; margin-bottom: var(--space-1); }
.peg-text p { font-size: 12px; color: var(--gray); }
.peg-arrow { margin-left: auto; font-size: 18px; color: var(--red); flex-shrink: 0; }

/* === SELECTOR GRID (products index) === */
.selector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: var(--space-5); }
.sel-card { background: var(--page); border: 1px solid var(--border); border-radius: var(--r); padding: 28px var(--space-6); display: block; transition: border-color .15s; }
.sel-card:hover { border-color: var(--red); }
.sel-tag { display: inline-block; background: var(--red-tint-2); color: var(--red); font-size: 10px; font-weight: 700; padding: var(--space-05) var(--space-2); border-radius: 2px; margin-bottom: 10px; }
.sel-tag-com { background: var(--surface); color: var(--dark); }
.sel-tag-pro { background: var(--surface); color: var(--red); }
.sel-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.sel-card p { font-size: 13px; color: var(--gray); line-height: 1.65; }

/* === GUIDE GRID === */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: var(--space-4); }
.guide-card { background: var(--page); border: 1px solid var(--border); border-radius: var(--r); padding: var(--space-6) var(--space-5); }
.section-alt .guide-card { background: var(--page); }
.guide-card h4 { font-size: 14px; font-weight: 700; margin-bottom: var(--space-2); }
.guide-card p { font-size: 13px; color: var(--gray); line-height: 1.7; }

/* === SUSTAIN CARDS === */
.sustain-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: var(--space-5); }
.sustain-card { background: var(--surface); border-radius: var(--r); padding: var(--space-7) var(--space-6); text-align: center; }
.sc-val { display: block; font-size: 44px; font-weight: 900; color: var(--ink); margin-bottom: 10px; }
.sustain-card h4 { font-size: 15px; font-weight: 700; margin-bottom: var(--space-2); }
.sustain-card p { font-size: 13px; color: var(--gray); line-height: 1.7; }

@media (max-width: 720px) {
  .product-entry-grid { grid-template-columns: 1fr; }
  .peg-arrow { display: none; }
}

/* ═══════════════════════════════════════
   MEGA-NAV — three-audience (rheem.com parity)
═══════════════════════════════════════ */
.ev-util-bar{background:var(--surface);border-bottom:1px solid var(--border-lt);font-size:11.5px;padding: var(--space-1) 0;}
.ev-util-inner{display:flex;justify-content:space-between;align-items:center;}
.ev-util-inner--min{justify-content:flex-end;gap: var(--space-3);}
.ev-util-left,.ev-util-right{display:flex;gap: var(--space-3);align-items:center;}
.ev-util-bar a{color:var(--gray);font-weight:600;display:inline-flex;align-items:center;}
.ev-util-bar a:hover{color:var(--red);}
.ev-util-ic{display:inline-flex;margin-right: var(--space-1);color:var(--red);}
.ev-util-ic .ev-ico{width:14px;height:14px;}
.ev-util-bar a:hover .ev-util-ic{color:var(--red);}
.ev-util-locale{color:var(--gray-lt);font-weight:600;}
.ev-div{color:var(--border);}
.ev-pro-link{color:var(--dark)!important;font-weight:700;}
.ev-aud-reopen{color:var(--dark)!important;font-weight:700;cursor:pointer;}
.ev-aud-reopen:hover{color:var(--red)!important;}
.ev-group-link{color:var(--dark)!important;font-weight:700;}

.ev-masthead{background:#fff;position:sticky;top:0;z-index:200;border-bottom:1px solid var(--border-lt);}
.ev-brand-line{height:4px;background:var(--red);}
.ev-masthead-inner{height:76px;display:flex;align-items:center;gap: var(--space-6);}
/* 官方 VI LOGO（图片）；文字保留供 SEO/无障碍但视觉隐藏 */
.ev-logo{display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none;}
.ev-logo-img{display:block;height:42px;width:auto;}
.ev-logo-text{position:absolute;width:1px;height:1px;padding: 0;margin: -1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.ev-primary-nav{display:flex;flex:1;}
.ev-nav-item{background:none;border:none;cursor:pointer;padding: 0 var(--space-4);height:76px;font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap: var(--space-1);border-bottom:3px solid transparent;font-family:var(--font);white-space:nowrap;}
.ev-nav-item:hover,.ev-nav-item[aria-expanded="true"]{color:var(--red);border-bottom-color:var(--red);}
.ev-chev{transition:transform .18s;flex-shrink:0;}
.ev-nav-item[aria-expanded="true"] .ev-chev{transform:rotate(180deg);}
.ev-masthead-actions{display:flex;align-items:center;gap: var(--space-3);flex-shrink:0;margin-left: auto;}

/* mega panel */
.ev-mega{display:none;position:absolute;left:0;right:0;background:#fff;border-top:1px solid var(--border-lt);box-shadow:var(--elev-3);z-index:199;}
.ev-mega--open{display:block;}
/* 轻量「支持」下拉：右锚定容器右缘的窄面板，图标安静（非红场喧宾夺主） */
.ev-mega--compact{left:auto;right:max(clamp(16px,4vw,40px),calc((100% - 1280px)/2 + clamp(16px,4vw,40px)));width:248px;border-radius:0 0 var(--r) var(--r);overflow:hidden;}
.ev-mega-mini{padding: var(--space-2);}
.ev-mega-mini ul{list-style:none;display:flex;flex-direction:column;gap: var(--space-05);}
.ev-mega-mini a{display:flex;align-items:center;gap: var(--space-3);padding: var(--space-2) var(--space-3);border-radius:var(--r-sm);font-size:14px;font-weight:600;color:var(--ink);}
.ev-mega-mini a:hover{color:var(--red);background:var(--red-tint);}
.ev-mega-mini .ev-util-ic{margin-right: 0;color:var(--gray);}
.ev-mega-mini a:hover .ev-util-ic{color:var(--red);}
.ev-mega-inner{display:flex;gap: 0;padding: var(--space-7) 0 var(--space-7);}
.ev-mega-col{flex:1;padding: 0 var(--space-6);border-right:1px solid var(--border-lt);}
.ev-mega-col:last-child{border-right:none;}
.ev-mega-featured{background:var(--surface);border-radius:var(--r);padding-top: var(--space-5);padding-bottom: var(--space-5);}
.ev-mega-head{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gray-lt);margin-bottom: var(--space-4);}
.ev-mega-col ul{list-style:none;display:flex;flex-direction:column;gap: var(--space-05);}
.ev-mega-col ul a{font-size:14px;color:var(--ink);display:block;padding: var(--space-1) var(--space-1);border-radius:var(--r-sm);}
.ev-mega-col ul a:hover{color:var(--red);background:var(--red-tint);}
.ev-nav-wrap{position:relative;}
/* featured product cards (rheem.com「Featured Product Innovations」parity) */
.ev-mega-cards{display:flex;flex-direction:column;gap: var(--space-2);}
.ev-mega-card{display:flex;align-items:center;gap: var(--space-3);padding: var(--space-3) var(--space-3);background:#fff;border:1px solid var(--border-lt);border-radius:var(--r-sm);transition:border-color .15s,box-shadow .15s,transform .12s;}
.ev-mega-card:hover{border-color:var(--red);box-shadow:var(--shadow);transform:translateY(-1px);}
.ev-mega-card-ic{font-size:24px;line-height:1;flex-shrink:0;}
.ev-mega-card-tx{display:flex;flex-direction:column;gap: 1px;min-width:0;}
.ev-mega-card-tx strong{font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.25;}
.ev-mega-card-tx em{font-size:11.5px;font-style:normal;color:var(--gray);line-height:1.3;}
.ev-mega-card-ar{margin-left: auto;flex-shrink:0;color:var(--gray-lt);transition:color .15s,transform .15s;}
.ev-mega-card:hover .ev-mega-card-ar{color:var(--red);transform:translateX(2px);}
.ev-mega-cta{display:inline-block;margin-top: 14px;font-size:12.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--red);}
.ev-mega-warranty{display:flex;flex-direction:column;gap: 1px;margin-top: 14px;padding: var(--space-3) 14px;border-radius:var(--r-sm);background:var(--dark);color:#fff;}
.ev-mega-warranty strong{font-size:13px;font-weight:800;}
.ev-mega-warranty span{font-size:11px;color:rgba(255,255,255,.6);}
.ev-mega-warranty:hover strong{color:#fff;}

/* ═══ Audience gateway overlay (rheem.com 身份悬浮窗 · 第一视觉/高级感) ═══ */
.ev-aud{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding: var(--space-6);}
.ev-aud[hidden]{display:none;}
.ev-aud-scrim{position:absolute;inset:0;background:rgba(43,38,34,.55);backdrop-filter:blur(6px);animation:evAudFade .25s ease;}
.ev-aud-modal{position:relative;width:min(500px,100%);background:#fff;border-radius:var(--r-lg);box-shadow:0 24px 64px rgba(43,38,34,.26);animation:evAudPop .34s cubic-bezier(.16,.84,.44,1);max-height:92vh;overflow:hidden;display:flex;flex-direction:column;}
@keyframes evAudFade{from{opacity:0}to{opacity:1}}
@keyframes evAudPop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.ev-aud-close{position:absolute;top:12px;right:12px;z-index:3;background:none;border:none;width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1;color:rgba(255,255,255,.6);cursor:pointer;transition:color .15s,background .15s,transform .2s;}
.ev-aud-close:hover{color:#fff;background:rgba(255,255,255,.14);transform:rotate(90deg);}
/* 紧凑深色头部：中性深灰、克制留白、反白 LOGO（弃大红横幅） */
.ev-aud-head{position:relative;text-align:center;color:#fff;background:var(--ink);padding: 26px 32px 22px;}
.ev-aud-head::before{display:none;}
.ev-aud-logo{height:28px;width:auto;margin-bottom: 12px;}
.ev-aud-head h2{font-size:20px;font-weight:800;letter-spacing:-0.01em;color:#fff;margin-bottom: 4px;}
.ev-aud-head p{font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.5;}
/* 身份列表：hairline 分隔的安静行（rheem 克制感） */
.ev-aud-grid{display:flex;flex-direction:column;padding: var(--space-2) 0;}
.ev-aud-card{display:grid;grid-template-columns:40px 1fr auto;column-gap:14px;row-gap:1px;align-items:center;padding: 13px 26px;background:#fff;border-radius:0;transition:background .15s;}
.ev-aud-card + .ev-aud-card{border-top:1px solid var(--border-lt);}
.ev-aud-card:hover{background:var(--red-tint);}
.ev-aud-ic{grid-column:1;grid-row:1 / span 2;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--surface);color:var(--red);transition:background .15s,color .15s;}
.ev-aud-ic .ev-ico{width:21px;height:21px;}
.ev-aud-card:hover .ev-aud-ic{background:var(--red);color:#fff;}
.ev-aud-cn{grid-column:2;grid-row:1;align-self:end;font-size:15px;font-weight:800;color:var(--ink);line-height:1.2;}
.ev-aud-en{display:none;}
.ev-aud-desc{grid-column:2;grid-row:2;align-self:start;font-size:12.5px;color:var(--gray);line-height:1.4;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ev-aud-go{grid-column:3;grid-row:1 / span 2;align-self:center;font-size:0;color:var(--gray-lt);transition:color .15s,transform .18s;}
.ev-aud-go::after{content:"→";font-size:17px;font-weight:700;}
.ev-aud-card:hover .ev-aud-go{color:var(--red);transform:translateX(3px);}
.ev-aud-skip{display:block;width:100%;margin:0;padding: 15px;background:none;border:none;border-top:1px solid var(--border-lt);font-size:12.5px;font-weight:700;color:var(--gray-lt);cursor:pointer;font-family:var(--font);transition:color .15s,background .15s;}
.ev-aud-skip:hover{color:var(--red);background:var(--surface);}
@media(max-width:680px){.ev-aud-card{padding: 13px 20px;}.ev-aud-head{padding: 24px 24px 20px;}}
/* 常驻悬浮再唤起入口（rheem 式：始终可见，避免找不到） */
.ev-aud-fab{position:fixed;right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:350;display:inline-flex;align-items:center;gap: var(--space-2);
  padding: 11px 18px 11px 14px;border:none;border-radius:var(--r-pill);cursor:pointer;font-family:var(--font);font-size:13px;font-weight:800;color:#fff;
  background:var(--baseplate-bg);box-shadow:var(--red-shadow);transition:transform .15s,box-shadow .2s;animation:evFabIn .4s .8s both;}
.ev-aud-fab:hover{transform:translateY(-2px);box-shadow:var(--red-shadow-lg);}
.ev-aud-fab .ev-ico{width:18px;height:18px;}
@keyframes evFabIn{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
@media print{.ev-aud,.ev-aud-fab{display:none!important;}}

/* page-hero used across sub-pages */
.page-hero{background:var(--dark);color:#fff;padding: clamp(var(--space-8),7vw,72px) 0;}
.page-hero .eyebrow{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom: var(--space-3);}
.page-hero h1{font-size:var(--fs-h1);font-weight:900;line-height:var(--lh-head);letter-spacing:var(--tracking-tight);margin-bottom: 14px;}
.page-hero p{font-size:16px;color:rgba(255,255,255,.7);max-width:600px;}
.breadcrumb-bar{background:var(--surface);border-bottom:1px solid var(--border-lt);padding: 10px 0;font-size:12px;color:var(--gray);}
.breadcrumb-bar a{color:var(--gray);}
.breadcrumb-bar a:hover{color:var(--red);}

/* ═══════════════════════════════════════
   PRODUCT CATALOG — data-driven cards + detail
   (official VI: 恒热红 #BF1924 + 中性灰 + 辅助色点缀；无暖 espresso/无蓝)
═══════════════════════════════════════ */
/* card refresh */
.product-card .pc-media { aspect-ratio: 3/2; background: var(--surface); display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--border-lt); flex-shrink: 0; }
.product-card .pc-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.product-card .pc-media-icon { font-size: 46px; }
.product-card .pc-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.product-card { position: relative; }
.pc-badge { background: var(--red); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 3px var(--space-2); border-radius: 2px; }
.product-card .pc-body { display: flex; flex-direction: column; flex: 1; padding: 14px var(--space-4) var(--space-4); }
.pc-series { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card .pc-body h4 { font-size: 15px; font-weight: 800; margin: 0 0 6px; color: var(--ink); line-height: 1.3; }
.product-card .pc-body p { font-size: 12.5px; color: var(--gray); line-height: 1.6; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; }
.pc-cta { margin-top: auto; font-size: 12px; font-weight: 800; color: var(--red); display: inline-flex; align-items: center; gap: var(--space-1); }
.product-card:hover .pc-cta { color: var(--red-dk); }

/* detail hero */
.pd-hero { background: var(--dark); color: #fff; padding: clamp(var(--space-8),6vw,72px) 0; }
.pd-hero-inner { display: grid; grid-template-columns: minmax(0,440px) 1fr; gap: clamp(var(--space-6),5vw,56px); align-items: center; }
.pd-hero-media { background: linear-gradient(160deg,#3A332E,#2B2623); border-radius: var(--r); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.pd-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.pd-hero-icon { font-size: 96px; }
.pd-gallery { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: var(--space-4); }
.pd-gallery figure { margin: 0; aspect-ratio: 4/3; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.pd-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-crumb { font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 14px; }
.pd-crumb a { color: rgba(255,255,255,.7); }
.pd-crumb a:hover { color: #fff; }
.pd-hero-text .pc-badges { position: static; margin-bottom: 14px; }
.pd-hero-text h1 { font-size: clamp(28px,4vw,44px); font-weight: 900; margin: 0 0 var(--space-2); }
.pd-series { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-4); }
.pd-tagline { font-size: 16px; color: rgba(255,255,255,.78); line-height: 1.75; max-width: 540px; margin-bottom: 26px; }
.pd-hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* D2 positioning */
.pd-value-prop { font-size: 19px; line-height: 1.75; max-width: 820px; color: var(--ink, #1a1a1a); margin: 0 0 8px; }
.pd-pos-h { font-size: 15px; margin: 22px 0 8px; color: var(--brand, #c8102e); }
.pd-pos-list { margin: 0; padding-left: 20px; line-height: 1.9; max-width: 820px; }
.pd-pos-list li { margin-bottom: 4px; }

/* stat band */
.pd-stats-band { background: var(--red); color: #fff; }
.pd-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
.pd-stat { padding: 26px 18px; text-align: center; border-right: 1px solid rgba(255,255,255,.18); }
.pd-stat:last-child { border-right: none; }
.pd-stat-val { display: block; font-size: 30px; font-weight: 900; line-height: 1.1; }
.pd-stat-label { display: block; font-size: 12px; color: rgba(255,255,255,.82); margin-top: 6px; }

/* feature grid */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 18px; }
.pf-card { background: var(--page); border: 1px solid var(--border); border-radius: var(--r); padding: var(--space-6) 22px; border-top: 3px solid var(--red); }
.pf-card h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: var(--space-2); }
.pf-card p { font-size: 13px; color: var(--gray); line-height: 1.7; }

/* spec table */
.spec-table { width: 100%; border-collapse: collapse; background: var(--page); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.spec-table th, .spec-table td { text-align: left; padding: 13px 18px; font-size: 13.5px; border-bottom: 1px solid var(--border-lt); }
.spec-table th { width: 38%; background: var(--surface); color: var(--ink); font-weight: 700; }
.spec-table td { color: var(--gray); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }
/* 产品参数长图：居中、限宽、白底卡片，长图不裁切完整展示 */
.pd-specimg { margin: var(--space-6) 0 0; text-align: center; }
.pd-specimg img { max-width: 420px; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--page); }
.pd-specimg figcaption { margin-top: var(--space-2); font-size: 11px; color: var(--gray-lt); }

@media (max-width: 760px) {
  .pd-hero-inner { grid-template-columns: 1fr; }
  .pd-hero-icon { font-size: 64px; }
}

/* ═══════════════════════════════════════
   PRODUCT COMPARE TOOL (surpass rheem) — warm VI
═══════════════════════════════════════ */
.cmp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 22px; }
.cmp-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.cmp-seg-btn { background: #fff; border: none; padding: 9px 18px; font-size: 13px; font-weight: 700; color: var(--gray); cursor: pointer; font-family: var(--font); border-right: 1px solid var(--border); }
.cmp-seg-btn:last-child { border-right: none; }
.cmp-seg-btn.is-on { background: var(--red); color: #fff; }
.cmp-hint { font-size: 12px; color: var(--gray-lt); margin-left: auto; }
.cmp-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; margin-bottom: 26px; }
.cmp-pick { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--r); padding: 10px var(--space-3); cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.cmp-pick:hover { border-color: var(--accent); }
.cmp-pick.is-on { border-color: var(--red); background: var(--red-tint-2); }
.cmp-pick input { accent-color: var(--red); width: 15px; height: 15px; flex-shrink: 0; }
.cmp-pick-ic { font-size: 20px; }
.cmp-pick-name { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.cmp-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp-table th, .cmp-table td { text-align: left; padding: var(--space-3) var(--space-4); font-size: 13px; border-bottom: 1px solid var(--border-lt); vertical-align: top; }
.cmp-table thead th { background: var(--dark); color: #fff; position: sticky; top: 0; }
.cmp-table thead th a { color: #fff; font-weight: 700; display: block; }
.cmp-th-series { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-top: 3px; }
.cmp-table tbody th { width: 150px; background: var(--surface); color: var(--ink); font-weight: 700; }
.cmp-table tbody td { color: var(--gray); }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-empty { text-align: center; padding: var(--space-8); color: var(--gray-lt); font-size: 14px; background: var(--surface); border-radius: var(--r); }
/* compare: only-differences toggle + shareable link + diff highlight */
.cmp-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--gray); cursor: pointer; border: 1px solid var(--border); border-radius: var(--r); padding: var(--space-2) 14px; background: #fff; user-select: none; }
.cmp-toggle input { accent-color: var(--red); width: 15px; height: 15px; }
.cmp-toggle.is-on { border-color: var(--red); color: var(--red); background: var(--red-tint-2); }
.cmp-share { font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; border: 1px solid var(--border); border-radius: var(--r); padding: var(--space-2) 14px; background: #fff; font-family: var(--font); transition: border-color .15s, color .15s; }
.cmp-share:hover { border-color: var(--accent); color: var(--accent); }
.cmp-share.is-ok { border-color: var(--ok); color: var(--ok); background: var(--ok-tint); }
.cmp-table tbody tr.cmp-row-diff th { background: var(--red-tint-2); color: var(--red); }
.cmp-table tbody tr.cmp-row-diff td { background: var(--red-tint); }
.cmp-diff-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-left: 6px; vertical-align: middle; }

/* ═══════════════════════════════════════
   GUIDED SELECTOR WIZARD (超越 rheem：智能推荐)
═══════════════════════════════════════ */
.selw-wrap { max-width: 780px; margin: 0 auto; }
.selw-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg, 14px); padding: 34px var(--space-7); box-shadow: 0 8px 28px rgba(0,0,0,.05); }
.selw-progress { height: 6px; border-radius: 4px; background: var(--surface); overflow: hidden; margin-bottom: var(--space-2); }
.selw-progress-bar { height: 100%; background: var(--red); border-radius: 4px; transition: width .3s ease; }
.selw-progress-txt { font-size: 12px; color: var(--gray-lt); font-weight: 600; margin-bottom: 18px; }
.selw-q { font-size: 21px; font-weight: 800; color: var(--ink); margin: 0 0 22px; line-height: 1.35; }
.selw-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; }
.selw-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px var(--space-4); border: 2px solid var(--border); border-radius: var(--r); background: #fff; cursor: pointer; font-family: var(--font); transition: border-color .15s, background .15s, transform .1s; }
.selw-opt:hover { border-color: var(--accent); transform: translateY(-2px); }
.selw-opt.is-on { border-color: var(--red); background: var(--red-tint-2); }
.selw-opt-ic { font-size: 30px; line-height: 1; }
.selw-opt-label { font-size: 14px; font-weight: 700; color: var(--ink); text-align: center; }
.selw-opts.is-multi .selw-opt.is-on::after { content: '✓'; position: absolute; top: 8px; right: 10px; color: var(--red); font-weight: 800; font-size: 13px; }
.selw-actions { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.selw-back { background: none; border: none; color: var(--gray); font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font); }
.selw-back:hover { color: var(--red); }
.selw-next { margin-left: auto; }
.selw-next[disabled] { opacity: .45; cursor: not-allowed; }
/* result */
.selw-result-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.selw-badge { align-self: flex-start; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1px; padding: var(--space-1) var(--space-3); border-radius: var(--r-pill); }
.selw-rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 18px; }
.selw-rec { position: relative; display: flex; flex-direction: column; gap: var(--space-2); border: 1px solid var(--border); border-radius: var(--r); padding: 22px 18px; background: #fff; }
.selw-rec.is-top { border-color: var(--red); box-shadow: var(--red-shadow-sm); }
.selw-rec-rank { position: absolute; top: -11px; left: 18px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: var(--r-lg); }
.selw-rec-ic { font-size: 34px; line-height: 1; }
.selw-rec-name { font-size: 16px; font-weight: 800; color: var(--ink); }
.selw-rec-series { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); }
.selw-rec-tag { font-size: 13px; color: var(--gray); line-height: 1.5; margin: var(--space-05) 0 0; }
.selw-hls { display: flex; flex-wrap: wrap; gap: 6px; }
.selw-hl { font-size: 11.5px; color: var(--gray); background: var(--surface); border-radius: var(--r); padding: 3px var(--space-2); }
.selw-hl b { color: var(--ink); }
.selw-reasons { display: flex; flex-direction: column; gap: 3px; margin: var(--space-1) 0; }
.selw-reason { font-size: 12px; color: var(--aux-green); font-weight: 700; }
.selw-result-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; padding-top: var(--space-6); border-top: 1px solid var(--border-lt); }
.selw-restart { background: none; border: none; color: var(--gray); font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font); margin-left: auto; }
.selw-restart:hover { color: var(--red); }
.selw-alt { text-align: center; margin-top: 28px; font-size: 14px; color: var(--gray); }
.selw-alt a { color: var(--red); font-weight: 700; margin-left: var(--space-2); }
@media (max-width: 560px){ .selw-card { padding: var(--space-6) 18px; } .selw-q { font-size: 18px; } }

/* ═══════════════════════════════════════
   SITE SEARCH
═══════════════════════════════════════ */
.ss-wrap { max-width: 760px; margin: 0 auto; }
.ss-input { width: 100%; border: 2px solid var(--border); border-radius: var(--r); padding: var(--space-4) 18px; font-size: 16px; font-family: var(--font); color: var(--ink); background: #fff; }
.ss-input:focus { outline: none; border-color: var(--red); }
.ss-count { font-size: 14px; color: var(--gray); margin: 18px 0 6px; }
.ss-count strong { color: var(--red); }
.ss-group { margin-top: 22px; }
.ss-group-h { font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); margin-bottom: 10px; }
.ss-group-h span { color: var(--red); }
.ss-list { display: flex; flex-direction: column; gap: var(--space-2); }
.ss-item { display: flex; align-items: center; gap: 14px; padding: 14px var(--space-4); border: 1px solid var(--border); border-radius: var(--r); background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.ss-item:hover { border-color: var(--red); box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.ss-ic { font-size: 22px; flex-shrink: 0; }
.ss-body { display: flex; flex-direction: column; gap: var(--space-05); flex: 1; min-width: 0; }
.ss-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.ss-title small { font-size: 11px; font-weight: 600; color: var(--accent); margin-left: 6px; }
.ss-desc { font-size: 12.5px; color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-tag { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--gray); background: var(--surface); border-radius: var(--r-pill); padding: 3px 10px; }
.ss-empty { text-align: center; padding: 36px; color: var(--gray-lt); font-size: 14px; background: var(--surface); border-radius: var(--r); }
.ss-empty a { color: var(--red); font-weight: 700; }

/* ═══════════════════════════════════════
   MOBILE NAV — hamburger + drawer (rheem parity)
═══════════════════════════════════════ */
.ev-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--ink); background: none; border: none; cursor: pointer; }
.ev-icon-btn:hover { color: var(--red); background: var(--red-hover); }
.ev-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: var(--space-2); }
.ev-burger span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .2s; }
.ev-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ev-burger.is-active span:nth-child(2) { opacity: 0; }
.ev-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ev-drawer-scrim { position: fixed; inset: 0; background: rgba(43,38,34,.5); opacity: 0; visibility: hidden; transition: opacity .25s; z-index: 300; }
.ev-drawer-scrim.is-open { opacity: 1; visibility: visible; }
.ev-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(86vw,360px); background: #fff; z-index: 301; transform: translateX(100%); transition: transform .28s cubic-bezier(.16,.84,.44,1); display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(43,38,34,.18); overflow-y: auto; }
.ev-drawer.is-open { transform: translateX(0); }
.ev-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--space-5); border-bottom: 1px solid var(--border-lt); }
.ev-drawer-title { font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--gray-lt); }
.ev-drawer-close { background: none; border: none; font-size: 30px; line-height: 1; color: var(--gray); cursor: pointer; }
.ev-drawer-search { display: flex; gap: var(--space-2); padding: 14px var(--space-5); border-bottom: 1px solid var(--border-lt); }
.ev-drawer-search input { flex: 1; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px var(--space-3); font-size: 14px; font-family: var(--font); }
.ev-drawer-search button { background: var(--red); color: #fff; border: none; border-radius: var(--r-sm); padding: 0 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.ev-drawer-nav { flex: 1; padding: 6px 0; }
.ev-acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: none; padding: 15px var(--space-5); font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; font-family: var(--font); border-bottom: 1px solid var(--border-lt); }
.ev-acc-btn[aria-expanded="true"] { color: var(--red); }
.ev-acc-btn[aria-expanded="true"] .ev-chev { transform: rotate(180deg); }
.ev-acc-panel { max-height: 0; overflow: hidden; transition: max-height .28s ease; background: var(--surface); }
.ev-acc-head { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray-lt); padding: 14px var(--space-5) 6px; }
.ev-acc-panel ul { list-style: none; padding: 0 var(--space-5) var(--space-2); }
.ev-acc-panel a { display: block; padding: 9px 0; font-size: 14px; color: var(--gray); border-bottom: 1px solid var(--border-lt); }
.ev-acc-panel a:hover { color: var(--red); }
.ev-drawer-foot { padding: 18px var(--space-5); border-top: 1px solid var(--border-lt); display: flex; flex-direction: column; gap: 14px; }
.ev-drawer-group { font-size: 13px; font-weight: 700; color: var(--dark); text-align: center; }

@media (max-width: 900px) {
  .ev-primary-nav { display: none; }
  .ev-find-cta { display: none; }
  .ev-burger { display: flex; }
  .ev-mega { display: none !important; }
  .ev-util-bar { display: none; } /* 任务快捷在移动抽屉/页脚提供 */
}
@media (max-width: 480px) {
  .ev-masthead-inner { gap: var(--space-3); }
  .ev-search-btn { display: none; }
}

/* ═══════════════════════════════════════
   DEALER LOCATOR
═══════════════════════════════════════ */
.dl-filters { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: var(--space-3); margin-bottom: 18px; }
.dl-search, .dl-select { border: 1px solid var(--border); border-radius: var(--r); padding: var(--space-3) 14px; font-size: 14px; font-family: var(--font); background: #fff; color: var(--ink); }
.dl-search:focus, .dl-select:focus { outline: none; border-color: var(--red); }
.dl-geo { border: 1px solid var(--red); border-radius: var(--r); padding: var(--space-3) var(--space-4); font-size: 14px; font-weight: 700; font-family: var(--font); background: #fff; color: var(--red); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.dl-geo:hover { background: var(--red); color: #fff; }
.dl-geo.is-on { background: var(--red); color: #fff; }
.dl-geo.is-busy { opacity: .7; cursor: progress; }
.dl-count { font-size: 14px; color: var(--gray); margin-bottom: var(--space-5); }
.dl-count strong { color: var(--red); font-size: 18px; }
.dl-dist { display: inline-block; font-size: 12px; font-weight: 700; color: var(--red); background: var(--red-tint-2); border-radius: var(--r-pill); padding: 3px 10px; margin-bottom: var(--space-2); }
@media (max-width: 640px){ .dl-filters { grid-template-columns: 1fr 1fr; } .dl-search { grid-column: 1 / -1; } .dl-geo { grid-column: 1 / -1; } }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 18px; }
.dl-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 22px var(--space-5); border-top: 3px solid var(--red); transition: box-shadow .15s; }
.dl-card:hover { box-shadow: var(--shadow); }
.dl-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dl-card h3 { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.dl-type { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface); color: var(--gray); }
.dl-type-flag { background: var(--red-tint-2); color: var(--red); }
.dl-addr { font-size: 13px; color: var(--gray); line-height: 1.6; margin-bottom: var(--space-3); }
.dl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dl-tag { font-size: 11px; color: var(--accent); background: var(--surface); padding: var(--space-05) var(--space-2); border-radius: 3px; }
.dl-certs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--space-4); }
.dl-cert { font-size: 12px; color: var(--gray); font-weight: 600; }
.dl-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dl-actions .btn { font-size: 13px; padding: 9px var(--space-4); }
.dl-route { background: var(--surface); color: var(--ink); border-color: var(--border); }
.dl-route:hover { border-color: var(--red); color: var(--red); }
.dl-empty { background: var(--surface); border-radius: var(--r); padding: var(--space-8); text-align: center; color: var(--gray); }
.dl-empty a { color: var(--red); font-weight: 700; }
@media (max-width: 640px) { .dl-filters { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════
   FORMS — validation + success
═══════════════════════════════════════ */
.ev-form { display: grid; gap: 14px; max-width: 560px; margin: 0 auto; }
.ev-form-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.ev-field { display: flex; flex-direction: column; gap: 5px; }
.ev-field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.ev-field label .req { color: var(--red); margin-left: var(--space-05); }
.ev-form input, .ev-form select, .ev-form textarea { border: 1px solid var(--border); border-radius: var(--r); padding: var(--space-3) 14px; font-size: 14px; font-family: var(--font); background: #fff; color: var(--ink); width: 100%; }
.ev-form input:focus, .ev-form select:focus, .ev-form textarea:focus { outline: none; border-color: var(--red); }
.ev-form textarea { min-height: 96px; resize: vertical; }
.ev-field-err { border-color: var(--red) !important; background: var(--red-tint-3); }
.ev-field-msg { font-size: 12px; color: var(--red); min-height: 14px; }
.ev-form-note { font-size: 12px; color: var(--gray-lt); }
.ev-form-success { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--red); border-radius: var(--r); padding: var(--space-8) var(--space-7); text-align: center; }
.ev-form-success-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--red); color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.ev-form-success h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.ev-form-success p { font-size: 14px; color: var(--gray); }
.ev-form-success a { color: var(--red); font-weight: 700; }
@media (max-width: 480px) { .ev-form-row { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════
   PRODUCT VECTOR ART (placeholder before real photos)
═══════════════════════════════════════ */
.product-card .pc-media-art { width: 100%; height: 100%; display: block; }
.product-card .pc-media-art .ev-art { display: block; width: 100%; height: 100%; }
.pd-hero-art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pd-hero-art .ev-art { width: 100%; height: 100%; max-width: 360px; }
.pc-media-emoji { font-size: 46px; }

/* ═══════════════════════════════════════
   PRO ZONE WIDGETS (lookup / docs / courses / solutions)
═══════════════════════════════════════ */
.pl-filters { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
@media (max-width: 640px) { .pl-filters { grid-template-columns: 1fr; } }
.pl-list, .doc-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.pl-row { display: grid; grid-template-columns: 2fr 1.2fr 2fr auto; gap: 14px; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--border-lt); background: #fff; transition: background .12s; }
.pl-row:last-child { border-bottom: none; }
.pl-row:hover { background: var(--surface); }
.pl-name { font-weight: 700; color: var(--ink); display: flex; flex-direction: column; gap: var(--space-05); }
.pl-name small { font-weight: 400; font-size: 11px; color: var(--gray-lt); }
.pl-series { font-size: 13px; color: var(--accent); font-weight: 600; }
.pl-spec { font-size: 12.5px; color: var(--gray); }
.pl-go { font-size: 13px; color: var(--red); font-weight: 700; white-space: nowrap; }
@media (max-width: 720px) { .pl-row { grid-template-columns: 1fr auto; } .pl-series, .pl-spec { display: none; } }

.doc-row { display: flex; align-items: center; gap: var(--space-4); padding: 15px 18px; border-bottom: 1px solid var(--border-lt); background: #fff; transition: background .12s; }
.doc-row:last-child { border-bottom: none; }
.doc-row:hover { background: var(--surface); }
.doc-ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--red-tint-2); color: var(--red); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.doc-main { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.doc-title { font-weight: 700; color: var(--ink); font-size: 14.5px; }
.doc-meta { font-size: 12px; color: var(--gray-lt); }
.doc-dl { font-size: 13px; color: var(--red); font-weight: 700; white-space: nowrap; }

.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap: 18px; }
.course-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 22px var(--space-5); display: flex; flex-direction: column; }
.course-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.course-level { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); }
.course-beg { background: var(--surface); color: var(--accent); }
.course-mid { background: var(--red-tint-2); color: var(--red); }
.course-adv { background: var(--dark); color: #fff; }
.course-mode { font-size: 12px; color: var(--gray-lt); }
.course-card h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: var(--space-2); line-height: 1.4; }
.course-card p { font-size: 13px; color: var(--gray); line-height: 1.7; flex: 1; margin-bottom: var(--space-4); }
.course-btn { align-self: flex-start; font-size: 13px; padding: 9px 18px; }

.sol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 18px; }
.sol-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.sol-art { aspect-ratio: 16/9; background: var(--surface); }
.sol-art .ev-art { width: 100%; height: 100%; }
.sol-body { padding: var(--space-5); }
.sol-body h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: var(--space-2); }
.sol-body p { font-size: 13px; color: var(--gray); line-height: 1.7; margin-bottom: var(--space-3); }
.sol-body ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sol-body li { font-size: 13px; color: var(--ink); padding-left: 18px; position: relative; }
.sol-body li::before { content: "✓"; position: absolute; left: 0; color: var(--red); font-weight: 700; }

/* ═══ 产品详情增强：认证 / 资料 / FAQ（对齐 rheem 详情页深度）═══ */
.container.narrow { max-width: 820px; }
.btn-outline { background: transparent; color: var(--red); border: 1px solid var(--red); }
.btn-outline:hover { background: var(--red); color: #fff; }

.cert-band { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.cert-chip { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 10px 18px; font-weight: 500; color: var(--ink); }
.cert-tick { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--red); color: #fff; font-size: 11px; }

.doc-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item { border: 1px solid var(--border); border-radius: var(--r); background: var(--page); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: var(--space-4) var(--space-5); font-weight: 700; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--red); font-size: 22px; font-weight: 400; line-height: 1; }
.faq-item[open] summary::after { content: '\2013'; }
.faq-item[open] summary { border-bottom: 1px solid var(--border-lt); }
.faq-a { padding: 14px var(--space-5) 18px; color: var(--gray); line-height: 1.7; }

/* ═══ 规格书打印 / 另存 PDF ═══ */
@media print {
  body.ev-printing #evNavMount,
  body.ev-printing .footer,
  body.ev-printing .pd-hero-actions,
  body.ev-printing .doc-actions,
  body.ev-printing .section-cta,
  body.ev-printing .faq-list,
  body.ev-printing .pd-stats-band { display: none !important; }
  body.ev-printing .pd-hero { background: #fff !important; color: #000 !important; padding: 0 0 var(--space-3); }
  body.ev-printing .spec-table { width: 100%; }
  body.ev-printing .spec-table th, body.ev-printing .spec-table td { border: 1px solid #ccc; }
  body.ev-printing * { box-shadow: none !important; }
}