.th-po-reference {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	gap: 15px;
	align-items: center;
	width: 100%;
	margin: 0 0 26px;
	padding: 16px 18px;
	border: 1px solid #bcd9d6;
	border-left: 4px solid #00736a;
	border-radius: 15px;
	color: #063b39;
	background: #f1f9f8;
	box-shadow: 0 8px 24px rgba(6, 59, 57, 0.06);
}

.th-po-reference__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 13px;
	color: #fff;
	background: #00736a;
	font-size: 0.78rem;
	font-weight: 900;
	letter-spacing: 0.06em;
}

.th-po-reference__copy {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.th-po-reference__label {
	color: #4e6d6b;
	font-size: 0.72rem;
	font-weight: 850;
	letter-spacing: 0.065em;
	line-height: 1.3;
	text-transform: uppercase;
}

.th-po-reference__value {
	overflow-wrap: anywhere;
	color: #063b39;
	font-size: clamp(1.08rem, 2vw, 1.3rem);
	font-weight: 850;
	line-height: 1.25;
}

.th-po-reference__note {
	max-width: 240px;
	color: #587270;
	font-size: 0.8rem;
	line-height: 1.45;
	text-align: right;
}

.th-po-order-reference {
	display: inline-flex;
	align-items: center;
	max-width: 210px;
	padding: 6px 9px;
	overflow-wrap: anywhere;
	border: 1px solid #bcd9d6;
	border-radius: 8px;
	color: #005f58;
	background: #f1f9f8;
	font-size: 0.82rem;
	font-weight: 800;
	line-height: 1.25;
}

.th-po-order-reference--empty {
	border-color: transparent;
	color: #839391;
	background: transparent;
	font-weight: 600;
}

@media (max-width: 680px) {
	.th-po-reference {
		grid-template-columns: 44px minmax(0, 1fr);
		padding: 15px;
	}

	.th-po-reference__icon {
		width: 44px;
		height: 44px;
	}

	.th-po-reference__note {
		grid-column: 1 / -1;
		max-width: none;
		text-align: left;
	}
}