/* ============================================================
   Страница «Подбор по цвету» (десктоп), классы cl-*.
   Шаблон: core/modules2/pages/colors_new.tpl
   ============================================================ */
.cl,
.cl * {
	box-sizing: border-box;
}
.cl {
	display: flex;
	flex-direction: column;
	gap: 50px;
	margin-bottom: 60px;
	font-family: "Mulish", "Proxima Nova", Arial, sans-serif;
}
.cl a {
	text-decoration: none;
}
.cl ul,
.cl li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cl-bc {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 5px;
	height: 56px;
	margin-bottom: -24px;
	font-size: 13px;
	line-height: 1.3;
	color: #000;
}
.cl-bc a {
	color: #000;
}
.cl-bc a:hover {
	text-decoration: underline;
}
.cl-bc__sub {
	color: #666;
}
.cl .h1_title,
.cl h1 {
	margin: 0;
	padding: 0;
	font-family: "Mulish", Arial, sans-serif;
	font-size: 36px;
	line-height: 41px;
	font-weight: 800;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: normal;
	color: #000;
}
.cl-cols {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}
.cl-col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 58px;
}
.cl-group {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.cl-letter {
	font-size: 40px;
	line-height: 51px;
	font-weight: 400;
	text-transform: uppercase;
	color: #000;
}
.cl-list {
	display: flex;
	flex-direction: column;
	gap: 13px;
}
.cl-list li + li {
	padding-top: 13px;
	border-top: 1px dashed #e2e2e2;
}
.cl-item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #303131;
}
.cl-dot {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
}
.cl-dot--white {
	border: 1px solid #e9e9e9;
}
.cl-dot--multi {
	background: linear-gradient(180deg, #ee2a2a 0%, #df8a5f 16.83%, #add74d 33.65%, #2bc5ca 49.52%, #5e7cc4 65.87%, #9232be 80.77%, #db268a 94.71%);
}
.cl-dot--bw {
	background: conic-gradient(from 180deg at 50% 50%, #000 0%, #fff 100%);
}
.cl-name {
	font-size: 16px;
	line-height: 20px;
	font-weight: 300;
	color: #303131;
}
.cl-item:hover .cl-name {
	text-decoration: underline;
}
.cl-text {
	font-size: 15px;
	line-height: 22px;
	font-weight: 300;
	color: #303131;
}