.charity-pm {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* Scoped through .charity-pm so Elementor's Global Kit link/button styling
   can't override the widget's own colour controls. */
.charity-pm .charity-pm__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #123c2e;
	text-decoration: none;
	line-height: 1.4;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.charity-pm a.charity-pm__item:hover {
	text-decoration: none;
}

.charity-pm__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	flex-shrink: 0;
}
.charity-pm__icon svg {
	width: 16px;
	height: 16px;
	display: block;
	fill: currentColor;
}

/* Prefix / value / suffix sit in their own flex row so the gap between them
   is controllable without relying on literal spaces in the markup. */
.charity-pm__text {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	flex-wrap: wrap;
}

/* Both separator kinds are flex-centred boxes. A plain inline character would
   sit on the text baseline instead, which reads as slightly off-centre next to
   items whose line box is taller because they contain an icon. `line-height: 1`
   drops the extra leading that otherwise pushes the glyph off centre. */
.charity-pm__sep {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: #c7d2cc;
	user-select: none;
	flex-shrink: 0;
}
.charity-pm__sep--icon svg {
	width: 10px;
	height: 10px;
	display: block;
	fill: currentColor;
}

/* ── Two-line (stacked) items ───────────────────────────────
   A second line turns the item into a block: icon on the left,
   centred against both lines rather than against the first. */
.charity-pm__item--stacked {
	align-items: center;
}

.charity-pm__item--stacked .charity-pm__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.charity-pm__secondary {
	display: block;
	line-height: 1.3;
}

/* ── Line separator ── */
.charity-pm__sep--line {
	/* Height, thickness, radius and vertical alignment are all Style
	   controls. Deliberately no height here: "Stretch" works by Elementor
	   omitting the height rule, and a hardcoded one would beat it. */
	flex: none;
	align-self: center;
	width: 1px;
	background-color: currentColor;
}