.stl-wrap{max-width:100%;margin:0 auto 24px;box-sizing:border-box}
.stl-wrap *{box-sizing:border-box}
.stl-stage{position:relative;line-height:0}
.stl-image{width:100%;height:auto;display:block}
.stl-dot{position:absolute;transform:translate(-50%,-50%);width:32px;height:32px;padding:0;border-radius:50%;background:#fff;color:#7b4a2a;font:700 15px/32px Arial,sans-serif;text-align:center;border:0;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35);z-index:2;transition:transform .15s}
.stl-dot:hover,.stl-dot.on{transform:translate(-50%,-50%) scale(1.18);background:#7b4a2a;color:#fff}
.stl-pop{position:absolute;z-index:10;width:210px;background:#fff;border-radius:8px;padding:10px;box-shadow:0 6px 24px rgba(0,0,0,.3);line-height:1.3;text-align:center}
.stl-pop[hidden]{display:none}
.stl-pop-img img{width:100%;height:auto;border-radius:6px;display:block}
.stl-pop-name{display:block;margin-top:8px;font-weight:600;color:#333;text-decoration:none;font-size:14px}
.stl-pop .stl-price{margin:4px 0 8px;font-size:14px;color:#7b4a2a}
.stl-x{position:absolute;top:2px;right:6px;background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:#666;z-index:3;padding:2px 4px}
.stl-btn{display:inline-block;background:#7b4a2a;color:#fff!important;padding:7px 14px;border-radius:5px;font-size:13px;text-decoration:none;white-space:nowrap}
.stl-btn:hover{opacity:.88}
.stl-list{margin-top:14px}
.stl-row{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;padding:8px 10px;border:1px solid #e6e0da;border-radius:8px;margin-bottom:8px;background:#fff;transition:background .15s}
.stl-row.on{background:#f6efe9}
.stl-num{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid #7b4a2a;color:#7b4a2a;font:700 13px/24px Arial,sans-serif;text-align:center}
.stl-thumb{flex:0 0 46px;line-height:0}
.stl-thumb img{width:46px;height:46px;object-fit:cover;border-radius:5px;display:block}
.stl-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333;text-decoration:none;font-weight:600;font-size:14px}
.stl-row .stl-price{flex:0 0 auto;font-size:14px;color:#7b4a2a;white-space:nowrap}
.stl-row .stl-price del{opacity:.5;margin-right:4px}
.stl-row .stl-btn{flex:0 0 auto}
@media(max-width:600px){
 .stl-dot{width:28px;height:28px;font-size:13px;line-height:28px}
 .stl-pop{width:170px;padding:8px}
 .stl-row{gap:6px;padding:6px}
 .stl-thumb,.stl-thumb img{flex-basis:38px;width:38px;height:38px}
 .stl-name,.stl-row .stl-price{font-size:12px}
 .stl-row .stl-btn{padding:6px 9px;font-size:12px}
 .stl-row .stl-price del{display:none}
}
@media(max-width:768px){
 .stl-list{padding-left:12px;padding-right:12px}
}
@media(min-width:769px){
 .stl-wrap{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:28px;max-width:1100px}
 .stl-stage{flex:0 0 42%;max-width:42%}
 .stl-list{flex:1 1 auto;min-width:0;margin-top:0}
}