.js-cro-glass-clarity {
	input:checked + .media-swatch {
		background-color: #d5d5d5;
		color: black;
	}

	.block-swatch.is-selected {
		background-color: #d5d5d5;
		color: black;
	}

	.variant-label__explain {
		position: fixed; // changed from absolute
		visibility: hidden;
		background-color: #333;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 8px 12px;
		z-index: 9999;
		opacity: 0;
		transition: opacity 0.2s;
		white-space: normal;
		max-width: 200px;
		pointer-events: none;

		&::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -6px;
			border-width: 6px;
			border-style: solid;
			border-color: #333 transparent transparent transparent;
		}
	}

	.variant-label__name,
	.variant-label__price-difference {
		font-weight: 600;
	}

	@media screen and (min-width: 768px) {
		.glass-clarity {
			.swatch__wrapper.variant-image .media-swatch {
				flex-direction: row-reverse !important;
				overflow: hidden;
				align-items: center;
			}

			.variant-label {
				width: calc(100% - 70px);
			}
		}

		.image-icon {
			width: 70px;
			height: 70px;
			position: relative;
			background-color: #d5d5d5;

			img {
				width: 100%;
				height: 100%;
				//   object-fit: cover;
				position: absolute;
				object-position: left bottom;
			}
		}

		.product .product-info__variant-picker .variant-picker__option-values {
			.variant-image:not(:first-child) .media-swatch .image-icon img {
				object-position: right bottom;
				transform: scaleX(-1);
			}
		}
	}

	@media screen and (max-width: 767px) {
		.image-icon {
			width: 100% !important;
			position: relative !important;
			padding-top: 50% !important;

			img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				//   object-fit: cover;
				display: block;
				object-position: bottom center;
			}
		}
	}

	@media screen and (max-width: 500px) {
		.variant-label__description,
		.variant-label__explain {
			font-size: 13px;
		}
	}

	@media screen and (max-width: 768px) {
		.variant-label__explain {
			max-width: 150px;
			height: auto;
		}
	}

	@media screen and (max-width: 600px) {
		.variant-label__explain {
			max-width: 150px;
			height: auto;
			margin-left: 3%;
		}
	}

	@media screen and (max-width: 440px) {
		.variant-label__explain {
			max-width: 130px;
			height: auto;
			margin-left: 5%;
		}
	}

	@media screen and (max-width: 390px) {
		.glass-clarity {
			.variant-label {
				padding: 10px;
				padding-bottom: 4px;
			}

			.variant-label__description {
				font-size: 12px;
			}

			.variant-label__name {
				font-size: 14px;
				font-weight: 600;
			}

			.variant-label__explain {
				font-size: 12px;
			}

			.variant-label__price-difference {
				font-size: 13px;
				top: 2px;
			}
		}
	}

	@media screen and (max-width: 338px) {
		.variant-label {
			padding: 7px;
		}

		.variant-label__description {
			font-size: 11px;
		}
	}

	@media (min-width: 1000px) and (max-width: 1415px) {
		.media-swatch .variant-label {
			.variant-label__name {
				font-size: 13px;
				line-height: 1.8;
			}

			.variant-label__description {
				font-size: 13px;
			}

			.variant-label__price-difference {
				font-size: 9px;
			}
		}

		.variant-image .variant-label {
			padding: 0px 3px 0 20px !important;
		}
	}
}

.variant-label__description {
	line-height: 1.4;
}

.variant-label {
	padding: 0px 16px !important;
}

.tooltip-icon {
	width: 17px;
	height: 17px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border: 1px solid black;
	border-radius: 50%;
	color: black;
	background-color: white;
	font-family: "Nunito Sans";
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.1px;
	margin-left: 10px;
	position: relative;
}

.product-info__variant-picker {
	.variant-picker__option {
		.text-subdued {
			display: flex;
			align-items: center;
			cursor: pointer;
		}
	}

	.tooltip-text {
		visibility: hidden;
		width: 200px;
		background-color: #333;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 8px 12px;
		position: absolute;
		z-index: 10;
		bottom: 125%;
		left: 50%;
		transform: translateX(-50%);
		opacity: 0;
		transition: opacity 0.3s;
		font-size: 1rem;
		line-height: 1.4;
		white-space: normal;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		font-weight: normal;
		display: none;
	}

	.tooltip-text::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: #333 transparent transparent transparent;
	}

	.tooltip-icon:hover .text-hover {
		visibility: visible;
		opacity: 1;
		display: block;
	}
}