@charset "UTF-8";
.sort {
		margin-left: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 2px 0;
}
.sort > svg, .sort > .label {
		display: none;
		flex: 0 0 auto;
}
.sort > svg {
		fill: var(--darker);
		margin-right: -8px;
}
.sort > .label {
		font-weight: 300;
		font-size: 13px;
		line-height: 25px;
		letter-spacing: -0.01em;
		color: var(--grey800);
}
.sort-el {
		flex: 0 0 auto;
}
.sort-head {
		position: relative;
		padding: 12px 29px 12px 8px;
		cursor: pointer;
		user-select: none;
		color: var(--blue);
		font-weight: 600;
		font-size: 13px;
		line-height: 25px;
		letter-spacing: -0.02em;
		transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.sort-head svg {
		position: absolute;
		top: 50%;
		right: 13px;
		fill: var(--blue);
		transform: translate3d(0, -50%, 0);
		transition-property: transform, fill;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (pointer:fine) {
		.sort-head:hover {
				color: var(--hover);
		}
		.sort-head:hover svg {
				fill: var(--hover);
		}
}
.sort-popup {
		position: fixed;
		z-index: 300;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		touch-action: none;
		user-select: none;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
}
.sort-popup .in {
		position: relative;
		flex: 0 0 auto;
		bottom: 0;
		left: 0;
		width: 100%;
		max-height: calc(100% - 160px);
		border-radius: 40px 40px 0 0;
		margin: auto 0 0 0;
		background: var(--white);
		box-shadow: 0px 0px 1px rgba(12, 26, 75, 0.1), 0px -35px 50px rgba(5, 21, 46, 0.26);
		backface-visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.sort-popup .sort-title {
		font: 900 24px/40px var(--fontg);
		letter-spacing: -0.01em;
		color: #657CA4;
		text-align: center;
		position: sticky;
		top: 0;
		background: var(--white);
		z-index: 5;
		border-radius: 40px 40px 0 0;
		padding: 32px 16px 10px 16px;
}
.sort-el.open .sort-fader {
		pointer-events: all;
		opacity: 0.6;
}
.sort-el.open .sort-popup {
		pointer-events: all;
		opacity: 1;
}
.sort-el.open .sort-popup .in {
		transform: translate3d(0, 0, 0);
}
.sort-popup .scroll {
		border-radius: 40px 40px 0 0;
		backface-visibility: hidden;
		transform: translateZ(0);
		overflow: hidden;
		overflow-y: auto;
		max-height: 100%;
		text-align: center;
}
.sort-popup .col {
		text-align: left;
		display: inline-flex;
		vertical-align: top;
		max-width: 100%;
		flex-direction: column;
		align-items: flex-start;
		padding: 15px 25px 25px 25px;
}
.sort-popup .col + .col {
		padding-top: 0;
}
.sort-popup .label {
		font-weight: 600;
		font-size: 14px;
		line-height: 20px;
		letter-spacing: -0.01em;
		color: var(--grey800);
		padding: 0 0 5px 0;
		border-bottom: 0.5px solid #CED8E7;
		width: 100%;
		margin: 0 0 10px 0;
}
.sort-popup .link {
		position: relative;
		margin: 0 -10px 0 0;
		padding: 4px 10px 4px 20px;
		text-decoration: none;
		cursor: pointer;
		user-select: none;
		transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		color: var(--grey600);
		font-weight: 300;
		font-size: 13px;
		line-height: 20px;
}
.sort-popup .link:before {
		content: '—';
		position: absolute;
		top: 0;
		left: 0;
		font-weight: 100;
		font-size: 10px;
		padding-top: inherit;
}
@media (pointer:fine) {
		.sort-popup .link:hover {
				color: var(--blue);
		}
}
.sort-popup .link.selected {
		font-weight: 500;
		cursor: default;
		background: url("../img/check-yellow.svg") no-repeat 0 50%;
		background-size: 13px auto;
		pointer-events: none;
}
.sort-popup .link.selected:before {
		opacity: 0;
}
@media only screen and (max-width: 767px) {
		@media (pointer: coarse) {
				html.open-sort {
						overflow: hidden;
				}
		}
		.sort-fader {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 200%;
				transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
				background: #061523;
				opacity: 0;
				pointer-events: none;
		}
		.sort-popup .handler {
				cursor: s-resize;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 10;
				height: 36px;
				border-radius: 40px 40px 0 0;
		}
		.sort-popup .handler:before {
				content: '';
				position: absolute;
				top: 15px;
				left: 50%;
				width: 75px;
				height: 3px;
				background: #7D91B3;
				border-radius: 1.5px;
				margin: 0 -37.5px;
		}
		.sort-popup .col {
				padding-left: 32px;
				padding-right: 32px;
				gap: 30px 0;
		}
		.sort-popup .label {
				font-weight: bold;
				font-size: 17px;
				letter-spacing: -0.02em;
				font-family: var(--fontg);
				padding: 0 10px 0 40px;
				margin: 0 -10px 0 0;
				color: #2B3951;
				border: 0;
		}
		.sort-popup .link {
				padding: 0 10px 0 40px;
				color: var(--grey800);
				font-size: 15px;
				letter-spacing: -0.01em;
		}
		.sort-popup .link:before {
				display: none;
		}
		.sort-popup .multiple .col {
				width: 100%;
				padding-bottom: 30px;
				gap: 15px 0;
		}
}
/*mobile end*/
/*tablet start*/
@media only screen and (min-width: 768px) {
		.sort {
				gap: 11px;
		}
		.sort > svg, .sort .label {
				display: block;
		}
		.sort-el {
				position: relative;
		}
		.sort-head {
				padding: 0 28px 0 10px;
				font-weight: 500;
				font-size: 15px;
				letter-spacing: -0.01em;
				text-transform: lowercase;
		}
		.sort-head svg {
				right: 10px;
				transform: translate3d(0, -50%, 0) rotate(0deg);
		}
		.sort-el.open .sort-head {
				color: var(--grey600);
		}
		.sort-el.open .sort-head svg {
				fill: var(--grey500);
				transform: translate3d(0, -50%, 0) rotate(-180deg);
		}
		.sort-fader, .sort-popup .handler, .sort-popup .sort-title {
				display: none;
		}
		.sort-popup {
				position: absolute;
				z-index: 90;
				top: 100%;
				left: auto;
				right: 0;
				margin: 11px -25px;
				width: auto;
				height: auto;
				max-height: 50vh;
				overflow: hidden;
				overflow-y: auto;
				transition-property: transform, opacity;
				transition-duration: 0.2s;
				transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
				transform: translate3d(0, 10px, 0) !important;
				display: block;
				background: var(--white);
				box-shadow: 0px 0px 1px rgba(12, 26, 75, 0.1), 0px 10px 40px -2px rgba(50, 50, 71, 0.12);
				border-radius: 4px;
		}
		.sort-popup .in {
				position: static;
				bottom: auto;
				left: auto;
				width: auto;
				height: auto;
				max-height: none;
				overflow: visible;
				min-height: 0;
				border-radius: 0;
				background: none;
				box-shadow: none;
				transform: none !important;
				transition: none;
		}
		.sort-popup .handler {
				display: none;
		}
		.sort-el.open .sort-popup {
				pointer-events: all;
				opacity: 1;
				transform: translate3d(0, 0, 0) !important;
		}
		.sort-popup .scroll {
				border-radius: 0;
				padding: 25px 12.5px 0 12.5px;
				overflow: visible;
				max-height: none;
				width: 200px;
		}
		.sort-popup .scroll.multiple {
				width: 570px;
				column-count: 3;
		}
		.sort-popup .col {
				display: inline-flex;
				vertical-align: top;
				width: 100%;
				padding: 0 12.5px 25px 12.5px;
		}
}
/*tablet end*/
/*desktop start*/
@media only screen and (min-width: 1280px) {
		.sort {
				gap: 4px;
		}
		.sort > svg {
				margin-right: 5px;
		}
		.sort > .label {
				font-size: 15px;
				color: var(--darker);
		}
		.sort-el {
				position: relative;
		}
}