/* ==========================================================================
   nav-mega.css — 顶部导航悬停「大菜单」
   批次 0919 (2026-09-19)
   - .usx-mega-parent  顶层商品分类项（JS/PHP 加类）
   - .usx-mega         二级分类面板（多列网格）
   展开：桌面 :hover / :focus-within；触屏 .is-open（nav-mega.js）
   ========================================================================== */

.wf_navbar-mainmenu > li.usx-mega-parent {
	position: relative;
}

/* 顶层项右侧小箭头（提示可展开） */
.wf_navbar-mainmenu > li.usx-mega-parent > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 7px;
	vertical-align: 2px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	opacity: .65;
	transition: transform .18s ease, opacity .18s ease;
}

.wf_navbar-mainmenu > li.usx-mega-parent:hover > a::after,
.wf_navbar-mainmenu > li.usx-mega-parent.is-open > a::after,
.wf_navbar-mainmenu > li.usx-mega-parent:focus-within > a::after {
	transform: rotate(225deg) translateY(-1px);
	opacity: 1;
}

/* ---------- 面板 ---------- */
.usx-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 10px);
	z-index: 500;
	width: max-content;
	min-width: 520px;
	max-width: min(940px, 94vw);
	background: #fff;
	border: 1px solid var(--line, #e6e1da);
	border-radius: 14px;
	box-shadow: 0 18px 48px rgba(20, 30, 30, .14);
	padding: 20px 22px 16px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	color: var(--ink-1, #1f2d2d);
}

.wf_navbar-mainmenu > li.usx-mega-parent:hover > .usx-mega,
.wf_navbar-mainmenu > li.usx-mega-parent:focus-within > .usx-mega,
.wf_navbar-mainmenu > li.usx-mega-parent.is-open > .usx-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

/* 悬停时的缓冲带：避免鼠标从菜单项滑到面板间隙时闪关 */
.wf_navbar-mainmenu > li.usx-mega-parent > .usx-mega::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}

.usx-mega__list {
	display: grid;
	/* 每列按内容定宽（保证长分类名不折行、不被裁切），整体最多 3 列。 */
	grid-template-columns: repeat(3, max-content);
	justify-content: start;
	gap: 4px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.usx-mega__item {
	margin: 0;
	padding: 0;
}

.usx-mega__item > a {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--ink-1, #1f2d2d) !important;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	/* 金刚 0919：子菜单每项只占一行，且各列一律左对齐 */
	text-align: left;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}

.usx-mega__item > a:hover,
.usx-mega__item > a:focus {
	background: var(--c-primary-tint, rgba(26, 58, 58, .07));
	color: var(--c-primary, #1A3A3A) !important;
}

.usx-mega__foot {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line, #e6e1da);
	display: flex;
	justify-content: flex-end;
}

.usx-mega__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--c-action, #D2451F) !important;
	text-decoration: none;
}

.usx-mega__all:hover {
	text-decoration: underline;
}

/* 面板内的图标字体（父主题 fa 图标）：统一给个宽度 */
.usx-mega__all .fa {
	font-size: 12px;
}

/* 移动端菜单里不渲染 mega 面板（移动端走「Browse Categories」区块） */
.wf_mobilenav .usx-mega {
	display: none !important;
}

/* 防止父主题导航容器 overflow 裁掉下拉面板 */
.wf_navbar-menu,
.wf_navbar-wrapper,
.wf_header-navwrapper,
.wf_header-navwrapperinner {
	overflow: visible;
}

@media (max-width: 1199.98px) {
	.usx-mega {
		min-width: 420px;
	}
	.usx-mega__list {
		grid-template-columns: repeat(2, max-content);
	}
}