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

.sp-cat-hero{
padding:20px 0 60px;

background:
linear-gradient(
135deg,
#eff6ff,
#ffffff
);
}

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

.sp-breadcrumb{
display:flex;
align-items:center;
gap:10px;

font-size:14px;

margin-bottom:30px;

color:#64748b;
}

.sp-breadcrumb a{
text-decoration:none;
color:#64748b;
}

.sp-breadcrumb a:hover{
color:#2563eb;
}

.sp-cat-hero-grid{
display:grid;
grid-template-columns:1fr 420px;
gap:60px;
align-items:center;
}

.sp-cat-title{
font-size:28px;
line-height:1.1;
font-weight:900;

margin-bottom:18px;

color:#0f172a;
}

h2 {
font-size: 20px;
text-align: left;  
}

.sp-cat-desc{
font-size:17px;
line-height:1.9;

color:#64748b;

margin-bottom:35px;
}

.sp-cat-stats{
display:flex;
gap:18px;
flex-wrap:wrap;
}

.sp-cat-stat{
background:#fff;

padding:18px 24px;

border-radius:22px;

box-shadow:
0 10px 25px rgba(0,0,0,.05);
}

.sp-cat-stat strong{
display:block;

font-size:30px;
font-weight:900;

color:#2563eb;
}

.sp-cat-image img{
width:100%;

border-radius:36px;

box-shadow:
0 22px 55px rgba(0,0,0,.08);
}

/* =========================
FILTERS
========================= */

.sp-filter-bar{
padding:30px 0;
}

.sp-filter-row{

display:grid;
grid-template-columns:1fr auto;
gap:10px;
align-items:center;

}

.sp-filter-wrap{

flex:1;

display:flex;
gap:12px;

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

flex-wrap:nowrap;

scrollbar-width:none;
-ms-overflow-style:none;

padding-bottom:4px;

}

.sp-filter-wrap::-webkit-scrollbar{
display:none;
}

.sp-filter-btn{

height:46px;

padding:0 20px;

border-radius:14px;

background:#fff;

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

white-space:nowrap;
flex-shrink:0;

text-decoration:none;

font-size:14px;
font-weight:700;

color:#0f172a;

border:1px solid #e2e8f0;

box-shadow:
0 4px 12px rgba(0,0,0,.04);

transition:.25s;

}

.sp-filter-btn:hover,
.sp-filter-btn.active{

background:#2563eb;
color:#fff;

border-color:#2563eb;

}

/* =========================
MOBILE FILTER BUTTON
========================= */

.sp-mobile-filter-btn{

display:none;

height:42px;

padding:0 14px;

border:none;

border-radius:12px;

background:#2563eb;

color:#fff;

font-size:13px;
font-weight:700;

cursor:pointer;

white-space:nowrap;

flex-shrink:0;

transition:.25s;

}

.sp-mobile-filter-btn:hover{

background:#1d4ed8;

}

/* =========================
MOBILE
========================= */

@media(max-width:991px){

.sp-filter-bar{
padding:20px 0;
}

.sp-filter-wrap{

width:100%;

overflow-x:auto;
overflow-y:hidden;
gap: 6px;
padding-bottom:4px;

}

.sp-filter-btn{

height:42px;
padding: 0 14px;

font-size:13px;

border-radius:12px;

}

.sp-mobile-filter-btn{

display:flex;
align-items:center;
justify-content:center;
}

.sp-cat-desc {
font-size: 14px;
line-height: 1.7;
margin-bottom: 15px;
}

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

.sp-cat-stat {
    padding: 12px 16px;
}

.sp-cat-hero-grid {
    gap: 10px;
}

.sp-related-head {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 18px;
}

.sp-related {
    margin-top: 30px;
}

}

@media(min-width:992px){

.sp-mobile-filter-btn{
display:none;
}

}

/* =========================
GRID
========================= */

.sp-grid-section{
padding-bottom:70px;
}

/* =========================
RELATED STORES
========================= */

.sp-related{
margin-top:50px;
}

.sp-related-head{
font-size:28px;
font-weight:900;

margin-bottom:28px;
}

.sp-related-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
}

/* =========================
SEO
========================= */

.sp-seo-block{
margin-top:80px;

background:#fff;

padding:50px;

border-radius:34px;

box-shadow:
0 10px 30px rgba(0,0,0,.04);

line-height:1.9;
}

/* =========================
FAQ
========================= */

.sp-faq{
margin-top:70px;
}

.sp-faq-title{
font-size:34px;
font-weight:900;

margin-bottom:24px;
}

.sp-faq-item{
background:#fff;

padding:24px;

border-radius:24px;

margin-bottom:16px;

box-shadow:
0 8px 20px rgba(0,0,0,.04);
}

.sp-faq-item h3{
font-size:18px;
font-weight:800;

margin-bottom:12px;
}

.sp-coupon-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;
}

@media(max-width:1100px){

.sp-coupon-grid{
grid-template-columns:repeat(2,1fr);
}

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

.sp-related-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){
    
.sp-cat-hero {
padding: 20px 0 0;
}

.sp-grid-section {
padding-bottom: 0;
}

.sp-seo-block {
margin-top: 40px;
padding: 22px;
}

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

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

.sp-cat-title {
font-size: 20px;
font-weight: 700;
}

}

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

.sp-category-layout{

display:grid;
grid-template-columns:300px 1fr;
gap:30px;
align-items:start;

}

/* =========================
SIDEBAR
========================= */

.sp-category-sidebar{

position:sticky;
top:20px;

width:100%;

}

.sp-sidebar-box{

background:#fff;

padding: 5px 22px 22px;

border-radius:18px;

margin-bottom:20px;

box-shadow:
0 8px 20px rgba(0,0,0,.04);

}

.sp-sidebar-box h4{

font-size:18px;
font-weight:800;

margin-bottom:18px;

}

.sp-sidebar-search{

width:100%;
height:48px;

padding:0 14px;

border:1px solid #e2e8f0;

border-radius:12px;

}

/* =========================
STORE LINKS
========================= */

.sp-store-scroll{

display:flex;
flex-direction:column;
gap:10px;

}

.sp-store-scroll a{

display:block;

padding:10px 14px;

border-radius:12px;

background:#f8fafc;

text-decoration:none;

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

color:#0f172a;

transition:.2s;

}

.sp-store-scroll a:hover{

background:#eff6ff;
color:#2563eb;

}

/* =========================
TOP STORES
========================= */

.sp-top-store-list{

display:flex;
flex-direction:column;
gap:10px;

}

.sp-top-store{

display:block;

padding:10px 14px;

border-radius:12px;

background:#f8fafc;

text-decoration:none;

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

color:#0f172a;

}

.sp-top-store:hover{

background:#eff6ff;
color:#2563eb;

}

/* =========================
STATS
========================= */

.sp-stat{

display:flex;
justify-content:space-between;

padding:10px 0;

border-bottom:1px solid #e5e7eb;

}

.sp-stat:last-child{

border-bottom:none;

}

/* =========================
MOBILE
========================= */

@media(max-width:991px){

.sp-category-layout{

grid-template-columns:1fr;

}

.sp-category-sidebar{

position:fixed;

top:0;
left:-320px;

width:300px;
height:100vh;

overflow-y:auto;

background:#fff;

padding:20px;

z-index:9999;

transition:.3s;

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

}

.sp-category-sidebar.active{

left:0;

}

.sp-sidebar-close{

display:block;

margin-bottom:20px;

border:none;
background:none;

font-size:24px;

cursor:pointer;

}

}

@media(min-width:992px){

.sp-sidebar-close{

display:none;

}

}

.sp-store-filter-list{

display:flex;
flex-direction:column;

gap:10px;

max-height:320px;

overflow-y:auto;

padding-right:4px;

/* Firefox */
scrollbar-width:thin;
scrollbar-color:#cbd5e1 #f8fafc;

}

/* Chrome, Edge, Safari */

.sp-store-filter-list::-webkit-scrollbar{

width:3px;

}

.sp-store-filter-list::-webkit-scrollbar-track{

background:#f8fafc;

border-radius:999px;

}

.sp-store-filter-list::-webkit-scrollbar-thumb{

background:#cbd5e1;

border-radius:999px;

}

.sp-store-filter-list::-webkit-scrollbar-thumb:hover{

background:#94a3b8;

}

.sp-store-check{

display:flex;
align-items:center;

gap:10px;

cursor:pointer;

padding:8px 0;

font-size:14px;

}

.sp-store-check input{

width:16px;
height:16px;

flex-shrink:0;

margin:0;

}

.sp-store-check span{

flex:1;

font-weight:600;

color:#0f172a;

}

.sp-store-check small{

margin-left:auto;

font-size:12px;

font-weight:700;

color:#64748b;

background:#f1f5f9;

padding:3px 8px;

border-radius:20px;

min-width:32px;

text-align:center;

}

.sp-top-store-list{
display:flex;
flex-direction:column;
gap:10px;
}

.sp-top-store{
text-decoration:none;
color:#0f172a;
font-weight:600;
}

.sp-top-store:hover{
color:#2563eb;
}