/* ════════════════════════════════════════════════════════════════
   nav-menu.css — 顶部导航「Shop ▾」超级菜单 + 当前页高亮
   ──────────────────────────────────────────────────────────────
   手写新增组件（非 OD home.html 生成）。独立成文件，避免污染 OD
   设计基底 omni.css（后者会被 OD 整文件重生覆盖、会丢手写改动）。
   functions.php 全站 enqueue（依赖 omni-design 句柄，最后层叠胜出）。
   结构见 template-parts/header-nav.php；交互见 assets/js/omni.js「#17」。
   ════════════════════════════════════════════════════════════════ */

/* ── 顶级项容器 + Shop 触发按钮 ─────────────────────────────────── */
.omni-nav__item { position: relative; display: flex; align-items: center; }

.omni-nav__top {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--fg); padding: 8px 14px; border-radius: var(--radius-sm);
  letter-spacing: .02em; background: none; border: none; cursor: pointer;
  text-decoration: none; transition: color .15s, background .15s;
}
.omni-nav__links .omni-nav__top:hover { color: var(--accent); background: var(--red-bg); }
.omni-nav__links .omni-nav__top.is-active { color: var(--accent); }
.omni-nav__caret { font-size: 9px; opacity: .7; transition: transform .2s; }
.omni-nav__item--has-menu:hover .omni-nav__caret,
.omni-nav__item--has-menu.is-open .omni-nav__caret { transform: rotate(180deg); }

/* 顶级 active 下划线（Shop 按钮 + 直链共用视觉）*/
.omni-nav__links .omni-nav__top.is-active::after,
.omni-nav__links a.is-active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.omni-nav__links a.is-active { color: var(--accent); position: relative; }

/* ── 超级菜单面板 ──────────────────────────────────────────────── */
.omni-megamenu {
  position: absolute; top: calc(100% + 10px); left: 0;
  width: 540px; max-width: calc(100vw - 48px);
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: 0 20px 50px rgba(40, 30, 20, .16);
  padding: 18px; z-index: 120;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.omni-nav__item--has-menu:hover .omni-megamenu,
.omni-nav__item--has-menu.is-open .omni-megamenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* 触发器与面板间 10px 空隙的 hover 桥，避免移动鼠标时丢失 hover */
.omni-nav__item--has-menu::before {
  content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 12px;
}

.omni-megamenu__quick { display: flex; gap: 8px; margin-bottom: 14px; }
.omni-megamenu__quick a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px; border-radius: var(--radius-sm); background: var(--bg2);
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--fg); text-decoration: none; transition: background .15s, color .15s;
}
.omni-megamenu__quick a:hover { background: var(--red-bg); color: var(--accent); }

.omni-megamenu__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.omni-megamenu__heading {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted2);
  padding: 0 8px; margin-bottom: 6px;
}
.omni-megamenu a.omni-megamenu__cat {
  display: block; padding: 7px 8px; border-radius: 6px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--fg); text-decoration: none; letter-spacing: 0;
  transition: background .15s, color .15s;
}
.omni-megamenu a.omni-megamenu__cat:hover { background: var(--bg2); color: var(--accent); }
.omni-megamenu a.omni-megamenu__cat.is-active { color: var(--accent); font-weight: 700; }
.omni-megamenu a.omni-megamenu__all {
  display: inline-block; margin-top: 14px; padding: 0 8px;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .04em; color: var(--accent); text-decoration: none;
}
.omni-megamenu a.omni-megamenu__all:hover { text-decoration: underline; }

/* ── 移动端菜单：分组标题 + 分类（≤900px megamenu 随父级 display:none 隐藏）── */
.omni-mobile-menu__group {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted2);
  padding: 18px 0 6px; border: none;
}
.omni-mobile-menu a.omni-mobile-menu__cat {
  font-size: 15px; font-weight: 500; padding: 10px 0 10px 14px; color: var(--fg);
}
.omni-mobile-menu a.is-active { color: var(--accent); }