.l-section.c-treatment-collections {
	background: var(--meda-shell-white) !important;
}

.l-section.c-treatment-collections .l-section-h > .g-cols + .g-cols,
.l-section.c-treatment-collections .l-section-h > .g-cols:has(.c-section__content),
.c-treatment-collections .c-section__intro .c-section__content {
	margin-top: 3.5rem;
}

.c-treatment-collections .c-section__intro .c-section__content {
	width: 100%;
	max-width: none;
}

.c-treatment-collections .c-section__intro .vc_column-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.0625rem;
	text-align: center;
}

.c-treatment-collections .c-section__intro {
	width: 100%;
}

.c-treatment-collections .c-section__intro > .vc_column-inner > .c-section__subheading,
.c-treatment-collections .c-section__intro > .vc_column-inner > .c-section__heading,
.c-treatment-collections .c-section__intro > .vc_column-inner > .w-btn-wrapper {
	width: 100%;
	margin-inline: auto;
}

.c-treatment-collections .c-section__content {
	width: 100%;
}

.c-treatment-collections .c-section__content .vc_column-inner {
	display: block;
	width: 100%;
}

.c-treatment-collections .c-section__subheading {
	margin: 0;
	font-family: var(--meda-body-font);
	font-size: var(--meda-text-base);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.96px;
	text-transform: uppercase;
	color: var(--color-dark-pink);
}

.c-treatment-collections .c-section__heading,
.c-treatment-collections h2.c-section__heading {
	margin: 0;
	font-family: var(--h2-font-family);
	font-size: var(--h2-font-size);
	font-weight: var(--h2-font-weight);
	line-height: var(--h2-line-height);
	letter-spacing: var(--h2-letter-spacing);
	text-transform: var(--h2-text-transform);
	color: var(--meda-content-heading);
}

.c-treatments-grid.w-grid {
	--gap: 0.4375rem !important;
	width: 100%;
	margin-inline: auto;
}

.c-treatments-grid .w-grid-item {
	width: 100%;
	height: auto;
	justify-self: center;
}

.c-treatments-grid .w-grid-item-h {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 248 / 360;
	overflow: hidden;
	padding: 0;
	background: #000;
}

.c-treatments-grid {
	--meda-treatments-image-overlay: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.7) 0%,
		rgba(0, 0, 0, 0) 35%
	);
	--meda-treatments-image-overlay-hover: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, 0) 35%
	);
}

.c-treatments-grid__image.post_image,
.c-treatments-grid__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

.c-treatments-grid__image a {
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: center center;
	will-change: transform;
}

.c-treatments-grid__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-treatments-grid__image::before,
.c-treatments-grid__image::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.c-treatments-grid__image::before {
	background: var(--meda-treatments-image-overlay);
	mix-blend-mode: multiply;
}

.c-treatments-grid__image::after {
	background: none;
	transition: background var(--meda-treatments-hover-duration, 0.75s) var(--meda-ease);
}

.no-touch .c-treatments-grid .w-grid-item.meda-treatment-tile-is-hovered .c-treatments-grid__image::after,
.no-touch .c-treatments-grid .w-grid-item:focus-within .c-treatments-grid__image::after {
	background: var(--meda-treatments-image-overlay-hover);
}

/* The second selector is required, not redundant: Impreza ships `.w-vwrapper { position: relative }`, which outranks a lone `.c-treatments-grid__content` and left this overlay as a 109px-tall relative block rather than filling the 227px tile. meda-locations.css carries the same pairing for the same reason. */
.c-treatments-grid__content,
.c-treatments-grid .w-grid-item-h > .w-vwrapper.c-treatments-grid__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.75rem;
	padding: 1.25rem 1.1875rem 1.5rem;
	pointer-events: none;
	text-align: left;
}

/* Client: center title + Explore within c-treatment-collections tiles. */
.c-treatment-collections .c-treatments-grid__content,
.c-treatment-collections .c-treatments-grid .w-grid-item-h > .w-vwrapper.c-treatments-grid__content {
	align-items: center;
	text-align: center;
}

.c-treatments-grid__content a {
	pointer-events: auto;
}

/* Whole-tile tap target. The overlay is pointer-events:none and the image is not a link, so the only things you could tap were the title text and the hover-revealed Explore link — about 10% of the tile on a phone. This stretches the title's own link across the tile, so the semantics and the href stay exactly as authored. Sits at z-index 1 so the Explore link (raised below) still registers its own taps. */
.c-treatments-grid__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.c-treatments-grid__link.w-btn {
	position: relative;
	z-index: 2;
}

/* Body font, NOT the heading font — deliberately unlike the locations tile, which is the other overlay-on-image card but does key off --h4-*. Going through --h4-font-family here resolved to Cormorant Garamond (h4 aliases h1); these titles are Montserrat. The weight/line-height/letter-spacing below are the literal values the h4 vars were resolving to, so only the family changes. Case is still not set here, and that is NOT case-neutral: the homepage grid emits the title as a <div> (no heading styling, renders sentence case) while the archive grids emit an <h2>, which Impreza gives text-transform: var(--h2-text-transform) — uppercase. So the same class renders "Body Treatments" on the homepage and "ACNE SCARS TREATMENT" on /your-concerns/. Set text-transform explicitly here if that should match. width is 60% of the tile, not 100%. Outside c-treatment-collections the overlay is `align-items: flex-start`, so this only sets the wrap width — it does not shrink the tap target: the stretched link below is absolute against .c-treatments-grid__content (the nearest positioned ancestor), which still covers the whole tile. Inside c-treatment-collections the overlay centers children, so the 60% block sits in the middle. */
.c-treatments-grid__title {
	margin: 0;
	width: 60%;
	font-family: var(--body-font-family, var(--font-family, var(--meda-body-font)));
	font-size: var(--meda-text-2xl);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	color: #fff;
}

.c-treatment-collections .c-treatments-grid__title {
	width: 80%;
}

.c-treatments-grid__title a {
	color: inherit;
	text-decoration: none;
	transition: opacity var(--meda-duration-fast) var(--meda-ease);
}

.no-touch .c-treatments-grid__title a:hover {
	opacity: 0.85;
	color: #fff;
}

.c-treatments-grid__excerpt,
.c-treatments-grid__excerpt p {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-size: var(--meda-text-base);
	font-weight: 300;
	line-height: 1.35;
	color: #fff;
}

.c-treatments-grid__excerpt {
	opacity: 0;
	transform: translateY(10px);
	will-change: transform, opacity;
}

.c-treatments-grid__link.w-btn {
	display: inline-flex;
	align-self: flex-start;
	/* Not `margin-top: auto`. That pinned Explore to the bottom of the overlay, which only looked acceptable while the overlay was collapsing to ~109px; once it correctly fills the tile the link was stranded at the very bottom, detached from the copy it belongs to. It now sits with the title and excerpt as one group at the top. */
	margin-top: 0;
	min-height: 0;
	padding: 0 !important;
	border: none !important;
	border-color: transparent !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: #fff !important;
	opacity: 0;
	transform: translateY(10px);
	will-change: transform, opacity;
}

.c-treatment-collections .c-treatments-grid__link.w-btn {
	align-self: center;
}

.c-treatments-grid__link.w-btn::before {
	display: none !important;
}

.c-treatments-grid__link .w-btn-label {
	font-family: Montserrat, sans-serif;
	font-size: var(--meda-text-base);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.96px;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: #fff;
	background: none !important;
	-webkit-background-clip: unset;
	background-clip: unset;
}

.no-touch .c-treatments-grid__link.w-btn:hover,
.no-touch .c-treatments-grid__link.w-btn.meda-hover-btn:hover {
	background: transparent !important;
	border: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
	transform: translateY(10px);
}

.no-touch .c-treatments-grid .w-grid-item.meda-treatment-tile-is-hovered .c-treatments-grid__link.w-btn:hover,
.no-touch .c-treatments-grid .w-grid-item:focus-within .c-treatments-grid__link.w-btn:hover {
	transform: translateY(0);
}

.no-touch .c-treatments-grid__link.w-btn:hover .w-btn-label,
.no-touch .c-treatments-grid__link.w-btn.meda-hover-btn:hover .w-btn-label {
	opacity: 0.85;
	color: #fff;
	background: none !important;
	-webkit-background-clip: unset;
	background-clip: unset;
}

.c-treatments-grid__link.w-btn:focus-visible {
	outline: 2px solid var(--meda-section-bg);
	outline-offset: 3px;
}

html:not(.no-touch) .c-treatments-grid__excerpt,
html:not(.no-touch) .c-treatments-grid__link.w-btn {
	opacity: 1;
	transform: none;
}

html:not(.no-touch) .c-treatments-grid__image::after {
	background: var(--meda-treatments-image-overlay-hover);
}

@media (max-width: 1024px) {
	.l-section.c-treatment-collections .l-section-h > .g-cols + .g-cols,
	.l-section.c-treatment-collections .l-section-h > .g-cols:has(.c-section__content),
	.c-treatment-collections .c-section__intro .c-section__content {
		margin-top: 1.8rem; /* 30% tighter on mobile than Impreza default, 2026-10-02 */
	}

	.c-treatments-grid .w-grid-item {
		max-width: 100%;
	}
}

/* Three across from the tablet state down. The homepage grid is authored cols_4 and the location page's c-location-treatments-grid is cols_5, neither with tablets-/mobiles-cols_* set — so Impreza collapses them to a SINGLE column for the whole mobiles state, and to two at 1024. Combined with the 248/360 portrait tile (a ratio drawn for a 248px-wide column) each tile rendered at 1.45x the viewport WIDTH in height: 375px -> 327x475, 768px -> 720x1045, 900px -> 852x1237. That made one homepage section 6690px tall on an iPad mini and the location page's equivalent 2268px at 1024. Holding three columns preserves the portrait ratio and cuts those sections by ~90% / ~50%. !important because Impreza emits its per-state column CSS inline, after every child stylesheet. */
@media (max-width: 1024px) {
	.c-treatment-collections .c-treatments-grid.w-grid .w-grid-list,
	.c-treatments-grid.w-grid .w-grid-list {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 900px) {
	.c-treatment-collections .c-section__heading,
	.c-treatment-collections h2.c-section__heading {
		font-size: clamp(2rem, 8vw, 2.75rem);
	}

	/* The c-treatment-collections selector is load-bearing: its 80% width rule (0,2,0) outranked a lone class here, so the homepage carousel kept 80% and "Treatments" / "Procedures" overflowed the two-up phone tile. */
	.c-treatments-grid__title,
	.c-treatment-collections .c-treatments-grid__title {
		font-size: var(--meda-text-lg);
		width: 100%;
	}

	/* The overlay sits inside a fixed 248/360 aspect-ratio tile, so its padding eats tile width rather than growing it. Only the type was being reduced here, which let the copy overflow the tile on narrow phones. The `.w-vwrapper` half of the pairing is load-bearing, not copy-paste: the base rule declares these same properties against BOTH a lone `.c-treatments-grid__content` and the four-class `.w-vwrapper` variant, and a selector list applies each selector at its own specificity. A media query adds none, so a lone `.c-treatments-grid__content` here (0,1,0) lost to that base variant (0,4,0) and this override silently never applied — measured at 390/768/899px, the overlay was still painting the desktop 20px/19px/24px and a 12px gap. */
	.c-treatments-grid__content,
	.c-treatments-grid .w-grid-item-h > .w-vwrapper.c-treatments-grid__content {
		gap: 0.5rem;
		padding: 0.875rem 0.875rem 1rem;
	}

	/* Explore is always on below 900px, never hover-revealed. opacity/transform are NOT redundant with the `html:not(.no-touch)` rule above — dropping them is what makes the link disappear. That rule only covers real touch devices; a narrowed DESKTOP window still carries html.no-touch, so the link keeps the base rule's opacity 0. And below 900px Impreza sets body.disable_effects, which meda-motion.js folds into `reducedMotion`, so initTreatmentTileHovers() early-returns and there is no hover handler left to reveal it either. Verified by rendering at 390px and 899px with touch emulation off: without these three lines the computed opacity is 0 on every tile. The hover selectors are listed so the desktop rule that nudges this 10px on hover cannot reintroduce the offset at this width — they outrank a lone class. flex is pinned so the CTA never absorbs a tall title's shortfall: at 390px the five-line "Non-Surgical Blepharoplasty Eyelid Lift" squashed it to 10.5px and clipped the label. The excerpt is the only element that shrinks. */
	.c-treatments-grid__link.w-btn,
	.no-touch .c-treatments-grid__link.w-btn:hover,
	.no-touch .c-treatments-grid__link.w-btn.meda-hover-btn:hover {
		flex: 0 0 auto;
		opacity: 1;
		transform: none;
		will-change: auto;
	}

	/* The `html:not(.no-touch)` rule above permanently reveals the excerpt, because touch has no hover to reveal it on. Left to flow, the excerpt (104 to 252 characters on the collection archives) is taller than the tile, so it buried the title and spilled out the bottom. Clamp it to a few lines and fade the last one out rather than dropping the copy entirely. `height`, not `max-height`: every excerpt currently overruns the clamp, but a short one would shrink the box under max-height and the mask would then fade its ONLY line down to ~25%, reading as a render bug. A fixed height parks the fade over empty space in that case, and keeps Explore on a common baseline across the row. flex-shrink stays at its default so a tile with an unusually tall title steals height from the excerpt instead of pushing Explore out the bottom — min-height floors that at one line (`overflow: hidden` already zeroes the automatic min-height). opacity/transform are restated because the base rule above parks the excerpt at opacity 0 for the hover reveal and only `html:not(.no-touch)` undoes it. Below 900px Impreza sets body.disable_effects, which meda-motion.js folds into `reducedMotion`, so initTreatmentTileHovers() early-returns: a narrow no-touch window has no hover handler left to reveal it and would render an invisible box holding open space. */
	.c-treatments-grid__excerpt {
		--meda-excerpt-lines: 5;
		display: block;
		/* 1.35em is one line at this element's own line-height, so the clamp and the fade both track --meda-text-base if the Theme Options base moves. */
		height: calc(1.35em * var(--meda-excerpt-lines));
		min-height: 1.35em;
		overflow: hidden;
		opacity: 1;
		transform: none;
		will-change: auto;
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.35em), transparent 100%);
		mask-image: linear-gradient(to bottom, #000 calc(100% - 1.35em), transparent 100%);
	}
}

@media (max-width: 600px) {
	/* Two up on phones — three would put the tile under ~105px wide. Title stays at --meda-text-lg (20px): dropping it to the 16px base put it level with the Explore label, and against Montserrat's larger x-height the serif title then read as the SMALLER of the two. */
	.c-treatment-collections .c-treatments-grid.w-grid .w-grid-list,
	.c-treatments-grid.w-grid .w-grid-list {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Paired for specificity for the same reason as the 900px block above. */
	.c-treatments-grid__content,
	.c-treatments-grid .w-grid-item-h > .w-vwrapper.c-treatments-grid__content {
		padding: 0.75rem 0.75rem 0.875rem;
	}

	/* One line fewer than the tablet block: the two-up phone tile is half the width but the same aspect ratio, so the title eats far more of it — the longest ones here wrap to five lines at 20px and leave the excerpt about 60px. Anything over four lines is height this tile cannot honour, and the excerpt just shrinks into it. */
	.c-treatments-grid__excerpt {
		--meda-excerpt-lines: 4;
	}

	/* Archive grids only (type_grid); the homepage collections carousel is untouched. Client, 2026-10-01: even clamped, the excerpt read as clipped copy over a busy photo, and 20px titles overflowed the ~140px two-up tile ("CHEEK REJUVENAT", "COOLSCULP"). So on phones: no excerpt, title sized so the longest single words (ABDOMINOPLASTY, BIO-REMODELLING) fit whole at 375px, title at the top and Explore pinned to the bottom (margin-top: auto is right here, unlike the base rule's note, because there is no copy left for it to sit with), Explore smaller than the title, and a top-and-bottom scrim so white type reads on any photo. */
	.c-treatments-grid.type_grid .c-treatments-grid__excerpt {
		display: none;
	}

	.c-treatments-grid.type_grid .w-grid-item-h > .w-vwrapper.c-treatments-grid__content {
		padding-inline: 0.5rem;
		padding-bottom: 1rem;
	}

	.c-treatments-grid.type_grid .c-treatments-grid__title {
		width: 100%;
		font-size: clamp(12px, 3.6vw, 15px);
		line-height: 1.25;
	}

	.c-treatments-grid.type_grid .c-treatments-grid__link.w-btn {
		margin-top: auto;
	}

	.c-treatments-grid.type_grid .c-treatments-grid__link .w-btn-label {
		font-size: 0.75rem;
	}

	/* !important only to beat the same overlay declared !important in the child theme's style.css. */
	.c-treatments-grid.type_grid .c-treatments-grid__image::before {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0.6) 100%) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-treatments-grid__image a,
	.c-treatments-grid__excerpt,
	.c-treatments-grid__link.w-btn,
	.c-treatments-grid__image::after,
	.c-treatment-collections .c-section__cta-button.w-btn {
		transition: none !important;
		will-change: auto;
	}

	.c-treatments-grid__excerpt,
	.c-treatments-grid__link.w-btn {
		opacity: 1 !important;
		transform: none !important;
	}

	.c-treatments-grid__image::after {
		background: var(--meda-treatments-image-overlay-hover);
	}
}

/* Homepage collections carousel, client 2026-10-01: same card layout as the archive tiles at every width. Title stays at the top (content is justify flex-start), Explore is pinned to the bottom and always visible, and the scrim darkens top and bottom so white type reads on busy photos. The !important on opacity/transform is load-bearing: on desktop initTreatmentTileHovers() parks the link at opacity 0 via an inline GSAP style, which only an !important stylesheet rule can beat; the image zoom on hover still runs. The scrim's !important beats the same overlay declared !important in style.css. */
.c-treatment-collections .c-treatments-grid__link.w-btn {
	margin-top: auto;
	opacity: 1 !important;
	transform: none !important;
}

.c-treatment-collections .c-treatments-grid__image::before {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.65) 100%) !important;
}

/* Same iPhone slide-flicker fix as meda-locations.css: on phones remove the will-change layer promotion the desktop hover zoom needs, drop the blend mode and switch off hover transitions, so each slide paints as one surface. */
@media (max-width: 900px) {
	.c-treatments-grid.type_carousel .c-treatments-grid__image::before {
		mix-blend-mode: normal;
	}

	.c-treatments-grid.type_carousel .c-treatments-grid__image a,
	.c-treatments-grid.type_carousel .c-treatments-grid__image img,
	.c-treatments-grid.type_carousel .c-treatments-grid__image,
	.c-treatments-grid.type_carousel .w-grid-item-h {
		will-change: auto;
	}

	.c-treatments-grid.type_carousel .c-treatments-grid__image img,
	.c-treatments-grid.type_carousel .c-treatments-grid__image::after,
	.c-treatments-grid.type_carousel .w-grid-item-h {
		transition: none;
	}
}

/* All Treatments search (us_list_search), 2026-10-02. Same pill as the pricing page search. */
.c-treatment-collections .w-search.for_list {
	max-width: 40rem;
	margin: 0 auto 0.5rem;
}

.c-treatment-collections .w-search.for_list .w-form-row-field {
	position: relative;
}

.c-treatment-collections .w-search.for_list input {
	width: 100%;
	height: 3rem !important;
	padding: 0 2.75rem !important;
	border: 1px solid #cfc8bb !important;
	border-radius: 999px !important;
	background: #fff !important;
	box-shadow: none !important;
	color: #000 !important;
	font-size: 16px !important; /* iOS zooms the page on focus below 16px */
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
}

.c-treatment-collections .w-search.for_list input:focus {
	outline: none;
	border-color: var(--meda-gold, #a58b46) !important;
	box-shadow: 0 0 0 3px rgba(165, 139, 70, 0.15) !important;
}

/* Live search: the submit button is only the magnifier; park it inside the pill on the left and make it inert. */
.c-treatment-collections .w-search.for_list .w-search-form-btn {
	position: absolute;
	top: 50%;
	left: 1rem;
	z-index: 1;
	width: auto;
	height: auto;
	min-height: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	background: none !important;
	box-shadow: none;
	color: #6b6b6b !important;
	font-size: 1.125rem;
	line-height: 1;
	pointer-events: none;
}

.c-treatment-collections .w-search.for_list .w-form-row {
	position: relative;
}

.c-treatment-collections .w-search.for_list .w-search-reset {
	right: 0.75rem;
}

.c-treatment-collections .w-search.for_list .w-form-row-field::before,
.c-treatment-collections .w-search.for_list i {
	color: #6b6b6b;
}

.c-treatment-collections .w-search.for_list .w-search-reset {
	color: #6b6b6b;
}