@charset "UTF-8";
.modal-colors {
		height: 100%;
}
.modal-colors .modal-side-scroll {
		height: 100%;
		display: flex;
		flex-direction: column;
}
.modal-colors-head {
		flex: 0 0 auto;
		width: 100%;
}
.modal-colors-head {
		position: sticky;
		top: 0;
		z-index: 10;
		background: var(--white);
		height: 70px;
		border-bottom: 0.5px solid var(--sec-dark);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 25px;
}
.modal-colors-head .big {
		font: bold 24px/24px var(--fontg);
		letter-spacing: -0.02em;
		color: #4F658A;
}
.modal-colors-head .toggle {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		cursor: pointer;
		user-select: none;
		font-weight: 500;
		font-size: 15px;
		line-height: 20px;
		letter-spacing: -0.02em;
		color: var(--blue);
		transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		gap: 0 15px;
		position: relative;
}
.modal-colors-head .toggle:before {
		content: '';
		position: absolute;
		pointer-events: none;
		width: 7px;
		height: 7px;
		background: var(--orange);
		border-radius: 50%;
		top: 1.5px;
		left: 29px;
		transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		opacity: 0;
}
.modal-colors-head .toggle.new:before {
		opacity: 1;
}
.modal-colors-head .toggle.selected:before {
		opacity: 1;
}
.modal-colors-head .toggle svg {
		flex: 0 0 auto;
		fill: var(--blue);
		transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.modal-colors-head .toggle svg:last-child {
		transition-property: transform, fill;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
		transform: rotate(0deg);
}
.modal-colors-head.open .toggle {
		color: var(--darker);
}
.modal-colors-head.open .toggle svg {
		fill: var(--darker);
}
.modal-colors-head.open .toggle svg:last-child {
		transform: rotate(-180deg);
}
@media (pointer:fine) {
		.modal-colors-head .toggle:hover {
				color: var(--hover);
		}
		.modal-colors-head .toggle:hover svg {
				fill: var(--hover);
		}
		.modal-colors-head.open .toggle:hover {
				color: var(--blue);
		}
		.modal-colors-head.open .toggle:hover svg {
				fill: var(--blue);
		}
}
.modal-colors-scroll {
		flex: 1;
		width: 100%;
		position: relative;
}
.modal-colors-scroll-inner {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		overflow: hidden;
		overflow-y: auto;
}
.modal-colors-filters {
		flex: 0 0 auto;
		width: 100%;
		left: 0;
		right: 0;
		background: var(--white);
		display: none;
}
.modal-colors-filters-inner {
		padding: 25px;
		display: flex;
		flex-direction: column;
		gap: 15px 0;
		border-bottom: 0.5px solid var(--sec-dark);
}
.modal-colors-filters .row {
		flex: 0 0 auto;
		width: 100%;
}
.modal-colors-filters .reset {
		width: auto;
		align-self: flex-start;
		display: flex;
		align-items: center;
		gap: 0 15px;
		cursor: pointer;
		user-select: none;
		transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		font-weight: normal;
		font-size: 14px;
		line-height: 20px;
		letter-spacing: -0.03em;
		margin-top: 11px;
		color: #93A6C6;
}
.modal-colors-filters .reset svg {
		flex: 0 0 auto;
		fill: #93A6C6;
		transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (pointer:fine) {
		.modal-colors-filters .reset:hover {
				color: var(--hover-dark);
		}
		.modal-colors-filters .reset:hover svg {
				fill: var(--hover-dark);
		}
}
.modal-colors-category {
		border-bottom: 0.5px solid var(--sec-dark);
}
.modal-colors-category-head {
		position: sticky;
		top: 0;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 70px;
		border-bottom: 0.5px solid var(--sec-dark);
		padding: 0 25px;
		font-weight: normal;
		font-size: 14px;
		line-height: 15px;
		letter-spacing: -0.02em;
		color: var(--grey600);
		background: var(--white);
		transition-property: box-shadow, border;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.modal-colors-category-head strong {
		flex: 0 0 auto;
		font-weight: 600;
		font-size: 16px;
		line-height: 20px;
		letter-spacing: -0.03em;
		color: var(--grey800);
}
.modal-colors-category-head.sticked {
		border-color: transparent;
		box-shadow: 0px 0.5px 0px rgba(0, 0, 0, 0.15), 0px 10px 18px rgba(0, 0, 0, 0.08);
}
.modal-colors-series {
		padding: 25px;
}
.modal-colors-series-head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 0 16px;
		margin: 0 0 20px 0;
		font-weight: normal;
		font-size: 14px;
		line-height: 20px;
		letter-spacing: -0.02em;
		color: var(--grey500);
}
.modal-colors-series-head strong {
		display: block;
		margin: 0 0 5px 0;
		font: 600 18px/20px var(--fontg);
		color: var(--grey800);
}
.modal-colors-series-head .toggle {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		color: var(--grey800);
		transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		gap: 0 15px;
		cursor: pointer;
		user-select: none;
}
.modal-colors-series-head .toggle svg {
		flex: 0 0 auto;
		fill: var(--grey600);
		transform: rotate(0deg);
		transition-property: transform, fill;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.modal-colors-series.open .modal-colors-series-head .toggle {
		color: var(--grey600);
}
.modal-colors-series.open .modal-colors-series-head .toggle svg {
		transform: rotate(-180deg);
}
@media (pointer:fine) {
		.modal-colors-series-head .toggle:hover {
				color: var(--blue) !important;
		}
		.modal-colors-series-head .toggle:hover svg {
				fill: var(--blue) !important;
		}
}
.modal-colors-series:not(.open) .modal-colors-series-head .toggle .for-open, .modal-colors-series.open .modal-colors-series-head .toggle .for-close {
		display: none;
}
.modal-colors-series:not(.open) .modal-colors-series-descr {
		display: none;
}
.modal-colors-series-descr {
		font-weight: normal;
		font-size: 13px;
		line-height: 25px;
		letter-spacing: -0.02em;
		color: var(--grey700);
}
.modal-colors-series-descr .in {
		padding: 0 0 25px 0;
}
.modal-colors-series-descr .in > *:first-child {
		margin-top: 0 !important;
}
.modal-colors-series-descr .in > *:last-child {
		margin-bottom: 0 !important;
}
.modal-colors-descr-slider {
		overflow: visible !important;
		width: auto !important;
		margin: 0 0 25px -15px !important;
}
.modal-colors-descr-slider .swiper-slide {
		padding-left: 15px;
		width: 33.333333%;
		min-width: 165px;
}
.modal-colors-descr-slider .swiper-slide img {
		width: 100%;
		height: auto;
		border-radius: 3px;
}
.modal-colors-list {
		display: grid;
		gap: 10px;
		grid-template-columns: repeat(3, 1fr);
}
.modal-colors-list label {
		position: relative;
		cursor: pointer;
		user-select: none;
		display: block;
		border-radius: 5px;
}
.modal-colors-list label input {
		position: absolute;
		transform: scale(0);
		opacity: 0;
		visibility: hidden;
}
.modal-colors-list label:before {
		content: '';
		display: block;
		pointer-events: none;
		padding-top: 100%;
}
.modal-colors-list label img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		border-radius: inherit;
}
.modal-colors-list .info {
		position: absolute;
		bottom: 0;
		left: 0;
		margin: 5px;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 3px;
		font-weight: 300;
		font-size: 11px;
		line-height: 14px;
		letter-spacing: -0.03em;
		color: var(--deep-blue);
		padding: 5px 7px;
		text-align: center;
}
.modal-colors-list .selected {
		position: absolute;
		top: 0;
		left: 0;
		margin: 5px;
		font-size: 11px;
		line-height: 14px;
		font-weight: normal;
		color: var(--white);
		padding: 5px 8px;
		border-radius: 3px;
		background: rgba(22, 40, 72, 0.9);
		opacity: 0;
		transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.modal-colors-list input:checked ~ .selected {
		opacity: 1;
}
/*mobile end*/
/*tablet start*/
@media only screen and (min-width: 768px) {
		.modal-colors {
				max-width: 530px;
		}
		.modal-colors-filters-inner {
				gap: 20px 0;
		}
		.modal-colors-filters .reset {
				align-self: flex-end;
				flex-direction: row-reverse;
				margin-top: 8px;
				text-align: right;
		}
		.modal-colors-series-descr {
				color: var(--grey600);
		}
		.modal-colors-descr-slider .swiper-slide {
				min-width: 0;
		}
		.modal-colors-list {
				gap: 15px;
		}
		.modal-colors-list label {
				border-radius: 3px;
		}
		.modal-colors-list .info {
				margin: 10px;
				padding: 5px 10px;
				font-size: 12px;
				line-height: 20px;
		}
		.modal-colors-list .selected {
				margin: 10px;
				font-weight: 500;
				font-size: 12px;
				line-height: 16px;
				letter-spacing: -0.02em;
				padding: 5px 10px;
		}
}
/*tablet-big end*/
/*desktop start*/
@media only screen and (min-width: 1280px) {}