/**
 * Quick View popup close button (added 2026-08-18, per Wulfy: the default Magnific Popup close
 * button sits fixed to the corner of the browser viewport, not the actual visible popup card --
 * Magnific Popup inserts .mfp-close as a sibling of .mfp-container, not a child of it, so it
 * never tracks the card's actual position. quick-view.js relocates the button into
 * .product-lightbox (the actual visible white card, confirmed via computed style -- not
 * .mfp-content, which renders wider than the card on at least some pages/viewports and put the
 * button in dead space past the card's real edge on the first two passes) once it appears in
 * the DOM; this stylesheet then styles it once it's actually inside the card.
 *
 * Colors/shape match the site's real Add to Cart button exactly (#c05530, 5px border-radius --
 * sampled directly from .single_add_to_cart_button's computed style, not guessed or reused from
 * the Finder drawer's different accent shade), per Wulfy's live feedback on the first two passes.
 */
.product-lightbox > .mfp-close {
	position: absolute;
	/* Centered directly on the card's corner (half in, half out) rather than inset inside it --
	   2026-08-18, per Wulfy: an inset button was overlapping product title text that wraps to a
	   second line on some products. Mirrors the "Sale!" badge's own corner treatment on the
	   opposite corner for a consistent look. */
	top: -18px;
	right: -18px;
	z-index: 10;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 5px !important; /* Flatsome's own generic button reset fights this at equal
		specificity, same issue as opacity below -- needs !important to actually win. */
	background: #c05530;
	color: #fff;
	opacity: 1 !important; /* Magnific Popup's own base .mfp-close rule sets opacity: 0.6 with
		equal specificity to this selector -- without !important it's a source-order coin flip,
		and losing it was exactly Wulfy's original complaint (a faint, hard-to-see X). */
	mix-blend-mode: normal !important; /* Flatsome's own base .mfp-close rule sets
		mix-blend-mode: difference, which computes color against whatever's behind the button
		instead of showing the color actually set -- that's what turned #c05530 orange into a
		cyan/black inversion in the live screenshot. Not a caching issue, a blend mode fighting
		the intended flat color. */
	font-size: 0; /* the feather "x" SVG icon supplies its own size, no text glyph needed */
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	transition: background 0.15s ease;
}

.product-lightbox > .mfp-close svg {
	width: 18px;
	height: 18px;
}

.product-lightbox > .mfp-close:hover {
	background: #a34527; /* darker shade of the same color for a visible hover state */
}