/* ============================================================
   凌速云 · 紫色调色板 + 全站导航顶部化
   yy-purple.css  |  2026-10-19  v2
   ------------------------------------------------------------
   1) 色板令牌：统一品牌紫与带紫中性色
   2) 游客（未登录）：顶部横排导航，条目与门户首页完全一致
      内容区收进 1200px 容器，与首页同宽
   3) 已登录用户：保持原有左侧导航（.vertical-menu）不变
   ============================================================ */

/* ---------- 1. 品牌紫色阶（色相 282°，只变明度） ---------- */
:root {
	--yy-p700: #5F2C7F;
	--yy-p600: #7B3FA2;
	--yy-p500: #9656BE;
	--yy-p400: #B074D1;
	--yy-p300: #CBA9E8;
	--yy-p200: #E0CBF2;
	--yy-p100: #F0E6F9;
	--yy-p50: #F8F3FC;

	/* 带紫的中性色（替代原来偏蓝的 #e2e8f0 / rgba(6,75,179,…)） */
	--yy-ink: #17131F;
	--yy-ink2: #5F5870;
	--yy-ink3: #8E879C;
	--yy-ink4: #A69FB2;
	--yy-line: #ECE8F2;
	--yy-line2: #F6F3F9;
	--yy-bg: #F7F6F9;

	/* 与门户首页 .container 同宽 */
	--yy-wrap: 1200px;
	--yy-bar-h: 48px;
}

/* ============================================================
   基础：顶部导航默认隐藏（手机走左侧抽屉）
   ============================================================ */
.yy-topnav {
	display: none;
}

/* ---------- 2. 顶部导航外观（对齐首页 navbar） ---------- */
.yy-topnav-list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.yy-tn-item {
	position: relative;
}

.yy-tn-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	border-radius: 8px;
	color: #6B7280;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.16s ease, color 0.16s ease;
}

.yy-tn-link > i:not(.yy-tn-caret) {
	font-size: 15px;
	line-height: 1;
	color: var(--yy-p400);
	opacity: 0.9;
}

.yy-tn-link:hover,
.yy-tn-link:focus {
	background: var(--yy-p50);
	color: var(--yy-p600);
	text-decoration: none;
}

.yy-tn-link:hover > i:not(.yy-tn-caret),
.yy-tn-link:focus > i:not(.yy-tn-caret) {
	opacity: 1;
	color: var(--yy-p500);
}

.yy-tn-item.is-active > .yy-tn-link {
	color: var(--yy-p700);
	font-weight: 600;
	background: transparent;
}

.yy-tn-item.is-active > .yy-tn-link > i:not(.yy-tn-caret) {
	opacity: 1;
	color: var(--yy-p500);
}

/* 下拉箭头 */
.yy-tn-caret {
	font-size: 14px !important;
	color: #9CA3AF !important;
	margin-left: -1px;
	transition: transform 0.16s ease;
}

.yy-tn-item.has-sub:hover .yy-tn-caret {
	transform: rotate(180deg);
}

/* 下拉面板 */
.yy-tn-sub {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 150px;
	list-style: none;
	margin: 0;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--yy-line);
	border-radius: 10px;
	box-shadow: 0 16px 40px -16px rgba(23, 19, 31, 0.22), 0 2px 6px rgba(23, 19, 31, 0.04);
	z-index: 1010;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.yy-tn-item.has-sub:hover > .yy-tn-sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.yy-tn-sub li {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.5;
}

.yy-tn-sub a {
	display: block;
	padding: 7px 12px;
	border-radius: 7px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--yy-ink2);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.14s ease, color 0.14s ease;
}

.yy-tn-sub a:hover {
	background: var(--yy-p50);
	color: var(--yy-p600);
	text-decoration: none;
}

/* ============================================================
   3. 游客（未登录）：撤掉左侧导航，顶栏与首页对齐
   ============================================================ */
@media (min-width: 992px) {
	body.yy-guest .vertical-menu,
	body.yy-cart .vertical-menu {
		display: none !important;
	}

	body.yy-guest .main-content,
	body.yy-cart .main-content {
		margin-left: 0 !important;
	}

	body.yy-guest .footer,
	body.yy-cart .footer {
		left: 0 !important;
		max-width: 100% !important;
	}

	body.yy-guest #vertical-menu-btn,
	body.yy-cart #vertical-menu-btn {
		display: none !important;
	}

	/* 顶栏：与首页同一容器宽度 */
	body.yy-guest #page-topbar,
	body.yy-cart #page-topbar {
		box-shadow: none;
		border-bottom: 1px solid #F1EEF6;
	}

	body.yy-guest #page-topbar .navbar-header,
	body.yy-cart #page-topbar .navbar-header {
		max-width: var(--yy-wrap);
		margin: 0 auto;
		height: var(--yy-bar-h);
		padding: 0 15px;
	}

	body.yy-guest .navbar-brand-box,
	body.yy-cart .navbar-brand-box {
		width: auto;
		padding: 0;
	}

	body.yy-guest .navbar-brand-box .logo-lg img,
	body.yy-cart .navbar-brand-box .logo-lg img {
		width: 108px !important;
		height: auto !important;
	}

	body.yy-guest .yy-topnav,
	body.yy-cart .yy-topnav {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		margin-left: 8px;
	}

	/* 内容区：与首页同宽，不再通栏 */
	body.yy-guest .page-content > .container-fluid,
	body.yy-cart .page-content > .container-fluid {
		max-width: var(--yy-wrap);
		margin-left: auto;
		margin-right: auto;
		padding-left: 15px;
		padding-right: 15px;
	}

	/* 右上角登录：与首页同一个淡紫按钮语言 */
	body.yy-guest #page-topbar .navbar-header > div:last-child > .pointer > a,
	body.yy-cart #page-topbar .navbar-header > div:last-child > .pointer > a {
		display: inline-flex;
		align-items: center;
		height: 32px;
		padding: 0 14px;
		border-radius: 8px;
		background: var(--yy-p100);
		color: var(--yy-p600) !important;
		font-size: 13px;
		font-weight: 500;
		text-decoration: none;
		transition: background 0.16s ease, color 0.16s ease;
	}

	body.yy-guest #page-topbar .navbar-header > div:last-child > .pointer > a:hover,
	body.yy-cart #page-topbar .navbar-header > div:last-child > .pointer > a:hover {
		background: var(--yy-p200);
		color: var(--yy-p700) !important;
	}

	body.yy-guest .page-content,
	body.yy-cart .page-content {
		padding-top: calc(var(--yy-bar-h) + 24px);
	}

	body.yy-guest .footer,
	body.yy-cart .footer {
		padding-left: 0;
		padding-right: 0;
	}

	body.yy-guest .footer .container-fluid,
	body.yy-cart .footer .container-fluid {
		max-width: var(--yy-wrap);
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---------- 4. 已登录：导航回左侧，顶栏保持原样 ---------- */
body.yy-user:not(.yy-cart) .yy-topnav {
	display: none !important;
}

/* ---------- 5. 中等屏：导航收紧 ---------- */
@media (min-width: 992px) and (max-width: 1279.98px) {
	body.yy-guest .yy-topnav,
	body.yy-cart .yy-topnav {
		margin-left: 2px;
	}

	body.yy-guest .yy-tn-link,
	body.yy-cart .yy-tn-link {
		padding: 7px 9px;
		font-size: 13px;
		gap: 4px;
	}

	body.yy-guest .yy-tn-link > i:not(.yy-tn-caret),
	body.yy-cart .yy-tn-link > i:not(.yy-tn-caret) {
		display: none;
	}

	body.yy-guest #page-topbar .navbar-header,
	body.yy-cart #page-topbar .navbar-header {
		padding: 0 12px;
	}
}

/* 顶栏右侧操作区不允许被压缩换行 */
@media (min-width: 992px) {
	body.yy-guest #page-topbar .navbar-header > div:last-child,
	body.yy-cart #page-topbar .navbar-header > div:last-child {
		flex: 0 0 auto;
	}

	body.yy-guest #page-topbar .navbar-header > div:last-child a,
	body.yy-cart #page-topbar .navbar-header > div:last-child a {
		white-space: nowrap;
	}
}

/* ---------- 6. 移动端：导航交给抽屉，但顶栏补回 logo 与登录按钮 ---------- */
@media (max-width: 991.98px) {
	.yy-topnav {
		display: none;
	}

	.vertical-menu {
		border-right: 1px solid var(--yy-line);
	}

	body.yy-guest #page-topbar .navbar-header,
	body.yy-cart #page-topbar .navbar-header {
		padding: 0 12px;
	}

	/* 主题默认在移动端隐藏了 brand 盒，这里补回来 */
	body.yy-guest #page-topbar .navbar-header > div:first-child,
	body.yy-cart #page-topbar .navbar-header > div:first-child {
		display: flex;
		align-items: center;
	}

	body.yy-guest .navbar-brand-box,
	body.yy-cart .navbar-brand-box {
		display: flex !important;
		align-items: center;
		width: auto;
		padding: 0 0 0 8px;
		order: 2;
	}

	/* 汉堡按钮排在 logo 前面（与首页手机端一致） */
	body.yy-guest #vertical-menu-btn,
	body.yy-cart #vertical-menu-btn {
		order: 1;
	}

	body.yy-guest .navbar-brand-box .logo-sm img,
	body.yy-cart .navbar-brand-box .logo-sm img {
		height: 30px !important;
		width: auto !important;
	}

	body.yy-guest #page-topbar .navbar-header > div:last-child > .pointer > a,
	body.yy-cart #page-topbar .navbar-header > div:last-child > .pointer > a {
		display: inline-flex;
		align-items: center;
		height: 32px;
		padding: 0 13px;
		border-radius: 8px;
		background: var(--yy-p100);
		color: var(--yy-p600) !important;
		font-size: 13px;
		font-weight: 500;
		text-decoration: none;
	}
}

/* ============================================================
   7. 购物车页：登录态也只显示「控制台」一个按钮
   ------------------------------------------------------------
   右上角原来的消息 / 头像下拉 / 购物车图标全部收掉，
   只留一个淡紫按钮，直接进个人中心首页
   ============================================================ */
.yy-console-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 14px;
	border-radius: 8px;
	background: var(--yy-p100);
	color: var(--yy-p600) !important;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.16s ease, color 0.16s ease;
}

.yy-console-btn:hover,
.yy-console-btn:focus {
	background: var(--yy-p200);
	color: var(--yy-p700) !important;
	text-decoration: none;
}

.yy-console-btn i {
	font-size: 16px;
	line-height: 1;
}

@media (max-width: 991.98px) {
	.yy-console-btn {
		height: 30px;
		padding: 0 12px;
		font-size: 12.5px;
	}

	.yy-console-btn i {
		display: none;
	}
}

/* ============================================================
   8. 移动端顶栏：logo 垂直居中 + 去掉栏下多出的白块
   ------------------------------------------------------------
   主题把 a.logo 写死成 height:100px / line-height:70px，
   而手机端顶栏只有 70px。结果：
     ① logo 容器高 101px，向上溢出 15.5px（视觉上 logo 偏上）
     ② .navbar-brand-box 的白色底被一起撑到 85.5px，
        在顶栏下沿多出一条 108×15 的白块
   这里把 a.logo / .logo-sm 的高度与行高归零，交给 flex 居中，
   并把 brand 盒底色改透明。
   ============================================================ */
@media (max-width: 991.98px) {
	body.yy-guest #page-topbar .navbar-header,
	body.yy-cart #page-topbar .navbar-header {
		align-items: center;
	}

	/* 左侧「汉堡 + logo」容器钉成栏高，不再被 100px 的 a.logo 撑破 */
	body.yy-guest #page-topbar .navbar-header > div:first-child,
	body.yy-cart #page-topbar .navbar-header > div:first-child {
		display: flex;
		align-items: center;
		height: 100%;
		min-height: 0;
	}

	body.yy-guest .navbar-brand-box,
	body.yy-cart .navbar-brand-box {
		display: flex !important;
		align-items: center;
		height: 100%;
		width: auto;
		padding: 0 0 0 8px;
		background: transparent !important;
		text-align: left;
	}

	body.yy-guest .navbar-brand-box .logo-dark,
	body.yy-cart .navbar-brand-box .logo-dark {
		display: none !important;
	}

	/* a.logo 默认 height:100px / line-height:70px，全部归零 */
	body.yy-guest .navbar-brand-box .logo-light,
	body.yy-cart .navbar-brand-box .logo-light {
		display: flex !important;
		align-items: center;
		height: 100% !important;
		line-height: 1 !important;
	}

	body.yy-guest .navbar-brand-box .logo-sm,
	body.yy-cart .navbar-brand-box .logo-sm {
		display: flex !important;
		align-items: center;
		height: auto !important;
		line-height: 1 !important;
		overflow: visible !important;
	}

	body.yy-guest .navbar-brand-box .logo-sm img,
	body.yy-cart .navbar-brand-box .logo-sm img {
		display: block;
		height: 28px !important;
		width: auto !important;
		max-width: none !important;
	}

	body.yy-guest .navbar-brand-box .logo-lg,
	body.yy-cart .navbar-brand-box .logo-lg {
		display: none !important;
	}
}

/* ============================================================
   9. 桌面端同源问题：brand 盒白底同样溢出顶栏下沿
   ------------------------------------------------------------
   48px 顶栏里塞了一个 71px 高的 brand 盒（a.logo 行高 70px），
   白底在栏下多出约 11px，视觉上像「logo 下面挂了块白条」。
   ============================================================ */
@media (min-width: 992px) {
	body.yy-guest .navbar-brand-box,
	body.yy-cart .navbar-brand-box {
		display: flex;
		align-items: center;
		height: var(--yy-bar-h);
		width: auto;
		padding: 0;
		background: transparent !important;
	}

	body.yy-guest .navbar-brand-box .logo-light,
	body.yy-cart .navbar-brand-box .logo-light {
		display: flex !important;
		align-items: center;
		height: 100% !important;
		line-height: 1 !important;
	}

	body.yy-guest .navbar-brand-box .logo-lg,
	body.yy-cart .navbar-brand-box .logo-lg {
		display: block !important;
		height: auto !important;
		line-height: 1 !important;
	}

	body.yy-guest .navbar-brand-box .logo-lg img,
	body.yy-cart .navbar-brand-box .logo-lg img {
		display: block;
		height: 38px !important;
		width: auto !important;
	}
}

/* ============================================================
   10. 收尾：brand 盒自带的下边框 = logo 下方那条「小台阶」
   ------------------------------------------------------------
   .navbar-brand-box 自带 1px 底边框（#E7EAF3），宽度跟 logo 一样，
   落在顶栏边框线下方，看起来就是「logo 下面多出来一小块」。
   顶栏本身已有分隔线，这里直接去掉 brand 的边框；
   手机端再把顶栏投影关掉，避免栏下出现灰雾。
   ============================================================ */
body.yy-guest .navbar-brand-box,
body.yy-cart .navbar-brand-box {
	border: 0 !important;
}

@media (max-width: 991.98px) {
	body.yy-guest #page-topbar,
	body.yy-cart #page-topbar {
		box-shadow: none;
		/* 手机端顶栏没有分隔线会「浮」在白底上，补一条与桌面同色的一像素线 */
		border-bottom: 1px solid #F1EEF6;
	}
}

/* ============================================================
   11. 顶部导航文字垂直居中（与 logo 中线对齐）
   ------------------------------------------------------------
   主题给 li（.yy-tn-item）加了 7.2px 的下内边距，链接被顶到
   li 的上沿，文字中线比顶栏中线高 3.6px。清掉内边距后，
   li 高度 = 链接高度 37px，整条导航在 48px 栏内居中，
   与 38px 的 logo 中线（y=24）齐平。
   ============================================================ */
.yy-topnav .yy-tn-item {
	padding: 0 !important;
}