/*
 * Design System - AELITA
 * components/moto-single-page.css - single moto page.
 *
 * Mirrors components/single-car-page.css so the moto page shares the car page's
 * design language: two-column hero (gallery + summary), status pill, price with
 * label, compact specs, primary CTA, secondary actions under the gallery, a flat
 * characteristics list, a description accordion and the salon/price note.
 * Consumes tokens.css only: no hex outside tokens, sharp radii, one red accent,
 * no gradients, no shadows except overlays. Loaded on single motos only.
 */

/* -------------------------------------------------------------------- */
/* Hero grid                                                            */
/* -------------------------------------------------------------------- */
.a-moto-single {
	margin-top: var(--space-6);
}

.a-moto-single__crumbs .a-breadcrumbs {
	flex: 1 1 auto;
	min-width: 0;
}

.a-moto-single__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: var(--space-6);
	align-items: start;
}

.a-moto-single__media,
.a-moto-single__summary {
	min-width: 0;
}

/* -------------------------------------------------------------------- */
/* Gallery                                                              */
/* -------------------------------------------------------------------- */
.a-moto-single__stage {
	position: relative;
}

.a-moto-single .carslider {
	max-width: 100%;
	overflow: hidden;
}

.a-moto-single .cars_images {
	position: relative;
	height: 0;
	padding-bottom: 75%;
	overflow: hidden;
	margin-bottom: 0;
	border: var(--border-w) solid var(--border);
	background-color: var(--bg-muted);
}

/* Reserve the media box before Slick runs (no CLS): show only the first slide
 * until the carousel is initialised. */
.a-moto-single .carslider:not(.slick-initialized) .a-moto-single__slide:not(:first-child) {
	display: none;
}

.a-moto-single .carslider .a-moto-single__slide {
	position: relative;
}

.a-moto-single .carslider .slick-slide > a,
.a-moto-single .carslider .a-moto-single__slide > a {
	display: block;
}

.a-moto-single .carslider .slick-slide img,
.a-moto-single .carslider .a-moto-single__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.a-moto-single__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	color: var(--c-ink-300);
	background-color: var(--bg-muted);
}

.a-moto-single__placeholder svg {
	width: 64px;
	height: 64px;
}

/* Slick arrows: reuse the shared .mainslider-arrow markup, restyle locally. */
.a-moto-single .mainslider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius);
	background-image: none;
	background-color: rgba(255, 255, 255, 0.9);
	color: var(--text-primary);
	cursor: pointer;
	transition:
		background-color var(--dur-press) var(--ease-out),
		border-color var(--dur-press) var(--ease-out),
		color var(--dur-press) var(--ease-out);
}

.a-moto-single .mainslider-arrow::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.a-moto-single .mainslider-prev {
	left: var(--space-3);
}

.a-moto-single .mainslider-prev::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
}

.a-moto-single .mainslider-next {
	right: var(--space-3);
}

.a-moto-single .mainslider-next::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

.a-moto-single .mainslider-arrow.slick-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.a-moto-single .mainslider-arrow:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);
}

@media (hover: hover) and (pointer: fine) {
	.a-moto-single .mainslider-arrow:hover {
		background-image: none;
		background-color: var(--bg);
		border-color: var(--c-red-600);
		color: var(--c-red-600);
	}
}

@media (prefers-reduced-motion: reduce) {
	.a-moto-single .mainslider-arrow {
		transition: none;
	}
}

@media (max-width: 991px) {
	.a-moto-single .mainslider-arrow {
		display: none;
	}
}

/* Badges over the photo. */
.a-moto-single__badges {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	max-width: calc(100% - var(--space-5));
}

.a-moto-single__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius);
	background-color: var(--c-ink-800);
	color: var(--c-white);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.a-moto-single__badge svg {
	width: 15px;
	height: 15px;
}

.a-moto-single__badge--in_stock {
	background-color: var(--status-success);
}

.a-moto-single__badge--on_order,
.a-moto-single__badge--in_transit {
	background-color: var(--c-ink-500);
}

.a-moto-single__badge--action {
	background-color: var(--sticker-action);
}

.a-moto-single__badge--testdrive {
	background-color: var(--sticker-testdrive);
}

.a-moto-single__badge--sold {
	background-color: var(--c-ink-900);
}

/* Counter. */
.a-moto-single__counter {
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-3);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius);
	background-color: rgba(22, 22, 24, 0.72);
	color: var(--c-white);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
}

.a-moto-single__counter-icon {
	display: inline-flex;
}

.a-moto-single__counter-icon svg {
	width: 15px;
	height: 15px;
}

/* Thumbnail rail: native scroller, three per view, scroll-snap. */
.a-moto-single__thumbs {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

.a-moto-single__thumb {
	position: relative;
	flex: 0 0 calc((100% - 2 * var(--space-2)) / 3);
	scroll-snap-align: start;
	padding: 0;
	border: 2px solid transparent;
	background-color: var(--bg-muted);
	cursor: pointer;
	overflow: hidden;
	transition: border-color var(--dur-press) var(--ease-out);
}

.a-moto-single__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.a-moto-single__thumb.is-active {
	border-color: var(--c-red-600);
}

.a-moto-single__thumb:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.a-moto-single__thumb:hover {
		border-color: var(--text-secondary);
	}

	.a-moto-single__thumb.is-active:hover {
		border-color: var(--c-red-600);
	}
}

/* Secondary actions under the gallery (as on the car page). */
.a-moto-single__media-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.a-moto-single__media-cta {
	flex: 1 1 0;
	min-width: 0;
}

.a-button.a-moto-single__media-cta {
	min-height: 46px;
	padding: var(--space-3) var(--space-4);
	border-width: var(--border-w);
	border-color: var(--border);
	background-color: var(--bg);
	color: var(--text-primary);
	font-weight: var(--fw-regular);
	white-space: normal;
	text-align: center;
}

.a-moto-single__media-cta .a-moto-single__cta-icon {
	color: var(--text-secondary);
	transition: color var(--dur-press) var(--ease-out);
}

.a-moto-single__media-cta .a-moto-single__cta-icon svg {
	width: 16px;
	height: 16px;
}

.a-button.a-moto-single__media-cta:active {
	transform: none;
}

@media (hover: hover) and (pointer: fine) {
	.a-button.a-moto-single__media-cta:hover {
		background-color: var(--bg-muted);
		border-color: var(--c-red-600);
		color: var(--text-primary);
	}

	.a-button.a-moto-single__media-cta:hover .a-moto-single__cta-icon {
		color: var(--c-red-600);
	}
}

.a-button.a-moto-single__media-cta:focus-visible {
	border-color: var(--c-red-600);
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);
}

.a-button.a-moto-single__media-cta:focus-visible .a-moto-single__cta-icon {
	color: var(--c-red-600);
}

/* Trust strip. */
.a-moto-single__trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--space-3);
	margin: var(--space-3) 0 0;
	padding: var(--space-3) 0 0;
	border-top: var(--border-w) solid var(--border);
	list-style: none;
}

.a-moto-single__trust-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--text-secondary);
	font-size: var(--fs-small);
}

.a-moto-single__trust-icon {
	display: inline-flex;
	color: var(--c-red-600);
}

.a-moto-single__trust-icon svg {
	width: 18px;
	height: 18px;
}

/* -------------------------------------------------------------------- */
/* Summary                                                              */
/* -------------------------------------------------------------------- */
.a-moto-single__summary-inner {
	padding: var(--space-5);
	border: var(--border-w) solid var(--border);
}

.a-moto-single__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
	color: var(--text-secondary);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.a-moto-single__eyebrow-brand {
	color: var(--c-red-600);
	text-decoration: none;
}

.a-moto-single__eyebrow-brand:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.a-moto-single__eyebrow-brand:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.a-moto-single__title {
	margin: 0 0 var(--space-3);
	color: var(--text-primary);
	font-family: var(--font-display-strong);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
}

/* Status pill (same treatment as the car page). */
.a-moto-single__status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin: 0 0 var(--space-4);
	padding: var(--space-1) var(--space-3);
	border: var(--border-w) solid var(--border);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}

.a-moto-single__status svg {
	width: 16px;
	height: 16px;
}

.a-moto-single__status--in_stock {
	color: var(--status-success);
	border-color: var(--status-success);
}

.a-moto-single__status--in_stock svg {
	color: var(--status-success);
}

/* Price */
.a-moto-single__price {
	margin: 0 0 var(--space-5);
	padding: var(--space-4);
	border: var(--border-w) solid var(--border);
	background-color: var(--bg-muted);
}

.a-moto-single__price-label {
	display: block;
	margin-bottom: var(--space-2);
	color: var(--text-secondary);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.a-moto-single__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3);
}

.a-moto-single__price-current {
	color: var(--c-red-600);
	font-family: var(--font-display-strong);
	font-size: 30px;
	font-weight: var(--fw-bold);
	line-height: 1.1;
}

.a-moto-single__price-current small {
	font-size: 0.55em;
	font-weight: var(--fw-semibold);
}

.a-moto-single__price-old {
	color: var(--text-secondary);
	font-size: var(--fs-body);
	text-decoration: line-through;
}

.a-moto-single__price--sold {
	text-align: center;
}

.a-moto-single__price-sold {
	color: var(--text-primary);
	font-family: var(--font-display-strong);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
}

/* Compact specs */
.a-moto-single__specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	padding: 0;
}

.a-moto-single__spec {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3);
	border: var(--border-w) solid var(--border);
}

.a-moto-single__spec-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--text-secondary);
}

.a-moto-single__spec-icon svg {
	width: 20px;
	height: 20px;
}

.a-moto-single__spec-text {
	min-width: 0;
}

.a-moto-single__spec-label {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--fs-caption);
}

.a-moto-single__spec-value {
	margin: 0;
	color: var(--text-primary);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* Primary CTA */
.a-moto-single__buy {
	width: 100%;
}

.a-moto-single__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.a-moto-single__cta-icon svg {
	width: 18px;
	height: 18px;
}

.a-moto-single__cta-label {
	min-width: 0;
}

/* Salon line */
.a-moto-single__salon {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: var(--space-5) 0 0;
	padding-top: var(--space-5);
	border-top: var(--border-w) solid var(--border);
}

.a-moto-single__salon-label {
	color: var(--text-secondary);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.a-moto-single__salon-value {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	color: var(--text-primary);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.a-moto-single__salon-icon {
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--c-ink-300);
}

.a-moto-single__salon-icon svg {
	width: 18px;
	height: 18px;
}

/* Manager */
.a-moto-single__manager {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: var(--border-w) solid var(--border);
}

.a-moto-single__manager-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--bg-muted);
	color: var(--c-red-600);
}

.a-moto-single__manager-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.a-moto-single__manager-role {
	color: var(--text-secondary);
	font-size: var(--fs-caption);
}

.a-moto-single__manager-phones {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-4);
}

.a-moto-single__manager-phone {
	color: var(--text-primary);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	text-decoration: none;
	white-space: nowrap;
}

.a-moto-single__manager-phone + .a-moto-single__manager-phone {
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
}

.a-moto-single__manager-phone:hover,
.a-moto-single__manager-phone:focus-visible {
	color: var(--c-red-600);
}

.a-moto-single__viber {
	margin-left: auto;
}

/* -------------------------------------------------------------------- */
/* Sections                                                             */
/* -------------------------------------------------------------------- */
.a-moto-single__section {
	margin-top: var(--space-8);
}

.a-moto-single__section-title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	color: var(--text-primary);
	font-family: var(--font-display-strong);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.a-moto-single__section-title::before {
	content: "";
	width: var(--space-1);
	height: 1.1em;
	background-color: var(--c-red-600);
}

/* Characteristics list */
.a-moto-single__spec-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--space-8);
	margin: 0;
}

.a-moto-single__spec-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: var(--border-w) solid var(--border);
}

.a-moto-single__spec-row-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--fs-small);
}

.a-moto-single__spec-row-icon {
	display: inline-flex;
	color: var(--c-ink-300);
}

.a-moto-single__spec-row-icon svg {
	width: 18px;
	height: 18px;
}

.a-moto-single__spec-row-value {
	margin: 0;
	color: var(--text-primary);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	text-align: right;
}

/* Description accordion (no dividers: the "Опис" block is the last section). */
.a-moto-single__accordion {
	border-top: 0;
}

.a-moto-single__acc {
	border-bottom: 0;
}

.a-moto-single__acc-head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-2);
	cursor: pointer;
	list-style: none;
}

.a-moto-single__acc-head::-webkit-details-marker {
	display: none;
}

.a-moto-single__acc-title {
	margin-right: auto;
	color: var(--text-primary);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
}

.a-moto-single__acc-chevron {
	display: inline-flex;
	color: var(--text-secondary);
	transition: transform var(--dur-popover) var(--ease-out);
}

.a-moto-single__acc[open] .a-moto-single__acc-chevron {
	transform: rotate(180deg);
}

.a-moto-single__acc-head:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.a-moto-single__acc-body {
	padding: 0 var(--space-2) var(--space-5);
}

@keyframes a-moto-single-acc-open {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.a-moto-single__acc[open] > .a-moto-single__acc-body {
	animation: a-moto-single-acc-open var(--dur-popover) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
	.a-moto-single__acc[open] > .a-moto-single__acc-body {
		animation: none;
	}
}

.a-moto-single__prose {
	max-width: 82ch;
	color: var(--text-primary);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.a-moto-single__prose p,
.a-moto-single__prose ul,
.a-moto-single__prose ol,
.a-moto-single__prose blockquote,
.a-moto-single__prose table {
	margin: 0 0 var(--space-4);
}

.a-moto-single__prose > *:last-child {
	margin-bottom: 0;
}

.a-moto-single__prose ul,
.a-moto-single__prose ol {
	padding-left: var(--space-5);
}

.a-moto-single__prose li + li {
	margin-top: var(--space-2);
}

/* -------------------------------------------------------------------- */
/* Bottom meta + share                                                  */
/* -------------------------------------------------------------------- */
.a-moto-single__bottom {
	margin-top: var(--space-7);
}

.a-moto-single__meta {
	max-width: 62ch;
}

.a-moto-single__note {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--fs-caption);
	line-height: 1.5;
}

/* -------------------------------------------------------------------- */
/* Contact CTA band (single moto only): real inline SVG icons, drop the   */
/* legacy masked glyph. The band itself is shared and unchanged.          */
/* -------------------------------------------------------------------- */
#feedback-call .formbutton-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

#feedback-call .formbutton-ico svg {
	width: 18px;
	height: 18px;
}

#feedback-call .formbutton-txt {
	min-width: 0;
}

#feedback-call .formbutton.formbutton::before {
	content: none;
}

/* Sent lead form: hide the fields and the action row, keep the confirmation. */
.feedback-form.is-sent .feedback-form__fields,
.feedback-form.is-sent .feedback-form__actions,
.feedback-form.is-sent .row[id$="-title"] {
	display: none;
}

/* -------------------------------------------------------------------- */
/* Responsive                                                           */
/* -------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.a-moto-single__hero {
		grid-template-columns: minmax(0, 1fr) 340px;
	}
}

@media (max-width: 991px) {
	.a-moto-single__hero {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-5);
	}

	.a-moto-single__summary-inner {
		padding: var(--space-4);
	}

	.a-moto-single__spec-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.a-moto-single__media-actions {
		flex-direction: column;
	}

	.a-moto-single__media-cta {
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (max-width: 575px) {
	.a-moto-single__price-current {
		font-size: 26px;
	}

	.a-moto-single__thumbs {
		gap: var(--space-1);
	}

	.a-moto-single__thumb {
		flex-basis: calc((100% - 2 * var(--space-1)) / 3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.a-moto-single__thumb,
	.a-moto-single__acc-chevron {
		transition: none;
	}
}