/* ============================================================ * MaskeZaMob.rs — Layout: bočni prostor na desktop širinama * ============================================================ * * Fajl: css/_layout.css * Putanja: wp-content/themes/flatsome-child/css/_layout.css * * Verzija: 1.1 — 09.08.2026. * * Zavisi od: _design-tokens.css * Vidi: DECISIONS.md → F-036, F-037 * ============================================================ * * PROBLEM * * Flatsome-ov `.container` ima `max-width: 1290px`. Čim ekran padne ispod * te vrednosti, kontejner se rastegne preko cele širine i bočne margine * nestanu — ostaje samo 15px paddinga. Sadržaj se doslovno lepi za ivice. * * Izmereno na dev sajtu 09.08.2026.: * * 1440px → 75px margine ✓ * 1366px → 38px margine * 1290px → 0px * 1240px → 0px (samo 15px padding) * * Prelaz nije postepen — sve preko 1290 ima margine, sve ispod ih nema. * Ceo opseg 1200–1290 je edge-to-edge, a tu živi veliki deo laptopova. * * OGRANIČENJE * * Bočni prostor se ne može dodavati slobodno: glavni meni ima 11 stavki * plus dugme „Print maskice" i traži **1190px** unutrašnje širine na * `font-size: 0.75rem`. Čim mu se oduzme više, prelama se u dva reda. * * Otud tri koraka umesto jedne vrednosti — svaki je najveći koji meni * podnosi na toj širini. Pragovi su izmereni, ne procenjeni: * * 1240px → 25px (izmereno 25) * 1280px → 45px (izmereno 45) * 1366px → 50px (izmereno 50, dalje ne raste jer je container * zaključan na 1290 pa širi ekran ne donosi prostor) * * Ako se meniju ikad doda stavka, ove pragove treba **ponovo izmeriti**. * Skripta: `tools/mzm-mera-laptop.js`, plus prag-tester iz `F-036`. * * ZAŠTO `.section-content` DOBIJA `max-width` * * Homepage sekcije nisu u `.container` nego u `.section-content`, koji je * pun po širini. Bez istog ograničenja sadržaj sekcija ne bi bio u liniji * sa headerom — ista neporavnatost kao `F-035`, samo u suprotnom smeru. * * Pozadine sekcija ostaju preko cele širine, jer ih nosi roditeljski * `.section`, ne `.section-content`. * ============================================================ */ /* ──────────────────────────────────────────────────────────── * ARHIVA — ista kutija kao Flatsome-ov `.container` (F-044) * * MORA stajati iznad ladder blokova. Selektor je iste specifičnosti kao onaj * u ladder-u, pa odlučuje redosled — obrnuto bi ovih 15px pojelo sva tri * koraka i bočni prostor bi na arhivi nestao. * * Puno obrazloženje je u bloku „ARHIVA PROIZVODA" pri dnu fajla. * ──────────────────────────────────────────────────────────── */ .woocommerce-page .shop-container { max-width: var(--mzm-sadrzaj-max); margin-left: auto; margin-right: auto; padding-left: var(--mzm-sadrzaj-pad); padding-right: var(--mzm-sadrzaj-pad); } /* ──────────────────────────────────────────────────────────── * RAZMAK ĆELIJE — kartica na spoljnoj ivici (F-044) * * Izmereno 10.08.2026. na 1440, leaf kategorija: * * .products.row sadržaj levo 125.0 ✓ na liniji headera * .mzm-pkart (prva) sadržaj levo 134.8 ✗ +9.8px * .mzm-pkart širina 218.41 (1190 / 5 = 238 − 2 × 9.8) * * Flatsome-ov `.row-small` daje svakoj `.col` bočni padding od 9.8px. Između * kartica je to razmak i tu treba; na SPOLJNIM ivicama je uvlačenje. * * `.row` u Flatsome-u to inače rešava negativnom marginom, ali `.products.row` * je nema — merenje pokazuje `kutija levo` 125, dakle tačno na ivici * roditelja. Negativna margina ispod je vraća. * * ⚠️ ZAŠTO OVO UOPŠTE SMETA: u grid modu je `.mzm-catgrid__item` izmereno na * 125.0 tačno, jer `.mzm-catgrid` koristi CSS grid sa `gap` i nema padding na * stavci. Dve grane istog templejta (`archive-product.php`) su se tako * razlikovale — na jednoj su kartice u liniji sa naslovom, na drugoj uvučene. * * ⚠️ 9.8px je IZMERENA Flatsome-ova vrednost, nije izabrana. `F-039` je u * komentaru tvrdio da je 7.5px — nikad provereno i pogrešno. Ako se u * Customize promeni razmak mreže, očitati ponovo: * * getComputedStyle(document.querySelector('.products .product-small')).paddingLeft * * ⚠️ `width: auto` NIJE ukras. Flatsome-ov `.row` ima `width: 100%`, a kutija * fiksne širine se negativnom marginom samo POMERA, ne širi. Izmereno na 1280, * sa samo negativnim marginama: * * .products.row sadržaj levo 35.2 desno 54.8 širina 1190 ← asimetrično * * Leva ivica se poklopila, desna je ostala 19.6px kratka, a kartica je zadržala * 218.41px umesto očekivanih 222.32. Asimetrija u ispisu je znak da je kutija * pomerena, a ne proširena — vredi je tražiti i kod drugih negativnih margina. * * Sa `width: auto` upotrebljena širina je `1190 + 2 × 9.8 = 1209.6`, po * definiciji iz CSS-a, pa se obe ivice poklapaju same. * * ⚠️ Ne preliva: na najužem pojasu gde padding pada na 10px (viewport 1220) * negativna margina od 9.8 ostavlja 0.2px. Ispod 1000px padding je 15px. * * Opseg je namerno `.archive` — strana proizvoda (`single-product`) ima svoje * „Povezani proizvodi" u istoj `.products.row` klasi i nju ovo ne dira. * Rezultati pretrage (`.search-results`) nisu proveravani; pretraga je * otvorena stavka. * ──────────────────────────────────────────────────────────── */ .woocommerce-page.archive .shop-container .products.row { width: auto; margin-left: -9.8px; margin-right: -9.8px; } @media screen and (min-width: 1000px) { .section-content { max-width: var(--mzm-sadrzaj-max); margin-left: auto; margin-right: auto; } /* ⚠️ Nije fiksnih 25px — vidi „MENI U POJASU 1000–1279" na dnu fajla. */ .container, .section-content, .woocommerce-page .shop-container { padding-left: clamp(10px, calc((100vw - 1210px) / 2), 25px); padding-right: clamp(10px, calc((100vw - 1210px) / 2), 25px); } } @media screen and (min-width: 1280px) { .container, .section-content, .woocommerce-page .shop-container { padding-left: 45px; padding-right: 45px; } } @media screen and (min-width: 1320px) { .container, .section-content, .woocommerce-page .shop-container { padding-left: 50px; padding-right: 50px; } } /* ⚠️ `.woocommerce-page .shop-page-title` je 10.08.2026. IZBAČEN iz sva tri * bloka iznad (F-044). * * Unutar njega je Flatsome-ov `.container`, koji ladder već dobija sam. Dok su * bila oba, padding se primenjivao dvaput. Na 1440 se to nije videlo jer * `max-width: 1290px` veže pa razliku pojede centriranje, ali na 1280 jeste: * * header: .container 1280 − 2×45 = sadržaj 1190, levo 45 * breadcrumbs: .shop-page-title 1280 − 2×45 = 1190, * pa .container 1190 − 2×45 = sadržaj 1100, levo 90 * * 90px umesto 45. Prag na 1280 je uveden 09.08. i nikad nije proveren na * breadcrumbs-ima — provera je išla na 1440, gde je greška nevidljiva. */ /* ============================================================ * ARHIVA PROIZVODA — jedna leva ivica, i to ona iz headera * ============================================================ * * ISTORIJA, jer je ovo mesto dvaput popravljano pogrešno. * * `F-039` (09.08.) — izmereno na 1440, tri leve ivice na jednoj strani: * * .shop-container levo 0 širina 1440 max-width: none * header.woocommerce-… levo 0 širina 1440 ← beži * nav.mzm-quick-tags levo 0 širina 1440 ← beži * .products.row levo 79 širina 1283 * breadcrumbs levo 125 * * Rešenje je bilo dvoslojno: ladder na spoljne omotače, pa `.row` geometrija * (1282.5px / 7.5px) na unutrašnje kutije. Sve četiri ivice su se poklopile * — na 86.25px. * * `F-043` (10.08.) — isti obrazac nađen i u grid modu: `.mzm-catgrid-wrap` je * imao svojih 1200px, 49.75px desno od breadcrumbs-a. Uveden token, da broj * ne živi u dva fajla. * * `F-044` (10.08.) — OBA prethodna su ciljala pogrešnu liniju. * * Nijedno merenje nije obuhvatilo header. Kad se i on izmeri: * * header (logo, meni) sadržaj 1190px leva ivica 125px * homepage sekcije sadržaj 1190px leva ivica 125px * arhiva posle F-039 sadržaj 1267.5px leva ivica 86.25px * * Arhiva je štrčala 38.75px preko linije koju drži vrh strane. Referenca nije * Flatsome-ov `.row` nego Flatsome-ov `.container` — isti zaključak kao u * `F-035`, gde je meni štrčao preko sadržaja i rešenje je bilo suziti meni. * * REŠENJE — JEDAN SLOJ * * `.shop-container` dobija `max-width` i `margin: auto`, čime se ponaša * doslovno kao `.container`. Sve unutar njega — naslov, quick tagovi, grid * podkategorija, mreža proizvoda — nasleđuje tu kutiju samo tako što je * blok element, bez ijednog dodatnog pravila. * * Time otpadaju SVA tri selektora iz `F-039` i sopstvena kutija * `.mzm-catgrid-wrap` iz `F-043`. Sedam pravila je zamenjeno jednim. * * ⚠️ Zato `.shop-page-title` više nije u ladder-u iznad: breadcrumbs su u * običnom `.container`, koji ladder dobija sam. Vidi napomenu tamo. * * Očekivano posle ispravke — sve četiri ivice na istoj vrednosti: * * viewport ladder kutija leva ivica sadržaj * 1440 50 1290 125.0 1190 * 1366 50 1290 88.0 1190 (max-width veže) * 1290 50 1290 50.0 1190 * 1280 45 1280 45.0 1190 * 1220 10 1220 10.0 1200 * 1199 10 1199 10.0 1179 * 1024 10 1024 10.0 1004 * * ⚠️ IVICA KARTICE NIJE IVICA KUTIJE — vidi blok „RAZMAK ĆELIJE" ispod. * * SPECIFIČNOST * * `_category-grid.css` se enqueue-uje na prioritetu 20, dakle POSLE ovog * fajla. Dok su ovde stajala pravila za `.mzm-quick-tags`, njihov * `margin: 0 0 20px` shorthand ih je gasio. Sad tamo nema šta da se gasi — * kutiju nosi roditelj. * * ⚠️ Samo pravilo je na VRHU fajla, iznad ladder blokova. Selektor * `.woocommerce-page .shop-container` je iste specifičnosti kao onaj u * ladder-u (0,2,0), pa odlučuje redosled: da stoji ovde, njegov padding od * 15px bi gazio sva tri koraka ladder-a i bočni prostor bi na arhivi nestao. * ============================================================ */ /* ============================================================ * MENI U POJASU 1000–1279 * ============================================================ * * Prag od 25px je meren NA 1240: 1240 − 50 = 1190, tačno onoliko koliko * meni traži. Ali je onda primenjen na ceo pojas od 1000 naviše, gde ta * računica ne stoji. Na 1220 daje 1170px i stavka „Više" pada u drugi red. * * Izmereno 09.08.2026. na 1220. Fiksna vrednost je zato zamenjena formulom * koja cilja 1210px unutrašnje širine — 20px iznad onoga što meni traži, * jer tačan sklop puca na zaokruživanju: * * clamp( 10px, (100vw − 1210px) / 2, 25px ) * * viewport padding unutrašnja širina meni * 1000 10px 980 prelama se (neizbežno) * 1190 10px 1170 prelama se (neizbežno) * 1220 10px 1200 staje ✓ * 1240 15px 1210 staje ✓ * 1260 25px 1210 staje ✓ * 1279 25px 1229 staje ✓ * * Donja granica od 10px postoji da sadržaj nikad ne dodirne ivicu. * * ⚠️ ISPOD ~1210px MENI NE STAJE NI SA NULA PADINGA. To nije greška u * ovom fajlu nego u dužini menija. Trajno rešenje je otvorena odluka iz * `TASKS-v5.md` — tri stavke pod „Više" oslobodile bi ~150px i spustile * granicu na ~1040. Do tada je ovo poznato ograničenje, ne bug. * * ⚠️ Ako se meniju doda stavka, 1210 treba PONOVO IZMERITI. * ============================================================ */ /* ============================================================ * Ako padding ne prihvati * ============================================================ * * Flatsome ponekad upisuje `padding` na `.section-content` inline, iz * `[section]` shortcode-a. Ako se posle kopiranja na server ništa ne * promeni, to je uzrok — tada `.section-content` pravilima treba dodati * `!important`. To je jedan od dva opravdana izuzetka na ovom projektu * (drugi su Flickity inline stilovi). * * Provera kroz konzolu: * document.querySelector('.section-content').getAttribute('style') * ============================================================ */ /* ============================================================ * Dugme „nazad na vrh" — F-076, 06.09.2026. * ============================================================ * * ⚠️ DUGME NIJE NAŠE. Uključeno je u Flatsome Customizer-u 06.09.2026. * (zahtev klijenta, lista šablona se dugo skroluje). Ovde se SAMO boji * i sklanja sa puta. Ako se ikad izgubi sa sajta, prvo se gleda * Customizer, pa tek onda ovaj fajl — vidi „Odluke koje NISU u * fajlovima" u README.md. * * Izmereno iz konzole 06.09.2026., zatečeno stanje: * * BUTTON#top-link * .back-to-top .button .icon .invert .plain .fixed .bottom .z-1 * .is-outline .circle .active * bottom: 20px z-index: 21 * * ⚠️ SPECIFIČNOST: `#top-link` je ID (1-0-0) i tuče svaki Flatsome-ov sklop * klasa (najviše 0-4-0). Zato ovde NEMA `!important` i ne treba mu. * Ako se boja ipak ne primi, uzrok je inline `style` atribut, ne * specifičnost — proveriti sa: * document.getElementById('top-link').getAttribute('style') * * ⚠️ `is-outline` znači providna pozadina i obojen obod. Zato se zadaje i * `background-color` I `border-color` — samo jedno ostavlja pola dugmeta * u zatečenoj boji. * ============================================================ */ #top-link { background-color: var(--mzm-accent, #3c83f5); border-color: var(--mzm-accent, #3c83f5); color: var(--mzm-text-on-accent, #fff); } #top-link:hover, #top-link:focus { background-color: var(--mzm-accent-hover, #0a5adb); border-color: var(--mzm-accent-hover, #0a5adb); color: var(--mzm-text-on-accent, #fff); } /* ── Sudar sa sticky trakom „Dodaj u korpu" ───────────────────────────── * * Na mobilnom Print dizajner lepi „Dodaj u korpu" preko cele širine na dno * ekrana (`print-designer.css`, `@media max-width: 768px`). Traka ima * `z-index: 9999`, dugme „na vrh" samo `21` — pa je dugme ZAVRŠILO ISPOD * trake i kroz nju se providelo. Uočila Vera 06.09.2026., screenshot. * * ⚠️ Ne rešava se dizanjem `z-index`-a. Dugme bi tada stajalo IZNAD trake, * ali i dalje NA njoj — dva dugmeta na istom mestu. Rešenje je da se * skloni iznad trake. * * ⛔ RAZDVAJANJE JE OD 06.09. VODORAVNO, NE PO VISINI. * * Dok je „Dodaj u korpu" bilo traka preko cele širine, jedini način da * se dugme skloni bio je da se digne iznad nje (`bottom: 70px`). Otkad * je dugme usko i centrirano, njih dvoje se mimoilaze levo-desno, pa * „na vrh" stoji **u istoj ravni** — obe donje ivice na 12px. * * Izmereno 06.09. na 390px, posle uklanjanja dvojnog pravila iz * `page-print-designer.php`: * * dugme x 70–320 * #top-link x 329–368 → razmak 9px * * Na 360px (najuži ekran koji merimo) računica daje isti razmak, jer * formula `min(270px, calc(100% - 140px))` sužava dugme zajedno sa * ekranom: 220px dugmeta, x 70–290, `#top-link` x ~299–338. * * ⛔ RAZMAK JE 9px I NEMA REZERVE. Ovo je jedina veza koja NIJE osigurana * vertikalno. Ako se ikad promeni `width` dugmeta u * `print-designer.css`, ili `right` Flatsome-ovog `#top-link`, ovo se * MERI PONOVO — i to na 360px, ne na 390. * * ⚠️ Visina dugmeta (45px) se ovde više ne koristi u računici, ali ostaje * zapisana jer objašnjava odakle je došla stara vrednost 70px: * padding 12 + 12 + 21 (line-height 1.4 × 15px) = 45px * Srednji sabirak je `line-height`, NE font. Prva verzija ove računice * ga je preskočila i dobila 46px umesto stvarnih ~60, jer Flatsome * `