/* ==========================================================================
   CHINA TOP CABLE — Porto 覆盖层 "Industrial"（批次 B）
   取代 tech-blue.css：方案 A 科技蓝 → 方案 B 工业硬朗
   回滚：functions.php 里把 ctc-industrial 换回 ctc-tech-blue 的 enqueue
   --------------------------------------------------------------------------
   WCAG AA 约束（实测比值）：
     #ff6a13 on #1a1e23 = 5.99:1  ✅ 橙底 + 深字（CTA 方案）
     #ff6a13 on #ffffff = 2.87:1  ❌ 禁止橙做白底文字
     #c74a00 on #ffffff = 4.76:1  ✅ 白底正文链接专用
     #ffffff on #1a1e23 = 15.4:1  ✅
     因此：装饰/深底用 #ff6a13，白底文字用 #c74a00，两者不混用
   ========================================================================== */

:root {
  /* 工业硬朗 token（与 ctc-industrial.css 设计系统对齐） */
  --ctc-orange:      #ff6a13;   /* 装饰、深底文字、CTA 底 */
  --ctc-orange-deep: #e05500;   /* 深一档，hover */
  --ctc-orange-text: #c74a00;   /* 白底文字/链接专用（AA） */
  --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 橙底深字（5.99:1）
   -------------------------------------------------------------------------- */
.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-orange) !important;
  border-color: var(--ctc-orange) !important;
  color: var(--ctc-steel-900) !important;          /* 深字，保证 5.99:1 */
  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-orange-deep) !important;
  border-color: var(--ctc-orange-deep) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   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;
}