/* UHL - Category Pro — сторінки порівняння (1.43.0).
   Макет — docs/compare-mockup/. З 1.47.0 корінь — .uhc сторінки розділу
   (core.css, page.css, module.css: тло, ширина data-width, відступи
   data-density, крихти, заголовок); тут — лише своє. Жетони — --uhcc-*:
   однакові з --uhc-* імена перебили б кольори розділу. Вага — клас кореня +
   клас елемента, щоб перебити bootstrap теми (h1, button). */

.uhc-cmpp {
	--uhcc-blue: #1f4f9e;
	--uhcc-blue-ink: #1a4489;
	--uhcc-ink: #16243a;
	--uhcc-ink2: #4a5870;
	--uhcc-ink3: #5f6b7d;
	--uhcc-line: #e6eaf1;
	--uhcc-line2: #eef1f6;
	--uhcc-tint: #f5f8fc;
	--uhcc-red: #c4271c;
	--uhcc-r: 14px;
	--uhcc-ring: 0 0 0 3px rgba(31, 79, 158, .35);
	--uhcc-name-w: 240px;
	color: var(--uhcc-ink);
	font: 15px/1.45 Onest, system-ui, sans-serif;
}

.uhc-cmpp *,
.uhc-cmpp *::before,
.uhc-cmpp *::after {
	box-sizing: border-box;
}

.uhc-cmpp a {
	color: var(--uhcc-blue);
	text-decoration: none;
}

.uhc-cmpp a:hover {
	color: var(--uhcc-blue-ink);
}

.uhc-cmpp a:focus-visible,
.uhc-cmpp button:focus-visible {
	outline: none;
	box-shadow: var(--uhcc-ring);
}

/* 1.47.0: крихти й заголовок — розмітка й стилі сторінки розділу (page.css,
   module.css). Смуга крихт тут не липка: скрипта розділу, що ховає її при
   прокрутці, на сторінках порівняння немає — липкою була б прозора смуга
   поверх таблиці. */
.uhc-cmpp .uhc-anchorbar--static {
	position: static;
}

.uhc-cmpp .uhc-cmpp__sub {
	margin: 0 0 22px;
	font-size: 14px;
	color: var(--uhcc-ink3);
}

.uhc-cmpp .uhc-cmpp__lists {
	display: grid;
	gap: 12px;
}

.uhc-cmpp .uhc-cmpp__list {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px 24px;
	align-items: start;
	padding: 18px 20px;
	border: 1px solid var(--uhcc-line);
	border-radius: var(--uhcc-r);
	background: #fff;
}

.uhc-cmpp .uhc-cmpp__t {
	margin: 0;
	font: 600 17px/1.3 Geologica, Onest, sans-serif;
	color: var(--uhcc-ink);
}

.uhc-cmpp .uhc-cmpp__t a {
	color: var(--uhcc-ink);
}

.uhc-cmpp .uhc-cmpp__t a:hover {
	color: var(--uhcc-blue);
}

.uhc-cmpp .uhc-cmpp__tag {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 20px;
	background: #fff6d6;
	color: #7a5f00;
	font: 600 12px/1.6 Onest, sans-serif;
	vertical-align: middle;
	white-space: nowrap;
}

.uhc-cmpp .uhc-cmpp__n {
	margin: 2px 0 12px;
	font-size: 13.5px;
	color: var(--uhcc-ink3);
	font-variant-numeric: tabular-nums;
}

/* 1.49.0: плитки товарів — вигляд плиток підрозділів розділу (uhc-sub__ph /
   __b / __n з page.css; тло й заокруглення — як у .uhc-sub3). Сітка заповнює
   ширину картки списку; на телефоні — стрічка вбік. */
.uhc-cmpp .uhc-cmpp__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 10px;
}

.uhc-cmpp .uhc-cmpp__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: var(--uhc-tint, #f5f8fc);
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease;
}

.uhc-cmpp .uhc-cmpp__item:hover {
	border-color: var(--uhc-line);
	color: inherit;
}

.uhc-cmpp .uhc-cmpp__item:hover .uhc-sub__n {
	color: var(--uhc-blue);
}

.uhc-cmpp .uhc-cmpp__iname {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 13.5px;
}

.uhc-cmpp .uhc-cmpp__iprice {
	display: block;
	margin-top: 4px;
	color: var(--uhc-ink);
	font: 700 14px/1.2 Geologica, Onest, sans-serif;
	white-space: nowrap;
}

.uhc-cmpp .uhc-cmpp__acts {
	display: flex;
	gap: 8px;
	align-items: center;
}

.uhc-cmpp .uhc-cmpp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 18px;
	border: 1px solid var(--uhc-blue);
	border-radius: 3px;
	background: var(--uhc-blue);
	color: #fff;
	font: 600 14.5px/1 Onest, sans-serif;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

/* 1.49.0: як кнопка картки розділу (uhc-pcard__buy): синя, на наведенні — жовта. */
.uhc-cmpp .uhc-cmpp__btn:hover {
	border-color: var(--uhc-gold-cta);
	background: var(--uhc-gold-cta);
	color: var(--uhc-ink-card);
}

.uhc-cmpp .uhc-cmpp__btn--ghost,
.uhc-cmpp .uhc-cmpp__btn--ghost:hover {
	border-color: var(--uhcc-line);
	background: #fff;
	color: var(--uhcc-blue);
}

.uhc-cmpp .uhc-cmpp__btn--ghost:hover {
	border-color: var(--uhcc-blue);
}

.uhc-cmpp .uhc-cmpp__btn--red,
.uhc-cmpp .uhc-cmpp__btn--red:hover {
	border-color: var(--uhcc-red);
	background: var(--uhcc-red);
	color: #fff;
}

.uhc-cmpp .uhc-cmpp__btn--red:hover {
	background: #a51f16;
}

.uhc-cmpp .uhc-cmpp__btn[aria-busy="true"] {
	opacity: .65;
	cursor: progress;
}

.uhc-cmpp .uhc-cmpp__ico {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--uhcc-line);
	border-radius: 3px;
	background: #fff;
	color: var(--uhcc-ink2);
	cursor: pointer;
}

.uhc-cmpp .uhc-cmpp__ico:hover,
.uhc-cmpp .uhc-cmpp__ico[aria-expanded="true"] {
	border-color: var(--uhcc-blue);
	color: var(--uhcc-blue);
}

/* Меню «⋮» — під кнопкою, поверх сусідніх карток. */
.uhc-cmpp .uhc-cmpp__menu {
	position: absolute;
	top: 70px;
	right: 20px;
	z-index: 5;
	width: 316px;
	max-width: calc(100% - 40px);
	padding: 6px;
	border: 1px solid var(--uhcc-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 16px 40px -18px rgba(16, 24, 40, .45);
}

.uhc-cmpp .uhc-cmpp__menu[hidden],
.uhc-cmpp [data-menu-main][hidden],
.uhc-cmpp [data-menu-confirm][hidden],
.uhc-cmpp [data-drop-err][hidden],
.uhc-cmpp [data-empty][hidden] {
	display: none;
}

.uhc-cmpp .uhc-cmpp__mi {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--uhcc-ink);
	font: 500 14px/1.3 Onest, sans-serif;
	text-align: left;
	cursor: pointer;
}

.uhc-cmpp .uhc-cmpp__mi:hover {
	background: var(--uhcc-tint);
	color: var(--uhcc-ink);
}

.uhc-cmpp .uhc-cmpp__mi--danger,
.uhc-cmpp .uhc-cmpp__mi--danger:hover {
	color: var(--uhcc-red);
}

.uhc-cmpp .uhc-cmpp__confirm {
	padding: 8px 8px 6px;
}

.uhc-cmpp .uhc-cmpp__ask {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.45;
}

.uhc-cmpp .uhc-cmpp__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.uhc-cmpp .uhc-cmpp__row .uhc-cmpp__btn {
	height: 38px;
	padding: 0 14px;
	font-size: 14px;
}

.uhc-cmpp .uhc-cmpp__err {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--uhcc-red);
}

/* Порожньо */
.uhc-cmpp .uhc-cmpp__empty {
	display: grid;
	justify-items: center;
	gap: 6px;
	max-width: 560px;
	margin: 24px auto 0;
	padding: 36px 24px 32px;
	border: 1px solid var(--uhcc-line);
	border-radius: var(--uhcc-r);
	background: #fff;
	text-align: center;
}

.uhc-cmpp .uhc-cmpp__emptyic {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: var(--uhcc-tint);
	color: var(--uhcc-blue);
}

.uhc-cmpp .uhc-cmpp__et {
	margin: 0;
	font: 600 19px/1.3 Geologica, Onest, sans-serif;
	color: var(--uhcc-ink);
}

.uhc-cmpp .uhc-cmpp__ep {
	margin: 0 0 14px;
	color: var(--uhcc-ink2);
}

/* Телефон: дії під мініатюрами, «Порівняти» — на всю ширину. */
@media (max-width: 639.98px) {
	.uhc-cmpp .uhc-cmpp__list {
		grid-template-columns: minmax(0, 1fr);
		padding: 16px;
	}

	.uhc-cmpp .uhc-cmpp__items {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(230px, 80%);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		padding-bottom: 4px;
	}

	.uhc-cmpp .uhc-cmpp__item {
		scroll-snap-align: start;
	}

	.uhc-cmpp .uhc-cmpp__acts .uhc-cmpp__btn {
		flex: 1 1 auto;
	}

	.uhc-cmpp .uhc-cmpp__menu {
		top: calc(100% - 10px);
		right: 16px;
		max-width: calc(100% - 32px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.uhc-cmpp * {
		transition: none !important;
	}
}

/* ── Таблиця порівняння (1.44.0) ─────────────────────────────────────
   Макет — docs/compare-mockup/list.html. Колонки рівні: на комп'ютері не
   вужчі за 230px (більше — гортання вбік), на телефоні — дві на екран зі
   «сніпом». Назви рядків (.uhc-cmpt__lab) займають увесь рядок, а текст у
   них липне до лівого краю, коли таблицю гортають. Липка шапка товарів —
   окрема смуга (.uhc-cmpt__mini): шапка таблиці в контейнері з прокруткою
   вбік прилипнути до сторінки не може; смугу показує й зсуває скрипт. */

.uhc-cmpt .uhc-cmpt__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 500;
}

.uhc-cmpt .uhc-cmpt__shared {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin: 6px 0 14px;
	padding: 14px 18px;
	border: 1px solid #f0dd9a;
	border-radius: 12px;
	background: #fffbea;
}

.uhc-cmpt .uhc-cmpt__sharednote {
	flex: 1 1 320px;
	margin: 0;
	color: var(--uhcc-ink2);
}

.uhc-cmpt .uhc-cmpt__shared .uhc-cmpp__err {
	flex-basis: 100%;
	margin: 0;
}

.uhc-cmpt .uhc-cmpt__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin: 14px 0;
}

.uhc-cmpt .uhc-cmpt__chk {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

.uhc-cmpt .uhc-cmpt__chk input {
	position: absolute;
	opacity: 0;
	width: 22px;
	height: 22px;
	margin: 0;
}

.uhc-cmpt .uhc-cmpt__box {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border: 2px solid #c3cbd8;
	border-radius: 6px;
	background: #fff;
}

.uhc-cmpt .uhc-cmpt__chk input:checked + .uhc-cmpt__box {
	border-color: var(--uhcc-blue);
	background: var(--uhcc-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}

.uhc-cmpt .uhc-cmpt__chk input:focus-visible + .uhc-cmpt__box {
	box-shadow: var(--uhcc-ring);
}

.uhc-cmpt .uhc-cmpt__lnk {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 2px;
	border: 0;
	background: none;
	color: var(--uhcc-blue);
	font: 600 15px/1.2 Onest, sans-serif;
	cursor: pointer;
}

.uhc-cmpt .uhc-cmpt__lnk:hover {
	color: var(--uhcc-blue-ink);
}

.uhc-cmpt .uhc-cmpt__msg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: -4px 0 14px;
	padding: 10px 14px;
	border-radius: 10px;
	background: #e9f6ef;
	color: #14532d;
	font-size: 14px;
}

.uhc-cmpt .uhc-cmpt__msg[hidden],
.uhc-cmpt .uhc-cmpt__copy[hidden] {
	display: none;
}

.uhc-cmpt .uhc-cmpt__copy {
	flex: 1 1 320px;
	min-width: 0;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--uhcc-line);
	border-radius: 8px;
	background: #fff;
	color: var(--uhcc-ink);
	font: 13px/1 Onest, sans-serif;
}

/* Липка смуга товарів: висота нуль, щоб не зсувати сторінку; показана —
   поверх верху таблиці. Доріжку зсуває скрипт разом із прокруткою таблиці. */
.uhc-cmpt .uhc-cmpt__mini {
	position: sticky;
	top: 0;
	z-index: 20;
	height: 0;
	overflow: visible;
	pointer-events: none;
}

.uhc-cmpt .uhc-cmpt__miniclip {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--uhcc-line);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	background: #fff;
	box-shadow: 0 10px 24px -16px rgba(16, 24, 40, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease, visibility 0s linear .15s;
}

.uhc-cmpt .uhc-cmpt__mini.is-on .uhc-cmpt__miniclip {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .15s ease, visibility 0s;
}

.uhc-cmpt .uhc-cmpt__track {
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	will-change: transform;
}

.uhc-cmpt .uhc-cmpt__mc {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 2px 10px;
	align-items: start;
	min-width: 0;
	padding: 10px 14px;
	border-left: 1px solid var(--uhcc-line2);
}

.uhc-cmpt .uhc-cmpt__mc:first-child,
.uhc-cmpt .uhc-cmpt__mc--name + .uhc-cmpt__mc {
	border-left: 0;
}

.uhc-cmpt .uhc-cmpt__mc img {
	grid-row: span 2;
	align-self: start;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

/* 1.49.0: назва — посилання, повністю (переноситься, без «…»). */
.uhc-cmpt .uhc-cmpt__mn {
	color: var(--uhcc-ink);
	font-size: 13px;
	line-height: 1.35;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.uhc-cmpt .uhc-cmpt__mn:hover {
	color: var(--uhcc-blue);
}

.uhc-cmpt .uhc-cmpt__mrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 4px;
}

/* 1.49.10: ціна з кнопкою — біля низу клітинки смуги, як у шапці таблиці:
   назва в одного товару на три рядки більше не опускає лише його ряд.
   Клітинки смуги однакової висоти (рядок сітки доріжки). */
.uhc-cmpt .uhc-cmpt__mc:not(.uhc-cmpt__mc--add):not(.uhc-cmpt__mc--name) {
	grid-template-rows: auto 1fr;
}

.uhc-cmpt .uhc-cmpt__mc .uhc-cmpt__mrow {
	align-self: end;
}

.uhc-cmpt .uhc-cmpt__mp {
	font: 700 14px/1.2 Geologica, Onest, sans-serif;
	white-space: nowrap;
}

/* Кнопка картки (uhc-pcard__buy) — компактніша під смугу. */
.uhc-cmpt .uhc-cmpt__mbuy {
	width: 40px;
	height: 36px;
}

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


/* Таблиця */
.uhc-cmpt .uhc-cmpt__frame {
	overflow: hidden;
	border: 1px solid var(--uhcc-line);
	border-radius: var(--uhcc-r);
	background: #fff;
}

.uhc-cmpt .uhc-cmpt__scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	/* Від ширини рамки рахується ширина колонок на телефоні (cqw). */
	container-type: inline-size;
}

/* 1.49.12: гортання мишею (compare.js, drag()) — рука, коли є куди гортати;
   під час руху текст не виділяється, фото не тягнеться. Кнопки й
   посилання зберігають свій курсор. */
.uhc-cmpt .uhc-cmpt__scroll.is-drag-on {
	cursor: grab;
}

.uhc-cmpt .uhc-cmpt__scroll.is-dragging {
	cursor: grabbing;
}

.uhc-cmpt .uhc-cmpt__scroll.is-dragging,
.uhc-cmpt .uhc-cmpt__scroll.is-dragging * {
	user-select: none;
}

.uhc-cmpt .uhc-cmpt__scroll img {
	-webkit-user-drag: none;
}

.uhc-cmpt .uhc-cmpt__scroll:focus-visible {
	outline: none;
	box-shadow: inset var(--uhcc-ring);
}

.uhc-cmpt .uhc-cmpt__table {
	width: max(100%, calc(var(--cols) * 230px));
	max-width: none;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
	background: #fff;
}

/* 1.44.1: stylesheet.css теми задає ВСІМ таблицям tbody { display: grid } і
   tbody tr { display: flex; margin-bottom: 15px } — тіло таблиці розсипалось
   у вузький стовпчик. Повертаємо табличну розкладку лише своїй таблиці. */
.uhc-cmpt .uhc-cmpt__table thead {
	display: table-header-group;
}

.uhc-cmpt .uhc-cmpt__table tbody {
	display: table-row-group;
	justify-items: normal;
	align-items: normal;
	justify-content: normal;
}

.uhc-cmpt .uhc-cmpt__table tr {
	display: table-row;
	width: auto;
	margin: 0;
}

.uhc-cmpt .uhc-cmpt__table th,
.uhc-cmpt .uhc-cmpt__table td {
	display: table-cell;
	padding: 12px 14px;
	border: 0;
	border-left: 1px solid var(--uhcc-line2);
	vertical-align: top;
	scroll-snap-align: start;
}

.uhc-cmpt .uhc-cmpt__table th:first-child,
.uhc-cmpt .uhc-cmpt__table td:first-child {
	border-left: 0;
}

.uhc-cmpt .uhc-cmpt__prod {
	position: relative;
	/* 1.49.11: власний шар — стікери (z 3), хрестик, серце й ряд з кнопкою
	   лишаються в клітинці й не просвічують поверх липкої колонки назв
	   (z 2), коли таблицю гортають вбік. */
	z-index: 0;
	padding: 16px 14px 14px;
	font-weight: 400;
	text-align: left;
}

.uhc-cmpt .uhc-cmpt__x {
	position: absolute;
	top: 8px;
	right: 6px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, .9);
	color: var(--uhcc-ink3);
	cursor: pointer;
}

.uhc-cmpt .uhc-cmpt__x:hover {
	background: #fdecea;
	color: var(--uhcc-red);
}

.uhc-cmpt .uhc-cmpt__x[aria-busy="true"] {
	opacity: .5;
	cursor: progress;
}

/* 1.49.5: «В обране» — під хрестиком, тієї ж міри; за посиланням хрестика
   немає — на його місці. Натиснуте (is-on) фарбує page.css, як на картці. */
.uhc-cmpt .uhc-cmpt__w {
	position: absolute;
	top: 8px;
	right: 6px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 8px;
	background: rgba(255, 255, 255, .9);
	color: var(--uhcc-ink3);
	cursor: pointer;
}

.uhc-cmpt .uhc-cmpt__x ~ .uhc-cmpt__w {
	top: 46px;
}

.uhc-cmpt .uhc-cmpt__w:hover {
	background: #eaf1fd;
	color: var(--uhcc-blue);
}

.uhc-cmpt .uhc-cmpt__w .uhc-ic {
	width: 18px;
	height: 18px;
}

.uhc-cmpt .uhc-cmpt__ph {
	display: grid;
	place-items: center;
	height: 130px;
	margin: 0 0 10px;
}

.uhc-cmpt .uhc-cmpt__ph img {
	max-width: 100%;
	max-height: 130px;
	object-fit: contain;
}

/* 1.49.4: плашки (новинка, хіт, знижка) і стікери uhl_stickers — у лівому
   верхньому куті фото, як на картці розділу (класи uhc-pcard__* зі
   showcase.css: стопка плашок, стікери під ними). */
.uhc-cmpt .uhc-cmpt__phw {
	position: relative;
}

.uhc-cmpt .uhc-cmpt__n {
	display: -webkit-box;
	min-height: 2.9em;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: var(--uhcc-ink);
	font-size: 14.5px;
	line-height: 1.45;
}

.uhc-cmpt .uhc-cmpt__n:hover {
	color: var(--uhcc-blue);
}

.uhc-cmpt .uhc-cmpt__c {
	margin: 6px 0 10px;
	color: var(--uhcc-ink3);
	font-size: 12.5px;
}

/* 1.53.0: код — кнопка «скопіювати» (.uhc-code з page.css, як у картці
   розділу); у колонці таблиці довгий код («… / …») переноситься, як і
   раніше, а не обрізається трьома крапками. */
.uhc-cmpt .uhc-code.uhc-cmpt__c {
	overflow: visible;
	white-space: normal;
}

.uhc-cmpt .uhc-cmpt__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

/* 1.49.6: ціна з кнопкою — біля низу клітинки, тож кнопки й ціни сусідніх
   товарів стоять в один ряд, хоч би скільки рядків займав код. Назва й так
   рівно у два рядки — назви й коди починаються на одній висоті. Клітинки
   рядка однакової висоти (таблиця), нижній відступ — місце під ряд:
   14 + 46 (кнопка) + 12 до коду (чи до назви, коли коду немає — тому в
   шапці в коду нижнього відступу немає). */
.uhc-cmpt .uhc-cmpt__prod:not(.uhc-cmpt__add) {
	padding-bottom: 72px;
}

.uhc-cmpt .uhc-cmpt__prod .uhc-cmpt__c {
	margin-bottom: 0;
}

.uhc-cmpt .uhc-cmpt__prod .uhc-cmpt__row {
	position: absolute;
	right: 14px;
	bottom: 14px;
	left: 14px;
}

/* Точки гортання — лише на телефоні (правила нижче, до 768). */
.uhc-cmpt .uhc-cmpt__dots {
	display: none;
}

.uhc-cmpt .uhc-cmpt__price {
	display: block;
	white-space: nowrap;
	color: var(--uhcc-ink);
	font: 700 20px/1.1 Geologica, Onest, sans-serif;
	font-variant-numeric: tabular-nums;
}

.uhc-cmpt .uhc-cmpt__price--ask {
	color: var(--uhcc-ink2);
	font-size: 16px;
}

.uhc-cmpt .uhc-cmpt__old {
	display: block;
	color: var(--uhcc-ink3);
	font-size: 13px;
	font-weight: 500;
}

/* Ціна з money(): нерозривний пробіл нульового розміру, відступ дає «грн». */
.uhc-cmpp .uhc-sp {
	font-size: 0;
}

.uhc-cmpp .uhc-cur {
	margin-left: .25em;
	color: #8a93a3;
	font-size: .8em;
	font-style: normal;
	font-weight: 600;
}

/* 1.48.1: кнопки — картки розділу (uhc-pcard__buy: синій квадрат 52×46, на
   наведенні — жовтий; «Під замовлення» — сірий, showcase.css / page.css).
   Як у картці в сітці: праворуч від ціни, лише значок — підпис у підказці
   (data-uhc-tip) і для читачів екрана (aria-label). */
.uhc-cmpt .uhc-cmpt__buy {
	flex: 0 0 auto;
	align-self: center;
}

.uhc-cmpt .uhc-cmpt__buy span {
	display: none;
}

.uhc-cmpt .uhc-cmpt__add {
	vertical-align: middle;
}

.uhc-cmpt .uhc-cmpt__addlink {
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: 28px 10px;
	border: 2px dashed var(--uhcc-line);
	border-radius: 12px;
	color: var(--uhcc-blue);
	text-align: center;
}

.uhc-cmpt .uhc-cmpt__addlink:hover {
	border-color: var(--uhcc-blue);
}

.uhc-cmpt .uhc-cmpt__addic {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--uhcc-tint);
}

/* 1.49.10: «Додати ще модель» у липкій смузі — над колонкою з карткою «+». */
.uhc-cmpt .uhc-cmpt__mc--add {
	display: flex;
	align-items: center;
	justify-content: center;
}

.uhc-cmpt .uhc-cmpt__madd {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--uhcc-blue);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}

.uhc-cmpt .uhc-cmpt__madd:hover {
	color: var(--uhcc-blue);
	text-decoration: underline;
}

.uhc-cmpt .uhc-cmpt__maddic {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--uhcc-tint);
}

.uhc-cmpt .uhc-cmpt__addlink small {
	color: var(--uhcc-ink3);
	font-size: 12.5px;
}

/* Назви характеристик (1.48.0). До 1024 — рядок назви над значеннями на
   всю ширину (помітний: темний, напівжирний, на тлі), колонки назв немає.
   Від 1024 — колонка назв зліва (th.uhc-cmpt__name, липка), рядків назв
   немає. Обидві розмітки в HTML; показ — лише стилем. */
.uhc-cmpt .uhc-cmpt__table .uhc-cmpt__name,
.uhc-cmpt .uhc-cmpt__table .uhc-cmpt__corner,
.uhc-cmpt .uhc-cmpt__mc--name,
.uhc-cmpt .uhc-cmpt__minicorner {
	display: none;
}

/* Перша видима клітинка рядка без лівої лінії — і коли колонку назв сховано. */
.uhc-cmpt .uhc-cmpt__table .uhc-cmpt__name + td,
.uhc-cmpt .uhc-cmpt__table .uhc-cmpt__corner + th {
	border-left: 0;
}

.uhc-cmpt .uhc-cmpt__lab td {
	padding: 9px 14px 5px;
	border-top: 1px solid var(--uhcc-line);
	background: var(--uhcc-tint);
	color: #2f3b4f;
	font: 600 13px/1.35 Onest, sans-serif;
}

.uhc-cmpt .uhc-cmpt__lab td span {
	position: sticky;
	left: 14px;
}

.uhc-cmpt .uhc-cmpt__val td {
	padding: 8px 14px 12px;
	font-size: 14.5px;
	overflow-wrap: anywhere;
}

.uhc-cmpt .uhc-cmpt__val.is-same td {
	color: var(--uhcc-ink3);
}

@media (min-width: 1024px) {
	.uhc-cmpt .uhc-cmpt__table {
		width: max(100%, calc(var(--uhcc-name-w) + var(--cols) * 230px));
	}

	.uhc-cmpt .uhc-cmpt__table .uhc-cmpt__lab {
		display: none;
	}

	/* 1.49.11: колонку при гортанні ставить до правого краю колонки назв, а
	   не під неї — інакше між назвами й першою карткою визирав шматок
	   попередньої. */
	.uhc-cmpt .uhc-cmpt__scroll {
		scroll-padding-left: var(--uhcc-name-w);
	}

	.uhc-cmpt .uhc-cmpt__table .uhc-cmpt__name,
	.uhc-cmpt .uhc-cmpt__table .uhc-cmpt__corner {
		display: table-cell;
		position: sticky;
		left: 0;
		z-index: 2;
		width: var(--uhcc-name-w);
		border-right: 1px solid var(--uhcc-line);
		background: #fbfcfe;
		text-align: left;
	}

	.uhc-cmpt .uhc-cmpt__table .uhc-cmpt__name {
		padding: 12px 14px;
		border-top: 1px solid var(--uhcc-line2);
		color: #2f3b4f;
		font: 500 13.5px/1.4 Onest, sans-serif;
		overflow-wrap: anywhere;
	}

	.uhc-cmpt .uhc-cmpt__val.is-same .uhc-cmpt__name {
		color: var(--uhcc-ink3);
	}

	.uhc-cmpt .uhc-cmpt__table .uhc-cmpt__corner {
		vertical-align: bottom;
		padding: 16px 14px 14px;
	}

	.uhc-cmpt .uhc-cmpt__cornert {
		color: var(--uhcc-ink3);
		font: 700 12px/1.3 Onest, sans-serif;
		letter-spacing: .05em;
		text-transform: uppercase;
	}

	.uhc-cmpt .uhc-cmpt__table .uhc-cmpt__name + td,
	.uhc-cmpt .uhc-cmpt__table .uhc-cmpt__corner + th {
		border-left: 0;
	}

	.uhc-cmpt .uhc-cmpt__val td {
		padding: 12px 14px;
		border-top: 1px solid var(--uhcc-line2);
	}

	/* Липка смуга: перша доріжка — під колонку назв; куток над нею стоїть,
	   поки доріжка товарів їде вбік. */
	.uhc-cmpt .uhc-cmpt__track {
		grid-template-columns: var(--uhcc-name-w) repeat(var(--cols), minmax(0, 1fr));
	}

	.uhc-cmpt .uhc-cmpt__mc--name {
		display: block;
	}

	.uhc-cmpt .uhc-cmpt__minicorner {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: var(--uhcc-name-w);
		border-right: 1px solid var(--uhcc-line);
		background: #fbfcfe;
	}

	/* 1.49.3: фото в смузі — на висоту назви й рядка ціни, смуга не вищає. */
	.uhc-cmpt .uhc-cmpt__mc {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 2px 12px;
	}

	.uhc-cmpt .uhc-cmpt__mc img {
		width: 72px;
		height: 72px;
	}
}

.uhc-cmpt .uhc-cmpt__val td.is-diff {
	font-weight: 600;
}

.uhc-cmpt.is-diff-only .is-same {
	display: none;
}

@media (max-width: 767.98px) {
	.uhc-cmpt .uhc-cmpt__table {
		/* 1.49.6: дві колонки й краєчок третьої (44% рамки на колонку) —
		   видно, що далі є ще; без одиниць контейнера — від вікна. */
		width: calc(var(--cols) * (100vw - 32px) * .44);
		width: calc(var(--cols) * 44cqw);
	}

	/* 1.49.7: ціна й кнопка — в одному рядку, як на комп'ютері; щоб число з
	   «грн» влізло поруч із кнопкою у вузьку колонку, «грн» — під числом
	   (у всіх колонках однаково, без переносу лише в частині). «За запитом»
	   може лягти у два рядки — висота та сама, що в кнопки. Місце під ряд:
	   14 + 44 (кнопка) + 12; зі старою ціною над числом ряд вищий за кнопку —
	   14 + 52 + 12. */
	.uhc-cmpt .uhc-cmpt__prod:not(.uhc-cmpt__add) {
		padding-bottom: 70px;
	}

	.uhc-cmpt .uhc-cmpt__table--old .uhc-cmpt__prod:not(.uhc-cmpt__add) {
		padding-bottom: 78px;
	}

	.uhc-cmpt .uhc-cmpt__prod .uhc-cmpt__price .uhc-cur {
		display: block;
		margin: 2px 0 0;
		line-height: 1;
	}

	.uhc-cmpt .uhc-cmpt__prod .uhc-cmpt__price--ask {
		white-space: normal;
		font-size: 14px;
		line-height: 1.25;
	}

	/* Точки над таблицею (1.49.6): скільки товарів і які зараз на екрані;
	   показує скрипт, лише коли таблицю є куди гортати. Кнопка 24×24 —
	   зона натиску, видима точка — 8px. */
	.uhc-cmpt .uhc-cmpt__dots:not([hidden]) {
		display: flex;
		justify-content: center;
		gap: 2px;
		margin: 0 0 6px;
	}

	.uhc-cmpt .uhc-cmpt__dot {
		display: grid;
		place-items: center;
		width: 24px;
		height: 24px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.uhc-cmpt .uhc-cmpt__dot::before {
		content: "";
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #cdd6e3;
		transition: background-color .15s ease, transform .15s ease;
	}

	.uhc-cmpt .uhc-cmpt__dot.is-on::before {
		background: var(--uhcc-blue);
		transform: scale(1.15);
	}

	.uhc-cmpt .uhc-cmpt__dot:focus-visible {
		outline: none;
		border-radius: 6px;
		box-shadow: var(--uhcc-ring);
	}

	.uhc-cmpt .uhc-cmpt__ph {
		height: 96px;
	}

	.uhc-cmpt .uhc-cmpt__ph img {
		max-height: 96px;
	}

	/* Фото нижче (96) — стікер менший, щоб плашка + стікер вмістились. */
	.uhc-cmpt .uhc-pcard__stickers .uhl-sticker--image .uhl-sticker__img {
		max-width: 40px;
		max-height: 40px;
	}

	.uhc-cmpt .uhc-cmpt__price {
		font-size: 17px;
	}

	.uhc-cmpt .uhc-cmpt__mc {
		grid-template-columns: minmax(0, 1fr);
		padding: 8px 10px;
	}

	.uhc-cmpt .uhc-cmpt__mc img {
		display: none;
	}

	.uhc-cmpt .uhc-cmpt__lab td span {
		left: 12px;
	}
}