.arc-tst-card {
	--tst-clr:var(--uicolor);

	position:relative;
	width:100%;
	min-width:0;
	min-height:300px;
	display:flex;
	flex-direction:column;
	padding:28px 25px 24px;
	overflow:hidden;
	border:1px solid color-mix(in srgb,var(--tst-clr) 12%,var(--diver));
	border-radius:18px;
	background:var(--surface-color);
	transition:
		transform var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);
}

.arc-tst-itm:nth-child(2) .arc-tst-card {
	--tst-clr:var(--uicolor2);
}

.arc-tst-itm:nth-child(3) .arc-tst-card {
	--tst-clr:var(--uicolor4);
}

.arc-tst-itm:nth-child(4) .arc-tst-card {
	--tst-clr:#8b5cf6;
}

.arc-tst-qte {
	position:relative;
	z-index:2;
	width:43px;
	height:43px;
	display:flex;
	flex:0 0 43px;
	align-items:center;
	justify-content:center;
	border-radius:13px;
	background:color-mix(in srgb,var(--tst-clr) 10%,var(--surface-color));
	color:var(--tst-clr);
	font-size:18px;
}

.arc-tst-stars {
	position:relative;
	z-index:2;
	display:flex;
	align-items:center;
	gap:3px;
	margin-top:18px;
	color:var(--rating-color);
	font-size:12px;
	line-height:1;
}

.arc-tst-txt {
	position:relative;
	z-index:2;
	min-width:0;
	margin-top:15px;
	color:var(--secondarytext);
	font-size:14px;
	line-height:1.9;
	overflow-wrap:anywhere;
}

.arc-tst-txt p {
	margin:0;
}

.arc-tst-txt p + p {
	margin-top:10px;
}

.arc-tst-inf {
	position:relative;
	z-index:2;
	min-width:0;
	display:flex;
	align-items:center;
	gap:11px;
	margin-top:auto;
	padding-top:22px;
	border-top:1px solid rgb(var(--primary-text-code) / 6%);
}

.arc-tst-ava {
	width:42px;
	height:42px;
	flex:0 0 42px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:color-mix(in srgb,var(--tst-clr) 10%,var(--surface-color));
	color:var(--tst-clr);
	font-size:17px;
}

.arc-tst-nam {
	min-width:0;
	display:flex;
	flex:1;
	flex-direction:column;
	gap:2px;
}

.arc-tst-nam strong,
.arc-tst-nam small {
	min-width:0;
	max-width:100%;
	overflow-wrap:anywhere;
}

.arc-tst-nam strong {
	color:var(--primary-text);
	font-size:14px;
	font-weight:600;
	line-height:1.5;
}

.arc-tst-nam small {
	color:var(--secondarytext);
	font-size:11px;
	font-weight:600;
	line-height:1.5;
}

@media (hover:hover) and (pointer:fine) {
	.arc-tst-card:hover {
		transform:translateY(-5px);
		border-color:color-mix(in srgb,var(--tst-clr) 28%,var(--surface-color));
		box-shadow:
			0 22px 48px color-mix(in srgb,var(--tst-clr) 10%,transparent);
	}
}

/* =========================
   Mobile App Experience
========================= */

@media only screen and (max-width:767px) {
	.arc-tst-card {
		min-height:285px;
		padding:20px 18px 19px;
		border-radius:16px;
	}

	.arc-tst-qte {
		width:40px;
		height:40px;
		flex-basis:40px;
		border-radius:12px;
		font-size:16px;
	}

	.arc-tst-stars {
		position:absolute;
		inset-inline-end:18px;
		top:34px;
		margin-top:0;
		gap:3px;
		font-size:12px;
	}

	.arc-tst-txt {
		margin-top:17px;
		font-size:14px;
		line-height:1.78;
	}

	.arc-tst-inf {
		gap:10px;
		padding-top:17px;
	}

	.arc-tst-ava {
		width:40px;
		height:40px;
		flex-basis:40px;
		font-size:16px;
	}

	.arc-tst-nam strong {
		font-size:14px;
		line-height:1.45;
	}

	.arc-tst-nam small {
		font-size:11.5px;
		line-height:1.45;
	}
}

/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:575px) {
	.arc-tst-card {
		min-height:278px;
		padding:18px 16px 17px;
		border-radius:15px;
	}

	.arc-tst-qte {
		width:38px;
		height:38px;
		flex-basis:38px;
		border-radius:11px;
		font-size:15px;
	}

	.arc-tst-stars {
		inset-inline-end:16px;
		top:31px;
	}

	.arc-tst-txt {
		margin-top:15px;
		font-size:13.5px;
		line-height:1.75;
	}

	.arc-tst-inf {
		padding-top:16px;
	}

	.arc-tst-ava {
		width:38px;
		height:38px;
		flex-basis:38px;
		font-size:15px;
	}

	.arc-tst-nam strong {
		font-size:13.5px;
	}

	.arc-tst-nam small {
		font-size:11px;
	}
}

@media only screen and (max-width:390px) {
	.arc-tst-card {
		min-height:270px;
		padding:16px 14px;
		border-radius:14px;
	}

	.arc-tst-qte {
		width:36px;
		height:36px;
		flex-basis:36px;
		border-radius:10px;
		font-size:14px;
	}

	.arc-tst-stars {
		inset-inline-end:14px;
		top:28px;
		font-size:11px;
	}

	.arc-tst-txt {
		margin-top:14px;
		font-size:13px;
		line-height:1.72;
	}

	.arc-tst-inf {
		gap:9px;
		padding-top:15px;
	}

	.arc-tst-ava {
		width:36px;
		height:36px;
		flex-basis:36px;
		font-size:14px;
	}

	.arc-tst-nam strong {
		font-size:13px;
	}

	.arc-tst-nam small {
		font-size:10.5px;
		line-height:1.4;
	}
}

@media (prefers-reduced-motion:reduce) {
	.arc-tst-card {
		transition:none;
	}
}