uix-product-preview {
	&:has(button[data-active][data-invert]) {
		img {
			background-color: var(--image-backdrop-invert);
		}
	}
}

uix-product-preview {
	max-width: 400px;
	/* margin: auto; */
	display: flex;
	flex-direction: column;
	margin-bottom: 3rem;
	&>.product-card {
		transition: transform 0.2s;
		border: 3px solid transparent;
		color: var(--unyt-text-primary);
		&:not([data-disable-hover]) {
			&:hover, &:active {
				transform: scale(1.05)!important;
			}
		}
uix-product-preview 		&:hover {
			border-color: var(--unyt-bg-primary-hover);
		}
uix-product-preview 		&>img {
			object-fit: contain;
			/* height: 100%; */
			background: var(--image-backdrop);
			border-radius: 10px;
			max-height: 300px;
			min-height: 130px;
			height: auto;
			transition: background-color 0.2s;
		}
uix-product-preview 		&>.header {
			display: flex;
			justify-content: space-between;
			gap: 6px;
			&>span {
				font-size: 0.8em;
				width: fit-content;
				padding: 4px 8px;
				height: fit-content;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				border-radius: 999px;
				white-space: nowrap;
				background-color: var(--unyt-text-primary);
				color: var(--unyt-text-primary-inverse);
			}
uix-product-preview 			&>h2 {
				margin-top: 6px;
				line-height: 100%!important;
				font-weight: 600;
				margin-bottom: 20px!important;
				font-size: 1.6em!important;
				@media screen and (max-width: 640px) {
					font-size: 1.4em!important;
				}
			}
		}
uix-product-preview 		&>.variants {
			padding-bottom: 20px;
			padding-top: 20px;
			display: flex;
			gap: 6px;
			align-items: center;
			margin-left: 6px;
			margin-right: 6px;
			margin-bottom: -10px;
			@media screen and (max-width: 750px) {
				justify-content: center;
			}
uix-product-preview 			&>button {
				--size: 26px;
				width: var(--size);
				border-radius: 999px;
				height: var(--size);
				appearance: none;
				border: none;
				padding: 0;
				outline: 2px solid transparent;
				outline-offset: 2px;
				transition: transform 0.3s ease-in-out, outline-color 0.2s;
				&:not([data-active]):hover {
					transform: scale(0.9);
					outline-color: var(--unyt-text-secondary);
				}
uix-product-preview 				&:not([data-active]) {
					border: 2px solid var(--unyt-border-primary);
				}
uix-product-preview 				&[data-active] {
					transform: scale(0.8);
					outline-color: var(--unyt-text-primary);
				}
			}
		}
uix-product-preview 		&>.price {
			padding-top: 10px;
			margin-top: auto!important;
			font-family: monospace;
			font-size: 1.6em;
		}
	}
}
uix-product-preview {
	.price {
		font-family: monospace;
		color: var(--unyt-text-secondary);
		opacity: 0.8;
		font-size: large;
	}
}
uix-product-preview {
	&>h3 {
		margin-bottom: 6px;
		font-size: medium;
	}
}