@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');
:root{--g:#0aa968;--d:#10382a;--bg:#f6faf8;--line:#e4eee8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--d);font-family:Cairo,Arial}.wrap{max-width:1050px;margin:auto;padding-bottom:80px}.top{background:#fff;border-bottom:1px solid var(--line);padding:15px 20px;position:sticky;top:0;z-index:5}.brand{font-size:25px;font-weight:800}.hero{padding:28px 20px}.hero h1{margin:0}.search{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;margin-top:18px}.search input{border:0;outline:0;width:100%}.cats,.grid{display:grid;gap:12px;padding:0 20px}.cats{grid-template-columns:repeat(5,1fr)}.grid{grid-template-columns:repeat(3,1fr)}.cat,.card,.panel{background:#fff;border:1px solid var(--line);border-radius:18px}.cat{padding:15px;text-align:center}.card{overflow:hidden}.pic{height:160px;background:#e8f0eb;display:grid;place-items:center;font-size:55px}.body{padding:12px}.price{color:var(--g);font-weight:800}.btn{background:var(--g);color:#fff;border:0;border-radius:12px;padding:12px 16px;font-weight:700}.nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:10px;text-align:center}.nav button{margin:0 5px}.page{padding:20px}.panel{padding:18px;margin-bottom:15px}.form{display:grid;gap:12px}.form input,.form textarea,.form select{padding:12px;border:1px solid var(--line);border-radius:12px}.muted{color:#6c7b74}@media(max-width:650px){.cats{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:repeat(2,1fr)}}