/* Q-components: карусель (handle q-carousel + q-carousel.js). DESIGN.md «Карусель» */
.q-carousel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.q-carousel [hidden] { display: none !important; }
.q-carousel--head { grid-template-columns: minmax(0, 1fr) auto; gap: 18px 16px; align-items: baseline; }
.q-carousel--head > .q-carousel__title { grid-column: 1; grid-row: 1; min-width: 0; }
.q-carousel--head > .q-carousel__controls { grid-column: 2; grid-row: 1; justify-self: end; }

/* Лента (0,2,0) против сбросов ul плагинов; без CSS smooth (LCP) */
.q-carousel > .q-carousel__track {
	--_per: var(--q-carousel-per, 4);
	--_gap: var(--q-carousel-gap, 20px);
	grid-column: 1 / -1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--_per) - 1) * var(--_gap)) / var(--_per));
	gap: var(--_gap);
	align-items: stretch;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	list-style: none;
	margin: -8px 0 -40px;
	padding: 8px 0 40px;
}
.q-carousel__track::-webkit-scrollbar { display: none; }
.q-carousel__track > .q-carousel__item { display: flex; min-width: 0; margin: 0; list-style: none; scroll-snap-align: start; }
.q-carousel__track > .q-carousel__item::before { content: none; }

.q-carousel__controls { display: inline-flex; align-items: center; justify-self: center; align-self: center; gap: 18px; max-width: 100%; }

/* Точки */
.q-dots { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; min-width: 0; gap: 0 8px; }
.q-dot {
	position: relative;
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0 -8px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--q-radius-pill) !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: width var(--q-med) var(--q-ease);
}
.q-dot::before { content: ''; position: absolute; inset: 8px; border-radius: var(--q-radius-pill); background: var(--q-sand-deep); transition: background-color var(--q-med) var(--q-ease); }
.q-dot:is(.is-selected, [aria-current="true"]) { width: 38px; }
.q-dot:is(.is-selected, [aria-current="true"])::before { background: var(--q-orange); }
@media (hover: hover) { .q-dot:not(.is-selected, [aria-current="true"]):hover::before { background: var(--q-wood); } }

@media (max-width: 1024px) {
	.q-carousel { gap: 14px; }
	.q-carousel--head { gap: 14px 16px; }
	.q-carousel > .q-carousel__track { --_per: var(--q-carousel-per-t, 3); --_gap: var(--q-carousel-gap-t, 14px); }
}
@media (max-width: 640px) {
	.q-carousel, .q-carousel--head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.q-carousel--head > .q-carousel__controls { grid-column: 1; grid-row: auto; justify-self: center; }
	.q-carousel__controls { gap: 12px; }
	.q-dots { column-gap: 4px; }
	.q-carousel > .q-carousel__track { --_per: var(--q-carousel-per-m, 1); --_gap: var(--q-carousel-gap-m, 12px); }
}
@media (prefers-reduced-motion: reduce) { .q-dot, .q-dot::before { transition: none; } }