/* ==========================================================================
   Include variables and mixins
   ========================================================================== */
/* ==========================================================================
   Typography variables
   ========================================================================== */
/* ==========================================================================
   Box variables
   ========================================================================== */
/* ==========================================================================
   Devices screen size variables
   ========================================================================== */
/* ==========================================================================
   Typography mixins
   ========================================================================== */
/* ==========================================================================
   Typography mixins - end
   ========================================================================== */
/* ==========================================================================
   Layout mixins - begin
   ========================================================================== */
/* ==========================================================================
   Layout mixins - end
   ========================================================================== */
/* ==========================================================================
   Grid size mixins - begin
   ========================================================================== */
/* ==========================================================================
   Grid size mixins - end
   ========================================================================== */
/* ==========================================================================
   Animation mixins - start
   ========================================================================== */
/* ==========================================================================
   Animation mixins - end
   ========================================================================== */
/* ==========================================================================
   Helper mixins - begin
   ========================================================================== */
/* ==========================================================================
   Helper mixins - end
   ========================================================================== */
/* ==========================================================================
   Badge default
   ========================================================================== */
.qbfw-badge {
	--qbfw-translate-x: 0px;
	--qbfw-translate-y: 0px;
	--qbfw-translate: translate( var(--qbfw-translate-x), var(--qbfw-translate-y));
	line-height: 1em;
	overflow: hidden;
	box-sizing: border-box;
	opacity: var(--qbfw-opacity, 1);
	text-align: var(--qbfw-text-align);
	transform: var(--qbfw-translate);
}

@media only screen and (max-width: 880px) {
	.qbfw-badge {
		--qbfw-width: var(--qbfw-width-880) !important;
		--qbfw-height: var(--qbfw-height-880) !important;
		--qbfw-padding: var(--qbfw-padding-880) !important;
	}
}

.qbfw-badge.qbfw-badge-position-on-image {
	position: absolute;
	z-index: 1;
}

.qbfw-badge.qbfw-badge-position-below-image {
	margin: var(--qbfw-margin, 0px);
}

body.single-product .qbfw-badge.qbfw-badge-position-below-image {
	margin-top: 0 !important;
}

.qbfw-badge.qbfw-background-style {
	--qbfw-background: var(--qbfw-background-color, $background-color);
	background-color: var(--qbfw-background);
	padding: var(--qbfw-padding, 10px);
}

.qbfw-badge.qbfw-border-style {
	border-color: var(--qbfw-border-color);
	border-width: var(--qbfw-border-width);
	border-style: var(--qbfw-border-style);
	border-radius: var(--qbfw-border-radius);
}

.qbfw-badge-in-widget--hide .widget .qbfw-badge {
	display: none;
}

.woocommerce-product-gallery__image:has(.qbfw-badge) {
	position: relative;
}

.qbfw-badge.qbfw-badge-type-image {
	width: var(--qbfw-width, 100px);
}

.qbfw-badge.qbfw-badge-type-image img {
	width: 100%;
	height: auto;
	vertical-align: middle;
}

.qbfw-badge.qbfw-badge-type-textual {
	width: var(--qbfw-width, 100px);
	height: var(--qbfw-height);
}