@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; }
}

#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;
						}
					}
				}
			}
		}
	}

	.cart_link {
		position: relative;
		display: inline-block;
		flex-shrink: 0;

		img {
			display: block;
		}

		.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;
		}
	}

	#menu-topbar-1 {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: flex;
		gap: 1rem;
		justify-content: end;

		li {

			a {
				color: @zwart;
				.light;
				display: inline-flex;
				align-items: center;
				gap: .4rem;

				.menu_icon {
					display: inline-flex;
					align-items: center;

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

				i.bi {
					font-size: 1rem;
					line-height: 1;
				}
			}
		}
	}

	.menu_box {
		width: 100%;
		background: @wit;
		margin-top: 1rem;
		border-radius: 1rem;

		#menu-hoofdmenu {
			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 {
					color: #334155;
					.light;
					.transition;

					&:hover {
						color: @zwart;
					}
				}
				
				&.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 {

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

						.sub-menu {
							display: block;
							height: max-content;
							width: 100%;
							box-shadow: 0 8px 16px -11px rgba(0, 0, 0, 0.25);
						}
					}

					.sub-menu {
						list-style-type: none;
						padding: 2rem;
						margin: 0;
						background: @wit;
						border-radius: 0 0 1rem 1rem;
						position: absolute;
						top: 100%;
						left: 0;
						width: 100%;
						transform: translateY(-1rem);
						overflow: hidden;
						display: none;

						li {
							padding: 0;
							cursor: pointer;
							.transition;

							&:before {
								content: none;
							}

							a {
								display: block;
								width: 100%;
								color: #334155;
								padding: 5px 0;

								&:after {
									content: none;
								}
							}

							&:hover {

								a {
									color: @zwart;
								}
							}

							&:last-child {

								a {
									border-bottom: none;
								}
							}
						}

						&.mega {
							padding: 2rem 0rem 0rem 0rem;;

							.mega_wrap {
								padding: 0;
								cursor: default;
							}

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

							.mega_col_items {
								flex: 1 1 60%;

								.mega_titel {
									font-weight: 700;
									color: @zwart;
									margin-bottom: 1rem;
								}

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

							.mega_col_product {
								flex: 0 0 360px;
								max-width: 360px;

								.mega_product_card {
									display: block;
									position: relative;
									width: 100%;
									height: 260px;
									border-radius: 1rem;
									overflow: hidden;
									background-size: cover;
									background-position: center;
									background-color: @neutraal_extra_licht;
									text-decoration: none;

									.shape {
										position: absolute;
										top: 0;
										left: 0;
										width: 60%;
										min-height: 60%;
										background: @cozy;
										padding: 1.25rem 1rem;
										border-radius: 0 0 100% 0;
										color: @wit;

										.primair {
											font-size: 2rem !important;
											.bold;
										}

										.secundair {
											font-size: 2rem !important;
											.light;
										}
									}

									.button {
										position: absolute;
										bottom: 1rem;
										right: 1rem;
									}
								}
							}

							.mega_usps {
								background: @zwart;
								color: @wit;
								border-radius: 0 0 1rem 1rem;
								padding: .5rem 2rem;
											display: flex;
								flex-wrap: wrap;
								justify-content: space-between;
								gap: 1rem;

								.mega_usp {
									display: flex;
									align-items: center;
									gap: .5rem;
									color: @wit;
									cursor: default;

									i {
										color: @geel;
										font-size: 1.1rem;
										line-height: 1;
										flex-shrink: 0;
									}

									.menu_icon {
										display: inline-flex;
										align-items: center;
										flex-shrink: 0;
										color: @geel;

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

									span {
										.light;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

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"] {
	background: @geel !important;
	color: @zwart !important;
	border-radius: .5rem !important;
	.transition !important;

	&:hover {
		background: @neutraal_extra_licht !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 24px 12px 24px;
	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;
			}

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

				.image_box {
					background: @geel_licht;
					border: 1px solid #BDE1DC;
					border-radius: 12px;
					padding: 30px;
					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;

			.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: 9 / 16;
				overflow: hidden;
				border-radius: 12px;

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

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

			.shorts_slider {

				.slick-track {
					display: flex;
				}
			}
		}

		&.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;
					padding: 0 0 1rem 0;
					border-bottom: 1px solid @neutraal_licht;
					color: @zwart;
					text-decoration: none;
					cursor: pointer;
					.light;
					.transition;

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

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

					> div {
						padding-bottom: 1rem;
					}
				}

				&.active {

					.vraag 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();
				}
			}

			@media (max-width: 1199px) {
				ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
			}
			@media (max-width: 767px) {
				ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
			}
			@media (max-width: 991px) {
				li.product,
				li.product.first,
				li.product.last {
					width: 100% !important;
        			margin: 0 0 1rem !important;
				}
			}
			@media (max-width: 480px) {
				ul.products { grid-template-columns: 1fr !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;

	.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-topbar wordt op mobiel al verborgen via .topbar_wrap (d-none d-lg-block).
		// Niet #menu-topbar verbergen, want dat raakt ook de off-canvas-topbar (zelfde ID).
		.topbar_wrap { display: none; }

		.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;
							}
						}
					}
				}

				#menu-hoofdmenu-mobiel {
					list-style-type: none;
					padding: 0;
					margin: 0;
					display: flex;
        			flex-direction: column;
					gap: 0rem;
					position: relative;
					overflow: hidden;

					li {
						
						&.menu-item-has-children {
							cursor: pointer;

							a {
								position: relative;
								padding-right: 5px;
								width: 100%;
							}

							> a {

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

							.sub-menu {
								position: absolute;
								top: 0;
								left: 0;
								z-index: 10;
								width: 100%;
								height: 100%;
								overflow-y: auto;
								transform: translateX(100%);
								list-style-type: none;
								margin: 0;
    							padding: 0;
								background: @wit;
								opacity: 1;
								.transition;

								.menu-item-back {

									a {
										padding-left: 66px;
										.light;
										text-transform: uppercase;
										font-size: 1rem !important;

										&:after {
											content: "";
											position: absolute;
											top: 50%;
											left: 0%;
											transform: translate(0%, -50%) rotate(180deg);
											background-image: url('../images/submenu.svg');
											height: 100%;
											aspect-ratio: 1;
											background-size: contain;
											background-repeat: no-repeat;
											background-position: center;
											.transition;
										}
									}
								}
							}

							&.open {

								> .sub-menu {
									transform: translateX(0%);
								}
							}
						}

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

	.page_content {

		.page_div {

			&.intro {

				.product_box,
				.categorie_box {
					min-height: 35vh;
					height: 35vh;
				}
			}

			&.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: 1;
					}
				}
			}

			&.specialisten_cta {

				.specialisten_cta_box {

					.afbeelding {
						width: 90px;
					}

					h3 {
						.light;
						font-size: 1.3rem !important;
    					line-height: 1.6rem !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 {

				.inner_box {

					.item {
						width: 50%;
					}
				}
			}

			&.linkjes {

				.items {
					gap: 0%;

					.item {
						width: 100%;
					}
				}
			}

			&.producten {

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

			&.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) {

}

/*------------------------------------------------------------------------ Nieuwsbrief-popup ------------------------------------------------------------------------*/

.bb-np {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;

	&[hidden] { display: none; }

	.bb-np-backdrop {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, .5);
	}

	.bb-np-card {
		position: relative;
		z-index: 1;
		width: 100%;
		max-width: 420px;
		background: @wit;
		border-radius: 12px;
		box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
		padding: 2.5rem 2rem 2rem;
		text-align: center;
	}

	.bb-np-close {
		position: absolute;
		top: 1rem;
		right: 1rem;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: @neutraal_extra_licht;
		border: 1px solid @neutraal_licht;
		border-radius: 8px;
		font-size: 1.25rem;
		line-height: 1;
		color: @zwart;
		cursor: pointer;
		.transition;

		&:hover { background: @neutraal_licht; }
	}

	.bb-np-logo {
		margin-bottom: 1.5rem;

		img {
			height: 26px;
			width: auto;
		}
	}

	.bb-np-title {
		font-size: 2.5rem !important;
		line-height: 1.1 !important;
		color: @zwart;
		margin-bottom: 1rem !important;
	}

	.bb-np-text {
		color: @neutraal_donker;
		margin-bottom: 1.5rem;
	}

	.bb-np-form { text-align: left; }

	.bb-np-label {
		display: block;
		.small;
		.bold;
		color: @zwart;
		margin-bottom: .5rem;
	}

	.bb-np-input {
		width: 100%;
		padding: 12px 16px !important;
		border: 1px solid @neutraal_licht !important;
		border-radius: 8px !important;
		background: @wit !important;
		color: @zwart !important;
		margin-bottom: 1rem !important;
	}

	.bb-np-cta {
		width: 100%;
		padding: 14px 16px;
		background: @geel;
		color: @zwart;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		.transition;

		&:hover { background: @geel_donker; }
	}

	.bb-np-code {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .75rem;
		padding: 14px 16px;
		background: @wit;
		border: 2px dashed @neutraal_licht;
		border-radius: 8px;
		color: @zwart;
		cursor: pointer;
		.transition;

		.bb-np-code-text {
			.bold;
			font-size: 1.1rem;
			letter-spacing: .05em;
		}

		i {
			font-size: 1.1rem;
			color: @neutraal_donker;
		}

		&:hover,
		&.copied { border-color: @cta; }
	}

	.bb-np-confirm {
		margin-top: 1rem;
		margin-bottom: 0;
		color: @cta;
		.small;
	}

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

		.bb-np-card { padding: 2rem 1.25rem 1.5rem; }

		.bb-np-title { font-size: 1.75rem !important; }
	}
}

body.bb-np-open { overflow: hidden; }

/* 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;
	}
}