/* ================================================================
   1. 强制重置 (CSS Reset) - 彻底抹除主题与 Elementor 的默认干扰
   ================================================================ */
.twinkle-fashion-mega-menu-wrapper ul,
.twinkle-fashion-mega-menu-wrapper li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 彻底抹除所有按钮的默认边框(粉红边框)、背景和阴影 */
.twinkle-fashion-mega-menu-wrapper button {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  border-radius: 0 !important;
}

/* PC 下默认逻辑：确保移动端 HTML 彻底隐藏 */
.fashion-menu-mobile {
  display: none !important;
}

/* ================================================================
   2. PC 端样式 (保留你的所有自定义修改)
   ================================================================ */
.twinkle-fashion-mega-menu-wrapper {
  width: 100%;
  background-color: #ffffff;
  font-family: inherit;
}

.fashion-menu-desktop {
  display: flex !important;
}

.fm-pc-tabs {
  width: 220px;
  background-color: #ffffff;
  border-right: 1px solid #eaeaea;
  display: flex;
  flex-direction: column;
}

.fm-pc-tabs button.fm-pc-tab-btn {
  padding: 8px 12px !important;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  transition: all 0.2s ease-in-out;
}

.fm-pc-tabs button.fm-pc-tab-btn:hover,
.fm-pc-tabs button.fm-pc-tab-btn.active {
  background-color: var(--e-global-color-primary, #7f4c15) !important;
  color: #ffffff;
}

.fm-pc-content-area {
  flex: 1;
  padding: 0 40px;
}

.fm-pc-tab-content {
  display: none;
  animation: fadeIn 0.3s ease;
}

.fm-pc-tab-content.active {
  display: block;
}

.fm-pc-masonry {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 320px; /* 保留你的 320px 高度 */
  align-content: flex-start;
}

.fm-pc-group {
  min-width: 120px;
  max-width: 220px;
  width: fit-content;
  margin-right: 50px; /* 保留你的 50px 间距 */
  margin-bottom: 20px;
  position: relative;
}

.fm-pc-group::after {
  content: "";
  position: absolute;
  top: 0;
  right: -25px;
  width: 1px;
  height: 100%;
  background-color: #eaeaea;
}

/* 你的最后一列优化 */
.fm-pc-group.hide-right-line {
  margin-right: 10px; /* 保留你的 10px 留白优化 */
}
.fm-pc-group.hide-right-line::after {
  display: none !important;
}

.fm-pc-l2-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 8px;
  text-decoration: none;
  transition: color 0.2s;
}

.fm-pc-l2-title:hover {
  color: var(--e-global-color-03899bb, #aa4415);
}

.fm-pc-l3-list li {
  margin-bottom: 4px;
}

.fm-pc-l3-list a {
  font-size: 14px;
  color: #666666;
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1.4;
  display: inline-block;
}

.fm-pc-l3-list a:hover {
  color: var(--e-global-color-03899bb, #aa4415);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ================================================================
   3. 移动端样式 (极致精简与去污染)
   ================================================================ */
@media (max-width: 1024px) {
  .fashion-menu-desktop {
    display: none !important;
  }

  .fashion-menu-mobile {
    display: block !important;
    width: 100%;
    background-color: #ffffff;
    position: relative;
  }

  .fm-mob-panel {
    display: none;
    width: 100%;
    animation: mobSlideIn 0.3s ease forwards;
  }

  .fm-mob-panel.is-active {
    display: block;
  }

  /* 强制抹除移动端列表的所有圆点和边框 */
  .fm-mob-toggle,
  .fm-mob-link {
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    color: var(--e-global-color-primary, #7f4c15) !important;
    text-decoration: none !important;
    border: none !important; /* 彻底移除粉红边框 */
    background: none !important;
    font-weight: 650;
    gap: 10px;
  }

  .fm-mob-link {
    padding: 0 5px;
  }

  .fm-mob-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .fm-arrow {
    font-size: 22px;
    font-weight: 650;
    color: var(--e-global-color-primary, #7f4c15) !important;
  }

  /* 移动端头部样式 */
  .fm-mob-header {
    display: flex;
    align-items: center;
    padding: 0;
    margin-bottom: 10px;
  }

  .fm-mob-back {
    display: flex;
    gap: 10px;
    color: #444;
    font-weight: bold;
    margin-right: 15px;
    font-size: 14px;
  }

  .fm-mob-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--e-global-color-primary, #7f4c15) !important;
  }

  .fm-mob-view-all {
    font-weight: bold;
    color: var(--e-global-color-primary, #7f4c15) !important;
  }

  @keyframes mobSlideIn {
    from {
      opacity: 0;
      transform: translateX(10px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* ================================================================
   4. 独立的 My Account 组件样式
   ================================================================ */
/* 外部包裹器：相对定位，作为下拉框的锚点 */
.twinkle-account-module {
  position: relative;
  display: inline-block;
  font-family: inherit;
  /* 给一块安全感应区，防止鼠标稍微移开下拉框就消失 */
  padding-bottom: 10px;
  margin-bottom: -10px;
}

/* 触发器 (My Account 文本与箭头) */
.ta-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff; /* 注意：如果你的页眉背景是浅色，这里请改为 #333333 */
  transition: color 0.3s ease;
}

.ta-arrow {
  transition: transform 0.3s ease;
}

/* 鼠标悬浮触发器时：箭头翻转 */
.twinkle-account-module:hover .ta-arrow {
  transform: rotate(180deg);
}

/* 核心：下拉浮层设计 */
.ta-dropdown {
  position: absolute;
  top: calc(100% + 9px); /* 紧贴触发器底部 */
  right: 0; /* 菜单向左展开，防止撑破浏览器右侧边界 */
  width: 160px;
  background-color: #ffffff;
  border: 1px solid var(--e-global-color-03899bb, #aa4415);
  border-radius: 5px;
  z-index: 99;

  /* 默认隐藏状态：纯 CSS 驱动，性能最佳 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 悬浮或通过 JS 激活时：显示下拉浮层 */
.twinkle-account-module:hover .ta-dropdown,
.twinkle-account-module.is-active .ta-dropdown {
  opacity: 1;
  visibility: visible;
}

/* 内部列表样式 */
.ta-menu-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 12px 0 !important;
}

.ta-menu-link {
  display: block;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* 内部链接悬浮效果 */
.ta-menu-link:hover {
  color: var(--e-global-color-primary, #7f4c15);
}

/* --- PC 端设置 --- */
.ta-icon {
  display: none; /* PC 端默认隐藏图标，只显示文字 */
  width: 24px;
  height: 24px;
}

/* 如果你希望 PC 端也显示图标，就把上面的 display: none 删掉，并给图标和文字加点间距 */
/* .ta-trigger { gap: 8px; } */

/* --- 移动端响应式切换 --- */
@media (max-width: 1024px) {
  /* 1. 隐藏文字和箭头 */
  .ta-text,
  .ta-arrow {
    display: none !important;
  }

  /* 2. 显示人像图标 */
  .ta-icon {
    display: block !important;
    color: #fff; /* 移动端导航栏通常是浅色，所以图标用深色 */
  }

  /* 3. 调整移动端下拉框的位置，防止图标太靠右导致菜单溢出屏幕 */
  .ta-dropdown {
    right: -10px; /* 稍微往右偏移一点，对齐图标中心 */
    width: 140px;
  }
}