/* Buy and pay flow. */
.buy-wrap { width: min(760px, 100% - 2.4rem); margin: 1.8rem auto 4rem; }

.steps-bar { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.4rem; counter-reset: s; }
.steps-bar li {
  flex: 1; text-align: center; font-size: .82rem; color: var(--ink-3);
  padding: .5rem .3rem; border-top: 3px solid var(--line); counter-increment: s;
}
.steps-bar li::before { content: counter(s) ". "; }
.steps-bar li.now { color: var(--green-deep); border-top-color: var(--green); font-weight: 700; }
.steps-bar li.done { color: var(--ink-2); border-top-color: var(--green-deep); }

.buy-product { margin-bottom: 1.2rem; }
.buy-product h1 { font-size: 1.4rem; margin: 0 0 .3rem; }
.buy-price { margin: 0 0 .4rem; font-size: 1.5rem; color: var(--forest); font-family: var(--serif); }
.buy-price .was { font-size: .95rem; color: var(--ink-3); text-decoration: line-through; font-family: var(--sans); }

.pay-grid { display: grid; grid-template-columns: 240px 1fr; gap: 1.6rem; align-items: start; margin-top: 1rem; }
@media (max-width: 680px) { .pay-grid { grid-template-columns: 1fr; } }

.pay-qr { text-align: center; }
.pay-qr img { width: 100%; max-width: 240px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
/* Was a monospace UPI id; now the payee name, so it reads as prose. */
.pay-upi { font-size: .9rem; color: var(--ink-2); margin: .5rem 0 0; }

.pay-ref {
  background: var(--gold-pale); border: 1px solid var(--gold-soft); border-radius: 10px;
  padding: .8rem 1rem; margin-bottom: .7rem;
}
.pay-ref span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #7a5f0e; }
.pay-ref strong { font-family: Consolas, monospace; font-size: 1.25rem; color: var(--forest); letter-spacing: .04em; }

.pay-app { width: 100%; margin-top: .4rem; }
/* A upi:// link only does anything on a phone. On a desktop it silently fails,
   which looks like a broken button — so say so rather than let them wonder. */
@media (min-width: 900px) { .pay-app { display: none; } }

.pay-rule { border: none; border-top: 1px solid var(--line); margin: 1.4rem 0; }