@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-var.woff2') format('woff2-variations'),
      url('../fonts/inter-var.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

/* ==========================================================================
   PŠENO — jedan stil za cijelu stranicu
   Izvor odluka: pseno-handover/DESIGN_SYSTEM.md §1, §1a, §1b
   Boja po ulozi: marka #7FA03C samo na tamnim plohama, maslinasta
   #557920 za radnju na svijetlima. Nikad treća zemljana boja.
   ========================================================================== */

:root{
  /* ploha i tekst */
  --ink:#1E2810;
  --ink2:#2A3618;
  --paper:#F7F7F3;
  --white:#FFFFFF;
  --line:#E4E4DC;
  --line2:#D6D6CC;
  --muted:#6E736B;
  --tekst:#4A5046;

  /* radnja i marka

     Jedna ljestvica, jedan ton (D-319). Izmjereno na logotipu: list je
     #52761F–#587A1D, dakle `--green`. Prije je na stranici bilo četiri
     tamna zelena koja se razlikuju za dlaku (#1E2810, #2A3618,
     #35491C, #3D5520) i tri različita svijetla za isti prijelaz mišem
     (#78A92E, #8FB247, #95C845) — to je bio nered koji se vidio.
     Sada su tri stepenice:
       --ink   tamna ploha  (gornja traka, tamne plohe, podnožje dolje)
       --nav   traka izbornika, podnožje gore i GUMB u mirovanju
       --green logotip, poveznice i ikone na svijetlom
     Marka `--brand` svijetli samo na tamnim plohama. */
  --green:#557920;
  --green-d:#45631A;
  --green-t:#F0F6E4;
  --green-l:#9CBF55;
  --nav:#35491C;
  --brand:#7FA03C;
  --brand-d:#14200A;
  /* `--brand-h` je uklonjen (D-322): gumbi na tamnom više nisu u
     marki nego samo okvir, pa prijelaz za marku nema gdje stajati. */

  /* gumbi: u mirovanju boja trake izbornika, na prijelazu tamna ploha,
     tekst uvijek bijel (D-319) */
  --gumb:var(--nav);
  --gumb-h:var(--ink);

  /* naglasak na tamnim plohama. Zlato (#C8A062) je isprobano i
     odbačeno uživo (D-282) — vrijednosti su vraćene na marku, pa su
     ova dva tokena sada samo jedno mjesto s kojeg se ta boja mijenja.
     Nikad na gumbu, cijeni ni stanju zalihe: ondje je maslinasta, da
     kupac uvijek zna gdje je radnja. */
  --zlato:var(--brand);
  --zlato-t:var(--green-l);

  /* stanja */
  --warn:#8A6212;
  --warn-t:#FBF3E0;
  --error:#A33B2A;

  /* oblik — ISPROBAVA SE: oštri rubovi (D-249). Povratak na zaobljeno
     je promjena ove dvije vrijednosti natrag na 10px / 6px i brisanje
     bloka „oštri rubovi" na dnu datoteke. */
  --r:0;       /* plohe   (bilo 10px) */
  --rs:0;      /* kontrole (bilo 6px) */
  --razmak:15px;

  /* pismo */
  /* Jedan font na cijeloj stranici (D-307). Tri pisma su se čitala
     kao nered; Inter nosi i naslove i tekst i brojke. Tokeni ostaju
     razdvojeni po ulozi, pa se bilo koji može promijeniti sam. */
  --disp:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* mjere — jedan omot za cijelu stranicu (D-252).
     1376 = 1320 sadržaja + 2 × 28 ruba, pa se unutarnji rub poklapa
     s podnožjem, koje je 1320 od D-220. */
  --omot:1376px;
  --rub-omota:28px;
}

/* --------------------------------------------------------------- osnova */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--tekst);
  font:400 15px/1.6 var(--ui);
  -webkit-font-smoothing:antialiased;
}

img,svg,video{max-width:100%;height:auto;display:block}

/* `[hidden]` dolazi iz preglednikova stila, a svako autorsko pravilo za
   `display` ga pobjeđuje bez obzira na specifičnost — zbog `img{display:block}`
   iznad skrivene su se slike i dalje crtale i prekrivale prvu. */
[hidden]{display:none !important}

a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-d)}

h1,h2,h3,h4{
  font-family:var(--disp);
  color:var(--ink);
  letter-spacing:-.02em;
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
}
h1{font-size:clamp(26px,3.2vw,34px)}
h2{font-size:clamp(20px,2.4vw,26px)}
h3{font-size:18px}

p{margin:0 0 1em}

/* Fokus se uvijek vidi. Nije ukras nego uvjet upotrebljivosti. */
:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
  border-radius:3px;
}

/* Površine koje preglednik crta sam, a pripadaju dizajnu. */
::selection{background:var(--green-l);color:var(--brand-d)}
::placeholder{color:var(--muted);opacity:1}

.vizualno-skriveno{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.preskoci{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 var(--rs) 0;
}
.preskoci:focus{left:0;color:#fff}

.omot{
  max-width:var(--omot);
  margin-inline:auto;
  padding-inline:var(--rub-omota);
}

/* --------------------------------------------------------------- gumbi */

.gumb,
button.gumb,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;              /* donja granica dodirne mete */
  padding:0 22px;
  background:var(--gumb);
  color:#fff;
  border:1px solid var(--gumb);
  border-radius:var(--rs);
  font:600 14px/1 var(--ui);
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.gumb:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  background:var(--gumb-h);
  border-color:var(--gumb-h);
  color:#fff;
}
.gumb--obris{
  background:transparent;
  color:var(--ink);
  border-color:var(--line2);
}
/* Pomoćni gumb: samo okvir, na prijelazu lagano zeleno — isti znak
   kao odabir pakiranja, da se ploha ne šareni (D-320). */
.gumb--obris:hover{background:var(--green-t);border-color:var(--green);color:var(--green)}

/* --------------------------------------------------------- gornja traka */

.traka-vrh{
  background:var(--ink);
  color:#B9BFB7;
  font:500 11.5px/1 var(--mono);
  letter-spacing:.02em;
}
.traka-vrh .omot{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;padding-block:9px;
}
.traka-vrh a{color:#DDE3D8}
.traka-vrh a:hover{color:var(--zlato)}
.traka-vrh b{color:#fff;font-weight:600}
/* Informativne stranice stoje ovdje, odvojene od grana ponude (D-202). */
/* Tri poveznice na tri jednaka dijela, svaka centrirana u svom —
   nabacane jedna uz drugu izgledale su kao ostatak, ne kao izbornik
   (D-248). */
/* Poveznice počinju točno ondje gdje i logo: prvo slovo na rubu omota,
   bez nutarnjeg razmaka koji bi ih uvukao (D-255). Tri jednaka stupca
   drže razmak ujednačenim, ali tekst je lijevo poravnat. */
/* Razmak je fiksan, ne tri stupca preko 384 px: jednaki stupci su
   poveznice razvukli preko pola trake i izgledale su kao da nemaju
   veze jedna s drugom (D-262). */
.traka-vrh__veze{display:flex;gap:26px}
.traka-vrh__veze a{
  padding:4px 0;white-space:nowrap;
  transition:color .14s ease;
}

/* Kontakt završava u ravnini s desnim rubom pločice Košarica, to jest
   s rubom omota (D-255, ispravljeno D-260). */
.traka-vrh__kontakt{padding-right:0}

/* Društvene mreže na točnoj sredini trake (D-260). Apsolutno, jer
   poveznice lijevo (384 px) i kontakt desno (~300 px) nisu jednako
   široki, pa bi ih `space-between` stavio nasred ostatka. */
.traka-vrh .omot{position:relative}
.traka-vrh__soc{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:18px;
}
.traka-vrh__soc a{display:grid;place-items:center;line-height:0;color:#D7DED1}
.traka-vrh__soc a:hover{color:var(--zlato)}


/* Kontakt desno: telefon je poveznica, radno vrijeme podatak — dvije
   različite stvari, pa i izgledaju različito i dijeli ih crta (D-246). */
.traka-vrh__kontakt{display:flex;align-items:center;gap:14px;margin-left:auto}
.traka-vrh__tel{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.traka-vrh__tel svg{opacity:.65}
.traka-vrh__tel:hover svg{opacity:1}
.traka-vrh__radno{
  position:relative;padding-left:14px;color:#9AA396;white-space:nowrap;
}
.traka-vrh__radno::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:12px;background:rgba(221,227,216,.26);
}

/* ------------------------------------------------------------- zaglavlje */

.zaglavlje{
  background:var(--white);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.zaglavlje__red{
  display:flex;align-items:center;gap:26px;
  padding-block:16px;
}
.logo__tekst{
  font:700 22px var(--disp);
  color:var(--ink);
  letter-spacing:-.03em;
}
/* Logo zadržava istu visinu i pri listanju (D-215). */
.logo{display:block;flex:none}
/* Logo bez „d.o.o." (D-251): isti zauzeti prostor nosi osjetno veći
   znak. Na desktopu je zato spušten na 38 px — pri 46 je uz tražilicu
   bio glasniji od ponude (D-261). */
.logo img{display:block;width:auto;height:38px;max-width:200px;object-fit:contain}
/* Širina je ograničena prostorom između lijeve i desne skupine ikona:
   na 375 px to je 138 px, i to je najveći logo koji stane a da ostane
   točno na sredini. */
@media (max-width:900px){.logo img{height:auto;max-height:34px;max-width:100%}}
.zaglavlje__izbornik-gumb{
  display:none;
  align-items:center;gap:8px;
  min-height:44px;padding:0 14px;
  background:var(--gumb);color:#fff;border:0;border-radius:var(--rs);
  font:600 13px var(--ui);cursor:pointer;
}

/* `position:relative` i BEZ `overflow:hidden`: ploča s prijedlozima je
   dijete tražilice, pa ju je `overflow:hidden` rezao na visinu polja i
   od prijedloga se nije vidjelo ništa (D-247). Zaobljenje kutova sada
   nose polje i gumb, ne okvir. */
.trazilica{
  position:relative;
  flex:1;
  display:flex;
  min-width:0;
  border:1px solid var(--line2);
  border-radius:var(--rs);
  background:var(--white);
}
.trazilica input{
  flex:1;min-width:0;
  border:0;padding:0 16px;
  border-radius:var(--rs) 0 0 var(--rs);
  min-height:48px;
  font:400 14.5px var(--ui);
  color:var(--ink);
  background:transparent;
}
.trazilica input:focus{outline:0}
.trazilica:focus-within{border-color:var(--green)}
/* Povećalo je maslinasto na bijelom, bez pune plohe: puni maslinasti
   blok u zaglavlju odudarao je od svega ostalog (D-205). */
.trazilica button{
  display:grid;place-items:center;
  width:54px;border:0;
  border-radius:0 var(--rs) var(--rs) 0;
  background:transparent;color:var(--green);cursor:pointer;
}
.trazilica button:hover{color:var(--green-d);background:var(--green-t)}

/* Radnje s natpisom ispod ikone — ikona sama se mora pogađati (D-199). */
.zaglavlje__alati{display:flex;gap:2px;align-items:center}
.zaglavlje__lijevo,.zaglavlje__desno{display:contents}
/* Povećalo u alatima je samo mobilna stvar (D-241). Selektor je
   namjerno dvočlan: .alat{display:grid} stoji niže u datoteci i inače
   bi ga nadjačao. */
.zaglavlje .alat--trazi{display:none}

/* Usporedba se pojavljuje tek kad je nešto odabrano — na svim širinama
   (D-324, mijenja D-280). Prazna radnja zauzima mjesto i ne govori
   ništa. Klasu `ima` postavlja skripta; bez skripte radnja ostaje
   vidljiva, jer je tada ništa ne može otkriti. */
.zaglavlje .alat--usporedba{display:none}
.zaglavlje .alat--usporedba.ima{display:grid}
.js-nema .zaglavlje .alat--usporedba{display:grid}
/* Natpis je duži od ostalih, pa mu na desktopu treba više mjesta.
   Samo na desktopu: na mobitelu natpisa nema, sve su radnje ploha
   40 × 40, a 104 px je ondje gurnulo logo u sliver (D-328). */
@media (min-width:901px){
  .zaglavlje .alat--usporedba{min-width:104px}
}
.alat{
  display:grid;justify-items:center;gap:3px;
  min-width:74px;padding:6px 8px;
  color:var(--ink);border-radius:var(--rs);
  position:relative;
}
/* Povećalo je <button>, a ne <a>: bez ovoga nosi okvir i pozadinu
   preglednika i jedino ono u redu izgleda kao gumb. */
button.alat{background:none;border:0;font:inherit;cursor:pointer}
.alat > span:last-child{font:500 11px var(--ui);color:var(--muted);white-space:nowrap}
/* Samo gdje miš postoji: na dodir :hover ostane zalijepljen nakon
   tapkanja, pa je povećalo stajalo u zelenom okviru i poslije (D-247). */
@media (hover:hover){
  .alat:hover{background:var(--green-t);color:var(--green)}
  .alat:hover > span:last-child{color:var(--green)}
}
/* Brojka 0 ne govori ništa, pa se ne ispisuje — radnja „Usporedba"
   ipak stoji trajno (D-277). */
.alat__broj[hidden]{display:none}
.alat__broj{
  position:absolute;top:1px;right:11px;
  min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;
  background:var(--green);color:#fff;
  border-radius:9px;
  font:600 10.5px/1 var(--mono);
}

/* --------------------------------------------------------- glavni izbornik

   Tamna maslina je ploha, ne radnja: dovoljno tamna da zelena marke
   smije raditi kao podvlaka, a maslinasta #557920 ostaje rezervirana
   za gumbe. Da je traka puna maslinasta, „Dodaj u košaricu" više ne bi
   bio jedini maslinasti element na ekranu (D-200). */

.glavni-izbornik{
  background:var(--nav);
}
/* Pločice počinju tamo gdje i logo, a završavaju gdje i košarica:
   traka izbornika dijeli isti omot kao red iznad nje, pa se rubovi
   poklapaju (D-210). */
/* Pločice: velika ikona iznad naziva, uspravne crte između grana,
   jednaki stupci. Verzal se ovdje vraća — razlog zbog kojeg je
   ukinut (D-170) bio je red u kojem su se miješali gumbi i poveznice,
   a toga u pločicama nema; natpis je ovdje oznaka stupca, ne rečenica. */
/* Stupaca ima koliko ima grana — ne osam fiksno. S fiksnih osam je
   nakon izbacivanja Savjeta (D-253) zadnji stupac ostao prazan i traka
   je završavala prije desnog ruba (D-252). */
.glavni-izbornik__popis{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  list-style:none;margin:0;padding:0;
}


/* ---------------------------------------------------------------- stranica */

.sadrzaj{display:block;min-height:40vh}
.stranica{padding-block:32px 60px}
.stranica__naslov{margin-bottom:18px}
.oznaka{
  font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;
}
.uvod{font-size:15.5px;max-width:68ch}
.tekst{max-width:72ch}
.tekst h2{margin-top:1.6em}
.razmak-gore{margin-top:22px}

/* ═══ Popis proizvoda ═════════════════════════════════════════════════
   Preuzeto iz prototip-v4.html (ekran „Rajčica"), uz prilagodbu imena
   razreda WooCommerceovom ispisu. Mjere nisu ponovno procijenjene nego
   prenesene: 250 px traka filtera, razmak 36 px, tri kartice u redu,
   razmak između kartica 15 px, zaobljenje 10 px. */

.arhiva{padding-bottom:60px}
.woo-stranica{padding-block:24px 60px}

.mrvice{
  font:400 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding:22px 0 0;
}
.mrvice a{color:var(--muted)}
.mrvice a:hover{color:var(--ink)}
.mrvice span + span::before{content:"/";margin:0 7px;color:var(--line2)}

.arhiva__naslov{padding-top:14px;margin-bottom:8px}
.arhiva__opis{margin-bottom:4px}

/* Podkategorije kao vodoravni klizač: petnaest pločica u mreži potisne
   robu ispod ruba zaslona (D-236). */
.podkat{position:relative;margin:18px 0 0}
.podkat__traka{
  display:flex;gap:var(--razmak);overflow-x:auto;
  scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  padding-bottom:2px;
}
.podkat__traka::-webkit-scrollbar{display:none}

/* Strelice stoje NA traci, uz njezine rubove, a ne u redu ispod: ondje
   su se čitale kao nešto deseto, a kupac nije vidio da se traka lista
   (D-248). Sloj ne hvata klikove, gumbi hvataju. */
.podkat__strelice{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;justify-content:space-between;align-items:center;
}
.podkat__strelice .izdstr{
  pointer-events:auto;width:36px;height:36px;font-size:17px;
  border-color:var(--green);color:var(--green);
  box-shadow:0 2px 12px -4px rgba(20,24,15,.4);
}
.podkat__strelice .izdstr:first-child{margin-left:-8px}
.podkat__strelice .izdstr:last-child{margin-right:-8px}
.podkat__strelice .izdstr:disabled{opacity:0;pointer-events:none}
.podkategorija{
  flex:0 0 auto;min-width:168px;scroll-snap-align:start;
  display:flex;align-items:center;min-height:52px;
  padding:12px 18px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.podkategorija:hover{border-color:var(--green);background:var(--green-t)}
.podkategorija__naziv{font:600 14.5px/1.25 var(--ui);color:var(--ink)}

/* ── raspored: filtri lijevo, popis desno ── */

.catlayout{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:36px;
  padding:22px 0 0;
  align-items:start;
}
.catlayout > div{min-width:0}

aside.filters{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:6px 20px 14px;
  position:sticky;top:158px;
}
.fgroup{padding:16px 0;border-bottom:1px solid var(--line);border-width:0 0 1px;margin:0}
.fgroup:last-of-type{border:0}
.fgroup h5{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;font-weight:500;padding:0;
}
.fgroup label{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:4px 0;cursor:pointer}
.fgroup label .cnt{margin-left:auto;color:var(--muted);font-size:11px;font-family:var(--mono)}
.fgroup input{accent-color:var(--ink);width:15px;height:15px;margin:0;flex:none}
.fgroup__popis{display:block}
.fgroup__popis.je-dugacak{max-height:198px;overflow-y:auto;padding-right:4px}
/* Gumb stoji uvijek — obrazac se više ne šalje sam (D-243). Dok se
   odabir ne promijeni, gumb je ugašen: ne nudi radnju koja ne bi
   ništa promijenila. Na mobitelu je ljepljiv uz dno panela, da se do
   njega ne mora listati natrag. */
.filters__posalji{width:100%;margin-top:16px}
.filters__posalji:disabled{opacity:.45;cursor:default;background:var(--gumb)}

/* Glava s križićem: samo na mobitelu, gdje panel prekriva zaslon. */
.filters__glava{display:none}
.filters__zatvori{
  display:grid;place-items:center;width:40px;height:40px;
  background:none;border:0;border-radius:var(--rs);color:var(--ink);cursor:pointer;
}
.filters__zatvori:hover{background:var(--green-t);color:var(--green)}

.toolrow{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-bottom:1px;padding:14px 0;flex-wrap:wrap;min-height:60px;
}
.sortsel,
.woocommerce-ordering select{
  border:1px solid var(--line2);border-radius:var(--rs);
  padding:9px 12px;background:var(--white);color:var(--ink);
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;
}
.activef{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.activef a{
  border:1px solid var(--line2);border-radius:var(--rs);background:var(--white);
  font-family:var(--mono);font-size:11px;letter-spacing:.03em;
  padding:6px 12px;color:var(--ink);cursor:pointer;
}
.activef a:hover{border-color:var(--ink);color:var(--ink)}
.activef a.ocisti{border-style:dashed;color:var(--muted)}
.brojac{margin:0;font:400 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.mfilter-btn{display:none}

/* ── mreža i kartica ── */

/* Tri kartice u redu (D-309, ispravljeno). Četiri su bile pregusto;
   visina kartice je u međuvremenu pala s 647 na ~520 px zbog niže
   slike i naziva u jednom redu, pa tri više ne djeluju razvučeno. */
ul.pgrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--razmak);
  list-style:none;margin:0;padding:0;
}
/* WooCommerce svoje kartice postavlja na plutanje i postotnu širinu, a
   clearfix ::before/::after u gridu postane prazna ćelija. */
.woocommerce ul.products li.product,
ul.products li.product{width:auto;float:none;clear:none;margin:0}
.woocommerce ul.products::before,.woocommerce ul.products::after,
ul.products::before,ul.products::after{display:none}

li.pcard{
  background:var(--white);
  display:flex;flex-direction:column;position:relative;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:.15s;
}
li.pcard:hover{border-color:var(--line2);background:#FCFCFA}

/* Niža slika u kartici (D-306): 1/.9 je dizalo karticu i činilo
   popis prozračnim do praznine. */
.pimg{display:block;aspect-ratio:1/.72;background:var(--white);position:relative}
.pimg img{
  width:100%;height:100%;
  object-fit:contain;   /* pakiranja su uspravna — ne reže se (D-065) */
  display:block;
}

.pbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}

/* Svaki redak drži svoju visinu i kad je prazan (D-349) — proizvod bez
   proizvođača, bez svojstava ili bez pakiranja inače povuče sve ispod
   sebe gore i kartice u istom redu više nisu poravnate. */
.pmfr{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0;
  line-height:13px;min-height:13px;
}
.pmfr a{color:inherit}
.pmfr a:hover{color:var(--green)}

/* Naziv stoji u jednom redu (D-306). Dug naziv je lomio karticu u dva
   reda i time dizao cijeli red u mreži; sada mu skripta spusti pismo
   dok ne stane, a tek ako ni najmanje ne stane, reže se trotočkom. */
.pname{
  font-family:var(--disp);font-weight:600;font-size:16px;line-height:1.3;
  letter-spacing:-.01em;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  /* Stalna visina: kad skripta spusti pismo, redak se ne smije
     skupiti, inače kartice u istom redu nisu jednake. */
  min-height:37px;display:flex;align-items:center;
}
.pname a{color:var(--ink)}
.pname a:hover{color:var(--green)}

/* Linija od najviše tri glavna svojstva — čeka podatke (Q-28). */
/* Tri glavna svojstva: jedan red, bez lomljenja — kartice u mreži
   moraju ostati jednako visoke (D-288). */
.pmeta{font-size:12.5px;color:var(--muted);margin:0;
  line-height:16px;min-height:16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.stock{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;display:flex;align-items:center;gap:7px;
  color:var(--green);margin:0;
}
.stock::before{content:"";width:6px;height:6px;background:currentColor;flex:none}
.stock.narudzba{color:#7A6218}
.stock.nema{color:var(--muted)}

/* Pakiranje — jedan okvir podijeljen na segmente, sa strelicom kad ima
   više nego što stane. Strelica je znak da ima još, ne ukras. */
/* Mjesto za pakiranje zauzima istu visinu i kad je prazno, pa su
   cijena i gumb u redu poravnati i kad se miješaju artikli s
   varijacijama i bez njih (D-047). */
.pakiranje{margin-top:10px;min-height:62px}
/* Rezervirano prazno mjesto za pakiranja je maknuto: proizvod bez
   varijacija ostavljao je rupu u kartici (D-225). */
.pakopt--jedno{
  flex:1;display:flex;align-items:center;
  min-height:38px;padding:9px 12px;
  background:var(--paper);color:var(--muted);
  font:500 12.5px var(--mono);white-space:nowrap;
}
.paklab{
  display:block;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.pakred{
  display:flex;align-items:stretch;gap:0;
  border:1px solid var(--line2);border-radius:var(--rs);overflow:hidden;
}
.pakopts{display:flex;flex:1;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.pakopts::-webkit-scrollbar{display:none}
.pakopt{
  flex:1 0 auto;min-width:72px;min-height:38px;padding:9px 12px;border:0;
  border-right:1px solid var(--line2);background:var(--white);cursor:pointer;
  font:500 12.5px var(--mono);color:var(--ink);white-space:nowrap;transition:.14s;
}
.pakopt:last-child{border-right:0}
.pakopt:hover{background:var(--green-t)}
/* Odabir nema svoju boju (D-321). Ploha je uvijek prozirna i posvijetli
   se tek na prijelazu mišem; odabrano se poznaje po tome što je jedino
   ispisano punim slovima u boji teksta, dok ostale mogućnosti stoje
   prigušeno. Boja u kartici ostaje samo na gumbu „Dodaj", pa se odmah
   vidi što je radnja. */
.pakopt{color:var(--muted)}
/* Klijent (10. 11. 2026.): „kad na varijaciji selectam npr. 5/4",
   želim da zazeleniš ono što je selektano, da znam što ide u košaricu."
   Odabrano pakiranje sada nosi zelenu plohu i zeleni obrub, na kartici
   i na stranici proizvoda — zamjenjuje D-321 (D-428). */
.pakopt.on,
.pakopt.on:hover{
  background:var(--green-t);color:var(--green-d);font-weight:600;
  box-shadow:inset 0 0 0 1.5px var(--green);position:relative;z-index:1;
}
.pakvise{
  display:grid;place-items:center;
  flex:0 0 30px;border:0;border-left:1px solid var(--line2);background:var(--white);
  cursor:pointer;font-size:16px;line-height:1;color:var(--ink);padding:0;
}
.pakvise:hover{background:var(--green-t);color:var(--green)}

.prow{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-top:auto;gap:8px;padding-top:12px;
}
.price,
.price .woocommerce-Price-amount{font-family:var(--mono);font-weight:600;font-size:15.5px;color:var(--ink)}
.price del{font-weight:400;font-size:12px;color:var(--muted);margin-right:6px}
.price ins{text-decoration:none}

.addbtn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--gumb);border-radius:var(--rs);
  background:var(--gumb);color:#fff;padding:9px 16px;min-height:38px;
  font-weight:600;font-size:12.5px;letter-spacing:.02em;transition:.15s;
  white-space:nowrap;
}
.addbtn:hover{background:var(--gumb-h);border-color:var(--gumb-h);color:#fff}
/* „Odaberi opcije" na kartici rezane robe (D-422): duži natpis, pa na
   uskoj kartici sjeda ispod cijene umjesto da je gura. */
.prow:has(.addbtn--opcije){flex-wrap:wrap}
.addbtn--opcije{padding-left:12px;padding-right:12px}
.addbtn.alt{background:transparent;color:var(--ink);border-color:var(--line2)}
.addbtn.alt:hover{background:transparent;border-color:var(--ink);color:var(--ink)}

/* Sidrena cijena — unutar iste plohe, odmah ispod cijene. */
.sidro,
.sidrena,
.sidrena-redak{
  display:block;margin-top:7px;
  font:400 11px var(--mono);color:var(--muted);letter-spacing:.01em;
}
.sidro:empty{display:none}
.sidrena .woocommerce-Price-amount{font:inherit;color:var(--tekst)}

.prazno{padding:48px 0;text-align:center;color:var(--muted)}

/* ── stranjenje ── */

/* Stranjenje. WooCommerceov vlastiti stil slijepi kućice u jednu traku
   s obrubom; ovdje su razdvojene kućice od 44 px. */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-pagination ul.page-numbers,
.woocommerce-pagination ul{
  display:flex;flex-wrap:wrap;gap:8px;
  list-style:none;margin:34px 0 0;padding:0;border:0;
}
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-pagination ul li{border:0;margin:0;overflow:visible}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers{
  display:grid;place-items:center;
  min-width:44px;height:44px;padding:0 12px;margin:0;
  background:var(--white);border:1px solid var(--line);border-radius:var(--rs);
  color:var(--ink);font:500 13px var(--mono);line-height:1;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce-pagination a.page-numbers:hover{
  border-color:var(--green);color:var(--green);background:var(--white);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce-pagination span.current{
  background:var(--gumb);border-color:var(--gumb);color:#fff;
}
.woocommerce nav.woocommerce-pagination ul li span.dots,
.woocommerce-pagination span.dots{border-color:transparent;background:transparent;color:var(--muted)}

/* ── poruke ── */

/* WooCommerce svojim porukama crta ikonu kao `::before`, a ona je u
   zatečenom stilu postavljena apsolutno u gornji lijevi kut. Dok je
   okvir imao samo 16 px lijevog razmaka, ikona je sjedala na prva dva
   slova („✔ROBA Mreža…" umjesto „PROBA Mreža…") — D-378. Mjesto za
   ikonu sada postoji, a sama je okomito poravnata s retkom. */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  position:relative;
  margin:0 0 var(--razmak);padding:13px 16px 13px 46px;
  border:1px solid var(--line);border-left:3px solid var(--green);border-radius:var(--rs);
  background:var(--white);font-size:14px;list-style:none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{
  position:absolute;left:16px;top:14px;margin:0;
  font-size:15px;line-height:1.4;color:var(--green);
}
.woocommerce-error::before{color:var(--error)}
.woocommerce-error{border-left-color:var(--error);color:var(--error)}

/* ---------------------------------------------------------------- podnožje

   Varijanta B: gornji sloj u boji trake izbornika (`--nav`) nosi
   kontakt i stupce, donji u tinti (`--ink`) nosi pravnu crtu. Gornji
   sloj je prije imao vlastitu nijansu (#3D5520) koja se od trake
   izbornika razlikovala za dlaku — svedeno na istu stepenicu (D-319).

   **Boja ide punom širinom zaslona, sadržaj ne.** Ploha se proteže od
   ruba do ruba, a stupci stanu u 1320 px i poravnaju se po sredini —
   šire od omota stranice (1240 px) jer podnožje nosi četiri stupca,
   ali ne razvučeno preko cijelog zaslona, gdje bi redak postao
   nečitljiv (D-220). */

.podnozje{margin-top:60px;font-size:14px}
/* Isti omot kao zaglavlje i sadržaj — podnožje je prije imalo vlastitu
   širinu i vlastiti rub, pa se nijedan stupac nije poklapao s ničim
   iznad (D-252). Boja i dalje ide punom širinom zaslona. */
.podnozje__sirina{
  width:100%;max-width:var(--omot);margin-inline:auto;
  padding-inline:var(--rub-omota);
}

.podnozje__gore{background:var(--nav);color:#C9D3BC}
/* Pet stupaca umjesto četiri i uži razmak (D-270): „Informacije" su
   imale dvanaest redaka i vukle oko prema dnu, a kontakt je zauzimao
   trećinu širine bez potrebe. */
.podnozje__mreza{
  display:grid;grid-template-columns:1.2fr repeat(5,1fr);gap:22px;
  padding-block:46px 40px;
}
.podnozje__naslov{
  font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--zlato);margin:0 0 16px;
}
.podnozje a{color:#DDE3D8}
.podnozje a:hover{color:#fff}
.podnozje__popis{list-style:none;margin:0;padding:0}
.podnozje__popis li{margin-bottom:6px}
.podnozje__popis a{display:inline-block;padding:3px 0;font-size:13.5px}

.podnozje__tvrtka{font:700 18px var(--disp);color:#fff;margin:0 0 10px;letter-spacing:-.01em}
.podnozje__adresa{margin:0 0 14px;line-height:1.65;font-size:13.5px}
.podnozje__telefoni{display:grid;gap:2px;margin:0 0 12px}
.podnozje__telefoni a{font:600 16px var(--mono);color:#fff}
.podnozje__telefoni a:hover{color:var(--zlato)}
.podnozje__posta{margin:0 0 12px}
.podnozje__posta a{color:var(--zlato);font-size:14px}
.podnozje__radno{margin:0;font:500 11.5px var(--mono);line-height:1.8}

.podnozje__soc{display:flex;gap:9px;margin-top:18px}
.podnozje__soc a{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);border-radius:var(--rs);
}
.podnozje__soc a:hover{border-color:var(--zlato);background:rgba(255,255,255,.06);color:var(--zlato)}

/* Pravna crta pada u tintu: mora stajati, ali ne otima pažnju. */
.podnozje__pravno{background:var(--ink);color:#8E978C;font:400 12px var(--mono)}
.podnozje__pravno .podnozje__sirina{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:16px;
}

@media (max-width:1000px){
  .podnozje__mreza{grid-template-columns:1fr 1fr;gap:30px}
}
/* Na mobitelu stupci idu dva u red, ne jedan pod drugi (D-366). Šest
   blokova u jednom stupcu dalo je podnožje duže od same stranice —
   izmjereno 1 410 px na 360 px širine. Kontakt ostaje pune širine jer
   nosi telefone od 16 px i ikone, a pet popisa poveznica se slaže u
   dva stupca i staje u tri reda. */
@media (max-width:620px){
  .podnozje__mreza{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px;padding-block:34px 30px}
  .podnozje__kontakt{grid-column:1 / -1}
  .podnozje__naslov{margin-bottom:12px}
}

/* ═══ Stranica proizvoda ══════════════════════════════════════════════
   Preuzeto iz prototip-v4.html (ekran „PDP"). Dugmad za količinu i
   kupnju su na 52 px — spljošteni gumb od 38 px ne pogađa se prstom i
   ne izgleda kao glavna radnja na stranici. */

.pdp{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:26px 0 40px}
.pdp > div{min-width:0}

.pdp .gal{aspect-ratio:1/1;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;position:relative}
.pdp .gal img{width:100%;height:100%;object-fit:contain;display:block}

.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumbs .ph{
  width:74px;height:74px;padding:0;
  border:1px solid var(--line);border-radius:var(--rs);
  background:var(--white);overflow:hidden;cursor:pointer;
  opacity:.72;transition:opacity 140ms,box-shadow 140ms;
}
.thumbs .ph img{width:100%;height:100%;object-fit:contain;display:block}
.thumbs .ph:hover{opacity:1}
.thumbs .ph.on{opacity:1;border-color:var(--green);box-shadow:inset 0 0 0 2px var(--green)}

.eyebrow{
  display:block;
  font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.eyebrow.g{color:var(--green)}

.pdp h1{font-size:clamp(24px,3vw,32px);line-height:1.1;margin-top:6px}
.pdp .sub{color:var(--muted);font-size:14.5px;margin:10px 0 16px}
.pdp .sub p{margin:0 0 .6em}
.pdp .sub b{color:var(--ink)}

/* Broj stupaca je broj činjenica koje artikl stvarno ima (D-294).
   Prije je bilo fiksno tri, pa je artikl s jednom ili dvije dobivao
   sivu prazninu desno — izgledala je kao polje koje čeka podatak.
   Sada se ispisuje samo ono što postoji. */
.keyfacts{
  display:grid;grid-template-columns:repeat(var(--cinjenica,3),minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin:18px 0;
}
.keyfacts div{
  background:var(--white);padding:12px 14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.keyfacts b{
  display:block;color:var(--ink);font-family:var(--disp);font-size:15px;
  margin-top:4px;letter-spacing:0;text-transform:none;
}

.varbox{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);padding:20px;margin:18px 0;
}
.varbox h5{
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin:0 0 12px;font-weight:500;
}
.varopt{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  width:100%;text-align:left;
  border:1px solid var(--line);border-radius:var(--rs);
  background:var(--white);
  padding:13px 16px;margin-bottom:8px;cursor:pointer;transition:.12s;
}
.varopt:last-child{margin-bottom:0}
.varopt:hover{border-color:var(--line2)}
.varopt.on{border-color:transparent;background:rgba(85,121,32,.08);
  box-shadow:inset 0 0 0 2px var(--green)}
.varopt b{display:block;font:600 14px var(--ui);color:var(--ink)}
.varopt .per{display:block;font:400 11.5px var(--mono);color:var(--muted);margin-top:3px}
.varopt .vp,
.varopt .vp .woocommerce-Price-amount{font-family:var(--mono);font-weight:600;font-size:15px;white-space:nowrap;color:var(--ink)}

.pdp__cijena{margin:18px 0 0;font-size:22px}

/* Cijena, sidrena cijena i pakiranje — svaki podatak u svojem pojasu,
   odvojeni tankom crtom (D-296). Raspored po uzoru na Pevex i Agronom:
   cijena krupno gore, ispod nje red sa sidrenom cijenom, pa red s
   pakiranjem, pa radnja. */
.kupnja-glava{margin:20px 0 0;border-top:1px solid var(--line)}
.kupnja-glava .pdp__cijena{
  margin:0;padding:14px 0 12px;font:600 26px/1 var(--mono);color:var(--ink);
}
.kupnja-glava .pdp__cijena .woocommerce-Price-amount{font-weight:600}
.kupnja-sidro{
  margin:0;padding:11px 0;border-top:1px solid var(--line);
  font:400 12.5px var(--mono);color:var(--muted);
}
.kupnja-sidro .sidrena{margin:0}
.kupnja-sidro .woocommerce-Price-amount{color:var(--ink);font-weight:600}
/* Natpis i vrijednost stoje jedno uz drugo; razvučeni na suprotne
   rubove čitali su se kao dva nepovezana podatka. */
.kupnja-pak{
  margin:0;padding:11px 0;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.kupnja-pak span{font:500 10px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.kupnja-pak b{font:600 15px var(--disp);color:var(--ink)}
.kupnja-glava + .buyrow,
.kupnja-glava + .nema-na-zalihi{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}

.buyrow{display:flex;align-items:stretch;gap:10px;margin-top:14px}
.qty{display:flex;border:1px solid var(--line2);border-radius:var(--rs);
  background:var(--white);overflow:hidden}
.qty button{width:48px;min-height:52px;border:0;background:none;font-size:19px;
  color:var(--ink);cursor:pointer}
.qty button:hover{background:var(--green-t)}
.qty input{width:54px;border:0;text-align:center;font:600 15.5px var(--mono);
  background:none;color:var(--ink);-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bigadd{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:52px;padding:0 24px;
  background:var(--gumb);border:1px solid var(--gumb);border-radius:var(--rs);
  font-weight:600;font-size:15px;color:#fff;letter-spacing:.02em;cursor:pointer;
}
.bigadd:hover{background:var(--gumb-h);border-color:var(--gumb-h)}
.bigadd .mono,
.bigadd .mono .woocommerce-Price-amount{font-family:var(--mono);font-weight:600;color:#fff}
.bigadd[disabled]{opacity:.5;cursor:not-allowed}

.microtrust{
  display:flex;flex-direction:column;gap:8px;
  font-size:13px;color:var(--muted);
  margin-top:18px;border-top:1px solid var(--line);padding-top:16px;
}
.microtrust b{color:var(--ink);font-weight:600}
.microtrust .row{display:flex;gap:10px;align-items:center}
.microtrust .stock{font-size:11px}

.pdptabs{
  border-top:1px solid var(--line);
  padding:40px 0 50px;
  display:grid;grid-template-columns:1fr 1fr;gap:32px;
}
.pdptabs > div{min-width:0}
.pdptabs h3{font-size:20px;margin-bottom:16px}
.pdptabs > div > h3:first-child{margin-top:0}

/* Kalendar uzgoja na stranici proizvoda (D-302, D-305, D-306; stil
   dopisan u D-317 — oblikovanje je nedostajalo i kalendar se ispisivao
   kao goli tekst). Tri pojasa dijele isto polje: sivo je sadnja,
   svijetlo zeleno presađivanje, maslinasto berba. Polje u kojem se
   poklope dijeli se na jednake dijelove, pa se vidi oboje. */
.kalendar{
  border-top:1px solid var(--line);margin-top:34px;padding:28px 0 0;
}
.kalendar__glava{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:baseline;gap:12px 20px;margin-bottom:18px}
.kalendar__glava h3{margin:0;font:600 20px var(--disp);letter-spacing:-.01em;color:var(--ink)}
.kalendar__legenda{display:flex;flex-wrap:wrap;gap:14px;
  font:500 10.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.kalendar__legenda > span{display:inline-flex;align-items:center;gap:7px}
.kalendar__legenda i{display:block;width:12px;height:12px;border-radius:2px}
.kalendar i.sadnja{background:#8E968A}
.kalendar i.presad{background:#9CBF55}
.kalendar i.berba{background:var(--green)}
.kalendar__mreza{
  display:grid;grid-template-columns:auto 1fr;gap:9px 16px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;
}
.kalendar__mjeseci{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;
  font:500 10.5px var(--mono);color:var(--muted);text-align:center}
.kalendar__zona{font:500 10.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;
  color:var(--tekst);white-space:nowrap}
.kalendar__red{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.kalendar__polje{display:flex;height:22px;border-radius:3px;background:var(--paper);
  border:1px solid var(--line);overflow:hidden}
.kalendar__polje i{flex:1 1 0;min-width:0}
.kalendar__polje:has(i){border-color:transparent}
.kalendar__rasponi{margin:0;font-size:14px;line-height:1.5;color:var(--tekst)}
.kalendar__rasponi b{color:var(--ink);font-weight:600}
.kalendar__napomena{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
@media (max-width:560px){
  .kalendar__mreza{grid-template-columns:1fr;gap:7px;padding:16px}
  .kalendar__zona{display:none}
  .kalendar__mreza > span:empty{display:none}
}

.spec{
  width:100%;border-collapse:collapse;font-size:13.5px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}
.spec th,.spec td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--line)}
.spec th{width:44%;color:var(--muted);font-weight:500;font-family:var(--mono);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.spec td{font-family:var(--mono);font-size:13px;color:var(--ink)}
.spec tr:last-child td,.spec tr:last-child th{border:0}

.res{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 24px;
}
.res h4{font-family:var(--disp);font-size:16px;margin-bottom:12px;font-weight:600}

@media (max-width:1000px){
  .pdp{grid-template-columns:1fr;gap:24px}
  .pdptabs{grid-template-columns:1fr;gap:24px;padding:28px 0 40px}
  .keyfacts{grid-template-columns:1fr 1fr}
}

@media (max-width:560px){
  .keyfacts{grid-template-columns:1fr}
  .buyrow{flex-wrap:wrap}
  .bigadd{flex-basis:100%}
}


/* ═══ Košarica i blagajna ═════════════════════════════════════════════
   Preuzeto iz prototip-v4.html (ekran „Blagajna"): dva stupca, koraci u
   bijelim okvirima lijevo, sažetak narudžbe desno i sticky. Predlošci
   su WooCommerceovi klasični — stilizira se njihov ispis, ne prepisuje. */

/* ── košarica: raspored stranice ── */

.woocommerce-cart .puno{display:grid;grid-template-columns:1.55fr 1fr;gap:32px;align-items:start}
.woocommerce-cart .woocommerce{display:contents}
.woocommerce-cart .woocommerce-notices-wrapper{grid-column:1/-1}
.woocommerce-cart .cart-collaterals{min-width:0}

/* ── blagajna ── */

.woocommerce-checkout .omot > .woocommerce{display:block}
form.checkout.woocommerce-checkout{
  display:grid;grid-template-columns:1.5fr 1fr;gap:40px;
  padding:10px 0 70px;align-items:start;
}
form.checkout #customer_details{grid-column:1;min-width:0}
form.checkout #order_review_heading{grid-column:2;grid-row:1;margin:0 0 14px;font-size:17px}
form.checkout #order_review{grid-column:2;grid-row:1;min-width:0;padding-top:34px}

.step,
form.checkout .woocommerce-billing-fields,
form.checkout .woocommerce-shipping-fields,
form.checkout .woocommerce-additional-fields{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;margin-bottom:18px;
}
form.checkout h3{font-size:17px;margin:0 0 16px}
form.checkout .woocommerce-billing-fields h3,
form.checkout .woocommerce-additional-fields h3{margin-top:0}

/* polja */
.woocommerce form .form-row{display:block;margin:0 0 14px;padding:0}
.woocommerce form .form-row label{
  display:block;margin-bottom:6px;
  font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.woocommerce form .form-row .required{color:var(--green);text-decoration:none;border:0}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-selection{
  width:100%;border:1px solid var(--line2);border-radius:var(--rs);
  padding:12px 13px;min-height:46px;
  font:400 14px var(--ui);color:var(--ink);background:var(--paper);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{outline:none;border-color:var(--ink);background:var(--white)}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last{width:calc(50% - 7px);display:inline-block;vertical-align:top}
.woocommerce form .form-row-first{margin-right:12px}

/* R1 i OIB */
.r1blok{margin-top:6px;border-top:1px solid var(--line);padding-top:14px}
.r1kvac{display:flex;gap:9px;align-items:center;cursor:pointer;padding:4px 0;font-size:13.5px}
.r1kvac input{accent-color:var(--green);width:17px;height:17px;margin:0}
.r1polje{margin-top:12px}
.r1polje .obv{
  font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);margin-left:6px;
}
.polgreska{display:block;font-size:12.5px;color:var(--error);margin:6px 0 0}
input.nevazeci{border-color:var(--error) !important}

/* načini plaćanja */
.woocommerce-checkout #payment{background:transparent;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{
  list-style:none;margin:0 0 14px;padding:0;border:0;
}
.woocommerce-checkout #payment ul.payment_methods li{
  border:1px solid var(--line);border-radius:var(--rs);
  background:var(--white);padding:15px 16px;margin:0 0 8px;
  transition:.12s;
}
.woocommerce-checkout #payment ul.payment_methods li:hover{border-color:var(--line2)}
.woocommerce-checkout #payment ul.payment_methods li label{
  display:inline;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;
}
.woocommerce-checkout #payment ul.payment_methods li input[type=radio]{
  accent-color:var(--ink);width:16px;height:16px;margin-right:9px;
}
.woocommerce-checkout #payment .payment_box{
  background:transparent;margin:8px 0 0;padding:0;font-size:12.5px;color:var(--muted);
}
.woocommerce-checkout #payment .payment_box::before{display:none}
.napomena{
  display:block;font-size:13px;line-height:1.6;color:var(--muted);
  background:var(--green-t);border:1px solid #D9E7BF;border-radius:var(--r);
  padding:13px 16px;margin:10px 0 0;
}
.sitnopis{display:block;font-size:12px;line-height:1.55;color:var(--muted)}
.sitnopis-red td{padding-top:0 !important}

/* sažetak narudžbe */
form.checkout #order_review{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;position:sticky;top:158px;
}
.woocommerce-checkout-review-order-table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;
}
.woocommerce-checkout-review-order-table thead{display:none}
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th{
  padding:9px 0;text-align:left;border:0;border-bottom:1px solid var(--line);
}
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child{text-align:right;font-family:var(--mono)}
.woocommerce-checkout-review-order-table .product-name{color:var(--ink);font-weight:600}
.woocommerce-checkout-review-order-table .product-quantity{
  font:400 12px var(--mono);color:var(--muted);font-weight:400;
}
.woocommerce-checkout-review-order-table tfoot th{
  font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td{
  font-size:16px;color:var(--ink);font-weight:600;border-bottom:0;padding-top:14px;
}
.woocommerce-checkout-review-order-table ul#shipping_method{list-style:none;margin:0;padding:0}
.woocommerce-checkout-review-order-table ul#shipping_method li{padding:3px 0;font-family:var(--ui)}
.woocommerce-checkout-review-order-table ul#shipping_method input{accent-color:var(--ink);margin-right:7px}

.sidrena-redak{margin-top:3px}

.woocommerce-privacy-policy-text{font-size:12.5px;line-height:1.6;color:var(--muted);margin:16px 0 12px}
.woocommerce-privacy-policy-text a{color:var(--green);font-weight:600}
.woocommerce-terms-and-conditions-wrapper{margin-top:4px}
.woocommerce-terms-and-conditions-wrapper .form-row{margin-bottom:10px}
.woocommerce-form__label-for-checkbox{
  display:flex;gap:10px;align-items:flex-start;
  font:400 13px/1.5 var(--ui);color:var(--tekst);cursor:pointer;
}
.woocommerce-form__label-for-checkbox input{accent-color:var(--green);width:17px;height:17px;flex:none;margin-top:1px}
#place_order{width:100%;min-height:52px;font-size:15px;margin-top:6px}

.r1potvrda{font:400 13px var(--mono);color:var(--muted)}

@media (max-width:1000px){
  form.checkout.woocommerce-checkout{grid-template-columns:1fr;gap:0}
  form.checkout #customer_details,
  form.checkout #order_review_heading,
  form.checkout #order_review{grid-column:1;grid-row:auto}
  form.checkout #order_review{position:static;padding-top:24px;margin-bottom:40px}
}

@media (max-width:560px){
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last{width:100%;margin-right:0;display:block}
}


/* ═══ Naslovnica ══════════════════════════════════════════════════════
   Preuzeto iz prototip-v4.html (ekran „Home"). Fotografije u heroju
   složene su jedna preko druge i prelijevaju se samo preko opacity,
   dakle preko GPU-a. Tražilica se NE mijenja — ona je namještaj, ne
   poruka, pa bi treperila pri svakom prelasku mišem. */

.hero{position:relative;color:#fff;background:var(--ink);overflow:hidden;border-radius:var(--r)}
.hero .ph{position:absolute;inset:0;left:auto;right:0;width:54%}
.hero .ph picture{display:block;width:100%;height:100%}
.hero .ph img{width:100%;height:100%;object-fit:cover;display:block}
.hero .ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--ink) 0%,rgba(30,40,16,.76) 16%,rgba(30,40,16,0) 46%);
}
.hero .ph[data-ph]{opacity:0;transition:opacity 260ms cubic-bezier(.23,1,.32,1)}
.hero .ph[data-ph][data-on]{opacity:1}

.hero .omot{
  position:relative;z-index:2;
  padding-top:clamp(40px,3.4vw,54px);
  padding-bottom:clamp(86px,6.6vw,100px);
}
.hero .poruke{display:grid;max-width:min(560px,46%)}
.hero .por{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity 180ms cubic-bezier(.23,1,.32,1)}
.hero .por[data-on]{opacity:1;pointer-events:auto}
.hero .eyebrow{color:var(--zlato)}
.hero .por .eyebrow::before{
  content:"";display:inline-block;width:9px;height:9px;
  background:var(--brand);margin-right:9px;vertical-align:1px;
}
.hero h1{
  font-size:clamp(30px,3.7vw,44px);line-height:1.06;
  margin:12px 0 12px;max-width:620px;font-weight:600;color:#fff;
}
.hero p{color:#C9CEC7;font-size:15.5px;margin-bottom:20px;max-width:480px}

.hero .cta2{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hero .cta2 a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  font:500 12px var(--mono);letter-spacing:.07em;text-transform:uppercase;
  background:var(--gumb);border:1px solid var(--gumb);border-radius:var(--rs);
  color:#fff;
}
/* Isti gumb kao svugdje (D-322): boja trake izbornika, bijel tekst.
   Na prijelazu tamni kao i drugdje, ali rub ostaje u boji mirovanja —
   inače bi se na tamnom heroju izgubio oblik. */
.hero .cta2 a:hover{background:var(--gumb-h);border-color:var(--gumb);color:#fff}
.hero .cta2 a.ghost{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.hero .cta2 a.ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)}

.herosearch{max-width:min(560px,46%);display:flex;position:relative;margin-top:22px}
.herosearch input{
  width:100%;padding:14px 60px 14px 18px;border:0;border-radius:var(--rs);
  font:400 15px var(--ui);color:var(--ink);background:var(--white);
}
.herosearch .go{
  position:absolute;right:0;top:0;bottom:0;width:54px;
  display:grid;place-items:center;
  border:0;border-radius:0 var(--rs) var(--rs) 0;
  background:var(--gumb);color:#fff;cursor:pointer;
}
.herosearch .go:hover{background:var(--gumb-h)}

/* Kartice grana ulaze u donji rub heroja — preklapanje govori da
   pripadaju slici iznad. */
.polica{position:relative;z-index:3;margin-top:clamp(-72px,-5.6vw,-56px);margin-bottom:clamp(26px,3.4vw,44px)}
.polica .w6{
  max-width:var(--omot);margin:0 auto;padding-inline:var(--rub-omota);
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
}
.polica a.stavka{
  display:flex;gap:13px;align-items:center;color:inherit;
  background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px 15px;
  box-shadow:0 1px 2px rgba(20,24,15,.05),0 16px 30px -20px rgba(20,24,15,.5);
  transition:transform 160ms cubic-bezier(.23,1,.32,1),border-color 160ms,box-shadow 160ms;
}
.polica .slika{
  width:56px;height:56px;flex:none;
  border:1px solid var(--line);border-radius:10px;
  background:#E8EAE3 center/cover no-repeat;
}
.polica .nz{display:block;font:600 14.5px/1.22 var(--ui);color:var(--ink)}
.polica .br{display:block;font:500 11px var(--mono);color:var(--muted);margin-top:4px}
.polica a.stavka:hover{transform:translateY(-3px)}
.polica a.stavka[data-gleda]{
  border-color:var(--brand);
  box-shadow:0 1px 2px rgba(20,24,15,.05),0 18px 32px -18px rgba(131,183,53,.45),
             0 0 0 1px var(--brand) inset;
}
.polica a.stavka[data-gleda] .nz{color:var(--green)}
/* Police na telefonu nema (D-329). Ona je desktop naprava: prelazak
   mišem preko pločice mijenja heroj, a na dodir toga nema — heroj se
   ondje lista vlastitim strelicama i točkicama (D-230), a do svih šest
   grana vodi ladica izbornika. Usput je nestao i razlog zbog kojeg se
   stranica vukla u stranu: mreža od šest stupaca gurala je dokument na
   1061 px pri zaslonu od 375 (D-328). */
@media (max-width:900px){
  .polica{display:none}
}

/* traka povjerenja */
.trust{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  max-width:var(--omot);margin:0 auto}
.trust .omot{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust .t{
  display:flex;gap:12px;font-size:12.5px;
  padding:22px 20px;border-left:1px solid var(--line);
}
.trust .t:first-child{border-left:0}
.trust .t b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.trust .t span{color:var(--muted);font-size:12px}
.trust .ikona{color:var(--green);flex:none}
/* Četiri stupca stanu samo na desktopu. Na užem zaslonu red se lomio
   izvan plohe i zadnja dva jamstva su se odrezala (D-328). */
@media (max-width:900px){
  .trust .omot{grid-template-columns:1fr 1fr}
  .trust .t:nth-child(3){border-left:0}
  .trust .t:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:480px){
  .trust .omot{grid-template-columns:1fr}
  .trust .t{border-left:0;padding:16px 18px}
  .trust .t + .t{border-top:1px solid var(--line)}
}

/* blokovi */
/* Prototip: section.blok{padding:60px 0}. Sekcije koje se nastavljaju na
   prethodnu same gase gornji razmak. Bez donjeg razmaka blokovi se slijepe. */
.blok{padding:60px 0}
.bhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:28px}
.bhead h2{font-size:26px;margin:0}
.bhead a{
  font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--line2);padding-bottom:2px;
}
.bhead a:hover{border-color:var(--ink);color:var(--ink)}
/* 62ch je lomio rečenicu o uslugama tako da je „otoke" ostajalo samo u
   drugom redu; 90ch je drži u jednom na desktopu, a na užem zaslonu se
   i dalje lomi sama. */
.uslpod{color:var(--muted);margin:-6px 0 20px;max-width:90ch}

/* usluge */
.uslgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* Tri usluge u redu stanu na desktopu; uže od toga stisnu se u
   pločice u kojima se naslov lomi. Na tabletu dvije, na telefonu
   jedna ispod druge (D-329). */
@media (max-width:900px){.uslgrid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.uslgrid{grid-template-columns:1fr}}
.usl{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;color:#fff}
.uslfoto{position:absolute;inset:0;background-size:cover;background-position:center}
.uslsj{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(30,40,16,.8) 0%,rgba(30,40,16,.25) 52%,rgba(30,40,16,0) 100%)}
.usltx{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 20px}
.usltx b{display:block;font:600 20px var(--disp);letter-spacing:-.015em;color:#fff}
.usltx small{display:block;font:500 11.5px var(--mono);letter-spacing:.07em;
  text-transform:uppercase;color:rgba(255,255,255,.76);margin-top:5px}
/* Ista zaštita kao kod ploha „Ponuda" (D-341): tekst na fotografiji
   ostaje bijel i kad je miš na kartici. */
.usl:hover,
.usl:hover .usltx b{color:#fff}
.usl:hover .usltx small{color:rgba(255,255,255,.76)}
.usl:hover .uslfoto{transform:scale(1.03)}
.uslfoto{transition:transform 320ms cubic-bezier(.23,1,.32,1)}
.usldno{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-top:20px;
  font-size:14px;color:var(--muted)}
.usltel{font:600 19px var(--mono);color:var(--green)}
.usltel:hover{color:var(--green-d)}

/* ═══ Trgovina — ulazna stranica (D-342) ══════════════════════════════
   Poruka, šest grana i klizač. Prelazak mišem preko grane mijenja
   fotografiju i artikle u klizaču; sve je ispisano unaprijed, pa se
   ništa ne dohvaća u hodu. */

.trg__ploha{
  position:relative;overflow:hidden;background:var(--ink);color:#DDE3D8;
  padding:clamp(54px,7vw,86px) clamp(22px,3vw,34px);text-align:center;margin-top:18px;
}
.trg__ploha::after{content:"";position:absolute;right:-120px;top:-150px;width:460px;height:460px;
  background:radial-gradient(circle,rgba(127,160,60,.2),transparent 62%)}
.trg__ploha h1{position:relative;z-index:2;margin:0 auto;max-width:20ch;color:#fff;
  font:600 clamp(30px,4.2vw,52px)/1.07 var(--disp);letter-spacing:-.03em}

.trg__blok{padding-top:clamp(34px,4vw,54px)}
.trg__dvoje{display:grid;grid-template-columns:1fr 1fr;gap:var(--razmak);align-items:stretch}
.trg__foto{position:relative;overflow:hidden;background:var(--ink);min-height:420px}
.trg__sl{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .35s}
.trg__sl[data-on]{opacity:1}
.trg__potpis{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;color:#fff;
  font:600 19px var(--disp);letter-spacing:-.02em;
  background:linear-gradient(0deg,rgba(20,32,10,.82),transparent)}
.trg__redci{display:grid;grid-template-rows:repeat(6,1fr);gap:var(--razmak)}
.trg__red{
  display:grid;grid-template-columns:46px minmax(0,1fr) 26px;gap:16px;align-items:center;
  background:var(--white);border:1px solid var(--line);padding:14px 18px;color:inherit;
}
.trg__red:hover,.trg__red[data-on]{border-color:var(--green);box-shadow:inset 3px 0 0 var(--green)}
.trg__red:hover b,.trg__red[data-on] b{color:var(--ink)}
.trg__ik{width:46px;height:46px;background:var(--green-t);display:grid;place-items:center;color:var(--green)}
.trg__red b{display:block;font:600 16px var(--disp);letter-spacing:-.01em;color:var(--ink)}
.trg__red em{display:block;font-style:normal;margin-top:2px;font-size:13px;line-height:1.45;
  color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.trg__str{justify-self:end;color:var(--muted)}

.trg__klizac{margin-top:clamp(24px,3vw,34px)}
.trg__kglava{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.trg__kglava h3{margin:0;font:600 20px var(--disp);letter-spacing:-.02em}
.trg__prazno{background:var(--white);border:1px dashed var(--line2);padding:26px;margin:0;
  font-size:14px;color:var(--tekst)}
.trg__prazno a{color:var(--green);font-weight:600}

.spoj--trgovina .spoj__mreza{max-width:none;padding-inline:0}
.trg__poziv-blok{padding-top:0}

@media (max-width:900px){
  .trg__dvoje{grid-template-columns:1fr}
  .trg__foto{min-height:240px}
  .trg__redci{grid-template-rows:none}
}

/* ═══ Naslovnica, pročišćena (D-330) ══════════════════════════════════
   Šest pojasa umjesto osam. Ovdje su samo novi: sezona, ponuda, tihe
   usluge i spojeni tamni pojas na dnu. */

/* 1 · Sije se ovog mjeseca — jedini pojas koji vodi u kupnju (D-336).
   Kartice su iste kao u popisu proizvoda, samo ih je ovdje četiri u
   redu umjesto tri: pojas ima punu širinu sadržaja, bez bočne trake s
   filtrima. */
/* Klizač: deset artikala u jednom redu (D-338). U kadru su četiri
   cijele kartice i peta otkrivena 38 %, pa se vidi da niz ide dalje —
   odatle djelitelj 4,38 i četiri razmaka (D-340). */
.klizac{position:relative}
/* `ul.pgrid` ima veću težinu od same klase, pa klizač mora nositi obje
   — inače ostaje mreža od tri stupca. */
.pgrid.klizac__traka{
  display:flex;gap:var(--razmak);overflow-x:auto;scroll-behavior:smooth;
  grid-template-columns:none;margin:0;padding:2px 0 4px;list-style:none;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.pgrid.klizac__traka::-webkit-scrollbar{display:none}
.pgrid.klizac__traka > li,
.pgrid.klizac__traka > .pcard{
  flex:0 0 calc((100% - 4 * var(--razmak)) / 4.38);
  grid-column:auto;scroll-snap-align:start;
}
/* Skupine artikala stoje jedna preko druge u istoj ćeliji mreže
   (D-349). Visina trake je uvijek visina najveće skupine, pa prelazak
   mišem preko grana mijenja artikle, a ne visinu stranice. Skrivena
   skupina zadržava svoj raspored (`display`), samo se ne vidi i ne
   prima miša — `hidden` joj inače daje `display:none` i traka se
   skupi. */
.klizac__skupovi{display:grid}
.klizac__skupovi > *{grid-area:1/1;min-width:0}
/* Tema ima opće pravilo `[hidden]{display:none!important}`, pa i ovdje
   mora stajati `!important` — inače skrivena skupina nestane iz
   rasporeda i traka se skupi. */
.klizac__skupovi > .pgrid.klizac__traka[hidden]{display:flex!important}
.klizac__skupovi > p[hidden]{display:block!important}
.klizac__skupovi > [hidden]{visibility:hidden;pointer-events:none}

.klizac__dno{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
/* Strelice su se nakratko selile uz same artikle (D-346), pa su po
   klijentovoj odluci vraćene ispod trake, desno (D-347). Smanjeni
   razmak do pojasa „Ponuda" ostaje — njih dvoje su povezani. */
.blok.sezona{padding-bottom:clamp(18px,2.4vw,28px)}
@media (max-width:1100px){
  .pgrid.klizac__traka > li,.pgrid.klizac__traka > .pcard{flex-basis:calc((100% - 3 * var(--razmak)) / 3.38)}
}
@media (max-width:820px){
  .pgrid.klizac__traka > li,.pgrid.klizac__traka > .pcard{flex-basis:calc((100% - 2 * var(--razmak)) / 2.3)}
}
/* Na mobitelu kartica u klizaču ima točno mjeru kartice u popisu
   (D-370). Prije je stajalo `flex-basis:82%`, pa je na 375 px kartica
   bila široka 275 px, a ista ta kartica na kategoriji 163 px — isti
   artikl u dvije veličine, i jedan jedini proizvod zauzeo bi gotovo
   cijeli zaslon. Sada su obje 163 px: dvije stanu u red, a trećoj se
   vidi rub, pa se zna da se traka lista. Razmak je isti kao u popisu
   (10 px), inače se mjere ne poklapaju. */
@media (max-width:560px){
  .pgrid.klizac__traka{gap:10px}
  .pgrid.klizac__traka > li,
  .pgrid.klizac__traka > .pcard{flex-basis:calc((100% - 10px) / 2)}
}

/* Pločice kultura (prva izvedba D-330) više se ne ispisuju — pojas
   nosi artikle. Stil ostaje jer se pločice vraćaju jednim odlomkom u
   predlošku. */
.sezona__mreza{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--razmak)}
.kultura{display:block;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;color:inherit;
  transition:border-color .15s,transform .15s}
.kultura:hover{border-color:var(--line2);transform:translateY(-2px)}
.kultura__f{display:block;aspect-ratio:1/.82;background:var(--green-t) center/cover no-repeat}
.kultura__t{display:block;padding:14px 16px 16px}
.kultura__t b{display:block;font:600 16px var(--disp);letter-spacing:-.01em;color:var(--ink)}
.kultura__t em{display:block;font-style:normal;margin-top:4px;
  font:500 10.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* 2 · Ponuda — šest grana, isti red kao u izborniku. */
.grane{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--razmak)}
.grana{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r);color:#fff;background:var(--ink)}
.grana__f{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.grana__v{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(20,32,10,.86) 0%,rgba(20,32,10,.24) 62%,rgba(20,32,10,0) 100%)}
.grana__t{position:absolute;left:0;right:0;bottom:0;padding:20px 22px}
.grana__t b{display:block;font:600 21px var(--disp);letter-spacing:-.02em}
.grana__t em{display:block;font-style:normal;margin-top:4px;
  font:500 10.5px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.78)}
/* Ploha je slika s tekstom na njoj, nije poveznica u tekstu — opće
   pravilo `a:hover{color:…}` bojalo joj je naslov u zeleno na tamnoj
   fotografiji (D-341). Tekst ostaje bijel. */
.grana:hover,
.grana:hover .grana__t b{color:#fff}
.grana:hover .grana__t em{color:rgba(255,255,255,.78)}
@media (hover:hover){ .grana:hover .grana__f{transform:scale(1.04)} }

/* 4 · Tamni pojas na dnu: tvrtka, agronom i jamstva na jednom mjestu. */
/* Pojas i podnožje su jedna tamna ploha (D-334). Između njih je prije
   stajala uska pruga papira — prijelaz koji ništa ne govori, a lomi
   stranicu na dva tamna komada. Sada se dodiruju, a da se „Od 1994."
   ipak ne čita kao dio podnožja, sadržaj mu stoji na 1320 px, točno
   kao stupci podnožja ispod, i odvaja ga vlas iste širine. */
.spoj{background:transparent;color:#DDE3D8;margin-top:0}
/* Ploha je široka 1320 px, koliko i stupci podnožja, i sjedi na papiru
   (D-335). Podnožje ispod ostaje preko cijele širine, pa se vidi da su
   to dvije stvari, a između njih nema praznine. */
.spoj__mreza{display:grid;grid-template-columns:1fr 1.08fr;align-items:stretch;
  padding-inline:0;max-width:1320px;margin-inline:auto;
  background:var(--nav)}
/* Podnožje je izvan `main`, pa susjedni selektor do njega ne doseže —
   razmak se gasi preko klase tijela, a pojas postoji samo na
   naslovnici. */
.home .podnozje{margin-top:0}
.spoj__foto{background-size:cover;background-position:center 46%;min-height:460px}
.spoj__tx{padding:clamp(32px,4vw,58px)}
.spoj__tx h2{margin:0 0 16px;font:600 clamp(26px,2.8vw,36px)/1.12 var(--disp);
  letter-spacing:-.025em;color:#fff}
.spoj__tx p{margin:0 0 14px;font-size:15.5px;line-height:1.62;color:#C2CEB8;max-width:50ch}
.spoj__poziv{color:#DDE3D8}
.spoj__kontakt{display:flex;flex-direction:column;gap:6px;
  border-top:1px solid rgba(255,255,255,.18);padding-top:20px;margin-top:22px}
.spoj__kontakt .usltel{font:600 26px var(--mono);color:var(--brand)}
.spoj__kontakt .usltel:hover{color:#fff}
.spoj__kontakt a{color:#DDE3D8}
.spoj__kontakt a:hover{color:#fff}
.spoj__kontakt .sitnopis{margin-top:4px;color:#9FAE93}
.spoj__jamstva{list-style:none;margin:24px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
.spoj__jamstva li{font-size:12.5px;line-height:1.45;color:#A9B69E;
  border-top:1px solid rgba(255,255,255,.12);padding-top:10px}
.spoj__jamstva b{display:block;font:600 13.5px var(--ui);color:#fff;margin-bottom:2px}
.spoj__gumb{margin-top:26px}

@media (max-width:1000px){
  .sezona__mreza{grid-template-columns:repeat(3,1fr)}
  .grane{grid-template-columns:1fr 1fr}
}
/* Šav između „Od 1994." i podnožja na užim zaslonima (D-369).
   Na širokom zaslonu pojas stoji na 1320 px, pa ga od podnožja pune
   širine odvaja pruga papira s obje strane. Čim zaslon padne ispod te
   mjere pruga nestaje, a pojas i podnožje su ista boja (--nav), pa se
   spoje u jednu tamnu plohu visoku pola zaslona i ne vidi se gdje
   sadržaj prestaje. Umjesto pruge dolazi vlas: 1 px na 16 % bijele,
   uvučena za rub omota da se čita kao namjera, a ne kao rub ekrana. */
@media (max-width:1320px){
  .spoj__mreza{position:relative}
  .spoj__mreza::after{
    content:"";position:absolute;bottom:0;
    left:var(--rub-omota);right:var(--rub-omota);height:1px;
    background:rgba(255,255,255,.16);
  }
}

@media (max-width:900px){
  .spoj__mreza{grid-template-columns:1fr}
  .spoj__foto{min-height:280px}
}
@media (max-width:620px){
  .sezona__mreza{grid-template-columns:1fr 1fr}
  .grane{grid-template-columns:1fr}
  /* Četiri jamstva ostaju dva u redu i na mobitelu (D-370). U jednom
     stupcu traka je bila visoka 231 px i gurala poziv agronomu ispod
     pregiba; razmak je uži, mjera retka od ~22 znaka je dovoljna. */
  .spoj__jamstva{grid-template-columns:1fr 1fr;gap:12px 16px}
}

/* izdvojeno — mozaik u tri stupca (D-312, prerađen u D-314).
   Šest uspravnih ploha, srednji je stupac spušten da red ne izgleda kao
   tablica. Po predlošku koji je klijent dao: u gornjem redu tekst stoji
   pri vrhu, u donjem pri dnu, i uz naslov uvijek ide rečenica — zato
   preljev mijenja smjer zajedno s tekstom. Ploha bez teksta nema
   preljev, pa se promo grafika vidi čista. */
.istak{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--razmak);align-items:start;
  --ist-h:clamp(470px,40vw,620px);
}
/* Svaki stupac ima istu ukupnu visinu, a unutar njega je jedna ploha
   viša od druge — odatle stepenica, bez praznina među redovima. Stupac
   je zato zaseban okvir: mreža bi poravnala redove i ispod niže plohe
   ostavila rupu. Udio dolazi iz predloška (`--udio`), jer ovisi o
   paru u stupcu. */
.istak__stupac{display:flex;flex-direction:column;gap:var(--razmak);height:var(--ist-h)}
.istak__p{
  position:relative;display:block;overflow:hidden;color:#fff;
  border-radius:var(--r);background:var(--ink);
  flex:var(--udio, .5) 1 0;min-height:0;
}
.istak__foto{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.istak__veo{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(20,32,10,.86) 0%,rgba(20,32,10,.34) 48%,rgba(20,32,10,.06) 100%)}
.istak__tx{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2vw,26px);
  display:flex;flex-direction:column;align-items:flex-start;gap:8px}
/* gornji red, vanjski stupci: tekst pri vrhu — kao na predlošku */
.istak__stupac:nth-child(1) > .istak__p:first-child .istak__tx,
.istak__stupac:nth-child(3) > .istak__p:first-child .istak__tx{bottom:auto;top:0}
.istak__stupac:nth-child(1) > .istak__p:first-child .istak__veo,
.istak__stupac:nth-child(3) > .istak__p:first-child .istak__veo{
  background:linear-gradient(180deg,rgba(20,32,10,.86) 0%,rgba(20,32,10,.34) 48%,rgba(20,32,10,.06) 100%)}
.istak__tx b{display:block;max-width:18ch;color:#fff;
  font:600 clamp(19px,1.7vw,26px)/1.18 var(--disp);letter-spacing:-.02em;
  text-shadow:0 1px 18px rgba(20,32,10,.45)}
.istak__tx em{display:block;font-style:normal;max-width:32ch;
  font:400 14px/1.5 var(--ui);color:rgba(255,255,255,.9)}
/* poveznica, ne gumb: predložak nema plohicu, a klijentov natpis ostaje */
.istak__gumb{display:inline-block;margin-top:3px;font:600 13.5px var(--ui);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px}
@media (hover:hover){
  .istak__p:hover .istak__foto{transform:scale(1.035)}
  .istak__p:hover .istak__gumb{border-bottom-color:#fff}
}
@media (max-width:900px){
  /* Stupci se raspršuju u mrežu, pa visinu više ne računa `--udio`
     nego omjer; `order` vraća izvorni redoslijed ploha. */
  .istak{grid-template-columns:1fr 1fr}
  .istak__stupac{display:contents}
  .istak__p{flex:none;aspect-ratio:1/1.06}
}
@media (max-width:560px){
  .istak{grid-template-columns:1fr}
  .istak__p{aspect-ratio:1/.92}
  .istak__stupac:nth-child(1) > .istak__p:first-child .istak__tx,
  .istak__stupac:nth-child(3) > .istak__p:first-child .istak__tx{top:auto;bottom:0}
  .istak__stupac:nth-child(1) > .istak__p:first-child .istak__veo,
  .istak__stupac:nth-child(3) > .istak__p:first-child .istak__veo{
    background:linear-gradient(0deg,rgba(20,32,10,.86) 0%,rgba(20,32,10,.34) 48%,rgba(20,32,10,.06) 100%)}
}

/* Kalendar u kartici proizvoda (D-303) — traka od 12 polja i jedan
   redak teksta. Ista ljestvica kao na stranici proizvoda: siva sadnja,
   maslinasta berba; polje u kojem se poklope dijeli se na pola. */
.sezbar{display:flex;gap:2px;margin:2px 0 6px}
.sezbar i{flex:1;height:5px;background:#ECEDE7;display:flex;flex-direction:column}
.sezbar i.s{background:#8E968A}
.sezbar i.b{background:var(--green)}
.sezbar i.s.b{background:linear-gradient(to bottom,#8E968A 0 50%,var(--green) 50% 100%)}
.sezleg{margin:0 0 8px;font:500 10px var(--mono);letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* banner navodnjavanja — puna širina (D-303) */
.blok--puno{padding-inline:0}
.ubanner{
  position:relative;overflow:hidden;background:var(--ink);
  border-radius:0;display:flex;align-items:center;
  min-height:clamp(320px,34vw,420px);
}
.ubanner__omot{width:100%;position:relative}
.ubanner .ufoto{position:absolute;inset:0;background-size:cover;background-position:center}
.ubanner .uveo{position:absolute;inset:0;background:rgba(20,32,10,.34)}
.ukartica{
  position:relative;max-width:470px;margin:clamp(20px,4%,40px) 0;
  background:rgba(255,255,255,.92);border-radius:var(--r);
  padding:clamp(22px,3vw,32px);
}
.ukartica h2{font:600 clamp(24px,2.6vw,32px)/1.12 var(--disp);letter-spacing:-.02em;margin:10px 0 12px}
.ukartica p{font-size:15px;line-height:1.55;color:#555B52;margin:0 0 24px}
.ubanner .unapomena{
  display:block;margin-top:14px;
  font:500 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}

/* ── Novosti: beskonačni klizač preko cijele širine (D-313) ─────────
   Popis je u traci ispisan dvaput; skripta vraća položaj na polovicu
   pa se vrti bez kraja. Traka ide od ruba do ruba, a naslov bloka i
   strelice ostaju poravnati sa sadržajem stranice. */
/* Novosti (D-313, prerađeno u D-315): uspravne kartice s maslinastim
   obrubom, fotografija preko cijele kartice, naslov na njoj. Traka
   stoji u širini sadržaja; u kadru su četiri cijele kartice i po 30 %
   susjedne lijevo i desno — odatle djelitelj 4,6 i pet razmaka. */
.novosti__okvir{position:relative}
.novosti__traka{
  display:flex;gap:var(--razmak);overflow-x:auto;scroll-behavior:smooth;
  padding:2px 0 4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.novosti__traka::-webkit-scrollbar{display:none}
.novost{
  position:relative;flex:0 0 calc((100% - 5 * var(--razmak)) / 4.6);
  aspect-ratio:1/1.34;display:block;overflow:hidden;color:#fff;
  background:var(--ink);border:2px solid var(--green);border-radius:var(--r);
}
.novost:hover{border-color:var(--green-d)}
.novost__foto{position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:var(--green-t);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.novost__veo{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(20,32,10,.88) 0%,rgba(20,32,10,.38) 46%,rgba(20,32,10,.04) 100%)}
.novost__tijelo{position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:7px;padding:16px 17px 17px}
.novost__kat{font:600 9.5px var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand)}
.novost b{font:600 17px/1.28 var(--disp);color:#fff;letter-spacing:-.01em;
  text-shadow:0 1px 16px rgba(20,32,10,.5)}
.novost__datum{font:500 10.5px var(--mono);color:rgba(255,255,255,.76)}
@media (hover:hover){ .novost:hover .novost__foto{transform:scale(1.04)} }
.novosti__dno{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.nov__str{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line2);
  border-radius:var(--rs);background:var(--white);color:var(--ink);font-size:17px;cursor:pointer}
.nov__str:hover{border-color:var(--green);color:var(--green)}

/* iz prakse */
.prakklizac{
  display:flex;gap:15px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.prakklizac::-webkit-scrollbar{display:none}
.prakklizac .pcard{
  display:block;flex:0 0 clamp(290px,31.5%,400px);scroll-snap-align:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.prakklizac .pcard:hover{border-color:var(--line2)}
.prakklizac .pglava{padding:18px 18px 14px;display:flex;flex-direction:column;gap:7px}
.prakklizac .pname{font:600 17px/1.25 var(--disp);color:var(--ink);letter-spacing:-.01em}
.prakklizac .pimg{aspect-ratio:16/8;background:var(--paper)}
.prakklizac .pimg img{width:100%;height:100%;object-fit:cover;display:block}
.prakklizac .pnoga{padding:12px 18px 18px}
.prakklizac .pmeta{font-size:12.5px;color:var(--muted)}

/* agronom */
.agronom{padding-bottom:10px}
/* Pitajte agronoma (D-310): fotografija lijevo, poziv desno, bijela
   ploha s rubom. Kadar 5:4 s težištem na 46 % obuhvaća i lice i ruke
   s rajčicama — mjereno na samoj fotografiji. */
.agronom__okvir{
  display:grid;grid-template-columns:1.08fr 1fr;align-items:stretch;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}
.agronom__foto{
  background-size:cover;background-position:center 46%;
  aspect-ratio:5/4;min-height:420px;
}
/* Ploha uz fotografiju je tamna (D-316) — fotografija je svijetla i
   topla, pa je bijelo uz nju gubilo rub. Boja je ista kao na plohi
   „Od 1994." (`--ink`), ne nova nijansa; marka svijetli samo na tamnom,
   pa telefon nosi `--brand`. Sve na plohi mora biti svijetlo, zato su
   boje teksta i poveznica ovdje ispisane iznova. */
.agronom__tekst{padding:clamp(26px,3.4vw,46px);display:flex;flex-direction:column;
  justify-content:center;background:var(--nav);color:#DDE3D8}
.agronom__okvir h2{margin:0 0 14px;font:600 clamp(24px,2.6vw,32px)/1.14 var(--disp);
  letter-spacing:-.02em;color:#fff}
.agronom__okvir p{margin:0 0 24px;font-size:15px;line-height:1.6;
  color:#C2CEB8;max-width:46ch}
.agronom__veza{display:flex;flex-direction:column;gap:6px;
  border-top:1px solid rgba(255,255,255,.18);padding-top:20px}
.agronom__veza .usltel{color:var(--brand);font:600 24px var(--mono)}
.agronom__veza .usltel:hover{color:#fff}
.agronom__veza a{color:#DDE3D8}
.agronom__veza a:hover{color:#fff}
.agronom__veza .sitnopis{margin-top:4px;color:#9FAE93}
@media (max-width:900px){
  .agronom__okvir{grid-template-columns:1fr}
  .agronom__foto{aspect-ratio:1/.7;min-height:0}
}

/* ═══ Mega izbornik ═══════════════════════════════════════════════════
   Preuzeto iz prototipa: lijevo popis podkategorija, desno ono što pada
   pod odabranu. Nadkategorija je i sama poveznica — u njoj ima artikala
   koji ne pripadaju nijednoj podkategoriji. */

.glavni-izbornik{position:relative}
.glavni-izbornik__popis > li.ima-mega{position:static}
.glavni-izbornik .glavna-veza{
  display:grid;justify-items:center;align-content:center;gap:9px;
  width:100%;min-height:98px;padding:16px 8px;margin:0;text-align:center;
  background:none;border:0;
  border-right:1px solid rgba(255,255,255,.12);
  border-bottom:3px solid transparent;
  font:600 12.5px/1.25 var(--ui);letter-spacing:.04em;text-transform:uppercase;
  color:#E7EBE4;cursor:pointer;
}
/* Pločica s nazivom u dva reda („Gnojivo i supstrati") povisi cijeli
   red; ostale se moraju rastegnuti s njom, inače im crta i pozadina na
   prelazak mišem ne idu do dna reda (D-210). */
.glavni-izbornik__popis > li{display:grid}
.glavni-izbornik__popis > li:first-child .glavna-veza{border-left:1px solid rgba(255,255,255,.12)}
.glavni-izbornik .glavna-veza .ikona{flex:none;opacity:.9;width:34px;height:34px;stroke-width:1.3}
.glavni-izbornik .glavna-veza:hover,
.glavni-izbornik .glavna-veza[aria-expanded="true"]{
  color:#fff;background:rgba(255,255,255,.08);
  border-bottom-color:var(--zlato);
}
.glavni-izbornik .glavna-veza:hover .ikona,
.glavni-izbornik .glavna-veza[aria-expanded="true"] .ikona{opacity:1}

@media (max-width:1100px){
  .glavni-izbornik__popis{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr))}
}

.mega{
  position:absolute;left:0;right:0;top:100%;z-index:49;
  background:var(--white);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 24px 40px -28px rgba(20,24,15,.45);
}
.mega[hidden]{display:none}
/* Lijevi stupac je širok točno jednu pločicu trake iznad, pa se crta
   između skupina i sadržaja poklapa s crtom između Sjemena i
   Navodnjavanja (D-270). Broj grana dolazi iz PHP-a, pa poravnanje
   ostaje točno i kad se doda ili makne grana. */
.megaw{
  max-width:var(--omot);margin:0 auto;padding-inline:var(--rub-omota);
  display:grid;
  grid-template-columns:calc(100% / var(--grana-broj, 7)) minmax(0,1fr);
  gap:0;
}
.megaw--usluge,
.megaw--siroki{grid-template-columns:1fr}

/* Usluge u mega izborniku (D-284): ikona, naziv, rečenica — ne pločice
   s fotografijom. Tri stupca odvojena vlasnom crtom, kao redci u
   cjeniku usluga. Ikone su maslinaste jer ploha je svijetla. */
.musl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:26px 0 22px}
.musl__s{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  padding:6px 28px;border-left:1px solid var(--line);
}
.musl__s:first-child{border-left:0;padding-left:0}
.musl__ik{
  width:46px;height:46px;display:grid;place-items:center;flex:none;
  border-radius:var(--rs);background:var(--green-t);color:var(--green);
}
.musl__ik svg{width:26px;height:26px}
.musl__tx b{
  display:block;font:600 15px/1.25 var(--disp);letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);
}
.musl__tx em{display:block;font-style:normal;margin-top:8px;
  font:400 14px/1.5 var(--ui);color:var(--tekst)}
.musl__s:hover b{color:var(--green)}
.musl__s:hover .musl__ik{background:var(--green);color:#fff}
@media (max-width:1100px){
  .musl{grid-template-columns:1fr}
  .musl__s{border-left:0;border-top:1px solid var(--line);padding:16px 0}
  .musl__s:first-child{border-top:0;padding-top:0}
}

/* Stupci: svaka podkategorija je naslov sa svojim sadržajem ispod. Za
   grane koje imaju malo unuka (Navodnjavanje, Folije, Oprema) — sve
   stane u jedan red i ne treba lijeva traka skupina. */
.mstupci{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px 28px;padding:24px 0 20px;
}
.mblok{break-inside:avoid;min-width:0}
.mnad{
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font:600 13.5px var(--disp);color:var(--ink);
  padding:6px 0 8px;border-bottom:1px solid var(--line);margin-bottom:6px;
}
.mnad:hover{color:var(--green)}
.mnad i{font-style:normal;font:500 10.5px var(--mono);color:var(--muted)}
.mstupci ul{list-style:none;margin:0 0 18px;padding:0}
.mstupci li a{
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:4px 0;font-size:14.5px;color:var(--ink2);
}
.mstupci li a:hover{color:var(--green)}
.mstupci li i{font-style:normal;font:500 10.5px var(--mono);color:var(--muted)}
@media (max-width:1040px){.mstupci{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.mstupci{grid-template-columns:1fr}}

/* Mega panel: krupnije i prozračnije.
   Prva izvedba imala je sličicu od 36 px, naziv od 14,5 px i redak
   visok 36 px — na zaslonu od 1400 px to izgleda kao popis iz
   administracije, ne kao izlog. Sličica je sada 52 px, naziv 16 px,
   redak diše 10 px gore-dolje, a stupci su širi pa nazivi ne idu u
   dva reda (D-233). */

.mgrupe{display:grid;align-content:start;gap:2px;border-right:1px solid var(--line);padding:24px 20px 24px 0}
.mgrupe button{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  min-height:46px;
  border:0;border-radius:var(--rs);background:none;
  font:500 15.5px var(--ui);text-align:left;padding:11px 14px;color:var(--ink2);cursor:pointer;
  transition:background .14s ease,color .14s ease;
}
.mgrupe button:hover{background:var(--paper)}
.mgrupe button[data-on]{background:var(--green-t);color:var(--green);font-weight:600;box-shadow:inset 3px 0 0 var(--green)}
.mgrupe button i{font-style:normal;font:500 11px var(--mono);color:var(--muted)}

/* Sigurnosna granica: na niskom zaslonu panel ne smije pasti ispod
   ruba. Pri 1400×900 se ne okida — Sjeme povrća stane cijelo. */
.mkulture-okvir{min-width:0;max-height:calc(100vh - 200px);overflow:auto}
/* `hidden` ne nadjačava `display:grid` sam od sebe — bez ovoga se svi
   popisi skupina prikažu odjednom. */
.mkulture[hidden],.mega[hidden]{display:none}
/* Bez opisa ispod naziva (D-239) redak je jednoredan, pa stupac može
   biti uži i cijelo Sjeme povrća — 45 kultura — stane bez listanja. */
/* auto-fill, NE auto-fit: auto-fit sruši prazne stupce, pa je skupina
   s tri kulture dobivala stupce od 312 px umjesto 232 px i popis se
   razišao sa susjednom skupinom. S auto-fill mreža je ista u svim
   skupinama, pa je i poravnanje isto (D-242). */
.mkulture{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(192px,1fr));
  align-content:start;gap:2px 8px;padding:24px 0 20px 22px;
}
.mkulture--sam{padding-left:0}
.mkulture a{
  display:flex;gap:11px;align-items:center;justify-content:space-between;
  color:inherit;padding:6px 10px;min-width:0;border-radius:var(--rs);
  border:1px solid transparent;
  transition:background .14s ease,border-color .14s ease;
}
.mkulture a:hover{background:var(--green-t);border-color:#DCE8C6}
.mkulture a > span{min-width:0;flex:1}

/* Slika kategorije iz WooCommercea. Kategorija bez slike dobiva ikonu
   svoje grane u blijedoj maslini — ploha iste veličine, ali ne prazna
   siva rupa (D-235). */
.mkulture .sl{
  flex:none;width:40px;height:40px;
  border:1px solid var(--line);border-radius:8px;
  background:#E8EAE3;overflow:hidden;
}
.mkulture .sl img{width:100%;height:100%;object-fit:cover;display:block}
.mkulture .sl--prazna{
  background:var(--green-t);border-color:#DCE8C6;
  display:flex;align-items:center;justify-content:center;color:#A9BC8A;
}
.mkulture .sl--prazna svg{width:20px;height:20px}
.mkulture a:hover .sl--prazna{color:var(--green)}
.mkulture b{display:block;font:600 15px/1.3 var(--ui);color:var(--ink);
  white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:manual}
.mkulture i{font-style:normal;font:500 10.5px var(--mono);color:var(--muted);flex:none}

.mdno{
  grid-column:1/-1;border-top:1px solid var(--line);padding:13px 0;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;
}
.mdno span{color:var(--muted);font-size:12.5px}
.mdno a.gumb{color:#fff}
.mdno a.gumb:hover{color:#fff}

@media (max-width:900px){
  .megaw{grid-template-columns:1fr}
  .mgrupe{border-right:0;border-bottom:1px solid var(--line);padding:12px 0;display:flex;gap:4px;overflow-x:auto}
  .mgrupe button{white-space:nowrap}
  .mkulture{padding:12px 0}
}

/* ═══ Stranica usluge ═════════════════════════════════════════════════
   Jedan predložak za sve tri usluge (D-127). Usluga je opis posla —
   poveznica na trgovinu stoji tek na dnu, među povezanim sadržajem. */

.uhero{
  display:grid;grid-template-columns:1fr 1fr;min-height:430px;
  background:var(--ink);border-radius:var(--r);overflow:hidden;color:#fff;
}
.uhero .utxt{padding:clamp(28px,4vw,52px) clamp(24px,4vw,56px);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.uhero .eyebrow{color:var(--zlato)}
.uhero h1{font:600 clamp(28px,3.2vw,40px)/1.08 var(--disp);letter-spacing:-.025em;
  margin:12px 0 16px;color:#fff}
.uhero p{color:#C3C9BF;font-size:15.5px;line-height:1.6;max-width:460px;margin:0 0 28px}
.uhero .uslika{background-size:cover;background-position:center;min-height:300px}
.ugumbi{display:flex;gap:10px;flex-wrap:wrap}
/* Gumb na tamnoj plohi (D-322). Puni gumb ovdje ne radi: ploha je u
   istoj boji kao i gumb, pa bi nestao. Zato isti oblik kao „Pitajte
   agronoma" na heroju — bijela slova i okvir, koji na prijelazu mišem
   zasvijetli. Marka ostaje na tekstu (telefon, nadnaslovi), ne na
   gumbima. */
.gumb--marka{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.gumb--marka:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.gumb--prozirni{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.gumb--prozirni:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

.ubrojke{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);overflow:hidden;
}
.ubrojke div{padding:26px 22px;border-right:1px solid var(--line)}
.ubrojke div:last-child{border-right:0}
.ubrojke b{display:block;font:600 30px/1 var(--disp);color:var(--ink);letter-spacing:-.02em}
.ubrojke span{display:block;margin-top:7px;font-size:13px;color:var(--muted);line-height:1.35}

.udva{display:grid;grid-template-columns:1.45fr 1fr;gap:44px;align-items:start}
.utekst p{font-size:15.5px;line-height:1.68;color:#4A5046;margin:0 0 16px}
.uprednosti{background:var(--green-t);border:1px solid #D9E7BF;border-radius:var(--r);padding:26px 26px 22px}
.uprednosti h3{font:600 17px var(--disp);color:var(--ink);margin:0 0 14px}
.uprednosti ul{list-style:none;margin:0;padding:0}
.uprednosti li{position:relative;padding:0 0 0 24px;margin-bottom:9px;font-size:14.5px;color:var(--tekst)}
.uprednosti li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;background:var(--green)}

.upodrucja{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.upodrucja article{background:var(--white);padding:28px 26px 30px}
.upodrucja--dva{grid-template-columns:repeat(2,1fr)}
.upodrucja h3{font:600 17px/1.2 var(--disp);color:var(--ink);margin:10px 0 10px}
.upodrucja p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0}
.upodrucja .no{font:500 11px var(--mono);letter-spacing:.1em;color:var(--brand-d)}

.ukoraci{
  counter-reset:k;display:grid;gap:1px;list-style:none;margin:0;padding:0;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.ukoraci li{
  counter-increment:k;background:var(--white);
  padding:20px 26px 20px 68px;position:relative;font-size:14.5px;line-height:1.6;
}
.ukoraci li::before{
  content:counter(k,decimal-leading-zero);position:absolute;left:26px;top:20px;
  font:500 11px var(--mono);color:var(--muted);
}

.udruge{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.udruga{
  display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;color:inherit;
}
.udruga:hover{border-color:var(--green)}
.udruga b{display:block;font:600 16px var(--disp);color:var(--ink);margin-bottom:6px}
.udruga span{display:block;font-size:13.5px;line-height:1.55;color:var(--muted)}

@media (max-width:900px){
  .uhero{grid-template-columns:1fr}
  .uhero .uslika{min-height:220px;order:-1}
  .ubrojke{grid-template-columns:1fr 1fr}
  .ubrojke div:nth-child(2n){border-right:0}
  .ubrojke div:nth-child(n+3){border-top:1px solid var(--line)}
  .udva{grid-template-columns:1fr;gap:24px}
  .upodrucja{grid-template-columns:1fr}
  .udruge{grid-template-columns:1fr}
}

/* ------------------------------------------------------------ prilagodbe */

@media (max-width:1100px){
  .zaglavlje__usluge{display:none}
}

@media (max-width:860px){
  :root{--rub-omota:20px}

  /* Donji rub ljepljivog zaglavlja u maslini: siva vlas se na
     listanju gubila, pa se nije vidjelo gdje zaglavlje prestaje. */
  .zaglavlje{border-bottom:2px solid var(--green)}

  /* Jedan red: logo — alati — izbornik; tražilica ispod preko cijele
     širine. Bez ovoga svaki element uzme svoj red i zaglavlje pojede
     pola zaslona. */
  /* Mobilno zaglavlje: lijevo Moj račun i Usporedba, u sredini logo,
     desno Košarica pa Izbornik. Tražilica puna širina u drugom redu
     (D-228). */
  /* `1fr auto 1fr`, ne `auto 1fr auto`: s bočnim stupcima različite
     širine (lijevo dvije ikone, desno ikona + gumb) logo je sjedao
     nasred *preostalog* prostora, a ne nasred zaslona — zato je
     djelovao gurnut udesno (D-251). Jednaki bočni stupci ga stavljaju
     točno u sredinu. */
  /* Logo stoji u srednjem stupcu i jednako je udaljen od ikona s obje
     strane (D-261). Prije je bio apsolutno na sredini zaslona, pa je
     zbog šire desne skupine zazor bio 7 px lijevo i 2 px desno —
     izgledalo je kao da je nagnut udesno. */
  .zaglavlje__red{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;gap:8px;padding-block:9px;
  }
  .logo{
    grid-row:1;grid-column:2;justify-self:center;min-width:0;
    height:40px;display:flex;align-items:center;
  }
  .zaglavlje__alati{display:contents}
  .zaglavlje__lijevo{grid-row:1;grid-column:1;justify-self:start;display:flex;gap:4px;align-items:center}
  /* Košarica i izbornik dobivaju zraka između sebe — zalijepljeni, s
     maslinastim gumbom do njega, čitali su se kao jedan element. */
  .zaglavlje__desno{grid-row:1;grid-column:3;justify-self:end;display:flex;gap:16px;align-items:center}
  .trazilica{grid-row:2;grid-column:1 / -1}

  /* Povećalo lijevo od loga, odmah uz profil (D-241). */
  .zaglavlje .alat--trazi{display:grid}
  /* Tražilica je sklopljena dok je gumb ne otvori; bez JavaScripta
     klasa se nikad ne postavi, pa ostaje otvorena. */
  .js .trazilica{display:none}
  .js .zaglavlje.trazi-otvorena .trazilica{display:flex}
  /* iOS zumira stranicu čim se fokusira polje manje od 16 px — i
     onda zaglavlje „izađe van granica". Polje je zato 16 px (D-247). */
  .trazilica input{font-size:16px;min-height:46px}

  /* Gumb izbornika nosi maslinastu plohu: na bijelom zaglavlju gola
     ikona se ne čita kao gumb (D-241). */
  .zaglavlje__izbornik-gumb{
    display:grid;place-items:center;gap:0;
    width:44px;height:44px;min-height:44px;padding:0;
    background:var(--gumb);border:0;border-radius:var(--rs);
    color:#fff;cursor:pointer;
  }
  .zaglavlje__izbornik-gumb:active{background:var(--gumb-h)}
  .zaglavlje__izbornik-gumb span{display:none}

  /* Natpis uz ikonu nestaje tek ovdje — do tada stane u istu visinu.
     Sve četiri radnje u redu (profil, povećalo, košarica, izbornik)
     dobivaju istu plohu 44 × 44 i istu ikonu od 22 px, pa red izgleda
     kao red, a ne kao četiri različita gumba (D-247). */
  .alat{
    min-width:0;width:40px;height:40px;padding:0;
    place-items:center;place-content:center;
  }
  .alat svg{width:22px;height:22px}
  .alat > span:last-child{display:none}
  .alat__broj{top:0;right:-2px}
  /* Košarica ima masu u gornjoj polovici crteža (koš) i dvije tanke
     točke dolje (kotači), pa joj je optička sredina viša od profila i
     povećala iako su sve tri plohe jednake. Spuštena je 2 px (D-262). */
  .alat--kosarica svg{transform:translateY(2px)}

  /* Na mobitelu ponudu nosi ladica (.mizb), ne traka s pločicama. */
  .glavni-izbornik{display:none}

  /* Pločice podkategorija: uže, da se vidi da ih ima još. */
  .podkategorija{min-width:146px;padding:12px 14px}

  .podnozje__mreza{grid-template-columns:1fr 1fr;gap:28px}
}

/* Prijelomi preuzeti iz prototipa: ispod 1000 px filtri se sklapaju i
   otvaraju gumbom, mreža pada na dvije kartice u redu. */
@media (max-width:1000px){
  .catlayout{grid-template-columns:1fr;gap:18px}
  aside.filters{display:none;position:static;padding-top:0}
  aside.filters.open{display:block}

  /* Dvije jednake kutije u redu — „Filtriranje" i poredak — i ništa
     više: brojka artikala je maknuta jer je stiskala obje (D-257).
     Traka NIJE ljepljiva: elegantno stoji na vrhu i nestane s
     listanjem, a filtri su odande nadohvat preko lebdećeg gumba
     (D-226), kako klijent traži. */
  .toolrow{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    padding:12px 0;min-height:0;
  }
  .toolrow .activef{display:contents}
  .toolrow .brojac{display:none}
  .toolrow .mfilter-btn{grid-column:1}
  /* Poredak izgleda isto kao Filtriranje do njega: ista ploha, isti
     okvir, ista visina, ista strelica — a ne sistemski <select>
     (D-261). Vlastita strelica, jer zadanu se ne može obojati. */
  .toolrow .sortsel,
  .toolrow .woocommerce-ordering{grid-column:2}
  /* Woo svojem omotaču daje `margin-bottom:15px`; u mreži je to
     podiglo poredak 8 px iznad Filtriranja (D-262). */
  .toolrow .woocommerce-ordering{position:relative;display:block;margin:0;align-self:stretch}
  .toolrow .woocommerce-ordering::after{
    content:"";position:absolute;right:15px;top:50%;
    width:8px;height:8px;margin-top:-6px;pointer-events:none;
    border-right:1.6px solid var(--green);border-bottom:1.6px solid var(--green);
    transform:rotate(45deg);
  }
  .toolrow .sortsel,
  .toolrow .woocommerce-ordering select{
    width:100%;min-height:48px;padding:0 34px 0 14px;
    border:1px solid var(--line2);background:var(--white);
    font:500 14px var(--ui);letter-spacing:0;color:var(--ink);
    appearance:none;-webkit-appearance:none;
  }
  /* Odabrani filtri padaju u red ispod dviju kutija. */
  .toolrow .activef > a{grid-column:1 / -1;justify-self:start}

  /* Glava s križićem i ljepljiv gumb uz dno (D-243). */
  .filters__glava{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:10px 0 6px;margin-bottom:4px;
    border-bottom:1px solid var(--line);
  }
  .filters__glava h4{margin:0;font-size:16px}
  /* Gumb NIJE ljepljiv: panel je u toku stranice, pa bi ljepljiv gumb
     lebdio preko zadnje skupine filtara i prekrio je. */
  .filters__posalji{min-height:48px}
  /* Kutija jednaka onoj za poredak do nje (D-257): natpis lijevo,
     klizači desno, ista visina i ista širina. */
  .mfilter-btn{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;min-height:48px;padding:0 14px;
    border:1px solid var(--line2);background:var(--white);
    font:500 14px var(--ui);letter-spacing:0;text-transform:none;
    color:var(--ink);cursor:pointer;
  }
  .mfilter-btn svg{flex:none;color:var(--green)}
  ul.pgrid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  ul.pgrid{gap:10px}
  .pbody{padding:12px 13px 14px;gap:6px}
  .pname{font-size:14.5px}
  .prow{flex-direction:column;align-items:stretch;gap:8px}
  .addbtn{width:100%}
  .pakopt{min-width:62px;font-size:11.5px;padding:8px 9px}

  /* Na telefonu traka ide u dva retka: poveznice lijevo, kontakt
     desno ispod njih, s tankom crtom između — a radno vrijeme pada
     pod telefon, i dalje desno poravnato (D-246). */
  .traka-vrh{font-size:10.5px}
  .traka-vrh .omot{gap:0;padding-block:0}
  /* Prvi redak: poveznice lijevo, mreže desno u istoj liniji.
     Drugi redak: kontakt, lijevo poravnat s „Blog" (D-276). */
  .traka-vrh .omot{flex-wrap:wrap}
  .traka-vrh__veze{padding:6px 0;flex:1;min-width:0;gap:16px}
  .traka-vrh__veze a{text-align:left;padding:0}
  .traka-vrh__soc{
    position:static;transform:none;order:2;padding:6px 0;gap:14px;
  }
  /* Visina je mjera, ne širina — slovo „f" je uže od kvadrata (D-298). */
  .traka-vrh__soc svg{height:16px;width:auto}
  .traka-vrh__kontakt{
    order:3;width:100%;padding:6px 0;margin-left:0;
    flex-wrap:wrap;justify-content:flex-start;gap:4px 12px;text-align:left;
    border-top:1px solid rgba(221,227,216,.14);
  }
  .traka-vrh__radno{padding-left:12px}
  .logo__tekst{font-size:19px}

  /* Dva stupca i tu, ne jedan — vidi D-366 uz prijelom na 620 px. */
  .podnozje__mreza{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Tko je isključio animacije, taj ih ne dobiva. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Sidrena cijena unutar .sidro ne dodaje svoj razmak. */
.sidro .sidrena{margin-top:0}

/* Kad ispod stranice proizvoda stoji samo jedan blok, zauzme punu širinu. */
.pdptabs:has(> div:only-child){grid-template-columns:1fr}

/* Sitne ispravke na klasičnim WooCommerce obrascima. */
.woocommerce form .form-row .optional{display:none}            /* „(neobvezno)" uz svako polje je šum */
#place_order{display:flex;align-items:center;justify-content:center}
/* „Naruči" i ostali WooCommerceovi gumbi .button.alt nosili su zadanu
   ljubičastu (#7f54b3) — tema ih nije bojala (D-423). Specifičnost mora
   nadjačati `.woocommerce #payment #place_order`. */
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order,
.woocommerce :is(a,button,input).button.alt{
  background:var(--gumb);border:1px solid var(--gumb);border-radius:var(--rs);
  color:#fff;font-family:var(--ui);font-weight:600;
}
.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover,
.woocommerce :is(a,button,input).button.alt:hover{background:var(--gumb-h);border-color:var(--gumb-h);color:#fff}
.woocommerce #payment #place_order:disabled,
.woocommerce :is(a,button,input).button.alt.disabled,
.woocommerce :is(a,button,input).button.alt:disabled{background:var(--gumb);border-color:var(--gumb);color:#fff;opacity:.55}
.woocommerce-form-login-toggle .woocommerce-info{margin-bottom:18px}
.woocommerce-billing-fields__field-wrapper{display:block}

.puno{max-width:none}

/* Brzi upiti ispod tražilice u heroju. */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;max-width:min(560px,46%)}
.chips a{
  display:inline-flex;align-items:center;min-height:36px;padding:0 16px;
  background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:var(--rs);
  color:#fff;font:400 12.5px var(--mono);letter-spacing:.02em;
}
.chips a:hover{border-color:#fff;color:#fff}
@media (max-width:860px){.chips{max-width:100%}}

/* Druga fotografija na prelazak mišem — samo ako proizvod ima galeriju.
   Obje slike su apsolutno u istom okviru i upisuju se u njega (contain),
   pa druga nikad ne izađe izvan okvira ni preko prve, kakvog god je
   omjera. Na dodirnim zaslonima nema hovera, pa se ništa ne mijenja. */
.pimg{position:relative;overflow:hidden}
.pimg img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  background:var(--white);
}
.pimg .druga{opacity:0;transition:opacity 180ms cubic-bezier(.23,1,.32,1)}
@media (hover:hover){
  .pcard:hover .pimg .druga{opacity:1}
}

/* Traka s fotografijama u kartici (D-278): prstom se lista, kadar po
   kadar. Trake nema na proizvodu bez galerije — ondje ostaje jedna
   slika, kao i prije. */
/* Točkice stoje ISPOD slike, ne preko nje (D-281): preko fotografije
   su se gubile na svijetlim pakiranjima, a kupac nije ni znao da se
   traka može povući. Ispod se vide odmah, prije ikakvog dodira. */
.pimg--klizac{
  overflow:visible;aspect-ratio:auto;
  display:flex;flex-direction:column;
}
.pimg__traka{
  display:flex;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  aspect-ratio:1/.72;
}
.pimg__traka::-webkit-scrollbar{display:none}
.pimg__kadar{
  position:relative;flex:0 0 100%;scroll-snap-align:center;
  display:block;
}
.pimg__kadar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--white)}

.pimg__tocke{
  display:flex;justify-content:center;align-items:center;gap:5px;
  padding:9px 0 3px;pointer-events:none;
  height:18px;box-sizing:border-box;
}
/* Proizvod bez galerije nema točkica, ali dobiva isto mjesto ispod
   slike — inače je njegova kartica 18 px niža od susjedne (D-349). */
.pcard > a.pimg{margin-bottom:18px}
.pimg__tocke span{
  width:6px;height:6px;border-radius:50%;
  background:rgba(30,40,16,.22);transition:background .16s ease,width .16s ease;
}
.pimg__tocke span[data-on]{width:16px;border-radius:3px;background:var(--green)}

/* Na mišu se traka ne lista prstom, pa drugi kadar dolazi na hover. */
@media (hover:hover){
  .pcard:hover .pimg__traka{scroll-behavior:smooth}
}

/* Usporedi */
.cmp{
  position:absolute;top:12px;right:12px;z-index:2;
  display:flex;gap:6px;align-items:center;
  background:var(--white);border:1px solid var(--line2);border-radius:var(--rs);
  padding:5px 9px;cursor:pointer;
  font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
.cmp:hover{border-color:var(--green);color:var(--green)}
.cmp input{accent-color:var(--green);width:14px;height:14px;margin:0}
.pcard:has(.cmp input:checked){border-color:var(--green)}

.cmpbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--ink);color:#fff;
  padding:14px 28px;display:none;align-items:center;gap:18px;
  justify-content:center;flex-wrap:wrap;
}
.cmpbar.on{display:flex}
.cmpbar b{font:500 12.5px var(--mono);letter-spacing:.04em}
.cmpbar .gumb{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.cmpbar .gumb:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.cmpbar .ponisti{
  background:transparent;border:1px solid rgba(255,255,255,.42);border-radius:var(--rs);
  color:#fff;min-height:40px;padding:0 16px;font:600 12.5px var(--ui);cursor:pointer;
}
.cmpbar .ponisti:hover{border-color:#fff}

/* Stranica usporedbe */
.usporedba{padding-bottom:60px}
/* Stupci imaju gornju granicu širine (D-288): s jednim odabranim
   artiklom `1fr` je stupac razvlačio preko cijelih 1320 px i kartica
   je izgledala kao greška. Najviše se uspoređuju četiri, pa je 318 px
   širina koju stupac ima kad ih je četiri — ista je i kad je jedan. */
.usporedba__mreza{
  display:grid;gap:15px;align-items:start;justify-content:start;
  grid-template-columns:repeat(auto-fit,minmax(240px,318px));
}
.ustupac{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
}
.ustupac .pimg{aspect-ratio:1/.9;background:var(--white)}
.ustupac .pimg img{width:100%;height:100%;object-fit:contain}
.ustupac__tijelo{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.ustupac__opis{
  font-size:13.5px;line-height:1.6;color:var(--tekst);
  border-top:1px solid var(--line);padding-top:12px;margin-top:4px;
}
.ustupac__opis p{margin:0 0 .7em}
.ustupac__opis:empty{display:none}
.ustupac__spec{list-style:none;margin:10px 0 0;padding:12px 0 0;border-top:1px solid var(--line);font-size:13px}
.ustupac__spec li{display:flex;justify-content:space-between;gap:10px;padding:4px 0}
.ustupac__spec dt{color:var(--muted);font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase}
/* „Ukloni" je radnja, pa izgleda kao gumb — kao sitan sivi tekst se
   gubio ispod opisa. */
.ustupac__ukloni{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  margin-top:12px;min-height:36px;padding:0 13px;
  background:var(--white);border:1px solid var(--line2);border-radius:var(--rs);
  color:var(--muted);cursor:pointer;
  font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;
}
.ustupac__ukloni span{font-size:13px;line-height:1}
.ustupac__ukloni:hover{border-color:var(--error);color:var(--error);background:var(--white)}

/* Dodavanje iz usporedbe je glavna radnja stupca. */
.ustupac .prow .addbtn{white-space:nowrap}

/* ═══ Rezana roba: širina role → dužina koju režemo ═══════════════════ */

.rezano h5{margin-top:0}
.rez-naslov2{margin-top:18px}
/* Mreža, ne niz: redovi su jednako popunjeni umjesto da se u prvi
   natisne sedam traka, a u drugi ostanu tri. */
/* Mreža s jednakim ćelijama, ne rastezanje (D-359, klijentova korekcija).
   Nakratko je ovdje stajao `flex:1 1 64px`, pa je pločica koja ostane
   sama u redu zauzimala cijelu širinu i izgledala kao drugi element —
   najgore na mobitelu. U mreži svaka pločica ima istu širinu bez obzira
   koliko ih je u redu; red koji nije pun jednostavno završi ranije. */
.rez-sirine{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rez-sirine .pakopt{
  min-width:0;min-height:40px;padding:0 10px;
  border:1px solid var(--line2);border-radius:var(--rs);
  display:inline-flex;align-items:center;justify-content:center;
}
@media (max-width:1200px){.rez-sirine{grid-template-columns:repeat(4,1fr)}}
@media (max-width:420px){.rez-sirine{grid-template-columns:repeat(3,1fr)}}
/* Odabrana širina nosi istu zelenu plohu kao prijelaz mišem, da se na
   prvi pogled vidi što je odabrano (D-359, klijentova dopuna). Ovo je
   svjesno odstupanje od D-321, gdje odabrano stanje ostaje prozirno:
   ovdje su dva koraka jedan ispod drugoga i odabir mora biti očit. */
.rez-sirine .pakopt.on{
  background:var(--green-t);border-color:var(--ink);
  color:var(--ink);font-weight:600;
}
.rez-sirine .pakopt.on:hover{background:var(--green-t)}

.rez-duzina{display:flex;align-items:center;gap:12px}
.rez-duzina .qty{flex:none}

/* Dužina je ljestvica, ne popis artikala (D-359, klijent bira varijantu B).
   Širina je svojstvo role i ostaje u okvirima; dužina je mjera koju kupac
   bira, pa stoji bez okvira, s podvlakom — kao mjerilo. Tako se dva koraka
   razlikuju na prvi pogled, bez novog ponašanja i bez nove boje. */
/* Pet dužina u redu, jednake ćelije (klijentova korekcija): sa šest u
   redu zadnje dvije su visjele same u petom redu. */
.rez-duzine{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:100%;padding-top:4px}
.rez-duzine .pakopt{
  min-width:0;min-height:38px;padding:0 6px;
  border:0;border-bottom:2px solid var(--line2);
  border-radius:var(--rs) var(--rs) 0 0;
  background:transparent;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
}
.rez-duzine .pakopt:hover{background:var(--green-t);border-bottom-color:var(--brand)}
.rez-duzine .pakopt.on,
.rez-duzine .pakopt.on:hover{
  background:var(--green-t);border-bottom-color:var(--ink);
  color:var(--ink);font-weight:600;
}
@media (max-width:1200px){.rez-duzine{grid-template-columns:repeat(4,1fr)}}
@media (max-width:420px){.rez-duzine{grid-template-columns:repeat(3,1fr)}}

/* Uz brojač komada u ladici piše koliko je taj rez dug (D-361). */
.oznaka-rez{font:500 11px var(--mono);color:var(--muted);white-space:nowrap}

/* Ostatak iz D-360; polje se više ne koristi za popis dužina, ali stil
   ostaje za slučaj slobodnog rezanja. */
.rez-kol{
  min-height:40px;padding:0 10px;
  border:1px solid var(--line2);border-radius:var(--rs);
  background:var(--white);color:var(--ink);
  font:500 13px var(--mono);
}
.rez-kol:focus{outline:0;border-color:var(--green)}
select.rez-kol{min-width:88px}
.rez-jedinica{font:500 12.5px var(--mono);color:var(--muted)}

/* Cijena mjerne jedinice stoji sama i velika (D-374) — to je brojka po
   kojoj kupac uspoređuje ponude, a prije je bila u sredini dugog retka.
   Sidrena cijena ide odmah ispod nje, u istoj jedinici, jer se uspoređuje
   s njom i ni s čim drugim. */
.rez-jedinicna{
  margin:16px 0 0;padding:14px 16px 12px;
  background:var(--white);border:1px solid var(--line);
  border-bottom:0;border-radius:var(--rs) var(--rs) 0 0;
}
.rez-jedinicna__iznos{
  display:block;font:700 22px/1.15 var(--disp);color:var(--ink);letter-spacing:-.02em;
}
.rez-jedinicna .sidro{
  display:block;margin-top:5px;font:400 11.5px var(--mono);color:var(--muted);
}
.rez-jedinicna .sidro:empty{display:none}

.rez-zbroj{
  margin:0;padding:12px 16px;
  background:var(--green-t);border:1px solid #D9E7BF;border-radius:0 0 var(--rs) var(--rs);
}
/* Upozorenje o paletnoj isporuci (D-380). Crveno, jer govori o trošku
   koji kupac inače vidi tek na blagajni — a ne o grešci, pa nema ni
   ikonu ni okvir pune boje. Isti stil i u košarici. */
.rez-paleta,
.paleta-upozorenje{
  display:block;margin:10px 0 0;padding:10px 12px;
  background:#FDF2F0;border:1px solid #E7C4BC;border-left:3px solid var(--error);
  border-radius:var(--rs);
  font:500 13px/1.5 var(--ui);color:var(--error);
}
.paleta-upozorenje{margin:8px 0 0;font-size:12.5px;max-width:52ch}

/* Rez i ukupan iznos u jednom retku, istim pismom. */
.rez-racun{display:block;font:600 13.5px/1.55 var(--mono);color:var(--ink)}
.rez-zbroj .sidro{display:block;margin-top:6px;font:400 11.5px var(--mono);color:var(--muted)}
.rez-zbroj .sidro:empty{display:none}

.buyrow--rezano .bigadd{flex:1}

/* Količina u stupcu usporedbe. */
.ukupi{display:flex;gap:8px;align-items:stretch;margin-top:10px}
.qty--sitni{flex:none}
.qty--sitni button{width:34px;min-height:38px;font-size:16px}
.qty--sitni input{width:40px;font-size:14px}
.ukupi .addbtn{flex:1;min-height:38px}

/* Jedinica uz količinu u košarici. */
.jedinica{display:block;margin-top:4px;font:500 10.5px var(--mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* Galerija u stupcu usporedbe — strelice se pojave na prelazak mišem,
   a na dodirnom zaslonu stoje stalno jer hovera nema. */
.galerija{position:relative;overflow:hidden}
/* Obje strelice su isti gumb — ista veličina, isti oblik, isti odmak
   od ruba. Različito zaobljenje lijeve i desne izgledalo je kao greška. */
.galstr{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--rs);
  background:rgba(255,255,255,.92);color:var(--ink);
  font-size:18px;line-height:1;cursor:pointer;
  opacity:0;transition:opacity 140ms,border-color 140ms;z-index:2;
}
.galerija:hover .galstr,
.galerija:focus-within .galstr{opacity:1}
@media (hover:none){.galstr{opacity:1}}
.galstr.lijevo{left:8px}
.galstr.desno{right:8px}
.galstr:hover{background:#fff;border-color:var(--green);color:var(--green)}
.galtoc{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:5px;z-index:2}
.galtoc i{width:5px;height:5px;border-radius:50%;background:rgba(30,40,16,.3);display:block}
.galtoc i.on{background:var(--green)}

/* WooCommerce postavlja `li.product a img{height:auto}` jačim selektorom,
   pa je slika ostajala viša od okvira i donji joj se dio rezao. Ovdje se
   obje slike izrijekom upisuju u isti okvir. */
.woocommerce ul.products li.product .pimg img,
.pcard .pimg img,
.ustupac .pimg img{
  position:absolute;inset:0;
  width:100%;height:100%;
  max-width:none;max-height:none;
  object-fit:contain;
  background:var(--white);
}

/* ═══ Košarica kao ladica ═════════════════════════════════════════════
   Preuzeto iz prototipa: izlazi s desne strane, zastor iza nje, zbroj i
   put na blagajnu uvijek na dnu. */

.zastor{position:fixed;inset:0;background:rgba(15,18,15,.5);z-index:80}
.zastor[hidden]{display:none}
body.ladica-otvorena{overflow:hidden}

/* Ladica klizi, ne iskače: pomak se radi transformacijom (jeftinije od
   mijenjanja `right`) i traje 280 ms, dovoljno da se vidi smjer, a da
   se ne čeka. Zastor potamni u istom ritmu (D-234). */
.ladica{
  position:fixed;top:0;right:0;z-index:90;
  width:430px;max-width:94vw;height:100%;
  display:flex;flex-direction:column;
  background:var(--white);border-left:1px solid var(--line);
  box-shadow:-18px 0 40px -24px rgba(20,24,15,.55);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.ladica.open{transform:translateX(0)}
.zastor{opacity:0;transition:opacity .28s ease}
.zastor:not([hidden]){opacity:1}
@media (prefers-reduced-motion:reduce){
  .ladica,.zastor{transition:none}
}

.dhead{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 24px;border-bottom:1px solid var(--line);
}
.dhead h3{font-size:18px;margin:0}
.dzatvori{
  width:36px;height:36px;display:grid;place-items:center;
  background:none;border:0;border-radius:var(--rs);
  font-size:18px;color:var(--muted);cursor:pointer;
}
.dzatvori:hover{background:var(--green-t);color:var(--ink)}

.dbody{flex:1;overflow-y:auto;padding:8px 24px}
.dprazno{padding:40px 0;text-align:center;color:var(--muted)}

.citem{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.citem .ph{
  width:64px;height:64px;flex:none;
  border:1px solid var(--line);border-radius:var(--rs);
  background:var(--white);overflow:hidden;
}
.citem .ph img{width:100%;height:100%;object-fit:contain;display:block}
.citem__tekst{min-width:0;flex:1}
.citem b{display:block;font:600 14px/1.35 var(--ui);color:var(--ink)}
.citem small{display:block;margin-top:3px;font:400 12.5px var(--mono);color:var(--muted)}
.citem .sidrena{margin-top:3px}
.citem .rm{
  display:inline-block;margin-top:6px;
  font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.citem .rm:hover{color:var(--error)}
.citem .cp{
  margin-left:auto;text-align:right;white-space:nowrap;
  font:600 14.5px var(--mono);color:var(--ink);
}

.dodatak{margin:18px 0 8px;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.dodatak h4{margin:0 0 12px;font:600 14px var(--ui);color:var(--ink)}
.dodatak__red{display:flex;gap:12px;align-items:center;color:inherit}
.dodatak__red .ph{
  width:56px;height:56px;flex:none;
  border:1px solid var(--line);border-radius:var(--rs);background:var(--white);overflow:hidden;
}
.dodatak__red .ph img{width:100%;height:100%;object-fit:contain;display:block}
.dodatak__tekst{min-width:0;flex:1}
.dodatak__tekst b{display:block;font:600 13.5px var(--ui);color:var(--ink)}
.dodatak__tekst small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.dodatak__cijena{
  flex:none;white-space:nowrap;
  border:1px solid var(--line2);border-radius:var(--rs);
  padding:8px 12px;font:600 13px var(--mono);color:var(--ink);background:var(--white);
}
.dodatak__red:hover .dodatak__cijena{border-color:var(--green);color:var(--green)}

.dfoot{border-top:1px solid var(--line);padding:20px 24px}
.dtotal{display:flex;justify-content:space-between;align-items:baseline;font:600 15px var(--ui);margin-bottom:6px}
.dtotal__dostava{margin:0 0 14px;font:400 11.5px/1.4 var(--ui);color:var(--muted)}
.dtotal span:last-child{font:600 19px var(--mono)}
.dfoot .gumb{width:100%;min-height:52px;font-size:15px}
.dfoot .cont{
  display:block;width:100%;margin-top:12px;padding:8px 0;
  background:none;border:0;cursor:pointer;
  font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.dfoot .cont:hover{color:var(--ink)}

/* ═══ Koraci kupnje ═══════════════════════════════════════════════════ */

.koraci{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:12px;margin:0 0 28px;
}
.korak{
  font:600 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding-bottom:4px;border-bottom:2px solid transparent;
}
a.korak:hover{color:var(--ink)}
.korak--sada{color:var(--ink);border-bottom-color:var(--green)}
.koraci__strelica{color:var(--line2)}

/* Drugi gumb u ladici — put na blagajnu bez zaustavljanja na košarici. */
.dfoot__blagajna{width:100%;margin-top:8px;min-height:44px}


/* ═══ Košarica — varijanta B, svijetli sažetak ════════════════════════
   Redak: slika, naziv s podacima i alatom ispod njega, iznos desno.
   Račun se izdvaja obrubom i debljom crtom iznad ukupnog iznosa, ne
   bojom — stranica ostaje u papirnatoj paleti (D-194). */

.kosarica{margin:0}
.kosarica__popis{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:8px 20px;
}
.kredak{
  display:grid;grid-template-columns:84px minmax(0,1fr) auto;
  gap:18px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--line);
}
.kredak:last-child{border-bottom:0}

.kredak__slika img{
  width:84px;height:84px;max-width:none;
  object-fit:contain;padding:4px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--rs);
  box-shadow:none;
}

.kredak__opis{min-width:0}
.kredak__naziv{display:block;font:600 15.5px/1.35 var(--ui);color:var(--ink);margin-bottom:4px}
a.kredak__naziv:hover{color:var(--green)}
.kredak__opis dl,
.kredak__opis .variation{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.kredak__opis dl dt,
.kredak__opis dl dd{display:inline;margin:0;padding:0;font-size:13px}
.kredak__opis dl dt{font-weight:600;color:var(--tekst)}
.kredak__opis dl dd{margin-right:10px}
.kredak__opis dl p{margin:0;display:inline}
.kredak__opis .sidrena{display:block;margin-top:4px}

.kredak__alat{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:10px}
.kredak__jedan{font:600 14px var(--mono);color:var(--ink)}
.kredak__ukloni{
  font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.kredak__ukloni:hover{color:var(--error)}
.kredak__alat .jedinica{margin-top:0}

.brojac{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--line2);border-radius:var(--rs);
  background:var(--white);overflow:hidden;
}
.brojac__tipka{
  width:34px;min-height:38px;flex:none;display:grid;place-items:center;
  border:0;background:none;font-size:15px;line-height:1;color:var(--ink);cursor:pointer;
}
.brojac__tipka:hover{background:var(--green-t);color:var(--green)}
.brojac .quantity{
  display:flex;margin:0;border:0;
  border-left:1px solid var(--line);border-right:1px solid var(--line);
}
.brojac input{
  width:46px;min-height:38px;padding:0;
  border:0;border-radius:0;background:none;
  text-align:center;font:600 14px var(--mono);color:var(--ink);
  -moz-appearance:textfield;
}
.brojac input::-webkit-outer-spin-button,
.brojac input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.kredak__desno{text-align:right;white-space:nowrap}
.kredak__iznos{display:block;font:600 17px var(--mono);color:var(--ink)}
.kredak__komad{display:block;margin-top:3px;font:400 11.5px var(--mono);color:var(--muted)}

.kosarica__radnje{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.kosarica__radnje .coupon{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:260px}
.kosarica__radnje .coupon input{
  flex:1;min-width:140px;min-height:44px;padding:0 13px;
  border:1px solid var(--line2);border-radius:var(--rs);background:var(--white);font-size:14px;
}

/* ── svijetli sažetak ── */

.zbroj{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;position:sticky;top:158px;
}
.zbroj__naslov{font-size:17px;margin:0 0 16px}
.zbroj__red{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:10px 0;font-size:14.5px;border-bottom:1px solid var(--line);
}
.zbroj__iznos,
.zbroj__iznos .woocommerce-Price-amount{font-family:var(--mono);color:var(--ink);white-space:nowrap}

/* Međuzbroj je iznos robe — jedini broj koji kupac uspoređuje s
   cjenikom prije dostave, pa je krupniji od ostalih redaka (D-197). */
.zbroj__red--medju{padding:4px 0 14px;font-size:15px}
.zbroj__red--medju > span:first-child{font-weight:600;color:var(--ink)}
.zbroj__red--medju .zbroj__iznos,
.zbroj__red--medju .zbroj__iznos .woocommerce-Price-amount{font-size:19px;font-weight:700;line-height:1.1}

.zbroj__dostava{padding:14px 0;border-bottom:1px solid var(--line)}
.zbroj__dostava h3{
  margin:0 0 10px;
  font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.zbroj ul#shipping_method{list-style:none;margin:0;padding:0}
.zbroj ul#shipping_method li{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;margin-bottom:6px;
  border:1px solid var(--line);border-radius:var(--rs);
  font-size:14px;color:var(--ink);
}
.zbroj ul#shipping_method li:last-child{margin-bottom:0}
.zbroj ul#shipping_method li:hover{border-color:var(--line2)}
.zbroj ul#shipping_method li:has(input:checked){
  border-color:transparent;background:rgba(85,121,32,.08);
  box-shadow:inset 0 0 0 2px var(--green);
}
.zbroj ul#shipping_method input{accent-color:var(--green);width:16px;height:16px;margin:0;flex:none}
.zbroj ul#shipping_method label{display:flex;justify-content:space-between;gap:10px;flex:1;cursor:pointer;color:inherit}
.zbroj ul#shipping_method .amount{font-family:var(--mono);font-weight:600}
.zbroj .woocommerce-shipping-destination,
.zbroj .shipping-calculator-button{display:block;margin-top:8px;font-size:12.5px;color:var(--muted)}

.zbroj__ukupno{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:6px;padding-top:16px;border-top:2px solid var(--ink);
  font:600 15px var(--ui);color:var(--ink);
}
.zbroj__ukupno .zbroj__iznos{font-size:22px;font-weight:600}

.zbroj .wc-proceed-to-checkout{margin-top:18px;padding:0}
.woocommerce .zbroj .wc-proceed-to-checkout a.checkout-button,
.zbroj .wc-proceed-to-checkout .button{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:54px;padding:0 24px;
  background:var(--gumb);border:1px solid var(--gumb);border-radius:var(--rs);
  color:#fff;font:600 15px var(--ui);
}
.woocommerce .zbroj .wc-proceed-to-checkout a.checkout-button:hover,
.zbroj .wc-proceed-to-checkout .button:hover{background:var(--gumb-h);border-color:var(--gumb-h);color:#fff}
.zbroj__sitno{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}

@media (max-width:1100px){
  .woocommerce-cart .puno{grid-template-columns:1fr;gap:24px}
  .zbroj{position:static}
}

@media (max-width:620px){
  .kredak{
    grid-template-columns:72px minmax(0,1fr);
    grid-template-areas:"slika opis" "desno desno";
    gap:14px;
  }
  .kredak__slika{grid-area:slika}
  .kredak__slika img{width:72px;height:72px}
  .kredak__opis{grid-area:opis}
  .kredak__desno{grid-area:desno;text-align:left;display:flex;align-items:baseline;gap:10px}
  .kredak__komad{margin-top:0}
}

/* ═══ Mobilni izbornik kao ladica ═════════════════════════════════════
   Isti obrazac kao košarica (D-189): izlazi sa strane, zastor iza,
   kontakt na dnu. Ponuda je ovdje vlastiti popis, ne stisnuti mega
   panel — paneli su građeni za široki zaslon (D-204). */

.mizb{
  position:fixed;top:0;left:-360px;z-index:90;
  width:320px;max-width:88vw;height:100%;
  display:none;flex-direction:column;
  background:var(--white);border-right:1px solid var(--line);
  transition:left .22s cubic-bezier(.23,1,.32,1);
}
.mizb.open{left:0}
@media (prefers-reduced-motion:reduce){.mizb{transition:none}}

.mizb__glava{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 18px;background:var(--nav);color:#fff;
}
.mizb__glava strong{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.mizb__glava .dzatvori{color:#DDE3D8}
.mizb__glava .dzatvori:hover{background:rgba(255,255,255,.12);color:#fff}

.mizb__tijelo{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
.mizb__popis{list-style:none;margin:0;padding:0}
.mizb__popis > li{border-bottom:1px solid var(--line)}

.mizb__red{display:flex;align-items:stretch}
.mizb__red > a{
  flex:1;display:flex;align-items:center;gap:12px;
  min-height:52px;padding:0 16px;
  font:600 14.5px var(--ui);color:var(--ink);
}
.mizb__red > a .ikona{flex:none;color:var(--green)}
.mizb__red > a:active{background:var(--green-t)}
.mizb__vise{
  width:52px;flex:none;
  display:grid;place-items:center;
  background:none;border:0;border-left:1px solid var(--line);
  color:var(--muted);cursor:pointer;
}
.mizb__vise .ikona{transform:rotate(90deg);transition:transform .18s ease}
.mizb__vise[aria-expanded="true"]{color:var(--green);background:var(--green-t)}
.mizb__vise[aria-expanded="true"] .ikona{transform:rotate(270deg)}

.mizb__pod{list-style:none;margin:0;padding:4px 0 10px;background:var(--paper)}
/* Naziv stoji odmah uz sličicu, slijeva. `space-between` je ostao iz
   vremena kad je redak s desne strane nosio broj artikala; otkad je
   broj maknut (D-209), razmicao je sličicu i naziv na suprotne rubove
   (D-216). */
.mizb__pod a{
  display:flex;justify-content:flex-start;gap:12px;align-items:center;
  min-height:44px;padding:8px 16px 8px 48px;
  font-size:15px;color:var(--tekst);
}
.mizb__pod a i{font:500 11.5px var(--mono);color:var(--muted);font-style:normal}
/* Ikona uz uslugu u mobilnom izborniku (D-298): isti crtež kao u mega
   panelu, pa se usluga prepozna i bez čitanja. */
.mizb__ik{display:inline-grid;place-items:center;width:22px;flex:none;color:var(--green)}
.mizb__pod a:has(.mizb__ik){display:flex;align-items:center;gap:11px}
.mizb__pod a:active{background:var(--green-t)}
.mizb__sve{font-weight:600;color:var(--green) !important}

.mizb__dno{
  padding:14px 16px;border-top:1px solid var(--line);background:var(--paper);
  display:grid;gap:3px;
}
.mizb__dno a{display:flex;align-items:center;gap:9px;font:600 15px var(--ui);color:var(--ink)}
.mizb__dno a .ikona{color:var(--green)}
.mizb__dno span{font:500 11.5px var(--mono);color:var(--muted)}

@media (max-width:900px){
  .mizb{display:flex}
}

/* ═══ Izbornik se pri listanju skuplja u uski red ══════════════════════
   Pločice su za dolazak na stranicu: velika ikona, naziv ispod, lako se
   pogodi. Čim kupac krene listati popis proizvoda, one samo jedu zaslon
   — zaglavlje je ljepljivo. Tada se pretvaraju u uski red s malom
   ikonom uz naziv, kakav je bio prije pločica (D-206). */

.glavni-izbornik .glavna-veza{
  transition:min-height .18s ease, padding .18s ease, font-size .18s ease;
}
.glavni-izbornik .glavna-veza .ikona{transition:width .18s ease, height .18s ease}

/* Uski red se poravnava po sredini: u pločicama stupci sami popune
   širinu, a kad se natpisi skupe ostaje prazno desno i red izgleda
   odsječeno. Po sredini su proporcije mirne (D-212). */
.zaglavlje.je-smanjeno .glavni-izbornik__popis{
  display:flex;justify-content:center;
}
.zaglavlje.je-smanjeno .glavni-izbornik .glavna-veza{
  display:flex;align-items:center;justify-content:center;
  width:auto;min-height:0;padding:15px 20px;
  font-size:14px;letter-spacing:.06em;
}
/* Ikona u uskom redu odlazi, ne smanjuje se. Na 18 px crtež prestaje
   biti prepoznatljiv i postaje mrlja uz natpis; natpis tada nosi sve
   sam, pa je krupniji i razmaknutiji nego u pločici (D-207). */
.zaglavlje.je-smanjeno .glavni-izbornik .glavna-veza .ikona{display:none}

@media (prefers-reduced-motion:reduce){
  .glavni-izbornik .glavna-veza,
  .glavni-izbornik .glavna-veza .ikona{transition:none}
}

/* Treća razina u mobilnoj ladici: Sjeme → Sjeme povrća → kulture. */
.mizb__red--2 > a{min-height:46px;padding-left:48px;font:500 15px var(--ui);color:var(--tekst)}
.mizb__red--2{border-top:1px solid var(--line)}
.mizb__pod > li:first-child > .mizb__red--2{border-top:0}
.mizb__red--2 .mizb__vise{width:48px;border-left:1px solid var(--line)}
.mizb__pod--3{background:var(--white);border-top:1px solid var(--line)}
.mizb__pod--3 a{padding-left:64px;min-height:44px;font-size:14.5px}

/* Sličice kategorija u mobilnoj ladici. Kategorija bez slike dobiva
   praznu plohu iste veličine, da redci ostanu poravnati (D-210). */
.mizb__sl{
  flex:none;width:30px;height:30px;
  border:1px solid var(--line);border-radius:5px;
  background:#E8EAE3;overflow:hidden;
}
.mizb__sl img{width:100%;height:100%;object-fit:cover;display:block}
.mizb__red--2 > a{display:flex;align-items:center;gap:11px;padding-left:16px}
.mizb__pod--3 a{display:flex;align-items:center;gap:11px;padding-left:30px}
.mizb__pod--3 .mizb__sl{width:26px;height:26px}
.mizb__pod .mizb__sve{padding-left:57px}
.mizb__pod--3 .mizb__sve{padding-left:67px}

/* Dvostruki dodir više ne zumira. Štipanje s dva prsta i dalje radi —
   zumiranje se ne smije ugasiti (DESIGN_SYSTEM, pristupačnost), ovo
   miče samo dvostruki dodir i s njim kašnjenje od 300 ms (D-210). */
html{touch-action:manipulation}

/* Bijeli red s logom, tražilicom i radnjama NE skuplja se pri
   listanju. Pokušano i vraćeno: skupljanje je štedjelo 24 px, ali je
   logo poskakivao pri svakom povratku na vrh i red je izgledao
   nestabilno. Skuplja se samo traka izbornika (D-215). */

/* ═══ Moj račun ═══════════════════════════════════════════════════════
   Raspored iz prototipa: izbornik lijevo 230 px, sadržaj desno.
   Pločice vode na isto kamo i izbornik — za one koji na stranicu dođu
   prvi put i ne gledaju bočni stupac. Računa za preuzimanje nema: ide
   fizički u paketu, pa gumb „Račun · PDF" nije ni ponuđen (D-217). */

.acct{
  display:grid;grid-template-columns:230px minmax(0,1fr);gap:36px;
  align-items:start;padding-bottom:20px;
}
.acct__sadrzaj{min-width:0}

.acctnav{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;position:sticky;top:150px;
}
.acctnav a{
  display:block;padding:13px 18px;
  font:500 13.5px var(--ui);color:var(--tekst);
  border-bottom:1px solid var(--line);
}
.acctnav a:last-child{border-bottom:0}
.acctnav a:hover{background:var(--paper);color:var(--ink)}
.acctnav a.on{
  background:rgba(85,121,32,.14);color:#3E5A16;font-weight:600;
  box-shadow:inset 3px 0 0 var(--green);
}

.acctpozdrav{font-size:15px;margin:0 0 6px}
.acctpozdrav a{color:var(--green);font-weight:600}
.acctuvod{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 22px;max-width:680px}

.acctplocice{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--razmak);margin-bottom:28px}
.acctplocica{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:28px 16px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);color:var(--ink);
  transition:border-color .15s,background .15s;
}
.acctplocica:hover{border-color:var(--green);background:rgba(85,121,32,.05)}
.acctplocica .ikona{color:var(--muted);transition:color .15s}
.acctplocica:hover .ikona{color:var(--green)}
.acctplocica span{font:600 14px var(--ui)}

.acct__naslov{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px}
.acct__naslov h2{font-size:19px;margin:0}
.acct__naslov a{font:600 13.5px var(--ui);color:var(--green)}

.acct__prazno{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;display:grid;justify-items:start;gap:14px;
}
.acct__prazno p{margin:0;color:var(--muted)}

.acct__narudzbe{display:grid;gap:12px}
.order{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 22px;
}
.ohead{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.ohead b{font:600 13.5px var(--mono);letter-spacing:.02em;color:var(--ink)}
.ohead .st{
  font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border:1px solid var(--line2);border-radius:999px;color:var(--green);
}
.oitems{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.oitems b{color:var(--ink);font-family:var(--mono)}
.obtns{display:flex;gap:8px;flex-wrap:wrap}
.gumb--malo{min-height:38px;padding:0 14px;font-size:13px}

/* WooCommerceove tablice i obrasci unutar Mojeg računa */
.acct__sadrzaj .woocommerce-message,
.acct__sadrzaj .woocommerce-info,
.acct__sadrzaj .woocommerce-error{border-radius:var(--r)}
.acct__sadrzaj table.woocommerce-orders-table,
.acct__sadrzaj table.shop_table{
  width:100%;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);border-collapse:separate;border-spacing:0;overflow:hidden;
}
.acct__sadrzaj table.shop_table th{
  text-align:left;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--line);
}
.acct__sadrzaj table.shop_table td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px}
.acct__sadrzaj table.shop_table tr:last-child td{border-bottom:0}
.acct__sadrzaj form .form-row{display:grid;gap:6px;margin:0 0 14px}
.acct__sadrzaj label{font:600 13px var(--ui);color:var(--ink)}
.acct__sadrzaj .input-text,
.acct__sadrzaj input[type=text],
.acct__sadrzaj input[type=email],
.acct__sadrzaj input[type=tel],
.acct__sadrzaj input[type=password]{
  min-height:44px;padding:0 13px;background:var(--white);
  border:1px solid var(--line2);border-radius:var(--rs);font:400 14.5px var(--ui);color:var(--ink);
}
.acct__sadrzaj fieldset{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:22px 0 0}
.acct__sadrzaj legend{font:600 14px var(--disp);padding:0 8px}

@media (max-width:860px){
  .acct{grid-template-columns:1fr;gap:22px}
  .acctnav{position:static;display:flex;overflow-x:auto}
  .acctnav a{border-bottom:0;border-right:1px solid var(--line);white-space:nowrap}
  .acctnav a.on{box-shadow:inset 0 -3px 0 var(--green)}
  .acctplocice{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .acctplocice{grid-template-columns:1fr}
}

/* ── Prijava i otvaranje računa ── */
/* Prijava i registracija stoje jedna uz drugu i moraju biti jednako
   visoke (D-353). Prije je stajalo `align-items:start`, pa se svaka
   kartica stezala na svoj sadržaj — izmjereno 439 i 496 px, razlika od
   57 px koja se na dnu vidi kao stepenica. */
.prijava{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--razmak);
  align-items:stretch}
.prijava--sama{grid-template-columns:minmax(0,520px)}
/* Stupac, da se zadnji redak kraće kartice može spustiti na dno — inače
   bi izjednačena visina ostavila praznu rupu ispod obrasca. */
.prijava__kartica{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 28px 24px;
  display:flex;flex-direction:column;
}
.prijava__kartica h2{font-size:19px;margin:0 0 6px}
/* Uvodni redak ide punom širinom kartice (D-353). `max-width:46ch` ga je
   lomio na 391 px unutar kartice od 696 px, pa je tekst izgledao
   nasumično prelomljen, a desna polovica kartice prazna. */
.prijava__pod{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0 0 18px}
.prijava .form-row{display:grid;gap:6px;margin:0 0 14px}
.prijava label{font:600 13px var(--ui);color:var(--ink)}
.prijava .obv{color:var(--error)}
.prijava .input-text{
  min-height:46px;padding:0 13px;background:var(--white);
  border:1px solid var(--line2);border-radius:var(--rs);font:400 14.5px var(--ui);color:var(--ink);
}
.prijava .input-text:focus{outline:0;border-color:var(--green)}
.prijava__dno{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:4px}
.prijava__zapamti{display:flex;align-items:center;gap:9px;font:400 13.5px var(--ui);color:var(--tekst);cursor:pointer}
.prijava__zapamti input{accent-color:var(--green);width:17px;height:17px}
/* `margin-top:auto` spušta redak na dno kartice, pa izjednačena visina
   ne ostavlja praznu rupu ispod obrasca (D-353). */
.prijava__zaboravljena{margin:14px 0 0;margin-top:auto;padding-top:14px;font-size:13.5px}
.prijava__zaboravljena a{color:var(--green);font-weight:600}

@media (max-width:860px){
  .prijava{grid-template-columns:1fr}
}

/* Gumbi u stupcu radnji tablice narudžbi bili su slijepljeni — Woo ih
   ispisuje jedan do drugoga bez razmaka (D-218). */
.acct__sadrzaj .woocommerce-orders-table__cell-order-actions{white-space:normal}
.acct__sadrzaj .woocommerce-orders-table__cell-order-actions a.button,
.acct__sadrzaj td.woocommerce-orders-table__cell-order-actions .button{
  display:inline-flex;align-items:center;
  min-height:38px;padding:0 14px;margin:3px 8px 3px 0;
  border-radius:var(--rs);font:600 13px var(--ui);
}
.acct__sadrzaj .woocommerce-orders-table__cell-order-actions a.button:last-child{margin-right:0}
/* Druga i svaka daljnja radnja je sporedna: puna maslinasta samo za
   prvu, ostale u obrisu, da redak nema dva jednako jaka gumba. */
.acct__sadrzaj .woocommerce-orders-table__cell-order-actions a.button ~ a.button{
  background:transparent;color:var(--ink);border:1px solid var(--line2);
}
.acct__sadrzaj .woocommerce-orders-table__cell-order-actions a.button ~ a.button:hover{
  background:var(--green-t);border-color:var(--green);color:var(--green);
}
/* Raskid ugovora nosi blijedo crvenu plohu (D-270): to je radnja koju
   kupac traži kad nešto ne valja, pa mora biti vidljiva — ali ne
   jednako glasna kao „Prikaži", jer nije ono što se najčešće radi. */
.acct__sadrzaj .woocommerce-orders-table__cell-order-actions a.button.raskid,
.acct__sadrzaj .woocommerce-orders-table__cell-order-actions a.button ~ a.button.raskid{
  background:#FBEDEB;border-color:#EBC9C3;color:#8C3322;
}
.acct__sadrzaj .woocommerce-orders-table__cell-order-actions a.button.raskid:hover{
  background:#F6DFDA;border-color:#D9A79D;color:#7A2B1C;
}

/* ═══ Pravni dokumenti i Pomoć ════════════════════════════════════════
   Dva dokumenta, jedan predložak. Kazalo je ljepljivo jer su dokumenti
   dugi, a kupac u njih ulazi s konkretnim pitanjem — ne čita ih od
   početka. Mjera retka je 68ch: pravni tekst preko cijele širine
   gubi se u redu (D-221). */

.dokuvod{color:var(--muted);font-size:13.5px;margin:6px 0 26px}
.doklayout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:44px;align-items:start}
.dokkaz{position:sticky;top:150px;display:flex;flex-direction:column;border-left:1px solid var(--line)}
.dokkaz a{
  font:500 12.5px/1.35 var(--mono);color:var(--muted);
  padding:9px 0 9px 16px;border-left:2px solid transparent;margin-left:-1px;
}
.dokkaz a:hover{color:var(--ink);border-left-color:var(--green)}
.doktekst section{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 30px;margin-bottom:var(--razmak);scroll-margin-top:170px;
}
.doktekst h2{
  font:600 18px/1.25 var(--disp);letter-spacing:-.015em;margin:0 0 14px;
  display:flex;align-items:baseline;gap:12px;color:var(--ink);
}
.docno{
  font:500 11px var(--mono);letter-spacing:.1em;color:var(--brand-d);
  background:var(--green-l);padding:3px 8px;border-radius:var(--rs);flex:none;
}
.doktekst p{font-size:14.5px;line-height:1.7;color:var(--tekst);margin:0 0 12px;max-width:68ch}
.doktekst p:last-child{margin-bottom:0}
.doktekst b{color:var(--ink)}
.doktekst ul,
.doktekst ol{margin:0 0 12px;padding-left:20px;max-width:68ch}
.doktekst li{font-size:14.5px;line-height:1.7;color:var(--tekst);margin-bottom:5px}
/* Pitanje u odjeljku s čestim pitanjima (D-376). Nije h2 jer nije novi
   odjeljak nego stavka unutar njega; razmak iznad odvaja par od para. */
.doktekst h3{
  font:600 15px/1.35 var(--disp);color:var(--ink);letter-spacing:-.01em;
  margin:22px 0 8px;
}
.doktekst h3:first-of-type{margin-top:6px}
/* Podnaslov iza teksta u istom odjeljku (Uvjeti kupnje, D-412) treba puni
   razmak; 6 px vrijedi samo kad h3 stoji odmah ispod h2. */
.doktekst :is(p,ul,ol,table) + h3:first-of-type{margin-top:22px}
.docpod{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:14px}
.docpod th,.docpod td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.docpod th{
  width:170px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.docpod tr:last-child th,.docpod tr:last-child td{border-bottom:0}

.helpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--razmak);margin-top:26px}
.helpcard{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;transition:border-color .15s;
}
.helpcard:hover{border-color:var(--green)}
.helpcard .no{font:500 11px var(--mono);letter-spacing:.1em;color:var(--muted)}
.helpcard b{display:block;font:600 17px var(--disp);margin:10px 0 6px;color:var(--ink)}
.helpcard p{font-size:13px;color:var(--muted);margin:0}
.helpcard ul{list-style:none;margin:14px 0 0;padding:10px 0 0;border-top:1px solid var(--line)}
.helpcard li{font-size:13.5px;padding:4px 0}
.helpcard li a{color:var(--ink2)}
.helpcard li a:hover{color:var(--green)}
.helpcard li.mono a{font:600 16px var(--mono);color:var(--ink)}
.helpcard--istaknuta{background:var(--green-t);border-color:#D9E7BF}
.helpcard__radno{margin:12px 0 0;font:500 11.5px var(--mono);color:var(--muted)}

@media (max-width:1000px){.helpgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .doklayout{grid-template-columns:1fr;gap:20px}
  .dokkaz{position:static;flex-flow:row wrap;border-left:0;gap:4px}
  .dokkaz a{border:1px solid var(--line2);border-radius:var(--rs);padding:7px 11px;margin:0}
}
@media (max-width:620px){.helpgrid{grid-template-columns:1fr}}

/* ═══ Kratka poruka nakon radnje ══════════════════════════════════════
   Dodavanje u košaricu više ne osvježava stranicu, pa kupcu treba znak
   da se nešto dogodilo. Poruka stoji 2,6 s, ne traži klik i ne pokriva
   gumb koji je upravo pritisnut (D-224). */

.javka{
  position:fixed;left:50%;bottom:24px;z-index:95;
  transform:translate(-50%,14px);
  max-width:min(420px,calc(100vw - 32px));
  padding:13px 20px;border-radius:999px;
  background:var(--ink);color:#fff;
  font:600 14px var(--ui);text-align:center;
  box-shadow:0 10px 30px -12px rgba(20,24,15,.6);
  opacity:0;pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.javka.je-vidljiva{opacity:1;transform:translate(-50%,0)}
.javka--greska{background:var(--error)}
@media (prefers-reduced-motion:reduce){.javka{transition:none}}

/* Gumb koji čeka odgovor */
.addbtn.radi,.bigadd.radi{opacity:.65;pointer-events:none}
.addbtn--obris{background:transparent;color:var(--green);border:1px solid var(--line2)}
.addbtn--obris:hover{background:var(--green-t);border-color:var(--green)}

/* ── Brojač u ladici ── */
.citem__alat{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.brojac--malo{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:var(--rs);overflow:hidden}
.brojac--malo .brojac__tipka{
  width:32px;height:32px;display:grid;place-items:center;
  background:none;border:0;color:var(--ink);font-size:16px;line-height:1;cursor:pointer;
}
.brojac--malo .brojac__tipka:hover{background:var(--green-t);color:var(--green)}
/* Kod rezane robe ovdje ne stoji broj nego mjera („100 m"), pa polje
   mora primiti četiri znaka — s 34 px se „100 m" lomilo. */
.brojac__broj{
  min-width:58px;text-align:center;padding-inline:4px;white-space:nowrap;
  font:600 14px var(--mono);color:var(--ink);
  border-inline:1px solid var(--line2);line-height:32px;
}

/* ═══ Lebdeća traka: filtri i povratak na vrh ═════════════════════════
   Na mobitelu je popis proizvoda dug, a filtri su gore. Traka se
   pojavi nakon prve police i nosi dvoje: filtre lijevo, povratak na
   vrh desno. Na desktopu je nema — ondje filtri stoje u bočnom
   stupcu i vide se cijelo vrijeme (D-226). */

.plutaj{
  position:fixed;left:0;right:0;bottom:16px;z-index:70;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-inline:16px;pointer-events:none;
}
.plutaj[hidden]{display:none}
.plutaj__gumb{
  pointer-events:auto;
  display:inline-flex;align-items:center;gap:9px;
  min-height:46px;padding:0 18px;
  background:var(--ink);color:#fff;border:0;border-radius:999px;
  font:600 14px var(--ui);cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(20,24,15,.65);
}
.plutaj__gumb:hover{background:var(--nav)}
.plutaj__gumb--vrh{width:46px;padding:0;justify-content:center;margin-left:auto}
.plutaj__gumb[hidden]{display:none}

@media (min-width:901px){
  .plutaj{display:none !important}
}

/* ═══ Opis proizvoda i opis kategorije ════════════════════════════════
   Kratki opis je uokviren i stoji uz kupnju; puni opis je sklopljen,
   da se ne čita kao dvaput napisana ista stvar. Opis kategorije s
   latinskim nazivom seli ispod popisa — pisan je za tražilice, a kupac
   koji otvori „Korabica" traži korabice (D-227). */

.pdp .sub{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:var(--rs);padding:14px 18px;margin:0 0 18px;
  font-size:14.5px;line-height:1.65;color:var(--tekst);
}
.pdp .sub p{margin:0 0 8px}
.pdp .sub p:last-child{margin:0}

/* Puni opis stoji otvoren, u ravnini s „Tehničke specifikacije": isti
   naslov, isti razmak do sadržaja, tekst u bijeloj kartici kao i
   tablica pokraj njega (D-240). */
.opis-puni .tekst{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 22px;font-size:14px;line-height:1.62;color:var(--tekst);
}
.opis-puni .tekst > *:first-child{margin-top:0}
.opis-puni .tekst > *:last-child{margin-bottom:0}

.arhiva__opis{
  margin-top:30px;padding-top:26px;border-top:1px solid var(--line);
}
.arhiva__opis-naslov{font-size:18px;margin:0 0 12px}
/* Tekst ide punom širinom stranice, ne u stupac od 72ch: u uskom
   stupcu isti tekst naraste u visinu i produži listanje (D-238).
   Dvostupčano, pa redak ostaje čitljiv a blok nizak. */
.arhiva__opis .tekst{
  max-width:none;
  font-size:14.5px;color:var(--tekst);
  columns:2;column-gap:46px;
}
.arhiva__opis .tekst > *:first-child{margin-top:0}
.arhiva__opis .tekst p{break-inside:avoid}
@media (max-width:860px){
  .arhiva__opis .tekst{columns:1}
}

/* ═══ Prijedlozi u tražilici ══════════════════════════════════════════
   Od drugog znaka. Redak nosi sličicu, naziv, stanje i cijenu — ništa
   više; tražilica nije mjesto za cijelu karticu proizvoda (D-229). */

.trazilica{position:relative}
.prijedlozi{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  max-height:min(70vh,460px);overflow:auto;
  background:var(--white);border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:0 18px 40px -18px rgba(20,24,15,.4);
  padding:6px;
}
.prijedlozi[hidden]{display:none}
.prijedlozi__nas{
  margin:8px 10px 4px;font:500 10.5px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
/* Svaki redak nosi naziv, stanje, cijenu i sidrenu cijenu — četiri
   podatka. Bez crte između njih oko ne zna gdje jedan prijedlog
   prestaje a drugi počinje (D-258). */
.prijedlozi a{display:block;border-radius:var(--rs);color:var(--ink)}
.prijedlozi a + a{border-top:1px solid var(--line)}
.prijedlozi__nas + a{border-top:0}
.prijedlozi a:hover,.prijedlozi a.on{background:var(--green-t)}
.prijedlozi__kat{padding:9px 10px;font:500 14px var(--ui)}
/* Selektor je `a.prijedlozi__p`, ne samo `.prijedlozi__p`: `.prijedlozi a`
   iznad nosi `display:block` i specifičnost 0,1,1 — jaču od same klase,
   pa je redak ostajao blok i sve se slagalo jedno pod drugo (D-247). */
.prijedlozi a.prijedlozi__p{
  display:grid;grid-template-columns:40px minmax(0,1fr) auto;
  gap:11px;align-items:center;padding:7px 10px;
}
.prijedlozi__sl{
  width:40px;height:40px;flex:none;
  border:1px solid var(--line);border-radius:5px;
  background:#E8EAE3;overflow:hidden;
}
.prijedlozi__sl img{width:100%;height:100%;object-fit:cover;display:block}
.prijedlozi__t{min-width:0}
.prijedlozi__t b{display:block;font:500 14px var(--ui);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prijedlozi__t em{display:block;font-style:normal;font:500 11px var(--mono);color:var(--muted);margin-top:2px}
/* Sidrena cijena stoji uz cijenu i ovdje — zakonska obveza, ne ukras
   (D-122). Manja je i prigušena, ali stoji. */
.prijedlozi__c{
  font:600 13.5px var(--mono);color:var(--ink);white-space:nowrap;
  display:block;text-align:right;
}
/* Na desktopu sidrena stoji u jednom retku — prostora ima i lomljenje
   je bilo bez razloga (D-259). Na telefonu se lomi, inače bi stupac
   narastao na 190 px i stisnuo naziv proizvoda. */
.prijedlozi__c small{
  display:block;margin:2px 0 0 auto;
  font:400 10.5px/1.35 var(--mono);color:var(--muted);letter-spacing:0;
  white-space:nowrap;
}
/* Na telefonu u dva retka, ne tri: „Cijena na dan" / „10.09.2026.: 1,35 €".
   Za to drugi redak mora stati u jedan — 19 znakova pri 9,5 px je
   108 px, pa je granica 120 px (D-259). */
@media (max-width:860px){
  .prijedlozi__c small{white-space:normal;max-width:120px;font-size:9.5px}
}
.prijedlozi__sve{
  display:block;margin-top:4px;padding:11px 10px;
  border-top:1px solid var(--line);
  font:600 13.5px var(--ui);color:var(--green);
}
.prijedlozi__prazno{margin:0;padding:16px 12px;font-size:14px;color:var(--muted)}

/* ═══ Hero kao klizač ═════════════════════════════════════════════════
   Strelice i točkice stoje u samom heroju, pa se grana mijenja bez
   odlaska na policu ispod. Na mobitelu je hero niži — prije je zauzeo
   cijeli prvi zaslon, a poruka se nije vidjela bez listanja (D-230). */

.hero__upravljanje{
  position:absolute;left:0;right:0;bottom:16px;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding-inline:var(--rub-omota);
}
.hero__strelica{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  border-radius:var(--rs);color:#fff;cursor:pointer;
}
.hero__strelica:hover{background:rgba(255,255,255,.26);border-color:#fff}
.hero__tocke{display:flex;gap:8px;align-items:center}
.hero__tocke button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.4);cursor:pointer;transition:width .18s ease,background .18s ease;
}
.hero__tocke button[aria-selected="true"]{width:26px;border-radius:5px;background:var(--zlato)}

@media (max-width:900px){
  .hero .omot{padding-top:28px;padding-bottom:74px}
  /* Fotografija se mora vidjeti (D-401). Prije je stajala na 30 %
     prozirnosti i još ispod zastora od 72–88 %, pa je od plastenika
     ostala naznaka zelenog. Sada je slika puna, a zastor radi posao
     sam: najjači gore, gdje stoji naslov, pa popušta prema dnu gdje
     fotografija ima prostora. Donjih nekoliko posto opet potamni, zbog
     bijelih strelica i točkica klizača. */
  .hero .ph{width:100%;opacity:1}
  .hero .ph::after{
    background:linear-gradient(180deg,
      rgba(30,40,16,.86) 0%,
      rgba(30,40,16,.74) 38%,
      rgba(30,40,16,.56) 72%,
      rgba(30,40,16,.70) 100%);
  }
  .hero .poruke,.hero .herosearch{max-width:none}
  .hero h1{font-size:clamp(26px,7vw,34px)}
  .hero p{font-size:15px}
  .hero__upravljanje{bottom:12px}
}

/* ═══ oštri rubovi ════════════════════════════════════════════════════
   Isproba (D-249): cijela stranica bez zaobljenja. Tokeni `--r` i
   `--rs` su već 0; ovdje se gase mjesta koja nose tvrdu vrijednost.
   Kružne točkice klizača i galerije ostaju kružne — to su točke, ne
   plohe. Povratak: obrisati ovaj blok i vratiti --r:10px / --rs:6px. */
.alat__broj,
.polica a.stavka,
.polica .slika,
.mkulture .sl,
.mizb__sl,
.ohead .st,
.javka,
.plutaj__gumb,
.prijedlozi__sl,
.hero__tocke button,
.hero__tocke button[aria-selected="true"]{border-radius:0}

/* ═══ Kontakt ═════════════════════════════════════════════════════════
   Dvije trećine karta, trećina podaci. Karta se učitava tek na klik —
   Googleov okvir inače postavlja kolačiće bez pitanja (D-264). */
.kontakt__mreza{
  display:grid;grid-template-columns:2fr 1fr;gap:var(--razmak);
  align-items:stretch;margin-top:8px;
}
.kontakt__karta{
  position:relative;min-height:460px;
  background:var(--green-t);border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;
}
.kontakt__karta iframe{width:100%;height:100%;border:0;display:block}
.kontakt__karta.je-ucitana{display:block}
.kontakt__karta-ploha{
  display:grid;justify-items:center;gap:6px;text-align:center;padding:30px;
  color:var(--ink);
}
.kontakt__karta-ploha svg{color:var(--green)}
.kontakt__karta-ploha b{font:600 18px var(--ui)}
.kontakt__karta-ploha > span{font-size:14px;color:var(--muted)}
.kontakt__karta-ploha .gumb{margin-top:12px}
.kontakt__karta-ploha small{
  max-width:34ch;font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:4px;
}

.kontakt__podaci{
  background:var(--white);border:1px solid var(--line);
  padding:26px 26px 28px;
  display:flex;flex-direction:column;gap:26px;
}
.kontakt__podaci h2{
  font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;
}
.kontakt__adresa{margin:0;font-size:15.5px;line-height:1.6;color:var(--tekst)}
.kontakt__adresa strong{color:var(--ink)}
.kontakt__upute{
  display:inline-block;margin-top:12px;font:600 13.5px var(--ui);color:var(--green);
}
.kontakt__upute:hover{color:var(--green-d)}

.kontakt__radno{width:100%;border-collapse:collapse;font-size:14.5px}
.kontakt__radno th{
  text-align:left;font-weight:400;color:var(--tekst);
  padding:7px 0;border-bottom:1px solid var(--line);
}
.kontakt__radno td{
  text-align:right;font:500 14px var(--mono);color:var(--ink);
  padding:7px 0;border-bottom:1px solid var(--line);white-space:nowrap;
}
.kontakt__radno tr:last-child th,
.kontakt__radno tr:last-child td{border-bottom:0}
.kontakt__radno .je-zatvoreno{color:var(--muted);font-weight:400}

.kontakt__popis{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.kontakt__popis li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:center}
.kontakt__popis svg{color:var(--green)}
.kontakt__popis a{font:600 15.5px var(--mono);color:var(--ink);letter-spacing:-.01em}
.kontakt__popis a:hover{color:var(--green)}
.kontakt__popis em{
  grid-column:2;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:-6px;
}

@media (max-width:900px){
  .kontakt__mreza{grid-template-columns:1fr}
  .kontakt__karta{min-height:300px;order:2}
  .kontakt__podaci{order:1}
}

/* ═══ O nama ══════════════════════════════════════════════════════════
   Tamna ploha po klijentovu predlošku (D-266): lijevo krupan naslov s
   okomitom crtom i uvod, desno popis „Što radimo" s ikonama. Marka
   (#7FA03C) smije ovdje jer je ploha tamna — na svijetlom ide maslina
   (DESIGN_SYSTEM §1). */
/* Na naslovnici ploha ima razmak iznad sebe (D-311) — na stranici O
   nama dolazi odmah ispod zaglavlja, ovdje ispod Usluga. */
.onama__ploha--naslovnica{margin-top:clamp(28px,3.4vw,46px)}
.onama__ploha{
  background:var(--nav);color:#DDE3D8;
  padding:clamp(44px,6vw,76px) 0 clamp(48px,6.4vw,80px);
  margin-bottom:clamp(34px,4vw,52px);
}
.onama__ploha-mreza{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start;
}

.onama__glavno{border-left:5px solid var(--zlato);padding-left:clamp(20px,2.4vw,30px)}
.onama__naslov{
  font:700 clamp(34px,4.6vw,58px)/1.06 var(--disp);
  letter-spacing:-.025em;color:#fff;margin:0 0 20px;
}
.onama__vodeci{
  font-size:16.5px;line-height:1.66;color:#C3CCBD;margin:0 0 26px;max-width:56ch;
}
/* Ponovljena definicija iz istog razloga kao gore (D-322). */
.gumb--marka{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.gumb--marka:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* Naslov „Što radimo" je bijel (D-323) — marka na tamnoj plohi bila je
   pretiha. Oba zapisa jer naslovnica nosi h3, a stranica O nama h2. */
.onama__radimo h2,
.onama__radimo h3{
  font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin:6px 0 20px;
}
.onama__radimo ul{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.onama__radimo li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start}
.onama__radimo-ikona{color:var(--zlato);display:block;padding-top:2px}
.onama__radimo b{display:block;font:600 15.5px var(--ui);color:#fff}
.onama__radimo em{
  display:block;margin-top:5px;font-style:normal;
  font-size:13.5px;line-height:1.55;color:#A8B2A0;
}

.onama__brojke{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);margin:0 0 36px;
}
.onama__brojke > div{background:var(--white);padding:22px 24px}
.onama__brojke b{display:block;font:700 30px/1 var(--disp);color:var(--ink);letter-spacing:-.02em}
.onama__brojke span{display:block;margin-top:7px;font-size:13.5px;line-height:1.45;color:var(--muted)}

/* Tekst ide punom širinom u dva stupca, ne u jednom stupcu od 72ch:
   u uskom stupcu isti tekst naraste u visinu i stranica se spusti za
   dva ekrana (D-267, isto pravilo kao D-238). Lome se cijeli odjeljci,
   ne redci, pa naslov nikad ne ostane odvojen od svog teksta. */
/* `columns`, ne grid: u mreži je redak visok koliko najviši odjeljak,
   pa je ispod kraćeg ostajala rupa do sljedećeg retka. Stupci teksta
   se popune redom i sami se izbalansiraju (D-268). */
.onama__tekst{
  columns:2;column-gap:56px;
}
.onama__tekst > section{break-inside:avoid;margin:0 0 26px}
.onama__tekst > section:last-child{margin-bottom:0}
.onama__tekst h2{font-size:20px;margin:0 0 10px}
.onama__tekst p{font-size:15.5px;line-height:1.68;color:var(--tekst);margin:0 0 12px;max-width:62ch}
.onama__tekst p:last-child{margin-bottom:0}

@media (max-width:860px){
  .onama__tekst{columns:1}
}

.onama__kraj{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px;margin:44px 0 10px;padding:26px 28px;
  background:var(--green-t);border:1px solid #DCE8C6;
}
.onama__kraj b{display:block;font-size:17px;color:var(--ink)}
.onama__kraj span{display:block;margin-top:5px;font-size:14px;color:var(--tekst)}
.onama__kraj-radnje{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:860px){
  .onama__ploha-mreza{grid-template-columns:1fr;gap:34px}
  .onama__naslov br{display:none}
  .onama__brojke{grid-template-columns:1fr}
  .onama__kraj{flex-direction:column;align-items:flex-start}
  .onama__kraj-radnje .gumb{width:100%;text-align:center}
}

/* ═══ Savjeti — popis objava ══════════════════════════════════════════
   Po predlošku: glava s tražilicom, pa mreža kartica s fotografijom
   preko cijele plohe i bijelim okvirom pri dnu (D-265). */
.savjeti__glava{max-width:640px;margin:0 auto 34px;text-align:center;padding-top:10px}
.savjeti__glava .nadnaslov{
  display:inline-block;padding:5px 14px;
  background:var(--green-t);border:1px solid #DCE8C6;color:var(--green);
  margin-bottom:14px;
}
.savjeti__naslov{font-size:clamp(28px,3.4vw,40px);line-height:1.12;margin:0 0 14px}
.savjeti__vodeci{font-size:16px;line-height:1.62;color:var(--tekst);margin:0}
.savjeti__trazilica{display:flex;gap:10px;margin-top:22px}
.savjeti__trazilica input{
  flex:1;min-width:0;min-height:48px;padding:0 16px;
  border:1px solid var(--line2);background:var(--white);
  font:400 15px var(--ui);color:var(--ink);
}
.savjeti__trazilica input:focus{outline:0;border-color:var(--green)}
.savjeti__trazilica .gumb{flex:none;min-height:48px}

.savjeti__mreza{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:var(--razmak);
}
.savjet{min-width:0}
.savjet__veza{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:392px;padding:14px;color:inherit;overflow:hidden;
  background:var(--ink);
  transition:transform .16s ease;
}
.savjet__veza:hover{transform:translateY(-3px)}
.savjet__slika{
  position:absolute;inset:0;background-size:cover;background-position:center;
}
.savjet__slika--prazna{
  display:grid;place-items:center;background:var(--nav);color:#8FA86A;
}
/* Tamni preljev samo pri dnu — fotografija ostaje fotografija. */
.savjet__veza::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(20,24,15,.55) 0%,rgba(20,24,15,0) 46%);
}
.savjet__oznaka{
  position:relative;z-index:1;align-self:flex-start;
  margin-bottom:auto;
  padding:5px 11px;background:var(--white);
  font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);
}
.savjet__okvir{
  position:relative;z-index:1;
  background:var(--white);padding:15px 16px 12px;
  display:block;
}
.savjet__naslov{
  display:block;font:600 17px/1.28 var(--ui);color:var(--ink);
  letter-spacing:-.01em;
}
.savjet__sazetak{
  display:block;margin-top:7px;font-size:13.5px;line-height:1.5;color:var(--muted);
}
.savjet__dno{
  position:relative;z-index:1;
  background:var(--white);padding:0 16px 14px;
  display:flex;align-items:center;gap:8px;
  font:500 11.5px var(--mono);color:var(--muted);
  border-top:1px solid var(--line);margin-top:0;padding-top:12px;
}
.savjet__veza:hover .savjet__naslov{color:var(--green)}

@media (max-width:640px){
  .savjeti__glava{text-align:left}
  .savjeti__trazilica{flex-direction:column}
  .savjeti__trazilica .gumb{width:100%}
  .savjeti__mreza{grid-template-columns:1fr}
  .savjet__veza{min-height:340px}
}


/* Proizvod bez zalihe nema gumba, nego rečenicu (D-281). Prije je gumb
   stajao i ondje gdje kupnja nije moguća, a greška je stizala tek
   nakon klika — to je zavaravanje kupca, ne sitnica. */
.nema-na-zalihi{
  display:grid;gap:4px;margin:4px 0 0;
  padding:16px 18px;background:#FBEDEB;border:1px solid #EBC9C3;
}
.nema-na-zalihi b{font:600 15.5px var(--ui);color:#8C3322}
.nema-na-zalihi span{font-size:14px;color:#6E5A55}
.nema-na-zalihi a{color:#8C3322;font-weight:600;text-decoration:underline}


/* ──────────────────────────────────────────────────────────────────
   Tabularne znamenke (D-307)

   Jedan font nosi i tekst i brojke, pa poravnanje znamenki više ne
   dolazi od monospacea nego od ove postavke. Stoji na kraju datoteke
   jer skraćeni zapis `font:` na `body` poništava `font-variant-numeric`
   — pravilo prije njega ne bi preživjelo.
   ────────────────────────────────────────────────────────────────── */
html body{font-variant-numeric:tabular-nums}

/* Artikli na upit — staklenici (D-365). Umjesto gumba „Dodaj u košaricu"
   stoji poziv na upit; cijena iznad ostaje vidljiva. */
.upit{
  background:var(--green-t);border:1px solid #D9E7BF;border-radius:var(--r);
  padding:18px 20px;margin-top:4px;
}
.upit b{display:block;font-family:var(--disp);font-size:16px;color:var(--ink);margin-bottom:6px}
.upit p{margin:0 0 14px;font-size:14px;color:var(--tekst);max-width:56ch}
.upit__radnje{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.upit .sitnopis{display:block;margin-top:12px}

/* ═══ Cjenici (bazne cijene) ══════════════════════════════════════════
   Zakonska stranica od 17. 11. 2026. Ispis radi shortcode
   [pseno_cjenici] iz `mu-plugins/pseno-cjenici.php`, koji sa sobom nosi
   vlastiti inline stil s razredima `pc-*`. Taj se plugin ne dira
   (dogovor s klijentom), pa ova pravila samo nadjačavaju njegov stil.

   Dvije posljedice koje treba znati prije mijenjanja:
   1. Inline `<style>` stoji u tijelu stranice, dakle **poslije** ove
      datoteke. Kod jednake specifičnosti pobjeđuje on, pa su pravila
      ovdje pisana s `.stranica` ispred (jedan razred više) i s
      `!important` ondje gdje ga ima i plugin (boja poveznice, poravnanje
      stupca s datumom).
   2. Stil može preoblikovati, ali ne i preimenovati — naslov „Cjenik
      proizvoda" i rečenica „Još nema objavljenih cjenika." dolaze iz
      plugina.

   Odabrana je verzija A od tri ponuđene (D-368): ploha po prodajnom
   mjestu, najnoviji cjenik u zelenom okviru, ispod njega tablica svih
   objavljenih — tablica je zakonski dio i ostaje u svakom slučaju. */

.stranica .pc-w{max-width:none;margin:0}

/* uvodna rečenica: OIB, rok čuvanja, oblik datoteke */
.stranica .pc-u{
  max-width:78ch;margin:0 0 26px;opacity:1;
  color:var(--muted);font-size:14.5px;line-height:1.65;
}

/* jedno prodajno mjesto = jedna ploha */
.stranica .pc-s{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px 24px;margin:0 0 var(--razmak);
}
.stranica .pc-s h2{margin:0;font:600 19px/1.25 var(--disp);color:var(--ink);letter-spacing:-.01em}
.stranica .pc-s h2 strong{font-weight:600}
.stranica .pc-s h3{
  margin:26px 0 10px;font:600 11px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.stranica .pc-a{margin:6px 0 18px;opacity:1;color:var(--muted);font-size:13.5px}

/* najnoviji cjenik — istaknut, jer gotovo svi traže samo njega */
.stranica .pc-kk{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--razmak)}
.stranica .pc-k{
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--green-t);border:1px solid #D4E3B8;border-radius:var(--r);
  padding:16px 18px 18px;
}
.stranica .pc-kn{
  font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-d);opacity:1;margin:0 0 2px;
}
.stranica .pc-kd{
  font:400 14px var(--ui);color:var(--ink);opacity:1;margin:0 0 14px;
  font-variant-numeric:tabular-nums;
}
/* gumb „Preuzmi" izgleda kao svaki drugi gumb na stranici */
.stranica a.pc-b{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 22px;
  background:var(--gumb);color:#fff!important;border:1px solid var(--gumb);
  border-radius:var(--rs);font:600 14px/1 var(--ui);letter-spacing:.01em;
  transition:background .15s,border-color .15s;
}
.stranica a.pc-b:hover{background:var(--gumb-h);border-color:var(--gumb-h)}

/* tablica svih objavljenih cjenika — ista mjera kao tablica narudžbi */
.stranica .pc-t{
  width:100%;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);border-collapse:separate;border-spacing:0;
  overflow:hidden;font-size:14px;
}
.stranica .pc-t th{
  text-align:left;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);opacity:1;padding:12px 16px;border-bottom:1px solid var(--line);
}
.stranica .pc-t td{
  padding:13px 16px;border-bottom:1px solid var(--line);
  word-break:normal;overflow-wrap:anywhere;
}
.stranica .pc-t tr:last-child td{border-bottom:0}
.stranica .pc-t tbody tr:hover{background:#FAFAF6}
/* prvi redak je najnoviji cjenik — ista zelena nit kao okvir iznad */
.stranica .pc-t tbody tr:first-child td{box-shadow:inset 3px 0 0 var(--green-l)}

/* poveznica na datoteku: zelena, ne plava kao u pluginu */
.stranica .pc-t a.pc-d{
  color:var(--green)!important;text-decoration:none!important;
  display:inline-flex;align-items:flex-start;gap:8px;
  font-weight:500;line-height:1.45;
}
.stranica .pc-t a.pc-d:hover{color:var(--green-d)!important;text-decoration:underline!important}
.stranica .pc-t a.pc-d svg{flex:none;width:16px;height:16px;margin-top:3px;opacity:.8}

.stranica .pc-o{
  white-space:nowrap;width:160px;text-align:right!important;
  color:var(--muted);font-variant-numeric:tabular-nums;
}

/* prodajno mjesto bez objavljenih cjenika */
.stranica .pc-s > p:not([class]){
  margin:0;padding:14px 16px;background:var(--paper);
  border:1px dashed var(--line2);border-radius:var(--r);
  color:var(--muted);font-size:14px;
}

.stranica .pc-f{
  margin-top:22px;opacity:1;color:var(--muted);
  font:400 12.5px var(--mono);letter-spacing:.02em;
}

@media (max-width:640px){
  .stranica .pc-s{padding:18px 16px 20px}
  .stranica .pc-s h2{font-size:17px}
  .stranica .pc-t th,.stranica .pc-t td{padding-inline:12px}
  .stranica .pc-o{width:88px;white-space:normal}
  .stranica a.pc-b{width:100%}
}

/* ═══ Mapa stranice ═══════════════════════════════════════════════════
   Dva stupca na širokom zaslonu, jedan na mobitelu. Ponuda je dulja od
   ostatka pa stoji sama lijevo, a kraći popisi se slažu desno. */

.mapa__mreza{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--razmak);align-items:start}
.mapa__blok{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px 26px;
}
.mapa__blok h2{
  margin:0 0 16px;font:600 11px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.mapa__blok h2.razmak-gore{margin-top:28px}
.mapa__blok h3{margin:18px 0 8px;font:600 16px/1.3 var(--disp);color:var(--ink)}
.mapa__blok h3:first-of-type{margin-top:0}
.mapa__blok h3 a{color:var(--ink)}
.mapa__blok h3 a:hover{color:var(--green)}
.mapa__popis{list-style:none;margin:0;padding:0;columns:2;column-gap:22px}
.mapa__popis li{margin:0 0 6px;break-inside:avoid}
.mapa__popis a{font-size:14px;line-height:1.5}

@media (max-width:860px){
  .mapa__mreza{grid-template-columns:1fr}
}
@media (max-width:520px){
  .mapa__popis{columns:1}
  .mapa__blok{padding:18px 16px 20px}
}

/* ═══ Blagajna: poruka ne smije razmaknuti obrazac ════════════════════
   Sažetak narudžbe je pribijen u red 1 desnog stupca, a obrazac nema
   zadan red — pa kad se iznad pojavi poruka o grešci, ona zauzme red 1
   lijevo, obrazac padne u red 2, a visinu reda 1 određuje visoki
   sažetak. Rezultat: poruka gore, pa 350 px praznine, pa tek polja
   (D-391). Kad poruka postoji, i obrazac i sažetak idu u red 2, a
   poruka se proteže punom širinom iznad njih. Bez poruke ostaje stari
   raspored, pa nema praznog reda. */

form.checkout .woocommerce-NoticeGroup{grid-column:1 / -1;grid-row:1}
form.checkout:has(.woocommerce-NoticeGroup) #customer_details,
form.checkout:has(.woocommerce-NoticeGroup) #order_review_heading,
form.checkout:has(.woocommerce-NoticeGroup) #order_review{grid-row:2}

/* ═══ Potvrda narudžbe ════════════════════════════════════════════════
   Pet podataka zaglavlja (broj, datum, e-pošta, ukupno, plaćanje) do
   sada su bili goli popis različitih visina. Sada su jednake pločice u
   mreži, poravnate po dnu i vrhu, s oznakom iznad i vrijednošću ispod
   (D-392). */

.woocommerce-order{padding-bottom:20px}
/* Potvrda narudžbe u užem stupcu, po sredini (D-425): preko cijele
   širine omota redci su bili predugi, a brojke daleko od naziva. */
.woocommerce-order{max-width:820px;margin-left:auto;margin-right:auto}
/* Naslov stranice u istom stupcu, da ne stoji sam uz lijevi rub (D-426). */
body.woocommerce-order-received .stranica__naslov{max-width:820px;margin-left:auto;margin-right:auto}
.woocommerce-thankyou-order-received{
  margin:0 0 22px;font:600 17px/1.4 var(--disp);color:var(--ink);
}

ul.woocommerce-order-overview,
ul.order_details{
  list-style:none;margin:0 0 34px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--razmak);
  border:0;
}
ul.woocommerce-order-overview li,
ul.order_details li{
  display:flex;flex-direction:column;justify-content:flex-start;gap:8px;
  margin:0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);text-align:center;
  font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
ul.woocommerce-order-overview li strong,
ul.order_details li strong{
  font:600 16px/1.3 var(--disp);letter-spacing:-.01em;color:var(--ink);
  text-transform:none;overflow-wrap:anywhere;
}
/* Pločice s brojem, datumom, e-poštom… (D-426). WooCommerceov stil
   ostavlja plutanje, isprekidani desni rub i ::before/::after za
   čišćenje plutanja — u mreži ti pseudoelementi zauzmu ćelije, pa je
   prva pločica bila pomaknuta, a peta pala u novi red. */
ul.woocommerce-order-overview::before,
ul.woocommerce-order-overview::after{content:none;display:none}
/* Četiri pločice u mreži 2 × 2: broj narudžbe, datum, način plaćanja,
   ukupno — po klijentovoj odluci; e-pošta se ne prikazuje (D-426). */
ul.woocommerce-order-overview{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.woocommerce ul.woocommerce-order-overview li,
ul.woocommerce-order-overview li{
  float:none;margin:0;padding:16px 14px;border:1px solid var(--line);border-right:1px solid var(--line);
  justify-content:center;min-width:0;line-height:1.35;
}
ul.woocommerce-order-overview li.woocommerce-order-overview__email{display:none}
/* WooCommerce zadnjoj pločici skida rub (li:last-of-type{border:none}). */
.woocommerce ul.woocommerce-order-overview li:last-of-type,
ul.woocommerce-order-overview li:last-of-type{border:1px solid var(--line)}
ul.woocommerce-order-overview li.woocommerce-order-overview__order{order:1}
ul.woocommerce-order-overview li.woocommerce-order-overview__date{order:2}
ul.woocommerce-order-overview li.woocommerce-order-overview__payment-method{order:3}
ul.woocommerce-order-overview li.woocommerce-order-overview__total{order:4}
ul.woocommerce-order-overview li strong{font-size:15px;margin-top:2px}

/* Detalji narudžbe — isti raspored kao e-poruka kupcu (D-424):
   artikl · količina · iznos, mjera reza i sidrena cijena ispod naziva,
   tamna traka za ukupno. Vrijedi i u Mojem računu. */
.woocommerce-order-details__title{font:600 22px/1.25 var(--disp);color:var(--ink);letter-spacing:-.01em;margin:34px 0 14px}
.woocommerce table.ostavke,
table.ostavke{
  width:100%;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  border-collapse:separate;border-spacing:0;overflow:hidden;margin:0;
}
table.ostavke thead th{
  text-align:left;font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:13px 18px;border-bottom:1px solid var(--line);background:var(--paper);
}
table.ostavke thead th.ostavka__kol{text-align:center;width:130px}
table.ostavke thead th.product-total{text-align:right;width:130px}
table.ostavke tbody td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top;font-size:14.5px;color:var(--tekst)}
table.ostavke tbody tr:last-child td{border-bottom:2px solid var(--line2, #D6D6CC)}
.ostavka__naziv{display:block;font:600 15px/1.4 var(--ui);color:var(--ink)}
.ostavka__naziv a{color:var(--ink);text-decoration:none}
.ostavka__naziv a:hover{color:var(--green)}
.ostavka__mjera{display:block;margin-top:3px;font:500 13px/1.4 var(--ui);color:var(--tekst)}
.ostavka__mjera i{font-style:normal;color:#B7BDB2;margin:0 4px}
table.ostavke .wc-item-meta{list-style:none;margin:4px 0 0;padding:0;font-size:12.5px;color:var(--muted)}
table.ostavke .wc-item-meta li{margin:0}
table.ostavke .wc-item-meta p{display:inline;margin:0}
table.ostavke .wc-item-meta-label{font-weight:500;color:var(--muted)}
.ostavka__rez{
  display:inline-block;margin-top:8px;padding:6px 10px;
  background:var(--warn-t);border:1px solid #E6D6AC;color:var(--warn);
  font:600 12.5px/1.3 var(--ui);
}
.ostavka__sidrena{display:block;margin-top:6px;font:400 11.5px/1.5 var(--ui);color:var(--muted)}
td.ostavka__kol{text-align:center;white-space:nowrap}
.ostavka__pil{
  display:inline-block;padding:6px 10px;background:var(--green-t);border:1px solid #D4E3B8;
  font:600 13px/1.2 var(--ui);color:#2A3618;
}
.ostavka__komada{display:block;margin-top:5px;font-size:11px;color:var(--muted)}
table.ostavke tbody td.product-total{text-align:right;white-space:nowrap;font:600 15px/1.35 var(--ui);color:var(--ink)}

table.ostavke tfoot th,
table.ostavke tfoot td{padding:10px 18px;border:0;font-size:13.5px;color:var(--tekst);background:var(--paper)}
table.ostavke tfoot th{text-align:left;font-weight:500}
table.ostavke tfoot td{text-align:right;white-space:nowrap}
table.ostavke tfoot tr:first-child th,
table.ostavke tfoot tr:first-child td{padding-top:16px}
table.ostavke tfoot .shipped_via{font-size:12.5px;color:var(--muted)}
table.ostavke tfoot tr.ostavke__zbroj--order_total th,
table.ostavke tfoot tr.ostavke__zbroj--order_total td{
  background:var(--ink);color:#fff;padding:15px 18px;font-weight:600;
}
table.ostavke tfoot tr.ostavke__zbroj--order_total td{font-size:19px;letter-spacing:-.01em}
table.ostavke tfoot tr.ostavke__zbroj--order_total td .woocommerce-Price-amount{color:#fff}
table.ostavke tfoot tr.ostavke__zbroj--order_total small{color:rgba(255,255,255,.7)}
table.ostavke tfoot tr.ostavke__napomena th,
table.ostavke tfoot tr.ostavke__napomena td{background:var(--white);border-top:1px solid var(--line);padding-top:14px;padding-bottom:14px}
table.ostavke tfoot tr.ostavke__napomena td{text-align:left;white-space:normal}

/* Mobitel (D-426): naziv preko cijele širine, ispod njega količina
   lijevo i iznos desno — u tri stupca naziv je imao 70 px i lomio se
   u četiri retka. */
@media (max-width:620px){
  table.ostavke thead{display:none}
  table.ostavke tbody tr{display:grid;grid-template-columns:1fr auto;align-items:center;border-bottom:1px solid var(--line)}
  table.ostavke tbody tr:last-child{border-bottom:2px solid var(--line2)}
  table.ostavke tbody td{border:0 !important;padding:0 14px}
  table.ostavke tbody td.product-name{grid-column:1/-1;padding-top:14px;padding-bottom:10px}
  table.ostavke tbody td.ostavka__kol{text-align:left;padding-bottom:14px;display:flex;align-items:center;gap:10px}
  table.ostavke tbody td.ostavka__kol .ostavka__komada{margin:0}
  table.ostavke tbody td.product-total{padding-bottom:14px}
  table.ostavke tbody tr.product-purchase-note{display:block}
  table.ostavke tfoot tr{display:flex;justify-content:space-between;gap:12px}
  table.ostavke tfoot th,
  table.ostavke tfoot td{padding-left:14px;padding-right:14px}
  table.ostavke tfoot tr.ostavke__napomena{display:block}
  table.ostavke tfoot tr.ostavke__napomena th,
  table.ostavke tfoot tr.ostavke__napomena td{display:block}
  .ostavka__rez{white-space:normal}
}

/* Podaci o kupcu — jedan okvir, pa zauzima punu širinu. */
.narudzba-kupac{margin-top:30px}
.narudzba-kupac .woocommerce-column__title{font:600 17px/1.3 var(--disp);color:var(--ink);margin:0 0 14px}
.narudzba-kupac address{
  font-style:normal;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:18px 20px;line-height:1.75;font-size:14.5px;max-width:52ch;
}
.narudzba-kupac address p{margin:8px 0 0}

@media (max-width:520px){
  ul.woocommerce-order-overview,
  ul.order_details{grid-template-columns:1fr 1fr}
}