/*
 * 产品总页 · 分类目录 —— 1:1 对应设计稿 Astra 6月 / 产品总页 1080:403
 *   Content Container 1080:404：上下留白 120，左栏 1120 / 中缝 24（正中 1px #DEDFE0）/ 右栏 296
 *   Section Header  1080:406：整块 gap 24；图标 48、标题 36/40(-0.72px)、描述 24/32(-0.24px) #808080
 *   Filter Header   1080:412：白底 padding 10、项 h36 padding 8/12、16/20(-0.16px)
 *                             选中 #E60012 + 1px 下划线；竖分隔 1×16 #333
 *   Product Section 1080:428：3 列 gap 20，卡片 360×604（图 360×318）
 *                             默认下边框 2px #DEDFE0；hover 转 #E60012 + 标题/MORE 转红 + 投影
 *   Right Section   1080:509：gap 12、项 padding 0 20、18/25(-0.36px)
 *                             选中 白底 + 左 4px #E60012 + 红字；未选中 下边框 1px #D9D9D9 + #808080
 */

.astra-pcat {
  --pcat-primary: #e60012;
  --pcat-text-strong: #000000;
  --pcat-text: #333333;
  --pcat-muted: #808080;
  --pcat-border: #dedfe0;
  --pcat-border-strong: #d9d9d9;
  --pcat-bg: #ffffff;
  --pcat-nav-width: 296px;
  --pcat-gutter: 24px;
  --pcat-section-gap: 120px;

  display: flex;
  align-items: flex-start;
  padding: 120px 0;
}

/* ---------------------------------------------------------------- 左栏 */
.astra-pcat__main {
  flex: 1 1 auto;
  min-width: 0;
}

.astra-pcat__section {
  display: flex;
  flex-direction: column;
  gap: 32px;
  scroll-margin-top: var(--pcat-scroll-offset, 100px);
}

.astra-pcat__section + .astra-pcat__section {
  margin-top: var(--pcat-section-gap);
}

/* -------------------------------------------------- 分类标题 1080:406 */
.astra-pcat__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.astra-pcat__head-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.astra-pcat__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: block;
}

.astra-pcat__icon img,
.astra-pcat__icon svg {
  display: block;
  width: 48px;
  height: 48px;
}

.astra-pcat__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.72px;
  color: var(--pcat-text-strong);
}

.astra-pcat__desc {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--pcat-muted);
}

.astra-pcat__desc p {
  margin: 0;
}

.astra-pcat__desc p + p {
  margin-top: 12px;
}

/* -------------------------------------------------- 筛选条 1080:412 */
.astra-pcat__filter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--pcat-bg);
  flex-wrap: wrap;
}

.astra-pcat__tabs {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 10px;
  flex-wrap: wrap;
}

.astra-pcat__tab {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  height: 36px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.16px;
  color: var(--pcat-text);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}

.astra-pcat__tab:hover {
  color: var(--pcat-primary);
}

.astra-pcat__tab.is-active {
  color: var(--pcat-primary);
  border-bottom-color: var(--pcat-primary);
}

.astra-pcat__filter-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 16px;
  background: var(--pcat-text);
}

/* 功率区间下拉 1080:423 */
.astra-pcat__range {
  position: relative;
  padding: 0 10px;
}

.astra-pcat__range-toggle {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.16px;
  color: var(--pcat-text);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s;
}

.astra-pcat__range-toggle:hover,
.astra-pcat__range.is-open .astra-pcat__range-toggle,
.astra-pcat__range.is-filtered .astra-pcat__range-toggle {
  color: var(--pcat-primary);
}

/* 设计稿是 arrow-right 旋转 90° 指向下方 */
.astra-pcat__range-arrow {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: block;
  transform: rotate(90deg);
  transition: transform 0.3s;
}

.astra-pcat__range.is-open .astra-pcat__range-arrow {
  transform: rotate(-90deg);
}

.astra-pcat__range-arrow path {
  stroke: currentColor;
}

.astra-pcat__range-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 10px;
  min-width: 180px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--pcat-bg);
  border: 1px solid var(--pcat-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: none;
}

.astra-pcat__range.is-open .astra-pcat__range-menu {
  display: block;
}

.astra-pcat__range-item {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--pcat-text);
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s;
}

.astra-pcat__range-item:hover {
  background: #f9f9f9;
}

.astra-pcat__range-item.is-active {
  color: var(--pcat-primary);
}

/* -------------------------------------------------- 产品卡片 1080:428 */
.astra-pcat__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.astra-pcat__card {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 604px;
  padding: 20px;
  background: var(--pcat-bg);
  border-bottom: 2px solid var(--pcat-border);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, filter 0.3s;
}

.astra-pcat__card:hover,
.astra-pcat__card:focus-visible {
  border-bottom-color: var(--pcat-primary);
  filter: drop-shadow(14px 14px 2.4px rgba(0, 0, 0, 0.02));
}

.astra-pcat__card-info {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  text-align: center;
}

.astra-pcat__card-title {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--pcat-text);
  transition: color 0.3s;
}

.astra-pcat__card:hover .astra-pcat__card-title,
.astra-pcat__card:focus-visible .astra-pcat__card-title {
  color: var(--pcat-primary);
}

.astra-pcat__specs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.astra-pcat__spec {
  padding: 0 10px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--pcat-text);
}

.astra-pcat__spec + .astra-pcat__spec {
  border-left: 1px solid var(--pcat-border);
}

.astra-pcat__card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 318;
  overflow: hidden;
}

.astra-pcat__card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.astra-pcat__card-more {
  padding: 20px 0;
  text-align: center;
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--pcat-text-strong);
  transition: color 0.3s;
}

.astra-pcat__card:hover .astra-pcat__card-more,
.astra-pcat__card:focus-visible .astra-pcat__card-more {
  color: var(--pcat-primary);
}

.astra-pcat__card[hidden] {
  display: none;
}

.astra-pcat__empty {
  margin: 0;
  padding: 48px 0;
  text-align: center;
  font-size: 18px;
  line-height: 25px;
  font-weight: 600;
  color: var(--pcat-muted);
}

/* ---------------------------------------------------------------- 右栏 */
.astra-pcat__nav {
  position: relative;
  flex: 0 0 var(--pcat-nav-width);
  width: var(--pcat-nav-width);
  margin-left: var(--pcat-gutter);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 中缝 1px 竖线，位于 24px 间隔正中 —— 设计稿 Divider Line 1080:507 */
.astra-pcat__nav::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pcat-gutter) / -2);
  width: 1px;
  background: var(--pcat-border);
}

.astra-pcat--sticky .astra-pcat__nav {
  position: sticky;
  top: var(--pcat-sticky-top, 100px);
}

.astra-pcat__nav-item {
  display: flex;
  align-items: center;
  min-height: 81px;
  padding: 12px 20px;
  border-left: 4px solid transparent;
  border-bottom: 1px solid var(--pcat-border-strong);
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--pcat-muted);
  text-decoration: none;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}

.astra-pcat__nav-item:hover {
  color: var(--pcat-primary);
}

.astra-pcat__nav-item.is-active {
  background: var(--pcat-bg);
  border-left-color: var(--pcat-primary);
  border-bottom-color: transparent;
  color: var(--pcat-primary);
}

/* ---------------------------------------------------------- 响应式 */
/* 设计稿只提供 1920 桌面稿，以下为等比收敛的适配。
 * 注意：上下留白、区块间距、分栏数、右栏宽度由组件的响应式控制项按断点输出，
 * 它们的选择器权重高于这里的媒体查询，所以不要在本段重复写，否则是死代码。 */
@media (max-width: 1400px) {
  .astra-pcat__title {
    font-size: 32px;
    line-height: 38px;
  }

  .astra-pcat__desc {
    font-size: 20px;
    line-height: 28px;
  }

  .astra-pcat__card {
    min-height: 0;
  }
}

@media (max-width: 1200px) {
  .astra-pcat {
    display: block;
  }

  /* 权重要压过 .astra-pcat--sticky .astra-pcat__nav，否则窄屏还会吸顶 */
  .astra-pcat--sticky .astra-pcat__nav,
  .astra-pcat__nav {
    position: static;
    width: auto;
    margin: 0 0 32px;
    padding: 0;
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--pcat-bg);
  }

  .astra-pcat__nav::-webkit-scrollbar {
    display: none;
  }

  .astra-pcat__nav::before {
    display: none;
  }

  .astra-pcat__nav-item {
    flex: 0 0 auto;
    min-height: 0;
    padding: 14px 20px;
    border-left: 0;
    border-bottom: 2px solid transparent;
    font-size: 16px;
    line-height: 22px;
    white-space: nowrap;
  }

  .astra-pcat__nav-item.is-active {
    border-left: 0;
    border-bottom-color: var(--pcat-primary);
  }
}

@media (max-width: 768px) {
  .astra-pcat__section {
    gap: 24px;
  }

  .astra-pcat__head {
    gap: 16px;
  }

  .astra-pcat__icon,
  .astra-pcat__icon img,
  .astra-pcat__icon svg {
    width: 36px;
    height: 36px;
  }

  .astra-pcat__title {
    font-size: clamp(15px, 4.8vw, 26px);
    line-height: clamp(18.46px, 5.91vw, 32px);
  }

  .astra-pcat__desc {
    font-size: clamp(12px, 3.6vw, 16px);
    line-height: clamp(19.5px, 5.85vw, 26px);
  }

  .astra-pcat__filter {
    padding: 6px;
    gap: 6px;
  }

  .astra-pcat__tabs {
    padding: 0 4px;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .astra-pcat__tabs::-webkit-scrollbar {
    display: none;
  }

  .astra-pcat__tab,
  .astra-pcat__range-toggle {
    font-size: clamp(12px, 3.2vw, 14px);
    padding: 8px;
  }

  .astra-pcat__grid {
    gap: 16px;
  }

  .astra-pcat__card {
    gap: 16px;
    padding: 16px;
  }

  .astra-pcat__card-title {
    font-size: clamp(13px, 4.2vw, 20px);
    line-height: clamp(18.2px, 5.88vw, 28px);
  }

  .astra-pcat__card-more {
    padding: 12px 0;
    font-size: clamp(12px, 3.6vw, 16px);
    line-height: clamp(16.5px, 4.95vw, 22px);
  }
}