.collection-grid {

	.collection-grid--flex {

		display: flex;
		justify-content: space-between;
		padding: 20px 0;
		flex-wrap: wrap;

		.breadcrumbs {
			width: 100%;
			margin: 0 0 20px 0;
		}

		.collection-grid--filters {

			width: 25%;

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

			.filter-form-container {

				@media screen and (max-width: 990px) {
					position: fixed;
					top:0;
					left: 0;
					width: 100%;
					height: 100dvh;
					min-height: 100vh;
					background: rgba(0,0,0,0.6);
					z-index: 9999;
					opacity: 0;
					pointer-events: none;
					transition: .3s all;

				}

				.filter-form {

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

						width: calc(100% - 90px);
						position: absolute;
						top:0;
						left: 0;
						height: 100dvh;
						min-height: 100vh;
						background: #fff;
						overflow: auto;
						padding: 40px 40px 0 40px;
						transform: translate(-100%, 0);
						transition: .3s all;

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


					}

					.device-close {

						display: none;

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

					}

					.apply-filters-device {

						display: none;

						@media screen and (max-width: 990px) {
							display: block;
							background: var(--tertiary);
							padding: 20px;
							margin: 0 -40px;
							@media screen and (max-width: 768px) {
								margin: 0 -20px;
							}
						}

					}

					.head {

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

						span {}

						.clearing {

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

							a {
								font-size: 14px;
							}

							.active-filter-count {

								width: 28px;
								min-width: 28px;
								height: 28px;
								background: url('icon-semi-circle.svg') no-repeat center center / contain;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 12px;
								line-height: 1;

							}

						}

					}

					.active-filters {

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

						.active-filter--item {

							font-size: 12px;
							color: var(--tertiary);
							background: var(--grey);
							padding: 5px 6px;
							display: flex;
							align-items: center;
							gap: 8px;
							line-height: 1;

							svg {
								min-width: 10px;
								width: 10px;
								height: 10px;
								object-fit: contain;
							}

						}

					}

					.filter--group {

						border-bottom: 1px solid var(--grey);
						padding-bottom: 20px;
						margin-bottom: 20px;

						.filter-group-summary {

							position: relative;

							.filter--group-title {

								font-size: 20px;

							}

							svg {
								position: absolute;
								top: 50%;
								right: 6px;
								transform: translate(0,-50%) rotate(90deg);
							}

						}

						&[open] {
							.filter-group-summary {
								.filter--group-title {
									svg {
										transform: translate(0,-50%) rotate(-90deg);
									}
								}
							}
						}

						.filter-group-display {

							.filter-group-display__list {

								margin-top: 16px;

								li {

									list-style: none;
									position: relative;
									display: block;
									margin: 0 0 6px 0;

									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 {
										padding-left: 24px;
										position: relative;
										cursor: pointer;
										&::before {
											content: '';
											position: absolute;
											top: 50%;
											left: 0;
											transform: translate(0,-50%);
											width: 18px;
											height: 18px;
											border: 2px solid var(--grey);
											border-radius: 4px;
										}
										.filter_count {
											font-size: 12px;
											color: var(--primary);
										}
										a {
											color: var(--tertiary);
											.filter_count {
												margin-left: 3px;
											}
										}
									}

									&.expanded {

										display: block !important;

									}

									&.active {
										label {
											&::before {
												border-color: var(--primary);
												background: url('icon-checkbox.svg') no-repeat center center / 10px;
											}
										}
									}

								}

							}

							.filter-group-display__list-more {

								display: inline-block;
								margin: 20px 0 0 0;

							}

							.filter-group-display__price-range {

								display: flex;
								justify-content: space-between;
								margin-top: 20px;

								.filter-group-display__price-range-filter {

									width: calc(50% - 10px);

									label {
										font-size: 12px;
										display: block;
										margin: 0 0 2px 0;
										text-align: right;
									}

									.input-flex {
										display: flex;
										align-items: center;
										gap: 3px;
										input {
											border-radius: 4px;
											padding: 6px;
											width: 100%;
											border-color: var(--grey);
										}
									}

								}

							}

						}

					}

				}

			}

		}

		&.no-products {

			.collection-grid--product-col {
				.additional_description {
					padding-top: 20px;
				}
			}

			.no-current-products {

				border: 1px solid var(--grey);
				border-radius: 20px;
				padding: 20px 30px;
				text-align: center;
				margin: 20px 0;

			}

		}

		.collection-grid--product-col {

			width: 75%;
			padding-left: 40px;

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

			.collection--hero-container {

				position: relative;

				.slick-dots {

					position: absolute;
					bottom: 0;
					right: 0;
					display: flex;
					list-style: none;
					gap: 4px;

					li {

						button {
							width: 14px;
							min-width: 14px; 
							padding: 0;
							font-size: 0;
							height: 14px;
							border-radius: 50%;
							border: none;
							background: var(--grey);
							@media screen and (max-width: 990px) {
								min-width: unset;
							}
						}

						&.slick-active {
							button {
								background: var(--primary);
							}
						}

					}

				}

				.collection--hero {

					width: 100%;
					height: 240px;
					position: relative;
					border-radius: 20px;
					overflow: hidden;
					margin: 0 0 20px 0;
					display: flex;
					align-items: center;

					@media screen and (max-width: 990px) {
						border-radius: 8px;
					}

					.collection--hero-ov {

						position: relative;
						z-index: 2;
						width: 60%;
						padding: 20px 40px;
						color: #fff;

						.subtitle {
							color: #fff;
							display: block;
							margin: 0 0 4px 0;
						}

						.title {
							color: #fff;
							display: block;
							margin: 0 0 12px 0;
						}


					}

					.image {

						display: block;
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;

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

						&.mobile {
							display: none;
							@media screen and (max-width: 786px) {
								display: block;
							}
						}

					}

					&.image_only {

						height: unset;

						.image { 

							position: static;
							height: auto;

						}

					}

				}

			}

			.collection--quicklinks {

				display: flex;
				flex-wrap: wrap;
				gap: 12px;
				margin: 0 0 20px 0;

				@media screen and (max-width: 768px) {
					gap: 6px;
				}

				.btn {
					min-width: unset;
					@media screen and (max-width: 768px) {
						font-size: 14px;
						padding: 8px 10px;
					}
				}

			}

			.collection--meta {

				.collection-title {

					margin: 0 0 10px 0;

					span {
						font-size: 22px;
						color: var(--primary);
						margin-left: 6px;
					}

				}

				.collection--desc {

					[data-collection-toggle] {
						display: inline-block;
						margin: 6px 0 0 0;
						text-decoration: underline;
					}

				}

			}

			.controls-group {

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

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

				.controls {

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

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

					.filter-toggle-device {
						display: none;
						@media screen and (max-width: 990px) {
							display: block;
							width: 50%;
							border: 1px solid var(--primary);
							height: 38px;
							border-radius: 4px;
							font-size: 16px;
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 0 10px;
							cursor: pointer;
						}
					}

					.sorting {

						width: 250px;
						position: relative;

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

						svg {
							transform: rotate(90deg);
							position: absolute;
							top: 12px;
							right: 12px;
						}

						select {

							width: 100%;
							border-radius: 4px;
							padding: 6px 10px;
							border-color: var(--primary);
							background: url('icon-caret.svg') no-repeat center center / 18px #fff;
							-webkit-appearance: none;
							height: 38px;
							cursor: pointer;

						}

					}

					.product-view {

						display: flex;
						border: 1px solid var(--grey);
						border-radius: 5px;
						height: 38px;

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

						.view {
							display: flex;
							align-items: center;
							padding: 0 10px;
							gap: 6px;
							cursor: pointer;
							border-radius: 5px;
							cursor: pointer;
							&.active {
								border: 1px solid var(--primary);
							}
						}

					}

				}

				.product-pagination {

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

					.pagination {

						.paging-list {

							display: flex;
							gap: 6px;
							align-items: flex-end;

							.page {
								a,
								&.current {
									width: 23px;
									text-align: center;
									border: 1px solid var(--grey);
									padding: 8px 0;
									display: block;
									border-radius: 5px;
									font-size: 14px;
									line-height: 1;
									transition: .3s all;
									color: var(--tertiary);
								}
								&.current {
									border-color: var(--primary);
								}
								&:hover {
									a{
										background: var(--grey);
									}
								}
							}
							.next,
							.prev {
								a {
									padding: 8px 0;
									font-size: 14px;
									line-height: 1;
									color: var(--tertiary);
									display: block;
								}
							}

						}

					}

				}

			} /* controls-group */

			.collection-grid--products {

				display: flex;
				flex-wrap: wrap;
				margin: 0 -8px;
				width: 100%;

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

				.item {

					width: 25%;
					padding: 0 8px 20px;

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

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

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

				}

				&.disable-comparrison {

					.item {

						.card-product .product-card--controls .btn-controls .comparrison-flex {
							display: none;
						}

					}

				}

				&.view-list {

					margin: 0;

					.item {

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

						.card-product {

							display: flex;
							gap: 40px;

							.product-mh {

								border: none;
								height: unset !important;
								display: flex;
								gap: 40px;
								flex-direction: row; 

								.overlay-toggle {
									display: none;
								}

								.product-card--overlay {
									display: none;
								}

								.card-product--media {

									min-width: 270px;
									width: 270px;
									height: 270px;
									padding: 0;

								}

							}

							.product-card--meta {
								justify-content: flex-start;
								.bullets {
									&.list-view-only {
										display: flex;
									}
								}
								.product--energy-rating {
									display: block;
									margin: 16px 0 0 0;
									img {
										max-width: 60px;
									}
								}
							}

							.product-card--controls {

								margin: 0;
								width: 230px;
								min-width: 230px;

							}

						}

					}

				}

			}

			.footer-controls {

				.controls-group {

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

						justify-content: center;

						.controls {
							display: none;
							.filter-toggle-device {
								display: none;
							}
						}
						.product-pagination {
							display: block;
						}
					}

				}

			}

			.additional_description {

				padding: 60px 0 40px;
				border-bottom: 1px solid var(--grey);

			}

			.collection--faqs {

				padding: 40px 0 60px;

				.block-title {
					padding: 0 0 30px 0;
					margin: 0;
				}

				.faq-groups {

					.faq-group {

						padding: 20px 0;
						border-top: 1px solid var(--grey);

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

						.faq--question {
							font-size: 20px;
							display: flex;
							align-items: center;
							cursor: pointer;
							gap: 10px;
							@media screen and (max-width: 768px) {
								font-size: 18px;
							}
						}

						.faq--answer {
							display: none;
							margin-top: 16px;
						}

						&.expanded {

							.faq--question {
								svg {
									transform: rotate(45deg);
								}
							}

							.faq--answer {
								display: block;
							}
						}

					}

				}

			}

		}

	}

	&.filter-drawer-active {

		.collection-grid--flex {

			.filter-form-container {

				opacity: 1;
				pointer-events: auto;

				.filter-form {
					transform: translate(0, 0);
				}

			}

		}

	}

	.main-search--no-results {

		text-align: center;
		margin: 40px 0 32px 0;

		.main-search--title {
			margin: 0 0 16px 0;
		}

		.main-search--ov {}

	}

}