.sp-archive-hero{
padding:20px 0;
background:linear-gradient(135deg,#eff6ff,#ffffff);
}

.sp-archive-wrap{
max-width:1280px;
margin:auto;
padding:0 20px;
}

.sp-archive-grid{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:50px;
align-items:center;
}

.sp-archive-title{
font-size:28px;
line-height:1.1;
font-weight:900;
margin-bottom:20px;
color:#0f172a;
}

.sp-archive-sub{
font-size:17px;
line-height:1.9;
color:#64748b;
margin-bottom:30px;
}

.sp-archive-stats{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-bottom:30px;
}

.sp-archive-stat{
background:#fff;
padding:18px 22px;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,.04);
}

.sp-archive-stat strong{
display:block;
font-size:28px;
font-weight:900;
color:#2563eb;
}

.sp-archive-search{
height:64px;
width:100%;
border:none;
border-radius:20px;
padding:0 24px;
font-size:16px;
background:#fff;
box-shadow:0 10px 25px rgba(0,0,0,.05);
outline:none;
}

.sp-archive-image img{
width:100%;
border-radius:32px;
box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.sp-letter-filter{
display:flex;
gap:10px;
flex-wrap:wrap;
margin:40px 0;
}

.sp-letter-btn{
width:44px;
height:44px;
border-radius:14px;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
cursor:pointer;
box-shadow:0 8px 18px rgba(0,0,0,.04);
transition:.2s;
}

.sp-letter-btn:hover,
.sp-letter-btn.active{
background:#2563eb;
color:#fff;
}

.sp-seo-block{
margin-top:70px;
background:#fff;
padding:40px;
border-radius:30px;
box-shadow:0 10px 30px rgba(0,0,0,.04);
line-height:1.9;
}

@media(max-width:1100px){

/*
.sp-store-grid{
grid-template-columns:repeat(3,1fr);
}
*/

.sp-archive-grid{
grid-template-columns:1fr;
}

}

@media(max-width:768px){

.sp-archive-title {
font-size: 20px;
}

.sp-archive-sub p {
    font-size: 14px;
}

.sp-archive-stat {
    font-size: 14px;
}

.sp-archive-stat strong {
    font-size: 20px;
}

}