/* ETOP Academy archive real product images – v1.0.5 */

.etop-content-card .etop-card-image {
	position: relative;
	overflow: hidden;
	background: linear-gradient(90deg, #ffffff 0%, #fdfefe 12%, #fafbfd 28%, #f7f9fc 45%, #f5f8fb 65%, #f3f6fb 100%);
	isolation: isolate;
}

.etop-content-card .etop-card-image img.etop-archive-source-img {
	opacity: 0 !important;
}

/*
 * Целият продукт се вижда (contain), но белият фон на продуктовата
 * снимка се слива с Academy background чрез multiply.
 */
.etop-content-card .etop-card-image.etop-real-image-ready::before {
	content: "";
	position: absolute;
	inset: 8px 12px;
	z-index: 0;

	background-image: var(--etop-archive-card-image);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;

	mix-blend-mode: multiply;
	opacity: .98;

	filter:
		saturate(.98)
		contrast(1.025)
		brightness(1.02);

	/*
	 * Feather само по периферията на самата снимка.
	 * Продуктът остава цял; изчезва само квадратният/белият ръб.
	 */
	-webkit-mask-image: radial-gradient(
		ellipse 84% 88% at 50% 50%,
		#000 0%,
		#000 68%,
		rgba(0,0,0,.94) 76%,
		rgba(0,0,0,.72) 84%,
		rgba(0,0,0,.34) 92%,
		transparent 100%
	);
	mask-image: radial-gradient(
		ellipse 84% 88% at 50% 50%,
		#000 0%,
		#000 68%,
		rgba(0,0,0,.94) 76%,
		rgba(0,0,0,.72) 84%,
		rgba(0,0,0,.34) 92%,
		transparent 100%
	);

	pointer-events: none;
}

/*
 * Много лек Academy-blue veil по ръбовете.
 * Центърът остава чист, за да не избледнява самият продукт.
 */
.etop-content-card .etop-card-image.etop-real-image-ready::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;

	background:
		linear-gradient(
			90deg,
			rgba(255,255,255,.72) 0%,
			rgba(255,255,255,.42) 10%,
			rgba(255,255,255,.12) 24%,
			rgba(255,255,255,0) 43%,
			rgba(243,246,251,0) 72%,
			rgba(243,246,251,.18) 88%,
			rgba(243,246,251,.42) 100%
		),
		linear-gradient(
			180deg,
			rgba(248,251,255,.22) 0%,
			rgba(248,251,255,0) 13%,
			rgba(248,251,255,0) 87%,
			rgba(243,246,251,.20) 100%
		);

	pointer-events: none;
}

.etop-content-card .etop-card-image.etop-real-image-ready .etop-card-placeholder {
	display: none !important;
}

@media (max-width: 760px) {
	.etop-content-card .etop-card-image.etop-real-image-ready::before {
		inset: 7px 9px;
		background-size: contain;
	}
}