/* 外层容器：适配嵌入场景，清除独立背景/阴影，仅做内容居中 */
.center-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: auto;
    padding: 15px 0; /* 缩减内边距，避免与外层卡片冲突 */
    background: transparent; /* 透明背景，完全融入外层 */
}

/* 核心容器：适配嵌入，无独立卡片样式，100%宽度匹配外层 */
.cart-container {
    width: 100%;
    max-width: 380px; /* 限制最大宽度，避免在宽外层卡片中过宽 */
    background: transparent; /* 清除背景，不覆盖外层卡片 */
    box-shadow: none; /* 移除阴影，不与外层叠加 */
    border: none; /* 清除边框，融入外层 */
    overflow: visible;
}

/* 标题：商业级文本层级，突出产品定位 */
.cart-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b; /* 深色调，符合商业产品标题权重 */
    margin-bottom: 12px;
    text-align: left; /* 左对齐更符合商业信息阅读习惯 */
    border-bottom: 1px solid #e2e8f0; /* 细浅边框，区分标题与内容 */
    padding-bottom: 10px; /* 底部内边距，优化间距 */
    background: transparent;
}

/* 优惠区：聚焦核心权益，商业级标签引导 */
.cart-offer {
    display: flex;
    justify-content: flex-start; /* 左对齐，符合信息阅读顺序 */
    margin-bottom: 14px;
    gap: 8px; /* 统一间距，更规整 */
    flex-wrap: wrap; /* 适配窄屏，避免标签溢出 */
}

/* 优惠标签：商业级视觉区分，突出核心卖点 */
.cart-offer-item {
    padding: 4px 11px;
    border-radius: 18px; /* 胶囊形标签，商业产品常用样式 */
    margin-right: 0; /* 清除原margin，用gap统一间距 */
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

/* 主优惠标签：高亮核心权益（低价），吸引注意力 */
.cart-selling-point-1 {
    background-color: #fff1f0;
    color: #dc2626; /* 红色系，商业中常用作优惠高亮色 */
    border: 1px solid #fecdd3;
}

/* 次优惠标签：辅助信息，弱化不抢焦点 */
.cart-selling-point-2 {
    background-color: #f8fafc;
    color: #334155; /* 深灰色，体现专业属性（如服务器架构） */
    border: 1px solid #e2e8f0;
}

/* 信息容器：规整内容，无独立背景 */
.cart-info {
    display: flex;
    flex-direction: column;
    padding: 0; /* 清除内边距，匹配外层卡片 */
    background: transparent;
}

/* 信息项：商业级数据展示，清晰区分标签与数值 */
.cart-info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9; /* 极浅边框，不割裂视觉 */
    padding: 11px 0; /* 上下内边距，优化点击/阅读体验 */
    transition: none; /* 清除hover效果，避免与外层卡片交互冲突 */
}

/* 信息项文本：商业级层级区分，突出核心数据 */
.cart-info-item span:first-child {
    color: #64748b; /* 标签浅色调，明确信息属性 */
    font-weight: 400;
}
.cart-info-item span:last-child {
    color: #1e293b; /* 数值深色调+加粗，突出核心配置 */
    font-weight: 500;
    white-space: nowrap; /* 防止关键数据（如IP、防御）换行 */
}

/* 最后一项移除下边框，避免与外层卡片底部冗余 */
.cart-info-item:last-child {
    border-bottom: none;
}

/* 响应式适配：适配外层卡片窄屏场景 */
@media (max-width: 320px) {
    .cart-title {
        font-size: 15px;
    }
    .cart-info-item span:last-child {
        font-size: 13px;
    }
}