/*
 * Product page layout (#256): the Product and Mobile artboards of docs/design/mockups. Gallery left,
 * "Arma tu Block" right; stacked on a phone (gallery on top). Colours and fonts come from the
 * theme.json tokens through --wp--preset--*; the numbers are the artboard values (24 px padding,
 * 32 px gap, a 560/400 px basis for the two columns, 36 px title, 26 px on a phone).
 */
.blk-product {
	padding-block: 24px 64px;
}
.blk-product__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 32px;
}
.blk-product__media {
	align-self: stretch; /* so the gallery can stay in view while the configurator scrolls */
	flex: 999 1 560px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.blk-product__buy {
	flex: 1 1 400px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.blk-product__media > *,
.blk-product__buy > *,
.blk-product__head > * {
	margin-block: 0;
}
.blk-product .woocommerce-breadcrumb,
.blk-product .woocommerce-breadcrumb a {
	color: var(--wp--preset--color--muted);
}
.blk-product .woocommerce-breadcrumb {
	font-size: 14px;
}
.blk-eyebrow {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
}
.blk-product__title {
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--36);
	letter-spacing: -1px;
	line-height: 1.1;
}
@media (max-width: 599px) {
	.blk-product {
		padding-block: 12px 32px;
	}
	.blk-product__grid,
	.blk-product__buy {
		gap: 14px;
	}
	.blk-product__title {
		margin-top: 2px;
		font-size: var(--wp--preset--font-size--26);
		letter-spacing: 0;
	}
}