/*
 * Kalkulator numerologiczny. Wyglad 1:1 z wersja wklejona do Elementora — zmienil sie tylko
 * prefiks klas (`.kd-` -> `.kdnum-`) i zrodlo kolorow: lokalne zmienne siegaja teraz po tokeny
 * motywu, wiec zmiana turkusu w `tokens.json` przechodzi i tutaj.
 *
 * Oryginal walczyl z Elementorem setka `!important`. Motyw trzyma naglowki na `.kd h1`,
 * czyli tej samej specyficznosci co `.kdnum h1` — rozstrzyga kolejnosc, a ten arkusz ma
 * `kd-main` w zaleznosciach, wiec zawsze ladowany jest pozniej.
 */

/*
 * Aliasy sa juz w calosci pochodne tokenow. Nazwa `--kdnum-teal` zostaje historyczna —
 * to od dawna „kolor akcentu", nie turkus; zmiana nazwy dotknelaby ~60 miejsc w tym pliku
 * i nie dalaby nic poza ryzykiem. Wartosci zapasowe usuniete celowo: gdyby token zniknal,
 * lepiej zeby bylo to widac od razu, niz zeby strona po cichu wrocila do starej palety.
 */
.kdnum {
	--kdnum-teal: var(--kd-color-accent);
	--kdnum-teal-dark: var(--kd-color-text);
	--kdnum-teal-light: color-mix(in srgb, var(--kd-color-accent) 8%, transparent);
	--kdnum-teal-border: color-mix(in srgb, var(--kd-color-accent) 24%, transparent);
	--kdnum-h: var(--kd-color-text);
	--kdnum-text: var(--kd-color-text);
	--kdnum-text-light: var(--kd-color-text-muted);
	--kdnum-gray: var(--kd-color-surface);
	--kdnum-border: var(--kd-color-border);
	--kdnum-shadow: var(--kd-shadow-card-hover);
	--kdnum-shadow-md: var(--kd-shadow-card-hover);
	--kdnum-r: var(--kd-radius-input);
	width: 100%;
	color: var(--kdnum-text);
}

.kdnum * { box-sizing: border-box; margin: 0; padding: 0; }

.kdnum h1 {
	font-size: var(--kd-h1-size);
	font-weight: 700;
	color: var(--kdnum-h);
	line-height: 1.2;
	margin: 0 auto 20px;
	max-width: 700px;
}
.kdnum h1 span { color: var(--kdnum-teal); }
.kdnum h2 {
	font-size: var(--kd-h2-size);
	font-weight: 700;
	color: var(--kdnum-h);
	line-height: 1.3;
	margin-bottom: 16px;
}
.kdnum h3 {
	font-size: var(--kd-body-size);
	font-weight: 700;
	color: var(--kdnum-h);
	margin: 28px 0 6px;
}
.kdnum p {
	font-size: var(--kd-body-size);
	color: var(--kdnum-text);
	line-height: 1.8;
	margin-bottom: 14px;
}
.kdnum a { color: var(--kdnum-teal); font-weight: 600; }

/* --- hero --- */

.kdnum-hero {
	background: var(--kd-color-surface);
	border-bottom: 1px solid var(--kdnum-border);
	padding: 64px 24px 56px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.kdnum-hero::before,
.kdnum-hero::after {
	content: '';
	position: absolute;
	pointer-events: none;
}
.kdnum-hero::before {
	top: -60px; right: -80px; width: 300px; height: 300px;
	background: radial-gradient(circle, color-mix(in srgb, var(--kdnum-teal) 8%, transparent) 0%, transparent 70%);
}
.kdnum-hero::after {
	bottom: -40px; left: -60px; width: 250px; height: 250px;
	background: radial-gradient(circle, color-mix(in srgb, var(--kdnum-teal) 6%, transparent) 0%, transparent 70%);
}
.kdnum-eyebrow {
	display: inline-block;
	background: var(--kdnum-teal-light);
	color: var(--kdnum-teal);
	font-size: var(--kd-label-size);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: var(--kd-radius-pill, 20px);
	border: 1px solid var(--kdnum-teal-border);
	margin-bottom: 24px;
}
.kdnum-hero__lead {
	font-size: var(--kd-body-size);
	max-width: 560px;
	margin: 0 auto;
	line-height: 1.75;
}

/* --- kalkulator --- */

.kdnum-calc-outer { padding: 0 24px; max-width: 660px; margin: 0 auto; }
.kdnum-calc {
	background: var(--kd-color-background);
	border: 1px solid var(--kdnum-border);
	border-radius: var(--kd-radius-md);
	padding: 40px 36px;
	box-shadow: var(--kdnum-shadow-md);
	text-align: center;
	margin-bottom: 72px;
	position: relative;
}
.kdnum-calc::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; height: 4px;
	background: var(--kdnum-teal);
	border-radius: var(--kd-radius-md) var(--kd-radius-md) 0 0;
}
.kdnum-calc__title {
	font-size: var(--kd-h3-size); font-weight: 700; color: var(--kdnum-h);
	display: block; margin-bottom: 6px;
}
.kdnum-calc__sub {
	font-size: var(--kd-body-sm-size); color: var(--kdnum-text-light);
	display: block; margin-bottom: 32px;
}
.kdnum-calc__row {
	display: flex; gap: 12px; max-width: 500px; margin: 0 auto;
	flex-wrap: wrap; align-items: stretch;
}
.kdnum-input-wrap { flex: 1; min-width: 200px; position: relative; }
.kdnum-floating-label {
	position: absolute;
	top: -10px; left: 14px;
	font-size: var(--kd-label-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--kdnum-teal);
	background: var(--kd-color-background);
	padding: 0 5px;
	pointer-events: none;
	z-index: 1;
}
.kdnum-input {
	width: 100%;
	border: 2px solid var(--kdnum-teal);
	border-radius: var(--kdnum-r);
	background: var(--kd-color-background);
	color: var(--kdnum-h);
	font-family: inherit;
	font-size: var(--kd-h4-size);
	font-weight: 600;
	padding: 15px 18px;
	outline: none;
	letter-spacing: .14em;
	text-align: center;
	transition: box-shadow var(--kd-motion-fast) var(--kd-ease);
}
.kdnum-input::placeholder { color: var(--kdnum-text-light); font-weight: 400; letter-spacing: .06em; font-size: var(--kd-body-size); }
/* Pierscien 20% krycia znikal na jasnym tle — a to strona z 92% ruchu z wyszukiwarki. */
.kdnum-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--kdnum-teal) 40%, transparent); }
.kdnum-input:focus-visible { outline: 3px solid var(--kdnum-teal); outline-offset: 2px; }

.kdnum-btn {
	background: var(--kdnum-teal);
	color: var(--kd-color-text-on-primary);
	border: 2px solid var(--kdnum-teal);
	border-radius: var(--kdnum-r);
	font-family: inherit;
	font-size: var(--kd-body-sm-size);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 15px 28px;
	cursor: pointer;
	transition: background var(--kd-motion-fast) var(--kd-ease), transform var(--kd-motion-fast) var(--kd-ease);
	white-space: nowrap;
	flex-shrink: 0;
}
.kdnum-btn:hover { background: var(--kdnum-teal-dark); transform: translateY(-1px); }
.kdnum-btn:active { transform: none; }

/* Selektor musi byc dwuczlonowy: `.kdnum p` ma wyzsza szczegolowosc niz sama `.kdnum-error`
   i przemalowywal komunikat bledu na zwykly kolor tekstu — ostrzezenie wygladalo jak podpowiedz. */
.kdnum .kdnum-error {
	margin: 16px 0 0;
	color: var(--kd-color-error);
	font-size: var(--kd-body-sm-size);
	font-weight: 500;
}

.kdnum-result {
	margin-top: 28px;
	padding: 28px 20px;
	background: var(--kdnum-gray);
	border: 1px solid var(--kdnum-teal-border);
	border-radius: var(--kdnum-r);
	animation: kdnumFadeUp .4s ease forwards;
}
.kdnum-result__num {
	font-size: var(--kd-display-size); font-weight: 800; color: var(--kdnum-teal);
	line-height: 1; display: block; margin-bottom: 8px;
}
.kdnum-result__title {
	font-size: var(--kd-h3-size); font-weight: 700; color: var(--kdnum-h);
	display: block; margin-bottom: 10px;
}
.kdnum-result__desc { font-size: var(--kd-body-size); line-height: 1.8; margin: 0; }

/* Mostek do sklepu — powod, dla ktorego ten modul w ogole powstal (ustalenie WS3). */
.kdnum-result__stones {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--kdnum-teal-border);
}
.kdnum-result__stones-label {
	display: block;
	font-size: var(--kd-label-size); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--kdnum-text-light);
	margin-bottom: 10px;
}
.kdnum-result__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.kdnum-result__links a,
.kdnum-result__links span {
	display: inline-block;
	padding: 9px 18px;
	border-radius: var(--kdnum-r);
	background: var(--kdnum-teal);
	color: var(--kd-color-text-on-primary);
	font-size: var(--kd-body-sm-size);
	font-weight: 600;
	text-decoration: none;
}
.kdnum-result__links a:hover { background: var(--kdnum-teal-dark); text-decoration: none; }
.kdnum-result__links span { background: var(--kdnum-gray); color: var(--kdnum-text); }
.kdnum-result__more {
	display: inline-block;
	margin-top: 16px;
	font-size: var(--kd-body-sm-size);
	text-decoration: underline;
}

/* ---- Karta produktu w wyniku (N3N4, 13.10.2026) ----
   Wyglad karty w `main.css` (`.kd-numcard`). Tu tylko to, co psuje arkusz kalkulatora: `.kdnum *` zeruje marginesy
   i padding (przycisk tracil wypelnienie), a `.kdnum a` (0,1,1) maluje kazdy odnosnik na turkus 600, takze napis
   na turkusowym przycisku. Selektory dwuczlonowe z `.kdnum` z przodu, zeby wygraly. */
.kdnum .kdnum-result__stones-line {
	margin: 0;
	font-size: var(--kd-body-sm-size);
	line-height: 1.6;
}
.kdnum .kd-numcard { margin: 10px 0 0; }
.kdnum .kd-numcard__name { color: var(--kd-color-text); font-weight: 500; font-size: var(--kd-body-sm-size); }
.kdnum .kd-numcard__ship { font-size: var(--kd-caption-size, 13px); }
@media (max-width: 639px) {
	.kdnum .kd-numcard { padding: 10px; }
	.kdnum .kd-numcard__ship { font-size: 12px; }
	.kdnum .kd-numcard__btn { padding-inline: 16px; }
}
.kdnum .kd-numcard__btn {
	padding: 10px 20px;
	color: var(--kd-btn-text);
	font-weight: var(--kd-button-weight, 700);
}
.kdnum .kd-numcard__btn:hover { color: var(--kd-btn-text); }
/* Odnosnik do artykulu liczby w tym samym zdaniu co kamienie (miejsce na karte, patrz wyzej). */
.kdnum .kdnum-result__stones-line .kdnum-result__more { display: inline; margin: 0; }

/* Liczba i nazwa w jednym wierszu (N3N4): ok. 70 px mniej nad karta, ramka zapisu zostaje na swojej wysokosci. */
.kdnum-result__head { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 10px; }
.kdnum .kdnum-result__head .kdnum-result__num { margin: 0; flex-shrink: 0; }
.kdnum .kdnum-result__head .kdnum-result__title { margin: 0; text-align: left; line-height: 1.25; }
.kdnum .kdnum-result--karta { margin-top: 20px; padding: 20px; }
.kdnum .kdnum-result--karta .kdnum-result__stones { margin-top: 12px; padding-top: 0; border-top: 0; }
.kdnum .kdnum-result--karta .kdnum-result__num { font-size: 52px; }
.kdnum .kdnum-result--karta .kdnum-result__stones-line { line-height: 1.5; }
@media (max-width: 640px) {
	.kdnum .kdnum-result--karta { margin-top: 16px; padding: 16px; }
	.kdnum .kdnum-result--karta .kdnum-result__desc { line-height: 1.65; }
}

/* Pozostale kalkulatory pod ramka zapisu (N3N4). Dwa wiersze-odnosniki, cel dotykowy cala karta. */
.kdnum-tools {
	margin-top: var(--kd-space-3);
	text-align: left;
}
.kdnum .kdnum-tools__label {
	margin: 0 0 8px;
	font-size: var(--kd-label-size);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kdnum-text-light);
}
.kdnum-tools__list { list-style: none; display: grid; gap: 8px; }
@media (min-width: 560px) { .kdnum-tools__list { grid-template-columns: 1fr 1fr; } }
.kdnum .kdnum-tools__item {
	display: block;
	height: 100%;
	min-height: 44px;
	padding: 12px 16px;
	background: var(--kd-color-background);
	border: 1px solid var(--kdnum-teal-border);
	border-radius: var(--kdnum-r);
	color: var(--kd-color-text);
	font-weight: 400;
	text-decoration: none;
}
.kdnum .kdnum-tools__item:hover { border-color: var(--kdnum-teal); }
.kdnum-tools__title { display: block; font-weight: 600; color: var(--kdnum-teal); }
.kdnum-tools__sub { display: block; margin-top: 2px; font-size: var(--kd-body-sm-size); line-height: 1.45; color: var(--kd-color-text-muted); }

@keyframes kdnumFadeUp {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* --- tresc --- */

.kdnum-content { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.kdnum-section { margin-bottom: 68px; }

.kdnum-label {
	display: inline-block;
	font-size: var(--kd-label-size); font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
	color: var(--kdnum-teal);
	margin-bottom: 12px;
}

.kdnum-divider { display: flex; align-items: center; gap: 16px; margin: 56px 0; }
.kdnum-divider::before,
.kdnum-divider::after { content: ''; flex: 1; height: 1px; background: var(--kdnum-border); }
/*
 * Ozdobnik w srodku kreski. Do 21.09.2026 byl to znak `✦`, ktorego Poppins nie ma — rysowal go
 * system. Teraz `kd_icon('sparkle')`. `display: flex` na spanie zdejmuje odstep pod linia bazowa,
 * ktory przy elemencie zastepowanym zostawia wolne miejsce pod rysunkiem i przesuwa go w gore.
 * Wielkosc jest na rysunku, nie na `font-size`: SVG nie jest tekstem.
 */
.kdnum-divider span { display: flex; color: var(--kdnum-teal); }
.kdnum-divider .kd-icon { width: 14px; height: 14px; }

.kdnum-image-block { display: flex; align-items: flex-start; gap: 48px; flex-wrap: wrap; }
.kdnum-image-block img {
	width: 200px; height: 200px;
	object-fit: contain; flex-shrink: 0;
	border-radius: var(--kd-radius-md);
	background: var(--kd-color-surface);
	padding: 12px;
}
.kdnum-image-block__text { flex: 1; min-width: 260px; }

.kdnum-steps { list-style: none; counter-reset: kdnumstep; margin: 20px 0; }
.kdnum-steps li {
	counter-increment: kdnumstep;
	position: relative;
	padding-left: 50px;
	min-height: 34px;
	margin-bottom: 16px;
	font-size: var(--kd-body-size);
	line-height: 1.8;
}
.kdnum-steps li::before {
	content: counter(kdnumstep);
	position: absolute;
	top: 0; left: 0;
	width: 34px; height: 34px;
	background: var(--kdnum-teal);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: var(--kd-body-sm-size); font-weight: 700; color: var(--kd-color-text-on-primary);
}
.kdnum-example { font-size: var(--kd-caption-size); color: var(--kdnum-text-light); margin-top: 16px; }
.kdnum-example strong { color: var(--kdnum-h); }

/* --- siatka liczb (kazda karta prowadzi do swojego artykulu) --- */

.kdnum-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
	margin-top: 24px;
}
.kdnum-card {
	display: block;
	background: var(--kd-color-background);
	border: 1px solid var(--kdnum-border);
	border-radius: var(--kd-radius-md);
	padding: 22px 18px;
	position: relative;
	overflow: hidden;
	color: inherit;
	font-weight: 400;
	text-decoration: none;
	transition: box-shadow var(--kd-motion-fast) var(--kd-ease), border-color var(--kd-motion-fast) var(--kd-ease), transform var(--kd-motion-fast) var(--kd-ease);
}
.kdnum-card::after {
	content: attr(data-n);
	position: absolute;
	bottom: -10px; right: 8px;
	font-size: var(--kd-display-size); font-weight: 900;
	color: color-mix(in srgb, var(--kdnum-teal) 6%, transparent);
	line-height: 1;
	pointer-events: none;
}
.kdnum-card:hover {
	box-shadow: var(--kdnum-shadow-md);
	border-color: var(--kdnum-teal-border);
	transform: translateY(-2px);
	text-decoration: none;
}
.kdnum-card__badge {
	display: inline-block;
	background: var(--kdnum-teal-light);
	color: var(--kdnum-teal);
	font-size: var(--kd-label-size); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	padding: 3px 10px;
	border-radius: var(--kd-radius-pill, 20px);
	margin-bottom: 10px;
}
.kdnum-card__title {
	display: block;
	font-size: var(--kd-body-size); font-weight: 700; color: var(--kdnum-h);
	margin-bottom: 8px;
}
.kdnum-card p { font-size: var(--kd-caption-size); margin: 0; line-height: 1.65; }
/*
 * Znaczek przed nazwami kamieni. Do 21.09.2026 bylo tu `content: '💎'` — emoji rysowane przez
 * system operacyjny, w kolorach spoza palety sklepu i inaczej na kazdym urzadzeniu.
 *
 * Zamiast niego maska SVG na `background-color: currentColor`. Kolor jest wiec zapisany JEDEN
 * raz, na `.kdnum-card__stone` — pseudoelement dziedziczy `color`, a `currentColor` czyta `color`
 * tego samego elementu, wiec zmiana `--kdnum-teal-dark` przechodzi i na rysunek. W samym pliku
 * SVG nie ma zadnego koloru (`stroke='%23000'` to tylko krycie maski, nie barwa na ekranie).
 *
 * Wzorzec zapisu 1:1 jak `--kd-eye` w `assets/css/woo.css`.
 */
.kdnum-card__stone {
	--kdnum-gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3.8h11.6l3.7 5.6L12 20.9 2.5 9.4 6.2 3.8Z'/%3E%3Cpath d='M2.5 9.4h19'/%3E%3Cpath d='M6.2 3.8 9.2 9.4 12 20.9 14.8 9.4 17.8 3.8'/%3E%3C/svg%3E");
	margin-top: 10px;
	font-size: var(--kd-caption-size); color: var(--kdnum-teal-dark); font-weight: 600;
	display: flex; align-items: center; gap: 5px;
}
.kdnum-card__stone::before {
	content: '';
	flex: none;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: var(--kdnum-gem) center / contain no-repeat;
	mask: var(--kdnum-gem) center / contain no-repeat;
}

/* --- boks, korzysci --- */

.kdnum-box {
	background: var(--kd-color-surface);
	border: 1px solid var(--kdnum-teal-border);
	border-radius: var(--kd-radius-md);
	padding: 32px 28px;
	margin: 28px 0;
}
.kdnum-box h3 { margin-top: 0; }

.kdnum-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 16px;
	margin-top: 24px;
}
.kdnum-benefit {
	background: var(--kdnum-gray);
	border: 1px solid var(--kdnum-border);
	border-radius: var(--kd-radius-md);
	padding: 24px 18px;
	text-align: center;
	transition: box-shadow var(--kd-motion-fast) var(--kd-ease);
}
.kdnum-benefit:hover { box-shadow: var(--kdnum-shadow); }
/* `.kdnum-benefit__icon` usuniety razem z emoji — patrz komentarz w `template.php`. */
.kdnum-benefit__title {
	display: block;
	font-size: var(--kd-label-size); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--kdnum-h);
	margin-bottom: 8px;
}
.kdnum-benefit p { font-size: var(--kd-caption-size); margin: 0; line-height: 1.65; }

/* Nazwy kamieni w naglowku to odnosniki do tagow produktowych — mierzyly 24 px wysokosci.
   Wypelnienie podnosi cel do 40 px, wieksza interlinia trzyma wiersze osobno. */
.kdnum-stone-heading { padding-left: 14px; border-left: 3px solid var(--kdnum-teal); line-height: 2.05; }
/* Nazwa kamienia prowadzi do jego kategorii — to cel dotykowy, a nie sam naglowek. Wysokosc szla
   z interlinii plus `padding`, wiec zmiana kroju zbila ja do 36 px, a najkrotsza nazwa („Jaspis")
   miala 36,7 px szerokosci. Wysokosc podpieta pod `min-height`, szerokosc powiekszona wypelnieniem
   po bokach — `min-width` odpada, bo rozpychal pudelko i odsuwal przecinek od nazwy („Jaspis , Cytryn").
   Ujemny margines zdejmuje to wypelnienie z ukladu, wiec cel rosnie, a tekst stoi tam gdzie stal. */
.kdnum-stone-heading a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding-block: 8px;
	padding-inline: 4px;
	margin-inline: -4px;
}
.kdnum-shop-link { margin-top: 24px; }

/* --- FAQ --- */

.kdnum-faq { margin-top: 24px; }
.kdnum-faq__item { border-bottom: 1px solid var(--kdnum-border); }
.kdnum-faq__item:first-child { border-top: 1px solid var(--kdnum-border); }
.kdnum-faq__h { margin: 0; font-size: inherit; }
/*
 * Dwanascie pytan FAQ szlo WERSALIKAMI z rozstrzeleniem 1,4 px. Nie z tego arkusza — motyw sklada
 * przyciski wersalikami (`button` w `main.css`, token `button_transform`), a ta regula nie zdejmowala
 * przeksztalcenia. Przycisk jest tu tylko mechanizmem rozwijania; tresc to zdanie pytajace i ma sie
 * czytac jak zdanie. To strona z 92% klikniec z wyszukiwarki.
 */
.kdnum-faq__q {
	width: 100%;
	background: none;
	border: 0;
	/* Pytanie jest elementem sterujacym, wiec bierze krój tresci, a nie ten z H3 przez `inherit`.
	   Od 16.08.2026 to ten sam Poppins, ale jawny zapis chroni przed powrotem drugiego kroju. */
	font-family: var(--kd-font-body, inherit);
	font-size: var(--kd-body-size);
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: var(--kdnum-h);
	text-align: left;
	padding: 18px 4px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	transition: color var(--kd-motion-fast) var(--kd-ease);
}
.kdnum-faq__q:hover { color: var(--kdnum-teal); }
.kdnum-faq__q::after {
	content: '+';
	color: var(--kdnum-teal);
	font-size: var(--kd-h3-size);
	font-weight: 300;
	flex-shrink: 0;
	transition: transform var(--kd-motion-base) var(--kd-ease);
	line-height: 1;
}
.kdnum-faq__q[aria-expanded="true"]::after { transform: rotate(45deg); }
.kdnum-faq__a { padding: 0 4px 18px; }
.kdnum-faq__a p { margin: 0; font-size: var(--kd-body-sm-size); }

@media (max-width: 640px) {
	.kdnum-hero { padding: 48px 16px 44px; }
	.kdnum-calc { padding: 28px 18px; }
	.kdnum-calc-outer { padding: 0 16px; }
	.kdnum-calc__row { flex-direction: column; }
	.kdnum-btn { width: 100%; }
	.kdnum-image-block { flex-direction: column; }
	.kdnum-image-block img { width: 140px; height: 140px; }
	.kdnum-content { padding: 0 16px; }
}

/* ---- Bizuteria w wyniku kalkulatora ----
   Kafel jest cichy tak samo jak w siatce sklepu: zdjecie, nazwa, cena. Bez ramki, bez
   przycisku „do koszyka", bez gwiazdek — ta sama zasada co `inc/woo-hooks.php`. */
.kdnum-products { margin-top: var(--kd-space-4); }
.kdnum-products__label {
	font-size: var(--kd-label-size);
	font-weight: var(--kd-label-weight, 500);
	text-transform: var(--kd-label-transform, none);
	letter-spacing: var(--kd-label-ls, 0);
	color: var(--kd-color-text-muted);
	margin: 0 0 var(--kd-space-2);
}
.kdnum-products__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kd-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
/* ⚠️ `.kdnum a` (0,1,1) maluje KAZDY odnosnik w kalkulatorze na turkus i daje mu grubosc 600.
   Kafel produktu jest odnosnikiem, wiec nazwa i CENA wychodzily w kolorze akcji — a DESIGN.md
   mowi wprost, ze cena nie jest nigdy akcentem i ze na ekranie stoi jedna powierzchnia akcji.
   Na zrzucie z 21.09.2026 bylo ich piec naraz: dwie pigulki kamieni, odnosnik do artykulu,
   nazwy, ceny i „Zobacz wszystkie". Selektor musi byc mocniejszy niz (0,1,1), stad `.kdnum`
   z przodu. Tekst kafla idzie do lewej, tak samo jak w siatce sklepu — kalkulator centruje
   wszystko, ale kafel produktu ma wygladac jak kafel produktu, a nie jak cytat. */
.kdnum .kdnum-product { display: block; color: var(--kd-color-text); text-decoration: none; font-weight: 400; text-align: left; }
.kdnum .kdnum-product__name { color: var(--kd-color-text); font-weight: 400; }
.kdnum .kdnum-product__price { color: var(--kd-color-text); font-weight: 500; }
.kdnum .kdnum-products__label { text-align: left; }
.kdnum .kdnum-products__more { font-weight: 500; }
.kdnum .kdnum-products { text-align: left; }
.kdnum-product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--kd-radius-sm, 4px);
	background: var(--kd-color-surface);
}
.kdnum-product__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: var(--kd-space-1);
	font-size: var(--kd-small-size, 14px);
	line-height: 1.35;
}
.kdnum-product__price { display: block; margin-top: 2px; font-weight: 500; }
.kdnum-product:hover .kdnum-product__name { text-decoration: underline; text-underline-offset: 3px; }
.kdnum-products__more {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin-top: var(--kd-space-2);
	font-size: var(--kd-small-size, 14px);
}
/*
 * Na telefonie DWIE kolumny, nie trzy — tak samo jak siatka sklepu.
 *
 * Przy 390 px trzy kafle dawaly na nazwe 87 px, czyli mniej niz szerokosc slowa „labradorytem"
 * (~90 px przy 13 px). Nazwa skrocona do samej tozsamosci (`kd_loop_title_parts()`) i tak
 * urywala sie w polowie slowa, a zmniejszanie pisma to leczenie objawu. Trzeci kafel schodzi
 * do drugiego rzedu — dokladnie tak, jak wyglada kazde archiwum sklepu na telefonie.
 */
@media (max-width: 480px) {
	.kdnum-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kd-space-2); }
	.kdnum-product__name { font-size: 13px; }
}

/* ---- Zapis pod wynikiem (27.09.2026) ----
   Ta sama powierzchnia co wynik, tylko bez animacji: ramka pojawia sie razem z wynikiem i ma
   wygladac jak jego ciag dalszy, a nie jak wyskakujace okno. Tekst do lewej jak kafle produktow. */
.kdnum-lead {
	margin-top: var(--kd-space-3);
	padding: 24px 20px;
	background: var(--kdnum-gray);
	border: 1px solid var(--kdnum-teal-border);
	border-radius: var(--kdnum-r);
	text-align: left;
}
.kdnum-lead[hidden] { display: none; }
.kdnum .kdnum-lead__title {
	margin: 0 0 6px;
	font-size: var(--kd-h4-size, 1.125rem);
	font-weight: 600;
	color: var(--kdnum-h);
}
.kdnum .kdnum-lead__text {
	margin: 0 0 var(--kd-space-2);
	font-size: var(--kd-body-sm-size);
	color: var(--kd-color-text-muted);
}
.kdnum-lead .kd-form { margin: 0; }

/* ---- 28.09.2026 (P01): ramka zapisu zaraz pod wynikiem, kafle pod nia ----
   Nadkreslnik jak `.kdnum-label` w tresci, liczba roku w kolorze wyniku, kafle we wlasnym
   pudelku tej samej powierzchni co wynik i ramka (zeby nie wisialy luzem na bieli). */
.kdnum .kdnum-lead__eyebrow {
	margin: 0 0 4px;
	font-size: var(--kd-label-size);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kdnum-text-light);
}
.kdnum .kdnum-lead__rok { color: var(--kdnum-teal); font-weight: 700; }
[data-kdnum-rok-wrap][hidden] { display: none; }
.kdnum-products-wrap {
	margin-top: var(--kd-space-3);
	padding: 24px 20px;
	background: var(--kdnum-gray);
	border: 1px solid var(--kdnum-teal-border);
	border-radius: var(--kdnum-r);
	text-align: left;
}
.kdnum-products-wrap[hidden] { display: none; }
.kdnum-products-wrap .kdnum-products { margin-top: 0; }

/* ---- Kalendarz numerologiczny w ramce zapisu (W40, 28.09.2026) ----
   Dwanascie komorek w dwoch rzedach: skrot miesiaca i liczba w kolorze wyniku. Hasla i kamienie idza w mailu,
   zeby siatka nie spychala formularza (wersja z haslami miala 411 px na telefonie). */
.kdnum-cal { margin: 10px 0 var(--kd-space-2); }
.kdnum-cal[hidden] { display: none; }
.kdnum .kdnum-cal__label {
	margin: 0 0 8px;
	font-size: var(--kd-body-sm-size);
	font-weight: 600;
	color: var(--kdnum-h);
}
.kdnum-cal__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kdnum-cal__month {
	display: grid;
	padding: 6px 2px;
	background: var(--kd-color-background, #fff);
	border: 1px solid var(--kdnum-teal-border);
	border-radius: var(--kd-radius-sm, 4px);
	text-align: center;
	line-height: 1.2;
}
.kdnum-cal__name { font-size: 12px; color: var(--kdnum-text-light); }
.kdnum-cal__num { font-size: 18px; font-weight: 700; color: var(--kdnum-teal); }

/* ---- Kalkulator roku osobistego (`rok.php`, 28.09.2026) ----
   Stoi w tresci wpisu, ktora ma juz wlasny margines boczny, wiec zewnetrzny odstep kalkulatora
   dublowal sie (pudelko 318 px zamiast 358 px przy 390 px). Kotwice `#rok-N` nie chowaja sie
   pod przyklejonym paskiem naglowka. */
.kdnum--rok .kdnum-calc-outer { padding: 0; }
.kdnum--rok .kdrok-zycie { margin-top: var(--kd-space-2); }
.kdrok-lista__rok { scroll-margin-top: 96px; }
/* Strona-narzedzie (`single.php`, `kd-post--narzedzie`): pole kalkulatora na pierwszym ekranie telefonu. */
.kd-post--narzedzie.kd-entry { padding-top: var(--kd-space-2); }
.kd-post--narzedzie .kd-post__head { padding-top: 0; }

/* ---- Portret numerologiczny (`portret.php`, 28.09.2026) ----
   Dwa pola jedno pod drugim (imie i nazwisko, nieobowiazkowa data), przycisk na cala szerokosc.
   Imie czyta sie zle przy rozstrzelonych literach daty, stad mniejszy `letter-spacing`. */
.kdpor-form { display: grid; gap: 20px; max-width: 500px; margin: 0 auto; }
.kdpor-form .kdnum-input-wrap { min-width: 0; }
.kdpor-form .kdnum-input { letter-spacing: .02em; }
.kdpor-form .kdnum-btn { width: 100%; }
.kdpor-main__label { margin-bottom: 6px; }
.kdpor-grid {
	display: grid; gap: 12px;
	margin-top: 20px; padding-top: 18px;
	border-top: 1px solid var(--kdnum-teal-border);
}
@media (min-width: 700px) { .kdpor-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
.kdpor-more .kdpor-grid { border-top: 0; margin-top: 24px; padding-top: 0; }
/* Odnosnik „Przeczytaj o liczbie N” jako cel dotykowy 40 px (w tekscie bylo 23 px). */
.kdnum--rok .kdnum-result__more { display: inline-flex; align-items: center; min-height: 40px; }
.kdpor-card {
	background: var(--kd-color-background);
	border: 1px solid var(--kdnum-teal-border);
	border-radius: var(--kdnum-r);
	padding: 16px;
}
.kdpor-card__label {
	display: block;
	font-size: var(--kd-label-size); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--kdnum-text-light);
}
.kdpor-card__num { display: block; font-size: var(--kd-h2-size); font-weight: 800; color: var(--kdnum-teal); line-height: 1.1; margin: 4px 0; }
.kdpor-card__title { display: block; font-weight: 700; color: var(--kdnum-h); }
.kdnum .kdpor-card__note { margin: 6px 0 0; font-size: var(--kd-body-sm-size); line-height: 1.6; }
.kdpor-card .kdnum-result__more { margin-top: 8px; }