.dbp-cats{
display:flex;
gap:12px;
overflow-x:auto;
margin-bottom:15px;
justify-content:center;
align-items:center;
}

.cat-btn{
padding:10px 18px;
border:none;
background:#76460F;
border-radius:10px;
cursor:pointer;
white-space:nowrap;
color:#fff;
}

.cat-btn.active{
background: #fff;
border:1px solid #76460F;
color: #76460F;
}

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

@media(max-width:1024px){
.dbp-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:600px){
.dbp-grid{grid-template-columns:repeat(2,1fr);}
}

.dbp-card{
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
transition:.3s;
position:relative;
}

.dbp-card:hover{
transform:translateY(-6px);
}

.dbp-card img{
width:100%;
aspect-ratio:4/3;
object-fit:cover;
}

.dbp-card h3{
font-size:15px;
padding:10px;
margin:0;
}

.dbp-out{
position:absolute;
top:10px;
left:10px;
background:red;
color:#fff;
padding:4px 8px;
font-size:11px;
border-radius:6px;
}

.dbp-variation{
width:90%;
margin:5px auto;
display:block;
padding:6px;
}

.dbp-qty{
width:60px;
margin:5px 10px;
padding:6px;
}

.dbp-add{
width:90%;
margin:10px auto 15px;
display:block;
padding:10px;
background:#76460F;
color:#fff;
border:none;
border-radius:10px;
cursor:pointer;
}