.trilang-switcher {
	--trilang-accent: #2563eb;
	--trilang-on-accent: #fff;
	display: inline-block;
}

body.trilang-language-home .hero-section[data-type],
body.trilang-language-home section.hero-section[data-type],
body.trilang-language-home div.hero-section[data-type] {
	display: none !important;
	margin: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
}

body.trilang-language-home .hero-section > .entry-header.ct-container-narrow {
	display: none !important;
	margin: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
}

.trilang-switcher ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.trilang-switcher a {
	align-items: center;
	border-radius: 999px;
	color: inherit;
	display: inline-flex;
	gap: 0.4rem;
	padding: 0.4rem 0.7rem;
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.trilang-switcher .is-current a {
	font-weight: 700;
}

.trilang-switcher .is-fallback a {
	opacity: 0.72;
}

.trilang-switcher--dropdown select {
	border: 1px solid var(--trilang-accent);
	border-radius: 999px;
	box-shadow: none;
	min-width: 10rem;
	padding: 0.48rem 2rem 0.48rem 0.85rem;
}

.trilang-switcher--dropdown select:focus {
	box-shadow: 0 0 0 2px var(--trilang-accent);
	outline: none;
}

.trilang-menu-switcher-item {
	align-items: center;
	display: flex;
	position: relative;
}

.trilang-block-navigation-switcher {
	align-items: center;
	display: inline-flex;
	margin-inline-start: 0.75rem;
}

.trilang-elementor-menu-switcher {
	align-items: center;
	display: inline-flex;
	margin: 0.5rem 0 0 0.75rem;
	vertical-align: middle;
}

.trilang-floating-switcher {
	pointer-events: none;
	position: fixed;
	right: 0;
	top: var(--trilang-floating-top, 110px);
	z-index: 10000;
}

.trilang-floating-switcher .trilang-switcher {
	pointer-events: auto;
}

.trilang-switcher--floating .trilang-switcher__floating-dropdown {
	position: relative;
}

.trilang-switcher--floating summary {
	align-items: center;
	background: var(--trilang-accent);
	border-radius: 7px 0 0 7px;
	color: var(--trilang-on-accent);
	cursor: pointer;
	display: inline-flex;
	font-size: 0.9rem;
	font-weight: 600;
	gap: 0.32rem;
	justify-content: center;
	line-height: 1;
	list-style: none;
	min-height: 2.35rem;
	min-width: 3.1rem;
	padding: 0 0.55rem 0 0.7rem;
	transition: filter 160ms ease, box-shadow 160ms ease;
}

.trilang-switcher--floating summary::-webkit-details-marker {
	display: none;
}

.trilang-switcher--floating summary:hover,
.trilang-switcher--floating summary:focus {
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.2);
	filter: brightness(0.94);
	outline: none;
}

.trilang-switcher--floating .trilang-switcher__arrow {
	height: 0.32rem;
	margin-right: 0;
	width: 0.32rem;
}

.trilang-switcher--floating .trilang-switcher__floating-dropdown[open] .trilang-switcher__arrow {
	margin-top: 0.15rem;
	transform: rotate(225deg);
}

.trilang-switcher--floating .trilang-switcher__floating-list {
	background: #fff;
	border: 1px solid rgba(100, 116, 139, 0.2);
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
	display: block;
	gap: 0;
	margin-top: 0.4rem;
	min-width: 11rem;
	overflow: hidden;
	padding: 0.3rem;
	position: absolute;
	right: 0.45rem;
	top: 100%;
}

.trilang-switcher--floating .trilang-switcher__floating-list a {
	border-radius: 6px;
	display: flex;
	padding: 0.58rem 0.7rem;
	white-space: nowrap;
}

.trilang-switcher--floating .trilang-switcher__floating-list a:hover,
.trilang-switcher--floating .trilang-switcher__floating-list a:focus {
	background: rgba(37, 99, 235, 0.08);
	color: var(--trilang-accent);
}

.trilang-switcher--wpml {
	font-size: inherit;
	position: relative;
}

.trilang-switcher--wpml .trilang-switcher__wpml-dropdown {
	position: relative;
}

.trilang-switcher--wpml summary {
	align-items: center;
	border: 1px solid rgba(100, 116, 139, 0.34);
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	gap: 0.45rem;
	line-height: 1.35;
	list-style: none;
	padding: 0.48rem 0.75rem;
	transition: border-color 160ms ease, color 160ms ease;
	white-space: nowrap;
}

.trilang-switcher--wpml summary::-webkit-details-marker {
	display: none;
}

.trilang-switcher--wpml summary:hover,
.trilang-switcher--wpml summary:focus {
	border-color: var(--trilang-accent);
	color: var(--trilang-accent);
	outline: none;
}

.trilang-switcher__arrow {
	border-bottom: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	display: inline-block;
	height: 0.38rem;
	margin: -0.15rem 0.15rem 0 0.25rem;
	transform: rotate(45deg);
	transition: transform 160ms ease;
	width: 0.38rem;
}

.trilang-switcher__wpml-dropdown[open] .trilang-switcher__arrow {
	margin-top: 0.15rem;
	transform: rotate(225deg);
}

.trilang-switcher--wpml .trilang-switcher__desktop-list {
	background: #fff;
	border: 1px solid rgba(100, 116, 139, 0.22);
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
	display: block;
	gap: 0;
	inset-inline-end: 0;
	margin-top: 0.4rem;
	min-width: 12rem;
	overflow: hidden;
	padding: 0.3rem;
	position: absolute;
	top: 100%;
	z-index: 9999;
}

.trilang-switcher--wpml .trilang-switcher__desktop-list a {
	border-radius: 6px;
	display: flex;
	padding: 0.55rem 0.7rem;
	white-space: nowrap;
}

.trilang-switcher--wpml .trilang-switcher__desktop-list a:hover,
.trilang-switcher--wpml .trilang-switcher__desktop-list a:focus {
	background: rgba(37, 99, 235, 0.08);
	color: var(--trilang-accent);
}

.trilang-switcher--wpml .trilang-switcher__mobile-list {
	display: none;
}

.trilang-switcher--theme-minimal a {
	border-radius: 0;
	padding: 0.3rem 0.15rem;
}

.trilang-switcher--theme-minimal .is-current a,
.trilang-switcher--theme-minimal a:hover {
	color: var(--trilang-accent);
}

.trilang-switcher--theme-minimal .is-current a {
	border-bottom: 2px solid var(--trilang-accent);
}

.trilang-switcher--theme-pills a {
	border: 1px solid transparent;
}

.trilang-switcher--theme-pills a:hover {
	border-color: var(--trilang-accent);
	color: var(--trilang-accent);
}

.trilang-switcher--theme-pills .is-current a {
	background: var(--trilang-accent);
	color: var(--trilang-on-accent);
}

.trilang-switcher--theme-segmented ul {
	border: 1px solid var(--trilang-accent);
	border-radius: 999px;
	gap: 0;
	overflow: hidden;
	padding: 0.15rem;
}

.trilang-switcher--theme-segmented a {
	border-radius: 999px;
}

.trilang-switcher--theme-segmented .is-current a {
	background: var(--trilang-accent);
	color: var(--trilang-on-accent);
}

.trilang-switcher--theme-glass ul {
	backdrop-filter: blur(12px);
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(148, 163, 184, 0.28);
	border-radius: 999px;
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
	gap: 0.25rem;
	padding: 0.25rem;
}

.trilang-switcher--theme-glass a:hover {
	color: var(--trilang-accent);
}

.trilang-switcher--theme-glass .is-current a {
	background: var(--trilang-accent);
	box-shadow: 0 3px 10px rgba(15, 23, 42, 0.14);
	color: var(--trilang-on-accent);
}

.trilang-flag {
	border: 1px solid rgba(0, 0, 0, 0.18);
	box-sizing: border-box;
	display: inline-block;
	height: 0.75rem;
	width: 1.05rem;
}

.trilang-flag--uk {
	background: linear-gradient(#0057b7 0 50%, #ffd700 50% 100%);
}

.trilang-flag--en {
	background: linear-gradient(#012169 0 34%, #fff 34% 42%, #c8102e 42% 58%, #fff 58% 66%, #012169 66% 100%);
}

.trilang-flag--de {
	background: linear-gradient(#000 0 33%, #dd0000 33% 66%, #ffce00 66% 100%);
}

.trilang-product-filter {
	background: #fff;
	border: 1px solid rgba(100, 116, 139, 0.2);
	border-radius: 12px;
	padding: 1rem;
}

.trilang-product-filter__fields {
	display: grid;
	gap: 0.8rem;
}

.trilang-product-filter__field {
	display: block;
}

.trilang-product-filter__field span {
	color: #1f2937;
	display: block;
	font-size: 0.92rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.trilang-product-filter__field select {
	background-color: #fff;
	border: 1px solid rgba(100, 116, 139, 0.42);
	border-radius: 7px;
	box-sizing: border-box;
	min-height: 2.6rem;
	width: 100%;
}

.trilang-product-filter__actions {
	align-items: center;
	display: flex;
	gap: 0.8rem;
	margin-top: 1rem;
}

.trilang-product-filter__actions button {
	background: var(--theme-palette-color-1, #2563eb);
	border: 0;
	border-radius: 7px;
	color: #fff;
	cursor: pointer;
	font-weight: 600;
	min-height: 2.55rem;
	padding: 0.45rem 1rem;
}

.trilang-product-filter__actions a {
	color: inherit;
	font-size: 0.94rem;
	text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2.9.52: ПЕРЕМИКАЧ МОВ У ШАПЦІ — ІНЛАЙН-РЯД «UA · EN · DE»
   Мова = навігація, тож живе в шапці, а не «наклейкою» поверх контенту.
   Розмітка друкується прихованою і переноситься у колонки шапки крихітним
   інлайн-скриптом (Blocksy не дає серверних хуків для колонок) АБО ставиться
   штатним елементом шапки «HTML» через шорткод — тоді скрипта немає взагалі.
   Було (2.9.49–2.9.51) — «пігулка» з випадним списком; власник: «виглядає
   чужорідним». Тут лишився ЧИСТИЙ ТЕКСТ: жодних фонів, рамок, тіней і
   скруглень — тому елемент успадковує типографіку шапки й не читається як
   контрол з адмінки. Побічно зникла й боротьба з шарами: немає панелі, яка
   могла падати під контент (MAIN має z-index 51, шапка 50).
   ═══════════════════════════════════════════════════════════════════════════ */
.trilang-header-slots[hidden] {
	display: none;
}
.trilang-header-switcher {
	display: inline-flex;
	align-items: center;
}
/*
 * ВІДСТУПИ НАВМИСНО НЕ ЗАДАЄМО НА ПК.
 * Виміряно на живому: Blocksy сама дає елементам шапки `margin: 0 10px`, тож між
 * будь-якими сусідніми елементами виходить 20px. Наша пігулка — прямий нащадок
 * колонки, отже отримує той самий відступ автоматично й стоїть у ЄДИНОМУ ритмі
 * з рештою (соцмережі, логотип, іконки). Власний margin тут лише конфліктував би
 * з темою (перша спроба 17px була просто перебита) і ламався б при зміні
 * налаштувань шапки.
 */

/*
 * Те саме на смартфоні: виміряно — тема дає нашій обгортці `margin: 0 10px`,
 * кнопці бургера `0 10px 0 0`, тож зазор виходить 20px — ідентичний відстані між
 * будь-якими іншими елементами шапки. Власний відступ тут теж не потрібен.
 */

.trilang-switcher--header {
	display: inline-block;
	line-height: 1;
}

/*
 * Ряд мов. `gap: 0` навмисно: відступ між мовами дає падінг самих посилань
 * (він же й збільшує зону кліку), а не проміжок між елементами — так зона
 * натискання суцільна й на смартфоні не з'являються «мертві» щілини.
 * `flex-wrap: nowrap` — ряд не має ламатись на два рядки у вузькій колонці
 * шапки (загальне правило перемикача дозволяє перенос).
 */
.trilang-switcher--header .trilang-switcher__header-row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Розділювач «·» друкує CSS, а не розмітка: не займає DOM, не ловить фокус,
 * не виділяється мишею і не читається як окреме посилання.
 */
.trilang-switcher--header .trilang-switcher__item + .trilang-switcher__item::before {
	content: "\00b7";
	color: #aab2b7;
	font-size: 13px;
	line-height: 1;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

/*
 * Тільки текст: жодних background / border / box-shadow / border-radius.
 * Загальне правило `.trilang-switcher a` дає скруглення 999px і падінги —
 * тут воно перебивається явно (інакше при наведенні лишався б слід пігулки).
 */
.trilang-switcher--header .trilang-switcher__header-row a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	/* 7px по горизонталі → між сусідніми мовами 14px + розділювач.
	   Вертикальний падінг тримає зону кліку ≥ 34px на ПК і ≥ 40px на смартфоні. */
	padding: 9px 7px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	/* Приглушений, але читабельний. У ТЗ стояв #8a9399 — ЗАМІРЯНО на живому:
	   3.13:1, тобто НЕ проходить WCAG AA (треба 4.5:1), а це посилання
	   навігації, не декор. #656d72 дає 4.8:1 на ФАКТИЧНОМУ фоні шапки
	   (виміряно: #f5f8f9, а не білий) і лишається помітно світлішим за поточну
	   мову (#2b3138, 12.3:1) — різниця станів зберігається.
	   Той самий підхід, що і в 2.9.49 з контрастом пігулки. */
	color: #656d72;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}

/* Поточна мова — колір основного тексту й помітніша вага (плюс aria-current). */
.trilang-switcher--header .is-current a {
	color: #2b3138;
	font-weight: 600;
}

.trilang-switcher--header .trilang-switcher__header-row a:hover,
.trilang-switcher--header .trilang-switcher__header-row a:focus-visible {
	color: var(--trilang-accent, #3996ad);
}

.trilang-switcher--header .trilang-switcher__header-row a:focus-visible {
	outline: 2px solid var(--trilang-accent, #3996ad);
	outline-offset: 1px;
}

/* ─── Смартфон: тригер «UA ⌄» + випадний список ────────────────────────────
 * ЧОМУ НЕ ряд із трьох мов, як на ПК (заміряно на живому, а не на око):
 * колонка `start` мобільної шапки закінчується на 155px при екрані 375px,
 * 147px при 360 і 127px при 320. Ряд із трьох мов починається з x≈62 і має
 * ширину 83px → запас у колонці 9px (375), 2px (360) і МІНУС 11px (320), де
 * він уже торкається логотипа. Тригер займає ~40px і влазить будь-де, а
 * список розкривається поза потоком (position:absolute), тож ширина екрана
 * на нього не впливає взагалі.
 * Оформлення тримаємо в тій самій «пласкій» мові, що й ряд на ПК: тригер —
 * просто текст поточної мови + маленький шеврон-натяк, жодних заливок,
 * рамок і скруглень (саме за це «капсула» й читалась як чужорідна).
 * ───────────────────────────────────────────────────────────────────────── */

/* ПК: компактний варіант не потрібен — там показуємо ряд. */
.trilang-switcher__header-compact {
	display: none;
}

@media screen and (max-width: 999px) {
	/* Ряд ховаємо ЛИШЕ якщо є чим його замінити (клас ставить PHP, коли мов > 1).
	   Якщо мова одна — ряд лишається, тож його мобільні розміри тут потрібні. */
	.trilang-switcher--header-collapsible .trilang-switcher__header-row {
		display: none;
	}

	.trilang-switcher--header .trilang-switcher__header-row a {
		padding: 14px 5px;
		font-size: 12px;
		letter-spacing: 0.04em;
	}

	.trilang-switcher--header .trilang-switcher__header-row .trilang-switcher__item + .trilang-switcher__item::before {
		font-size: 12px;
	}

	.trilang-switcher--header .trilang-switcher__header-compact {
		display: block;
		position: relative;
	}

	/* Тригер: поточна мова + шеврон. Зона тапу 40px по висоті. */
	.trilang-switcher--header .trilang-switcher__header-trigger {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 12px 5px;
		min-block-size: 40px;
		box-sizing: border-box;
		color: #2b3138;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		white-space: nowrap;
		cursor: pointer;
		list-style: none;
		-webkit-tap-highlight-color: transparent;
	}

	.trilang-switcher--header .trilang-switcher__header-trigger::-webkit-details-marker,
	.trilang-switcher--header .trilang-switcher__header-trigger::marker {
		display: none;
		content: '';
	}

	.trilang-switcher--header .trilang-switcher__header-compact[open] .trilang-switcher__header-trigger,
	.trilang-switcher--header .trilang-switcher__header-trigger:focus-visible {
		color: var(--trilang-accent, #3996ad);
	}

	.trilang-switcher--header .trilang-switcher__header-trigger:focus-visible {
		outline: 2px solid var(--trilang-accent, #3996ad);
		outline-offset: 1px;
	}

	/* Шеврон — натяк «можна натиснути». Приглушений, щоб не перетягувати увагу. */
	.trilang-switcher--header .trilang-switcher__header-trigger .trilang-switcher__arrow {
		inline-size: 5px;
		block-size: 5px;
		margin: -3px 0 0;
		border: 0;
		border-inline-end: 1.5px solid #8a9399;
		border-block-end: 1.5px solid #8a9399;
		transform: rotate(45deg);
		transition: transform 0.18s ease;
	}

	.trilang-switcher--header .trilang-switcher__header-compact[open] .trilang-switcher__arrow {
		margin-block-start: 2px;
		transform: rotate(-135deg);
		border-color: currentColor;
	}

	/*
	 * ОБОВʼЯЗКОВО (перевірено в Chrome 148 окремим зондом): у ЗАКРИТОМУ <details>
	 * вміст із авторським `display` усе одно розкладається — браузерне
	 * приховування перебивається. Тому гасимо список явно, інакше він висів би
	 * під шапкою постійно.
	 */
	.trilang-switcher--header .trilang-switcher__header-compact:not([open]) .trilang-switcher__header-list {
		display: none;
	}

	/*
	 * Список: маленька акуратна картка рівно під тригером.
	 *
	 * ⚠️ ПАСТКА, спіймана заміром: клас називався `__header-menu`, і в нього
	 * влучало правило теми Blocksy `[class*="header-menu"]{height:100%}` —
	 * селектор по ПІДРЯДКУ класу. Картка отримувала висоту контейнера (40px =
	 * висота тригера) і обрізалась на першому пункті. Клас перейменовано на
	 * `__header-list` (перевірено: жодне з ~30 правил `[class*=…]` на сторінці
	 * його не чіпає), а `block-size:auto` лишено як страховка для інших тем.
	 */
	.trilang-switcher--header .trilang-switcher__header-list {
		display: block;
		block-size: auto;
		position: absolute;
		inset-block-start: calc(100% - 2px);
		inset-inline-start: 0;
		z-index: 1000;
		margin: 0;
		padding: 4px;
		min-inline-size: 56px;
		background: #fff;
		border: 1px solid rgba(26, 31, 36, 0.08);
		border-radius: 10px;
		box-shadow: 0 8px 20px rgba(26, 31, 36, 0.12);
		list-style: none;
		animation: trilang-switcher-drop 0.14s ease-out;
	}

	.trilang-switcher--header .trilang-switcher__header-list .trilang-switcher__item + .trilang-switcher__item::before {
		content: none;
	}

	.trilang-switcher--header .trilang-switcher__header-list a {
		display: flex;
		align-items: center;
		min-block-size: 38px;
		padding: 0 12px;
		border-radius: 7px;
		color: #2b3138;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-decoration: none;
		white-space: nowrap;
	}

	.trilang-switcher--header .trilang-switcher__header-list a:hover,
	.trilang-switcher--header .trilang-switcher__header-list a:focus-visible {
		background: #f1f4f5;
		color: var(--trilang-accent, #3996ad);
	}

	/*
	 * Той самий шар, що й у 2.9.50 (тоді правило прибрали разом із випадним
	 * списком, тепер воно знову потрібне): `MAIN.site-main` має z-index 51, а
	 * `HEADER.ct-header` — 50 (MAIN — flex-елемент, тож z-index діє без
	 * position). Тобто контент за визначенням малюється НАД шапкою, і жоден
	 * z-index усередині шапки не допоможе — треба підняти САМУ шапку, і лише
	 * поки список відкритий. `!important` свідомо: тема задає z-index правилом,
	 * яке перебиває звичайну специфічність (перевірено в 2.9.50).
	 */
	header.ct-header:has(.trilang-switcher--header .trilang-switcher__header-compact[open]) {
		z-index: 100 !important;
	}
}

/* Анімація появи списку — окремим блоком (вкладені @media не всюди підтримані). */
@keyframes trilang-switcher-drop {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media screen and (max-width: 999px) and (prefers-reduced-motion: reduce) {
	.trilang-switcher--header .trilang-switcher__header-list {
		animation: none;
	}

	.trilang-switcher--header .trilang-switcher__arrow {
		transition: none;
	}
}

/* 2.9.48: перемикач усередині бургер-панелі теми (Blocksy off-canvas). */
.trilang-offcanvas-switcher {
	margin-block-end: 14px;
}

/* 2.9.48: режим «мова у меню на смартфоні» — плаваюча кнопка ховається на
   вузьких екранах, де вона лягала поверх банера/карток. Брейкпоінт 999px
   збігається з мобільним header більшості тем (Blocksy зокрема). */
@media screen and (max-width: 999px) {
	.trilang-floating-switcher--desktop-only {
		display: none;
	}
}

@media screen and (max-width: 782px) {
	.trilang-floating-switcher {
		top: var(--trilang-floating-top, 84px);
	}

	.trilang-switcher--floating summary {
		font-size: 0.85rem;
		min-height: 2.2rem;
		min-width: 2.85rem;
	}

	.trilang-menu-switcher-item {
		display: block;
	}

	.trilang-block-navigation-switcher {
		margin-inline-start: 0.4rem;
	}

	.trilang-elementor-menu-switcher {
		display: flex;
		margin: 0.5rem 0 0;
	}

	.trilang-switcher--wpml .trilang-switcher__desktop {
		display: none;
	}

	.trilang-switcher--wpml .trilang-switcher__mobile-list {
		align-items: center;
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
	}

	.trilang-switcher--wpml .trilang-switcher__mobile-list li + li::before {
		color: rgba(100, 116, 139, 0.6);
		content: "|";
	}

	.trilang-switcher--wpml .trilang-switcher__mobile-list a {
		border-radius: 0;
		display: inline-flex;
		font-size: 0.9rem;
		padding: 0.35rem 0.5rem;
	}

	.trilang-switcher--wpml .trilang-switcher__mobile-list .is-current a {
		color: var(--trilang-accent);
	}
}