/**
 * WCFM Product Badges
 * Mismo look que los badges del widget de Elementor de la home.
 */

.wpb-badges-wrap {
	position: absolute !important;
	top: 10px;
	left: 10px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 6px;
	pointer-events: none; /* que no bloquee clicks sobre la imagen/producto */
}

.wpb-badge {
	display: inline-block;
	padding: 3px 9px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.4;
	border-radius: var(--wpb-badge-radius, 20px);
	white-space: nowrap;
}

/* El contenedor de imagen necesita position:relative para anclar el badge.
   Se usan los selectores de Electro (.product-thumbnail / .product-item__thumbnail)
   como primarios, con .products li.product como fallback genérico de WooCommerce.
   El JS (wpb-badges.js) mueve .wpb-badges-wrap dentro de .product-thumbnail
   al DOMContentLoaded para que el badge quede sobre la imagen. */
.product-thumbnail,
.product-item__thumbnail,
li.product,
.product-inner {
	position: relative;
}

/* PRODUCTO INDIVIDUAL:
   .woocommerce-product-gallery__image es el contenedor directo de la
   imagen principal. Al hacer relative + overflow:hidden, el badge
   (que el JS mueve dentro de este div) queda anclado sobre la imagen
   sin sobresalir. Misma posición que en la vendor store. */
.woocommerce-product-gallery__image {
	position: relative;
	overflow: hidden;
}