:root {
    --bg: #EBDCB2;
    --mc: #AF4425;
    --sc: #662E1C;
    --h1: 3rem;
}


input[type="range"] {
  accent-color: #AF4425; /* Для сучасних браузерів */
}

/* Для Chrome, Safari, Edge */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #AF4425;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 2px #0003;
  margin-top: -7px; /* Центрування по вертикалі */
}

/* Для Firefox */
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #AF4425;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 2px #0003;
  margin-top: -7px; /* Центрування по вертикалі */
}



/* Додатково для кращого вигляду треку */
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: #662E1C;
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #662E1C;
}
input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  height: 6px;
  border-radius: 3px;
  background: #662E1C;
}