.bos-kibadge-wrap {
	/* line-height: 0 kills the inline-element gap under the image; badge itself
	   resets it back to normal below so its own text still lays out correctly. */
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.bos-kibadge-wrap img {
	display: block;
	max-width: 100%;
	height: auto;
}

.bos-kibadge-pos-below.bos-kibadge-wrap {
	display: block;
}

.bos-kibadge {
	position: absolute;
	z-index: 10;
	line-height: normal;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
}

.bos-kibadge-pos-below .bos-kibadge {
	position: static;
	display: inline-block;
	margin-top: 4px;
}

.bos-kibadge-pos-top-left .bos-kibadge {
	top: 8px;
	left: 8px;
}

.bos-kibadge-pos-top-right .bos-kibadge {
	top: 8px;
	right: 8px;
}

.bos-kibadge-pos-bottom-left .bos-kibadge {
	bottom: 8px;
	left: 8px;
}

.bos-kibadge-pos-bottom-right .bos-kibadge {
	bottom: 8px;
	right: 8px;
}

.bos-kibadge--small {
	font-size: 10px;
	padding: 2px 6px;
}

.bos-kibadge--medium {
	font-size: 12px;
	padding: 4px 9px;
}

.bos-kibadge--large {
	font-size: 14px;
	padding: 6px 12px;
}

.bos-kibadge--dark,
.bos-kibadge--light,
.bos-kibadge--custom {
	background: var( --bos-kibadge-bg, rgba(26,26,26,0.85) );
	color: var( --bos-kibadge-color, #ffffff );
}

.bos-kibadge--outline {
	background: transparent;
	color: var( --bos-kibadge-color, #ffffff );
	border: 1.5px solid var( --bos-kibadge-color, #ffffff );
}

.bos-kibadge-page-notice {
	font-size: 0.85em;
	font-style: italic;
	opacity: 0.75;
}

/*
 * WooCommerce. Shop templates lay product images out as full-width blocks
 * (img { width: 100% }); the default inline-block wrapper would shrink them
 * to their intrinsic size. As a block, the wrapper also lets the image's
 * bottom margin collapse out, so the badge sits on the image, not below it.
 */
.woocommerce ul.products li.product .bos-kibadge-wrap,
.woocommerce div.product div.images .bos-kibadge-wrap,
.woocommerce-product-gallery__image .bos-kibadge-wrap,
.wc-block-grid__product-image .bos-kibadge-wrap,
.wp-block-woocommerce-product-image .bos-kibadge-wrap {
	display: block;
}

/* Small cart/mini-cart thumbnails: same label, scaled to fit the image. */
.woocommerce-cart-form .bos-kibadge,
.woocommerce-mini-cart .bos-kibadge,
.woocommerce-checkout-review-order .bos-kibadge,
td.product-thumbnail .bos-kibadge {
	font-size: 8px;
	padding: 1px 4px;
	top: auto;
	left: auto;
	bottom: 2px;
	right: 2px;
}

/* Badges placed by frontend.js on very small images (avatars, thumbnails). */
.bos-kibadge--tiny {
	font-size: 9px;
	padding: 1px 5px;
}