/* ============================================================================
   顶栏（.site-header）—— 全站唯一权威样式
   ----------------------------------------------------------------------------
   为什么单独抽一个文件：
     首页 index.html 的顶栏样式写在内联 <style> 里，商城三页用的是 shop.css
     里的一份副本。两份各自演进，导致同一根顶栏在不同页面宽高、间距、右侧
     按钮都不一样（实测：导航组横向错位 54px，结算页右上角两个按钮直接没了）。

   用法：
     每个有顶栏的页面，在 </head> 之前、所有页面级样式之后引入本文件，
     保证这里是最后生效的那一份。所有选择器都挂在 .site-header 下，
     不去污染页面里同名的 .btn-primary 之类通用类。

   布局基准：.nav 高 68px，由 /assets/fit.js 的 --fit-s 等比缩放
     （1440 视口 ≈ 0.756 → 实际 52px）。四个页面缩放系数相同，
     所以这里的数值只要一样，渲染结果就必然一样。
   ========================================================================== */

/* ---------- 条体 ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}

/* ---------- 外壳模式 ---------- */
/* 页面被装进 /shell.html 的内容区时（地址带 ?shell=1），顶栏由外壳统一提供，
   这里必须把页面自带的那一根藏掉，否则一屏会出现两根顶栏。
   .in-shell 由每个页面 head 里的一行内联脚本在样式生效前挂到 <html> 上，
   因此不会出现「先画出来再消失」的闪烁。 */
.in-shell .site-header{display:none;}

/* ---------- 栅格：左品牌 / 中导航 / 右按钮 ---------- */
.site-header .nav{
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  position:relative;   /* 导航绝对居中的定位基准 */
}

/* ---------- 品牌 ---------- */
.site-header .brand{display:flex;align-items:center;gap:9px;}
.site-header .brand-mark{
  width:38px;height:38px;border-radius:10px;flex:none;
  display:block;object-fit:cover;background:#2F6BDD;
  box-shadow:
    0 6px 14px -9px rgba(31,107,238,.55),
    0 0 0 1px rgba(31,107,238,.09);
}
/* 文字块宽度由中文名决定；align-items:flex-start 很关键——
   否则中文会被拉伸，量到的就是块宽而不是字宽 */
.site-header .brand-text{
  display:flex;flex-direction:column;gap:3px;
  width:max-content;align-items:flex-start;
}
.site-header .brand-name{
  font-size:18px;font-weight:700;letter-spacing:.1em;
  color:#0B1526;line-height:1.1;
}
/* 英文副标：右端与中文名严格对齐，字号由 /assets/site-header.js 实测反算。
   ------------------------------------------------------------------------
   ⚠️ width:0 + overflow:visible 是这条顶栏「不晃」的关键，不要改成别的写法：
     · 实测副标在 11.5px 时宽 78.2px，会把 .brand 从 95.36px 撑到 113.72px；
       JS 缩到 7.7px 后又掉回来 —— 导航组在页面已经可见之后横向跳 9.17px，
       用户看到的就是「来回切页面顶栏晃一下」。
     · 宽度归零后，.brand-text 的宽度只由中文名决定，副标字号怎么变都推不动别人；
       而 overflow:visible 保证文字照常显示，高度也仍按 line-height 正常撑开，
       所以中文名与副标的间距、整块高度跟原来完全一致（像素级零差异）。
     · 试过 min-content，不行：元素带 white-space:nowrap 时它的 min-content
       就等于整串宽度，等于没限制。
   JS 那边改用 Range 量文字宽度（同样返回 78.2），不受 width:0 影响。 */
.site-header .brand-sub{
  display:block;white-space:nowrap;letter-spacing:0;
  width:0;overflow:visible;
  font-size:11.5px;font-weight:500;color:#64758F;line-height:1;
  font-family:"Inter",-apple-system,"Segoe UI",sans-serif;
}

/* ---------- 横向导航 ---------- */
/* 绝对居中于 .nav：品牌块比右侧按钮组宽，用 flex 居中会让导航整体偏左约 40px，
   对不齐首页搜索框的中线。改成绝对定位后中线永远落在页面正中。 */
.site-header .nav-links{
  display:flex;align-items:center;gap:36px;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}
.site-header .nav-links a{
  font-size:13.5px;color:#445470;padding:6px 0;position:relative;
  transition:color .18s ease;
}
.site-header .nav-links a:hover{color:var(--brand);}
.site-header .nav-links a.is-active{color:var(--brand);font-weight:500;}
.site-header .nav-links a.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-16px;height:2px;
  background:var(--brand);border-radius:2px;
}

/* ---------- 右侧按钮区 ---------- */
.site-header .nav-right{display:flex;align-items:center;gap:20px;}

.site-header .btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 18px;border-radius:8px;
  background:var(--brand);color:#fff;font-size:13px;font-weight:500;
  /* nowrap + flex:none：窄屏上宁可挤别人也不能把「联系我们」折成两行 */
  white-space:nowrap;flex:none;
  border:0;cursor:pointer;font-family:inherit;
  box-shadow:0 6px 16px -8px rgba(46,125,255,.75);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.site-header .btn-primary:hover{background:var(--brand-deep);box-shadow:0 8px 20px -8px rgba(46,125,255,.85);}
.site-header .btn-primary:active{transform:translateY(1px);}

/* 后台入口：白底描边，不跟实心的「联系我们」抢注意力 */
.site-header .btn-admin{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 13px;border-radius:8px;
  background:#fff;color:#475569;border:1px solid #DDE5F1;
  font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;
  white-space:nowrap;flex:none;   /* 同样不许折行：「后台管理」折成三行最难认 */
  transition:color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease;
}
.site-header .btn-admin:hover{color:var(--brand);border-color:#B9CDF0;background:#F5F8FE;}
.site-header .btn-admin:active{transform:translateY(1px);}
.site-header .btn-admin:focus-visible{outline:2px solid #A9C2F0;outline-offset:2px;}
.site-header .btn-admin svg{display:block;flex:none;}

/* ---------- 汉堡（≤899px 才出现） ---------- */
.site-header .btn-menu{
  display:none;                 /* 桌面隐藏，靠下方 @media 打开 */
  align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;flex:none;
  background:#fff;color:#475569;border:1px solid #DDE5F1;border-radius:8px;
  cursor:pointer;font-family:inherit;
}
.site-header .btn-menu:hover{color:var(--brand);border-color:#B9CDF0;background:#F5F8FE;}
.site-header .btn-menu:focus-visible{outline:2px solid #A9C2F0;outline-offset:2px;}
.site-header .btn-menu[aria-expanded="true"]{color:var(--brand);border-color:#B9CDF0;background:#EEF4FF;}
.site-header .btn-menu svg{display:block;}

/* ---------- 移动端下拉面板 ----------
   挂在 .site-header 下（sticky 本身是定位元素，可以直接当包含块），
   top:100% 贴着导航底边展开，不占文档流。
   默认 display:none，只在窄屏 .is-open 时开：桌面端就算 JS 误加 class 也露不出来。 */
.site-header .m-panel{
  display:none;
  position:absolute;left:0;right:0;top:100%;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 18px 40px -26px rgba(23,41,77,.45);
  max-height:calc(100vh - 68px);
  max-height:calc(100dvh - 68px);
  overflow:auto;
  padding:4px 0 10px;
}
.site-header .m-link{
  display:flex;align-items:center;gap:9px;
  width:100%;height:48px;padding:0;
  font-family:inherit;font-size:15px;line-height:1.2;
  color:#25324A;background:none;border:0;text-align:left;cursor:pointer;
  transition:color .16s ease;
}
.site-header .m-link:hover{color:var(--brand);}
.site-header .m-link:focus-visible{outline:2px solid #A9C2F0;outline-offset:-2px;}
.site-header .m-link.is-active{color:var(--brand);font-weight:600;}
.site-header .m-link svg{display:block;flex:none;}
.site-header .m-sep{height:1px;background:var(--line);margin:6px 0;}
@keyframes hdrPanelIn{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .site-header .m-panel.is-open{animation:none !important;}
}

/* ---------- 微信名片弹层（全站唯一权威） ----------
   版式与首页那张名片弹层完全一致：左边竖版名片图，右边标题 / 二维码 / 微信号+复制。
   为什么升级：2026-11-02 用户指出「之前的是有头像、有手机号的」——
   最早只有首页有这套名片弹层，商城自己又写了一份极简版，公共脚本给结算/付款/
   关于我们又补了一份更简的，全站出现三套不同弹层，同一个按钮点出来三种样子。
   现在统一收在这里，所有页面只要按钮带 data-wechat 就是这个。
   用 hdr-wx- 前缀另开命名空间，首页内联的 .wx-* 一个字都不用动。 */
.hdr-wx{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  background:rgba(10,20,38,.46);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  padding:24px;
}
.hdr-wx.is-open{display:flex;}
.hdr-wx-card{
  position:relative;width:min(480px,92vw);max-height:94vh;overflow:auto;
  display:flex;align-items:center;gap:18px;
  background:#fff;border-radius:20px;padding:22px;
  box-shadow:0 28px 66px -20px rgba(9,20,45,.45);
  text-align:center;
}
/* 左：竖版名片图（600×809，含头像与品牌），和图二维码同一份素材 */
.hdr-wx-photo{
  width:194px;flex:none;border-radius:11px;overflow:hidden;
  border:1px solid #E9EEF7;background:#fff;
  box-shadow:0 9px 22px -12px rgba(16,32,64,.5);
}
.hdr-wx-photo img{display:block;width:100%;height:auto;background:#FAFBFE;}
.hdr-wx-body{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;}
.hdr-wx-body h3{margin:0;font-size:16px;font-weight:700;color:#0B1526;}
.hdr-wx-body .sub{margin:6px 0 0;font-size:12px;color:#64758F;}
.hdr-wx-qr{
  width:145px;height:145px;margin:12px auto 11px;padding:7px;
  border-radius:12px;background:#fff;border:1px solid #E6ECF6;
  display:grid;place-items:center;
  box-shadow:0 9px 24px -14px rgba(20,40,80,.35);
}
.hdr-wx-qr img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px;}
/* 微信号行：号码 + 复制（手机号即微信号） */
.hdr-wx-id{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 11px;width:100%;
  background:#F5F8FD;border:1px solid #E9EFF8;border-radius:10px;
}
.hdr-wx-id .k{font-size:11.5px;color:#8A99AE;white-space:nowrap;flex:none;}
.hdr-wx-id .n{
  font-size:13px;font-weight:600;color:#0B1526;letter-spacing:.06em;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.hdr-wx-id .c{
  margin-left:2px;padding:3px 10px;border-radius:7px;flex:none;
  border:1px solid #D8E3F7;background:#fff;cursor:pointer;white-space:nowrap;
  font-size:12px;color:#1F6BEE;font-family:inherit;
  transition:background .16s ease,border-color .16s ease;
}
.hdr-wx-id .c:hover{background:#EDF3FF;border-color:#B9CDF3;}
.hdr-wx-close{
  position:absolute;top:13px;right:13px;
  width:33px;height:33px;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:transparent;color:#9AA8BD;
  transition:background .16s ease,color .16s ease;
}
.hdr-wx-close:hover{background:#F1F4FA;color:#445470;}
/* 窄屏：名片图缩一档；再窄（≤380）整张藏掉，只留二维码和微信号，
   否则 132px 的图会把 480 宽的卡片挤成一条 */
@media (max-width:640px){
  .hdr-wx-card{width:100%;padding:16px;gap:12px;}
  .hdr-wx-photo{width:132px;}
  .hdr-wx-qr{width:120px;height:120px;margin:10px auto 9px;}
  .hdr-wx-body h3{font-size:14.5px;}
  .hdr-wx-body .sub{font-size:11px;margin-top:5px;line-height:1.45;}
  .hdr-wx-id{padding:7px 8px;gap:6px;}
  .hdr-wx-id .k{font-size:10.5px;}
  .hdr-wx-id .n{font-size:11.5px;}
  .hdr-wx-id .c{font-size:11px;padding:2px 8px;}
}
/* 390 这类窄机：右栏只剩 160 出头，
   「李江· 四川极致租机科技有限公司」会把「司」挤成孤儿字，
   微信号行也装不下「标签+号码+复制」三件。两条一起收：
   副标再降半号、省掉「微信号」三个字只留号码与复制（标签在桌面版已经说过一次）。 */
@media (max-width:420px){
  .hdr-wx-body .sub{font-size:10px;margin-top:4px;}
  .hdr-wx-id{flex-wrap:nowrap;}
  .hdr-wx-id .k{display:none;}
}
@media (max-width:380px){
  .hdr-wx-photo{display:none;}
}

/* ============================================================================
   窄屏断点：缩放关闭后顶栏按原生 68px 呈现
   ========================================================================== */
@media (max-width:899px){
  /* 横向导航收进汉堡面板；顶栏只留「联系我们」+ 汉堡 */
  .site-header .nav-links{display:none;}
  .site-header .btn-admin{display:none;}
  .site-header .btn-menu{display:inline-flex;}
  .site-header .m-panel{padding-left:32px;padding-right:32px;}
  .site-header .m-panel.is-open{display:block;animation:hdrPanelIn .16s ease both;}
}

@media (max-width:640px){
  .site-header .nav{gap:12px;}
  .site-header .brand-sub{display:none;}
  .site-header .nav-right{gap:8px;}
  .site-header .btn-primary,
  .site-header .btn-admin{height:32px;font-size:12px;}
  .site-header .btn-primary{padding:0 12px;}
  .site-header .btn-admin{padding:0 10px;gap:5px;}
  .site-header .m-panel{padding-left:20px;padding-right:20px;}
}

/* 320px 级别的老机型：两个按钮实在放不下，后台入口退化成图标按钮 */
@media (max-width:359px){
  .site-header .nav{gap:8px;}
  .site-header .ba-t{display:none;}
  .site-header .btn-admin{padding:0 9px;}
  .site-header .btn-primary{padding:0 10px;font-size:11.5px;}
}