/**
 * 自定义桌面端 Mega Menu 样式。
 *
 * 使用自有 mmm- 命名空间，浮层面板完全避开 Flatsome 的 .nav-dropdown 通用样式，
 * 只复用 .has-dropdown / .nav-top-link 的语义类以继承悬浮定位。
 */

/* 顶层项：作为浮层定位锚点，并覆盖 Flatsome 对 .has-dropdown 的默认 hover 行为 */
.mmm-item {
	position: relative;
}

/* 顶层菜单：所在列撑满剩余空间，菜单整组水平居中（含语言切换器），左右留白相等 */
.header-main .flex-col.hide-for-medium.flex-left {
	flex-grow: 1;
}

.header-main .header-nav-main.nav-left {
	position: relative;
	width: 100%;
	justify-content: center;
	column-gap: 58px;
}

.header-main .header-nav-main.nav-left > li.mmm-item {
	margin: 0;
}

/* 顶层文案：常规字重，字号 / 字距对齐参考图 */
.mmm-item > .nav-top-link {
	display: inline-flex;
	align-items: center;
	padding: 10px 0; /* 纵向留出 hover 区域，横向间距交给容器 column-gap */
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1;
	text-transform: none;
	white-space: nowrap;
}

/* 顶层 hover 横线：主题选项生成的 nav-line-bottom 为黑色，这里覆盖为品牌红 */
.header-main .header-nav-main.nav-left > li.mmm-item > .nav-top-link:before {
	background-color: #c91924;
}

/* 当前项高亮：红字 + 下划线（如 Blog） */
.header-main .header-nav-main.nav-left > li.mmm-item-active > .nav-top-link,
.header-main .header-nav-main.nav-left > li.mmm-item-active > .nav-top-link:hover {
	color: #c91924;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

/* 语言切换 li：跟随菜单项一起排列（不再绝对定位到最右侧），保持整组居中 */
.header-main .header-nav-main.nav-left > li.mmm-lang-item {
	display: flex;
	align-items: center;
	margin: 0;
}

/* 语言切换顶层链接：国旗 + 语言名 + 箭头 */
.mmm-item-lang > .nav-top-link {
	gap: 8px;
}

.mmm-lang-flag {
	display: block;
	width: 20px;
	height: 14px;
	border-radius: 2px;
	object-fit: cover;
}

/* 语言下拉列表：小尺寸白色面板，复用悬浮/is-open 展示逻辑 */
.mmm-item-lang > .mmm-lang-list {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 9999;
	min-width: 170px;
	margin: 0;
	padding: 8px 0;
	background: #ffffff;
	border: 1px solid #eeeeee;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	list-style: none;

	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(8px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.mmm-item-lang:hover > .mmm-lang-list,
.mmm-item-lang.is-open > .mmm-lang-list {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.mmm-lang-list li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	color: #4c4c4c;
	white-space: nowrap;
	transition: color 0.15s ease, background 0.15s ease;
}

.mmm-lang-list li a:hover {
	color: #dd3333;
	background: #f7f7f7;
}

/* 下箭头：细线条 chevron（旋转 45° 的右边框 + 下边框），覆盖 Flatsome 原生 title-caret */
.mmm-caret {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
}

/* 浮层面板：绝对定位，从父级 full width 正常左对齐 */
.mmm-item > .mmm-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9999;
	min-width: 780px;
	padding: 24px;
	background: #ffffff;
	border: 1px solid #eeeeee;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	text-align: left;

	/* 隐藏态 + 过渡，仅 hover/is-open 展示 */
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.mmm-item:hover > .mmm-panel,
.mmm-item.is-open > .mmm-panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mmm-item-products > .mmm-panel {
	min-width: 0;
	width: min(980px, 94vw);
	padding: 0;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 0;
	backdrop-filter: blur(10px);
	transform: translateY(8px);
}

.mmm-item-products:hover > .mmm-panel,
.mmm-item-products.is-open > .mmm-panel {
	transform: translateY(0);
}

/* 简单链接下拉（About Us / Event Hub）：窄面板，单列链接 */
.mmm-item > .mmm-panel-simple {
	min-width: 220px;
	padding: 10px 0;
}

.mmm-panel-simple .mmm-link-list li a {
	padding: 8px 20px;
}

/* 面板内部重置部分 Flatsome 通用文章类干扰 */
.mmm-panel p,
.mmm-panel h4,
.mmm-panel ul,
.mmm-panel li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mmm-products-panel {
	display: flex;
	width: 100%;
	min-height: 360px;
}

.mmm-products-left {
	width: 280px;
	padding: 26px 0;
	border-right: 1px solid rgba(0, 0, 0, 0.18);
	background: rgba(255, 255, 255, 0.22);
}

.mmm-products-nav li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.1;
	color: #666666;
	text-decoration: none;
	cursor: pointer; /* 分类标签已无 href，保持手型光标提示可交互 */
	transition: color 0.15s ease, background 0.15s ease;
}

/* 悬浮 / 当前分类：红字 + 浅底 + 加粗，保证 High、Low 也有明显反馈 */
.mmm-products-nav li.is-active > a,
.mmm-products-nav li > a:hover,
.mmm-products-nav li > a:focus-visible {
	color: #c91924;
	background: rgba(201, 25, 36, 0.06);
	font-weight: 600;
}

/* View All：无子面板，与上面几个分类之间拉开一点距离，作为次级入口；无右侧箭头 */
.mmm-products-viewall {
	margin-top: 10px;
}

/* 该规则在基础色之后声明，特异性相同，因此能覆盖上面的 #666 */
.mmm-products-viewall > a {
	color: #999999;
}

/* 选择器与上面的悬浮规则同样特异性，保证 View All 悬浮时也能加粗 + 浅底 */
.mmm-products-nav li.mmm-products-viewall > a:hover,
.mmm-products-nav li.mmm-products-viewall > a:focus-visible {
	color: #c91924;
	background: rgba(201, 25, 36, 0.06);
	font-weight: 600;
}

.mmm-products-nav-caret {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-top: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.mmm-products-right {
	position: relative;
	flex: 1;
	padding: 22px 28px 18px;
	overflow: hidden;
}

.mmm-products-items {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: center;
	gap: 18px;
	height: 100%;
}

/* 产品分组：每个分类一组 4 个产品，仅当前分组可见（由 assets/js/mega-menu.js 切换） */
.mmm-products-group {
	position: relative;
	z-index: 1;
	display: none;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: center; /* 产品列在右侧区域上下居中 */
	gap: 18px;
	height: 100%;
}

.mmm-products-group.is-active {
	display: grid;
}

.mmm-products-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	text-decoration: none;
	color: #444444;
}

.mmm-products-item:hover {
	color: #111111;
	background: rgba(201, 25, 36, 0.06); /* 悬浮时产品 + 名字浮现浅红底 */
	border-radius: 8px;
	/* 用负边距抵消内边距，避免 hover 时布局位移 */
	padding: 8px 10px 6px;
	margin: -8px -10px -6px;
}

.mmm-products-img {
	width: 100%;
	height: 240px;
	object-fit: contain;
}

.mmm-products-label,
.mmm-products-name {
	margin-top: -14px; /* 图片为 contain 缩放，底部留白较多，负边距把文字拉近产品 */
	font-size: 16px;
	font-style: italic;
	letter-spacing: 0.04em;
	color: #555555;
}

/* 网格布局 */
.mmm-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.mmm-grid-products {
	width: 100%;
}

/* 列标题 */
.mmm-col-title {
	margin: 0 0 14px !important;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #111111;
}

/* 文字链接列表 */
.mmm-link-list li {
	margin-bottom: 2px;
}
.mmm-link-list li a {
	display: block;
	padding: 6px 0;
	color: #4c4c4c;
	transition: color 0.15s ease;
}
.mmm-link-list li a:hover {
	color: #dd3333;
}

/* 产品卡 */
.mmm-product-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	margin-bottom: 18px;
	color: #4c4c4c;
	text-decoration: none;
}
.mmm-product-card:hover {
	color: #111111;
}
.mmm-product-card-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	background: #f5f5f5;
}
.mmm-product-card-name {
	font-size: 14px;
	font-weight: 600;
}
.mmm-product-card-price {
	font-size: 13px;
	color: #dd3333;
}

/* 特色大图 */
.mmm-hero-img {
	display: block;
	overflow: hidden;
	border-radius: 6px;
}
.mmm-hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}
.mmm-hero-img:hover img {
	transform: scale(1.04);
}

/* CTA */
.mmm-cta {
	display: inline-block;
	margin-top: 16px;
	padding: 10px 18px;
	background: #dd3333;
	color: #ffffff;
	border-radius: 4px;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	transition: background 0.15s ease;
}
.mmm-cta:hover {
	background: #b02a2a;
	color: #ffffff;
}

/* 平板/手机：该菜单列本身带 hide-for-medium，小于 960px 不显示；
   此处仅兜底，若出现于中屏则面板改为全宽 */
@media (max-width: 1023px) and (min-width: 960px) {
	.mmm-item > .mmm-panel {
		min-width: 600px;
	}
	.mmm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.mmm-image-col {
		grid-column: 1 / -1;
	}

	.mmm-item-products > .mmm-panel {
		width: min(820px, 94vw);
	}
	.mmm-products-left {
		width: 240px;
	}
	.mmm-products-items,
	.mmm-products-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.mmm-products-img {
		height: 220px;
	}
}