@import url("reset.less");

/*---------------------------------------------------------------------- WooCommerce ----------------------------------------------------------------------*/
// offerte opslaan popup
.wsc_save_share_cart_popup,
.wsc_share_cart_popup {
	border: none !important;
	border-radius: 16px !important;
	background: #ecf3fd !important;
	color: #112147 !important;
	
	.wsc_popup_head {
		box-shadow: none !important;
	}
	
	.wsc_sharing_widgets {
		position: relative;
		overflow: visible;
		margin: 30px 0 50px 0;
		
		.wsc_print {
			position: relative;
			
			a {
				
				&:after {
					content: 'Klik om te downloaden';
					position: absolute;
					top: 100%;
					left: 50%;
					transform: translate(-50%, 0%);
					font-size: 14px;
				}
				
				
				
				&:hover {
					
					&:after {
						text-decoration: underline;
					}
				}
			}
		}
	}
	
	.wsc_save_popup_content {
		background: #ecf3fd !important;
		
		.wsc-form-field {
			
			input {
				padding: 10px;
				background: @light;
				border: 1px solid @light_blue;
				border-radius: 4px;
				box-shadow: none;
			}
		}
		
		.button {
			border-radius: 100px !important;
			background: @detail !important;
			color: @light !important;
			outline: none !important;
			border: none !important;;
			padding: 10px 30px !important;
		}
	}
}

// knoppen winkelwagen
.wsc_save_share_cart_btns {
	margin-top: 25px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	
	.button {
		padding: 0 !important;
		margin-top: 5px !important;
		border: none !important;
		text-decoration: underline !important;
		font-size: .8rem !important;
		
		&:hover {
			background: transparent !important;
			color: @dark !important;
			text-decoration: underline !important;
		}
		
		&.wsc_share_cart {
			display: none;
		}
	}
}

.woocommerce {
	// background: @light_blue;
	border-radius: 12px;
	
	// Afrekenen
	.producten_box {
		
		input[type='checkbox'] {
			-webkit-appearance: auto;
		}
		
		textarea, select {
			padding: 10px;
			background: @light;
			border: 1px solid @light_blue;
			border-color: @light_blue;
			border-radius: 4px;
			box-shadow: none;
		}
		
		#ship-to-different-address,
		#order_review_heading {
			margin-top: 1rem;
			font-size: 1.5rem !important;
		}
		
		.wc_payment_methods {
			border-radius: 5px;
			color: @dark;
			background: @light;
		}
		
		.button {
			font-family: 'Regular' !important;
			font-weight: unset;
			background: @detail;
			border: 1px solid @detail;
			color: @light;
			padding: 10px 25px;
			border-radius: 100px;
			text-align: center;
			.transition;
			
			&:hover {
				background: @detail_hover;
				border: 1px solid @detail_hover;
				color: @light;
			}
		}
		
		.actions {
			
			.primaire_button {
				font-family: 'Regular' !important;
				font-weight: unset;
				background: @detail;
				border: 1px solid @detail;
				color: @light;
				padding: 12px 25px;
				border-radius: 100px;
				text-align: center;
				.transition;
				
				&:hover {
					background: @detail_hover;
					border: 1px solid @detail_hover;
					color: @light;
				}
			}
			
			// .wsc_save_share_cart_btns {
			// 	display: flex;
			// }
			
			a.button {
				padding: 12px 30px;
			}
			
			.button {
				font-family: 'Regular' !important;
				font-weight: unset;
				background: transparent;
				border: 1px solid @dark;
				color: @dark;
				padding: 10px 30px;
				border-radius: 100px;
				text-align: center;
				.transition;
				
				&:hover {
					background: @dark;
					border: 1px solid @dark;
					color: @light;
				}
			}
		}
		
		.shipping-calculator-form,
		.woocommerce-form-coupon {
			
			input[type='text'] {
				padding: 10px;
				background: @light;
				border: 1px solid @light_blue;
				border-color: @light_blue;
				border-radius: 4px;
				box-shadow: none;
			}
			
			.button {
				font-family: 'Regular' !important;
				font-weight: unset;
				background: @detail;
				color: @light;
				border-radius: 100px;
				padding: 10px 30px;
				.transition;
				
				&:hover {
					background: @detail_hover;
					color: @light;
				}
			}
		}
		
		#order_review {
			
			input[type='checkbox'] {
				-webkit-appearance: auto;
			}
			
			#payment {
				background: none;
				border: 1px solid @light_blue;
			}
			
			.product-total {
				border-top: none;
				text-align: end;
			}
			
			.tax-total {
				
				td {
					text-align: end;
				}
			}
			
			.cart-subtotal {
				
				td,th {
					border-color: @light_blue;
				}
				
				td {
					text-align: end;
				}
			}
			
			.order-total {
				
				td,th {
					border-color: @light_blue;
				}
				
				td {
					text-align: end;
				}
			}
		}
		
		.checkout {
			// display: flex;
			// gap: 25px;
			width: ;
			color: @dark;
			
			#customer_details {
				// background: @light;
			}
			
			#order_review {
				
				input[type='radio'] {
					-webkit-appearance: auto;
				}
				
				table {
					background: @light;
					color: @dark;
				}
			}
			
			input[type='text'],
			input[type='email'],
			input[type='tel'],
			input[type='password'] {
				padding: 10px;
				background: @light;
				border: 1px solid @light;
				border-radius: 4px;
				box-shadow: none;
			}
			
			a {
				color: @primair;
				
				&:hover {
					color: @detail;
				}
			}
			
			.button {
				font-family: 'Regular' !important;
				font-weight: unset;
				background: @detail;
				color: @light;
				border-radius: 100px;
				padding: 15px 30px;
				.transition;
				
				&:hover {
					background: @detail_hover;
					color: @light;
				}
			}
		}
	}
	
	.required {
		color: @primair !important;
	}
	
	.woocommerce-error {
		background: @light_blue;
		border-radius: 4px;
		color: @dark;
		opacity: .5;
		.transition;
		
		a {
			color: @primair;
			
			&:hover {
				color: @detail;
			}
		}
		
		&:before {
			color: @light;
		}
		
		&:hover {
			opacity: 1;
		}
	}
	
	.woocommerce-info,
	.woocommerce-message {
		background: @light;
		border-radius: 4px;
		border-top-color: @detail;
		color: @dark;
		opacity: .5;
		.transition;
		
		a {
			color: @primair;
			
			&:hover {
				color: @detail;
			}
		}
		
		&:before {
			color: @light;
		}
		
		&:hover {
			opacity: 1;
		}
		
		.button {
			font-family: 'Regular' !important;
			font-weight: unset;
			background: @detail;
			color: @light;
			border-radius: 100px;
			padding: 15px 30px;
			.transition;
			
			&:hover {
				background: @detail_hover;
				color: @light;
			}
		}
	}
	
	// My account
	// .col2-set {
	// 	
	// 	.col-1 {
	// 		// width: 100% !important;
	// 	}
	// 	
	// 	form {
	// 		
	// 		&.login {
	// 			border: none !important;
	// 			padding: 0 !important;
	// 			margin: 0 !important;
	// 			
	// 			.show-password-input {
	// 				position: absolute !important;
	// 			}
	// 		}
	// 	}
	// }
	// 
	form {
		
		&.login {
			border: none !important;
			padding: 0 !important;
			margin: 0 !important;
			
			.show-password-input {
				position: absolute !important;
			}
		}
	}
	
	nav {
		border-radius: 100px;
		padding: 0;
		
		.woocommerce-MyAccount-navigation {
			width: 100% !important;
			float: unset !important;
			
			ul {
				margin: 0;
				padding: 0;
				display: flex;
				width: 100%;
				justify-content: space-between;
				
				li {
					list-style-type: none;
					
					a {
						display: flex;
						color: @dark;
						padding: 15px 10px;
						.transition;
					}
					
					&.is-active {
						
						a {
							background: @light_blue;
							border-radius: 100px;
							margin: 8px 0px;
							padding: 7px 30px;
						}
					}
					
					&:hover {
						
						a {
							background: @light_blue;
							border-radius: 100px;
							margin: 8px 0px;
							padding: 7px 30px;
						}
					}
					
					&:last-child {
						
						a {
							background: @light_blue;
							color: @dark;
							padding: 7px 30px;
							margin: 8px 0px;
							border-radius: 100px;
						}
					}
				}
			}
		}
	}
	
	.woocommerce-MyAccount-content {
		float: unset !important;
		width: 100% !important;
		padding: 50px;
		
		.woocommerce-Address {
			background: @light;
			padding: 20px;
			border-radius: 10px;
			
			h2 {
				display: block;
				font-size: 1.2rem !important;
			}
			
			.edit {
				float: unset !important;
			}
		}
		
		h2 {
			display: none;
		}
		
		address {
			margin: 0;
		}
		
		.wsc_cart {
			
			.form-table {
				width: 100%;
				
				tr {
					
					th {
						padding: 4px 8px;
						color: @dark;
					}
					
					td {
						color: @dark;
						border-top: 1px solid @light;
						padding: 4px 8px;
						font-size: .85em;
						
						.dashicons {
							font-family: 'Regular' !important;
							display: unset;
							line-height: unset;
							font-weight: unset;
							font-style: unset;
							speak: unset;
							text-decoration: underline !important;
							text-transform: unset;
							text-rendering: unset;
							-webkit-font-smoothing: unset;
							-moz-osx-font-smoothing: unset;
							font-size: unset;
							vertical-align: unset;
							text-align: unset;
							width: unset;
							height: unset;
						}
						
						.wsc_remove_cart {
							color: @dark;
							
							&:before {
								content: 'Verwijder';
							}
						}
						
						.wsc_retrieve_cart {
							color: @dark;
							
							&:before {
								content: 'Bewerken/Afronden';
							}
						}
					}
				}
			}
		}
		
		* {
			border-color: @light !important;
		}
		
		input[type='text'],
		input[type='email'],
		input[type='password'],
		input[type='tel'],
		input[type='number'] {
			padding: 10px;
			background: @light;
			border: 1px solid @light_blue;
			border-radius: 4px;
			box-shadow: none;
		}
		
		a {
			color: @primair;
			
			&:hover {
				color: @detail;
			}
		}
		
		.button {
			font-family: 'Regular' !important;
			font-weight: unset;
			background: @detail;
			color: @light;
			border-radius: 100px;
			padding: 15px 30px;
			.transition;
			
			&:hover {
				background: @detail_hover;
				color: @light;
			}
			
			&.view,
			&.invoice {
				font-family: 'Regular' !important;
				background: unset !important;
				color: @dark !important;
				border-radius: unset !important;
				padding: 0px !important;
				border: none;
				font-size: .8rem !important;
				line-height: unset !important;
				font-weight: unset !important;
				margin: 0 !important;
				.transition;
				text-decoration: underline;
			}
		}
		
		.woocommerce-orders-table__cell-order-actions {
			display: flex;
			gap: 12px;
		}
	}
	// end
	
	.intro_achtergrond {
		color: @light;
		height: 60vh;
		border-radius: 0 500px 500px 0;
		.background_style;
		position: relative;
		
		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: @dark;
			opacity: .3;
			border-radius: 0 500px 500px 0;
		}
		
		&.omdraaien {
			border-radius: 500px 0px 0px 500px;

			&:after {
				border-radius: 500px 0px 0px 500px;
			}
		}
		
		* {
			position: relative;
			z-index: 10;
		}
		
		// h1 {
		// 	font-size: 2.5rem !important;
		// }
	}
	
	.login_box,
	.woocommerce-form-login {
		display: flex;
		flex-direction: column;
		
		p {
			width: 100% !important;
			
			input[type='text'],
			input[type='password'] {
				padding: 10px;
				background: @light_blue;
				border: none;
				border-radius: 4px;
				box-shadow: none;
			}
		}
		
		.woocommerce-form-login__rememberme {
			margin-top: 4px;
		}
		
		input[type='checkbox'] {
			-webkit-appearance: auto;
		}
		
		button[type='submit'] {
			font-weight: unset;
			font-family: 'Regular' !important;
			border-radius: 100px !important;
			background: @detail !important;
			color: @light !important;
			outline: none !important;
		}
		
		.lost_password {
			display: none;
		}
		
		.login {
			border: none;
			padding: 0;
			margin: 0;
		}
	}
	
	.producten_box {
		background: #ecf3fd;
		border-radius: 12px;
		padding: 50px 25px;
		color: @dark;
		
		// Single product
		.header_single_product {
			display: flex;
			gap: 12px;
			color: @dark;
			
			.left {
				width: 45%;
				
				img {
					width: 100%;
					border-radius: 26px;
					aspect-ratio: 16 / 9;
					object-fit: cover;
				}
			}
			
			.right {
				width: 55%;
				
				.product-title {
					width: 95%;
					margin-left: 5%;
					font-size: 26px !important;
				}
				
				.short-description {
					width: 95%;
					margin-left: 5%;
				}
			}
		}
		
		.product {
			position: unset;
			
			img {
				width: 100% !important;
				border-radius: 26px !important;
				aspect-ratio: 16 / 9;
				object-fit: cover;
			}
			
			.product_title {
				font-size: 26px !important;
			}
		}
		
		.woocommerce-product-gallery {
			width: 100% !important;
		}
		
		.entry-summary {
			float: unset !important;
			width: 100% !important;
			
			.cart {
				display: block !important;
				position: relative;
				
				input {
					-webkit-appearance: auto;
				}
				
				input[type='text'],
				input[type='number'],
				select {
					padding: 10px;
					background: @light;
					border: 1px solid @light_blue;
					border-radius: 4px;
					box-shadow: none;
				}
				
				input[type='file'] {
					height: 150px;
					background: @light;
					border-radius: 4px;
					padding: 25px;

				}
				
				.wc-pao-addon-container {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					padding: 25px 0px;
					border-top: 1px solid @light;
					
					.wc-pao-addon-name {
						// width: 25%;
						width: 100%;
					}
					
					.wc-pao-addon-description {
						width: 25px;
						height: 25px;
					}
					
					.form-row {
						position: relative;
						z-index: 10;
						margin-top: 5rem;
						width: 55%;
						margin-left: 5%;
						
						div {
							
							&:first-child {
								display: none;
							}
							
							.wc-pao-addon-price {
								display: none;
							}
						}
						
						select {
							
							option {
								
								&:first-child {
									display: none;
								}
							}
						}
					}
					
					.wc-pao-addon-description {
						position: relative;
						width: 40%;
						margin-top: 1rem;
						
						// p {
							// position: absolute;
							// top: 0;
							// left: 0;
							// transform: translateX(0px);
							// z-index: 998;
							// opacity: 0;
							// display: none;
							// background: @light;
							// width: 250px;
							// padding: 25px;
							// border-radius: 12px;
							// .transition;
							// .boxshadow_style;
						// }
						
						// &:after {
						// 	display: flex;
						// 	align-items: center;
						// 	justify-content: center;
						// 	content: 'i';
						// 	position: absolute;
						// 	top: 0;
						// 	left: 0;
						// 	width: 25px;
						// 	height: 25px;
						// 	border-radius: 25px;
						// 	cursor: pointer;
						// 	background: @light;
						// 	color: @dark;
						// }
						// 
						// &:hover {
						// 	
						// 	p {
						// 		opacity: 1;
						// 		display: block;
						// 	}
						// }
					}
					
					&.wc-pao-addon-id-1725270634,
					&.wc-pao-addon-id-1726227788, {
						position: relative;
						
						.form-row {
							display: flex;
							gap: 4%;
							row-gap: 20px;
							flex-wrap: wrap;
							height: 400px;
							overflow-y: scroll;
							border: 1px solid @light;
							background: @light;
							border-radius: 4px;
							padding: 12px;
							position: relative;
							
							.full_color {background: linear-gradient(90deg,
									rgba(255, 0, 0, 1) 0%,
									rgba(255, 154, 0, 1) 10%,
									rgba(208, 222, 33, 1) 20%,
									rgba(79, 220, 74, 1) 30%,
									rgba(63, 218, 216, 1) 40%,
									rgba(47, 201, 226, 1) 50%,
									rgba(28, 127, 238, 1) 60%,
									rgba(95, 21, 242, 1) 70%,
									rgba(186, 12, 248, 1) 80%,
									rgba(251, 7, 217, 1) 90%,
									rgba(255, 0, 0, 1) 100%);
									.transition;
									
									&:hover {background: linear-gradient(90deg,
										rgba(236, 243, 253, 1) 0%,
										rgba(236, 243, 253, 1) 10%,
										rgba(236, 243, 253, 1) 20%,
										rgba(236, 243, 253, 1) 30%,
										rgba(236, 243, 253, 1) 40%,
										rgba(236, 243, 253, 1) 50%,
										rgba(236, 243, 253, 1) 60%,
										rgba(236, 243, 253, 1) 70%,
										rgba(236, 243, 253, 1) 80%,
										rgba(236, 243, 253, 1) 90%,
										rgba(236, 243, 253, 1) 100%);}}
							
							.ral_1000 {background: #bebd7f; .transition; &:hover {background: @light_blue;}}
							.ral_1001 {background: #c2b078; .transition; &:hover {background: @light_blue;}}
							.ral_1002 {background: #c6a664; .transition; &:hover {background: @light_blue;}}
							.ral_1003 {background: #e5be01; .transition; &:hover {background: @light_blue;}}
							.ral_1004 {background: #cda434; .transition; &:hover {background: @light_blue;}}
							.ral_1005 {background: #a98307; .transition; &:hover {background: @light_blue;}}
							.ral_1006 {background: #e4a010; .transition; &:hover {background: @light_blue;}}
							.ral_1007 {background: #e4a010; .transition; &:hover {background: @light_blue;}}
							.ral_1011 {background: #8a6642; .transition; &:hover {background: @light_blue;}}
							.ral_1012 {background: #c2b078; .transition; &:hover {background: @light_blue;}}
							.ral_1013 {background: #eae6ca; .transition; &:hover {background: @light_blue;}}
							.ral_1014 {background: #e1cc4f; .transition; &:hover {background: @light_blue;}}
							.ral_1015 {background: #e6d690; .transition; &:hover {background: @light_blue;}}
							.ral_1016 {background: #edff21; .transition; &:hover {background: @light_blue;}}
							.ral_1017 {background: #f5d033; .transition; &:hover {background: @light_blue;}}
							.ral_1018 {background: #f8f32b; .transition; &:hover {background: @light_blue;}}
							.ral_1019 {background: #9e9764; .transition; &:hover {background: @light_blue;}}
							.ral_1020 {background: #999950; .transition; &:hover {background: @light_blue;}}
							.ral_1021 {background: #f4da40; .transition; &:hover {background: @light_blue;}}
							.ral_1023 {background: #f5ca00; .transition; &:hover {background: @light_blue;}}
							.ral_1024 {background: #aea04b; .transition; &:hover {background: @light_blue;}}
							.ral_1026 {background: #ffff01; .transition; &:hover {background: @light_blue;}}
							.ral_1027 {background: #9d9101; .transition; &:hover {background: @light_blue;}}
							.ral_1028 {background: #f4a900; .transition; &:hover {background: @light_blue;}}
							.ral_1032 {background: #d6ae01; .transition; &:hover {background: @light_blue;}}
							.ral_1033 {background: #f3a505; .transition; &:hover {background: @light_blue;}}
							.ral_1034 {background: #efa94b; .transition; &:hover {background: @light_blue;}}
							.ral_1035 {background: #6a5d4d; .transition; &:hover {background: @light_blue;}}
							.ral_1036 {background: #705435; .transition; &:hover {background: @light_blue;}}
							.ral_1037 {background: #f39f19; .transition; &:hover {background: @light_blue;}}
							.ral_2000 {background: #ed760e; .transition; &:hover {background: @light_blue;}}
							.ral_2001 {background: #c4461c; .transition; &:hover {background: @light_blue;}}
							.ral_2002 {background: #a52019; .transition; &:hover {background: @light_blue;}}
							.ral_2003 {background: #ff7514; .transition; &:hover {background: @light_blue;}}
							.ral_2004 {background: #e55100; .transition; &:hover {background: @light_blue;}}
							.ral_2005 {background: #ff2301; .transition; &:hover {background: @light_blue;}}
							.ral_2007 {background: #ffa420; .transition; &:hover {background: @light_blue;}}
							.ral_2008 {background: #f75e25; .transition; &:hover {background: @light_blue;}}
							.ral_2009 {background: #e04a00; .transition; &:hover {background: @light_blue;}}
							.ral_2010 {background: #d84b20; .transition; &:hover {background: @light_blue;}}
							.ral_2011 {background: #ec7c25; .transition; &:hover {background: @light_blue;}}
							.ral_2012 {background: #d94f3d; .transition; &:hover {background: @light_blue;}}
							.ral_2013 {background: #c35831; .transition; &:hover {background: @light_blue;}}
							.ral_3000 {background: #af2b1e; .transition; &:hover {background: @light_blue;}}
							.ral_3001 {background: #a2231d; .transition; &:hover {background: @light_blue;}}
							.ral_3002 {background: #9b111e; .transition; &:hover {background: @light_blue;}}
							.ral_3003 {background: #781f19; .transition; &:hover {background: @light_blue;}}
							.ral_3004 {background: #641c1e; .transition; &:hover {background: @light_blue;}}
							.ral_3005 {background: #5e2129; .transition; &:hover {background: @light_blue;}}
							.ral_3007 {background: #412227; .transition; &:hover {background: @light_blue;}}
							.ral_3009 {background: #642424; .transition; &:hover {background: @light_blue;}}
							.ral_3011 {background: #781f19; .transition; &:hover {background: @light_blue;}}
							.ral_3012 {background: #c1876b; .transition; &:hover {background: @light_blue;}}
							.ral_3013 {background: #a12312; .transition; &:hover {background: @light_blue;}}
							.ral_3014 {background: #d47479; .transition; &:hover {background: @light_blue;}}
							.ral_3015 {background: #e1a3b1; .transition; &:hover {background: @light_blue;}}
							.ral_3016 {background: #b32821; .transition; &:hover {background: @light_blue;}}
							.ral_3017 {background: #e63244; .transition; &:hover {background: @light_blue;}}
							.ral_3018 {background: #d53032; .transition; &:hover {background: @light_blue;}}
							.ral_3020 {background: #cc0605; .transition; &:hover {background: @light_blue;}}
							.ral_3022 {background: #d56c32; .transition; &:hover {background: @light_blue;}}
							.ral_3024 {background: #f80000; .transition; &:hover {background: @light_blue;}}
							.ral_3026 {background: #fe0000; .transition; &:hover {background: @light_blue;}}
							.ral_3027 {background: #a2231d; .transition; &:hover {background: @light_blue;}}
							.ral_3031 {background: #b32428; .transition; &:hover {background: @light_blue;}}
							.ral_3032 {background: #721422; .transition; &:hover {background: @light_blue;}}
							.ral_3033 {background: #b32428; .transition; &:hover {background: @light_blue;}}
							.ral_4001 {background: #6d3f5b; .transition; &:hover {background: @light_blue;}}
							.ral_4002 {background: #922b3e; .transition; &:hover {background: @light_blue;}}
							.ral_4003 {background: #de4c8a; .transition; &:hover {background: @light_blue;}}
							.ral_4004 {background: #641c34; .transition; &:hover {background: @light_blue;}}
							.ral_4005 {background: #6c4675; .transition; &:hover {background: @light_blue;}}
							.ral_4006 {background: #a03472; .transition; &:hover {background: @light_blue;}}
							.ral_4007 {background: #4a192c; .transition; &:hover {background: @light_blue;}}
							.ral_4008 {background: #924e7d; .transition; &:hover {background: @light_blue;}}
							.ral_4009 {background: #a18594; .transition; &:hover {background: @light_blue;}}
							.ral_4010 {background: #cf3476; .transition; &:hover {background: @light_blue;}}
							.ral_4011 {background: #8774a2; .transition; &:hover {background: @light_blue;}}
							.ral_4012 {background: #6c6874; .transition; &:hover {background: @light_blue;}}
							.ral_5000 {background: #354d73; .transition; &:hover {background: @light_blue;}}
							.ral_5001 {background: #1d334a; .transition; &:hover {background: @light_blue;}}
							.ral_5002 {background: #20214f; .transition; &:hover {background: @light_blue;}}
							.ral_5003 {background: #1e2460; .transition; &:hover {background: @light_blue;}}
							.ral_5004 {background: #18171c; .transition; &:hover {background: @light_blue;}}
							.ral_5005 {background: #1e2460; .transition; &:hover {background: @light_blue;}}
							.ral_5007 {background: #3e5f8a; .transition; &:hover {background: @light_blue;}}
							.ral_5008 {background: #18171c; .transition; &:hover {background: @light_blue;}}
							.ral_5009 {background: #1d334a; .transition; &:hover {background: @light_blue;}}
							.ral_5010 {background: #0e294b; .transition; &:hover {background: @light_blue;}}
							.ral_5011 {background: #1a2421; .transition; &:hover {background: @light_blue;}}
							.ral_5012 {background: #3a75c4; .transition; &:hover {background: @light_blue;}}
							.ral_5013 {background: #1e2460; .transition; &:hover {background: @light_blue;}}
							.ral_5014 {background: #606e8c; .transition; &:hover {background: @light_blue;}}
							.ral_5015 {background: #2271b3; .transition; &:hover {background: @light_blue;}}
							.ral_5017 {background: #063971; .transition; &:hover {background: @light_blue;}}
							.ral_5018 {background: #138085; .transition; &:hover {background: @light_blue;}}
							.ral_5019 {background: #1b5583; .transition; &:hover {background: @light_blue;}}
							.ral_5020 {background: #1d334a; .transition; &:hover {background: @light_blue;}}
							.ral_5021 {background: #287233; .transition; &:hover {background: @light_blue;}}
							.ral_5022 {background: #282d3c; .transition; &:hover {background: @light_blue;}}
							.ral_5023 {background: #474b57; .transition; &:hover {background: @light_blue;}}
							.ral_5024 {background: #5d9b9b; .transition; &:hover {background: @light_blue;}}
							.ral_6000 {background: #327662; .transition; &:hover {background: @light_blue;}}
							.ral_6001 {background: #287233; .transition; &:hover {background: @light_blue;}}
							.ral_6002 {background: #2d572c; .transition; &:hover {background: @light_blue;}}
							.ral_6003 {background: #424632; .transition; &:hover {background: @light_blue;}}
							.ral_6004 {background: #1f3a3d; .transition; &:hover {background: @light_blue;}}
							.ral_6005 {background: #2f4538; .transition; &:hover {background: @light_blue;}}
							.ral_6006 {background: #3e3b32; .transition; &:hover {background: @light_blue;}}
							.ral_6007 {background: #343b29; .transition; &:hover {background: @light_blue;}}
							.ral_6008 {background: #39352a; .transition; &:hover {background: @light_blue;}}
							.ral_6009 {background: #31372b; .transition; &:hover {background: @light_blue;}}
							.ral_6010 {background: #343b29; .transition; &:hover {background: @light_blue;}}
							.ral_6011 {background: #6c7156; .transition; &:hover {background: @light_blue;}}
							.ral_6012 {background: #2e3a35; .transition; &:hover {background: @light_blue;}}
							.ral_6013 {background: #6c7156; .transition; &:hover {background: @light_blue;}}
							.ral_6014 {background: #47402e; .transition; &:hover {background: @light_blue;}}
							.ral_6015 {background: #3e3b32; .transition; &:hover {background: @light_blue;}}
							.ral_6016 {background: #1e5945; .transition; &:hover {background: @light_blue;}}
							.ral_6017 {background: #4c9141; .transition; &:hover {background: @light_blue;}}
							.ral_6018 {background: #57a639; .transition; &:hover {background: @light_blue;}}
							.ral_6019 {background: #bdecb6; .transition; &:hover {background: @light_blue;}}
							.ral_6020 {background: #2e3a35; .transition; &:hover {background: @light_blue;}}
							.ral_6021 {background: #89ac76; .transition; &:hover {background: @light_blue;}}
							.ral_6022 {background: #25221b; .transition; &:hover {background: @light_blue;}}
							.ral_6024 {background: #308446; .transition; &:hover {background: @light_blue;}}
							.ral_6025 {background: #3e3b32; .transition; &:hover {background: @light_blue;}}
							.ral_6026 {background: #015d52; .transition; &:hover {background: @light_blue;}}
							.ral_6027 {background: #76d7ea; .transition; &:hover {background: @light_blue;}}
							.ral_6028 {background: #2d572c; .transition; &:hover {background: @light_blue;}}
							.ral_6029 {background: #20603d; .transition; &:hover {background: @light_blue;}}
							.ral_6032 {background: #3e3b32; .transition; &:hover {background: @light_blue;}}
							.ral_6033 {background: #497e76; .transition; &:hover {background: @light_blue;}}
							.ral_6034 {background: #7fb5b5; .transition; &:hover {background: @light_blue;}}
							.ral_7000 {background: #78858b; .transition; &:hover {background: @light_blue;}}
							.ral_7001 {background: #8a9597; .transition; &:hover {background: @light_blue;}}
							.ral_7002 {background: #817679; .transition; &:hover {background: @light_blue;}}
							.ral_7003 {background: #8d948e; .transition; &:hover {background: @light_blue;}}
							.ral_7004 {background: #9c9c9c; .transition; &:hover {background: @light_blue;}}
							.ral_7005 {background: #6c7059; .transition; &:hover {background: @light_blue;}}
							.ral_7006 {background: #736b59; .transition; &:hover {background: @light_blue;}}
							.ral_7008 {background: #6e5c4b; .transition; &:hover {background: @light_blue;}}
							.ral_7009 {background: #5b686d; .transition; &:hover {background: @light_blue;}}
							.ral_7010 {background: #4c514a; .transition; &:hover {background: @light_blue;}}
							.ral_7011 {background: #434b4d; .transition; &:hover {background: @light_blue;}}
							.ral_7012 {background: #4c514a; .transition; &:hover {background: @light_blue;}}
							.ral_7013 {background: #464531; .transition; &:hover {background: @light_blue;}}
							.ral_7015 {background: #47484b; .transition; &:hover {background: @light_blue;}}
							.ral_7016 {background: #353f43; .transition; &:hover {background: @light_blue;}}
							.ral_7021 {background: #28282d; .transition; &:hover {background: @light_blue;}}
							.ral_7022 {background: #4e5754; .transition; &:hover {background: @light_blue;}}
							.ral_7023 {background: #8d948e; .transition; &:hover {background: @light_blue;}}
							.ral_7024 {background: #28282d; .transition; &:hover {background: @light_blue;}}
							.ral_7026 {background: #1e5945; .transition; &:hover {background: @light_blue;}}
							.ral_7030 {background: #8d948e; .transition; &:hover {background: @light_blue;}}
							.ral_7031 {background: #47484b; .transition; &:hover {background: @light_blue;}}
							.ral_7032 {background: #c0c7c2; .transition; &:hover {background: @light_blue;}}
							.ral_7033 {background: #7d8471; .transition; &:hover {background: @light_blue;}}
							.ral_7034 {background: #928c84; .transition; &:hover {background: @light_blue;}}
							.ral_7035 {background: #d7d7d7; .transition; &:hover {background: @light_blue;}}
							.ral_7036 {background: #979392; .transition; &:hover {background: @light_blue;}}
							.ral_7037 {background: #7d8471; .transition; &:hover {background: @light_blue;}}
							.ral_7038 {background: #d0d0d0; .transition; &:hover {background: @light_blue;}}
							.ral_7039 {background: #6d6552; .transition; &:hover {background: @light_blue;}}
							.ral_7040 {background: #9c9c9c; .transition; &:hover {background: @light_blue;}}
							.ral_7042 {background: #8d948e; .transition; &:hover {background: @light_blue;}}
							.ral_7043 {background: #4c514a; .transition; &:hover {background: @light_blue;}}
							.ral_7044 {background: #cac4b0; .transition; &:hover {background: @light_blue;}}
							.ral_7045 {background: #8d948e; .transition; &:hover {background: @light_blue;}}
							.ral_7046 {background: #82898e; .transition; &:hover {background: @light_blue;}}
							.ral_7047 {background: #d0d0d0; .transition; &:hover {background: @light_blue;}}
							.ral_8000 {background: #826c34; .transition; &:hover {background: @light_blue;}}
							.ral_8001 {background: #955f20; .transition; &:hover {background: @light_blue;}}
							.ral_8002 {background: #6c3b2a; .transition; &:hover {background: @light_blue;}}
							.ral_8003 {background: #734222; .transition; &:hover {background: @light_blue;}}
							.ral_8004 {background: #8e402a; .transition; &:hover {background: @light_blue;}}
							.ral_8007 {background: #6f4f28; .transition; &:hover {background: @light_blue;}}
							.ral_8008 {background: #6f4f28; .transition; &:hover {background: @light_blue;}}
							.ral_8011 {background: #5b3a29; .transition; &:hover {background: @light_blue;}}
							.ral_8012 {background: #592321; .transition; &:hover {background: @light_blue;}}
							.ral_8014 {background: #382c1e; .transition; &:hover {background: @light_blue;}}
							.ral_8015 {background: #633a34; .transition; &:hover {background: @light_blue;}}
							.ral_8016 {background: #4c3b30; .transition; &:hover {background: @light_blue;}}
							.ral_8017 {background: #45322e; .transition; &:hover {background: @light_blue;}}
							.ral_8019 {background: #403a3a; .transition; &:hover {background: @light_blue;}}
							.ral_8022 {background: #1c1c1c; .transition; &:hover {background: @light_blue;}}
							.ral_8023 {background: #a65e2e; .transition; &:hover {background: @light_blue;}}
							.ral_8024 {background: #79553d; .transition; &:hover {background: @light_blue;}}
							.ral_8025 {background: #755c48; .transition; &:hover {background: @light_blue;}}
							.ral_8028 {background: #4c2f27; .transition; &:hover {background: @light_blue;}}
							.ral_9001 {background: #fdf4e3; .transition; &:hover {background: @light_blue;}}
							.ral_9002 {background: #e7ebda; .transition; &:hover {background: @light_blue;}}
							.ral_9003 {background: #f4f4f4; .transition; &:hover {background: @light_blue;}}
							.ral_9004 {background: #282828; .transition; &:hover {background: @light_blue;}}
							.ral_9005 {background: #0a0a0a; .transition; &:hover {background: @light_blue;}}
							.ral_9006 {background: #a5a5a5; .transition; &:hover {background: @light_blue;}}
							.ral_9007 {background: #8f8f8f; .transition; &:hover {background: @light_blue;}}
							.ral_9010 {background: #fdfdfd; .transition; &:hover {background: @light_blue;}}
							.ral_9011 {background: #242124; .transition; &:hover {background: @light_blue;}}
							.ral_9016 {background: #f9f9f9; .transition; &:hover {background: @light_blue;}}
							.ral_9017 {background: #2a292a; .transition; &:hover {background: @light_blue;}}
							.ral_9018 {background: #dadada; .transition; &:hover {background: @light_blue;}}
							.ral_9022 {background: #9c9c9c; .transition; &:hover {background: @light_blue;}}
							.ral_9023 {background: #82898e; .transition; &:hover {background: @light_blue;}}
							
							div {
								width: 22%;
								background: @light_blue;
								padding: 5px;
								border-radius: 4px;
								
								&:first-child {
									display: none;
								}
							}
							
							&:before {
								display: none;
							}
						}
						
						&:after {
							content: '\2191';
							position: absolute;
							top: 25px;
							left: 100%;
							transform: translateX(5px);
							color: @dark;
							opacity: .5;
						}
						
						&:before {
							content: '\2193';
							position: absolute;
							bottom: 25px;
							left: 100%;
							transform: translateX(5px);
							color: @dark;
							opacity: .5;
						}
					}
					
					&.wc-pao-addon-id-1725270683 {
						
						.form-row {
							display: flex;
							gap: 4%;
							row-gap: 20px;
							flex-wrap: wrap;
							
							div {
								width: 22%;
								background: @light_blue;
								padding: 5px;
								border-radius: 4px;
								
								&:first-child {
									display: none;
								}
							}
							
							&:before {
								display: none;
							}	
						}
					}
				}
				
				#product-addons-total {
					display: none;
					position: absolute;
					top: 0;
					left: 100%;
					transform: translateX(25px);
					z-index: 998;
					height: 100%;
					min-width: 35vw;
					
					.product-addon-totals {
						position: sticky;
						top: 175px;
						background: #3b66e8;
						color: #ffffff;
						border-radius: 0px 10px 10px 0px;
						padding: 50px 25px;
						border-top: none;
						border-bottom: none;
						overflow: hidden;
						
						li {
							padding: 0px;
							gap: 25px;
							
							span {
								font-size: 12px;
							}
							
							&:first-child {
								
								span {
									font-size: unset;
									display: none;
								}
							}
							
							// Dit zijn de prijzen van veld 7, 8 en 9 in het blauwe vak
							&:nth-child(3),
							&:nth-child(4),
							&:nth-child(6),
							&:nth-child(7), 
							&:nth-child(8),
							&:nth-child(9),
							&:nth-child(10),
							&:nth-child(11) {
								
								.wc-pao-col2 {
									
									.amount {
										color: #3b66e8;
									}
								}
							}
						}
						
						// &:after {
						// 	display: flex;
						// 	align-items: center;
						// 	justify-content: center;
						// 	content: 'i';
						// 	position: absolute;
						// 	top: 0;
						// 	left: 0;
						// 	width: 25px;
						// 	height: 25px;
						// 	border-radius: 25px;
						// 	background: @light_blue;
						// 	color: @dark;
						// }
					}
					
					.price {
						margin-top: 20px;
						color: #fff !important;
						font-size: 1.5em !important;
						
						.amount {
							font-size: unset;
						}
					}
				}
			}
		}
		
		.single_add_to_cart_button {
			font-family: 'Regular' !important;
			font-weight: unset;
			border-radius: 100px !important;
			background: #00bc82 !important;
			color: #ffffff !important;
			outline: none !important;
		}
		
		.offerte_button {
			font-family: 'Regular' !important;
			font-weight: unset;
			border-radius: 100px !important;
			background: transparent !important;
			border: 1px solid @dark;
			color: @dark !important;
			outline: none !important;
			
			&:hover {
				background: @dark !important;
				border: 1px solid @dark;
				color: #ffffff !important;
			}
		}
		
		// Save For Later
		.sfl-wrapper {
			background: @light_blue;
			padding: 25px 15px 13px 15px;
			border-radius: 4px;
			
			.opgeslagen_offertes {
				border-color: @dark;
			}
		}
		
		.sfl-list-table {
			border: none;
			background: @light_blue;
			
			tr {
				
				td {
					text-align: start;
					padding: 0;
					
					span {
						color: @dark;
					}
				}	
			}
			
			.actie {
				vertical-align: middle;
				
				a {
					font-family: 'Regular' !important;
					background: unset !important;
					color: @dark !important;
					border-radius: unset !important;
					padding: 0px !important;
					border: none;
					font-size: .8rem !important;
					line-height: unset !important;
					font-weight: unset !important;
					margin: 0 !important;
					.transition;
					text-decoration: underline;
				}
			}
			
			.prijs {
				vertical-align: middle;
				text-align: end;
				
				span {
					font-size: 1rem !important;
					font-family: 'Bold' !important;
				}
			}
			
			a {
				color: @dark;
				font-family: 'Semibold';
				margin-right: 5px;
			}
			
			.variation {
				display: flex;
				flex-wrap: wrap;
				font-size: .8rem;
				line-height: 20px;
				margin-bottom: 12px;
				
				dd {
					margin-bottom: 0;
					
					p {
						color: @dark;
						position: relative;
						margin-right: 5px;
						margin-bottom: 0;
						
						&:after {
							content: ',';
							position: absolute;
							top: 0;
							left: 100%;
							width: 2px;
							height: 4px;
							color: @dark;
						}
						
						span {
							color: @dark;
						}
					}
					
					&:last-child {
						
						p {
							
							&:after {
								content: '';
							}
						}
					}
				}
				
				dt {
					display: none;
				}
			}
		}
		
		// Winkelwagen
		.shop_table {
			border: none;
			
			tr {
				border: none;
			}
			
			.remove,
			.sfl_cart_link {
				display: inline !important;
				font-family: 'Regular' !important;
				font-size: .8rem !important;
				height: unset !important;
				width: unset !important;
				text-align: left !important;
				line-height: unset !important;
				border-radius: unset !important;
				color: @dark !important;
				text-decoration: underline !important;
				font-weight: unset !important;
				border: 0 !important;
				
				&:hover {
					background: transparent !important;
				}
			}
			
			.edit-link {
				display: inline !important;
				font-family: 'Regular' !important;
				font-size: .8rem !important;
				height: unset !important;
				width: unset !important;
				text-align: left !important;
				line-height: unset !important;
				border-radius: unset !important;
				color: @dark !important;
				text-decoration: underline !important;
				font-weight: unset !important;
				border: 0 !important;
				
				&:hover {
					background: transparent !important;
				}
			}
			
			.product-name {
				border: none;
				
				a {
					color: @dark;
					font-family: 'Semibold';
					margin-right: 5px;
				}
				
				.variation {
					display: flex;
					flex-wrap: wrap;
					font-size: .8rem;
					line-height: 20px;
					
					dd {
						
						p {
							color: @dark;
							position: relative;
							margin-right: 5px;
							
							&:after {
								content: ',';
								position: absolute;
								top: 0;
								left: 100%;
								width: 2px;
								height: 4px;
								color: @dark;
							}
						}
						
						&:last-child {
							
							p {
								
								&:after {
									content: '';
								}
							}
						}
					}
					
					dt,
					.woocommerce-Price-amount {
						display: none;
					}
				}
			}
			
			.product-subtotal {
				border: none;
				text-align: end;
				
				span {
					font-family: 'Bold' !important;
				}
			}
		}
		
		.primaire_button {
			font-family: 'Regular' !important;
			background: @detail;
			color: #ffffff;
			border-radius: 100px;
			padding: 10px 30px;
			.transition;
			
			&:hover {
				background: @detail_hover;
			}
		}
		
		.cart-collaterals {
			
			.cart_totals  {
				float: unset;
				width: 100%;
				
				* {
					border-color: @light_blue;
				}
				
				.tax-total {
					
					td {
						text-align: end;
					}
				}
				
				.wc-proceed-to-checkout {
					
					a {
						font-size: 1rem;
						font-family: 'Regular' !important;
						font-weight: unset;
						display: inline;
						background: @detail;
						color: #ffffff;
						border-radius: 100px;
						padding: 10px 30px;
						.transition;
						
						&:hover {
							background: @detail_hover;
						}
					}
					
					.cart-pdf-button {
						font-size: 1rem;
						font-family: 'Regular' !important;
						font-weight: unset;
						display: inline;
						text-decoration: underline;
						background: transparent;
						color: @dark;
						border-radius: unset;
						padding: 10px 30px;
						.transition;
						
						&:hover {
							background: transparent;
						}
					}
				}
			}
		}
	}
	
	// Product overview	
	hr {
		border-color: @light_blue;
		opacity: 1;
	}
	
	.product_categorie {
		color: @dark;
		font-size: 2rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		&:hover {
			color: @detail;
			padding: 0 0 0 10px;
		}
		
		i {
			font-size: 1rem;
		}
	}
	
	.collapse {
		
		.product {
			
			.woocommerce-product-details__short-description {
				
				p {
					color: @dark;
					opacity: .75;
					.transition;
				}
			}
			
			&:hover {
				
				.woocommerce-product-details__short-description {
					
					p {
						opacity: 1;
					}
				}
			}
		}
	}
	
	.products {
		margin: 0 0 0em !important;
		
		// Producten op winkel en producten pagina
		li {
			
			.product {
				width: 100% !important;
				padding: 25px;
				border-radius: 26px !important;
				aspect-ratio: 4/3;
				.background_style;
				
				&:after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-image: linear-gradient(to top, @dark, transparent);
					border-radius: 26px;
					opacity: .75;
				}
				
				.product_content {
					position: relative;
					z-index: 10;
					height: 100%;
					
					.woocommerce-product-details__short-description {
						display: none;
					}
					
					h2 {
						background: @dark;
						color: @light;
						display: inline-block;
						padding: 10px !important;
						border-radius: 10px;
					}
					
					p {
						color: @light;
						margin: 0;
						position: absolute;
						bottom: 0;
						left: 0;
					}
				}
			}
		}
		
		.product {
			
			img {
				width: 100% !important;
				border-radius: 26px !important;
				aspect-ratio: 4/3;
				object-fit: cover;
			}
			
			h2 {
				color: @dark;
				font-size: 1rem !important;
				padding: 0 !important;
			}
			
			.woocommerce-product-short-description,
			.woocommerce-product-details__short-description {
				
				p { 
					color: @dark;
					font-size: 1rem !important;
					padding: 0 !important;
					opacity: .75;
					.transition;
				}
			}
			
			&:hover {
				
				.woocommerce-product-short-description,
				.woocommerce-product-details__short-description {
					
					p {
						opacity: 1;
					}
				}
			}
			
			.button {
				font-family: 'Regular' !important;
				font-weight: unset;
				background: @detail;
				border: 1px solid @detail;
				color: @light;
				padding: 15px 25px;
				border-radius: 100px;
				text-align: center;
				.transition;
				
				&:hover {
					background: @detail_hover;
					border: 1px solid @detail_hover;
				}
			}
		}
	}
	
	.formulier_klantenservice {
		padding: 25px;
		border-radius: 16px;
		background: @light_blue;
		color: @dark;
		
		.offerte_button {
			background: rgb(255, 139, 0);
			color: @light;
			padding: 10px 20px;
			border-radius: 100px;
		}
		
		hr {
			border-color: @dark;
			opacity: .2;
		}
		
		.profiel_klantenservice {
			
			img {
				aspect-ratio: 1;
				object-fit: cover;
				width: 100px;
				border-radius: 100px;
			}
		}
		
		.gegevens_klantenservice {
			
			a { 
				color: @dark;
			}
			
			i {
				margin-right: 12px;
			}
		}
		
		.gform_fields {
			row-gap: 16px;
			
			input[type='text'],
			input[type='email'],
			textarea {
				background: @light;
				border: none;
				border-radius: 4px;
				box-shadow: none;
			}
		}
		
		input[type='submit'] {
			border-radius: 100px !important;
			background: @detail !important;
			color: @light !important;
			outline: none !important;
		}
		
		// Bedankt pagina orderoverzicht
		
		.woocommerce-order {
			
			ul {
				padding: 0;
			}
			
			h2 {
				font-size: 1rem !important;
			}
			
			table, address {
				border-color: @light;
				border-width: 1px;
				
				td, th {
					border-color: @light;
				}
				
				.woocommerce-customer-details--phone {
					margin: 0;
				}
			}
		}
	}
	
	.entry-summary {
		
		.product_title {
			
		}
		
		.price {
			// color: @keppel !important;
			font-size: 2.5em !important;
			line-height: 100% !important;
		}
		
		.cart {
			display: flex;
			align-items: center;
			
			.quantity {
				
				input {
					border: 1px solid @dark;
					border-radius: 5px;
					padding: 5px 0px;
					margin-right: 25px;
				}
				
			}
			
			.quantity {
				display: none;
			}
			
			.single_add_to_cart_button {
				// background: @primair !important;
				color: #fff !important;
				padding: 10px 25px !important;
				.transition;
				
				&:hover {
					// background: @primair !important;
				}
			}
		}
	}
	
	.cart-collaterals {
		
		.cart-subtotal {
			
			td {
				text-align: end;
			}
		}
		
		.shipping {
			
			.woocommerce-shipping-calculator {
				margin: 0;
				text-align: end;
				
				span {
					text-align: start;
				}
				
				a {
					margin: 0;
					color: @primair;
					text-decoration: underline;
					
					&:hover {
						color: @detail;
					}
					
					&:after {
						content: none;
					}
				}
			}
		}
		
		.order-total {
			
			td {
				text-align: end;
			}
		}
	}
	
	#shipping_method, .woocommerce-shipping-destination {
		text-align: end !important;
	}
}


.login_box {
	display: flex;
	flex-direction: column;
	
	p {
		width: 100% !important;
		display: flex;
		flex-direction: column;
		
		input[type='text'],
		input[type='password'] {
			padding: 10px;
			background: @light_blue;
			border: none;
			border-radius: 4px;
			box-shadow: none;
		}
	}
	
	.woocommerce-form-login__rememberme {
		margin-top: 4px;
	}
	
	input[type='checkbox'] {
		-webkit-appearance: auto;
	}
	
	button[type='submit'] {
		font-weight: unset;
		font-family: 'Regular' !important;
		border-radius: 100px !important;
		background: @detail !important;
		color: @light !important;
		outline: none !important;
		border: none;
		padding: 10px 30px;
	}
	
	.lost_password {
		display: none;
	}
	
	.login {
		border: none;
		padding: 0;
		margin: 0;
	}
	
	.register {
		display: flex;
		flex-direction: row;
		gap: 5px;
		color: @dark;
		font-size: .9rem !important;
		
		a {
			text-decoration: underline;
			color: @dark;
		}
	}
}

/*------------------------------------------------------------------------ Global ------------------------------------------------------------------------*/
.topbar {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
	background: @dark;
	color: @light;
	padding: 10px 0px;
	
	ul {
		padding: 0;
		margin: 0;
		list-style-type: none;
		display: flex;
		justify-content: flex-end;
		gap: 40px;
		
		a {
			color: @light;
			
			i {
				margin-right: 12px;
			}
		}
	}
}

#header {
	position: fixed;
	top: 44px;
	width: 100%;
	z-index: 999;
	background: @light;
	padding: 25px 0px;
	.transition;
	
	&.scrolled {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		background: @light;
		padding: 10px 0px;
		.boxshadow_style;
		
		.navbar-brand {
			
			img {
				width: 75%;
			}
		}
		
		.button_box {
			
			.primaire_button {
				padding: 15px 30px;
			}
			
			.secundaire_button {
				padding: 15px 20px;
			}

			.wederverkoper_button {
				padding: 15px 20px;
			}
		}
	}
	
	nav {
		padding: 0 !important;
	}
	
	.navbar-brand {
		padding: 0 !important;
		width: 200px;
		
		img {
			width: 100%;
			.transition;
		}
	}
	
	#menu-hoodfmenu {
		display: flex;
		
		.current-menu-item {
			
			a {
				font-weight: bold;
				position: relative;
				
				&:after {
					content: '';
					position: absolute;
					top: 100%;
					left: 0;
					width: 100%;
					height: 2px;
					background: @dark;
				}
			}
		}
		
		a {
			color: @dark;
			font-family: 'Medium' !important;
			margin: 0px 0px 0px 50px;
			padding: 0;
			position: relative;
			.transition;
			
			&:after {
				content: '';
				position: absolute;
				top: 100%;
				left: 0;
				width: 0%;
				height: 2px;
				background: @dark;
				.transition;
			}
			
			&:hover {
				
				&:after {
					width: 100%;
				}
			}
		}
	}
	
	.header_icons {
		
		a {
			font-size: .8rem !important;
			color: @dark;
		}
		
		i {
			color: @dark;
			font-size: 24px;	
		}
	}
	
	.button_box {
		display: flex;
		gap: 0px;
		.transition;
		
		.primaire_button {
			background: @detail;
			color: @light;
			border-radius: 100px 0px 0px 100px;
			border-right: 1px solid #fff;
			padding: 25px 30px;
			.transition;
			
			&:hover {
				background: @detail_hover;
			}
		}
		
		.secundaire_button {
			background: @detail;
			color: @light;
			border: none;
			border-radius: 0px 100px 100px 0px;
			padding: 25px 30px;
			.transition;
			
			&:hover {
				background: @detail_hover;
			}
		}

		.wederverkoper_button {
			background: #ff8b00;
			color: @light;
			border: none;
			border-radius: 100px;
			padding: 25px 30px;
			.transition;
			
			&:hover {
				background: #dd7900;
				color: @light;
				border: none;
			}
		}
	}
	
	.navbar-toggler {
		border: none;
		
		&:focus {
			box-shadow: none;
		}
		
		span {
			width: 30px;
			height: 3px;
			border-radius: 3px;
			margin: 5px 0px;
			display: block;
			background: @dark;
			.transition;
		}
		
		span:nth-child(3) {
			width: 20px;
		}
	}
	
	.close {
		
		span:nth-child(1) {
			transform: rotate(45deg) translateX(5px);
		}
		
		span:nth-child(2) {
			display: none;
		}
		
		span:nth-child(3) {
			width: 30px;
			transform: rotate(-45deg) translateX(5px);
		}
	}
	
	ul {
		margin: 0;
		list-style-type: none;
		
		a {
			color: @dark;
			
			&:hover {
				color: @primair;
			}
		}
	}
}

.button_box {
	display: flex;
	gap: 20px;
	
	.primaire_button {
		background: @detail;
		color: @light;
		border-radius: 100px;
		padding: 10px 30px;
		.transition;
		
		&:hover {
			background: @detail_hover;
		}
	}
	
	.secundaire_button {
		background: transparent;
		border: 1px solid @light;
		color: @light;
		border-radius: 100px;
		padding: 10px 30px;
		.transition;
		
		&:hover {
			background: @light;
			border: 1px solid @light;
			color: @dark;
		}
	}
}

.page_content {
	margin-top: 149px;

	.page_div {

		&.lost_password {
			padding: 100px 0;

			.primaire_button {
				background: @detail;
				color: @light;
				border-radius: 100px;
				padding: 10px 30px;
				width: max-content;
				.transition;
				
				&:hover {
					background: @detail_hover;
				}
			}

			.form_box {
				background: @light_blue;
				border-radius: 10px;
				padding: 32px 20px;

				form {

					p {
						width: 100%;
					}
				}
			}

			button {
				background: transparent;
				border: 1px solid @dark;
				color: @dark;
				border-radius: 100px;
				padding: 10px 30px;
				.transition;
				
				&:hover {
					background: @light;
					border: 1px solid @light;
					color: @dark;
				}
			}
		}
		
		&.intro {
			background: @light;
			color: @dark;

			.primaire_button {
				animation: fade_in_top .3s ease-out forwards .5s;
				transform: translateY(20px);
				opacity: 0;
			}

			.secundaire_button {
				animation: fade_in_top .3s ease-out forwards .6s;
				transform: translateY(20px);
				opacity: 0;
				background: #ff8b00;
				border: none;
				.transition;

				i {
					transform: translateX(-10px);
					position: absolute;
					opacity: 0;
					.transition;
				}
				
				&:hover {
					background: #dd7900;
					color: @light;
					border: none;
					padding-right: 45px;

					i {
						transform: translateX(10px);
						opacity: 1;
					}
				}
			}

			@keyframes fade_in_top {
				to {
					transform: translateY(0px);
					opacity: 1;
				}
			}
			
			.col-lg-4 {
				position: relative;
				
				* {
					position: relative;
					z-index: 1;
				}
				
				.letter_achtergrond {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 0;
				}
			}
			
			.global_image {
				height: 60vh;
				border-radius: 500px 0 0 500px;
				position: relative;
				overflow: hidden;
				
				.video_wrapper {
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: -1;
					pointer-events: none;
					overflow: hidden;
					
					video {
						width: 100vw;
						height: 56.25vw;
						min-height: 100vh;
						// min-width: 177.77vh;
						min-width: 120vh;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
			
			.usp_blak {
				position: relative;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 0%;
				animation: grow_x 1s forwards;
				color: @light;
				background: @primair;
				border-radius: 100px;
				display: flex;
				justify-content: space-evenly;
				padding: 15px 30px;
				
				@keyframes grow_x {
					to {
						width: 100%;
					}
				}
				
				.usp {
					display: flex;
					align-items: center;
					white-space: nowrap;
					gap: 5px;
					animation: fade_in 1s forwards 1s;
					opacity: 0;
					transform: translateY(10px);
					
					i {
						font-size: 32px;
					}
					
					p {
						font-size: 18px !important;
						font-family: 'Bold' !important;
						margin: 0;
					}
					
					@keyframes fade_in {
						to {
							white-space: unset;
							opacity: 1;
							transform: translateY(0px);
						}
					}
				}
			}
		}
		
		&.subintro {
			
			.intro_achtergrond {
				color: @light;
				height: 60vh;
				border-radius: 0 500px 500px 0;
				.background_style;
				position: relative;
				
				&:after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: @dark;
					opacity: .3;
					border-radius: 0 500px 500px 0;
				}
				
				&.omdraaien {
					border-radius: 500px 0px 0px 500px;
				
					&:after {
						border-radius: 500px 0px 0px 500px;
					}
				}
				
				* {
					position: relative;
					z-index: 10;
				}
			}
		}
		
		&.klant_registratie {
			
			p {
				display: flex;
				flex-direction: column;
			}
			
			.woocommerce-privacy-policy-text {
				
				p {
					display: block;
				}
			}

			.woocommerce-form {

				.woocommerce-form-row {
					margin-bottom: .5rem;

					label {
						display: none;
					}
				}

				p {
					&:nth-child(4) {
						display: none;
					}
				}

				input {

					&::placeholder {
						color: @dark;
						font-size: 1rem !important;
						font-family: 'Regular';
					}
				}
			}

			.af_c_f_extra_fields {

				label {
					display: none;
				}
			}

			#af_c_f_user_roles {
				display: none;
			}

			.password-input {
				position: relative;

				input {
					width: 100%;
				}

				.show-password-input {
					position: absolute;
					top: 50%;
					left: 100%;
					width: 16px;
					height: 16px;
					border: none;
					background: none;
    				transform: translate(-200%, -100%);

					&:after {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						width: 100%;
						height: 100%;
						border-radius: 16px;
						background-image: url('../images/eye.svg');
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
					}
				}
			}
			
			input[type='text'],
			input[type='email'],
			input[type='tel'],
			input[type='password'] {
				padding: 10px 15px;
				background: @light_blue;
				border: 1px solid @light_blue;
				border-color: @light_blue;
				border-radius: 4px;
				box-shadow: none;
			}
			
			input[type='number'],
			textarea {
				padding: 10px 15px;
				background: @light_blue;
				border: 1px solid @light_blue;
				border-color: @light_blue;
				border-radius: 4px;
				box-shadow: none;
			}
			
			select {
				background: @light_blue;
				border: 1px solid @light_blue;
				border-color: @light_blue;
				border-radius: 4px;
				box-shadow: none;
			}
			
			button[type='submit'] {
				font-family: 'Regular' !important;
				font-weight: unset !important;
				background: @detail !important;
				color: @light !important;
				border-radius: 100px !important;
				padding: 10px 30px !important;
				border: none;
				.transition;
				
				&:hover {
					background: @detail_hover !important;
					color: @light !important;
				}
			}
		}
		
		&.kolom_1 {
			color: @dark;
			
			.gform_submission_error {
				font-size: 1rem !important;
			}
			
			#field_1_5 {
				
				.gform-field-label {
				.transition;
				
					&:hover {
						transform: none;
					}
				}
			}
			
			.gform-field-label {
				.transition;
				
				&:hover {
					transform: translateY(-5px) scale(1.05);
					
					.image-choices-choice-text {
						background: @light;
						color: @dark;
					}
				}
				
				&:after {
					border-radius: 26px !important;
				}
				
				.image-choices-choice-image-wrap {
					border-radius: 26px !important;
				}
				
				.image-choices-choice-text {
					.transition;
					width: max-content;
					background: @dark;
					color: @light;
					padding: 10px !important;
					border-radius: 10px;
					position: absolute;
					top: 25px;
				}
			}
			
			.gform_fields {
				row-gap: 15px;
				
				.gfield_required {
					display: none;
				}
				
				
				input[type='text'],
				input[type='email'],
				input[type='tel'] {
					padding: 25px 15px;
					background: @light_blue;
					border: 1px solid @light_blue;
					border-color: @light_blue;
					border-radius: 4px;
					box-shadow: none;
				}
				
				input[type='number'],
				textarea {
					padding: 18px 15px;
					background: @light_blue;
					border: 1px solid @light_blue;
					border-color: @light_blue;
					border-radius: 4px;
					box-shadow: none;
				}
				
				input[type='file'] {
					height: 150px;
					background: @light;
					border-radius: 4px;
					padding: 25px;
				}
				
				select {
					background: @light_blue;
					border: 1px solid @light_blue;
					border-color: @light_blue;
					border-radius: 4px;
					box-shadow: none;
				}
			}
			
			.gform_previous_button {
				border-radius: 100px !important;
				padding: 10px 30px !important;
			}
			
			.gform_next_button {
				font-family: 'Regular' !important;
				font-weight: unset !important;
				background: @detail !important;
				color: @light !important;
				border-radius: 100px !important;
				padding: 10px 30px !important;
				.transition;
				
				&:hover {
					background: @detail_hover !important;
					color: @light !important;
				}
			}
			
			input[type='submit'] {
				font-family: 'Regular' !important;
				font-weight: unset !important;
				background: @detail !important;
				color: @light !important;
				border-radius: 100px !important;
				padding: 10px 30px !important;
				.transition;
				
				&:hover {
					background: @detail_hover !important;
					color: @light !important;
				}
			}
		}
		
		&.kolom_2 {
			color: @dark;
			
			.contactgegevens {
				
				ul {
					margin: 0;
					padding: 0;
					list-style-type: none;
					
					li {
						
						a {
							color: @dark;
							
							&:hover {
								color: @detail;
							}
						}
					}
				}
			}
			
			.gform_fields {
				row-gap: 15px;
				
				input[type='text'],
				input[type='email'],
				textarea {
					padding: 25px 15px;
					background: @light_blue;
					border: 1px solid @light_blue;
					border-color: @light_blue;
					border-radius: 4px;
					box-shadow: none;
				}
			}
			
			input[type='submit'] {
				font-family: 'Regular' !important;
				font-weight: unset !important;
				background: @detail !important;
				color: @light !important;
				border-radius: 100px !important;
				padding: 10px 30px !important;
				.transition;
				
				&:hover {
					background: @detail_hover !important;
					color: @light !important;
				}
			}
		}
		
		&.producten {
			
			.producten_box {
				background: #ecf3fd;
				border-radius: 12px;
				padding: 50px 25px;
				color: @dark;
				
				.products {
					
					.product {
						
						.woocommerce-product-details__short-description {
							
							p {
								color: @dark;
								opacity: .75;
								.transition;
							}
						}
						
						&:hover {
							
							.woocommerce-product-details__short-description {
								
								p {
									opacity: 1;
								}
							}
						}
					}
				}
			}
			
			.formulier_klantenservice {
				padding: 25px;
				border-radius: 16px;
				background: @light_blue;
				color: @dark;
				
				.offerte_button {
					background: rgb(255, 139, 0);
					color: @light;
					padding: 10px 20px;
					border-radius: 100px;
				}
				
				hr {
					border-color: @dark;
				}
				
				.profiel_klantenservice {
					
					img {
						aspect-ratio: 1;
						object-fit: cover;
						width: 100px;
						border-radius: 100px;
					}
				}
				
				.gegevens_klantenservice {
					
					a { 
						color: @dark;
					}
					
					i {
						margin-right: 12px;
					}
				}
				
				.gform_fields {
					row-gap: 16px;
					
					input[type='text'],
					input[type='email'],
					textarea {
						background: @light;
						border: none;
						border-radius: 4px;
						box-shadow: none;
					}
				}
				
				input[type='submit'] {
					border-radius: 100px !important;
					background: @detail !important;
					color: @light !important;
					outline: none !important;
				}
			}
		}
		
		&.tekst_stappen {
			background: @light;
			color: @dark;
			
			.col-lg-5 {
				position: relative;
				
				* {
					position: relative;
					z-index: 1;
				}
				
				.letter_achtergrond {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 0;
				}
			}
			
			.stappen {
				
				.stap {
					position: relative;
					display: flex;
					gap: 25px;
					
					.stap_nummer {
						position: relative;
						z-index: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 25px;
						font-size: 24px;
						width: 50px;
						height: 50px;
						border-radius: 50px;
						background: @dark;
						color: @light;
						.transition;
						transform: scale(0);
						opacity: 0;
						
						hr {
							transform-origin: 0% 0%;
							position: absolute;
							z-index: -1;
							transform: rotate(90deg) translateY(-1px);
							border-color: @dark;
							border-width: 2px;
							opacity: 1;
							.transition;
							top: 0%;
							left: 50%;
							width: 0px;
						}
					}
					
					.stap_content {
						.transition;
						opacity: 0;
						
						p {
							margin: 0;
						}
					}
					
					&:last-child {
						
						hr {
							display: none;
						}
					}
					
					&.fade_in {
						
						.stap_nummer {
							transform: scale(1);
							opacity: 1;
							
							hr {
								width: 175px;
							}
						}
						
						.stap_content {
							opacity: 1;
						}
					}
				}
			}
		}
		
		&.tekst_afbeelding {
			background: @light_blue;
			color: @dark;
			
			.afbeelding {
				width: 100%;
				aspect-ratio: 3/2;
				.background_style;
			}
		}
		
		&.slider_foto_tekst {
			color: @dark;
			position: relative;
			
			.shape {
				position: absolute;
				left: 0;
				top: 55%;
				transform: translateY(-50%);
				background: @light_blue;
				height: 90%;
				width: 40%;
				border-radius: 0 500px 500px 0;
			}
			
			.slides {
				display: flex;
				flex-wrap: wrap;
				
				.slide {
					width: 50%;
					
					.slide_afbeelding {
						height: 450px;
						border-radius: 16px;
						.background_style;
					}	
					
					.tekst {
						transform: translateY(10px);
						opacity: 0;
						.transition;
					}
					
					&.slick-current {
						
						.tekst {
							transform: translateY(0px);
							opacity: 1;
						}
					}
				}
			}
		}
		
		&.usps {
			
			.usps_box {
				background: @light_blue;
				padding: 75px 50px;
				border-radius: 1000px;
				
				.usp_box {
					display: flex;
					
					.usp {
						width: 100%;
						
						p {
							margin-top: 1rem;
						}
					}
					
					svg {
						height: 75px;
						width: auto;
					}
				}
				
				.button_box {
					justify-content: center;
				}
			}
		}
		
		&.faq {
			color: @dark;
			
			.inbegrepen_functies_box {
				
				p {
					color: @dark;
					margin-top: 15px;
				}
				
				.toggle_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					position: relative;
					padding: 5px 0px;
					margin: 5px 0px;
					border-bottom: 1px solid @dark;
					z-index: 1;
					
					p {
						margin: 0;
					}
					
					.functie_nummer {
						color: @dark;
					}
					
					h5 {
						margin: 10px 0px;
						color: @dark;
					}
					
					svg {
						color: @dark;
					}
					
					&:hover {
						border-radius: 12px;
						padding: 5px 10px;
						background: @detail;
						
						h5 {
							color: @light;
						}
					}
				}
				
				.text_box {
					margin: 10px 0px;
					background: @light_blue;
					padding: 15px 25px;
					border-radius: 12px;
				}
			}
			
			hr {
				color: @dark;
				opacity: 1 !important;
				margin: 0px;
			}
		}
		
		&.linkjes {
			
			.linkjes {
				padding: 0;
				width: 100%;
				list-style-type: none;
				
				li {
					display: flex;
					justify-content: space-between;
					border-bottom: 1.5px solid @detail;
					padding: 5px 0px;
					margin: 20px 0px;
					cursor: pointer;
					.transition;
					
					a {
						font-weight: 500;
						color: @detail;
						text-decoration: none !important;
					}
					
					svg {
						width: 20px;
						stroke-width: 1.5;
						color: @detail;
					}
					
					&:hover {
						border-bottom: 1.5px solid @dark;
						background: @light_blue;
						padding: 5px 5px;
						border-radius: 5px;
						
						
						a {
							color: @dark;
						}
						
						svg {
							color: @dark;
						}
					}
				}
			}
		}
		
		&.usp_balk {
			
			.usp_blak {
				position: relative;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 0%;
				animation: grow_x 1s forwards;
				color: @light;
				background: @primair;
				border-radius: 100px;
				display: flex;
				justify-content: space-evenly;
				padding: 15px 30px;
				
				@keyframes grow_x {
					to {
						width: 100%;
					}
				}
				
				.usp {
					display: flex;
					align-items: center;
					white-space: nowrap;
					gap: 5px;
					animation: fade_in 1s forwards 1s;
					opacity: 0;
					transform: translateY(10px);
					
					i {
						font-size: 32px;
					}
					
					p {
						font-size: 18px !important;
						font-family: 'Bold' !important;
						margin: 0;
					}
					
					@keyframes fade_in {
						to {
							white-space: unset;
							opacity: 1;
							transform: translateY(0px);
						}
					}
				}
			}
		}
	}
}

.woocommerce-pagination {
	display: none;
}

footer {
	padding: 50px 0px;
	background: @dark;
	color: @light;
	position: relative;
	z-index: 999;
	
	.logo_footer {
		display: block;
		width: 200px;
		
		img {
			width: 100%;
		}
	}
	
	ul {
		padding: 0;
		list-style-type: none;
		
		a {
			color: @light;
			text-decoration: underline !important;
		}
	}
	
	.footer_links {
		width: 100%;
		columns: 2;
	    -webkit-columns: 2;
	    -moz-columns: 2;
		
		li {
			border-top: .5px solid @light;
			border-bottom: .5px solid @light;
			padding: 15px 0px;
			
			&:first-child {
				border-bottom: .5px none @light;
			}
			
			&:last-child {
				border-top: .5px none @light;
			}
			
			a {
				color: @light;
				text-decoration: none !important;
			}
		}
	}
}

.bottom_footer {
	padding: 15px 0px;	
	background: @primair;
	color: @light;
	
	a {
		color: @light;
	}
}

&.mobile_only {
	display: none;
}

/*---------------------------------------------------------------------- Responsive ----------------------------------------------------------------------*/

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



}


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

	&.mobile_only {
		display: block;
	}

	.topbar {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		background: @dark;
		color: @light;
		padding: 10px 0px;
		
		ul {
			gap: 12px;
		}
	}

	#header {
		.boxshadow_style;
		top: 0px;
		
		&.scrolled {
			padding: 10px 0px;
		}
		
		.navbar-brand {
			width: 150px;
		}
		
		#menu-hoodfmenu {
			display: flex;
			padding: 50px 0px;
			
			.current-menu-item {
				
				a {
					
					&:after {
						content: none;
					}
				}
			}
			
			a {
				color: @dark;
				font-family: 'Medium' !important;
				padding: 0px;
				margin: 0;
				.transition;
				
				&:hover {
					color: @primair;
					
					&:after {
						content: none;
					}
				}
			}
		}
		
		ul {
			padding: 0;
			flex-direction: column;
			
			li {
				
				a {
					font-size: .8rem;
				}
			}
		}
	}
	
	.page_content {
		margin-top: 91px;
		
		.page_div {
			
			&.intro {
				
				.col-lg-4 {
					
					h1 {
						font-size: 2rem !important;
					}
					
					.letter_achtergrond {
						transform: translate(-50%, -50%) scale(.75);
					}
				}
				
				.global_image {
					margin-top: 10px;
					height: 35vh;
					width: 75%;
					margin-left: 25%;
				}
				
				.usp_blak {
					border-radius: 0px;
					flex-direction: column;
					align-items: center;
				}
			}
			
			&.subintro {
				margin-left: 25px;
				
				.intro_achtergrond {
					color: @light;
					height: 30vh;
					border-radius: 0 500px 500px 0;
					.background_style;
					padding: 0px 25px;
					
					&.omdraaien {
						border-radius: 500px 0px 0px 500px;
					}
				}
			}
			
			&.producten {
				
				.producten_box {
					
					.products {
						
						.product {
							width: 100%;
							
							a {
								
								img {
									border-radius: 10px !important;
								}
							}
						}
					}
				}
			}
			
			&.tekst_stappen {
				
				.col-lg-5 {
					
					.letter_achtergrond {
						transform: translate(-50%, -50%) scale(.75);
					}
				}
			}
			
			&.tekst_afbeelding {
				
				.col-lg-4 {
					padding: 50px 15px;
				}
			}
			
			&.slider_foto_tekst {
				
				.shape {
					top: 55%;
					height: 80%;
					width: 75%;
				}
				
				.slides {
					
					.slide {
						
						.slide_afbeelding {
							height: 250px;
						}	
					}
				}
			}
			
			&.usps {
				
				.usps_box {
					padding: 50px 25px;
					
					.usp_box {
						flex-direction: column;
					}
				}
			}
			
			&.usp_balk {
				
				.usp_blak {
					border-radius: 0px;
					flex-direction: column;
					align-items: center;
				}
			}
		}
	}
	
	footer {
		
		.footer_links {
			margin-top: 25px;
			
			li {
				padding: 10px 0px;
			}
		}
	}
	
	.bottom_footer {
		padding: 10px 0px;
	}
	
	.woocommerce {
		
		.woocommerce-cart-form__cart-item {
			
			.product-name {
				text-align: left !important;
				
				&:before {
					display: none;
				}
			}
		}
		
		.sfl-wrapper {
			
			td {
				text-align: left !important;
				
				&:before {
					display: none;
				}
				
				&.actie {
					margin-bottom: 10px;
				}
			}
		}
		
		.intro_achtergrond {
			margin-right: 25px;
			padding-left: 25px;
			
			h1 {
				font-size: 2.5rem !important;
			}
			
			&.omdraaien {
				border-radius: 500px 0px 0px 500px;
			}
		}
		
		.producten_box {
			padding: 25px 15px;
			
			.header_single_product { 
				flex-direction: column;
				
				.left {
					width: 100%;
					
					img {
						border-radius: 10px;
					}
				}
				
				.right {
					width: 100%;
				}
			}
			
			.products {
				
				.product {
					width: 100% !important;
					
					a {
						
						img {
							border-radius: 10px !important;
						}
					}
				}
			}
			
			.entry-summary {
				
				.cart {
					
					#product-addons-total {
						position: unset;
						top: unset;
						left: unset;
						transform: unset;
						z-index: unset;
						height: unset;
						min-width: unset;
						
						.product-addon-totals {
							position: sticky;
							top: 175px;
							background: #3b66e8;
							color: #ffffff;
							border-radius: 10px;
							padding: 50px 25px;
							border-top: none;
							border-bottom: none;
							overflow: hidden;
						}
					}
					
					.wc-pao-addon-container {
						
						.wc-pao-addon-description {
							width: 100%;
						}
						
						.form-row {
							margin-top: 5rem;
							width: 100%;
						}
						
						&.wc-pao-addon-id-1725270634,
						&.wc-pao-addon-id-1726227788 {
							
							&:after {
								transform: translateX(0px) scale(.75);
							}
							
							&:before {
								transform: translateX(0px) scale(.75);
							}
							
							.form-row {
								row-gap: 10px;
								
								div {
									width: 48%;
								}
							}
						}
					}
				}
				
				.wc-pao-addon-container {
				
					.form-row {
						width: 100%;
					}
				}
			}
		}
	}
}


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



}	 


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



}