/**
 * PeppyFlora — Product Page Benefit Badges
 * Styles for the .pf-benefits block rendered by pf_render_product_benefit_badges()
 * in pf-benefit-badges.php.
 *
 * Layout: single horizontal row, icon-beside-text, three equal columns.
 * No dividers — the colored icon circles provide enough separation on
 * their own.
 *
 * Icon color is set once on .pf-benefits__icon via `color`, and every SVG
 * inherits it through stroke/fill="currentColor" — change brand color in
 * one place below.
 */

:root {
	--pf-benefits-brand: #243f2f; /* PeppyFlora brand green — single source of truth for icon color */
	--pf-benefits-icon-bg: #E4F1E8; /* soft tint of brand green, used as the icon circle background */
	--pf-benefits-text: #3A3A34; /* badge label color */
}

.pf-benefits {
	display: flex;
	align-items: stretch;
	padding: 5px 0;
	margin: 5px 0;
}

.pf-benefits__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1;
	padding: 0 8px;
	min-width: 0; /* allows text to wrap instead of forcing row overflow on narrow screens */
}

.pf-benefits__item:first-child {
	padding-left: 0;
}

.pf-benefits__item:last-child {
	padding-right: 0;
}

.pf-benefits__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	flex-shrink: 0; /* icon must never shrink, only text wraps */
	background: var(--pf-benefits-icon-bg);
	color: var(--pf-benefits-brand);
}

.pf-benefits__icon svg {
	width: 30px;
	height: 30px;
}

.pf-benefits__text {
	font-size: 10.5px;
	line-height: 1.25;
	font-weight: 500;
	color: var(--pf-benefits-text);
	text-align: left;
	min-width: 0; /* same overflow guard as the parent, for the flex child itself */
	overflow-wrap: break-word; /* safety net if a future label edit is longer than expected */
}