.hartwell-specifications {
	/*
	 * margin-top: 0 is deliberate — the gap above this section is already
	 * provided by form.cart's own margin-bottom (3rem, set in
	 * hartwell-product-summary.css). Setting a top margin here too would
	 * either double up or silently collapse into it, making the actual gap
	 * unpredictable.
	 */
	margin: 0 0 2rem;
	color: var(--hartwell-black);
}

.hartwell-specifications__title {
	font-size: 1.1em;
	margin: 0 0 0.75em;
	color: var(--hartwell-black);
}

.hartwell-specifications__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem 4rem;
	background-color: var(--hartwell-section-bg-light);
	padding: 1.75rem;
}

@media (max-width: 600px) {
	.hartwell-specifications__columns {
		grid-template-columns: 1fr;
		gap: 1em;
	}
}

/*
 * Smaller and bolder than the field names below it — this is a category
 * label ("RING" / "DIAMANT"), not the section's main content. font-weight is
 * set explicitly here (not inherited from .font-heading-alt's 400) because
 * this stylesheet is enqueued after hartwell-type.css (see
 * functions.php), so at the tied (0,1,0) specificity this declaration wins
 * the cascade on source order alone, no !important needed.
 */
.hartwell-specifications__group-title {
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 0.75em;
	color: var(--hartwell-black);
}

.hartwell-specifications__list {
	margin: 0;
}

.hartwell-specifications__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	padding: 0.6em 0;
	border-bottom: 1px solid var(--hartwell-product-backdrop);
}

.hartwell-specifications__row:last-child {
	border-bottom: none;
}

.hartwell-specifications__row dt {
	font-weight: 400;
	color: var(--hartwell-black);
}

.hartwell-specifications__row dd {
	margin: 0;
	font-weight: 700;
	color: var(--hartwell-black);
	text-align: right;
}