/* Product tiles: hold the space for the Add to bag button from the first paint,
   so the page does not shift when the button appears (Google counts that shift).
   Only for pieces that can be bought (data-buy="1" comes from includes/tiles.php). */
ul.products li.product.type-product:has(.fg-td[data-buy="1"]):not(:has(.fg-tbag))::after {
	content: "";
	display: block;
	height: 54px; /* button 36px + margins 14px and 4px */
}
@media (hover: none) {
	ul.products li.product.type-product:has(.fg-td[data-buy="1"]):not(:has(.fg-tbag))::after {
		height: 51px; /* phone button 33px + margins */
	}
}

/* Photo crossfade on the tile arrows: the next photo fades in over the current one. */
html.fg-tiles .fg-tile img.fg-xf {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity .38s ease !important;
}
html.fg-tiles .fg-tile img.fg-xf.on { opacity: 1; }