.wd-social-icon.social-bale .wd-icon:before {
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	font-family: unset;
	background: transparent var(--lotus-bale-icon-gray) center / contain no-repeat;
}

/* Default WoodMart icons are gray on light backgrounds. */
.wd-social-icons.wd-style-default .wd-social-icon.social-bale .wd-icon:before,
.wd-social-icons.wd-style-colored-alt .wd-social-icon.social-bale .wd-icon:before {
	background-image: var(--lotus-bale-icon-gray);
}

/* WoodMart color-scheme-light uses white icons on dark header/footer areas. */
.wd-social-icons.color-scheme-light .wd-social-icon.social-bale .wd-icon:before,
[class*="color-scheme-light"] .wd-social-icons.wd-style-default .wd-social-icon.social-bale .wd-icon:before,
[class*="color-scheme-light"] .wd-social-icons.wd-style-simple .wd-social-icon.social-bale .wd-icon:before,
[class*="color-scheme-light"] .wd-social-icons.wd-style-colored-alt .wd-social-icon.social-bale .wd-icon:before {
	background-image: var(--lotus-bale-icon-white);
}

/* Explicit dark scheme keeps gray icons (same as other social icons). */
.wd-social-icons.color-scheme-dark .wd-social-icon.social-bale .wd-icon:before {
	background-image: var(--lotus-bale-icon-gray);
}

/* Colored style uses white glyphs on brand-colored circles. */
.wd-social-icons.wd-style-colored .wd-social-icon.social-bale .wd-icon:before {
	background-image: var(--lotus-bale-icon-white);
}

/* Simple style hovers to white icon on primary background. */
.wd-social-icons.wd-style-simple > a.social-bale:hover .wd-icon:before {
	background-image: var(--lotus-bale-icon-white);
}