/**
 * Badge relative to the single product gallery.
 *
 * The badge is initially injected into the gallery HTML and then moved to the
 * stable gallery wrapper, so it remains visible while the carousel changes slides.
 */

.woocommerce-product-gallery.wpb-has-badge,
.woocommerce-product-gallery,
.woocommerce-product-gallery .woocommerce-product-gallery__image {
	position: relative;
}

/* Block gallery fallback container. */
.wc-block-product-gallery.wpb-has-badge,
[data-block-name="woocommerce/product-gallery"].wpb-has-badge {
	position: relative;
}

.wpb-badge {
	position: absolute;
	z-index: var(--wpb-z, 10);
	pointer-events: none;
	line-height: 0;
}

.wpb-badge img {
	display: block;
	width: var(--wpb-width, 80px);
	max-width: none;
	height: auto;
}

/* Image badges can use the selected background color behind transparent PNG/SVG artwork. */
.wpb-badge--image {
	border-radius: 4px;
	overflow: hidden;
}

/* Beat WooCommerce gallery rules that force every nested image to 100% width. */
.woocommerce div.product div.images .wpb-badge--single img {
	width: var(--wpb-width, 80px);
}

.wpb-badge--loop img {
	width: var(--wpb-loop-width, 56px);
}

/* WooCommerce's product-card image rule is more specific and otherwise makes
 * an image badge fill the entire card. Keep the configured loop size authoritative. */
.woocommerce ul.products li.product a .wpb-badge--loop img,
.woocommerce-page ul.products li.product a .wpb-badge--loop img,
.wc-block-product .wpb-badge--loop img {
	width: var(--wpb-loop-width, 56px) !important;
	max-width: none;
	height: auto;
}

@media (max-width: 768px) {
	.wpb-badge--single img,
	.woocommerce div.product div.images .wpb-badge--single img {
		width: var(--wpb-width-mobile, 60px);
	}
}

.wpb-badge__text {
	display: inline-block;
	line-height: 1.2;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	background: #111;
	color: #fff;
	white-space: nowrap;
}

/* Product-details badge: flow with the summary instead of overlaying the gallery. */
.wpb-meta-badge-wrap {
	clear: both;
	margin: 12px 0;
}

.wpb-badge--meta {
	position: static;
	display: inline-block;
	vertical-align: middle;
	z-index: auto;
}

.wpb-badge--meta img {
	width: var(--wpb-loop-width, 56px);
	height: auto;
}

/* Placement presets — offsets push inward from gallery edges. */
.wpb-badge--top-left {
	top: var(--wpb-offset-y, 12px);
	left: var(--wpb-offset-x, 12px);
}

.wpb-badge--top-center {
	top: var(--wpb-offset-y, 12px);
	left: 50%;
	transform: translateX(-50%);
}

.wpb-badge--top-right {
	top: var(--wpb-offset-y, 12px);
	right: var(--wpb-offset-x, 12px);
}

.wpb-badge--center-left {
	top: 50%;
	left: var(--wpb-offset-x, 12px);
	transform: translateY(-50%);
}

.wpb-badge--center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.wpb-badge--center-right {
	top: 50%;
	right: var(--wpb-offset-x, 12px);
	transform: translateY(-50%);
}

.wpb-badge--bottom-left {
	bottom: var(--wpb-offset-y, 12px);
	left: var(--wpb-offset-x, 12px);
}

.wpb-badge--bottom-center {
	bottom: var(--wpb-offset-y, 12px);
	left: 50%;
	transform: translateX(-50%);
}

.wpb-badge--bottom-right {
	bottom: var(--wpb-offset-y, 12px);
	right: var(--wpb-offset-x, 12px);
}

/* Shop loop: anchor to the product card / thumbnail link. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	position: relative;
}

/* Category thumbnails render inside their own link. Keep that link as the
 * containing block so a category badge stays attached to its image. */
.woocommerce ul.products li.product-category > a,
.woocommerce-page ul.products li.product-category > a {
	position: relative;
	display: block;
}

.woocommerce ul.products li.product .wpb-badge--loop {
	/* Same placement presets apply; loop uses --wpb-loop-width. */
}