/* Products Skeleton Loader v2.1 - frontend */
body.pslfree-enabled {
  --pslfree-base: #e9edf2;
  --pslfree-highlight: #f8fafc;
  --pslfree-speed: 1200ms;
  --pslfree-radius: 12px;
  --pslfree-brand-opacity: 1;
}

@keyframes pslfree-shimmer {
  from { transform: translateX(-135%); }
  to { transform: translateX(135%); }
}

html.pslfree-js:not(.pslfree-failed) body.pslfree-enabled .pslfree-skeleton-host {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  pointer-events: none;
}

/* Keep the real WooCommerce layout in flow so the skeleton inherits the exact theme geometry. */
html.pslfree-js:not(.pslfree-failed) body.pslfree-catalog-enabled .pslfree-skeleton-host.pslfree-loading > *:not(.pslfree-skeleton-layer),
html.pslfree-js:not(.pslfree-failed) body.pslfree-single-enabled.single-product:not(.pslfree-single-ready) .pslfree-single-target > *:not(.pslfree-skeleton-layer) {
  visibility: hidden !important;
}

html.pslfree-js:not(.pslfree-failed) body.pslfree-enabled .pslfree-skeleton-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: block !important;
  visibility: visible !important;
  overflow: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
  contain: paint;
}

html.pslfree-js:not(.pslfree-failed) body.pslfree-enabled .pslfree-skeleton-shape {
  position: absolute !important;
  display: block !important;
  visibility: visible !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--pslfree-radius);
  background: var(--pslfree-base) !important;
  opacity: 1 !important;
}

html.pslfree-js:not(.pslfree-failed) body.pslfree-enabled .pslfree-skeleton-shape::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(100deg, transparent 20%, var(--pslfree-highlight) 47%, transparent 74%);
  transform: translateX(-135%);
  animation: pslfree-shimmer var(--pslfree-speed) ease-in-out infinite;
  will-change: transform;
}

html.pslfree-js:not(.pslfree-failed) body.pslfree-enabled .pslfree-skeleton-shape.is-text {
  border-radius: min(7px, var(--pslfree-radius));
}

html.pslfree-js:not(.pslfree-failed) body.pslfree-enabled .pslfree-skeleton-shape.is-button,
html.pslfree-js:not(.pslfree-failed) body.pslfree-enabled .pslfree-skeleton-shape.is-control {
  border-radius: min(12px, var(--pslfree-radius));
}

html.pslfree-js:not(.pslfree-failed) body.pslfree-enabled .pslfree-skeleton-brand {
  position: absolute !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  transform: translate(-50%, -50%);
  pointer-events: none !important;
}

html.pslfree-js:not(.pslfree-failed) body.pslfree-enabled .pslfree-skeleton-brand img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  visibility: visible !important;
  object-fit: contain !important;
  opacity: var(--pslfree-brand-opacity);
  filter: none !important;
  box-shadow: none !important;
}

.pslfree-ready {
  animation: pslfree-reveal 160ms ease-out both;
}

@keyframes pslfree-reveal {
  from { opacity: .8; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html.pslfree-js body.pslfree-enabled .pslfree-skeleton-shape::after,
  .pslfree-ready {
    animation: none !important;
  }
}