/* ==========================================================================
   木箱木架包装专题 · 共享样式表
   --------------------------------------------------------------------------
   适用范围：/services/packaging/ 及其下全部子页（box-types / specs / ispm15 /
             on-site / process / quote / compare / cases / wooden-frame /
             materials / acceptance / area / certification / glossary / faq）
   加载顺序：main.css → animations.css → floating-contact.css → mobile-fix.css
             → pc-fix.css → packaging.css（本文件最后，权重兜底）
   命名空间：.mid  （页面骨架，与服务页/行业页同语言）
             .pkg-*（本专题独有组件，避免与 main.css 冲突）
   维护铁律：
     1) 本文件只新增/修改 .mid 与 .pkg-* 规则，禁止写全局裸标签选择器
        （main.css 有一条未收窄的 table{display:block}，裸 table 会让列宽算法失效）
     2) 表格类必须显式 display:table（见 .mid .matrix / .pkg-table）
     3) 只改一端时写在对应媒体查询里，不要整文件替换
   版本：?v=20261017a（改本文件必须同步升级所有引用页的版本号）
   ========================================================================== */

/* ---------- 1. 设计变量（scoped 到 .mid 与专题外置组件，不污染全局 :root） ----------
   ⚠️ 专题页的 .pkg-bread / .pkg-nav（见序号 3/4）与「相关专题」.pkg-cards 位于
   <main class="mid"> 之外，必须一并纳入令牌作用域；否则 var(--c-*) 解析失败
   （曾致二级导航选中项背景失效 → 白底白字「隐身」、卡片图标底色丢失）。
   .pkg-card 是 .pkg-cards 的子元素，自动继承，无需重复列出。 */
.mid,.pkg-bread,.pkg-nav,.pkg-cards{
  --c-navy:#0c1829; --c-navy2:#13233b; --c-orange:#ff6b35; --c-orange-d:#e25622;
  --c-ink:#1a2433; --c-gray:#5b6675; --c-line:#e7ebf0; --c-bg:#f6f8fb;
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--c-ink);
}
/* 动画类在本站由 script.js 统一接管，.mid 内直接呈现终态，避免首屏空白 */
.mid .fade-in-up,.mid .slide-in-left,.mid .slide-in-right,.mid .zoom-in,.mid [class*="fade"]{
  opacity:1!important;transform:none!important;animation:none!important;
}

/* ---------- 2. 页面骨架 ---------- */
.mid .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.mid section{padding:60px 0}
.mid section.alt{background:#fff}
.mid .hero{background:linear-gradient(135deg,var(--c-navy),var(--c-navy2));color:#fff;padding:64px 0}
.mid .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.mid .hero .tag{display:inline-block;background:rgba(255,107,53,.16);color:var(--c-orange);font-size:13px;font-weight:700;padding:6px 14px;border-radius:999px;margin-bottom:16px}
.mid .hero h1{font-size:40px;line-height:1.22;font-weight:800;margin-bottom:16px}
.mid .hero h1 em{color:var(--c-orange);font-style:normal}
.mid .hero p.lead{font-size:16.5px;color:#c4d0df;margin-bottom:22px}
.mid .hero .checks{list-style:none;display:grid;gap:11px;margin-bottom:24px;padding-left:0}
.mid .hero .checks li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:#e4ebf3}
.mid .hero .checks b{color:var(--c-orange)}
.mid .hero .acts{display:flex;gap:14px;flex-wrap:wrap}
.mid .btn1{background:var(--c-orange);color:#fff;font-weight:700;padding:13px 26px;border-radius:999px;font-size:15px;display:inline-block;text-decoration:none}
.mid .btn1:hover{background:var(--c-orange-d)}
.mid .btn2{background:rgba(255,255,255,.1);color:#fff;font-weight:600;padding:13px 26px;border-radius:999px;font-size:15px;border:1px solid rgba(255,255,255,.25);display:inline-block;text-decoration:none}
.mid .btn2:hover{background:rgba(255,255,255,.18)}
.mid .head{text-align:center;max-width:760px;margin:0 auto 36px}
.mid .head .kick{color:var(--c-orange);font-weight:700;font-size:13px;letter-spacing:2px}
.mid .head h2{font-size:28px;font-weight:800;margin:8px 0}
.mid .head p{color:var(--c-gray);font-size:15px}

/* ---------- 3. 面包屑 .pkg-bread ---------- */
.pkg-bread{background:#fff;border-bottom:1px solid var(--c-line);padding:12px 0;font-size:13.5px;color:var(--c-gray)}
.pkg-bread .wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pkg-bread a{color:var(--c-gray);text-decoration:none}
.pkg-bread a:hover{color:var(--c-orange)}
.pkg-bread .sep{color:#c3cbd6}
.pkg-bread .cur{color:var(--c-ink);font-weight:600}

/* ---------- 4. 专题二级导航 .pkg-nav（sticky 贴在主导航下方） ----------
   主导航 .header 为 position:sticky;top:0;z-index:1000，故本栏 top 取
   --header-height（桌面 70px / 移动 64px，随媒体查询自动适配），z-index 压低一档。 */
.pkg-nav{position:sticky;top:var(--header-height,70px);z-index:999;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--c-line);box-shadow:0 4px 16px rgba(12,24,41,.05)}
.pkg-nav .wrap{display:flex;gap:8px;padding:10px 24px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pkg-nav .wrap::-webkit-scrollbar{display:none}
.pkg-nav a{flex:none;font-size:13px;font-weight:600;color:var(--c-gray);text-decoration:none;padding:7px 13px;border:1px solid var(--c-line);border-radius:999px;background:#fff;transition:.18s;white-space:nowrap}
.pkg-nav a:hover{color:var(--c-orange);border-color:var(--c-orange)}
.pkg-nav a.cur{background:var(--c-navy);border-color:var(--c-navy);color:#fff}
.pkg-nav a.cur:hover{color:#fff}

/* ---------- 5. 专题卡片 .pkg-cards / .pkg-card ---------- */
.pkg-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pkg-cards--4{grid-template-columns:repeat(4,1fr)}
.pkg-cards--2{grid-template-columns:repeat(2,1fr)}
.pkg-card{display:block;text-decoration:none;background:#fff;border:1px solid var(--c-line);border-radius:16px;padding:22px 20px;box-shadow:0 10px 30px rgba(12,24,41,.06);transition:.2s;position:relative;overflow:hidden}
.pkg-card:hover{transform:translateY(-5px);border-color:var(--c-orange);box-shadow:0 16px 36px rgba(12,24,41,.12)}
.pkg-card .pci{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--c-orange),var(--c-orange-d));display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.pkg-card h3{font-size:16.5px;font-weight:800;color:var(--c-ink);margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pkg-card p{font-size:13.5px;color:var(--c-gray);line-height:1.75}
.pkg-card .go{margin-top:12px;font-size:12.5px;font-weight:700;color:var(--c-orange)}
.pkg-card .badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(255,107,53,.12);color:var(--c-orange-d);flex:none}
.pkg-card .badge--must{background:#fff1e8;color:#c2410c}
.pkg-card .badge--rec{background:#eef4ff;color:#3557c7}
.pkg-card .badge--opt{background:#f1f3f6;color:#5b6675}

/* ---------- 6. 数据表（.mid .matrix / .pkg-table） ----------
   必须显式 display:table：main.css 有未收窄的 table{display:block}，
   不写这一句 table-layout:fixed + colgroup 会整体失效、列宽不撑满。 */
.mid .matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--c-line);border-radius:14px;box-shadow:0 10px 30px rgba(12,24,41,.06);background:#fff}
.mid .matrix{display:table;width:100%;min-width:640px;table-layout:fixed;border-collapse:collapse}
.mid .matrix th{background:var(--c-navy);color:#fff;text-align:left;padding:14px 16px;font-size:13.5px;font-weight:700}
.mid .matrix td{padding:14px 16px;font-size:13.5px;color:var(--c-gray);border-bottom:1px solid var(--c-line);line-height:1.75;overflow-wrap:break-word}
.mid .matrix td:first-child{font-weight:700;color:var(--c-ink)}
.mid .matrix tr:last-child td{border-bottom:0}
.mid .matrix td.hl{background:#fff7f2;color:var(--c-orange-d);font-weight:700}
.mid .matrix th.hl{background:var(--c-orange-d)}
/* 三列选型对比表：中间列为推荐项 */
.pkg-cmp .matrix td:nth-child(2){background:#fff7f2}
.pkg-cmp .matrix th:nth-child(2){background:var(--c-orange-d)}

/* ---------- 7. 流程步骤 .mid .steps ---------- */
.mid .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.mid .step{background:#fff;border:1px solid var(--c-line);border-radius:16px;padding:22px 16px;text-align:center;box-shadow:0 10px 30px rgba(12,24,41,.08)}
.mid .step .n{width:38px;height:38px;border-radius:50%;background:var(--c-navy);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:14px}
.mid .step h4{font-size:15px;margin-bottom:6px}
.mid .step p{font-size:12.5px;color:var(--c-gray);line-height:1.7}
.mid .steps--6{grid-template-columns:repeat(6,1fr)}

/* ---------- 8. 特性卡 .mid .feat ---------- */
.mid .feat{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mid .fcard{background:#fff;border:1px solid var(--c-line);border-radius:16px;padding:26px 22px;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(12,24,41,.08);transition:.2s}
.mid .fcard:hover{transform:translateY(-6px);border-color:var(--c-orange)}
.mid .fcard .fic{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--c-orange),var(--c-orange-d));display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.mid .fcard h3{font-size:17px;margin-bottom:8px}
.mid .fcard p{flex:1;font-size:13.5px;color:var(--c-gray);line-height:1.75;overflow-wrap:break-word;word-break:break-word}
.mid .fcard .t{margin-top:12px;font-size:12.5px;color:var(--c-orange);font-weight:700}

/* ---------- 9. 信任条 / 数据条 ---------- */
.mid .trust{background:var(--c-navy2);color:#fff}
.mid .trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:20px 24px}
.mid .trust .it{text-align:center;border-right:1px solid rgba(255,255,255,.1);padding:0 8px}
.mid .trust .it:last-child{border-right:0}
.mid .trust .num{font-size:23px;font-weight:800;color:var(--c-orange);line-height:1.3}
.mid .trust .lab{font-size:12.5px;color:#aab8c9;margin-top:4px}
.mid .stats{background:var(--c-navy);color:#fff}
.mid .stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.mid .stats .num{font-size:25px;font-weight:800;color:var(--c-orange);line-height:1.3}
.mid .stats .lab{font-size:13px;color:#aab8c9;margin-top:6px}

/* ---------- 10. 键值说明 .pkg-kv ---------- */
.pkg-kv{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pkg-kv .kv{background:#fff;border:1px solid var(--c-line);border-radius:12px;padding:16px 18px}
.pkg-kv .kv b{display:block;font-size:14px;color:var(--c-ink);margin-bottom:6px}
.pkg-kv .kv span{font-size:13px;color:var(--c-gray);line-height:1.75}

/* ---------- 11. 正文段落 .pkg-text ---------- */
.pkg-text{max-width:860px;margin:0 auto}
.pkg-text h3{font-size:19px;font-weight:800;color:var(--c-ink);margin:0 0 12px}
.pkg-text h4{font-size:15.5px;font-weight:700;color:var(--c-ink);margin:22px 0 8px}
.pkg-text p{font-size:14.5px;color:#3c4655;line-height:1.95;margin:0 0 14px}
.pkg-text ul,.pkg-text ol{margin:0 0 14px;padding-left:22px}
.pkg-text li{font-size:14.5px;color:#3c4655;line-height:1.9;margin-bottom:6px}
.pkg-text b{color:var(--c-ink)}
.pkg-text a{color:var(--c-orange-d);font-weight:600}

/* ---------- 12. 提示框 .pkg-note ---------- */
.pkg-note{max-width:860px;margin:24px auto 0;background:#fff8f2;border:1px solid #ffd9bf;border-left:4px solid var(--c-orange);border-radius:12px;padding:16px 20px;font-size:13.5px;color:#8a4a22;line-height:1.85}
.pkg-note b{color:#c2410c}
.pkg-note--info{background:#f2f7ff;border-color:#cfe0ff;border-left-color:#3557c7;color:#2c3e63}
.pkg-note--info b{color:#3557c7}

/* ---------- 13. 验收清单 .pkg-check ---------- */
.pkg-check{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:960px;margin:0 auto}
.pkg-check .ci{background:#fff;border:1px solid var(--c-line);border-radius:12px;padding:16px 18px;display:flex;gap:12px;align-items:flex-start}
.pkg-check .ci .box{flex:none;width:22px;height:22px;border:2px solid var(--c-orange);border-radius:6px;margin-top:2px;position:relative}
.pkg-check .ci .box::after{content:"";position:absolute;left:5px;top:2px;width:6px;height:11px;border:solid var(--c-orange);border-width:0 2.5px 2.5px 0;transform:rotate(40deg)}
.pkg-check .ci b{display:block;font-size:14.5px;color:var(--c-ink);margin-bottom:4px}
.pkg-check .ci span{font-size:13px;color:var(--c-gray);line-height:1.75}

/* ---------- 14. 案例筛选 .pkg-filter ---------- */
.pkg-filter{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}
.pkg-filter button{font-family:inherit;font-size:13.5px;font-weight:600;color:var(--c-gray);background:#fff;border:1px solid var(--c-line);border-radius:999px;padding:8px 18px;cursor:pointer;transition:.18s}
.pkg-filter button:hover{color:var(--c-orange);border-color:var(--c-orange)}
.pkg-filter button.cur{background:var(--c-navy);border-color:var(--c-navy);color:#fff}
.pkg-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pkg-case{background:#fff;border:1px solid var(--c-line);border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(12,24,41,.07);transition:.2s;display:flex;flex-direction:column}
.pkg-case:hover{transform:translateY(-5px);border-color:var(--c-orange)}
.pkg-case .ph{background:linear-gradient(135deg,var(--c-navy),#1a2744);padding:30px 20px;text-align:center;color:#ff9a6b}
.pkg-case .cb{padding:18px 20px;flex:1;display:flex;flex-direction:column}
.pkg-case .cb .tagline{font-size:11.5px;font-weight:700;color:var(--c-orange-d);letter-spacing:.05em;margin-bottom:8px}
.pkg-case .cb b{font-size:15.5px;color:var(--c-ink);line-height:1.5;margin-bottom:8px}
.pkg-case .cb p{font-size:13px;color:var(--c-gray);line-height:1.75;flex:1}
.pkg-case .cb .go{font-size:12.5px;font-weight:700;color:var(--c-orange);margin-top:12px;text-decoration:none}
.pkg-case .cb .go:hover{text-decoration:underline}
.pkg-case[hidden]{display:none}

/* ---------- 15. 术语库 .pkg-gloss ---------- */
.pkg-gloss-search{max-width:520px;margin:0 auto 24px;position:relative}
.pkg-gloss-search input{width:100%;box-sizing:border-box;font-family:inherit;font-size:14.5px;padding:13px 18px;border:1px solid var(--c-line);border-radius:999px;background:#fff;box-shadow:0 6px 18px rgba(12,24,41,.05)}
.pkg-gloss-search input:focus{outline:none;border-color:var(--c-orange)}
.pkg-gloss-letters{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.pkg-gloss-letters a{font-size:12.5px;font-weight:700;color:var(--c-gray);text-decoration:none;padding:5px 10px;border:1px solid var(--c-line);border-radius:8px;background:#fff}
.pkg-gloss-letters a:hover{color:var(--c-orange);border-color:var(--c-orange)}
.pkg-gloss{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.pkg-gloss .g{border-bottom:1px solid var(--c-line);padding-bottom:12px}
.pkg-gloss .g:last-child{border-bottom:0}
.pkg-gloss .g dt{font-size:15px;font-weight:800;color:var(--c-ink);margin-bottom:6px}
.pkg-gloss .g dd{margin:0;font-size:13.5px;color:var(--c-gray);line-height:1.85}
.pkg-gloss .g[hidden]{display:none}
.pkg-gloss-empty{display:none;text-align:center;color:var(--c-gray);font-size:14px;padding:24px}
.pkg-gloss-empty.show{display:block}

/* ---------- 16. 参数化询价表单 .pkg-form ---------- */
.pkg-form{max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--c-line);border-radius:18px;padding:32px;box-shadow:0 14px 40px rgba(12,24,41,.08)}
.pkg-form .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pkg-form label{display:block;font-size:13px;color:var(--c-gray);margin-bottom:6px;font-weight:600}
.pkg-form label .req{color:var(--c-orange-d)}
.pkg-form input,.pkg-form select,.pkg-form textarea{width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;padding:11px 14px;border:1px solid #d1d5db;border-radius:10px;background:#fff;color:var(--c-ink)}
.pkg-form input:focus,.pkg-form select:focus,.pkg-form textarea:focus{outline:none;border-color:var(--c-orange);box-shadow:0 0 0 3px rgba(255,107,53,.14)}
.pkg-form textarea{resize:vertical;min-height:96px}
.pkg-form .full{grid-column:1 / -1}
.pkg-form .fsubmit{margin-top:22px}
.pkg-form .fsubmit button{width:100%;background:var(--c-orange);color:#fff;border:0;border-radius:12px;padding:14px;font-size:15.5px;font-weight:800;cursor:pointer;font-family:inherit;transition:.18s}
.pkg-form .fsubmit button:hover{background:var(--c-orange-d)}
.pkg-form .fsubmit button:disabled{opacity:.65;cursor:not-allowed}
.pkg-form .ok{display:none;margin-top:14px;text-align:center;color:#0f9b7c;font-size:14px;font-weight:600}
.pkg-form .ok.show{display:block}
.pkg-form .hint{font-size:12.5px;color:var(--c-gray);margin-top:8px;line-height:1.7}

/* ---------- 17. 转化路径图 .pkg-flow ---------- */
.pkg-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:stretch}
.pkg-flow .fs{background:#fff;border:1px solid var(--c-line);border-radius:14px;padding:18px 16px;text-align:center;position:relative;box-shadow:0 8px 24px rgba(12,24,41,.06)}
.pkg-flow .fs .st{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--c-orange);margin-bottom:8px}
.pkg-flow .fs b{display:block;font-size:15px;color:var(--c-ink);margin-bottom:6px}
.pkg-flow .fs span{font-size:12.5px;color:var(--c-gray);line-height:1.7}
.pkg-flow .fs::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:#ffb08c;font-size:18px;font-weight:800;z-index:2}
.pkg-flow .fs:last-child::after{display:none}
.pkg-flow .fs.hot{border-color:var(--c-orange);background:#fff8f2}
.pkg-flow .fs.hot b{color:var(--c-orange-d)}

/* ---------- 18. FAQ（沿用 faq-gen 视觉） ---------- */
.faq-gen{padding:64px 0;background:var(--c-bg)}
.faq-gen .container{max-width:1200px;margin:0 auto;padding:0 20px}
.faq-gen .section-header{text-align:center;margin-bottom:36px}
.faq-gen .section-subtitle{display:inline-block;font-size:.85rem;font-weight:600;letter-spacing:.08em;color:#ff6b35;background:rgba(255,107,53,.1);padding:6px 14px;border-radius:999px;margin-bottom:14px}
.faq-gen .section-header h2{font-size:1.9rem;font-weight:800;color:#0c1829;margin:0}
.faq-gen .faq-list{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-gen .faq-gen-item{background:#fff;border:1px solid #e6eaf0;border-radius:14px;overflow:hidden;transition:box-shadow .25s ease,border-color .25s ease}
.faq-gen .faq-gen-item.open{box-shadow:0 8px 24px rgba(12,24,41,.08);border-color:#ff6b35}
.faq-gen .faq-gen-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;font-size:1.02rem;font-weight:600;color:#0c1829;line-height:1.6}
.faq-gen .faq-gen-q:hover{color:#ff6b35}
.faq-gen .faq-gen-q span{flex:1}
.faq-gen .faq-gen-ic{position:relative;flex:0 0 18px;width:18px;height:18px}
.faq-gen .faq-gen-ic::before,.faq-gen .faq-gen-ic::after{content:"";position:absolute;background:#ff6b35;transition:transform .25s ease;border-radius:2px}
.faq-gen .faq-gen-ic::before{top:8px;left:0;width:18px;height:2px}
.faq-gen .faq-gen-ic::after{top:0;left:8px;width:2px;height:18px}
.faq-gen .faq-gen-item.open .faq-gen-ic::after{transform:scaleY(0)}
.faq-gen .faq-gen-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-gen .faq-gen-item.open .faq-gen-a{max-height:900px}
.faq-gen .faq-gen-a p{margin:0;padding:0 22px 20px;color:#5b6675;font-size:.97rem;line-height:1.9}
.faq-gen .faq-gen-a p+p{padding-top:0}
@media (prefers-reduced-motion:reduce){.faq-gen .faq-gen-a,.faq-gen .faq-gen-ic::before,.faq-gen .faq-gen-ic::after{transition:none}}
@media (max-width:768px){.faq-gen{padding:44px 0}.faq-gen .section-header h2{font-size:1.5rem}.faq-gen .faq-gen-q{font-size:1rem;padding:16px}.faq-gen .faq-gen-a p{padding:0 16px 16px}}

/* ---------- 19. 服务页内嵌询价表单（复用服务页视觉） ---------- */
.service-quote-section{background:#f8fafc;border-top:1px solid var(--c-line);padding:56px 0}
.service-quote-section .sq-h{text-align:center;font-size:26px;font-weight:800;color:#0c1829;margin:0 0 8px}
.service-quote-section .sq-p{text-align:center;font-size:14px;color:#6b7280;margin:0 0 28px}
#service-quote-form{max-width:760px;margin:0 auto;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:28px;box-shadow:0 4px 16px rgba(15,23,42,.06)}
#service-quote-form .sq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#service-quote-form label{display:block;font-size:13px;color:#6b7280;margin-bottom:6px}
#service-quote-form label .req{color:#e25622}
#service-quote-form input,#service-quote-form textarea{width:100%;box-sizing:border-box;padding:11px 14px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;font-family:inherit}
#service-quote-form textarea{resize:vertical}
#service-quote-form .sq-btn{width:100%;background:#e25622;color:#fff;border:none;padding:13px;border-radius:6px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:18px}
#service-quote-form .sq-btn:hover{background:#c2410c}
#service-quote-form .sq-ok{display:none;text-align:center;color:#00a37e;font-size:14px;margin:12px 0 0}
#service-quote-form .sq-ok.show{display:block}

/* ---------- 20. CTA / 评价 ---------- */
.mid .cta{background:linear-gradient(120deg,var(--c-orange),var(--c-orange-d));color:#fff;text-align:center;padding:56px 24px}
.mid .cta h2{font-size:28px;font-weight:800;margin-bottom:10px}
.mid .cta p{font-size:15.5px;margin-bottom:20px;opacity:.95}
.mid .cta a.btn{background:#fff;color:var(--c-orange-d);font-weight:700;padding:13px 28px;border-radius:999px;display:inline-block;font-size:15px;text-decoration:none}
.mid .cta a.btn:hover{transform:translateY(-2px)}
.mid .cta .wx{margin-top:22px;font-size:14px}
.reviews-inline{padding:64px 0;background:#fff}
.reviews-inline .section-header{text-align:center;margin-bottom:36px}
.reviews-inline .section-subtitle{display:inline-block;font-size:.85rem;font-weight:600;letter-spacing:.08em;color:#ff6b35;background:rgba(255,107,53,.1);padding:6px 14px;border-radius:999px;margin-bottom:14px}
.reviews-inline .section-header h2{font-size:1.9rem;font-weight:800;color:#0c1829;margin:0}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review-card{background:#fff;border:1px solid #e7ebf0;border-radius:16px;padding:26px 24px;box-shadow:0 10px 30px rgba(12,24,41,.06)}
.review-stars{color:#ffb400;letter-spacing:3px;font-size:15px;margin-bottom:12px}
.review-text{font-size:14.5px;color:#3c4655;line-height:1.9;margin:0 0 16px}
.review-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #eef1f5;padding-top:14px}
.review-company{font-size:13px;font-weight:700;color:#0c1829}
.review-tag{font-size:12px;color:#ff6b35;background:rgba(255,107,53,.1);padding:3px 10px;border-radius:999px;flex:none}

/* ---------- 22. 页脚专题栏（仅本专题子页加载，故可安全改列数） ----------
   站点页脚默认 4 列（.footer-grid，1.5fr 1fr 1fr 1fr）；本专题子页多一个
   「木箱包装专题」栏，需要 5 列。用 .footer 前缀把权重抬到 (0,2,0)，
   既能压过 main.css 的 4 列，也能在移动端压过 mobile-fix.css 的 2 列回落，
   不会影响站内其他页面（它们不加载本文件）。 */
/* 用 .footer .footer-grid.footer-grid--pkg（特异性 0,3,0）+ !important 压过
   pc-fix.css 的 .footer .footer-grid（基类，带 !important 4 列）与 mobile-fix.css 回落；
   本文件仅包装专题页加载，不影响站内其他页面。 */
.footer .footer-grid.footer-grid--pkg{grid-template-columns:1.35fr .92fr .92fr .92fr 1.12fr !important}
@media(max-width:900px){.footer .footer-grid.footer-grid--pkg{grid-template-columns:1fr 1fr !important;gap:24px !important}}
@media(max-width:560px){.footer .footer-grid.footer-grid--pkg{grid-template-columns:1fr !important;justify-items:start;text-align:left}}

/* ---------- 21. 响应式（≤900 / ≤560） ---------- */
@media(max-width:900px){
  .mid section{padding:44px 0}
  .mid .hero{padding:44px 0}
  .mid .hero .wrap{grid-template-columns:1fr;gap:28px}
  .mid .hero h1{font-size:30px}
  .mid .hero p.lead{font-size:15px}
  .mid .trust .wrap{grid-template-columns:repeat(2,1fr);gap:16px 0}
  .mid .trust .it{border-right:0}
  .mid .feat{grid-template-columns:repeat(2,1fr)}
  .mid .steps{grid-template-columns:1fr;gap:12px}
  .mid .steps--6{grid-template-columns:repeat(2,1fr)}
  .mid .stats .wrap{grid-template-columns:repeat(2,1fr);gap:22px 0}
  .mid .head h2{font-size:23px}
  .pkg-cards,.pkg-cards--4{grid-template-columns:repeat(2,1fr)}
  .pkg-cases{grid-template-columns:repeat(2,1fr)}
  .pkg-flow{grid-template-columns:1fr;gap:10px}
  .pkg-flow .fs::after{content:"↓";right:50%;top:auto;bottom:-16px;transform:translateX(50%)}
  .pkg-check{grid-template-columns:1fr}
  .pkg-kv{grid-template-columns:1fr}
  .review-grid{grid-template-columns:1fr}
  .pkg-form{padding:22px}
  .pkg-form .fgrid{grid-template-columns:1fr}
  #service-quote-form .sq-grid{grid-template-columns:1fr}
  .pkg-bread .wrap{padding:0 16px}
  .pkg-nav .wrap{padding:10px 16px}
}
@media(max-width:560px){
  .mid .wrap{padding:0 16px}
  .mid .hero h1{font-size:26px}
  .mid .hero .acts{flex-direction:column}
  .mid .hero .acts .btn1,.mid .hero .acts .btn2{text-align:center}
  .mid .feat{grid-template-columns:1fr}
  .mid .head h2{font-size:21px}
  .mid .cta h2{font-size:23px}
  .pkg-cards,.pkg-cards--4,.pkg-cards--2{grid-template-columns:1fr}
  .pkg-cases{grid-template-columns:1fr}
  .pkg-steps--6,.mid .steps--6{grid-template-columns:1fr}
  .pkg-matrix td,.mid .matrix th{padding:12px}
}

/* ---------- 23. 紧凑化（纵向节奏收紧 + 移动端内容删减） ----------
   实测依据（measure_blocks.js）：各页 PC 全高 5900–7100px，其中约 3800px
   是每页重复的骨架（hero 577 / trust 224 / feat 536 / 询价 551 / cta 312 /
   评价 515 / FAQ 739 / 页脚 411），真正内容仅 2000–3000px。
   做法：① 全端统一收紧 section padding、卡片 padding、行高、列表间距（约 -30%）；
        ② ≤900px 再降一档；
        ③ ≤768px 做内容删减：stats 与 trust 口径重复故隐藏、评价保留前 2 条、
           箱型类卡片保留前 6 张（其余移动端收起，PC 不受影响）。
   本段置于文件末尾，靠源码顺序覆盖上方同名规则；媒体查询内同理。 */

/* —— 全端：纵向节奏收紧 —— */
.mid section{padding:40px 0}
.mid .hero{padding:44px 0}
.mid .hero p.lead{margin-bottom:16px}
.mid .hero .checks{gap:8px;margin-bottom:18px}
.mid .head{margin:0 auto 26px}
.mid .feat{gap:16px}
.mid .fcard{padding:20px 18px}
.mid .fcard .fic{width:46px;height:46px;margin:0 auto 10px}
.mid .fcard .t{margin-top:10px}
.mid .trust .wrap{padding:16px 24px}
.mid .trust .num{font-size:21px}
.mid .stats .num{font-size:22px}
.mid .stats .lab{font-size:12.5px;margin-top:4px}
.mid .step{padding:18px 14px}
.mid .step .n{width:34px;height:34px;margin:0 auto 8px}
.mid .matrix th,.mid .matrix td{padding:11px 14px;line-height:1.7}
.pkg-cards{gap:16px}
.pkg-card{padding:18px}
.pkg-card .pci{width:40px;height:40px;margin-bottom:10px}
.pkg-card .go{margin-top:10px}
.pkg-kv{gap:12px}
.pkg-kv .kv{padding:14px 16px}
.pkg-text p{line-height:1.8;margin:0 0 12px}
.pkg-text li{line-height:1.75;margin-bottom:4px}
.pkg-text h4{margin:18px 0 6px}
.pkg-note{margin:18px auto 0;padding:14px 18px;line-height:1.8}
.pkg-check{gap:12px}
.pkg-check .ci{padding:14px 16px}
.pkg-case .ph{padding:22px 20px}
.pkg-case .cb{padding:16px 18px}
.pkg-case .cb .go{margin-top:10px}
.pkg-gloss{gap:10px}
.pkg-gloss .g{padding-bottom:10px}
.pkg-gloss .g dd{line-height:1.75}
.pkg-gloss-search{margin:0 auto 18px}
.pkg-gloss-letters{margin-bottom:18px}
.pkg-form{padding:26px}
.pkg-form .fsubmit{margin-top:18px}
.pkg-flow .fs{padding:16px 14px}
.pkg-filter{margin-bottom:22px}
.faq-gen{padding:48px 0}
.faq-gen .section-header{margin-bottom:26px}
.faq-gen .faq-list{gap:10px}
.faq-gen .faq-gen-q{padding:16px 18px}
.faq-gen .faq-gen-a p{padding:0 18px 16px;line-height:1.8}
.service-quote-section{padding:42px 0}
.service-quote-section .sq-p{margin:0 0 22px}
#service-quote-form{padding:22px}
.mid .cta{padding:42px 24px}
.mid .cta p{margin-bottom:16px}
.mid .cta .wx{margin-top:16px}
.reviews-inline{padding:46px 0}
.reviews-inline .section-header{margin-bottom:26px}
.review-grid{gap:16px}
.review-card{padding:20px}
.review-text{line-height:1.8;margin:0 0 12px}
.review-meta{padding-top:12px}

/* —— ≤900px：在收紧基础上再降一档 —— */
@media(max-width:900px){
  .mid section{padding:30px 0}
  .mid .hero{padding:32px 0}
  .mid .head{margin:0 auto 20px}
  .faq-gen{padding:36px 0}
  .reviews-inline{padding:36px 0}
  .service-quote-section{padding:34px 0}
  .mid .cta{padding:34px 20px}
}

/* —— ≤768px：移动端内容删减 —— */
@media(max-width:768px){
  /* stats 统计条与 trust 信任条口径重复，移动端隐藏（PC 保留） */
  .mid .stats{display:none}
  /* 评价保留前 2 条 */
  .review-grid .review-card:nth-child(n+3){display:none}
  /* 箱型/要点类卡片保留前 6 张，其余移动端收起 */
  .pkg-cards .pkg-card:nth-child(n+7){display:none}
}

/* —— 紧凑化加码：长列表双列 + padding 再降一档 —— */
@media(min-width:900px){
  /* 术语库：单列长列表改双列（定义类内容适合双列，纵向占用约减半） */
  .pkg-gloss{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;max-width:1100px}
}
@media(min-width:1024px){
  /* FAQ：宽屏双列；align-items:start 让展开项不拉伸同行，保持手风琴观感 */
  .faq-gen .faq-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;max-width:1100px;align-items:start}
}
.mid section{padding:34px 0}
.mid .hero{padding:38px 0}
.pkg-card{padding:16px}
.review-card{padding:18px}
.review-text{line-height:1.75}
@media(max-width:900px){
  .mid section{padding:26px 0}
  .mid .hero{padding:28px 0}
}

/* ===================== 车间实拍画廊（P0） ===================== */
.pkg-showcase{padding:54px 0;background:#fff}
.pkg-showcase .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.pkg-shot{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:14px;background:#0c1829;box-shadow:0 8px 22px rgba(12,24,41,.10);text-decoration:none}
.pkg-shot picture{display:contents}
.pkg-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.pkg-shot:hover img{transform:scale(1.06)}
.pkg-shot .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:#fff;font-size:14px;font-weight:600;background:linear-gradient(180deg,rgba(8,16,28,0),rgba(8,16,28,.85))}
.pkg-lightbox{position:fixed;inset:0;background:rgba(8,14,24,.93);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:10000;padding:20px}
.pkg-lightbox.open{display:flex}
.pkg-lightbox img{max-width:92vw;max-height:78vh;border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.pkg-lightbox .lb-cap{color:#e6edf5;margin-top:14px;font-size:15px;text-align:center;max-width:90vw}
.pkg-lightbox .lb-close{position:absolute;top:16px;right:22px;color:#fff;font-size:36px;line-height:1;cursor:pointer}
.pkg-lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:46px;cursor:pointer;padding:12px 16px;user-select:none;opacity:.85}
.pkg-lightbox .lb-nav:hover{opacity:1}
.pkg-lightbox .lb-prev{left:10px}
.pkg-lightbox .lb-next{right:10px}
@media(max-width:768px){
  .pkg-showcase{padding:36px 0}
  .pkg-showcase .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .pkg-lightbox .lb-nav{font-size:34px;padding:8px}
}
