.card-product-special__media {
	border-radius: 0.4rem;
	height: min-content;
}

.card-product-special__quick-view {
	z-index: 1;
}

.card-product-special__quick-view .button {
	padding-block: 0.8rem;
	padding-inline: 1.2rem 1.4rem;
	gap: 0.8rem;
	font-size: calc(var(--font-button-scale) * 1.2rem);
}

.card-product-special__quick-view .button.loading .icon-eye {
	opacity: 0;
}

@media screen and (max-width: 989.99px) {
	.card-product-special--border {
		border: 0.1rem solid rgb(var(--color-foreground), 0.1);
	}

	.card-product-special {
		border-radius: var(--card-border-radius-mobile, var(--product-card-border-radius));
		padding-block: 0.8rem;
		padding-inline: 0.8rem 2.4rem;
	}
	
	.card-product-special__inner {
		display: grid;
		grid-template-columns: 8rem 1fr;
		gap: 2rem;
	}

	.card-product-special__content {
		column-gap: 1.6rem;
	}
}

@media screen and (min-width: 990px) {
	.card-product-special__content {
		flex-direction: column;
		justify-content: center;
		margin-top: 1.6rem;
		text-align: var(--product-card-text-alignment);
	}

	.card-product-special__media {
		border-radius: 1.2rem;
	}

	.card-product-special__quick-view {
		position: absolute;
		top: -3rem;
		left: 50%;
		transform: translate(-50%, -100%);
	}

	.card-product-special:hover .media.media--hover-effect > img + img {
    opacity: 1;
    transition: transform 500ms ease;
    transform: scale(1.03);
  }
}

@media screen and (min-width: 990px) and (hover: hover) {
	.card-product-special__quick-view {
		opacity: 0;
		transition: opacity 500ms ease;
	}

	.card-product-special:hover .card-product-special__quick-view {
		opacity: 1;
	}
}