body{
background:#f5f5f3;
}

.pbd-hero{
padding:100px 5vw 60px;
}

.pbd-hero-inner{
max-width:1800px;
margin:auto;
}

.pbd-label{
font-size:12px;
letter-spacing:3px;
opacity:.6;
}

.pbd-hero h1{
font-size:72px;
line-height:1;
max-width:900px;
margin:20px 0;
font-weight:700;
}

.pbd-hero p{
font-size:20px;
max-width:700px;
opacity:.7;
}

.pbd-chips{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:40px;
}

.chip{
border:none;
padding:14px 22px;
border-radius:999px;
background:white;
cursor:pointer;
font-weight:600;
}

.chip.active{
background:#111;
color:white;
}

.pbd-toolbar{
padding:0 5vw 30px;
}

.pbd-toolbar-inner{
max-width:1800px;
margin:auto;
display:flex;
justify-content:flex-end;
}

.pbd-filters{
display:flex;
gap:16px;
}

.pbd-filter{
padding:14px 18px;
border-radius:16px;
border:none;
background:white;
min-width:220px;
}

.pbd-products-wrap{
padding:0 5vw 100px;
}

.pbd-grid{
max-width:1800px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
gap:34px;
}

.pbd-card{
background:white;
border-radius:34px;
overflow:hidden;
transition:.35s;
box-shadow:0 10px 40px rgba(0,0,0,.05);
}

.pbd-card:hover{
transform:translateY(-8px);
}

.pbd-image{
position:relative;
overflow:hidden;
aspect-ratio:1/1;
}

.pbd-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s;
}

.pbd-card:hover img{
transform:scale(1.05);
}

.pbd-overlay{
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(0,0,0,.5),transparent);
display:flex;
align-items:flex-end;
padding:30px;
opacity:0;
transition:.35s;
}

.pbd-overlay span{
color:white;
font-weight:600;
}

.pbd-card:hover .pbd-overlay{
opacity:1;
}

.pbd-content{
padding:26px;
}

.pbd-meta{
font-size:12px;
text-transform:uppercase;
letter-spacing:2px;
opacity:.5;
margin-bottom:10px;
}

.pbd-content h3{
font-size:28px;
margin:0 0 20px;
line-height:1.2;
}

.pbd-price{
font-size:22px;
font-weight:700;
}

@media(max-width:900px){

.pbd-hero h1{
font-size:48px;
}

.pbd-grid{
grid-template-columns:1fr;
}

.pbd-toolbar-inner{
justify-content:flex-start;
}

.pbd-filters{
flex-direction:column;
width:100%;
}

.pbd-filter{
width:100%;
}

}