/* ═══════════════════════════════════════════════════════════════════════════
   nav.css — 头部导航统一层（2026-09-22）
   ───────────────────────────────────────────────────────────────────────────
   为什么单独开一层，而不是改 header.css / utilities.css：
     这两份文件里对同一批元素存在互相打架的历史规则，直接改容易两头顾此失彼，
     且主题升级会覆盖。本文件在 layout.html 里排在**全部全站 CSS 之后**，
     用「后加载 + 更高特异性」取胜，改动可整层回滚，也不污染主题文件。

   本层要压住的既有规则（按优先级从危险到次要）：
     1. utilities.css  @media(max-width:991px)
        `.header-right-wrap .same-style a > span{position:relative;top:-2px;right:-1px}` (0-2-2)
        —— 把心愿角标拉回文档流，撑爆 inline-flex 的 <a>，导致 1em 的 SVG
           被 flex 横向压缩（实测 375px 下心形只剩 12×16，正常应为 16×16）。
     2. header.css     `.header-right-wrap .same-style a span{...background:#D4A843;
                        width:20px;height:20px}` (0-2-2)
        —— 给角标套了 20×20 的金色圆底，且同样处在文档流内。
     3. utilities.css  `.kck-wishlist-count{background:#ef4444}` (0-1-0)
        —— 与 header.css 的金色实现冲突（同权重，后加载者胜），两套角标视觉并存。
     4. utilities.css  @media(max-width:991/480/360px)
        `.header-small-device .header-right-wrap .same-style a{width:30/26/22px}` (0-3-2)
        —— 移动端图标被逐档缩到 22px，且语言切换器没有对应的宽度策略，
           被 flex 压到 58px（内容需 ≈79px），与汉堡键重叠。

   命名约定：新增结构类统一 kck- 前缀；令牌统一 --kck-nav-*，
   所有 var() 一律带字面量兜底（令牌定义在 utilities.css / pages.css，
   若哪天作用域变化也不会整块失效）。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. 令牌 ───────────────────────────────────────────────────────────────
   --kck-nav-ico    图标光学尺寸（1em 的实际像素值）
   --kck-nav-tile   点击区宽
   --kck-nav-tile-h 点击区高（移动端保 44px 以沿用项目既有的触控目标约定）
   --kck-nav-gap    控件之间的实际间距（取代 theme 的 margin-left 逐项偏移） */
.header-area {
    --kck-nav-ico: 19px;
    --kck-nav-tile: 34px;
    --kck-nav-tile-h: 34px;
    --kck-nav-gap: 4px;
    --kck-nav-gold: var(--kck-gold, #D4A843);
    --kck-nav-navy: var(--kck-navy, #1a1f3d);
}

/* ── 1. 图标点击区 ─────────────────────────────────────────────────────────
   桌面端 (0-3-1)，移动端在 §5 用 (0-4-2) 覆盖。
   flex:0 0 auto 是本层最关键的一条：不让 flex 压缩控件，
   宽度不够时宁可溢出报警，也不要静默变形。 */
.header-area .header-right-wrap .same-style > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--kck-nav-tile, 34px);
    height: var(--kck-nav-tile-h, 34px);
    min-height: var(--kck-nav-tile-h, 34px);
    font-size: var(--kck-nav-ico, 19px);
    line-height: 1;
    color: #fff;
    text-decoration: none;
}

/* 悬停/键盘聚焦统一走品牌金。
   必须显式写 :hover —— utilities.css 的
   `.header-right-wrap .same-style > a:hover{color:var(--kck-gold)}` 与上面的
   基础规则同权重 (0-3-1)，本文件后加载会把基础规则的 color:#fff 压在悬停态上，
   不补这一条悬停变色就失效。 */
.header-area .header-right-wrap .same-style > a:hover,
.header-area .header-right-wrap .same-style > a:focus-visible {
    color: var(--kck-nav-gold, #D4A843);
}

.header-area .header-right-wrap .same-style > a:focus-visible {
    outline: 2px solid var(--kck-nav-gold, #D4A843);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ── 2. 图标定位盒 .kck-nav-ico ────────────────────────────────────────────
   1em×1em 的紧贴图标盒，同时充当角标的定位参照。
   角标挂在它上面（而不是挂在 44px 高的 <a> 上）——
   这样角标相对图标的位置在桌面/移动/小屏三档下完全一致，
   不随点击区高度变化而漂移。

   本规则 (0-4-1) 高于 theme 的 `.header-right-wrap .same-style a span` (0-2-2)
   与 `@media .header-right-wrap .same-style a > span` (0-2-2)，
   下面这几行是在显式撤掉那两条强加的样式（金色 20×20 圆底 + 相对定位），
   漏掉任意一行都会让图标底下多出一个金块。 */
.header-area .header-right-wrap .same-style > a .kck-nav-ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    min-width: 0;
    padding: 0;
    font-size: 1em;
    line-height: 1;
    text-align: center;
    color: inherit;
    background: none;
    border-radius: 0;
    top: auto;
    right: auto;
    z-index: 4;
    transition: transform .25s var(--kck-ease, cubic-bezier(.22, .61, .36, 1));
}

/* ⚠ utilities.css 里有一条高优先规则会击穿本层：
   .mobile-menu-button-active svg{font-size:1.35em !important;width:1.35em !important;height:1.35em !important}
   font-size 与 width 同时写成 em ⇒ 复利放大 1.35² ≈ 1.82 倍。实测 320px 下图标盒只有
   17px，内部汉堡 SVG 却渲成 31×31，直接把图标盒撑破，看上去比搜索/收藏/账户大三倍。
   这里用更高特异性 + !important 拉回 1em，四个图标严格同尺寸。 */
.header-area .header-right-wrap .same-style > a .kck-nav-ico svg {
    display: block;
    flex: 0 0 auto;      /* 关键：SVG 自己也是 flex 子项，不设就仍会被压扁 */
    font-size: 1em !important;
    width: 1em !important;
    height: 1em !important;
}

/* 图标微抬升，替代主题里对 <i> 写死的 rotateY(180deg) 翻转变换
   （本项目图标已换成内联 SVG，那条规则实际永不命中）。 */
.header-area .header-right-wrap .same-style > a:hover .kck-nav-ico {
    transform: translateY(-1px);
}

/* ── 3. 心愿角标（统一实现） ───────────────────────────────────────────────
   三件事：绝对定位（脱离文档流，绝不挤压图标）、
   品牌金底 + 藏青字（白字压金底对比度仅 ≈2.1:1，藏青字 ≈7.0:1，过 AA）、
   计数为 0 时不显示。

   `[data-count="0"]` 那条 !important 来自 utilities.css，仍然有效；
   .kck-show 由 layout 里的脚本在 count>0 时加，两条规则结论一致。 */
.header-area .header-right-wrap .same-style > a .kck-nav-ico .kck-wishlist-count {
    position: absolute;
    top: -5px;
    right: -6px;
    left: auto;
    bottom: auto;
    display: none;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--kck-nav-gold, #D4A843);
    color: var(--kck-nav-navy, #1a1f3d);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    pointer-events: none;
    /* 与藏青头部之间留一圈描边，避免金色角标糊在背景上 */
    box-shadow: 0 0 0 2px var(--kck-nav-navy, #1a1f3d);
    z-index: 6;
}

.header-area .header-right-wrap .same-style > a .kck-nav-ico .kck-wishlist-count.kck-show {
    display: inline-flex;
}

/* 兜底：将来若有角标没被包进 .kck-nav-ico，也走同一套视觉，
   不至于回落到 utilities.css 的红色实现。 */
.kck-wishlist-count {
    position: absolute;
    top: -5px;
    right: -6px;
    display: none;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--kck-gold, #D4A843);
    color: var(--kck-navy, #1a1f3d);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    z-index: 6;
}

.kck-wishlist-count.kck-show {
    display: inline-flex;
}

/* ── 4. 语言切换器 ────────────────────────────────────────────────────────
   设计取舍：可见内容＝地球图标 + 语言短码（EN / DE / FR / ES）。
   完整语言名（English / Nederlands …）保留在 .lang-switcher__current 里，
   做成视觉隐藏但读屏可见，同时下拉项里带短码 + 完整名。
   理由：原名最长 "Nederlands" 在 13px 下有 ~80px 宽，是移动端头部
   放不下五个控件的直接原因；而地球图标已足够表达「切语言」，
   短码在双语/多语语境里也无需解释。 */
.header-area .header-right-wrap .lang-switcher {
    position: relative;
    flex: 0 0 auto;
    margin-left: 0;
}

.header-area .header-right-wrap .lang-switcher .lang-switcher__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--kck-nav-tile-h, 34px);
    min-height: var(--kck-nav-tile-h, 34px);
    padding: 0 11px;
    margin: 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.header-area .header-right-wrap .lang-switcher .lang-switcher__toggle:hover,
.header-area .header-right-wrap .lang-switcher .lang-switcher__toggle:focus-visible,
.header-area .header-right-wrap .lang-switcher .lang-switcher__toggle[aria-expanded="true"] {
    border-color: var(--kck-nav-gold, #D4A843);
    color: var(--kck-nav-gold, #D4A843);
}

.header-area .header-right-wrap .lang-switcher .lang-switcher__toggle:focus-visible {
    outline: 2px solid var(--kck-nav-gold, #D4A843);
    outline-offset: 2px;
}

.header-area .header-right-wrap .lang-switcher .lang-switcher__globe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}

.header-area .header-right-wrap .lang-switcher .lang-switcher__globe svg {
    display: block;
    width: 100%;
    height: 100%;
}

.header-area .header-right-wrap .lang-switcher .lang-switcher__code {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
}

/* 完整语言名：视觉隐藏、读屏可读（供按钮的最终可访问名与翻译流程使用）。
   用 clip 而非 display:none —— 后者会让读屏一并忽略。 */
.header-area .header-right-wrap .lang-switcher .lang-switcher__current {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 下拉面板：抬到与头部同一层视觉语言（大圆角、发丝边、柔和落影） */
.header-area .header-right-wrap .lang-switcher .lang-switcher__menu {
    top: calc(100% + 10px);
    right: 0;
    min-width: 178px;
    padding: 6px;
    border: 1px solid rgba(26, 31, 61, .10);
    border-radius: 12px;
    box-shadow: 0 18px 40px -14px rgba(26, 31, 61, .34);
}

/* 下拉项：权重 0-4-0，压住 lang-switcher.css 的 0-3-0 与主题
   `.header-right-wrap .same-style a{width:32px;height:32px;color:#fff}`。 */
.header-area .header-right-wrap .lang-switcher .lang-switcher__menu .lang-switcher__item {
    display: flex;
    align-items: center;
    /* 主题 `.header-right-wrap .same-style a{justify-content:center}` 会泄漏进来：
       条目整行铺满后内容被居中，各行芯片 x 坐标随文字长短漂移，
       当前语言行再被 ✓ 的 margin-left:auto 推到最左——必须显式拉回左对齐。 */
    justify-content: flex-start;
    gap: 10px;
    width: auto;
    height: auto;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--kck-ink, #1f2230);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}

.header-area .header-right-wrap .lang-switcher .lang-switcher__menu .lang-switcher__item-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* utilities.css ≤991 的 `a > span{position:relative;top:-2px;right:-1px}`
       同样命中芯片，会让芯片比右侧语言名整体抬高 2px——这里归零。 */
    top: auto;
    right: auto;
    min-width: 28px;
    height: 20px;
    border-radius: 5px;
    background: rgba(26, 31, 61, .07);
    color: var(--kck-nav-navy, #1a1f3d);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ⚠ 下拉项里的**每一个** span 都要显式重置。
   这些 <a> 的祖先链是 .header-right-wrap > .same-style，因此同样命中主题的
   `.header-right-wrap .same-style a span{display:inline-block;width:20px;height:20px;
   line-height:20px;border-radius:50%;background-color:#D4A843}`(0-2-2) ——
   语言名会被盖成「金色圆形盖住前几个字母」。
   .kck-nav-ico 与这里的 item-code / item-name 是同一类补丁，新增 span 时别漏。 */
.header-area .header-right-wrap .lang-switcher .lang-switcher__menu .lang-switcher__item-name {
    display: inline-block;
    width: auto;
    height: auto;
    min-width: 0;
    line-height: 1.3;
    color: inherit;
    font-size: inherit;
    text-align: left;
    border-radius: 0;
    background: none;
    top: auto;
    right: auto;
}

.header-area .header-right-wrap .lang-switcher .lang-switcher__menu .lang-switcher__item:hover,
.header-area .header-right-wrap .lang-switcher .lang-switcher__menu .lang-switcher__item:focus {
    background: rgba(212, 168, 67, .14);
    color: var(--kck-ink, #1f2230);
}

.header-area .header-right-wrap .lang-switcher .lang-switcher__menu .lang-switcher__item.is-current {
    background: rgba(212, 168, 67, .18);
    font-weight: 600;
}

.header-area .header-right-wrap .lang-switcher .lang-switcher__menu .lang-switcher__item.is-current .lang-switcher__item-code {
    background: var(--kck-nav-gold, #D4A843);
    color: var(--kck-nav-navy, #1a1f3d);
}

/* 当前语言的对勾改为右对齐（下拉项已是 flex），
   用转义码而非字面字符，避免文件编码/压缩工具把符号弄坏。 */
.header-area .header-right-wrap .lang-switcher .lang-switcher__menu .lang-switcher__item.is-current::after {
    content: "\2713";
    margin-left: auto;
    color: var(--kck-nav-gold, #D4A843);
    font-size: 13px;
}

/* ── 5. 移动端头部（≤991px） ─────────────────────────────────────────────
   栅格重排：col-6 + col-6 → col（品牌，可伸缩）+ col-auto（操作区，取自然宽）。
   原 50/50 分栏下，375px 视口里操作区只有 ≈212px，而五个控件的自然宽 ≈223px，
   语言切换器被压到 58px 后与汉堡键重叠。 */

/* 桌面端：控件改用 gap 控制间距，撤掉 theme 的逐项 margin-left
   （`.same-style{margin-left:64px}` → `.same-style-mrg-dec{margin-left:10px}`
    在 992~1365px 区间还夹着 30px 的中间档，间距随断点乱跳）。 */
.header-area .header-large-device .header-right-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--kck-nav-gap, 4px);
}

.header-area .header-large-device .header-right-wrap .same-style {
    margin-left: 0;
}

/* 桌面非首页头部底色统一为品牌藏青。
   header.css 里 `body:not(.home) .header-large-device{background:#000000}` 是纯黑，
   与移动端 .bg-main 的 #1a1f3d 不一致，同一站点出现两种「深色条」。 */
body:not(.home) .header-large-device {
    background-color: var(--kck-nav-navy, #1a1f3d);
}

/* 992~1199px 也回落到移动头部（见下方 5b 的实测说明），
   所以移动栏的整套视觉规则从 ≤991 放宽到 ≤1199，两段观感完全一致；
   否则主题对 .mobile-logo 的缩放规则只写在 ≤991，logo 会按原图尺寸
   把头部撑到 ~155px 高（实测踩中）。 */
@media (max-width: 1199px) {
    /* 移动端点击区高度回到 44px（项目既有触控目标约定，见 utilities.css）。 */
    .header-area {
        --kck-nav-tile-h: 44px;
    }

    .header-area .header-small-device .kck-mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        margin: 0;
    }

    /* col / col-auto 在 no-gutters 之外仍带 15px 内边距，这里清零，
       品牌与控件直接对齐容器内缘 */
    .header-area .kck-mobile-bar > .col,
    .header-area .kck-mobile-bar > .col-auto {
        width: auto;
        max-width: none;
        padding: 0;
    }

    /* 品牌列：flex 0 1 auto + max-width，让它「可以让位、但不静默截断」。
       操作区是 flex:0 0 auto（取自然宽），所以宽度不足时只压缩品牌列；
       品牌列里的 <img> 再以 max-width:100% 等比缩小，
       于是极窄屏上 logo 是「整体变小」而不是「被裁掉半个字」。
       min-width:0 是必须的 —— 否则 flex 子项的下限是内容宽，压不下去。 */
    .header-area .kck-mobile-bar > .kck-mobile-bar__brand {
        flex: 0 1 auto;
        max-width: 172px;
        min-width: 0;
        padding-right: 10px;
    }

    .header-area .kck-mobile-bar .mobile-logo {
        height: 60px;
        max-width: 100%;
        min-width: 0;
    }

    .header-area .kck-mobile-bar .mobile-logo-width a {
        display: block;
        max-width: 100%;
        min-width: 0;
    }

    /* 主题给了 width:50%（≤767）/60%（≤480）这类按列宽比例变化的规则，
       同一 logo 在 375px 与 700px 下宽度差一倍。改为「等比缩放 + 上限」，
       视觉恒定且永不溢出。 */
    .header-area .kck-mobile-bar .mobile-logo-width a img {
        display: block;
        width: auto;
        max-width: 100%;
        max-height: 34px;
        height: auto;
    }

    /* logo 垂直居中（2026-09-22）：utilities ≤767 的 `a{min-height:44px}` 把 logo 的
       <a> 撑到 44px 高，而 <a> 是 block 布局，img 顶在 <a> 顶部——
       实测 logo 中线 25 vs 头部中线 32，偏高 7px。<a> 转 flex 让 img 在 44px
       触控高度内垂直居中。 */
    .header-area .kck-mobile-bar .mobile-logo a {
        display: flex;
        align-items: center;
    }

    .header-area .header-small-device .header-right-wrap {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: var(--kck-nav-gap, 4px);
    }

    .header-area .header-small-device .header-right-wrap .same-style {
        margin-left: 0;
    }

    /* 权重 (0-4-2)：压住 utilities.css 的
       `@media(max-width:991/480/360px) .header-small-device .header-right-wrap
        .same-style a{width:30/26/22px;height:...;font-size:...}` (0-3-2)，
       让移动端图标尺寸只由本层三档令牌控制。 */
    .header-area .header-small-device .header-right-wrap .same-style > a {
        width: var(--kck-nav-tile, 34px);
        height: var(--kck-nav-tile-h, 44px);
        min-height: var(--kck-nav-tile-h, 44px);
        font-size: var(--kck-nav-ico, 19px);
    }

    .header-area .header-small-device .header-right-wrap .lang-switcher .lang-switcher__toggle {
        height: var(--kck-nav-tile-h, 44px);
        min-height: var(--kck-nav-tile-h, 44px);
    }
}

/* 平板窄档：操作区仍有余量时收紧间距，保证 320px 也不换行 */
@media (max-width: 480px) {
    .header-area {
        --kck-nav-ico: 18px;
        --kck-nav-tile: 30px;
        --kck-nav-gap: 3px;
    }

    .header-area .header-small-device .header-right-wrap .lang-switcher .lang-switcher__toggle {
        padding: 0 9px;
        gap: 5px;
    }
}

@media (max-width: 360px) {
    .header-area {
        --kck-nav-ico: 17px;
        --kck-nav-tile: 28px;
        --kck-nav-tile-h: 40px;
        --kck-nav-gap: 2px;
    }

    .header-area .kck-mobile-bar > .kck-mobile-bar__brand {
        max-width: 128px;
    }

    .header-area .header-small-device .header-right-wrap .lang-switcher .lang-switcher__toggle {
        padding: 0 8px;
        gap: 4px;
    }
}

/* （2026-09-22 二轮删除）这里原先有一组 992~1199 的桌面图标令牌
   （--kck-nav-ico:18px / --kck-nav-tile:32px / gap:3px），是给当时的桌面右栏用的。
   该档位现已整体回落到移动头部（见下方 5b），这组令牌会误伤移动栏
   （18px 图标 vs ≤991 的 19px），故删除 —— 992~1199 与 ≤991 用同一套令牌。 */

/* ── 5b. 桌面导航防折行（2026-09-22 二轮实测）──────────────────────────────
   症状：fr / nl / es 的 6 个导航项在桌面宽度下折成两行
        （ul 高度 64 → 128，末项掉到第二行、右缘只剩 ~270px）。
   实测所需一行宽度（强制 white-space:nowrap 后读 scrollWidth）：
     992~1199（列宽 539px）：es 576 · fr 624 · nl 634   ⇒ 全部放不下
     1200~1365（列宽 649px）：fr 696（nl/es 同量级）
     ≥1366  （列宽 658px）：fr 696
   根因：主题给每项 padding:0 18px（6 项共 216px），而 992~1199 档菜单列只有
   539px —— logo + 6 项导航 + 右侧四件套的自然宽度之和已超出 960px 容器，
   纯靠压字号/字距无法挽回（fr 文本本身就有 480px）。
   决策：992~1199 直接回落到移动头部（汉堡菜单）。6 项导航在该档位本就放不下，
   与其压到难以阅读，不如用标准的「平板宽度显示汉堡」方案；移动栏在 320~768
   已验证无溢出，992~1199 只会更宽裕。≥1200 仅把项间距 18px 收到 12px，
   即可容纳全部 6 种语言且观感变化很小。
   ⚠ 覆盖的是主题 .header-small-device / .header-large-device 的 display 规则，
   本文件是最后加载的全站覆盖层，特异性 0-2-0 > 主题 0-1-0。 */
@media (min-width: 992px) and (max-width: 1199px) {
    .header-area .header-large-device {
        display: none;
    }

    .header-area .header-small-device {
        display: flex;
        align-items: center;
        min-height: 60px;
    }
}

@media (min-width: 1200px) {
    .header-area .main-menu > nav > ul > li {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ── 6. 移动抽屉内的语言列表 ──────────────────────────────────────────────
   顶栏切换器在窄屏只剩短码，这里是带完整语言名的平铺入口，
   同时作为「顶栏被系统字体放大 / 分屏窄窗」等情况下的兜底路径。 */
.kck-drawer-lang {
    margin: 26px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.kck-drawer-lang__title {
    margin: 0 0 12px;
    color: #bdbdbd;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.kck-drawer-lang__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kck-drawer-lang__list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: #e7e8ee;
    font-size: 13px;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}

.kck-drawer-lang__list a:hover,
.kck-drawer-lang__list a:focus-visible {
    border-color: var(--kck-nav-gold, #D4A843);
    color: var(--kck-nav-gold, #D4A843);
}

.kck-drawer-lang__list a.is-current {
    border-color: var(--kck-nav-gold, #D4A843);
    color: var(--kck-nav-gold, #D4A843);
    font-weight: 600;
}

.kck-drawer-lang__code {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
}

/* ── 7. 动效弱化 ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .header-area .header-right-wrap .same-style > a .kck-nav-ico,
    .header-area .header-right-wrap .lang-switcher .lang-switcher__toggle,
    .kck-drawer-lang__list a {
        transition: none;
    }

    .header-area .header-right-wrap .same-style > a:hover .kck-nav-ico {
        transform: none;
    }
}