.extrobogo-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 9;

	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;

	/* Size, colors and font are set inline per the admin settings,
	   with the fallbacks below. */
	width: var(--extrobogo-size, 88px);
	height: var(--extrobogo-size, 88px);
	padding: 6px;

	text-align: center;
	border-radius: 50%;
	overflow: hidden;

	color: var(--extrobogo-fg, #ffffff);
	background: var(--extrobogo-bg, #1B6EC2);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);

	/* Never intercept clicks meant for the product image/link. */
	pointer-events: none;
}

/* Top-right variant. */
.extrobogo-badge--right {
	left: auto;
	right: 10px;
}

.extrobogo-badge__text {
	display: block;
	font-family: var(--extrobogo-font, inherit);
	font-size: var(--extrobogo-fs, 12px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* Each admin line is its own line. It wraps (rather than overflowing) if it
   is too wide, so text can never run off the side of the circle even when
   JavaScript is unavailable. The auto-fit script then shrinks it to fit. */
.extrobogo-badge__line {
	display: block;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}

.woocommerce ul.products li.product,
.single-product div.product {
	position: relative;
}

/* On the single product page let the circle sit inline above the title. */
.single-product .summary .extrobogo-badge {
	position: static;
	margin: 0 0 14px;
}

.extrobogo-tag {
	color: #1a7f37;
	font-weight: 600;
}