/* Keep the server-rendered card in flow so its skeleton has the exact same size.
   No JavaScript (or a late/failed loader) means ordinary, usable cards. */
.profile-product-skeleton { display: none; }

html.is-catalog-preparing .profile-product-card:not(:focus-within) > :not(.profile-product-skeleton),
.profile-product-card.is-catalog-pending:not(:focus-within) > :not(.profile-product-skeleton) {
	opacity: 0;
	pointer-events: none;
}

html.is-catalog-preparing .profile-product-card:not(:focus-within) > .profile-product-skeleton,
.profile-product-card:is(.is-catalog-pending, .is-catalog-revealing):not(:focus-within) > .profile-product-skeleton {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: inherit;
	background: #101224;
	pointer-events: none;
}

.profile-product-skeleton::after {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(108deg, transparent 20%, rgba(77, 204, 255, .025) 36%, rgba(153, 121, 255, .10) 48%, rgba(225, 218, 255, .15) 51%, rgba(126, 96, 255, .07) 57%, transparent 76%);
	transform: translateX(-100%);
	animation: profile-catalog-shimmer 1.6s ease-in-out infinite;
	animation-play-state: paused;
}

html.is-catalog-preparing .profile-product-skeleton::after,
.profile-product-card.is-catalog-revealing .profile-product-skeleton::after { animation-play-state: running; }

.profile-product-skeleton__image {
	display: grid;
	flex: 0 0 auto;
	aspect-ratio: 1;
	place-items: center;
	border-bottom: 1px solid rgba(140, 108, 255, .12);
	background: radial-gradient(ellipse at 50% 45%, rgba(140, 108, 255, .09), transparent 70%), #0c0f1e;
}

.profile-product-skeleton__image svg {
	width: 44px;
	height: 44px;
	color: rgba(158, 145, 211, .2);
	stroke-width: 1;
}

.profile-product-skeleton__body {
	display: flex;
	flex: 1;
	min-height: 0;
	flex-direction: column;
	padding: 22px 22px 18px;
}

.profile-product-skeleton__line {
	display: block;
	flex-shrink: 0;
	border-radius: 3px;
	background: rgba(145, 135, 192, .10);
}

.profile-product-skeleton__title { width: 67%; height: 23px; margin-bottom: 17px; background: rgba(161, 145, 217, .16); }
.profile-product-skeleton__description { width: 91%; height: 10px; margin-bottom: 10px; }
.profile-product-skeleton__description--short { width: 72%; margin-bottom: 18px; }
.profile-product-skeleton__footer { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: auto -22px 0; padding: 14px 16px 0; border-top: 1px solid rgba(140, 108, 255, .12); }
.profile-product-skeleton__price { display: grid; gap: 8px; width: 48%; }
.profile-product-skeleton__caption { width: 84%; height: 8px; }
.profile-product-skeleton__value { width: 100%; height: 27px; background: rgba(161, 145, 217, .16); }
.profile-product-skeleton__likes { width: 25%; height: 20px; margin-bottom: 3px; }

@keyframes profile-catalog-shimmer {
	to { transform: translateX(100%); }
}

@media (max-width: 430px) {
	.profile-product-skeleton__body { padding-right: 18px; padding-left: 18px; }
	.profile-product-skeleton__footer { margin-right: -18px; margin-left: -18px; }
}

.profile-product-card__media > .profile-product-card__image-error { display: none; }
.profile-product-card__media.is-image-error > img { visibility: hidden; }
.profile-product-card__media.is-image-error > .profile-product-card__image-error {
	position: absolute;
	inset: 0;
	display: grid;
}

@media (prefers-reduced-motion: reduce), print {
	html.is-catalog-preparing .profile-product-card > :not(.profile-product-skeleton),
	.profile-product-card.is-catalog-pending > :not(.profile-product-skeleton) { opacity: 1; pointer-events: auto; }
	html.is-catalog-preparing .profile-product-card > .profile-product-skeleton,
	.profile-product-card:is(.is-catalog-pending, .is-catalog-revealing) > .profile-product-skeleton { display: none; }
	.profile-product-skeleton::after { animation: none; }
}