/* FacetWP Skeleton Card Styles */
.skeleton-card {
	pointer-events: none;
	position: relative;
	overflow: hidden;
}

/* GPU-Accelerated Shimmer Effect using CSS transform instead of background-position */
.skeleton-card .skeleton-element {
	background: #e2e5e9;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
}

.skeleton-card .skeleton-element::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transform: translateX(-100%);
	animation: placeholderShimmer 1.5s infinite ease-in-out;
}

@keyframes placeholderShimmer {
	100% {
		transform: translateX(100%);
	}
}

/* Match the exact image layout of WooCommerce products */
.skeleton-card .skeleton-image-wrapper {
	width: 100%;
	margin-bottom: 15px;
}

.skeleton-card .skeleton-image {
	width: 100%;
	aspect-ratio: 3/4; /* Matches product image ratio */
}

/* Content spacing and sizing */
.skeleton-card .skeleton-content-wrapper {
	padding: 10px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.skeleton-card .skeleton-title {
	height: 24px;
	width: 80%;
}

.skeleton-card .skeleton-price {
	height: 20px;
	width: 40%;
}

.skeleton-card .skeleton-button {
	height: 40px;
	width: 100%;
	margin-top: 5px;
}