/* ============================================================================
 * restore-bg.css — 设计稿「背景/圆角/装饰图形」还原层
 *
 * 背景：设计稿 → Elementor 的自动转换器在部分容器上**丢掉了 background /
 *      background-image 声明**，导致这些组件在线上变成"透明"：
 *        · 深色卡片（如联系页 Direct Consultation）变成浅底 + 白字 → 几乎不可见
 *        · 筛选 chip 的选中态（深绿底白字）消失
 *        · 单选/复选控件的白色内点与对勾消失
 *      这些缺陷**不改变页面高度**，所以此前的高度 parity 门禁（±20px）全部
 *      通过、却漏掉了它们 —— 属于"看不见的残缺"。
 *
 * 生成方式：workflow/runs/launch-2026-09-27/compare/style-diff.mjs
 *      以 workflow/pilot/<page>/classmap.json（设计稿计算样式快照）为准，
 *      与线上每个 .<page>-tnc* 元素的 computed style 逐属性比对，
 *      仅对「设计有、线上没有」的属性生成覆盖规则（带 rgba 容差，避免
 *      0.9 vs 0.902 之类的假差异）。
 *
 * 已排除的假阳性（人工逐个看图确认）：
 *      · bl-tnc40 / pr-tnc57 / ct-tnc65 / ct-tnc68 —— 是 <select> 的包裹容器，
 *        线上用的是浏览器原生下拉箭头，视觉与设计一致，不需要补背景图；
 *      · pd-tnc36/39/42/45/48 —— 缩略图圆角由父容器 overflow 裁剪实现，
 *        线上视觉已圆角，computed 值 0px 不构成可见差异。
 * ========================================================================== */

/* ---- 深色卡片：联系页 Direct Consultation（渐变底） ---- */
.ct-tnc207{ background-image:linear-gradient(to right bottom, rgb(31, 58, 46), rgb(20, 38, 30)) !important; }

/* ---- 按钮：卡片内描边按钮 + 目录页 Modify Sets ---- */
.ct-tnc213{ background-color:rgba(255, 255, 255, 0.1) !important; }
.pr-tnc176{ background-color:rgb(180, 103, 74) !important; }

/* ---- 状态胶囊：常亮浅绿底 ---- */
.ct-tnc185{ background-color:rgb(236, 253, 245) !important; }
.pd-tnc65{ background-color:rgba(143, 169, 143, 0.2) !important; }

/* ---- 白色 chip：首页能力条 ---- */
.hn-tnc106{ background-color:rgb(255, 255, 255) !important; }
.hn-tnc107{ background-color:rgb(255, 255, 255) !important; }
.hn-tnc108{ background-color:rgb(255, 255, 255) !important; }

/* ---- 博客页筛选 chip：选中态深绿底 + 未选中白底 ---- */
.bl-tnc32{ background-color:rgb(31, 58, 46) !important; }
.bl-tnc33{ background-color:rgb(255, 255, 255) !important; }
.bl-tnc34{ background-color:rgb(255, 255, 255) !important; }
.bl-tnc35{ background-color:rgb(255, 255, 255) !important; }
.bl-tnc36{ background-color:rgb(255, 255, 255) !important; }
.bl-tnc37{ background-color:rgb(255, 255, 255) !important; }

/* ---- FEATURED BENCHMARK 标签：深绿底 ---- */
.bl-tnc45{ background-color:rgb(8, 36, 25) !important; }

/* ---- 表单控件：白色内点（radio）与白色对勾（checkbox） ---- */
.ct-tnc118, .pd-tnc231, .pd-tnc249{ background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e") !important; }
.ct-tnc151, .pd-tnc273, .pd-tnc276, .pd-tnc291, .pd-tnc294{ background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important; }
/* ---- 商品页主图：设计稿主图容器为 617x500（min-h 500px），主图应 w-full h-full
 *      object-cover 填满；转换器把设计稿里"图片加载失败时退化的 27px 行高"
 *      当成了真实高度写进 .pd-tnc51，导致上线后主图缩成 27x27 的小点。
 *      这里用 frame 的高度约束子图，恢复设计稿的铺满效果。 ---- */
/* 注意：页面自身的 data-apcm-css 是**内联 style**，与外部样式同权重时后者（内联）胜出，
 *       所以这里必须提高选择器权重（html body ...）才能压过它。 */
/* 设计稿主图容器是 min-h-[380px] sm:min-h-[500px] + 主图 w-full h-full object-cover；
 * 这里给内层图片容器固定高度，避免 height:100% 在 auto 高度父级上退化成"按原图比例"
 * 而把舞台撑成正方形（实测会变成 617x617，与设计稿 617x500 不符）。 */
html body .pd-tnc51{ width:100% !important; max-width:none !important; height:380px !important; min-height:0 !important; }
@media (min-width: 640px){ html body .pd-tnc51{ height:500px !important; } }
html body .pd-tnc51 img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
/* ---- 商品页状态胶囊「In Mass Production」左侧的 6px 圆点：
 *      设计稿是 <span class="w-1.5 h-1.5 rounded-full bg-[#2F5C46]"></span>，
 *      转换器丢了这个空 span（无文本），线上只剩文字。用 ::before 补回。 ---- */
html body .pd-tnc65{ position:relative !important; }
html body .pd-tnc65::before{
  content:"" !important; display:inline-block !important; flex:0 0 auto !important;
  width:6px !important; height:6px !important; border-radius:9999px !important;
  background:rgb(47,92,70) !important; margin-right:4px !important; order:-1 !important;
}

/* ---- 商品页 ASTM 认证胶囊的 verified 图标：
 *      设计稿是图标在**文字之前**（<span class="material-symbols">verified</span> ASTM...），
 *      转换器把图标做成了 ::after（跑到文字后面）。这里改用 ::before 并清掉旧的 ::after。 ---- */
html body .pd-tnc66::after{ content:none !important; }
html body .pd-tnc66::before{
  content:"verified" !important; font-family:"Material Symbols Outlined", sans-serif !important;
  font-size:14px !important; line-height:1 !important; color:rgb(47,92,70) !important;
  display:inline-flex !important; align-items:center !important; order:-1 !important; margin-right:4px !important;
}

/* ===== 下方为 wrap-fix（column 方向 flex 容器误开 wrap）===== */
.hn-tnc29{ flex-wrap:nowrap !important; }
.hn-tns2.e-parent{ flex-wrap:nowrap !important; }
.hn-tnc100{ flex-wrap:nowrap !important; }
.hn-tnc138{ flex-wrap:nowrap !important; }
.hn-tnc339{ flex-wrap:nowrap !important; }
.hn-tnc399{ flex-wrap:nowrap !important; }
.pr-tnc25{ flex-wrap:nowrap !important; }
.pr-tnc37{ flex-wrap:nowrap !important; }
.pr-tns3.e-parent{ flex-wrap:nowrap !important; }
.pr-tnc335{ flex-wrap:nowrap !important; }
.pr-tnc345{ flex-wrap:nowrap !important; }
.pr-tnc398{ flex-wrap:nowrap !important; }
.pd-tnc33{ flex-wrap:nowrap !important; }
.pd-tnc59{ flex-wrap:nowrap !important; }
.pd-tnc300{ flex-wrap:nowrap !important; }
.pd-tnc370{ flex-wrap:nowrap !important; }
.pd-tnc428{ flex-wrap:nowrap !important; }
.tnc101.e-child{ flex-wrap:nowrap !important; }
.tnc341.e-child{ flex-wrap:nowrap !important; }
.bl-tnc30{ flex-wrap:nowrap !important; }
.bl-tnc261{ flex-wrap:nowrap !important; }
.ct-tnc23{ flex-wrap:nowrap !important; }
.ct-tnc156{ flex-wrap:nowrap !important; }
.ct-tnc218{ flex-wrap:nowrap !important; }
.ct-tnc310{ flex-wrap:nowrap !important; }
.ct-tnc366{ flex-wrap:nowrap !important; }

/* ============================================================================
 * 纵向 flex 容器禁止换列（全局安全网）
 *
 * 根因：设计稿 → Elementor 的转换器把所有容器的 `flex-wrap` 都写成 wrap，
 *      并且通过 CSS 变量下发：
 *          .elementor-element:where(.e-con-full,.e-con){ flex-wrap:var(--flex-wrap) }
 *      CSS 里 **column + wrap = 「高度不够就换到下一列」**，于是第 2 个子节点
 *      被推到容器右侧外面（视觉上直接消失）。
 *
 *      实测 6 个设计页 × 4 个断点共 17 个容器中招（在 390 视口下最明显）。
 *      设计稿里这些容器本来就是 `flex-col`（不换行），所以正确修法是 nowrap。
 *
 * 为什么放在主题 CSS 而不是逐页 rwd 里：Elementor 的顶层容器（如首页
 *      .hn-tns6 / #9c2884a）在 classmap 里没有 tn-class，逐页生成器覆盖不到；
 *      这里用结构性选择器一次性兜住所有纵向 flex 容器。
 *      只在 `<=1023px` 生效 —— 桌面端（>=1024）设计稿本身就是横向排布，不受影响。
 * ========================================================================== */
@media (max-width: 1023px){
  body .elementor-element.e-con.e-flex,
  body .elementor-element.e-con-full.e-flex{
    --flex-wrap: nowrap;
  }
  body .elementor-element.e-con.e-flex[style*="--flex-direction:column"],
  body .elementor-element.e-con.e-flex[style*="--flex-direction: column"]{
    flex-wrap: nowrap !important;
  }
  /* 兜底：任何 computed 为 column 的 e-con（属性选择器覆盖不到内联变量的情况） */
  body .elementor-element.e-con.e-flex > .e-con.e-flex.e-con-full{ flex-wrap: inherit; }
}