:root {
  --border: #e7e7e7;
  --muted: #666;
  --card-bg: #fff;
  --bg: #fafafa;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color:#111; }

.wrap { max-width: 1120px; margin: 32px auto; padding: 0 16px; }
h1 { font-size: 28px; margin: 0 0 16px; }

.toolbar {
  position: sticky; top: 0; z-index: 10;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:12px; display:flex; gap:8px; align-items:center;
}
.toolbar input { flex:1; padding:8px 10px; border:1px solid var(--border); border-radius:8px; }
.toolbar button { padding:8px 14px; border-radius:8px; border:1px solid #222; background:#fff; cursor:pointer; }
.muted { color: var(--muted); font-size:12px; }

.grid { margin-top:16px; display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.card { position:relative; background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:8px; }

.img {
  width:100%; height:220px; object-fit:contain; background:#fff;
  border:1px solid #f0f0f0; border-radius:10px; position:relative; z-index:1;
}

.title { font-size:14px; line-height:1.35; height:3.6em; overflow:hidden; }
.price { display:flex; align-items:center; gap:8px; }
.price s { color:#999; }
.meta { color:var(--muted); font-size:12px; }

.actions { display:flex; gap:8px; align-items:center; }
.buy { display:inline-block; text-align:center; flex:1; padding:10px 12px; border-radius:10px; border:1px solid #222; text-decoration:none; color:#111; background:#fff; }

/* ❤️ حالت پیش‌فرض کم‌رنگ؛ بعد از لایک پررنگ */
.like-pin {
  position:absolute; top:8px; right:8px;
  background:#fff; border:1px solid var(--border); border-radius:999px;
  padding:6px 10px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.06);
  user-select:none; z-index:2;
  opacity:.4; transition:opacity .2s;
}
.like-pin.liked { opacity:1; }
/* ========== Bottom Navigation (Categories) ========== */
.bottom-nav {
  position: sticky; /* اگر همیشه ثابت می‌خواهی: fixed */
  bottom: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  margin: 16px 0;
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
}

.cat-btn {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.cat-btn:hover { transform: translateY(-1px); }
.cat-btn.active {
  border-color: #111;
  background: #f4f4f4;
}

/* آیکون Bee (جایگزین موقت تا لوگو بیاد) */
.bee {
  display: inline-block;
  font-weight: 700;
  margin-inline-end: 6px;
}
/* ---- Price badges / meta chips ---- */
.badges { display:flex; gap:6px; align-items:center; font-size:12px; }
.badge {
  display:inline-flex; align-items:center; gap:4px;
  border:1px solid var(--border); border-radius:999px; padding:4px 8px; background:#fff;
}
.badge.sale { border-color:#ff6b6b; }
.badge .down { font-weight:700; }

/* ---- Stars rating ---- */
.stars { display:inline-flex; gap:2px; translate: 0 1px; }
.star { font-size:14px; opacity:.35; }
.star.on { opacity:1; }

/* smaller gray text under price line */
.submeta { color: var(--muted); font-size:12px; }
/* ---- Extra images carousel ---- */
.carousel {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 2px 2px;
  scroll-snap-type: x proximity;
}
.carousel::-webkit-scrollbar { height: 6px; }
.carousel::-webkit-scrollbar-thumb { background: #ddd; border-radius: 8px; }

.thumb {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border: 1px solid var(--border);
  border-radius: 8px;
  object-fit: cover;
  scroll-snap-align: start;
  background: #fff;
  cursor: pointer;
  opacity: .9;
  transition: transform .12s, opacity .12s, border-color .12s;
}
.thumb:hover { transform: translateY(-1px); opacity: 1; }
.thumb.active { border-color: #111; }
/* ---- Pager / Infinite scroll ---- */
.pager { display:flex; justify-content:center; align-items:center; gap:12px; margin:16px 0; }
.btn-more {
  padding:10px 16px; border:1px solid #222; background:#fff; border-radius:10px; cursor:pointer;
}
.btn-more[disabled] { opacity:.5; cursor:not-allowed; }
.sentinel { width:100%; height:1px; }
.loader {
  width:24px; height:24px; border:3px solid #ddd; border-top-color:#111; border-radius:50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ---- Affiliate slide-in panel ---- */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.25);
  z-index: 9998; /* بالاتر از محتوای صفحه */
}
.aff-panel {
  position: fixed; inset: 0 auto 0 0; width: 320px; max-width: 85vw;
  background: #fff; border-right: 1px solid var(--border, #ddd);
  transform: translateX(-100%); transition: transform .22s ease;
  z-index: 9999; display: flex; flex-direction: column;
}
.aff-panel.open { transform: translateX(0); }