/* Layer 47 — сторінки магазину: кошик, оформлення, трекінг, оплата.
   Базові компоненти (.btn, .card, .field, .stepper, .section-title, .status-badge, .empty)
   визначені у main.css; тут — лише сторінкові класи на тих самих токенах. */

/* ---------- Спільне: шапка сторінки ------------------------------------- */

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.1429rem;
  padding-top: 2rem;
}

.page-head .section-title { margin: 0; }

.page-head__aside { display: flex; align-items: center; gap: 0.8571rem; }

.page-head__aside .link-muted { font-size: 0.8571rem; }

/* ---------- Кошик (design/2.png, 3a) ------------------------------------ */

.cart {
  display: grid;
  grid-template-columns: 1fr 24.2857rem;
  gap: 1.7143rem;
  align-items: start;
  padding: 1.4286rem 0 3.4286rem;
}

.cart__list {
  display: flex;
  flex-direction: column;
  gap: 1.1429rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart__line {
  display: flex;
  align-items: center;
  gap: 1.2857rem;
  padding: 1.1429rem;
  background: var(--card);
  border-radius: var(--r-card);
}

.cart__thumb {
  flex: none;
  width: 7.8571rem;
  height: 6.8571rem;
  border-radius: 0.8571rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hero);
  text-decoration: none;
}

.cart__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart__thumb--placeholder {
  font-size: 0.6429rem;
  color: var(--muted);
  text-align: center;
  padding: 0 0.7143rem;
  line-height: 1.4;
}

/* Кольори плейсхолдерів з макета — по колу для перших чотирьох позицій */
.cart__line:nth-child(4n + 1) .cart__thumb--placeholder { background: #f6c6a0; color: #8c5a33; }
.cart__line:nth-child(4n + 2) .cart__thumb--placeholder { background: #cfc4e6; color: #5d5378; }
.cart__line:nth-child(4n + 3) .cart__thumb--placeholder { background: #bcd8c2; color: #4c6b52; }
.cart__line:nth-child(4n + 4) .cart__thumb--placeholder { background: #a9cbd8; color: #3f5f6b; }

.cart__info {
  display: flex;
  flex-direction: column;
  gap: 0.4286rem;
  flex: 1;
  min-width: 0;
}

.cart__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.cart__title a { color: inherit; text-decoration: none; }
.cart__title a:hover { color: var(--accent-deep); }

.cart__meta {
  font-size: 0.7857rem;
  color: var(--muted-2);
  margin: 0;
}

.cart__controls {
  display: flex;
  align-items: center;
  gap: 0.7143rem;
  margin-top: 0.2857rem;
}

.cart__controls form { display: contents; }

.cart__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  flex: none;
}

.cart__price {
  font-size: 1.0714rem;
  font-weight: 700;
  color: var(--accent-deep);
  white-space: nowrap;
}

.cart__unit {
  display: block;
  font-size: 0.7143rem;
  font-weight: 400;
  color: var(--muted-2);
  text-align: right;
}

.cart__remove {
  font: inherit;
  font-size: 0.7857rem;
  color: var(--muted-2);
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.cart__remove:hover { color: var(--accent-deep); }

.cart__continue {
  display: inline-flex;
  align-items: center;
  gap: 0.5714rem;
  margin-top: 0.2857rem;
  font-size: 0.8571rem;
  color: var(--muted-2);
  text-decoration: none;
}

.cart__continue:hover { color: var(--text); }
.cart__continue .accent { font-weight: 700; }

.cart__empty { grid-column: 1 / -1; }

/* ---------- Підсумок «Разом» ------------------------------------------- */

.summary {
  position: sticky;
  top: 1.1429rem;
  display: flex;
  flex-direction: column;
  gap: 1.1429rem;
  padding: 1.7143rem;
  background: var(--card);
  border-radius: var(--r-card);
}

.summary__title {
  font-size: 1.4286rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8571rem;
  font-size: 0.9286rem;
}

.summary__row .summary__label { color: var(--muted); }
.summary__row .summary__value { font-weight: 700; text-align: right; }
.summary__row--discount .summary__value { color: var(--accent-deep); }

.summary__promo-code { color: var(--accent); font-weight: 700; }

.summary__promo-remove {
  font: inherit;
  font-size: 0.7857rem;
  color: var(--muted-2);
  background: none;
  border: 0;
  padding: 0 0 0 0.4286rem;
  cursor: pointer;
  text-decoration: underline;
}

.summary__promo-remove:hover { color: var(--accent-deep); }

.summary__divider {
  border: 0;
  border-top: 2px dashed var(--line);
  margin: 0;
}

.summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8571rem;
}

.summary__total .summary__label { font-size: 0.9286rem; font-weight: 700; }
.summary__total .summary__value { font-size: 1.5714rem; font-weight: 700; color: var(--accent-deep); }

.summary__note {
  margin: 0;
  font-size: 0.7143rem;
  line-height: 1.6;
  text-align: center;
  color: var(--muted-2);
}

.summary__error {
  margin: -0.5714rem 0 0;
  font-size: 0.7857rem;
  color: var(--accent-deep);
}

/* Форма промокоду: інпут + «OK» */
.promo-form { display: flex; gap: 0.5714rem; }

.promo-form__input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.8571rem;
  color: var(--text);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r-btn);
  padding: 0.7143rem 0.8571rem;
}

.promo-form__input::placeholder { color: #b3a78f; }
.promo-form__input:focus { outline: none; border-color: var(--accent); }

.promo-form__btn {
  font: inherit;
  font-size: 0.8571rem;
  font-weight: 700;
  color: var(--text);
  background: var(--hero);
  border: 0;
  border-radius: var(--r-btn);
  padding: 0.7143rem 1rem;
  cursor: pointer;
}

.promo-form__btn:hover { background: var(--line); }

/* ---------- Оформлення замовлення ---------------------------------------- */

.checkout {
  display: grid;
  grid-template-columns: 1fr 24.2857rem;
  gap: 1.7143rem;
  align-items: start;
  padding: 1.4286rem 0 3.4286rem;
}

.checkout__form {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 1.7143rem;
}

.checkout__form .form-grid { margin-bottom: 1.4286rem; }

/* CTA воронки (кошик → checkout → оплата): блочна кнопка з радіусом 0.7143rem, як у макеті 2.png,
   а не «пігулка» героя/каталогу */
.summary .btn--block,
.checkout__form .btn--block,
.lookup .btn--block,
.track__payment .btn--block,
.fake-pay__actions .btn {
  border-radius: var(--r-btn);
  font-size: 1rem;
  padding: 1.0714rem 1.7143rem;
}

.checkout__errors {
  margin: 0 0 1.1429rem;
  padding: 0.7143rem 1rem;
  font-size: 0.8571rem;
  color: var(--accent-deep);
  border: 1px solid var(--accent-deep);
  border-radius: var(--r-btn);
  list-style: none;
}

.checkout__legend {
  font-size: 0.9286rem;
  font-weight: 700;
  margin: 0 0 0.8571rem;
}

.checkout__aside { position: sticky; top: 1.1429rem; }

.checkout__items {
  display: flex;
  flex-direction: column;
  gap: 0.7143rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checkout__item {
  display: flex;
  justify-content: space-between;
  gap: 0.8571rem;
  font-size: 0.8571rem;
}

.checkout__item-name { color: var(--text); }
.checkout__item-qty { color: var(--muted-2); }
.checkout__item-total { font-weight: 700; white-space: nowrap; }

/* ---------- Трекінг замовлення ------------------------------------------ */

.track {
  display: grid;
  grid-template-columns: 1fr 24.2857rem;
  gap: 1.7143rem;
  align-items: start;
  padding: 1.4286rem 0 3.4286rem;
}

.track__main { display: flex; flex-direction: column; gap: 1.1429rem; }
.track__aside { display: flex; flex-direction: column; gap: 1.1429rem; }

.track__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.track__head .section-title { margin: 0; }

.track__date { font-size: 0.8571rem; color: var(--muted-2); }

.track__panel {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 1.4286rem 1.7143rem;
}

.track__panel-title {
  font-size: 0.9286rem;
  font-weight: 700;
  margin: 0 0 0.8571rem;
}

.track__steps {
  display: flex;
  gap: 0.5714rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.track__step {
  flex: 1;
  position: relative;
  padding-top: 1.2857rem;
  font-size: 0.7857rem;
  color: var(--muted-2);
}

.track__step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.5714rem;
  background: var(--line);
  border-radius: 0.2857rem;
}

.track__step--done { color: var(--muted); }
.track__step--done::before { background: var(--accent); }

.track__step--current { color: var(--text); font-weight: 700; }
.track__step--current::before { background: var(--accent-deep); }

.track__cancelled {
  margin: 0;
  font-size: 0.8571rem;
  color: var(--muted);
}

.track__items {
  display: flex;
  flex-direction: column;
  gap: 0.8571rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.track__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8571rem;
  font-size: 0.9286rem;
}

.track__item-name { font-weight: 700; margin: 0; }
.track__item-spec { font-size: 0.7857rem; color: var(--muted-2); margin: 0; }
.track__item-total { font-weight: 700; white-space: nowrap; }
.track__item-qty { font-size: 0.7857rem; color: var(--muted-2); display: block; text-align: right; }

.track__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4286rem 1.1429rem;
  margin: 0;
  font-size: 0.8571rem;
}

.track__dl dt { color: var(--muted); }
.track__dl dd { margin: 0; font-weight: 700; word-break: break-word; }

.track__ttn { font-family: var(--font-body); letter-spacing: .04em; }

.track__payment {
  display: flex;
  flex-direction: column;
  gap: 0.8571rem;
}

.track__payment-state { font-size: 0.8571rem; color: var(--muted); margin: 0; }
.track__payment-state strong { color: var(--text); }
.track__payment-reason { font-size: 0.7857rem; color: var(--accent-deep); margin: 0; }

.track__attention {
  font-size: 0.7857rem;
  color: var(--muted-2);
  margin: 0;
}

/* ---------- Пошук замовлення --------------------------------------------- */

.lookup { max-width: 34.2857rem; padding: 1.4286rem 0 3.4286rem; }

.lookup__card {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 1.7143rem;
}

.lookup__hint { font-size: 0.8571rem; color: var(--muted); margin: 0 0 1.1429rem; }

.lookup__error {
  margin: 0 0 1rem;
  padding: 0.7143rem 1rem;
  font-size: 0.8571rem;
  color: var(--accent-deep);
  border: 1px solid var(--accent-deep);
  border-radius: var(--r-btn);
}

/* ---------- Повернення з оплати ------------------------------------------ */

.payment-return {
  display: flex;
  justify-content: center;
  padding: 3.4286rem 0 4.5714rem;
}

.payment-return__card {
  width: 100%;
  max-width: 34.2857rem;
  background: var(--card);
  border-radius: var(--r-card);
  padding: 2.2857rem 2rem;
  text-align: center;
}

.payment-return__title {
  font-size: 1.2857rem;
  font-weight: 700;
  margin: 1.1429rem 0 0.4286rem;
}

.payment-return__text {
  font-size: 0.8571rem;
  color: var(--muted);
  margin: 0;
}

.payment-return__fallback {
  margin-top: 1.4286rem;
  padding-top: 1.1429rem;
  border-top: 2px dashed var(--line);
  font-size: 0.8571rem;
  color: var(--muted);
}

.payment-return__fallback .btn { margin-top: 0.8571rem; }

.spinner {
  width: 2.8571rem;
  height: 2.8571rem;
  margin: 0 auto;
  border: 0.2857rem solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinner-rotate .9s linear infinite;
}

@keyframes spinner-rotate { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}

/* ---------- Тестова оплата (fake provider) ------------------------------- */

.fake-pay {
  display: flex;
  justify-content: center;
  padding: 3.4286rem 0 4.5714rem;
}

.fake-pay__card {
  width: 100%;
  max-width: 34.2857rem;
  background: var(--card);
  border: 2px dashed var(--accent);
  border-radius: var(--r-card);
  padding: 2rem;
}

.fake-pay__label {
  display: inline-block;
  font-size: 0.7143rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--accent);
  border-radius: 0.4286rem;
  padding: 0.2857rem 0.5714rem;
  margin-bottom: 1.1429rem;
}

.fake-pay__title { font-size: 1.2857rem; font-weight: 700; margin: 0 0 0.2857rem; }
.fake-pay__amount { font-size: 1.8571rem; font-weight: 700; color: var(--accent-deep); margin: 0 0 0.2857rem; }
.fake-pay__meta { font-size: 0.8571rem; color: var(--muted); margin: 0 0 1.4286rem; }

.fake-pay__actions {
  display: flex;
  flex-direction: column;
  gap: 0.7143rem;
}

.fake-pay__actions form { display: contents; }

.fake-pay__hint {
  margin: 1.1429rem 0 0;
  font-size: 0.7857rem;
  color: var(--muted-2);
  line-height: 1.6;
}

/* ---------- Адаптив ------------------------------------------------------
   ≥1440 ширша колонка підсумку · ≤1024 одна колонка (підсумок після списку,
   sticky знімається, інакше блок «стрибає») · ≤560 телефон.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  /* У розмітці підсумок іде після списку — одна колонка зберігає цей порядок */
  .cart,
  .checkout,
  .track {
    grid-template-columns: minmax(0, 1fr);
  }

  /* sticky у стеку прилипає до верху і «стрибає» під час скролу */
  .summary,
  .checkout__aside {
    position: static;
    top: auto;
  }

  .lookup { max-width: none; }
}

@media (max-width: 700px) {
  .track__steps {
    flex-wrap: wrap;
    gap: 0.8571rem;
  }

  .track__step { flex: 1 1 10rem; }
}

@media (max-width: 560px) {
  .cart { padding-top: 1rem; }

  .cart__line {
    flex-wrap: wrap;
    gap: 0.8571rem 1rem;
    padding: 1rem;
  }

  .cart__thumb {
    width: 6rem;
    height: 5.4286rem;
  }

  .cart__info { flex: 1 1 11.4286rem; }

  .cart__title { font-size: 0.9286rem; }

  .cart__controls { margin-top: 0.4286rem; }

  /* Ціна ліворуч, «Видалити» праворуч — обидва в межах великого тач-таргета */
  .cart__side {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.8571rem;
  }

  .cart__unit { text-align: left; }

  .cart__remove {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
    font-size: 0.8571rem;
  }

  .summary { padding: 1.4286rem; }

  .promo-form__input { font-size: 1.1429rem; }
  .promo-form__btn { min-height: 44px; padding: 0.7143rem 1.1429rem; }

  .checkout__form { padding: 1.2857rem; }

  .track__panel { padding: 1.2857rem; }

  .track__steps {
    flex-direction: column;
    gap: 0.8571rem;
  }

  .track__step {
    flex: none;
    padding-top: 0;
    padding-left: 1.2857rem;
  }

  .track__step::before {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 0.5714rem;
    height: auto;
  }

  .track__dl { grid-template-columns: 1fr; gap: 2px; }
  .track__dl dd { margin-bottom: 0.5714rem; }

  .page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5714rem;
  }

  .lookup__card, .payment-return__card, .fake-pay__card { padding: 1.4286rem; }
}