/* ============================================================================
 * 批次58 · 类目导航组件样式（categoryNav.js 配套；header.jsp 引入，全站生效）
 * 三区：① .cn-mega 桌面双栏大菜单 ② .nav_childTree 移动抽屉 ③ .left_nav 侧栏 mtree
 * 原则：只用 cn- 前缀类 + 提权覆盖 style.css 旧 .vmegamenu/.mtree 规则，不改共享文件。
 * ==========================================================================*/

/* ---------- ① 桌面 mega：分组标题+二级平铺，flex 按视口高度自动分列（参考 keeyak 版式，蓝系配色） ---------- */
.mainmenu ul li.product_vmegamenu > ul.cn-mega{
	width:auto; max-width:min(1120px,94vw);
	display:flex; flex-flow:column wrap; align-items:flex-start;
	max-height:min(calc(100vh - 180px),700px); overflow-y:auto;
	padding:22px 4px 6px 24px; border:1px solid #e8eef4; border-top:none; background:#fff;
}
.mainmenu ul li.product_vmegamenu > ul.cn-mega::-webkit-scrollbar{width:4px;}
.mainmenu ul li.product_vmegamenu > ul.cn-mega::-webkit-scrollbar-thumb{background:#d4e2ee;border-radius:2em;}
.mainmenu ul li.product_vmegamenu > ul.cn-mega > li{border:0;margin:0;padding:0;background:none;float:none;display:block;}
.mainmenu ul li.product_vmegamenu > ul.cn-mega li.cn-g{width:262px;margin:0 28px 24px 0;}
.mainmenu ul li.product_vmegamenu > ul.cn-mega li.cn-g > a.cn-l1{
	display:block;font-size:15.5px;font-weight:700;color:#1d3557;text-transform:none;
	line-height:1.3;padding:0 0 9px;margin-bottom:6px;border-bottom:2px solid #dbe7f1;
	transition:color .15s,border-color .15s;
}
.mainmenu ul li.product_vmegamenu > ul.cn-mega li.cn-g > a.cn-l1:hover,
.mainmenu ul li.product_vmegamenu > ul.cn-mega li.cn-cur > a.cn-l1{color:#0b75be;border-bottom-color:#0b75be;}
.mainmenu ul li.product_vmegamenu > ul.cn-mega li.cn-g ul.cn-g-sub{list-style:none;margin:0;padding:0;}
.mainmenu ul li.product_vmegamenu > ul.cn-mega li.cn-g ul.cn-g-sub li{border:0;padding:0;list-style:none;background:none;}
.mainmenu ul li.product_vmegamenu > ul.cn-mega li.cn-g ul.cn-g-sub li a{
	display:block;padding:6.5px 0;font-size:14px;font-weight:400;color:#4a5a68;
	text-transform:none;line-height:1.35;border:0;background:none;
	transition:color .15s,padding-left .15s;
}
.mainmenu ul li.product_vmegamenu > ul.cn-mega li.cn-g ul.cn-g-sub li a:hover{color:#0b75be;padding-left:3px;text-decoration:none;}
.mainmenu ul li.product_vmegamenu > ul.cn-mega li.cn-g ul.cn-g-sub li.cn-on a{color:#0b75be;font-weight:700;}
/* 清掉 style.css 旧 .vmegamenu 悬垂的 ::before/::after 装饰线 */
.mainmenu ul li.product_vmegamenu > ul.cn-mega li.cn-g > a.cn-l1:before,
.mainmenu ul li.product_vmegamenu > ul.cn-mega li.cn-g > a.cn-l1:after,
.mainmenu ul li.product_vmegamenu > ul.cn-mega li.cn-g ul.cn-g-sub li a:before,
.mainmenu ul li.product_vmegamenu > ul.cn-mega li.cn-g ul.cn-g-sub li a:after{content:none;display:none;background:none;}
/* 二级只有一个或全隐藏的组：无子表，点组标题直达一级页 */

/* ---------- ② 移动抽屉：一级手风琴 + 二级缩进高亮 ---------- */
.nav_childTree{list-style:none;padding-left:0;}
.nav_childTree li.cn-m-g{border-bottom:1px solid #eef3f7;}
.nav_childTree li.cn-m-g > a.cn-m-l1{
	display:flex;align-items:center;justify-content:space-between;gap:8px;
	font-weight:700;color:#1d3557;
}
.nav_childTree a.cn-m-l1 .cn-m-tog{flex:0 0 18px;width:18px;height:18px;position:relative;cursor:pointer;}
.nav_childTree a.cn-m-l1 .cn-m-tog:before,.nav_childTree a.cn-m-l1 .cn-m-tog:after{
	content:"";position:absolute;background:#0b75be;transition:transform .18s;
}
.nav_childTree a.cn-m-l1 .cn-m-tog:before{left:0;right:0;top:8px;height:2px;}
.nav_childTree a.cn-m-l1 .cn-m-tog:after{top:0;bottom:0;left:8px;width:2px;}
.nav_childTree li.cn-m-open > a .cn-m-tog:after{transform:scaleY(0);}
.nav_childTree ul.cn-m-sub{list-style:none;margin:2px 0 8px 10px;padding:2px 0 2px 12px;border-left:2px solid #e4edf4;}
.nav_childTree ul.cn-m-sub li{border:0;list-style:none;}
.nav_childTree ul.cn-m-sub a{display:block;padding:6px 10px;font-size:13px;font-weight:400;color:#5a6b78;}
.nav_childTree ul.cn-m-sub a:hover{color:#0b75be;text-decoration:none;}
.nav_childTree ul.cn-m-sub li.cn-m-on a{background:#0b75be;color:#fff;border-radius:999px;font-weight:700;}

/* ---------- ③ 列表页侧栏 mtree：层级强对比 + 二级 pill 聚焦 ---------- */
.left_nav ul.mtree li.firstCategory > h2{
	background:#f2f7fb;margin:0;border-left:3px solid transparent;border-bottom:1px solid #fff;
}
.left_nav ul.mtree li.firstCategory > h2 a{
	font-size:15px !important;font-weight:700;color:#1d3557;text-transform:none;
	padding:12px 30px 12px 14px !important;line-height:1.3;
}
.left_nav ul.mtree li.firstCategory.active > h2{background:#eaf4fb;border-left-color:#0b75be;}
.left_nav ul.mtree li.firstCategory.active > h2 a{color:#0b75be !important;background:none;}
.left_nav ul.mtree li.firstCategory > ul{background:#fff;padding:4px 0 8px;margin:0 12px 0 14px;border-left:2px solid #e4edf4;}
.left_nav ul.mtree li.secondCategory{border-bottom:none;}
.left_nav ul.mtree li.secondCategory a{
	display:inline-block;border-radius:999px;font-size:13.5px;font-weight:400;color:#4a5a68;
	padding:5px 12px !important;line-height:1.4;margin:1px 0;
}
.left_nav ul.mtree li.secondCategory a:hover{background:#f4f8fb;color:#0b75be;text-decoration:none;}
.left_nav ul.mtree li.secondCategory.active a{background:#0b75be;color:#fff !important;font-weight:700;}