/* ============================================================
 * 导航 mega menu（PRODUCTS 下拉）
 * 2026-09-12 新增。结构（由 functions.php 的 atw_render_mega_menu() 输出）：
 *   .atw-navitem--mega
 *     > a.atw-navitem__label        ← 导航项本身
 *     > .atw-mega                   ← 定位层（含 padding-top 作 hover 桥接，本身透明）
 *         > .atw-mega__box          ← 白底卡片
 *             .atw-mega__cats       ← 左列：分类
 *             .atw-mega__panels     ← 右列：该分类的产品（图 + 名 + 型号）
 *
 * ⚠️ 定位为什么不挂在导航项上：一度用 `.atw-navitem--mega{position:relative}` +
 *    `left:50%; translateX(-50%)` 让面板相对 PRODUCTS 居中，结果 PRODUCTS 在导航左侧、
 *    面板宽 1080px，**整个左列被推到视口外（left:-109px）**，真实用户根本点不到。
 *    现在改成相对 `.atw-header__inner` 定位（left/right 撑满容器），任何视口都不会溢出。
 *    注意：因此 **导航项本身不能设 position:relative**，否则定位祖先就变成它了。
 *
 * ⚠️ 本主题的 CSS 是按条件加载的（atw_load_global_css / atw_load_template_css），
 *    新增 pattern CSS 必须在 functions.php 第 5 节注册，否则前台裸奔。
 * ⚠️ .atw-header__nav a 是通用导航样式（14px / 大写 / 加粗），会命中 mega 里的所有
 *    链接，所以覆盖规则统一带 .atw-header__nav 前缀提高优先级。
 * ============================================================ */

/* 面板的定位祖先 */
.atw-header__inner { position: relative; }

.atw-header__nav .atw-navitem--mega { display: flex; align-items: center; }

.atw-header__nav .atw-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  /* 这段 padding 是 hover 桥接：鼠标从导航项移到面板途中经过它，
     仍算在 .atw-mega 内，父级 :hover 不会断（比透明的 ::after 可靠）。 */
  padding-top: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 900;
}
.atw-navitem--mega:hover .atw-mega,
.atw-navitem--mega:focus-within .atw-mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.atw-mega__box {
  display: grid;
  grid-template-columns: 232px 1fr;
  background: #fff;
  border: 1px solid var(--atw-gray-200);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

/* ---- 左列：分类 ---- */
.atw-header__nav .atw-mega__cats {
  padding: 10px;
  background: var(--atw-gray-50);
  border-right: 1px solid var(--atw-gray-200);
}
.atw-header__nav .atw-mega__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--atw-black);
}
.atw-header__nav .atw-mega__cat:hover,
.atw-header__nav .atw-mega__cat.is-active { background: #fff; }
.atw-mega__count {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--atw-gray-600);
}

/* ---- 右列：产品面板 ---- */
.atw-mega__panels { padding: 16px 18px; min-height: 250px; }

.atw-header__nav .atw-mega__panel {
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px 12px;
}
.atw-header__nav .atw-mega__panel.is-active { display: grid; }

.atw-header__nav .atw-mega__product { display: block; text-decoration: none; }

.atw-mega__photo {
  display: block;
  aspect-ratio: 1 / 1;
  margin-bottom: 6px;
  background: var(--atw-gray-50);
  border: 1px solid var(--atw-gray-200);
  border-radius: 8px;
  overflow: hidden;
}
.atw-mega__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.atw-header__nav .atw-mega__name {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  color: var(--atw-gray-800);
}
.atw-header__nav .atw-mega__product:hover .atw-mega__name {
  color: var(--atw-black);
  text-decoration: underline;
}
.atw-mega__sku {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--atw-gray-600);
}

/* ---- 触屏不显示（没有 hover，交给汉堡菜单）---- */
@media (max-width: 1023px) {
  .atw-header__nav .atw-mega { display: none; }
}