/**
 * Shop The Image
 *
 * Styles for the shop-the-image popup feature: the image wrapper, trigger
 * button, and product list layout inside the popup.
 *
 * @package ftm-custom
 */

/* Image wrapper — positions the "Shop Image" button absolutely */
.ft-shop-the-image {
	position: relative;
	display: table;
}

/* "Shop Image" trigger button */
.shop-the-image-button {
	position: absolute;
	bottom: var(--space-large);
	right: var(--space-large);
}

/* ============================================================
   Popup: product list layout
   ============================================================ */

/* Products shown in popup are always 1 column, displayed as rows */

/* Shop The Image popups stay pretty narrow */
.ft-popup[data-ft-popup-context*="shop-the-image-button"] .ft-popup-content {
	max-width: 480px;
}

/* Bundled products in Shop The Image sections get styled full-width */
.ft-popup[data-ft-popup-context*="shop-the-image-button"] .ft-popup-html {
	padding: 0;
}

.ft-popup ul.products {
	display: block;
}

.ft-popup li.product {
	padding: 0 var(--space-large);
}

.ft-popup li.product .product-inner {
	border-top: 1px solid var(--border-color);
	padding: var(--space-normal) 0;
}

.ft-popup li.product:first-child .product-inner {
	border-top: none;
	padding-top: var(--space-xlarge);
}

.ft-popup li.product.product_cat-bundles {
	background-color: var(--gray-xlight);
}

.ft-popup li.product.product_cat-bundles + li.product .product-inner {
	border-top: none;
}

.ft-popup .product-inner {
	display: flex;
}

.ft-popup .ftm-parent-shop-loop-image-wrapper {
	max-width: 120px;
}

.ft-popup .ftm-parent-shop-loop-content-wrapper {
	flex-grow: 1;
	padding-left: var(--space-normal);
}

.ft-popup .woocommerce-loop-product__title {
	margin: 0;
}

@media (min-width: 37.5em) {

	.ft-popup .ftm-parent-shop-loop-image-wrapper {
		max-width: 140px;
	}

}