/* ================================================================
   PRODUCTS LIST — 产品分类列表页
     · 头部：返回 + 六边形图（左）+ 分类标题 + 搜索框（右）
     · 系列分组：绿色系列带 + 表头 + 产品行（可点击 → 详情）
   依赖：products-common.css
   ================================================================ */

.plist {
  position: relative; z-index: 11;        /* 不透明白底盖住下方 vision 抽屉（靠 z-index + 白底，不靠 overflow） */
  background: #fff;
  /* 不可用 overflow:hidden —— 会破坏左列六边形的 position:sticky 吸附 */
  padding: clamp(40px, 6vh, 78px) 0 clamp(48px, 7vh, 92px);
}
.plist__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 72px);
}

/* 返回行 */
.plist__back { margin-bottom: clamp(22px, 3.4vh, 40px); }

/* 整页 1/4 + 3/4：左侧六边形（吸附）+ 右侧 标题 / 搜索 / 表格 */
.plist__layout {
  display: grid;
  grid-template-columns: 1fr 3fr;          /* 1/4 + 3/4 */
  gap: clamp(28px, 4vw, 64px);
  /* 不设 align-items：默认 stretch 使左列与右列等高
     → 左列内的 sticky 六边形可贯穿整段表格保持吸附 */
}
.plist__aside { min-width: 0; }
.plist__hex {
  position: sticky;
  top: clamp(136px, 15vh, 160px);          /* 让位给上方吸附的分类标签条（导航 64 + 标签条 ~65）*/
  width: 100%;
}
.plist__main { min-width: 0; }
.plist__main .prod-title .cn {
  font-size: clamp(26px, 1.6vw, 32px);
  line-height: 1.35;
}
.plist__main .prod-title .en {
  font-size: clamp(13px, 1vw, 14px);
}

/* 搜索框（紧凑；实时过滤无需按钮；有输入时右侧出现清除 ×） */
.plist__search {
  position: relative;
  margin: clamp(16px, 2.2vh, 26px) 0 0;   /* 与下方表格同宽：满 .plist__main 宽度（去掉 480 上限与居中） */
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: #F7FAF8;
  box-shadow: 0 6px 18px -14px rgba(31, 92, 54, 0.32);
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.plist__search:focus-within { background: #fff; border-color: var(--green-soft); }
.plist__search input {
  width: 100%;
  border: 0; background: transparent;
  padding: 11px 40px 11px 16px;   /* 右侧留出清除 × 的位置 */
  font-size: 14px;
  font-family: var(--font-cn);
  color: var(--ink);
}
.plist__search input::placeholder { color: #9aa4a0; }
.plist__search input:focus { outline: none; }
/* 清除 ×：仅在有输入时显示（JS 给容器加 .has-text） */
.plist__clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(47, 131, 78, .12); color: var(--green-deep);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  transition: background .2s var(--ease-out);
}
.plist__search.has-text .plist__clear { display: inline-flex; }
.plist__clear:hover { background: rgba(47, 131, 78, .24); }

/* ── 系列分组 ─────────────────────────────────────────────────── */
.pgroup { margin-top: clamp(26px, 4vh, 46px); }
.pgroup:first-of-type { margin-top: clamp(22px, 3.4vh, 40px); }   /* 与搜索框间留白 */

/* 绿色系列带 */
.pgroup__band {
  background: var(--green);
  color: #fff;
  border-radius: 8px;
  padding: clamp(15px, 1.7vw, 23px) clamp(22px, 2.4vw, 36px);
  margin-bottom: 12px;
}
.pgroup__band .cn { font-size: clamp(16px, 1.45vw, 21px); font-weight: 700; letter-spacing: .08em; line-height: 1.2; }
.pgroup__band .en {
  margin-top: 6px; font-family: var(--font-en);
  font-size: clamp(10px, .85vw, 12.5px); letter-spacing: .2em;
  opacity: .82; text-transform: uppercase;
}

/* 表头 + 产品行：共用 3 列栅格
   列宽 型号 / 产品名称 / 产品特点 = 1.3 : 3.2 : 5.5（特点 ≈ 50%：fr 占比 55%，扣掉 gap 后实际渲染约半幅） */
.ptable__head, .prow {
  display: grid;
  grid-template-columns: 1.3fr 3.2fr 5.5fr;
  gap: clamp(16px, 2vw, 44px);
  align-items: center;
}

/* 表头（浅绿条） */
.ptable__head {
  background: #EAF3EC;
  border-radius: 8px;
  padding: clamp(13px, 1.3vw, 19px) clamp(22px, 2.4vw, 36px);
  margin-bottom: 12px;
}
.ptable__head span {
  color: var(--green-deep);
  font-family: var(--font-cn);
  font-weight: 700;
  font-size: clamp(14px, 1.1vw, 16px);
  letter-spacing: .04em;
}
.ptable__head span small {
  display: block; margin-top: 3px;
  font-family: var(--font-en); font-weight: 500;
  color: var(--green); font-size: 11px; letter-spacing: .06em;
  text-transform: none;
}

/* 产品行（扁平表格行，仅下边细分隔线；对比方案图——去掉圆角描边卡片与抬升阴影） */
.prow {
  padding: clamp(17px, 1.6vw, 24px) clamp(22px, 2.4vw, 36px);
  border-bottom: 1px solid var(--rule);
  background: #fff;
  transition: background .2s var(--ease-out);
}
.prow:hover { background: #F6FAF7; }
.prow:last-child { border-bottom: 0; }
/* 可点击产品行（命中详情文章 → 整行作链接，跳详情文章并 ?q=型号 定位） */
a.prow--link { text-decoration: none; color: inherit; cursor: pointer; }
a.prow--link:hover { background: #EAF4EE; }
a.prow--link .prow__model { color: var(--green-deep); text-decoration: underline; text-decoration-color: rgba(47, 131, 78, .35); text-underline-offset: 3px; }
.prow__model {
  font-family: var(--font-en);
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(15px, 1.15vw, 18px);
  letter-spacing: .03em;
}
.prow__name .cn, .prow__feat .cn {
  display: block;
  color: var(--ink-soft);
  font-family: var(--font-cn);
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.55;
}
.prow__name .en, .prow__feat .en {
  display: block; margin-top: 5px;
  font-family: var(--font-en);
  color: #A5A5A5;
  font-size: 11.5px; line-height: 1.5; letter-spacing: .02em;
}
.prow.is-hidden { display: none; }      /* 搜索过滤 */
/* 深链 ?q= / 同类建议点击：定位到的产品行短暂高亮闪烁 */
.prow.is-located { animation: zzLocate 1.6s var(--ease-out); }
@keyframes zzLocate {
  0%   { background: #fff; box-shadow: inset 0 0 0 0 rgba(47,131,78,0); }
  20%  { background: #DCEFE3; box-shadow: inset 3px 0 0 0 var(--green); }
  100% { background: #fff; box-shadow: inset 0 0 0 0 rgba(47,131,78,0); }
}

/* 搜索无结果提示 */
.plist__empty {
  display: none;
  padding: clamp(28px, 4vh, 50px);
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--font-cn);
}
.plist__empty.is-on { display: block; }

/* ── AJAX 分类切换：百分比进度条加载（沿用核心团队 team.css 的视觉）──
   切换 tab 时只换 .plist__layout：先铺一个确定型绿色进度条 + 百分比数字，
   待新分类的六边形主图预加载完成后再整体淡入，避免出现未加载完的闪烁。 */
.plist__loader {
  grid-column: 1 / -1;                      /* 横跨左右两栏 */
  min-height: 56vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.plist__loader-bar {
  width: min(56%, 340px); height: 4px; border-radius: 999px;
  background: rgba(47, 131, 78, .14); overflow: hidden;   /* 浅绿轨道 */
}
.plist__loader-bar > i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--green);                                /* 绿色填充 = 百分比 */
}
.plist__loader-num {
  font-family: var(--font-en); font-size: 14px; font-weight: 600;
  letter-spacing: .14em; color: var(--green);
}
/* 切换过渡：旧内容淡出 / 新内容淡入。
   仅过渡 opacity（不用 transform）——避免破坏 .plist__hex 的 position:sticky。 */
.plist__layout { transition: opacity .24s var(--ease-out); }
.plist__layout.is-fading { opacity: 0; }

/* ================================================================
   响应式
   ================================================================ */
@media (max-width: 880px) {
  .plist__layout { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 32px); }
  .plist__hex { position: static; max-width: 240px; }
  /* 表格改为堆叠卡片：标签 + 值 */
  .ptable__head { display: none; }
  .prow { grid-template-columns: 1fr; gap: 8px; }
  .prow__model { font-size: 17px; }
}