body {
  background: radial-gradient(circle at top, #020617 0, #020617 40%, #000 100%);
  color: #e5e7eb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

.page { min-height: 100vh; display: flex; flex-direction: column; }

.page-header {
  border-bottom: 1px solid rgba(148,163,184,0.2);
  backdrop-filter: blur(8px);
  background: linear-gradient(to right, rgba(15,23,42,0.9), rgba(15,23,42,0.4));
}
.page-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}
.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, #22d3ee, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .95rem;
  color: #0b1120;
  box-shadow: 0 0 20px rgba(94,234,212,0.4);
  flex: 0 0 auto;
}
.brand-title { font-size: .95rem; font-weight: 600; }
.brand-sub { font-size: .7rem; color: #9ca3af; }

.header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.header-pill {
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.5);
  padding: 0.25rem 0.75rem;
  font-size: .75rem;
  text-decoration: none;
  color: #e5e7eb;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(15,23,42,0.85);
  white-space: nowrap;
  max-width: 100%;
}
.header-pill--muted {
  background: rgba(15,23,42,0.6);
  border-color: rgba(148,163,184,0.35);
  cursor: default;
}
.header-pill .pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

/* mobile-first: skracamy etykiety */
.hide-xs { display: none; }
@media (min-width: 420px) { .hide-xs { display: inline; } }

.page-main { flex: 1 1 auto; }
.page-main-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.2rem 1rem 2.5rem;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr);
  gap: 1.3rem;
  margin-bottom: 1.6rem;
}
@media (max-width: 768px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
}

.hero-eyebrow {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: .3rem;
}
.hero-title { font-size: 1.5rem; font-weight: 600; margin-bottom: .4rem; }
.hero-sub { font-size: .8rem; color: #9ca3af; max-width: 32rem; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: .8rem;
}
.stat-pill {
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.4);
  padding: .35rem .7rem;
  font-size: .7rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(15,23,42,0.8);
}

.hero-card {
  border-radius: 1.1rem;
  border: 1px solid rgba(129,140,248,0.5);
  background: radial-gradient(circle at 0 0, rgba(56,189,248,0.18), rgba(15,23,42,0.98));
  padding: .9rem;
  font-size: .8rem;
  position: relative;
  overflow: hidden;
}
.hero-card::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 180deg, rgba(56,189,248,0.12), transparent, rgba(129,140,248,0.16), transparent);
  opacity: .8;
  mix-blend-mode: screen;
  pointer-events: none;
}
.hero-card-inner { position: relative; z-index: 1; }
.hero-card-title { font-size: .85rem; font-weight: 500; margin-bottom: .3rem; }
.hero-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .75rem;
  color: #cbd5f5;
}
.hero-card-list li { margin-bottom: .2rem; display: flex; align-items: flex-start; gap: .35rem; }
.hero-card-list span.bullet { font-size: .8rem; margin-top: .05rem; }

.shops-section-title { font-size: .9rem; font-weight: 500; margin-bottom: .4rem; }

.shops-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap: .9rem;
}
@media (min-width: 640px) { .shops-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .shops-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.shop-card {
  border-radius: 1.1rem;
  border: 1px solid rgba(148,163,184,0.35);
  background: radial-gradient(circle at top left, rgba(30,64,175,0.6), rgba(15,23,42,0.98));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.shop-thumb {
  position: relative;
  height: 160px;
  background: radial-gradient(circle at 30% 0, #1d4ed8, #020617);
  overflow: hidden;
}
.shop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e5e7eb;
}
.shop-thumb-initials { font-size: 2.4rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.shop-badge {
  position: absolute;
  inset: .55rem .55rem auto auto;
  border-radius: 999px;
  padding: .15rem .55rem;
  font-size: .65rem;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  backdrop-filter: blur(6px);
  background: linear-gradient(to right, rgba(22,163,74,0.9), rgba(56,189,248,0.9));
  color: #ecfdf5;
  box-shadow: 0 0 15px rgba(34,197,94,0.5);
}

.shop-body {
  padding: .7rem .8rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.shop-name { font-size: .95rem; font-weight: 600; }
.shop-sub { font-size: .75rem; color: #cbd5f5; }

.shop-tags {
  margin-top: .2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.shop-tag {
  font-size: .65rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.5);
  background: rgba(15,23,42,0.85);
  color: #e5e7eb;
}

.shop-meta {
  margin-top: .3rem;
  font-size: .7rem;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.shop-meta span { display: inline-flex; align-items: center; gap: .25rem; }

.shop-footer { padding: 0 .8rem .8rem; margin-top: .15rem; }

.shop-link {
  width: 100%;
  border-radius: 999px;
  padding: .4rem .75rem;
  border: 1px solid rgba(129,140,248,0.9);
  background: radial-gradient(circle at 0 0, rgba(59,130,246,0.9), rgba(37,99,235,0.95));
  color: #eff6ff;
  font-size: .8rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  text-decoration: none;
  box-shadow: 0 0 18px rgba(59,130,246,0.5);
}
.shop-link span.icon { font-size: .9rem; }

.empty-note {
  font-size: .8rem;
  color: #9ca3af;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(15,23,42,0.6);
  border-radius: .9rem;
  padding: .8rem .9rem;
}

.page-footer {
  border-top: 1px solid rgba(30,64,175,0.5);
  background: rgba(15,23,42,0.95);
}
.page-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: .7rem 1rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .7rem;
  color: #64748b;
}
@media (max-width: 640px) {
  .page-footer-inner { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

.footer-brand a { color: #a5b4fc; text-decoration: none; }