:root{
    --dd-ink:#1A0F5E;
    --dd-primary:#4D33DE;
    --dd-primary-dark:#3920C5;
    --dd-primary-deep:#241478;
    --dd-tint:#EDEBFB;
    
    
    
    --dd-amber:#ff7e14;
    --dd-line:#DCD6F7;
    --dd-muted:#5B5B8C;
}

/* ============ 主容器 ============ */
.dd-header{position:sticky;top:0;z-index:1000;background:#fff}
.dd-nav{background:#fff;border-bottom:1px solid #F1EEFE}
.dd-nav-inner{
    padding:0 45px;
    display:flex;align-items:center;height:72px;gap:35px;
}

/* 品牌 */
.dd-brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.dd-brand-img{height:39px;max-width:170px;object-fit:contain;display:block}
.dd-brand-mark{color:var(--dd-ink);display:flex;align-items:center}
.dd-brand-text{font-size:23px;font-weight:800;color:var(--dd-ink);letter-spacing:-.5px;line-height:1;white-space:nowrap}

/* ============ 主导航 ============ */
.dd-menu{display:flex;align-items:center;gap:35px;flex:1}
.dd-menu-item{position:relative}
.dd-menu-link{
    display:inline-flex;align-items:center;gap:6px;
    font-size:15px;font-weight:500;color:var(--dd-ink);
    text-decoration:none;padding:0;height:72px;white-space:nowrap;
    transition:color .3s;
}
.dd-menu-link:hover{color:var(--dd-primary)}
.dd-caret{transition:transform .3s ease-in-out;flex-shrink:0}
.dd-menu-item:hover .dd-caret,.dd-menu-item.is-open .dd-caret{transform:rotate(180deg)}

/* ============ 下拉 ============ */
.dd-dropdown{
    position:absolute;top:100%;left:0;transform:translateY(6px);
    background:#fff;border:1px solid #F1EEFE;border-radius:14px;
    box-shadow:0 18px 48px rgba(3,18,66,.14);
    padding:10px;min-width:230px;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .16s,transform .16s,visibility .16s;
    z-index:1001;
}
.dd-menu-item:hover .dd-dropdown,
.dd-menu-item.is-open .dd-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.dd-dropdown-right{left:auto;right:0}
/* 宽版 mega 菜单统一锚定到导航条左缘（与 Dynadot 一致），
   靠右的菜单项不会再把 700+px 的面板推出视口。
   没有 :has() 的旧浏览器由下面的 JS 兜底矫正。 */
.dd-menu-item--mega{position:static}
.dd-dropdown::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.dd-dropdown a{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:9px 12px;font-size:13.5px;font-weight:500;color:#12203f;
    text-decoration:none;border-radius:9px;white-space:nowrap;transition:background .12s,color .12s;
}
.dd-dropdown a:hover,.dd-dropdown a.is-active{background:var(--dd-tint);color:var(--dd-primary-dark)}
.dd-menu-head{padding:8px 12px 5px;font-size:12px;font-weight:700;color:var(--dd-muted);text-transform:uppercase;letter-spacing:.8px}
.dd-menu-divider{height:1px;background:#F1EEFE;margin:6px 0}
.dd-lang-code{font-size:12px;color:var(--dd-muted)}
.dd-menu-signout{
    display:flex;align-items:center;width:100%;padding:9px 12px;font-size:13.5px;font-weight:500;
    color:#e5484d;background:none;border:none;cursor:pointer;border-radius:9px;text-align:left;font-family:inherit;
}
.dd-menu-signout:hover{background:#fee2e2}

/* ============ Mega menu ============
   复刻 dynadot 主菜单：悬停时不是小圆角下拉框，而是
   整条导航转深色 + 一个与导航同宽的全宽深色面板从下方落下。 */
.dd-dropdown-mega{
    min-width:0;max-width:none;width:auto;box-sizing:border-box;
    left:0;right:0;top:100%;
    padding:45px 0 34px;
    border:none;border-radius:0;box-shadow:none;
    background:var(--dd-primary-deep);
    transform:none;overflow:visible;
}
/* 兜底：面板背景向左铺满到屏幕最左，防止任何定位包含块差异露出白边 */
.dd-dropdown-mega::after{
    content:"";position:absolute;top:0;bottom:0;right:100%;
    width:100vw;background:var(--dd-primary-deep);
    pointer-events:none;
}
.dd-mega{
    padding:0 85px;
    display:flex;align-items:flex-start;flex-wrap:wrap;
    row-gap:6px;
}
/* 首列是宣传位：深色面板里与普通栏同款，只是文案更大 */
.dd-mega-promo,
.dd-mega-promo-alt,.dd-mega-promo-tool,.dd-mega-promo-res,.dd-mega-promo-sup{
    width:276px;min-width:276px;max-width:276px;flex:0 0 276px;padding:0 30px;
    box-sizing:border-box;background:none;color:#fff;
}
.dd-mega-promo{min-width:276px;border-left:none;position:relative;overflow:hidden}
.dd-mega-promo-title{font-size:24px;font-weight:500;letter-spacing:0;position:relative;z-index:2}
.dd-mega-promo-sub{
    font-size:14px;line-height:1.6;color:rgba(255,255,255,.72);
    margin-top:10px;position:relative;z-index:2;
}
.dd-mega-promo-art{position:absolute;inset:0;pointer-events:none;opacity:.32}
.dd-art-ring{border-color:rgba(255,255,255,.18)}
.dd-mega-col{
    display:flex;flex-direction:column;gap:10px;
    /* Fixed width, not flex:1. The panel is full-width by design, so a
       growing column steals width from nobody and renders as a very wide
       empty column whenever a menu has only two of them. */
    flex:1 1 236px;min-width:200px;max-width:300px;padding:0 30px;
    box-sizing:border-box;
    border-left:0.8px solid rgba(255,255,255,.2);
}
.dd-mega-col a{
    white-space:nowrap;padding:0;font-size:16px;font-weight:400;
    line-height:1.45;
    color:rgba(255,255,255,.92);border-radius:0;background:none;
}
.dd-mega-col a:hover{color:#fff;background:none;text-decoration:underline}
.dd-mega-head{
    padding:0;font-size:18px;font-weight:500;color:#fff;
    text-transform:none;letter-spacing:0;white-space:nowrap;
}
.dd-mega-head-gap{margin-top:14px}
.dd-arrow{opacity:.5;border-color:currentColor}

/* ============ 悬停激活态（对齐 dynadot 的 navbar-active） ============
   深色化只对「宽版 mega 菜单」生效；语言/用户那种小下拉不该把导航变暗。 */
.dd-nav{position:relative;transition:background-color .3s,color .3s}
.dd-brand-text,.dd-menu-link{transition:color .3s}
.dd-header.is-navactive .dd-nav,
.dd-header:has(.dd-menu-item--mega:hover) .dd-nav{background:var(--dd-primary-deep)}
/* 悬停时导航转深色，底部那条浅色 1px 边框必须一起去掉，
   否则会横在深色导航与深色面板之间显出一道浅色横杠 */
.dd-header.is-navactive .dd-nav,
.dd-header:has(.dd-menu-item--mega:hover) .dd-nav{border-bottom-color:transparent}
.dd-header.is-navactive .dd-menu-link,
.dd-header:has(.dd-menu-item--mega:hover) .dd-menu-link{color:#fff}
.dd-header.is-navactive .dd-brand-text,
.dd-header:has(.dd-menu-item--mega:hover) .dd-brand-text{color:#fff}
.dd-header.is-navactive .dd-brand-mark,
.dd-header:has(.dd-menu-item--mega:hover) .dd-brand-mark{color:#fff}
.dd-header.is-navactive .dd-brand-img,
.dd-header:has(.dd-menu-item--mega:hover) .dd-brand-img{filter:brightness(0) invert(1)}
/* 右侧胶囊按钮同样反白描边 */
.dd-header.is-navactive .dd-pill,
.dd-header:has(.dd-menu-item--mega:hover) .dd-pill{
    border-color:rgba(255,255,255,.65);color:#fff;background:transparent;
}
.dd-header.is-navactive .dd-pill:hover,
.dd-header:has(.dd-menu-item--mega:hover) .dd-pill:hover{background:#fff;color:var(--dd-primary-deep)}
.dd-header.is-navactive .dd-langsel-pill,
.dd-header:has(.dd-menu-item--mega:hover) .dd-langsel-pill{
    border-color:rgba(255,255,255,.65);color:#fff;background:transparent;
}
.dd-header.is-navactive .dd-langsel-pill:hover,
.dd-header:has(.dd-menu-item--mega:hover) .dd-langsel-pill:hover{background:rgba(255,255,255,.14)}
.dd-header.is-navactive .dd-icon-btn,
.dd-header:has(.dd-menu-item--mega:hover) .dd-icon-btn{border-color:rgba(255,255,255,.4);color:#fff}
.dd-header.is-navactive .dd-hamburger span,
.dd-header:has(.dd-menu-item--mega:hover) .dd-hamburger span{background:#fff}

/* ============ 已经滚成实底之后，悬停 mega 菜单不再把导航变深色 ============
   上面那组「悬停激活态」把 .dd-nav 刷成深蓝（--dd-primary-deep），权重 0,4,0；
   而滚回实底只改 .dd-header 的背景，字色又单独压在 .dd-menu-link 上——
   两个规则一叠加就成了「深蓝导航条 + 深色文字」，正是滚动后悬停看不清的原因。

   这里用更高的权重说清楚：一旦 is-scrolled，导航保持白底深字，悬停只负责
   展开面板，不再改导航条配色。放在这组规则之后，靠权重与顺序双重生效。 */
.dd-header.is-scrolled.is-navactive .dd-nav,
.dd-header.is-scrolled:has(.dd-menu-item--mega:hover) .dd-nav{
    background:#fff;border-bottom-color:var(--dd-line);
}
.dd-header.is-scrolled.is-navactive .dd-menu-link,
.dd-header.is-scrolled:has(.dd-menu-item--mega:hover) .dd-menu-link,
.dd-header.is-scrolled.is-navactive .dd-brand-text,
.dd-header.is-scrolled:has(.dd-menu-item--mega:hover) .dd-brand-text,
.dd-header.is-scrolled.is-navactive .dd-brand-mark,
.dd-header.is-scrolled:has(.dd-menu-item--mega:hover) .dd-brand-mark{color:var(--dd-ink)}
.dd-header.is-scrolled.is-navactive .dd-brand-img,
.dd-header.is-scrolled:has(.dd-menu-item--mega:hover) .dd-brand-img{filter:none}
.dd-header.is-scrolled.is-navactive .dd-pill,
.dd-header.is-scrolled:has(.dd-menu-item--mega:hover) .dd-pill{
    border-color:var(--dd-line);color:var(--dd-ink);background:#fff;
}
.dd-header.is-scrolled.is-navactive .dd-langsel-pill,
.dd-header.is-scrolled:has(.dd-menu-item--mega:hover) .dd-langsel-pill,
.dd-header.is-scrolled.is-navactive .dd-icon-btn,
.dd-header.is-scrolled:has(.dd-menu-item--mega:hover) .dd-icon-btn{
    border-color:var(--dd-line);color:var(--dd-ink);
}
.dd-header.is-scrolled.is-navactive .dd-hamburger span,
.dd-header.is-scrolled:has(.dd-menu-item--mega:hover) .dd-hamburger span{background:var(--dd-ink)}

/* ============ 右侧操作区 ============ */
.dd-nav-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.dd-pill{
    display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 10px;
    border:0.8px solid var(--dd-ink);border-radius:100px;background:transparent;
    color:var(--dd-ink);font-size:14px;font-weight:500;font-family:inherit;
    text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .16s,color .16s;
}
.dd-pill:hover{background:var(--dd-ink);color:#fff}

/* ============ 语言 / 货币选择器（逐项对齐 dynadot.com/zh） ============
   触发器：34px 高、左右 10px 内边距、0.8px #1A0F5E 描边、100px 全圆角、14px/500 字重
   面板：8px 12px 内边距、0.8px #E4E0F8 描边、4px 圆角
   行：36px 高、左内边距 18px、0.8px rgba(3,18,66,.1) 描边、6px 圆角
   子项：40px 高、左右 18px/29px 内边距、14px 字                       */
.dd-langsel{position:relative}
.dd-langsel-pill{
    display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 10px;
    border:0.8px solid var(--dd-ink);border-radius:100px;background:transparent;
    color:var(--dd-ink);font-size:14px;font-weight:500;font-family:inherit;
    cursor:pointer;white-space:nowrap;transition:background .16s,color .16s;
}
.dd-langsel-pill:hover{background:rgba(3,18,66,.05)}
.dd-langsel-pill[aria-expanded="true"]{background:rgba(3,18,66,.06)}
.dd-langsel-pill-text{line-height:1}
.dd-langsel-chev{flex-shrink:0;transition:transform .18s}
.dd-langsel.is-open .dd-langsel-pill .dd-langsel-chev{transform:rotate(180deg)}

.dd-langsel-panel{
    position:absolute;top:calc(100% + 6px);right:0;z-index:1002;
    display:none;flex-direction:column;gap:10px;
    padding:8px 12px;background:#fff;border:0.8px solid #E4E0F8;border-radius:4px;
    min-width:186px;
}
.dd-langsel.is-open .dd-langsel-panel{display:flex}

.dd-langsel-row{
    display:flex;align-items:center;justify-content:space-between;
    height:36px;width:156px;padding:0 0 0 18px;
    border:0.8px solid rgba(3,18,66,.1);border-radius:6px;background:#fff;
    color:var(--dd-ink);font-size:14px;font-weight:400;cursor:pointer;
    transition:border-color .16s,background .16s;
}
.dd-langsel-row:hover{border-color:rgba(3,18,66,.35);background:#FBFAFE}
.dd-langsel-row > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-langsel-row[aria-expanded="true"]{border-color:var(--dd-ink)}
.dd-langsel-row[aria-expanded="true"] .dd-langsel-chev{transform:rotate(180deg)}

.dd-langsel-sub{
    display:none;flex-direction:column;
    border:0.8px solid #E4E0F8;border-radius:4px;background:#fff;
    margin-left:15px;min-width:150px;max-height:288px;overflow-y:auto;
}
.dd-langsel-sub.is-open{display:flex}
.dd-langsel-sub-item{
    display:block;height:40px;line-height:40px;padding:0 29px 0 18px;
    font-size:14px;color:var(--dd-ink);text-decoration:none;white-space:nowrap;
    transition:background .12s;
}
.dd-langsel-sub-item:hover{background:#f2f5fa}
.dd-langsel-sub-item.is-active{background:#EDEBFB;font-weight:600}
.dd-cta{
    display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 16px;
    background:var(--dd-primary);color:#fff;border-radius:100px;font-size:14px;font-weight:600;
    text-decoration:none;white-space:nowrap;transition:background .16s;
}
.dd-cta:hover{background:var(--dd-primary-dark);color:#fff}
.dd-cta-block{width:100%}
.dd-cart-btn{padding:0 10px}
/* 登录按钮：图标 + 文字，字重 400（Dynadot 实测值） */
.dd-login-btn{font-weight:400}
.dd-user-btn{background:var(--dd-tint);border-color:var(--dd-tint);color:var(--dd-primary-dark)}
.dd-avatar{
    width:24px;height:24px;border-radius:50%;background:var(--dd-primary);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;
}
.dd-user-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-icon-btn{
    width:36px;height:36px;border:1px solid var(--dd-line);border-radius:100px;background:none;
    color:var(--dd-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .16s;
}
.dd-icon-btn:hover{color:var(--dd-primary);border-color:var(--dd-primary)}
.dd-hamburger{
    display:none;flex-direction:column;gap:4px;background:none;border:1px solid var(--dd-line);
    border-radius:10px;padding:8px 10px;cursor:pointer;
}
.dd-hamburger span{display:block;width:18px;height:2px;background:var(--dd-ink);border-radius:2px}

/* ============ 移动端 ============ */
.dd-mobile{
    display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;
    z-index:1200;overflow-y:auto;
}
.dd-mobile.is-open{display:block}
.dd-mobile-inner{padding:20px 0 40px}
.dd-mobile-inner > a{
    display:block;padding:11px 26px;font-size:14.5px;font-weight:500;color:#12203f;text-decoration:none;
}
.dd-mobile-inner > a:hover{background:var(--dd-tint);color:var(--dd-primary-dark)}
.dd-mobile-sec{
    padding:16px 26px 6px;font-size:12px;font-weight:700;color:var(--dd-muted);
    text-transform:uppercase;letter-spacing:.8px;
}
.dd-mobile-actions{display:flex;gap:10px;padding:22px 26px 0}
.dd-mobile-actions > a,.dd-mobile-actions > form{flex:1}

/* 抽屉里的语言 / 货币胶囊（与桌面选择器同一套取值） */
.dd-mobile-locale{padding:6px 0 0}
.dd-mobile-chips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 26px 4px}
.dd-mobile-chip{
    display:inline-flex;align-items:center;height:32px;padding:0 14px;
    border:0.8px solid rgba(3,18,66,.18);border-radius:100px;
    font-size:13.5px;color:var(--dd-ink);text-decoration:none;transition:all .15s;
}
.dd-mobile-chip:hover{border-color:var(--dd-ink)}
.dd-mobile-chip.is-active{background:var(--dd-ink);border-color:var(--dd-ink);color:#fff}
.dd-mobile-locale{display:none}
@media(max-width:860px){ .dd-mobile-locale{display:block} }

/* ============ 响应式 ============ */
/* ---- 菜单不换行后的分档收窄 ----
   宣传位列在所有宽度都固定 276px（对齐 Dynadot）；窄屏只收内边距与字号，保证单排不折行 */
@media(max-width:1300px){
    .dd-mega{padding:0 45px}
    .dd-mega-col{padding:0 16px}
    .dd-mega-col a{font-size:15px}
}
@media(max-width:1180px){
    .dd-mega{padding:0 24px}
    .dd-mega-col,.dd-mega-promo{padding:0 16px;min-width:auto}
    .dd-menu{display:none}
    .dd-hamburger{display:flex}
    .dd-nav-inner{gap:16px;padding:0 18px;height:66px}
    .dd-menu-link{height:66px}
}
@media(max-width:860px){
    /* 窄屏收起右上角选择器，语言与货币改到抽屉里（见 dd-mobile-locale） */
    .dd-langsel{display:none}
    .dd-login-btn span{display:none}
    .dd-login-btn{padding:0 12px}
}

/* ============ 暗色 ============ */
:root[data-theme="dark"] .dd-header,
:root[data-theme="dark"] .dd-nav{background:#171040 !important}
:root[data-theme="dark"] .dd-nav{border-bottom-color:#2A2060 !important}
:root[data-theme="dark"] .dd-brand-text,
:root[data-theme="dark"] .dd-menu-link{color:#EAE6FF !important}
:root[data-theme="dark"] .dd-dropdown{background:#171040 !important;border-color:#2A2060 !important}
:root[data-theme="dark"] .dd-dropdown a{color:#DCD6F7 !important}
:root[data-theme="dark"] .dd-dropdown a:hover{background:#241A5C !important;color:#A99BF5 !important}
:root[data-theme="dark"] .dd-menu-head{color:#9A93C7 !important}
:root[data-theme="dark"] .dd-pill{border-color:#453A80 !important;color:#DCD6F7 !important}
:root[data-theme="dark"] .dd-pill:hover{background:#453A80 !important;color:#fff !important}
:root[data-theme="dark"] .dd-hamburger span{background:#EAE6FF !important}
:root[data-theme="dark"] .dd-mobile{background:#0F0A2E !important}
:root[data-theme="dark"] .dd-mobile-inner > a{color:#DCD6F7 !important}
/* 语言/货币选择器暗色 */
:root[data-theme="dark"] .dd-langsel-pill{border-color:#453A80 !important;color:#DCD6F7 !important}
:root[data-theme="dark"] .dd-langsel-pill:hover,
:root[data-theme="dark"] .dd-langsel-pill[aria-expanded="true"]{background:#2A2060 !important}
:root[data-theme="dark"] .dd-langsel-panel{background:#171040 !important;border-color:#2A2060 !important}
:root[data-theme="dark"] .dd-langsel-row{background:#1D1550 !important;border-color:#302568 !important;color:#DCD6F7 !important}
:root[data-theme="dark"] .dd-langsel-row:hover{background:#241A5C !important;border-color:#453A80 !important}
:root[data-theme="dark"] .dd-langsel-row[aria-expanded="true"]{border-color:#4D33DE !important}
:root[data-theme="dark"] .dd-langsel-sub{background:#171040 !important;border-color:#2A2060 !important}
:root[data-theme="dark"] .dd-langsel-sub-item{color:#DCD6F7 !important}
:root[data-theme="dark"] .dd-langsel-sub-item:hover{background:#241A5C !important}
:root[data-theme="dark"] .dd-langsel-sub-item.is-active{background:#241A5C !important;color:#A99BF5 !important}

/* ============ 首页：主导航并入首屏背景（2026-09-25，参考 dynadot.com/zh） ============ */
:is(.page-home,.page-ownhero) .dd-header{background:transparent}
:is(.page-home,.page-ownhero) .dd-nav{background:transparent;border-bottom-color:transparent}
:is(.page-home,.page-ownhero) .dd-brand-text,:is(.page-home,.page-ownhero) .dd-brand-mark{color:#fff}
:is(.page-home,.page-ownhero) .dd-brand-img{filter:brightness(0) invert(1)}
:is(.page-home,.page-ownhero) .dd-menu-link{color:rgba(255,255,255,0.88)}
:is(.page-home,.page-ownhero) .dd-menu-link:hover,:is(.page-home,.page-ownhero) .dd-menu-item.is-open .dd-menu-link{color:#fff}
:is(.page-home,.page-ownhero) .dd-langsel-pill,:is(.page-home,.page-ownhero) .dd-icon-btn{color:#fff;border-color:rgba(255,255,255,0.26)}
:is(.page-home,.page-ownhero) .dd-langsel-pill:hover,:is(.page-home,.page-ownhero) .dd-icon-btn:hover{border-color:rgba(255,255,255,0.55)}
/* 向下滚动后回到实底，避免浅色内容上白字不可读 */
:is(.page-home,.page-ownhero) .dd-header.is-scrolled{background:#fff;box-shadow:0 8px 28px rgba(10,20,70,0.08)}
:is(.page-home,.page-ownhero) .dd-header.is-scrolled .dd-brand-text,
:is(.page-home,.page-ownhero) .dd-header.is-scrolled .dd-brand-mark,
:is(.page-home,.page-ownhero) .dd-header.is-scrolled .dd-menu-link,
:is(.page-home,.page-ownhero) .dd-header.is-scrolled .dd-langsel-pill,
:is(.page-home,.page-ownhero) .dd-header.is-scrolled .dd-icon-btn{color:var(--dd-ink)}
:is(.page-home,.page-ownhero) .dd-header.is-scrolled .dd-langsel-pill,
:is(.page-home,.page-ownhero) .dd-header.is-scrolled .dd-icon-btn{border-color:var(--dd-line)}
:is(.page-home,.page-ownhero) .dd-header.is-scrolled .dd-brand-img{filter:none}

/* ===== 手机抽屉改手风琴（参考 dynadot.com 手机菜单：分组折叠、点标题展开） ===== */
.dd-mobile-group{ border-bottom:1px solid var(--dd-line); }
.dd-mobile-head{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:16px 26px; font:inherit; font-size:15px; font-weight:700; color:var(--dd-ink);
    background:none; border:0; cursor:pointer; text-align:left;
}
.dd-mobile-head:active{ background:var(--dd-tint); }
.dd-mobile-arrow{
    width:8px; height:8px; flex:0 0 auto; border-right:2px solid var(--dd-ink); border-bottom:2px solid var(--dd-ink);
    transform:rotate(45deg); transition:transform .2s ease; margin-top:-4px;
}
.dd-mobile-group.is-open .dd-mobile-arrow{ transform:rotate(225deg); margin-top:4px; }
.dd-mobile-links{ display:none; padding:2px 0 12px; background:var(--dd-tint-2); }
.dd-mobile-group.is-open .dd-mobile-links{ display:block; }
.dd-mobile-links a{
    display:block; padding:13px 26px 13px 34px; font-size:14.5px; color:var(--dd-text);
    text-decoration:none; border-left:3px solid transparent;
}
.dd-mobile-links a:hover, .dd-mobile-links a:active{
    background:var(--dd-tint); color:var(--dd-primary-dark); border-left-color:var(--dd-primary);
}
@media(max-width:860px){
    .dd-mobile-inner{ padding:8px 0 28px; max-height:calc(100vh - 64px); overflow-y:auto; }
}

/* ===== 手机抽屉改版（参考 dynadot.com 手机菜单）：抽屉落在导航条「之下」，
   导航条（LOGO / 登录 / 购物车 / 汉堡→×）始终可见可点；原来 top:0 全屏把导航盖住了 ===== */
@media(max-width:860px){
    .dd-mobile{
        top:64px;               /* 打开时由脚本按真实导航高度精确设置 */
        bottom:0; left:0; right:0;
        z-index:999;            /* 低于导航条(1000/1200)，导航条永远在上面 */
        background:#fff;
    }
    .dd-mobile-inner{ max-height:none; padding:8px 0 28px; }
    .dd-hamburger span{ transition:transform .2s ease, opacity .15s ease; }
    .dd-hamburger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
    .dd-hamburger.is-open span:nth-child(2){ opacity:0; }
    .dd-hamburger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
    .dd-header{ z-index:1000; }   /* 明确层级：导航条压在抽屉之上 */
}

/* 手机抽屉胶囊（深色）：选中态原来用 var(--dd-ink) 作底，而暗色主题把该变量翻成浅色 →
   变成「浅底 + 白字」看不清；这里显式指定品牌紫底 + 白字 */
:root[data-theme="dark"] .dd-mobile .dd-mobile-chip{
    background:transparent !important; border-color:#453A80 !important; color:#DCD6F7 !important;
}
:root[data-theme="dark"] .dd-mobile .dd-mobile-chip.is-active{
    background:#4D33DE !important; border-color:#4D33DE !important; color:#fff !important;
}
:root[data-theme="dark"] .dd-mobile .dd-mobile-chip:hover{ border-color:#7C6BE0 !important; color:#fff !important; }
:root[data-theme="dark"] .dd-mobile .dd-mobile-sec{ color:#9A93C7 !important; }

/* ===== page-home 手机端导航按键：首页导航压在深色首屏上，
   而原来只给 .has-band（板块背景带页）做了对比度处理，首页漏了 →
   浅色模式：纯白按键 + 深色图标/杠；深色模式：透明底 + 白图标/杠（口径与板块页一致） ===== */
@media (max-width:860px){
    body:is(.page-home,.page-ownhero) .dd-header .dd-pill,
    body:is(.page-home,.page-ownhero) .dd-header .dd-hamburger,
    body:is(.page-home,.page-ownhero) .dd-header .dd-langsel-pill{
        background:#fff; border-color:#fff; color:var(--dd-ink);
        box-shadow:0 4px 14px rgba(10,20,70,.16);
    }
    body:is(.page-home,.page-ownhero) .dd-header .dd-hamburger span{ background:var(--dd-ink); }
    /* 滚动后导航条变白 → 回落描边款，避免白上白 */
    body:is(.page-home,.page-ownhero) .dd-header.is-scrolled .dd-pill,
    body:is(.page-home,.page-ownhero) .dd-header.is-scrolled .dd-hamburger,
    body:is(.page-home,.page-ownhero) .dd-header.is-scrolled .dd-langsel-pill{
        background:#fff; border-color:var(--dd-line); box-shadow:none;
    }
    body:is(.page-home,.page-ownhero) .dd-header.is-scrolled .dd-hamburger span{ background:var(--dd-ink); }

    /* 深色主题：按键透明 + 白描边 + 白图标/杠 */
    :root[data-theme="dark"] body:is(.page-home,.page-ownhero) .dd-header .dd-pill,
    :root[data-theme="dark"] body:is(.page-home,.page-ownhero) .dd-header .dd-hamburger,
    :root[data-theme="dark"] body:is(.page-home,.page-ownhero) .dd-header .dd-langsel-pill{
        background:transparent; border-color:rgba(255,255,255,.45); color:#fff; box-shadow:none;
    }
    :root[data-theme="dark"] body:is(.page-home,.page-ownhero) .dd-header .dd-hamburger span{ background:#fff !important; }
}

/* ===== 深色模式全站统一（2026-09-26）：手机端导航三个控件在任何页面都要看得见 =====
   之前只按 body:is(.page-home,.page-ownhero) / body.has-band 分页面写，漏了其它页；深色主题下导航条恒为深底，
   所以这里不再分页面：控件一律「透明底 + 白描边 + 白图标」，三条杠与关闭 × 一律白色。 */
@media (max-width:860px){
    :root[data-theme="dark"] .dd-header .dd-pill,
    :root[data-theme="dark"] .dd-header .dd-hamburger,
    :root[data-theme="dark"] .dd-header .dd-langsel-pill{
        background:transparent !important;
        border-color:rgba(255,255,255,.5) !important;
        color:#fff !important;
        box-shadow:none !important;
    }
    :root[data-theme="dark"] .dd-header .dd-pill:hover,
    :root[data-theme="dark"] .dd-header .dd-hamburger:hover,
    :root[data-theme="dark"] .dd-header .dd-langsel-pill:hover{
        background:rgba(255,255,255,.12) !important;
        border-color:rgba(255,255,255,.75) !important;
    }
    /* 关键：三条杠 / 打开后的 × 都改纯白（原来暗色主题给的是 #EAE6FF，若落到白底上就看不见） */
    :root[data-theme="dark"] .dd-header .dd-hamburger span{ background:#fff !important; }
}

/* ===== 首页导航按钮：全宽度口径（2026-09-26）=====
   原来只写了 @media(max-width:860px)，桌面宽度下首页导航压在深色首屏上仍是
   "深色描边 + 深色图标"看不见。这里把浅色主题的处理提到全宽度；
   汉堡按钮只在 ≤1180 显示，所以它单独留在媒体查询里。 */
body:is(.page-home,.page-ownhero) .dd-header .dd-pill,
body:is(.page-home,.page-ownhero) .dd-header .dd-langsel-pill{
    background:#fff !important; border-color:#fff !important; color:var(--dd-ink) !important;
    box-shadow:0 4px 14px rgba(10,20,70,.16) !important;
}
body:is(.page-home,.page-ownhero) .dd-header .dd-pill:hover,
body:is(.page-home,.page-ownhero) .dd-header .dd-langsel-pill:hover{
    background:#fff !important; border-color:#fff !important; color:var(--dd-primary) !important;
}
/* 滚动后导航条变白 → 回落描边款，避免白上白 */
body:is(.page-home,.page-ownhero) .dd-header.is-scrolled .dd-pill,
body:is(.page-home,.page-ownhero) .dd-header.is-scrolled .dd-langsel-pill{
    background:#fff !important; border-color:var(--dd-line) !important; color:var(--dd-ink) !important; box-shadow:none !important;
}
/* 深色主题：透明底 + 白描边 + 白图标（全宽度） */
:root[data-theme="dark"] body:is(.page-home,.page-ownhero) .dd-header .dd-pill,
:root[data-theme="dark"] body:is(.page-home,.page-ownhero) .dd-header .dd-langsel-pill{
    background:transparent !important; border-color:rgba(255,255,255,.45) !important; color:#fff !important; box-shadow:none !important;
}
@media (max-width:1180px){
    body:is(.page-home,.page-ownhero) .dd-header .dd-hamburger{
        background:#fff !important; border-color:#fff !important; box-shadow:0 4px 14px rgba(10,20,70,.16) !important;
    }
    body:is(.page-home,.page-ownhero) .dd-header .dd-hamburger span{ background:var(--dd-ink) !important; }
    body:is(.page-home,.page-ownhero) .dd-header.is-scrolled .dd-hamburger{
        background:#fff !important; border-color:var(--dd-line) !important; box-shadow:none !important;
    }
    body:is(.page-home,.page-ownhero) .dd-header.is-scrolled .dd-hamburger span{ background:var(--dd-ink) !important; }
    :root[data-theme="dark"] body:is(.page-home,.page-ownhero) .dd-header .dd-hamburger{
        background:transparent !important; border-color:rgba(255,255,255,.45) !important; box-shadow:none !important;
    }
    :root[data-theme="dark"] body:is(.page-home,.page-ownhero) .dd-header .dd-hamburger span{ background:#fff !important; }
}