.cs-section-wrapper{

background:#fff;

border:1px solid #e8edf3;

border-radius:10px;

padding:24px;

margin:30px 0;

box-shadow:0 1px 4px rgba(15,23,42,.04);

font-size:15px;
line-height:1.7;

overflow:hidden;

}





.cs-section-wrapper h2{
font-size:18px;
font-weight:600;
margin:0 0 25px;
}


.cs-intro-section{

margin:0 0 30px;

padding:0 24px;

box-sizing:border-box;

}

.cs-intro-section h2{

font-size:24px;

font-weight:700;



line-height:1.18;

margin:0 0 18px;

color:#2f3542;

}


.cs-intro-section > p{

margin:0 0 34px;

font-size:15px;

line-height:1.75;

color:#444;

}

.cs-intro-section ul{

margin:14px 0 0;

padding-left:18px;

}

.cs-intro-section li{

margin-bottom:6px;

line-height:1.65;

}

.cs-section-wrapper p{
font-size:15px;
line-height:1.75;
margin:0 0 18px;
color:#444;
}





.cs-section-title{

display:flex;
align-items:center;
gap:8px;

font-size:18px;
font-weight:600;
line-height:1.25;

margin:0 0 18px;

color:#2f3542;

}

.cs-section-title::after{
content:"";
flex:1;
height:2px;
background:#dbeafe;
border-radius:2px;
}

.cs-subsection-title{

display:flex;
align-items:center;

font-size:17px;
font-weight:600;

margin:18px 0 12px;

color:#4b5563;

}

.cs-tech-table{
width:100%;
border-collapse:separate;
border-spacing:0;
background:#fff;
border:1px solid #e6eaf0;
border-radius:8px;
font-size:15px;
overflow:hidden;
}




.cs-section-wrapper p,
.cs-section-wrapper li{
font-size:15px;
line-height:1.75;
}

.cs-section-wrapper p{
margin:0 0 18px;
color:#444;
}

.cs-section-wrapper ul{
margin-top:12px;
margin-bottom:12px;
}



.cs-tech-table tr:nth-child(even){
background:#fafafa;
}

.cs-tech-table td{
padding:7px 10px;
border-bottom:1px solid #eef2f7;
vertical-align:top;
}

.cs-tech-table td:nth-child(1),
.cs-tech-table td:nth-child(3){

width:16%;
font-weight:400;
font-size:14px;
color:#374151;
letter-spacing:0;
white-space:nowrap;

background:#f8fafc;

}


.cs-tech-table td:nth-child(3){
    padding-left:28px;
}

.cs-tech-table td:nth-child(2),
.cs-tech-table td:nth-child(4){
width:34%;
}


.cs-badge{

display:inline-block;

}

.models-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px 30px;

margin:0;
padding:18px 20px;

list-style:disc inside;

background:#fff;
border:1px solid #edf2f7;
border-radius:8px;

height:320px;
max-height:320px;

overflow-y:auto;
overflow-x:hidden;

scrollbar-gutter:stable;

}



#oemList{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:6px 24px;

height:110px;
max-height:110px;

padding:16px 18px;
font-size:15px;
line-height:1.8;

overflow-y:auto;
overflow-x:hidden;
}




#modelList{
    height:320px;
    max-height:320px;
}


.cs-card-row{

display:flex;
justify-content:center;
align-items:stretch;
flex-wrap:wrap;

width:100%;
max-width:820px;

margin:0;

gap:18px;

}

/* ==========================================
   BENEFITS LAYOUT
========================================== */

.cs-benefits-title{

display:flex;
align-items:center;
gap:8px;

font-size:14px;
font-weight:400;
line-height:1.2;

margin:0 0 10px;

color:#374151;

letter-spacing:0;

}

.cs-benefits-title::after{

content:"";
flex:1;
height:2px;
background:#dbeafe;
border-radius:2px;

}

.cs-benefits-layout{

display:grid;

grid-template-columns:minmax(0,1fr) auto;

gap:34px;

align-items:start;

margin-top:4px;

}

.cs-benefits-left{

min-width:0;

padding-top:0;

margin-top:-4px;

}

.cs-benefits-left ul{

margin:0;

padding-left:18px;

}

.cs-benefits-left li{

font-size:15px;

line-height:1.75;

margin-bottom:8px;

color:#444;

}

.cs-benefits-right{

display:flex;

align-items:flex-start;

justify-content:flex-end;

}

.cs-card{

flex:0 0 250px;

min-height:220px;

padding:16px;

background:#f8fbff;

border:1px solid #d9e6f5;

border-radius:10px;

box-shadow:0 2px 8px rgba(15,23,42,.04);

box-sizing:border-box;

transition:all .20s ease;

}

.cs-card:hover{

transform:translateY(-4px);

background:#ffffff;

border-color:#9fc4ff;

box-shadow:0 12px 30px rgba(15,23,42,.15);

}

.cs-card h2{

font-size:14px;
line-height:1.3;
font-weight:600;
line-height:1.25;

font-weight:600;

line-height:1.30;

margin:0 0 10px;

color:#2f3542;

}

.cs-card ul{
margin:12px 0 0;
padding-left:18px;
}

.cs-card li{

font-size:13px;
line-height:1.40;
margin-bottom:4px;

}

.cs-search{
width:100%;
max-width:360px;
padding:12px 14px;
margin-bottom:18px;
border:1px solid #d9e2ec;
border-radius:8px;
background:#fff;
font-size:14px;
color:#374151;
box-sizing:border-box;
transition:all .2s ease;
}

.cs-search:focus{
outline:none;
border-color:#0d6efd;
box-shadow:0 0 0 3px rgba(13,110,253,.10);
}
@media(max-width:1100px){

.cs-benefits-layout{

display:block;

}

.cs-benefits-right{

margin-top:24px;

display:block;

}

}

@media(max-width:900px){

.cs-card{
flex:1 1 calc(50% - 20px);
}

}

@media(max-width:600px){

.cs-card{
flex:1 1 100%;
}

}





@media(max-width:900px){
.models-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:600px){
.models-grid{
grid-template-columns:1fr;
}
}


.cs-section-wrapper strong,
.cs-section-wrapper b{
    color:#111;
}




/* OEM + MODELS като една обща секция */


.cs-oem-section .cs-section-title{
margin-bottom:14px;
}

.cs-models-section .cs-section-title{
margin-top:8px;
}


/* FAQ */

.cs-section-wrapper h3{

font-size:16px;
font-weight:600;
line-height:1.35;

margin:16px 0 6px;

color:#2f3542;

}

.cs-faq-answer{

font-size:14px;

line-height:1.8;

margin:0 0 20px;

color:#6b7280;

padding-bottom:18px;

border-bottom:1px solid #eef3f8;


}
.cs-faq-answer:last-child{

border-bottom:none;

padding-bottom:0;

margin-bottom:0;

}

.cs-tech-table td:nth-child(2){
    padding-right:22px;
}

.cs-tech-table td:nth-child(3){
    padding-left:22px;
}

.cs-compat-intro{

background:#f8fbff;

border:1px solid #e6eef9;

border-radius:8px;

padding:18px 20px;

margin:18px 0 18px;

line-height:1.8;

font-size:14px;

color:#394150;

}

.cs-counter{
    white-space:nowrap;
}



.cs-section-wrapper h3:first-of-type{

margin-top:0;

}

.cs-warning-box{

background:#f8fbff;

border:1px solid #e6eef9;
border-left:4px solid #3b82f6;

border-radius:8px;

padding:18px 20px;

margin-top:18px;

}


.cs-faq-wrapper{

background:#fcfdff;

}

.cs-faq-intro{

font-size:14px;

color:#7a8697;

line-height:1.75;

margin:0 0 28px;

}

/* HERO BANNER */

.cs-hero-banner{

position:relative; 

margin:0 0 22px;

border-radius:10px;

overflow:hidden;

background:#fff;

border:none;

box-shadow:none;

}

.cs-hero-banner img{

display:block;

width:100%;

height:auto;

}

/* ==========================================
   HERO BADGES
========================================== */

.cs-hero-badges{

position:absolute;

right:24px;
top:24px;
bottom:auto;

display:flex;

flex-wrap:wrap;

justify-content:flex-end;

align-items:center;

gap:6px;

max-width:360px;

z-index:20;

}


.cs-hero-badges .cs-badge:hover{

background:#dfeeff;

border-color:#6ea8ff;

transform:translateY(-2px);

box-shadow:0 6px 16px rgba(0,66,154,.22);

}

.cs-hero-badges .cs-badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:7px 14px;

background:#e8f1ff;

border:1px solid #7fb0ff;

border-radius:18px;

font-size:12px;

font-weight:700;

line-height:1;

color:#00429a;

white-space:nowrap;

box-shadow:0 3px 10px rgba(0,66,154,.18);

transition:all .20s ease;

}