/*
 * Vertical rhythm and heading scale for the single-product summary column
 * (`.summary.entry-summary`). Font family/weight stay exactly as set in
 * hartwell-type.css — this file only touches size, margin, and layout
 * (variation table -> stacked blocks) so spacing is deliberate instead of
 * inherited from mismatched Kadence/WooCommerce/browser defaults.
 *
 * Scale for gaps between major blocks: 1.5rem (closely related), 2rem
 * (distinct blocks), 3rem (major section break). Every rule below sets
 * margin-top: 0 (via child combinator, direct children only) so its own
 * margin-bottom is the sole source of the gap to the next block, instead of
 * relying on margin collapsing between two different unrelated values.
 */

.summary.entry-summary > .product_title {
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	margin: 0 0 1.5rem;
}

.summary.entry-summary > .price {
	margin: 0 0 2rem;
}

.summary.entry-summary > .woocommerce-product-details__short-description {
	margin: 0 0 2rem;
}

.summary.entry-summary > form.cart {
	margin: 0 0 3rem;
}

/*
 * Variation attribute rows (Ringstørrelse, Gullfarge): stack each label
 * above its control instead of WooCommerce's default side-by-side table
 * row, and give each attribute group consistent room from the next one.
 */
.summary.entry-summary .variations,
.summary.entry-summary .variations tbody,
.summary.entry-summary .variations tr,
.summary.entry-summary .variations th,
.summary.entry-summary .variations td {
	display: block;
	width: 100%;
}

.summary.entry-summary .variations tr {
	margin: 0 0 1.5rem;
}

.summary.entry-summary .variations tr:last-child {
	margin-bottom: 0;
}

.summary.entry-summary .variations th.label,
.summary.entry-summary .variations td.label {
	padding: 0 0 0.5rem;
	line-height: 1.4;
}

.summary.entry-summary .variations td.value {
	padding: 0;
	line-height: 1.4;
}

/*
 * Color swatches (Gullfarge) render too close together with the Variation
 * Swatches for WooCommerce plugin's default 10px per-side margin (20px
 * gap). !important matches the plugin's own use of it and guarantees this
 * wins regardless of stylesheet load order.
 */
.summary.entry-summary .variations .tawcvs-swatches .swatch,
.summary.entry-summary .variations .tawcvs-swatches .swatch-show-more {
	margin: 0 16px !important;
}
