/* ============================================================
   kp-unify.css —— KPOP.WANG 全站样式统一补丁表（纯增量，零覆盖）
   ------------------------------------------------------------
   背景：全站扫描发现 aoyun.css（template/default/css/aoyun.css，16.3KB）
         定义了大量工具类，但 **从未被任何页面引入**，导致：
           - fs-* 字号工具类：100 个内容页全裸奔（标题/正文失控）
           - page-num 分页器：5 个列表页裸奔（分页是无样式裸链接）
           - active-nav 缩略图激活态：20 个产品页裸奔
           - arrow-left/right 轮播箭头：20 个产品页裸奔且点击切换失效
         另有 fa-robot 等 FA5 命名图标，站点引的是 Font Awesome 4.7，
         字形不存在 → 109 页「AI 客服」图标空白。

   原则：1) 只新增**此前完全无定义**的类，绝不覆盖任何现有选择器；
        2) 配色严格沿用全站品牌色，不新增色值；
        3) 不动 aoyun.css、不动 style.css、不动任何 HTML。
   ============================================================ */

/* ---------- 1. 字号工具类 fs-*（等价 aoyun.css，改 px 绝对值，
                不受 html font-size 影响，fs-N 即 N px） ---------- */
.fs-12 { font-size: 12px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.fs-24 { font-size: 24px; }
.fs-26 { font-size: 26px; }
.fs-28 { font-size: 28px; }
.fs-30 { font-size: 30px; }
.fs-32 { font-size: 32px; }
.fs-34 { font-size: 34px; }
.fs-36 { font-size: 36px; }
.fs-38 { font-size: 38px; }
.fs-40 { font-size: 40px; }

/* ---------- 2. 字号工具类 fs-sm-*（aoyun.css 中定义于 fs-* 之后，
                源码顺序在后故覆盖同名 fs-*，此处保持同序以还原级联） ---------- */
.fs-sm-12 { font-size: 12px; }
.fs-sm-14 { font-size: 14px; }
.fs-sm-16 { font-size: 16px; }
.fs-sm-18 { font-size: 18px; }
.fs-sm-20 { font-size: 20px; }
.fs-sm-22 { font-size: 22px; }
.fs-sm-24 { font-size: 24px; }
.fs-sm-26 { font-size: 26px; }
.fs-sm-28 { font-size: 28px; }
.fs-sm-30 { font-size: 30px; }
.fs-sm-32 { font-size: 32px; }
.fs-sm-34 { font-size: 34px; }
.fs-sm-36 { font-size: 36px; }
.fs-sm-38 { font-size: 38px; }
.fs-sm-40 { font-size: 40px; }

/* ---------- 3. 行距工具类 lh-*（aoyun.css 同族，一并补上） ---------- */
.lh-1 { line-height: 1; }
.lh-2 { line-height: 2; }
.lh-3 { line-height: 3; }
.lh-4 { line-height: 4; }

/* ---------- 4. 分页器 page-num（原 aoyun 用 Bootstrap 青 #17a2b8，
                此处统一为品牌蓝 #1677FF，与全站一致） ---------- */
.page-num:not(:disabled) { cursor: pointer; }
.page-num,
.page-link {
  position: relative;
  display: block;
  padding: .5rem .75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #1677FF;
  background-color: #fff;
  border: 1px solid #E5E6EB;
  text-decoration: none;
}
a.page-num:hover,
.page-link:hover {
  color: #0958D9;
  background-color: #F7F8FA;
  text-decoration: none;
}
.page-num-current {
  z-index: 1;
  color: #fff;
  background-color: #1677FF;
  border-color: #1677FF;
}
.page-num-current:hover {
  color: #fff;
  background-color: #0958D9;
  border-color: #0958D9;
}

/* 小屏隐藏数字条（沿用 aoyun.css 原策略，避免分页挤爆窄屏） */
@media only screen and (max-width: 576px) {
  .page-num { display: none; }
  .page-num-current { display: none; }
}

/* ---------- 5. 列表卡片图容器 card-img-*（aoyun.css 定义在
                @media(min-width:576px) 内，列表页依赖它统一图片高度；
                缺失导致 /case/ /product/ 卡片高度参差不齐） ---------- */
@media only screen and (min-width: 576px) {
  .card-img-200 { height: 200px; overflow: hidden; }
  .card-img-180 { height: 180px; overflow: hidden; }
  .card-img-150 { height: 150px; overflow: hidden; }
  .card-img-120 { height: 120px; overflow: hidden; }
  .card-img-100 { height: 100px; overflow: hidden; }
}
/* 容器内图片铺满裁切，保证卡片等高观感（纯增量，仅作用于容器内图片） */
.card-img-200 img,
.card-img-180 img,
.card-img-150 img,
.card-img-120 img,
.card-img-100 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 6. 产品页轮播箭头（原 aoyun 依赖背景图 feel3/feel4.png 且
                display:none，导致点击切换失效；改为纯 CSS 绘制，
                不依赖图片，hover 显示，品牌色） ---------- */
.view,
.preview { position: relative; }

.view .arrow-left,
.view .arrow-right,
.preview .arrow-left,
.preview .arrow-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #E5E6EB;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
  cursor: pointer;
}
.view .arrow-left,
.preview .arrow-left { left: 8px; }
.view .arrow-right,
.preview .arrow-right { right: 8px; }

.view:hover .arrow-left,
.view:hover .arrow-right,
.preview:hover .arrow-left,
.preview:hover .arrow-right { opacity: 1; }

/* 伪元素绘制箭头，避免依赖外部图片 */
.view .arrow-left::before,
.preview .arrow-left::before {
  content: "";
  width: 8px;
  height: 8px;
  border-left: 2px solid #4E5969;
  border-bottom: 2px solid #4E5969;
  transform: rotate(45deg);
  margin-left: 3px;
}
.view .arrow-right::before,
.preview .arrow-right::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #4E5969;
  border-top: 2px solid #4E5969;
  transform: rotate(45deg);
  margin-right: 3px;
}
.view .arrow-left:hover,
.view .arrow-right:hover,
.preview .arrow-left:hover,
.preview .arrow-right:hover {
  background: #1677FF;
  border-color: #1677FF;
}
.view .arrow-left:hover::before,
.preview .arrow-left:hover::before {
  border-left-color: #fff;
  border-bottom-color: #fff;
}
.view .arrow-right:hover::before,
.preview .arrow-right:hover::before {
  border-right-color: #fff;
  border-top-color: #fff;
}

/* 触屏设备无 hover，箭头常显（半透明）以免功能不可用 */
@media (hover: none) {
  .view .arrow-left,
  .view .arrow-right,
  .preview .arrow-left,
  .preview .arrow-right { opacity: .85; }
}

/* ---------- 6. 产品页缩略图激活态（原 aoyun 为红色调试边框 #F00，
                统一为品牌蓝） ---------- */
.preview .active-nav {
  border: 2px solid #1677FF;
  border-radius: 4px;
  box-sizing: border-box;
}

/* ---------- 7. Font Awesome 5 命名补全（站点为 FA 4.7，字形不存在
                → 图标空白。用现有 4.7 字形回填，不动任何 HTML） ---------- */
.fa.fa-robot:before { content: "\f086"; }     /* 借 fa-comments：AI 客服对话 */
.fa.fa-headset:before { content: "\f025"; }   /* 借 fa-headphones：客服耳机 */
.fa.fa-lightbulb:before { content: "\f0eb"; } /* 借 fa-lightbulb-o：灯泡 */