.pbt-achievement-detail {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	background: #fafafa;
}

.pbt-achievement-detail__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 0 0 0.75rem;
}

.pbt-achievement-detail__heading {
	margin: 0;
}

.pbt-achievement-detail__all-link {
	font-size: 0.85rem;
	white-space: nowrap;
}

.pbt-achievement-detail__empty {
	color: #666;
	margin: 0;
}

.pbt-achievement-detail__item {
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	padding: 0.75rem 1rem;
	background: #fff;
	margin: 0 0 1.25rem;
}

.pbt-achievement-detail__item-row {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.pbt-achievement-detail__icon-col {
	flex: 0 0 110px;
	width: 110px;
	display: flex;
	justify-content: center;
}

.pbt-achievement-detail__icon {
	width: 110px;
	height: 110px;
	object-fit: contain;
	border-radius: 6px;
}

.pbt-achievement-detail__title-desc {
	flex: 1 1 auto;
	min-width: 0;
}

.pbt-achievement-detail__title {
	font-size: 1.15rem;
	font-weight: 700;
}

.pbt-achievement-detail__description {
	color: #444;
}

.pbt-achievement-detail__count-line {
	margin: 0.4rem 0 0;
	color: #666;
	font-size: 0.9rem;
}

.pbt-achievement-detail__percentage {
	flex: 0 0 auto;
	font-size: 1.75rem;
	font-weight: 800;
	color: #1e1e1e;
}

/* Small viewports: stack image, then title/description, then percentage,
   instead of the desktop three-column row — DOM order already matches
   (icon-col, title-desc, percentage), so only the flex direction and each
   piece's own width/alignment need to change here. */
@media (max-width: 600px) {
	.pbt-achievement-detail__item-row {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.pbt-achievement-detail__icon-col {
		flex: 0 0 auto;
		width: auto;
	}

	.pbt-achievement-detail__title-desc {
		width: 100%;
		text-align: left;
	}
}

.pbt-achievement-detail__holders-heading {
	margin: 0 0 0.5rem;
}

.pbt-achievement-detail__holders {
	width: 100%;
	border-collapse: collapse;
}

.pbt-achievement-detail__holders th,
.pbt-achievement-detail__holders td {
	text-align: left;
	padding: 0.4rem 0.6rem;
	border-bottom: 1px solid #e2e2e2;
}

.pbt-achievement-detail__holders th {
	font-size: 0.8rem;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0;
}

.pbt-achievement-detail__sort-btn {
	background: none;
	border: none;
	cursor: pointer;
	font: inherit;
	font-size: 0.8rem;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.4rem 0.6rem;
	width: 100%;
	text-align: left;
}

.pbt-achievement-detail__sort-btn:hover {
	color: #1e1e1e;
}

.pbt-achievement-detail__sort-indicator {
	font-size: 0.7rem;
}