/* Nav —— 顶部绿色导航块（Figma 1887:1174）。
   375×189，-54.03° 三段绿渐变，下圆角 60。

   ⚠️ 含「系统层」：状态栏整条与微信胶囊。
   真机上这两块由微信绘制、页面无法也不该绘制；放在这里只是为了让 HTML
   能与设计稿逐像素对照。
   状态栏用设计稿自己的渲染图（含 9:41 与信号/WiFi/电池），而不是用系统字体重建 ——
   设计稿那行字是 SF Pro Text Semibold 16.47px，字体与字重都不在规范里，
   重建必然失真，而它本来就是操作系统画的东西。

   主功能白卡不在这里 —— 它是本块的兄弟节点，用负 margin 上提 84px
   （卡 top 105 − 导航高 189），两个组件互不依赖。 */

.mzh-nav {
  position: relative;
  height: var(--nav-height);
  background-image: linear-gradient(
    var(--nav-gradient-angle),
    var(--color-bg-nav-gradient-1) var(--nav-gradient-stop-1),
    var(--color-bg-nav-gradient-2) var(--nav-gradient-stop-2),
    var(--color-bg-nav-gradient-3) var(--nav-gradient-stop-3));
  border-bottom-left-radius: var(--nav-radius-bottom);
  border-bottom-right-radius: var(--nav-radius-bottom);
}

/* ---- 系统层（真机由微信绘制）---- */
.mzh-nav__statusbar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--nav-statusbar-height);
  object-fit: cover;
  pointer-events: none;
}

.mzh-nav__capsule {
  position: absolute;
  right: var(--nav-capsule-right);
  top: var(--nav-capsule-top);
  width: var(--nav-capsule-w);
  height: var(--nav-capsule-h);
  pointer-events: none;
}

/* ---- variant=bare：只有系统层，无渐变/品牌头（产品教程页等频道页用）---- */
.mzh-nav--bare {
  height: var(--tutorial-nav-h);
  background-image: none;
  border-radius: 0;
}

.mzh-nav--bare .mzh-nav__capsule {
  right: var(--tutorial-capsule-right);
  top: var(--tutorial-capsule-top);
}

/* 服务案例页（1861:9772）：状态栏 44（iPhone X 标准，不是 44+2）、
   胶囊 87×32 @x261 → right = 375-261-87 = 27、纵向居中于 title(48) → top 50 */
.mzh-nav--case {
  height: var(--case-list-nav-h);
  background-image: none;
  border-radius: 0;
}

.mzh-nav--case .mzh-nav__capsule {
  right: var(--case-list-nav-capsule-right);
  top: var(--case-list-nav-capsule-top);
  width: var(--case-list-nav-capsule-w);
  height: var(--case-list-nav-capsule-h);
}

.mzh-nav--case .mzh-nav__statusbar {
  height: var(--case-list-nav-statusbar-h);
}

/* ---- variant=store：「附近门店」页顶部栏（Figma 1868:12075）----
   状态栏 44（深色）+ 返回键 x16 + 定位图标 x42 + 标题 x68 + 胶囊；
   三个前景元素都在 48 高 title 行内垂直居中 → 绝对 y56（44 + (48-24)/2）。 */
.mzh-nav--store {
  height: var(--store-top-h);
  background-image: none;
  border-radius: 0;
}

.mzh-nav--store .mzh-nav__statusbar {
  height: var(--store-statusbar-h);
}

.mzh-nav--store .mzh-nav__capsule {
  right: var(--store-capsule-right);
  top: var(--store-capsule-top);
  width: var(--store-capsule-w);
  height: var(--store-capsule-h);
}

/* 返回键：24×24 盒，图标 9.43×17.816 居中略左偏 0.52（1868:12077 的内帧） */
.mzh-nav--store .mzh-nav__back {
  left: var(--store-back-x);
  top: var(--store-back-y);
  width: var(--store-back-box);
  height: var(--store-back-box);
  /* ★ 父层 .mzh-phone--store .mzh-nav 是 pointer-events:none（不吃滚动手势），
     pointer-events 会被继承且 auto 回不来 → 交互元素必须自己声明。 */
  pointer-events: auto;
}

/* 图标 9.43×17.816：由 .mzh-nav__back 的 flex 居中承接，再按设计左偏 0.52
   （不写 50% / translate —— 样式闸门禁止硬编码百分比与长度） */
.mzh-nav--store .mzh-nav__back-icon {
  width: var(--store-back-icon-w);
  height: var(--store-back-icon-h);
  margin-left: calc(-1 * var(--store-back-icon-dx));
}

.mzh-nav--store .mzh-nav__loc {
  position: absolute;
  left: var(--store-loc-x);
  top: var(--store-back-y);
  width: var(--store-loc-size);
  height: var(--store-loc-size);
}

.mzh-nav--store .mzh-nav__title {
  position: absolute;
  left: var(--store-title-x);
  top: var(--store-back-y);
  height: var(--store-back-box);
  display: flex;
  align-items: center;
  font-size: var(--store-title-size);
  line-height: var(--typography-subtitle-line-height);
  font-weight: var(--typography-weight-medium);
  color: var(--store-title-color);
  opacity: var(--store-title-opacity);
  white-space: nowrap;
}

/* ---- variant=blur：免费预约页的导航 ----
   设计稿的导航节点带 backdrop-filter: blur(14.24px)（Figma 背景模糊 28.4876），
   但设计稿自身渲染出来是清晰的（模糊层没画出来）。
   按「以渲染结果为准」，这里不挂 blur，只保留 token 记录来源。 */
.mzh-nav--blur {
  height: var(--booking-nav-h);
  background-image: none;
  border-radius: 0;
  pointer-events: auto;
}

.mzh-nav--blur .mzh-nav__capsule {
  right: var(--booking-nav-capsule-right);
  top: var(--booking-nav-capsule-top);
}

.mzh-nav__back {
  position: absolute;
  left: var(--booking-nav-back-x);
  top: var(--booking-nav-back-y);
  width: var(--booking-nav-back-box);
  height: var(--booking-nav-back-box);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.mzh-nav__back-icon {
  width: var(--booking-nav-back-icon-w);
  height: var(--booking-nav-back-icon-h);
  display: block;
}

/* ---- 品牌层 ---- */
/* logo：设计稿画框只有 65 宽，而图片是 126.193 → 设计上就是「裁切显示」。
   用 overflow-clip 忠实复刻，不做缩放。 */
.mzh-nav__logo {
  position: absolute;
  left: var(--nav-logo-left);
  top: var(--nav-logo-top);
  width: var(--nav-logo-width);
  height: var(--nav-logo-height);
  overflow: clip;
}

.mzh-nav__logo-img {
  display: block;
  width: var(--nav-logo-image-w);
  height: var(--nav-logo-height);
  object-fit: cover;
  margin-left: var(--border-width-default); /* 图片在画框内 left 1px */
}

.mzh-nav__bell {
  position: absolute;
  left: var(--nav-bell-left);
  top: var(--nav-bell-top);
  width: var(--nav-bell-size);
  height: var(--nav-bell-size);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.mzh-nav__bell-img {
  display: block;
  width: 100%;
  height: 100%;
}

/* 居中标题频道导航；复用 Nav 的返回、胶囊与系统层 API。 */
.mzh-nav--center { height: var(--store-top-h); background-image: none; border-radius: 0; }
.mzh-nav--center .mzh-nav__back { left: var(--store-back-x); top: var(--store-back-y); width: var(--store-back-box); height: var(--store-back-box); }
.mzh-nav--center .mzh-nav__back-icon { width: auto; height: auto; margin-left: calc(-1 * var(--store-back-icon-dx)); }
.mzh-nav--center .mzh-nav__title { position: absolute; top: var(--store-back-y); left: 0; right: 0; text-align: center; padding-left: var(--nav-center-title-offset); font-size: var(--typography-subtitle-font-size); line-height: var(--typography-subtitle-line-height); font-weight: var(--typography-weight-medium); color: var(--store-title-color); opacity: var(--store-title-opacity); }
.mzh-nav--center .mzh-nav__capsule { left: var(--user-reviews-capsule-x); right: auto; top: var(--user-reviews-capsule-y); width: var(--user-reviews-capsule-w); height: var(--user-reviews-capsule-h); }
.mzh-nav--center .mzh-nav__statusbar { left: var(--user-reviews-status-x); top: var(--user-reviews-status-y); width: var(--user-reviews-status-w); height: var(--user-reviews-status-h); object-fit: contain; }
.mzh-nav__time { position: absolute; left: var(--user-reviews-time-x); top: var(--user-reviews-time-y); width: var(--user-reviews-time-w); line-height: var(--user-reviews-time-h); font-size: var(--user-reviews-time-size); font-weight: var(--nav-system-time-weight); letter-spacing: var(--nav-center-time-tracking); text-align: center; color: var(--store-title-color); }
.mzh-nav__surface { position: absolute; left: 0; top: 0; pointer-events: none; }
.mzh-nav--center-light .mzh-nav__back, .mzh-nav--center-light .mzh-nav__title { top: var(--points-page-nav-back-y); }
.mzh-nav--center-light .mzh-nav__title, .mzh-nav--center-light .mzh-nav__time { color: var(--color-action-on-primary); }
.mzh-nav--center-light .mzh-nav__capsule { left: var(--points-page-nav-capsule-x); top: var(--points-page-nav-capsule-y); }
.mzh-nav--center-light .mzh-nav__statusbar { left: var(--points-page-nav-status-x); }