/*
 * id13dev — дизайн-система сайту id13.dev (тема id13dev).
 * Порядок: токени → шрифти → база → каркас → компоненти → Bootstrap під стиль → оболонка → сторінки.
 *
 * Правила, щоб не повертались накладання і конфлікти:
 *  - компоненти мають префікс (ui-*, home-*, svc-*, post-*); голі теги — лише типографіка, без position/z-index/фону;
 *  - z-index — тільки шкала Bootstrap: 1000 dropdown · 1020 шапка · 1030 плаваючі · 1040 тло модалки · 1050 модалка · 1070 підказка;
 *  - модалки (меню, пошук) живуть ПОЗА шапкою: шапка sticky = окремий шар, модалка в ній опинилась би під своїм тлом;
 *  - !important не використовуємо: специфічність через .ui на <body>.
 */

/* ==========================================================================
   1. Токени
   ========================================================================== */
:root {
	--bg: #070b14;
	--bg-raise: #0a101d;
	--surface: #0d1424;
	--surface-2: #121b2d;
	--surface-3: #18233a;
	--line: rgba(125, 200, 225, .14);
	--line-2: rgba(125, 200, 225, .28);
	--text: #e6edf3;
	--text-2: #a9b6c3;
	--text-3: #7d8b9a;
	--accent: #22d3ee;
	--accent-hover: #67e8f9;
	--accent-2: #2dd4bf;
	--accent-ink: #04131a;
	--accent-soft: rgba(34, 211, 238, .12);
	/* Темніший за фірмовий #229ed9: білий текст на ньому — 4,7:1 (на фірмовому лише 3:1). */
	--tg: #187bb0;
	--tg-hover: #1572a3;
	--star: #fbbf24;
	--danger: #f87171;
	--ok: #34d399;

	--font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--fs-display: clamp(2.5rem, 1.55rem + 4.1vw, 5rem);
	--fs-h1: clamp(2rem, 1.45rem + 2.4vw, 3.5rem);
	--fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 3rem);
	--fs-h3: clamp(1.25rem, 1.12rem + .55vw, 1.625rem);
	--fs-h4: 1.125rem;
	--fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
	--fs-sm: .875rem;
	--fs-xs: .75rem;

	--r-xl: 32px;
	--r-lg: 24px;
	--r-md: 16px;
	--r-sm: 10px;
	--r-pill: 999px;

	--gutter: clamp(16px, 4vw, 32px);
	--container: 1240px;
	--section: clamp(24px, .75rem + 2.6vw, 52px);
	--header-h: 68px;

	--shadow: 0 24px 48px -24px rgba(0, 0, 0, .7);
	--ease: cubic-bezier(.2, .7, .2, 1);

	color-scheme: dark;
}

/* ==========================================================================
   2. Шрифти — змінні woff2, по файлу на підмножину (браузер бере лише потрібні за unicode-range)
   ========================================================================== */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url(../fonts/manrope-cyrillic-ext.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url(../fonts/manrope-cyrillic.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url(../fonts/manrope-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url(../fonts/manrope-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: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(../fonts/jbmono-cyrillic-ext.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(../fonts/jbmono-cyrillic.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(../fonts/jbmono-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(../fonts/jbmono-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;
}

/* ==========================================================================
   3. База — теги через :where(.ui): нульова специфічність, будь-який клас компонента сильніший
   ========================================================================== */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body.ui {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 1rem;
	font-weight: 450;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:where(.ui) h1, :where(.ui) h2, :where(.ui) h3, :where(.ui) h4, :where(.ui) h5, :where(.ui) h6,
:where(.ui) .h1, :where(.ui) .h2, :where(.ui) .h3, :where(.ui) .h4, :where(.ui) .h5, :where(.ui) .h6 {
	margin: 0 0 .5em;
	color: var(--text);
	font-family: var(--font);
}
:where(.ui) h1, :where(.ui) .h1 { font-size: var(--fs-h1); font-weight: 500; line-height: 1.1; letter-spacing: -.025em; }
:where(.ui) h2, :where(.ui) .h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.12; letter-spacing: -.02em; }
:where(.ui) h3, :where(.ui) .h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
:where(.ui) h4, :where(.ui) .h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.35; }
:where(.ui) h5, :where(.ui) .h5, :where(.ui) h6, :where(.ui) .h6 { font-size: 1rem; font-weight: 600; line-height: 1.4; }

:where(.ui) p { margin: 0 0 1em; }
:where(.ui) a { color: var(--accent); text-decoration: none; transition: color .15s; }
:where(.ui) a:hover { color: var(--accent-hover); text-decoration: none; }
:where(.ui) small, :where(.ui) .small { font-size: var(--fs-sm); }
:where(.ui) :is(strong, b) { font-weight: 700; }
:where(.ui) hr { margin: 32px 0; border: 0; border-top: 1px solid var(--line); }
:where(.ui) img { max-width: 100%; height: auto; }
:where(.ui) ::selection { background: rgba(34, 211, 238, .35); color: #fff; }
:where(.ui) :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
:where(.ui) :is(code, kbd, samp) { font-family: var(--mono); font-size: .875em; }
:where(.ui) code { padding: .15em .4em; border-radius: 6px; background: rgba(255, 255, 255, .06); color: #d6e2ec; }
:where(.ui) pre { margin: 0 0 1.5em; padding: 16px 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-raise); color: #d6e2ec; font-family: var(--mono); font-size: .875rem; line-height: 1.6; }
:where(.ui) pre code { padding: 0; background: none; }
:where(.ui) .text-muted { color: var(--text-3); }

/* ==========================================================================
   4. Каркас
   ========================================================================== */
.ui-container,
.ui .container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--gutter);
	padding-left: var(--gutter);
}

.ui-main { min-height: 50vh; }
/* Ще не переписані шаблони Frame (кабінет, кошик, порівняння) кладуть у <main> голий .container — відступ як у .info-page. */
.ui-main > .container { padding-top: 24px; }
.ui-section { padding-top: var(--section); padding-bottom: var(--section); }
.ui-section--tight { padding-top: calc(var(--section) * .55); padding-bottom: calc(var(--section) * .55); }
.ui-section__head { max-width: 780px; margin-bottom: clamp(24px, 1rem + 1.6vw, 44px); }
.ui-section__head--center { margin-right: auto; margin-left: auto; text-align: center; }
.ui-section__title { margin-bottom: .35em; }
.ui-display { font-size: var(--fs-display); font-weight: 300; line-height: 1.04; letter-spacing: -.035em; }

.ui-label {
	display: inline-block;
	margin-bottom: 14px;
	color: var(--accent);
	font-family: var(--mono);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ui-lead { color: var(--text-2); font-size: var(--fs-lead); line-height: 1.6; }
.ui-muted { color: var(--text-2); }

.ui-grid {
	display: grid;
	gap: var(--gap, 20px);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 280px)), 1fr));
}

.ui-nowrap { white-space: nowrap; }

.ui-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ui-skip {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 1070;
	padding: 10px 16px;
	border-radius: var(--r-sm);
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 700;
}
.ui-skip:focus { top: 12px; color: var(--accent-ink); }

/* ==========================================================================
   5. Компоненти
   ========================================================================== */

/* --- Кнопки ---------------------------------------------------------------- */
.ui-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	background: var(--surface-2);
	color: var(--text);
	font: 600 .9375rem/1.2 var(--font);
	letter-spacing: .005em;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.ui .ui-btn:hover { color: var(--text); background: var(--surface-3); transform: translateY(-1px); }
.ui-btn svg { flex: none; width: 18px; height: 18px; fill: currentColor; }
.ui .ui-btn--accent { background: var(--accent); color: var(--accent-ink); }
.ui .ui-btn--accent:hover { background: var(--accent-hover); color: var(--accent-ink); }
.ui .ui-btn--tg { background: var(--tg); color: #fff; }
.ui .ui-btn--tg:hover { background: var(--tg-hover); color: #fff; }
.ui .ui-btn--ghost { border-color: var(--line-2); background: transparent; color: var(--text); }
.ui .ui-btn--ghost:hover { border-color: var(--accent); background: transparent; color: var(--accent); }
.ui-btn--sm { min-height: 40px; padding: 8px 18px; font-size: .875rem; }
.ui-btn--lg { min-height: 56px; padding: 16px 32px; font-size: 1rem; }
.ui-btn--block { display: flex; width: 100%; }

.ui-icon-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	transition: border-color .2s, color .2s, background-color .2s;
}
.ui .ui-icon-btn:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--accent); }
.ui-icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.ui .ui-icon-btn--tg { border-color: transparent; background: var(--tg); color: #fff; }
.ui .ui-icon-btn--tg:hover { background: var(--tg-hover); color: #fff; }
.ui .ui-icon-btn--accent { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.ui .ui-icon-btn--accent:hover { background: var(--accent-hover); color: var(--accent-ink); }

.ui-link-arrow { font-weight: 600; }
.ui-link-arrow::after { content: '→'; display: inline-block; margin-left: 8px; transition: transform .2s var(--ease); }
.ui-link-arrow:hover::after { transform: translateX(3px); }

/* --- Пігулки й мітки --------------------------------------------------------- */
.ui-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--surface);
	color: var(--text-2);
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.4;
}
.ui a.ui-chip:hover { border-color: var(--line-2); color: var(--text); }
.ui-chip--accent { border-color: rgba(34, 211, 238, .35); background: var(--accent-soft); color: var(--accent); }

/* --- Картки ------------------------------------------------------------------ */
.ui-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(20px, 1rem + 1vw, 32px);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	color: var(--text);
	transition: border-color .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease);
}
.ui-card--link:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateY(-2px); }
.ui-card__title { margin: 0; color: var(--text); font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; }
.ui-card__text { margin: 0; color: var(--text-2); }
.ui-card__foot { margin-top: auto; padding-top: 8px; }
/* Уся картка клікабельна, але текст лишається виділюваним. */
.ui-card__stretch::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

/* --- Акордеон (details/summary) — FAQ і розгортання ----------------------------- */
.ui-acc { display: grid; gap: 10px; }
.ui-acc__item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color .2s, background-color .2s; }
.ui-acc__item[open] { border-color: var(--line-2); background: var(--surface-2); }
.ui-acc__q {
	position: relative;
	display: block;
	padding: 18px 56px 18px 22px;
	color: var(--text);
	font-weight: 600;
	line-height: 1.45;
	list-style: none;
	cursor: pointer;
}
.ui-acc__q::-webkit-details-marker { display: none; }
.ui-acc__q::after {
	content: '+';
	position: absolute;
	top: 50%;
	right: 20px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-top: -14px;
	border-radius: 50%;
	background: var(--surface-3);
	color: var(--accent);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1;
	transition: transform .2s var(--ease);
}
.ui-acc__item[open] > .ui-acc__q::after { transform: rotate(45deg); }
.ui-acc__a { padding: 0 22px 20px; color: var(--text-2); }
.ui-acc__a > :last-child { margin-bottom: 0; }

/* --- Рейтинг -------------------------------------------------------------------- */
.ui-stars { display: inline-flex; gap: 2px; color: var(--star); vertical-align: middle; }
.ui-stars svg { width: 16px; height: 16px; fill: currentColor; }
.ui-stars .is-off { color: rgba(255, 255, 255, .18); }

/* --- Банер (common/ui_banner): текст + ілюстрація, колір акценту — від варіанта --------- */
.ui-banner {
	--banner-accent: var(--accent);
	--banner-glow: rgba(34, 211, 238, .2);
	display: grid;
	overflow: hidden;
	border: 1px solid var(--line-2);
	border-radius: var(--r-lg);
	background:
		radial-gradient(60% 90% at 100% 50%, var(--banner-glow), transparent 70%),
		linear-gradient(120deg, var(--surface-2), var(--bg-raise) 70%);
}
.ui-banner--incident { --banner-accent: #fb923c; --banner-glow: rgba(249, 115, 22, .2); border-color: rgba(251, 146, 60, .32); }
.ui-banner--trust { --banner-accent: var(--ok); --banner-glow: rgba(52, 211, 153, .16); }
.ui-banner--promo { --banner-accent: var(--star); --banner-glow: rgba(251, 191, 36, .18); border-color: rgba(251, 191, 36, .32); }
.ui-banner--shop, .ui-banner--shophero { --banner-glow: rgba(139, 92, 246, .22); }
.ui-banner__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(24px, 1rem + 2.2vw, 52px); }
.ui-banner__kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--banner-accent); font: 600 .75rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ui-banner__kicker::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px var(--banner-glow); }
.ui-banner__title { margin: 0; color: var(--text); font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.5rem); font-weight: 500; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.ui-banner__text { max-width: 560px; margin: 0; color: var(--text-2); font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }
.ui-banner__list { display: grid; gap: 10px; margin: 2px 0 0; padding: 0; list-style: none; }
.ui-banner__list li { position: relative; padding-left: 32px; color: var(--text); line-height: 1.5; }
.ui-banner__list li::before { content: '✓'; position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--banner-glow); color: var(--banner-accent); font-size: .75rem; font-weight: 700; }
.ui-banner__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
/* Ілюстрація — першою на телефоні (смуга 16:9), праворуч на ПК; краї сцени розчиняються у фоні банера */
.ui-banner__art { position: relative; order: -1; aspect-ratio: 16 / 9; overflow: hidden; }
.ui-banner__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent);
	mask-image: radial-gradient(closest-side, #000 62%, transparent);
}
/* consult — аватар у колі, а не сцена */
.ui-banner--consult .ui-banner__art { display: flex; aspect-ratio: auto; padding: clamp(24px, 1rem + 2.2vw, 52px) clamp(24px, 1rem + 2.2vw, 52px) 0; }
.ui-banner--consult .ui-banner__art img { width: 112px; height: 112px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2), 0 0 48px rgba(34, 211, 238, .25); -webkit-mask-image: none; mask-image: none; }

@media (max-width: 575.98px) {
	.ui-banner__actions { flex-direction: column; align-self: stretch; }
}

@media (min-width: 768px) {
	.ui-banner { grid-template-columns: minmax(0, 1fr) minmax(240px, 40%); }
	.ui-banner__art { order: 0; aspect-ratio: auto; min-height: 280px; }
	.ui-banner__art img { position: absolute; inset: 0; }
	.ui-banner--consult .ui-banner__art { align-items: center; justify-content: center; padding: 32px; }
	.ui-banner--consult .ui-banner__art img { position: static; width: min(240px, 100%); height: auto; aspect-ratio: 1; }
}

/* --- Акція: код-«купон» (копіюється кліком), смуга над шапкою, рядок у блоці замовлення ---------- */
.ui-promo-code { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px dashed rgba(251, 191, 36, .6); border-radius: var(--r-sm); background: rgba(251, 191, 36, .08); color: var(--star); font: 700 .875rem/1.2 var(--mono); letter-spacing: .04em; cursor: copy; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.ui-promo-code::after { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .8; }
.ui .ui-promo-code:hover { border-color: var(--star); background: rgba(251, 191, 36, .14); color: var(--star); }
.ui-promo-code.is-copied { border-style: solid; border-color: rgba(52, 211, 153, .6); background: rgba(52, 211, 153, .12); color: var(--ok); }
.ui-promo-code.is-copied::after { display: none; }
.ui-promo-code--lg { min-height: 48px; padding: 10px 18px; border-radius: var(--r-pill); font-size: 1rem; }

.ui-promo-bar { border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(251, 191, 36, .12), rgba(34, 211, 238, .1)); color: var(--text-2); font-size: .8125rem; }
.promo-closed .ui-promo-bar { display: none; }
.ui-promo-bar__in { display: flex; align-items: center; justify-content: center; gap: 6px 12px; min-height: 40px; padding-block: 5px; }
.ui-promo-bar__text { color: var(--text); font-weight: 600; }
.ui-promo-bar__short { display: none; }
.ui-promo-bar .ui-promo-code { padding: 3px 10px; font-size: .8125rem; }
.ui-promo-bar__apply, .svc-order__promo-apply { margin-block: -6px; padding: 6px 0; border: 0; background: none; color: var(--accent); font: 600 .8125rem/1.4 var(--font); cursor: pointer; }
.ui .ui-promo-bar__apply:hover, .ui .svc-order__promo-apply:hover { color: var(--accent-hover); text-decoration: underline; }
.ui-promo-bar__close { display: grid; flex: none; place-items: center; width: 30px; height: 30px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; }
.ui .ui-promo-bar__close:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.ui-promo-bar__close svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 575.98px) {
	.ui-promo-bar__long, .ui-promo-bar__apply { display: none; }
	.ui-promo-bar__short { display: inline; }
	/* Цілі для пальця: код ≈ 32 px заввишки, «закрити» — 36 × 36. */
	.ui-promo-bar__in { padding-block: 2px; }
	.ui-promo-bar .ui-promo-code { padding-block: 7px; }
	.ui-promo-bar__close { width: 36px; height: 36px; margin-left: 0; }
}

.svc-order__promo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; border: 1px dashed rgba(251, 191, 36, .35); border-radius: var(--r-md); background: rgba(251, 191, 36, .05); color: var(--text-2); font-size: .8125rem; }
.svc-order__promo > span { color: var(--text); font-weight: 600; }
.home-prices__promo { margin-top: clamp(28px, 1.25rem + 2vw, 48px); }

/* Пульс точки «аварійного» банера — лише якщо людина не просила менше руху */
@keyframes ui-pulse {
	0% { box-shadow: 0 0 0 0 rgba(251, 146, 60, .55); }
	70%, 100% { box-shadow: 0 0 0 10px rgba(251, 146, 60, 0); }
}
@media (prefers-reduced-motion: no-preference) {
	.ui-banner--incident .ui-banner__kicker::before { animation: ui-pulse 1.8s var(--ease) infinite; }
}

/* ==========================================================================
   6. Bootstrap під стиль — для шаблонів, які ще не переписані (кабінет, оформлення тощо)
   ========================================================================== */
.ui .btn { border-radius: var(--r-pill); font-weight: 600; }
.ui .btn-primary,
.ui .btn-danger { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.ui .btn-primary:hover,
.ui .btn-danger:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--accent-ink); }
.ui .btn-light,
.ui .btn-default,
.ui .btn-secondary { border-color: var(--line); background: var(--surface-2); color: var(--text); }
.ui .btn-light:hover,
.ui .btn-default:hover,
.ui .btn-secondary:hover { border-color: var(--line-2); background: var(--surface-3); color: var(--text); }
.ui .btn-link { color: var(--accent); }

.ui .form-control,
.ui .custom-select {
	min-height: 48px;
	border: 1px solid var(--line-2);
	border-radius: var(--r-md);
	background-color: var(--bg-raise);
	color: var(--text);
}
.ui .form-control::placeholder { color: var(--text-3); }
.ui .form-control:focus,
.ui .custom-select:focus { border-color: var(--accent); background-color: var(--bg-raise); color: var(--text); box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); }
.ui textarea.form-control { min-height: 120px; }
.ui label, .ui .col-form-label { color: var(--text-2); font-weight: 500; }
.ui .input-group-text { border-color: var(--line-2); background: var(--surface-2); color: var(--text-2); }

.ui .dropdown-menu {
	padding: 8px;
	border: 1px solid var(--line-2);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--text);
	box-shadow: var(--shadow);
}
.ui .dropdown-item { padding: 10px 14px; border-radius: var(--r-sm); color: var(--text-2); }
.ui .dropdown-item:hover,
.ui .dropdown-item:focus { background: var(--surface-2); color: var(--text); }
.ui .dropdown-item.active,
.ui .dropdown-item:active { background: var(--accent-soft); color: var(--accent); }

.ui .modal-content { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-raise); color: var(--text); }
.ui .modal-header, .ui .modal-footer { border-color: var(--line); }
.ui .close { color: var(--text); text-shadow: none; opacity: .7; }
.ui .modal-backdrop { background: #02050b; }
.ui .modal-backdrop.show { opacity: .72; }

.ui .breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; background: none; font-size: var(--fs-sm); }
.ui .breadcrumb-item { display: inline-flex; align-items: center; padding: 0; color: var(--text-3); }
.ui .breadcrumb-item + .breadcrumb-item::before { padding-right: 6px; color: var(--text-3); content: '/'; }
.ui .breadcrumb-item a { margin-block: -5px; padding-block: 5px; color: var(--text-2); }
.ui .breadcrumb-item a:hover { color: var(--text); }
.ui .breadcrumb-item.active { color: var(--text-3); }

.ui .pagination { flex-wrap: wrap; gap: 6px; }
.ui .page-link { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); }
.ui .page-link:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--text); }
.ui .page-item.active .page-link { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.ui .page-item:first-child .page-link, .ui .page-item:last-child .page-link { border-radius: var(--r-pill); }

.ui .alert { border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); }
.ui .alert-success { border-color: rgba(52, 211, 153, .4); }
.ui .alert-danger { border-color: rgba(248, 113, 113, .45); }

.ui .table { color: var(--text); }
.ui .table th, .ui .table td { border-color: var(--line); }
.ui .table thead th { border-bottom-color: var(--line-2); color: var(--text-2); font-weight: 600; }

.ui .nav-tabs { gap: 6px; border-bottom: 1px solid var(--line); }
.ui .nav-tabs .nav-link { border: 1px solid transparent; border-radius: var(--r-pill); color: var(--text-2); font-weight: 600; }
.ui .nav-tabs .nav-link:hover { border-color: var(--line); color: var(--text); }
.ui .nav-tabs .nav-link.active { border-color: var(--line-2); background: var(--surface-2); color: var(--text); }

.ui .card, .ui .list-group-item { border-color: var(--line); background: var(--surface); color: var(--text); }
.ui .tooltip-inner { border-radius: var(--r-sm); background: var(--surface-3); color: var(--text); }
/* Кольорові утиліти Bootstrap прибрані з bootstrap.css (там вони з !important) — тут їхня темна версія без !important. */
.ui .bg-white, .ui .bg-light { background-color: var(--surface); }
.ui .bg-transparent { background-color: transparent; }
.ui .border { border: 1px solid var(--line); }
.ui .border-top { border-top: 1px solid var(--line); }
.ui .border-bottom { border-bottom: 1px solid var(--line); }
.ui .border-left { border-left: 1px solid var(--line); }
.ui .border-right { border-right: 1px solid var(--line); }
.ui .shadow, .ui .shadow-sm { box-shadow: var(--shadow); }
.ui .text-dark, .ui .text-body { color: var(--text); }
.ui .text-secondary, .ui .text-muted { color: var(--text-3); }
/* Темні сірі (600/700) на темному тлі нечитні — пагінація Frame (pagination_ft.php) і кілька шаблонів. */
.ui .text-gray-600 { color: var(--text-3); }
.ui .text-gray-700 { color: var(--text-2); }
/* Модалка «Залишити заявку» (ft_fastorder Frame): обкладинка 16:10 і «від» біля ціни — як у картках. */
.fo-cover { display: block; width: calc(100% - 16px); height: auto; margin: 16px 0 16px 16px; border-radius: var(--r-md); }
.fo-from { color: var(--text-3); font-size: .875rem; font-weight: 500; }
/* Ширша модалка: у колонці форми має вміститись Turnstile (flexible — від 300 px), інакше його обрізає справа. */
@media (min-width: 576px) { .ui #ft_modal_fastorder .modal-dialog { max-width: 680px; } }

/* Помічники Frame, на які спираються ще не переписані шаблони (з stylesheet.css теми Frame, яку нова тема
   не підключає: там html { font-size: 14px } і z-index до 9999). */
span[class*=col-], span.col { display: block; }
.t-0 { top: 0; } .b-0 { bottom: 0; } .l-0 { left: 0; } .r-0 { right: 0; }
.t-50p { top: 50%; } .l-50p { left: 50%; }
.z-index-2 { z-index: 2; }
.z-index-max { z-index: 1030; }
.cursor-pointer { cursor: pointer; }
[class*=ft-icon] { fill: currentColor; }
.ft-icon-18 { width: 18px; height: 18px; }
.ft-icon-24 { width: 24px; height: 24px; }
.collapsed > .toggle-hidden, .toggle-shown { display: inherit; }
.collapsed > .toggle-shown, .toggle-hidden { display: none; }
[class*=line-clamp-] { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; }
.line-clamp-1 { -webkit-line-clamp: 1; } .line-clamp-2 { -webkit-line-clamp: 2; } .line-clamp-3 { -webkit-line-clamp: 3; }
.required > label::after { content: '\00A0\002A'; color: var(--danger); }
.btn .loading-icon, .btn.loading .static-icon { display: none; }
.btn .static-icon, .btn.loading .loading-icon { display: block; }

/* ==========================================================================
   7. Оболонка: шапка, меню, пошук, футер, плаваюча кнопка
   ========================================================================== */

/* --- Шапка ------------------------------------------------------------------- */
.ui-header {
	position: sticky;
	top: 0;
	z-index: 1020;
	border-bottom: 1px solid var(--line);
	background: rgba(7, 11, 20, .82);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	backdrop-filter: saturate(140%) blur(14px);
}
.ui-header__bar { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }

.ui-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	font-family: var(--font);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1;
	white-space: nowrap;
}
.ui .ui-logo:hover { color: var(--text); }
.ui-logo__mark { flex: none; width: 32px; height: 32px; }
.ui-logo__text i { color: var(--accent); font-style: normal; }
.ui-footer .ui-logo { font-size: 1.625rem; }
.ui-footer .ui-logo__mark { width: 40px; height: 40px; }

.ui-nav { display: none; align-items: center; gap: 2px; margin-left: 20px; }
.ui-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border: 0;
	border-radius: var(--r-pill);
	background: none;
	color: var(--text-2);
	font: 500 .9375rem/1.2 var(--font);
	cursor: pointer;
	transition: color .15s, background-color .15s;
}
.ui .ui-nav__link:hover,
.ui .ui-nav__link.is-active,
.ui .ui-nav__item.show > .ui-nav__link { background: var(--surface-2); color: var(--text); }
.ui-nav__link svg { width: 16px; height: 16px; fill: currentColor; transition: transform .2s var(--ease); }
.ui-nav__item.show > .ui-nav__link svg { transform: rotate(180deg); }
.ui .ui-nav__menu { min-width: 300px; margin-top: 10px; }
.ui .ui-nav__menu .dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 500; }
.ui .ui-nav__menu .dropdown-item.is-active { color: var(--accent); }
.ui-nav__all { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }

.ui-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ui-header__cta { display: none; }

@media (min-width: 992px) {
	.ui-nav { display: flex; }
	.ui-header__burger,
	.ui-header__tg-icon { display: none; }
	.ui-header__cta { display: inline-flex; }
}

/* Перемикач мови: UA | EN */
.ui-lang { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); }
.ui-lang__item {
	min-width: 38px;
	padding: 6px 10px;
	border: 0;
	border-radius: var(--r-pill);
	background: none;
	color: var(--text-3);
	font: 600 .75rem/1 var(--mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}
.ui .ui-lang__item:hover { color: var(--text); }
.ui-lang__item.is-active { background: var(--surface-3); color: var(--text); cursor: default; }
.ui-header .ui-lang { display: none; }

/* Від 992 px бургер (і шухляда з перемикачем мов) схований, тож перемикач — у шапці з тієї самої ширини. */
@media (min-width: 992px) {
	.ui-header .ui-lang { display: inline-flex; }
}

/* --- Меню-шухляда (телефон, планшет): модалка Bootstrap ПОЗА шапкою, на всю висоту --- */
.ui .ui-drawer .modal-dialog {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(88vw, 400px);
	max-width: none;
	height: 100%;
	margin: 0;
	transform: translateX(-100%);
	transition: transform .3s var(--ease);
}
.ui .ui-drawer.show .modal-dialog { transform: none; }
.ui .ui-drawer .modal-content {
	height: 100%;
	overflow-y: auto;
	border: 0;
	border-right: 1px solid var(--line);
	border-radius: 0 var(--r-lg) var(--r-lg) 0;
	background: var(--bg-raise);
}
.ui-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); }
.ui-drawer__body { display: flex; flex-direction: column; gap: 24px; padding: 20px; }
.ui-drawer__nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ui-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 12px;
	border: 0;
	border-radius: var(--r-md);
	background: none;
	color: var(--text);
	font: 600 1.0625rem/1.3 var(--font);
	text-align: left;
	cursor: pointer;
}
.ui .ui-drawer__link:hover,
.ui .ui-drawer__link.is-active { background: var(--surface-2); color: var(--text); }
.ui-drawer__link svg { width: 18px; height: 18px; fill: var(--text-3); transition: transform .2s var(--ease); }
.ui-drawer__link[aria-expanded='true'] svg { transform: rotate(180deg); }
.ui-drawer__sub { display: grid; gap: 2px; margin: 4px 0 8px; padding: 0 0 0 12px; border-left: 1px solid var(--line); list-style: none; }
.ui-drawer__sub a { display: block; padding: 10px 12px; border-radius: var(--r-sm); color: var(--text-2); font-weight: 500; }
.ui .ui-drawer__sub a:hover,
.ui .ui-drawer__sub a.is-active { background: var(--surface-2); color: var(--text); }
.ui-drawer__foot { display: grid; gap: 14px; margin-top: auto; }
.ui-drawer__mail { color: var(--text-2); font-size: var(--fs-sm); }

/* --- Пошук (модалка зверху) ------------------------------------------------------ */
.ui .ui-search-modal .modal-dialog { max-width: 720px; margin: 72px auto 0; padding: 0 var(--gutter); }
.ui .ui-search-modal .modal-content { padding: 8px; border-radius: var(--r-lg); }
.ui-search { position: relative; }
.ui-search__box { display: flex; align-items: center; gap: 8px; }
.ui .ui-search__input {
	flex: 1;
	min-width: 0;
	height: 56px;
	padding: 0 20px;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	background: var(--surface);
	color: var(--text);
	font: 500 1.0625rem/1 var(--font);
}
.ui .ui-search__input:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); }
.ui-search__input::placeholder { color: var(--text-3); }
.ui-search__go { width: 56px; height: 56px; }

/* --- Футер ----------------------------------------------------------------------- */
.ui-footer { margin-top: var(--section); padding: 0 var(--gutter) 24px; }
.ui-footer__card {
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(28px, 1.5rem + 3vw, 56px);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background:
		radial-gradient(110% 130% at 0% 0%, rgba(34, 211, 238, .13), transparent 55%),
		radial-gradient(80% 110% at 100% 100%, rgba(45, 212, 191, .09), transparent 60%),
		var(--surface);
}
.ui-footer__grid { display: grid; gap: 32px; }
.ui-footer__brand p { max-width: 400px; margin: 16px 0 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.7; }
.ui-footer__title { display: block; margin-bottom: 14px; color: var(--text-3); font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ui-footer__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.ui-footer__list a { color: var(--text-2); }
.ui .ui-footer__list a:hover { color: var(--text); }
.ui-footer__note { color: var(--text-3); font-size: var(--fs-sm); }
.ui-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--text-3); font-size: .8125rem; }

@media (min-width: 768px) {
	.ui-footer__grid { grid-template-columns: repeat(3, 1fr); }
	.ui-footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
	.ui-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
	.ui-footer__brand { grid-column: auto; }
}

/* --- Кнопка «нагору» — лише на ПК (на телефоні липка шапка й так завжди під рукою) --- */
.ui-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1030;
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	background: rgba(18, 27, 45, .9);
	color: var(--accent);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .25s, visibility .25s, transform .25s, background-color .2s;
}
.ui-to-top svg { width: 20px; height: 20px; fill: currentColor; }
.ui-to-top:hover { background: var(--surface-3); }
.ui-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

@media (min-width: 992px) {
	.ui-to-top { display: inline-flex; }
}

/* ==========================================================================
   8. Сторінки
   ========================================================================== */

/* --- Мітка з «кодовим» префіксом — фірмова деталь id13 --------------------------- */
.ui-label--code::before { content: '// '; color: var(--text-3); }

/* --- Головна: hero ------------------------------------------------------------- */
.home-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(32px, 1rem + 4.5vw, 88px) 0 clamp(16px, .5rem + 2vw, 40px);
	text-align: center;
}
.home-hero::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -35%;
	left: 50%;
	width: min(1200px, 160vw);
	aspect-ratio: 1.6;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(34, 211, 238, .17), rgba(45, 212, 191, .05) 55%, transparent 78%);
	pointer-events: none;
}
.home-hero__title { max-width: 1120px; margin: 0 auto 24px; }
.home-hero__chip {
	display: inline-block;
	width: .8em;
	height: .8em;
	margin: 0 .06em;
	overflow: hidden;
	vertical-align: -.06em;
	border: 1px solid var(--line-2);
	border-radius: .22em;
	box-shadow: 0 0 0 .08em rgba(34, 211, 238, .08), 0 .2em .5em rgba(0, 0, 0, .5);
	rotate: -6deg;
}
.home-hero__chip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-hero__text { max-width: 680px; margin: 0 auto 32px; }
.home-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

@media (max-width: 575.98px) {
	.home-actions { flex-direction: column; align-items: stretch; }
}

.home-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 1000px; margin: clamp(40px, 2rem + 3vw, 80px) auto 0; }
.home-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: rgba(13, 20, 36, .72);
	color: var(--text);
	text-align: center;
	transition: border-color .2s var(--ease), translate .2s var(--ease);
}
.ui a.home-stat:hover { border-color: var(--line-2); color: var(--text); translate: 0 -2px; }
.home-stat__value { color: var(--text); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; }
.home-stat__label { color: var(--text-2); font-size: .875rem; line-height: 1.35; }

/* Бігучий рядок технологій: два однакові списки, трек зсувається на половину — безшовне коло; наведення — пауза */
.home-tech { margin: clamp(28px, 1.25rem + 2vw, 48px) auto 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.home-tech__track { display: flex; width: max-content; }
.home-tech__list { display: flex; gap: 10px; margin: 0; padding: 0 10px 0 0; list-style: none; }
.home-tech__list li { padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: rgba(13, 20, 36, .6); color: var(--text-2); font: 500 .8125rem/1.3 var(--mono); white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
	.home-tech__track { animation: ui-marquee 48s linear infinite; }
	.home-tech:hover .home-tech__track { animation-play-state: paused; }
	/* Світіння першого екрана повільно дрейфує */
	.home-hero::before { animation: ui-glow 16s ease-in-out infinite alternate; }
	/* «Вільний для роботи» — живий пульс */
	.fhp__status::before { animation: ui-pulse-ok 2.2s var(--ease) infinite; }
}

@keyframes ui-marquee { to { transform: translateX(-50%); } }
@keyframes ui-glow { to { transform: translateX(-46%) translateY(5%) scale(1.08); } }
@keyframes ui-pulse-ok {
	0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
	70%, 100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}

/* Плавна поява під час прокрутки — лише ПК (клас ui-rise ставить footer.twig блокам нижче першого екрана й лише з JS) */
.ui-rise { opacity: 0; }
.ui-rise.is-risen { animation: ui-rise .45s var(--ease) var(--d, 0ms) both; }
@keyframes ui-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@media (min-width: 768px) {
	.home-stats { grid-template-columns: repeat(4, 1fr); gap: 16px; }
	/* Легкий нахил карток — відсилка до f-47; rotate окремо від translate, тож hover не скидає нахил */
	.home-stat:nth-child(odd) { rotate: -1.5deg; }
	.home-stat:nth-child(even) { rotate: 1.5deg; }
}

/* --- Головна: ситуації ------------------------------------------------------------ */
.home-pains__grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.home-pain__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.home-pain__icon svg { width: 24px; height: 24px; fill: currentColor; }
.home-pains__note { max-width: 780px; margin: 36px auto 10px; color: var(--text-2); text-align: center; }
.home-pains__cta { margin: 0; text-align: center; }
.home-pains__banner { margin-top: clamp(32px, 1.5rem + 2.5vw, 56px); }
.ui-section.home-shop { padding-top: 0; padding-bottom: 0; }

@media (min-width: 640px) { .home-pains__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .home-pains__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* --- Головна: як я працюю (контрастна панель) -------------------------------------- */
.home-steps__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(28px, 1rem + 3.5vw, 72px) clamp(20px, .5rem + 4.5vw, 72px);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: linear-gradient(180deg, #0f1b30 0%, #0a1222 100%);
}
.home-steps__panel::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -40%;
	right: -20%;
	width: 70%;
	aspect-ratio: 1;
	background: radial-gradient(closest-side, rgba(34, 211, 238, .12), transparent 72%);
	pointer-events: none;
}
.home-steps__grid { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.home-step { position: relative; padding: 28px 0 28px 64px; border-top: 1px solid var(--line); }
.home-step__num {
	position: absolute;
	top: 20px;
	left: 0;
	color: transparent;
	font-size: 3rem;
	font-weight: 200;
	line-height: 1;
	-webkit-text-stroke: 1px rgba(34, 211, 238, .6);
}
.home-step__title { margin: 0 0 8px; color: var(--text); font-size: var(--fs-h3); font-weight: 600; }
.home-step__text { margin: 0; color: var(--text-2); }
.home-steps__guarantees { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 32px 0 0; padding: 0; list-style: none; }

@media (min-width: 768px) {
	.home-steps__grid { grid-template-columns: repeat(2, 1fr); }
	.home-step { padding: 34px 32px 34px 84px; }
	.home-step:nth-child(even) { border-left: 1px solid var(--line); }
	.home-step__num { top: 28px; left: 20px; font-size: 3.5rem; }
}

/* --- Головна: формати й ціни --------------------------------------------------------- */
.home-prices__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.home-price {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(24px, 1.2rem + 1.5vw, 40px);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
}
.home-price.is-featured {
	border-color: rgba(34, 211, 238, .45);
	background: linear-gradient(180deg, rgba(34, 211, 238, .11), rgba(13, 20, 36, 0) 45%), var(--surface);
	box-shadow: 0 0 0 1px rgba(34, 211, 238, .14), var(--shadow);
}
.home-price__tag { align-self: flex-start; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--accent); font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.home-price__name { margin: 0; color: var(--text); font-size: 1.75rem; font-weight: 400; letter-spacing: -.02em; }
.home-price__text { margin: 0; color: var(--text-2); }
.home-price__list { display: grid; gap: 10px; margin: 4px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; }
.home-price__list li { position: relative; padding-left: 26px; font-size: .9375rem; }
.home-price__list li::before {
	content: '';
	position: absolute;
	top: .5em;
	left: 2px;
	width: 12px;
	height: 6px;
	border-bottom: 2px solid var(--accent);
	border-left: 2px solid var(--accent);
	rotate: -45deg;
}
.home-price__value { margin-top: auto; padding-top: 14px; color: var(--text-2); font-size: 1.0625rem; }
.home-price__value strong { color: var(--text); font-size: 2rem; font-weight: 400; letter-spacing: -.02em; }

@media (min-width: 900px) { .home-prices__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* --- Головна: FAQ у дві колонки ---------------------------------------------------- */
.home-faq__layout { display: grid; gap: 28px; }

@media (min-width: 992px) {
	.home-faq__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
	.home-faq__head { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* --- Головна: фінальний заклик і SEO-текст ------------------------------------------ */
.home-final { padding-bottom: 0; }
.home-cta {
	padding: clamp(32px, 1rem + 4vw, 80px) clamp(20px, .5rem + 4.5vw, 72px);
	border: 1px solid rgba(34, 211, 238, .3);
	border-radius: var(--r-xl);
	background:
		radial-gradient(90% 130% at 0% 0%, rgba(34, 211, 238, .22), transparent 60%),
		radial-gradient(90% 130% at 100% 100%, rgba(45, 212, 191, .15), transparent 60%),
		#0c1828;
	text-align: center;
}
.home-cta__title { max-width: 860px; margin: 0 auto 16px; font-size: var(--fs-h2); font-weight: 400; }
.home-cta__text { max-width: 640px; margin: 0 auto 28px; }
.home-cta__avatar { display: block; width: 112px; height: 112px; margin: 0 auto 24px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(34, 211, 238, .3), 0 0 48px rgba(34, 211, 238, .28); }

@media (min-width: 768px) {
	.home-cta__avatar { width: 128px; height: 128px; }
}
.home-seo { max-width: 860px; margin: clamp(40px, 2rem + 3vw, 72px) auto 0; color: var(--text-2); font-size: .9375rem; }
.home-seo strong { color: var(--text); }
.home-seo__more > summary { display: inline-flex; color: var(--accent); list-style: none; cursor: pointer; }
.home-seo__more > summary::-webkit-details-marker { display: none; }
.home-seo__body h3 { margin: 24px 0 8px; font-size: 1.125rem; }
.home-seo__body p { margin: 0 0 8px; }

/* --- Відгуки Freelancehunt (модуль id13dev_fhreviews) ------------------------------- */
.fhr__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -8px 0 28px; }
.fhr__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.fhr__card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.fhr__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fhr__author { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fhr__avatar { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-3); color: var(--accent); font-size: .875rem; font-weight: 700; object-fit: cover; }
.fhr__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fhr__name, .fhr__name a { color: var(--text); font-weight: 700; }
.fhr__company { color: var(--text-3); font-size: .8125rem; }
.fhr__grade { flex: none; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(251, 191, 36, .12); color: var(--star); font-size: .8125rem; font-weight: 700; }
.fhr__text { margin: 0; color: var(--text-2); font-size: .9375rem; }
.fhr__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text-3); font-size: .8125rem; }
.fhr__project a { color: var(--text-2); }
.fhr__name a, .fhr__project a { padding-block: 4px; }
.fhr__meta { display: inline-flex; gap: 12px; }
.fhr__more { margin-top: 28px; text-align: center; }

/* Телефон: відгуки — стрічка з прокруткою (як скріншоти профілю), а не шість карток стовпчиком */
@media (max-width: 719.98px) {
	.fhr__grid { display: flex; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.fhr__grid::-webkit-scrollbar { display: none; }
	.fhr__card { flex: none; width: 86%; scroll-snap-align: center; }
}
@media (min-width: 720px) { .fhr__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .fhr__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* --- Кейси «до/після» (common/ui_cases): смуги «до/після» ростуть, коли блок з'являється на екрані ------- */
.ui-cases__grid { display: grid; gap: 16px; }
.ui-case { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 1rem + 1vw, 28px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ui-case__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-case__factor { flex: none; color: var(--accent); font: 300 clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem)/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.ui-case__title { margin: 0; color: var(--text); font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.ui-case__text { margin: 0; color: var(--text-2); font-size: .9375rem; line-height: 1.6; }
.ui-case__metrics { display: grid; gap: 14px; margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.ui-case__metric dt { margin-bottom: 6px; color: var(--text-3); font-size: .8125rem; font-weight: 500; }
.ui-case__metric dd { display: grid; gap: 6px; margin: 0; }
.ui-case__row { display: grid; grid-template-columns: minmax(0, 1fr) 4.5em; align-items: center; gap: 10px; }
.ui-case__row b { font: 600 .875rem/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.ui-case__row--before b { color: var(--text-3); }
.ui-case__row--after b { color: var(--accent); }
.ui-case__bar { position: relative; height: 10px; overflow: hidden; border-radius: var(--r-pill); background: rgba(255, 255, 255, .04); }
.ui-case__bar i { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); border-radius: inherit; transform-origin: left center; transition: transform 1.1s var(--ease); }
.ui-case__row--before .ui-case__bar i { background: linear-gradient(90deg, rgba(248, 113, 113, .55), rgba(251, 146, 60, .8)); }
.ui-case__row--after .ui-case__bar i { background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 12px rgba(34, 211, 238, .45); transition-delay: .35s; }
/* З JS смуги порожні, доки блок не з'явиться на екрані; без JS — одразу повні (клас js ставить header.twig) */
.js [data-reveal]:not(.is-in) .ui-case__bar i { transform: scaleX(0); }
.ui-cases__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 18px 0 0; color: var(--text-3); font-size: .8125rem; }
.ui-cases__legend span::before { content: ''; display: inline-block; width: 18px; height: 8px; margin-right: 8px; border-radius: var(--r-pill); vertical-align: 1px; }
.ui-cases__legend .is-before::before { background: linear-gradient(90deg, rgba(248, 113, 113, .55), rgba(251, 146, 60, .8)); }
.ui-cases__legend .is-after::before { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.ui-cases--one .ui-cases__legend { justify-content: flex-start; }
.svc-cases { margin-top: clamp(40px, 1.5rem + 3vw, 72px); }

/* --- Головна: «До і після» за напрямками (вкладки; без JS — усі панелі підряд) ---------------------- */
.home-ba__tabs { display: none; gap: 8px; margin: 0 calc(var(--gutter) * -1) 20px; padding: 2px var(--gutter) 6px; overflow-x: auto; scrollbar-width: none; }
.home-ba__tabs::-webkit-scrollbar { display: none; }
.js .home-ba__tabs { display: flex; }
.home-ba__tab { flex: none; padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); font: 600 .875rem/1.2 var(--font); white-space: nowrap; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); }
.ui .home-ba__tab:hover { border-color: var(--line-2); color: var(--text); }
.ui .home-ba__tab[aria-selected="true"] { border-color: rgba(34, 211, 238, .45); background: var(--accent-soft); color: var(--accent); }
.home-ba__panel { display: grid; gap: 20px; }
.home-ba__panel + .home-ba__panel { margin-top: 32px; }
.js .home-ba__panel + .home-ba__panel { margin-top: 0; }
.js .home-ba__panel[data-tab-hidden] { display: none; }
.home-ba__name { margin: 0 0 12px; color: var(--text); font-size: 1.125rem; font-weight: 600; }
.js .home-ba__name { display: none; }
.home-ba__more { display: inline-block; margin-top: 16px; }
.home-ba .svc-ba__col li { font-size: .9375rem; }
.ui-cases__kicker { display: block; margin-bottom: 10px; }

@media (min-width: 768px) {
	.js .home-ba__tabs { flex-wrap: wrap; justify-content: center; margin-inline: 0; padding-inline: 0; overflow: visible; }
}

@media (min-width: 1100px) {
	.home-ba__panel.has-case { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); align-items: start; gap: 24px; }
}

/* --- «До і після» послуги (атрибути групи «До і після», product.twig) ----------------------------- */
.svc-ba { margin-top: clamp(28px, 1.25rem + 2vw, 48px); }
.svc-ba__grid { display: grid; gap: 12px; }
.svc-ba__col { padding: clamp(18px, 1rem + .6vw, 24px); border: 1px solid var(--line); border-radius: var(--r-lg); }
.svc-ba__col--before { border-color: rgba(248, 113, 113, .22); background: linear-gradient(160deg, rgba(248, 113, 113, .07), var(--surface) 60%); }
.svc-ba__col--after { border-color: rgba(34, 211, 238, .3); background: linear-gradient(160deg, rgba(34, 211, 238, .09), var(--surface) 60%); }
.svc-ba__label { display: inline-block; margin-bottom: 12px; font: 600 .75rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.svc-ba__col--before .svc-ba__label { color: #fb923c; }
.svc-ba__col--after .svc-ba__label { color: var(--accent); }
.svc-ba__col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.svc-ba__col li { position: relative; padding-left: 30px; color: var(--text-2); line-height: 1.55; }
.svc-ba__col li::before { position: absolute; top: .15em; left: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: .6875rem; font-weight: 700; line-height: 1; }
.svc-ba__col--before li::before { content: '✕'; background: rgba(248, 113, 113, .12); color: var(--danger); }
.svc-ba__col--after li { color: var(--text); }
.svc-ba__col--after li::before { content: '✓'; background: var(--accent-soft); color: var(--accent); }
.svc-ba__arrow { display: none; }

@media (min-width: 768px) {
	.svc-ba__grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
	.svc-ba__arrow { display: grid; place-items: center; color: var(--accent); font-size: 1.5rem; }
}

/* Телефон: кілька кейсів — стрічка з прокруткою, як відгуки */
@media (max-width: 767.98px) {
	.ui-cases:not(.ui-cases--one) .ui-cases__grid { display: flex; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.ui-cases:not(.ui-cases--one) .ui-cases__grid::-webkit-scrollbar { display: none; }
	.ui-cases:not(.ui-cases--one) .ui-case { flex: none; width: 86%; scroll-snap-align: center; }
}

@media (min-width: 768px) {
	.ui-cases:not(.ui-cases--one) .ui-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.ui-case__bar i { transition: none; }
	.js [data-reveal]:not(.is-in) .ui-case__bar i { transform: none; }
}

/* --- Профіль Freelancehunt (common/ui_fh_proof): живі цифри + скріншоти профілю -------------- */
.fhp { display: grid; gap: clamp(20px, 1rem + 1.5vw, 32px); margin-bottom: clamp(28px, 1.25rem + 2vw, 48px); }
.fhp__facts { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 1rem + 1vw, 28px); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: linear-gradient(160deg, var(--surface-2), var(--surface) 60%); }
.fhp__who { display: flex; align-items: center; gap: 14px; }
.fhp__avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(34, 211, 238, .3), 0 0 24px rgba(34, 211, 238, .2); }
.fhp__name { margin: 0; color: var(--text); font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.fhp__check { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 2px; border-radius: 50%; background: var(--tg); color: #fff; font-size: .6875rem; vertical-align: 2px; }
.fhp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 4px 0 0; color: var(--text-3); font-size: .875rem; }
.fhp__status { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); }
.fhp__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fhp__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.fhp__stat { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(7, 11, 20, .35); }
.fhp__stat dt { color: var(--text-3); font-size: .8125rem; font-weight: 500; line-height: 1.35; }
.fhp__stat dd { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 0; }
.fhp__stat b { color: var(--text); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.fhp__star { color: var(--star); font-size: 1.25rem; }
.fhp__neg { color: var(--text-3); font-size: 1rem; }
.fhp__places { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fhp__places li { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--text-2); font-size: .8125rem; }
.fhp__places b { color: var(--accent); font-family: var(--mono); font-weight: 600; }
.fhp__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0; color: var(--text-3); font-size: .8125rem; }

/* Скріншоти — «вікна браузера»: на телефоні стрічка з прокруткою, на ПК — колаж із легким нахилом */
.fhp__shots { display: flex; gap: 14px; margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fhp__shots::-webkit-scrollbar { display: none; }
.fhp__shot { position: relative; display: block; flex: none; width: min(84%, 380px); overflow: hidden; border-radius: 14px; background: #1c1b21; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), var(--shadow); scroll-snap-align: center; cursor: zoom-in; transition: rotate .3s var(--ease), translate .3s var(--ease), box-shadow .3s var(--ease); }
.fhp__bar { display: flex; align-items: center; gap: 5px; padding: 8px 12px; border-bottom: 1px solid #2b2a33; background: #121216; color: #8b8f99; font: 500 .6875rem/1 var(--mono); }
.fhp__bar i { width: 8px; height: 8px; border-radius: 50%; background: #3a3943; }
.fhp__bar span { margin-left: 8px; }
.fhp__shot img { display: block; width: 100%; height: auto; }
.ui .fhp__shot:hover { box-shadow: 0 0 0 1px rgba(34, 211, 238, .45), var(--shadow); }

@media (min-width: 992px) {
	.fhp:not(.fhp--stack) { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; }
	.fhp:not(.fhp--stack) .fhp__shots { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "profile places" "profile grades"; gap: 18px; margin: 0; padding: 8px; overflow: visible; }
	.fhp:not(.fhp--stack) .fhp__shot { width: auto; }
	.fhp:not(.fhp--stack) .fhp__shot--profile { grid-area: profile; align-self: center; rotate: -2deg; }
	.fhp:not(.fhp--stack) .fhp__shot--places { grid-area: places; rotate: 1.2deg; }
	.fhp:not(.fhp--stack) .fhp__shot--grades { grid-area: grades; rotate: -.8deg; }
	.ui .fhp__shot:hover, .fhp__shot:focus-visible { rotate: 0deg; translate: 0 -4px; }
}

/* «Про мене» (вузька колонка): цифри в ряд, скріншоти — трьома мініатюрами */
@media (min-width: 768px) {
	.fhp--stack .fhp__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.fhp--stack .fhp__shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; margin: 0; padding: 0; overflow: visible; }
	.fhp--stack .fhp__shot { width: auto; }
}

/* Лайтбокс (footer.twig): <dialog> у верхньому шарі */
.ui-lightbox { max-width: min(94vw, 900px); max-height: 92vh; padding: 0; overflow: auto; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: #1c1b21; box-shadow: var(--shadow); }
.ui-lightbox::backdrop { background: rgba(3, 6, 12, .84); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ui-lightbox img { display: block; width: min(88vw, 640px); max-width: 100%; height: auto; }
.ui-lightbox__close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(7, 11, 20, .78); color: #fff; cursor: pointer; }
.ui-lightbox__close svg { width: 20px; height: 20px; fill: currentColor; }

/* --- Текст із редактора (описи категорій, послуг, інформаційних сторінок) ------------ */
.ui-prose { color: var(--text-2); font-size: 1.0625rem; line-height: 1.75; }
.ui-prose > :first-child { margin-top: 0; }
.ui-prose > :last-child { margin-bottom: 0; }
.ui-prose :is(h2, h3, h4) { color: var(--text); }
.ui-prose h2 { margin: 1.8em 0 .6em; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 500; }
.ui-prose h3 { margin: 1.6em 0 .5em; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); font-weight: 600; }
.ui-prose h4 { margin: 1.4em 0 .5em; font-size: 1.0625rem; font-weight: 600; }
.ui-prose p, .ui-prose ul, .ui-prose ol { margin: 0 0 1.1em; }
.ui-prose ul, .ui-prose ol { padding-left: 1.3em; }
.ui-prose li { margin-bottom: .4em; }
.ui-prose li::marker { color: var(--accent); }
.ui-prose strong, .ui-prose b { color: var(--text); }
.ui-prose a { text-decoration: underline; text-decoration-color: rgba(34, 211, 238, .4); text-underline-offset: 3px; }
.ui-prose a:hover { text-decoration-color: currentColor; }
.ui-prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); color: var(--text); }
.ui-prose img { border-radius: var(--r-md); }
.ui-prose table { width: 100%; margin: 0 0 1.4em; border-collapse: collapse; font-size: .9375rem; }
.ui-prose th, .ui-prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ui-prose th { color: var(--text); font-weight: 600; }

/* --- Послуги: сторінка категорії ------------------------------------------------------ */
.svc-page { padding-top: 24px; }
.svc-head { max-width: 900px; margin-bottom: clamp(28px, 1.5rem + 2vw, 48px); }
.svc-head__title { margin-bottom: 18px; }
.svc-head__text { margin-bottom: 22px; }
.svc-dirs, .svc-subcats { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-subcats { margin-bottom: 28px; }
.svc-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.svc-toolbar__count { color: var(--text-3); font-size: var(--fs-sm); }
.ui .svc-toolbar__sort .custom-select { width: auto; min-width: 220px; min-height: 44px; border-radius: var(--r-pill); }
/* dense: банер на всю ширину після N-ї картки не лишає дірки в неповному ряду — її заповнюють наступні картки */
.svc-grid { display: grid; grid-auto-flow: row dense; grid-template-columns: 1fr; gap: 16px; }
.svc-grid > .ui-banner, .post-grid > .ui-banner { grid-column: 1 / -1; }
.svc-more { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; }
.svc-after { max-width: 900px; margin-top: clamp(40px, 2rem + 3vw, 72px); padding-top: 32px; border-top: 1px solid var(--line); }
.svc-empty { padding: 48px 0; color: var(--text-2); }

@media (min-width: 600px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1280px) { .svc-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- Картка послуги (product/ui_card) -------------------------------------------------- */
.svc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	transition: border-color .2s var(--ease), translate .2s var(--ease), background-color .2s var(--ease);
}
.svc-card:hover { border-color: var(--line-2); background: var(--surface-2); translate: 0 -2px; }
.svc-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-raise); }
.svc-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .4s var(--ease); }
.svc-card:hover .svc-card__media img { scale: 1.04; }
.svc-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border: 1px solid rgba(34, 211, 238, .35);
	border-radius: var(--r-pill);
	background: rgba(7, 11, 20, .72);
	color: var(--accent);
	font-family: var(--mono);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.svc-card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.svc-card__title { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.svc-card__title a { color: var(--text); }
.ui .svc-card__title a:hover { color: var(--text); }
.svc-card__rating { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: .8125rem; }
.svc-card__rating .ui-stars svg { width: 14px; height: 14px; }
.svc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.svc-card__price { color: var(--text-3); font-size: .875rem; }
.svc-card__price b { color: var(--text); font-size: 1.125rem; font-weight: 600; }
.svc-card__go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); color: var(--accent); transition: background-color .2s, color .2s; }
.svc-card__go svg { width: 18px; height: 18px; fill: currentColor; }
.svc-card:hover .svc-card__go { background: var(--accent); color: var(--accent-ink); }

/* --- Напрями на сторінці «Послуги» (information/ui_dirs): той самий вигляд, що й картка послуги, але більша ----------- */
.dir-section { margin: clamp(28px, 1.25rem + 2vw, 48px) 0 clamp(36px, 1.5rem + 2.5vw, 64px); }
.dir-section__title { margin-bottom: clamp(18px, 1rem + 1vw, 28px); }
.dir-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .dir-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dir-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.dir-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	transition: border-color .2s var(--ease), translate .2s var(--ease), background-color .2s var(--ease);
}
.dir-card:hover { border-color: var(--line-2); background: var(--surface-2); translate: 0 -2px; }
.dir-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-raise); }
.dir-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .4s var(--ease); }
.dir-card:hover .dir-card__media img { scale: 1.04; }
.dir-card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.dir-card__title { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.dir-card__title a { color: var(--text); }
.ui .dir-card__title a:hover { color: var(--text); }
.dir-card__text { margin: 0; color: var(--text-2); font-size: .9375rem; line-height: 1.55; }
.dir-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.dir-card__go { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: .875rem; font-weight: 600; }
.dir-card__go svg { width: 18px; height: 18px; fill: currentColor; transition: translate .2s var(--ease); }
.dir-card:hover .dir-card__go svg { translate: 3px 0; }
.dir-card--urgent { border-color: rgba(248, 113, 113, .3); }
.dir-card--urgent .dir-card__media img { object-position: 50% 36%; }
.dir-card--urgent .dir-card__count { border-color: rgba(248, 113, 113, .45); color: var(--danger); }

/* --- Таблиці з прокруткою на вузьких екранах --------------------------------------------- */
.ui-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }

/* --- Послуги: сторінка послуги ------------------------------------------------------------ */
.svc-product__hero { display: grid; gap: 24px; align-items: center; margin-bottom: clamp(28px, 1.5rem + 2.5vw, 56px); }
.svc-product__cat { margin-bottom: 16px; }
.svc-product__title { margin-bottom: 16px; }
.svc-product__rating { display: inline-flex; align-items: center; gap: 10px; margin: -5px 0 11px; padding-block: 5px; color: var(--text-2); font-size: var(--fs-sm); }
.ui .svc-product__rating:hover { color: var(--text); }
.svc-product__lead { max-width: 640px; margin: 0; }
.svc-product__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg-raise); }
.svc-product__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.svc-product__layout { display: grid; gap: 32px; align-items: start; }
.svc-product__main { min-width: 0; }
.svc-block-title { margin: 0 0 20px; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 400; }

.svc-order { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 1rem + 1vw, 28px); border: 1px solid rgba(34, 211, 238, .3); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(34, 211, 238, .08), rgba(13, 20, 36, 0) 50%), var(--surface); }
.svc-order__price b { color: var(--text); font-size: 2rem; font-weight: 400; letter-spacing: -.02em; }
.svc-order__price s { margin-right: 8px; color: var(--text-3); }
.svc-order__price small { display: block; color: var(--text-3); }
.svc-order__actions { display: grid; gap: 10px; }
.svc-order__article { font-size: var(--fs-sm); }
.svc-order__note { margin: 0; color: var(--text-3); font-size: .8125rem; }
.svc-order__fh { display: grid; grid-template-areas: "src rate" "text text"; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(7, 11, 20, .35); color: var(--text-2); font-size: .8125rem; transition: border-color .2s var(--ease); }
.ui a.svc-order__fh:hover { border-color: var(--line-2); color: var(--text-2); }
.svc-order__fh-rate { grid-area: rate; color: var(--text); font-weight: 700; }
.svc-order__fh-text { grid-area: text; }
.svc-order__fh-rate span { color: var(--star); }
.svc-order__fh-src { grid-area: src; color: var(--text-3); font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.svc-order__steps { display: grid; gap: 10px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; counter-reset: svc-step; }
.svc-order__steps li { position: relative; padding-left: 36px; color: var(--text-2); font-size: .875rem; line-height: 1.45; counter-increment: svc-step; }
.svc-order__steps li::before { content: counter(svc-step); position: absolute; top: -2px; left: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); color: var(--accent); font-size: .75rem; font-weight: 700; }
.svc-order__dirs { margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.svc-order__dirs .ui-label { margin-bottom: 12px; }

.svc-specs { margin-top: 40px; }
.svc-specs__table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.svc-specs__table th { padding: 12px 16px; background: var(--surface-2); color: var(--text); font-weight: 600; text-align: left; }
.svc-specs__table td { padding: 12px 16px; border-top: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.svc-specs__table td:first-child { width: 40%; color: var(--text); }
.svc-extra { margin-top: 32px; }
.svc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 32px; }
.svc-tags__label { margin-right: 4px; color: var(--text-3); font-size: var(--fs-sm); }

.svc-banner { margin-top: clamp(32px, 1.5rem + 2.5vw, 56px); }
.info-page__banner { margin-top: clamp(32px, 1.5rem + 2.5vw, 56px); }
.svc-reviews { margin-top: clamp(40px, 1.5rem + 3vw, 72px); padding-top: clamp(28px, 1.25rem + 1.5vw, 40px); border-top: 1px solid var(--line); }
.svc-reviews__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.svc-reviews__head .svc-block-title { margin: 0; }
.svc-reviews__score { display: inline-flex; align-items: center; gap: 10px; }
.svc-reviews__score b { color: var(--text); font-size: 1.5rem; font-weight: 500; }
.svc-review-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.svc-reviews__pages { margin-top: 20px; }
.svc-review-form { margin-top: 24px; }
.svc-review-form > summary { list-style: none; cursor: pointer; }
.svc-review-form > summary::-webkit-details-marker { display: none; }
.svc-review-form__body { margin-top: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.svc-review-form__form { display: grid; gap: 12px; }
.svc-review-form__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.svc-rate { display: inline-flex; gap: 4px; }
.svc-rate label { margin: 0; color: rgba(255, 255, 255, .22); cursor: pointer; transition: color .15s; }
.svc-rate label svg { display: block; width: 28px; height: 28px; fill: currentColor; }
.svc-rate label.is-on, .svc-rate:hover label { color: var(--star); }
.svc-rate label:hover ~ label { color: rgba(255, 255, 255, .22); }
.svc-rate input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.svc-related { margin-top: clamp(40px, 1.5rem + 3vw, 72px); }
/* Схожих послуг у базі буває до 48: шаблон бере 8 (4 × 2), тут — повні ряди для 1 і 3 колонок. */
@media (max-width: 599.98px) { .svc-related .svc-grid > :nth-child(n+5) { display: none; } }
@media (min-width: 992px) and (max-width: 1279.98px) { .svc-related .svc-grid > :nth-child(n+7) { display: none; } }

/* Липка панель замовлення на телефоні + місце під неї, щоб не перекривала футер */
.svc-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1030;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--line-2);
	background: rgba(7, 11, 20, .94);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.svc-sticky { transition: transform .25s var(--ease); }
.svc-sticky.is-hidden { transform: translateY(110%); }
.svc-sticky .ui-btn { min-height: 46px; padding: 10px 12px; }
body:has(.svc-sticky) .ui-footer { padding-bottom: 96px; }

@media (min-width: 768px) {
	.svc-review-grid { grid-template-columns: repeat(2, 1fr); }
	.svc-sticky { display: none; }
	body:has(.svc-sticky) .ui-footer { padding-bottom: 24px; }
}

@media (min-width: 992px) {
	.svc-product__hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
	.svc-product__layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; }
	.svc-product__aside { position: sticky; top: calc(var(--header-h) + 24px); }
}
.svc-order__from { color: var(--text-3); font-size: .9375rem; }

/* --- Блог: список і категорія ------------------------------------------------------------- */
.post-page { padding-top: 24px; }
.post-head { margin-bottom: clamp(28px, 1.5rem + 2vw, 48px); }
.post-head__title { margin-bottom: 18px; }
.post-head__text { max-width: 820px; margin-bottom: 20px; }
.post-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.post-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* --- Картка статті (blog/ui_post_card) -------------------------------------------------------- */
.post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	transition: border-color .2s var(--ease), translate .2s var(--ease), background-color .2s var(--ease);
}
.post-card:hover { border-color: var(--line-2); background: var(--surface-2); translate: 0 -2px; }
.post-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-raise); }
.post-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .4s var(--ease); }
.post-card:hover .post-card__media img { scale: 1.04; }
.post-card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 22px 20px; }
.post-card__title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.post-card__title a { color: var(--text); }
.ui .post-card__title a:hover { color: var(--text); }
.post-card__text { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text-2); font-size: .9375rem; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text-3); font-size: .8125rem; }
.post-card__views { display: inline-flex; align-items: center; gap: 4px; }
.post-card__views svg { width: 14px; height: 14px; fill: currentColor; }

/* --- Блог: стаття (доповнення до id13dev-blog.css) -------------------------------------------- */
.post-related { margin-top: clamp(40px, 1.5rem + 3vw, 72px); }
.id13-progress { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; height: 3px; pointer-events: none; }
.id13-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.ui-prose pre { position: relative; }
/* Кнопка «Копіювати» — над першим рядком коду, а не поверх нього. */
.ui-prose pre:has(> .id13-copy) { padding-top: 44px; }
.id13-copy { position: absolute; top: 8px; right: 8px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); font: 600 .75rem/1.4 var(--font); cursor: pointer; }
.id13-copy:hover { border-color: var(--accent); color: var(--accent); }

/* --- Інформаційні сторінки ---------------------------------------------------------------- */
.info-page { padding-top: 24px; }
.info-page__title { margin-bottom: clamp(20px, 1rem + 1.5vw, 36px); }
.info-page__body { max-width: 820px; }
.info-page__fh { margin-bottom: clamp(28px, 1.25rem + 2vw, 40px); }
.info-page__avatar { display: block; width: 120px; height: 120px; margin-bottom: 24px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(34, 211, 238, .3), 0 0 48px rgba(34, 211, 238, .25); }

@media (min-width: 768px) {
	.info-page__avatar { width: 160px; height: 160px; }
}
.info-page__layout.has-aside { display: grid; gap: 32px; }

@media (min-width: 992px) {
	.info-page__layout.has-aside { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
}

/* --- Контакти ------------------------------------------------------------------------------ */
.contact-layout { display: grid; gap: 20px; align-items: start; }
.contact-channels { display: grid; gap: 12px; }
.contact-channel { flex-direction: row; align-items: center; gap: 16px; }
.contact-channel__icon { display: grid; flex: none; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); }
.contact-channel__icon svg { width: 24px; height: 24px; fill: currentColor; }
.contact-channel__icon--tg { background: var(--tg); color: #fff; }
.contact-channel__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--text-2); font-size: .9375rem; }
.contact-channel__text strong { color: var(--text); font-size: 1.0625rem; }
.contact-note { margin: 4px 0 0; color: var(--text-3); font-size: var(--fs-sm); }
.contact-location { gap: 6px; color: var(--text-2); }
.contact-form__title { margin: 0 0 4px; font-size: 1.375rem; font-weight: 600; }
.contact-form form { display: grid; gap: 12px; }
.contact-form__error { display: block; margin-top: 4px; color: var(--danger); }
.ui .contact-form .form-control.is-invalid { border-color: var(--danger); }
.contact-form__agree { display: flex; align-items: flex-start; gap: 8px; color: var(--text-2); }

@media (min-width: 992px) {
	.contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
}

/* --- 404 ------------------------------------------------------------------------------------- */
.nf { display: flex; flex-direction: column; align-items: center; padding: clamp(24px, 1rem + 3vw, 64px) 0; text-align: center; }
.nf__code { color: transparent; font-size: clamp(6rem, 4rem + 10vw, 12rem); font-weight: 200; line-height: 1; letter-spacing: -.04em; -webkit-text-stroke: 1.5px rgba(34, 211, 238, .7); }
.nf__title { margin: 8px 0 12px; }
.nf__text { max-width: 520px; margin: 0 0 28px; }
.nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
/* Порожній кошик (той самий шаблон 404, без «404»). */
.nf__icon { display: grid; place-items: center; width: 104px; height: 104px; margin-bottom: 8px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.nf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 575.98px) { .nf__actions { flex-direction: column; align-self: stretch; } }

/* --- Пошук ------------------------------------------------------------------------------------ */
.search-form { gap: 14px; margin-bottom: 28px; }
.search-form__row { display: grid; gap: 10px; }
.ui .search-form__cat { min-height: 56px; border-radius: var(--r-pill); }
.search-form__opts { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--text-2); font-size: var(--fs-sm); }
.search-form__opts label { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.search-articles__pages { margin-top: 20px; }

@media (min-width: 768px) {
	.search-form__row { grid-template-columns: minmax(0, 1fr) 260px auto; align-items: center; }
	.search-form__row .ui-btn { min-height: 56px; }
}

/* --- Карта сайту ------------------------------------------------------------------------------ */
.sitemap-grid { display: grid; gap: 16px; }
.sitemap-col .ui-label { margin-bottom: 4px; }
.sitemap-list, .sitemap-list ul { margin: 0; padding: 0; list-style: none; }
.sitemap-list { display: grid; gap: 8px; }
.sitemap-list ul { display: grid; gap: 6px; margin: 8px 0 4px; padding-left: 14px; border-left: 1px solid var(--line); }
.sitemap-list a { color: var(--text-2); }
.ui .sitemap-list a:hover { color: var(--text); }

@media (min-width: 768px) { .sitemap-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Шаблони Frame з бічними колонками (кабінет, оформлення): на телефоні колонка — ПІСЛЯ вмісту --- */
@media (max-width: 991.98px) {
	.ui .row > .col-aside { order: 5; }
}

/* Фокус: Bootstrap 4 малює button:focus власне біле кільце — лише бірюзове для клавіатури, без кільця після кліку */
.ui button:focus:not(:focus-visible), .ui a:focus:not(:focus-visible) { outline: 0; }
.ui .ui-icon-btn:focus-visible, .ui .ui-btn:focus-visible, .ui .ui-nav__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Магазин (/shop): картки модулів на основі svc-card, чипи платформ з кількістю --- */
.shop-chips .ui-chip { gap: 8px; }
.shop-chips__count { color: var(--text-3); font-family: var(--mono); font-size: var(--fs-xs); }
.ui-chip--accent .shop-chips__count { color: inherit; opacity: .75; }
.shop-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: -2px 0 0; color: var(--text-3); font-size: .8125rem; }
.shop-card__ver { padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--text-2); font-family: var(--mono); font-size: var(--fs-xs); }
.shop-card--free .svc-card__price b { color: var(--ok); }
.shop-pages { margin-top: 24px; }

/* --- Магазин: сторінка модуля (product/shop_product) — бейджі, історія версій, факти в картці замовлення, крос-сел --- */
.shop-product__badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.shop-product__ver { font-family: var(--mono); }
.shop-releases { margin-top: 40px; }
.shop-releases__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.shop-release { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.shop-release.is-latest { border-color: rgba(34, 211, 238, .35); }
.shop-release__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.shop-release__ver { color: var(--text); font-family: var(--mono); font-size: 1rem; }
.shop-release__head time { color: var(--text-3); font-size: var(--fs-sm); }
.shop-release__changes { display: grid; gap: 6px; margin: 0; padding-left: 1.1em; color: var(--text-2); font-size: .9375rem; }
.shop-order__price--free b { color: var(--ok); }
.shop-order__facts { display: grid; gap: 8px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .8125rem; }
.shop-order__facts div { display: flex; justify-content: space-between; gap: 12px; }
.shop-order__facts dt { color: var(--text-3); font-weight: 400; }
.shop-order__facts dd { margin: 0; color: var(--text); text-align: right; }
.shop-custom { display: grid; gap: 6px; margin-top: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text-2); transition: border-color .2s var(--ease); }
.ui a.shop-custom:hover { border-color: var(--line-2); color: var(--text-2); }
.shop-custom__title { color: var(--text); font-weight: 600; }
.shop-custom__text { font-size: .875rem; }
.shop-custom__link { color: var(--accent); font-size: .875rem; }
.svc-sticky--single { grid-template-columns: 1fr; }

/* --- Магазин: фото модуля — мініатюри скріншотів під головним фото, перегляд на весь екран (#shop-viewer) --- */
.shop-media { display: grid; gap: 12px; min-width: 0; }
.shop-media__open { display: block; height: 100%; cursor: zoom-in; }
.shop-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.shop-gallery__item { display: block; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-raise); cursor: zoom-in; transition: border-color .2s var(--ease); }
.shop-gallery__item:hover, .shop-gallery__item:focus-visible { border-color: var(--accent); }
.shop-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
html.is-viewer-open { overflow: hidden; }
.shop-viewer { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(4, 7, 13, .94); color: var(--text); }
.shop-viewer::backdrop { background: rgba(4, 7, 13, .7); }
.shop-viewer[open] { display: flex; }
.shop-viewer__stage { display: flex; flex: 1; overflow: auto; overscroll-behavior: contain; padding: 72px 80px 32px; }
.shop-viewer__img { width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; border-radius: var(--r-md); box-shadow: var(--shadow); }
.shop-viewer__img.is-tall { max-height: none; }
.shop-viewer__count { position: absolute; top: 26px; left: 50%; margin: 0; color: var(--text-2); font: 500 var(--fs-sm)/1 var(--mono); translate: -50% 0; }
.shop-viewer__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: rgba(13, 20, 36, .9); color: var(--text); cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
.shop-viewer__btn:hover, .shop-viewer__btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.shop-viewer__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shop-viewer__btn--close { top: 12px; right: 12px; }
.shop-viewer__btn--prev, .shop-viewer__btn--next { top: 50%; translate: 0 -50%; }
.shop-viewer__btn--prev { left: 16px; }
.shop-viewer__btn--next { right: 16px; }
.shop-viewer.is-single .shop-viewer__btn--prev, .shop-viewer.is-single .shop-viewer__btn--next, .shop-viewer.is-single .shop-viewer__count { display: none; }
@media (max-width: 767.98px) {
	.shop-viewer__stage { padding: 64px 8px 84px; }
	.shop-viewer__btn--prev, .shop-viewer__btn--next { top: auto; bottom: 18px; translate: none; }
	.shop-viewer__btn--prev { left: calc(50% - 64px); }
	.shop-viewer__btn--next { right: calc(50% - 64px); }
}

/* --- Магазин: кнопка в картці замовлення (безкоштовний — капча → файл; платний — домен → оформлення) --- */
.shop-buy { display: grid; gap: 12px; margin: 0; }
.shop-buy__field { display: grid; gap: 6px; }
.shop-buy__field label { margin: 0; color: var(--text-2); font-size: .8125rem; }
.shop-buy__help { color: var(--text-3); font-size: .75rem; line-height: 1.4; }
.shop-order .svc-order__price small a, .shop-buy__help a { color: inherit; text-decoration: underline; text-decoration-color: rgba(34, 211, 238, .4); text-underline-offset: 3px; }
.ui .shop-order .svc-order__price small a:hover, .ui .shop-buy__help a:hover { color: var(--accent); }
.shop-buy__captcha .form-group { margin: 0; }
.shop-buy__note { margin: 0; color: var(--text-3); font-size: .8125rem; }
.shop-hero { margin-bottom: clamp(28px, 1.25rem + 2vw, 48px); }
.ui-prose .shop-scheme { margin: 8px 0 20px; }
.ui-prose .shop-scheme img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-raise); }
.shop-buy__done { margin: 0; color: var(--ok); font-size: .8125rem; }
.shop-buy__wait { margin: 0; color: var(--text-2); font-size: .8125rem; }
.shop-buy__error { color: var(--danger); font-size: .8125rem; }
.ui .shop-buy .is-invalid { border-color: var(--danger); }
.shop-buy__questions { margin: 0; color: var(--text-3); font-size: .8125rem; }

/* --- Кабінет покупця (account/shop_*, id13dev_account): меню — пігулки на телефоні, бічна колонка від 992 px --- */
.acc-page, .co-page { padding-top: 24px; padding-bottom: clamp(32px, 1.5rem + 2vw, 56px); }
/* minmax(0, 1fr) і min-width: 0 — інакше смуга пігулок меню розтягує сітку ширше за екран телефона. */
.acc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.acc-layout__menu, .acc-layout__main { min-width: 0; }
.acc-title { margin: 0 0 10px; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); font-weight: 400; letter-spacing: -.01em; }
.acc-lead { margin: 0 0 24px; color: var(--text-2); }
.acc-subtitle { margin: 32px 0 14px; font-size: 1.25rem; font-weight: 500; }
.acc-note { margin: 20px 0 0; color: var(--text-3); font-size: .875rem; }

.acc-menu__home { display: none; }
.acc-menu__list { display: flex; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.acc-menu__list::-webkit-scrollbar { display: none; }
.acc-menu__link { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); font-size: .875rem; font-weight: 500; white-space: nowrap; }
.ui a.acc-menu__link:hover { border-color: var(--line-2); color: var(--text); }
.ui a.acc-menu__link.is-active { border-color: rgba(34, 211, 238, .35); background: var(--accent-soft); color: var(--accent); }

@media (min-width: 992px) {
	.acc-layout { grid-template-columns: 232px minmax(0, 1fr); gap: 40px; align-items: start; }
	.acc-layout__menu { position: sticky; top: calc(var(--header-h) + 16px); }
	.acc-menu { padding: 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
	.acc-menu__home { display: block; margin-bottom: 6px; padding: 10px 12px 14px; border-bottom: 1px solid var(--line); color: var(--text); font-weight: 600; }
	.ui a.acc-menu__home:hover, .ui a.acc-menu__home.is-active { color: var(--accent); }
	.acc-menu__list { flex-direction: column; gap: 2px; margin: 0; padding: 0; overflow: visible; }
	.acc-menu__link { display: flex; min-height: 44px; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: none; }
	.ui a.acc-menu__link:hover { background: var(--surface-2); }
	.acc-menu__item--logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
}

.acc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.acc-tile { gap: 6px; padding: 20px 22px; }
.acc-tile__title { color: var(--text-3); font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; }
.acc-tile__value { color: var(--text); font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }

.acc-pending { margin: 0 0 24px; padding: 18px 20px; border: 1px solid rgba(251, 191, 36, .35); border-radius: var(--r-lg); background: rgba(251, 191, 36, .05); }
.acc-pending__title { margin: 0 0 10px; color: var(--star); font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.acc-pending__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.acc-pending__item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.acc-pending__info { display: grid; flex: 1 1 220px; gap: 2px; }
.acc-pending__info span { color: var(--text-2); font-size: .875rem; }
.acc-pending__total { color: var(--text); white-space: nowrap; }

.acc-modules, .acc-orders { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.acc-module { display: grid; gap: 16px; padding: 18px; }
.acc-module__cover { display: block; width: 100%; max-width: 240px; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-md); background: var(--surface-2); }
.acc-module__name { margin: 0 0 8px; font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.acc-module__name a { color: var(--text); }
.ui .acc-module__name a:hover { color: var(--accent); }
.acc-module__meta { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: .875rem; }
.acc-module__meta b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.acc-module__ver { color: var(--text); font-family: var(--mono); font-size: .8125rem; }
.acc-module__support.is-over { color: var(--star); }
.acc-module__files { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.acc-module__size { font-weight: 500; opacity: .7; }

@media (min-width: 640px) {
	.acc-module { grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; }
	.acc-module__cover { max-width: none; }
	.acc-module__files { flex-direction: column; align-items: stretch; }
}

.acc-empty { align-items: flex-start; }
.acc-empty p { margin: 0; color: var(--text-2); }

.acc-order { gap: 8px; padding: 18px 20px; }
.acc-order__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.acc-order__num { color: var(--text); font-size: 1.0625rem; font-weight: 600; }
.ui a.acc-order__num:hover { color: var(--accent); }
.acc-order__items { margin: 0; color: var(--text-2); font-size: .9375rem; }
.acc-order__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; color: var(--text-3); font-size: .875rem; }
.acc-order__foot b { color: var(--text); }
.acc-order__foot .ui-link-arrow { margin-left: auto; }
.acc-pages { margin-top: 20px; }

.acc-status { display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--text-2); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.acc-status--ok { border-color: rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .08); color: var(--ok); }
.acc-status--wait { border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .07); color: var(--star); }

.acc-back { display: inline-block; margin-bottom: 12px; color: var(--text-2); font-size: .875rem; }
.acc-order-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.acc-order-head .acc-title { margin-bottom: 4px; }
.acc-files { margin: 0 0 20px; }

.acc-pay { gap: 10px; margin: 0 0 20px; border-color: rgba(251, 191, 36, .35); }
.co-bank { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid rgba(34, 211, 238, .25); border-radius: var(--r-md); background: rgba(34, 211, 238, .04); }
.acc-pay__title, .co-bank__title { margin: 0; font-size: 1.125rem; font-weight: 600; }
.acc-pay__text, .co-bank__text, .acc-pay__note, .co-bank__note, .acc-pay__purpose, .co-bank__purpose { margin: 0; color: var(--text-2); font-size: .9375rem; }
.acc-pay__purpose, .co-bank__purpose { color: var(--text); font-weight: 600; }
.acc-pay__requisites, .co-bank__requisites { padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: var(--r-md); background: rgba(7, 11, 20, .35); color: var(--text); font-family: var(--mono); font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }

.acc-lines { display: grid; margin: 0 0 8px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); list-style: none; overflow: hidden; }
.acc-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.acc-line:last-child { border-bottom: 0; }
.acc-line__name { display: grid; gap: 2px; min-width: 0; }
.acc-line__name b, .acc-line__name a { color: var(--text); font-weight: 600; }
.acc-line__name small { color: var(--text-2); font-size: .8125rem; overflow-wrap: anywhere; }
.acc-line__sum { color: var(--text); white-space: nowrap; }
.acc-line--total { background: var(--surface); }
.acc-line--total span { color: var(--text-2); }
.acc-line--total b { color: var(--text); font-size: 1.125rem; }

.acc-history { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.acc-history__item { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-md); }
.acc-history__head { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--text-3); font-size: .875rem; }
.acc-history__head b { color: var(--text); }
.acc-history__comment { margin-top: 8px; color: var(--text-2); font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }

/* Форми кабінету й оформлення */
.acc-form { gap: 16px; max-width: 560px; }
.acc-field { display: grid; gap: 6px; }
.ui .acc-field label { margin: 0; color: var(--text-2); font-size: .875rem; }
.acc-field__help { color: var(--text-3); font-size: .8125rem; }
.acc-field__error { color: var(--danger); font-size: .8125rem; }
.ui .acc-field .is-invalid { border-color: var(--danger); }
.ui .acc-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--text-2); font-size: .875rem; font-weight: 400; cursor: pointer; }
.acc-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.acc-check a { text-decoration: underline; text-underline-offset: 3px; }
.acc-captcha .form-group { margin: 0; }
.acc-form__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.acc-form__row > span { color: var(--text-2); font-size: .875rem; }

/* Вхід і реєстрація */
.acc-auth { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.acc-auth__main { min-width: 0; }
.acc-auth__aside { align-self: start; gap: 10px; }
.acc-auth__title { margin: 0; font-size: 1.25rem; font-weight: 600; }
.acc-auth__aside p { margin: 0; color: var(--text-2); font-size: .9375rem; }
.acc-auth__aside .ui-btn { align-self: flex-start; }

@media (min-width: 992px) {
	.acc-auth { grid-template-columns: minmax(0, 560px) minmax(0, 380px); gap: 48px; align-items: end; }
}

/* --- Оформлення замовлення модулів (checkout/shop_*): кроки ядра фрагментами + підсумок --- */
.co-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.co-steps { display: grid; gap: 14px; min-width: 0; }
.co-step { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.co-step.is-active { border-color: rgba(34, 211, 238, .35); }
.co-step.is-locked { opacity: .55; }
.co-step__title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 1.125rem; font-weight: 600; }
.co-step__num { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); color: var(--accent); font-size: .8125rem; font-weight: 700; }
.co-step.is-done .co-step__num { background: var(--accent); color: var(--accent-ink); }
.co-step__body { display: grid; gap: 14px; }
.co-step__body:not(:empty) { margin-top: 16px; }
.co-step__done { margin: 0; color: var(--text-2); font-size: .9375rem; }
.co-auth { display: grid; gap: 28px; }
.co-auth__col { display: grid; align-content: start; gap: 14px; }
.co-auth__col + .co-auth__col { padding-top: 24px; border-top: 1px solid var(--line); }
.co-auth__title { margin: 0; font-size: 1rem; font-weight: 600; }
.co-methods { display: grid; gap: 10px; }
.ui .co-method { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); color: var(--text); font-weight: 500; cursor: pointer; }
.ui .co-method:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.co-method input { width: 18px; height: 18px; accent-color: var(--accent); }
.co-method__terms { flex-basis: 100%; color: var(--text-3); font-size: .8125rem; }
.ui textarea.co-comment { min-height: 72px; }
.co-pay { display: grid; gap: 14px; margin-top: 16px; }
.co-summary { gap: 14px; }
.co-summary__title { margin: 0; font-size: 1.125rem; font-weight: 600; }
.co-summary__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.co-summary__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; }
.co-summary__item img { width: 64px; height: 40px; object-fit: cover; border-radius: var(--r-sm); }
.co-summary__name { display: grid; gap: 2px; min-width: 0; }
.co-summary__name b { color: var(--text); font-size: .9375rem; font-weight: 600; }
.co-summary__name small { color: var(--text-2); font-size: .8125rem; overflow-wrap: anywhere; }
.co-summary__price { margin-top: 4px; color: var(--text); white-space: nowrap; }
.co-summary__total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); }
.co-summary__total span { color: var(--text-2); }
.co-summary__total b { color: var(--text); font-size: 1.375rem; font-weight: 600; }
.co-summary__note { margin: 0; color: var(--text-3); font-size: .8125rem; }

@media (min-width: 768px) {
	.co-auth { grid-template-columns: 1fr 1fr; }
	.co-auth__col + .co-auth__col { padding: 0 0 0 28px; border-top: 0; border-left: 1px solid var(--line); }
}

@media (min-width: 992px) {
	.co-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
	.co-summary { position: sticky; top: calc(var(--header-h) + 16px); }
}

.co-success { align-items: flex-start; gap: 16px; max-width: 760px; margin: 0 auto; }
.co-success__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(52, 211, 153, .12); color: var(--ok); }
.co-success__icon svg { width: 28px; height: 28px; fill: currentColor; }
.co-success__title { margin: 0; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 500; }
.co-success .acc-lead { margin: 0; }
.co-success .co-bank, .co-success .acc-lines { width: 100%; }
.co-success__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Значок кабінету в шапці (лише коли «Магазин» видно) */
.ui .ui-header__account.is-active { border-color: rgba(34, 211, 238, .35); color: var(--accent); }

/* --- Згода на cookies (банер у підвалі; Google Analytics — лише після «Погоджуюсь») --- */
.ui-consent { position: fixed; z-index: 1060; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 12px; max-width: 560px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--shadow); }
.ui-consent[hidden] { display: none; }
.ui-consent__text { margin: 0; color: var(--text-2); font-size: .875rem; line-height: 1.5; }
.ui-consent__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ui-consent__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-footer__consent { padding: 0; border: 0; background: none; color: var(--text-3); font: inherit; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ui .ui-footer__consent:hover { color: var(--text); }

@media (min-width: 768px) {
	.ui-consent { right: auto; left: 24px; bottom: 24px; }
}