/* =========================================================
   1. БАЗОВЕ ВИРІВНЮВАННЯ РОЗМІРІВ
   
   Змушує padding і border входити в задану ширину та висоту
   всіх елементів слайдера.
========================================================= */

.vm-market-recommended-slider,
.vm-market-recommended-slider * {
	box-sizing: border-box;
}


/* =========================================================
   2. ГОЛОВНИЙ КОНТЕЙНЕР СЛАЙДЕРА
   
   --vm-slider-accent — глобальний акцентний колір Elementor.
   --vm-slider-white — білий колір із системи Market.
   overflow: hidden — обрізає картки за межами контейнера.
========================================================= */

.vm-market-recommended-slider {
	--vm-slider-accent: var(--e-global-color-accent, #ae1d27);
	--vm-slider-white: var(--vm-market-surface-white, #fff);

	width: 100%;
	min-width: 0;
	overflow: hidden;

	color: var(--vm-slider-white);
	font-family: inherit;
}


/* =========================================================
   3. ПОСИЛАННЯ ВСЕРЕДИНІ СЛАЙДЕРА
   
   Успадковують колір батьківського елемента.
   Стандартне підкреслення посилань вимкнене.
========================================================= */

.vm-market-recommended-slider a {
	color: inherit;
	text-decoration: none;
}


/* =========================================================
   4. УСІ SVG-ІКОНКИ СЛАЙДЕРА
   
   Іконки використовують поточний колір тексту.
========================================================= */

.vm-market-recommended-slider svg {
	width: 1em;
	height: 1em;

	fill: none;
	stroke: currentColor;
}


/* =========================================================
   5. ГОРИЗОНТАЛЬНА СТРІЧКА З КАРТКАМИ
   
   display: flex — картки розташовуються горизонтально.
   gap — відстань між картками.
   padding-right — залишає місце після останньої картки.
========================================================= */

.vm-market-recommended-slider__track {
	display: flex;
	align-items: flex-start;

	gap: 12px;
	padding-right: clamp(24px, 7vw, 72px);
}


/* =========================================================
   6. ОКРЕМА КАРТКА ТОВАРУ
   
   grid-template-columns:
   66% — зображення;
   34% — інформаційний блок.

   flex-basis — ширина картки в горизонтальному слайдері.
   height — адаптивна висота картки.
========================================================= */

.vm-market-recommended-slider__card {
	position: relative;

	display: grid;
	grid-template-columns:
		minmax(0, 60%)
		minmax(0, 40%);

	flex: 0 0 min(84vw, 660px);
	height: clamp(180px, 26vw, 280px);
	min-width: 0;

	overflow: hidden;

	border: 1px solid color-mix(
		in srgb,
		currentColor 15%,
		transparent
	);

	border-radius: 8px;

	background: color-mix(
		in srgb,
		var(--vm-color-dark, #0d0b0c) 28%,
		transparent
	);
}


/* =========================================================
   7. КОНТЕЙНЕР ЗОБРАЖЕННЯ
   
   __media — зовнішня область фото, до якої прив’язаний wishlist.
   __image — клікабельне посилання із самим зображенням.
========================================================= */

.vm-market-recommended-slider__media,
.vm-market-recommended-slider__image {
	position: relative;

	display: block;
	min-width: 0;
	height: 100%;

	overflow: hidden;
}


/* =========================================================
   8. ЗОБРАЖЕННЯ ТОВАРУ
   
   Займає всю область фото.
   object-fit: cover — заповнює контейнер із можливим обрізанням.
========================================================= */

.vm-market-recommended-slider__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}


/* =========================================================
   9. КНОПКА WISHLIST НА ЗОБРАЖЕННІ
   
   Визначає колір сердечка.
   Його позиція задається у спільному файлі wishlist.css.
========================================================= */

.vm-market-recommended-slider__media .vm-market-wishlist {
	color: color-mix(
		in srgb,
		var(--vm-slider-white) 76%,
		transparent
	);
}


/* =========================================================
   10. ІНФОРМАЦІЙНА ЧАСТИНА КАРТКИ
   
   Містить категорію, назву, ціну та кнопку додавання.
   flex-direction: column — елементи розташовані вертикально.
   justify-content: center — весь контент центрується по висоті.
========================================================= */

.vm-market-recommended-slider__body {
	display: flex;
	min-width: 0;
	position: relative;
	justify-content: center;
	flex-direction: column;

	padding: clamp(10px, 2vw, 20px);
}


/* =========================================================
   11. КАТЕГОРІЯ ТОВАРУ
   
   Це перший span безпосередньо всередині інформаційного блока.
========================================================= */

.vm-market-recommended-slider__body > span {
	opacity: 0.52;

	font-size: clamp(8px, 0.8vw, 10px);
	text-transform: uppercase;
}


/* =========================================================
   12. КОНТЕЙНЕР НАЗВИ ТОВАРУ
   
   Відступи між категорією, назвою та нижнім рядком.
========================================================= */

.vm-market-recommended-slider__body h3 {
	margin: 5px 0 10px;
	overflow: hidden;

	font-size: clamp(11px, 1.2vw, 16px);
	line-height: 1.15;

	text-overflow: ellipsis;
}


/* =========================================================
   13. ОБМЕЖЕННЯ НАЗВИ ТОВАРУ
   
   Максимум два рядки.
   Довший текст обрізається.
========================================================= */

.vm-market-recommended-slider__body h3 a {
	display: -webkit-box;
	overflow: hidden;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}


/* =========================================================
   14. ЦІНА ТОВАРУ
   
   Підтримує звичайну та акційну ціну.
   flex-wrap дозволяє перенести ціну, якщо бракує місця.
========================================================= */

.vm-market-recommended-slider .vm-market-price {
	display: flex;
	flex-wrap: wrap;

	gap: 5px;

	font-size: clamp(10px, 1vw, 13px);
	font-weight: 600;
}


/* =========================================================
   15. СТАРА ЗАКРЕСЛЕНА ЦІНА
========================================================= */

.vm-market-recommended-slider .vm-market-price del {
	opacity: 0.46;
}


/* =========================================================
   16. НОВА АКЦІЙНА ЦІНА
   
   Прибирає стандартне підкреслення HTML-елемента <ins>.
========================================================= */

.vm-market-recommended-slider .vm-market-price ins {
	text-decoration: none;
}


/* =========================================================
   17. НИЖНІЙ РЯДОК КАРТКИ
   
   Ціна розташовується зліва.
   Кнопка додавання до кошика — справа.
========================================================= */

.vm-market-recommended-slider__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 8px;
}


/* =========================================================
   18. КНОПКА ДОДАВАННЯ ДО КОШИКА
   
   Кругла кнопка з плюсом.
========================================================= */

.vm-market-recommended-slider .vm-market-add {
	display: grid;
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;

	place-items: center;
	padding: 0;

	border: 1px solid var(--vm-slider-accent);
	border-radius: 50%;

	background: transparent;
	color: var(--vm-slider-accent);
}


/* =========================================================
   19. ЗАГАЛЬНИЙ БЛОК НАВІГАЦІЇ
   
   Містить:
   - дві стрілки;
   - індикатори слайдів.

   gap — відстань між групою стрілок та dots.
========================================================= */

.vm-market-recommended-slider__controls {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	gap: clamp(28px, 7vw, 54px);
	margin-top: 12px;
}


/* =========================================================
   20. ГРУПА СТРІЛОК І ГРУПА DOTS
   
   Внутрішні елементи кожної групи стоять горизонтально.
========================================================= */

.vm-market-recommended-slider__arrows,
.vm-market-recommended-slider__dots {
	display: flex;
	align-items: center;

	gap: 7px;
}


/* =========================================================
   21. КНОПКИ-СТРІЛКИ
   
   appearance: none прибирає стандартне оформлення браузера.
   Висока специфічність селектора захищає від стилів Elementor.
========================================================= */

.vm-market-recommended-slider
.vm-market-recommended-slider__arrows button {
	appearance: none;

	display: grid;
	width: 36px;
	height: 36px;

	place-items: center;
	padding: 0;

	border: 1px solid color-mix(
		in srgb,
		currentColor 18%,
		transparent
	);

	border-radius: 50%;

	background-color: transparent;
	color: inherit;

	box-shadow: none;
}


/* =========================================================
   22. СТРІЛКИ ПРИ НАВЕДЕННІ АБО ФОКУСІ
   
   Змінюється тільки колір рамки.
========================================================= */

.vm-market-recommended-slider
.vm-market-recommended-slider__arrows button:hover,
.vm-market-recommended-slider
.vm-market-recommended-slider__arrows button:focus {
	border-color: var(--vm-slider-accent);
	background-color: transparent;
	color: inherit;
}


/* =========================================================
   23. ЛІВА СТРІЛКА
   
   Використовується та сама SVG-іконка, але розвернута на 180°.
========================================================= */

.vm-market-recommended-slider
.vm-market-recommended-slider__arrows button:first-child svg {
	transform: rotate(180deg);
}


/* =========================================================
   24. НЕАКТИВНА СТРІЛКА
   
   Наприклад, ліва стрілка на першому слайді.
========================================================= */

.vm-market-recommended-slider
.vm-market-recommended-slider__arrows button:disabled {
	opacity: 0.35;
}


/* =========================================================
   25. ІНДИКАТОРИ СЛАЙДІВ
   
   Кожна маленька крапка відповідає одному товару.
========================================================= */

.vm-market-recommended-slider
.vm-market-recommended-slider__dots button {
	appearance: none;

	width: 6px;
	height: 6px;

	padding: 0;
	border: 0;
	border-radius: 50%;

	background: color-mix(
		in srgb,
		currentColor 32%,
		transparent
	);

	box-shadow: none;
}


/* =========================================================
   26. АКТИВНИЙ ІНДИКАТОР
   
   Поточний слайд позначається акцентним кольором Elementor.
========================================================= */

.vm-market-recommended-slider
.vm-market-recommended-slider__dots button.is-active {
	background: var(--vm-slider-accent);
}


/* =========================================================
   27. МОБІЛЬНА ВЕРСІЯ
   
   Ці правила працюють при ширині екрана до 767px.
========================================================= */

@media (max-width: 767px) {

	/* Відстань між картками та запас після останньої картки. */
	.vm-market-recommended-slider__track {
		gap: 8px;
		padding-right: clamp(27px, 6.65vw, 34px);
	}


	/* Мобільна ширина та висота картки. */
	.vm-market-recommended-slider__card {
		flex-basis: 92%;
		height: clamp(128px, 32vw, 142px);
	}


	/* Внутрішні відступи інформаційного блока. */
	.vm-market-recommended-slider__body {
		padding: clamp(7px, 1.95vw, 10px);
	}


	/* Розмір і відступи назви товару. */
	.vm-market-recommended-slider__body h3 {
		margin: 4px 0 7px;
		font-size: 11px;
	}


	/* Відстань між карткою та навігацією. */
	.vm-market-recommended-slider__controls {
		margin-top: 16px;
	}


	/* Мобільний розмір кнопки додавання до кошика. */
	.vm-market-recommended-slider .vm-market-add {
		width: 24px;
		height: 24px;
		flex-basis: 24px;
	}
}