/*
 * Kaufleiste unten auf der Produktseite – für alle Layouts gleich.
 * Wird nach dem Layout-Stylesheet geladen und ändert nur, was alle brauchen:
 * Mini-Bild, Kurztitel und das Ein-/Ausblenden. Ob die Leiste überhaupt
 * erscheint (z. B. nur auf dem Handy), bestimmt weiter das Layout.
 * front.js setzt .bb-weg, solange der Haupt-Kaufknopf noch nicht nach oben
 * aus dem Bild gescrollt ist. Ohne JavaScript bleibt die Leiste sichtbar.
 */
.buybar { transition: transform .25s ease, opacity .25s ease, visibility .25s; }
.buybar.bb-weg { transform: translateY(calc(100% + 80px)); opacity: 0; visibility: hidden; pointer-events: none; }
.buybar .bb-img { flex: none; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; }
.buybar .bb-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.buybar .bb-img .ph-ic { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.buybar .bb-t { display: block; width: 100%; font-size: 13px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) { .buybar .bb-img { display: none; } }
@media (prefers-reduced-motion: reduce) { .buybar { transition: none; } }