/*
 * КіТ — базовий шар.
 *
 * Дизайн-напрям: видавничий. Сайт про книжки, тож він має читатися як добре набрана
 * друкована сторінка — виразна типографічна ієрархія, широкі поля, стриманий колір,
 * головну роботу роблять обкладинки.
 *
 * Що взято з чинного сайту: Vinnytsia Serif у заголовках і світла основа.
 * Що змінено свідомо:
 *   1. Vinnytsia Serif лише у великих кеглях. У дрібному тексті вона втрачає характер,
 *      а на чинному сайті нею набрані навіть підписи кнопок штучним жирним (шрифт має
 *      єдине накреслення Regular) — це дає брудний контур. Дрібне — Fixel Text.
 *   2. Один масштаб розмірів замість трьох випадкових (22/18/14).
 *   3. Пісочний колір лишається лише для лейблів і акцентів, а не як фон випадкових секцій.
 *   4. Ширина рядка обмежена — довгі анотації інакше нечитабельні.
 *   5. Додані стани фокуса: на чинному сайті їх немає взагалі.
 *
 * Кольори — лише через токени --kit-* з colors.css, решта токенів із theme.json.
 * Частина правил нижче ще користується старими --wp--preset--color--*: міграція
 * на нову палітру йде окремим кроком, таблиця відповідності — у docs/conventions.md.
 */

/* ---------- Скидання ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	/*
	 * Сірий прямокутник дотику прибираємо: кожен клікабельний елемент має власний
	 * стан натискання (:active), і він пасує до форми елемента (docs/conventions.md, «Стани»).
	 */
	-webkit-tap-highlight-color: transparent;
	/*
	 * Якір (#pro-vydavnytstvo, #kit-subscribe) не ховається під шапку-капсулою:
	 * вона плаває над сторінкою. Разом із панеллю адміністратора, якщо вона є.
	 */
	scroll-padding-top: calc(var(--wp--custom--header--height) + var(--wp-admin--admin-bar--height, 0px) + 1rem);
}

/*
 * Кнопка — завжди «рука». Браузер ставить її лише посиланням, а <button> лишає
 * звичайну стрілку: так вийшло з «Читати уривок».
 */
button:not(:disabled),
[role="button"],
summary { cursor: pointer; }

body {
	margin: 0;
	font-synthesis-weight: none; /* забороняємо браузеру «жирнити» Vinnytsia */
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video { max-width: 100%; height: auto; display: block; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

/* ---------- Типографіка ---------- */

:root {
	--kit-measure: 68ch;
	--kit-line-tight: 1.15;
	--kit-line-base: 1.6;
	--kit-border: 1px solid var(--wp--preset--color--line);
	--kit-transition: var(--wp--custom--transition, 0.25s ease);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	text-wrap: balance; /* заголовки не лишають самотнє слово в останньому рядку */
}

/* Дрібні заголовки віддаємо Fixel: Vinnytsia на 16–18px читається гірше за неї. */
h5, h6 {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: 0;
}

p, ul, ol, blockquote, figure { margin: 0 0 1.25em; }

/* Ширина рядка для суцільного тексту: анотації книжок довгі. */
.kit-prose > * { max-width: var(--kit-measure); }
.kit-prose > .alignwide,
.kit-prose > .alignfull,
.kit-prose > figure,
.kit-prose > .wp-block-gallery,
.kit-prose > .kit-landing-hero,
.kit-prose > .kit-buy,
.kit-prose > .kit-contacts,
.kit-prose > .kit-subscribe,
.kit-prose > .kit-section,
.kit-prose > .woocommerce { max-width: none; }

.kit-prose h2 { margin-top: 1.8em; }
.kit-prose h3 { margin-top: 1.5em; }

/* Надрядковий підпис — автор, рубрика, службова мітка. */
.kit-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.4em;
}

/* ---------- Розкладка ---------- */

/*
 * Ширина вмісту — до 1440 px (token container.max), поля по боках ростуть з екраном:
 * 20 px на телефоні (28.09.2026), 4 % ширини далі, 64 px на великих моніторах (container.gutter).
 * Так на ноутбуці 1280 вміст займає майже весь екран, а на 1920+ не розповзається:
 * рядок тексту й сітка обкладинок лишаються читабельними.
 */
.kit-container {
	width: 100%;
	max-width: calc(var(--wp--custom--container--max) + 2 * var(--wp--custom--container--gutter));
	margin-inline: auto;
	padding-inline: var(--wp--custom--container--gutter);
}

.kit-main { min-height: 50vh; padding-block: var(--wp--preset--spacing--50); }

/*
 * Секція-блок (SCF-блоки, 28.09.2026): <section class="… kit-block"> на всю ширину,
 * усередині — свій .kit-container. Так секція сама вирішує, чи має тло на всю ширину,
 * а шаблону не треба виривати її з колонки від'ємними відступами.
 * Відступ між секціями — лише тут; самі блоки зовнішніх відступів не мають.
 */
.kit-block { margin-block: var(--wp--preset--spacing--60); }

/* На телефоні між секціями менше повітря: 96 px на вузькому екрані — майже порожній екран. */
@media (max-width: 699px) {
	.kit-block { margin-block: 3.5rem; }
}

/*
 * Блок на звичайній сторінці стоїть уже всередині .kit-container шаблону —
 * вкладений контейнер не додає другого поля й не звужує вміст.
 */
.kit-container .kit-container { max-width: none; padding-inline: 0; }

/*
 * Сторінка із секцій (page.php, 30.09.2026) — як головна: кожен блок на всю ширину
 * зі своїм контейнером. Решта вмісту (заголовок, абзац) стає в колонку тут.
 */
.kit-main--sections { padding-bottom: 0; }

.kit-main--sections > :not(.kit-block) {
	box-sizing: border-box;
	max-width: calc(var(--wp--custom--container--max) + 2 * var(--wp--custom--container--gutter));
	margin-inline: auto;
	padding-inline: var(--wp--custom--container--gutter);
}

/* Остання секція — впритул до футера: відступ до нього дає сам футер. */
.kit-main--sections > :last-child { margin-bottom: 0; }

.kit-section + .kit-section { margin-top: var(--wp--preset--spacing--60); }
.kit-section { margin-bottom: var(--wp--preset--spacing--60); }


.kit-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 2px solid var(--wp--preset--color--contrast);
}

.kit-section__title { margin: 0; font-size: var(--wp--preset--font-size--xxl); }

.kit-grid {
	display: grid;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

/* ---------- Кнопки ---------- */

/*
 * Одна система замість двох конфліктних. Колір — каштан дії (чорних кнопок не робимо,
 * 27.09.2026); форма — з токена button.radius. Це основа для кнопок WooCommerce, які
 * ми не перемальовували окремо (підтвердження email, оплата замовлення тощо).
 */
/*
 * Клас .alt WooCommerce фарбує головну кнопку у свій фіолетовий і має вищу специфічність,
 * тож його треба перекривати явно — інакше кнопка «Додати в кошик» випадає з дизайн-системи.
 */
.kit-btn,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: var(--wp--custom--button--padding--y) var(--wp--custom--button--padding--x);
	min-height: 44px;
	border: 1px solid var(--kit-brand);
	border-radius: var(--wp--custom--button--radius);
	background: var(--kit-brand);
	color: var(--kit-on-brand);
	-webkit-tap-highlight-color: transparent;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--button);
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--kit-transition), color var(--kit-transition), transform 0.1s ease;
}

.kit-btn:hover,
.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	border-color: var(--kit-brand-hover);
	background: var(--kit-brand-hover);
	color: var(--kit-on-brand);
}

.kit-btn:active,
.wp-element-button:active,
.woocommerce :is(a, button, input).button:active {
	border-color: var(--kit-brand-active);
	background: var(--kit-brand-active);
	color: var(--kit-on-brand);
	transform: scale(0.97);
}

.kit-btn--secondary {
	border-color: var(--kit-border-control);
	background: transparent;
	color: var(--kit-brand);
}

.kit-btn--secondary:hover {
	border-color: var(--kit-brand);
	background: var(--kit-brand-soft);
	color: var(--kit-brand);
}

.kit-btn--secondary:active { background: var(--kit-brand-soft-hover); color: var(--kit-brand); }

/* Третій рівень — поверх фотографій, де чорне й біле губляться. */
.kit-btn--accent {
	background: var(--kit-surface);
	border-color: var(--kit-surface);
	color: var(--kit-brand);
}

.kit-btn--accent:hover {
	background: var(--kit-brand-soft);
	border-color: var(--kit-brand-soft);
	color: var(--kit-brand);
}

.kit-btn[disabled],
.kit-btn--disabled {
	background: var(--kit-disabled-bg);
	border-color: var(--kit-disabled-border);
	color: var(--kit-disabled-text);
	cursor: not-allowed;
	transform: none;
}

/* ---------- Доступність ---------- */

/* На чинному сайті стану фокуса немає взагалі — з клавіатури ним користуватись неможливо. */
/*
 * Запасне кільце — для всього, що не має власного правила фокуса (кнопки банера cookie,
 * посилання в тексті): 3 px --kit-focus із білим проміжком, як у шапці й футері.
 * :where — нульова специфічність, тож власні правила компонентів завжди сильніші.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--kit-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--kit-focus-gap);
}

/* Поле введення — рамка дії 2 px без контуру: подвійна рамка в полі читалась як помилка. */
:where(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="range"], [type="color"]), select, textarea):focus-visible {
	outline: none;
	border-color: var(--kit-brand);
	box-shadow: 0 0 0 1px var(--kit-brand);
}

/* Поле з помилкою лишається червоним і у фокусі — інакше рамка дії ховає саму помилку. */
:is(input, select, textarea)[aria-invalid="true"]:focus-visible {
	border-color: var(--kit-error-border);
	box-shadow: 0 0 0 1px var(--kit-error-border);
}

/*
 * Повідомлення WooCommerce (tabindex="-1") отримують фокус від скрипта, щоб зчитувач
 * екрана їх прочитав, а клавіатура туди не веде — видимий контур тут лише заважає.
 */
:is(.woocommerce-error, .woocommerce-message, .woocommerce-info, .woocommerce-NoticeGroup)[tabindex="-1"]:focus {
	outline: none;
	box-shadow: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

/*
 * !important — бо .screen-reader-text (наш і WooCommerce) ставить position й clip
 * з !important; без нього посилання у фокусі лишалось обрізаним до нуля.
 */
.kit-skip-link:focus {
	position: fixed !important; top: 0.75rem; left: 0.75rem; z-index: 1000;
	display: inline-flex; align-items: center;
	width: auto; height: auto; min-height: 44px; margin: 0;
	overflow: visible; clip: auto !important; clip-path: none; white-space: nowrap;
	padding: 0 1.5rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--kit-brand);
	color: var(--kit-on-brand);
	font-weight: 600;
	text-decoration: none;
	outline: 3px solid var(--kit-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--kit-focus-gap);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Лейбли ---------- */

/*
 * Пісочний працює тут і лише тут — це робить його впізнаваним сигналом,
 * а не просто «фірмовим кольором на всьому підряд».
 */
.kit-label {
	display: inline-block;
	padding: 0.2em 0.75em;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.kit-label--dark { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.kit-label--outline { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- Позначка розпродажу ---------- */

/*
 * Штатний бейдж WooCommerce — зелений овал, який випадає з дизайн-системи.
 * Приводимо його до вигляду наших лейблів.
 */
.woocommerce span.onsale {
	position: absolute;
	top: 0; left: 0; right: auto;
	min-height: 0; min-width: 0;
	margin: 0;
	padding: 0.2em 0.75em;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.6;
}

.woocommerce div.product span.onsale { z-index: 3; }

/* ---------- <picture> для окремих mobile-зображень ---------- */

/*
 * ТЗ 5.2: окремі версії зображень для desktop і mobile. Реалізовано справжнім <picture>,
 * а не фоном — зображення книжки має індексуватися, мати alt і відкриватися в лайтбоксі.
 */
.kit-picture { display: block; }
.kit-picture img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Порожні стани ---------- */

/*
 * Спільний вигляд для «нічого не знайдено»: порожній кошик, каталог без збігів,
 * архів без подій. Порожня сторінка має пояснювати, що сталося, і давати вихід —
 * інакше відвідувач просто закриває вкладку.
 */
.kit-empty {
	max-width: 34rem;
	margin: var(--wp--preset--spacing--40) 0;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--panel);
	background: var(--kit-surface-subtle);
	text-align: center;
}

.kit-empty__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--lg);
}

.kit-empty__text {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--kit-text-muted);
}

.kit-empty > p:last-child { margin-bottom: 0; }

/* ---------- Банер cookie (ТЗ 19) ---------- */

/*
 * Позиція — знизу, на всю ширину, поверх контенту. Модальне вікно тут зайве:
 * воно блокує сайт до відповіді, а це вимога не закону, а поганого тону.
 */
/*
 * Атрибут hidden має вимикати елемент завжди. Правила з класами (display: grid тощо)
 * перебивають стиль браузера для [hidden], і панель налаштувань показалася б одразу.
 */
[hidden] { display: none !important; }

/*
 * Біла плаваюча капсула знизу, як шапка вгорі (рішення Р4, 27.09.2026) — замість
 * чорної смуги на всю ширину, найбільшої чорної плями на сайті.
 */
.kit-cookie {
	position: fixed;
	inset-inline: max(0.75rem, calc((100% - 76rem) / 2));
	bottom: 0.75rem;
	z-index: 200;
	max-height: calc(100vh - 1.5rem);
	overflow-y: auto;
	border: 1px solid var(--kit-border-subtle);
	border-radius: var(--wp--custom--radius--panel);
	background: var(--kit-surface);
	color: var(--kit-ink);
	box-shadow: var(--wp--custom--shadow--float);
}

.kit-cookie__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) clamp(1.25rem, 3vw, 2rem);
}

.kit-cookie__text { flex: 1 1 24rem; }
.kit-cookie__text p { margin: 0; font-size: var(--wp--preset--font-size--sm); color: var(--kit-text-muted); }

.kit-cookie .kit-cookie__title {
	margin-bottom: 0.35rem !important;
	color: var(--kit-ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md) !important;
}

.kit-cookie a { color: var(--kit-link); }
.kit-cookie a:hover { color: var(--kit-link-hover); }

.kit-cookie__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	flex: 0 1 auto;
}

/* Кнопки за палітрою: основна — каштан, друга — біла з каштановим контуром. */
.kit-cookie .kit-btn {
	min-height: 44px;
	text-transform: none;
	letter-spacing: normal;
}

.kit-cookie .kit-btn--primary {
	border-color: var(--kit-brand);
	background: var(--kit-brand);
	color: var(--kit-on-brand);
}

.kit-cookie .kit-btn--primary:hover {
	border-color: var(--kit-brand-hover);
	background: var(--kit-brand-hover);
	color: var(--kit-on-brand);
}

.kit-cookie .kit-btn--primary:active {
	border-color: var(--kit-brand-active);
	background: var(--kit-brand-active);
	color: var(--kit-on-brand);
}

.kit-cookie .kit-btn--secondary {
	border: 1px solid var(--kit-brand);
	background: var(--kit-surface);
	color: var(--kit-brand);
}

.kit-cookie .kit-btn--secondary:hover {
	background: var(--kit-brand-soft);
	color: var(--kit-brand);
}

.kit-cookie .kit-btn--secondary:active {
	border-color: var(--kit-brand-active);
	background: var(--kit-brand-soft-hover);
	color: var(--kit-brand-active);
}

.kit-cookie .kit-btn:active { transform: scale(0.97); }

.kit-cookie-link {
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: underline;
	cursor: pointer;
}

/* Текстова дія поруч із кнопками — площа дотику ті самі 44 px, а не висота рядка. */
.kit-cookie .kit-cookie-link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.5rem; color: var(--kit-link); }
.kit-cookie .kit-cookie-link:hover { color: var(--kit-link-hover); }
.kit-cookie a:active,
.kit-cookie .kit-cookie-link:active { color: var(--kit-brand-active); }

.kit-cookie__options {
	flex: 1 1 100%;
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--kit-border-subtle);
}

.kit-cookie__option {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
}

.kit-cookie__option input { margin-top: 0.25rem; flex: 0 0 auto; accent-color: var(--kit-brand); }
.kit-cookie__option strong { display: block; }
.kit-cookie__option-text { display: block; color: var(--kit-text-muted); }

.kit-cookie__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--kit-text-muted);
}

@media (min-width: 48rem) {
	.kit-cookie__options { grid-template-columns: 1fr 1fr; }
	.kit-cookie__note { grid-column: 1 / -1; }
}

/* ---------- Смуга-повідомлення вгорі сторінки ---------- */

.kit-notice {
	padding: var(--wp--preset--spacing--20) 0;
	font-size: var(--wp--preset--font-size--sm);
}

.kit-notice--ok { background: var(--wp--preset--color--cream); }

.kit-notice--warn {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ---------- Повідомлення WooCommerce ---------- */

/*
 * Тут, а не в checkout.css: WooCommerce може показати повідомлення на будь-якій
 * сторінці, а власний стиль магазину ми на інформаційних сторінках не вантажимо.
 */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 1rem 1.25rem;
	border-top: 0;
	border-left: 3px solid var(--kit-brand-decorative);
	border-radius: var(--wp--custom--radius--control);
	background: var(--kit-surface-subtle);
	color: var(--kit-ink);
	font-size: var(--wp--preset--font-size--sm);
	list-style: none;
}

/* Кнопка в повідомленні («Переглянути кошик»): WooCommerce малює її чорною — у нас каштан. */
:is(.woocommerce-info, .woocommerce-message, .woocommerce-error) .button {
	float: right;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: -0.5rem 0 -0.5rem 1rem;
	padding: 0 1.25rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--kit-brand);
	color: var(--kit-on-brand);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--wp--custom--transition), transform var(--wp--custom--transition);
}

:is(.woocommerce-info, .woocommerce-message, .woocommerce-error) .button:hover { background: var(--kit-brand-hover); color: var(--kit-on-brand); }
:is(.woocommerce-info, .woocommerce-message, .woocommerce-error) .button:active { background: var(--kit-brand-active); transform: scale(0.97); }
:is(.woocommerce-info, .woocommerce-message, .woocommerce-error) .button:focus-visible { outline: 3px solid var(--kit-focus); outline-offset: 3px; }

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { content: none; }

.woocommerce-error { border-left-color: var(--kit-error); background: var(--kit-error-soft); }

/* ---------- Перемикач показу пароля ---------- */

/*
 * WooCommerce додає цей перемикач скриптом і малює його символом зі свого
 * іконкового шрифту. Шрифт приходить із woocommerce.css, яку ми на частині
 * сторінок не вантажимо, — і замість ока лишався сірий прямокутник.
 * Малюємо власною іконкою, без залежності від шрифту.
 */
.woocommerce form .password-input {
	position: relative;
	display: block;
}

.woocommerce form .password-input input { padding-right: 3rem; }

/*
 * Крапки прихованого пароля: у Fixel символ «•» дрібний і зливається в лінію.
 * Системний шрифт малює його крупніше, розрідження відділяє крапки. Плейсхолдер і показаний
 * пароль (type="text") — звичайним шрифтом.
 */
input[type="password"]:not(:placeholder-shown),
.kit-auth .form-row input[type="password"]:not(:placeholder-shown),
.kit-form .form-row input[type="password"].input-text:not(:placeholder-shown) {
	font-family: Verdana, Tahoma, system-ui, sans-serif;
	font-size: 1.125rem;
	letter-spacing: 0.18em;
}

.woocommerce form .show-password-input {
	position: absolute;
	top: 50%;
	right: 0.15rem;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	border: 0;
	box-shadow: none;
	background: transparent center / 1.15rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6'%3E%3Cpath d='M1.8 12S5.2 5.8 12 5.8 22.2 12 22.2 12 18.8 18.2 12 18.2 1.8 12 1.8 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3C/svg%3E");
	opacity: 0.5;
	cursor: pointer;
	transition: opacity var(--wp--custom--transition);
}

.woocommerce form .show-password-input::after { content: none; }
.woocommerce form .show-password-input:hover { opacity: 0.85; }
.woocommerce form .show-password-input:focus-visible { outline: 3px solid var(--kit-focus); outline-offset: 0; border-radius: var(--wp--custom--radius--control); }

.woocommerce form .show-password-input.display-password {
	opacity: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6'%3E%3Cpath d='M1.8 12S5.2 5.8 12 5.8 22.2 12 22.2 12 18.8 18.2 12 18.2 1.8 12 1.8 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3Cpath d='M3.5 3.5 20.5 20.5'/%3E%3C/svg%3E");
}

/* ---------- Бажане: кнопка-серце на картці ---------- */

/*
 * Біле коло з контуром серця (28.09.2026). Наведення — бежева підкладка й каштанове
 * серце; «додано» — серце залите каштаном. Стан передає й форма (контур / заливка),
 * а не лише колір.
 */
.kit-wish {
	position: relative;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--kit-surface);
	color: var(--kit-ink);
	transition: background-color var(--kit-transition), color var(--kit-transition), transform 0.1s ease;
}

/* Коло 36 px, щоб не переважало лейбл, а площа дотику — 44 px (docs/conventions.md). */
.kit-wish::after { content: ""; position: absolute; inset: -4px; }

.kit-wish__icon {
	fill: transparent;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linejoin: round;
	transition: fill var(--kit-transition), transform 0.2s ease;
}

/* Наведення — лише мишею: на телефоні після дотику бежевий фон «прилипав» би. */
@media (hover: hover) {
	.kit-wish:hover { background: var(--kit-brand-soft); color: var(--kit-brand-hover); }
}

.kit-wish:active { background: var(--kit-brand-soft-hover); color: var(--kit-brand-active); transform: scale(0.92); }

.kit-wish[aria-pressed="true"] { color: var(--kit-brand); }
.kit-wish[aria-pressed="true"] .kit-wish__icon { fill: currentColor; }

.kit-wish:focus-visible {
	outline: 3px solid var(--kit-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--kit-focus-gap);
}

/* Серце «підстрибує» в мить додавання. */
.kit-wish.is-popping .kit-wish__icon { animation: kit-wish-pop 0.35s ease; }

@keyframes kit-wish-pop {
	50% { transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
	.kit-wish.is-popping .kit-wish__icon { animation: none; }
}

/* ---------- Перевірка форм ---------- */

/*
 * Повідомлення форми (28.09.2026, спільне з 30.09.2026): плашка на м'якому тлі статусу,
 * текст — *-text, кружечок-іконка — основний колір статусу. Статус передає й іконка
 * (!, i, ✓), не лише колір. Жовтий текстом не буває — лише тлом і іконкою.
 * Рядок і іконку ставить kit.js (showStatus), перевірку — validateForm.
 */
.kit-status {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
	padding: 0.625rem 0.875rem;
	border-radius: var(--wp--custom--radius--control);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.4;
}

.kit-status:empty { display: none; }

.kit-status__icon { flex: none; display: flex; margin-top: 0.05em; }
.kit-status__icon svg { width: 18px; height: 18px; }
.kit-status__icon circle { fill: var(--kit-status-icon); }
.kit-status__icon path { fill: none; stroke: var(--kit-status-mark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.kit-status[data-state="error"] {
	--kit-status-icon: var(--kit-error);
	--kit-status-mark: var(--kit-on-error);
	background: var(--kit-error-soft);
	color: var(--kit-error-text);
}

.kit-status[data-state="warning"] {
	--kit-status-icon: var(--kit-warning);
	--kit-status-mark: var(--kit-on-warning);
	background: var(--kit-warning-soft);
	color: var(--kit-warning-text);
}

.kit-status[data-state="ok"] {
	--kit-status-icon: var(--kit-success);
	--kit-status-mark: var(--kit-on-success);
	background: var(--kit-success-soft);
	color: var(--kit-success-text);
}

/* Поле з помилкою: межа й ореол кольору помилки замість звичайних. */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"],
.woocommerce form .form-row .input-text[aria-invalid="true"] {
	border-color: var(--kit-error-border);
	box-shadow: 0 0 0 3px var(--kit-error-soft);
}

/* Підказка «лише українські літери» під ім'ям і прізвищем (kit.js, [data-kit-cyr]). */
.kit-cyr-hint { display: block; margin-top: 0.375rem; color: var(--kit-error-text); font-size: 0.8125rem; line-height: 1.45; }
.kit-cyr-hint[hidden] { display: none; }

/*
 * Пояснення під полем (description WooCommerce) — звичайний сірий підпис, завжди видимий,
 * а не синя спливна підказка лише у фокусі (правка замовника 08.10.2026). !important —
 * бо показ і приховування woocommerce.js ставить інлайн-стилем (slideUp / slideDown).
 */
.woocommerce-input-wrapper .description {
	display: block !important;
	height: auto !important;
	margin: 0.375rem 0 0;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--kit-text-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
	overflow: visible !important;
}
.woocommerce-input-wrapper .description::before { content: none; }
.woocommerce-input-wrapper .description a { color: inherit; }

/* Підказка телефону вже каже те саме, що й помилка WooCommerce після «Підтвердити», — двічі не показуємо. */
.kit-phone-hint:not([hidden]) ~ .checkout-inline-error-message { display: none; }

/* Лічильник символів під полем (kit.js, [data-kit-count]). */
.kit-count { display: block; margin-top: 0.375rem; color: var(--kit-text-muted); font-size: 0.8125rem; text-align: right; font-variant-numeric: tabular-nums; }
.kit-count.is-near { color: var(--kit-warning-text); }