.su-box{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    max-width:800px;
    width:calc(100% - 40px);
    margin:20px auto;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.su-top{
padding:12px 18px;
display:flex;
justify-content:space-between;
align-items:center;
font-size:14px;
font-weight:600;
}

.su-top.success{
background:#ecfdf5;
color:#166534;
border-bottom:1px solid #d1fae5;
}

.su-top.lock{
background:#fffbeb;
color:#92400e;
border-bottom:1px solid #fde68a;
}

.su-progress{
height:6px;
background:#eee;
}

.su-progress-bar{
height:100%;
background:#22c55e;
transition:.4s;
}

.su-content{
display:flex;
align-items:center;
gap:18px;
padding:18px;
}

.su-image{
width:90px;
position:relative;
flex-shrink:0;
}

.su-image img{
width:90px;
height:90px;
object-fit:contain;
}

.su-discount{
position:absolute;
top:-6px;
left:-6px;
background:#ef4444;
color:#fff;
padding:3px 8px;
border-radius:20px;
font-size:12px;
font-weight:bold;
}

.su-detail{
flex:1;
}

.su-detail h3{
margin:0 0 8px;
font-size:18px;
}

.su-detail p{
margin:0;
color:#666;
font-size:14px;
line-height:1.8;
}

.su-price{
margin-top:10px;
display:flex;
gap:12px;
align-items:center;
}

.su-price del{
color:#999;
font-size:14px;
}

.su-price ins{
text-decoration:none;
color:#dc2626;
font-size:22px;
font-weight:bold;
}

.su-detail small{
display:block;
margin-top:8px;
color:#16a34a;
font-weight:bold;
}

.su-action{
width:170px;
text-align:center;
}

.su-action .button{
width:100%;
border-radius:8px;
padding:10px;
}

.su-added{
margin-top:8px;
color:#16a34a;
font-size:13px;
font-weight:bold;
}

@media(max-width:768px){

.su-content{
flex-direction:column;
text-align:center;
}

.su-action{
width:100%;
}

.su-image{
width:120px;
}

.su-image img{
width:120px;
height:120px;
}

.su-top{
flex-direction:column;
gap:8px;
}

}