/**
 * ============================================================
 * MaskeZaTelefon.rs — Kartica proizvoda v2.0
 * ============================================================
 * Markup: inc/mzm-kartica-proizvoda.php
 * Koriste je: woocommerce/content-product.php (arhiva, Shop, pretraga)
 *             inc/mzm-istaknuti.php (karusel na početnoj)
 *
 * v2.0 — 10.08.2026. (F-042) — JEDNA KARTICA ZA CEO SAJT
 *
 *   Do sada su postojale dve kartice. Izmereno na 1440px:
 *
 *     |                | početna         | lista kategorije   |
 *     |----------------|-----------------|--------------------|
 *     | slika          | 1:1             | 4:5                |
 *     | naziv          | 11,8px, 2 reda  | 13,4px, 3 reda     |
 *     | cena           | 13,4px          | 16px               |
 *     | korpa          | ikonica 30px    | tekstualno dugme   |
 *     | rezerva teksta | min-height 2.6em| min-height 110px   |
 *
 *   · `.mzm-pkart` je prebačen ovamo iz `_istaknuti.css`. Razlog nije uredniji
 *     raspored fajlova nego učitavanje: `_istaknuti.css` se enqueue-uje samo na
 *     početnoj i na stranama sa `[mzm_istaknuti]` shortcode-om, a kartica sada
 *     treba i na arhivi. `_product-card.css` ide na svakoj strani.
 *   · Obrisano ~150 linija Flatsome override-a za `.product-small` — slika,
 *     badge, naziv, cena, dugme, Quick View, `min-height` na `.box-text` i
 *     `.title-wrapper`. Ti elementi se više ne ispisuju.
 *   · Ladder kolona 2/3/4/5 (F-038) i shop layout su zadržani nepromenjeni.
 *
 *   Sporedna posledica koju je vredelo imati: naziv proizvoda pada sa 13,4px na
 *   11,8px, čime kapacitet dva reda raste sa ~52 na ~59 znakova. Nazivi iz
 *   feed-a su 49–56, dakle staju bez skraćivanja. Filter za skraćivanje prikaza
 *   naziva time više nije potreban — a nije ni smeo da bude, jer je na kraju
 *   naziva boja, koja je poseban proizvod (D-001).
 *
 * v2.1 — 04.09.2026. — feedback klijenta sa sastanka 03.09.
 *
 *   · Cena je plava (`--mzm-price` prebačen na accent).
 *   · Dugme „dodaj u korpu" **30×30 → 38×38px**, ikona **15 → 19px**.
 *     ⚠️ Brojka `30px` u tabeli iznad je ISTORIJSKA (stanje 10.08.), ne
 *        važeća — ostaje kakva jeste jer opisuje poređenje dve kartice.
 *   · Dodato `color: inherit` na `span.amount` u ceni.
 *     ⚠️ Nije stil nego BAG: `flatsome-shop.css` boji `span.amount { #111 }`,
 *        pa boja sa roditelja nikad nije stizala do iznosa. Zbog toga su i
 *        stara (`del`) i akcijska cena (`ins`) bile pogrešne boje — nije se
 *        videlo jer nijedan proizvod na dev-u nema akciju.
 *
 * v1.3 — 09.08.2026. (F-038) — ladder kolona, brisanje `min-width: 1400px`
 * ============================================================
 */

/* ==========================================================
 * 1. KARTICA — OSNOVA
 * ========================================================== */

.mzm-pkart {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: var(--mzm-font-family);
  background-color: var(--mzm-bg);
  border: var(--mzm-border-width) solid var(--mzm-border);
  border-radius: var(--mzm-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--mzm-transition-base),
              border-color var(--mzm-transition-base),
              transform var(--mzm-transition-base);
}

.mzm-pkart:hover {
  box-shadow: var(--mzm-shadow-card-hover);
  border-color: transparent;
  transform: translateY(-2px);
}

.mzm-pkart--nema {
  opacity: 0.7;
}

/* ==========================================================
 * 2. SLIKA
 * ========================================================== */

/* Kvadrat, ne 4:5.
 *
 * Na 5 kolona i širini kartice od 253px, 4:5 daje sliku od 316px, a 1:1 daje
 * 253px — kartica je niža za 63px, dakle za skoro četvrtinu. To je bio glavni
 * razlog zašto su kartice na listi delovale krupnije od onih na početnoj,
 * krupnije nego što im sadržaj traži. */
.mzm-pkart__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--mzm-surface);
}

.mzm-pkart__img,
.mzm-pkart__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--mzm-transition-slow);
}

.mzm-pkart:hover .mzm-pkart__img,
.mzm-pkart:hover .mzm-pkart__media img {
  transform: scale(1.05);
}

/* ==========================================================
 * 3. BADGE
 * ========================================================== */

.mzm-pkart__badge {
  position: absolute;
  top: var(--mzm-space-2);
  left: var(--mzm-space-2);
  z-index: 2;
  font-size: 0.625rem;
  font-weight: var(--mzm-font-semibold);
  letter-spacing: 0.03em;
  padding: 2px var(--mzm-space-2);
  border-radius: var(--mzm-radius-sm);
  color: #ffffff;
}

.mzm-pkart__badge--akcija {
  background-color: var(--mzm-sale-badge);
}

/* ==========================================================
 * 4. TEKST
 * ========================================================== */

.mzm-pkart__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--mzm-space-3);
  gap: 2px;
}

.mzm-pkart__cat {
  font-size: 0.625rem;
  font-weight: var(--mzm-font-medium);
  color: var(--mzm-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Naziv — dva reda.
 *
 * `line-clamp` ovde nije rešenje za duge nazive nego osigurač za izuzetke.
 * Računica na 1440, kartica 253px, unutrašnjih 227px: pri 11,8px u dva reda
 * staje ~59 znakova, a nazivi iz 3G feed-a su 49–56. Skraćivanje se dakle ne
 * očekuje u redovnom radu.
 *
 * ⚠️ Kad se ipak okine, seče se KRAJ naziva — a tamo stoji boja, koja je po
 * D-001 poseban proizvod. Ako se posle uvoza stakala pojave nazivi duži od
 * ~59 znakova, ovo treba ponovo izmeriti, a ne samo dići clamp na tri reda. */
.mzm-pkart__name {
  font-size: var(--mzm-text-xs);
  font-weight: var(--mzm-font-medium);
  color: var(--mzm-text-primary);
  line-height: var(--mzm-leading-normal);
  margin: 0 0 var(--mzm-space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.mzm-pkart__name a {
  color: inherit;
  text-decoration: none;
  transition: color var(--mzm-transition-fast);
}

.mzm-pkart__name a:hover {
  color: var(--mzm-accent);
}

/* ==========================================================
 * 5. CENA + KORPA — ISTI RED
 * ========================================================== */

.mzm-pkart__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mzm-space-2);
  margin-top: auto;
}

.mzm-pkart__price .price,
.mzm-pkart__price {
  font-size: var(--mzm-text-sm);
  font-weight: var(--mzm-font-bold);
  color: var(--mzm-price);
  line-height: 1.2;
}

.mzm-pkart__price del {
  display: block;
  font-size: 0.6875rem;
  font-weight: var(--mzm-font-regular);
  color: var(--mzm-price-old);
}

.mzm-pkart__price ins {
  text-decoration: none;
  color: var(--mzm-sale-badge);
}

/* ⚠️ Flatsome boji SAM iznos: `flatsome-shop.css` → `span.amount { color: #111 }`.
 *
 * `color` se nasleđuje, pa je pravilo na `.mzm-pkart__price` izgledalo kao da
 * radi — izmereno 04.09.2026.: roditelj `rgb(163,19,209)`, iznos `rgb(17,17,17)`.
 * Pravilo na POTOMKU pobeđuje nasleđivanje bez obzira na specifičnost roditelja.
 *
 * ⚠️ `inherit`, NE konkretna boja — namerno. Tako jedno pravilo tačno opslužuje
 *    sva tri slučaja, jer svaki nasleđuje od svog roditelja:
 *      redovna cena → `--mzm-price`      (plava)
 *      stara cena   → `--mzm-price-old`  (siva, kroz `del`)
 *      akcijska     → `--mzm-sale-badge` (crvena, kroz `ins`)
 *    Da je ovde upisana plava, stara i akcijska cena bi takođe pomodrele.
 *
 * ⚠️ Bag je pogađao i `del` i `ins` sve vreme — nije se video jer nijedan
 *    proizvod na dev-u nema akcijsku cenu. Proveriti kad je bude.
 *
 * Alat koji je ovo našao: `tools/mzm-ko-boji.js`. */
.mzm-pkart__price .woocommerce-Price-amount,
.mzm-pkart__price span.amount {
  color: inherit;
}

.mzm-pkart__price .woocommerce-Price-currencySymbol {
  font-size: 0.6875rem;
  font-weight: var(--mzm-font-medium);
}

.mzm-pkart__stock {
  font-size: 0.625rem;
  color: var(--mzm-text-secondary);
  white-space: nowrap;
}

/* Woo i Flatsome tretiraju `.add_to_cart_button` kao dugme — pun reset,
   inače ovo izraste u tekstualno dugme preko cele širine kartice. */
.mzm-pkart__cart.add_to_cart_button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* 30 → 38px, 04.09.2026. — zahtev klijenta „uvećati ikonu korpe".
   * ⚠️ Ovaj red deli sa cenom (`justify-content: space-between`), pa svako
   *    uvećanje uzima prostor ceni. Najuža kartica je ~160px (2 kolone na
   *    360px); cena tu traži ~65px, dugme 38 + gap 8 = 111px. Staje.
   *    Preko ~44px bi cena počela da se lomi — PROVERITI na 360 pre daljeg. */
  width: 38px;
  height: 38px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: var(--mzm-border-width) solid var(--mzm-border);
  border-radius: var(--mzm-radius-md);
  background-color: transparent;
  box-shadow: none;
  color: var(--mzm-accent);
  font-size: 0;
  line-height: 1;
  text-transform: none;
  transition: background-color var(--mzm-transition-fast),
              border-color var(--mzm-transition-fast),
              color var(--mzm-transition-fast);
}

.mzm-pkart__cart.add_to_cart_button:hover {
  background-color: var(--mzm-accent);
  border-color: var(--mzm-accent);
  color: var(--mzm-text-on-accent);
}

/* Ikona unutar dugmeta — 15 → 19px, srazmerno uvećanju dugmeta (pola širine). */
.mzm-pkart__cart svg {
  width: 19px;
  height: 19px;
  display: block;
}

/* Woo posle AJAX dodavanja ubaci „Prikaži korpu" link — sakrij ga u kartici. */
.mzm-pkart__foot .added_to_cart {
  display: none;
}

.mzm-pkart__cart.loading {
  opacity: 0.5;
}

.mzm-pkart__cart.added {
  background-color: var(--mzm-success);
  border-color: var(--mzm-success);
  color: #ffffff;
}

/* ==========================================================
 * 6. KARTICA U WOO MREŽI (arhiva, Shop, pretraga)
 * ==========================================================
 * Karusel na početnoj kartici daje visinu preko `.mzm-kar__item`, koji je
 * flex stavka i sam se rasteže. U Flatsome-ovoj `.row` mreži toga nema:
 * `.col` jeste flex stavka, ali `.col-inner` unutar njega nije flex kontejner,
 * pa `height: 100%` na `.mzm-pkart` nema od čega da računa i kartice u redu
 * ispadnu različite visine kad je jedna cena u dva reda (akcija: `del` je
 * `display: block`).
 *
 * Tri pravila ispod prosleđuju visinu kroz oba omotača. */

.products .product-small.col {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--mzm-space-6);
}

.products .product-small.col > .col-inner {
  display: flex;
  flex: 1 1 auto;
  /* Flatsome-ova kartica je pozadinu, ivicu i radijus imala OVDE. Sad ih nosi
     `.mzm-pkart`; da su ostali, dobila bi se dupla ivica oko svake kartice. */
  background: none;
  border: 0;
  box-shadow: none;
}

.products .product-small .mzm-pkart {
  flex: 1 1 auto;
}

/* ==========================================================
 * 7. SHOP PAGE LAYOUT
 * ========================================================== */

.shop-page-title .breadcrumbs {
  font-family: var(--mzm-font-family);
  font-size: var(--mzm-text-sm);
  color: var(--mzm-text-secondary);
}

.shop-page-title .breadcrumbs a {
  color: var(--mzm-text-secondary);
  transition: color var(--mzm-transition-fast);
}

.shop-page-title .breadcrumbs a:hover {
  color: var(--mzm-accent);
}

.woocommerce-result-count {
  font-family: var(--mzm-font-family);
  font-size: var(--mzm-text-sm);
  color: var(--mzm-text-secondary);
}

.woocommerce-ordering select {
  font-family: var(--mzm-font-family);
  font-size: var(--mzm-text-sm);
  border: var(--mzm-border-width) solid var(--mzm-border);
  border-radius: var(--mzm-radius-md);
}

/* Razmak od paginacije do sledeće sekcije.
 *
 * Izmereno 09.08.2026.: između donje ivice dugmadi paginacije i plave trake
 * „Budi Human" ostajalo je ~2px. Traka je delovala zalepljeno za paginaciju,
 * a pošto je pune širine i u boji, spoj je izgledao kao greška.
 *
 * Padding ide na `.shop-container`, ne na samu paginaciju — tako razmak
 * postoji i kad paginacije nema (kategorija sa manje od 20 proizvoda) i u
 * grid modu podkategorija. */
.woocommerce-page .shop-container {
  padding-bottom: var(--mzm-space-12);
}

/* Full width grid samo na glavnoj Shop stranici.
 *
 * Sidebar je 09.08.2026. uklonjen na izvoru — `do_action( 'woocommerce_sidebar' )`
 * je izbrisan iz `woocommerce/archive-product.php`. Ovo pravilo ostaje jer
 * Flatsome i dalje ispisuje `.col.large-9` kao omotač mreže. */
.post-type-archive-product:not(.tax-product_cat) .shop-container .col.large-9 {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
}

/* ==========================================================
 * 8. BROJ KOLONA — ladder od mobilnog do laptopa
 * ==========================================================
 * Pisano od najuže ka najširoj, sa min-width, da se kaskada
 * čita odozdo naviše i da svaki korak gazi prethodni.
 *
 * Širine kartice izračunate uz `.row` iz _layout.css, koji na
 * 1440 iznosi 1282.5px, a niže prati ladder bočnog prostora:
 *
 *   ≤549      2 kolone
 *   550–849   3 kolone
 *   850–1199  4 kolone
 *   ≥1200     5 kolona
 *
 * Rezultat na ključnim širinama:
 *
 *   viewport   .row    kolona   kartica
 *     1440    1282.5     5       253px
 *     1280    1190       5       238px
 *     1220    1170       5       231px
 *     1199    1149       4       283px
 *     1024     974       4       243px
 *
 * ⚠️ NEMA praga na 1400px. Prva verzija je imala 6 kolona iznad
 * te granice; odbačeno 09.08. jer je šest kartica delovalo
 * pretrpano. Brisanje pravila je ostavilo pet kolona na celom
 * opsegu od 1200 naviše — jedan prag manje, i to baš onaj koji
 * je dvaput napravio problem u `_header.css`.
 *
 * ⚠️ Ladder je 10.08. namerno OSTAVLJEN nepromenjen, iako je kartica
 * niža nego pre. Broj kolona i visina kartice su dva odvojena podešavanja;
 * menjati ih u istom prolazu znači ne znati koje je šta uradilo.
 * Ako se posle merenja pokaže da na 1440 stane šest — to je zaseban korak.
 * ────────────────────────────────────────────────────────── */

/* Osnova — 2 kolone na najužim ekranima */
.products.large-columns-3 > .product-small {
  max-width: 50% !important;
  flex-basis: 50% !important;
}

@media screen and (min-width: 550px) {
  .products.large-columns-3 > .product-small {
    max-width: 33.333% !important;
    flex-basis: 33.333% !important;
  }
}

@media screen and (min-width: 850px) {
  .products.large-columns-3 > .product-small {
    max-width: 25% !important;
    flex-basis: 25% !important;
  }
}

@media screen and (min-width: 1200px) {
  .products.large-columns-3 > .product-small {
    max-width: 20% !important;
    flex-basis: 20% !important;
  }
} /* ← kraj @media (min-width: 1200px) — poslednji korak ladder-a */

/* ==========================================================
 * 9. MOBILNI
 * ==========================================================
 * Isti blok važi i za karusel na početnoj i za mrežu na arhivi —
 * to je i poenta jedne kartice.
 *
 * Na 360px: arhiva daje 2 kolone → kartica ~155px, karusel 2,35 u vidnom
 * polju → ~136px. Uža od te dve je merodavna za font. */

@media screen and (max-width: 549px) {

  .mzm-pkart__body {
    padding: var(--mzm-space-2);
  }

  .mzm-pkart__name {
    font-size: 0.6875rem;
  }

  .products .product-small.col {
    margin-bottom: var(--mzm-space-4);
  }
}

/* ==========================================================
 * 10. REDUCED MOTION
 * ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .mzm-pkart,
  .mzm-pkart__img,
  .mzm-pkart__media img {
    transition: none;
  }

  .mzm-pkart:hover {
    transform: none;
  }

  .mzm-pkart:hover .mzm-pkart__img,
  .mzm-pkart:hover .mzm-pkart__media img {
    transform: none;
  }
}