/* Modeli na kartici proizvoda (includes/kartica-modeli.php, 30.09.2026.). */

/* Red sličica ispod fotografije — na svim karticama iste visine, jedan red. */
.cr-card-txt .cr-km-red {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  height: 30px; overflow: hidden;
}
.cr-km-s,
.cr-km-vise {
  flex: none; box-sizing: border-box; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid #E4D9CD; overflow: hidden;
  background: var(--e-global-color-crsurface, #fff);
}
.cr-km-s { display: block; transition: border-color .15s ease; }
.cr-km-s img {
  display: block; width: 100% !important; height: 100% !important;
  object-fit: cover; border-radius: 0 !important; margin: 0 !important;
}
.cr-km-s.cr-km-on,
.cr-km-s:hover,
.cr-km-s:focus-visible { border-color: var(--e-global-color-secondary); }
.cr-km-s:focus-visible,
.cr-km-vise:focus-visible { outline: 2px solid var(--e-global-color-secondary); outline-offset: 2px; }
.cr-km-vise {
  display: flex; align-items: center; justify-content: center;
  background: var(--e-global-color-cralt, #F3EBE3);
  color: var(--e-global-color-crbody2, #6E675C) !important;
  font: 500 12px/1 var(--e-global-typography-secondary-font-family), sans-serif;
  text-decoration: none !important;
}
.cr-km-vise:hover { border-color: var(--e-global-color-secondary); }

/* „N modela” odmah ispod naziva. Dva reda rezerve prelaze s naslova na cijeli
   blok naziva — oznaka tako sjeda odmah ispod teksta, a kartice bez nje ostaju
   iste visine. */
body .cr-card-naziv { min-height: calc(2 * 1.4 * 15px) !important; }
body .cr-card-naziv .elementor-heading-title { min-height: 0 !important; }
.cr-km-oznaka {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
  font: 500 12.5px/1.3 var(--e-global-typography-secondary-font-family), sans-serif;
  letter-spacing: .02em; color: var(--e-global-color-accent);
}
.cr-km-oznaka svg { flex: none; }

/* Cijena na dnu bloka teksta: oznaka ili dugi naziv ne pomiču cijenu i gumb,
   pa ostaju u istoj liniji kroz cijeli red kartica. */
body .cr-card-txt > .cr-card-red { margin-top: auto !important; }

@media (max-width: 767px) {
  .cr-card-txt .cr-km-red { height: 26px; gap: 5px; }
  .cr-km-s, .cr-km-vise { width: 26px; height: 26px; }
  .cr-km-vise { font-size: 11px; }
  body .cr-card-naziv { min-height: calc(2 * 1.4 * 14px) !important; }
  .cr-km-oznaka { font-size: 12px; }
}

/* Kartica zauzima punu visinu reda mreže — tek tada `margin-top:auto` na
   cijeni ima prostora, pa cijena i gumb stoje u istoj liniji i kad je naziv
   dug ili ima oznaku modela. */
body .e-loop-item > .cr-card { height: 100% !important; }