/*
 * nav-v2.css
 * 新版导航下拉菜单的补充样式，只在子主题 ydo-child 里被引入。
 * 不修改 styles.css / app.css 任何已有规则，只新增下面这些新 class 的样式，
 * 叠加在原有 .submenu / .submenu--wrapper 的定位、背景、动画之上。
 *
 * 断点沿用现有站点约定：桌面端 >= 1024px（与 app/js/global-website.min.js
 * 里 navigationModule 的 this.breakpoint = 1024 保持一致）。
 */

/* ---------- 1. 默认版式（三列版式，如"产品"）---------- */

.btn.with-icon.btn--meta.no-background{ display: flex; align-items: center; gap: 8px; }
.mega-default-ydothree-link{ min-width: 150px; display: inline-flex; align-items: center; gap: 8px; text-align:center;}
@media (min-width: 1024px) {
	.submenu.mega-columns {
		column-count: 1;
		column-gap: 56px;
	}

	.submenu.mega-columns > li {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
	}

	.submenu.mega-columns > li > a.menu_nav_subitem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.submenu.mega-columns > li > a.menu_nav_subitem .icon-LMHIconrightblack,
	.submenu.mega-columns .mega-col-item .icon-LMHIconrightblack {
		font-size: 12px;
		opacity: .55;
		flex: none;
		transition: opacity .15s ease, transform .15s ease;
	}

	.submenu.mega-columns > li > a.menu_nav_subitem:hover .icon-LMHIconrightblack,
	.submenu.mega-columns .mega-col-item:hover .icon-LMHIconrightblack {
		opacity: 1;
		transform: translateX(3px);
	}
}

@media (max-width: 1023px) {
	/* 移动端沿用原有单列抽屉式导航，不做多列，避免破坏现有 hidden-desktop 逻辑 */
	.submenu.mega-columns {
		column-count: 1;
	}
}

/* ---------- 2. Tab 分类版式（如"全域服务"）---------- */

.mega-tabs-wrapper {
	width: 100%;
}

.mega-tabs-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mega-tab-btn {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, .35);
	background: transparent;
	color: #fff;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	padding: 10px 20px;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mega-tab-btn:hover {
	border-color: #fff;
}

.mega-tab-btn.mega-tab-btn--active {
	background: #aa0020;
	border-color: #aa0020;
	color: #fff;
}

.mega-tab-panel {
	display: none;
}

.mega-tab-panel.mega-tab-panel--active {
	display: block;
}

.mega-columns--tab {
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 1024px) {
	/* styles.css 里 .navigation_menu>.menu_nav li ul{display:none} 是不分嵌套层级、对
	   .menu_nav下所有li底下所有ul都生效的选择器（优先级2个class+2个元素）；它配的例外
	   .navigation_menu>.menu_nav li.active>.submenu--wrapper>ul{display:block}
	   （优先级4个class+2个元素）只认"直接子级"的ul，只够把最外层的<ul class="submenu mega-tabs">
	   显示出来。.mega-columns--tab是Tab面板里再往下嵌套一层的<ul>（面板div>ul），不是
	   .submenu--wrapper的直接子级，够不到那条例外，还是被最外层的display:none压着——
	   这里必须补一条更具体的规则并加!important才能盖过去，否则Tab面板展开后三级列表内容
	   仍然不可见。 */
	.mega-columns--tab {
		display: block !important;
		column-count: 3;
		column-gap: 56px;
	}

	.mega-columns--tab > li {
		/* styles.css 第6705行 .navigation_menu>.menu_nav li{float:left;display:block;width:auto}
		   这条规则用的是后代选择器（.menu_nav 和 li 之间没有>），不管嵌套多深，
		   .menu_nav 底下所有 <li> 都会被float:left——包括这里三级列表自己的<li>。
		   float让每个<li>变成像inline-block一样紧挨着排、按可用宽度自动换行，
		   这才是"一行显示好几个"的真正原因，不是column-count或者别的flex/grid设置的问题。
		   这里显式把float关掉、改回正常的块级流，<li>才会各自独占一行，
		   配合上面 column-count:3 才能表现成"多列、每列内部纵向排"，而不是横向挤在一起。
		   必须加!important：styles.css那条选择器优先级是2个class+1个元素（(0,2,1)），
		   比这里.mega-columns--tab>li（1个class+1个元素，(0,1,1)）高，上一版没加!important、
		   实际表现就是styles.css那条float:left照样生效、没被盖掉，这次补上。 */
		float: none !important;
		display: block !important;
		width: 100% !important;
		break-inside: avoid;
	}
}

.mega-columns--tab .mega-col-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 0;
}

.mega-columns--tab .mega-col-item .icon-LMHIconrightblack {
	font-size: 12px;
	opacity: .55;
	flex: none;
}

.mega-columns--tab .mega-col-item:hover .icon-LMHIconrightblack {
	opacity: 1;
}

@media (max-width: 1023px) {
	.mega-tabs-bar {
		flex-wrap: nowrap;
	}

	.mega-columns--tab {
		column-count: 1;
	}
}

/* ---------- 3. 默认版式 - 桌面新结构（左20% ydothree固定列 + 右80% 分组flex）---------- */
/*
 * 由 ydo_render_mega_default_menu()（ydo-child/functions.php）输出两份并存的DOM：
 *   - 旧结构：<ul class="submenu mega-columns">…</ul>，跟父主题一模一样，专门留给移动端
 *     的抽屉式三级导航用，一个字节都没改。
 *   - 新结构：<div class="mega-default-desktop">…</div>，只在桌面端显示。
 * 两者靠下面这组media query互斥显示，不依赖JS判断视口，也不会同时出现在页面上。
 */

.mega-default-desktop {
	display: none;
}

@media (min-width: 1024px) {
	/* 桌面端隐藏旧的三级抽屉列表（.menu_back除外——它在.mega-columns和新结构外层共用同一个
	   submenu--wrapper，不属于要隐藏的范围，这里只隐藏mega-columns这个ul本身即可）。
	   这里必须加!important：styles.css里已有的
	   .navigation_menu>.menu_nav li.active>.submenu--wrapper>ul{display:block；...}
	   选择器优先级是4个class+2个元素，比这里.submenu.mega-columns（2个class）高得多，
	   不加!important的话不管这条规则写在哪个文件、哪个位置，都会被那条旧规则盖掉，
	   实际表现就是"新旧两套下拉结构同时显示、旧的怎么都关不掉"。 */
	.submenu.mega-columns {
		display: none !important;
	}

	/* .mega-default-desktop 是<div>，不是<ul>，styles.css里那条desktop默认隐藏规则
	   .navigation_menu>.menu_nav li ul{display:none}只认<ul>，管不到它，之前只按视口宽度
	   切换display，完全没管当前这一项菜单到底有没有被hover/点开（.active），
	   结果是桌面端下所有顶级菜单的这块新结构会同时全部显示，不是"跟旧列表一样只有当前展开
	   的那一项才显示"——这才是"新结构默认就显示、大小跳来跳去"的真正原因。
	   这里必须照抄旧列表.navigation_menu>.menu_nav li.active>.submenu--wrapper>ul那条规则
	   的思路，同样用li.active限定，只有当前展开的下拉才让它display:flex，
	   没展开的（.mega-default-desktop本身不带.active限定）保持上面的display:none不变。 */
	.navigation_menu > .menu_nav li.active > .submenu--wrapper .mega-default-desktop {
		display: flex !important;
		align-items: flex-start;
		width: 100%;
		max-width: 1280px;
		margin: 0 auto;
		padding: 32px 40px 40px;
		box-sizing: border-box;
	}

	/* 整个下拉的深色渐变背景通过PHP端给.submenu--wrapper加layout-bg-dark-liner-t-b class实现
	   （见ydo_render_mega_default_menu()），这里不重复定义颜色值，只处理文字颜色适配深色背景、
	   以及"移动端不能被这个深色背景影响"（下面第4节会把它在移动端还原掉）。 */
	.mega-default-wrapper {
		color: #fff;
	}

	/* 同样是"styles.css里.navigation_menu>.menu_nav li ul{display:none}管到深层嵌套ul、
	   而它配的例外li.active>.submenu--wrapper>ul{display:block}只认.submenu--wrapper的
	   直接子级"这个问题（跟上面.mega-columns--tab那条是同一个根因，详细说明见那边注释）。
	   .mega-default-group-list（每个分组下的三级子菜单列表）和.mega-default-ydothree-list
	   （ydothree万一配了不止一项时的兜底列表）都是<ul>，而且都嵌套在
	   .submenu--wrapper>.mega-default-desktop>...好几层div之下，不是直接子级，
	   同样够不到那条例外，会被通用的display:none压住——实际表现就是桌面下拉整体框架
	   （.mega-default-desktop）虽然正常显示了，但里面的三级子菜单列表内容却是空白/不可见，
	   即"第三级不可见"。这里必须补上并加!important才能盖过去。 */
	.mega-default-group-list,
	.mega-default-ydothree-list {
		display: block !important;
	}

	/* 需求"检查一下，现在还是styles优先"：上一版给 .mega-default-group-list>li /
	   .mega-default-ydothree-list>li / .mega-columns--tab>li 加的 float:none 都没写
	   !important，选择器优先级只有(0,1,1)，styles.css第6705行那条
	   .navigation_menu>.menu_nav li{float:left;...}是(0,2,1)（2个class+1个元素），
	   优先级更高，实际还是它的float:left生效，跟没改一样。这里统一补上!important。 */
	.mega-default-group-list > li,
	.mega-default-ydothree-list > li {
		float: none !important;
		display: block !important;
		width: 100% !important;
	}

	.mega-default-col--ydothree {
		flex: 0 0 20%;
		max-width: 20%;
		box-sizing: border-box;
		padding-right: 28px;
		display: flex;
		align-items: flex-start;
	}

	/* a:active/a:focus/a:visited全局覆盖问题：styles.css里 a, a:active, a:focus, a:visited{color:#AA0020}
	   是不分场景的全站默认色，优先级(0,1,1)。这个色块下面几处链接（ydothree单链接/分组标题/
	   分组三级项/ydothree兜底列表）本来只写了默认态和:hover的白色，没管:active/:focus/:visited这三个
	   伪类，选择器优先级只有(0,1,0)，比全局的(0,1,1)低，所以点击过（:visited会一直生效）、
	   聚焦、按住的链接会被全局规则盖回品红色，在深色渐变背景上完全看不清。
	   下面统一把:active/:focus/:visited也列进对应选择器里，让它们跟默认态用同一份声明、
	   同一份优先级，不改styles.css里那条全局规则本身，只在这几个新组件自己的类名上补全。 */

	/* 只有一项时（最常见的情况，比如"产品概览"）直接是一个<a>，不再套ul>li，
	   视觉上做成跟右侧分组标题（.mega-default-group-title）同一量级的醒目链接，
	   而不是缩在列表里的一小行字——它是这一列唯一的内容，应该看得清楚。 */
	.mega-default-ydothree-link,
	.mega-default-ydothree-link:active,
	.mega-default-ydothree-link:focus,
	.mega-default-ydothree-link:visited {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		justify-content: center;
		color: #fff;
		font-weight: 600;
		font-size: 16px;
		line-height: 1.3;
		text-decoration: none;
		padding: 10px 16px;
		border: 1px solid rgba(255, 255, 255, .35);
		border-radius: 4px;
		transition: background-color .15s ease, border-color .15s ease;
	}

	.mega-default-ydothree-link:hover {
		background-color: rgba(255, 255, 255, .1);
		border-color: #fff;
	}

	/* 万一后台真配了不止一项ydothree，退回列表结构时的样式 */
	.mega-default-ydothree-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* .mega-default-ydothree-list>li 的 float:none 覆盖统一放在上面
	   .mega-default-group-list,.mega-default-ydothree-list 那个 display:block!important
	   块附近了（带!important，这里之前那版没加!important没生效，已合并过去，避免两处重复）。 */

	.mega-default-ydothree-list > li + li {
		margin-top: 2px;
	}

	.mega-default-ydothree-list .menu_nav_subitem,
	.mega-default-ydothree-list .menu_nav_subitem:active,
	.mega-default-ydothree-list .menu_nav_subitem:focus,
	.mega-default-ydothree-list .menu_nav_subitem:visited {
		display: block;
		color: #fff;
		padding: 8px 0;
		font-size: 14px;
	}

	.mega-default-ydothree-list .menu_nav_subitem:hover {
		color: rgba(255, 255, 255, .7);
	}

	.mega-default-right {
		flex: 1 1 0;
		max-width: 80%;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		box-sizing: border-box;
	}

	/* 极少数情况下顶级菜单底下完全没设ydothree分组（旧设计本来就假设有），左侧20%列不会输出，
	   这时右侧改成占满100%，而不是被空出来的20%晾在那 */
	.mega-default-desktop--full .mega-default-right {
		max-width: 100%;
	}

	/* 右侧80%现在分两类区块（需求3/需求4，见 ydo_render_mega_default_menu() 注释）：
	   - .mega-default-col--leaf：没有三级子菜单的二级项，当"按钮"处理，纵向竖排堆叠，
	     每列最多7个（PHP端按7个一组array_chunk切好，这里每组就是一列）。
	   - .mega-default-group：有三级子菜单的二级项，逐个并列显示，各占一栏
	     （顶部二级名称+下面三级列表），不做7个一列的堆叠。
	   两类区块、以及区块内部列与列之间，都用同一套"flex横向平铺+浅色竖线分隔"规则。 */
	.mega-default-right > .mega-default-group,
	.mega-default-right > .mega-default-col--leaf {
		box-sizing: border-box;
		padding: 0 28px;
		flex: 1 1 0;
		min-width: 0;
	}

	/* .mega-default-group-list 现在是2栏CSS多栏布局（见下面该class的注释），
	   min-width:0会让flex子项在空间紧张时无限收缩，两栏文字会挤在一起甚至重叠；
	   这里给"有三级子菜单"的栏一个更大的最小宽度，保证两栏能正常排开。
	   按钮列（.mega-default-col--leaf）本身只有一列、内容更短，不需要这么宽，维持上面的0。 */
	.mega-default-right > .mega-default-group {
		min-width: 260px;
	}

	.mega-default-right > .mega-default-group:first-child,
	.mega-default-right > .mega-default-col--leaf:first-child {
		padding-left: 0;
	}

	/* 竖线分隔条：原来是"除第一列外，每列左侧加一条竖线"（用相邻兄弟选择器+
	   border-left实现）。改成"除最后一列外，每列右侧加一条竖线"——效果上竖线的
	   位置不变（还是画在两栏之间），只是改成挂在前一列的右边而不是后一列的左边。
	   .mega-default-right的直接子元素只有.mega-default-group和.mega-default-col--leaf
	   这两种，用:not(:last-child)统一处理，不用再列4种"谁挨着谁"的组合。 */
	.mega-default-right > .mega-default-group:not(:last-child),
	.mega-default-right > .mega-default-col--leaf:not(:last-child) {
		border-right: 1px solid rgba(255, 255, 255, .18);
	}

	/* 需求3：按钮列——没有三级子菜单的二级项纵向竖排堆叠成按钮，默认维持220px上限
	   （普通菜单内容短，不需要太宽）。"产品"（打了nav-product-finder标签的顶级菜单）
	   例外：右侧容器会多带一个.mega-default-right--product-finder标记类（PHP端
	   ydo_render_mega_default_menu()里加的，见该函数注释），下面单独覆盖去掉上限。 */
	.mega-default-col--leaf {
		display: flex;
		flex-direction: column;
		gap: 8px;
		flex-basis: auto;
		max-width: 220px;
	}

	/* "产品"专属：按钮列不设最大宽度上限，其它菜单不受影响（选择器带
	   .mega-default-right--product-finder前缀，只在"产品"的右侧容器下生效）。 */
	.mega-default-right--product-finder > .mega-default-col--leaf {
		max-width: none;
	}

	.mega-default-leaf-btn,
	.mega-default-leaf-btn:active,
	.mega-default-leaf-btn:focus,
	.mega-default-leaf-btn:visited {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		position: relative;
		overflow: hidden;
		color: #fff;
		font-size: 14px;
		line-height: 1.3;
		text-decoration: none;
		padding: 10px 14px;
		border: 1px solid rgba(255, 255, 255, .3);
		border-radius: 4px;
		white-space: nowrap;
		/* 分类图标改成挂在按钮自己身上的background-image（由PHP端内联style输出，
		   见 ydo_render_mega_default_leaf_col()），默认宽度收成0不可见；只有
		   :hover时才撑开成90px宽、高度铺满按钮（上下100%），background-size
		   一起加进transition里，配合下面.mega-default-leaf-btn-label的
		   padding-left过渡，做出"划过去图标从左侧滑出、文字让开"的效果。 */
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 0 100%;
		transition: background-color .15s ease, border-color .15s ease, background-size .15s ease;
	}

	.mega-default-leaf-btn:hover {
		background-color: rgba(255, 255, 255, .1);
		border-color: #fff;
		background-size: auto 90%;
	}

	.mega-default-leaf-btn .icon-LMHIconrightblack {
		font-size: 12px;
		opacity: .55;
		flex: none;
	}

	.mega-default-leaf-btn:hover .icon-LMHIconrightblack {
		opacity: 1;
	}

	/* 按钮左侧文字整体作为一个flex子项，跟右侧箭头维持原有的两栏space-between布局
	   不变；只有"产品"（打了nav-product-finder标签的顶级菜单）的按钮项会在PHP端
	   带上$leaf['icon']（渲染成上面.mega-default-leaf-btn的background-image内联
	   style），其它菜单没有这个字段时按钮不带背景图，跟改动前视觉一样。 */
	.mega-default-leaf-btn-label {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
		transition: padding-left .15s ease;
	}

	/* 需求"分类图片改成经过(hover)时才显示"：默认不再占位（去掉了原来常驻显示的
	   32x32 <img>标签，图标本身通过上面.mega-default-leaf-btn的background-image
	   实现），只在:hover时把文字整体向右挪出90px，跟.mega-default-leaf-btn:hover
	   里撑开的90px背景图宽度对应，空出来的位置正好露出左侧背景图。 */
	.mega-default-leaf-btn:hover .mega-default-leaf-btn-label {
		padding-left: 51px;
	}

	/* 加了图标以后按钮内文字可用宽度变窄，补一条溢出省略，避免长分类名把按钮撑破/
	   超出.mega-default-col--leaf的220px上限；改动前没有图标时文字本来就短，
	   这条规则不会带来任何肉眼可见的变化。 */
	.mega-default-leaf-btn-text {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* nogo：二级菜单项打了nogo这个CSS类时（见 ydo_render_mega_default_menu() 里的说明），
	   PHP端已经不再输出<a href>，改成不可点击的<span>，这里只需要让它继续保留跟按钮/分组标题
	   一致的视觉样式，同时去掉:hover的变色反馈（避免"看起来能点、其实点了没反应"），
	   鼠标样式也改回默认箭头，不用手型指针。 */
	.mega-default-leaf-btn--nogo,
	.mega-default-leaf-btn--nogo:hover {
		cursor: default;
		background-color: transparent;
		/* nogo不是真链接，连带把hover时才展开的90px背景图/文字位移也一起关掉，
		   跟上面"去掉:hover变色反馈"是同一个道理——不给用户"这按钮好像能点"的错觉。 */
		background-size: 0 100%;
		border-color: rgba(255, 255, 255, .3);
	}

	.mega-default-leaf-btn--nogo:hover .mega-default-leaf-btn-label {
		padding-left: 0;
	}

	.mega-default-group-title,
	.mega-default-group-title:active,
	.mega-default-group-title:focus,
	.mega-default-group-title:visited {
		display: flex;
		align-items: center;
		gap: 10px;
		color: #fff;
		font-weight: 600;
		font-size: 15px;
		line-height: 1.3;
		margin-bottom: 10px;
		text-decoration: none;
	}

	.mega-default-group-title:hover {
		color: rgba(255, 255, 255, .8);
	}

	/* nogo：二级项打了nogo标签时标题渲染成不可点击的<span>（见函数注释），这里去掉hover变色，
	   避免"看起来能点、其实点了没反应"，鼠标样式改回默认箭头。 */
	.mega-default-group-title--nogo,
	.mega-default-group-title--nogo:hover {
		cursor: default;
		color: #fff;
	}

	.mega-default-group-icon {
		width: 28px;
		height: 28px;
		flex: none;
	}

	.mega-default-group-icon img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* 之前按"第三级导航需要column显示"的要求加过 column-count:2（一行两个），
	   现在按最新反馈改回一行一个、竖向单列排版：column-count 改成 1（column-gap对单列没有
	   实际效果，留着不影响）。break-inside:avoid 留着也无妨，单列下不会触发列内断行。 */
	.mega-default-group-list {
		list-style: none;
		margin: 0;
		padding: 0;
		column-count: 1;
		column-gap: 24px;
	}

	/* .mega-default-group-list>li 的 float:none 覆盖统一放在前面
	   .mega-default-group-list,.mega-default-ydothree-list 那个 display:block!important
	   块附近了（带!important才能真正盖过styles.css的float:left，这里之前那版没加
	   !important没生效，已合并过去，避免两处重复）。 */

	.mega-default-group-list .mega-default-group-item,
	.mega-default-group-list .mega-default-group-item:active,
	.mega-default-group-list .mega-default-group-item:focus,
	.mega-default-group-list .mega-default-group-item:visited {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 6px 0;
		color: rgba(255, 255, 255, .75);
		font-size: 13px;
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
	}

	/* 文字左对齐、箭头右对齐：文字部分是 .mega-default-group-item-text（PHP端已包成span），
	   flex:1让它占满除箭头以外的所有空间、text-align:left保证换行时每一行都靠左，不会因为
	   父级flex布局被误撑成居中；箭头 .icon-LMHIconrightblack（下面已有 flex:none）
	   不参与拉伸，天然贴在行的最右边。 */
	.mega-default-group-list .mega-default-group-item-text {
		flex: 1 1 auto;
		text-align: left;
	}

	.mega-default-group-list .mega-default-group-item:hover {
		color: #fff;
	}

	.mega-default-group-list .mega-default-group-item .icon-LMHIconrightblack {
		font-size: 11px;
		opacity: .5;
		flex: none;
	}
}

/* ---------- 4. 去掉父主题下拉底部那条57px白色分隔条 ---------- */
/*
 * 父主题styles.css里 .navigation_menu>.menu_nav li.active>.submenu--wrapper:after
 * 原本是给旧版三列下拉在底部留一条57px高的分隔条用的（配合旧版>ul那56px的padding-bottom）。
 * 新结构.mega-default-desktop用的是自己的padding，没有预留这57px，这条线留着会跟内容
 * 对不上、还可能盖住/顶开左侧ydothree列或分组底部的内容。用content:none直接清掉这个伪元素
 * （不生成任何盒子），只在子主题nav-v2.css里生效，父主题ydo一个字节没动。
 */
.navigation_menu > .menu_nav li.active > .submenu--wrapper:after {
	content: none !important;
}

/* ---------- 5. 移动端安全阀：新版式的深色渐变背景不能影响移动端原有抽屉式导航配色 ---------- */
@media (max-width: 1023px) {
	/* .mega-default-wrapper只会出现在走了新版默认菜单的下拉上，这里用两个class叠加提高优先级，
	   把移动端的背景改回原样（transparent，交给.navigation_menu li ul原有的移动端样式接管），
	   跟改动前完全一致；桌面端不受影响，见上面@media(min-width:1024px)那部分。 */
	.mega-default-wrapper.layout-bg-dark-liner-t-b {
		background: none !important;
	}
}

/* ---------- 6. "主页"(.menu_homelink)桌面端也显示 ---------- */
/*
 * 父主题 styles.css 里：
 *   @media (min-width:1024px) {
 *     .navigation_menu>.menu_nav li a.menu_homelink,
 *     .navigation_menu>.menu_nav li.menu_mobile { display: none }
 *   }
 * 是刻意把"主页"文字链接和"菜单"分类标题在桌面端隐藏掉（这两个本来是给移动端抽屉式
 * 导航准备的，桌面端设计上靠点击左上角logo回首页，不需要这个文字链接）。
 * 这里按需求把"主页"链接在桌面端也显示出来，"菜单"文字标签(.menu_mobile)保持不动
 * （只处理.menu_homelink，没有一并处理.menu_mobile）。
 *
 * 选择器 .navigation_menu>.menu_nav li a.menu_homelink 优先级是(0,3,2)，跟父主题
 * 那条完全一样，靠nav-v2.css在文档里排在styles.css之后加载，同优先级后加载的生效，
 * 不需要!important。display等具体数值直接照抄同一断点下.menu_nav_mainitem（"产品"/
 * "全域服务"这些顶级菜单项）已有的桌面样式，让"主页"看起来和其它顶级菜单项对齐、
 * 高度一致，不另外发明一套新样式。
 */

/* ========== navigation_meta 整行改黑底白字 ==========
 * 需求：顶部 .navigation_meta 这一行（凯傲商城/租赁商城/在线客服/语言切换 + 右侧
 * "服务网络查询"按钮所在的整个容器，桌面端和移动端抽屉菜单复用的是同一段HTML结构），
 * 背景改成纯黑#000，里面的链接文字改成白色。没有加 @media 限制，桌面/移动端都生效；
 * 如果之后只想改桌面端，需要另外套一层 @media (min-width:1024px)。
 *
 * .navigation_meta 本身父主题没有设背景色，这里直接补background-color:#000即可，
 * 不存在覆盖冲突。
 *
 * .menu_meta_item 父主题在 styles.css 里有一条不带媒体查询限制的
 * `.menu_meta_item{background:#fff}`（同优先级单class选择器），这里选择器多套一层
 * .navigation_meta 前缀，优先级 (0,2,0) 高于它的 (0,1,0)，稳定覆盖，不用!important。
 *
 * 链接文字颜色：父主题全局有一条 `a,a:active,a:focus,a:visited{color:#AA0020}`
 * （元素选择器/单伪类选择器，优先级(0,0,1)/(0,1,1)），这里选择器同样多套一层
 * .navigation_meta 前缀，优先级(0,1,1)/(0,2,1)更高，稳定压过去，不用!important。
 * "服务网络查询"按钮文字本来就是白色（.btn--primary自带的红底白字，跟这条规则无关），
 * 不受影响；"在线客服"那个链接原本在header.php里写了内联style="color:#000"，
 * 内联样式优先级比外部CSS规则更高，光靠这里的CSS覆盖不掉，已经直接在header.php里
 * 把内联的color:#000改成了color:#fff，两处配合才能保证"在线客服"文字也变白。
 */


.navigation_meta a,
.navigation_meta a:active,
.navigation_meta a:focus,
.navigation_meta a:hover,
.navigation_meta a:visited {
	color: #fff;
}

@media (min-width: 1024px) {
	.navigation_menu > .menu_nav li a.menu_homelink {
		display: flex;
		align-items: center;
		justify-content: center;
		float: left;
		height: 100px;
		line-height: normal;
		padding: 0 40px;
		text-align: center;
		background: transparent;
		border: none;
	}

	.navigation_menu > .menu_nav li a.menu_homelink:hover {
		background: #f5f6fa;
		cursor: pointer;
	}

	.navigation_menu > .menu_nav li a.menu_homelink:active {
		color: #AA0020;
	}

	/* 顶部header滚动时会在.header上切换normal-state/small-state两种收缩状态，
	   父主题对应把.menu_nav_mainitem的高度联动改成100px/61px，这里给"主页"补上同样的
	   联动，滚动收缩时才不会跟旁边"产品"等菜单项高度对不齐、看起来忽高忽低。 */
	.header.normal-state .navigation_menu > .menu_nav li a.menu_homelink {
		height: 100px !important;
	}

	.header.small-state .navigation_menu > .menu_nav li a.menu_homelink {
		height: 61px !important;
	}
}