/*
 * Design System - AELITA
 * components/product-single-header.css - product single title + price header.
 *
 * WP3-PD2. Zero-visual-change ownership migration scoped only under the
 * existing per-CPT product-single roots already present on .carinfo:
 *   .a-moto-single, .a-quadro-single, .a-generator-single, .a-jetski-single.
 *
 * The legacy rules in main.css/media.css remain as fallback and are not
 * removed; design-system CSS loads before legacy main.css, so the scoped
 * selectors add exactly one class of specificity (0,2,0 vs 0,1,0) and win by
 * specificity, regardless of source order, without !important.
 *
 * Scope: container-level .car-title and .car-price only (typography, layout
 * and the responsive contracts at max-width:992, max-width:768 and
 * min-width:992). Not included: .car-title img / .car-title i / .car-title a /
 * .car-price a / .car-price .btn-primary (absent on these CPTs and/or legacy
 * !important), .car-price .price, .car-price .action-present, .super-price
 * span, .car-title-img (cars single only), and global h1 typography. The cars
 * single summary remains owned by single-car-summary.css (.a-car-single).
 *
 * Token used only where exact: bold -> --fw-bold (700). Token debt kept
 * literal: 1.6em, 1.7em, #000, 10px, 30px.
 *
 * The min-width:992 block is declared AFTER the max-width:992 block on
 * purpose: at exactly 992px both apply and this one must win for font-size /
 * margin-bottom, while text-align:center from max-width:992 persists (as in
 * legacy). Do not "simplify" this ordering.
 *
 * Loaded on the four product singles only (see inc/enqueue.php).
 */

.a-moto-single .car-price,
.a-quadro-single .car-price,
.a-generator-single .car-price,
.a-jetski-single .car-price {
	text-align: center;
}

/* Legacy @media (max-width:992px) contract. */
@media (max-width: 992px) {
	.a-moto-single .car-title,
	.a-quadro-single .car-title,
	.a-generator-single .car-title,
	.a-jetski-single .car-title,
	.a-moto-single .car-price,
	.a-quadro-single .car-price,
	.a-generator-single .car-price,
	.a-jetski-single .car-price {
		font-size: 1.6em;
		color: #000;
		text-align: center;
		text-transform: uppercase;
		font-weight: var(--fw-bold); /* bold (700) */
	}

	.a-moto-single .car-price,
	.a-quadro-single .car-price,
	.a-generator-single .car-price,
	.a-jetski-single .car-price,
	.a-moto-single .car-title,
	.a-quadro-single .car-title,
	.a-generator-single .car-title,
	.a-jetski-single .car-title {
		margin-bottom: 10px;
	}
}

/* Legacy @media (max-width:768px) contract. */
@media (max-width: 768px) {
	.a-moto-single .car-title,
	.a-quadro-single .car-title,
	.a-generator-single .car-title,
	.a-jetski-single .car-title {
		text-align: center;
	}
}

/* Legacy @media (min-width:992px) contract. Declared after the max-width:992
 * block on purpose: at exactly 992px both apply and this one must win for
 * font-size / margin-bottom, while text-align:center from max-width:992
 * persists (as in legacy). */
@media (min-width: 992px) {
	.a-moto-single .car-price,
	.a-quadro-single .car-price,
	.a-generator-single .car-price,
	.a-jetski-single .car-price,
	.a-moto-single .car-title,
	.a-quadro-single .car-title,
	.a-generator-single .car-title,
	.a-jetski-single .car-title {
		margin-bottom: 30px;
	}

	.a-moto-single .car-title,
	.a-quadro-single .car-title,
	.a-generator-single .car-title,
	.a-jetski-single .car-title,
	.a-moto-single .car-price,
	.a-quadro-single .car-price,
	.a-generator-single .car-price,
	.a-jetski-single .car-price {
		font-size: 1.7em;
		color: #000;
		text-transform: uppercase;
		font-weight: var(--fw-bold); /* bold (700) */
	}
}