/**
 * Trust bar: template-parts/trust-bar.php.
 * Mobile (2288:1183): four full-width rows. 768-1279: 2 x 2 grid.
 * Desktop (2060:109): one row, items spread across the container; below
 * 1660 the items shrink and their labels may wrap to two lines.
 */

.trust-bar {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.trust-bar__item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 10px 12px 10px 10px;
	border-radius: var(--radius-pill);
	background: var(--color-cream);
	color: var(--color-ink);
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
}

.trust-bar__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-green);
	color: var(--color-white);
}

.trust-bar__label {
	min-width: 0;
}

@media (min-width: 768px) {
	.trust-bar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.trust-bar {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 4px; /* minimum only: 4 pills (1257px) + gaps must fit the 1280 container */
	}

	.trust-bar__item {
		flex: 0 1 auto;
		gap: 12px;
		padding: 14px 20px 14px 16px;
		color: var(--color-black);
		font-size: var(--text-label-m);
		letter-spacing: 0;
		line-height: var(--leading-label-m);
	}

	.trust-bar__icon {
		width: 36px;
		height: 36px;
	}
}

/* Line (product page trust points 2162:750): Body/S in ink, an 8px dot
 * before each label (green, orange, yellow), 20px between the items. */
.trust-line {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--color-ink);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.trust-line__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.trust-line__item::before {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-green);
	content: "";
}

.trust-line__item:nth-child(3n + 2)::before {
	background: var(--color-orange);
}

.trust-line__item:nth-child(3n)::before {
	background: var(--color-yellow);
}