/* ==========================================================================
   MaskeZaMob — Print Designer CSS
   ========================================================================== */

/* ── Page wrapper ──────────────────────────────────────────────────────────── */

.mzm-pd-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 60px;
    position: relative;
    min-height: 80vh;
}

/*
 * ⚠️ FLATSOME DAJE SVAKOM `<button>` BOČNU MARGINU. Izmereno 21.08.:
 *    `margin-right: 15.52px` na svakoj kartici šablona. Kolona je bila 164px,
 *    kartica 148.48px — razlika u decimalu ista kao margina.
 *
 *    Ne vidi se kao margina nego kao POGREŠNA ŠIRINA: kartice ne popune svoje
 *    kolone, praznina se skuplja uvek uz istu ivicu, i cela mreža deluje
 *    pomereno ulevo — iako je izmereno da je mreža savršeno centrirana (12/12).
 *    Vera je to prijavila kao „strana nije centrirana"; strana je bila u redu.
 *
 *    Treći put isti obrazac: Flatsome `<li>` sa 20,8px kod kartice proizvoda,
 *    `margin` na `<input>` kod pretrage, sada `<button>` ovde. Pravilo iz
 *    `KNOWLEDGE-BASE.md` važi doslovno: ako je kutija uža nego što po formuli
 *    treba, PRVO proveri `margin`.
 *
 * ⚠️ Gase se samo BOČNE margine. `margin-top` ostaje netaknut — `.mzm-pd-load-more`
 *    i drugi ga koriste namerno, a ovaj selektor (0,1,1) bi ih nadjačao.
 */
.mzm-pd-page button {
    margin-left: 0;
    margin-right: 0;
}

/* ── Step indikator ────────────────────────────────────────────────────────── */

.mzm-pd-steps {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.mzm-pd-step-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.mzm-pd-step-indicator--active {
    opacity: 1;
}

.mzm-pd-step-indicator__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mzm-accent, #3C83F5);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--mzm-font-family, inherit);
    flex-shrink: 0;
}

.mzm-pd-step-indicator:not(.mzm-pd-step-indicator--active) .mzm-pd-step-indicator__num {
    background: #e5e7eb;
    color: #6b7280;
}

.mzm-pd-step-indicator__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--mzm-navy, #0E1629);
    font-family: var(--mzm-font-family, inherit);
}

.mzm-pd-step-indicator__arrow {
    color: #d1d5db;
    font-size: 18px;
}

/* ── Step show/hide ────────────────────────────────────────────────────────── */

.mzm-pd-step {
    display: none;
}

.mzm-pd-step--active {
    display: block;
    animation: mzmPdFadeIn 0.25s ease;
}

@keyframes mzmPdFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Step 1: Naslovi ───────────────────────────────────────────────────────── */

.mzm-pd-page-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--mzm-navy, #0E1629);
    font-family: var(--mzm-font-family, inherit);
    margin: 0 0 8px;
}

.mzm-pd-page-subtitle {
    font-size: 16px;
    color: #6b7280;
    margin: 0 0 12px;
}

/* Objašnjenje usluge, preuzeto sa starog sajta (skraćeno). */
.mzm-pd-page-uvod {
    max-width: 620px;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
    margin: 0 0 20px;
}

/* ── Search ─────────────────────────────────────────────────────────────────── */

.mzm-pd-search-wrap {
    position: relative;
    max-width: 300px;   /* bilo 400px — 12.08. suženo, polje je stajalo samo na širokoj strani */
    margin-bottom: 24px;
}

.mzm-pd-search {
    width: 100%;
    /* Desnih 40px je mesto za lupicu. Ikona je od 12.08. DESNO, kao na strani
     * kategorije (`.mzm-catgrid-search-icon`) — dve pretrage rade istu stvar i
     * treba da izgledaju isto. Ranije je CSS govorio `left`, ali ikone u
     * markupu uopšte nije ni bilo. */
    padding: 10px 40px 10px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 24px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
    background: #fff;
    box-sizing: border-box;
}

.mzm-pd-search:focus {
    border-color: var(--mzm-accent, #3C83F5);
}

/* ⚠️ Flatsome gazi `border-radius` i `margin` na svakom `<input>`.
 *
 * Pravilo iznad traži 24px, a na ekranu je bio pravougaonik — isto što je
 * 12.08.2026. izmereno i na `.mzm-catgrid-search`, gde je `getComputedStyle`
 * vraćao `0px` umesto 8px. Puna zamka je u `KNOWLEDGE-BASE.md`.
 *
 * Specifičnost 0,2,1 (`wrap` + `input.klasa`) nadjačava Flatsome bez
 * `!important`. `margin: 0` ide uz to jer Flatsome dodaje donju marginu na
 * input, pa se sabira sa `margin-bottom` omotača. */
.mzm-pd-search-wrap input.mzm-pd-search {
    border-radius: var(--mzm-radius-full, 9999px);
    margin: 0;
}

/* Ukloni native browser ikone za type="search" */
.mzm-pd-search::-webkit-search-decoration,
.mzm-pd-search::-webkit-search-cancel-button,
.mzm-pd-search::-webkit-search-results-button,
.mzm-pd-search::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
}
.mzm-pd-search {
    -webkit-appearance: none;
    appearance: none;
}

.mzm-pd-search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    display: flex;
    align-items: center;
    line-height: 0;
}

/* ⚠️ `top: 50%` se računa na OMOTAČ. Ako omotač ikad postane viši od polja
 * (Flatsome-ova margina na inputu, razmak ispod `inline-block`-a), ikona pada
 * niže za tačno pola razlike. Zato `margin: 0` u pravilu iznad nije ukras.
 * Puna dijagnostika u `KNOWLEDGE-BASE.md`. */

/* ── Pretraga šablona u koraku 2 (05.09.2026.) ──────────────────────────────
 *
 * Isto polje kao za modele, ali u koloni izbora — pa je šire i lepi se uz vrh
 * mreže. `max-width: none` poništava 300px iz osnovnog pravila; kolona izbora
 * je već sama po sebi uska, a polje u njoj mora da primi i „A78824" i pun
 * naziv dizajna.
 *
 * ⚠️ Modifikator IZA osnovnog pravila — obrnut redosled ga ne bi primenio. */
.mzm-pd-search-wrap--sabloni {
    max-width: none;
    margin-bottom: 14px;
}

/* Desno mesto deli lupa i „✕" kad je pretraga aktivna, pa polje dobija širi
 * desni pad tek tada — inače bi prazno polje imalo rupu bez razloga. */
.mzm-pd-search-wrap--sabloni .mzm-pd-search {
    padding-right: 40px;
}

.mzm-pd-search-wrap--sabloni:has(.mzm-pd-search-clear:not([hidden])) .mzm-pd-search {
    padding-right: 68px;
}

/* ⚠️ `:has()` ne radi u starijim browserima. Tamo tekst prolazi ispod „✕" samo
 * kad je unos dugačak — nezgodno, ne slomljeno. Sakrivanje mora da promaši
 * bezbedno, pa se ovim NIŠTA ne krije, samo se dodaje razmak. */

.mzm-pd-search-clear {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: var(--mzm-radius-full, 9999px);
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mzm-pd-search-clear:hover {
    background: #e5e7eb;
    color: #374151;
}

/* ⚠️ Flatsome daje `<button>` punu širinu i bočnu marginu. Bez ovoga „✕"
 * preraste polje. Specifičnost 0,2,1, bez `!important`. */
.mzm-pd-search-wrap button.mzm-pd-search-clear {
    width: 22px;
    min-width: 0;
    margin: 0;
    line-height: 1;
}

/* ── Brendovi ──────────────────────────────────────────────────────────────── */

.mzm-pd-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.mzm-pd-brand-btn {
    /*
     * ⚠️ Smanjeno 14.09.2026. — pilule su delovale prevelike prema ostatku
     *    strane. Mobilni blok (<=768px) ima SVOJ padding i `min-height: 44px`
     *    i NIJE diran: 44px je donja granica za prst.
     * ⚠️ `line-height` i `margin` se pisu ODMAH — Flatsome ih na <button>
     *    gazi bez `!important`, pa bez njih visina pilule nije predvidiva.
     */
    padding: 7px 16px;
    margin: 0;
    line-height: 1.3;
    border-radius: 18px;
    border: 2px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--mzm-font-family, inherit);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.mzm-pd-brand-btn:hover {
    border-color: var(--mzm-accent, #3C83F5);
    color: var(--mzm-accent, #3C83F5);
}

.mzm-pd-brand-btn--active {
    border-color: var(--mzm-accent, #3C83F5);
    background: var(--mzm-accent, #3C83F5);
    color: #fff;
}

.mzm-pd-brand-btn--active:hover {
    background: var(--mzm-accent, #3C83F5);
    color: #fff;
}

/* ── Modeli grid ───────────────────────────────────────────────────────────── */

.mzm-pd-models-wrap {
    position: relative;
}

.mzm-pd-models {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}

.mzm-pd-models--visible {
    display: grid;
    animation: mzmPdFadeIn 0.2s ease;
}

.mzm-pd-model-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    font-family: var(--mzm-font-family, inherit);
}

.mzm-pd-model-btn:hover {
    border-color: var(--mzm-accent, #3C83F5);
    box-shadow: 0 4px 12px rgba(60, 131, 245, 0.15);
    transform: translateY(-2px);
}

.mzm-pd-model-btn__img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 6px;
}

.mzm-pd-model-btn__placeholder {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

.mzm-pd-model-btn__placeholder svg {
    width: 40px;
    height: 40px;
}

.mzm-pd-model-btn__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--mzm-navy, #0E1629);
    line-height: 1.3;
}

.mzm-pd-models-empty,
.mzm-pd-empty {
    color: #9ca3af;
    font-size: 14px;
    padding: 20px 0;
}

/* ── Step 2: Editor layout ─────────────────────────────────────────────────── */

/*
 * 20.08.2026. — tri kolone: izvor │ izbor │ pretpregled.
 *
 * ⚠️ SREDNJA KOLONA JE `minmax(0, 1fr)`, NE `1fr`. Podrazumevani minimum `1fr`
 *    kolone je `auto`, tj. min-content njenog sadržaja — a sadržaj je mreža sa
 *    stotinama kartica. Kolona se zato širi po sadržaju umesto da ga ograniči,
 *    izgura ceo `.mzm-pd-editor` van ekrana, i onda ni `overflow-x: auto` na
 *    spisku kolekcija ne pomaže: kontejner nije uži od sadržaja, pa nema šta da
 *    se skroluje. Do 20.08. je tako i bilo — šabloni i kolekcije su odlazili
 *    udesno i do kraja se nije moglo doći. Isti obrazac je već zapisan uz
 *    `auto-fit` u brendovima.
 */
.mzm-pd-editor {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: start;
}

/* Uži laptop: pretpregled se sužava pre nego što mreža ostane bez mesta. */
@media (max-width: 1240px) {
    .mzm-pd-editor {
        grid-template-columns: 190px minmax(0, 1fr) 250px;
        gap: 20px;
    }
}

@media (max-width: 860px) {
    .mzm-pd-editor {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    /*
     * ⚠️ Pretpregled ide PRVI na mobilnom, iako je u HTML-u poslednji. Kupac
     *    mora da vidi šta bira dok bira; na desktopu je desno jer se tamo vidi
     *    istovremeno sa mrežom, a na jednoj koloni „desno" ne postoji.
     */
    .mzm-pd-col-pregled {
        order: -1;
    }
}

/* ── Kolona 1: izvor (tabovi + kolekcije) ─────────────────────────────────── */

.mzm-pd-col-izvor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ── Kolona 2: izbor (mreža ili upload) ───────────────────────────────────── */

.mzm-pd-col-izbor {
    min-width: 0; /* Isti razlog kao minmax(0,1fr) — bez ovoga grid dete ne ume da se skupi. */
}

/* ── Kolona 3: pretpregled i dugme ────────────────────────────────────────── */

.mzm-pd-col-pregled {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/*
 * ⚠️ `sticky` SAMO od 861px naviše, i to kao `min-width` pravilo — NE kao
 *    `position: static` u mobilnom bloku.
 *
 *    Prvi pokušaj (20.08.) je bio upravo to: `sticky` u osnovnom pravilu, a
 *    `static` u `@media (max-width: 860px)`. Nije radilo, i to ne zato što je
 *    `static` pogrešan, nego zato što je osnovno pravilo stajalo **ISPOD**
 *    media bloka u fajlu. Media query ne diže specifičnost — oba selektora su
 *    `0,1,0`, pa pobeđuje onaj koji je kasnije. Pretpregled je ostajao zalepljen
 *    na telefonu i klizio preko kartice za upload i preko mreže šablona.
 *
 *    Isti obrazac kao „modifikator mora IZA osnovnog pravila", samo obrnut:
 *    ovde je osnovno pravilo završilo iza svog izuzetka. Zato izuzetak sada ide
 *    kao `min-width` — nema šta da se gazi, bez obzira na redosled.
 *
 * ⚠️ Radi samo zato što `page-print-designer.php` gasi `will-change: transform`
 *    na Flatsome `#wrapper`-u. Transformisan predak lomi i `fixed` i `sticky`.
 */
/*
 * ⚠️ `top` je 05.09.2026. prebačen sa `20px` na visinu sticky headera + razmak.
 *
 * Izmereno (vw=1440, vh=935): `position: sticky` JE bio primenjen i NIJEDAN
 * predak nije imao `overflow` koji ga lomi — dakle sticky je sve vreme radio.
 * Ali `top: 20px` lepi pretpregled 20px od vrha PROZORA, a header je sticky i
 * visok **113px**. Maskica je time zaglavljivala **93px ISPOD gornje ivice
 * headera**, pa joj je vrh nestajao — što izgleda kao da sticky ne radi.
 *
 * ⚠️ „Sticky ne radi" i „sticky radi ali je ispod headera" izgledaju isto.
 *    Razlikuju se samo merenjem `top` naspram visine headera.
 *
 * ⚠️ `--flatsome--header--sticky-height` postavlja Flatsome JS na `<html>`.
 *    Vezivanje za promenljivu, a ne za broj, znači da promena visine headera
 *    (drugi logo, druga navigacija) ne razbija ovo pravilo tiho.
 *    Rezerva `113px` je izmerena vrednost na dan pisanja.
 *
 * ⚠️ GRANICA KOJU TREBA ZNATI: pretpregled je visok **620px**. Uz `top` od
 *    ~129px traži prozor visok bar ~750px. Na 1440×935 staje sa viškom.
 *    Na nižem laptopu (vh ≈ 700) donji deo bi izlazio iz ekrana — tada se
 *    smanjuje razmak ili se pretpregled skraćuje. Nije rešeno unapred jer
 *    nije izmereno da se dešava.
 *
 * ⚠️ Radi samo zato što `page-print-designer.php` gasi `will-change: transform`
 *    na Flatsome `#wrapper`-u. Transformisan predak lomi i `fixed` i `sticky`.
 */
@media (min-width: 861px) {
    .mzm-pd-col-pregled {
        position: sticky;
        /* Razmak 16 → 32px (05.09.2026.) — sa 16px je maskica nalegala
         * pravo na donju ivicu headera i delovala stešnjeno. */
        top: calc(var(--flatsome--header--sticky-height, 113px) + 32px);
    }
}

/* ── Step 2 header (nazad + naziv modela) ──
 *
 * ⚠️ `align-items: baseline`, NE `center` — promenjeno 05.09.2026.
 *
 * Dva teksta su različite veličine (14px dugme, 15px naziv modela) i različitog
 * tipa elementa (`<button>` i `<div>`). Sa `center` se poravnavaju njihove
 * KUTIJE, a kutije nisu iste visine — `<button>` ima sopstveni `line-height`
 * koji browser postavlja. Tekst je zato izgledao razmaknut po visini, što je
 * Vera prijavila kao „nije u ravni".
 *
 * `baseline` poravnava LINIJU PISANJA, a to je ono što oko čita kao „u ravni".
 *
 * ⚠️ Uz to je i `line-height` izjednačen na oba deteta. Bez toga `baseline`
 *    radi, ali razlika u visini kutija i dalje pomera razmak ispod reda.
 */
.mzm-pd-step2-header {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.mzm-pd-back-btn {
    background: none;
    border: none;
    color: var(--mzm-accent, #3C83F5);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    padding: 0;
    font-family: var(--mzm-font-family, inherit);
    transition: opacity 0.15s;
    white-space: nowrap;
}

.mzm-pd-back-btn:hover {
    opacity: 0.7;
}

.mzm-pd-selected-model {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3; /* isti kao na dugmetu — vidi napomenu uz step2-header */
    color: var(--mzm-navy, #0E1629);
    font-family: var(--mzm-font-family, inherit);
}

/*
 * ⚠️ Ovde je do 20.08. stajao ceo Fabric.js sloj: `.mzm-pd-phone-wrap`,
 *    `#mzm-pd-canvas`, `.mzm-pd-phone-svg-wrap`, `.upper-canvas`,
 *    `.canvas-container`, `.mzm-pd-canvas-hint`. Fabric je obrisan sa `D-026`
 *    18.08., ali su pravila preživela dva dana, jer mrtav CSS ništa ne obara.
 *
 *    Nije ih našao čovek nego provera 24 u `tools/mzm-provera-doks.py`.
 *    Provereno grepom kroz page, cpt i js — nijedne klase nema u markupu.
 */

/* ── Add to cart dugme ─────────────────────────────────────────────────────── */

.mzm-pd-add-to-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 240px;
    padding: 11px 18px;
    background: var(--mzm-accent, #3C83F5);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--mzm-font-family, inherit);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.mzm-pd-add-to-cart-btn:hover {
    background: #2563eb;
}

.mzm-pd-add-to-cart-btn:active {
    transform: scale(0.98);
}

.mzm-pd-add-to-cart-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* ── Potvrda posle dodavanja (05.09.2026.) ──────────────────────────────────
 *
 * Klik više ne vodi u korpu, pa potvrda mora da se vidi NA STRANI. Zeleno
 * stanje dugmeta traje 2,5 s i vraća se samo — poruka ispod ostaje, jer nosi
 * link u korpu.
 *
 * ⚠️ Modifikator IZA `:hover` i `:disabled` — obrnut redosled bi ga `:hover`
 *    prebojio čim kupac ostane mišem na dugmetu, a to je posle klika uobičajeno.
 */
.mzm-pd-add-to-cart-btn--dodato,
.mzm-pd-add-to-cart-btn--dodato:hover {
    background: #15803d;
}

/* ⚠️ Pravila za `.mzm-pd-posle-dodavanja` su obrisana 05.09., istog dana kad su
 * napisana — poruka ispod dugmeta bila je treća potvrda iste stvari, uz brojač
 * u zaglavlju i zeleno dugme. Markup je obrisan zajedno sa njima, pa ovde nije
 * ostalo mrtvo pravilo. Provereno grep-om kroz page i js. */

/*
 * ⚠️ Tabovi `.mzm-pd-tabs` / `.mzm-pd-tab` / `.mzm-pd-tab-panel` su obrisani
 *    20.08. zajedno sa markupom — slanje svoje slike i spisak kolekcija stoje
 *    jedno ispod drugog i ne kriju se međusobno. Provereno grepom kroz page i
 *    js pre brisanja.
 */

/* ── Template galerija ─────────────────────────────────────────────────────── */

/*
 * ⚠️ LADDER, ne `auto-fill`. Do 20.08. je ovde stajalo
 *    `repeat(auto-fill, minmax(90px, 1fr))`, a `auto-fill` prati ŠIRINU, ne
 *    broj kartica — u širokoj koloni je napravio 11 šablona u redu. Isti
 *    obrazac je već jednom pao kod brendova.
 *
 * ⚠️ Pragovi su 550 / 850 / 1200 — ISTI ladder kao kartica proizvoda (`F-042`).
 *    Nije uveden nijedan nov prag; 768 i 360, koji su ovde stajali, bili su
 *    treći sistem u istom fajlu.
 *
 * ⚠️ `minmax(0, 1fr)`, ne `1fr` — inače najšira sličica u redu diktira širinu
 *    kolone i mreža se raširi preko svoje kutije.
 */
.mzm-pd-templates-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 1199px) {
    .mzm-pd-templates-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 849px) {
    .mzm-pd-templates-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 549px) {
    .mzm-pd-templates-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * ⚠️ `aspect-ratio` je 04.09.2026. PREMEŠTEN SA DUGMETA NA SLIKU.
 *
 * Do tada je dugme bilo kutija odnosa 9/16, a slika ju je punila 100% visine.
 * Kad su ispod slike dodati naziv, kataloški broj i cena (zahtev klijenta sa
 * sastanka 03.09.), tekst bi ulazio U tu fiksnu kutiju i gurao sliku — kartica
 * bi se izobličila.
 *
 * Sada: dugme je flex kolona bez fiksnog odnosa, a odnos 9/16 nosi slika.
 * Tekst raste ispod, kartica se prilagođava.
 */
.mzm-pd-template-btn {
    padding: 0;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s, transform 0.1s;
    display: flex;
    flex-direction: column;
    text-align: left;
}

/*
 * ⚠️ `@media (hover: hover)` — na dodirnom ekranu hover ostaje zalepljen posle
 *    tapa. Kako je hover davao ISTI accent border kao `--active`, poslednji
 *    dodirnut šablon je izgledao izabrano isto koliko i stvarno izabran, pa se
 *    nije videlo gde je kupac kliknuo. `scale(1.04)` je isto ostajao zalepljen.
 */
@media (hover: hover) {
    .mzm-pd-template-btn:not(.mzm-pd-template-btn--active):hover {
        border-color: var(--mzm-accent, #3C83F5);
        transform: scale(1.04);
    }
}

/*
 * ⚠️ Izabran šablon mora da se razlikuje i BEZ hover-a i bez boje — na telefonu
 *    je jedini signal. Deblja ivica + puniji ring + kvačica, ne samo nijansa.
 */
.mzm-pd-template-btn--active {
    border-color: var(--mzm-accent, #3C83F5);
    box-shadow: 0 0 0 3px rgba(60, 131, 245, 0.45);
    position: relative;
}

.mzm-pd-template-btn--active::after {
    content: "✓";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mzm-accent, #3C83F5);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

/*
 * ⚠️ `cover` — vraćeno 04.09.2026., pošto je pravi uzrok bio drugde.
 *
 * Klijent je prijavio da slike „deluju zumirano". Prva pretpostavka je bila da
 * je krivo `cover`, pa je stavljen `contain` — i tada su se pojavile sive trake
 * gore i dole, jer slika nije bila odnosa 9/16.
 *
 * ⛔ OBE IZMENE CSS-a SU BILE PROMAŠAJ. Uzrok nije bio u uklapanju nego u
 *    IZVORU: AJAX je vraćao WordPress veličinu `thumbnail`, a ona je
 *    **150×150, isečena u kvadrat**. Slika je na karticu stizala već obrezana.
 *    Nijedno `object-fit` pravilo ne vraća ono što je isečeno pri generisanju.
 *
 * Rešeno u `print-designer-cpt.php` prelaskom na veličinu `medium` (300px,
 * neisečena). Sa uspravnim izvorom `cover` sada popunjava kutiju bez gubitka.
 *
 * ⚠️ POUKA: kad slika izgleda pogrešno uokvirena, PRVO proveri koju veličinu
 *    WP zapravo servira — ne pravilo koje je uokviruje.
 *
 * ⚠️ Siva pozadina ostaje kao mreža za slučaj da neki šablon ipak nije uspravan.
 */
.mzm-pd-template-btn img {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: #f3f4f6;
    display: block;
    flex: 0 0 auto;
}

/*
 * Naziv, kataloški broj i cena ispod sličice (03.09.2026., zahtev klijenta).
 *
 * ⚠️ Klijent je izričito tražio da cena bude „nenametljiva" — zato je siva i
 *    manja od naziva, a ne istaknuta. Ovo je birački ekran, ne prodajni.
 *
 * ⚠️ NAZIV IDE U DVA REDA, A KUTIJA MU JE FIKSNA (09.09.2026., F-084).
 *
 *    Do 09.09. se sekao u JEDAN red sa `…`, uz obrazloženje da bi prelom
 *    razvukao kartice nejednako. Klijent je tražio suprotno — da se naziv vidi
 *    ceo — pa to obrazloženje pada. Izmereno istog dana upitom nad bazom:
 *    najduži naziv ima 43 znaka („Girls just wanna have fun providna pozadina“),
 *    a preko 30 ih ide samo šačica — dva reda pokrivaju gotovo sve.
 *
 *    Nejednake kartice se sprečavaju `min-height`-om od TAČNO dva reda
 *    (2 × 1.25 = 2.5em), ne sečenjem na jedan. Kratak naziv rezerviše isto
 *    mesto kao dug, pa red grida ostaje ravan.
 *    ⚠️ Što ipak ne stane u dva reda i dalje dobija `…` (`line-clamp: 2`),
 *       a pun naziv ostaje u `title` atributu dugmeta.
 *
 * ⚠️ `text-transform: none` NIJE ukras. `.mzm-pd-template-btn` je `<button>`,
 *    a Flatsome uppercase-uje tekst dugmadi — zato je naziv stajao kao
 *    „ABSTRACT C…“ dok je u `title` atributu pisalo „Abstract colors“. Isti
 *    string, dva ispisa: to je dokaz da uzrok NIJE u podacima nego u CSS-u.
 *    Nasleđivanje čini da dete pobedi bez obzira na specifičnost roditelja.
 */
.mzm-pd-template-meta {
    display: block;
    padding: 6px 7px 8px;
    min-width: 0; /* bez ovoga se `line-clamp` ne seče u grid koloni */
}

.mzm-pd-template-naslov {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: 2.5em; /* tačno dva reda pri line-height 1.25 */
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    color: #111827;
    text-transform: none;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/*
 * ⚠️ `.mzm-pd-template-sifra` se od 04.09.2026. VIŠE NE ISPISUJE na kartici —
 *    kataloški broj je prebačen u `data-sifra` atribut dugmeta. Pravilo ostaje
 *    jer je jeftino, a treba čim se šifra negde bude prikazivala (npr. uz
 *    izabrani šablon u pregledu). ⚠️ 09.09.2026. je šifra POČELA da se prikazuje u
 *    pregledu, ali preko svoje klase `.mzm-pd-preview-sifra` — OVO pravilo je
 *    i dalje neiskorišćeno i briše se pred live.
 */
.mzm-pd-template-sifra {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.2;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
}

/*
 * ⚠️ Cena je 04.09.2026. prebačena sa sive na accent plavu, na Verin zahtev.
 *
 *    Klijent je na sastanku 03.09. tražio da cena bude „nenametljiva", pa je
 *    prvo bila siva. Plava je uočljivija — ali je i JEDINSTVENA boja cene na
 *    celom sajtu od 04.09. (`--mzm-price` je istog dana prebačen na accent).
 *    Doslednost je pretegla: cena izgleda isto na kartici proizvoda, na strani
 *    proizvoda i ovde.
 *
 * ⚠️ Ostaje mala i lakša od naziva — „nenametljivo" je rešeno veličinom, ne
 *    bojom. Ako klijent prigovori, vraća se `#6b7280`.
 */
.mzm-pd-template-cena {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mzm-price, #3C83F5);
}

.mzm-pd-templates-empty {
    color: #9ca3af;
    font-size: 14px;
    padding: 20px 0;
}

/* ── Upload zona ───────────────────────────────────────────────────────────── */

/*
 * 20.08. — polje za slanje slike više nije ceo panel iza taba, nego kompaktna
 * kartica sa plusem na vrhu leve kolone, iznad spiska kolekcija.
 *
 * ⚠️ `position: relative` je na LABELI, ne na omotaču. Nevidljivi `<input>` se
 *    razvlači preko roditelja sa `inset: 0`; dok je to bio omotač, input je
 *    pokrivao i napomenu ispod, pa je klik na tekst o kameri otvarao birač
 *    fajlova.
 */
.mzm-pd-upload-wrap {
    margin-bottom: 4px;
}

.mzm-pd-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.mzm-pd-upload-label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px dashed #d1d5db;
    border-radius: 10px;
    cursor: pointer;
    color: #6b7280;
    font-family: var(--mzm-font-family, inherit);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.mzm-pd-upload-label:hover {
    border-color: var(--mzm-accent, #3C83F5);
    background: rgba(60, 131, 245, 0.04);
    color: var(--mzm-accent, #3C83F5);
}

.mzm-pd-upload-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f3f4f6;
    color: inherit;
}

.mzm-pd-upload-label__tekst {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mzm-pd-upload-label__tekst strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--mzm-navy, #0E1629);
    line-height: 1.2;
}

.mzm-pd-upload-label:hover .mzm-pd-upload-label__tekst strong {
    color: inherit;
}

.mzm-pd-upload-label__tekst small {
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.3;
}

/* Ista napomena kao u uvodu strane — ovde je kupcu potrebna, na mestu odluke. */
.mzm-pd-upload-napomena {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: #9ca3af;
}

/* Slika je izabrana — kartica to pokazuje, jer je pretpregled možda van vida. */
.mzm-pd-upload-wrap--izabrano .mzm-pd-upload-label {
    border-style: solid;
    border-color: var(--mzm-accent, #3C83F5);
    background: rgba(60, 131, 245, 0.06);
}

/*
 * ⚠️ Ovde su do 21.08. stajale kontrole canvas editora — `.mzm-pd-image-controls`,
 *    `.mzm-pd-control-label`, `.mzm-pd-slider`, `.mzm-pd-remove-btn`. Klizač za
 *    veličinu i dugme „ukloni sliku" postoje samo uz canvas, a canvas je obrisan
 *    sa `D-026`. Provereno grepom kroz page, cpt i js — nijedne nema u markupu.
 *
 *    Ovo je DRUGI nalaz mrtvog CSS-a u istom fajlu (prvi je bio Fabric sloj,
 *    20.08.). Mrtav CSS ništa ne obara, pa ga ništa i ne prijavljuje — nađen je
 *    tek kad se tražilo nešto drugo (`:hover` pravila).
 */

/* ── Loading overlay ───────────────────────────────────────────────────────── */

.mzm-pd-loading {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.mzm-pd-loading[hidden] {
    display: none;
}

.mzm-pd-loading__inner {
    background: #fff;
    border-radius: 12px;
    padding: 32px 40px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.mzm-pd-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top-color: var(--mzm-accent, #3C83F5);
    border-radius: 50%;
    animation: mzmSpin 0.8s linear infinite;
}

@keyframes mzmSpin {
    to { transform: rotate(360deg); }
}

.mzm-pd-loading__inner p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--mzm-navy, #0E1629);
    font-family: var(--mzm-font-family, inherit);
}

/* ==========================================================================
   MOBILNA VERZIJA
   ========================================================================== */

@media (max-width: 768px) {

    /* ── Page padding ── */
    .mzm-pd-page {
        padding: 16px 12px 100px; /* bottom padding za sticky dugme */
    }

    /* ── Step indikator ── */
    .mzm-pd-steps {
        gap: 8px;
        margin-bottom: 20px;
    }
    .mzm-pd-step-indicator__label {
        font-size: 13px;
    }

    /* ── Naslovi ── */
    .mzm-pd-page-title {
        font-size: 22px;
        margin-bottom: 6px;
    }
    .mzm-pd-page-subtitle {
        font-size: 14px;
        margin-bottom: 16px;
    }

    /* ── Search ── */
    .mzm-pd-search-wrap {
        max-width: 100%;
        margin-bottom: 16px;
    }

    /* ── Marke — scrollable red umesto wrapa ── */
    .mzm-pd-brands {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        margin-bottom: 20px;
        padding-bottom: 4px;
    }
    .mzm-pd-brands::-webkit-scrollbar { display: none; }
    .mzm-pd-brand-btn {
        flex-shrink: 0;
        padding: 10px 18px;
        font-size: 14px;
        min-height: 44px; /* touch target */
    }

    /* ── Model grid — 2 kolone na mobilnom ── */
    .mzm-pd-models {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .mzm-pd-model-btn {
        min-height: 44px;
        padding: 10px 8px;
    }
    .mzm-pd-model-btn__placeholder {
        width: 48px;
        height: 48px;
    }

    /* ── Step 2 header ── */
    .mzm-pd-step2-header {
        gap: 8px;
        margin-bottom: 14px;
    }

    /*
     * ⚠️ Blok koji je ovde stajao do 20.08. stilizovao je `.mzm-pd-editor-left`,
     *    `.mzm-pd-phone-wrap`, `.mzm-pd-canvas-hint`, `.mzm-pd-image-controls`,
     *    `.mzm-pd-slider` i `.mzm-pd-remove-btn` — nijedna od tih klasa ne
     *    postoji u markupu od `D-026`. Provereno grepom kroz page, cpt i js pre
     *    brisanja. Najopasnije je bilo `.mzm-pd-editor-left { height: 380px;
     *    overflow: hidden }`: da je klasa preživela preimenovanje, sekla bi
     *    pretpregled na mobilnom.
     */

    /*
     * ── Editor: jedna kolona; redosled je u bloku na 860px ──
     *
     * ⚠️ OSTAJE GRID. Do 21.08. je ovde stajalo `display: flex; flex-direction:
     *    column` i to je tiho sužavalo mrežu šablona za 20px.
     *
     *    Uzrok: osnovno pravilo ima `align-items: start`. U GRIDU je
     *    `align-items` VERTIKALNO poravnanje i bezopasno je. Čim `display`
     *    postane `flex` sa `column` smerom, ista reč znači HORIZONTALNO — deca
     *    se više ne rastežu na punu širinu nego se skupljaju na svoj sadržaj.
     *
     *    Izmereno: `.mzm-pd-editor` 336px, mreža unutar njega 316px, a mreži su
     *    i `padding` i `margin` nula. Nijedno pravilo mreže nije bilo krivo —
     *    kriva je bila reč koja je promenila značenje pod drugim `display`-em.
     *
     *    Grid sa `minmax(0, 1fr)` iz bloka na 860px već daje jednu kolonu, pa
     *    prelazak na flex ovde ništa nije ni dodavao.
     */
    .mzm-pd-editor {
        gap: 8px;
    }

    /* ── "Dodaj u korpu" — sticky na dnu ──
     *
     * ⚠️ VISINA OVE TRAKE NIJE SAMO ESTETIKA — od nje zavisi gde stoji
     *    dugme „nazad na vrh". Vidi `css/_layout.css`, blok `F-076`.
     *    Traka i tamošnja vrednost `bottom: 62px` su DVA BROJA ZA ISTU
     *    STVAR. Ako se ovde promeni `padding` ili `font-size`, tamo se
     *    MERI PONOVO — inače se raziđu i dugme opet upadne u traku.
     *
     * Smanjeno 06.09.2026. (Vera: „jako je veliko na mobilnom"):
     *
     *   padding 16px → 12px, font 16px → 15px
     *   visina  ~56px → ~46px
     *
     * ⚠️ VISINU DIKTIRA `line-height`, NE PADDING. Izmereno 06.09.2026. na
     *    390px: zatečena visina je bila **70px**, a padding je nosio samo 32
     *    od toga — ostalih 38px je bio jedan red teksta. To je Flatsome,
     *    koji `<button>` elementu zadaje `line-height` od ~2.4em, po istom
     *    obrascu po kom mu već gazi marginu i punu širinu.
     *
     *    ⛔ Zbog toga smanjivanje paddinga SAMO PO SEBI ne radi. Prva verzija
     *       ove izmene (padding 16→12, font 16→15) davala bi ~60px, ne 46 —
     *       greška je otkrivena tek merenjem na ekranu.
     *
     *    Zato `line-height` ovde stoji EKSPLICITNO. Ne zato što se zna tačno
     *    šta ga je postavilo, nego da više nije važno šta ga postavlja.
     *
     *    12 + 12 (padding) + 21 (1.4 × 15px)  =  45px
     *
     * ⚠️ VISINA SE VIŠE NE SMANJUJE. Dodirna meta ne sme ispod ~44px —
     *    ispod toga počinju promašeni klikovi, i to na jedinom dugmetu na
     *    ovoj strani koje donosi prodaju. 45px je namerno tik iznad praga.
     *
     * ⚠️ „Preveliko" je bila ŠIRINA, ne visina. Puna širina + ćoškovi +
     *    jednobojno plavo su davali utisak sistemske trake, ne dugmeta.
     *    Zato je 06.09. suženo i podignuto od dna, a visina ostavljena.
     *
     * ŠIRINA — zašto baš ovakva formula
     *
     *   width: min(270px, calc(100% - 140px))
     *
     *   Oduzetih 140px je slobodan pojas od po ~70px sa svake strane, i to
     *   nije estetika nego zaobilaženje dva postojeća stanara donjeg reda:
     *
     *     levo   — dugme za kolačiće (mereno sa screenshot-a: ~17–61px)
     *     desno  — „nazad na vrh", `#top-link`
     *
     *   Provera na najužem ekranu koji merimo:
     *     360px  →  220px dugmeta, po 70px slobodno  ✓
     *     390px  →  250px dugmeta                    ✓
     *
     *   Natpis „DODAJ U KORPU" sa ikonom traži ~180px, pa staje i u 220px.
     *
     * ⚠️ AKO SE NATPIS IKAD PRODUŽI, ovo se meri ponovo — tekst će se
     *    prelomiti u dva reda i traka poraste, a niko to neće očekivati.
     *
     * ⚠️ Centriranje ide preko `left/right: 0` + `margin: auto`, NAMERNO
     *    ne preko `transform: translateX(-50%)`. Na ovom projektu je
     *    `transform` već lomio `fixed` i `sticky` (vidi zaglavlje gore) —
     *    ovde bi bio bezopasan, ali se navika ne pravi na izuzecima.
     */
    .mzm-pd-add-to-cart-btn {
        position: fixed !important;
        bottom: 12px !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        width: min(270px, calc(100% - 140px)) !important;
        border-radius: 8px !important;
        /* ⛔ 9999 → 1000, `F-082`, 07.09.2026. NE DIZATI NAZAD.
         *
         * Dugme je stajalo IZNAD klizne korpe: kupcu su se u istom donjem
         * uglu videla tri plava dugmeta — „POGLEDAJ KORPU", „PORUČI" i ovo —
         * a dva su vodila na različite strane. Uočeno 07.09., screenshot.
         *
         * Izmereno na 390px, sa otvorenom korpom:
         *
         *   .mfp-bg      z-index 1042     (zatamnjenje)
         *   .mfp-wrap    z-index 1043     (fioka)
         *   #cart-popup  z-index auto     (dete .mfp-wrap-a)
         *   dugme        z-index 9999     ← iznad svega
         *
         * ⚠️ Klizna korpa je Magnific Popup, a 1042/1043 su NJEGOVE
         *    podrazumevane vrednosti, ne Flatsome-ove. Traže se u
         *    `.mfp-bg` / `.mfp-wrap`, ne u temi.
         *
         * ⛔ NIJE REŠENO SAKRIVANJEM DUGMETA DOK JE KORPA OTVORENA.
         *    To bi lečilo posledicu, i tražilo bi da se zna kad Magnific
         *    sklanja svoj omotač — a da ga ne sklanja, dugme bi ostalo
         *    sakriveno zauvek. Slaganje po dubini nema to stanje.
         *
         * ZAŠTO BAŠ 1000: iznad svega našeg na ovoj strani (najviši je
         * `#top-link` sa 21, vidi `_layout.css`), a udobno ispod 1042.
         *
         * ⚠️ Ovo NE dira `.mzm-pd-loading` (9999) ni `.mzm-pd-kolekcije`
         *    (100000) — oba su privremena i nikad nisu na ekranu istovremeno
         *    sa kliznom korpom. Ako se to ikad promeni, mere se posebno. */
        z-index: 1000 !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
        justify-content: center;
        max-width: none !important;
    }

    /* ── Template grid — broj kolona je u ladderu gore; ovde samo skrol ── */
    .mzm-pd-templates-grid {
        gap: 8px;
        max-height: none;
        overflow-y: visible;
    }

    /* ── Upload zona ── */
    .mzm-pd-upload-label {
        padding: 28px 16px;
    }
}

/* Vrlo mali ekrani (360px — iPhone SE, stariji Android) */
@media (max-width: 360px) {
    .mzm-pd-models {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ═══════════════════════════════════════════════════════════════════════════
   P-06 / D-026 — novi korak 2: pretpregled, kolekcije, učitavanje po strani
   ═══════════════════════════════════════════════════════════════════════════

   ⚠️ MERENJE NIJE URAĐENO. Ovaj blok je pisan bez pristupa sajtu i nije
      proveren ni na jednom pragu. Pre nego što se proglasi gotovim, mora kroz
      PRAVILO BR. 1 — 360, 390, 768/769, 860/861, 1440 — i to kroz konzolu
      (tools/mzm-mera-*.js), ne sa screenshota.

   ⚠️ Pragovi ispod (768, 860) su PREUZETI iz postojećeg fajla, da se ne uvode
      novi. `.mzm-pd-editor` se već lomi na 860.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Pretpregled maskice ─────────────────────────────────────────────────── */

.mzm-pd-preview {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
}

/*
 * Odnos 320:640 je isti onaj iz starog SVG mockup viewBox-a — zadržan namerno
 * da se pretpregled ne razlikuje od onoga na šta je klijent navikao.
 * Šabloni sa starog sajta su portrait ~1:2,1, pa se uklapaju bez rastezanja.
 */
.mzm-pd-preview__case {
	position: relative;
	width: 100%;
	max-width: 230px;
	aspect-ratio: 320 / 640;
	border-radius: 34px;
	overflow: hidden;
	background: #f3f4f6;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * ── Visina pretpregleda prati visinu PROZORA (24.09.2026.) ──────────────────
 *
 * Problem: na desktopu je kolona sticky, a VIŠA od prozora — pa se „Dodaj u
 * korpu" videlo tek kad strana dođe do kraja. Vera prijavila 24.09.
 *
 * Izmereno (vw=1440, dpr=2): kolona 677px, od toga maskica 460px, ostatak
 * (naziv + šifra + rečenica + dugme + razmaci) 217px; `top` kolone 147px
 * (header 115 + 32). Cela kolona traži prozor visok 147 + 677 = 824px.
 * Laptop 1440×900 u brauzeru ima ~780–800px → dugme je ispod ivice.
 * ⚠️ Napomena od 05.09. uz `sticky` kaže ~750px — tada kolona nije imala
 *    naziv i šifru (F-084, 09.09.). Granica je porasla tiho, sa sadržajem.
 *
 * Rešenje: širina maskice = (visina prozora − header − 32 − 240 rezerve − 16) / 2,
 * između 150px i dosadašnjih 230px. `aspect-ratio` 1:2 onda sam daje visinu.
 * Rezerva je 240, ne izmerenih 217 — naziv dizajna ume da pređe u dva reda.
 *
 * ⚠️ OVO PRAVILO MORA STAJATI ISPOD osnovnog `.mzm-pd-preview__case`. Media query
 *    ne diže specifičnost (vidi zamku uz `sticky` gore) — da stoji iznad, 230px
 *    bi ga tiho pregazio.
 * ⚠️ Donja granica 150px: ispod prozora od ~700px dugme ponovo izlazi iz ekrana.
 *    Nije rešavano unapred — nije izmereno da se dešava.
 */
@media (min-width: 861px) {
	.mzm-pd-preview__case {
		max-width: clamp(150px, calc((100vh - var(--flatsome--header--sticky-height, 113px) - 32px - 240px - 16px) / 2), 230px);
	}
}

/*
 * `cover`, ne `contain` — maskica se štampa preko cele površine i bela ivica
 * nije opcija. Posledica je da se višak seče, i zato iznad dugmeta stoji
 * rečenica koja to kaže kupcu (D-027).
 */
.mzm-pd-preview__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mzm-pd-preview__prazno {
	font-size: 14px;
	color: #9ca3af;
	text-align: center;
	padding: 0 20px;
}

/*
 * Naziv i kataloški broj izabranog dizajna (09.09.2026., F-084, zahtev
 * klijenta). Kupcu je naziv potvrda da je kliknuo na ono što je mislio;
 * klijentu je šifra jedini jednoznačan identifikator — u kolekcijama postoje
 * slični nazivi („Angela & Stitch“ i „Angela i Stič novogodišnji“).
 *
 * ⛔ `[hidden]` NE RADI SAM kad element ima `display` — zato uz oba elementa
 *    ide i `[hidden]` pravilo. Isti kvar je 05.09. „sakrivao“ kartice koje su
 *    se i dalje videle.
 *
 * ⚠️ Prazno je dok se ništa ne izabere, i vraća se u prazno kad kupac pošalje
 *    SVOJU sliku — ona nema ni naziv ni šifru.
 */
.mzm-pd-preview-info {
	display: block;
	max-width: 320px;
	margin: 0 auto 10px;
	text-align: center;
}

.mzm-pd-preview-info[hidden] {
	display: none;
}

.mzm-pd-preview-naziv {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #111827;
	overflow-wrap: anywhere;
}

.mzm-pd-preview-sifra {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.3;
	color: #6b7280;
	font-variant-numeric: tabular-nums;
}

.mzm-pd-preview-sifra[hidden] {
	display: none;
}

.mzm-pd-preview-hint {
	font-size: 13px;
	line-height: 1.5;
	color: #6b7280;
	text-align: center;
	margin: 0 auto 16px;
	max-width: 320px;
}

/* ── Kolekcije (čipovi) ──────────────────────────────────────────────────── */

/*
 * ⚠️ USPRAVAN SPISAK, ne vodoravna traka. Kolekcija ima 28 (+ „Svi dizajni") i u
 *    traci su izlazile van ekrana — do poslednjih se nije moglo doći. Visina je
 *    ovde jeftina, širina nije. Vodoravna traka ostaje samo na mobilnom, gde je
 *    prevlačenje prstom očekivano i gde kolona ionako zauzima celu širinu.
 *
 * ⚠️ `max-height` + `overflow-y` drži spisak da ne izdužuje stranu preko mreže
 *    šablona. Vrednost je usklađena sa `max-height` mreže (480px), da se dve
 *    kolone završavaju otprilike na istoj liniji.
 */
/*
 * ⚠️ BEZ svog skrola. Spisak se listao unutar kutije od 480px, pa je strana
 *    imala dva skrola jedan u drugom — kategorije se nisu videle do kraja, a
 *    nije bilo očigledno ni da se mogu skrolovati. Sada spisak ide do kraja
 *    strane, kao i mreža pored njega, a skroluje se samo strana.
 */
.mzm-pd-kolekcije {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

/* ── Vrh kolone: „Svi šabloni" + dugme „Kolekcije" ────────────────────────── */

.mzm-pd-izvor-vrh {
	display: flex;
	gap: 6px;
	margin-bottom: 8px;
}

/*
 * ⚠️ Dugme „Kolekcije" postoji SAMO ispod 861px — vidi blok na dnu fajla.
 *    Na desktopu ceo spisak stoji uspravno i nema šta da otvara.
 */
.mzm-pd-kol-toggle {
	display: none;
}

/* Zaglavlje panela ima smisla samo dok je panel panel — na desktopu ga nema. */
.mzm-pd-kolekcije__zaglavlje {
	display: none;
}

.mzm-pd-kolekcije-naslov {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #9ca3af;
	margin: 4px 0 6px;
}

.mzm-pd-kolekcija-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	width: 100%;
	padding: 6px 10px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	font-size: 13px;
	line-height: 1.3;
	color: #374151;
	cursor: pointer;
	text-align: left;
	transition: border-color .15s, background .15s, color .15s;
}

/*
 * „Svi šabloni" je polazna tačka i od 21.08. stoji u svom redu, uz dugme
 * „Kolekcije".
 *
 * ⚠️ NEMA više `padding-bottom` ni `border-bottom` koji su ga odvajali od
 *    spiska — dok je bio prvi čip u traci, ta dva pravila su ga činila VIŠIM od
 *    ostalih čipova. Vera je to videla kao „tabovi nisu iste veličine".
 */
.mzm-pd-kolekcija-btn--sve {
	flex: 0 0 auto;
	width: auto;
	font-weight: 600;
	border-color: #e5e7eb;
	border-radius: 999px;
	background: #fff;
}

/*
 * ⚠️ DVE STVARI, obe izmerene 21.08. na telefonu:
 *
 * 1. `:hover` je specifičnost `0,2,0`, a `--active` samo `0,1,0` — hover je
 *    nadjačavao aktivan čip BEZ OBZIRA NA REDOSLED. Izmereno: aktivan čip je
 *    imao `background: rgb(249,250,251)` (hover) i `color: rgb(255,255,255)`
 *    (active) — beo tekst na skoro beloj podlozi. Zato `:not(--active)`.
 *
 * 2. `@media (hover: hover)` — na dodirnom ekranu hover ostaje ZALEPLJEN posle
 *    tapa, pa je čip zadržavao hover boju i kad prst ode. Uređaj bez miša ovo
 *    pravilo sada uopšte ne dobija.
 *
 * ⚠️ Popravka od 20.08. (ponavljanje `--active` u mobilnom bloku) nije mogla da
 *    pomogne: gađala je redosled, a problem je bila specifičnost. Zadržana je
 *    jer i dalje tačno pokriva `background: #fff` iz istog bloka.
 */
@media (hover: hover) {
	.mzm-pd-kolekcija-btn:not(.mzm-pd-kolekcija-btn--active):hover {
		border-color: #d1d5db;
		background: #f9fafb;
	}
}

.mzm-pd-kolekcija-btn--active {
	border-color: #111827;
	background: #111827;
	color: #fff;
}

.mzm-pd-kolekcija-btn__broj {
	font-size: 11px;
	opacity: .6;
}

/* ── Status i „učitaj još" ───────────────────────────────────────────────── */

.mzm-pd-templates-status {
	font-size: 13px;
	color: #6b7280;
	text-align: center;
	margin: 12px 0 0;
}

.mzm-pd-load-more {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 10px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	color: #374151;
	cursor: pointer;
	transition: background .15s;
}

.mzm-pd-load-more:hover {
	background: #f9fafb;
}

/* ── Drag & drop povratna informacija ────────────────────────────────────── */

.mzm-pd-upload-wrap--over .mzm-pd-upload-label {
	border-color: #111827;
	background: #f9fafb;
}

/* ── Mobilni ─────────────────────────────────────────────────────────────── */

/*
 * ⚠️ Ispod 861px kolekcije NISU ni uspravan spisak ni vodoravna traka, nego
 *    panel koji se otvara dugmetom „Kolekcije".
 *
 *    Uspravan spisak od 28 stavki gurnuo bi mrežu šablona van ekrana. Traka je
 *    bila prvi pokušaj (20.08.) i pala je na upotrebi, ne na CSS-u: videlo se
 *    dva-tri čipa, ostatak se tražio prevlačenjem, i kupac nije mogao da vidi
 *    ŠTA uopšte postoji. Panel prikazuje ceo spisak odjednom.
 *
 *    Lista je i dalje JEDNA u DOM-u — isti `.mzm-pd-kolekcije` element koji na
 *    desktopu stoji uspravno u koloni. Dupliranje bi značilo dva spiska koja se
 *    raziđu.
 */
@media (max-width: 860px) {

	/* ── Dugme „Kolekcije" i panel ─────────────────────────────────────── */

	.mzm-pd-kol-toggle {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		flex: 1 1 auto;
		min-width: 0;
		padding: 6px 10px;
		border: 1px solid #e5e7eb;
		border-radius: 999px;
		background: #fff;
		font-size: 13px;
		line-height: 1.3;
		color: #374151;
		font-family: var(--mzm-font-family, inherit);
		cursor: pointer;
	}

	/* Kad je izabrana kolekcija, dugme nosi njeno ime — inače kupac ne zna gde je. */
	.mzm-pd-kol-toggle__ime {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 600;
		color: var(--mzm-navy, #0E1629);
	}

	.mzm-pd-kol-toggle__ime:not(:empty)::before {
		content: "· ";
		color: #9ca3af;
	}

	.mzm-pd-kol-toggle--otvoren .mzm-pd-kol-toggle__strelica {
		transform: rotate(180deg);
	}

	.mzm-pd-kol-toggle__strelica {
		margin-left: auto;
		flex-shrink: 0;
	}

	/*
	 * ⚠️ Panel je `fixed`, ne `absolute`. Radi samo zato što
	 *    `page-print-designer.php` gasi `will-change: transform` na Flatsome
	 *    `#wrapper`-u — transformisan predak lomi `fixed`.
	 *
	 * ⚠️ `display: none` dok nije otvoren, ne `visibility` — 28 dugmadi u
	 *    zatvorenom panelu inače ostaje u redosledu tabovanja.
	 */
	.mzm-pd-kolekcije {
		display: none;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100000;
		max-height: 70vh;
		overflow-y: auto;
		flex-direction: column;
		gap: 2px;
		margin: 0;
		padding: 0 12px 20px;
		background: #fff;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 32px rgba(0, 0, 0, .22);
		-webkit-overflow-scrolling: touch;
	}

	.mzm-pd-kolekcije--otvoren {
		display: flex;
	}

	.mzm-pd-kolekcije__zaglavlje {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		margin: 0 -12px 6px;
		padding: 14px 12px 10px;
		background: #fff;
		border-bottom: 1px solid #e5e7eb;
		font-size: 13px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: #6b7280;
	}

	.mzm-pd-kolekcije__zatvori {
		border: none;
		background: none;
		font-size: 18px;
		line-height: 1;
		color: #6b7280;
		cursor: pointer;
		padding: 4px 6px;
	}

	/* U panelu čipovi su spisak preko cele širine, ne pilule u traci. */
	.mzm-pd-kolekcije .mzm-pd-kolekcija-btn {
		width: 100%;
		justify-content: space-between;
		border-radius: 8px;
		min-height: 44px;
	}

	/*
	 * ⚠️ `--active` se MORA ponoviti ovde, i to na kraju bloka.
	 *
	 *    Pravilo `.mzm-pd-kolekcija-btn { background: #fff }` iznad ima istu
	 *    specifičnost (`0,1,0`) kao `.mzm-pd-kolekcija-btn--active`, a stoji
	 *    kasnije u fajlu — pa mu je gazilo crnu pozadinu. `color: #fff` iz
	 *    `--active` je preživeo, jer ga ovde niko ne dira.
	 *
	 *    Rezultat: beo tekst na beloj podlozi. Aktivan čip („Svi dizajni") bio
	 *    je nevidljiv na telefonu — ne prazan, nego neproziran u istoj boji.
	 */
	.mzm-pd-kolekcija-btn--active {
		border-color: #111827;
		background: #111827;
		color: #fff;
	}
}

@media (max-width: 768px) {
	.mzm-pd-preview__case {
		max-width: 240px;
	}

	/*
	 * Sticky „Dodaj u korpu" na dnu preklapa sadržaj — inline stil u
	 * page-print-designer.php ga fiksira. Ovaj razmak je da poslednji red
	 * šablona ne završi ispod dugmeta.
	 */
	.mzm-pd-col-izbor {
		padding-bottom: 72px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   RUCNI UNOS MODELA (14.09.2026.)

   ⛔ `.mzm-pd-models--visible` je `display: grid`. Dve klase u selektoru
      pobedjuju jednu, pa panel ne mora `!important`.
   ⛔ Flatsome gazi `margin`, `width` i `line-height` na `<button>` i
      `<input>` bez `!important` — zato se pisu ODMAH, u istom pravilu u
      kom se zadaje padding, a ne kad se praznina primeti.
   ═══════════════════════════════════════════════════════════════════════════ */

.mzm-pd-brand-btn--rucno {
    border-style: dashed;
}

.mzm-pd-models--rucno.mzm-pd-models--visible {
    display: block;
    max-width: 420px;
}

.mzm-pd-rucno-labela {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #374151;
}

.mzm-pd-rucno-polje {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    line-height: 1.4;
    height: auto;
    box-sizing: border-box;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    font-size: 15px;
    font-family: var(--mzm-font-family, inherit);
    box-shadow: none;
}

.mzm-pd-rucno-polje:focus {
    outline: none;
    border-color: var(--mzm-accent, #3C83F5);
}

.mzm-pd-rucno-greska {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #b32d2e;
}

.mzm-pd-rucno-napomena {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
}

.mzm-pd-rucno-dalje {
    display: inline-block;
    margin: 16px 0 0;
    padding: 12px 28px;
    line-height: 1.2;
    width: auto;
    border: 0;
    border-radius: 24px;
    background: var(--mzm-accent, #3C83F5);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--mzm-font-family, inherit);
    cursor: pointer;
}

.mzm-pd-rucno-dalje:hover {
    filter: brightness(0.94);
}

/* ⚠️ 44px je donja granica za prst — merena na 360px, ne pretpostavljena. */
@media (max-width: 549px) {
    .mzm-pd-models--rucno.mzm-pd-models--visible {
        max-width: none;
    }
    .mzm-pd-rucno-polje {
        min-height: 44px;
        font-size: 16px; /* ispod 16px iOS zumira stranu pri fokusu */
    }
    .mzm-pd-rucno-dalje {
        width: 100%;
        min-height: 44px;
    }
}