/* Czytelnosc wg audytu kontrastu z 23.08.2026: tekst pomocniczy #6b6560 = 5,46:1, podtytul #5c564f,
   minimum 12,5 px etykiety / 13,5 px opisy. */
/* NOWA STRONA GLOWNA — Magiczne Formy, 15.09.2026. Ladowany tylko na nowej glownej. */

/* D2 (Kamil 16.09): pasek promocyjny z dwoch wierszy do JEDNEGO.
   Wiersz o rabacie znika — ta sama tresc stoi nizej w sekcji "Im wiecej sztuk, tym taniej".
   Robione z TEGO pliku, a nie z functions.php, bo functions.php jest globalny:
   tak zmiana siedzi wylacznie na nowej glownej i nie rusza reszty sklepu przed cutoverem. */
.mf-usp .mf-usp-row:first-child{display:none}
.mf-usp{padding:7px 12px}
/* Kamil 16.09: "sekcje sie nie separuja, wszystko zlewa sie w calosc".
   Zmierzone przyczyny: (a) tla #fff i #faf7f2 roznily sie o 1,07:1 — oko tego nie rozdziela,
   (b) kazda sekcja miala identyczny padding 26/26 i naglowek 24 px, wiec zadna nie wyrozniala sie ciezarem,
   (c) sekcje 9 i 10 stały obok siebie na TYM SAMYM tle (rytm naprzemienny byl zlamany w PHP). */
.mfn{--mfn-ink:#241f1a;--mfn-sz:#6b6560;--mfn-acc:#8a6a3b;--mfn-line:#e3ddd3;--mfn-kr:#ebe2d2;
     max-width:760px;margin:0 auto;color:var(--mfn-ink);font-size:15px;line-height:1.5}
.mfn *{box-sizing:border-box}
/* wiecej powietrza na granicy: tresc nie dotyka krawedzi sasiedniej sekcji */
.mfn-s{padding:34px 16px}
.mfn-alt{background:var(--mfn-kr)}
/* cienka kreska na styku — dziala nawet wtedy, gdy dwie sekcje maja to samo tlo */
.mfn-s + .mfn-s{border-top:1px solid rgba(138,106,59,.16)}
.mfn h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:25px;line-height:1.2;margin:0 0 5px}
.mfn h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:24px;line-height:1.22;margin:0 0 7px;letter-spacing:-.01em}
.mfn-s>h2:first-child{padding-bottom:9px;border-bottom:1px solid var(--mfn-line);margin-bottom:11px}
.mfn-pod{font-size:13.5px;color:#5c564f;margin:0 0 14px;line-height:1.55}
.mfn-mt{margin-top:14px;margin-bottom:0}

.mfn-siatka{display:grid;grid-template-columns:1fr 1fr;gap:9px}
/* jak przy .mfn-prod: display:grid wygrywa z domyslnym [hidden]{display:none} */
.mfn-siatka[hidden]{display:none !important}
.mfn-wiecej{margin-top:9px}
.mfn-kaf{position:relative;height:148px;display:block;text-decoration:none;border-radius:4px;overflow:hidden;background:var(--mfn-kr)}
.mfn-kaf img{width:100%;height:100%;object-fit:cover;display:block}
.mfn-kaf span{position:absolute;inset:auto 0 0 0;padding:22px 10px 8px;
  background:linear-gradient(transparent,rgba(30,25,20,.74));color:#fff}
.mfn-kaf b{display:block;font-family:Georgia,serif;font-weight:600;font-size:14px;line-height:1.2}
.mfn-kaf em{display:block;font-style:normal;font-size:12.5px;opacity:.95;margin-top:3px}
/* Kafle rozwijane sa TEKSTOWE (Kamil 16.09), a wygladac maja TAK JAK W KATEGORIACH —
   czyli jak `.mf-kafel` ze style.css (sekcja „Wybierz rodzaj pamiatki"):
   biale tlo, ramka 1,5 px, tekst WYSRODKOWANY, tytul 13,5 px zwyklym krojem, podpis 12,5 px.
   Uwaga na dwie roznice wobec tamtej sekcji: tu wrapperem jest <span>, a podpis to <em>
   (w kategoriach: <b> + <span>), oraz .mfn-kaf b ma Georgie — trzeba ja zdjac. */
.mfn-kaf-tekst{height:auto;min-height:48px;background:#fff;border:1.5px solid var(--mfn-line);
  border-radius:5px;padding:9px 8px;text-align:center;color:#555;
  display:flex;flex-direction:column;justify-content:center}
.mfn-kaf-tekst span{position:static;inset:auto;padding:0;background:none;color:inherit}
.mfn-kaf-tekst b{display:block;font-family:inherit;font-weight:500;font-size:13.5px;color:var(--mfn-ink);line-height:1.3}
.mfn-kaf-tekst em{display:block;font-size:12.5px;color:var(--mfn-sz);opacity:1;margin-top:2px;line-height:1.3}
.mfn-kaf-tekst:hover{border-color:var(--mfn-acc)}
.mfn-wsz{display:block;text-align:center;margin-top:11px;padding:12px;border:1px solid var(--mfn-line);
  border-radius:4px;text-decoration:none;color:var(--mfn-ink);font-size:14px;font-weight:500}

.mfn-prod{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* UWAGA: display:grid wygrywa z domyslnym [hidden]{display:none} przegladarki —
   bez tej reguly przelacznik 4w3 pokazywal OBIE siatki naraz (8 kafli zamiast 4). */
.mfn-prod[hidden]{display:none !important}
.mfn-pr{text-decoration:none;color:var(--mfn-ink);display:block}
/* Kamil 16.09: "Czemu produkty sa tak kadrowane? Powinny byc pokazywane cale".
   Dwie przyczyny naraz: (a) object-fit:cover przycinal zdjecie do ramki 154x150,
   (b) same pliki maja ciasny kadr — zaproszenia tylko 17-21 px marginesu z 600 w pionie.
   contain pokazuje CALY produkt, padding daje mu oddech niezaleznie od tego, jak ciasny jest plik. */
.mfn-pr img{width:100%;height:170px;object-fit:contain;background:#fff;padding:8px;
  border-radius:4px;display:block;margin-bottom:6px}
.mfn-pr b{display:block;font-size:13px;font-weight:500;line-height:1.35;color:#3d3d3d}
.mfn-pr span{display:block;font-size:14px;font-weight:700;margin-top:3px}
/* cena ma sie NIE lamic: Porto rozbija kwote i symbol waluty na dwie linie */
.mfn-pr span,
.mfn-pr span *,
.mfn-pr .woocommerce-Price-amount,
.mfn-pr .woocommerce-Price-currencySymbol{white-space:nowrap !important;word-break:keep-all !important}
.mfn-pr .woocommerce-Price-amount{display:inline !important;font-size:14px}
.mfn-pr .woocommerce-Price-currencySymbol{display:inline !important;margin-left:2px}
.mfn-pr bdi{white-space:nowrap !important;display:inline !important}
.mfn-pr del{opacity:.62;font-weight:400;font-size:12.5px}

.mfn-s3{display:grid;gap:11px;margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--mfn-line)}
.mfn-s3>div{background:#fff;border:1px solid var(--mfn-line);border-radius:7px;padding:13px 15px;position:relative}
.mfn-n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;
  background:var(--mfn-acc);color:#fff;font-size:13px;font-weight:700;margin-bottom:7px}
.mfn-s3 b{display:block;font-size:15px;margin-bottom:4px}
.mfn-s3 p{margin:0;font-size:13.5px;color:var(--mfn-sz);line-height:1.55}
.mfn-licz2{display:grid;gap:9px;margin-bottom:4px}
.mfn-licz2>div,.mfn-licz2>button{background:#fff;border:1px solid var(--mfn-line);border-radius:7px;padding:11px 14px}
/* Kamil 16.09: wiersz kalkulatora przelacza siatke pod spodem (tabliczki / obrazy) */
.mfn-licz2>button{display:block;width:100%;text-align:left;font:inherit;color:inherit;
 cursor:pointer;min-height:44px;-webkit-tap-highlight-color:transparent}
.mfn-licz2>button.jest{border-color:var(--mfn-acc);box-shadow:inset 3px 0 0 var(--mfn-acc)}
.mfn-licz2>button:not(.jest){background:#fbf9f6}
.mfn-licz2>button:not(.jest) b::after{content:" — pokaż";font-weight:400;font-size:12.5px;color:var(--mfn-acc)}
.mfn-licz2 b{display:block;font-size:13.5px;margin-bottom:3px}
.mfn-licz2 span{display:block;font-size:14px;color:var(--mfn-sz)}
.mfn-licz2 strong{color:var(--mfn-ink);font-size:16px}
/* Kwota w kalkulatorze to <span class="mfn-cena"> — bez tego dziedziczy display:block
   z reguly wyzej i kazda liczba lapie wlasna linie ("4 x" / "69 zl" / "=" / "207 zl"). */
.mfn-licz2 .mfn-cena,.mfn-licz2 strong .mfn-cena{display:inline;white-space:nowrap;font-size:inherit;color:inherit}
.mfn-ludzie{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.mfn-ludzie>div{background:#fff;border:1px solid var(--mfn-line);border-radius:7px;padding:15px 9px 13px;text-align:center}
.mfn-foto{width:82px;height:82px;border-radius:999px;object-fit:cover;display:block;margin:0 auto 9px;
  border:2px solid #fff;box-shadow:0 2px 10px rgba(30,25,20,.13)}
.mfn-ludzie b{display:block;font-size:14.5px}
.mfn-ludzie em{display:block;font-style:normal;font-size:12.5px;color:var(--mfn-sz);margin-top:2px;line-height:1.35}
.mfn-adres{margin:14px 0 0;font-size:13.5px;color:var(--mfn-sz);text-align:center}
.mfn-adres a{color:var(--mfn-acc);text-decoration:none;font-weight:600}
.mfn-os{display:flex;gap:9px}
.mfn-os div{flex:1;background:#fff;border:1px solid var(--mfn-line);border-radius:5px;padding:11px 9px;text-align:center}
.mfn-os b{display:block;font-family:Georgia,serif;font-size:16px}
.mfn-os span{display:block;font-size:12.5px;color:var(--mfn-sz);margin-top:4px;line-height:1.35}

.mfn-licz{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mfn-licz div{background:#fff;border:1px solid var(--mfn-line);border-radius:5px;padding:13px}
.mfn-licz b{display:block;font-family:Georgia,serif;font-weight:400;font-size:21px;line-height:1}
.mfn-licz span{display:block;font-size:12.5px;color:var(--mfn-sz);margin-top:4px;line-height:1.4}

.mfn-eks{margin-top:13px;background:#fff;border:1px solid var(--mfn-acc);border-left:3px solid var(--mfn-acc);border-radius:7px;padding:12px 14px}
.mfn-eks b{display:block;font-size:14.5px;margin-bottom:3px}
.mfn-eks span{display:block;font-size:13.5px;color:var(--mfn-sz);line-height:1.55}
.mfn-eks b{color:var(--mfn-ink)}
.mfn-eks .mfn-cena,.mfn-eks .mfn-cena *{white-space:nowrap !important;display:inline !important;font-weight:700;color:var(--mfn-ink)}
/* Kamil 16.09: "Link do demo zrob taki jak na karcie produktu".
   Karta produktu ma .mf-how{text-decoration:underline;font-weight:500} — tu bylo podkreslenie
   TYLKO w :hover, czyli na telefonie nigdy. Link nie wygladal na link. */
.mfn-link{display:inline-block;margin-top:7px;font-size:13.5px;color:var(--mfn-acc);
 text-decoration:underline;font-weight:500;padding:12px 0;min-height:44px}

@media (min-width:700px){
  .mfn-siatka{grid-template-columns:repeat(3,1fr)}
  .mfn-prod{grid-template-columns:repeat(4,1fr)}
    .mfn-licz{grid-template-columns:repeat(4,1fr)}
  .mfn-s{padding:34px 20px}
}