[style*="counter"] {

	.ct-icon-container {
		position: relative;

		&:before {
			position: absolute;
			z-index: 1;
			content: var(--counter);
			top: -9px;
			right: -9px;
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 16px;
			cursor: pointer;
			height: 16px;
			padding: 0 3px;
			font-size: 10px;
			font-weight: 600;
			font-style: normal;
			border-radius: 10px;
			color: var(--cartBadgeText, #fff);
			background: var(--cartBadgeBackground, var(--paletteColor1));
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		&.ct-added .ct-icon-container:before {
			animation: 0.6s ease-in-out 0.12s normal both 1 bounce-in;
		}
	}

	// for customizer
	&[data-skip-badge] .ct-icon-container:before {
		display: none;
	}
}