.wos-wrapper{
margin-top:40px;
}

.wos-heading{
font-size:32px;
margin-bottom:25px;
}

.wos-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.wos-card{
border:1px solid #ddd;
padding:10px;
border-radius:10px;
background:#fff;
}

.wos-card img{
width:100%;
display:block;
border-radius:8px;
}

.wos-info{
padding-top:10px;
}

.wos-code{
font-weight:600;
}

.wos-price{
margin-top:5px;
color:#4d6b2f;
font-weight:700;
}

.wos-hidden{
display:none;
}

.wos-load-more-wrap{
text-align:center;
margin-top:30px;
}

#wos-load-more{
padding:12px 25px;
cursor:pointer;
}
.wos-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.wos-card{
border:1px solid #ddd;
padding:15px;
border-radius:12px;
background:#fff;
}

.wos-image img{
width:100%;
display:block;
border-radius:10px;
}

.wos-code{
font-weight:600;
margin-top:10px;
}

.wos-price{
margin-top:8px;
font-weight:700;
color:#6b7d46;
}

.wos-qty{
display:flex;
align-items:center;
gap:10px;
margin-top:15px;
}

.wos-minus,
.wos-plus{
width:35px;
height:35px;
cursor:pointer;
}

.wos-quantity{
width:60px;
text-align:center;
}

.wos-hidden{
display:none;
}

.wos-load-wrap{
text-align:center;
margin-top:30px;
}

@media(max-width:768px){

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

}









.wos-qty{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:15px;
}

.wos-quantity{
    width:60px !important;
    min-width:60px !important;
    height:36px;
    text-align:center;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    padding:5px;
}

.wos-plus,
.wos-minus{
    width:36px;
    height:36px;
    cursor:pointer;
}


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

.wos-wrapper{
display:grid;
grid-template-columns:1fr 320px;
gap:30px;
align-items:start;
}

.wos-left{
width:100%;
}

.wos-summary{
position:sticky;
top:20px;
background:#fff;
border:1px solid #e5e5e5;
border-radius:16px;
padding:20px;
box-shadow:0 4px 20px rgba(0,0,0,.05);
}

.wos-summary h3{
margin-bottom:15px;
}

.wos-row-summary{
margin-bottom:10px;
font-size:15px;
}

/* =========================
DESIGN CARDS
========================= */

.wos-card{
border:1px solid #eee;
border-radius:12px;
background:#fff;
transition:.3s;
}

.wos-card:hover{
transform:translateY(-3px);
}

.wos-image{
height:180px;
overflow:hidden;
border-radius:10px;
}

.wos-image img{
width:100%;
height:100%;
object-fit:cover;
}

.wos-code{
margin-top:10px;
font-weight:600;
}

.wos-price{
font-size:15px;
}

/* =========================
SELECTED LIST
========================= */

.wos-selected-list{
margin:15px 0;
padding:15px;
background:#fafafa;
border-radius:10px;
}

.wos-selected-item{
margin-bottom:8px;
}

/* =========================
BUTTON
========================= */

#wos-order-btn{
width:100%;
padding:14px;
border:none;
border-radius:10px;
cursor:pointer;
}

#wos-order-btn:disabled{
opacity:.6;
cursor:not-allowed;
}

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

@media(max-width:992px){

.wos-wrapper{
    grid-template-columns:1fr;
}

}

@media(max-width:768px){

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

}






/* ===== PREMIUM SUMMARY ===== */

.wos-wrapper{
    display:flex;
    gap:40px;
    align-items:flex-start;
}

.wos-left{
    flex:1;
}

.wos-summary{
    width:350px;
    position:sticky;
    top:30px;
    background:#fff;
    border-radius:20px;
    padding:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.wos-summary h3{
    font-size:30px;
    margin-bottom:25px;
    font-weight:700;
}

.wos-row-summary{
    display:flex;
    justify-content:space-between;
    margin-bottom:12px;
    font-size:16px;
}

.wos-selected-list{
    background:#f8f8f8;
    border-radius:12px;
    padding:15px;
    margin:20px 0;
}

.wos-selected-list h4{
    margin-bottom:10px;
}

.wos-selected-item{
    padding:5px 0;
    border-bottom:1px solid #ececec;
}

.wos-progress-wrap{
    margin-top:20px;
}

.wos-progress-top{
    display:flex;
    justify-content:space-between;
    margin-bottom:8px;
    font-size:14px;
    font-weight:600;
}

.wos-progress-bar{
    height:12px;
    background:#ececec;
    border-radius:50px;
    overflow:hidden;
}

.wos-progress-fill{
    height:100%;
    width:0%;
    background:#d81b60;
    transition:.3s;
}

.wos-status-badge{
    margin-top:15px;
    padding:10px;
    border-radius:10px;
    text-align:center;
    font-weight:600;
    background:#ffe8e8;
    color:#d32f2f;
}

#wos-total-amount{
    font-size:32px;
    font-weight:700;
    color:#2e7d32;
}

#wos-order-btn{
    width:100%;
    height:55px;
    border:none;
    border-radius:12px;
    margin-top:20px;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    background:#d81b60;
    color:#fff;
}

#wos-order-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
}

@media(max-width:991px){

    .wos-wrapper{
        flex-direction:column;
    }

    .wos-summary{
        width:100%;
        position:relative;
        top:auto;
    }

}