/* ==========================================================================
   官网主题 (my-web) - 顶部导航「产品」悬停弹窗
   --------------------------------------------------------------------------
   配合 js/ztgl-popup.js 使用，全站加载（由 footer.html 引入），
   因为导航在每个页面都存在。
   商品数据来自 ztgl 后台：/ztgl/api.php?m=catalog
   依赖 common/redesign.css 里的设计令牌。

   布局：左栏一级分类（浅底容器，边界清晰）+ 右栏二级分类卡片。
   ========================================================================== */

/* 覆盖 redesign.css 里给 .nav-content 定义的四列网格。
   注意：左栏必须给足宽度并且不容许压缩，否则中文会被逐字换行变成竖排。 */
.ztp-wrap {
  display: grid !important;
  grid-template-columns: 216px minmax(0, 1fr) !important;
  gap: 0 !important;
  min-height: 250px;
  max-height: 470px;
}

/* ---------------------------------------------------------------- 左栏 */
.ztp-side {
  /* 浅色底 + 右侧分隔线，让「一级分类」自成一块，边界清晰 */
  background: #F7F9FE;
  border-right: 1px solid var(--divider-color);
  border-radius: var(--radius-m) 0 0 var(--radius-m);
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
}

.ztp-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: var(--radius-m);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.4;
  transition: background .18s ease, color .18s ease;
  /* 关键：禁止换行。中文在没有宽度约束时会逐字换行，视觉上变成竖排文字 */
  white-space: nowrap;
}
.ztp-group:hover,
.ztp-group.is-active {
  background: #fff;
  color: var(--color-primary);
}
.ztp-group.is-active {
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(21, 34, 50, .08);
}

/* 分类名：允许占满剩余宽度。
   这里刻意**不加 overflow: hidden / ellipsis** —— 左栏宽度是固定的 216px，
   加了省略号反而会把「特价云服务器」这类名字截成「特价」，看起来像显示不全。 */
.ztp-group > span:first-child {
  white-space: nowrap;
}

.ztp-group-num {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-tertiary);
  background: #E9EDF6;
  border-radius: 999px;
  padding: 1px 7px;
}
.ztp-group.is-active .ztp-group-num,
.ztp-group:hover .ztp-group-num {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* ---------------------------------------------------------------- 右栏 */
.ztp-main {
  padding: 16px 6px 16px 24px;
  overflow-y: auto;
}

.ztp-pane { display: none; }
.ztp-pane.is-active { display: block; }

/* 右栏标题：二级分类区域的标题栏，和左栏形成清晰的区域划分 */
.ztp-pane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--divider-color);
}
.ztp-pane-head b {
  font-size: 15px;
  color: var(--text-primary);
  white-space: nowrap;
}

/* 二级分类卡片：两列 */
.ztp-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}

.ztp-card {
  display: block;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  transition: background .18s ease, border-color .18s ease, box-shadow .2s ease, transform .2s ease;
}
.ztp-card:hover {
  background: #fff;
  border-color: rgba(26, 86, 219, .22);
  box-shadow: 0 8px 20px rgba(21, 34, 50, .10);
  transform: translateY(-2px);
}

.ztp-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.ztp-card-title > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ztp-card:hover .ztp-card-title { color: var(--color-primary); }

/* 角标：自营 / D合作商 / E合作商 */
.ztp-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid rgba(240, 20, 47, .45);
  border-radius: 4px;
  color: #F0142F;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  background: #fff;
  white-space: nowrap;
}

.ztp-card-desc {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-tertiary);
}

.ztp-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}
.ztp-empty b {
  display: block;
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 6px;
}
.ztp-empty p { margin: 0; line-height: 1.7; }

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1023px) {
  .ztp-wrap { grid-template-columns: 188px minmax(0, 1fr) !important; }
  .ztp-cards { grid-template-columns: 1fr; }
}

@media (max-width: 750px) {
  /* 移动端导航整体折叠成抽屉，产品弹窗只保留内容区 */
  .ztp-wrap {
    grid-template-columns: 1fr !important;
    max-height: none;
  }
  .ztp-side {
    border-right: none;
    border-radius: 0;
    border-bottom: 1px solid var(--divider-color);
    padding: 10px 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .ztp-group {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 999px;
  }
  .ztp-group-num { display: none; }
  .ztp-main { padding: 14px 0 0; }
  .ztp-cards { gap: 8px; }
}