/* Woo Product Badges — Frontend styles v1.1.3 */

/* -------------------------------------------------------
   Position context.
------------------------------------------------------- */
ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	position: relative;
}

.woocommerce-product-gallery {
	position: relative !important;
	overflow: visible !important;
}

/* Woodmart — product image top element */
.products .product .product-element-top,
.wd-product .product-element-top {
	position: relative;
}

/* -------------------------------------------------------
   Badge wrapper.
   Width is set entirely by the dynamic inline CSS injected
   from WPB_Settings (the % values saved in Badge Sizes).
   No max-width here — that was silently overriding the
   admin-configured percentage.
------------------------------------------------------- */
.wpb-badge-wrapper {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 30;
	display: block;
	pointer-events: none;
	line-height: 0;
}

/* -------------------------------------------------------
   Badge image.
   Specificity (0,2,1) beats WoodMart's image reset rules.
   width:100% fills the wrapper; the wrapper controls size.
------------------------------------------------------- */
/* Specificity (0,0,2,2) beats WoodMart's (0,0,2,1) rules in the !important layer. */
span.wpb-badge-wrapper img.wpb-product-badge {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	min-width: unset !important;
	object-fit: contain !important;
}

/* -------------------------------------------------------
   Responsive offset adjustments only.
   Width is controlled by the admin-configured % — see
   Products > Badge Sizes. No caps here.
------------------------------------------------------- */
@media ( max-width: 768px ) {
	.wpb-badge-wrapper {
		top: 6px;
		left: 6px;
	}
}

@media ( max-width: 480px ) {
	.wpb-badge-wrapper {
		top: 5px;
		left: 5px;
	}
}