/* ================================================
   RED POINT — PRODUCT MAIN  (Figma 109:1376)
   ================================================
   The gallery + buy box as one block.
   1320 = gallery 775 (flex) + 45 gap + info 500. Buy box first in the DOM → RIGHT under RTL,
   gallery → left. The .rp-gallery and .rp-buybox styling comes from their own stylesheets.
   ================================================ */

.rp-pmain {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 45px;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 50px 60px 0;
	box-sizing: border-box;
}

/* Info column — fixed 500. */
.rp-pmain .rp-buybox {
	flex: 0 0 500px;
	max-width: 500px;
}

/* Gallery — fills the rest (~775). */
.rp-pmain .rp-gallery {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 1024px) {
	.rp-pmain {
		flex-direction: column-reverse; /* gallery on top, buy box below */
		gap: 32px;
		padding: 24px;
	}
	.rp-pmain .rp-buybox {
		flex: none;
		max-width: 100%;
		width: 100%;
	}
}