/* Loading placeholders for content that is being replaced in place (item grid and
   filter panel while a facet is applied - see js/webshop/itemfilter.js).

   A placeholder in the shape of what is coming, rather than a mask over what is
   leaving: the page keeps its height, the columns keep their grid, and nothing
   jumps when the real cards arrive. */

.sk {
	--sk-base: #eceef1;
	--sk-sheen: #f6f7f9;
	position: relative;
	overflow: hidden;
	background: var(--sk-base);
	border-radius: .25rem;
}

/* The sheen is a moving highlight rather than a pulsing opacity: it reads as
   "working" without the whole block flashing. */
.sk::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, var(--sk-sheen), transparent);
	animation: sk-sheen 1.25s ease-in-out infinite;
}

@keyframes sk-sheen {
	100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.sk::after {
		animation: none;
	}
}

/* ---- item grid ---- */

.sk-card {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	width: 100%;
	padding: .5rem;
}

.sk-card .sk-img {
	width: 100%;
	padding-top: 100%; /* square, like the product thumbnails */
}

.sk-card .sk-line {
	height: .75rem;
}

.sk-card .sk-line-title {
	height: 1rem;
	width: 85%;
}

.sk-card .sk-line-short {
	width: 45%;
}

.sk-card .sk-line-price {
	height: 1.15rem;
	width: 35%;
	margin-top: .25rem;
}

.sk-card .sk-button {
	height: 2.25rem;
	margin-top: .35rem;
}

/* ---- filter panel ---- */

.sk-filters {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sk-filters li {
	margin-bottom: 1.25rem;
}

.sk-filters .sk-heading {
	height: .7rem;
	width: 45%;
	margin-bottom: .6rem;
}

.sk-filters .sk-option {
	height: .8rem;
	margin-bottom: .45rem;
}

.sk-filters .sk-option:nth-child(2) { width: 70%; }
.sk-filters .sk-option:nth-child(3) { width: 55%; }
.sk-filters .sk-option:nth-child(4) { width: 64%; }
.sk-filters .sk-option:nth-child(5) { width: 48%; }