/* ============================================================================
   hardwareplants.com 统一页眉（D 方案）— 2026-11-02
   全站唯一页眉实现：header.hp-site > .hp-bar（原 .hhdr 两套合一）。
   每页删除内联 hp-hdr-css / hhdr-css，改用本文件 <link>。
   ── token 说明 ──
   本文件不重定义 site.css 的 --fg/--mut/--line/--acc，只做带兜底的别名：
   未引入 site.css 的页面（SPA/关于/联系/知识库）由兜底值等效。
   ⚠ 此处依赖假设 X：site.css :root --acc=#0b4a8f。若全站主蓝将来调整，
   只改 site.css 即可，页眉自动跟随；若两者取值不同请改这一行。
   ============================================================================ */
:root{
  --hdr-fg:var(--fg,#14181d);
  --hdr-mut:var(--mut,#5c6672);
  --hdr-line:var(--line,#dfe3e8);
  --hdr-acc:var(--acc,#0b4a8f);
  --hdr-acc-ink:#0a3f79;   /* 主按钮 hover */
  --hdr-max:1440px;        /* 页眉比正文容器(1180px)宽，有意为之，勿与 --max 合并 */
  --hdr-h:66px;            /* 原 60px；页面级 sticky/scroll-margin 一律引用本值 */
  /* SPA 应用 CSS（/zh/ 内联 22KB 样式表）仍在引用的旧 token——兼容别名，勿删 */
  --hp-fg:var(--hdr-fg); --hp-mut:var(--hdr-mut); --hp-line:var(--hdr-line);
  --hp-acc:var(--hdr-acc); --hp-max:var(--hdr-max); --hp-acc2:#c8102e;
}

/* ── 容器 ── */
header.hp-site{background:#fff;border-bottom:1px solid var(--hdr-line);color:var(--hdr-fg);
  position:sticky;top:0;z-index:1300;width:100%;padding:0;margin:0;
  /* 字体在页眉层显式钉死（= site.css body 栈），不随各页 body 字体栈漂移——SPA 与静态页 body 栈顺序不同 */
  font-family:-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif}
header.hp-site *{box-sizing:border-box}
.hp-bar{max-width:var(--hdr-max);margin:0 auto;padding:0 24px;height:var(--hdr-h);
  display:flex;align-items:center;gap:26px}

/* ── logo ── */
.hp-logo{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--hdr-fg);
  flex:0 0 auto;text-decoration:none}
.hp-logo b{color:var(--hdr-acc);font-weight:inherit}

/* ── 桌面导航（D：15.5px / 去 opacity / gap 26 / padding 9px 0）── */
nav.hp-nav{display:flex;gap:26px;flex:1;min-width:0;overflow:hidden;justify-content:center}
.hp-nav a{font-size:15.5px;font-weight:500;color:#39424d;text-decoration:none;
  white-space:nowrap;padding:9px 0;position:relative;transition:color .15s}
.hp-nav a:hover{color:var(--hdr-acc)}
.hp-nav a.on{color:var(--hdr-acc);font-weight:700}
.hp-nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  border-radius:2px;background:var(--hdr-acc)}

/* ── 新增主按钮：导航之后、语言之前（DOM 顺序即此，flex order 保证窄屏语言在汉堡左）── */
.hdr-cta{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;
  background:var(--hdr-acc);color:#fff;font-size:14.5px;font-weight:650;line-height:1;
  padding:9px 17px;border-radius:9px;text-decoration:none;white-space:nowrap;
  transition:background .15s;order:1}
.hdr-cta:hover{background:var(--hdr-acc-ink)}

/* ── 语言区（静态 markup；视觉保持原样，仅 14px/7px 14px 按 D 放大）── */
/* SPA 的语言区包在 #hdrLang（其应用 JS 依赖此 id），order 必须打在容器上，否则排到 CTA 前 */
header.hp-site #hdrLang{flex:0 0 auto;order:2}
.langdrop{position:relative;order:2;flex:0 0 auto}
.langbtn{font:inherit;font-size:14px;display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--hdr-line);background:#fff;color:var(--hdr-fg);
  border-radius:99px;padding:7px 14px;cursor:pointer;line-height:1}
.langbtn:hover{border-color:var(--hdr-mut)}
.langbtn .chev{transition:transform .15s;opacity:.7}
.langdrop.open .langbtn .chev{transform:rotate(180deg)}
.langmenu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;
  border:1px solid var(--hdr-line);border-radius:12px;
  box-shadow:0 14px 34px -12px rgba(15,23,42,.28);padding:6px;min-width:130px;
  display:none;z-index:1400}
.langdrop.open .langmenu{display:flex;flex-direction:column;gap:2px}
.langmenu .opt{font:inherit;font-size:13px;text-align:left;border:0;background:none;
  color:var(--hdr-fg);border-radius:8px;padding:8px 12px;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none}
.langmenu .opt:hover{background:#F3F6FC}
.langmenu .opt.sel{color:var(--hdr-acc);font-weight:700}

/* ── 汉堡（仅窄屏）── */
.mnavtog{display:none;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--hdr-line);border-radius:99px;background:#fff;color:var(--hdr-fg);
  cursor:pointer;flex:0 0 auto;padding:0;order:3}
.mnavtog:hover{border-color:var(--hdr-mut)}

/* ── 焦点可见（键盘走查用）── */
.hp-nav a:focus-visible,.hdr-cta:focus-visible,.langbtn:focus-visible,
.langmenu .opt:focus-visible,.mnavtog:focus-visible,.hp-mnav a:focus-visible{
  outline:2px solid var(--hdr-acc);outline-offset:2px}

/* ── 窄屏（≤960px，全站统一断点；SPA 原 760px 页眉断点一并收敛到 960，
      属 D 方案“沿用页眉既有断点”之 960 一支——见交付说明假设 A1）── */
.hp-mnav{display:none;position:absolute;top:var(--hdr-h);left:0;right:0;background:#fff;
  border-bottom:1px solid var(--hdr-line);padding:8px 24px 16px;flex-direction:column}
.hp-mnav a{font-size:16px;font-weight:500;color:var(--hdr-fg);text-decoration:none;
  padding:12px 0;border-bottom:1px solid #eef2f6;display:flex;align-items:center;min-height:44px}
.hp-mnav a:last-of-type{border-bottom:0}
.hp-mnav a.on{color:var(--hdr-acc);font-weight:700}
.hp-mnav .mnav-cta{background:var(--hdr-acc);color:#fff;font-size:14.5px;font-weight:650;
  justify-content:center;border-radius:9px;margin-top:14px;padding:12px;border-bottom:0}
.hp-mnav.open{display:flex}
@media(max-width:960px){
  .hp-bar{gap:12px}
  nav.hp-nav{display:none}
  .hdr-cta{display:none}          /* 窄屏由抽屉底部整行 CTA 代替 */
  .langdrop,header.hp-site #hdrLang{margin-left:auto}   /* CTA 隐藏后把语言推到右侧（汉堡左侧）；SPA 语言在 #hdrLang 容器上 */
  .mnavtog{display:inline-flex}
}

/* ── 减弱动效 ── */
@media (prefers-reduced-motion:reduce){
  .hp-nav a,.hdr-cta,.langbtn .chev{transition:none}
}

/* ── 兼容保留：SPA 旧语言胶囊类（若某处 markup 仍在用 .hp-lang）── */
.hp-lang{font-size:13px;color:var(--hdr-mut);text-decoration:none;flex:0 0 auto;
  border:1px solid var(--hdr-line);border-radius:99px;padding:6px 12px}
.hp-lang:hover{color:var(--hdr-fg);border-color:var(--hdr-mut)}

/* geo-logo-lockup */
.hp-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:default;color:#123a63;flex:0 0 auto}
.hp-logo svg{width:28px;height:28px;flex:0 0 auto}
.hp-logo .hp-txt{display:flex;flex-direction:column;line-height:1.05}
.hp-logo .hp-wm{font-size:19px;font-weight:800;letter-spacing:-.02em;color:#123a63;line-height:1}
.hp-logo .hp-tag{font-size:11px;font-weight:500;letter-spacing:.03em;color:#8a97a6;margin-top:3px;display:none}
html[lang^="zh"] .hp-logo .hp-tag{display:block}
.hp-logo b{color:inherit}
@media(max-width:960px){.hp-logo svg{width:24px;height:24px}.hp-logo .hp-wm{font-size:17px}.hp-logo .hp-tag{font-size:10px}}

/* hp-login-placeholder */
.hdr-login{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;order:1;min-width:60px;height:34px;padding:0 14px;border:1px solid var(--hdr-line,#dfe3e8);border-radius:999px;background:#fff;color:#5c6672;font:inherit;font-size:14px;font-weight:600;cursor:help;opacity:.8}
.hdr-login:hover{opacity:1;color:#39424d;border-color:#c3ccd6}
.hdr-login:focus-visible{outline:2px solid var(--hdr-acc,#0b4a8f);outline-offset:2px;opacity:1}
.hdr-login-note{display:none;position:absolute;top:calc(100% + 11px);left:50%;transform:translateX(-50%);z-index:1400;background:#1f2937;color:#fff;font-size:12.5px;font-weight:500;white-space:nowrap;padding:7px 11px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.18);pointer-events:none}
.hdr-login:focus .hdr-login-note{display:block}
@media(max-width:960px){.hdr-login{display:none}}

.hdr-login.open .hdr-login-note{display:block}