.select-container {
	background-color: var(--cf-background);
	border: var(--border-text);
	border-radius: 10px;
	padding: 20px;
	width: 100%;
	display: flex;
	flex-direction: column;
	text-align: left;
	align-items: left;
	align-content: left;
	user-select: none;
	margin-bottom: 10px;
}

.select-container .selection-filter {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 2rem;
}

.select-label {
	color: var(--white);
	margin-bottom: 10px;
	display: block;
	font-size: 18px;
}

.select-box {
	position: relative;
	padding: 12px 20px;
	font-size: 16px;
	border: var(--border-text);
	background-color: var(--cf-background-dark);
	color: var(--foreground);
	outline: none;
	border-radius: 10px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	width: 100%;
	z-index: 999;
}

.select-box ul li {
	list-style: none;
}

.select-box .filter-options-select {
	display: block;
	width: 100%;
	border: var(--border-text);
	box-shadow: var(--box-shadow);
	cursor: pointer;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease-out;
}

.select-box .filter-options-select.show {
	max-height: 100vh;
}

.select-box .filter-options-select .option {
	background-color: var(--cf-background-dark);
	color: var(--cf-foreground);
	width: 100%;
	padding: 5px;
	border: none;
}

.select-box .filter-options-select .option:hover {
	background-color: var(--cf-primary-dark);
	color: var(--cf-background);
	cursor: pointer;
}

.selected-option {
	cursor: pointer;
	padding: 5px;
	background-color: var(--cf-background-dark);
	border: var(--border-text);
	border-radius: 10px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.selected-option:hover {
	box-shadow: var(--box-shadow);
}

.search-wrapper {
	border-radius: 30px;
	padding: 10px;
	background-color: var(--cf-background);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-items: center;
	align-content: center;
}

.search-bar {
	width: 80%;
	padding: 10px 15px;
	font-size: 16px;
	border: none;
	border-radius: 25px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	outline: none;
	background-color: var(--cf-background-dark);
	color: var(--cf-foreground);
	transition: all 0.3s ease;
}

.search-bar:hover,
.search-bar:hover + .search-btn,
.search-btn:hover,
.search-btn:hover + .search-bar,
.search-bar:focus,
.search-bar:focus + .search-btn {
	box-shadow: var(--box-shadow);
}

.search-btn {
	width: 20%;
	background-color: var(--cf-background-dark);
	font-size: 16px;
	padding: 10px 15px;
	border: none;
	border-radius: 25px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	cursor: pointer;
	transition: all 0.3s ease;
}

.search-btn:active {
	background-color: var(--cf-primary);
}

.products-list-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
}

.products-list {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-items: left;
	align-content: center;
	justify-content: left;
	width: 100%;
}

.noresults {
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-content: center;
	justify-items: center;
}

.noresults h1 {
	font-size: 3rem;
}

.noresults p {
	font-size: 2rem;
}

@media (min-width: 800px) {
	.select-container .selection-filter {
		flex-direction: row;
	}
	.select-box .filter-options-select {
		top: 100%;
		left: 0;
		position: absolute;
	}
	.search-btn {
		width: 10%;
	}
	.search-bar {
		width: 90%;
	}
}

@media (min-width: 1200px) {
	.search-btn {
		width: 5%;
	}
	.search-bar {
		width: 95%;
	}
}