.CmSctWrap{width:100%; padding-top:40px; user-select:none;}
.CmSctGrid{display:grid; grid-template-columns:repeat(6, 1fr); gap:15px; padding-bottom:15px; position:relative;}
.CmSctTit{text-align:center; margin:25px auto 40px auto; color:var(--cm-title); font-family:var(--cm-title-family, sans-serif); border-bottom:1px solid var(--cm-line); text-transform:uppercase; font-weight:500; padding:10px; margin-top:10px!important; line-height:normal!important; max-width:50%;}
.CmSctTit b{color:var(--cm-main);}
.CmSctFx{
	overflow: visible;
	opacity: 1;
	visibility: visible;
	color: var(--cm-text-color); 
	font-size: var(--cm-text-size); 
	font-family: var(--cm-text-family); 
	display:flex; 
	flex-direction:column; 
	position:relative; 
	min-height:200px; 
	background:linear-gradient(330deg, #e9e9e9, #fbfbfb);
	padding:15px 0; 
	border-radius:8px; 
	box-shadow:0 2px 5px rgba(0, 0, 0, 0.1); 
	border:1px solid #dfdfdf; 
	transform: translateY(0);
	transition: 
		opacity 0.5s ease-in-out,
		visibility 0.5s ease-in-out,
		max-height 0.5s ease-in-out,
		transform 0.5s ease-in-out;
}
.CmSctFx:hover .CmSctNmHov{opacity:0; visibility:hidden;}
.CmSctFx:hover{	background:#fff; }
.CmSctFx:hover .CmSctSubs{opacity:1;
	pointer-events:auto;
	transform:translateX(-50%) translateY(0);
	-webkit-transform:translateX(-50%) translateY(0);
}
.CmSctHidden {
	position: absolute !important;
	opacity: 0;
	visibility: hidden;
	max-height: 0 !important;
	transform: translateY(-20px);
	overflow: hidden;
	pointer-events: none;
	transition-delay: 0ms !important;
}

.CmSctFx:hover .CmSctSubs,
.CmSctFx.search-match .CmSctSubs{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); -webkit-transform:translateX(-50%) translateY(0);}
.CmSctSa{display:block; padding:8px 12px; color:#333; text-align:center; text-decoration:none; transition:background-color; opacity:1; }
.CmSctMa {
	display: flex; 
	padding: 10px 10px; 
	justify-content: center; 
	text-align: center; 
	background-color: var(--cm-dark-bg-color); 
	text-decoration: none; 
	color: #fff!important;
	font-weight: bold;
}
.CmSctImg {
	display:flex; 
	margin:0 auto; 
	width:160px; 
	height:160px; 
	filter: hue-rotate(var(--cm-img-hue-rotate)) brightness(var(--cm-img-brightness)) contrast(var(--cm-img-contrast)) saturate(var(--cm-img-saturate)); 
}
.CmSctLn{width:85%; height:1px; border-top:1px solid #fff; background-color:#cccccc; margin:10px auto; transition:background-color 0.3s ease-in-out;}
.CmSctName{opacity:1;  visibility:visible;  transition:opacity 0.3s ease, visibility 0.3s ease; font-weight:bold; padding:10px 10px; min-height:40px; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--cm-text-color);}
.CmSctSubs {
    font-size: var(--cm-text-size);
    min-width: 100%;
    max-width: 108%;
    position: absolute;
    bottom: calc(0% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(20px); 
    -webkit-transform: translateX(-50%) translateY(20px);
    background: rgba(255, 255, 255, 0.90);
    border-top: 1px solid #ffffff;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    z-index: 10;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
    padding: 0px 0px 10px 0px;
}

.CmSctFx:hover .CmSctSubs {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    -webkit-transform: translateX(-50%) translateY(0);
}

.CmSctFx.search-match .CmSctName {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.CmSctSubs a:hover {background: var(--cm-main); color: #fff!important;}
#CmBtnMore{color:inherit; text-decoration:none; font-weight:bold;}
#CmBtnMore span {font-family: var(--cm-text-family);}
#CmBtnMoreSvg { margin-left: 10px; transition: transform 0.3s ease; }
#CmBtnMoreSvg.up { transform: rotate(180deg); }


/* FAST SEARCH INPUT */
.CmPtsSrchCon {
	display:flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding-bottom: 20px;
	position:relative;
}
.CmPtsConIn{position:absolute; left:0px; top:0px; margin-top:14px;}
.CmPtsInpGr{position:relative; width:fit-content;}
.CmPtsSrcInp{width:190px; height:18px; padding:10px 35px 12px 20px; border:solid 1px var(--cm-main); font-size:20px; color:var(--cm-main); cursor:pointer; transition:all 0.2s ease-in-out;}
.CmPtsSrcInp:hover{box-shadow:inset 0 0 5px 0px var(--cm-light-bg-color);}
.CmPtsSrcInp:focus,
.CmPtsSrcInp:valid {
  outline: none;
  background: #fff;
  box-shadow:inset 0 0 5px 0px var(--cm-light-bg-color);
}
.CmPtsSrcInp:focus ~ .CmPtsInpLbl,
.CmPtsSrcInp:valid ~ .CmPtsInpLbl {
  transform: translateY(-50%) scale(0.8);
  background-color: #fff;
  color: var(--cm-main);
  padding: 0 5px;
}
.CmPtsConIn svg.CmPtsInpSvg {
  display: flex;
  position: absolute;
  right: -5px;
  top: 1px;
  width: 40px;
  fill: var(--cm-main);
  transition: opacity 0.2s ease-in-out;
  border-left: 1px solid #e0e0e0;
  pointer-events: none;
}

.CmPtsInpLbl {
  display: flex;
  position: absolute;
  left: 12px;
  top: 0px;
  color: var(--cm-main);
  font-family: var(--cm-text-family);
  pointer-events: none;
  transform: translateY(1rem);
  transition: all 0.2s ease-in-out;
}
.CmLoSrcInp:focus ~ .CmPtsInpLbl,
.CmLoSrcInp:valid ~ .CmPtsInpLbl {
  transform: translateY(-25%) scale(0.8);
  background-color: #fff;
  color: var(--cm-main);
  padding: 0 5px;
}
.CmSvgRem {
	opacity: 0;
	position: absolute;
	width: 22px;
	height: 22px;
	top: 10px;
	right: 10px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.CmSvgRem.visible {
    opacity: 1;
	transition: opacity 0.2s ease;
}

#CmPtsTtl {
  font-size: 25px;
  text-align: center;
  color: var(--cm-title);
  font-family: var(--cm-title-family, sans-serif);
  padding: 25px;
  text-transform: uppercase;
  font-weight: 500;
  position: absolute;
  left: 50%;
  bottom: 45%;
  transform: translateX(-50%);
}
.CmPtsSrcInp:focus ~ .user-label,
.CmPtsSrcInp:valid ~ .user-label {
  transform: translateY(-25%) scale(0.8);
  background-color: #fff;
  color: var(--cm-main);
  padding: 0 5px;
}

.CmPtsConIn svg.CmSrchSvg {
  display: flex;
  position: absolute;
  right: -5px;
  top: 3px;
  width: 40px;
  fill: var(--cm-main);
  transition: opacity 0.2s ease-in-out;
  border-left: 1px solid #e0e0e0;
  pointer-events: none;
}

.CmNoResMess {
    display: none; /* Скрыт по умолчанию */
    height: 60px;
    color: var(--cm-main);
    font-size: 24px;
    text-align: center;
    padding: 50px;
    grid-column: 1 / -1; /* Занимает всю ширину грида */
    font-family: var(--cm-text-family);
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* Плавное появление */
}
.CmNoResMess.visible {
    display: block;
    opacity: 1;
}
#CmSrchSvgID { transform: translate(5px, 8px); }






@media (max-width:1320px){
	.CmSctGrid{
		grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
	}
	.CmSctTit{max-width:45%;}
}

@media (max-width:1024px){
	.CmPtsConIn { position:relative; }
	.CmPtsSrchCon{ flex-direction: column;}
	.CmSctTit{max-width:100%;}
}

@media (max-width:768px){
	.CmSctGrid{
		grid-template-columns:repeat(3, 1fr); 
		gap:10px;
	}
}
@media (max-width:525px){
	.CmSctGrid{
		grid-template-columns:repeat(2, 1fr); 
		gap:10px;
	} 
}
@media (max-width:350px){
	.CmSctGrid{
		grid-template-columns:repeat(1, 1fr); 
		gap: 10px; 
		width: 200px; 
		margin: 0 auto;
	} 
}
@media (max-width:320px){
	.CmSctGrid{ 
		grid-template-columns: repeat(1, 1fr); 
		gap: 10px; 
		width: 200px; 
		margin: 0 auto;
	}
}