/* =================================================================
   Floating actions — round buttons pinned to the bottom inline-end
   corner: back-to-top on every page, plus "filters" on the catalogue.
   Hidden until the page is scrolled (.floating-actions--visible, set
   by js/components/floating-actions.js).
   ================================================================= */

.floating-actions {
  position: fixed;
  bottom: 3rem;
  inset-inline-end: 2.4rem;
  z-index: var(--z-floating);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1.2rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.floating-actions--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.floating-actions__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.floating-actions__button:hover { transform: scale(1.1); }

.floating-actions__button--filter {
  background: var(--color-brand);
  color: var(--color-white);
  box-shadow: 0 4px 1.8rem rgba(157, 40, 98, 0.4);
}
.floating-actions__button--filter:hover { box-shadow: 0 6px 2.4rem rgba(157, 40, 98, 0.55); }

.floating-actions__button--top {
  border: 2px solid var(--color-brand);
  background: var(--color-white);
  color: var(--color-brand);
  box-shadow: 0 4px 1.4rem rgba(0, 0, 0, 0.1);
}
.floating-actions__button--top:hover {
  background: var(--color-brand);
  color: var(--color-white);
  box-shadow: 0 6px 2rem rgba(157, 40, 98, 0.35);
}