/* Page frame: top bar, main column, card grid. Component styles live in their own files. */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  background: var(--bg-deep);
  border-bottom: 1px solid #23262d;
}

.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px 40px;
}

/* note above the list, e.g. "the shop from this link has sold it" */
.notice {
  margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius);
  background: rgba(245, 179, 1, 0.1); border: 1px solid rgba(245, 179, 1, 0.35); color: var(--fg); font-size: 14px;
}

/* "พบ X รายการ" (left) + "● สำรวจล่าสุด ..." (right; under it on narrow screens) */
.list-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 4px 16px; margin: 0 0 12px;
}
.result-count { color: var(--muted); margin: 0; }
.scan-status { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: 13px; }
.scan-dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; flex: none; }
.scan-status.is-fresh .scan-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
  transition: opacity 0.15s;
}
.grid.is-loading { opacity: 0.45; pointer-events: none; }   /* new list on its way */

.slot { margin: 0 0 16px; }

/* "new items" pill: floats at the top of the screen while scrolling, takes no space */
.new-banner-slot { position: sticky; top: 12px; z-index: 5; height: 0; display: flex; justify-content: center; }
.new-banner {
  height: 40px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--gold); color: var(--bg); font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.notfound { text-align: center; padding-top: 80px; }
.notfound .btn-gold { text-decoration: none; }

@media (max-width: 480px) {
  .topbar { padding: 12px 16px; }
  .page { padding: 16px 16px 32px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}