/*
 * Ręczne poprawki wyglądu opisu produktu - Magiczny Ogród.
 *
 * TEN PLIK NALEŻY DO CIEBIE. Program go nie nadpisuje i nie czyta.
 * Na stronie wczytuje się PO arkuszu programu, więc to, co tu wpiszesz,
 * wygrywa. Czego tu nie ma, o tym decyduje program.
 *
 * Po każdej zmianie wgraj ten plik na serwer - program go nie wysyła.
 *
 *
 * JAK ZMIENIAĆ WYGLĄD
 *
 * Niżej stoi gotowa lista wartości: kolory, kroje pisma, rozmiary, odstępy,
 * zaokrąglenia. Wszystkie są zakomentowane. Żeby którąś zmienić, zdejmij
 * z jej wiersza znaki komentarza - te na początku i na końcu - a potem wpisz
 * swoją wartość. Czyli z wiersza wygląda to tak:
 *
 *   było:   wiersz z --kolor-naglowka schowany w komentarzu
 *   jest:   --kolor-naglowka:#1b5138;
 *
 * Jedna wartość działa wszędzie tam, gdzie jej użyto - kolor nagłówka zmieni
 * się w nagłówkach sekcji, podnagłówkach i pytaniach naraz. Nie trzeba szukać
 * reguł po arkuszu i nie da się rozjechać układu strony.
 *
 * To, czego tu NIE MA, zostaje po stronie programu: siatki, progi zwężania na
 * telefonie, proporcje ramek filmów, pozycjonowanie. Tam siedzą poprawki,
 * które wychodzą dopiero na prawdziwych stronach, i będą dalej dochodzić.
 *
 *
 * JEŚLI LISTA NIE WYSTARCZA
 *
 * Można też nadpisać całą regułę, ale wtedy KAŻDĄ zaczynaj od #opis.
 * Arkusz programu pisze "#opis h3 {...}", czyli mocniej niż samo "h3 {...}".
 * Reguła bez #opis przegra, nawet stojąc niżej - to nie błąd, tylko sposób,
 * w jaki CSS liczy siłę selektorów.
 *
 *   źle:    h3 { color: #000 }
 *   dobrze: #opis h3 { color: #000 }
 *
 * Taka reguła zamraża też to, co obok, więc używaj jej tylko wtedy, gdy na
 * liście naprawdę nie ma tego, czego szukasz. Przykłady na samym końcu pliku.
 */

/* --- wartości wyglądu: odkomentuj i zmień --------------------------- */

#opis{
 /* kroje pisma */
 /* --kroj-tekstu:Signika,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; */
 /* --kroj-naglowkow:Fraunces,Georgia,serif; */
 /* --grubosc-tekstu:400; */
 /* --grubosc-wyroznienia:600; */
 /* --grubosc-naglowkow:500; */
 /* --grubosc-nadtytulu:700; */
 /* rozmiary pisma */
 /* --tekst-tytulu:41px; */
 /* --tekst-wprowadzenia:17px; */
 /* --tekst-drobny:15px; */
 /* --tekst-opisu:16.5px; */
 /* --tekst-rozwijany:15.5px; */
 /* --tekst-naglowka:24px; */
 /* --tekst-podnaglowka:21px; */
 /* --tekst-pytania:19px; */
 /* --tekst-wiecej:16px; */
 /* --tekst-etykiety:13px; */
 /* --tekst-podpisu:14px; */
 /* --tekst-nadtytulu:12px; */
 /* interlinia */
 /* --interlinia:1.7; */
 /* --interlinia-tytulu:1.1; */
 /* --interlinia-wprowadzenia:1.72; */
 /* --interlinia-opisu:1.78; */
 /* --interlinia-kafelka:1.6; */
 /* --interlinia-wiersza:1.65; */
 /* kolory pisma */
 /* --kolor-tekstu:#565b4d; */
 /* --kolor-tekstu-drobnego:#5f6455; */
 /* --kolor-naglowka:#216545; */
 /* --kolor-wyroznienia:#3d5833; */
 /* --kolor-nadtytulu:#6e8256; */
 /* --kolor-uwagi:#b06a3f; */
 /* --kolor-wydawcy:#93978a; */
 /* kolory tla i ramek */
 /* --kolor-kreski:#e6e8de; */
 /* --tlo-kafelka:#f1f5ec; */
 /* --ramka-kafelka:#dde6d2; */
 /* --tlo-ikony:#eef2e6; */
 /* --tlo-etykiety:#eef0e4; */
 /* --ramka-etykiety:#dbe0cb; */
 /* --tlo-filmu:#eef2ea; */
 /* --tlo-zdjecia:#eef2ea; */
 /* --tlo-uwagi:#f6f3ec; */
 /* --ramka-uwagi:#e8e4d6; */
 /* --tlo-ikony-uwagi:#efeadd; */
 /* --tlo-certyfikatu:#fff; */
 /* --ramka-certyfikatu:#e2e5db; */
 /* --ramka-podpisu:#eef1ea; */
 /* odstepy */
 /* --odstep-sekcji:28px; */
 /* --odstep-siatki:18px; */
 /* --odstep-kolumn:24px; */
 /* --odstep-wiersza:28px; */
 /* --odstep-kafelka:24px; */
 /* --odstep-rozwijanego-pion:18px; */
 /* --odstep-rozwijanego-bok:22px; */
 /* --odstep-galerii:14px; */
 /* --odstep-par:20px; */
 /* zaokraglenia */
 /* --zaokraglenie:16px; */
 /* --zaokraglenie-male:14px; */
 /* rozmiary elementow */
 /* --rozmiar-ikony:56px; */
 /* --rozmiar-obrazka-ikony:34px; */
 /* --szerokosc-filmu:720px; */
 /* --szerokosc-shorta:340px; */
 /* --szerokosc-certyfikatu:340px; */
 /* --szerokosc-wstepu:640px; */
}

/* --- całe reguły: tylko jeśli lista nie wystarcza ------------------- */

/* Zaokrąglenie zdjęć w galerii
#opis .galeria img { border-radius: 20px; }
*/

/* Odstęp sekcji osobno u góry i u dołu
#opis .sec { padding: 36px 0 24px; }
*/
