/*
 * GBA_Item_Photo_Align
 *
 * Pairs with item-photo-align.js, which measures .gba-details-col's
 * natural content height (down to its actual last line of text) and
 * applies it as an explicit inline height to .gba-photo-col.
 *
 * v2.16.2: switched from cropping the photo to fill its column
 * (object-fit: cover) to shrinking the whole photo down so it always
 * displays uncropped — Ryan's explicit call after v2.16.1's fix still
 * cropped short-description items too aggressively. The <img> itself is
 * now sized directly by the JS (an explicit pixel height plus
 * width: auto, so the browser scales it down preserving its full
 * aspect ratio — no CSS object-fit involved), so this stylesheet's job
 * is just to give it somewhere sensible to sit: the widget becomes a
 * flex row that top-aligns and centers whatever (now-smaller) size the
 * photo ends up at, with a white background so the leftover space
 * blends into the product photos' own white studio backdrops instead of
 * showing a gap.
 *
 * Only applies once the JS has actually set a height (the
 * .gba-photo-align-active flag), so nothing changes on page load before
 * the measurement runs, and nothing changes at all on narrow/stacked
 * mobile layouts where the JS deliberately never adds that flag.
 */
.gba-photo-col.gba-photo-align-active {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.gba-photo-align-active .gba-photo-widget {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	background: #fff;
}

.gba-photo-align-active .gba-photo-widget .elementor-widget-container {
	height: 100%;
	background: #fff;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.gba-photo-align-active .gba-photo-widget img {
	display: block;
}