/* ============================================================
   order.css — секция 9 «BUILD YOUR 5-PACK» (лаванда). Поток, токены.
   ТЗ 11.09 (форма заказа): вместо превью коробки, плиток и чека — список вкусов
   со степперами (§2) и блок итога (§3), как конфигуратор YES YOU CAN в
   дизайн-системе чипсов. Фиксированных высот нет — всё по содержимому.
   Стили .tot__* общие с модалкой (modal.css грузится после, переопределений нет).
   ============================================================ */

.ord { background: var(--c-lav); padding: 40px var(--side) 44px; display: flex; flex-direction: column; align-items: center; text-align: center; }

.ord__eyebrow {
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: var(--lh-cap);
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-eyebrow);
}
.ord__h2 {
  margin-top: 10px;
  font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-h2);
  line-height: var(--lh-head); color: var(--c-ink);
}
.ord__sub {
  margin-top: 12px;
  font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--c-muted);
}

/* ---------- ШАГ + СПИСОК ВКУСОВ СО СТЕППЕРАМИ (§2.2) ---------- */
.ord__step {
  margin-top: 24px; width: 100%; text-align: left;
  font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--c-eyebrow);
}
.packs {
  margin-top: 10px; width: 100%;
  background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-order);
  overflow: hidden; text-align: left;
}
.prow { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; }
.prow + .prow { border-top: 1px solid var(--c-border); }
/* выбранная строка (количество > 0) — тот же язык, что у прежней плитки .otile.is-on */
.prow.is-selected { box-shadow: inset 0 0 0 2px var(--c-dark); }

/* миниатюра: пачка 180×240 → 33px шириной, коробка микса 280×233 → 53px */
.prow__ph { flex: 0 0 auto; height: 44px; display: flex; align-items: center; }
.prow__ph img { height: 44px; width: auto; }

/* бюджет ширины на 390: 358 − рамка 2 − поля 28 = 328; пачка 33 + 12; степпер 104 + 12 → текст 167px */
.prow__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prow__name {
  font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-h3); line-height: 1.1;
  text-transform: uppercase; color: var(--c-ink);
}
.prow__tag { font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--c-muted); }

/* степпер — та же «пилюля», что была у количества в чеке, компактнее: 36+2+20+2+36+8 = 104px */
.stepper {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; padding: 0 4px;
  background: var(--c-lav); border-radius: var(--r-pill);
}
.stepper__btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  color: var(--c-ink); position: relative;
}
.stepper__btn::before { content: ""; position: absolute; inset: -4px; }   /* область нажатия 44×44 */
.stepper__btn:disabled { opacity: .35; pointer-events: none; }
.stepper__btn:active { transform: translateY(1px); }
.stepper__num { min-width: 20px; text-align: center; font-weight: 700; font-size: var(--fs-body); color: var(--c-muted); }
.prow.is-selected .stepper__num { color: var(--c-ink); }

/* ---------- ИТОГ (§3, вместо чека; высота по содержимому) ---------- */
.ord__total {
  margin-top: 20px; width: 100%;
  background: var(--c-white); border-radius: var(--r-card);
  box-shadow: var(--sh-card); padding: 20px; text-align: left;
  display: grid; grid-template-columns: 1fr auto; align-items: end;
}
.tot__label { font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-num-lg); color: var(--c-ink); }
.tot__packs { display: block; margin-top: 2px; font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-cap); color: var(--c-muted); }
.tot__right { display: grid; grid-template-columns: auto auto; justify-items: end; align-items: center; column-gap: 8px; text-align: right; }
.tot__was { font-size: var(--fs-cap); color: var(--c-muted); text-decoration: line-through; }
.tot__off { font-weight: 700; font-size: var(--fs-eyebrow); color: var(--c-cta); }
.tot__now { grid-column: 1 / -1; font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-h2); line-height: 1; color: var(--c-ink); }
.tot__free {
  grid-column: 1 / -1; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-border);
  font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: .3px; color: var(--c-cta);
}

.ord__note { margin-top: 14px; font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--c-muted); }
.ord__cta { margin-top: 16px; }
.ord__cta:disabled { opacity: .5; box-shadow: none; pointer-events: none; }   /* 0 коробок: «PICK YOUR FLAVOURS» */
.ord__ships { margin-top: 12px; font-size: var(--fs-cap); color: var(--c-muted); }