.mrg-related-codes {
	margin-top: 2.5rem;
	padding: 2rem;
	background: linear-gradient(180deg, var(--mrg-related-bg-start, #f9fafb) 0%, var(--mrg-related-bg-end, #ffffff) 100%);
	border: 1px solid var(--mrg-related-border, #f3f4f6);
	border-radius: 1.5rem;
}

.mrg-related-codes-title {
	margin: 0 0 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--font-body);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--mrg-related-title, var(--miele-dark));
}

.mrg-related-codes-title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	background: var(--mrg-related-icon-bg, rgba(183, 28, 28, 0.1));
	color: var(--mrg-related-icon-color, var(--miele-red));
	flex-shrink: 0;
}

.mrg-related-codes-title-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.mrg-related-codes-title-icon-image {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	object-fit: contain;
}

.mrg-related-codes-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.mrg-related-codes-chip,
.guide-single-content .mrg-related-codes-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.625rem 1.25rem;
	background: var(--mrg-related-chip-bg, #ffffff);
	border: 2px solid var(--mrg-related-chip-border, #e5e7eb);
	border-radius: 9999px;
	font-family: var(--font-mono);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	color: var(--mrg-related-chip-text, var(--miele-red));
	text-decoration: none;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.mrg-related-codes-chip:hover,
.guide-single-content .mrg-related-codes-chip:hover {
	border-color: var(--mrg-related-chip-hover-border, var(--miele-red));
	background: var(--mrg-related-chip-hover-bg, #fef2f2);
}

.mrg-related-codes-empty {
	margin: 0;
	font-size: 0.95rem;
	color: #6b7280;
}

.mrg-related-codes-editor-list {
	max-height: 16rem;
	overflow: auto;
	padding-right: 0.4rem;
}