/**
 * Temporaerer Bestell-Stopp: Hinweis-Panel (Produktseite, Warenkorb) und
 * Hinweis-Band auf der Kontaktseite.
 *
 * Laedt ausschliesslich, solange der Modus aktiv ist (siehe inc/order-stop.php).
 * Nach dem Abschalten bleibt kein totes CSS im Auslieferungspfad.
 * Nutzt nur bestehende Tokens: NGC DIN, 1200px-Rail, --r-surface, --sh-card,
 * Lime als sparsamer Akzent.
 */

.alp-stop {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding: var(--s5);
  background: var(--paper);
  border-radius: var(--r-surface);
  box-shadow: var(--sh-card);
  /* Lime bleibt der einzige Akzent: eine ruhige Kante, keine Signalfarbe. */
  border-left: 3px solid var(--lime);
  text-align: left;
}
.alp-stop__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--lime-soft);
  color: var(--ink);
}
.alp-stop__ic svg { width: 22px; height: 22px; max-width: 22px; max-height: 22px; display: block; }
.alp-stop__body { min-width: 0; }
.alp-stop__title {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--ink);
}
.alp-stop__text {
  margin: var(--s2) 0 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: none;
}
.alp-stop__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
  height: 46px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--lime);
  color: var(--lime-ink);
  box-shadow: var(--sh-lime);
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.alp-stop__cta:hover { background: var(--lime-deep); transform: translateY(-1px); }
.alp-stop__cta svg { width: 16px; height: 16px; max-width: 16px; max-height: 16px; flex: none; }
.alp-stop__cta:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }

/* Mehrere Kaufwege nebeneinander (Amazon-Markenshop, Amazon-Produkt,
   SHOP APOTHEKE). Die Buttons sind die Hauptaktion des Bandes. */
.alp-stop__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.alp-stop__actions .alp-stop__cta { margin-top: 0; }
/* Zweiter Weg bleibt leiser: der Haupt-CTA soll eindeutig bleiben. */
.alp-stop__cta--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.alp-stop__cta--ghost:hover { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }

/* Nachgeordnete Zeile unter den Kauf-Buttons: eigener Shop und Formular.
   Kleiner und ruhiger als der Haupttext, damit der Kauf vorn bleibt. */
.alp-stop__note {
  margin: var(--s4) 0 0;
  max-width: none;
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: var(--ink-subtle);
}

/* Warenkorb: volle Breite ueber der Positionsliste. */
.woocommerce-cart .alp-stop--band { margin: 0 0 var(--s5); }
.woocommerce-cart .entry-content > .woocommerce > .alp-stop--band { grid-column: 1 / -1; }

/* Produktseite: sitzt an der Stelle des Warenkorb-Buttons, volle Buybox-Breite. */
.alp-stop--buybox { width: 100%; margin: 0; }

/* ---------- Kontaktseite: Hinweis-Band ganz oben ---------- */
.alp-info .kt-stop {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s5);
}
.alp-info .kt-stop .alp-stop { padding: var(--s5) var(--s6); }
.alp-info .kt-stop .alp-stop__title { font-size: var(--fs-h3); }
.alp-info .kt-stop .alp-stop__product { font-weight: 700; color: var(--ink); }

/* Einblenden: einmal beim Laden, danach dauerhaft lesbar. */
@media (prefers-reduced-motion: no-preference) {
  .alp-info .kt-stop .alp-stop {
    animation: alp-stop-in 560ms var(--ease-out) both;
  }
}
@keyframes alp-stop-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .alp-stop { flex-direction: column; gap: var(--s3); padding: var(--s4); }
  .alp-info .kt-stop .alp-stop { padding: var(--s4); }
  .alp-stop__cta { width: 100%; justify-content: center; }
}