/**
 * MARKET — BESTSELLERS.
 *
 * Elementor owns the outer section heading, spacing, background and geometry.
 * This file styles only the reusable WooCommerce carousel rendered by the
 * [vm_market_bestsellers] shortcode.
 */

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

.vm-market-bestsellers {
	--vm-bestsellers-accent: var(--e-global-color-accent, #ae1d27);
	--vm-bestsellers-text: var(--e-global-color-text, #262223);
	--vm-bestsellers-white: var(--vm-market-surface-white, #fff);
	--vm-bestsellers-border: var(--vm-market-border, #e5dedf);
	--vm-bestsellers-card-height: clamp(116px, 17.2vw, 185px);

	width: 100%;
	min-width: 0;
	color: var(--vm-bestsellers-text);
	font-family: inherit;
}

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

.vm-market-bestsellers svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
}

.vm-market-bestsellers__viewport {
	width: 100%;
	min-width: 0;
	overflow: hidden;
}

.vm-market-bestsellers__track {
	display: flex;
	gap: clamp(8px, 1.2vw, 14px);
	align-items: stretch;
	width: 100%;
	padding: 0 clamp(36px, 7vw, 96px) 10px 0;
}

.vm-market-bestsellers__card {
	position: relative;
	display: grid;
	grid-template-columns:
		clamp(125px, 42%, 190px)
		minmax(0, 1fr);
	flex: 0 0 min(72vw, 520px);
	height: var(--vm-bestsellers-card-height);
	min-height: 0;
	overflow: hidden;
	border: 1px solid var(--vm-bestsellers-border);
	border-radius: clamp(9px, 1.3vw, 15px);
	background: color-mix(in srgb, var(--vm-bestsellers-white) 92%, transparent);
	box-shadow: none;
}

.vm-market-bestsellers__ghost {
	position: absolute;
	z-index: 3;
	top: -0.15em;
	left: 0.04em;
	color: color-mix(
		in srgb,
		var(--vm-bestsellers-text) 18%,
		var(--vm-bestsellers-white)
	);
	font-size: clamp(82px, 15vw, 172px);
	font-weight: 400;
	letter-spacing: -0.08em;
	line-height: 1;
	opacity: 0.72;
	pointer-events: none;
}

.vm-market-bestsellers__media {
	position: relative;
	z-index: 1;
	width: 100%;
	min-width: 0;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

.vm-market-bestsellers__image {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.vm-market-bestsellers__image img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
	user-select: none;
	-webkit-user-drag: none;
}

.vm-market-bestsellers__media .vm-market-wishlist {
	top: 8px;
	right: 8px;
	color: color-mix(
		in srgb,
		var(--vm-bestsellers-white) 78%,
		transparent
	);
}

.vm-market-bestsellers__body {
	position: relative;
	z-index: 2;
	display: flex;
	min-width: 0;
	height: 100%;
	min-height: 0;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	padding: 16px 46px 16px 16px;
	overflow: hidden;
	text-align: left;
}

.vm-market-bestsellers__sales {
	display: block;
	margin-bottom: 7px;
	color: color-mix(in srgb, var(--vm-bestsellers-text) 52%, transparent);
	font-size: clamp(7px, 0.95vw, 10px);
}

.vm-market-bestsellers h3 {
	width: 100%;
	margin: 0 0 7px;
	overflow: hidden;
	font-size: clamp(14px, 1.8vw, 21px);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.12;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vm-market-bestsellers .vm-market-price {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 5px;
	font-size: clamp(13px, 1.7vw, 19px);
	font-weight: 600;
	line-height: 1;
}

.vm-market-bestsellers .vm-market-price del {
	opacity: 0.48;
}

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

.vm-market-bestsellers .vm-market-bestsellers__add {
	position: absolute;
	right: 9px;
	bottom: 9px;
	display: grid;
	width: 36px;
	min-width: 0;
	height: 36px;
	min-height: 0;
	place-items: center;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--vm-bestsellers-accent);
}

.vm-market-bestsellers .vm-market-bestsellers__add svg {
	width: 23px;
	height: 23px;
	stroke-width: 1.6;
}

.vm-market-bestsellers__footer {
	display: grid;
	grid-template-columns: minmax(120px, 1fr) auto;
	align-items: center;
	gap: clamp(20px, 4vw, 70px);
	margin-top: clamp(18px, 3vw, 32px);
}

.vm-market-bestsellers__progress {
	height: 2px;
	overflow: hidden;
	background: var(--vm-bestsellers-border);
}

.vm-market-bestsellers__progress span {
	display: block;
	width: 16.666%;
	height: 100%;
	background: var(--vm-bestsellers-accent);
	transition: width 220ms ease;
}

.vm-market-bestsellers__footer > a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--vm-bestsellers-accent);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vm-market-bestsellers__footer > a svg {
	width: 17px;
	height: 17px;
}

@media (max-width: 767px) {
	.vm-market-bestsellers {
		/*
		 * Єдине місце керування висотою картки на мобільному.
		 * Змінюй тільки ці три значення.
		 */
		--vm-bestsellers-card-height: clamp(107px, 29.5vw, 136px);
	}

	.vm-market-bestsellers__track {
		gap: 8px;
		padding: 0 clamp(27px, 6.65vw, 34px) 0 0;
	}

	.vm-market-bestsellers .vm-market-bestsellers__card {
		flex-basis: 87%;
		border-radius: clamp(6px, 1.75vw, 9px);
	}

	.vm-market-bestsellers__ghost {
		top: 0.08em;
		left: 0.08em;
		font-size: clamp(40px, 10.5vw, 54px);
	}

	.vm-market-bestsellers__media .vm-market-wishlist {
		top: 5px;
		right: 5px;
	}

	.vm-market-bestsellers__body {
		padding: 4px 38px 4px 12px;
	}

	.vm-market-bestsellers__sales {
		margin-bottom: 2px;
		font-size: clamp(6px, 1.55vw, 7px);
		line-height: 1;
	}

	.vm-market-bestsellers h3 {
		margin-bottom: 2px;
		font-size: clamp(9px, 2.55vw, 11px);
		line-height: 1;
	}

	.vm-market-bestsellers .vm-market-price {
		gap: 3px;
		font-size: clamp(9px, 2.35vw, 11px);
	}

	.vm-market-bestsellers .vm-market-bestsellers__add {
		right: 6px;
		bottom: 6px;
		width: 31px;
		height: 31px;
	}

	.vm-market-bestsellers .vm-market-bestsellers__add svg {
		width: 20px;
		height: 20px;
	}

	.vm-market-bestsellers__footer {
		gap: 14px;
		margin-top: clamp(8px, 2.15vw, 11px);
		padding: 0 16px 0 6px;
	}

	.vm-market-bestsellers__footer > a {
		gap: 6px;
		font-size: 7px;
	}
}