/* =========================================================
   产品列表页（/products/<分类>）—— 类名前缀 pl-
   PC：系列导航条吸顶在头部下方；产品通栏大图卡片（1920×700），文字占左半边并居中
   手机：卡片图撑满一屏，文字在图片顶部居中，“了解更多”变黑色胶囊按钮
   ========================================================= */
.page-products { --pl-bar-h: .7rem; }
.pl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 吸顶系列导航条 ---------- */
.pl-bar { position: sticky; top: var(--header-h); z-index: 50; background: var(--c-bg-gray); border-bottom: 1px solid #ebebeb; }
.pl-bar-inner { position: relative; display: flex; align-items: center; height: var(--pl-bar-h); }
.pl-bar-swiper { flex: 1; min-width: 0; height: 100%; margin: 0 .16rem; }
.pl-bar-slide { position: relative; height: 100%; }
.pl-bar-slide + .pl-bar-slide::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: .16rem; margin-top: -.08rem; background: #cfcfcf; }
.pl-bar-item { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 .1rem; font-size: .18rem; color: var(--c-text-3); white-space: nowrap; transition: color .3s; }
.pl-bar-item:hover { color: var(--c-text); }
.pl-bar-item.on { color: var(--c-text); font-weight: 600; }
.pl-bar-btn { flex-shrink: 0; width: .36rem; height: .36rem; border-radius: 50%; border: 1px solid #d6d6d6; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .16rem; color: var(--c-text); transition: all .3s; }
.pl-bar-btn:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.pl-bar-btn.swiper-button-disabled { opacity: .35; pointer-events: none; }
.pl-bar-btn.swiper-button-lock { display: inline-flex; }
.pl-bar-btn { visibility: hidden; } /* Swiper 初始化完成后（.is-ready）再显示，系列数量不够翻页时（.swiper-button-lock）保持隐藏 */
.pl-bar.is-ready .pl-bar-btn:not(.swiper-button-lock) { visibility: visible; }

/* ---------- 系列区块 ---------- */
.pl-body { padding-bottom: .2rem; }
.pl-series { scroll-margin-top: calc(var(--header-h) + var(--pl-bar-h)); }
.pl-series-title { padding: .9rem 0 .5rem; text-align: center; font-size: .5rem; font-weight: 700; letter-spacing: .01rem; }
.pl-series:first-child .pl-series-title { padding-top: .8rem; }

/* ---------- 产品大图卡片 ---------- */
.pl-card { position: relative; overflow: hidden; background: var(--c-bg-gray-2); }
.pl-card + .pl-card { margin-top: .2rem; }
.pl-card-img { display: block; aspect-ratio: 1920 / 700; overflow: hidden; }
.pl-card-img .pic, .pl-card-img img { width: 100%; height: 100%; }
.pl-card-img img { object-fit: cover; transition: transform 1.2s var(--ease); }
.pl-card:hover .pl-card-img img { transform: scale(1.03); }
.pl-card-text { position: absolute; left: 0; top: 0; width: 50%; height: 100%; padding: 0 .6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.pl-card-text a { pointer-events: auto; }
.pl-card-name { font-size: .28rem; font-weight: 400; line-height: 1.4; color: #333; }
.pl-card-slogan { margin-top: .16rem; }
.pl-card-slogan p { font-size: .58rem; font-weight: 700; line-height: 1.25; letter-spacing: .01rem; }
.pl-card-more { margin-top: .36rem; font-size: .2rem; }
.pl-card:hover .pl-card-more span::after { width: 100%; }
.pl-card:hover .pl-card-more .ico { transform: translateX(.05rem); }

/* ---------- 空状态 ---------- */
.pl-empty { padding: 2rem 0; text-align: center; color: var(--c-text-3); font-size: .2rem; }
.pl-empty .btn-line { margin-top: .3rem; color: var(--c-text); }

/* =========================================================
   平板（761~1199，手机导航 + PC 内容）
   ========================================================= */
@media (max-width: 1199px) {
  .page-products { --pl-bar-h: .9rem; }
  .pl-bar-item { font-size: .24rem; }
  .pl-bar-btn { width: .5rem; height: .5rem; font-size: .24rem; }
  .pl-series-title { font-size: .44rem; }
  .pl-card-text { padding: 0 .4rem; }
}

/* =========================================================
   手机（≤760）
   ========================================================= */
@media (max-width: 760px) {
  .page-products { --pl-bar-h: .9rem; }
  .pl-bar-inner { margin: 0 .2rem; }
  .pl-bar-swiper { margin: 0 .1rem; }
  .pl-bar-slide + .pl-bar-slide::before { height: .24rem; margin-top: -.12rem; }
  .pl-bar-item { font-size: .26rem; padding: 0 .06rem; }
  .pl-bar-btn { width: .48rem; height: .48rem; font-size: .26rem; }

  .pl-series-title { padding: .7rem .3rem .4rem; font-size: .44rem; }
  .pl-series:first-child .pl-series-title { padding-top: .6rem; }

  .pl-card + .pl-card { margin-top: .2rem; }
  .pl-card-img { aspect-ratio: auto; height: calc(100vh - var(--header-h) - var(--pl-bar-h)); height: calc(100svh - var(--header-h) - var(--pl-bar-h)); min-height: 7rem; }
  .pl-card:hover .pl-card-img img { transform: none; }
  .pl-card-text { width: 100%; height: auto; bottom: auto; padding: .7rem .4rem 0; justify-content: flex-start; }
  .pl-card-name { font-size: .28rem; }
  .pl-card-slogan { margin-top: .12rem; }
  .pl-card-slogan p { font-size: .5rem; }
  .pl-card-more { margin-top: .36rem; height: .72rem; padding: 0 .44rem; border-radius: .72rem; background: var(--c-primary); color: #fff; font-size: .26rem; gap: .06rem; }
  .pl-card-more span::after { display: none; }
  .pl-card-more .ico { font-size: .26rem; }
  .pl-card:hover .pl-card-more .ico { transform: none; }

  .pl-empty { padding: 1.6rem 0; font-size: .28rem; }
}

/* ---------- 版式调整：系列条用胶囊、卡片内缩圆角、产品名标签 ---------- */
.pl-bar { background: #fff; border-bottom: 1px solid var(--c-line); }
.pl-bar-slide + .pl-bar-slide::before { display: none; }
.pl-bar-item { margin: 0 .04rem; }
.pl-bar-item.on { color: var(--c-primary); }
.pl-bar-item.on::after { content: ""; position: absolute; left: 50%; bottom: .12rem; width: .2rem; height: .04rem; margin-left: -.1rem; border-radius: .04rem; background: var(--c-primary); }
.pl-series-title::after { content: ""; display: block; width: .48rem; height: .05rem; margin: .2rem auto 0; border-radius: .05rem; background: linear-gradient(90deg, var(--c-primary) 60%, var(--c-warm) 60%); }
.pl-body { padding-bottom: 1rem; background: var(--c-bg-gray-2); }
.pl-card { width: 14.4rem; max-width: 92%; margin-left: auto; margin-right: auto; border-radius: var(--radius-lg); box-shadow: 0 .1rem .3rem rgba(19, 40, 59, .06); }
.pl-card + .pl-card { margin-top: .32rem; }
.pl-card-name { display: inline-block; padding: .05rem .18rem; border-radius: .4rem; background: var(--c-primary-soft); color: var(--c-primary); font-size: .2rem; }

@media (max-width: 760px) {
  .pl-body { padding-bottom: .6rem; }
  .pl-card { max-width: none; width: auto; margin-left: .3rem; margin-right: .3rem; border-radius: .28rem; }
  .pl-card + .pl-card { margin-top: .3rem; }
  .pl-card-img { height: auto; aspect-ratio: 750 / 1000; min-height: 0; }
  .pl-card-name { font-size: .24rem; }
  .pl-bar-item.on::after { bottom: .1rem; }
}