/*- констр - */
/*------ prod constructor ------- */
.ccard-pprefs-tabs{
	background-color: #ffffff;
	border-radius: 6px;
	padding: 12px 10px 12px 14px;
	display: flex;
	flex-flow: row nowrap;
	gap: 12px;
	font-size: 16px;
	line-height: 18px;
}
.ccard-pprefs-tabs.open{
	border-radius: 6px 6px 0 0;
}
.ccard-pprefs-tabs>div{
	border-radius: 14px;
	background-color: #FAFAFA;
	padding: 4px 12px;
	cursor: pointer;
}
.ccard-pprefs-tabs>div:hover{background-color: #f6f6f6;}
.ccard-pprefs-tabs>div>span{
	display: inline-block; 
	padding-left: 20px;
	background: url(../img2/tab-radio.svg) no-repeat 0 50%;
}
.ccard-pprefs-tabs>div.sel{
	background-color: #93c30c;
	color: #ffffff;	
	font-weight: 600;
}
.ccard-pprefs-tabs>div.sel:hover{background-color: #93c30c;}
.ccard-pprefs-tabs>div.sel>span{
	background: url(../img2/tab-radio-sel.svg) no-repeat 0 50%;
}


.ccard-pprefs-presets{}
.ccard-pprefs-constructor{
	display: block;
	padding: 10px 20px 20px 20px;
	background-color: #ffffff;
	border-radius: 0 0 6px 6px;
}
.ccard-pprefs-constructor-dis{
	position: relative;
}
.ccard-pprefs-constructor-dis:before{
	display: block;
	content: '';
	position: absolute;
	z-index: 4;	
	background-color: rgba(255,255,255,0.8);
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.ccard-pprefs-h{
	text-transform: uppercase;
	font-size: 18px;
	line-height: 20px;
	color: #C62D2D;
	font-weight: 600;
	padding-bottom: 20px;
}
.ccard-pprefs-notice{
	clear: both;
	margin-bottom: 20px;
	background: #FFFCE4;
	padding: 10px 14px;
	border-radius: 4px;
	text-align: center;
	font-size: 16px;
}
.ccard-pprefs-notice>p{font-weight: 400;}
.ccard-pprefs-notice>p>span{color: #F2890E; font-weight: bold;}

/*
.ccard-sizes-grid{
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr 2fr;
}

.ccard-sizes{}
.ccard-sizes>p{padding: 0 0 7px 0;}
.ccard-sizes>p.constr-step-h{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 8px;
}
.ccard-sizes>p.constr-step-h span{
	font-weight: 600;
	text-transform: uppercase;
}
.ccard-sizes>p.constr-step-h:before{
	display: block;
	width: 30px;
	font-size: 20px;
	line-height: 20px;
	color: #C62D2D;
	border: 1px solid #C62D2D;
	padding: 4px 0;
	text-align: center;
	content: '1';
	border-radius: 50%;
}
.ccard-sizes:nth-child(2)>p.constr-step-h:before{content: '2';}
.ccard-sizes:nth-child(3)>p.constr-step-h:before{content: '2';}
.ccard-sizes:nth-child(4)>p.constr-step-h:before{content: '3';}
.ccard-sizes:nth-child(5)>p.constr-step-h:before{content: '4';}
.ccard-sizes:nth-child(6)>p.constr-step-h:before{content: '5';}
.ccard-sizes:nth-child(7)>p.constr-step-h:before{content: '6';}
.ccard-sizes:nth-child(8)>p.constr-step-h:before{content: '7';}
.ccard-sizes:nth-child(9)>p.constr-step-h:before{content: '8';}


.ccard-sizes-list{
}
.ccard-sizes-list:after{clear: both; content: ''; display: block;}
.ccard-sizes-list>div{
	float: left;
	font-size: 14px;
	line-height: 14px;
	text-align: center;
	padding: 10px 8px;
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	cursor:pointer;
	margin: 0 10px 10px 0;
}
.ccard-sizes-list>div:hover{background-color: #f9f9f9;}
.ccard-sizes-list>div.size-notavail{
	color: #b5b5b5;
	background-color: #ededed;
	border: 1px solid #cdcdcd;
	position: relative;
	cursor: default;
}
.ccard-sizes-list>div.size-notavail:before{
	display: block;
	position: absolute;
	content: '';
	z-index: 2;
	background: url(../img/slash.png) no-repeat 50% 50%;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}
.ccard-sizes-list>div.size-sel{
	font-weight: bold;
	color: #ffffff;
	background-color: #1fafdb;
	border: 1px solid #1fafdb;
}
*/





.ccard-pprefs-grid{
	/*display: grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr 1fr 1fr;
	row-gap: 20px;
	*/
}
.ccard-kovrik-material{
	grid-column: 1 / span 3;
	grid-row: 1;
}
.ccard-kovrik-variant{
	grid-column: 1 / span 2;
	grid-row: 2;
}
.ccard-kovrik-contur{
	grid-column: 1 / span 3;
	grid-row: 1;
}

.ccard-pprefs-grid2 .ccard-kovrik-material{
	grid-column: 1 / span 3;
	grid-row: 1;
}
.ccard-pprefs-grid2 .ccard-kovrik-contur{
	grid-column: 2 / span 2;
	grid-row: 1;
}
.ccard-pprefs-grid2 .ccard-kovrik-variant{
	grid-column: 1 / span 3;
	grid-row: 2;
}


.ccard-pprefs{}
.ccard-pprefs>p{padding: 0 0 7px 0;}
.ccard-pprefs>p.constr-step-h{
	/*display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 8px;	
	*/
	background-color: #FAFAFA;
	padding: 8px 14px;
	font-size: 16px;
	font-weight: bold;
}
.ccard-pprefs>p.constr-step-h span{	
}
.ccard-pprefs>p.constr-step-h i{
	font-style: italic;
	font-weight: normal;
	color: #F2890E;
	margin-left: 6px;
}
/*
.ccard-pprefs>p.constr-step-h:before{
	display: block;
	width: 30px;
	font-size: 20px;
	line-height: 20px;
	color: #C62D2D;
	border: 1px solid #C62D2D;
	padding: 4px 0;
	text-align: center;
	content: '1';
	border-radius: 50%;
}
.ccard-pprefs:nth-child(2)>p.constr-step-h:before{content: '2';}
.ccard-pprefs:nth-child(3)>p.constr-step-h:before{content: '3';}
.ccard-pprefs:nth-child(4)>p.constr-step-h:before{content: '4';}
.ccard-pprefs:nth-child(5)>p.constr-step-h:before{content: '5';}
.ccard-pprefs:nth-child(6)>p.constr-step-h:before{content: '6';}
.ccard-pprefs:nth-child(7)>p.constr-step-h:before{content: '7';}
.ccard-pprefs:nth-child(8)>p.constr-step-h:before{content: '8';}
.ccard-pprefs:nth-child(9)>p.constr-step-h:before{content: '9';}
*/

.ccard-pprefs-group{
	margin: 6px 0;
}
.ccard-pprefs-group>p{
	font-weight: 600;
	padding-bottom: 2px;
}

.ccard-pprefs-list{
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
	padding: 8px 0;
}
.ccard-pprefs-list:after{clear: both; content: ''; display: block;}
.ccard-pprefs-list>div{
	/*float: left;*/
	/*width: 46px;*/
	font-size: 14px;
	line-height: 14px;
	text-align: center;
	padding: 14px 8px;
	border: 1px solid #f0f0f0;
	border-radius: 4px;
	cursor:pointer;
	margin: 0;	
}
.ccard-pprefs-list>div:hover{background-color: #f9f9f9;}
/*
.ccard-pprefs-list>div.size-notavail{
	color: #b5b5b5;
	background-color: #ededed;
	border: 1px solid #cdcdcd;
	position: relative;
	cursor: default;
}
.ccard-pprefs-list>div.size-notavail:before{
	display: block;
	position: absolute;
	content: '';
	z-index: 2;
	background: url(../img/slash.png) no-repeat 50% 50%;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}
.ccard-pprefs-list>div.size-sel{
	font-weight: bold;
	color: #ffffff;
	background-color: #1fafdb;
	border: 1px solid #1fafdb;
}
*/

.ccard-pprefs-scheme>div{
	background-color: #ffffff;
	position: relative;
}
.ccard-pprefs-scheme>div.sel{
	background-color: #ffffff;
	/*border: 1px solid #e6e6e6;*/
	border: 1px solid #C62D2D;
}
.ccard-pprefs-scheme>div:before{
	display: block;
	content: '';
	background: url(../img/radio-notsel.svg) no-repeat 50% 50%;
	width: 24px;
	height: 25px;
	position: absolute;
	right: 10px;
	top: 8px;	
}
.ccard-pprefs-scheme>div.sel:before{background-image: url(../img/radio-selected.svg);}
.ccard-pprefs-scheme>div>div{
	width: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ccard-pprefs-scheme>div>div.ccard-pprefs-scheme-pic{height: 130px;}
.ccard-pprefs-scheme>div>div img{display: block; max-width: 100%; max-height: 128px;}
.ccard-pprefs-scheme>div>div.pic-sel{display: none;}
.ccard-pprefs-scheme>div>div.pic-not{display: flex;}
.ccard-pprefs-scheme>div.sel>div.pic-sel{display: flex;}
.ccard-pprefs-scheme>div.sel>div.pic-not{display: none;}
.ccard-pprefs-scheme>div>span{
	padding: 8px 0 6px 0;
	display: block;
	color: #ABABAB;
	font-weight: 500;
}
.ccard-pprefs-scheme>div.sel>span{
	color: #262323;
}
.ccard-pprefs-scheme>div>p{	
	font-size: 18px;
	padding: 6px 0 2px 0;
}
.ccard-pprefs-scheme>div.sel>p{
	font-weight: bold;
	color: #C62D2D;
}


/*.ccard-pprefs-thumb, .ccard-pprefs-ico, .ccard-pprefs-color{padding-left: 40px;}*/
.ccard-pprefs-group>p{padding-left: 40px;}

.ccard-pprefs-thumb>div{
	border: 0;
}
.ccard-pprefs-thumb>div>div{
	border: 4px solid transparent;
	overflow: hidden;
	border-radius: 50%;
	width: 65px;
	height: 65px;
}
.ccard-pprefs-thumb>div>span{color: #808080;}
.ccard-pprefs-thumb>div.sel>div{border-color: #C62D2D;}
.ccard-pprefs-thumb>div.sel>span{color: #C62D2D;}


.ccard-pprefs-ico>div{
	background-color: transparent;
	/*border: 0;*/
	border-radius: 5px;
	text-align: center;
	padding: 0;
	margin: 1px 1px;
}
.ccard-pprefs-ico>div.sel{
	border: 2px solid #93C30C;
	margin: 0;
	position: relative;
}
.ccard-pprefs-ico>div.sel:before{
	display: block;
	position: absolute;
	z-index: 3;
	width: 22px;
	height: 22px;
	content: '';
	border-radius: 50%;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background: url(../img2/p-opt-selected.svg) no-repeat 0 0;
	background-size: 22px 22px;
}
.ccard-pprefs-ico>div>div{
	width: 48px;
	height: 48px;
	border-radius: 5px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
}
.ccard-pprefs-ico>div>div img{display: block; max-width: 100%; max-height: 100%;}
.ccard-pprefs-ico>div>span{
	padding: 8px 0 6px 0;
	display: block;
}


.ccard-pprefs-color>div{
	border: 0;
}
.ccard-pprefs-color>div>div{
	border: 3px solid transparent;
	overflow: hidden;
	border-radius: 50%;
	width: 22px;
	height: 22px;
}
.ccard-pprefs-color>div>span{color: #808080; display: none;}
.ccard-pprefs-color>div.sel>div{border-color: #C62D2D;}
.ccard-pprefs-color>div.sel>span{color: #C62D2D;}


.ccard-pprefs-combo{
	position: relative;
	height: 180px;
}
.ccard-pprefs-combo>span{
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	top: 110px;
	z-index: 2;
}
.ccard-pprefs-combo>div{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0;
	display: none;
	text-align: center;
	background-color: #ffffff;
	height: 170px;
}
.ccard-pprefs-combo>div.sel{
	display: block;
}
.ccard-pprefs-combo>div>div{
	display: flex;
	height: 90px;
	align-items: center;
	justify-content: center;
}
.ccard-pprefs-combo>div>div img{display: block; max-height: 95%; width: auto;}
.ccard-pprefs-combo>div>span{
	display: block;
	margin-top: 40px;
	color: #C62D2D;
	font-size: 20px;
	font-weight: 500;
}

@media only screen and (max-width: 1200px)
{
	.ccard-pprefs>p.constr-step-h span{font-size: 15px;}	
	.ccard-pprefs-combo select{width: 130px;}
}

@media only screen and (max-width: 450px)
{
	.ccard-pprefs-grid{grid-template-columns: 1fr 1fr;}
	.ccard-kovrik-material, .ccard-pprefs-grid2 .ccard-kovrik-material{grid-column: 1 / span 2; grid-row: 1;}
	.ccard-kovrik-variant, .ccard-pprefs-grid2 .ccard-kovrik-variant{grid-column: 1 / span 2; grid-row: 2;}
	.ccard-kovrik-contur, .ccard-pprefs-grid2 .ccard-kovrik-contur{grid-column: 1 / span 2; grid-row: 1;}
	.ccard-pprefs-scheme{display: flex; flex-flow: row wrap; gap: 8px;}
	.ccard-pprefs-list>div{margin: 0;}	
	.ccard-pprefs-group>p{padding-left: 0;}
	.ccard-pprefs-thumb, .ccard-pprefs-ico, .ccard-pprefs-color{padding-left: 0;}
	.ccard-pprefs-thumb{display: flex; flex-flow: row wrap;}
	.ccard-pprefs-thumb>div{padding: 8px 4px; float: none; width: 60px;}
	.ccard-packrow>div:last-child{margin-right: auto; text-align: center;}
	.ccard-pprefs-thumb>div>div{width: 54px; height: 54px;}
	.ccard-pprefs-thumb>div>span{font-size: 13px;}
}