/* stylelint-disable selector-class-pattern -- BEM elements follow the existing scoped CK convention. */
.ckava-product-service-note {
	margin-block-start: 1.5rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--ckava-color-border);
	color: var(--ckava-color-forest);
	font-size: 0.875rem;
	line-height: 1.65;
}

.ckava-product-service-note p {
	margin-block: 0 0.5rem;
}

.ckava-product-service-note a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 44px;
	font-weight: 600;
}

.ckava-buying-guide {
	max-inline-size: none;
	background: transparent;
	overflow-wrap: anywhere;
}

.ckava-buying-guide__intro {
	max-inline-size: 46rem;
	margin-block-end: 2.5rem;
}

.ckava-buying-guide__intro h2 {
	margin-block: 0 1rem;
}

.ckava-buying-guide__intro p {
	color: var(--ckava-color-forest);
}

.ckava-buying-guide__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 3rem;
}

.ckava-buying-guide__panel {
	min-inline-size: 0;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--ckava-color-border);
	background: transparent;
}

.ckava-buying-guide__panel h3 {
	margin-block: 0 1rem;
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	line-height: 1.3;
}

.ckava-buying-guide__panel :is(ul, ol) {
	padding-inline-start: 1.25rem;
	margin-block: 0 1rem;
}

.ckava-buying-guide__panel li {
	margin-block-end: 0.75rem;
	line-height: 1.65;
}

.ckava-buying-guide__reference {
	margin-block: 0 1rem;
}

.ckava-buying-guide__reference > div {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 1rem;
	padding-block: 0.75rem;
	border-block-end: 1px solid var(--ckava-color-border);
}

.ckava-buying-guide__reference dt {
	font-weight: 600;
}

.ckava-buying-guide__reference dd {
	margin: 0;
}

.ckava-buying-guide__note {
	color: var(--ckava-color-forest);
	font-size: 0.875rem;
	line-height: 1.65;
}

.ckava-buying-guide__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: 2rem;
}

.ckava-buying-guide__actions .ckava-button {
	min-block-size: 44px;
	white-space: normal;
	text-align: center;
}

@media (width <= 640px) {
	.ckava-buying-guide__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.ckava-buying-guide__reference > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.35rem;
	}

	.ckava-buying-guide__actions .ckava-button {
		inline-size: 100%;
	}
}