:root { --plava: #0b4f91; --plava-t: #083d72; --tekst: #1c2733; --siva: #6b7886; --rub: #e2e8ee; --poz: #f5f7fa; --zel: #1d7a45; --cr: #c0392b; --cmyk: linear-gradient(90deg, #00a0e3 0 25%, #e5007e 25% 50%, #ffed00 50% 75%, #1c1c1b 75%); }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--tekst); background: var(--poz); font-size: 15px; line-height: 1.45; }
a { color: var(--plava); }
img { max-width: 100%; }
.kz { background: #fff; border-bottom: 1px solid var(--rub); position: sticky; top: 0; z-index: 20; }
.kz::after { content: ""; display: block; height: 3px; background: var(--cmyk); }
.kz-in { max-width: 1320px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; }
.kz-logo img { height: 42px; display: block; }
.kz-trazi { flex: 1; display: flex; max-width: 560px; }
.kz-trazi input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid #c9d3dd; border-radius: 22px 0 0 22px; font: inherit; }
.kz-trazi button { border: 0; background: var(--plava); color: #fff; padding: 0 16px; border-radius: 0 22px 22px 0; font-size: 18px; cursor: pointer; }
.kz-upit { margin-left: auto; text-decoration: none; font-weight: 600; padding: 9px 14px; border: 2px solid var(--plava); border-radius: 22px; white-space: nowrap; }
.kz-upit b { display: inline-block; min-width: 22px; text-align: center; background: #dfe7ef; color: var(--plava); border-radius: 11px; padding: 0 6px; margin-left: 4px; }
.kz-upit.ima b { background: var(--cr); color: #fff; }
.km { max-width: 1320px; margin: 0 auto; padding: 18px 16px 40px; }
h1 { font-size: 26px; margin: 0 0 12px; color: var(--plava-t); }
h2 { font-size: 18px; margin: 22px 0 10px; }
.kl { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
.kl-gr { background: #fff; border: 1px solid var(--rub); border-radius: 10px; padding: 8px; position: sticky; top: 86px; }
.kl-gr a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--tekst); }
.kl-gr a small { color: var(--siva); }
.kl-gr a:hover { background: var(--poz); }
.kl-gr a.on { background: var(--plava); color: #fff; font-weight: 600; } .kl-gr a.on small { color: #cfe0f1; }
.kl-uvod { background: #fff; border: 1px solid var(--rub); border-left: 5px solid var(--plava); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
.kl-uvod p { margin: 0; color: #3c4a58; }
.kl-kat { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.kl-kat a, .chip { text-decoration: none; padding: 5px 12px; border-radius: 16px; border: 1px solid #c9d3dd; background: #fff; color: var(--tekst); font-size: 14px; }
.kl-kat a small { color: var(--siva); }
.kl-kat a.on, .chip.on { background: var(--plava-t); border-color: var(--plava-t); color: #fff; } .kl-kat a.on small { color: #cfe0f1; }
.kl-alati { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px; color: var(--siva); font-size: 14px; }
.kl-sort a { margin-left: 8px; text-decoration: none; } .kl-sort a.on { font-weight: 700; color: var(--tekst); }
.kl-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.kk { background: #fff; border: 1px solid var(--rub); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s; }
.kk:hover { box-shadow: 0 4px 16px rgba(11, 79, 145, .12); }
.kk-sl { display: block; aspect-ratio: 1; position: relative; background: #fff; overflow: hidden; }
.kk-sl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.oz { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; color: #fff; }
.oz.novo { background: var(--cr); } .oz.eko { background: var(--zel); left: auto; right: 8px; }
.kk-t { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; border-top: 1px solid #eef2f5; }
.kk-n { color: var(--tekst); text-decoration: none; font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kk-n:hover { color: var(--plava); }
.kk-m { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; color: var(--siva); }
.boje { display: flex; gap: 3px; align-items: center; } .boje i, .sw { width: 13px; height: 13px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.18); }
.boje small { margin-left: 2px; }
.kk-z { font-size: 13px; margin-top: auto; }
.zal.ima { color: var(--zel); font-weight: 600; } .zal.nema { color: var(--cr); } .zal.upit { color: var(--siva); }
.btn-upit { background: var(--plava); color: #fff; border: 0; border-radius: 8px; padding: 8px 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; text-align: center; }
.btn-upit:hover { background: var(--plava-t); } .btn-upit.dodano { background: var(--zel); }
.btn-upit.vel { padding: 12px 20px; font-size: 16px; }
.kl-str { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 22px; }
.kl-str a { padding: 6px 12px; border: 1px solid #c9d3dd; border-radius: 6px; background: #fff; text-decoration: none; } .kl-str a.on { background: var(--plava); color: #fff; border-color: var(--plava); }
.kl-str span { color: var(--siva); font-size: 13px; margin-left: 8px; }
.prazno { color: var(--siva); padding: 20px 0; }
.kp-put { font-size: 14px; color: var(--siva); margin-bottom: 12px; } .kp-put a { text-decoration: none; }
.kp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 30px; background: #fff; border: 1px solid var(--rub); border-radius: 12px; padding: 22px; }
.kp-vel { aspect-ratio: 1; position: relative; overflow: hidden; border: 1px solid #eef2f5; border-radius: 10px; }
.kp-vel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.kp-sm { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kp-sm button { width: 68px; height: 68px; border: 2px solid var(--rub); border-radius: 8px; background: #fff; padding: 3px; cursor: pointer; } .kp-sm button.on { border-color: var(--plava); }
.kp-sm img { width: 100%; height: 100%; object-fit: contain; }
.kp-sif { color: var(--siva); font-size: 14px; margin-bottom: 10px; }
.kp-opis { color: #3c4a58; }
.kp-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 14px 0; font-size: 14px; } .kp-dl dt { color: var(--siva); } .kp-dl dd { margin: 0; }
.kp-var { width: 100%; border-collapse: collapse; font-size: 14px; }
.kp-var th { text-align: left; font-size: 12px; text-transform: uppercase; color: var(--siva); border-bottom: 2px solid var(--rub); padding: 6px; }
.kp-var td { border-bottom: 1px solid #eef2f5; padding: 6px; vertical-align: middle; } .kp-var tr[data-slika]:hover td { background: #f7fafc; cursor: pointer; }
.kp-var .num { text-align: right; } .kp-var small { display: block; color: var(--siva); font-size: 11px; } .kp-var .sif { color: var(--siva); font-size: 12px; }
.kp-var .sw { vertical-align: -2px; margin-right: 6px; } .kp-var .nema { color: var(--cr); }
.kp-var input, .kp-akc input, .ku-st input { width: 84px; padding: 6px 8px; border: 1px solid #c9d3dd; border-radius: 6px; font: inherit; text-align: right; }
#dodaj-var { margin-top: 12px; }
.kp-tis { width: 100%; border-collapse: collapse; font-size: 14px; }
.kp-tis th { text-align: left; font-size: 12px; text-transform: uppercase; color: var(--siva); border-bottom: 2px solid var(--rub); padding: 6px; }
.kp-tis td { border-bottom: 1px solid #eef2f5; padding: 6px; vertical-align: middle; }
.kp-tis td:first-child { width: 58px; } .kp-tis img { width: 52px; height: 52px; object-fit: contain; border: 1px solid var(--rub); border-radius: 6px; background: #fff; }
.kp-tis tr[data-slika]:hover td { background: #f7fafc; cursor: pointer; }
.kp-tis .prep { font-size: 11px; color: var(--zel); font-weight: 600; white-space: nowrap; }
.kp-tis small { display: block; color: var(--siva); font-size: 12px; } .kp-tis .nw { white-space: nowrap; }
.kp-akc { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rub); }
.kp-akc label { display: flex; flex-direction: column; font-size: 13px; color: var(--siva); gap: 4px; }
.kp-nap { font-size: 13px; color: var(--siva); }
.ku { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ku-lista { background: #fff; border: 1px solid var(--rub); border-radius: 10px; padding: 6px 14px; }
.ku-st { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eef2f5; }
.ku-st:last-child { border-bottom: 0; }
.ku-st img, .ku-st .bez { width: 56px; height: 56px; max-width: 56px; object-fit: contain; background: var(--poz); border-radius: 6px; }
.ku-st a { color: var(--tekst); font-weight: 600; text-decoration: none; } .ku-st small { display: block; color: var(--siva); font-size: 12px; }
.ku-st label { font-size: 12px; color: var(--siva); display: flex; align-items: center; gap: 6px; }
.ku-st button { border: 0; background: none; color: var(--siva); font-size: 18px; cursor: pointer; } .ku-st button:hover { color: var(--cr); }
.ku-forma { background: #fff; border: 1px solid var(--rub); border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.ku-forma h2 { margin: 0 0 4px; }
.ku-forma label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--siva); }
.ku-forma input, .ku-forma textarea { padding: 9px 11px; border: 1px solid #c9d3dd; border-radius: 6px; font: inherit; color: var(--tekst); }
.ku-forma .dva { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ku-forma .chk { flex-direction: row; align-items: flex-start; gap: 8px; color: var(--tekst); } .ku-forma .chk input { margin-top: 3px; }
.skriveno { position: absolute !important; left: -9999px !important; }
.ku-gr { background: #fdecea; border: 1px solid #f3b9b2; color: #8f2a1f; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.ku-ok { background: #fff; border: 1px solid var(--rub); border-left: 5px solid var(--zel); border-radius: 10px; padding: 24px; max-width: 680px; }
#kt-obav { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 120px); background: var(--tekst); color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.25); transition: transform .25s; z-index: 50; max-width: calc(100% - 32px); }
#kt-obav.vidi { transform: translate(-50%, 0); } #kt-obav a { color: #9fd0ff; margin-left: 8px; }
.kf { background: #fff; border-top: 1px solid var(--rub); padding: 18px 16px; text-align: center; font-size: 13px; color: #3c4a58; }
.kf-nap { color: var(--siva); font-size: 12px; max-width: 900px; margin: 8px auto 0; }
@media (max-width: 900px) {
  .kl { grid-template-columns: 1fr; }
  .kl-gr { position: static; display: flex; overflow-x: auto; gap: 4px; padding: 6px; }
  .kl-gr a { white-space: nowrap; }
  .kp, .ku { grid-template-columns: 1fr; padding: 14px; }
  .kz-in { flex-wrap: wrap; gap: 10px; } .kz-trazi { order: 3; max-width: none; flex-basis: 100%; }
  .kz-logo img { height: 34px; }
  .kl-mreza { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
  h1 { font-size: 21px; }
}
@media (min-width: 901px) { .kp-gal { position: sticky; top: 86px; align-self: start; } }
.kb2b { background: #fff7e0; border-bottom: 1px solid #f0d9a0; color: #6b4e00; text-align: center; font-size: 14px; padding: 7px 16px; }
.kb2b b { color: #4a3600; }
.b2b-nap { display: block; margin-top: 8px; font-size: 14px; color: #6b4e00; background: #fff7e0; border-radius: 6px; padding: 6px 10px; }
.kl-pod { margin: 2px 0 8px 10px; border-left: 2px solid #d5e2ef; padding-left: 4px; }
.kl-pod a { padding: 5px 8px; font-size: 14px; color: #3c4a58; }
.kl-pod a.on { background: #e3eef9; color: var(--plava-t); font-weight: 600; } .kl-pod a.on small { color: var(--siva); }
@media (max-width: 900px) { .kl-pod { display: none; } }
.ku-poslano { padding-left: 18px; } .ku-poslano li { margin: 4px 0; } .ku-poslano small { color: var(--siva); }
.kp-tisak { margin: 18px 0 10px; padding: 12px 14px; border: 2px solid #d5e2ef; border-radius: 10px; background: #f7fafd; }
.kp-tisak h2 { margin: 0 0 8px; font-size: 17px; } .kp-tisak .obv { font-size: 12px; font-weight: 600; color: var(--cr); margin-left: 6px; }
.kp-tisak-r { display: flex; flex-wrap: wrap; gap: 12px; }
.kp-tisak label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--siva); }
.kp-tisak select { padding: 8px 10px; border: 1px solid #c9d3dd; border-radius: 6px; font: inherit; color: var(--tekst); min-width: 220px; max-width: 100%; }
.kp-tisak.greska { border-color: var(--cr); background: #fdf1ef; }
.ku-st small.tis { color: #2c5aa0; } .ku-st small.tis.nema { color: var(--cr); font-weight: 600; }
.kk .btn-upit { text-align: center; }
.kk-c .cij { font-size: 14px; color: var(--plava-t); } .kk-c .cij b { font-size: 17px; } .kk-c small, .kp-cij small { color: var(--siva); font-weight: 400; }
.cij.upit { color: var(--siva); font-size: 13px; }
.kp-cij { margin: 4px 0 12px; } .kp-cij .cij { font-size: 18px; color: var(--plava-t); } .kp-cij .cij b { font-size: 24px; } .kp-cij small.muted { display: block; font-size: 12px; margin-top: 2px; }