/* Explicit draft demonstration only. Regular loading never hides an image. */
.wp-theme-astra-wpvibe-draft .v-image-demo img { opacity: 0 !important; }
.v-skeleton-demo-panel {
  position: fixed; left: 16px; bottom: 80px; z-index: 999999;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  max-width: calc(100vw - 32px); padding: 12px 16px;
  background: #f5f2eb; color: #252522; border: 1px solid #d7d1c6;
  box-shadow: 0 3px 16px rgba(0,0,0,.12); font: 13px/1.5 sans-serif;
}
.v-skeleton-demo-panel button {
  padding: 8px 12px; border: 0; border-radius: 0;
  background: #69283b; color: #fff; font: inherit; cursor: pointer;
}
.v-skeleton-demo-panel button:focus-visible { outline: 2px solid #252522; outline-offset: 3px; }

/* Image-only placeholders. No image hiding, extra requests or layout changes. */
body:not(.elementor-editor-active) .v-image-loading {
  background-color: #e2ded5 !important;
  background-image: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.32) 48%, transparent 66%) !important;
  background-size: 240% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 100% 0;
}
body:not(.elementor-editor-active) .v-image-loading.v-image-in-view {
  animation: velour-image-shimmer 1.8s ease-in-out infinite;
}
@keyframes velour-image-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.elementor-editor-active) .v-image-loading {
    animation: none !important;
    background-image: none !important;
  }
}