:root {
  --bg: #f6f4ef;
  --card: #ffffff;
  --ink: #1d1b18;
  --muted: #6f6a62;
  --line: #e7e2d8;
  --red: #c1272d;      /* أحمر العلم */
  --green: #006233;    /* أخضر العلم */
  --gold: #e8a33d;
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#14130f; --card:#1e1c18; --ink:#f2efe8; --muted:#a39d92; --line:#2e2b25; }
}
* { box-sizing: border-box; }
body { margin:0; font-family:"Cairo",system-ui,sans-serif; background:var(--bg); color:var(--ink); line-height:1.6; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1180px; margin:0 auto; padding:0 16px; }

.top { background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.top-row { display:flex; gap:16px; align-items:center; padding:12px 16px; flex-wrap:wrap; }
.logo { font-weight:800; font-size:1.5rem; direction:ltr; letter-spacing:-.5px; }
.logo span { color:var(--red); }
.search { flex:1; display:flex; min-width:240px; }
.search input { flex:1; padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius) 0 0 var(--radius); border-left:0; font:inherit; background:var(--bg); color:var(--ink); border-radius:0 var(--radius) var(--radius) 0; }
.search button { padding:10px 18px; border:0; background:var(--red); color:#fff; font:inherit; font-weight:600; border-radius:var(--radius) 0 0 var(--radius); cursor:pointer; }

.demo { background:#fff4d6; color:#5a4300; text-align:center; padding:8px 16px; font-size:.9rem; }

.hero { padding:28px 0 8px; }
.hero h1 { margin:0; font-size:2rem; font-weight:800; }
.hero p { margin:4px 0 0; color:var(--muted); }

.chips { display:flex; gap:8px; overflow-x:auto; padding:16px 0; scrollbar-width:none; }
.chips a { white-space:nowrap; padding:7px 14px; border:1px solid var(--line); border-radius:999px; background:var(--card); font-size:.95rem; }
.chips a.on { background:var(--ink); color:var(--bg); border-color:var(--ink); }

.bar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.count { color:var(--muted); }
.filters { display:flex; gap:8px; align-items:center; }
.toggle { padding:7px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); font-size:.9rem; }
.toggle.on { border-color:var(--green); color:var(--green); font-weight:600; }
select { padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font:inherit; font-size:.9rem; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
@media (max-width:480px) { .grid { grid-template-columns:repeat(2,1fr); gap:10px; } }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s; }
.card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.08); }
.img { position:relative; aspect-ratio:1; background:#f0ede6; }
.img img { width:100%; height:100%; object-fit:cover; display:block; }
.noimg { display:grid; place-items:center; height:100%; font-size:3rem; }
.off { position:absolute; top:10px; right:10px; background:var(--red); color:#fff; font-weight:800; padding:2px 9px; border-radius:8px; direction:ltr; }
.body { padding:12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.tags { display:flex; gap:6px; flex-wrap:wrap; min-height:22px; }
.tag { font-size:.75rem; padding:1px 8px; border-radius:6px; font-weight:600; }
.tag.choice { background:#fff0d4; color:#8a5a00; direction:ltr; }
.tag.ship { background:#e2f3e9; color:var(--green); }
.body h3 { margin:0; font-size:.9rem; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.price b { font-size:1.15rem; color:var(--red); }
.price s { color:var(--muted); font-size:.85rem; margin-inline-start:6px; }
.meta { display:flex; gap:10px; font-size:.8rem; color:var(--muted); flex-wrap:wrap; }
.cta { margin-top:auto; text-align:center; background:var(--green); color:#fff; padding:8px; border-radius:10px; font-weight:600; font-size:.9rem; }

.pager { display:flex; justify-content:center; align-items:center; gap:16px; padding:28px 0; }
.pager a { padding:8px 16px; border:1px solid var(--line); border-radius:10px; background:var(--card); }

.empty { text-align:center; padding:60px 0; }
.btn { display:inline-block; background:var(--red); color:#fff; padding:10px 20px; border-radius:10px; font-weight:600; }

.foot { margin-top:48px; border-top:1px solid var(--line); background:var(--card); padding:24px 0; font-size:.9rem; }
.foot p { margin:6px 0; }
.muted { color:var(--muted); }