@media (max-width: 480px) {
  .header__preorder {
    display: none;
  }
}

.order {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-block-s);
}

.order__title {
  margin: 0;
  font: var(--type-heading-h3);
  color: var(--color-text-heading);
}

.order__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-inset-md);
}

.order__subtitle {
  margin: 0;
  font: var(--type-controls-btn-l);
  color: var(--color-text-heading);
}

.order__fields,
.order__address:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-inset-md);
}

.order__delivery {
  margin-bottom: calc(var(--spacing-gap-s) - var(--spacing-inset-md));
}

.order__confirms {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-s);
}

.order__note {
  margin: 0;
  color: var(--color-text-heading);
}


.preloader[hidden],.preloader[hidden] * {
  opacity: 0;
  visibility: hidden;
  pointer-events: none
}

.preloader {
  transition: opacity .3s ease 0s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(204, 204, 204, .5);
  z-index: 999
}

.preloader__circle {
  transition: opacity .3s ease 0s;
  height: 50px;
  width: 50px;
  border-left: 3px solid #005591;
  border-bottom: 3px solid #005591;
  border-right: 3px solid #005591;
  border-top: 3px solid transparent;
  border-radius: 50%;
  animation: spinner 1s linear infinite
}

.preloader-25 .preloader__circle {
  height: 25px;
  width: 25px;
}

@keyframes spinner {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}