@import url("reset.less");
@import url("woocommerce-assets/css.less");

/*------------------------------------------------------------------------ Global ------------------------------------------------------------------------*/

// WordPress admin bar (alleen ingelogd): de vaste header eronder plaatsen,
// zodat de balk net als in het dashboard bovenaan zichtbaar blijft.
body.admin-bar #header { top: 32px; }
@media screen and (max-width: 782px) {
	// body.admin-bar #header { top: 46px; }
}

// Topbar-strip binnen de vaste header: USP's (menu-locatie "usps") links, Google-rating rechts.
#header .header_topbar {
	padding-bottom: .55rem;
	margin-bottom: .75rem;
	border-bottom: 1px solid @neutraal_licht;

	.header_topbar_inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
		font-size: .85rem;
		color: @neutraal_donker;
		min-height: 24px;
	}

	.topbar_usps {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 1.25rem;
		min-width: 0;
		// Nooit over de rating heen lopen: wat niet past wordt afgekapt en
		// js.js (bbFitTopbarUsps) verbergt de USP's die niet passen helemaal.
		overflow: hidden;

		.mega_usp {
			flex-shrink: 0;

			&.bb-usp-verborgen { display: none !important; }

			display: inline-flex;
			align-items: center;
			gap: .35rem;
			font-size: .8rem !important;
			line-height: 1.2;
			white-space: nowrap;

			// Past niet naast de rating op smallere desktops: vanaf de 4e USP weglaten
			@media only screen and (max-width: 1399px) {
				&:nth-child(n+4) { display: none; }
			}

			i {
				color: @geel;
				font-size: 1rem;
				line-height: 1;
			}

			.menu_icon {
				display: inline-flex;
				color: @geel;

				svg { width: 16px; height: 16px; display: block; }
			}

			span { .light; }
		}
	}

	.topbar_rating {
		margin-left: auto;
		flex-shrink: 0;
	}

	// Mobiel: alleen de USP's met klasse "usp-mobiel", gecentreerd op één regel
	@media only screen and (max-width: 992px) {
		.header_topbar_inner { justify-content: center; }

		.topbar_usps {
			flex-wrap: nowrap;
			gap: 1rem;

			.mega_usp:not(.usp-mobiel) { display: none; }
			.mega_usp { font-size: .8rem !important; white-space: nowrap; }
		}

		.topbar_usps + .topbar_rating { display: none; }
	}
}
// De vaste header wordt hoger met de topbar; content-offset meegroeien.
// Dit is de CSS-standaard (tegen flikkering); de JS zet 'm daarna exact op de
// werkelijke header-hoogte (zie bb-header-offset in js.js) — ook goed op mobiel.
body.has-google-topbar .page_content { margin-top: 200px; }

// Een pagina kan meerdere .page_content-blokken hebben (bv. de PDP: product +
// gerelateerde-blok). Alleen de EERSTE zit onder de vaste header; de rest krijgt
// geen header-offset. !important omdat de offset-regels hierboven specifieker zijn.
.page_content ~ .page_content { margin-top: 0 !important; }

// Taak: compacte header bij naar beneden scrollen (1 slanke regel: logo + zoek + cart)
// met een SMOOTH overgang. Topbar + menu klappen soepel dicht (max-height/opacity)
// i.p.v. display:none. De .scrolled-class komt van de header-scroll-JS (weg bij
// omhoog scrollen).
#header {
	// Alleen de topbar klapt soepel dicht met max-height/overflow — die heeft geen
	// submenu's. NIET op .menu_box zetten: dat kapt de mega-menu-dropdowns af.
	.header_topbar {
		overflow: hidden;
		max-height: 120px;
		opacity: 1;
		transition: max-height .3s ease, opacity .25s ease, margin .3s ease, padding .3s ease;
	}
}
#header.scrolled {
	padding-top: .4rem;
	padding-bottom: .4rem;

	.navbar-brand { height: 38px; }     // logo iets kleiner

	.header_topbar {
		max-height: 0;
		opacity: 0;
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 0;
		padding-bottom: 0;
		border-bottom-width: 0;         // voorkomt een reststreepje bij hoogte 0
	}

	// Menu verbergen bij scrollen. display:none (i.p.v. max-height/overflow) zodat
	// de submenu's in de normale staat NIET worden afgekapt.
	.menu_box { display: none; }
}

#header {
	position: fixed;
	top: 0;
    z-index: 999;
    width: 100%;
    padding: 1rem 0;
	background: @neutraal_extra_licht;
	.shadow_style;
	.transition;

	.navbar-brand {
		width: 100%;
		height: 47px;
		display: block;
		background-image: url('../images/logo.svg');
		background-size: contain;
		background-position: left center;
		background-repeat: no-repeat;
		.transition;
	}

	// Minimale header op de afrekenpagina: alleen een gecentreerd logo
	&.header_minimal {
		.navbar-brand {
			width: 180px;
			max-width: 60vw;
			margin: 0 auto;
			background-position: center;
		}
	}

	.searchform {
		position: relative;

		form {
			background: @wit;
			color: @neutraal;
			border-radius: .5rem;
			border: 1px solid @neutraal_licht;
			overflow: hidden;
		}

		input[type="text"] {
			width: 100%;
			margin-bottom: 0 !important;
			padding: 0 .75rem 0 0 !important;
			border: none;

			&::placeholder {
				font-style: italic !important;
			}
		}

		button[type="submit"] {
			padding: .5rem .5rem .5rem 1rem !important;
			border: none !important;
			display: block !important;
			width: max-content !important;
			background: @wit !important;
			color: @grey !important;
			margin: 0 !important;
		}

		// Live-search dropdown
		.search_results {
			position: absolute;
			top: calc(100% + .5rem);
			left: 50%;
			right: 0;
			width: max-content;
			max-width: 90vw;
			transform: translateX(-50%);
			z-index: 1000;
			display: none;
			background: @wit;
			border: 1px solid @neutraal_licht;
			border-radius: .75rem;
			box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
			overflow: hidden;

			&.open { display: block; }

			.search_results_inner { padding: 1.5rem; }

			.results_count {
				.small;
				color: @neutraal;
				margin-bottom: 1rem;

				&.empty { margin-bottom: 0; }
			}

			.results_cols {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 1.5rem;
			}

			.results_col {

				& + .results_col {
					border-left: 1px solid @neutraal_licht;
					padding-left: 1.5rem;
				}

				.col_head {
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 1rem;
					margin-bottom: 1rem;

					h3 {
						color: @zwart;
						display: flex;
						align-items: center;
						gap: .5rem;
					}

					.view_all {
						.small;
						color: @zwart;
						background: @wit;
						border: 1px solid @neutraal_licht;
						border-radius: .5rem;
						padding: 8px 20px 6px 20px;
						white-space: nowrap;
						.transition;

						&:hover {
							border-color: @cta;
							color: @cta;
						}
					}
				}

				ul {
					list-style: none;
					margin: 0;
					padding: 0;
				}

				li a {
					display: flex;
					align-items: center;
					gap: 1rem;
					padding: .5rem;
					border-radius: .5rem;
					.transition;

					&:hover { background: @neutraal_extra_licht; }

					img {
						width: 94px;
						height: 94px;
						flex: 0 0 auto;
						object-fit: cover;
						border-radius: .5rem;
						background: @neutraal_extra_licht;
					}
				}

				.col_empty {
					.small;
					color: @neutraal;
				}
			}

			.results_col.products {

				.meta {
					display: flex;
					flex-direction: column;
					gap: .15rem;

					strong { color: @zwart; }

					.bb-stars {
						display: flex;
						gap: 2px;
						color: #F79E1B;
						font-size: .85rem;
						line-height: 1;
						margin: .1rem 0;
					}

					.prijs {
						color: @zwart;
						.large;

						del { .light; color: @neutraal; }
						ins { text-decoration: none; }
					}
				}
			}

			.results_col.categories {

				li a span {
					color: @zwart;
					.large;
				}
			}

			@media only screen and (max-width: 992px) {
				// Vul de zoekbalkbreedte i.p.v. gecentreerd op content
				left: 0;
				right: 0;
				width: auto;
				max-width: none;
				transform: none;
				// Scroll binnen de dropdown als er weinig schermhoogte is
				max-height: 70vh;
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;

				.search_results_inner { padding: 1rem; }

				.results_cols {
					grid-template-columns: 1fr;
					gap: 1rem;
				}

				.results_col {

					& + .results_col {
						border-left: none;
						padding-left: 0;
						padding-top: 1rem;
						border-top: 1px solid @neutraal_licht;
					}

					.col_head {
						gap: .5rem;

						.view_all {
							padding: 6px 12px 4px 12px;
						}
					}

					li a {
						gap: .75rem;

						img {
							width: 64px;
							height: 64px;
						}
					}
				}
			}
		}
	}

	// Vergelijk / Account / Winkelwagen rechts in de header: icoon met label eronder
	.header_icons {
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		gap: 1.5rem;
	}

	.header_icon {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: .3rem;
		color: @zwart;
		text-decoration: none;
		flex-shrink: 0;
		.transition;

		&:hover { color: @geel; }

		i {
			font-size: 1.5rem;
			line-height: 24px;
			height: 24px;
		}

		// Vergelijk: de plugin zet icoon + tekst in een extra span (voor de teller);
		// die ook onder elkaar zetten, net als Account en Winkelwagen.
		.woosc-menu-item-inner {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: .3rem;

			// Teller pas tonen als er iets te vergelijken is
			&[data-count="0"]::after { display: none !important; }
		}

		.header_icon_label {
			font-size: .75rem !important;
			line-height: 1;
			.light;
		}

		.header_icon_img {
			position: relative;
			display: block;
			height: 24px;

			img {
				display: block;
				height: 24px;
				width: auto;
			}
		}

		.cart_count {
			position: absolute;
			top: -10px;
			right: -12px;
			background: @wit;
			color: @zwart;
			border-radius: 100%;
			min-width: 18px;
			height: 18px;
			padding: 4px;
			font-size: .75rem;
			font-weight: 700;
			line-height: 1;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
	}

	// Hoofdmenu (UX-voorstel v2): mega-dropdown met kolommen Refurbished / Nieuw.
	// Markup: helloitsme_mega_menu() in functions.php; openen/sluiten op klik via js.js.
	.menu_box {
		width: 100%;
		background: @wit;
		margin-top: 1rem;
		border-radius: 1rem;

		.mega_menu {
			list-style-type: none;
			margin: 0;
			padding: 1rem 2rem;
			display: flex;
			gap: 2rem;
			position: relative;
			border-radius: 1rem;

			&:has(.menu-item-has-children.open) {
				box-shadow: 0 8px 16px -11px rgba(0, 0, 0, 0.25);
			}

			> li {

				> a, > span {
					color: #334155;
					.light;
					.transition;

					&:hover {
						color: @zwart;
					}
				}

				&.current-menu-item > a,
				&.current-menu-ancestor > a {
					color: @zwart;
					.bold;
				}

				// Contact / Onze winkel / Reparaties rechts, iets rustiger
				&.nav-secondary {

					> a { color: @neutraal_donker; }
				}

				&:not(.nav-secondary) + .nav-secondary {
					margin-left: auto;
				}

				&.menu-item-has-children {
					cursor: pointer;
					margin-right: 16px;

					> a {
						padding-right: 5px;
						position: relative;

						&:after {
							content: "";
							position: absolute;
							top: 50%;
							left: 100%;
							transform: translate(0, -50%);
							background-image: url('../images/down.svg');
							width: 8px;
							height: 100%;
							background-size: contain;
							background-repeat: no-repeat;
							background-position: center;
							.transition;
						}
					}

					&.open {

						> a {
							color: @zwart;

							&:after {
								transform: translate(0, -50%) rotate(180deg);
							}
						}

						> .mega {
							display: block;
						}
					}
				}
			}

			.mega {
				display: none;
				position: absolute;
				top: 100%;
				left: 0;
				width: 100%;
				transform: translateY(-1rem);
				background: @wit;
				border-radius: 0 0 1rem 1rem;
				box-shadow: 0 8px 16px -11px rgba(0, 0, 0, 0.25);
				overflow: hidden;
				cursor: default;
				z-index: 10;
			}

			.mega_grid {
				display: flex;
				gap: 3rem;
				align-items: flex-start;
				padding: 2rem 2rem 1.5rem 2rem;
			}

			.mega_col {
				flex: 0 0 auto;
				min-width: 240px;

				// Refurbished altijd eerst, met een scheiding naar de kolom Nieuw
				&.kolom-refurbished {
					border-right: 1px dashed @neutraal_licht;
					padding-right: 3rem;
				}

				&.mega_col_links {
					flex: 0 1 auto;
				}

				.mega_titel {
					margin-bottom: .75rem;

					a, span {
						font-size: .75rem !important;
						letter-spacing: .08em;
						text-transform: uppercase;
						color: @neutraal;
						.bold;
					}
				}
			}

			.mega_items {
				list-style: none;
				padding: 0;
				margin: 0;
				display: flex;
				flex-direction: column;
				gap: .25rem;

				// Lange lijsten (Accessoires) over 3 kolommen
				&.mega_items_cols {
					display: block;
					column-count: 3;
					column-gap: 3rem;

					li { break-inside: avoid; }
				}

				li {

					a, span {
						display: block;
						padding: 4px 0;
						color: #334155;
						.light;
						.transition;
					}

					a:hover { color: @zwart; }

					&.current-menu-item a { color: @zwart; .bold; }

					&.mega-alle a {
						color: @zwart;
						white-space: nowrap;
						.bold;

						i {
							font-size: .85em;
							margin-left: .25rem;
							.transition;
						}

						&:hover i { margin-left: .5rem; }
					}

					&.mega-scheiding {
						margin-top: .5rem;
						padding-top: .5rem;
						border-top: 1px solid @neutraal_licht;
					}
				}
			}

			// Uitgelicht product (menu-item met class "mega-featured")
			.mega_promo {
				flex: 0 0 240px;
				margin-left: auto;
				display: flex;
				flex-direction: column;
				gap: .5rem;
				padding: 1rem;
				border-radius: 1rem;
				background: @neutraal_extra_licht;
				color: @zwart;
				text-decoration: none;

				.mega_promo_label {
					font-size: .75rem !important;
					letter-spacing: .08em;
					text-transform: uppercase;
					color: @neutraal;
					.bold;
				}

				.mega_promo_img {
					aspect-ratio: 4 / 3;
					border-radius: .5rem;
					background-color: @wit;
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}

				strong {
					font-size: .9rem !important;
					.bold;
				}

				.mega_promo_price {
					.bold;

					del { color: @neutraal; .light; margin-right: .25rem; }
					ins { text-decoration: none; }
				}
			}
		}
	}
}

input {
	-webkit-appearance: auto !important;
}

input[type="email"] {
	border: none !important;
	border-radius: .5rem !important;
	background: @wit !important;
	padding: 12px !important;
	font-size: 1rem !important;
	color: @neutraal !important;

	&::placeholder {
		font-size: 1rem !important;
		color: @neutraal !important;
	}

	&:focus {
		outline: none !important;
        box-shadow: none !important;
	}
}

input[type="submit"],
button[type="submit"] {
	background: @geel !important;
	color: @wit !important;
	border-radius: .5rem !important;
	border: none;
	.transition !important;

	&:hover {
		background: @neutraal_extra_licht !important;
		color: @zwart !important;
	}
}

.nieuwsbrief {

	form {
		display: flex;
		gap: .5rem;

		.gform_footer {
			margin: 0;
		}
	}
}

button {

	&.filter_button {
		padding: 14px 20px 12px 20px !important;
		border-radius: 10px !important;
		background: @geel !important;
		color: @zwart !important;
		.transition !important;

		&:hover {
			background: @neutraal_extra_licht !important;
		}
	}
}

.button {
	padding: 12px;
	border-radius: 8px;
	
	&.d-block {
		display: block;
		width: max-content;
	}

	&.geel {
		background: @geel;
		color: @wit;
		.transition;

		&:hover {
			background: @cta_alt;
		}
	}

	&.blauw {
		background: @cta_blauw;
		color: @wit;
		.transition;

		&:hover {
			background: @cta_alt;
		}
	}

	&.cta {
		background: @cta_alt;
		color: @wit;
		.transition;

		&:hover {
			background: @neutraal_extra_licht;
			color: @zwart;
		}
	}

	&.outline {
		
		&.geel {
			border: 1px solid @geel;
			background: transparent;
			color: @geel;
		}

		&.wit {
			border: 1px solid @neutraal_licht;
			background: @wit;
			color: @zwart;
		}
	}

	&.icon {

		i {
			display: inline-block;
			.transition;
		}

		&:hover {

			i {
				transform: translateX(5px);
			}
		}
	}

	&.small_padding {
		padding: 8px 20px 6px 20px;

		&.icon {
			padding: 4px 24px 4px 28px;

			i {
				font-size: .8rem;
				margin-left: 4px;
			}
		}
	}
}

.page_content {
	margin-top: 120px;

	.intro_slider_box {
		position: relative;
		
		.usps {
			position: absolute;
			top: 50%;
			right: 10%;
			transform: translateY(-50%);
			display: flex;
			gap: 12px;
    		flex-direction: column;

			.usp {
				background: @geel_licht;
				padding: 1rem 24px;
				border-radius: 12px;
			}
		}
	}

	.page_div {

		&.intro {
			padding: 50px 0;
			color: @zwart;
			height: 60vh;
			display: flex;
			align-items: center;
			position: relative;
			.background_style;

			a {
				color: @geel;
			}

			.categorie_box {
				background: rgba(189, 225, 220, 0.95);
				padding: 2rem;
				border-radius: 12px;
				width: max-content;
				max-width: 460px;

				p {
					color: @zwart;
				}
			}
		}

		&.intro_subpagina {
			color: @wit;
			position: relative;
			.background_style;

			&:after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-image: linear-gradient(to top, @zwart, transparent);
				opacity: .8;
			}

			.row {
				position: relative;
				z-index: 10;
			}
		}

		&.categorieen {
			color: @zwart;
			overflow-x: hidden;

			.categorie_box {
				background: @neutraal_extra_licht;
				color: @zwart;
				padding: 1.5rem;
				border-radius: 1rem;
				overflow: hidden;
				position: relative;

				.content {
					width: 70%;
				}

				.shape {
					position: absolute;
					top: 0;
					right: 0;
					width: 30%;
					height: 100%;
					background: @geel;
					padding: .5rem;
    				border-radius: 84px 0 0 0;
					display: flex;
					align-items: center;

					img {
						width: 100%;
						aspect-ratio: 1;
						object-fit: cover;
						border-radius: 4px;
					}
				}
			}

			.categorie_box_4_om_4 {
				background: @neutraal_extra_licht;
				color: @zwart;
				border-radius: 1rem;
				overflow: hidden;

				.shape {
					display: flex;
					align-items: center;
					padding: .5rem;
					position: relative;

					&::after {
						content: "";
						position: absolute;
						top: 50%;
						left: 50%;
						width: 150%;
						height: 120%;
						transform: translate(-50%, -60%);
						background: @geel;
						border-radius: 100%;
					}

					img {
						width: 100%;
						aspect-ratio: 1;
						object-fit: contain;
						border-radius: 4px;
						position: relative;
						z-index: 10;
					}
				}

				.content {
					padding: 1.5rem;
				}
			}

			.categorie_box_zonder_geel {
				color: @zwart;
				background: @neutraal_extra_licht;
				border-radius: 1rem;
				padding: 1.5rem;
				overflow: hidden;

				.shape {
					width: 70%;
					margin: auto;

					img {
						width: 100%;
						aspect-ratio: 1;
						object-fit: contain;
						border-radius: 4px;
						position: relative;
						z-index: 10;
					}
				}
			}

			.slick-list {
				overflow: visible;
			}

			// Tegels even hoog, ook als een titel over twee regels loopt
			.slider:not(.slick-initialized) > .col > a { display: block; height: 100%; }
			.slider:not(.slick-initialized) .categorie_box_slider { height: 100%; }
			.slider:not(.slick-initialized) .image_box {
				height: 100%;
				aspect-ratio: auto;
				display: flex;
				flex-direction: column;
				align-items: center;

				img { height: 110px; flex: 0 0 auto; }
			}

			// Ook als slider (mobiel): alle slides zo hoog als de hoogste, zodat een
			// titel over twee regels de tegels niet ongelijk maakt.
			.slider.slick-initialized {
				.slick-track { display: flex; }
				.slick-slide { height: auto; display: flex; }
				.slick-slide > a { display: block; width: 100%; }
				.categorie_box_slider { height: 100%; }
				.image_box {
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;

					img { flex: 0 0 auto; height: auto; aspect-ratio: 16 / 15; }
				}
			}

			.categorie_box_slider {
				text-align: center;
				color: @zwart;

				.image_box {
					background: @wit;
					border: 1px solid #BDE1DC;
					border-radius: 12px;
					padding: 16px 16px 12px; // compacter (feedback)
					width: 100%;
    				aspect-ratio: 6 / 4;
					.transition;

					&:hover {
						background: @geel;
					}

					img {
						border-radius: .5rem;
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
			}

			.button {
				width: max-content;
				// margin: auto;
			}
		}

		&.producten {
			color: @zwart;

			.product_box {
				height: 550px;
				padding: 4rem 1.5rem;
				position: relative;
				.background_style;

				&:after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					background: @zwart;
					width: 100%;
					height: 100%;
					opacity: .2;
				}

				.content {
					position: relative;
					z-index: 10;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 100%;

					.product_title {
						font-size: 64px !important;
						line-height: 88px !important;
						text-transform: uppercase;
						color: @wit;
						opacity: .8;
					}

					.product_price {
						color: @wit;
						opacity: .9;
						
						h2 {
							.light;
						}

						span {
							color: @geel;
							font-size: 40px !important;
							line-height: 48px !important;
							.bold;
						}
					}
				}
			}

			.item {
				.him_product_card();
			}
		}

		&.tekst_afbeelding {
			color: @zwart;

			&.layout_6_6 {

				.tekst {

					p {
						font-size:unset !important; line-height:unset !important;
						color: @neutraal_donker;
					}
				}

				.afbeelding {
					max-height: 500px;
					object-fit: cover;
				}
			}

			.tekst {

				p {
					.large;
				}
			}

			.afbeelding {
				width: 100%;
				border-radius: .5rem;
			}
		}

		&.kolom {
			color: @zwart;

			.gform_required_legend {
				display: none;
			}

			input[type="text"],
			input[type="email"],
			input[type="tel"],
			input[type="number"],
			select,
			textarea {
				border: 1px solid @neutraal_licht !important;
				border-radius: .5rem !important;
				background: @wit !important;
				padding: 12px !important;
				font-size: 1rem !important;
				color: @neutraal !important;

				&::placeholder {
					font-size: 1rem !important;
					color: @neutraal !important;
					.light;
				}

				&:focus {
					outline: none !important;
					box-shadow: none !important;
				}
			}

			input[type="submit"],
			button[type="submit"] {
				background: @geel !important;
				color: @wit !important;
				border-radius: .5rem !important;
				border: none;
				.transition !important;

				&:hover {
					background: @neutraal_extra_licht !important;
					color: @zwart !important;
				}
			}

			.tekst {

				p {
					color: @neutraal_donker;
				}

				ul {

					li {
						.light;
						color: @neutraal_donker;
					}
				}

				h1, h2, h3, h4, h5, h6 {
					margin-bottom: 1rem !important;
				}

				a {
					.light;
					color: @zwart;
					text-decoration: underline;
				}
			}
		}

		&.showrooms {
			color: @zwart;

			&.alleen_showrooms {
				background: @neutraal_extra_licht;
				padding: 50px 0 !important;

				.showroom_box {
					
					img {
						height: 240px;
					}
				}
			}

			.afbeelding_box {
				height: 100%;
				width: 100%;
				.background_style;
			}

			.showroom_box {
				background: @wit;
				padding: 1rem;
				border-radius: 1rem;
				
				img {
					height: 120px;
					width: 100%;
					object-fit: cover;
					border-radius: 8px
				}

				.small {
					color: @neutraal_donker;
					text-transform: uppercase;
				}

				a {
					color: @zwart;
					.light;
				}

				.route {
					color: @cta;
					.light;
				}
			}

			.content {
				background: @geel;
				padding: 4rem 6rem;
				position: relative;

				&:after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					background: @wit;
					width: 100%;
					height: 75%;
					border-radius: 0 0 100% 0;
					opacity: .3;
				}

				* {
					position: relative;
					z-index: 10;
				}

				.usps {

					i {
						font-size: 20px !important;
						color: @cta;
					}
				}
			}
		}

		&.keuzehulp {
			color: @zwart;
			background-image: linear-gradient(to left, @neutraal_extra_licht 50%, @wit 50%);

			.afbeelding {
				width: 100%;
			}
		}

		&.specialisten_cta {
			color: @zwart;

			&.productpage {
				background: @neutraal_extra_licht;

				.specialisten_cta_box {
					padding: 50px 0;
				}
			}

			.specialisten_cta_box {
				height: 100%;
				padding: 40px;
				background: @neutraal_extra_licht;
				border-radius: 12px;

				&.voordelen {
					background: @geel_licht;
				}

				.afbeelding {
					width: 130px;
					aspect-ratio: 1;
					object-fit: cover;
					object-position: center;
					border-radius: 100px;
				}

				.inner_box {
					background: @geel;
					color: @wit;
					border-radius: 4px;
					padding: .8rem;

					svg {
						display: block;
    					min-width: 20px;
					}

					p {
						text-transform: uppercase;
					}

					a {
						color: @wit;
					}
				}
			}
		}

		&.volg_ons {
			background: linear-gradient(to bottom, @wit 20%, @geel_licht 20%);
			color: @zwart;
			
			.video {
				width: 100%;
				aspect-ratio: 16 / 9;
				overflow: hidden;
				border-radius: 12px;
				background: @zwart;

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

				iframe {
					width: 100%;
					height: 100%;
					border: 0;
					display: block;
				}
			}

			.video_lijst {
				display: flex;
				gap: 12px;
				margin-top: 12px;

				.video_item {
					flex: 1 1 0;
					min-width: 0;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					padding: 0;
					border: 0;
					background: none;
					text-align: left;
					color: @zwart;
					cursor: pointer;

					.video_thumb {
						position: relative;
						display: block;
						aspect-ratio: 16 / 9;
						overflow: hidden;
						border-radius: 8px;
						border: 2px solid transparent;
						.transition;

						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							display: block;
						}

						i {
							position: absolute;
							top: 50%;
							left: 50%;
							width: 32px;
							height: 32px;
							margin: -16px 0 0 -16px;
							border-radius: 50%;
							background: rgba(0, 0, 0, .6);
							color: @wit;
							font-size: 1.25rem;
							line-height: 32px;
							text-align: center;
						}
					}

					.video_titel {
						display: block;
						margin-top: 6px;
						font-size: .8125rem;
						line-height: 1.3;
					}

					&:hover .video_thumb,
					&.actief .video_thumb {
						border-color: @geel;
					}

					&.actief .video_thumb i {
						display: none;
					}
				}
			}
		}

		&.linkjes {
			color: @zwart;

			.items {
				gap: 1%;

				.item {
					width: 49.5%;

					.link {
						padding: 1rem;
						border: 1px solid #DDDDDD;
						border-radius: .5rem;
						background: @wit;
						color: @zwart;
					}
				}
			}
		}

		&.faq {
			color: @zwart;

			.onderwerp {
				background: @neutraal_extra_licht;
				color: @zwart;
				padding: 1rem 1.25rem;
				border-radius: .5rem;
				text-decoration: none;
				cursor: pointer;
				font-weight: 600;
				.transition;

				&:hover {
					background: @neutraal_licht;
				}

				&.active {
					background: @neutraal_donker;
					color: @wit;
				}
			}

			.faq_list {
				display: none;

				&.active {
					display: flex;
				}
			}

			.faq_item {
				background: @neutraal_extra_licht;
				border-radius: .5rem;
				overflow: hidden;

				.vraag {
					display: flex;
					align-items: center;
					gap: .75rem;
					padding: 1rem 1.25rem;
					border-bottom: 1px solid transparent;
					color: @zwart;
					text-decoration: none;
					cursor: pointer;
					.light;
					.transition;

					&:hover {
						background: @neutraal_licht;
					}

					i {
						flex-shrink: 0;
						.transition;
					}
				}

				.antwoord {
					max-height: 0;
					overflow: hidden;
					padding: 0 1.25rem;
					.transition;

					> div {
						padding: 1rem 0 1.25rem;

						p:last-child {
							margin-bottom: 0;
						}
					}
				}

				&.active {

					.vraag {
						border-bottom-color: @neutraal_licht;

						i {
							transform: rotate(90deg);
						}
					}

					.antwoord {
						max-height: 1000px;
					}
				}
			}
		}

		&.historie {
			color: @zwart;
			overflow-x: hidden;

			h2 {
				margin-bottom: 1rem;
			}

			.tijdlijn_item {

				.afbeelding_box {
					width: 90%;
					aspect-ratio: 4 / 3;
					border-radius: 1rem;
					overflow: hidden;
					margin-bottom: 1.5rem;

					.afbeelding {
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: center;
					}
				}

				.jaar_lijn {
					display: flex;
					align-items: center;
					margin-bottom: 1rem;

					.jaar {
						background: @wit;
						border: 1px solid #DDDDDD;
						border-radius: .5rem;
						padding: .4rem .8rem;
						.bold;
					}

					.lijn {
						flex: 1;
						border-top: 3px dashed @geel;
					}
				}
			}

			.slick-list {
				overflow: visible;
			}

			.slick-arrow {
				background: @wit;
  				border:1px solid @neutraal_donker;
				border-radius: 100%;
				width: 40px;
				height: 40px;
				color: @zwart;
				z-index: 5;

				&:before {
					color: @zwart;
				}
			}

			.slick-next {
				-webkit-transform: translate(100%, -50%) !important;
				-ms-transform: translate(100%, -50%) !important;
				transform: translate(100%, -50%) !important;
			}

			.slick-prev {
				display: none !important;
			}

			.slick-dots {
				width: 80%;
				margin: 0 10%;
			}

			.tekst {
				width: 90%;
			}
		}

		&.bedden_klanten {
			color: @zwart;
			overflow-x: hidden;

			h2 {
				margin-bottom: 1rem;
			}

			.afbeelding_box {
				width: 100%;
				aspect-ratio: 1;
				border-radius: 1rem;
				overflow: hidden;
				margin-bottom: .5rem;

				.afbeelding {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center;
				}
			}

			.slick-next {
				top: 50%;
				-webkit-transform: translate(-50%, -100%);
				-ms-transform: translate(-50%, -100%);
				transform: translate(-50%, -100%);
			}

			.slick-arrow {
				background: @wit;
  				border:1px solid @neutraal_donker;
				border-radius: 100%;
				width: 40px;
				height: 40px;
				color: @zwart;
				z-index: 5;

				&:before {
					color: @zwart;
				}
			}

			.slick-prev {
				display: none !important;
			}
		}

		&.vergelijkbare_producten {
			color: @zwart;

			h2 {
				margin-bottom: 1rem;
			}

			ul.products,
			ul.products.columns-1,
			ul.products.columns-2,
			ul.products.columns-3,
			ul.products.columns-4,
			ul.products.columns-5,
			ul.products.columns-6 {
				list-style: none !important;
				padding: 0 !important;
				margin: 0 !important;
				display: grid !important;
				gap: 1.5rem !important;
				grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

				&:before, &:after { content: none !important; }

				li.product,
				li.product.first,
				li.product.last {
					width: 100% !important;
					max-width: 100% !important;
					float: none !important;
					clear: none !important;
					margin: 0 !important;
					padding: 0 !important;
				}

				a {
					color: @zwart;
				}

				.item {
					// Zelfde kaart als in de shop/archief (zie .him_product_card)
					.him_product_card();
				}
			}

			// Selectors met .columns-N: anders winnen ze niet van de basisregel hierboven
			@media (max-width: 1199px) {
				ul.products[class*="columns-"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
			}
			// Tablet/mobiel: swipebare carousel (native scroll-snap) i.p.v. samengeperste kolommen
			@media (max-width: 991px) {
				ul.products[class*="columns-"] {
					display: flex !important;
					gap: 1rem !important;
					overflow-x: auto;
					scroll-snap-type: x mandatory;
					-webkit-overflow-scrolling: touch;
					scrollbar-width: none;
					padding-bottom: .25rem !important;

					&::-webkit-scrollbar { display: none; }

					li.product,
					li.product.first,
					li.product.last {
						flex: 0 0 42% !important;
						width: auto !important;
						max-width: none !important;
						scroll-snap-align: start;
					}
				}
			}
			@media (max-width: 575px) {
				ul.products[class*="columns-"] {
					li.product,
					li.product.first,
					li.product.last { flex-basis: 80% !important; }
				}
			}
		}

		&.video {

			iframe {
				width: 100%;
				aspect-ratio: 16/9;
				border-radius: 1rem;
			}
		}

		&.cta_blok {
			
			.box {

				.left {
					position: relative;
					background: @geel_licht;
					border-radius: 12px 0 0 12px;
					overflow: hidden;

					.afbeelding {
						width: 100%;
					}
				}

				.right {
					border-radius: 0 12px 12px 0;
					padding: 2rem;
					background: @blauw_licht;
					display: flex;
    				flex-direction: column;
    				justify-content: center;
				}
			}
		}
	}
}

footer {
	padding: 64px 0;
	background: @zwart;
	color: @wit;

	a {
		color: @wit;
	}

	.footer_tekst {
		
		p {
			.small;
		}
	}

	.logo {
		width: 184px;
	}

	ul {
		list-style-type: none;
		padding: 0;
		margin: 0;

		li {
    		padding: 4px 0;

			a {
				color: @wit;
				.light;
				.small;
			}
		}
	}

	.betaalbethodes {

		img {
			width: 38px;
			height: 24px;
		}
	}

	.socials {

		a {
			color: @wit;
			.large;
		}
	}
}
/*---------------------------------------------------------------------- Responsive ----------------------------------------------------------------------*/

@media only screen and (min-width: 960px) and (max-width: 1199px) {

}

@media only screen and (max-width: 992px) {

	#header {
		display: block;
		box-shadow: none;

		.navbar-brand {
			width: 100%;
			height: 47px;
			display: block;
			background-image: url('../images/logo.svg');
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			.transition;
		}

		.toggle {
			margin-top: 6px;
			border: none;
			background: none;
        	padding: 0;

			i {
				font-size: 2rem !important;
				color: @zwart;
			}
		}

		.searchform {

			form {
				background: @wit;
				color: @neutraal;
				border-radius: .5rem;
				border: 1px solid @neutraal_licht;
				overflow: hidden;
			}

			input[type="text"] {
				width: 100%;
				margin-bottom: 0 !important;
				padding: 0 .75rem 0 0 !important;
				border: none;
			}

			button[type="submit"] {
				padding: .5rem .5rem .5rem 1rem !important;
				border: none !important;
				display: block !important;
				width: max-content !important;
				background: @wit !important;
				color: @grey !important;
				margin: 0 !important;
			}
		}

		.header_icons { gap: 1rem; margin-top: 6px; }

		.offcanvas-top {
			height: unset !important;

			.offcanvas-header {

				.navbar-brand {
					margin: 2rem 0;
					width: 100%;
					height: 40px;
				}

				.btn-close {
					opacity: 1 !important;
				}
			}

			.offcanvas-body {
    			padding: 0 0 0 12px;
				overflow-x: hidden;

				.offcanvas_topbar {

					#menu-topbar {
						list-style: none;
						margin: 0;
						padding: 0;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;

						li { margin: 0; }

						a {
							display: block;
							color: #000000;
							border-top: 1px solid #ebebeb;
							font-size: 1.125rem !important;
							line-height: 1.2rem !important;
							padding: 18px 0 14px 0;
							.bold;

							.menu_icon {
								margin-right: .5rem;
							}
						}
					}
				}

				// Mobiel hoofdmenu (UX-voorstel v2): uitklapbaar per rij, Refurbished/Nieuw
				// als tussenkop. Markup: helloitsme_mobile_menu() in functions.php.
				.mobile_menu {
					list-style-type: none;
					padding: 0 12px 0 0;
					margin: 0;

					.m_item {
						border-top: 1px solid @neutraal_licht;
					}

					.m_link, .m_toggle {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: @zwart;
						background: none;
						border: 0;
						text-align: left;
						font-size: 1.125rem !important;
						line-height: 1.2rem !important;
						padding: 18px 0 14px 0;
						.bold;

						i { font-size: 1rem; }
					}

					.m_toggle[aria-expanded="true"] i { transform: rotate(45deg); }
					.m_toggle i { .transition; }

					.m_body {
						padding: 0 0 1rem 0;
					}

					.m_kop {
						margin: .5rem 0 .25rem;
						font-size: .75rem !important;
						letter-spacing: .08em;
						text-transform: uppercase;
						color: @neutraal;
						.bold;
					}

					.m_sub {
						list-style: none;
						margin: 0 0 .5rem;
						padding: 0;

						a, span {
							display: block;
							padding: 6px 0;
							color: @zwart;
							.light;
						}

						.mega-alle a { .bold; }
						.mega-alle i { font-size: .85em; margin-left: .25rem; }
						.current-menu-item a { .bold; }
					}
				}

				.m_group {
					margin: 0 0 0 -12px;
					padding: .5rem 24px .5rem 12px;
					background: @neutraal_extra_licht;
					border-top: 1px solid @neutraal_licht;

					.m_link {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 12px 0;
						color: @zwart;
						.light;
					}
				}

				.m_foot {
					display: flex;
					flex-direction: column;
					gap: .25rem;
					padding: 1rem 12px 1.5rem 0;
					font-size: .875rem !important;
					color: @neutraal_donker;

					a { color: @neutraal_donker; }
				}
			}
		}
	}

	.page_content {

		// Mobiel: lichte verloop-achtergrond met grote kop, USP's als
		// gestapelde witte kaarten die over de onderrand heen vallen.
		.intro_slider_box {
			position: relative;
			padding-bottom: 8px;

			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 55px;
				background:
					radial-gradient(circle at 100% 15%, fade(@wit, 85%), transparent 50%),
					radial-gradient(circle at 0% 100%, fade(@geel, 35%), transparent 60%),
					linear-gradient(160deg, @geel_licht 0%, @blauw_licht 100%);
			}

			.slick-dots {
				position: relative;
				bottom: auto;
				margin: 0 0 16px;
				gap: 3px;

				li {
					width: 6px;
					height: 6px;

					button {
						width: 6px;
						height: 6px;
					}
				}
			}

			.usps {
				position: relative;
				top: auto;
				right: auto;
				transform: none;
				display: flex;
				flex-direction: column;
				gap: 12px;
				padding: 0 21px;

				.usp {
					background: rgba(255, 255, 255, .85);
					padding: 16px 20px;
					border-radius: 12px;
					box-shadow: 0 8px 24px rgba(10, 8, 8, .08);

					.d-flex {
						gap: 16px !important;
					}

					// Eigen iconen in een lichte cirkel, zoals de vinkjes in het voorbeeld.
					img {
						flex: 0 0 48px;
						width: 48px;
						height: 48px;
						padding: 10px;
						border-radius: 50%;
						background: @geel_licht;
					}

					.bold {
						font-size: 1rem !important;
						line-height: 1.375rem !important;
					}

					.extra_small {
						color: @neutraal_donker;
					}

					&:last-child { background: @wit; }
				}
			}
		}

		.page_div {

			&.intro {
				height: auto;
				padding: 32px 0 20px;
				align-items: flex-start;
				background-image: none !important;
				background-color: transparent;

				.container {
					padding-left: 21px;
					padding-right: 21px;
				}

				.row {
					margin-left: 0;
					margin-right: 0;
				}

				.col-12 {
					padding-left: 0;
					padding-right: 0;
				}

				.categorie_box {
					background: none;
					width: 100%;
					max-width: none;
					padding: 0;
					border-radius: 0;

					h1 {
						color: @geel;
						font-size: 2rem !important;
						line-height: 2.5rem !important;
						margin-bottom: 4px !important;
					}

					p {
						color: @zwart;
						.bold;
						font-size: 1.5rem !important;
						line-height: 2.125rem !important;
						margin-bottom: 20px !important;
					}
				}

				.button {
					display: inline-flex !important;
					align-items: center;
					gap: 12px;
					padding: 12px 20px 12px 24px;
					border-radius: 4px;
					font-size: 1rem !important;

					i {
						font-size: 12px;
					}
				}
			}

			&.categorieen {

				.button {
					
					&.last {
						width: 100%;
					}
				}

				.categorie_box {

					.content {
						width: 70%;
					}

					.shape {
						top: unset;
						bottom: 0;
						aspect-ratio: 1;
						height: unset;
						width: 35%;
    					justify-content: center;

						img {
							width: 100%;
							max-width: 100px;
							aspect-ratio: 1;
							object-fit: cover;
							border-radius: 4px;
						}
					}
				}

				.categorie_box_4_om_4 {

					.shape {

						img {
        					aspect-ratio: 2 / 1;
        					object-fit: contain;
						}
					}
				}

				.categorie_box_slider {

					.image_box {
						border-radius: 4px;
						padding: 12px 8px;
						aspect-ratio: auto; // hoogte volgt de hoogste tegel (zie .slick-track flex)

						// Geen hover op touch: bleef na een tik teal "hangen"
						&:hover {
							background: @wit;
						}
					}
				}
			}

			&.specialisten_cta {

				// De twee boxen staan onder elkaar op mobiel en plakten tegen
				// elkaar aan.
				.row.align-items-stretch {
					row-gap: 1rem;
				}

				.specialisten_cta_box {
					padding: 16px;
					border-radius: 4px;

					.afbeelding {
						width: 71px;
					}

					h3 {
						.light;
						font-size: 1.3rem !important;
    					line-height: 1.6rem !important;
					}

					.inner_box {
						padding: 12px 24px;

						// Label boven de waarde, in blauw extra licht.
						p {
							color: @geel_licht;
							margin-bottom: -4px !important;
						}

						strong {
							font-size: 1.125rem !important;
							line-height: 1.5625rem !important;
						}
					}
				}

				// Globale versie: foto en titel naast elkaar, knoppen daaronder
				// over de volle breedte. De kolommen krijgen display: contents
				// zodat hun kinderen direct in de flexrij vallen.
				.row.align-items-stretch .specialisten_cta_box > .row {
					align-items: center;
					justify-content: space-between;
					margin-left: 0;
					margin-right: 0;

					> [class*="col-"] {
						display: contents;
					}

					> .col-lg-4 > .d-flex {
						flex: 0 0 auto;
					}

					> .col-lg-8 > h3 {
						.bold;
						flex: 0 1 228px;
						font-size: 1.125rem !important;
						line-height: 1.5625rem !important;
						margin-bottom: 0 !important;
					}

					// De naam staat niet in het mobiele design.
					> .col-lg-8 > p {
						display: none;
					}

					// !important omdat de knoppen in de markup mb-2 van Bootstrap
					// meekrijgen (8px), terwijl het design 12px vraagt.
					> .col-lg-8 > a {
						width: 100%;
						margin-bottom: 12px !important;

						&:last-child {
							margin-bottom: 0 !important;
						}
					}
				}
			}

			&.showrooms {

				.afbeelding_box {
					height: 320px;
				}

				.content {
					padding: 2rem 1rem;
				}
			}

			&.tekst_afbeelding {

				.button {
					width: 100%;
					display: flex !important;
					justify-content: center;
					gap: .5rem;
				}
			}

			&.keuzehulp {
				background-image: linear-gradient(to top, @neutraal_extra_licht 50%, @wit 50%);

				.afbeelding {
					width: 80%;
					margin-left: 10%;
				}
			}

			&.volg_ons {
				// Het witte vlak loopt tot 53% van de video, net als in het
				// design. De video is (100vw - 24px) breed in 16/9, dus
				// 0,53 * 9/16 = 0,2981 keer die breedte.
				@wit_tot: ~"calc((100vw - 24px) * 0.2981)";
				background: linear-gradient(to bottom, @wit @wit_tot, @geel_licht @wit_tot);

				// Video bovenaan, tekstblok eronder.
				> .container > .row {

					> .col-lg-7 { order: 1; }
					> .col-lg-4 { order: 2; }
				}

				// Voorbeelden onder de grote video: horizontaal scrollen.
				.video_lijst {
					overflow-x: auto;
					scroll-snap-type: x mandatory;
					-webkit-overflow-scrolling: touch;
					scrollbar-width: none;

					&::-webkit-scrollbar {
						display: none;
					}

					.video_item {
						flex: 0 0 40%;
						scroll-snap-align: start;
					}
				}

				.inner_box {
					// h-100 + justify-content-center laat het blok uitrekken en
					// zet er loze ruimte boven en onder.
					height: auto !important;
					justify-content: flex-start !important;
					margin-top: 24px;

					// USP-lijst
					> .d-flex.flex-column {
						gap: 12px !important;
						margin-top: 56px !important;

						> .d-flex {
							gap: 17px !important;

							p {
								font-size: 1.125rem !important;
							}
						}
					}

					.button {
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 12px;
						padding: 12px 20px 12px 24px;
						border-radius: 4px;
						font-size: 1.125rem !important;
						line-height: 1.5625rem !important;
					}
				}
			}

			&.linkjes {

				.items {
					gap: 0%;

					.item {
						width: 100%;
					}
				}
			}

			&.producten {

				&.cards {
					padding-bottom: 25px !important;
				}

				// Variant zonder cards staat in een container-fluid zonder
				// gutters; de titel heeft dan geen ruimte tot de schermrand.
				&:not(.cards) {

					> .container-fluid > .row > .col-lg-12 {
						padding-left: 12px;
						padding-right: 12px;
					}
				}

				.product_box {
					height: 420px;
					padding: 2rem 1.25rem;

					.content {

						.product_title {
							font-size: 2rem !important;
							line-height: 2.5rem !important;
						}

						.product_price {

							span {
								font-size: 1.75rem !important;
								line-height: 2.25rem !important;
							}
						}
					}
				}
			}

			// Slick zet de dots absoluut op 40px vanaf de onderkant; op mobiel
			// vallen ze daardoor over de slides heen.
			&.categorieen,
			&.historie {

				.slider {
					padding-bottom: 32px;

					.slick-dots {
						bottom: 0;
					}
				}
			}

			&.cta_blok {
			
				.box {

					.left {
						border-radius: 12px 12px 0 0;
						
						.afbeelding {
							max-height: 175px;
							object-fit: cover;
						}
					}

					.right {
						border-radius: 0 0 12px 12px;
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 768px) {

}

@media only screen and (max-width: 480px) {

}

/* Productpagina (mobiel): de mobiele zoekbalk inklappen bij het scrollen om
   ruimte te besparen. Haakt aan op de .scrolled-class die de header-scroll-JS
   toevoegt (verschijnt weer bij omhoog scrollen). overflow blijft standaard
   zichtbaar zodat de live-search dropdown niet wordt afgekapt; alleen in
   ingeklapte staat clippen we. */
@media only screen and (max-width: 991px) {
	body.single-product .header_search_mobile {
		transition: max-height .25s ease, opacity .2s ease, margin-top .25s ease;
		max-height: 80px;
	}

	body.single-product #header.scrolled .header_search_mobile {
		max-height: 0;
		opacity: 0;
		margin-top: 0 !important;
		overflow: hidden;
		pointer-events: none;
	}
}

/* USPs uitgebreid — kaart met titel, 4(+) USP's op een rij en een knop */
.page_content .page_div.usps_uitgebreid {
	background: @wit;

	.usps_uitgebreid_card {
		background: @geel_licht; // "Blauw Extra Licht" (zie reset.less)
		border: 1px solid @neutraal_licht;
		border-radius: 12px;
		padding: 4rem;
		text-align: center;

		h2 { font-size: 2.25rem; .bold; margin: 0 0 3rem !important; }
	}

	.usps_uitgebreid_grid {
		display: flex;
		gap: 2rem;
		margin-bottom: 3rem;
	}

	.usps_uitgebreid_item {
		flex: 1 1 0;
		min-width: 0;

		h3 { font-size: 1.5rem; .bold; margin: 1.25rem 0 .5rem !important; }
		p { font-size: .875rem; color: @zwart; margin: 0; }
	}

	.usps_uitgebreid_icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 64px; height: 64px;
		background: @blauw_licht;
		border-radius: 32px;

		img { width: 24px; height: 24px; display: block; }
	}

	.usps_uitgebreid_button {
		display: inline-flex;
		background: @blauw_licht;
		border: 1px solid @geel;
		color: @geel;
		font-weight: 700;
		font-size: .875rem;
		padding: .75rem 1.5rem;
		border-radius: 8px;
		text-decoration: none;
		.transition;

		&:hover { background: darken(@blauw_licht, 5%); color: @geel; }
	}

	@media only screen and (max-width: 991px) {
		.usps_uitgebreid_card { padding: 1.5rem; text-align: start; border-radius: 4px; 
			h2 { font-size: 2.25rem; .bold; margin: 0 0 1rem !important; }

			.usps_uitgebreid_button {
				width: 100%;
				text-align: center;
        		display: block;
			}
		}
		.usps_uitgebreid_grid { flex-wrap: wrap; }
		.usps_uitgebreid_item { flex: 1 1 45%; }
		.usps_uitgebreid_item .usps_uitgebreid_icon { background: none; }
	}
	@media only screen and (max-width: 575px) {
		.usps_uitgebreid_grid { flex-direction: column; }
		.usps_uitgebreid_item { flex: 1 1 100%; }
	}
}
/*------------------------------------------------------------------------ Blog-overzicht (page_elements 'blog') ------------------------------------------------------------------------*/
.page_content .page_div.blog {

	.blog_card {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: @wit;
		border: 1px solid @neutraal_licht;
		border-radius: 12px;
		overflow: hidden;
		text-decoration: none;
		color: inherit;
		.transition;

		&:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }

		.blog_card_media {
			position: relative;
			aspect-ratio: 16 / 10;
			overflow: hidden;
			background: @neutraal_extra_licht;

			// Absoluut zodat elke foto exact het 16:10-kader vult (staande foto's rekten de kaart op)
			img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
		}

		.blog_card_body {
			display: flex;
			flex-direction: column;
			gap: .75rem;
			padding: 1.25rem 1.5rem 1.5rem;
			flex: 1 1 auto;
		}

		.blog_card_title {
			font-size: 1.25rem;
			.bold;
			color: @zwart;
			margin: 0;
		}

		.blog_card_more {
			margin-top: auto;
			display: inline-flex;
			align-items: center;
			gap: .4rem;
			color: @geel;
			.bold;
			font-size: .95rem;

			i { .transition; }
		}

		&:hover .blog_card_more i { transform: translateX(3px); }
	}
}

/*------------------------------------------------------------------------ Blog: overzicht, categorieën en losse berichten ------------------------------------------------------------------------*/
.page_content .page_div.blog {

	&.blog_overzicht,
	&.blog_single {
		padding: 40px 0 80px;
	}

	.blog_terug {
		display: inline-flex;
		align-items: center;
		gap: .35rem;
		color: @neutraal_donker;
		font-size: .9rem;
		margin-bottom: 1rem;

		&:hover { color: @geel; }
	}

	.blog_overzicht_titel { margin-bottom: 1rem !important; }

	.blog_overzicht_intro p {
		color: @neutraal_donker;
		margin-bottom: 0;
	}

	.blog_card_meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: .5rem 1rem;
		font-size: .85rem;
		color: @neutraal_donker;
	}

	.blog_card_cat {
		background: @geel_licht;
		color: @geel;
		border-radius: 4px;
		padding: 2px 8px;
		.bold;
	}

	a.blog_card_cat:hover { background: @blauw_licht; }

	.blog_card_date i { margin-right: 2px; }

	.blog_card_excerpt {
		color: @neutraal_donker;
		font-size: .95rem;
		margin: 0;
	}

	// Paginering (paginate_links type=list)
	.blog_pagination {
		margin-top: 2.5rem;

		ul {
			display: flex;
			flex-wrap: wrap;
			gap: .5rem;
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.page-numbers {
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 40px;
			height: 40px;
			padding: 0 .75rem;
			border: 0;
			border-radius: 8px;
			color: @zwart;
			background: @wit;
			.transition;

			&:hover { color: @geel; background: @geel_licht; }

			&.current {
				background: @geel;
				color: @wit;
			}
		}
	}

	// Zijbalk
	.blog_sidebar {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		position: sticky;
		top: 220px;
	}

	.blog_sidebar_box {
		background: @geel_licht;
		border: 1px solid @blauw_licht;
		border-radius: 12px;
		padding: 1.5rem;

		h3 { font-size: 1.25rem !important; margin-bottom: .75rem; }

		p { margin-bottom: 1rem; }

		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: column;
			gap: .5rem;
		}
	}

	.blog_sidebar_usps li {
		display: flex;
		gap: .5rem;
		align-items: flex-start;

		i { color: @geel; }
	}

	.blog_sidebar_cats {

		a {
			color: @zwart;

			span { color: @neutraal_donker; }

			&:hover { color: @geel; }
		}

		.active a { color: @geel; .bold; }
	}

	// Los bericht
	.blog_artikel_media {
		border-radius: 12px;
		overflow: hidden;
		margin-bottom: 1.5rem;
		background: @neutraal_extra_licht;

		img { width: 100%; height: auto; max-height: 460px; object-fit: cover; display: block; }
	}

	.blog_artikel_titel { margin: 1rem 0 1.5rem !important; }

	.blog_artikel_tekst {
		line-height: 1.7;

		h2 { font-size: 1.5rem !important; margin: 2rem 0 .75rem; }
		h3 { font-size: 1.25rem !important; margin: 1.5rem 0 .5rem; }
		ul, ol { padding-left: 1.25rem; margin-bottom: 1rem; }
		li { margin-bottom: .35rem; }
		a { color: @geel; text-decoration: underline; }
		img { max-width: 100%; height: auto; border-radius: 8px; }
	}

	.blog_gerelateerd {
		margin-top: 3rem;
		padding-top: 2rem;
		border-top: 1px solid @neutraal_licht;

		h2 { margin-bottom: 1.5rem; }
		.blog_card_title { font-size: 1.05rem !important; }
	}
}

@media only screen and (max-width: 992px) {

	.page_content .page_div.blog {

		&.blog_overzicht,
		&.blog_single {
			padding: 24px 0 48px;
		}

		.blog_sidebar { position: static; }
	}
}

/* [laptops]-shortcode in blogberichten: productkaarten los van de blogtekst-styling */
.page_content .bb-blog-producten { // in blogs én in tekstblokken (Kolom) op pagina's
	margin: 1.5rem 0 2rem;

	ul.products {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
		list-style: none;
		padding: 0 !important;
		margin: 0 !important;

		&::before, &::after { display: none !important; }

		li.product {
			width: auto !important;
			float: none !important;
			margin: 0 !important;
			padding: 0 !important;
			list-style: none;
		}
	}

	line-height: 1.4;

	// Zelfde kaart als in de shop/archief
	.item { .him_product_card(); height: 100%; }

	a { text-decoration: none; color: inherit; }
	ul.specs_list { padding: 0 !important; margin: 0 0 .5rem; }
	ul.specs_list li { margin: 0; }
	img { border-radius: 0; }

	@media (max-width: 767px) {
		// Telefoon: swipebare rij i.p.v. drie smalle kolommen
		ul.products {
			display: flex !important;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
			&::-webkit-scrollbar { display: none; }

			// min-width + overflow: anders duwen kaart en de foto-slider (slick) elkaar oneindig breed
			li.product { flex: 0 0 75%; min-width: 0; max-width: 75%; scroll-snap-align: start; overflow: hidden; }
			.item, .product_media, .product_slider { min-width: 0; max-width: 100%; }
		}
	}
}