/* CaseListNav —— 「服务案例」页的分类导航（1868:10978）与筛选 tag（1868:11092）。

   分类导航：4 项，每项 84×36、rounded-100、项内 gap 4；选中项下方有
             48×3 的品牌绿下划线（项内 left 18 / top 33），文字变品牌绿 + Medium。
   筛选 tag：4 个，高 30、圆角 4、内距 12/4、gap 8；
             选中 = 底 rgba(0,149,56,.15) + 1px 品牌绿边 + 品牌绿字。

   ★ 两行都是**固定步进**（项宽 84 + gap 8 = 92；tag 宽度随文字），
     不要用 flex:1 均分 —— 设计稿四项总宽 84*4+8*3 = 360 > 容器 343，
     实际靠 overflow 裁掉右边。 */

/* ★ 保持 absolute：设计稿 1868:11093 就是 x16 / y96 的定位层；
     containing block 是 .mzh-case-scroll（375 宽），几何不变，随内容一起滚。
   ⚠️ 2026-10-09 事故：这段曾写成 ".mzh-case-nav {（选择器前多了个引号）——
     CSS 坏字符串不报错，把 .mzh-case-nav 和 .mzh-case-nav__cats 两条规则
     整段吞掉：分类导航竖排成 144 高、导航被顶到 y190、measure 13 项超容差。
     当时误诊为 width:100% 导致 flex 换行、改了 width:auto/flex-wrap:nowrap
     ——真根因是引号，已回归本写法。 */
.mzh-case-nav {
  position: absolute;
  left: var(--case-list-catnav-x);
  top: var(--case-list-content-y);
  /* ★ 宽度 = 设计稿 1868:10978 的 343（页宽 375 − 左右各 16）。 */
  width: var(--case-list-nav-w);
}

.mzh-case-nav__cats {
  display: flex;
  /* ★ 2026-10-09 用户要求「这里的 Tab 可以滑动」——按用户参考图：
     初始态 = 第 4 项裁一半（视口 343，= Figma frame 宽），右滑 17px 看全「全屋定制」。
     （Figma 里 frame 343 无 clip 超框绘制是「静态稿画全」的手段；小程序里
     用 scroll-view 横滑实现同一内容。视口取 frame 值 343，不用渲染像素 359。） */
  width: var(--case-list-nav-w);
  overflow-x: auto;
  scrollbar-width: none;
  gap: var(--case-list-catnav-gap);
  height: var(--case-list-catnav-h);
  flex-wrap: nowrap;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}

.mzh-case-nav__cats:active { cursor: grabbing; }

.mzh-case-nav__cats::-webkit-scrollbar {
  display: none;
}

/* ---- variant=store：「附近门店」页的分类行（1868:12002 / 1868:12003）----
   同一套「4 项 84×36 + gap 8 + 选中 48×3 下划线」规格，差别只在容器：
   行高 44（案例页 36）、项 36 高垂直居中（→ 项 y100）、左右各 16 padding。
   该页无筛选 tag 行（设计稿 1868:12013 hidden）。 */
.mzh-case-nav--store {
  left: 0;
  width: 100%;
  padding-left: var(--store-nav-pad-x);
  height: var(--store-nav-row-h);
}

.mzh-case-nav--store .mzh-case-nav__cats {
  width: var(--store-nav-viewport-w);
  height: var(--store-nav-row-h);
  align-items: center;
}

/* ★ 本页（1868:12003）四项**都是 Medium**（案例页未选中项是 Regular）——
   设计稿 design_context 四项均为 font-['PingFang_SC:Medium']，
   实测未选中项墨量 14.8% 对 Regular 的 10.0%。 */
.mzh-case-nav--store .mzh-case-nav__cat {
  font-weight: var(--typography-weight-medium);
}

.mzh-case-nav__cat {
  position: relative;
  flex: none;
  width: var(--case-list-catnav-item-w);
  height: var(--case-list-catnav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  border: 0;
  padding: 0 var(--spacing-sm);
  border-radius: var(--case-list-catnav-radius);
  background: transparent;
  font-family: inherit;
  font-size: var(--case-list-catnav-size);
  line-height: var(--typography-subtitle-line-height);
  font-weight: var(--typography-weight-regular);
  color: var(--color-text-secondary);
  white-space: nowrap;
  cursor: pointer;
}

/* ★ 0.8 透明度压**文字**，不压整个按钮 —— 选中下划线是 ::after，
   写在按钮上会连下划线一起变淡；设计稿实测：选中文字 (48,168,94)=0.8，
   下划线纯色 (0,149,56)。未选中文字 0.8(元素)×0.8(颜色)=0.64 → (109,110,110)。 */
.mzh-case-nav__cat-label {
  opacity: var(--case-list-catnav-opacity);
}

.mzh-case-nav__cat[aria-selected="true"] {
  font-weight: var(--typography-weight-medium);
  color: var(--color-text-brand);
}

/* 选中下划线 1868:11094：项内 left 18 / top 33，48×3 */
.mzh-case-nav__cat[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: var(--case-list-catnav-underline-x);
  top: var(--case-list-catnav-underline-y);
  width: var(--case-list-catnav-underline-w);
  height: var(--case-list-catnav-underline-h);
  border-radius: var(--radius-full);
  background: var(--color-text-brand);
}

.mzh-case-nav__tags {
  display: flex;
  width: var(--case-list-tag-row-w);   /* 1868:11092 宽 330（≠分类导航的 343） */
  gap: var(--case-list-tag-gap);
  height: var(--case-list-tag-h);
  margin-top: var(--case-list-tag-offset);
  overflow: clip;
}

.mzh-case-nav__tag {
  flex: none;
  height: var(--case-list-tag-h);
  display: flex;
  align-items: center;
  padding: 0 var(--case-list-tag-pad-x);
  border: 0;
  border-radius: var(--case-list-tag-radius);
  background: var(--case-card-bg);
  font-family: inherit;
  font-size: var(--case-list-tag-size);
  line-height: var(--typography-body-line-height);
  font-weight: var(--typography-weight-regular);
  color: var(--button-secondary-fg-default);
  opacity: var(--case-list-tag-opacity);
  white-space: nowrap;
  cursor: pointer;
}

/* 选中态有 1px 边框 —— border 参与盒模型，把 tag 撑宽 2px（设计 52 → 实际 54），
   后面三个 tag 也整体右移 2px。
   ★ 设计稿 1868:11082 的 52 = padding 12+12 + 文字 28，**不含 border**；
     选中态多出的 1px 边框要「吃掉」内距 → 选中态 padding 改 11。 */
.mzh-case-nav__tag[aria-selected="true"] {
  box-sizing: border-box;
  background: var(--case-list-tag-on-bg);
  border: var(--border-width-default) solid var(--case-list-tag-on-border);
  padding-left: calc(var(--case-list-tag-pad-x) - var(--border-width-default));
  padding-right: calc(var(--case-list-tag-pad-x) - var(--border-width-default));
  color: var(--color-text-brand);
  opacity: 1;
}