.c-treatment-categories__filter {
	--c-cat-accent: var(--meda-dark-pink, #bc7784);
	--c-cat-ink: var(--color-content-text, #000);
	--c-cat-pad-x: 0.95rem;
}

.c-treatment-categories__filter.w-filter {
	--items-gap: 0 !important; /* override Impreza inline --items-gap */
	width: 100%;
	max-width: var(--site-content-width, 1260px);
	margin: 0 auto 2.5rem;
}

.c-treatment-categories__filter .w-filter-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}

.c-treatment-categories__filter .w-filter-list-title,
.c-treatment-categories__filter .w-filter-list-closer,
.c-treatment-categories__filter .w-filter-item-title,
.c-treatment-categories__filter .w-filter-item-reset,
.c-treatment-categories__filter .w-filter-list-panel,
.c-treatment-categories__filter .w-filter-opener {
	display: none !important;
}

.c-treatment-categories__filter .w-filter-item {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: 0;
	border: none;
}

.c-treatment-categories__filter .w-filter-item-content {
	position: relative;
	width: 100%;
	max-width: 100%;
}

.c-treatment-categories__filter .w-filter-item-values {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 0;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	border-bottom: 1px solid #000;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

/* Edge fades on whichever side still holds off-screen tabs. Masked, not painted: the row sits on the builder's beige .l-section-overlay here but on white elsewhere, so a background-coloured gradient reads as a hard-edged smear over the wrong colour. The mask also carries the hairline and the active bar out with it. Each side has its own length so a strip parked at either end keeps that end hard; both animate via @property, and without support the value still substitutes, so the fade snaps in instead of easing. */
@property --c-cat-fade-start {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@property --c-cat-fade-end {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

.c-treatment-categories__filter .w-filter-item-values {
	--c-cat-fade-start: 0px;
	--c-cat-fade-end: 0px;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--c-cat-fade-start),
		#000 calc(100% - var(--c-cat-fade-end)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--c-cat-fade-start),
		#000 calc(100% - var(--c-cat-fade-end)),
		transparent 100%
	);
	transition:
		--c-cat-fade-start var(--meda-duration-fast, 300ms) var(--meda-ease, ease),
		--c-cat-fade-end var(--meda-duration-fast, 300ms) var(--meda-ease, ease);
}

.c-treatment-categories__filter .w-filter-item-content.has-prev .w-filter-item-values {
	--c-cat-fade-start: var(--c-cat-fade-width, 3rem);
}

.c-treatment-categories__filter .w-filter-item-content.has-more .w-filter-item-values {
	--c-cat-fade-end: var(--c-cat-fade-width, 3rem);
}

.c-treatment-categories__filter .w-filter-item-values::-webkit-scrollbar {
	display: none;
}

.c-treatment-categories__filter .w-filter-item-value {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.c-treatment-categories__filter .w-filter-item-value + .w-filter-item-value::before {
	content: "|";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--body-font-family, Montserrat, sans-serif);
	font-size: var(--meda-text-base);
	line-height: 1;
	background: var(--meda-gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	pointer-events: none;
	user-select: none;
}

.c-treatment-categories__filter .w-filter-item-value label {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0.625rem var(--c-cat-pad-x);
	cursor: pointer;
	font-family: var(--body-font-family, Montserrat, sans-serif);
	font-size: var(--meda-text-base);
	font-weight: 400;
	line-height: 1;
	color: var(--c-cat-ink);
	-webkit-text-fill-color: var(--c-cat-ink);
	white-space: nowrap;
	transition: color var(--meda-duration-fast, 300ms) var(--meda-ease, ease),
		-webkit-text-fill-color var(--meda-duration-fast, 300ms) var(--meda-ease, ease);
}

/* Hide the native radio; the tab label is the whole control. */
.c-treatment-categories__filter .w-filter-item-value input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.c-treatment-categories__filter .w-filter-item-value label::before,
.c-treatment-categories__filter .w-filter-item-value label::after {
	content: none !important;
}

/* Reserve the bold width so the active tab doesn't shift the row (data-text is set by initTreatmentFilterTabs; mirrors __tab::after). */
.c-treatment-categories__filter .w-filter-item-value-label {
	position: relative;
	display: inline-block;
	line-height: 1;
}

.c-treatment-categories__filter .w-filter-item-value-label::after {
	content: attr(data-text);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: 600;
	pointer-events: none;
}

/* Dark-pink underline bar (mirrors __tabs-bar). */
.c-treatment-categories__filter .w-filter-item-value::after {
	content: "";
	position: absolute;
	left: var(--c-cat-pad-x);
	right: var(--c-cat-pad-x);
	bottom: 0;
	height: 3px;
	background: var(--c-cat-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--meda-duration-fast, 300ms) var(--meda-ease, ease);
	pointer-events: none;
}

.no-touch .c-treatment-categories__filter .w-filter-item-value:hover label {
	color: var(--c-cat-accent);
	-webkit-text-fill-color: var(--c-cat-accent);
}

.no-touch .c-treatment-categories__filter .w-filter-item-value:hover::after {
	transform: scaleX(1);
}

/* Active — single selected radio (mirrors __tab.is-active). */
.c-treatment-categories__filter .w-filter-item-value:has(input:checked) label {
	color: var(--c-cat-accent);
	-webkit-text-fill-color: var(--c-cat-accent);
	font-weight: 600;
}

.c-treatment-categories__filter .w-filter-item-value:has(input:checked)::after {
	transform: scaleX(1);
}

.c-treatment-categories__filter .w-filter-item-value input:focus-visible + .w-filter-item-value-label {
	outline: var(--focus-outline-width, 2px) solid var(--c-cat-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	html:not(.meda-no-intro) .c-treatment-categories__filter .w-filter-item-value {
		animation: meda-filter-tab-in var(--meda-treatments-card-duration, 0.65s) var(--meda-ease, ease) both;
	}

	.c-treatment-categories__filter .w-filter-item-value:nth-child(1) { animation-delay: 0.04s; }
	.c-treatment-categories__filter .w-filter-item-value:nth-child(2) { animation-delay: 0.09s; }
	.c-treatment-categories__filter .w-filter-item-value:nth-child(3) { animation-delay: 0.14s; }
	.c-treatment-categories__filter .w-filter-item-value:nth-child(4) { animation-delay: 0.19s; }
	.c-treatment-categories__filter .w-filter-item-value:nth-child(5) { animation-delay: 0.24s; }
	.c-treatment-categories__filter .w-filter-item-value:nth-child(6) { animation-delay: 0.29s; }
	.c-treatment-categories__filter .w-filter-item-value:nth-child(7) { animation-delay: 0.34s; }
	.c-treatment-categories__filter .w-filter-item-value:nth-child(8) { animation-delay: 0.39s; }
	.c-treatment-categories__filter .w-filter-item-value:nth-child(9) { animation-delay: 0.44s; }
	.c-treatment-categories__filter .w-filter-item-value:nth-child(10) { animation-delay: 0.49s; }
	.c-treatment-categories__filter .w-filter-item-value:nth-child(11) { animation-delay: 0.54s; }
	.c-treatment-categories__filter .w-filter-item-value:nth-child(n + 12) { animation-delay: 0.59s; }
}

@keyframes meda-filter-tab-in {
	from {
		opacity: 0;
		filter: blur(var(--meda-treatments-blur, 4px));
	}
	to {
		opacity: 1;
		filter: none;
	}
}

@media (max-width: 600px) {
	.c-treatment-categories__filter {
		--c-cat-pad-x: 0.75rem;
	}

	.c-treatment-categories__filter.w-filter {
		margin-bottom: 2rem;
	}
}