/* ================================================
   НАШЕ САШЕ — кнопка «наверх»
   Появляется после двух экранов прокрутки
   ================================================ */

.to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 150;

  width: 62px;
  height: 62px;
  padding: 0;

  background: #fdfbf7;
  border: none;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  /* Скрыта, пока не прокрутили достаточно */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .28s ease, transform .28s ease,
              visibility .28s, background .2s;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top img {
  width: 30px;
  height: 30px;
  display: block;
  transition: filter .2s;
}

.to-top span {
  font-family: 'PT Sans', sans-serif;
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a6f5c;
  transition: color .2s;
}

.to-top:hover {
  background: #a81f18;
  transform: translateY(-4px);
}

/* Иконка красная — на красном фоне делаем её светлой */
.to-top:hover img { filter: brightness(0) invert(1); }
.to-top:hover span { color: #fdfbf7; }

.to-top:focus-visible {
  outline: 2px solid #a81f18;
  outline-offset: 3px;
}

/* ── Мобильный ────────────────────────────────── */

@media (max-width: 860px) {
  .to-top {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
  .to-top img { width: 26px; height: 26px; }
  .to-top span { font-size: 7px; }
}