/* pages/solutions.css — 解决方案列表页（bundle 4:470「SOLUTIONS-list」，1920×3526）
   断点：base 移动流式；≥768 两列；≥1280 按 1920 设计稿精确几何（frontend-execute.md §2.1/§2.3） */

/* ---------- 子页面导航（同 products.css：白底黑字、下滑吸附置顶、分隔线淡出） ---------- */
.page-sub .site-nav {
  position: sticky; /* 子页导航在文档流内，sticky 吸附不产生内容位移（fixed 会掉 96px） */
  top: 0;
  background: var(--color-bg-page);
  color: var(--color-text-1);
}

.page-sub .site-nav.is-scrolled {
  position: sticky; /* 必须 sticky：本选择器 (0,3,0) 压过 components.css 的 .site-nav.is-scrolled (0,2,0) */
  top: 0;
  height: 6rem; /* 保持 96px：子页导航在流内，缩到 88 会把下方内容顶上 8px */
}

.page-sub .site-nav__inner {
  border-color: transparent;
}

.page-sub .site-nav__menu a:hover {
  color: var(--color-primary);
}

.page-sub .site-nav__toggle span {
  background: var(--color-text-1);
}

/* ---------- 面包屑（4:576：SOLUTIONS → ALL SOLUTIONS，x=82，y=146） ---------- */
.psol-crumbs {
  margin: var(--space-12) var(--space-6) 0;
  font-size: var(--font-size-body-sm);
  letter-spacing: -.02em;
}

.psol-crumbs ol {
  display: flex;
  align-items: center;
  gap: .625rem;
}

.psol-crumbs svg {
  flex: none;
}

.psol-crumbs [aria-current] {
  letter-spacing: 0;
}

/* ---------- 页头（4:563：块 x=50–1870，标题 y=265，黑线 y=405，tab 行 y=450，规则线 y=505） ---------- */
.psol-hero {
  position: relative;
  margin: 1.375rem var(--space-6) 0;
}

.psol-hero__icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 6rem;
  height: 6rem;
  color: var(--color-text-3); /* i-hero-env 描边灰 #999 */
}

.psol-hero__title {
  padding-top: 2.5rem;
  font-size: clamp(1.75rem, 1rem + 2.6vw, var(--font-size-h1));
  line-height: var(--line-height-title); /* 60/48 */
}

.psol-hero__rule {
  margin-top: var(--space-8);
  border: 0;
  border-top: 1px solid var(--color-text-1); /* Line 4 */
}

/* ---------- 解决方案 Tab（4:568-4:571：三个 36px 标签 + 60px 黑色短分隔线；激活 = 红字 + 黑规则线上的红色指示段） ---------- */
.psol-tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: .75rem;
  margin-top: 2rem;
}

.psol-tab {
  padding: 0 2rem;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: clamp(1.25rem, 1.1rem + 1.7vw, var(--font-size-h2));
  line-height: 3.125rem; /* 50 */
  font-weight: var(--font-weight-medium);
  color: var(--color-text-1);
  cursor: pointer;
  transition: color .2s ease-out;
}

.psol-tab:hover {
  color: var(--color-primary);
}

.psol-tab.is-active {
  color: var(--color-primary);
}

.psol-tabs__sep {
  width: 1px;
  height: 3.75rem; /* 60，竖向分隔线：上超文本盒 5px，下端与规则线相接（445–505） */
  margin-top: -.3125rem;
  background: var(--color-text-1);
}

/* 红色激活指示段：JS 定位到激活 tab 盒，压在下方黑色规则线上（与 products-sub 红黑同位约定一致） */
.psol-tabs__indicator {
  position: absolute;
  bottom: -.0625rem; /* -1：规则线已落到 tab 行底，指示段随之跟到规则线上 */
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-primary);
  transition: left .2s ease-out, width .2s ease-out;
}

.psol-tabs__rule {
  margin-top: 0; /* 规则线 y=505（= tab 行底 505；竖线 445–505 的下端落于此，见 __sep 注释） */
  border: 0;
  border-top: 1px solid var(--color-text-1); /* Line 5 */
}

/* ---------- 解决方案网格（4:512：3×3，卡 640×568 无间距，图 530×370，红段线居中 270） ---------- */
.psol-grid {
  margin-top: 1.25rem; /* 网格 y=526（规则线底 506 + 20） */
}

.psol-grid__list {
  display: grid;
  grid-template-columns: 1fr;
}

.psol-card {
  position: relative;
  padding: 2.5rem 1rem 1.5rem;
  background: var(--color-bg-card);
  transition: background-color .2s ease-out;
}

/* ⚠ 坑 29 同型（2026-09-20 审计发现并修）：同 products-sub.css 的 `.pmod-card`，
   `.psol-card` 也是 `[data-m-stagger]` 的直接子元素，上面那条 `transition: background-color .2s`
   被 motion.css 的 `.m-ready [data-m-anim]`（0,2,0）整条覆盖 → hover 背景瞬跳。
   解法：选择器抬到 (0,3,0) + 把 motion 三条过渡原样抄回。❗ 详见 products-sub.css 同名规则的注释。 */
.psol-grid .psol-grid__list .psol-card {
  transition:
    opacity var(--m-dur) ease var(--m-delay, 0ms),
    translate var(--m-dur) var(--m-ease) var(--m-delay, 0ms),
    scale var(--m-dur) var(--m-ease) var(--m-delay, 0ms),
    background-color .2s ease-out;
}


.psol-card__media {
  position: relative;
  aspect-ratio: 530 / 370;
  overflow: hidden;
}

.psol-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.psol-card--bright .psol-card__media img {
  filter: brightness(1.1); /* 设计稿 exposure +0.13 */
}

/* hover 态遮罩 + 机型标签（数据以设计稿 hover 卡 MDL-150XE 为 mock，后端接入后替换） */
.psol-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  transition: opacity .2s ease-out;
}

.psol-card__flag {
  display: none;
  position: absolute;
  z-index: 1;
  right: 12%;
  bottom: .3125rem;
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
  font-weight: var(--font-weight-medium);
  color: #fff;
}

/* 红段线：图底 1px，默认居中 270/530，hover 两端延长盖满（无黑底线，与 products-sub 卡不同型） */
.psol-card__line {
  position: relative;
  height: 1px;
  margin-top: 1px;
}

/* 红段线（2026-09-18 用户要求 1px → 3px）：与 products-sub 的 .pmod-card__divider::after 同构 ——
   父盒仍是 1px，红段用 top:50% + translateY(-50%) 上下对称溢出到 3px。
   好处：线**中心**不变（仍 119.89）、下方标题完全不动，也不用改任何 margin。
   ⚠ 代价是红段上缘会压住图片底部 1px（占 118.39..121.39）—— 与 products-sub「红覆黑线」同一手法。
   ⚠ 别改成「父盒 height:3px」：那会让标题下移 2px（除非再补 margin 抵消）。
   ⚠ 本页没有黑底线（与 products-sub 的「红覆黑」不同型），红段本身就是分隔线。 */
.psol-card__line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 24.53%;
  right: 24.53%; /* 红段 270 居中 */
  height: 3px;   /* 上下居中覆于 1px 盒，上下各探 1px */
  transform: translateY(-50%);
  background: var(--color-primary);
  transition: left .35s ease-out, right .35s ease-out;
}

.psol-card__go {
  position: absolute;
  right: 0;
  /* ⚠ 从 calc(100% + 1px) 改为 100%：钮整体下移 1px，与红段**重叠** 1px。
     原值是「钮底与红段上缘刚好相切」（盒模型上确实 0 缝），但钮与红段各自成层、
     各自光栅化取整，共享边界又落在分数坐标上 → 被撕开一条缝（products-sub 实测过：
     1x 屏缝 1px、2x/4x 屏缝 0.5px）。重叠 1px 后取整误差吃不掉它。
     几何：红段 3px 占 118.39..121.39，钮底 119.39 → 重叠恒 1.00px。
     ⚠ 这个 1px 不是「视觉微调」，是**消除接缝的必要量**，别再改回相切。 */
  bottom: 100%;
  z-index: 2; /* 高于整卡覆盖层（.psol-card__link::after 的 z-index:1）—— 指针落在钮上时命中的是钮自己，保住它的 :hover 变深红 */
  display: grid;
  place-items: center;
  width: 2.8125rem; /* 45 */
  height: 2.8125rem;
  border-radius: .3125rem 0 0 0; /* 左上 5px 圆角（2026-09-18 用户要求「参照 products-sub」；其余三角仍为设计稿的直角） */
  background: var(--color-primary);
  color: #fff;
  transition: opacity .2s ease-out, background-color .2s ease-out;
}

.psol-card__go:hover {
  background: var(--color-primary-dark);
}

.psol-card__go svg {
  width: .625rem;  /* 10 */
  height: .875rem; /* 14 */
}

.psol-card__title {
  margin-top: 1.75rem; /* 标题 y=986（线 958 + 28） */
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
  font-weight: var(--font-weight-medium);
}

/* 整卡可点（2026-09-18 用户要求）：stretched link，与 products-sub 的 .pmod-card__link /
   首页 .news-card 同一套。关键在 .psol-card__link **自身是 static** —— 它 ::after 的包含块
   才会是上面那个 position:relative 的 .psol-card，inset:0 才能铺满整张卡（含卡片内边距）。
   ⚠ 若日后给 .psol-card__link 或它祖先加 position，覆盖层会塌回那个祖先的盒子。
   ⚠ 不能把这套挪进 .psol-card__line：它是 position:relative，会把包含块截在 1px 高的线上。
   配合 HTML：标题里是**真链接**（留在无障碍树），红色箭头钮改为 aria-hidden + tabindex="-1"。
   ⚠ 覆盖层与 .psol-card__flag 同为 z-index:1，靠 DOM 顺序决胜（title 在 figure 之后）→ 链接赢。 */
.psol-card__link {
  color: inherit;
  text-decoration: none;
}

.psol-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* 低于红色钮的 z-index:2，高于卡片其余内容 */
}

/* ---------- 分页（4:500：1/2/3 + 左右箭头，居中；当前无更多数据，整体为静态 mock） ---------- */
.psol-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9375rem; /* 15 */
  margin-top: 2.5rem;
}

.psol-pager__btn,
.psol-pager__num {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-body-lg);
  line-height: 1;
  color: var(--color-text-2);
  cursor: default;
}

/* 分页左右按钮（2026-09-18 用户改规格）：
   默认 = 浅灰块（gray-300 #d9d9d9）+ 灰箭头（text-2 #555）；
   hover / 按下 = 主红块（primary #c30e23）+ 白箭头；四角 5px 圆角。
   ⚠ 这两颗钮当前是 disabled（1/2/3 是静态 mock，没有真实翻页数据）。
     实测 Chrome 里 disabled 按钮的 :hover / :active **仍会匹配**（只有 focus() 无效），
     所以这里用裸 :hover / :active 而**不是** :hover:not(:disabled) ——
     用户明确选择「保留 disabled，hover 仍变红」（2026-09-18）。
     好处是将来接上真实翻页、去掉 disabled 时，这条规则原样继续生效，不用再改。
   ⚠ 与 products-detail 的箭头钮**刻意相反**：那边是真实翻页控件，disabled 不参与变红
     （否则「上一张不可点」看起来却可点）。两处语义不同，别互相「统一」。
   ⚠ 四角都圆（不是 products-detail 那种方向性圆角）：这两颗钮中间隔着 1/2/3 与 15px gap，
     不成对贴合，无方向可言。
   ⚠ cursor 沿用上面共享规则的 default，**没有**改成 pointer：钮确实不可点，
     给 pointer 光标等于骗用户。接入真实翻页时把 disabled 摘掉，可另加
     .psol-pager__btn:not(:disabled) { cursor: pointer; }。 */
.psol-pager__btn {
  display: grid;
  place-items: center;
  width: 2.1875rem; /* 35 */
  height: 2.1875rem;
  border-radius: .3125rem; /* 5px，四角 */
  background: var(--color-gray-300);
  color: var(--color-text-2);
  transition: background-color .2s ease-out, color .2s ease-out;
}

.psol-pager__btn:hover,
.psol-pager__btn:active {
  background: var(--color-primary);
  color: #fff;
}

.psol-pager__btn svg {
  width: .4375rem;  /* 7 */
  height: .6875rem; /* 11 */
}

.psol-pager__btn--prev svg {
  transform: scaleX(-1);
}

.psol-pager__num.is-current {
  color: var(--color-primary);
}

/* ---------- 售后服务（4:480：与 products.html 同构） ---------- */
.psol-service {
  margin-top: var(--space-20);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-text-1); /* Line 7 */
}

.psol-service__title {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, var(--font-size-h1));
  line-height: 1.39;
  border-bottom: 1px solid currentColor; /* Line 5 */
}

.psol-service__cols {
  position: relative;
  display: grid;
  gap: var(--space-12);
  margin-top: var(--space-8);
  padding-bottom: var(--space-12);
}

.psol-service__col {
  position: relative;
}

.psol-service__icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 4rem;
  height: 4rem;
}

.psol-service__col h3 {
  margin-top: var(--space-10);
  padding-right: 5rem;
  font-size: var(--font-size-h3);
  line-height: 2rem;
}

.psol-service__col p {
  margin-top: var(--space-8);
  font-size: var(--font-size-body-md);
  line-height: 1.5rem;
  color: var(--color-text-2);
}

/* ---------- 页尾标语（4:472：本页与服务区间距 60，与 products 系的 80 不同） ---------- */
.psol-slogan {
  margin: var(--space-12) auto var(--space-20);
  padding: 0 var(--space-6);
  text-align: center;
}

.psol-slogan__text {
  max-width: 36.875rem; /* 590 */
  margin: 0 auto;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: var(--font-weight-medium);
}

.psol-slogan .btn-more {
  margin-top: 1.875rem;
}

/* ---------- 平板档（768–1279：两列 + 加大留白） ---------- */
@media (min-width: 768px) {
  .psol-crumbs {
    margin-inline: var(--space-10);
  }

  .psol-hero {
    margin-inline: var(--space-10);
  }

  .psol-grid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .psol-card {
    padding: 2.5rem 2rem 1.5rem;
  }

  .psol-service {
    padding-inline: var(--space-10);
  }

  .psol-slogan {
    padding: 0 var(--space-10);
  }
}

/* ---------- 桌面档（≥1280：1920 设计值精确命中） ---------- */
@media (min-width: 1280px) {
  .psol-crumbs {
    margin: 3.125rem 0 0 5.125rem; /* (82,146) */
  }

  .psol-hero {
    margin: 2.625rem 3.125rem 0; /* 块 (50,207)，与面包屑间距 42 */
  }

  .psol-hero__icon {
    right: 2.0625rem;  /* 图标 x=1662，右缘距块 33 */
    width: 10.9375rem; /* 175 */
    height: 10.9375rem;
  }

  .psol-hero__title {
    margin-inline: 2rem; /* 标题 x=82（tab/规则线仍满幅至块缘 x=50） */
    padding-top: 3.625rem; /* y=265 */
    font-size: var(--font-size-h1);
  }

  .psol-hero__rule {
    margin-top: 5rem; /* 线 y=405（标题底 325 + 80） */
  }

  .psol-tabs {
    margin-top: 2.75rem; /* tab 行 y=450（线底 406 + 44） */
  }

  .psol-tab {
    font-size: var(--font-size-h2); /* 36 */
  }

  .psol-grid {
    margin-top: 1.25rem; /* 网格 y=526 */
  }

  .psol-grid__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 35.5rem; /* 568，行高固定（设计稿九卡等高） */
  }

  .psol-card {
    padding: 3.75rem 9.375% .75rem 7.8125%; /* 上 60，左 50/640，右 60/640 */
  }

  /* 设计稿卡 3 即 hover 态（灰底 + 全宽红线 + 箭头钮 + 遮罩/机型标签），九卡统一实现为 hover/focus-within */
  .psol-card__go {
    opacity: 0;
  }

  .psol-card:hover,
  .psol-card:focus-within {
    background: var(--color-gray-100);
  }

  /* 图片 hover 放大（2026-09-18 用户要求 scale(1.05)）。
     .psol-card__media 已是 overflow:hidden，img 是 width/height:100% + object-fit:cover
     填满容器 —— 放大绕自身中心 = 绕窗中心，**不需要** transform-origin 修正
     （about 那三张「裁剪窗」是因为 img 比容器宽得多才要算 origin，这里不适用）。
     不写 will-change：hover-only 元素常驻提升合成层是反模式，transform 过渡本身已走合成器
     （about.css 同款取舍；news-card 写了，属历史遗留，别照抄）。
     ⚠ 必须 gate ≥1280：触屏没有 hover，且本档的遮罩 / 机型标签 / 红线展开也都是 ≥1280 才启用。
     ⚠ 基态写 transform: scale(1)（不是 none）：给过渡一个同类型的起点。
     ⚠ .psol-card--bright 的 img 上有 filter: brightness(1.1)，与 transform 互不干扰。 */
  .psol-card__media img {
    transform: scale(1);
    transition: transform .6s var(--m-ease, cubic-bezier(0.075, 0.82, 0.165, 1));
  }

  .psol-card:hover .psol-card__media img,
  .psol-card:focus-within .psol-card__media img {
    transform: scale(1.05);
  }

  .psol-card:hover .psol-card__go,
  .psol-card:focus-within .psol-card__go {
    opacity: 1;
    /* 等红线铺完（.35s = 上面 ::after 的 left/right 过渡时长）再出现，与 products-sub 一致。
       只给 hover-in 加延迟：基态 transition 无延迟，移出鼠标时钮先消失、线再收回，反向顺序天然正确。
       ⚠ 必须写成**两个值**：.psol-card__go 基态 transition 列了两条
       （opacity .2s, background-color .2s），单值 transition-delay 会同时命中两者 ——
       那样指针移到钮上时「变深红」也会被拖 350ms（products-sub 实测 532ms 才变色）。
       第一个值对应 opacity（要延迟），第二个对应 background-color（不延迟）。 */
    transition-delay: .35s, 0s;
  }

  .psol-card:hover .psol-card__line::after,
  .psol-card:focus-within .psol-card__line::after {
    left: 0;
    right: 0;
  }

  .psol-card__flag {
    display: block;
    opacity: 0;
    transition: opacity .2s ease-out;
  }

  .psol-card:hover .psol-card__media::after,
  .psol-card:focus-within .psol-card__media::after {
    opacity: 1;
  }

  .psol-card:hover .psol-card__flag,
  .psol-card:focus-within .psol-card__flag {
    opacity: 1;
  }

  .psol-pager {
    margin-top: 3.75rem; /* 分页 y=2290（网格底 2230 + 60） */
  }

  .psol-service {
    margin-top: 6.25rem; /* 售后区 y=2425（分页底 2325 + 100） */
    padding: 0 3.125rem;
    border-bottom: 0; /* Line 7 移到 __inner（见下） */
  }

  /* 售后区两条分隔线（设计 Line 5 / Line 7）都横跨区块盒 50→1870（1820），文字才内缩到 x=82：
     原先 Line 7 挂在区块 border 上 → 跨满视口 0→1920；Line 5 挂在标题上、被 __inner 的
     2rem 内缩带成 82→1838 —— 两条都偏。改法：__inner 不再承担内缩，两条线自然跨满区块盒，
     内缩交给文字元素自己（标题与两栏各 2rem）。仅 ≥1280 生效，移动/平板档不变。 */
  .psol-service__inner {
    border-bottom: 1px solid var(--color-text-1); /* Line 7：50→1870 */
  }

  .psol-service__title {
    padding-inline: 2rem; /* 文字 x=82；Line 5 随盒跨 50→1870 */
    font-size: var(--font-size-h1);
    line-height: 3.125rem;
  }

  .psol-service__cols {
    padding-inline: 2rem; /* 两栏内容仍在 x=82 / x=1010 */
    grid-template-columns: 47.1526% 47.1526%; /* 828/1756：百分比按**内容盒**解析（1820 − 2rem×2），不是按画板宽 1820 */
    justify-content: space-between;
    gap: 0;
    margin-top: 3.75rem;
    padding-bottom: 3.75rem;
  }

  .psol-service__cols::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 19.375rem; /* Line 6 竖线 310 */
    background: var(--color-text-1);
  }

  .psol-service__icon {
    width: 5rem;
    height: 5rem;
  }

  .psol-service__col h3 {
    margin-top: 3rem;
    padding-right: 0;
  }

  .psol-service__col p {
    margin-top: 3.125rem;
  }

  .psol-slogan {
    margin: 3.75rem auto 5rem; /* 标语 y=2905（售后底 2845 + 60），底部距页脚 80 */
  }

  .psol-slogan__text {
    font-size: var(--font-size-h3);
    line-height: 2rem;
  }
}

/* ---------- 移动端专属（<768，2026-09-17）——PC/平板档完全不受影响 ---------- */
@media (max-width: 767px) {
  /* 面包屑：与顶部导航的间距 48 → 18（用户规格「均上移 30px」，2026-09-17 全站 7 个有面包屑的页面统一）。
     base 的 --space-12(48) 是 1920 设计值（y=146 = 导航 96 + 50），移动端导航更矮、视觉密度更小 → 偏大。 */
  .psol-crumbs {
    margin-top: 1.125rem; /* 18 */
    font-size: .75rem; /* 12px（2026-09-20 移动端面包屑字号；base 为 --font-size-body-sm 14px） */
  }

  /* 面包屑 → 头部标题的间距 = 60（2026-09-20 用户要求，仅 <768）。
     base 的 .psol-hero margin-top 1.375rem(22) 是 1920 设计值 → 移动端按 60 收窄。 */
  .psol-hero {
    margin-top: 3.75rem; /* 60 */
  }
  /* 页头右上角装饰图标：**仅移动端隐藏**（2026-09-20 用户要求）。
     图标沿用 base 的 absolute top:0 right:0（96×96），
     该图标在 <768 不参与布局流，隐藏它不会改变任何元素的几何。 */
  .psol-hero__icon {
    display: none;
  }

  /* 售后区：与 products.html 同构——图标从右上角绝对定位移到标题前（同行、上下居中），缩小 64 → 40。
     两列内容改用两行网格：第 1 行 = 图标 + 标题，第 2 行 = 正文（跨列，与标题左缘对齐）。 */
  .psol-service__col {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3); /* 12：图标与标题间距 */
  }

  .psol-service__icon {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: 2.5rem;  /* 40（原移动端 4rem） */
    height: 2.5rem;
  }

  .psol-service__col h3 {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;    /* 图标已占首行，标题不再下移 */
    padding-right: 0; /* 无需再避让右上角图标 */
  }

  .psol-service__col p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* 区域 tab 行（ALL / DOMESTIC / OVERSEAS SOLUTIONS）：三个 tab 强制单行 + 手指左右滑动。
     原状：flex-wrap:wrap 在 375 下折成 3 行（盒高 184）；24px 字号 + 32px 内边距使整行宽约 888，
     远超容器 327。改法：nowrap + overflow-x:auto + 缩小字号/内边距/行高，滚动条隐藏（靠滑动即可）。
     ⚠ 坑：overflow-x:auto 会让 overflow-y 的计算值变成 auto（visible 不合法组合），容器外的负偏移
     会被裁掉并撑出纵向滚动——指示段原 bottom:-6px、分隔线原 margin-top:-5px 都会踩中。
     故给容器 padding-bottom 让出 6px（指示段因此可收进盒内）；规则线上移到与 tab 行底齐平，
     这样分隔线下端与规则线相接（同设计稿）、指示段仍压在规则线上，且纵向零溢出。 */
  .psol-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .375rem; /* 6：给指示段让位，见上 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; /* 滑到两端不带动页面、不触发返回手势 */
    scrollbar-width: none;
  }

  .psol-tabs::-webkit-scrollbar {
    display: none;
  }

  .psol-tab {
    flex: none;                          /* 不压缩，保证三个 tab 始终单行不折 */
    white-space: nowrap;
    padding: 0 1.25rem;                  /* 20（原 32） */
    font-size: var(--font-size-body-md); /* 18（原 clamp 在 375 解析为 23.975） */
    line-height: 2.75rem;                /* 44（原 50），同时满足触控最小高度 */
  }

  .psol-tabs__sep {
    flex: none;
    height: 2.75rem; /* 44（原 60）：上端不再外溢（overflow 容器会裁），下端落到规则线上 */
    margin-top: 0;
  }

  .psol-tabs__indicator {
    bottom: 5px; /* 压在规则线上（规则线已上移到 tab 行底，见下） */
  }

  .psol-tabs__rule {
    margin-top: -6px; /* 抵消 padding-bottom：规则线上移到 tab 行底（base 原为 +5） */
  }
}