/**
 * PB Product Badges — frontend.
 * Vanilla CSS. Capa estática absoluta: sin transiciones, sin filtros,
 * pointer-events:none → no participa en hit-testing ni fuerza repaints
 * del hover de Flatsome. width/height fijos + contain → cero reflow/CLS.
 */

:root {
	--pb-badge-size: 2.25rem;        /* tamaño en loop/catálogo */
	--pb-badge-size-single: 3rem;    /* tamaño en producto individual */
	--pb-gap: 0.375rem;              /* separación entre insignias */
	--pb-offset: 0.5rem;             /* margen respecto a la esquina */
	--pb-z: 3;                       /* sobre imagen y hover-alt de Flatsome */
	--pb-badge-bg: transparent;      /* fondo opcional (p. ej. rgb(255 255 255 / .85)) */
	--pb-badge-radius: 0;
}

/* Contenedor: esquina INFERIOR IZQUIERDA del contenedor relativo de imagen. */
.pb-badges {
	position: absolute;
	inset-block-end: var(--pb-offset);
	inset-inline-start: var(--pb-offset);
	z-index: var(--pb-z);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--pb-gap);
	max-width: calc(100% - (var(--pb-offset) * 2));
	pointer-events: none; /* no bloquea el click al producto ni los image-tools */
	contain: layout;      /* aísla su layout: cambios internos no reflowean la card */
}

.pb-badge {
	display: block;
	inline-size: var(--pb-badge-size);
	block-size: var(--pb-badge-size);
	background: var(--pb-badge-bg);
	border-radius: var(--pb-badge-radius);
	overflow: hidden;
}

.pb-badge__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* Producto individual: insignia mayor. */
.pb-badges--single .pb-badge {
	inline-size: var(--pb-badge-size-single);
	block-size: var(--pb-badge-size-single);
}

/*
 * Anclas de posicionamiento.
 * .box-image (Flatsome, loop) y .woocommerce-product-gallery__image (WC single)
 * ya suelen ser relativos; se declara como red de seguridad idempotente.
 */
.box-image,
.woocommerce-product-gallery__image {
	position: relative;
}

/* Móvil: escala fluida sin media queries adicionales por breakpoint. */
@media (max-width: 549px) {
	:root {
		--pb-badge-size: 1.75rem;
		--pb-badge-size-single: 2.25rem;
		--pb-offset: 0.375rem;
	}
}