/* Out-of-stock product page: the part that replaces a dead end. */

.kr-block {
	margin: 1em 0 0;
}

.kr-note {
	margin: 0 0 .9em;
	padding: .65em .85em;
	border-radius: 8px;
	background: rgba( 120, 120, 120, .1 );
	font-size: .95em;
	line-height: 1.8;
}

.kr-alts {
	margin-top: 1em;
	padding-top: .9em;
	border-top: 1px solid rgba( 120, 120, 120, .22 );
}

.kr-alts__title {
	margin: 0 0 .7em;
	font-weight: 700;
	font-size: 1em;
}

.kr-alts__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .5em;
}

.kr-alt__link {
	display: flex;
	align-items: center;
	gap: .7em;
	padding: .5em;
	border: 1px solid rgba( 120, 120, 120, .22 );
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.kr-alt__link:hover,
.kr-alt__link:focus-visible {
	border-color: rgba( 29, 122, 69, .5 );
	background: rgba( 29, 122, 69, .06 );
}

.kr-alt__img {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: cover;
}

.kr-alt__body {
	display: flex;
	flex-direction: column;
	gap: .15em;
	min-width: 0;
}

.kr-alt__name {
	font-size: .95em;
	line-height: 1.6;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kr-alt__price {
	font-size: .9em;
	font-weight: 700;
	color: #1d7a45;
}

.kr-alt__price del { opacity: .55; font-weight: 400; }

@media ( prefers-color-scheme: dark ) {
	.kr-alt__price { color: #6ee7a8; }
	.kr-alt__link:hover,
	.kr-alt__link:focus-visible { background: rgba( 110, 231, 168, .1 ); }
}