.cs-promo,
.cs-promo * { box-sizing: border-box; }

.cs-promo { margin: 40px 0; }

/* White fallback (no !important) at .cs-promo .cs-promo__content depth so it beats the
   theme's h2/p rules but stays BELOW the Elementor-generated Tekstfarve rule, which is one
   class deeper ({{WRAPPER}} ...). No !important anywhere here — that's what lets the global
   colour picker apply correctly. */
.cs-promo .cs-promo__content .cs-promo__heading,
.cs-promo .cs-promo__content .cs-promo__text,
.cs-promo .cs-promo__content .cs-promo__text p,
.cs-promo .cs-promo__content .cs-promo__text ul,
.cs-promo .cs-promo__content .cs-promo__text ol,
.cs-promo .cs-promo__content .cs-promo__text li {
	color: #fff;
}

.cs-promo__heading {
	font-weight: 700;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin: 0 0 .75rem;
	line-height: 1.15;
}

.cs-promo__text {
	margin: 0 0 1.5rem;
	line-height: 1.5;
}

.cs-promo__text p:last-child { margin-bottom: 0; }

/* Built-in button (Knap stil = Automatisk) */
.cs-promo__button {
	display: inline-block;
	padding: .85rem 2.25rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: 2px;
	transition: opacity .2s ease;
}

.cs-promo__button:hover { opacity: .85; }

.cs-promo--red .cs-promo__button { background: #fff; color: #E4002B; }
.cs-promo--black .cs-promo__button { background: #E4002B; color: #fff; }

/* CS Knapper styles (mirrors cs-cta-buttons-widget) so the same buttons work inside the promo block */
.cs-promo .custom-cta-button {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	transition: all 0.3s ease;
	cursor: pointer;
	font-weight: 700;
}

.cs-promo .custom-cta-style1 {
	border: 2px solid #E4002B;
	color: #E4002B;
	background-color: transparent;
	padding: 8px 28px;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.cs-promo .custom-cta-style1:hover { background-color: rgba(227, 6, 19, 0.1); }

.cs-promo .custom-cta-style2 {
	background-color: #E30613;
	color: #fff;
	border: none;
	padding: 8px 30px;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cs-promo .custom-cta-style3 {
	color: #E30613;
	padding: 8px 0;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background-color: transparent;
	border: none;
}

.cs-promo .custom-cta-style3:hover { color: #c80512; text-decoration: underline; }

/* Colour buttons (roed/sort/hvid/outline) — these had no CSS in the project, defined here */
.cs-promo .custom-cta-roedknap {
	background-color: #E4002B;
	color: #fff;
	border: none;
	padding: 10px 30px;
	font-size: 16px;
}

.cs-promo .custom-cta-sortknap {
	background-color: #000;
	color: #fff;
	border: none;
	padding: 10px 30px;
	font-size: 16px;
}

.cs-promo .custom-cta-hvidknap {
	background-color: #fff;
	color: #E4002B;
	border: none;
	padding: 10px 30px;
	font-size: 16px;
}

.cs-promo .custom-cta-outlineknap {
	background-color: transparent;
	color: #fff;
	border: 2px solid #fff;
	padding: 8px 28px;
	font-size: 16px;
}

/* Split layout */
.cs-promo--split {
	display: flex;
	align-items: stretch;
	min-height: 380px;
}

.cs-promo--split .cs-promo__image {
	flex: 1 1 50%;
	background-size: cover;
	background-position: center;
	min-height: 300px;
}

.cs-promo--split .cs-promo__content {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(2rem, 4vw, 4rem);
}

.cs-promo--split.cs-promo--red .cs-promo__content { background: #E4002B; }
.cs-promo--split.cs-promo--black .cs-promo__content { background: #000; }

/* Overlay layout */
.cs-promo--overlay {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background-size: cover;
	background-position: center;
	padding: clamp(2rem, 5vw, 5rem);
	min-height: 420px;
}

.cs-promo--overlay .cs-promo__content {
	flex: 0 1 42%;
	padding: clamp(1.5rem, 3vw, 3rem);
}

.cs-promo--overlay.cs-promo--black .cs-promo__content { background: #000; }
.cs-promo--overlay.cs-promo--red .cs-promo__content { background: #E4002B; }

@media (max-width: 767px) {
	.cs-promo--split { flex-direction: column; }
	.cs-promo--split .cs-promo__image { min-height: 220px; }
	.cs-promo--overlay { justify-content: stretch; }
	.cs-promo--overlay .cs-promo__content { flex-basis: 100%; }
}