/* Блоки модуля "MD Групи товарів": смуга карток з горизонтальною прокруткою. Прокрутку пальцем і
   тачпадом дає браузер, перетягування мишею й стрілки - бібліотека MD Scroller (md_scroller.js). */

/* Смуга поза екраном не розкладається й не малюється - браузер малює її, коли вона наближається до екрана (на
   сторінці з кількома смугами прокрутка на телефонах легша). Місце під неї - приблизна висота смуги, після першого
   показу - її справжня висота (auto). Браузери без content-visibility показують усе, як і раніше. */
.md-product-groups__group {
	content-visibility: auto;
	contain-intrinsic-height: auto 560px;
}

@media (min-width: 768px) {
	.md-product-groups__group {
		contain-intrinsic-height: auto 640px;
	}
}

.md-product-groups__viewport {
	position: relative;
	/* Скільки карток видно - від ширини самої смуги, а не вікна (@container нижче): у вузькій колонці
	   (напр. content_bottom сторінки товару) їх менше. */
	container-type: inline-size;
}

/* Свій шар (z-index): картка під курсором піднімається темою (z-index 20-30) лише всередині смуги
   й не перекриває стрілки. */
.md-product-groups__track {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 10px;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}

.md-product-groups__track::-webkit-scrollbar {
	display: none;
}

.md-product-groups__track.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.md-product-groups__track.is-dragging * {
	cursor: grabbing;
}

/* Картки одного ряду однакової висоти, ціна й кошик унизу - як у сітці категорії (там обгортка
   картки .grid-view теж display: flex). Ширина: 2 картки, від 540px смуги - 3, від 820px - 4, від
   1050px - 5 (проміжок 10px). */
.md-product-groups__item {
	display: flex;
	flex: 0 0 calc((100% - 10px) / 2);
	min-width: 0;
}

@container (min-width: 540px) {
	.md-product-groups__item {
		flex-basis: calc((100% - 20px) / 3);
	}
}

@container (min-width: 820px) {
	.md-product-groups__item {
		flex-basis: calc((100% - 30px) / 4);
	}
}

@container (min-width: 1050px) {
	.md-product-groups__item {
		flex-basis: calc((100% - 40px) / 5);
	}
}

/* Браузери без container queries (до 2023 р.) - від ширини вікна. */
@supports not (container-type: inline-size) {
	@media (min-width: 576px) {
		.md-product-groups__item {
			flex-basis: calc((100% - 20px) / 3);
		}
	}

	@media (min-width: 992px) {
		.md-product-groups__item {
			flex-basis: calc((100% - 30px) / 4);
		}
	}

	@media (min-width: 1200px) {
		.md-product-groups__item {
			flex-basis: calc((100% - 40px) / 5);
		}
	}
}

.md-product-groups__item > .product-layout {
	display: flex;
	width: 100%;
}

/* Стрілки - як у каруселей теми (.owl-nav): кругла кнопка 40px, кольори теми. Видимі, поки в їхній
   бік є куди гортати (клас is-visible ставить MD Scroller); стрілка, що зникає, ще 0.5 с лишається
   на місці (уже вимкнена) й ловить кліки, щоб машинальний повторний клік не відкрив товар під нею. */
.md-product-groups__nav {
	position: absolute;
	top: 50%;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 0 4px;
	border: 2px solid rgba(0, 0, 0, .08);
	border-radius: 100%;
	color: var(--carousel-nav-btn-c, #333);
	background: var(--carousel-nav-btn-bg, #fff);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	transform: translate(0, -50%);
	transition: opacity .3s, visibility 0s .5s;
	will-change: opacity;
	-webkit-user-select: none;
	user-select: none;
}

.md-product-groups__nav.is-visible {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.md-product-groups__nav:hover {
	border-color: rgba(0, 0, 0, .2);
}

.md-product-groups__nav--prev {
	left: 10px;
}

.md-product-groups__nav--next {
	right: 10px;
}