/*
 * Box product pages: the landing page buy box replaces the native Mix and Match table (see Bundle_Page).
 * Only spacing here; the buy box's own look comes from buy-box.css and the central stylesheet.
 */
.mgsb-bundle-page .summary .mgsb {
	margin-top: 16px;
}
.mgsb-bundle-page .summary .mgsb__box {
	max-width: 100%;
}

.mgsb-bundle-page .mgsb-bundle-gallery {
	width: 100%;
}

/* No "Sale!" badge on the box pages (the discount is shown in the buy box). */
.mgsb-bundle-page span.onsale,
.mgsb-bundle-page .ast-onsale-card {
	display: none;
}

/* Two columns on desktop (gallery left, buy box right). The theme forces a single full-width column when a product
   has no main image, so these rules are scoped to the box pages and win over it. Phones stack. */
@media (min-width: 922px) {
	body.mgsb-bundle-page div.product .mgsb-bundle-gallery {
		float: left !important;
		width: 46% !important;
		margin: 0 4% 24px 0 !important;
	}
	body.mgsb-bundle-page div.product .summary.entry-summary {
		float: right !important;
		width: 50% !important;
		margin: 0 0 24px !important;
	}
	.mgsb-bundle-page div.product .woocommerce-tabs,
	.mgsb-bundle-page div.product .related,
	.mgsb-bundle-page div.product .up-sells {
		clear: both;
	}
}

/* Pages with Elementor content: Astra then removes the page container's max-width and side padding
   (.ast-page-builder-template), so the gallery and buy box ran edge to edge. Give those two blocks their own
   centred width (--mgsb-bundle-max, default 1200px). The Elementor sections below keep their own full width. */
body.mgsb-bundle-page.ast-page-builder-template div.product {
	--mgsb-bundle-w: min(var(--mgsb-bundle-max, 1200px), calc(100% - 40px));
}
@media (min-width: 922px) {
	body.mgsb-bundle-page.ast-page-builder-template div.product .mgsb-bundle-gallery {
		width: calc(var(--mgsb-bundle-w) * 0.46) !important;
		margin: 0 calc(var(--mgsb-bundle-w) * 0.04) 24px calc((100% - var(--mgsb-bundle-w)) / 2) !important;
	}
	body.mgsb-bundle-page.ast-page-builder-template div.product .summary.entry-summary {
		width: calc(var(--mgsb-bundle-w) * 0.5) !important;
		margin: 0 calc((100% - var(--mgsb-bundle-w)) / 2) 24px 0 !important;
	}
}
@media (max-width: 921px) {
	body.mgsb-bundle-page.ast-page-builder-template div.product .mgsb-bundle-gallery,
	body.mgsb-bundle-page.ast-page-builder-template div.product .summary.entry-summary {
		box-sizing: border-box;
		padding-right: 16px;
		padding-left: 16px;
	}
}
