.ol {
  /* Paleta marki. Wartosci wprost z marka/brand-tokens.css (Figma, 5.09.2026).
     Zielen dominuje. Cytryna i lawenda to akcenty, stosowane oszczednie.
     Bez gradientow i bez kolorow spoza tej listy. */
  --ol-zielen-700: #0D2729;
  --ol-zielen-600: #294749;
  --ol-zielen-500: #175C5B;
  --ol-zielen-400: #388180;
  --ol-zielen-300: #92C7C6;
  --ol-zielen-200: #DFF7F4;
  --ol-zielen-100: #EEFFFD;
  --ol-zielen-050: #F7FFFE;

  --ol-cytryna-700: #DDAC1E;
  --ol-cytryna-600: #F6C026;
  --ol-cytryna-500: #FECF4A;
  --ol-cytryna-100: #FFFAE7;
  --ol-cytryna-050: #FFFDF4;

  --ol-lawenda-600: #483D6C;
  --ol-lawenda-500: #6C5E8D;
  --ol-lawenda-400: #9384B7;
  --ol-lawenda-100: #F4F2FA;

  --ol-ink: #1F1F1F;
  --ol-ink-soft: #404040;
  --ol-line: #E7E7E7;
  --ol-paper: #FFFFFF;
  --ol-paper-tint: #F6F6F6;

  /* Kolory funkcjonalne. Sa poza paleta marki i sluza wylacznie do
     sygnalizowania stanu: bledna odpowiedz, stezenie do rozwagi. */
  --ol-uwaga-500: var(--ol-uwaga-500);
  --ol-uwaga-300: var(--ol-uwaga-300);
  --ol-uwaga-050: var(--ol-uwaga-050);

  /* Typografia marki: Montserrat.
     Naglowki: Bold, Semibold, Medium. Paragrafy: Medium i Regular. */
  --ol-font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ol-font-body: var(--ol-font-head);

  /* Skala (Elements of Typographic Style, stosunek 1.25) */
  --ol-t-xs: 0.78rem;
  --ol-t-sm: 0.9rem;
  --ol-t-base: 1.05rem;
  --ol-t-md: 1.25rem;
  --ol-t-lg: 1.55rem;
  --ol-t-xl: 1.95rem;
  --ol-t-2xl: 2.45rem;
  --ol-t-3xl: 3.2rem;

  /* Rytm */
  --ol-gap: 1.5rem;
  --ol-blok: 3.25rem;
  --ol-r-sm: 4px;
  --ol-r-md: 10px;
  --ol-r-lg: 18px;

  font-family: var(--ol-font-body);
  color: var(--ol-ink);
  font-size: var(--ol-t-base);
  line-height: 1.7;
}

.ol *,
.ol *::before,
.ol *::after { box-sizing: border-box; }

.ol h2, .ol h3, .ol h4 {
  font-family: var(--ol-font-head);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ol-zielen-700);
  line-height: 1.2;
  margin: 0 0 0.6em;
}
.ol h3, .ol h4 { line-height: 1.3; }
.ol h2 { font-size: var(--ol-t-xl); }
.ol h3 { font-size: var(--ol-t-md); }
.ol p { margin: 0 0 1.1em; max-width: 68ch; }
.ol :where(a) { color: var(--ol-zielen-500); }

.ol-blok { margin: var(--ol-blok) 0; }

/* Wspolny naglowek sekcji: cienka zlota kreska nad tytulem.
   Kreska niesie informacje o starcie nowej sekcji, nie jest ozdoba. */
.ol-naglowek {
  border-top: 2px solid var(--ol-cytryna-700);
  padding-top: 0.9rem;
  margin-bottom: 1.4rem;
}
.ol-naglowek h2 { margin-bottom: 0.25rem; }
.ol-naglowek p {
  color: var(--ol-ink-soft);
  font-size: var(--ol-t-sm);
  margin: 0;
}

/* ==========================================================================
   1. Szybka odpowiedz
   ========================================================================== */

.ol-szybka {
  background: var(--ol-zielen-100);
  border-left: 5px solid var(--ol-cytryna-700);
  border-radius: 0 var(--ol-r-md) var(--ol-r-md) 0;
  padding: 1.5rem 1.75rem;
}
.ol-szybka__tytul {
  font-family: var(--ol-font-head);
  font-size: var(--ol-t-sm);
  font-weight: 600;
  color: var(--ol-zielen-500);
  margin-bottom: 0.5rem;
}
.ol-szybka p:last-child { margin-bottom: 0; }

/* ==========================================================================
   2. Cytat
   ========================================================================== */

.ol-cytat {
  border: 0;
  margin: var(--ol-blok) 0;
  padding: 0 0 0 2.5rem;
  position: relative;
}
.ol-cytat::before {
  content: '';
  position: absolute;
  left: 0; top: 0.35em;
  width: 14px; height: 14px;
  border-radius: 50% 50% 50% 2px;
  background: var(--ol-lawenda-500);
  transform: rotate(45deg);
}
.ol-cytat p {
  font-family: var(--ol-font-head);
  font-size: var(--ol-t-lg);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ol-zielen-700);
  margin: 0;
}

/* ==========================================================================
   3. Karty (4)
   ========================================================================== */

.ol-karty__siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem;
}
.ol-karta {
  background: var(--ol-paper);
  border: 1px solid var(--ol-line);
  border-radius: var(--ol-r-md);
  padding: 1.35rem;
}
.ol-karta__ikona {
  width: 34px; height: 34px;
  margin-bottom: 0.85rem;
  color: var(--ol-zielen-400);
}
.ol-karta h3 { font-size: var(--ol-t-base); margin-bottom: 0.35rem; }
.ol-karta p {
  font-size: var(--ol-t-sm);
  color: var(--ol-ink-soft);
  margin: 0;
}

/* ==========================================================================
   4. Featured produkt - najmocniejszy blok w artykule
   ========================================================================== */

.ol-featured {
  background: var(--ol-zielen-700);
  color: var(--ol-zielen-200);
  border-radius: var(--ol-r-lg);
  overflow: hidden;
  position: relative;
}
/* Poswiata usunieta: brand guidelines nie dopuszczaja gradientow. */
.ol-featured__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  position: relative;
  z-index: 1;
}
.ol-featured__foto {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.25rem;
}
/* Kremowy kafel. Packshoty ze sklepu maja biale tlo, wiec zamiast
   bialego prostokata na ciemnym panelu robimy swiadomy jasny kafel. */
.ol-featured__kafel {
  width: 100%;
  background: var(--ol-cytryna-050);
  border: 1px solid rgba(212, 160, 23, 0.45);
  border-radius: var(--ol-r-md);
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55);
}
.ol-featured__kafel img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}
.ol-featured__tresc { padding: 2.5rem 2.5rem 2.25rem 0.75rem; }

.ol-featured__odznaka {
  display: inline-flex;
  align-items: center;
  font-family: var(--ol-font-head);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ol-zielen-700);
  background: var(--ol-cytryna-500);
  padding: 8px 17px;
  border-radius: var(--ol-r-sm);
  margin-bottom: 1.1rem;
}
.ol-featured h2,
.ol-featured h3 { color: #FFFFFF; }
.ol-featured__nazwa {
  font-size: var(--ol-t-2xl);
  margin-bottom: 0.15rem;
}
.ol-featured__lacina {
  font-style: italic;
  color: var(--ol-cytryna-500);
  font-size: var(--ol-t-sm);
  margin-bottom: 1.1rem;
}
.ol-featured__opis {
  color: var(--ol-zielen-300);
  font-size: var(--ol-t-sm);
  margin-bottom: 1.4rem;
}

/* Pasek metryki produktu */
.ol-featured__metryka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--ol-r-md);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.ol-featured__metryka div {
  background: var(--ol-zielen-700);
  padding: 0.75rem 0.85rem;
}
.ol-featured__metryka dt {
  font-size: var(--ol-t-xs);
  color: var(--ol-zielen-300);
  margin-bottom: 0.15rem;
}
.ol-featured__metryka dd {
  font-family: var(--ol-font-head);
  font-size: var(--ol-t-sm);
  font-weight: 500;
  margin: 0;
  color: #FFFFFF;
}

.ol-featured__stopka {
  display: flex;
  align-items: center;
  gap: 1rem 1.75rem;
  flex-wrap: wrap;
}
.ol-featured__przyciski {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ol-featured__cena {
  font-family: var(--ol-font-head);
  font-size: var(--ol-t-lg);
  color: #FFFFFF;
}
.ol-featured__cena span {
  display: block;
  font-family: var(--ol-font-body);
  font-size: var(--ol-t-xs);
  color: var(--ol-zielen-300);
}

/* ==========================================================================
   Przyciski
   Spec z brand guide olejki.app (landing warsztatow):
   Montserrat 600, wersaliki, letter-spacing .12em, promien 4px, padding 16/30,
   uniesienie o 2px przy najechaniu.
   ========================================================================== */

.ol-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ol-font-head);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  padding: 16px 30px;
  border-radius: var(--ol-r-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.ol-btn:focus-visible {
  outline: 2px solid var(--ol-cytryna-500);
  outline-offset: 3px;
}

/* Glowny, zloty. Na jasnym i na ciemnym tle. */
.ol-btn--zloty {
  background: var(--ol-cytryna-700);
  color: var(--ol-zielen-700);
  box-shadow: 0 10px 26px -12px rgba(221, 172, 30, 0.7);
}
.ol-btn--zloty:hover {
  background: var(--ol-cytryna-500);
  color: var(--ol-zielen-700);
  transform: translateY(-2px);
}

/* Konturowy na ciemnym tle. */
.ol-btn--kontur {
  background: transparent;
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
}
.ol-btn--kontur:hover {
  background: #FFFFFF;
  color: var(--ol-zielen-700);
  border-color: #FFFFFF;
  transform: translateY(-2px);
}

/* Konturowy na jasnym tle. */
.ol-btn--petrol {
  background: transparent;
  color: var(--ol-zielen-500);
  border: 1.5px solid var(--ol-zielen-500);
}
.ol-btn--petrol:hover {
  background: var(--ol-zielen-500);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* ==========================================================================
   5. Galeria wariantow
   ========================================================================== */

.ol-galeria {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.ol-galeria__scena {
  background: var(--ol-zielen-100);
  border-radius: var(--ol-r-lg);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ol-galeria__scena img {
  max-width: 78%;
  max-height: 82%;
  object-fit: contain;
  display: block;
}
.ol-galeria__miniatury {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.ol-galeria__mini {
  width: 62px; height: 62px;
  padding: 0;
  border: 1px solid var(--ol-line);
  border-radius: var(--ol-r-sm);
  background: var(--ol-paper-tint);
  cursor: pointer;
  overflow: hidden;
}
.ol-galeria__mini img { width: 100%; height: 100%; object-fit: contain; }
.ol-galeria__mini[aria-selected="true"] {
  border-color: var(--ol-cytryna-700);
  box-shadow: 0 0 0 2px var(--ol-cytryna-100);
}
.ol-galeria__opis h3 { margin-bottom: 0.4rem; }
.ol-galeria__pigulki {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.ol-galeria__pigulki li {
  font-size: var(--ol-t-xs);
  background: var(--ol-lawenda-100);
  color: var(--ol-lawenda-600);
  padding: 0.3rem 0.7rem;
  border-radius: var(--ol-r-sm);
}

/* ==========================================================================
   6. Kalkulator rozcienczen - element wiodacy
   ========================================================================== */

.ol-kalk {
  background: var(--ol-paper);
  border: 1px solid var(--ol-line);
  border-radius: var(--ol-r-lg);
  overflow: hidden;
}
.ol-kalk__head {
  background: var(--ol-zielen-100);
  border-bottom: 1px solid var(--ol-line);
  padding: 1.25rem 1.75rem;
}
.ol-kalk__head h3 { margin-bottom: 0.2rem; }
.ol-kalk__head p {
  margin: 0;
  font-size: var(--ol-t-sm);
  color: var(--ol-ink-soft);
}
/* Na szerokim ekranie wynik stoi w drugiej kolumnie, obok suwakow.
   Na waskim kolumny ukladaja sie pionowo, wiec kolejnosc ustawiamy
   obszarami: suwaki, wynik, dopiero potem profile. Inaczej panel z liczba
   kropli wypadalby pod przyciskami i nie bylo go widac przy przesuwaniu. */
.ol-kalk__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  grid-template-areas:
    "suwaki wynik"
    "profile wynik";
  align-items: start;
  gap: 1.75rem 2rem;
  padding: 1.75rem;
}
.ol-kalk__suwaki       { grid-area: suwaki; }

/* Wariant z jednym suwakiem, bez pola profili. */
.ol-kalk__body--proste {
  grid-template-areas: "suwaki wynik";
  align-items: center;
}
.ol-kalk__body--proste .ol-kalk__pole { margin-bottom: 0; }
.ol-kalk__wynik        { grid-area: wynik; }
.ol-kalk__profile-pole { grid-area: profile; }
.ol-kalk__pole { margin-bottom: 1.5rem; }
.ol-kalk__pole:last-child { margin-bottom: 0; }
.ol-kalk__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--ol-font-head);
  font-size: var(--ol-t-sm);
  font-weight: 500;
  margin-bottom: 0.6rem;
}
.ol-kalk__label b {
  font-weight: 600;
  color: var(--ol-zielen-500);
}

.ol-kalk input[type="range"] {
  width: 100%;
  height: 26px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.ol-kalk input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--ol-zielen-200);
}
.ol-kalk input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--ol-zielen-200);
}
.ol-kalk input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--ol-cytryna-500);
  border: 3px solid var(--ol-zielen-700);
}
.ol-kalk input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ol-cytryna-500);
  border: 3px solid var(--ol-zielen-700);
}
.ol-kalk input[type="range"]:focus-visible {
  outline: 2px solid var(--ol-zielen-500);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Pasek stref pod suwakiem stezenia */
.ol-kalk__strefy {
  display: grid;
  grid-template-columns: 5% 21% 21% 53%;
  gap: 2px;
  margin-top: 0.55rem;
}
.ol-kalk__strefy span {
  height: 4px;
  border-radius: 2px;
  background: var(--ol-zielen-200);
}
.ol-kalk__strefy span[data-aktywna="true"]:nth-child(1) { background: var(--ol-zielen-400); }
.ol-kalk__strefy span[data-aktywna="true"]:nth-child(2) { background: var(--ol-zielen-500); }
.ol-kalk__strefy span[data-aktywna="true"]:nth-child(3) { background: var(--ol-cytryna-700); }
.ol-kalk__strefy span[data-aktywna="true"]:nth-child(4) { background: var(--ol-uwaga-500); }

.ol-kalk__strefa {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.7rem;
  font-size: var(--ol-t-sm);
  color: var(--ol-ink-soft);
}
.ol-kalk__strefa b {
  font-family: var(--ol-font-head);
  font-weight: 500;
  color: var(--ol-zielen-700);
  white-space: nowrap;
}
.ol-kalk__strefa::before {
  content: '';
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ol-zielen-400);
  transform: translateY(-1px);
}
.ol-kalk__strefa[data-poziom="2"]::before { background: var(--ol-zielen-500); }
.ol-kalk__strefa[data-poziom="3"]::before { background: var(--ol-cytryna-700); }
.ol-kalk__strefa[data-poziom="4"]::before { background: var(--ol-uwaga-500); }

/* Wynik zmienia akcent, gdy wchodzimy w strefe doraznа */
.ol-kalk__wynik[data-poziom="4"] .ol-kalk__krople { color: var(--ol-uwaga-300); }

.ol-kalk__mililitry {
  font-size: var(--ol-t-xs);
  color: var(--ol-zielen-300);
  margin-top: 0.35rem;
}

.ol-kalk__profile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ol-kalk__profil {
  font-family: var(--ol-font-body);
  font-size: var(--ol-t-sm);
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--ol-line);
  border-radius: var(--ol-r-sm);
  background: var(--ol-paper);
  color: var(--ol-ink-soft);
  cursor: pointer;
}
.ol-kalk__profil[aria-pressed="true"] {
  background: var(--ol-zielen-700);
  border-color: var(--ol-zielen-700);
  color: #FFFFFF;
}

/* Panel wyniku */
.ol-kalk__wynik {
  background: var(--ol-zielen-700);
  border-radius: var(--ol-r-md);
  padding: 1.5rem;
  color: var(--ol-zielen-200);
  align-self: start;
  text-align: center;
}
.ol-kalk__krople {
  font-family: var(--ol-font-head);
  font-size: var(--ol-t-3xl);
  font-weight: 500;
  line-height: 1;
  color: var(--ol-cytryna-500);
}
.ol-kalk__jednostka {
  font-family: var(--ol-font-head);
  font-size: var(--ol-t-sm);
  color: var(--ol-zielen-300);
  margin-bottom: 1.1rem;
}
.ol-kalk__zdanie {
  font-size: var(--ol-t-sm);
  line-height: 1.55;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 1rem;
  margin: 0;
  color: var(--ol-zielen-300);
}
.ol-kalk__ostrzezenie {
  display: none;
  margin-top: 0.9rem;
  font-size: var(--ol-t-xs);
  background: rgba(246,192,38,0.14);
  border-radius: var(--ol-r-sm);
  padding: 0.6rem 0.75rem;
  color: var(--ol-cytryna-500);
  text-align: left;
}
.ol-kalk__ostrzezenie[data-widoczne="true"] { display: block; }

.ol-kalk__stopka {
  border-top: 1px solid var(--ol-line);
  padding: 0.9rem 1.75rem;
  font-size: var(--ol-t-xs);
  color: var(--ol-ink-soft);
  background: var(--ol-paper-tint);
}

/* ==========================================================================
   Zdjecia redakcyjne
   Proporcje ustawione na sztywno, zeby nie bylo przeskoku ukladu przy ladowaniu.
   ========================================================================== */

.ol-foto { margin: 0 0 2rem; }
.ol-foto-para .ol-foto { margin-bottom: 0; }
.ol-foto img {
  width: 100%;
  display: block;
  border-radius: var(--ol-r-md);
  object-fit: cover;
  background: var(--ol-zielen-100);
}
.ol-foto--16-9 img { aspect-ratio: 16 / 9; }
.ol-foto--4-3 img  { aspect-ratio: 4 / 3; }

.ol-foto figcaption {
  font-size: var(--ol-t-sm);
  line-height: 1.6;
  color: var(--ol-ink-soft);
  margin-top: 1rem;
  padding: 0.15rem 0 0.15rem 1.1rem;
  border-left: 2px solid var(--ol-cytryna-700);
  max-width: 62ch;
}

.ol-foto-para {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Kalkulator konta hurtowego. Cztery progi PV zamiast czterech stref stezenia. */
.ol-kalk__progi {
  display: grid;
  grid-template-columns: 9% 27% 9% 55%;
  gap: 2px;
  margin-top: 0.55rem;
}
.ol-kalk__progi span {
  height: 4px;
  border-radius: 2px;
  background: var(--ol-zielen-200);
}
.ol-kalk__progi span[data-aktywna="true"]:nth-child(1) { background: var(--ol-uwaga-500); }
.ol-kalk__progi span[data-aktywna="true"]:nth-child(2) { background: var(--ol-zielen-400); }
.ol-kalk__progi span[data-aktywna="true"]:nth-child(3) { background: var(--ol-zielen-500); }
.ol-kalk__progi span[data-aktywna="true"]:nth-child(4) { background: var(--ol-cytryna-700); }

.ol-kalk__strefa[data-poziom="1"]::before { background: var(--ol-uwaga-500); }
.ol-kalk__wynik[data-poziom="1"] .ol-kalk__krople { color: var(--ol-uwaga-300); }
.ol-kalk__wynik[data-poziom="4"] .ol-kalk__krople { color: var(--ol-cytryna-500); }

/* ==========================================================================
   7. Mapa pochodzenia
   Mapa jest szeroka, wiec idzie na pelna szerokosc, a tekst pod nia.
   ========================================================================== */

.ol-mapa {
  background: var(--ol-zielen-100);
  border-radius: var(--ol-r-lg);
  padding: 1.75rem;
}
.ol-mapa__plansza {
  border-radius: var(--ol-r-md);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
/* Dwie wersje mapy. Szeroka ma 900 jednostek i na telefonie skalowalaby sie
   do okolo 0,4, przez co napisy staja sie nieczytelne. Wersja mala ma ciasniejszy
   kadr, mniej etykiet i wieksza typografie, wiec przy 380 px skala wynosi 0,9. */
.ol-mapa__plansza--mala { display: none; }
.ol-mapa svg { width: 100%; height: auto; display: block; }

.ol-mapa__tresc {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.5rem 2.5rem;
  align-items: start;
}
.ol-mapa__tresc p { grid-column: 1; margin-bottom: 0.9em; }
.ol-mapa__tresc p:last-of-type { margin-bottom: 0; }

.ol-mapa__fakty {
  grid-column: 2;
  grid-row: 1 / span 2;
  list-style: none;
  margin: 0;
  padding: 1.1rem 1.25rem;
  background: var(--ol-paper);
  border-radius: var(--ol-r-md);
}
.ol-mapa__fakty li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ol-line);
  font-size: var(--ol-t-sm);
  color: var(--ol-ink-soft);
}
.ol-mapa__fakty li:last-child { border-bottom: 0; padding-bottom: 0; }
.ol-mapa__fakty li:first-child { padding-top: 0; }
.ol-mapa__fakty b {
  font-family: var(--ol-font-head);
  font-weight: 500;
  color: var(--ol-zielen-700);
  white-space: nowrap;
}

/* Puls przy znaczniku destylarni */
.ol-mapa__puls {
  transform-origin: center;
  transform-box: fill-box;
  animation: ol-puls 2.8s ease-out infinite;
}
@keyframes ol-puls {
  0%   { transform: scale(0.6); opacity: 0.75; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ==========================================================================
   8. Piramida zapachowa
   ========================================================================== */

.ol-piramida {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: 2rem;
  align-items: center;
}
.ol-piramida svg { width: 100%; height: auto; }
.ol-piramida__lista { list-style: none; margin: 0; padding: 0; }
.ol-piramida__lista li {
  padding: 0.7rem 0 0.7rem 1.1rem;
  border-left: 3px solid var(--ol-line);
  margin-bottom: 0.4rem;
}
.ol-piramida__lista li[data-nuta="gora"]  { border-left-color: var(--ol-cytryna-500); }
.ol-piramida__lista li[data-nuta="serce"] { border-left-color: var(--ol-lawenda-500); }
.ol-piramida__lista li[data-nuta="baza"]  { border-left-color: var(--ol-zielen-500); }
.ol-piramida__lista b {
  display: block;
  font-family: var(--ol-font-head);
  color: var(--ol-zielen-700);
}
.ol-piramida__lista span {
  font-size: var(--ol-t-sm);
  color: var(--ol-ink-soft);
}

/* ==========================================================================
   9. Checklista
   ========================================================================== */

.ol-check {
  background: var(--ol-paper);
  border: 1px solid var(--ol-line);
  border-radius: var(--ol-r-lg);
  padding: 1.75rem;
}
.ol-check__pasek {
  height: 4px;
  background: var(--ol-zielen-200);
  border-radius: 2px;
  overflow: hidden;
  margin: 0.75rem 0 1.4rem;
}
.ol-check__wypelnienie {
  height: 100%;
  width: 0;
  background: var(--ol-cytryna-700);
  transition: width 0.28s ease;
}
.ol-check__licznik {
  font-size: var(--ol-t-sm);
  color: var(--ol-ink-soft);
}
.ol-check ul { list-style: none; margin: 0; padding: 0; }
.ol-check li { border-bottom: 1px solid var(--ol-line); }
.ol-check li:last-child { border-bottom: 0; }
.ol-check label {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.85rem 0;
  cursor: pointer;
}
.ol-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 0.2rem;
  accent-color: var(--ol-zielen-500);
  cursor: pointer;
}
.ol-check input:checked + span { color: var(--ol-ink-soft); text-decoration: line-through; }

/* ==========================================================================
   10. Video
   ========================================================================== */

.ol-video {
  position: relative;
  border-radius: var(--ol-r-lg);
  overflow: hidden;
  background: var(--ol-zielen-700);
  aspect-ratio: 16 / 9;
}
.ol-video img,
.ol-video iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}
.ol-video__play {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: rgba(13,39,41,0.32);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ol-video__play:hover { background: rgba(13,39,41,0.45); }
.ol-video__kolo {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--ol-cytryna-500);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ol-video__kolo svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--ol-zielen-700); }
.ol-video__podpis {
  font-size: var(--ol-t-sm);
  color: var(--ol-ink-soft);
  margin-top: 0.7rem;
}

/* ==========================================================================
   11. Quiz
   ========================================================================== */

.ol-quiz {
  background: var(--ol-lawenda-100);
  border-radius: var(--ol-r-lg);
  padding: 2rem;
}
.ol-quiz__postep {
  font-size: var(--ol-t-xs);
  color: var(--ol-lawenda-600);
  margin-bottom: 0.75rem;
}
.ol-quiz__pytanie {
  font-family: var(--ol-font-head);
  font-size: var(--ol-t-md);
  color: var(--ol-zielen-700);
  margin-bottom: 1.1rem;
}
.ol-quiz__odpowiedzi { display: grid; gap: 0.6rem; }
/* Motyw sklepu narzuca wersaliki wszystkim przyciskom. Odpowiedzi w quizie
   i profile w kalkulatorze to nie sa przyciski akcji, wiec je resetujemy. */
.ol-quiz__odp,
.ol-kalk__profil {
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
}

.ol-quiz__odp {
  text-align: left;
  font-family: var(--ol-font-body);
  font-size: var(--ol-t-sm);
  background: var(--ol-paper);
  border: 1px solid transparent;
  border-radius: var(--ol-r-md);
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  color: var(--ol-ink);
}
.ol-quiz__odp:hover:not([disabled]) { border-color: var(--ol-lawenda-500); }
.ol-quiz__odp[data-stan="dobrze"] {
  border-color: var(--ol-zielen-400);
  background: var(--ol-zielen-100);
}
.ol-quiz__odp[data-stan="zle"] {
  border-color: var(--ol-uwaga-500);
  background: var(--ol-uwaga-050);
}
.ol-quiz__odp[disabled] { cursor: default; }
.ol-quiz__feedback {
  margin-top: 1rem;
  font-size: var(--ol-t-sm);
  background: var(--ol-paper);
  border-radius: var(--ol-r-md);
  padding: 0.9rem 1.1rem;
  display: none;
}
.ol-quiz__feedback[data-widoczne="true"] { display: block; }
.ol-quiz__feedback b { color: var(--ol-zielen-500); }
.ol-quiz__nawigacja {
  margin-top: 1.25rem;
  display: flex;
  justify-content: flex-end;
}
.ol-quiz__wynik { text-align: center; padding: 1rem 0; }
.ol-quiz__wynik-liczba {
  font-family: var(--ol-font-head);
  font-size: var(--ol-t-3xl);
  font-weight: 500;
  color: var(--ol-lawenda-600);
  line-height: 1;
}
.ol-quiz__wynik p { margin: 0.75rem auto 1.35rem; max-width: 46ch; }

/* ==========================================================================
   12. FAQ
   ========================================================================== */

.ol-faq__lista {
  border-top: 1px solid var(--ol-line);
}
.ol-faq__item { border-bottom: 1px solid var(--ol-line); }
.ol-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 2.5rem 1.1rem 0;
  position: relative;
  font-family: var(--ol-font-head);
  font-size: var(--ol-t-base);
  font-weight: 500;
  color: var(--ol-zielen-700);
}
.ol-faq__item summary::-webkit-details-marker { display: none; }
.ol-faq__item summary::after {
  content: '';
  position: absolute;
  right: 0.5rem; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--ol-cytryna-700);
  border-bottom: 2px solid var(--ol-cytryna-700);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.ol-faq__item[open] summary::after { transform: translateY(-20%) rotate(225deg); }
.ol-faq__item summary:focus-visible {
  outline: 2px solid var(--ol-zielen-500);
  outline-offset: 2px;
}
.ol-faq__odp { padding: 0 2.5rem 1.3rem 0; }
.ol-faq__odp p { font-size: var(--ol-t-sm); margin-bottom: 0.6em; }
.ol-faq__odp p:last-child { margin-bottom: 0; }

/* ==========================================================================
   13. Karuzela produktow
   ========================================================================== */

.ol-karuzela__tor {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
}
.ol-produkt {
  scroll-snap-align: start;
  background: var(--ol-paper);
  border: 1px solid var(--ol-line);
  border-radius: var(--ol-r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.ol-produkt__foto {
  background: var(--ol-zielen-100);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ol-produkt__foto img { max-width: 62%; max-height: 76%; object-fit: contain; }
.ol-produkt__tresc { padding: 1rem 1.1rem 1.2rem; flex: 1; display: flex; flex-direction: column; }
.ol-produkt__nazwa {
  font-family: var(--ol-font-head);
  font-weight: 500;
  color: var(--ol-zielen-700);
  margin-bottom: 0.3rem;
}
.ol-produkt__opis {
  font-size: var(--ol-t-sm);
  color: var(--ol-ink-soft);
  margin: 0 0 0.9rem;
  flex: 1;
}
.ol-produkt__link {
  font-family: var(--ol-font-head);
  font-size: var(--ol-t-sm);
  font-weight: 600;
  color: var(--ol-zielen-500);
}

/* ==========================================================================
   14. Tabela
   ========================================================================== */

.ol-tabela { overflow-x: auto; }
.ol-tabela table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ol-t-sm);
}
.ol-tabela th {
  text-align: left;
  font-family: var(--ol-font-head);
  font-weight: 600;
  color: var(--ol-zielen-700);
  background: var(--ol-zielen-100);
  padding: 0.8rem 1rem;
  border-bottom: 2px solid var(--ol-cytryna-700);
  white-space: nowrap;
}
.ol-tabela td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--ol-line);
  vertical-align: top;
}
.ol-tabela tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   15. CTA koncowe
   ========================================================================== */

.ol-cta {
  background: var(--ol-zielen-500);
  border-radius: var(--ol-r-lg);
  padding: 2.5rem;
  color: var(--ol-zielen-200);
  text-align: center;
}
.ol-cta h2 { color: #FFFFFF; }
.ol-cta p {
  max-width: 52ch;
  margin: 0 auto 1.6rem;
  color: var(--ol-zielen-300);
}
.ol-cta__akcje {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   20. Archiwum kategorii (szablon wtyczki)
   ========================================================================== */

.ol-archiwum {
  max-width: 1080px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.ol-archiwum__naglowek { margin-bottom: 1.75rem; }
.ol-archiwum__tytul {
  font-family: var(--ol-font-head);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ol-zielen-700);
  margin: 0 0 0.6rem;
}
.ol-archiwum__opis {
  font-size: var(--ol-t-md);
  color: var(--ol-ink-soft);
  max-width: 60ch;
  line-height: 1.6;
}
.ol-archiwum__opis p:last-child { margin-bottom: 0; }

/* Pasek nawigacji przylega do naglowka, wiec zeruje gorny margines */
.ol-archiwum .ol-nawigacja { margin-top: 0; }

.ol-archiwum__pusto {
  background: var(--ol-zielen-100);
  border-radius: var(--ol-r-lg);
  padding: 3rem 2rem;
  text-align: center;
}
.ol-archiwum__pusto p {
  max-width: none;
  color: var(--ol-ink-soft);
  margin-bottom: 1.5rem;
}

/* Paginacja */
.ol-archiwum .pagination,
.ol-archiwum .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 2.75rem;
}
.ol-archiwum .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 0.85rem;
  font-family: var(--ol-font-head);
  font-size: var(--ol-t-sm);
  font-weight: 500;
  color: var(--ol-zielen-500);
  background: var(--ol-paper);
  border: 1px solid var(--ol-line);
  border-radius: var(--ol-r-sm);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.ol-archiwum .page-numbers:hover {
  border-color: var(--ol-zielen-400);
  color: var(--ol-zielen-700);
}
.ol-archiwum .page-numbers.current {
  background: var(--ol-zielen-700);
  border-color: var(--ol-zielen-700);
  color: #FFFFFF;
}
.ol-archiwum .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}
.ol-archiwum .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .ol-archiwum { padding: 2rem 1rem 3rem; }
}

/* ==========================================================================
   19. Pasek nawigacji po kategoriach
   Widoczny na hubie, na stronach kategorii i nad trescia artykulu.
   Celowo lzejszy niz menu sklepu: bez wersalikow, mniejszy, na jasnym tle.
   ========================================================================== */

.ol-nawigacja {
  background: var(--ol-zielen-100);
  border-top: 1px solid var(--ol-line);
  border-bottom: 1px solid var(--ol-line);
  margin: 0 0 2.25rem;
}
.ol-nawigacja__tor {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.75rem 1.25rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ol-nawigacja__tor::-webkit-scrollbar { display: none; }

.ol-nawigacja__poz {
  flex: 0 0 auto;
  font-family: var(--ol-font-body);
  font-size: 0.88rem;
  color: var(--ol-ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color 0.18s ease, box-shadow 0.18s ease;
}
.ol-nawigacja__poz:hover {
  color: var(--ol-zielen-700);
  box-shadow: inset 0 -2px 0 var(--ol-zielen-200);
}
.ol-nawigacja__poz--akt {
  color: var(--ol-zielen-700);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--ol-cytryna-700);
}
.ol-nawigacja__poz:focus-visible {
  outline: 2px solid var(--ol-zielen-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Na szerokich ekranach pozycje zawijaja sie do drugiego wiersza, wiec zadna
   kategoria nie chowa sie poza krawedzia. Na waskich ekranach zawijanie
   dalyby cztery wiersze, wiec tam pasek przewija sie w bok, a wygaszenie
   przy prawej krawedzi sygnalizuje, ze jest co przewijac. */
@media (max-width: 700px) {
  .ol-nawigacja {
    position: relative;
    margin-left: -1rem;
    margin-right: -1rem;
  }
  .ol-nawigacja__tor {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-left: 1rem;
    padding-right: 2.5rem;
  }
  .ol-nawigacja::after {
    content: '';
    position: absolute;
    top: 1px; right: 0; bottom: 1px;
    width: 34px;
    background: linear-gradient(to right, rgba(238,255,253,0), var(--ol-zielen-100));
    pointer-events: none;
  }
}

/* ==========================================================================
   17. Lista artykulow (shortcode [olejki_artykuly])
   ========================================================================== */

.ol-wpisy {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.ol-wpis {
  background: var(--ol-paper);
  border: 1px solid var(--ol-line);
  border-radius: var(--ol-r-md);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ol-wpis:hover {
  transform: translateY(-3px);
  border-color: var(--ol-zielen-200);
  box-shadow: 0 16px 32px -20px rgba(13, 39, 41, 0.45);
}
.ol-wpis__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.ol-wpis__foto {
  background: var(--ol-zielen-100);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.ol-wpis__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ol-wpis__brak-foto {
  display: block;
  width: 100%; height: 100%;
  background: var(--ol-zielen-200);
}
.ol-wpis__tresc {
  padding: 1.25rem 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ol-wpis__kategoria {
  font-family: var(--ol-font-head);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ol-cytryna-700);
  margin-bottom: 0.5rem;
}
.ol-wpis__tytul {
  font-size: var(--ol-t-md);
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
.ol-wpis__zajawka {
  font-size: var(--ol-t-sm);
  color: var(--ol-ink-soft);
  margin: 0 0 1.1rem;
  flex: 1;
}
.ol-wpis__meta {
  font-size: var(--ol-t-xs);
  color: var(--ol-ink-soft);
  padding-top: 0.75rem;
  border-top: 1px solid var(--ol-line);
}
.ol-wpis__meta span { margin: 0 0.35rem; color: var(--ol-cytryna-700); }

/* Pierwszy kafel na pelna szerokosc, gdy wyrozniony="tak" */
.ol-wpis--duzy { grid-column: 1 / -1; }
.ol-wpis--duzy .ol-wpis__link { flex-direction: row; }
.ol-wpis--duzy .ol-wpis__foto {
  flex: 0 0 46%;
  aspect-ratio: auto;
}
.ol-wpis--duzy .ol-wpis__tresc {
  padding: 2rem 2.25rem;
  justify-content: center;
}
.ol-wpis--duzy .ol-wpis__tytul { font-size: var(--ol-t-xl); }
.ol-wpis--duzy .ol-wpis__zajawka {
  font-size: var(--ol-t-base);
  flex: 0 0 auto;
  max-width: 52ch;
}

.ol-wpisy__stopka {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* ==========================================================================
   22. Poziomy progresji (Power of 3, rangi, etapy)
   Trzy kafle rosnace w prawo. Kazdy kolejny mocniejszy wizualnie.
   ========================================================================== */

.ol-poziomy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
  margin: 1.5rem 0;
}

.ol-poziom {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--ol-r-md);
  background: var(--ol-zielen-700);
  color: #FFFFFF;
  overflow: hidden;
}
.ol-poziom::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--ol-zielen-400);
}
.ol-poziom--2::before { height: 5px; background: var(--ol-cytryna-600); }
.ol-poziom--3::before { height: 7px; background: var(--ol-cytryna-700); }

.ol-poziom__numer {
  font-family: var(--ol-font-head);
  font-size: var(--ol-t-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ol-zielen-300);
}
.ol-poziom--3 .ol-poziom__numer { color: var(--ol-cytryna-500); }

.ol-poziom__kwota {
  font-family: var(--ol-font-head);
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ol-cytryna-500);
}
.ol-poziom--1 .ol-poziom__kwota { color: var(--ol-zielen-200); }

.ol-poziom__opis {
  font-size: var(--ol-t-sm);
  line-height: 1.5;
  color: var(--ol-zielen-300);
  margin: 0;
}
.ol-poziom__opis b { color: #FFFFFF; font-weight: 600; }

/* Pasek pod poziomami, np. wzmocnienie */
.ol-poziomy__stopka {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding: 0.9rem 1.25rem;
  border: 1px dashed var(--ol-cytryna-700);
  border-radius: var(--ol-r-md);
  background: var(--ol-cytryna-100);
  font-size: var(--ol-t-sm);
  color: var(--ol-ink);
}
.ol-poziomy__stopka b {
  font-family: var(--ol-font-head);
  font-weight: 600;
  color: var(--ol-zielen-700);
}

@media (max-width: 760px) {
  .ol-poziomy { grid-template-columns: 1fr; gap: 0.75rem; }
  .ol-poziom { padding: 1.25rem; }
  .ol-poziom__kwota { font-size: 1.9rem; }
}

/* ==========================================================================
   21. Kompaktowa lista artykulow (shortcode [olejki_artykuly_lista])
   Do mega menu, sidebara i stopki. Wezsza i lzejsza niz kafle.
   ========================================================================== */

.ol-lista { font-size: var(--ol-t-sm); }

.ol-lista__tytul {
  font-family: var(--ol-font-head);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ol-cytryna-700);
  margin-bottom: 0.9rem;
}

.ol-lista__pozycje {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ol-lista__link {
  text-decoration: none;
  color: inherit;
}

/* --- Uklad pionowy: miniatura obok tytulu, pozycje jedna pod druga --- */

.ol-lista--pionowo .ol-lista__pozycje li { border-bottom: 1px solid var(--ol-line); }
.ol-lista--pionowo .ol-lista__pozycje li:last-child { border-bottom: 0; }
.ol-lista--pionowo .ol-lista__link {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 0.7rem 0;
}

/* --- Uklad poziomy: rzad kart, a gdy sie nie mieszcza, przewijanie --- */

.ol-lista--poziomo .ol-lista__pozycje {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 0.75rem;
  margin: 0 -2px;
}
.ol-lista--poziomo .ol-lista__pozycje::-webkit-scrollbar { height: 5px; }
.ol-lista--poziomo .ol-lista__pozycje::-webkit-scrollbar-track {
  background: var(--ol-zielen-100);
  border-radius: 3px;
}
.ol-lista--poziomo .ol-lista__pozycje::-webkit-scrollbar-thumb {
  background: var(--ol-zielen-200);
  border-radius: 3px;
}
.ol-lista--poziomo .ol-lista__pozycje li {
  flex: 0 0 210px;
  scroll-snap-align: start;
}
.ol-lista--poziomo .ol-lista__link {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.ol-lista--poziomo .ol-lista__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
.ol-lista--poziomo .ol-lista__nazwa { font-size: 0.9rem; }

@media (max-width: 560px) {
  .ol-lista--poziomo .ol-lista__pozycje li { flex-basis: 180px; }
}
.ol-lista__link:hover .ol-lista__nazwa { color: var(--ol-zielen-500); }

.ol-lista__foto {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: var(--ol-r-sm);
  overflow: hidden;
  background: var(--ol-zielen-100);
}
.ol-lista__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ol-lista__tresc {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.ol-lista__nazwa {
  font-family: var(--ol-font-head);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--ol-zielen-700);
  transition: color 0.18s ease;
}
.ol-lista__meta {
  font-size: var(--ol-t-xs);
  color: var(--ol-ink-soft);
}

.ol-lista__cta {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--ol-font-head);
  font-size: var(--ol-t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ol-zielen-500);
  text-decoration: none;
  border-bottom: 2px solid var(--ol-cytryna-700);
  padding-bottom: 2px;
}
.ol-lista__cta:hover { color: var(--ol-zielen-700); }

/* Wariant na ciemnym tle, jesli mega menu albo stopka sa ciemne.
   Dodaj klase ol-lista--ciemna obok ol-lista. */
.ol-lista--ciemna .ol-lista__pozycje li { border-color: rgba(255, 255, 255, 0.14); }
.ol-lista--ciemna .ol-lista__pozycje::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); }
.ol-lista--ciemna .ol-lista__pozycje::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.24); }
.ol-lista--ciemna .ol-lista__nazwa { color: #FFFFFF; }
.ol-lista--ciemna .ol-lista__meta { color: var(--ol-zielen-300); }
.ol-lista--ciemna .ol-lista__foto { background: rgba(255, 255, 255, 0.08); }
.ol-lista--ciemna .ol-lista__link:hover .ol-lista__nazwa { color: var(--ol-cytryna-500); }
.ol-lista--ciemna .ol-lista__cta { color: #FFFFFF; }

/* ==========================================================================
   18. Kafle kategorii (shortcode [olejki_kategorie])
   ========================================================================== */

/* Liczba kolumn ustawiona sztywno, a nie przez auto-fit.
   Auto-fit dobieral kolumny do szerokosci i przy szesciu kaflach
   dawal uklad 4 plus 2, czyli rzad z dziura. */
.ol-kategorie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 900px) {
  .ol-kategorie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ol-kategorie { grid-template-columns: 1fr; }
}
.ol-kategoria {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.4rem 1.5rem;
  background: var(--ol-zielen-700);
  border-radius: var(--ol-r-md);
  text-decoration: none;
  color: var(--ol-zielen-200);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.ol-kategoria:hover {
  background: var(--ol-zielen-500);
  color: #FFFFFF;
  transform: translateY(-3px);
}
.ol-kategoria__nazwa {
  font-family: var(--ol-font-head);
  font-size: var(--ol-t-md);
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.2;
}
.ol-kategoria__opis {
  font-size: var(--ol-t-sm);
  color: var(--ol-zielen-300);
  flex: 1;
}
.ol-kategoria__licznik {
  font-family: var(--ol-font-head);
  font-size: var(--ol-t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ol-cytryna-500);
  margin-top: 0.35rem;
}
/* Kategoria bez wpisow. Nie chwalimy sie zerem, tylko zapowiadamy. */
.ol-kategoria__licznik--puste { color: var(--ol-zielen-400); }

/* ==========================================================================
   16. Disclaimer
   ========================================================================== */

.ol-disclaimer {
  font-size: var(--ol-t-xs);
  color: var(--ol-ink-soft);
  border-top: 1px solid var(--ol-line);
  padding-top: 1rem;
}

/* ==========================================================================
   Responsywnosc
   ========================================================================== */

@media (max-width: 860px) {
  .ol { --ol-blok: 2.5rem; }
  .ol h2 { font-size: var(--ol-t-lg); }

  .ol-featured__grid { grid-template-columns: 1fr; }
  .ol-featured__foto { padding: 1.75rem 1.75rem 0; }
  .ol-featured__kafel { aspect-ratio: 4 / 3; padding: 1.25rem; }
  .ol-featured__tresc { padding: 1.75rem; }
  .ol-featured__nazwa { font-size: var(--ol-t-xl); }

  .ol-kalk__body {
    grid-template-columns: 1fr;
    grid-template-areas: "suwaki" "wynik" "profile";
    gap: 1.5rem;
  }
  .ol-kalk__body--proste { grid-template-areas: "suwaki" "wynik"; }
  .ol-galeria,
  .ol-piramida,
  .ol-foto-para { grid-template-columns: 1fr; }
  .ol-mapa { padding: 1.1rem; }
  .ol-mapa__plansza--duza { display: none; }
  .ol-mapa__plansza--mala { display: block; }
  .ol-mapa__tresc { grid-template-columns: 1fr; }
  .ol-mapa__tresc p,
  .ol-mapa__fakty { grid-column: 1; grid-row: auto; }
  .ol-quiz,
  .ol-cta { padding: 1.5rem; }

  .ol-btn {
    font-size: 0.76rem;
    letter-spacing: 0.09em;
    padding: 12px 18px;
    gap: 8px;
  }

  /* Quiz: na telefonie liczy sie to, zeby pytanie, odpowiedzi i przycisk
     dalej miescily sie bez przewijania w polowie interakcji. */
  .ol-quiz { padding: 1.25rem 1.1rem; }
  .ol-quiz__pytanie { font-size: var(--ol-t-base); margin-bottom: 0.9rem; }
  .ol-quiz__odpowiedzi { gap: 0.5rem; }
  .ol-quiz__odp { padding: 0.7rem 0.9rem; }
  .ol-quiz__feedback { margin-top: 0.75rem; padding: 0.75rem 0.9rem; }
  .ol-quiz__nawigacja { margin-top: 0.9rem; }
  .ol-quiz__wynik-liczba { font-size: var(--ol-t-2xl); }

  /* Kalkulator: profile ciasniej, zeby nie zjadaly ekranu */
  .ol-kalk__head { padding: 1.1rem 1.25rem; }
  .ol-kalk__body { padding: 1.25rem; }
  .ol-kalk__profil { padding: 0.45rem 0.8rem; font-size: 0.86rem; }
  .ol-kalk__stopka { padding: 0.8rem 1.25rem; }
  .ol-featured__stopka { gap: 0.9rem; }
  .ol-check { padding: 1.35rem; }

  .ol-wpisy { grid-template-columns: 1fr; gap: 1.25rem; }
  .ol-wpis--duzy .ol-wpis__link { flex-direction: column; }
  .ol-wpis--duzy .ol-wpis__foto { flex: none; aspect-ratio: 16 / 10; }
  .ol-wpis--duzy .ol-wpis__tresc { padding: 1.25rem 1.35rem 1.4rem; }
  .ol-wpis--duzy .ol-wpis__tytul { font-size: var(--ol-t-md); }
  .ol-wpis--duzy .ol-wpis__zajawka { font-size: var(--ol-t-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .ol *,
  .ol *::before,
  .ol *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}