/*
 * Arkusz stylów opisu produktu - Magiczny Ogród, Szablon #1.
 *
 * TEN PLIK PISZE PROGRAM. Przy kazdym uruchomieniu npm run arkusz powstaje
 * od nowa, wiec reczne zmiany tutaj przepadna.
 *
 * Zmiany wyglądu wpisuj w szablon-opisu-poprawki.css - ten plik wczytuje się
 * po tym i nadpisuje jego reguły. Program go nigdy nie rusza.
 *
 * Na samej górze stoi blok #opis{--...} z wartościami wyglądu: kolory,
 * kroje, rozmiary pisma, odstępy, zaokrąglenia. To one są do zmieniania.
 * Reguły pod nimi mówią, jak strona się układa - tego pilnuje program.
 *
 * Wszystkie reguły są pod #opis, więc nie ruszają reszty sklepu.
 */
@font-face{font-family:Fraunces;font-style:normal;font-weight:500;font-display:swap;src:url(https://media.magicznyogrod.pl/fonts/Fraunces-latin.woff2);unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Fraunces;font-style:normal;font-weight:500;font-display:swap;src:url(https://media.magicznyogrod.pl/fonts/Fraunces-latin-ext.woff2);unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Signika;font-style:normal;font-weight:300 700;font-display:swap;src:url(https://media.magicznyogrod.pl/fonts/Signika-latin.woff2);unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Signika;font-style:normal;font-weight:300 700;font-display:swap;src:url(https://media.magicznyogrod.pl/fonts/Signika-latin-ext.woff2);unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
#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;
}
#opis, #opis *{box-sizing:border-box}
#opis{margin:0 auto;font-family:var(--kroj-tekstu);font-weight:var(--grubosc-tekstu);color:var(--kolor-tekstu);line-height:var(--interlinia)}
#opis .sec{padding:var(--odstep-sekcji) 0;border-top:1px solid var(--kolor-kreski)}
#opis .ff{font-family:var(--kroj-naglowkow)}
#opis h3{margin:0 0 16px;font-family:var(--kroj-naglowkow);font-weight:var(--grubosc-naglowkow);font-size:var(--tekst-naglowka);color:var(--kolor-naglowka)}
#opis h4{margin:0 0 8px;font-family:var(--kroj-naglowkow);font-weight:var(--grubosc-naglowkow);font-size:var(--tekst-podnaglowka);color:var(--kolor-naglowka)}
/* Stosowanie, skład i synergia to pełne sekcje, więc ich nagłówek jest h3.
   Wyglądać ma jak dawne h4 - stąd powrót do mniejszego stopnia i odstępu. */
#opis .row h3{margin:0 0 8px;font-size:var(--tekst-podnaglowka)}
/* Tytuł kafelka korzyści: wygląd dawnego h4, ale to zwykły akapit.
   Kafelki są wyliczeniem, a nie sekcjami - jako nagłówki psuły strukturę. */
#opis .tytul-kafelka{margin:0 0 8px;font-family:var(--kroj-naglowkow);font-weight:var(--grubosc-naglowkow);font-size:var(--tekst-podnaglowka);color:var(--kolor-naglowka);text-wrap:wrap}
#opis p{margin:0 0 14px;text-wrap:pretty}
#opis p:last-child{margin-bottom:0}
/* Odstęp nad kreską ma być taki sam jak pod nią, czyli sam padding sekcji.
   Bez tego ostatni akapit dokładał swój margines i kreska odjeżdżała w dół. */
#opis .sec :last-child{margin-bottom:0}
#opis strong{font-weight:var(--grubosc-wyroznienia);color:var(--kolor-wyroznienia)}
#opis a{color:var(--kolor-wyroznienia)}
#opis .lead{font-size:var(--tekst-wprowadzenia);line-height:var(--interlinia-wprowadzenia)}
#opis .body{font-size:var(--tekst-drobny);color:var(--kolor-tekstu-drobnego)}
#opis .prose{font-size:var(--tekst-opisu);line-height:var(--interlinia-opisu);color:var(--kolor-tekstu)}
#opis .grid{display:grid;gap:var(--odstep-siatki)}
#opis .g1{grid-template-columns:1fr;gap:var(--odstep-wiersza)}
#opis .g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--odstep-kolumn)}
#opis .g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
#opis .tile{background:var(--tlo-kafelka);border:1px solid var(--ramka-kafelka);border-radius:var(--zaokraglenie);padding:var(--odstep-kafelka)}
#opis .row{display:flex;gap:var(--odstep-siatki)}
#opis .ico{flex:0 0 auto;width:var(--rozmiar-ikony);height:var(--rozmiar-ikony);border-radius:var(--zaokraglenie-male);background:var(--tlo-ikony);display:flex;align-items:center;justify-content:center}
#opis .ico img{width:var(--rozmiar-obrazka-ikony);height:var(--rozmiar-obrazka-ikony);object-fit:contain;display:block}
#opis .chip{font-size:var(--tekst-etykiety);font-weight:var(--grubosc-wyroznienia);color:var(--kolor-wyroznienia);background:var(--tlo-etykiety);border:1px solid var(--ramka-etykiety);padding:7px 14px;border-radius:999px}
#opis .banner{padding-bottom:var(--odstep-sekcji)}
#opis .banner img{display:block;width:100%;height:auto;border-radius:var(--zaokraglenie)}
#opis .eyebrow{font-size:var(--tekst-nadtytulu);font-weight:var(--grubosc-nadtytulu);letter-spacing:.2em;text-transform:uppercase;color:var(--kolor-nadtytulu)}
#opis ul,#opis ol{margin:0;padding-left:20px;font-size:var(--tekst-drobny);line-height:var(--interlinia);color:var(--kolor-tekstu-drobnego);text-wrap:pretty}
#opis details{background:var(--tlo-kafelka);border:1px solid var(--ramka-kafelka);border-radius:var(--zaokraglenie-male);padding:var(--odstep-rozwijanego-pion) var(--odstep-rozwijanego-bok);margin-bottom:12px}
#opis summary{cursor:pointer;font-family:var(--kroj-naglowkow);font-weight:var(--grubosc-naglowkow);font-size:var(--tekst-pytania);color:var(--kolor-naglowka)}
#opis details>div{padding-top:12px;font-size:var(--tekst-rozwijany);line-height:var(--interlinia-wprowadzenia);color:var(--kolor-tekstu-drobnego);text-wrap:pretty}
/* Rozwijane otwiera sie kliknieciem w caly prostokat, nie w sama strzalke.
   <details> reaguje tylko na klik w <summary>, a wyscielka nalezy do <details> -
   klik obok napisu trafial w nia i nic sie nie dzialo.

   Ujemny margines rowny wyscielce powieksza pole klikniecia dokladnie o nia,
   a padding oddaje te przestrzen z powrotem w srodku. Suma wychodzi zero,
   wiec uklad nie przesuwa sie ani o piksel - zmienia sie samo pole klikniecia.
   Bez jednej linijki JavaScriptu, bo sklep i tak by go wyciall. */
#opis details>summary{margin:calc(-1 * var(--odstep-rozwijanego-pion)) calc(-1 * var(--odstep-rozwijanego-bok));padding:var(--odstep-rozwijanego-pion) var(--odstep-rozwijanego-bok)}
/* Stosowanie i Short obok siebie. Short ma stałą szerokość, tekst bierze resztę -
   przy auto-fit obie kolumny wychodziły równe i film robił się ogromny. */
#opis .stosowanie-film{grid-template-columns:minmax(240px,1fr) var(--szerokosc-shorta);gap:var(--odstep-kolumn);align-items:start}
#opis .film-obok{display:flex;justify-content:center}
/* Element przez całą szerokość siatki - dzięki temu odstęp nad nim bierze się
   z odstępu wierszy siatki, a nie z osobnej liczby wpisanej z palca. */
#opis .pelny-rzad{grid-column:1/-1}
#opis .sec-film{padding-top:var(--odstep-kolumn)}
@media (max-width:700px){#opis .stosowanie-film{grid-template-columns:1fr}}
#opis .filmy{gap:var(--odstep-kolumn)}
/* film wyśrodkowany marginesem, a nie justify-items - przy justify-items
   kafelek siatki kurczy się do treści i szerokość 100% nie ma się do czego odnieść */
#opis .film{position:relative;width:100%;margin:0 auto;overflow:hidden;border-radius:var(--zaokraglenie);background:var(--tlo-filmu)}
#opis .film[data-format=poziomy]{max-width:var(--szerokosc-filmu);aspect-ratio:16/9}
#opis .film[data-format=pionowy]{max-width:var(--szerokosc-shorta);aspect-ratio:9/16}
#opis .film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
#opis .filmy h4{text-align:center}
/* Prog 220px dobrany tak, zeby siatka sama schodzila do jednej kolumny na
   telefonie (2x220+14 = 454 > szerokosc kazdego telefonu), a na komputerze
   dawala cztery zdjecia w rzedzie (4x220+42 = 922 <= 1000). To nie jest
   wartosc wygladu - to ona zastepuje @media, ktore sklep wycina. */
#opis .galeria{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--odstep-galerii)}
/* Na telefonie zdjęcia idą jedno pod drugim. Pozostałe siatki zwężają się same
   (minmax 220-280px), ale przy galerii na ekran wchodziły dwie kolumny po ok.
   170px - za mało, żeby odczytać napisy z infografik. */
@media (max-width:600px){#opis .galeria{grid-template-columns:1fr;gap:16px}}

/* ------------------------------------------------------------------
   Wygląd poszczególnych sekcji.

   Te reguły stoją niżej niż ogólne wyżej, i to jest celowe: część z nich
   poprawia to, co ustawiła klasa .grid albo .ico, a przy równej sile
   selektora wygrywa reguła stojąca niżej.

   Wcześniej wszystko to siedziało wpisane wprost w elementy w HTML-u.
   Styl w elemencie bije każdy arkusz, więc ani zmienne, ani plik poprawek
   nie miały jak tam sięgnąć - kolor tytułu dało się zmienić tylko przez
   ponowny eksport każdej strony z osobna.
   ------------------------------------------------------------------ */

/* nagłówek strony */
#opis .hero{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 var(--odstep-kolumn);padding-bottom:var(--odstep-sekcji)}
#opis .hero-tresc{padding:32px 0;display:flex;flex-direction:column;gap:var(--odstep-siatki);justify-content:center}
#opis .hero-tresc .lead{margin:0}
#opis .nadtytul{display:flex;align-items:center;gap:12px}
#opis .nadtytul-kreska{height:1px;width:34px;background:var(--kolor-nadtytulu)}
#opis .tytul{margin:0;font-weight:var(--grubosc-naglowkow);font-size:var(--tekst-tytulu);line-height:var(--interlinia-tytulu);color:var(--kolor-naglowka);text-wrap:pretty}
#opis .chipy{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
#opis .hero-zdjecie{display:flex;align-items:stretch;justify-content:center;min-height:280px;overflow:hidden;border-radius:var(--zaokraglenie)}
#opis .hero-zdjecie img,#opis .hero-zdjecie video{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--zaokraglenie)}

/* zalety i wskazówki - własne klasy, żeby nie ruszyć .body w innych kafelkach */
#opis .zaleta{line-height:var(--interlinia-kafelka)}
#opis .wskazowka{line-height:var(--interlinia-wiersza)}

/* galeria */
#opis .sekcja-galerii{padding:0 0 var(--odstep-sekcji)}
#opis .galeria img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--tlo-zdjecia);border-radius:var(--zaokraglenie-male)}

/* przed użyciem sprawdź */
#opis .naglowek-ikona{display:flex;align-items:center;gap:14px;margin-bottom:var(--odstep-kafelka)}
#opis .naglowek-ikona h3{margin:0}
#opis .ico-uwaga{width:50px;height:50px;border-radius:13px;background:var(--tlo-ikony-uwagi)}
#opis .ico-uwaga img{width:30px;height:30px}
#opis .uwagi{gap:var(--odstep-par)}
#opis .uwaga{background:var(--tlo-uwagi);border:1px solid var(--ramka-uwagi);border-radius:var(--zaokraglenie);padding:var(--odstep-kafelka)}
#opis .uwaga-etykieta{font-size:var(--tekst-nadtytulu);font-weight:var(--grubosc-nadtytulu);letter-spacing:.12em;text-transform:uppercase;color:var(--kolor-uwagi);margin-bottom:14px}
#opis .uwaga ul{padding-left:18px}

/* opis rozwijany */
#opis .wiecej{margin-top:14px;padding:6px 22px 18px}
/* To samo dla rozwijanego Czytaj dalej. Liczby sa wlasne, bo .wiecej ma nierowna
   wyscielke (6px u gory, 18px u dolu). Pion: -6+14 = 8 u gory i -18+26 = 8
   u dolu, czyli dokladnie tyle, ile mialo wczesniej samo summary.
   display:flex zamiast inline-flex, zeby pasek siegal konca prostokata. */
#opis .wiecej>summary{display:flex;align-items:center;gap:8px;font-size:var(--tekst-wiecej);font-weight:var(--grubosc-wyroznienia);color:var(--kolor-wyroznienia);margin:-6px -22px -18px;padding:14px 22px 26px}
#opis .wiecej>div{font-size:var(--tekst-opisu);line-height:var(--interlinia-opisu);color:var(--kolor-tekstu)}

/* najczęstsze pytania */
#opis .naglowek-faq{margin-bottom:22px}

/* badania laboratoryjne */
#opis .naglowek-badan{margin-bottom:8px}
#opis .wstep-badan{margin-bottom:18px;max-width:var(--szerokosc-wstepu)}
#opis .badania{gap:var(--odstep-par);align-items:start}
#opis .certyfikat{display:block;text-decoration:none;background:var(--tlo-certyfikatu);border:1px solid var(--ramka-certyfikatu);border-radius:var(--zaokraglenie-male);overflow:hidden;max-width:var(--szerokosc-certyfikatu)}
#opis .certyfikat img{display:block;width:100%;height:auto}
#opis .certyfikat-podpis{padding:12px 14px;display:flex;align-items:center;justify-content:center;gap:8px;border-top:1px solid var(--ramka-podpisu)}
#opis .certyfikat-podpis img{display:block;width:18px;height:18px;object-fit:contain}
#opis .certyfikat-podpis span{font-size:var(--tekst-podpisu);font-weight:var(--grubosc-wyroznienia);color:var(--kolor-wyroznienia)}
#opis .przebadany{border-radius:var(--zaokraglenie-male);padding:24px 26px}
/* Dwa zapisy tej samej rzeczy. Nowe opisy mają tu .tytul-kafelka, a te już
   wrzucone na sklep nadal mają nagłówek h4 - i mają wyglądać tak samo jak dotąd.
   Bez ostrych nawiasów w tym komentarzu: arkusz ląduje w gotowej stronie
   wewnątrz style, więc zapisany tu znacznik wygląda jak nagłówek strony. */
#opis .przebadany h4,#opis .przebadany .tytul-kafelka{font-size:var(--tekst-pytania);margin-bottom:10px}
#opis .przebadany-wstep{margin-bottom:16px}
#opis .przebadany-lista{margin-bottom:16px}
#opis .odnosnik-lab{color:var(--kolor-naglowka);font-weight:var(--grubosc-wyroznienia)}

/* zrodla */
#opis .wydawca{color:var(--kolor-wydawcy)}