/* back-to-top.css
 *
 * The marketplace "Back to top" control (frontend/js/back-to-top.js).
 *
 * Loaded LAST on index.html — after site-deslop-v4.css — so these rules win
 * cascade ties. In particular `padding: 0` plus the explicit box size override
 * the global `button { min-height: 44px; min-width: 44px; padding: 12px 20px }`
 * rule in mobile-responsive.css, which would otherwise inflate the square.
 *
 * The desktop `right: 96px` default is the measured resting place beside the
 * cart FAB (24px page gutter + 56px FAB + 16px gap). It is only a default:
 * back-to-top.js re-measures the FAB at runtime and writes an inline `right`,
 * so a FAB that moves or resizes does not strand this button on top of it.
 *
 * No transitions anywhere, so prefers-reduced-motion needs no CSS rule — the
 * only motion is the scroll itself, which the script switches to 'auto'.
 */

.fs-back-to-top {
  position: fixed;
  right: 96px;
  bottom: 24px;
  z-index: 40;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg, 10px);
  border: 1px solid var(--border-defined, #6B5E50);
  background: var(--surface-card, #F5F0E8);
  color: var(--green-700, #37671E);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(45, 42, 38, 0.07));
  cursor: pointer;
}

/* `hidden` must win over the inline-flex above — otherwise the attribute that
   keeps the button out of the a11y tree would not keep it off the screen. */
.fs-back-to-top[hidden] {
  display: none !important;
}

.fs-back-to-top:hover {
  background: var(--surface-linen, #E8E2D8);
}

.fs-back-to-top:focus-visible {
  outline: 2px solid var(--green-700, #37671E);
  outline-offset: 2px;
}

/* Phone: no cart FAB gutter to dodge, but the bottom tab bar owns the thumb
   zone. --fs-bottom-nav-h is written by back-to-top.js from the bar's measured
   height; 60px matches --bottom-nav-height for the pass before the first
   measurement. */
@media (max-width: 768px) {
  .fs-back-to-top {
    right: 16px;
    bottom: calc(var(--fs-bottom-nav-h, 60px) + var(--safe-bottom, 0px) + 16px);
  }
}