/********************
	Part - Products-selection
********************/

.products-selection {
	position: relative;
	grid-column: 1/-1;
	grid-row: 2;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	background: rgba(69, 69, 69, .65);
	color: #fff;
}

.product-selection-container {
	display: grid;
	grid-template-columns: 25% 1fr 1fr;
	width: 75%;
	margin: auto;
}

.products-selection .title {
	color: var(--color-grey-font-default)
}

.products-selection .sort-by-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.products-selection .sort-by {
	white-space: nowrap;
	word-break: break-word;
	margin-right: 0.5em;
}

.products-selection .filter-button .btn-secondary,
.products-selection .filter-button .btn-tertiary {
	padding: .75rem .5rem .6875rem
}

@media (max-width: 575px) {
	.products-selection .filter-button {
		padding-left: 0
	}
}

@media (max-width: 767px) {
	.products-selection h1 {
		padding-top: 0;
		text-align: center;
		margin-bottom: 1rem
	}

	.products-selection .showing {
		padding-top: 1rem
	}
}

/********************
	Part - Products-sort-order
********************/

.products-sort-order {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	color: #fff;
	/*padding-right: calc(100px + (260 - 100) * ((100vw - 320px) / (1920 - 320)));*/
}

.products-sort-order .select-title {
	display: inline-block;
	font-weight: 500;
	color: var(--color-black-default);
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: 5px;
	box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .2);
	cursor: pointer;
	/*width: 100%;*/
	padding: .625rem;
}

.products-sort-order .select-list {
	display: block;
	color: var(--color-black-default);
	padding: .625rem 1.25rem
}

.products-sort-order .select-list:hover {
	background: var(--color-secondary);
	color: #fff;
	text-decoration: none
}

.products-sort-order .dropdown-menu {
	left: auto;
	width: 16.88rem;
	background: #f6f6f6;
	border: none;
	border-radius: 5px;
	box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .1);
	margin: 0;
	margin-left: 0.625rem;
}


@media (max-width: 767px) {
	.products-sort-order .select-title {
		margin-left: 0
	}
}

/*
--------------------------------------
Total products
--------------------------------------
*/

.total-products {
	align-self: center;
	padding-left: 5em;
}