.qsv-sidebar-inner,
.qsv-hero,
.qsv-notice,
.qsv-card,
.qsv-empty,
.qsv-sidebar-toggle,
.qsv-btn-buy,
.qsv-soldout,
.qsv-config-nav {
	border-radius: 8px;
}

/* 顶部二级导航条
   要点：本主题用官网头尾（theme.config: loggedheader/nologinheader = web），
   官网头部是 position:fixed / top:0 / 高 68px / z-index:1000。
   所以这条二级条必须：
     1) 从 top:68px 起 —— 否则与官网头部同在 top:0，被整条盖住
     2) z-index 低于 1000 —— 否则会压住官网头部的下拉菜单
   这与参考站的两层结构一致（主导航 62px + 二级条 50px），高度取 50px。 */
.qsv-config-nav {
	position: fixed;
	top: 68px;
	left: 0;
	right: 0;
	height: 50px;
	background: #ffffff;
	border-bottom: 1px solid #d9dee8;
	z-index: 900;
}

.qsv-config-nav-inner {
	height: 100%;
	max-width: 100%;
	padding: 0 20px;
	display: flex;
	align-items: center;
}

.qsv-config-nav-back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #6b7685;
	font-size: 13px;
	text-decoration: none;
	min-width: 56px;
	margin-right: 18px;
	transition: color 0.15s;
}

.qsv-config-nav-back:hover {
	color: #1668dc;
	text-decoration: none;
}

.qsv-config-nav-title {
	font-size: 16px;
	font-weight: 600;
	color: #243144;
	margin: 0;
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	/* min-width:0 是让 flex 子项能收缩的关键；配合下面的标题文字截断，
	   窄屏（实测 390px 下可用宽仅约 180px）才不会把下拉按钮顶出去 */
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}

/* 标题文字单行截断。
   实测 390px 下二级条能给标题的空间约 180px（≈11 个中文字），
   13 字的商品组标题就会溢出 22px —— 必须截断 + 省略号。 */
.qsv-config-nav-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* 移动端「商品分组」下拉按钮 —— 桌面端不显示（菜单就在左侧栏里） */
.qsv-group-select {
	display: none;
}

/* 内容区
   顶距只留二级条自身的高度 50px —— 不能再写 118px。
   官网主题 ysyun.css:113 已用 html:not(.ys-home) body{padding-top:68px} 下推过 68px，
   本元素的 padding 是相对「已被下推 68px 的 body」算的，写 118 就成了 68+118=186；
   而侧栏是 position:fixed、top:118px 相对视口，结果主区比侧栏低 68px。
   左侧不留白：参考站侧栏是贴左边缘的（.shopping-cart-side x=0，页面 padding:0），
   本主题若留 32px 就会在分类菜单左侧出现一条空白带。
   侧栏固定定位的 left 必须与这里取同一个值，否则两者会左右错开。
   左沿归零后主区落在 0+262=262px，与参考站一致。 */
.qsv-page {
	position: relative;
	min-height: 100vh;
	background: #f7f7f9;
	padding: 50px 32px 24px 0;
	display: flex;
}

/* 侧栏：跟随二级条下沿固定，高度随视口（参考站侧栏同为固定定位）
   top 118px = body 下推 68px + 二级条 50px
   left:0 贴左边缘 —— 与 .qsv-page 的 padding-left:0 对齐 */
.qsv-sidebar {
	position: fixed;
	left: 0;
	top: 118px;
	bottom: 24px;
	width: 250px;
	z-index: 100;
}

.qsv-sidebar-inner {
	height: 100%;
	background: #ffffff;
	border: 1px solid #d4d6d9;
	box-shadow: 0 6px 16px rgba(23, 38, 70, 0.08);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* 侧栏搜索框（参考站样式：高 38、圆角 10px、浅底、左右留图标位） */
.qsv-sidebar-search {
	position: relative;
	padding: 12px 12px 0;
	flex: 0 0 auto;
}

.qsv-sidebar-search input {
	width: 100%;
	height: 38px;
	padding: 0 34px 0 14px;
	border: 1px solid #e6eaf2;
	border-radius: 10px;
	background: #f7f9fc;
	color: #000;
	font-size: 13px;
	line-height: 38px;
	outline: none;
	transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.qsv-sidebar-search input::placeholder { color: #9aa7b8; }

.qsv-sidebar-search input:focus {
	border-color: #1668dc;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(22, 104, 220, 0.12);
}

/* 搜索图标：纯 CSS 画放大镜（不引入额外图标库） */
.qsv-search-icon {
	position: absolute;
	right: 24px;
	top: 22px;
	width: 13px;
	height: 13px;
	border: 1.6px solid #9aa7b8;
	border-radius: 50%;
	cursor: pointer;
	transition: border-color .2s ease;
}
.qsv-search-icon::after {
	content: "";
	position: absolute;
	right: -5px;
	bottom: -4px;
	width: 6px;
	height: 1.6px;
	background: #9aa7b8;
	transform: rotate(45deg);
	transition: background .2s ease;
}
.qsv-search-icon:hover { border-color: #1668dc; }
.qsv-search-icon:hover::after { background: #1668dc; }

/* 侧栏标题条：参考站侧栏是「搜索框 → 直接是分类菜单」，中间没有这一条，
   它白占 44px 并把菜单起点从 178 推到 213。这里收成一行无底色的轻量小标题，
   既保留「商品分类」的语义，又不切断搜索框与菜单的视觉连续。 */
.qsv-sidebar-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px 2px;
	font-size: 12px;
	font-weight: 600;
	color: #98a5b7;
	letter-spacing: .5px;
	border-bottom: 0;
	background: transparent;
}

.qsv-sidebar-title button {
	display: none;
	height: 26px;
	padding: 0 8px;
	border: 1px solid #d7deeb;
	background: #fff;
	font-size: 12px;
	color: #607086;
	cursor: pointer;
}

.qsv-prolist {
	flex: 1;
	overflow: auto;
	background: #fff;
}

.qsv-category-item {
	border-bottom: 1px solid #eef1f6;
}

/* 一级分类（分组标题行）
   参考站：字号 15px/600、整行圆角 8px、选中为浅蓝底 #eef4ff + 文字 #0f52b3 */
.qsv-first-level {
	height: 42px;
	margin: 2px 6px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 15px;
	font-weight: 600;
	color: #1f2d61;
	cursor: pointer;
	border-radius: 8px;
	transition: background .2s ease, color .2s ease;
}

.qsv-first-level:hover,
.qsv-first-level.is-active {
	background: #eef4ff;
	color: #0f52b3;
}

.qsv-arrow {
	width: 8px;
	height: 8px;
	border-right: 2px solid #98a5b7;
	border-bottom: 2px solid #98a5b7;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

.qsv-category-item.is-open .qsv-arrow {
	transform: rotate(45deg);
	margin-top: -3px;
	border-color: #0f52b3;
}

.qsv-submenu {
	background: #fff;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.24s ease, opacity 0.2s ease;
}

.qsv-category-item.is-open .qsv-submenu {
	opacity: 1;
}

/* 二级分类条目
   参考站：高 36、字号 14px/400、选中为「浅蓝底 #e0eeff + 蓝色字 + 3px 左边条」，
   不是整行渐变蓝底白字；选中也不加粗（靠底色 + 左边条 + 字色区分层级）。 */
.qsv-submenu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	height: 36px;
	line-height: 36px;
	padding: 0 12px 0 26px;
	font-size: 14px;
	color: #5a6e8c;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-left: 3px solid transparent;
	transition: background .2s ease, color .2s ease;
}

.qsv-submenu-item:hover {
	text-decoration: none;
	color: #0f52b3;
	background: #f2f6ff;
}

.qsv-submenu-item.is-active {
	color: #0f52b3;
	background: #e0eeff;
	border-left-color: #0f52b3;
}

.qsv-submenu-name {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 产品组标题（headline）在菜单项右侧的小标签。
   取值是后台填的短词（如「火爆」），模板侧已限制 ≤6 字才渲染
   （防止长文本撑破 250px 宽的侧栏 —— 历史上 tagline 被误放这里时实测撑到 551px）。 */
.qsv-submenu-headline {
	flex: 0 0 auto;
	height: 18px;
	line-height: 18px;
	padding: 0 7px;
	border-radius: 20px;
	background: #ff5c5c;
	color: #fff;
	font-size: 11px;
	font-weight: 400;
	white-space: nowrap;
}

/* 主区：左侧让出「侧栏 250px + 间距 12px」= 262px（参考站为 250+12=262） */
.qsv-main {
	margin-left: 262px;
	width: calc(100% - 262px);
	min-height: calc(100vh - 118px);
}

.qsv-main-config {
	padding-right: 12px;
}

.qsv-config-page .qiucart-summary-dock {
	left: 262px;
	right: 12px;
}

.qsv-hero {
	position: relative;
	overflow: hidden;
	padding: 20px 24px;
	margin-bottom: 10px;
	border-radius: 8px;
	background: linear-gradient(140deg, #1668dc 0%, #2e7dea 48%, #4f91ed 100%);
	color: #fff;
	box-shadow: 0 12px 28px rgba(22, 104, 220, 0.2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.qsv-hero:before,
.qsv-hero:after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
}

.qsv-hero:before {
	width: 180px;
	height: 180px;
	top: -95px;
	right: -55px;
}

.qsv-hero:after {
	width: 120px;
	height: 120px;
	bottom: -62px;
	left: -30px;
}

.qsv-hero-title {
	position: relative;
	z-index: 1;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	word-break: break-word;
}

.qsv-hero-main {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.qsv-hero-subtitle {
	position: relative;
	z-index: 1;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
	word-break: break-word;
}

.qsv-hero-actions {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
}

.qsv-console-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, 0.58);
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 8px;
	white-space: nowrap;
}

.qsv-console-btn:hover {
	text-decoration: none;
	color: #1668dc;
	background: #ffffff;
	border-color: #ffffff;
}

.qsv-notice {
	border: 1px solid #d5e7ff;
	padding: 10px 12px;
	margin-bottom: 10px;
	font-size: 13px;
	border-radius: 8px;
}

/* 商品组标语介绍条（tagline）—— 放在商品网格上方。
   这是一个长文案（后台实测已填 53 字），所以：
     · 通栏浅底 + 左侧主色竖条，与下方「蓝色登录提示条」区分开
     · 文字最多 2 行截断，极端长文也不会把商品列表挤出首屏
     · 悬停显示全文（见模板 title 属性） */
.qsv-group-banner {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 14px;
	/* 与顶部二级条之间留出呼吸空间：实测这张卡片原本紧贴二级条下沿
	   （卡片 top=118px，二级条底边约 110px，仅 8px），观感像"糊"在导航上。
	   12px 既拉开距离，又不会让首屏商品被推得太低。 */
	margin-top: 12px;
	margin-bottom: 10px;
	background: #ffffff;
	border-left: 3px solid #1668dc;
	color: #4b5667;
	font-size: 13px;
	line-height: 1.6;
	box-shadow: 0 1px 3px rgba(23, 38, 70, .05);
}

.qsv-group-banner-icon {
	flex: 0 0 auto;
	color: #1668dc;
	margin-top: 2px;
	line-height: 0;
}

.qsv-group-banner-text {
	min-width: 0;
	/* 2 行截断：-webkit-line-clamp 在主流浏览器均已支持 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.qsv-notice-blue {
	background: #d5e7ff;
	color: #002da0;
}

.qsv-notice-blue a {
	color: #174fc4;
	font-weight: 600;
}

/* 网格：align-items 必须显式写成 start。
   默认值 stretch 会让同行卡片被拉到同一高度，无描述的商品（正文区已整块不渲染）
   就会在标题与价格之间留下一大片空白（实测 290px）。改成 start 后卡片按自身内容
   定高；正常有描述的商品高度本就接近，不影响整齐度。 */
.qsv-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	align-items: start;
}

.qsv-card {
	border: 1px solid #d4d6d9;
	border-radius: 8px;
	box-shadow: 0 5px 18px rgba(230, 233, 249, 0.25);
	/* 悬停时边框转主色 + 阴影加深，用过渡让变化柔和（原来只有 Element 自带的
	   hover-shadow，边框与位移都是突变） */
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.qsv-card:hover {
	border-color: #1668dc;
	box-shadow: 0 10px 26px rgba(22, 104, 220, 0.16);
	transform: translateY(-2px);
}

/* 卡片入场：逐个轻微上浮淡入，避免列表「啪」地一次出现。
   只做透明度 + 位移，不影响布局；延迟按序号递增形成节奏。

   fill-mode 必须用 backwards 而不是 both/forwards：
   动画一旦「保持」结束帧，就会永久占用 transform 属性，
   把下面 hover 的 translateY(-2px) 过渡整个压掉（动画优先级高于过渡）。
   backwards 只在动画开始前（含延迟期）套用起始帧，结束后即释放，hover 才能生效。 */
@keyframes qsv-card-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.qsv-card {
	animation: qsv-card-in .38s cubic-bezier(.22, .61, .36, 1) backwards;
}

.qsv-grid .qsv-card:nth-child(1) { animation-delay: .02s; }
.qsv-grid .qsv-card:nth-child(2) { animation-delay: .06s; }
.qsv-grid .qsv-card:nth-child(3) { animation-delay: .10s; }
.qsv-grid .qsv-card:nth-child(4) { animation-delay: .14s; }
.qsv-grid .qsv-card:nth-child(5) { animation-delay: .18s; }
.qsv-grid .qsv-card:nth-child(6) { animation-delay: .22s; }
.qsv-grid .qsv-card:nth-child(7) { animation-delay: .26s; }
.qsv-grid .qsv-card:nth-child(8) { animation-delay: .30s; }
.qsv-grid .qsv-card:nth-child(n+9) { animation-delay: .34s; }

/* 尊重系统「减弱动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
	.qsv-card,
	.qsv-grid .qsv-card {
		animation: none;
	}

	.qsv-card,
	.qsv-card:hover {
		transform: none;
	}

	.qsv-submenu,
	.qsv-sidebar,
	.qsv-sidebar-overlay,
	.qsv-group-select-arrow,
	.qsv-arrow,
	.qsv-btn-buy,
	.qsv-submenu-item,
	.qsv-first-level,
	.qsv-config-nav-back,
	.qsv-sidebar-search input {
		transition: none !important;
	}
}

.qsv-card .el-card__body {
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* 标题带：参考站 h=47（padding 14px 16px），bg #f7f7f9 */
.qsv-card-head {
	background: #f7f7f9;
	padding: 14px 16px;
	border-bottom: 1px solid #eceef2;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
}

/* 卡片标题：参考站 14px/500/纯黑 */
.qsv-card-head h5 {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: #000;
	line-height: 1.4;
	word-break: break-word;
}

/* 库存：参考站 12px/#a9a9a9，左侧一条 1px 竖线作分隔 */
.qsv-stock {
	position: relative;
	margin: 0;
	padding-left: 10px;
	font-size: 12px;
	color: #a9a9a9;
	white-space: nowrap;
	flex: 0 0 auto;
}
.qsv-stock::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	width: 1px;
	height: 12px;
	background: #d4d6d9;
}

.qsv-stock.warn {
	color: #f0b000;
}

.qsv-stock.danger {
	color: #f87878;
}

.qsv-card-body {
	padding: 12px 12px 12px 20px;
	flex: 1;
}

.qsv-card-desc {
	word-break: break-word;
	padding-right: 8px;
	overflow-x: auto;
}

.qsv-card-desc img,
.qsv-card-desc video,
.qsv-card-desc iframe,
.qsv-card-desc table {
	max-width: 100%;
}

.qsv-card-desc img,
.qsv-card-desc video,
.qsv-card-desc iframe {
	height: auto;
}

/* 价格区贴底：无描述的商品没有 .qsv-card-body，
   靠这里把价格 + 按钮推到卡片底部，与同行卡片底部对齐。 */
.qsv-card-foot {
	margin-top: auto;
	padding: 8px 12px 0;
	border-top: 1px solid #f0f1f4;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* 价格：参考站是纯红 rgb(255,0,0) */
.qsv-price-main {
	display: flex;
	align-items: baseline;
	gap: 3px;
	color: #ff0000;
	flex-wrap: wrap;
}

.qsv-price-main .currency {
	font-size: 14px;
}

.qsv-price-main .amount {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.qsv-price-main .period {
	font-size: 13px;
	color: #8a96a7;
}

.qsv-price-main .daily {
	font-size: 12px;
	color: #8b97a7;
}

.qsv-price-trial,
.qsv-price-origin {
	font-size: 12px;
	color: #8c96a5;
}

.qsv-price-origin {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.qsv-price-origin.is-hidden {
	display: none;
}

.qsv-price-origin .qsv-origin-strike {
	color: #9ca5b3;
	text-decoration: line-through;
}

.qsv-price-origin .el-tag {
	margin-left: 4px;
	vertical-align: middle;
	padding: 0 8px;
	height: 14px;
	line-height: 14px;
	border-radius: 2px;
	font-size: 11px;
	letter-spacing: 1px;
}

/* 购买按钮：参考站 h=42（用 line-height 撑高，不用 padding）、
   bg #1668dc、字号 14px/500 */
.qsv-btn-buy,
.qsv-soldout {
	display: block;
	margin: 6px -12px 0;
	padding: 0;
	height: 42px;
	line-height: 42px;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	/* 背景色 / 阴影过渡：原先 hover 是瞬间换色 */
	transition: background-color .22s ease, box-shadow .22s ease, filter .22s ease;
}

.qsv-btn-buy {
	background: #1668dc;
	color: #fff;
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
}

.qsv-btn-buy:hover {
	color: #fff;
	text-decoration: none;
	background: #2756cc;
	box-shadow: inset 0 0 0 40px rgba(255, 255, 255, 0.06);
}

.qsv-btn-buy:active {
	background: #1f47a8;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18);
}

.qsv-soldout {
	background: #f2f3f5;
	color: #98a2b2;
	cursor: not-allowed;
}

.qsv-pagination-wrap {
	margin-top: 14px;
	display: flex;
	justify-content: center;
}

.qsv-pagination-wrap .pagination {
	margin-bottom: 0;
}

.qsv-empty {
	padding: 56px 0;
	text-align: center;
	color: #7c8796;
	font-size: 14px;
	background: #fff;
	border: 1px solid #d4d6d9;
	border-radius: 8px;
}

/* 遮罩：用 opacity + visibility 做淡入淡出。
   原来用 display:none 切换 —— display 是不可过渡属性，
   开关都是瞬间跳变，观感很僵硬。
   visibility 用 0s 延时切换：关闭时等淡出结束再隐藏，避免中途就点不到。 */
.qsv-sidebar-overlay {
	position: fixed;
	inset: 0;
	background: rgba(8, 20, 42, 0.45);
	z-index: 940;
	opacity: 0;
	visibility: hidden;
	transition: opacity .26s ease, visibility 0s linear .26s;
}

.qsv-sidebar-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .26s ease, visibility 0s linear 0s;
}

.qsv-sidebar-toggle {
	display: none;
	position: fixed;
	left: 14px;
	bottom: 14px;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	max-width: 44px;
	max-height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	background: #1668dc;
	color: #fff;
	font-size: 18px;
	z-index: 101;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(22, 104, 220, 0.3);
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	justify-content: center;
}

/* Hamburger icon - 3 bars to X animation */
.qsv-hamburger {
	display: block;
	width: 20px;
	height: 16px;
	position: relative;
}

.qsv-hamburger span {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: all 0.3s ease;
}

.qsv-hamburger span:nth-child(1) {
	top: 0;
}

.qsv-hamburger span:nth-child(2) {
	top: 50%;
	transform: translateY(-50%);
}

.qsv-hamburger span:nth-child(3) {
	bottom: 0;
}

/* Active state: X */
.qsv-sidebar-toggle.is-active .qsv-hamburger span:nth-child(1) {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.qsv-sidebar-toggle.is-active .qsv-hamburger span:nth-child(2) {
	opacity: 0;
	transform: translateY(-50%) scaleX(0);
}

.qsv-sidebar-toggle.is-active .qsv-hamburger span:nth-child(3) {
	bottom: auto;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
}

@media (max-width: 1199px) {
	.qsv-grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}
}

@media (max-width: 991px) {
	/* 移动端头部实测 60px（ysyun.css:1368 .ys-header-inner{height:60px}），
	   二级条若仍写死 68px 就会在头部下沿露出 8px 缝，故同步改 60px。 */
	.qsv-config-nav {
		top: 60px;
	}

	/* 二级条里的分组下拉：右侧、可点、显示当前分组名 */
	.qsv-group-select {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		flex: 0 0 auto;
		max-width: 46%;
		height: 32px;
		margin-left: 10px;
		padding: 0 10px;
		border: 1px solid #d7deeb;
		background: #f7f9fc;
		color: #243144;
		font-size: 13px;
		line-height: 1;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
		transition: background-color .22s ease, border-color .22s ease, color .22s ease;
	}

	.qsv-group-select:active {
		background: #e6effe;
	}

	.qsv-group-select-text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.qsv-group-select-arrow {
		flex: 0 0 auto;
		width: 7px;
		height: 7px;
		border-right: 1.6px solid #6b7685;
		border-bottom: 1.6px solid #6b7685;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform .26s cubic-bezier(.22, .61, .36, 1), border-color .22s ease;
	}

	/* 展开时箭头翻转向上 */
	.qsv-group-select.is-open {
		background: #eef4ff;
		border-color: #0f52b3;
		color: #0f52b3;
	}

	.qsv-group-select.is-open .qsv-group-select-arrow {
		border-color: #0f52b3;
		transform: rotate(-135deg) translate(-2px, -2px);
	}

	/* 二级条标题在移动端要允许收缩，给下拉留出空间 */
	.qsv-config-nav-title {
		min-width: 0;
		overflow: hidden;
	}

	/* 二级条右侧的分组下拉（桌面端由 .qsv-group-select{display:none} 隐藏）。
	   顶距 = 二级条下沿 110px（60+50）− body 已下推的 68px = 42px。 */
	.qsv-page {
		padding: 42px 0 8px;
	}

	/* 配置页的 padding-top 若被 qiucart-configure-detail.css 覆盖，用双类名提权，
	   保证与列表页同一基准。 */
	.qsv-page.qsv-config-page {
		padding-top: 42px;
	}

	/* 分类菜单在移动端不再内联常驻，改为「点下拉才出」的浮层。
	   位置紧贴二级条下沿（视口 110px），最大高度留给商品区。

	   动效：原来用 display:none/.is-open{display:block} 切换，
	   display 不可过渡 → 点开是瞬间弹出，非常生硬。
	   改为 opacity + transform（下滑淡入）+ visibility 延迟隐藏：
	   打开时从上方 10px 处滑入并淡现，关闭时滑回并淡出。 */
	.qsv-sidebar {
		position: fixed;
		left: 0;
		right: 0;
		top: 110px;
		bottom: auto;
		width: 100%;
		max-width: none;
		max-height: calc(100vh - 120px);
		z-index: 950;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity .26s ease, transform .26s cubic-bezier(.22, .61, .36, 1),
			visibility 0s linear .26s;
	}

	.qsv-sidebar.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity .26s ease, transform .26s cubic-bezier(.22, .61, .36, 1),
			visibility 0s linear 0s;
	}

	.qsv-sidebar-inner {
		height: auto;
		max-height: calc(100vh - 120px);
		border-left: 0;
		border-right: 0;
		border-top: 0;
		box-shadow: 0 12px 28px rgba(23, 38, 70, 0.16);
	}

	.qsv-prolist {
		-webkit-overflow-scrolling: touch;
		overflow-y: auto;
	}

	/* 浮层遮罩：从二级条下沿开始、层级夹在二级条(900)与浮层(950)之间，
	   这样二级条上的下拉按钮保持可点、也不会被压暗。 */
	.qsv-sidebar-overlay {
		top: 110px;
		background: rgba(8, 20, 42, 0.28);
		z-index: 880;
	}

	/* 分组菜单已改为浮层，不再需要角落的汉堡按钮 */
	.qsv-sidebar-toggle {
		display: none !important;
	}

	.qsv-main {
		margin-left: 0;
		width: 100%;
		padding: 0 8px;
	}

	.qsv-main-config {
		padding-right: 8px;
	}

	.qsv-config-page .qiucart-summary-dock {
		left: 8px;
		right: 8px;
	}
}

@media (max-width: 767px) {
	.qsv-config-nav-inner {
		padding: 0 12px;
	}

	.qsv-config-nav-back {
		margin-right: 12px;
	}

	.qsv-hero {
		padding: 16px;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.qsv-hero-title {
		font-size: 18px;
	}

	.qsv-hero-subtitle {
		font-size: 12px;
	}

	.qsv-console-btn {
		height: 34px;
		padding: 0 12px;
	}

	.qsv-grid {
		grid-template-columns: 1fr;
	}

	.qsv-card-body {
		padding: 12px 10px 12px 14px;
	}
}

/* ==========================================================================
   商品网格与顶部二级条的间距
   --------------------------------------------------------------------------
   分组横幅（.qsv-group-banner，见上文）自带 margin-top，所以"有横幅"的页面
   （如 /cart?fid=2&gid=2）已经有呼吸空间。
   但只有一个分组的页面（如 /cart?fid=1&gid=1）不渲染横幅，.qsv-grid 直接成为
   .qsv-main 的首个子元素，实测与二级条下沿间距为 **0px**，商品卡像贴在导航上。

   这里只针对"网格作为首个子元素"的情形补间距 —— 用 :first-child 限定，
   有横幅时横幅才是首元素，本规则不生效，不会把已经调好的页面再推下去。
   ========================================================================== */
.qsv-main > .qsv-grid:first-child {
	margin-top: 12px;
}


/* 未登录提示条（product.tpl 第 79 行 .qsv-notice.qsv-notice-blue）
   ---- 实测它紧贴上方元素、距顶部没有间距。这里补上上边距，与页内其它卡片
        的 12px 间距体系保持一致。 */
.qsv-notice {
	margin-top: 14px;
}

/* ---------- 消除多余的纵向滚动 ----------
   实测：视口 900 时文档高 968，多出 68px。
   元凶是 #qiucartProductApp.qsv-page —— 它顶边在 y=68（顶部固定导航之下），
   高度却按 100vh（900）算，68 + 900 = 968 就超出一屏。
   多出的 68px 正好等于导航高度，所以这里改成"减去导航高度"，
   内容不足一屏时不再出现滚动条。 */
#qiucartProductApp.qsv-page {
	min-height: calc(100vh - 68px) !important;
	height: auto !important;
}

/* ==========================================================================
   商品页调整（用户反馈）：
   ① 商品组标语条背景改为淡蓝色（原为白底 + 左侧蓝色竖条）
   ② 购买按钮收进卡片内：原样式 margin: 6px -12px 0 的"通栏出血"式样会
      盖住卡片圆角边框，看起来像按钮在卡片外；改为内缩 + 缩小（42px → 34px）。
      .qsv-soldout（已售罄）与按钮共用同一组规则，一并内缩保持一致。
   ========================================================================== */
.qsv-group-banner {
	background: #eaf2fe;
	border-left: 3px solid #1668dc;
}
.qsv-btn-buy,
.qsv-soldout {
	margin: 10px 14px 14px;
	height: 34px;
	line-height: 34px;
	font-size: 13px;
	border-radius: 6px;
}

/* ==========================================================================
   商品页调整（用户反馈）：
   ① 商品组标语条背景改为淡蓝色（原为白底 + 左侧蓝色竖条）
   ② 购买按钮收进卡片内：原样式 margin: 6px -12px 0 的"通栏出血"式样会
      盖住卡片圆角边框，看起来像按钮在卡片外；改为内缩 + 缩小（42px → 34px）。
      .qsv-soldout（已售罄）与按钮共用同一组规则，一并内缩保持一致。
   ========================================================================== */
.qsv-group-banner {
	background: #eaf2fe;
	border-left: 3px solid #1668dc;
}
.qsv-btn-buy,
.qsv-soldout {
	margin: 10px 14px 14px;
	height: 34px;
	line-height: 34px;
	font-size: 13px;
	border-radius: 6px;
}

/* ==========================================================================
   商品分组（侧栏）字体与字重：用户反馈偏大偏粗 → 收小一档
   一级分组（分组标题行）15px/600 → 13.5px/500；二级分组 14px → 13px
   ========================================================================== */
.qsv-first-level {
	font-size: 13.5px !important;
	font-weight: 500 !important;
}
.qsv-submenu-item {
	font-size: 13px !important;
}

/* 商品组标语条（线路说明）文字：用户反馈偏小 → 调大 13px → 14px */
.qsv-group-banner {
	font-size: 14px;
}

/* 商品组标语条（线路说明）文字：用户要求黑色（用主题近黑 #1a1f36，与全站正文一致） */
.qsv-group-banner {
	color: #1a1f36;
}