/* ============================================================
   闪得超级菜单 - Elementor 适配样式
   复用 header.css / mega.css，仅做必要的定位/字体适配
   ============================================================ */

/* 提供 header.css / mega.css 所需的 CSS 变量（原本来自 base.css）
   作用域限定在小部件内，避免污染整页 */
.shande-header,
.shande-nav-standalone {
  --primary: #096ddd;
  --primary-light: #49c9e9;
  --primary-dark: #0857b0;
  --gradient-start: #096ddd;
  --gradient-end: #49c9e9;
  --text-primary: #1e293b;
  --border-color: #e2e8f0;
  --header-height: 64px;
}

/* 盒模型与首页一致（作用域内，不影响整页） */
.shande-header,
.shande-header *,
.shande-nav-standalone,
.shande-nav-standalone * {
  box-sizing: border-box;
}

/* 统一字体，与首页保持一致 */
.shande-header,
.shande-header input,
.shande-header button,
.shande-nav-standalone,
.shande-nav-standalone input,
.shande-nav-standalone button {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 移除搜索框聚焦时主题注入的虚线框 / 高亮描边（页眉与移动抽屉搜索框） */
.shande-header .search-input:focus,
.shande-header .search-input:focus-visible,
.shande-header .nav-mobile-search .search-input:focus,
.shande-header .nav-mobile-search .search-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* ---------- 完整页眉小部件：透明 fixed 与普通 sticky 分流 ---------- */

/*
 * 前置条件：让 <body> 不再是滚动容器，否则下面的 sticky 全部失效。
 *
 * 父主题 Astra 的 main.min.css 里有 `body { overflow-x: hidden }`。按 CSS 规范，
 * 非根元素一旦有一个轴是 hidden，另一个轴的 visible 会被计算成 auto，body 因此
 * 成为滚动容器。position: sticky 只相对最近的滚动容器吸顶，而页面真正的滚动发生
 * 在视口、body 自身的滚动偏移恒为 0，页眉就永远不会吸顶；同时 .shande-sticky-host
 * 的 top（黑条 32px）在初始帧就被套上，表现为页眉与黑条之间凭空多出 32px。
 *
 * 这里把 body 的横向裁剪改回 clip：clip 同样能防止横向滚动，但不建立滚动容器，
 * 因此 sticky 重新以视口为参照。用 overflow-x 单独声明（而非 overflow），避免
 * 影响纵向。仅前端生效，不触碰 Elementor 编辑器。
 */
html body:not(.elementor-editor-active) {
  overflow-x: clip;
}

/*
 * 编辑器内同样中和 Astra 的 body{overflow-x:hidden}。
 *
 * 编辑器里页眉改为占位（position:relative）后重新进入文档流、占据自身高度，
 * 被编辑文档（常带 min-height:100vh）加上页眉高度即超过视口。此时 Astra 的
 * body{overflow-x:hidden} 会按规范把 body 变成滚动容器（另一轴 visible→auto），
 * 于是 body 与根元素各出一条竖向滚动条 —— 画布右侧出现两条、且相互打架滚不动。
 * 用 overflow-x:clip 防横向溢出但不建立滚动容器，编辑画布仍由根元素正常单条滚动。
 */
html body.elementor-editor-active {
  overflow-x: clip;
}

/* 开启页面「透明页眉」时浮于首屏内容上方，仅该模式脱离文档流。 */
html body:not(.elementor-editor-active) .header.shande-header.shande-fixed {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  z-index: 1000 !important;
}

/* 未开启透明页眉时保留在文档流中，到达视口顶部后原生吸顶。
 * 优先由 JS 标记页眉模板宿主为 sticky，避免 Elementor 的短小 widget 包裹层限制吸顶范围；
 * 若找不到模板宿主，页眉自身仍作为降级方案使用 sticky。 */
html body:not(.elementor-editor-active) .header.shande-header.shande-sticky {
  position: sticky !important;
  top: 0 !important;
  right: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 1000 !important;
}
html body:not(.elementor-editor-active) .shande-sticky-host {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}
html body:not(.elementor-editor-active) .shande-sticky-host .header.shande-header.shande-sticky {
  position: relative !important;
  top: auto !important;
}

/* 抽屉专用元素（Logo / 底部链接 / 搜索框）默认（桌面端）隐藏，仅移动端抽屉显示，
   避免在桌面横向导航栏里冒出第二个 Logo 与商家入驻/VIP 文字。 */
.header.shande-header .nav .nav-mobile-logo,
.header.shande-header .nav .nav-mobile-links {
  display: none;
}

/*
 * 适配 WordPress 后台黑色工具条（#wpadminbar）：登录后 body.admin-bar 存在时，
 * 固定页眉整体下移，避免被工具条遮挡。桌面 32px；≤782px 工具条高 46px；
 * ≤600px 工具条改为随页面滚动（非固定），页眉回到 top:0。
 */
html body.admin-bar:not(.elementor-editor-active) .header.shande-header.shande-fixed,
html body.admin-bar:not(.elementor-editor-active) .shande-sticky-host {
  top: 32px !important;
}
html body.admin-bar:not(.elementor-editor-active) .header.shande-header .header-search {
  top: 100% !important;
}
@media screen and (max-width: 782px) {
  html body.admin-bar:not(.elementor-editor-active) .header.shande-header.shande-fixed,
  html body.admin-bar:not(.elementor-editor-active) .shande-sticky-host {
    top: 46px !important;
  }
  html body.admin-bar:not(.elementor-editor-active) .header.shande-header .header-search {
    top: 100% !important;
  }
}
@media screen and (max-width: 600px) {
  html body.admin-bar:not(.elementor-editor-active) .header.shande-header.shande-fixed,
  html body.admin-bar:not(.elementor-editor-active) .shande-sticky-host {
    top: 0 !important;
  }
  html body.admin-bar:not(.elementor-editor-active) .header.shande-header .header-search {
    top: 100% !important;
  }
}
/* 移动端抽屉：601–782px 工具条为 46px 固定，抽屉整体下移让出工具条高度。 */
@media screen and (min-width: 601px) and (max-width: 782px) {
  html body.admin-bar:not(.elementor-editor-active) .header.shande-header .nav {
    top: 46px !important;
    height: calc(100vh - 46px) !important;
  }
}

/*
 * JS 移到 body 的 Elementor {{WRAPPER}} 只作为样式作用域宿主，不再占据布局宽度。
 * 这样不同页面保存的容器宽度、margin、transform 都不会制造横向滚动条。
 */
html body:not(.elementor-editor-active) > .elementor-widget.shande-header-host {
  position: static !important;
  display: block !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

/*
 * 账户入口状态锁：兼容缓存中的新旧页眉结构。
 * 未登录只显示登录/注册，登录后只显示头像个人中心。
 */
html body:not(.logged-in) .header.shande-header .user-avatar-wrap,
html body:not(.logged-in) .header.shande-header .user-avatar-mini {
  display: none !important;
}
html body.logged-in .header.shande-header .header-link--login,
html body.logged-in .header.shande-header .header-link.shande-login-trigger,
html body.logged-in .header.shande-header .mobile-icon--user.shande-login-trigger {
  display: none !important;
}

/* 实底磨砂与深色文字恒定，所有页面和滚动位置均与首页目标状态一致。 */
html body .header.shande-header::before {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  opacity: 1 !important;
}
/* ===== 透明页眉（页面「透明页眉」自定义字段开启）：顶部透明浮层；
   滚动后由 header.js 加 .scrolled 恢复实底磨砂，与首页一致 ===== */
html body .header.shande-header.shande-transparent:not(.scrolled)::before {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 0 !important;
}
html body .header.shande-header.shande-transparent:not(.scrolled) .logo-text-main,
html body .header.shande-header.shande-transparent:not(.scrolled) .logo-text-sub,
html body .header.shande-header.shande-transparent:not(.scrolled) .logo-text-desc,
html body .header.shande-header.shande-transparent:not(.scrolled) .nav-item {
  color: #fff !important;
}
html body .header.shande-header.shande-transparent:not(.scrolled) .header-link:not(:hover) {
  color: var(--shande-header-transparent-link-color, #fff);
}
html body .header.shande-header .logo-text-main,
html body .header.shande-header .logo-text-sub {
  color: #111827 !important;
}
html body .header.shande-header .logo-text-desc {
  color: #6b7280 !important;
}
html body .header.shande-header .nav-item {
  color: #374151 !important;
}
html body .header.shande-header .header-link {
  color: #374151;
}
/* 导航项间距：消费小部件「导航项间距」控件写入的 --shande-nav-gap。
   用 html body 前缀把特异度抬到 header.css 写死的 `.header.scrolled .nav{gap:2px}` 之上，
   未设置控件时回退 2px（与首页默认一致）。仅桌面端，移动端抽屉 gap 不受影响。 */
@media (min-width: 769px) {
  html body .header.shande-header .nav {
    gap: var(--shande-nav-gap, 2px);
  }
}
html body .header.shande-header .nav-item:hover {
  color: #111827 !important;
  background: rgba(17, 24, 39, 0.06) !important;
}
html body .header.shande-header .header-link:hover {
  color: #096ddd;
}

/* 常显语言入口：使用 TranslatePress 原生链接，独立于移动端账户链接显隐。 */
.header.shande-header .header-language-switcher {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.header.shande-header .header-language-switcher__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 0;
  color: #374151;
  text-decoration: none;
}
.header.shande-header .header-language-switcher__link + .header-language-switcher__link {
  padding-left: 8px;
  border-left: 1px solid var(--border-color, #e2e8f0);
}
.header.shande-header .header-language-switcher__link:hover,
.header.shande-header .header-language-switcher__link.is-current {
  color: var(--primary, #096ddd);
}
.header.shande-header .header-language-switcher__link.is-current {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.header.shande-header .header-language-switcher__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.header.shande-header.shande-transparent:not(.scrolled) .header-language-switcher__link {
  color: var(--shande-header-transparent-link-color, #fff);
}
.header.shande-header.shande-transparent:not(.scrolled) .header-language-switcher__link + .header-language-switcher__link {
  border-left-color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 768px) {
  .header.shande-header .header-language-switcher {
    gap: 6px;
    font-size: 12px;
  }
  .header.shande-header .header-language-switcher__link + .header-language-switcher__link {
    padding-left: 6px;
  }
}
@media (max-width: 480px) {
  /* 窄屏只显示目标语言，为原有 Logo 与账户入口留出空间。 */
  .header.shande-header .header-language-switcher__link.is-current {
    display: none;
  }
  .header.shande-header .header-language-switcher__link + .header-language-switcher__link {
    padding-left: 0;
    border-left: 0;
  }
}

html body .header.shande-header .header-search-toggle:hover {
  color: #096ddd !important;
}
/* 激活态（面板展开）搜索按钮为蓝色渐变底，此时悬停保持白字，避免蓝底蓝字看不清。 */
html body .header.shande-header .header-search-toggle.is-active,
html body .header.shande-header .header-search-toggle.is-active:hover {
  color: #fff !important;
}

/* 注意：搜索触发按钮 .header-search-toggle 的显隐沿用 header.css；
   统一状态始终带 .scrolled，因此所有页面都会显示相同入口。 */

/* ---------- 单个超级菜单项小部件 ---------- */
.shande-nav-standalone {
  position: relative;
  display: flex;
  align-items: center;
}

/* 深色文字（用于浅色背景） */
.shande-nav.shande-scheme--dark .nav-item {
  color: #374151;
}
.shande-nav.shande-scheme--dark .nav-item:hover {
  color: #111827;
  background: rgba(17, 24, 39, 0.06);
}

/* 浅色文字（用于深色背景） */
.shande-nav.shande-scheme--light .nav-item {
  color: rgba(255, 255, 255, 0.85);
}
.shande-nav.shande-scheme--light .nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

/* Elementor 编辑器中保证下拉不被裁剪 */
.elementor-widget-shande_mega_menu .elementor-widget-container,
.elementor-widget-shande_mega_header .elementor-widget-container {
  overflow: visible;
}

/* ============================================================
   模板短码渲染的超级菜单下拉（.mega-menu--tpl）
   ------------------------------------------------------------
   结构：.mega-menu--tpl（相对父菜单项 .nav-item-wrap 绝对定位）
            └ .elementor > .e-con（Elementor 容器，默认全宽 / 盒式）
                 └ .shande-mega-standalone .mega-menu（真正的三列面板，有自然宽度）

   定位原理：.mega-menu--tpl 绝对定位于父菜单项 .nav-item-wrap 下方，
   用 left:50% + translateX(-50%) 把「面板中心」对齐到「父菜单项中心」——
   这就是父类下方居中。要让居中精确，面板宽度必须等于「内容自然宽度」，
   因此外层与内部 Elementor 包裹链统一用 max-content / 收缩到内容，
   绝不能用固定宽度或全宽（否则面板过宽、居中后偏移、左侧被裁切）。
   ============================================================ */
.mega-menu.mega-menu--tpl {
  /* 去掉外层自带的面板视觉（背景/模糊/阴影/圆角/内边距/彩条），
     真正的面板视觉由最内层 .shande-mega-standalone .mega-menu 提供，避免双层面板 */
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;

  /* 宽度跟随内容（与源码 mega.css 一致），再用 left:50% + translateX(-50%)
     把面板中心对齐父菜单项中心 —— 即父类正下方居中 */
  width: -moz-max-content !important;
  width: max-content !important;
  max-width: calc(100vw - 32px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(0.985);
}
.mega-menu.mega-menu--tpl::before {
  display: none;
}

/* 仅悬停对应菜单项时显示（重申隐藏态，防止内部模板被强制常显）。
   隐藏态额外加 pointer-events:none 作为双保险，确保透明面板绝不接收鼠标、
   不会因悬停透明区域而触发显示。 */
.nav-item-wrap.has-mega > .mega-menu.mega-menu--tpl {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nav-item-wrap.has-mega:hover > .mega-menu.mega-menu--tpl,
.nav-item-wrap.has-mega:focus-within > .mega-menu.mega-menu--tpl {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* 内部 Elementor 包裹链：全部改为 display:contents，
   ------------------------------------------------------------
   关键：display:contents 让这些容器「不生成任何盒子」，其子元素直接
   提升到父级参与布局。这样中间层（尤其是盒式容器 .e-con-boxed 的全宽 /
   padding / --content-width）就彻底不再干扰宽度，
   最内层三列面板 .shande-mega-standalone .mega-menu 直接成为
   .mega-menu--tpl 的布局子元素 —— 其 max-content 宽度精确传递到外层，
   translateX(-50%) 才能相对「面板真实宽度」精确居中于父菜单项下方。 */
.mega-menu.mega-menu--tpl > .elementor,
.mega-menu.mega-menu--tpl .elementor-section-wrap,
.mega-menu.mega-menu--tpl .e-con,
.mega-menu.mega-menu--tpl .e-con-inner,
.mega-menu.mega-menu--tpl .elementor-section,
.mega-menu.mega-menu--tpl .elementor-container,
.mega-menu.mega-menu--tpl .elementor-widget-wrap,
.mega-menu.mega-menu--tpl .elementor-widget,
.mega-menu.mega-menu--tpl .elementor-widget-shande_mega_menu,
.mega-menu.mega-menu--tpl .elementor-widget-container,
.mega-menu.mega-menu--tpl .shande-mega-standalone {
  display: contents !important;
}

/* 最内层真正的三列面板：块级，宽度由三列 flex 内容自然决定。
   ------------------------------------------------------------
   关键：visibility 用 inherit（而非 visible），让内层跟随外层
   .mega-menu--tpl 的显隐 —— 隐藏态外层是 visibility:hidden，内层继承后
   同样不接收鼠标事件，透明区域不会再触发悬停（否则鼠标碰到透明面板
   就会显示）。opacity 保持 1，整体透明度由外层 opacity 叠加控制。 */
.mega-menu.mega-menu--tpl .shande-mega-standalone .mega-menu {
  display: block !important;
  position: static !important;
  width: -moz-max-content !important;
  width: max-content !important;
  max-width: calc(100vw - 32px) !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: inherit !important;
  transition: none !important;
}

/* ============================================================
   静态超级菜单面板小部件（仅面板，无上方导航名称）
   把 mega.css 里的悬浮下拉强制改为静态常显
   ============================================================ */
.shande-mega-standalone {
  --primary: #096ddd;
  --primary-light: #49c9e9;
  --primary-dark: #0857b0;
  --gradient-start: #096ddd;
  --gradient-end: #49c9e9;
  --text-primary: #1e293b;
  --border-color: #e2e8f0;
  display: block;
}
.shande-mega-standalone,
.shande-mega-standalone * {
  box-sizing: border-box;
}
.shande-mega-standalone {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 强制面板静态常显（覆盖 mega.css 的绝对定位/隐藏/位移） */
.shande-mega-standalone .mega-menu {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: none;
  z-index: auto;
  display: inline-block;
  max-width: 100%;
}

/* 去掉主题给链接加的下划线 */
.shande-mega-standalone .mega-list a,
.shande-mega-standalone .mega-list a:hover,
.shande-mega-standalone .mega-list a:focus,
.shande-mega-standalone .mega-col__title {
  text-decoration: none !important;
}

/* 链接文字位置 1:1 复刻源码（覆盖主题的居中/字号/行高干扰） */
.shande-mega-standalone .mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.shande-mega-standalone .mega-list li {
  margin: 0;
  padding: 0;
  text-align: left;
}
.shande-mega-standalone .mega-list li + li {
  margin-top: 2px;
}
.shande-mega-standalone .mega-list a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: inherit;
  text-align: left;
}
.shande-mega-standalone .mega-list b {
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
  text-align: left;
}
.shande-mega-standalone .mega-col__title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
}

/* ============================================================
   仅 Elementor 编辑器内：便于预览
   ------------------------------------------------------------
   统一策略：编辑器里页眉一律呈现为「吸顶后」的实底占位页眉——留在文档流、
   占据自身高度、实底磨砂 + 深色文字。透明页眉也不例外（由 mega-elementor.js 在
   编辑器内补 .scrolled 实现，使 :not(.scrolled) 的透明规则失配），因此编辑画布里
   不会再出现白底白字的空白页眉。

   - position:relative：脱离前端 fixed，回到文档流，方便画布选中拖拽；
     JS 亦写同值内联样式，两者一致。
   - 去掉页眉小部件外层容器的上下内边距/外边距：前端页眉只占自身高度（64px），
     编辑器里容器默认留白会让页眉上下凭空多出边距，这里按占位页眉抹平。
   （仅编辑器生效，真实前端仍是首页同款固定吸顶 + 透明初始）
   ============================================================ */
body.elementor-editor-active .header.shande-header.shande-fixed {
  position: relative;
}

/* 抹平页眉小部件外层的上下留白，避免编辑画布里页眉上下多出边距。 */
body.elementor-editor-active .elementor-widget-shande_mega_header,
body.elementor-editor-active .elementor-widget-shande_mega_header > .elementor-widget-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* ============================================================
   页眉小部件 - 手机端样式（1:1 复刻 responsive.css，作用域化）
   ============================================================ */
@media (max-width: 768px) {
  .header.shande-header .header-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0 clamp(10px, 3vw, 16px);
    gap: clamp(6px, 2vw, 10px);
  }

  /* 左右两组允许按可用宽度收缩，避免 flex 默认 min-width:auto 撑出视口。 */
  .header.shande-header .header-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: clamp(6px, 2vw, 10px);
  }

  .header.shande-header .logo {
    flex: 0 1 auto;
    min-width: 0;
    gap: clamp(6px, 2vw, 10px);
  }

  .header.shande-header .logo-icon {
    width: clamp(30px, 8vw, 34px);
    height: clamp(30px, 8vw, 34px);
  }

  .header.shande-header .logo-text-group {
    min-width: 0;
    overflow: hidden;
  }

  .header.shande-header .logo-text-main,
  .header.shande-header .logo-text-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header.shande-header .logo-text-desc {
    display: none;
  }

  /* 显示汉堡菜单，且不参与收缩。 */
  .header.shande-header .mobile-menu-toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }

  /* 手机端账户入口由服务端按状态互斥：未登录显示登录/注册，登录后显示头像。 */
  .header.shande-header .header-link {
    display: inline-flex !important;
    flex: 0 0 auto;
    font-size: clamp(11px, 3.2vw, 13px);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
  }
  .header.shande-header.scrolled .header-link {
    color: #111827;
  }

  /* 手机端隐藏「商家入驻」「VIP会员」文字链接（收纳进抽屉/精简顶栏）。 */
  .header.shande-header .header-link--merchant,
  .header.shande-header .header-link--vip {
    display: none !important;
  }

  /* 汉堡菜单按钮固定在最右侧（头像之后）。 */
  .header.shande-header .mobile-menu-toggle {
    order: 99;
    margin-left: 2px;
  }

  .header.shande-header[data-account-state="logged-out"] .header-link--login {
    display: inline-flex !important;
  }

  .header.shande-header[data-account-state="logged-in"] .header-link--login,
  .header.shande-header[data-account-state="logged-in"] .header-link.shande-login-trigger {
    display: none !important;
  }

  .header.shande-header[data-account-state="logged-out"] .user-avatar-wrap,
  .header.shande-header[data-account-state="logged-out"] .user-avatar-mini {
    display: none !important;
  }

  .header.shande-header .header-right {
    flex: 0 0 auto;
    min-width: 0;
    gap: clamp(6px, 2vw, 10px);
    white-space: nowrap;
  }

  /* 搜索触发按钮在手机端隐藏（用抽屉内搜索框） */
  .header.shande-header .header-search-toggle {
    display: none !important;
  }

  /* 不显示移动端图标（与源码一致，手机端用头像入口） */
  .header.shande-header .mobile-icon {
    display: none !important;
  }

  /* 用户头像：显示但不展开下拉 */
  .header.shande-header .user-avatar-wrap {
    display: inline-flex;
    flex: 0 0 auto;
  }
  .header.shande-header .user-avatar-wrap .user-dropdown {
    display: none !important;
  }

  /* 汉堡菜单：侧边栏抽屉（从左侧滑入） */
  .header.shande-header .nav {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 76%;
    max-width: 300px;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: calc(var(--header-height) + 8px) 16px 24px;
    box-shadow: 2px 0 24px rgba(0, 0, 0, 0.18);
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1300;
    overflow-y: auto;
  }

  .header.shande-header .nav.nav--mobile-open {
    transform: translateX(0);
  }

  /* 抽屉顶部：与页眉同步的 Logo（覆盖顶部 header-height 内边距，改由 logo 占位）。 */
  .header.shande-header .nav {
    padding-top: 16px;
  }
  .header.shande-header .nav .nav-mobile-logo {
    display: block;
    flex: 0 0 auto;
    padding: 4px 6px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid #eef0f3;
  }
  .header.shande-header .nav .nav-mobile-logo .logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }
  .header.shande-header .nav .nav-mobile-logo .logo-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }
  .header.shande-header .nav .nav-mobile-logo .logo-text-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .header.shande-header .nav .nav-mobile-logo .logo-text-main {
    font-size: 14px;
    font-weight: 700;
    color: #1d2129;
    line-height: 1.2;
  }
  .header.shande-header .nav .nav-mobile-logo .logo-text-sub {
    font-size: 11px;
    color: #86909c;
    line-height: 1.2;
  }
  .header.shande-header .nav .nav-mobile-logo .logo-text-desc {
    display: none;
  }

  /* 抽屉底部：固定「商家入驻 / VIP会员」入口。 */
  .header.shande-header .nav .nav-mobile-links {
    display: flex;
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #eef0f3;
    flex-direction: column;
    gap: 8px;
  }
  .header.shande-header .nav .nav-mobile-links .header-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: #374151 !important;
    background: #f5f7fa;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
  }
  .header.shande-header .nav .nav-mobile-links .header-link--merchant {
    color: #096ddd !important;
    background: rgba(9, 109, 221, 0.08);
  }
  .header.shande-header .nav .nav-mobile-links .header-link--vip {
    color: #b3771a !important;
    background: linear-gradient(135deg, rgba(246, 199, 78, 0.18), rgba(226, 165, 39, 0.14));
  }

  .header.shande-header .nav .nav-item {
    color: #374151;
    padding: 11px 12px;
    border-radius: 8px;
    font-size: 14px;
    text-align: left;
  }

  .header.shande-header .nav .nav-item.is-active {
    color: #096ddd;
    background: rgba(9, 109, 221, 0.09);
  }

  /*
   * 抽屉内文字恒为深色（修复：初始态点开汉堡菜单一片空白）。
   *
   * 透明页眉在页面顶部（未加 .scrolled）时，全局规则
   *   .shande-header.shande-transparent:not(.scrolled) .nav-item / .logo-text-* { color:#fff !important }
   * 会把导航项与 Logo 文字刷成白色 —— 那是给首屏透明浮层用的。但移动端汉堡抽屉
   * 背景恒为白色，白字落在白底上就成了「空白」；下滑后 JS 补上 .scrolled，该规则
   * 失配、文字转深色，于是「滑动后再点就正常」。
   *
   * 抽屉背景与滚动状态无关，这里按抽屉的既定深色用更高特异度 + !important 锁回，
   * 不改变任何页面的既有视觉（桌面横向导航、实底页眉均不受影响，抽屉本就该是深字），
   * 仅修复透明页眉初始态下抽屉不可见的问题。选择器特异度 (0,6,2)/(0,7,2) 高于
   * 透明规则的 (0,5,2)，确保恒定生效。
   */
  html body .header.shande-header .header-inner .header-left .nav .nav-item {
    color: #374151 !important;
  }
  html body .header.shande-header .header-inner .header-left .nav .nav-item.is-active {
    color: #096ddd !important;
  }
  html body .header.shande-header .header-inner .header-left .nav .nav-mobile-logo .logo-text-main {
    color: #1d2129 !important;
  }
  html body .header.shande-header .header-inner .header-left .nav .nav-mobile-logo .logo-text-sub {
    color: #86909c !important;
  }

  /* mega 导航项竖向排列 */
  .header.shande-header .nav .nav-item-wrap {
    position: static;
    width: 100%;
    border-bottom: 1px solid #f3f4f6;
  }

  .header.shande-header .nav .nav-item-wrap .nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .header.shande-header .nav .nav-item-wrap .nav-item > svg {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    color: #9ca3af;
  }
  .header.shande-header .nav .nav-item-wrap.is-expanded .nav-item > svg {
    transform: rotate(180deg);
  }

  /* mega 大菜单在抽屉内展开为静态折叠列表 */
  .header.shande-header .nav .mega-menu {
    display: block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    pointer-events: auto;
    box-sizing: border-box;
  }
  .header.shande-header .nav .mega-menu::before { display: none !important; }
  .header.shande-header .nav .nav-item-wrap.is-expanded .mega-menu {
    max-height: 1500px;
  }

  .header.shande-header .nav .mega-menu__inner {
    display: block !important;
    grid-template-columns: none !important;
    padding: 4px 0 8px !important;
    gap: 0 !important;
    width: 100%;
    box-sizing: border-box;
  }

  .header.shande-header .nav .mega-col {
    min-width: 0;
    width: 100%;
    border: none !important;
    padding: 0 0 8px;
  }

  .header.shande-header .nav .mega-col__title {
    padding: 8px 0 6px;
    font-size: 12px;
    color: #9ca3af;
    border-bottom: none;
    margin-bottom: 2px;
  }

  .header.shande-header .nav .mega-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100%;
    box-sizing: border-box;
  }

  .header.shande-header .nav .mega-list li { margin: 0 !important; min-width: 0; }

  .header.shande-header .nav .mega-list a {
    display: block;
    padding: 7px 8px;
    border-radius: 6px;
    background: #f7f9fc;
    transform: none !important;
    text-align: center;
  }
  .header.shande-header .nav .mega-list a:hover {
    background: #eff6ff;
    transform: none !important;
  }

  .header.shande-header .nav .mega-list b {
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 隐藏桌面端 header-search 面板 */
  .header.shande-header .header-search {
    display: none !important;
  }

  /* 侧边栏搜索框 */
  .header.shande-header .nav .nav-mobile-search {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 4px 4px 4px 12px;
    border: 1px solid #e5e7eb;
  }

  .header.shande-header .nav .nav-mobile-search .search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    background: transparent;
    font-family: inherit;
    color: #111827;
    min-width: 0;
  }

  .header.shande-header .nav .nav-mobile-search .search-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border-radius: 7px;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .header.shande-header .mobile-menu-toggle.is-active {
    color: #096ddd;
  }
}

/* 点击搜索弹出的全宽搜索面板：与页眉一致的半透明磨砂模糊，去掉分隔线/阴影避免色差断层 */
.header.shande-header .header-search {
  /* 跟随实际页眉底边；工具栏偏移由页眉承担，不在搜索面板重复叠加。 */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: none;
  border-bottom: none;
  box-shadow: none;
}

/* ============================================================
   登录/注册弹窗
   点击「登录/注册」入口弹出：左侧营销图 + 右侧登录区（短信/密码 + 注册切换）。
   主题色跟随页眉渐变主色，可用「样式 → 登录/注册弹窗 → 强调主色」覆盖。
   ============================================================ */
.shande-login-modal {
  --sd-login-accent: #096ddd;
  /* 聚焦光环取强调色的低透明度版本，换主题色时自动跟随。
     color-mix 不可用的老浏览器落到上一行的固定蓝。 */
  --sd-login-ring: rgba(9, 109, 221, 0.14);
  --sd-login-ring: color-mix(in srgb, var(--sd-login-accent) 16%, transparent);
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 20, 28, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.shande-login-modal.is-open {
  opacity: 1;
  visibility: visible;
}

/* 弹窗主体 */
.shande-login-modal__dialog {
  position: relative;
  display: flex;
  width: 840px;
  max-width: 840px;
  /* 视口很矮时（笔记本横屏、手机横放）弹窗自身滚动，不把页面顶出去。
     用 dvh 让移动端地址栏收起时高度跟着变；不支持 dvh 的浏览器落到上一行。 */
  max-height: 92vh;
  max-height: 92dvh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 20, 28, 0.24), 0 2px 8px rgba(15, 20, 28, 0.08);
  overflow: hidden;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.shande-login-modal.is-open .shande-login-modal__dialog {
  transform: translateY(0) scale(1);
}

/* 右上角二维码撕角：替代普通关闭叉号，点击后切换微信扫码视图。 */
.shande-login-modal__qr-peel {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 64px;
  height: 64px;
  overflow: hidden;
  color: #111827;
  cursor: pointer;
  z-index: 5;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transition: width .34s cubic-bezier(.22,1,.36,1), height .34s cubic-bezier(.22,1,.36,1), color .2s ease;
}
.shande-login-modal__qr-code {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 96px;
  height: 96px;
  background: #fff;
  pointer-events: none;
}
.shande-login-modal__qr-glyph {
  display: block;
  width: 96px;
  height: 96px;
  padding: 5px;
  box-sizing: border-box;
}
.shande-login-modal__qr-edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(45deg, rgba(15,23,42,0) calc(50% - 1px), rgba(15,23,42,.42) 50%, rgba(255,255,255,.72) calc(50% + 2px), rgba(255,255,255,0) calc(50% + 12px));
}
.shande-login-modal__dialog:hover .shande-login-modal__qr-peel {
  width: 70px;
  height: 70px;
}
.shande-login-modal__qr-peel:hover,
.shande-login-modal__qr-peel:focus-visible {
  width: 84px;
  height: 84px;
  color: #05080d;
}
.shande-login-modal__qr-peel:focus-visible {
  outline: 2px solid var(--sd-login-accent);
  outline-offset: -3px;
}

/* ── 左侧营销图 ── */
.shande-login-modal__side {
  position: relative;
  /* 左侧是纯装饰，不参与伸缩：弹窗限高后由右侧表单区滚动 */
  flex: 0 0 42%;
  max-width: 42%;
  /* 不写死 520px：弹窗已限高 92vh，窗口比这更矮时固定值会被 overflow:hidden
     裁掉一截营销图。用 min() 让它自动让位。 */
  min-height: min(520px, 74vh);
  background-color: #23272e;
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}
.shande-login-modal__side::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(20, 22, 26, 0.72) 0%, rgba(20, 22, 26, 0.4) 100%);
}

/* 纯图片模式：只显示一张完整图片，不叠加文案与遮罩 */
.shande-login-modal__side--image {
  background-image: none !important;
}
.shande-login-modal__side--image::before {
  display: none;
}
.shande-login-modal__side-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.shande-login-modal__side-inner {
  position: relative;
  z-index: 2;
  padding: 44px 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.shande-login-modal__side-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1.1;
}
.shande-login-modal__side-sub {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  opacity: 0.85;
  margin-top: 4px;
}
.shande-login-modal__points {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.shande-login-modal__points li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.4;
  color: #f1f2f4;
}
.shande-login-modal__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}
.shande-login-modal__side-brand {
  margin-top: auto;
  padding-top: 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

/* 明亮品牌模式：仍使用同一个 Elementor 左栏及文案控件。 */
.shande-login-modal__side--brand {
  background: linear-gradient(145deg, #f1f8ff 0%, #e8f5ff 55%, #e0f8f1 100%);
  color: #183354;
  border-right: 1px solid #e3eef6;
}
.shande-login-modal__side--brand::before {
  inset: -130px -100px auto auto;
  width: 310px;
  height: 310px;
  border: 44px solid rgba(64, 166, 255, .07);
  border-radius: 50%;
  background: none;
  pointer-events: none;
}
.shande-login-modal__side--brand::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -130px;
  width: 280px;
  height: 280px;
  border: 36px solid rgba(29, 183, 166, .06);
  border-radius: 50%;
  pointer-events: none;
}
.shande-login-modal__side--brand .shande-login-modal__side-inner { padding: 28px 28px 20px; }
.shande-login-modal__brand-mark { display: flex; align-items: center; gap: 9px; color: #096ddd; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; }
.shande-login-modal__side--brand .shande-login-modal__side-title { margin-top: auto; padding-top: 16px; color: #153b69; font-size: 28px; font-weight: 800; line-height: 1.3; letter-spacing: -.6px; overflow-wrap: break-word; }
.shande-login-modal__side--brand .shande-login-modal__side-sub { margin-top: 10px; color: #57708a; font-size: 13px; font-weight: 400; line-height: 1.7; letter-spacing: 0; opacity: 1; }
.shande-login-modal__side--brand .shande-login-modal__points { margin-top: 22px; gap: 8px; }
.shande-login-modal__side--brand .shande-login-modal__points li { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.9); border-radius: 13px; background: rgba(255,255,255,.76); box-shadow: 0 4px 12px rgba(28,89,134,.025); color: #294665; font-size: 14px; line-height: 1.5; }
.shande-login-modal__side--brand .shande-login-modal__points li::before { display: none; }
.shande-login-modal__point-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; background: #e8f2ff; color: #096ddd; }
.shande-login-modal__side--brand .shande-login-modal__points li:nth-child(2) .shande-login-modal__point-icon { background: #e4f6f4; color: #11988d; }
.shande-login-modal__side--brand .shande-login-modal__points li:nth-child(3) .shande-login-modal__point-icon { background: #eef0ff; color: #6771d4; }
.shande-login-modal__side--brand .shande-login-modal__side-brand { padding-top: 18px; color: #6c849c; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .4px; opacity: 1; }
@media (max-width: 768px), (max-height: 600px) {
  .shande-login-modal__side--brand { display: none; }
}

/* ── 右侧登录区 ── */
.shande-login-modal__main {
  flex: 1;
  min-width: 0;
  /* 顶部给二维码撕角留出空间，避免压住登录方式标签。 */
  padding: 48px 48px 40px;
  display: flex;
  flex-direction: column;
  /* 弹窗限高后由这里滚动，而不是整个 dialog 滚（那样左侧营销图会一起滑走） */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 视图切换（登录/注册） */
.shande-login-modal__view {
  display: none;
  flex-direction: column;
  flex: 1;
}
.shande-login-modal__view.is-active {
  display: flex;
}

/* 微信扫码视图 */
.shande-login-modal__view--wechat {
  /* 官方登录页必须保留完整高度；空间不足时从顶部开始滚动，不能 flex 压扁或居中裁切。 */
  flex: 0 0 auto;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
  padding: 4px 0;
  box-sizing: border-box;
}
.shande-login-modal__view--wechat > * {
  flex-shrink: 0;
}
.shande-login-modal.is-wechat-view .shande-login-modal__main {
  min-height: 0;
  overflow-y: auto;
}
.shande-login-modal__wechat-title {
  color: #202735;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .02em;
}
.shande-login-modal__wechat-sub {
  max-width: 100%;
  margin-top: 8px;
  color: #536174;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.shande-login-modal__wechat-card {
  width: 322px;
  min-height: 422px;
  margin-top: 16px;
  padding: 10px;
  border: 1px solid #e5eaf1;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 12px 34px rgba(35,48,74,.09);
}
.shande-login-modal__wechat-qr {
  position: relative;
  width: 300px;
  height: 400px;
  display: grid;
  place-items: center;
  overflow: visible;
  background: #f7f9fc;
}
.shande-login-modal__wechat-qr iframe {
  position: relative;
  z-index: 2;
  display: block;
  width: 300px !important;
  height: 400px !important;
  max-width: none;
  border: 0;
  /* 恢复官方控件原生尺寸；不改跨域 iframe 内容，也不缩放头像、二维码或文字。 */
  transform: none;
}
.shande-login-modal__wechat-loader {
  position: relative;
  z-index: 3;
  width: 30px;
  height: 30px;
  border: 3px solid #dce8f8;
  border-top-color: var(--sd-login-accent);
  border-radius: 50%;
  animation: sd-login-wechat-spin .75s linear infinite;
}
.shande-login-modal__wechat-qr.is-error {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='%23111827'%3E%3Cpath d='M2 2h10v10H2V2zm2 2v6h6V4H4zm2 2h2v2H6V6zM20 2h10v10H20V2zm2 2v6h6V4h-6zm2 2h2v2h-2V6zM2 20h10v10H2V20zm2 2v6h6v-6H4zm2 2h2v2H6v-2zM14 2h2v4h-2V2zm2 6h2v2h-2V8zm-2 4h6v2h-6v-2zm8 2h4v2h-4v-2zm6 0h2v4h-2v-4zM2 14h4v2H2v-2zm6 0h4v4H8v-4zm6 2h2v4h-2v-4zm4 0h4v2h-4v-2zm6 2h6v2h-6v-2zm-10 4h4v2h-4v-2zm6-2h2v6h-2v-6zm4 2h2v2h-2v-2zm4 0h2v6h-2v-6zm-14 4h4v4h-4v-4zm6 2h6v2h-6v-2zm4-4h4v2h-4v-2z'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 184px 184px;
}
.shande-login-modal__wechat-qr.is-error::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(1px);
}
.shande-login-modal__wechat-retry {
  position: relative;
  z-index: 3;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--sd-login-accent);
  box-shadow: 0 10px 24px rgba(20,106,229,.24);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.shande-login-modal__wechat-retry:hover {
  transform: translateY(-1px) rotate(18deg);
  box-shadow: 0 13px 28px rgba(20,106,229,.3);
}
.shande-login-modal__wechat-retry:focus-visible {
  outline: 3px solid rgba(20,106,229,.28);
  outline-offset: 3px;
}
.shande-login-modal__wechat-retry svg { display: block; }
.shande-login-modal__wechat-message {
  max-width: 100%;
  min-height: 24px;
  margin-top: 12px;
  color: #536174;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.shande-login-modal__wechat-message.is-error { color: #e11d48; }
.shande-login-modal__wechat-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 12px;
  padding: 0 8px;
  color: var(--sd-login-accent);
  font-size: 16px;
  line-height: 1.5;
  cursor: pointer;
}
.shande-login-modal__wechat-back:hover { text-decoration: underline; }
.shande-login-modal__wechat-back:focus-visible {
  outline: 2px solid var(--sd-login-accent);
  outline-offset: 4px;
}
@keyframes sd-login-wechat-spin { to { transform: rotate(360deg); } }

/* 主登录视图使用可见的第三方登录按钮；右上角仅负责关闭弹窗。
   限定 modal + button 类选择器，避免 Astra 对裸 button 的颜色和 padding 覆盖。 */
.shande-login-modal button.shande-login-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  appearance: none;
  background: transparent;
  box-shadow: none;
  color: #536174;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.shande-login-modal button.shande-login-modal__close:hover {
  background: #f0f4f8;
  color: #243348;
}
.shande-login-modal button.shande-login-modal__close svg {
  width: 22px;
  height: 22px;
  display: block;
}
.shande-login-modal__other-logins {
  margin-top: 22px;
}
.shande-login-modal__other-label {
  margin-bottom: 12px;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.shande-login-modal__other-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
}
.shande-login-modal button.shande-login-modal__wechat-entry {
  display: inline-flex;
  flex: 1 1 160px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  min-width: 148px;
  max-width: 100%;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid #cddfd3;
  border-radius: 10px;
  box-sizing: border-box;
  appearance: none;
  background: #fff;
  box-shadow: none;
  color: #24382b;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: normal;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}
.shande-login-modal button.shande-login-modal__wechat-entry:hover {
  border-color: #07a947;
  background: #effaf3;
  color: #24382b;
}
.shande-login-modal button.shande-login-modal__wechat-entry:disabled {
  opacity: .6;
  cursor: wait;
}
.shande-login-modal button.shande-login-modal__close:focus-visible,
.shande-login-modal button.shande-login-modal__wechat-entry:focus-visible {
  outline: 2px solid var(--sd-login-accent);
  outline-offset: 3px;
}
.shande-login-modal__wechat-icon {
  display: inline-flex;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  color: #07b64d;
}
.shande-login-modal__wechat-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}
.shande-login-modal button.shande-login-modal__wechat-entry[hidden],
.shande-login-modal__other-logins[hidden],
.shande-login-modal__other-actions[hidden] {
  display: none;
}

/* showView() 同步 is-wechat-view，兼容没有 :has() 的微信 WebView。
   只在微信视图调整留白，避免改变手机号、邮箱等视图。
   状态类提高选择器权重，确保后方通用手机/横屏 padding 规则不会覆盖这里。
   320px 视口：外侧 8px × 2，主区 2px × 2，正好保留 300px 官方控件宽度。 */
@media (max-width: 480px) {
  .shande-login-modal.is-wechat-view {
    padding: 12px 8px;
    box-sizing: border-box;
  }
  .shande-login-modal.is-wechat-view .shande-login-modal__main {
    padding-left: 2px;
    padding-right: 2px;
  }
  .shande-login-modal__view--wechat .shande-login-modal__wechat-card {
    width: 300px;
    min-height: 400px;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .shande-login-modal__view--wechat .shande-login-modal__wechat-sub,
  .shande-login-modal__view--wechat .shande-login-modal__wechat-message {
    max-width: calc(100% - 24px);
  }
}


/* 微信视图比例修正：完整保留官方 iframe；不靠裁切或缩放修正头像。 */
@media (min-width: 769px) {
  .shande-login-modal.is-wechat-view .shande-login-modal__dialog {
    height: 520px;
  }
}
.shande-login-modal.is-wechat-view .shande-login-modal__main {
  padding-top: 14px;
  padding-bottom: 14px;
}
.shande-login-modal__view--wechat {
  padding: 0;
}
.shande-login-modal__wechat-title {
  line-height: 32px;
}
.shande-login-modal__wechat-sub {
  display: none;
}
.shande-login-modal__view--wechat .shande-login-modal__wechat-card {
  width: 300px;
  min-height: 400px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.shande-login-modal__wechat-qr {
  background: #fff;
}
.shande-login-modal__wechat-message:empty {
  display: none;
}
.shande-login-modal__wechat-back {
  margin-top: 4px;
}
@media (max-width: 360px) {
  .shande-login-modal.is-wechat-view {
    padding-left: 0;
    padding-right: 0;
  }
  .shande-login-modal.is-wechat-view .shande-login-modal__main {
    padding-left: 0;
    padding-right: 0;
  }
}

/* 登录方式标签行 */
.shande-login-modal__tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 30px;
}
/* 标签是 span[role=tab]。
   之所以不用 <button>：Astra 的全局内联样式里有一条
     .menu-toggle, button, .ast-button, .button, input[type=submit], ... {
       color:#fff; background-color:var(--ast-global-color-0);
       padding:15px 30px; font-size:16px; border-style:solid; }
   多选择器列表的权重高于本主题的单类名，标签文字颜色被刷成白/深色、
   内边距被撑到 15px 30px。改成 span 从根上避开这条规则。 */
.shande-login-modal__tab {
  border: none;
  background: none;
  font-size: 17px;
  color: #6b7280;
  cursor: pointer;
  padding: 2px 0 8px;
  position: relative;
  /* span 不继承 button 的默认排版，显式对齐正文 */
  display: inline-block;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
}
.shande-login-modal__tab:hover {
  color: #374151;
}
.shande-login-modal__tab:focus-visible {
  outline: 2px solid var(--sd-login-accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.shande-login-modal__tab.is-active {
  color: var(--sd-login-accent);
  font-weight: 600;
}
.shande-login-modal__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--sd-login-accent);
  border-radius: 2px;
}
.shande-login-modal__tab-divider {
  width: 1px;
  height: 14px;
  background: #e5e7eb;
}

/* 登录方式面板 */
.shande-login-modal__pane {
  display: none;
  flex-direction: column;
  flex: 1;
}
.shande-login-modal__pane.is-active {
  display: flex;
}

/* 微信二维码 */
.shande-login-modal__qr {
  align-self: center;
  width: 200px;
  height: 200px;
  margin: 6px 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shande-login-modal__qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.shande-login-modal__qr-placeholder {
  width: 100%;
  height: 100%;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 14px;
}
.shande-login-modal__qr-tip {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shande-login-modal__qr-tip b {
  font-size: 15px;
  color: #1f2937;
}
.shande-login-modal__qr-tip span {
  font-size: 13px;
  color: #9ca3af;
}

/* 输入框 */
.shande-login-modal__field {
  position: relative;
  margin-bottom: 18px;
}
.shande-login-modal__field input {
  width: 100%;
  height: 52px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f7f8fa;
  padding: 0 16px;
  /* 16px 是 iOS Safari 的临界值：小于它聚焦输入框会自动放大整页，
     用户回填手机号时页面会跳一下。桌面视觉仍按 15px（见下方媒体查询）。 */
  font-size: 16px;
  font-family: inherit;
  color: #1f2937;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  box-sizing: border-box;
}
@media (min-width: 769px) {
  .shande-login-modal__field input { font-size: 15px; }
}
.shande-login-modal__field input:hover {
  border-color: #d5dae1;
}
.shande-login-modal__field input:focus {
  border-color: var(--sd-login-accent);
  background: #fff;
  /* 光环比单纯换边框色更容易看出「焦点在这」 */
  box-shadow: 0 0 0 3px var(--sd-login-ring);
}
/* 占位符字号：弹窗根节点带 .shande-scope，会吃到 shande-base.css 里
   「占位符统一 0.85em」那条全站规则，折算下来只有 12.75px，比输入值明显小
   一截，「请输入手机号」这类提示显得发虚。这里按输入框字号的 0.95 倍放大，
   仍略小于输入值（保持提示与已填内容的区分），但读起来不再吃力。
   用 em 而不是固定值，好处是自动跟随下方响应式改过的 input 字号。 */
.shande-login-modal__field input::placeholder {
  color: #b0b6be;
  font-size: 0.95em;
}
/* 浏览器自动填充会强行刷上刺眼的黄底，压回本地配色 */
.shande-login-modal__field input:-webkit-autofill {
  -webkit-text-fill-color: #1f2937;
  -webkit-box-shadow: 0 0 0 1000px #f7f8fa inset;
  transition: background-color 9999s ease-out;
}

/* 验证码行：输入框 + 发送按钮 */
.shande-login-modal__field--code {
  display: flex;
  gap: 12px;
}
.shande-login-modal__field--code input {
  flex: 1;
}
/* 发送验证码按钮同样是 span[role=button]，原因见上方 __tab 的注释：
   裸 <button> 会被 Astra 刷成主题色实底 + 白字 + 15px/30px 内边距。 */
.shande-login-modal__code-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  /* 定宽：倒计时文字（「59s 后重发」）比「发送验证码」短，
     不定宽会导致点一下按钮突然缩窄，验证码输入框跟着变长。 */
  min-width: 120px;
  padding: 0 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #4b5563;
  /* 与输入框字号看齐（桌面 15px）：原来的 14px 挨着 16px 的输入值偏小，
     「发送验证码」是这一行的主要操作，不该比旁边的占位提示还弱。
     min-width 同步加到 120px，放大后 5 个汉字仍不会顶到内边距。 */
  font-size: 15px;
  font-family: inherit;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.shande-login-modal__code-btn:hover {
  border-color: var(--sd-login-accent);
  color: var(--sd-login-accent);
  background: #f7fbff;
}
.shande-login-modal__code-btn:focus-visible {
  outline: 2px solid var(--sd-login-accent);
  outline-offset: 2px;
}
/* 倒计时/请求中：span 没有 disabled 属性，JS 改用 is-disabled 类。
   同时用 pointer-events:none 真正挡住点击，不只是视觉变灰。 */
.shande-login-modal__code-btn.is-disabled {
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #eceef1;
  cursor: not-allowed;
  pointer-events: none;
}
.shande-login-modal__code-btn.is-disabled:hover {
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #eceef1;
}

/* 协议勾选 */
.shande-login-modal__agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 20px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #8b93a1;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.shande-login-modal__agree input {
  margin: 3px 0 0;
  flex-shrink: 0;
  /* 默认复选框在移动端只有 13px 左右，指尖很难点中 */
  width: 15px;
  height: 15px;
  accent-color: var(--sd-login-accent);
  cursor: pointer;
}
/* 协议链接：点击要能跳转，但不能连带触发外层 label 勾选（JS 已阻止冒泡）。
   文字本身可选中，方便用户复制协议名。 */
.shande-login-modal__agree-link {
  color: #6b7280;
  text-decoration: none;
  border-bottom: 1px solid #d7dbe2;
  -webkit-user-select: text;
  user-select: text;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.shande-login-modal__agree-link:hover,
.shande-login-modal__agree-link:focus {
  color: var(--sd-login-accent);
  border-bottom-color: var(--sd-login-accent);
  text-decoration: none;
}
.shande-login-modal__agree-link:focus-visible {
  outline: 2px solid var(--sd-login-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 注册协议阅读层：正文来自后台版本管理，覆盖在登录框之上且不跳离当前页面。 */
.shande-login-agreement-viewer {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.shande-login-agreement-viewer.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}
.shande-login-agreement-viewer__mask {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .58);
}
.shande-login-agreement-viewer__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 48px));
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .3);
  transform: translateY(12px) scale(.985);
  transition: transform .22s ease;
}
.shande-login-agreement-viewer.is-open .shande-login-agreement-viewer__dialog { transform: none; }
.shande-login-agreement-viewer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex: 0 0 auto;
  padding: 17px 20px;
  border-bottom: 1px solid #edf1f6;
}
.shande-login-agreement-viewer__head > div { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.shande-login-agreement-viewer__head b { overflow: hidden; color: #1f2937; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.shande-login-agreement-viewer__head span { flex: 0 0 auto; color: #94a3b8; font-size: 12px; }
.shande-scope .shande-login-agreement-viewer__head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f1f3f6;
  color: #7a828e;
  cursor: pointer;
}
.shande-scope .shande-login-agreement-viewer__head button:hover { background: #e5e8ed; color: #1f2937; }
.shande-login-agreement-viewer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 24px;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.85;
}
.shande-login-agreement-viewer__body article[hidden] { display: none; }
.shande-login-agreement-viewer__body h4 { margin: 18px 0 7px; color: #1f2937; font-size: 14px; }
.shande-login-agreement-viewer__body h4:first-child { margin-top: 0; }
.shande-login-agreement-viewer__body p { margin: 0 0 11px; }
.shande-login-agreement-viewer__foot { display: flex; justify-content: flex-end; flex: 0 0 auto; padding: 12px 20px; border-top: 1px solid #edf1f6; }
.shande-scope .shande-login-agreement-viewer__foot button {
  min-height: 38px;
  margin: 0;
  padding: 0 22px;
  border: 1px solid var(--sd-login-accent);
  border-radius: 8px;
  background: var(--sd-login-accent);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.shande-scope .shande-login-agreement-viewer__foot button:hover { filter: brightness(.94); color: #fff; }
@media (max-width: 640px) {
  .shande-login-agreement-viewer { padding: 12px; }
  .shande-login-agreement-viewer__dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .shande-login-agreement-viewer__body { padding: 18px; }
}

/* 忘记密码 */
.shande-login-modal__forgot {
  display: flex;
  justify-content: flex-end;
  margin: -6px 0 20px;
}
.shande-login-modal__forgot a {
  font-size: 13px;
  color: #9ca3af;
  text-decoration: none;
}
.shande-login-modal__forgot a:hover {
  color: var(--sd-login-accent);
}

.shande-login-modal__view--recovery .shande-login-modal__reg-title {
  margin-bottom: 9px;
}
.shande-login-modal__recovery-tip {
  margin: 0 0 22px;
  color: #8791a2;
  font-size: 13px;
  line-height: 1.65;
  text-align: center;
}

/* 登录/提交按钮（同样是 span[role=button]，见上方 __tab 注释） */
.shande-login-modal__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 10px;
  background: var(--sd-login-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.shande-login-modal__submit:hover {
  filter: brightness(1.06);
  box-shadow: 0 8px 20px var(--sd-login-ring);
}
/* 按下时轻微下沉，给出「点到了」的反馈（移动端没有 hover 可依赖） */
.shande-login-modal__submit:active {
  transform: translateY(1px);
}
.shande-login-modal__submit:focus-visible {
  outline: 2px solid var(--sd-login-accent);
  outline-offset: 2px;
}
/* 提交中：span 无 disabled 属性，JS 用 is-disabled 类；
   pointer-events:none 真正挡住重复点击，避免重复提交。 */
.shande-login-modal__submit.is-disabled {
  filter: none;
  opacity: 0.62;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* 登录/注册互相切换 */
.shande-login-modal__switch {
  margin-top: 16px;
  font-size: 13.5px;
  color: #6b7280;
}
.shande-login-modal__switch a {
  color: var(--sd-login-accent);
  text-decoration: none;
  font-weight: 500;
}
.shande-login-modal__switch a:hover {
  text-decoration: underline;
}

/* 注册视图标题 */
.shande-login-modal__reg-title {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 30px;
}

/* 编辑器内：画布本身是 iframe，position:fixed 相对 iframe 视口定位即可正常工作，
   无需改成相对定位。弹窗与前台一致默认隐藏（opacity:0/visibility:hidden），
   点击入口（登录/注册触发器）才弹出，避免焊死在展开态占满页眉下方。
   此处不再覆盖任何定位/可见性，完全沿用前台规则。 */

/* ============================================================
   拖动拼图人机验证（浮层）
   点「发送验证码」后在验证码行下方浮出：拼图画布 + 拖动轨道。
   拼图图片由服务端 GD 现场生成（Shande_Captcha），答案只在服务端。

   为什么是浮层而不是内联展开：内联会把下方的「协议勾选 + 提交按钮」
   整体顶下去一百多像素，弹窗高度突变、用户正要点的按钮跑位；手机上
   还得重新滚动才能看到提交按钮。浮层脱离文档流，开合不影响表单排版。
   ============================================================ */

/* 浮层用 position:fixed 而不是 absolute：
   .shande-login-modal__main 有 overflow-y:auto（弹窗限高后由它滚动），
   绝对定位的浮层会被这个滚动容器裁掉下半截。fixed 相对视口定位，
   永远完整可见。代价是坐标要由 JS 按锚点算，并在滚动时跟随。

   注意：fixed 只有在祖先链上没有包含块时才真的相对视口。登录弹窗有两处
   会建立包含块——遮罩的 backdrop-filter 与弹窗主体的 transform，所以 JS
   在首次展开时会把浮层搬到 <body> 下（见 mega-elementor.js 的 portal()）。
   搬家后它不在页眉的 .shande-scope 作用域内，故标记根节点自带该类，
   下面的强调色变量也给一份兜底值（原定义在 .shande-login-modal 上）。 */
.shande-login-captcha {
  --sd-login-accent: #096ddd;
  position: fixed;
  left: 0;
  top: 0;
  /* 宽度由 JS 按验证码行的实际宽度写内联样式；这里给个兜底值，
     避免 JS 未执行时浮层塌成 0 宽。 */
  width: 360px;
  box-sizing: border-box;
  z-index: 100002; /* 高于登录弹窗自身的 100000 */
  padding: 16px;
  border: 1px solid rgba(9, 109, 221, 0.13);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.98);
  /* 浮层需要明显的投影才能和下面的表单分层，内联版的浅灰底不够 */
  box-shadow: 0 22px 60px rgba(23, 37, 61, 0.18), 0 4px 14px rgba(23, 37, 61, 0.08);
  /* 展开动效：从锚点方向轻微下滑淡入 */
  transform-origin: top center;
  animation: sdCapIn 0.18s ease;
}
.shande-login-captcha[hidden] { display: none; }

/* 翻到锚点上方时（由 JS 加类）动效方向对调 */
.shande-login-captcha.is-above {
  transform-origin: bottom center;
  animation: sdCapInUp 0.18s ease;
}

@keyframes sdCapIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sdCapInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 指向锚点的小箭头：让「这个框属于验证码这一行」一目了然。
   横向位置由 JS 按锚点中心写 left，浮层宽度与锚点不一定相同。 */
.shande-login-captcha__arrow {
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -5px;
  width: 11px;
  height: 11px;
  background: #fff;
  border-left: 1px solid #e6e9ee;
  border-top: 1px solid #e6e9ee;
  transform: rotate(45deg);
}
.shande-login-captcha.is-above .shande-login-captcha__arrow {
  top: auto;
  bottom: -6px;
  border-left: 0;
  border-top: 0;
  border-right: 1px solid #e6e9ee;
  border-bottom: 1px solid #e6e9ee;
}

.shande-login-captcha__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}
.shande-login-modal__agree--adult {
  margin-top: -13px;
  margin-bottom: 18px;
  padding: 9px 11px;
  border: 1px solid #dce7f6;
  border-radius: 7px;
  background: #f6f9fe;
  color: #52627a;
}
.shande-login-modal__agree--adult[hidden] { display: none !important; }
.shande-login-captcha__identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}
.shande-login-captcha__shield {
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #1688f3 0%, #0865d7 100%);
  box-shadow: 0 7px 16px rgba(9, 109, 221, 0.24);
}
.shande-login-captcha__shield svg { width: 19px; height: 19px; }
.shande-login-captcha__title {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: #172033;
  font-weight: 700;
}
.shande-login-captcha__identity small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
  color: #929baa;
}
.shande-login-captcha__tools {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.shande-login-captcha__refresh,
.shande-login-captcha__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: 9px;
  color: #8490a1;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease, background 0.18s ease;
}
.shande-login-captcha__refresh:hover {
  color: var(--sd-login-accent);
  background: #eef4fb;
}
.shande-login-captcha__close:hover {
  color: #e34d59;
  background: #fdf0f1;
}
.shande-login-captcha__refresh:focus-visible,
.shande-login-captcha__close:focus-visible {
  outline: 2px solid var(--sd-login-accent);
  outline-offset: 1px;
}
/* 换图请求进行中时转一圈，避免用户连点 */
.shande-login-captcha.is-loading .shande-login-captcha__refresh {
  animation: sdCapSpin 0.7s linear infinite;
  pointer-events: none;
}
@keyframes sdCapSpin { to { transform: rotate(360deg); } }

/* 验证通过后浮层淡出（由 JS 加类，动画结束再 hidden） */
.shande-login-captcha.is-closing {
  animation: sdCapOut 0.2s ease forwards;
  pointer-events: none;
}
@keyframes sdCapOut {
  to { opacity: 0; transform: translateY(-4px); }
}

/* 画布：宽度自适应容器，高度按 320:160 的比例换算，
   避免固定 160px 在窄屏上把图挤变形。 */
.shande-login-captcha__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  border: 1px solid #e3e8ef;
  border-radius: 0;
  overflow: hidden;
  background: #e9eef5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), 0 5px 14px rgba(23, 37, 61, 0.08);
  -webkit-user-select: none;
  user-select: none;
}
.shande-login-captcha__bg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  /* 图片本身就是精确尺寸，禁止拖拽避免误触发浏览器的图片拖动 */
  pointer-events: none;
  -webkit-user-drag: none;
}
/* 拼图块：left 由 JS 按拖动位移写内联样式，top 用服务端下发的纵坐标 */
.shande-login-captcha__piece {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 2px 6px rgba(15, 20, 28, 0.35));
}
.shande-login-captcha__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  color: #7e8999;
  background: linear-gradient(110deg, #edf1f6 25%, #f8fafc 42%, #edf1f6 60%);
  background-size: 220% 100%;
  animation: sdCapSkeleton 1.2s linear infinite;
}
@keyframes sdCapSkeleton { to { background-position-x: -220%; } }
.shande-login-captcha.is-ready .shande-login-captcha__loading { display: none; }

/* 轨道 */
.shande-login-captcha__track {
  position: relative;
  height: 44px;
  margin-top: 12px;
  border: 1px solid #e1e7ee;
  border-radius: 12px;
  background: #f2f5f8;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none; /* 拖动时不要让页面跟着滚 */
}
/* 已拖过的部分染色，给出进度感 */
.shande-login-captcha__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(9, 109, 221, 0.12), rgba(25, 147, 240, 0.23));
}
.shande-login-captcha__hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 44px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #8792a2;
  pointer-events: none;
}
.shande-login-captcha__handle {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 49px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(145deg, #178cf4, #0867da);
  color: #fff;
  box-shadow: 0 6px 15px rgba(9, 109, 221, 0.28);
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.shande-login-captcha__handle:hover { box-shadow: 0 8px 19px rgba(9, 109, 221, 0.36); }
.shande-login-captcha__handle:active { cursor: grabbing; }
.shande-login-captcha__handle:focus-visible {
  outline: 2px solid var(--sd-login-accent);
  outline-offset: 1px;
}

/* 成功 / 失败态：轨道整体变色，比只弹一行文字更直观 */
.shande-login-captcha.is-pass .shande-login-captcha__fill { background: rgba(22, 163, 74, 0.16); }
.shande-login-captcha.is-pass .shande-login-captcha__handle { color: #fff; background: linear-gradient(145deg, #28b866, #15934a); }
.shande-login-captcha.is-pass .shande-login-captcha__hint { color: #16a34a; }
.shande-login-captcha.is-pass .shande-login-captcha__track { pointer-events: none; }

.shande-login-captcha.is-fail .shande-login-captcha__fill { background: rgba(227, 77, 89, 0.16); }
.shande-login-captcha.is-fail .shande-login-captcha__handle { color: #fff; background: linear-gradient(145deg, #ef6671, #d93d4a); }
.shande-login-captcha.is-fail .shande-login-captcha__hint { color: #e34d59; }
/* 失败时块与滑块一起归位，加个过渡让「弹回」看得出来 */
.shande-login-captcha.is-reset .shande-login-captcha__piece,
.shande-login-captcha.is-reset .shande-login-captcha__handle,
.shande-login-captcha.is-reset .shande-login-captcha__fill {
  transition: left 0.3s ease, width 0.3s ease;
}

@media (max-width: 480px) {
  .shande-login-captcha__track { height: 42px; }
  .shande-login-captcha__handle { width: 47px; height: 42px; }
  .shande-login-captcha__arrow { right: 34px; }
}

/* 手机竖屏：不再贴着验证码行，改为屏幕居中的小弹层。
   窄屏上贴锚点的浮层左右几乎顶满、上下又容易压住键盘弹起后的可视区，
   居中 + 遮罩更稳，拖动区域也更大好点。
   坐标写在 CSS 里用 !important 压掉 JS 写的内联 top/left —— 这一档
   不需要跟随锚点，让 CSS 全权接管比在 JS 里分支判断更不容易出错。 */
@media (max-width: 600px) {
  .shande-login-captcha,
  .shande-login-captcha.is-above {
    left: 50% !important;
    top: 50% !important;
    width: min(340px, calc(100vw - 32px)) !important;
    transform: translate(-50%, -50%);
    padding: 14px;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(15, 20, 28, 0.32);
    animation: sdCapInCenter 0.2s ease;
  }
  /* 居中弹层不指向任何锚点，箭头无意义 */
  .shande-login-captcha__arrow { display: none; }
  .shande-login-captcha.is-closing {
    animation: sdCapOutCenter 0.2s ease forwards;
  }
}
@keyframes sdCapInCenter {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes sdCapOutCenter {
  to { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
}

/* 居中弹层需要一层遮罩，否则浮在表单上会显得没有层次，
   也容易误点到后面的输入框。遮罩由 JS 与浮层同步显隐。 */
.shande-login-captcha-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(15, 20, 28, 0.42);
  animation: sdCapFade 0.2s ease;
}
.shande-login-captcha-backdrop[hidden] { display: none; }
@keyframes sdCapFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* 只在手机端出现：桌面是贴着验证码行的小浮层，加遮罩反而打断填写节奏 */
@media (min-width: 601px) {
  .shande-login-captcha-backdrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shande-login-captcha.is-loading .shande-login-captcha__refresh { animation: none; }
  .shande-login-captcha,
  .shande-login-captcha.is-above,
  .shande-login-captcha.is-closing,
  .shande-login-captcha-backdrop { animation: none; }
  .shande-login-captcha.is-reset .shande-login-captcha__piece,
  .shande-login-captcha.is-reset .shande-login-captcha__handle,
  .shande-login-captcha.is-reset .shande-login-captcha__fill { transition: none; }
}

/* 登录/注册弹窗的表单反馈（发送验证码 / 登录 / 注册）已改走全站右上角
   Toast（.shande-toast，见 shande-base.css），与收藏、关注、订单、工单一致。
   原来的内联提示行 .shande-login-modal__msg 紧贴提交按钮，用户点完按钮
   视线还在按钮上，「验证码已发送，5 分钟内有效」这类结果经常整行漏看，
   标记与样式一并撤掉。 */

/* ============================================================
   登录/注册弹窗 · 响应式
   三档：
     ≤1024px 平板  —— 弹窗整体收窄，左侧比例压到 38%
     ≤768px  手机  —— 转为上下排布，左侧营销图缩成一条摘要
     ≤480px  小屏  —— 左侧整体隐藏，只留表单，弹窗贴满可用空间
   ============================================================ */

/* 平板：等比收窄，不改结构 */
@media (max-width: 1024px) {
  .shande-login-modal__dialog {
    width: min(760px, 100%);
    max-width: min(760px, 100%);
  }
  .shande-login-modal__side {
    flex-basis: 38%;
    max-width: 38%;
    min-height: 480px;
  }
  .shande-login-modal__side-inner { padding: 36px 28px; }
  .shande-login-modal__side-title { font-size: 28px; }
  .shande-login-modal__main { padding: 42px 36px 34px; }
}

/* 手机：上下排布 */
@media (max-width: 768px) {
  .shande-login-modal {
    /* 贴边留一点安全距离即可，padding 太大会把弹窗挤扁 */
    padding: 16px 14px;
    align-items: center;
  }
  .shande-login-modal__dialog {
    flex-direction: column;
    width: 100%;
    max-width: 440px;
    /* 竖屏空间紧张，尽量把可用高度让给表单 */
    max-height: 94vh;
    max-height: 94dvh;
    border-radius: 14px;
  }
  /* 左侧营销图收成一条横幅：竖屏下 min-height:520px 会把表单顶出屏幕 */
  .shande-login-modal__side {
    flex: 0 0 auto;
    max-width: 100%;
    min-height: 0;
  }
  .shande-login-modal__side-inner {
    padding: 22px 22px 20px;
    height: auto;
  }
  .shande-login-modal__side-title { font-size: 24px; letter-spacing: 1px; }
  .shande-login-modal__side-sub { font-size: 14px; letter-spacing: 2px; }
  /* 卖点改成横向自动换行的小标签：竖排 5 条会吃掉半屏 */
  .shande-login-modal__points {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 14px;
    gap: 6px 14px;
  }
  .shande-login-modal__points li {
    font-size: 12.5px;
    padding-left: 12px;
  }
  .shande-login-modal__points li::before {
    top: 6px;
    width: 4px;
    height: 4px;
  }
  /* 品牌行在竖屏没有信息量，且 margin-top:auto 会撑出空白 */
  .shande-login-modal__side-brand { display: none; }

  .shande-login-modal__main {
    padding: 26px 22px 22px;
    /* 上下排布后由这里承担滚动 */
    flex: 1 1 auto;
    min-height: 0;
  }
  .shande-login-modal__tabs { margin-bottom: 22px; }
  .shande-login-modal__tab { font-size: 16px; }
  .shande-login-modal__reg-title { margin-bottom: 22px; font-size: 18px; }
  .shande-login-modal__field { margin-bottom: 14px; }
  .shande-login-modal__field input,
  .shande-login-modal__code-btn,
  .shande-login-modal__submit {
    height: 48px;
  }
  /* 竖屏宽度紧张，按钮收窄但字号只降一档（14px），
     不回到原来的 13px —— 那样在手机上「发送验证码」会明显比输入值小。 */
  .shande-login-modal__code-btn {
    min-width: 108px;
    padding: 0 10px;
    font-size: 14px;
  }
  .shande-login-modal__qr-peel { width: 56px; height: 56px; }
  .shande-login-modal__dialog:hover .shande-login-modal__qr-peel {
    width: 60px;
    height: 60px;
  }
}

/* 小屏：只留表单 */
@media (max-width: 480px) {
  .shande-login-modal { padding: 12px; }
  .shande-login-modal__dialog {
    max-width: 100%;
    max-height: 96vh;
    max-height: 96dvh;
  }
  /* 营销图在 5 寸屏上纯占地方，直接不显示，把高度全给表单 */
  .shande-login-modal__side { display: none; }
  .shande-login-modal__main { padding: 40px 18px 20px; }
  .shande-login-modal__agree { font-size: 12px; }
}

/* 横屏手机：高度极矮（常见 375×667 横放只有 375px 高），
   此时上下排布会让表单完全看不见，隐藏营销图并压缩纵向间距。 */
@media (max-height: 520px) and (max-width: 900px) {
  .shande-login-modal__side { display: none; }
  .shande-login-modal__dialog { max-height: 96vh; }
  .shande-login-modal__main { padding: 34px 22px 18px; }
  .shande-login-modal__tabs { margin-bottom: 16px; }
  .shande-login-modal__field { margin-bottom: 12px; }
  .shande-login-modal__field input,
  .shande-login-modal__code-btn,
  .shande-login-modal__submit { height: 44px; }
  .shande-login-modal__agree { margin-bottom: 14px; }
}

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  .shande-login-modal,
  .shande-login-modal__dialog {
    transition: none;
  }
  .shande-login-modal__dialog { transform: none; }
  .shande-login-modal.is-open .shande-login-modal__dialog { transform: none; }
}

/* ZipGet catalog menu viewport bounds — 2026-10-14. */
@media (min-width: 769px) {
  .header.shande-header .header-inner { position: relative; }
  .header.shande-header .header-left,
  .header.shande-header .nav,
  .header.shande-header .nav > .nav-item-wrap.has-mega { position: static; }
  .header.shande-header .nav > .nav-item-wrap.has-mega > .mega-menu {
    left: var(--zipget-menu-left, 16px); right: auto; top: 100%;
    transform: translateY(-6px);
    max-width: calc(100vw - 32px); box-sizing: border-box;
  }
  .header.shande-header .nav > .nav-item-wrap.has-mega > .mega-menu > .mega-menu__inner {
    flex-wrap: wrap; box-sizing: border-box;
    max-width: 100%; max-height: calc(100dvh - 140px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .header.shande-header .nav > .nav-item-wrap.has-mega.shande-nav-more { position: relative; }
  .header.shande-header .nav > .nav-item-wrap.has-mega.shande-nav-more > .mega-menu { left: -20px; right: auto; transform: translateY(-6px); }
  .header.shande-header .nav > .nav-item-wrap.has-mega.shande-nav-more:hover > .mega-menu,
  .header.shande-header .nav > .nav-item-wrap.has-mega.shande-nav-more:focus-within > .mega-menu { transform: translateY(0); }
}

@media (min-width: 769px) {
 .header.shande-header .nav > .nav-item-wrap.has-mega:hover > .mega-menu,
 .header.shande-header .nav > .nav-item-wrap.has-mega:focus-within > .mega-menu { transform: translateY(0); }
}