/*
 * Шапка.
 *
 * Перший компонент, переписаний на палітру --kit-* (docs/conventions.md, розділ «Колір»).
 * Тло — --kit-surface, а не --kit-paper: сторінка поки біла, і паперовий відтінок
 * у шапці виглядав би як брудна смуга. Коли тіло мігрує на paper, шапка лишиться
 * білою «поверхнею» над ним — так і задумано.
 *
 * Три зони: логотип · меню по центру · дії. Кошик — єдина дія з заливкою бренду:
 * це головна кнопка магазину, решта дій — тихі іконки з підписами.
 *
 * Шапка — плаваюча капсула (варіант B, обраний замовником 26 вересня 2026).
 * Сама смуга .kit-header прозора й пропускає кліки: під нею видно сторінку,
 * а натискається лише капсула. Висота смуги — токен header.height (88 px):
 * відступ зверху + капсула. На нього спираються липкі колонки на інших сторінках.
 *
 * Геометрія — з токенів theme.json (custom.radius): кнопки-пігулки, поля 8 px.
 * Рішення замовника від 16 вересня 2026, зразок — кнопки «Увійти» й «Кошик».
 */

.kit-header {
	--kit-bar-gap: 16px;
	position: sticky;
	/* Під панеллю адмінки, коли менеджер залогінений; змінну задає сам WordPress. */
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	padding-top: var(--kit-bar-gap);
	color: var(--kit-ink);
	pointer-events: none;
}

/*
 * До 600 px WordPress не фіксує панель адміністратора — вона їде разом зі сторінкою.
 * Шапка тоді прилипає до самого верху, інакше над нею лишається порожня смуга.
 */
@media (max-width: 600px) {
	.kit-header { top: 0; }
}

.kit-header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: calc(var(--wp--custom--header--height) - var(--kit-bar-gap));
	padding: 0 0.75rem 0 1.75rem;
	background: var(--kit-surface);
	border: 1px solid var(--kit-border-subtle);
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--custom--shadow--float);
	pointer-events: auto;
}

/* Спільне фокус-кільце для всього клікабельного в шапці: 3 px контур + 3 px світлий проміжок. */
.kit-header :is(a, button):focus-visible {
	outline: 3px solid var(--kit-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--kit-focus-gap);
}

/* ---------- Логотип ---------- */

.kit-header__logo { display: flex; align-items: center; min-width: 0; }
.kit-header__logo a { display: inline-flex; transition: transform var(--kit-transition); }
/* Логотип — картинка, колір не міняється: відгуком є ледь помітне «вдавлювання». */
.kit-header__logo a:active { transform: scale(0.96); }
.kit-header__logo img { display: block; width: auto; max-height: 40px; }

.kit-logo-text {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	text-decoration: none;
	color: inherit;
}

/* ---------- Меню ---------- */

.kit-header__nav { min-width: 0; }

.kit-menu {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kit-menu a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 0.9375rem;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	color: var(--kit-ink);
	transition: color var(--kit-transition);
}

/*
 * Поточна сторінка — колір бренду й крапка під словом. Крапка, а не лише колір:
 * статус не передаємо самим кольором (docs/conventions.md). Вона ж з'являється при наведенні,
 * тож наведення й поточний пункт говорять однією мовою.
 */
.kit-menu a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 4px;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: currentColor;
	transform: scale(0);
	transition: transform var(--kit-transition);
}

.kit-menu a:hover { color: var(--kit-brand-hover); }
.kit-menu a:hover::after { transform: scale(1); }
.kit-menu a:active { color: var(--kit-brand-active); }

.kit-menu .current-menu-item > a,
.kit-menu .current-menu-ancestor > a { color: var(--kit-brand); }
.kit-menu .current-menu-item > a::after,
.kit-menu .current-menu-ancestor > a::after { transform: scale(1); }

/* Дублікати дій для шухляди — на широкому екрані їх немає. */
.kit-drawer-extra { display: none; }

/* ---------- Дії ---------- */

.kit-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.25rem;
	min-width: 0;
}

.kit-icon { flex: 0 0 auto; width: 20px; height: 20px; }

/*
 * Тиха дія: іконка з підписом. 44 px — мінімальна площа дотику з docs/conventions.md.
 * Наведення підсвічує підкладкою бренду, а не міняє колір тексту: так підписи
 * лишаються читабельними, а різниця між hover і поточним пунктом меню очевидна.
 */
.kit-action {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
	text-decoration: none;
	color: var(--kit-ink);
	border-radius: var(--wp--custom--radius--pill);
	transition: background var(--kit-transition), color var(--kit-transition), border-color var(--kit-transition), transform 0.1s ease;
}

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

/*
 * Телефон — дія (дзвінок), тож у кольорі бренду. У спокої без підкладки, це не кнопка;
 * при наведенні — та сама бежева пігулка, що й в інших дій (28.09.2026): зміни самого
 * кольору тексту з каштану на темніший каштан не видно.
 */
.kit-action--phone { color: var(--kit-brand); }

/* Кабінет — другорядна кнопка: пігулка з контуром, тло поверхні. */
.kit-action--account {
	padding: 0 1.25rem;
	background: var(--kit-surface);
	border: 1px solid var(--kit-border-control);
}
.kit-action--account:hover { border-color: var(--kit-brand); }
.kit-action--account:active { border-color: var(--kit-brand-active); transform: scale(0.97); }

/* Хто увійшов: ім'я замість «Увійти» (довге — обрізаємо) і галочка в кружечку бренду на іконці. */
.kit-action--account .kit-action__label { max-width: 10em; overflow: hidden; text-overflow: ellipsis; }
.kit-action--account .kit-icon__dot { fill: var(--kit-brand); stroke: var(--kit-brand); }
.kit-action--account .kit-icon__tick { stroke: var(--kit-on-brand); stroke-width: 1.4; }

/*
 * Бажане — кругла іконка з лічильником-значком (06.10.2026). Нуль не показуємо: на відміну
 * від кошика, лічильник тут — значок, а не частина форми кнопки.
 */
.kit-action--wish { position: relative; justify-content: center; padding: 0; }
.kit-action--wish:active { transform: scale(0.94); }
.kit-action__badge {
	position: absolute;
	top: 3px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--kit-brand);
	color: var(--kit-on-brand);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 18px;
	text-align: center;
}
.kit-action__badge[data-count="0"] { display: none; }

/* Кошик — головна кнопка шапки, єдина з заливкою бренду: пігулка з лічильником за рискою. */
.kit-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	margin-left: 0.5rem;
	padding: 0 1.25rem;
	background: var(--kit-brand);
	color: var(--kit-on-brand);
	border: 1px solid var(--kit-brand);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
	text-decoration: none;
	transition: background var(--kit-transition), border-color var(--kit-transition), transform 0.1s ease;
}

.kit-cart-link:hover { background: var(--kit-brand-hover); border-color: var(--kit-brand-hover); color: var(--kit-on-brand); }
/* Товар додано: кнопка кошика в шапці коротко «підстрибує» (kit.js, bumpCart). */
.kit-cart-link.is-bumped { animation: kit-cart-bump 0.45s ease; }

@keyframes kit-cart-bump {
	30% { transform: scale(1.12); }
	60% { transform: scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
	.kit-cart-link.is-bumped { animation: none; }
}

.kit-cart-link:active { background: var(--kit-brand-active); border-color: var(--kit-brand-active); transform: scale(0.97); }

/*
 * Лічильник показується завжди, і «0» теж — це частина форми кнопки, а не значок.
 * Риска — декоративний відтінок бренду, а не білий із прозорістю (docs/conventions.md).
 */
.kit-cart-link__count {
	margin-left: 0.25rem;
	padding-left: 0.75rem;
	border-left: 1px solid var(--kit-brand-decorative);
	line-height: 1.5;
}

/* ---------- Міні-кошик ---------- */

/*
 * Капсула під кнопкою «Кошик» (варіант Б + «щойно додано», 28.09.2026): та сама
 * поверхня, межа, закруглення й тінь, що в шапки й мобільного меню — друга капсула
 * під першою. На ПК — під кнопкою праворуч, на телефоні — на всю ширину капсули.
 */
/* Від липкої шапки, як і шухляда меню: права межа — та сама, що в капсули шапки. */
.kit-minicart {
	position: absolute;
	top: calc(var(--wp--custom--header--height) + 10px);
	right: max(var(--wp--custom--container--gutter), calc((100% - var(--wp--custom--container--max)) / 2));
	z-index: 1;
	/* Ширша на ПК (28.09.2026): довгі назви вміщаються в рядок, ціни не тиснуть. */
	width: 440px;
	max-height: calc(100dvh - var(--wp--custom--header--height) - var(--wp-admin--admin-bar--height, 0px) - 24px);
	display: grid;
	/* Рядок вмісту обмежений висотою капсули — без цього сітка розтягувала його під вміст,
	   і на ноутбуці кнопка «Оформити» опинялась нижче екрана (правка 08.10.2026). */
	grid-template-rows: auto minmax(0, 1fr) auto;
	overflow: hidden;
	background: var(--kit-surface);
	border: 1px solid var(--kit-border-subtle);
	border-radius: var(--wp--custom--radius--panel);
	box-shadow: var(--wp--custom--shadow--float);
	pointer-events: auto;
	opacity: 0;
	transform: translateY(-8px);
	visibility: hidden;
	transition: transform var(--kit-transition), opacity var(--kit-transition), visibility var(--kit-transition);
}

.kit-minicart[data-open="true"] { opacity: 1; transform: none; visibility: visible; }

.kit-minicart__body {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	min-height: 0;
	padding: 1rem 1.25rem 1.25rem;
	overflow: hidden;
}

/* Гортається лише список товарів; заголовок, «Разом» і «Оформити замовлення» завжди на виду. */
.kit-minicart__body > * { flex: none; }
.kit-minicart__body > .kit-minicart__items {
	flex: 0 1 auto;
	min-height: 4.5rem;
	/* Поле під підкладку «щойно додано» (вона виступає на 0.625rem): без нього overflow-y: auto
	   вмикав і горизонтальну смугу прокрутки (правка 10.10.2026). */
	margin-inline: -0.625rem;
	padding-inline: 0.625rem;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* «Щойно додано»: зелений рядок згори капсули. Статус — і словом, і галочкою. */
.kit-minicart__added {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.625rem 1.25rem;
	background: var(--kit-success-soft);
	color: var(--kit-success-text);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.35;
}

.kit-minicart__added[hidden] { display: none; }
.kit-minicart__added svg { flex: none; width: 18px; height: 18px; }
.kit-minicart__added circle { fill: var(--kit-success); }
.kit-minicart__added path { fill: none; stroke: var(--kit-on-success); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Смужка часу до самозакриття. Зупиняється, щойно на капсулу навели чи перейшли фокусом. */
.kit-minicart__timer { display: none; height: 3px; background: var(--kit-border-subtle); }
.kit-minicart.is-timed .kit-minicart__timer { display: block; }
.kit-minicart.is-timed .kit-minicart__timer::after {
	content: "";
	display: block;
	height: 100%;
	background: var(--kit-border-control);
	transform-origin: left;
	animation: kit-minicart-timer 5s linear forwards;
}

@keyframes kit-minicart-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.kit-minicart__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }

.kit-minicart__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.15;
}

.kit-minicart__title small {
	display: block;
	margin-top: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--kit-text-muted);
}

.kit-minicart__close {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--kit-brand-soft);
	color: var(--kit-ink);
	transition: background-color var(--kit-transition), transform 0.1s ease;
}

.kit-minicart__close svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.kit-minicart__close:hover { background: var(--kit-brand-soft-hover); }
.kit-minicart__close:active { background: var(--kit-brand-soft-hover); transform: scale(0.92); }

.kit-minicart__items { display: grid; margin: 0; padding: 0; list-style: none; }

.kit-minicart__item {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: start;
	padding: 0.75rem 0;
	transition: background-color 0.6s ease;
}

.kit-minicart__item + .kit-minicart__item { border-top: 1px solid var(--kit-border-subtle); }

/* Щойно доданий товар — на теплій підкладці, з полями, щоб вона не впиралась у текст. */
.kit-minicart__item.is-new {
	margin-inline: -0.625rem;
	padding-inline: 0.625rem;
	border-radius: var(--wp--custom--radius--control);
	background: var(--kit-surface-subtle);
}

/* Підкладка й так відділяє рядок — лінії над ним і під ним прибираємо. */
.kit-minicart__item.is-new,
.kit-minicart__item.is-new + .kit-minicart__item { border-top-color: transparent; }

.kit-minicart__cover { position: relative; display: grid; place-items: center; }

.kit-minicart__cover img { display: block; width: auto; max-width: 52px; height: auto; max-height: 76px; border-radius: 2px 4px 4px 2px; box-shadow: 3px 5px 10px color-mix(in srgb, var(--kit-ink) 18%, transparent); }

.kit-minicart__cover--book::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 1;
	width: 8%;
	background: linear-gradient(90deg, color-mix(in srgb, var(--kit-ink) 26%, transparent), color-mix(in srgb, var(--kit-surface) 20%, transparent) 40%, transparent);
}

.kit-minicart__info { display: grid; gap: 2px; min-width: 0; }

.kit-minicart__meta {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--kit-text-muted);
}

.kit-minicart__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.15;
	color: var(--kit-ink);
}

.kit-minicart__chip {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	padding: 3px 8px;
	border-radius: var(--wp--custom--radius--small);
	background: var(--kit-warning-soft);
	color: var(--kit-warning-text);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
}

.kit-minicart__chip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--kit-warning); }

.kit-minicart__line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.875rem; margin-top: 2px; }

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

/* «− / +» у капсулі: компактна капсула, площа дотику кнопок — 44 px через ::before. */
.kit-minicart__stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--kit-border-control);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--kit-surface);
}
.kit-minicart__step {
	position: relative;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--kit-brand);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--kit-transition), transform 0.1s ease;
	-webkit-tap-highlight-color: transparent;
}
.kit-minicart__step::before { content: ""; position: absolute; inset: -8px; }
.kit-minicart__step:hover { background: var(--kit-brand-soft); }
.kit-minicart__step:active { background: var(--kit-brand-soft-hover); transform: scale(0.94); }
.kit-minicart__step:disabled { background: none; color: var(--kit-disabled-text); cursor: not-allowed; transform: none; }
.kit-minicart__step:focus-visible { outline: 3px solid var(--kit-focus); outline-offset: 2px; box-shadow: 0 0 0 3px var(--kit-focus-gap); }
.kit-minicart__count { min-width: 2ch; font-size: var(--wp--preset--font-size--xs); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

/* «Прибрати» — тихе посилання; площу дотику добирає поле навколо тексту. */
.kit-minicart__remove {
	margin: -0.625rem -0.5rem;
	min-height: 44px;
	padding: 0.625rem 0.5rem;
	border: 0;
	background: none;
	color: var(--kit-text-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: color var(--kit-transition);
}

.kit-minicart__remove:hover { color: var(--kit-error-text); }
.kit-minicart__remove:active { color: var(--kit-error-active); }

/* Товар прибирається: рядок стискається й зникає, поки сервер відповідає. */
.kit-minicart__item.is-removing { pointer-events: none; animation: kit-minicart-out 0.3s ease forwards; }

@keyframes kit-minicart-out { to { opacity: 0.35; transform: translateX(12px); } }

.kit-minicart__price { font-weight: 600; font-size: var(--wp--preset--font-size--sm); font-variant-numeric: tabular-nums; white-space: nowrap; }

.kit-minicart__sum {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--kit-border-subtle);
	font-weight: 500;
}

.kit-minicart__sum b { font-size: var(--wp--preset--font-size--lg); font-variant-numeric: tabular-nums; }

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

.kit-minicart__btns { display: grid; gap: 0.5rem; }

.kit-minicart__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--kit-brand-soft);
	color: var(--kit-brand);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--kit-transition), transform 0.1s ease;
}

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

.kit-minicart__btn--main { background: var(--kit-brand); color: var(--kit-on-brand); }
.kit-minicart__btn--main:hover { background: var(--kit-brand-hover); color: var(--kit-on-brand); }
.kit-minicart__btn--main:active { background: var(--kit-brand-active); color: var(--kit-on-brand); }

.kit-minicart :is(a, button):focus-visible {
	outline: 3px solid var(--kit-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--kit-focus-gap);
}

/* Телефон: на місці шухляди меню — на всю ширину капсули, на 8 px нижче за неї. */
@media (max-width: 899px) {
	.kit-minicart {
		top: calc(var(--kit-bar-gap) + 64px + 8px);
		left: var(--wp--custom--container--gutter);
		right: var(--wp--custom--container--gutter);
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kit-minicart { transition: none; }
	.kit-minicart.is-timed .kit-minicart__timer::after { animation: none; }
}

/* ---------- Бургер ---------- */

.kit-burger {
	display: none;
	position: relative;
	width: 44px; height: 44px;
	padding: 0;
	border: 0;
	/* Бежеве коло за замовчуванням, а не лише при натисканні (28.09.2026). */
	background: var(--kit-brand-soft);
	color: var(--kit-ink);
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	/* Без flex: none у рядку дій стискався саме бургер: на 360 px із кошиком «12» — 38 px, овал. */
	flex: none;
	transition: background var(--kit-transition), transform 0.1s ease;
}

.kit-burger:hover,
.kit-burger[aria-expanded="true"] { background: var(--kit-brand-soft-hover); }
.kit-burger:active { background: var(--kit-brand-soft-hover); color: var(--kit-brand-active); transform: scale(0.94); }

/*
 * Покупець увійшов, а кнопки кабінету на телефоні в шапці немає (вона в шухляді, бо на 360 px
 * їй немає місця) — тож крапка бренду на бургері: «ви в кабінеті». Показуємо лише до 599 px,
 * ширше кабінет стоїть у шапці іконкою з галочкою.
 */
.kit-burger__dot { display: none; }

.kit-burger::before,
.kit-burger::after,
.kit-burger span.kit-burger__bar {
	content: "";
	position: absolute;
	left: 12px; right: 12px;
	height: 2px;
	background: currentColor;
	transition: transform var(--kit-transition), opacity var(--kit-transition);
}

.kit-burger::before { top: 15px; }
.kit-burger::after { bottom: 15px; }
.kit-burger span.kit-burger__bar { top: 21px; }

.kit-burger[aria-expanded="true"]::before { top: 21px; transform: rotate(45deg); }
.kit-burger[aria-expanded="true"]::after { bottom: 21px; transform: rotate(-45deg); }
.kit-burger[aria-expanded="true"] span.kit-burger__bar { opacity: 0; }

/* ---------- Середні екрани: телефон стискається до іконки ---------- */

@media (min-width: 900px) and (max-width: 1099px) {
	.kit-action--phone { justify-content: center; padding: 0; }

	/* Підпис ховаємо візуально, а не display: none — номер має лишитися для читалки. */
	.kit-action--phone .kit-action__label {
		position: absolute !important;
		width: 1px; height: 1px;
		padding: 0; margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.kit-action--account { justify-content: center; padding: 0; }
}

/*
 * Підпис кабінету без іконки ховаємо візуально, а не display: none: у гостя це «Увійти» —
 * єдина назва посилання для читалки. 600–1099 px — кабінет лише іконкою.
 */
@media (min-width: 600px) and (max-width: 1099px) {
	.kit-action--account .kit-action__label {
		position: absolute !important;
		width: 1px; height: 1px;
		padding: 0; margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/*
 * 1100–1199 px, покупець увійшов: меню по центру вже впритул до логотипа й телефона,
 * і довге ім'я з Wix («Горбенко Оксана Георгиевна») штовхало його на логотип і під номер.
 * Номер стає іконкою, як на 900–1099, — ім'я лишається читабельним. Гостю «Увійти»
 * коротке, йому місця вистачає.
 */
@media (min-width: 1100px) and (max-width: 1199px) {
	.logged-in .kit-action--phone { justify-content: center; padding: 0; }

	.logged-in .kit-action--phone .kit-action__label {
		position: absolute !important;
		width: 1px; height: 1px;
		padding: 0; margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* ---------- Вузькі екрани: шухляда ---------- */

@media (max-width: 899px) {
	.kit-header { --kit-bar-gap: 12px; }

	.kit-header__inner {
		grid-template-columns: auto minmax(0, 1fr);
		min-height: 64px;
		padding: 0 8px 0 12px;
	}

	.kit-burger { display: block; }

	/* Логотип на телефоні — той самий, лише менший: 30 px заввишки (28.09.2026). */
	.kit-header__logo img { max-height: 30px; }

	/*
	 * Телефон переїхав у шухляду. Кабінет лишається в шапці іконкою (з галочкою, коли
	 * увійшли): інакше на планшеті шапка покупця нічим не відрізнялась від гостьової.
	 */
	.kit-action--phone { display: none; }
	.kit-action--account { justify-content: center; padding: 0; }

	.kit-cart-link { margin-left: 0.25rem; padding: 0 1rem; }
	.kit-cart-link__label { display: none; }

	/*
	 * Шухляда — друга капсула під першою: та сама поверхня, межа й тінь.
	 * Прив'язана до липкої шапки, а не до вікна: так вона завжди під капсулою,
	 * навіть коли згори є панель адміністратора (46 px, на телефоні прокручується).
	 */
	.kit-header__nav {
		--kit-drawer-top: calc(var(--kit-bar-gap) + 64px + 8px);
		position: absolute;
		inset: var(--kit-drawer-top) var(--wp--custom--container--gutter) auto;
		max-height: calc(100dvh - var(--kit-drawer-top) - var(--wp-admin--admin-bar--height, 0px) - var(--wp--custom--container--gutter));
		overflow-y: auto;
		overflow-x: hidden;
		background: var(--kit-surface);
		border: 1px solid var(--kit-border-subtle);
		border-radius: var(--wp--custom--radius--panel);
		box-shadow: var(--wp--custom--shadow--float);
		opacity: 0;
		transform: translateY(-8px);
		visibility: hidden;
		transition: transform var(--kit-transition), opacity var(--kit-transition), visibility var(--kit-transition);
	}

	.kit-header__nav[data-open="true"] { opacity: 1; transform: translateY(0); visibility: visible; }

	.kit-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem 1.25rem;
	}

	.kit-menu li + li { border-top: 1px solid var(--kit-border-subtle); }

	/* Однакова висота пунктів: рівний ритм, ніякого зайвого поля під останнім. */
	.kit-menu a {
		display: flex;
		min-height: 56px;
		padding: 0;
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--lg);
		font-weight: 400;
	}

	/* У шухляді крапка переїжджає праворуч від пункту — під словом їй тут тісно. */
	.kit-menu a::after { left: auto; right: 4px; bottom: 50%; margin: 0 0 -2.5px; }

	/*
	 * Натискання на телефоні: пункт на мить стає каштановим і з крапкою —
	 * так само, як наведення на ПК. :active спрацьовує від дотику, :hover — ні.
	 */
	.kit-menu a:active { color: var(--kit-brand-active); }
	.kit-menu a:active::after { transform: scale(1); }

	/* Кабінет і телефон — окрема плашка внизу шухляди, на теплому тлі. */
	.kit-drawer-extra {
		display: grid;
		gap: 0;
		margin: 0;
		padding: 0.5rem 1.25rem;
		background: var(--kit-surface-subtle);
		list-style: none;
	}

	/*
	 * Рядок із підкладкою на всю ширину плашки: поля винесені в padding,
	 * щоб підсвітка при дотику не впиралася в текст.
	 */
	.kit-drawer-extra__link {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		min-height: 48px;
		margin-inline: -0.75rem;
		padding-inline: 0.75rem;
		border-radius: var(--wp--custom--radius--control);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 500;
		text-decoration: none;
		color: var(--kit-ink);
		transition: background var(--kit-transition), color var(--kit-transition);
	}

	.kit-drawer-extra__link .kit-icon { color: var(--kit-brand); }

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

/* Телефон: кабінету в шапці місця немає (між логотипом і діями 24 px) — він лише в шухляді. */
@media (max-width: 599px) {
	.kit-action--account { display: none; }

	.kit-burger__dot {
		display: block;
		position: absolute;
		top: 3px;
		right: 3px;
		width: 12px;
		height: 12px;
		border: 2px solid var(--kit-surface);
		border-radius: 50%;
		background: var(--kit-brand);
	}
}

/* 360 px із двоцифровим кошиком: кілька пікселів забираємо в кошика, а не в бургера. */
@media (max-width: 380px) {
	.kit-cart-link { margin-left: 0; padding: 0 0.75rem; }
}

/* ---------- Бажане гостя ---------- */

/*
 * Куди веде сердечко шапки, коли кабінету немає: список із браузера над формою входу
 * (inc/wishlist.php). Тут, а не в account.css, бо це продовження сердечка з шапки.
 * Вузька колонка, як у картки входу, щоб сторінка читалася одним стовпчиком;
 * картки — ті самі, що в кабінеті (.kit-acc-wish), лише вужчі.
 */
.kit-wish-guest { margin-bottom: var(--wp--preset--spacing--40); }
.kit-wish-guest .kit-acc-ph { text-align: center; }
.kit-wish-guest .kit-acc-ph h2 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.1; }
.kit-wish-guest .kit-acc-wish { gap: 1.5rem 0.75rem; }