/* =====================================================================
   Strony platformy abc24.pl: strona glowna, cennik, pomoc, kontakt oraz
   agregatory (sklepy/promocje/produkty). Osobny arkusz od sklep.css, bo to
   strony operatora platformy, nie sklepow klientow - sprzedawcy wstrzykuja
   wlasny HTML/CSS, ktory nie ma tu prawa niczego przestawiac.

   Motyw i skala czcionki dzialaja tak samo jak w sklepie i panelu:
   ciasteczka abc24_motyw / abc24_czcionka, przelacznik w /js/preferencje.js.
   ===================================================================== */
:root {
  --tlo: #f7f8fa; --plyta: #fff; --tekst: #1c1f26; --slaby: #5b6472;
  --obwodka: #e3e6ec; --akcent: #c2410c; --akcent-ciemny: #9a3412;
  --akcent-jasny: #fdf1e9; --ok: #1f7a44; --r: 10px;
}
:root[data-motyw="ciemny"] {
  --tlo: #1a1c25; --plyta: #242631; --tekst: #e7e9ee; --slaby: #a3a9b8;
  --obwodka: #343747; --akcent: #f0996b; --akcent-ciemny: #d97a48;
  --akcent-jasny: #33261f; --ok: #63c08c;
}
html { font-size: calc(100% * var(--skala, 1)); }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--tlo); color: var(--tekst);
  font: 0.95rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
a { color: var(--akcent); }

.pf-in { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.pf-top { background: var(--plyta); border-bottom: 1px solid var(--obwodka); }
.pf-top .pf-in { display: flex; align-items: center; gap: 22px; min-height: 62px; flex-wrap: wrap; }
.pf-logo { font-size: 1.35rem; font-weight: 800; text-decoration: none; color: var(--tekst); letter-spacing: -.02em; }
.pf-logo span { color: var(--akcent); }
.pf-nav { display: flex; gap: 16px; font-size: .88rem; flex-wrap: wrap; }
.pf-nav a { text-decoration: none; color: var(--slaby); font-weight: 600; }
.pf-nav a:hover, .pf-nav a[aria-current="page"] { color: var(--akcent); }
.pf-pref { margin-left: auto; display: flex; gap: 4px; }
.pf-pref button {
  background: transparent; color: var(--slaby); border: 1px solid var(--obwodka);
  border-radius: 5px; padding: 4px 9px; font: inherit; font-size: .78rem; cursor: pointer;
}
.pf-pref button:hover { color: var(--akcent); border-color: var(--akcent); }

.pf-tresc { padding: 26px 20px 60px; }
h1 { font-size: 1.75rem; margin: 0 0 16px; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 26px 0 10px; }
.szare { color: var(--slaby); } .male { font-size: .82rem; }
.pf-plyta { background: var(--plyta); border: 1px solid var(--obwodka); border-radius: var(--r); padding: 20px 22px; margin: 0 0 18px; }
.pf-plyta p:first-child { margin-top: 0; } .pf-plyta p:last-child { margin-bottom: 0; }
.pf-waskie { max-width: 780px; }

/* --- siatki kart (agregatory) --- */
.pf-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
/* User 2026-09-24: "/sklepy tez ma kafelki po cztery, zrob po dwa" -
   TYLKO na /sklepy (modyfikator, patrz komentarz w sklepy.php) - baza
   ".pf-siatka" zostaje (uzywana tez na /produkty, tam gesta siatka
   miniaturek ma sens). Ten sam rachunek co przy ".pf-cechy" wczesniej:
   kontener .pf-in = 1160px tresci, gap:16px. 480px: 2*480+16=976<=1160
   (miesci 2), 3*480+32=1472>1160 (3 juz NIE miesci sie) - gwarantuje
   dokladnie 2 na desktopie, auto-fill sam schodzi do 1 na waskim ekranie. */
.pf-siatka.pf-siatka--sklepy { grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); }
.pf-karta {
  background: var(--plyta); border: 1px solid var(--obwodka); border-radius: var(--r);
  padding: 16px; display: flex; flex-direction: column; gap: 6px;
  /* min-width:0 - bez tego dlugi ciag bez spacji (sklepy maja w NAZWA_WWW
     upchane slowa kluczowe po przecinkach) rozpycha kolumne siatki */
  min-width: 0;
}
.pf-karta h2 { font-size: 1rem; margin: 0; line-height: 1.35; overflow-wrap: anywhere; }
.pf-karta h2 a { text-decoration: none; }
.pf-karta img { max-width: 100%; height: auto; align-self: center; }
.pf-opis { margin: 0; font-size: .85rem; color: var(--slaby); overflow-wrap: anywhere; }
.pf-adres { margin: auto 0 0; padding-top: 8px; font-size: .78rem; color: var(--slaby);
  font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.pf-cena { margin: auto 0 0; font-size: 1.05rem; }
.pf-cena s { color: var(--slaby); font-size: .82rem; margin-right: 6px; }
.pf-cena strong { color: var(--akcent); }
.pf-znacznik {
  display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--akcent); background: var(--akcent-jasny);
  border-radius: 4px; padding: 2px 7px; align-self: flex-start;
}
.pf-stronicowanie { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 28px 0; }

/* --- strona glowna --- */
.pf-hero { text-align: center; padding: 36px 0 26px; }
.pf-hero h1 { font-size: 2.2rem; }
/* User 2026-09-24: "dnia niepotrzebnie... w kolejnej linii, niech sie
   miesci w dwoch liniach" - przy max A+ (--skala:1.16, patrz html{font-
   size} wyzej) tekst na glownej przy 660px lamal sie na 3 linie ("tego
   samego dnia." samo na 3.). Poszerzone tak, zeby miescilo sie w 2 nawet
   przy maks. powiekszeniu czcionki - zweryfikowane zrzutem ekranu z
   ciastkiem abc24_czcionka=2 (krok maksymalny), nie tylko domyslnym
   rozmiarem. Uzywane tez na /zaloz-sklep (krotszy tekst, wlasny
   text-align:left) - tam wieksza szerokosc jest nieszkodliwa. */
.pf-lead { font-size: 1.1rem; color: var(--slaby); max-width: 760px; margin: 0 auto 16px; }
/* User 2026-09-24: "po cztery kafelki w linii przeformatuj na trzy" -
   .pf-in (kontener) ma max-width:1200px, padding 0 20px, box-sizing:
   border-box -> 1160px realnej szerokosci na desktopie. Przy gap:16px,
   minmax(250px,..) mieszczilo dokladnie 4 kolumny (4*250+3*16=1048<1160).
   Podniesione do 320px: 3*320+2*16=992<=1160 (miesci 3), a
   4*320+3*16=1328>1160 (4 juz NIE miesci sie) - gwarantuje dokladnie 3
   na desktopie. Zero media query potrzebne - auto-fit sam schodzi do 2
   kolumn (~860px szerokosci) i do 1 (telefon), dokladnie jak dzialalo to
   wczesniej dla 4 kolumn - ta sama, juz sprawdzona technika, tylko z
   innym progiem. */
.pf-cechy { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 28px 0; }
.pf-cechy > div { background: var(--plyta); border: 1px solid var(--obwodka); border-radius: var(--r); padding: 16px 18px; }
.pf-cechy h2 { font-size: .95rem; margin: 0 0 6px; }
.pf-cechy p { margin: 0; color: var(--slaby); font-size: .85rem; }
.pf-cta { text-align: center; padding: 16px 0 34px; }
.pf-btn {
  display: inline-block; padding: 13px 26px; background: var(--akcent); color: #fff;
  text-decoration: none; border-radius: 8px; font-weight: 700;
}
.pf-btn:hover { background: var(--akcent-ciemny); }

/* --- tabele (cennik) --- */
.pf-przewijana { overflow-x: auto; }
.pf-tab { width: 100%; border-collapse: collapse; background: var(--plyta); }
.pf-tab th, .pf-tab td { border: 1px solid var(--obwodka); padding: 9px 12px; text-align: left; }
.pf-tab thead th { background: var(--akcent-jasny); color: var(--akcent-ciemny); }
.pf-tab td + td, .pf-tab th + th { text-align: center; font-variant-numeric: tabular-nums; }
.pf-tab .bezplatne { color: var(--ok); font-weight: 600; }

/* --- pomoc (FAQ) --- */
.pf-pyt { background: var(--plyta); border: 1px solid var(--obwodka); border-radius: var(--r); margin: 0 0 10px; }
.pf-pyt > summary { padding: 13px 16px; cursor: pointer; font-weight: 600; }
.pf-pyt > div { padding: 0 16px 14px; color: var(--slaby); }

.pf-stopka { border-top: 1px solid var(--obwodka); background: var(--plyta); padding: 18px 0; font-size: .82rem; color: var(--slaby); }
.pf-stopka .pf-in { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Formularz zakladania sklepu. */
form label { display: block; margin: 0 0 14px; font-size: .85rem; color: var(--slaby); }
form label input[type="text"], form label input[type="email"], form label input[type="password"] {
  display: block; width: 100%; margin-top: 4px; font: inherit; font-size: .95rem;
  padding: 9px 11px; border-radius: 6px; border: 1px solid var(--obwodka);
  background: var(--plyta); color: var(--tekst);
}
.pf-adres-pole { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pf-adres-pole input { margin-top: 0 !important; }
.pf-adres-pole > span { color: var(--slaby); white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace; }
.pf-ptak { color: var(--tekst); font-size: .9rem; }
.pf-ptak input { margin-right: 6px; }
/* honeypot: musi byc niewidoczny dla czlowieka, ale NIE przez display:none -
   czesc botow to wykrywa i wtedy pola nie wypelnia */
.pf-pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Kontakt: formularz obok danych operatora. */
.pf-dwie { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; align-items: start; }
.pf-dwie > section { min-width: 0; }
@media (max-width: 860px) { .pf-dwie { grid-template-columns: 1fr; } }
form textarea {
  display: block; width: 100%; margin-top: 4px; font: inherit; font-size: .95rem;
  padding: 9px 11px; border-radius: 6px; border: 1px solid var(--obwodka);
  background: var(--plyta); color: var(--tekst); resize: vertical;
}

/* Strona wolnej nazwy sklepu (Sklep::brakSklepu, 2026-10-03) */
.pf-wolna-adres { display: inline-block; margin: 0 0 10px; padding: 6px 14px; border-radius: 999px;
  font-weight: 600; font-variant-numeric: tabular-nums; color: var(--akcent);
  background: var(--akcent-jasny, rgba(0,0,0,.04)); border: 1px solid var(--obwodka); overflow-wrap: anywhere; }

/* Regulamin platformy (2026-10-03) */
.pf-regulamin h2 { font-size: 1.05rem; margin: 28px 0 8px; }
.pf-regulamin ol { padding-left: 1.4em; margin: 0 0 8px; }
.pf-regulamin ol > li { margin: 0 0 8px; line-height: 1.55; }
.pf-regulamin ul { margin: 6px 0; padding-left: 1.2em; }
.pf-regulamin ul li { margin: 3px 0; }