:root{--bg:linear-gradient(120deg,#f6f9ff,#eef4ff);--glass:rgba(255,255,255,.7);--blur:saturate(180%) blur(16px);--radius:16px}
*{box-sizing:border-box}
body{margin:0;font-family:'Tajawal',system-ui;background:var(--bg);color:#111}
a{color:inherit}
.clean{text-decoration:none;color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:16px}

.glass{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.5);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.06)}

.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;border-radius:12px;background:#111;color:#fff;text-decoration:none;border:0;cursor:pointer}
.btn-alt{background:#0b1726}

.hero{max-width:1100px;margin:16px auto;padding:16px}
.hero__text h1{margin:0 0 6px 0;font-size:24px}
.hero__text p{margin:0 0 8px 0;color:#333}
.hero__cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.hero__info{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;color:#333;font-size:14px}

.cats{max-width:1100px;margin:12px auto;padding:8px}
.cats__scroll{display:flex;gap:8px;overflow:auto;padding:4px}
.chip{padding:8px 12px;border-radius:20px;background:#fff;border:1px solid #eee;white-space:nowrap;text-decoration:none}

.search{max-width:1100px;margin:12px auto;padding:10px}
.search__form{display:flex;gap:8px}
.search__form input{flex:1;padding:12px;border:1px solid #e5e7eb;border-radius:12px;font-size:16px}
.search__form button{flex:none}

.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.card{padding:12px}
.card img{width:100%;height:160px;object-fit:cover;border-radius:12px}
.tit{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:8px 0 6px 0}
.price{font-weight:700}
.price-row{display:flex;align-items:center;gap:8px}
.strike{text-decoration:line-through;color:#666}
.badge{display:inline-block;padding:4px 8px;border-radius:10px;background:#111;color:#fff;font-size:12px}
.badge-free{background:#0a0;margin-top:6px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.actions{margin-top:8px}

.site-footer{max-width:1100px;margin:16px auto 24px auto;padding:16px;text-align:center;color:#555}
.site-footer a{text-decoration:none;color:#111}

@media (min-width: 720px){
  .hero__text h1{font-size:28px}
  .card img{height:200px}
}