/**
 * 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: dialog shell
   ============================================================ */

dialog.shop-the-image-popup {
	max-width: 500px;
	border-radius: 8px;

	/* Floated thumbnail width — sized so the image roughly fills the height of
	   the title / SKU / price / actions stack beside it. */
	--shop-the-image-product-image-width: 140px;

	/*
	 * Clip the horizontal axis only (keeps the rounded corners) while leaving
	 * the vertical axis scrollable. A plain `overflow: hidden` here would also
	 * override the base `overflow-y: auto` (dialog.css), clipping the product
	 * list instead of scrolling it when the viewport is shorter than the list.
	 */
	overflow-x: hidden;
	overflow-y: auto;
}

/* Product list manages its own horizontal (row) padding; the vertical
   breathing room at the top and bottom of the list lives here on the content
   wrapper so it is symmetrical and scrolls with the list (rather than being
   clipped) when the popup is taller than the viewport. */
dialog.shop-the-image-popup .ftm-dialog-content {
	padding: var(--space-large) 0;
}

/* ============================================================
   Popup: product list — image-left / content-right rows

   Mirrors the "Bargain Bin Special" suggested-products layout in the
   header cart (see blocks/ftm/page-section/style.css): a floated thumbnail
   on the left with the title / SKU / price — and the add-to-cart and
   see-details actions that follow — wrapping compactly to its right.
   Scoped to the dialog and rendered single-column to fit the popup.
   ============================================================ */

dialog.shop-the-image-popup ul.products {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

dialog.shop-the-image-popup li.product {
	display: flow-root; /* contain the floated thumbnail so row padding stays balanced */
	padding: var(--space-normal) var(--space-large);
	position: relative;
}

dialog.shop-the-image-popup li.product + li.product {
	border-top: 1px solid var(--color-border-muted);
}

dialog.shop-the-image-popup li.product.product_cat-bundles {
	background-color: var(--gray-xlight);
}

dialog.shop-the-image-popup li.product.product_cat-bundles + li.product {
	border-top: none;
}

/* The product link is a plain block; the thumbnail inside it floats left so
   the title / SKU / price — and the actions that follow the link — all wrap
   compactly to its right and stay top-aligned. */
dialog.shop-the-image-popup li.product .woocommerce-LoopProduct-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Thumbnail — floats left; everything else wraps to its right */
dialog.shop-the-image-popup li.product .woocommerce-LoopProduct-link img {
	float: left;
	width: var(--shop-the-image-product-image-width);
	height: auto;
	margin-right: var(--space-normal);
	margin-bottom: var(--space-xsmall);
}

dialog.shop-the-image-popup li.product .woocommerce-loop-product__title,
dialog.shop-the-image-popup li.product .al-product-sku-reviews,
dialog.shop-the-image-popup li.product .price {
	margin-block: 0;
}

dialog.shop-the-image-popup li.product .al-product-sku-reviews,
dialog.shop-the-image-popup li.product .price {
	margin-top: var(--space-xxxsmall, 0.25rem);
}

dialog.shop-the-image-popup li.product .woocommerce-loop-product__title {
	font-size: 1rem;
}

/* Actions wrap to the right of the thumbnail, just below the price.
   Inline-level so they sit beside the float (a full-width block would
   start behind the image) and share one line. */
dialog.shop-the-image-popup li.product .add_to_cart_button {
	display: inline-flex;
	margin-top: var(--space-small, 0.75rem);
	width: fit-content;
}

dialog.shop-the-image-popup li.product .see-details {
	margin-left: var(--space-normal);
}

/* Hide the sale badge and ratings, matching the suggested-products layout
   (the sale price is conveyed inline by the .price del/ins markup). */
dialog.shop-the-image-popup li.product .onsale,
dialog.shop-the-image-popup li.product .woocommerce-product-rating,
dialog.shop-the-image-popup li.product .star-rating {
	display: none !important;
}