/**
 * Single product page (woocommerce/single-product.php, Product 2162:558):
 * page background, breadcrumb, the gallery + buy box layout.
 * No mobile frame: homepage mobile patterns (stacked, 20px gutters).
 */

body.xat-product {
	background: var(--color-white);
}

/* 2162:684: 20px above, 24px under the breadcrumb. */
.product-page > .breadcrumb {
	padding-top: 20px;
	padding-bottom: var(--space-md);
}

/* 2162:691: 8px above, 60px under; gallery 620 + 64 gap + buy box 596 in the
 * 1280 container. Stacked below 1024. */
.product-top {
	display: grid;
	gap: 32px;
	padding-top: var(--space-xs);
	padding-bottom: 40px;
}

@media (min-width: 768px) {
	.product-top {
		gap: var(--space-lg);
	}
}

@media (min-width: 1024px) {
	.product-top {
		grid-template-columns: minmax(0, 620fr) minmax(0, 596fr);
		align-items: start;
		gap: clamp(32px, -19.52px + 5.0314vw, 64px); /* 32 at 1024, 64 at 1660 */
		padding-bottom: 60px;
	}
}