:root {
  --bg:#f5f7fb;
  --card:#ffffff;
  --muted:#9aa3ad;
  --accent:#ff6b6b;
  --shadow:0 6px 16px rgba(0,0,0,0.08);
  font-family:'IRANSans','Vazirmatn', Tahoma, Arial, sans-serif;
}

body {
  margin:0;
  background:var(--bg);
  color:#111;
  transition: background 0.3s, color 0.3s;
  direction: rtl;
  text-align: right;
}

/* ---- header ---- */
.header {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  background:var(--card);
  box-shadow:var(--shadow);
  position:sticky;
  top:0;
  z-index:10;
}

.search {
  flex:1;
  padding:12px 12px;
  border-radius:10px;
  border:1px solid transparent;
  background:#f0f3f8;
  outline:none;
  font-size:14px;
  transition: border 0.3s ease, box-shadow 0.3s ease;
}

.search:focus {
  border:1px solid var(--accent);
  box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(255,107,107,0.3);
}

/* ---- theme toggle ---- */
.theme-toggle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: black;
  color: white;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.theme-toggle svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
  fill: none;
  display: block;
  position: absolute;
  top: 50%;
  left: 51%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

.icon-moon { opacity: 0; }
body.dark .icon-sun { opacity: 0; }
body.dark .icon-moon { opacity: 1; }

/* ---- content ---- */
.content { padding:16px; }
.section { margin-bottom:32px; }
.content-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.sort {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding:6px 12px;
  border:0;
  border-radius:10px;
  background:var(--card);
  box-shadow:var(--shadow);
  cursor:pointer;
  font-size:13px;
}

.sort span { font-size: 12px; transition: transform 0.2s; }
.sort.open span { transform: rotate(180deg); }

/* ---- grid ---- */
.grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  transition: all 0.3s ease;
}

.product {
  position: relative;
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
}

.product:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.p-img {
  width:100%;
  aspect-ratio:1/1;
  background:#f0f3f8;
  overflow:hidden;
}

.p-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.p-title {
  font-size:14px;
  font-weight:600;
  margin:10px 12px 4px;
  color:#111;
}

.p-price {
  font-weight:700;
  font-size:14px;
  margin:0 12px 10px;
  color: var(--accent);
}

.buy-btn {
  display:inline-block;
  text-align:center;
  text-decoration:none;
  margin:0 12px 12px;
  padding:10px 0;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(255,107,107,0.25);
  transition: all 0.3s ease;
}

.buy-btn:hover {
  background:#ff5252;
  transform: translateY(-2px) scale(1.02);
}

/* ---- sort menu ---- */
.sort-menu {
  position: absolute;
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: 10px;
  top: 100%;
  left: 0;
  margin-top: 6px;
  overflow: hidden;
  display: none;
  z-index: 5;
  min-width: 140px;
}

.sort-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: #fff;
  text-align: right;
  cursor: pointer;
  font-size: 13px;
}

.sort-menu button:hover { background: #f0f3f8; }

/* ---- بنر لندینگ ---- */
.banner {
  background: linear-gradient(135deg, #ff6b6b, #ff8787);
  color: #fff;
  padding: 50px 20px;
  border-radius: 16px;
  text-align: center;
  margin: 20px auto;
  max-width: 90%;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.banner-text h1 { font-size:28px; font-weight:800; margin-bottom:10px; }
.banner-text p { font-size:16px; margin-bottom:18px; opacity:0.9; }

.banner .cta-btn {
  display: inline-block;
  padding:10px 24px;
  border-radius:12px;
  background: #fff;
  color: #ff6b6b;
  font-weight:700;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(255,107,107,0.3);
  transition: all 0.3s ease;
}

.banner .cta-btn:hover { background: #ffecec; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .banner-text h1 { font-size: 24px; }
  .banner{
    max-width: 85%;
  }
  .banner-text p { font-size: 14px; }
  .banner .cta-btn { padding: 8px 16px; font-size: 13px; }
}

/* ---- desktop ---- */
@media (min-width:900px) {
  .grid { grid-template-columns:repeat(4,1fr); max-width:1200px; margin:0 auto; }
  .content { padding:32px; }

}

/* ---- Dark Mode ---- */
body.dark {
  --bg:#111;
  --card:#1e1e1e;
  --muted:#888;
  --accent:#ff6b6b;
  --shadow:0 6px 16px rgba(0,0,0,0.5);
  color:#fff;
}

body.dark .theme-toggle { background:black; color:white; border: white solid 2px; }
body.dark .sort { background:#1e1e1e; color:#fff; }
body.dark .sort-menu { background:#1e1e1e; color:#fff; }
body.dark .sort-menu button { background:#1e1e1e; color:#fff; }
body.dark .search { background:#222; color:#fff; border-color:white; }
body.dark .p-title{
  color: white;
}