/*
 * 3S Robotics - Common Styles
 * Shared reset, Header and Footer styles extracted from home(2).css.
 * Usage: <link rel="stylesheet" href="static/css/common.css">
 */

:root {
  --srs-blue: #152ad3;
  --srs-ink: #0a0a0a;
  --srs-muted: #6a7282;
  --srs-line: #e2e8f0;
  --srs-max: 1602px;
  --srs-side: clamp(24px, 8.25vw, 158px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--srs-ink);
  background: #fff;
  font-family: Montserrat, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.is-nav-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Header */
.srs-home-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border-bottom: 1px solid rgba(20, 25, 40, 0.06);
  transition: box-shadow 0.3s, background 0.3s;
}

.srs-home-header.is-scrolled,
.srs-home-header.srs-home-header--solid {
  box-shadow: 0 8px 30px rgba(10, 20, 40, 0.08);
  background-color: #fff;
}

.srs-home-header.is-scrolled .srs-home-header__nav a,
.srs-home-header.is-scrolled .srs-home-header__language,
.srs-home-header.is-scrolled .srs-home-header__nav-trigger,
.srs-home-header.srs-home-header--solid .srs-home-header__nav a,
.srs-home-header.srs-home-header--solid .srs-home-header__language,
.srs-home-header.srs-home-header--solid .srs-home-header__nav-trigger {
  color: #1d1d1d;
}

.srs-home-header.is-scrolled .srs-home-header__nav-trigger::after,
.srs-home-header.is-scrolled .srs-home-header__nav a::after,
.srs-home-header.srs-home-header--solid .srs-home-header__nav-trigger::after,
.srs-home-header.srs-home-header--solid .srs-home-header__nav a::after {
  background: var(--srs-blue);
}



.srs-home-header__inner {
  height: 100%;
  padding: 0 clamp(28px, 3.56vw, 68px);
  display: flex;
  align-items: center;
}

.srs-home-header__logo {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 110px;
  flex: none;
}

.srs-home-header .black_ico {
  display: none;
}

.srs-home-header .white_ico {
  display: block;
}

.srs-home-header.is-scrolled .black_ico,
.srs-home-header.srs-home-header--solid .black_ico {
  display: block;
}

.srs-home-header.is-scrolled .white_ico,
.srs-home-header.srs-home-header--solid .white_ico {
  display: none;
}

.srs-home-header__logo-mark {
  color: var(--srs-blue);
  font-size: 29px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -3px;
}

.srs-home-header__logo-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.srs-home-header__nav {
  display: flex;
  gap: clamp(28px, 2.52vw, 49px);
  margin-left: 61px;
}

.srs-home-header__nav a {
  position: relative;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  white-space: nowrap;
}

.srs-home-header__nav a::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 18px;
  left: 50%;
  height: 2px;
  background: #fff;
  transition: 0.25s;
}

.srs-home-header__nav a:hover::after {
  right: 0;
  left: 0;
}

.srs-home-header__nav span {
  margin-left: 2px;
  font-size: 12px;
}

.srs-home-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 34px;
}

.srs-home-header__language {
  padding: 8px 0;
  border: 0;
  color: #fff;
  background: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  cursor: pointer;
}

.srs-home-header__language>span {
  font-size: 15px;
  font-weight: normal;
}

.srs-home-header__language b {
  font-size: 11px;
}

.srs-home-header__contact {
  width: 112px;
  height: 38px;
  border-radius: 21px;
  color: #fff;
  background: var(--srs-blue);
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: 0.25s;
}

.srs-home-header__contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(21, 42, 211, 0.26);
}

.srs-home-header__toggle {
  width: 40px;
  height: 40px;
  padding: 9px;
  border: 0;
  background: none;
  display: none;
  /* Sits above the drawer so it stays tappable as the close control. */
  position: relative;
  z-index: 2;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.srs-home-header__toggle i {
  width: 22px;
  height: 2px;
  margin: 5px 0;
  background: #fff;
  display: block;
  transition: 0.25s;
}

.srs-home-header.is-scrolled .srs-home-header__toggle i,
.srs-home-header.srs-home-header--solid .srs-home-header__toggle i {
  background: #111;
}

/* Header dropdown menus */
.srs-home-header__nav-item,
.srs-home-header__language-switch {
  position: relative;
}

.srs-home-header__nav-trigger {
  height: 76px;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}

.srs-home-header__nav-trigger::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 18px;
  left: 50%;
  height: 2px;
  background: #fff;
  transition: left 0.25s ease, right 0.25s ease;
}

.srs-home-header__nav-trigger span,
.srs-home-header__language b {
  transition: transform 0.3s ease;
}

.srs-home-header__nav-item.is-open .srs-home-header__nav-trigger::after,
.srs-home-header__nav-item:hover .srs-home-header__nav-trigger::after,
.srs-home-header__nav-item:focus-within .srs-home-header__nav-trigger::after {
  right: 0;
  left: 0;
}

.srs-home-header__nav-item.is-open .srs-home-header__nav-trigger span,
.srs-home-header__nav-item:hover .srs-home-header__nav-trigger span,
.srs-home-header__language-switch.is-open .srs-home-header__language b {
  transform: rotate(180deg);
}

.srs-home-header__submenu,
.srs-home-header__language-menu {
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  min-width: 220px;
  padding: 10px;
  border: 1px solid rgba(20, 30, 55, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 48px rgba(18, 31, 62, 0.13);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 0.25s ease, visibility 0s linear 0.25s,
    transform 0.3s cubic-bezier(0.22, 0.72, 0.22, 1);
}

.srs-home-header__nav-item.is-open .srs-home-header__submenu,
.srs-home-header__nav-item:hover .srs-home-header__submenu,
.srs-home-header__nav-item:focus-within .srs-home-header__submenu,
.srs-home-header__language-switch.is-open .srs-home-header__language-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.srs-home-header__submenu a,
.srs-home-header__language-menu a {
  width: 100%;
  min-height: 43px;
  padding: 0 15px;
  border: 0;
  border-radius: 5px;
  color: #242936;
  background: transparent;
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.srs-home-header__submenu a::after {
  display: none;
}

.srs-home-header__submenu a:hover,
.srs-home-header__language-menu a:hover,
.srs-home-header__language-menu a.is-active {
  color: var(--srs-blue);
  background: #f2f4ff;
}

/* 语言项是链接而非菜单项，不要继承 submenu 的下划线动效。 */
.srs-home-header__language-menu a::after {
  display: none;
}

.srs-home-header__language-menu {
  top: calc(100% + 18px);
  min-width: 145px;
}

/*
 * 抽屉内的语言切换：仅窄屏出现（顶栏那个下拉在 <=1024px 被隐藏，
 * 移动端否则没有任何切语言入口）。宽屏彻底不渲染，避免影响导航布局。
 */
.srs-home-header__language-drawer {
  display: none;
}

/* Footer */
.srs-home-footer {
  min-height: 798px;
  padding: 56px max(var(--srs-side), 40px) 0;
  color: #fff;
  background: #111;
}

.srs-home-footer__top {
  height: 113px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.srs-home-footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.srs-home-footer__logo strong {
  color: #fff;
  font-size: 42px;
  font-style: italic;
  letter-spacing: -4px;
}

.srs-home-footer__logo span {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1px;
}

.srs-home-footer__top>p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 32px;
}

.srs-home-footer__main {
  padding: 66px 0 80px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 80px;
}

.srs-home-footer__links {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 25px;
}

.srs-home-footer h3 {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 500;
}

/* 有落地页的栏目标题会被包裹为 <h3><a>，此处让链接继承标题盒模型，
   避免内联元素的行高差异导致该栏标题比其他栏低若干像素。 */
.srs-home-footer h3>a {
  color: inherit;
  display: block;
  font: inherit;
  line-height: inherit;
}

/* .srs-footer__link--pending 为尚未建立对应页面的栏目条目，
   由 srs_menu_link_or_span() 输出为 <span> 而非死链，视觉与链接一致但无悬停反馈。 */
.srs-home-footer__links a,
.srs-home-footer__links .srs-footer__link--pending {
  margin: 5px 0;
  color: rgba(255, 255, 255, 0.56);
  display: block;
  font-size: 14px;
  line-height: 1.65;
  transition: 0.2s;
}

.srs-home-footer__links a:hover {
  color: #fff;
}

.srs-home-footer__subscribe form {
  height: 54px;
  display: flex;
}

.srs-home-footer__subscribe input {
  min-width: 0;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  outline: 0;
  color: #fff;
  background: transparent;
  flex: 1;
}

.srs-home-footer__subscribe button {
  width: 80px;
  border: 0;
  color: #fff;
  background: var(--srs-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
}

.srs-home-footer__social {
  margin-top: 42px;
  display: flex;
  gap: 28px;
}

.srs-home-footer__social a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 13px;
}

.srs-home-footer__bottom {
  min-height: 104px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.46);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.srs-home-footer__bottom a {
  color: rgba(255, 255, 255, 0.46);
  text-decoration: none;
}

.srs-home-footer__bottom a:hover {
  text-decoration: underline;
}

.srs-home-footer__bottom p {
  margin: 0;
}

.srs-home-footer__bottom nav {
  display: flex;
  gap: 42px;
}

/* Footer newsletter validation */
.srs-home-footer__subscribe-form {
  position: relative;
}

.srs-home-footer__subscribe input {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.srs-home-footer__subscribe input:focus {
  border-color: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.srs-home-footer__subscribe-form.is-error input {
  border-color: #ff7474;
}

.srs-home-footer__subscribe-form.is-success input {
  border-color: #55d69e;
}

.srs-home-footer__subscribe button {
  transition: background-color 0.25s ease, opacity 0.25s ease;
}

.srs-home-footer__subscribe button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.srs-home-footer__subscribe button span {
  display: inline-block;
}

.srs-home-footer__subscribe-form.is-submitting button span {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  font-size: 0;
  animation: srs-home-subscribe-loading 0.7s linear infinite;
}

/* 转圈时藏掉箭头图标，否则会叠在圆环里。 */
.srs-home-footer__subscribe-form.is-submitting button span img {
  display: none;
}

.srs-home-footer__subscribe-message {
  min-height: 20px;
  margin: 9px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  line-height: 1.5;
}

.srs-home-footer__subscribe-message.is-error {
  color: #ff8f8f;
}

.srs-home-footer__subscribe-message.is-success {
  color: #64dbaa;
}

@keyframes srs-home-subscribe-loading {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1280px) {
  .srs-home-header__nav {
    gap: 24px;
    margin-left: 36px;
  }

  .srs-home-header__actions {
    gap: 18px;
  }

  .srs-home-footer__main {
    grid-template-columns: 1fr 320px;
    gap: 45px;
  }

  .srs-home-footer__links {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 42px;
  }
    .srs-home-footer__logo img {
    max-width: 150px;
  }
}

@media (max-width: 1024px) {
  .srs-home-header__inner {
    padding: 0 12px;
  }

  .srs-home-header__toggle {
    margin-left: auto;
    display: block;
  }

  .srs-home-header__actions {
    margin-left: 14px;
  }

  .srs-home-header__language {
    display: none;
  }

  .srs-home-header__contact {
    width: 96px;
  }

  .srs-home-header__nav {
    position: fixed;
    /* Match the 60px header height: the old 76px left a gap at the top and
       pushed the last links below the fold. */
    top: 60px;
    right: 0;
    left: 0;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    margin: 0;
    padding: 24px 28px calc(24px + env(safe-area-inset-bottom));
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.35s ease, visibility 0.35s;
  }

  .srs-home-header.is-nav-open .srs-home-header__nav {
    transform: translateX(0);
    visibility: visible;
  }

  .srs-home-header__nav a {
    border-bottom: 1px solid #eee;
    color: #000;
    font-size: 19px;
    line-height: 58px;
  }

  .srs-home-header.is-nav-open .srs-home-header__toggle i:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .srs-home-header.is-nav-open .srs-home-header__toggle i:nth-child(2) {
    opacity: 0;
  }

  .srs-home-header.is-nav-open .srs-home-header__toggle i:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .srs-home-header__nav-item {
    width: 100%;
  }

  .srs-home-header__nav-trigger {
    width: 100%;
    height: 58px;
    border-bottom: 1px solid #eee;
    color: #000;
    justify-content: space-between;
    font-size: 19px;
  }

  .srs-home-header__nav-trigger::after {
    display: none;
  }

  .srs-home-header__submenu {
    position: static;
    min-width: 0;
    max-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform: none;
    transition: max-height 0.35s ease, padding 0.35s ease;
  }

  .srs-home-header__nav-item.is-open .srs-home-header__submenu {
    max-height: 230px;
    padding: 6px 0 10px;
    pointer-events: auto;
    transform: none;
  }

  .srs-home-header__submenu a {
    min-height: 44px;
    padding-left: 18px;
    border-bottom: 0;
    font-size: 16px;
    line-height: 44px;
  }

  .srs-home-header__language-switch {
    display: none;
  }

  /* 抽屉底部的语言切换：平铺两三个链接，比再套一层展开少一次点击。 */
  .srs-home-header__language-drawer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #ececec;
    display: block;
  }

  .srs-home-header__language-drawer-title {
    margin: 0 0 10px;
    color: #8a8f9c;
    font-size: 13px;
  }

  .srs-home-header__language-drawer-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .srs-home-header__language-drawer-list a {
    /* 44px 是触控目标下限，别按视觉压小。 */
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    color: #1a1c20;
    background: #f5f6f8;
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    text-decoration: none;
  }

  .srs-home-header__language-drawer-list a.is-active {
    color: #fff;
    background: var(--srs-blue);
  }

  .srs-home-footer__main {
    grid-template-columns: 1fr;
  }

  .srs-home-footer__links {
    grid-template-columns: repeat(3, 1fr);
  }

  .srs-home-footer__subscribe {
    max-width: 520px;
  }

  .srs-home-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .srs-home-header {
    height: 64px;
  }

  .srs-home-header__nav {
    top: 60px;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
  }

  .srs-home-header__logo {
    width: 110px;
  }

  .srs-home-header__logo-mark {
    font-size: 25px;
  }

  .srs-home-header__logo-name {
    font-size: 10px;
  }

  .srs-home-header__contact {
    display: none;
  }

  .srs-home-footer {
    padding: 42px 24px 0;
  }

  .srs-home-footer__top {
    height: 100px;
  }

  .srs-home-footer__top>p {
    font-size: 18px;
  }

  .srs-home-footer__main {
    padding: 50px 0;
  }

  .srs-home-footer__links {
    grid-template-columns: repeat(2, 1fr);
  }

  .srs-home-footer__bottom {
    padding: 30px 0;
    line-height: 1.7;
  }

  .srs-home-footer__bottom nav {
    gap: 20px;
    flex-wrap: wrap;
  }
}

.srs-common-float {
  position: fixed;
  bottom: 5%;
  right: 10px;
  opacity: .7;
  z-index: 9999;
  transition: all .3s;
}

.srs-common-float:hover {
  opacity: 1;
}

.srs-common-float button {
  border-radius: 50%;
  background-color: #152ad3;
  color: #fff;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .srs-home-footer__subscribe-form.is-submitting button span {
    animation-duration: 1.4s;
  }
}

.pro_sub_nav__body {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20px 0;
  border-top: 1px solid #f3f4f6;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}

.pro_sub_nav__body.show {
  opacity: 1;
  visibility: visible;
}

/* 面板内是「左侧分类 + 右侧产品」两栏。原来复用了全局 .flex（align-items:center），
   分类列会被整体垂直居中、与右侧卡片错位，这里改为顶对齐的两栏栅格。 */
.pro_sub_nav__body .flex {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 28px;
  align-items: start;
}

.pro_sub_nav__body .flex .left_list {
  margin: 0;
  padding: 0;
  width: auto;
  border-right: 1px solid #f0f1f3;
  padding-right: 20px;
}

.pro_sub_nav__body .flex .left_list li {
  list-style: none;
  margin-bottom: 4px;
}

/* 选项卡是 <button>：静态稿里左侧用的是 href="javascript:;"，本质是切换器而非链接，
   用按钮才能被键盘与读屏正确识别（分类归档入口移到右侧「查看全部」）。 */
.pro_sub_nav__body .flex .left_list li button {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #1a1c20;
  border-radius: 10px;
  padding: 11px 18px;
  transition: background-color .25s, color .25s;
}

.pro_sub_nav__body .flex .left_list li button:hover,
.pro_sub_nav__body .flex .left_list li button[aria-selected="true"] {
  background-color: #f5f5f7;
}

.pro_sub_nav__body .flex .left_list li button[aria-selected="true"] {
  color: #152ad3;
}

.pro_sub_nav__body .flex .left_list li button:focus-visible {
  outline: 2px solid #152ad3;
  outline-offset: 1px;
}

/* 右栏：等宽栅格。原来是 flex-wrap + 固定 margin，卡片宽度随文字长度变化，
   四张卡片各自一个宽度、末尾还会留下参差的空隙。 */
.pro_sub_nav__body .flex .right_wrap {
  min-width: 0;
}

.pro_sub_nav__body .flex .right_con {
  width: auto;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.pro_sub_nav__body .flex .right_con li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pro_sub_nav__body .flex .right_con li a {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  text-decoration: none;
  background-color: #f5f5f7;
  padding: 18px;
  border-radius: 16px;
  transition: background-color .25s, transform .25s;
}

.pro_sub_nav__body .flex .right_con li a:hover {
  background-color: #eceef1;
  transform: translateY(-2px);
}

/* 图片按固定框等比缩放。产品图长宽比差异很大（有 446×220 的横图也有 255×533 的竖图），
   原来只给 width:80px、高度随比例走，竖图会把卡片顶得很高、横图又被压扁。 */
.pro_sub_nav__body .flex .right_con li a img {
  width: 100%;
  height: 96px;
  object-fit: contain;
  object-position: center;
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  box-sizing: border-box;
}

.pro_sub_nav__body .flex .right_con li a .txt {
  width: auto;
  padding: 0;
}

.pro_sub_nav__body .flex .right_con li a .txt h4 {
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 6px;
  color: #1a1c20;
  /* 型号名很长（如 HA006B/HH010L-LFW-1500/2000-DB…），限两行保证卡片等高。 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pro_sub_nav__body .flex .right_con li a .txt p {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 分类归档入口：独占一行（4 张产品卡刚好铺满上一行，若也当成栅格单元
   会孤零零地掉到第二行左侧），但按钮本身按文字宽度收窄并右对齐，
   不拉成满宽的大色块。 */
.pro_sub_nav__body .right_con__more {
  grid-column: 1 / -1;
  justify-self: flex-start;
}

.pro_sub_nav__body .right_con__more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border: 1px solid #e3e5e9;
  border-radius: 999px;
  color: #152ad3;
  font-size: 13px;
  background: none !important;
  font-weight: 700;
  text-decoration: none;
  flex-direction: row !important;
  transition: background-color .25s, border-color .25s;
}

.pro_sub_nav__body .right_con__more a:hover {
  background-color: #f5f6f8;
  border-color: #152ad3;
}

/* 分类下暂无产品时的占位文案。 */
.pro_sub_nav__body .right_con__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px 0;
  color: #8b8f96;
  font-size: 14px;
}

/* 未选中的面板带 hidden 属性，而上面的 display:grid 权重更高会把它显示出来，
   必须显式压回去。 */
.pro_sub_nav__body .flex .right_con[hidden] {
  display: none;
}

/* 窄屏专用的返回栏：宽屏由 hover 开合，不需要它。 */
.pro_sub_nav__bar {
  display: none;
}

/* ── 产品 Mega 菜单：窄屏形态 ──────────────────────────────────────
   产品中心不再输出二级下拉（分类全部由本 Mega 菜单承载），因此窄屏也必须能打开
   它，否则移动端抽屉里点「产品中心」将无处可去。断点与上方抽屉一致（1024）。

   窄屏把它当成抽屉的「二级页」：从右侧滑入盖住一级菜单，顶部给一条返回栏，
   点返回退回一级菜单而不是整个关掉。原先没有返回栏，面板一开就把抽屉整个盖住，
   只剩右上角的 × 能关掉全部 —— 想换个栏目必须重新打开菜单。 */
@media (max-width: 1024px) {
  .pro_sub_nav__body {
    position: fixed;
    top: 60px;
    height: calc(100dvh - 60px);
    padding: 0 0 calc(24px + env(safe-area-inset-bottom));
    border-top: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* 抽屉本身无 z-index，靠文档顺序压在下面；面板在其后输出，此处显式抬高更稳。 */
    z-index: 1;
    /* 与一级抽屉同向的滑入动效；显隐仍沿用基础样式的 opacity/visibility。 */
    transform: translateX(100%);
    transition: transform .32s ease, opacity .3s, visibility .3s;
  }

  .pro_sub_nav__body.show {
    transform: translateX(0);
  }

  /*
   * 关键修复：面板复用了 .srs-home-header__inner，而它是 height:100% +
   * align-items:center 的横向 flex（为顶栏 60px 高度写的）。在这个 100dvh 的
   * 浮层里，内容被整体垂直居中，顶部凭空多出大半屏空白 —— 截图里分类条被压到
   * 屏幕中间就是这个原因。窄屏下还原为普通块级流。
   */
  .pro_sub_nav__body .srs-home-header__inner {
    height: auto;
    display: block;
    padding: 0 20px;
  }

  /*
   * 产品中心在窄屏是「进入二级页」而不是就地展开，把向下的箭头转成向右，
   * 与滑入方向一致；否则用户会预期点了在原地展开一段列表。
   */
  #product_nav .srs-home-header__nav-trigger span {
    transform: rotate(-90deg);
  }

  /* 返回栏：吸顶，滚动产品列表时始终可点。 */
  .pro_sub_nav__bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -20px 4px;
    padding: 0 12px;
    height: 52px;
    background: #fff;
    border-bottom: 1px solid #eee;
  }

  .pro_sub_nav__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 44px 命中区：低于此值在触屏上很难点准。 */
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    background: none;
    color: #1a1c20;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
  }

  /* 用 CSS 画返回箭头，省一个图片请求。 */
  .pro_sub_nav__back::before {
    content: "";
    width: 9px;
    height: 9px;
    border-left: 2px solid #1a1c20;
    border-bottom: 2px solid #1a1c20;
    transform: rotate(45deg);
  }

  .pro_sub_nav__back:focus-visible {
    outline: 2px solid #152ad3;
    outline-offset: 2px;
    border-radius: 6px;
  }

  .pro_sub_nav__title {
    margin: 0;
    color: #1a1c20;
    font-size: 15px;
    font-weight: 700;
  }

  .pro_sub_nav__body .flex {
    display: block;
  }

  /*
   * 分类改为换行平铺，不再横向滚动。
   * 原来是 overflow-x:auto 的单行滚动条：截图里「其他」被切掉一半，且没有任何
   * 可滑动的提示，用户根本不知道右边还有分类。分类数量少（个位数），
   * 平铺两行即可全部可见，一眼看完也不必猜。
   */
  .pro_sub_nav__body .flex .left_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: auto;
    margin: 12px 0 16px;
    padding: 0;
    border-right: 0;
  }

  .pro_sub_nav__body .flex .left_list li {
    flex: 0 0 auto;
    margin: 0;
  }

  .pro_sub_nav__body .flex .left_list li button {
    /* 触屏命中区补到 40px，原先 8px 内边距只有约 33px 高。 */
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #f5f6f8;
    white-space: nowrap;
    font-size: 14px;
  }

  /* 选中态在窄屏要更明确：胶囊底色相近，仅靠字色不易分辨。 */
  .pro_sub_nav__body .flex .left_list li button[aria-selected="true"] {
    background: #152ad3;
    color: #fff;
  }

  .pro_sub_nav__body .flex .right_con {
    /* 窄屏一行两张卡，四列会挤到读不出型号。 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* 卡片在窄屏收紧：原样式为宽屏四列设计，窄屏两列时留白过多。 */
  .pro_sub_nav__body .flex .right_con li a {
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
  }

  .pro_sub_nav__body .flex .right_con li a img {
    height: 76px;
  }

  .pro_sub_nav__body .flex .right_con li a .txt h4 {
    font-size: 14px;
    margin-bottom: 4px;
  }

  /* 「查看全部」在窄屏拉满宽，作为该分类的明确出口。 */
  .pro_sub_nav__body .right_con__more {
    justify-self: stretch;
  }

  .pro_sub_nav__body .right_con__more a {
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* 超窄屏（≤380px）两列会把型号挤成四五行，退回单列。 */
@media (max-width: 380px) {
  .pro_sub_nav__body .flex .right_con {
    grid-template-columns: minmax(0, 1fr);
  }

  .pro_sub_nav__body .flex .right_con li a {
    flex-direction: row;
    align-items: center;
  }

  .pro_sub_nav__body .flex .right_con li a img {
    width: 84px;
    height: 64px;
    flex: none;
  }
}

/* 动效敏感用户：去掉滑入位移，直接显隐。 */
@media (prefers-reduced-motion: reduce) {
  .pro_sub_nav__body {
    transition: opacity .01ms, visibility .01ms;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 1024px) {

  .pro_sub_nav__body,
  .pro_sub_nav__body.show {
    transform: none;
  }
}

/* ── 归档页通用外壳 ────────────────────────────────────────────────
   产品分类、案例、产品资料等列表页共用。静态稿无这些页面，
   容器宽度沿用 newslist.css 的 min(1600px, calc(100% - 48px)) 以保持一致。 */
.srs-archive__inner {
  position: relative;
  width: min(1600px, calc(100% - 48px));
  margin: 0 auto;
}

.srs-archive__head {
  padding-top: 160px;
}

.srs-archive__head h1 {
  margin: 0;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.25;
}

.srs-archive__desc {
  margin-top: 16px;
  max-width: 760px;
  color: #666;
  font-size: 15px;
  line-height: 1.8;
}

.srs-archive__empty {
  padding: 80px 0 120px;
  color: #999;
  font-size: 15px;
  text-align: center;
}

@media (max-width: 1024px) {
  .srs-archive__head {
    padding-top: 120px;
  }

  .srs-archive__head h1 {
    font-size: 32px;
  }
}