/* styles.css */
:root{
  --bg:#0b1220; --surface:#0f172a; --card:#121a2e; --border:#1e293b;
  --fg:#e6eefc; --muted:#9fb2d0; --brand:#ef4444; --brand2:#fb7185;
  --ring:rgba(239,68,68,.35); --radius:16px; --shadow:0 10px 30px rgba(2,8,23,.5)
}
:root.light{
  --bg:#f7fafc; --surface:#fff; --card:#fff; --border:#e6eaf2;
  --fg:#0b1220; --muted:#475569; --brand:#ef4444; --brand2:#fb7185;
  --ring:rgba(239,68,68,.25); --shadow:0 10px 28px rgba(2,8,23,.08)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Vazirmatn",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic",Arial;
  background: radial-gradient(1400px 600px at 80% -10%, rgba(239,68,68,.15), transparent 60%), var(--bg);
  color:var(--fg); line-height:1.8;
}

a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.icon{background:transparent;border:1px solid var(--border);border-radius:10px;padding:.45rem .6rem;color:var(--fg);cursor:pointer}
.link{border:1px solid var(--border);border-radius:10px;padding:.4rem .6rem;color:var(--fg)}
.btn{border:1px solid var(--border); border-radius:12px; padding:.8rem 1rem; display:inline-flex; gap:.5rem; align-items:center; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); color:var(--fg); box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand2)); border-color:transparent; color:#fff}
.btn.block{width:100%; justify-content:center}

.topbar{
  position:sticky; top:0; z-index:50; display:grid; grid-template-columns: 220px 1fr auto; gap:1rem;
  align-items:center; padding:.6rem 1rem; background:rgba(15,23,42,.7); backdrop-filter:blur(8px); border-bottom:1px solid var(--border)
}
.brand{display:inline-flex; align-items:center; gap:.6rem; color:var(--fg); font-weight:800}
.brand .dot{color:var(--brand)}
.logo{width:28px;height:28px; fill:var(--brand); stroke:#fff}

.search{display:flex; gap:.4rem; align-items:center}
.search input{
  width:100%; padding:.6rem .8rem; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--fg)
}
.actions{display:flex; gap:.5rem; align-items:center}

.subnav{border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)}
.filters{display:flex; gap:.6rem; padding:.6rem 1rem; align-items:center; flex-wrap:wrap}
select, .price-range input{
  background:var(--surface); color:var(--fg); border:1px solid var(--border); border-radius:10px; padding:.45rem .5rem
}
.price-range{display:flex; align-items:center; gap:.6rem; color:var(--muted)}

.container{max-width:1200px; margin:1rem auto; padding:0 1rem}
.grid{display:grid; gap:1rem}
.products{grid-template-columns: repeat(5, minmax(0,1fr))}
@media (max-width:1100px){ .products{grid-template-columns: repeat(4, 1fr)} }
@media (max-width:900px){ .products{grid-template-columns: repeat(3, 1fr)} .topbar{grid-template-columns: 1fr} }
@media (max-width:640px){ .products{grid-template-columns: repeat(2, 1fr)} }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
}
.card:hover{border-color: color-mix(in oklab, var(--brand) 30%, var(--border))}
.thumb{block-size:180px; inline-size:100%; object-fit:cover; background:#0b1220}
.px{padding-inline:12px} .py{padding-block:12px}
.item-title{margin:.2rem 0; font-weight:600}
.price{display:flex; gap:.5rem; align-items:baseline}
.price b{font-size:18px}
.badge{background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff; padding:.1rem .5rem; border-radius:999px; font-size:12px}
.muted{color:var(--muted); font-size:13px}
.rate{color:#fbbf24}

.detail{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:1rem; align-items:start
}
.detail .big{width:100%; border-radius:14px; border:1px solid var(--border); object-fit:cover}
.detail .panel{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1rem}
.detail .panel .row{display:flex; justify-content:space-between; margin:.5rem 0}
.detail ul{margin:.2rem 0; padding-inline-start:1.2rem}

.empty{
  text-align:center; padding:2rem; color:var(--muted);
  border:1px dashed var(--border); border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)
}

/* drawer cart */
.drawer{
  position:fixed; inset-block:0; inset-inline-end:-420px; width:420px; background:var(--surface);
  border-inline-start:1px solid var(--border); box-shadow:var(--shadow); transition:transform .25s ease, inset-inline-end .25s ease; z-index:60;
}
.drawer.open{inset-inline-end:0}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid var(--border)}
.drawer-body{max-height:calc(100vh - 190px); overflow:auto; padding:1rem}
.drawer-foot{padding:1rem; border-top:1px solid var(--border)}
.rowc{display:grid; grid-template-columns: 64px 1fr auto; gap:.75rem; align-items:center; border-bottom:1px solid var(--border); padding:.6rem 0}
.rowc img{width:64px;height:64px; object-fit:cover; border-radius:10px}
.qty{display:inline-flex; gap:.4rem; align-items:center}
.qty button{border:1px solid var(--border); border-radius:8px; background:transparent; padding:.2rem .45rem; color:var(--fg)}
.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:55
}

.footer{padding:2rem 1rem; text-align:center; color:var(--muted); border-top:1px solid var(--border); margin-top:2rem}
:focus-visible{outline:3px solid var(--ring); outline-offset:2px}