@charset "utf-8";
/* =========================================================================
   header-shared.css —— 内页头部（= 首页那套 `.hd`）
   -------------------------------------------------------------------------
   客户 2026-10-26：「所有内页的导航，都用首页面的导航栏目」。
   做法与页脚（footer-shared.css）一致：**内页不加载 home.css**（两套设计同名类 15 个
   ＋ 各自的全局 reset，混着加载会崩版），所以把 `.hd* / .mnav / .m-sub / .ai-*` 这一支
   **逐字抽出来**单独给内页用。类名已核对：`proto.css` 里一个都没有，不会打架。

   与首页原件只有三处差别（都在文件末尾的「内页适配」段）：
     · `.hd-space`：`.hd` 是 fixed，内页内容需要主动让出头部高度；
     · 变量：home.css 的 `--red/--text/--line/--ease-hd` 等内页没有，这里补一份（见下）；
     · 其余规则（含 1600/1465/1360/1279/1023/900/767 七个断点）逐字照抄。

   ⚠️ 以后改头部样式**两边都要改**：首页看 `home.css`（客户原件，逐字不动），
      内页看本文件。`check:parity` 会比对两边导航项数量与文案，改漏会红。
   ========================================================================= */

/* 首页那套变量（内页没有这些名字；`--c-*` 是内页自己的，互不影响）。
   🔴 `--logo-h` **必须挂在 :root**，不能写进下面 `.hd` 那条：断点里是靠
      `:root{--logo-h:40px}` 改小 logo 的，而 `.hd` 的特异性高于 `:root` ⇒ 手机上
      logo 一直按 64px 渲染（实测宽 330px）把汉堡挤出屏幕（`#burger` 跑到 x=465、
      宽 0，点不到）。--nav-h 同理（断点也在 :root 上改）。 */
:root{--logo-h:64px}

.hd,
.mnav,
.ai-mask{
  --red:     #e60013;
  --red-dk:  #c00010;
  --ink:     #111111;
  --title:   #262626;
  --text:    #333333;
  --text-2:  #666666;
  --sub:     #999999;
  --line:    #e5e5e5;
  --line-2:  #eeeeee;
  --ease-hd: cubic-bezier(.22,1,.36,1);
}

/* ---------------- 头部（对齐 aisite 康曌站：白底 + 右对齐菜单 + 咨询电话 + AI搜索） ---------------- */
.hd{
  position:fixed;left:0;right:0;top:0;z-index:900;
  height:var(--nav-h);background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.hd-in{
  position:relative;height:100%;max-width:1800px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:24px;
}
.hd-logo{flex:0 0 auto;display:flex;align-items:center}
.hd-logo img{height:var(--logo-h);width:auto}

/* 主菜单：靠右，整格红底 hover */
.hd-nav{margin-left:auto;height:100%}
.hd-nav ul{display:flex;align-items:center;height:100%}
.hd-nav li{position:relative;height:100%;display:flex;align-items:center}
.hd-nav a{
  position:relative;display:flex;align-items:center;height:100%;
  padding:0 26px;font-size:17px;color:var(--text);white-space:nowrap;
  transition:background-color .3s var(--ease-hd,var(--ease)),color .3s var(--ease-hd,var(--ease));
}
.hd-nav li.on > a{color:var(--red)}
.hd-nav li:hover > a{background:var(--red);color:#fff}

/* 二级箭头：仅带下拉的栏目 */
.hd-nav li.has-drop > a::after{
  content:"";display:block;position:static;left:auto;bottom:auto;
  width:7px;height:7px;margin:-5px 0 0 8px;border-radius:0;background:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  opacity:1;transform:rotate(45deg);
  transition:transform .18s var(--ease-hd,var(--ease)),margin .18s var(--ease-hd,var(--ease));
}
.hd-nav li.has-drop:hover > a::after{transform:rotate(225deg);margin-top:4px}

/* 二级面板 */
.hd-drop{
  position:absolute;left:0;top:100%;
  min-width:186px;padding:0;background:#fff;
  border:0;box-shadow:0 14px 34px rgba(0,0,0,.12);
  transform:translateY(14px);opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease-hd,var(--ease)),transform .3s var(--ease-hd,var(--ease)),visibility .3s;
}
.hd-drop a{
  display:block;height:auto;padding:14px 24px;background:#fff;
  font-size:15px;color:var(--text);border-bottom:1px solid var(--line);
}
.hd-drop a:last-child{border-bottom:0}
.hd-drop a:hover{background:#fdeaea;color:var(--red);font-weight:700}
.hd-nav li:hover .hd-drop{opacity:1;visibility:visible;transform:translateY(0)}

/* 咨询订购电话 */
.hd-tel{flex:none;display:flex;align-items:center;gap:10px;color:var(--text)}
.hd-tel .tel-ico{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:#fdeaea;color:var(--red);
}
.hd-tel svg{width:22px;height:22px}
.hd-tel p{margin:0;line-height:1.3}
.hd-tel p span{display:block;font-size:12px;color:#9aa0ad}
.hd-tel p b{display:block;font-family:"Arial Narrow",Arial,sans-serif;font-size:20px;letter-spacing:.5px;color:var(--red)}

/* AI 搜索按钮 */
.hd-ai{
  flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 20px;border:0;border-radius:999px;
  background:var(--red);color:#fff;font-size:15px;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;cursor:pointer;
  box-shadow:0 6px 16px rgba(230,0,19,.22);
  transition:background-color .3s var(--ease-hd,var(--ease)),box-shadow .3s var(--ease-hd,var(--ease)),transform .3s var(--ease-hd,var(--ease));
}
.hd-ai:hover{background:var(--red-dk);box-shadow:0 10px 24px rgba(230,0,19,.3);transform:translateY(-1px)}
.hd-ai svg{width:18px;height:18px;flex:none}

/* 汉堡 */
.hd-burger{display:none;width:34px;height:34px;position:relative;margin-left:auto}
.hd-burger i{position:absolute;left:5px;width:24px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease-hd,var(--ease)),opacity .3s}
.hd-burger i:nth-child(1){top:11px}
.hd-burger i:nth-child(2){top:17px}
.hd-burger i:nth-child(3){top:23px}
.hd-burger.on i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd-burger.on i:nth-child(2){opacity:0}
.hd-burger.on i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* 移动端菜单 */
.mnav{
  position:fixed;inset:0;z-index:890;background:#fff;
  padding:calc(var(--nav-h) + 14px) 28px 40px;
  transform:translateY(-100%);visibility:hidden;
  transition:transform .5s var(--ease-hd,var(--ease)),visibility .5s;overflow-y:auto;
}
.mnav.on{transform:none;visibility:visible}
.mnav ul{margin:0;padding:0;list-style:none}
.mnav li{border-bottom:1px solid var(--line-2)}
.mnav > ul > li > a{display:block;padding:16px 0;font-size:16px;color:#333}
.mnav .m-sub{display:none;padding-bottom:12px}
.mnav li.open .m-sub{display:block}
.mnav .m-sub a{display:block;padding:8px 0 8px 14px;font-size:13px;color:#666}
.mnav .m-tel{margin-top:26px;font-size:20px;color:var(--red);font-weight:600}
.mnav .m-tel small{display:block;font-size:11px;color:var(--sub);letter-spacing:.12em;font-weight:400;margin-bottom:4px}

/* 头部断点 */
@media (max-width:1600px){
  .hd-nav a{padding:0 20px;font-size:16px}
}
@media (max-width:1465px){
  .hd-nav a{padding:0 16px}
  .hd-in{gap:20px}
}
@media (max-width:1360px){
  .hd-tel .tel-ico{width:38px;height:38px}
  .hd-tel svg{width:18px;height:18px}
  .hd-tel p span{display:none}
  .hd-tel p b{font-size:17px}
  .hd-ai{height:40px;padding:0 16px;font-size:14px}
}
@media (max-width:1279px){
  :root{--nav-h:76px;--hd-h:76px;--logo-h:52px}
  .hd-tel{display:none}
  .hd-nav a{padding:0 14px;font-size:15px}
  .hd-ai{height:38px;padding:0 14px;font-size:13.5px;gap:6px}
  .hd-ai svg{width:16px;height:16px}
}
@media (max-width:1023px){
  .hd-nav a{padding:0 9px;font-size:13.5px}
  .hd-ai{padding:0 11px;font-size:13px;gap:5px}
  .hd-in{gap:14px}
  .hd-nav li.has-drop > a::after{width:6px;height:6px;margin-left:6px}
}
/* 窄平板：菜单收进汉堡，避免与电话/AI 挤在一行 */
@media (max-width:900px){
  .hd-nav{display:none}
  .hd-burger{display:block;margin-left:6px}
  .hd-ai{margin-left:auto}
}
@media (max-width:767px){
  :root{--nav-h:64px;--hd-h:64px;--logo-h:40px}
  .hd-nav{display:none}
  .hd-burger{display:block;margin-left:6px}
  .hd-in{gap:12px}
  .hd-ai{margin-left:auto}
  .hd-ai{height:34px;padding:0 12px;font-size:13px;gap:5px}
  .hd-ai svg{width:15px;height:15px}
}

/* ---------------- AI 搜索弹层 ---------------- */
.ai-mask{
  position:fixed;inset:0;z-index:1200;
  display:flex;align-items:flex-start;justify-content:center;
  padding:12vh 20px 40px;background:rgba(9,10,13,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease-hd,var(--ease)),visibility .3s;
}
.ai-mask.on{opacity:1;visibility:visible}
.ai-panel{
  width:100%;max-width:860px;background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  transform:translateY(-16px);opacity:0;
  transition:transform .38s var(--ease-hd,var(--ease)),opacity .38s var(--ease-hd,var(--ease));
  max-height:76vh;display:flex;flex-direction:column;
}
.ai-mask.on .ai-panel{transform:none;opacity:1}
.ai-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.ai-head .spark{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:#fdeaea;color:var(--red)}
.ai-head .spark svg{width:17px;height:17px}
.ai-input{flex:1;min-width:0;height:34px;font-size:16px;color:var(--ink);background:none;border:0;outline:none}
.ai-input::placeholder{color:#b6bac1}
.ai-esc{flex:none;font-size:12px;color:#9aa0ad;border:1px solid var(--line);border-radius:3px;padding:3px 7px;line-height:1;cursor:pointer;background:#fff}
.ai-esc:hover{color:var(--ink);border-color:#c9ccd1}
.ai-body{padding:18px 22px 8px;overflow-y:auto}
.ai-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.ai-tags span{font-size:12.5px;color:#9aa0ad}
.ai-tags button{
  font-size:12.5px;color:var(--text);background:#f5f6f8;border:0;border-radius:2px;
  padding:6px 12px;cursor:pointer;transition:background .25s,color .25s;
}
.ai-tags button:hover{background:#fdeaea;color:var(--red)}
.ai-say{
  background:#fff6f7;border-left:3px solid var(--red);
  padding:14px 16px;font-size:13.5px;line-height:1.85;color:#4a4f59;margin-bottom:18px;
}
.ai-say b{color:var(--red)}
.ai-say .ai-load{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin-left:3px;animation:aiBlink 1s infinite}
.ai-say .ai-load:nth-child(2){animation-delay:.2s}
.ai-say .ai-load:nth-child(3){animation-delay:.4s}
@keyframes aiBlink{0%,100%{opacity:.2}50%{opacity:1}}
.ai-list{margin:0;padding:0;list-style:none}
.ai-list li{border-top:1px solid #f0f1f3}
.ai-list li:first-child{border-top:0}
.ai-list a{display:block;padding:13px 2px;transition:background .25s}
.ai-list a:hover{background:#fafafa}
.ai-list .ai-top{display:flex;align-items:center;gap:8px}
.ai-list .ai-type{flex:none;font-size:11px;line-height:1;color:var(--red);border:1px solid #f8cdd2;background:#fff5f6;padding:3px 6px;border-radius:2px}
.ai-list .ai-t{font-size:15px;color:var(--ink);font-weight:700}
.ai-list em{font-style:normal;color:var(--red);background:#fff1f2}
.ai-list .ai-d{display:block;margin-top:5px;font-size:12.5px;line-height:1.8;color:#8a8f99}
.ai-empty{padding:26px 2px 30px;font-size:13.5px;line-height:2;color:#8a8f99}
.ai-empty b{color:var(--ink)}
.ai-foot{padding:12px 22px;border-top:1px solid var(--line);font-size:12px;color:#9aa0ad;display:flex;justify-content:space-between;gap:12px}
.ai-foot b{color:var(--red)}
@media (max-width:767px){
  .ai-mask{padding:8vh 14px 30px}
  .ai-panel{max-height:80vh}
  .ai-body{padding:14px 16px 6px}
  .ai-head{padding:14px 16px}
  .ai-input{font-size:15px}
  .ai-esc{display:none}
  .ai-foot{padding:10px 16px;font-size:11.5px}
}

/* ============================ 内页适配（本文件独有） ============================ */
/* `.hd` 是 position:fixed（首页靠它压住 hero）；内页内容必须主动让出这一段，
   否则 PageBanner 会被头部盖住一截（实测 96px）。 */
.hd-space{padding-top:var(--nav-h)}

/* 内页里头部下面的第一块通常就是 PageBanner，它自带较大的上内边距；
   让出头部高度后不要再叠（`--nav-h` 已在 .hd-space 上给过，这里只是清掉旧的粘性偏移）。 */
.hd-space > .page-banner,
.hd-space > .page-main{margin-top:0}

/* 点过导航后强制收起下拉（客户 2026-10-26 反馈「点完导航二级菜单不收回」）。
   home.css 里没有这条（首页那份写在 home-page-extra.css）；内页用的是本文件，
   **必须在这儿也写一遍**，否则内页点完导航下拉照样挂着 —— 换头之后
   `check:interactions` 的"换页后下拉已收回"立刻报 visibility=visible（实测踩到）。
   组件侧（HomeHeader.tsx）点击时给 `<li>` 打 `is-suppressed` 并 blur 掉焦点，
   鼠标离开该项时再摘掉。选择器带 `:hover` 是为了在同特异性下压过 `.hd-nav li:hover .hd-drop`。 */
.hd-nav li.is-suppressed:hover .hd-drop,
.hd-nav li.is-suppressed:focus-within .hd-drop {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
}

/* 🔴 窄屏防挤压（内页独有；首页 home.css 里没这条，实测首页自己也有同样的毛病）：
   手机上头部是「logo + AI搜索 + 汉堡」三块挤一行，都是 flex 子项 ⇒ 默认 `flex-shrink:1`
   会先压汉堡。实测 390 带滚动条时汉堡只剩 **13px**、375 剩 19px、360 直接 **0px**
   （首页同条件 19/12px）—— 34px 的按钮压到十几像素基本点不中，等于手机上没有菜单。
   ⇒ 汉堡不参与压缩（flex:none，保住 34px 可点区域），把余量交给 logo：
      logo 改成等比缩放（height:auto + max-height 封顶），不再被压出横向溢出。 */
@media (max-width:900px){
  .hd-burger{flex:none}
  /* 🔴 基础规则里 `.hd-logo` 是 `flex:0 0 auto`（**不许收缩**），只写 min-width:0 没用：
     logo 会顶着 206px 不动，汉堡保住 34px 后整行反而从右侧溢出（实测 360 宽时右边界 376）。
     这里把它改成 `0 1 auto`，允许 logo 让出空间再等比缩小。 */
  .hd-logo{flex:0 1 auto;min-width:0}
  .hd-logo img{height:auto;max-height:var(--logo-h);max-width:100%}
}