/*
 Theme Name: Hello Elementor Child
 Theme URI: https://elementor.com/hello-theme/
 Description: Hello Elementor Child is a child theme of Hello Elementor, tailored for Bikeport.nl.
 Author: Bikeport.nl
 Author URI: https://bikeport.nl
 Template: hello-elementor
 Version: 1.0.0
 Text Domain: hello-elementor-child
*/

:root {
	--bp-font-heading: 'Cormorant Garamond', Georgia, serif;
	--bp-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--bp-green-dark: #143525;
	--bp-green-hover: #0d261a;
	--bp-gold: #e2b774;
	--bp-tan: #c89955;
	--bp-tan-hover: #b58544;
	--bp-bg-light: #f8f7f4;
	--bp-text-dark: #1e1e1e;
	--bp-text-muted: #5c5c5c;
	--bp-border-color: #e2e0d8;
}

body {
	font-family: var(--bp-font-body);
	color: var(--bp-text-dark);
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	-webkit-font-smoothing: antialiased;
}

/* Hide Hello Elementor default header/footer */
#site-header,
.site-header,
#site-footer,
.site-footer {
	display: none !important;
}

/* ==========================================================================
   HEADER NAVIGATION BAR
   ========================================================================== */
.bp-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	padding: 30px 0;
	box-sizing: border-box;
}

.bp-header-dark {
	position: relative;
	background-color: var(--bp-green-dark);
	padding: 20px 0;
}

.bp-header-container {
	max-width: 1450px;
	width: 100%;
	margin: 0 auto;
	padding: 0 60px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.bp-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.bp-logo-icon-wrap {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bp-logo-svg {
	width: 38px;
	height: 38px;
	display: block;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.bp-logo-text {
	font-family: var(--bp-font-body);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #ffffff;
	text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.bp-nav {
	display: flex;
	align-items: center;
	gap: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bp-nav a {
	color: #ffffff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.2px;
	text-shadow: 0 2px 6px rgba(0,0,0,0.5);
	transition: opacity 0.2s ease;
}

.bp-nav a:hover {
	opacity: 0.85;
}

.bp-header-cta {
	background-color: var(--bp-green-dark);
	color: #ffffff !important;
	padding: 10px 22px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.bp-header-cta:hover {
	background-color: var(--bp-green-hover);
	transform: translateY(-1px);
}

/* ==========================================================================
   HERO SLIDER SECTION
   ========================================================================== */
.bp-hero {
	position: relative;
	min-height: 78vh;
	width: 100%;
	overflow: hidden;
}

.bp-slider-container {
	position: relative;
}

.bp-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	pointer-events: none;
	transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
}

.bp-slide.active {
	opacity: 1;
	visibility: visible;
	z-index: 10;
	pointer-events: auto;
}

.bp-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(to right, rgba(8, 16, 11, 0.88) 0%, rgba(8, 16, 11, 0.65) 45%, rgba(0, 0, 0, 0.1) 100%);
}

.bp-overlay-darker {
	background: linear-gradient(to right, rgba(6, 12, 8, 0.93) 0%, rgba(6, 12, 8, 0.80) 52%, rgba(0, 0, 0, 0.2) 100%);
}

.bp-hero-container {
	position: relative;
	z-index: 5;
	max-width: 1450px;
	width: 100%;
	margin: 0 auto;
	padding: 150px 60px 80px 60px;
	box-sizing: border-box;
}

.bp-hero-content {
	max-width: 580px;
}

.bp-hero-title {
	font-family: var(--bp-font-heading);
	font-size: 60px;
	line-height: 1.12;
	font-weight: 500;
	color: #ffffff;
	margin: 0 0 20px 0;
	letter-spacing: -0.3px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.bp-hero-title .bp-accent {
	font-family: var(--bp-font-heading);
	font-style: italic;
	color: var(--bp-gold);
	font-weight: 400;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.bp-hero-subtitle {
	font-size: 17px;
	line-height: 1.5;
	color: #ffffff;
	margin: 0 0 32px 0;
	font-weight: 400;
	max-width: 500px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.bp-hero-buttons {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.bp-btn-primary {
	background-color: var(--bp-green-dark);
	color: #ffffff;
	padding: 13px 28px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.bp-btn-primary:hover {
	background-color: var(--bp-green-hover);
	border-color: rgba(255, 255, 255, 0.3);
	transform: translateY(-2px);
}

.bp-btn-secondary {
	background-color: rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(4px);
	color: #ffffff;
	padding: 13px 28px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	transition: all 0.2s ease;
}

.bp-btn-secondary:hover {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: #ffffff;
	transform: translateY(-2px);
}

.bp-arrow {
	font-size: 16px;
	transition: transform 0.2s ease;
}

.bp-btn-secondary:hover .bp-arrow {
	transform: translateX(3px);
}

/* Slider Controls */
.bp-slider-controls {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	display: flex;
	gap: 12px;
}

.bp-slide-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.4);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.bp-slide-dot.active, .bp-slide-dot:hover {
	background-color: #ffffff;
	transform: scale(1.25);
}

/* ==========================================================================
   USP FEATURES BAR
   ========================================================================== */
.bp-usp-bar {
	background-color: var(--bp-bg-light);
	border-bottom: 1px solid var(--bp-border-color);
	padding: 56px 60px;
}

.bp-usp-container {
	max-width: 1450px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.bp-usp-item {
	padding: 0 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-right: 1px solid var(--bp-border-color);
}

.bp-usp-item:last-child {
	border-right: none;
}

.bp-usp-icon {
	width: 36px;
	height: 36px;
	margin-bottom: 16px;
	color: #1e1e1e;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bp-usp-icon svg {
	width: 32px;
	height: 32px;
	stroke-width: 1.5;
}

.bp-usp-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--bp-text-dark);
	margin: 0 0 8px 0;
}

.bp-usp-desc {
	font-size: 14px;
	line-height: 1.5;
	color: var(--bp-text-muted);
	margin: 0;
}

/* ==========================================================================
   MODELLEN SECTION
   ========================================================================== */
.bp-models-section {
	background-color: var(--bp-bg-light);
	padding: 90px 60px;
}

.bp-models-container {
	max-width: 1450px;
	margin: 0 auto;
}

.bp-section-header {
	text-align: center;
	margin-bottom: 56px;
}

.bp-section-title {
	font-family: var(--bp-font-heading);
	font-size: 44px;
	font-weight: 500;
	color: var(--bp-text-dark);
	margin: 0 0 12px 0;
}

.bp-section-subtitle {
	font-size: 16px;
	color: var(--bp-text-muted);
	margin: 0;
}

.bp-models-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 36px;
}

.bp-model-card {
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.bp-model-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.bp-model-image-wrap {
	width: 100%;
	height: 380px;
	overflow: hidden;
	display: block;
}

.bp-model-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.bp-model-card:hover .bp-model-image {
	transform: scale(1.03);
}

.bp-model-info {
	padding: 28px 32px 32px 32px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-grow: 1;
}

.bp-model-title {
	font-family: var(--bp-font-heading);
	font-size: 28px;
	font-weight: 500;
	color: var(--bp-text-dark);
	margin: 0 0 8px 0;
}

.bp-model-title a {
	color: var(--bp-text-dark);
	text-decoration: none;
}

.bp-model-desc {
	font-size: 15px;
	line-height: 1.55;
	color: var(--bp-text-muted);
	margin: 0 0 24px 0;
}

.bp-model-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--bp-border-color);
}

.bp-model-price {
	font-family: var(--bp-font-heading);
	font-size: 24px;
	font-weight: 600;
	color: var(--bp-green-dark);
}

.bp-btn-checkout {
	background-color: var(--bp-green-dark);
	color: #ffffff !important;
	padding: 12px 24px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.bp-btn-checkout:hover {
	background-color: var(--bp-green-hover);
	transform: translateY(-2px);
}

/* ==========================================================================
   SPLIT FEATURE BANNER SECTION ("Meer dan een fietsenhok")
   ========================================================================== */
.bp-split-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 520px;
	background-color: #0d261a;
	color: #ffffff;
}

.bp-split-image-col {
	background-size: cover;
	background-position: center;
	min-height: 450px;
}

.bp-split-text-col {
	display: flex;
	align-items: center;
	padding: 60px 80px;
	background-color: #0d261a;
}

.bp-split-content {
	max-width: 540px;
}

.bp-split-title {
	font-family: var(--bp-font-heading);
	font-size: 44px;
	line-height: 1.15;
	font-weight: 500;
	color: #ffffff;
	margin: 0 0 20px 0;
}

.bp-split-title .bp-accent {
	font-style: italic;
	color: var(--bp-gold);
}

.bp-split-desc {
	font-size: 16px;
	line-height: 1.6;
	color: #d0d8d3;
	margin: 0 0 32px 0;
}

.bp-accent-text {
	color: var(--bp-gold);
	font-weight: 600;
}

.bp-split-badges {
	display: flex;
	gap: 24px;
	margin-bottom: 36px;
	flex-wrap: wrap;
}

.bp-badge-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bp-badge-icon {
	width: 32px;
	height: 32px;
	color: var(--bp-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bp-badge-icon svg {
	width: 26px !important;
	height: 26px !important;
	max-width: 26px !important;
	max-height: 26px !important;
	stroke: var(--bp-gold) !important;
	stroke-width: 1.5;
}

.bp-badge-text {
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
}

.bp-btn-tan {
	background-color: var(--bp-tan);
	color: #ffffff !important;
	padding: 13px 28px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	display: inline-block;
	transition: background-color 0.2s ease, transform 0.2s ease;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.bp-btn-tan:hover {
	background-color: var(--bp-tan-hover);
	transform: translateY(-2px);
}

/* ==========================================================================
   5-STEP PROCESS SECTION ("Zo werkt het")
   ========================================================================== */
.bp-process-section {
	background-color: #ffffff;
	padding: 90px 60px;
	border-bottom: 1px solid var(--bp-border-color);
}

.bp-process-container {
	max-width: 1450px;
	margin: 0 auto;
	text-align: center;
}

.bp-process-title {
	font-family: var(--bp-font-heading);
	font-size: 44px;
	font-weight: 500;
	color: var(--bp-text-dark);
	margin: 0 0 60px 0;
}

.bp-process-grid {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.bp-process-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 8px;
}

.bp-step-icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background-color: var(--bp-bg-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-green-dark);
	margin-bottom: 20px;
}

.bp-step-icon svg {
	width: 26px !important;
	height: 26px !important;
	max-width: 26px !important;
	max-height: 26px !important;
	stroke: var(--bp-green-dark) !important;
}

.bp-step-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.bp-step-num {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--bp-tan);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bp-step-name {
	font-size: 17px;
	font-weight: 700;
	color: var(--bp-text-dark);
	margin: 0;
}

.bp-step-desc {
	font-size: 14px;
	line-height: 1.5;
	color: var(--bp-text-muted);
	margin: 0;
	max-width: 200px;
}

.bp-process-connector {
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}

.bp-process-connector svg {
	width: 40px;
	height: 12px;
}

/* ==========================================================================
   REVIEWS SECTION ("Wat onze klanten zeggen")
   ========================================================================== */
.bp-reviews-section {
	background-color: var(--bp-bg-light);
	padding: 90px 60px;
}

.bp-reviews-container {
	max-width: 1450px;
	margin: 0 auto;
}

.bp-reviews-title {
	font-family: var(--bp-font-heading);
	font-size: 44px;
	font-weight: 500;
	color: var(--bp-text-dark);
	text-align: center;
	margin: 0 0 56px 0;
}

.bp-reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.bp-review-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 36px 32px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.bp-review-stars {
	color: var(--bp-gold);
	font-size: 20px;
	letter-spacing: 2px;
	margin-bottom: 16px;
}

.bp-review-quote {
	font-size: 15px;
	line-height: 1.6;
	color: var(--bp-text-dark);
	font-style: italic;
	margin: 0 0 24px 0;
}

.bp-review-author {
	font-size: 14px;
	font-weight: 700;
	color: var(--bp-green-dark);
	margin: 0;
}

/* ==========================================================================
   BLOG / KENNIS & INSPIRATIE SECTION
   ========================================================================== */
.bp-blog-section {
	background-color: var(--bp-bg-light);
	padding: 90px 60px;
	border-top: 1px solid var(--bp-border-color);
}

.bp-blog-container {
	max-width: 1450px;
	margin: 0 auto;
}

.bp-blog-header {
	text-align: center;
	margin-bottom: 50px;
}

.bp-blog-section-title {
	font-family: var(--bp-font-heading);
	font-size: 46px;
	font-weight: 500;
	color: var(--bp-green-dark);
	margin: 0;
}

.bp-accent-gold {
	font-family: var(--bp-font-heading);
	font-style: italic;
	color: var(--bp-tan);
	font-weight: 400;
}

.bp-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.bp-blog-card {
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.bp-blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.bp-blog-img-wrap {
	width: 100%;
	height: 200px;
	overflow: hidden;
}

.bp-blog-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.bp-blog-card:hover .bp-blog-img {
	transform: scale(1.04);
}

.bp-blog-content {
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.bp-blog-title {
	font-family: var(--bp-font-heading);
	font-size: 24px;
	font-weight: 600;
	color: var(--bp-green-dark);
	margin: 0 0 12px 0;
	line-height: 1.25;
}

.bp-blog-excerpt {
	font-size: 14px;
	line-height: 1.55;
	color: var(--bp-text-muted);
	margin: 0 0 20px 0;
	flex-grow: 1;
}

.bp-blog-link {
	font-size: 14px;
	font-weight: 700;
	color: var(--bp-green-dark);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: gap 0.2s ease;
}

.bp-blog-link:hover {
	gap: 8px;
}

/* ==========================================================================
   DARK GREEN FOOTER SECTION (4 COLUMNS)
   ========================================================================== */
.bp-footer {
	background-color: var(--bp-green-dark);
	color: #ffffff;
	padding: 80px 60px 30px 60px;
}

.bp-footer-container {
	max-width: 1450px;
	margin: 0 auto;
}

.bp-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 48px;
	margin-bottom: 60px;
}

.bp-footer-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	margin-bottom: 16px;
}

.bp-footer-logo-text {
	font-family: var(--bp-font-body);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 2px;
	color: #ffffff;
}

.bp-footer-desc {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 24px 0;
}

.bp-footer-socials {
	display: flex;
	gap: 12px;
}

.bp-social-ic {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.bp-social-ic:hover {
	background-color: var(--bp-tan);
	transform: translateY(-2px);
}

.bp-social-ic svg {
	width: 18px;
	height: 18px;
}

.bp-footer-title {
	font-family: var(--bp-font-body);
	font-size: 17px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 20px 0;
}

.bp-footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bp-footer-links a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s ease;
}

.bp-footer-links a:hover {
	color: var(--bp-gold);
}

.bp-footer-contact {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bp-footer-contact li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
}

.bp-footer-contact svg {
	width: 18px;
	height: 18px;
	stroke: var(--bp-gold);
	flex-shrink: 0;
}

.bp-footer-contact a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color 0.2s ease;
}

.bp-footer-contact a:hover {
	color: #ffffff;
}

.bp-footer-cta-desc {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 20px 0;
}

.bp-btn-tan-footer {
	background-color: var(--bp-tan);
	color: #ffffff !important;
	padding: 12px 24px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	display: inline-block;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.bp-btn-tan-footer:hover {
	background-color: var(--bp-tan-hover);
	transform: translateY(-2px);
}

.bp-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 24px;
	text-align: center;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   INTERACTIVE PRODUCT CONFIGURATOR STYLES
   ========================================================================== */
.bp-configurator-wrapper {
	background-color: #ffffff;
	padding: 40px 20px 100px 20px;
}

.bp-configurator-container {
	max-width: 1450px;
	margin: 0 auto;
}

.bp-config-breadcrumb {
	font-size: 14px;
	color: #666666;
	margin-bottom: 24px;
}

.bp-config-breadcrumb a {
	color: #666666;
	text-decoration: none;
}

.bp-config-breadcrumb-current {
	color: #1e1e1e;
	font-weight: 700;
}

.bp-configurator-grid {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 48px;
	align-items: start;
}

.bp-config-main-title {
	font-family: var(--bp-font-heading);
	font-size: 42px;
	font-weight: 500;
	color: #1e1e1e;
	margin: 0 0 10px 0;
}

.bp-config-main-desc {
	font-size: 15px;
	color: #666666;
	margin: 0 0 40px 0;
}

.bp-config-group {
	background: #ffffff;
	border: 1px solid #eae7df;
	border-radius: 12px;
	padding: 32px;
	margin-bottom: 32px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.01);
}

.bp-group-title {
	font-family: var(--bp-font-body);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #1e1e1e;
	margin: 0 0 24px 0;
	border-bottom: 2px solid var(--bp-gold);
	padding-bottom: 8px;
	display: inline-block;
}

.bp-subgroup {
	margin-bottom: 28px;
}

.bp-subgroup:last-child {
	margin-bottom: 0;
}

.bp-subgroup-label {
	font-size: 15px;
	font-weight: 600;
	color: #333333;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.bp-info-ic {
	font-size: 13px;
	color: #888888;
	cursor: pointer;
}

/* Button Options Grid (Breedte, Hoogte, Diepte) */
.bp-options-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.bp-opt-btn {
	position: relative;
	background: #ffffff;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	padding: 16px 24px;
	min-width: 110px;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.bp-opt-btn:hover {
	border-color: var(--bp-gold);
}

.bp-opt-btn.active {
	border-color: #143525;
	background-color: #fbfaf7;
}

.bp-opt-badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: #f0f0f0;
	color: #555555;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 12px;
	white-space: nowrap;
}

.bp-badge-std,
.bp-opt-btn.active .bp-opt-badge,
.bp-card-opt.active .bp-card-badge {
	background: #143525 !important;
	color: #ffffff !important;
}

.bp-opt-title {
	font-size: 16px;
	font-weight: 700;
	color: #1e1e1e;
}

/* Visual Card Options Grid (Bekleding, Dak, Extra's) */
.bp-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.bp-cards-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.bp-cards-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.bp-cards-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* Visual Card Options Grid (Bekleding, Dak, Extra's) - NO PURPLE OVERLAY */
.bp-card-opt,
button.bp-card-opt {
	position: relative;
	background-color: #ffffff !important;
	border: 2px solid #e0e0e0 !important;
	border-radius: 10px !important;
	padding: 12px !important;
	text-align: center !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	outline: none !important;
	box-shadow: none !important;
	color: #1e1e1e !important;
}

.bp-card-opt:hover,
button.bp-card-opt:hover {
	border-color: var(--bp-gold) !important;
	background-color: #ffffff !important;
	outline: none !important;
	box-shadow: none !important;
}

.bp-card-opt.active,
button.bp-card-opt.active,
.bp-card-opt:focus,
button.bp-card-opt:focus,
.bp-card-opt:active,
button.bp-card-opt:active {
	border-color: #143525 !important;
	background-color: #fbfaf7 !important;
	color: #1e1e1e !important;
	outline: none !important;
	box-shadow: 0 0 0 1px #143525 !important;
}

.bp-opt-btn,
button.bp-opt-btn {
	position: relative;
	background-color: #ffffff !important;
	border: 2px solid #e0e0e0 !important;
	border-radius: 8px !important;
	padding: 16px 24px !important;
	min-width: 110px !important;
	text-align: center !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	outline: none !important;
	box-shadow: none !important;
	color: #1e1e1e !important;
}

.bp-opt-btn:hover,
button.bp-opt-btn:hover {
	border-color: var(--bp-gold) !important;
	background-color: #ffffff !important;
	outline: none !important;
	box-shadow: none !important;
}

.bp-opt-btn.active,
button.bp-opt-btn.active,
.bp-opt-btn:focus,
button.bp-opt-btn:focus,
.bp-opt-btn:active,
button.bp-opt-btn:active {
	border-color: #143525 !important;
	background-color: #fbfaf7 !important;
	color: #1e1e1e !important;
	outline: none !important;
	box-shadow: 0 0 0 1px #143525 !important;
}


.bp-card-badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: #f0f0f0;
	color: #555555;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 12px;
	white-space: nowrap;
	z-index: 5;
}

.bp-card-img {
	width: 100%;
	height: 100px;
	border-radius: 6px;
	background-size: cover;
	background-position: center;
	margin-bottom: 10px;
}

.bp-img-no {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	background: #f4f4f4;
}

.bp-card-title {
	font-size: 13px;
	font-weight: 600;
	color: #1e1e1e;
	line-height: 1.3;
}

.bp-card-title small {
	font-weight: 400;
	color: #666666;
}

/* Sticky SAMENSTELLING Sidebar (Right Column) */
.bp-config-right {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 30px !important;
	align-self: start !important;
	z-index: 100 !important;
}

.bp-samenstelling-card {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 14px;
	padding: 28px 24px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}


.bp-sam-title {
	font-family: var(--bp-font-body);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #1e1e1e;
	margin: 0 0 24px 0;
	border-bottom: 2px solid var(--bp-gold);
	padding-bottom: 8px;
}

.bp-sam-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
}

.bp-sam-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	font-size: 14px;
	color: #444444;
}

.bp-sam-row-base {
	font-weight: 700;
	font-size: 15px;
	color: #1e1e1e;
	border-bottom: 1px dashed #e0e0e0;
	padding-bottom: 10px;
	margin-bottom: 4px;
}

.bp-sam-label {
	line-height: 1.4;
	max-width: 250px;
}

.bp-sam-price {
	font-weight: 700;
	color: #1e1e1e;
	white-space: nowrap;
}

.bp-sam-divider {
	height: 1px;
	background: #e5e5e5;
	margin: 20px 0;
}

.bp-sam-subtitle {
	font-family: var(--bp-font-body);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #666666;
	margin: 0 0 12px 0;
}

.bp-sam-total-row {
	margin-top: 10px;
	align-items: center;
}

.bp-sam-total-label {
	font-size: 18px;
	font-weight: 800;
	color: #1e1e1e;
}

.bp-sam-total-val {
	font-size: 24px;
	font-weight: 800;
	color: var(--bp-green-dark);
}

.bp-sam-shipping-note {
	font-size: 12px;
	color: #777777;
	margin: 8px 0 24px 0;
}

.bp-btn-sam-submit {
	width: 100%;
	background-color: var(--bp-tan);
	color: #ffffff;
	border: none;
	padding: 16px 20px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
	box-shadow: 0 4px 14px rgba(200, 153, 85, 0.4);
}

.bp-btn-sam-submit:hover {
	background-color: var(--bp-tan-hover);
	transform: translateY(-2px);
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
	.bp-split-section {
		grid-template-columns: 1fr;
	}
	.bp-split-text-col {
		padding: 60px 40px;
	}
	.bp-process-grid {
		flex-direction: column;
		gap: 40px;
	}
	.bp-process-connector {
		display: none;
	}
	.bp-reviews-grid {
		grid-template-columns: 1fr;
	}
	.bp-footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.bp-blog-grid {
		grid-template-columns: 1fr;
	}
	.bp-configurator-grid {
		grid-template-columns: 1fr;
	}
	.bp-samenstelling-card {
		position: static;
	}
}


/* ==========================================================================
   SINGLE BLOG POST PAGE STYLES
   ========================================================================== */
.bp-single-post-wrapper {
	background-color: #fbfbfa;
}

.bp-single-hero {
	background-color: var(--bp-green-dark);
	color: #ffffff;
	padding: 60px 20px 90px 20px;
	text-align: center;
}

.bp-single-hero-container {
	max-width: 1280px;
	margin: 0 auto;
}

.bp-single-breadcrumb {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 24px;
}

.bp-single-breadcrumb a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color 0.2s ease;
}

.bp-single-breadcrumb a:hover {
	color: #ffffff;
}

.bp-single-breadcrumb-current {
	color: #ffffff;
	font-weight: 600;
}

.bp-single-badge-tag {
	background-color: var(--bp-gold);
	color: #ffffff;
	display: inline-block;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.bp-single-title {
	font-family: var(--bp-font-heading);
	font-size: 46px;
	font-weight: 700;
	line-height: 1.25;
	color: #ffffff;
	margin: 0 0 24px 0;
}

.bp-single-meta {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.85);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
}

.bp-meta-author strong {
	color: #ffffff;
}

.bp-meta-dot {
	opacity: 0.5;
}

.bp-single-featured-container {
	max-width: 1280px;
	margin: -60px auto 50px auto;
	padding: 0 20px;
	position: relative;
	z-index: 10;
}

.bp-single-featured-img {
	width: 100%;
	height: 480px;
	border-radius: 16px;
	background-size: cover;
	background-position: center;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.bp-single-content-container {
	max-width: 1280px;
	margin: 0 auto 80px auto;
	padding: 0 20px;
}


.bp-single-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 48px;
	align-items: start;
}

.bp-single-article {
	background: #ffffff;
	border-radius: 16px;
	padding: 48px;
	border: 1px solid #eaeaea;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);
}

.bp-lead {
	font-size: 20px;
	line-height: 1.65;
	font-weight: 500;
	color: #2c3e50;
	margin-bottom: 32px;
	border-left: 4px solid var(--bp-gold);
	padding-left: 20px;
}

.bp-single-entry-content h2 {
	font-family: var(--bp-font-heading);
	font-size: 28px;
	font-weight: 700;
	color: var(--bp-green-dark);
	margin: 40px 0 16px 0;
	line-height: 1.3;
}

.bp-single-entry-content p {
	font-size: 16px;
	line-height: 1.8;
	color: #444444;
	margin-bottom: 24px;
}

.bp-single-entry-content ul {
	margin: 0 0 24px 20px;
	padding: 0;
}

.bp-single-entry-content li {
	font-size: 16px;
	line-height: 1.8;
	color: #444444;
	margin-bottom: 10px;
}

.bp-quote {
	background: #f9f8f4;
	border-left: 4px solid var(--bp-gold);
	padding: 24px 28px;
	margin: 36px 0;
	border-radius: 0 12px 12px 0;
	font-family: var(--bp-font-heading);
	font-size: 22px;
	font-style: italic;
	color: var(--bp-green-dark);
	line-height: 1.5;
}

.bp-compare-table {
	width: 100%;
	border-collapse: collapse;
	margin: 32px 0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.bp-compare-table th {
	background-color: var(--bp-green-dark);
	color: #ffffff;
	padding: 16px 20px;
	text-align: left;
	font-size: 15px;
	font-weight: 700;
}

.bp-compare-table td {
	padding: 14px 20px;
	border-bottom: 1px solid #e5e5e5;
	font-size: 15px;
	color: #333333;
}

.bp-compare-table tr:nth-child(even) {
	background-color: #fcfcfc;
}

.bp-single-cta-box {
	background: linear-gradient(135deg, var(--bp-green-dark) 0%, #1d4d36 100%);
	color: #ffffff;
	border-radius: 14px;
	padding: 36px;
	margin-top: 48px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.bp-cta-content h3 {
	font-family: var(--bp-font-heading);
	font-size: 24px;
	color: #ffffff;
	margin: 0 0 10px 0;
}

.bp-cta-content p {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	line-height: 1.5;
}

.bp-single-cta-box .bp-btn-gold,
.bp-single-cta-box a {
	background-color: var(--bp-tan) !important;
	color: #ffffff !important;
	padding: 14px 26px !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	display: inline-block !important;
	white-space: nowrap !important;
	box-shadow: 0 4px 14px rgba(200, 153, 85, 0.4) !important;
	transition: background-color 0.2s ease, transform 0.2s ease !important;
	flex-shrink: 0 !important;
}

.bp-single-cta-box .bp-btn-gold:hover,
.bp-single-cta-box a:hover {
	background-color: var(--bp-tan-hover) !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
}


.bp-author-box {
	display: flex;
	gap: 20px;
	align-items: center;
	background: #f9f9f9;
	padding: 24px;
	border-radius: 12px;
	margin-top: 40px;
	border: 1px solid #eeeeee;
}

.bp-author-avatar {
	font-size: 32px;
	background: #ffffff;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.bp-author-info h4 {
	font-size: 16px;
	font-weight: 700;
	color: #1e1e1e;
	margin: 0 0 6px 0;
}

.bp-author-info p {
	font-size: 14px;
	color: #666666;
	margin: 0;
	line-height: 1.5;
}

.bp-single-sidebar {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.bp-widget-card {
	background: #ffffff;
	border-radius: 14px;
	padding: 28px;
	border: 1px solid #e0e0e0;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

/* Global Gold CTA Button */
.bp-btn-gold,
a.bp-btn-gold {
	background-color: var(--bp-tan) !important;
	color: #ffffff !important;
	padding: 12px 24px !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	display: inline-block !important;
	white-space: nowrap !important;
	box-shadow: 0 4px 14px rgba(200, 153, 85, 0.4) !important;
	transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.bp-btn-gold:hover,
a.bp-btn-gold:hover {
	background-color: var(--bp-tan-hover) !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
}

.bp-blog-link,
a.bp-blog-link {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--bp-green-dark) !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	transition: all 0.2s ease !important;
}

.bp-blog-link:hover,
a.bp-blog-link:hover {
	color: var(--bp-gold) !important;
	gap: 8px !important;
}

.bp-widget-title {

	font-family: var(--bp-font-heading);
	font-size: 22px;
	font-weight: 700;
	color: var(--bp-green-dark);
	margin: 0 0 16px 0;
	border-bottom: 2px solid var(--bp-gold);
	padding-bottom: 8px;
}

.bp-widget-desc {
	font-size: 14px;
	line-height: 1.6;
	color: #555555;
	margin: 0 0 16px 0;
}

.bp-widget-usps {
	list-style: none;
	padding: 0;
	margin: 0;
}

.bp-widget-usps li {
	font-size: 14px;
	color: #333333;
	font-weight: 600;
	margin-bottom: 10px;
}

.bp-widget-model-item {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}

.bp-widget-model-item:last-child {
	border-bottom: none;
}

.bp-model-mini-img {
	width: 70px;
	height: 70px;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}

.bp-model-mini-info h4 {
	font-size: 16px;
	font-weight: 700;
	color: #1e1e1e;
	margin: 0 0 4px 0;
}

.bp-model-mini-price {
	display: block;
	font-size: 13px;
	color: #666666;
	margin-bottom: 6px;
}

.bp-link-arrow {
	font-size: 13px;
	font-weight: 700;
	color: var(--bp-green-dark);
	text-decoration: none;
	transition: color 0.2s ease;
}

.bp-link-arrow:hover {
	color: var(--bp-gold);
}

.bp-single-related-section {
	background-color: #f4f4f4;
	padding: 70px 0;
	border-top: 1px solid #eaeaea;
}

.bp-single-related-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
}

.bp-related-title {
	font-family: var(--bp-font-heading);
	font-size: 32px;
	font-weight: 700;
	color: var(--bp-green-dark);
	text-align: center;
	margin: 0 0 40px 0;
}

@media (max-width: 900px) {
	.bp-single-title {
		font-size: 32px;
	}
	.bp-single-grid {
		grid-template-columns: 1fr;
	}
	.bp-single-featured-img {
		height: 300px;
	}
}

/* ==========================================================================
   BLOG ARCHIVE / OVERVIEW PAGE STYLES
   ========================================================================== */
/* Ensure seamless grey background for blog archive page down to footer */
body.blog,
body.blog #content,
body.blog .site-content,
body.blog main,
body.archive,
body.archive #content,
body.archive .site-content,
body.archive main {
	background-color: #fbfbfa !important;
}

.bp-archive-wrapper {
	background-color: #fbfbfa !important;
	padding-bottom: 60px !important;
}

.bp-archive-hero {
	background-color: var(--bp-green-dark);
	color: #ffffff;
	padding: 60px 20px 90px 20px;
	text-align: center;
}

.bp-archive-hero-container {
	max-width: 1280px;
	margin: 0 auto;
}

.bp-archive-title {
	font-family: var(--bp-font-heading);
	font-size: 48px;
	font-weight: 700;
	color: #ffffff;
	margin: 16px 0;
	line-height: 1.2;
}

.bp-archive-desc {
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	max-width: 720px;
	margin: 0 auto;
}

.bp-archive-main-container {
	max-width: 1280px;
	margin: 0 auto !important;
	padding: 0 20px 80px 20px !important;
	background-color: #fbfbfa !important;
}


/* Filter & Search Bar */
.bp-filter-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin: -40px auto 50px auto;
	background: #ffffff;
	padding: 16px 24px;
	border-radius: 14px;
	border: 1px solid #e0e0e0;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;
	flex-wrap: wrap;
}

.bp-filter-tabs {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.bp-filter-btn {
	background: #f4f4f4;
	border: 1px solid #e2e2e2;
	color: #444444;
	padding: 10px 20px;
	border-radius: 30px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.bp-filter-btn.active,
.bp-filter-btn:hover {
	background: var(--bp-green-dark) !important;
	color: #ffffff !important;
	border-color: var(--bp-green-dark) !important;
}

.bp-search-box input {
	border: 1px solid #e0e0e0;
	border-radius: 30px;
	padding: 10px 20px;
	font-size: 14px;
	outline: none;
	width: 260px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bp-search-box input:focus {
	border-color: var(--bp-gold);
	box-shadow: 0 0 0 3px rgba(200, 153, 85, 0.15);
}

/* Featured Post Card */
.bp-featured-post-card {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #eaeaea;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
	margin-bottom: 60px;
}

.bp-featured-img-col {
	min-height: 400px;
	background-size: cover;
	background-position: center;
	position: relative;
}

.bp-featured-badge {
	position: absolute;
	top: 20px;
	left: 20px;
	background-color: var(--bp-gold);
	color: #ffffff;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.bp-featured-content-col {
	padding: 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bp-featured-title {
	font-family: var(--bp-font-heading);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.25;
	margin: 12px 0 16px 0;
}

.bp-featured-title a {
	color: var(--bp-green-dark);
	text-decoration: none;
	transition: color 0.2s ease;
}

.bp-featured-title a:hover {
	color: var(--bp-gold);
}

.bp-featured-excerpt {
	font-size: 16px;
	line-height: 1.65;
	color: #555555;
	margin-bottom: 28px;
}

.bp-featured-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid #f0f0f0;
	flex-wrap: wrap;
}

.bp-meta-info {
	font-size: 13px;
	color: #777777;
}

/* Blog Grid Card Extra Styles */
.bp-section-subtitle {
	font-family: var(--bp-font-heading);
	font-size: 32px;
	font-weight: 700;
	color: var(--bp-green-dark);
	margin-bottom: 32px;
}

.bp-card-footer-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #f0f0f0;
}

.bp-blog-date {
	font-size: 13px;
	color: #888888;
}

.bp-blog-category {
	font-size: 12px;
	font-weight: 800;
	color: var(--bp-gold);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 8px;
}

/* Pagination */
.bp-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 60px;
}

.bp-page-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #e0e0e0;
	color: #333333;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s ease;
}

.bp-page-num.active,
.bp-page-num:hover {
	background: var(--bp-green-dark);
	color: #ffffff;
	border-color: var(--bp-green-dark);
}

.bp-page-next {
	display: inline-flex;
	align-items: center;
	padding: 0 24px;
	height: 44px;
	border-radius: 30px;
	background: #ffffff;
	border: 1px solid #e0e0e0;
	color: var(--bp-green-dark);
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s ease;
}

.bp-page-next:hover {
	background: var(--bp-gold);
	color: #ffffff;
	border-color: var(--bp-gold);
}


/* ==========================================================================
   CONTACT & OFFERTE AANVRAAG PAGE STYLES
   ========================================================================== */
.bp-contact-wrapper {
	background-color: #fbfbfa !important;
}

.bp-contact-hero {
	background-color: var(--bp-green-dark);
	color: #ffffff;
	padding: 60px 20px 90px 20px;
	text-align: center;
}

.bp-contact-hero-container {
	max-width: 1280px;
	margin: 0 auto;
}

.bp-contact-hero-title {
	font-family: var(--bp-font-heading);
	font-size: 46px;
	font-weight: 700;
	color: #ffffff;
	margin: 16px 0;
	line-height: 1.25;
}

.bp-contact-hero-desc {
	font-size: 18px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
	max-width: 760px;
	margin: 0 auto;
}

.bp-contact-main-container {
	max-width: 1280px;
	margin: 0 auto !important;
	padding: 0 20px 80px 20px !important;
	background-color: #fbfbfa !important;
}

.bp-contact-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 48px;
	align-items: start;
	margin-top: -40px;
}

.bp-contact-form-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 44px;
	border: 1px solid #e0e0e0;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
	position: relative;
	z-index: 10;
}

.bp-form-section {
	margin-bottom: 32px;
	padding-bottom: 28px;
	border-bottom: 1px solid #f0f0f0;
}

.bp-form-section:last-of-type {
	border-bottom: none;
}

.bp-form-section-title {
	font-family: var(--bp-font-heading);
	font-size: 24px;
	font-weight: 700;
	color: var(--bp-green-dark);
	margin: 0 0 20px 0;
	display: flex;
	align-items: center;
	gap: 12px;
}

.bp-step-num {
	background: var(--bp-green-dark);
	color: #ffffff;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 800;
	font-family: var(--bp-font-body);
}

.bp-type-selector {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.bp-type-pill {
	background: #f5f5f5;
	border: 2px solid #e0e0e0;
	padding: 14px 18px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: #333333;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 10px;
}

.bp-type-pill input[type="radio"] {
	accent-color: var(--bp-green-dark);
}

.bp-type-pill.active,
.bp-type-pill:hover {
	border-color: var(--bp-green-dark);
	background: #fbfaf7;
	color: var(--bp-green-dark);
}

.bp-form-row-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: 12px;
}

.bp-form-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}

.bp-form-field label {
	font-size: 14px;
	font-weight: 700;
	color: #1e1e1e;
}

.bp-form-field label small {
	font-weight: 400;
	color: #666666;
}

.bp-req {
	color: #e74c3c;
}

.bp-form-field input[type="text"],
.bp-form-field input[type="email"],
.bp-form-field input[type="tel"],
.bp-select-input,
.bp-form-field textarea {
	background: #ffffff;
	border: 1px solid #d0d0d0;
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 15px;
	color: #333333;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	width: 100%;
}

.bp-form-field input:focus,
.bp-select-input:focus,
.bp-form-field textarea:focus {
	border-color: var(--bp-gold);
	box-shadow: 0 0 0 3px rgba(200, 153, 85, 0.15);
}

.bp-file-input {
	padding: 10px;
	background: #f9f9f9;
	border: 1px dashed #cccccc;
	border-radius: 8px;
	cursor: pointer;
}

.bp-form-submit-row {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.bp-btn-contact-submit {
	font-size: 17px !important;
	padding: 16px 36px !important;
	cursor: pointer;
}

.bp-form-privacy-note {
	font-size: 13px;
	color: #777777;
	margin: 0;
}

.bp-contact-sidebar {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-top: -40px;
}

.bp-contact-info-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 32px;
	border: 1px solid #e0e0e0;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}

.bp-contact-detail-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bp-contact-detail-list li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.bp-detail-icon {
	width: 44px;
	height: 44px;
	background: #f4f4f4;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.bp-contact-detail-list strong {
	display: block;
	font-size: 15px;
	color: #1e1e1e;
}

.bp-contact-detail-list a {
	color: var(--bp-green-dark);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
}

.bp-contact-detail-list small {
	display: block;
	font-size: 13px;
	color: #777777;
	margin-top: 2px;
}

.bp-mini-faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 12px;
}

.bp-faq-item {
	border-bottom: 1px solid #eeeeee;
	padding-bottom: 12px;
}

.bp-faq-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.bp-faq-item summary {
	font-weight: 700;
	font-size: 14px;
	color: #1e1e1e;
	cursor: pointer;
	outline: none;
}

.bp-faq-item p {
	font-size: 13px;
	color: #555555;
	margin: 8px 0 0 0;
	line-height: 1.5;
}

.bp-form-success-box {
	background: #fbfaf7;
	border: 2px solid #143525;
	border-radius: 14px;
	padding: 40px;
	text-align: center;
	margin-bottom: 30px;
}

.bp-success-ic {
	width: 60px;
	height: 60px;
	background: #143525;
	color: #ffffff;
	font-size: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px auto;
}

/* ==========================================================================
   ELEMENTOR WIDGET STYLING OVERRIDES FOR BIKEPORT
   ========================================================================== */
.elementor-widget-heading.bp-hero-title .elementor-heading-title {
	font-family: var(--bp-font-heading) !important;
	font-size: 52px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	line-height: 1.2 !important;
}

.elementor-widget-text-editor.bp-hero-subtitle .elementor-text-editor {
	font-size: 19px !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.9) !important;
}

.elementor-widget-button.bp-btn-primary a.elementor-button {
	background-color: var(--bp-tan) !important;
	color: #ffffff !important;
	padding: 16px 32px !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	font-size: 16px !important;
}

.elementor-widget-button.bp-btn-secondary a.elementor-button {
	background-color: transparent !important;
	color: #ffffff !important;
	border: 2px solid #ffffff !important;
	padding: 14px 28px !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	font-size: 16px !important;
}

.elementor-widget-button.bp-btn-checkout a.elementor-button {
	background-color: var(--bp-green-dark) !important;
	color: #ffffff !important;
	padding: 12px 24px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
}

.elementor-widget-heading.bp-section-title .elementor-heading-title {
	font-family: var(--bp-font-heading) !important;
	font-size: 38px !important;
	font-weight: 700 !important;
	color: var(--bp-green-dark) !important;
}

.elementor-widget-heading.bp-contact-hero-title .elementor-heading-title {
	font-family: var(--bp-font-heading) !important;
	font-size: 46px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
}

/* ==========================================================================
   SLEEK & MODERN BIKEPORT CONTACT & OFFERTE FORM STYLES
   ========================================================================== */
.bp-contact-wrapper {
	background-color: #fbfbfa !important;
}

.bp-contact-hero,
.elementor-section.bp-contact-hero,
.elementor-element.bp-contact-hero {
	background-color: #143525 !important;
	color: #ffffff !important;
	padding: 75px 20px 145px 20px !important;
	text-align: center !important;
	position: relative !important;
	z-index: 1 !important;
	width: 100% !important;
	margin: 0 !important;
}

.bp-contact-hero-container {
	max-width: 1280px;
	margin: 0 auto;
}

/* Gold Pill Badge Tag - Centered Pill Only (DO NOT STRETCH FULL WIDTH!) */
.elementor-widget-heading.bp-single-badge-tag,
.elementor-element.bp-single-badge-tag,
.bp-single-badge-tag {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	max-width: 100% !important;
	/* De onderrand zat hier vast op 18px met !important, waardoor elke poging
	   om de ruimte onder de pil te regelen verderop in dit bestand geen effect
	   had. Alleen het centreren blijft hier staan. */
	margin-left: auto !important;
	margin-right: auto !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.elementor-widget-heading.bp-single-badge-tag .elementor-heading-title,
.elementor-element.bp-single-badge-tag .elementor-heading-title,
.bp-single-badge-tag .elementor-heading-title,
span.bp-single-badge-tag,
div.bp-single-badge-tag > span {
	display: inline-block !important;
	width: auto !important;
	max-width: fit-content !important;
	background-color: #c89955 !important;
	color: #ffffff !important;
	border-radius: 20px !important;
	padding: 6px 20px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	margin: 0 auto !important;
	text-align: center !important;
}

.bp-contact-hero-title {
	font-family: var(--bp-font-heading), 'Cormorant Garamond', serif !important;
	font-size: 46px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	margin: 16px auto !important;
	line-height: 1.25 !important;
	text-align: center !important;
}

.bp-contact-hero-desc {
	font-size: 18px !important;
	line-height: 1.65 !important;
	color: rgba(255, 255, 255, 0.88) !important;
	max-width: 760px !important;
	margin: 0 auto !important;
	text-align: center !important;
}

.bp-contact-main-container,
.elementor-section.bp-contact-main-container,
.elementor-element.bp-contact-main-container {
	max-width: 1280px !important;
	margin: -95px auto 80px auto !important;
	padding: 0 20px !important;
	background-color: transparent !important;
	position: relative !important;
	z-index: 10 !important;
}

.bp-contact-grid,
.elementor-section.bp-contact-grid,
.elementor-element.bp-contact-grid {
	display: grid !important;
	grid-template-columns: 2fr 1fr !important;
	gap: 36px !important;
	align-items: start !important;
	position: relative !important;
	z-index: 10 !important;
}

/* Form Card with white background and rounded corners overlaying hero */
.bp-contact-form-card,
.elementor-column.bp-contact-form-card,
.elementor-column.bp-contact-form-card > .elementor-widget-wrap,
.elementor-column.bp-contact-form-card > .elementor-element-populated,
.elementor-widget-html .bp-contact-form-card {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border-radius: 16px !important;
	padding: 44px !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 16px 45px rgba(0, 0, 0, 0.08) !important;
	position: relative !important;
	z-index: 10 !important;
}



.bp-form-section {
	margin-bottom: 32px;
	padding-bottom: 28px;
	border-bottom: 1px solid #f1f5f9;
}

.bp-form-section:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.bp-form-section-title {
	font-family: var(--bp-font-heading), 'Cormorant Garamond', serif !important;
	font-size: 25px !important;
	font-weight: 700 !important;
	color: #143525 !important;
	margin: 0 0 20px 0 !important;
	display: flex;
	align-items: center;
	gap: 12px;
}

.bp-step-num {
	background: #143525 !important;
	color: #ffffff !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Radio Selector Pills */
.bp-type-selector {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.bp-type-pill {
	background: #f8fafc !important;
	border: 1.5px solid #e2e8f0 !important;
	padding: 14px 18px !important;
	border-radius: 10px !important;
	cursor: pointer !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #334155 !important;
	transition: all 0.2s ease !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.bp-type-pill input[type="radio"] {
	accent-color: #143525;
	width: 16px;
	height: 16px;
	margin: 0;
}

.bp-type-pill.active,
.bp-type-pill:hover {
	border-color: #143525 !important;
	background: #f0fdf4 !important;
	color: #143525 !important;
	box-shadow: 0 2px 8px rgba(39, 174, 96, 0.12) !important;
}

/* Form Fields */
.bp-form-row-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: 14px;
}

.bp-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

.bp-form-field label {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #1e293b !important;
}

.bp-form-field label small {
	font-weight: 400;
	color: #64748b;
}

.bp-req {
	color: #e74c3c;
}

.bp-form-field input[type="text"],
.bp-form-field input[type="email"],
.bp-form-field input[type="tel"],
.bp-select-input,
.bp-form-field textarea {
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	padding: 12px 16px !important;
	font-size: 15px !important;
	color: #0f172a !important;
	outline: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
	width: 100% !important;
	font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.bp-form-field input:focus,
.bp-select-input:focus,
.bp-form-field textarea:focus {
	border-color: #c89955 !important;
	box-shadow: 0 0 0 3px rgba(200, 153, 85, 0.18) !important;
}

.bp-form-submit-row {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.bp-btn-contact-submit {
	background: #c89955 !important;
	color: #ffffff !important;
	padding: 16px 36px !important;
	border-radius: 8px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	border: none !important;
	cursor: pointer !important;
	transition: background 0.2s ease, transform 0.2s ease !important;
	box-shadow: 0 4px 14px rgba(200, 153, 85, 0.35) !important;
}

.bp-btn-contact-submit:hover {
	background: #b58544 !important;
	transform: translateY(-2px) !important;
}

.bp-form-privacy-note {
	font-size: 13px;
	color: #64748b;
	margin: 0;
}

/* Sidebar Styles */
.bp-contact-sidebar {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.bp-contact-info-card {
	background: #ffffff !important;
	border-radius: 16px !important;
	padding: 34px !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

.bp-widget-title {
	font-family: var(--bp-font-heading), 'Cormorant Garamond', serif !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	color: #143525 !important;
	margin: 0 0 20px 0 !important;
	border-bottom: 2px solid #c89955 !important;
	padding-bottom: 8px !important;
}

.bp-contact-detail-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
}

.bp-contact-detail-list li {
	display: flex !important;
	gap: 16px !important;
	align-items: flex-start !important;
}

.bp-detail-icon {
	width: 44px !important;
	height: 44px !important;
	background: #f1f5f9 !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 18px !important;
	color: #143525 !important;
	flex-shrink: 0 !important;
}

.bp-contact-detail-list strong {
	display: block !important;
	font-size: 15px !important;
	color: #0f172a !important;
}

.bp-contact-detail-list a {
	color: #143525 !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	text-decoration: none !important;
}

.bp-contact-detail-list small {
	display: block !important;
	font-size: 13px !important;
	color: #64748b !important;
	margin-top: 2px !important;
}

.bp-widget-usps {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.bp-widget-usps li {
	font-size: 14px !important;
	color: #334155 !important;
	font-weight: 600 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.bp-check-ic {
	color: #143525 !important;
	font-weight: 800 !important;
}

.bp-form-success-box {
	background: #f0fdf4 !important;
	border: 2px solid #143525 !important;
	border-radius: 14px !important;
	padding: 40px !important;
	text-align: center !important;
	margin-bottom: 30px !important;
}

.bp-success-ic {
	width: 60px !important;
	height: 60px !important;
	background: #143525 !important;
	color: #ffffff !important;
	font-size: 32px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto 16px auto !important;
}

@media (max-width: 900px) {
	.bp-contact-grid {
		grid-template-columns: 1fr !important;
		margin-top: -30px !important;
	}
	.bp-type-selector,
	.bp-form-row-2 {
		grid-template-columns: 1fr !important;
	}
	.bp-contact-hero-title {
		font-size: 32px !important;
	}
}

/* ==========================================================================
   FULL VIEWPORT BACKGROUND SECTIONS WITH 1450px INNER CONTENT ALIGNMENT
   ========================================================================== */
html,
body {
	width: 100% !important;
	max-width: 100% !important;
	/* clip in plaats van hidden: hidden maakt van de body een scrollcontainer
	   (overflow-y springt dan naar auto), waardoor position:sticky aan de body
	   plakt in plaats van aan het scherm. De sticky samenstelling op de
	   productpagina werkte daardoor niet. clip knipt wél af zonder scroll. */
	overflow-x: clip !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Outer Sections (100% Full Width Backgrounds) */
.bp-elementor-content-container,
.elementor,
.elementor-28,
.elementor-page-28,
.elementor-section-wrap,
.elementor-top-section,
.elementor-top-section.elementor-section-full_width,
.elementor-top-section.elementor-section-boxed,
.elementor-section.bp-hero-sec,
#bp_hero_sec,
#bp-usps-bar-section,
#bp_modellen_header_sec,
#bp_modellen_grid_sec,
.bp-hero,
.bp-hero-slider,
.bp-usps-bar,
.bp-modellen-section {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
}

/* Hero Slider Section ONLY: 100% Full Viewport Container */
#bp_hero_sec > .elementor-container,
.elementor-section.bp-hero-sec > .elementor-container {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* 100% Viewport width for the hero background slides */
.bp-slide {
	width: 100% !important;
	height: 100% !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
}

.bp-slide-overlay {
	width: 100% !important;
	height: 100% !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
}

/* ALL INNER CONTENT CONTAINERS (USPs, Modellen, Header, Footer): STRICT 1450px CONTENT WIDTH + 60px PADDING */
.bp-header-container,
.bp-footer-container,
.bp-container,
.bp-hero-container,
.bp-slide-container,
.bp-modellen-container,
.bp-modellen-grid,
.bp-usps-grid,
#bp-usps-bar-section > .elementor-container,
#bp_modellen_header_sec > .elementor-container,
#bp_modellen_grid_sec > .elementor-container,
.elementor-section.bp-usps-bar > .elementor-container,
.elementor-section.bp-modellen-section > .elementor-container {
	max-width: 1450px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 60px !important;
	padding-right: 60px !important;
	box-sizing: border-box !important;
}





/* Reset Elementor column padding so text starts at the exact left edge of the 1450px container */
.elementor-column.bp-hero-col > .elementor-widget-wrap,
.elementor-column.bp-hero-col > .elementor-element-populated,
.bp-hero-col,
.bp-hero-content {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 580px !important;
}

/* Functional 2-Slide Hero Slider (Full-Width Viewport) */
.elementor-section.bp-hero-sec,
.bp-hero,
.bp-hero-slider {
	position: relative !important;
	height: 759px;
	max-height: 759px;
	min-height: 633px;
	width: 100% !important;
	overflow: hidden !important;
	background-color: #143525 !important;
}

.bp-slide {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	opacity: 0 !important;
	visibility: hidden !important;
	z-index: 1 !important;
	transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out !important;
	background-size: cover !important;
	background-position: center right !important;
	background-repeat: no-repeat !important;
	display: flex !important;
	align-items: center !important;
}

.bp-slide.active {
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 10 !important;
}

.bp-slide-overlay {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: linear-gradient(to right, rgba(10, 26, 18, 0.94) 0%, rgba(10, 26, 18, 0.72) 48%, rgba(0, 0, 0, 0.15) 100%) !important;
	z-index: 2 !important;
}

.bp-slide-container,
.bp-hero-container {
	position: relative !important;
	z-index: 5 !important;
	padding-top: 130px !important;
	padding-bottom: 50px !important;
}

.bp-hero-content {
	max-width: 540px !important;
}

.bp-hero-title {
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-size: 54px !important;
	line-height: 1.12 !important;
	font-weight: 500 !important;
	color: #ffffff !important;
	margin: 0 0 16px 0 !important;
	padding: 0 !important;
	letter-spacing: -0.5px !important;
	text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}

.bp-hero-title em.bp-accent {
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-style: italic !important;
	color: #e2b774 !important;
	font-weight: 400 !important;
}

.bp-hero-subtitle {
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-size: 16.5px !important;
	line-height: 1.55 !important;
	color: rgba(255, 255, 255, 0.92) !important;
	margin: 0 0 28px 0 !important;
	font-weight: 400 !important;
	max-width: 480px !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.bp-hero-buttons {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	margin-bottom: 0 !important;
}

.bp-btn-green {
	background-color: #143525 !important;
	color: #ffffff !important;
	padding: 13px 28px !important;
	border-radius: 6px !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
	transition: all 0.25s ease !important;
}

.bp-btn-green:hover {
	background-color: #0b2117 !important;
	transform: translateY(-2px) !important;
}

.bp-btn-outline {
	background-color: rgba(255, 255, 255, 0.05) !important;
	color: #ffffff !important;
	padding: 13px 28px !important;
	border-radius: 6px !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
	backdrop-filter: blur(4px) !important;
	transition: all 0.25s ease !important;
}

.bp-btn-outline:hover {
	background-color: rgba(255, 255, 255, 0.18) !important;
	border-color: #ffffff !important;
	transform: translateY(-2px) !important;
}

/* Sleek Slider Bullets Positioning (Aligned with 60px Container Margin) */
.bp-slider-bullets-container {
	position: absolute !important;
	bottom: 35px !important;
	left: 0 !important;
	width: 100% !important;
	z-index: 30 !important;
	pointer-events: none !important;
}

.bp-slider-bullets-inner {
	max-width: 1450px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 60px !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	pointer-events: auto !important;
}

.bp-bullet {
	width: 12px !important;
	height: 6px !important;
	border-radius: 3px !important;
	background: rgba(255, 255, 255, 0.35) !important;
	border: none !important;
	padding: 0 !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	outline: none !important;
}

.bp-bullet.active {
	width: 32px !important;
	background: #e2b774 !important;
	box-shadow: 0 0 10px rgba(226, 183, 116, 0.5) !important;
}



/* 2. USPs Bar Section (Strict 1450px Content Width & Native Icon-Box Dividers) */
.bp-usps-bar,
#bp-usps-bar-section {
	width: 100% !important;
	max-width: 100% !important;
	background-color: #f2f2f1 !important;
	padding: 45px 0 !important;
}

#bp-usps-bar-section > .elementor-container,
.elementor-section.bp-usps-bar > .elementor-container,
.bp-usps-bar .bp-container,
.bp-usps-grid {
	max-width: 1450px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 60px !important;
	padding-right: 60px !important;
	box-sizing: border-box !important;
}

#bp-usps-bar-section .elementor-column {
	border-right: 1px solid #e2e8f0 !important;
	padding: 10px 25px !important;
	box-sizing: border-box !important;
}

#bp-usps-bar-section .elementor-column:last-child {
	border-right: none !important;
}

#bp-usps-bar-section .elementor-icon-box-wrapper {
	text-align: center !important;
}

#bp-usps-bar-section .elementor-icon-box-icon {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	margin-bottom: 14px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

#bp-usps-bar-section .elementor-icon-box-icon i,
#bp-usps-bar-section .elementor-icon-box-icon svg {
	color: #2d3748 !important;
	fill: #2d3748 !important;
	font-size: 28px !important;
	width: 28px !important;
	height: 28px !important;
}

#bp-usps-bar-section .elementor-icon-box-title,
#bp-usps-bar-section .elementor-icon-box-title span {
	font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #1e1e1e !important;
	margin-bottom: 0 !important;
	letter-spacing: -0.2px !important;
}

#bp-usps-bar-section .elementor-icon-box-description {
	font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
	font-size: 13px !important;
	color: #64748b !important;
	line-height: 1.45 !important;
	margin: 0 auto !important;
	max-width: 250px !important;
}

.bp-container {
	max-width: 1450px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 60px !important;
	box-sizing: border-box !important;
}

.bp-usps-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 0 !important;
	max-width: 1450px !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

.bp-usp-item {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	padding: 10px 25px !important;
	border-right: 1px solid #e2e8f0 !important;
}

.bp-usp-item:last-child {
	border-right: none !important;
}

/* ==========================================================================
   3. ONZE MODELLEN SECTION (ULTRA-PRECISION 100% MATCH TO REFERENCE SCREENSHOT)
   ========================================================================== */
.bp-modellen-section,
.bp-models-section,
#modellen,
#bp_modellen_header_sec,
#bp_modellen_grid_sec {
	width: 100% !important;
	max-width: 100% !important;
	background-color: #e9e9e8 !important;
}

#bp_modellen_header_sec,
.bp-models-section {
	padding-top: 85px !important;
	padding-bottom: 95px !important;
}

#bp_modellen_grid_sec {
	padding-top: 25px !important;
	padding-bottom: 95px !important;
}

#bp_modellen_header_sec > .elementor-container,
#bp_modellen_grid_sec > .elementor-container,
.bp-modellen-container,
.bp-models-section > .bp-container,
.bp-models-section .bp-container {
	max-width: 1450px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 60px !important;
	padding-right: 60px !important;
	box-sizing: border-box !important;
}

#bp_modellen_grid_sec > .elementor-container,
.bp-models-cards-grid {
	display: flex !important;
	flex-direction: row !important;
	gap: 36px !important;
	align-items: stretch !important;
	max-width: 1450px !important;
	width: 100% !important;
	margin: 0 auto !important;
}

#bp_modellen_grid_sec .elementor-column.elementor-col-50,
.bp-product-card {
	width: calc(50% - 18px) !important;
	display: flex !important;
	flex-direction: column !important;
	background: #ffffff !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04) !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease !important;
	padding: 0 !important;
	justify-content: space-between !important;
	box-sizing: border-box !important;
}

#bp_modellen_grid_sec .elementor-column.elementor-col-50 > .elementor-element-populated {
	background: #ffffff !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow: none !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	height: 100% !important;
	box-sizing: border-box !important;
}

#bp_modellen_grid_sec .elementor-column.elementor-col-50:hover,
.bp-product-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
}

/* Fixed 340px Image Height for BOTH cards - Neither card image can be taller */
#bp_modellen_grid_sec .elementor-widget-image,
#bp_modellen_grid_sec .elementor-widget-image .elementor-widget-container,
.bp-model-img-wrap,
.bp-card-img-wrap {
	width: 100% !important;
	height: 340px !important;
	max-height: 340px !important;
	min-height: 340px !important;
	overflow: hidden !important;
}

#bp_modellen_grid_sec .elementor-widget-image img,
.bp-model-img,
.bp-card-img-wrap img {
	width: 100% !important;
	height: 340px !important;
	max-height: 340px !important;
	min-height: 340px !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	border-radius: 16px 16px 0 0 !important;
}

/* Card Body & Title */
.bp-card-body {
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	flex-grow: 1 !important;
}

.elementor-element-bp_card_title_1 .elementor-heading-title,
.elementor-element-bp_card_title_2 .elementor-heading-title,
.bp-model-card-title,
.bp-card-title {
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-size: 28px !important;
	font-weight: 500 !important;
	color: #143525 !important;
	margin: 28px 0 10px 0 !important;
	text-align: center !important;
}

/* Card Description */
.elementor-element-bp_card_desc_1 .elementor-widget-container,
.elementor-element-bp_card_desc_2 .elementor-widget-container,
.bp-model-card-desc,
.bp-card-desc {
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: #64748b !important;
	margin: 0 auto 28px auto !important;
	max-width: 460px !important;
	text-align: center !important;
	padding: 0 35px !important;
	box-sizing: border-box !important;
}

/* Card Footer Row (Price Left, Button Right, Top Border Line) */
.elementor-element-bp_card_inner_sec_1,
.elementor-element-bp_card_inner_sec_2,
#bp_card_inner_sec_1,
#bp_card_inner_sec_2,
.bp-model-card-footer,
.bp-card-footer {
	border-top: 1px solid #f0f0f0 !important;
	margin-top: auto !important;
	margin-bottom: 25px !important;
	margin-left: 35px !important;
	margin-right: 35px !important;
	padding-top: 22px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: calc(100% - 70px) !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: center !important;
}

.elementor-element-bp_card_inner_sec_1 > .elementor-container,
.elementor-element-bp_card_inner_sec_2 > .elementor-container {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: center !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.elementor-element-bp_price_col_1,
.elementor-element-bp_price_col_2,
.elementor-column.bp_price_col_1,
.elementor-column.bp_price_col_2 {
	width: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

.elementor-element-bp_btn_col_1,
.elementor-element-bp_btn_col_2,
.elementor-column.bp_btn_col_1,
.elementor-column.bp_btn_col_2 {
	width: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
}

.elementor-element-bp_price_heading_1 .elementor-heading-title,
.elementor-element-bp_price_heading_2 .elementor-heading-title,
.bp-model-price,
.bp-card-price {
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-size: 22px !important;
	font-style: italic !important;
	color: #143525 !important;
	font-weight: 400 !important;
	margin: 0 !important;
	line-height: 1 !important;
}

.elementor-element-bp_btn_widget_1 .elementor-button,
.elementor-element-bp_btn_widget_2 .elementor-button,
.bp-btn-dark-green {
	background-color: #143525 !important;
	color: #ffffff !important;
	padding: 11px 24px !important;
	border-radius: 6px !important;
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.25s ease !important;
	border: none !important;
	margin: 0 !important;
}

.elementor-element-bp_btn_widget_1 .elementor-button:hover,
.elementor-element-bp_btn_widget_2 .elementor-button:hover,
.bp-btn-dark-green:hover {
	background-color: #0b2117 !important;
	transform: translateY(-2px) !important;
}




.bp-modellen-header {
	text-align: center !important;
	margin-bottom: 50px !important;
}

.bp-modellen-title {
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-size: 46px !important;
	font-weight: 500 !important;
	color: #143525 !important;
	margin: 0 0 10px 0 !important;
	letter-spacing: -0.5px !important;
}

.bp-modellen-subtitle {
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-size: 15px !important;
	color: #64748b !important;
	margin: 0 !important;
}

.bp-modellen-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 36px !important;
	max-width: 1450px !important;
	margin: 0 auto !important;
}


.bp-model-card {
	background: #ffffff !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04) !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease !important;
	display: flex !important;
	flex-direction: column !important;
}

.bp-model-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
}

.bp-model-img-wrap {
	width: 100% !important;
	height: 330px !important;
	overflow: hidden !important;
}

.bp-model-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.5s ease !important;
}

.bp-model-card:hover .bp-model-img {
	transform: scale(1.03) !important;
}

.bp-model-body {
	padding: 30px 32px 28px 32px !important;
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
}

.bp-model-card-title {
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-size: 28px !important;
	font-weight: 500 !important;
	color: #143525 !important;
	margin: 0 0 12px 0 !important;
	text-align: center !important;
}

.bp-model-card-desc {
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: #64748b !important;
	margin: 0 0 24px 0 !important;
	text-align: center !important;
}

.bp-model-card-footer {
	border-top: 1px solid #f0f0f0 !important;
	padding-top: 20px !important;
	margin-top: auto !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
}

.bp-model-price {
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-size: 22px !important;
	font-style: italic !important;
	color: #143525 !important;
	font-weight: 400 !important;
}

.bp-btn-dark-green {
	background-color: #143525 !important;
	color: #ffffff !important;
	padding: 11px 24px !important;
	border-radius: 6px !important;
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.25s ease !important;
}

.bp-btn-dark-green:hover {
	background-color: #0b2117 !important;
	transform: translateY(-2px) !important;
}




.bp-usp-item:last-child {
	border-right: none !important;
}

.bp-usp-icon {
	width: 52px !important;
	height: 52px !important;
	background-color: #f4f6f4 !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #143525 !important;
	margin-bottom: 14px !important;
	box-shadow: 0 4px 12px rgba(20, 53, 37, 0.06) !important;
}

.bp-usp-icon svg {
	width: 24px !important;
	height: 24px !important;
	stroke: #143525 !important;
	stroke-width: 2 !important;
}

.bp-usp-text strong {
	display: block !important;
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	color: #1e1e1e !important;
	margin-bottom: 5px !important;
	letter-spacing: -0.2px !important;
}

.bp-usp-text p {
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-size: 13px !important;
	color: #64748b !important;
	margin: 0 !important;
	line-height: 1.45 !important;
}



/* 3. Onze Modellen Section */
.bp-models-section {
	background-color: #e9e9e8 !important;
	padding: 85px 0 !important;
}

.bp-section-title-wrap {
	margin-bottom: 48px !important;
}

.bp-main-heading {
	font-family: var(--bp-font-heading), 'Cormorant Garamond', serif !important;
	font-size: 40px !important;
	color: #143525 !important;
	margin: 0 0 10px 0 !important;
	font-weight: 700 !important;
}

.bp-sub-heading {
	font-size: 16px !important;
	color: #64748b !important;
	margin: 0 !important;
}

.bp-models-cards-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 40px !important;
	max-width: 1140px !important;
	margin: 0 auto !important;
}

.bp-product-card {
	background: #ffffff !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important;
	display: flex !important;
	flex-direction: column !important;
}

.bp-card-img-wrap img {
	width: 100% !important;
	height: 320px !important;
	object-fit: cover !important;
	display: block !important;
}

.bp-card-body {
	padding: 32px !important;
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
	text-align: center !important;
}

.bp-card-title {
	font-family: var(--bp-font-heading), 'Cormorant Garamond', serif !important;
	font-size: 26px !important;
	color: #143525 !important;
	margin: 0 0 10px 0 !important;
	font-weight: 700 !important;
}

.bp-card-desc {
	font-size: 14px !important;
	color: #64748b !important;
	line-height: 1.55 !important;
	margin: 0 0 24px 0 !important;
}

.bp-card-footer {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	margin-top: auto !important;
	padding-top: 20px !important;
	border-top: 1px solid #f1f5f9 !important;
}

.bp-card-price {
	font-family: var(--bp-font-heading), 'Cormorant Garamond', serif !important;
	font-size: 22px !important;
	font-style: italic !important;
	color: #143525 !important;
	font-weight: 700 !important;
}

.bp-btn-dark-green {
	background-color: #143525 !important;
	color: #ffffff !important;
	padding: 12px 24px !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease !important;
}

.bp-btn-dark-green:hover {
	background-color: #0d261a !important;
}

/* 4. Split Banner Section */
.bp-split-banner {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	background-color: #143525 !important;
}

.bp-split-img-col img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	min-height: 480px !important;
}

.bp-split-content-col {
	padding: 80px 60px !important;
	color: #ffffff !important;
	display: flex !important;
	align-items: center !important;
}

.bp-split-inner {
	max-width: 540px !important;
}

.bp-split-title {
	font-family: var(--bp-font-heading), 'Cormorant Garamond', serif !important;
	font-size: 46px !important;
	color: #ffffff !important;
	margin: 0 0 20px 0 !important;
	line-height: 1.2 !important;
}

.bp-split-title em.bp-accent {
	font-style: italic !important;
	color: #c89955 !important;
}

.bp-split-desc {
	font-size: 16px !important;
	line-height: 1.65 !important;
	color: rgba(255, 255, 255, 0.88) !important;
	margin: 0 0 36px 0 !important;
}

.bp-gold-link {
	color: #c89955 !important;
	text-decoration: underline !important;
}

.bp-split-usps {
	display: flex !important;
	gap: 28px !important;
	margin-bottom: 40px !important;
	flex-wrap: wrap !important;
}

.bp-split-usp {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
}

.bp-btn-tan {
	background-color: #c89955 !important;
	color: #ffffff !important;
	padding: 14px 32px !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	display: inline-block !important;
	transition: background-color 0.2s ease !important;
}

.bp-btn-tan:hover {
	background-color: #b58544 !important;
}

/* 5. Process Section */
.bp-process-section {
	background-color: #e9e9e8 !important;
	padding: 90px 0 !important;
}

.bp-process-steps {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	max-width: 1140px !important;
	margin: 50px auto 0 auto !important;
}

.bp-process-step {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	max-width: 170px !important;
}

.bp-step-icon {
	width: 54px !important;
	height: 54px !important;
	background-color: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #143525 !important;
	margin-bottom: 12px !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}

.bp-step-badge {
	background: #c89955 !important;
	color: #ffffff !important;
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 10px !important;
}

.bp-step-arrow {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-top: 18px !important;
	opacity: 0.75 !important;
}


.bp-process-step h4 {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 0 0 6px 0 !important;
}

.bp-process-step p {
	font-size: 12px !important;
	color: #64748b !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

.bp-step-arrow {
	color: #c89955 !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	letter-spacing: 2px !important;
}

/* 6. Blog Section */
.bp-home-blog-section {
	background-color: #e9e9e8 !important;
	padding: 0 0 90px 0 !important;
}

.bp-blog-cards-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 30px !important;
	max-width: 1140px !important;
	margin: 0 auto !important;
}

.bp-blog-card {
	background: #ffffff !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 8px 25px rgba(0,0,0,0.03) !important;
}

.bp-blog-card-img img {
	width: 100% !important;
	height: 200px !important;
	object-fit: cover !important;
	display: block !important;
}

.bp-blog-card-body {
	padding: 24px !important;
}

.bp-blog-card-body h4 {
	font-family: var(--bp-font-heading), 'Cormorant Garamond', serif !important;
	font-size: 20px !important;
	color: #143525 !important;
	margin: 0 0 10px 0 !important;
	font-weight: 700 !important;
}

.bp-blog-card-body p {
	font-size: 13px !important;
	color: #64748b !important;
	margin: 0 0 16px 0 !important;
	line-height: 1.5 !important;
}

.bp-blog-link {
	color: #143525 !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-decoration: none !important;
}

@media (max-width: 900px) {
	.bp-usps-grid,
	.bp-models-cards-grid,
	.bp-split-banner,
	.bp-blog-cards-grid {
		grid-template-columns: 1fr !important;
	}
	.bp-usp-item {
		border-right: none !important;
		border-bottom: 1px solid #e2e8f0 !important;
		padding: 20px 0 !important;
	}
	.bp-process-steps {
		flex-direction: column !important;
		gap: 30px !important;
	}
	.bp-step-arrow {
		transform: rotate(90deg) !important;
	}
	.bp-hero-title {
		font-size: 38px !important;
	}
}

/* ==========================================================================
   FORCE 100% EQUAL PHOTO HEIGHTS (330px FIXED HEIGHT FOR ALL PRODUCT IMAGES)
   ========================================================================== */
#bp_modellen_grid_sec .elementor-widget-image,
#bp_modellen_grid_sec .elementor-widget-image .elementor-widget-container,
#bp_modellen_grid_sec .elementor-widget-image a,
#bp_modellen_grid_sec .elementor-widget-image img,
.elementor-element-bp_card_img_1,
.elementor-element-bp_card_img_2,
.elementor-element-bp_card_img_1 .elementor-widget-container,
.elementor-element-bp_card_img_2 .elementor-widget-container,
.elementor-element-bp_card_img_1 img,
.elementor-element-bp_card_img_2 img,
.bp-models-section .bp-card-img-wrap,
.bp-models-section .bp-card-img-wrap img,
.bp-model-img-wrap,
.bp-model-img-wrap img,
.bp-card-img-wrap,
.bp-card-img-wrap img {
	height: 330px !important;
	max-height: 330px !important;
	min-height: 330px !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	border-top-left-radius: 16px !important;
	border-top-right-radius: 16px !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================================================
   FORCE FOTO 2 LOOK: SECTION 3 (ONZE MODELLEN) 1450px BOXED CONTAINER & 36px GAP
   ========================================================================== */
/* Section outer background: Edge-to-edge off-white */
body .elementor-28 .elementor-element.elementor-element-bp_modellen_header_sec,
body .elementor-28 .elementor-element.elementor-element-bp_modellen_grid_sec,
body #bp_modellen_header_sec,
body #bp_modellen_grid_sec,
body .bp-modellen-section,
body .bp-models-section {
	width: 100% !important;
	max-width: 100% !important;
	background-color: #e9e9e8 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box !important;
}

/* Inner Container: STRICT 1450px MAX-WIDTH with 60px PADDING (EXACT MATCH TO FOTO 2) */
body .elementor-28 .elementor-element.elementor-element-bp_modellen_header_sec > .elementor-container,
body .elementor-28 .elementor-element.elementor-element-bp_modellen_grid_sec > .elementor-container,
body #bp_modellen_header_sec > .elementor-container,
body #bp_modellen_grid_sec > .elementor-container,
body .bp-modellen-section > .elementor-container,
body .bp-models-section > .bp-container,
body .bp-models-section .bp-container,
body .bp-modellen-container {
	max-width: 1450px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 60px !important;
	padding-right: 60px !important;
	box-sizing: border-box !important;
}

/* 2-Column Grid with 36px Space Between Cards (EXACT MATCH TO FOTO 2) */
body .elementor-28 .elementor-element.elementor-element-bp_modellen_grid_sec > .elementor-container,
body #bp_modellen_grid_sec > .elementor-container,
body .bp-models-cards-grid,
body .bp-modellen-grid {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: space-between !important;
	align-items: stretch !important;
	gap: 36px !important;
	width: 100% !important;
	max-width: 1450px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* Each Product Card: Exactly calc(50% - 18px) width */
body .elementor-28 .elementor-element.elementor-element-bp_card_col_1,
body .elementor-28 .elementor-element.elementor-element-bp_card_col_2,
body #bp_modellen_grid_sec .elementor-column.elementor-col-50,
body .bp-product-card,
body .bp-model-card {
	width: calc(50% - 18px) !important;
	max-width: calc(50% - 18px) !important;
	min-width: calc(50% - 18px) !important;
	flex: 0 0 calc(50% - 18px) !important;
	box-sizing: border-box !important;
	background: #ffffff !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04) !important;
}

/* ==========================================================================
   SECTIE 4: MEER DAN EEN FIETSENHOK (FULL-BLEED SPLIT BANNER)

   Alleen layout die Elementor Free zelf niet kan: het doorlopen van de
   afbeelding over de volledige sectiehoogte en de USP-rij naast elkaar.
   Typografie, kleuren, padding, icoongrootte en knopstijl staan in de
   widgetinstellingen en zijn in de Elementor-editor te wijzigen.
   Bewust GEEN !important, anders overrulet deze CSS het paneel weer.
   ========================================================================== */
.elementor-element-bp_split_sec > .elementor-container {
	align-items: stretch;
}

/* Afbeeldingskolom laten meelopen met de hoogte van het groene paneel.

   De foto wordt absoluut gepositioneerd binnen de kolom. Dat is bewust: met
   height:100% in de normale stroom heeft de browser nergens een vaste hoogte om
   tegen af te zetten — de hele keten staat op auto — waardoor de foto zijn
   natuurlijke hoogte pakte (707px) en daarmee de hele sectie opblies. Nu telt
   de foto niet mee voor de hoogte en bepaalt alleen het groene paneel die. */
.elementor .elementor-element-bp_split_img_col {
	position: relative;
	overflow: hidden;
	min-height: 560px;
}

.elementor .elementor-element-bp_split_img_col > .elementor-widget-wrap {
	position: static;
}

.elementor .elementor-element-bp_split_img_col .elementor-element-bp_split_img_widget {
	position: absolute;
	inset: 0;
	margin: 0;
}

.elementor .elementor-element-bp_split_img_col .elementor-widget-container {
	height: 100%;
}

/* Eén klasse extra: Elementors frontend.min.css heeft .elementor img met
   height:auto op dezelfde specificiteit en laadt later, waardoor de foto zijn
   natuurlijke hoogte pakte en de hele sectie oprekte. */
.elementor .elementor-element-bp_split_img_col img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* USP-rij: drie items naast elkaar houden binnen de smalle contentkolom.
   min-width:0 laat de kolommen krimpen in plaats van af te breken. */
/* Kolommen krimpen om hun inhoud in plaats van elk een derde te pakken. Zo
   begint het eerste icoon exact op de tekstrand en is de tussenruimte overal
   even groot, in plaats van te variëren met de lengte van het label. */
.elementor-section.elementor-element-bp_split_usps_inner_sec > .elementor-container {
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 46px;
}

.elementor-section.elementor-element-bp_split_usps_inner_sec > .elementor-container > .elementor-column {
	width: auto;
	flex: 0 0 auto;
	min-width: 0;
}

.elementor-element-bp_split_usps_inner_sec .elementor-icon-box-wrapper {
	text-align: left;
}

.elementor-element-bp_split_usps_inner_sec .elementor-icon-box-title {
	white-space: nowrap;
}

/* Elementor zet .elementor-container zelf op flex-wrap:wrap onder 1024px;
   op tablet houden we de drie USP's bewust wel naast elkaar. */
/* Onder 1024px is de contentkolom te smal voor drie labels naast elkaar: die
   zijn samen al breder dan de beschikbare ruimte. Laten afbreken in plaats van
   ze uit de kolom te laten steken. */
@media (max-width: 1024px) {
	.elementor-section.elementor-element-bp_split_usps_inner_sec > .elementor-container {
		flex-wrap: wrap;
		gap: 22px 34px;
	}
}

@media (max-width: 767px) {
	/* Min-hoogte staat op de kolom, niet meer op de foto zelf. */
	.elementor .elementor-element-bp_split_img_col {
		min-height: 280px;
	}

	.elementor-section.elementor-element-bp_split_usps_inner_sec > .elementor-container {
		flex-wrap: wrap;
		gap: 24px;
	}
}




/* ==========================================================================
   SECTIE 5: ZO WERKT HET (5 PROCESSTAPPEN)

   Alleen layout die Elementor Free zelf niet kan: de genummerde badge voor de
   titel en de verbindingspijlen tussen de stappen. Typografie, kleuren,
   icoongrootte en padding staan in de widgetinstellingen.
   Bewust GEEN !important, anders overrulet deze CSS het paneel weer.
   ========================================================================== */
.elementor-section.elementor-element-bp_process_steps_sec > .elementor-container {
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: space-between;
	counter-reset: bp-step-counter;
}

.elementor-section.elementor-element-bp_process_steps_sec > .elementor-container > .elementor-column {
	position: relative;
	min-width: 0;
}

/* Genummerde gouden badge vóór de staptitel (telt automatisch door) */
.elementor-element-bp_process_steps_sec .elementor-icon-box-title {
	display: flex;
	align-items: center;
	justify-content: center;
}

.elementor-element-bp_process_steps_sec .elementor-icon-box-title span::before {
	counter-increment: bp-step-counter;
	content: counter(bp-step-counter);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-right: 8px;
	border-radius: 50%;
	background-color: #c89955;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
}

/* Omschrijving smal houden onder de titel */
.elementor-element-bp_process_steps_sec .elementor-icon-box-description {
	max-width: 200px;
	margin-left: auto;
	margin-right: auto;
}

/* Stippellijn met pijlpunt tussen de stappen */
.elementor-element-bp_process_steps_sec > .elementor-container > .elementor-column:not(:last-child)::after {
	content: '------\2192';
	position: absolute;
	top: 45px;
	right: -25px;
	color: #c89955;
	font-size: 13px;
	letter-spacing: 2px;
	opacity: 0.5;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.elementor-section.elementor-element-bp_process_steps_sec > .elementor-container {
		flex-wrap: wrap;
		gap: 32px;
	}

	/* Pijlen slaan nergens op zodra de stappen onder elkaar staan */
	.elementor-element-bp_process_steps_sec > .elementor-container > .elementor-column:not(:last-child)::after {
		content: none;
	}
}


/* ==========================================================================
   SECTIE 7: BLOGKAARTEN BOVEN DE FOOTER

   Alleen layout die Elementor Free zelf niet kan: de 30px tussenruimte tussen
   de kaarten en de vaste hoogte van de uitgelichte afbeelding. Typografie,
   kleuren, rand, schaduw en binnenmarges staan in de widgetinstellingen.
   ========================================================================== */
.elementor-section.elementor-element-bp_blog_sec > .elementor-container {
	display: flex;
	flex-wrap: nowrap;
	gap: 30px;
	align-items: stretch;
}

.elementor-section.elementor-element-bp_blog_sec > .elementor-container > .elementor-column {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}

/* Afbeelding doorlopend tot de rand van de kaart, vaste hoogte */
.elementor-element-bp_blog_sec .elementor-widget-image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 16px 16px 0 0;
}

/* Kaarten even hoog maken, "Lees meer" onderaan uitlijnen */
.elementor-element-bp_blog_sec > .elementor-container > .elementor-column > .elementor-widget-wrap {
	align-content: flex-start;
}

@media (max-width: 900px) {
	.elementor-section.elementor-element-bp_blog_sec > .elementor-container {
		flex-wrap: wrap;
	}

	.elementor-section.elementor-element-bp_blog_sec > .elementor-container > .elementor-column {
		flex: 1 1 100%;
	}
}


/* ==========================================================================
   MOBIEL: modellen-kaarten onder elkaar

   De kaarten stonden vast op calc(50% - 18px), ook op telefoonbreedte, waardoor
   ze naast elkaar bleven staan en de knop "Direct aanvragen" buiten beeld liep.
   !important is hier nodig om de bestaande !important-regel te overrulen.
   ========================================================================== */
@media (max-width: 767px) {
	body .elementor-28 .elementor-element.elementor-element-bp_modellen_grid_sec > .elementor-container {
		flex-wrap: wrap !important;
		gap: 24px !important;
	}

	body .elementor-28 .elementor-element.elementor-element-bp_card_col_1,
	body .elementor-28 .elementor-element.elementor-element-bp_card_col_2 {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		flex: 1 1 100% !important;
	}
}


/* ==========================================================================
   BIKEPORT BLOGSLIDER (eigen Elementor-widget)

   Alleen de mechaniek van de slider. Kleuren, typografie, afronding, schaduw,
   afbeeldingshoogte en tussenruimte komen uit de widgetinstellingen.
   ========================================================================== */
.bp-bs {
	position: relative;
}

.bp-bs-viewport {
	overflow: hidden;
}

.bp-bs-track {
	display: flex;
	flex-wrap: nowrap;
	transition: transform 0.45s ease;
	will-change: transform;
}

.bp-bs-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-sizing: border-box;
}

/* Afbeelding vult altijd het volledige vak en is voor elke kaart even hoog */
.bp-bs-thumb {
	display: block;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	flex: 0 0 auto;
}

.bp-bs-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.bp-bs-title,
.bp-bs-excerpt {
	margin: 0;
}

.bp-bs-title a {
	text-decoration: none;
	color: inherit;
}

/* "Lees meer" onderaan uitlijnen, zodat de kaarten gelijk ogen */
.bp-bs-more {
	margin-top: auto;
	padding-top: 16px;
	text-decoration: none;
	align-self: flex-start;
	transition: color 0.2s ease;
}

.bp-bs-excerpt {
	margin-bottom: 0;
}

/* Bediening: ronde knop met chevron.

   De hover-kleuren staan hier ook hard genoteerd. Reden: reset.css van het
   parent-thema zet [type="button"]:hover op #cc3366 (roze). Zonder een eigen
   regel met hogere specificiteit slaat dat door op elke <button> op de site. */
/* Bediening onder de kaarten: pijl — stipjes — pijl, gecentreerd. Bewust niet
   zwevend langs de zijkanten: daar botsen ze op smalle schermen met de kaarten. */
.bp-bs-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin-top: 34px;
}

.bp-bs-arrow {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(20, 53, 37, 0.12);
	border-radius: 50%;
	background: #ffffff;
	color: #143525;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 3;
	box-shadow: 0 6px 18px rgba(20, 53, 37, 0.12);
	transition: background-color 0.2s ease, border-color 0.2s ease,
		color 0.2s ease, box-shadow 0.2s ease;
}

.bp-bs-arrow svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bp-bs .bp-bs-arrow:hover,
.bp-bs .bp-bs-arrow:focus-visible {
	background-color: #c89955;
	border-color: #c89955;
	color: #ffffff;
	box-shadow: 0 8px 22px rgba(200, 153, 85, 0.35);
}

.bp-bs .bp-bs-arrow:focus-visible {
	outline: 2px solid #143525;
	outline-offset: 2px;
}

.bp-bs-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
}

/* Ook hier twee klassen diep tegen het roze uit reset.css. */
.bp-bs .bp-bs-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: #cbd5e1;
	cursor: pointer;
	transition: width 0.2s ease, background-color 0.2s ease;
}

.bp-bs-dot.is-on {
	width: 24px;
	border-radius: 4px;
}

/* Ook hier het roze uit reset.css overrulen */
.bp-bs .bp-bs-dot:hover,
.bp-bs .bp-bs-dot:focus-visible {
	background-color: #c89955;
}



/* ==========================================================================
   BIKEPORT INFO-POPUP (eigen Elementor-widget)

   Alleen de mechaniek en het raster. Kleuren, typografie, afronding en breedte
   komen uit de widgetinstellingen.
   ========================================================================== */
.bp-pop-trigger {
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.25s ease;
}

.bp-pop {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity 0.28s ease;
}

.bp-pop.is-open {
	opacity: 1;
}

.bp-pop[hidden] {
	display: none;
}

.bp-pop-overlay {
	position: absolute;
	inset: 0;
	backdrop-filter: blur(2px);
}

.bp-pop-box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-height: calc(100vh - 48px);
	/* dvh houdt rekening met de in- en uitschuivende adresbalk op mobiel;
	   browsers die het niet kennen, negeren deze regel en houden de vh-versie. */
	max-height: calc(100dvh - 48px);
	/* Niet de hele box laten scrollen: de scrollbalk zou dan tussen de rand en
	   de sluitknop komen, waardoor die 15px uit het lood staat. */
	overflow: hidden;
	border-radius: 18px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
	display: grid;
	grid-template-columns: 38% 1fr;
	transform: translateY(12px) scale(0.985);
	transition: transform 0.28s ease;
}

.bp-pop.is-open .bp-pop-box {
	transform: translateY(0) scale(1);
}

.bp-pop-media {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 100%;
}

.bp-pop-content {
	padding: 48px 48px 40px;
	/* De tekstkolom scrollt, niet de hele box. */
	overflow-y: auto;
	overscroll-behavior: contain;
	max-height: calc(100dvh - 48px);
}

/* Twee klassen diep, want reset.css van het parent-thema zet
   [type="button"] (óók één klasse waard) op #cc3366 en wint anders. */
.bp-pop .bp-pop-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 38px;
	height: 38px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: #c89955;
	color: #ffffff;
	/* Flex zet het kruis exact in het midden, ongeacht lettergrootte. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	cursor: pointer;
	z-index: 2;
	box-shadow: 0 2px 10px rgba(20, 53, 37, 0.2);
	transition: background-color 0.2s ease;
}

.bp-pop .bp-pop-close svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}

.bp-pop .bp-pop-close:hover,
.bp-pop .bp-pop-close:focus-visible {
	background-color: #b58544;
	color: #ffffff;
}

.bp-pop .bp-pop-close:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.bp-pop-eyebrow {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.bp-pop-title {
	margin: 0 0 16px;
}

.bp-pop-intro {
	margin: 0 0 28px;
	font-size: 15px;
	line-height: 1.65;
}

.bp-pop-points {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	gap: 20px;
}

.bp-pop-point {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.bp-pop-ic {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.bp-pop-ic svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.bp-pop-point strong {
	display: block;
	margin-bottom: 3px;
	font-size: 15px;
	font-weight: 700;
}

.bp-pop-point p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
}

.bp-pop-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px;
	border-radius: 6px;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: filter 0.2s ease;
}

/* Kleur expliciet vasthouden: reset.css zet a:hover op #333366 en wint anders
   van .bp-pop-cta, waardoor de knoptekst donkerblauw zou worden. */
.bp-pop .bp-pop-cta:hover,
.bp-pop .bp-pop-cta:focus {
	color: #ffffff;
	filter: brightness(0.92);
}

.bp-pop-footnote {
	margin: 18px 0 0;
	font-size: 12px;
	color: #94a3b8;
}

@media (max-width: 860px) {
	.bp-pop-box {
		grid-template-columns: 1fr;
	}

	.bp-pop-media {
		min-height: 190px;
	}

	.bp-pop-content {
		padding: 32px 24px 28px;
	}

	.bp-pop-points {
		gap: 16px;
	}
}


/* ==========================================================================
   CONTACTFORMULIER: uitlijning, tussenruimte en meldingen

   Gevonden afwijkingen: de twee kolommen sloten zonder tussenruimte op elkaar
   aan, de veldgoot was 19px, selects waren 47px hoog tegen 48,5px voor de
   tekstvelden, en de zijbalk begon 40px hoger dan het formulier.
   ========================================================================== */

/* Ruimte tussen formulier- en zijbalkkolom: de twee kolommen sloten exact op
   elkaar aan (853 + 427 = 1280), met alleen 2x10px widget-padding ertussen. */
/* Lucht tussen de groene titelsectie en het formulier. Bewust alleen op de
   formulierkolom: de zijbalk valt er met opzet 30px overheen, en padding op de
   sectie zou die overlap wegdrukken.

   Vier klassen diep, want Elementors eigen
   .elementor-column-gap-default > .elementor-column > .elementor-element-populated
   telt er drie en wint anders. */
.elementor-column.elementor-element-067a8188 > .elementor-widget-wrap.elementor-element-populated {
	padding-top: 72px;
}

@media (min-width: 1025px) {
	.elementor-column.elementor-element-067a8188 > .elementor-widget-wrap.elementor-element-populated {
		padding-right: 40px;
	}
}

@media (max-width: 767px) {
	.elementor-column.elementor-element-067a8188 > .elementor-widget-wrap.elementor-element-populated {
		padding-top: 48px;
	}
}

/* De zijbalk valt bewust iets over de groene hero heen; die marge laten we
   met rust. Alleen op smalle schermen is die overlap niet gewenst. */
@media (max-width: 1024px) {
	.bp-contact-sidebar {
		margin-top: 0;
	}
}

/* Velden: gelijke goot en gelijke hoogte */
.bp-form-row,
.bp-form-grid {
	gap: 24px !important;
}

#bp-contact-offerte-form input[type="text"],
#bp-contact-offerte-form input[type="email"],
#bp-contact-offerte-form input[type="tel"],
#bp-contact-offerte-form select {
	height: 50px;
	line-height: 1.4;
	box-sizing: border-box;
}

#bp-contact-offerte-form textarea {
	line-height: 1.55;
}

/* Statusmelding onder het formulier */
.bp-form-message {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 8px;
	border-left: 4px solid;
	font-size: 14.5px;
	line-height: 1.5;
}

.bp-form-message.is-success {
	background: #eef6f1;
	border-color: #143525;
	color: #143525;
}

.bp-form-message.is-error {
	background: #fdf2f2;
	border-color: #b4402f;
	color: #8c2f22;
}

/* Veld met een fout */
#bp-contact-offerte-form .has-error {
	border-color: #b4402f !important;
	background-color: #fdf7f6;
}

/* Verzendknop tijdens het versturen */
.bp-btn-contact-submit.is-busy {
	opacity: 0.65;
	cursor: progress;
}


/* ==========================================================================
   CONFIGURATOR: extra weergavestijlen per groep

   Naast knoppen en kaarten zijn er nu een lijst (label, toelichting en prijs
   onder elkaar) en een dropdown voor lange keuzelijsten. Welke stijl een groep
   gebruikt, staat bij het product onder Bikeport configurator.
   ========================================================================== */

/* --- Lijstweergave --- */
.bp-options-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bp-list-opt {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	padding: 16px 18px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.bp-list-opt:hover {
	border-color: #c89955;
}

.bp-list-opt.active {
	border-color: #143525;
	background: #f6faf7;
	box-shadow: 0 0 0 1px #143525 inset;
}

/* Rondje links, zoals een keuzerondje */
.bp-list-mark {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border: 2px solid #cbd5e1;
	border-radius: 50%;
	position: relative;
	transition: border-color 0.18s ease;
}

.bp-list-opt.active .bp-list-mark {
	border-color: #143525;
}

.bp-list-opt.active .bp-list-mark::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: #143525;
}

.bp-list-body {
	flex: 1 1 auto;
	min-width: 0;
}

.bp-list-title {
	display: block;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #143525;
	line-height: 1.3;
}

.bp-list-desc {
	display: block;
	margin-top: 3px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: #64748b;
	line-height: 1.5;
}

.bp-list-price {
	flex: 0 0 auto;
	align-self: center;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #c89955;
	white-space: nowrap;
}

.bp-list-opt.active .bp-list-price {
	color: #143525;
}

/* --- Dropdownweergave --- */
.bp-options-select {
	max-width: 460px;
}

.bp-opt-select {
	width: 100%;
	padding: 13px 16px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 15px;
	color: #143525;
	cursor: pointer;
}

.bp-opt-select:focus {
	outline: none;
	border-color: #143525;
	box-shadow: 0 0 0 1px #143525;
}

@media (max-width: 767px) {
	.bp-list-opt {
		flex-wrap: wrap;
	}

	.bp-list-price {
		align-self: flex-start;
		margin-left: 34px;
	}
}


/* Breedte van een optieblok, instelbaar per groep bij het product.
   Zonder klasse is een groep volle breedte. Op telefoon altijd volle breedte,
   anders wordt een kwart onleesbaar smal. */
.bp-opt-w-75 { max-width: 75%; }
.bp-opt-w-50 { max-width: 50%; }
.bp-opt-w-25 { max-width: 25%; }

@media (max-width: 900px) {
	.bp-opt-w-75,
	.bp-opt-w-50,
	.bp-opt-w-25 {
		max-width: 100%;
	}
}

/* Grid-items krijgen standaard min-width:auto en krimpen dus niet onder de
   breedte van hun inhoud. De linkerkolom van de configurator bleef daardoor
   1163px op een telefoonscherm, met de hele pagina in horizontale overloop. */
.bp-configurator-grid > * {
	min-width: 0;
}

/* 1fr betekent minmax(auto, 1fr): de track krimpt niet onder de inhoud.
   Daardoor bleven de optiekaarten 329px breed in een kolom van 269px. */
.bp-cards-grid > *,
.bp-options-row > * {
	min-width: 0;
}

@media (max-width: 767px) {
	.bp-cards-grid,
	.bp-cards-grid-2,
	.bp-cards-grid-3,
	.bp-cards-grid-4 {
		grid-template-columns: 1fr;
	}
}


/* ==========================================================================
   FOOTER-CREDIT + POPUP OVER WEBMERKEN.NL
   ========================================================================== */
/* Drie kolommen: de copyright blijft in het midden staan zoals hij stond, de
   credit schuift naar rechts. Uitlijnen op de basislijn en niet op het midden,
   want de onderstreping van de link maakt dat blok hoger — daardoor zakte de
   credit 7px onder de copyright. */
.bp-footer-bottom {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: baseline;
	gap: 6px 24px;
}

.bp-footer-bottom > p:first-child {
	grid-column: 2;
}

.bp-footer-credit {
	grid-column: 3;
	justify-self: end;
	margin: 0;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.bp-footer-bottom {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.bp-footer-bottom > p:first-child,
	.bp-footer-credit {
		grid-column: 1;
		justify-self: center;
	}
}

/* Tekstlink in plaats van de gouden knopvorm die .bp-pop-trigger standaard heeft */
.bp-footer-bottom .bp-credit-link {
	padding: 0;
	background: none;
	border: none;
	border-bottom: 1px solid rgba(226, 183, 116, 0.45);
	border-radius: 0;
	color: #e2b774;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
	letter-spacing: 0.1px;
	vertical-align: baseline;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.bp-footer-bottom .bp-credit-link:hover,
.bp-footer-bottom .bp-credit-link:focus-visible {
	background: none;
	color: #ffffff;
	border-color: #ffffff;
}

/* Popup zonder fotokolom */
.bp-pop-solo .bp-pop-box {
	grid-template-columns: 1fr;
	max-width: 620px;
}

.bp-pop-solo .bp-pop-content {
	padding: 44px 44px 36px;
}

/* Vinkjes in plaats van Font Awesome-iconen */
.bp-pop-solo .bp-pop-ic svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 600px) {
	.bp-pop-solo .bp-pop-content {
		padding: 32px 24px 28px;
	}
}


/* ==========================================================================
   BASISKLEUREN VOOR DE POPUP

   De info-popup op de homepage haalt zijn kleuren uit de Elementor-controls,
   en die CSS is gescoped op de widget zelf. Een popup buiten Elementor — zoals
   de credit onderaan de footer — kreeg daardoor helemaal geen opmaak: een
   doorzichtige waas en zwarte tekst op niets.

   Bewust één klasse diep. Elementor genereert selectors als
   .elementor-28 .elementor-element.elementor-element-X .bp-pop-overlay en wint
   daarmee gewoon van deze basis, zodat de instellingen in het paneel blijven
   werken.
   ========================================================================== */
.bp-pop-overlay {
	background-color: rgba(10, 26, 18, 0.72);
}

.bp-pop-box {
	background-color: #ffffff;
}

.bp-pop-eyebrow {
	color: #c89955;
}

.bp-pop-title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 40px;
	font-weight: 500;
	line-height: 1.15;
	color: #143525;
}

.bp-pop-intro,
.bp-pop-point p {
	color: #5a6b62;
}

.bp-pop-point strong {
	color: #143525;
}

.bp-pop-ic {
	color: #c89955;
	background-color: rgba(200, 153, 85, 0.1);
}

.bp-pop-cta {
	background-color: #c89955;
	color: #ffffff;
}

@media (max-width: 600px) {
	.bp-pop-title {
		font-size: 30px;
	}
}


/* ==========================================================================
   MOBIEL MENU EN MOBIELE FOOTER

   De header was één vaste rij: logo, vijf menu-items en een knop. Samen 794px
   breed, waardoor de hele pagina op telefoon horizontaal meescrolde. De footer
   bleef op twee kolommen staan en liep om dezelfde reden over.
   ========================================================================== */

/* Hamburgerknop: alleen zichtbaar zodra het menu inklapt */
.bp-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

.bp-nav-toggle-bar {
	display: block;
	width: 24px;
	height: 2px;
	margin: 0 auto;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Op desktop mag de wrapper de indeling niet beïnvloeden */
.bp-nav-panel {
	display: contents;
}

/* De kop, de bedrijfsgegevens en de verduistering horen alleen bij het
   uitklapmenu. Zonder deze regels hangen ze gewoon in de bovenbalk. */
.bp-nav-panel-kop,
.bp-nav-info {
	display: none;
}

.bp-nav-backdrop {
	display: none;
}

@media (max-width: 1024px) {
	.bp-header-container {
		padding: 0 24px;
		position: relative;
	}

	/* Goud, en niet alleen zodra het menu openstaat. De streepjes staan op
	   background: currentColor, dus de kleur van de knop stuurt ze aan.

	   De regel voor .bp-header-dark die hier stond zette #143525 -- donkergroen
	   op een donkergroene balk, dus op de binnenpagina's was de knop onzichtbaar.
	   Precies dezelfde fout als eerder bij het logo: de klassenaam suggereert
	   een lichte balk, maar hij betekent het omgekeerde. */
	.bp-nav-toggle,
	.bp-header-dark .bp-nav-toggle {
		display: flex;
		color: var(--bp-gold, #e2b774);
		z-index: 2;
	}

	/* ------------------------------------------------------------------
	   Uitklaplade die van rechts inschuift.

	   Het paneel zat eerder onder de balk geplakt en werd opengevouwen met
	   max-height. Dat gaf een sprongerige animatie (max-height kan niet
	   soepel tussen 0 en "de hoogte die het toevallig wordt") en de
	   achtergrond bleef doorschemeren. Nu is het een vaste lade rechts,
	   met een transform -- die animeert wel vloeiend.
	   ------------------------------------------------------------------ */
	.bp-nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 998;
		background: rgba(8, 22, 15, 0.55);
		backdrop-filter: blur(3px);
		opacity: 0;
		transition: opacity 0.35s ease;
	}

	.bp-nav-backdrop[hidden] {
		display: none;
	}

	body.bp-nav-open .bp-nav-backdrop {
		opacity: 1;
	}

	.bp-nav-panel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;

		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		width: min(360px, 86vw);
		padding: 30px 28px 32px;

		background: linear-gradient(180deg, #17402c 0%, #0e2719 100%);
		box-shadow: -24px 0 60px rgba(6, 18, 12, 0.45);
		overflow-y: auto;
		overscroll-behavior: contain;

		/* Dicht: volledig buiten beeld aan de rechterkant */
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
		            visibility 0s linear 0.38s;
	}

	.bp-header.bp-nav-open .bp-nav-panel {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
		            visibility 0s;
	}

	/* Logo bovenin de lade, op dezelfde hoogte als het kruisje. Geen streep
	   eronder: het logo staat al los genoeg van de menu-items, en een tweede
	   scheiding vlak boven de hairlines van het menu werd onrustig. */
	.bp-nav-panel-kop {
		display: flex;
		align-items: center;
		/* Even hoog als de sluitknop, zodat het logo op dezelfde middellijn
		   uitkomt als het kruisje ernaast. */
		min-height: 44px;
		margin-bottom: 10px;
	}

	.bp-nav-panel-logo {
		display: flex;
		align-items: center;
		gap: 10px;
		color: #ffffff;
		text-decoration: none;
	}

	.bp-nav-panel-logo .bp-logo-icon-wrap {
		display: flex;
		width: 34px;
		height: 34px;
		color: var(--bp-gold, #e2b774);
	}

	.bp-nav-panel-logo .bp-logo-svg {
		width: 100%;
		height: 100%;
	}

	.bp-nav-panel-logo .bp-logo-text {
		color: #ffffff;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 0.06em;
	}

	.bp-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.bp-nav li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	}

	.bp-nav li:last-child {
		border-bottom: none;
	}

	.bp-nav a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 0;
		color: #ffffff;
		font-size: 17px;
		letter-spacing: 0.01em;
		text-decoration: none;
		transition: color 0.2s ease;
	}

	/* Chevron in goud, schuift een fractie mee bij aanraken */
	.bp-nav a::after {
		content: '\2192';
		color: var(--bp-gold, #e2b774);
		font-size: 15px;
		opacity: 0;
		transform: translateX(-6px);
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.bp-nav a:hover,
	.bp-nav a:focus-visible {
		color: var(--bp-gold, #e2b774);
	}

	.bp-nav a:hover::after,
	.bp-nav a:focus-visible::after {
		opacity: 1;
		transform: translateX(0);
	}

	/* Knop in goud, niet de omlijnde variant van de desktopbalk. De tekstkleur
	   moet geforceerd: de basisregel van .bp-header-cta zet wit, en wit op goud
	   is nauwelijks te lezen (contrast 1,9:1 tegen 7,5:1 voor donkergroen). */
	.bp-nav-panel .bp-header-cta {
		margin-top: 24px;
		padding: 15px 20px;
		border: none;
		border-radius: 8px;
		background: var(--bp-gold, #e2b774) !important;
		color: #143525 !important;
		font-size: 15px;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
	}

	.bp-nav-panel .bp-header-cta:hover,
	.bp-nav-panel .bp-header-cta:focus-visible {
		background: #d2a45c !important;
		color: #143525 !important;
	}

	/* Bedrijfsgegevens onderin */
	.bp-nav-info {
		display: block;
		margin-top: auto;
		padding-top: 28px;
	}

	.bp-nav-info::before {
		content: '';
		display: block;
		width: 100%;
		height: 1px;
		margin-bottom: 22px;
		background: rgba(255, 255, 255, 0.10);
	}

	.bp-nav-info-kop {
		display: block;
		margin-bottom: 12px;
		color: var(--bp-gold, #e2b774);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.bp-nav-info-namen {
		margin: 0 0 8px;
		color: #ffffff;
		font-size: 15px;
		font-weight: 600;
	}

	.bp-nav-info-adres {
		margin: 0 0 14px;
		color: rgba(255, 255, 255, 0.72);
		font-size: 14px;
		font-style: normal;
		line-height: 1.6;
	}

	.bp-nav-info-mail {
		display: inline-block;
		min-height: 24px;
		color: #ffffff;
		font-size: 14px;
		text-decoration: none;
		border-bottom: 1px solid var(--bp-gold, #e2b774);
		padding-bottom: 2px;
	}

	.bp-nav-info-mail:hover,
	.bp-nav-info-mail:focus-visible {
		color: var(--bp-gold, #e2b774);
	}
	/* Hamburger wordt een kruisje zodra het menu openstaat */
	.bp-nav-open .bp-nav-toggle-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.bp-nav-open .bp-nav-toggle-bar:nth-child(2) {
		opacity: 0;
	}

	.bp-nav-open .bp-nav-toggle-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Achtergrond niet meescrollen zolang het menu open is */
	body.bp-nav-open {
		overflow: hidden;
	}
}

/* Footer onder elkaar op telefoon */
@media (max-width: 767px) {
	.bp-footer-grid {
		grid-template-columns: 1fr;
		gap: 34px;
		margin-bottom: 40px;
	}

	.bp-footer-container {
		padding-left: 24px;
		padding-right: 24px;
	}
}


/* ==========================================================================
   MOBIELE FIJNAFSTELLING VAN DE HOMEPAGE

   Geen overflow meer, maar de indeling was nog op desktopmaten gebouwd: 60px
   zijmarge in de hero op een scherm van 375, USP-tekst van 184px breed en
   verticale scheidingsstreepjes die naast elkaar niets meer scheiden.
   ========================================================================== */
@media (max-width: 767px) {

	/* --- Hero: zijmarge van 60 naar 24, tekst krijgt de volle breedte --- */
	.bp-slide-container {
		padding: 96px 24px 64px !important;
	}

	.bp-hero-content {
		max-width: 100% !important;
	}

	.bp-hero-buttons {
		flex-wrap: wrap;
		gap: 12px;
	}

	.bp-hero-buttons .bp-btn {
		flex: 1 1 100%;
		text-align: center;
	}

	/* Stipjes weg van de rand */
	.bp-slider-bullets-container {
		padding-left: 24px !important;
	}

	/* --- USP-balk: onder elkaar, dus horizontale lijnen ipv verticale --- */
	#bp-usps-bar-section {
		padding: 32px 0 !important;
	}

	/* De container hield 60px zijpadding aan: 375 - 120 = 255px inhoud. */
	#bp-usps-bar-section > .elementor-container,
	.elementor-section.bp-usps-bar > .elementor-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Twee naast twee: vier losse regels onder elkaar maakte de balk
	   onnodig lang en liet veel wit aan weerszijden staan. */
	#bp-usps-bar-section > .elementor-container {
		flex-wrap: wrap !important;
	}

	#bp-usps-bar-section .elementor-column {
		width: 50% !important;
		padding: 22px 12px !important;
		border-right: 1px solid #e2e8f0 !important;
		border-bottom: 1px solid #e2e8f0 !important;
	}

	/* Rechterkolom krijgt geen streep, onderste rij ook niet: samen vormt dat
	   een net kruis in plaats van een raster met randen. */
	#bp-usps-bar-section .elementor-column:nth-child(2n) {
		border-right: none !important;
	}

	#bp-usps-bar-section .elementor-column:nth-child(n+3) {
		border-bottom: none !important;
	}

	#bp-usps-bar-section .elementor-icon-box-title {
		font-size: 14px !important;
	}

	/* --- Processtappen: compacter, tekst over de volle breedte --- */
	.elementor-element-bp_process_steps_sec .elementor-icon-box-description {
		max-width: 100%;
	}

	.elementor-element-bp_process_steps_sec > .elementor-container {
		gap: 22px;
	}

	.elementor-element-bp_process_steps_sec .elementor-icon-box-icon {
		margin-bottom: 12px !important;
	}

	/* --- Aanraakdoelen: minstens 44px hoog, ook als de tekst klein is --- */
	.bp-bs-more,
	.bp-footer-links a,
	.bp-footer-contact a {
		display: inline-block;
		min-height: 44px;
		line-height: 30px;
	}

	.bp-nav a {
		min-height: 48px;
		display: flex;
		align-items: center;
	}
}


/* ==========================================================================
   MODELKAARTEN OP TELEFOON

   De kaarten stapelen wel, maar waren nog op desktopmaten gebouwd: een foto
   van 330px hoog, en een voetrij met twee kolommen van 153px waarin de knop
   "Direct aanvragen →" over vijf regels brak.
   ========================================================================== */
@media (max-width: 767px) {

	/* Foto minder hoog: bij 375px breed was 330px bijna vierkant. De vaste
	   hoogte hierboven zet ook min-height en max-height, dus alle drie moeten
	   hier terug -- anders houdt min-height de foto alsnog op 330px. */
	#bp_modellen_grid_sec .elementor-widget-image,
	#bp_modellen_grid_sec .elementor-widget-image .elementor-widget-container,
	#bp_modellen_grid_sec .elementor-widget-image a,
	#bp_modellen_grid_sec .elementor-widget-image img,
	.elementor-element-bp_card_img_1,
	.elementor-element-bp_card_img_2,
	.elementor-element-bp_card_img_1 .elementor-widget-container,
	.elementor-element-bp_card_img_2 .elementor-widget-container,
	.elementor-element-bp_card_img_1 img,
	.elementor-element-bp_card_img_2 img {
		height: 215px !important;
		max-height: 215px !important;
		min-height: 215px !important;
	}
}


/* --------------------------------------------------------------------------
   Voetrij van de modelkaarten: telefoon EN tablet.

   De twee kolommen stonden vast op 50/50. Zodra een kaart smaller wordt dan
   ~420px levert dat een kolom van ~155px op, en daar brak "Direct aanvragen"
   overheen -- op 375px zelfs over vijf regels. Hieronder krimpen de kolommen
   om hun eigen inhoud, zodat de knop op een regel past en netjes rechts
   uitgelijnd blijft met de rest van de kaart.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

	.elementor-element-bp_card_col_1 .elementor-inner-section > .elementor-container,
	.elementor-element-bp_card_col_2 .elementor-inner-section > .elementor-container {
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 12px;
	}

	.elementor-element-bp_card_col_1 .elementor-inner-section > .elementor-container > .elementor-column,
	.elementor-element-bp_card_col_2 .elementor-inner-section > .elementor-container > .elementor-column {
		width: auto !important;
		flex: 0 0 auto !important;
		min-width: 0;
	}

	/* Prijs pakt de vrije ruimte zodat de knop tegen de rechterkant blijft. */
	.elementor-element-bp_card_col_1 .elementor-inner-section > .elementor-container > .elementor-column:first-child,
	.elementor-element-bp_card_col_2 .elementor-inner-section > .elementor-container > .elementor-column:first-child {
		flex: 1 1 auto !important;
	}

	.elementor-element-bp_modellen_grid_sec .elementor-button {
		white-space: nowrap;
		padding: 15px 20px !important;
		font-size: 14px !important;
		min-height: 44px;
	}
}


/* ==========================================================================
   MODELKAART OP TELEFOON -- opmaak

   De kaart was op desktopmaten gebouwd en dat viel op zodra hij smal werd:
   hij liep tot aan het schermrand (de radius van 16px was daardoor onzichtbaar),
   de voetrij hield 35px zijmarge aan, en de titel begon met 28px marge erboven.
   Bij elkaar 541px hoog voor vier regels inhoud.

   Hieronder krijgt de kaart een echte kaartvorm -- ruimte eromheen, zichtbare
   ronding, hairline en een zachte schaduw -- en gaat de binnenruimte terug naar
   een vaste maat van 20px.
   ========================================================================== */
@media (max-width: 767px) {

	/* Ruimte naast de kaarten zodat het kaarten worden en geen banen.
	   De basisregel staat als "body .elementor-28 .elementor-element..." in de
	   CSS, dus die specificiteit is hier nodig om de padding te kunnen zetten. */
	body .elementor-28 .elementor-element.elementor-element-bp_modellen_grid_sec > .elementor-container,
	#bp_modellen_grid_sec > .elementor-container {
		padding-left: 16px !important;
		padding-right: 16px !important;
		row-gap: 16px;
	}

	.elementor-element-bp_modellen_grid_sec {
		padding-bottom: 48px !important;
	}

	/* De kaart zelf. overflow verbergt de bovenhoeken van de foto binnen de ronding. */
	.elementor-element-bp_card_col_1 > .elementor-widget-wrap,
	.elementor-element-bp_card_col_2 > .elementor-widget-wrap {
		padding: 0 0 20px !important;
		border-radius: 16px !important;
		overflow: hidden;
		border: 1px solid #eceae4;
		box-shadow: 0 1px 2px rgba(26, 46, 33, 0.04),
		            0 10px 26px rgba(26, 46, 33, 0.07);
	}

	/* Foto: iets platter, want de kaart is nu smaller dan het origineel */
	#bp_modellen_grid_sec .elementor-widget-image,
	#bp_modellen_grid_sec .elementor-widget-image .elementor-widget-container,
	#bp_modellen_grid_sec .elementor-widget-image a,
	#bp_modellen_grid_sec .elementor-widget-image img,
	.elementor-element-bp_card_img_1,
	.elementor-element-bp_card_img_2,
	.elementor-element-bp_card_img_1 .elementor-widget-container,
	.elementor-element-bp_card_img_2 .elementor-widget-container,
	.elementor-element-bp_card_img_1 img,
	.elementor-element-bp_card_img_2 img {
		height: 200px !important;
		max-height: 200px !important;
		min-height: 200px !important;
		border-radius: 0 !important;
	}

	/* Titel: de marge van 28px erboven zat er voor de desktopindeling in */
	.elementor-element-bp_card_title_1,
	.elementor-element-bp_card_title_2 {
		padding: 20px 20px 0 !important;
		margin-bottom: 0 !important;
	}

	.elementor-element-bp_card_title_1 .elementor-heading-title,
	.elementor-element-bp_card_title_2 .elementor-heading-title {
		margin: 0 0 8px !important;
		font-size: 24px !important;
		line-height: 1.2 !important;
	}

	/* Omschrijving. De marge eronder geeft de scheidingsstreep van de voetrij
	   lucht; zonder deze regel plakte de streep tegen de laatste tekstregel. */
	.elementor-element-bp_card_desc_1,
	.elementor-element-bp_card_desc_2 {
		padding: 0 20px !important;
		margin-bottom: 16px !important;
	}

	.elementor-element-bp_card_desc_1 p,
	.elementor-element-bp_card_desc_2 p {
		margin: 0 !important;
		font-size: 14px !important;
		line-height: 1.5 !important;
	}

	/* Voetrij: zijmarge van 35px terug naar de kaartmaat van 20px. De breedte
	   staat op calc(100% - 70px) via een ID-selector en hoort bij die 35px,
	   dus die moet mee terug naar 40px -- anders blijft de knop 50px van de
	   rechterrand hangen terwijl de prijs op 20px staat. */
	.elementor-element-bp_card_inner_sec_1,
	.elementor-element-bp_card_inner_sec_2,
	#bp_card_inner_sec_1,
	#bp_card_inner_sec_2 {
		margin: 0 20px !important;
		padding: 16px 0 0 !important;
		width: calc(100% - 40px) !important;
	}

	/* De kolommen hadden elk 10px eigen padding, wat de prijs 45px inschoof */
	.elementor-element-bp_card_inner_sec_1 .elementor-widget-wrap,
	.elementor-element-bp_card_inner_sec_2 .elementor-widget-wrap {
		padding: 0 !important;
	}

	/* Prijs mag nooit afbreken: de kolom krimpt mee en brak "EUR" van het bedrag af */
	.elementor-element-bp_price_heading_1 .elementor-heading-title,
	.elementor-element-bp_price_heading_2 .elementor-heading-title {
		white-space: nowrap;
		font-size: 20px !important;
	}
}


/* ==========================================================================
   USP'S IN HET GROENE VLAK OP TELEFOON

   De drie punten stonden in een rij die afbrak op 2 + 1, met het derde blokje
   los eronder. Hieronder worden het drie volle regels met een hairline ertussen.

   Het icoon schuift van boven de tekst naar ervoor: bij volle breedte stond het
   anders in zijn eentje op een regel, met een gat van 200px ernaast.

   Loopt door tot 1024px: op tablet is het groene vlak maar 323px breed, dus
   daar brak de rij precies zo af als op telefoon.
   ========================================================================== */
@media (max-width: 1024px) {

	.elementor-element-bp_split_usps_inner_sec > .elementor-container {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 0 !important;
		align-items: stretch !important;
	}

	.elementor-element-bp_split_usp_box_1_col,
	.elementor-element-bp_split_usp_box_2_col,
	.elementor-element-bp_split_usp_box_3_col {
		width: 100% !important;
		flex: 0 0 auto !important;
		padding: 14px 0 !important;
	}

	/* De streep alleen tússen de punten, dus niet onder de laatste. */
	.elementor-element-bp_split_usp_box_1_col,
	.elementor-element-bp_split_usp_box_2_col {
		border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	}

	.elementor-element-bp_split_usp_box_1_col {
		padding-top: 0 !important;
	}

	.elementor-element-bp_split_usp_box_3_col {
		padding-bottom: 0 !important;
	}

	/* Icoon naast de tekst in plaats van erboven */
	.elementor-element-bp_split_usps_inner_sec .elementor-icon-box-wrapper {
		flex-direction: row !important;
		align-items: center !important;
		gap: 14px;
		text-align: left !important;
	}

	.elementor-element-bp_split_usps_inner_sec .elementor-icon-box-icon {
		flex: 0 0 auto !important;
		width: auto !important;
		margin: 0 !important;
	}

	.elementor-element-bp_split_usps_inner_sec .elementor-icon-box-content {
		flex: 1 1 auto !important;
		text-align: left !important;
	}

	.elementor-element-bp_split_usps_inner_sec .elementor-icon-box-title {
		margin: 0 !important;
	}
}


/* ==========================================================================
   PROCESSTAPPEN OP TELEFOON

   De vijf stappen stonden onder elkaar in hun desktopvorm: icoon gecentreerd
   bovenaan, daaronder de titel, daaronder de tekst, met 32px gat tussen de
   stappen. Vijf keer 145px maakte de sectie 936px hoog voor vijf zinnen.

   Hieronder wordt elke stap een regel -- icoon links, titel en tekst rechts --
   met een hairline ertussen, net als bij de punten in het groene vlak.
   ========================================================================== */
@media (max-width: 767px) {

	.elementor-section.elementor-element-bp_process_steps_sec > .elementor-container {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 0 !important;
		align-items: stretch !important;
	}

	.elementor-section.elementor-element-bp_process_steps_sec > .elementor-container > .elementor-column {
		width: 100% !important;
		flex: 0 0 auto !important;
	}

	.elementor-section.elementor-element-bp_process_steps_sec > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding: 15px 0 !important;
	}

	/* De streep alleen tussen de stappen */
	.elementor-section.elementor-element-bp_process_steps_sec > .elementor-container > .elementor-column:not(:last-child) {
		border-bottom: 1px solid rgba(26, 46, 33, 0.10);
	}

	.elementor-section.elementor-element-bp_process_steps_sec > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap {
		padding-top: 0 !important;
	}

	.elementor-section.elementor-element-bp_process_steps_sec > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap {
		padding-bottom: 0 !important;
	}

	/* Icoon naast de tekst in plaats van erboven */
	.elementor-element-bp_process_steps_sec .elementor-icon-box-wrapper {
		flex-direction: row !important;
		align-items: flex-start !important;
		gap: 16px !important;
		text-align: left !important;
	}

	.elementor-element-bp_process_steps_sec .elementor-icon-box-icon {
		flex: 0 0 28px !important;
		width: 28px !important;
		margin: 0 !important;
	}

	.elementor-element-bp_process_steps_sec .elementor-icon-box-content {
		flex: 1 1 auto !important;
		min-width: 0;
		text-align: left !important;
	}

	/* Titel met de gouden badge naar links; stond op justify-content: center */
	.elementor-element-bp_process_steps_sec .elementor-icon-box-title {
		justify-content: flex-start !important;
		text-align: left !important;
		margin: 0 0 4px !important;
	}

	.elementor-element-bp_process_steps_sec .elementor-icon-box-description {
		max-width: 100% !important;
		margin: 0 !important;
		text-align: left !important;
	}

	/* Sectie zelf hoeft onderaan minder lucht nu de stappen compact zijn */
	.elementor-section.elementor-element-bp_process_steps_sec {
		padding-bottom: 40px !important;
	}
}


/* ==========================================================================
   BLOGKAART OP TELEFOON

   De kaart zat qua vorm goed, maar de binnenkant was los: 24px rondom, de
   titel op 20px, en "Lees meer" plakte direct onder de samenvatting met een
   regelhoogte van 30px in een blok van 46px -- dat leest als een gat in plaats
   van als een keuze.

   De streep boven "Lees meer" is dezelfde als in de modelkaart, zodat beide
   kaarten op de homepage hun voetregel op dezelfde manier afsluiten.
   ========================================================================== */
@media (max-width: 767px) {

	.bp-bs-body {
		padding: 20px 20px 12px !important;
	}

	.bp-bs-title {
		font-size: 19px !important;
		line-height: 1.25 !important;
		margin: 0 0 8px !important;
	}

	.bp-bs-excerpt {
		font-size: 13px !important;
		line-height: 1.5 !important;
		margin: 0 !important;
	}

	/* Volle breedte, want anders loopt de streep alleen onder de tekst door.
	   De padding houdt het aanraakvlak op 44px zonder losse regelhoogte. */
	.bp-bs-more {
		display: flex !important;
		align-items: center !important;
		align-self: stretch !important;
		width: 100% !important;
		margin-top: 14px !important;
		padding: 12px 0 !important;
		border-top: 1px solid #eceae4;
		line-height: 1.4 !important;
		min-height: 0 !important;
	}

	/* Navigatie dichter op de kaart */
	.bp-bs-nav {
		margin-top: 22px !important;
	}
}


/* ==========================================================================
   FOOTER OP TELEFOON

   De inspringing telde dubbel op: de footer zelf had 60px zijpadding en de
   container daarbinnen nog eens 60px. Op een scherm van 375px bleef daar een
   container van 135px over, terwijl de kolommen 188px breed waren -- de inhoud
   stak dus buiten zijn eigen container uit. Dat is wat de uitlijning sloopte.

   De 24px die hier eerder stond verloor van de gedeelde regel voor alle
   -container elementen (die staat op !important), vandaar dat de padding nu
   op de footer zelf zit en de container op nul gaat.
   ========================================================================== */
@media (max-width: 767px) {

	.bp-footer {
		padding: 56px 24px 28px !important;
	}

	.bp-footer-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: 100% !important;
	}

	/* Kolommen als blokken met een scheiding ertussen */
	.bp-footer-grid {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
		margin-bottom: 0 !important;
	}

	.bp-footer-col {
		padding: 26px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	}

	.bp-footer-col:first-child {
		padding-top: 0;
	}

	.bp-footer-col:last-child {
		border-bottom: none;
	}

	.bp-footer-title {
		margin-bottom: 12px !important;
	}

	/* Snelkoppelingen: elke regel 44px hoog, zonder extra gat ertussen. De
	   aanraakregel eerder in dit bestand zette min-height 44 boven op een gap
	   van 12px, wat 56px per link opleverde. */
	.bp-footer-links {
		gap: 0 !important;
	}

	.bp-footer-links a {
		display: block !important;
		min-height: 0 !important;
		padding: 11px 0 !important;
		line-height: 22px !important;
	}

	.bp-footer-contact a {
		min-height: 0 !important;
		line-height: 22px !important;
	}

	.bp-footer-contact {
		gap: 12px !important;
	}

	.bp-footer-cta-desc {
		margin-bottom: 16px !important;
	}

	/* Onderbalk links uitlijnen in plaats van gecentreerd: nu de hele footer
	   op 24px begint, viel gecentreerde copyright er als enige buiten. */
	.bp-footer-bottom {
		display: block !important;
		padding-top: 22px !important;
	}

	.bp-footer-bottom > p:first-child,
	.bp-footer-credit {
		text-align: left !important;
		justify-self: start !important;
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		white-space: normal !important;
	}

	.bp-footer-bottom > p:first-child {
		margin-bottom: 6px !important;
	}
}


/* ==========================================================================
   HAMBURGER- EN SLUITKNOP

   reset.css van het moederthema zet [type="button"]:hover op #cc3366 (roze).
   De knop in de header is een <button type="button">, dus die kleurde roze
   zodra je hem aanraakte -- en op telefoon blijft :hover na een tik hangen,
   waardoor het kruisje roze bleef staan. Hieronder wordt dat overal geweerd.
   ========================================================================== */
.bp-nav-toggle,
.bp-nav-toggle:hover,
.bp-nav-toggle:focus,
.bp-nav-toggle:focus-visible,
.bp-nav-toggle:active {
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none;
}

.bp-nav-toggle:focus-visible {
	outline: 2px solid var(--bp-gold, #e2b774);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Zodra het menu openstaat ligt de knop op de lade: dan altijd goud. */
@media (max-width: 1024px) {
	.bp-nav-toggle {
		position: relative;
		z-index: 1000;
	}

	.bp-header.bp-nav-open .bp-nav-toggle,
	.bp-header-dark.bp-nav-open .bp-nav-toggle {
		color: var(--bp-gold, #e2b774) !important;
	}

	.bp-header.bp-nav-open .bp-nav-toggle-bar {
		background: var(--bp-gold, #e2b774) !important;
	}
}


/* ==========================================================================
   LOGOKLEUR

   De SVG stond op currentColor zodat hetzelfde logo in de balk én in de
   uitklaplade gebruikt kan worden. Daardoor telt de kleur van de <a> mee, en
   reset.css zet die op #cc3366. Vroeger viel dat niet op omdat de lijnen
   #ffffff hardgecodeerd hadden -- wat op de lichte balk van de binnenpagina's
   juist een onzichtbaar logo opleverde.
   ========================================================================== */
.bp-header .bp-logo {
	color: #ffffff;
}

.bp-header .bp-logo .bp-logo-icon-wrap {
	display: inline-flex;
	color: inherit;
}

/* bp-header-dark is een DONKERE balk (#143525), geen lichte -- de naam
   suggereert het omgekeerde. Het beeldmerk blijft daar dus gewoon wit, net
   als op de voorpagina. */

/* In de lade blijft het beeldmerk goud, ongeacht de balkvariant */
.bp-header .bp-nav-panel-logo .bp-logo-icon-wrap,
.bp-header.bp-header-dark .bp-nav-panel-logo .bp-logo-icon-wrap {
	color: var(--bp-gold, #e2b774);
}

.bp-header .bp-nav-panel-logo .bp-logo-text,
.bp-header.bp-header-dark .bp-nav-panel-logo .bp-logo-text {
	color: #ffffff;
}


/* ==========================================================================
   ARTIKELPAGINA -- BOVENKANT EN MOBIEL

   Drie dingen zaten hier fout:

   1. Het label boven de titel had wel pilvorm (radius 20px, padding 6/16) maar
      geen achtergrond en geen rand, en het was 1280px breed. Er stond dus
      alleen gecentreerde kapitaaltekst met onzichtbare pil-opmaak omheen.

   2. Het kruimelpad herhaalt de volledige artikeltitel, die er direct onder
      nog een keer als kop staat. Op telefoon brak dat over twee regels.

   3. .bp-single-grid stond op grid-template-columns: 1fr, maar rastercellen
      hebben min-width:auto. De kolom werd daardoor 627px breed in een
      container van 335 -- artikel en zijbalk liepen 272px buiten beeld. Dat
      viel niet op omdat de body horizontaal clipt, maar de tekst was wel weg.
   ========================================================================== */

/* --- Het label als echte pil ---------------------------------------------- */
/* Dit bestand had de pil-opmaak al klaarstaan op .bp-single-badge-tag > span,
   met .bp-single-badge-tag zelf als doorzichtige centreerwikkel. De sjablonen
   zetten er alleen platte tekst in, dus de pil had niets om op te landen. De
   span staat er nu wel in (single.php, archive.php, home.php, page-blog.php)
   en de bestaande regels doen de rest. */

/* --- Bovenkant strakker op desktop ---------------------------------------- */
.bp-single-hero {
	padding-top: 44px;
}

.bp-single-breadcrumb {
	margin-bottom: 20px;
}

.bp-single-badge-tag {
	margin-bottom: 16px;
}

.bp-single-title {
	margin-bottom: 18px;
}

/* --- Telefoon ------------------------------------------------------------- */
@media (max-width: 900px) {

	/* De rastercel mag krimpen. Zonder deze regel houdt min-width:auto de
	   kolom op de breedte van zijn inhoud. */
	.bp-single-grid > * {
		min-width: 0;
	}
}

@media (max-width: 767px) {

	.bp-single-hero {
		/* De uitgelichte afbeelding schuift met margin-top:-60px over de
		   onderkant heen, dus die 60px moet in de onderpadding blijven zitten. */
		padding: 26px 20px 72px;
	}

	/* Eén regel met beletselteken in plaats van twee regels die de kop eronder
	   woordelijk herhalen. */
	.bp-single-breadcrumb {
		margin-bottom: 16px;
		font-size: 13px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bp-single-badge-tag {
		margin-bottom: 14px;
	}

	/* De pil is de span (of de heading bij een Elementor-widget), niet de
	   wikkel. Lettergrootte op de wikkel zetten deed niets: de span heeft een
	   eigen font-size met !important. */
	div.bp-single-badge-tag > span,
	.bp-single-badge-tag .elementor-heading-title {
		font-size: 11px !important;
		letter-spacing: 1.1px !important;
		padding: 6px 16px !important;
	}

	.bp-single-title {
		font-size: 26px !important;
		line-height: 1.22;
		margin-bottom: 14px;
	}

	.bp-single-meta {
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px 8px;
		font-size: 13px;
	}

	/* Naam, datum en leestijd niet laten afbreken; de rij wikkelt liever. */
	.bp-single-meta > * {
		white-space: nowrap;
	}

	/* 48px rondom liet op 375px maar 239px over voor de tekst. */
	.bp-single-article {
		padding: 24px 20px;
	}

	.bp-single-grid {
		gap: 28px;
	}

	.bp-single-featured-img {
		height: 220px;
	}

	.bp-single-related-section {
		padding: 44px 0;
	}

	/* De oproepdoos is een flexrij met space-between. Op 375px bleef er 293px
	   over voor een tekst plus een knop van 247px die niet mag afbreken --
	   die liep daardoor 159px buiten beeld. Onder elkaar past het wel. */
	/* 36px rondom liet maar 221px over voor de knop, terwijl die 243px nodig
	   heeft om zijn tekst op een regel te houden. Met 22px blijft er 249px
	   over -- net genoeg, en de doos oogt nog steeds ruim. */
	.bp-single-cta-box {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 24px 22px !important;
	}

	/* De basisregel zet display, padding en white-space allemaal met
	   !important, dus dat is hier ook nodig. Zonder white-space:normal blijft
	   de tekst op een regel staan terwijl de knop maar 221px breed is: de
	   tekst vraagt 195px plus 52px padding, en het pijltje viel daardoor
	   26px buiten het gouden vlak. */
	.bp-single-cta-box .bp-btn-gold,
	.bp-single-sidebar .bp-btn-gold {
		display: block !important;
		width: 100% !important;
		padding: 14px 18px !important;
		text-align: center !important;
		white-space: normal !important;
		flex-shrink: 1 !important;
		box-sizing: border-box;
	}
}


/* De balk hield op telefoon 60px zijpadding aan: de gedeelde regel voor alle
   -container elementen staat op !important en won van de 24px die hier eerder
   stond. Met dezelfde specificiteit klopt het wel. Zonder dit begint het logo
   op 60px terwijl de inhoud eronder op 20px staat. */
@media (max-width: 767px) {
	.bp-header .bp-header-container,
	.bp-header-container {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}


/* Tablet: de artikel- en archiefpagina's hielden 20px zijruimte aan terwijl de
   balk erboven en de secties op de homepage daar op 60px staan. Een sprong van
   40px, precies in het bereik waar geen van beide zich aanpast.

   De balk naar 20px trekken zou het omgekeerde probleem geven -- dan loopt de
   homepage uit de pas. Deze pagina's schuiven dus mee naar 60px. */
@media (min-width: 768px) and (max-width: 1024px) {
	.bp-single-hero,
	.bp-archive-hero {
		padding-left: 60px;
		padding-right: 60px;
	}

	.bp-single-featured-container,
	.bp-single-content-container,
	.bp-single-related-container,
	.bp-archive-main-container {
		padding-left: 60px !important;
		padding-right: 60px !important;
	}
}


/* ==========================================================================
   CONTACTPAGINA -- TITELSECTIE COMPACTER EN FORMULIER SMALLER

   De kop stond op telefoon op 32px met regelhoogte 40px en liep daardoor over
   VIJF regels: 184px alleen voor de titel, in een sectie van 511px. Samen met
   de introtekst van 178px vulde de bovenkant bijna anderhalf scherm voor je
   ook maar iets van het formulier zag.

   Het formulier liep met 355px op een scherm van 375px vrijwel van rand tot
   rand, terwijl de rest van de site 20px marge aanhoudt.
   ========================================================================== */

/* Op desktop blijft de container op zijn eigen 767px staan: die sectie heeft
   daar twee kolommen (formulier 66%, contactblok 33%). Versmallen tot 660px
   kneep het contactblok naar 220px, en dat werd te krap. De versmalling geldt
   dus alleen waar de kolommen toch al onder elkaar staan. */
@media (max-width: 1024px) {
	.elementor-element-973ee822 > .elementor-container {
		max-width: 640px !important;
	}
}

@media (max-width: 767px) {

	/* --- Titelsectie --- */
	/* Drie klassen diep, want de bestaande regel voor deze kop is dat ook
	   (.elementor-widget-heading.bp-contact-hero-title .elementor-heading-title
	   op 46px !important). Met twee klassen verlies je daarvan. */
	.elementor-widget-heading.bp-contact-hero-title .elementor-heading-title,
	.elementor-element-6d07b875.bp-contact-hero-title .elementor-heading-title {
		font-size: 26px !important;
		line-height: 1.18 !important;
	}

	.elementor-element-6d07b875 {
		margin-top: 10px !important;
		margin-bottom: 10px !important;
	}

	.elementor-element-189747ad {
		margin-bottom: 14px !important;
	}

	.elementor-element-e78a6857 {
		font-size: 15px !important;
	}

	.elementor-element-e78a6857 p {
		line-height: 1.5 !important;
		margin: 0 !important;
	}

	.elementor-element-559f0c06 {
		padding-bottom: 28px !important;
	}

	/* --- Formulier: 20px marge net als de rest van de site --- */
	.elementor-element-067a8188 > .elementor-widget-wrap {
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-top: 32px !important;
	}
}


/* ==========================================================================
   BLOGPAGINA OP TELEFOON

   Twee dingen liepen mis:

   1. .bp-featured-post-card is een raster van 1.2fr 1fr en had geen enkele
      mobiele regel. Rastercellen staan op min-width:auto, dus de tekstkolom
      nam alles (343px) en de fotokolom hield 0px over. De foto zat er wel --
      als inline background-image -- maar was onzichtbaar. En omdat het label
      absoluut in die lege kolom hangt, viel het boven op de categorietekst
      van de kolom ernaast.

   2. De filterbalk brak af op 2 + 1 + 1 met knoppen van ongelijke breedte,
      en het zoekveld stond op een vaste 260px terwijl de knoppen tot 268
      liepen. Als raster van twee gelijke kolommen staat het rustig.
   ========================================================================== */
@media (max-width: 767px) {

	/* --- Uitgelicht artikel --- */
	.bp-featured-post-card {
		grid-template-columns: 1fr !important;
	}

	.bp-featured-post-card > * {
		min-width: 0;
	}

	/* Foto weer zichtbaar als band boven de tekst; het label ligt er nu
	   overheen zoals bedoeld in plaats van over de categorie. */
	.bp-featured-img-col {
		min-height: 190px !important;
	}

	.bp-featured-content-col {
		padding: 24px 20px !important;
	}

	.bp-featured-title {
		font-size: 24px !important;
		line-height: 1.22 !important;
	}

	.bp-featured-excerpt {
		font-size: 15px !important;
		line-height: 1.5 !important;
	}

	.bp-featured-post-card {
		margin-bottom: 36px !important;
	}

	/* --- Filterbalk --- */
	.bp-filter-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 16px;
	}

	.bp-filter-tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	/* min-width:0 is hier nodig: zonder dat kan een rastercel niet smaller
	   worden dan zijn inhoud, en "Duurzaamheid & Groendak" vraagt op een
	   regel 186px. De twee kolommen liepen daardoor samen tot x=411 op een
	   scherm van 375. Met afbreken past de tekst wel. */
	.bp-filter-tabs > * {
		min-width: 0;
	}

	.bp-filter-btn {
		width: 100%;
		min-width: 0;
		padding: 11px 8px;
		font-size: 13px;
		line-height: 1.25;
		text-align: center;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.bp-search-box {
		width: 100%;
	}

	.bp-search-box input {
		width: 100% !important;
		box-sizing: border-box;
	}
}