/*
 * uhl_customer_account — смуга «В обраному» і повідомлення «Додано в обране» на сторінках із кнопкою теми (marks.twig).
 * Копія вигляду uhl_home (showcase.css, 2.97.25) під власним коренем .uxa-mk: жетони — на ньому, не на :root.
 * Відступ від «чубчика» — ДВОМА деклараціями, а не env(…, 0px): мініфікатор бою скорочує 0px усередині calc().
 */
.uxa-mk {
	--mk-blue: #1f4f9e;
	--mk-ink: #16243a;
	--mk-ink3: #3c4859;
	--mk-mut: #5b6779;
	--mk-red: #c72c2c;
	--mk-line: #e4e9f0;
	--mk-dur: 180ms;
	--mk-ease: cubic-bezier(.4, 0, .2, 1);
	font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.uxa-mk[hidden], .uxa-mk [hidden] { display: none !important; }
.uxa-mk__ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.uxa-mk__ic--x { stroke-width: 2.4; }

/* Смуга: по центру знизу; порожня кліків не ловить. */
.uxa-mk__dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom));
	z-index: 1100;
	display: flex;
	justify-content: center;
	padding: 0 12px;
	pointer-events: none;
}
.uxa-mk__dock > * { pointer-events: auto; }
/* Червоний — темніший відтінок «акції»: білий текст читається (контраст ≥ 4,5:1). */
.uxa-mk__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px 9px 16px;
	border-radius: 14px;
	background: var(--mk-red);
	color: #fff;
	box-shadow: 0 18px 40px -18px rgba(11, 22, 38, .75);
}
.uxa-mk__n { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.uxa-mk__n .uxa-mk__ic { width: 20px; height: 20px; }
.uxa-mk__n b { font-size: 16px; }
.uxa-mk__short { display: none; }
.uxa-mk__note { font-size: 13px; color: rgba(255, 255, 255, .88); white-space: nowrap; }
.uxa-mk__go {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border-radius: 10px;
	background: #fff;
	color: var(--mk-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--mk-dur) var(--mk-ease);
}
.uxa-mk__go:hover, .uxa-mk__go:focus { background: #eef3fb; color: var(--mk-ink); text-decoration: none; }
.uxa-mk__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);
	cursor: pointer;
}
.uxa-mk__x:hover { color: #fff; }
.uxa-mk__x .uxa-mk__ic { width: 16px; height: 16px; }
/* Фокус з клавіатури — кільцем через box-shadow: FilterVier гасить outline на всьому сайті. */
.uxa-mk__go:focus-visible, .uxa-mk__x:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); }

@media (max-width: 1199px) {
	/* Кнопка дзвінка теми ховалась би під смугою — піднімаємо, поки смуга видима. */
	body.uxa-mk-on .floating_contacts { bottom: 89px; bottom: calc(89px + env(safe-area-inset-bottom)); }
	.uxa-mk__note { display: none; }
}
@media (max-width: 767px) {
	.uxa-mk__dock { padding: 0 8px; }
	.uxa-mk__bar { gap: 6px; padding: 7px 6px 7px 10px; }
	.uxa-mk__n { gap: 5px; font-size: 13px; }
	.uxa-mk__long { display: none; }
	.uxa-mk__short { display: inline; }
	.uxa-mk__go { height: 36px; padding: 0 10px; font-size: 13px; }
	.uxa-mk__x { height: 36px; min-width: 32px; padding: 0 4px; }
}

/* Повідомлення «додано»: по центру над смугою (bottom ставить скрипт). Не показане — прозоре, кліків не ловить. */
.uxa-mk__toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom));
	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(--mk-line);
	border-radius: 14px;
	background: #fff;
	color: var(--mk-ink);
	box-shadow: 0 18px 40px -18px rgba(11, 22, 38, .55);
	opacity: 0;
	transform: translate(-50%, 8px);
	pointer-events: none;
	transition: opacity var(--mk-dur) var(--mk-ease), transform var(--mk-dur) var(--mk-ease);
}
.uxa-mk__toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.uxa-mk__msg { display: flex; align-items: center; gap: 10px; min-width: 0; }
.uxa-mk__toast.is-wide .uxa-mk__msg { align-items: flex-start; }
.uxa-mk__badge {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--mk-red);
	color: #fff;
}
.uxa-mk__badge .uxa-mk__ic { width: 17px; height: 17px; }
.uxa-mk__body { min-width: 0; padding-top: 6px; }
.uxa-mk__title { font-size: 14px; font-weight: 600; line-height: 1.4; }
.uxa-mk__text { margin: 4px 0 10px; font-size: 13px; line-height: 1.45; color: var(--mk-ink3); }
.uxa-mk__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.uxa-mk__btn {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	border-radius: 10px;
	background: var(--mk-blue);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.uxa-mk__btn:hover, .uxa-mk__btn:focus { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .12); color: #fff; text-decoration: none; }
.uxa-mk__link { font-size: 13px; font-weight: 600; color: var(--mk-blue); text-decoration: underline; text-underline-offset: 2px; }
.uxa-mk__link:hover { color: var(--mk-ink); }
.uxa-mk__close {
	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(--mk-mut);
	cursor: pointer;
}
.uxa-mk__close:hover { color: var(--mk-ink); }
.uxa-mk__close .uxa-mk__ic { width: 14px; height: 14px; }
.uxa-mk__btn:focus-visible, .uxa-mk__link:focus-visible, .uxa-mk__close:focus-visible { box-shadow: 0 0 0 3px rgba(0, 113, 227, .35); }

@media (prefers-reduced-motion: reduce) { .uxa-mk__toast { transition: none; } }
@media print { .uxa-mk { display: none !important; } }