/* ==========================================================================
   B 档 · 视觉系统（2026-10-21）
   目的：把「不完善感」的三个来源收口 —— 字阶无层级、控件无统一规格、
         首页分类卡只有线稿图标。
   回滚：注释 functions.php 里 ctc-ui-b 的两行 enqueue + 末尾 require。
   备份：/home/wwwroot/fixbackups/ctc-uib-*/
/* 本文件靠「加载顺序在 porto-style-inline-css 之后」取胜（依赖链
   ctc-ui-b ← ctc-ui-a ← ctc-header-dark ← ctc-inquiry-form ← ctc-industrial
   ← styles-child），故同特异性规则可安全覆盖 Porto css-code。 */

/* ==========================================================================
   B1 字阶收口
   实测原状（2026-10-21，1440 视口）：
     .ctc-sec-title          24px/700  行高 40px（1.67，散）
     商品卡 H3                14.72px/500  ← 比正文 15px 还小
     #tab-description > h3   16px/400   ← 与正文同大小且字重 400，看不出是标题
     .ctc-family-links h3    25px/400   ← 比同类区块标题大 9px
     .related.products h2    16px/700   ← H2 比 H3 还小，层级倒置
   收口后：H2 档 20-24，H3 档 15.5-20，行高统一 1.25-1.45，标题一律 700/600。
   ========================================================================== */

/* 首页区块标题：字号不动，只把行高从 40px 收到 1.25（30px） */
.ctc-sec-title{line-height:1.25;}

/* 商品卡标题：14.72 → 15.5，字重 500 → 600。卡片等高靠栅格 flex 撑着，
   实测不 clamp 也不会塌（见 ctc-ui-b 落地记录）。 */
ul.products li.product .woocommerce-loop-product__title{
  font-size:15.5px;font-weight:600;line-height:1.4;margin:0 0 8px;
}

/* 详情页正文小标题（Key features / Specifications / FAQ …）：16/400 → 18/700 */
#tab-description > h3{
  font-size:18px;font-weight:700;line-height:1.35;margin:30px 0 12px;
}

/* 「Related XLR Products」大标题：25/400 → 20/700，与全站区块标题同档 */
#tab-description .ctc-family-links > h3{
  font-size:20px;font-weight:700;line-height:1.3;margin:0 0 14px;
}

/* 「Request a Quote」：22/700 → 20/700，与上面统一 */
#tab-description .ctc-inq-head h3{
  font-size:20px;font-weight:700;line-height:1.3;margin:0 0 6px;
}

/* 详情页底部「Related products」：16/700 → 20/700，修层级倒置 */
.related.products h2.slider-title{
  font-size:20px;font-weight:700;line-height:1.3;
}

/* ==========================================================================
   B2 控件规格
   实测修正（2026-10-21）：诊断报告里「按钮 4 种高度 × 3 种字号」说重了。
   当前真实分布只有两档 —— 卡片/次级 40px·13px·600、主 CTA 47px·15px·700，
   圆角已全站 3px，这两个差异是「主次层级」不是「不统一」，不动。

   真正不一致的只有页头搜索框里的输入文字：16px，比全站按钮大 3px，
   在 34px 高的胶囊里显得挤。调到 13px 与全站一致。
   （搜索按钮里只有一个图标，字号只影响图标尺寸，故不设。胶囊形态
     是表单控件而非 CTA，保留 20px 圆角不改。）
   ========================================================================== */
form.searchform.search-layout-advanced input[type="text"],
form.searchform.search-layout-advanced input[type="search"]{
  font-size:13px;
}

/* 卡片里的按钮与主 CTA 统一圆角（Porto 个别位置会回落成 0 或 20px） */
ul.products li.product .button,
ul.products li.product .add_to_cart_button{border-radius:3px;}

/* ==========================================================================
   B3 首页分类卡：线稿图标 → 真实产品图（左图右文）
   卡片 HTML 是 9/28 手写的 <a class="ctc-cat"><i><strong><em>，
   不新增 DOM、不改页面内容，只把 <i> 从「图标」改成「图片容器」。
   图：wp-content/uploads/ctc-cat/*.jpg（400×400 白底，源自站内实拍，
       底部 8.5% 水印带已在源文件裁除，非 CSS 遮裁）。
   ========================================================================== */
.ctc-cats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}

.ctc-cats-grid .ctc-cat{
  display:grid;
  grid-template-columns:120px 1fr;
  grid-template-rows:auto auto;
  column-gap:16px;
  align-content:center;
  padding:14px;
  background:#fff;
  border:1px solid #e2e7ec;
  border-radius:4px;
  text-decoration:none;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.ctc-cats-grid .ctc-cat:hover{
  border-color:#ff6a13;
  box-shadow:0 8px 22px rgba(255,106,19,.13);
  transform:translateY(-2px);
}

/* <i> 变图片容器：清掉 FA 字号让字形塌成 0，只留背景图 */
.ctc-cats-grid .ctc-cat i{
  grid-column:1;grid-row:1 / 3;
  width:120px;height:120px;
  margin:0;font-size:0;line-height:0;color:transparent;
  background:#fff center/contain no-repeat;
  border-radius:4px;
}
.ctc-cats-grid .ctc-cat:nth-child(1) i{background-image:url(https://www.chinatopcable.com/wp-content/uploads/ctc-cat/obdii-cables.jpg);}
.ctc-cats-grid .ctc-cat:nth-child(2) i{background-image:url(https://www.chinatopcable.com/wp-content/uploads/ctc-cat/usb-cables.jpg);}
.ctc-cats-grid .ctc-cat:nth-child(3) i{background-image:url(https://www.chinatopcable.com/wp-content/uploads/ctc-cat/hdmi-cable.jpg);}
.ctc-cats-grid .ctc-cat:nth-child(4) i{background-image:url(https://www.chinatopcable.com/wp-content/uploads/ctc-cat/audio-video-cable.jpg);}
.ctc-cats-grid .ctc-cat:nth-child(5) i{background-image:url(https://www.chinatopcable.com/wp-content/uploads/ctc-cat/microphone-cable.jpg);}
.ctc-cats-grid .ctc-cat:nth-child(6) i{background-image:url(https://www.chinatopcable.com/wp-content/uploads/ctc-cat/vga-cable.jpg);}

.ctc-cats-grid .ctc-cat strong{
  grid-column:2;grid-row:1;align-self:end;
  margin:0 0 4px;
  color:#1d2329;font-size:16px;font-weight:700;line-height:1.3;
}
.ctc-cats-grid .ctc-cat em{
  grid-column:2;grid-row:2;align-self:start;
  color:#68737f;font-size:12.5px;line-height:1.45;font-style:normal;
}

/* 移动端：图片缩到 84，2 列 → 1 列 */
@media (max-width:991px){
  .ctc-cats-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .ctc-cats-grid .ctc-cat{grid-template-columns:84px 1fr;column-gap:12px;padding:12px;}
  .ctc-cats-grid .ctc-cat i{width:84px;height:84px;}
  .ctc-cats-grid .ctc-cat strong{font-size:14.5px;}
  .ctc-cats-grid .ctc-cat em{font-size:12px;}
}
@media (max-width:575px){
  .ctc-cats-grid{grid-template-columns:1fr;}
  .ctc-cats-grid .ctc-cat{grid-template-columns:72px 1fr;column-gap:12px;}
  .ctc-cats-grid .ctc-cat i{width:72px;height:72px;}
}

/* ==========================================================================
   B4 页脚信任条（HTML 由 ctc-ui-b.php 注入，挂在 porto_after_main）
   页脚底色 #0e0e0e，本条用 #171717 压一层并加细上边框做分隔。
   文案全部复用站内既有说法（About 页 ISO 9001 / CE·FCC·RoHS·REACH、
   首页信任条 200+ staff / 110+ countries），不新造资质。
   ========================================================================== */
.ctc-foot-trust{background:#171717;border-top:1px solid #262626;border-bottom:1px solid #0a0a0a;padding:16px 0;}
.ctc-foot-trust .ctc-wrap{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:10px 32px;
}
.ctc-foot-trust span{
  display:inline-flex;align-items:center;gap:8px;
  color:#b9c1ca;font-size:12.5px;line-height:1.4;
}
.ctc-foot-trust i{color:#ff6a13;font-size:14px;line-height:1;}
@media (max-width:767px){
  .ctc-foot-trust .ctc-wrap{justify-content:flex-start;gap:8px 20px;}
  .ctc-foot-trust span{font-size:12px;}
}

/* ===== C 档补丁 · 商品页摘要区信任三条（填补分享图标下白场） ===== */
.ctc-facts{margin:18px 0 0}
.ctc-facts ul{list-style:none;margin:0;padding:0}
.ctc-facts li{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.5;color:#444;padding:3.5px 0}
.ctc-facts li i{color:#c74a00;font-size:12px;line-height:1.65;width:14px;text-align:center;flex:0 0 14px}
.ctc-facts-cta{display:inline-block;margin-top:11px;font-size:13.5px;font-weight:600;color:#c74a00;text-decoration:none;border-bottom:1px solid rgba(199,74,0,.35);padding-bottom:1px}
.ctc-facts-cta:hover{color:#a83e00;border-bottom-color:#a83e00}
@media (max-width:575px){.ctc-facts{margin-top:16px}.ctc-facts li{font-size:12.5px}}