/* Savat va to‘lov. TZ 8.
 *
 * ⛔ Bu ekran kuniga yuzlab marta ochiladi. Ikkita qaror shundan
 * chiqqan:
 *
 * 1. Skaner maydoni YIRIK va ekranning tepasida — kassir unga
 *    qaramasdan ura oladi.
 * 2. Miqdor maydoni o‘ngda va katta: bir qo‘lda tovar, ikkinchi
 *    qo‘lda yozuv.
 */

/* ── Tepa qator ────────────────────────────────────────── */

.sale-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sale-top .chek{font-family:ui-monospace,monospace;font-size:var(--t-2);
  font-weight:600;color:var(--mid);letter-spacing:.02em;white-space:nowrap}
.sale-top .here{margin-left:auto;color:var(--muted);font-size:var(--t-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}
.sale-top select{margin-left:auto;height:36px;max-width:52%;
  border:0;box-shadow:var(--ctl-sh);border-radius:10px;
  background:var(--glass);
  color:var(--ink);font:inherit;font-size:var(--t-2);padding:0 8px}
.sale-top select:disabled{opacity:.55}

/* ⛔ Smena holati DOIM ko‘rinadi.
 *
 * Naqd savdo ochiq smenasiz o‘tmaydi (13.8). Kassir buni tasdiqlash
 * paytida emas, ISHNI BOSHLAGANDA bilishi kerak — aks holda savatni
 * to‘ldirib bo‘lib, oxirida to‘siqqa uriladi. */
.shift-chip{min-height:44px;padding:4px 12px;border-radius:9px;
  border:0;box-shadow:var(--ctl-sh);background:var(--glass);cursor:pointer;
  font:inherit;font-size:var(--t-2);font-weight:600;white-space:nowrap}
.shift-chip.on{color:var(--ok);border-color:rgba(15,145,96,.3);
  background:rgba(15,145,96,.08)}
.shift-chip.off{color:var(--danger);border-color:#f0cfcf;
  background:#fdf2f2}


/* ⛔ Sotuvchi TEPADA va doim ko‘rinadi.
 *
 * Tanlov yodda qoladi (kichik do‘konda kun bo‘yi bir odam xizmat
 * ko‘rsatadi), lekin yashirilsa noto‘g‘ri odamga yozilib ketardi va
 * oy oxirida hisob buzilardi. Ko‘rinib tursa — xato darhol seziladi. */
/* ── Savat sarlavhasi va sotuvchi chipi (BILLZ kassasi) ──── */
.cart-head{display:flex;align-items:center;gap:8px;margin:12px 0 8px}
.cart-head b{font-size:var(--t-6);font-weight:600;letter-spacing:-.01em}
.cart-head .cart-cnt{min-width:26px;height:24px;padding:0 8px;border-radius:12px;
  background:#eef1f6;color:var(--mid);font-size:var(--t-2);font-weight:500;
  display:inline-flex;align-items:center;justify-content:center}
/* ⛔ SAVATNI BO‘SHATISH — qator soni YONIDA (BILLZ surati). Jim
   kulrang: kundalik amal emas. Bosilganda qizaradi. */
.cart-head .cart-wipe{border:0;background:none;padding:0 4px;
  color:var(--muted);font-size:var(--t-3);line-height:1;cursor:pointer;
  min-width:var(--tap);min-height:var(--tap)}
.cart-head .cart-wipe:hover,.cart-head .cart-wipe:active{color:var(--danger)}

.cart-head .chek{margin-left:auto;color:#c3c8cf;font-size:20px;
  font-family:ui-monospace,monospace;white-space:nowrap}

/* ⛔ Ochiladigan ro‘yxat o‘rniga chip: do‘konda o‘nlab sotuvchi
   bo‘lishi mumkin va `select` telefonda uzun bo‘lib ketardi. */
.seller-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
/* ⛔ TANLANMAGANI HAM TANLASA BO‘LADIGAN ko‘rinishda. `--muted`
   turgan edi va «Hammasi / Tugaganlari» juftligida tanlanmagani
   o‘chirilgan tugmadek ko‘rinardi: bittasi to‘q ko‘k, ikkinchisi
   oqargan (2026-09-12, suratda ko‘rindi). Tanlovni RAMKA va FON
   ko‘rsatadi, matnni o‘chirish orqali emas. */
/* ⛔ 44px — sensor (2026-09-19); 30 edi. */
.chip{height:44px;padding:0 14px;border-radius:22px;border:0;
  box-shadow:var(--ctl-sh);
  background:#fff;color:var(--ink);font:inherit;font-size:var(--t-2);cursor:pointer}
.chip.on{background:var(--mid);color:#fff}
.chip.add{width:44px;padding:0;color:var(--mid);font-size:16px}
/* ⛔ SOTUVCHI SO‘RALYAPTI (do‘kon `require_seller` yoqqan).
   Rang OGOHLANTIRISH (`--warn`), xato emas: kassir noto‘g‘ri ish
   qilmadi — shunchaki javob bermadi. */
.chip.ask{background:#fdf6ea;color:var(--warn);font-weight:500}
/* Sotuvchi ro‘yxatidagi tartib raqami — «S», keyin «1» */
.seller-row-item .num{min-width:20px;height:20px;border-radius:6px;
  background:#eef1f6;color:var(--muted);font-size:var(--t-2);font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto}
.ask-hint{margin-top:6px;color:var(--warn);font-size:var(--t-2)}

/* ⛔ Skaner maydoni — ekranning eng muhim elementi */
.scan-field input{height:var(--tap-lg);font-size:var(--t-5);font-weight:500}
.scan-field input:focus{border-color:var(--mid);
  box-shadow:var(--ring)}

/* ── Sarlavhaning yangi unsurlari (BILLZ, namuna tasdiqlangan) ──
 * Joylashuvni pastdagi 820px bloklari hal qiladi: ikonlar, «/»
 * eslatmasi va klavish belgilari faqat kompyuterda ko‘rinadi. */
.scan-holder{display:flex;gap:10px}
.scan-field{flex:1;position:relative}
.scan-field input{width:100%;padding-right:46px}
.scan-hint{position:absolute;right:14px;top:50%;
  transform:translateY(-50%);pointer-events:none}
/* Yozila boshlagach eslatma olib qo‘yiladi */
.scan-field input:not(:placeholder-shown)~.scan-hint{display:none}
.sale-wrap .kbd{min-width:22px;height:22px;padding:0 6px;
  border:1px solid var(--line);border-radius:6px;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--t-2);font-weight:500;color:var(--muted)}
.icon-btn{width:var(--tap);height:var(--tap);flex:0 0 auto;border:0;
  box-shadow:var(--ctl-sh);border-radius:12px;background:#fff;
  color:var(--mid);font-size:21px;cursor:pointer}
/* Ulgurji — lentaning kompyuterdagi ko‘rinishi: almashtirgich */
.tgl{display:none;align-items:center;gap:8px;margin-left:16px;
  border:0;background:none;color:var(--ink);font:inherit;
  font-size:var(--t-3);padding:0;cursor:pointer;min-height:44px}
.tgl .knob{width:38px;height:22px;border-radius:11px;
  background:#d7dbe2;position:relative}
.tgl .knob::after{content:'';position:absolute;left:2px;top:2px;
  width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:var(--sh-knob);transition:left .15s}
/* ⛔ Yoqilgani lentadagi rang bilan bir xil — ikki ekranda ikki
   rang bo‘lsa kassir «bu boshqa narsa» deb o‘ylardi. */
.tgl.on .knob{background:#7b4bd6}
.tgl.on .knob::after{left:18px}
.sellers-row{display:contents}

/* ── Savat qatorlari ───────────────────────────────────── */

.lines{margin-top:6px}
/* ⛔ Tartib BILLZ dagidek: miqdor CHAPDA (kassir eng ko‘p shuni
   o‘zgartiradi), keyin rasm o‘rni, nom va kod, o‘ngda summa va
   sotuvchi ismi. */
.line{display:flex;align-items:center;gap:10px;padding:10px;
  border-radius:10px;background:#f7f8fa;margin-bottom:6px}

/* ⛔ FAQAT SAVAT QATORI. `.line` ni qaytarish ekrani ham
   ishlatadi (`return.js`) — u yerda tartib boshqacha va bu
   qoidalar unga tegmasligi kerak. */
.line.cart{background:var(--glass);border:0;box-shadow:var(--card-sh);
  border-radius:var(--card-r);padding:12px 10px;gap:10px;margin-bottom:8px}
.line.cart .thumb{width:44px;height:44px;border-radius:12px;font-size:18px}
/* Nom · narx · kod USTMA-UST: 390px da beshta ustun sig‘masdi */
.line.cart .who{gap:2px}
.line.cart .who b{font-size:var(--t-4)}
.line.cart .sum{text-align:left;font-size:var(--t-4)}
.line.cart .sub{font-size:var(--t-2)}

/* ⛔ NOM QIRQILMAYDI, O‘RALADI.
 *
 * Egasi suratda belgilab ko‘rsatdi: «MJCODIE…». 390px da bitta
 * qatorga nom, hisoblagich va o‘chirish tugmasi sig‘masdi va
 * nomdan sakkiz harf qolardi. Endi nom ikki qatorgacha o‘raladi
 * — qirqish faqat undan keyin.
 *
 * ⛔ `-webkit-line-clamp` — hamma brauzerda (jumladan Safari)
 * ishlaydigan yagona yo‘l; `line-clamp` hali hamma joyda emas. */
.line.cart .who b{white-space:normal;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.25}

/* «− 1 ＋» — BILLZ hisoblagichi. ⛔ SENSOR (2026-09-19): 44px;
   28×36 edi — eng ko‘p bosiladigan tugma eng kichigi edi. */
.step{display:flex;align-items:center;flex:0 0 auto;
  border-radius:12px;background:#f2f4f7}
.step .pm{width:44px;height:44px;border:0;background:none;cursor:pointer;
  color:var(--mid);font-size:var(--t-5);line-height:1;font-family:inherit}
.step .qty{width:36px;height:44px;border:0;background:none;
  box-shadow:none;font-size:var(--t-4);padding:0}
.step .qty:focus{outline:none;box-shadow:none}

/* ⛔ O‘chirish tugmasi QAYTARILDI (egasi so‘radi). 44px — sensor. */
.line.cart .drop{width:44px;height:44px;flex:0 0 auto;border:0;
  border-radius:9px;background:transparent;color:#b9bfc7;
  font-size:var(--t-4);cursor:pointer}
.line.cart .drop:active{background:#fdf2f2;color:var(--danger)}
.line .who{flex:1;display:flex;flex-direction:column;min-width:0}
.line .who b{font-size:var(--t-3);font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.line .sub{font-size:var(--t-2);color:#adb3bb}
.line .sub s{opacity:.6;margin-left:4px}
/* Rasm hali yo‘q (ROADMAP 7.5 B3) — o‘rni turadi, bo‘sh ko‘rinadi */
.line .thumb{width:34px;height:34px;flex:0 0 auto;border-radius:8px;
  background:#fff;border:0;box-shadow:var(--ctl-sh);
  display:flex;align-items:center;justify-content:center;
  color:#c3c8cf;font-size:var(--t-4)}
.line .line-right{display:flex;flex-direction:column;align-items:flex-end;
  gap:2px;flex:0 0 auto}
.line .line-right .sub{color:var(--ink);font-weight:500}
.line .qty{width:60px;height:44px;flex:0 0 auto;text-align:center;
  font-size:var(--t-4);font-weight:500;border:0;box-shadow:var(--ctl-sh);
  border-radius:9px;background:#fff;color:var(--ink);font-family:inherit}
/* ⛔ KATAKCHA YORLIG‘I. `input` ning umumiy qoidasi (to‘liq kenglik,
   44px balandlik) katakchaga ham tushib, u bo‘sh kulrang qutining
   o‘rtasida yolg‘iz turardi, yozuvi esa pastga tushib ketgan edi
   (UX_TANQID 1.1). Katakcha kichik, yozuv yonida, butun qator
   bosiladi. */
.check{display:flex;align-items:center;gap:10px;min-height:var(--tap);
  cursor:pointer;font-size:var(--t-3);color:var(--ink)}
.check input{width:22px;height:22px;flex:0 0 auto;margin:0;padding:0;
  box-shadow:none;accent-color:var(--mid)}
.line .qty:focus{outline:none;border-color:var(--mid);
  box-shadow:var(--ring)}
/* ⛔ Narx to‘q sariq — BILLZ dagidek (skrinshotdan olindi) */
.line .sum{text-align:right;font-size:var(--t-3);font-weight:600;
  color:var(--price)}
/* Kelishilgan narx (8.4) — qalam summaning yonida */
/* ⛔ Qalam 15×15 edi. Endi 44×44, manfiy chekka bilan — qator
   balandligi o‘zgarmaydi, barmoq maydoni kattalashadi. */
.line .pen{border:0;background:none;color:var(--price);cursor:pointer;
  font-size:var(--t-2);padding:0;min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  margin:-12px -12px -12px -4px}

/* ── Jami ──────────────────────────────────────────────── */

/* ⛔ NOMI `.totals` EMAS — 2026-09-08 da bu yerda `display:block`
   yozib qo‘yilgandi, chunki `debt.css` dagi bir nomli `.totals`
   grid bo‘lib savdo hisobini yonma-yon terib qo‘yardi.
   Lekin `.totals{display:block}` ham YALANG‘OCH: u orqaga qarab
   MIJOZ KARTOCHKASINING statistika gridini buzardi. Ikki fayl
   bitta nomni bo‘lishgani uchun to‘g‘ri yechim — nomni ayirish. */
/* ⛔ `.sums` va `.trow` — `base.css` da: ularni OLTI ekran
   ishlatadi (savdo, to‘lov, qaytarish, smena, chek kartochkasi).
   Bitta ekran faylida tursa, ikkinchisi uni «qarzga» olardi va
   `test_bare_layout_class_does_not_leak` aynan shuni ushladi. */
.trow.disc input{width:120px;flex:0 0 auto;height:44px;text-align:right;font-size:var(--t-4);
  border:0;box-shadow:var(--ctl-sh);border-radius:9px;background:#fff;
  color:var(--ink);font-family:inherit}

.sale-acts{display:flex;gap:8px;margin-top:14px}
.sale-acts .go,.sale-acts .ghost{flex:1;margin-top:0}
/* ⛔ YON BO‘SHLIQ MAJBURIY. Ilgari yo‘q edi va bilinmasdi: `.ghost`
   hamma joyda cho‘zilgan qatorda turardi (`.sale-acts .ghost{flex:1}`).
   «Men» ekranida u YOLG‘IZ turibdi va yozuv ramkadan chiqib ketdi —
   egasi suratda ko‘rsatdi. */
/* ⛔ RANG KULRANG EMAS. `color:var(--muted)` turgan edi va natijada
   «Sozlamalar» bilan «Xodimlar» O‘CHIRILGAN tugmaga o‘xshardi —
   ular esa «Men» ekranining asosiy amallari. Yonidagi «Chiqish»
   ulardan QORAROQ edi, ya‘ni ierarxiya teskari edi (2026-09-12,
   suratda ko‘rindi).

   O‘chirilgani baribir farq qiladi: `:disabled` da shaffoflik. */
.ghost{min-height:var(--tap);padding:0 14px;border-radius:12px;
  border:0;box-shadow:var(--ctl-sh);
  background:var(--glass);color:var(--ink);font:inherit;font-weight:400;
  font-size:var(--t-3);letter-spacing:0;cursor:pointer}
/* ⛔ `.wide` `.oc` da bor edi, `.ghost` da yo‘q: «Xodimlar» va
   «Parolni tiklash» tugmalari yozuvi bo‘yicha qisqarib turardi. */
.ghost.wide{width:100%}
/* ⛔ Keng ekranda 1000 piksellik tugma bo‘lmaydi: «Sozlamalar» va
   «Xodimlar» butun kartochkani kesib o‘tgan oq tasma edi va
   yonidagi «Chiqish» bilan bir qatorga tushmasdi (2026-09-12,
   suratda ko‘rindi). Uchalasi endi bir xil kenglikda. */
@media (min-width:820px){.ghost.wide{max-width:340px}}
/* ⛔ Savat TASHQARISIDAGI tugma qatori (qaytarish ekrani) ham
   maydon enida: «Chekni topish» 560 ga tushgach, ostidagi ikki
   ikkilamchi tugma 1000 piksel bo‘lib undan keng chiqib qoldi —
   suratda ko‘rindi. Savat ichida (`.sale-wrap`) qator o‘z enida. */
@media (min-width:820px){
  main:not(:has(.sale-wrap)) .sale-acts{max-width:560px}
}
.ghost:disabled{opacity:.5}
/* ⛔ Xavfli amalning ochuvchi tugmasi ham qizil: bosishdan
   OLDIN ko‘rinsin (tasdiq tugmasi `.go.danger`). */
.ghost.danger{color:var(--danger);border-color:#f0cfcf}

/* ── Telefon oqimi: savat → detallar ───────────────────────
 *
 * ⛔ Egasi BILLZ telefon ilovasini ko‘rsatdi: savat ekranida
 * FAQAT tovarlar turadi, mijoz-chegirma-izoh esa keyingi
 * qadamda. Bizda hammasi bitta uzun ustunda edi va kassir
 * jamini ko‘rish uchun suraverardi.
 *
 * DOM bitta — faqat ko‘rinish o‘zgaradi (`data-step`). */

.cart-head .cart-back{display:none;border:0;background:none;padding:0 4px;
  color:var(--mid);font-size:var(--t-6);line-height:1;cursor:pointer}
.chip.more{width:44px;flex:0 0 44px;padding:0;color:var(--muted);font-size:16px}

/* ⛔ Lenta chip emas: chip ikki qatorga bo‘linib ketardi va
   «Ulgurji / narx» bo‘lib turardi (egasi suratda ko‘rsatdi). */
.wholesale-banner{width:100%;min-height:44px;margin-bottom:10px;
  border:0;box-shadow:var(--ctl-sh);border-radius:12px;
  background:var(--glass);
  color:var(--muted);font:inherit;font-size:var(--t-3);font-weight:500;
  cursor:pointer}
.wholesale-banner.on{background:#7b4bd6;border-color:#7b4bd6;color:#fff}

.cart-empty{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:44px 16px;text-align:center;color:var(--muted)}
.cart-empty .bars{font-size:30px;letter-spacing:3px;color:#dfe3e8}
.cart-empty b{font-size:var(--t-5);color:var(--ink)}
.cart-empty span{font-size:var(--t-2)}

/* ⛔ `sticky`, `fixed` emas: pastdagi navigatsiya alohida grid
   yo‘lakchasida turadi va `fixed` uni yopib qo‘yardi. */
.sale-bar{position:sticky;bottom:0;display:flex;gap:8px;
  padding:10px 0 2px;background:var(--page)}
.sale-bar .go,.sale-bar .ghost{flex:1;margin-top:0}
.sale-bar{flex-wrap:wrap}
.bar-due{width:100%;display:flex;justify-content:space-between;
  align-items:baseline;padding:0 4px 8px;font-size:var(--t-3);color:var(--muted)}
.bar-due b{font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}

@media (max-width:819px){
  /* ⛔ SENSOR (2026-09-19): «−/＋/🗑» 44px bo‘lgach telefonda nomga
     80px qoldi. Rasm o‘rni (hali rasm yo‘q, ROADMAP 7.5 B3) bo‘sh
     quti — telefonda yashiriladi, 50px nomga qaytadi. */
  .line.cart .thumb{display:none}
  /* ⛔ KULRANG VARAQ, OQ KARTOCHKALAR.
   *
   * BILLZ telefon ilovasida fon kulrang va har blok — oq
   * kartochka. Bizda aksi edi: oq varaq ustida kulrang
   * qatorlar. Egasi ikkala suratni yonma-yon qo‘yib ko‘rsatdi.
   *
   * Panelning o‘zi shaffof qilinadi (`shell.css`), ichidagi
   * bloklar esa shu yerda oq kartochkaga aylanadi. */
  .head-card{background:var(--glass);border:0;box-shadow:var(--card-sh);
    border-radius:var(--card-r);padding:12px;margin-bottom:10px}
  .head-card .wholesale-banner{margin-bottom:0}
  /* Telefonda klaviatura yo‘q: ikonlar «⋯» da, eslatmalar ortiqcha */
  .icon-btn,.scan-hint,.sale-wrap .kbd,.cart-empty .on-desk{display:none}
  /* ⛔ Qidiruv maydoni to‘ldirilgan va chegarasiz — BILLZ dagidek */
  .scan-field input{background:#f2f4f7;border-color:transparent;
    border-radius:14px}
  /* ⛔ Chip sinmasin: «Barcha sotuvchilar» ikki qatorga bo‘linib,
     sarlavhani ikki barobar balandlashtirib qo‘yardi. */
  .cart-head .chip{white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;max-width:46%}
  /* Detallar qadamida har blok — alohida oq kartochka */
  [data-step="details"] .side-block,
  [data-step="details"] .sums{background:var(--glass);
    border:0;box-shadow:var(--card-sh);border-radius:var(--card-r);
    padding:12px;margin-bottom:10px}
  /* Pastki panel ham oq kartochka, tugmalari dumaloq */
  .sale-bar{background:var(--glass);border-radius:18px;padding:10px;
    margin-top:auto}
  .sale-bar .go,.sale-bar .ghost{border-radius:26px;min-height:52px}
  /* ⛔ Panel pastga yopishsin: ustun cho‘ziladi, panel esa
     `margin-top:auto` bilan ostiga tushadi (`shell.css` dagi
     zanjir bilan birga ishlaydi). */
  .sale-wrap{flex:1;display:flex;flex-direction:column}
  /* ⛔ `min-height:0` + `overflow-y:auto` — ikkalasi ham majburiy.
     Busiz uzun ro‘yxat pastdagi panel ostiga kirib ketardi va
     «To‘lanadi» qatori ko‘rinmasdi (`.pane` da `contain:paint`
     bor, ya‘ni chetdan chiqqan mazmun jimgina qirqiladi). */
  .sale-grid{flex:1;min-height:0;overflow-y:auto}
  .sale-bar{margin-top:auto}
  /* Oxirgi kartochka panelga tegib turmasin */
  [data-step="details"] .sale-side{padding-bottom:16px}
  /* ⛔ «To‘lanadi» IKKI MARTA yozilmasin: panel uni DOIM ko‘rsatadi
     (`bar-due`) va nusxa uning ustida turardi (suratda ko‘rindi).
     Kompyuterda panel yo‘q — qator o‘z joyida qoladi. */
  [data-step="details"] .sale-side .trow.big{display:none}
  /* Savat qadami: o‘ng ustun butunlay yo‘q */
  [data-step="cart"] .sale-side{display:none}
  /* Detallar qadami: savat va qidiruv yo‘q, orqaga tugmasi bor */
  [data-step="details"] .scan-holder,
  [data-step="details"] .wholesale-banner,
  [data-step="details"] .sale-main,
  [data-step="details"] .cart-cnt,
  [data-step="details"] .cart-wipe,
  [data-step="details"] .chip.more{display:none}
  [data-step="details"] .cart-head .cart-back{display:block}
  /* ⛔ O‘ng ustundagi tugmalar nusxasi telefonda yashiriladi:
     ularning o‘rnini pastki panel egallaydi. Aks holda bir
     ekranda ikkita «To‘lov» turardi.

     ⛔ QOIDA `.sale-side` ICHIDA. Yalang‘och sinf bo‘lganda
     QAYTARISH ekrani buzilardi: u ham `.sale-acts` ishlatadi va
     telefonda ikkita tugmasi umuman ko‘rinmasdi (2026-09-19,
     suratda ko‘rindi — test emas). */
  .sale-side .sale-acts{display:none}
  /* ⛔ Chek raqami savat qadamida sarlavhani siqib qo‘yardi, lekin
     detallar qadamida u KERAK: kassir qaysi chek bilan ishlayotganini
     ko‘rsin (BILLZ da bu ekranning sarlavhasi — «Транзакция №»). */
  [data-step="cart"] .cart-head .chek{display:none}
  [data-step="details"] .cart-head .chek{font-size:var(--t-3)}
}

/* ── Kompyuter: savat markazda, hisob o‘ngda ────────────────
 *
 * ⛔ BILLZ kassasidagi tuzilish (egasi skrinshot yubordi):
 * markazda qidiruv va savat, o‘ngda mijoz/chegirma va pastida
 * «To‘lov» tugmasi. Telefonda bitta ustun bo‘lib qoladi —
 * DOM bitta, faqat joylashuv o‘zgaradi. */
@media (min-width:820px){
  /* ⛔ O‘NG USTUN EKRANNING TEPASIDAN BOSHLANADI (egasining BILLZ
   * surati: «Klient» va «Chegirma» qidiruv bilan bir satrda).
   * Bizda o‘ng ustun skaner va lentadan KEYIN boshlanardi — 1440px
   * da ekranning yarmi bo‘sh turardi. `.head-card` to‘rdan tashqarida
   * edi; `display:contents` bilan uning qutisi yo‘qoladi va ustunlar
   * `.sale-wrap` to‘riga tushadi — DOM o‘zgarmaydi (telefon
   * joylashuvi buzilmasin, 4-bo‘lim). */
  /* ⛔ `grid-template-rows` MAJBURIY. Ikkala qator ham `auto`
     bo‘lsa, to‘rning ortiqcha balandligi ULAR ORASIDA teng
     bo‘linadi (`align-content` sukut bo‘yicha `stretch`) va
     savat qatori ekranning o‘rtasiga — sarlavhadan 250px pastga
     tushib qolgan edi (suratda ko‘rindi). */
  .sale-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;
    grid-template-rows:auto 1fr;
    gap:0;align-items:start;position:relative;
    min-height:calc(100vh - 150px)}
  .sale-grid{display:contents}
  /* ⛔ Joylashuv ANIQ ko‘rsatiladi, avtomatik emas: o‘ng ustun
     ikkala qatorni ham egallashi kerak va avtomatik joylashtirish
     uni birinchi bo‘sh katakka tashlab yuborardi. */
  .head-card{grid-column:1;grid-row:1}
  .sale-main{grid-column:1;grid-row:2}
  .sale-side{grid-column:2;grid-row:1 / span 2}

  /* ⛔ TEPA BLOK IKKI QATOR, BESHTA EMAS (egasining BILLZ surati):
   *
   *     qidiruv maydoni ................ [belgi tugmalari]
   *     Korzina  0  [Ulgurji]  ......... #000500073276
   *
   * Bizda beshta narsa beshta qatorda edi — 1440px da tepa blok
   * 215px, savat ekranning yarmida. Telefonda tartib O‘ZGARMAYDI,
   * shuning uchun DOM emas, `order`. `flex-basis` piksellarda:
   * 820px da juftliklar o‘zi alohida qatorga tushadi. */
  .head-card{display:flex;flex-wrap:wrap;align-items:center;
    gap:8px;padding-right:20px;margin-bottom:8px}
  .head-card .scan-holder{order:1;flex:1 1 460px}
  .head-card .sale-top{order:2;flex:0 0 auto;margin:0}
  /* ⛔ Savat qatori TO‘LIQ kenglikda: «Savat 0 · almashtirgich»
     chapda, chek raqami o‘ngda (BILLZ). Sotuvchi chipi esa
     `order` bilan O‘RALIB o‘z qatoriga tushadi — `wrap` siz u
     hammani bir qatorga siqib, almashtirgich yozuvini sindirardi
     (2026-09-15, suratda ko‘rindi). */
  .head-card .cart-head{order:3;flex:1 1 100%;flex-wrap:wrap;margin:0}
  .head-card .sellers-row{display:flex;order:5;flex:1 1 100%;gap:8px}
  .tgl{white-space:nowrap}
  /* Lenta va «⋯» kompyuterda ortiqcha: almashtirgich va ikonlar bor */
  .wholesale-banner,.cart-head .chip.more{display:none}
  .tgl{display:inline-flex}
  .cart-empty .on-tel{display:none}
  /* ⛔ Bo‘sh savat maydoni shtrixli ramkada (BILLZ): kassir savat
     QAYERDA turishini bo‘shida ham ko‘radi. Rang --line dan biroz
     to‘qroq — shtrix ingichka va och rangda umuman ko‘rinmasdi. */
  .lines:has(.cart-empty){border:1.5px dashed #d3d8df;
    border-radius:14px;min-height:460px;
    display:flex;align-items:center;justify-content:center}
  /* O‘chiq tugmalar — bo‘sh savat: turadi, lekin bosilmaydi */
  .sale-acts .kbd{margin-left:8px}
  .sale-acts .ghost[disabled]{opacity:.55;cursor:default}
  .sale-acts .go[disabled]{background:#e8ebf0;color:#98a0ab;
    cursor:default}
  .sale-acts .go[disabled] .kbd{background:#fff;
    border-color:transparent;color:#98a0ab}
  /* ⛔ AJRATUVCHI CHIZIQ UZLUKSIZ BO‘LSIN.
   *
   * Egasi BILLZ skrinshotida shuni belgilab ko‘rsatdi: u yerda
   * markaz va o‘ng ustun orasida bitta uzun chiziq turadi.
   * Bizda chegara ustunning O‘ZIGA berilsa, chiziq ustun
   * mazmuni qayerda tugasa — o‘sha yerda uziladi (savat bo‘sh
   * bo‘lsa qisqa, to‘lsa uzun). Shuning uchun chiziq ustunga
   * emas, gridning O‘ZIGA — absolyut joylashgan element sifatida
   * chiziladi va har doim to‘liq balandlikda turadi.
   *
   * `min-height` ham shu uchun: savatda bitta tovar bo‘lsa ham
   * chiziq yarim ekranda kesilib qolmasin. */
  /* ⛔ VERTIKAL CHIZIQ OLIB TASHLANDI (2026-09-13). BILLZ da
     ustunlar chiziq bilan emas, BO‘SHLIQ bilan ajratiladi —
     egasi: «barcha narsani billz kabi qil». Chiziq ekranni
     ikkiga kesib turardi. */
  .sale-main{padding-right:24px}
  /* Hisob va tugma ekran bilan birga suriladi — kassir uzun
     savatda ham «To‘lov» ni qidirmasin. `align-items:start`
     shu uchun kerak: ustun mazmuni bo‘yicha qisqa bo‘lsagina
     `sticky` ga yuradigan joy qoladi. */
  /* ⛔ Ustun EKRAN BALANDLIGIDA turadi va hisob uning OSTIDA.
   *
   * BILLZ da «Podytog · Skidka · OPLATIT» kartochkasi o‘ng
   * ustunning tubida turadi va savat qancha uzun bo‘lsa ham
   * ko‘rinib qoladi. Bizda hisob mijoz blokining ostiga
   * yopishgan edi: bo‘sh savatda u ekranning o‘rtasida osilib
   * turardi, uzun savatda esa yuqoriga surilib ketardi.
   *
   * `sticky` uchun BALANDLIK kerak: `align-self:start` bo‘lmasa
   * element to‘r katagiga cho‘ziladi va suriladigan joy qolmaydi. */
  .sale-side{padding-left:20px;position:sticky;top:0;align-self:start;
    height:calc(100vh - 150px);display:flex;flex-direction:column;
    overflow-y:auto}
  .sale-side .sums{margin-top:auto}
  /* Tor ustunda chegirma maydoni qatorga sig‘sin */
  .sale-side .trow.disc input{width:110px}
  /* ⛔ Ustunga aylanish TOR USTUNNIKI, sinfniki emas: qaytarish
     ekranida o‘sha sinf keng joyda yonma-yon turadi. */
  .sale-side .sale-acts{flex-direction:column}
  /* ⛔ `flex:0 0 auto` — aks holda ustun yo‘nalishida `flex:1`
     tugmaning balandligini yeb qo‘yadi va u yassilanadi. */
  .sale-side .sale-acts .go,
  .sale-side .sale-acts .ghost{flex:0 0 auto;width:100%}
  /* ⛔ Tor ustunda «Jami · summa» yonma-yon sig‘maydi */
  .sale-side .trow{padding:8px 10px}
  /* Pastki panel va orqaga tugmasi faqat telefonda */
  .sale-bar,.cart-head .cart-back{display:none}
}

/* ⛔ «2204-1 ham bor edi» — Enter bilan urilgandan keyin.
 *
 * Chiziq bilan emas, ORQA FON bilan ajratiladi (DIZAYN.md 6):
 * chiziq savatni kesib, ro‘yxat tugagandek ko‘rinardi.
 *
 * Rang ogohlantirish (`--warn`), xato emas: urilgan tovar
 * noto‘g‘ri deyilmayapti — shunchaki o‘xshashi ham bor edi. */
.miss{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:8px;padding:10px 12px;border-radius:var(--radius-sm);
  background:#fdf6ea}
.miss-say{flex:1 1 100%;font-size:var(--t-2);color:var(--warn)}
.miss .ghost{min-height:var(--tap);padding:0 14px;font-size:var(--t-2);
  background:#fff}

/* ⛔ TO‘LOV TURINI TUZATISH (8.11) — «pf» qo‘shimchasi bilan.
 *
 * Yalang‘och sinf global qoida beradi (DIZAYN.md 3): `.row` yoki
 * `.sums` deb yozilsa, boshqa ekranning elementi jimgina
 * o‘zgarardi — `.when` bilan aynan shunday bo‘lgan.
 *
 * ⛔ Bo‘shliq bilan ajratiladi, chiziq bilan emas (DIZAYN.md 5.2):
 * to‘rtta to‘lov turi ro‘yxati chiziqlar bilan kesilsa, uch
 * qatorlik forma jadvalga o‘xshab qolardi. */
/* ⛔ Izoh bilan birinchi yorliq orasida bo‘shliq. Busiz
   telefonda izoh ikki qatorga bo‘linib, «Naqd» unga yopishib
   qolardi va yorliq izohning uchinchi qatoridek o‘qilardi —
   suratda ko‘rindi. */
.pf-say{margin-bottom:12px}
.pf-row input{text-align:right}
.pf-sums{margin-top:18px}

/* ⛔ Hisob ustuni MAYDONLAR bilan bir enlikda. Kengligi
   cheklanmasa, 1280 piksel monitorda maydonlar 560 px, «Farq»
   esa 1000 px bo‘lib turardi va ustun qiyshiq ko‘rinardi —
   suratda ko‘rindi. O‘lchov `base.css` dagi `.field` bilan
   bir xil va o‘sha shartda yoqiladi. */
@media (min-width:820px){
  main:not(:has(.sale-wrap)) .pf-sums{max-width:560px}
}

/* ⛔ Farq — ekrandagi ENG MUHIM son: u nol bo‘lmaguncha tugma
   bosilmaydi. Shuning uchun rang bilan aytiladi, yozuv bilan
   emas — kassir raqamni yozayotib ko‘radi.
   ⛔ SELEKTOR UCH SINFDAN: `base.css` dagi `.trow .money`
   rangni `--ink` qilib qo‘yadi va yalang‘och `.pf-bad` undan
   past turadi — qizil UMUMAN chiqmasdi. Suratdan topildi. */
.pf-sums .trow .pf-bad{color:var(--danger)}

/* ⛔ «Bu narxda bonus yo‘q» — savat qatoridagi ogohlantirish
   (egasi, 2026-09-20). Rangi OGOHLANTIRISH, xato emas: narx
   noto‘g‘ri deyilmayapti, shunchaki bonus tushmaydi. Naqsh
   `.miss-say` dan olingan. */
.cart-nobonus { color: var(--warn); font-weight: 500; }
