/*
 * WES 产品规格表样式
 * 配合 [wes_product_specs] 短代码使用
 * 输出结构: <dl class="wes-spec-row"> (语义化定义列表, 移动端友好)
 *
 * ===== 部署 =====
 * 文件已通过 functions.php 自动加载
 * 如需微调, 直接修改此文件即可
 */

/* === 规格表容器 === */
.wes-spec-table {
    width: 100%;
    border-top: 1px solid var(--wes-color-border-light, #E3EAF0);
}

/* === 单行: dl 伪装为表格行 === */
.wes-spec-row {
    display: flex;
    margin: 0;
    border-bottom: 1px solid var(--wes-color-border-light, #E3EAF0);
    transition: background-color var(--wes-transition-fast, 0.15s ease);
}

.wes-spec-row:hover {
    background-color: rgba(33, 150, 243, 0.03);
}

/* 交替行背景 */
.wes-spec-row:nth-child(even) {
    background-color: var(--wes-color-bg-alt, #fafbfc);
}

.wes-spec-row:nth-child(even):hover {
    background-color: rgba(33, 150, 243, 0.05);
}

/* === 参数名 (dt) === */
.wes-spec-label {
    flex: 0 0 35%;
    max-width: 35%;
    padding: 12px 16px;
    font-size: var(--wes-font-size-sm, 13px);
    font-weight: var(--wes-font-weight-medium, 500);
    color: var(--wes-color-text-muted, #607D8B);
    background-color: var(--wes-color-bg-input, #f5f7fa);
    border-right: 1px solid var(--wes-color-border-light, #E3EAF0);
    display: flex;
    align-items: center;
}

/* === 参数值 (dd) === */
.wes-spec-value {
    flex: 1;
    padding: 12px 16px;
    margin: 0;
    font-size: var(--wes-font-size-sm, 14px);
    color: var(--wes-color-text-body, #1a2332);
    font-family: var(--wes-font-family-cn);
    font-feature-settings: 'tnum' 1;
    display: flex;
    align-items: center;
}

/* === 组标题 (仅在渲染全部组时出现) === */
.wes-spec-group-title {
    font-size: var(--wes-font-size-base, 14px);
    font-weight: var(--wes-font-weight-semibold, 600);
    color: var(--wes-color-primary, #2196F3);
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--wes-color-primary, #2196F3);
}

.wes-spec-group-title:first-child {
    margin-top: 0;
}

/* === 响应式: 移动端竖向堆叠 === */
@media (max-width: 767px) {
    .wes-spec-row {
        flex-direction: column;
    }

    .wes-spec-label {
        flex: none;
        max-width: 100%;
        border-right: none;
        border-bottom: none;
        padding: 10px 14px 4px;
        font-size: var(--wes-font-size-xs, 12px);
        background-color: transparent;
    }

    .wes-spec-value {
        padding: 4px 14px 10px;
        font-size: var(--wes-font-size-sm, 13px);
    }
}