/* qlbd-fir-buttonlist - 产品中心列表筛选按钮组 */

.qlbd-fir-buttonlist-container {
	width: 100%;
	padding: 16px 0 24px;
	background-color: #ffffff;
}

.qlbd-fir-buttonlist-inner {
	max-width: var(--ql-container-width);
	margin: 0 auto;
	padding: 0 16px;
}

.qlbd-fir-buttonlist-nav {
	width: 100%;
}

.qlbd-fir-buttonlist-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
}

/* 未选中：浅灰底 + 深色字（与参考图黄框内样式一致） */
.qlbd-fir-buttonlist-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	font-size: 14px;
	line-height: var(--ql-line-height-base);
	font-weight: 600;
	color: var(--ql-color-text-title);
	background-color: color-mix(in srgb, var(--ql-color-text-title) 6%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--ql-color-text-title) 8%, transparent);
	border-radius: 6px;
	white-space: nowrap;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
}

.qlbd-fir-buttonlist-item:hover {
	color: var(--ql-color-primary);
	background-color: color-mix(in srgb, var(--ql-color-primary) 10%, #ffffff);
	border-color: color-mix(in srgb, var(--ql-color-primary) 28%, transparent);
	box-shadow: 0 1px 4px color-mix(in srgb, var(--ql-color-primary) 10%, transparent);
}

/* 选中：主色底 + 白字（与搜索按钮同色体系） */
.qlbd-fir-buttonlist-item-active,
.qlbd-fir-buttonlist-item.qlbd-fir-buttonlist-item-active {
	color: #ffffff;
	background-color: var(--ql-color-primary);
	border-color: var(--ql-color-primary);
	box-shadow: none;
}

.qlbd-fir-buttonlist-item-active:hover,
.qlbd-fir-buttonlist-item.qlbd-fir-buttonlist-item-active:hover {
	color: #ffffff;
	background-color: color-mix(in srgb, var(--ql-color-primary) 88%, #000000);
	border-color: color-mix(in srgb, var(--ql-color-primary) 88%, #000000);
}

/* 手机端：多行换行排列 + 紧凑间距（参考平台类目黄框） */
@media (max-width: 768px) {
	.qlbd-fir-buttonlist-container {
		padding: 10px 0 14px;
	}

	.qlbd-fir-buttonlist-inner {
		padding: 0 12px;
	}

	.qlbd-fir-buttonlist-group {
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 8px 8px;
		overflow: visible;
		margin: 0;
		padding: 0;
	}

	.qlbd-fir-buttonlist-item {
		flex: 0 0 auto;
		padding: 8px 14px;
		font-size: 13px;
		border-radius: 5px;
	}
}