/* ==========================================================================
   KATALOG · 3-BRIF ZICHLIK QATLAMI  ·  z-katalog.css
   Manba: brif/3-ZICHLIK-RASMSIZ-12-09.md — «CATALOG — complete redesign»:
     · ustuvorlik PRODUCT DISCOVERY;
     · hero IXCHAM: breadcrumb · KATALOG · kuchli sarlavha · bitta gap;
     · FILTR = asosiy UX ustuvorligi (ixcham filtr tasmasi + drawer);
     · mahsulot roʻyxati «cards NOT tall», ierarxiya NOM · TOIFA · VISKOZITET ·
       QISQA TAVSIF · QADOQ · CTA, texnik tafsilot ikkinchi darajada.
   Qoʻshimcha qonun: soya 0 · tracking ≤ 0 · yuqoriga tekislash · radius 6/8/12/14 ·
   quyuq band ≤ 2 · haqiqiy rasm YOʻQ (faqat loyihalangan slot) · matn VERBATIM.

   Eng oxirida ulanadi (qur.py). Eski fayllarga tegilmagan — ortga qaytarish:
   shu faylni oʻchirish yetadi.

   ── QAROR DAFTARI (nima uchun kesildi) ──────────────────────────────────────
   1. KAT-02 (yoʻnalishlar) KAT-04 (filtr + roʻyxat) ichiga kirdi. Sabab: ikkovi
      BITTA gʻoyani aytadi — mahsulot kashfiyoti. Brifning filtr roʻyxati ham
      «category · viscosity · specification · packaging · equipment» deb
      boshlanadi: yoʻnalish — filtrning eng yirik pogʻonasi, alohida boʻlim emas.
      Natija: bitta sirt, bitta padding jufti, ikki pogʻonali yorliq (01 · 02).
   2. Yorliq + izoh + qidiruv + narx qatori BITTA 12-ustunli qatorga yigʻildi
      (avval uch qavat edi: 16 + 28 + 94 px).
   3. Mahsulot kartasi: toʻliq kenglikdagi editorial modul (465 px) → ikki
      ustunli ixcham karta (~330 px). Brif aynan «cards not tall» deydi va
      ierarxiyani NOM · TOIFA · VISKOZITET · TAVSIF · QADOQ · CTA deb beradi.
      Slot tizim §15 boʻyicha PRODUCT = 1:1 ga oʻtdi (avval 4:3 — u TECHNICAL
      DETAIL nisbati edi va kartani ikki barobar choʻzardi).
   4. «Qaysi biri kerakligini bilmayapsizmi?» boʻlimi (346 px, markazlashgan
      ulkan sarlavha + ikki tugma) savol-javobning yopuvchi qatoriga koʻchdi.
   5. Savol-javobning birinchi bandi yopiq: brif «uzun tushuntirish akkordeonga
      yigʻiladi» deydi, matn oʻchmadi.
   ========================================================================== */

/* ==========================================================================
   §0 · BOʻLIM RITMI — YUQORI → OʻRTA → PAST → OʻRTA → YUQORI
   Bir xil padding ketma-ket takrorlanmaydi; ajralish ikki paddingning
   yigʻindisi: 100 · 94 · 94 · 102 px.
   ========================================================================== */
:root{
  --z-pad-ish:clamp(34px,3.4vw,46px);   /* ish maydoni — eng ogʻir blok */
  --z-pad-orta:clamp(32px,3.3vw,44px);  /* registr · savol-javob */
  --z-pad-quyuq:clamp(38px,4vw,52px);   /* quyuq konversiya bandi */
  --z-karta-pad:clamp(18px,1.9vw,26px);
}
main [data-blok="KAT-04"][data-blok]{padding-block:var(--z-pad-ish)}
main [data-blok="KAT-03"][data-blok]{padding-block:var(--z-pad-orta)}
main [data-blok="KAT-08"][data-blok]{padding-block:var(--z-pad-orta)}
main [data-blok="KAT-09"][data-blok]{padding-block:var(--z-pad-quyuq)}
/* kat2.css §0 dagi `.k2-ish,.k2-reg,.k2-sj,.k2-cta,.k2-konv{padding-block:var(--k2-pad)}`
   ni bosish uchun bir xil ogʻirlikdagi selektor kerak emas — yuqoridagilar 0-2-1. */


/* ==========================================================================
   §1 · KAT-01 · HERO — «compact: breadcrumb · KATALOG · kuchli sarlavha · bitta gap»
   634 → ~520 px. Balandlik matndan chiqadi, boʻshliqdan emas: krosh yaqinroq,
   sarlavha bloki zichroq, uch fakt relsi kadrning pastki qirrasiga yopishdi.
   ========================================================================== */
main .hs--sahifa{min-height:clamp(360px,46vh,460px)}
main .hs--sahifa .hs__ich{
  padding-top:clamp(118px,13.2vh,132px);          /* header 114 px + nafas */
  padding-bottom:clamp(14px,1.6vw,18px);
}
main .hs--sahifa .hs__krosh{margin-bottom:clamp(10px,1.2vw,14px)}
main .hs--sahifa .hs__matn{gap:clamp(8px,.8vw,10px);max-width:min(760px,66%)}
main .hs--sahifa h1{line-height:1.02;max-width:12em}
main .hs--sahifa .hs__matn .lid{max-width:30em;line-height:1.45}
main .hs--sahifa .hs__yoriq{max-width:42em;font-size:13.5px;line-height:1.5}
main .hs--sahifa .hs__amal{margin-top:4px}
main .hs--sahifa .hs__meta{
  margin-top:clamp(11px,1.2vw,14px);padding-top:10px;
}

/* Hero sloti yorligʻi: tizim.css §15 uni `--tz-hero-ust - 8px` ga qoʻyadi va u
   headerning qidiruv tugmasi ostida (22 px, oʻng qirralari bir xil) osilib
   qolardi — tushma menyudek koʻrinardi. Pastga tushiriladi: headerdan ≈50 px
   uzoqda, hero matni oʻng chegarasidan (66 %) tashqarida, uch fakt relsidan
   yuqorida. Xuddi shu yechim z-brend.css da ham qoʻllangan. */
main .hs--sahifa .hs__kadr:not(:has(img))::after{top:calc(var(--tz-hero-ust) + 40px)}


/* ==========================================================================
   §2 · KAT-04 · ISH MAYDONI — qidiruv · yoʻnalish indeksi · filtr · roʻyxat
   Boʻlim 900 px atrofida qoladi: bu sahifaning YAGONA ish maydoni (brif:
   «FILTER = major UX priority»), qolgan hamma boʻlim 420–600 px.
   ========================================================================== */

/* ── 2.1 · kirish qatlami: bitta 12-ustunli qator ────────────────────────── */
.z-kirish{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--grid-gap);row-gap:clamp(17px,1.7vw,22px);
  align-items:start;
  margin-bottom:clamp(17px,1.7vw,22px);
}
.z-kirish .k2-bolim-bosh{
  grid-column:1 / span 4;grid-row:1;
  grid-template-columns:minmax(0,1fr);gap:9px;
}
.z-kirish .k2-bolim-bosh__izoh{max-width:28em}
.z-kirish .k2-legend{grid-column:1;justify-self:start;align-self:start;white-space:normal}

/* Qidiruv maydoni oʻz placeholderidan tor boʻlmasligi SHART: placeholder
   («Artikul nomi yoki belgi, masalan Molygreen, 5W-30, GL-5, DOT 4…») 14 px da
   407 px joy soʻraydi, matn esa VERBATIM — qisqartirib boʻlmaydi. Avvalgi 5/8
   ustunli bosh qator maydonni 1440 da 343 px, 1280 da 284 px qilib, matnni
   glif oʻrtasidan kesardi. Endi qidiruv oʻz ustunining BUTUN kengligini oladi
   (1440 da ≈853 → maydon ≈658 px), narx izohi esa uning ostidagi izohga
   tushadi — bu ikkovi bitta fikr: «qidir → narx soʻra». */
.z-kirish .k2-kirish-qator{
  grid-column:5 / -1;grid-row:1;margin-top:0;
  grid-template-columns:minmax(0,1fr);row-gap:clamp(9px,1vw,12px);
}
.z-kirish .k2-qidiruv{
  grid-column:1;grid-row:1;
  grid-template-columns:auto minmax(0,1fr);column-gap:clamp(12px,1.3vw,18px);
  align-items:start;
}
/* «QIDIRUV» yorligʻi maydonning USTIDA emas, YONIDA — maydon matni bilan bir
   chiziqda. Qator 38 px past boʻladi va yorliq → maydon aloqasi kuchayadi. */
.z-kirish .k2-qidiruv__y{grid-column:1;grid-row:1;align-self:start;padding-top:19px}
.z-kirish .k2-qidiruv__maydon{grid-column:2;grid-row:1}
.z-kirish .k2-narx{
  grid-column:1 / -1;grid-row:2;line-height:1.55;max-width:none;
  padding-top:clamp(8px,.9vw,11px);border-top:1px solid var(--chiziq);
}
.z-kirish .k2-qidiruv input{padding-block:10px}
.z-kirish .k2-qidiruv__t{padding:7px 7px 7px 15px}
.z-kirish .k2-qidiruv__t .btn__oq{width:36px;height:36px}

/* yoʻnalish indeksi — filtrning eng yirik pogʻonasi, shu sababli kirish
   qatoridan keyin, filtr relsining ustida turadi */
.z-kirish .k2-yon{grid-column:1 / -1;grid-row:2;margin-top:0}
.z-kirish .k2-yon__q{padding:13px clamp(10px,1vw,16px) 15px 0;gap:7px}
.z-kirish .k2-yon__q + .k2-yon__q{padding-left:clamp(10px,1vw,16px)}

/* ── 2.2 · «02 MAHSULOT ROʻYXATI» pogʻonasi va yopishqoq filtr tasmasi ───── */
.z-ish .k2-ish__bosh{margin-bottom:clamp(10px,1.1vw,14px)}
.z-ish .k2-rels{margin-bottom:clamp(17px,1.7vw,22px)}
.z-ish .k2-asbob{padding-block:10px}

/* ── 2.3 · MAHSULOT KARTASI — ikki ustun, past karta ─────────────────────── */
main .k2-list[data-rejim="plitka"]{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2vw,26px);border-top:0;
}
main .k2-list[data-rejim="plitka"] .k2-mah{
  position:relative;
  display:grid;
  grid-template-columns:minmax(178px,34%) minmax(0,1fr);  /* pol: slot yorligʻi sigʻsin */
  grid-template-rows:auto auto auto auto;
  column-gap:clamp(16px,1.7vw,24px);row-gap:0;align-items:start;
  min-height:0;padding:var(--z-karta-pad);
  background:var(--oq);border:1px solid transparent;border-radius:var(--r-karta);
  overflow:hidden;
}
main .k2-list[data-rejim="plitka"] .k2-mah:hover{border-color:#C9D8EA}

/* slot: tizim §15 · PRODUCT = 1:1. Nisbat YOZILGANIDEK chiziladi — quti
   choʻzilib «1:1» yorligʻi yolgʻon boʻlib qolmasin. Karta balandligini matn
   belgilaydi, slot esa uning yuqori chap burchagida turadi. */
main .k2-list[data-rejim="plitka"] .k2-mah__foto{
  grid-column:1;grid-row:1 / span 3;align-self:start;
  aspect-ratio:1/1;background-color:var(--canvas);border:0;border-radius:var(--r-tekis);
}
/* Texnik yorliq QUTIDAN CHIQMAYDI. tizim.css §15 unga `white-space:pre` beradi,
   shuning uchun «01  IMAGE AREA — PRODUCT» (10 px da 160 px) slot 174 px dan
   tor boʻlgan hamma kenglikda — 1280 (173) · 1180 (160) · 1024 (155) · 320
   (143) — kesilib qolardi. Ikki himoya: (a) slot ustuniga POL qoʻyiladi,
   (b) yorliq keraksa ikki qatorga oʻtadi (kesilmaydi). */
main .k2-mah__foto:not(:has(img))::after{
  left:14px;right:12px;bottom:12px;font-size:10px;
  white-space:pre-wrap;line-height:1.25;
}
main .k2-mah__foto:not(:has(img))::before{inset:8px;font-size:9px;padding:6px 8px}

main .k2-list[data-rejim="plitka"] .k2-mah__usti{
  grid-column:2;grid-row:1;padding:0;margin:0 0 9px;
}
main .k2-list[data-rejim="plitka"] .k2-mah__nom{
  grid-column:2;grid-row:2;padding:0;gap:7px;
}
main .k2-list[data-rejim="plitka"] .k2-mah h3{
  font-size:clamp(19px,1.6vw,23px);line-height:1.12;font-weight:700;
  letter-spacing:var(--tracking-zich);
}
main .k2-list[data-rejim="plitka"] .k2-mah__brend{font-size:11px;margin-bottom:4px}
main .k2-list[data-rejim="plitka"] .k2-mah__tav{font-size:14px;line-height:1.45;color:var(--ink)}
main .k2-list[data-rejim="plitka"] .k2-mah__qosh{font-size:13px;line-height:1.5;max-width:38em}
/* texnik tafsilot ikkinchi darajada: bitta hairline ostida, kegl kichik */
main .k2-list[data-rejim="plitka"] .k2-mah__tex{
  grid-column:2;grid-row:3;
  margin:clamp(12px,1.3vw,16px) 0 0;padding:0;border-top:0;
  display:flex;flex-wrap:wrap;gap:10px clamp(18px,2vw,30px);
}
main .k2-list[data-rejim="plitka"] .k2-mah__sae{
  font-size:clamp(18px,1.5vw,21px);line-height:1.1;letter-spacing:var(--tracking-zich);
}
/* amal qatori — kartaning butun kengligida, bitta hairline ostida: slot
   ustuni ostidagi boʻsh joy shu qator bilan yopiladi */
main .k2-list[data-rejim="plitka"] .k2-mah__ost{
  grid-column:1 / -1;grid-row:4;
  margin-top:clamp(14px,1.5vw,20px);padding:clamp(11px,1.2vw,15px) 0 0;
  border-top:1px solid var(--chiziq-ichki);
  justify-content:flex-start;gap:clamp(16px,2vw,28px);
}
main .k2-list[data-rejim="plitka"] .k2-mah__ha{font-size:14px}

/* «Roʻyxat oxiri.» — karta emas, roʻyxatni yopadigan qator */
main .k2-list[data-rejim="plitka"] .k2-sorov{
  grid-column:1 / -1;
  padding:clamp(14px,1.5vw,20px) 0 0;border-top:1px solid var(--chiziq);
}

/* ── 2.4 · roʻyxat osti: javobgarlik bandlari ───────────────────────────── */
.z-ish .k2-ost{
  margin-top:clamp(16px,1.8vw,24px);padding-top:clamp(13px,1.4vw,18px);
  row-gap:10px;
}
/* Ikki javobgarlik bandi bir xil kegl · bir xil rang · bir xil kenglikda
   yonma-yon turar va ikkalasi bir xil jumla bilan tugagani uchun nusxalash
   xatosidek oʻqilardi. Matn VERBATIM qoladi — farq KOMPOZITSIYADA: birinchisi
   yetakchi izoh (keng oʻlchov, oddiy kegl), ikkinchisi unga ilashgan mayda
   izoh (tor ustun, ingichka tik chiziq, kichik kegl). */
.z-ish .k2-ost__j:first-of-type{grid-column:1 / span 6}
.z-ish .k2-ost__j:nth-of-type(2){
  grid-column:8 / span 3;font-size:11px;line-height:1.55;
  padding-left:clamp(12px,1.2vw,16px);border-left:1px solid var(--chiziq);
}
@media (max-width:1000px){                       /* kat2.css §oxiri bilan bir xil chegara */
  .z-ish .k2-ost__j:first-of-type,
  .z-ish .k2-ost__j:nth-of-type(2){grid-column:1 / -1}
  .z-ish .k2-ost__j:nth-of-type(2){padding-left:14px}
}

/* ── 2.5 · yoʻnalish kirishi (JS ochadi) — matn va kadr BITTA qatorda ─────
   Avval kadr 5/12 ustunda edi: 3:2 nisbatda u 333 px ga choʻzilib, yoʻnalish
   tanlangani bilanoq boʻlimga 456 px qoʻshardi. Endi 8/3 nisbat — kadr 3:2
   nisbatini YOZILGANIDEK saqlaydi (≈339×226) va qator matnga yaqinlashadi.

   ⚠ 13.09 koʻrigi: 8/3 nisbati ham yetmadi. Ustun kengligi nisbatga bogʻlangani
   uchun 3:2 slot 342×228 boʻlib qolar, matn esa atigi 141 px edi — matn ostida
   ≈920×120 px maqsadsiz toʻrtburchak qolardi (brif nomma-nom taqiqlagan «small
   text + huge empty space» naqshi) va tanlangan holatda KAT-04 896 → 1237 px ga
   koʻtarilardi. Endi slot balandligi MATNGA tenglashtirilgan: balandlik aniq
   beriladi, kengligi 3:2 dan kelib chiqadi (≈211×141). Nisbat yozilganidek
   qoladi, yorliq ham sigʻadi, boʻsh maydon yoʻqoladi. */
.z-ish .k2-kirish{
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:clamp(24px,2.8vw,44px);row-gap:clamp(16px,1.8vw,24px);
  padding-bottom:clamp(18px,1.9vw,26px);margin-bottom:clamp(18px,1.9vw,26px);
}
.z-ish .k2-kirish__matn{grid-column:1;gap:10px;max-width:min(680px,100%)}
.z-ish .k2-kirish__nom{font-size:clamp(24px,2.4vw,34px)}
.z-ish .k2-kirish__kadr{
  grid-column:2;justify-self:end;
  height:clamp(112px,9.8vw,141px);width:auto;max-width:100%;max-height:none;
}
@media (max-width:900px){
  .z-ish .k2-kirish__kadr{height:clamp(104px,12vw,124px)}
}
@media (max-width:760px){
  .z-ish .k2-kirish{grid-template-columns:minmax(0,1fr)}
  .z-ish .k2-kirish__matn{max-width:none}
  .z-ish .k2-kirish__kadr{grid-column:1;justify-self:start;height:clamp(104px,26vw,132px)}
}


/* ==========================================================================
   §3 · KAT-03 · YOʻNALISH HAQIDA — sarlavha ustuni + IKKI USTUNLI registr
   Avval: 4/12 sarlavha + 7/12 bitta ustunli registr. Sarlavha bloki 97 px,
   registr 328 px edi — chapda 230 px boʻsh kvadrat qolardi («small text +
   huge empty space»). Endi registr ikki ustunda: besh yoʻnalish uch qatorga
   sigʻadi, sarlavha ustuni bilan balandlik tenglashadi, boʻsh joy yoʻqoladi.
   Qoʻshni KAT-08 ham akkordeon — shu sababli bu yerdagisi IKKI USTUN, u yerda
   bitta keng ustun: ikki boʻlim bir xil koʻrinmaydi.
   ========================================================================== */
/* ⚠ 13.09 koʻrigi: yuqoridagi daʼvo oʻlchovda tasdiqlanmadi — 1440 da sarlavha
   ustuni 305×129, registr esa 248 px edi, yaʼni chapda hamon 305×119 px boʻsh
   maydon qolardi. Sabab: 3 ustunlik sarlavha «Nimaga qarab tanlanadi» ni ikki
   qatorga sigʻdirardi. Endi sarlavha ustuni 2 ustunga torayadi (sarlavha uch
   qatorga chiqadi, ≈205 px) va registr 4/-1 gacha kengayadi (qatorlar pastroq:
   «qara» qatori bitta satrga sigʻadi). Boʻsh maydon ≈119 → ≈25 px. */
.k2-reg__chap{grid-column:1 / span 2;gap:11px;top:calc(var(--k2-top) + 20px)}
.k2-reg__chap h2{font-size:clamp(26px,2.6vw,36px)}
.k2-reg__izoh{max-width:20em}

.k2-reg__reg{
  grid-column:4 / -1;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(24px,2.8vw,44px);
  border-top:0;
}
.k2-reg__q{border-top:1px solid var(--chiziq);border-bottom:0;align-self:start}
.k2-reg__q > summary{
  grid-template-columns:26px minmax(0,1fr) 18px;
  gap:4px clamp(10px,1.1vw,14px);
  padding:clamp(13px,1.4vw,18px) 0;align-items:start;
}
.k2-reg__n{grid-column:1;grid-row:1;padding-top:5px}
.k2-reg__nom{grid-column:2;grid-row:1;font-size:clamp(17px,1.4vw,20px)}
.k2-reg__qara{grid-column:2;grid-row:2}
.k2-reg__b{grid-column:3;grid-row:1;width:14px;height:14px;margin-top:5px}
.k2-reg__b::before{top:6px;width:14px}
.k2-reg__b::after{left:6px;height:14px}
.k2-reg__q > p{
  margin-bottom:clamp(14px,1.5vw,20px);line-height:1.6;
  padding-left:calc(26px + clamp(10px,1.1vw,14px));max-width:none;
}


/* ==========================================================================
   §4 · KAT-08 · SAVOL-JAVOB + YOPUVCHI QAROR QATORI
   Akkordeon yopiq holatda ochiladi (brif: uzun tushuntirish yigʻiladi),
   boʻlim savolni yopadigan bitta amal qatori bilan tugaydi.
   ========================================================================== */
.k2-sj__bosh{gap:10px;margin-bottom:clamp(22px,2.4vw,32px);max-width:42em}
.k2-sj__q > summary{padding:clamp(13px,1.4vw,18px) 0}
.k2-sj__s{font-size:clamp(16px,1.3vw,19px)}
.k2-sj__q > p{margin-bottom:clamp(16px,1.7vw,24px);line-height:1.62}

/* yopuvchi qator — markazlashgan ulkan sarlavha EMAS: chapda savol, oʻngda amal */
.z-yakun{
  margin-top:clamp(22px,2.4vw,32px);padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--chiziq);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(16px,2vw,28px);
}
.z-yakun h2{
  margin:0;font-size:clamp(21px,2vw,28px)!important;line-height:1.12;
  letter-spacing:var(--tracking-zich);color:var(--navy);max-width:18em;
}
.z-yakun .k2-cta__amal{
  display:flex;align-items:center;flex-wrap:wrap;gap:clamp(14px,1.6vw,22px);
}


/* ==========================================================================
   §5 · KAT-09 · KONVERSIYA (quyuq band) — ikki auditoriya + forma
   927 → ~780. Forma paneli qisqardi, chap ustun (matn + qadoq sloti) panel
   balandligining ichiga sigʻadi — slot boʻlimga balandlik qoʻshmaydi.
   ========================================================================== */
.k2-konv__tasma{row-gap:clamp(24px,2.6vw,34px)}
.k2-konv__ustun{gap:12px}
.k2-konv__ustun h2{font-size:clamp(21px,2vw,28px)!important;line-height:1.12}
.k2-konv__ustun .tana-k{line-height:1.55;max-width:40em}

.k2-forma{margin-top:clamp(24px,2.6vw,34px);row-gap:var(--s6)}
.k2-forma__chap{gap:10px}
.k2-forma__chap h3{font-size:clamp(18px,1.6vw,23px)}
.k2-forma__chap .k2-konv__ost{
  margin-top:clamp(14px,1.6vw,20px);padding-top:clamp(12px,1.3vw,16px);
}
.k2-forma__kadr{max-width:340px;max-height:min(24vh,215px)}

.k2-konv .panel{padding:clamp(20px,2.1vw,28px)}
.k2-konv .kat-forma__maydonlar{gap:clamp(12px,1.3vw,16px)}
.k2-konv .panel textarea{min-height:76px}
.k2-konv .panel__ost{margin-top:clamp(16px,1.8vw,24px);padding-top:clamp(12px,1.4vw,18px)}
.k2-konv .panel .javobgarlik{line-height:1.5}


/* ==========================================================================
   §6 · RESPONSIV — 1180 · 1024 · 900 · 760 · 480
   Mobil ATAYLAB: ixcham hero, bitta ustun, ulkan slot yoʻq, filtr tortmada.
   ========================================================================== */
@media (max-width:1240px){
  /* registr: sarlavha ustuni tepaga, ikki ustunli registr toʻliq kenglikda
     (kat2.css ning shu kenglikdagi qoidasi bilan ziddiyatga tushmasin) */
  .k2-reg__chap{grid-column:1 / -1;position:static}
  .k2-reg__reg{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr))}
  .k2-reg__izoh{max-width:34em}
}
/* 1240 px dan tor ekranda ikki ustunli kirish qatori qidiruvga 400 px dan kam
   joy qoldiradi — placeholder (407 px, VERBATIM) kesiladi. Shu kenglikdan
   boshlab yorliq · qidiruv · yoʻnalish indeksi uch qavatga tushadi va qidiruv
   butun sahifa kengligini oladi. */
@media (max-width:1240px){
  .z-kirish{row-gap:clamp(16px,1.8vw,24px)}
  .z-kirish .k2-bolim-bosh{grid-column:1 / -1;grid-row:1}
  .z-kirish .k2-kirish-qator{grid-column:1 / -1;grid-row:2}
  .z-kirish .k2-yon{grid-row:3}
  .z-kirish .k2-narx{max-width:none}
}
@media (max-width:1024px){
  main .k2-list[data-rejim="plitka"] .k2-mah{grid-template-columns:minmax(172px,38%) minmax(0,1fr)}
}
/* 1300 px dan tor ekranda slot 173→155 px gacha torayadi: yorliq 10 px da 160 px
   soʻraydi va sigʻmaydi. Kegl 9 px ga tushadi (mayda texnik yorliq shkalasi
   11–9 px), ustun poli esa 172–178 px — ikkovi birga yorliqni BITTA qatorda
   ushlab turadi. `pre-wrap` (yuqorida) — oxirgi himoya: kesilmaydi, oʻraladi. */
@media (max-width:1300px){
  main .k2-mah__foto:not(:has(img))::after{font-size:9px;left:12px;right:10px}
}
@media (max-width:900px){
  .k2-reg__reg{grid-template-columns:minmax(0,1fr)}
  main .hs--sahifa .hs__matn{max-width:100%}
  main .k2-list[data-rejim="plitka"]{grid-template-columns:minmax(0,1fr)}
  main .k2-list[data-rejim="plitka"] .k2-mah{
    grid-template-columns:minmax(0,30%) minmax(0,1fr);
  }
  main .k2-list[data-rejim="plitka"] .k2-mah__foto{max-height:min(30vh,240px)}
}
@media (max-width:760px){
  /* mobilda «QIDIRUV» yorligʻi yana maydon USTIGA qaytadi — yonida tursa
     maydonga 80 px dan kam joy qolardi */
  .z-kirish .k2-qidiruv{grid-template-columns:minmax(0,1fr);gap:8px}
  .z-kirish .k2-qidiruv__y{grid-column:1;grid-row:1;padding-top:0}
  .z-kirish .k2-qidiruv__maydon{grid-column:1;grid-row:2}
  /* 62 belgilik placeholder 230 px li maydonga JISMONAN sigʻmaydi (matn
     VERBATIM — qisqartirilmaydi). Kesim glif oʻrtasidan emas, koʻp nuqta
     bilan tugaydi; toʻliq matn aria-label da qoladi. */
  .z-kirish .k2-qidiruv input{text-overflow:ellipsis}

  /* mobil hero: header 64 px, shuning uchun yuqori boʻshliq ham qisqaradi */
  main .hs--sahifa{min-height:0}
  main .hs--sahifa .hs__ich{padding-top:clamp(88px,15vh,108px);padding-bottom:20px}
  main .hs--sahifa .hs__meta{grid-template-columns:minmax(0,1fr);gap:6px;margin-top:16px}
  main .hs--sahifa .hs__meta li:nth-child(2),
  main .hs--sahifa .hs__meta li:nth-child(3){justify-content:flex-start}

  /* ⚠ 13.09 koʻrigi: avval slot 390 px da 183×183 boʻlib CHAPGA tiralar va
     oʻngida har kartada 132–166 px × 183 px oq maydon qolardi. Endi mobil
     karta ham IKKI USTUN: slot chapda (1:1, nisbat oʻzgarmagan), yonida toifa
     qatori va nom — slot balandligi matn balandligiga yaqin, boʻshliq yoʻq.
     Tavsif · texnik registr · amal qatori butun kenglikda ostiga tushadi. */
  main .k2-list[data-rejim="plitka"] .k2-mah{
    grid-template-columns:clamp(132px,42%,176px) minmax(0,1fr);
    column-gap:clamp(14px,3.6vw,18px);row-gap:0;
  }
  main .k2-list[data-rejim="plitka"] .k2-mah__foto{
    grid-column:1;grid-row:1 / span 2;align-self:start;aspect-ratio:1/1;
    width:100%;max-width:none;max-height:none;
  }
  /* texnik yorliq qutidan chiqib ketmasin — tor slotda ikki qatorga oʻtadi */
  main .k2-mah__foto:not(:has(img))::after{left:10px;right:9px;bottom:10px;font-size:9px}
  main .k2-list[data-rejim="plitka"] .k2-mah__usti{grid-column:2;grid-row:1;margin:0 0 8px}
  main .k2-list[data-rejim="plitka"] .k2-mah__nom{display:contents}
  main .k2-list[data-rejim="plitka"] .k2-mah__nom h3{grid-column:2;grid-row:2;margin:0}
  main .k2-list[data-rejim="plitka"] .k2-mah__tav{grid-column:1 / -1;grid-row:3;margin:14px 0 0}
  main .k2-list[data-rejim="plitka"] .k2-mah__qosh{grid-column:1 / -1;grid-row:4;margin:8px 0 0}
  main .k2-list[data-rejim="plitka"] .k2-mah__tex{grid-column:1 / -1;grid-row:5}
  main .k2-list[data-rejim="plitka"] .k2-mah__ost{grid-column:1 / -1;grid-row:6}

  .z-yakun{flex-direction:column;align-items:flex-start;gap:16px}
  .z-yakun .k2-cta__amal{flex-direction:column;align-items:stretch;align-self:stretch;width:100%}
  .z-yakun .btn{justify-content:space-between}
  .k2-forma__kadr{max-width:none}
}
@media (max-width:480px){
  .z-kirish .k2-yon__q{padding:12px 10px 14px 0}
  main .k2-list[data-rejim="plitka"] .k2-mah{padding:16px}
}
/* 360 px dan tor ekranda ikki ustunli karta matn ustunini 110 px gacha
   siqadi — «ASOSIY MAHSULOT» nishoni sigʻmay toshadi. Shu kenglikda karta
   yana bitta ustunga qaytadi, lekin slot yorligʻi kesilmasligi uchun slotga
   pol qoʻyiladi (172 px — 9 px dagi yorliq aynan shuncha joy soʻraydi). */
@media (max-width:360px){
  main .k2-list[data-rejim="plitka"] .k2-mah{
    grid-template-columns:minmax(0,1fr);row-gap:0;
  }
  main .k2-list[data-rejim="plitka"] .k2-mah__foto{
    grid-column:1;grid-row:1;width:clamp(172px,62%,196px);
  }
  main .k2-list[data-rejim="plitka"] .k2-mah__usti{grid-column:1;grid-row:2;margin:14px 0 8px}
  main .k2-list[data-rejim="plitka"] .k2-mah__nom h3{grid-column:1;grid-row:3}
  main .k2-list[data-rejim="plitka"] .k2-mah__tav{grid-row:4;margin:10px 0 0}
  main .k2-list[data-rejim="plitka"] .k2-mah__qosh{grid-row:5}
  main .k2-list[data-rejim="plitka"] .k2-mah__tex{grid-row:6}
  main .k2-list[data-rejim="plitka"] .k2-mah__ost{grid-row:7}
}


/* ==========================================================================
   §7 · CTA IERARXIYASI — aksent koʻk sahifada ROPPA-ROSA IKKI joyda
   Qayta dizayndan oldin bitta ekranda 6 ta toʻldirilgan aksent tugma turardi
   (hero · qidiruv · yakuniy qator · ikki auditoriya · forma) — hammasi bir xil
   kuchda, ya'ni ierarxiya yoʻq. Endi aksent faqat:
     1) heroning «Mahsulot roʻyxati» tugmasi — sahifaga kirish amali;
     2) formaning «Soʻrov yuborish» tugmasi — konversiya amali.
   Qolganlari mavjud komponent tilida pasaytirildi (yangi rang kiritilmadi):
   och sirtda navy tana + oq oʻq katagi, quyuq bandda oq tana yoki oq kontur.
   ========================================================================== */
main .btn--asos{background:var(--navy);color:#fff}
main .btn--asos:hover{background:var(--navy-800)}
main .btn--asos .btn__oq{background:#fff;color:var(--navy)}
main .btn--asos:hover .btn__oq{background:#fff}

/* 1 · hero — sahifaning asosiy amali */
main .hs__amal .btn--asos{background:var(--aksent)}
main .hs__amal .btn--asos:hover{background:#55A8E6}
/* 2 · forma — konversiya */
main .k2-konv .panel .btn--asos{background:var(--aksent)}
main .k2-konv .panel .btn--asos:hover{background:#55A8E6}

/* quyuq bandda navy tana koʻrinmaydi — auditoriya CTA lari oq va konturli */
main .k2-konv__tasma .k2-konv__ustun:nth-of-type(1) .btn--asos{
  background:var(--oq);color:var(--navy);border-color:var(--oq);
}
main .k2-konv__tasma .k2-konv__ustun:nth-of-type(1) .btn--asos:hover{background:#E8F0F9}
main .k2-konv__tasma .k2-konv__ustun:nth-of-type(1) .btn--asos .btn__oq{
  background:var(--navy);color:#fff;
}
main .k2-konv__tasma .k2-konv__ustun:nth-of-type(2) .btn--asos,
main .kat-konv__hudud .btn--asos{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.4);
}
main .k2-konv__tasma .k2-konv__ustun:nth-of-type(2) .btn--asos:hover,
main .kat-konv__hudud .btn--asos:hover{background:rgba(255,255,255,.08);border-color:#fff}
main .k2-konv__tasma .k2-konv__ustun:nth-of-type(2) .btn--asos .btn__oq,
main .kat-konv__hudud .btn--asos .btn__oq{background:rgba(255,255,255,.14);color:#fff}

/* mobil filtr tortmasi — sahifadan tashqaridagi qatlam, amal aksentda qoladi */
main .k2-varaq .btn--asos{background:var(--aksent)}
main .k2-varaq .btn--asos:hover{background:#55A8E6}


/* ==========================================================================
   §8 · FILTR YORDAMI («?») — 13.09 koʻrigi
   Filtr guruhlarining «?» tugmasi `place-items:center` tufayli ikki hairline
   orasida MARKAZLASHGAN yakka doira boʻlib chiqardi — guruhga tegishli
   boshqaruv emas, adashib qolgan nishoncha. Brif «belgi-doiralari» ni
   taqiqlaydi, filtr esa bu sahifaning asosiy UX ustuvorligi. Endi «?» qiymat
   roʻyxati bilan bitta oʻqga tekislanadi (chapdan), ajratuvchi chiziq va
   ortiqcha nafas kamayadi. Mobil tortmada ham shu qoida ishlaydi.
   ========================================================================== */
main .k2-f__nima{border-top:1px solid var(--chiziq-ichki);padding-top:8px;margin-top:0}
main .k2-f__nima > summary,
main .k2-varaq .kat-nima > summary{place-items:center start}
main .k2-f__nima > summary .kat-nima__b,
main .k2-varaq .kat-nima > summary .kat-nima__b{width:20px;height:20px;font-size:11px}
main .k2-f__nima p{margin-top:8px}

/* Mobil tortmada «?» butunlay alohida qatorni egallamaydi: nishonchaning oʻzi
   guruh sarlavhasining oʻng yoniga koʻtariladi (details qutisi yopiq holatda
   0 px), izoh matni esa ochilganda panel oxirida oʻz oʻrnida chiqadi. */
@media (max-width:1000px){
  main .k2-varaq .k2-f{position:relative}
  main .k2-varaq .k2-f__nima{position:static;border-top:0;padding-top:0;margin-top:0}
  main .k2-varaq .k2-f__nima > summary{position:absolute;top:16px;right:0;z-index:2}
}

/* Roʻyxat rejimi planshet/mobilda KARTAGA aylanadi (kat2.css §oxiri), lekin
   tasdiqlanmagan «Spetsifikatsiya» va «Artikul va qadoq» qatorlari jadval
   ustunlari tekis tursin deb `visibility:hidden` bilan berilgan — karta
   koʻrinishida bu har kartada ≈56 px koʻrinmas boʻsh joy qoldiradi. Kartada
   ustun tekislash kerak emas, shuning uchun ular butunlay yigʻiladi. */
@media (max-width:1000px){
  body:not([data-holat="qoralama"]) main .k2-list[data-rejim="royxat"] .k2-mah__spek:has(.mijozdan),
  body:not([data-holat="qoralama"]) main .k2-list[data-rejim="royxat"] .k2-mah__qadoq:has(.mijozdan){display:none}
}