/* ==========================================================================
   产品规格行 - 左对齐换行优化版
   ========================================================================== */

/* 1. 规格行容器 */
.spec-row {
    display: flex;
    align-items: flex-start;  /* 改为顶部对齐，适应多行情况 */
    flex-wrap: wrap;          /* 允许换行，解决内容溢出 */
    
    padding: 8px 0;           /* 适度增加间距 */
    border-bottom: 1px solid rgba(37, 99, 235, 0.08); /* 保持柔和的分割线 */
    font-size: 13px;
    gap: 12px;                /* 元素间距 */
    width: 100%;
    box-sizing: border-box;
}

.spec-row:last-of-type {
    border-bottom: none;
}

/* 2. 规格标签 (左侧) */
.spec-label {
    flex: 0 0 70px;           /* 固定宽度 */
    color: #64748b;           /* 优化颜色 Slate-500 */
    font-weight: 500;
    padding-top: 4px;         /* 视觉修正：与徽章文字基线对齐 */
}

/* 3. 规格值 (中间) */
.spec-value {
    flex: 0 0 auto;           /* 自适应宽度 */
    min-width: 60px;          /* 给数值保留最小展示区域 */
    text-align: left;
    color: #334155;           /* 优化颜色 Slate-700 */
    font-weight: 600;
    padding-top: 4px;         /* 视觉修正：与徽章文字基线对齐 */
}

/* 4. 规格徽章容器 (右侧) */
.spec-badges {
    flex: 1;                  /* 占据剩余空间 */
    display: flex;
    gap: 6px;                 /* 徽章间距 */
    
    /* 【核心修改】改为左对齐，紧跟数值之后 */
    justify-content: flex-start; 
    
    flex-wrap: wrap;          /* 允许内部徽章换行，彻底解决溢出 */
    align-items: center;
}

/* 5. 单个徽章样式美化 */
.spec-badge {
    flex: 0 0 auto;           /* 不被压缩 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* 优化后的清新配色：蓝底白字或浅蓝底深蓝字 */
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    color: #0369a1;           /* Sky-700 */
    border: 1px solid rgba(186, 230, 253, 0.6); /* Sky-200 */
    
    padding: 3px 8px;         /* 增加内边距，更易读 */
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;      /* 保持文字不换行 */
    
    /* 增加微弱阴影提升质感 */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
}

/* 针对没有 spec-value 的行（如机房优化），微调间距 */
.spec-label + .spec-badges {
    margin-left: 0;
}