/* brovacar#2604: бренд-шар — ЛИШЕ значення токенів (структура/імена — designSystem,
   рішення Вадіка 02.10.2026 п.4, namespace-правило design-system#452 розділ 4.6).
   Значення підібрані зі старого сайту (brovacar#429 design-tokens.md) у ТУ САМУ
   структуру dropt-токенів (design-system#196), не копія старої схеми 1:1 — мапінг
   design-system#452 розділ 3. */

:root {
	--font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* brovacar#2617 п.4 (design-system#452 «Кольори бренду», варіант (а)): --splash/
	   --splash-d (посилання/h2, старий сайт #008bcd) і --btn-bg/--btn-bg-hover (кнопки,
	   #498fce) ТУТ БІЛЬШЕ НЕ ЗАДАЮТЬСЯ статично — живо з library design|colorPrimary/
	   colorSecondary через Html::brandColorStyle() (head.php, інлайн <style> ПІСЛЯ
	   цього бандла). Значення вище — лише дефолт МІЖ деплоєм і першим рендером (той
	   самий набір, що в library зараз); тримати як fallback, якщо інлайн-стиль колись
	   випаде з head.php. Похідна тінт-шкала (-75/-50/-25/-10/-5/-opa-*) прибрана —
	   ніде не використовувалась (grep перед правкою), дефолт зі спільного шару
	   (designSystem/0-tokens.css) лишається неторканим. */
	--splash: #008bcd;
	--splash-d: #006a9c;
	--primary: var(--splash);
	/* brovacar#2695 (рішення Вадіка 05.10.2026): текст посилань #0076ae — той самий відтінок,
	   5.0:1 на білому (#008bcd давав 3.77:1). --splash (акцент/фони) не змінено. */
	--link: #0076ae;

	/* Текст — теплий темний сірий зі старого сайту */
	--main: #3f3e3a;
	--main-75: #6b6a67;
	--main-50: #979693;
	--main-25: #c3c2c0;
	--main-10: #e5e4e3;
	--main-5: #f3f2f1;
	--main-opa-75: #3f3e3abf;
	--main-opa-50: #3f3e3a80;
	--main-opa-25: #3f3e3a40;
	--main-opa-10: #3f3e3a1a;
	--main-opa-5: #3f3e3a0d;

	--error-text: #f04249;
	--error-back: #fdecec;

	--radius: 4px;

	/* brovacar#2611: другий акцент (старий сайт #498fce, кнопки) — значення тепер живе
	   з library через brandColorStyle() (коментар вище); тут лишається fallback. */
	--btn-bg: #2f78bd; /* brovacar#2696: AA з білим текстом (≈4.9:1); був #498fce 3.44:1 */
	--btn-bg-hover: #2a6aa8;
	--btn-border: var(--btn-bg);
	--btn-outline-text: var(--splash-d); /* brovacar#2693: AA на білому (#498fce давав 3.44:1) */

	/* Темна шапка/верхня смуга/футер — зі старого сайту (design-tokens.md), ЛИШЕ
	   значення токенів компонентів (design-system#452 розділ 4.6) */
	--header-bg: #193c5c;
	--header-text: #ffffff;
	--header-border: #193c5c;
	--header-divider: #ffffff33; /* brovacar#2711: напівпрозорий світлий розділювач у темному меню */
	--header-link-hover: #7cc0e2;

	--topbar-bg: #e8ebee;
	--topbar-text: #3f3e3a;
	--topbar-link: #3f3e3a;
	--topbar-link-hover: #006a9c; /* brovacar#2695: ≥4.5:1 і на фоні смуги #e8ebee (#0076ae там 4.18) */

	--footer-bg: #062f4c;
	--footer-text: #ffffffbf;
	--footer-link-hover: #ffffff;
	--footer-border: #ffffff40;

	--hero-bg: #e8ebee;
	/* brovacar#2693: затемнення hero — темно-синій бренду (#0b2238 = на тон темніший за шапку
	   #193c5c), зліва щільніше (під текстом), справа легше (фото читається) */
	--ghost-hover-text: #0b2238;
	--hero-overlay-strong: #0b2238e0;
	--hero-overlay-soft: #0b223873;
}

/* brovacar#2604: Montserrat самохостинг — woff2, cyrillic+latin, font-display: swap,
   системний fallback (0-tokens.css --font-family). Ліцензія — public/fonts/OFL.txt
   (SIL Open Font License, офіційний текст). Жодних запитів до сторонніх доменів
   (рішення Вадіка 02.10.2026 п.5) — файли лежать у public/fonts/, Variable Font
   (один файл покриває 400-700), @font-face декларується на три вживані ваги. */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/montserrat-cyrillic.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/montserrat-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(../fonts/montserrat-cyrillic.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(../fonts/montserrat-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/montserrat-cyrillic.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/montserrat-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* brovacar#2711: вага 500 (пункти мобільного меню) — той самий Variable Font, окрема декларація, щоб браузер
   віддав саме 500, а не найближчу задекларовану 400 */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../fonts/montserrat-cyrillic.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../fonts/montserrat-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Ajax loader progress bar --- */
/* Перенесено з global/template/front/css/loader.css (brovacar#2604) — current/ повністю
   перекриває папку global/template/front/css/ (Asset.php, design-system#452 розділ 1.1),
   без цього файлу ajax-прогресбар зникає. */

body.loading::after {
	content: '';
	position: fixed;
	top: 0;
	left: -60%;
	width: 60%;
	height: 3px;
	background: var(--primary);
	border-radius: 0 2px 2px 0;
	z-index: 10000;
	animation: loader-slide 1s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes loader-slide {
	0%   { left: -60%; }
	100% { left: 100%; }
}

/* brovacar#3173: бренд-шар — компоненти шапки, верхньої смуги, меню, перемикача мов, футера і каркас сторінки.
   Раніше жили в локальній копії designSystem (2-base/4-components/6-768/7-992). Канонічний global/template/designSystem
   (2.15.0+) має лише частину цих компонентів і з іншими значеннями, тому правила перенесено БЕЗ змін (значення токенів
   --header-*, --footer-* — у 0-tokens.css цього шару) і вони, йдучи після канонічного бандла, перекривають канон.
   Типографіку контенту (h1–h6, p, ul/ol, table, code…) дає канонічний 2-content.css під `.content`. */

/* з 2-base.css */
.wrapper {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

.container > .hero + *,
.container > .grid + *,
.container > .section + *,
.container > h1 + *,
.container > h2 + *,
.container > h3 + *,
.container > h4 + *,
.container > h5 + *,
.container > h6 + *,
.container > * + .hero,
.container > * + .grid,
.container > * + .section,
.container > * + h1,
.container > * + h2,
.container > * + h3,
.container > * + h4,
.container > * + h5,
.container > * + h6 {
	margin-top: var(--section-gap);
}

/* текст усередині обгортки `.content` (h1/hero/grid/section — діти .content, а не .container) */
.container > .content > .hero + *,
.container > .content > .grid + *,
.container > .content > .section + *,
.container > .content > h1 + *,
.container > .content > h2 + *,
.container > .content > h3 + *,
.container > .content > h4 + *,
.container > .content > h5 + *,
.container > .content > h6 + *,
.container > .content > * + .hero,
.container > .content > * + .grid,
.container > .content > * + .section,
.container > .content > * + h1,
.container > .content > * + h2,
.container > .content > * + h3,
.container > .content > * + h4,
.container > .content > * + h5,
.container > .content > * + h6 {
	margin-top: var(--section-gap);
}


img,
svg {
	max-width: 100%;
	height: auto;
}

/* з 4-components.css */
.topbar {
	display: none;
	background: var(--topbar-bg);
	color: var(--topbar-text);
	font-size: var(--font-size-small);
}

.topbar .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s);
	padding-top: var(--xs);
	padding-bottom: var(--xs);
}

.topbar a {
	color: var(--topbar-link);
	text-decoration: none;
}

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

.topbar-contacts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--m);
}

.topbar-social {
	display: flex;
	gap: var(--s);
}

header {
	background: var(--header-bg);
	color: var(--header-text);
	border-bottom: 1px solid var(--header-border);
}

header .container {
	min-height: var(--header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--m);
	position: relative;
	flex-wrap: nowrap;
	padding-top: var(--xs);
	padding-bottom: var(--xs);
}

.site-logo {
	display: flex;
	align-items: center;
	gap: var(--xs);
	flex: 1 1 auto;
	min-width: 0;
}

.site-logo img {
	display: block;
}

.site-logo > img {
	height: 32px;
	width: auto;
	flex-shrink: 1;
	min-width: 0;
}

.site-badge img {
	display: block;
	height: var(--header-badge);
	width: auto;
	flex-shrink: 0;
}

.site-tagline {
	display: none;
	color: var(--header-text);
	font-size: var(--font-size-small);
	opacity: .85;
}

.header-call {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	color: var(--header-text);
	text-decoration: none;
	border-radius: var(--radius);
}

.header-call:hover {
	color: var(--header-link-hover);
}

.header-call .icon {
	width: 24px;
	height: 24px;
}

.nav-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.nav-toggle-label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 0 0 auto;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 var(--xs);
	cursor: pointer;
}

.nav-toggle-label span {
	display: block;
	height: 2px;
	background: var(--header-text);
	border-radius: 1px;
}

header nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--header-bg);
	border-bottom: 1px solid var(--header-border);
	padding: var(--m);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--m);
	max-height: calc(100vh - var(--header-height));
	overflow-y: auto;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .2s, transform .2s, visibility .2s;
	z-index: 50;
}

.nav-toggle:checked ~ nav {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.menu-top {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s);
}

.menu-top li {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-top: 0;
}

.menu-top a,
.menu-top span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	color: var(--header-text);
	font-weight: var(--font-weight-medium);
}

.menu-top a:hover {
	color: var(--header-link-hover);
}

.menu-top li.active > span {
	color: var(--header-link-hover);
}

.lang-panel {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--s);
	font-size: var(--font-size-small);
}

.lang-panel li {
	display: flex;
	align-items: center;
	margin-top: 0;
}

.lang-panel li.active {
	display: none;
}

.lang-panel a,
.lang-panel span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	line-height: 1.2;
	text-decoration: none;
	color: var(--header-text);
	opacity: .75;
}

.lang-panel li.active span {
	opacity: 1;
	font-weight: var(--font-weight-bold);
}

.lang-panel a:hover {
	opacity: 1;
}

footer {
	margin-top: var(--xxl);
	background: var(--footer-bg);
	color: var(--footer-text);
}

footer a {
	color: var(--footer-text);
}

footer a:hover {
	color: var(--footer-link-hover);
}

.footer-grid {
	display: flex;
	flex-direction: column;
	gap: var(--l);
	padding: var(--xl) 0;
}

.footer-grid .menu-simple {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--xs);
}

.footer-grid .menu-simple a,
.footer-grid .menu-simple span {
	text-decoration: none;
	color: var(--footer-text);
}

.footer-grid .menu-simple a:hover {
	color: var(--footer-link-hover);
}

.footer-bottom {
	padding: var(--m) 0;
	border-top: 1px solid var(--footer-border);
	font-size: var(--font-size-small);
}

@media only screen and (min-width: 768px) {
/* brovacar#3171: перенесено з 3-layout.css — файл N-<ширина>.css Asset::prepareCSS обгортає в @media (min-width: 768px); раніше ці правила потрапили у плоский файл і діяли на всіх ширинах (мобільна шапка розвалювалась) */

.footer-grid {
	flex-direction: row;
	justify-content: space-between;
}

.topbar {
	display: block;
}

header .container {
	flex-wrap: wrap;
	gap: var(--m);
}

.site-logo {
	flex: 0 1 auto;
	min-width: auto;
	gap: var(--s);
}

.site-logo > img {
	height: 38px;
}

.site-badge img {
	height: calc(var(--header-height) - var(--m));
}

.site-tagline {
	display: block;
}

.header-call,
.nav-contacts {
	display: none;
}

}
@media only screen and (min-width: 992px) {
/* brovacar#3171: перенесено з 3-layout.css — файл N-<ширина>.css Asset::prepareCSS обгортає в @media (min-width: 992px); раніше ці правила потрапили у плоский файл і діяли на всіх ширинах (мобільна шапка розвалювалась) */

header .container {
	flex-wrap: nowrap;
}

.site-logo {
	flex-shrink: 0;
}

.site-logo > img {
	height: 28px;
	width: auto;
}

.site-tagline {
	display: none;
}

.nav-toggle-label {
	display: none;
}

header nav {
	position: static;
	flex: 1 1 auto;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: var(--s);
	padding: 0;
	border-bottom: none;
	max-height: none;
	overflow: visible;
	visibility: visible;
	opacity: 1;
	transform: none;
	background: transparent;
	width: auto;
}

.menu-top {
	flex-direction: row;
	flex-shrink: 0;
	align-items: center;
	gap: var(--s);
}

.lang-panel {
	align-items: center;
	margin-left: auto;
	flex-shrink: 0;
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	align-items: start;
}

.menu-top a,
.menu-top span,
.lang-panel a,
.lang-panel span {
	min-height: 0;
}

.menu-top a,
.menu-top span {
	font-weight: var(--font-weight-bold);
}
}