/* ═══════════════════════════════════════════════════════════
   KARKAS. TZ 2.1 — moslashuv qurilmaga emas, KENGLIKKA

     < 820px   bitta ustun · navigatsiya PASTDA (barmoq yetadi)
     ≥ 820px   ikki ustun  · navigatsiya CHAPDA · yorliqlar
     ≥ 1280px  uch ustun

   ⛔ `@media (hover)` bo'yicha ajratish YO'Q: kassa monitorida
      sensor ham, sichqoncha ham bo'lishi mumkin.

   ⛔ 2026-09-08: shaffoflik (`backdrop-filter`) va katta soyalar
      olib tashlandi — oq karta, yupqa chiziq (egasining qarori).
   ═══════════════════════════════════════════════════════════ */

#shell{display:none;height:100%}
#shell.on{display:grid}
#shell{
  grid-template-areas:"main" "nav";
  grid-template-rows:1fr auto;
  grid-template-columns:1fr;
}

nav{
  grid-area:nav;display:flex;
  background:#fff;border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-btn{
  flex:1;min-height:var(--tap);padding:8px 4px;border:none;background:none;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--muted);font-family:inherit;font-size:var(--t-1);font-weight:400;
  cursor:pointer;border-top:2px solid transparent;
}
.nav-btn .ico{width:22px;height:22px;display:block}
.nav-btn .ico svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.8;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
/* ⛔ TZ 2.3: yolg'iz belgi yo'q — har tugmada yozuv */
.nav-btn.on{color:var(--mid);border-top-color:var(--mid);background:none}
.nav-btn .sc{display:none}
/* ⛔ `display:flex` `hidden` ni bekor qiladi — vakolatsiz bo'lim
   ko'rinib qolardi. Aniq qoida kerak. */
.nav-btn[hidden]{display:none}
/* ⛔ «›» TELEFONDA YO‘Q. Qoida keng ekran blokida edi va tor ekranda
   span oddiy matndek chiqib, har yorliq ostida kichkina belgi
   turardi (suratda ko‘rindi, 2026-09-18). Global yashiriladi,
   keng ekranda menyusi bor bo‘limda ochiladi. */
.nav-chev{display:none}

main{grid-area:main;overflow-y:auto;padding:12px;contain:layout paint}

/* ⛔ `minmax(0,1fr)` va `min-width:0` MAJBURIY: grid elementi
   sukut bo'yicha mazmunining eng kichik kengligicha cho'ziladi va
   yo'lakdan chiqib ketadi. 2026-09-08 da o'lchandi — savatda mol
   bo'lsa Savdo ekrani 390px da 427px bo'lib, o'ng cheti kesilardi. */
/* ⛔ VARAQ EKRANNI TO‘LDIRADI.
 *
 * Oq kartochka faqat MAZMUNI bo‘yicha cho‘zilardi: ikkita qatorli
 * hisobotda u ekranning uchdan birini egallab, ostida kulrang
 * bo‘shliq qolardi. Egasi 2026-09-13 da ko‘rsatdi: «nimaga shu
 * to‘liq oynamas».
 *
 * Bu ilova, hujjat emas — sirt oxirigacha davom etsin.
 *
 * ⛔ KASSA ISTISNO: savat ekrani balandlikni o‘zi boshqaradi
 * (`main:has(.sale-wrap)` qoidalari pastda) va bu yerdagi
 * `min-height` u bilan urishardi. */
.cols{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr);
  max-width:1800px;margin:0 auto}
main:not(:has(.sale-wrap))>.cols{min-height:100%}
/* ⛔ ASOSIY USTUN — QUTI EMAS, VARAQ (2026-09-13).
 *
 * Ilgari butun bo'lim bitta katta oq quti ichida turardi va
 * ichidagi kartochkalar oq ustida oq bo'lib ko'rinmasdi. BILLZ da
 * esa aksi: fon KULRANG, har blok alohida oq kartochka bo'lib
 * suzadi. Egasi aynan shu farqni sezgan: «UI billzga
 * uxshamayapti».
 *
 * ⛔ Bu bilim allaqachon loyihada bor edi, faqat FAQAT KASSA
 * ekraniga qo'llangan: «BILLZ telefon ilovasida fon kulrang, har
 * blok esa oq kartochka» (2026-09-08, shu faylning pastida).
 * Qoida umumlashtirilmagani uchun qolgan o'n ekran eski
 * ko'rinishda qoldi. */
.pane{min-width:0;contain:layout paint}
.pane.secondary{
  background:var(--glass);border-radius:var(--card-r);
  box-shadow:var(--card-sh);padding:14px;
}
/* ⛔ Bo'lim sarlavhasi oddiy yozuvda va qoraroq: BOSH HARFLI
   kulrang yozuv sarlavhaga o'xshamasdi (BILLZ: «Цены»). */
/* ⛔ Sarlavha KATTAROQ: BILLZ da u sahifaning egasi, bizda esa
   qutining ichidagi kichik yozuv edi (suratlarda yonma-yon
   qo'yilganda darhol ko'rinadi). */
.pane h2{font-size:var(--t-7);font-weight:600;letter-spacing:-.02em;
  /* ⛔ 28 × 1.5 = 42px quti edi va sarlavha «osilib» ko'rinardi
     (2026-09-16, suratda). Katta matnga 1.5 kerak emas. */
  line-height:var(--lh-tight);
  /* ⛔ Tanlagich bo‘lganda sarlavha QATOR bo‘ladi: nom, ⌄ va
     sanoq yonma-yon turadi (BILLZ: «Все продажи ⌄ 53»). */
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  text-transform:none;color:var(--ink);margin:2px 0 16px}

/* Tor ekranda ikkinchi ustun mazmuni varaq bo'lib ochiladi */
.pane.secondary{display:none}
/* ⛔ `hidden` HAR DOIM kuchli bo'lsin. Pastdagi `min-width:820px`
   ichida `.pane.secondary{display:block}` yozilgan va u `hidden`
   atributini BEKOR QILARDI: kompyuter ekranida har bo'limda
   bo'm-bo'sh oq quti turardi (egasi 2026-09-08 da ko'rsatdi).

   ⛔ Bu tuzoq shu faylda ALLAQACHON hujjatlangan edi —
   `.nav-btn[hidden]` uchun. Dars umumlashtirilmagani uchun
   ikkinchi marta, boshqa element bilan qaytdi. */
.pane.secondary[hidden]{display:none}

.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--t-2)}
.row:last-child{border-bottom:none}
.row .k{color:var(--muted);font-size:var(--t-2);font-weight:400;
  letter-spacing:0;text-transform:none}
/* ⛔ `min-width:0` + `white-space:nowrap`: uzun nom yonidagi summa
   sinib ketmasin. «450 000» ikki qatorga bo'linib turgan edi. */
.row .v{font-weight:500;font-variant-numeric:tabular-nums;
  white-space:nowrap;flex:0 0 auto}

/* ⛔ QATOR-TUGMA: ko‘rinishi `.row` dek, lekin bosiladi.
   Tugmaning o‘z uslubi (fon, ramka, shrift) tozalanmasa, u
   qatorlar orasida kulrang quti bo‘lib turardi. Balandligi
   `--tap` — barmoq uchun (DIZAYN 5.1). */
.as-row{width:100%;min-height:var(--tap);border:0;
  border-bottom:1px solid var(--line);background:none;font:inherit;
  text-align:left;cursor:pointer}
/* ⛔ Bosiladigani KO‘RINIB tursin: qatorlar orasida u boshqalardan
   farq qilmasdi va hech kim bosmasdi. Rang — yagona belgi. */
.as-row .v{color:var(--mid)}

.perms{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;
  contain:layout paint}
.perm{font-size:var(--t-2);font-weight:400;padding:4px 8px;border-radius:6px;
  background:var(--soft);color:#2a5bbf;font-family:inherit}

.out{width:100%;height:var(--tap);margin-top:12px;border:0;
  box-shadow:var(--ctl-sh);
  border-radius:12px;background:#fff;color:var(--ink);
  font-family:inherit;font-size:var(--t-4);font-weight:400;cursor:pointer}

.empty{padding:24px 8px;text-align:center;color:var(--muted);font-size:var(--t-3);line-height:1.6}

@media (min-width:820px){
  #shell{
    grid-template-areas:"nav main";
    grid-template-columns:var(--rail) 1fr;
    grid-template-rows:1fr;
  }
  nav{
    flex-direction:column;gap:2px;padding:10px 6px;
    border-top:none;border-right:1px solid var(--line);
  }
  /* ⛔ Chap chiziq emas, KULRANG YOSTIQ — BILLZ da tanlangan
     belgi ostida yumaloq och fon turadi (egasining suratlari,
     2026-09-13). Chiziq yo'lakni kesardi. */
  /* ⛔ PANEL YOYILGAN — BELGI + YOZUV + «›» (egasining kassa
   * monitori surati, 2026-09-18: «bizni panellarni shunaqa qilib
   * mosla»). 2026-09-13 dagi «faqat belgi» — BILLZ ning YIG'ILGAN
   * holati ekan; ikkalasi ham BILLZ. Sukut yoyilgan, «« bilan
   * yig'iladi (`#shell.nav-mini`), holat qurilmada qoladi. */
  #shell{--rail:232px}
  #shell.nav-mini{--rail:60px}
  .nav-btn{flex:0 0 auto;min-height:46px;border:0;
    border-radius:12px;margin:2px 0;padding:0 12px;
    flex-direction:row;justify-content:flex-start;gap:12px;
    font-size:var(--t-3);color:var(--ink)}
  .nav-btn.on{background:var(--soft);color:var(--mid)}
  .nav-btn .nav-lbl{display:block;flex:1;text-align:left;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-btn .sc{display:none}
  /* «›» faqat ichki menyusi bor bo'limda */
  .nav-chev{color:#b3b8bf;font-size:var(--t-4);line-height:1}
  .nav-btn.has-menu .nav-chev{display:block}
  /* Yig'ilgan: faqat belgi, nomi `title` da */
  #shell.nav-mini .nav-btn{justify-content:center;padding:0}
  #shell.nav-mini .nav-btn .nav-lbl,
  #shell.nav-mini .nav-btn .nav-chev,
  #shell.nav-mini .nav-name{display:none}
  #shell.nav-mini .nav-head{flex-direction:column;gap:4px}
  main{padding:18px}
  .cols{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  /* ⛔ `#side` bo'sh bo'lsa ikkinchi ustun JOY EGALLAMASIN.
     Egasi 2026-09-08 da ko'rsatdi: 1440px ekranda mazmun atigi
     750px ni olardi, chunki grid yashirin panelga ham yo'lak
     ajratardi — «yarmi bo'sh ekran». */
  .cols:has(> .secondary[hidden]){grid-template-columns:minmax(0,1fr)}
  .pane.secondary{display:block}

  /* ⛔ MAZMUN CHO‘ZILMAYDI — bu eng ko‘p ekranga tegadigan tuzatish.
   *
   * 1440px da «Tovar» ekrani 1300 piksellik qidiruv maydoni va
   * 1300 piksellik tugmadan iborat edi. «Men» da yorliq chap
   * chekkada, qiymat o‘ng chekkada turib, ko‘z ularni ulay
   * olmasdi — qatorni barmoq bilan kuzatib o‘qishga to‘g‘ri
   * kelardi (2026-09-12, suratda ko‘rindi).
   *
   * ⛔ KASSA ISTISNO: savat ekrani o‘z ichida ikki ustunli
   * (`sale-wrap`) va kenglikni haqiqatan ishlatadi. */
  /* ⛔ `width:100%` MAJBURIY. Faqat `max-width` va `margin:auto`
     qo‘yilganda grid elementi cho‘zilishdan to‘xtaydi va MAZMUN
     kengligicha siqiladi: «Men» kartochkasi 1440px ekran
     o‘rtasida 320 piksellik tasma bo‘lib qoldi. Suratda ko‘rindi
     va bu tuzatishning o‘zi tuzatildi. */

  /* ⛔ 1040 → 1400 (2026-09-14). EGASI O‘LCHOVNI KO‘RSATDI.
   *
   * U suratda chap va o‘ng chekkani belgilab so‘radi: «nega
   * bo‘sh, ko‘plab joylarda bo‘sh qolganini ko‘rdim». O‘lchadim:
   *
   *     1920px ekran  →  mazmun 1040px, BO‘SH 880px (44%)
   *
   * 1040 chegarasi meniki edi (09-12) va u haqiqiy muammoni
   * tuzatgandi: «Tovar» ekrani 1300 piksellik qidiruv maydoni va
   * 1300 piksellik tugmadan iborat edi.
   *
   * ⛔ Lekin vosita QO‘POL edi: chegara SAHIFAGA qo‘yildi,
   * holbuki cho‘zilmasligi kerak bo‘lgan narsa — bitta qatorli
   * MAYDON. Endi maydon o‘zini cheklaydi (`report.css`,
   * `.field input`) va sahifa kenglikni ishlatadi. */
  main:not(:has(.sale-wrap)) .pane.primary{
    width:100%;max-width:1400px;margin-inline:auto;
  }

  /* ⛔ ENDI CHEGARA SHU YERDA: bitta qatorli maydon 1400 piksel
     bo‘lmaydi. Terilgan so‘z chap chekkada qolib, maydonning
     qolgan qismi bo‘sh turardi — `#bq` da bu allaqachon
     yozilgan edi, endi hamma joyda. */
  main:not(:has(.sale-wrap)) .field input[type="search"],
  main:not(:has(.sale-wrap)) .field input:not([type]),
  main:not(:has(.sale-wrap)) .field input[type="text"]{
    max-width:520px;
  }

  /* ⛔ Ikkilamchi tugma 1000 piksel bo‘lmaydi: «Chiqish» butun
     ekranni kesib o‘tgan oq tasma edi. */
  .out{max-width:340px}

  /* «Men» ekranidagi ma'lumot qatorlari — sabab `main.js` da */
  .me-info{max-width:560px}
}

@media (min-width:1280px){
  .cols{grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr)}
  main{padding:24px}
}

/* ⛔ Aloqa belgisi — ekranning eng tepasida va hamma narsa ustida.
   Kassir uni qidirib topmasligi kerak. */
#offline{position:fixed;top:0;left:0;right:0;z-index:99;
  padding:7px 12px;text-align:center;font-size:var(--t-2);font-weight:500;
  color:#fff;background:var(--warn);letter-spacing:0}
#offline[hidden]{display:none}

/* ⛔ KASSA EKRANI BALANDLIKNI TO'LIQ EGALLAYDI.
 *
 * Telefonda savat ostida doimiy panel turadi («Skaner» va jami).
 * U ekranning OSTIGA yopishishi kerak; aks holda bitta tovarli
 * savatda ekranning o'rtasida osilib qolardi (2026-09-08, suratda
 * ko'rindi).
 *
 * `main` va `.cols` balandligi odatda mazmun bo'yicha o'lchanadi,
 * shuning uchun zanjir shu yerda cho'ziladi. `:has()` bilan faqat
 * kassa ekraniga tegadi — boshqa ekranlar tegilmaydi. */
@media (max-width:819px){
  main:has(.sale-wrap){display:flex;flex-direction:column}
  main:has(.sale-wrap)>.cols{flex:1;min-height:0}
  /* ⛔ Kassa varag'i KULRANG: BILLZ telefon ilovasida fon kulrang,
     har blok esa oq kartochka (`sale.css` dagi `.head-card`,
     `.line.cart`, `.sale-bar`). Bizda aksi edi. */
  main:has(.sale-wrap) .pane{display:flex;flex-direction:column;
    background:transparent;border:0;padding:0}
  /* ⛔ `.op-body` ni tashlab ketib bo'lmaydi: savat ekrani
     `.ops` (Savat/Qaytarish) ostidagi shu qutida chiziladi va
     zanjir shu yerda uzilardi. */
  /* `#tabBody` — `index.html` dagi qutiga bo'lim chiziladi */
  /* ⛔ Oyna telefonda PASTDAN chiqadi — bosh barmoq shu yerda
     (BILLZ ham shunday qiladi). Kompyuterda markazda qoladi. */
  .sheet{align-items:flex-end}
  .sheet-card{border-radius:18px 18px 0 0;max-height:86vh}
  main:has(.sale-wrap) #tabBody,
  main:has(.sale-wrap) .op-body{flex:1;min-height:0;
    display:flex;flex-direction:column}
}

/* ── Oyna (sheet): sotuvchi tanlash kabi qisqa tanlovlar ────
   ⛔ Ekran ALMASHMAYDI — kassir savatdan chiqib ketmasin. */
.sheet{position:fixed;inset:0;z-index:80;display:flex;
  align-items:center;justify-content:center;padding:16px;
  background:rgba(20,24,31,.35)}
/* ⛔ TASDIQ OYNASI matni SHU YERDA, `sale.css` da emas: u
   `.sheet` naqshining bir qismi va oyna qoidalari bir joyda
   tursin (savat uni faqat ISHLATADI). */
.wipe-say{color:var(--muted);font-size:var(--t-2);margin:4px 0 14px;
  line-height:1.5}
.oc.wipe-yes{color:var(--danger)}

.sheet-card{width:min(520px,100%);max-height:80vh;overflow-y:auto;
  background:#fff;border-radius:12px;padding:16px}
.sheet-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sheet-head b{font-size:var(--t-5);font-weight:600}
.sheet-list{margin-top:4px}

/* ═══════════════════════════════════════════════════════════
   YO‘LAK MENYUSI — faqat kompyuterda (2.1)

   ⛔ Egasi: «Billz o‘zini veb versiyasini faqat kompyuter uchun
      moslagan». Bizda aksi: kassir kun bo‘yi telefonda ishlaydi,
      shuning uchun telefonda menyu YO‘Q — «Savdo» bosilsa savat
      darhol ochiladi. Sabab `js/nav_menu.js` boshida.
   ═══════════════════════════════════════════════════════════ */

/* ⛔ Telefonda belgi KO‘RINMAYDI: pastki qatorda joy yo‘q va
   «boshiga» degan alohida tugma keraksiz — bo‘limlarning o‘zi
   barmoq ostida turibdi. */
#brand{display:none}
/* Panel boshi — kompyuterda ko'rinadi (pastda) */
.nav-head{display:none}
.nav-fold{display:none}

.nav-fly{display:none}

@media (min-width:820px){
  /* ⛔ 44px — barmoq o‘lchovi (DIZAYN.md 5.1). 38 edi. */
  #brand{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin:0;flex:0 0 auto;
    border:0;border-radius:10px;background:var(--mid);
    color:#fff;cursor:pointer;padding:0;
  }
  #brand svg{width:19px;height:19px;fill:currentColor;stroke:none}
  .nav-head{display:flex;align-items:center;gap:8px;
    margin:2px 0 10px;padding:0 4px}
  .nav-name{flex:1;font-size:var(--t-4);font-weight:600;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-fold{display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:0 0 auto;border:0;border-radius:8px;
    background:none;color:var(--muted);font-size:20px;line-height:1;
    cursor:pointer;padding:0 0 3px}
  .nav-fold:hover{background:var(--soft)}

  .nav-fly{
    display:block;position:fixed;z-index:70;
    width:232px;padding:8px;
    /* ⛔ OQ EMAS, OCH KULRANG — BILLZ menyusi shunday (egasining
       surati). Oq bo'lsa u kartochkaga o'xshaydi; menyu esa
       boshqa narsa, va bu farq ko'rinib tursin. */
    background:#f1f2f4;border:0;border-radius:var(--card-r);
    /* ⛔ UCHINCHI pog‘ona: menyu mazmun USTIDA ochiladi. Shusiz
       u sahifaga yopishib qolardi. Ilgari bu yerda o‘z soyasi
       yozilgandi va u kartochkanikidan biroz boshqacha edi —
       ikkita «ustki» sirt ikki xil balandlikda turardi. */
    box-shadow:var(--sh-3);
  }
  /* ⛔ `hidden` HAR DOIM kuchli: bu faylda `display` qo‘yilgan
     joyda `hidden` bekor bo‘lish tuzog‘iga ikki marta tushilgan. */
  .nav-fly[hidden]{display:none}

  /* ⛔ Sarlavha ostida CHIZIQ emas, BO‘SHLIQ (DIZAYN.md).
     BILLZ da u yerda uzuq chiziq turadi — nusxa ko‘chirilmadi:
     chiziq kichkina oynani yana ikkiga kesadi. */
  .fly-head{
    font-size:var(--t-2);color:var(--muted);font-weight:400;
    padding:4px 10px 8px;letter-spacing:.02em;
  }

  .fly-item{
    display:flex;flex-direction:column;gap:1px;
    width:100%;min-height:var(--tap);padding:7px 10px;
    border:0;border-radius:8px;background:none;
    font-family:inherit;text-align:left;cursor:pointer;color:var(--ink);
  }
  .fly-item b{font-size:var(--t-3);font-weight:500}
  .fly-item span{font-size:var(--t-2);color:var(--muted)}
  .fly-item:hover{background:rgba(255,255,255,.7)}
}

/* ── Bo‘sh ekran ────────────────────────────────────────────
   ⛔ «Tovar» va «Qarz» ochilganda sarlavha, bitta maydon va 600
   piksel BO‘SHLIQ turardi. Bo‘shliq hech narsa aytmaydi: ekran
   yuklanmadimi, xato bo‘ldimi, yoki shunchaki hali qidirilmadimi
   — bilib bo‘lmasdi (2026-09-12, suratda ko‘rindi).

   Savat ekranida bunday holat allaqachon bor edi (`.cart-empty`),
   lekin u savatga xos. Bu — umumiy. */
.blank{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:44px 16px;text-align:center;color:var(--muted);
}
/* ⛔ `display:flex` `hidden` ATRIBUTINI BEKOR QILADI. Bu tuzoqqa
   loyihada uch marta tushilgan (`.nav-btn`, `.pane.secondary`,
   `.perms`) — to‘rtinchisi bo‘lmasin. */
.blank[hidden]{display:none}

.blank .mark{
  width:44px;height:44px;margin-bottom:6px;color:var(--line);
}
.blank .mark svg{width:100%;height:100%;stroke:currentColor;
  stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.blank b{font-size:var(--t-4);font-weight:500;color:var(--ink)}
.blank span{font-size:var(--t-2);max-width:280px}

/* ⛔ «Men» ma'lumot bloki — OQ KARTOCHKA (2026-09-13).
   Kulrang fonga o‘tilgach qatorlar yalang‘och qolib, yupqa
   chiziqlar havoda osilib turardi. BILLZ da har blok kartochka. */
.me-info{
  background:var(--glass);border-radius:var(--card-r);
  box-shadow:var(--card-sh);padding:6px 16px;margin-bottom:14px;
}

/* ── Sarlavha TANLAGICH bo‘lganda (BILLZ naqshi, 2026-09-16) ──
   ⛔ Faqat `.pick` bilan: qolgan ekranlarda sarlavha oddiy matn
   bo‘lib qoladi va ular `setPage('...')` ni o‘zgartirmadi. */
.pane h2.pick{cursor:default}
.pick-name{border:0;background:none;padding:0;font:inherit;min-height:44px;
  color:inherit;cursor:pointer;display:inline-flex;align-items:center;
  gap:8px;letter-spacing:inherit}
/* ⛔ ⌄ JIM: u sarlavhaning bir qismi emas, «bosilsa ochiladi»
   degan ishora. Sarlavha bilan bir og‘irlikda tursa, ko‘z uni
   so‘z deb o‘qirdi. */
.pick-arrow{color:var(--muted);font-size:var(--t-4);font-weight:400;
  line-height:1}
/* ⛔ Sanoq PILYULADA va och ko‘k fonda — BILLZ dagidek. Sarlavha
   bilan bir xil kattalikda bo‘lsa, «Barcha savdolar 53» bitta
   uzun ibora bo‘lib o‘qilardi. */
.pick-count{background:var(--soft);color:var(--mid);
  border-radius:20px;padding:2px 11px;font-size:var(--t-3);
  font-weight:600;letter-spacing:0;
  font-variant-numeric:tabular-nums}