@font-face {
  font-family: skf_icons;
  font-weight: 400;
  font-style: normal;
  font-display: block;
  src: url(./fonts/skf_icons.woff2) format("woff2"),
       url(./fonts/skf_icons.woff2) format("woff");

  crossorigin: 'anonymous'; 
} 

/* 图标基础样式 */
[class^=icon-],[class*=" icon-"] {
  font-family: skf_icons!important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  margin-left: .2em;
  margin-right: .2em;
  width: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
.icon-chevronLarge-back:before{
  content: "\e91c";
}

.icon-close::before{
  content: "\e91e";
}

}

/* 图标内容定义 */
.icon-clear{
  font-size:1.5rem;
  color:#000;
  position:absolute;
  transform:translate(-50%,-50%);
  top:50%;
  left:50%;
  margin-left:0;
  margin-right:0
}

.icon-search::before{
  content: "\e921";
}
.icon-user::before{
  content: "\e937";
}
.icon-contact::before{
  content: "\e924"
}

.icon-location::before{
  content: "\e930"
}

.icon-local_mall::before{
  content: "\e925";
}

.icon-chevronNext::before{
  content: "\e920";
}

.icon-clear::before{
  content: "\e91e";
}
.icon-place-24px::before{
  content: "\e909";
}
/* 导航链接样式 */
.nav-link {
  display: flex;
  justify-content: center;
  gap: .5rem;
  align-items: center;
  font-size: 1.125rem;
  color: inherit;
  padding: 0;
  position: relative;   
}
/* 导航栏列表样式 */
.navbar-nav {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: .5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-navbar-color);
  --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
  display: flex;
  padding-left: 0;
  margin-bottom: 0;
}
/* 动画类 */
.slide-in-left{
  animation: slideIn 0.3s ease-out
}

.fade-in-overlay{
  animation: fadeIn 0.3s;
  animation-fill-mode: forwards
}
* 提示框样式 */
.tooltip {
  --bs-tooltip-zindex: 1080;
  --bs-tooltip-max-width: 200px;
  --bs-tooltip-padding-x: .5rem;
  --bs-tooltip-padding-y: .25rem;
  --bs-tooltip-margin: ;
  --bs-tooltip-font-size: .875rem;
  --bs-tooltip-color: var(--bs-body-bg);
  --bs-tooltip-bg: var(--bs-emphasis-color);
  --bs-tooltip-border-radius: var(--bs-border-radius);
  --bs-tooltip-opacity: .9;
  --bs-tooltip-arrow-width: .8rem;
  --bs-tooltip-arrow-height: .4rem;
  z-index: var(--bs-tooltip-zindex);
  display: block;
  margin: var(--bs-tooltip-margin);
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-tooltip-font-size);
  word-wrap: break-word;
  opacity: 0
}

.tooltip::before{
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid
}

.tooltip::after{
  content: "";
  position: absolute;
  border-left: .375rem solid transparent;
  border-right: .375rem solid transparent;
  bottom: 100%;
  left: 50%;
  margin-left: -.375rem;
  border-bottom: .375rem solid #f6f6f6;
  margin-bottom: -.125rem;
  z-index: 1;
}
 /* 容器样式 */
.checkbox-select {
    width: 600px;
    position: relative;
    font-size: 14px;
    z-index: 1000;
}
 /* 选中内容展示框 */
  .select-trigger {
      padding: 8px 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
  }

        /* 下拉箭头 */
      .arrow {
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 5px solid #666;
          transition: transform 0.2s;
      }

    .arrow.active {
        transform: rotate(180deg);
    }

    /* 下拉面板 */
    .options-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        border: 1px solid #ccc;
        border-top: none;
        border-radius: 0 0 4px 4px;
        background-color: #fff;
        max-height: 200px;
        overflow-y: auto;
        display: none;
        z-index: 100;
        padding: 5px 0;
         /* 新增：为底部按钮预留空间 */
        display: none;
        flex-direction: column;
    }

        .options-panel.show {
            display: flex; /* 改为flex，适配底部按钮固定 */
        }
        /* 树形选项内容容器（滚动区域） */
        .tree-content {
            flex: 1;
            overflow-y: auto;
        }
          /* 面板底部按钮容器 */
        .panel-footer {
            padding: 8px 10px;
            border-top: 1px solid #eee;
            display: flex;
            gap: 8px;
            background-color: #fafafa;
        }

           /* 面板内按钮样式 */
        .panel-btn {
            flex: 1; /* 平分宽度 */
            padding: 4px 0;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 13px;
        }
        .panel-btn-clear {
            background-color: #f5f5f5;
            color: #666;
            border: 1px solid #ddd;
        }
        .panel-btn-clear:hover {
            background-color: #f0f0f0;
        }
        .panel-btn-confirm {
            background-color: #409eff;
            color: #fff;
        }
        .panel-btn-confirm:hover {
            background-color: #66b1ff;
        }

        /* 树形选项通用样式 */
        .tree-node {
            padding: 5px 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .tree-node:hover {
            background-color: #f5f5f5;
        }

        .tree-node input {
            margin-right: 8px;
            cursor: pointer;
        }

        /* 树形层级缩进 */
        .tree-level-1 {
            padding-left: 10px; /* 一级节点 */
        }
        .tree-level-2 {
            padding-left: 30px; /* 二级节点 */
        }
        .tree-level-3 {
            padding-left: 50px; /* 三级节点 */
        }

        /* 折叠/展开图标 */
        .toggle-icon {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 5px;
            cursor: pointer;
            position: relative;
        }

        .toggle-icon::before,
        .toggle-icon::after {
            content: '';
            position: absolute;
            background-color: #666;
            transition: transform 0.2s;
        }

        .toggle-icon::before {
            width: 8px;
            height: 1px;
            top: 50%;
            left: 2px;
            transform: translateY(-50%);
        }

        .toggle-icon::after {
            width: 1px;
            height: 8px;
            top: 50%;
            left: 5px;
            transform: translateY(-50%);
        }

        .toggle-icon.collapsed::after {
            transform: translateY(-50%) rotate(90deg);
        }

        /* 父节点样式 */
        .parent-node {
            font-weight: 600;
        }

        /* 子节点容器 */
        .children-container {
            display: none;
        }

        .children-container.show {
            display: block;
        }

        /* 选中结果展示 */
        .selected-result {
            margin-top: 15px;
            color: #333;
            font-size: 14px;
        }

         .btn-group {
            margin-top: 10px;
            display: flex;
            gap: 10px;
        }
        .btn-get-value, .btn-clear {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .btn-get-value {
            background-color: #409eff;
            color: #fff;
        }
        .btn-get-value:hover {
            background-color: #66b1ff;
        }
        .btn-clear {
            background-color: #f56c6c;
            color: #fff;
        }
        .btn-clear:hover {
            background-color: #f78989;
        }

        /* ==================================================================
           ★ AE 能力评级区块
           为什么用自定义 CSS 而不是 Tailwind 类：
           output.css 是 Tailwind 按需编译产物，只含原页面用过的类。
           新增的 rounded-full / bg-blue-600 / w-9 / gap-3 / text-xs / px-2 等
           线上并不存在，直接写会导致元素静默不可见。
           这里改为语义类，颜色/圆角引用 output.css 已有的 --color-* 主题变量，
           视觉与现有页面一致，且无需重建 Tailwind。
           ================================================================== */
        .ae-rating {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--color-gray-200);
        }
        .ae-rating__title {
            font-size: 1rem;              /* 14px → 16px，作为区块标题更醒目 */
            font-weight: 600;
            color: var(--color-gray-800);
            margin-bottom: .75rem;
        }
        .ae-rating__list {
            display: flex;
            flex-direction: column;
            gap: .5rem;
        }

        /* ---- 一个 AE 一行 ---- */
        .ae-person {
            display: flex;
            align-items: center;
            gap: .875rem;
            background: #fff;
            border: 1px solid var(--color-gray-200);
            border-radius: var(--radius-md);
            padding: .75rem .875rem;
        }
        .ae-person__photos {
            display: flex;
            align-items: center;
            gap: .5rem;
            flex: 0 0 auto;
        }
        /* 头像：圆形。竖向照片裁圆容易切头顶，默认偏上取景 */
        .ae-person__avatar {
            width: 3rem;
            height: 3rem;
            border-radius: 9999px;
            border: 1px solid var(--color-gray-200);
            object-fit: cover;
            object-position: 50% 25%;
            display: block;
            background: var(--color-gray-100);
        }
        /* 工作照：4:3 圆角矩形，与圆形头像形成形状区分 */
        .ae-person__work {
            width: 4rem;
            height: 3rem;
            border-radius: .25rem;
            border: 1px solid var(--color-gray-200);
            object-fit: cover;
            object-position: 50% 50%;
            display: block;
            background: var(--color-gray-100);
        }
        .ae-person__main {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: .3125rem;
        }
        .ae-person__cert {
            font-size: .8125rem;
            color: var(--color-gray-500);
        }
        /* 单个证书编号整体不断行 —— 只在编号之间的 " / " 处换行 */
        .ae-cert {
            white-space: nowrap;
        }

        /* ---- 等级徽章：实际数据与下方「等级说明」共用同一套配色 ---- */
        .ae-badge {
            display: inline-block;
            font-size: .75rem;
            font-weight: 500;
            border-radius: .25rem;
            padding: .125rem .5rem;
            letter-spacing: .02em;
            white-space: nowrap;
        }

        /* ---- 等级配色：锚定 SKF 蓝，往下递减 ----
           最高等级直接用站点强调色 --color-blue-700（oklch(49.8% .4 240)，
           实际渲染为 #0044FF，这是被改成 SKF 品牌蓝的定制值，不是 Tailwind 默认蓝）。
           其余三级由它按 60% / 79% / 91% 混白得到 —— 同色相递减，天然成套。
           L02 实底白字压得住，下面三级浅底深蓝字往后退。
           对比度逐个按 WCAG 2.1 验过：
             L02  #0044FF / #FFFFFF  → 6.42:1  AA
             L1.5 #99B4FF / #0030B2  → 5.00:1  AA
             L01  #C9D8FF / #0030B2  → 7.14:1  AAA
             L0.5 #E8EEFF / #0030B2  → 8.76:1  AAA
           注：中间试过金属阶梯（金/银/铜/枪灰）+ 反光动画，已弃用，勿再改回。 */
        .ae-badge--l02  { background: #0044FF; color: #FFFFFF; }
        .ae-badge--l15  { background: #99B4FF; color: #0030B2; }
        .ae-badge--l01  { background: #C9D8FF; color: #0030B2; }
        .ae-badge--l05  { background: #E8EEFF; color: #0030B2; }
        .ae-badge--other{ background: #E8EEFF; color: #0030B2; }

        /* ---- 等级说明：整体再降一档（10px → 9px），颜色再淡一层 ----
           output.css 没导出 gray-400 变量，这里用 Tailwind gray-400 字面色值。 */
        .ae-guide {
            margin-top: .875rem;
            padding-top: .625rem;
            border-top: 1px dashed var(--color-gray-200);
        }
        .ae-guide__title {
            font-size: .5625rem;
            font-weight: 500;
            color: #9CA3AF;
            letter-spacing: .04em;
            margin-bottom: .375rem;
        }
        .ae-guide__line {
            display: grid;
            grid-template-columns: 2.625rem 1fr;
            align-items: baseline;
            column-gap: .4375rem;
            margin-bottom: .25rem;
        }
        .ae-guide__line .ae-badge {
            justify-self: stretch;   /* 同一列里徽章等宽，左右边缘都齐 */
            text-align: center;
        }
        .ae-guide__desc {
            font-size: .5625rem;
            color: #9CA3AF;
            line-height: 1.5;
        }
        .ae-badge--sm {
            font-size: .5rem;
            padding: .0625rem .1875rem;
        }

/* ==================================================================
   顶部导航：可跳转反馈 —— 文字下方的小圆点
   参考 https://www.skf.com/cn/services
     官网那一行给「当前页」项加了圆点：.active-nav-link::after
       content:" " / 8×8 / border-radius:50% / #000 / margin-top:8px
     实测：hover 其他项【不会】出现圆点 —— 它是"你在这里"的标记，
     不是 hover 效果。
   我们这三个是【外跳链接】（服务/关于 跳到 skf.com，产品 开本站菜单），
   没有"当前页"可言，所以映射为三种"正在交互"的状态：
     hover / 键盘聚焦 / 产品菜单展开中(is-open) —— 作为可跳转的反馈。
   圆点用【绝对定位，不进文档流】，因此不会改变头部高度、不引起布局跳动。
   颜色用 currentColor 跟随文字（hover 变蓝时圆点同步变蓝）。
   ================================================================== */
.navbar-nav .nav-top-link { position: relative; }

.navbar-nav .nav-top-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;                 /* 链接自带 py-2，这里再往下 3px ≈ 文字下方 8px */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: translateX(-50%) scale(.4);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.navbar-nav .nav-top-link:hover::after,
.navbar-nav .nav-top-link:focus-visible::after,
.navbar-nav .nav-top-link.is-open::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .navbar-nav .nav-top-link::after { transition: none; }
}

/* ==================================================================
   产品侧边菜单（「产品」按钮打开的抽屉）
   ★ 原实现的建表代码整段被注释、且用了一堆 output.css 里不存在的
     Tailwind arbitrary-value 类（pt-[1.5rem] / w-[26rem] …），
     线上渲染为空白 —— 这里改用语义类重建，样式只依赖本文件。
   面板实测宽 442px，列表区高 820px。
   ================================================================== */
.product-menu__list {
  display: flex;
  flex-direction: column;
}

.product-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8125rem 0;
  border-bottom: 1px solid #E5E7EB;
  color: #111827;
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color .15s ease, padding-left .15s ease;
}
.product-menu__row:last-child { border-bottom: 0; }

.product-menu__row:hover,
.product-menu__row:focus-visible {
  color: var(--color-blue-700);   /* 站点强调色 #0044FF */
  padding-left: .3125rem;
}

/* 右侧箭头 —— 暗示"会跳到别的页面" */
.product-menu__row::after {
  content: "";
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .35;
  transition: opacity .15s ease, transform .15s ease;
}
.product-menu__row:hover::after,
.product-menu__row:focus-visible::after {
  opacity: 1;
  transform: rotate(45deg) translate(1px, -1px);
}

@media (prefers-reduced-motion: reduce) {
  .product-menu__row,
  .product-menu__row::after { transition: none; }
}

/* 下钻行（button 需要重置默认样式，才能和 <a> 行长得一样） */
.product-menu__row--drill {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid #E5E7EB;
  font: inherit;
  text-align: left;
  cursor: pointer;
}