/* ===== 移动端功能导航栏（仅 ≤820px 显示；桌面端隐藏，不影响原有 UI） ===== */
/* 默认隐藏 */
.mobile-nav,
.mn-dropdown { display: none; }

@media (max-width: 820px) {
  /* 内容整体下移，给固定头部 + 移动导航让位 */
  body { padding-top: calc(var(--nav-height, 56px) + 44px); }

  /* 横滑导航栏：白色实底，固定在头部正下方 */
  .mobile-nav {
    display: flex;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 16px;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    position: fixed;
    top: var(--nav-height, 56px);
    left: 0; right: 0;
    height: 44px;
    z-index: 999;
    gap: 0;
  }
  .mobile-nav::-webkit-scrollbar { display: none; }

  /* 导航项：电脑端同款文字风格 */
  .mn-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    height: 44px;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s;
    position: relative;
    border: none;
    background: transparent;
    font-family: inherit;
  }
  .mn-item:active,
  .mn-item.mn-active {
    color: var(--primary, #fb658a);
    font-weight: 500;
  }
  /* 当前页底部指示线 */
  .mn-item.mn-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--primary, #fb658a);
    border-radius: 1px;
  }
  .mn-caret { font-size: 10px; opacity: .5; margin-left: 4px; }

  /* 电商作图下拉面板：白色实底 */
  .mn-dropdown {
    display: none;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    position: fixed;
    top: calc(var(--nav-height, 56px) + 44px);
    left: 0; right: 0;
    z-index: 1001;
    padding: 4px 0;
  }
  .mn-dropdown.open { display: flex; }
  .mn-dropdown a {
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid #f5f5f5;
    transition: background .1s, color .1s;
  }
  .mn-dropdown a:last-child { border-bottom: none; }
  .mn-dropdown a:active { background: #fafafa; color: var(--primary, #fb658a); }
}