/*
 * UHL - Category Pro — власні правила модуля, яких немає в макеті.
 *
 * Решта стилів згенерована з макета (tools/port_mockup.py) і руками не
 * правиться; цей файл підключається останнім і перебиває їх за рівної ваги.
 * Усе під .uhc: жодних правил на :root, body чи голих тегах (RULES §6.6–6.7).
 */

/* Каркас без бічної колонки. У макеті фільтр був завжди, і сітка тримає
   йому 300px ліворуч; поки фільтра немає (або модуль фільтрів вимкнено),
   ця колонка стояла б порожньою. */
.uhc .uhc-cat2--solo {
	grid-template-columns: minmax(0, 1fr);
}

.uhc .uhc-cat2--solo > .uhc-subcats,
.uhc .uhc-cat2--solo > .uhc-main {
	grid-column: 1;
	grid-row: auto;
}

/* «Под заказ» / «Запросить» — посилання на товар, поки немає вікна
   «Вопрос менеджеру» (Ф4). Bootstrap 3 теми підкреслює посилання на
   наведенні й фокусі — у кнопки підкреслення бути не повинно. */
.uhc a.uhc-pcard__buy,
.uhc a.uhc-pcard__buy:hover,
.uhc a.uhc-pcard__buy:focus {
	text-decoration: none;
}

/* Розрив у пагінації: 1 … 5 6 7 … 24. У макеті сторінок було чотири, і
   розривів він не знав; на 576 товарах сторінок 24. */
.uhc .uhc-pager__gap {
	display: inline-flex;
	align-items: flex-end;
	min-width: 20px;
	height: 40px;
	padding-bottom: 8px;
	color: var(--uhc-ink3);
}

.uhc .uhc-empty {
	margin: 8px 0 24px;
	color: var(--uhc-ink3);
}

/* Друк прайсу. Тема й сторінка в макеті були одним документом (шапку й
   підвал ховав клас .mk-site). У модулі шапка й підвал — розмітка теми
   поруч із .uhc прямо в <body>, тож на час друку прайсу скрипт ставить
   на body стан uhc-printing, і сусіди .uhc не друкуються. Чужі елементи
   при цьому не чіпаємо — лише стан на body, як у шторки фільтра. */
@media print {
	body.uhc-printing > :not(.uhc) {
		display: none !important;
	}

	/* Тло <body> теми (сіре) інакше лягало смугою над шапкою документа й
	   під таблицею на останньому аркуші, якщо в друці ввімкнене тло. */
	body.uhc-printing {
		background: #fff !important;
	}
}

/* ── Модуль фільтрів у бічній колонці ────────────────────────────────
   Колонка з чужою панеллю (uhl_filter) не липне сама й тягнеться на всю
   висоту ряду: липне обгортка теми #column-left усередині неї (правила
   «Липка колонка» нижче) — липкий блок у липкому контейнері нікуди не
   їхав би. */
.uhc .uhc-cat2 > .uhc-aside--ext {
	position: static;
	max-height: none;
	display: block;
	align-self: stretch;
}

@media (max-width: 767.98px) {
	/* На телефоні панель — шторка фільтра (поріг — її, 767.98px); в потоці
	   колонка не займає місця. */
	.uhc .uhc-cat2 > .uhc-aside--ext {
		align-self: auto;
	}
}

/* 1.10.0: те саме за СТАНОМ фільтра, а не за шириною — uhc--fdrawer ставить
   скрипт (filterMode()), коли панель uhl_filter у шторці (.uhlf.is-drawer).
   Поріг шторки — фільтра: зараз 767.98px, домовлено 1023.98px
   (docs/ФІЛЬТР-ШТОРКА-ПЛАНШЕТ.md). Правило за шириною вище — для першого
   кадру, до скрипта фільтра. */
.uhc.uhc--fdrawer .uhc-cat2 > .uhc-aside--ext {
	align-self: auto;
}

/* Класи .breadcrumb і .page-title стоять заради скрипта фільтра (він
   підміняє вміст за ними). Відступи й рамки, які тема дає цим класам, тут
   ні до чого — лишаються наші. Крихти живуть лише в смузі якорів, а там
   макет дає їм padding 0: смуга сама центрує і крихти, і якорі. Нерівний
   відступ (14 / 8) перебивав макет за рівної ваги й опускав крихти на 3px
   нижче якорів. */
.uhc .uhc-crumbs.breadcrumb {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
}

.uhc .uhc-rowhead .page-title {
	display: block;
}

/* Плитка посадкової, на якій людина зараз стоїть. */
.uhc .uhc-sub3.is-current .uhc-sub3__top {
	box-shadow: inset 0 0 0 2px var(--uhc-blue);
}

/* Тема загортає модулі лівої колонки в <aside id="column-left"
   class="col-sm-3 …">: у сітці теми це чверть рядка, а всередині нашої
   колонки на 300px — 75px, і панель фільтра стискалась у стовпчик. */
.uhc .uhc-aside--ext > #column-left {
	width: auto;
	max-width: none;
	float: none;
	flex: none;
	margin: 0;
	padding: 0;
}

/* Плитки підрозділів і посадкових ховаються, коли їх ховає фільтр: панель
   uhl_filter несе data-uhlf-tiles-off, коли вибрано умову (і це не
   посадкова) — за його ж налаштуванням у «Вигляді». Блок теми він ховає
   таким самим правилом; атрибут оновлюється й при підміні без
   перезавантаження, тож скрипт тут не потрібен. Разом із секцією — якір
   «Подразделы» у смузі. Панель шукаємо від кореня, а не в .uhc: до
   767.98px фільтр переносить її в <body> (шторка). */
:root:has(.uhlf[data-uhlf-tiles-off]) .uhc #s-subs,
:root:has(.uhlf[data-uhlf-tiles-off]) .uhc .uhc-anchors a[href="#s-subs"] {
	display: none;
}

/* Бічна колонка фільтра не прилипає сама (липка панель усередині неї), тож
   вона вища за підрозділи й товари разом. Така колонка займає обидва рядки
   сітки й роздає свій надлишок обом, тому над товарами лишалась порожнеча.
   Надлишок забирає другий рядок (1fr), а коли підрозділи сховані, товари
   займають обидва рядки. */
.uhc .uhc-cat2:has(> .uhc-aside--ext) {
	grid-template-rows: auto 1fr;
}

/* Те саме, коли комірки підрозділів немає зовсім (кінцева категорія без
   менеджера, блок вимкнено): порожній перший рядок давав щілину 24px між
   верхом панелі фільтра й товарами. #uhc — щоб переважити планшетне
   правило grid-row: 2 нижче, у якого та сама вага класів. */
:root:has(.uhlf[data-uhlf-tiles-off]) .uhc .uhc-cat2 > .uhc-main,
#uhc .uhc-cat2:not(:has(> .uhc-subcats)) > .uhc-main {
	grid-row: 1 / -1;
}

/* 1.10.0: лише поки панель фільтра в колонці (не uhc--fdrawer): стане
   фільтр шторкою й на планшеті — працює розкладка макета (один стовпчик).

   Планшет 768–1023: сітка макета тут складається в один стовпчик, бо свій
   фільтр макета на цій ширині — шторка. Панель uhl_filter стає шторкою лише
   до 767.98px, тож на планшеті вона лягала на всю ширину над товарами.
   Лишаємо дві колонки, як у теми (col-sm-3). Товарам — скільки влазить
   карток від 190px: на 768 дві, на 1000 три. */
@media (min-width: 768px) and (max-width: 1023px) {
	.uhc:not(.uhc--fdrawer) .uhc-cat2:has(> .uhc-aside--ext) {
		grid-template-columns: 240px minmax(0, 1fr);
	}

	.uhc:not(.uhc--fdrawer) .uhc-cat2:has(> .uhc-aside--ext) > .uhc-subcats {
		grid-column: 2;
		grid-row: 1;
	}

	.uhc:not(.uhc--fdrawer) .uhc-cat2:has(> .uhc-aside--ext) > .uhc-aside--ext {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.uhc:not(.uhc--fdrawer) .uhc-cat2:has(> .uhc-aside--ext) > .uhc-main {
		grid-column: 2;
		grid-row: 2;
	}

	.uhc:not(.uhc--fdrawer) .uhc-cat2:has(> .uhc-aside--ext) .uhc-prow {
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	}

	/* «Список» у колонці 460–690px: рядок макета (190 + текст + 250) не
	   влазить, тож беремо його телефонну розкладку (page.css, до 719px). */
	.uhc:not(.uhc--fdrawer) .uhc-cat2:has(> .uhc-aside--ext) .uhc-prow--list .uhc-pcard {
		grid-template-columns: 120px minmax(0, 1fr);
	}

	.uhc:not(.uhc--fdrawer) .uhc-cat2:has(> .uhc-aside--ext) .uhc-prow--list .uhc-pcard__foot {
		grid-column: 1 / -1;
	}

	.uhc:not(.uhc--fdrawer) .uhc-cat2:has(> .uhc-aside--ext) .uhc-prow--list .uhc-plist__acts {
		justify-content: flex-start;
	}

	.uhc:not(.uhc--fdrawer) .uhc-cat2:has(> .uhc-aside--ext) .uhc-plist__pay {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.uhc:not(.uhc--fdrawer) .uhc-cat2:has(> .uhc-aside--ext) .uhc-prow--list .uhc-pcard__price {
		justify-content: flex-start;
	}
}

/* Крихти до 1023px — один рядок (макет: без переносу, поточна — трикрапкою).
   На глибоких сторінках (посадкова — п'ятий рівень) самі посилання довші за
   екран, і сторінка ставала ширшою за нього. Рядок гортається вбік, поточна
   — повністю; відкривається з кінця (frontend.js, crumbsEnd).
   Відступ 12px згори й знизу — під збільшену зону натиску посилань
   (padding 12px, page.css): без нього вона вилазить за край, і рядок
   гортався б ще й по вертикалі. Від'ємне поле тримає висоту смуги. */
@media (max-width: 1023px) {
	.uhc .uhc-anchorbar .uhc-crumbs.breadcrumb {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		padding: 12px 0;
		margin: -12px 0;
	}

	.uhc .uhc-anchorbar .uhc-crumbs.breadcrumb::-webkit-scrollbar {
		display: none;
	}

	.uhc .uhc-anchorbar .uhc-crumbs__now {
		flex: 0 0 auto;
		overflow: visible;
		text-overflow: clip;
	}
}

/* Менеджер. Риска між «Email» і телефоном — лише коли є обидва: у відділу
   «Меблі для офісу» самий телефон, і риска стояла б ні до чого. На
   телефоні макет ставить номер першим і переносить риску на «Email». */
.uhc .uhc-expert__acts > .uhc-expert__tel:first-child {
	padding-left: 0;
	border-left: 0;
}

@media (max-width: 639px) {
	.uhc .uhc-expert__acts > .uhc-expert__b:only-child {
		padding-left: 0;
		border-left: 0;
	}
}

/* Два телефони (1.6.0) — стовпчиком, риска між «Email» і номерами — на
   стовпчику, а не на кожному номері. Висота рядка менша за 44px лише під
   мишею: на дотик кожен номер — повна зона натиску. */
.uhc .uhc-expert__tels {
	display: flex;
	flex-direction: column;
	padding-left: 16px;
	border-left: 1px solid #e4e8ef;
}

.uhc .uhc-expert__acts > .uhc-expert__tels:first-child {
	padding-left: 0;
	border-left: 0;
}

.uhc .uhc-expert__tels > .uhc-expert__tel {
	padding-left: 0;
	border-left: 0;
}

@media (pointer: fine) {
	.uhc .uhc-expert__tels > .uhc-expert__tel {
		min-height: 26px;
	}
}

@media (max-width: 639px) {
	.uhc .uhc-expert__tels {
		order: -1;
		padding-left: 0;
		border-left: 0;
	}
}

/* Смуга під плитками стоїть у комірці підрозділів; без плиток (кінцева
   категорія, блок вимкнено) відступ зверху зайвий. */
.uhc .uhc-subcats > .uhc-expert:first-child {
	margin-top: 0;
}

/* Картка в кінці, поки сусідніх розділів немає: макет на вузькому
   екрані ставить менеджера в другий рядок під двома розділами, а
   самотній лишив би над собою порожній рядок сітки. */
.uhc .uhc-tailnav > .uhc-expert:only-child {
	grid-column: 1 / -1;
	grid-row: auto;
}

/* Вікно «Вопрос менеджеру» — поверх банера згоди на cookie (uhl_home,
   #uhlCk, z-index 2147483000). Той стоїть над усім сайтом, і на телефоні
   закривав кнопку «Отправить»: без згоди надіслати питання було не можна.
   Вікно людина відкрила сама; закриється — банер знову на місці. */
.uhc .uhc-fb {
	z-index: 2147483100;
}

/* Пастка для роботів — поза екраном, а не display:none: частина
   роботів поля з display:none пропускає. */
.uhc .uhc-fb__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Капча «Я не робот» (1.17.0): місце тримає висоту звичайного віджета
   (78px), щоб вікно не підстрибнуло, коли він домалюється; компактний
   (у вузькому вікні) вищий — 144px. Віджет (304px, компактний 164px) —
   по центру вікна (1.23.1); було — притиснутий ліворуч. */
.uhc .uhc-fb__cap {
	display: flex;
	justify-content: center;
	min-height: 78px;
	margin: 4px 0 8px;
}

.uhc .uhc-fb__err {
	margin: 0 0 4px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fdecea;
	color: #a3271b;
	font-size: 13px;
	line-height: 1.4;
}

/* Заголовок подяки отримує фокус скриптом — щоб читач екрана одразу почув
   «Вопрос отправлен». Це не елемент керування, і рамка фокуса теми на ньому
   виглядала як поломка. */
.uhc .uhc-fb__done .uhc-fb__t:focus,
.uhc .uhc-fb__done .uhc-fb__t:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.uhc .uhc-fb__field.is-bad textarea,
.uhc .uhc-fb__field.is-bad input {
	border-color: #a3271b;
}

/* ── Про розділ: одна колонка ─────────────────────────────────────────
   Макет знає лише дві колонки (опис і питання). Коли однієї немає —
   опису в категорії не заведено чи питань немає, — друга не лишається
   на пів ширини, а йде на всю. А на всю ширину діє те, що макет каже
   для широкого тексту: опис згорнуто до «Читать далее», питання у два
   стовпчики, липкість не потрібна — сусіда, поруч із яким липнути, немає. */
.uhc .uhc-tail.uhc-tail--one { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 900px) {
	.uhc .uhc-tail--one .uhc-faq--full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	.uhc .uhc-tail--one .uhc-faqstick { position: static; }
	.uhc .uhc-tail--one .uhc-seo--cut { max-height: 260px; overflow: hidden; }
	.uhc .uhc-tail--one .uhc-seo--cut::after { content: ""; }
	.uhc .uhc-tail--one .uhc-seo__more { display: inline-block; }
}

/* Затемнення під згорнутим описом — у тло сторінки. У макеті секція
   лежала на білому, і перехід ішов у #fff; на сторінці тло --uhc-tint,
   тож біле затемнення читалось як біла смуга поперек тексту. */
.uhc .uhc-seo--cut::after {
	background: linear-gradient(to bottom, rgba(245, 248, 252, 0), var(--uhc-tint, #f5f8fc));
}

/* Короткий опис, що й так вміщається, скрипт розгортає й ховає кнопку. */
.uhc .uhc-seo__more[hidden] { display: none !important; }

/* Нерозривний пробіл між ціною й «грн» — для копіювання й читача екрана;
   на екрані відступ дає .uhc-cur (див. money() у контролері). */
.uhc .uhc-sp { font-size: 0; }

/* Кольорова смуга зверху картки при наведенні (дизайн-система головної,
   showcase.css): 2px заввишки зі скругленням 12px кута не повторює —
   скруглення на такому низькому блоці майже не діє, і лінія вилазила за
   скруглені кути картки. Робимо блок заввишки з радіус, а смугу — 2px
   фоном угорі: фон обрізається тим самим скругленням, що й картка. */
.uhc .uhc-pcard::after {
	height: 12px;
	background: linear-gradient(90deg, var(--uhc-blue), var(--uhc-gold)) top / 100% 2px no-repeat;
}

/* «Вы смотрели»: стрічка гортається вбік (overflow-x), а з ним браузер
   обрізає і вертикаль — картка при наведенні піднімається на 3px, і її
   верх (скруглення, смуга) зрізався краєм стрічки, а тінь (до 36px
   нижче) — низом. Запас усередині під підйом і тінь, від'ємні відступи —
   щоб місце блоку на сторінці лишилось тим самим. */
.uhc .uhc-reco {
	padding-top: 8px;
	margin-top: -8px;
	padding-bottom: 36px;
	margin-bottom: -30px;
}

/* Лайтбокс галереї — поверх банера згоди на cookie (uhl_home, #uhlCk,
   z-index 2147483000), як і вікно «Вопрос менеджеру»: у макеті 1400, і
   банер закрив би кадр і кнопки гортання. */
.uhc .uhc-lb {
	z-index: 2147483100;
}

/* ── Галерея до розкладки ──────────────────────────────────────────────
   Ряди вирівнює скрипт (frontend.js, відкладений), і до нього контейнер
   стояв колонкою: кожен кадр на всю ширину, 11 кадрів — тисячі пікселів
   висоти, а потім скрипт складав їх у три ряди. Перезавантаживши сторінку
   на місці галереї, людина бачила, як вона «збирається».

   Тепер до розкладки кадри стоять рядами тієї ж типової висоти, що бере
   скрипт (200 / 165 / 130 за шириною), місце — не більше трьох рядів, а
   сам блок схований: з'являється вже розкладеним (клас is-laid ставить
   скрипт). Скрипт не відпрацював — за 2 с блок показується наближеними
   рядами, а не зникає. */
.uhc .uhc-grows { --gh: 200px; }

@media (max-width: 1023px) {
	.uhc .uhc-grows { --gh: 165px; }
}

@media (max-width: 639px) {
	.uhc .uhc-grows { --gh: 130px; }
}

.uhc .uhc-grows:not(.is-laid) {
	flex-direction: row;
	flex-wrap: wrap;
	max-height: calc(var(--gh) * 3 + 12px);
	overflow: hidden;
	visibility: hidden;
	animation: uhc-gal-reveal 0s 2s forwards;
}

.uhc .uhc-grows:not(.is-laid) > .uhc-gcard {
	height: var(--gh);
	flex: var(--ar) 1 calc(var(--gh) * var(--ar));
}

/* Останній ряд не розтягується — як і в скрипті. */
.uhc .uhc-grows:not(.is-laid)::after {
	content: "";
	flex: 1000 1 0;
}

@keyframes uhc-gal-reveal {
	to { visibility: visible; }
}

/* Вигляд «альбомами»: сітка плиток схована, коли вибрано «рядами» (атрибут
   hidden). Правило макета display: grid інакше перебиває hidden. */
.uhc .uhc-gbento[hidden] {
	display: none;
}

/* Плитка банера uhl_category_banner у сітці підрозділів. Розмітка й кольори —
   модуля банерів (рамка акцентом, фон, підпис); тут лише розкладка під нашу
   комірку: значок ліворуч, підпис праворуч, висота й радіус — як у сусідніх
   плиток. Його власні правила розраховані на вертикальні плитки теми з
   картинкою 90px і роздували ряд удвічі; тема ж ставить посиланню таких
   плиток колонку (.sub_categories__item a), а підпису — висоту 100%. */
.uhc .uhc-subs3 > .uhl-banner-tile {
	border-radius: 12px;
	min-width: 0;
	align-self: stretch;
}

.uhc .uhc-subs3 > .uhl-banner-tile a {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 10px 12px;
	color: inherit;
}

.uhc .uhc-subs3 > .uhl-banner-tile a img {
	flex: 0 0 auto;
	width: 56px !important;
	height: 56px;
	max-height: none;
	margin: 0;
	object-fit: contain;
}

.uhc .uhc-subs3 > .uhl-banner-tile a > span:not(.uhl-banner__countdown) {
	height: auto;
	margin: 0;
	text-align: left;
	font-size: 15px;
	line-height: 1.3;
}

/* 1.11.0: стрічка підрозділів — до 1023px (було до 639px), банерна плитка
   в ній — так само. */
@media (max-width: 1023px) {
	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-subs3 > .uhl-banner-tile {
		border-radius: 10px;
		scroll-snap-align: start;
	}
}

/* ── Підрозділи стрічкою на планшеті (1.11.0) ─────────────────────────
   На телефоні (до 639px, page.css — з макета) підрозділи — стрічка у два
   ряди, що гортається вбік: плитка «фото ліворуч, назва й кількість», над
   стрічкою — біла шапка блоку, вкладені — панеллю під стрічкою
   (subTree(), той самий поріг 1023px). Макет на 640–1023 ставить плитки
   стовпчиком; на прохання власника — стрічка й тут. Правила — копія
   телефонних з page.css (сам файл генерується з макета, руками не
   правиться); різниця одна — ширина плитки: 44% (дві плитки й край
   третьої), але не вужча за 240px (на 768 поруч колонка фільтра, і
   стрічка лише 430px), замість 82%. Правите телефонну стрічку в макеті —
   звірте тут. */
@media (min-width: 640px) and (max-width: 1023px) {
	.uhc[data-kids="pop"][data-subs="list3"].uhc .uhc-subcats > .uhc-rowhead {
		margin: 0;
		padding: 14px 16px 10px;
		background: #fff;
		border-radius: 14px 14px 0 0;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree {
		position: relative;
		background: #fff;
		border-radius: 0 0 14px 14px;
		padding: 0 14px 12px;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-subs3 {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-template-rows: repeat(2, 88px);
		grid-auto-columns: max(240px, 44%);
		gap: 8px;
		max-height: none;
		margin: 0;
		padding: 0 0 6px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		scrollbar-width: thin;
		scrollbar-color: #cfd9e6 transparent;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-subs3.is-more-x {
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-sub3 {
		min-width: 0;
		min-height: 0;
		scroll-snap-align: start;
		background: #f4f7fb;
		border: 1px solid transparent;
		border-radius: 10px;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-sub3.is-open .uhc-sub3__kids {
		display: none;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-subs__kidspanel:not([hidden]) {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + 6px);
		z-index: 30;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		padding: 10px;
		border-radius: 12px;
		background: #fff;
		border: 1px solid #e4e8ef;
		box-shadow: 0 18px 40px -22px rgba(16, 24, 40, .55);
	}

	.uhc .uhc-subs__kidshead {
		flex: 0 0 100%;
		margin: 0 2px 2px;
		font-size: 13px;
		font-weight: 600;
		color: var(--uhc-ink);
	}

	.uhc[data-kids="pop"] .uhc-subs__kidspanel .uhc-sub3__k {
		display: inline-flex;
		min-height: 44px;
	}

	.uhc[data-kids="pop"] .uhc-subs__kidspanel .uhc-sub3__more {
		display: none;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-sub3__top {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		height: 100%;
		padding: 8px 12px 8px 8px;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-sub3 .uhc-sub__ph {
		flex: 0 0 76px;
		width: 76px;
		height: 68px;
		display: grid;
		place-items: center;
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-sub3 .uhc-sub__n {
		font-size: 15px;
		line-height: 1.25;
		font-weight: 600;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		hyphens: auto;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-sub3 .uhc-sub__c {
		margin-top: 2px;
		font-size: 14px;
		color: #5d6b7c;
	}
}

/* 1.38.0: та сама стрічка й на ширшому екрані, коли блоку підрозділів
   тісно: вікно від 1024 з фільтром збоку (iPad Pro 13 вертикально — блок
   ~610px) — плитки по 320px ставали стовпчиком у ~950px заввишки. Рішає
   ширина самого блоку (container), а не вікна: без фільтра збоку блок
   широкий і лишається сіткою. Правила — копія блоку вище, без змін;
   сторож у tools/tests/t_catalog.php звіряє, що копії однакові.
   1.38.2: поріг заміряно, а не виведено: дві колонки сітка дає від 692px
   блоку (690 — ще одна; рахунок за правилами не сходиться через
   відступи сітки). Було 659: на iPad (смуга прокрутки поверх) блок
   660px — і знову одна колонка. Міняєте плитки чи відступи — заміряйте
   знову (ширина блоку 688–700, кількість колонок).
   1.38.3: на прохання власника стрічка, доки в ряд не вміщаються ТРИ
   плитки: дві колонки по 5 рядів — теж задовга стіна. Три колонки сітка
   дає від 1022px блоку (1020 — ще дві), заміряно так само. */
.uhc .uhc-subcats {
	container: uhc-subcats / inline-size;
}

@media (min-width: 1024px) {
@container uhc-subcats (max-width: 1021.98px) {
	.uhc[data-kids="pop"][data-subs="list3"].uhc .uhc-subcats > .uhc-rowhead {
		margin: 0;
		padding: 14px 16px 10px;
		background: #fff;
		border-radius: 14px 14px 0 0;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree {
		position: relative;
		background: #fff;
		border-radius: 0 0 14px 14px;
		padding: 0 14px 12px;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-subs3 {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-template-rows: repeat(2, 88px);
		grid-auto-columns: max(240px, 44%);
		gap: 8px;
		max-height: none;
		margin: 0;
		padding: 0 0 6px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		scrollbar-width: thin;
		scrollbar-color: #cfd9e6 transparent;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-subs3.is-more-x {
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-sub3 {
		min-width: 0;
		min-height: 0;
		scroll-snap-align: start;
		background: #f4f7fb;
		border: 1px solid transparent;
		border-radius: 10px;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-sub3.is-open .uhc-sub3__kids {
		display: none;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-subs__kidspanel:not([hidden]) {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + 6px);
		z-index: 30;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		padding: 10px;
		border-radius: 12px;
		background: #fff;
		border: 1px solid #e4e8ef;
		box-shadow: 0 18px 40px -22px rgba(16, 24, 40, .55);
	}

	.uhc .uhc-subs__kidshead {
		flex: 0 0 100%;
		margin: 0 2px 2px;
		font-size: 13px;
		font-weight: 600;
		color: var(--uhc-ink);
	}

	.uhc[data-kids="pop"] .uhc-subs__kidspanel .uhc-sub3__k {
		display: inline-flex;
		min-height: 44px;
	}

	.uhc[data-kids="pop"] .uhc-subs__kidspanel .uhc-sub3__more {
		display: none;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-sub3__top {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		height: 100%;
		padding: 8px 12px 8px 8px;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-sub3 .uhc-sub__ph {
		flex: 0 0 76px;
		width: 76px;
		height: 68px;
		display: grid;
		place-items: center;
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-sub3 .uhc-sub__n {
		font-size: 15px;
		line-height: 1.25;
		font-weight: 600;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		hyphens: auto;
	}

	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-sub3 .uhc-sub__c {
		margin-top: 2px;
		font-size: 14px;
		color: #5d6b7c;
	}
}
}

/* 1.38.3: у широкому блоці (800–1021px) плитка стрічки — 30%, а не 44%
   планшета: видно три плитки й край четвертої, а не дві по ~410px.
   Окремим правилом — копію планшетного блоку вище не чіпаємо. */
@media (min-width: 1024px) {
@container uhc-subcats (min-width: 800px) and (max-width: 1021.98px) {
	.uhc[data-kids="pop"] .uhc-subs--tree .uhc-subs3 {
		grid-auto-columns: max(260px, 30%);
	}
}
}

/* Рядок «N товарів · від X грн» модуля фільтрів — всередині .page-title (як у
   теми). 1.3.0: в еталоні під H1 його немає (кількість — у вступі й у шапці
   панелі фільтрів), тож він прихований для очей, але лишається в розмітці:
   скрипт фільтра після кожного фільтрування зачитує його читачам екрана
   (aria-live) і ставить на нього фокус. Відступ H1 → вступ — як в еталоні
   (заміряно: 26px від 1024, 10px до 768): нижній відступ .page-title теми
   (1.25rem до 48em) гасимо. */
.uhc .uhc-blk--cat .uhc-rowhead .page-title {
	margin-bottom: 0;
}

.uhc .uhc-blk--cat .page-title > .uhlf-facts {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Блок «Банери» вимкнено: бічний банер приходить разом із лівою колонкою, а
   запасний скрипт модуля банерів у шапці вставляє свої сам — ні того, ні
   іншого сервер не прибере, тож ховаємо всі. */
.uhc[data-banners="off"] .uhl-banner,
.uhc[data-banners="off"] .uhl-banner-tile {
	display: none !important;
}

/* Бічний банер модуля банерів — під фільтром, як у макеті. Модуль кладе його
   першим у #column-left, і першим він там і лишається (так його знаходить
   запасний скрипт модуля банерів і не вставляє другий) — місце міняє лише
   порядок. Позначку uhc-aside--bnr ставить сервер, коли банер є в колонці.
   На телефоні колонка без фільтра (він шторка): у шторку скрипт кладе копію
   банера, а сам банер лишається в колонці схованим — стояв би плашкою над
   товарами. Поріг — той самий, що в модуля фільтрів (767.98px). */
@media (min-width: 768px) {
	.uhc .uhc-aside--bnr > #column-left {
		display: flex;
		flex-direction: column;
	}

	.uhc .uhc-aside--bnr > #column-left > .uhl-banner--sidebar {
		order: 1;
		margin: 16px auto 0;
	}
}

.uhc.uhc--fdrawer .uhc-aside--ext > #column-left > .uhl-banner--sidebar {
	display: none;
}

@media (max-width: 767.98px) {
	.uhc .uhc-aside--ext > #column-left > .uhl-banner--sidebar {
		display: none;
	}

	.uhlf-form > .uhl-banner--sidebar {
		margin: 16px auto 4px;
	}
}

/* ── Липка колонка (як у макеті) ──────────────────────────────────────
   Панель фільтра прилипала сама (.uhlf.is-sticky), але її батько — обгортка
   теми #column-left — заввишки з неї саму, і прилипати не було куди: панель
   їхала за край разом зі сторінкою. Тепер липне обгортка — всередині
   колонки, що тягнеться на весь ряд, — під смугою з крихтами (та сама
   змінна, що в макеті) і не вища за екран; фільтр прокручується всередині,
   банер під ним лишається на екрані. Вмикається лише тоді, коли липкість
   хоче сам фільтр: is-sticky — це його налаштування і його перевірка, що
   після панелі в колонці нічого немає. */
@media (min-width: 768px) {
	.uhc .uhc-aside--ext > #column-left:has(> .uhlf.is-sticky) {
		position: sticky;
		top: var(--uhc-sticky-top, 16px);
		max-height: calc(100vh - var(--uhc-sticky-top, 16px) - 16px);
		display: flex;
		flex-direction: column;
		transition: top .24s var(--uhc-ease), max-height .24s var(--uhc-ease);
	}

	.uhc .uhc-aside--ext > #column-left > .uhlf.is-sticky {
		position: relative;
		top: auto;
		flex: 0 1 auto;
		min-height: 0;
		max-height: none;
		overscroll-behavior: contain;
	}

	.uhc .uhc-aside--ext > #column-left > .uhl-banner--sidebar {
		flex: 0 0 auto;
	}
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
	.uhc .uhc-aside--ext > #column-left:has(> .uhlf.is-sticky) {
		transition: none;
	}
}

/* Картка мітки «В интерьере»: кнопка «Перейти до товару» — на всю ширину
   картки й зі стрілкою, як кнопки карток товарів на сторінці (кут 3px,
   висота 44, 14/600) і як у панелі під стрічкою на телефоні. Розмітка та
   сама (кнопка в .uhc-hot__meta, спільна з панеллю): сітка картки, а
   .uhc-hot__meta — display: contents, тож фото й текст стоять рядком, а
   кнопка займає обидві колонки. Макет ховав стрілку в картці — тепер ні. */
.uhc .uhc-hot__card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 11px;
	row-gap: 3px;
	align-items: start;
}

.uhc .uhc-hot__card .uhc-hot__thumb {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.uhc .uhc-hot__card .uhc-hot__meta {
	display: contents;
}

.uhc .uhc-hot__card .uhc-hot__meta b,
.uhc .uhc-hot__card .uhc-hot__meta .pr {
	grid-column: 2;
}

.uhc .uhc-hot__card .uhc-hot__stub,
.uhc .uhc-hot__card .uhc-hot__err {
	grid-column: 1 / -1;
}

.uhc .uhc-hot__card .uhc-hot__go {
	grid-column: 1 / -1;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	margin-top: 10px;
	border-radius: 3px;
	font-size: 14px;
	font-weight: 600;
}

.uhc .uhc-hot__card .uhc-hot__go .uhc-ic {
	display: inline-block;
	width: 18px;
	height: 18px;
}

/* Картка мітки: фото й ціна крупніше. Щоб колонка з назвою не стиснулась
   (у 250px при фото 104px назва ставала на шість рядків), картка трохи
   ширша — 280px, у межах плитки (389px на 1440; .uhc-lifestyle і так
   обмежує її шириною обгортки). Ціна — як у панелі під стрічкою: число
   крупно, «грн» дрібніше й сірим. */
.uhc .uhc-hot__card {
	width: 280px;
}

.uhc .uhc-hot__card .uhc-hot__thumb img {
	width: 104px;
	height: 104px;
}

.uhc .uhc-hot__card .uhc-hot__meta .pr {
	margin-top: 4px;
	font-size: 20px;
	line-height: 1.15;
	white-space: nowrap;
}

.uhc .uhc-hot__card .uhc-hot__meta .pr .uhc-cur {
	font-size: .62em;
	font-weight: 600;
	color: #8a93a3;
}

.uhc .uhc-hot__card .uhc-hot__meta .pr s {
	display: block;
	font-size: 13px;
	font-weight: 400;
}

/* Прояв картки мітки: картка приходить уже повною (картки блоку скрипт бере
   наперед), тож анімація — лише коротка поява на місці, без росту. Зсув —
   окремою властивістю translate: transform картки зайнятий її положенням
   біля мітки (над / під / зсув усередину). */
.uhc .uhc-hot__card {
	opacity: 0;
	translate: 0 6px;
	transition: opacity .16s var(--uhc-ease, ease), translate .16s var(--uhc-ease, ease);
}

.uhc .uhc-hot__card.is-in {
	opacity: 1;
	translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.uhc .uhc-hot__card {
		translate: none;
		transition: none;
	}
}

/* Смуга КП і плаваюча кнопка контактів теми (.floating_contacts, 25px від
   низу): на вужчих екранах смуга лягала на її край. Коли смуга видна,
   кнопка піднімається над нею — тим самим порогом і на ту саму висоту, що й
   кнопка «Фильтр» у правилах макета (page.css, body.uhc-has-offer): плаваючі
   кнопки рухаються разом. Клас на <body> ставить лише наш скрипт, тож поза
   сторінкою категорії нічого не змінюється. */
@media (max-width: 1199px) {
	body.uhc-has-offer .floating_contacts {
		bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	}
}

/* Ярлик «Відгук» на телефоні — пігулка внизу праворуч (page.css, той самий
   поріг 639px); у макеті там нічого не було, а в темі там кругла кнопка
   контактів (25px від низу, 65px заввишки) — ярлик лягав на неї. Ставимо
   його над кнопкою з проміжком 10px: 100px від низу, зі смугою КП (кнопка
   піднята до 88px) — 163px. Лише коли кнопка на сторінці є: без неї
   лишається місце з макета.
   0.8.0: піднімаємо зсувом, а не bottom. Тема додає кнопку скриптом уже
   після показу, і зміна bottom рахувалась стрибком макета (CLS; ярлик
   підскакував на 84px). transform у CLS не входить; bottom лишається
   базовим (16px; зі смугою КП — 88px), місце на екрані те саме. */
@media (max-width: 639px) {
	body:has(.floating_contacts) .uhc-fb__tab {
		transform: translateY(calc(-84px - env(safe-area-inset-bottom, 0px)));
	}

	body.uhc-has-offer:has(.floating_contacts) .uhc-fb__tab {
		transform: translateY(-75px);
	}
}

/* Стрічка банерів серед товарів (0.7.0): слайд — посилання на облік
   модуля банерів, а не <div>, як у макеті. Правила макета для .uhc-cathero
   кольору й розкладки досить; посиланню — блок без підкреслення. */
.uhc a.uhc-cathero {
	display: block;
	text-decoration: none;
}

.uhc a.uhc-cathero:focus-visible {
	outline: 3px solid var(--uhc-gold);
	outline-offset: -3px;
}

/* ── 0.8.0: «Перед боєм» (RULES §7, заміри Ф7) ─────────────────────── */

/* Підказка після копіювання коду — мовою сторінки (атрибути з мовних
   файлів), а не текстом макета в page.css («скопировано» на /ua/). */
.uhc .uhc-code.is-done::after { content: attr(data-done); }
.uhc .uhc-code.is-fail::after { content: attr(data-failed); }

@media (max-width: 1023px), (pointer: coarse) {
	/* «Опції» в картці — 30px; зона натиску до 44px шаром навколо. */
	.uhc .uhc-optsick::after {
		content: ""; position: absolute; inset: -7px; border-radius: 50%;
	}

	/* Крапки стрічки: зона кожної — 44px без перекриття з сусідньою
	   (було 26px + шар -7px при проміжку 6px — сусіди ділили зону).
	   Видима крапка — та сама (::before у page.css). */
	.uhc .uhc-cslider__dots { gap: 0; }
	.uhc .uhc-cslider__dot,
	.uhc .uhc-cslider__dot.is-on { width: 44px; height: 44px; }
	.uhc .uhc-cslider__dot::after { content: none; }
}

/* Друк: на A4 (~700px) сторінка перебудовується як вузька, і на папір
   лягали смуга швидких фільтрів (uhl_filter — у колонці товарів), банери
   модуля банерів (лінива картинка — зламаним значком) і тінь-підказка
   прокрутки таблиці. */
@media print {
	.uhc .uhlf-bar,
	.uhc .uhl-banner { display: none !important; }

	.uhc .uhc-pscroll::before,
	.uhc .uhc-pscroll::after { content: none !important; }
}

/* ── Шторка фільтра знизу (1.13.0) ───────────────────────────────────
   Як в еталоні («Фільтр як шторка», фрагменти-фільтра/filter.css макета):
   панель виїжджає знизу на всю ширину (на планшеті — не ширша за 560px,
   по центру), до 86% висоти екрана, верх заокруглений, зверху ручка; за
   шапку її стягують униз (filterSheet() у скрипті). За роз'ємом фільтра
   шторку дає сторінка, а вміст — фільтр: uhl_filter сам переносить панель
   у <body>, ставить .is-drawer і відкриває / закриває її класом .is-open
   (власна шторка в нього — бічна, зліва на всю висоту). Тут — лише вигляд
   і лише на сторінках модуля: body:has(#uhc). Вага — з #uhc, тож правила
   фільтра (.uhlf.is-drawer у медіазапиті) перекриваються без !important.
   Шапка й кнопка «Показати товари» в нього прилиплі (sticky) — прокручується
   середина. Перейменує фільтр класи — тут теж правити. */
body:has(#uhc) .uhlf.is-drawer {
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	width: auto;
	max-width: 560px;
	height: auto;
	max-height: 86vh;
	max-height: 86dvh;
	margin: 0 auto;
	border: 0;
	border-radius: 18px 18px 0 0;
	box-shadow: 0 -12px 40px rgba(16, 24, 40, .18);
	transform: translateY(101%);
	transition: transform .28s ease, visibility 0s linear .28s;
}

body:has(#uhc) .uhlf.is-drawer.is-open {
	transform: none;
	transition: transform .28s ease;
}

/* Шапка — ручка: жест тут не віддаємо браузеру (стягування), зверху сіра
   риска, яка про це й підказує; верхній відступ більший на її висоту. */
body:has(#uhc) .uhlf.is-drawer .uhlf-head {
	padding-top: 16px;
	border-radius: 18px 18px 0 0;
	touch-action: none;
}

body:has(#uhc) .uhlf.is-drawer .uhlf-head::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 50%;
	width: 36px;
	height: 4px;
	margin-left: -18px;
	border-radius: 2px;
	background: #d5dbe5;
}

/* Хрестик — кругла кнопка на сірому тлі (еталон); зона натиску — 44px. */
body:has(#uhc) .uhlf.is-drawer .uhlf-head__close {
	position: relative;
	width: 36px;
	height: 36px;
	margin: 0;
	border-radius: 50%;
	background: #f1f4f9;
}

body:has(#uhc) .uhlf.is-drawer .uhlf-head__close::after {
	content: "";
	position: absolute;
	inset: -4px;
}

/* Під кнопкою «Показати товари» — рамка iPhone. */
body:has(#uhc) .uhlf--js.is-drawer .uhlf-foot {
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
	body:has(#uhc) .uhlf.is-drawer,
	body:has(#uhc) .uhlf.is-drawer.is-open {
		transition: none;
	}
}

/* ── Нижня смуга (1.24.0) ───────────────────────────────────────────
   Плашки КП (темна), порівняння (синя) й обраного (червона) — в один ряд
   по центру знизу; кожна з'являється, коли в ній є товари. Плашка КП —
   стилі макета (page.css), тут лише знята з власного position: fixed:
   смугу тримає .uhc-dock. Порожня смуга кліків не ловить. */
.uhc .uhc-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 1100;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 0 12px;
	pointer-events: none;
}

.uhc .uhc-dock > * {
	pointer-events: auto;
}

.uhc .uhc-dock .uhc-offerbar {
	position: static;
	width: auto;
	max-width: none;
	margin: 0;
}

.uhc .uhc-dockbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px 9px 16px;
	border-radius: 14px;
	color: #fff;
	box-shadow: 0 18px 40px -18px rgba(11, 22, 38, .75);
}

.uhc .uhc-dockbar[hidden] {
	display: none;
}

.uhc .uhc-dockbar--cmp {
	background: var(--uhc-blue);
}

/* Червоний — темніший відтінок «акції» (#c72c2c): білий текст на ньому
   читається (контраст ≥ 4,5:1), на яскравому #e03131 — ні. */
.uhc .uhc-dockbar--wish {
	background: var(--uhc-badge-sale-ink);
}

.uhc .uhc-dockbar__n {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	white-space: nowrap;
}

.uhc .uhc-dockbar__n .uhc-ic {
	width: 20px;
	height: 20px;
}

.uhc .uhc-dockbar__n b {
	font-size: 16px;
}

.uhc .uhc-dockbar__short {
	display: none;
}

.uhc .uhc-dockbar__go {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border-radius: 10px;
	background: #fff;
	color: var(--uhc-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--uhc-dur-fast) var(--uhc-ease);
}

.uhc .uhc-dockbar__go:hover,
.uhc .uhc-dockbar__go:focus {
	background: #eef3fb;
	color: var(--uhc-ink);
	text-decoration: none;
}

.uhc .uhc-dockbar__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	min-width: 40px;
	padding: 0 10px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: rgba(255, 255, 255, .82);
	font-size: 13px;
	cursor: pointer;
	transition: color var(--uhc-dur-fast) var(--uhc-ease);
}

.uhc .uhc-dockbar__x:hover {
	color: #fff;
}

.uhc .uhc-dockbar__x[disabled] {
	opacity: .5;
	cursor: wait;
}

.uhc .uhc-dockbar__x--icon .uhc-ic {
	width: 16px;
	height: 16px;
}

/* Гість (1.25.0): «до кінця візиту» поруч із «Відкрити». */
.uhc .uhc-dockbar__note[hidden] {
	display: none;
}

.uhc .uhc-dockbar__note {
	font-size: 13px;
	color: rgba(255, 255, 255, .88);
	white-space: nowrap;
}

/* Фокус з клавіатури — кільцем через box-shadow: FilterVier гасить
   outline на всьому сайті (:focus{outline:none !important}). */
.uhc .uhc-dockbar__go:focus-visible,
.uhc .uhc-dockbar__x:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .7);
}

/* Смуга піднімає кнопку «Фильтр» і ярлик «Відгук» — як плашка КП
   (uhc-has-offer у page.css), але від будь-якої плашки смуги. */
@media (max-width: 1199px) {
	body.uhc-has-dock .uhc .uhc-fltbtn {
		bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	}

	/* Кнопка дзвінка теми (.floating_contacts: bottom 25px, z-index 150)
	   ховалась під смугою — піднімаємо над нею, поки смуга видима. Ширше
	   1199px смуга стоїть по центру й до неї не дістає. */
	body.uhc-has-dock .floating_contacts {
		bottom: calc(89px + env(safe-area-inset-bottom, 0px));
	}

	/* Три плашки в ряд: підпис гостя лишаємо лише широкому екрану —
	   пояснення гість уже бачив у повідомленні «додано». */
	.uhc .uhc-dockbar__note {
		display: none;
	}
}

@media (max-width: 639px) {
	body.uhc-has-dock .uhc-fb__tab {
		bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	}
}

/* Телефон: плашки компактні — значок, коротко, число, кнопка; в один ряд. */
@media (max-width: 767px) {
	.uhc .uhc-dock {
		gap: 6px;
		padding: 0 8px;
		flex-wrap: nowrap;
	}

	.uhc .uhc-dock > * {
		min-width: 0;
	}

	.uhc .uhc-dockbar {
		gap: 6px;
		padding: 7px 6px 7px 10px;
	}

	.uhc .uhc-dockbar__n {
		gap: 5px;
		font-size: 13px;
	}

	.uhc .uhc-dockbar__long {
		display: none;
	}

	.uhc .uhc-dockbar__short {
		display: inline;
	}

	.uhc .uhc-dockbar__go {
		height: 36px;
		padding: 0 10px;
		font-size: 13px;
	}

	.uhc .uhc-dockbar__x {
		height: 36px;
		min-width: 32px;
		padding: 0 4px;
		font-size: 12px;
	}
}

@media (max-width: 559px) {
	.uhc .uhc-dock .uhc-offerbar {
		left: auto;
		right: auto;
	}
}

/* Найвужчі телефони: три плашки в ряд вміщаються лише значком і числом. */
@media (max-width: 479px) {
	.uhc .uhc-dockbar__short,
	.uhc .uhc-dock .uhc-offerbar__short {
		display: none;
	}
}

/* ── Повідомлення «додано» (1.25.0) ─────────────────────────────────
   По центру над смугою (bottom ставить скрипт від верху плашок; без
   смуги — 24px). Не показане — прозоре, кліків не ловить, вміст схований
   (hidden): живу область скринрідер читає, коли вміст з'являється. */
.uhc .uhc-toast {
	position: fixed;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 1101;
	display: flex;
	align-items: flex-start;
	gap: 4px;
	width: max-content;
	max-width: min(440px, calc(100vw - 24px));
	padding: 10px 6px 10px 12px;
	border: 1px solid var(--uhc-line);
	border-radius: 14px;
	background: #fff;
	color: var(--uhc-ink);
	box-shadow: 0 18px 40px -18px rgba(11, 22, 38, .55);
	opacity: 0;
	transform: translate(-50%, 8px);
	pointer-events: none;
	transition: opacity var(--uhc-dur-fast) var(--uhc-ease), transform var(--uhc-dur-fast) var(--uhc-ease);
}

.uhc .uhc-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

.uhc .uhc-toast__msg {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.uhc .uhc-toast.is-wide .uhc-toast__msg {
	align-items: flex-start;
}

.uhc .uhc-toast__msg[hidden],
.uhc .uhc-toast__x[hidden] {
	display: none;
}

.uhc .uhc-toast__ic {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: #fff;
}

.uhc .uhc-toast__ic .uhc-ic {
	width: 17px;
	height: 17px;
}

.uhc .uhc-toast__ic--wish {
	background: var(--uhc-badge-sale-ink);
}

.uhc .uhc-toast__ic--cmp {
	background: var(--uhc-blue);
}

.uhc .uhc-toast__body {
	min-width: 0;
	padding-top: 6px;
}

.uhc .uhc-toast__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.uhc .uhc-toast__text {
	margin: 4px 0 10px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--uhc-ink2);
}

.uhc .uhc-toast__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
}

.uhc .uhc-toast__btn {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	border-radius: 10px;
	background: var(--uhc-blue);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.uhc .uhc-toast__btn:hover,
.uhc .uhc-toast__btn:focus {
	box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .12);
	color: #fff;
	text-decoration: none;
}

.uhc .uhc-toast__link {
	font-size: 13px;
	font-weight: 600;
	color: var(--uhc-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.uhc .uhc-toast__link:hover {
	color: var(--uhc-ink);
}

.uhc .uhc-toast__x {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: 6px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--uhc-ink3);
	cursor: pointer;
}

.uhc .uhc-toast__x:hover {
	color: var(--uhc-ink);
}

.uhc .uhc-toast__x .uhc-ic {
	width: 14px;
	height: 14px;
}

.uhc .uhc-toast__btn:focus-visible,
.uhc .uhc-toast__link:focus-visible,
.uhc .uhc-toast__x:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 113, 227, .35);
}

@media (prefers-reduced-motion: reduce) {
	.uhc .uhc-toast {
		transition: none;
	}
}

@media print {
	.uhc .uhc-dock,
	.uhc .uhc-toast {
		display: none !important;
	}
}

/* «В интерьере» з 1–2 сцен (1.26.0): на комп'ютері стрічка показує три
   сцени з краєчком четвертої — неповний ряд виглядає порожнім, тож блоку
   й якоря там немає. Поріг — той самий, що в правилах стрічки
   (max-width: 1023px у page.css), лише навпаки: інакше на дробовій ширині
   між ними блок або зникав би, або лишався з розкладкою телефона. */
@media not all and (max-width: 1023px) {
	.uhc .uhc-blk.uhc-hide-wide,
	.uhc .uhc-anchorbar .uhc-anchors a.uhc-hide-wide {
		display: none;
	}
}

/* Одна сцена й на планшеті (1.27.0, режим «Ховати»): рядок там — дві
   сцени з краєчком третьої. Межі — ті самі пороги стрічки (639 / 1023px),
   без власних чисел. */
@media (max-width: 1023px) and (not (max-width: 639px)) {
	.uhc .uhc-blk.uhc-hide-mid,
	.uhc .uhc-anchorbar .uhc-anchors a.uhc-hide-mid {
		display: none;
	}
}

/* Сцен менше, ніж уміщує рядок (1.27.0): вони заповнюють рядок замість
   стрічки з порожнечею праворуч. flex: 1 1 0 ділить вміст стрічки між
   її однаковими полями — свої відступи не рахуємо. Одна сцена — на всю
   ширину завжди, де блок видно; дві — навпіл від 640px (на телефоні
   лишається стрічка: навпіл там вийшло б ~160px). */
.uhc .uhc-lifestyle.uhc-lifestyle--n1 .uhc-lookgrid--slider > .uhc-lookitem {
	flex: 1 1 0;
}

/* Смужка прогортання там, де гортати нічого: повна, вона читалась як
   жовта лінія-роздільник. */
.uhc .uhc-lifestyle.uhc-lifestyle--n1 .uhc-lookbar {
	display: none;
}

@media not all and (max-width: 639px) {
	.uhc .uhc-lifestyle.uhc-lifestyle--n2 .uhc-lookgrid--slider > .uhc-lookitem {
		flex: 1 1 0;
	}

	.uhc .uhc-lifestyle.uhc-lifestyle--n2 .uhc-lookbar {
		display: none;
	}
}

/* Комп'ютер, режим «Розтягнути»: поля стрічки там ширші за поля сторінки
   (місце під прогортання) — розтягнуті сцени стояли б на 24px глибше за
   заголовок і галерею. Гортати нічого, тож поля знімаємо. */
@media not all and (max-width: 1023px) {
	.uhc .uhc-lifestyle.uhc-lifestyle--n1 .uhc-lookgrid--slider,
	.uhc .uhc-lifestyle.uhc-lifestyle--n2 .uhc-lookgrid--slider {
		padding-left: 0;
		padding-right: 0;
	}
}