/* ==========================================================================
   olejki.app : style opisu produktu
   Wgrać do child theme i podpiąć w functions.php albo wkleić do Theme Options > Custom CSS.
   Wszystkie klasy mają przedrostek olej-, bo Flatsome ma własne .row .box .panel .badge.
   Nie edytować tego pliku pod pojedynczy produkt. Treść mieszka w opis.md.
   ========================================================================== */

.olej-opis{
  /* Tokeny marki olejki.app, zrodlo: marka/brand-tokens.css (odczytane z Figmy).
     Guidelines: ziele\n jest kolorem dominujacym i stanowi baze. Lawenda
     i cytryna to akcenty stosowane oszczednie, nie elementy dominujace.
     Zadnych kolorow spoza systemu, zadnych gradientow. */

  --o-tlo:#FFFFFF;              /* neutral-00  */
  --o-tlo-alt:#FCFCFC;          /* neutral-100 */
  --o-tlo-karta:#FFFFFF;        /* neutral-00  */
  --o-tekst:#1F1F1F;            /* neutral-800 */
  --o-tekst-slaby:#747474;      /* neutral-600 */
  --o-linia:#E7E7E7;            /* neutral-300 */

  /* akcent domyslny: Lesna zielen, kolor dominujacy marki */
  --o-akcent:#175C5B;           /* green-500 */
  --o-akcent-mocny:#0D2729;     /* green-700 */
  --o-akcent-tlo:#EEFFFD;       /* green-100 */
  --o-akcent-jasny:#92C7C6;     /* green-300 */

  /* zloto: wylacznie plakietki dawkowania i nota bezpieczenstwa */
  --o-zloto:#DDAC1E;            /* yellow-700 */
  --o-zloto-tlo:#FFF6D1;        /* yellow-200 */
  --o-teal:#175C5B;             /* green-500  */
  --o-teal-tlo:#DFF7F4;         /* green-200  */

  --o-r:14px;
  --o-cien:0 1px 2px rgba(31,31,31,.05), 0 8px 24px rgba(31,31,31,.06);

  /* szerokosc bierze sie z kontenera motywu, nie z limitu tutaj.
     Czytelnosc pilnuje --o-czytelnie ponizej, w sekcji desktop. */
  --o-czytelnie:72ch;

  max-width:100%;
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.62;
  color:var(--o-tekst);
}

/* Warianty akcentu. Domyslnie zielen, zgodnie z guidelines.
   Ponizsze klasy istnieja na wypadek pojedynczego produktu, ktory ma sie
   wyroznic, ale guidelines mowia wprost: akcenty oszczednie. Nie rozdawaj
   ich hurtem, bo wtedy przestaja byc akcentami. */
.olej-opis.akcent-fiolet{--o-akcent:#483D6C;--o-akcent-mocny:#14101E;--o-akcent-tlo:#F4F2FA;--o-akcent-jasny:#9384B7}
.olej-opis.akcent-cytryna{--o-akcent:#DDAC1E;--o-akcent-mocny:#0D2729;--o-akcent-tlo:#FFF6D1;--o-akcent-jasny:#FFE183}

.olej-opis *{box-sizing:border-box}
.olej-opis img{max-width:100%;display:block}
.olej-opis > * + *{margin-top:34px}

/* --- neutralizacja stylow motywu ---
   Flatsome dodaje wciecie i punktory do kazdej listy w opisie produktu.
   Przez to siatki wyjezdzaly w prawo i robil sie poziomy pasek przewijania.
   Reguly motywu potrafia miec wyzsza specyficznosc albo ladowac sie pozniej
   (Custom CSS z Theme Options), wiec tutaj swiadomie uzywamy !important.
   To jedyne miejsce w tym pliku, gdzie jest to potrzebne. */
/* Winowajca: Flatsome ma regule
       .col-inner ul li, .entry-content ul li { margin-left: 1.3em }
   o specyficznosci 0,1,2. Wciecie siedzi na LI, nie na UL, i bije kazdy
   zwykly selektor z jedna klasa. Dlatego resetujemy je punktowo, na li,
   selektorem 0,2,2 plus !important.
   Ruszamy wylacznie margin-left, padding-left i punktory. Marginesy pionowe
   i paddingi kart zostaja pod kontrola regul komponentow nizej. */
.olej-opis ul.olej-korzysci,
.olej-opis ul.olej-pasuje,
.olej-opis ol.olej-kroki{
  padding-left:0 !important;
  margin-left:0 !important;
  list-style:none !important;
}
/* UWAGA: nie resetujemy tutaj paddingu. Motyw ustawia na li tylko
   margin-left i margin-bottom, zadnego paddingu, a karty komponentow maja
   wlasny padding, ktory !important by skasowal. */
.olej-opis ul.olej-korzysci > li,
.olej-opis ul.olej-pasuje > li{
  margin:0 !important;
  text-indent:0 !important;
  list-style:none !important;
}
.olej-opis ul.olej-pasuje > li{display:flex !important}
.olej-opis ol.olej-kroki > li{
  margin-left:0 !important;
  text-indent:0 !important;
  list-style:none !important;
}
.olej-opis ul.olej-korzysci > li::marker,
.olej-opis ul.olej-pasuje > li::marker,
.olej-opis ol.olej-kroki > li::marker{content:none !important}

/* listy, ktore punktory maja zachowac: zerujemy wciecie motywu,
   ale zostawiamy wlasne padding-left na UL */
.olej-opis ul.olej-lista{padding-left:19px !important;margin-left:0 !important}
.olej-opis ul.olej-lista > li{margin-left:0 !important;list-style:disc !important}
.olej-opis .olej-porownanie ul{padding-left:16px !important;margin-left:0 !important}
.olej-opis .olej-porownanie ul > li{margin-left:0 !important;list-style:disc !important}

/* --- typografia sekcji --- */
.olej-tytul{
  font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.3;
  margin:0 0 12px;color:var(--o-tekst);
}
/* Etykieta wersalikami. Guidelines: Semibold, dodatni letter spacing.
   Kolor akcentu, czyli domyslnie zielen, nie zloto. */
.olej-nadtytul{
  display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--o-akcent);font-weight:600;margin-bottom:5px;
}

/* --- lead --- */
.olej-lead{font-size:18px;line-height:1.58;color:var(--o-tekst);font-weight:500;margin:0}
.olej-lead strong{color:var(--o-akcent);font-weight:600}

/* --- ikony korzysci --- */
.olej-korzysci{display:grid;grid-template-columns:1fr;gap:10px;margin:0;padding:0;list-style:none}
.olej-korzysci li{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--o-tlo-alt);border:1px solid var(--o-linia);
  border-radius:var(--o-r);padding:14px 16px;
}
/* Wymiary podane wprost, nie przez flex-basis. W układzie kolumnowym
   flex-basis odnosi się do wysokości, przez co kafelek zwężał się do
   szerokości samego znaku, inaczej dla każdej ikony.
   align-self i justify-self pilnują, żeby kafelek się nie rozciągał,
   niezależnie od tego czy rodzic jest flexem w wierszu, w kolumnie, czy gridem. */
.olej-ikona{
  flex:none;
  width:34px;height:34px;
  align-self:flex-start;justify-self:start;
  border-radius:10px;
  background:var(--o-akcent-tlo);color:var(--o-akcent);
  display:grid;place-items:center;
  font-size:17px;line-height:1;
}
.olej-korzysci b{display:block;font-size:14.5px;font-weight:600;margin-bottom:1px}
.olej-korzysci span.t{font-size:13.5px;color:var(--o-tekst-slaby);line-height:1.5}

/* --- karuzela --- */
/* Bez ujemnych marginesow. Wczesniej karuzela wychodzila 20 px poza kolumne,
   co zakladalo, ze kontener opisu ma dokladnie 20 px paddingu. W Flatsome tak
   nie jest, wiec pierwsza karta traciła odstep i przyklejala sie do krawedzi. */
.olej-karuzela-wrap{position:relative}
.olej-karuzela{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 0 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.olej-karuzela::-webkit-scrollbar{display:none}

/* strzalki: dodawane skryptem, widoczne tylko tam gdzie jest myszka */
.olej-strzalka{
  display:none;position:absolute;top:calc(50% - 26px);z-index:2;
  width:40px;height:40px;border-radius:50%;
  background:var(--o-tlo-karta);border:1px solid var(--o-linia);
  box-shadow:var(--o-cien);cursor:pointer;padding:0;
  color:var(--o-akcent);font-size:0;line-height:0;
  transition:opacity .18s ease, transform .18s ease;
}
.olej-strzalka::before{
  content:"";display:block;width:9px;height:9px;margin:0 auto;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
}
.olej-strzalka-lewo{left:6px}
.olej-strzalka-lewo::before{transform:translateX(2px) rotate(-135deg)}
.olej-strzalka-prawo{right:6px}
.olej-strzalka-prawo::before{transform:translateX(-2px) rotate(45deg)}
.olej-strzalka:hover{transform:scale(1.06)}
.olej-strzalka[disabled]{opacity:.25;cursor:default;transform:none}

/* podpowiedz o przesuwaniu tylko na ekranach dotykowych */
.olej-podpowiedz{display:none;font-size:11.5px;color:var(--o-tekst-slaby);margin:2px 0 0}
@media (hover:none) and (pointer:coarse){
  .olej-podpowiedz{display:block}
}
.olej-karta{
  flex:0 0 76%;max-width:270px;scroll-snap-align:start;
  background:var(--o-tlo-karta);border:1px solid var(--o-linia);
  border-radius:var(--o-r);overflow:hidden;box-shadow:var(--o-cien);
}
.olej-karta img{aspect-ratio:4/3;object-fit:cover;width:100%}
.olej-karta-tresc{padding:13px 15px 16px}
.olej-karta h4{margin:0 0 4px;font-size:14.5px;font-weight:600;line-height:1.35}
.olej-karta p{margin:0;font-size:13px;color:var(--o-tekst-slaby);line-height:1.5}
.olej-karta .olej-dawka{
  display:inline-block;margin-top:9px;font-size:11.5px;font-weight:600;
  color:var(--o-zloto);background:var(--o-zloto-tlo);border-radius:6px;padding:3px 8px;
}

/* --- sposoby uzycia --- */
.olej-sposoby{display:grid;gap:10px}
.olej-sposob{
  display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;
  padding:15px 16px;border-radius:var(--o-r);
  background:var(--o-tlo-alt);border:1px solid var(--o-linia);
}
.olej-sposob .olej-ikona{width:44px;height:44px;font-size:20px;border-radius:12px}
.olej-sposob h4{margin:0 0 2px;font-size:14.5px;font-weight:600}
.olej-sposob p{margin:0;font-size:13.5px;color:var(--o-tekst-slaby);line-height:1.5}
.olej-sposob .olej-dawka{
  display:inline-block;margin-top:8px;font-size:11.5px;font-weight:600;
  color:var(--o-zloto);background:var(--o-zloto-tlo);border-radius:6px;padding:3px 8px;
}

/* --- media plus tekst --- */
.olej-media{display:grid;gap:16px}
.olej-media img{border-radius:var(--o-r);aspect-ratio:4/3;object-fit:cover;width:100%}
.olej-media p{margin:0 0 10px;font-size:14.5px;color:var(--o-tekst-slaby);line-height:1.62}
.olej-media p:last-child{margin-bottom:0}

/* --- kroki --- */
.olej-kroki{list-style:none;margin:14px 0 0;padding:0;counter-reset:k}
.olej-kroki li{
  counter-increment:k;position:relative;padding-left:40px;margin-bottom:13px;
  font-size:13.8px;color:var(--o-tekst-slaby);line-height:1.55;
}
.olej-kroki li:last-child{margin-bottom:0}
.olej-kroki li::before{
  content:counter(k);position:absolute;left:0;top:-1px;
  width:26px;height:26px;border-radius:50%;
  background:var(--o-akcent);color:#fff;
  display:grid;place-items:center;font-size:12.5px;font-weight:700;
}
.olej-kroki b{color:var(--o-tekst);font-weight:600}

/* --- nota bezpieczenstwa --- */
.olej-nota{
  display:flex;gap:11px;align-items:flex-start;
  background:var(--o-zloto-tlo);border-radius:var(--o-r);
  padding:13px 15px;font-size:13px;line-height:1.5;color:var(--o-tekst);margin:0;
}
.olej-nota span.i{flex:none;font-size:15px;line-height:1.35}

/* --- pasuje do --- */
.olej-pasuje{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  margin:0;padding:0;list-style:none;
}
.olej-pasuje li{display:flex}
.olej-pasuje a{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 12px;border-radius:12px;
  background:var(--o-tlo-karta);border:1px solid var(--o-linia);
  text-decoration:none;color:var(--o-tekst);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.olej-pasuje a:hover{
  border-color:var(--o-akcent-jasny);
  box-shadow:var(--o-cien);
  transform:translateY(-2px);
  color:var(--o-tekst);
}
.olej-pasuje-foto{
  flex:0 0 52px;width:52px;height:52px;border-radius:10px;
  background:var(--o-akcent-tlo);overflow:hidden;
  display:grid;place-items:center;
}
.olej-pasuje-foto img{width:100%;height:100%;object-fit:contain;padding:4px}
.olej-pasuje-inicjal{
  color:var(--o-akcent);font-weight:700;font-size:19px;
  background:var(--o-zloto-tlo);
}
.olej-pasuje-tekst{min-width:0}
.olej-pasuje b{
  display:block;font-size:13.5px;font-weight:600;line-height:1.25;
  overflow-wrap:anywhere;
}
.olej-pasuje small{
  display:block;font-weight:400;font-size:11.5px;
  color:var(--o-tekst-slaby);margin-top:2px;line-height:1.3;
}

/* --- cytat --- */
.olej-cytat{
  margin:0;padding:20px 22px;border-radius:var(--o-r);
  background:var(--o-akcent-tlo);border-left:3px solid var(--o-akcent);
  font-size:17px;line-height:1.5;font-weight:500;font-style:italic;color:var(--o-akcent-mocny);
}

/* --- cta --- */
.olej-cta{
  text-align:center;padding:26px 22px;border-radius:var(--o-r);
  background:var(--o-tlo-alt);border:1px solid var(--o-linia);
}
.olej-cta h4{margin:0 0 6px;font-size:16px;font-weight:700}
.olej-cta p{margin:0 0 16px;font-size:13.5px;color:var(--o-tekst-slaby)}
.olej-przycisk{
  display:inline-block;background:var(--o-akcent);color:#fff;
  text-decoration:none;font-weight:700;font-size:14px;
  padding:13px 30px;border-radius:999px;
}
.olej-przycisk:hover{opacity:.9;color:#fff}

/* --- akordeon --- */
.olej-akordeon{border-top:1px solid var(--o-linia)}
.olej-akordeon details{border-bottom:1px solid var(--o-linia)}
.olej-akordeon summary{
  list-style:none;cursor:pointer;padding:17px 34px 17px 0;position:relative;
  font-size:15px;font-weight:600;line-height:1.35;
}
.olej-akordeon summary::-webkit-details-marker{display:none}
.olej-akordeon summary::after{
  content:"";position:absolute;right:6px;top:23px;
  width:8px;height:8px;border-right:2px solid var(--o-akcent);border-bottom:2px solid var(--o-akcent);
  transform:rotate(45deg);transition:transform .18s ease;
}
.olej-akordeon details[open] summary::after{transform:rotate(-135deg)}
.olej-akordeon-tresc{padding:0 0 22px}
.olej-akordeon-tresc p{margin:0;font-size:14px;color:var(--o-tekst-slaby);line-height:1.6}

/* Odstepy miedzy blokami w akordeonie.
   UWAGA: regula musi miec wyzsza specyficznosc niz .olej-akordeon-tresc p,
   ktore zeruje marginesy. Bez przedrostka .olej-opis akapity sklejaja sie
   w jeden blok, a tekst przykleja sie do ramek komponentow. */
.olej-opis .olej-akordeon-tresc > * + *{margin-top:16px}

/* Komponenty w ramkach potrzebuja wiecej powietrza pod spodem,
   bo ich obrys wizualnie zjada odstep. */
.olej-opis .olej-akordeon-tresc > .olej-porownanie + *,
.olej-opis .olej-akordeon-tresc > .olej-przewijaj + *,
.olej-opis .olej-akordeon-tresc > .olej-nuty + *,
.olej-opis .olej-akordeon-tresc > .olej-liczby + *,
.olej-opis .olej-akordeon-tresc > .olej-fakty + *,
.olej-opis .olej-akordeon-tresc > .olej-media + *,
.olej-opis .olej-akordeon-tresc > .olej-lista + *,
.olej-opis .olej-akordeon-tresc > .olej-karuzela-wrap + *{margin-top:26px}

/* podpowiedz o przesuwaniu ma zostac tuz pod karuzela */
.olej-opis .olej-akordeon-tresc > .olej-podpowiedz{margin-top:2px}

/* --- nuty zapachowe --- */
.olej-nuty{display:grid;gap:8px}
.olej-nuta{
  display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:center;
  padding:13px 16px;border-radius:11px;background:var(--o-tlo-alt);border:1px solid var(--o-linia);
}
.olej-nuta b{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--o-akcent);font-weight:700}
.olej-nuta span{font-size:13.5px;color:var(--o-tekst-slaby);line-height:1.45}
.olej-nuta.jest{background:var(--o-akcent-tlo);border-color:var(--o-akcent-jasny)}
.olej-nuta.jest span{color:var(--o-tekst)}

/* --- fakty --- */
.olej-fakty{margin:0;display:grid;gap:0}
.olej-fakty div{
  display:grid;grid-template-columns:44% 56%;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--o-linia);
}
.olej-fakty div:last-child{border-bottom:0}
.olej-fakty dt{font-size:12.5px;color:var(--o-tekst-slaby);margin:0}
.olej-fakty dd{margin:0;font-size:13.5px;font-weight:600}

/* --- co w zestawie ---
   Uzywane przy urzadzeniach i akcesoriach. Ten sam ksztalt co ikony korzysci,
   ale zawsze w jednej kolumnie, bo pozycji bywa wiecej niz trzy. */
.olej-zestaw{display:grid;grid-template-columns:1fr;gap:9px;margin:0;padding:0;list-style:none}
.olej-zestaw li{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--o-tlo-alt);border:1px solid var(--o-linia);
  border-radius:11px;padding:12px 15px;
}
.olej-zestaw b{display:block;font-size:14px;font-weight:600;margin-bottom:1px}
.olej-zestaw span.t{font-size:13px;color:var(--o-tekst-slaby);line-height:1.5}

/* --- porownanie --- */
.olej-porownanie{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.olej-porownanie > div{padding:15px;border-radius:var(--o-r);background:var(--o-tlo-alt);border:1px solid var(--o-linia)}
.olej-porownanie h5{margin:0 0 3px;font-size:13.5px;font-weight:700}
/* Klasa `cena` trzyma podtytul kolumny, nie kwote. Nazwa jest historyczna
   i mylaca, ale zmiana wymusilaby ponowny import wszystkich opisow.
   `podtytul` obsluzone na wypadek, gdyby kiedys doszlo do przemianowania. */
.olej-porownanie .cena,
.olej-porownanie .podtytul{font-size:11.5px;color:var(--o-akcent);font-weight:600;margin:0 0 9px}
.olej-porownanie ul{margin:0;padding-left:16px;font-size:12.5px;color:var(--o-tekst-slaby);line-height:1.5}
.olej-porownanie li{margin-bottom:4px}

/* --- liczby --- */
.olej-liczby{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;text-align:center}
.olej-liczby > div{padding:15px 8px;border-radius:11px;background:var(--o-akcent-tlo)}
.olej-liczby b{display:block;font-size:21px;font-weight:700;color:var(--o-akcent-mocny);line-height:1.1}
.olej-liczby span{display:block;font-size:11.5px;color:var(--o-tekst-slaby);margin-top:4px;line-height:1.35}

/* --- tabela --- */
.olej-przewijaj{overflow-x:auto}
.olej-tabela{width:100%;border-collapse:collapse;font-size:13px}
.olej-tabela th{
  text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--o-tekst-slaby);font-weight:700;padding:0 10px 8px 0;
  border-bottom:1px solid var(--o-linia);
}
.olej-tabela td{padding:10px 10px 10px 0;border-bottom:1px solid var(--o-linia);color:var(--o-tekst-slaby)}
.olej-tabela td:first-child{color:var(--o-tekst);font-weight:600}

/* --- lista --- */
.olej-lista{margin:0;padding-left:19px;font-size:13.8px;color:var(--o-tekst-slaby);line-height:1.6}
.olej-lista li{margin-bottom:7px}

/* --- desktop --- */
@media (min-width:720px){
  .olej-korzysci{grid-template-columns:repeat(3,1fr)}
  .olej-korzysci li{flex-direction:column;gap:10px}
  .olej-media{grid-template-columns:1fr 1fr;align-items:center;gap:24px}
  .olej-media.odwrot img{order:2}
  .olej-karta{flex-basis:250px}
  .olej-pasuje{grid-template-columns:repeat(3,1fr)}
}

/* --- szerokie ekrany ---
   Opis wypelnia kontener motywu, ale same bloki tekstu maja limit
   czytelnosci, zeby linie nie ciagnely sie przez pol ekranu.
   Komponenty siatkowe i karuzela biora cala dostepna szerokosc. */
@media (min-width:1000px){
  .olej-lead,
  .olej-nota,
  .olej-cytat,
  .olej-opis > section > p,
  .olej-akordeon-tresc > p,
  .olej-lista{max-width:var(--o-czytelnie)}

  .olej-media{gap:34px}
  .olej-media p{max-width:none}

  .olej-sposoby{grid-template-columns:repeat(3,1fr)}
  .olej-sposob{grid-template-columns:1fr;gap:11px}

  .olej-nuty,
  .olej-fakty,
  .olej-tabela{max-width:820px}

  .olej-porownanie{max-width:900px}
  .olej-liczby{max-width:620px}
  .olej-karta{flex-basis:280px}
  .olej-cta{max-width:640px}

  .olej-tytul{font-size:21px}
  .olej-akordeon summary{font-size:16px}
}

/* strzalki pokazujemy tam, gdzie jest kursor, niezaleznie od szerokosci */
@media (hover:hover) and (pointer:fine){
  .olej-strzalka.jest-potrzebna{display:block}
}

/* ==========================================================================
   WYLACZNIKI SEKCJI
   Chowaja komponent we wszystkich produktach naraz, bez ruszania tresci.
   Zakomentuj regule (otocz ja znakami slash gwiazdka), zeby sekcja wrocila.
   ========================================================================== */

/* CTA "Nie wiesz, od czego zacząć?" : wylaczone do czasu, az powstanie
   zestaw startowy. Zeby przywrocic, zakomentuj dwie ponizsze reguly. */
.olej-opis section:has(.olej-cta){display:none}
.olej-opis .olej-cta{display:none}