.nd-compare,
.nd-compare-bar,
.nd-compare-current,
[data-nd-compare-card] {
	--nd-compare-accent: var(--theme-button-background-initial-color);
	--nd-compare-accent-hover: var(--theme-button-background-hover-color);
	--nd-compare-accent-text: var(--theme-button-text-initial-color);
	--nd-compare-accent-text-hover: var(--theme-button-text-hover-color, var(--theme-button-text-initial-color));
	--nd-compare-heading: var(--theme-headings-color);
	--nd-compare-text: var(--theme-text-color);
	--nd-compare-muted: color-mix(in srgb, var(--theme-text-color) 68%, var(--theme-palette-color-8));
	--nd-compare-border: var(--theme-border-color);
	--nd-compare-surface: color-mix(in srgb, var(--theme-palette-color-8) 94%, transparent);
	--nd-compare-surface-strong: var(--theme-palette-color-8);
	--nd-compare-surface-muted: color-mix(in srgb, var(--theme-palette-color-7) 74%, var(--theme-palette-color-8));
	--nd-compare-highlight: color-mix(in srgb, var(--theme-palette-color-1) 12%, var(--theme-palette-color-8));
	--nd-compare-shadow: var(--theme-box-shadow, 0 18px 50px color-mix(in srgb, var(--theme-text-color) 16%, transparent));
	--nd-compare-radius: var(--theme-form-field-border-radius, 14px);
	color: var(--nd-compare-text);
	font-family: var(--theme-font-family);
}

html[data-theme="dark"] .nd-compare,
html[data-theme="dark"] .nd-compare-bar,
html[data-theme="dark"] .nd-compare-current,
html[data-theme="dark"] [data-nd-compare-card] {
	--nd-compare-heading: var(--nd-dark-heading, var(--theme-headings-color));
	--nd-compare-text: var(--nd-dark-text, var(--theme-text-color));
	--nd-compare-muted: var(--nd-dark-muted, var(--theme-palette-color-5));
	--nd-compare-border: var(--nd-dark-border, var(--theme-border-color));
	--nd-compare-surface: var(--nd-dark-surface, var(--theme-palette-color-8));
	--nd-compare-surface-strong: var(--nd-dark-surface-strong, var(--theme-palette-color-8));
	--nd-compare-surface-muted: var(--nd-dark-surface-soft, var(--theme-palette-color-7));
	--nd-compare-shadow: var(--nd-dark-shadow, var(--theme-box-shadow));
}

.nd-compare-add,
.nd-compare-bar__link,
.nd-compare-table__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: var(--theme-button-min-height, 44px);
	padding: 10px 18px;
	border: 1px solid color-mix(in srgb, var(--nd-compare-accent) 72%, var(--nd-compare-border));
	border-radius: var(--nd-compare-radius);
	background: var(--nd-compare-accent);
	color: var(--nd-compare-accent-text) !important;
	box-shadow: var(--theme-button-shadow, none);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.nd-compare-add:hover,
.nd-compare-add:focus-visible,
.nd-compare-bar__link:hover,
.nd-compare-bar__link:focus-visible,
.nd-compare-table__cta:hover,
.nd-compare-table__cta:focus-visible {
	border-color: var(--nd-compare-accent-hover);
	background: var(--nd-compare-accent-hover);
	color: var(--nd-compare-accent-text-hover) !important;
	box-shadow: var(--theme-button-shadow, var(--nd-compare-shadow));
	transform: translateY(-1px);
}

.nd-compare-add:focus-visible,
.nd-compare-bar__link:focus-visible,
.nd-compare-table__cta:focus-visible,
.nd-compare__view-toggle button:focus-visible,
.nd-compare__clear:focus-visible,
.nd-compare-table__remove:focus-visible,
.nd-compare-table__link:focus-visible {
	outline: 2px solid var(--nd-compare-accent);
	outline-offset: 3px;
}

.nd-compare-add.is-active {
	background: var(--nd-compare-highlight);
	color: var(--nd-compare-heading) !important;
}

.nd-compare-add:disabled {
	cursor: not-allowed;
	opacity: .5;
	transform: none;
}

.nd-compare-current {
	margin-block: 18px;
}

.nd-compare-visual-host {
	position: relative;
}

.nd-compare-current--hero {
	position: absolute;
	z-index: 4;
	inset-inline-start: clamp(12px, 2vw, 24px);
	top: clamp(12px, 2vw, 24px);
	margin: 0;
	pointer-events: none;
}

.nd-compare-current--hero .nd-compare-add {
	min-height: 40px;
	padding: 9px 15px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	pointer-events: auto;
}

.nd-product-card > .nd-compare-add {
	box-sizing: border-box;
	width: 100%;
	margin-top: 12px;
	min-height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(135deg, #13bfe9 0%, #0fb1d8 100%);
	box-shadow: 0 10px 22px rgba(19, 191, 233, 0.22);
	color: #ffffff !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	transition: box-shadow .18s ease, filter .18s ease, transform .18s ease;
}

.nd-product-card > .nd-compare-add.is-active {
	background: linear-gradient(135deg, #087f9f 0%, #066984 100%);
	box-shadow: 0 10px 22px rgba(6, 105, 132, 0.28);
	color: #ffffff !important;
}

.nd-product-card > .nd-compare-add:hover,
.nd-product-card > .nd-compare-add:focus-visible {
	background: linear-gradient(135deg, #13bfe9 0%, #0fb1d8 100%);
	box-shadow: 0 12px 26px rgba(19, 191, 233, 0.28);
	color: #ffffff !important;
	filter: brightness(1.04);
}

.nd-product-card > .nd-compare-add.is-active:hover,
.nd-product-card > .nd-compare-add.is-active:focus-visible {
	background: linear-gradient(135deg, #076f8c 0%, #055b73 100%);
	box-shadow: 0 12px 26px rgba(5, 91, 115, 0.34);
	color: #ffffff !important;
	filter: brightness(1.03);
}

.nd-compare-bar {
	position: fixed;
	z-index: 9990;
	inset-inline-start: max(24px, env(safe-area-inset-left));
	bottom: max(24px, env(safe-area-inset-bottom));
	display: block;
	max-width: calc(100vw - 48px);
	color: var(--nd-compare-text);
}

.nd-compare-bar[hidden] {
	display: none !important;
}

.nd-compare-bar__link {
	min-height: 46px;
	padding-inline: 17px;
	border-color: transparent;
	border-radius: 999px;
	background: var(--nd-callback-button-bg, var(--nd-compare-accent));
	color: var(--nd-callback-button-text, var(--nd-compare-accent-text)) !important;
	box-shadow: var(--nd-callback-button-shadow, var(--nd-compare-shadow));
	backdrop-filter: blur(18px) saturate(130%);
	-webkit-backdrop-filter: blur(18px) saturate(130%);
}

.nd-compare-bar__link:hover,
.nd-compare-bar__link:focus-visible {
	background: var(--nd-callback-button-bg-hover, var(--nd-compare-accent-hover));
	color: var(--nd-callback-button-text, var(--nd-compare-accent-text-hover)) !important;
}

.nd-compare {
	max-width: 100%;
	padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.nd-compare__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.nd-compare__view-toggle {
	display: flex;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--nd-compare-border);
	border-radius: var(--nd-compare-radius);
	background: var(--nd-compare-surface-muted);
}

.nd-compare__view-toggle button,
.nd-compare__clear {
	padding: 9px 13px;
	border: 0;
	border-radius: calc(var(--nd-compare-radius) - 3px);
	background: transparent;
	color: var(--nd-compare-text) !important;
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}

.nd-compare__view-toggle button.is-active {
	background: var(--nd-compare-surface-strong);
	color: var(--nd-compare-heading);
	box-shadow: var(--nd-compare-shadow);
}

.nd-compare__clear,
.nd-compare-table__remove {
	color: var(--nd-compare-accent-hover) !important;
}

.nd-compare__message {
	margin-block: 12px;
	color: var(--nd-compare-muted);
}

.nd-compare__viewport {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--nd-compare-border);
	border-radius: var(--nd-compare-radius);
	background: var(--nd-compare-surface);
	box-shadow: var(--nd-compare-shadow);
}

.nd-compare-table {
	width: max-content;
	min-width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	color: var(--nd-compare-text);
}

.nd-compare-table th,
.nd-compare-table td {
	min-width: 230px;
	padding: 14px;
	border-inline-end: 1px solid var(--nd-compare-border);
	border-bottom: 1px solid var(--nd-compare-border);
	background: var(--nd-compare-surface-strong);
	text-align: start;
	vertical-align: top;
}

.nd-compare-table th:first-child,
.nd-compare-table td:first-child {
	position: sticky;
	z-index: 3;
	inset-inline-start: 0;
	min-width: 190px;
	max-width: 230px;
	background: var(--nd-compare-surface-muted);
}

.nd-compare-table thead th {
	position: sticky;
	z-index: 2;
	top: 0;
}

.nd-compare-table thead th:first-child {
	z-index: 4;
}

.nd-compare-table__system .nd-compare-table__platform-image {
	display: block;
	width: 100%;
	height: 138px;
	margin-bottom: 12px;
	border-radius: calc(var(--nd-compare-radius) - 4px);
	background: var(--nd-compare-surface-muted);
	object-fit: contain;
}

.nd-compare-table__system > strong,
.nd-compare-table__system > span,
.nd-compare-table__system > a,
.nd-compare-table__system > button {
	display: block;
	margin: 0 0 8px;
}

.nd-compare-table__platform-name {
	color: var(--nd-compare-heading);
	font-family: var(--theme-headings-font-family, inherit);
	font-size: 1.12rem;
}

.nd-compare-table__configuration,
.nd-compare-table__price {
	color: var(--nd-compare-muted);
}

.nd-compare-table__payload {
	display: flex !important;
	align-items: center;
	gap: 9px;
	color: var(--nd-compare-heading);
	font-weight: 700;
}

.nd-compare-table__payload img {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border: 1px solid var(--nd-compare-border);
	border-radius: calc(var(--nd-compare-radius) - 6px);
	background: var(--nd-compare-surface-muted);
	object-fit: contain;
}

.nd-compare-badge {
	display: inline-flex !important;
	width: fit-content;
	padding: 5px 9px;
	border: 1px solid var(--nd-compare-border);
	border-radius: 999px;
	background: var(--nd-compare-surface-muted);
	color: var(--nd-compare-text);
	font-size: .77rem;
	font-weight: 750;
	line-height: 1.25;
}

.nd-compare-badge.is-confirmed {
	border-color: color-mix(in srgb, var(--nd-compare-accent) 60%, var(--nd-compare-border));
	background: var(--nd-compare-highlight);
	color: var(--nd-compare-heading);
}

.nd-compare-table__link {
	color: var(--nd-compare-accent) !important;
	font-weight: 650;
}

.nd-compare-table__link:hover,
.nd-compare-table__link:focus-visible {
	color: var(--nd-compare-accent-hover) !important;
}

.nd-compare-table__remove {
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}

.nd-compare-table__cta {
	width: 100%;
	margin-top: 4px !important;
	padding: 9px 12px;
	background: var(--nd-compare-accent) !important;
	color: var(--nd-compare-accent-text) !important;
	text-align: center;
}

.nd-compare-table__cta:hover,
.nd-compare-table__cta:focus-visible {
	background: var(--nd-compare-accent-hover) !important;
	color: var(--nd-compare-accent-text-hover) !important;
}

.nd-compare-table__group th {
	position: sticky;
	inset-inline-start: 0;
	z-index: 3;
	padding: 10px 14px;
	background: var(--nd-compare-surface-muted);
	color: var(--nd-compare-heading);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.nd-compare-table td.is-best {
	background: var(--nd-compare-highlight);
	color: var(--nd-compare-heading);
	font-weight: 700;
}

.nd-compare-table td.is-unknown {
	color: var(--nd-compare-muted);
	font-style: italic;
}

@media (max-width: 767px) {
	.nd-product-hero .nd-compare-current {
		align-self: stretch;
		margin: 12px 0 0;
		width: 100%;
	}

	.nd-product-hero .nd-compare-current .nd-compare-add {
		width: 100%;
	}

	.nd-compare-bar {
		inset-inline-start: max(12px, env(safe-area-inset-left));
		bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--shortcuts-bar-parent-height, var(--shortcuts-bar-height, 0px)) + var(--floating-bar-parent-height, var(--floating-bar-height, 0px)));
		max-width: calc(100vw - 24px);
	}

	.nd-compare-bar__link {
		min-height: 44px;
		padding-inline: 14px;
	}

	.nd-compare-current--hero {
		inset-inline-start: 10px;
		top: 10px;
	}

	.nd-compare-current--hero .nd-compare-add {
		min-height: 38px;
		padding: 8px 12px;
		font-size: .88rem;
	}

	.nd-compare__toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.nd-compare__view-toggle {
		width: 100%;
	}

	.nd-compare__view-toggle button {
		flex: 1;
	}

	.nd-compare-table th,
	.nd-compare-table td {
		box-sizing: border-box;
		width: 190px;
		min-width: 190px;
		max-width: 190px;
		padding: 12px;
		overflow-wrap: anywhere;
	}

	.nd-compare-table th:first-child,
	.nd-compare-table td:first-child {
		min-width: 120px;
		max-width: 120px;
		width: 120px;
	}

	.nd-compare-table__cta {
		display: block;
		padding-inline: 6px;
		white-space: normal;
	}

	.nd-compare-badge {
		display: block !important;
		box-sizing: border-box;
		width: 100%;
		text-align: center;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nd-compare-add,
	.nd-compare-bar__link,
	.nd-compare-table__cta {
		transition: none;
	}
}