/*
 * Design System - AELITA
 * components/generator-single-shell.css - Generator single shell (product media + bottom meta).
 *
 * WP3-P2B (Generator-only ownership). Zero-visual-change ownership migration
 * scoped only under .a-generator-single (added to the existing .carinfo root in
 * single-generatorpost.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, Generator manager
 * (.manager_call/.manager_contacts/#manager_call/.gen-manager-tel/
 * .call-manager_desk), .super-price, .moto_icons_row, title/price, badges,
 * 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 Generator single only (see inc/enqueue.php).
 */

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

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

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

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

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

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

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

@media (max-width: 992px) {
	.a-generator-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%;
}