/* 产品规格主容器 */
.product-specs {
  max-width: 640px;       /* 限制容器最大宽度为640px */
  padding: 6px 0;         /* 上下内边距6px，左右无 */
  font-family: system-ui, -apple-system, sans-serif; /* 系统级字体优先 */
}

/* 规格分组容器 */
.spec-group {
  margin-bottom: 0;       /* 移除默认底部外边距 */
}

/* 单个规格条目容器 */
.spec-item {
  display: flex;           /* 启用弹性盒子布局 */
  padding: 4px 0;          /* 上下内边距4px，左右无 */
  min-height: 32px;        /* 最小高度确保视觉一致性 */
  border-bottom: 1px solid rgba(0,0,0,0.05); /* 底部0.05透明度的黑色分割线 */
  opacity: 0;              /* 初始完全透明 */
  animation: fadeInUp 0.5s ease-out forwards; /* 向上淡入动画 */
  transition: all 0.2s ease; /* 所有属性变化添加0.2秒缓动 */
  align-items: center;     /* 垂直居中对齐子元素 */
}

/* 悬停状态 */
.spec-item:hover {
  background: rgba(0,0,0,0.08); /* 8%透明度的黑色背景 */
}

/* 动画延迟配置 */
.spec-item:nth-child(1) { animation-delay: 0.2s; } /* 第一个元素延迟0.2秒 */
.spec-item:nth-child(2) { animation-delay: 0.3s; } /* 每个元素递增0.1秒延迟 */
.spec-item:nth-child(3) { animation-delay: 0.4s; }
.spec-item:nth-child(4) { animation-delay: 0.5s; }
.spec-item:nth-child(5) { animation-delay: 0.6s; }

/* 向上淡入动画定义 */
@keyframes fadeInUp {
  from {
    opacity: 0;            /* 动画起始状态：完全透明 */
    transform: translateY(20px); /* Y轴方向下移20px */
  }
  to {
    opacity: 1;            /* 动画结束状态：完全不透明 */
    transform: translateY(0); /* 恢复原始位置 */
  }
}

/* 规格标签样式 */
.spec-label {
  min-width: 96px;         /* 最小宽度保证4个汉字显示 */
  max-width: 110px;        /* 最大宽度限制 */
  color: #666;             /* 中灰色文字 */
  font-size: 14px;         /* 14px标准字号 */
  flex-shrink: 0;          /* 禁止弹性收缩 */
  padding: 2px 8px 0 0;    /* 上2px/右8px/下0/左0的内边距 */
  line-height: 1.5;        /* 1.5倍行高提升可读性 */
}

/* 规格值容器 */
.spec-value {
  flex: 1;                 /* 弹性扩展填满剩余空间 */
  display: flex;           /* 嵌套弹性布局 */
  align-items: center;     /* 子元素垂直居中 */
  gap: 4px;                /* 子元素之间4px间距 */
  min-width: 0;            /* 允许内容压缩溢出 */
  padding-left: 4px;       /* 左侧4px内边距 */
}

/* 芯片式标签 */
.chip-tag {
  color: #0052cc;          /* 品牌蓝色文字 */
  font-size: 0.75rem;      /* 12px小字号 */
  padding: 1px 6px;        /* 紧凑型内边距：上下1px/左右6px */
  border-radius: 4px;      /* 4px圆角 */
  background: rgba(0,82,204,0.12); /* 12%透明度的品牌蓝背景 */
  border: 1px solid rgba(0,82,204,0.2); /* 20%透明度的蓝色边框 */
  margin-left: auto;       /* 左侧自动外边距实现右对齐 */
  white-space: nowrap;    /* 禁止文本换行 */
  line-height: 1.3;       /* 紧凑行高 */
  margin-top: -1px;       /* 上移1px微调垂直对齐 */
}

/* 特性标签容器 */
.feature-tags {
  margin-top: 0.8rem;     /* 顶部12.8px外边距（基于16px基准） */
  display: flex;          /* 弹性布局 */
  flex-wrap: wrap;        /* 允许换行 */
  gap: 4px;              /* 子元素间隔4px */
}

/* 单个特性标签 */
.feature-tag {
  color: #444;            /* 深灰色文字 */
  font-size: 0.8125rem;  /* 13px字号（0.8125 * 16=13） */
  padding: 4px 10px;     /* 上下4px/左右10px内边距 */
  border-radius: 6px;    /* 6px圆角 */
  background: rgba(0,0,0,0.03); /* 3%透明度的黑色背景 */
  border: 1px solid rgba(0,0,0,0.04); /* 4%透明度的边框 */
  opacity: 0;            /* 初始透明 */
  animation: fadeInUp 0.4s ease-out forwards; /* 更快的淡入动画 */
  transition: all 0.3s ease; /* 所有属性0.3秒过渡 */
  cursor: pointer;       /* 鼠标手型指针 */
  -webkit-tap-highlight-color: transparent; /* 禁用移动端点击高亮 */
}

/* 特性标签悬停状态 */
.feature-tag:hover {
  background: rgba(0,0,0,0.08); /* 加深背景至8%透明度 */
  border-color: rgba(0,0,0,0.12); /* 加深边框至12% */
  transform: translateY(-2px); /* 上移2px */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* 添加微妙投影 */
}

/* 特性标签内的链接 */
.feature-tag a {
  text-decoration: none; /* 移除下划线 */
  color: inherit;        /* 继承父级文字颜色 */
  display: block;        /* 块级显示填满容器 */
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  .spec-label { 
    color: #999; /* 浅灰色文字 */
  }
  .spec-value { 
    color: #eee; /* 亮白色文字 */
  }
  .spec-item { 
    border-color: rgba(255,255,255,0.1); /* 10%透明度的白色边框 */
  }
  .chip-tag {
    color: #4dabf7; /* 亮蓝色文字 */
    background: rgba(77,171,247,0.15); /* 15%透明度的蓝色背景 */
    border-color: rgba(77,171,247,0.3); /* 30%透明度的蓝色边框 */
  }
  .feature-tag {
    background: rgba(255,255,255,0.1); /* 10%透明度的白色背景 */
    border-color: rgba(255,255,255,0.15); /* 15%透明度的白色边框 */
  }
  .spec-item:hover { 
    background: rgba(255,255,255,0.05); /* 5%透明度的白色悬停背景 */
  }
  .feature-tag:hover {
    background: rgba(255,255,255,0.15); /* 15%透明度的悬停背景 */
    border-color: rgba(255,255,255,0.2); /* 20%透明度的边框 */
  }
}

/* 移动端适配（小于480px） */
@media (max-width: 480px) {
  .spec-item {
    padding: 2px 0;      /* 缩小垂直内边距 */
    min-height: 28px;   /* 降低最小高度 */
    overflow-x: auto;   /* 允许横向滚动 */
    -webkit-overflow-scrolling: touch; /* 启用顺滑滚动 */
  }
  .spec-label {
    min-width: 80px;    /* 缩小最小宽度 */
    font-size: 13px;    /* 减小字号 */
    padding-right: 4px; /* 缩小右侧间距 */
  }
  .spec-value {
    gap: 2px;          /* 缩小子元素间距 */
    padding-left: 2px; /* 缩小左侧内边距 */
    font-size: 14px;   /* 保持基础字号 */
  }
  .chip-tag {
    padding: 0 4px;    /* 更紧凑的内边距 */
    font-size: 11px;   /* 更小的字号 */
  }
  .feature-tags {
    gap: 3px;          /* 缩小标签间距 */
    margin-top: 0.6rem; /* 减小顶部外边距 */
  }
  .spec-item::-webkit-scrollbar {
    display: none;     /* 隐藏滚动条 */
  }
  .feature-tag:active {
    transform: scale(0.95); /* 点击时缩小5% */
  }
}