/* ==========================================================================
   CHINA TOP CABLE — Porto 覆盖层 "Industrial"（批次 B）
   取代 tech-blue.css：方案 A 科技蓝 → 方案 B 工业硬朗
   回滚：functions.php 里把 ctc-industrial 换回 ctc-tech-blue 的 enqueue
   --------------------------------------------------------------------------
   WCAG AA 约束（实测比值）：
     #ff6a13 on #ffffff = 2.87:1  ❌ 亮橙禁止做底／做白底文字
     #c74a00 on #ffffff = 4.76:1  ✅ 白底正文链接专用
     #c74a00 on #ffffff = 4.76:1  ✅ 白字 on 深橙底（同一比值，对称）
     #a83e00 on #ffffff = 6.26:1  ✅ 白字 on CTA hover 底
     #ffffff on #1a1e23 = 15.4:1  ✅
     #ff6a13 on #1a1e23 = 5.99:1  （旧方案，2026-09-29 停用，见下）
   --------------------------------------------------------------------------
   2026-09-29 调整：实心 CTA 从「亮橙 #ff6a13 + 深字」改为「深橙 #c74a00 + 白字」
     原因：#ff6a13 配白字仅 2.87:1（不达 AA），配深字虽 5.99:1 达标，
           但深字压饱和亮橙视觉发闷、像警示牌（andy 反馈"看着不舒服"）。
           #c74a00 配白字 4.76:1 同样达 AA，深一档的橙更贴工业硬朗。
     分工（全站统一）：
       亮橙 #ff6a13 → 只做装饰：描边、图标、下划线、促销角标、hover 光点
       深橙 #c74a00 → 凡「承载文字的实心块」一律用它 + 白字
     回滚：把下方 --ctc-cta / --ctc-cta-hover 改回 var(--ctc-orange) /
           var(--ctc-orange-deep)，并把按钮 color 改回 var(--ctc-steel-900)。
   ========================================================================== */

:root {
  /* 工业硬朗 token（与 ctc-industrial.css 设计系统对齐） */
  --ctc-orange:      #ff6a13;   /* 装饰专用（描边/图标/角标/hover 光点）；不做实心底 */
  --ctc-orange-deep: #e05500;   /* 亮橙 hover（装饰件用） */
  --ctc-orange-text: #c74a00;   /* 白底文字/链接专用（AA 4.76:1） */
  --ctc-cta:         #c74a00;   /* 实心 CTA 底，配白字 4.76:1（2026-09-29 新增） */
  --ctc-cta-hover:   #a83e00;   /* CTA hover，配白字 6.26:1 */
  --ctc-orange-050:  #fff1e8;
  --ctc-orange-100:  #ffe2cc;

  --ctc-steel-950: #15181d;
  --ctc-steel-900: #1a1e23;
  --ctc-steel-800: #20252b;
  --ctc-steel-700: #2b3138;

  --ctc-ink:   #1d2329;
  --ctc-muted: #4a5460;
  --ctc-meta:  #68737f;
  --ctc-line:  #d3d8de;
  --ctc-soft:  #f4f5f7;

  --ctc-radius: 3px;            /* 工业风：近直角（原来是 8px / 999px 胶囊） */

  /* 兼容 9/24 遗留变量名（inquiry-form.css / tech-blue.css 曾使用）
     指向工业色，避免旧文件引用时变量为空 */
  --ctc-blue:  #c74a00;   /* 旧「科技蓝」变量位，现为白底安全橙（AA 4.76:1） */
  --ctc-cyan:  #ff6a13;
  --ctc-ink:   #1d2329;
  --ctc-muted: #4a5460;
  --ctc-line:  #d3d8de;
  --ctc-soft:  #f4f5f7;
  --ctc-blue-dark: #e05500;

  /* Porto 角标变量（Porto 把变量定义在 .onhot/.onsale 自身，需同选择器覆盖） */
  --porto-hot-color:           #ff6a13;
  --porto-hot-color-inverse:   #1a1e23;
  --porto-sale-color:          #20252b;
  --porto-sale-color-inverse:  #ffffff;
}

/* --------------------------------------------------------------------------
   0. 容器统一 1320px（≥1340px）
   --------------------------------------------------------------------------
   为什么不用 Porto 的 container-width 选项：
   实测该选项在 1140~1359 区间会把 Bootstrap 的 xl 断点推到
   (container-width + gutter) = 1350px，导致 1200~1349px 视口的容器
   反而从 1140 缩到 960px（净倒退）。故改用纯 CSS 覆盖。

   为什么门槛是 1340 而不是 1200（2026-09-28 修正）：
   Porto 的 ul.products-container 用的是 Bootstrap3 时代的 margin:-15px gutter，
   而它的父级 .vc_column_container 只给 12px 内边距 → 净 -3px。
   当容器宽度 == 视口宽度（即没有左右留白）时，这 3px 就顶出屏幕，
   1280px 视口下 documentElement.scrollWidth = 1283 → 出现横向滚动条。
   容器只要留 ≥3px 边距就不越界，故把生效门槛抬到 1340px
   （1340-1320)/2 = 10px 留白，安全；1281~1339 沿用 Bootstrap 默认 1140。
   -------------------------------------------------------------------------- */
@media (min-width: 1340px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1320px;
  }
}

/* --------------------------------------------------------------------------
   1. 面包屑条：科技蓝浅底 → 工业浅钢灰
   -------------------------------------------------------------------------- */
body .page-top {
  background: var(--ctc-soft) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--ctc-line) !important;
}
body .page-top .page-title { color: var(--ctc-ink) !important; }
body .page-top .breadcrumbs-wrap,
body .page-top .yoast-breadcrumbs,
body .page-top ul.breadcrumb > li,
body .page-top .product-nav .product-link { color: var(--ctc-meta) !important; }
body .page-top .breadcrumbs-wrap a,
body .page-top .yoast-breadcrumbs a {
  color: var(--ctc-orange-text) !important;
  text-decoration: none;
}
body .page-top .sort-source > li.active > a { color: var(--ctc-orange-text) !important; }

/* --------------------------------------------------------------------------
   2. 侧栏：老式下划线蓝链接 → 克制的钢灰 + 橙 hover
   -------------------------------------------------------------------------- */
.sidebar .widget ul li a,
.sidebar .widget_product_categories li a,
.sidebar .widget_layered_nav li a,
.sidebar .woocommerce-widget-layered-nav-list a {
  color: var(--ctc-muted);
  text-decoration: none;
  transition: color .18s ease-in-out;
}
.sidebar .widget ul li a:hover,
.sidebar .widget_product_categories li a:hover,
.sidebar .widget_layered_nav li a:hover { color: var(--ctc-orange-text); }
.sidebar .widget-title,
.sidebar .widgettitle { color: var(--ctc-ink); }
.sidebar .widget-title:after { border-top-color: var(--ctc-orange) !important; }

/* --------------------------------------------------------------------------
   3. 按钮：胶囊 → 近直角；实心 CTA 深橙底 + 白字（2026-09-29 调整）
   --------------------------------------------------------------------------
   见文件头「2026-09-29 调整」。亮橙只做装饰，承载文字的实心块统一深橙 + 白字。
   -------------------------------------------------------------------------- */
.btn, .button, input[type="submit"], button[type="submit"] { border-radius: var(--ctc-radius); }
.single_add_to_cart_button.button,
a.add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.btn-primary { border-radius: var(--ctc-radius); }

a.add_to_cart_button,
.single_add_to_cart_button.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--ctc-cta) !important;
  border-color: var(--ctc-cta) !important;
  color: #fff !important;                 /* 白字：4.76:1 达 WCAG AA */
  font-weight: 600;
  box-shadow: none;
}
a.add_to_cart_button:hover,
.single_add_to_cart_button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--ctc-cta-hover) !important;
  border-color: var(--ctc-cta-hover) !important;
  color: #fff !important;
}

/* 体量统一（2026-09-29）：实测产品卡按钮 12px/36px、详情页 14px/48px、
   Send Enquiry 15px/47px，三者体量不齐；且前两者被主题设成全大写。
   ⚠️ 高度由主题的固定 height 决定（产品卡 .add-links .button 的 height:36px、
      详情页 .single_add_to_cart_button 的 height:3rem!important），
      不是 line-height 撑的 —— 两者都必须显式覆盖 height 才动得了。
   目标：产品卡 13px/40px、详情页 15px/47px（与询价卡 Send Enquiry 等高）。
   用 CDP 的 CSS.getMatchedStylesForNode 才能看出这条，纯读 getComputedStyle 会误判。 */
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product .button {
  font-size: 13px !important;
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 20px !important;
  text-transform: none !important;
  letter-spacing: .2px;
}
.single_add_to_cart_button.button {
  font-size: 15px !important;
  height: 47px !important;
  line-height: 47px !important;
  text-transform: none !important;
  letter-spacing: .2px;
}

/* --------------------------------------------------------------------------
   4. 促销角标：科技蓝 → 工业橙 / 钢灰
   -------------------------------------------------------------------------- */
.post-date, .onhot { --porto-hot-color: #ff6a13; --porto-hot-color-inverse: #1a1e23; }
.onsale { --porto-sale-color: #20252b; --porto-sale-color-inverse: #ffffff; }
.onsale,
.woocommerce span.onsale,
.product-image .onsale {
  background: var(--ctc-orange) !important;
  color: var(--ctc-steel-900) !important;
}

/* --------------------------------------------------------------------------
   5. 细节：链接 hover、widget 分隔线、星级、分页
   -------------------------------------------------------------------------- */
a:hover { color: var(--ctc-orange-text); }
.widget-title { border-bottom: 1px solid var(--ctc-line); }
.woocommerce .star-rating:before,
.woocommerce .star-rating span:before { color: var(--ctc-orange-text); }
.woocommerce-pagination .page-numbers:hover,
.woocommerce-pagination li .page-numbers:hover {
  background: var(--ctc-orange);
  color: var(--ctc-steel-900);
}

/* --------------------------------------------------------------------------
   6. 产品卡标题：去下划线，hover 橙
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product h2 a,
.woocommerce ul.products li.product h3 a,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  text-decoration: none !important;
  transition: color .18s ease-in-out;
}
.woocommerce ul.products li.product h2 a:hover,
.woocommerce ul.products li.product h3 a:hover,
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover {
  color: var(--ctc-orange-text) !important;
}

/* --------------------------------------------------------------------------
   7. 商品页条款指引（2026-09-29）
   --------------------------------------------------------------------------
   取代原四段块（Why choose us / Samples & Shipping / Package / Warranty）。
   那不是「可省则省」——它 1,744 字符 × 596 页逐字重复，还与 /how-to-order/
   的质保口径冲突（1 year vs 6–12 months）。现改为一行带链接的指引。

   ⚠️ 颜色与下划线**必须显式声明**：porto/css/bootstrap.css 里有全局
      a{color:#0d6efd;text-decoration:underline} → 不覆盖会出现旧蓝 + 下划线
      （9/29 产品名下方那条蓝线就是这个规则，同类坑）。
      白底链接用 --ctc-orange-text(#c74a00)，实测 4.76:1 达 WCAG AA。
   回滚：删掉本节 + 还原 functions.php 的 woo_more_description()。
   -------------------------------------------------------------------------- */
.single-product .ctc-terms-note,
.ctc-terms-note {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--ctc-line);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ctc-muted);
}
.ctc-terms-note a {
  color: var(--ctc-orange-text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: border-color .18s ease-in-out;
}
.ctc-terms-note a:hover,
.ctc-terms-note a:focus {
  color: var(--ctc-orange-deep);
  border-bottom-color: transparent;
}

/* --------------------------------------------------------------------------
   8. 商品详情页：容器对齐 + 正文阅读宽度（2026-09-29）
   --------------------------------------------------------------------------
   背景（本机真浏览器实测，1440 / 1920 / 2560 三档视口）：
     主题选项 product-single-layout 原为 widewidth → Porto 的 porto_is_wide_layout()
     命中，详情页内容走 .container-fluid，宽度 = 视口 − 60px
     （实测 1380 / 1860 / 2500）；而首页与 /shop/ 恒为 1296、页头恒为 1320
     → 高分屏上「头窄身子宽」：商品主图被撑到 1028px、右栏信息区 2500px、
       描述正文一行约 180 字符（舒适区间 60–90）。
     已把该选项改回 fullwidth（Porto 改走 .container，套用第 0 节的 1320 上限）。
     回滚快照：/home/wwwroot/fixbackups/ctc-c43-detail-width-*/porto_settings.json

   本节三件事：
     8.1 防回归 —— 即便选项哪天又被改回 widewidth，详情页也不会突破 1320；
     8.2 阅读宽度 —— 正文限宽 880px（约 120 字符/行），并把 14px / #777 / 10px
         段落间距换成更适合阅读的一档（15px / 1.8 / 14px）。
         #777 对白底仅 4.48:1（踩线），换 --ctc-muted #4a5460 达 8.0:1。
     8.3 规格表格 —— 596 个商品里 136 个正文含 <table>（共 143 张）：
         56 张靠 border="1" 属性出老式 inset 边框、63 张 class="aliDataTable"、
         42 张无 class。统一改成细线表格 + 收内边距。
         另：仅 2 个页面残留内联 'Times New Roman' / font-size:medium
         （老 Alibaba 导入痕迹），1 个页面（ID 2776）用「td>div>div」两层结构
         塞了空白占位 div 把行高撑到 ~60px —— 已核实该占位 div 首段均为空白，
         隐藏无内容损失。
   表格**不限宽**（列多，需要宽度），只保证不溢出容器。
   回滚：删掉本节即可（全部为增量覆盖，不依赖其他节）。
   -------------------------------------------------------------------------- */

/* 8.1 防回归：详情页内的 fluid 容器不得超过全站容器宽度 */
.single-product .container-fluid {
  max-width: 1320px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}

/* 8.2 正文阅读宽度（仅宽屏需要限；窄屏本来就是满宽） */
@media (min-width: 1200px) {
  .single-product .woocommerce-tabs .tab-content > p:not(.ctc-terms-note),
  .single-product .woocommerce-tabs .tab-content > ul,
  .single-product .woocommerce-tabs .tab-content > ol,
  .single-product .woocommerce-tabs .tab-content > h2,
  .single-product .woocommerce-tabs .tab-content > h3,
  .single-product .woocommerce-tabs .tab-content > h4 {
    max-width: 880px;
  }
}

/* 8.2b 正文字号 / 行高 / 间距 */
.single-product .woocommerce-tabs .tab-content > p:not(.ctc-terms-note),
.single-product .woocommerce-tabs .resp-tab-content > p:not(.ctc-terms-note),
.single-product .woocommerce-tabs .tab-content > ul,
.single-product .woocommerce-tabs .tab-content > ol,
.single-product .woocommerce-tabs .resp-tab-content > ul,
.single-product .woocommerce-tabs .resp-tab-content > ol {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ctc-muted);
}
.single-product .woocommerce-tabs .tab-content > ul,
.single-product .woocommerce-tabs .tab-content > ol,
.single-product .woocommerce-tabs .resp-tab-content > ul,
.single-product .woocommerce-tabs .resp-tab-content > ol {
  padding-left: 22px;
}
.single-product .woocommerce-tabs .tab-content li,
.single-product .woocommerce-tabs .resp-tab-content li {
  margin-bottom: 6px;
  line-height: 1.8;
}
.single-product .woocommerce-tabs .tab-content > h3,
.single-product .woocommerce-tabs .resp-tab-content > h3 {
  margin: 26px 0 12px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ctc-ink);
}

/* 8.3 规格表格统一为细线表格（原来是 border="1" 的老式 inset 边框） */
.single-product .woocommerce-tabs .tab-content table,
.single-product .woocommerce-tabs .resp-tab-content table {
  max-width: 100%;
  margin: 4px 0 20px;
  border: 0;
  border-collapse: collapse;
}
.single-product .woocommerce-tabs .tab-content table td,
.single-product .woocommerce-tabs .tab-content table th,
.single-product .woocommerce-tabs .resp-tab-content table td,
.single-product .woocommerce-tabs .resp-tab-content table th {
  padding: 7px 11px;
  border: 1px solid var(--ctc-line);
  vertical-align: top;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ctc-muted);
}
.single-product .woocommerce-tabs .tab-content table th,
.single-product .woocommerce-tabs .resp-tab-content table th {
  background: var(--ctc-soft);
  color: var(--ctc-ink);
  font-weight: 600;
}
/* 压掉老导入内容里的内联字体（Times New Roman / font-size:medium），仅改字体两项 */
.single-product .woocommerce-tabs .tab-content table span,
.single-product .woocommerce-tabs .resp-tab-content table span {
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
/* 收掉「td > div > div」两层结构里的空白占位 div（实测仅 ID 2776，
   已核实首段 div 内容均为空白，隐藏后无文字损失；正常单元格只有 1 个 div，不受影响） */
.single-product .woocommerce-tabs .tab-content table td > div > div:first-child:not(:only-child),
.single-product .woocommerce-tabs .resp-tab-content table td > div > div:first-child:not(:only-child) {
  display: none;
}

/* --------------------------------------------------------------------------
   9. 询价按钮：去掉购物袋图标 + 窄屏改为显示文字（2026-09-29）
   --------------------------------------------------------------------------
   背景（本机真浏览器 + CDP 实测）：
     按钮左侧图标来自 Porto 的伪元素 ——
       .product-type-simple .add-links .add_to_cart_button::before
         { font-family:"Porto"; content:"\e8ba"; }        ← 「购物袋」字符
     与文案「Add to Inquiry List（加入询价清单）」语义不符；而 Send Enquiry
     本来就 ::before content:none（无图标）→ 两个按钮体例不一致。
     窄屏（<576px）Porto 另有两条配套规则，把文字藏起来只留图标：
       .ccols-2 li.product-outimage .add-links .button
         { width:36px; text-indent:-9999px; }             ← 文字藏起
       .ccols-2 li.product-outimage .add-links .button::before
         { display:block; text-indent:0; width:100%; }    ← 图标放出
     实测 390px 下按钮 = 40×40 图标方块。**只删图标会让窄屏变成空白方块**，
     所以 9.1 与 9.2 必须成对存在。
   已核实：`.ccols-2` 那条只在窄屏命中（1600px 视口的 matchedCSSRules 里没有它），
          故 9.1 覆盖伪元素不会影响桌面以外的布局。
   回滚：删掉本节即可（全部为增量覆盖）。
   -------------------------------------------------------------------------- */

/* 9.1 去掉图标（覆盖伪元素；桌面与窄屏一起生效） */
.products .add_to_cart_button::before,
.add-links .add_to_cart_button::before,
.add-links .add_to_cart_read_more::before,
.product-type-simple .add-links .add_to_cart_button::before,
.single_add_to_cart_button::before {
  content: none !important;
  display: none !important;
}

/* 9.2 窄屏：把文字放回来，按钮改自适应宽度（不再依赖图标） */
@media (max-width: 767px) {
  .ccols-2 li.product-outimage .add-links .button {
    text-indent: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 13px !important;
  }
}


/* --------------------------------------------------------------------------
   10. 无评分商品：不渲染空星级条（2026-09-30）
   --------------------------------------------------------------------------
   起因：96 条「自灌种子评论」下线后，全站商品都是「0 条评论」。
   Porto 的 porto_get_rating_html()（porto/inc/functions/woocommerce.php:580）
   **没有 0 值判断**，于是每张商品卡片都照样输出
     <div class="star-rating" title="0"><span style="width:0%">…out of 5</span></div>
   即一排空的灰星 —— 无信息量，且容易被误读成「有评分 / 5 星」。

   ⚠️ 坑：**不能只按 title="0" 选**。
   Bootstrap tooltip 在运行时会把 `title` 搬走并清空：
     源码   <div class="star-rating" title="0">
     实 DOM <div class="star-rating" title="" data-bs-original-title="0">
   于是「curl 到的 HTML 里明明写着 title="0"」的规则在真实浏览器里**一条都不匹配**。
   —— 这条只有用真浏览器看 DOM 才能发现，纯 curl / 纯读源码都验不出来。

   处理：把 JS 前后的两种形态都覆盖，再加一条与属性无关的 :has() 兜底
   （按内联样式里的 width:0% 判定）。不用前缀匹配 `^=`，避免误伤 0.5 这类真实评分。

   注意：不影响评论表单里的打分控件（那套是 <p class="stars">，不是 .star-rating），
   也不影响将来真有评分时的显示（:has() 不匹配就自动恢复）。

   回滚：删掉本节即可（纯增量覆盖，无副作用）。
   -------------------------------------------------------------------------- */

/* 10.1 空星级条本体 */
.star-rating[title="0"],
.star-rating[title="0.00"],
.star-rating[data-bs-original-title="0"],
.star-rating:has(> span[style*="width:0%"]) {
  display: none !important;
}

/* 10.2 卡片上的外壳一起收掉（有评分时 :has() 不匹配，自动恢复） */
.rating-wrap:has(.star-rating[title="0"]),
.rating-wrap:has(.star-rating[data-bs-original-title="0"]),
.rating-wrap:has(> .rating-content > .star-rating:has(> span[style*="width:0%"])) {
  display: none;
}

/* §10 族内链块（2026-10-06）：HDMI/OBD2 详情页 Description 尾部自动内链 */
.ctc-family-links{margin-top:2em;clear:both}
.ctc-family-links h3{margin-bottom:.5em}
.ctc-family-links ul{margin:0 0 0 20px;padding:0;list-style:disc outside}
.ctc-family-links li{margin:.35em 0}
.ctc-family-links a{color:#c74a00;text-decoration:none}
.ctc-family-links a:hover{text-decoration:underline;color:#a83e00}