@charset "UTF-8";
/* ============================================================
   solarfastener.net — 首屏/CLS 关键修复（独立文件，2026-11-14）
   原因：assets/css/bundle.css 会被站内合并流程按 assets/css/*.css
   重新生成，而源 style.css 里没有以下规则，重新生成后首屏与移动端
   菜单会崩（hero 高 0 / 大图盖住导航条）。
   本文件在 bundle.css 之后加载，不依赖合并产物，确保规则始终生效。
   ============================================================ */

/* ===== PageSpeed (2026-11-13): 首屏主图真实 <img>（CSS 背景图不是 LCP 候选，导致
   LCP 一直等到轮播文字渲染后才记录）。img 绝对定位铺满、与背景 cover/center 完全一致，
   owl 初始化后内容层照常覆盖其上。 ===== */
.s-hero-lcp{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;display:block;border:0;max-width:none;}
.slider-section > .container{position:relative;z-index:1;}

/* ===== PageSpeed (2026-11-13) v2: LCP img 移出轮播（owl loop 克隆会把 img 一起克隆，
   禁缓存下同一张 120KB 主图被请求 5 次）。grid 重叠布局让 img 层与轮播层同高同位。 ===== */
.slider-hero{position:relative;overflow:hidden;width:100%;}
/* width:100% 不能省：overflow:hidden 会让 auto 宽度进入缩小适应解析，
   子元素 .s-hero-wrap{width:100%} 与 owl 的百分比宽度形成循环依赖，
   移动端 .slider-list/inline-block 下整块被算成 0px（首屏全白）。 */
.s-hero-wrap{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:0;}
.s-hero-lcp{position:absolute;top:0;left:0;width:100%;height:800px;object-fit:cover;object-position:center;z-index:0;display:block;border:0;max-width:none;}
@media (min-width:480px) and (max-width:991px){.s-hero-lcp{height:700px;}}
@media (max-width:479px){.s-hero-lcp{height:600px;}}
.slider-list{position:relative;z-index:1;}
.slider-section>.container{position:relative;z-index:1;}

/* ===== PageSpeed (2026-11-13) v3b: 消灭 CLS 0.474 的主位移源 =====
   meanmenu.js 初始化前，原始导航 nav.solar_menu 以 UA 默认样式在文档流中
   占约 390px；初始化后被隐藏、区域塌成 0，把 #main-content 整体上推 390px
   （LH 移动端 CLS 0.474）。首屏绘制早于 DCL，JS 无法抢在绘制前隐藏，只能用 CSS 预隐藏。
   meanmenu 初始化后同样隐藏该导航，状态一致；若 JS 失效移动端本就没有菜单，无副作用。 */
.mobile-menu-area .mobile-menu > nav.solar_menu{display:none;}

/* ===== PageSpeed (2026-11-13) v3c: 消灭 meanbar 出现造成的 64px 位移（CLS 0.0778）=====
   .mean-bar 为 float:left、高 64px，从高度 0 的 .mobile-menu-area 悬出压在 main 顶部；
   .slider-hero 因 overflow:hidden 成为 BFC 会被 float 顶到 64px（meanmenu 初始化后才出现，
   初始化前 hero 在 0px）。预留 64px margin 使初始化前后位置一致（仅 meanmenu 阈值内宽度）。 */
@media (max-width:991px){.slider-hero{margin-top:64px;}}

/* ===== 菜单修复（2026-11-14）：桌面 Products / News 二级菜单竖排 =====
   桌面导航真实结构是 div.solar-menu（连字符）> ul > li > a + div.sub-menu > ul > li。
   原 bundle.css 里 .solar-menu ul .sub-menu ul li{display:inline-block;width:100%} 让
   4 个二级项挤成一行（217×4 = 868px，横向溢出页面、把导航压歪）。
   这里把二级项改成 block 独占一行，并锁死下拉盒 217px 宽。
   只作用于 ≥992px；<992 走 meanmenu，规则互不影响。 */
@media (min-width:992px){
  .solar-menu ul > li{position:relative;}
  .solar-menu ul .sub-menu{width:217px;min-width:217px;max-width:217px;box-sizing:border-box;}
  .solar-menu ul .sub-menu ul{display:block;width:217px;max-width:217px;margin:0;padding:0;overflow:hidden;}
  .solar-menu ul .sub-menu ul li{
    display:block !important;width:100% !important;max-width:none;
    float:none !important;margin:0 !important;padding:0;list-style:none;
  }
  .solar-menu ul .sub-menu ul li a{
    display:block !important;width:100% !important;box-sizing:border-box;
    padding:12px 20px;text-align:left;white-space:nowrap;
  }
  .solar-menu ul .sub-menu ul li a:hover{background:#e63a27;color:#fff;}
  /* 悬停时箭头翻转，给出可点击的视觉提示 */
  .solar-menu ul > li > a i{transition:transform .25s;}
  .solar-menu ul > li:hover > a i{transform:rotate(180deg);}
}

/* ===================================================================
   2026-11-14 可访问性：标题层级修正
   轮播副标题原本由后台内容写入 <h4>，紧跟页头 <h1> 造成层级跳跃。
   组件模板已改为输出 <p class="slider-kicker">，这里补齐原视觉样式。 */
.slider-content p.slider-kicker {
    font-size: 24px;
    line-height: 24px;
    color: #fefefe;
    font-weight: 500;
    margin: 0 0 28px;
    width: auto;
}

.slider-content.style-two p.slider-kicker {
    color: #1c1632;
    margin-bottom: 16px;
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .slider-content p.slider-kicker { font-size: 21px; margin-bottom: 24px; }
}

/* ---------- 2026-11-14 计数器标签 h5 → p 后的视觉复位 ---------- */
.about-counter .about-text p.about-label,
.about-counter-img p.about-label,
.about-number-two p.about-label {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 10px;
}

.about-number-two p.about-label {
    font-size: 18px;
    color: #434141;
    margin: 0;
}

/* ---------- 2026-11-14 计数器数字 h4 → p 后的视觉复位 ---------- */
.about-numbar p.counter {
    font-size: 40px;
    color: #ffffff;
    font-weight: 600;
    display: inline-block;
    margin: 0;
}

.about-number-two p.counter {
    display: inline-block;
    font-size: 36px;
    color: #e63a27;
    font-weight: 500;
    margin: 0 0 9px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .about-numbar p.counter { font-size: 30px; }
}

@media only screen and (min-width: 480px) and (max-width: 599px) {
    .about-numbar p.counter { font-size: 25px; }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .about-number-two p.counter { font-size: 28px; }
}