/**
 * The product page benefits list.
 *
 * A filled tick, a headline, and a supporting line under it. The headline
 * carries the claim and the line under it carries the substance, which is the
 * difference between "Lifetime color warranty" as a label and as a promise.
 */
.pearlory-benefits {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.pearlory-benefit {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.pearlory-benefit:last-child {
	margin-bottom: 0;
}

/* a filled disc, so the ticks read as a set rather than as loose marks */
.pearlory-benefit__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	/* the 2px nudge sits the disc on the headline's cap height, not its line box */
	margin-top: 2px;
	background: var(--fs-color-primary, #009b9b);
	border-radius: 50%;
	color: #fff;
}

/* width and height together: Flatsome sets a min-width on inline svg in places,
   which stretched an icon to 24x39 earlier in this project */
.pearlory-benefit__tick {
	width: 11px;
	height: 11px;
	min-width: 11px;
	min-height: 11px;
}

.pearlory-benefit__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pearlory-benefit__headline {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: #1f1f1f;
}

.pearlory-benefit__detail {
	font-size: 13px;
	line-height: 1.45;
	color: #5c5c5c;
}