html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* Promo popup, admin-controlled. Ported from the modal on index.php. */
.promo-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.72);
}

.promo-modal[hidden] { display: none; }

.promo-modal__inner { position: relative; max-width: min(680px, 100%); }

.promo-modal__inner img { display: block; width: 100%; height: auto; border-radius: 4px; }

.promo-modal__close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

/* noUiSlider sets a height but no width - the element takes its width from its container.
   The sliders sit in a Bootstrap .row with no col class, so as flex items they shrink to
   nothing and the track is invisible. Giving them the row's full width makes them usable
   without changing the markup, which is kept as the PHP page has it. */
#year_slider,
#price_slider {
    width: 100%;
    margin: 0 10px;
}

/* The handles need to sit above the track to be grabbable once the track is transparent,
   which product_filter.css makes it. */
#year_slider .noUi-handle,
#price_slider .noUi-handle {
    cursor: pointer;
}