/* گرید */

.w2685-grid{
display:grid;
gap:20px;
margin-top:20px;
}

@media(min-width:1200px){
.w2685-grid{
grid-template-columns:repeat(4,1fr);
}
}

@media(min-width:900px) and (max-width:1199px){
.w2685-grid{
grid-template-columns:repeat(4,1fr);
}
}

@media(min-width:600px) and (max-width:899px){
.w2685-grid{
grid-template-columns:repeat(3,1fr);
}
}

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

/* عنوان */

.w2685-title{
margin-top:40px;
font-size:20px;
font-weight:700;
}

/* کارت */

.w2685-item{

position:relative;
background:#fff;
border:1px solid #eee;
border-radius:3px;
padding:12px;
text-align:center;
transition:all .25s ease;

}

.w2685-item:hover{
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transform:translateY(-3px);
}

.w2685-item img{

width:100%;
height:160px;
object-fit:cover;
border-radius:8px;
margin-bottom:10px;

}

.w2685-item h4{
font-size:12px;
line-height:1.7;
margin:0;
color:#1F2937;
}

/* دکمه حذف */

.w2685-remove{

position:absolute;
top:12px;
right:12px;
width:28px;
height:28px;

border:none;
border-radius:50%;

background:#ff3b3b;
color:#fff;

font-size:18px;
cursor:pointer;

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

transition:all .2s ease;

}

.w2685-remove:hover{
background:#d60000;
transform:scale(1.1);
}

/* toast */

.w2685-toast{

position:fixed;
bottom:30px;
right:30px;

background:#222;
color:#fff;

padding:10px 18px;
border-radius:6px;

font-size:14px;

z-index:9999;

animation:w2685fade .3s ease;

}

@keyframes w2685fade{
from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:translateY(0);}
}

/* دکمه علاقه مندی */

.w2685-btn{
border:none;
background:none;
cursor:pointer;
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
}

.w2685-icon{
width:28px;
height:28px;
}

.w2685-loader{

position:absolute;
width:20px;
height:20px;

border:3px solid #ddd;
border-top-color:#ff0000;

border-radius:50%;

animation:wspin .7s linear infinite;

opacity:0;

}

@keyframes wspin{
to{transform:rotate(360deg);}
}

.w2685-btn.loading .w2685-loader{
opacity:1;
}

.w2685-btn.loading .w2685-icon{
opacity:0;
}