.buy { padding: 40px 0 80px; }
.buy__inner { width: min(1120px, 100%); margin: 0 auto; padding: 0 20px; }
.buy__title { color: #191C1F; font-size: clamp(26px, 6vw, 38px); font-weight: 700;
  margin: 0 0 28px; text-align: center; }

.buy__grid { display: grid; gap: 20px; }

.buy__form-col, .buy__summary { background: #FFF; border: 1px solid #EBEBEB;
  border-radius: 24px; padding: 28px 24px; }

.buy__label { display: block; color: #191C1F; font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.buy__input { width: 100%; box-sizing: border-box; line-height: 24px; padding: 15px 20px;
  border-radius: 500px; border: 1px solid #D9D9D9; background: #FFF; color: #191C1F;
  font-size: 16px; font-family: inherit; }
.buy__input:focus { outline: none; border-color: #191C1F; }
.buy__hint { color: #6C7278; font-size: 14px; line-height: 155%; margin: 12px 0 0; }
.buy__error { color: #C63434; font-size: 14px; margin: 12px 0 0; }
.buy__submit { width: 100%; margin-top: 18px; padding: 16px; border: 0; border-radius: 500px;
  background: #BCE31A; color: #191C1F; font-size: 17px; font-weight: 500;
  font-family: inherit; cursor: pointer; }
.buy__submit[disabled] { opacity: .6; cursor: default; }
.buy__note { color: #6C7278; font-size: 13px; line-height: 155%; margin: 16px 0 0; }
.buy__note a { color: #4E7A0B; }

.buy__sum-title { color: #191C1F; font-size: 18px; font-weight: 500; margin: 0 0 14px; }
.buy__list { margin: 0; padding-left: 20px; color: #363A3F; font-size: 15px; line-height: 165%; }
.buy__list li { margin-bottom: 6px; }
.buy__price { margin-top: 20px; padding-top: 20px; border-top: 1px solid #EBEBEB;
  display: flex; flex-direction: column; gap: 4px; }
.buy__price-label { color: #6C7278; font-size: 14px; }
.buy__price-value { color: #191C1F; font-size: 34px; font-weight: 700; line-height: 1.1; }
.buy__price-value span { font-size: 18px; font-weight: 500; }
.buy__price-sub { color: #6C7278; font-size: 14px; }

.buy__back { display: block; text-align: center; margin-top: 28px;
  color: #4E7A0B; font-size: 15px; text-decoration: none; }
.buy__back:hover { text-decoration: underline; }

@media (min-width: 1024px) {
  .buy { padding: 64px 0 96px; }
  .buy__grid { grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; }
  .buy__form-col, .buy__summary { padding: 36px 32px; }
  .buy__title { margin-bottom: 36px; }
}

/* --- вибір способу оплати --- */
.buy__methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.buy__method { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px 16px; border-radius: 16px; border: 2px solid #E4E4E4; background: #FFF;
  cursor: pointer; text-align: left; font-family: inherit; transition: border-color .12s ease; }
.buy__method:hover { border-color: #C7C7C7; }
.buy__method.is-active { border-color: #BCE31A; background: #FBFEF0; }
.buy__method-title { color: #191C1F; font-size: 15px; font-weight: 500; }
.buy__method-sub { color: #6C7278; font-size: 12px; line-height: 1.3; }
.buy__phone-wrap { margin-top: 16px; }

/* Автозаповнення Chrome перебиває фон інпута своїм сірим/жовтим. Тримаємо наш
   білий фон і темний текст: box-shadow inset — єдиний спосіб, а довга затримка
   transition прибирає спалах під час підстановки. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill {
  -webkit-text-fill-color: #191C1F;
  -webkit-box-shadow: 0 0 0 1000px #FFF inset;
  box-shadow: 0 0 0 1000px #FFF inset;
  caret-color: #191C1F;
  transition: background-color 9999s ease-in-out 0s;
}

.buy__input.is-invalid { border-color: #E5484D; }
.buy__input.is-invalid:focus { border-color: #E5484D; }

/* Три обов'язкові згоди перед кнопкою оплати. Другу й третю користувач
   ставить сам — вони не передвідмічені, інакше відмова від 14-денного права
   розірвання не має юридичної сили. */
.buy__consents { margin-top: 22px; display: grid; gap: 12px; }
.buy__check { display: grid; grid-template-columns: 20px 1fr; gap: 10px;
  align-items: start; cursor: pointer; }
.buy__check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none;
  accent-color: #191C1F; cursor: pointer; }
.buy__check span { color: #4A4F55; font-size: 13px; line-height: 158%; }
.buy__check a { color: #4E7A0B; }

/* Назва товару так, як вона піде у фіскальний чек. */
.buy__product { margin: -6px 0 14px; color: #6C7278; font-size: 13px; line-height: 155%; }

/* Промо-посилання зі знижкою: плашка над складом курсу і закреслена стара ціна.
   Ціну рахує бекенд — тут лише показ. */
.buy__promo { display: flex; flex-direction: column; gap: 4px; margin: -4px 0 16px;
  padding: 12px 14px; border-radius: 14px; background: #F2F7DF; border: 1px solid #DDE9BC; }
.buy__promo-tag { color: #4E7A0B; font-size: 14px; font-weight: 700; }
.buy__promo-txt { color: #6C7278; font-size: 13px; line-height: 150%; }
.buy__promo--off { background: #FFF4F4; border-color: #FFD9D9; }
.buy__promo--off .buy__promo-tag { color: #C63434; }
/* Передзамовлення — синій, а не зелений: це не «знижка вже твоя», а окрема домовленість
   зі строком, і покупець має прочитати її, а не проковтнути як звичайний промокод. */
.buy__promo--pre { background: #EEF4FF; border-color: #CFE0FF; }
.buy__promo--pre .buy__promo-tag { color: #2C5FB3; }
/* Місця розібрані: нейтральний сірий. Червоний читався б як помилка оплати. */
.buy__promo--closed { background: #F5F6F8; border-color: #E3E5E9; }
.buy__promo--closed .buy__promo-tag { color: #3C4046; }
.buy__promo-txt a { color: #2C5FB3; }

.buy__price-old { color: #6B6B6B; font-size: 16px; text-decoration: line-through; }