/* ==========================================================================
 * 产品页展示优化（覆盖样式，在 style.min.css 之后加载）
 *
 * 对应模板：template/post-single-product.php  → .product （全宽样式，prostyle=1）
 *           template/post-single-product2.php → .product2（居左/居右样式，prostyle=2/3）
 * 原样式位置：style/style.css 330-437 行、style/css/media.css 85-111 行
 * 本文件只做覆盖，不改原文件，主题升级不受影响
 * ========================================================================== */

/* ---------- 布局：固定像素改弹性布局 ---------- */
/* 原来 proleft 450px + proright 752px 硬拼容器宽度，改为左侧固定、右侧自适应 */
.product,
.product2 {
    display: flex;
}
.product .proleft {
    float: none;
    flex: 0 0 450px;     /* 左侧图片区固定 450px */
    width: auto;
}
.product .proright {
    float: none;
    flex: 1;             /* 右侧信息区自动填满剩余宽度 */
    width: auto;
    min-width: 0;        /* 防止内容撑破 flex 容器 */
}
.product2 .pro2left {
    float: none;
    flex: 0 0 281px;
    width: auto;
}
.product2 .pro2right {
    float: none;
    flex: 1;
    width: auto;
    min-width: 0;
}

/* ---------- 标题：长标题不再单行截断，最多显示两行 ---------- */
.proright .title h1,
.pro2right .title h1 {
    height: auto;
    max-height: 64px;            /* 两行 × 32px 行高 */
    line-height: 32px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;       /* 超过两行显示省略号 */
    overflow: hidden;
}

/* ---------- 价格：主价加粗更醒目，划线原价保持常规 ---------- */
.proright .price .price_num span,
.pro2right .price .price_num span {
    font-weight: bold;
}
.proright .price .price_num span.old,
.pro2right .price .price_num span.old {
    font-weight: normal;
}

/* ---------- 购买按钮：圆角 + 过渡 + 悬停微升 ---------- */
.proright .buy div,
.pro2right .buy div {
    box-sizing: border-box;
    border-radius: 4px;
    transition: all .2s ease;
}
.proright .buy div:hover,
.pro2right .buy div:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

/* 样式2按钮区原高度固定 66px，按钮多时会被裁掉，改为自适应 */
.pro2right .buy {
    height: auto;
    min-height: 66px;
}

/* ---------- 移动端适配（≤980px，与主题 media.css 断点一致） ---------- */
@media screen and (max-width: 980px) {
    /* 上图下文纵向排列（media.css 已设 width:100%，这里解除 flex 定宽） */
    .product,
    .product2 {
        flex-direction: column;
    }
    .product .proleft,
    .product2 .pro2left {
        flex: none;
    }

    /* 按钮改为每行两个自适应铺满，替代原固定 110px 宽 */
    .proright .buy,
    .pro2right .buy {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .proright .buy div,
    .pro2right .buy div {
        width: calc(50% - 4px);
        margin: 0;
        font-size: 16px;
    }
    /* 电话按钮内容较长，单独占一整行 */
    .proright .buy .telha,
    .pro2right .buy .telha {
        width: 100%;
    }
}