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

.l-section.c-seasonal-promotions .l-section-h > .g-cols + .g-cols,
.l-section.c-seasonal-promotions .l-section-h > .g-cols:has(.c-section__content),
.c-section__intro .c-section__content {
	margin-top: 1.5rem;
}

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

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

.l-section.c-section__seasonal-promotions:not(:has(.c-promotion-grid)) {
	margin-bottom: 3.5rem;
}

.l-section:has(.c-promotion-grid) .l-section-h {
	padding-top: 0;
}

.c-promotion-grid.w-grid {
	--gap: var(--meda-promo-grid-gap) !important;
	width: 100%;
	margin-inline: auto;
}

.c-promotion-grid .w-grid-item {
	width: 100%;
	max-width: none;
	height: auto;
	justify-self: stretch;
}

.c-promotion-grid .w-grid-list {
	align-items: stretch;
	justify-items: stretch;
}

.c-promotion-grid .w-grid-item-h {
	display: flex;
	flex-direction: column;
	align-items: center;
	--meda-promo-card-gap: 1.4375rem;
	--meda-promo-cta-gap: 0.5rem;
	gap: var(--meda-promo-card-gap);
	width: 100%;
	height: 100%;
	padding: 1rem;
	overflow: hidden;
	background: #fff;
	box-shadow: 8px 4px 8px rgba(0, 0, 0, 0.12);
	transition: box-shadow var(--meda-promo-hover-duration) var(--meda-ease);
	will-change: transform;
}

html.meda-motion-gsap .c-promotion-grid .w-grid-item-h {
	transition-property: box-shadow;
}

.no-touch .c-promotion-grid .w-grid-item.meda-promo-card-is-hovered .w-grid-item-h,
.no-touch .c-promotion-grid .w-grid-item:focus-within .w-grid-item-h {
	box-shadow:
		8px 8px 14px rgba(0, 0, 0, 0.14),
		0 4px 12px rgba(165, 139, 70, 0.15);
}

.c-promotion-grid .w-grid-item.meda-hover-card,
.c-promotion-grid .w-grid-item {
	overflow: visible;
}

/* Whole-card tap target. Impreza makes the card's body wrapper position:relative, which would anchor the stretched link to the text block only and leave the image — half the card — dead. Making that wrapper static moves the anchor up to .w-grid-item-h so the pseudo covers the whole card. Card CTAs (Book this offer, Learn more) are raised above it and keep their own hrefs. */
.c-promotion-grid .w-grid-item-h > .w-vwrapper:not(.c-promotion-grid-item) {
	position: static;
}

.c-promotion-grid__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.c-promotion-grid .w-grid-item-h .w-btn {
	position: relative;
	z-index: 2;
}

/* Book this offer (and any other gold CTA) as a direct child of the card. */
.c-promotion-grid .w-grid-item-h > .w-btn:not(.us-btn-style_2) {
	align-self: stretch;
}

.c-promotion-grid .w-grid-item-h > :not(.w-btn) + .w-btn:not(.us-btn-style_2) {
	margin-top: auto;
}

/* Optional Learn more — Simple button only. Absent on cards that only have Book. */
.c-promotion-grid .w-grid-item-h > .w-btn.us-btn-style_2 {
	display: inline-flex !important;
	align-self: center;
	justify-content: center;
	width: max-content !important;
	max-width: 100%;
	padding-block: 0.75rem;
	padding-inline: 0;
	background: transparent;
	box-shadow: none;
}

.c-promotion-grid .w-grid-item-h > .w-btn + .w-btn.us-btn-style_2 {
	margin-top: calc(var(--meda-promo-cta-gap) - var(--meda-promo-card-gap));
}

.c-promotion-grid .w-btn.us-btn-style_2 .w-btn-label {
	position: relative;
	display: inline-block;
	background: none;
	color: var(--color-gold, var(--meda-gold, #a58b46));
	-webkit-text-fill-color: var(--color-gold, var(--meda-gold, #a58b46));
}

.c-promotion-grid .w-btn.us-btn-style_2 .w-btn-label::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -0.2em;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--meda-btn-hover-duration, 0.55s) var(--meda-btn-ease, cubic-bezier(0.22, 1, 0.36, 1));
	pointer-events: none;
}

.no-touch .c-promotion-grid .w-btn.us-btn-style_2:hover .w-btn-label::after,
.no-touch .c-promotion-grid .w-grid-item.meda-promo-card-is-hovered .w-btn.us-btn-style_2 .w-btn-label::after,
.c-promotion-grid .w-btn.us-btn-style_2:focus-visible .w-btn-label::after,
.c-promotion-grid .w-btn.us-btn-style_2.meda-btn-is-active .w-btn-label::after {
	transform: scaleX(1);
}

.no-touch .c-promotion-grid .w-btn.us-btn-style_2:not(:hover):not(:focus-visible):not(.meda-btn-is-active) .w-btn-label::after {
	transform-origin: right center;
	transition-duration: var(--meda-btn-hover-duration-out, 0.45s);
}

.c-promotion-grid .w-btn.us-btn-style_2:focus-visible {
	outline: 2px solid var(--meda-gold, #a58b46);
	outline-offset: 3px;
}

html.meda-motion-gsap .c-promotion-grid .w-btn.us-btn-style_2::after {
	content: none;
}

.c-promotion-grid-item {
	position: relative;
	width: 100%;
	max-width: none;
	align-self: stretch;
	/* Zoom target includes image + treatment name + save badge overlays. */
	transform-origin: 50% 68.16%;
	will-change: transform;
}

.c-promotion-grid-item.w-vwrapper {
	display: block;
}

.c-promotion-grid__featured-image {
	position: relative;
	width: 100%;
	aspect-ratio: 319 / 234;
	overflow: hidden;
	/* When overriding_link scales this node (no inner <a>), match side inset. */
	transform-origin: 50% 68.16%;
}

.c-promotion-grid__featured-image a {
	display: block;
	width: 100%;
	height: 100%;
	/* Match GSAP zoom origin: top inset ≈ side inset after scale (319/234). */
	transform-origin: 50% 68.16%;
	will-change: transform;
}

.c-promotion-grid__featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-promotion-grid__save-amount {
	position: absolute;
	top: 0.42rem;
	left: 0.38rem;
	z-index: 2;
	margin: 0;
	padding: 0.625rem;
	background: #fff;
	pointer-events: none;
	transform-origin: top left;
	will-change: transform;
}

.c-promotion-grid__save-amount .w-post-elm-value {
	display: block;
	font-family: Montserrat, sans-serif;
	font-size: var(--meda-text-base);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	color: var(--color-dark-pink);
	-webkit-text-fill-color: var(--color-dark-pink);
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
}

.c-promotion-grid__save-amount .w-post-elm-value::before {
	content: 'Save $';
}

.c-promotion-grid__treament-name,
.c-promotion-grid__treatment-name {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;
	margin: 0;
	padding: 0.5rem 1.2rem;
	background: #000;
	pointer-events: none;
}

.c-promotion-grid__treament-name .w-post-elm-value,
.c-promotion-grid__treatment-name .w-post-elm-value {
	display: block;
	width: 100%;
	font-family: Montserrat, sans-serif;
	font-size: var(--meda-text-base);
	font-weight: 400;
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}

.c-promotion-grid .w-grid-item-h > .w-vwrapper:not(.c-promotion-grid-item),
.c-promotion-grid__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	width: 100%;
	max-width: none;
	align-self: stretch;
	text-align: left;
}

.c-promotion-grid__title,
.c-promotion-grid__title a,
.c-promotion-grid .post_content,
.c-promotion-grid .w-post-elm.post_content,
.c-promotion-grid .w-text .w-text-h,
.c-promotion-grid .w-text .w-text-value {
	text-align: left;
}
/* meda-text-lg, not base: at base the title matched the description underneath it exactly (both 16px Montserrat), so the card read as three equal-weight paragraphs. The price stays the dominant element. */
.c-promotion-grid__title {
	margin: 0;
	width: 100%;
	font-family: Montserrat, sans-serif;
	font-size: var(--meda-text-lg);
	font-weight: 600;
	line-height: 1.15;
	color: #000;
}

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

.no-touch .c-promotion-grid__title a:hover {
	color: var(--meda-gold, #a58b46);
}

.c-promotion-grid .w-hwrapper:has(.c-promotion-grid__promotional-price) {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 0 !important;
	margin: 0;
	width: 100%;
}

.c-promotion-grid__promotional-price {
	margin: 0;
}

.c-promotion-grid__promotional-price .w-text-h {
	display: block;
	margin: 0;
	padding: 0;
}

.c-promotion-grid__promotional-price .w-text-value {
	display: block;
	margin: 0;
	padding: 0;
	font-family: Montserrat, sans-serif;
	font-size: var(--meda-text-4xl);
	font-weight: 500;
	line-height: 1;
	background-image: var(--meda-gold-gradient);
	background-size: 100% 100%;
	background-position: 50% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.c-promotion-grid__promotional-price .w-text-value::before {
	content: '$';
	background-image: inherit;
	background-size: inherit;
	background-position: inherit;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.no-touch .c-promotion-grid .w-grid-item.meda-promo-card-is-hovered .c-promotion-grid__promotional-price .w-text-value,
.c-promotion-grid .w-grid-item:focus-within .c-promotion-grid__promotional-price .w-text-value {
	background-image: var(--meda-promo-price-shimmer-gradient);
	background-size: 320% 100%;
	background-position: 72% 50%;
	animation: meda-promo-price-shimmer var(--meda-promo-price-shimmer-duration) linear infinite;
}

@keyframes meda-promo-price-shimmer {
	from {
		background-position: 72% 50%;
	}

	to {
		background-position: -8% 50%;
	}
}

.c-promotion-grid__standard-price {
	margin: 0 0 0 0.15rem;
}

.c-promotion-grid__standard-price .w-text-h,
.c-promotion-grid__standard-price .w-text-value {
	display: block;
	margin: 0;
	padding: 0 0 0.2rem;
	font-family: Montserrat, sans-serif;
	font-size: var(--meda-text-base);
	font-weight: 400;
	line-height: 1;
	text-decoration: line-through;
	color: #7d7572;
}

.c-promotion-grid__standard-price .w-text-value::before {
	content: '$';
}

.c-promotion-grid .w-post-elm.post_content,
.c-promotion-grid .w-grid-item-h .post_content {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-size: var(--meda-text-base);
	font-weight: 400;
	line-height: 1.4;
	color: #000;
}

.c-promotion-grid .w-grid-item-h > .w-vwrapper:not(.c-promotion-grid-item) .w-btn:not(.us-btn-style_2),
.c-promotion-grid__content .w-btn:not(.us-btn-style_2) {
	align-self: flex-start;
	margin-top: auto;
}

.c-promotion-grid .w-grid-item-h > .w-vwrapper:not(.c-promotion-grid-item) .w-btn + .w-btn.us-btn-style_2,
.c-promotion-grid__content .w-btn + .w-btn.us-btn-style_2 {
	margin-top: var(--meda-promo-cta-gap, 0.5rem);
	padding-block: 0.75rem;
	padding-inline: 0;
}

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

@media (max-width: 900px) {
	.c-section__subtitle,
	.c-seasonal-promotions .c-section__subtitle,
	.c-seasonal-promotions .c-section__subtitle p {
		font-size: var(--meda-text-base);
		line-height: 1.5;
	}

	/* Needs !important to beat the base `--gap: var(--meda-promo-grid-gap) !important` — without it the desktop 66px gutter survived onto phones. */
	.c-promotion-grid.w-grid {
		--gap: 1.5rem !important;
	}

	.c-promotion-grid__promotional-price .w-text-value {
		font-size: var(--meda-text-3xl);
	}

	/* The badge is absolutely positioned and nowrap, so a long "Save $X" value runs off the tile rather than wrapping. Cap it against the tile width. */
	.c-promotion-grid__save-amount {
		max-width: calc(100% - 0.76rem);
	}

	.c-promotion-grid__save-amount .w-post-elm-value {
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-promotion-grid .w-grid-item-h,
	.c-promotion-grid__featured-image a,
	.c-promotion-grid__featured-image img,
	.c-promotion-grid__save-amount,
	.c-section__cta.w-btn,
	.c-section__cta-button.w-btn,
	.c-promotion-grid .w-btn:not(.us-btn-style_2) {
		will-change: auto;
		transition: none !important;
	}

	.no-touch .c-promotion-grid .w-grid-item.meda-promo-card-is-hovered .c-promotion-grid__promotional-price .w-text-value,
	.c-promotion-grid .w-grid-item:focus-within .c-promotion-grid__promotional-price .w-text-value {
		animation: none;
		background-image: var(--meda-gold-gradient);
		background-size: 100% 100%;
		background-position: 50% 50%;
	}

	.no-touch .c-promotion-grid .w-grid-item.meda-promo-card-is-hovered .w-btn:not(.us-btn-style_2),
	.no-touch .c-promotion-grid .w-grid-item:focus-within .w-btn:not(.us-btn-style_2) {
		background: var(--meda-gold, #a58b46) !important;
		transform: none;
	}

	.no-touch .c-promotion-grid .w-grid-item.meda-promo-card-is-hovered .w-btn:not(.us-btn-style_2) .w-btn-label,
	.no-touch .c-promotion-grid .w-grid-item:focus-within .w-btn:not(.us-btn-style_2) .w-btn-label {
		background: none;
		-webkit-background-clip: unset;
		background-clip: unset;
		color: #fff;
	}
}