.shop-cta-section {
	padding-block: var(--space-7);
	background: var(--color-bg);
}

.shop-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 456px;
	overflow: hidden;
	border-radius: var(--radius-md);
}

.shop-cta__content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-5);
	padding: clamp(40px, 6vw, 96px);
	overflow: hidden;
	background: var(--color-active);
	color: var(--color-white);
}

.shop-cta__content::before {
	content: "";
	position: absolute;
	inset: -24px;
	background-image: var(--shop-cta-pattern);
	pointer-events: none;
}

.shop-cta__title,
.shop-cta__subtitle,
.shop-cta__button {
	position: relative;
	z-index: 1;
}

.shop-cta__title {
	color: var(--color-white);
	font-size: clamp(3rem, 5vw, 5rem);
	font-weight: 800;
	line-height: 1.05;
}

.shop-cta__subtitle {
	font-size: clamp(1.75rem, 2.8vw, 2.6rem);
	font-weight: 800;
	line-height: 1.12;
}

.shop-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 14px 30px;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-white);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.shop-cta__button:hover,
.shop-cta__button:focus-visible {
	background: var(--color-accent-dark);
	color: var(--color-white);
}

.shop-cta__button:active {
	transform: translateY(1px);
}

.shop-cta__media {
	min-height: 100%;
	background: var(--color-bg-soft);
}

.shop-cta__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 899px) {
	.shop-cta {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.shop-cta__content {
		min-height: 390px;
	}

	.shop-cta__subtitle {
		margin-bottom: var(--space-5);
	}

	.shop-cta__media {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 639px) {
	.shop-cta-section {
		padding-block: var(--space-6);
	}

	.shop-cta__content {
		min-height: 340px;
		padding: var(--space-6);
	}

	.shop-cta__button {
		min-height: 48px;
		padding: 12px 22px;
		font-size: 1rem;
	}
}