:root{
--brand:#0b2a4a;
--brand2:#1877f2;
--accent:#ff8a00;
--bg:#f4f7fb;
--card:#fff;
--shadow:0 12px 30px rgba(11,42,74,.08);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Segoe UI,Tahoma,sans-serif;
background:var(--bg);
color:#111;
}

.hero{
background:linear-gradient(135deg,var(--brand),var(--brand2));
padding:40px 20px;
color:#fff;
border-radius:0 0 28px 28px;
}

.hero h1{
font-size:36px;
font-weight:900;
margin-bottom:8px;
}

.hero p{
opacity:.9;
margin-bottom:18px;
}

.search{
width:100%;
height:58px;
border:none;
border-radius:16px;
padding:0 18px;
font-size:15px;
outline:none;
}

.section{
padding:20px;
}

.section h2{
margin-bottom:16px;
color:var(--brand);
font-size:24px;
font-weight:800;
}

.vendor-row{
display:flex;
gap:16px;
overflow-x:auto;
padding-bottom:10px;
}

.vendor-row::-webkit-scrollbar{
display:none;
}

.vendor{
min-width:260px;
background:#fff;
border-radius:20px;
padding:16px;
box-shadow:var(--shadow);
cursor:pointer;
transition:.25s;
}

.vendor:hover{
transform:translateY(-4px);
}

.vendor-top{
display:flex;
align-items:center;
gap:12px;
}

.vendor-top img{
width:64px;
height:64px;
border-radius:50%;
object-fit:cover;
}

.vendor-name{
font-weight:800;
font-size:16px;
}

.vendor-status{
font-size:13px;
color:#16a34a;
margin-top:4px;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:18px;
}

.card{
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:var(--shadow);
transition:.25s;
}

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

.card-image{
position:relative;
}

.card-image > img{
width:100%;
height:220px;
object-fit:cover;
}

.vendor-pill{
position:absolute;
left:12px;
bottom:12px;
background:#fff;
padding:8px 10px;
border-radius:999px;
display:flex;
align-items:center;
gap:10px;
box-shadow:var(--shadow);
}

.vendor-avatar{
width:40px;
height:40px;
border-radius:50%;
object-fit:cover;
}

.vendor-live{
font-size:12px;
color:#16a34a;
}

.info{
padding:16px;
}

.info h3{
font-size:20px;
margin-bottom:8px;
}

.price{
font-size:24px;
font-weight:900;
color:var(--accent);
margin-bottom:10px;
}

.desc{
font-size:14px;
color:#666;
line-height:1.5;
min-height:40px;
}

.badges{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:14px;
}

.badge{
background:#eef3ff;
padding:6px 10px;
border-radius:999px;
font-size:12px;
font-weight:700;
}

.order{
width:100%;
height:48px;
border:none;
border-radius:14px;
margin-top:16px;
background:var(--accent);
color:#fff;
font-weight:800;
cursor:pointer;
font-size:15px;
}

.order:hover{
opacity:.9;
}

.empty{
text-align:center;
padding:50px;
font-size:18px;
color:#666;
}