/**
 * Lade-Feedback für FacetWP-Refreshes. Steuert das JS über zwei Klassen:
 *   .facetwp-template.is-bulli-facet-loading  → Grid abdunkeln
 *   body.bulli-facet-busy                     → immer sichtbarer Spinner oben
 */

.facetwp-template {
  position: relative;
}

/* Grid während des Ladens klar ausblenden — funktioniert auf JEDEM Hintergrund
   (ein weißer Schleier auf weißem Shop wäre unsichtbar). */
.facetwp-template.is-bulli-facet-loading {
  opacity: 0.35;
  filter: blur(1px);
  transition: opacity 0.12s ease;
  pointer-events: none;
}

/* Spinner fix oben-mittig: auch sichtbar, wenn man weit runtergescrollt hat.
   Mit weißem Kontrast-Kreis + Schatten, damit er auf jedem Hintergrund aufpoppt. */
body.bulli-facet-busy::after {
  content: "";
  position: fixed;
  z-index: 100000;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  border: 4px solid rgba(0, 0, 0, 0.12);
  border-top-color: #e2001a; /* myt3-Rot als Akzent */
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  animation: bulli-facet-spin 0.75s linear infinite;
  pointer-events: none;
}

@keyframes bulli-facet-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  body.bulli-facet-busy::after { animation: none; }
}