.modal.product-variation-compare-modal {
	--gz-modal-content-width: 640px;
	--gz-modal-content-padding-y: 30px;
	--gz-modal-content-padding-x: 30px;
}

.product-variation-compare-modal .modal__header {
	position: relative;
	--gz-modal-header-padding-x: 20px;
}

.product-variation-compare-modal .modal__header::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--gz-border-color);
}

.product-variation-compare-modal .modal__wrapper {
	overflow: visible;
}

.product-variation-compare-modal .modal__content {
	--gz-modal-content-padding-y: 20px;
	--gz-modal-content-padding-x: 20px;

	overflow: hidden;
	overflow-y: auto;
	height: 100%;
	max-height: 80vh;
	scroll-behavior: smooth;
    scrollbar-width: auto;
    scrollbar-color: var(--gz-color-light-grey);
}

.product-variation-compare-modal .modal__button-close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 1;
}

.gz-product-compare-attributes__selects {
	display: flex;
	gap: 4px;
	margin-bottom: 30px;
}

.gz-product-compare-attributes__item {
	--box-shadow-color: var(--gz-border-color);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 3px;
	border-radius: 100%;
	border: none;
	box-shadow: 0 0 0 1px var(--box-shadow-color);
	cursor: pointer;
}

.gz-product-compare-attributes__item.active {
	--box-shadow-color: var(--gz-color-dark);
}

.gz-product-compare-attributes__item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	overflow: hidden;
}

.gz-product-compare-attributes__products {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.gz-product-compare-attributes__product {
	display: none;
	width: calc(100% / 2 - ( 15px / 2 ));
}

.gz-product-compare-attributes__product.active {
	display: block;
}

.gz-product-compare-attributes__product img {
	border-radius: min(10px, var(--gz-image-rounded-product-card));
}

@media (min-width: 768px) {
	.product-variation-compare-modal .modal__header {
		--gz-modal-header-padding-x: 30px;
	}

	.product-variation-compare-modal .modal__content {
		--gz-modal-content-padding-y: 30px;
		--gz-modal-content-padding-x: 30px;
	}

	.gz-product-compare-attributes__product {
		width: calc(100% / 3 - ( 15px * 2 / 3 ));
	}
}