/*
 * Constrained, not full bleed. Stretched across 1600px the panel put a
 * squeezed product shot beside a column holding only a price and a button,
 * with a large void to the right of it.
 */
/*
 * Image left, purchase right, spanning the full container like every other
 * block. The image is held to a square so it cannot outgrow the purchase
 * column; the purchase column carries the price, the add-to-cart and a row
 * of key points so it has as much substance as the image beside it.
 */
.product-buy__panel {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--sp-2xl);
	align-items: center;
	padding: var(--sp-lg);
	background-color: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
}

.product-buy__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	max-height: 480px;
	padding: var(--sp-md);
	/* White, so product photography shot on white blends instead of showing
	   its own slightly different off-white rectangle. */
	background-color: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
}

.product-buy__media img {
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.product-buy__name {
	margin-bottom: var(--sp-3xs);
	color: var(--c-accent-text);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
}

.product-buy__price {
	margin-bottom: var(--sp-md);
	color: var(--c-heading);
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-black);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--ls-heading);
}

.product-buy__price del { color: var(--c-text-muted); font-size: var(--fs-lg); font-weight: var(--fw-regular); }
.product-buy__price ins { text-decoration: none; }

/* WooCommerce's variation table, restyled to the theme. */
.product-buy__form table.variations {
	width: 100%;
	margin-bottom: var(--sp-sm);
	border: 0;
}

.product-buy__form table.variations th,
.product-buy__form table.variations td {
	padding: 0 0 var(--sp-2xs);
	border: 0;
	text-align: left;
	vertical-align: middle;
}

.product-buy__form table.variations label {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

.product-buy__form .woocommerce-variation-price {
	margin-bottom: var(--sp-sm);
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
}

.product-buy__form form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2xs);
	margin-bottom: var(--sp-md);
}

.product-buy__form .quantity input {
	width: 88px;
	min-height: 48px;
	text-align: center;
}

.product-buy__form .button {
	min-height: 48px;
	padding-inline: var(--sp-lg);
	font-size: var(--fs-md);
}

.product-buy__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-3xs) var(--sp-sm);
	margin: 0;
	padding-top: var(--sp-sm);
	border-top: 1px solid var(--c-border);
	font-size: var(--fs-sm);
}

.product-buy__meta dt {
	color: var(--c-text-muted);
	font-weight: var(--fw-medium);
}

.product-buy__meta dd { margin: 0; }
.product-buy__meta a { text-decoration: none; }

.product-buy__note {
	margin-top: var(--sp-sm);
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
}

.product-buy__note > * + * { margin-top: var(--sp-2xs); }

.product-buy__note ul {
	margin: 0;
	padding-left: 1.1em;
}

.product-buy__note li + li { margin-top: 2px; }

@media (max-width: 900px) {
	.product-buy__panel {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-lg);
		padding: var(--sp-md);
	}
}

/* Key points: a three-up row of short facts beneath the add-to-cart. */
.product-buy__points {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0;
	margin: var(--sp-md) 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--c-border);
	border-bottom: 1px solid var(--c-border);
}

.product-buy__point {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) 0;
}

.product-buy__point + .product-buy__point {
	padding-left: var(--sp-sm);
	border-left: 1px solid var(--c-border);
}

.product-buy__point-value {
	color: var(--c-heading);
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
}

.product-buy__point-label {
	color: var(--c-text-muted);
	font-size: var(--fs-xs);
}