/**
 * ETB Header XCD - 现代化重构版
 * 版本: 6.1.0
 * 更新日期: 2026-02-24
 * 
 * 结构:
 * 1. CSS 变量
 * 2. Header 容器 + 单排布局
 * 3. Top Bar (Sticky)
 * 4. Navigation (内联)
 * 5. Mega Menu (Product - 全宽)
 * 6. Dropdown (紧凑下拉)
 * 7. 图标组 + 账户下拉
 * 8. PC 遮罩
 * 9. Search Overlay
 * 10. Cart Drawer (已移至 cart-drawer.css)
 * 11. Mobile Menu
 * 12. Hover 动效
 * 13. 响应式
 */

/* ===========================================
   1. CSS 变量
   =========================================== */
:root {
  /* 品牌色 */
  --etb-red: #DA2127;
  --etb-red-dark: #B01820;
  --etb-red-light: rgba(218, 33, 39, 0.1);
  --etb-black: #1A1A1A;
  --etb-gray-dark: #333333;
  --etb-gray: #666666;
  --etb-gray-light: #999999;
  --etb-border: #E5E5E5;
  --etb-bg-light: #F7F7F7;
  --etb-white: #FFFFFF;

  /* Header 高度 (单排) */
  --etb-topbar-height: 40px;
  --etb-header-height: 64px;
  --etb-header-total-height: 104px;

  /* 间距 */
  --etb-space-xs: 4px;
  --etb-space-sm: 8px;
  --etb-space-md: 16px;
  --etb-space-lg: 24px;
  --etb-space-xl: 32px;

  /* 动画 */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  
  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);
}

/* Mobile 变量覆盖 */
@media (max-width: 991px) {
  :root {
    --etb-topbar-height: 44px;
    --etb-header-height: 56px;
    --etb-header-total-height: 100px;
  }
}

/* ===========================================
   2. Header 容器 + 单排布局
   =========================================== */
.etb-header {
  position: relative;
  width: 100%;
  z-index: 1000;
  background: var(--etb-black);
}

.etb-header__main {
  height: var(--etb-header-height);
  background: var(--etb-black);
}

.etb-header__main-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--etb-space-lg);
  gap: var(--etb-space-md);
}

/* 汉堡菜单按钮 (Mobile only) */
.etb-header__hamburger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  border-radius: 6px;
  transition: background var(--duration-fast);
}

.etb-header__hamburger:hover {
  background: rgba(255, 255, 255, 0.1);
}

.etb-header__hamburger-line {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--etb-white);
  border-radius: 1px;
  transition: transform var(--duration-normal) var(--ease-out), 
              opacity var(--duration-normal) var(--ease-out);
}

/* 汉堡按钮展开时变 X */
.etb-header__hamburger.is-active .etb-header__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.etb-header__hamburger.is-active .etb-header__hamburger-line:nth-child(2) {
  opacity: 0;
}

.etb-header__hamburger.is-active .etb-header__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Logo */
.etb-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.etb-header__logo img,
.etb-header__logo svg {
  display: block;
  height: 36px;
  width: auto;
  transition: opacity var(--duration-fast);
}

.etb-header__logo:hover img,
.etb-header__logo:hover svg {
  opacity: 0.85;
}

/* ===========================================
   3. Top Bar (Sticky)
   =========================================== */
.etb-topbar {
  background: linear-gradient(180deg, rgba(218, 33, 39, 0.95) 0%, rgba(177, 24, 67, 0.92) 100%);
  position: sticky;
  top: 0;
  z-index: 10000;
}

.etb-topbar__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.etb-topbar__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  text-decoration: none !important;
  color: #fff;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: 0.3px;
  min-height: 32px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--duration-fast), transform var(--duration-fast);
}

.etb-topbar__chip:hover {
  background: rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}

.etb-topbar__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.etb-topbar__text {
  opacity: 0.95;
}

.etb-topbar__divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 4px;
  flex-shrink: 0;
}

.etb-topbar__chip--desktop {
  display: inline-flex;
}

/* 1200px 以下隐藏额外邮箱 */
@media (max-width: 1199px) {
  .etb-topbar__chip--desktop {
    display: none;
  }
}

/* Mobile Top Bar */
@media (max-width: 991px) {
  .etb-topbar__inner {
    padding: 8px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .etb-topbar__inner::-webkit-scrollbar {
    display: none;
  }
  
  .etb-topbar__chip {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 12px;
  }
  
  .etb-topbar__chip--desktop {
    display: inline-flex !important;
  }
  
  .etb-topbar__divider {
    display: none;
  }
}

/* ===========================================
   4. Navigation (内联 PC)
   =========================================== */
.etb-header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
  height: 100%;
  margin: 0 var(--etb-space-lg);
  min-width: 0; /* 防止溢出 */
}

.etb-header__nav-list {
  display: flex;
  align-items: stretch; /* 让 nav-item 填满高度 */
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: var(--etb-space-xs);
}

.etb-header__nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* 导航项底部红色下划线 - 贴在 header 底部 */
.etb-header__nav-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--etb-red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-normal) var(--ease-out);
  z-index: 10;
}

.etb-header__nav-item:hover::before,
.etb-header__nav-item.is-active::before {
  transform: scaleX(1);
}

/* 悬停桥接区域 - 解决鼠标移动到下拉区域时的断层问题 */
.etb-mega-trigger::after,
.etb-dropdown-trigger::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 16px;
  transform: translateY(100%);
}

.etb-header__nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  color: var(--etb-white);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  position: relative;
  transition: color var(--duration-fast);
  border-bottom: none !important;
  box-shadow: none !important;
  cursor: pointer; /* 确保 span 也有手形光标 */
}

.etb-header__nav-link:hover,
.etb-header__nav-link:focus,
.etb-header__nav-link:active {
  color: var(--etb-white);
  text-decoration: none !important;
  border-bottom: none !important;
}

.etb-header__nav-link .etb-icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  transition: transform var(--duration-fast), opacity var(--duration-fast);
}

.etb-header__nav-item:hover .etb-header__nav-link .etb-icon {
  opacity: 1;
  transform: rotate(180deg);
}

/* ===========================================
   5. Mega Menu (Product - 全宽)
   =========================================== */
.etb-mega {
  position: fixed;
  top: var(--etb-header-total-height);
  left: 0;
  right: 0;
  z-index: 1002;
  background: var(--etb-white);
  box-shadow: var(--shadow-xl);
  pointer-events: none;
  /* 用 clip-path 展开动画 - 避免白线 */
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--duration-normal) var(--ease-out);
}

/* Mega 激活 - clip-path 展开 */
.etb-mega-trigger:hover .etb-mega,
.etb-mega-trigger.is-active .etb-mega {
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
}

/* Mega 内部布局 - 6 列 (宽屏) */
.etb-mega__inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 48px;
}

/* 列 */
.etb-mega__col {
  display: flex;
  flex-direction: column;
}

/* 列标题 */
.etb-mega__heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--etb-gray);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--etb-border);
}

.etb-mega__heading a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast);
}

.etb-mega__heading a:hover {
  color: var(--etb-red);
}

/* 子标题 */
.etb-mega__heading--sub {
  margin-top: 24px;
  font-size: 10px;
  color: var(--etb-gray-light);
}

/* 列表 */
.etb-mega__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.etb-mega__list li {
  margin: 0;
}

.etb-mega__list a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  color: var(--etb-gray-dark);
  text-decoration: none;
  transition: color var(--duration-fast), padding-left var(--duration-fast);
}

.etb-mega__list a:hover {
  color: var(--etb-red);
  padding-left: 6px;
}

/* ===========================================
   6. Dropdown (紧凑下拉 - Solution/Inspiration/Finance)
   =========================================== */
.etb-dropdown {
  position: absolute;
  top: 100%; /* 相对于 nav-item，现在 nav-item 填满 header 高度，所以贴底 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1003;
  min-width: 180px;
  background: var(--etb-white);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  /* 用 clip-path 展开动画 - 避免白线 */
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--duration-normal) var(--ease-out);
}

/* Dropdown 激活 - clip-path 展开 */
.etb-dropdown-trigger:hover .etb-dropdown,
.etb-dropdown-trigger.is-active .etb-dropdown {
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
}

/* Dropdown 列表 */
.etb-dropdown__list {
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

.etb-dropdown__list li a {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--etb-gray-dark);
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.etb-dropdown__list li a:hover {
  background: var(--etb-bg-light);
  color: var(--etb-red);
}

/* ===========================================
   7. 图标组 + 账户下拉
   =========================================== */
.etb-header__icons {
  display: flex;
  align-items: center; /* 图标垂直居中 */
  height: 100%; /* 填满父容器高度，让 icon-wrapper 可以用 100% */
  gap: 4px;
  flex-shrink: 0;
}

/* 单个图标按钮 */
.etb-header__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--etb-white);
  cursor: pointer;
  text-decoration: none;
  border-radius: 8px;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.etb-header__icon:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* 账户图标 hover - 与其他图标保持一致，无红色/位移效果 */
.etb-header__icon--account:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--etb-white);
  transform: none;
}

.etb-header__icon .etb-icon {
  width: 22px;
  height: 22px;
}

/* 购物车角标 */
.etb-header__cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--etb-red);
  color: var(--etb-white);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
}

.etb-header__cart-badge:empty,
.etb-header__cart-badge[data-count="0"] {
  display: none;
}

/* 图标包装器 - 单独填满高度让下拉的 top:100% 贴底 */
.etb-header__icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch; /* 只让这个元素填满高度，不影响其他图标 */
}

/* 账户下拉 - absolute 定位紧贴 icon-wrapper 底部 */
.etb-header__dropdown {
  position: absolute;
  top: 100%; /* icon-wrapper 填满高度，所以这里贴底 */
  left: 50%; /* 居中对齐用户图标 */
  transform: translateX(-50%);
  width: 220px;
  background: var(--etb-white);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 1010;
  pointer-events: none;
  /* clip-path 展开动画 */
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--duration-normal) var(--ease-out);
}

/* 账户图标悬停桥接区域 - 安全三角形技术 */
.etb-header__icon-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -40px; /* 扩展左侧覆盖斜向悬停 */
  right: -10px;
  height: 20px; /* 增大高度 */
  transform: translateY(100%);
  /* 可视化调试时使用: background: rgba(255, 0, 0, 0.1); */
}

/* 使用 JS 控制的 class 显示下拉 (支持延迟关闭) */
.etb-header__icon-wrapper.is-dropdown-open .etb-header__dropdown,
.etb-header__icon-wrapper:hover .etb-header__dropdown {
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
}

.etb-header__dropdown-list {
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

.etb-header__dropdown-list li a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--etb-gray-dark);
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.etb-header__dropdown-list li a:hover {
  background: var(--etb-bg-light);
  color: var(--etb-red);
}

.etb-header__dropdown-list .divider {
  height: 1px;
  margin: 8px 16px;
  background: var(--etb-border);
}

/* ===========================================
   8. PC 遮罩
   =========================================== */
.etb-header__overlay {
  position: fixed;
  top: var(--etb-header-total-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 999;
  transition: opacity var(--duration-normal), visibility var(--duration-normal);
  pointer-events: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.etb-header.has-overlay .etb-header__overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ===========================================
   9. Search Overlay
   =========================================== */
.etb-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal), visibility var(--duration-normal);
}

.etb-search-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.etb-search-overlay__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.etb-search-overlay__content {
  position: relative;
  max-width: 680px;
  margin: 12vh auto 0;
  padding: 0 var(--etb-space-lg);
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity var(--duration-slow) var(--ease-out), 
              transform var(--duration-slow) var(--ease-out);
}

.etb-search-overlay.is-active .etb-search-overlay__content {
  opacity: 1;
  transform: translateY(0);
}

.etb-search-overlay__close {
  position: absolute;
  top: -60px;
  right: var(--etb-space-lg);
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: var(--etb-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast);
}

.etb-search-overlay__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.etb-search-overlay__close .etb-icon {
  width: 28px; /* 增大关闭图标尺寸 */
  height: 28px;
}

.etb-search-overlay__form {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--etb-white);
  border-radius: 12px;
  height: 60px;
  padding: 0 var(--etb-space-md);
  box-shadow: var(--shadow-xl);
}

.etb-search-overlay__input {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 18px;
  outline: none;
  color: var(--etb-black);
}

.etb-search-overlay__input::placeholder {
  color: var(--etb-gray-light);
}

.etb-search-overlay__submit {
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--etb-gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast), background var(--duration-fast);
}

.etb-search-overlay__submit:hover {
  color: var(--etb-red);
  background: var(--etb-bg-light);
}

.etb-search-overlay__submit .etb-icon {
  width: 28px; /* 增大搜索提交图标尺寸 */
  height: 28px;
}

.etb-search-overlay__results {
  margin-top: var(--etb-space-lg);
  max-height: 55vh;
  overflow-y: auto;
  background: var(--etb-white);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

/* Search Overlay Ajax 结果 */
.etb-search-overlay .nsearchinput-pl.well {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin: 8px 0 0 0 !important;
  padding: 0;
  width: 100%;
  max-height: 50vh;
  overflow-y: auto;
  background: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
}

.etb-search-overlay .nsearchinput-pl ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.etb-search-overlay .nsearchinput-pl ul li a {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
  transition: background var(--duration-fast);
  border-bottom: 1px solid #f0f0f0;
}

.etb-search-overlay .nsearchinput-pl ul li:last-child a {
  border-bottom: none;
}

.etb-search-overlay .nsearchinput-pl ul li a:hover {
  background: var(--etb-bg-light);
}

.etb-search-overlay .nsearchinput-pl ul li img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-right: 12px;
  flex-shrink: 0;
  background: #fafafa;
  border-radius: 6px;
}

/* ===========================================
   10. Cart Drawer
   已移至独立文件: cart-drawer.css
   =========================================== */

/* ===========================================
   11. Mobile Menu
   =========================================== */
.etb-mobile-menu {
  position: fixed;
  top: var(--etb-header-total-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal), visibility var(--duration-normal);
}

.etb-mobile-menu.is-active {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.etb-mobile-menu__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--duration-normal);
}

.etb-mobile-menu.is-active .etb-mobile-menu__backdrop {
  opacity: 1;
}

.etb-mobile-menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 60vh;
  max-height: calc(100vh - var(--etb-header-total-height) - 40px);
  background: var(--etb-white);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--duration-slow) var(--ease-out-expo);
  display: flex;
  flex-direction: column;
}

.etb-mobile-menu.is-active .etb-mobile-menu__panel {
  clip-path: inset(0 0 0 0);
}

.etb-mobile-menu__nav {
  position: relative;
  overflow-y: auto;
  flex: 1;
  order: 0;
}

/* 菜单列表 */
.etb-mobile-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.etb-mobile-menu__item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--etb-border);
}

.etb-mobile-menu__link {
  flex: 1;
  display: block;
  padding: 0 20px;
  height: 56px;
  line-height: 56px;
  font-size: 16px;
  font-weight: 700; /* 一级菜单 Bold 字重 */
  color: var(--etb-black);
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.etb-mobile-menu__link:hover,
.etb-mobile-menu__link:active {
  background: var(--etb-bg-light);
  color: var(--etb-red);
}

/* 子级箭头按钮 */
.etb-mobile-menu__arrow {
  width: 56px;
  height: 56px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--etb-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--etb-gray);
  flex-shrink: 0;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.etb-mobile-menu__arrow:hover {
  background: var(--etb-bg-light);
  color: var(--etb-red);
}

.etb-mobile-menu__arrow .etb-icon {
  width: 20px;
  height: 20px;
}

/* 子级面板 */
.etb-mobile-menu__sublevel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--etb-white);
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-out);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.etb-mobile-menu__sublevel.is-active {
  transform: translateX(0);
}

/* 返回按钮 */
.etb-mobile-menu__back {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 56px;
  padding: 0 20px;
  background: var(--etb-bg-light);
  border: none;
  border-bottom: 1px solid var(--etb-border);
  font-size: 16px;
  font-weight: 600;
  color: var(--etb-black);
  cursor: pointer;
  text-align: left;
  flex-shrink: 0;
  transition: background var(--duration-fast);
}

.etb-mobile-menu__back:hover {
  background: var(--etb-border);
}

.etb-mobile-menu__back .etb-icon {
  width: 20px;
  height: 20px;
  color: var(--etb-gray);
}

/* 子级列表 */
.etb-mobile-menu__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
  overflow-y: auto;
}

.etb-mobile-menu__subitem {
  border-bottom: 1px solid var(--etb-border);
}

.etb-mobile-menu__sublink {
  display: block;
  padding: 0 20px;
  height: 52px;
  line-height: 52px;
  font-size: 15px;
  font-weight: 400; /* 三级子项 Regular 字重 */
  color: var(--etb-gray-dark);
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.etb-mobile-menu__sublink:hover {
  background: var(--etb-bg-light);
  color: var(--etb-red);
}

/* 二级菜单标题 Bold 字重 */
.etb-mobile-menu__sublink--heading {
  font-weight: 700;
  color: var(--etb-black);
}

/* 子项行布局 */
.etb-mobile-menu__subitem-row {
  display: flex;
  align-items: center;
}

.etb-mobile-menu__subitem-row .etb-mobile-menu__sublink {
  flex: 1;
}

/* 三级菜单箭头 */
.etb-mobile-menu__subarrow {
  width: 52px;
  height: 52px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--etb-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--etb-gray);
  flex-shrink: 0;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.etb-mobile-menu__subarrow:hover {
  background: var(--etb-bg-light);
  color: var(--etb-red);
}

.etb-mobile-menu__subarrow .etb-icon {
  width: 16px;
  height: 16px;
}

/* View All 链接 */
.etb-mobile-menu__view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  margin: 16px 20px;
  padding: 0;
  background: var(--etb-red);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--etb-white);
  text-decoration: none;
  transition: background var(--duration-fast), transform var(--duration-fast);
  flex-shrink: 0;
}

.etb-mobile-menu__view-all:hover {
  background: var(--etb-red-dark);
  color: var(--etb-white); /* 保持文字白色 */
}

.etb-mobile-menu__view-all:active {
  transform: scale(0.98);
  background: var(--etb-red-dark);
  color: var(--etb-white); /* 点击时保持文字白色，不变红 */
}

.etb-mobile-menu__view-all:visited {
  color: var(--etb-white); /* 访问过后保持白色 */
}

.etb-mobile-menu__view-all .etb-icon {
  width: 16px;
  height: 16px;
}

/* Account 菜单项样式 */
.etb-mobile-menu__item--account .etb-mobile-menu__link {
  flex: 1;
  display: flex;
  align-items: center;
}

.etb-mobile-menu__account-icon {
  color: var(--etb-red);
  width: 20px;
  height: 20px;
  margin-left: 8px;
}

.etb-mobile-menu__account-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}

.etb-mobile-menu__account-arrow .etb-icon {
  width: 20px;
  height: 20px;
  color: var(--etb-gray);
}

/* ===========================================
   12. Hover 动效增强
   =========================================== */

/* 图标按钮 hover */
.etb-header__icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--duration-normal) var(--ease-out);
}

.etb-header__icon:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

/* ===========================================
   13. 响应式
   =========================================== */

/* 991px 以下: 隐藏 Nav, 显示汉堡菜单, Mobile 布局调整 */
@media (max-width: 991px) {
  .etb-header__nav {
    display: none;
  }

  /* Mobile 布局: Logo 左 | 图标组+汉堡 右 */
  .etb-header__main-inner {
    padding: 0 var(--etb-space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  /* Logo 保持左侧 */
  .etb-header__logo {
    order: 1;
    flex: 1;
  }

  .etb-header__logo img,
  .etb-header__logo svg {
    height: 32px;
  }
  
  /* 图标组在右侧 - 等距间距 */
  .etb-header__icons {
    order: 2;
    display: flex;
    align-items: center;
    gap: 8px; /* 等距间距 */
  }
  
  /* 汉堡按钮移到图标组最右侧 - 移除背景框 */
  .etb-header__hamburger {
    display: flex;
    order: 3;
    margin-left: 0; /* 让 gap 统一管理间距 */
    border-radius: 0;
  }
  
  .etb-header__hamburger:hover,
  .etb-header__hamburger:focus,
  .etb-header__hamburger:active {
    background: transparent;
  }
  
  /* 隐藏 PC 遮罩 */
  .etb-header__overlay {
    display: none;
  }
  
  /* 隐藏账户下拉和账户图标 (移动端 - 账户移入 Menu) */
  .etb-header__dropdown,
  .etb-header__icon-wrapper {
    display: none;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .etb-header__icons {
    gap: 6px; /* 移动端稍小但仍等距 */
  }
  
  .etb-header__icon {
    width: 36px;
    height: 36px;
  }
  
  .etb-header__icon .etb-icon {
    width: 20px;
    height: 20px;
  }
}

/* Mobile Small */
@media (max-width: 479px) {
  .etb-header__logo img,
  .etb-header__logo svg {
    height: 28px;
  }
}

/* ===========================================
   14. Body Lock - 移动端抽屉/菜单滚动锁定
   =========================================== */
body.etb-drawer-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  /* 滚动位置由 JS 处理 */
}

/* ===========================================
   15. 屏幕阅读器
   =========================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================
   16. Mega 响应式
   =========================================== */

/* 1400px 以下: 4 列 */
@media (max-width: 1399px) {
  .etb-mega__inner {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    max-width: 1100px;
  }
}

/* 1200px 以下: 3 列 + 导航压缩 */
@media (max-width: 1199px) {
  .etb-mega__inner {
    grid-template-columns: repeat(3, 1fr);
    padding: 32px 40px;
    gap: 24px;
  }
  
  /* 导航压缩 - 防止溢出 */
  .etb-header__nav-link {
    padding: 10px 12px;
    font-size: 14px;
  }
  
  .etb-header__nav-list {
    gap: 0;
  }
}

/* 1100px 以下: 进一步压缩 */
@media (max-width: 1099px) {
  .etb-header__nav-link {
    padding: 10px 8px;
    font-size: 13px;
  }
  
  .etb-header__nav {
    margin: 0 var(--etb-space-sm);
  }
}

/* 992px 以下: 隐藏 Mega/Dropdown */
@media (max-width: 991px) {
  .etb-mega,
  .etb-dropdown {
    display: none !important;
  }
}