@import url("https://use.typekit.net/ijr0kaw.css");

[data-price-exvat] {
	display: none;
}

:root {

	--primary: #1C99ED;
	--secondary: #213F95;
	--tertiary: #01132B;
	
	--white: #FFFFFF;
	--sale: #FD4736;
	--green: #037551;
	
	--gradient: linear-gradient(135deg, #259AF4 0%, #213F95 100%);

	--grey: #F0F0F0;
	--grey-dark: #B9B9B9;

	--h1: 44px;
	--h2: 32px;
	--h3: 26px;
	--h4: 20px;
	--h5: 18px;
	--h6: 16px;

	@media screen and (max-width: 990px) {
		--h1: 38px;
		--h2: 26px;
		--h3: 22px;
	}
	
	--base: 16px;
	
	--ff-body: 'proxima-soft';

}

.container {
	width: 1520px;
	max-width: 100%;
	padding: 0 40px;
	margin: 0 auto;
	@media screen and (max-width: 768px) {
		padding: 0 20px;
	}
}

body {
	font-family: var(--ff-body);
	font-size: 16px;
	letter-spacing: 0;
	background: #fff;
	line-height: 120%;
	display: block;
	position: relative;
	color: var(--tertiary);

	&.menu-expanded {

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

			.site-header {

				.site-navigation {
					opacity: 1;
					pointer-events: auto;
					.site-navigation--ul {
						transform: translate(0,0);
					}
				}

			}

		}

	}

}

input, textarea, select {
	border: 1px solid var(--tertiary);
	border-radius: 20px;
	padding: 10px 16px;
	font-size: 16px;
	outline: none;
	box-shadow: none;
	&:focus,
	&:hover,
	&:focus-visible {
		outline: none;
		box-shadow: none;
	}
}

a {
	color: var(--primary);
	text-decoration: none;
	transition: .3s color;
	&:hover {
		color: var(--tertiary);
	}
}

.rte a {
	text-decoration: underline;
}

.rte hr {
	margin: 24px 0;
}

ul, ol {
	padding: 0;
	margin: 0;
}

img {
	height: unset;
	display: inline-block;
}

p, li {
	font-family: var(--ff-body);
	font-size: 16px;
	letter-spacing: 0;
}

p {
	margin:0 0 16px 0;
	&:last-child {
		margin: 0;
	}
}

strong {
	font-weight: 600;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--ff-body);
	font-weight: 600;
	letter-spacing: -1px;
	margin: 0;
	line-height: 1.1;
}

h1, .h1 {
	font-size: var(--h1);
}

h2, .h2 {
	font-size: var(--h2);
}

h3, .h3 {
	font-size: var(--h3);
}

h4, .h4 {
	font-size: var(--h4);
}

h5, .h5 {
	font-size: var(--h5);
}

h6, .h6 {
	font-size: var(--h6);
}

.btn, button {
	background-color: var(--primary);
	color: var(--white);
	font-size: 16px;
	line-height: 1;
	padding: 16px;
	min-width: 200px;
	text-align: center;
	border-radius: 6px;
	display: inline-block;
	cursor: pointer;
	border: none;
	font-weight: 600;
	transition: .3s all;
	&:hover {
		background-color: var(--secondary);
		color: var(--white);
	}
	&.alt {
		background-color: var(--secondary);
		&:hover {
			background-color: var(--primary);
			color: var(--white);
		}
	}
	&.reset {
		min-width: unset;
		background-color: none;
		border: none;
		box-shadow: none;
		padding: 0;
	}
	&.fw {
		width: 100%;
		min-width: unset;
	}
	&.outline {
		background-color: transparent;
		border: 1px solid var(--primary);
		color: var(--tertiary);
		&:hover {
			background: var(--primary);
			color: var(--white);
		}
	}
}

.rte {
	h1, h2, h3, h4, h5, h6 {
		margin-bottom: 16px;
		color: var(--primary);
	}
	ul, ol {
		list-style-position: outside;
		li {
			margin-bottom: 6px;
		}
	}
}

.slick-arrow {

	width: 60px;
	min-width: unset;
	height: 60px;
	border: none;
	background: url('icon-chev-right.svg') no-repeat center center / 10px var(--primary);
	padding: 0;
	border-radius: 50%;
	font-size: 0;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0,-50%);

	@media screen and (max-width: 990px) {
		width: 42px;
		height: 42px;
		background-size: 8px;
	}

	@media screen and (max-width: 768px) {
		width: 32px;
		height: 32px;
		background-size: 6px;
	}

	&.slick-prev {
		transform: translate(0,-50%);
		left: 0;
		right: unset;
		background-image: url('icon-chev-left.svg');
	}

	&:hover {
		background-color: var(--tertiary);
	}

}

.announcement-bar {
	padding: 16px 0;
}

.shopify-store-header {
	position: sticky;
	z-index: 10;
	top: 0;
}

.site-header {

	background: #fff;
	position: relative;
	z-index: 10;

	@media screen and (max-width: 990px) {
		padding-bottom: 70px;
	}

	.flex {

		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18px 0;

		@media screen and (max-width: 990px) {
			padding: 11px 0;
		}

		.logo {
			flex: 1;
			img {
				@media screen and (max-width: 768px) {
					max-width: 180px !important;
				}
			}
		}

		.search-container {

			width: 560px;
			flex: 1;
			position: relative;

			@media screen and (max-width: 990px) {
				position: absolute;
                width: 100%;
                bottom: 0;
                left: 0;
                background: var(--grey);
                height: 70px;
                display: flex;
                justify-content: center;
                align-items: center;
			}

			#search-results-container {

				position: absolute;
				z-index: 2;
				top: calc(100% + 10px);
				left: 0;
				width: 100%;
				background: #fff;
				max-height: 600px;
				overflow: auto;
				border-radius: 20px;
				border: 2px solid var(--tertiary);

				@media screen and (max-width: 990px) {
				
					width: calc(100% - 80px);
					left: 40px;
					top: calc(100% - 13px);
					max-height: 400px;
					border-radius: 0 0 4px 4px;

				}

				@media screen and (max-width: 768px) {
					width: calc(100% - 40px);
					left: 20px;
				}

				.predictive-search {

					width: 100%;

					.predictive-search__empty {

						text-align: center;
						padding: 40px 20px;

					}

					.predictive-search__list {

						display: flex;
						flex-wrap: wrap;
						list-style: none;
						position: relative;

						.view-all-search-results {

							width: 100%;
							position: sticky;
							bottom: 0;

							.btn {
								border-radius: 0;
								width: 100%;
								min-width: unset;
							}

						}

						.predictive-search__item {

							width: 100%;

							.card-cart-item {

								border: none;
								border-bottom: 1px solid var(--grey);
								border-radius: 0;
								padding: 16px;

								@media screen and (max-width: 768px) {
									align-items: center;
								}
    							
    							.card-cart-item--media {

    								width: 90px;
    								min-width: 90px;
    								height: 90px;

    							}

    							.card-cart-item--meta {

    								.card-cart-item--head {

    									.card-cart-item--title {
    										font-size: 16px;
    									}

    								}

    								.meta-data {
    									width: 100%;
    								}

    							}

    						}

						}

					}

				}

			}


			form {

				width: 100%;
				position: relative;

				@media screen and (max-width: 990px) {
					padding: 0 40px;
					@media screen and (max-width: 768px) {
						padding: 0 20px;
					}
				}

				input {
					width: 100%;
					border: 2px solid var(--tertiary);
					padding: 15px 20px;
					font-size: 16px;
					@media screen and (max-width: 990px) {
						padding: 13px 16px;
						border-radius: 5px;
					}
				}

				button {
					position: absolute;
					top: 50%;
					right: 20px;
					transform: translate(0, -50%);
					background: none;
					@media screen and (max-width: 990px) {
						right: 60px;
						@media screen and (max-width: 768px) {
							right: 40px;
						}
					}
					svg {
						height: unset;
						width: 26px;
					}
				}

			}

		}

		.controls {
			
			flex: 1;
			display: flex;
			justify-content: flex-end;
			gap: 20px;

			a {

				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				color: var(--tertiary);
				position: relative;

				@media screen and (max-width: 990px) {
					&[data-control="business"],
					&[data-control="account"] {
						display: none;
					}
				}

				svg {
					@media screen and (max-width: 768px) {
						width: 20px;
						height: unset;
					}
				}

				span {
					@media screen and (max-width: 768px) {
						font-size: 12px;
						color: var(--primary);
					}
				}

				.cart_count {
					position: absolute;
					top: -4px;
					right: -4px;
					width: 20px;
					height: 20px;
					background: red;
					border-radius: 50%;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 12px;
					@media screen and (max-width: 768px) {
						width: 16px;
						height: 16px;
					}
				}

			}

			.device_menu {

				display: none;

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

					display: block;
					text-align: center;

					.menu-icon {
						width: 30px;
						height: 30px;
						display: block;
						margin: 0 auto;
						position: relative;
						cursor: pointer;
						@media screen and (max-width: 768px) {
							width: 20px;
							height: 18px;
						}
						&::before,
						&::after {
							content:'';
							position: absolute;
							left: 0;
							width: 100%;
							height: 3px;
							background: var(--primary);
							border-radius: 20px;
							@media screen and (max-width: 768px) {
								height: 2px;
							}
						}
						&::before {
							top: 4px;
							@media screen and (max-width: 768px) {
								top: 5px;
							}
						}
						&::after {
							top: 14px;
							@media screen and (max-width: 768px) {
								top: 12px;
							}
						}
					}

					.label {
						@media screen and (max-width: 768px) {
							font-size: 12px;
							color: var(--primary);
						}
					}

				}

			}


		}

	}

	.vat-toggle {

		margin-left: 16px;

		@media screen and (max-width: 768px) {
			display: none;
			margin: 0;
		}

		.track {
			width: 46px;
			height: 24px;
			border-radius: 100px;
			background: rgba(28,153,237,.2);
			position: relative;
			margin: 0 auto;
			cursor: pointer;
			@media screen and (max-width: 768px) {
				margin: 0 4px 0 0;
			}
			span {
				position: absolute;
				top: 1px;
				left: 1px;
				width: 22px;
				height: 22px;
				border-radius: 50%;
				background: var(--primary);
				transition: .4s all;
			}
		}

		.label {
			text-align: center;
			font-size: 12px;
			white-space: nowrap;
			margin: 4px 0 0 0;
		}

		&.active {
			.track {
				span {
					left: calc(100% - 23px);
				}
			}
		}

	}

	.site-navigation {

		background: var(--tertiary);
		width: 100%;

		@media screen and (max-width: 990px) {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(1,19,43,.6);
			opacity: 0;
			pointer-events: none;
		}

		.site-navigation--ul {

			display: flex;
			justify-content: center;
			gap: 60px;
			width: 1440px;
			max-width: 100%;
			margin: 0 auto;
			position: relative;

			@media screen and (max-width: 990px) {
				
				width: calc(100% - 90px);
				height: 100%;
				background: #fff;
				margin: 0;
				justify-content: flex-start;
				flex-direction: column;
				gap: 18px;
				padding: 34px;
				position: absolute;
				top: 0;
				left: 0;
				overflow: auto;
				transform: translate(-100%, 0);
				transition: .5s all;

				@media screen and (max-width: 768px) {
					width: calc(100% - 40px);
					padding: 24px;
				}

			}

			li {

				list-style: none;

				&.device-menu-close {

					display: none;

					@media screen and (max-width: 990px) {
					
						display: flex;
						align-items: center;
						gap: 14px;
						margin: 0 0 24px 0;

					}

				}

				&.device-controls {

					display: none;

					@media screen and (max-width: 990px) {
					
						display: flex;
						justify-content: space-between;
						margin: 0;

						.btn {
							width: calc(50% - 4px);
							text-align: center;
							display: flex;
							align-items: center;
							justify-content: center;
							gap: 6px;
							min-width: unset;
							svg {
								width: unset;
								height: 20px;
							}
						}

					}

				}

				&.device-vat-toggle {

					display: none;

					@media screen and (max-width: 768px) {
						display: block;
						.vat-toggle {
							display: flex;
							align-tiems: center;
						}

					}

				}

				.primary-link {

					color: #fff;
					padding: 16px 0;
					display: block;
					position: relative;
					transition: .3s all;

					@media screen and (max-width: 990px) {
						color: var(--tertiary);
						padding: 0;
						font-size: 18px;
					}

					&::after {
						width: 100%;
						height: 3px;
						border-radius: 100px;
						background: var(--primary);
						content: '';
						position: absolute;
						bottom:0;
						left: 0;
						opacity: 0;
						transition: .3s all;
					}

					&:hover {

						@media screen and (min-width: 990px) {

							color: var(--primary);

							&::after {

								opacity: 1;

							}

						}

					}

				}

				.mm {

					position: absolute;
					top: 100%;
					left: 0;
					width: 100%;
					background: #fff;
					padding: 40px 60px;
					border-radius: 0 0 20px 20px;
					opacity: 0;
					pointer-events: none;
					border: 1px solid var(--grey);
					transition: .3s all;

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

						top: 0;
						left: 0;
						height: 100dvh;
						max-height: 100dvh;
						overflow: auto;
						padding: 34px;
						border-radius: 0;
						opacity: 1;
						border: none;
						position: fixed;
						z-index: 2;
						pointer-events: auto;
						display: none;
						width: 100%;

						@media screen and (max-width: 768px) {
							padding: 24px;
						}

					}

					.device-mm-controls {

						display: none;

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

							display: flex;
							justify-content: space-between;
							align-items: center;
							margin: 0 0 54px 0;

							[data-mm-back],
							[data-ul-back] {
								display: flex;
								align-items: center;
								gap: 10px;
								cursor: pointer;
								svg {
									transform: rotate(180deg);
								}
							}
							
							[data-menu-close] {
								cursor: pointer;
							}

						}

					}

					.column-menus {

						display: flex;
						justify-content: space-between;

						@media screen and (max-width: 990px) {
							flex-direction: column;
						}

						.col {

							span {
								color: var(--primary);
								font-size: 24px;
								display: block;
								margin: 0 0 16px 0;

								@media screen and (max-width: 990px) {
									
									font-size: 18px;
									color: var(--tertiary);
									font-family: var(--ff-body);
									position: relative;
									display: block;
									cursor: pointer;

									&::before {
										content: '';
										position: absolute;
										top: 50%;
										right: 0;
										transform: translate(0, -50%);
										width: 10px;
										height: 12px;
										background: url('icon-chev-blue.svg') no-repeat center center / contain;
									}	

								}
							}

							ul {

								@media screen and (max-width: 990px) {
									top: 0;
									height: 100%;
									padding: 34px;
									position: fixed;
									left: 0;
									z-index: 3;
									width: 100%;
									background: var(--white);
									display: none;
									width: 100%;

									@media screen and (max-width: 768px) {
										padding: 24px;
									}

								}

								li {

									a {
										color: var(--tertiary);
										display: inline-block;
										margin: 0 0 10px 0;

										@media screen and (max-width: 990px) {
											font-size: 16px;
										}

										&:hover {
											color: var(--primary);
										}
									}

									&.featured {
										margin-top: 16px;
										a {
											color: var(--primary);
											text-decoration: underline;

											@media screen and (max-width: 990px) {
												display: inline-block;
												margin: 0 0 18px 0;
											}

											&:hover {
												color: var(--tertiary);
											}
										}
									}

									&.device-mm-controls {

										@media screen and (max-width: 990px) {
											span {
												margin: 0;
												font-size: 16px;
												&::before {
													display: none;
												}
											}
										}

									}

									&.device-col-title {

										display: none;

										@media screen and (max-width: 990px) {
											display: block;
											margin: 0 0 24px 0;
											color: var(--primary);
											font-size: 20px;
										}

									}

								}

							}

							@media screen and (max-width: 990px) {
								&.ul-expand {
									ul {
										display: block;
									}
								}
							}

						}

					}

					.mm-ad {

						border: 1px solid var(--grey);
						border-radius: 20px;
						display: flex;
						justify-content: space-between;
						overflow: hidden;
						align-items: center;
						gap: 30px;
						margin: 30px 0 20px 0;

						@media screen and (max-width: 990px) {
							flex-direction: column;
							padding: 16px;
						}

						.mm-ad--image {
							width: 20%;
							@media screen and (max-width: 990px) {
								width: 100%;
								border-radius: 20px;
								overflow: hidden;
							}
							img {
								width: 100%;
								display: block;
							}
						}

						.mm-ad--content {
							width: 50%;
							@media screen and (max-width: 990px) {
								width: 100%;
							}
							span {
								color: var(--primary);
							}
						}

						.mm-ad--btn {
							width: 30%;
							@media screen and (max-width: 990px) {
								width: 100%;
							}
							display: flex;
							justify-content: center;
						}

					}

					.fw_btn {
						width: 100%;
						@media screen and (max-width: 990px) {

							width: calc(100% + 68px);
							margin: 0 -34px;

							.btn {
								border-radius: 0;
							}

						}
					}

				}

				&[data-mm] {

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

						.primary-link {

							position: relative;

							&::before {
								content: '';
								position: absolute;
								top: 50%;
								right: 0;
								transform: translate(0, -50%);
								width: 10px;
								height: 12px;
								background: url('icon-chev-blue.svg') no-repeat center center / contain;
							}	

						}

						&.mm-expand {

							.mm {
								display: block;
							}

						}

					}

					@media screen and (min-width: 990px) {

						&:hover {

							.mm {

								opacity: 1;
								pointer-events: auto;

							}

						}

					}

				}

			}

		}

	}

}

.header-mm-bg {

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	background: rgba(0,0,0,0.6);
	z-index: 9;
	display: block !important;
	transition: .3s all;

	@media screen and (max-width: 990px) {
		display: none !important;
	}

	&.active {
		opacity: 1;
	}

}

body[data-template="index"] {
	.header-usps {
		@media screen and (max-width: 990px) {
			border: none;
		}
	}
}

.header-usps {

	width: 100%;
	padding: 18px 0;
	border-bottom: 1px solid var(--grey);

	@media screen and (max-width: 990px) {
		padding: 10px 0;
		max-height: 41px;
		overflow: hidden;
	}

	.blocks {

		width: 100%;
		display: flex;
		justify-content: space-evenly;

		.slick-track {
			@media screen and (max-width: 990px) {
				display: flex;
				align-items: center;
			}
		}

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

			.slick-arrow {
				width: 20px;
				height: 20px;
				background-color: transparent;
				background-image: url('icon-chev-right-blue.svg');
				background-size: 6px;
				&.slick-prev {
					background-image: url('icon-chev-left-blue.svg');
				}
			}

		}

		.block {

			max-width: 220px;
			color: var(--tertiary);

			@media screen and (max-width: 990px) {
				max-width: unset;
				font-size: 14px;
				padding: 0 16px;
			}

			&:not(.tp) {

				display: flex;
				align-items: center;
				gap: 16px;
				font-weight: 600;

				@media screen and (max-width: 990px) {
					justify-content: center;
					gap: 10px;
				}

				img {
					@media screen and (max-width: 990px) {
						max-width: 16px;
						height: unset;
					}
				}

			}

			&.tp {
				text-align: center;
				.stars {
					display: flex;
					justify-content: center;
				}
			}

		}

	}

}

.card-product {

	.product-mh {

		border-bottom: 1px solid var(--grey);
		width: 100%;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.overlay-toggle {

			position: absolute;
			z-index: 4;
			top: 0;
			right: 0;

			.toggle-on,
			.toggle-off {
				font-size: 12px;
				display: flex;
				align-items: center;
				gap: 4px;
				border-radius: 6px;
				line-height: 1;
				cursor: pointer;
			}

			.toggle-on {
				color: var(--white);
				padding: 0 2px 0 10px;
				background: var(--primary);
			}

			.toggle-off {
				color: var(--tertiary);
				background: var(--grey);
				padding: 4px 4px 4px 8px;
				display: none;
			}

		}

		.product-card--overlay {

			position: absolute;
			z-index: 3;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #fff;
			padding-top: 40px;
			opacity: 0;
			pointer-events: none;
			transition: .3s all;

			.product--title {

				display: -webkit-box;
			  	-webkit-line-clamp: 2;
			  	-webkit-box-orient: vertical;
			  	overflow: hidden;

			}

			.bullets {

				display: flex;
				flex-direction: column;
				gap: 6px;

				.bullet {
					display: flex;
					align-items: flex-start;
					gap: 6px;
					svg {
						min-width: 6px;
						height: unset;
						margin-top: 4px;
					}
				}

			}

		}

	}
	
	&.overlay-expanded {
		.overlay-toggle {
			.toggle-on {
				display: none;
			}
			.toggle-off {
				display: flex;
			}
		}
		.product-card--overlay {
			opacity: 1;
		}
	}

	.card-product--media {

		width: 100%;
		padding-top: 100%;
		position: relative;
		display: block;

		img {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			object-fit: contain;
			transition: .3s all;
			&.alt_image {
				z-index: 2;
				opacity: 0;
			}
		}

	}

	.tags {

		display: flex;
		flex-wrap: wrap;
		gap: 5px;
		margin: 0 0 16px 0;

		.tag {
			color: var(--white);
			font-size: 12px;
			padding: 5px;
			border-radius: 5px;
			line-height: 1;
		}

	}

	.product--title {
		font-family: var(--ff-body);
		margin: 0 0 16px 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
		a {
			color: var(--tertiary);
		}
	}

	.product-card--meta {

		margin: 16px 0 0 0;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.meta-data {

			display: flex;
			flex-wrap: wrap;
			gap: 5px;
			margin: 0 0 16px 0;

			span {
				background: var(--grey);
				font-size: 10px;
				padding: 5px;
				border-radius: 5px;
				line-height: 1;
				font-weight: 600;
			}

		}

		.bullets {

			&.list-view-only {

				display: none;
				flex-direction: column;
				gap: 6px;

				.bullet {
					display: flex;
					align-items: flex-start;
					gap: 6px;
					svg {
						min-width: 6px;
						height: unset;
						margin-top: 4px;
					}
				}

			}

		}

		.product--energy-rating {
			display: none;
		}

	}

	.product-card--controls {

		margin-top: 16px;

		.pricing {

			.from {
				font-size: 12px;
			}

			.price {

				span {
					color: var(--primary);
					font-size: var(--h3);
					line-height: 1;
					letter-spacing: 0;
					font-weight: 600;
					small {
						color: var(--tertiary);
						font-size: 10px;
						font-weight: 400;
					}
				}

			}

			.cap {

				span {
					display: block;
					color: var(--sale);
					font-size: 12px;
					letter-spacing: 0;
					font-weight: 600;
					&[data-price-exvat] {
						display: none;
					}
				}

			}

		}

		.btn-controls {
			display: flex;
			flex-direction: column;
			gap: 12px;
			margin-top: 16px;
			.btn {
				min-width: unset;
			}
			.comparrison-flex {

				position: relative;
				text-align: center;

				input {
					position: absolute;
					top: 0;
					right: 0;
					opacity: 0;
					pointer-event: none;
					&:checked + label {
						&::before {
							border-color: var(--primary);
							background: url('icon-checkbox.svg') no-repeat center center / 10px;
						}
					}
				}

				label {
					font-size: 15px;
					padding-left: 30px;
					position: relative;
					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: 0;
						transform: translate(0,-50%);
						width: 18px;
						height: 18px;
						border: 2px solid var(--grey);
						border-radius: 4px;
					}
				}

			}
		}

	}

}

.section-site-footer {

	padding: 50px 0 0 0;

	@media screen and (max-width: 768px) {
		padding-top: 34px;
	}

	.blocks {

		display: flex;
		justify-content: space-between;
		padding-bottom: 160px;

		@media screen and (max-width: 990px) {
			flex-wrap: wrap;
			padding-bottom: 30px;
		}

		.block-a {

			width: 40%;

			@media screen and (max-width: 990px) {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			@media screen and (max-width: 768px) {
				flex-wrap: wrap;
			}

			img {
				max-width: 240px;
				@media screen and (max-width: 768px) {
					max-width: 150px;
				}
			}

			.list-social {

				display: flex;
				gap: 11px;
				margin: 20px 0 0 0;

				@media screen and (max-width: 990px) {
					margin: 0;
					@media screen and (max-width: 768px) {
						gap: 4px;
						width: 100%;
						margin-top: 16px;
					}
				}

				li {

					a {

						display: block;
						width: 40px;
						height: 40px;
						background: var(--primary);
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						transition: .3s all;

						@media screen and (max-width: 990px) {
							width: 30px;
							height: 30px;
						}

						svg {
							color: var(--white);
						}

						&:hover {
							background: var(--tertiary);
						}

					}

				}

			}

		}

		.block-b {

			display: flex;
			justify-content: space-between;
			width: 60%;

			@media screen and (max-width: 990px) {
				width: 100%;
				flex-wrap: wrap;
				padding-top: 30px;
			}

			.menu_col {

				@media screen and (max-width: 990px) {
					width: 33.3%;
				}

				@media screen and (max-width: 768px) {
					width: 50%;
					margin: 0 0 20px 0;
				}

				.menu_label {

					display: block;
					margin: 0 0 12px 0;

				}

				nav {

					ul {

						li {

							list-style: none;

							a {
								display: inline-block;
								margin: 0 0 8px 0;
							}

						}

					}

				}

			}

		}

	}

	.legal-content {

		font-size: 13px;
		margin: 0 0 24px 0;

		@media screen and (max-width: 990px) {
			text-align: center;
		}

	}

	.legal-nav {

		display: flex;
		justify-content: space-between;
		border-top: 1px solid var(--grey);
		padding: 14px 0;

		@media screen and (max-width: 990px) {
			flex-wrap: wrap;
			justify-content: center;
		}

		nav {

			@media screen and (max-width: 990px) {
				width: 100%;
				margin-bottom: 20px;
			}

			ul {

				display: flex;
				flex-wrap: wrap;
				gap: 40px;

				@media screen and (max-width: 990px) {
					justify-content: center;
					width: 100%;
					gap: 0;
				}

				li {

					list-style: none;
					font-size: 14px;

					a {
						color: var(--tertiary);
						@media screen and (max-width: 990px) {
							margin: 0 20px;
							display: inline-block;
						}
						@media screen and (max-width: 768px) {
							margin: 0 20px 10px;
						}
					}

				}

			}

		}

		.payment-methods {

			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 13px;

			@media screen and (max-width: 990px) {
				width: 100%;
				justify-content: center;
			}

			svg {
				width: 40px;
				height: unset;
			}

		}

	}

}

.breadcrumbs {

	ul {

		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;

		li {

			list-style: none;
			position: relative;
			padding-right: 10px;
			@media screen and (max-width: 990px) {
				padding-right: 6px;
			}

			&::after {
				content: '/';
				margin-left: 10px;
				@media screen and (max-width: 990px) {
					margin-left: 6px;
					font-size: 11px;
				}
			}

			&:last-child::after {
				display: none;
			}

			a, span {

				color: var(--tertiary);
				font-weight: 600;

				@media screen and (max-width: 990px) {
					font-size: 11px;
				}

			}

		}

	}

}

.card-cart-item {

	width: 100%;
	display: flex;
	border: 1px solid var(--grey);
	border-radius: 20px;
	padding: 24px 30px;
	gap: 20px;

	@media screen and (max-width: 768px) {
		padding: 16px;
		flex-wrap: wrap;
		position: relative;
		align-items: flex-start;
		gap: 16px;
	}

	.card-cart-item--media {

		width: 170px;
		min-width: 170px;
		height: 170px;

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

			width: 150px;
			min-width: 150px;
			height: 150px;

		}

		@media screen and (max-width: 768px) {
			width: 100px;
			min-width: 100px;
			height: 100px;
		}

		img {

			width: 100%;
			height: 100%;
			object-fit: contain;
			display: block;

		}

	}

	.meta-data {

		display: none;
		flex-wrap: wrap;
		gap: 5px;
		margin: 0 0 16px 0;
		width: calc(100% - 170px);
		flex-direction: column;
        align-items: flex-start;

		@media screen and (max-width: 768px) {
			display: flex;
		}

		span {
			background: var(--grey);
			font-size: 10px;
			padding: 5px;
			border-radius: 5px;
			line-height: 1;
			font-weight: 600;
		}

	}

	.card-cart-item--meta {

		flex: 1;

		@media screen and (max-width: 768px) {
			flex: unset;
			width: 100%;
		}

		.card-cart-item--head {

			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			gap: 30px;
			margin: 0 0 16px 0;

			.card-cart-item--title {

				margin: 0;
				font-size: 22px;
				font-weight: 600;

				@media screen and (max-width: 990px) {
					font-size: 18px;
				}

				@media screen and (max-width: 768px) {
					font-size: 15px;
				}

				a {
					color: var(--tertiary);
				}

			}

			.cart-remove-item {

				width: 34px;
				min-width: 34px;
				height: 34px;
				border: 1px solid var(--grey);
				border-radius: 50%;
				position: static;
				transition: .3s all;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				background: transparent;
				padding: 0;

				@media screen and (max-width: 768px) {
					position: absolute;
					top: 16px;
					right: 16px;
				}

				svg {
					width: 12px;
					height: unset;
				}

				&:hover {
					border-color: var(--primary);
				}

			}

		}

		.meta-data {

			display: flex;

			@media screen and (max-width: 768px) {
				display: none;
			}

		}

		.pricing {

			.price {
				span {
					color: var(--primary);
					font-size: 18px;
					line-height: 1;
					font-weight: 600;
					small {
						color: #000;
						font-size: 10px;
						font-weight: 400;
					}
				}
			}

		}

		.qty-group {

			display: flex;
			justify-content: space-between;
			align-items: center;

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


			}

			.qty-selection {

				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: 15px;
				margin: 16px 0 0 0;

				@media screen and (max-width: 990px) {
					width: 100%;
				}

				@media screen and (max-width: 768px) {
					width: 110px;
					min-width: 110px;
				}

				span.label {
					font-size: 16px;
					@media screen and (max-width: 768px) {
						display: none;
					}
				}

				.controls {

					display: flex;
					align-items: center;
					gap: 3px;

					span {
						width: 30px;
						height: 30px;
						position: relative;
						cursor: pointer;
						&::before,
						&::after {
							content:'';
							position: absolute;
							top: 50%;
							left: 50%;
							width: 10px;
							height: 1px;
							background: var(--primary);
							transform: translate(-50%, -50%);
						}
						&[data-qty-minus]{
							&::after {
								display: none;
							}
						}
						&[data-qty-plus]{
							&::after {
								transform: translate(-50%, -50%) rotate(90deg);
							}
						}
					}

					input {

						width: 36px;
						height: 36px;
						border: 2px solid var(--grey);
						border-radius: 4px;
						text-align: center;
						color: var(--tertiary);
						-moz-appearance:textfield;
						padding: 0;
						font-size: 16px;
						

						@media screen and (max-width: 768px) {
							width: 32px;
							height: 32px;
						}

						&::-webkit-outer-spin-button,
						&::-webkit-inner-spin-button {
						    -webkit-appearance: none;
						    margin: 0;
						}

					}

				}

			}

			.group-price {

				color: var(--primary);
				text-align: right;

				@media screen and (max-width: 990px) {
					width: 100%;
					margin-top: 16px;
					text-align: right;
				}

				@media screen and (max-width: 768px) {
					text-align: left;
					font-size: 14px;
				}

				small {
					font-size: 10px;
					color: #000;
				}

			}

		}

	}

}

.cart-drawer {

	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 9999999;
	display: none;

	&.expanded {

		.drawer {
			transform: translate(0, 0);
		}

	}

	.drawer {

		position: absolute;
		top:0;
		right: 0;
		height: 100%;
		min-height: 100dvh;
		background: #fff;
		width: 65%;
		padding: 50px 40px;
		transform: translate(100%, 0);
		transition: .4s all;
		overflow: auto;

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

			width: 100%;
			padding: 40px 30px;

		}

		@media screen and (max-width: 768px) {
			padding: 30px 16px;
		}

		.head {

			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 0 20px 0;

			p {
				color: var(--primary);
				margin: 0;
			}

			.close {
				width: 46px;
				height: 46px;
				border: 1px solid var(--grey);
				border-radius: 50%;
				background: url('icon-close-primary.svg') no-repeat center center / 14px;
				position: static;
				transition: .3s all;
				display: block;
				cursor: pointer;

				@media screen and (max-width: 768px) {
					width: 36px;
					height: 36px;
				}

				&:hover {
					border-color: var(--primary);
				}
			}

		}

		.cart-container {

			.no-items {

				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				margin: 80px 0;

				.btn {
					margin-top: 20px;
				}

			}
			
			.cart-output {

				display: flex;
				flex-direction: column;
				gap: 16px;

				.item {

				}

			}
		}

		.cart-footer {

			text-align: right;
			padding: 20px 0 0 0;
			margin-top: 20px;
			position: sticky;
			bottom: -40px;
			background: #fff;
			border-top: 1px solid var(--grey);

			@media screen and (max-width: 768px) {
				bottom: -30px;
				padding-bottom: 20px;
			}

			.group {

				margin: 0 0 10px 0;
				display: flex;
				align-items: flex-end;
				gap: 6px;
				justify-content: flex-end;

				@media screen and (max-width: 990px) {
					justify-content: space-between;
					align-items: center;
				}

				.price {

					width: 300px;
					max-width: 100%;

					div {
						display: flex;
						justify-content: space-between;
						margin: 0 0 4px 0;
					}

					span:nth-child(2) {
						color: var(--primary);
					}
				}

			}

			.btn-flex {

				display: flex;
				gap: 12px;
				justify-content: flex-end;

				@media screen and (max-width: 990px) {
					justify-content: space-between;
					gap: 10px;
				}

				@media screen and (max-width: 768px) {
					flex-wrap: wrap;
				}

				.btn {
					display: flex;
					align-items: center;
					gap: 10px;
					justify-content: center;
					line-height: 1;
					width: 300px;
					@media screen and (max-width: 990px) {
						width: 100%;
					}
					@media screen and (max-width: 768px) {
						min-width: unset;
						width: 100%;
					}
				}

			}

		}

		#cart-related {

			margin: 20px 0 0 0;

			.cart-related-title {

				margin:0 0 20px 0;

			}

			.related-products {

				display: flex;
				flex-direction: column;
				gap: 15px;

				.rec-item {

					width: 100%;
					display: flex;
					justify-content: space-between;
					border: 1px solid var(--grey);
					border-radius: 20px;
					padding: 20px;
					gap: 20px;
					align-items: flex-start;

					@media screen and (max-width: 768px) {
						gap: 16px;
						flex-wrap: wrap;
						position: relative;
					}

					.media-container {

						width: 120px;
						min-width: 120px;
						height: 120px;

						@media screen and (max-width: 768px) {
							width: 70px;
							min-width: 70px;
							height: 70px;
						}

						img {

							width: 100%;
							height: 100%;
							object-fit: contain;
							display: block;

						}

					}

					.p-meta {

						flex: 1;

						@media screen and (max-width: 768px) {
							flex: unset;
							width: 100%;
						}

						.p-meta--title {
							margin: 0 0 10px 0;
							font-weight: 600;
							a {
								color: var(--tertiary);
							}
						}

						.product-status {
							margin: 0 0 12px 0;
							span {
								font-size: 12px;
								color: var(--green);
								line-height: 1;
								&[data-availability="out"]{
									color: var(--sale);
								}
							}
						}

						.price {
							span {
								color: var(--primary);
								font-size: 18px;
								line-height: 1;
								font-weight: 600;
								small {
									color: #000;
									font-size: 10px;
									font-weight: 400;
								}
							}
						}

					}

					.p-controls {

						display: flex;
						gap: 12px;
						cursor: pointer;
						align-items: center;

						@media screen and (max-width: 768px) {
							position: absolute;
							top: 16px;
							right: 16px;
						}

						span {
							font-size: 14px;
							line-height: 1;
						}

						.checkbox {
							width: 34px;
							min-width: 34px;
							height: 34px;
							border: 2px solid var(--grey);
							border-radius: 6px;
							display: block;
							transition: .3s all;
						}

						&:hover {
							.checkbox {
								border-color: Var(--primary);
							}
						}

					}

				}

			}

		}

	}

	&.cart-page {

		display: block;
		position: static;
		background: transparent;

		.drawer {
			transform: translate(0, 0);
			position: static;
			width: 100%;
			max-width: 1520px;
			margin: 0 auto;
			height: unset;
			min-height: unset;

			.head {
				.close {
					display: none;
				}
			}

			.cart-container {

				display: flex;
				justify-content: space-between;
				gap: 35px;
				align-items: flex-start;

				@media screen and (max-width: 990px) {
					flex-wrap: wrap;
				}

				.no-items {

					width: 100%;
					margin: 20px 0;

				}

				.cart-output {

					width: 100%;

				}

				.basket-total {

					width: 360px;
					min-width: 360px;
					border: 1px solid var(--grey);
					padding: 23px 32px;
					border-radius: 20px;

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

						width: 100%;

						@media screen and (max-width: 768px) {
							padding: 16px;
						}

					}

					.basket-total--title {
						margin: 0 0 20px 0;
					}

					.basket-total--groups {

						.basket-total--group {

							display: flex;
							justify-content: space-between;
							gap: 12px;
							margin:0 0 12px 0;

							span {
								font-size: 14px;
							}

							span:nth-child(2) {
								color: var(--primary);
							}

						}

					}

					.btn {

						width: 100%;
						margin: 22px 0 20px 0;

					}

					.payment-methods {

						display: flex;
						flex-wrap: wrap;
						gap: 8px;

						@media screen and (max-width: 990px) {
							justify-content: center;
						}

					}

				}

			}
		}

		#cart-related {

			margin-top: 60px;

			.related-products {

				flex-direction: row;
				flex-wrap: wrap;

				.rec-item {

					width: calc(33.3% - 10px);
					gap: 16px;
					flex-wrap: wrap;
					position: relative;

					@media screen and (max-width: 990px) {
						width: 100%;
					}

					.media-container {

						@media screen and (max-width: 768px) {
							width: 70px;
							min-width: 70px;
							height: 70px;
						}

					}

					.p-meta {

						flex: unset;
						width: 100%;

					}

					.p-controls {

						position: absolute;
						top: 16px;
						right: 16px;

					}

				}

			}

		}

	}

}


#comparrison-grid {

	position: fixed;
	z-index: 9999;
	bottom: -300px;
	left: 0;
	width: 100%;
	background: #fff;
	padding: 30px 0 0 0;
	box-shadow: 0 0px 10px rgba(0,0,0,0.3);
	transition: .3s all;
	max-height: 100dvh;
	overflow: auto;

	@media screen and (max-width: 990px) {
		padding: 16px 0;
	}

	&.active {
		bottom: 0;
	}

	.expanded-head {

		display: none;
		justify-content: space-between;
		align-items: center;
		max-width: 1520px;
		margin: 0 auto 50px;
		padding: 0 40px;

		@media screen and (max-width: 768px) {
			padding: 0 20px;
		}

		.head--start {

			display: flex;
			align-items: center;
			gap: 10px;

		}

		.icon-close {

			width: 34px;
			height: 34px;
			display: block;
			background: url('icon-close-primary.svg') no-repeat center center / 14px #fff;
			border: 1px solid var(--primary);
			border-radius: 50%;

		}

	}

	.comparrison-flex {

		display: flex;
		align-items: flex-start;
		gap: 80px;
		padding: 0 40px;

		@media screen and (max-width: 990px) {
			flex-wrap: wrap;
			gap: 0;
		}

		@media screen and (max-width: 768px) {
			padding: 0 20px;
		}


		.comparrison-grid {

			display: flex;
			flex: 1;

			@media screen and (max-width: 990px) {
				width: 100%;
				max-width: 450px;
				margin: 0 auto;
			}

			.comparrison-item {

				width: 25%;
				position: relative;

				.comparrison-remove {

					position: absolute;
					display: block;
					top: -15px;
					left: 0;
					width: 30px;
					height: 30px;
					min-width: unset;
					border: 1px solid var(--grey);
					border-radius: 50%;
					background: url('icon-close-primary.svg') no-repeat center center / 14px #fff;
					z-index: 3;
					padding: 0;

					@media screen and (max-width: 990px) {
						display: none;
					}

				}

				.comparrison-card-min {

					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 15px;

					@media screen and (max-width: 990px) {
						margin: 0 0 16px 0;
					}

					@media screen and (max-width: 768px) {
						padding: 0 5px;
					}

					.image-container {

						width: 40%;
						min-width: 40%;
						border: 1px solid var(--grey);
						border-radius: 12px;
						padding-top: 40%;
						position: relative;

						@media screen and (max-width: 990px) {
							width: 100%;
							padding-top: 100%;
						}

						img {
							width: 100%;
							height: 100%;
							object-fit: contain;
							padding: 14px;
							position: absolute;
							top: 0;
							left: 0;
							@media screen and (max-width: 990px) {
								padding: 6px;
							}
						}

					}

					.comparrison-title {
						width: calc(60% - 10px);
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
						text-overflow: ellipsis;
						color: var(--tertiary);
						@media screen and (max-width: 990px) {
							display: none;
						}
					}

				}

				.comparrison-card-max {

					display: none;
					margin-bottom: 32px;

					.card-product {

						opacity: 0;
						transition: .4s all;

						.card-product--media {
							a {
								padding: 0 15px;
								display: block;
							}
						}

					    .product-card--meta {
					    	padding: 0 15px;
					    	justify-content: flex-start;
					    }

					    .product-card--controls {
					    	padding: 0 15px;
					    }

					    .product-specs-table {

					    	margin: 16px 0 0 0;
					    	border-bottom: 1px solid var(--grey);

					    	.group--mf {

					    		border-bottom: 1px solid var(--grey);
					    		margin: 0 0 16px 0;
					    		padding: 0 15px 16px;

					    		&:last-child {
					    			border: none;
					    		}

				    			.group--mf-key {
				    				color: var(--primary);
				    				margin: 0 0 8px 0;
				    			}

				    			.group--mf-value {

				    			}

					    	}

					    }

					    .no-specs {
					    	padding: 0 15px;
					    	margin: 16px 0 0 0;
					    	border-bottom: 1px solid var(--grey);
					    }

					    .product-card--controls--footer {

					    	padding: 20px 15px;
					    	background: #fff;
					    	position: sticky;
					    	bottom: 0;
					    	border-top: 1px solid var(--grey);
					    	margin: 0;

					    }

					    

					}

				}

			}


		}

		.comparrison-controls {

			width: 240px;
			min-width: 240px;
			text-align: center;
			margin-top: 24px;

			@media screen and (max-width: 990px) {
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				gap: 40px;
			}

			.btn {
				margin-bottom: 10px;
				@media screen and (max-width: 990px) {
					margin: 0;
				}
				&.disabled {
					pointer-events: none;
					opacity: .2;
				}
			}

			[data-clear-comparrison] {

				@media screen and (max-width: 990px) {
					white-space: nowrap;
				}

			}

		}

	}

	&.expanded {

		height: 100%;

		.expanded-head {

			display: flex;

		}

		.comparrison-flex {

			max-width: 1520px;
			margin: 0 auto;

			.comparrison-grid {

				@media screen and (max-width: 990px) {
					max-width: calc(100% + 80px);
					width: calc(100% + 80px);
					overflow: auto;
					margin-right: -40px;
					margin-left: -40px;
					padding-left: 40px;
				}

				@media screen and (max-width: 768px) {
					max-width: calc(100% + 40px);
					width: calc(100% + 40px);
					margin-right: -20px;
					margin-left: -20px;
					padding-left: 20px;
				}

				.comparrison-item {

					@media screen and (max-width: 990px) {
						width: 280px;
						min-width: 280px;
					}

					@media screen and (max-width: 768px) {
						width: 200px;
						min-width: 200px;
					}

					.comparrison-remove {

						width: 20px;
						height: 20px;
						background-size: 10px;
						border-color: var(--primary);

						@media screen and (max-width: 990px) {
							display: block;
							top: 0;
						}

					}

					.comparrison-card-min {

						display: none;
						/*background: #fff;
						position: sticky;
						z-index: 2;
						top: -30px;
						left: 0;
						z-index: 2;
						border-bottom: 1px solid #eee;
						padding-bottom: 16px;*/

					}

					.comparrison-card-max {

						display: block;

						.card-product {
							opacity: 1;
							position: relative;
							@media screen and (min-width: 990px) {
								.card-product--sticky {
									position: sticky;
									top: -30px;
									background: #fff;
								}
							}
						}

					}

				}

			}

			.comparrison-controls {

				display: none;

			}

		}

	}

}

.scroll_top {

	position: fixed;
	bottom: 40px;
	right: 40px;
	width: 40px;
	height: 40px;
	background: var(--primary);
	border-radius: 50%;
	cursor: pointer;
	z-index: 99;

	@media screen and (max-width: 768px) {
		bottom: 20px;
		right: 20px;
	}

	svg {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(-90deg);
	}

}