main:has(.collection--custom--filter__wrapper) {

	safe-sticky, safe-sticky form {
		width: 100%;
	}

	#accordion-filter-v-option-grootte {
		display: none;
	}
}

.collection--custom--filter__wrapper {
	position: relative;
	background-color: #FFFFFF !important;

	@media (width <1024px) {
		margin: 0;
	}

	.container {
		@media (width <1024px) {
			margin: 0;
		}
	}

	/* @media (width >=1024px) {
		&::after, &::before {
			content: '';

			position: absolute;
			top: 0;
			z-index: -1;

			height: 100%;
			width: 100%;

			background-color: #FFFFFF;
		}

		&::after {
			left: 100%;
		}

		&::before {
			right: 100%;
		}
	} */
}

.collection--custom--filter {
	display: flex;
	flex-direction: column;
	gap: 24px;

	@media (width >=1024px) {
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr);
		gap: 3rem;

		padding: 24px 0;
	}

	@media (width > 1400px) {
		grid-template-columns: 300px minmax(0, 1fr);
	}

	.collection--custom--filter__filter {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 8px;

		padding: 16px;
		border-radius: 0 0 16px 16px;

		background-color: #292D42;
		color: white;

		@media (width >=1024px) {
			border-radius: 0 16px 16px 0;
			padding-left: 0;

			&::before {
				position: absolute;
				top: 0;
				right: 100%;
				z-index: 1;

				width: 100dvw;
				height: 100%;

				background-color: #292D42;

				@media (width > 768px) {
					content: '';
				}
			}
		}

		.collection--custom--filter__head {
			display: flex;
			align-content: center;
			justify-content: space-between;

			span {
				font-size: 14px;
				font-weight: 600;
			}

			button {
				border: none;
				background-color: transparent;

				font-size: 14px;
				text-decoration: underline;
			}
		}

		custom-selector {
			position: relative;

			width: 100%;
			height: 42px;

			cursor: pointer;

			&:has(.custom--selector__options.open) {
				.custom--selector__label {
					border-radius: 8px 8px 0 0;

					&::after {
						rotate: 180deg;
					}
				}
			}

			.custom--selector__label {
				position: relative;

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

				width: 100%;
				height: 100%;
				padding: 0 16px;
				border-radius: 8px;

				font-size: 14px;
				color: #272727;
				background-color: white;

				&::after {
					content: '';

					display: inline-block;
					width: 16px;
					height: 16px;

					background-image: url("data:image/svg+xml,%3Csvg%20width='12'%20height='7'%20viewBox='0%200%2012%207'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M11%201L6%206L1%201'%20stroke='%23131313'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
				}
			}

			.custom--selector__options {
				position: absolute;
				top: 100%;
				left: 0;
				z-index: 5;

				width: 100%;
				height: 0;
				overflow: hidden;

				opacity: 0;
				transition: opacity 0.3s ease;

				&.open {
					height: fit-content;
					opacity: 1;
				}

				li {
					width: 100%;
					padding: 8px 16px;

					font-size: 14px;
					color: #272727;
					background-color: white;


					&.active, &:hover, &:focus {
						color: white;
						background-color: #272727;
					}
				}
			}
		}
	}

	.collection--custom--filter__collections {
		position: relative;

		width: 100%;
		overflow: hidden;

		@media (width >=1440px) {
			overflow: unset;

		}

		.collection--custom--filter__collection--list {
			display: flex;
			/* gap: 8px; */


			@media (width < 1024px) {
				padding: 0 16px;
			}

			/* @media (width <=1400px) {
				overflow-x: auto;
			} */

			li {
				position: relative;

				min-width: 196px;
				width: 196px;
				height: 107px;

				border-radius: 16px;
				overflow: hidden;

				&:hover, &:focus {
					a {
						background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #292d42a1 100%);
					}
				}

				a {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 1;

					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #292D42 100%);

					transition: background 0.5s ease;
				}

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

				.collection--custom--filter__collection--title {
					position: absolute;
					bottom: 8px;
					left: 16px;
					z-index: 2;

					font-size: 16px;
					line-height: 1.5;
					color: white;

					pointer-events: none;
				}
			}
		}

		.swiper-button {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);

			width: 24px;
			height: 24px;
			border: none;
			border-radius: 50px;

			@media (width >=1440px) {
				display: none;
			}

			svg {
				min-width: 24px;
				width: 24px;
				height: 24px;
			}

			&.swiper-button-disabled {
				display: none;
			}

			&.swiper-button-next {
				right: 8px;
			}

			&.swiper-button-prev {
				left: 8px;

				svg {
					rotate: 180deg;
				}
			}
		}
	}
}