/* =====================================================
   Woodmart Skeleton Loader – Base Styles
   ===================================================== */

/* Hide real image until loaded */
.wsl-enabled img.wsl-pending,
.wsl-enabled img.wsl-loading {
	opacity: 0 !important;
	visibility: hidden;
	transition: none !important;
}

/* When image is ready → fade in */
.wsl-enabled img.wsl-loaded {
	opacity: 1 !important;
	visibility: visible;
	animation: wsl-fade-in var(--wsl-fade-duration, 0.45s) ease forwards;
}

@keyframes wsl-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* -----------------------------------------------------
   Skeleton wrapper (placed over the image / element)
   ----------------------------------------------------- */
.wsl-skeleton-wrap {
	position: relative;
	display: block;
	overflow: hidden;
	background: #f0f0f0;
	border-radius: inherit;
}

/* The shimmer / pulse layer */
.wsl-skeleton {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		90deg,
		#f0f0f0 0%,
		#e0e0e0 40%,
		#f0f0f0 80%
	);
	background-size: 200% 100%;
	animation: wsl-shimmer 1.4s ease-in-out infinite;
	pointer-events: none;
	border-radius: inherit;
}

/* Optional subtle pulse alternative (uncomment if preferred) */
/*
.wsl-skeleton {
	background: #e8e8e8;
	animation: wsl-pulse 1.5s ease-in-out infinite;
}
@keyframes wsl-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}
*/

@keyframes wsl-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* When image finishes loading → hide skeleton */
.wsl-skeleton-wrap.wsl-done .wsl-skeleton {
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

/* After transition remove skeleton from layout */
.wsl-skeleton-wrap.wsl-removed .wsl-skeleton {
	display: none;
}

/* -----------------------------------------------------
   Product / Card structure skeleton (Woodmart style)
   Matches the placeholder cards you showed
   ----------------------------------------------------- */
.wsl-card-skeleton {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
	height: 100%;
}

.wsl-card-skeleton .wsl-img-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #f0f0f0;
	position: relative;
	overflow: hidden;
}

.wsl-card-skeleton .wsl-img-placeholder::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 40%, #f0f0f0 80%);
	background-size: 200% 100%;
	animation: wsl-shimmer 1.4s ease-in-out infinite;
}

.wsl-card-skeleton .wsl-lines {
	padding: 16px 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wsl-card-skeleton .wsl-line {
	height: 12px;
	border-radius: 6px;
	background: #e8e8e8;
	position: relative;
	overflow: hidden;
}

.wsl-card-skeleton .wsl-line::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
	background-size: 200% 100%;
	animation: wsl-shimmer 1.4s ease-in-out infinite;
}

.wsl-card-skeleton .wsl-line.short {
	width: 55%;
}

.wsl-card-skeleton .wsl-line.medium {
	width: 75%;
}

.wsl-card-skeleton .wsl-line.full {
	width: 100%;
}

.wsl-card-skeleton .wsl-btn-placeholder {
	margin-top: 8px;
	height: 36px;
	border-radius: 8px;
	background: #e8e8e8;
	position: relative;
	overflow: hidden;
}

.wsl-card-skeleton .wsl-btn-placeholder::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
	background-size: 200% 100%;
	animation: wsl-shimmer 1.4s ease-in-out infinite;
}

/* -----------------------------------------------------
   Utility – force skeleton on specific containers
   ----------------------------------------------------- */
.wsl-force-skeleton {
	min-height: 120px;
}

/* Prevent layout shift on common Woodmart product grids */
.woodmart-products .product,
.wd-products .product,
.products .product {
	position: relative;
}

/* Hide original content while skeleton is active (optional, controlled by JS) */
.wsl-content-hidden {
	visibility: hidden !important;
}

/* Smooth transition for the whole page feel */
.wsl-enabled {
	--wsl-fade-duration: 0.45s;
}