/* =============================================================================
   Purple Tag — Promo Badges (top-right overlay)
   -----------------------------------------------------------------------------
   Completely separate from the eco "yibe" badges (which sit top-left). Different
   class names, different corner — the two never interact.
   ========================================================================== */

/* Hidden data node emitted by PHP (removed by JS after it reads it). */
.pt-promo-pending {
	display: none !important;
}

/* Guarantees a positioning context on whatever element we inject into. */
.pt-has-promo {
	position: relative;
}

/* Same, but specific enough to beat theme/builder rules on single-product
   galleries (Elementor "Product Images" widget, NickX images-with-video). */
.woocommerce div.product div.images.pt-has-promo,
.elementor-widget-woocommerce-product-images div.pt-has-promo,
.wp-block-woocommerce-product-image-gallery.pt-has-promo {
	position: relative;
}

/* The overlay itself — top-right, badges stacked vertically. */
.pt-promo-overlay {
	position: absolute;
	top: 8px;
	right: 8px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;          /* Stack multiple badges downward. */
	-webkit-align-items: flex-end;
	align-items: flex-end;           /* Keep them flush to the right edge. */
	gap: 6px;
	z-index: 25;                     /* Above the eco overlay (z-index:20). */
	margin: 0;
	padding: 0;
	line-height: 0;
	pointer-events: none;            /* Clicks pass through to the product. */
}

/* Each badge image — natural aspect ratio, capped to a tidy box. */
.pt-promo-overlay img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 92px !important;
	max-height: 110px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	object-fit: contain;
	-webkit-filter: drop-shadow( 0 2px 5px rgba( 0, 0, 0, .18 ) );
	filter: drop-shadow( 0 2px 5px rgba( 0, 0, 0, .18 ) );
}

/* Keep WooCommerce's zoom magnifier (top-right) clear of the badge. */
.pt-has-promo .woocommerce-product-gallery__trigger {
	top: auto;
	bottom: .875em;
}

/* On the single product the badge must clear the gallery's own slider layers. */
.woocommerce div.product .pt-has-promo > .pt-promo-overlay,
.elementor-widget-woocommerce-product-images .pt-has-promo > .pt-promo-overlay {
	z-index: 30;
}

/* Scale down on phones so badges don't crowd the thumbnail. */
@media ( max-width: 768px ) {
	.pt-promo-overlay {
		top: 6px;
		right: 6px;
		gap: 4px;
	}
	.pt-promo-overlay img {
		max-width: 60px !important;
		max-height: 72px !important;
	}
}