/**
 * Layout stability for above-the-fold plugin content and product grids.
 *
 * The selectors are intentionally scoped. JF Pro and Slick keep full control
 * of their behavior; these declarations only reserve their final layout space.
 */

/* Product placeholders and final images share the same square footprint. */
.products .product-image,
.products .product-image > img,
.products .image > .product-image {
	box-sizing: border-box;
}

.products .product-image {
	display: block;
	aspect-ratio: 1 / 1;
}

.products .product-image > img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* The measured desktop header settles at 538px. */
@media (min-width: 992px) {
	section.jf-pro-header[id^="jf-pro-slider-header-"] {
		min-height: 538px;
	}
}

/*
 * On phones the JF Pro composition stacks vertically. Its measured final
 * height is approximately 757px at a 390px viewport, while the plugin starts
 * with min-height: 0. Reserve that footprint before its image initializes.
 */
@media (max-width: 767px) {
	section.jf-pro-header[id^="jf-pro-slider-header-"] {
		min-height: clamp(700px, 194vw, 760px);
	}

	section.jf-pro-header[id^="jf-pro-slider-header-"] .jf-pro-header__image {
		height: auto;
	}
}