/*
 * Loaded site-wide, not just on the comparison page.
 *
 * The Divi Theme Builder header pins its nav row to a fixed width sized for the
 * four original items. Adding "Price Comparison" makes a fifth, so the row has
 * to be widened everywhere or it wraps onto two lines on every other page.
 */

/*
 * !important is load-bearing here: Divi prints its dynamic module CSS inline in
 * the head after enqueued stylesheets, and its rule has the same specificity,
 * so source order alone would lose.
 */
.head-sec-rwcls .rw-h .cus-col {
	min-width: 780px !important;
	max-width: 900px !important;
}

/*
 * The row is flex with space-between, so items don't grow to fit their text —
 * "Price Comparison" breaks over two lines and drags the whole bar with it.
 */
.head-sec-rwcls .rw-h .cus-col .et_pb_text,
.head-sec-rwcls .rw-h .cus-col .et_pb_text a,
.head-sec-rwcls .rw-h .cus-col .et_pb_text .et_pb_text_inner {
	white-space: nowrap !important;
	flex-shrink: 0;
}

@media (max-width: 980px) {
	.head-sec-rwcls .rw-h .cus-col {
		min-width: 0 !important;
		max-width: 100% !important;
	}
}

/*
 * Five items no longer fit on one line on a phone, so the row has to wrap. Divi
 * sets space-between, which strands the last items against the edges once it
 * does — centre it and use an explicit gap instead.
 */
@media (max-width: 700px) {
	.head-sec-rwcls .rw-h .cus-col {
		flex-wrap: wrap !important;
		justify-content: center !important;
		row-gap: 8px;
		column-gap: 4px;
	}
}