/**
 * ============================================================
 * MaskeZaMob.rs — Istaknuti proizvodi: karusel + kompaktna kartica v1.0
 * ============================================================
 * Koristi se za sekcije „Najpopularnije" i „Najnoviji proizvodi".
 * Markup: inc/mzm-istaknuti.php · Ponašanje: js/istaknuti.js
 *
 * Kartica je namerno uža i niža od .product-small iz _product-card.css —
 * na desktopu ih staje 6 u red umesto 5, a slika je 1:1 umesto 4:5.
 *
 * Ručice (postavi na .mzm-kar preko inline style ili nadjačaj ovde):
 *   --mzm-kar-vidljivo : koliko kartica staje u vidno polje (shortcode ga postavlja)
 *   --mzm-kar-razmak   : razmak između kartica
 * ============================================================
 */

/* ==========================================================
 * 1. KARUSEL — OKVIR
 * ========================================================== */

.mzm-kar {
  /* Shortcode kroz inline style postavlja SAMO --mzm-kar-vidljivo-desktop.
   * Da postavlja --mzm-kar-vidljivo direktno, inline stil bi nadjačao i
   * media query-je ispod (inline je specifičniji od svakog selektora), pa se
   * broj kolona nikad ne bi smanjio na tabletu i mobilnom. */
  --mzm-kar-vidljivo: var(--mzm-kar-vidljivo-desktop, 6);
  --mzm-kar-razmak: var(--mzm-space-3);

  position: relative;
  font-family: var(--mzm-font-family);
}

/* ── Zaglavlje: naslov levo, „Pogledaj sve" + strelice desno ── */
.mzm-kar__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mzm-space-4);
  margin-bottom: var(--mzm-space-6);
}

.mzm-kar__headings {
  min-width: 0;
}

/* Vrednosti izmerene sa žive stranice, da naslov bude identičan ostalim
 * sekcijama početne (te koriste [ux_text font_size="1.4"] → 35.84px, w700).
 * Boja se namerno NE postavlja — nasleđuje se Flatsome-ova za h2 (#555),
 * ista kao kod „Izdvojene objave" i „Pronađi masku za svoj telefon".
 * Clamp gornju granicu dostiže na ~918px, pa je desktop poklapanje tačno. */
.mzm-kar__title {
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.24rem);
  font-weight: var(--mzm-font-bold);
  line-height: var(--mzm-leading-tight);
  margin: 0 0 4px;
}

.mzm-kar__subtitle {
  font-size: 0.95rem;
  color: var(--mzm-text-secondary);
  margin: 0;
}

.mzm-kar__header-tools {
  display: flex;
  align-items: center;
  gap: var(--mzm-space-3);
  flex-shrink: 0;
}

.mzm-kar__more {
  font-size: var(--mzm-text-sm);
  font-weight: var(--mzm-font-semibold);
  color: var(--mzm-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--mzm-transition-fast);
}

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

.mzm-kar__footer-tools {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--mzm-space-3);
}

.mzm-kar__admin-note {
  font-size: var(--mzm-text-sm);
  color: #7a5c00;
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: var(--mzm-space-2) var(--mzm-space-3);
  border-radius: var(--mzm-radius-sm);
  margin: 0 0 var(--mzm-space-3);
}

/* ==========================================================
 * 2. STRELICE
 * ========================================================== */

/* Flatsome stilizuje svaki <button> — pun reset, inače ovo izraste u dugme. */
.mzm-kar__nav {
  display: flex;
  gap: var(--mzm-space-2);
}

.mzm-kar__arrow {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: var(--mzm-border-width) solid var(--mzm-border);
  border-radius: var(--mzm-radius-full);
  background-color: var(--mzm-bg);
  box-shadow: none;
  color: var(--mzm-text-primary);
  text-transform: none;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--mzm-transition-fast),
              border-color var(--mzm-transition-fast),
              color var(--mzm-transition-fast),
              opacity var(--mzm-transition-fast);
}

.mzm-kar__arrow:hover:not(:disabled) {
  background-color: var(--mzm-accent);
  border-color: var(--mzm-accent);
  color: var(--mzm-text-on-accent);
}

.mzm-kar__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.mzm-kar__arrow svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Kad karusel nije potreban (sve stane) — JS dodaje ovu klasu. */
.mzm-kar.is-staticno .mzm-kar__nav {
  display: none;
}

/* ==========================================================
 * 3. VIEWPORT I TRAKA
 * ========================================================== */

.mzm-kar__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Prostor za hover podizanje kartice, da se senka ne seče. */
  padding: 4px 0 6px;
  margin: -4px 0 -6px;
}

.mzm-kar__viewport::-webkit-scrollbar {
  display: none;
}

.mzm-kar__viewport:focus-visible {
  outline: 2px solid var(--mzm-accent);
  outline-offset: 4px;
  border-radius: var(--mzm-radius-md);
}

.mzm-kar__track {
  display: flex;
  gap: var(--mzm-kar-razmak);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mzm-kar__item {
  flex: 0 0 calc(
    (100% - (var(--mzm-kar-vidljivo) - 1) * var(--mzm-kar-razmak))
    / var(--mzm-kar-vidljivo)
  );
  min-width: 0;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
  list-style: none;
}

/* Flatsome daje svakom `<li>` levu marginu od 1.3em (20,8px na 16px osnovi),
   i to pravilo je specifičnije od `.mzm-kar__item` iznad — `margin: 0` tamo
   gubi. Ovaj selektor je specifičnosti 0,2,0 i vraća stvari na svoje.

   Šta je margina radila, izmereno 05.08. na 360px:
   — u flex traci: tri kartice tražile 3 × (104,16 + 20,8) + 16 = 390px
     u traci od 330, pa je treća padala u novi red;
   — u grid ćeliji: stavka 83,86px umesto 104,66 — razlika je tačno 20,8.

   Obe pojave su izgledale kao greška u računici širine, a nisu bile.
   Ako se negde pojavi kartica uža nego što bi po formuli trebalo, prvo
   proveriti `margin` na stavci pa tek onda formulu. */
.mzm-kar .mzm-kar__item {
  margin: 0;
}

/* ── Indikator pomeranja ────────────────────────────────────────────────
   Element ubacuje istaknuti.js posle viewport-a. Podrazumevano ugašen —
   pali ga samo mobilni blok, i to tek kad traka ima šta da pomera.
   Na desktopu tu ulogu već nose strelice. */
.mzm-kar__indikator {
  display: none;
  position: relative;
  height: 3px;
  margin-top: var(--mzm-space-3);
  border-radius: var(--mzm-radius-full);
  background-color: var(--mzm-border);
  overflow: hidden;
}

.mzm-kar__indikator-palac {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  border-radius: inherit;
  background-color: var(--mzm-accent);
}

/* ==========================================================
 * 4. KARTICA
 * ========================================================== */

.mzm-pkart {
  display: flex;
  flex-direction: column;
  height: 100%;
  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;
}

/* ── Slika: kvadrat, ne 4:5 — glavni razlog zašto su kartice bile visoke ── */
.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);
}

.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);
}

/* ── 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;
}

.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);
  /* Dva reda umesto tri — kartica time gubi ~18px visine. */
  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);
}

/* ── Cena + korpa u istom redu ── */
.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);
}

.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/Flatsome tretiraju .add_to_cart_button kao dugme — reset. */
.mzm-pkart__cart.add_to_cart_button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  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);
}

.mzm-pkart__cart svg {
  width: 15px;
  height: 15px;
  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;
}

/* ==========================================================
 * 4b. KARTICA KATEGORIJE
 * ========================================================== */

.mzm-kar--kategorije {
  --mzm-kar-vidljivo: var(--mzm-kar-vidljivo-desktop, 8);
}

/* Pozadina kao kod trust bara: gradijent od svetloplave ka beloj.
   Ide na sekciju i na Flatsome-ov .section-bg sloj jer .mzm-kar ima
   max-width 1400px — gradijent na njemu ne bi išao preko cele širine ekrana.
   `background-image` pokriva `bg_color` iz shortcode-a, pa se sekcija u
   homepage kodu može ostaviti i bez bg_color atributa. */
.section:has(.mzm-kar--kategorije),
.section:has(.mzm-kar--kategorije) > .section-bg {
  background-image: linear-gradient(180deg, #e3eaf6 0%, #ffffff 100%);
}

.mzm-kkart {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  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-kkart:hover {
  box-shadow: var(--mzm-shadow-card-hover);
  border-color: transparent;
  transform: translateY(-2px);
}

.mzm-kkart__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--mzm-surface);
}

.mzm-kkart__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: var(--mzm-space-2);
  transition: transform var(--mzm-transition-slow);
}

.mzm-kkart:hover .mzm-kkart__img {
  transform: scale(1.05);
}

/* Placeholder kad kategorija nema sliku. */
.mzm-kkart__img--prazno {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mzm-text-secondary);
}

.mzm-kkart__img--prazno svg {
  width: 55%;
  height: 55%;
}

/* ── Piktogram (kategorija bez uploadovane slike) ──────────────────────────
   Vidi inc/mzm-piktogrami.php. Ikonica je stroke-only i nasleđuje boju,
   pa se ceo set menja jednom promenljivom.
   ───────────────────────────────────────────────────────────────────────── */
.mzm-kkart__img--pikto {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mzm-accent);
  background-color: var(--mzm-surface);
}

.mzm-kkart__img--pikto .mzm-pikto {
  width: 46%;
  height: 46%;
  /* Ikonica je optički lakša od fotografije — malo deblji potez je izjednačava
     sa naslovom ispod. Vrednost je merena na kartici od 160px. */
  stroke-width: 1.4;
  transition: transform var(--mzm-transition-slow);
}

/* Isti hover kao kod slike — .mzm-kkart__img pravilo cilja <img>, ne <svg>. */
.mzm-kkart:hover .mzm-kkart__img--pikto .mzm-pikto {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .mzm-kkart__img--pikto .mzm-pikto {
    transition: none;
  }

  .mzm-kkart:hover .mzm-kkart__img--pikto .mzm-pikto {
    transform: none;
  }
}

.mzm-kkart__badge {
  position: absolute;
  top: var(--mzm-space-2);
  left: var(--mzm-space-2);
  z-index: 2;
  font-size: 0.5625rem;
  font-weight: var(--mzm-font-semibold);
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--mzm-radius-sm);
  background-color: var(--mzm-new-badge);
  color: #ffffff;
}

.mzm-kkart__naziv {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: var(--mzm-space-2) var(--mzm-space-2) var(--mzm-space-3);
  text-align: center;
  font-size: var(--mzm-text-xs);
  font-weight: var(--mzm-font-semibold);
  line-height: var(--mzm-leading-normal);
  color: var(--mzm-text-primary);
  min-height: 2.6em;
  transition: color var(--mzm-transition-fast);
}

.mzm-kkart:hover .mzm-kkart__naziv {
  color: var(--mzm-accent);
}

/* ==========================================================
 * 5. RESPONSIVE
 * ========================================================== */

/* Laptop — 5 u redu bez obzira na vrednost iz shortcode-a.
 * Kategorije su uže (kratki nazivi), pa idu za jednu gušće. */
@media screen and (max-width: 1199px) {
  .mzm-kar {
    --mzm-kar-vidljivo: 5;
  }

  .mzm-kar--kategorije {
    --mzm-kar-vidljivo: 6;
  }
}

/* Tablet */
@media screen and (max-width: 999px) {
  .mzm-kar {
    --mzm-kar-vidljivo: 4;
  }

  .mzm-kar--kategorije {
    --mzm-kar-vidljivo: 5;
  }
}

@media screen and (max-width: 849px) {
  .mzm-kar {
    --mzm-kar-vidljivo: 3;
  }

  .mzm-kar--kategorije {
    --mzm-kar-vidljivo: 4;
  }
}

/* Mobilni — deo sledeće kartice viri, da se vidi da lista ide dalje.
   Izmereno 05.08. na 360px: pri 2,2 je virilo 29px od kartice od 146,
   što se čita kao „kartica je slučajno odsečena ivicom", a ne kao „ima još".
   Na 2,35 kartica pada na ~136 a viri ~48px — pola prsta umesto mrvice.
   Ne dizati mnogo dalje: svaka desetinka steže karticu, a na 2,5 bi
   pala na 127px, gde se ime proizvoda i cena počinju gušiti. */
@media screen and (max-width: 549px) {
  .mzm-kar {
    --mzm-kar-vidljivo: 2.35;
    --mzm-kar-razmak: var(--mzm-space-2);
  }

  /* ── Popularne kategorije: mreža, ne karusel ──────────────────────────
     Kategorija je mala kartica i ima ih malo — prevlačenje je ovde skuplje
     nego što vredi, jer korisnik ionako želi da vidi sve odjednom. Tri u
     redu, broj redova prati broj kategorija: 6 daje 2×3, 9 daje 3×3, bez
     ijedne izmene CSS-a kad klijent doda kategoriju. Isti princip kao
     trust bar.

     `--mzm-kar-vidljivo` ovde više ništa ne znači i namerno je izostavljen.

     Karusel se gasi sam: kad traka stane u vidno polje, `osveziStanje()`
     u istaknuti.js postavi `.is-staticno`, a ta klasa već sakriva strelice,
     indikator i bledilo. Nema posebnog izuzetka ni u JS-u ni u CSS-u. */
  .mzm-kar--kategorije .mzm-kar__viewport {
    overflow: visible;
    scroll-snap-type: none;
  }

  /* `flex-wrap`, a ne grid, iz dva razloga.

     Prvi: poslednji red se centrira sam. Kod 8 kategorija zadnja dva ostaju
     u redu od tri, i u gridu bi visila levo — `justify-content: center` u
     flex-u ih centrira bez ijednog pravila za taj slučaj, isto kao što
     `grid-auto-flow: column` u trust baru sam prati broj stavki.

     Drugi: `.mzm-kar__item` ionako već nosi `flex` osnovu, pa joj samo
     menjamo računicu sa „2,35 u vidnom polju" na „tačno 3 u redu".

     Napomena za čitanje istorije: dok Flatsome-ova leva margina na `<li>`
     nije bila ugašena (vidi pravilo `.mzm-kar .mzm-kar__item` gore), ovde
     su se dve po redu lomile bez vidljivog razloga. Uzrok nije bio ni u
     gridu ni u flex-u nego u margini. */
  .mzm-kar--kategorije .mzm-kar__track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mzm-kar-razmak);
  }

  /* Onih `- 0.5px` je zazor. Bez njih tri kartice i dva razmaka daju
     314 + 16 = tačno 330, koliko je i traka — a tačan sklop je krhak,
     dovoljno je pola piksela zaokruživanja pa da treća pređe u novi red.
     Pola piksela po kartici je nevidljivo, a red ne puca. */
  .mzm-kar--kategorije .mzm-kar__item {
    flex: 0 0 calc((100% - 2 * var(--mzm-kar-razmak)) / 3 - 0.5px);
    min-width: 0;
  }

  /* Kategorije se više ne prevlače, pa im indikator nema šta da pokaže.
     `is-staticno` bi ga i sam ugasio, ali eksplicitno je sigurnije od
     oslanjanja na zaokruživanje širine na pola piksela. */
  .mzm-kar--kategorije .mzm-kar__indikator {
    display: none;
  }

  /* ── Razmak između sekcija sa karuselima ──────────────────────────────
     Izmereno 05.08. na 360px: između poslednje kartice kategorija i
     naslova „Najnoviji proizvodi" stajalo je 110px praznine —
     30 (donji padding Flatsome kolone) + 30 (dno sekcije kategorija)
     + 50 (vrh sledeće sekcije). Sekcije se dodiruju, pa razmak nije
     između njih nego unutar obe, i zato ga nije bilo dovoljno smanjiti
     na jednom mestu.

     `!important` je nužan jer Flatsome upisuje `padding` iz `[section]`
     shortcode-a inline — isti razlog kao kod `.mzm-find-phone`.

     Pravilo namerno hvata SVE sekcije sa karuselom, ne samo ove dve:
     razmak treba da bude isti između Najpopularnijih, kategorija i
     Najnovijih, inače stranica na telefonu diše neravnomerno. */
  .section:has(.mzm-kar) {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  /* Flatsome koloni podrazumevano daje ~30px donjeg padinga, a `padding="0px"`
     u shortcode-u ga ne gasi pouzdano. Isto rešenje kao kod trust bara. */
  .col:has(.mzm-kar),
  .col:has(.mzm-kar) > .col-inner {
    padding-bottom: 0;
  }

  /* ── Bledilo uz desnu ivicu ───────────────────────────────────────────
     Kandidat za brisanje ako uz indikator deluje kao višak — obriši ceo
     ovaj blok, ništa drugo ne zavisi od njega.

     `mask-image` umesto preklopljenog gradijenta jer se pozadina razlikuje
     po sekcijama: „Popularne kategorije" stoje na plavičastom gradijentu,
     ostali na beloj. Maska bledi ka providnom pa radi nad obe.

     Gasi se na `.is-kraj` (klasu postavlja istaknuti.js) — bledilo koje
     ostane na kraju liste izgleda kao kvar, ne kao signal. */
  .mzm-kar:not(.is-staticno):not(.is-kraj) .mzm-kar__viewport {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }

  /* ── Indikator pomeranja ──────────────────────────────────────────────
     Element pravi istaknuti.js. Na desktopu ga gasi osnovno pravilo
     `display: none` (sekcija 3), ovde se pali samo kad ima šta da se
     pomera. */
  .mzm-kar:not(.is-staticno) .mzm-kar__indikator {
    display: block;
  }

  .mzm-kkart__naziv {
    font-size: 0.625rem;
    padding: var(--mzm-space-1) 4px var(--mzm-space-2);
  }

  .mzm-kar__header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--mzm-space-2);
  }

  /* `space-between` je imao smisla dok su u zaglavlju bile i strelice —
     razmicao ih je od linka. Strelice su na dodiru sakrivene (pravilo
     ispod), pa je link ostajao sam na levoj strani. `flex-end` ga vraća
     desno, gde stoji i „Svi brendovi →" u sekciji „Pronađi masku". */
  .mzm-kar__header-tools {
    width: 100%;
    justify-content: flex-end;
  }

  /* `--mzm-text-sm` je clamp 12–14px i na 360px daje 12px, dok je
     „Svi brendovi →" fiksnih 14px — ista uloga, dva različita linka.
     Ovde se izjednačavaju. Boja i debljina se već poklapaju
     (--mzm-accent #3c83f5, 600). */
  .mzm-kar__more {
    font-size: 0.875rem;
  }

  /* Na dodirnom ekranu se lista prevlači — strelice su suvišne. */
  .mzm-kar__nav {
    display: none;
  }

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

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

/* ==========================================================
 * 6. REDUCED MOTION
 * ========================================================== */

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

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

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