/*
 * Design System - AELITA
 * components/quadro-single-shell.css - Quadro single shell (product media + bottom meta).
 *
 * WP3-P2A (Quadro-only ownership). Zero-visual-change ownership migration
 * scoped only under .a-quadro-single (added to the existing .carinfo root in
 * single-quadropost.php). The legacy rules in main.css/media.css remain as the
 * fallback and are not removed; design-system CSS loads before legacy main.css,
 * so the scoped selectors win by specificity, regardless of source order,
 * without !important.
 *
 * Scope: media shell (.cars_images, .carslider, .car-info_md) and bottom meta
 * (.car-tech_pricetext, .car-tech_pricetext_mobile, .social-share ul,
 * .social-share ul li, responsive .social-share).
 * Excluded: Slick internals / .carslider-nav / arrows, badges/stickers, manager,
 * .car-title / .car-price, .moto_icons_row, .panel* accordion, feedback/forms,
 * #viber_share JS.
 *
 * Exact tokens mapped (12px -> --fs-caption, 8px -> --space-2). Token debt
 * kept literal: #4d4d4d, 20px, 5px, 100%, 10px, 30px.
 *
 * Loaded on Quadro single only (see inc/enqueue.php).
 */

.a-quadro-single .cars_images {
	position: relative;
	width: 100%;
	margin-bottom: 5px;
}

.a-quadro-single .carslider {
	max-width: 100%;
}

.a-quadro-single .car-tech_pricetext {
	font-size: var(--fs-caption); /* 12px */
	color: #4d4d4d;
}

.a-quadro-single .car-tech_pricetext_mobile {
	padding-top: 20px;
	padding-bottom: 20px;
}

.a-quadro-single .social-share ul {
	list-style: none;
	overflow: hidden;
}

.a-quadro-single .social-share ul li {
	display: inline-block;
	margin-left: var(--space-2); /* 8px */
}

@media (min-width: 992px) {
	.a-quadro-single .car-info_md {
		margin-bottom: 30px;
	}
}

@media (max-width: 992px) {
	.a-quadro-single .social-share {
		margin-top: 10px;
		margin-bottom: 20px;
		float: none;
		overflow: hidden;
	}
}

/* <picture> wrapper: keep the gallery media box identical to the plain <img> layout. */
.carslider picture,
.carslider-nav picture {
	display: block;
	width: 100%;
}