/* =======================================================================
   ARZONCHI — UMUMIY STIL FAYLI (css/style.css)
   Brend: Light Premium / Bold Red Accent — qizil (#E60012) + oq + qora.
   Barcha sahifalar shu bitta faylni ishlatadi.
   ======================================================================= */

/* -----------------------------------------------------------------
   0. RESET / ASOS
------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
select {
  font-family: inherit;
}

/* -----------------------------------------------------------------
   1. DIZAYN TOKENLARI (o'lchangan qiymatlar — DIZAYN.md, band 2)
------------------------------------------------------------------ */
:root {
  /* ═══════════════ 1-QATLAM: PRIMITIVLAR (xom ranglar) ═══════════════ */
  /* Bu qatlamni komponentlarda TO'G'RIDAN-TO'G'RI ISHLATMANG.           */
  /* Raqam = yorug'lik darajasi: kichik = to'q, katta = och.             */

  /* Qizil shkala — brend.
     ⚠️ IKKITA ROL (DIZAYN.md 14.1, ega tasdig'i 2026-09-09):
       to'ldirilgan YUZA  -> --qizil-50 (#E60012), ustida oq matn 4.80 ✓
       QIZIL MATN/IKONKA  -> --qizil-45 (#C4000F), eng yomon fonda 5.44 ✓
     #E60012 ni MATN qilib ishlatish faqat oq fonda o'tadi (4.80);
     sahifa fonida 4.32, tintda 4.20, yo'lakchada 4.17 — AA dan past.
     Hover YORUG'LASHMAYDI, QORAYADI. */
  --qizil-40:  #B8000E;   /* BOSILGAN holat — oq matn 6.90 */
  --qizil-45:  #C4000F;   /* ★ QIZIL MATN va IKONKA + hover — oq matn 6.26 */
  --qizil-50:  #E60012;   /* ★ BREND — faqat TO'LDIRILGAN YUZA */
  --qizil-55:  #C4000F;   /* BEKOR QILINDI (eski #F5121F, oq matn 4.21 — AA dan past).
                             Eski kod buzilmasin uchun --qizil-45 ga bog'landi. */
  --qizil-90:  #FFD6DA;   /* och tint — chegara/belgi */
  --qizil-97:  #FFF1F2;   /* eng och tint — tanlangan filtr foni */
  --qizil-96:  #FDECEC;   /* TZ tint (XIT/tanlov foni) — yangi, ulanmagan */

  /* Neytral shkala — ozgina sovuq (texnika do'koni hissi, Uzum saboqi) */
  --kul-10:   #0E0F12;
  --kul-15:   #0E0E10;   /* ★ asosiy matn, quyuq bo'lim, footer — YANGILANDI T0 (2026-09-15):
                            eski #141417 dan (ARXITEKTORDAN-DASTURCHIGA-YANGI-TIL-TZ.md §5 A.1) */
  --kul-25:   #26282E;
  --kul-35:   #45474F;
  --kul-55:   #696D75;   /* ★ ikkinchi darajali matn — eski #6C6D75 kulrang
                            yo'lakchada 4.47 berardi (me'yorga 0.03 yetmasdi);
                            yangisi 4.51 ✓ (DIZAYN.md 14.1) */
  --kul-58:   #75767E;   /* uchinchi darajali matn — OQ yuzada AA (4.52:1) */
  --kul-65:   #8A8B93;   /* "mavjud emas" grafit */
  --kul-75:   #B9BAC2;   /* uchinchi darajali (mahsulot kodi) */
  --kul-85:   #D5D7DD;
  --kul-90:   #E3E5EA;   /* chegara */
  --kul-94:   #EDEFF3;   /* kulrang yo'lakcha — tema tugmasi, neytral yorliq
                            (eski #EDEEF2 — TZ 01 §1.1 o'lchoviga keltirildi) */
  --kul-96:   #F1F3F6;   /* eski sahifa foni edi — T0 dan keyin --yuza-sahifa endi --kul-100
                            (oq) ga bog'langan; --kul-96 ning o'zi ataylab o'chirilmadi
                            (.bosh-holat-ikonka fonida to'g'ridan-to'g'ri ishlatiladi) */
  --kul-97:   #F4F6F8;   /* yuza-ichki (ikkilamchi blok, stepper) — TZ */
  --kul-98:   #FAF9F9;   /* yuza-yumshoq (zebra, bo'sh holat) — YANGILANDI T0: eski #FAFBFC dan
                            (TZ 01-TOKENLAR.md §1.4 o'lchovi, "deyarli bir xil" almashtirish) */
  --kul-100:  #FFFFFF;   /* ★ kartochka/sirt */

  /* Yordamchi — FAQAT yorliqlar uchun (qizil byudjetini yemasin) */
  --sariq-50:  #FFB020;  /* yulduzcha, "KAM QOLDI" — ustidagi matn DOIM qora */
  --sariq-95:  #FFF6E5;
  --yashil-45: #0B7A58;  /* ★ TEJAM/"Bepul"/"Punktda" MATNI — oq 4.72 ✓;
                             oq ustida TO'LDIRILGAN YUZA sifatida ham 5.33:1
                             (kontrast.py bilan tekshirilgan, ega qarori 14.09) */
  --yashil-50: #12A150;  /* faqat TO'LDIRILGAN YUZA/ikonka — matn uchun 3.37 ✗ */
  --yashil-95: #E4F5EE;

  /* Holat ranglari (TZ 01 §1.4) — matn/fon juftligi, hammasi AA dan o'tgan */
  --ogoh-matn:    #A34A0A;  --ogoh-fon:    #FFF1E8;   /* 5.37 */
  --ogoh-sarlavha:#7A3A08;                            /* 7.80 */
  --nasiya-matn:  #6B5320;  --nasiya-fon:  #FFF7E8;   /* 6.84 */
  --tayyor-matn:  #8A5A00;  --tayyor-fon:  #FFF4DC;   /* 5.43 */
  --yolda-matn:   #1560BF;  --yolda-fon:   #EAF3FF;   /* 5.43 */
  --neytral-matn: #55585F;  --neytral-fon: #EDEFF3;   /* 6.19 */

  /* Ataylab past kontrast — o'chirilgan boshqaruvlar (WCAG 1.4.3 ozod qiladi).
     ⛔ BULARNI "TUZATMANG": aks holda element ishlaydigandek ko'rinadi. */
  --ochiq-matn:   #B0B5BD;   /* mavjud emas varianti, ishlamaydigan maydon */
  --ochiq-belgi:  #C3C7CE;   /* o'chgan −/+ tugmasi */

  /* ═══════════════ 2-QATLAM: SEMANTIK (rangning VAZIFASI) ═══════════════ */
  /* Komponentlar FAQAT shu qatlamni ishlatadi.                            */

  /* — Yuzalar: chuqurlik soya bilan emas, POG'ONA bilan (Material 3 saboqi) */
  --yuza-sahifa:      var(--kul-100);  /* <body> — YANGILANDI T0: eski kulrang sahifa foni
                                          dan oqqa (TZ §5 A.2, "kulrang sahifa foni yo'q" talabi).
                                          --kul-96 ning o'zi tegilmadi — boshqa
                                          joyda (.bosh-holat-ikonka) to'g'ridan-to'g'ri ishlatiladi. */
  --yuza-karta:       var(--kul-100);  /* kartochka, panel */
  --yuza-ikkilamchi:  var(--yuza-kulrang);  /* TAXMIN T0: eski #F4F6F8 -> yangi --yuza-kulrang
                                          #F2F0F0 (TZ §5 A.4, §9-taxmin 3 — yangi tilda alohida
                                          "ikkilamchi yuza" yo'q, eng yaqini shu) */
  --yuza-yumshoq:     var(--kul-98);   /* #FAF9F9 — zebra, bo'sh holat (TZ) */
  --yuza-uchinchi:    var(--yuza-kulrang);  /* TAXMIN T0: eski #EDEFF3 -> --yuza-kulrang
                                          #F2F0F0, xuddi shu sabab (TZ §5 A.4) */
  --yuza-quyuq:       var(--kul-15);   /* footer, quyuq bo'lim */

  /* — Matn (har fon uchun "on-" jufti bor — kontrast avtomatik to'g'ri) */
  --matn-asosiy-rang:   var(--kul-15);
  --matn-ikkinchi:      var(--kul-55);
  --matn-uchinchi:      var(--kul-58);   /* eski qiymat edi: var(--kul-75), 1.93:1 — endi 4.52:1 */
  --matn-bezak-raqam:   var(--kul-65);   /* YANGI: katta/qalin dekorativ raqam uchun (3.08:1) */
  --matn-qizil-ustida:  var(--kul-100);              /* on-red */
  --matn-quyuq-ustida:  var(--kul-100);              /* on-dark, 1-daraja */
  --matn-quyuq-ustida-2: rgba(255, 255, 255, 0.70);  /* on-dark, 2-daraja */
  /* ⚠️ Qizil MATN har doim --qizil-45 (#C4000F). --qizil-50 faqat yuza. */
  --matn-qizil:       var(--qizil-45);  /* ★ har qanday qizil yozuv va SVG shtrix */
  --matn-tejam:       var(--qizil-45);  /* chegirma foizi, "arzonlashdi" — MATN */
  --matn-tejam-yashil: var(--yashil-45); /* tejam summasi, "Bepul", "Punktda" */

  /* — Chegaralar */
  --chegara-nozik:    var(--kul-90);
  --chegara-kuchli:   var(--kul-85);
  --chegara-fokus:    var(--qizil-50);

  /* — Tugma: ASOSIY (qizil) — 4 holat majburiy */
  --tugma-asosiy-rest:      var(--qizil-50);   /* oq matn 4.80 */
  --tugma-asosiy-hover:     var(--qizil-45);   /* QORAYADI — oq matn 6.26 */
  --tugma-asosiy-pressed:   var(--qizil-40);   /* yanada to'q — oq matn 6.90 */
  --tugma-asosiy-ochiq:     var(--kul-85);     /* disabled */
  --tugma-asosiy-matn:      var(--matn-qizil-ustida);

  /* — "Savatda ✓" tasdiq holati — YASHIL (ega qarori 14.09, oddiy
       "Savatga" qizilligicha qoladi). Komponent ichiga #hex yozilmaydi. */
  --yashil-tasdiq: var(--yashil-45);

  /* — Tugma: IKKILAMCHI (shaffof qora — har fonda moslashadi, Uzum saboqi) */
  --tugma-ikki-rest:     rgba(20, 20, 23, 0.06);
  --tugma-ikki-hover:    rgba(20, 20, 23, 0.10);
  --tugma-ikki-pressed:  rgba(20, 20, 23, 0.14);
  --tugma-ikki-matn:     var(--matn-asosiy-rang);

  /* — Umumiy holat qatlami (istalgan bosiladigan element uchun) */
  --holat-hover:    rgba(20, 20, 23, 0.05);
  --holat-pressed:  rgba(20, 20, 23, 0.10);

  /* — Yorliqlar (badge) */
  --yorliq-yangi-fon:    var(--kul-15);    --yorliq-yangi-matn:    var(--kul-100);
  /* XIT — YANGILANDI T0: fon endi to'ldirilgan qizil + oq matn, eski
     ochiq-qizil-tint/to'q-qizil-matn EMAS (02-KOMPONENTLAR.md §2 jadvali) */
  --yorliq-xit-fon:      var(--qizil-50);  --yorliq-xit-matn:      var(--matn-teskari);
  /* KAM QOLDI — YANGILANDI T0: sariq fon -> qora fon + oq matn — EGA KO'RADI
     (Dizayner qarori, 02-KOMPONENTLAR.md §2, TZ §5 A.4-band 7) */
  --yorliq-kam-fon:      var(--qora);      --yorliq-kam-matn:      var(--matn-teskari);
  /* YOQ ("mavjud emas") — YANGILANDI T0: --yuza-kulrang/--matn-yoq
     (02-KOMPONENTLAR.md §2 jadvali, TZ §5 A.4-band 8) */
  --yorliq-yoq-fon:      var(--yuza-kulrang);  --yorliq-yoq-matn:      var(--matn-yoq);

  /* "Mavjud emas" — brend qizildan ATAYLAB farqli, neytral grafit (band 9) */
  --rang-mavjud-emas:      var(--kul-65);
  --rang-mavjud-emas-fon:  var(--kul-94);

  /* ============ SOYALAR — atigi IKKITA retsept ============ */
  /* Qoida: kartochkada SOYA YO'Q. Soya faqat "suzuvchi" narsalarda:      */
  /* dropdown, modal, sticky header, rasm ustidagi yorliq.                */
  --soya-suzuvchi: 0 2px 4px 2px rgba(20, 20, 23, 0.06),
                   0 1px 2px 0 rgba(20, 20, 23, 0.12);
  --soya-modal:    0 12px 32px -8px rgba(20, 20, 23, 0.28);

  /* ============ SHRIFT ============ */
  --shrift-asosiy: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* O'lcham shkalasi (desktop) — v3: marketpleys shkalasi. */
  --matn-h1: 1.75rem;             /* 28px, 700 — bo'lim sarlavhasi ("Mashhur") */
  --matn-h2: 1.25rem;             /* 20px, 700 — katalog/sahifa sarlavhasi */
  --matn-h3: 1.125rem;            /* 18px, 700 — mahsulot sahifasi nomi */
  --matn-h4: 1rem;                /* 16px, 600 — blok sarlavhasi */
  --matn-asosiy: 0.875rem;        /* 14px, 400 — asosiy o'qish o'lchami */
  --matn-kichik: 0.75rem;         /* 12px, 400 */
  --matn-narx-katta: 1.75rem;     /* 28px, 800 — mahsulot sahifasi narxi */
  --matn-narx-kichik: 1.125rem;   /* 18px, 700 — kartochka narxi */
  --matn-nom-karta: 0.8125rem;    /* 13px, 400 — kartochkada mahsulot nomi */
  --matn-yorliq: 0.625rem;        /* 10px, 700, UPPERCASE, tracking 0.04em */
  --matn-eyebrow: 0.8125rem;      /* 13px, 700, UPPERCASE, tracking 0.08em */
  --matn-wordmark: clamp(2.5rem, 6vw, 4.5rem); /* 40-72px — FAQAT bosh sahifa hero */

  /* ============ LAYOUT / ORALIQLAR (8px shkala) ============ */
  --konteyner-max: 1200px;
  --konteyner-padding: 24px;
  --oraliq-1: 4px;
  --oraliq-2: 8px;
  --oraliq-3: 12px;
  --oraliq-4: 16px;
  --oraliq-5: 24px;
  --oraliq-6: 32px;
  --oraliq-7: 48px;
  --oraliq-8: 64px;

  /* ============ RADIUS — v3: ICHMA-ICH KAMAYADI ============ */
  --radius-blok: 24px;        /* katta panel, quyuq bo'lim, hero */
  --radius-kartochka: 16px;   /* mahsulot/filial kartochkasi (TZ 01 §3: eski 20px) */
  --radius-rasm: 12px;        /* kartochka ichidagi rasm */
  --radius-tugma: 12px;       /* ★ PILL EMAS. Marketpleys tugmasi yumaloq-burchakli */
  --radius-maydon: 12px;      /* input, select, qidiruv qutisi */
  --radius-yorliq: 6px;       /* badge, kichik belgi */
  --radius-chip: 999px;       /* YAGONA pill istisnosi: filtr chiplari */

  /* ============ TEZLIK ============ */
  --tezlik: 0.2s ease;
  --tezlik-tez: 0.15s ease;

  /* ═══════════ TZ QO'SHIMCHA TOKENLARI (B1 — TZ 01 to'liq qamrovi) ═══════════ */
  /* Additiv: mavjud tokenlar O'ZGARMAYDI. Bular TZ ning kengaytirilgan     */
  /* chegara/soya/oraliq/radius shkalasini qo'shadi — B2 komponentlari       */
  /* shulardan foydalanadi. Ko'zga ko'rinadigan o'zgarish YO'Q (ulanmagan). */

  /* — Chegara: 2 → 7 daraja (TZ 01 §2) */
  --chegara-ichki:   1px solid #EEF0F3;            /* ajratgich, jadval qatori */
  --chegara-bolim:   1px solid #E4E7EC;            /* header/footer ajratgichi */
  --chegara-belgi:   1.5px solid #8C8A8A;          /* bo'sh checkbox/radio — YANGILANDI T0:
                                          eski #C6CBD3 (WCAG 1.4.11 3:1 ni o'tmasdi) dan;
                                          yangi qiymat 3.43:1 (TZ §5 A.3, 01-TOKENLAR.md §1.5) */
  --chegara-faol:    1.5px solid var(--qizil-50);  /* tanlangan maydon, stepper */
  --chegara-qora:    1.5px solid var(--kul-15);    /* tanlangan variant chipi */

  /* — Fokus halqasi (TZ 01 §1.2, §4) */
  --qizil-halqa:  rgba(230, 0, 18, 0.13);
  --fokus:        0 0 0 3px var(--qizil-halqa);                          /* kiritish maydoni */
  --fokus-tugma:  0 0 0 3px var(--kul-100), 0 0 0 5.5px var(--qizil-50); /* klaviatura fokusi */

  /* — Soya: 2 → 7 retsept (TZ 01 §4). Kartochka HOVER soyasi ATAYLAB
       ulanmagan (--soya-brend: none) — Dizayner qarori, TZ bilan ziddiyat. */
  --soya-mayda:   0 1px 2px rgba(20, 20, 23, 0.12);
  --soya-karta:   0 4px 16px rgba(20, 20, 23, 0.08);
  --soya-hover:   0 10px 26px rgba(20, 20, 23, 0.13);   /* TAYYOR, kartochkaga ULANMAGAN */
  --soya-varaq:   0 -8px 28px rgba(20, 20, 23, 0.16);
  --bosilgan:     inset 0 2px 5px rgba(0, 0, 0, 0.22);

  /* — Oraliq: 8px grid + TZ "tabiiy" darajalari (TZ 01 §6, additiv) */
  --oraliq-5px:  5px;   --oraliq-9px:  9px;    --oraliq-10px: 10px;
  --oraliq-11px: 11px;  --oraliq-14px: 14px;   --oraliq-20px: 20px;

  /* — Radius: TZ 01 §3 to'liq shkalasi (additiv; --radius-kartochka 20px
       o'zgarmadi — ega "oldin/keyin" ko'rishi kerak) */
  --radius-8:  8px;   --radius-9:  9px;    --radius-10: 10px;
  --radius-11: 11px;  --radius-14: 14px;   --radius-18: 18px;  --radius-22: 22px;

  /* — TZ nomli ko'priklar: 01-TOKENLAR.md §8 dagi ANIQ nomlar bilan T0
       (2026-09-15) da QAYTA YOZILDI (patch emas) — ARXITEKTORDAN-
       DASTURCHIGA-YANGI-TIL-TZ.md §3 4-qator shuni buyurgan: eski
       taxminiy nomlar (--qizil-matn/-hover/-tint, --matn-3, --matn-bosh,
       --yuza-ichki, --yuza-yolak, --chg-*, --r-katta/-orta/-kichik(11)/
       -mayda/-yorliq) loyihaning boshqa hech qayerida (js/html/ilova.css)
       ishlatilmagan edi (grep bilan tasdiqlandi) — shu sabab xavfsiz
       almashtirildi, hech narsa buzilmaydi.
       ⚠️ FAQAT rang (A) va radius/oraliq/balandlik (B) qismi — shrift
       (--f-*) va soya (C/D bosqichi) BU YERGA QO'SHILMADI, chunki bu T0
       ishi faqat A+B doirasida (Menejer topshirig'i). */
  --qizil:          var(--qizil-50);      /* #E60012 — aynan bir xil */
  --qizil-yuza:     var(--qizil-97);      /* #FFF1F2 — aynan bir xil, nom-alias (TZ §5 A.4) */
  --qizil-och:      #FF4D5A;              /* YANGI T0: FAQAT --qora fonda — logotip nuqtasi,
                                              qora kartadagi urg'u (TZ §5 A.3, 01-TOKENLAR §1.2) */
  --matn-1:         var(--matn-asosiy-rang);  /* #0E0E10 (--kul-15 T0 da yangilandi) */
  --matn-2:         #6A6A6C;              /* YANGI T0 qiymat — ikkilamchi matn (TZ 01 §1.3) */
  --matn-teskari:   var(--matn-qizil-ustida); /* #FFFFFF — qizil/qora yuza ustida */
  --matn-yoq:       #B6B4B4;              /* YANGI T0: faqat o'chirilgan holat — TUZATMANG
                                              (WCAG 1.4.3 dan ozod, 01-TOKENLAR §1.7) */
  --yuza-kulrang:   #F2F0F0;              /* YANGI T0: o'chirilgan tugma, "Topshirildi" yorlig'i,
                                              xarita fon (01-TOKENLAR §1.4) */
  --yuza-qora:      var(--kul-15);        /* footer/quyuq bo'lim foni */
  --chiziq:         #EAE7E7;              /* YANGI T0: kartochka chegarasi, ajratgich */
  --chiziq-belgi:   #8C8A8A;              /* YANGI T0: bo'sh checkbox/radio — WCAG 1.4.11 (3:1) */
  --chiziq-och:     #DEDBDB;              /* YANGI T0: o'chgan switch yo'lakchasi, nuqta */
  --chiziq-punktir: #D8D4D4;              /* YANGI T0: bo'sh holat ramkasi (1px dashed) */
  /* — Radius: oltita pog'ona (B bosqichi, TZ §5 B.1) */
  --r-mikro:        4px;                  /* YANGI T0 — yo'q edi */
  --r-kichik:       10px;
  --r-boshqaruv:    14px;
  --r-karta:        18px;
  --r-panel:        22px;
  --r-dumaloq:      999px;
  /* — Oraliq: yettita pog'ona (B bosqichi, TZ §5 B.4) */
  --o-1: 4px;  --o-2: 8px;  --o-3: 12px; --o-4: 16px;
  --o-5: 24px; --o-6: 32px; --o-7: 40px;
  /* — Boshqaruv balandligi (B bosqichi, TZ §5 B.3 — token TAYYORLANADI,
       .tugma balandligiga hali ULANMAYDI — bu B2 komponent ishi) */
  --b-kichik: 44px; --b-asosiy: 52px; --b-katta: 56px;
  /* — Sahifa chekkasi / ichki kenglik (B bosqichi, TZ §5 B.4 — token
       TAYYORLANADI, .konteyner ga hali ULANMAYDI) */
  --chekka: 40px;  --chekka-mobil: 18px;  --ich: 1200px;

  /* ═══════════ KO'CHISH KO'PRIGI (eski nomlar — vaqtinchalik) ═══════════ */
  /* Mavjud style.css eski nomlarni ishlatadi. Ularni birdan olib tashlasak
     sayt buziladi. Shuning uchun eski nomlar yangisiga BOG'LANADI.
     ⛔ YANGI kodda bu nomlarni ISHLATMANG. */
  --rang-brend:        var(--qizil-50);
  --rang-brend-tuq:    var(--qizil-45);
  --rang-brend-tint:   var(--qizil-97);
  --oq:                var(--kul-100);
  --qora:              var(--kul-15);
  --fon-sahifa:        var(--yuza-sahifa);
  --chegara:           var(--chegara-nozik);
  --radius-teg:        var(--radius-yorliq);
  /* Gradientlar bekor qilindi (marketpleysda gradient yo'q) — tekis rangga */
  --gradient-kartochka: var(--yuza-karta);
  --gradient-panel:     var(--yuza-karta);
  --gradient-hero:      linear-gradient(172deg, var(--qizil-97), var(--kul-100) 70%);
  /* Eski soyalar → yangi ikkitaga */
  --soya-kichik:       var(--soya-suzuvchi);
  --soya-orta:         var(--soya-suzuvchi);
  --soya-katta:        var(--soya-modal);
  --soya-brend:        none;
  --soya-brend-hover:  none;
}

body {
  font-family: var(--shrift-asosiy);
  color: var(--qora);
  background: var(--fon-sahifa);
  font-size: var(--matn-asosiy);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--matn-h1); }
h2 { font-size: var(--matn-h2); }
h3 { font-size: var(--matn-h3); font-weight: 700; letter-spacing: normal; }
h4 { font-size: var(--matn-h4); font-weight: 700; letter-spacing: normal; }

p {
  margin: 0 0 var(--oraliq-4) 0;
}

/* -----------------------------------------------------------------
   2. LAYOUT YORDAMCHILARI
------------------------------------------------------------------ */
.konteyner {
  max-width: var(--konteyner-max);
  margin: 0 auto;
  padding: 0 var(--konteyner-padding);
}

.bolim {
  padding: var(--oraliq-8) 0;
}

.bolim-tepasi-kichik {
  padding-top: var(--oraliq-3);
}

.bolim-sarlavha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oraliq-4);
  margin-bottom: var(--oraliq-6);
  flex-wrap: wrap;
}

.matn-markaz {
  text-align: center;
}

.bolim-sarlavha-markaz {
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

/* Bo'lim yorlig'i (eyebrow) — har bo'lim shu bilan boshlanadi */
.bolim-yorliq {
  display: block;
  color: var(--matn-qizil);
  font-size: var(--matn-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--oraliq-2);
}

.bolim-sarlavha-matn {
  min-width: 0;
}

.bolim-sarlavha .havola-korish {
  color: var(--matn-qizil);
  font-weight: 600;
  white-space: nowrap;
}

.bolim-sarlavha .havola-korish:hover {
  text-decoration: underline;
}

.breadcrumb {
  font-size: var(--matn-kichik);
  color: var(--matn-ikkinchi);
  padding: var(--oraliq-4) 0;
}

/* v3 qizil-auditi (3.7): breadcrumb neytral — qizil faqat CTA,
   eyebrow, faol-holat va wordmark nuqtasi uchun band */
.breadcrumb a {
  color: var(--matn-ikkinchi);
}

.breadcrumb a:hover {
  color: var(--qora);
  text-decoration: underline;
}

/* -----------------------------------------------------------------
   3. TUGMALAR
------------------------------------------------------------------ */
.tugma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oraliq-2);
  padding: 14px 28px;
  border-radius: var(--radius-tugma);
  font-size: var(--matn-asosiy);
  font-weight: 700;
  border: 1px solid transparent;
  transition: background var(--tezlik), color var(--tezlik), transform var(--tezlik),
    border-color var(--tezlik), box-shadow var(--tezlik);
  white-space: nowrap;
}

.tugma-asosiy {
  background: var(--rang-brend);
  color: var(--oq);
}

.tugma-asosiy:hover {
  background: var(--rang-brend-tuq);          /* #C4000F */
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(230, 0, 18, 0.30);  /* TZ K1 hover porlash */
}

.tugma-asosiy:active {
  background: var(--qizil-40);                /* #B8000E */
  transform: translateY(1px);
  box-shadow: var(--bosilgan);               /* inset — TZ K1 */
}

.tugma-asosiy:focus-visible {
  outline: none;
  box-shadow: var(--fokus-tugma);            /* oq+qizil qo'sh halqa (TZ K1) */
}

.tugma-asosiy[disabled],
.tugma-asosiy:disabled {
  /* YANGILANDI T0: eski var(--kul-94)+#A8ADB5 -> --yuza-kulrang/--matn-yoq
     (01-TOKENLAR.md §1.7: "o'chirilgan tugma foni: --yuza-kulrang",
     TZ §5 A.5 — komponent ichidagi qattiq hex tokenga almashtirildi) */
  background: var(--yuza-kulrang); color: var(--matn-yoq);
  cursor: not-allowed; transform: none; box-shadow: none;
}

.tugma-ikkilamchi {
  background: var(--oq);
  color: var(--qora);
  border-color: var(--chegara);
}

.tugma-ikkilamchi:hover {
  border-color: var(--qora);
  background: var(--fon-sahifa);
}

.tugma-qongiroq {
  padding: 16px 32px;
  font-size: 1.05rem;
}

.tugma-kichik {
  padding: 8px 18px;
  font-size: var(--matn-kichik);
}

.tugma-toliq {
  width: 100%;
}

/* -----------------------------------------------------------------
   4. HEADER
------------------------------------------------------------------ */
.sayt-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--oq);
  border-bottom: 1px solid var(--chegara);
}

.header-ichki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oraliq-5);
  padding-top: var(--oraliq-3);
  padding-bottom: var(--oraliq-3);
}

.logo {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--qora);
  flex-shrink: 0;
}

.logo-nuqta {
  color: var(--matn-qizil);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--oraliq-6);
}

.header-nav a {
  position: relative;
  font-weight: 600;
  color: var(--qora);
  padding: var(--oraliq-2) 0;
  transition: color var(--tezlik);
}

.header-nav a:hover {
  color: var(--matn-qizil);
}

.header-nav a.faol {
  color: var(--matn-qizil);
}

.header-nav a.faol::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--rang-brend);
  border-radius: var(--radius-tugma);
}

.header-ong {
  display: flex;
  align-items: center;
  gap: var(--oraliq-5);
  flex-shrink: 0;
}

.header-telefon {
  display: flex;
  align-items: center;
  gap: var(--oraliq-2);
  font-weight: 600;
  color: var(--qora);
  white-space: nowrap;
}

.header-telefon:hover {
  color: var(--matn-qizil);
}

.header-telefon svg {
  color: var(--matn-ikkinchi);
}

.hamburger-tugma {
  display: none;
  background: transparent;
  border: none;
  padding: var(--oraliq-2);
  color: var(--qora);
}

.hamburger-tugma .ikon-yop {
  display: none;
}

.hamburger-tugma.ochiq .ikon-och {
  display: none;
}

.hamburger-tugma.ochiq .ikon-yop {
  display: block;
}

/* -----------------------------------------------------------------
   5. HERO
------------------------------------------------------------------ */
.hero {
  min-height: 520px;
  display: flex;
  align-items: center;
  background: var(--gradient-hero);
  color: var(--qora);
}

.hero-ichki {
  max-width: 720px;
  /* Faqat vertikal: gorizontal padding .konteyner'dan keladi (chekka bo'shlig'i
     saqlanadi — mobilda harflar chetga yopishmaydi) */
  padding-top: var(--oraliq-8);
  padding-bottom: var(--oraliq-8);
}

.hero-wordmark {
  display: block;
  font-size: var(--matn-wordmark);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--qora);
  margin-bottom: var(--oraliq-5);
}

.hero-wordmark .logo-nuqta {
  color: var(--matn-qizil);
}

.hero h1 {
  color: var(--qora);
  margin-bottom: var(--oraliq-4);
}

.hero p {
  font-size: 1.125rem;
  color: var(--matn-ikkinchi);
  margin-bottom: var(--oraliq-6);
}

.hero-tugmalar {
  display: flex;
  gap: var(--oraliq-4);
  flex-wrap: wrap;
}

/* v3: hero ikki qism — chapda matn, o'ngda vizual blok (DIZAYN.md
   5-band ruxsati). Vizual faqat >=1024px'da ko'rinadi — mobilda hero
   100vh dan oshmasligi kafolati uchun butunlay yashirin. */
.hero-matn {
  min-width: 0;
}

.hero-vizual {
  display: none;
}

@media (min-width: 1024px) {
  .hero-ichki {
    max-width: var(--konteyner-max);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: var(--oraliq-7);
    align-items: center;
  }

  .hero-matn {
    max-width: 720px;
  }

  .hero-vizual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--oraliq-3);
    background: var(--gradient-kartochka);
    border: 1px solid var(--chegara);
    border-radius: var(--radius-blok);
    box-shadow: var(--soya-orta);
    padding: var(--oraliq-5);
  }

  /* JS o'chiq yoki ma'lumot buzilgan — blok bo'sh: joy egallamasin */
  .hero-vizual:empty {
    display: none;
  }

  .hero-vizual-rasm {
    border-radius: var(--radius-kartochka);
    overflow: hidden;
    background: var(--oq);
    aspect-ratio: 4 / 3;
  }

  .hero-vizual-rasm:first-child {
    grid-column: 1 / -1;
  }

  .hero-vizual-rasm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-vizual-rasm .rasm-placeholder {
    aspect-ratio: auto;
    height: 100%;
    border: none;
    border-radius: 0;
  }
}

/* -----------------------------------------------------------------
   6. KATEGORIYA TEZKOR HAVOLALARI
------------------------------------------------------------------ */
.kategoriya-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));  /* Dizayner: 6 ustun */
  gap: var(--oraliq-3);
}
.kategoriya-soni { display: block; margin-top: 2px; font-size: 11.5px; color: var(--matn-ikkinchi); font-weight: 400; }

.kategoriya-karta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--oraliq-3);
  padding: var(--oraliq-6) var(--oraliq-3);
  background: var(--oq);
  border: 1px solid var(--chegara);
  border-radius: var(--radius-kartochka);
  box-shadow: var(--soya-kichik);
  overflow: hidden;
  text-align: center;
  transition: transform var(--tezlik), box-shadow var(--tezlik), border-color var(--tezlik);
}

.kategoriya-karta:hover {
  transform: translateY(-4px);
  box-shadow: var(--soya-orta);
  border-color: transparent;
}

.kategoriya-karta svg {
  color: var(--matn-qizil);
}

.kategoriya-karta span {
  font-weight: 600;
  font-size: var(--matn-kichik);
  color: var(--qora);
}

/* v3: foto-karta rejimi — rasmni JS qo'yadi va kartaga .foto sinfini
   beradi; JS o'chiq bo'lsa yuqoridagi ikonkali ko'rinish o'zgarmaydi */
.kategoriya-karta.foto {
  padding: var(--oraliq-3);
}

.kategoriya-karta-rasm {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--fon-sahifa);
}

.kategoriya-karta-rasm img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12%;
}

.kategoriya-karta-rasm .rasm-placeholder {
  aspect-ratio: auto;
  height: 100%;
  border: none;
  border-radius: 0;
}

/* -----------------------------------------------------------------
   7. MAHSULOT GRIDI VA KARTOCHKA
------------------------------------------------------------------ */
.mahsulot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--oraliq-5);
}

.mahsulot-karta {
  background: var(--gradient-kartochka);
  border: 1px solid var(--chegara);
  border-radius: var(--radius-kartochka);
  box-shadow: var(--soya-kichik);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--tezlik), box-shadow var(--tezlik);
}

.mahsulot-karta:hover {
  transform: translateY(-4px);
  box-shadow: var(--soya-orta);
}

.mahsulot-karta-rasm {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--fon-sahifa);
}

.mahsulot-karta-rasm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mahsulot-karta-rasm .rasm-placeholder {
  aspect-ratio: auto;
  height: 100%;
  border: none;
  border-radius: 0;
}

.mavjud-emas-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 23, 0.55);
  color: var(--oq);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--matn-kichik);
  text-align: center;
  padding: var(--oraliq-3);
}

.mahsulot-karta-tarkib {
  padding: var(--oraliq-5) var(--oraliq-4) var(--oraliq-4);
  display: flex;
  flex-direction: column;
  gap: var(--oraliq-2);
  flex: 1;
}

.mahsulot-karta-brend {
  font-size: var(--matn-kichik);
  color: var(--matn-ikkinchi);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.kategoriya-teg {
  align-self: flex-start;
  font-size: var(--matn-kichik);
  color: var(--matn-ikkinchi);
}

.mahsulot-karta-nom {
  font-size: var(--matn-h4);
  font-weight: 700;
  color: var(--qora);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--matn-h4) * 1.2 * 2);
}

.mahsulot-karta-kod {
  color: var(--matn-uchinchi);
  font-size: var(--matn-kichik);
}

.mahsulot-karta-narx-blok {
  margin-top: auto;
  padding-top: var(--oraliq-2);
}

.mahsulot-karta-narx {
  color: var(--qora);
  font-weight: 800;
  font-size: var(--matn-narx-kichik);
}

.mahsulot-karta-qoldiq {
  color: var(--matn-ikkinchi);
  font-size: var(--matn-kichik);
  margin-top: 2px;
}

.mahsulot-karta-tarkib .tugma {
  margin-top: var(--oraliq-3);
}

/* -----------------------------------------------------------------
   8. "MAVJUD EMAS" HOLATI (brend qizildan ataylab farqli)
------------------------------------------------------------------ */
.holat-yoq {
  display: inline-flex;
  align-items: center;
  gap: var(--oraliq-2);
  color: var(--rang-mavjud-emas);
  background: var(--rang-mavjud-emas-fon);
  font-size: var(--matn-kichik);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-teg);
}

/* -----------------------------------------------------------------
   9. RASM PLACEHOLDER (internetsiz holat uchun — kutilgan holat)
------------------------------------------------------------------ */
.rasm-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--oraliq-2);
  background: var(--gradient-kartochka);
  border: 1px solid var(--chegara);
  border-radius: inherit;
  color: var(--matn-uchinchi);
  overflow: hidden;
}

.rasm-placeholder svg {
  stroke: var(--matn-uchinchi);
}

.rasm-placeholder span {
  font-size: var(--matn-kichik);
  color: var(--matn-ikkinchi);
  font-weight: 500;
}

.rasm-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  background-size: 200% 100%;
  animation: rp-yaltirash 2.6s ease-in-out infinite;
}

/* v3: universal reduced-motion bloki (motion.md andozasi) — OS'da
   "kamaytirilgan harakat" yoqilganda BARCHA animatsiya/transition
   o'chadi: placeholder-yaltirash, hero-kirish, .reveal, hover
   o'tishlari va smooth scroll. js/harakat.js ham o'z tomonidan
   hech qanday reveal sinfi qo'ymaydi. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes rp-yaltirash {
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -50% 0;
  }
}

.rasm-placeholder.nisbat-16-9 {
  aspect-ratio: 16 / 9;
}

/* -----------------------------------------------------------------
   10. BOSHQARUV PANELI: QIDIRUV, FILTR, SARALASH
------------------------------------------------------------------ */
.boshqaruv-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* faqat row holatida mazmunli */
  gap: var(--oraliq-4);
  margin-bottom: var(--oraliq-5);
}

.qidiruv-qutisi {
  position: relative;
  flex: 1 1 260px; /* row holatida: min taxminiy 260px, cho'zilishi mumkin */
  max-width: 360px;
}

.qidiruv-qutisi svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--matn-ikkinchi);
  pointer-events: none;
}

.qidiruv-qutisi input {
  width: 100%;
  padding: 12px 20px 12px 44px;
  border: 1px solid var(--chegara);
  border-radius: var(--radius-tugma);
  background: var(--oq);
  font-size: var(--matn-asosiy);
  color: var(--qora);
}

.qidiruv-qutisi input:focus {
  outline: none;
  border-color: var(--rang-brend);
  box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.12);
}

.saralash-select {
  padding: 12px 20px;
  border: 1px solid var(--chegara);
  border-radius: var(--radius-tugma);
  background: var(--oq);
  font-size: var(--matn-asosiy);
  color: var(--qora);
}

.saralash-select:focus {
  outline: none;
  border-color: var(--rang-brend);
}

.filtr-panel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oraliq-2);
  margin-bottom: var(--oraliq-5);
}

.filtr-pill {
  background: var(--oq);
  border: 1px solid var(--chegara);
  border-radius: var(--radius-tugma);
  color: var(--qora);
  padding: 8px 18px;
  font-size: var(--matn-kichik);
  font-weight: 600;
  transition: background var(--tezlik), color var(--tezlik), border-color var(--tezlik);
}

.filtr-pill:hover {
  border-color: var(--kul-15);
  color: var(--matn-asosiy-rang);
  box-shadow: 0 3px 10px rgba(20, 20, 23, 0.10);
}

.filtr-pill.faol {
  background: var(--yuza-qora);
  color: var(--matn-teskari);
  border-color: var(--kul-15);
  font-weight: 700;
}

.natijalar-soni {
  color: var(--matn-ikkinchi);
  font-size: var(--matn-kichik);
  margin-bottom: var(--oraliq-4);
}

.natija-yoq {
  text-align: center;
  padding: var(--oraliq-8) var(--oraliq-4);
  color: var(--matn-ikkinchi);
}

.natija-yoq svg {
  color: var(--matn-ikkinchi);
  margin-bottom: var(--oraliq-4);
}

/* -----------------------------------------------------------------
   11. QIZIL PANEL ("ARZONCHI TANLOVI")
------------------------------------------------------------------ */
.qizil-panel {
  background: var(--rang-brend);
  color: var(--oq);
  border-radius: var(--radius-blok);
  padding: var(--oraliq-8) var(--oraliq-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--oraliq-7);
  align-items: center;
}

.qizil-panel .bolim-yorliq {
  color: rgba(255, 255, 255, 0.75);
}

.qizil-panel h2 {
  color: var(--oq);
}

.qizil-panel-matn {
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--oraliq-3);
}

.qizil-panel-royxat li {
  display: flex;
  align-items: baseline;
  gap: var(--oraliq-4);
  padding: var(--oraliq-4) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.qizil-panel-raqam {
  font-size: var(--matn-h2);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.qizil-panel-royxat h3 {
  color: var(--oq);
  margin-bottom: 2px;
}

.qizil-panel-royxat p {
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* -----------------------------------------------------------------
   12. QUYUQ BO'LIM (#141417 — biz-haqimizda va h.k.)
------------------------------------------------------------------ */
.quyuq-bolim {
  background: var(--qora);
  color: var(--oq);
  border-radius: var(--radius-blok);
  padding: var(--oraliq-8) var(--oraliq-6);
}

.quyuq-bolim h2,
.quyuq-bolim h3 {
  color: var(--oq);
}

.quyuq-bolim p {
  color: rgba(255, 255, 255, 0.7);
}

/* -----------------------------------------------------------------
   13. "NEGA ARZONCHI" / QADRIYATLAR BLOKI
------------------------------------------------------------------ */
.qadriyat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--oraliq-5);
  margin-top: var(--oraliq-6);
}

.qadriyat-karta {
  padding: var(--oraliq-5);
  background: var(--oq);
  border: 1px solid var(--chegara);
  border-radius: var(--radius-kartochka);
}

.qadriyat-karta h3 {
  margin-bottom: var(--oraliq-2);
}

.qadriyat-karta p {
  color: var(--matn-ikkinchi);
  margin-bottom: 0;
}

/* -----------------------------------------------------------------
   13.5. "QANDAY XARID QILINADI" — 3 QADAM BO'LIMI (v3, bosh sahifa)
------------------------------------------------------------------ */
.qadam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--oraliq-5);
}

.qadam-karta {
  background: var(--gradient-kartochka);
  border: 1px solid var(--chegara);
  border-radius: var(--radius-kartochka);
  box-shadow: var(--soya-kichik);
  padding: var(--oraliq-6) var(--oraliq-5);
  transition: transform var(--tezlik), box-shadow var(--tezlik);
}

.qadam-karta:hover {
  transform: translateY(-4px);
  box-shadow: var(--soya-orta);
}

/* Raqam uslubi qizil paneldagi 01/02/03 bilan izchil: katta, yengil
   og'irlik, past urg'u; faqat hover'da brend qizili — bu bo'limdagi
   yagona qizil ishtirok */
.qadam-raqam {
  display: block;
  font-size: var(--matn-h2);
  font-weight: 300;
  line-height: 1;
  color: var(--matn-bezak-raqam);
  margin-bottom: var(--oraliq-4);
  transition: color var(--tezlik);
}

.qadam-karta:hover .qadam-raqam {
  color: var(--matn-qizil);
}

.qadam-karta h3 {
  margin-bottom: var(--oraliq-2);
}

.qadam-karta p {
  color: var(--matn-ikkinchi);
  margin: 0;
}

/* -----------------------------------------------------------------
   14. FILIALLAR HAQIDA QISQA BLOK VA FILIAL KARTOCHKASI
------------------------------------------------------------------ */
.bolim-kulrang {
  background: var(--oq);
}

.filial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--oraliq-5);
}

.filial-karta {
  background: var(--oq);
  border: 1px solid var(--chegara);
  border-radius: var(--radius-kartochka);
  box-shadow: var(--soya-kichik);
  padding: var(--oraliq-5);
  display: flex;
  flex-direction: column;
  gap: var(--oraliq-3);
  transition: transform var(--tezlik), box-shadow var(--tezlik);
}

.filial-karta:hover {
  transform: translateY(-4px);
  box-shadow: var(--soya-orta);
}

.filial-karta h3 {
  margin-bottom: 0;
  color: var(--qora);
}

.filial-karta > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-teg);
}

.filial-karta .rasm-placeholder.nisbat-16-9 {
  border-radius: var(--radius-teg);
}

.filial-qator {
  display: flex;
  align-items: flex-start;
  gap: var(--oraliq-2);
  color: var(--matn-ikkinchi);
  font-size: var(--matn-kichik);
}

.filial-qator svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--matn-uchinchi);
}

.filial-qator.telefon-qator {
  color: var(--matn-qizil);
  font-weight: 600;
}

.filial-qator.telefon-qator svg {
  color: var(--matn-qizil);
}

.filial-qator.telefon-qator a:hover {
  text-decoration: underline;
}

.filial-karta iframe {
  width: 100%;
  height: 200px;
  border: 0;
  border-radius: var(--radius-teg);
  margin-top: var(--oraliq-2);
}

/* -----------------------------------------------------------------
   15. MAHSULOT SAHIFASI
------------------------------------------------------------------ */
.mahsulot-tafsilot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--oraliq-7);
  align-items: start;
}

/* B6 — rasm ustuni yopishqoq: mahsulot rasmi ma'lumotni o'qiyotganda
   ko'rinib turadi (Uzum/Amazon naqshi). Faqat desktopda; sticky header
   (64px) uchun top ~80px. */
@media (min-width: 900px) {
  .mahsulot-tafsilot > div:first-child {
    position: sticky;
    top: 80px;
    align-self: start;
  }
}

.bolim-ichki-blok {
  margin-top: var(--oraliq-8);
}

.bolim-ichki-blok h2 {
  margin-bottom: var(--oraliq-4);
}

.mahsulot-tafsilot-rasm img,
.mahsulot-tafsilot-rasm .rasm-placeholder {
  border-radius: var(--radius-kartochka);
  border: 1px solid var(--chegara);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.mahsulot-tafsilot-malumot .mahsulot-karta-brend {
  display: block;
  margin-bottom: var(--oraliq-2);
}

.mahsulot-tafsilot-malumot h1 {
  margin-bottom: var(--oraliq-2);
}

.mahsulot-tafsilot-kod {
  display: block;
  color: var(--matn-uchinchi);
  font-size: var(--matn-kichik);
  margin-bottom: var(--oraliq-3);
}

.holat-belgi {
  display: inline-flex;
  align-items: center;
  gap: var(--oraliq-2);
  font-size: var(--matn-kichik);
  font-weight: 600;
  margin-bottom: var(--oraliq-3);
  color: var(--matn-ikkinchi);
}

.mahsulot-tafsilot-narx {
  font-size: var(--matn-narx-katta);
  font-weight: 800;
  color: var(--qora);
  margin-bottom: var(--oraliq-1);
}

.mahsulot-tafsilot-qoldiq {
  color: var(--matn-ikkinchi);
  font-size: var(--matn-kichik);
  margin-bottom: var(--oraliq-4);
}

.mahsulot-tafsilot-tavsif {
  color: var(--matn-ikkinchi);
  margin-bottom: var(--oraliq-5);
}

.xarakteristikalar-jadval {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--oraliq-3);
}

.xarakteristikalar-jadval tr {
  border-bottom: 1px solid var(--chegara);
}

.xarakteristikalar-jadval tr:last-child {
  border-bottom: none;
}

.xarakteristikalar-jadval td {
  padding: var(--oraliq-3) var(--oraliq-2);
  vertical-align: top;
}

.xarakteristikalar-jadval td:first-child {
  color: var(--matn-ikkinchi);
  width: 45%;
}

.xarakteristikalar-jadval td:last-child {
  font-weight: 700;
  color: var(--qora);
}

.mahsulot-filial-royxati {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oraliq-3);
}

.mahsulot-filial-chip {
  display: flex;
  align-items: center;
  gap: var(--oraliq-2);
  padding: var(--oraliq-3) var(--oraliq-4);
  background: var(--oq);
  border: 1px solid var(--chegara);
  border-radius: var(--radius-tugma);
  font-size: var(--matn-kichik);
  font-weight: 600;
  color: var(--qora);
  transition: border-color var(--tezlik), color var(--tezlik);
}

.mahsulot-filial-chip:hover {
  border-color: var(--rang-brend);
  color: var(--matn-qizil);
}

.mahsulot-filial-chip svg {
  color: var(--matn-ikkinchi);
}

.mahsulot-topilmadi {
  text-align: center;
  padding: var(--oraliq-8) var(--oraliq-4);
}

.mahsulot-topilmadi h2 {
  margin-bottom: var(--oraliq-3);
}

.mahsulot-topilmadi p {
  color: var(--matn-ikkinchi);
  margin-bottom: var(--oraliq-5);
}

/* -----------------------------------------------------------------
   16. XATO XABARI (ma'lumot fayli buzilgan / bo'sh bo'lganda)
------------------------------------------------------------------ */
.xato-xabar {
  text-align: center;
  padding: var(--oraliq-7) var(--oraliq-4);
  background: var(--oq);
  border: 1px dashed var(--chegara);
  border-radius: var(--radius-kartochka);
  color: var(--matn-ikkinchi);
}

.xato-xabar h3 {
  color: var(--rang-mavjud-emas);
  margin-bottom: var(--oraliq-2);
}

/* -----------------------------------------------------------------
   17. ALOQA VA BIZ HAQIMIZDA SAHIFALARI
------------------------------------------------------------------ */
.oraliq-ustki-katta {
  margin-top: var(--oraliq-6);
}

.ikki-ustun {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--oraliq-7);
  align-items: start;
}

.aloqa-royxat {
  display: flex;
  flex-direction: column;
  gap: var(--oraliq-4);
}

.aloqa-band {
  display: flex;
  align-items: center;
  gap: var(--oraliq-4);
  padding: var(--oraliq-4);
  background: var(--oq);
  border: 1px solid var(--chegara);
  border-radius: var(--radius-kartochka);
  font-weight: 600;
  transition: border-color var(--tezlik), transform var(--tezlik);
}

.aloqa-band:hover {
  border-color: var(--rang-brend);
  transform: translateY(-2px);
}

.aloqa-ikon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rang-brend-tint);
  color: var(--matn-qizil);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ijtimoiy-tarmoq-royxat {
  display: flex;
  gap: var(--oraliq-3);
  margin-top: var(--oraliq-3);
}

.ijtimoiy-tarmoq-royxat a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--oq);
  border: 1px solid var(--chegara);
  color: var(--qora);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--tezlik), color var(--tezlik), border-color var(--tezlik);
}

.ijtimoiy-tarmoq-royxat a:hover {
  background: var(--rang-brend);
  border-color: var(--rang-brend);
  color: var(--oq);
}

.statistika-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--oraliq-5);
  text-align: center;
}

.statistika-son {
  font-size: var(--matn-h1);
  font-weight: 800;
  color: var(--qora);
}

.statistika-label {
  color: var(--matn-ikkinchi);
  font-size: var(--matn-kichik);
}

/* -----------------------------------------------------------------
   17.5. FAQ — SAVOL-JAVOB (v3, aloqa sahifasi; sof HTML details/summary)
------------------------------------------------------------------ */
.faq-royxat {
  display: flex;
  flex-direction: column;
  gap: var(--oraliq-3);
}

.faq-band {
  background: var(--oq);
  border: 1px solid var(--chegara);
  border-radius: var(--radius-kartochka);
  overflow: hidden;
}

.faq-band summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oraliq-4);
  min-height: 44px; /* touch-target talabi */
  padding: var(--oraliq-4) var(--oraliq-5);
  font-size: var(--matn-h4);
  font-weight: 700;
  cursor: pointer;
  list-style: none; /* default uchburchak marker yashirinadi */
  transition: color var(--tezlik);
}

.faq-band summary::-webkit-details-marker {
  display: none;
}

.faq-band summary:focus-visible {
  outline: 2px solid var(--rang-brend);
  outline-offset: 2px;
}

.faq-chevron {
  flex-shrink: 0;
  color: var(--matn-ikkinchi);
  transition: transform var(--tezlik);
}

.faq-band[open] > summary {
  color: var(--matn-qizil);
}

.faq-band[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-javob {
  padding: 0 var(--oraliq-5) var(--oraliq-4);
  color: var(--matn-ikkinchi);
}

.faq-javob p {
  margin: 0;
}

/* -----------------------------------------------------------------
   18. FOOTER
------------------------------------------------------------------ */
.sayt-footer {
  background: var(--qora);
  color: rgba(255, 255, 255, 0.85);
  padding: var(--oraliq-8) 0 var(--oraliq-5);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--oraliq-6);
  margin-bottom: var(--oraliq-6);
}

.footer-logo {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--oq);
  margin-bottom: var(--oraliq-3);
}

.footer-shior {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--matn-kichik);
}

.footer-ustun h4 {
  color: var(--oq);
  margin-bottom: var(--oraliq-4);
}

.footer-ustun ul {
  display: flex;
  flex-direction: column;
  gap: var(--oraliq-2);
}

.footer-ustun a {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--matn-kichik);
  transition: color var(--tezlik);
}

.footer-ustun a:hover {
  color: var(--oq);
}

.footer-ijtimoiy {
  display: flex;
  gap: var(--oraliq-3);
  margin-top: var(--oraliq-3);
}

.footer-ijtimoiy a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oq);
  transition: background var(--tezlik);
}

.footer-ijtimoiy a:hover {
  background: var(--rang-brend);
}

.aloqa-xarita-havola {
  margin-top: var(--oraliq-3);
  margin-bottom: 0;
}

.footer-pastki {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--oraliq-4);
  text-align: center;
  font-size: var(--matn-kichik);
  color: rgba(255, 255, 255, 0.6);
}

/* -----------------------------------------------------------------
   19. HAMKOR BRENDLAR (v3: majburiy bo'lim — matn-chip grid,
   js/bosh-sahifa.js to'ldiradi)
------------------------------------------------------------------ */
.brend-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oraliq-3);
}

.brend-chip {
  padding: var(--oraliq-3) var(--oraliq-5);
  background: var(--oq);
  border: 1px solid var(--chegara);
  border-radius: var(--radius-teg);
  font-weight: 600;
  color: var(--matn-ikkinchi);
  transition: color var(--tezlik);
}

/* hover'da faqat matn qizil bo'ladi — chegara neytral qoladi
   (qizil me'yori: yangi bo'limda qizil ishtirok minimal) */
.brend-chip:hover {
  color: var(--matn-qizil);
}

/* -----------------------------------------------------------------
   19.5. HARAKAT (v3): skroll-reveal + hero kirish ketma-ketligi
   Faqat transform/opacity animatsiya qilinadi (motion.md qoidasi).
   .reveal sinfini js/harakat.js qo'yadi — JS o'chiq foydalanuvchi
   uchun HTML'da hech narsa yashirilmagan bo'ladi.
------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
}

.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Chop etish himoyasi: qog'ozda skroll yo'q — IntersectionObserver quyi
   bo'limlarni hech qachon "ko'rmaydi" va ular opacity:0 holida bo'sh
   chiqib qolardi. Printda barcha reveal darhol to'liq ko'rinadi. */
@media print {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Hero kirish — sof CSS (JS talab qilmaydi): wordmark → h1 → matn →
   tugmalar → vizual ketma-ket keladi. animation-fill-mode: backwards
   — element o'z kechikishigacha ko'rinmay turadi, tugagach odatiy
   holatiga qaytadi (opacity/transform'ga boshqa hech narsa tegmaydi). */
.hero-wordmark,
.hero h1,
.hero p,
.hero-tugmalar,
.hero-vizual {
  animation: hero-kirish 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.hero-wordmark { animation-delay: 0s; }
.hero h1 { animation-delay: 0.08s; }
.hero p { animation-delay: 0.16s; }
.hero-tugmalar { animation-delay: 0.24s; }
.hero-vizual { animation-delay: 0.32s; }

@keyframes hero-kirish {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* -----------------------------------------------------------------
   20. RESPONSIV — PLANSHET (<1024px)
------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .mahsulot-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .kategoriya-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .filial-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .qadriyat-grid {
    grid-template-columns: 1fr;
  }

  .qizil-panel {
    grid-template-columns: 1fr;
  }

  .statistika-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--oraliq-6);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Header qoidalari 1199px blokiga ko'chirildi (2026-09-08):
     navga 'Virtual ko'rinish' qo'shilgach to'liq header 1024-1199px
     oralig'ida ham sig'maydigan bo'lib qoldi — so'zlar ikki qatorga
     o'ralib xunuk ko'rinardi. Fayl oxiriga qarang. */
}

/* -----------------------------------------------------------------
   21. RESPONSIV — MOBIL (<768px)
------------------------------------------------------------------ */
@media (max-width: 767px) {
  :root {
    --matn-h1: 1.75rem;
    --matn-h2: 1.5rem;
    --matn-h3: 1.25rem;
    --matn-narx-katta: 1.5rem;
  }

  .hero {
    min-height: 340px;
  }

  .hero-ichki {
    padding-top: var(--oraliq-6);
    padding-bottom: var(--oraliq-6);
  }

  /* Mobil: hero shriftlari kichikroq (ega talabi) */
  .hero-wordmark { font-size: 2rem; margin-bottom: var(--oraliq-4); }
  .hero h1 { font-size: 1.375rem; }
  .hero p { font-size: 0.9375rem; }

  .hero-tugmalar .tugma {
    width: 100%;
  }

  .kategoriya-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mahsulot-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--oraliq-3);
  }

  .filial-grid {
    grid-template-columns: 1fr;
  }

  .mahsulot-tafsilot,
  .ikki-ustun {
    grid-template-columns: 1fr;
    gap: var(--oraliq-5);
  }

  .xarakteristikalar-jadval td:first-child {
    width: 50%;
  }

  .statistika-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--oraliq-5);
  }

  .qizil-panel,
  .quyuq-bolim {
    padding: var(--oraliq-6) var(--oraliq-4);
  }

  .boshqaruv-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .qidiruv-qutisi {
    /* MUHIM (bug tuzatildi): ustunli flex konteynerda flex-basis kenglikka
       emas, BALANDLIKKA tegishli bo'lib qoladi — shuning uchun eski
       "flex: 1 1 260px" shu yerda 260px balandlikka cho'zilib, lupa
       ikonkasini inputdan pastga tushirib yuborardi. Yechim: flex-basis'ni
       butunlay bekor qilib, faqat width bilan ishlash. */
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }

  .bolim {
    padding: var(--oraliq-7) 0;
  }

  /* v3: qadam kartalari mobilda bitta ustun */
  .qadam-grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------
   22. RESPONSIV — KICHIK MOBIL (<480px)
------------------------------------------------------------------ */
@media (max-width: 479px) {
  :root {
    --konteyner-padding: 12px;
  }

  .mahsulot-grid {
    gap: var(--oraliq-3);
  }

  .kategoriya-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--oraliq-3);
  }

  .footer-grid,
  .qadriyat-grid,
  .statistika-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MARKETPLEYS QATLAMI (v4) — DIZAYN.md v3 spetsifikatsiyasi bo'yicha
   -----------------------------------------------------------------------
   Bu blok fayl OXIRIDA turadi va yuqoridagi eski qoidalarni ataylab
   qayta belgilaydi (kaskadda keyingisi ustun keladi).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────── 1. MAHSULOT GRIDI — koridor mantiqi ─────────────── */
/* Kartochka eni 168–240px oralig'ida ushlab turiladi; ustun soni
   kenglikka qarab 2 → 3 → 4 → 5 bo'lib o'sadi (Uzum o'lchovi). */
.mahsulot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  column-gap: var(--oraliq-2);
  row-gap: var(--oraliq-5);
  align-items: stretch;
}

@media (min-width: 768px) {
  .mahsulot-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    column-gap: var(--oraliq-4);
  }
}

@media (min-width: 1024px) {
  .mahsulot-grid {
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    column-gap: var(--oraliq-5);
    row-gap: var(--oraliq-6);
  }
}

/* ─────────────── 2. MAHSULOT KARTOCHKASI — v3 ─────────────── */
/* ega qarori 14.09: hover'da oldinga chiqish endi YOQILGAN (eski
   "SOYA YO'Q, TRANSFORM YO'Q" qoidasi bekor qilindi — pastga qarang). */
.mahsulot-karta {
  position: relative;
  min-width: 0;              /* grid-item avtomatik min-kenglik guardi:
                                 uzun nom .mahsulot-grid'ni kengaytirmasin
                                 (minmax(0,1fr) ruhi — ega qarori 14.09) */
  background: var(--yuza-karta);
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-kartochka);
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--tezlik), transform var(--tezlik), box-shadow var(--tezlik);
}

.mahsulot-karta:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--chegara-kuchli);
}

/* Faqat sichqonchali qurilmalarda — telefon/planshetda hover "yopishib"
   qolmasin (ega qarori 14.09: DIZAYN.md "hover'da sakrash yo'q" bekor) */
@media (hover: hover) {
  .mahsulot-karta:hover {
    transform: translateY(-4px);
    box-shadow: var(--soya-hover);
    border-color: var(--chegara-kuchli);
  }
}

/* Kamaytirilgan harakat afzal ko'rilsa — hover'da sakrash o'chadi */
@media (prefers-reduced-motion: reduce) {
  .mahsulot-karta:hover {
    transform: none;
    box-shadow: none;
  }
}

.mahsulot-karta:focus-within {
  outline: 2px solid var(--chegara-fokus);
  outline-offset: 2px;
}

/* — Rasm bloki: kvadrat, ichki radius tashqarisidan kichik */
.mahsulot-karta-rasm {
  position: relative;
  display: block;
  width: auto;
  aspect-ratio: 1 / 1;
  margin: var(--oraliq-2);
  border-radius: var(--radius-rasm);
  overflow: hidden;
  background: var(--yuza-uchinchi);
}

.mahsulot-karta-rasm img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Hover'da aylanadigan rasmlar — bir-birining ustida turadi */
.karta-rasm-slayd {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--tezlik);
}

.karta-rasm-slayd--faol { opacity: 1; }

/* Rasm ostidagi nuqtachalar */
.karta-nuqtalar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  justify-content: center;
  gap: 4px;
  z-index: 2;
}

.karta-nuqta {
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: var(--kul-85);
  cursor: pointer;
  border: 0;
  padding: 0;
}

.karta-nuqta--faol { background: var(--kul-35); }

/* — Yorliqlar (rasm ustida, chap yuqorida) */
.karta-yorliqlar {
  position: absolute;
  top: var(--oraliq-2);
  left: var(--oraliq-2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  z-index: 3;
}

.yorliq {
  display: inline-block;
  font-size: var(--matn-yorliq);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 6px;
  border-radius: var(--radius-yorliq);
}

/* Chegirma yorlig'i ("-18%") XIT bilan bir xil qizil token ishlatadi —
   02-KOMPONENTLAR.md:105 jadvali (Nazoratchi 15.09 topgan xato tuzatildi,
   eski qator qora --yorliq-yangi-fon ga bog'langan edi). */
.yorliq--chegirma { background: var(--yorliq-xit-fon); color: var(--yorliq-xit-matn); }
.yorliq--kam      { background: var(--yorliq-kam-fon);   color: var(--yorliq-kam-matn); }
.yorliq--xit      { background: var(--yorliq-xit-fon);   color: var(--yorliq-xit-matn); }
.yorliq--yoq      { background: var(--yorliq-yoq-fon);   color: var(--yorliq-yoq-matn); }

/* — Sevimli (yurakcha), o'ng yuqorida */
.yurak {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--kul-65);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--soya-suzuvchi);
  transition: color var(--tezlik-tez), background var(--tezlik-tez);
}

.yurak:hover { background: var(--kul-100); color: var(--matn-qizil); }
.yurak--faol { color: var(--matn-qizil); }
.yurak:focus-visible { outline: 2px solid var(--chegara-fokus); outline-offset: 2px; }

/* — Tarkib */
.mahsulot-karta-tarkib {
  padding: var(--oraliq-2) var(--oraliq-3) var(--oraliq-3);
  display: flex;
  flex-direction: column;
  gap: var(--oraliq-1);
  flex: 1;
}

/* 1. NARX — birinchi element (DIZAYN.md: narx nomdan YUQORIDA) */
.mahsulot-karta-narx-blok {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}

.mahsulot-karta-narx {
  color: var(--matn-asosiy-rang);
  font-weight: 700;
  font-size: var(--matn-narx-kichik);
  line-height: 1.2;
}

.narx-eski-qator {
  display: flex;
  align-items: baseline;
  gap: var(--oraliq-2);
  flex-wrap: wrap;
}

.mahsulot-karta-narx-eski {
  color: var(--matn-uchinchi);
  font-size: var(--matn-kichik);
  text-decoration: line-through;
}

/* YAGONA qizil matn kartochkada */
.mahsulot-karta-chegirma {
  color: var(--matn-tejam);
  font-size: var(--matn-kichik);
  font-weight: 700;
}

/* — Nasiya yorlig'i: SARIQ (qizil CTA'da band — DIZAYN.md ochiq masala 3) */
.nasiya-yorliq {
  align-self: flex-start;
  background: var(--sariq-95);
  color: var(--matn-asosiy-rang);
  font-size: var(--matn-kichik);
  border-radius: var(--radius-yorliq);
  padding: 2px 6px;
  margin-top: 2px;
}

/* 2. NOM — narxdan keyin, kichikroq, 2 qator */
.mahsulot-karta-nom {
  margin: var(--oraliq-1) 0 0;
  font-size: var(--matn-nom-karta);
  font-weight: 400;
  line-height: 1.35;
  color: var(--matn-asosiy-rang);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.mahsulot-karta-nom a { color: inherit; text-decoration: none; }
.mahsulot-karta-nom a:hover { text-decoration: underline; }

.mahsulot-karta-meta {
  font-size: var(--matn-kichik);
  color: var(--matn-uchinchi);
}

.mahsulot-karta-qoldiq {
  font-size: var(--matn-kichik);
  color: var(--matn-ikkinchi);
}

.mahsulot-karta-qoldiq--kam { color: var(--kul-35); font-weight: 600; }

/* — Reyting (yulduzchalar) — SARIQ, hech qachon qizil emas */
.karta-reyting {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--matn-kichik);
  color: var(--matn-uchinchi);
}

.yulduzlar { display: inline-flex; gap: 1px; font-size: 12px; line-height: 1; }
.yulduz { color: var(--kul-85); }
.yulduz--toliq { color: var(--sariq-50); }

/* — CTA: to'liq kenglik, pastda — margin-top:auto uni har doim
   kartochka tarkibining eng pastiga suradi (ega qarori 14.09: turli
   balandlikdagi nom/reyting/qoldiq bo'lsa ham tugmalar bir chiziqda
   turadi, chunki .mahsulot-karta-tarkib flex:1 + column) */
.karta-cta {
  margin-top: auto;
  height: 40px;
  border-radius: var(--radius-tugma);
  font-size: var(--matn-asosiy);
  font-weight: 600;
  font-family: inherit;
  border: 0;
  cursor: pointer;
  width: 100%;
  background: var(--tugma-asosiy-rest);
  color: var(--tugma-asosiy-matn);
  transition: background var(--tezlik-tez);
}

.karta-cta:hover   { background: var(--tugma-asosiy-hover); }
.karta-cta:active  { background: var(--tugma-asosiy-pressed); }
.karta-cta:focus-visible { outline: 2px solid var(--chegara-fokus); outline-offset: 2px; }
.karta-cta.savatda { background: var(--yashil-tasdiq); } /* ega qarori 14.09 */
.karta-cta[disabled] { background: var(--tugma-asosiy-ochiq); cursor: not-allowed; }

/* ─────────────── 3. "YANA KO'RSATISH" ─────────────── */
.yana-blok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--oraliq-3);
  margin-top: var(--oraliq-6);
}

.yana-hisob { font-size: var(--matn-kichik); color: var(--matn-ikkinchi); }

.yana-tugma {
  min-width: 240px;
  max-width: 100%;
  height: 44px;
  border-radius: var(--radius-tugma);
  border: 1px solid var(--chegara-kuchli);
  background: var(--yuza-karta);
  color: var(--matn-asosiy-rang);
  font-size: var(--matn-asosiy);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--tezlik-tez), border-color var(--tezlik-tez);
}

.yana-tugma:hover { background: var(--holat-hover); border-color: var(--kul-65); }
.yana-tugma:focus-visible { outline: 2px solid var(--chegara-fokus); outline-offset: 2px; }

/* ─────────────── 4. HEADER — do'kon vidjetlari ─────────────── */
.header-dokon {
  display: flex;
  align-items: center;
  gap: var(--oraliq-2);
}

.dokon-ikonka {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 48px;
  height: 44px;
  padding: 0 var(--oraliq-2);
  border: 0;
  background: transparent;
  border-radius: var(--radius-yorliq);
  color: var(--matn-asosiy-rang);
  font-family: inherit;
  font-size: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tezlik-tez);
}

.dokon-ikonka:hover { background: var(--holat-hover); }
.dokon-ikonka:focus-visible { outline: 2px solid var(--chegara-fokus); outline-offset: 2px; }
.dokon-ikonka svg { width: 20px; height: 20px; }

.dokon-badge {
  position: absolute;
  top: 2px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--qizil-50);
  color: var(--matn-qizil-ustida);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Shahar tanlash tugmasi */
.shahar-tanlash {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--matn-ikkinchi);
  font-family: inherit;
  font-size: var(--matn-kichik);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-yorliq);
}

.shahar-tanlash:hover { background: var(--holat-hover); color: var(--matn-asosiy-rang); }

/* Header qidiruv */
.header-qidiruv {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--oraliq-2);
}

.header-qidiruv input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 var(--oraliq-4);
  border: 1px solid var(--chegara-kuchli);
  border-radius: var(--radius-maydon);
  background: var(--yuza-karta);
  font-family: inherit;
  font-size: var(--matn-asosiy);
  color: var(--matn-asosiy-rang);
}

.header-qidiruv input:focus-visible {
  outline: 2px solid var(--chegara-fokus);
  outline-offset: 1px;
}

.header-qidiruv button {
  height: 40px;
  padding: 0 var(--oraliq-4);
  border: 0;
  border-radius: var(--radius-tugma);
  background: var(--tugma-asosiy-rest);
  color: var(--tugma-asosiy-matn);
  font-family: inherit;
  font-size: var(--matn-asosiy);
  font-weight: 600;
  cursor: pointer;
}

.header-qidiruv button:hover { background: var(--tugma-asosiy-hover); }

/* ─────────────── 5. XABAR (toast) ─────────────── */
.xabar-idishi {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--oraliq-2);
  pointer-events: none;
  width: min(92vw, 420px);
}

.xabar {
  padding: var(--oraliq-3) var(--oraliq-4);
  border-radius: var(--radius-tugma);
  background: var(--yuza-quyuq);
  color: var(--matn-quyuq-ustida);
  font-size: var(--matn-asosiy);
  box-shadow: var(--soya-modal);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--tezlik), transform var(--tezlik);
}

.xabar--chiqdi { opacity: 1; transform: translateY(0); }
.xabar--ogoh { background: var(--sariq-50); color: var(--kul-15); }
.xabar--xato { background: var(--qizil-50); color: var(--matn-qizil-ustida); }

@media (prefers-reduced-motion: reduce) {
  .xabar { transition: none; }
}

/* ─────────────── 6. MODAL ─────────────── */
.modal-qatlam {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 20, 23, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--oraliq-4);
}

body.modal-ochiq { overflow: hidden; }

.modal {
  width: min(100%, 440px);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--yuza-karta);
  border-radius: var(--radius-blok);
  box-shadow: var(--soya-modal);
}

.modal-bosh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oraliq-3);
  padding: var(--oraliq-5) var(--oraliq-5) var(--oraliq-3);
}

.modal-bosh h3 { margin: 0; font-size: var(--matn-h4); font-weight: 700; }

.modal-yop {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--tugma-ikki-rest);
  color: var(--matn-asosiy-rang);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.modal-yop:hover { background: var(--tugma-ikki-hover); }

.modal-tan { padding: 0 var(--oraliq-5) var(--oraliq-5); }
.modal-izoh { margin: 0 0 var(--oraliq-4); color: var(--matn-ikkinchi); font-size: var(--matn-asosiy); }
.modal-mayda { margin: var(--oraliq-3) 0 0; font-size: var(--matn-kichik); color: var(--matn-uchinchi); text-align: center; }

/* Shakl maydonlari */
.maydon { display: block; margin-bottom: var(--oraliq-4); }
.maydon > span { display: block; margin-bottom: 6px; font-size: var(--matn-kichik); color: var(--matn-ikkinchi); }

.maydon input,
.maydon select,
.maydon textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--oraliq-3) var(--oraliq-4);
  border: 1px solid var(--chegara-kuchli);
  border-radius: var(--radius-maydon);
  background: var(--yuza-karta);
  font-family: inherit;
  font-size: var(--matn-asosiy);
  color: var(--matn-asosiy-rang);
}

.maydon textarea { min-height: 96px; resize: vertical; }
.maydon input:focus-visible,
.maydon select:focus-visible,
.maydon textarea:focus-visible { outline: 2px solid var(--chegara-fokus); outline-offset: 1px; }

.maydon-xato {
  margin: 0 0 var(--oraliq-3);
  color: var(--matn-qizil);
  font-size: var(--matn-kichik);
  font-weight: 600;
}

/* K4 — kiritish maydoni holatlari (TZ 02 §4) */
.maydon input:focus,
.maydon select:focus,
.maydon textarea:focus {
  outline: none;
  border-color: var(--qizil-50);
  box-shadow: var(--fokus);            /* 0 0 0 3px rgba(230,0,18,.13) */
}
.maydon--xato input,
.maydon--xato select,
.maydon--xato textarea { border-color: var(--qizil-50); }
.maydon--togri input,
.maydon--togri select,
.maydon--togri textarea { border-color: var(--yashil-45); }
.maydon-xato-inline {
  margin: 5px 0 0;
  font-size: 11.5px;
  color: var(--matn-qizil);
}

/* Shahar ro'yxati modalida */
.shahar-royxat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--oraliq-2);
}

.shahar-tugma {
  min-height: 44px;
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-tugma);
  background: var(--yuza-karta);
  font-family: inherit;
  font-size: var(--matn-asosiy);
  color: var(--matn-asosiy-rang);
  cursor: pointer;
}

.shahar-tugma:hover { background: var(--qizil-97); border-color: var(--qizil-90); }

/* ─────────────── 7. REKLAMA KARUSELI ─────────────── */
.reklama-bolim { margin-bottom: var(--oraliq-6); }

.reklama-karusel {
  display: flex;
  gap: var(--oraliq-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--oraliq-2);
}

.reklama-karusel::-webkit-scrollbar { display: none; }

.reklama-slayd {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: 220px;
  border-radius: var(--radius-blok);
  padding: var(--oraliq-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--oraliq-3);
  background-size: cover;
  background-position: center;
  text-decoration: none;
}

.reklama-slayd h3 { margin: 0; font-size: var(--matn-h1); font-weight: 800; line-height: 1.15; }
.reklama-slayd p { margin: 0; font-size: var(--matn-asosiy); max-width: 46ch; opacity: 0.92; }

.reklama-tugma {
  align-self: flex-start;
  margin-top: var(--oraliq-2);
  padding: 10px var(--oraliq-5);
  border-radius: var(--radius-tugma);
  background: var(--kul-100);
  color: var(--kul-15);
  font-size: var(--matn-asosiy);
  font-weight: 600;
}

.reklama-boshqaruv {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--oraliq-3);
}

.reklama-nuqta {
  width: 24px;
  height: 4px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: var(--kul-85);
  cursor: pointer;
}

.reklama-nuqta--faol { background: var(--qizil-50); }

/* ─────────────── 8. SAVAT SAHIFASI ─────────────── */
.savat-tuzilma {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--oraliq-5);
  align-items: start;
}

@media (min-width: 960px) {
  .savat-tuzilma { grid-template-columns: 1fr 340px; gap: var(--oraliq-6); }
  .savat-xulosa { position: sticky; top: 88px; }
}

.savat-royxat { display: flex; flex-direction: column; gap: var(--oraliq-3); }

.savat-bosh-qator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oraliq-3);
  padding: var(--oraliq-3) var(--oraliq-4);
  background: var(--yuza-karta);
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-kartochka);
}

.savat-qator {
  display: grid;
  grid-template-columns: auto 88px 1fr auto;
  gap: var(--oraliq-3);
  align-items: center;
  padding: var(--oraliq-3);
  background: var(--yuza-karta);
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-kartochka);
}

@media (max-width: 639px) {
  .savat-qator { grid-template-columns: auto 72px 1fr; }
  .savat-qator-boshqaruv { grid-column: 2 / -1; }
}

.savat-qator-rasm {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-rasm);
  background: var(--yuza-uchinchi);
  overflow: hidden;
}

.savat-qator-rasm img { width: 100%; height: 100%; object-fit: contain; display: block; }

.savat-qator-nom {
  font-size: var(--matn-asosiy);
  color: var(--matn-asosiy-rang);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.savat-qator-nom:hover { text-decoration: underline; }
.savat-qator-narx { font-weight: 700; font-size: var(--matn-narx-kichik); margin-top: 4px; }

.savat-qator-boshqaruv {
  display: flex;
  align-items: center;
  gap: var(--oraliq-3);
  justify-content: flex-end;
}

.soni-boshqaruv {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--chegara-kuchli);
  border-radius: var(--radius-tugma);
  overflow: hidden;
}

.soni-tugma {
  width: 36px;
  height: 36px;
  border: 0;
  background: var(--yuza-karta);
  font-size: 18px;
  font-family: inherit;
  color: var(--matn-asosiy-rang);
  cursor: pointer;
}

.soni-tugma:hover:not([disabled]) { background: var(--holat-hover); }
.soni-tugma[disabled] { color: var(--matn-uchinchi); cursor: not-allowed; }
.soni-qiymat { min-width: 36px; text-align: center; font-weight: 600; font-size: var(--matn-asosiy); }
.soni-max-eslatma { display: block; font-size: var(--matn-kichik); color: var(--matn-ikkinchi); margin-top: var(--oraliq-1); }

.ochir-tugma {
  border: 0;
  background: transparent;
  color: var(--matn-ikkinchi);
  font-family: inherit;
  font-size: var(--matn-kichik);
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-yorliq);
}

.ochir-tugma:hover { background: var(--holat-hover); color: var(--matn-qizil); }

/* Belgilash katakchasi */
.belgi {
  width: 22px;
  height: 22px;
  accent-color: var(--qizil-50);
  cursor: pointer;
}

/* Xulosa paneli */
.savat-xulosa {
  background: var(--yuza-karta);
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-kartochka);
  padding: var(--oraliq-5);
}

.xulosa-qator {
  display: flex;
  justify-content: space-between;
  gap: var(--oraliq-3);
  padding: var(--oraliq-2) 0;
  font-size: var(--matn-asosiy);
  color: var(--matn-ikkinchi);
}

.xulosa-qator--jami {
  border-top: 1px solid var(--chegara-nozik);
  margin-top: var(--oraliq-3);
  padding-top: var(--oraliq-4);
  font-size: var(--matn-h4);
  font-weight: 700;
  color: var(--matn-asosiy-rang);
}

.xulosa-tejam { color: var(--matn-tejam); font-weight: 600; }

/* To'lov usullari */
.tolov-royxat { display: flex; flex-direction: column; gap: var(--oraliq-2); margin: var(--oraliq-3) 0; }

.tolov-variant {
  display: flex;
  align-items: flex-start;
  gap: var(--oraliq-3);
  padding: var(--oraliq-3);
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-tugma);
  cursor: pointer;
}

.tolov-variant:hover { background: var(--holat-hover); }
.tolov-variant input { margin-top: 2px; accent-color: var(--qizil-50); width: 18px; height: 18px; }
.tolov-variant strong { display: block; font-size: var(--matn-asosiy); }
.tolov-variant span { font-size: var(--matn-kichik); color: var(--matn-ikkinchi); }

/* ─────────────── 9. BO'SH HOLAT ─────────────── */
.bosh-holat {
  text-align: center;
  padding: 26px 20px;
  background: var(--kul-98);            /* #FAF9F9 — TZ §11, T0 da yangilandi */
  border: 1px dashed var(--chiziq-punktir);  /* YANGILANDI T0: eski #D3D8DF -> yangi til
                                                 "bo'sh holat ramkasi" (01-TOKENLAR §1.5) */
  border-radius: var(--radius-14);
}

/* Ikonka doirasi 52×52 (TZ §11) */
.bosh-holat-ikonka {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin: 0 auto var(--oraliq-3);
  border-radius: var(--radius-chip);
  background: var(--kul-96);
  color: var(--matn-ikkinchi);
}
.bosh-holat-ikonka svg { width: 26px; height: 26px; }
/* eski to'g'ridan-to'g'ri svg (agar qolgan bo'lsa) */
.bosh-holat > svg { color: var(--matn-uchinchi); margin-bottom: var(--oraliq-3); }

.bosh-holat h2 { margin: 0 0 var(--oraliq-2); font-size: 15px; font-weight: 800; letter-spacing: normal; }
.bosh-holat p,
.bosh-holat-izoh { margin: 0 0 var(--oraliq-5); font-size: 12.5px; line-height: 1.5; color: var(--matn-ikkinchi); }
.bosh-holat .tugma,
.bosh-holat-tugma { height: 42px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; width: auto; }

/* "Balki X demoqchimisiz?" — qizil, qalin, chiziqli havola ko'rinishi */
.bosh-holat-taxmin {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--matn-qizil);
  text-decoration: underline;
}
.bosh-holat-taxmin:hover { color: var(--qizil-40); }

/* ─────────────── 10. MAHSULOT SAHIFASI — qo'shimchalar ─────────────── */
/* Galereya */
.galereya-kichik {
  display: flex;
  gap: var(--oraliq-2);
  margin-top: var(--oraliq-3);
  flex-wrap: wrap;
}

.galereya-kichik button {
  width: 64px;
  height: 64px;
  padding: 4px;
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-rasm);
  background: var(--yuza-karta);
  cursor: pointer;
  overflow: hidden;
}

.galereya-kichik button img { width: 100%; height: 100%; object-fit: contain; }
.galereya-kichik button.faol { border-color: var(--kul-15); border-width: 2px; }

/* Rang variantlari */
.rang-royxat { display: flex; gap: var(--oraliq-2); flex-wrap: wrap; margin: var(--oraliq-3) 0; }

.rang-variant {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--oraliq-3);
  border: 1px solid var(--chegara-kuchli);
  border-radius: var(--radius-chip);
  background: var(--yuza-karta);
  font-family: inherit;
  font-size: var(--matn-kichik);
  color: var(--matn-asosiy-rang);
  text-decoration: none;
  cursor: pointer;
}

.rang-variant.faol { border-color: var(--kul-15); border-width: 2px; background: var(--yuza-karta); }
.rang-nuqta { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--chegara-kuchli); }

/* Nasiya kalkulyatori */
.nasiya-blok {
  background: var(--sariq-95);
  border-radius: var(--radius-kartochka);
  padding: var(--oraliq-4);
  margin: var(--oraliq-4) 0;
}

.nasiya-blok h3 { margin: 0 0 var(--oraliq-3); font-size: var(--matn-h4); }

.nasiya-tugmalar { display: flex; gap: var(--oraliq-2); flex-wrap: wrap; }

.nasiya-tugma {
  flex: 1 1 auto;
  min-width: 72px;
  min-height: 44px;
  padding: var(--oraliq-2);
  border: 1px solid var(--chegara-kuchli);
  border-radius: var(--radius-tugma);
  background: var(--yuza-karta);
  font-family: inherit;
  font-size: var(--matn-kichik);
  color: var(--matn-asosiy-rang);
  cursor: pointer;
  text-align: center;
}

.nasiya-tugma.faol { border-color: var(--kul-15); border-width: 2px; font-weight: 700; }
.nasiya-tugma b { display: block; font-size: var(--matn-asosiy); }
.nasiya-natija { margin: var(--oraliq-3) 0 0; font-size: var(--matn-kichik); color: var(--matn-ikkinchi); }

/* Sharhlar */
.sharh-bolim { margin-top: var(--oraliq-7); }

.sharh-xulosa {
  display: flex;
  align-items: center;
  gap: var(--oraliq-4);
  flex-wrap: wrap;
  margin-bottom: var(--oraliq-4);
}

.sharh-ortacha { font-size: var(--matn-h1); font-weight: 800; line-height: 1; }

.sharh-royxat { display: flex; flex-direction: column; gap: var(--oraliq-3); }

.sharh-karta {
  background: var(--yuza-karta);
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-kartochka);
  padding: var(--oraliq-4);
}

.sharh-bosh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oraliq-3);
  margin-bottom: var(--oraliq-2);
}

.sharh-ism { font-weight: 600; font-size: var(--matn-asosiy); }
.sharh-sana { font-size: var(--matn-kichik); color: var(--matn-uchinchi); }
.sharh-matn { margin: 0; font-size: var(--matn-asosiy); color: var(--matn-ikkinchi); line-height: 1.55; }

/* Baho tanlash (yulduzcha tugmalari) */
.baho-tanlash { display: flex; gap: 4px; }

.baho-tugma {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--kul-85);
  cursor: pointer;
  padding: 0;
}

.baho-tugma.faol { color: var(--sariq-50); }

/* ─────────────── 11. MOBIL PASTKI PANEL ─────────────── */
.mobil-panel { display: none; }

@media (max-width: 767px) {
  .mobil-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    inset: auto 0 0 0;
    height: 60px;
    z-index: 150;
    background: var(--yuza-karta);
    border-top: 1px solid var(--chegara-nozik);
  }

  .mobil-panel a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 10px;
    color: var(--matn-ikkinchi);
    text-decoration: none;
    position: relative;
  }

  .mobil-panel a.faol { color: var(--matn-qizil); }
  .mobil-panel svg { width: 20px; height: 20px; }

  /* Kontent panel tagida qolib ketmasin */
  body { padding-bottom: 60px; }

  .xabar-idishi { bottom: 76px; }
}

/* ─────────────── 12. QORONG'U REJIM TAYYORLIGI (T-3 uchun asos) ─────────────── */
/* Semantik qatlam tayyor — tema almashtirish shu blokni to'ldirish bilan
   ochiladi. Hozircha faqat rang sxemasi e'lon qilinadi (brauzer
   input/scrollbar'ni to'g'ri chizishi uchun). To'liq qorong'u rejim —
   T-3 topshirig'i, Dizayner DIZAYN.md 13-bandida spetsifikatsiya bergan. */
:root { color-scheme: light; }

/* ─────────────── 13. CHOP ETISH ─────────────── */
@media print {
  .mobil-panel,
  .xabar-idishi,
  .modal-qatlam,
  .yurak,
  .karta-cta { display: none !important; }
}


/* ─────────────── 14. HEADER SIG'DIRISH TUZATISHI ───────────────
   Do'kon ikonkalari qo'shilgach header 375–1024px oralig'ida sahifani
   gorizontal buzardi (smoke topdi). Yechim:
     - mobilda (<768px) ikonkalar YASHIRILADI — ular pastki panelda bor;
     - 768–1279px oralig'ida ikonkalar faqat belgi (matnsiz);
     - shahar tanlash qidiruv qatorida (u yerda joy bor).
   ------------------------------------------------------------------ */
.header-qidiruv-qator {
  display: flex;
  align-items: center;
  gap: var(--oraliq-3);
  padding-bottom: var(--oraliq-3);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .header-ong .dokon-ikonka { display: none; }
  .mobil-panel { grid-template-columns: repeat(5, 1fr); }
  .mobil-panel span { font-size: 9px; }
  .header-qidiruv button { padding: 0 var(--oraliq-3); }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .dokon-ikonka > span:not(.dokon-badge) { display: none; }
  .dokon-ikonka { min-width: 40px; height: 40px; }
}

/* 1024–1279px: to'liq header + do'kon ikonkalari + telefon matni sig'maydi.
   Telefon MATNI yashiriladi (qo'ng'iroq tugmasi qoladi) — 170px bo'shaydi. */
@media (max-width: 1439px) {
  /* 2026-09-08: navga 6-band qo'shilgach to'liq header 1280px'da ham
     sig'masdi (+50px toshish). Telefon MATNI 1440px'gacha yashiriladi;
     qo'ng'iroq TUGMASI qoladi, ya'ni funksiya yo'qolmaydi. */
  .header-telefon { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   MARKETPLEYS QATLAMI (v4.1) — 2026-09-08 qo'shimchalari
   hero aylanishi, mahsulot karusellari, lightbox, model almashtirish,
   virtual ko'rinish sahifasi
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Hero rasmlari almashganda yumshoq so'nish ─── */
.hero-vizual { transition: opacity 0.35s ease; }
.hero-vizual--sonmoqda { opacity: 0; }
.hero-vizual-rasm { display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero-vizual { transition: none; }
}

/* ─── Mahsulot karuseli (gorizontal, scroll-snap, o'q tugmalari) ─── */
.mahsulot-karusel-bolim { margin-bottom: var(--oraliq-6); }

.karusel-bosh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oraliq-3);
  margin-bottom: var(--oraliq-4);
}

.karusel-bosh h2 { margin: 0; font-size: var(--matn-h1); font-weight: 700; }

.karusel-boshqaruv { display: flex; gap: var(--oraliq-2); align-items: center; }

.karusel-oq {
  width: 40px;
  height: 40px;
  border: 1px solid var(--chegara-kuchli);
  border-radius: 50%;
  background: var(--yuza-karta);
  color: var(--matn-asosiy-rang);
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.karusel-oq:hover { background: var(--holat-hover); }
.karusel-oq:focus-visible { outline: 2px solid var(--chegara-fokus); outline-offset: 2px; }

.karusel-hammasi {
  font-size: var(--matn-asosiy);
  font-weight: 600;
  color: var(--matn-asosiy-rang);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--radius-yorliq);
}

.karusel-hammasi:hover { background: var(--holat-hover); }

.mahsulot-karusel {
  display: flex;
  gap: var(--oraliq-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px;
}

.mahsulot-karusel::-webkit-scrollbar { display: none; }

.mahsulot-karusel > .mahsulot-karta {
  flex: 0 0 200px;
  scroll-snap-align: start;
}

@media (max-width: 767px) {
  .mahsulot-karusel > .mahsulot-karta { flex-basis: 168px; }
  .karusel-bosh h2 { font-size: var(--matn-h2); }
}

/* ─── Lightbox (rasmga bosilganda katta ko'rinish) ─── */
.modal--lightbox .modal { width: min(96vw, 900px); }
.lightbox-rasm {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-rasm);
  background: var(--yuza-uchinchi);
}

/* ─── Model / rang almashtirish (joyida) ─── */
.model-royxat {
  display: flex;
  gap: var(--oraliq-2);
  flex-wrap: wrap;
  margin: var(--oraliq-3) 0;
}

.model-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--chegara-kuchli);
  border-radius: var(--radius-tugma);
  background: var(--yuza-karta);
  font-family: inherit;
  font-size: var(--matn-kichik);
  color: var(--matn-asosiy-rang);
  cursor: pointer;
  text-align: left;
  max-width: 220px;
}

.model-chip img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: var(--radius-yorliq);
  background: var(--yuza-uchinchi);
  flex: 0 0 auto;
}

.model-chip span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.model-chip b { display: block; font-size: var(--matn-kichik); margin-top: 2px; }
.model-chip.faol { border-color: var(--kul-15); border-width: 2px; background: var(--yuza-ikkilamchi); }
.model-chip:hover:not(.faol) { background: var(--holat-hover); }

.model-izoh { font-size: var(--matn-kichik); color: var(--matn-ikkinchi); margin: 0 0 var(--oraliq-2); }
.model-izoh-mayda { color: var(--matn-uchinchi); }

/* Boshqa modellar — 3-ustun ostida to'liq kenglikda gorizontal lenta */
.boshqa-modellar { margin-top: var(--oraliq-5); }
.boshqa-modellar .model-royxat {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: var(--oraliq-2);
}
.boshqa-modellar .model-chip { flex: 0 0 auto; }

/* Almashish paytida yumshoq so'nish */
#mahsulot-tarkib { transition: opacity 0.18s ease; }
#mahsulot-tarkib.almashmoqda { opacity: 0.35; }

/* ─── VIRTUAL KO'RINISH sahifasi ─── */
.virtual-tuzilma {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--oraliq-5);
  align-items: start;
}

@media (min-width: 960px) {
  .virtual-tuzilma { grid-template-columns: 1fr 320px; gap: var(--oraliq-6); }
  .virtual-panel { position: sticky; top: 88px; }
}

.virtual-sahna {
  position: relative;
  width: 100%;
  min-height: 360px;
  border-radius: var(--radius-kartochka);
  background: var(--yuza-uchinchi);
  border: 1px solid var(--chegara-nozik);
  overflow: hidden;
  user-select: none;
  touch-action: none;
}

.virtual-sahna-fon {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.virtual-bosh {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--oraliq-3);
  text-align: center;
  padding: var(--oraliq-5);
  color: var(--matn-ikkinchi);
}

.virtual-bosh svg { color: var(--matn-uchinchi); }

.virtual-mahsulot {
  position: absolute;
  left: 30%;
  top: 25%;
  width: 40%;
  cursor: grab;
  filter: drop-shadow(0 8px 16px rgba(20, 20, 23, 0.25));
  transform-origin: center;
}

.virtual-mahsulot:active { cursor: grabbing; }
.virtual-mahsulot img { width: 100%; height: auto; display: block; pointer-events: none; }
.virtual-mahsulot--teskari img { transform: scaleX(-1); }

.virtual-panel {
  background: var(--yuza-karta);
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-kartochka);
  padding: var(--oraliq-5);
  display: flex;
  flex-direction: column;
  gap: var(--oraliq-4);
}

.virtual-panel h2 { margin: 0; font-size: var(--matn-h4); }

.virtual-qadam {
  display: flex;
  gap: var(--oraliq-3);
  align-items: flex-start;
}

.virtual-qadam-raqam {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--yuza-quyuq);
  color: var(--matn-quyuq-ustida);
  font-size: var(--matn-kichik);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.virtual-qadam > div { flex: 1; min-width: 0; }
.virtual-qadam p { margin: 0 0 var(--oraliq-2); font-size: var(--matn-kichik); color: var(--matn-ikkinchi); }

.fayl-tugma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  border: 1px dashed var(--chegara-kuchli);
  border-radius: var(--radius-tugma);
  background: var(--yuza-ikkilamchi);
  font-family: inherit;
  font-size: var(--matn-asosiy);
  color: var(--matn-asosiy-rang);
  cursor: pointer;
}

.fayl-tugma:hover { background: var(--holat-hover); }
.fayl-tugma input { display: none; }

.virtual-mahsulot-royxat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--oraliq-2);
  max-height: 260px;
  overflow-y: auto;
}

.virtual-mahsulot-tugma {
  padding: 4px;
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-rasm);
  background: var(--yuza-karta);
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  color: var(--matn-ikkinchi);
  text-align: center;
}

.virtual-mahsulot-tugma img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.virtual-mahsulot-tugma.faol { border-color: var(--kul-15); border-width: 2px; }
.virtual-mahsulot-tugma span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.virtual-sozlama { display: flex; flex-direction: column; gap: var(--oraliq-2); }
.virtual-sozlama label { font-size: var(--matn-kichik); color: var(--matn-ikkinchi); display: flex; justify-content: space-between; }
.virtual-sozlama input[type="range"] { width: 100%; accent-color: var(--qizil-50); }

.virtual-tugmalar { display: flex; gap: var(--oraliq-2); flex-wrap: wrap; }
.virtual-tugmalar .tugma { flex: 1 1 auto; justify-content: center; min-height: 44px; }

.virtual-eslatma {
  font-size: var(--matn-kichik);
  color: var(--matn-uchinchi);
  margin: 0;
  line-height: 1.5;
}

/* virtual sahifasi 375-480px: grid bolasi min-width:auto tufayli kengayib
   ketardi (smoke topdi). Standart davo: grid bolalariga min-width:0, va
   yashirin fon rasmi [hidden] bo'lsa haqiqatan yashirin bo'lsin
   (.virtual-sahna-fon{display:block} [hidden]ni yengib qo'ygan edi). */
.virtual-tuzilma > * { min-width: 0; max-width: 100%; }
.virtual-sahna-fon[hidden] { display: none !important; }
.virtual-sahna { max-width: 100%; }

/* virtual ro'yxat tugmalari — uzun nom grid katagini kengaytirmasin */
.virtual-mahsulot-royxat > * { min-width: 0; }
.virtual-mahsulot-tugma { overflow: hidden; }
.virtual-mahsulot-tugma span { word-break: break-word; }


/* ═══════════════════════════════════════════════════════════════════════
   HEADER HAMBURGER CHEGARASI: 1023px -> 1199px (2026-09-08)
   -----------------------------------------------------------------------
   Sabab: navga 6-band ('Virtual ko'rinish') qo'shildi. To'liq nav endi
   ~600px, ustiga logo 113px + do'kon ikonkalari va CTA 347px = ~1060px.
   1024-1199px oynada bu sig'masdi va brauzer nav so'zlarini ikki qatorga
   o'rab tashlardi ('Bosh / sahifa') — ega aynan shuni ko'rsatdi.
   Yechim: shu oraliqda ham hamburger-rejim. To'liq header >=1200px da.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {

  /* Header 1023px'gacha hamburger-rejimda: to'liq nav + telefon + CTA
     jami ~934px joy talab qiladi va 768-949px oynalarda sahifani
     gorizontal buzadi (vizual audit №1, XATO-1). Planshetda mobil-menyu
     — keng tarqalgan, xavfsiz pattern; 1024px'dan to'liq header. */
  .header-nav {
    position: fixed;
    top: 65px;
    left: 0;
    right: 0;
    background: var(--oq);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--oraliq-3) var(--konteyner-padding);
    box-shadow: var(--soya-orta);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--tezlik);
  }

  .header-nav.ochiq {
    max-height: 400px;
    padding-bottom: var(--oraliq-4);
  }

  .header-nav a {
    width: 100%;
    padding: var(--oraliq-3) 0;
    border-bottom: 1px solid var(--chegara);
  }

  .header-nav a.faol::after {
    display: none;
  }

  /* Telefon-matn havolasi yashiriladi — "Qo'ng'iroq qilish" tugmasi
     bilan takrorlanadi va joy yetishmaydi. CTA sifatida tugma qoladi. */
  .header-telefon {
    display: none;
  }

  .header-ong {
    gap: var(--oraliq-3);
  }

  /* "Qo'ng'iroq qilish" tugmasi matnsiz, faqat ikonkali doira —
     joy tejaladi, tel: havolasi to'liq ishlayveradi. */
  .header-ong .tugma-kichik {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .header-ong .tugma-kichik span {
    display: none;
  }

  .hamburger-tugma {
    display: flex;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   TUZATISHLAR (v4.2) — 2026-09-08, ega ko'rsatgan kamchiliklar
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. Nav so'zlari HECH QACHON ikki qatorga o'ralmasin ───
   "Bosh / sahifa", "Virtual / ko'rinish" ko'rinishi — ega ko'rsatgan
   birinchi kamchilik. Endi so'z butun qoladi; joy yetmasa 1199px
   qoidasi hamburgerga o'tkazadi. */
.karusel-hammasi,
.dokon-ikonka > span:not(.dokon-badge) {
  white-space: nowrap;
}

/* Karusel sarlavhasi mobilda: sarlavha + "Hammasini ko'rish" + 2 o'q
   bitta qatorga sig'masdi va sahifani 53px gorizontal buzardi (o'lchandi).
   Yechim: qator o'raladi, o'q tugmalari esa mobilda umuman kerak emas —
   u yerda karusel barmoq bilan suriladi. */
@media (max-width: 767px) {
  .karusel-bosh {
    flex-wrap: wrap;
    row-gap: var(--oraliq-2);
  }

  .karusel-oq { display: none; }
}

/* nowrap FAQAT gorizontal (desktop) navda kerak. Mobil dropdownda u
   nav qutisini eng uzun so'z kengligiga cho'zib, sahifani 53px
   gorizontal buzardi (o'lchandi) — u yerda o'ralish normal holat. */
@media (min-width: 1200px) {
  .header-nav a { white-space: nowrap; }
}

@media (max-width: 1199px) {
  .header-nav {
    max-width: 100%;
    box-sizing: border-box;
  }
  .header-nav a { white-space: normal; }
}

/* ─── 2. Yopishqoq header endi FAQAT bitta qator ───
   Qidiruv qatori headerdan tashqariga chiqarildi (HTMLda) — skroll
   qilganda tepada 117px emas, 64px turadi. Ega: "tepada bir narsa
   turibdi, buni yo'qotish kerak". */
.qidiruv-qatori {
  background: var(--yuza-karta);
  border-bottom: 1px solid var(--chegara-nozik);
}

.qidiruv-qatori .header-qidiruv-qator {
  padding-top: var(--oraliq-3);
}

/* Yopishqoq header ostiga tushib qolmasin — sahifa ichidagi
   havolalarga o'tganda sarlavha ko'rinib tursin. */
html {
  scroll-padding-top: 88px;
}

/* ─── 3. VIRTUAL KO'RINISH sahifasi ─── */

/* Kirish matni va sarlavha — chetga yopishmasin, o'qish qulay bo'lsin */
.virtual-kirish {
  max-width: 68ch;
  margin: 0 auto var(--oraliq-6);
  text-align: center;
}

.virtual-tuzilma {
  max-width: 1120px;
  margin-inline: auto;
}

/* Sahna bo'sh turganda ham juda katta bo'shliq qoldirmasin */
.virtual-sahna {
  min-height: 300px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.virtual-sahna-fon {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

/* Tugmalar cho'zilib ketmasin — matniga qarab o'lchansin */
.virtual-tugmalar {
  gap: var(--oraliq-2);
}

.virtual-tugmalar .tugma {
  flex: 0 1 auto;
  min-height: 44px;
  padding-inline: var(--oraliq-5);
}

.virtual-sozlama .virtual-tugmalar .tugma {
  flex: 1 1 40%;
  padding-inline: var(--oraliq-3);
  font-size: var(--matn-kichik);
}

/* Panel ichidagi ro'yxat baland bo'lib ketmasin */
.virtual-mahsulot-royxat {
  max-height: 220px;
}

@media (max-width: 959px) {
  .virtual-sahna { aspect-ratio: 3 / 2; min-height: 240px; }
  .virtual-kirish { text-align: left; }
}

/* ─── 4. HERO: rasm bilan birga MATN ham almashadi ───
   Ega: "yozuvga qarab rasm o'zgarsin" — endi hero'dagi rasm to'plami
   almashganda, ostidagi qator ham o'sha mahsulot turkumiga moslashadi. */
.hero-shior {
  display: block;
  min-height: 1.6em;
  margin: 0 0 var(--oraliq-4);
  font-size: var(--matn-asosiy);
  font-weight: 600;
  color: var(--matn-asosiy-rang);
  transition: opacity 0.35s ease;
}

.hero-shior--sonmoqda { opacity: 0; }

.hero-shior b {
  color: var(--matn-qizil);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .hero-shior { transition: none; }
}

/* ─── 5. ANIMATSIYA TURLARI ───
   Ega: "bir xil payt yondan chiqishi kerak, bir xil payt pastdan".
   Qoidalar saqlanadi (motion.md): faqat transform/opacity, kaskad
   qadami 70ms, yuqori chegara 560ms, prefers-reduced-motion hurmat. */
.reveal--past  { transform: translateY(20px); }
.reveal--chap  { transform: translateX(-28px); }
.reveal--ong   { transform: translateX(28px); }
.reveal--katta { transform: scale(0.94); }

/* .reveal.in (0,2,0) yuqoridagi bir sinfli qoidalarni (0,1,0) yengadi —
   shuning uchun barcha yo'nalishlar bir xil "joyiga qo'nish"ga tushadi. */
.reveal--chap.in,
.reveal--ong.in {
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--katta.in {
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media print {
  .reveal--past,
  .reveal--chap,
  .reveal--ong,
  .reveal--katta {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Yon tomondan chiquvchi animatsiya idishdan chiqib ketmasin.
   overflow-x: clip — scroll konteyner YARATMAYDI (hidden dan farqi),
   shuning uchun sticky bolalar buzilmaydi, lekin toshish sahifani
   kengaytirmaydi. */
.qadam-grid,
.kategoriya-grid,
.brend-grid,
.filial-grid,
.hero-ichki {
  overflow-x: clip;
}

/* ─── Virtual kompozit v2: soya, burilish, akslantirish ─── */
.virtual-soya {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,.40) 0%, rgba(0,0,0,.14) 55%, rgba(0,0,0,0) 78%);
  filter: blur(5px);
  pointer-events: none;
  z-index: 1;
}

.virtual-mahsulot {
  z-index: 2;
  --burchak: 0deg;
  transform: rotate(var(--burchak));
  transition: transform var(--tezlik-tez);
}

.virtual-mahsulot.surilmoqda { transition: none; }
.virtual-mahsulot--teskari img { transform: scaleX(-1); }

/* Yoqilgan holatdagi tugma — bosilgan ko'rinishda */
.virtual-tugmalar .tugma.faol {
  background: var(--qizil-97);
  border: 1px solid var(--qizil-50);
  color: var(--matn-qizil);
}

.virtual-sozlama label {
  display: flex;
  justify-content: space-between;
  font-size: var(--matn-kichik);
  color: var(--matn-ikkinchi);
  margin-top: var(--oraliq-2);
}

@media (prefers-reduced-motion: reduce) {
  .virtual-mahsulot { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   [hidden] HAR DOIM YASHIRIN BO'LSIN
   -------------------------------------------------------------------
   HTML'dagi `hidden` atributi brauzerda atigi `display:none` degan
   ODDIY qoida — istalgan `display:flex/grid/block` uni yengib qo'yadi.
   Aynan shu sabab "Xona rasmi hali yuklanmagan" belgisi rasm
   yuklangandan keyin ham mahsulot ustida ko'rinib turdi (o'lchandi:
   hidden=true, lekin kengligi > 0).
   Bitta qoida bilan butun saytda yopamiz.
   ═══════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   FILIAL HOLATLARI (2026-09-09, ega qarori)
   -------------------------------------------------------------------
   Ikkita holat mijozga tushunarli ko'rsatiladi:
     • hali ochilmagan filial — nomi qoladi, ma'lumotlari yo'q
     • manzili hali kiritilmagan — ega admin ekrani orqali to'ldiradi
   Ranglar B1 da qo'shilgan holat tokenlaridan (AA dan o'tgan).
   ═══════════════════════════════════════════════════════════════════ */
.filial-yorliq {
  display: inline-block;
  margin: 0 0 var(--oraliq-3);
  padding: 4px 10px;
  border-radius: var(--radius-yorliq);
  font-size: var(--matn-kichik);
  font-weight: 600;
  line-height: 1.3;
}

.filial-yorliq--tez {
  background: var(--yolda-fon);
  color: var(--yolda-matn);
}

.filial-yorliq--toliqmas {
  background: var(--ogoh-fon);
  color: var(--ogoh-matn);
}

.filial-izoh {
  margin: 0;
  font-size: var(--matn-kichik);
  color: var(--matn-ikkinchi);
  line-height: 1.5;
}

/* Hali ochilmagan filial — ko'rinadi, lekin diqqatni tortmaydi */
.filial-karta--yopiq {
  background: var(--yuza-ikkilamchi);
  border-style: dashed;
}

.filial-karta--yopiq h3 { color: var(--matn-ikkinchi); }

/* ═══════════════ K12 — QIDIRUV OCHILUVCHI RO'YXATI (TZ 02 §12) ═══════════════ */
.header-qidiruv--k12 { position: relative; }

.header-qidiruv--k12 input[type="search"]:focus {
  border-color: var(--qizil-50);
  box-shadow: var(--fokus);
  outline: none;
}

.qd-royxat {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-width: 614px;
  z-index: 200;
  background: var(--yuza-karta);
  border: 1px solid var(--chiziq);  /* YANGILANDI T0: eski #DDE1E7 -> yangi til chizig'i */
  border-radius: 0 0 14px 14px;
  box-shadow: 0 18px 44px rgba(20, 20, 23, 0.16);
  padding: var(--oraliq-2) 0;
  max-height: 70vh;
  overflow-y: auto;
}

.qd-bolim + .qd-bolim,
.qd-barcha { border-top: 1px solid var(--chiziq); }  /* YANGILANDI T0: eski #EEF0F3 */
.qd-bolim + .qd-bolim { margin-top: 6px; padding-top: 6px; }

.qd-sarlavha {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; color: var(--matn-ikkinchi);
  letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 14px;
}
.qd-tozala {
  border: 0; background: none; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--matn-qizil);
  text-transform: none; letter-spacing: 0;
}
.qd-tozala:hover { text-decoration: underline; }

.qd-qator {
  display: flex; align-items: center; gap: var(--oraliq-3);
  padding: 8px 14px; text-decoration: none;
  color: var(--matn-asosiy-rang); cursor: pointer;
}
.qd-qator:hover,
.qd-qator.qd-faol { background: var(--holat-hover); }

.qd-ik { color: var(--matn-ikkinchi); flex: 0 0 auto; }
.qd-matn { flex: 1 1 auto; font-size: var(--matn-asosiy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qd-matn b { font-weight: 700; }
.qd-soni { flex: 0 0 auto; font-size: var(--matn-kichik); color: var(--matn-ikkinchi); font-style: normal; }

.qd-rasm {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--yuza-uchinchi); border-radius: var(--r-kichik);  /* YANGILANDI T0:
    9px shkaladan tashqari edi -> eng yaqin yangi pog'ona 10px (TZ §5 B.2, TAXMIN) */
}
.qd-rasm img { width: 100%; height: 100%; object-fit: contain; }
.qd-nom {
  flex: 1 1 auto; font-size: 13.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qd-nom b { font-weight: 700; }
.qd-narx { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; font-style: normal; }

.qd-barcha {
  justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--matn-qizil);
  margin-top: 6px; padding-top: 12px;
}

.qd-bosh-holat { padding: 16px 14px; font-size: var(--matn-asosiy); color: var(--matn-ikkinchi); text-align: center; }

@media (max-width: 767px) {
  .qd-royxat { max-width: none; }
}

/* ═══════════════ HERO — QORA AYLANADIGAN BANNER (TZ 04 §1) ═══════════════ */
/* Eski och wordmark hero o'rniga: chapda to'q banner karuseli, o'ngda
   "Bugungi taklif" ustuni. Ega talabi: qora fon, oq matn, aylanuvchi. */
.hero {
  background: var(--yuza-sahifa);
  min-height: 0;
  display: block;
  color: var(--matn-asosiy-rang);
  padding-top: var(--oraliq-4);
}
.hero-tor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: var(--oraliq-4);
  align-items: stretch;
}

/* — Chap: banner karuseli — */
.hero-banner { min-width: 0; }
.hero-karusel {
  display: flex;
  gap: 0;                 /* to'liq kenglikdagi slaydlar — gap scroll hisobini buzadi */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-blok);  /* KONTEYNER burchagi yagona manba — */
}
.hero-karusel::-webkit-scrollbar { display: none; }

/* ega qarori 14.09: chetdagi "ochiq bo'shliq" sababi — har bir slayd
   O'ZINING radiusiga ega edi, shu sabab o'rtadagi slayd ekranga
   to'liq kelganda ham uning chap/o'ng burchagi yumaloqlanib, orqadagi
   sahifa foni bir tirqish bo'lib ko'rinardi. Endi radius FAQAT
   konteynerda (yuqorida) — slayd o'zi to'g'ri burchakli to'rtburchak,
   overflow:hidden esa glow/rasmni o'z ichida kesib turadi. */
.hero-slayd {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
  min-height: 292px;
  background: linear-gradient(115deg, #16181D 0%, #22262E 58%, #2C313A 100%);
  display: flex;
  align-items: center;
  padding: 0 44px;
  text-decoration: none;
}
.hero-slayd-glow {
  position: absolute; left: -60px; top: -80px; width: 420px; height: 420px;
  background: radial-gradient(circle at center, rgba(230, 0, 18, 0.28) 0%, rgba(230, 0, 18, 0) 66%);
  pointer-events: none;
}
.hero-slayd-matn { position: relative; z-index: 2; max-width: 430px; }
.hero-slayd-yorliq {
  display: inline-block; background: var(--sariq-50); color: var(--kul-15);
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  padding: 5px 10px; border-radius: var(--radius-yorliq);
}
.hero-slayd h2 {
  color: var(--matn-teskari); font-size: 40px; font-weight: 800; line-height: 1.04;
  letter-spacing: -0.032em; margin: 14px 0 10px;
}
.hero-slayd p {
  color: rgba(255, 255, 255, 0.68); font-size: 14.5px; line-height: 1.4;
  margin: 0 0 18px; max-width: 430px;
}
.hero-slayd-tugma {
  display: inline-flex; align-items: center; gap: 6px;
  height: 46px; padding: 0 22px; border-radius: var(--radius-tugma);
  background: var(--qizil-50); color: var(--matn-teskari); font-size: 14.5px; font-weight: 700;
}
.hero-slayd-rasm {
  position: absolute; right: 30px; bottom: -18px;
  width: 218px; height: 330px; object-fit: contain; z-index: 1;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.45));
}

.hero-nuqtalar { display: flex; justify-content: center; gap: 6px; margin-top: var(--oraliq-3); }
.hero-nuqta {
  width: 24px; height: 4px; border: 0; padding: 0; border-radius: 999px;
  background: var(--kul-85); cursor: pointer;
}
.hero-nuqta--faol { background: var(--qizil-50); }

/* — O'ng: "Bugungi taklif" + "Ertaga uyingizda" — */
.hero-yon { display: flex; flex-direction: column; gap: var(--oraliq-4); }
.hero-taklif {
  background: var(--yuza-karta);
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-kartochka);
  padding: 18px;
}
.hero-taklif-sarlavha {
  display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--matn-ikkinchi); margin-bottom: 12px;
}
.hero-imtiyoz { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hero-imtiyoz li { display: flex; flex-direction: column; gap: 2px; padding-left: 22px; position: relative; }
.hero-imtiyoz li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px;
  border-radius: 999px; background: var(--yashil-95);
  box-shadow: inset 0 0 0 2px var(--yashil-45);
}
.hero-imtiyoz b { font-size: 13.5px; color: var(--matn-asosiy-rang); }
.hero-imtiyoz span { font-size: 12px; color: var(--matn-ikkinchi); }
.hero-taklif-havola {
  display: inline-block; margin-top: 14px; font-size: 12.5px; font-weight: 700;
  color: var(--matn-qizil); text-decoration: none;
}
.hero-taklif-havola:hover { text-decoration: underline; }
.hero-yetkazish {
  background: var(--kul-15); color: var(--matn-teskari);
  border-radius: var(--radius-kartochka); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 3px;
}
.hero-yetkazish b { font-size: 14px; }
.hero-yetkazish span { font-size: 12px; color: rgba(255, 255, 255, 0.68); }

/* — Mobil: bir ustun, banner tepada, taklif ostida — */
@media (max-width: 899px) {
  .hero-tor { grid-template-columns: 1fr; }
  .hero-slayd { min-height: 210px; padding: 0 22px; }
  .hero-slayd h2 { font-size: 24px; margin: 10px 0 8px; }
  .hero-slayd p { font-size: 13px; margin-bottom: 14px; max-width: 60%; }
  .hero-slayd-rasm { width: 130px; height: 190px; right: 10px; bottom: -8px; }
  .hero-slayd-tugma { height: 42px; padding: 0 18px; font-size: 13.5px; }
}
@media (max-width: 479px) {
  .hero-slayd p { max-width: 100%; }
  .hero-slayd-rasm { opacity: 0.32; }
}

/* ═══════════════ KIRISH / KABINET (test rejimi) ═══════════════ */
.test-kod {
  margin: 0 0 var(--oraliq-4);
  padding: 10px 14px;
  border-radius: var(--radius-maydon);
  background: var(--nasiya-fon);
  color: var(--nasiya-matn);
  font-size: var(--matn-kichik);
  text-align: center;
}
.test-kod b { font-size: var(--matn-h3); letter-spacing: 0.3em; color: var(--matn-asosiy-rang); }

.kabinet-bosh {
  display: flex; align-items: center; gap: var(--oraliq-3);
  margin-bottom: var(--oraliq-5);
}
.kabinet-avatar {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--radius-chip);
  display: grid; place-items: center;
  background: var(--kul-15); color: var(--matn-teskari); font-size: var(--matn-h3); font-weight: 800;
}
.kabinet-sarlavha { margin: 0 0 var(--oraliq-3); font-size: var(--matn-h4); }
.kabinet-royxat { display: flex; flex-direction: column; gap: var(--oraliq-2); }
.kabinet-buyurtma {
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-maydon);
  padding: 12px 14px;
}
.kabinet-buyurtma-bosh { display: flex; align-items: center; justify-content: space-between; }
.kabinet-holat {
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: var(--radius-yorliq);
  background: var(--yolda-fon); color: var(--yolda-matn);
}
.kabinet-buyurtma-meta { margin-top: 4px; font-size: var(--matn-kichik); color: var(--matn-ikkinchi); }

/* ═══════════════════════════════════════════════════════════════════
   YANGI KARKAS (Dizayner TZ 03 + Main.dc.html) — desktop
   Xizmat qatori · header (Katalog tugmasi + qidiruv) · kategoriya qatori
   Eski .header-nav / .header-telefon / alohida .qidiruv-qatori o'rniga.
═══════════════════════════════════════════════════════════════════ */

/* ── 1. Xizmat qatori (eng tepa, 36px) ── */
.xizmat-qatori {
  background: var(--yuza-karta);
  border-bottom: 1px solid var(--chiziq);  /* YANGILANDI T0: eski #E4E7EC */
  font-size: 12px;
  color: var(--kul-58);
}
.xizmat-ichki {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.xizmat-chap, .xizmat-ong { display: flex; align-items: center; gap: 20px; }
.xizmat-qatori a { color: var(--kul-58); text-decoration: none; }
.xizmat-qatori a:hover { color: var(--matn-asosiy-rang); }

/* ── 2. Header (72px) — Katalog tugmasi + qidiruv header ICHIDA ── */
.sayt-header { background: var(--yuza-karta); }
.header-ichki {
  height: 72px;
  display: flex;
  align-items: center;
  gap: var(--oraliq-4);
}
.header-ichki .logo { font-size: 22px; font-weight: 800; letter-spacing: -0.025em; color: var(--matn-asosiy-rang); text-decoration: none; flex: 0 0 auto; }

.katalog-tugma {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  height: 44px; padding: 0 16px;
  background: var(--qizil-96); color: var(--matn-qizil);
  border-radius: var(--radius-tugma); font-weight: 700; font-size: 13.5px;
  text-decoration: none; border: 0; cursor: pointer;
}
.katalog-tugma:hover { background: var(--qizil-90); }

/* Qidiruv — header ichida, o'ngida qizil kvadrat lupa */
.header-ichki .header-qidiruv {
  flex: 1 1 auto; display: flex; height: 44px; max-width: 560px; gap: 0; position: relative;
}
.header-ichki .header-qidiruv input[type="search"] {
  flex: 1 1 auto; height: 44px; padding: 0 15px; font-size: 13.5px;
  border: 1px solid var(--chiziq); border-right: 0;  /* YANGILANDI T0: --kul-88 aniqlanmagan
    token edi (grep bilan topildi, fallbacksiz — border butunlay ko'rinmas edi) */
  border-radius: var(--radius-tugma) 0 0 var(--radius-tugma);
  background: var(--yuza-karta); color: var(--matn-asosiy-rang); min-width: 0;
}
.header-ichki .header-qidiruv input[type="search"]:focus { outline: none; border-color: var(--qizil-50); box-shadow: none; }
.header-ichki .header-qidiruv button[type="submit"] {
  flex: 0 0 52px; width: 52px; height: 44px; display: grid; place-items: center;
  background: var(--qizil-50); border: 0;
  border-radius: 0 var(--radius-tugma) var(--radius-tugma) 0; cursor: pointer;
}
.header-ichki .header-qidiruv button[type="submit"] svg { stroke: #fff; }

.header-bosh { flex: 1 1 auto; }

/* O'ng ikonkalar — ustun (ikonka + kichik yozuv) */
.header-ong { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.header-ong .dokon-ikonka {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11px; color: var(--kul-58); text-decoration: none;
  background: none; border: 0; cursor: pointer; position: relative; padding: 0;
}
.header-ong .dokon-ikonka svg { width: 20px; height: 20px; stroke: var(--matn-asosiy-rang); }
.header-ong .dokon-badge {
  position: absolute; top: -5px; right: 1px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--qizil-50); color: var(--matn-teskari); border-radius: 999px;
  font-size: 10px; font-weight: 700; display: grid; place-items: center;
}

/* ── 3. Kategoriya qatori (header ostida, 44px) ── */
.kategoriya-qatori { background: var(--yuza-karta); border-top: 1px solid var(--chiziq); }  /* YANGILANDI T0: eski #EEF0F3 */
.kategoriya-ichki {
  height: 44px; display: flex; align-items: center; gap: 24px;
  font-size: 13.5px; overflow-x: auto; scrollbar-width: none;
}
.kategoriya-ichki::-webkit-scrollbar { display: none; }
.kategoriya-ichki a { color: var(--matn-asosiy-rang); text-decoration: none; white-space: nowrap; }
.kategoriya-ichki a:hover { color: var(--matn-qizil); }
.kategoriya-ichki a.faol { font-weight: 700; color: var(--matn-qizil); }
.kategoriya-barcha { margin-left: auto; color: var(--kul-58) !important; }

/* ── 5. Footer — OQ, bir qatorli (Dizayner) ── */
.sayt-footer--yangi {
  margin-top: 28px; background: var(--yuza-karta);
  border-top: 1px solid var(--chiziq); color: var(--kul-58);  /* YANGILANDI T0: eski #E4E7EC */
}
.footer-yangi-ichki {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 0; gap: 20px; flex-wrap: wrap;
}
.footer-yangi-logo { font-size: 20px; font-weight: 800; letter-spacing: -0.025em; color: var(--matn-asosiy-rang); }
.footer-yangi-havola { display: flex; gap: 26px; font-size: 13.5px; flex-wrap: wrap; }
.footer-yangi-havola a { color: var(--kul-58); text-decoration: none; }
.footer-yangi-havola a:hover { color: var(--matn-qizil); }
.footer-yangi-tel { font-size: 17px; font-weight: 700; color: var(--matn-asosiy-rang); text-decoration: none; }

/* ── Mobil: header soddalaydi (logo + qidiruv + menyu). Xizmat/kategoriya
      qatorlari va o'ng ikonkalar yashiriladi — pastki tab bar ularni beradi. ── */
@media (max-width: 899px) {
  .xizmat-qatori, .kategoriya-qatori { display: none; }
  .katalog-tugma { display: none; }
  .header-ichki { gap: 10px; height: 60px; }
  .header-ichki .header-qidiruv { max-width: none; height: 40px; }
  .header-ichki .header-qidiruv input[type="search"] { height: 40px; }
  .header-ichki .header-qidiruv button[type="submit"] { height: 40px; flex-basis: 44px; width: 44px; }
  .header-ong { gap: 8px; }
  .header-ong .dokon-ikonka { display: none; }   /* pastki panel bor */
  .footer-yangi-ichki { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ── Ishonch qatori (Dizayner TZ 04 §4) ── */
.ishonch-qatori {
  margin-top: 28px; background: var(--yuza-karta); border-radius: var(--radius-blok);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 20px 0;
}
.ishonch-katak {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  padding: 0 12px;
}
.ishonch-katak:not(:last-child) { border-right: 1px solid var(--chiziq); }  /* YANGILANDI T0: eski #EEF0F3 */
.ishonch-katak svg { flex: 0 0 auto; width: 24px; height: 24px; stroke: var(--matn-qizil); }
.ishonch-katak b { display: block; font-size: 13.5px; font-weight: 700; }
.ishonch-katak span { font-size: 12px; color: var(--matn-ikkinchi); }
@media (max-width: 767px) {
  .ishonch-qatori { grid-template-columns: repeat(2, 1fr); gap: 8px 0; padding: 16px 0; }
  .ishonch-katak:nth-child(2) { border-right: 0; }
  .kategoriya-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 479px) {
  .kategoriya-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════ KATALOG — CHAP FILTR PANELI (Dizayner TZ 05) ═══════════════ */
.katalog-tartib { display: grid; grid-template-columns: 248px 1fr; gap: 20px; align-items: start; }
.katalog-kontent { min-width: 0; }
.katalog-kontent .mahsulot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.filtr-yon {
  background: var(--yuza-karta); border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-14); padding: 4px 16px 16px; position: sticky; top: 80px;
}
.filtr-yon-bosh { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 4px; }
.filtr-yon-sarlavha { font-size: 15px; font-weight: 800; }
.filtr-tozala { border: 0; background: none; color: var(--matn-qizil); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.filtr-tozala:hover { text-decoration: underline; }
.filtr-blok { border-top: 1px solid var(--chiziq); padding: 14px 0; }  /* YANGILANDI T0: eski #EEF0F3 */
.filtr-blok-sarlavha { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
.filtr-narx { display: flex; gap: 8px; }
.filtr-narx input {
  flex: 1 1 0; min-width: 0; height: 36px; padding: 0 10px; font-size: 12.5px;
  /* YANGILANDI T0: --kul-88 aniqlanmagan token edi (border ko'rinmas edi);
     radius 9px shkaladan tashqari -> eng yaqin 10px (TZ §5 B.2, TAXMIN) */
  border: 1px solid var(--chiziq); border-radius: var(--r-kichik);
  background: var(--yuza-karta); color: var(--matn-asosiy-rang);
}
.filtr-narx input:focus { outline: none; border-color: var(--qizil-50); }
.filtr-royxat { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }
.filtr-royxat label { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13px; cursor: pointer; }
.filtr-royxat input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--qizil-50); flex: 0 0 auto; }
.filtr-royxat .filtr-soni { margin-left: auto; color: var(--matn-ikkinchi); font-size: 12px; }
.filtr-yana { align-self: flex-start; margin-top: 6px; border: 0; background: none; color: var(--matn-qizil); font-size: 12.5px; font-weight: 600; cursor: pointer; }

.filtr-ochish { display: none; }
.filtr-fon { display: none; }
.filtr-yopish { display: none; }
.filtr-korish { display: none; }
@media (max-width: 899px) {
  .katalog-tartib { grid-template-columns: 1fr; }
  .katalog-kontent .mahsulot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtr-ochish {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px;
    border: 1.5px solid var(--chegara-kuchli); border-radius: var(--radius-tugma);
    background: var(--yuza-karta); font-weight: 700; font-size: 13.5px; cursor: pointer; margin-bottom: 12px;
  }

  /* Filtr paneli = pastdan chiqadigan varaq (bottom-sheet) */
  .filtr-yon {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    max-height: 84vh;
    overflow-y: auto;
    margin: 0;
    border-radius: 20px 20px 0 0;
    border: none;
    box-shadow: 0 -10px 34px rgba(20, 20, 23, 0.20);
    transform: translateY(100%);
    transition: transform 0.28s ease;
    z-index: 200;
    padding: 4px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .filtr-yon.ochiq { transform: translateY(0); }
  .filtr-yon-bosh {
    position: sticky; top: 0;
    background: var(--yuza-karta);
    padding: 16px 0 10px;
    z-index: 1;
  }
  .filtr-yopish {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px; margin-left: 8px;
    border: none; border-radius: 999px; cursor: pointer;
    background: var(--yuza-ikkilamchi); color: var(--matn-asosiy-rang);
  }
  .filtr-korish {
    display: block; width: 100%; height: 48px; margin-top: 14px;
    border: none; border-radius: var(--radius-tugma); cursor: pointer;
    background: var(--qizil-50); color: var(--matn-teskari); font-size: 14.5px; font-weight: 700;
  }
  .filtr-fon {
    display: block;
    position: fixed; inset: 0;
    background: rgba(20, 20, 23, 0.45);
    z-index: 199;
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .filtr-fon.ochiq { opacity: 1; visibility: visible; }
  body.sheet-ochiq { overflow: hidden; }
}
@media (max-width: 479px) {
  .katalog-kontent .mahsulot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════════
   MAHSULOT SAHIFASI — 3 ustun (Dizayner MahsulotSahifasi.dc.html, TZ 06)
   galereya · info · sotib-olish kartasi (sticky) -> tablar -> to'plam
   ═══════════════════════════════════════════════════════════════════════ */
.mahsulot-tartib {
  display: grid;
  gap: var(--oraliq-5);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 316px;
  grid-template-areas:
    "galereya info     karta"
    "modellar modellar karta"
    "tablar   tablar   karta";
  align-items: start;
}
.mahsulot-tartib > * { min-width: 0; }
.mahsulot-galereya { grid-area: galereya; }
.mahsulot-info { grid-area: info; }
.sotib-karta { grid-area: karta; align-self: start; }
.mahsulot-tartib > .boshqa-modellar { grid-area: modellar; margin-top: 0; }
.mahsulot-tartib > .mahsulot-tablar-obertka { grid-area: tablar; margin-top: 0; }

@media (min-width: 1080px) {
  .sotib-karta { position: sticky; top: 16px; align-self: start; }
}
@media (max-width: 1079px) {
  .mahsulot-tartib {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas:
      "galereya karta"
      "info     karta"
      "modellar karta"
      "tablar   tablar";
  }
}
@media (max-width: 767px) {
  .mahsulot-tartib {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "galereya"
      "karta"
      "info"
      "modellar"
      "tablar";
    gap: var(--oraliq-4);
  }
}

/* -- 2-ustun: info -- */
.mahsulot-info .info-brend {
  display: inline-block;
  font-size: var(--matn-kichik);
  font-weight: 700;
  color: var(--matn-qizil);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--oraliq-2);
}
.mahsulot-info h1 {
  font-size: 1.4rem;
  line-height: 1.24;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--oraliq-3);
}
.info-reyting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oraliq-3);
  font-size: var(--matn-kichik);
  color: var(--matn-ikkinchi);
  margin-bottom: var(--oraliq-3);
}
.info-reyting .ir-baho {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--qora);
}
.info-reyting .ir-havola {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--matn-qizil);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.info-reyting .ir-kod { color: var(--matn-uchinchi); }
.info-qoldiq {
  display: inline-block;
  font-size: var(--matn-kichik);
  font-weight: 600;
  color: var(--matn-qizil);
  margin-bottom: var(--oraliq-3);
}

/* Asosiy xususiyatlar mini-karta (nuqtali qatorlar) */
.asosiy-xus {
  margin-top: var(--oraliq-4);
  background: var(--oq);
  border: 1px solid var(--chegara-nozik);
  border-radius: 14px;
  padding: var(--oraliq-4);
}
.asosiy-xus .ax-sarlavha {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: var(--oraliq-2);
}
.ax-qator {
  display: flex;
  align-items: baseline;
  gap: var(--oraliq-2);
  padding: 6px 0;
  font-size: var(--matn-kichik);
}
.ax-qator .ax-nom { color: var(--matn-ikkinchi); white-space: nowrap; }
.ax-qator .ax-chiziq { flex-grow: 1; border-bottom: 1px dotted var(--chegara-kuchli); transform: translateY(-3px); }
.ax-qator .ax-qiymat { font-weight: 600; text-align: right; }
.ax-yana {
  background: none; border: none; padding: 0; margin-top: var(--oraliq-2);
  cursor: pointer; font: inherit; font-size: var(--matn-kichik);
  font-weight: 600; color: var(--matn-qizil);
}

/* -- 3-ustun: sotib-olish kartasi -- */
.sotib-karta {
  background: var(--oq);
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-kartochka);
  padding: 18px 16px;
}
.sotib-karta .sotib-narx {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--qora);
  line-height: 1.1;
}
.sotib-karta .sotib-eski {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oraliq-2);
  margin-top: 6px;
}
.sotib-eski .se-narx { font-size: 0.85rem; color: var(--matn-uchinchi); text-decoration: line-through; }
.sotib-eski .se-foiz { font-size: 0.85rem; font-weight: 700; color: var(--matn-qizil); }
.sotib-eski .se-tejam { font-size: var(--matn-kichik); font-weight: 600; color: var(--matn-tejam-yashil); }

.sotib-nasiya {
  margin-top: var(--oraliq-4);
  background: var(--nasiya-fon);  /* YANGILANDI T0: eski #FFF7E8 endi token */
  border-radius: 12px;
  padding: 12px;
}
.sotib-nasiya .sn-bosh {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--matn-kichik);
  color: var(--nasiya-matn);
}
.sotib-nasiya .sn-hisob {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.75rem; font-weight: 700; color: var(--nasiya-matn);
  text-decoration: underline;
}
.sotib-nasiya .sn-oylik { font-size: 1.15rem; font-weight: 800; margin-top: 2px; color: var(--qora); }
.sotib-nasiya .sn-oylik span { font-size: var(--matn-kichik); font-weight: 600; }
.sotib-nasiya .sn-izoh { font-size: 0.72rem; color: var(--nasiya-matn); margin-top: 2px; }
.nasiya-toliq { margin-top: var(--oraliq-3); }

.sotib-karta .sk-savat {
  width: 100%;
  margin-top: var(--oraliq-4);
  height: 50px;
  font-size: 0.95rem;
}
.sotib-karta .sk-bir-bosish {
  width: 100%;
  margin-top: 9px;
  height: 46px;
  background: var(--oq);
  border: 1.5px solid var(--chegara-kuchli);
  border-radius: var(--radius-tugma);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--qora);
  cursor: pointer;
  transition: border-color var(--tezlik), background var(--tezlik);
}
.sotib-karta .sk-bir-bosish:hover { border-color: var(--qora); background: var(--yuza-ikkilamchi); }
.sotib-karta .sk-yurak {
  width: 100%;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--matn-kichik);
  font-weight: 600;
  color: var(--matn-ikkinchi);
}
.sotib-karta .sk-yurak svg { stroke: var(--matn-qizil); }
.sotib-karta .sk-yurak[aria-pressed="true"] svg { fill: var(--qizil-50); stroke: var(--qizil-50); }
.sotib-karta .sk-virtual {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: var(--matn-kichik);
  font-weight: 600;
  color: var(--matn-ikkinchi);
}
.sotib-karta .sk-virtual:hover { color: var(--qora); }
.sotib-karta .sotib-yoq {
  margin-top: var(--oraliq-3);
  font-size: var(--matn-kichik);
  color: var(--matn-ikkinchi);
  line-height: 1.5;
}

.sotib-ishonch { margin-top: var(--oraliq-4); }
.sotib-ishonch .si-qator {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--chegara-nozik);
}
.sotib-ishonch .si-qator svg { flex-shrink: 0; margin-top: 1px; stroke: var(--matn-qizil); }
.sotib-ishonch .si-bosh { font-size: var(--matn-kichik); font-weight: 700; line-height: 1.35; }
.sotib-ishonch .si-izoh { font-size: 0.75rem; color: var(--matn-ikkinchi); line-height: 1.4; }
.sotib-sotuvchi {
  margin-top: 10px;
  border-top: 1px solid var(--chegara-nozik);
  padding-top: 10px;
  font-size: 0.75rem;
  color: var(--matn-ikkinchi);
}
.sotib-sotuvchi b { color: var(--qora); }

/* -- TABLAR -- */
.mahsulot-tablar-obertka { margin-top: var(--oraliq-6); }
.mahsulot-tablar {
  display: flex;
  gap: var(--oraliq-5);
  border-bottom: 1px solid var(--chegara-nozik);
  overflow-x: auto;
  scrollbar-width: none;
}
.mahsulot-tablar::-webkit-scrollbar { display: none; }
.mahsulot-tablar .mt-tab {
  flex-shrink: 0;
  height: 46px;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--matn-ikkinchi);
  transition: color var(--tezlik), border-color var(--tezlik);
}
.mahsulot-tablar .mt-tab.faol {
  font-weight: 700;
  color: var(--qora);
  border-bottom-color: var(--qizil-50);
}
.mt-panellar { padding-top: var(--oraliq-5); }
.mt-panel .tavsif-matn { color: var(--matn-ikkinchi); line-height: 1.6; max-width: 720px; }
.tavsif-kartalar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--oraliq-3);
  margin-top: var(--oraliq-4);
}
.tavsif-kartalar .tk-karta {
  background: var(--yuza-ikkilamchi);
  border-radius: 12px;
  padding: 14px;
}
.tavsif-kartalar .tk-nom { font-size: 0.85rem; font-weight: 700; margin-bottom: 4px; }
.tavsif-kartalar .tk-qiymat { font-size: var(--matn-kichik); color: var(--matn-ikkinchi); line-height: 1.5; }

.xus-jadval {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--oraliq-5);
  max-width: 900px;
}
.xus-qator {
  display: grid;
  grid-template-columns: minmax(120px, 210px) 1fr;
  gap: var(--oraliq-4);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: var(--matn-kichik);
}
.xus-qator.zebra { background: var(--yuza-yumshoq); }
.xus-qator .xus-nom { color: var(--matn-ikkinchi); }
.xus-qator .xus-qiymat { font-weight: 600; }
@media (max-width: 640px) {
  .xus-jadval { grid-template-columns: 1fr; }
}

.yet-blok { margin-bottom: var(--oraliq-5); max-width: 720px; }
.yet-blok h3 { font-size: 0.95rem; margin-bottom: var(--oraliq-2); }
.yet-blok p { color: var(--matn-ikkinchi); line-height: 1.6; }

/* -- BIRGA OLSANGIZ ARZON -- */
.birga-arzon {
  margin-top: var(--oraliq-6);
  background: var(--oq);
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-kartochka);
  padding: var(--oraliq-5);
}
.birga-arzon h2 { font-size: 1.1rem; margin-bottom: var(--oraliq-4); }
.ba-qator {
  display: flex;
  align-items: center;
  gap: var(--oraliq-3);
  flex-wrap: wrap;
}
.ba-karta {
  width: 150px;
  text-align: center;
  color: inherit;
}
.ba-karta .ba-rasm {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--yuza-uchinchi);
  display: grid;
  place-items: center;
}
.ba-karta .ba-rasm img { width: 100%; height: 100%; object-fit: contain; }
.ba-karta .ba-nom {
  font-size: 0.78rem;
  line-height: 1.35;
  margin-top: 8px;
  min-height: 34px;
  color: var(--matn-ikkinchi);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ba-karta .ba-narx { font-size: 0.9rem; font-weight: 800; margin-top: 2px; }
.ba-plus { font-size: 1.4rem; font-weight: 300; color: var(--matn-uchinchi); }
.ba-yakun {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--oraliq-3);
  margin-top: var(--oraliq-5);
  padding-top: var(--oraliq-4);
  border-top: 1px solid var(--chegara-nozik);
}
.ba-yakun .ba-jami { display: flex; flex-direction: column; }
.ba-yakun .ba-jami span { font-size: var(--matn-kichik); color: var(--matn-ikkinchi); }
.ba-yakun .ba-jami b { font-size: 1.25rem; font-weight: 800; }
@media (max-width: 480px) {
  .ba-karta { width: calc(50% - 20px); }
  .ba-hammasi { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CHECKOUT — Savat -> Rasmiylashtirish -> Tasdiq (Dizayner TZ 07)
   4-qadamli stepper + forma(1fr) + xulosa(336px) + tasdiq ekrani
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Stepper ── */
.checkout-qadam {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0 0 var(--oraliq-5);
  padding: 14px 18px;
  background: var(--oq);
  border: 1px solid var(--chegara-nozik);
  border-radius: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.checkout-qadam::-webkit-scrollbar { display: none; }
.checkout-qadam .cq-band {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.checkout-qadam .cq-belgi {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--kul-90);
  color: var(--matn-ikkinchi);
}
.checkout-qadam .cq-matn {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--matn-ikkinchi);
  white-space: nowrap;
}
.checkout-qadam .cq-faol .cq-belgi { background: var(--qizil-50); color: var(--matn-teskari); }
.checkout-qadam .cq-faol .cq-matn { color: var(--qora); font-weight: 700; }
.checkout-qadam .cq-tugadi .cq-belgi { background: var(--yashil-45); color: var(--matn-teskari); }
.checkout-qadam .cq-tugadi .cq-matn { color: var(--qora); font-weight: 600; }
.checkout-qadam .cq-chiziq {
  flex: 1 1 20px;
  min-width: 16px;
  height: 1.5px;
  background: var(--chiziq);  /* YANGILANDI T0: --kul-88 aniqlanmagan edi, fallback #E4E7EC har doim ishlatilardi */
  margin: 0 12px;
}
.checkout-qadam .cq-chiziq--tugadi { background: var(--yashil-45); }
@media (max-width: 560px) {
  .checkout-qadam { padding: 12px; }
  .checkout-qadam .cq-matn { display: none; }
  .checkout-qadam .cq-faol .cq-matn { display: inline; }
  .checkout-qadam .cq-chiziq { margin: 0 6px; }
}

/* ── Rasmiylashtirish: forma + xulosa ── */
.checkout-tuzilma {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: var(--oraliq-5);
  align-items: start;
}
@media (max-width: 900px) {
  .checkout-tuzilma { grid-template-columns: minmax(0, 1fr); }
}

.checkout-blok {
  background: var(--oq);
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-kartochka);
  padding: 18px 20px;
  margin-bottom: var(--oraliq-4);
}
.checkout-blok-bosh {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--oraliq-4);
}
.checkout-blok-bosh .cb-raqam {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--qizil-97);
  color: var(--matn-qizil);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.checkout-blok-bosh h2 { font-size: 1rem; font-weight: 800; margin: 0; }

.checkout-maydonlar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--oraliq-3);
}
.checkout-maydonlar .maydon--keng { grid-column: 1 / -1; }
.maydon-ixtiyoriy { color: var(--matn-uchinchi); font-weight: 400; }
@media (max-width: 520px) {
  .checkout-maydonlar { grid-template-columns: 1fr; }
}

.checkout-variantlar { display: grid; gap: 10px; }
.checkout-variant {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1.5px solid var(--chegara-kuchli);
  border-radius: 12px;
  padding: 13px 14px;
  cursor: pointer;
  transition: border-color var(--tezlik), box-shadow var(--tezlik);
}
.checkout-variant input { position: absolute; opacity: 0; pointer-events: none; }
.checkout-variant .cv-radio {
  width: 19px;
  height: 19px;
  border-radius: 999px;
  border: 1.5px solid var(--chegara-kuchli);
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--tezlik);
}
.checkout-variant input:checked ~ .cv-radio {
  border-color: var(--qizil-50);
  background: var(--qizil-50);
}
.checkout-variant input:checked ~ .cv-radio::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: var(--oq);
}
.checkout-variant:has(input:checked) {
  border-color: var(--qizil-50);
  box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.10);
}
.checkout-variant .cv-ikon { color: var(--matn-qizil); display: flex; flex-shrink: 0; }
.checkout-variant .cv-matn { display: flex; flex-direction: column; min-width: 0; }
.checkout-variant .cv-matn b { font-size: 0.86rem; font-weight: 700; }
.checkout-variant .cv-matn span { font-size: var(--matn-kichik); color: var(--matn-ikkinchi); }
.checkout-variant .cv-ong { margin-left: auto; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.checkout-variant .cv-bepul { color: var(--matn-tejam-yashil); }

.checkout-manzil {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--oraliq-3);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--matn-kichik);
  font-weight: 600;
  color: var(--matn-qizil);
}
.checkout-manzil svg { stroke: var(--matn-qizil); }

/* ── Xulosa (o'ng) ── */
.checkout-xulosa {
  background: var(--oq);
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-kartochka);
  padding: 18px 20px;
  position: sticky;
  top: 16px;
}
.checkout-xulosa h2 { font-size: 1rem; font-weight: 800; margin: 0 0 var(--oraliq-3); }
.checkout-xulosa .xk-royxat {
  border-bottom: 1px solid var(--chegara-nozik);
  padding-bottom: var(--oraliq-3);
  margin-bottom: var(--oraliq-3);
  max-height: 260px;
  overflow-y: auto;
}
.xk-qator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.xk-qator .xk-rasm {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--yuza-uchinchi);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.xk-qator .xk-rasm img { width: 100%; height: 100%; object-fit: contain; }
.xk-qator .xk-nom {
  flex-grow: 1;
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.xk-qator .xk-soni { display: block; font-size: 0.72rem; color: var(--matn-ikkinchi); margin-top: 2px; }
.xk-qator .xk-narx { font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.checkout-berish { width: 100%; height: 50px; margin-top: var(--oraliq-3); font-size: 0.95rem; }

/* ── TASDIQ sahifasi ── */
.td-muvaffaqiyat {
  background: var(--oq);
  border: 1px solid var(--chegara-nozik);
  border-radius: 18px;
  padding: 32px 24px;
  text-align: center;
}
.td-belgi {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--yashil-95);
  color: var(--yashil-45);
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.td-muvaffaqiyat h1 { margin: 16px 0 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; }
.td-raqam { font-size: 0.9rem; color: var(--matn-ikkinchi); margin-top: 8px; }
.td-raqam b { color: var(--qora); }
.td-tugmalar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

.td-blok {
  background: var(--oq);
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-kartochka);
  padding: 22px 24px;
  margin-top: var(--oraliq-4);
}

.td-timeline { display: flex; align-items: flex-start; }
.td-timeline .td-tl-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 25%;
  text-align: center;
}
.td-timeline .td-tl-belgi {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--oq);
  border: 2px solid var(--kul-85);
  display: grid;
  place-items: center;
  color: var(--matn-teskari);
}
.td-timeline .td-tl-belgi.tugadi { background: var(--yashil-45); border-color: var(--yashil-45); }
.td-timeline .td-tl-matn b { display: block; font-size: 0.8rem; font-weight: 700; }
.td-timeline .td-tl-matn span { font-size: 0.72rem; color: var(--matn-ikkinchi); margin-top: 2px; }
.td-timeline .td-tl-chiziq {
  flex-grow: 1;
  height: 2px;
  background: var(--kul-85);
  margin: 14px 4px 0;
}
.td-timeline .td-tl-chiziq.tugadi { background: var(--yashil-45); }
@media (max-width: 640px) {
  .td-timeline { overflow-x: auto; scrollbar-width: none; }
  .td-timeline .td-tl-band { width: auto; min-width: 96px; }
  .td-timeline .td-tl-chiziq { min-width: 24px; }
}

.td-tafsilot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--oraliq-4);
  margin-top: var(--oraliq-4);
  align-items: start;
}
@media (max-width: 720px) {
  .td-tafsilot { grid-template-columns: 1fr; }
}
.td-karta {
  background: var(--oq);
  border: 1px solid var(--chegara-nozik);
  border-radius: var(--radius-kartochka);
  padding: 20px;
}
.td-karta h2 { font-size: 1rem; font-weight: 800; margin: 0 0 var(--oraliq-3); }
.td-mahsulot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--chegara-nozik);
}
.td-mahsulot .td-nom { font-size: 0.84rem; }
.td-mahsulot .td-soni { display: block; font-size: 0.75rem; color: var(--matn-ikkinchi); margin-top: 2px; }
.td-mahsulot .td-narx { font-size: 0.84rem; font-weight: 700; white-space: nowrap; }
.td-jami {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--oraliq-3);
  padding-top: var(--oraliq-3);
  font-size: 1.05rem;
  font-weight: 800;
}
.td-satr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--chegara-nozik);
  font-size: 0.84rem;
}
.td-satr:last-child { border-bottom: none; }
.td-satr span:first-child { color: var(--matn-ikkinchi); }
.td-satr span:last-child { font-weight: 600; text-align: right; }

/* ═══ MOBIL STICKY CTA — mahsulot & savat (Dizayner MobilMahsulot/MobilSavat) ═══ */
.mobil-sotib-cta, .mobil-savat-cta { display: none; }
@media (max-width: 767px) {
  .mobil-sotib-cta, .mobil-savat-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0; right: 0; bottom: 60px;
    z-index: 149;
    background: var(--oq);
    border-top: 1px solid var(--chegara-nozik);
    padding: 9px 16px;
    box-shadow: 0 -4px 16px rgba(20, 20, 23, 0.06);
  }
  .mobil-sotib-cta .msc-narx,
  .mobil-savat-cta .msc-narx {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex-shrink: 0;
  }
  .msc-narx b { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; }
  .msc-narx .msc-nasiya,
  .mobil-savat-cta .msc-narx span { font-size: 0.68rem; color: var(--matn-ikkinchi); }
  .msc-tugma {
    flex: 1 1 auto;
    height: 46px;
    max-width: 62%;
    margin-left: auto;
  }
  /* Kontent ikkala panel (CTA 62px + tab 60px) tagida qolmasin */
  body.mobil-cta-bor { padding-bottom: 124px; }
  body.mobil-cta-bor .xabar-idishi { bottom: 138px; }
}

/* ======================================================================
   PREMIUM RASM SAHNASI (ega so'rovi, 16.09)
   ----------------------------------------------------------------------
   Ega yuborgan namunalar (Samsung Bespoke, Haier, Premier, Xpert) bitta
   formulaga asoslanadi: mahsulot TO'LIQ ko'rinadi, yumshoq sahnada
   "turadi", ostida nozik soya bor.

   Muammo: `.mahsulot-karta-rasm img` da `object-fit: cover` edi — u
   mahsulotning chetlarini QIRQIB tashlaydi (muzlatgichning tepasi yoki
   televizorning yon tomoni kesilardi). Premium afishalarda hech qachon
   bunday bo'lmaydi.

   Yechim: `contain` (butun mahsulot ko'rinadi) + yumshoq radial sahna
   fon + "yerga qo'nish" soyasi. Bu 272 ta mahsulotning HAMMASIGA
   bir zumda ta'sir qiladi va hech qanday yangi rasm talab qilmaydi.
   AI bilan rasm yasash alohida bosqich (ARZONCHI-RASM-AI-PROMPT.md).
   ====================================================================== */

.mahsulot-karta-rasm {
  background:
    radial-gradient(120% 95% at 50% 12%, #FFFFFF 0%, rgba(255, 255, 255, 0) 65%),
    linear-gradient(170deg, #FBFCFD 0%, #F0F2F6 100%);
}

/* Mahsulot endi qirqilmaydi — butunlay ko'rinadi. */
.mahsulot-karta-rasm img {
  object-fit: contain;
  padding: 10% 12% 13%;
  /* Mahsulot "yerda turgandek" ko'rinishi uchun nozik soya. */
  filter: drop-shadow(0 10px 14px rgba(16, 18, 27, 0.16));
  transition: transform var(--tezlik);
  /* Katalog rasmlarining aksariyatida OQ fon "pishirib" qo'yilgan — sahna
     ustida u oq to'rtburchak bo'lib ko'rinadi. `multiply` oq piksellarni
     ko'rinmas qiladi, ya'ni mahsulot qirqib olingandek chiqadi. Rasm fonida
     oq bo'lmasa ham zarar yo'q — sahna deyarli oq. */
  mix-blend-mode: multiply;
}

/* Sahna ostidagi yumshoq "yer" soyasi — afishalardagidek. */
.mahsulot-karta-rasm::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 8%;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(16, 18, 27, 0.20) 0%, rgba(16, 18, 27, 0) 72%);
  pointer-events: none;
}

/* Kartaga olib borilganda mahsulot biroz yaqinlashadi. */
.mahsulot-karta:hover .mahsulot-karta-rasm img { transform: scale(1.045); }

/* Harakatni kamaytirishni so'raganlarga hurmat. */
@media (prefers-reduced-motion: reduce) {
  .mahsulot-karta-rasm img,
  .mahsulot-karta:hover .mahsulot-karta-rasm img { transition: none; transform: none; }
}

/* ======================================================================
   TEPA BOSHQARUVLAR + HOVER TILI  (ega so'rovi, 16.09.2026 19:00)
   ----------------------------------------------------------------------
   Ega ko'rsatmasi (skrinshot bilan):
     1) "Shaharni tanlang" tugmasi juda oddiy/xunuk edi — chunki unga
        HECH QANDAY uslub berilmagan edi (grep: .xizmat-shahar butun
        loyihada topilmadi), brauzerning kulrang standart tugmasi
        chiqib turardi. Endi — premium pill.
     2) Kategoriya qatori oddiy matn havolalar edi — endi alohida
        "pilla"lar: odatda bosiq, sichqoncha borganda oldinga chiqadi.
     3) Umumiy hover tili — bitta izchil qoida (pastda "HOVER TILI").

   Bu blok ATAYLAB faylning oxirida: hech bir eski qoida o'chirilmagan,
   faqat ustidan yoziladi (bir xil xususiyat, keyingi qoida g'olib).
   ====================================================================== */

/* ── 1. LOKATSIYA TUGMASI (.xizmat-shahar) ─────────────────────────────
   Xizmat qatori 36px -> 44px: tugmaning bosish maydoni 32px bo'lishi
   uchun. Qator balandroq bo'lgani sahifa tartibiga ta'sir qilmaydi —
   .sayt-header sticky top:0, ya'ni bu qator ustidan siljib ketadi. */
.xizmat-ichki {
  height: 44px;
}

.xizmat-shahar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px 0 10px;
  margin: 0;
  border-radius: var(--radius-chip);          /* pill — tepa qatorining yagona "tugmasi" */
  /* EGA KO'RSATMASI (26.09): "orqa foni qizil, yozuvlari oq, lokatsiya
     ikonkasi oq, bordalari ishtirok ishib chiqqan; kursorga borganda
     yozuvlari qizil, ikonka qizil, orqa foni oq".
     KONTRAST: oq matn #E60012 ustida 4.80:1 — AA (4.5) dan o'tadi.
     Chegara bir daraja to'qroq qizil (--qizil-40) — tugma qirrasi
     oq sarlavha fonida aniq ajralib tursin. */
  border: 1.5px solid var(--qizil-40);
  background: var(--qizil-50);
  color: var(--oq);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: var(--soya-mayda);
  transition: background var(--tezlik), border-color var(--tezlik),
    box-shadow var(--tezlik), transform var(--tezlik), color var(--tezlik);
}

/* Joy ikonkasi ta'kidlangan: brend qizil + biroz kattaroq.
   (HTML da width/height="13" atributi bor — CSS uni bosib o'tadi.) */
.xizmat-shahar svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  stroke: var(--oq);
  transition: transform var(--tezlik), stroke var(--tezlik);
}

/* Bu tanlov tugmasi ekani ko'rinib tursin — kichik chevron.
   HTML ga tegilmaydi, shuning uchun ::after bilan chiziladi. */
.xizmat-shahar::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: 2px;
  border-right: 1.6px solid var(--oq);
  border-bottom: 1.6px solid var(--oq);
  transform: translateY(-1.5px) rotate(45deg);
  transition: border-color var(--tezlik), transform var(--tezlik);
}

/* Hover — to'liq teskari: oq fon, qizil matn va ikonka.
   Qizil matn oq ustida 6.26:1 (--qizil-45). */
.xizmat-shahar:hover,
.xizmat-shahar:focus-visible {
  background: var(--oq);
  border-color: var(--qizil-45);
  color: var(--matn-qizil);
  transform: translateY(-1px);
  box-shadow: var(--soya-suzuvchi);
}

.xizmat-shahar:hover svg,
.xizmat-shahar:focus-visible svg { stroke: var(--matn-qizil); transform: translateY(-1px); }
.xizmat-shahar:hover::after,
.xizmat-shahar:focus-visible::after { border-color: var(--matn-qizil); }

/* Bosilganda — haqiqatan bosilgandek (ichki soya, pastga tushadi). */
.xizmat-shahar:active {
  transform: translateY(1px);
  box-shadow: var(--bosilgan);
  background: var(--qizil-40);
  border-color: var(--qizil-40);
  color: var(--oq);
}
.xizmat-shahar:active svg { stroke: var(--oq); }
.xizmat-shahar:active::after { border-color: var(--oq); }

.xizmat-shahar:focus-visible {
  outline: none;
  box-shadow: var(--fokus-tugma);             /* oq + qizil qo'sh halqa */
}

/* ── 2. KATEGORIYA PILLALARI (.kategoriya-ichki a) ─────────────────────
   Ega: "alohida button'larga keltirib chiq… opacity'si kamroq bo'lsin,
   sichqoncha borganda chiqib kelib opacity'si yuqori bo'lsin".

   KONTRAST HISOBI: pasaytirilgan opacity matnni o'qib bo'lmas qilmasligi
   kerak. Shuning uchun pilla matni eng to'q rang (--matn-asosiy-rang
   #0E0E10). opacity .68 da u oq sahifa ustida ~#565658 ga aylanadi,
   pilla foni esa ~#F6F4F4 ga — kontrast ~6.6:1 (AA 4.5:1 dan yuqori).
   Agar kelajakda opacity pasaytirilsa, kontrastni QAYTA hisoblang.

   Qator balandligi 44px -> 52px: pilla 32px + ko'tarilish 2px +
   soya ~6px sig'ishi uchun. .kategoriya-ichki da overflow-x:auto bor,
   ya'ni overflow-y ham `auto` bo'lib qoladi va joy yetmasa soya
   QIRQILADI — shu sabab qator kengaytirildi. */
.kategoriya-ichki {
  height: 52px;
  gap: 8px;                                   /* eski 24px — endi pillalar orasidagi oraliq */
  font-size: 13px;
}

.kategoriya-ichki a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  flex: 0 0 auto;
  border-radius: var(--radius-chip);
  border: 1px solid transparent;
  background: var(--yuza-kulrang);            /* #F2F0F0 — yumshoq yuza */
  color: var(--matn-asosiy-rang);
  font-weight: 600;
  opacity: 0.68;                              /* odatda bosiq, xotirjam */
  transition: opacity var(--tezlik), transform var(--tezlik),
    box-shadow var(--tezlik), background var(--tezlik),
    border-color var(--tezlik), color var(--tezlik);
}

/* Hover VA klaviatura fokusi — bir xil ko'rinish (kirish imkoniyati). */
.kategoriya-ichki a:hover,
.kategoriya-ichki a:focus-visible {
  opacity: 1;
  transform: translateY(-2px);                /* "oldinga chiqib keladi" */
  background: var(--yuza-karta);
  border-color: var(--qizil-90);
  color: var(--matn-qizil);
  box-shadow: var(--soya-suzuvchi);
  outline: none;
}

/* Faol (joriy) kategoriya — doim to'liq ko'rinadi, qizil tint.
   #C4000F / #FFF1F2 = 5.7:1 */
.kategoriya-ichki a.faol {
  opacity: 1;
  background: var(--qizil-97);
  border-color: var(--qizil-90);
  color: var(--matn-qizil);
  font-weight: 700;
}

/* "Barcha toifalar" — ramkali "ghost" pilla, boshqalardan farq qiladi.
   Eski qoidada `color: var(--kul-58) !important` bor: u .68 opacity
   bilan ~2.8:1 ga tushardi (AA dan past). Shuning uchun bu yerda to'q
   matnga majburan qaytariladi — ~7.3:1. */
.kategoriya-ichki a.kategoriya-barcha {
  background: transparent;
  border-color: var(--chegara-kuchli);
  color: var(--matn-asosiy-rang) !important;
}

.kategoriya-ichki a.kategoriya-barcha:hover,
.kategoriya-ichki a.kategoriya-barcha:focus-visible {
  background: var(--qizil-97);
  border-color: var(--qizil-90);
  color: var(--matn-qizil) !important;
}

/* ── 3. HOVER TILI — izchil qoida ──────────────────────────────────────
   Butun saytda bitta grammatika bo'lsin (ega: "bittasi sakraydi,
   boshqasi rang o'zgartiradi degan tarqoqlik bo'lmasin"):
     • KARTOCHKA (mahsulot, filial, kategoriya)  -> translateY(-4px) + soya
     • TUGMA / CHIP / PILLA                      -> translateY(-2px) + soya
     • IKONKA-TUGMA (header)                     -> translateY(-1px) + fon
     • MATN HAVOLA                               -> faqat rang (qizil)
   Tezlik hamma joyda --tezlik. Ko'tarilish 4px dan oshmaydi.
   Quyida FAQAT yetishmayotgan joylar to'ldirilgan — mavjud hover'lar
   (mahsulot/filial/kategoriya kartochkasi, .tugma-asosiy) tegilmagan. */

/* Katalog tugmasi (header) — tugma darajasi */
.katalog-tugma {
  transition: background var(--tezlik), transform var(--tezlik), box-shadow var(--tezlik);
}
.katalog-tugma:hover {
  background: var(--qizil-90);
  transform: translateY(-2px);
  box-shadow: var(--soya-suzuvchi);
}
.katalog-tugma:active { transform: translateY(0); box-shadow: none; }

/* Header ikonkalari — eng nozik daraja (ular kichkina, sakramasin) */
.dokon-ikonka {
  transition: background var(--tezlik-tez), transform var(--tezlik-tez), color var(--tezlik-tez);
}
.dokon-ikonka:hover { background: var(--holat-hover); transform: translateY(-1px); }
.dokon-ikonka:active { transform: translateY(0); }

/* Kartochkadagi "Savatga" CTA — .tugma-asosiy bilan bir xil grammatika */
.karta-cta {
  transition: background var(--tezlik-tez), transform var(--tezlik-tez), box-shadow var(--tezlik-tez);
}
.karta-cta:hover {
  background: var(--tugma-asosiy-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(230, 0, 18, 0.28);
}
.karta-cta:active {
  background: var(--tugma-asosiy-pressed);
  transform: translateY(1px);
  box-shadow: var(--bosilgan);
}
.karta-cta[disabled]:hover,
.karta-cta:disabled:hover { transform: none; box-shadow: none; }

/* Ikkilamchi tugma va "Yana ko'rsatish" — tugma darajasi */
.tugma-ikkilamchi:hover {
  transform: translateY(-2px);
  box-shadow: var(--soya-mayda);
}
.tugma-ikkilamchi:active { transform: translateY(1px); box-shadow: var(--bosilgan); }

.yana-tugma {
  transition: background var(--tezlik-tez), border-color var(--tezlik-tez),
    transform var(--tezlik-tez), box-shadow var(--tezlik-tez);
}
.yana-tugma:hover {
  background: var(--holat-hover);
  border-color: var(--kul-65);
  transform: translateY(-2px);
  box-shadow: var(--soya-mayda);
}
.yana-tugma:active { transform: translateY(0); box-shadow: none; }

/* Chiplar (filtr, brend) — pilla darajasi */
.filtr-pill {
  transition: background var(--tezlik), color var(--tezlik),
    border-color var(--tezlik), transform var(--tezlik), box-shadow var(--tezlik);
}
.filtr-pill:hover { transform: translateY(-2px); }

.brend-chip {
  transition: color var(--tezlik), border-color var(--tezlik),
    transform var(--tezlik), box-shadow var(--tezlik);
}
.brend-chip:hover {
  transform: translateY(-2px);
  border-color: var(--chegara-kuchli);
  box-shadow: var(--soya-mayda);
}

/* Matn havolalari — faqat rang, lekin SILLIQ (eski qoidalarda
   transition yo'q edi, rang "sakrab" o'zgarardi) */
.xizmat-qatori a,
.footer-yangi-havola a,
.footer-ustun a,
.breadcrumb a { transition: color var(--tezlik); }

/* ── 4. HARAKATNI KAMAYTIRISH (prefers-reduced-motion) ─────────────────
   Ko'rinish (opacity, rang, soya) qoladi — faqat SILJISH o'chadi. */
@media (prefers-reduced-motion: reduce) {
  .xizmat-shahar,
  .xizmat-shahar svg,
  .xizmat-shahar::after,
  .kategoriya-ichki a,
  .katalog-tugma,
  .dokon-ikonka,
  .karta-cta,
  .tugma-ikkilamchi,
  .yana-tugma,
  .filtr-pill,
  .brend-chip { transition: none; }

  .xizmat-shahar:hover,
  .xizmat-shahar:active,
  .xizmat-shahar:hover svg,
  .kategoriya-ichki a:hover,
  .kategoriya-ichki a:focus-visible,
  .katalog-tugma:hover,
  .dokon-ikonka:hover,
  .karta-cta:hover,
  .karta-cta:active,
  .tugma-ikkilamchi:hover,
  .tugma-ikkilamchi:active,
  .yana-tugma:hover,
  .filtr-pill:hover,
  .brend-chip:hover { transform: none; }
}

/* =======================================================================
   5. UMID FREYMVORKI — MOSLASHTIRILGAN QATLAM        (Dizayner, 21.09.2026)
   =======================================================================
   Manba: "Freymvork Umid'a" hujjati. Freymvorkdan USUL olindi, RANG va
   STEK olinmadi:
     - 2-bo'lim "faqat Next.js"  -> QO'LLANMADI. Arzonchi sof HTML/CSS/JS
       (mobil ilova shu statik fayllarni ichiga oladi, file:// da ham
       ochilishi shart). Bu qoida ega bilan kelishilgan.
     - 4-bo'lim palitrasi (#0A0E2E navy, #7B5CFF binafsha) -> KO'CHIRILMADI.
       Arzonchi brendi qizil/qora, tokenlar yuqorida tayyor. Bu yerda
       faqat mavjud var(--...) ishlatiladi, yangi #hex yozilmaydi.
     - 0.1 bilingv, 0.5 mobil, 0.7 uslub, 4-bo'lim usuli (chuqurlik,
       tipografika, radius ierarxiyasi), 7-bo'lim QA -> QO'LLANDI.

   Blok ATAYLAB faylning eng oxirida: birorta eski qoida o'chirilmagan,
   faqat ustidan yoziladi (bir xil xususiyat -> keyingi qoida g'olib).
   ======================================================================= */

/* -- 5.1 BILINGV — UZ/RU YASHIRISH (freymvork 0.1) --------------------
   Bitta HTML, ikkita matn to'plami:
       <span data-uz>Narx</span><span data-ru>Cena</span>
   Tilni <html data-til="uz|ru"> atributi boshqaradi (til.js saqlaydi).

   DIQQAT — UCHTA HOLAT, UCHALASI HAM TO'G'RI ISHLASHI SHART:
     data-til yo'q   -> UZ ko'rinadi, RU YASHIRIN  (asosiy til — UZ)
     data-til="uz"   -> UZ ko'rinadi, RU yashirin
     data-til="ru"   -> RU ko'rinadi, UZ yashirin

   Atribut yo'q holati alohida hal qilingan: agar faqat ikkita
   html[data-til=...] qoidasi yozilsa, til.js ishga tushgunicha (yoki
   JS o'chiq bo'lsa) IKKALA til birdan chiqib, sahifa buzuq ko'rinadi.
   Shuning uchun html:not([data-til="ru"]) — RU sukut bo'yicha yopiq.

   DIQQAT — faqat display:none ishlatiladi, teskari display:inline YO'Q:
   aks holda <div data-ru> yoki <p data-ru> blok elementi inline
   bo'lib qolib, tartib buziladi.

   DIQQAT — IKKITA ATRIBUT NOMI. Dasturchi index.html da vaqtincha
   zaxira qoida qoldirgan va u `data-til` bilan birga `data-lang` ni ham
   qo'llagan ("til.js qaysi atributni tanlasa ham ishlasin"). Rasmiy
   qoida — MANA SHU; ikkala nomni ham qamraydi, aks holda til.js
   `data-lang` ni tanlasa, index.html dan boshqa 17 sahifada IKKALA til
   birdan chiqib ketardi. index.html dagi zaxira blokni endi o'chirsa
   bo'ladi (natija o'zgarmaydi). */
html[data-til="uz"] [data-ru],
html[data-lang="uz"] [data-ru],
html:not([data-til="ru"]):not([data-lang="ru"]) [data-ru] { display: none; }
html[data-til="ru"] [data-uz],
html[data-lang="ru"] [data-uz] { display: none; }

/* DIQQAT — BO'SHLIQ MUAMMOSI (brauzerda o'lchandi, 21.09).
   display:none QUTINI olib tashlaydi, lekin juftlik orasidagi BO'SHLIQ
   matn tuguni (whitespace) HTML da qoladi:
       <span data-uz>Narx</span> <span data-ru>Cena</span>:
   -> ekranda "Narx :" (ortiqcha bo'shliq). Buni CSS matn tugunini
   o'chirib hal qila olmaydi. Ikki yechim bor:
     1) HTML da juftlikni bo'shliqsiz yozish (TAVSIYA ETILADI):
        <span data-uz>Narx</span><span data-ru>Cena</span>
     2) juftlikni .til-juft ichiga olish — flex konteyner bo'shliq
        tugunlarini butunlay e'tiborsiz qoldiradi.
   .til-juft FAQAT qisqa yorliq/tugma matni uchun: inline-flex
   ichidagi matn satrga bo'linmaydi, uzun jumlaga yaramaydi. */
.til-juft {
  display: inline-flex;
  align-items: baseline;
}

/* -- 5.2 TIL ALMASHTIRGICH (segmentli boshqaruv) ----------------------
   HAQIQIY BELGILASH (Dasturchi index.html:752 da shunday yozgan):
     <div class="til-almashtirgich" role="group" aria-label="Til / Язык">
       <button type="button" data-til-almashtir data-til="uz" lang="uz">UZ</button>
       <button type="button" data-til-almashtir data-til="ru" lang="ru">RU</button>
     </div>

   NEGA BU YERDA HAM KERAK: Dasturchi uslubni index.html ning ichki
   <style> blokiga yozgan — ya'ni u FAQAT bosh sahifada ishlaydi.
   Almashtirgich esa hamma sahifada bo'ladi. Shu qoida bo'lmasa
   katalog/savat/kabinet... da almashtirgich BEZAKSIZ ikki tugma bo'lib
   qolardi. Ko'rinish ataylab bosh sahifadagi bilan BIR XIL (qora
   "tanga" + oq matn) — 18 sahifada bitta ko'rinish.

   Faol holat uch usulda tanib olinadi:
     1) aria-pressed="true"  — til.js ulangandan keyin (asosiy usul)
     2) atribut yo'q         — UZ sukut bo'yicha faol (JS o'chiq bo'lsa ham)
     3) data-til/data-lang="ru" — RU faol
   Eski nom-kelishuvlari (.til-almash / .til-tugma / .faol / aria-current)
   ham qoldirilgan — til.js qaysi birini tanlasa ham buziladigan joy
   bo'lmasin. */
.til-almashtirgich,
.til-almash,
[data-til-almash] {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--chiziq);
  background: var(--yuza-kulrang);
  flex: 0 0 auto;
}

.til-almashtirgich > button,
.til-almash > button,
.til-almash > a,
[data-til-almash] > button,
[data-til-almash] > a,
.til-tugma {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 9px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--matn-ikkinchi);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tezlik-tez), color var(--tezlik-tez),
    box-shadow var(--tezlik-tez);
}

/* FAOL TIL — qora "tanga" + oq matn (#FFFFFF / #0E0E10 = 18.4:1).
   Rang bosh sahifadagi ichki uslubdan olingan: ikki joyda bir xil
   ko'rinish bo'lsin. Faol bo'lmagani kulrang matn, fon shaffof. */

/* 1-usul: til.js aria-pressed qo'ygan */
.til-almashtirgich > button[aria-pressed="true"],
/* 2-usul: atribut yo'q -> UZ faol (JS ulanmagan bo'lsa ham to'g'ri ko'rinadi) */
html:not([data-til="ru"]):not([data-lang="ru"]) .til-almashtirgich > button[data-til="uz"],
/* 3-usul: RU tanlangan */
html[data-til="ru"] .til-almashtirgich > button[data-til="ru"],
html[data-lang="ru"] .til-almashtirgich > button[data-til="ru"] {
  background: var(--kul-15);
  color: var(--matn-teskari);
  box-shadow: none;
}

/* RU tanlanganda UZ tugmasi faol bo'lmay qolishi SHART — yuqoridagi
   2-usul qoidasi `:not(...)` bilan o'chadi, lekin til.js eski
   aria-pressed ni tozalamasa ham to'g'ri ko'rinsin uchun ochiq yozamiz. */
html[data-til="ru"] .til-almashtirgich > button[data-til="uz"],
html[data-lang="ru"] .til-almashtirgich > button[data-til="uz"] {
  background: transparent;
  color: var(--matn-ikkinchi);
}

/* ⚠️ IKKITA FAOL TUGMA XAVFI — brauzerda o'lchab topilgan (21.09).
   Agar til.js `aria-pressed="true"` ni RU ga qo'ysa-yu, <html> dagi
   atributni QO'YMASA, 2-usul qoidasi UZ ni ham faol qilib qo'yadi va
   IKKALA tugma qora bo'lib qoladi. Quyidagi ikki qoida shuni yopadi.

   1) Aniq "men faol emasman" belgisi bor bo'lsa — hurmat qilinadi.
      Aniqlik ataylab 2-usuldan bitta ortiq ([aria-pressed] qo'shildi). */
html:not([data-til="ru"]):not([data-lang="ru"])
  .til-almashtirgich > button[data-til="uz"][aria-pressed="false"] {
  background: transparent;
  color: var(--matn-ikkinchi);
}

/* 2) til.js faol bo'lmagan tugmadan atributni butunlay olib tashlasa,
      yuqoridagi qoida ishlamaydi. `:has()` shu holatni yopadi: guruhda
      allaqachon aria-pressed="true" tugma bo'lsa, sukut-fallback
      o'chadi. ALOHIDA blokda — `:has()` ni qo'llamaydigan eski
      WebView'da faqat shu qoida tushib qoladi, qolgani ishlayveradi. */
html:not([data-til="ru"]):not([data-lang="ru"])
  .til-almashtirgich:has(> button[aria-pressed="true"])
  > button[data-til="uz"]:not([aria-pressed="true"]) {
  background: transparent;
  color: var(--matn-ikkinchi);
}

/* Eski nom-kelishuvi (agar til.js .til-almash / .til-tugma tanlasa) */
.til-almash > button[aria-pressed="true"],
.til-almash > a[aria-pressed="true"],
.til-almash > .faol,
.til-almash > [aria-current],
[data-til-almash] > button[aria-pressed="true"],
[data-til-almash] > .faol,
[data-til-almash] > [aria-current],
.til-tugma[aria-pressed="true"],
.til-tugma[aria-current],
.til-tugma.faol {
  background: var(--yuza-karta);
  color: var(--matn-qizil);
  box-shadow: var(--soya-mayda);
}

/* Faol BO'LMAGAN tilga sichqoncha borganda — faqat rang, sakrash yo'q
   (boshqaruv juda kichkina, ko'tarilish "titrash" bo'lib ko'rinadi). */
@media (hover: hover) {
  .til-almashtirgich > button:hover,
  .til-almash > button:hover,
  .til-almash > a:hover,
  [data-til-almash] > button:hover,
  [data-til-almash] > a:hover,
  .til-tugma:hover { color: var(--matn-asosiy-rang); }

  /* Faol tugma qora fonda — hover'da matni OQligicha qolishi shart,
     aks holda qora ustida qora yozuv chiqadi (o'qib bo'lmaydi). */
  .til-almashtirgich > button[aria-pressed="true"]:hover,
  html:not([data-til="ru"]):not([data-lang="ru"]) .til-almashtirgich > button[data-til="uz"]:hover,
  html[data-til="ru"] .til-almashtirgich > button[data-til="ru"]:hover,
  html[data-lang="ru"] .til-almashtirgich > button[data-til="ru"]:hover {
    color: var(--matn-teskari);
  }

  .til-almash > button[aria-pressed="true"]:hover,
  .til-almash > .faol:hover,
  .til-tugma[aria-pressed="true"]:hover,
  .til-tugma.faol:hover { color: var(--matn-qizil); }
}

.til-almashtirgich > button:focus-visible,
.til-almash > button:focus-visible,
.til-almash > a:focus-visible,
[data-til-almash] > button:focus-visible,
[data-til-almash] > a:focus-visible,
.til-tugma:focus-visible {
  outline: none;
  box-shadow: var(--fokus-tugma);
}

/* Mobilda barmoq maydoni kattalashadi (0.5). 390px header'da joy tor —
   shuning uchun 36x30, 44px emas: yonida qidiruv va menyu turadi. */
@media (max-width: 767px) {
  .til-almashtirgich > button,
  .til-almash > button,
  .til-almash > a,
  [data-til-almash] > button,
  [data-til-almash] > a,
  .til-tugma { min-width: 36px; height: 30px; font-size: 12px; }
}

/* -- 5.3 CHUQURLIK — QUYUQ BO'LIMLAR (freymvork 4-bo'lim usuli) -------
   Freymvork: "radial gradientlar opacity 0.15-0.25 + linear-gradient
   to'r qoplama". Rang navy emas — Arzonchi qizili (--qizil-50) va oq,
   ikkalasi ham mavjud tokendan, past shaffoflikda.

   .chuqurlik-quyuq — qayta ishlatiladigan yordamchi sinf: istalgan
   quyuq blokka qo'shilsa shu chuqurlikni oladi (HTML ga tegmasdan
   .quyuq-bolim va .hero-yetkazish ga allaqachon berilgan). */
.quyuq-bolim,
.chuqurlik-quyuq {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--yuza-quyuq);
  background-image:
    radial-gradient(78% 120% at 8% 0%, rgba(230, 0, 18, 0.22), transparent 62%),
    radial-gradient(62% 100% at 100% 100%, rgba(255, 255, 255, 0.10), transparent 64%);
  background-repeat: no-repeat;
}

/* To'r qoplama — juda past kontrastli chiziqlar, chetlari so'niydi.
   z-index:-1 + ota elementdagi isolation:isolate: to'r fon ustida,
   lekin matn OSTIDA qoladi. */
.quyuq-bolim::before,
.chuqurlik-quyuq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 78%);
}

/* Quyuq fonda matn darajalari (on-dark juftliklari allaqachon bor) */
.quyuq-bolim h2,
.quyuq-bolim h3,
.chuqurlik-quyuq h2,
.chuqurlik-quyuq h3 { color: var(--matn-quyuq-ustida); }
.quyuq-bolim p,
.chuqurlik-quyuq p { color: var(--matn-quyuq-ustida-2); }

/* Quyuq "Yetkazib berish" kartochkasi — kichik blok, unda to'r qoplama
   YO'Q (44px katak sig'maydi), faqat bitta yumshoq radial.

   ⚠️ HALOL ESLATMA (21.09): `.hero-yetkazish` hozir HECH QAYSI sahifada
   ishlatilmayapti — sinfning eski qoidasi (style.css:3952) ham allaqachon
   ishlatilmay qolgan edi. Ya'ni bu blok BRAUZERDA KO'RILMAGAN, faqat
   sinf qaytib kelsa bir xil tilda chiqishi uchun qoldirildi. */
.hero-yetkazish {
  position: relative;
  overflow: hidden;
  background-color: var(--kul-15);
  background-image:
    radial-gradient(90% 140% at 100% 0%, rgba(230, 0, 18, 0.20), transparent 66%);
  background-repeat: no-repeat;
}

/* -- 5.4 RADIUS IERARXIYASI — 14 / 18 / 22 / 24 (freymvork 4-bo'lim) --
   Shkala loyihada allaqachon bor edi, faqat 24px additiv qatorga
   kiritilmagan edi. Ierarxiya "kichikdan kattaga = boshqaruvdan blokgacha":
       14px  --r-boshqaruv   tugma, input, kichik boshqaruv
       18px  --r-karta       kartochka, panel ichidagi blok
       22px  --r-panel       katta panel
       24px  --radius-blok   sahifa darajasidagi blok, quyuq bo'lim, hero
   Mavjud tokenlar (--radius-tugma 12px, --radius-kartochka 16px) ATAYLAB
   tegilmadi: ular 18 ta sahifada ishlatiladi, ularni surish = butun
   saytni qayta o'lchash. Yangi komponentlar quyidagi qatordan oladi. */
:root {
  --radius-24: 24px;          /* additiv qatorning yetishmagan pog'onasi */
  --r-blok: var(--radius-24); /* --r-* oilasining eng katta pog'onasi */
}

/* -- 5.5 TIPOGRAFIKA (freymvork 4-bo'lim usuli) -----------------------
   Freymvork: sarlavhalarda letter-spacing: -0.025em, tor line-height,
   o'lchamlar clamp() bilan moslashuvchan.

   Nima qilindi va NEGA aynan shunday:
     - h1/h2 ELEMENT sifatida clamp() ga o'tkazildi, --matn-h1
       TOKENI tegilmadi. Sabab: o'sha token sarlavhadan tashqari
       .statistika-son, .reklama-slayd h3, .sharh-ortacha,
       .karusel-bosh h2 da ham ishlatiladi — tokenni surish ularni
       ham surib yuborardi.
     - Aniqlik (specificity) 0,0,1 — ya'ni sahifaga xos har qanday
       ".sinf h2 {...}" qoidasi baribir g'olib qoladi. Regressiya
       maydoni shu bilan qisqardi.
     - line-height freymvorkdagi 1.06 EMAS. 1.06 — 52px hero uchun
       o'lchov; 26-32px bo'lim sarlavhasida o'zbek matnining pastki
       dumlari (g, q, y) keyingi satr bilan deyarli tegib ketadi.
       Shuning uchun 1.1 / 1.16 — o'sha usul, xavfsiz qiymatda.

   O'lchovlar (haqiqiy piksel):
     h1: 320px -> 26px | 768px -> 27.7px | 1280px+ -> 32px  (eski: hamma joyda 28px)
     h2: 320px -> 22px | 768px -> 23.6px | 1280px+ -> 26px  (eski: mobil 24, desktop 20)
   Mobilda sarlavhalar KICHRAYADI (0.5 — 320px da chetdan chiqish xavfi
   kamayadi), desktopda KATTALASHADI (freymvork 6-bo'lim: "vizual juda
   oddiy" -> tipografikani kuchaytirish). Ierarxiya har kenglikda
   saqlanadi: h1 > h2 (26>22 mobil, 32>26 desktop). */
h1 {
  font-size: clamp(1.625rem, 1.42rem + 0.65vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(1.375rem, 1.18rem + 0.62vw, 1.625rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
}

/* h3/h4 — o'lchami o'zgarmaydi, faqat tracking bir tilga keladi.
   (Eski qoidada letter-spacing: normal edi — 18px da bu sezilarli
   darajada bo'sh ko'rinardi.) */
h3, h4 { letter-spacing: -0.012em; }

/* Hero wordmark allaqachon freymvork o'lchovida (clamp + -0.03em +
   line-height 1) — tegilmadi. */

/* -- 5.6 HOVER GRAMMATIKASI — YAKUNIY QATLAM -------------------------
   Ega: "bittasi sakraydi, boshqasi rang o'zgartiradi". Yuqoridagi
   3-bo'lim ko'p joyni to'g'rilagan edi, lekin to'rtta tarqoqlik qolgan:
     1) kartochkalar -4px da --soya-orta (juda zaif) ishlatardi,
        .mahsulot-karta esa --soya-hover (kuchli) — bir xil daraja,
        ikki xil soya. Endi hammasi --soya-hover.
        (--soya-hover tokeni DIZAYN.md da "TAYYOR, ULANMAGAN" deb
        turardi — endi ulandi.)
     2) .tugma-asosiy -1px da edi, qolgan tugmalar -2px da. Endi -2px.
     3) .aloqa-band kartochka bo'la turib -2px va soyasiz edi.
     4) Eski kartochka hover'lari @media (hover:hover) ichida emas edi
        — telefonda bosgandan keyin hover "yopishib" qolardi. Endi
        sensorli ekranda ko'tarilish butunlay o'chadi (0.5).

   YAKUNIY GRAMMATIKA (butun sayt uchun bitta):
     KARTOCHKA               -> translateY(-4px) + --soya-hover
     TUGMA / CHIP / PILLA    -> translateY(-2px) + --soya-mayda|suzuvchi
     IKONKA-TUGMA            -> translateY(-1px) + fon
     MATN HAVOLA             -> faqat rang
   Tezlik: --tezlik / --tezlik-tez. Ko'tarilish 4px dan oshmaydi. */

/* Sensorli ekran — hech qanday ko'tarilish yo'q (hover "yopishmasin") */
@media (hover: none) {
  .mahsulot-karta:hover,
  .kategoriya-karta:hover,
  .filial-karta:hover,
  .qadam-karta:hover,
  .aloqa-band:hover,
  .katalog-tugma:hover,
  .karta-cta:hover,
  .tugma-asosiy:hover,
  .tugma-ikkilamchi:hover,
  .yana-tugma:hover,
  .filtr-pill:hover,
  .brend-chip:hover,
  .dokon-ikonka:hover,
  .xizmat-shahar:hover,
  .kategoriya-ichki a:hover { transform: none; }
}

/* Sichqonchali qurilma — izchil ko'tarilish */
@media (hover: hover) {
  /* 1-daraja: KARTOCHKA */
  .kategoriya-karta:hover,
  .filial-karta:hover,
  .qadam-karta:hover {
    transform: translateY(-4px);
    box-shadow: var(--soya-hover);
  }

  .aloqa-band:hover {
    transform: translateY(-4px);
    box-shadow: var(--soya-hover);
    border-color: var(--chegara-kuchli);
  }

  /* 2-daraja: TUGMA — asosiy tugma ham endi tugma darajasida */
  .tugma-asosiy:hover {
    transform: translateY(-2px);
  }
}

/* .aloqa-band da soya uchun o'tish qoidasi yo'q edi — qo'shildi */
.aloqa-band {
  transition: border-color var(--tezlik), transform var(--tezlik),
    box-shadow var(--tezlik);
}

/* -- 5.7 HARAKATNI KAMAYTIRISH — 5-bo'lim qo'shgan hamma narsa --------
   Ko'rinish (rang, soya, opacity) qoladi, faqat SILJISH o'chadi. */
@media (prefers-reduced-motion: reduce) {
  /* Til almashtirgich ATAYLAB bu ro'yxatda YO'Q: u faqat rang va soyani
     o'zgartiradi, hech qayoqqa SILJIMAYDI. Yuqoridagi qoidaga ko'ra
     ko'rinish o'tishlari qoladi — brauzerda tekshirildi (21.09):
     reduced-motion da `.aloqa-band` -> none, almashtirgich -> rang
     o'tishi saqlanadi. */
  .aloqa-band { transition: none; }

  .kategoriya-karta:hover,
  .filial-karta:hover,
  .qadam-karta:hover,
  .aloqa-band:hover,
  .tugma-asosiy:hover { transform: none; }
}

/* ── UZ/RU almashtirgich — VAQTINCHA YASHIRILGAN (26.09) ────────────────
   Bosh sahifaga 105 ta UZ/RU juftligi qo'shilgan, LEKIN o'lchov ko'rsatdi:
   RU rejimida hali 117 ta satr o'zbekcha qolyapti (banner matnlari,
   qidiruv maydoni, JS chizadigan mahsulot kartochkalari, "Kirish").

   Umid freymvorki §6: "Не работает русская версия — каждая UZ-строка
   должна иметь RU-пару". Yarim tarjima qilingan sahifa buzuq ko'rinadi,
   shuning uchun almashtirgich mijozga ko'rsatilmaydi.

   YOQISH UCHUN: shu blokni o'chiring. Markup va til.js joyida turibdi,
   qo'shimcha ish talab qilmaydi — faqat tarjimani yakunlash kerak. */
[data-til-almashtir],
.til-almashtirgich { display: none !important; }