/* Archive product card */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	overflow: visible;
}

/* Thumbnail <a> link is the positioning context for catalog badges.
   Badge is injected as a sibling of <img> inside this link.
   Broad selectors (without ancestor constraints) ensure compatibility
   with themes that don't wrap products in a .woocommerce div. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce-page ul.products li.product a.woocommerce-loop-product__link,
a.woocommerce-LoopProduct-link,
a.woocommerce-loop-product__link {
	position: relative;
	display: block;
	overflow: hidden;
}

/* Badge zone inside thumbnail link: stay visible even when theme fades the <img> on hover.
   Since badge is a sibling of <img> (not wrapped around it), only direct opacity on
   .pb-badge-zone itself is affected — not img fade effects. */
.woocommerce ul.products li.product a .pb-badge-zone,
.woocommerce-page ul.products li.product a .pb-badge-zone {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
}

/* Legacy: pb-product-img-badge-wrap kept for backward compat but no longer used for new renders */
.pb-product-img-badge-wrap {
	position: relative;
	display: block;
	overflow: hidden;
	line-height: 0;
}

/* Single product image containers */
.type-product .images,
.single-product-thumbnail-wrap,
.product-loop-thumbnail-wrap {
	position: relative;
	display: block;
	overflow: hidden;
}

/* Single product: badge is JS-injected inside .woocommerce-product-gallery__image.
   Ensure __image is always a positioning context (WC zoom JS also sets this via inline style).
   z-index:10 ensures badge appears above the zoom overlay (.zoomImg). */
.woocommerce-product-gallery__image {
	position: relative;
}
.woocommerce-product-gallery__image .pb-badge-zone {
	z-index: 10;
}

/* Badge zone fills the entire image wrapper; dead zone is handled by padding inside .pb-badge-text */
.pb-badge-zone {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 2;
}

/* Single product: keep badge visible in the images wrapper */
.type-product .images .pb-badge-zone {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
}

.pb-badge-wrap {
	left: 0;
	position: absolute;
	right: auto;
	top: 0;
	/* Default width: 100% of the zone. Inline style overrides with user-set % value. */
	width: 100%;
	max-width: 100%;
	/* margin: auto centers the wrap when both left:0 and right:0 are set (center presets) */
	margin: 0 auto;
	z-index: 2;
	line-height: 1;
	/* Height is set via inline style on this element when user specifies a value. */
	display: flex;
	align-items: stretch;
}

.pb-badge-image {
	position: absolute;
	left: 0;
	right: auto;
	top: 0;
	z-index: 55;
}

.pb-badge-image img {
	margin: 0;
	display: block;
	max-width: 100%;
	height: auto;
}

.pb-badge-image.right {
	right: 0;
	left: auto;
}

.pb-badge-wrap.right {
	right: 0;
	left: auto;
}

/* Rotated badge: position depends on corner so edges align with image */
.rotated .pb-badge {
	background-color: transparent;
	border-bottom: 25px solid;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
}

.pb-badge-wrap.rotated.pb-corner-top-left .pb-badge {
	-webkit-transform: translate(60px, -17px) rotate(45deg);
	-ms-transform: translate(60px, -17px) rotate(45deg);
	-o-transform: translate(60px, -17px) rotate(45deg);
	transform: translate(60px, -17px) rotate(45deg);
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	-o-transform-origin: left top;
	transform-origin: left top;
}

.pb-badge-wrap.rotated.pb-corner-top-right .pb-badge {
	-webkit-transform: translate(-60px, -17px) rotate(-45deg);
	-ms-transform: translate(-60px, -17px) rotate(-45deg);
	-o-transform: translate(-60px, -17px) rotate(-45deg);
	transform: translate(-60px, -17px) rotate(-45deg);
	-webkit-transform-origin: right top;
	-ms-transform-origin: right top;
	-o-transform-origin: right top;
	transform-origin: right top;
}

.pb-badge-wrap.rotated.pb-corner-bottom-left .pb-badge {
	-webkit-transform: translate(0, 0) rotate(-45deg);
	-ms-transform: translate(0, 0) rotate(-45deg);
	-o-transform: translate(0, 0) rotate(-45deg);
	transform: translate(0, 0) rotate(-45deg);
	-webkit-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	-o-transform-origin: left bottom;
	transform-origin: left bottom;
}

.pb-badge-wrap.rotated.pb-corner-bottom-right .pb-badge {
	-webkit-transform: translate(0, 0) rotate(45deg);
	-ms-transform: translate(0, 0) rotate(45deg);
	-o-transform: translate(0, 0) rotate(45deg);
	transform: translate(0, 0) rotate(45deg);
	-webkit-transform-origin: right bottom;
	-ms-transform-origin: right bottom;
	-o-transform-origin: right bottom;
	transform-origin: right bottom;
}

/* Legacy: no corner class — treat as top-left */
.pb-badge-wrap.rotated:not([class*="pb-corner-"]) .pb-badge {
	-webkit-transform: translate(60px, -17px) rotate(45deg);
	-ms-transform: translate(60px, -17px) rotate(45deg);
	-o-transform: translate(60px, -17px) rotate(45deg);
	transform: translate(60px, -17px) rotate(45deg);
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	-o-transform-origin: left top;
	transform-origin: left top;
}

.pb-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 25px;
	/* When parent .pb-badge-wrap has a user-set height, this fills it. */
	flex: 1 1 auto;
}

.pb-badge-text {
	width: 100%;
	text-align: center;
	font-size: 1rem;
	/* 15px horizontal padding = dead zone inside the badge (not outside) */
	padding: 4px 15px;
	box-sizing: border-box;
	/* Vertical centering is handled by parent flex (align-items: center). */
	line-height: 1.2;
}

.pb-first-icon,
.pb-second-icon {
	float: left;
	max-width: 160px;
	width: auto;
	background: #eeeeee;
	border: 1px solid #b5a0a0;
	border-radius: 3px;
	padding: 4px 8px;
}

.pb-first-icon {
	margin: 0 5px;
}

.pb-icon-text {
	line-height: 25px;
	font-size: 1rem;
	color: #797777;
	display: inline-block;
}

.pb-icons-wrap .icon {
	display: inline-block;
	max-width: 25px;
	text-align: center;
}

.pb-icons-wrap img {
	display: inline-block;
	vertical-align: middle;
	max-height: 25px;
}