/* mweb/css/product_list.css
   产品中心页：对照小程序 pages/product_list/product_list.wxss
   二级 / 三级分类导航交互模式与 application.css 保持一致（一次性渲染 + 切显隐） */

.page-app.page-product_list { background: #f5f6f8; }

/* 解除 .page-app 的 overflow-x:hidden（common.css 全局设置），
   使二级导航 .pl-subnav 与三级 Tab .pl-tab-scroll 可横向滚动 */
.page-app { overflow-x: visible !important; }

/* ===================== 二级分类导航（对照 .app-subnav） ===================== */
.pl-subnav {
  width: 100%;
  background: #ffffff;
  border-bottom: 0.5px solid #e0e0e0;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pl-subnav::-webkit-scrollbar { display: none; }
.pl-subnav-inner {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  min-width: max-content;
}
/* 可滚动容器：允许横向 touch/鼠标拖拽，隐藏文字选中 */
.pl-subnav,
.pl-tab-scroll,
.pl-tbl-scroll {
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.pl-subnav.dragging,
.pl-tab-scroll.dragging,
.pl-tbl-scroll.dragging {
  cursor: grabbing;
}
.pl-subnav-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 7px 15px;
  margin-right: 8px;
  border-radius: 20px;
  background: #f2f4f7;
  transition: all 0.2s ease;
  cursor: pointer;
  user-select: none;
}
.pl-subnav-item:last-child { margin-right: 0; }
/* 二级导航图标（对齐 .app-subnav-ico） */
.pl-subnav-ico {
  width: 18px;
  height: 18px;
  margin-right: 5px;
  object-fit: contain;
  vertical-align: middle;
}
.pl-subnav-text {
  font-size: 14px;
  color: #444444;
  line-height: 1.2;
}
.pl-subnav-item.active {
  background: linear-gradient(to right, #007aff 0%, #114378 100%);
  box-shadow: 0 3px 8px rgba(0, 116, 188, 0.25);
}
.pl-subnav-item.active .pl-subnav-text {
  color: #ffffff;
  font-weight: 500;
}

/* ===================== 内容区 ===================== */
.pl-body { padding: 12px 12px 20px; }

/* ---- 三级 Tab 容器（容纳多组 pl-tab-head，每组对应一个二级） ---- */
.pl-tab-container { margin-bottom: 10px; }
/* ---- 三级 Tab ---- */
.pl-tab-head { margin-bottom: 10px; }
.pl-tab-scroll {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pl-tab-scroll::-webkit-scrollbar { display: none; }
.pl-tab-group {
  display: inline-flex;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #1d3546;
  min-width: max-content;
}
.pl-tab-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  margin-right: 10px;
  border: 0.5px solid #d8dce3;
  border-radius: 4px;
  background: #ffffff;
  font-size: 14px;
  color: #333333;
  line-height: 1.4;
  transition: all 0.2s;
  cursor: pointer;
  user-select: none;
}
.pl-tab-btn:last-child { margin-right: 0; }
.pl-tab-btn.active {
  background-color: #0074bc;
  color: #ffffff;
  border-color: #0074bc;
  font-weight: 500;
}

/* ---- 分类标题 + 型号搜索 ---- */
.pl-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pl-caption-left {
  display: flex;
  align-items: baseline;
  min-width: 0;
  margin-right: 8px;
}
.pl-caption-name {
  font-size: 17px;
  font-weight: 600;
  color: #1a3044;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}
.pl-search {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.pl-search-input {
  width: 160px;
  height: 30px;
  padding: 0 28px 0 10px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #ffffff;
  font-size: 13px;
  color: #333333;
  box-sizing: border-box;
  outline: none;
}
.pl-search-input::placeholder { color: #aaaaaa; }
.pl-search-clear {
  position: absolute;
  right: 8px;
  width: 18px;
  height: 18px;
  line-height: 17px;
  text-align: center;
  font-size: 17px;
  color: #999999;
  cursor: pointer;
  user-select: none;
}

/* ---- 参数表（横向滚动） ---- */
.pl-table-wrap {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.pl-tbl-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pl-tbl-scroll::-webkit-scrollbar { display: none; }
.pl-table {
  display: inline-flex;
  flex-direction: column;
  min-width: 100%;
}
.pl-row {
  display: flex;
  border-bottom: 0.5px solid #eeeeee;
}
.pl-row:last-child { border-bottom: none; }
.pl-row-head {
  background: #1a3044;
}
.pl-cell {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  font-size: 12px;
  color: #444444;
  text-align: center;
  border-right: 0.5px solid #f0f0f0;
  overflow: hidden;
}
.pl-cell:last-child { border-right: none; }
.pl-cell-head {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  border-right: 0.5px solid rgba(255, 255, 255, 0.12);
}
.pl-cell-pn { background: #f7fafc; }
.pl-row-head .pl-cell-pn { background: #223b52; }
.pl-text-pn {
  color: #0074bc;
  font-weight: 600;
}
/* PDF 图标色块占位（44rpx） */
.pl-pdf {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background: #d84a3a;
  color: #ffffff;
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  letter-spacing: 0;
}
.pl-count {
  padding: 9px 13px;
  font-size: 12px;
  color: #999999;
  border-top: 0.5px solid #f0f0f0;
}

/* ---- 加载 / 空状态 ---- */
.pl-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
  color: #999999;
  font-size: 13px;
}
.pl-loading-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid #e0e6ec;
  border-top-color: #0074bc;
  border-radius: 50%;
  margin-bottom: 10px;
  animation: pl-spin 0.8s linear infinite;
}
@keyframes pl-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.pl-empty {
  background: #ffffff;
  border-radius: 8px;
  padding: 60px 0;
  text-align: center;
  color: #999999;
  font-size: 13px;
}