/* ============================================================
   选型对比页 compare.css
   风格与全站一致：版心 1200、品牌暗红 #821619、卡片白底细边框
   ============================================================ */

.compare_page { padding: 30px 0 60px; background: #f8f8f8; }
.compare_page .w_1200 { width: 1200px; max-width: 100%; margin: 0 auto; }

.cmp_head h1 { font-size: 26px; color: #333; margin-bottom: 8px; }
.cmp_tip { color: #999; font-size: 14px; margin-bottom: 24px; }

/* 选择区 */
.cmp_pick { background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; padding: 22px 26px; margin-bottom: 26px; }
.cmp_step1, .cmp_step2 { margin-bottom: 18px; }
.cmp_step1 > label, .cmp_step2 > label { display: block; font-size: 15px; color: #333; font-weight: 700; margin-bottom: 10px; }
.cmp_step1 select {
    min-width: 360px; max-width: 100%; height: 40px; padding: 0 12px;
    border: 1px solid #d8d8d8; border-radius: 4px; font-size: 14px; color: #333; background: #fff;
}
.cmp_prod_list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    /* 不再锁死 380px 内滚 —— 35 个产品挤在 380px 高的滚动框里挑选体验很差。
       改为随页展开；只有极长的列表才限高，且限高值放大到 640px（约 2.5 屏卡位）。 */
    max-height: 640px;
    overflow-y: auto;
    padding: 4px;
    /* 滚动条出现时不挤压卡片 */
    scrollbar-gutter: stable;
}
/* 产品较少时（无需滚动）不显示滚动条留白 */
.cmp_prod_list::-webkit-scrollbar { width: 8px; }
.cmp_prod_list::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 4px; }
.cmp_prod_list::-webkit-scrollbar-thumb:hover { background: #bbb; }
.cmp_prod {
    border: 1px solid #e5e5e5; border-radius: 6px; background: #fff;
    padding: 10px; cursor: pointer; text-align: center; position: relative;
    transition: border-color .15s, box-shadow .15s;
}
.cmp_prod:hover { border-color: #821619; }
.cmp_prod.on { border-color: #821619; box-shadow: 0 0 0 2px rgba(130,22,25,.15); }
.cmp_prod.on::after {
    content: '✓'; position: absolute; top: 6px; right: 8px;
    color: #fff; background: #821619; width: 20px; height: 20px; border-radius: 50%;
    font-size: 12px; line-height: 20px;
}
.cmp_prod img, .cmp_prod .noimg { width: 100%; height: 90px; object-fit: contain; background: #fafafa; border-radius: 4px; margin-bottom: 8px; }
.cmp_prod .nm { font-size: 13px; color: #333; line-height: 18px; height: 36px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cmp_prod .bd { display: inline-block; margin-top: 6px; font-size: 12px; color: #821619; border: 1px solid #e3c1c2; border-radius: 3px; padding: 1px 6px; }

.cmp_chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.cmp_chip { background: #fdf3f3; color: #821619; border: 1px solid #e3c1c2; font-size: 13px; border-radius: 14px; padding: 4px 12px; }
.cmp_chip b { cursor: pointer; margin-left: 4px; font-weight: 700; }

.cmp_actions { display: flex; align-items: center; gap: 12px; }
.cmp_count { color: #821619; font-weight: 700; font-size: 15px; }
.cmp_btn {
    height: 40px; padding: 0 30px; border: none; border-radius: 4px; cursor: pointer;
    background: #821619; color: #fff; font-size: 15px;
}
.cmp_btn:disabled { background: #ccc; cursor: not-allowed; }
.cmp_btn.ghost { background: #fff; color: #666; border: 1px solid #d8d8d8; }

/* 对比表 */
.cmp_result { background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; padding: 22px 26px; }
.cmp_title_bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.cmp_title_bar h2 { font-size: 20px; color: #333; }
.cmp_view_toggle button { border: 1px solid #d8d8d8; background: #fff; color: #666; height: 34px; padding: 0 18px; cursor: pointer; font-size: 14px; }
.cmp_view_toggle button.on { background: #821619; border-color: #821619; color: #fff; }

.cmp_table_wrap { overflow-x: auto; }
.cmp_table { border-collapse: collapse; width: 100%; min-width: 720px; }
.cmp_table th, .cmp_table td {
    border: 1px solid #e8e8e8; padding: 10px 14px; font-size: 14px; color: #333;
    text-align: left; vertical-align: middle;
}
.cmp_table thead th { background: #faf5f5; font-weight: 700; }
.cmp_table thead th a { color: #333; display: block; }
.cmp_table thead th a:hover { color: #821619; text-decoration: none; }
.cmp_table thead th img { display: block; width: 110px; height: 70px; object-fit: contain; margin-bottom: 6px; background: #fff; }
.cmp_table thead th span { font-size: 13px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cmp_table .fcol { width: 230px; min-width: 180px; background: #fcfcfc; font-weight: 700; }
.cmp_table .fcol i { display: block; font-style: normal; color: #999; font-size: 12px; font-weight: 400; white-space: nowrap; }
.cmp_table .fcol em.dir { display: block; font-style: normal; color: #821619; font-size: 11px; font-weight: 400; margin-top: 2px; opacity: .75; white-space: nowrap; }
.cmp_table td.best { background: #fff8e6; color: #821619; font-weight: 700; position: relative; }
.cmp_table td.best::before { content: '★'; color: #f5a623; margin-right: 4px; font-size: 12px; }
.cmp_table tr.group td { background: #f5f5f5; font-weight: 700; color: #666; font-size: 13px; padding: 7px 14px; }
.cmp_table tr.diff td { color: #1a1a1a; }
.cmp_table tbody tr:hover td { background-color: #fdfbfb; }
.cmp_table tbody tr:hover td.best { background: #fff8e6; }

/* 空状态 */
.cmp_empty { text-align: center; color: #999; padding: 60px 0; font-size: 15px; }

/* 数据透明度提示：被隐藏的指标行 / 数据不足的产品 */
.cmp_note {
    margin-top: 12px; font-size: 13px; color: #999; line-height: 1.6;
    padding: 8px 12px; background: #fafafa; border-left: 3px solid #e0e0e0; border-radius: 2px;
}
.cmp_hidden_tip { margin-top: 10px; font-size: 13px; color: #999; }

/* 首列在横向滚动时保持可见（列多时尤为关键） */
@media (min-width: 701px) {
    .cmp_table .fcol {
        position: sticky; left: 0; z-index: 2;
        box-shadow: 1px 0 0 #e8e8e8;
    }
    .cmp_table thead th.fcol { z-index: 3; }
}

/* 响应式 */
@media (max-width: 1240px) {
    .compare_page .w_1200 { width: auto; padding: 0 16px; }
    .cmp_prod_list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .cmp_prod_list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cmp_step1 select { min-width: 0; width: 100%; }
}
@media (max-width: 700px) {
    .cmp_prod_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cmp_head h1 { font-size: 21px; }
    .cmp_pick, .cmp_result { padding: 16px 14px; }
    /* 对比表在手机上允许横向滑动，但**不能让 .cmp_table_wrap 之外的页面溢出**。
       表格自身 min-width 撑开的是 wrap 的 scrollWidth，不是 document.scrollWidth；
       必须给 wrap 一个受限宽度 + overflow-x:auto，并让父级全部 min-width:0。 */
    .cmp_table_wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cmp_table { min-width: 520px; }
    .cmp_table .fcol {
        position: sticky; left: 0; z-index: 2;
        box-shadow: 1px 0 0 #e8e8e8;
        width: 110px; min-width: 110px;
    }
    .cmp_table thead th.fcol { z-index: 3; }
    /* 手机上产品卡缩略图与标题更紧凑 */
    .cmp_prod img, .cmp_prod .noimg { height: 76px; }
    .cmp_prod .nm { font-size: 12px; height: 32px; }
    .cmp_prod .bd { font-size: 11px; }
    .cmp_actions { flex-wrap: wrap; }
    .cmp_title_bar h2 { font-size: 17px; }
    .cmp_view_toggle button { height: 30px; padding: 0 12px; font-size: 13px; }
}

/* 手机上：整个对比页不得撑破视口 */
@media (max-width: 700px) {
    html[lang] .compare_page,
    html[lang] .compare_page .w_1200,
    html[lang] .compare_page .cmp_pick,
    html[lang] .compare_page .cmp_result,
    html[lang] .compare_page .cmp_prod_list {
        max-width: 100% !important;
        box-sizing: border-box;
        min-width: 0;
    }
}

/* 超窄档（<=420）：产品卡单列过大留白，改 2 列紧凑 */
@media (max-width: 420px) {
    .cmp_prod img, .cmp_prod .noimg { height: 70px; }
    .cmp_prod .nm { font-size: 12px; height: 32px; }
    .cmp_table th, .cmp_table td { padding: 8px 10px; font-size: 13px; }
}

/* ---- 品牌筛选 / 型号直达 / 关键字搜索（2026-10-25）---- */
.cmp_brand_bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cmp_bchip {
    border: 1px solid #d8d8d8; background: #fff; color: #555; font-size: 13px;
    border-radius: 14px; padding: 5px 14px; cursor: pointer; transition: all .15s;
}
.cmp_bchip i { font-style: normal; color: #999; font-size: 12px; margin-left: 2px; }
.cmp_bchip:hover { border-color: #821619; color: #821619; }
.cmp_bchip.on { background: #821619; border-color: #821619; color: #fff; }
.cmp_bchip.on i { color: #e8c9ca; }
.cmp_tools { display: flex; gap: 10px; margin-bottom: 14px; }
.cmp_tools input {
    flex: 1; min-width: 0; height: 38px; padding: 0 12px;
    border: 1px solid #d8d8d8; border-radius: 4px; font-size: 14px; color: #333;
}
.cmp_tools select {
    width: 46%; max-width: 520px; height: 38px; padding: 0 10px;
    border: 1px solid #d8d8d8; border-radius: 4px; font-size: 14px; color: #333; background: #fff;
}
.cmp_tools input:focus, .cmp_tools select:focus { outline: none; border-color: #821619; }
.cmp_prod.hide { display: none; }
.cmp_no_match { color: #999; font-size: 14px; text-align: center; padding: 24px 0; }
@keyframes cmpFlash {
    0%, 100% { box-shadow: none; }
    30% { box-shadow: 0 0 0 3px rgba(245,166,35,.55); border-color: #f5a623; }
}
.cmp_prod.flash { animation: cmpFlash 1.6s ease; }
@media (max-width: 700px) {
    .cmp_tools { flex-direction: column; }
    .cmp_tools select { width: 100%; max-width: 100%; }
    .cmp_bchip { padding: 4px 10px; }
}

/* ===== 报告输出（打印/另存为 PDF；屏幕上 #cmp_report 整体隐藏，
   但版式规则放在媒体查询外，供离屏测量表与打印共用同一套字号行高）===== */
#cmp_report { display: none; }
#pr_head_src, #pr_foot_src, #pr_mark_src, #pr_text_src { display: none; }
/* v5：报告按钮改为品牌红底黄字 + 每 3 秒震动一次，提醒用户点击 */
.cmp_btn.cmp_report_btn {
    height: 34px; padding: 0 20px; font-size: 14px; font-weight: 700;
    background: #821619; color: #ffd24d; border: none;
    animation: cmpRepShake 3s ease-in-out infinite;
}
.cmp_btn.cmp_report_btn:hover { background: #9d1c20; color: #ffe066; }
@keyframes cmpRepShake {
    0%, 86%, 100% { transform: translateX(0); }
    88% { transform: translateX(-3px) rotate(-1.2deg); }
    90% { transform: translateX(3px) rotate(1.2deg); }
    92% { transform: translateX(-2px) rotate(-.8deg); }
    94% { transform: translateX(2px) rotate(.8deg); }
    96% { transform: translateX(-1px); }
    98% { transform: translateX(0); }
}

/* 页块：A4 横向版心 281mm × 194mm（JS 按行高切页） */
.pr_page {
    width: 281mm; height: 194mm; box-sizing: border-box;
    display: flex; flex-direction: column; position: relative; overflow: hidden;
}
/* 页眉：LOGO + 域名 */
.pr_page .pr_head {
    flex: none; height: 48px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 3px solid #821619;
}
.pr_page .pr_head .pr_logo { height: 34px; }
.pr_page .pr_head .pr_site { font-size: 11px; color: #821619; font-weight: 600; letter-spacing: .5px; }
/* 正文 */
.pr_pbody { flex: 1 1 auto; overflow: hidden; position: relative; z-index: 1; padding: 8px 0 4px; }
.pr_page .pr_title { font-size: 22px; color: #222; margin: 0 0 4px; }
.pr_page .pr_meta { font-size: 11px; color: #666; margin: 0 0 8px; padding-bottom: 5px; border-bottom: 1px solid #ddd; }
.pr_table { min-width: 0 !important; width: 100%; }
.pr_table th, .pr_table td { font-size: 11px; padding: 5px 7px; }
.pr_table thead th { background: #821619; color: #fff; }
.pr_table thead th img { height: 34px; display: block; margin: 0 auto 2px; background: #fff; }
.pr_table thead th span { color: #fff; }
.pr_table td.best { background: #f3ecec; font-weight: 600; }
.pr_table tr.group td { background: #f5f5f5; font-weight: 600; }
.pr_page .pr_legend, .pr_page .pr_note { font-size: 10px; color: #777; margin: 6px 0 0; }
/* 页脚：简介 + 联系方式 + 电商平台（80% 灰度）
   v5：高度 108 → 118px（与 buildReport() 的 FOOT_H 同步改），
   版权行不再被 overflow:hidden 裁掉下半截 */
.pr_page .pr_foot {
    flex: none; height: 118px; overflow: hidden;
    border-top: 1px solid #bbb; padding-top: 6px; color: #4d4d4d;
}
.pr_foot_cols { display: flex; gap: 24px; }
.pr_foot_col { flex: 1; }
.pr_foot_col.wide { flex: 1.7; }
.pr_ft { display: block; font-weight: 700; font-size: 10.5px; color: #333; margin-bottom: 2px; }
.pr_foot_col p { margin: 0; font-size: 10px; line-height: 1.45; }
.pr_copy { margin: 4px 0 0; font-size: 9px; color: #777; }
/* 水印：45°、12% 透明度浅灰（v5：置于最顶层 —— 原先垫底会被表头红底/最优列
   米黄底/分组灰底完全盖住；水印必须盖在表格填充之上才可见，
   配合低透明度与 pointer-events:none 保证文字仍可读、不挡交互） */
.pr_page .pr_mark {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 66px; font-weight: 700; letter-spacing: 3px;
    color: rgba(150, 150, 150, .12);
    white-space: nowrap; z-index: 30; pointer-events: none;
}

@media print {
    @page { size: A4 landscape; margin: 8mm; }
    html, body { background: #fff !important; }
    /* 只保留报告：逐层剔除站点框架与外部注入组件（客服浮窗等） */
    body > *:not(.container) { display: none !important; }
    .container iframe { display: none !important; }
    .container > *:not(.content) { display: none !important; }
    .content > *:not(.compare_page) { display: none !important; }
    .content .compare_page .w_1200 > *:not(#cmp_report) { display: none !important; }
    .content, .compare_page, .w_1200 { margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; }
    #cmp_report { display: block; }
    #pr_head_src, #pr_foot_src, #pr_mark_src, #pr_text_src { display: none !important; }
    .pr_page { page-break-after: always; break-after: page; }
    .pr_page:last-child { page-break-after: auto; break-after: auto; }
    .pr_table thead th, .pr_table td.best, .pr_table tr.group td {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}