/* =============================================================
   VIZUELNI JEZIK — usklađen s Hurom brendom
   -------------------------------------------------------------
   Posmatrano na hurom-europe.com (13.09.2026):

     Tipografija   Instrument Sans za tekst (dostupan na Google
                   Fonts), NuromNext za naslove — NuromNext je
                   Huromov vlastiti font i mora se tražiti od njih.
                   Do tada koristimo Instrument Sans za sve, što je
                   njihov vlastiti izbor za tekst.

     Naslovi       namjerno mali i tanki — 24px, težina 500.
                   Nema velikih serifnih naslova.

     Dugmad        obični tekst, bez pozadine, bez zaobljenja.

     Boje          bijela i topla bijela #F9F7F5, crn tekst,
                   zelena samo kao akcent.

     Sekcije       preko cijele širine, vođene fotografijom,
                   tekst preko slike. Malo okvira, malo sjenki.

   ZAKLJUČAK: njihov dizajn nose fotografije, ne dekoracija.
   Zato je ovdje sve svedeno — da slike dođu do izražaja.
   ============================================================= */

:root {
  /* --------------------------------------------------- boje */
  --ink:        #000000;
  --ink-soft:   #3a3a3a;
  --ink-mute:   #767676;
  --line:       #e2e0dc;
  --line-soft:  #efedea;
  --paper:      #ffffff;
  --paper-warm: #f9f7f5;   /* njihova topla bijela */
  --paper-deep: #f2efec;
  --green:      #00994d;   /* približno logotipu — zamijeniti tačnom iz brand smjernica */
  --green-deep: #00703a;
  --green-soft: #e8f4ed;
  --accent:     #c0491f;   /* samo za sniženja */

  /* --------------------------------------------------- tipografija */
  --font-display: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-body:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Kad dobiješ NuromNext od Huroma, ubaci ga ovdje kao prvi u nizu:
     --font-display: 'NuromNext', 'Instrument Sans', sans-serif;  */

  /* --------------------------------------------------- ritam */
  /* 4vw na telefonu ispadne 15 px, pa clamp uzima donju granicu.
     18 px je bilo tijesno — tekst je gotovo dodirivao ivicu ekrana. */
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1440px;
  --sec-y: clamp(56px, 7vw, 104px);

  --radius: 0px;          /* njihov dizajn ne koristi zaobljenja */
  --radius-lg: 0px;
  --shadow: none;
  --shadow-lg: 0 10px 40px rgba(0,0,0,.07);
  --ease: cubic-bezier(.22,.61,.36,1);
}


/* =============================================================
   KOMPOZICIJA — sloj koji nosi vizuelni identitet
   -------------------------------------------------------------
   Ovo je odgovor na „sirovo je". Problem nije bio nedostatak
   slika nego nedostatak ritma: sve je bilo iste širine, istog
   razmaka i iste težine, pa se ništa nije isticalo.

   Princip: naizmjenično PUNO i PRAZNO.
   Krupan kadar preko cijelog ekrana → tišina → tekst u uskoj
   koloni → tišina → mreža proizvoda. Oko dobije gdje da stane.

   Fotografija ovdje nije ukras nego nosač — zato ide preko
   cijele širine, bez okvira, bez sjenke, bez zaobljenja.
   ============================================================= */

/* ------------------------------------------------ puna širina */
/* 100vw računa i traku za pomjeranje, a sadržaj stranice je za
   njenu širinu uži — zato je svaka `.bleed` sekcija virila oko 8 px
   udesno i stranica je dobijala vodoravnu traku.

   `overflow-x: clip` na korijenu to odsijeca. NE koristiti
   `hidden`: on pravi novi okvir za pomjeranje, pa `position:
   sticky` na panelu proizvoda prestaje raditi. `clip` ne pravi.

   U lokalnom pregledu se ovo nije vidjelo jer Playwright nema
   vidljivu traku za pomjeranje, pa je 100vw bilo tačno jednako
   širini stranice.

   Samo pravilo stoji uz ostala `html` pravila u main.css, da se
   isti selektor ne pojavljuje u oba fajla. */

.bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  position: relative;
}

/* ================================================== HERO ===== */
/* Visina prati izvorni materijal, ne visinu ekrana.
   main_vis_01_PC.jpg je 1920×720 → odnos 2.67:1, isto kao kod
   Huroma. Ranije je bilo vezano za vh pa je hero ispadao znatno
   viši od njihovog i gurao ostatak stranice ispod pregiba. */
.hero {
  position: relative;
  aspect-ratio: 1920 / 720;
  min-height: 400px;
  max-height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--paper-deep);
}
.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__media--video { pointer-events: none; }

/* Čitljivost teksta preko fotografije bez zamućivanja slike:
   gradijent koji tamni samo donju trećinu. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 26%,
    rgba(0,0,0,.06) 52%, rgba(0,0,0,0) 72%);
}
.hero__in {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gutter);
  padding-block: clamp(36px, 6vw, 76px);
  color: #fff;
}
.hero__eyebrow {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; opacity: .82; margin: 0 0 14px;
}
.hero__naslov {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 5.2vw, 62px); line-height: 1.04;
  letter-spacing: -.022em; margin: 0 0 18px; max-width: 16ch;
  text-wrap: balance;
}
.hero__uvod {
  font-size: clamp(15px, 1.45vw, 19px); line-height: 1.55;
  margin: 0 0 28px; max-width: 46ch; opacity: .92;
}
.hero__akcije { display: flex; flex-wrap: wrap; gap: 12px; }

/* Kontrola videa — mala, nenametljiva, gore desno */
.hero__toggle {
  position: absolute; z-index: 3; top: 20px; right: max(20px, var(--gutter));
  width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.35);
  color: #fff; backdrop-filter: blur(6px); transition: background .2s var(--ease);
}
.hero__toggle:hover { background: rgba(0,0,0,.55); }
.hero__toggle svg { width: 19px; height: 19px; }

@media (max-width: 700px) {
  /* Na uskom ekranu 2.67:1 bi bio pretanak da primi naslov,
     pa prelazimo na uspravniji kadar — Hurom radi isto. */
  .hero { aspect-ratio: 3 / 4; min-height: 460px; max-height: 620px; }
  .hero__naslov { max-width: 100%; }
}

/* ============================================ KADAR + TEKST == */
/* Fotografija i tekst jedno uz drugo, ali fotografija ide do
   ivice ekrana — to je ono što daje „skup" utisak. */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
}
.duo__slika { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.duo__slika img { width: 100%; height: 100%; object-fit: cover; }
.duo__tekst { padding-block: clamp(20px, 4vw, 48px); }
.duo__tekst .h2 { max-width: 18ch; text-wrap: balance; }
.duo__tekst p { color: var(--ink-soft); max-width: 46ch; }

/* obrnut raspored — slika desno */
.duo--obrnuto .duo__slika { order: 2; }

/* varijanta gdje slika ide do ivice ekrana */
.duo--ivica { max-width: none; padding-inline: 0; }
.duo--ivica .duo__tekst { padding-inline: var(--gutter); }
@media (min-width: 981px) {
  .duo--ivica .duo__slika { aspect-ratio: 1 / 1; }
}

@media (max-width: 980px) {
  .duo { grid-template-columns: 1fr; gap: 0; }
  .duo--obrnuto .duo__slika { order: 0; }
  .duo__slika { aspect-ratio: 16 / 10; }
  .duo__tekst { padding-inline: var(--gutter); padding-block: 28px 8px; }
}

/* ============================================== KRUPAN KADAR = */
/* Jedna fotografija preko cijele širine s tekstom preko nje.
   Koristi se kao predah između gustih sekcija. */
.kadar {
  position: relative;
  min-height: clamp(320px, 52vh, 560px);
  display: flex; align-items: center;
  overflow: hidden;
}
.kadar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.kadar::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 100%);
}
.kadar--desno::after {
  background: linear-gradient(270deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 100%);
}
.kadar--centar::after { background: rgba(0,0,0,.34); }
.kadar__in {
  position: relative; z-index: 2; color: #fff;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
}
.kadar__in > * { max-width: 34ch; }
.kadar--desno .kadar__in { text-align: right; }
.kadar--desno .kadar__in > * { margin-inline-start: auto; }
.kadar--centar .kadar__in { text-align: center; }
.kadar--centar .kadar__in > * { margin-inline: auto; }
.kadar__naslov {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(23px, 3.2vw, 40px); line-height: 1.12;
  letter-spacing: -.015em; margin: 0 0 14px; text-wrap: balance;
}
.kadar p { font-size: clamp(14.5px, 1.3vw, 17px); opacity: .9; margin: 0 0 22px; }
/* `.kadar__in > *` sve u traci sužava na 34ch — dobro za naslov,
   pretijesno za rečenicu: na širokom ekranu se lomila na svakih
   tridesetak znakova i red je ispadao krpav. Naslov ostaje uzak. */
.kadar__in > p:not(.hero__eyebrow) { max-width: 48ch; }

/* ================================================= TRAKA ===== */
/* Vodoravni niz portretnih fotografija — za recepte i „u
   upotrebi". Na mobitelu se prevlači prstom. */
.traka { position: relative; }
.traka__niz {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(212px, 23vw, 310px);
  gap: clamp(10px, 1.4vw, 18px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: var(--gutter);
  padding-block: 4px 10px;
}
.traka__niz::-webkit-scrollbar { display: none; }
.traka__stavka { scroll-snap-align: start; }
.traka__slika {
  aspect-ratio: 1 / 1;           /* isti kvadrat kao kartice recepata */
  overflow: hidden; background: var(--paper-deep);
}
.traka__slika img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.traka__stavka:hover .traka__slika img { transform: scale(1.04); }
.traka__naslov { font-size: 15px; font-weight: 500; margin: 12px 0 3px; }
.traka__meta { font-size: 13px; color: var(--ink-mute); }

/* ============================================== OSOBINE ====== */
/* Ikona + kratak tekst. Namjerno bez kartica i okvira — samo
   razmak i tanka linija. */
/* auto-fit je na širokom ekranu davao 4 kolone, pa je peta
   osobina ostajala sama u novom redu uz veliku prazninu. Broj
   kolona sada prati broj stavki: 5 u jednom redu na širokom,
   3 na srednjem, 2 na uskom. */
.osobine {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(22px, 2.6vw, 40px);
}
@media (min-width: 700px)  { .osobine { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .osobine { grid-template-columns: repeat(5, 1fr); } }
/* Stavka je imala samo ikonu i tekst, sa 14 px praznine između —
   pet ikona je lebdjelo iznad pet rečenica, bez ičega što ih veže
   u red. Tanka crta iznad svake ih čini spiskom, a ne raspršenim
   znakovima; ikona se u isto vrijeme primakla svom tekstu. */
.osobina {
  border-top: 1px solid var(--line);
  padding-top: clamp(14px, 1.4vw, 20px);
}
.osobina__ik {
  width: 24px; height: 24px; color: var(--green-deep);
  margin-bottom: 11px; display: block;
}
.osobina h3 { font-size: 16px; font-weight: 500; margin: 0 0 7px; }
.osobina p { font-size: 15px; line-height: 1.58; color: var(--ink-soft); margin: 0; }

/* traka povjerenja — uska, uz dno */
.povjerenje {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
  border-block: 1px solid var(--line-soft);
  padding-block: clamp(22px, 2.8vw, 34px);
}
.povjerenje__st { display: flex; align-items: flex-start; gap: 12px; }
.povjerenje__st svg { width: 21px; height: 21px; flex: none; color: var(--green-deep); margin-top: 1px; }
.povjerenje__st b { display: block; font-size: 14px; font-weight: 500; }
.povjerenje__st span { font-size: 13px; color: var(--ink-mute); }

/* ================================================ NASLOVI ==== */
/* Zaglavlje sekcije: mali nadnaslov, veći naslov, po potrebi
   link desno. Isti obrazac svuda — to je ono što ujednačuje. */
.zagl {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: clamp(26px, 3.2vw, 46px);
}
.zagl__l { min-width: 0; }
.zagl .eyebrow { margin-bottom: 10px; }
.zagl h2 { margin: 0; max-width: 22ch; text-wrap: balance; }
.zagl__d { flex: none; padding-bottom: 4px; }
@media (max-width: 640px) {
  .zagl { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ============================================ IKONE općenito = */
.ik { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; fill: none; }

/* =============================================== RITAM ======= */
/* Veći razmaci nego prije — disanje je pola dizajna. */
.section--zracno { padding-block: clamp(72px, 9vw, 136px); }
.section--tijesno { padding-block: clamp(34px, 4vw, 56px); }

/* Uska kolona za tekst koji se čita, ne skenira */
.kolona { max-width: 60ch; margin-inline: auto; text-align: center; }
.kolona p { color: var(--ink-soft); }

/* ============================================ FOTO MREŽA ===== */
/* Dvije kvadratne fotografije jedna uz drugu, bez razmaka —
   za 2048×2048 kadrove. */
.par {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.par figure { margin: 0; position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.par img { width: 100%; height: 100%; object-fit: cover; }
.par figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(16px, 2.4vw, 30px); color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
  font-size: clamp(15px, 1.6vw, 20px); font-weight: 500; line-height: 1.25;
}
@media (max-width: 700px) { .par { grid-template-columns: 1fr; } }

/* ========================================== SLIKA PLACEHOLDER  */
/* Dok materijal ne stigne na server, ne smije zjapiti prazno —
   umjesto slomljene slike stoji mirna podloga. */
.foto-fallback {
  background: var(--paper-deep);
  display: grid; place-items: center;
  color: var(--ink-mute); font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase;
}

/* ============================================ KARTICE RECEPATA */
/* Fotografija nosi karticu, tekst ispod nje bez okvira.
   Kvadrat 1:1 — isti format koji Hurom koristi na svojoj
   stranici recepata (izmjereno: 364×364).

   Kartice nisu poravnate u ravnu liniju: svaka druga je spuštena
   za nekoliko desetina piksela. To razbija mrežu i oko lakše
   prelazi preko nje. Na uskom ekranu se poravnanje vraća, jer u
   jednoj koloni pomak nema smisla. */
.rgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
  padding-bottom: 40px;          /* prostor za spuštene kartice */
}
.rgrid > *:nth-child(even) { transform: translateY(36px); }
@media (max-width: 700px) {
  .rgrid > *:nth-child(even) { transform: none; }
  .rgrid { padding-bottom: 0; }
}
.rcard {
  display: block;
  background: none;
  border: 0;
  padding: 0;
}
.rcard__slika {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper-deep);
  margin-bottom: 14px;
}
/* Ako recept nema fotografiju — mirna podloga, ne slomljena slika */
.rcard__slika--prazna { background: var(--paper-warm); }
.rcard__slika img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.rcard:hover .rcard__slika img { transform: scale(1.045); }
.rcard__telo { display: block; }
.rcard__kat {
  display: block; font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 7px;
}
.rcard__naslov {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.22;
  margin: 0 0 9px; letter-spacing: -.005em;
}
.rcard:hover .rcard__naslov { text-decoration: underline; text-underline-offset: 3px; }
.rcard__opis {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
  margin: 0 0 9px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rcard__meta { font-size: 13px; color: var(--ink-mute); }

/* ======================================== FILTER KATEGORIJA ===
   Red pločica s ikonom i nazivom, aktivna u zelenoj.
   Napomena o oblicima: u tokens.css sam bio postavio --radius: 0
   jer njihove sekcije nemaju zaobljenja. Ali pločice kategorija
   i oznake NA fotografijama kod njih JESU zaobljene. Zato ovdje
   uvodim poseban radijus samo za te elemente — ostatak ostaje
   pravougaon.                                                  */
:root { --radius-plocica: 12px; --radius-oznaka: 999px; }

/* Pločice kategorija — vodoravne, ime uz ikonu.
   -------------------------------------------------------------
   Ranije: uspravna pločica sa ikonom, ime ISPOD nje, izvan okvira.
   Dva problema. Prvo, pločice su se u flex redu razvlačile do
   visine najviše stavke, pa su umjesto kvadrata ispadali prazni
   uspravni pravougaonici sa ikonicom u sredini. Drugo, srpska
   imena kategorija su duga („Sorbet i deserti", „Za kožu i kosu")
   pa su se lomila u dva reda i red je ispadao krivudav.

   Sada je ime UNUTAR pločice, uz ikonu. Pločica je široka onoliko
   koliko joj treba, visina je svima ista, a duga imena više ništa
   ne pomjeraju. */
.filtri {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.filtar {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 13px;
  background: var(--paper-warm);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.filtar:hover { background: var(--paper-deep); color: var(--ink); }
.filtar svg { width: 19px; height: 19px; flex: none; }
.filtar__ime { font-size: 14px; line-height: 1; }
.filtar[aria-current="true"] {
  background: var(--green-soft); border-color: var(--green);
  color: var(--green-deep); font-weight: 500;
}

@media (max-width: 620px) {
  /* Na telefonu red ne prelama nego se prevlači prstom — osam
     pločica u dva-tri reda pojede pola ekrana prije prvog recepta. */
  .filtri {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 4px;
    /* da prva i zadnja pločica ne budu zalijepljene za ivicu */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .filtri::-webkit-scrollbar { display: none; }
  .filtar { flex: none; }
}

/* Oznaka kategorije preko fotografije — gore lijevo, zaobljena */
.rcard__slika { position: relative; }
.rcard__oznaka {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.94);
  border-radius: var(--radius-oznaka);
  padding: 5px 12px 5px 9px;
  font-size: 12px; font-weight: 500; color: var(--ink);
  backdrop-filter: blur(4px);
}
.rcard__oznaka svg { width: 14px; height: 14px; stroke-width: 1.5; }

/* Red iznad mreže: ukupan broj lijevo, radnje desno */
.mreza-vrh {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.mreza-vrh__broj { font-size: 14px; color: var(--ink-mute); margin: 0 0 6px; }

/* =============================================================
   NAJAVA — privremeni sloj „uskoro u Srbiji"
   -------------------------------------------------------------
   Stoji dok sajt ne krene sa prodajom. Namjerno je izveden u
   CSS-u i JS-u, bez diranja stranica: kad dođe vrijeme da se
   ukloni, briše se jedan blok u sajt.js i ovaj ovdje — nijedna
   stranica se ne mijenja.

   Prikazuje se jednom po poseti (sessionStorage), pa posetilac
   koji pregleda deset stranica ne dobija poruku deset puta.
   ============================================================= */
.najava {
  position: fixed; inset: 0; z-index: 9998;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 40px);
  background: rgba(18, 20, 18, .55);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.najava[data-otvoren="true"] { opacity: 1; visibility: visible; }

.najava__okvir {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--paper);
  transform: translateY(10px);
  transition: transform .35s var(--ease);
}
.najava[data-otvoren="true"] .najava__okvir { transform: none; }

.najava__slika { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-deep); }
.najava__slika img { width: 100%; height: 100%; object-fit: cover; display: block; }
.najava__slika::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 60%);
}

.najava__telo { padding: clamp(22px, 4vw, 40px); text-align: center; }
.najava__logo { height: 26px; width: auto; margin: 0 auto 20px; display: block; }
.najava__nad {
  font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--green-deep); font-weight: 600; margin: 0 0 12px;
}
.najava__naslov {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(23px, 3.6vw, 34px); line-height: 1.15;
  letter-spacing: -.015em; margin: 0 0 14px; text-wrap: balance;
}
.najava__tekst {
  font-size: clamp(14.5px, 1.4vw, 16px); line-height: 1.65;
  color: var(--ink-soft); margin: 0 auto 10px; max-width: 46ch;
}
.najava__tekst:last-of-type { margin-bottom: 26px; }
.najava__tekst b { color: var(--ink); font-weight: 600; }

.najava__akcije { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.najava__akcije .btn { min-width: 150px; justify-content: center; }

.najava__x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px; display: grid; place-items: center;
  background: rgba(255,255,255,.92); border: 0; color: var(--ink);
  border-radius: 999px; cursor: pointer;
  transition: background .2s var(--ease);
}
.najava__x:hover { background: #fff; }
.najava__x svg { width: 17px; height: 17px; }

.najava__sitno {
  font-size: 12.5px; color: var(--ink-mute);
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.najava__sitno a { border-bottom: 1px solid var(--line); }
.najava__sitno a:hover { border-color: var(--ink); }

@media (max-width: 560px) {
  .najava__slika { aspect-ratio: 4 / 3; }
}

/* ========================================= STRANICA PROIZVODA */
/* Panel s cijenom prati skrolovanje dok se gleda galerija —
   posjetilac ne mora da se vraća gore da vidi cijenu ili boju. */
@media (min-width: 981px) {
  .pdp__panel { position: sticky; top: 96px; align-self: start; }
}

/* Garancija, dostava, servis — ispod dugmadi, sitno i mirno.
   Ovo su pitanja koja kupac postavi prije nego se odluči. */
.pdp__jamstva {
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 14px;
}
.pdp__jamstvo { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; }
.pdp__jamstvo svg { width: 19px; height: 19px; flex: none; color: var(--green-deep); margin-top: 1px; }
.pdp__jamstvo b { display: block; font-weight: 600; font-size: 14px; margin-bottom: 1px; }
.pdp__jamstvo span { color: var(--ink-mute); }

/* Sadržaj pakovanja — mreža s kvačicama umjesto gole liste.
   Kod dvanaest stavki lista postaje zid teksta. */
.pakovanje {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2px 32px;
}
.pakovanje li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
}
.pakovanje svg { width: 17px; height: 17px; flex: none; color: var(--green); margin-top: 3px; }

/* Specifikacije unutar duo-bloka — uže, bez vanjskog okvira */
.duo__tekst .spectable { width: 100%; font-size: 14.5px; }
.duo__tekst .spectable th { width: 46%; font-weight: 500; color: var(--ink-mute); }

/* ============================================ PRIČA O PROIZVODU */
/* Hurom za svaki model ima svoj niz sekcija: nadnaslov, naslov,
   rečenica, pa krupna fotografija preko cijele širine. Kod nas je
   do sada stranica proizvoda bila galerija + tabela, ista za sve.

   Ritam je isti kao na ostatku sajta — široko, pa tiho, pa usko —
   samo što je ovdje sadržaj vezan za jedan model.

   Fotografija ide u odnosu 16:9 na širokom ekranu i 4:5 na
   telefonu, jer Huromovi PC i MO kadrovi upravo tako i jesu
   snimljeni (isti motiv, drugačiji rez). Zato dva <source>-a, a
   ne jedna slika razvučena na oba. */

.prica-p { display: block; }

/* Uvod — ključni kadar modela.
   -------------------------------------------------------------
   Ranije je ovdje stajala traka `.kadar` sa tekstom PREKO slike i
   fiksnom visinom (52vh). Huromovi ključni kadrovi su u odnosu
   3:2, a traka je bila 3,7:1 — slika se sjekla po visini i od
   kadra je ostajala sredina. Zato tekst ide IZNAD, a fotografija
   se prikazuje cijela, u svom odnosu. */
/* Sekcija s osobinama ima svoj donji razmak, a uvod je imao i
   svoj gornji — zajedno oko 190 px praznine prije prvog
   nadnaslova. Ovdje se skraćuje, a sekciji ispred se donji
   razmak gasi kad iza nje odmah slijedi priča. */
.section:has(+ .prica-p) { padding-bottom: 0; }
.prica-p__uvod { padding-top: clamp(20px, 2.4vw, 40px); }
.prica-p__uvod .prica-p__naslov { font-size: clamp(26px, 3.3vw, 42px); }

.prica-p__sek { padding-block: clamp(56px, 6vw, 92px) 0; }
.prica-p__sek:last-child { padding-bottom: clamp(56px, 6vw, 92px); }

/* Svijetla sekcija nema donji razmak — njega daje gornji razmak
   sljedeće. To radi dok su obje bijele. Ali kad iza nje dolazi
   tamna traka, taj razmak je CRN: bijeli tekst završi i odmah
   počne crno polje. Na telefonu je izgledalo kao da je rečenica
   zalijepljena za sljedeći blok. Zato ovdje sekcija dobija i
   vlastiti donji razmak. */
.prica-p__sek:has(+ .prica-p__sek--tamno),
.prica-p__sek:has(+ .standard),
.prica-p__sek:has(+ .prica-p__video) { padding-bottom: clamp(44px, 5vw, 72px); }

.prica-p__zagl {
  max-width: 760px;
  /* Donja granica podignuta sa 28 na 34 px: na telefonu je
     fotografija preko cijele širine kretala prebrzo iza teksta. */
  margin: 0 auto clamp(34px, 3.5vw, 48px);
  padding-inline: var(--gutter);
  text-align: center;
}
.prica-p__nad {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-deep); margin: 0 0 12px; font-weight: 600;
}
.prica-p__naslov {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.9vw, 38px);
  line-height: 1.2; margin: 0 0 14px; font-weight: 500;
}
.prica-p__tekst {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65; color: var(--ink-soft); margin: 0;
}

/* <picture> je po zadanom inline element. Slika unutra sa
   height:100% onda nema od čega da računa visinu, pa ispadne u
   izvornoj veličini i razbije raspored. Zato svaki <picture> u
   ovom bloku izričito postaje blok koji popunjava svoj okvir. */
.prica-p picture { display: block; width: 100%; height: 100%; }

.prica-p__kadar { display: block; background: var(--paper-deep); }
.prica-p__kadar img {
  width: 100%; height: auto; display: block;
}

/* Tamna sekcija — Huromovi renderi puža su na crnoj pozadini, pa
   bijeli okvir oko njih izgleda kao greška u štampi. */
.prica-p__sek--tamno { background: #0b0b0b; color: #fff; padding-bottom: clamp(48px, 6vw, 92px); }
.prica-p__sek--tamno .prica-p__naslov { color: #fff; }
.prica-p__sek--tamno .prica-p__tekst { color: #c9c9c9; }
.prica-p__sek--tamno .prica-p__nad { color: #6ee2a4; }
.prica-p__sek--tamno .prica-p__kadar { background: #0b0b0b; }

/* Podsekcije — dvije do tri manje stavke ispod glavnog kadra. */
.prica-p__pod {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  max-width: var(--maxw);
  margin: clamp(28px, 3.5vw, 48px) auto 0;
  padding-inline: var(--gutter);
}
/* Jedna podstavka razvučena preko cijelog reda izgleda kao greška
   u prelomu — sama sebi pravi prazninu s obje strane. */
.prica-p__pod--jedan { grid-template-columns: minmax(0, 680px); justify-content: center; }

.prica-p__pod-slika {
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep);
  margin-bottom: 18px;
}
.prica-p__pod-slika img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prica-p__pod h3 {
  /* razmak do teksta ispod — bio je 7 px, pa su se naslov i
     rečenica čitali kao jedan slijepljen blok */
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  margin: 0 0 9px; line-height: 1.25;
}
.prica-p__pod p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-mute); }
.prica-p__sek--tamno .prica-p__pod-slika { background: #161616; }
.prica-p__sek--tamno .prica-p__pod p { color: #a8a8a8; }

@media (max-width: 700px) {
  .prica-p__zagl { text-align: left; }
}


/* ------------------------------ slika uz tekst (ritam sekcija) */
/* Da se pet sekcija zaredom ne ponavlja u istom obliku, svaka
   druga ide kao slika i tekst jedno uz drugo. Strana se mijenja
   naizmjenično, pa oko ima za šta da se uhvati. */
.prica-p__sek--duo { padding-block: clamp(40px, 5vw, 78px) 0; }
.prica-p__duo {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(24px, 4.5vw, 72px);
}
.prica-p__duo-slika { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); }
.prica-p__duo-slika picture { display: block; width: 100%; height: 100%; }
.prica-p__duo-slika img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prica-p__duo-tekst .prica-p__naslov { font-size: clamp(22px, 2.5vw, 33px); }
.prica-p__duo-tekst .prica-p__tekst { max-width: 46ch; }
.prica-p__duo--obrnuto .prica-p__duo-slika { order: 2; }

@media (max-width: 900px) {
  .prica-p__duo { grid-template-columns: 1fr; gap: 20px; }
  .prica-p__duo--obrnuto .prica-p__duo-slika { order: 0; }
  .prica-p__duo-slika { aspect-ratio: 16 / 10; }
}

/* --------------------------------------- brojevi cijelog brenda */
/* Presjek između sekcija o proizvodu i tabele: tamna traka s dvije
   brojke. Fotografija je Huromova, bez ijednog slova na sebi. */
.standard { position: relative; overflow: hidden; background: #05070d; color: #fff; }
.standard__slika { position: absolute; inset: 0; display: block; }
.standard__slika img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .72; }
.standard::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.12) 100%);
}
.standard__in {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(52px, 8vw, 120px);
}
.standard__naslov {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(25px, 3.4vw, 42px); line-height: 1.12;
  margin: 0 0 16px; max-width: 18ch; text-wrap: balance;
}
.standard__tekst {
  font-size: clamp(14.5px, 1.3vw, 17px); line-height: 1.6;
  color: rgba(255,255,255,.82); margin: 0 0 clamp(28px, 4vw, 48px); max-width: 52ch;
}
/* role="list" ne gasi tačkice — na telefonu su se vidjele kao
   „· 12,77 M+". Lista ovdje služi samo za značenje, ne za izgled. */
.standard__brojke { display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 88px); list-style: none; margin: 0; padding: 0; }
.standard__brojke b {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 5vw, 62px); line-height: 1; letter-spacing: -.02em;
}
.standard__brojke span {
  display: block; margin-top: 8px; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62);
}

/* ============================================================
   VIDEO UZ PROIZVOD
   ------------------------------------------------------------
   Okvir drži odnos stranica preko aspect-ratio, pa prostor stoji
   rezervisan prije nego poster i stigne — sekcija ne poskakuje.

   Dugme preko postera je jedan sloj iznad videa. Kad se pusti,
   na okvir padne data-pusten i dugme nestane — ne display:none,
   nego prelaz, da nema trzaja.
   ============================================================ */
.vid {
  position: relative;
  aspect-ratio: var(--vid-odnos, 16 / 9);
  background: #05070d;
  overflow: hidden;
}
.vid__v {
  display: block; width: 100%; height: 100%;
  object-fit: cover; background: #05070d;
}

.vid__pusti {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  width: 100%; border: 0; cursor: pointer;
  background: radial-gradient(60% 60% at 50% 52%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.14) 100%);
  color: #fff; font: inherit; text-align: center;
  padding: var(--gutter);
  transition: opacity .28s ease;
}
.vid[data-pusten] .vid__pusti { opacity: 0; pointer-events: none; }

.vid__krug {
  display: grid; place-items: center;
  /* flex:none — inače ga kolona rastegne u elipsu */
  flex: none;
  width: clamp(58px, 6vw, 82px); height: clamp(58px, 6vw, 82px);
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1.5px solid rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease;
}
.vid__ik {
  width: 34%; height: 34%;
  /* Trougao optički izgleda pomjeren ulijevo kad je centriran
     geometrijski — par piksela udesno ga vraća u sredinu kruga. */
  margin-left: 6%;
  fill: #fff;
}
.vid__pusti:hover .vid__krug { background: rgba(255,255,255,.26); transform: scale(1.06); }
.vid__pusti:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

.vid__tekst {
  font-size: clamp(13px, 1.2vw, 15px);
  letter-spacing: .06em; text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(0,0,0,.5);
}
.vid__vrijeme {
  font-size: 12px; letter-spacing: .1em;
  color: rgba(255,255,255,.7);
  font-variant-numeric: tabular-nums;
}

/* Sekcija sa videom ne treba dodatni razmak ispod — sljedeća
   sekcija ima svoj gornji. */
.prica-p__video .prica-p__zagl { margin-bottom: clamp(18px, 2.2vw, 32px); }

/* ============================================================
   TRAKA U DNU (stranica proizvoda)
   ------------------------------------------------------------
   Opis je dugačak, a poziv na akciju stoji gore. Traka ga nosi
   sa sobom niz stranicu: slika, ime, boja, cijena, dugme.

   `hidden` skida traku iz toka i iz čitača ekrana kad je nema;
   `data-vidi` je ono što je animira. JavaScript prvo skine
   hidden, pa tek u sljedećem kadru doda data-vidi — inače
   browser nema iz čega da animira.
   ============================================================ */
.traka-dno {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid var(--linija, rgba(0,0,0,.1));
  box-shadow: 0 -8px 30px rgba(0,0,0,.08);
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.22,.61,.36,1);
}
.traka-dno[data-vidi] { transform: translateY(0); }
.traka-dno[hidden] { display: none; }

.traka-dno__in {
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px);
  padding-block: 10px;
}
.traka-dno__slika {
  width: 52px; height: 52px; flex: none;
  object-fit: contain; border-radius: 8px;
  background: var(--toplo, #f6f3ee);
}
.traka-dno__ime {
  min-width: 0; line-height: 1.25;
  /* Ime gura sve ostalo udesno */
  margin-right: auto;
}
.traka-dno__ime b {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(15px, 1.5vw, 18px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.traka-dno__ime span {
  display: block; font-size: 12.5px; color: var(--muted, #6b6b6b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.traka-dno__cijena {
  flex: none; font-weight: 600;
  font-size: clamp(15px, 1.5vw, 18px);
  font-variant-numeric: tabular-nums;
}
.traka-dno__cijena s { font-weight: 400; opacity: .5; font-size: .82em; margin-left: 6px; }
.traka-dno__btn { flex: none; white-space: nowrap; }

/* Uski ekrani: slika i cijena se sklanjaju, ostaje ime i dugme —
   traka mora da stane u jedan red, inače pojede pola ekrana. */
@media (max-width: 560px) {
  .traka-dno__slika { display: none; }
  .traka-dno__cijena { font-size: 14px; }
  .traka-dno__in { gap: 10px; padding-block: 8px; }
  .traka-dno__btn { padding-inline: 14px; }
}
@media (max-width: 400px) {
  .traka-dno__cijena { display: none; }
}

/* Da traka ne stoji preko posljednjeg reda podnožja */
body:has([data-traka]) footer { padding-bottom: 84px; }

/* Obavještenje o kolačićima ima prvenstvo: dok stoji, traka
   sačeka. Inače se na telefonu preklope, a posjetilac ne može
   da odgovori ni na jedno ni na drugo. */
body:has([data-cookie]:not([hidden])) .traka-dno { transform: translateY(100%); }

/* Bez JavaScripta — obična veza preko postera */
.vid__bezjs {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  color: #fff; text-decoration: none; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  background: rgba(0,0,0,.34);
}

/* Dok je mobilni meni otvoren, traka u dnu se skloni — inače viri
   ispod menija i dvije trake se svađaju za isti prostor. */
html.meni-otvoren .traka-dno { transform: translateY(100%); }

/* ============================================ AMBASADORI ===== */
/* Kartica osobe u traci. Kod Huroma portret stoji na toploj
   podlozi sa jako zaobljenim uglovima — figura je izrezana iz
   pozadine, pa podloga dolazi od kartice, ne od fotografije.
   Zato podloga ovdje, a slika preko nje. */
.osoba__portret {
  aspect-ratio: 4 / 4.3;
  background: var(--paper-warm);
  border-radius: clamp(18px, 2vw, 28px);
  overflow: hidden;
}
.osoba__portret img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Glava je ono što se pamti — kad se kadar reže, reže se dno. */
  object-position: top center;
  display: block;
  transition: transform .7s var(--ease);
}
.osoba:hover .osoba__portret img { transform: scale(1.035); }

.osoba__ime {
  font-family: var(--font-display); font-weight: 500;
  font-size: 17px; text-align: center; margin-top: 16px;
}
.osoba__uloga {
  font-size: 13px; color: var(--ink-mute);
  text-align: center; margin-top: 3px;
}
.osoba__naslov {
  font-size: 14.5px; line-height: 1.45; text-align: center;
  margin-top: 12px; color: var(--ink-soft);
  /* Naslovi razgovora su različite dužine — bez ograničenja bi
     kartice ispadale nejednako visoke i red bi se raspao. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.osoba:hover .osoba__naslov { text-decoration: underline; text-underline-offset: 3px; }

/* Stranica „Uz Hurom" — ista kartica kao u traci, ali u mreži.
   Broj kolona je zadat, ne auto-fill: osmoro ljudi se na širokom
   ekranu dijelilo na pet pa tri, i drugi red je ostajao zjapiti
   udesno. Četiri i četiri stoje mirno. */
.ljudi-mreza {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(22px, 2.6vw, 40px) clamp(14px, 1.8vw, 26px);
}
@media (min-width: 680px)  { .ljudi-mreza { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .ljudi-mreza { grid-template-columns: repeat(4, 1fr); } }

/* ============================================ ZAŠTO HUROM ==== */
/* Slike ove stranice nemaju izmjerene dimenzije kao one uz
   proizvode, pa mjesto drži odnos stranica umjesto atributa.
   Bez ovoga bi se sekcija skupila na visinu naslova dok slika ne
   stigne, pa bi sve ispod odskočilo. */
.zasto picture { display: block; width: 100%; }
.zasto .prica-p__kadar img { width: 100%; height: auto; display: block; }
.zasto .prica-p__duo-slika { aspect-ratio: auto; }
.zasto .prica-p__duo-slika img { width: 100%; height: auto; object-fit: contain; }

.zasto__znak { height: 54px; width: auto; display: block; margin-bottom: 18px; }

.zasto__fusnota {
  font-size: 12.5px; color: var(--ink-mute);
  margin: 14px auto 0; text-align: center;
}

/* Zid logotipa — nagrade i sertifikati. Sivi po zadanom, u boji
   kad se pređe mišem: dvanaest šarenih znakova odjednom razbija
   stranicu, a jedan po jedan se lijepo gleda. */
.zasto__logoi {
  list-style: none; margin: clamp(28px, 3.4vw, 48px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 36px);
  align-items: center;
}
@media (min-width: 620px)  { .zasto__logoi { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .zasto__logoi { grid-template-columns: repeat(6, 1fr); } }
.zasto__logoi img {
  width: 100%; height: auto; max-height: 64px; object-fit: contain;
  filter: grayscale(1); opacity: .62;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.zasto__logoi li:hover img { filter: none; opacity: 1; }

/* Objašnjenja uz nagrade */
.zasto__stavke {
  display: grid; gap: clamp(28px, 3.2vw, 46px);
  margin-top: clamp(36px, 4.4vw, 64px);
}
@media (min-width: 760px) { .zasto__stavke { grid-template-columns: repeat(2, 1fr); } }
.zasto__stavka h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.25;
  margin: 0 0 10px; text-wrap: balance;
}
.zasto__stavka p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.zasto__stavka-slika { margin-top: 18px; }

/* Zemlje u kojima stoje sertifikati */
.zasto__zemlje {
  list-style: none; margin: clamp(22px, 2.6vw, 36px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.zasto__zemlje li {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px;
}

/* ============================================= NAŠA PRIČA ==== */
/* Tri pitanja pa odgovor. Broj ispred pitanja nije ukras — to je
   redoslijed razmišljanja, jedno vodi u drugo. */
.prica-koraci { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(36px, 4.4vw, 68px); counter-reset: pk; max-width: 68ch; }
.prica-koraci > li { counter-increment: pk; display: grid; grid-template-columns: 2.4rem 1fr; gap: 4px 18px; }
.prica-koraci > li::before {
  content: counter(pk, decimal-leading-zero);
  font-size: 13px; color: var(--green); padding-top: 7px;
  font-variant-numeric: tabular-nums;
}
.prica-koraci h2 {
  grid-column: 2; margin: 0 0 12px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 2.2vw, 27px); line-height: 1.22; text-wrap: balance;
}
.prica-koraci p { grid-column: 2; margin: 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.66; color: var(--ink-soft); }
@media (max-width: 520px) {
  .prica-koraci > li { grid-template-columns: 1fr; }
  .prica-koraci > li::before { padding-top: 0; }
  .prica-koraci h2, .prica-koraci p { grid-column: 1; }
}
.prica-kraj {
  margin: clamp(44px, 5vw, 76px) 0 0; max-width: 46ch;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 2.1vw, 26px); line-height: 1.34; text-wrap: balance;
}

/* Vremeplov — godina lijevo, događaj desno, tanka crta između */
.vremeplov { list-style: none; margin: 0; padding: 0; }
.vremeplov > li {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 6px 24px;
  padding: clamp(18px, 2.2vw, 28px) 0;
  border-top: 1px solid var(--line);
}
.vremeplov > li:last-child { border-bottom: 1px solid var(--line); }
.vremeplov__god {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 2vw, 25px); color: var(--green-deep);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.vremeplov h3 { margin: 0 0 5px; font-size: clamp(16px, 1.5vw, 19px); font-weight: 600; }
.vremeplov p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
@media (max-width: 520px) {
  .vremeplov > li { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================ O SOKU ========= */
/* Objave o istraživanjima — spisak i sam tekst. */
.istr-lead { max-width: 62ch; color: var(--ink-soft); margin: 0 0 clamp(26px, 3vw, 40px); }

.istr-mreza {
  display: grid; gap: clamp(22px, 2.6vw, 38px);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .istr-mreza { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .istr-mreza { grid-template-columns: repeat(3, 1fr); } }

.istr__slika { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-deep); }
.istr__slika img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.istr:hover .istr__slika img { transform: scale(1.04); }
.istr h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.26;
  margin: 15px 0 8px; text-wrap: balance;
}
.istr:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.istr p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-mute); }

/* Ograda — ovo je informacija, ne savjet ljekara. Stoji i na
   spisku i na svakom tekstu, namjerno. */
.istr-ograda {
  margin: clamp(30px, 3.6vw, 48px) 0 0;
  padding: 14px 18px;
  border-left: 2px solid var(--line-firm, var(--line));
  background: var(--paper);
  font-size: 13.5px; line-height: 1.6; color: var(--ink-mute);
  max-width: 72ch;
}

/* Sam tekst. `.wrap` i `.istr-clanak` oba zadaju max-width i imaju
   istu težinu, a main.css dolazi poslije — pa je njegov 1440 px
   pobjeđivao i tekst se razvlačio preko cijelog ekrana. Dvije
   klase u jednom selektoru rješavaju spor. */
.wrap.istr-clanak { max-width: 760px; }
.istr-clanak h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.14;
  margin: 8px 0 24px; text-wrap: balance;
}
.istr-clanak__slika { margin: 0 0 clamp(28px, 3.2vw, 44px); }
.istr-clanak__slika img { width: 100%; height: auto; display: block; }
.istr-clanak h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 2vw, 25px); line-height: 1.24;
  margin: clamp(34px, 3.8vw, 52px) 0 12px; text-wrap: balance;
}
.istr-clanak p { font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.68; margin: 0 0 16px; }
.istr-clanak ul { margin: 0 0 16px; padding-left: 1.1em; }
.istr-clanak li { margin-bottom: 8px; line-height: 1.6; }

/* Izvor istraživanja — sitno, ali mora se vidjeti da postoji */
.istr__izvor {
  font-size: 13px !important; color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  margin-top: -6px !important;
}
/* Napomena uz nalaz — ograničenje istraživanja ili oprez */
.istr__napomena {
  font-size: 14px !important; line-height: 1.6 !important;
  color: var(--ink-soft);
  background: var(--paper-warm);
  padding: 13px 16px; border-left: 2px solid var(--green);
  margin: 4px 0 18px !important;
}
.istr__tabela { overflow-x: auto; margin: 0 0 20px; }
.istr__tabela table { border-collapse: collapse; width: 100%; min-width: 440px; font-size: 14.5px; }
.istr__tabela th, .istr__tabela td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.istr__tabela thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.istr__tabela tbody th { font-weight: 600; }

/* ============================================= NAGRADE ======= */
.nagr-brojke {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(22px, 2.8vw, 44px);
  grid-template-columns: 1fr;
  border-block: 1px solid var(--line);
  padding-block: clamp(26px, 3.2vw, 42px);
}
@media (min-width: 700px) { .nagr-brojke { grid-template-columns: repeat(3, 1fr); } }
.nagr-brojke b {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1;
  letter-spacing: -.02em; color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}
.nagr-brojke span {
  display: block; margin-top: 10px; font-size: 14.5px;
  line-height: 1.5; color: var(--ink-soft); max-width: 30ch;
}

/* Godina lijevo, nagrade desno — isti obrazac kao vremeplov */
.nagr { list-style: none; margin: 0; padding: 0; }
.nagr > li {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 8px 24px;
  padding: clamp(16px, 2vw, 24px) 0;
  border-bottom: 1px solid var(--line);
}
.nagr > li:first-child { border-top: 1px solid var(--line); }
.nagr__god {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(18px, 1.9vw, 23px); color: var(--green-deep);
  font-variant-numeric: tabular-nums; line-height: 1.3;
}
.nagr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nagr ul li { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 520px) {
  .nagr > li { grid-template-columns: 1fr; gap: 6px; }
}
.nagr__nota { margin: clamp(28px, 3vw, 40px) 0 0; font-size: 13.5px; color: var(--ink-mute); max-width: 66ch; }

/* =============================================================
   PODRŠKA — prečice, harmonika po kategorijama, traka modela
   ============================================================= */

/* Traka prečica iznad harmonike */
.pod-precice {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 clamp(32px, 4vw, 52px);
}
.pod-precica {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border: 1px solid var(--line);
  font-size: 14px; line-height: 1; color: var(--ink);
  text-decoration: none; transition: border-color .18s, background .18s;
}
.pod-precica:hover { border-color: var(--green); background: var(--green-soft); }
.pod-precica__ik { width: 17px; height: 17px; flex: none; color: var(--green); }

/* Naslov kategorije */
.pod-kat { margin-bottom: clamp(40px, 5vw, 64px); scroll-margin-top: 90px; }
.pod-kat__nas {
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(21px, 2.3vw, 28px); margin: 0 0 16px;
}
.pod-kat__ik { width: 24px; height: 24px; flex: none; color: var(--green); }

/* Tijelo odgovora unutar harmonike */
.pod__telo h3 {
  font-size: 15.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--green-deep); margin: 22px 0 6px;
}
.pod__telo h3:first-child { margin-top: 0; }
.pod__telo p { margin: 0 0 12px; }
.pod__telo ul, .pod__telo ol { margin: 0 0 14px; padding-left: 20px; }
.pod__telo li { margin-bottom: 6px; }
.pod__telo ol { list-style: decimal; }
.pod__telo > :last-child { margin-bottom: 0; }
.pod__nap {
  margin: 16px 0 0; padding: 12px 16px;
  background: var(--green-soft); color: var(--green-deep);
  font-size: 14px; line-height: 1.6;
}

/* Gdje piše naziv modela + čipovi */
.pod-model {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: start;
}
.pod-model p { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; max-width: 52ch; }
.pod-model__cipovi { display: flex; flex-wrap: wrap; gap: 8px; }
.pod-cip {
  display: inline-block; padding: 9px 15px;
  background: #fff; border: 1px solid var(--line);
  font-size: 14px; line-height: 1; letter-spacing: .02em;
  color: var(--ink); text-decoration: none;
  transition: border-color .18s, color .18s;
}
.pod-cip:hover { border-color: var(--green); color: var(--green-deep); }
@media (max-width: 760px) {
  .pod-model { grid-template-columns: 1fr; }
}

/* Poziv na kraju */
.pod-kraj {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--line);
}
.pod-kraj p { margin: 0; color: var(--ink-soft); max-width: 58ch; }

/* =============================================================
   ČESTA PITANJA — raskrsnica po temama
   ============================================================= */
.faq-karte {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.faq-karta {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(22px, 2.6vw, 32px);
  background: #fff; text-decoration: none; color: inherit;
  transition: background .18s;
}
.faq-karta:hover { background: var(--green-soft); }
.faq-karta__ik { width: 26px; height: 26px; color: var(--green); }
.faq-karta h3 { margin: 4px 0 0; font-size: 17px; line-height: 1.3; }
.faq-karta p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); flex: 1; }
.faq-karta__veza {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 6px; font-size: 13.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--green-deep);
}
.faq-karta__veza svg { width: 14px; height: 14px; flex: none; }

/* =============================================================
   ISKUSTVA KORISNIKA
   ============================================================= */
.rec-prazno {
  padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--line);
}
.rec-prazno p { margin: 0 0 12px; color: var(--ink-soft); max-width: 60ch; line-height: 1.7; }
.rec-prazno p:last-of-type { margin-bottom: 0; }

/* Zbirna ocjena */
.rec-zbir {
  display: grid; gap: 10px;
  padding-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}
.rec-zbir__broj { display: flex; align-items: center; gap: 16px; }
.rec-zbir__broj b {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(38px, 5vw, 62px); line-height: 1;
  color: var(--green-deep); font-variant-numeric: tabular-nums;
}
.rec-zbir__opis { margin: 0; font-size: 15px; color: var(--ink-soft); }
.rec-zbir__pravila { margin: 0; font-size: 13.5px; color: var(--ink-mute); max-width: 64ch; line-height: 1.6; }

/* Zvjezdice */
.rec__zv { display: inline-flex; gap: 3px; }
.rec__zv1 { width: 17px; height: 17px; color: var(--line); }
.rec__zv1.je { color: #c9962f; }

/* Kartice */
.rec-mreza {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin-top: clamp(24px, 3vw, 36px);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.rec {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 2.6vw, 30px); background: #fff;
}
.rec[hidden] { display: none; }
.rec__vrh { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rec__vrh time { font-size: 13px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.rec__tekst { margin: 0; flex: 1; font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); }
.rec__dno {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--ink-mute);
}
.rec__dno strong { color: var(--ink); font-weight: 500; }
.rec__dno a { color: var(--green-deep); }
.rec__potv { display: inline-flex; align-items: center; gap: 5px; color: var(--green); }
.rec__potv svg { width: 14px; height: 14px; flex: none; }

/* =============================================================
   PARTNERSTVO
   ============================================================= */
.card__ik { width: 26px; height: 26px; color: var(--green); margin-bottom: 12px; }

.part-dobit { margin-bottom: clamp(36px, 4vw, 56px); }
.part-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px 36px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .part-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .part-lista { grid-template-columns: 1fr; } }
.part-lista li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15.5px; line-height: 1.6; color: var(--ink-soft);
}
.part-lista svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--green); }

/* Prečice podrške na telefonu: jedan red koji se prevlači, kao
   filtri recepata — tri reda pločica pojedu pola ekrana. */
@media (max-width: 620px) {
  .pod-precice {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 4px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .pod-precice::-webkit-scrollbar { display: none; }
  .pod-precica { flex: none; }
}

/* -------------------------------- preklop teksta preko podloge
   Za sekcije čija je slika pravljena kao podloga: motiv desno,
   prazan bijeli prostor lijevo. Tekst ide u taj prazan prostor,
   kao i kod Huroma. Ispod 760 px slika se mijenja za uski rez
   koji prazninu nema, pa preklopa nema — naslov stoji iznad. */
.zasto-prek__slika { display: block; width: 100%; height: auto; }

/* Na telefonu nema preklopa, ali naslov mora ostati IZNAD slike —
   kao u svim ostalim sekcijama. U kodu slika stoji prva (zbog
   preklopa na širokom ekranu), pa se ovdje samo premješta. */
.zasto-prek__okvir { display: flex; flex-direction: column; }
.zasto-prek__zagl { order: -1; }
.zasto-prek .zasto__fusnota { text-align: center; }

@media (min-width: 760px) {
  .zasto-prek__okvir { position: relative; }
  .zasto-prek__zagl {
    position: absolute; z-index: 2;
    left: 0; right: 0; bottom: 0;
    width: 100%; max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter) clamp(36px, 6vw, 104px);
    text-align: left;
  }
  .zasto-prek__zagl .prica-p__naslov { max-width: 13ch; }
  .zasto-prek__zagl .prica-p__tekst { max-width: 40ch; margin-inline: 0; }
  .zasto-prek__okvir { display: block; }
  .zasto-prek .zasto__fusnota {
    text-align: left; max-width: 40ch; margin: 14px 0 0;
  }
}

/* ------------------------------------- poređenje dvije metode
   Siva i zelena kartica jedna uz drugu, po ugledu na Huromove
   okvire u infografici. Zelena je naša strana, pa nosi boju. */
.blize {
  display: grid; gap: clamp(14px, 1.6vw, 22px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.blize__k {
  padding: clamp(24px, 2.8vw, 38px);
  display: flex; flex-direction: column; gap: 12px;
}
.blize__k h3 { margin: 0; font-size: clamp(17px, 1.7vw, 21px); }
.blize__k p { margin: 0; font-size: 15px; line-height: 1.65; }
.blize__k ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 9px; }
.blize__k li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.55; }
.blize__k li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

.blize__k--neutralno { background: var(--paper-warm); color: var(--ink); }
.blize__k--neutralno p, .blize__k--neutralno li { color: var(--ink-soft); }
.blize__k--neutralno li svg { color: var(--ink-mute); }

.blize__k--hurom { background: var(--green-deep); color: #f1efe6; }
.blize__k--hurom p, .blize__k--hurom li { color: rgba(241, 239, 230, .86); }
.blize__k--hurom li svg { color: #7fc48d; }

@media (max-width: 680px) {
  .blize { grid-template-columns: 1fr; }
}

/* ------------------------------ Huromove grafike za crnu podlogu
   Dio njihovih slika je pravljen za skoro crnu pozadinu: natpisi i
   logotipi su bijeli. Na svijetloj podlozi se izgube. Kod njih su
   ti blokovi #0a0a0a i #050505, pa su i kod nas tamni. */
.prica-p__sek--duo.prica-p__sek--tamno { padding-top: clamp(48px, 6vw, 92px); }
.prica-p__sek--tamno .zasto__logoi img { filter: none; opacity: .85; }
.prica-p__sek--tamno .zasto__logoi li:hover img { opacity: 1; }
.prica-p__sek--tamno .zasto__fusnota { color: #9a9a9a; }

/* ---------------------------------------- svjetska štampa o Huromu
   STARI BLOK — zamijenjen niže, preko :has(). Ostavljen prazan
   namjerno se ne briše da ne ostane mrtva klasa u CSS-u.
   ---------------------------------------- svjetska štampa o Huromu
   Grafika sa citatima je pravljena za tamnu podlogu — dio oblačića
   je namjerno prigušen, a tekst u njima je bijel. Kod Huroma iza nje
   stoji tamnoplava fotografija (why-hurom-media-bg.jpg) koju nemamo,
   pa je zamijenjena prelivom u istom tonu. Kad fotografija stigne,
   ovdje se mijenja samo pozadina. */
.zasto-mediji {
  background: linear-gradient(160deg, #1a3b49 0%, #122c38 45%, #0c1d26 100%);
  color: #eef2f3;
  padding-block: clamp(48px, 6vw, 92px);
  text-align: center;
}
.zasto-mediji h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(21px, 2.4vw, 30px); line-height: 1.25;
  margin: 0 auto 14px; max-width: 22ch; text-wrap: balance; color: #fff;
}
.zasto-mediji p {
  margin: 0 auto; max-width: 58ch;
  font-size: clamp(15px, 1.3vw, 16.5px); line-height: 1.65;
  color: rgba(238, 242, 243, .82);
}
.zasto-mediji__slika { margin-top: clamp(28px, 3.4vw, 48px); }
.zasto-mediji__slika img { width: 100%; height: auto; display: block; }

/* =============================================================
   GRAFIKE ZA TAMNU PODLOGU — bez diranja HTML-a
   -------------------------------------------------------------
   Tri Huromove grafike su pravljene za skoro crnu pozadinu: tekst
   i logotipi u njima su bijeli, pa na svijetloj podlozi nestanu.
   Dvije su riješene klasom u HTML-u, a ove dvije ovdje — preko
   :has(), tako da ispravka putuje samo kroz sajt.css i ne traži
   ponovno slanje stranice.
   ============================================================= */

/* „Zdravlje ne trpi kompromis" — dijelovi uređaja snimljeni na crnom.
   Kod njih iza stoji why-hurom-premium-bg.jpg. */
.prica-p__sek--duo:has(img[src*="premium-img"]) {
  background: #0b0b0b; color: #fff;
  padding-block: clamp(48px, 6vw, 92px);
}
.prica-p__sek--duo:has(img[src*="premium-img"]) .prica-p__naslov { color: #fff; }
.prica-p__sek--duo:has(img[src*="premium-img"]) .prica-p__tekst { color: #c9c9c9; }
.prica-p__sek--duo:has(img[src*="premium-img"]) .prica-p__nad { color: #6ee2a4; }

/* Svjetska štampa — oblačići sa citatima. Dio ih je namjerno
   prigušen, tekst u njima bijel. Kod njih iza stoji tamnoplava
   fotografija why-hurom-media-bg.jpg koju nemamo, pa je ovdje
   preliv u istom tonu. Kartica se razvlači preko obje kolone. */
.zasto__stavka:has(.zasto__stavka-slika) {
  grid-column: 1 / -1;
  background: linear-gradient(160deg, #1a3b49 0%, #122c38 45%, #0c1d26 100%);
  color: #eef2f3;
  padding: clamp(28px, 3.4vw, 52px);
  text-align: center;
  margin-top: clamp(12px, 1.6vw, 24px);
}
.zasto__stavka:has(.zasto__stavka-slika) h3 {
  color: #fff; margin-inline: auto; max-width: 24ch;
}
.zasto__stavka:has(.zasto__stavka-slika) p {
  color: rgba(238, 242, 243, .82); margin-inline: auto; max-width: 58ch;
}
.zasto__stavka:has(.zasto__stavka-slika) .zasto__stavka-slika {
  margin-top: clamp(22px, 3vw, 40px);
}
.zasto__stavka:has(.zasto__stavka-slika) img { width: 100%; height: auto; display: block; }

/* Duo sekcija bez slike — tekst sam, centriran */
.prica-p__duo--bez-slike {
  grid-template-columns: 1fr; max-width: 820px; text-align: center;
}
.prica-p__duo--bez-slike .zasto__znak { margin-inline: auto; }
.prica-p__duo--bez-slike .prica-p__tekst { max-width: 60ch; margin-inline: auto; }

/* Isto, ali za stranicu koja je već na serveru: slika je tamo još
   u HTML-u, pa se ovdje sakriva. Kad HTML bude osvježen, ovo
   pravilo prestane da pogađa bilo šta. */
.prica-p__sek--duo:has(img[src*="since-img"]) .prica-p__duo-slika { display: none; }
.prica-p__sek--duo:has(img[src*="since-img"]) .prica-p__duo {
  grid-template-columns: 1fr; max-width: 820px; text-align: center;
}
.prica-p__sek--duo:has(img[src*="since-img"]) .zasto__znak { margin-inline: auto; }
.prica-p__sek--duo:has(img[src*="since-img"]) .prica-p__tekst { max-width: 60ch; margin-inline: auto; }


/* =============================================================
   HUROM SOKOVNICI — dizajn sistem
   ============================================================= */

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

/* overflow-x: clip odsijeca prelijevanje `.bleed` sekcija (100vw je
   šire od sadržaja za širinu trake za pomjeranje). NE mijenjati u
   `hidden` — on pravi novi okvir za pomjeranje i gasi `position:
   sticky` na panelu proizvoda. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 20px;
}
.skip:focus { left: 0; }

/* ------------------------------------------------ layout helpers */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 820px; }
.section { padding-block: var(--sec-y); }
.section--warm { background: var(--paper-warm); }
.section--deep { background: var(--paper-deep); }
.section--ink { background: var(--green-deep); color: #f1efe6; }

/* ------------------------------------------------ tipografija */
.eyebrow {
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-mute); margin: 0 0 18px;
}
.h-display {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08;
  letter-spacing: -.015em; margin: 0;
}
/* Skala izmjerena na hurom-europe.com (13.09.2026):
   H2 44/52 težina 500 · H3 24/28 · tekst 16.
   Naša je bila upola manja i zato je sajt djelovao sitno.
   Vrijednosti stoje OVDJE, ne u dizajn.css — @import stavlja
   uvezene fajlove ispred ovih pravila, pa bi ih ovo pregazilo. */
.h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.12; letter-spacing: -.015em; margin: 0 0 20px; }
.h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.18; letter-spacing: -.012em; margin: 0 0 18px; }
.h3 { font-size: clamp(18px, 1.7vw, 24px); font-weight: 500; line-height: 1.2; margin: 0 0 10px; letter-spacing: -.005em; }
.lead { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.6; color: var(--ink-soft); margin: 0 0 28px; max-width: 62ch; }
.body-copy p { margin: 0 0 1.1em; color: var(--ink-soft); }
.body-copy p:last-child { margin-bottom: 0; }
.muted { color: var(--ink-mute); }
.small { font-size: 13.5px; }

/* ------------------------------------------------ dugmad */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 0;
  font-size: 14.5px; font-weight: 500; letter-spacing: .01em;
  border: 1px solid transparent; transition: all .25s var(--ease);
  background: var(--ink); color: #fff;
}
.btn:hover { background: var(--green-deep); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--paper-warm); color: var(--ink); }
.btn--sm { padding: 10px 20px; font-size: 13px; }
.btn svg { width: 15px; height: 15px; flex: none; }

/* Veza sa strelicom je jedna cjelina — ako se prelomi, strelica
   ostane u drugom redu a crta ispod presiječe tekst. Na telefonu
   se to dešavalo kod „Pogledajte sve →". */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-weight: 600; font-size: 14.5px;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: gap .25s var(--ease);
}
.link-arrow:hover { gap: 14px; }
/* Strelica je inline <svg> bez width/height atributa. Unutar
   flex reda joj je osnovna širina ispadala 0, pa se veza čitala
   kao gola podvučena riječ bez strelice. */
.link-arrow svg { width: 15px; height: 15px; flex: none; }

/* ------------------------------------------------ PROMO TRAKA */
.promo { background: var(--green-deep); color: #f1efe6; font-size: 13.5px; }
.promo__in {
  display: flex; align-items: center; justify-content: center; gap: 8px 16px;
  flex-wrap: wrap; min-height: 42px; padding-block: 9px; text-align: center;
}
.promo strong { font-weight: 600; }
.promo span { opacity: .65; }
.promo code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px;
  letter-spacing: .08em; background: rgba(255,255,255,.14);
  padding: 3px 10px; border-radius: 0;
}
.promo a { font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 1px; }
.promo a:hover { border-color: #fff; }
.promo__vise { opacity: .7; }
@media (max-width: 640px) { .promo__in { font-size: 12.5px; gap: 6px 10px; } }

/* ------------------------------------------------ CIJENE S POPUSTOM */
.cijena--akcija { color: var(--accent); }
.pcard__price s, .pdp__price s, .linecard__list s {
  color: var(--ink-mute); font-weight: 400; font-size: .82em; margin-inline-start: 6px;
  white-space: nowrap;          /* „81.923 RSD" se ne smije lomiti */
}
.pcard__price { display: block; line-height: 1.35; white-space: nowrap; }
.pcard__foot { align-items: flex-start; }
@media (max-width: 380px) { .pcard__price { white-space: normal; } }
.cijena--kod {
  display: block; font-size: 11.5px; font-weight: 500; color: var(--green);
  letter-spacing: 0; margin-top: 2px;
}
.cijena--kod b { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .04em; }
.pdp__price .znak-popust, .znak-popust {
  background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 5px 11px; border-radius: 0; letter-spacing: .02em; white-space: nowrap;
}
.pdp__akcija {
  font-size: 13.5px; color: var(--accent); font-weight: 600; margin: 0 0 4px;
}
.pdp__kupon {
  /* Ranije `margin: 8px 0 0` — kutija kupona je odozdo dodirivala
     napomenu o PDV-u, pa su izgledale kao jedan blok. */
  font-size: 14px; margin: 10px 0 16px; padding: 12px 16px;
  background: var(--green-soft); border-radius: 0; color: var(--green-deep);
}
.pdp__kupon b { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .05em; }

/* ------------------------------------------------ KARTICA AKCIJE */
.akcije-lista { display: grid; gap: 16px; }
.akcija {
  display: grid; grid-template-columns: 1fr auto; gap: 20px 32px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 0;
  padding: clamp(22px, 3vw, 32px); align-items: start;
}
@media (max-width: 720px) { .akcija { grid-template-columns: 1fr; } }
.akcija--zakazana { background: var(--paper-warm); }
.akcija--istekla { opacity: .55; }
.akcija__stanje {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px;
}
.akcija__stanje::before { content: ''; width: 7px; height: 7px; border-radius: 0; background: currentColor; }
.akcija--aktivna .akcija__stanje { color: var(--accent); }
.akcija--zakazana .akcija__stanje { color: var(--ink-mute); }
.akcija--istekla .akcija__stanje { color: var(--ink-mute); }
.akcija h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 2vw, 24px); margin: 0 0 10px; }
.akcija p { margin: 0 0 14px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; max-width: 60ch; }
.akcija__meta { display: grid; gap: 7px; font-size: 13.5px; color: var(--ink-mute); }
.akcija__meta b { color: var(--ink); font-weight: 600; }
.akcija__side { text-align: right; display: grid; gap: 12px; justify-items: end; }
@media (max-width: 720px) { .akcija__side { text-align: left; justify-items: start; } }
.akcija__popust {
  font-family: var(--font-display); font-size: clamp(40px, 5vw, 58px);
  line-height: 1; color: var(--accent);
}
.akcija__kod {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px dashed var(--green); border-radius: 0; padding: 10px 14px;
  background: var(--green-soft);
}
.akcija__kod code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 15px;
  font-weight: 600; letter-spacing: .08em; color: var(--green-deep);
}
.akcija__kod button {
  background: none; border: 0; font-size: 12px; font-weight: 600;
  color: var(--green); border-bottom: 1px solid currentColor; padding: 0 0 1px;
}
.akcija__bezkoda { font-size: 13px; color: var(--green); font-weight: 600; }
.akcija__modeli { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; list-style: none; padding: 0; }
.akcija__modeli a {
  font-size: 12.5px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 0;
  color: var(--ink-soft); transition: .18s;
}
.akcija__modeli a:hover { border-color: var(--ink); color: var(--ink); }

/* ------------------------------------------------ HEADER */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid var(--line-soft);
}
/* Mutno staklo ide na POMOĆNI SLOJ, ne na samo zaglavlje.
   -------------------------------------------------------------
   Element sa `backdrop-filter` postaje okvir za svoje potomke sa
   `position: fixed` — oni se onda mjere prema njemu, a ne prema
   ekranu. Mobilni meni je potomak zaglavlja, pa mu je `inset:
   68px 0 0` značilo „do dna ZAGLAVLJA": otvarao se kao traka od
   osamdesetak piksela u kojoj se ništa nije vidjelo.

   Na pseudo-elementu efekat izgleda isto, a zaglavlje više nije
   okvir — meni se opet otvara preko cijelog ekrana. */
.hdr::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
}
.hdr__bar { display: flex; align-items: center; gap: 28px; height: 68px; }
/* Zaglavlje: Hurom znak (slika) + naša odrednica ispod.
   Ako slika ikad padne, onerror otkrije tekst „HUROM" pa
   zaglavlje nikad ne ostane prazno. */
.hdr__logo { font-family: var(--font-display); font-size: 26px; letter-spacing: .06em; font-weight: 600; flex: none; display: block; line-height: 1; }
.hdr__znak { height: 26px; width: auto; display: block; }
.hdr__tekst { display: block; font-weight: 600; letter-spacing: .06em; }
.hdr__logo span { font-size: 10px; letter-spacing: .2em; display: block; font-family: var(--font-body); font-weight: 600; color: var(--ink-mute); margin-top: 3px; }
@media (max-width: 640px) { .hdr__znak { height: 22px; } .hdr__logo { font-size: 22px; } }
.hdr__nav { display: flex; gap: 4px; margin-inline-start: auto; }
.hdr__item { position: relative; }
.hdr__link {
  display: flex; align-items: center; gap: 5px; padding: 10px 14px;
  font-size: 14.5px; font-weight: 500; border-radius: 0;
  transition: background .2s;
}
.hdr__link:hover { background: var(--paper-warm); }
.hdr__link svg { width: 10px; height: 10px; opacity: .5; transition: transform .2s; }
.hdr__item:hover .hdr__link svg, .hdr__item:focus-within .hdr__link svg { transform: rotate(180deg); }

.hdr__panel {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(-6px);
  background: #fff; border: 1px solid var(--line-soft); border-radius: 0;
  box-shadow: var(--shadow-lg); padding: 26px 30px; display: flex; gap: 44px;
  opacity: 0; visibility: hidden; transition: all .2s var(--ease); min-width: 380px;
}
.hdr__item:hover .hdr__panel, .hdr__item:focus-within .hdr__panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.hdr__col h4 { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 12px; font-weight: 600; }
.hdr__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hdr__col a { display: block; padding: 6px 0; font-size: 14.5px; white-space: nowrap; transition: color .18s, padding .18s; }
.hdr__col a:hover { color: var(--green); padding-inline-start: 5px; }

.hdr__tools { display: flex; align-items: center; gap: 6px; flex: none; }
.langsel { position: relative; }
.langsel__btn {
  display: flex; align-items: center; gap: 7px; padding: 8px 12px;
  background: transparent; border: 1px solid var(--line); border-radius: 0;
  font-size: 13px; font-weight: 600;
}
.langsel__btn:hover { border-color: var(--ink); }
.langsel__list {
  position: absolute; right: 0; top: calc(100% + 6px); background: #fff;
  border: 1px solid var(--line-soft); border-radius: 0; box-shadow: var(--shadow-lg);
  padding: 6px; min-width: 190px; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s var(--ease);
}
.langsel[open] .langsel__list, .langsel:focus-within .langsel__list { opacity: 1; visibility: visible; transform: translateY(0); }
.langsel__list a { display: flex; gap: 10px; align-items: baseline; padding: 9px 12px; border-radius: 0; font-size: 14px; }
.langsel__list a:hover { background: var(--paper-warm); }
.langsel__list a[aria-current] { background: var(--green-soft); font-weight: 600; }
.langsel__list em { font-style: normal; color: var(--ink-mute); font-size: 12px; margin-inline-start: auto; }

.burger { display: none; background: none; border: 0; padding: 10px; }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); margin: 4px 0; transition: transform .25s var(--ease), opacity .2s; }
/* Tri crte postaju X — da se vidi da isto dugme i zatvara */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* mobilni meni */
.mnav { display: none; }
@media (max-width: 1040px) {
  .hdr__nav { display: none; }
  .burger { display: block; }
  /* --mnav-vrh upisuje JavaScript pri otvaranju: donja ivica
     zaglavlja u tom trenutku. Iznad zaglavlja zna stajati traka sa
     akcijom, pa fiksnih 68px nije uvijek tačno. 68px je rezerva ako
     JS ne stigne. */
  .mnav { display: block; position: fixed; inset: var(--mnav-vrh, 68px) 0 0; background: #fff; z-index: 99; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 20px var(--gutter) max(60px, env(safe-area-inset-bottom)); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; }
  .mnav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
  .mnav details { border-bottom: 1px solid var(--line-soft); }
  .mnav summary { padding: 16px 0; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
  .mnav summary::-webkit-details-marker { display: none; }
  .mnav summary::after { content: '+'; font-size: 20px; color: var(--ink-mute); }
  .mnav details[open] summary::after { content: '−'; }
  .mnav ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 2px; }
  .mnav ul a { display: block; padding: 9px 0 9px 14px; font-size: 15px; color: var(--ink-soft); border-left: 1px solid var(--line); }
  .mnav h5 { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin: 10px 0 8px; }
  .mnav > a.mnav__flat { display: block; padding: 16px 0; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--line-soft); }
}

/* ------------------------------------------------ HERO */
/* Hero je u dizajn.css — stari blok (slika kao druga kolona) je
   uklonjen. U spojenom CSS-u dolazio je POSLE dizajn.css i gazio
   `position: absolute` na .hero__media, pa su video i rezervna
   fotografija stajali JEDNO PORED DRUGOG umjesto jedno preko
   drugog, a tekst se stiskao u desnu trećinu. */

/* ------------------------------------------------ USP traka */
.usps { border-bottom: 1px solid var(--line-soft); background: #fff; }
.usps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); }
.usps__item { background: #fff; padding: 26px 22px; }
.usps__item strong { display: block; font-size: 14.5px; margin-bottom: 4px; }
.usps__item span { font-size: 13px; color: var(--ink-mute); line-height: 1.45; display: block; }
@media (max-width: 860px) { .usps__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .usps__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------ sekcija header */
.sec-head { max-width: 720px; margin-bottom: clamp(34px, 4vw, 56px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--split { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.sec-head--split > div { max-width: 620px; }

/* ------------------------------------------------ kartice proizvoda */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(16px, 2vw, 28px); }
.pcard {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line-soft); border-radius: 0;
  overflow: hidden; transition: all .3s var(--ease);
}
.pcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--line); }
.pcard__media { position: relative; aspect-ratio: 1/1; background: var(--paper-warm); padding: 22px; }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .45s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 0;
}
.pcard__body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.pcard__line { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; margin-bottom: 7px; }
.pcard__name { font-size: 19px; font-weight: 600; margin: 0 0 9px; letter-spacing: -.01em; }
.pcard__tag { font-size: 13.5px; color: var(--ink-mute); line-height: 1.45; margin: 0 0 16px; flex: 1; }
.pcard__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pcard__price { font-size: 17px; font-weight: 600; }
.pcard__price small { font-size: 12px; font-weight: 400; color: var(--ink-mute); display: block; }
/* „Saznajte više →" — bez nowrap se strelica na uskom ekranu
   otkinula u novi red, ispod cijene. */
.pcard__cta { font-size: 13px; font-weight: 600; color: var(--green); white-space: nowrap; flex: none; }

/* ------------------------------------------------ linije (Easy / Pure) */
.lines { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); }
@media (max-width: 820px) { .lines { grid-template-columns: 1fr; } }
.linecard { background: #fff; border: 1px solid var(--line-soft); border-radius: 0; padding: clamp(24px, 3vw, 40px); }
.linecard__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 10px; }
.linecard__tag { font-size: 15px; color: var(--green); font-weight: 600; margin: 0 0 18px; }
.linecard__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 12px; margin: 24px 0 22px; }
.linecard__list a { display: block; text-align: center; padding: 14px 8px; border: 1px solid var(--line-soft); border-radius: 0; font-size: 13.5px; font-weight: 600; transition: .2s; }
.linecard__list a:hover { border-color: var(--ink); background: var(--paper-warm); }
.linecard__list img { aspect-ratio: 1/1; object-fit: contain; margin-bottom: 8px; }
.linecard__list span { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-mute); }

/* tabela poređenja */
.ctable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ctable th, .ctable td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.ctable thead th { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.ctable tbody th { font-weight: 600; width: 24%; color: var(--ink); }
.ctable td { color: var(--ink-soft); width: 38%; }
.ctable__scroll { overflow-x: auto; }
@media (max-width: 700px) { .ctable { min-width: 640px; } }

/* ------------------------------------------------ stat blokovi */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); border-radius: 0; overflow: hidden; }
.stats__i { background: var(--green-deep); padding: 30px 24px; }
.stats__n { font-family: var(--font-display); font-size: clamp(34px, 4vw, 50px); line-height: 1; }
.stats__n em { font-style: normal; font-size: .38em; font-family: var(--font-body); margin-inline-start: 6px; opacity: .7; letter-spacing: .04em; }
.stats__t { font-weight: 600; font-size: 14.5px; margin: 12px 0 4px; }
.stats__d { font-size: 13px; opacity: .68; line-height: 1.45; }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .stats { grid-template-columns: 1fr; } }

/* ------------------------------------------------ split blok */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split--rev > div:first-child { order: 2; }
.split__media { aspect-ratio: 4/3; background: var(--paper-warm); border-radius: 0; overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split--rev > div:first-child { order: 0; } }

/* ------------------------------------------------ kartice (generičke) */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(14px, 2vw, 24px); }
.card { background: #fff; border: 1px solid var(--line-soft); border-radius: 0; padding: 26px 24px; transition: .25s var(--ease); }
a.card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); }
/* 6 px je naslov lijepilo za rečenicu ispod — čitalo se kao jedan blok */
.card h3 { margin-bottom: 9px; }
.card p { margin: 0; font-size: 14px; color: var(--ink-mute); line-height: 1.5; }
.card__num { font-family: var(--font-display); font-size: 30px; color: var(--green); line-height: 1; margin-bottom: 14px; }

/* ------------------------------------------------ recepti */
.rcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.rcat { background: #fff; border: 1px solid var(--line-soft); border-radius: 0; padding: 24px 22px; }
.rcat h3 { font-size: 17px; }
.rcat p { font-size: 13px; color: var(--ink-mute); margin: 0 0 14px; }
.rcat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rcat li { font-size: 13.5px; color: var(--ink-soft); padding-inline-start: 14px; position: relative; }
.rcat li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 0; background: var(--green); }

/* ------------------------------------------------ RECEPTI */
/* Kartice recepata su u dizajn.css — stari blok je uklonjen jer
   je u spojenom CSS-u dolazio POSLE njega i gazio ga (okvir,
   sjenka, uvučena slika). */

.recept { max-width: 900px; }
.recept__glava { border-bottom: 1px solid var(--line); padding-bottom: 26px; margin-bottom: clamp(26px, 3vw, 40px); }
.recept__meta { display: flex; flex-wrap: wrap; gap: 10px 36px; list-style: none; margin: 24px 0 0; padding: 0; }
.recept__meta li { display: grid; gap: 2px; }
.recept__meta span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.recept__meta strong { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

.recept__tijelo { display: grid; grid-template-columns: minmax(220px, 1fr) 1.7fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
@media (max-width: 760px) { .recept__tijelo { grid-template-columns: 1fr; } }
.recept h2 { font-family: var(--font-display); font-weight: 500; font-size: 24px; margin: 0 0 16px; }

.recept__sastojci { background: var(--paper-warm); border-radius: 0; padding: 26px 24px; position: sticky; top: 92px; }
@media (max-width: 760px) { .recept__sastojci { position: static; } }
.recept__sastojci ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.recept__sastojci li { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: 14.5px; color: var(--ink-soft); align-items: baseline; }
.recept__kol { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.recept__koraci ol { margin: 0; padding: 0; list-style: none; counter-reset: k; display: grid; gap: 16px; }
.recept__koraci li {
  counter-increment: k; position: relative; padding-inline-start: 42px;
  font-size: 15.5px; line-height: 1.6; color: var(--ink-soft);
}
.recept__koraci li::before {
  content: counter(k); position: absolute; left: 0; top: -1px;
  width: 27px; height: 27px; border-radius: 0;
  background: var(--green-soft); color: var(--green-deep);
  font-size: 13px; font-weight: 600; display: grid; place-items: center;
}

/* ------------------------------------------------ PROIZVOD */
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 72px); padding-block: clamp(30px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }
.pdp__gallery { position: sticky; top: 92px; }
@media (max-width: 900px) { .pdp__gallery { position: static; } }
.pdp__main { aspect-ratio: 1/1; background: var(--paper-warm); border-radius: 0; padding: 6%; }
.pdp__main img { width: 100%; height: 100%; object-fit: contain; }
/* Traka sličica je flex red dugmadi fiksne širine. Kod modela sa
   7 slika njen min-content (7×74 + razmaci) bio je širi od ekrana
   telefona, pa je RAZVLAČILA cijelu kolonu — naslov, cijena i
   dugmad su izlazili izvan ekrana i stranica se pomjerala
   vodoravno. Stavke grida moraju smjeti da se skupe, a traka se
   onda pomjera sama. */
.pdp > * { min-width: 0; }
.pdp__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.pdp__thumbs button { flex: none; width: 74px; aspect-ratio: 1/1; padding: 8px; background: var(--paper-warm); border: 1px solid transparent; border-radius: 0; transition: .2s; }
.pdp__thumbs button[aria-current="true"] { border-color: var(--ink); }
.pdp__thumbs img { width: 100%; height: 100%; object-fit: contain; }

.pdp__line { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--green); font-weight: 600; margin-bottom: 12px; }
.pdp__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 42px); margin: 0 0 10px; line-height: 1.05; }
.pdp__tagline { font-size: 18px; color: var(--ink-soft); margin: 0 0 24px; }
.pdp__price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.pdp__price strong { font-size: 30px; font-weight: 600; letter-spacing: -.01em; }
.pdp__price span { font-size: 14px; color: var(--ink-mute); }
.pdp__note { font-size: 13px; color: var(--ink-mute); margin: 0 0 26px; }
/* ---------------------------------------------- izbor boje */
.boje { margin: 0 0 28px; }
.boje .eyebrow { margin-bottom: 10px; }
.boje__ime { text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 600; margin-inline-start: 8px; }
.boje__lista { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.boja { background: none; border: 0; padding: 3px; border-radius: 0; line-height: 0; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .18s var(--ease); }
.boja:hover { box-shadow: inset 0 0 0 1px var(--ink-mute); }
.boja[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.boja__krug { display: block; width: 30px; height: 30px; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(20,21,15,.14); }
.boje__sku { font-size: 13px; color: var(--ink-mute); margin: 0; }
.boje__sku code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; color: var(--ink); letter-spacing: .04em; }
.vizuelno-skriveno { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pdp__feat { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 11px; }
.pdp__feat li { position: relative; padding-inline-start: 26px; font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.pdp__feat li::before {
  content: ''; position: absolute; left: 0; top: .42em; width: 15px; height: 15px;
  border-radius: 0; background: var(--green-soft);
  box-shadow: inset 0 0 0 1.5px var(--green);
}
.pdp__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.spectable { width: 100%; border-collapse: collapse; font-size: 15px; }
.spectable th, .spectable td { padding: 15px 4px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.spectable th { font-weight: 500; color: var(--ink-mute); width: 45%; }
.spectable td { font-weight: 600; }
.taglist { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.taglist li { font-size: 13.5px; padding: 8px 15px; background: #fff; border: 1px solid var(--line-soft); border-radius: 0; }

/* ------------------------------------------------ FAQ */
.faq-cat { margin-bottom: 44px; scroll-margin-top: 90px; }
.faq-cat > h2 { font-size: clamp(22px, 2.4vw, 30px); }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  padding: 20px 40px 20px 0; font-size: 16.5px; font-weight: 600; cursor: pointer;
  position: relative; list-style: none; line-height: 1.45;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ''; position: absolute; right: 6px; top: 28px; width: 11px; height: 11px;
  border-right: 1.5px solid var(--ink-mute); border-bottom: 1.5px solid var(--ink-mute);
  transform: rotate(45deg); transition: transform .22s var(--ease);
}
.acc details[open] summary::after { transform: rotate(-135deg); top: 32px; }
.acc .acc__body { padding: 0 40px 24px 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; }

/* ------------------------------------------------ obrazac */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.field--check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-soft); }
.field--check input { width: auto; margin-top: 3px; }

/* Zamka za botove — mora biti nevidljiva, ali ne display:none
   (dio botova preskače takva polja) */
.zamka {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ------------------------------------------------ newsletter */
.nl { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
@media (max-width: 820px) { .nl { grid-template-columns: 1fr; } }
.nl__form { display: flex; gap: 10px; flex-wrap: wrap; }
.nl__form input { flex: 1 1 240px; padding: 14px 18px; font: inherit; font-size: 15px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: inherit; border-radius: 0; }
.nl__form input::placeholder { color: rgba(255,255,255,.5); }
.nl__form input:focus { outline: none; border-color: #fff; }

/* ------------------------------------------------ FOOTER */
.ftr { background: var(--ink); color: #cfd0c7; padding-block: clamp(50px, 6vw, 80px) 30px; font-size: 14px; }
.ftr__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(24px, 3vw, 50px); padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (max-width: 900px) { .ftr__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr__top { grid-template-columns: 1fr; } }
.ftr__logo { font-family: var(--font-display); font-size: 26px; color: #fff; letter-spacing: .06em; margin-bottom: 14px; display: block; line-height: 1; }
/* Odrednica tržišta ispod znaka — isto kao u zaglavlju */
.ftr__logo span {
  display: block; margin-top: 4px; font-family: var(--font-body);
  font-size: 10px; font-weight: 600; letter-spacing: .2em; color: #8a8d81;
}
.ftr__about p { margin: 0 0 18px; line-height: 1.6; max-width: 34ch; }
/* Kontakt: ikona lijevo, podatak desno — tri reda poravnata */
.ftr__contact { display: grid; gap: 9px; font-size: 13.5px; }
.ftr__contact > * { display: flex; align-items: center; gap: 10px; }
.ftr__contact svg { width: 16px; height: 16px; flex: none; color: var(--green); }
.ftr__contact a:hover { color: #fff; }
.ftr h4 { color: #fff; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 16px; font-weight: 600; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ftr ul a { transition: color .18s; }
.ftr ul a:hover { color: #fff; }
.ftr__bottom { padding-top: 26px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: #8a8d81; }
.ftr__bottom ul { display: flex; gap: 20px; flex-wrap: wrap; }

/* ------------------------------------------------ cookie */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  box-shadow: var(--shadow-lg); padding: 18px 22px; max-width: 560px;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.cookie p { margin: 0; font-size: 13.5px; color: var(--ink-soft); flex: 1 1 260px; }
.cookie__btns { display: flex; gap: 8px; }

/* ------------------------------------------------ breadcrumb */
.crumb { font-size: 13px; color: var(--ink-mute); padding-block: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumb a:hover { color: var(--ink); }
.crumb span { opacity: .5; }

/* ------------------------------------------------ page hero */
.phero { background: var(--paper-warm); padding-block: clamp(44px, 6vw, 88px); border-bottom: 1px solid var(--line-soft); }
.phero .h1 { margin-bottom: 16px; }
.phero .lead { margin-bottom: 0; }

/* ------------------------------------------------ prose */
.prose { max-width: 76ch; }
.prose h2 { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 34px); margin: 44px 0 14px; font-weight: 400; }
.prose h3 { font-size: 18px; margin: 30px 0 10px; }
.prose p, .prose li { color: var(--ink-soft); line-height: 1.72; }
.prose p { margin: 0 0 1.05em; }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-inline-start: 22px; display: grid; gap: 7px; }
.prose a { color: var(--green); border-bottom: 1px solid currentColor; }
.prose > *:first-child { margin-top: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--line-soft); padding: 11px 14px; text-align: left; }
.prose th { background: var(--paper-warm); font-weight: 600; }

/* ------------------------------------------------ filter dugmad */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.filters button {
  padding: 9px 18px; border-radius: 0; border: 1px solid var(--line);
  background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); transition: .2s;
}
.filters button:hover { border-color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ------------------------------------------------ notice */
.notice { background: var(--green-soft); border: 1px solid rgba(53,96,58,.2); border-radius: 0; padding: 20px 24px; font-size: 14.5px; color: var(--green-deep); }
.notice strong { display: block; margin-bottom: 4px; }

/* ------------------------------------------------ jezik landing */
.langpick { min-height: 100vh; display: grid; place-items: center; background: var(--paper-deep); padding: 40px 20px; text-align: center; }
.langpick__box { max-width: 520px; }
.langpick__grid { display: grid; gap: 12px; margin-top: 34px; }
.langpick__grid a { display: flex; align-items: center; gap: 14px; padding: 18px 24px; background: #fff; border: 1px solid var(--line); border-radius: 0; text-align: left; transition: .2s; }
.langpick__grid a:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); }
.langpick__grid strong { display: block; font-size: 16px; }
.langpick__grid em { font-style: normal; font-size: 13px; color: var(--ink-mute); }
.langpick__grid span { font-size: 26px; }

/* ------------------------------------------------ obavezna polja
   Obrazac je imao `required` u kodu, ali se to nigdje nije vidjelo
   — posjetilac je saznavao koje polje mora popuniti tek kad ga
   browser zaustavi. Zvjezdica uz naziv to kaže unaprijed. */
.field:has(input[required], select[required], textarea[required]) > label::after {
  content: '*';
  margin-left: 4px;
  /* --accent je rezervisan za sniženja; zvjezdica uzima zelenu
     brenda da se ne pomiješa sa oznakom popusta */
  color: var(--green);
  font-weight: 400;
}
/* Skrivena zamka za robote nema vidljiv naziv, pa ni zvjezdicu */
.zamka label::after { content: none; }