@charset "utf-8";
/* CSS Document */

/* The new-vehicle showroom and the build-and-price page.
   Loaded alongside search.css, which already supplies .result-panel / .result-picture / .result-title
   - the showroom tiles are deliberately the same tiles the used lot uses, so a visitor moving between
   New and Used does not feel they have changed website. Only what differs is written here. */

/* Make filter */

.catalogue-make-filter {
	margin-bottom: 20px;
}

.catalogue-make-filter .btn {
	margin: 0 6px 6px 0;
}

/* "from" on a showroom card
   A model line spans trims, so the tile quotes the cheapest. The word carries the caveat, and it is
   deliberately quieter than the number it qualifies rather than the same weight. */

.catalogue-from {
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
	margin-right: 3px;
}

/* Model year page */

.catalogue-hero {
	margin-bottom: 20px;
}

.catalogue-hero img {
	width: 100%;
	height: auto;
}

.catalogue-copy {
	margin-bottom: 25px;
	line-height: 1.7;
}

.catalogue-spec-table th {
	width: 40%;
	font-weight: 600;
}

/* Build and price
   Sticky on a desktop so the running total stays visible while somebody scrolls the option list -
   a price that scrolls away is a price nobody is watching change. Released below the breakpoint,
   where the column is full width and stacks under the photo instead of beside it. */

.catalogue-builder {
	margin-bottom: 25px;
}

@media (min-width: 992px) {

	.catalogue-builder {
		position: sticky;
		top: 20px;
	}
}

.catalogue-builder-title {
	margin: 0;
	font-size: 18px;
}

.catalogue-build-group {
	margin-bottom: 18px;
}

.catalogue-build-group:last-child {
	margin-bottom: 0;
}

.catalogue-build-group-title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 8px;
	opacity: 0.75;
}

/* One option row.
   The whole row is the label, so the hit area is the row rather than the ten-pixel control - this
   list is used on phones more than anywhere else. */

.catalogue-option {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	font-weight: normal;
	margin: 0 0 4px;
	padding: 6px 8px;
	border-radius: 3px;
	cursor: pointer;
}

.catalogue-option:hover {
	background: rgba(0, 0, 0, 0.03);
}

/* A standard option cannot be unticked - it is part of the car. Dimmed so that reads as "included"
   rather than as "broken", and the cursor says so too. */

.catalogue-option input:disabled {
	cursor: default;
}

.catalogue-option:has(input:disabled) {
	opacity: 0.7;
	cursor: default;
}

.catalogue-option:has(input:disabled):hover {
	background: none;
}

.catalogue-option-name {
	flex: 1 1 auto;
}

.catalogue-option-price {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 0.9em;
}

/* Summary */

.catalogue-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
}

.catalogue-summary-total {
	font-weight: 700;
	font-size: 1.15em;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	margin-top: 6px;
	padding-top: 10px;
	margin-bottom: 12px;
}

/* Numbers that change as options are ticked, so they line up rather than jitter */

#catalogue-options-total,
#catalogue-grand-total {
	font-variant-numeric: tabular-nums;
}

.catalogue-disclaimer {
	font-size: 0.8em;
	opacity: 0.7;
	margin: 12px 0 0;
}

/* Rule warning
   Sits between the option list and the total, so it is read on the way to the price rather than
   after it. Hidden until a rule is actually broken - an always-present empty box reads as
   something that failed to load. */

.catalogue-rule-warning {
	margin: 0;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	font-size: 0.9em;
}