/* ==========================================================================
MAHSULOT SAHIFASI · 3-BRIF ZICHLIK QAYTA DIZAYNI (2026-09-13)
--------------------------------------------------------------------------
Brif: brif/3-ZICHLIK-RASMSIZ-12-09.md
· «NO GIANT SECTIONS» — oddiy boʻlim 540–765 px (viewportning 60–85 %)
· «DESIGN FOR THE VIEWPORT» — 1440×900 da birinchi ekran tugallangan
· «PRODUCT DETAIL: not every specification a giant card» — spetsifikatsiya
jadval/registr boʻlib zich koʻrsatiladi, tushuntirish yonma-yon ustunda
· «NO REAL IMAGES» — har media oʻrni loyihalangan slot (tizim.css §15)
Oʻlchov: 12 360 → nishon 8 500 px. Har kesish TUZILMAVIY:
MAH-01 lenta kadr YONIGA (tik), OEM registri sahna OSTIGA toʻliq kenglikka
MAH-TAB jadval | (kalit spetsifikatsiya + atama izohi) — ikki ustun
MAH-03 xossalar 2 → 3 ustunli registr, 11-band ikki ustunni egallaydi
MAH-04 tavsiya qutisi chiziqqa aylandi, ogohlantirishlar oʻng ustunga
MAH-05 sarf · oraliq · shkala bitta ritmda
MAH-09 oʻxshash artikul kartasi gorizontal qatorga (3 ta boʻsh karta
ishlab chiqarish darvozasida yashirin edi — 4 ustundan 3 tasi boʻsh
turardi, endi ustun yigʻiladi)
Bu fayl CSS roʻyxatining ENG OXIRIDA (qur.py). Eski fayllarga tegilmagan —
ortga qaytarish: shu faylni oʻchirish.
========================================================================== */
/* ==========================================================================
§0 · RITM — sahifa oʻz pogʻonasida (uch qiymat, tizim.css §6 dan zichroq)
Boʻlimlar orasi = ikki paddingning yigʻindisi: 68–116 px.
========================================================================== */
[data-blok^="MAH"]{
--zm-a:clamp(44px,4vw,58px); /* bob ochuvchi */
--zm-b:clamp(34px,3.1vw,45px); /* asosiy */
--zm-c:clamp(26px,2.3vw,33px); /* bogʻlovchi */
}
main [data-blok="MAH-03"][data-blok],
main [data-blok="MAH-04"][data-blok],
main [data-blok="MAH-11"][data-blok]{padding-block:var(--zm-a)}
main [data-blok="MAH-01"][data-blok]{padding-block:clamp(32px,3.2vw,46px) clamp(36px,3.4vw,49px)}
main [data-blok="MAH-TAB"][data-blok],
main [data-blok="MAH-02"][data-blok],
main [data-blok="MAH-05"][data-blok],
main [data-blok="MAH-08"][data-blok],
main [data-blok="MAH-09"][data-blok],
main [data-blok="MAH-10"][data-blok]{padding-block:var(--zm-b)}
main [data-blok="MAH-07"][data-blok]{padding-block:var(--zm-c)}
/* boʻlim shapkasi — sarlavha bloki bilan kontent orasi bitta qiymat */
main [data-blok^="MAH"] .bosh,
main [data-blok^="MAH"] .bosh-qator{margin-bottom:clamp(16px,1.7vw,24px);gap:clamp(8px,.8vw,10px)}
main [data-blok^="MAH"] .bosh .lid{max-width:52ch}
main [data-blok^="MAH"] h3{letter-spacing:var(--tracking)}
/* ==========================================================================
§1 · MAH-00 — bosh lenta (tizim.css `.hs--mahsulot`); faqat nozik tuzatish
========================================================================== */
[data-blok="MAH-00"] .hs__plita{margin-top:2px}
/* hero sloti yorligʻi: kadr boʻlimdan 52 px baland (inset −26) va parallaks bilan
siljiydi — `bottom:22px` da yozuv bandning pastki qirrasidan chiqib kesilardi */
[data-blok="MAH-00"] .hs__kadr:not(:has(img))::after{bottom:64px}
/* ==========================================================================
§2 · MAH-01 — MAHSULOT SAHNASI
12 ustunli sahna: 1–5 galereya · 6–12 nom, moslik, amal.
Galereya ichida kadr va koʻrinish lentasi YONMA-YON (lenta avval kadr ostida
184 px qoʻshardi). OEM registri sahnadan chiqib, ostida toʻliq kenglikdagi
texnik tasma boʻldi — u gorizontal maʼlumot, tik ustunda choʻzilib yotardi.
========================================================================== */
.pdp-sahna__grid{
grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:clamp(24px,3.2vw,52px);
row-gap:clamp(16px,1.8vw,24px);
}
@media (min-width:1081px){
.pdp-sahna__grid{row-gap:clamp(16px,1.8vw,24px)}
.pdp-sahna__bosh{grid-column:6/-1;grid-row:1}
.pdp-sahna__chap{grid-column:1/6;grid-row:1/span 2}
.pdp-sahna__ong{grid-column:6/-1;grid-row:2}
}
.pdp-sahna__chap{gap:clamp(16px,1.7vw,22px)}
.pdp-sahna__ong{gap:clamp(14px,1.5vw,20px)}
.pdp-sahna__bosh{gap:clamp(8px,.9vw,12px)}
.pdp-sahna h1{font-size:clamp(29px,2.8vw,40px);line-height:1.04;max-width:14em}
.pdp-tarif{font-size:clamp(15px,1.15vw,17px);line-height:1.45;max-width:44ch}
/* --- 2.1 galereya: kadr + tik lenta ------------------------------------- */
.pdp-gal{
display:grid;
grid-template-columns:minmax(0,1fr) clamp(112px,11vw,150px);
column-gap:clamp(12px,1.2vw,16px);row-gap:12px;align-items:start;
}
.pdp-kadr{
grid-column:1;grid-row:1;
aspect-ratio:1/1;max-width:280px;width:100%;
border:0;background:none;border-radius:0;overflow:visible;
}
/* kadrning oʻzi — tizim §15 sloti (sirt + ichki hairline + nisbat + indeks) */
.pdp-kadr__slot{position:absolute;inset:0;display:block}
.pdp-kadr__kut{
position:absolute;inset:0;z-index:2;display:grid;
align-content:center;justify-items:center;gap:10px;
padding:clamp(16px,1.8vw,26px);border:0;background:none;
}
.pdp-kadr__kut .ik{width:min(42%,124px);height:auto;aspect-ratio:1/1;color:#A9BCD1}
.pdp-gal[data-holat] .pdp-kadr__kut{display:grid}
.pdp-kadr__yoz{
grid-column:1/-1;grid-row:2;
font-size:var(--kichik);line-height:1.5;color:var(--slate);
text-align:left;max-width:46ch;
}
/* koʻrinish lentasi — tik, kadr yonida; qator: 38 px kvadrat + yozuv */
.pdp-lenta{
grid-column:2;grid-row:1;
display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-content:start;
border-top:1px solid var(--chiziq-ichki);
}
.pdp-lenta__t{
display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:start;
padding:7px 0;border-bottom:1px solid var(--chiziq-ichki);
}
.pdp-lenta__t figure{aspect-ratio:1/1;border-radius:var(--r-nishon);border:0}
.pdp-lenta__t figure::before{inset:4px;padding:0;border-radius:3px;content:""}
.pdp-lenta__t figure::after{content:"";left:auto;bottom:auto;inset:0;
background:linear-gradient(var(--chiziq) 0 1px,transparent 1px) 50% 50%/1px 10px no-repeat,
linear-gradient(90deg,var(--chiziq) 0 1px,transparent 1px) 50% 50%/10px 1px no-repeat}
.pdp-lenta__t span{font-size:11.5px;line-height:1.3;color:var(--slate);letter-spacing:var(--tracking);padding-top:2px}
.pdp-lenta__t[aria-pressed="true"] figure{outline:1.5px solid var(--navy);outline-offset:-1px}
.pdp-lenta__t[aria-pressed="true"] span{color:var(--navy);font-weight:600}
/* --- 2.2 qadoq almashtirgich va muhr ------------------------------------ */
.pdp-qadoq{gap:10px}
.pdp-qadoq__t{padding:9px 13px;font-size:13.5px}
.pdp-qadoq__t .ik{width:16px;height:16px}
.pdp-qadoq .mayda{line-height:1.45;max-width:46ch}
.pdp-muhr{padding-top:var(--s4);gap:10px;grid-template-columns:18px minmax(0,1fr);
font-size:13.5px;line-height:1.5}
.pdp-muhr .ik{width:18px;height:18px}
/* --- 2.3 oʻng ustun: moslik registri ------------------------------------ */
/* «Mos keladi / Mos emas» — ikki katakli qarama-qarshilik, quti emas */
.pdp-moslik{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:clamp(20px,2.2vw,34px);row-gap:6px;
padding:14px 0 0;background:none;border:0;border-top:1px solid var(--chiziq);
border-radius:0;
}
.pdp-moslik dt{grid-row:1;font-size:11px}
.pdp-moslik dt:nth-of-type(1){grid-column:1}
.pdp-moslik dt:nth-of-type(2){grid-column:2}
.pdp-moslik dd{grid-row:2;font-size:13.5px;line-height:1.5}
.pdp-moslik dd:nth-of-type(1){grid-column:1}
.pdp-moslik dd:nth-of-type(2){grid-column:2}
.pdp-moslik dt::before{content:"";display:inline-block;width:6px;height:6px;
background:var(--aksent);margin-right:8px;vertical-align:2px}
.pdp-moslik__yoq::before{background:#AFC0D3!important}
.pdp-sahna__ong .lid{font-size:15.5px;line-height:1.5;max-width:64ch}
.pdp-amal{padding-top:2px;gap:var(--s3)}
.pdp-amal__izoh{max-width:64ch}
/* --- 2.4 OEM registri — sahna ostidagi toʻliq kenglikdagi texnik tasma --- */
.pdp-oem{
display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);
column-gap:clamp(24px,3vw,48px);row-gap:var(--s4);align-items:start;
margin-top:clamp(16px,1.6vw,22px);padding-top:clamp(12px,1.3vw,17px);
border-top:1px solid var(--chiziq);
}
.pdp-oem__u{display:grid;gap:10px;align-content:start}
.pdp-oem__qator{border-top:0}
.pdp-oem__q{padding-top:0;padding-bottom:0}
.pdp-oem__q{white-space:nowrap}
.pdp-oem__q b{white-space:nowrap}
.pdp-oem__q span{font-size:clamp(16px,1.35vw,19px);white-space:nowrap}
.pdp-oem__tavs{gap:5px}
.pdp-oem__tavs li{padding:4px 9px;font-size:11.5px}
.pdp-oem__izoh{line-height:1.5}
/* --- 2.5 uchta ishonch bandi — yupqa qator ------------------------------ */
.pdp-foyda{
margin-top:clamp(12px,1.3vw,17px);padding-top:clamp(11px,1.2vw,15px);
gap:clamp(18px,2vw,34px);
}
.pdp-foyda h4{font-size:15px}
.pdp-foyda .mayda{line-height:1.45}
/* ==========================================================================
§3 · MAH-TAB — TEXNIK MAʼLUMOT
«not every specification a giant card»: chapda oʻlchov jadvali, oʻngda
kalit spetsifikatsiya + atamalar izohi. Izoh matni oʻchmadi — jadval bilan
YONMA-YON yotdi, shuning uchun balandlik jadvalning oʻzi bilan chegaralandi.
========================================================================== */
[data-blok="MAH-TAB"] .bosh-qator{margin-bottom:clamp(14px,1.5vw,20px);align-items:start}
.pdp-tab__qobiq{margin-top:0}
.pdp-tab .tab{padding-block:12px;font-size:14px}
.pdp-tab .tab-ich{padding-top:clamp(20px,2.2vw,30px)}
/* Chapda oʻlchov jadvali (ikki qatorni egallaydi), oʻngda kalit spetsifikatsiya
va atamalar registri ustma-ust — ikki ustun mustaqil oqadi, ustun ostida
boʻsh joy qolmaydi. Ostki ikki izoh — toʻliq kenglikdagi yakun qatori. */
/* `[hidden]` (0,1,0) ID selektoridan (1,0,0) kuchsiz — shuning uchun panel
yashirilganda ham `display:grid` boʻlib qolardi va ikki panel birga
koʻrinardi. Qoida endi faqat KOʻRINADIGAN panelga tegishli. */
.pdp-tab .tab-ich[hidden]{display:none}
#tp-fiz:not([hidden]){
display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
column-gap:clamp(28px,3.4vw,56px);row-gap:clamp(18px,2vw,26px);
align-items:start;
}
#tp-fiz .pdp-spek{grid-column:1;grid-row:1;display:grid;align-content:start;
grid-template-columns:minmax(0,1fr);gap:clamp(16px,1.8vw,22px)}
#tp-fiz .pdp-yon{grid-column:2;grid-row:1;display:grid;align-content:start;
gap:clamp(18px,2vw,26px)}
/* ostki ikki izoh — ikki ustunning ostidagi toʻliq kenglikdagi yakun qatori */
#tp-fiz .pdp-spek__ost{
grid-column:1/-1;grid-row:2;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:clamp(28px,3.4vw,56px);row-gap:12px;align-items:start;margin-top:0;
padding-top:var(--s4);border-top:1px solid var(--chiziq);
}
/* atamalar registri — akkordeon qatorlari (taʼrif ochiq, tafsilot yigʻilgan) */
.mah-izoh__q{border-bottom:1px solid var(--chiziq-ichki)}
.mah-izoh__q summary{
position:relative;display:block;list-style:none;cursor:pointer;
padding:7px 24px 7px 0;
font-size:13px;line-height:1.45;font-weight:600;color:var(--navy);
letter-spacing:var(--tracking);
}
.mah-izoh__q summary::-webkit-details-marker{display:none}
.mah-izoh__q summary::after{
content:"";position:absolute;right:2px;top:13px;width:11px;height:11px;
background:
linear-gradient(var(--aksent) 0 0) 50% 50%/11px 1.5px no-repeat,
linear-gradient(var(--aksent) 0 0) 50% 50%/1.5px 11px no-repeat;
transition:transform var(--anim) var(--ease);
}
.mah-izoh__q[open] summary::after{
background:linear-gradient(var(--aksent) 0 0) 50% 50%/11px 1.5px no-repeat;
}
.mah-izoh__q summary:hover{color:var(--aksent-matn)}
.mah-izoh__q .kichik{padding:0 24px 10px 0;font-size:13px;line-height:1.5}
/* kalit spetsifikatsiya — toʻldirilgan quti emas, ikki ustunli registr */
.mah-spek{padding:0;background:none;border:0;border-radius:0;gap:10px}
.mah-spek__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5)}
.mah-spek__list > div{
grid-template-columns:minmax(0,1fr);gap:2px;align-content:start;
padding:8px 0;border-top:1px solid var(--chiziq-ichki);
}
.mah-spek__list > div:nth-child(2){border-top:1px solid var(--chiziq-ichki);padding-top:8px}
.mah-spek__list dt{font-size:11.5px;line-height:1.35;color:var(--slate)}
.mah-spek__list dd{font-size:15px;line-height:1.25;font-weight:700;color:var(--navy);
text-align:left;letter-spacing:var(--tracking)}
.mah-spek .mayda{line-height:1.5;max-width:58ch}
/* oʻlchov jadvali — zich registr (15 qator) */
.mah-tds th,.mah-tds td{padding:6px 14px 6px 0;font-size:13px;line-height:1.3}
.mah-tds thead th{padding-bottom:9px;font-size:11px}
.mah-tds tbody tr:nth-child(odd){background:none}
.mah-tds tbody tr{border-bottom:1px solid var(--chiziq-ichki)}
.mah-tds tbody th{width:46%;font-weight:400;color:var(--ink)}
.pdp-jadval thead th:last-child{width:24%}
.pdp-jadval .pdp-jadval__talab{font-size:13px}
/* atama izohlari — oʻng ustun, yupqa qatorlar */
.mah-izoh{border-top:1px solid var(--chiziq)}
.mah-tds__ost{margin-top:0;max-width:none;font-size:13.5px}
[data-blok="MAH-TAB"] .pdp-spek__ost .kichik{font-size:12.5px;line-height:1.5}
/* 2 · viskozitet · 3 · moslik yorliqlari — ochilganda ham zich */
.pdp-vis{gap:clamp(18px,2vw,28px)}
/* chizma butun kenglikda 516 px boʻlardi — yorliq ochilganda boʻlim 1325 px ga
chiqardi; kenglik chegaralandi, oʻlchov nuqtalari registri yonida oʻqiladi */
.pdp-vis__chizma{padding:clamp(10px,1.2vw,16px);max-width:880px}
.pdp-vis__pastki{column-gap:clamp(28px,3.4vw,56px)}
.pdp-vis .reg__q{padding-block:12px}
.pdp-vis .reg__m h4{font-size:15px}
.pdp-vis .tana-k{font-size:13.5px;line-height:1.5}
.pdp-mos__q{padding-block:14px}
.pdp-mos__q p{font-size:13.5px;line-height:1.5}
.pdp-mos__ogoh{margin-top:0}
/* 3-yorliqda oʻng rels ostida 322 px oʻlik maydon bor edi: «bu moy NIMAGA
moʻljallanmagan» ogohlantirishi roʻyxat ostidan oʻng relsga koʻchdi —
rels endi «roʻyxatni qanday oʻqish kerak» boʻlib toʻliq oʻqiladi. */
.pdp-mos .pdp-mos__yon{gap:var(--s5)}
/* ==========================================================================
§4 · MAH-02 — NIMAGA MOʻLJALLANGAN
Bitta gʻoya: zamonaviy dvigatel moyga qanday yuk beradi. Proza chap,
uch yuklama oʻng — oʻlchangan qator, ortiqcha balandliksiz.
========================================================================== */
[data-blok="MAH-02"] .grid.g-7-5{column-gap:clamp(32px,4vw,64px)}
.mah-proza{gap:14px;max-width:62ch}
.mah-proza__bir{font-size:16px;line-height:1.5;color:var(--ink)}
.mah-proza .tana-k{font-size:15px;line-height:1.55;max-width:62ch}
.mah-proza__eslatma{margin-top:var(--s5);max-width:62ch;font-size:13.5px;line-height:1.5}
.mah-yuk li{padding-block:14px;gap:5px}
.mah-yuk h3{font-size:17px}
.mah-yuk .tana-k{font-size:14px;line-height:1.5;max-width:52ch}
/* ==========================================================================
§5 · MAH-03 — XOSSALARI
11 xossa: 2 ustunli keng registr → 3 ustunli zich registr (12 katak,
11-band ikki ustunni egallaydi — ragged qator qolmaydi).
Sarlavha bloki ikki ustunga: yorliq + H2 chapda, lid oʻngda.
========================================================================== */
/* SHAPKA NAQSHI — yorliq + H2 chapda, lid oʻngda (uch qatorli lid boʻlim
balandligiga qoʻshilmaydi). MAH-03 · MAH-08 · MAH-09 da bir xil.
Shapka toʻri TANA toʻri bilan bir xil: lidning chap qirrasi tanadagi
ikkinchi ustunning qirrasiga tushadi — boʻlim ichida bitta tik chiziq.
Tekislash YUQORIGA (Otabekning doimiy qoidasi): lid H2 ning pastiga emas,
yorliq bilan bitta yuqori qirraga bogʻlanadi. */
main [data-blok="MAH-03"] .bosh,main [data-blok="MAH-08"] .bosh,main [data-blok="MAH-09"] .bosh{
display:grid;row-gap:6px;align-items:start;
}
/* MAH-08 · MAH-09 tanasi 7fr/5fr */
main [data-blok="MAH-08"] .bosh,main [data-blok="MAH-09"] .bosh{
grid-template-columns:minmax(0,7fr) minmax(0,5fr);
column-gap:clamp(32px,4vw,64px);
}
/* MAH-03 tanasi uch teng ustun — lid 2–3 ustunni egallaydi */
main [data-blok="MAH-03"] .bosh{
grid-template-columns:repeat(3,minmax(0,1fr));
column-gap:clamp(22px,2.6vw,40px);
}
[data-blok="MAH-03"] .bosh .yorliq,[data-blok="MAH-08"] .bosh .yorliq,
[data-blok="MAH-09"] .bosh .yorliq{grid-column:1;grid-row:1}
[data-blok="MAH-03"] .bosh h2,[data-blok="MAH-08"] .bosh h2,
[data-blok="MAH-09"] .bosh h2{grid-column:1;grid-row:2}
[data-blok="MAH-08"] .bosh .lid,
[data-blok="MAH-09"] .bosh .lid{grid-column:2;grid-row:1/span 2;align-self:start;
max-width:56ch;font-size:14.5px}
[data-blok="MAH-03"] .bosh .lid{grid-column:2/-1;grid-row:1/span 2;align-self:start;
max-width:56ch;font-size:14.5px}
/* lid mayda CAPS yorliq bilan bitta optik qatorda boshlanadi */
[data-blok="MAH-03"] .bosh .lid,[data-blok="MAH-08"] .bosh .lid,
[data-blok="MAH-09"] .bosh .lid{margin-top:1px}
/* «Yoʻnalishni koʻrish» havolasi flex qatorda oʻralib chap chekkaga tushib
qolardi (shapka 151 px). Endi u shapka toʻrining OʻZIDA — H2 ning ostida,
chap ustunda, tanadagi solishtirish ustuni bilan bitta tik chiziqda. */
[data-blok="MAH-09"] .bosh-qator{display:block}
main [data-blok="MAH-09"] .bosh > .ha{grid-column:1;grid-row:3;justify-self:start;margin-top:4px}
.mah-xoss{
grid-template-columns:repeat(3,minmax(0,1fr));
column-gap:clamp(22px,2.6vw,40px);row-gap:0;
border-top:1px solid var(--chiziq);
}
.mah-xoss li{
grid-template-columns:26px minmax(0,1fr);gap:0 10px;align-items:start;
padding:12px 0;border-bottom:1px solid var(--chiziq-ichki);
}
.mah-xoss li > div{gap:5px}
.mah-xoss__n{font-size:12px;padding-top:3px}
.mah-xoss h3{font-size:16px;line-height:1.25}
.mah-xoss .tana-k{font-size:13.5px;line-height:1.5;max-width:44ch}
.mah-xoss__keng{grid-column:2/-1}
.mah-xoss__keng .tana-k{max-width:none}
.mah-xoss__ost{margin-top:14px;font-size:13.5px;line-height:1.5;max-width:82ch}
/* ==========================================================================
§6 · MAH-04 — QOʻLLASH SOHASI (quyuq band 2/2)
Quyuq bandning ichidagi ramkali «TAVSIYA» qutisi olib tashlandi (karta
ichida karta) — chiziq va tipografika qoldi. Ogohlantirishlar oʻng ustunga
koʻchdi: sahifada uch qator qoʻshimcha emas, bitta ustun ichida oqadi.
========================================================================== */
[data-blok="MAH-04"] .ich{
display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
column-gap:clamp(32px,4vw,64px);row-gap:clamp(18px,2vw,26px);align-items:start;
}
.mah4__chap,.mah4__ong{display:grid;align-content:start;gap:clamp(16px,1.8vw,24px)}
[data-blok="MAH-04"] .bosh{margin-bottom:0}
[data-blok="MAH-04"] h2{font-size:var(--tz-h2-b)!important;max-width:15em}
[data-blok="MAH-04"] .bosh .lid{max-width:58ch;font-size:14.5px}
.mah-tavsiya{padding:0;background:none;border:0;border-radius:0;gap:var(--s4)}
.mah-tavsiya__band{font-size:15px;line-height:1.5;max-width:68ch}
.mah-holat li{padding:8px 0 8px 22px;font-size:14px;line-height:1.5}
.mah-holat li::before{top:calc(8px + 8px)}
.mah-tavsiya__dizel{font-size:13.5px;line-height:1.55;max-width:68ch;
padding-top:var(--s4);border-top:1px solid var(--chiziq-quyuq)}
.mah-chip-qator{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
.mah-chip-qator__izoh{font-size:13.5px;line-height:1.55;max-width:none}
.mah-ogoh{grid-template-columns:minmax(0,1fr);gap:var(--s4);
padding-top:var(--s4);border-top:1px solid var(--chiziq-quyuq)}
.mah-ogoh .eslatma{font-size:13.5px;line-height:1.55}
.mah-ogoh__ha{margin-top:0;justify-self:start}
/* ==========================================================================
§7 · MAH-05 — QANCHA KETADI
Uch mavzu (sarf · oraliq · qisqartirish holatlari) bitta ritmda; hajm
shkalasi gorizontal, ogohlantirish va CTA bitta qatorda.
========================================================================== */
[data-blok="MAH-05"] .grid.g-6-6{column-gap:clamp(32px,4vw,64px);row-gap:var(--s6)}
/* ikki ustun bitta yuqori chiziqdan boshlanadi — chapda `.mah-sarf` ning
`border-top` i bor edi, oʻngda yoʻq; tasodifiy assimetriya edi */
[data-blok="MAH-05"] .grid.g-6-6 > * + *{
border-top:1px solid var(--chiziq);padding-top:0;
}
.mah-sarf__q{padding-block:var(--s4);gap:8px}
.mah-sarf__q:first-child{padding-top:0}
.mah-sarf__q h3{font-size:17px}
.mah-sarf__q .tana-k{font-size:14px;line-height:1.55;max-width:56ch}
.mah-sarf__bosh{margin-bottom:var(--s4);font-size:17px}
[data-blok="MAH-05"] .reg__q{padding-block:11px}
[data-blok="MAH-05"] .reg .tana-k{font-size:13.5px;line-height:1.5;max-width:64ch}
.mah-sarf__ha{margin-top:var(--s4)}
.mah-hajm{margin-top:clamp(14px,1.5vw,20px);gap:10px}
.mah-hajm__k{padding:var(--s4) clamp(12px,1.4vw,20px) 0 0}
.mah-hajm__n{font-size:clamp(19px,1.8vw,25px)}
.mah-hajm__k .tana-k{font-size:13px;line-height:1.5}
.mah-diqqat{margin-top:clamp(13px,1.4vw,18px);padding-top:14px;
border-top:1px solid var(--chiziq);gap:var(--s6);align-items:flex-start}
.mah-diqqat .eslatma{font-size:13.5px;line-height:1.55;max-width:82ch}
/* ==========================================================================
§8 · MAH-07 — HUJJATLAR (bogʻlovchi bob, eng past ogʻirlik)
========================================================================== */
.mah-huj__bosh{margin-bottom:var(--s4)}
.mah-huj{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,3.4vw,56px)}
.mah-huj__q{padding-block:var(--s4);gap:var(--s4);border-bottom:0;
border-top:1px solid var(--chiziq-ichki)}
.mah-huj{border-top:1px solid var(--chiziq)}
.mah-huj__q:nth-child(-n+2){border-top:0}
.mah-huj__m h3{font-size:17px}
.mah-huj__m .tana-k{font-size:13.5px;line-height:1.5}
.mah-huj__holat{font-size:11px;padding:5px 9px}
.mah-huj__ost{margin-top:14px;padding-top:14px;
border-top:1px solid var(--chiziq);font-size:13px}
/* ==========================================================================
§9 · MAH-08 — ORIGINALLIK
Ikki belgi + tekshiruv roʻyxati; media sloti 4:3, kompozitsiyaning bir
qismi (mustaqil «ekran» emas).
========================================================================== */
[data-blok="MAH-08"] .grid.g-7-5{column-gap:clamp(32px,4vw,64px)}
.mah-belgi li{padding-block:14px;gap:var(--s4);grid-template-columns:28px minmax(0,1fr)}
.mah-belgi li > div{gap:6px}
.mah-belgi h3{font-size:17px}
.mah-belgi .tana-k{font-size:13.5px;line-height:1.55;max-width:58ch}
.mah-kafolat{margin-top:14px;font-size:13.5px;line-height:1.55;max-width:62ch}
.mah-ong{gap:var(--s5)}
[data-blok="MAH-08"] .mah-foto{grid-template-columns:minmax(0,1fr)}
[data-blok="MAH-08"] .mah-foto .kadr{max-height:min(26vh,215px)}
[data-blok="MAH-08"] .mah-foto .kadr:not(:has(img))::after{left:16px;bottom:14px;font-size:10px}
.mah-yana__bosh{margin-bottom:var(--s3);font-size:16px}
.mah-yana li{padding:8px 0 8px 22px;font-size:13.5px;line-height:1.5}
.mah-yana li::before{top:16px}
/* ==========================================================================
§10 · MAH-09 — MUQOBIL VARIANT
Solishtirish chapda, oʻxshash artikul oʻngda gorizontal qator boʻlib.
Avval 4 ustunli karta toʻri edi; ishlab chiqarishda 3 tasi yashirin
(mijozdan kelmagan) — ustunlar boʻsh turardi.
========================================================================== */
[data-blok="MAH-09"] .ich{
display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
column-gap:clamp(32px,4vw,64px);row-gap:clamp(16px,1.8vw,24px);align-items:start;
}
[data-blok="MAH-09"] .bosh-qator{grid-column:1/-1;grid-row:1;margin-bottom:0}
.mah-solish{grid-column:1;grid-row:2;padding-top:var(--s5);
column-gap:clamp(28px,3.4vw,56px)}
.mah-solish::before{top:var(--s5)}
.mah-solish__k h3{font-size:17px}
.mah-solish__k .tana-k{font-size:13.5px;line-height:1.55}
.mah-solish__ost{grid-column:1;grid-row:3;margin-top:0;padding-top:var(--s4);
font-size:13px;max-width:none}
.mah-art{
grid-column:2;grid-row:2;
display:flex;flex-wrap:wrap;gap:0;margin-top:0;
border-top:1px solid var(--chiziq);
}
.mah-art__k{
flex:1 1 100%;
display:grid;grid-template-columns:84px minmax(0,1fr);
column-gap:var(--s4);row-gap:2px;align-items:start;
padding:var(--s4) 0;border:0;border-bottom:1px solid var(--chiziq-ichki);
}
.mah-art__kadr{grid-column:1;grid-row:1/span 4;border-radius:var(--r-nishon)}
.mah-art__kadr.kadr:not(:has(img))::before{inset:5px;padding:4px 5px;font-size:9px;border-radius:3px}
.mah-art__kadr.kadr:not(:has(img))::after{content:attr(data-indeks);left:8px;bottom:6px;font-size:9px}
.mah-art__k h3{grid-column:2;font-size:16px;line-height:1.25}
.mah-art__k .mayda{grid-column:2;line-height:1.4}
.mah-art__k .ha{grid-column:2;margin-top:6px;font-size:13px}
.mah-art__ost{grid-column:2;grid-row:3;margin-top:0;padding-top:var(--s4);
font-size:13px;max-width:none}
/* ==========================================================================
§11 · MAH-10 — SAVOL-JAVOB (akkordeon: uzun tushuntirish yigʻilgan)
========================================================================== */
.mah-fq__q summary{padding-block:12px}
.mah-fq__q h3{font-size:clamp(16px,1.35vw,18px);max-width:52ch}
.mah-fq__bel{width:15px;height:15px;margin-top:3px}
.mah-fq__bel::before{top:7px;width:15px}
.mah-fq__bel::after{left:7px;height:15px}
.mah-fq__q > p{padding-bottom:14px;font-size:14px;line-height:1.6;max-width:84ch}
/* ==========================================================================
§12 · MAH-11 — SOʻROV (konversiya: bitta kuchli kompozitsiya)
========================================================================== */
[data-blok="MAH-11"] .grid.g-5-7{column-gap:clamp(32px,4vw,64px)}
.mah-sorov__chap{gap:var(--s4)}
[data-blok="MAH-11"] .bosh{margin-bottom:0}
[data-blok="MAH-11"] .bosh .lid{max-width:52ch;font-size:15px}
.mah-xulosa{padding-block:14px;gap:10px}
.mah-xulosa__m{font-size:16px}
.mah-b2b{gap:8px}
.mah-b2b h4{font-size:16px}
.mah-b2b .tana-k{font-size:13.5px;line-height:1.55}
.mah-forma{gap:var(--s4)}
.mah-forma .maydon{gap:6px}
.maydon textarea{min-height:74px}
[data-blok="MAH-11"] .panel{background:var(--oq);padding:clamp(20px,2.2vw,30px)}
[data-blok="MAH-11"] .panel .maydon input,[data-blok="MAH-11"] .panel .maydon select,
[data-blok="MAH-11"] .panel .maydon textarea{background:var(--canvas);border-color:transparent}
[data-blok="MAH-11"] .panel__ost{margin-top:var(--s4);padding-top:var(--s4)}
/* ==========================================================================
§13 · RESPONSIV — 1100 · 1080 · 900 · 760 · 390
Mobil ATAYLAB: bitta ustun, ixcham kadr, ulkan tipografika yoʻq.
========================================================================== */
@media (max-width:1180px){
.mah-xoss{grid-template-columns:repeat(2,minmax(0,1fr))}
.mah-xoss__keng{grid-column:1/-1}
.pdp-oem{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:var(--s5)}
.pdp-oem__izoh{grid-column:1/-1}
}
@media (max-width:1080px){
.pdp-sahna__grid{grid-template-columns:minmax(0,1fr)}
.pdp-kadr{max-width:280px}
.pdp-gal{grid-template-columns:minmax(0,280px) minmax(0,1fr)}
#tp-fiz:not([hidden]){grid-template-columns:minmax(0,1fr)}
/* mobil tartib: kalit spetsifikatsiya → jadval → atamalar → yakun izohi.
Ochiq joylashuv (grid-row) tartibni bosib ketadi — shuning uchun bekor qilinadi. */
#tp-fiz .pdp-spek,#tp-fiz .pdp-yon{display:contents}
#tp-fiz > *,#tp-fiz .mah-spek,#tp-fiz .pdp-jadval,#tp-fiz .mah-izoh{
grid-column:auto;grid-row:auto}
#tp-fiz .mah-spek{order:1}
#tp-fiz .pdp-jadval{order:2}
#tp-fiz .mah-izoh{order:3}
#tp-fiz .pdp-spek__ost{order:4;grid-column:auto;grid-row:auto}
[data-blok="MAH-04"] .ich,[data-blok="MAH-09"] .ich{grid-template-columns:minmax(0,1fr)}
[data-blok="MAH-04"] .bosh,[data-blok="MAH-04"] .mah-tavsiya,
[data-blok="MAH-04"] .mah-chip-qator,[data-blok="MAH-04"] .mah-ogoh,
[data-blok="MAH-04"] .mah-ogoh__ha,
[data-blok="MAH-09"] .bosh-qator,[data-blok="MAH-09"] .mah-solish,
[data-blok="MAH-09"] .mah-solish__ost,[data-blok="MAH-09"] .mah-art,
[data-blok="MAH-09"] .mah-art__ost{grid-column:1;grid-row:auto}
.mah-ogoh{border-top:1px solid var(--chiziq-quyuq)}
}
@media (max-width:900px){
main [data-blok="MAH-03"] .bosh,main [data-blok="MAH-08"] .bosh,main [data-blok="MAH-09"] .bosh{
grid-template-columns:minmax(0,1fr)}
main [data-blok="MAH-09"] .bosh > .ha{grid-column:1;grid-row:auto}
[data-blok="MAH-03"] .bosh .yorliq,[data-blok="MAH-03"] .bosh h2,[data-blok="MAH-03"] .bosh .lid,
[data-blok="MAH-08"] .bosh .yorliq,[data-blok="MAH-08"] .bosh h2,[data-blok="MAH-08"] .bosh .lid,
[data-blok="MAH-09"] .bosh .yorliq,[data-blok="MAH-09"] .bosh h2,[data-blok="MAH-09"] .bosh .lid{
grid-column:1;grid-row:auto}
.mah-huj{grid-template-columns:minmax(0,1fr)}
.mah-huj__q:nth-child(2){border-top:1px solid var(--chiziq-ichki)}
.mah-spek__list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
[data-blok="MAH-08"] .mah-foto .kadr{max-width:min(100%,276px)}
.pdp-tab .tab{padding-left:0;padding-right:18px}
.mah-xoss{grid-template-columns:minmax(0,1fr)}
.pdp-gal{grid-template-columns:minmax(0,1fr)}
.pdp-kadr{grid-column:1;max-width:100%}
.pdp-lenta{grid-column:1;grid-row:2;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s4)}
.pdp-kadr__yoz{grid-row:3}
.pdp-oem{grid-template-columns:minmax(0,1fr)}
.mah-diqqat{flex-direction:column;align-items:flex-start;gap:var(--s4)}
.mah-art__k{grid-template-columns:64px minmax(0,1fr)}
.pdp-moslik{grid-template-columns:minmax(0,1fr)}
.pdp-moslik dt:nth-of-type(1),.pdp-moslik dd:nth-of-type(1),
.pdp-moslik dt:nth-of-type(2),.pdp-moslik dd:nth-of-type(2){grid-column:1;grid-row:auto}
.pdp-moslik{row-gap:4px}
#tp-fiz .pdp-spek__ost{grid-template-columns:minmax(0,1fr)}
.pdp-kadr{max-width:300px}
.pdp-moslik dd:nth-of-type(1){margin-bottom:10px}
}
/* ==========================================================================
§14 · KOʻRIK TUZATISHLARI (2026-09-13, mustaqil koʻrikdan keyin)
========================================================================== */
/* --- 14.1 MAH-02 — proza registri --------------------------------------
Ikki uzun xatboshi akkordeonga yigʻildi (matn oʻchmadi). Registr MAH-TAB
dagi atamalar registri bilan bitta tilda, faqat kegli tana matniga teng. */
.mah-proza__reg{margin-top:2px;border-top:1px solid var(--chiziq)}
.mah-proza__reg .mah-izoh__q summary{padding:11px 26px 11px 0;font-size:15px;line-height:1.45}
.mah-proza__reg .mah-izoh__q summary::after{top:16px}
.mah-proza__reg .mah-izoh__q .tana-k{
padding:0 26px 12px 0;margin-top:-2px;
font-size:14.5px;line-height:1.55;max-width:62ch;
}
/* --- 14.2 MAH-TAB · 2-yorliq (viskozitet) — chizma va matn yonma-yon -----
Avval chizma yolgʻiz qatorda (880 px) turib oʻngida 410 px boʻsh qolardi,
izoh ustuni ostida esa 242 px oʻlik maydon bor edi. Endi chizma 7fr,
izoh 5fr — bitta qator; oʻlchov nuqtalari registri ostida uch ustunda.
Panel 894 → ~590 px, boʻlim 1149 → 900 px atrofida. */
.pdp-vis{
grid-template-columns:minmax(0,7fr) minmax(0,5fr);
column-gap:clamp(28px,3.4vw,56px);row-gap:clamp(20px,2.2vw,30px);
align-items:start;
}
.pdp-vis__pastki{display:contents}
.pdp-vis__chizma{grid-column:1;grid-row:1;max-width:none;align-self:start}
.pdp-vis > .pdp-vis__pastki > .pdp-mos__yon{grid-column:2;grid-row:1}
.pdp-vis .reg{
grid-column:1/-1;grid-row:2;
grid-template-columns:repeat(3,minmax(0,1fr));
column-gap:clamp(22px,2.6vw,40px);
border-top:1px solid var(--chiziq);
}
.pdp-vis .reg__q{grid-template-columns:30px minmax(0,1fr);gap:0 10px;padding-block:13px}
.pdp-vis .reg__q:nth-child(-n+3){border-top:0}
.pdp-vis .reg__q:first-child{padding-top:13px}
.pdp-vis .reg__m h4{font-size:14.5px;line-height:1.3}
.pdp-vis .reg .tana-k{font-size:13px;line-height:1.5;max-width:44ch}
/* --- 14.3 MAH-08 · bitta kuchli kvadrat slot ----------------------------
zichlik3 §3 `main .kadr--1x1{max-height:min(38vh,340px)}` balandlikni
kesib nisbatni buzardi — kenglik bilan chegaralanadi, nisbat saqlanadi. */
[data-blok="MAH-08"] .mah-foto .kadr{
aspect-ratio:1/1; /* tizim.css §12 da 4/3 edi */
max-width:min(100%,432px);max-height:none;
}
/* slotning markazida qanday kadr kutilayotgani koʻrinib tursin: zichlash
(folga + plomba) silueti — boʻlimning oʻzi shu ikki belgi haqida.
Markaz krestchasi oʻrnini oladi, `![]()
` emas. */
[data-blok="MAH-08"] .mah-foto .kadr:not(:has(img))::before{
content:attr(data-nisbat);
background:
url("data:image/svg+xml;utf8,") 50% 48% / 28% 28% no-repeat;
}
[data-blok="MAH-08"] .mah-foto .kadr:not(:has(img)){background-size:0 0,0 0,auto}
[data-blok="MAH-08"] .mah-ong{gap:0}
[data-blok="MAH-08"] .mah-yana__bosh{margin-top:var(--s5)}
/* --- 14.4 Mayda slotlar «boʻsh kulrang quti» boʻlmasin -------------------
MAH-01 galereya eskizlari (38 px) va MAH-09 artikul kadri (84 px) ichida
faqat markaz krestchasi bor edi. Endi ikkalasida ham kanistr silueti —
asosiy slotdagi profil bilan bitta shakl (sprite `i-q5` yoʻlining nusxasi,
maska sifatida; `![]()
` emas, haqiqiy rasm emas). */
.pdp-lenta__t figure::after,
.mah-art__kadr.kadr:not(:has(img))::before{
--mah-siluet:url("data:image/svg+xml;utf8,");
}
/* eskiz = kichraytirilgan mahsulot sloti: kanistr silueti, kresti yoʻq */
.pdp-lenta__t figure::after{
content:"";inset:0;left:auto;bottom:auto;
background:none;
-webkit-mask:var(--mah-siluet) 50% 52% / 56% 56% no-repeat;
mask:var(--mah-siluet) 50% 52% / 56% 56% no-repeat;
background-color:#B7C7D8;
}
.pdp-lenta__t[aria-pressed="true"] figure::after{background-color:var(--navy)}
/* 84 px artikul kadri: siluet + indeks (nisbat yorligʻi bu oʻlchamda oʻqilmaydi) */
.mah-art__kadr.kadr:not(:has(img))::before{
content:"";inset:6px;padding:0;border-radius:4px;
-webkit-mask:var(--mah-siluet) 50% 54% / 52% 52% no-repeat;
mask:var(--mah-siluet) 50% 54% / 52% 52% no-repeat;
background-color:#B7C7D8;border-color:transparent;
}
.mah-art__kadr.kadr:not(:has(img)){
background-image:
linear-gradient(var(--chiziq) 0 1px,transparent 1px),
linear-gradient(90deg,var(--chiziq) 0 1px,transparent 1px);
background-size:1px 0,0 1px; /* markaz kresti oʻchdi — oʻrnini siluet oldi */
border:1px solid var(--chiziq-ichki);
}
.mah-art__kadr.kadr:not(:has(img))::after{
content:attr(data-indeks);left:7px;bottom:5px;font-size:9px;letter-spacing:0;
color:#93A4B6;
}
/* --- 14.5 MAH-00 · krosh mobilda ajratuvchi bilan sinmasin --------------
Flex qatorda `|` mustaqil band edi va qator oxirida osilib qolardi.
Tor ekranda ajratuvchi KEYINGI bandning oʻziga yopishadi. */
@media (max-width:620px){
[data-blok="MAH-00"] .hs__krosh{gap:0 8px}
[data-blok="MAH-00"] .hs__krosh > .hs__aj{display:none}
[data-blok="MAH-00"] .hs__krosh > :nth-child(n+3):not(.hs__aj)::before{
content:"|";color:rgba(255,255,255,.3);margin-right:8px;
}
}
/* --- 14.6 MAH-TAB · yorliq relsi mobilda bitta qatorda ------------------
390 px da rels ikki qatorga sinib, uchinchi yorliq faol chiziqchadan
ajralib qolardi. Endi gorizontal rels (brif: «horizontal-scroll»). */
@media (max-width:760px){
.pdp-tab .tablar{
display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
padding-inline:var(--chet);margin-inline:calc(var(--chet) * -1);
scrollbar-width:none;
}
.pdp-tab .tablar::-webkit-scrollbar{display:none}
.pdp-tab .tab{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
}