/* ==========================================================================
   Profi Oprema — dizajnerski sustav v1.1 na zivoj trgovini
   Ucitava se POSLIJE stylesheet.css i nadjacava zadanu OpenCart temu.
   Boje nisu birane na oko: svaki par teksta i podloge izmjeren je po WCAG 2.1
   (4,5:1 za tekst, 3:1 za grafiku). Izvor: data/paleta.py, data/tokeni.css.
   ========================================================================== */

:root {
  --po-font-naslov: Archivo, ui-sans-serif, system-ui, sans-serif;
  --po-font-tekst: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --po-font-podaci: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --po-f-1: 13px;  --po-f-2: 16px;  --po-f-3: 21px;  --po-f-4: 34px;
  --po-s-1: 8px;   --po-s-2: 13px;  --po-s-3: 21px;  --po-s-4: 34px;  --po-s-5: 55px;
  --po-radijus: 3px;

  --po-akcent: #64B224;
  --po-na-akcentu: #12171A;
  --po-akcent-tekst: #427517;
  --po-akcent-tiha: #F0F7E9;
  --po-podloga: #F5F6F4;
  --po-tinta: #141B22;
  --po-tinta-blaga: #5B6969;
  --po-tinta-tiha: #7B8783;
  --po-linija: #D6DCD3;
  --po-ploha-2: #EFF3EC;   /* tiha ploha odsjeka */
  --po-s-6: 89px;          /* Fibonacci, sljedeci nakon 55 */
  --po-linija-jaka: #C6CFC3;
  --po-ploha: #FFFFFF;
  --po-na-plohi: #141B22;
  --po-na-plohi-blaga: #5B6969;
  /* Bio #8B9694: na bijelom daje 3,05 -- prolazi kao GRAFIKA, ne kao tekst.
     Isti tihi ton potamnjen dok ne prijede 4,5 na sve tri plohe:
     bijela 5,17 / ploha-2 4,61 / tiha 4,73. Ostaje vidljivo tisi od
     --po-na-plohi-blaga (5,72), pa hijerarhija ne pada. */
  --po-na-plohi-tiha: #666F6D;
  --po-linija-kartice: #D6DCD3;
  --po-zaglavlje: #1A2C13;
  --po-zaglavlje-2: #22391A;
  --po-na-zaglavlju: #FFFFFF;
  --po-na-zaglavlju-2: #B9C9AE;
  --po-vodic-ploha: #F0F7E9;
  --po-vodic-linija: #DAE8CB;
  --po-zaliha-tekst: #1A8849;
  --po-dobavljac-tekst: #A16B0F;
  --po-narudzba-tekst: #6E7880;
  --po-nedostupno: #C0392B;
  --po-sjena: 0 1px 2px rgba(0,0,0,.05), 0 8px 21px rgba(0,0,0,.05);
}

/* ---------------------------------------------------------------- osnova */
body {
  background: var(--po-podloga);
  color: var(--po-tinta);
  font-family: var(--po-font-tekst);
  font-size: var(--po-f-2);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--po-font-naslov);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--po-tinta);
  text-wrap: balance;
}

#content h1 { font-size: var(--po-f-4); margin-bottom: var(--po-s-2) }
#content h2 { font-size: var(--po-f-3); margin-top: var(--po-s-4) }

a { color: var(--po-akcent-tekst); text-decoration: none }
a:hover { color: var(--po-akcent-tekst); text-decoration: underline }

:focus-visible { outline: 2px solid var(--po-akcent); outline-offset: 2px }

/* Zaglavlje i izbornik preseljeni su u profi-zaglavlje.css --
   cijeli sloj je prepisan 26.8.2026., nije dotjeran. */

/* ------------------------------------------------------------ opis kategorije */
#content > .row > .col p, #content .col-9 { max-width: 78ch }

/* Vodic ispod mreze -- svijetlozelena ploha, da se odvoji od robe iznad. */
.vodic-kategorije {
  background: var(--po-vodic-ploha);
  border: 1px solid var(--po-vodic-linija);
  border-radius: var(--po-radijus);
  padding: var(--po-s-4);
  max-width: 82ch;
}

.vodic-kategorije h2 {
  font-size: var(--po-f-3);
  margin-top: var(--po-s-3);
  margin-bottom: var(--po-s-1);
}

.vodic-kategorije h2:first-child { margin-top: 0 }
.vodic-kategorije p { color: var(--po-na-plohi-blaga); margin-bottom: var(--po-s-2) }
.vodic-kategorije p:last-child { margin-bottom: 0 }

/* --------------------------------------------------------------- kartica */
.product-thumb {
  background: var(--po-ploha);
  border: 1px solid var(--po-linija-kartice);
  border-radius: var(--po-radijus);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.product-thumb:hover {
  border-color: var(--po-linija-jaka);
  box-shadow: var(--po-sjena);
}

.product-thumb .image { background: #fff; padding: var(--po-s-2) }
.product-thumb .image img { mix-blend-mode: multiply }

.product-thumb .content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--po-s-2) var(--po-s-3) var(--po-s-3);
}

.product-thumb .description { flex: 1 }

.product-thumb h4 {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  margin-bottom: var(--po-s-1);
  letter-spacing: -.005em;
}

.product-thumb h4 a { color: var(--po-na-plohi) }

.product-thumb .description p {
  font-size: var(--po-f-1);
  color: var(--po-na-plohi-tiha);
  line-height: 1.5;
  margin-bottom: var(--po-s-2);
}

/* ----------------------------------------------------------------- cijena */
/* Cijena s PDV-om je glavna jer je to iznos koji potrosac placa i koji zakon
   trazi istaknuti. Oznaka stoji U NASTAVKU iznosa -- dva retka jedan ispod
   drugoga citala su se kao dvije cijene. Iznos bez PDV-a ide u redak ispod. */
.product-thumb .price, #product .price { margin-top: auto; line-height: 1.25 }

.price-new, .product-thumb .price > span:first-child {
  font-family: var(--po-font-podaci);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--po-na-plohi);
}

.price-new::after {
  content: " s PDV-om";
  font-family: var(--po-font-tekst);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--po-na-plohi-tiha);
  white-space: nowrap;
}

.price-tax {
  display: block;
  font-family: var(--po-font-podaci);
  font-size: 11.5px;
  color: var(--po-na-plohi-blaga);
  font-weight: 600;
  margin-top: 2px;
}

/* Oznaka ide IZA iznosa, kao i kod glavne cijene. U predlosku stoji obrnuto
   ({{ text_tax }} pa iznos), pa je jezicni niz ispraznjen i oznaka dolazi
   odavde. Ne dira se nijedan predlozak. */
.price-tax::after {
  content: " bez PDV-a";
  font-family: var(--po-font-tekst);
  font-weight: 400;
  color: var(--po-na-plohi-tiha);
}

.price-old {
  font-family: var(--po-font-podaci);
  font-size: var(--po-f-1);
  color: var(--po-na-plohi-tiha);
  text-decoration: line-through;
}

/* ------------------------------------------------------------------ gumb */
.btn-primary, .product-thumb .button button {
  background: var(--po-akcent);
  border-color: var(--po-akcent);
  color: var(--po-na-akcentu);
  border-radius: var(--po-radijus);
  font-family: var(--po-font-naslov);
  font-weight: 700;
  padding: 11px var(--po-s-3);
}

.btn-primary:hover, .product-thumb .button button:hover {
  background: #71c62b;
  border-color: #71c62b;
  color: var(--po-na-akcentu);
}

.product-thumb .button { margin-top: var(--po-s-2) }
.product-thumb .button button { width: 100% }

/* ------------------------------------------------------- stanje dostupnosti */
/* Cetiri boje iz sustava ne prolaze kontrast kao tekst od 13 px, pa su tocka
   i rijec dva razlicita tona: ziva boja na tocki (>=3:1), potamnjena na
   rijeci (>=4,5:1). Jantar na bijelom ima 2,62 i sam po sebi nije citljiv. */
.po-stanje {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--po-f-1);
  font-weight: 600;
}

.po-stanje::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.po-stanje.zaliha { color: var(--po-zaliha-tekst) }
.po-stanje.dobavljac { color: var(--po-dobavljac-tekst) }
.po-stanje.narudzba { color: var(--po-narudzba-tekst) }
.po-stanje.nedostupno { color: var(--po-nedostupno) }

/* ---------------------------------------------------------- obrazac upita */
.obrazac-upita {
  background: var(--po-ploha);
  border: 1px solid var(--po-linija-kartice) !important;
  border-radius: var(--po-radijus) !important;
  max-width: 82ch;
}

.obrazac-upita h2 { font-size: var(--po-f-3) }
.obrazac-upita .form-control { border-radius: var(--po-radijus); font-size: 15px }
.obrazac-upita .form-control:focus {
  border-color: var(--po-akcent);
  box-shadow: 0 0 0 3px var(--po-akcent-tiha);
}

/* ------------------------------------------------------------- stranica proizvoda */
/* Besplatna dostava stoji odmah ispod cijene -- ondje kupac odlucuje.
   Tvrdnja je istinita tek otkad je shipping_flat_cost postavljen na 0,00;
   prije toga bi blagajna naplatila 5 EUR. */
.po-dostava-oznaka {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--po-s-2) 0 0;
  padding: 10px var(--po-s-2);
  background: var(--po-akcent-tiha);
  border-left: 3px solid var(--po-akcent);
  border-radius: 0 var(--po-radijus) var(--po-radijus) 0;
  font-size: var(--po-f-1);
  line-height: 1.45;
  color: var(--po-na-plohi);
}
.po-dostava-oznaka b { color: var(--po-akcent-tekst) }
/* ------------------------------------------------------------- stranica proizvoda */
#product .price-new { font-size: 34px }
#product .list-unstyled { font-size: var(--po-f-1); color: var(--po-na-plohi-blaga) }

/* ------------------------------------------------------------------ ostalo */
.card { border-color: var(--po-linija); border-radius: var(--po-radijus) }
.card-header { background: var(--po-ploha); font-family: var(--po-font-naslov); font-weight: 700 }
.breadcrumb { font-size: var(--po-f-1) }
.breadcrumb a { color: var(--po-tinta-blaga) }

/* ---------------------------------------------- placanje, dostava, troskovi */
/* Zakon o zastiti potrosaca, cl. 36. st. 4.: obavijest o cijeni, troskovima
   dostave, uvjetima placanja i dostave te roku isporuke mora biti jasna i
   razumljiva, prije sklapanja ugovora. Zato stoji u podnozju SVAKE stranice,
   ne samo na jednoj informativnoj. */
.po-uvjeti {
  background: var(--po-ploha-2, #EFF3EC);
  border-top: 1px solid var(--po-linija);
  padding: var(--po-s-5) 0;
  color: var(--po-tinta);
}

.po-uvjeti h2 {
  font-family: var(--po-font-naslov);
  font-size: var(--po-f-3);
  margin: 0 0 var(--po-s-4);
}

.po-uvjeti-mreza {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--po-s-4);
}

.po-uvjet h3 {
  font-family: var(--po-font-naslov);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 var(--po-s-2);
  padding-bottom: 7px;
  border-bottom: 2px solid var(--po-akcent);
}

.po-uvjet ul { list-style: none; margin: 0; padding: 0 }

.po-uvjet li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 7px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--po-tinta-blaga);
}

.po-uvjet li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--po-akcent);
}

.po-uvjet li b { color: var(--po-tinta); font-weight: 600 }

.po-uvjet-istaknuto {
  font-family: var(--po-font-naslov);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--po-akcent-tekst);
  margin: 0 0 var(--po-s-2);
}

.po-uvjet-sitno {
  font-size: 12px;
  line-height: 1.5;
  color: var(--po-tinta-blaga);
  margin: var(--po-s-2) 0 0;
}

.po-uvjet-sitno a { color: var(--po-akcent-tekst); font-weight: 600 }

@media (max-width: 1000px) { .po-uvjeti-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 620px) { .po-uvjeti-mreza { grid-template-columns: 1fr } }

footer {
  background: var(--po-zaglavlje);
  color: var(--po-na-zaglavlju-2);
  margin-top: var(--po-s-5);
  padding-top: var(--po-s-4);
}

footer h5 { color: var(--po-na-zaglavlju); font-size: var(--po-f-2) }
footer a { color: var(--po-na-zaglavlju-2) }
footer a:hover { color: var(--po-akcent) }
footer hr { border-color: var(--po-zaglavlje-2); opacity: 1 }

/* Postavka sustava, ne ukus -- nekome tko ju je ukljucio animacija izaziva
   mucninu. Gasi se animacija, ne samo prijelaz. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   🔴 OpenCartov "sticky footer" se GASI.

   Stock `stylesheet.css` ima dva pravila koja zajedno lome raspored:

       #container { position: absolute; min-height: 100%; margin-bottom: 300px }
       footer     { position: absolute; bottom: -1px; width: 100% }

   Posljedice, obje tihe:
     1. Sve sto stoji IZA `</div>` koji zatvara #container ispada iz toka i
        pada na vrh dokumenta -- blok s uvjetima placanja iscrtavao se preko
        heroja, a naslov "Profi oprema. Profi cijena." bio je ispod njega.
     2. Podnozje je pribijeno na dno #containera, pa PREKRIVA zadnjih ~270 px
        sadrzaja cim je stranica visa od rezerviranih 300 px.

   Zamjena je flexbox: isti ucinak (podnozje na dnu i na kratkoj stranici),
   bez ijednog elementa izvan toka.
   ========================================================================== */
#container {
  position: static;
  min-height: 100vh;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

/* Sadrzaj gura podnozje prema dnu; na kratkoj stranici ga drzi ondje. */
#container > main { flex: 1 0 auto }

footer {
  position: static;
  bottom: auto;
  flex: 0 0 auto;
  border: 0;
}

/* blagajna: polje s greskom kratko zatrese, da se vidi kamo gledati */
@keyframes po-trese { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
.po-trese { animation: po-trese .45s ease; }
@media (prefers-reduced-motion: reduce) { .po-trese { animation: none; outline: 2px solid #C0392B; } }

/* --- mobitel: natpis uz Profica i kraca kosarica (29.8.2026.) --- */
@media (max-width: 575.98px) {
  /* natpis ispod znaka, jer u sirinu nema mjesta */
  .po-pitaj { flex-direction: column; gap: 2px; width: auto; min-width: 46px; padding: 4px 6px; }
  .po-pitaj .po-pitaj-tekst { display: block; font-size: 10px; line-height: 1;
    font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
  /* duga recenica se ne prikazuje — zamjenjuje je kratka rijec */
  .po-pitaj .po-pitaj-tekst { font-size: 0; }
  .po-pitaj .po-pitaj-tekst::before { content: 'Pitaj'; font-size: 10px; }
  .po-pitaj .po-pitaj-tekst small { display: none; }
  .po-pitaj .po-pitaj-znak img { width: 30px; height: 30px; }

  /* 🔴 Skracivanje kosarice je UKLONJENO, iz dva razloga.
     1. Pravilo nije radilo: `stylesheet.css` ima `#cart .btn-lg { font-size:15px }`,
        a ID selektor pobjeđuje moj `.po-kosarica .dropdown-toggle`. Mrtav CSS.
     2. Nakon sto je natpis „Pitaj" stao, traka alata se uredno prelama i iznos
        u kosarici vise ne smeta — a vlasnik ga nije trazio maknuti. */
}

/* Zvjezdice ocjene na kartici proizvoda — 29.8.2026. */
.product-thumb .rating {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--po-akcent, #64B224);
  margin-top: 4px;
}
.product-thumb .rating .po-ocjena-broj {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--po-na-plohi-tiha, #666F6D);
}

/* Registracija: poslovni podaci (Naziv tvrtke, OIB) prije imena kod
   poslovnog racuna — 29.8.2026. Staticki poredak preko flex `order`;
   custom polja imaju nizi broj pa ispadnu prva kad god su vidljiva
   (kod fizicke osobe su sakrivena pa poredak onda nije ni bitan). */
#account { display: flex; flex-direction: column; }
#account .custom-field-29,
#account .custom-field-30 { order: 5; }
#red-firstname { order: 10; }
#red-lastname { order: 11; }
#red-email { order: 20; }
#red-telephone { order: 21; }


/* ── QA-11 kontrast (3.9.2026.) ──────────────────────────────────────────
   axe [serious] color-contrast na dva mjesta:
     • .list-group-item.active  (aktivna kategorija u popisu)
     • .nav-link „O ocjeni"     (neaktivna kartica na proizvodu)
   Tamnozelena ploha je ista koju vec koristi zaglavlje (#1A2C13),
   gdje je bijeli tekst izmjeren na 14,86. */
.list-group-item.active {
  background-color: #1A2C13;
  border-color: #1A2C13;
  color: #ffffff;
}
.nav-tabs .nav-link,
.nav-tabs .nav-link:not(.active) {
  color: #40484A;   /* na bijeloj plohi 8,3:1 */
}


/* #alert prelazi obje ivice na uskom zaslonu -- stock OC4 nema media query ispod 992px */
@media (max-width: 575.98px) {
  #alert {
    width: calc(100% - 24px);
    left: 12px;
    margin-left: 0;
  }
}

/* Hub stranice: prigodna slika + traka povezanih proizvoda -- 4.9.2026 */
.hub-hero-slika {
  text-align: center;
  margin: 16px 0 24px;
}
.hub-hero-slika img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.hub-proizvodi-naslov {
  margin-top: 32px;
}
.hub-proizvodi-traka {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 16px;
  padding-bottom: 12px;
  scroll-snap-type: x proximity;
  max-width: 100%;
  min-width: 0;
}
.hub-proizvodi-stavka {
  flex: 0 0 220px;
  scroll-snap-align: start;
}
@media (max-width: 575.98px) {
  .hub-proizvodi-stavka { flex-basis: 160px; }
}

/* Dugi naslovi (hub stranice) prelijevaju mrvicu na uskom zaslonu --
   stock '.breadcrumb-item { white-space: nowrap }' se ne primjenjuje
   ispod 576px. 4.9.2026 */
@media (max-width: 575.98px) {
  .breadcrumb > li.breadcrumb-item {
    white-space: normal;
  }
}