/* =========================================================================
   DS SKELETON LOADING SYSTEM (front-end only)
   Lightweight shimmer placeholders that reuse the site's own design tokens
   (--ds-* variables from style.css, --v-* variables from dashboard-vercel.css)
   so skeletons always match the current colors/radius/shadows automatically
   - no separate "skeleton theme" to keep in sync by hand.

   Principles:
   - Zero layout shift: skeletons are painted ON TOP of / AS the background
     of elements that already reserve their own box size (fixed width/height,
     aspect-ratio, or existing CSS) - nothing here changes document flow.
   - Auto-disappear: driven by assets/js/skeleton.js, which removes the
     skeleton classes the instant the real content (image/data) is ready.
   - Respect prefers-reduced-motion.
   ========================================================================= */

:root {
	--ds-skel-base: #eef0f5;
	--ds-skel-shine: rgba(255, 255, 255, .8);
}
[data-bs-theme="dark"] {
	--ds-skel-base: #262c40;
	--ds-skel-shine: rgba(255, 255, 255, .06);
}
/* Dashboard area (Vercel/Linear-style shell) uses its own neutral surface
   tokens, so skeletons there blend with that surface instead of the public
   marketplace palette. */
.ds-dashboard-shell {
	--ds-skel-base: var(--v-surface-2, #f6f6f7);
	--ds-skel-shine: rgba(255, 255, 255, .8);
}
[data-bs-theme="dark"] .ds-dashboard-shell {
	--ds-skel-base: #232327;
	--ds-skel-shine: rgba(255, 255, 255, .05);
}

@keyframes ds-skel-shimmer {
	0%   { background-position: 150% 0; }
	100% { background-position: -50% 0; }
}

/* ---------- Image skeletons ----------
   Applied directly to the <img> element by skeleton.js. Because the
   element's own width/height/aspect-ratio already reserves its box, the
   shimmer background is simply what's visible until the browser paints the
   loaded image on top of it - no wrapper element, no reflow. */
img.ds-skel-loading {
	background-color: var(--ds-skel-base);
	background-image: linear-gradient(100deg, transparent 35%, var(--ds-skel-shine) 50%, transparent 65%);
	background-size: 250% 100%;
	background-repeat: no-repeat;
	animation: ds-skel-shimmer 1.5s ease-in-out infinite;
}
img.ds-skel-fade-in {
	animation: ds-skel-fadein .4s ease both;
}
img.ds-skel-error {
	background-color: var(--ds-skel-base);
	background-image: none;
	animation: none;
}
@keyframes ds-skel-fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ---------- Generic block skeletons (used for async lists e.g. the
   notification dropdown, before the first fetch resolves) ---------- */
.ds-skel {
	background-color: var(--ds-skel-base);
	background-image: linear-gradient(100deg, transparent 35%, var(--ds-skel-shine) 50%, transparent 65%);
	background-size: 250% 100%;
	background-repeat: no-repeat;
	animation: ds-skel-shimmer 1.5s ease-in-out infinite;
	display: inline-block;
	vertical-align: middle;
}
.ds-skel-circle { border-radius: 50%; flex: none; }
.ds-skel-line { display: block; height: .8em; border-radius: 5px; }

.ds-skel-row { pointer-events: none; }
.ds-skel-row .ds-skel-line + .ds-skel-line { margin-top: .4rem; }

@media (prefers-reduced-motion: reduce) {
	img.ds-skel-loading,
	img.ds-skel-fade-in,
	.ds-skel {
		animation: none;
	}
}

/* ---------- Reserve-space helpers ----------
   A couple of specific images in the templates (product detail hero image,
   blog featured image, seller product preview) don't have a fixed height in
   markup, which can cause a layout jump while they load. Giving them a
   sensible aspect-ratio keeps the skeleton box - and the final image - a
   stable size without hardcoding pixel heights. */
.ds-pdp-main-img,
.ds-blog-featured-img,
.ds-seller-preview-img {
	aspect-ratio: 16 / 9;
	width: 100%;
	object-fit: cover;
}