.kcl-link {
	text-decoration: underline;
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
	color: #1d7a45;
	font-weight: 600;
}

.kcl-related {
	margin: 2.5em 0 1em;
	padding: 1.2em;
	border: 1px solid rgba( 29, 122, 69, .22 );
	border-radius: 14px;
	background: rgba( 29, 122, 69, .05 );
}

.kcl-related__title {
	margin: 0 0 .9em;
	font-size: 1.05em;
	font-weight: 700;
}

.kcl-related__list {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
	gap: .8em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kcl-card a {
	display: flex;
	align-items: center;
	gap: .7em;
	padding: .6em;
	border: 1px solid rgba( 120, 120, 120, .2 );
	border-radius: 12px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}

.kcl-card a:hover,
.kcl-card a:focus-visible {
	border-color: rgba( 29, 122, 69, .5 );
	transform: translateY( -1px );
}

.kcl-card__img {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 9px;
	object-fit: cover;
}

.kcl-card__body { display: flex; flex-direction: column; gap: .2em; min-width: 0; }
.kcl-card__name { font-size: .95em; line-height: 1.6; }
.kcl-card__price { font-size: .9em; font-weight: 700; color: #1d7a45; }
.kcl-card__price del { opacity: .55; font-weight: 400; }

@media ( prefers-color-scheme: dark ) {
	.kcl-link,
	.kcl-card__price { color: #6ee7a8; }
	.kcl-card a { background: rgba( 255, 255, 255, .04 ); }
	.kcl-related { border-color: rgba( 110, 231, 168, .25 ); background: rgba( 110, 231, 168, .07 ); }
}

/* The medical note under every article. Quiet by design: a loud box on five
   hundred pages is a box nobody reads. */
.kcl-note {
	margin: 2rem 0 0;
	padding: 1rem 1.1rem;
	border-radius: 10px;
	border: 1px solid #e3e8e5;
	background: #f7f9f8;
	font-size: 0.9rem;
	line-height: 2;
	color: #4a5550;
}

.kcl-note__title {
	margin: 0 0 0.35rem;
	font-weight: 700;
	font-size: 0.9rem;
	color: #2f3a35;
}

.kcl-note__text {
	margin: 0;
}

.kcl-note a {
	color: #1d7a45;
}

/* Links to other articles. Deliberately quieter than the product links: one is
   a suggestion to read on, the other is a thing for sale, and the reader should
   be able to tell which is which before clicking. */
.kcl-post-link {
	color: #2f3a35;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
}

.kcl-post-link:hover {
	color: #1d7a45;
	text-decoration-style: solid;
}