/* ============================================================
   CARDZY — Warstwa responsywna (telefon + tablet)
   DESKTOP NIETKNIĘTY: wszystkie reguły są pod @media max-width,
   więc powyżej 1024px strona renderuje się dokładnie jak dotychczas.
   Ładowany PO ui.css, więc nadpisuje siatki (z !important bije inline).
   ============================================================ */

/* ---- Zabezpieczenia: brak poziomego scrolla, obrazy w ramach ---- */
@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  #root { overflow-x: hidden; max-width: 100vw; }
  img, video, canvas, svg { max-width: 100%; height: auto; }
  /* główne wrappery i karty nie mogą przekraczać szerokości ekranu */
  main, section, .card, .cz-page-wrap, .col, .row { max-width: 100%; }
  /* twarde łamanie długich słów/linków, żeby nic nie rozpychało */
  .card, .muted, p { overflow-wrap: anywhere; }
  /* nagłówki: break-word (łamie TYLKO słowa, które się nie mieszczą) — bez brzydkiego
     dzielenia normalnych słów w pół typu „bezpieczn ie" */
  h1, h2, h3 { overflow-wrap: break-word; }
  /* dzieci flex/grid muszą móc się kurczyć — !important bije inline min-width:NNNpx,
     które jest realną przyczyną rozpychania ekranu na telefonie */
  .row > *, .col > * { min-width: 0 !important; }
}

/* ---- Mobile + tablet (<768px): rzędy flex zawijają się zamiast wypychać
   elementy poza ekran. Rzędy, które MUSZĄ zostać w jednej linii, mają własny
   flex-wrap:nowrap !important (np. .cz-price-row) i pozostają nietknięte. ---- */
@media (max-width: 768px) {
  .row { flex-wrap: wrap; }
}

/* ---- Mniejszy padding stron na telefonie (było 24–40px po bokach) ---- */
@media (max-width: 820px) {
  .cz-page-wrap { padding-left: 14px !important; padding-right: 14px !important; }
}
@media (max-width: 400px) {
  .cz-page-wrap { padding-left: 11px !important; padding-right: 11px !important; }
}

/* ---- Gift: siatka motywów karty 6 → 3 kolumny na telefonie ---- */
@media (max-width: 560px) {
  .cz-theme-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---- Rynek: ukryj duży dolny pasek na mobile, pokaż kompaktowy przycisk ---- */
@media (max-width: 820px) {
  .cz-sellbar { display: none !important; }
}

/* cz-sell-fab usunięty — zastąpiony przez cz-sell-bar-mobile */
.cz-sell-fab { display: none !important; }

/* Nagłówek: na mobile chowamy przycisk panelu (avatar) — jest w dolnej nawigacji */
@media (max-width: 820px) {
  .cz-nav-avatar { display: none !important; }
}

/* Filtr ceny: Min — Max zawsze w jednej linii, delikatnie mniejsze na telefonie */
.cz-price-row { flex-wrap: nowrap !important; }

/* Pole kwoty [ input ][ zł ] — zawsze w jednej linii: input rośnie, „zł" obok
   (input ma width:100% z ui.css, dlatego musimy zrobić go elastycznym tutaj) */
.cz-amount-row { flex-wrap: nowrap !important; align-items: center !important; }
.cz-amount-row .input { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; }
.cz-amount-row > span { flex: none !important; white-space: nowrap; }

/* Dzwonek w panelu:
   • desktop → w prawej grupie akcji (display:contents = ZERO zmian w layoutcie desktopu)
   • mobile  → górny rząd, PRAWY róg (drugi, niezależny dzwonek; ten w akcjach znika) */
.cz-bell-mobile  { display: none; }
.cz-bell-desktop { display: contents; }
@media (max-width: 900px) {
  .cz-bell-mobile  { display: inline-flex !important; flex: none !important; }
  .cz-bell-desktop { display: none !important; }
}

/* Ustawienia → avatar:
   • desktop → pełny grid avatarów (przycisk ukryty)
   • mobile  → jeden przycisk „Zmień avatar", grid rozwija się po kliknięciu */
.cz-avatar-toggle { display: none; }
@media (max-width: 820px) {
  .cz-avatar-toggle { display: inline-flex !important; }
  .cz-avatar-grid { display: none !important; }
  .cz-avatar-grid.is-open { display: grid !important; }
  .cz-avatar-hint { display: none !important; }
  .cz-avatar-grid.is-open ~ .cz-avatar-hint { display: block !important; }
}

/* Rzędy „ikona + tytuł/tekst" (np. korzyści Premium): ikona zawsze po lewej,
   tekst obok i zawija się w swojej kolumnie — NIE pod ikoną.
   Naprawia skutek globalnej reguły .row{flex-wrap:wrap}. */
@media (max-width: 768px) {
  .cz-benefit-row { flex-wrap: nowrap !important; }
  .cz-benefit-row > .itile { flex: none !important; }
  .cz-benefit-row > div { flex: 1 1 auto !important; min-width: 0 !important; }
}

/* ============================================================
   MODAL — zawsze mieści się w ekranie (profesjonalne zachowanie):
   nagłówek (✕) i stopka (Anuluj/Wyślij) zawsze widoczne, a treść
   przewija się w środku. Naprawia wysokie modale (np. „Nowy ticket"),
   gdzie wcześniej przyciski uciekały poza ekran → „nie dało się cofnąć".
   Modale, które i tak się mieszczą, wyglądają identycznie.
   ============================================================ */
.modal { max-height: 92vh; display: flex; flex-direction: column; }
.modal-head, .modal-foot { flex: none; }
.modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }

/* Nowy ticket: kategoria jest teraz rozwijanym dropdownem (kompaktowo, w JSX).
   Tu tylko mniejszy padding modala + proporcjonalny przycisk „Oceń" (Zakupione). */
@media (max-width: 620px) {
  .modal-body { padding: 16px !important; }
  .cz-rate-btn { padding: 6px 14px !important; font-size: 12.5px !important; }
}

/* Moje transakcje — 2 kafelki podsumowania (Kupione / Sprzedane) RÓWNE:
   grid 2× 1fr zamiast flex-grow zależnego od długości treści; mniejsza kwota,
   żeby zmieściła się w węższym, równym kafelku. */
@media (max-width: 620px) {
  .cz-tx-summary { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .cz-tx-summary > .card { min-width: 0 !important; }
  .cz-tx-amt { font-size: 20px !important; }
}

/* Panel admina → Użytkownicy: tabela → karty (avatar+nick+email u góry,
   Sprzedaże/Ranga/Status jako etykieta:wartość, ⚙ w prawym górnym rogu karty).
   Koniec ze ściskaniem kolumn i pionowym łamaniem („Akt y wny"). */
@media (max-width: 700px) {
  .cz-user-row { display: block !important; position: relative !important; padding: 14px 16px !important; }
  .cz-user-head { padding-right: 42px !important; margin-bottom: 6px !important; }   /* miejsce na ⚙ */
  .cz-user-cell {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    flex: none !important; width: 100% !important; padding: 5px 0 !important; gap: 12px !important; min-width: 0 !important;
  }
  .cz-user-cell::before {
    content: attr(data-label); flex: none; font-size: 11px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
  }
  .cz-user-cell + .cz-user-cell { border-top: 1px solid var(--line-soft); }
  .cz-user-cell .status { white-space: nowrap; }   /* „Aktywny" w jednej linii */
  .cz-user-gear { position: absolute !important; top: 12px !important; right: 14px !important; }
}

/* Panel admina → Tickety:
   • badge priorytetu + status „open" jedno pod drugim (desktop: obok — display:contents)
   • filtry kategorii w jednej linii z poziomym scrollem (schludniej niż 3 rzędy) */
.cz-tk-badges { display: contents; }
@media (max-width: 620px) {
  .cz-tk-badges {
    display: flex !important; flex-direction: column !important;
    align-items: flex-end !important; gap: 5px !important; flex: none !important;
  }
  .cz-tk-cats {
    flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .cz-tk-cats::-webkit-scrollbar { display: none; }
  .cz-tk-cats .chip { flex: 0 0 auto; white-space: nowrap; }
}

/* R$ → karta hero „Kup R$": niższa, mniejszy padding, mniejszy robot,
   tytuł nie łamie się w pół słowa. Mniej scrollowania do następnej sekcji. */
@media (max-width: 620px) {
  .cz-rs-hero { padding: 16px !important; margin-bottom: 14px !important; }
  .cz-rs-hero h1 { font-size: 22px !important; line-height: 1.12 !important; }
  .cz-rs-hero p { font-size: 12.5px !important; line-height: 1.45 !important; margin-top: 6px !important; max-width: none !important; }
  .cz-rs-hero .badge { margin-bottom: 8px !important; }
  /* rząd 3 chipów (Kurs / ~5 min / 24/7) ciaśniej pod opisem */
  .cz-rs-hero .row.wrap { margin-top: 10px !important; gap: 6px !important; }
  .cz-rs-robot svg { width: 58px !important; height: 66px !important; }
}

/* Wystaw UGC → 3 kafelki statystyk zostają 3 w rzędzie (jak na screenie),
   tylko mniejszy padding i liczba, żeby zmieściły się na telefonie. */
@media (max-width: 620px) {
  .cz-ugc-stats { gap: 8px !important; }
  .cz-ugc-stats .card-pad { padding: 12px 8px !important; }
  .cz-ugc-stat-num { font-size: 18px !important; }
  .cz-ugc-stats .lbl { font-size: 10px !important; }
}

/* Wystaw UGC → baner CTA „Zostań sprzedawcą": mniejszy, robot + tekst OBOK siebie
   (nie w dół), przycisk pełną szerokością pod spodem. */
@media (max-width: 620px) {
  .cz-ugc-cta { padding: 16px !important; margin-bottom: 14px !important; }
  .cz-ugc-cta-row { gap: 12px !important; align-items: center !important; }
  .cz-ugc-cta-robot { flex: none !important; }
  .cz-ugc-cta-robot svg { width: 54px !important; height: 61px !important; }
  /* tekst (jedyny <div> w rzędzie) obok robota, może się kurczyć */
  .cz-ugc-cta-row > div { flex: 1 1 auto !important; min-width: 0 !important; }
  .cz-ugc-cta-row h3 { font-size: 16px !important; }
  .cz-ugc-cta-row p { font-size: 12.5px !important; margin-top: 3px !important; }
  /* przycisk: cała szerokość, w nowym rzędzie pod robotem+tekstem */
  .cz-ugc-cta-btn { flex: 1 1 100% !important; width: 100% !important; }
}

/* R$ → na telefonie/tablecie Kalkulator R$ na samą górę (ważny element do zamówień),
   przed „Jak to działa" i wykresem. Sticky wyłączony (1 kolumna). */
@media (max-width: 900px) {
  .cz-rs-calc { order: -1 !important; position: static !important; top: auto !important; }
}

/* Kalkulator R$ — majestatyczna, subtelnie „oddychająca" poświata, żeby klient
   wiedział, że TU dokonuje zakupu. Zachowuje chunky offset-shadow karty. */
@keyframes czCalcGlow {
  0%, 100% { box-shadow: 3px 3px 0 var(--ink), 0 0 0 0 rgba(255,122,89,0); border-color: var(--ink); }
  50%      { box-shadow: 3px 3px 0 var(--ink), 0 0 16px 3px rgba(255,122,89,.42); border-color: var(--coral); }
}
.cz-rs-calc { animation: czCalcGlow 2.6s ease-in-out infinite; will-change: box-shadow; }
/* Szacunek dla użytkowników z ograniczoną animacją */
@media (prefers-reduced-motion: reduce) {
  .cz-rs-calc { animation: none; box-shadow: 3px 3px 0 var(--ink), 0 0 14px 2px rgba(255,122,89,.35); border-color: var(--coral); }
}

/* Hero stron publicznych (UGC, Gift, Pomoc...) — kompaktowy na telefonie:
   mniejszy padding, tytuł, robot OBOK tekstu (mniejszy), nie pod spodem. */
@media (max-width: 620px) {
  .cz-hero { padding: 16px !important; margin-bottom: 14px !important; gap: 12px !important; }
  .cz-hero > div:first-child { min-width: 0 !important; }   /* tekst się kurczy → robot obok */
  .cz-hero h1 { font-size: 24px !important; line-height: 1.12 !important; }
  .cz-hero p { font-size: 13.5px !important; margin-top: 7px !important; }
  .cz-hero .badge { margin-bottom: 8px !important; }
  .cz-hero-robot svg { width: 60px !important; height: 68px !important; }
}

/* UGC → filtr kategorii jak na rynku: desktop = chipy widoczne; mobile = przycisk
   „⚙ Filtry" otwierający bottom sheet (panel `cz-drawer`). Wybrana kategoria
   podświetlona klasą is-active. */
.cz-ugc-cat-toggle { display: none; }
@media (max-width: 620px) {
  .cz-ugc-cat-toggle { display: flex !important; }
  .cz-ugc-cat-list { display: none !important; }   /* chipy chowamy — są w bottom sheecie */
}
@media (max-width: 480px) {
  .cz-price-row .input { padding: 9px 10px !important; font-size: 13px !important; }
}

/* ---- Formularze: pola w wierszu z zawijaniem → pełna szerokość na telefonie ---- */
@media (max-width: 520px) {
  .row.wrap > .field.grow,
  .row.wrap > .grow.field { flex-basis: 100% !important; min-width: 0 !important; }
}

/* ============================================================
   DOLNA NAWIGACJA (mobile/tablet) — domyślnie ukryta na desktopie
   ============================================================ */
.cz-bottomnav { display: none; }

@media (max-width: 820px) {
  .cz-bottomnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    background: var(--paper);
    border-top: 2px solid var(--ink);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around; align-items: stretch;
    box-shadow: 0 -4px 16px rgba(0,0,0,.10);
  }
  .cz-bottomnav button {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; cursor: pointer; padding: 5px 2px;
    font: inherit; font-size: 10.5px; font-weight: 700;
    color: var(--ink-soft); border-radius: 12px;
    transition: color .12s, transform .12s;
  }
  .cz-bottomnav button .bn-ic { font-size: 21px; line-height: 1; }
  .cz-bottomnav button .bn-lb {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cz-bottomnav button.on { color: var(--coral-deep); }
  .cz-bottomnav button.on .bn-ic { transform: translateY(-1px); }
  .cz-bottomnav button:active { transform: scale(.94); }

  /* odstęp na treść, żeby nie chowała się pod belką Wystaw + dolną nawigacją */
  body { padding-bottom: 128px; }
}

/* ============================================================
   NAGŁÓWEK — kompaktowy padding i przewijane linki na mobile
   ============================================================ */
@media (max-width: 820px) {
  header > div:first-child { padding: 0 14px !important; gap: 10px !important; }
}

/* Pasek linków publicznych: na tablecie zwęża się, na telefonie chowamy
   (zastępuje go dolna nawigacja). cz-publinks i tak znika ≤560 w ui-buildzie,
   tu pilnujemy zakresu tabletu, żeby nie rozpychał nagłówka. */
@media (max-width: 820px) {
  .cz-publinks { display: none !important; }
}

/* ============================================================
   RYNEK — filtry + siatka kart
   ============================================================ */
@media (max-width: 1024px) {
  .cz-rynek-grid { grid-template-columns: 1fr !important; }
  .cz-filters { position: static !important; top: auto !important; order: 2; }
  /* TABLET (621–1024px, np. iPad 820): 3 kolumny — wykorzystuje szerokość,
     nie wygląda jak rozciągnięty telefon */
  .cz-cards { grid-template-columns: repeat(3, 1fr) !important; }
}
/* TELEFON (≤620px): 2 kolumny */
@media (max-width: 620px) {
  .cz-cards { grid-template-columns: repeat(2, 1fr) !important; }
}
/* MAŁY TELEFON (≤360px): 1 kolumna */
@media (max-width: 360px) {
  .cz-cards { grid-template-columns: 1fr !important; }
}

/* Desktop: ukryj elementy wyłącznie mobilne */
.cz-filter-bar { display: none; }
.cz-sort-bar { display: none; }
.cz-sell-bar-mobile { display: none; }
.cz-desktop-search { display: flex; }
/* Globalna stopka — na desktopie jest w sidebarze, tu tylko mobile */
.cz-global-footer { display: none; }
/* Widok produktu — mobilny layout ukryty na desktopie */
.cz-item-mobile-view { display: none; }
/* Pasek zakupu — ukryty na desktopie */
.cz-item-buy-bar { display: none; }

/* Mobile: zamień sidebar filtrów na kompaktowy pasek */
@media (max-width: 820px) {
  .cz-filters { display: none !important; }
  .cz-rynek-grid { grid-template-columns: 1fr !important; }
  .cz-desktop-search { display: none !important; }

  /* Kompaktowy pasek wyszukiwarki + przycisk Filtry */
  .cz-filter-bar {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    position: sticky;
    top: calc(var(--nav-h, 58px) + 2px);
    z-index: 90;
    background: var(--vanilla);
    padding: 8px 0 6px;
  }
  .cz-filter-bar .search { flex: 1; min-width: 0; }
  .cz-filter-bar .search input { font-size: 14px; }

  /* Pasek sortowania — chipy pod wyszukiwarką */
  .cz-sort-bar {
    display: flex !important;
    gap: 8px;
    margin-bottom: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .cz-sort-bar::-webkit-scrollbar { display: none; }
  .cz-sort-chip {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 999px;
    border: 2px solid var(--ink);
    background: var(--paper);
    font: inherit; font-size: 12.5px; font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 2px 2px 0 var(--ink);
    transition: background .1s, color .1s;
  }
  .cz-sort-chip--on {
    background: var(--ink);
    color: var(--paper);
    box-shadow: none;
  }

  /* Globalna stopka — widoczna tylko na mobile */
  .cz-global-footer { display: block !important; }

  /* Widok produktu: ukryj desktop, pokaż mobilny */
  .cz-item-desktop-view { display: none !important; }
  .cz-item-mobile-view { display: block !important; }

  /* Pasek zakupu: jeden biały blok od przycisków do dołu ekranu (nav nakrywa dół) */
  .cz-item-buy-bar {
    display: flex !important;
    gap: 8px;
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 163;          /* pod navem (200) — nav nakrywa dolną część */
    padding: 10px 14px calc(66px + 14px + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    box-shadow: 0 -6px 20px rgba(0,0,0,.07);
  }
  /* Na stronie produktu zwiększ padding-bottom żeby treść nie chowała się pod paskiem + nawigacją */
  .cz-item-mobile-view { padding-bottom: 150px !important; }

  /* Mobilna belka "Wystaw item" — przyklejona nad dolną nawigacją */
  .cz-sell-bar-mobile {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0; right: 0;
    bottom: 66px;
    z-index: 160;
    background: var(--invert-surface);
    border-top: 2px solid var(--ink);
    padding: 10px 16px;
    box-shadow: 0 -2px 12px rgba(0,0,0,.18);
  }

  /* Mobilna stopka pod listą produktów */
  .cz-mobile-footer {
    display: block !important;
    margin-top: 28px;
    padding: 18px 0 8px;
    border-top: 2px dashed var(--line-soft);
    text-align: center;
  }
  .cz-mobile-footer-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
  }
  .cz-mobile-footer-links {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 6px;
  }
}

/* ============================================================
   DRAWER filtrów (slide-up, mobile/tablet)
   ============================================================ */
.cz-drawer-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end;
  animation: czFadeIn .15s ease;
}
@keyframes czFadeIn { from { opacity:0; } to { opacity:1; } }

.cz-drawer {
  width: 100%; max-height: 88vh;
  background: var(--paper);
  border-radius: 20px 20px 0 0;
  border-top: 2px solid var(--ink);
  display: flex; flex-direction: column;
  animation: czSlideUp .22s cubic-bezier(.2,.8,.3,1);
  overflow: hidden;
}
@keyframes czSlideUp {
  from { transform: translateY(60px); opacity:0; }
  to   { transform: none; opacity:1; }
}

.cz-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 2px solid var(--line-soft);
  flex-shrink: 0;
}

.cz-drawer-body {
  overflow-y: auto; flex: 1;
  padding: 16px 16px 8px;
  -webkit-overflow-scrolling: touch;
}

.cz-drawer-foot {
  display: flex; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--line-soft);
  flex-shrink: 0;
  background: var(--paper);
}

/* ============================================================
   KARTA PRODUKTU (Item page)
   ============================================================ */
@media (max-width: 1024px) {
  .cz-item-main { grid-template-columns: 1fr !important; }
  .cz-item-grid { grid-template-columns: 1fr !important; }
  .cz-detail   { grid-template-columns: 1fr !important; }
  .cz-offers   { position: static !important; top: auto !important; }
}
@media (max-width: 620px) {
  .cz-buy-inner { grid-template-columns: 1fr !important; }
}

/* ============================================================
   PANEL — siatki sekcji (sidebar już zwija się w panel.jsx @900)
   ============================================================ */
@media (max-width: 900px) {
  .cz-wallet-grid, .cz-seller-grid, .cz-how-grid, .cz-loy-grid,
  .cz-prem-grid, .cz-escrow-grid, .cz-ticket-grid,
  .cz-gift-grid, .cz-rs-grid, .cz-pomoc-grid, .cz-legal-grid {
    grid-template-columns: 1fr !important;
  }
  .cz-chat         { position: static !important; height: 520px !important; }
  .cz-toc          { position: static !important; }

  /* Główna treść panelu — mniejszy padding boczny, żeby nic nie wychodziło poza ekran */
  .cz-panel-main { padding-left: 14px !important; padding-right: 14px !important; }

  /* Panel na mobile: kontener jako blok (main pełna szerokość, nic nie wypycha w prawo).
     Globalnie w responsive.css, żeby nie zależeć od inline <style> w panel.jsx. */
  .cz-panel-shell { display: block !important; max-width: 100vw; overflow-x: hidden; }
  .cz-panel-main  { width: 100% !important; max-width: 100vw !important; box-sizing: border-box; min-width: 0 !important; }
  .cz-dash-grid   { grid-template-columns: 1fr !important; }
  .cz-dash-grid > .col { min-width: 0 !important; }
  .cz-quick       { grid-template-columns: repeat(2, 1fr) !important; }
  .cz-panel-main .card { max-width: 100% !important; }

  /* Topbar na mobile: RZĄD 1 = ☰ + pełny tytuł (NIGDY nie ucinany),
     RZĄD 2 = akcje (status Roblox + „Wystaw item" + dzwonek) — wszystko się
     mieści i zawija, zero ucinania typu „Pulpi…" */
  .cz-topbar {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }
  /* Głowa (☰ + tytuł) trzyma min. 58% szerokości:
     - gdy akcje = sam dzwonek → mieści się obok, w GÓRNYM rzędzie (top-right)
     - gdy akcje szerokie (status Roblox + „Wystaw item") → zawijają się do 2. rzędu,
       a tytuł i tak ma dość miejsca i nie jest ucinany */
  .cz-topbar-head {
    flex: 1 1 auto !important;
    min-width: 58% !important;
    gap: 10px !important;
    align-items: center !important;
  }
  .cz-burger { flex: none !important; }
  .cz-topbar-title { flex: 1 1 auto !important; min-width: 0 !important; text-align: left !important; }
  .cz-topbar-title h1 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    white-space: normal !important;       /* tytuł zawija się zamiast być ucinany */
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }
  .cz-topbar-title p { display: none !important; }  /* podtytuł chowamy na telefonach */
  /* Akcje ({right}: status Roblox + „Wystaw item") → własny, pełny rząd 2,
     dosunięte do prawej. Dzwonek NIE jest już tutaj — siedzi sam w rzędzie 1. */
  .cz-topbar-actions {
    flex: 1 1 100% !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
}

/* ============================================================
   STATYSTYKI sprzedawcy / KPI — responsywny ladder (systemowo):
     ≥768px  → 4 kolumny (inline, tablet/desktop)
     340–767 → 2 kolumny (telefony 360–430px też tu wpadają)
     <340px  → 1 kolumna (awaryjnie, gdy naprawdę brak miejsca)
   Karty są elementami grida → automatycznie równa wysokość w rzędzie.
   ============================================================ */
@media (max-width: 767px) {
  .cz-seller-stats, .cz-kpi { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 340px) {
  .cz-seller-stats, .cz-kpi { grid-template-columns: 1fr !important; }
}

/* ============================================================
   PANEL — drobne układy mobilne:
   • kafelki „Czeka na odbiór / Zakończone" (Zakupione) → 2 równe kolumny
   • zakładki .tabs (Do odbioru / Zakończone / Wygasłe itp.) → jedna linia
   ============================================================ */
@media (max-width: 620px) {
  /* Kafelki statusu — równe, pełna szerokość (zamiast dosunięcia do prawej) */
  .cz-buy-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Zakładki panelu w jednej linii + mniejsza czcionka; scroll tylko gdy naprawdę
     brak miejsca (zamiast brzydkiego zawijania do wielu wierszy) */
  .tabs { flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { padding: 7px 11px !important; font-size: 12.5px !important;
    white-space: nowrap; flex: 0 0 auto; }
  .tabs .tab .count { font-size: 10px !important; padding: 1px 6px !important; }

  /* ── Moje itemy (Sprzedający) — karta itemu na telefonie ──
     Rząd 1: miniatura + info (nazwa, gra, wyświetlenia, tagi)
     Rząd 2: status + cena (lewo) ... akcje ⚙ 🗑 (prawo)
     Desktop bez zmian — to wszystko w @media. */
  .cz-sitem-info { flex: 1 1 auto !important; min-width: calc(100% - 72px) !important; }
  .cz-sitem-info > b { font-size: 14px !important; }
  .cz-sitem-views { white-space: nowrap !important; }      /* „X wyświetleń" nie pęka w pół słowa */
  .cz-sitem-price { align-items: flex-start !important; text-align: left !important; }
  .cz-sitem-actions { margin-left: auto !important; }       /* ⚙ 🗑 dosunięte do prawej krawędzi rzędu 2 */
}

/* ============================================================
   PANEL — pulpit na telefonach: mniejsze ikony i elementy,
   żeby wszystko dopasowało się do ekranu (nie było rozciągnięte)
   ============================================================ */
@media (max-width: 620px) {
  /* Ikony-kafelki (szybkie akcje, sekcje) — globalnie mniejsze na telefonach */
  .itile { width: 36px !important; height: 36px !important; border-radius: 10px !important; }
  .itile svg { width: 18px !important; height: 18px !important; }

  /* Karta salda — mniejszy padding i kwota, żeby nie wychodziła poza ekran */
  .cz-bal-card { padding: 16px !important; }
  .cz-bal-amount { font-size: 28px !important; }

  /* Statystyki — mniejsze liczby */
  .cz-stat-num { font-size: 18px !important; }

  /* Karty wewnątrz panelu — ciaśniejszy padding (tylko panel) */
  .cz-panel-main .card-pad { padding: 14px !important; }

  /* Szybkie akcje — ciaśniejszy odstęp między kafelkami */
  .cz-quick { gap: 10px !important; }
}
/* Stopka: logo pełna szerokość + 2 kolumny linków */
@media (max-width: 700px) {
  .cz-foot-grid { grid-template-columns: 1fr 1fr !important; }
  .cz-foot-brand { grid-column: 1 / -1; }

  /* Tabela "Moje zakupione karty" → karty z etykietą | wartość (zamiast ściśniętych kolumn) */
  .cz-cards-thead { display: none !important; }
  .cz-card-row {
    display: block !important;
    padding: 12px 14px !important;
  }
  .cz-card-cell {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex: none !important;
    width: 100% !important;
    padding: 6px 0 !important;
    gap: 12px !important;
    text-align: right !important;
    min-width: 0 !important;
    word-break: break-all !important;
  }
  .cz-card-cell::before {
    content: attr(data-label);
    flex: none;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-faint);
    word-break: normal;
    white-space: nowrap;
  }
  .cz-card-cell + .cz-card-cell { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 560px) {
  /* cz-seller-stats / cz-kpi NIE schodzą tu do 1 kolumny — robi to dopiero
     ladder ≤340px. Na telefonach 360–430px zostają 2 kolumny. */
  .cz-topbar .cz-panel-search { display: none !important; }
  /* Stopka: skróć opis i social na bardzo małych */
  .cz-foot-brand p { display: none; }
}

/* Panel: treść nie może chować się pod dolną nawigacją */
@media (max-width: 820px) {
  .cz-panel-main, .cz-content, main { padding-bottom: 70px; }
}

/* ============================================================
   AUTH (logowanie/rejestracja)
   ============================================================ */
@media (max-width: 720px) {
  .cz-auth { grid-template-columns: 1fr !important; }
  .cz-auth-brand { display: none !important; }
}

/* ============================================================
   UGC / inne moduły z inline-grid — stackowanie ogólne
   Łapiemy typowe układy 2-3 kolumnowe wewnątrz .card na mobile.
   ============================================================ */
@media (max-width: 720px) {
  .cz-ugc-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 420px) {
  .cz-ugc-grid { grid-template-columns: 1fr !important; }
}

/* Szczegóły UGC + Gift/RS/Pomoc prawe szyny — stackowanie */
@media (max-width: 900px) {
  .ugc-detail-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   WIZARD "Wystaw item" — stepper + siatka treści
   ============================================================ */
@media (max-width: 820px) {
  /* Siatka: karta kroku + sidebar → stack */
  .cz-wizard-grid { grid-template-columns: 1fr !important; }

  /* Podgląd na rynku — niepotrzebny na mobile */
  .cz-wizard-preview { display: none !important; }

  /* Stepper: zmniejsz kółka i tekst, skróć odstępy */
  .cz-wizard-stepper { padding: 10px 10px !important; }
  .cz-step-circle { width: 28px !important; height: 28px !important; font-size: 11px !important; }
  .cz-step-label { font-size: 8px !important; letter-spacing: 0 !important; }
}
@media (max-width: 400px) {
  /* Na bardzo małych ekranach ukryj etykiety — zostają tylko numery */
  .cz-step-label { display: none !important; }
  .cz-step-circle { width: 26px !important; height: 26px !important; }
}

/* ============================================================
   Drobne: większe pola dotykowe, mniejsze nagłówki na telefonie
   ============================================================ */
@media (max-width: 560px) {
  h1 { font-size: clamp(24px, 7vw, 34px) !important; }
  h2 { font-size: clamp(19px, 5.4vw, 26px) !important; }
  .btn { padding: 12px 16px; }
  /* Modal na telefonie: węższy padding overlay + szerokość 100% (BEZ vw, które
     liczy szerokość paska i przesuwa modal). Idealnie wyśrodkowany. */
  .overlay { padding: 14px !important; }
  .modal, .cz-modal { width: 100% !important; max-width: 100% !important; }
}