/* KSZ — live extras CSS (home, kategorie, grupy, blog, dodaj, profile, kontakt, regulamin) */

/* PALETA brandu (z app.css) */
:root {
  --ksz-primary: #F59E0B;
  --ksz-primary-d: #D97706;
  --ksz-primary-dd: #B45309;
  --ksz-text: #1F2937;
  --ksz-muted: #6B7280;
  --ksz-border: #E5E7EB;
  --ksz-bg-soft: #FEF3C7;
  --ksz-bg-card: #FFFFFF;
  --ksz-eco: #15803D;
  --ksz-radius: 12px;
}
[data-theme="dark"] {
  --ksz-text: #F9FAFB;
  --ksz-muted: #9CA3AF;
  --ksz-border: #374151;
  --ksz-bg-card: #1F2937;
  --ksz-bg-soft: #92400E;
}

/* WSPÓLNE */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border: 2px solid var(--ksz-border);
  border-radius: 10px; color: var(--ksz-text); background: transparent;
  font-weight: 600; text-decoration: none; cursor: pointer; transition: all .15s;
}
.btn-ghost:hover { border-color: var(--ksz-primary); color: var(--ksz-primary); }

.page-hero {
  padding: 32px 24px; background: linear-gradient(135deg, var(--ksz-bg-soft) 0%, #FFF 100%);
  border-radius: var(--ksz-radius); margin: 16px 0 24px;
}
.page-hero h1 { margin: 0 0 8px; font-size: clamp(24px, 4vw, 36px); color: var(--ksz-primary-dd); }
.page-hero p { margin: 0; color: var(--ksz-muted); max-width: 720px; }

/* HOME — hero + sekcje */
.hero { padding: 0; margin: 0 0 32px; }
.hero-in {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center;
  padding: 40px 28px; background: linear-gradient(135deg, var(--ksz-bg-soft) 0%, #FFF 100%);
  border-radius: var(--ksz-radius);
}
.hero-text h1 { font-size: clamp(28px, 5vw, 48px); margin: 0 0 16px; line-height: 1.15; color: var(--ksz-primary-dd); }
.hero-text p { font-size: 17px; color: var(--ksz-text); margin: 0 0 24px; max-width: 560px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 520px; }
.hs-item { text-align: left; }
.hs-item b { display: block; font-size: 22px; font-weight: 800; color: var(--ksz-primary-d); }
.hs-item span { font-size: 13px; color: var(--ksz-muted); }
.hero-mascot { display: flex; justify-content: center; align-items: center; }
.hero-mascot svg { width: 100%; max-width: 280px; height: auto; }
@media (max-width: 800px) {
  .hero-in { grid-template-columns: 1fr; padding: 24px 16px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-mascot { order: -1; }
  .hero-mascot svg { max-width: 180px; }
}

.home-sec { margin: 40px 0; }
.home-sec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.home-sec-head h2 { margin: 0; font-size: clamp(20px, 3vw, 26px); color: var(--ksz-text); }
.home-sec-head a { color: var(--ksz-primary-d); text-decoration: none; font-weight: 600; font-size: 14px; }
.home-sec-head a:hover { text-decoration: underline; }
.home-sec-free { padding: 24px; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: var(--ksz-radius); }
.home-sec-free .home-sec-head h2 { color: var(--ksz-eco); }

/* OGŁOSZENIA — adcard / adgrid (używane też przez ads.js prawdopodobnie) */
.adgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.adcard {
  background: var(--ksz-bg-card); border: 1px solid var(--ksz-border);
  border-radius: var(--ksz-radius); overflow: hidden; cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.adcard:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); border-color: var(--ksz-primary); }
.adcard:focus-visible { outline: 2px solid var(--ksz-primary); outline-offset: 2px; }
.adimg {
  width: 100%; aspect-ratio: 4/3; background: #F3F4F6 center/cover no-repeat;
}
.adbody { padding: 12px 14px; }
.adbody h3 {
  margin: 0 0 8px; font-size: 15px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ad-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ad-price { font-weight: 800; color: var(--ksz-primary-d); font-size: 15px; }
.ad-price.ad-free { color: var(--ksz-eco); }
.ad-time { font-size: 11px; color: var(--ksz-muted); }
.ad-loc { font-size: 12px; color: var(--ksz-muted); }
.adcard-free { border-color: #BBF7D0; }

/* KATEGORIE — cats-grid + cat-card */
.cats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.cat-card {
  background: var(--ksz-bg-card); border: 1px solid var(--ksz-border);
  border-radius: var(--ksz-radius); padding: 18px; cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.cat-card:hover { transform: translateY(-2px); border-color: var(--ksz-primary); box-shadow: 0 8px 20px rgba(245,158,11,.12); }
.cat-card:focus-visible { outline: 2px solid var(--ksz-primary); outline-offset: 2px; }
.cat-card header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cat-card .cat-ico { font-size: 26px; }
.cat-card h3 { margin: 0; font-size: 16px; color: var(--ksz-text); }
.cat-subs { list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--ksz-muted); }
.cat-subs li { padding: 2px 0; }
.cat-subs li.more { color: var(--ksz-primary-d); font-weight: 600; }

/* GRUPY FB — fb-grid + fb-card */
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.fb-grid-full { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.fb-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px; background: var(--ksz-bg-card); border: 1px solid var(--ksz-border);
  border-radius: var(--ksz-radius); text-decoration: none; color: var(--ksz-text);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.fb-card:hover { transform: translateY(-2px); border-color: #2563EB; box-shadow: 0 8px 20px rgba(37,99,235,.12); }
.fb-ico { font-size: 26px; }
.fb-name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.fb-type { font-size: 11px; color: var(--ksz-primary-d); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.fb-meta { font-size: 12px; color: var(--ksz-muted); margin-top: auto; }
.fb-card-big { padding: 20px; min-height: 140px; }

.grupy-toolbar { display: flex; gap: 10px; margin: 16px 0 20px; flex-wrap: wrap; }
.grupy-toolbar input[type="search"], .grupy-toolbar select {
  flex: 1; min-width: 200px; padding: 10px 14px;
  border: 1px solid var(--ksz-border); border-radius: 10px;
  background: var(--ksz-bg-card); color: var(--ksz-text); font-size: 14px;
}

/* BLOG — blog-grid + blog-card */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.blog-card {
  background: var(--ksz-bg-card); border: 1px solid var(--ksz-border);
  border-radius: var(--ksz-radius); padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.blog-tag {
  display: inline-block; align-self: flex-start; padding: 4px 10px;
  background: var(--ksz-bg-soft); color: var(--ksz-primary-dd);
  border-radius: 999px; font-size: 12px; font-weight: 700;
}
.blog-card h3 { margin: 0; font-size: 17px; line-height: 1.3; color: var(--ksz-text); }
.blog-card p { margin: 0; color: var(--ksz-muted); font-size: 14px; line-height: 1.5; }
.blog-meta { margin-top: auto; font-size: 12px; color: var(--ksz-muted); }

/* PROFILE — prof-grid */
.prof-grid {
  display: grid; grid-template-columns: 280px 1fr; gap: 24px;
  align-items: start;
}
.prof-side { display: flex; flex-direction: column; gap: 16px; }
.prof-card {
  background: var(--ksz-bg-card); border: 1px solid var(--ksz-border);
  border-radius: var(--ksz-radius); padding: 24px; text-align: center;
}
.prof-avatar {
  font-size: 48px; width: 80px; height: 80px;
  background: var(--ksz-bg-soft); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.prof-card h3 { margin: 0 0 4px; font-size: 18px; color: var(--ksz-text); }
.prof-mail, .prof-phone { font-size: 13px; color: var(--ksz-muted); margin-top: 4px; }
.prof-nav {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--ksz-bg-card); border: 1px solid var(--ksz-border);
  border-radius: var(--ksz-radius); padding: 8px;
}
.prof-nav a {
  padding: 10px 14px; border-radius: 8px; color: var(--ksz-text);
  text-decoration: none; font-size: 14px; transition: background .15s;
}
.prof-nav a:hover { background: var(--ksz-bg-soft); }
.prof-nav a[aria-current="page"] { background: var(--ksz-bg-soft); color: var(--ksz-primary-dd); font-weight: 600; }
.prof-main { min-width: 0; }
.prof-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.prof-head h2 { margin: 0; font-size: 22px; color: var(--ksz-text); }
@media (max-width: 800px) {
  .prof-grid { grid-template-columns: 1fr; }
}

/* KONTAKT */
.kontakt-grid {
  display: grid; grid-template-columns: 320px 1fr; gap: 24px;
  align-items: start;
}
.kontakt-info {
  background: var(--ksz-bg-card); border: 1px solid var(--ksz-border);
  border-radius: var(--ksz-radius); padding: 24px;
}
.kontakt-info h3 { margin: 0 0 14px; font-size: 18px; color: var(--ksz-text); }
.kontakt-info p { margin: 8px 0; font-size: 14px; line-height: 1.6; }
.kontakt-info a { color: var(--ksz-primary-d); }
@media (max-width: 800px) {
  .kontakt-grid { grid-template-columns: 1fr; }
}

/* PROSE — regulamin */
.prose {
  background: var(--ksz-bg-card); border: 1px solid var(--ksz-border);
  border-radius: var(--ksz-radius); padding: 32px;
  max-width: 880px; margin: 0 auto; line-height: 1.7;
}
.prose h2 { margin: 24px 0 12px; font-size: 20px; color: var(--ksz-primary-dd); border-bottom: 2px solid var(--ksz-bg-soft); padding-bottom: 6px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 12px 0; color: var(--ksz-text); }
.prose ul { margin: 12px 0; padding-left: 20px; }
.prose li { margin: 6px 0; color: var(--ksz-text); }
.prose a { color: var(--ksz-primary-d); }
.prose-meta { color: var(--ksz-muted); font-size: 13px; font-style: italic; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ksz-border); }

/* FORMULARZ — form-narrow */
.form-narrow {
  background: var(--ksz-bg-card); border: 1px solid var(--ksz-border);
  border-radius: var(--ksz-radius); padding: 28px;
  max-width: 720px;
}
.f-row { margin-bottom: 18px; }
.f-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .f-row-2 { grid-template-columns: 1fr; } }
.f-row label {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--ksz-text); margin-bottom: 6px;
}
.f-row label input[type="checkbox"] { margin-right: 8px; }
.f-row input[type="text"], .f-row input[type="email"], .f-row input[type="tel"],
.f-row input[type="number"], .f-row input[name], .f-row textarea, .f-row select {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--ksz-border); border-radius: 8px;
  background: var(--ksz-bg-card); color: var(--ksz-text);
  font-size: 14px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.f-row input:focus, .f-row textarea:focus, .f-row select:focus {
  outline: none; border-color: var(--ksz-primary);
  box-shadow: 0 0 0 3px rgba(245,158,11,.18);
}
.f-row textarea { resize: vertical; min-height: 120px; }
.f-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.f-msg { margin-top: 14px; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.f-msg:empty { display: none; }
.f-msg-ok { background: #DCFCE7; color: #166534; border: 1px solid #BBF7D0; }
.f-msg-err { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.f-msg-warn { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.f-msg a { color: inherit; text-decoration: underline; font-weight: 600; }

/* ── HOME: zagęszczenie siatek do skali sklepu (karty były za duże bo brak sidebara) ── */
section[aria-labelledby="h-pol"] .pgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
section[aria-labelledby="h-grp"] .ggrid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
section[aria-labelledby="h-cat"] .catgrid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* ── HOME hero "Clean Marketplace" (1:1 jak prod kupie-sprzedam-zamienie.pl) ── */
:root{
  --mk-brand:#F59E0B; --mk-brand-600:#D97706; --mk-brand-ink:#7a4300; --mk-brand-soft:#FEF3C7;
  --mk-ink-900:#0F1012; --mk-ink-700:#3a3d42; --mk-ink-400:#9aa0a6; --mk-border:#e8eaec; --mk-surface:#ffffff;
  --mk-radius-lg:22px; --mk-radius-pill:999px;
  --mk-font-display:"Inter",system-ui,sans-serif;
}
.mk-shell{max-width:1440px;margin:0 auto;padding:6px 0 0}
.mk-hero{display:grid;grid-template-columns:2fr 1fr;gap:14px;min-height:260px}
.mk-hero-main{position:relative;overflow:hidden;background:linear-gradient(135deg,#FEF3C7 0%,#FDE68A 100%);border-radius:var(--mk-radius-lg);padding:34px 36px;display:flex;align-items:flex-end}
.mk-hero-main-inner{position:relative;z-index:2}
.mk-hero-bubble{position:absolute;right:-40px;bottom:-40px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.35)}
.mk-hero-main::before{content:'';position:absolute;right:56px;top:40px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.55)}
.mk-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mk-brand-ink);margin-bottom:14px}
.mk-hero-main h2{font-family:var(--mk-font-display);font-weight:800;font-size:38px;line-height:1.05;color:#1a1300;margin:0 0 12px;max-width:460px}
.mk-hero-main p{font-size:14px;color:#4b3a00;max-width:460px;margin:0 0 22px}
.mk-hero-ctas{display:flex;gap:10px;flex-wrap:wrap}
.mk-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--mk-radius-pill);font-weight:600;font-size:13.5px;font-family:var(--mk-font-display);transition:all .15s;cursor:pointer;border:0;text-decoration:none;line-height:1}
.mk-btn-dark{background:var(--mk-ink-900);color:#fff}
.mk-btn-dark:hover{background:#000;color:#fff}
.mk-btn-outline-ink{background:transparent;color:var(--mk-brand-ink);border:1px solid rgba(122,67,0,.25)}
.mk-btn-outline-ink:hover{border-color:var(--mk-brand-ink);color:var(--mk-brand-ink)}
.mk-hero-side{display:grid;grid-template-rows:1fr 1fr;gap:14px}
.mk-hero-tile{display:flex;align-items:center;gap:14px;padding:22px 24px;border-radius:var(--mk-radius-lg);text-decoration:none;cursor:pointer;transition:transform .18s}
.mk-hero-tile:hover{transform:translateY(-2px)}
.mk-hero-tile-dark{background:var(--mk-ink-900);color:#fff}
.mk-hero-tile-soft{background:var(--mk-brand-soft);color:var(--mk-brand-ink)}
.mk-hero-tile-icon{width:56px;height:56px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;font-size:26px;background:rgba(255,255,255,.12);color:#fff}
.mk-hero-tile-icon-brand{background:var(--mk-brand);color:#fff}
.mk-hero-tile-title{font-family:var(--mk-font-display);font-weight:700;font-size:16px;line-height:1.2}
.mk-hero-tile-sub{font-size:12px;opacity:.72;margin-top:4px}
.mk-catpills{max-width:1440px;margin:18px auto 0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.mk-catpills::-webkit-scrollbar{display:none}
.mk-chip{padding:8px 14px;border-radius:var(--mk-radius-pill);border:1px solid var(--mk-border);background:var(--mk-surface);color:var(--mk-ink-700);font-size:12.5px;font-weight:500;white-space:nowrap;text-decoration:none;transition:all .15s;cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1}
.mk-chip i{font-size:13px}
.mk-chip:hover{border-color:var(--mk-ink-400);color:var(--mk-ink-900)}
.mk-chip.active{background:var(--mk-ink-900);color:#fff;border-color:var(--mk-ink-900)}
.mk-chip.active i{color:#fff !important}
@media(max-width:860px){.mk-hero{grid-template-columns:1fr;min-height:auto}.mk-hero-main{padding:24px 20px}.mk-hero-main h2{font-size:26px}.mk-hero-side{grid-template-rows:auto auto}}

/* ukryj stary duplikat chipów (mk-catpills go zastępuje) */
.chips-wrap{display:none !important}


/* Hero — obrazek maskotki (MJ) zamiast pustego koła */
.mk-hero-main::before{display:none !important}
.mk-hero-pig{position:absolute;right:22px;bottom:0;width:300px;max-width:44%;aspect-ratio:1/1;border-radius:20px;background:url('hero-mascot.webp?v=20260522d') center/cover no-repeat;box-shadow:0 18px 44px -14px rgba(124,45,18,.4);z-index:1}
@media(max-width:860px){.mk-hero-pig{display:none}}

/* Hero — tło karty w tonie świnki + wygaszenie krawędzi obrazka (bez widocznej ramki) */
.mk-hero-main{background:linear-gradient(120deg,#F7DD8C 0%,#EBC868 55%,#F2D67E 100%) !important}
.mk-hero-pig{border-radius:0 !important;box-shadow:none !important;width:330px;max-width:46%;-webkit-mask-image:radial-gradient(ellipse 74% 74% at 52% 50%, #000 56%, transparent 84%);mask-image:radial-gradient(ellipse 74% 74% at 52% 50%, #000 56%, transparent 84%)}