/* Худалдан авах урсгал — tokens.css-ийн өнгө, үсэг, зайг дагана. */
.product__action { display: grid; gap: var(--s3); }
.product__feedback { margin: 0; }
.product__feedback:empty { display: none; }

.checkout-hero { padding-bottom: var(--s7); }
.checkout-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin: 0 0 var(--s8); padding: 0; list-style: none; }
.checkout-steps li { display: grid; gap: var(--s2); padding: var(--s3) 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: var(--t-xs); }
.checkout-steps li[aria-current="step"] { color: var(--ink); border-top-color: var(--ink); font-weight: var(--w-emph); }
.checkout-steps .num { font-size: var(--t-label); color: var(--ink-mute); }
.checkout { display: grid; gap: var(--s10); align-items: start; }
.checkout__summary { min-width: 0; }
.checkout__title { margin: 0 0 var(--s5); font-size: var(--d-4); }
.checkout__delivery { margin-top: var(--s2); }
.checkout__back { margin-top: var(--s4); }
.checkout .order { padding-top: 0; gap: var(--s6); }
.checkout .order .lead { font-size: var(--d-3); }
.checkout .panel { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
.checkout .form-col { max-width: none; }
.checkout .form-col > .note { margin-bottom: var(--s1); }
.checkout .field-hint { margin: 0; color: var(--ink-soft); font-size: var(--t-xs); line-height: 1.6; }
.checkout .field-error { font-size: var(--t-xs); }
.delivery-fields { display: grid; gap: var(--s4); min-width: 0; margin: var(--s2) 0 0; padding: var(--s4) 0 0; border: 0; border-top: 1px solid var(--line); }
.delivery-fields legend { padding: 0 var(--s3) 0 0; font-family: var(--font-display); font-size: var(--d-4); }
.delivery-call { display: flex; align-items: center; gap: var(--s3); min-height: 44px; font-size: var(--t-sm); cursor: pointer; }
.delivery-call input { flex-shrink: 0; width: 20px; height: 20px; accent-color: var(--ink); }
.checkout textarea[aria-invalid="true"] { border-bottom-color: var(--accent); }
.checkout-restore { display: grid; gap: var(--s5); justify-items: start; padding: var(--s7) 0; max-width: 52ch; }
.checkout-feedback { margin: 0 0 var(--s7); max-width: 62ch; }
.checkout__availability { padding: var(--s4) 0; }
.line-availability { margin: 0; color: var(--accent); font-size: var(--t-xs); }
.pay__controls, .pay__recovery { display: grid; gap: var(--s4); }
.checkout [inert] { cursor: wait; }
.checkout .submit-row { justify-items: stretch; }
.checkout .submit-row .btn--do { width: 100%; }
.checkout .fine { padding-top: var(--s6); border-top: 1px solid var(--line); }
.checkout .line { grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s3); }
.checkout .line .slot { width: 64px; }
.checkout .line-name a { display: inline-flex; align-items: center; min-height: 44px; }
.checkout .line-name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.checkout .line-body .micro { font-size: var(--t-xs); }
.checkout .empty { grid-column: 1 / -1; gap: var(--s8); }
.empty__intro { display: grid; justify-items: start; gap: var(--s5); }
.empty__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s6); }
.empty__suggestions { display: grid; gap: var(--s5); padding-top: var(--s6); border-top: 1px solid var(--line); }
.empty__suggestions h2 { font-size: var(--d-4); }
.checkout .empty .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--gutter); }
.checkout .empty .tile .name { font-family: var(--font); font-size: var(--t-sm); line-height: 1.6; text-wrap: pretty; }
.checkout .empty .tile__row { gap: var(--s1); }
.checkout .empty .grid-3 > :nth-child(n + 3) { display: none; }
.checkout #order-lead { scroll-margin-top: var(--s7); }
@media (min-width: 640px) {
  .checkout-steps li { display: flex; align-items: baseline; gap: var(--s3); }
  .checkout .line { grid-template-columns: 80px minmax(0, 1fr) auto; gap: var(--s5); }
  .checkout .line .slot { width: 80px; }
  .checkout .empty .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .checkout .empty .grid-3 > :nth-child(n + 3) { display: block; }
}
@media (min-width: 1024px) {
  .checkout { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s11); }
  .checkout__summary { position: sticky; top: var(--s7); }
  .checkout-steps { margin-bottom: var(--s9); }
}
#checkout-account { overflow-wrap: anywhere; }