.he-page-filter {
	position: sticky;
	top: var(--he-space-80);
	z-index: 20;
	border-bottom: 1px solid var(--he-color-border-light);
	background-color: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(var(--he-space-4));
	-webkit-backdrop-filter: blur(var(--he-space-4));
}

.he-page-filter__container,
.he-page-filter__controls,
.he-page-filter__chips {
	display: flex;
}

.he-page-filter__container {
	flex-direction: column;
	gap: var(--he-space-16);
	padding-top: var(--he-space-20);
	padding-bottom: var(--he-space-20);
}

.he-page-filter__label {
	color: var(--he-color-heading);
	font-size: var(--he-type-body-small-size);
	font-weight: 600;
	letter-spacing: var(--he-type-caption-letter-spacing);
	text-transform: uppercase;
}

.he-page-filter__controls {
	flex-direction: column;
	gap: var(--he-space-16);
}

.he-page-filter__search {
	width: 100%;
	padding: var(--he-space-12) var(--he-space-16);
	border: 1px solid var(--he-color-border-light);
	border-radius: var(--he-space-6);
	background-color: var(--he-color-background);
}

.he-page-filter__chips {
	flex-wrap: wrap;
	gap: var(--he-space-12);
}

.he-page-filter__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--he-space-10) var(--he-space-16);
	border: 1px solid var(--he-color-border-light);
	border-radius: var(--he-space-6);
	background-color: var(--he-color-background);
	color: var(--he-color-text-dark);
	font-size: var(--he-type-body-small-size);
	font-weight: 500;
}

.he-page-filter__chip.is-active {
	background-color: var(--he-color-amber);
	color: var(--he-color-background);
	border-color: var(--he-color-amber);
}