/* =========================================================
   QI Quick View V1
   Flatsome product lightbox only.
   ========================================================= */


/*
 * Assurance strip.
 *
 * Product V1 normally provides these rules only on is_product().
 * Flatsome Quick View is rendered inside product-lightbox-inner
 * while the parent page is normally a product listing page.
 */

.product-lightbox-inner .qi-product-assurance {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 8px !important;
	overflow: visible !important;

	width: 100% !important;
	margin-top: 13px !important;
	padding: 0 !important;

	border: 0 !important;
	background: transparent !important;
}


/*
 * Individual assurance card.
 */

.product-lightbox-inner .qi-product-assurance-item {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;

	min-width: 0 !important;
	min-height: 34px !important;

	margin: 0 !important;
	padding: 5px 7px !important;

	border: 1px solid
		var(--qi-border, #D8E6E9) !important;

	border-radius: 8px !important;

	background:
		var(--qi-surface, #F6FAFB) !important;

	color:
		var(--qi-text, #173B4A) !important;

	font-size: 11px !important;
	font-weight: 650 !important;
	line-height: 1.3 !important;
	text-align: center !important;
}


/*
 * Critical SVG reset.
 *
 * Without Product V1 CSS, the inline SVG has no explicit dimensions
 * inside Flatsome Quick View and expands to the available width.
 */

.product-lightbox-inner
.qi-product-assurance-item
svg {
	display: block !important;

	flex: 0 0 13px !important;

	width: 13px !important;
	height: 13px !important;

	min-width: 13px !important;
	min-height: 13px !important;

	max-width: 13px !important;
	max-height: 13px !important;

	margin: 0 !important;
	padding: 0 !important;

	fill: none !important;

	stroke:
		var(--qi-primary, #0F9693) !important;

	color:
		var(--qi-primary, #0F9693) !important;
}


/*
 * Prevent presentation attributes inside the inline SVG
 * from turning the icons into large filled black shapes.
 */

.product-lightbox-inner
.qi-product-assurance-item
svg * {
	fill: none !important;

	stroke:
		var(--qi-primary, #0F9693) !important;
}


/*
 * Labels.
 */

.product-lightbox-inner
.qi-product-assurance-item
span {
	min-width: 0 !important;
	margin: 0 !important;

	color: inherit !important;

	font-size: inherit !important;
	line-height: inherit !important;

	white-space: nowrap;
}


/*
 * Narrow Quick View / mobile.
 */

@media screen and (max-width: 849px) {

	.product-lightbox-inner .qi-product-assurance {
		grid-template-columns:
			repeat(2, minmax(0, 1fr)) !important;
	}

	.product-lightbox-inner
	.qi-product-assurance-item {
		min-height: 36px !important;
	}

}