@charset "UTF-8";
/* Стилі плагіна syrocarpaty-header-search. Винесено з блоку <style id="syro-hs-css"> 11.10.2026 без змін у правилах. */
	.syro-hs { display: flex; align-items: center; position: relative; }
	/* Кнопка-лупа: рівно стільки місця, скільки займає іконка, щоб меню
	   не переносилось на другий рядок — саме це й сталося з відкритим полем. */
	.syro-hs__toggle {
		display: inline-flex; align-items: center; justify-content: center;
		width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
		background: transparent; color: inherit; cursor: pointer;
		transition: color .15s ease;
	}
	.syro-hs__toggle:hover { color: #f0a028; }

	/* Згорнутий стан: форма прихована, але лишається в DOM — так пошук
	   працює й без JS (див. .no-js нижче), і не ламається доступність. */
	.syro-hs__form {
		display: flex; align-items: center; gap: 6px;
		border: 1px solid rgba(255,255,255,.35); border-radius: 22px;
		padding: 4px 6px 4px 12px; background: #1e1e2a;
		position: absolute; top: 50%; right: 0; transform: translateY(-50%);
		opacity: 0; visibility: hidden; pointer-events: none;
		transition: opacity .15s ease, visibility .15s ease;
		z-index: 20;
	}
	.syro-hs.is-open .syro-hs__form { opacity: 1; visibility: visible; pointer-events: auto; }
	.syro-hs.is-open .syro-hs__toggle { color: #f0a028; }
	.syro-hs__form:focus-within { border-color: #f0a028; }
	/* appearance:none тут ОБОВʼЯЗКОВЕ, а не косметика (скарга власника 14.08:
	   «поле біле і текст білий, усе зливається»).

	   type="search" на iOS/Safari малюється власним елементом ОС: браузер
	   кладе під нього СВІТЛЕ тло незалежно від нашого `background:transparent`
	   — прозорість застосовується до нашого шару, а не до контрола. Текст у
	   нас білий, тло від браузера світле, і на айфоні поле читалось як
	   порожнє. На десктопі й у curl цього не видно взагалі, тому симптом
	   виглядав як «у вас усе гаразд» — типова пастка перевірки з одного
	   пристрою.

	   Тло тепер задаємо явно (а не покладаємось на просвічування форми) і
	   прибираємо нативний хрестик очищення: він теж малюється темним на
	   темному й у наш круглий рядок не вписується. */
	.syro-hs__field {
		width: 210px; min-width: 0; border: 0; outline: 0;
		-webkit-appearance: none; appearance: none;
		background: #1e1e2a; background-clip: padding-box;
		color: #fff; font: inherit; font-size: 14px; line-height: 1.2; padding: 2px 0;
		border-radius: 0;
	}
	.syro-hs__field::-webkit-search-decoration,
	.syro-hs__field::-webkit-search-cancel-button,
	.syro-hs__field::-webkit-search-results-button { -webkit-appearance: none; appearance: none; }
	.syro-hs__field::placeholder { color: #fff; opacity: .55; }
	.syro-hs__btn {
		display: inline-flex; align-items: center; justify-content: center;
		width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
		background: #f0a028; color: #1e1e2a; cursor: pointer; flex: 0 0 auto;
	}
	.syro-hs__btn:hover { filter: brightness(1.08); }

	/* Без JS кнопка нічого не перемикає, тому там показуємо форму завжди:
	   краще зайве поле, ніж лупа, яка не працює. */
	.no-js .syro-hs__form { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
	.no-js .syro-hs__toggle { display: none; }

	/* Лупа, перенесена в праву частину шапки, стоїть у флексі поруч із
	   телефоном і кошиком — не даємо їй стискатись. */
	.syro-hs--u-shapci { flex: 0 0 auto; }

	/* До 14.08 тут форма ставала статичною на всю ширину — це мало сенс, поки
	   вона жила в меню, яке на телефоні розгортається бургером. Тепер лупа
	   стоїть у шапці поруч із кошиком, і форма на всю ширину рвала б рядок.
	   Лишаємо її випадайкою в обох випадках, тільки вужчою. */
	/* ЗНАЙДЕНО ЗНІМКОМ 17.08 НА ТЕЛЕФОНІ, а не в коді (запит власника
	   «перевір поле пошуку на мобілі»).

	   Нижче 1200px лупа лишається ПУНКТОМ МЕНЮ (див. скрипт: перенесення в
	   шапку тільки від 1200px), а меню в бургері центроване. Форма ж була
	   прибита до правого краю кнопки (`right: 0`) — і, розкриваючись ліворуч
	   на ~250px від кнопки завширшки 30px у центрі екрана, вилазила за лівий
	   край екрана. На 390px користувач бачив «а сиру або набору» замість
	   «Пошук по сиру або набору», а початок поля був за межами екрана.

	   Тому на цих ширинах центруємо форму НА КНОПЦІ, а не на її правому краї.
	   Межа 1199, а не 1200: рівно на 1200px скрипт уже переносить лупу в
	   шапку, і там правильний якраз правий край. Раніше тут стояло 1200 — на
	   одному-єдиному значенні ширини правила суперечили одне одному. */
	@media (max-width: 1199px) {
		.syro-hs__form {
			left: 50%;
			right: auto;
			transform: translate(-50%, -50%);
			max-width: 92vw;
		}
		/* Підказки випадають із тієї ж форми — і мали ту саму ваду. */
		.syro-hs__sugg {
			left: 50%;
			right: auto;
			transform: translateX(-50%);
		}
		/* Поле було 21px заввишки — менше за палець (норма 32-48px). */
		.syro-hs__field { width: min(210px, 56vw); padding: 8px 0; }
		.syro-hs__btn { width: 32px; height: 32px; }
		.syro-hs__toggle { width: 44px; height: 44px; }
	}
	/* ВІДКРИТЕ ПОЛЕ — ПІД РЯДКОМ ШАПКИ, А НЕ В НЬОМУ (1.7.0, 21.09.2026).
	   Знімок власника з ноутбука: відкрите поле лягало поверх кнопки
	   Binotel «Зворотний звʼязок» (з 14.09 стоїть між номером і лупою) і
	   краю номера — «+380 95 758 15 0», далі рамка поля. Форма стояла по
	   вертикалі в рядку шапки й росла ліворуч від лупи рівно туди.
	   Заміряно на проді: від 1240px форма накриває кнопку повністю і
	   впритул підходить до номера, на 1100-1239 під нею ще й іконка трубки.
	   (Уточнено того ж дня: кнопка — не Binotel, а власна кнопка теми з
	   попапом #call-popup. Binotel — кругла кнопка внизу справа.)
	   Номер і кнопка дзвінка — контакти, тому зсуваємо не їх, а поле:
	   воно випадає під лупою, як підказки. Підказки відповідно опускаються
	   нижче форми (58px = 10px зазору + висота форми ~38px + 10px). */
	.syro-hs .syro-hs__form { top: calc(100% + 10px); transform: none; }
	.syro-hs .syro-hs__sugg { top: calc(100% + 58px); }
	@media (max-width: 1199px) {
		.syro-hs .syro-hs__form { transform: translateX(-50%); }
	}
	.no-js .syro-hs .syro-hs__form { transform: none; } /* без JS форма статична */

	/* ВІД 1200px ПОЛЕ СТОЇТЬ У ШАПЦІ ПОСТІЙНО (1.8.0, 21.09.2026).
	   Власник прибрав кнопку теми «Зворотний звʼязок» у випадайку номера
	   (syrocarpaty-vyglyad 1.2.0) і віддав її місце пошуку. Кнопка займала
	   190px + проміжок 20 + лупа 30 = 240px — рівно стільки й займає поле,
	   тому меню ліворуч не зсувається (заміряно на 1200/1280/1440).
	   Лупа-перемикач тут не потрібна: поле видно одразу, кнопка «Знайти» —
	   всередині. Висота 40px — як у кнопки, що стояла тут. Нижче 1200px
	   усе як у 1.7.0: лупа і поле-випадайка. */
	@media (min-width: 1200px) {
		.syro-hs--u-shapci .syro-hs__toggle { display: none; }
		.syro-hs--u-shapci .syro-hs__form {
			position: static; transform: none;
			opacity: 1; visibility: visible; pointer-events: auto;
			width: 240px; height: 40px; box-sizing: border-box;
			padding: 4px 5px 4px 16px; border-radius: 20px;
		}
		.syro-hs--u-shapci .syro-hs__field { flex: 1 1 auto; width: auto; }
		.syro-hs--u-shapci .syro-hs__btn { width: 30px; height: 30px; }
		.syro-hs.syro-hs--u-shapci .syro-hs__sugg { top: calc(100% + 10px); }

		/* СПОКІЙ — ПРОЗОРЕ, ДІЯ — БІЛЕ (1.8.1, прохання власника 21.09).
		   Постійне поле з темним тлом читалось як ще одна кнопка в шапці.
		   Тепер у спокої воно лише контур кольору шапки (currentColor), а
		   білим заповнюється, коли в ньому курсор або вже є текст.
		   Колір береться від шапки, бо вона буває трьох видів: темна, світла
		   і прозора поверх фото на головній (у світлій темі там посилання
		   білі, а сама шапка — темна, тому цей випадок заданий окремо).
		   `html …` у селекторах — щоб переважити svitla-tema, яка фарбує
		   .syro-hs__form і .syro-hs__field своїм тлом. */
		html .syro-hs.syro-hs--u-shapci .syro-hs__form {
			color: inherit; background: transparent;
			border-color: currentColor; border-color: color-mix(in srgb, currentColor 45%, transparent);
			transition: background .15s ease, border-color .15s ease;
		}
		html .syro-hs.syro-hs--u-shapci .syro-hs__field { background: transparent; color: inherit; }
		html .syro-hs.syro-hs--u-shapci .syro-hs__field::placeholder { color: inherit; opacity: .7; }
		html[data-syro-theme="light"] body.home .header:not(.header_scroll):not(.header_open) .syro-hs--u-shapci .syro-hs__form { color: #fff; }
		/* !important — бо svitla-tema ставить УСІМ ::placeholder сайту свій
		   приглушений колір з !important: на фото головної підказка була
		   коричневою й не читалась. Лише для спокою: у білому полі сіра. */
		html[data-syro-theme="light"] body.home .header:not(.header_scroll):not(.header_open) .syro-hs--u-shapci .syro-hs__form:not(:focus-within) .syro-hs__field::placeholder { color: rgba(255,255,255,.8) !important; }

		html .syro-hs.syro-hs--u-shapci .syro-hs__form:focus-within,
		html .syro-hs.syro-hs--u-shapci .syro-hs__form:has(.syro-hs__field:not(:placeholder-shown)) {
			background: #fff; border-color: #f0a028;
		}
		html .syro-hs.syro-hs--u-shapci .syro-hs__form:focus-within .syro-hs__field,
		html .syro-hs.syro-hs--u-shapci .syro-hs__form:has(.syro-hs__field:not(:placeholder-shown)) .syro-hs__field {
			background: #fff; color: #252534;
		}
		html .syro-hs.syro-hs--u-shapci .syro-hs__form:focus-within .syro-hs__field::placeholder { color: #8a8378; opacity: 1; }
	}