/**
 * ibr-product-promo-banner — front-end styles.
 *
 * Up to 3 banners stack vertically inside the single-product summary column,
 * each filling the column width at its native aspect ratio (height: auto).
 * No full-bleed / alignfull trickery — the banner is column-width, not
 * viewport-width.
 *
 * Blocksy quirk: the summary column can be an is-layout-constrained
 * container, which silently overrides physical margins with logical ones.
 * The gap above the block is declared as margin-block-start at raised
 * specificity (scoped under .single-product) and restated in the mobile query.
 */

:root {
	/* Gap ABOVE the whole banner block. */
	--ibr-promo-banner-gap: 20px;
	/* Vertical gap BETWEEN stacked banners. */
	--ibr-promo-banner-stack-gap: 12px;
	/* Corner rounding on each banner image. */
	--ibr-promo-banner-radius: 8px;
}

.single-product .ibr-promo-banner-wrapper {
	width: 100%;
	margin-block-start: var(--ibr-promo-banner-gap);
	margin-block-end: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ibr-promo-banner-stack-gap);
}

.ibr-promo-banner-wrapper .ibr-promo-banner-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ibr-promo-banner-radius);
	transition: opacity 0.15s ease;
}

.ibr-promo-banner-link {
	display: block;
	text-decoration: none;
}

.ibr-promo-banner-link:hover .ibr-promo-banner-img {
	opacity: 0.92;
}

@media (max-width: 767px) {
	.single-product .ibr-promo-banner-wrapper {
		margin-block-start: var(--ibr-promo-banner-gap);
		margin-block-end: 0;
	}
}