/* HEADER */
h1.CmH1Types{align-self:center; font-family:Calibri!important; text-overflow:ellipsis; display:inline-block; color:#585858; line-height:21px; font-weight:bold; font-size:18px !important; text-shadow:1px 1px 2px #ffffff;}
.clear {clear: both;}
.cmHeadBox{display:flex; flex-direction:column; padding:0px 21px 0px 21px; margin:0px -21px;}
.CmTypeColor{color:var(--cm-main);}
.CmTypeBg{background-color:var(--cm-main);}

/* Заголовок + счётчик + Reset */
.CmTpTitleBar{display:flex; align-items:center; gap:12px; width:calc(100% + 42px); box-sizing:border-box; margin:0 -21px; padding:4px 12px 4px 0; border-top:1px solid var(--cm-main); box-shadow:0 3px 10px -4px #c1c1c1; background-color:var(--cm-aero-bg-color);}
.CmTpTitleBar .CmBrTitleSearchWrap{flex:1 1 auto; min-width:0; width:auto; margin:0; padding:0 10px 2px 31px; border:none; box-shadow:none; background:transparent;}
.CmTpCount{flex:0 0 auto; margin-left:auto; padding:0 4px; color:#757575; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; user-select:none;}
.CmTpCount.CmTpCountActive{color:var(--cm-main);}
.CmTpCountSep{color:#b0b0b0; font-weight:500;}
.CmTpReset{display:none; flex:0 0 auto; align-items:center; justify-content:center; gap:7px; height:36px; margin:0 4px 0 0; padding:0 14px; border:1px solid var(--cm-main); border-radius:4px; color:var(--cm-main); font-size:13px; font-weight:600; cursor:pointer; background:#fff; box-sizing:border-box; white-space:nowrap; transition:all 0.2s ease-in-out;}
.CmTpReset:hover{background:var(--cm-main); color:#fff;}
.CmTpTitleBar.CmTpFiltered .CmTpReset{display:flex;}
.CmTpResetIco{width:15px; height:15px; flex:0 0 auto;}

/* Фильтры — в духе CmMdFilter / CmMdYearBut */
.CmTypesWrap .CmTypeTitleWrap{padding:2px 1px 2px; box-sizing:border-box;}
/* Desktop: TitlePad/InfoBl не съедают ширину (InfoBl скрыт) — иначе фильтры уже строк */
.CmTypesWrap .CmTypeTitleWrap,
.CmTypesWrap .CmTypeListWrap{grid-template-columns:minmax(0, 1fr);}
.CmTypesWrap .CmTypeTitlePad{display:none; padding:0;}

/*
 * Одна и та же сетка у шапки и строк.
 * minmax(0, Nfr) + min-width:0 — иначе селекты в шапке раздувают колонки
 * (min-width:auto), а текст в строках остаётся узким → сдвиг как на скрине.
 */
.CmTypesWrap .CmTypeTitleHead:not(.CmComGridTab),
.CmTypesWrap .CmModelLink:not(.CmComGridTab){
	grid-template-columns:minmax(0, 0.35fr) minmax(0, 1.1fr) minmax(0, 0.75fr) minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 0.55fr);
	column-gap:5px;
}
.CmTypesWrap .CmTypeTitleHead.CmComGridTab,
.CmTypesWrap .CmModelLink.CmComGridTab{
	grid-template-columns:minmax(0, 0.3fr) minmax(0, 0.8fr) minmax(0, 0.45fr) minmax(0, 0.35fr) minmax(0, 1.4fr) minmax(0, 0.55fr) minmax(0, 0.55fr)!important;
	column-gap:5px;
}
.CmTypesWrap .CmTypeTitleHead > *,
.CmTypesWrap .CmModelLink > *{
	min-width:0;
	box-sizing:border-box;
}
.CmTypesWrap .CmTypeTitleHead .CmTpSelect,
.CmTypesWrap .CmTypeTitleHead .CmTpEngine{
	width:100%;
	max-width:100%;
}

.CmTpSelect{position:relative; box-sizing:border-box; width:100%; min-height:36px; cursor:pointer; user-select:none; border:1px solid var(--cm-main); border-radius:0; background:#fff!important; padding:0; text-align:left; font-weight:bold; color:var(--cm-main); transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;}
.CmTpSelect:hover{background-color:var(--cm-aero-bg-color)!important;}
.CmTpSelectHead{min-height:34px; padding:0 8px; display:flex; justify-content:space-between; align-items:center; gap:6px;}
.CmTpSelectVal{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:inherit;}
.CmTpSelectArrow{width:14px; height:12px; flex:0 0 auto; fill:currentColor; transition:transform 0.2s ease-in-out;}
.CmTpSelect.CmTpOpen .CmTpSelectArrow{transform:rotate(180deg);}
.CmTpSelectList{position:absolute; top:calc(100% + 2px); left:0; right:auto; width:max-content; min-width:100%; max-width:min(90vw, 320px); max-height:280px; overflow-x:hidden; overflow-y:auto; background:#fff!important; border:1px solid var(--cm-main); border-radius:0; display:none; z-index:120; box-shadow:0 4px 12px rgba(0,0,0,0.18); scrollbar-color:var(--cm-main) #f5f5f5; box-sizing:border-box;}
.CmTpSelect.CmTpOpen .CmTpSelectList{display:block;}
.CmTpSelectList.CmTpListFixed{z-index:10000;}
/* Не даём absolute-списку раздувать таблицу по горизонтали */
.CmTypesWrap .CmMainTypeTable{overflow-x:hidden;}
.CmTypesWrap .CmTypeTitleWrap{overflow:visible; z-index:5;}
.CmTpSelectOpt{padding:8px 12px; text-align:left; color:#585858; font-weight:normal; font-size:13px; background:#fff!important; white-space:nowrap;}
.CmTpSelectOpt:hover{background-color:var(--cm-aero-bg-color)!important; color:var(--cm-main);}
.CmTpSelect.CmTpHasValue{background-color:var(--cm-aero-bg-color)!important; color:var(--cm-main); box-shadow:inset 0 0 0 1px var(--cm-main);}
.CmTpSelect.CmTpHasValue:hover{background-color:var(--cm-aero-bg-color)!important; color:var(--cm-main);}
.CmTpSelect.CmTpOpen.CmTpHasValue{background-color:#fff!important; color:var(--cm-main);}
.CmTpEngine{width:100%!important; max-width:100%; height:36px!important; box-sizing:border-box!important; padding:0 12px!important; margin:0!important; border:1px solid var(--cm-main)!important; border-radius:0!important; background:#fff!important; color:var(--cm-main)!important; font-size:13px!important; font-weight:bold!important; transition:box-shadow 0.2s ease-in-out!important;}
.CmTpEngine::placeholder{color:#b1b1b1; font-weight:normal;}
.CmTpEngine:hover{box-shadow:inset 0 0 5px 0 var(--cm-light-bg-color);}
.CmTpEngine:focus{outline:none; box-shadow:inset 0 0 5px 0 var(--cm-light-bg-color);}

/* Строки таблицы — без зебры, фон как у блока */
.CmTypesWrap .CmTypeListWrap{background:transparent; transition:background-color 0.15s ease-in-out;}
.CmTypesWrap .CmTypeListWrap:hover,
.CmTypesWrap .CmTypeListWrap:hover .CmModelLink{background-color:var(--cm-aero-bg-color);}
.CmTypesWrap .CmModelLink{padding:8px 0; line-height:1.45; transition:background-color 0.15s ease-in-out;}
.CmTypesWrap .CmYearFull{color:#757575;}
.CmTypesWrap .CmModelNameLiter{font-weight:bold;}

/* Пустой результат */
.CmTpEmpty{display:none; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:40px 16px; text-align:center; background:#fff; border-top:1px solid #e8e8e8;}
.CmTpEmpty:not([hidden]){display:flex;}
.CmTpEmptyIco{width:42px; height:42px; fill:var(--cm-main); opacity:0.55;}
.CmTpEmptyTxt{color:var(--cm-main); font-size:16px; font-weight:600;}

/* Попап: шапка sticky внутри того же скролла, что и строки — колонки не расходятся */
.CmTypeTablePopup{
	display:flex;
	flex-direction:column;
	max-height:min(440px, calc(100vh - 160px));
	overflow:hidden;
}
.CmTypeTablePopup .CmMainTypeTable{
	flex:1 1 auto;
	min-height:0;
	overflow-x:hidden;
	overflow-y:auto;
	align-content:start;
}
.CmTypeTablePopup .CmTypeTitleWrap{
	position:sticky;
	top:0;
	z-index:4;
	background:#fff;
	border-bottom:1px solid var(--cm-light-bg-color, #e5e5e5);
	box-shadow:0 1px 0 rgba(0,0,0,0.04);
}
.CmTypeTablePopup .CmTypeTabInner{
	max-height:none;
	overflow:visible;
}
/* Список фильтра — position:fixed из JS, чтобы не клипался скроллом таблицы */
.CmTypeTablePopup .CmTpSelectList.CmTpListFixed{
	z-index:10000;
}

@media screen and (max-width:768px){
	/* Колонка i — фиксированная ширина */
	.CmTypesWrap .CmTypeTitleWrap,
	.CmTypesWrap .CmTypeListWrap{grid-template-columns:minmax(0, 1fr) 28px;}
	.CmTypesWrap .CmTypeTitlePad{display:block; padding:0; width:28px; max-width:28px; box-sizing:border-box;}
	.CmTypesWrap .CmTypeTitleHead:not(.CmComGridTab),
	.CmTypesWrap .CmModelLink:not(.CmComGridTab){
		grid-template-columns:minmax(0, 0.25fr) minmax(0, 0.9fr) minmax(0, 0.35fr) minmax(0, 0.35fr) minmax(0, 0.35fr)!important;
	}
	.CmTypesWrap .CmInfoBl{
		display:flex;
		align-items:center;
		justify-content:center;
		width:100%;
		max-width:28px;
		min-width:0;
		min-height:28px;
		padding:0;
		margin:0;
		box-sizing:border-box;
		overflow:hidden;
	}
	.CmTypesWrap .CmInfoSvgIm{width:18px; height:18px; flex:0 0 auto;}
}
@media screen and (max-width:480px){
	.CmTypesWrap .CmInfoSvgIm{width:18px; height:18px;}
}
.fxCont.CmTypesFxCont .CmTypesWrap,
.fxCont.CmTypesFxCont .CmTypeTable_mod,
.fxCont.CmTypesFxCont .CmMainTypeTable{
	max-width:100%;
	overflow-x:hidden;
	box-sizing:border-box;
}

@media screen and (max-width:960px){
	.CmTpTitleBar{width:100%; margin:0;}
}
@media screen and (max-width:768px){
	/* Селекты в одну линию: не центрировать по высоте колонки с подписью Engine */
	.CmTypesWrap .CmTypeTitleHead{align-items:start;}
	.CmTypesWrap .CmLiterTitTxt,
	.CmTypesWrap .CmModelTitTxt,
	.CmTypesWrap .CmYearTitTxt,
	.CmTypesWrap .CmTonTitTxt{
		align-self:start;
		align-items:flex-start;
	}
	.CmTypesWrap .CmHpLitCylWr,
	.CmTypesWrap .CmDriveBlTit{
		align-self:center;
		align-content:center;
		align-items:flex-start;
		justify-content:flex-start;
		justify-items:start;
		text-align:left;
	}
	.CmTypesWrap .CmModelTitTxt > b{display:block; width:100%;}
	/* Подпись Engine под Model на узких экранах не нужна */
	.CmTypesWrap div.CmEngMobBlock{display:none!important;}
}
@media screen and (max-width:480px){
	.CmTypesWrap div.CmLiterTitTxt,
	.CmTypesWrap div.CmModelNameLiter{display:flex !important; align-items:flex-start !important;}
	.CmTypesWrap div.CmLitMobBl,
	.CmTypesWrap div.CmLiterMobTxt{display:none !important;}
	.CmTypesWrap .CmTypeTitleHead:not(.CmComGridTab),
	.CmTypesWrap .CmModelLink:not(.CmComGridTab){
		grid-template-columns:minmax(0, 0.55fr) minmax(0, 1.4fr) minmax(0, 0.6fr) minmax(0, 0.8fr) !important;
	}
	.CmTypesWrap .CmTypeTitleHead{align-items:start;}
	.CmTpTitleBar{gap:8px; padding:4px 6px 4px 0;}
	.CmTpTitleBar .CmBrTitleSearchWrap{padding:0 6px 2px 10px;}
	.CmTpCount{font-size:12px;}
	.CmTpReset{height:30px; margin:0; padding:0 8px; font-size:11px;}
	.CmTpSelect{min-height:32px; width:100%;}
	.CmTpSelectHead{min-height:30px; padding:0 6px;}
	.CmTpSelectVal{font-size:11px;}
	.CmTpSelectOpt{padding:6px 8px; font-size:12px;}
	.CmTpEngine{height:32px!important; font-size:12px!important;}
	.CmTpEmptyTxt{font-size:14px;}
}

/* Попап моделей — выравнивание контента с title bar */
.fxCont.CmTypesFxCont{
	max-width:calc(100vw - 24px)!important;
	box-sizing:border-box!important;
	align-items:stretch!important;
	padding:16px 12px 12px!important;
}
.fxModal.CmTypesFxModal{
	max-width:calc(100vw - 24px);
}
.fxCont.CmTypesFxCont .CmTpTitleBar{
	width:100%!important;
	max-width:100%!important;
	margin:0 0 8px 0!important;
	padding:6px 10px!important;
	box-sizing:border-box;
}
.fxCont.CmTypesFxCont .CmTpTitleBar .CmBrTitleSearchWrap,
div.fxCont.CmTypesFxCont .CmTpTitleBar .CmBrTitleSearchWrap{
	margin:0!important;
	width:auto;
	padding:0!important;
	background:transparent;
	border:none;
	box-shadow:none;
}
.fxCont.CmTypesFxCont .CmTpCount{margin:0 4px 0 auto;}
.fxCont.CmTypesFxCont .CmTpReset{margin:0;}
.fxCont.CmTypesFxCont .CmTypesWrap{
	width:100%!important;
	max-width:100%!important;
	margin:0!important;
	padding:0!important;
	align-items:stretch!important;
	align-self:stretch!important;
	background:transparent;
	box-sizing:border-box;
}
.fxCont.CmTypesFxCont .CmTypeTable_mod{
	width:100%!important;
	max-width:100%!important;
	margin-top:0;
	box-sizing:border-box;
}

@media screen and (max-width:768px){
	/* На мобилке — почти на всю ширину, с боковым отступом 15px */
	.fxModal.CmTypesFxModal,
	.fxOverlay:has(.CmTypesFxCont) > .fxModal{
		width:calc(100% - 30px)!important;
		max-width:calc(100% - 30px)!important;
		margin:0 15px!important;
	}
	.fxCont.CmTypesFxCont,
	.fxOverlay:has(.CmTypesFxCont) .fxCont.CmTypesFxCont{
		width:100%!important;
		max-width:100%!important;
		min-width:0!important;
		margin:0!important;
		padding:12px 8px 10px!important;
		border-radius:0!important;
	}
	.fxCont.CmTypesFxCont .CmTpTitleBar{padding:6px 8px!important;}
}