/*
 * Dwa wpisy zbudowane jak strona docelowa: `/krysztal-gorski-dla-rownowagi-hormonalnej/` (#2584)
 * i `/bialy-kwarc-wlasciwosci/` (#6371). Kazdy niesie WE WLASNEJ TRESCI kompletny system
 * wizualny — wlasne zmienne, wlasne promienie i wlasny krój pisma z Google Fonts.
 *
 * Tresci nie ruszamy: to praca wlascicielki, a znacznik jest gesty (35 i 47 KB). Zamiast tego
 * podmieniamy WARTOSCI zmiennych, na ktorych ten system stoi. Cala reszta arkusza we wpisie
 * odwoluje sie do nich przez `var()`, wiec jedna podmiana przestawia caly uklad na obowiazujacy
 * kierunek — tak samo, jak `tokens.json` przestawia motyw.
 *
 * DLACZEGO `body .kd-lp`, a nie `.kd-lp`
 * Arkusz wpisu siedzi w `<body>`, czyli PO arkuszach motywu w kolejnosci dokumentu. Przy tej
 * samej specyficznosci wygralby on. Dodatkowy `body` podnosi wage o jeden element i rozstrzyga.
 *
 * DLACZEGO W OGOLE
 * Markowy turkus `#01B3B2` ma na bieli 2,60:1 — jako kolor napisu nie przechodzi progu
 * czytelnosci. Do tego oba wpisy malowaly turkusem cale plaszczyzny sekcji, czego kierunek
 * ATELIER + TURKUS nie robi nigdzie indziej, i szary `#888` na bieli daje 3,54:1.
 */

body .kd-lp,
body .kd-bk {
	/* akcent — ten sam odcien, przyciemniony do 5,52:1 */
	--kd-primary: var(--kd-color-secondary);
	--kd-primary-dk: #005E5E;

	/* plaszczyzny: turkus schodzi z tla, wchodzi neutralna szarosc motywu */
	--kd-primary-lt: var(--kd-color-surface);
	--kd-accent: var(--kd-color-surface);
	--kd-bg: var(--kd-color-surface);
	--kd-white: var(--kd-color-background);
	--kd-teal-light-alpha: rgba(0, 117, 117, .06);

	/* obwodki */
	--kd-teal-border: var(--kd-color-border);
	--kd-teal-border-md: var(--kd-color-border-strong);
	--kd-border: var(--kd-color-border);
	--kd-border-n: var(--kd-color-border);

	/* tekst — `#555` i `#888` zastapione parami, ktore przechodza AA */
	--kd-dark: var(--kd-color-text);
	--kd-h: var(--kd-color-text);
	--kd-mid: var(--kd-color-text-muted);
	--kd-text: var(--kd-color-text);
	--kd-muted: var(--kd-color-text-muted);
	--kd-light: var(--kd-color-text-muted);

	/* ksztalt — skala motywu zamiast 10/16/6/20 */
	--kd-radius: 8px;
	--kd-radius-lg: 8px;
	--kd-radius-sm: 4px;
	--kd-radius-pill: 999px;
	--kd-shadow: none;
	--kd-shadow-md: 0 6px 20px -8px rgba(16, 18, 20, .16);

	font-size: var(--kd-body-size);
	line-height: 1.7;
	max-width: none;
}

/*
 * Krój. Arkusz wpisu ustawia `'Poppins', sans-serif` w kilku miejscach, wiec sama podmiana
 * na kontenerze nie wystarcza — zagniezdzona regula i tak by wygrala. Sam odnosnik do
 * Google Fonts znika w `inc/blog.php`, wiec bez tej reguly wpisy zjechalyby na krój systemowy.
 */
body .kd-lp,
body .kd-lp *,
body .kd-bk,
body .kd-bk * {
	font-family: var(--kd-font-body);
}

body .kd-lp :is(h1, h2, h3, h4),
body .kd-bk :is(h1, h2, h3, h4) {
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-h2-weight);
	letter-spacing: normal;
}

/*
 * Naglowek naglowka strony docelowej zszedl z H1 na H2 (`inc/blog.php` — dokument ma miec jeden
 * H1, a szablon wpisu juz go drukuje). Arkusz wpisu opisuje ten napis jako `.kd-bk-hero h1`,
 * wiec po podmianie znacznika przejmowala go zwykla regula sekcji i naglowek malal.
 * Przepisujemy sam rozmiar i rytm — reszta idzie z tokenow jak wszedzie.
 */
body :is(.kd-lp-hero, .kd-bk-hero) > h2 {
	font-size: var(--kd-h1-size);
	line-height: 1.25;
	margin-bottom: 16px;
}

/*
 * To samo raz jeszcze, pietro nizej: tytuly czterech krokow zeszly z H4 na H3 (`inc/blog.php` —
 * stoja bezposrednio pod H2 sekcji, wiec H4 byl przeskokiem o dwa poziomy). Arkusz wpisu opisuje
 * je jako `.kd-lp-step-content h4`, wiec po podmianie znacznika napis rosl do rozmiaru zwyklego H3.
 * Wartosci przepisane 1:1 z reguly wpisu.
 */
body :is(.kd-lp-step-content, .kd-bk-step-content) > h3 {
	font-size: var(--kd-body-sm-size);
	font-weight: 700;
	color: var(--kd-dark);
	margin-bottom: 4px;
}

/*
 * Siedem plaszczyzn, ktorych podmiana zmiennych nie siega: gradienty maja odcienie WPISANE
 * na sztywno, poza `var()`. Cztery blade mietowe pola (naglowek, wstep, wyroznienie, srodkowe
 * wezwanie) schodza na neutralna szarosc motywu, a jasny turkus `#01b3b2` — ktory na bieli ma
 * 2,60:1 i pod bialym napisem nie nadaje sie na tlo — ustepuje `#007575` (5,52:1).
 *
 * Plaszczyzna zostaje plaska: kierunek ATELIER + TURKUS nie uzywa gradientow nigdzie indziej.
 */
body :is(.kd-lp-hero, .kd-lp-intro, .kd-lp-highlight, .kd-bk-hero, .kd-bk-intro, .kd-bk-highlight, .kd-bk-mid-cta) {
	background: var(--kd-color-surface);
}

body :is(.kd-lp-cta, .kd-bk-cta) {
	background: var(--kd-color-secondary);
}

/* Nadkreslnik wpisu #6371 — tlo z 10% jasnego turkusu na wersalikach akcentu. */
body .kd-bk-eyebrow {
	background: var(--kd-teal-light-alpha);
}

/* Kreski akcentu nad karta i przy krawedzi kafla produktu. */
body :is(.kd-lp-bcard, .kd-bk-bcard)::after,
body :is(.kd-lp-product, .kd-bk-product)::before {
	background: var(--kd-color-secondary);
}

/*
 * Ozdobne kola i poswiaty w tle naglowka i wstepu — turkus rozlany na 5–8% krycia. Plaszczyzna
 * ma byc plaska, wiec znikaja. To jedyne miejsce, gdzie cos usuwamy zamiast przestawiac.
 */
body :is(.kd-lp-hero, .kd-bk-hero, .kd-lp-intro, .kd-bk-intro)::before,
body :is(.kd-lp-hero, .kd-bk-hero, .kd-lp-intro, .kd-bk-intro)::after {
	background: none;
}

/* Pigulki: nadkreslnik sekcji i plakietka przy produkcie — 10% jasnego turkusu na tle. */
body :is(.kd-lp-eyebrow, .kd-bk-eyebrow, .kd-lp-product-badge, .kd-bk-product-badge) {
	background-color: var(--kd-teal-light-alpha);
}

body :is(.kd-lp-callout, .kd-bk-callout) {
	border-top-color: var(--kd-color-border);
}

/*
 * Gwiazdki ocen swiecily zlotem `#f5a623` — 2,10:1 na bieli i barwa, ktorej motyw nie zna.
 * Wlasna ocena sklepu (`.kd-store-rating` w `woo.css`) idzie szarym tekstem pobocznym; te maja
 * wygladac tak samo, bo stoja obok siebie na tej samej stronie.
 */
body :is(.kd-lp-pcard-stars, .kd-bk-pcard-stars) span,
body :is(.kd-lp-product-rating, .kd-bk-product-rating) span {
	color: var(--kd-color-text-muted);
}

/*
 * Pas zaufania stoi na grafitowym tle — i tylko tam przyciemniony akcent `#007575` NIE dziala:
 * na `#16181A` ma 3,24:1. Markowy `#01B3B2`, nie do uzycia na bieli, na grafice daje 6,99:1.
 * Ten sam odcien, odwrocone tlo, odwrocona odpowiedz — dlatego zmienna wraca tu do wartosci marki.
 */
body :is(.kd-lp-trust, .kd-bk-trust) {
	--kd-primary: #01B3B2;
}

/*
 * Znaki zodiaku w siatce wychodzily fioletowymi kwadracikami. To nie kolor z arkusza wpisu:
 * `♈`–`♓` maja w Unicode domyslna prezentacje EMOJI, a kroj tresci ich nie ma (ani Jost, ani Poppins), wiec przegladarka
 * schodzila do Apple Color Emoji. `♍` (Panna) ma domyslnie prezentacje tekstowa i jako jedyny
 * wygladal poprawnie — stad wrazenie „czesc ikon jest zepsuta".
 *
 * `font-variant-emoji: text` zalatwia to w nowym Chrome; starsze przegladarki i Safari lapie
 * krój symboli podstawiony PRZED szeregiem ogolnym.
 */
body :is(.kd-lp-zodiac-glyph, .kd-bk-zodiac-glyph) {
	font-variant-emoji: text;
	font-family: 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols 2', var(--kd-font-body);
}

/*
 * „Zobacz wszystkie produkty z Bialym kwarcem" — przycisk na wypelnieniu akcentu, ktory nigdy
 * nie mial bialego napisu: `.kd-bk a` (0,1,1) bilo wlasne `color: white` przycisku (0,1,0),
 * wiec tekst szedl ciemnym turkusem po turkusie. Bylo tak od poczatku, tylko na jasniejszym tle.
 *
 * Do tego `white-space: nowrap` na 41-znakowej etykiecie robil 365 px w slupie szerokim na 342 —
 * jedyne przewijanie w bok w calym serwisie. Etykieta ma sie lamac.
 */
body :is(.kd-lp, .kd-bk) a:is(.kd-lp-btn-subtle, .kd-bk-btn-subtle) {
	color: var(--kd-color-text-on-primary);
	white-space: normal;
	box-shadow: none;
}

/* Cel dotykowy: przyciski tych wpisow maja wlasne wypelnienie, ktore bywa nizsze niz 40 px. */
body .kd-lp a[class*="btn"],
body .kd-bk a[class*="btn"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}