/*
 * Pop Commerce builder: content blocks added in F7 (perks list, heading accents, bold weight, leading field icon).
 *
 * Custom properties set by style props (style-props.json): --pc-cols, --pc-perk-ico, --pc-perk-ico-c, --pc-accent,
 * --pc-strong-w, --pc-lead-s, --pc-lead-c, --pc-lead-y. Every rule sits in :where() (specificity 0), so the styles of a
 * node always win. No transitions or animations in this file.
 */
:where(.pc-perks-list) {
	display: grid;
	grid-template-columns: repeat(var(--pc-cols, 2),minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

:where(.pc-perk) {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	box-sizing: border-box;
}

:where(.pc-perk-ico) {
	flex: none;
	display: inline-flex;
	width: var(--pc-perk-ico, 40px);
	height: var(--pc-perk-ico, 40px);
	color: var(--pc-perk-ico-c, currentcolor);
}

:where(.pc-perk-ico svg) {
	width: 100%;
	height: 100%;
	fill: currentcolor;
}

:where(.pc-perk-t) {
	white-space: pre-line;
	min-width: 0;
}

:where(.pc-accent) {
	color: var(--pc-accent, inherit);
}

:where(.pc-tm) {
	display: inline-block;
	font-size: .3em;
	line-height: 1;
	padding: .25em;
	border: 1px solid currentcolor;
	border-radius: 50%;
	vertical-align: super;
	color: var(--pc-accent, inherit);
}

:where(.pc-b-richtext strong) {
	font-weight: var(--pc-strong-w, bolder);
}

:where(.pc-has-lead) {
	position: relative;
}

:where(.pc-f-lead) {
	position: absolute;
	left: 14px;
	top: var(--pc-lead-y, 12px);
	width: var(--pc-lead-s, 18px);
	height: var(--pc-lead-s, 18px);
	color: var(--pc-lead-c, currentcolor);
	pointer-events: none;
}

:where(.pc-f-lead svg) {
	width: 100%;
	height: 100%;
	fill: currentcolor;
}

:where(.pc-has-lead > .pc-input) {
	padding-left: calc(24px + var(--pc-lead-s, 18px));
}