/* =========================================================================
   Zweisam Zipper-Loader — Reißverschluss als Ladeanzeige.
   Portiert aus dem Claude-Design-Entwurf „Zipper Loader.dc.html"
   (Nutzerwunsch 2026-07-10), farblich auf das Design-System v1.1 gemappt:
   Band = Petrol (statt Orange), Zähne = Silber (Gold-Regel §3.3: kein
   Gold-Glanz), Schrift = Inter, Label = Muted. Thematisch passend:
   Reißverschluss = Textil.

   Markup erzeugt assets/js/loader.js (zwLoaderMount). Der Loader läuft als
   Overlay über WooCommerce-Ladezuständen; .zw-loader--inline bettet ihn in
   den Fluss ein. prefers-reduced-motion: statisches Symbol, keine Animation.
   ========================================================================= */

.zw-loader-overlay{
  position:absolute;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(252,250,245,.82); /* Cream, leicht durchscheinend */
}

.zw-loader{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  /* Kompakter als der Design-Entwurf (150×320): Overlay-tauglich. */
  --zwl-scale:.55;
}
.zw-loader--inline{padding:2rem 0}

.zw-loader__track{
  position:relative;
  width:calc(150px * var(--zwl-scale));
  height:calc(320px * var(--zwl-scale));
}
.zw-loader__stage{
  position:absolute;
  inset:0;
  transform:scale(var(--zwl-scale));
  transform-origin:top left;
  width:150px;
  height:320px;
}

/* Bänder: Petrol statt Orange — B2B-Anker des Farbsystems. */
.zw-loader__tape{
  position:absolute;
  top:16px;
  bottom:16px;
  width:48px;
  background:var(--zcf-petrol,#23434A);
}
.zw-loader__tape--left{
  right:50%;
  margin-right:5px;
  border-radius:10px 4px 4px 10px;
  box-shadow:inset -6px 0 12px rgba(0,0,0,.18), inset 2px 0 0 rgba(255,255,255,.25);
}
.zw-loader__tape--right{
  left:50%;
  margin-left:5px;
  border-radius:4px 10px 10px 4px;
  box-shadow:inset 6px 0 12px rgba(0,0,0,.18), inset -2px 0 0 rgba(255,255,255,.25);
}

.zw-loader__teeth{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding-top:20px;
}
.zw-loader__row{
  position:relative;
  height:12px;
  width:100%;
  display:flex;
  justify-content:center;
}
.zw-loader__tooth{
  position:absolute;
  width:32px;
  height:12px;
  /* Silber-Verlauf (Original), bewusst kein Gold (§3.3). */
  background:linear-gradient(135deg,#fafafa,#c8c8ce 48%,#9a9aa2 56%,#e6e6ea);
  box-shadow:0 1px 2px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.7);
}
.zw-loader__tooth--left{
  right:50%;
  border-radius:3px 7px 7px 3px;
  transform:translateX(7px);
}
.zw-loader__tooth--right{
  left:50%;
  border-radius:7px 3px 3px 7px;
  background:linear-gradient(225deg,#fafafa,#c8c8ce 48%,#9a9aa2 56%,#e6e6ea);
  transform:translateX(-7px) translateY(10px);
}

.zw-loader__slider{
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:3;
}
.zw-loader__slider-body{
  width:56px;
  height:34px;
  border-radius:9px;
  background:linear-gradient(135deg,#f0f0f2,#b7b7bf 45%,#7d7d86 60%,#d9d9de);
  box-shadow:0 3px 8px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.85), inset 0 -3px 6px rgba(0,0,0,.25);
  border:1px solid rgba(0,0,0,.12);
}
.zw-loader__slider-neck{
  width:6px;
  height:10px;
  background:linear-gradient(#8f8f97,#5f5f66);
}
.zw-loader__slider-pull{
  width:26px;
  height:34px;
  border-radius:8px;
  border:5px solid;
  border-color:#c9c9cf #a9a9b1 #8f8f97 #b7b7bf;
  background:transparent;
  box-shadow:0 3px 6px rgba(0,0,0,.3);
}

.zw-loader__label{
  font-family:"Inter",system-ui,sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--zcf-muted,#64717A);
}

/* Reduzierte Bewegung: Reißverschluss halb geöffnet einfrieren, Punkte statisch. */
@media (prefers-reduced-motion: reduce){
  .zw-loader__label::after{content:"…"}
}