/* Simple clean styles for demo */
body{font-family:Inter,Arial,Helvetica,sans-serif;margin:0;color:#0f172a;background:#f8fafc}
.container{max-width:1100px;margin:0 auto;padding:16px}
.topbar{background:#fff;border-bottom:1px solid #e6e9ee;position:sticky;top:0}
.topbar .container{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700}
.btn{padding:8px 10px;border-radius:8px;border:1px solid rgba(15,23,42,.06);background:#fff;text-decoration:none;color:inherit}
.btn.primary{background:#0ea5a4;color:#fff;border:none}
.hero{padding:24px 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{background:#fff;border:1px solid #eef2f7;border-radius:10px;overflow:hidden}
.card img{width:100%;height:180px;object-fit:cover}
.meta{padding:12px}
.price{font-weight:700;margin-top:8px}
.cartpane{position:fixed;right:16px;bottom:16px;background:#fff;border:1px solid #e6e9ee;padding:12px;border-radius:10px;width:320px;box-shadow:0 8px 24px rgba(2,6,23,.08)}
.hidden{display:none}
.datatable{width:100%;border-collapse:collapse}
.datatable th,.datatable td{padding:8px;border-bottom:1px solid #eef2f7}
.error{background:#fee2e2;padding:8px;border-radius:8px;color:#9b1c1c}
img{max-width:100%}
@media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .grid{grid-template-columns:1fr} .cartpane{width:90%;right:5%;} }